fixes, theming, branding

components/admin/AdminCourtManagement.tsx

@@ -6,6 +6,17 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 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 { Badge } from '@/components/ui/badge';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -32,7 +43,9 @@ export function AdminCourtManagement() {
 	const [editing, setEditing] = useState<string | null>(null);
 	const [deleting, setDeleting] = useState<string | null>(null);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 	const [editingCourt, setEditingCourt] = useState<Court | null>(null);
+	const [courtToDelete, setCourtToDelete] = useState<Court | null>(null);
 	const [formData, setFormData] = useState<CourtFormData>({
 		name: '',
 		isActive: true,
@@ -150,11 +163,20 @@ export function AdminCourtManagement() {
 		setIsDialogOpen(true);
 	};
 
-	const handleDelete = async (courtId: string) => {
-		if (!confirm('Are you sure you want to delete this court? This action cannot be undone.')) {
-			return;
-		}
+	const openDeleteDialog = (court: Court) => {
+		setCourtToDelete(court);
+		setIsDeleteDialogOpen(true);
+	};
 
+	const confirmDeleteCourt = async () => {
+		if (courtToDelete) {
+			await handleDelete(courtToDelete.id);
+			setIsDeleteDialogOpen(false);
+			setCourtToDelete(null);
+		}
+	};
+
+	const handleDelete = async (courtId: string) => {
 		try {
 			setDeleting(courtId);
 			const response = await fetch(`/api/admin/courts/${courtId}`, {
@@ -319,7 +341,7 @@ export function AdminCourtManagement() {
 											<Button
 												size='sm'
 												variant='outline'
-												onClick={() => handleDelete(court.id)}
+												onClick={() => openDeleteDialog(court)}
 												disabled={deleting === court.id}
 												className='text-red-600 hover:text-red-700'
 											>
@@ -337,6 +359,28 @@ export function AdminCourtManagement() {
 					</div>
 				)}
 			</CardContent>
+
+			{/* Delete Confirmation Dialog */}
+			<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete {courtToDelete ? `"${courtToDelete.name}"` : 'this court'}?
+							This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={confirmDeleteCourt}
+							className='bg-destructive hover:bg-destructive/90'
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</Card>
 	);
 }