fixes, theming, branding

components/admin/AdminTimeSlotManagement.tsx

@@ -7,6 +7,17 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import { Switch } from '@/components/ui/switch';
 import { Plus, Edit, Trash2, Clock } from 'lucide-react';
 import { useToast } from '@/hooks/use-toast';
@@ -30,7 +41,11 @@ export function AdminTimeSlotManagement() {
 	const [timeSlots, setTimeSlots] = useState<TimeSlot[]>([]);
 	const [loading, setLoading] = useState(false);
 	const [showDialog, setShowDialog] = useState(false);
+	const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+	const [showWipeDayDialog, setShowWipeDayDialog] = useState(false);
 	const [editingSlot, setEditingSlot] = useState<TimeSlot | null>(null);
+	const [slotToDelete, setSlotToDelete] = useState<TimeSlot | null>(null);
+	const [dayToWipe, setDayToWipe] = useState<number | null>(null);
 	const [formData, setFormData] = useState({
 		dayOfWeek: 1, // Default to Monday (Irish standard)
 		startTime: '',
@@ -115,11 +130,20 @@ export function AdminTimeSlotManagement() {
 		}
 	};
 
-	const handleDelete = async (id: string) => {
-		if (!confirm('Are you sure you want to delete this time slot?')) {
-			return;
-		}
+	const openDeleteDialog = (slot: TimeSlot) => {
+		setSlotToDelete(slot);
+		setShowDeleteDialog(true);
+	};
 
+	const confirmDeleteSlot = async () => {
+		if (slotToDelete) {
+			await handleDelete(slotToDelete.id);
+			setShowDeleteDialog(false);
+			setSlotToDelete(null);
+		}
+	};
+
+	const handleDelete = async (id: string) => {
 		try {
 			setLoading(true);
 			const response = await fetch(`/api/admin/time-slots/${id}`, {
@@ -152,14 +176,23 @@ export function AdminTimeSlotManagement() {
 		}
 	};
 
-	const handleWipeDay = async (dayOfWeek: number) => {
-		const dayName = DAYS[dayOfWeek];
-		if (!confirm(`Are you sure you want to delete ALL time slots for ${dayName}? This action cannot be undone.`)) {
-			return;
-		}
+	const openWipeDayDialog = (dayOfWeek: number) => {
+		setDayToWipe(dayOfWeek);
+		setShowWipeDayDialog(true);
+	};
 
+	const confirmWipeDay = async () => {
+		if (dayToWipe !== null) {
+			await handleWipeDay(dayToWipe);
+			setShowWipeDayDialog(false);
+			setDayToWipe(null);
+		}
+	};
+
+	const handleWipeDay = async (dayOfWeek: number) => {
 		try {
 			setLoading(true);
+			const dayName = DAYS[dayOfWeek];
 			const slotsToDelete = timeSlots.filter((slot) => slot.dayOfWeek === dayOfWeek);
 
 			// Delete all slots for this day
@@ -322,7 +355,7 @@ export function AdminTimeSlotManagement() {
 											<Button
 												size='sm'
 												variant='outline'
-												onClick={() => handleWipeDay(jsDayOfWeek)}
+												onClick={() => openWipeDayDialog(jsDayOfWeek)}
 												className='text-destructive hover:text-destructive/80 hover:bg-destructive/10'
 												disabled={loading}
 											>
@@ -369,7 +402,7 @@ export function AdminTimeSlotManagement() {
 															<Button
 																size='sm'
 																variant='outline'
-																onClick={() => handleDelete(slot.id)}
+																onClick={() => openDeleteDialog(slot)}
 																className='text-destructive hover:text-destructive/80'
 															>
 																<Trash2 className='h-4 w-4' />
@@ -389,6 +422,46 @@ export function AdminTimeSlotManagement() {
 					</div>
 				)}
 			</CardContent>
+
+			{/* Delete Time Slot Dialog */}
+			<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete this time slot? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={confirmDeleteSlot}
+							className='bg-destructive hover:bg-destructive/90'
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+
+			{/* Wipe Day Dialog */}
+			<AlertDialog open={showWipeDayDialog} onOpenChange={setShowWipeDayDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete ALL time slots for{' '}
+							{dayToWipe !== null ? DAYS[dayToWipe] : 'this day'}? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={confirmWipeDay} className='bg-destructive hover:bg-destructive/90'>
+							Delete All
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</Card>
 	);
 }