feat(app): add lesson-plans, practice, and grade dashboard routes
- Add admin/lesson-plans, parent/lesson-plans, student/lesson-plans routes - Add student/practice and teacher/practice routes for adaptive practice - Add management/grade/dashboard and management/grade/practice routes - Add teacher/lesson-plans error and loading boundaries - Update existing admin, parent, student, teacher pages with new features - Update globals.css and proxy middleware
This commit is contained in:
SpecialX
42
src/app/(dashboard)/management/grade/dashboard/loading.tsx
Normal file
42
src/app/(dashboard)/management/grade/dashboard/loading.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function ManagementGradeDashboardLoading() {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</div>
|
||||
|
||||
<Skeleton className="h-10 w-full max-w-md" />
|
||||
|
||||
<Skeleton className="h-10 w-full max-w-2xl" />
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-8 w-16" />
|
||||
<Skeleton className="mt-2 h-3 w-28" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-32" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
178
src/app/(dashboard)/management/grade/dashboard/page.tsx
Normal file
178
src/app/(dashboard)/management/grade/dashboard/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import type { Metadata } from "next"
|
||||
import type { JSX } from "react"
|
||||
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import { requirePermission } from "@/shared/lib/auth-guard"
|
||||
import { Permissions } from "@/shared/types/permissions"
|
||||
import { getTeacherIdForMutations } from "@/modules/classes/data-access"
|
||||
import { getGradeHomeworkInsights } from "@/modules/classes/data-access"
|
||||
import { getGradesForStaff } from "@/modules/school/data-access"
|
||||
import { getGradeDistributionByGradeId } from "@/modules/grades/data-access-analytics"
|
||||
import { getExamsByGradeId } from "@/modules/exams/data-access"
|
||||
import { getGradeCoursePlanProgress } from "@/modules/course-plans/data-access"
|
||||
import { GradeInsightsFilters } from "@/modules/school/components/grade-insights-filters"
|
||||
import { GradeDistributionPanel } from "@/modules/school/components/grade-dashboard/grade-distribution-panel"
|
||||
import { GradeHomeworkPanel } from "@/modules/school/components/grade-dashboard/grade-homework-panel"
|
||||
import { GradeExamsPanel } from "@/modules/school/components/grade-dashboard/grade-exams-panel"
|
||||
import { GradeProgressPanel } from "@/modules/school/components/grade-dashboard/grade-progress-panel"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { ChipNav } from "@/shared/components/ui/chip-nav"
|
||||
import { BarChart3 } from "lucide-react"
|
||||
import { getParam, type SearchParams } from "@/shared/lib/search-params"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
const TAB_OPTIONS = [
|
||||
{ id: "distribution", name: "" },
|
||||
{ id: "homework", name: "" },
|
||||
{ id: "exams", name: "" },
|
||||
{ id: "progress", name: "" },
|
||||
] as const
|
||||
|
||||
type TabId = (typeof TAB_OPTIONS)[number]["id"]
|
||||
|
||||
const isTabId = (v: string): v is TabId =>
|
||||
v === "distribution" || v === "homework" || v === "exams" || v === "progress"
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const t = await getTranslations("school")
|
||||
return {
|
||||
title: `${t("grades.gradeDashboard.title")} - Next_Edu`,
|
||||
description: t("grades.gradeDashboard.description"),
|
||||
}
|
||||
}
|
||||
|
||||
export default async function GradeDashboardPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<SearchParams>
|
||||
}): Promise<JSX.Element> {
|
||||
const ctx = await requirePermission(Permissions.GRADE_RECORD_READ)
|
||||
const t = await getTranslations("school")
|
||||
const params = await searchParams
|
||||
const gradeId = getParam(params, "gradeId")
|
||||
const tabRaw = getParam(params, "tab") || "distribution"
|
||||
const tab: TabId = isTabId(tabRaw) ? tabRaw : "distribution"
|
||||
|
||||
const teacherId = await getTeacherIdForMutations()
|
||||
const grades = await getGradesForStaff(teacherId)
|
||||
const allowedIds = new Set(grades.map((g) => g.id))
|
||||
const selected = gradeId && gradeId !== "all" && allowedIds.has(gradeId) ? gradeId : ""
|
||||
|
||||
const buildHref = (gId: string): string => {
|
||||
const p = new URLSearchParams()
|
||||
if (gId && gId !== "all") p.set("gradeId", gId)
|
||||
if (tab !== "distribution") p.set("tab", tab)
|
||||
const qs = p.toString()
|
||||
return qs ? `/management/grade/dashboard?${qs}` : "/management/grade/dashboard"
|
||||
}
|
||||
|
||||
const buildTabHref = (tId: string): string => {
|
||||
const p = new URLSearchParams()
|
||||
if (selected) p.set("gradeId", selected)
|
||||
if (tId !== "distribution") p.set("tab", tId)
|
||||
const qs = p.toString()
|
||||
return qs ? `/management/grade/dashboard?${qs}` : "/management/grade/dashboard"
|
||||
}
|
||||
|
||||
const tabOptions = TAB_OPTIONS.map((o) => ({
|
||||
id: o.id,
|
||||
name: t(`grades.gradeDashboard.tabs.${o.id}` as const),
|
||||
}))
|
||||
|
||||
if (grades.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-2xl font-bold tracking-tight">{t("grades.gradeDashboard.title")}</h2>
|
||||
<p className="text-muted-foreground">{t("grades.gradeDashboard.description")}</p>
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title={t("grades.gradeDashboard.selectToView")}
|
||||
description={t("grades.gradeDashboard.selectToViewDescription")}
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Fetch data for the active tab only
|
||||
let distributionData = null
|
||||
let homeworkData = null
|
||||
let examsData = null
|
||||
let progressData = null
|
||||
|
||||
if (selected) {
|
||||
if (tab === "distribution") {
|
||||
distributionData = await getGradeDistributionByGradeId({
|
||||
gradeId: selected,
|
||||
scope: ctx.dataScope,
|
||||
})
|
||||
} else if (tab === "homework") {
|
||||
homeworkData = await getGradeHomeworkInsights({ gradeId: selected, limit: 50 })
|
||||
} else if (tab === "exams") {
|
||||
examsData = await getExamsByGradeId({ gradeId: selected, scope: ctx.dataScope })
|
||||
} else if (tab === "progress") {
|
||||
progressData = await getGradeCoursePlanProgress({ gradeId: selected })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-2xl font-bold tracking-tight">{t("grades.gradeDashboard.title")}</h2>
|
||||
<p className="text-muted-foreground">{t("grades.gradeDashboard.description")}</p>
|
||||
</div>
|
||||
|
||||
<GradeInsightsFilters
|
||||
grades={grades.map((g) => ({ id: g.id, name: g.name, schoolName: g.school.name }))}
|
||||
currentGradeId={selected || "all"}
|
||||
buildHref={buildHref}
|
||||
/>
|
||||
|
||||
{!selected ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title={t("grades.gradeDashboard.selectToView")}
|
||||
description={t("grades.gradeDashboard.selectToViewDescription")}
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<ChipNav
|
||||
options={tabOptions}
|
||||
currentId={tab}
|
||||
buildHref={buildTabHref}
|
||||
/>
|
||||
|
||||
{tab === "distribution" && distributionData && (
|
||||
<GradeDistributionPanel data={distributionData} />
|
||||
)}
|
||||
{tab === "homework" && homeworkData && (
|
||||
<GradeHomeworkPanel data={homeworkData} />
|
||||
)}
|
||||
{tab === "exams" && examsData && (
|
||||
<GradeExamsPanel data={examsData} />
|
||||
)}
|
||||
{tab === "progress" && progressData && (
|
||||
<GradeProgressPanel data={progressData} />
|
||||
)}
|
||||
|
||||
{/* Fallback: data was null (e.g. homework insights returned null) */}
|
||||
{((tab === "distribution" && !distributionData) ||
|
||||
(tab === "homework" && !homeworkData) ||
|
||||
(tab === "exams" && !examsData) ||
|
||||
(tab === "progress" && !progressData)) && (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title={t("grades.gradeDashboard.noData")}
|
||||
description={t("grades.gradeDashboard.noDataDescription")}
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user