feat: 完成 P1 全部功能 + 修复 proxy 导出 + 切换 MySQL 端口至 14013
## P1 功能（20 项） - 站内消息系统、家长仪表盘、学生考勤管理 - Excel 导入导出、用户批量导入、成绩导出 - 排课规则+自动排课+课表调整 - 成绩趋势+对比分析、密码安全策略、速率限制 - 数据变更日志、文件预览+存储策略、全文检索 - 依赖审计集成 CI、数据库定时备份、E2E 测试完善 - 通知偏好管理 ## 基础设施修复 - src/proxy.ts: 将 middleware 导出重命名为 proxy（Next.js 16 要求） - .env: MySQL 端口从 13002 切换至 14013 - scripts/create-db.ts: 新增数据库初始化脚本 ## 架构文档同步 - 004_architecture_impact_map.md 和 005_architecture_data.json 完整记录所有新增表、模块、路由、权限、依赖关系
This commit is contained in:
SpecialX
@@ -0,0 +1,65 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { PlusCircle } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
|
||||
|
||||
import { AnnouncementForm } from "./announcement-form"
|
||||
import { AnnouncementList } from "./announcement-list"
|
||||
import type { Announcement, AnnouncementStatus } from "../types"
|
||||
|
||||
export function AdminAnnouncementsView({
|
||||
announcements,
|
||||
grades = [],
|
||||
classes = [],
|
||||
initialStatus,
|
||||
}: {
|
||||
announcements: Announcement[]
|
||||
grades?: { id: string; name: string }[]
|
||||
classes?: { id: string; name: string }[]
|
||||
initialStatus?: AnnouncementStatus
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
|
||||
const handleOpenChange = (open: boolean) => {
|
||||
setCreateOpen(open)
|
||||
if (!open) router.refresh()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Announcements</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Create and manage school-wide announcements.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
New Announcement
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<AnnouncementList
|
||||
announcements={announcements}
|
||||
canManage
|
||||
initialStatus={initialStatus}
|
||||
detailHrefBuilder={(id) => `/admin/announcements/${id}`}
|
||||
/>
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Announcement</DialogTitle>
|
||||
</DialogHeader>
|
||||
<AnnouncementForm mode="create" grades={grades} classes={classes} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
79
src/modules/announcements/components/announcement-card.tsx
Normal file
79
src/modules/announcements/components/announcement-card.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { useMemo } from "react"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import type { Announcement } from "../types"
|
||||
|
||||
const STATUS_LABEL: Record<Announcement["status"], string> = {
|
||||
draft: "Draft",
|
||||
published: "Published",
|
||||
archived: "Archived",
|
||||
}
|
||||
|
||||
const STATUS_VARIANT: Record<
|
||||
Announcement["status"],
|
||||
"default" | "secondary" | "outline"
|
||||
> = {
|
||||
draft: "secondary",
|
||||
published: "default",
|
||||
archived: "outline",
|
||||
}
|
||||
|
||||
const TYPE_LABEL: Record<Announcement["type"], string> = {
|
||||
school: "School",
|
||||
grade: "Grade",
|
||||
class: "Class",
|
||||
}
|
||||
|
||||
export function AnnouncementCard({
|
||||
announcement,
|
||||
href,
|
||||
}: {
|
||||
announcement: Announcement
|
||||
href?: string
|
||||
}) {
|
||||
const card = useMemo(
|
||||
() => (
|
||||
<Card className="h-full transition-colors hover:bg-accent/50">
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
|
||||
<CardTitle className="line-clamp-2 text-base">{announcement.title}</CardTitle>
|
||||
<Badge variant={STATUS_VARIANT[announcement.status]} className="shrink-0">
|
||||
{STATUS_LABEL[announcement.status]}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<p className="line-clamp-3 text-sm text-muted-foreground whitespace-pre-wrap">
|
||||
{announcement.content}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{TYPE_LABEL[announcement.type]}
|
||||
</Badge>
|
||||
<span>
|
||||
{announcement.publishedAt
|
||||
? `Published ${formatDate(announcement.publishedAt)}`
|
||||
: `Updated ${formatDate(announcement.updatedAt)}`}
|
||||
</span>
|
||||
{announcement.authorName ? (
|
||||
<span className="ml-auto">by {announcement.authorName}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
),
|
||||
[announcement]
|
||||
)
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<Link href={href} className="block h-full">
|
||||
{card}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return card
|
||||
}
|
||||
206
src/modules/announcements/components/announcement-detail.tsx
Normal file
206
src/modules/announcements/components/announcement-detail.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { toast } from "sonner"
|
||||
import {
|
||||
Archive,
|
||||
ArrowLeft,
|
||||
Megaphone,
|
||||
Pencil,
|
||||
Send,
|
||||
Trash2,
|
||||
} from "lucide-react"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/shared/components/ui/alert-dialog"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
|
||||
import {
|
||||
archiveAnnouncementAction,
|
||||
deleteAnnouncementAction,
|
||||
publishAnnouncementAction,
|
||||
} from "../actions"
|
||||
import type { Announcement } from "../types"
|
||||
|
||||
const STATUS_LABEL: Record<Announcement["status"], string> = {
|
||||
draft: "Draft",
|
||||
published: "Published",
|
||||
archived: "Archived",
|
||||
}
|
||||
|
||||
const TYPE_LABEL: Record<Announcement["type"], string> = {
|
||||
school: "School",
|
||||
grade: "Grade",
|
||||
class: "Class",
|
||||
}
|
||||
|
||||
export function AnnouncementDetail({
|
||||
announcement,
|
||||
canManage,
|
||||
editHref,
|
||||
backHref,
|
||||
}: {
|
||||
announcement: Announcement
|
||||
canManage?: boolean
|
||||
editHref?: string
|
||||
backHref?: string
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [isWorking, setIsWorking] = useState(false)
|
||||
const [deleteOpen, setDeleteOpen] = useState(false)
|
||||
|
||||
const handlePublish = async () => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await publishAnnouncementAction(announcement.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to publish")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to publish")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchive = async () => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await archiveAnnouncementAction(announcement.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to archive")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to archive")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await deleteAnnouncementAction(announcement.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
router.push("/admin/announcements")
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to delete")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to delete")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
setDeleteOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{backHref ? (
|
||||
<Button asChild variant="ghost" size="icon">
|
||||
<a href={backHref}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
) : null}
|
||||
<h2 className="text-2xl font-bold tracking-tight">Announcement</h2>
|
||||
</div>
|
||||
{canManage ? (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{announcement.status !== "published" ? (
|
||||
<Button onClick={handlePublish} disabled={isWorking} variant="outline">
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
Publish
|
||||
</Button>
|
||||
) : null}
|
||||
{announcement.status !== "archived" ? (
|
||||
<Button onClick={handleArchive} disabled={isWorking} variant="outline">
|
||||
<Archive className="mr-2 h-4 w-4" />
|
||||
Archive
|
||||
</Button>
|
||||
) : null}
|
||||
{editHref ? (
|
||||
<Button asChild>
|
||||
<a href={editHref}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</a>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
disabled={isWorking}
|
||||
variant="destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{TYPE_LABEL[announcement.type]}
|
||||
</Badge>
|
||||
<Badge className="capitalize">{STATUS_LABEL[announcement.status]}</Badge>
|
||||
</div>
|
||||
<CardTitle className="text-2xl">{announcement.title}</CardTitle>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<Megaphone className="h-3 w-3" />
|
||||
<span>
|
||||
{announcement.publishedAt
|
||||
? `Published ${formatDate(announcement.publishedAt)}`
|
||||
: `Created ${formatDate(announcement.createdAt)}`}
|
||||
</span>
|
||||
{announcement.authorName ? <span>by {announcement.authorName}</span> : null}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="whitespace-pre-wrap text-sm leading-relaxed">{announcement.content}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete announcement</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will permanently delete "{announcement.title}".
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isWorking}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} disabled={isWorking}>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
201
src/modules/announcements/components/announcement-form.tsx
Normal file
201
src/modules/announcements/components/announcement-form.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Textarea } from "@/shared/components/ui/textarea"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select"
|
||||
|
||||
import { createAnnouncementAction, updateAnnouncementAction } from "../actions"
|
||||
import type { Announcement } from "../types"
|
||||
|
||||
type Mode = "create" | "edit"
|
||||
|
||||
export function AnnouncementForm({
|
||||
mode,
|
||||
announcement,
|
||||
grades = [],
|
||||
classes = [],
|
||||
}: {
|
||||
mode: Mode
|
||||
announcement?: Announcement
|
||||
grades?: { id: string; name: string }[]
|
||||
classes?: { id: string; name: string }[]
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [isWorking, setIsWorking] = useState(false)
|
||||
|
||||
const [type, setType] = useState<string>(announcement?.type ?? "school")
|
||||
const [status, setStatus] = useState<string>(announcement?.status ?? "draft")
|
||||
const [targetGradeId, setTargetGradeId] = useState<string>(announcement?.targetGradeId ?? "")
|
||||
const [targetClassId, setTargetClassId] = useState<string>(announcement?.targetClassId ?? "")
|
||||
|
||||
const handleSubmit = async (formData: FormData) => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
formData.set("type", type)
|
||||
formData.set("status", status)
|
||||
if (type === "grade" && targetGradeId) {
|
||||
formData.set("targetGradeId", targetGradeId)
|
||||
}
|
||||
if (type === "class" && targetClassId) {
|
||||
formData.set("targetClassId", targetClassId)
|
||||
}
|
||||
|
||||
const res =
|
||||
mode === "create"
|
||||
? await createAnnouncementAction(null, formData)
|
||||
: announcement
|
||||
? await updateAnnouncementAction(announcement.id, null, formData)
|
||||
: null
|
||||
|
||||
if (!res) {
|
||||
toast.error("Invalid form state")
|
||||
return
|
||||
}
|
||||
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
router.push("/admin/announcements")
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to save announcement")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to save announcement")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
{mode === "create" ? "New Announcement" : "Edit Announcement"}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="title">Title</Label>
|
||||
<Input
|
||||
id="title"
|
||||
name="title"
|
||||
placeholder="Announcement title"
|
||||
defaultValue={announcement?.title ?? ""}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="content">Content</Label>
|
||||
<Textarea
|
||||
id="content"
|
||||
name="content"
|
||||
placeholder="Write the announcement content..."
|
||||
className="min-h-[160px]"
|
||||
defaultValue={announcement?.content ?? ""}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label>Type</Label>
|
||||
<Select value={type} onValueChange={setType}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="school">School</SelectItem>
|
||||
<SelectItem value="grade">Grade</SelectItem>
|
||||
<SelectItem value="class">Class</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="type" value={type} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label>Status</Label>
|
||||
<Select value={status} onValueChange={setStatus}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="draft">Draft</SelectItem>
|
||||
<SelectItem value="published">Published</SelectItem>
|
||||
<SelectItem value="archived">Archived</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="status" value={status} />
|
||||
</div>
|
||||
|
||||
{type === "grade" ? (
|
||||
<div className="grid gap-2 md:col-span-2">
|
||||
<Label>Target Grade</Label>
|
||||
<Select value={targetGradeId} onValueChange={setTargetGradeId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a grade (optional)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{grades.map((g) => (
|
||||
<SelectItem key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="targetGradeId" value={targetGradeId} />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{type === "class" ? (
|
||||
<div className="grid gap-2 md:col-span-2">
|
||||
<Label>Target Class</Label>
|
||||
<Select value={targetClassId} onValueChange={setTargetClassId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a class (optional)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="targetClassId" value={targetClassId} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<CardFooter className="justify-end gap-2 px-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.push("/admin/announcements")}
|
||||
disabled={isWorking}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isWorking}>
|
||||
{isWorking ? "Saving..." : mode === "create" ? "Create" : "Save"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
108
src/modules/announcements/components/announcement-list.tsx
Normal file
108
src/modules/announcements/components/announcement-list.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Plus } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select"
|
||||
import { Megaphone } from "lucide-react"
|
||||
|
||||
import { AnnouncementCard } from "./announcement-card"
|
||||
import type { Announcement, AnnouncementStatus } from "../types"
|
||||
|
||||
type Filter = "all" | AnnouncementStatus
|
||||
|
||||
const FILTER_OPTIONS: { value: Filter; label: string }[] = [
|
||||
{ value: "all", label: "All" },
|
||||
{ value: "published", label: "Published" },
|
||||
{ value: "draft", label: "Draft" },
|
||||
{ value: "archived", label: "Archived" },
|
||||
]
|
||||
|
||||
export function AnnouncementList({
|
||||
announcements,
|
||||
canManage,
|
||||
createHref,
|
||||
detailHrefBuilder,
|
||||
initialStatus,
|
||||
}: {
|
||||
announcements: Announcement[]
|
||||
canManage?: boolean
|
||||
createHref?: string
|
||||
detailHrefBuilder?: (id: string) => string
|
||||
initialStatus?: Filter
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [filter, setFilter] = useState<Filter>(initialStatus ?? "all")
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (filter === "all") return announcements
|
||||
return announcements.filter((a) => a.status === filter)
|
||||
}, [announcements, filter])
|
||||
|
||||
const handleFilterChange = (value: string) => {
|
||||
setFilter(value as Filter)
|
||||
const params = new URLSearchParams()
|
||||
if (value !== "all") params.set("status", value)
|
||||
const qs = params.toString()
|
||||
router.replace(qs ? `?${qs}` : "?")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<Select value={filter} onValueChange={handleFilterChange}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Filter by status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{FILTER_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{canManage && createHref ? (
|
||||
<Button asChild>
|
||||
<a href={createHref}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Announcement
|
||||
</a>
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No announcements"
|
||||
description={
|
||||
announcements.length === 0
|
||||
? "There are no announcements yet."
|
||||
: "No announcements match the current filter."
|
||||
}
|
||||
icon={Megaphone}
|
||||
className="h-auto border-none shadow-none"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filtered.map((a) => (
|
||||
<AnnouncementCard
|
||||
key={a.id}
|
||||
announcement={a}
|
||||
href={detailHrefBuilder ? detailHrefBuilder(a.id) : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user