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
89
src/modules/parent/components/child-card.tsx
Normal file
89
src/modules/parent/components/child-card.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import Link from "next/link"
|
||||
import { ChevronRight, GraduationCap, PenTool, TriangleAlert } from "lucide-react"
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import type { ChildDashboardData } from "@/modules/parent/types"
|
||||
|
||||
const getInitials = (name: string | null) => {
|
||||
if (!name) return "S"
|
||||
return name.slice(0, 2).toUpperCase()
|
||||
}
|
||||
|
||||
export function ChildCard({ child }: { child: ChildDashboardData }) {
|
||||
const { basicInfo, homeworkSummary, gradeTrend } = child
|
||||
const ranking = gradeTrend.ranking
|
||||
const latestGrade = gradeTrend.recent[0]
|
||||
|
||||
return (
|
||||
<Link href={`/parent/children/${basicInfo.id}`} className="block">
|
||||
<Card className="hover:bg-muted/50 transition-colors cursor-pointer h-full">
|
||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0">
|
||||
<Avatar className="h-12 w-12">
|
||||
<AvatarImage src={basicInfo.image ?? undefined} alt={basicInfo.name ?? "Child"} />
|
||||
<AvatarFallback>{getInitials(basicInfo.name)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0 space-y-1">
|
||||
<CardTitle className="text-base truncate">{basicInfo.name ?? "Unnamed"}</CardTitle>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
{basicInfo.className ? (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{basicInfo.className}
|
||||
</Badge>
|
||||
) : null}
|
||||
{basicInfo.gradeName ? <span>{basicInfo.gradeName}</span> : null}
|
||||
{basicInfo.relation ? <span>· {basicInfo.relation}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="rounded-md border bg-card p-2">
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
|
||||
<PenTool className="h-3 w-3" />
|
||||
Pending
|
||||
</div>
|
||||
<div className="text-lg font-semibold tabular-nums">
|
||||
{homeworkSummary.pendingCount}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card p-2">
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
|
||||
<TriangleAlert className="h-3 w-3" />
|
||||
Overdue
|
||||
</div>
|
||||
<div
|
||||
className={`text-lg font-semibold tabular-nums ${
|
||||
homeworkSummary.overdueCount > 0 ? "text-destructive" : ""
|
||||
}`}
|
||||
>
|
||||
{homeworkSummary.overdueCount}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card p-2">
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
|
||||
<GraduationCap className="h-3 w-3" />
|
||||
Avg
|
||||
</div>
|
||||
<div className="text-lg font-semibold tabular-nums">
|
||||
{ranking ? `${Math.round(ranking.percentage)}%` : "-"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{latestGrade ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Latest:{" "}
|
||||
<span className="font-medium text-foreground tabular-nums">
|
||||
{latestGrade.score}/{latestGrade.maxScore}
|
||||
</span>{" "}
|
||||
({latestGrade.assignmentTitle.slice(0, 20)}
|
||||
{latestGrade.assignmentTitle.length > 20 ? "..." : ""})
|
||||
</div>
|
||||
) : null}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
49
src/modules/parent/components/child-detail-header.tsx
Normal file
49
src/modules/parent/components/child-detail-header.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import Link from "next/link"
|
||||
import { ArrowLeft, GraduationCap } from "lucide-react"
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import type { ChildDashboardData } from "@/modules/parent/types"
|
||||
|
||||
const getInitials = (name: string | null) => {
|
||||
if (!name) return "S"
|
||||
return name.slice(0, 2).toUpperCase()
|
||||
}
|
||||
|
||||
export function ChildDetailHeader({ child }: { child: ChildDashboardData }) {
|
||||
const { basicInfo } = child
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Button asChild variant="ghost" size="sm" className="gap-2 -ml-2">
|
||||
<Link href="/parent/dashboard">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Dashboard
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="h-16 w-16">
|
||||
<AvatarImage src={basicInfo.image ?? undefined} alt={basicInfo.name ?? "Child"} />
|
||||
<AvatarFallback className="text-lg">{getInitials(basicInfo.name)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-2xl font-bold tracking-tight">{basicInfo.name ?? "Unnamed"}</h1>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
{basicInfo.className ? (
|
||||
<Badge variant="secondary">{basicInfo.className}</Badge>
|
||||
) : null}
|
||||
{basicInfo.gradeName ? (
|
||||
<span className="flex items-center gap-1">
|
||||
<GraduationCap className="h-3 w-3" />
|
||||
{basicInfo.gradeName}
|
||||
</span>
|
||||
) : null}
|
||||
{basicInfo.relation ? <span>· {basicInfo.relation}</span> : null}
|
||||
<span>· {basicInfo.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
src/modules/parent/components/child-detail-panel.tsx
Normal file
27
src/modules/parent/components/child-detail-panel.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { ChildGradeSummary } from "./child-grade-summary"
|
||||
import { ChildHomeworkSummary } from "./child-homework-summary"
|
||||
import { ChildScheduleCard } from "./child-schedule-card"
|
||||
import type { ChildDashboardData } from "@/modules/parent/types"
|
||||
|
||||
export function ChildDetailPanel({ child }: { child: ChildDashboardData }) {
|
||||
const { basicInfo, todaySchedule, homeworkSummary, gradeTrend } = child
|
||||
const childName = basicInfo.name ?? "Child"
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<ChildHomeworkSummary
|
||||
summary={homeworkSummary}
|
||||
childId={basicInfo.id}
|
||||
childName={childName}
|
||||
/>
|
||||
<ChildGradeSummary grades={gradeTrend} childId={basicInfo.id} childName={childName} />
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<ChildScheduleCard items={todaySchedule} childName={childName} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
163
src/modules/parent/components/child-grade-summary.tsx
Normal file
163
src/modules/parent/components/child-grade-summary.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { BarChart3, Trophy } from "lucide-react"
|
||||
import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/shared/components/ui/chart"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import type { StudentDashboardGradeProps } from "@/modules/homework/types"
|
||||
|
||||
const chartConfig = {
|
||||
score: {
|
||||
label: "Score (%)",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
}
|
||||
|
||||
export function ChildGradeSummary({
|
||||
grades,
|
||||
childId,
|
||||
childName,
|
||||
}: {
|
||||
grades: StudentDashboardGradeProps
|
||||
childId: string
|
||||
childName: string
|
||||
}) {
|
||||
const hasGradeTrend = grades.trend.length > 0
|
||||
const ranking = grades.ranking
|
||||
const latestGrade = grades.trend[grades.trend.length - 1]
|
||||
|
||||
const chartData = grades.trend.map((item) => ({
|
||||
title: item.assignmentTitle,
|
||||
score: Math.round(item.percentage),
|
||||
fullTitle: item.assignmentTitle,
|
||||
submittedAt: formatDate(item.submittedAt),
|
||||
rawScore: item.score,
|
||||
maxScore: item.maxScore,
|
||||
}))
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
{childName}'s Grades
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasGradeTrend ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="No graded work yet"
|
||||
description="Finish and submit assignments to see score trend."
|
||||
className="border-none h-60"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-md border bg-card p-3">
|
||||
<div className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<BarChart3 className="h-3 w-3" />
|
||||
Latest Score
|
||||
</div>
|
||||
<div className="text-xl font-semibold tabular-nums">
|
||||
{latestGrade ? `${Math.round(latestGrade.percentage)}%` : "-"}
|
||||
</div>
|
||||
{latestGrade ? (
|
||||
<div className="text-xs text-muted-foreground tabular-nums">
|
||||
{latestGrade.score}/{latestGrade.maxScore}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="rounded-md border bg-card p-3">
|
||||
<div className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Trophy className="h-3 w-3" />
|
||||
Class Rank
|
||||
</div>
|
||||
<div className="text-xl font-semibold tabular-nums">
|
||||
{ranking ? `${ranking.rank}/${ranking.classSize}` : "-"}
|
||||
</div>
|
||||
{ranking ? (
|
||||
<div className="text-xs text-muted-foreground">Current position</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border bg-card p-3">
|
||||
<ChartContainer config={chartConfig} className="h-[160px] w-full">
|
||||
<LineChart data={chartData} margin={{ left: 8, right: 8, top: 8, bottom: 8 }}>
|
||||
<CartesianGrid vertical={false} strokeDasharray="4 4" strokeOpacity={0.4} />
|
||||
<XAxis
|
||||
dataKey="title"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) =>
|
||||
value.slice(0, 8) + (value.length > 8 ? "..." : "")
|
||||
}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, 100]}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(value) => `${value}%`}
|
||||
width={30}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={{
|
||||
stroke: "hsl(var(--muted-foreground))",
|
||||
strokeWidth: 1,
|
||||
strokeDasharray: "4 4",
|
||||
}}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
indicator="line"
|
||||
labelKey="fullTitle"
|
||||
className="w-[200px]"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Line
|
||||
dataKey="score"
|
||||
type="monotone"
|
||||
stroke="var(--color-score)"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: "var(--color-score)", r: 3, strokeWidth: 2 }}
|
||||
activeDot={{ r: 5, strokeWidth: 0 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
|
||||
{grades.recent.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium uppercase text-muted-foreground">
|
||||
Recent Grades
|
||||
</div>
|
||||
{grades.recent.slice(0, 3).map((r) => (
|
||||
<Link
|
||||
key={r.assignmentId}
|
||||
href={`/parent/children/${childId}`}
|
||||
className="flex items-center justify-between rounded-md border bg-card p-2 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium text-sm truncate">{r.assignmentTitle}</div>
|
||||
<div className="text-xs text-muted-foreground">{formatDate(r.submittedAt)}</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className="tabular-nums shrink-0 ml-2">
|
||||
{r.score}/{r.maxScore}
|
||||
</Badge>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
131
src/modules/parent/components/child-homework-summary.tsx
Normal file
131
src/modules/parent/components/child-homework-summary.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import Link from "next/link"
|
||||
import { PenTool, TriangleAlert } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { cn, formatDate } from "@/shared/lib/utils"
|
||||
import type { ChildHomeworkSummary } from "@/modules/parent/types"
|
||||
|
||||
const getStatusVariant = (status: string): "default" | "secondary" | "outline" => {
|
||||
if (status === "graded") return "default"
|
||||
if (status === "submitted" || status === "in_progress") return "secondary"
|
||||
return "outline"
|
||||
}
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
if (status === "graded") return "Graded"
|
||||
if (status === "submitted") return "Submitted"
|
||||
if (status === "in_progress") return "In progress"
|
||||
return "Not started"
|
||||
}
|
||||
|
||||
const getDueUrgency = (dueAt: string | null) => {
|
||||
if (!dueAt) return null
|
||||
const now = new Date()
|
||||
const due = new Date(dueAt)
|
||||
const diffHours = (due.getTime() - now.getTime()) / (1000 * 60 * 60)
|
||||
if (diffHours < 0) return "overdue"
|
||||
if (diffHours < 48) return "urgent"
|
||||
return "normal"
|
||||
}
|
||||
|
||||
export function ChildHomeworkSummary({
|
||||
summary,
|
||||
childId,
|
||||
childName,
|
||||
}: {
|
||||
summary: ChildHomeworkSummary
|
||||
childId: string
|
||||
childName: string
|
||||
}) {
|
||||
const hasAssignments = summary.recentAssignments.length > 0
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<PenTool className="h-4 w-4 text-muted-foreground" />
|
||||
{childName}'s Homework
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-center">
|
||||
<div className="rounded-md border bg-card p-2">
|
||||
<div className="text-xs text-muted-foreground">Pending</div>
|
||||
<div className="text-lg font-semibold tabular-nums">{summary.pendingCount}</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card p-2">
|
||||
<div className="text-xs text-muted-foreground">Submitted</div>
|
||||
<div className="text-lg font-semibold tabular-nums">{summary.submittedCount}</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card p-2">
|
||||
<div className="text-xs text-muted-foreground">Graded</div>
|
||||
<div className="text-lg font-semibold tabular-nums">{summary.gradedCount}</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card p-2">
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
|
||||
<TriangleAlert className="h-3 w-3" />
|
||||
Overdue
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-lg font-semibold tabular-nums",
|
||||
summary.overdueCount > 0 && "text-destructive",
|
||||
)}
|
||||
>
|
||||
{summary.overdueCount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!hasAssignments ? (
|
||||
<EmptyState
|
||||
icon={PenTool}
|
||||
title="No assignments"
|
||||
description="No homework assigned right now."
|
||||
className="border-none h-40"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium uppercase text-muted-foreground">
|
||||
Recent Assignments
|
||||
</div>
|
||||
{summary.recentAssignments.map((a) => {
|
||||
const urgency = getDueUrgency(a.dueAt)
|
||||
const isGraded = a.progressStatus === "graded"
|
||||
return (
|
||||
<Link
|
||||
key={a.id}
|
||||
href={`/parent/children/${childId}`}
|
||||
className="flex items-center justify-between rounded-md border bg-card p-3 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="font-medium text-sm truncate">{a.title}</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Badge variant={getStatusVariant(a.progressStatus)} className="text-[10px]">
|
||||
{getStatusLabel(a.progressStatus)}
|
||||
</Badge>
|
||||
{a.dueAt ? (
|
||||
<span
|
||||
className={cn(
|
||||
!isGraded && urgency === "overdue" && "text-destructive font-medium",
|
||||
)}
|
||||
>
|
||||
Due {formatDate(a.dueAt)}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm font-medium tabular-nums shrink-0 ml-2">
|
||||
{a.latestScore ?? "-"}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
67
src/modules/parent/components/child-schedule-card.tsx
Normal file
67
src/modules/parent/components/child-schedule-card.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { CalendarDays, CalendarX, Clock, MapPin } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import type { ChildScheduleItem } from "@/modules/parent/types"
|
||||
|
||||
export function ChildScheduleCard({
|
||||
items,
|
||||
childName,
|
||||
}: {
|
||||
items: ChildScheduleItem[]
|
||||
childName: string
|
||||
}) {
|
||||
const hasSchedule = items.length > 0
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<CalendarDays className="h-4 w-4 text-muted-foreground" />
|
||||
{childName}'s Today Schedule
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasSchedule ? (
|
||||
<EmptyState
|
||||
icon={CalendarX}
|
||||
title="No classes today"
|
||||
description="The timetable is clear for today."
|
||||
className="border-none h-60"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between border-b pb-3 last:border-0 last:pb-0"
|
||||
>
|
||||
<div className="space-y-1 min-w-0">
|
||||
<div className="font-medium leading-none truncate">{item.course}</div>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
|
||||
<div className="flex items-center">
|
||||
<Clock className="mr-1 h-3 w-3" />
|
||||
<span>
|
||||
{item.startTime}–{item.endTime}
|
||||
</span>
|
||||
</div>
|
||||
{item.location ? (
|
||||
<div className="flex items-center">
|
||||
<MapPin className="mr-1 h-3 w-3" />
|
||||
<span className="truncate">{item.location}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className="shrink-0">
|
||||
{item.className}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
68
src/modules/parent/components/parent-dashboard.tsx
Normal file
68
src/modules/parent/components/parent-dashboard.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { CalendarDays, GraduationCap, Users } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { ChildCard } from "./child-card"
|
||||
import type { ParentDashboardData } from "@/modules/parent/types"
|
||||
|
||||
export function ParentDashboard({ data }: { data: ParentDashboardData }) {
|
||||
const { parentName, children } = data
|
||||
const hasChildren = children.length > 0
|
||||
|
||||
const hour = new Date().getHours()
|
||||
let greeting = "Welcome"
|
||||
if (hour < 12) greeting = "Good morning"
|
||||
else if (hour < 18) greeting = "Good afternoon"
|
||||
else greeting = "Good evening"
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Parent Dashboard</h1>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{greeting}
|
||||
{parentName ? `, ${parentName}` : ""}. Here's an overview of your children.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button asChild variant="outline" size="sm" className="gap-2">
|
||||
<a href="/parent/grades">
|
||||
<GraduationCap className="h-4 w-4" />
|
||||
Grades
|
||||
</a>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="sm" className="gap-2">
|
||||
<a href="/announcements">
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
Announcements
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!hasChildren ? (
|
||||
<EmptyState
|
||||
icon={Users}
|
||||
title="No children linked"
|
||||
description="Your account is not linked to any student accounts yet. Please contact the school administrator."
|
||||
className="border-none shadow-none"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>
|
||||
{children.length} {children.length === 1 ? "child" : "children"} linked
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{children.map((child) => (
|
||||
<ChildCard key={child.basicInfo.id} child={child} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
234
src/modules/parent/data-access.ts
Normal file
234
src/modules/parent/data-access.ts
Normal file
@@ -0,0 +1,234 @@
|
||||
import "server-only"
|
||||
|
||||
import { cache } from "react"
|
||||
import { and, asc, eq } from "drizzle-orm"
|
||||
|
||||
import { db } from "@/shared/db"
|
||||
import {
|
||||
classes,
|
||||
classEnrollments,
|
||||
grades,
|
||||
parentStudentRelations,
|
||||
users,
|
||||
} from "@/shared/db/schema"
|
||||
import { getStudentClasses, getStudentSchedule } from "@/modules/classes/data-access"
|
||||
import {
|
||||
getStudentDashboardGrades,
|
||||
getStudentHomeworkAssignments,
|
||||
} from "@/modules/homework/data-access"
|
||||
import { getStudentGradeSummary } from "@/modules/grades/data-access"
|
||||
import type {
|
||||
ChildDashboardData,
|
||||
ChildHomeworkSummary,
|
||||
ChildScheduleItem,
|
||||
ParentChildRelation,
|
||||
ParentDashboardData,
|
||||
} from "./types"
|
||||
|
||||
const toWeekday = (d: Date): 1 | 2 | 3 | 4 | 5 | 6 | 7 => {
|
||||
const day = d.getDay()
|
||||
return (day === 0 ? 7 : day) as 1 | 2 | 3 | 4 | 5 | 6 | 7
|
||||
}
|
||||
|
||||
export const getChildren = cache(async (parentId: string): Promise<ParentChildRelation[]> => {
|
||||
const id = parentId.trim()
|
||||
if (!id) return []
|
||||
|
||||
const rows = await db
|
||||
.select({
|
||||
id: parentStudentRelations.id,
|
||||
parentId: parentStudentRelations.parentId,
|
||||
studentId: parentStudentRelations.studentId,
|
||||
relation: parentStudentRelations.relation,
|
||||
createdAt: parentStudentRelations.createdAt,
|
||||
})
|
||||
.from(parentStudentRelations)
|
||||
.where(eq(parentStudentRelations.parentId, id))
|
||||
.orderBy(asc(parentStudentRelations.createdAt))
|
||||
|
||||
return rows.map((r) => ({
|
||||
id: r.id,
|
||||
parentId: r.parentId,
|
||||
studentId: r.studentId,
|
||||
relation: r.relation,
|
||||
createdAt: r.createdAt.toISOString(),
|
||||
}))
|
||||
})
|
||||
|
||||
export const getChildBasicInfo = cache(async (studentId: string, relation: string | null = null) => {
|
||||
const [student] = await db
|
||||
.select({
|
||||
id: users.id,
|
||||
name: users.name,
|
||||
email: users.email,
|
||||
image: users.image,
|
||||
gradeId: users.gradeId,
|
||||
})
|
||||
.from(users)
|
||||
.where(eq(users.id, studentId))
|
||||
.limit(1)
|
||||
|
||||
if (!student) return null
|
||||
|
||||
let gradeName: string | null = null
|
||||
if (student.gradeId) {
|
||||
const [grade] = await db
|
||||
.select({ name: grades.name })
|
||||
.from(grades)
|
||||
.where(eq(grades.id, student.gradeId))
|
||||
.limit(1)
|
||||
gradeName = grade?.name ?? null
|
||||
}
|
||||
|
||||
const [enrollment] = await db
|
||||
.select({
|
||||
classId: classEnrollments.classId,
|
||||
status: classEnrollments.status,
|
||||
})
|
||||
.from(classEnrollments)
|
||||
.where(and(eq(classEnrollments.studentId, studentId), eq(classEnrollments.status, "active")))
|
||||
.orderBy(asc(classEnrollments.createdAt))
|
||||
.limit(1)
|
||||
|
||||
let className: string | null = null
|
||||
let classId: string | null = null
|
||||
if (enrollment) {
|
||||
const [cls] = await db
|
||||
.select({ id: classes.id, name: classes.name })
|
||||
.from(classes)
|
||||
.where(eq(classes.id, enrollment.classId))
|
||||
.limit(1)
|
||||
if (cls) {
|
||||
classId = cls.id
|
||||
className = cls.name
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: student.id,
|
||||
name: student.name,
|
||||
email: student.email,
|
||||
image: student.image,
|
||||
gradeName,
|
||||
className,
|
||||
classId,
|
||||
relation,
|
||||
}
|
||||
})
|
||||
|
||||
const buildHomeworkSummary = (
|
||||
assignments: Awaited<ReturnType<typeof getStudentHomeworkAssignments>>,
|
||||
): ChildHomeworkSummary => {
|
||||
const now = new Date()
|
||||
const in7Days = new Date(now)
|
||||
in7Days.setDate(in7Days.getDate() + 7)
|
||||
|
||||
let pendingCount = 0
|
||||
let submittedCount = 0
|
||||
let gradedCount = 0
|
||||
let overdueCount = 0
|
||||
|
||||
for (const a of assignments) {
|
||||
if (a.progressStatus === "graded") {
|
||||
gradedCount += 1
|
||||
continue
|
||||
}
|
||||
if (a.progressStatus === "submitted") {
|
||||
submittedCount += 1
|
||||
}
|
||||
if (a.progressStatus === "not_started" || a.progressStatus === "in_progress") {
|
||||
pendingCount += 1
|
||||
}
|
||||
if (a.dueAt) {
|
||||
const due = new Date(a.dueAt)
|
||||
if (due < now && a.progressStatus !== "submitted") {
|
||||
overdueCount += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const recentAssignments = [...assignments]
|
||||
.sort((a, b) => {
|
||||
const aDue = a.dueAt ? new Date(a.dueAt).getTime() : Number.POSITIVE_INFINITY
|
||||
const bDue = b.dueAt ? new Date(b.dueAt).getTime() : Number.POSITIVE_INFINITY
|
||||
return aDue - bDue
|
||||
})
|
||||
.slice(0, 5)
|
||||
|
||||
return {
|
||||
pendingCount,
|
||||
submittedCount,
|
||||
gradedCount,
|
||||
overdueCount,
|
||||
recentAssignments,
|
||||
}
|
||||
}
|
||||
|
||||
const buildTodaySchedule = (
|
||||
schedule: Awaited<ReturnType<typeof getStudentSchedule>>,
|
||||
): ChildScheduleItem[] => {
|
||||
const todayWeekday = toWeekday(new Date())
|
||||
return schedule
|
||||
.filter((s) => s.weekday === todayWeekday)
|
||||
.map((s) => ({
|
||||
id: s.id,
|
||||
classId: s.classId,
|
||||
className: s.className,
|
||||
course: s.course,
|
||||
startTime: s.startTime,
|
||||
endTime: s.endTime,
|
||||
location: s.location ?? null,
|
||||
}))
|
||||
.sort((a, b) => a.startTime.localeCompare(b.startTime))
|
||||
}
|
||||
|
||||
export const getChildDashboardData = cache(
|
||||
async (studentId: string, relation: string | null = null): Promise<ChildDashboardData | null> => {
|
||||
const basicInfo = await getChildBasicInfo(studentId, relation)
|
||||
if (!basicInfo) return null
|
||||
|
||||
const [enrolledClasses, schedule, assignments, gradeTrend, gradeSummary] = await Promise.all([
|
||||
getStudentClasses(studentId),
|
||||
getStudentSchedule(studentId),
|
||||
getStudentHomeworkAssignments(studentId),
|
||||
getStudentDashboardGrades(studentId),
|
||||
getStudentGradeSummary(studentId),
|
||||
])
|
||||
|
||||
return {
|
||||
basicInfo,
|
||||
enrolledClasses,
|
||||
todaySchedule: buildTodaySchedule(schedule),
|
||||
homeworkSummary: buildHomeworkSummary(assignments),
|
||||
gradeTrend,
|
||||
gradeSummary,
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export const getParentDashboardData = cache(
|
||||
async (parentId: string): Promise<ParentDashboardData> => {
|
||||
const id = parentId.trim()
|
||||
if (!id) return { parentName: null, children: [] }
|
||||
|
||||
const [parent, relations] = await Promise.all([
|
||||
db.select({ name: users.name }).from(users).where(eq(users.id, id)).limit(1),
|
||||
getChildren(id),
|
||||
])
|
||||
|
||||
const parentName = parent[0]?.name ?? null
|
||||
|
||||
if (relations.length === 0) {
|
||||
return { parentName, children: [] }
|
||||
}
|
||||
|
||||
const children = await Promise.all(
|
||||
relations.map((r) => getChildDashboardData(r.studentId, r.relation)),
|
||||
)
|
||||
|
||||
return {
|
||||
parentName,
|
||||
children: children.filter((c): c is ChildDashboardData => c !== null),
|
||||
}
|
||||
},
|
||||
)
|
||||
57
src/modules/parent/types.ts
Normal file
57
src/modules/parent/types.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import type {
|
||||
StudentDashboardGradeProps,
|
||||
StudentHomeworkAssignmentListItem,
|
||||
} from "@/modules/homework/types"
|
||||
import type { StudentEnrolledClass } from "@/modules/classes/types"
|
||||
import type { StudentGradeSummary } from "@/modules/grades/types"
|
||||
|
||||
export type ParentChildRelation = {
|
||||
id: string
|
||||
parentId: string
|
||||
studentId: string
|
||||
relation: string | null
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export type ChildBasicInfo = {
|
||||
id: string
|
||||
name: string | null
|
||||
email: string
|
||||
image: string | null
|
||||
gradeName: string | null
|
||||
className: string | null
|
||||
classId: string | null
|
||||
relation: string | null
|
||||
}
|
||||
|
||||
export type ChildScheduleItem = {
|
||||
id: string
|
||||
classId: string
|
||||
className: string
|
||||
course: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
location: string | null
|
||||
}
|
||||
|
||||
export type ChildHomeworkSummary = {
|
||||
pendingCount: number
|
||||
submittedCount: number
|
||||
gradedCount: number
|
||||
overdueCount: number
|
||||
recentAssignments: StudentHomeworkAssignmentListItem[]
|
||||
}
|
||||
|
||||
export type ChildDashboardData = {
|
||||
basicInfo: ChildBasicInfo
|
||||
enrolledClasses: StudentEnrolledClass[]
|
||||
todaySchedule: ChildScheduleItem[]
|
||||
homeworkSummary: ChildHomeworkSummary
|
||||
gradeTrend: StudentDashboardGradeProps
|
||||
gradeSummary: StudentGradeSummary | null
|
||||
}
|
||||
|
||||
export type ParentDashboardData = {
|
||||
parentName: string | null
|
||||
children: ChildDashboardData[]
|
||||
}
|
||||
Reference in New Issue
Block a user