feat(homework,classes,course-plans): add scans, student data, take confirm, error boundaries, dialogs, hooks, calendar

homework:

- Add data-access-scans, data-access-student, data-access-utils, data-access-exam-cross

- Add excellent-submissions, homework-take-confirm-dialog, homework-take-sidebar components

classes:

- Add class-delete-dialog, class-error-boundary, class-form-dialog, class-form-utils

- Add class-list-table, class-list-toolbar, class-skeleton

- Add schedule-create-dialog, schedule-delete-dialog, schedule-edit-dialog, schedule-utils

- Add data-access-teacher and hooks directory

course-plans:

- Add course-plan-calendar, sortable-week-row, template-picker-dialog components

- Add lib directory

src/modules/classes/components/grade-classes-view.tsx

@@ -1,31 +1,17 @@
 "use client"
 
-import { useEffect, useMemo, useState } from "react"
-import { MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react"
+import { useMemo } from "react"
 import { toast } from "sonner"
 import { useRouter } from "next/navigation"
+import { useTranslations } from "next-intl"
 
-import type { AdminClassListItem, ClassSubjectTeacherAssignment, TeacherOption } from "../types"
-import { DEFAULT_CLASS_SUBJECTS } from "../types"
+import type { AdminClassListItem, TeacherOption } from "../types"
 import { createGradeClassAction, deleteGradeClassAction, updateGradeClassAction } 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 { ConfirmDeleteDialog } from "@/shared/components/ui/confirm-delete-dialog"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
-import { formatDate } from "@/shared/lib/utils"
+import { useClassData } from "../hooks/use-class-data"
+import { ClassDeleteDialog } from "./class-delete-dialog"
+import { ClassFormDialog } from "./class-form-dialog"
+import { ClassListTable } from "./class-list-table"
+import { ClassListToolbar } from "./class-list-toolbar"
 
 export function GradeClassesClient({
   classes,
@@ -36,402 +22,131 @@ export function GradeClassesClient({
   teachers: TeacherOption[]
   managedGrades: { id: string; name: string; schoolId: string; schoolName: string | null }[]
 }) {
+  const t = useTranslations("classes")
   const router = useRouter()
-  const [isWorking, setIsWorking] = useState(false)
-  const [createOpen, setCreateOpen] = useState(false)
-  const [editItem, setEditItem] = useState<AdminClassListItem | null>(null)
-  const [deleteItem, setDeleteItem] = useState<AdminClassListItem | null>(null)
-
   const defaultTeacherId = useMemo(() => teachers[0]?.id ?? "", [teachers])
-  const [createTeacherId, setCreateTeacherId] = useState(defaultTeacherId)
-  const [createGradeId, setCreateGradeId] = useState(managedGrades[0]?.id ?? "")
+  const defaultGradeId = useMemo(() => managedGrades[0]?.id ?? "", [managedGrades])
+  const data = useClassData({ defaultTeacherId, defaultGradeId })
 
-  const [editTeacherId, setEditTeacherId] = useState("")
-  const [editGradeId, setEditGradeId] = useState("")
-  const [editSubjectTeachers, setEditSubjectTeachers] = useState<Array<{ subject: string; teacherId: string | null }>>([])
-
-  useEffect(() => {
-    if (!createOpen) return
-    setCreateTeacherId(defaultTeacherId)
-    setCreateGradeId(managedGrades[0]?.id ?? "")
-  }, [createOpen, defaultTeacherId, managedGrades])
-
-  useEffect(() => {
-    if (!editItem) return
-    setEditTeacherId(editItem.teacher.id)
-    setEditGradeId(editItem.gradeId ?? managedGrades[0]?.id ?? "")
-    setEditSubjectTeachers(
-      DEFAULT_CLASS_SUBJECTS.map((s) => ({
-        subject: s,
-        teacherId: editItem.subjectTeachers.find((st) => st.subject === s)?.teacher?.id ?? null,
-      }))
-    )
-  }, [editItem, managedGrades])
-
-  const handleCreate = async (formData: FormData) => {
-    setIsWorking(true)
+  const handleCreate = async (formData: FormData): Promise<void> => {
+    data.setIsWorking(true)
     try {
       const res = await createGradeClassAction(undefined, formData)
       if (res.success) {
         toast.success(res.message)
-        setCreateOpen(false)
+        data.setCreateOpen(false)
         router.refresh()
       } else {
-        toast.error(res.message || "Failed to create class")
+        toast.error(res.message || t("list.failedCreate"))
       }
     } catch {
-      toast.error("Failed to create class")
+      toast.error(t("list.failedCreate"))
     } finally {
-      setIsWorking(false)
+      data.setIsWorking(false)
     }
   }
 
-  const handleUpdate = async (formData: FormData) => {
-    if (!editItem) return
-    setIsWorking(true)
+  const handleUpdate = async (formData: FormData): Promise<void> => {
+    if (!data.editItem) return
+    data.setIsWorking(true)
     try {
-      const res = await updateGradeClassAction(editItem.id, undefined, formData)
+      const res = await updateGradeClassAction(data.editItem.id, undefined, formData)
       if (res.success) {
         toast.success(res.message)
-        setEditItem(null)
+        data.setEditItem(null)
         router.refresh()
       } else {
-        toast.error(res.message || "Failed to update class")
+        toast.error(res.message || t("list.failedUpdate"))
       }
     } catch {
-      toast.error("Failed to update class")
+      toast.error(t("list.failedUpdate"))
     } finally {
-      setIsWorking(false)
+      data.setIsWorking(false)
     }
   }
 
-  const handleDelete = async () => {
-    if (!deleteItem) return
-    setIsWorking(true)
+  const handleDelete = async (): Promise<void> => {
+    if (!data.deleteItem) return
+    data.setIsWorking(true)
     try {
-      const res = await deleteGradeClassAction(deleteItem.id)
+      const res = await deleteGradeClassAction(data.deleteItem.id)
       if (res.success) {
         toast.success(res.message)
-        setDeleteItem(null)
+        data.setDeleteItem(null)
         router.refresh()
       } else {
-        toast.error(res.message || "Failed to delete class")
+        toast.error(res.message || t("list.failedDelete"))
       }
     } catch {
-      toast.error("Failed to delete class")
+      toast.error(t("list.failedDelete"))
     } finally {
-      setIsWorking(false)
+      data.setIsWorking(false)
     }
   }
 
-  const setSubjectTeacher = (subject: string, teacherId: string | null) => {
-    setEditSubjectTeachers((prev) => prev.map((p) => (p.subject === subject ? { ...p, teacherId } : p)))
-  }
-
-  const formatSubjectTeachers = (list: ClassSubjectTeacherAssignment[]) => {
-    const pairs = list
-      .filter((x) => x.teacher)
-      .map((x) => `${x.subject}: ${x.teacher?.name ?? ""}`)
-      .filter((x) => x.length > 0)
-    return pairs.length > 0 ? pairs.join(", ") : "-"
-  }
-
-  const selectedCreateGrade = managedGrades.find(g => g.id === createGradeId)
-  const selectedEditGrade = managedGrades.find(g => g.id === editGradeId)
-
   return (
     <>
-      <div className="flex justify-end">
-        <Button onClick={() => setCreateOpen(true)} disabled={isWorking || managedGrades.length === 0}>
-          <Plus className="mr-2 h-4 w-4" />
-          New class
-        </Button>
-      </div>
+      <ClassListToolbar
+        count={classes.length}
+        onNew={() => data.setCreateOpen(true)}
+        isWorking={data.isWorking}
+        disabled={managedGrades.length === 0}
+      />
 
-      <Card className="shadow-none">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0">
-          <CardTitle className="text-base">All classes</CardTitle>
-          <Badge variant="secondary" className="tabular-nums">
-            {classes.length}
-          </Badge>
-        </CardHeader>
-        <CardContent>
-          {classes.length === 0 ? (
-            <EmptyState
-              title="No classes"
-              description={managedGrades.length === 0 ? "You are not managing any grades yet." : "Create classes to manage students and schedules."}
-              className="h-auto border-none shadow-none"
-            />
-          ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>School</TableHead>
-                  <TableHead>Name</TableHead>
-                  <TableHead>Grade</TableHead>
-                  <TableHead>Homeroom</TableHead>
-                  <TableHead>Room</TableHead>
-                  <TableHead>Homeroom Teacher</TableHead>
-                  <TableHead>Subject Teachers</TableHead>
-                  <TableHead className="text-right">Students</TableHead>
-                  <TableHead>Updated</TableHead>
-                  <TableHead className="w-[60px]" />
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {classes.map((c) => (
-                  <TableRow key={c.id}>
-                    <TableCell className="text-muted-foreground">{c.schoolName ?? "-"}</TableCell>
-                    <TableCell className="font-medium">{c.name}</TableCell>
-                    <TableCell className="text-muted-foreground">{c.grade}</TableCell>
-                    <TableCell className="text-muted-foreground">{c.homeroom ?? "-"}</TableCell>
-                    <TableCell className="text-muted-foreground">{c.room ?? "-"}</TableCell>
-                    <TableCell className="text-muted-foreground">{c.teacher.name}</TableCell>
-                    <TableCell className="text-muted-foreground">{formatSubjectTeachers(c.subjectTeachers)}</TableCell>
-                    <TableCell className="text-muted-foreground tabular-nums text-right">{c.studentCount}</TableCell>
-                    <TableCell className="text-muted-foreground">{formatDate(c.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={() => setEditItem(c)}>
-                            <Pencil className="mr-2 h-4 w-4" />
-                            Edit
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator />
-                          <DropdownMenuItem
-                            className="text-destructive focus:text-destructive"
-                            onClick={() => setDeleteItem(c)}
-                          >
-                            <Trash2 className="mr-2 h-4 w-4" />
-                            Delete
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </CardContent>
-      </Card>
+      <ClassListTable
+        classes={classes}
+        onEdit={data.setEditItem}
+        onDelete={data.setDeleteItem}
+        isWorking={data.isWorking}
+        emptyDescription={managedGrades.length === 0 ? t("grade.noManagedGradesDescription") : undefined}
+      />
 
-      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-        <DialogContent className="sm:max-w-[560px]">
-          <DialogHeader>
-            <DialogTitle>New class</DialogTitle>
-          </DialogHeader>
-          <form action={handleCreate} className="space-y-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label className="text-right">Grade</Label>
-              <div className="col-span-3">
-                <Select value={createGradeId} onValueChange={setCreateGradeId} disabled={managedGrades.length === 0}>
-                  <SelectTrigger>
-                    <SelectValue placeholder={managedGrades.length === 0 ? "No managed grades" : "Select a grade"} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {managedGrades.map((g) => (
-                      <SelectItem key={g.id} value={g.id}>
-                        {g.name} ({g.schoolName})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <input type="hidden" name="gradeId" value={createGradeId} />
-                <input type="hidden" name="grade" value={selectedCreateGrade?.name ?? ""} />
-                <input type="hidden" name="schoolId" value={selectedCreateGrade?.schoolId ?? ""} />
-                <input type="hidden" name="schoolName" value={selectedCreateGrade?.schoolName ?? ""} />
-              </div>
-            </div>
+      <ClassFormDialog
+        open={data.createOpen}
+        onOpenChange={data.setCreateOpen}
+        mode="create"
+        teachers={teachers}
+        grades={managedGrades}
+        onSubmit={handleCreate}
+        isWorking={data.isWorking}
+        teacherId={data.createTeacherId}
+        schoolId={data.createSchoolId}
+        gradeId={data.createGradeId}
+        onTeacherIdChange={data.setCreateTeacherId}
+        onSchoolIdChange={data.setCreateSchoolId}
+        onGradeIdChange={data.setCreateGradeId}
+      />
 
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="create-name" className="text-right">
-                Name
-              </Label>
-              <Input id="create-name" name="name" className="col-span-3" placeholder="e.g. Class 3" autoFocus />
-            </div>
-
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="create-homeroom" className="text-right">
-                Homeroom
-              </Label>
-              <Input id="create-homeroom" name="homeroom" className="col-span-3" placeholder="Optional" />
-            </div>
-
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="create-room" className="text-right">
-                Room
-              </Label>
-              <Input id="create-room" name="room" className="col-span-3" placeholder="Optional" />
-            </div>
-
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label className="text-right">Homeroom Teacher</Label>
-              <div className="col-span-3">
-                <Select value={createTeacherId} onValueChange={setCreateTeacherId} disabled={teachers.length === 0}>
-                  <SelectTrigger>
-                    <SelectValue placeholder={teachers.length === 0 ? "No teachers" : "Select a teacher"} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {teachers.map((t) => (
-                      <SelectItem key={t.id} value={t.id}>
-                        {t.name} ({t.email})
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <input type="hidden" name="teacherId" value={createTeacherId} />
-              </div>
-            </div>
-
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setCreateOpen(false)} disabled={isWorking}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isWorking || teachers.length === 0 || !createTeacherId || !createGradeId}>
-                Create
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={Boolean(editItem)}
-        onOpenChange={(open) => {
-          if (isWorking) return
-          if (!open) setEditItem(null)
+      <ClassFormDialog
+        open={Boolean(data.editItem)}
+        onOpenChange={(o) => {
+          if (!o) data.setEditItem(null)
         }}
-      >
-        <DialogContent className="sm:max-w-[560px]">
-          <DialogHeader>
-            <DialogTitle>Edit class</DialogTitle>
-          </DialogHeader>
-          {editItem ? (
-            <form action={handleUpdate} className="space-y-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label className="text-right">Grade</Label>
-                <div className="col-span-3">
-                  <Select value={editGradeId} onValueChange={setEditGradeId} disabled={managedGrades.length === 0}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select a grade" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {managedGrades.map((g) => (
-                        <SelectItem key={g.id} value={g.id}>
-                          {g.name} ({g.schoolName})
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <input type="hidden" name="gradeId" value={editGradeId} />
-                  <input type="hidden" name="grade" value={selectedEditGrade?.name ?? ""} />
-                  <input type="hidden" name="schoolId" value={selectedEditGrade?.schoolId ?? ""} />
-                  <input type="hidden" name="schoolName" value={selectedEditGrade?.schoolName ?? ""} />
-                </div>
-              </div>
+        mode="edit"
+        editItem={data.editItem}
+        teachers={teachers}
+        grades={managedGrades}
+        onSubmit={handleUpdate}
+        isWorking={data.isWorking}
+        teacherId={data.editTeacherId}
+        schoolId={data.editSchoolId}
+        gradeId={data.editGradeId}
+        subjectTeachers={data.editSubjectTeachers}
+        onTeacherIdChange={data.setEditTeacherId}
+        onSchoolIdChange={data.setEditSchoolId}
+        onGradeIdChange={data.setEditGradeId}
+        onSubjectTeacherChange={data.setSubjectTeacher}
+      />
 
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="edit-name" className="text-right">
-                  Name
-                </Label>
-                <Input id="edit-name" name="name" className="col-span-3" defaultValue={editItem.name} />
-              </div>
-
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="edit-homeroom" className="text-right">
-                  Homeroom
-                </Label>
-                <Input id="edit-homeroom" name="homeroom" className="col-span-3" defaultValue={editItem.homeroom ?? ""} />
-              </div>
-
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="edit-room" className="text-right">
-                  Room
-                </Label>
-                <Input id="edit-room" name="room" className="col-span-3" defaultValue={editItem.room ?? ""} />
-              </div>
-
-              <div className="grid grid-cols-4 items-center gap-4">
-              <Label className="text-right">Homeroom Teacher</Label>
-              <div className="col-span-3">
-                <Select value={editTeacherId} onValueChange={setEditTeacherId} disabled={teachers.length === 0}>
-                    <SelectTrigger>
-                      <SelectValue placeholder={teachers.length === 0 ? "No teachers" : "Select a teacher"} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {teachers.map((t) => (
-                        <SelectItem key={t.id} value={t.id}>
-                          {t.name} ({t.email})
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <input type="hidden" name="teacherId" value={editTeacherId} />
-                </div>
-              </div>
-
-              <div className="space-y-3 rounded-md border p-4">
-                <div className="text-sm font-medium">Subject Teachers</div>
-                <div className="grid gap-3">
-                  {DEFAULT_CLASS_SUBJECTS.map((subject) => {
-                    const selected = editSubjectTeachers.find((x) => x.subject === subject)?.teacherId ?? null
-                    return (
-                      <div key={subject} className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">{subject}</Label>
-                        <div className="col-span-3">
-                          <Select
-                            value={selected ?? ""}
-                            onValueChange={(v) => setSubjectTeacher(subject, v ? v : null)}
-                            disabled={teachers.length === 0}
-                          >
-                            <SelectTrigger>
-                              <SelectValue placeholder={teachers.length === 0 ? "No teachers" : "Select a teacher"} />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {teachers.map((t) => (
-                                <SelectItem key={t.id} value={t.id}>
-                                  {t.name} ({t.email})
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-                <input type="hidden" name="subjectTeachers" value={JSON.stringify(editSubjectTeachers)} />
-              </div>
-
-              <DialogFooter>
-                <Button type="button" variant="outline" onClick={() => setEditItem(null)} disabled={isWorking}>
-                  Cancel
-                </Button>
-                <Button type="submit" disabled={isWorking || !editTeacherId}>
-                  Save
-                </Button>
-              </DialogFooter>
-            </form>
-          ) : null}
-        </DialogContent>
-      </Dialog>
-
-      <ConfirmDeleteDialog
-        open={Boolean(deleteItem)}
-        onOpenChange={(open) => {
-          if (!open) setDeleteItem(null)
+      <ClassDeleteDialog
+        open={Boolean(data.deleteItem)}
+        onOpenChange={(o) => {
+          if (!o) data.setDeleteItem(null)
         }}
-        title="Delete class"
-        description={`This will permanently delete ${deleteItem?.name || "this class"}.`}
+        item={data.deleteItem}
         onConfirm={handleDelete}
-        isWorking={isWorking}
+        isWorking={data.isWorking}
       />
     </>
   )
-}
+}