c9e46f9f80
- Add grade-dashboard components directory for school-wide grade analytics - Add grade-insights-filters component for filtering grade insights - Update grades-view and data-access
922 lines
36 KiB
TypeScript
922 lines
36 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
import { BarChart3, MoreHorizontal, Pencil, Plus, Trash2, Users, GraduationCap, UserCog } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
import { useRouter } from "next/navigation"
|
|
import { parseAsString, useQueryState } from "nuqs"
|
|
import { useTranslations } from "next-intl"
|
|
|
|
import type { GradeListItem, SchoolListItem, StaffOption } from "../types"
|
|
import type { GradeOverviewStats } from "../data-access"
|
|
import { createGradeAction, deleteGradeAction, updateGradeAction } from "../actions"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
|
|
import { Input } from "@/shared/components/ui/input"
|
|
import { Label } from "@/shared/components/ui/label"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
|
import { EmptyState } from "@/shared/components/ui/empty-state"
|
|
import { Badge } from "@/shared/components/ui/badge"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/shared/components/ui/dropdown-menu"
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/shared/components/ui/alert-dialog"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
|
|
import { formatDate } from "@/shared/lib/utils"
|
|
|
|
type FormState = {
|
|
schoolId: string
|
|
name: string
|
|
order: string
|
|
gradeHeadId: string
|
|
teachingHeadId: string
|
|
}
|
|
|
|
const toFormState = (item: GradeListItem | null, fallbackSchoolId: string): FormState => ({
|
|
schoolId: item?.school.id ?? fallbackSchoolId,
|
|
name: item?.name ?? "",
|
|
order: String(item?.order ?? 0),
|
|
gradeHeadId: item?.gradeHead?.id ?? "",
|
|
teachingHeadId: item?.teachingHead?.id ?? "",
|
|
})
|
|
|
|
type FormErrors = Partial<Record<keyof FormState, string>>
|
|
|
|
const normalizeName = (v: string) => v.trim().replace(/\s+/g, " ")
|
|
|
|
const NONE_SELECT_VALUE = "__none__"
|
|
|
|
const parseOrder = (raw: string) => {
|
|
const v = raw.trim()
|
|
if (!v) return 0
|
|
const n = Number(v)
|
|
if (!Number.isFinite(n) || !Number.isInteger(n) || n < 0) return null
|
|
return n
|
|
}
|
|
|
|
export function GradesClient({
|
|
grades,
|
|
schools,
|
|
staff,
|
|
gradeStats,
|
|
}: {
|
|
grades: GradeListItem[]
|
|
schools: SchoolListItem[]
|
|
staff: StaffOption[]
|
|
gradeStats: GradeOverviewStats[]
|
|
}) {
|
|
const t = useTranslations("school")
|
|
const router = useRouter()
|
|
const [isWorking, setIsWorking] = useState(false)
|
|
const [createOpen, setCreateOpen] = useState(false)
|
|
const [editItem, setEditItem] = useState<GradeListItem | null>(null)
|
|
const [deleteItem, setDeleteItem] = useState<GradeListItem | null>(null)
|
|
|
|
const [q, setQ] = useQueryState("q", parseAsString.withDefault(""))
|
|
const [school, setSchool] = useQueryState("school", parseAsString.withDefault("all"))
|
|
const [head, setHead] = useQueryState("head", parseAsString.withDefault("all"))
|
|
const [sort, setSort] = useQueryState("sort", parseAsString.withDefault("default"))
|
|
|
|
const defaultSchoolId = useMemo(() => schools[0]?.id ?? "", [schools])
|
|
const [createState, setCreateState] = useState<FormState>(() => toFormState(null, defaultSchoolId))
|
|
const [editState, setEditState] = useState<FormState>(() => toFormState(null, defaultSchoolId))
|
|
|
|
// 年级概览统计映射，用于卡片视图
|
|
const statsMap = useMemo(() => {
|
|
const m = new Map<string, GradeOverviewStats>()
|
|
for (const s of gradeStats) m.set(s.gradeId, s)
|
|
return m
|
|
}, [gradeStats])
|
|
|
|
useEffect(() => {
|
|
if (!createOpen) return
|
|
if (createState.schoolId.trim().length > 0) return
|
|
if (!defaultSchoolId) return
|
|
setCreateState((p) => ({ ...p, schoolId: defaultSchoolId }))
|
|
}, [createOpen, createState.schoolId, defaultSchoolId])
|
|
|
|
useEffect(() => {
|
|
if (!editItem) return
|
|
if (editState.schoolId.trim().length > 0) return
|
|
if (!defaultSchoolId) return
|
|
setEditState((p) => ({ ...p, schoolId: defaultSchoolId }))
|
|
}, [editItem, editState.schoolId, defaultSchoolId])
|
|
|
|
const staffOptions = useMemo(() => {
|
|
return [...staff].sort((a, b) => {
|
|
const byName = a.name.localeCompare(b.name)
|
|
if (byName !== 0) return byName
|
|
return a.email.localeCompare(b.email)
|
|
})
|
|
}, [staff])
|
|
|
|
const validateForm = useCallback(
|
|
(state: FormState, params: { grades: GradeListItem[]; excludeGradeId?: string }): {
|
|
ok: boolean
|
|
errors: FormErrors
|
|
} => {
|
|
const errors: FormErrors = {}
|
|
|
|
const schoolId = state.schoolId.trim()
|
|
if (!schoolId) errors.schoolId = t("grades.validation.selectSchool")
|
|
|
|
const name = normalizeName(state.name)
|
|
if (!name) errors.name = t("grades.validation.enterName")
|
|
if (name.length > 100) errors.name = t("grades.validation.nameTooLong")
|
|
|
|
const order = parseOrder(state.order)
|
|
if (order === null) errors.order = t("grades.validation.orderInvalid")
|
|
|
|
if (schoolId && name) {
|
|
const dup = params.grades.find((g) => {
|
|
if (params.excludeGradeId && g.id === params.excludeGradeId) return false
|
|
return g.school.id === schoolId && normalizeName(g.name).toLowerCase() === name.toLowerCase()
|
|
})
|
|
if (dup) errors.name = t("grades.validation.duplicateName")
|
|
}
|
|
|
|
return { ok: Object.keys(errors).length === 0, errors }
|
|
},
|
|
[t]
|
|
)
|
|
|
|
const formatStaffDetail = (u: StaffOption | null) => {
|
|
if (!u) return <Badge variant="outline">{t("grades.notSet")}</Badge>
|
|
return (
|
|
<div className="min-w-0">
|
|
<div className="truncate">{u.name}</div>
|
|
<div className="truncate text-xs text-muted-foreground">{u.email}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const filteredGrades = useMemo(() => {
|
|
const needle = q.trim().toLowerCase()
|
|
const bySchool = school === "all" ? "" : school
|
|
|
|
return grades
|
|
.filter((g) => {
|
|
if (bySchool && g.school.id !== bySchool) return false
|
|
if (head === "missing") {
|
|
if (g.gradeHead || g.teachingHead) return false
|
|
}
|
|
if (head === "missing_grade_head") {
|
|
if (g.gradeHead) return false
|
|
}
|
|
if (head === "missing_teaching_head") {
|
|
if (g.teachingHead) return false
|
|
}
|
|
|
|
if (!needle) return true
|
|
const hay = [
|
|
g.name,
|
|
g.school.name,
|
|
g.gradeHead?.name ?? "",
|
|
g.gradeHead?.email ?? "",
|
|
g.teachingHead?.name ?? "",
|
|
g.teachingHead?.email ?? "",
|
|
]
|
|
.join(" ")
|
|
.toLowerCase()
|
|
return hay.includes(needle)
|
|
})
|
|
.sort((a, b) => {
|
|
if (sort === "updated_desc") return b.updatedAt.localeCompare(a.updatedAt)
|
|
if (sort === "updated_asc") return a.updatedAt.localeCompare(b.updatedAt)
|
|
if (sort === "name_asc") return a.name.localeCompare(b.name)
|
|
if (sort === "name_desc") return b.name.localeCompare(a.name)
|
|
if (sort === "order_asc") return a.order - b.order
|
|
if (sort === "order_desc") return b.order - a.order
|
|
return 0
|
|
})
|
|
}, [grades, head, q, school, sort])
|
|
|
|
const hasFilters = q.length > 0 || school !== "all" || head !== "all" || sort !== "default"
|
|
|
|
const openEdit = (item: GradeListItem) => {
|
|
setEditItem(item)
|
|
setEditState(toFormState(item, defaultSchoolId))
|
|
}
|
|
|
|
const openCreate = () => {
|
|
setCreateState(toFormState(null, defaultSchoolId))
|
|
setCreateOpen(true)
|
|
}
|
|
|
|
const createValidation = useMemo(
|
|
() => validateForm(createState, { grades }),
|
|
[createState, grades, validateForm]
|
|
)
|
|
const editValidation = useMemo(
|
|
() => validateForm(editState, { grades, excludeGradeId: editItem?.id }),
|
|
[editItem?.id, editState, grades, validateForm]
|
|
)
|
|
|
|
const isEditDirty = useMemo(() => {
|
|
if (!editItem) return false
|
|
const next = {
|
|
schoolId: editState.schoolId.trim(),
|
|
name: normalizeName(editState.name),
|
|
order: parseOrder(editState.order),
|
|
gradeHeadId: editState.gradeHeadId || "",
|
|
teachingHeadId: editState.teachingHeadId || "",
|
|
}
|
|
const prev = {
|
|
schoolId: editItem.school.id,
|
|
name: normalizeName(editItem.name),
|
|
order: editItem.order,
|
|
gradeHeadId: editItem.gradeHead?.id ?? "",
|
|
teachingHeadId: editItem.teachingHead?.id ?? "",
|
|
}
|
|
return (
|
|
next.schoolId !== prev.schoolId ||
|
|
next.name !== prev.name ||
|
|
(typeof next.order === "number" ? next.order : null) !== prev.order ||
|
|
next.gradeHeadId !== prev.gradeHeadId ||
|
|
next.teachingHeadId !== prev.teachingHeadId
|
|
)
|
|
}, [editItem, editState])
|
|
|
|
const handleCreate = async () => {
|
|
const validation = validateForm(createState, { grades })
|
|
if (!validation.ok) {
|
|
toast.error(Object.values(validation.errors)[0] || t("grades.validation.fixForm"))
|
|
return
|
|
}
|
|
|
|
setIsWorking(true)
|
|
try {
|
|
const fd = new FormData()
|
|
fd.set("schoolId", createState.schoolId)
|
|
fd.set("name", normalizeName(createState.name))
|
|
fd.set("order", createState.order)
|
|
fd.set("gradeHeadId", createState.gradeHeadId)
|
|
fd.set("teachingHeadId", createState.teachingHeadId)
|
|
|
|
const res = await createGradeAction(undefined, fd)
|
|
if (res.success) {
|
|
toast.success(res.message)
|
|
setCreateOpen(false)
|
|
router.refresh()
|
|
} else {
|
|
toast.error(res.message || t("grades.failedCreate"))
|
|
}
|
|
} catch {
|
|
toast.error(t("grades.failedCreate"))
|
|
} finally {
|
|
setIsWorking(false)
|
|
}
|
|
}
|
|
|
|
const handleUpdate = async () => {
|
|
if (!editItem) return
|
|
const validation = validateForm(editState, { grades, excludeGradeId: editItem.id })
|
|
if (!validation.ok) {
|
|
toast.error(Object.values(validation.errors)[0] || t("grades.validation.fixForm"))
|
|
return
|
|
}
|
|
if (!isEditDirty) {
|
|
toast.message(t("grades.validation.noChanges"))
|
|
return
|
|
}
|
|
|
|
setIsWorking(true)
|
|
try {
|
|
const fd = new FormData()
|
|
fd.set("schoolId", editState.schoolId)
|
|
fd.set("name", normalizeName(editState.name))
|
|
fd.set("order", editState.order)
|
|
fd.set("gradeHeadId", editState.gradeHeadId)
|
|
fd.set("teachingHeadId", editState.teachingHeadId)
|
|
|
|
const res = await updateGradeAction(editItem.id, undefined, fd)
|
|
if (res.success) {
|
|
toast.success(res.message)
|
|
setEditItem(null)
|
|
router.refresh()
|
|
} else {
|
|
toast.error(res.message || t("grades.failedUpdate"))
|
|
}
|
|
} catch {
|
|
toast.error(t("grades.failedUpdate"))
|
|
} finally {
|
|
setIsWorking(false)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteItem) return
|
|
setIsWorking(true)
|
|
try {
|
|
const res = await deleteGradeAction(deleteItem.id)
|
|
if (res.success) {
|
|
toast.success(res.message)
|
|
setDeleteItem(null)
|
|
router.refresh()
|
|
} else {
|
|
toast.error(res.message || t("grades.failedDelete"))
|
|
}
|
|
} catch {
|
|
toast.error(t("grades.failedDelete"))
|
|
} finally {
|
|
setIsWorking(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* 年级概览卡片视图：让管理员一目了然看到各年级规模 */}
|
|
{filteredGrades.length > 0 && (
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{filteredGrades.slice(0, 8).map((g) => {
|
|
const stats = statsMap.get(g.id)
|
|
return (
|
|
<Card key={g.id} className="shadow-none">
|
|
<CardContent className="space-y-3 p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-semibold">{g.name}</div>
|
|
<div className="truncate text-xs text-muted-foreground">{g.school.name}</div>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0" disabled={isWorking}>
|
|
<MoreHorizontal className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
router.push(`/admin/school/grades/insights?gradeId=${encodeURIComponent(g.id)}`)
|
|
}
|
|
>
|
|
<BarChart3 className="mr-2 h-3.5 w-3.5" />
|
|
{t("grades.gradeOverview.viewInsights")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => openEdit(g)}>
|
|
<Pencil className="mr-2 h-3.5 w-3.5" />
|
|
{t("grades.actions.edit")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className="text-destructive focus:text-destructive"
|
|
onClick={() => setDeleteItem(g)}
|
|
>
|
|
<Trash2 className="mr-2 h-3.5 w-3.5" />
|
|
{t("grades.actions.delete")}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
{/* 统计指标 */}
|
|
<div className="grid grid-cols-3 gap-2 text-center">
|
|
<div className="rounded-md bg-muted/50 p-2">
|
|
<div className="flex items-center justify-center text-muted-foreground">
|
|
<GraduationCap className="h-3 w-3" />
|
|
</div>
|
|
<div className="mt-0.5 text-sm font-semibold tabular-nums">
|
|
{stats?.classCount ?? 0}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
{t("grades.gradeOverview.classCount")}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-md bg-muted/50 p-2">
|
|
<div className="flex items-center justify-center text-muted-foreground">
|
|
<Users className="h-3 w-3" />
|
|
</div>
|
|
<div className="mt-0.5 text-sm font-semibold tabular-nums">
|
|
{stats?.studentCount ?? 0}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
{t("grades.gradeOverview.studentCount")}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-md bg-muted/50 p-2">
|
|
<div className="flex items-center justify-center text-muted-foreground">
|
|
<UserCog className="h-3 w-3" />
|
|
</div>
|
|
<div className="mt-0.5 text-sm font-semibold tabular-nums">
|
|
{stats?.teacherCount ?? 0}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground">
|
|
{t("grades.gradeOverview.teacherCount")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 年级主任/教学主任 */}
|
|
<div className="space-y-1 border-t pt-2 text-xs">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-muted-foreground">{t("grades.gradeOverview.gradeHead")}</span>
|
|
<span className="truncate font-medium">
|
|
{g.gradeHead?.name ?? t("grades.gradeOverview.notSet")}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-muted-foreground">{t("grades.gradeOverview.teachingHead")}</span>
|
|
<span className="truncate font-medium">
|
|
{g.teachingHead?.name ?? t("grades.gradeOverview.notSet")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 快捷操作 */}
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
>
|
|
<a href={`/admin/school/grades/insights?gradeId=${encodeURIComponent(g.id)}`}>
|
|
<BarChart3 className="mr-1.5 h-3.5 w-3.5" />
|
|
{t("grades.gradeOverview.viewInsights")}
|
|
</a>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex flex-1 flex-col gap-2 md:flex-row md:items-center">
|
|
<div className="flex-1 md:max-w-sm">
|
|
<Input placeholder={t("grades.filters.search")} value={q} onChange={(e) => setQ(e.target.value || null)} />
|
|
</div>
|
|
|
|
<Select value={school} onValueChange={(v) => setSchool(v === "all" ? null : v)}>
|
|
<SelectTrigger className="w-full md:w-[220px]">
|
|
<SelectValue placeholder={t("grades.filters.school")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{t("grades.filters.allSchools")}</SelectItem>
|
|
{schools.map((s) => (
|
|
<SelectItem key={s.id} value={s.id}>
|
|
{s.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={head} onValueChange={(v) => setHead(v === "all" ? null : v)}>
|
|
<SelectTrigger className="w-full md:w-[220px]">
|
|
<SelectValue placeholder={t("grades.filters.head")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{t("grades.filters.allHeads")}</SelectItem>
|
|
<SelectItem value="missing">{t("grades.filters.missing")}</SelectItem>
|
|
<SelectItem value="missing_grade_head">{t("grades.filters.missingGradeHead")}</SelectItem>
|
|
<SelectItem value="missing_teaching_head">{t("grades.filters.missingTeachingHead")}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={sort} onValueChange={(v) => setSort(v === "default" ? null : v)}>
|
|
<SelectTrigger className="w-full md:w-[220px]">
|
|
<SelectValue placeholder={t("grades.filters.sort")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">{t("grades.filters.defaultSort")}</SelectItem>
|
|
<SelectItem value="updated_desc">{t("grades.filters.updatedDesc")}</SelectItem>
|
|
<SelectItem value="updated_asc">{t("grades.filters.updatedAsc")}</SelectItem>
|
|
<SelectItem value="name_asc">{t("grades.filters.nameAsc")}</SelectItem>
|
|
<SelectItem value="name_desc">{t("grades.filters.nameDesc")}</SelectItem>
|
|
<SelectItem value="order_asc">{t("grades.filters.orderAsc")}</SelectItem>
|
|
<SelectItem value="order_desc">{t("grades.filters.orderDesc")}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{hasFilters ? (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setQ(null)
|
|
setSchool(null)
|
|
setHead(null)
|
|
setSort(null)
|
|
}}
|
|
>
|
|
{t("grades.filters.reset")}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
|
|
<Button onClick={openCreate} disabled={isWorking || schools.length === 0}>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
{t("grades.new")}
|
|
</Button>
|
|
</div>
|
|
|
|
<Card className="shadow-none">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
|
<CardTitle className="text-base">{t("grades.list.title")}</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="tabular-nums">
|
|
{filteredGrades.length}
|
|
</Badge>
|
|
{filteredGrades.length !== grades.length ? (
|
|
<div className="text-xs text-muted-foreground tabular-nums">/ {grades.length}</div>
|
|
) : null}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{schools.length === 0 ? (
|
|
<EmptyState
|
|
title={t("grades.list.noSchools")}
|
|
description={t("grades.list.noSchoolsDescription")}
|
|
className="h-auto border-none shadow-none"
|
|
/>
|
|
) : filteredGrades.length === 0 ? (
|
|
<EmptyState
|
|
title={grades.length === 0 ? t("grades.list.noGrades") : t("grades.list.noMatch")}
|
|
description={
|
|
grades.length === 0
|
|
? t("grades.list.noGradesDescription")
|
|
: t("grades.list.noMatchDescription")
|
|
}
|
|
className="h-auto border-none shadow-none"
|
|
/>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t("grades.column.school")}</TableHead>
|
|
<TableHead>{t("grades.column.grade")}</TableHead>
|
|
<TableHead>{t("grades.column.order")}</TableHead>
|
|
<TableHead>{t("grades.column.gradeHead")}</TableHead>
|
|
<TableHead>{t("grades.column.teachingHead")}</TableHead>
|
|
<TableHead>{t("grades.column.updated")}</TableHead>
|
|
<TableHead className="w-[60px]" />
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredGrades.map((g) => (
|
|
<TableRow key={g.id}>
|
|
<TableCell className="text-muted-foreground">{g.school.name}</TableCell>
|
|
<TableCell className="font-medium">{g.name}</TableCell>
|
|
<TableCell className="text-muted-foreground tabular-nums">{g.order}</TableCell>
|
|
<TableCell className="text-muted-foreground">{formatStaffDetail(g.gradeHead)}</TableCell>
|
|
<TableCell className="text-muted-foreground">{formatStaffDetail(g.teachingHead)}</TableCell>
|
|
<TableCell className="text-muted-foreground">{formatDate(g.updatedAt)}</TableCell>
|
|
<TableCell className="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={isWorking}>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
router.push(`/admin/school/grades/insights?gradeId=${encodeURIComponent(g.id)}`)
|
|
}
|
|
>
|
|
{t("grades.actions.insights")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => openEdit(g)}>
|
|
<Pencil className="mr-2 h-4 w-4" />
|
|
{t("grades.actions.edit")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className="text-destructive focus:text-destructive"
|
|
onClick={() => setDeleteItem(g)}
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
{t("grades.actions.delete")}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
|
<DialogContent className="sm:max-w-[560px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{t("grades.form.createTitle")}</DialogTitle>
|
|
</DialogHeader>
|
|
<form
|
|
className="space-y-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
void handleCreate()
|
|
}}
|
|
>
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label className="text-right">{t("grades.form.school")}</Label>
|
|
<div className="col-span-3">
|
|
<Select
|
|
value={createState.schoolId}
|
|
onValueChange={(v) => setCreateState((p) => ({ ...p, schoolId: v }))}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("grades.form.school")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{schools.map((s) => (
|
|
<SelectItem key={s.id} value={s.id}>
|
|
{s.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{createValidation.errors.schoolId ? (
|
|
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
|
{createValidation.errors.schoolId}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="create-grade-name" className="text-right">
|
|
{t("grades.form.name")}
|
|
</Label>
|
|
<Input
|
|
id="create-grade-name"
|
|
className="col-span-3"
|
|
value={createState.name}
|
|
onChange={(e) => setCreateState((p) => ({ ...p, name: e.target.value }))}
|
|
placeholder={t("grades.form.name")}
|
|
autoFocus
|
|
/>
|
|
{createValidation.errors.name ? (
|
|
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
|
{createValidation.errors.name}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="create-grade-order" className="text-right">
|
|
{t("grades.form.order")}
|
|
</Label>
|
|
<Input
|
|
id="create-grade-order"
|
|
className="col-span-3"
|
|
type="number"
|
|
inputMode="numeric"
|
|
min={0}
|
|
step={1}
|
|
value={createState.order}
|
|
onChange={(e) => setCreateState((p) => ({ ...p, order: e.target.value }))}
|
|
/>
|
|
{createValidation.errors.order ? (
|
|
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
|
{createValidation.errors.order}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label className="text-right">{t("grades.form.gradeHead")}</Label>
|
|
<div className="col-span-3">
|
|
<Select
|
|
value={createState.gradeHeadId}
|
|
onValueChange={(v) =>
|
|
setCreateState((p) => ({ ...p, gradeHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("grades.optional")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
|
{staffOptions.map((u) => (
|
|
<SelectItem key={u.id} value={u.id}>
|
|
{u.name} ({u.email})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label className="text-right">{t("grades.form.teachingHead")}</Label>
|
|
<div className="col-span-3">
|
|
<Select
|
|
value={createState.teachingHeadId}
|
|
onValueChange={(v) =>
|
|
setCreateState((p) => ({ ...p, teachingHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("grades.optional")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
|
{staffOptions.map((u) => (
|
|
<SelectItem key={u.id} value={u.id}>
|
|
{u.name} ({u.email})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => setCreateOpen(false)} disabled={isWorking}>
|
|
{t("grades.form.cancel")}
|
|
</Button>
|
|
<Button type="submit" disabled={isWorking}>
|
|
{t("grades.form.create")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={Boolean(editItem)}
|
|
onOpenChange={(open) => {
|
|
if (!open) setEditItem(null)
|
|
}}
|
|
>
|
|
<DialogContent className="sm:max-w-[560px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{t("grades.form.editTitle")}</DialogTitle>
|
|
</DialogHeader>
|
|
{editItem ? (
|
|
<form
|
|
className="space-y-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
void handleUpdate()
|
|
}}
|
|
>
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label className="text-right">{t("grades.form.school")}</Label>
|
|
<div className="col-span-3">
|
|
<Select
|
|
value={editState.schoolId}
|
|
onValueChange={(v) => setEditState((p) => ({ ...p, schoolId: v }))}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("grades.form.school")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{schools.map((s) => (
|
|
<SelectItem key={s.id} value={s.id}>
|
|
{s.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{editValidation.errors.schoolId ? (
|
|
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
|
{editValidation.errors.schoolId}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="edit-grade-name" className="text-right">
|
|
{t("grades.form.name")}
|
|
</Label>
|
|
<Input
|
|
id="edit-grade-name"
|
|
className="col-span-3"
|
|
value={editState.name}
|
|
onChange={(e) => setEditState((p) => ({ ...p, name: e.target.value }))}
|
|
/>
|
|
{editValidation.errors.name ? (
|
|
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
|
{editValidation.errors.name}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="edit-grade-order" className="text-right">
|
|
{t("grades.form.order")}
|
|
</Label>
|
|
<Input
|
|
id="edit-grade-order"
|
|
className="col-span-3"
|
|
type="number"
|
|
inputMode="numeric"
|
|
min={0}
|
|
step={1}
|
|
value={editState.order}
|
|
onChange={(e) => setEditState((p) => ({ ...p, order: e.target.value }))}
|
|
/>
|
|
{editValidation.errors.order ? (
|
|
<div className="col-span-3 col-start-2 text-sm font-medium text-destructive">
|
|
{editValidation.errors.order}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label className="text-right">{t("grades.form.gradeHead")}</Label>
|
|
<div className="col-span-3">
|
|
<Select
|
|
value={editState.gradeHeadId}
|
|
onValueChange={(v) =>
|
|
setEditState((p) => ({ ...p, gradeHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("grades.optional")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
|
{staffOptions.map((u) => (
|
|
<SelectItem key={u.id} value={u.id}>
|
|
{u.name} ({u.email})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label className="text-right">{t("grades.form.teachingHead")}</Label>
|
|
<div className="col-span-3">
|
|
<Select
|
|
value={editState.teachingHeadId}
|
|
onValueChange={(v) =>
|
|
setEditState((p) => ({ ...p, teachingHeadId: v === NONE_SELECT_VALUE ? "" : v }))
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={t("grades.optional")} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={NONE_SELECT_VALUE}>-</SelectItem>
|
|
{staffOptions.map((u) => (
|
|
<SelectItem key={u.id} value={u.id}>
|
|
{u.name} ({u.email})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => setEditItem(null)} disabled={isWorking}>
|
|
{t("grades.form.cancel")}
|
|
</Button>
|
|
<Button type="submit" disabled={isWorking}>
|
|
{t("grades.form.save")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
) : null}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<AlertDialog
|
|
open={Boolean(deleteItem)}
|
|
onOpenChange={(open) => {
|
|
if (!open) setDeleteItem(null)
|
|
}}
|
|
>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{t("grades.delete.title")}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
{t("grades.delete.description", { name: deleteItem?.name || "" })}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isWorking}>{t("grades.delete.cancel")}</AlertDialogCancel>
|
|
<AlertDialogAction onClick={handleDelete} disabled={isWorking}>
|
|
{t("grades.delete.confirm")}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
)
|
|
}
|