fixes, theming, branding

components/admin/AdminAnnouncementManagement.tsx

@@ -8,6 +8,17 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Textarea } from '@/components/ui/textarea';
 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { useToast } from '@/hooks/use-toast';
@@ -37,7 +48,9 @@ export function AdminAnnouncementManagement() {
 	const [loading, setLoading] = useState(true);
 	const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 	const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 	const [editingAnnouncement, setEditingAnnouncement] = useState<Announcement | null>(null);
+	const [announcementToDelete, setAnnouncementToDelete] = useState<Announcement | null>(null);
 	const [formData, setFormData] = useState<AnnouncementFormData>({
 		title: '',
 		content: '',
@@ -176,12 +189,21 @@ export function AdminAnnouncementManagement() {
 		}
 	};
 
+	const openDeleteDialog = (announcement: Announcement) => {
+		setAnnouncementToDelete(announcement);
+		setIsDeleteDialogOpen(true);
+	};
+
+	const confirmDeleteAnnouncement = async () => {
+		if (announcementToDelete) {
+			await handleDeleteAnnouncement(announcementToDelete.id);
+			setIsDeleteDialogOpen(false);
+			setAnnouncementToDelete(null);
+		}
+	};
+
 	const handleDeleteAnnouncement = async (announcementId: string) => {
 		try {
-			if (!confirm('Are you sure you want to delete this announcement?')) {
-				return;
-			}
-
 			const response = await fetch(`/api/admin/announcements/${announcementId}`, {
 				method: 'DELETE',
 			});
@@ -444,7 +466,7 @@ export function AdminAnnouncementManagement() {
 											<Button
 												variant='outline'
 												size='sm'
-												onClick={() => handleDeleteAnnouncement(announcement.id)}
+												onClick={() => openDeleteDialog(announcement)}
 												className='text-destructive hover:text-destructive/90'
 											>
 												<Trash2 className='h-4 w-4' />
@@ -539,6 +561,29 @@ export function AdminAnnouncementManagement() {
 					</div>
 				</DialogContent>
 			</Dialog>
+
+			{/* Delete Confirmation Dialog */}
+			<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete{' '}
+							{announcementToDelete ? `"${announcementToDelete.title}"` : 'this announcement'}? This
+							action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={confirmDeleteAnnouncement}
+							className='bg-destructive hover:bg-destructive/90'
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 }