368 lines
13 KiB
TypeScript
368 lines
13 KiB
TypeScript
import { useState } from "react"
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Plus, Edit, Trash2 } from "lucide-react"
|
|
import { announcementService } from "@/services"
|
|
import { toast } from "sonner"
|
|
import { format } from "date-fns"
|
|
|
|
export default function AnnouncementsPage() {
|
|
const queryClient = useQueryClient()
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
|
const [formDialogOpen, setFormDialogOpen] = useState(false)
|
|
const [selectedAnnouncement, setSelectedAnnouncement] = useState<any>(null)
|
|
const [formData, setFormData] = useState({
|
|
title: '',
|
|
message: '',
|
|
type: 'info' as 'info' | 'warning' | 'success' | 'error',
|
|
priority: 0,
|
|
targetAudience: 'all',
|
|
startsAt: '',
|
|
endsAt: '',
|
|
})
|
|
|
|
const { data: announcements, isLoading } = useQuery({
|
|
queryKey: ['admin', 'announcements'],
|
|
queryFn: () => announcementService.getAnnouncements(false),
|
|
})
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (data: any) => announcementService.createAnnouncement(data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin', 'announcements'] })
|
|
toast.success("Announcement created successfully")
|
|
setFormDialogOpen(false)
|
|
resetForm()
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error.response?.data?.message || "Failed to create announcement")
|
|
},
|
|
})
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ id, data }: { id: string; data: any }) =>
|
|
announcementService.updateAnnouncement(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin', 'announcements'] })
|
|
toast.success("Announcement updated successfully")
|
|
setFormDialogOpen(false)
|
|
resetForm()
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error.response?.data?.message || "Failed to update announcement")
|
|
},
|
|
})
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (id: string) => announcementService.deleteAnnouncement(id),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['admin', 'announcements'] })
|
|
toast.success("Announcement deleted successfully")
|
|
setDeleteDialogOpen(false)
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error.response?.data?.message || "Failed to delete announcement")
|
|
},
|
|
})
|
|
|
|
const resetForm = () => {
|
|
setFormData({
|
|
title: '',
|
|
message: '',
|
|
type: 'info',
|
|
priority: 0,
|
|
targetAudience: 'all',
|
|
startsAt: '',
|
|
endsAt: '',
|
|
})
|
|
setSelectedAnnouncement(null)
|
|
}
|
|
|
|
const handleOpenCreateDialog = () => {
|
|
resetForm()
|
|
setFormDialogOpen(true)
|
|
}
|
|
|
|
const handleOpenEditDialog = (announcement: any) => {
|
|
setSelectedAnnouncement(announcement)
|
|
setFormData({
|
|
title: announcement.title || '',
|
|
message: announcement.message || '',
|
|
type: announcement.type || 'info',
|
|
priority: announcement.priority || 0,
|
|
targetAudience: announcement.targetAudience || 'all',
|
|
startsAt: announcement.startsAt ? announcement.startsAt.split('T')[0] : '',
|
|
endsAt: announcement.endsAt ? announcement.endsAt.split('T')[0] : '',
|
|
})
|
|
setFormDialogOpen(true)
|
|
}
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!formData.title || !formData.message) {
|
|
toast.error("Title and message are required")
|
|
return
|
|
}
|
|
|
|
const submitData = {
|
|
...formData,
|
|
startsAt: formData.startsAt || undefined,
|
|
endsAt: formData.endsAt || undefined,
|
|
}
|
|
|
|
if (selectedAnnouncement) {
|
|
updateMutation.mutate({ id: selectedAnnouncement.id, data: submitData })
|
|
} else {
|
|
createMutation.mutate(submitData)
|
|
}
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
if (selectedAnnouncement) {
|
|
deleteMutation.mutate(selectedAnnouncement.id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-3xl font-bold">Announcements</h2>
|
|
<Button onClick={handleOpenCreateDialog}>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Create Announcement
|
|
</Button>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>All Announcements</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="text-center py-8">Loading announcements...</div>
|
|
) : (
|
|
<>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Title</TableHead>
|
|
<TableHead>Type</TableHead>
|
|
<TableHead>Priority</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Start Date</TableHead>
|
|
<TableHead>End Date</TableHead>
|
|
<TableHead>Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{announcements?.map((announcement: any) => (
|
|
<TableRow key={announcement.id}>
|
|
<TableCell className="font-medium">{announcement.title}</TableCell>
|
|
<TableCell>
|
|
<Badge>{announcement.type || 'info'}</Badge>
|
|
</TableCell>
|
|
<TableCell>{announcement.priority || 0}</TableCell>
|
|
<TableCell>
|
|
<Badge variant={announcement.isActive ? 'default' : 'secondary'}>
|
|
{announcement.isActive ? 'Active' : 'Inactive'}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
{announcement.startsAt ? format(new Date(announcement.startsAt), 'MMM dd, yyyy') : 'N/A'}
|
|
</TableCell>
|
|
<TableCell>
|
|
{announcement.endsAt ? format(new Date(announcement.endsAt), 'MMM dd, yyyy') : 'N/A'}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleOpenEditDialog(announcement)}
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => {
|
|
setSelectedAnnouncement(announcement)
|
|
setDeleteDialogOpen(true)
|
|
}}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
{announcements?.length === 0 && (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No announcements found
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Create/Edit Dialog */}
|
|
<Dialog open={formDialogOpen} onOpenChange={setFormDialogOpen}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{selectedAnnouncement ? 'Edit Announcement' : 'Create Announcement'}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{selectedAnnouncement
|
|
? 'Update the announcement details below.'
|
|
: 'Fill in the details to create a new announcement.'}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Title *</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Message *</label>
|
|
<textarea
|
|
className="w-full px-3 py-2 border rounded-md min-h-[100px]"
|
|
value={formData.message}
|
|
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Type</label>
|
|
<select
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={formData.type}
|
|
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
|
|
>
|
|
<option value="info">Info</option>
|
|
<option value="warning">Warning</option>
|
|
<option value="success">Success</option>
|
|
<option value="error">Error</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Priority</label>
|
|
<input
|
|
type="number"
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={formData.priority}
|
|
onChange={(e) => setFormData({ ...formData, priority: parseInt(e.target.value) || 0 })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Target Audience</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={formData.targetAudience}
|
|
onChange={(e) => setFormData({ ...formData, targetAudience: e.target.value })}
|
|
placeholder="all, admins, users, etc."
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Start Date</label>
|
|
<input
|
|
type="date"
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={formData.startsAt}
|
|
onChange={(e) => setFormData({ ...formData, startsAt: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">End Date</label>
|
|
<input
|
|
type="date"
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
value={formData.endsAt}
|
|
onChange={(e) => setFormData({ ...formData, endsAt: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => {
|
|
setFormDialogOpen(false)
|
|
resetForm()
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={createMutation.isPending || updateMutation.isPending}
|
|
>
|
|
{selectedAnnouncement ? 'Update' : 'Create'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Delete Dialog */}
|
|
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Delete Announcement</DialogTitle>
|
|
<DialogDescription>
|
|
Are you sure you want to delete "{selectedAnnouncement?.title}"? This action cannot be undone.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button variant="destructive" onClick={handleDelete}>
|
|
Delete
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|