完整性更新
现在已经实现了大部分基础功能
This commit is contained in:
SpecialX
@@ -125,7 +125,7 @@ jobs:
|
||||
--restart unless-stopped \
|
||||
--name nextjs-app \
|
||||
-e NODE_ENV=production \
|
||||
-e DATABASE_URL=${{ secrets.DATABASE_URL_PRODUCTION }} \
|
||||
-e DATABASE_URL=${{ secrets.DATABASE_URL }} \
|
||||
-e NEXT_TELEMETRY_DISABLED=1 \
|
||||
nextjs-app
|
||||
|
||||
|
||||
434
docs/architecture/003_frontend_engineering_standards.md
Normal file
434
docs/architecture/003_frontend_engineering_standards.md
Normal file
@@ -0,0 +1,434 @@
|
||||
# Frontend Engineering Standards (Next_Edu)
|
||||
|
||||
**Status**: ACTIVE
|
||||
**Owner**: Frontend Team
|
||||
**Scope**: Next.js App Router 前端工程规范（编码、目录、交互、样式、数据流、质量门禁）
|
||||
**Applies To**: `src/app/*`, `src/modules/*`, `src/shared/*`, `docs/design/*`
|
||||
|
||||
---
|
||||
|
||||
## 0. 目标与非目标
|
||||
|
||||
### 0.1 目标
|
||||
|
||||
- 让新加入的前端工程师在 30 分钟内完成对齐并开始稳定迭代
|
||||
- 保证 UI 一致性（Design Token + Shadcn/UI 复用）
|
||||
- 充分利用 App Router + RSC（Server-First）降低 bundle、提升性能
|
||||
- 保证类型安全与可维护性（Vertical Slice、数据访问边界清晰）
|
||||
- 形成可执行的质量门禁（lint/typecheck/build 与评审清单）
|
||||
|
||||
### 0.2 非目标
|
||||
|
||||
- 不规定具体业务模块的需求细节（业务规则以 `docs/design/*` 与 PRD 为准）
|
||||
- 不引入与当前仓库技术栈不一致的新框架/库（新增依赖需明确收益与替代方案）
|
||||
|
||||
---
|
||||
|
||||
## 1. 接手流程（Onboarding Checklist）
|
||||
|
||||
### 1.1 先读什么（按顺序）
|
||||
|
||||
- 设计系统与 UI 规范：[docs/design/design_system.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/design_system.md)
|
||||
- 角色路由与目录规范：[docs/architecture/002_role_based_routing.md](file:///c:/Users/xiner/Desktop/CICD/docs/architecture/002_role_based_routing.md)
|
||||
- 项目架构总览：[ARCHITECTURE.md](file:///c:/Users/xiner/Desktop/CICD/ARCHITECTURE.md)
|
||||
- 你将要改动的模块实现文档：`docs/design/00*_*.md`
|
||||
|
||||
### 1.2 开发前对齐（必须）
|
||||
|
||||
- 核对 Design Tokens 与暗色模式变量：
|
||||
- Tailwind 语义色映射：[tailwind.config.ts](file:///c:/Users/xiner/Desktop/CICD/tailwind.config.ts)
|
||||
- CSS 变量定义：[src/app/globals.css](file:///c:/Users/xiner/Desktop/CICD/src/app/globals.css)
|
||||
- 盘点可复用 UI 组件：`src/shared/components/ui/*`
|
||||
- 盘点通用工具（`cn` 等）：[src/shared/lib/utils.ts](file:///c:/Users/xiner/Desktop/CICD/src/shared/lib/utils.ts)
|
||||
|
||||
### 1.3 环境变量与配置校验（必须）
|
||||
|
||||
- 统一使用 `@t3-oss/env-nextjs` 的 `env` 入口读取环境变量，禁止在业务代码中散落 `process.env.*`
|
||||
- Schema 定义与校验入口：[src/env.mjs](file:///c:/Users/xiner/Desktop/CICD/src/env.mjs)
|
||||
- 任何新增环境变量：
|
||||
- 必须先在 `src/env.mjs` 增加 schema
|
||||
- 必须在 docs 中更新部署/运行说明（就近更新对应模块文档或全局架构文档）
|
||||
|
||||
### 1.3 本地跑通（推荐顺序）
|
||||
|
||||
- 安装依赖：`npm install`
|
||||
- 启动开发：`npm run dev`
|
||||
- 质量检查：
|
||||
- `npm run lint`
|
||||
- `npm run typecheck`
|
||||
- `npm run build`
|
||||
|
||||
---
|
||||
|
||||
## 2. 核心工程原则（必须遵守）
|
||||
|
||||
### 2.1 Vertical Slice（按业务功能组织）
|
||||
|
||||
- 业务必须放在 `src/modules/<feature>/*`
|
||||
- `src/app/*` 是路由层，只负责：
|
||||
- 布局组合（layout）
|
||||
- 读取 `searchParams` / `params`
|
||||
- 调用模块的数据访问函数（`data-access.ts`）
|
||||
- 组合模块组件渲染
|
||||
- 通用能力放在 `src/shared/*`：
|
||||
- 通用 UI：`src/shared/components/ui/*`
|
||||
- 通用工具：`src/shared/lib/*`
|
||||
- DB 与 schema：`src/shared/db/*`
|
||||
|
||||
### 2.2 Server-First（默认 Server Component）
|
||||
|
||||
- 默认写 Server Component
|
||||
- 只有在需要以下能力时，才把“最小子组件”标记为 Client Component：
|
||||
- `useState/useEffect/useMemo`（与交互/浏览器相关）
|
||||
- DOM 事件（`onClick/onChange` 等）
|
||||
- `useRouter/usePathname` 等客户端导航 hooks
|
||||
- Radix/Portal 类组件需要客户端（Dialog/Dropdown 等通常在 client 内组合使用）
|
||||
|
||||
### 2.3 不重复造轮子（Shadcn/UI 优先）
|
||||
|
||||
- 禁止手写 Modal/Dropdown/Tooltip 等基础交互容器
|
||||
- 优先组合 `src/shared/components/ui/*`（Button/Card/Dialog/DropdownMenu/AlertDialog/Skeleton/EmptyState 等）
|
||||
- 若现有基础组件无法满足需求：
|
||||
1. 优先通过 Composition 在业务模块里封装“业务组件”
|
||||
2. 仅在存在 bug 或需要全局一致性调整时，才考虑改动 `src/shared/components/ui/*`（并在 PR 中明确影响面）
|
||||
|
||||
### 2.4 Client Component 引用边界（强制）
|
||||
|
||||
- 禁止在 Client Component 中导入任何“服务端实现”代码（例如 DB 实例、data-access、server-only 模块）
|
||||
- Client Component 允许导入：
|
||||
- `src/shared/components/ui/*`（基础 UI）
|
||||
- `src/shared/lib/*`（纯前端工具函数）
|
||||
- Server Actions（`"use server"` 导出的 action 函数）
|
||||
- 类型定义必须使用 `import type`（避免把服务端依赖带入 client bundle）
|
||||
- 所有 `data-access.ts` 必须包含 `import "server-only"`，并将其视为强制安全边界（不是可选优化）
|
||||
|
||||
---
|
||||
|
||||
## 3. 目录与路由规范
|
||||
|
||||
### 3.1 路由目录（App Router）
|
||||
|
||||
- 认证域：`src/app/(auth)/*`
|
||||
- 控制台域（共享 App Shell）：`src/app/(dashboard)/*`
|
||||
- 角色域：`src/app/(dashboard)/teacher|student|admin/*`
|
||||
- `/dashboard` 作为入口页（重定向/分发到具体角色 dashboard）：参考 [002_role_based_routing.md](file:///c:/Users/xiner/Desktop/CICD/docs/architecture/002_role_based_routing.md)
|
||||
|
||||
### 3.2 页面文件职责
|
||||
|
||||
- `page.tsx`：页面组装（RSC），不承载复杂交互
|
||||
- `loading.tsx`：路由级加载态（Skeleton）
|
||||
- `error.tsx`：路由级错误边界（友好 UI）
|
||||
- `not-found.tsx`：路由级 404
|
||||
|
||||
### 3.3 错误处理与用户反馈（Error Handling & Feedback）
|
||||
|
||||
- 路由级错误（404/500/未捕获异常）：
|
||||
- 交由 `not-found.tsx` / `error.tsx` 处理
|
||||
- 禁止在 `error.tsx` 里弹 Toast 堆栈刷屏，错误页输出必须友好且可恢复（例如提供 retry / 返回入口）
|
||||
- 业务操作反馈（表单提交/按钮操作/行级动作）：
|
||||
- 统一由 Client Component 在调用 Server Action 后触发 `sonner` toast
|
||||
- 只在“成功”或“明确失败（业务/校验错误）”时触发 toast；未知异常由 action 归一为失败 message
|
||||
|
||||
### 3.4 异步组件与 Suspense（Streaming）
|
||||
|
||||
- 对于数据加载超过 300ms 的非核心 UI 区块（例如：仪表盘某张统计卡片/图表/第三方数据块）：
|
||||
- 必须用 `<Suspense fallback={<Skeleton />}>` 包裹，以避免全页阻塞
|
||||
- 禁止在 `page.tsx` 顶层用多个串行 `await` 造成瀑布请求：
|
||||
- 多个独立请求必须使用 `Promise.all`
|
||||
- 或拆分为多个 async 子组件并行流式渲染（用 `Suspense` 分段展示）
|
||||
|
||||
### 3.3 动态渲染策略（避免 build 阶段查库）
|
||||
|
||||
当页面在渲染时会查询数据库或依赖 request-time 数据，且无法安全静态化时：
|
||||
|
||||
- 在页面入口显式声明：
|
||||
- `export const dynamic = "force-dynamic"`
|
||||
- 该策略已用于教师端班级与作业相关页面，见相应 design 文档（例如教师班级模块更新记录）
|
||||
|
||||
---
|
||||
|
||||
## 4. 模块内文件结构（强制）
|
||||
|
||||
每个业务模块使用统一结构（可按复杂度增减，但命名必须一致）：
|
||||
|
||||
```
|
||||
src/modules/<feature>/
|
||||
├── components/ # 仅该模块使用的 UI 组件（可含 client 组件）
|
||||
├── actions.ts # Server Actions（写入/变更 + revalidatePath）
|
||||
├── data-access.ts # 数据查询与聚合（server-only + cache）
|
||||
├── schema.ts # Zod schema（若需要）
|
||||
└── types.ts # 类型定义（与 DB/DTO 对齐）
|
||||
```
|
||||
|
||||
约束：
|
||||
|
||||
- `actions.ts` 必须包含 `"use server"`
|
||||
- `data-access.ts` 必须包含 `import "server-only"`（防止误导入到 client bundle）
|
||||
- 复杂页面组件必须下沉到 `src/modules/<feature>/components/*`，路由层只做组装
|
||||
|
||||
---
|
||||
|
||||
## 5. Server / Client 边界与拆分策略
|
||||
|
||||
### 5.1 最小化 Client Component 的落地方式
|
||||
|
||||
- 页面保持 RSC
|
||||
- 把需要交互的部分抽成独立 `components/*` 子组件并标记 `"use client"`
|
||||
- Client 组件向上暴露“数据变化事件”，由 Server Action 完成写入并 `revalidatePath`
|
||||
|
||||
### 5.4 Hydration 一致性（必须）
|
||||
|
||||
- 所有 Client Component 的首屏渲染必须保证与 SSR 产出的 HTML 一致
|
||||
- 禁止在 render 分支中使用：
|
||||
- `typeof window !== "undefined"` 之类的 server/client 分支
|
||||
- `Date.now()` / `Math.random()` 等不稳定输入
|
||||
- 依赖用户 locale 的时间格式化（除非服务端与客户端完全一致并带 snapshot）
|
||||
- 对于 Radix 等组件生成的动态 aria/id 导致的属性差异：
|
||||
- 优先通过组件封装确保首屏稳定
|
||||
- 若确认差异不可避免且不影响交互，可在最小范围使用 `suppressHydrationWarning`
|
||||
|
||||
### 5.2 页面必须只做“拼装”，功能模块必须独立
|
||||
|
||||
- 任何功能模块都必须在 `src/modules/<feature>/components/*` 内独立实现
|
||||
- `page.tsx` 只负责：
|
||||
- 读取 `params/searchParams`
|
||||
- 调用 `data-access.ts` 获取数据
|
||||
- 以组合方式拼装模块组件（不在 page 内实现具体交互与复杂 UI）
|
||||
- 行数不是拆分依据，只是“路由层变厚”的信号；一旦出现成块的功能 UI，应立即下沉到模块组件
|
||||
|
||||
### 5.3 什么时候允许在 Client 中做“局部工作台”
|
||||
|
||||
当交互复杂到“页面需要类似 SPA 的局部体验”，允许将工作台容器作为 Client：
|
||||
|
||||
- 典型场景：三栏工作台、拖拽排序编辑器、复杂筛选器组合、富交互表格
|
||||
- 但仍要求：
|
||||
- 初始数据由 RSC 获取并传入 Client
|
||||
- 写操作通过 Server Actions
|
||||
- UI 状态尽量 URL 化（能分享/回溯）
|
||||
|
||||
---
|
||||
|
||||
## 6. 样式与 UI 一致性（Design System 强制项）
|
||||
|
||||
### 6.1 Token 优先（语义化颜色/圆角）
|
||||
|
||||
- 颜色必须使用语义 token：
|
||||
- `bg-background`, `bg-card`, `bg-muted`, `text-foreground`, `text-muted-foreground`, `border-border` 等
|
||||
- 禁止硬编码颜色值（`#fff`/`rgb()`）与随意引入灰度（如 `bg-gray-100`）
|
||||
- 圆角、边框、阴影遵循设计系统：
|
||||
- 常规组件使用 `rounded-md` 等语义半径（由 `--radius` 映射）
|
||||
|
||||
### 6.2 className 规范
|
||||
|
||||
- 所有条件样式必须使用 `className={cn(...)}`
|
||||
- `cn` 入口为 `@/shared/lib/utils`
|
||||
|
||||
### 6.3 禁止 Arbitrary Values（默认）
|
||||
|
||||
- 默认禁止 `w-[123px]` 等任意值
|
||||
- 只有在设计系统或现有实现明确允许、并且无法用 token/栅格解决时，才可使用，并在 PR 描述说明原因
|
||||
|
||||
### 6.4 微交互与状态（必须有）
|
||||
|
||||
- 按钮 hover：必须有 transition（现有 Button 组件已内置）
|
||||
- 列表项 hover：使用 `hover:bg-muted/50` 等轻量反馈
|
||||
- Loading：必须使用 `Skeleton`（路由级 `loading.tsx` 或组件内 skeleton）
|
||||
- Empty：必须使用 `EmptyState`
|
||||
- Toast：统一使用 `sonner`
|
||||
|
||||
---
|
||||
|
||||
## 7. 图标规范（lucide-react）
|
||||
|
||||
- 统一使用 `lucide-react`
|
||||
- 图标尺寸统一：默认 `h-4 w-4`，需要强调时 `h-5 w-5`
|
||||
- 颜色使用语义化：例如 `text-muted-foreground`
|
||||
|
||||
---
|
||||
|
||||
## 8. 数据流规范（查询、写入、状态）
|
||||
|
||||
### 8.1 查询（data-access.ts）
|
||||
|
||||
- 所有查询放在 `src/modules/<feature>/data-access.ts`
|
||||
- 需要复用/去重的查询优先用 `cache` 包裹（React cache）
|
||||
- 查询函数返回“UI 直接可消费的 DTO”，避免页面层再做复杂映射
|
||||
|
||||
### 8.2 写入（actions.ts）
|
||||
|
||||
- 所有写操作必须通过 Server Actions
|
||||
- 每个 action：
|
||||
- 校验输入（Zod 或手写 guard）
|
||||
- 执行 DB 写入
|
||||
- 必须 `revalidatePath`（以页面为单位）
|
||||
|
||||
### 8.3 Server Action 返回结构（统一反馈协议）
|
||||
|
||||
- 所有 Server Action 必须返回统一结构，用于前端统一处理 toast 与表单错误
|
||||
- 统一使用类型：[src/shared/types/action-state.ts](file:///c:/Users/xiner/Desktop/CICD/src/shared/types/action-state.ts)
|
||||
|
||||
```ts
|
||||
export type ActionState<T = void> = {
|
||||
success: boolean
|
||||
message?: string
|
||||
errors?: Record<string, string[]>
|
||||
data?: T
|
||||
}
|
||||
```
|
||||
|
||||
约束：
|
||||
|
||||
- `errors` 必须对齐 `zod` 的 `error.flatten().fieldErrors` 结构
|
||||
- 禁止在各模块内重复定义自有的 ActionState 类型
|
||||
|
||||
### 8.4 Toast 触发时机（强制）
|
||||
|
||||
- Client Component 在调用 Server Action 后：
|
||||
- `success: true`：触发 `toast.success(message)`（或使用模块内约定的成功文案）
|
||||
- `success: false`：
|
||||
- 存在 `errors`：优先渲染表单字段错误；可选触发 `toast.error(message)`
|
||||
- 不存在 `errors`：触发 `toast.error(message || "Action failed")`
|
||||
- 对于路由级异常与边界错误，禁止用 toast 替代 `error.tsx`
|
||||
|
||||
### 8.5 URL State（nuqs 优先）
|
||||
|
||||
- 列表页筛选/分页/Tab/排序等“可分享状态”必须放 URL
|
||||
- 使用 `nuqs` 做类型安全的 query state 管理
|
||||
|
||||
### 8.6 Data Access 权限边界（Security / IDOR 防护）
|
||||
|
||||
- `data-access.ts` 不是纯 DTO 映射层，必须承担数据归属权校验
|
||||
- 允许两种合规方式（二选一，但模块内必须统一）：
|
||||
- **方式 A（强制传参）**：所有 data-access 函数显式接收 `actor`（userId/role）并在查询条件中约束归属（例如 teacherId）
|
||||
- **方式 B（函数内获取）**：data-access 函数首行获取 session/user 并校验 role/归属，再执行查询
|
||||
- 禁止把权限校验放在 page.tsx 或 client 组件中作为唯一屏障
|
||||
|
||||
---
|
||||
|
||||
## 9. 数据完整性与 Seed 规则（禁止 Mock）
|
||||
|
||||
项目默认不使用 Mock 数据。
|
||||
|
||||
当某功能缺失实际数据，开发者必须把数据补齐到数据库与种子数据中，而不是在前端临时模拟。
|
||||
|
||||
执行规范：
|
||||
|
||||
- 若缺失的是“表结构/字段/关系”：
|
||||
- 修改 `src/shared/db/schema.ts` 与 `src/shared/db/relations.ts`（按既有模式）
|
||||
- 生成并提交 Drizzle migration（`drizzle/*.sql`）
|
||||
- 若缺失的是“可演示的业务数据”：
|
||||
- 更新 `scripts/seed.ts`，确保 `npm run db:seed` 可一键生成可用数据
|
||||
- 文档同步（必须）：
|
||||
- 在 [schema-changelog.md](file:///c:/Users/xiner/Desktop/CICD/docs/db/schema-changelog.md) 记录本次新增/变更的数据表、字段、索引与外键
|
||||
- 在对应模块的 `docs/design/00*_*.md` 中补充“新增了哪些数据/为什么需要/如何验证（db:seed + 页面路径）”
|
||||
|
||||
### 9.1 Seed 分层（降低阻塞）
|
||||
|
||||
- Seed 分为两类：
|
||||
- **Baseline Seed**：全项目必备的最小集合（核心用户/角色/基础字典数据等），保证任何页面都不因“数据空”而无法进入流程
|
||||
- **Scenario Seed（按模块）**：面向具体模块的可演示数据包（例如：班级/题库/试卷/作业），用于复现与验证该模块交互
|
||||
- 任何模块新增数据依赖，必须以 “Scenario Seed” 的形式落到 `scripts/seed.ts`，而不是把数据要求隐含在前端逻辑里
|
||||
|
||||
### 9.2 Seed 可复现与数据锚点（保证跨模块联动）
|
||||
|
||||
- Seed 必须可重复执行（idempotent），避免开发环境多次执行后产生脏数据与重复数据
|
||||
- 对跨模块联动依赖的关键实体，必须提供可稳定引用的数据锚点：
|
||||
- 固定标识（如固定 email/slug/title 组合）或可预测 ID（按现有 seed 约定）
|
||||
- 文档必须写明锚点是什么、依赖它的模块有哪些、如何验证
|
||||
- 禁止在 UI 里依赖“随机生成数据顺序”来定位实体（例如 “取第一条记录作为 demo 用户” 这类逻辑应退化为明确锚点）
|
||||
|
||||
### 9.3 外部服务的例外（仅限 Adapter Mock）
|
||||
|
||||
- 内部业务数据严格遵守“DB + Migration + Seed”，不允许 Mock
|
||||
- 仅当对接外部不可控服务（支付/短信/第三方 AI 流式等）且无法用本地 seed 复现时：
|
||||
- 允许在 `src/shared/lib/mock-adapters/*` 建立 mock 适配器
|
||||
- 必须先定义 Adapter 接口，再提供真实实现与 mock 实现（业务模块只能依赖接口，不可直接依赖某个具体实现）
|
||||
- 该 mock 仅用于外部服务交互层，禁止承载内部业务数据
|
||||
|
||||
---
|
||||
|
||||
## 10. 表单规范（react-hook-form + zod）
|
||||
|
||||
- 表单统一使用 `react-hook-form` + `@hookform/resolvers` + `zod`
|
||||
- 错误提示放在输入框下方：
|
||||
- 字号 `text-xs`
|
||||
- 颜色 `text-destructive`
|
||||
- 破坏性操作必须二次确认（`AlertDialog`）
|
||||
- 提交中按钮禁用并展示 loading（可使用 `useFormStatus` 或本地 state）
|
||||
|
||||
---
|
||||
|
||||
## 11. 质量门禁与评审清单（PR 必须过）
|
||||
|
||||
### 11.1 本地必须通过
|
||||
|
||||
- `npm run lint`
|
||||
- `npm run typecheck`
|
||||
- `npm run build`
|
||||
|
||||
### 11.2 代码评审清单（Reviewer 逐项检查）
|
||||
|
||||
- 目录结构是否符合 Vertical Slice（路由层是否保持“薄”）
|
||||
- 页面是否只做拼装（功能 UI 是否全部下沉到模块组件）
|
||||
- Server/Client 边界是否最小化（是否把整页误标 client）
|
||||
- 是否复用 `src/shared/components/ui/*`，是否重复实现基础交互
|
||||
- 是否使用语义化 token（颜色/圆角/间距），是否引入硬编码颜色与大量 arbitrary values
|
||||
- Loading/Empty/Error 是否齐全（Skeleton/EmptyState/error.tsx）
|
||||
- 列表页筛选是否 URL 化（nuqs），是否支持刷新/分享
|
||||
- 写操作是否通过 Server Action 且正确 `revalidatePath`
|
||||
- 是否避免 Mock（数据是否通过迁移 + seed 补齐，且 docs/db 与模块文档已同步）
|
||||
- 是否引入不必要的依赖与重型客户端逻辑
|
||||
|
||||
### 11.3 Commit 规范（Git History）
|
||||
|
||||
- 推荐遵循 Conventional Commits：
|
||||
- `feat:` 新功能
|
||||
- `fix:` 修复 bug
|
||||
- `docs:` 文档更新
|
||||
- `refactor:` 重构（无功能变化）
|
||||
- `chore:` 工程杂项
|
||||
- 约束：
|
||||
- 单次提交必须聚焦一个意图，避免把大范围格式化与功能修改混在一起
|
||||
- 涉及 DB 迁移与 seed 变更时，commit message 必须包含模块/领域关键词，便于追溯
|
||||
|
||||
---
|
||||
|
||||
## 12. 文档同步规则（Docs Sync）
|
||||
|
||||
以下情况必须同步更新文档（就近放在 `docs/design/*` 或 `docs/architecture/*`）：
|
||||
|
||||
- 新增“全局交互模式”（例如：新的工作台/拖拽范式/跨模块复用交互）
|
||||
- 新增“全局组件”或改变基础 UI 行为（影响 `src/shared/components/ui/*`）
|
||||
- 新增关键路由结构或权限/角色策略
|
||||
|
||||
### 12.1 业务组件可发现性（可选但推荐）
|
||||
|
||||
- 对 `src/modules/<feature>/components` 内的复杂业务组件（例如：试卷编辑器、排课表、工作台）：
|
||||
- 推荐在对应的 `docs/design/00*_*.md` 增加“用法示例 + 关键 props + 截图”
|
||||
- 若团队资源允许，可引入 Storybook 作为可视化组件目录（不作为硬性门禁）
|
||||
|
||||
---
|
||||
|
||||
## 13. Performance Essentials（必须遵守）
|
||||
|
||||
- 图片：
|
||||
- 强制使用 `next/image` 替代 `<img>`（SVG 或已明确无需优化的极小图标除外）
|
||||
- 头像等外部域名资源必须配置并明确缓存策略
|
||||
- 字体：
|
||||
- 强制使用 `next/font` 管理字体加载
|
||||
- 禁止在 CSS 中 `@import` 外部字体 URL（避免 CLS 与阻塞渲染）
|
||||
- 依赖：
|
||||
- 禁止引入重型动画库作为默认方案；复杂动效需按需加载并解释收益
|
||||
- 大体积 Client 组件必须拆分与动态加载，并通过 `Suspense` 提供 skeleton fallback
|
||||
|
||||
---
|
||||
|
||||
## 14. 参考实现（从现有代码学习的路径）
|
||||
|
||||
- 设计系统与 UI 组件清单：[docs/design/design_system.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/design_system.md)
|
||||
- Auth：路由层 RSC + 表单 client 拆分模式：[docs/design/001_auth_ui_implementation.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/001_auth_ui_implementation.md)
|
||||
- 教师端班级模块：URL state + client 交互组件 + server actions 的组合：[docs/design/002_teacher_dashboard_implementation.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/002_teacher_dashboard_implementation.md)
|
||||
- 教材工作台：RSC 拉初始数据 + client 工作台容器接管交互：[docs/design/003_textbooks_module_implementation.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/003_textbooks_module_implementation.md)
|
||||
- 题库：nuqs 驱动筛选 + TanStack Table + CRUD actions：[docs/design/004_question_bank_implementation.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/004_question_bank_implementation.md)
|
||||
- 考试组卷：拖拽编辑器（@dnd-kit）+ structure JSON 模型：[docs/design/005_exam_module_implementation.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/005_exam_module_implementation.md)
|
||||
- 作业：冻结 exam → assignment 的域模型 + 学生作答/教师批改闭环：[docs/design/006_homework_module_implementation.md](file:///c:/Users/xiner/Desktop/CICD/docs/design/006_homework_module_implementation.md)
|
||||
@@ -75,3 +75,128 @@ This release introduces homework-related tables and hardens foreign key names to
|
||||
### 4. Impact Analysis
|
||||
* **Performance**: Minimal. New indexes are scoped to common homework access patterns.
|
||||
* **Data Integrity**: High. Foreign keys enforce referential integrity for homework workflow.
|
||||
|
||||
## v1.3.0 - Classes Domain (Teacher Class Management)
|
||||
**Date:** 2025-12-31
|
||||
**Migration ID:** `0003_petite_newton_destine`
|
||||
**Author:** Principal Database Architect
|
||||
|
||||
### 1. Summary
|
||||
This release introduces the core schema for teacher class management: classes, enrollments, and schedules.
|
||||
|
||||
### 2. Changes
|
||||
|
||||
#### 2.1 Tables: Classes Domain
|
||||
* **Action**: `CREATE TABLE`
|
||||
* **Tables**:
|
||||
* `classes`
|
||||
* `class_enrollments`
|
||||
* `class_schedule`
|
||||
* **Reason**: Support teacher-owned classes, student enrollment lists, and weekly schedules.
|
||||
|
||||
#### 2.2 Enum: Enrollment Status
|
||||
* **Action**: `ADD ENUM`
|
||||
* **Enum**: `class_enrollment_status` = (`active`, `inactive`)
|
||||
* **Reason**: Provide a stable status field for filtering active enrollments.
|
||||
|
||||
#### 2.3 Foreign Keys & Indexes
|
||||
* **Action**: `ADD FOREIGN KEY`, `CREATE INDEX`
|
||||
* **Key Relationships**:
|
||||
* `classes.teacher_id` -> `users.id` (cascade delete)
|
||||
* `class_enrollments.class_id` -> `classes.id` (cascade delete)
|
||||
* `class_enrollments.student_id` -> `users.id` (cascade delete)
|
||||
* `class_schedule.class_id` -> `classes.id` (cascade delete)
|
||||
* **Indexes**:
|
||||
* `classes_teacher_idx`, `classes_grade_idx`
|
||||
* `class_enrollments_class_idx`, `class_enrollments_student_idx`
|
||||
* `class_schedule_class_idx`, `class_schedule_class_day_idx`
|
||||
|
||||
### 3. Migration Strategy
|
||||
* **Up**: Run standard Drizzle migration. Ensure `DATABASE_URL` points to the intended schema (e.g., `next_edu`).
|
||||
* **Down**: Not provided. Dropping these tables is destructive and should be handled explicitly per environment.
|
||||
|
||||
### 4. Impact Analysis
|
||||
* **Performance**: Indexes align with common query patterns (teacher listing, enrollment filtering, per-class schedule).
|
||||
* **Data Integrity**: High. Foreign keys enforce ownership and membership integrity across teacher/classes/students.
|
||||
|
||||
## v1.4.0 - Classes Domain Enhancements (School Name & Subject Teachers)
|
||||
**Date:** 2026-01-07
|
||||
**Migration ID:** `0005_add_class_school_subject_teachers`
|
||||
**Author:** Frontend/Fullstack Engineering
|
||||
|
||||
### 1. Summary
|
||||
This release extends the Classes domain to support school-level sorting and per-subject teacher assignment defaults.
|
||||
|
||||
### 2. Changes
|
||||
|
||||
#### 2.1 Table: `classes`
|
||||
* **Action**: `ADD COLUMN`
|
||||
* **Field**: `school_name` (varchar(255), nullable)
|
||||
* **Reason**: Enable sorting/grouping by school name, then grade, then class name.
|
||||
|
||||
#### 2.2 Table: `class_subject_teachers`
|
||||
* **Action**: `CREATE TABLE`
|
||||
* **Primary Key**: (`class_id`, `subject`)
|
||||
* **Columns**:
|
||||
* `class_id` (varchar(128), FK -> `classes.id`, cascade delete)
|
||||
* `subject` (enum: `语文/数学/英语/美术/体育/科学/社会/音乐`)
|
||||
* `teacher_id` (varchar(128), FK -> `users.id`, set null on delete)
|
||||
* `created_at`, `updated_at`
|
||||
* **Reason**: Maintain a stable default “subject list” per class while allowing admin/teacher to assign the actual teacher per subject.
|
||||
|
||||
### 3. Migration Strategy
|
||||
* **Up**: Run standard Drizzle migration.
|
||||
* **Down**: Not provided. Dropping assignment history is destructive.
|
||||
|
||||
### 4. Impact Analysis
|
||||
* **Performance**: Minimal. Table is small (8 rows per class) and indexed by class/teacher.
|
||||
* **Data Integrity**: High. Composite PK prevents duplicates per class/subject; FKs enforce referential integrity.
|
||||
|
||||
## v1.4.1 - Classes Domain Enhancements (School/Grade Normalization)
|
||||
**Date:** 2026-01-07
|
||||
**Migration ID:** `0006_faithful_king_bedlam`
|
||||
**Author:** Frontend/Fullstack Engineering
|
||||
|
||||
### 1. Summary
|
||||
This release extends the `classes` table to support normalized school and grade references.
|
||||
|
||||
### 2. Changes
|
||||
|
||||
#### 2.1 Table: `classes`
|
||||
* **Action**: `ADD COLUMN`
|
||||
* **Fields**:
|
||||
* `school_id` (varchar(128), nullable)
|
||||
* `grade_id` (varchar(128), nullable)
|
||||
* **Reason**: Enable filtering and sorting by canonical school/grade entities instead of relying on free-text fields.
|
||||
|
||||
### 3. Migration Strategy
|
||||
* **Up**: Run standard Drizzle migration.
|
||||
* **Down**: Not provided. Dropping columns is destructive.
|
||||
|
||||
### 4. Impact Analysis
|
||||
* **Performance**: Minimal. Indexing and joins can be added as usage evolves.
|
||||
* **Data Integrity**: Medium. Existing rows remain valid (nullable fields); application-level validation can enforce consistency.
|
||||
|
||||
## v1.5.0 - Classes Domain Feature (Invitation Code)
|
||||
**Date:** 2026-01-08
|
||||
**Migration ID:** `0007_add_class_invitation_code`
|
||||
**Author:** Frontend/Fullstack Engineering
|
||||
|
||||
### 1. Summary
|
||||
This release introduces a 6-digit invitation code on `classes` to support join-by-code enrollment.
|
||||
|
||||
### 2. Changes
|
||||
|
||||
#### 2.1 Table: `classes`
|
||||
* **Action**: `ADD COLUMN` + `ADD UNIQUE CONSTRAINT`
|
||||
* **Field**: `invitation_code` (varchar(6), nullable, unique)
|
||||
* **Reason**: Allow students to enroll into a class using a short code, while ensuring uniqueness across all classes.
|
||||
|
||||
### 3. Migration Strategy
|
||||
* **Up**: Run standard Drizzle migration.
|
||||
* **Backfill**: Optional. Existing classes can keep `NULL` or be populated via application-level actions.
|
||||
* **Down**: Not provided. Removing a unique constraint/column is destructive.
|
||||
|
||||
### 4. Impact Analysis
|
||||
* **Performance**: Minimal. Uniqueness is enforced via an index.
|
||||
* **Data Integrity**: High. Unique constraint prevents code collisions and simplifies server-side enrollment checks.
|
||||
|
||||
@@ -59,6 +59,12 @@ Demonstrates the new **JSON Structure** field (`exams.structure`).
|
||||
]
|
||||
```
|
||||
|
||||
### 2.5 Classes / Enrollment / Schedule
|
||||
Seeds the teacher class management domain.
|
||||
* **Classes**: Creates at least one class owned by a teacher user.
|
||||
* **Enrollments**: Links students to classes via `class_enrollments` (default status: `active`).
|
||||
* **Schedule**: Populates `class_schedule` with weekday + start/end times for timetable validation.
|
||||
|
||||
## 3. How to Run
|
||||
|
||||
### Prerequisites
|
||||
|
||||
@@ -94,7 +94,120 @@ React 的 hydration 过程对 HTML 有效性要求极高。将 `div` 放入 `p`
|
||||
2. `teacher-stats.tsx`
|
||||
3. `teacher-schedule.tsx`
|
||||
|
||||
## 5. 下一步计划
|
||||
- 将 Mock Data 对接到真实的 API 端点 (React Server Actions)。
|
||||
- 实现 "Quick Actions" (快捷操作) 的具体功能。
|
||||
- 为 Submissions 和 Schedule 添加 "View All" (查看全部) 跳转导航。
|
||||
## 5. 更新记录（2026-01-04）
|
||||
- 教师仪表盘从 Mock Data 切换为真实数据查询：`/teacher/dashboard` 组合 `getTeacherClasses`、`getClassSchedule`、`getHomeworkSubmissions({ creatorId })` 渲染 KPI / 今日课表 / 最近提交。
|
||||
- Quick Actions 落地为真实路由跳转（创建作业、查看列表等）。
|
||||
- Schedule / Submissions 增加 “View All” 跳转到对应列表页（并携带筛选参数）。
|
||||
|
||||
---
|
||||
|
||||
## 6. 教师端班级管理模块（真实数据接入记录）
|
||||
|
||||
**日期**: 2025-12-31
|
||||
**范围**: 教师端「我的班级 / 学生 / 课表」页面与 MySQL(Drizzle) 真数据对接
|
||||
|
||||
### 6.1 页面入口与路由
|
||||
|
||||
班级管理相关页面位于：
|
||||
- `src/app/(dashboard)/teacher/classes/my/page.tsx`
|
||||
- `src/app/(dashboard)/teacher/classes/students/page.tsx`
|
||||
- `src/app/(dashboard)/teacher/classes/schedule/page.tsx`
|
||||
|
||||
为避免构建期/预渲染阶段访问数据库导致失败，以上页面显式启用动态渲染：
|
||||
- `export const dynamic = "force-dynamic"`
|
||||
|
||||
### 6.2 模块结构（Vertical Slice）
|
||||
|
||||
班级模块采用垂直切片架构，代码位于 `src/modules/classes/`：
|
||||
```
|
||||
src/modules/classes/
|
||||
├── components/
|
||||
│ ├── my-classes-grid.tsx
|
||||
│ ├── students-filters.tsx
|
||||
│ ├── students-table.tsx
|
||||
│ ├── schedule-filters.tsx
|
||||
│ └── schedule-view.tsx
|
||||
├── data-access.ts
|
||||
└── types.ts
|
||||
```
|
||||
|
||||
其中 `data-access.ts` 负责班级、学生、课表三类查询的服务端数据读取，并作为页面层唯一的数据入口。
|
||||
|
||||
### 6.3 数据库表与迁移
|
||||
|
||||
新增班级领域表：
|
||||
- `classes`
|
||||
- `class_enrollments`
|
||||
- `class_schedule`
|
||||
|
||||
对应 Drizzle Schema：
|
||||
- `src/shared/db/schema.ts`
|
||||
- `src/shared/db/relations.ts`
|
||||
|
||||
对应迁移文件：
|
||||
- `drizzle/0003_petite_newton_destine.sql`
|
||||
|
||||
外键关系（核心）：
|
||||
- `classes.teacher_id` -> `users.id`
|
||||
- `class_enrollments.class_id` -> `classes.id`
|
||||
- `class_enrollments.student_id` -> `users.id`
|
||||
- `class_schedule.class_id` -> `classes.id`
|
||||
|
||||
索引（核心）：
|
||||
- `classes_teacher_idx`, `classes_grade_idx`
|
||||
- `class_enrollments_class_idx`, `class_enrollments_student_idx`
|
||||
- `class_schedule_class_idx`, `class_schedule_class_day_idx`
|
||||
|
||||
### 6.4 Seed 数据
|
||||
|
||||
Seed 脚本已覆盖班级相关数据，以便在开发环境快速验证页面渲染与关联关系：
|
||||
- `scripts/seed.ts`
|
||||
- 运行命令：`npm run db:seed`
|
||||
|
||||
### 6.5 开发过程中的问题与处理
|
||||
|
||||
- 端口占用（EADDRINUSE）：开发服务器端口被占用时，通过更换端口启动规避（例如 `next dev -p <port>`）。
|
||||
- Next dev 锁文件：出现 `.next/dev/lock` 无法获取锁时，需要确保只有一个 dev 实例在运行，并清理残留 lock。
|
||||
- 头像资源 404：移除 Header 中硬编码的本地头像资源引用，避免 `public/avatars/...` 不存在导致的 404 噪音（见 `src/modules/layout/components/site-header.tsx`）。
|
||||
- 班级人数统计查询失败：`class_enrollments` 表实际列名为 `class_enrollment_status`，修复查询中引用的列名以恢复教师端班级列表渲染。
|
||||
|
||||
### 6.6 班级详情页（聚合视图 + Schedule Builder + Homework 统计）
|
||||
|
||||
**日期**: 2026-01-04
|
||||
**入口**: `src/app/(dashboard)/teacher/classes/my/[id]/page.tsx`
|
||||
|
||||
聚合数据在单次 RSC 请求内并发获取：
|
||||
- 学生：`getClassStudents({ classId })`
|
||||
- 课表：`getClassSchedule({ classId })`
|
||||
- 作业统计：`getClassHomeworkInsights({ classId, limit })`（包含 latest、历史列表、overallScores、以及每次作业的 scoreStats：avg/median）
|
||||
|
||||
页面呈现：
|
||||
- 顶部 KPI 卡片：学生数、课表条目数、作业数、整体 avg/median
|
||||
- Latest homework：目标人数、提交数、批改数、avg/median，直达作业与提交列表
|
||||
- Students / Schedule 预览：提供 View all 跳转到完整列表页
|
||||
- Homework history 表格：支持通过 URL query `?hw=all|active|overdue` 过滤作业记录，并展示每条作业的 avg/median
|
||||
|
||||
课表编辑能力复用既有 Builder：
|
||||
- 组件：`src/modules/classes/components/schedule-view.tsx`（新增/编辑/删除课表项）
|
||||
- 数据变更：`src/modules/classes/actions.ts`
|
||||
|
||||
### 6.7 班级邀请码（6 位码）加入与管理
|
||||
|
||||
**日期**: 2026-01-08
|
||||
**范围**: 为班级新增 6 位邀请码，支持学生通过输入邀请码加入班级；教师可查看与刷新邀请码
|
||||
|
||||
#### 6.7.1 数据结构
|
||||
- 表：`classes`
|
||||
- 字段：`invitation_code`（varchar(6)，unique，可为空）
|
||||
- 迁移：`drizzle/0007_add_class_invitation_code.sql`
|
||||
|
||||
#### 6.7.2 教师端能力
|
||||
- 在「我的班级」卡片中展示邀请码。
|
||||
- 提供“刷新邀请码”操作：生成新的 6 位码并写入数据库（确保唯一性）。
|
||||
|
||||
#### 6.7.3 学生端能力
|
||||
- 提供“通过邀请码加入班级”的入口，输入 6 位码后完成报名。
|
||||
- 写库操作设计为幂等：重复提交同一个邀请码不会生成重复报名记录，已有记录会被更新为有效状态。
|
||||
|
||||
#### 6.7.4 Seed 支持
|
||||
- `scripts/seed.ts` 为示例班级补充 `invitationCode`，便于在开发环境直接验证加入流程。
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
# Textbooks Module Implementation Details
|
||||
|
||||
**Date**: 2025-12-23
|
||||
**Updated**: 2025-12-31
|
||||
**Author**: DevOps Architect
|
||||
**Module**: Textbooks (`src/modules/textbooks`)
|
||||
|
||||
@@ -27,6 +28,13 @@ src/
|
||||
│ ├── page.tsx
|
||||
│ └── loading.tsx
|
||||
│
|
||||
│ └── student/
|
||||
│ └── learning/
|
||||
│ └── textbooks/ # 学生端只读阅读（Server Components）
|
||||
│ ├── page.tsx # 列表页（复用筛选与卡片）
|
||||
│ └── [id]/ # 详情页（阅读器）
|
||||
│ └── page.tsx
|
||||
│
|
||||
├── modules/
|
||||
│ └── textbooks/ # 业务模块
|
||||
│ ├── actions.ts # Server Actions (增删改)
|
||||
@@ -34,6 +42,7 @@ src/
|
||||
│ ├── types.ts # 类型定义 (Schema-aligned)
|
||||
│ └── components/ # 模块私有组件
|
||||
│ ├── textbook-content-layout.tsx # [核心] 三栏布局工作台
|
||||
│ ├── textbook-reader.tsx # [新增] 学生端只读阅读器（URL state）
|
||||
│ ├── chapter-sidebar-list.tsx # 递归章节树
|
||||
│ ├── knowledge-point-panel.tsx # 知识点管理面板
|
||||
│ ├── create-chapter-dialog.tsx # 章节创建弹窗
|
||||
@@ -64,6 +73,11 @@ src/
|
||||
* **Optimistic UI**: 虽然使用 Server Actions，但通过本地状态 (`useState`) 实现了操作的即时反馈（如保存正文后立即退出编辑模式）。
|
||||
* **Feedback**: 使用 `sonner` (`toast`) 提供操作成功或失败的提示。
|
||||
|
||||
### 3.3 学生端阅读体验（Read-Only Reader）
|
||||
* **两栏阅读**：左侧章节树，右侧正文渲染（Markdown）。
|
||||
* **URL State**：选中章节通过 `?chapterId=` 写入 URL，支持刷新/分享后保持定位（nuqs）。
|
||||
* **只读边界**：学生端不暴露创建/删除/编辑/知识点管理入口，避免误用教师工作台能力。
|
||||
|
||||
## 4. 数据流与逻辑 (Data Flow)
|
||||
|
||||
### 4.1 Server Actions
|
||||
@@ -71,18 +85,22 @@ src/
|
||||
* `createChapterAction`: 创建章节（支持嵌套）。
|
||||
* `updateChapterContentAction`: 更新正文内容。
|
||||
* `createKnowledgePointAction`: 创建知识点并自动关联当前章节。
|
||||
* `deleteKnowledgePointAction`: 删除知识点并刷新详情页数据。
|
||||
* `updateTextbookAction`: 更新教材元数据（Title, Subject, Grade, Publisher）。
|
||||
* `deleteTextbookAction`: 删除教材及其关联数据。
|
||||
* `delete...Action`: 处理删除逻辑。
|
||||
|
||||
### 4.2 数据访问层 (Data Access)
|
||||
* **Mock Implementation**: 目前在 `data-access.ts` 中使用内存数组模拟数据库操作，并人为增加了延迟 (`setTimeout`) 以测试 Loading 状态。
|
||||
* **Type Safety**: 定义了严格的 TypeScript 类型 (`Chapter`, `KnowledgePoint`, `UpdateTextbookInput`)，确保前后端数据契约一致。
|
||||
* **DB Implementation**: 教材模块已接入真实数据库访问，`data-access.ts` 使用 `drizzle-orm` 直接查询并返回教材、章节、知识点数据。
|
||||
* **章节树构建**: 章节采用父子关系存储，通过一次性拉取后在内存中构建嵌套树结构，避免 N+1 查询。
|
||||
* **级联删除**: 删除章节时会同时删除其子章节以及关联的知识点，确保数据一致性。
|
||||
* **Type Safety**: 定义严格的 TypeScript 类型（如 `Chapter`, `KnowledgePoint`, `UpdateTextbookInput`），保证数据契约与 UI 组件一致。
|
||||
|
||||
## 5. 组件复用
|
||||
* 使用了 `src/shared/components/ui` 中的 Shadcn 组件：
|
||||
* `Dialog`, `ScrollArea`, `Card`, `Button`, `Input`, `Textarea`, `Select`.
|
||||
* `Collapsible` 用于实现递归章节树。
|
||||
* `AlertDialog` 用于危险操作的二次确认（删除章节/删除知识点）。
|
||||
* 图标库统一使用 `lucide-react`.
|
||||
|
||||
## 6. Settings 功能实现 (New)
|
||||
@@ -92,7 +110,39 @@ src/
|
||||
* **Edit**: 修改教材的基本信息。
|
||||
* **Delete**: 提供红色删除按钮，二次确认后执行删除并跳转回列表页。
|
||||
|
||||
## 7. 后续计划 (Next Steps)
|
||||
* [ ] **富文本编辑器**: 集成 Tiptap 替换现有的 Markdown Textarea，支持更丰富的格式。
|
||||
* [ ] **拖拽排序**: 实现章节树的拖拽排序 (`dnd-kit`)。
|
||||
* [ ] **数据库对接**: 将 `data-access.ts` 中的 Mock 逻辑替换为真实的 `drizzle-orm` 数据库调用。
|
||||
## 7. 关键更新记录 (Changelog)
|
||||
|
||||
### 7.1 数据与页面
|
||||
* 教材模块从 Mock 切换为真实 DB：新增教材/章节/知识点的数据访问与 Server Actions 刷新策略。
|
||||
* 列表页支持过滤/搜索：通过 query 参数驱动，统一空状态反馈。
|
||||
|
||||
### 7.2 章节侧边栏与弹窗
|
||||
* 修复子章节创建弹窗“闪现后消失”：改为受控 Dialog 状态管理。
|
||||
* 修复移动端操作按钮不可见/被遮挡：调整布局与可见性策略，确保小屏可点。
|
||||
* 删除章节使用确认弹窗并提供删除中状态。
|
||||
|
||||
### 7.3 Markdown 阅读体验
|
||||
* 阅读模式使用 `react-markdown` 渲染章节内容，支持 GFM（表格/任务列表等）。
|
||||
* 启用 Typography（`prose`）排版样式，使 `h1/h2/...` 在视觉上有明显层级差异。
|
||||
* 修复阅读模式内容区无法滚动：为 flex 容器补齐 `min-h-0` 等必要约束。
|
||||
|
||||
### 7.4 知识点删除交互
|
||||
* 删除知识点从浏览器 `confirm()` 升级为 `AlertDialog`：
|
||||
* 显示目标名称、危险样式按钮
|
||||
* 删除中禁用交互并显示 loading 文案
|
||||
* 删除成功后刷新页面数据
|
||||
|
||||
### 7.5 学生端 Textbooks 列表与阅读页（New）
|
||||
* 新增学生端路由：
|
||||
* `/student/learning/textbooks`：教材列表页（RSC），复用筛选组件（nuqs）与卡片布局。
|
||||
* `/student/learning/textbooks/[id]`：教材阅读页（RSC + client 阅读器容器），章节选择与阅读不跳页。
|
||||
* 复用与适配：
|
||||
* `TextbookCard` 增加可配置跳转基地址，避免学生端卡片误跳到教师端详情页。
|
||||
* 新增 `TextbookReader`（client）用于只读阅读体验：左侧章节树 + 右侧正文渲染，章节定位 URL 化（`chapterId`）。
|
||||
* 质量门禁：
|
||||
* 通过 `npm run lint / typecheck / build`。
|
||||
|
||||
## 8. 后续计划 (Next Steps)
|
||||
* [ ] **富文本编辑器**: 集成编辑器替换当前 Markdown Textarea，提升编辑体验。
|
||||
* [ ] **拖拽排序**: 实现章节树拖拽排序与持久化。
|
||||
* [ ] **知识点能力增强**: 支持编辑、排序、分层（如需要）。
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
|
||||
- `getHomeworkAssignments`：作业列表（可按 creatorId/ids）
|
||||
- `getHomeworkAssignmentById`：作业详情（含目标人数、提交数统计）
|
||||
- `getHomeworkSubmissions`：提交列表（可按 assignmentId）
|
||||
- `getHomeworkSubmissions`：提交列表（可按 assignmentId/classId/creatorId）
|
||||
- `getHomeworkSubmissionDetails`：提交详情（题目内容 + 学生答案 + 分值/顺序）
|
||||
|
||||
### 4.2 学生侧查询
|
||||
@@ -151,3 +151,120 @@
|
||||
|
||||
- `npm run typecheck`: 通过
|
||||
- `npm run lint`: 0 errors（仓库其他位置存在 warnings，与本模块新增功能无直接关联）
|
||||
|
||||
---
|
||||
|
||||
## 9. 部署与环境变量（CI/CD）
|
||||
|
||||
### 9.1 本地开发
|
||||
|
||||
- 本地开发使用项目根目录的 `.env` 提供 `DATABASE_URL`
|
||||
- `.env` 仅用于本机开发，不应写入真实生产库凭据
|
||||
|
||||
### 9.2 CI 构建与部署（Gitea）
|
||||
|
||||
工作流位于：[ci.yml](file:///c:/Users/xiner/Desktop/CICD/.gitea/workflows/ci.yml)
|
||||
|
||||
- 构建阶段（`npm run build`）不依赖数据库连接：作业相关页面在构建时不会静态预渲染执行查库
|
||||
- 部署阶段通过 `docker run -e DATABASE_URL=...` 在运行时注入数据库连接串
|
||||
- 需要在 Gitea 仓库 Secrets 配置 `DATABASE_URL`（生产环境 MySQL 连接串）
|
||||
- CI 中关闭 Next.js telemetry：设置 `NEXT_TELEMETRY_DISABLED=1`
|
||||
|
||||
### 9.3 Next.js 渲染策略（避免 build 阶段查库）
|
||||
|
||||
作业模块相关页面在渲染时会进行数据库查询，因此显式标记为动态渲染以避免构建期预渲染触发数据库连接：
|
||||
|
||||
- 教师端作业列表：[assignments/page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/teacher/homework/assignments/page.tsx)
|
||||
|
||||
---
|
||||
|
||||
## 10. 实现更新（2026-01-05）
|
||||
|
||||
### 10.1 教师端作业详情页组件化（按 Vertical Slice 拆分）
|
||||
|
||||
将 `/teacher/homework/assignments/[id]` 页面调整为“只负责组装”，把可复用展示逻辑下沉到模块内组件：
|
||||
|
||||
- 页面组装：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/teacher/homework/assignments/%5Bid%5D/page.tsx)
|
||||
- 题目错误概览卡片（overview）：[homework-assignment-question-error-overview-card.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-question-error-overview-card.tsx)
|
||||
- 题目错误明细卡片（details）：[homework-assignment-question-error-details-card.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-question-error-details-card.tsx)
|
||||
- 试卷预览/错题工作台容器卡片：[homework-assignment-exam-content-card.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-exam-content-card.tsx)
|
||||
|
||||
### 10.2 题目点击联动：试卷预览 ↔ 错题详情
|
||||
|
||||
在“试卷预览”中点击题目后，右侧联动展示该题的统计与错答列表（按学生逐条展示，不做合并）：
|
||||
|
||||
- 工作台（选择题目、拼装左右面板）：[homework-assignment-exam-error-explorer.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-exam-error-explorer.tsx)
|
||||
- 试卷预览面板（可选中题目）：[homework-assignment-exam-preview-pane.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-exam-preview-pane.tsx)
|
||||
- 错题详情面板（错误人数/错误率/错答列表）：[homework-assignment-question-error-detail-panel.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-question-error-detail-panel.tsx)
|
||||
|
||||
### 10.3 统计数据增强：返回逐学生错答
|
||||
|
||||
为满足“错答列表逐条展示学生姓名 + 答案”的需求，作业统计查询返回每题的错答明细（包含学生信息）：
|
||||
|
||||
- 数据访问：[getHomeworkAssignmentAnalytics](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/data-access.ts)
|
||||
- 类型定义：[types.ts](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/types.ts)
|
||||
|
||||
### 10.4 加载优化：Client Wrapper 动态分包
|
||||
|
||||
由于 `next/dynamic({ ssr: false })` 不能在 Server Component 内使用，工作台动态加载通过 Client wrapper 进行隔离：
|
||||
|
||||
- Client wrapper：[homework-assignment-exam-error-explorer-lazy.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-exam-error-explorer-lazy.tsx)
|
||||
- 入口卡片（Server Component，渲染 wrapper）：[homework-assignment-exam-content-card.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/components/homework-assignment-exam-content-card.tsx)
|
||||
|
||||
### 10.5 校验
|
||||
|
||||
- `npm run lint`: 通过
|
||||
- `npm run typecheck`: 通过
|
||||
- `npm run build`: 通过
|
||||
|
||||
---
|
||||
|
||||
## 11. 学生成绩图表与排名（2026-01-06）
|
||||
|
||||
### 11.1 目标
|
||||
|
||||
在学生主页（Dashboard）展示：
|
||||
|
||||
- 最近已批改作业的成绩趋势（百分比折线）
|
||||
- 最近若干次已批改作业明细（标题、得分、时间）
|
||||
- 班级排名（基于班级内作业总体得分百分比）
|
||||
|
||||
### 11.2 数据访问与计算口径
|
||||
|
||||
数据由 Homework 模块统一提供聚合查询，避免页面层拼 SQL：
|
||||
|
||||
- 新增查询：[getStudentDashboardGrades](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/data-access.ts)
|
||||
- `trend`：取该学生所有 `graded` 提交中“每个 assignment 最新一次”的集合，按时间升序取最近 10 个
|
||||
- `recent`：对 `trend` 再按时间降序取最近 5 条，用于表格展示
|
||||
- `maxScore`：通过 `homework_assignment_questions` 汇总每个 assignment 的总分（SUM(score)）
|
||||
- `percentage`：`score / maxScore * 100`
|
||||
- `ranking`：
|
||||
- 班级选择：取该学生最早创建的一条 active enrollment 作为当前班级
|
||||
- 班级作业集合：班级内所有学生的 targets 合并得到 assignment 集合
|
||||
- 计分口径：班级内“每个学生 × 每个 assignment”取最新一次 graded 提交，累加得分与满分，得到总体百分比
|
||||
- 排名：按总体百分比降序排序（百分比相同按 studentId 作为稳定排序因子）
|
||||
|
||||
### 11.3 类型定义
|
||||
|
||||
为 Dashboard 聚合数据提供显式类型：
|
||||
|
||||
- [types.ts](file:///c:/Users/xiner/Desktop/CICD/src/modules/homework/types.ts)
|
||||
- `StudentHomeworkScoreAnalytics`
|
||||
- `StudentRanking`
|
||||
- `StudentDashboardGradeProps`
|
||||
|
||||
### 11.4 页面与组件接入
|
||||
|
||||
- 学生主页页面负责“取数 + 计算基础计数 + 传参”：
|
||||
- [student/dashboard/page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/student/dashboard/page.tsx)
|
||||
- 取数：`getStudentDashboardGrades(student.id)`
|
||||
- 传入：`<StudentDashboard grades={grades} />`
|
||||
- 展示组件负责渲染卡片：
|
||||
- [student-view.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/dashboard/components/student-view.tsx)
|
||||
- 趋势图：使用内联 `svg polyline` 渲染折线，避免引入额外图表依赖
|
||||
|
||||
### 11.5 校验
|
||||
|
||||
- `npm run lint`: 通过
|
||||
- `npm run typecheck`: 通过
|
||||
- `npm run build`: 通过
|
||||
|
||||
164
docs/design/007_school_module_implementation.md
Normal file
164
docs/design/007_school_module_implementation.md
Normal file
@@ -0,0 +1,164 @@
|
||||
# 学校基础数据模块（School）实现文档与更新记录
|
||||
|
||||
**日期**: 2026-01-07
|
||||
**作者**: Frontend Team
|
||||
**状态**: 已实现
|
||||
|
||||
## 1. 范围
|
||||
|
||||
本文档覆盖管理端「School」域的基础数据维护页面（Schools / Departments / Academic Year / Grades），并记录相关实现约束与关键更新，遵循 [003_frontend_engineering_standards.md](file:///c:/Users/xiner/Desktop/CICD/docs/architecture/003_frontend_engineering_standards.md) 的工程规范（Vertical Slice、Server/Client 边界、质量门禁）。
|
||||
|
||||
## 2. 路由入口（Admin）
|
||||
|
||||
School 域路由位于 `src/app/(dashboard)/admin/school/*`，均显式声明 `export const dynamic = "force-dynamic"` 以避免构建期预渲染触发数据库访问。
|
||||
|
||||
- `/admin/school`：入口重定向到 Classes（当前落点不在 `school` 模块内）
|
||||
实现：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/admin/school/page.tsx)
|
||||
- `/admin/school/schools`：学校维护（增删改）
|
||||
实现：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/admin/school/schools/page.tsx)
|
||||
- `/admin/school/departments`：部门维护（增删改）
|
||||
实现：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/admin/school/departments/page.tsx)
|
||||
- `/admin/school/academic-year`：学年维护（增删改 + 设为当前学年）
|
||||
实现：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/admin/school/academic-year/page.tsx)
|
||||
- `/admin/school/grades`：年级维护（增删改 + 指派年级组长/教研组长）
|
||||
实现：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/admin/school/grades/page.tsx)
|
||||
- `/admin/school/grades/insights`：年级维度作业统计（跨班级聚合）
|
||||
实现：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/admin/school/grades/insights/page.tsx)
|
||||
|
||||
## 3. 模块结构（Vertical Slice）
|
||||
|
||||
School 模块位于 `src/modules/school`：
|
||||
|
||||
```
|
||||
src/modules/school/
|
||||
├── components/
|
||||
│ ├── schools-view.tsx
|
||||
│ ├── departments-view.tsx
|
||||
│ ├── academic-year-view.tsx
|
||||
│ └── grades-view.tsx
|
||||
├── actions.ts
|
||||
├── data-access.ts
|
||||
├── schema.ts
|
||||
└── types.ts
|
||||
```
|
||||
|
||||
边界约束：
|
||||
- `data-access.ts` 包含 `import "server-only"`，仅用于服务端查询与 DTO 组装。
|
||||
- `actions.ts` 包含 `"use server"`，写操作统一通过 Server Actions 并 `revalidatePath`。
|
||||
- `components/*` 为 Client 交互层（表单、Dialog、筛选、行级操作），调用 Server Actions 并用 `sonner` toast 反馈。
|
||||
|
||||
## 4. 数据访问（data-access.ts）
|
||||
|
||||
实现：[data-access.ts](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/data-access.ts)
|
||||
|
||||
- `getSchools(): Promise<SchoolListItem[]>`
|
||||
- `getDepartments(): Promise<DepartmentListItem[]>`
|
||||
- `getAcademicYears(): Promise<AcademicYearListItem[]>`
|
||||
- `getGrades(): Promise<GradeListItem[]>`
|
||||
- join `schools` 获取 `school.name`
|
||||
- 收集 `gradeHeadId/teachingHeadId` 并批量查询 `users` 以组装 `StaffOption`
|
||||
- `getStaffOptions(): Promise<StaffOption[]>`
|
||||
- 角色过滤 `teacher/admin`
|
||||
- 排序 `name/email`，用于 Select 列表可用性
|
||||
- `getGradesForStaff(staffId: string): Promise<GradeListItem[]>`
|
||||
- 用于按负责人（年级组长/教研组长）反查关联年级
|
||||
|
||||
返回 DTO 类型定义位于：[types.ts](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/types.ts)
|
||||
|
||||
## 5. 写操作（actions.ts）
|
||||
|
||||
实现：[actions.ts](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/actions.ts)
|
||||
|
||||
通用约束：
|
||||
- 输入校验：统一使用 [schema.ts](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/schema.ts) 的 Zod schema
|
||||
- 返回结构：统一使用 [ActionState](file:///c:/Users/xiner/Desktop/CICD/src/shared/types/action-state.ts)
|
||||
- 刷新策略：对目标页面路径执行 `revalidatePath`
|
||||
|
||||
Departments：
|
||||
- `createDepartmentAction(formData)`
|
||||
- `updateDepartmentAction(departmentId, formData)`
|
||||
- `deleteDepartmentAction(departmentId)`
|
||||
|
||||
Academic Year：
|
||||
- `createAcademicYearAction(formData)`
|
||||
- `updateAcademicYearAction(academicYearId, formData)`
|
||||
- `deleteAcademicYearAction(academicYearId)`
|
||||
- 当 `isActive=true` 时，通过事务把其它学年置为非激活，保证唯一激活学年
|
||||
|
||||
Schools：
|
||||
- `createSchoolAction(formData)`
|
||||
- `updateSchoolAction(schoolId, formData)`
|
||||
- `deleteSchoolAction(schoolId)`
|
||||
- 删除后会同时刷新 `/admin/school/schools` 与 `/admin/school/grades`
|
||||
|
||||
Grades：
|
||||
- `createGradeAction(formData)`
|
||||
- `updateGradeAction(gradeId, formData)`
|
||||
- `deleteGradeAction(gradeId)`
|
||||
|
||||
## 6. UI 组件（components/*）
|
||||
|
||||
Schools：
|
||||
- 实现：[schools-view.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/components/schools-view.tsx)
|
||||
- 交互：列表 + Dialog 表单（新增/编辑）+ 删除确认（AlertDialog）
|
||||
|
||||
Departments：
|
||||
- 实现：[departments-view.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/components/departments-view.tsx)
|
||||
- 交互：列表 + Dialog 表单（新增/编辑）+ 删除确认（AlertDialog）
|
||||
|
||||
Academic Year：
|
||||
- 实现：[academic-year-view.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/components/academic-year-view.tsx)
|
||||
- 交互：列表 + Dialog 表单（新增/编辑）+ 删除确认（AlertDialog）+ 设为当前学年（isActive）
|
||||
|
||||
Grades：
|
||||
- 实现：[grades-view.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/components/grades-view.tsx)
|
||||
- 交互：列表展示 + URL 驱动筛选（搜索/学校/负责人/排序）+ Dialog 表单（新增/编辑）+ 删除确认（AlertDialog）
|
||||
- 负责人指派：
|
||||
- 年级组长（gradeHeadId）
|
||||
- 教研组长（teachingHeadId）
|
||||
|
||||
## 7. 关键交互与规则（Grades）
|
||||
|
||||
页面入口（RSC 组装）在服务端并发拉取三类数据：
|
||||
- 年级列表：`getGrades()`
|
||||
- 学校选项：`getSchools()`
|
||||
- 负责人候选：`getStaffOptions()`
|
||||
|
||||
实现：[page.tsx](file:///c:/Users/xiner/Desktop/CICD/src/app/(dashboard)/admin/school/grades/page.tsx)
|
||||
|
||||
### 7.1 URL State（筛选/排序）
|
||||
|
||||
Grades 列表页的筛选状态 URL 化（`nuqs`）：
|
||||
- `q`：关键字（匹配 grade/school）
|
||||
- `school`：学校过滤（`all` 或具体 schoolId）
|
||||
- `head`：负责人过滤（全部 / 两者缺失 / 缺年级组长 / 缺教研组长）
|
||||
- `sort`：排序（默认/名称/更新时间等）
|
||||
|
||||
实现：[grades-view.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/components/grades-view.tsx)
|
||||
|
||||
### 7.2 表单校验
|
||||
|
||||
Grades 的新增/编辑表单在客户端做轻量校验：
|
||||
- 必填：`schoolId`、`name`
|
||||
- `order`：非负整数
|
||||
- 去重：同一学校下年级名称不允许重复（忽略大小写 + 规范化空格）
|
||||
|
||||
说明：
|
||||
- 服务端写入前仍会经过 `UpsertGradeSchema` 校验（schema.ts），避免仅依赖客户端校验。
|
||||
|
||||
### 7.3 负责人选择（Radix Select）
|
||||
|
||||
Radix Select 约束：`SelectItem` 的 `value` 不能为 `""`（空字符串），否则会触发运行时错误。
|
||||
|
||||
当前实现策略：
|
||||
- UI 中 “未设置” 选项使用占位值 `__none__`
|
||||
- 在 `onValueChange` 中将 `__none__` 映射回 `""` 存入本地表单 state
|
||||
- 提交时依旧传递空字符串，由 `UpsertGradeSchema` 将其归一为 `null`
|
||||
|
||||
实现：[grades-view.tsx](file:///c:/Users/xiner/Desktop/CICD/src/modules/school/components/grades-view.tsx)
|
||||
|
||||
## 2. 更新记录（2026-01-07）
|
||||
|
||||
- 修复 Add Grades 弹窗报错：将 4 处 `<SelectItem value=\"\">` 替换为占位值 `__none__`，并在 `onValueChange` 中映射回 `\"\"`，保持“可清空选择/显示 placeholder”的行为不变。
|
||||
- 修复新建年级按钮不可用：创建/编辑表单在状态变化时触发实时校验更新，避免校验状态滞后导致提交被禁用。
|
||||
- 质量门禁：本地通过 `npm run lint` 与 `npm run typecheck`。
|
||||
43
drizzle/0003_petite_newton_destine.sql
Normal file
43
drizzle/0003_petite_newton_destine.sql
Normal file
@@ -0,0 +1,43 @@
|
||||
CREATE TABLE `class_enrollments` (
|
||||
`class_id` varchar(128) NOT NULL,
|
||||
`student_id` varchar(128) NOT NULL,
|
||||
`class_enrollment_status` enum('active','inactive') NOT NULL DEFAULT 'active',
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
CONSTRAINT `class_enrollments_class_id_student_id_pk` PRIMARY KEY(`class_id`,`student_id`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `class_schedule` (
|
||||
`id` varchar(128) NOT NULL,
|
||||
`class_id` varchar(128) NOT NULL,
|
||||
`weekday` int NOT NULL,
|
||||
`start_time` varchar(5) NOT NULL,
|
||||
`end_time` varchar(5) NOT NULL,
|
||||
`course` varchar(255) NOT NULL,
|
||||
`location` varchar(100),
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `class_schedule_id` PRIMARY KEY(`id`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `classes` (
|
||||
`id` varchar(128) NOT NULL,
|
||||
`name` varchar(255) NOT NULL,
|
||||
`grade` varchar(50) NOT NULL,
|
||||
`homeroom` varchar(50),
|
||||
`room` varchar(50),
|
||||
`teacher_id` varchar(128) NOT NULL,
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `classes_id` PRIMARY KEY(`id`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
ALTER TABLE `class_enrollments` ADD CONSTRAINT `ce_c_fk` FOREIGN KEY (`class_id`) REFERENCES `classes`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE `class_enrollments` ADD CONSTRAINT `ce_s_fk` FOREIGN KEY (`student_id`) REFERENCES `users`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE `class_schedule` ADD CONSTRAINT `cs_c_fk` FOREIGN KEY (`class_id`) REFERENCES `classes`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE `classes` ADD CONSTRAINT `classes_teacher_id_users_id_fk` FOREIGN KEY (`teacher_id`) REFERENCES `users`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||
CREATE INDEX `class_enrollments_class_idx` ON `class_enrollments` (`class_id`);--> statement-breakpoint
|
||||
CREATE INDEX `class_enrollments_student_idx` ON `class_enrollments` (`student_id`);--> statement-breakpoint
|
||||
CREATE INDEX `class_schedule_class_idx` ON `class_schedule` (`class_id`);--> statement-breakpoint
|
||||
CREATE INDEX `class_schedule_class_day_idx` ON `class_schedule` (`class_id`,`weekday`);--> statement-breakpoint
|
||||
CREATE INDEX `classes_teacher_idx` ON `classes` (`teacher_id`);--> statement-breakpoint
|
||||
CREATE INDEX `classes_grade_idx` ON `classes` (`grade`);
|
||||
3
drizzle/0004_add_chapter_content_and_kp_chapter.sql
Normal file
3
drizzle/0004_add_chapter_content_and_kp_chapter.sql
Normal file
@@ -0,0 +1,3 @@
|
||||
ALTER TABLE `chapters` ADD `content` text;--> statement-breakpoint
|
||||
ALTER TABLE `knowledge_points` ADD `chapter_id` varchar(128);--> statement-breakpoint
|
||||
CREATE INDEX `kp_chapter_id_idx` ON `knowledge_points` (`chapter_id`);
|
||||
52
drizzle/0005_add_class_school_subject_teachers.sql
Normal file
52
drizzle/0005_add_class_school_subject_teachers.sql
Normal file
@@ -0,0 +1,52 @@
|
||||
CREATE TABLE `academic_years` (
|
||||
`id` varchar(128) NOT NULL,
|
||||
`name` varchar(100) NOT NULL,
|
||||
`start_date` timestamp NOT NULL,
|
||||
`end_date` timestamp NOT NULL,
|
||||
`is_active` boolean NOT NULL DEFAULT false,
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `academic_years_id` PRIMARY KEY(`id`),
|
||||
CONSTRAINT `academic_years_name_unique` UNIQUE(`name`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `class_subject_teachers` (
|
||||
`class_id` varchar(128) NOT NULL,
|
||||
`subject` enum('语文','数学','英语','美术','体育','科学','社会','音乐') NOT NULL,
|
||||
`teacher_id` varchar(128),
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `class_subject_teachers_class_id_subject_pk` PRIMARY KEY(`class_id`,`subject`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `classrooms` (
|
||||
`id` varchar(128) NOT NULL,
|
||||
`name` varchar(255) NOT NULL,
|
||||
`building` varchar(100),
|
||||
`floor` int,
|
||||
`capacity` int,
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `classrooms_id` PRIMARY KEY(`id`),
|
||||
CONSTRAINT `classrooms_name_unique` UNIQUE(`name`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `departments` (
|
||||
`id` varchar(128) NOT NULL,
|
||||
`name` varchar(255) NOT NULL,
|
||||
`description` text,
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `departments_id` PRIMARY KEY(`id`),
|
||||
CONSTRAINT `departments_name_unique` UNIQUE(`name`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
ALTER TABLE `classes` ADD `school_name` varchar(255);--> statement-breakpoint
|
||||
ALTER TABLE `class_subject_teachers` ADD CONSTRAINT `class_subject_teachers_teacher_id_users_id_fk` FOREIGN KEY (`teacher_id`) REFERENCES `users`(`id`) ON DELETE set null ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE `class_subject_teachers` ADD CONSTRAINT `cst_c_fk` FOREIGN KEY (`class_id`) REFERENCES `classes`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||
CREATE INDEX `academic_years_name_idx` ON `academic_years` (`name`);--> statement-breakpoint
|
||||
CREATE INDEX `academic_years_active_idx` ON `academic_years` (`is_active`);--> statement-breakpoint
|
||||
CREATE INDEX `class_subject_teachers_class_idx` ON `class_subject_teachers` (`class_id`);--> statement-breakpoint
|
||||
CREATE INDEX `class_subject_teachers_teacher_idx` ON `class_subject_teachers` (`teacher_id`);--> statement-breakpoint
|
||||
CREATE INDEX `classrooms_name_idx` ON `classrooms` (`name`);--> statement-breakpoint
|
||||
CREATE INDEX `departments_name_idx` ON `departments` (`name`);
|
||||
38
drizzle/0006_faithful_king_bedlam.sql
Normal file
38
drizzle/0006_faithful_king_bedlam.sql
Normal file
@@ -0,0 +1,38 @@
|
||||
CREATE TABLE `grades` (
|
||||
`id` varchar(128) NOT NULL,
|
||||
`school_id` varchar(128) NOT NULL,
|
||||
`name` varchar(100) NOT NULL,
|
||||
`order` int NOT NULL DEFAULT 0,
|
||||
`grade_head_id` varchar(128),
|
||||
`teaching_head_id` varchar(128),
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `grades_id` PRIMARY KEY(`id`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `schools` (
|
||||
`id` varchar(128) NOT NULL,
|
||||
`name` varchar(255) NOT NULL,
|
||||
`code` varchar(50),
|
||||
`created_at` timestamp NOT NULL DEFAULT (now()),
|
||||
`updated_at` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
|
||||
CONSTRAINT `schools_id` PRIMARY KEY(`id`),
|
||||
CONSTRAINT `schools_name_unique` UNIQUE(`name`),
|
||||
CONSTRAINT `schools_code_unique` UNIQUE(`code`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
ALTER TABLE `classes` ADD `school_id` varchar(128);--> statement-breakpoint
|
||||
ALTER TABLE `classes` ADD `grade_id` varchar(128);--> statement-breakpoint
|
||||
ALTER TABLE `grades` ADD CONSTRAINT `g_s_fk` FOREIGN KEY (`school_id`) REFERENCES `schools`(`id`) ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE `grades` ADD CONSTRAINT `g_gh_fk` FOREIGN KEY (`grade_head_id`) REFERENCES `users`(`id`) ON DELETE set null ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE `grades` ADD CONSTRAINT `g_th_fk` FOREIGN KEY (`teaching_head_id`) REFERENCES `users`(`id`) ON DELETE set null ON UPDATE no action;--> statement-breakpoint
|
||||
CREATE INDEX `grades_school_idx` ON `grades` (`school_id`);--> statement-breakpoint
|
||||
CREATE INDEX `grades_school_name_uniq` ON `grades` (`school_id`,`name`);--> statement-breakpoint
|
||||
CREATE INDEX `grades_grade_head_idx` ON `grades` (`grade_head_id`);--> statement-breakpoint
|
||||
CREATE INDEX `grades_teaching_head_idx` ON `grades` (`teaching_head_id`);--> statement-breakpoint
|
||||
CREATE INDEX `schools_name_idx` ON `schools` (`name`);--> statement-breakpoint
|
||||
CREATE INDEX `schools_code_idx` ON `schools` (`code`);--> statement-breakpoint
|
||||
ALTER TABLE `classes` ADD CONSTRAINT `c_s_fk` FOREIGN KEY (`school_id`) REFERENCES `schools`(`id`) ON DELETE set null ON UPDATE no action;--> statement-breakpoint
|
||||
ALTER TABLE `classes` ADD CONSTRAINT `c_g_fk` FOREIGN KEY (`grade_id`) REFERENCES `grades`(`id`) ON DELETE set null ON UPDATE no action;--> statement-breakpoint
|
||||
CREATE INDEX `classes_school_idx` ON `classes` (`school_id`);--> statement-breakpoint
|
||||
CREATE INDEX `classes_grade_id_idx` ON `classes` (`grade_id`);
|
||||
3
drizzle/0007_add_class_invitation_code.sql
Normal file
3
drizzle/0007_add_class_invitation_code.sql
Normal file
@@ -0,0 +1,3 @@
|
||||
ALTER TABLE `classes` ADD `invitation_code` varchar(6);
|
||||
--> statement-breakpoint
|
||||
ALTER TABLE `classes` ADD CONSTRAINT `classes_invitation_code_unique` UNIQUE(`invitation_code`);
|
||||
2192
drizzle/meta/0003_snapshot.json
Normal file
2192
drizzle/meta/0003_snapshot.json
Normal file
File diff suppressed because it is too large
Load Diff
2213
drizzle/meta/0004_snapshot.json
Normal file
2213
drizzle/meta/0004_snapshot.json
Normal file
File diff suppressed because it is too large
Load Diff
2564
drizzle/meta/0005_snapshot.json
Normal file
2564
drizzle/meta/0005_snapshot.json
Normal file
File diff suppressed because it is too large
Load Diff
2848
drizzle/meta/0006_snapshot.json
Normal file
2848
drizzle/meta/0006_snapshot.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -22,6 +22,41 @@
|
||||
"when": 1767145757594,
|
||||
"tag": "0002_equal_wolfpack",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 3,
|
||||
"version": "5",
|
||||
"when": 1767166769676,
|
||||
"tag": "0003_petite_newton_destine",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 4,
|
||||
"version": "5",
|
||||
"when": 1767169003334,
|
||||
"tag": "0004_add_chapter_content_and_kp_chapter",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 5,
|
||||
"version": "5",
|
||||
"when": 1767751916045,
|
||||
"tag": "0005_add_class_school_subject_teachers",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 6,
|
||||
"version": "5",
|
||||
"when": 1767760693171,
|
||||
"tag": "0006_faithful_king_bedlam",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 7,
|
||||
"version": "5",
|
||||
"when": 1767782500000,
|
||||
"tag": "0007_add_class_invitation_code",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
1552
package-lock.json
generated
1552
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,9 @@
|
||||
"start": "next start",
|
||||
"lint": "eslint",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"db:seed": "npx tsx scripts/seed.ts"
|
||||
"db:seed": "npx tsx scripts/seed.ts",
|
||||
"db:generate": "drizzle-kit generate",
|
||||
"db:migrate": "drizzle-kit migrate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
@@ -43,6 +45,9 @@
|
||||
"react": "19.2.1",
|
||||
"react-dom": "19.2.1",
|
||||
"react-hook-form": "^7.69.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
@@ -51,6 +56,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@faker-js/faker": "^10.1.0",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
|
||||
567
scripts/seed.ts
567
scripts/seed.ts
@@ -3,8 +3,16 @@ import { db } from "../src/shared/db";
|
||||
import {
|
||||
users, roles, usersToRoles,
|
||||
questions, knowledgePoints, questionsToKnowledgePoints,
|
||||
exams, examQuestions, examSubmissions, submissionAnswers,
|
||||
textbooks, chapters
|
||||
exams, examQuestions,
|
||||
homeworkAssignments,
|
||||
homeworkAssignmentQuestions,
|
||||
homeworkAssignmentTargets,
|
||||
homeworkSubmissions,
|
||||
homeworkAnswers,
|
||||
textbooks, chapters,
|
||||
schools,
|
||||
grades,
|
||||
classes, classEnrollments, classSchedule
|
||||
} from "../src/shared/db/schema";
|
||||
import { createId } from "@paralleldrive/cuid2";
|
||||
import { faker } from "@faker-js/faker";
|
||||
@@ -30,9 +38,12 @@ async function seed() {
|
||||
try {
|
||||
await db.execute(sql`SET FOREIGN_KEY_CHECKS = 0;`);
|
||||
const tables = [
|
||||
"class_schedule", "class_enrollments", "classes",
|
||||
"homework_answers", "homework_submissions", "homework_assignment_targets", "homework_assignment_questions", "homework_assignments",
|
||||
"submission_answers", "exam_submissions", "exam_questions", "exams",
|
||||
"questions_to_knowledge_points", "questions", "knowledge_points",
|
||||
"chapters", "textbooks",
|
||||
"grades", "schools",
|
||||
"users_to_roles", "roles", "users", "accounts", "sessions"
|
||||
];
|
||||
for (const table of tables) {
|
||||
@@ -52,14 +63,16 @@ async function seed() {
|
||||
admin: "role_admin",
|
||||
teacher: "role_teacher",
|
||||
student: "role_student",
|
||||
grade_head: "role_grade_head"
|
||||
grade_head: "role_grade_head",
|
||||
teaching_head: "role_teaching_head"
|
||||
};
|
||||
|
||||
await db.insert(roles).values([
|
||||
{ id: roleMap.admin, name: "admin", description: "System Administrator" },
|
||||
{ id: roleMap.teacher, name: "teacher", description: "Academic Instructor" },
|
||||
{ id: roleMap.student, name: "student", description: "Learner" },
|
||||
{ id: roleMap.grade_head, name: "grade_head", description: "Head of Grade Year" }
|
||||
{ id: roleMap.grade_head, name: "grade_head", description: "Head of Grade Year" },
|
||||
{ id: roleMap.teaching_head, name: "teaching_head", description: "Teaching Research Lead" }
|
||||
]);
|
||||
|
||||
// Users
|
||||
@@ -98,6 +111,107 @@ async function seed() {
|
||||
{ userId: "user_student_1", roleId: roleMap.student },
|
||||
]);
|
||||
|
||||
const extraStudentIds: string[] = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const studentId = createId();
|
||||
extraStudentIds.push(studentId);
|
||||
await db.insert(users).values({
|
||||
id: studentId,
|
||||
name: faker.person.fullName(),
|
||||
email: faker.internet.email().toLowerCase(),
|
||||
role: "student",
|
||||
image: `https://api.dicebear.com/7.x/avataaars/svg?seed=${studentId}`,
|
||||
});
|
||||
await db.insert(usersToRoles).values({ userId: studentId, roleId: roleMap.student });
|
||||
}
|
||||
|
||||
const schoolId = "school_nextedu"
|
||||
const grade10Id = "grade_10"
|
||||
|
||||
await db.insert(schools).values([
|
||||
{ id: schoolId, name: "Next_Edu School", code: "NEXTEDU" },
|
||||
{ id: "school_demo_2", name: "Demo School No.2", code: "DEMO2" },
|
||||
])
|
||||
|
||||
await db.insert(grades).values([
|
||||
{
|
||||
id: grade10Id,
|
||||
schoolId,
|
||||
name: "Grade 10",
|
||||
order: 10,
|
||||
gradeHeadId: "user_teacher_math",
|
||||
teachingHeadId: "user_teacher_math",
|
||||
},
|
||||
])
|
||||
|
||||
await db.insert(classes).values([
|
||||
{
|
||||
id: "class_10_3",
|
||||
schoolName: "Next_Edu School",
|
||||
schoolId,
|
||||
name: "Grade 10 · Class 3",
|
||||
grade: "Grade 10",
|
||||
gradeId: grade10Id,
|
||||
homeroom: "10-3",
|
||||
room: "Room 304",
|
||||
invitationCode: "100003",
|
||||
teacherId: "user_teacher_math",
|
||||
},
|
||||
{
|
||||
id: "class_10_7",
|
||||
schoolName: "Next_Edu School",
|
||||
schoolId,
|
||||
name: "Grade 10 · Class 7",
|
||||
grade: "Grade 10",
|
||||
gradeId: grade10Id,
|
||||
homeroom: "10-7",
|
||||
room: "Room 201",
|
||||
invitationCode: "100007",
|
||||
teacherId: "user_teacher_math",
|
||||
},
|
||||
]);
|
||||
|
||||
await db.insert(classEnrollments).values([
|
||||
{ classId: "class_10_3", studentId: "user_student_1", status: "active" },
|
||||
...extraStudentIds.slice(0, 8).map((studentId) => ({ classId: "class_10_3", studentId, status: "active" as const })),
|
||||
...extraStudentIds.slice(8, 12).map((studentId) => ({ classId: "class_10_7", studentId, status: "active" as const })),
|
||||
]);
|
||||
|
||||
await db.insert(classSchedule).values([
|
||||
{ id: "cs_001", classId: "class_10_3", weekday: 1, startTime: "09:00", endTime: "09:45", course: "Mathematics", location: "Room 304" },
|
||||
{ id: "cs_002", classId: "class_10_3", weekday: 3, startTime: "14:00", endTime: "14:45", course: "Physics", location: "Lab A" },
|
||||
{ id: "cs_003", classId: "class_10_7", weekday: 2, startTime: "11:00", endTime: "11:45", course: "Mathematics", location: "Room 201" },
|
||||
]);
|
||||
|
||||
await db.insert(textbooks).values([
|
||||
{
|
||||
id: "tb_01",
|
||||
title: "Advanced Mathematics Grade 10",
|
||||
subject: "Mathematics",
|
||||
grade: "Grade 10",
|
||||
publisher: "Next Education Press",
|
||||
},
|
||||
])
|
||||
|
||||
await db.insert(chapters).values([
|
||||
{
|
||||
id: "ch_01",
|
||||
textbookId: "tb_01",
|
||||
title: "Chapter 1: Real Numbers",
|
||||
order: 1,
|
||||
parentId: null,
|
||||
content: "# Chapter 1: Real Numbers\n\nIn this chapter, we will explore the properties of real numbers...",
|
||||
},
|
||||
{
|
||||
id: "ch_01_01",
|
||||
textbookId: "tb_01",
|
||||
title: "1.1 Introduction to Real Numbers",
|
||||
order: 1,
|
||||
parentId: "ch_01",
|
||||
content: "## 1.1 Introduction\n\nReal numbers include rational and irrational numbers.",
|
||||
},
|
||||
])
|
||||
|
||||
// --- 2. Knowledge Graph (Tree) ---
|
||||
console.log("🧠 Seeding Knowledge Graph...");
|
||||
|
||||
@@ -111,103 +225,273 @@ async function seed() {
|
||||
{ id: kpLinearId, name: "Linear Equations", parentId: kpAlgebraId, level: 2 },
|
||||
]);
|
||||
|
||||
await db.insert(knowledgePoints).values([
|
||||
{
|
||||
id: "kp_01",
|
||||
name: "Real Numbers",
|
||||
description: "Definition and properties of real numbers",
|
||||
level: 1,
|
||||
order: 1,
|
||||
chapterId: "ch_01",
|
||||
},
|
||||
{
|
||||
id: "kp_02",
|
||||
name: "Rational Numbers",
|
||||
description: "Numbers that can be expressed as a fraction",
|
||||
level: 2,
|
||||
order: 1,
|
||||
chapterId: "ch_01_01",
|
||||
},
|
||||
])
|
||||
|
||||
// --- 3. Question Bank (Rich Content) ---
|
||||
console.log("📚 Seeding Question Bank...");
|
||||
|
||||
// 3.1 Simple Single Choice
|
||||
const qSimpleId = createId();
|
||||
await db.insert(questions).values({
|
||||
id: qSimpleId,
|
||||
authorId: "user_teacher_math",
|
||||
type: "single_choice",
|
||||
difficulty: 1,
|
||||
content: {
|
||||
text: "What is 2 + 2?",
|
||||
options: [
|
||||
{ id: "A", text: "3", isCorrect: false },
|
||||
{ id: "B", text: "4", isCorrect: true },
|
||||
{ id: "C", text: "5", isCorrect: false }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Link to KP
|
||||
await db.insert(questionsToKnowledgePoints).values({
|
||||
questionId: qSimpleId,
|
||||
knowledgePointId: kpLinearId // Just for demo
|
||||
});
|
||||
|
||||
// 3.2 Composite Question (Reading Comprehension)
|
||||
const qParentId = createId();
|
||||
const qChild1Id = createId();
|
||||
const qChild2Id = createId();
|
||||
|
||||
// Parent (Passage)
|
||||
await db.insert(questions).values({
|
||||
id: qParentId,
|
||||
authorId: "user_teacher_math",
|
||||
type: "composite",
|
||||
difficulty: 3,
|
||||
content: {
|
||||
text: "Read the following passage about Algebra...\n(Long text here)...",
|
||||
assets: []
|
||||
}
|
||||
});
|
||||
|
||||
// Children
|
||||
await db.insert(questions).values([
|
||||
const mathExamQuestions: Array<{
|
||||
id: string;
|
||||
type: "single_choice" | "text" | "judgment";
|
||||
difficulty: number;
|
||||
content: unknown;
|
||||
score: number;
|
||||
}> = [
|
||||
{
|
||||
id: qChild1Id,
|
||||
authorId: "user_teacher_math",
|
||||
parentId: qParentId, // <--- Key: Nested
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 2,
|
||||
difficulty: 1,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "What is the main topic?",
|
||||
text: "1) What is 2 + 2?",
|
||||
options: [
|
||||
{ id: "A", text: "Geometry", isCorrect: false },
|
||||
{ id: "B", text: "Algebra", isCorrect: true }
|
||||
]
|
||||
}
|
||||
{ id: "A", text: "3", isCorrect: false },
|
||||
{ id: "B", text: "4", isCorrect: true },
|
||||
{ id: "C", text: "5", isCorrect: false },
|
||||
{ id: "D", text: "6", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: qChild2Id,
|
||||
authorId: "user_teacher_math",
|
||||
parentId: qParentId,
|
||||
type: "text",
|
||||
difficulty: 4,
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 2,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "Explain the concept of variables.",
|
||||
}
|
||||
}
|
||||
]);
|
||||
text: "2) If f(x) = 2x + 1, then f(3) = ?",
|
||||
options: [
|
||||
{ id: "A", text: "5", isCorrect: false },
|
||||
{ id: "B", text: "7", isCorrect: true },
|
||||
{ id: "C", text: "8", isCorrect: false },
|
||||
{ id: "D", text: "10", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 2,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "3) Solve 3x - 5 = 7. What is x?",
|
||||
options: [
|
||||
{ id: "A", text: "3", isCorrect: false },
|
||||
{ id: "B", text: "4", isCorrect: true },
|
||||
{ id: "C", text: "5", isCorrect: false },
|
||||
{ id: "D", text: "6", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 3,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "4) Which is a factor of x^2 - 9?",
|
||||
options: [
|
||||
{ id: "A", text: "(x - 3)", isCorrect: true },
|
||||
{ id: "B", text: "(x + 9)", isCorrect: false },
|
||||
{ id: "C", text: "(x - 9)", isCorrect: false },
|
||||
{ id: "D", text: "(x^2 + 9)", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 2,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "5) If a^2 = 49 and a > 0, then a = ?",
|
||||
options: [
|
||||
{ id: "A", text: "-7", isCorrect: false },
|
||||
{ id: "B", text: "0", isCorrect: false },
|
||||
{ id: "C", text: "7", isCorrect: true },
|
||||
{ id: "D", text: "49", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 3,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "6) Simplify (x^2 y)(x y^3).",
|
||||
options: [
|
||||
{ id: "A", text: "x^2 y^3", isCorrect: false },
|
||||
{ id: "B", text: "x^3 y^4", isCorrect: true },
|
||||
{ id: "C", text: "x^3 y^3", isCorrect: false },
|
||||
{ id: "D", text: "x^4 y^4", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 2,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "7) The slope of the line y = -3x + 2 is:",
|
||||
options: [
|
||||
{ id: "A", text: "2", isCorrect: false },
|
||||
{ id: "B", text: "-3", isCorrect: true },
|
||||
{ id: "C", text: "3", isCorrect: false },
|
||||
{ id: "D", text: "-2", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 1,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "8) The probability of getting heads in one fair coin toss is:",
|
||||
options: [
|
||||
{ id: "A", text: "0", isCorrect: false },
|
||||
{ id: "B", text: "1/4", isCorrect: false },
|
||||
{ id: "C", text: "1/2", isCorrect: true },
|
||||
{ id: "D", text: "1", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 2,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "9) In an arithmetic sequence with a1 = 2 and d = 3, a5 = ?",
|
||||
options: [
|
||||
{ id: "A", text: "11", isCorrect: false },
|
||||
{ id: "B", text: "12", isCorrect: false },
|
||||
{ id: "C", text: "14", isCorrect: true },
|
||||
{ id: "D", text: "17", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: createId(),
|
||||
type: "single_choice",
|
||||
difficulty: 2,
|
||||
score: 4,
|
||||
content: {
|
||||
text: "10) The solution set of x^2 = 0 is:",
|
||||
options: [
|
||||
{ id: "A", text: "{0}", isCorrect: true },
|
||||
{ id: "B", text: "{1}", isCorrect: false },
|
||||
{ id: "C", text: "{-1, 1}", isCorrect: false },
|
||||
{ id: "D", text: "Empty set", isCorrect: false },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
{ id: createId(), type: "text", difficulty: 1, score: 4, content: { text: "11) Fill in the blank: √81 = ____.", correctAnswer: "9" } },
|
||||
{ id: createId(), type: "text", difficulty: 2, score: 4, content: { text: "12) Fill in the blank: (a - b)^2 = ____.", correctAnswer: ["a^2 - 2ab + b^2", "a² - 2ab + b²"] } },
|
||||
{ id: createId(), type: "text", difficulty: 1, score: 4, content: { text: "13) Fill in the blank: 2^5 = ____.", correctAnswer: "32" } },
|
||||
{ id: createId(), type: "text", difficulty: 2, score: 4, content: { text: "14) Fill in the blank: The area of a circle with radius r is ____.", correctAnswer: ["πr^2", "pi r^2", "πr²"] } },
|
||||
{ id: createId(), type: "text", difficulty: 1, score: 4, content: { text: "15) Fill in the blank: If x = -2, then x^3 = ____.", correctAnswer: "-8" } },
|
||||
|
||||
{ id: createId(), type: "judgment", difficulty: 1, score: 2, content: { text: "16) If x > y, then x + 1 > y + 1.", correctAnswer: true } },
|
||||
{ id: createId(), type: "judgment", difficulty: 1, score: 2, content: { text: "17) The graph of y = 2x is a parabola.", correctAnswer: false } },
|
||||
{ id: createId(), type: "judgment", difficulty: 1, score: 2, content: { text: "18) The sum of interior angles of a triangle is 180°.", correctAnswer: true } },
|
||||
{ id: createId(), type: "judgment", difficulty: 2, score: 2, content: { text: "19) (x + y)^2 = x^2 + y^2.", correctAnswer: false } },
|
||||
{ id: createId(), type: "judgment", difficulty: 1, score: 2, content: { text: "20) 0 is a positive number.", correctAnswer: false } },
|
||||
|
||||
{ id: createId(), type: "text", difficulty: 3, score: 10, content: { text: "21) Solve the system: x + y = 5, x - y = 1." } },
|
||||
{ id: createId(), type: "text", difficulty: 3, score: 10, content: { text: "22) Expand and simplify: (2x - 3)(x + 4)." } },
|
||||
{ id: createId(), type: "text", difficulty: 3, score: 10, content: { text: "23) In a right triangle with legs 6 and 8, find the hypotenuse and the area." } },
|
||||
];
|
||||
|
||||
await db.insert(questions).values(
|
||||
mathExamQuestions.map((q) => ({
|
||||
id: q.id,
|
||||
type: q.type,
|
||||
difficulty: q.difficulty,
|
||||
content: q.content,
|
||||
authorId: "user_teacher_math",
|
||||
}))
|
||||
);
|
||||
|
||||
await db.insert(questionsToKnowledgePoints).values({
|
||||
questionId: mathExamQuestions[0].id,
|
||||
knowledgePointId: kpLinearId
|
||||
});
|
||||
|
||||
// --- 4. Exams (New Structure) ---
|
||||
console.log("📝 Seeding Exams...");
|
||||
|
||||
const examId = createId();
|
||||
|
||||
const makeGroup = (title: string, children: unknown[]) => ({
|
||||
id: createId(),
|
||||
type: "group",
|
||||
title,
|
||||
children,
|
||||
});
|
||||
|
||||
const makeQuestionNode = (questionId: string, score: number) => ({
|
||||
id: createId(),
|
||||
type: "question",
|
||||
questionId,
|
||||
score,
|
||||
});
|
||||
|
||||
const choiceIds = mathExamQuestions.slice(0, 10).map((q) => q.id);
|
||||
const fillIds = mathExamQuestions.slice(10, 15).map((q) => q.id);
|
||||
const judgmentIds = mathExamQuestions.slice(15, 20).map((q) => q.id);
|
||||
const shortAnswerIds = mathExamQuestions.slice(20, 23).map((q) => q.id);
|
||||
|
||||
const examStructure = [
|
||||
{
|
||||
type: "group",
|
||||
title: "Part 1: Basics",
|
||||
children: [
|
||||
{ type: "question", questionId: qSimpleId, score: 10 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "group",
|
||||
title: "Part 2: Reading",
|
||||
children: [
|
||||
// For composite questions, we usually add the parent, and the system fetches children
|
||||
{ type: "question", questionId: qParentId, score: 20 }
|
||||
]
|
||||
}
|
||||
makeGroup(
|
||||
"第一部分：单项选择题（共10题，每题4分，共40分）",
|
||||
choiceIds.map((id) => makeQuestionNode(id, 4))
|
||||
),
|
||||
makeGroup(
|
||||
"第二部分：填空题（共5题，每题4分，共20分）",
|
||||
fillIds.map((id) => makeQuestionNode(id, 4))
|
||||
),
|
||||
makeGroup(
|
||||
"第三部分：判断题（共5题，每题2分，共10分）",
|
||||
judgmentIds.map((id) => makeQuestionNode(id, 2))
|
||||
),
|
||||
makeGroup(
|
||||
"第四部分：解答题（共3题，每题10分，共30分）",
|
||||
shortAnswerIds.map((id) => makeQuestionNode(id, 10))
|
||||
),
|
||||
];
|
||||
|
||||
await db.insert(exams).values({
|
||||
id: examId,
|
||||
title: "Algebra Mid-Term 2025",
|
||||
description: "Comprehensive assessment",
|
||||
title: "Grade 10 Mathematics Final Exam (Seed)",
|
||||
description: JSON.stringify({
|
||||
subject: "Mathematics",
|
||||
grade: "Grade 10",
|
||||
difficulty: 3,
|
||||
totalScore: 100,
|
||||
durationMin: 120,
|
||||
questionCount: 23,
|
||||
tags: ["seed", "math", "grade10", "final"],
|
||||
}),
|
||||
creatorId: "user_teacher_math",
|
||||
status: "published",
|
||||
startTime: new Date(),
|
||||
@@ -215,15 +499,118 @@ async function seed() {
|
||||
});
|
||||
|
||||
// Link questions physically (Source of Truth)
|
||||
await db.insert(examQuestions).values([
|
||||
{ examId, questionId: qSimpleId, score: 10, order: 0 },
|
||||
{ examId, questionId: qParentId, score: 20, order: 1 },
|
||||
// Note: Child questions are often implicitly included or explicitly added depending on logic.
|
||||
// For this seed, we assume linking Parent is enough for the relation,
|
||||
// but let's link children too for completeness if the query strategy requires it.
|
||||
{ examId, questionId: qChild1Id, score: 0, order: 2 },
|
||||
{ examId, questionId: qChild2Id, score: 0, order: 3 },
|
||||
]);
|
||||
const orderedQuestionIds = [...choiceIds, ...fillIds, ...judgmentIds, ...shortAnswerIds];
|
||||
const scoreById = new Map(mathExamQuestions.map((q) => [q.id, q.score] as const));
|
||||
|
||||
await db.insert(examQuestions).values(
|
||||
orderedQuestionIds.map((questionId, order) => ({
|
||||
examId,
|
||||
questionId,
|
||||
score: scoreById.get(questionId) ?? 0,
|
||||
order,
|
||||
}))
|
||||
);
|
||||
|
||||
console.log("📌 Seeding Homework Assignments...");
|
||||
|
||||
const assignmentId = createId();
|
||||
const now = new Date();
|
||||
const dueAt = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
|
||||
const lateDueAt = new Date(now.getTime() + 9 * 24 * 60 * 60 * 1000);
|
||||
|
||||
await db.insert(homeworkAssignments).values({
|
||||
id: assignmentId,
|
||||
sourceExamId: examId,
|
||||
title: "Grade 10 Mathematics Final - Homework (Seed)",
|
||||
description: "Auto-generated homework assignment from seeded math exam.",
|
||||
structure: examStructure as unknown,
|
||||
status: "published",
|
||||
creatorId: "user_teacher_math",
|
||||
availableAt: now,
|
||||
dueAt,
|
||||
allowLate: true,
|
||||
lateDueAt,
|
||||
maxAttempts: 2,
|
||||
});
|
||||
|
||||
await db.insert(homeworkAssignmentQuestions).values(
|
||||
orderedQuestionIds.map((questionId, order) => ({
|
||||
assignmentId,
|
||||
questionId,
|
||||
score: scoreById.get(questionId) ?? 0,
|
||||
order,
|
||||
}))
|
||||
);
|
||||
|
||||
const targetStudentIds = ["user_student_1", ...extraStudentIds.slice(0, 4)];
|
||||
await db.insert(homeworkAssignmentTargets).values(
|
||||
targetStudentIds.map((studentId) => ({
|
||||
assignmentId,
|
||||
studentId,
|
||||
}))
|
||||
);
|
||||
|
||||
const scoreForQuestion = (questionId: string) => scoreById.get(questionId) ?? 0;
|
||||
const buildAnswer = (questionId: string, type: string) => {
|
||||
if (type === "single_choice") return { answer: "B" };
|
||||
if (type === "judgment") return { answer: true };
|
||||
return { answer: "Seed answer" };
|
||||
};
|
||||
|
||||
const questionTypeById = new Map(mathExamQuestions.map((q) => [q.id, q.type] as const));
|
||||
|
||||
const submissionIds: string[] = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const studentId = targetStudentIds[i];
|
||||
const submissionId = createId();
|
||||
submissionIds.push(submissionId);
|
||||
const submittedAt = new Date(now.getTime() - (i + 1) * 24 * 60 * 60 * 1000);
|
||||
const status = i === 0 ? "graded" : i === 1 ? "graded" : "submitted";
|
||||
|
||||
const perQuestionScores = orderedQuestionIds.map((qid, idx) => {
|
||||
const max = scoreForQuestion(qid);
|
||||
if (status !== "graded") return null;
|
||||
if (max <= 0) return 0;
|
||||
if (idx % 7 === 0) return Math.max(0, max - 1);
|
||||
return max;
|
||||
});
|
||||
|
||||
const totalScore =
|
||||
status === "graded"
|
||||
? perQuestionScores.reduce<number>((sum, s) => sum + Number(s ?? 0), 0)
|
||||
: null;
|
||||
|
||||
await db.insert(homeworkSubmissions).values({
|
||||
id: submissionId,
|
||||
assignmentId,
|
||||
studentId,
|
||||
attemptNo: 1,
|
||||
score: totalScore,
|
||||
status,
|
||||
startedAt: submittedAt,
|
||||
submittedAt,
|
||||
isLate: false,
|
||||
createdAt: submittedAt,
|
||||
updatedAt: submittedAt,
|
||||
});
|
||||
|
||||
await db.insert(homeworkAnswers).values(
|
||||
orderedQuestionIds.map((questionId, idx) => {
|
||||
const questionType = questionTypeById.get(questionId) ?? "text";
|
||||
const score = status === "graded" ? (perQuestionScores[idx] ?? 0) : null;
|
||||
return {
|
||||
id: createId(),
|
||||
submissionId,
|
||||
questionId,
|
||||
answerContent: buildAnswer(questionId, questionType),
|
||||
score,
|
||||
feedback: status === "graded" ? (score === scoreForQuestion(questionId) ? "Good" : "Check calculation") : null,
|
||||
createdAt: submittedAt,
|
||||
updatedAt: submittedAt,
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const end = performance.now();
|
||||
console.log(`✅ Seed completed in ${(end - start).toFixed(2)}ms`);
|
||||
|
||||
@@ -1,20 +1,9 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { AlertCircle } from "lucide-react"
|
||||
|
||||
export default function AuthError({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string }
|
||||
reset: () => void
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.error(error)
|
||||
}, [error])
|
||||
|
||||
export default function AuthError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center gap-4 p-4 text-center">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { AdminDashboard } from "@/modules/dashboard/components/admin-view"
|
||||
import { AdminDashboardView } from "@/modules/dashboard/components/admin-dashboard/admin-dashboard"
|
||||
import { getAdminDashboardData } from "@/modules/dashboard/data-access"
|
||||
|
||||
export default function AdminDashboardPage() {
|
||||
return <AdminDashboard />
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function AdminDashboardPage() {
|
||||
const data = await getAdminDashboardData()
|
||||
return <AdminDashboardView data={data} />
|
||||
}
|
||||
|
||||
18
src/app/(dashboard)/admin/school/academic-year/page.tsx
Normal file
18
src/app/(dashboard)/admin/school/academic-year/page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { AcademicYearClient } from "@/modules/school/components/academic-year-view"
|
||||
import { getAcademicYears } from "@/modules/school/data-access"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function AdminAcademicYearPage() {
|
||||
const years = await getAcademicYears()
|
||||
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">Academic Year</h2>
|
||||
<p className="text-muted-foreground">Manage academic year ranges and the active year.</p>
|
||||
</div>
|
||||
<AcademicYearClient years={years} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
19
src/app/(dashboard)/admin/school/classes/page.tsx
Normal file
19
src/app/(dashboard)/admin/school/classes/page.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { getAdminClasses, getTeacherOptions } from "@/modules/classes/data-access"
|
||||
import { AdminClassesClient } from "@/modules/classes/components/admin-classes-view"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function AdminSchoolClassesPage() {
|
||||
const [classes, teachers] = await Promise.all([getAdminClasses(), getTeacherOptions()])
|
||||
|
||||
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">Classes</h2>
|
||||
<p className="text-muted-foreground">Manage classes and assign teachers.</p>
|
||||
</div>
|
||||
<AdminClassesClient classes={classes} teachers={teachers} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
17
src/app/(dashboard)/admin/school/departments/page.tsx
Normal file
17
src/app/(dashboard)/admin/school/departments/page.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { DepartmentsClient } from "@/modules/school/components/departments-view"
|
||||
import { getDepartments } from "@/modules/school/data-access"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function AdminDepartmentsPage() {
|
||||
const departments = await getDepartments()
|
||||
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">Departments</h2>
|
||||
<p className="text-muted-foreground">Manage school departments.</p>
|
||||
</div>
|
||||
<DepartmentsClient departments={departments} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
231
src/app/(dashboard)/admin/school/grades/insights/page.tsx
Normal file
231
src/app/(dashboard)/admin/school/grades/insights/page.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import Link from "next/link"
|
||||
|
||||
import { getGrades } from "@/modules/school/data-access"
|
||||
import { getGradeHomeworkInsights } from "@/modules/classes/data-access"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import { BarChart3 } from "lucide-react"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
if (typeof v === "string") return v
|
||||
if (Array.isArray(v)) return v[0]
|
||||
return undefined
|
||||
}
|
||||
|
||||
const fmt = (v: number | null, digits = 1) => (typeof v === "number" && Number.isFinite(v) ? v.toFixed(digits) : "-")
|
||||
|
||||
export default async function AdminGradeInsightsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
const gradeId = getParam(params, "gradeId")
|
||||
|
||||
const grades = await getGrades()
|
||||
const selected = gradeId && gradeId !== "all" ? gradeId : ""
|
||||
|
||||
const insights = selected ? await getGradeHomeworkInsights({ gradeId: selected, limit: 50 }) : null
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Grade Insights</h2>
|
||||
<p className="text-muted-foreground">Homework statistics aggregated across all classes in a grade.</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/school/grades">Manage grades</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-base">Filters</CardTitle>
|
||||
<Badge variant="secondary" className="tabular-nums">
|
||||
{grades.length}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form action="/admin/school/grades/insights" method="get" className="flex flex-col gap-3 md:flex-row md:items-center">
|
||||
<label className="text-sm font-medium">Grade</label>
|
||||
<select
|
||||
name="gradeId"
|
||||
defaultValue={selected || "all"}
|
||||
className="h-10 w-full rounded-md border bg-background px-3 text-sm md:w-[360px]"
|
||||
>
|
||||
<option value="all">Select a grade</option>
|
||||
{grades.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.school.name} / {g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button type="submit" className="md:ml-2">
|
||||
Apply
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{!selected ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="Select a grade to view insights"
|
||||
description="Pick a grade to see latest homework and historical score statistics."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
) : !insights ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="Grade not found"
|
||||
description="This grade may not exist or has no accessible data."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
) : insights.assignments.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="No homework data for this grade"
|
||||
description="No homework assignments were targeted to students in this grade yet."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Classes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{insights.classCount}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{insights.grade.school.name} / {insights.grade.name}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Students</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{insights.studentCounts.total}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Active {insights.studentCounts.active} • Inactive {insights.studentCounts.inactive}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Overall Avg</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{fmt(insights.overallScores.avg)}</div>
|
||||
<div className="text-xs text-muted-foreground">Across graded homework</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Latest Avg</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{fmt(insights.latest?.scoreStats.avg ?? null)}</div>
|
||||
<div className="text-xs text-muted-foreground">{insights.latest ? insights.latest.title : "-"}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-base">Latest homework</CardTitle>
|
||||
<Badge variant="secondary" className="tabular-nums">
|
||||
{insights.assignments.length}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead>Assignment</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead className="text-right">Targeted</TableHead>
|
||||
<TableHead className="text-right">Submitted</TableHead>
|
||||
<TableHead className="text-right">Graded</TableHead>
|
||||
<TableHead className="text-right">Avg</TableHead>
|
||||
<TableHead className="text-right">Median</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{insights.assignments.map((a) => (
|
||||
<TableRow key={a.assignmentId}>
|
||||
<TableCell className="font-medium">{a.title}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{a.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{formatDate(a.createdAt)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{a.targetCount}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{a.submittedCount}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{a.gradedCount}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(a.scoreStats.avg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(a.scoreStats.median)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-base">Class ranking</CardTitle>
|
||||
<Badge variant="secondary" className="tabular-nums">
|
||||
{insights.classes.length}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead>Class</TableHead>
|
||||
<TableHead className="text-right">Students</TableHead>
|
||||
<TableHead className="text-right">Latest Avg</TableHead>
|
||||
<TableHead className="text-right">Prev Avg</TableHead>
|
||||
<TableHead className="text-right">Δ</TableHead>
|
||||
<TableHead className="text-right">Overall Avg</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{insights.classes.map((c) => (
|
||||
<TableRow key={c.class.id}>
|
||||
<TableCell className="font-medium">
|
||||
{c.class.name}
|
||||
{c.class.homeroom ? <span className="text-muted-foreground"> • {c.class.homeroom}</span> : null}
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{c.studentCounts.total}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.latestAvg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.prevAvg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.deltaAvg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.overallScores.avg)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
19
src/app/(dashboard)/admin/school/grades/page.tsx
Normal file
19
src/app/(dashboard)/admin/school/grades/page.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { GradesClient } from "@/modules/school/components/grades-view"
|
||||
import { getGrades, getSchools, getStaffOptions } from "@/modules/school/data-access"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function AdminGradesPage() {
|
||||
const [grades, schools, staff] = await Promise.all([getGrades(), getSchools(), getStaffOptions()])
|
||||
|
||||
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">Grades</h2>
|
||||
<p className="text-muted-foreground">Manage grades and assign grade heads.</p>
|
||||
</div>
|
||||
<GradesClient grades={grades} schools={schools} staff={staff} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
5
src/app/(dashboard)/admin/school/page.tsx
Normal file
5
src/app/(dashboard)/admin/school/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { redirect } from "next/navigation"
|
||||
|
||||
export default function AdminSchoolPage() {
|
||||
redirect("/admin/school/classes")
|
||||
}
|
||||
18
src/app/(dashboard)/admin/school/schools/page.tsx
Normal file
18
src/app/(dashboard)/admin/school/schools/page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { SchoolsClient } from "@/modules/school/components/schools-view"
|
||||
import { getSchools } from "@/modules/school/data-access"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function AdminSchoolsPage() {
|
||||
const schools = await getSchools()
|
||||
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">Schools</h2>
|
||||
<p className="text-muted-foreground">Manage schools for multi-school setups.</p>
|
||||
</div>
|
||||
<SchoolsClient schools={schools} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,72 +1,16 @@
|
||||
"use client"
|
||||
import { redirect } from "next/navigation"
|
||||
import { auth } from "@/auth"
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import Link from "next/link"
|
||||
import { Shield, GraduationCap, Users, User } from "lucide-react"
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
// In a real app, this would be a server component that redirects based on session
|
||||
// But for this demo/dev environment, we keep the manual selection or add auto-redirect logic if we had auth state.
|
||||
export default async function DashboardPage() {
|
||||
const session = await auth()
|
||||
if (!session?.user) redirect("/login")
|
||||
|
||||
export default function DashboardPage() {
|
||||
// Mock Auth Logic (Optional: Uncomment to test auto-redirect)
|
||||
/*
|
||||
const router = useRouter();
|
||||
useEffect(() => {
|
||||
// const role = "teacher"; // Fetch from auth hook
|
||||
// if (role) router.push(`/${role}/dashboard`);
|
||||
}, []);
|
||||
*/
|
||||
const role = String(session.user.role ?? "teacher")
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[50vh] space-y-8">
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-3xl font-bold">Welcome to Next_Edu</h1>
|
||||
<p className="text-muted-foreground">Select your role to view the corresponding dashboard.</p>
|
||||
<p className="text-xs text-muted-foreground bg-muted p-2 rounded inline-block">
|
||||
[DEV MODE] In production, you would be redirected automatically based on your login session.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Link href="/admin/dashboard">
|
||||
<Button variant="outline" className="h-40 w-40 flex flex-col gap-4 hover:border-primary hover:bg-primary/5 transition-all">
|
||||
<Shield className="h-10 w-10 text-primary" />
|
||||
<div className="space-y-1">
|
||||
<span className="font-semibold text-lg block">Admin</span>
|
||||
<span className="text-xs text-muted-foreground font-normal">System Management</span>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/teacher/dashboard">
|
||||
<Button variant="outline" className="h-40 w-40 flex flex-col gap-4 hover:border-indigo-500 hover:bg-indigo-50 transition-all">
|
||||
<GraduationCap className="h-10 w-10 text-indigo-600" />
|
||||
<div className="space-y-1">
|
||||
<span className="font-semibold text-lg block">Teacher</span>
|
||||
<span className="text-xs text-muted-foreground font-normal">Class & Exams</span>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/student/dashboard">
|
||||
<Button variant="outline" className="h-40 w-40 flex flex-col gap-4 hover:border-emerald-500 hover:bg-emerald-50 transition-all">
|
||||
<Users className="h-10 w-10 text-emerald-600" />
|
||||
<div className="space-y-1">
|
||||
<span className="font-semibold text-lg block">Student</span>
|
||||
<span className="text-xs text-muted-foreground font-normal">My Learning</span>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/parent/dashboard">
|
||||
<Button variant="outline" className="h-40 w-40 flex flex-col gap-4 hover:border-amber-500 hover:bg-amber-50 transition-all">
|
||||
<User className="h-10 w-10 text-amber-600" />
|
||||
<div className="space-y-1">
|
||||
<span className="font-semibold text-lg block">Parent</span>
|
||||
<span className="text-xs text-muted-foreground font-normal">Family Overview</span>
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
if (role === "admin") redirect("/admin/dashboard")
|
||||
if (role === "student") redirect("/student/dashboard")
|
||||
if (role === "parent") redirect("/parent/dashboard")
|
||||
redirect("/teacher/dashboard")
|
||||
}
|
||||
|
||||
@@ -1,23 +1,10 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { AlertCircle } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
|
||||
export default function Error({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string }
|
||||
reset: () => void
|
||||
}) {
|
||||
useEffect(() => {
|
||||
// Log the error to an error reporting service
|
||||
console.error(error)
|
||||
}, [error])
|
||||
|
||||
export default function Error({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center space-y-4">
|
||||
<EmptyState
|
||||
|
||||
151
src/app/(dashboard)/profile/page.tsx
Normal file
151
src/app/(dashboard)/profile/page.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import Link from "next/link"
|
||||
import { redirect } from "next/navigation"
|
||||
|
||||
import { auth } from "@/auth"
|
||||
import { getStudentClasses, getStudentSchedule } from "@/modules/classes/data-access"
|
||||
import { StudentGradesCard } from "@/modules/dashboard/components/student-dashboard/student-grades-card"
|
||||
import { StudentRankingCard } from "@/modules/dashboard/components/student-dashboard/student-ranking-card"
|
||||
import { StudentStatsGrid } from "@/modules/dashboard/components/student-dashboard/student-stats-grid"
|
||||
import { StudentTodayScheduleCard } from "@/modules/dashboard/components/student-dashboard/student-today-schedule-card"
|
||||
import { StudentUpcomingAssignmentsCard } from "@/modules/dashboard/components/student-dashboard/student-upcoming-assignments-card"
|
||||
import { getStudentDashboardGrades, getStudentHomeworkAssignments } from "@/modules/homework/data-access"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
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 default async function ProfilePage() {
|
||||
const session = await auth()
|
||||
if (!session?.user) redirect("/login")
|
||||
|
||||
const name = session.user.name ?? "User"
|
||||
const email = session.user.email ?? "-"
|
||||
const role = String(session.user.role ?? "teacher")
|
||||
const userId = String(session.user.id ?? "").trim()
|
||||
|
||||
const studentData =
|
||||
role === "student" && userId
|
||||
? await (async () => {
|
||||
const [classes, schedule, assignmentsAll, grades] = await Promise.all([
|
||||
getStudentClasses(userId),
|
||||
getStudentSchedule(userId),
|
||||
getStudentHomeworkAssignments(userId),
|
||||
getStudentDashboardGrades(userId),
|
||||
])
|
||||
|
||||
const now = new Date()
|
||||
const in7Days = new Date(now)
|
||||
in7Days.setDate(in7Days.getDate() + 7)
|
||||
|
||||
const dueSoonCount = assignmentsAll.filter((a) => {
|
||||
if (!a.dueAt) return false
|
||||
const due = new Date(a.dueAt)
|
||||
return due >= now && due <= in7Days && a.progressStatus !== "graded"
|
||||
}).length
|
||||
|
||||
const overdueCount = assignmentsAll.filter((a) => {
|
||||
if (!a.dueAt) return false
|
||||
const due = new Date(a.dueAt)
|
||||
return due < now && a.progressStatus !== "graded"
|
||||
}).length
|
||||
|
||||
const gradedCount = assignmentsAll.filter((a) => a.progressStatus === "graded").length
|
||||
|
||||
const upcomingAssignments = [...assignmentsAll]
|
||||
.sort((a, b) => {
|
||||
const aTime = a.dueAt ? new Date(a.dueAt).getTime() : Number.POSITIVE_INFINITY
|
||||
const bTime = b.dueAt ? new Date(b.dueAt).getTime() : Number.POSITIVE_INFINITY
|
||||
if (aTime !== bTime) return aTime - bTime
|
||||
return a.id.localeCompare(b.id)
|
||||
})
|
||||
.slice(0, 8)
|
||||
|
||||
const todayWeekday = toWeekday(now)
|
||||
const todayScheduleItems = 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,
|
||||
}))
|
||||
|
||||
return {
|
||||
enrolledClassCount: classes.length,
|
||||
dueSoonCount,
|
||||
overdueCount,
|
||||
gradedCount,
|
||||
todayScheduleItems,
|
||||
upcomingAssignments,
|
||||
grades,
|
||||
}
|
||||
})()
|
||||
: null
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-8 p-8">
|
||||
<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">Profile</h1>
|
||||
<div className="text-sm text-muted-foreground">Your account information.</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/settings">Open settings</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Account</CardTitle>
|
||||
<CardDescription>Signed-in user details from session.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="text-sm font-medium">{name}</div>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{role}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">{email}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{studentData ? (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-semibold tracking-tight">Student</h2>
|
||||
<div className="text-sm text-muted-foreground">Your learning overview.</div>
|
||||
</div>
|
||||
|
||||
<StudentStatsGrid
|
||||
enrolledClassCount={studentData.enrolledClassCount}
|
||||
dueSoonCount={studentData.dueSoonCount}
|
||||
overdueCount={studentData.overdueCount}
|
||||
gradedCount={studentData.gradedCount}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<StudentGradesCard grades={studentData.grades} />
|
||||
<StudentRankingCard ranking={studentData.grades.ranking} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
<StudentTodayScheduleCard items={studentData.todayScheduleItems} />
|
||||
<StudentUpcomingAssignmentsCard upcomingAssignments={studentData.upcomingAssignments} />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
21
src/app/(dashboard)/settings/page.tsx
Normal file
21
src/app/(dashboard)/settings/page.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { redirect } from "next/navigation"
|
||||
|
||||
import { auth } from "@/auth"
|
||||
import { AdminSettingsView } from "@/modules/settings/components/admin-settings-view"
|
||||
import { StudentSettingsView } from "@/modules/settings/components/student-settings-view"
|
||||
import { TeacherSettingsView } from "@/modules/settings/components/teacher-settings-view"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function SettingsPage() {
|
||||
const session = await auth()
|
||||
if (!session?.user) redirect("/login")
|
||||
|
||||
const role = String(session.user.role ?? "teacher")
|
||||
|
||||
if (role === "admin") return <AdminSettingsView />
|
||||
if (role === "student") return <StudentSettingsView user={session.user} />
|
||||
if (role === "teacher") return <TeacherSettingsView user={session.user} />
|
||||
|
||||
redirect("/dashboard")
|
||||
}
|
||||
61
src/app/(dashboard)/student/dashboard/loading.tsx
Normal file
61
src/app/(dashboard)/student/dashboard/loading.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function Loading() {
|
||||
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-2">
|
||||
<Skeleton className="h-9 w-48" />
|
||||
<Skeleton className="h-4 w-56" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-40" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-4 rounded-full" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-8 w-16" />
|
||||
<Skeleton className="mt-2 h-3 w-28" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
<Card className="lg:col-span-3">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-10 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-4">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm">
|
||||
<Skeleton className="h-4 w-44" />
|
||||
</CardTitle>
|
||||
<Skeleton className="h-9 w-24" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-10 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,88 @@
|
||||
import { StudentDashboard } from "@/modules/dashboard/components/student-view"
|
||||
import { StudentDashboard } from "@/modules/dashboard/components/student-dashboard/student-dashboard-view"
|
||||
import { getStudentClasses, getStudentSchedule } from "@/modules/classes/data-access"
|
||||
import { getDemoStudentUser, getStudentDashboardGrades, getStudentHomeworkAssignments } from "@/modules/homework/data-access"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Inbox } from "lucide-react"
|
||||
|
||||
export default function StudentDashboardPage() {
|
||||
return <StudentDashboard />
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
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 default async function StudentDashboardPage() {
|
||||
const student = await getDemoStudentUser()
|
||||
if (!student) {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center">
|
||||
<EmptyState
|
||||
title="No user found"
|
||||
description="Create a student user to see dashboard."
|
||||
icon={Inbox}
|
||||
className="border-none shadow-none h-auto"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const [classes, schedule, assignments, grades] = await Promise.all([
|
||||
getStudentClasses(student.id),
|
||||
getStudentSchedule(student.id),
|
||||
getStudentHomeworkAssignments(student.id),
|
||||
getStudentDashboardGrades(student.id),
|
||||
])
|
||||
|
||||
const now = new Date()
|
||||
const in7Days = new Date(now)
|
||||
in7Days.setDate(in7Days.getDate() + 7)
|
||||
|
||||
const dueSoonCount = assignments.filter((a) => {
|
||||
if (!a.dueAt) return false
|
||||
const due = new Date(a.dueAt)
|
||||
return due >= now && due <= in7Days && a.progressStatus !== "graded"
|
||||
}).length
|
||||
|
||||
const overdueCount = assignments.filter((a) => {
|
||||
if (!a.dueAt) return false
|
||||
const due = new Date(a.dueAt)
|
||||
return due < now && a.progressStatus !== "graded"
|
||||
}).length
|
||||
|
||||
const gradedCount = assignments.filter((a) => a.progressStatus === "graded").length
|
||||
|
||||
const todayWeekday = toWeekday(now)
|
||||
const todayScheduleItems = 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))
|
||||
|
||||
const upcomingAssignments = [...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, 6)
|
||||
|
||||
return (
|
||||
<StudentDashboard
|
||||
studentName={student.name}
|
||||
enrolledClassCount={classes.length}
|
||||
dueSoonCount={dueSoonCount}
|
||||
overdueCount={overdueCount}
|
||||
gradedCount={gradedCount}
|
||||
todayScheduleItems={todayScheduleItems}
|
||||
upcomingAssignments={upcomingAssignments}
|
||||
grades={grades}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
29
src/app/(dashboard)/student/learning/courses/loading.tsx
Normal file
29
src/app/(dashboard)/student/learning/courses/loading.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-40" />
|
||||
<Skeleton className="h-4 w-52" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="pb-2">
|
||||
<Skeleton className="h-5 w-44" />
|
||||
<Skeleton className="mt-2 h-4 w-56" />
|
||||
</CardHeader>
|
||||
<CardContent className="pt-2 flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-9 w-24" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
40
src/app/(dashboard)/student/learning/courses/page.tsx
Normal file
40
src/app/(dashboard)/student/learning/courses/page.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Inbox } from "lucide-react"
|
||||
|
||||
import { getStudentClasses } from "@/modules/classes/data-access"
|
||||
import { getDemoStudentUser } from "@/modules/homework/data-access"
|
||||
import { StudentCoursesView } from "@/modules/student/components/student-courses-view"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function StudentCoursesPage() {
|
||||
const student = await getDemoStudentUser()
|
||||
if (!student) {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Courses</h2>
|
||||
<p className="text-muted-foreground">Your enrolled classes.</p>
|
||||
</div>
|
||||
<EmptyState
|
||||
title="No user found"
|
||||
description="Create a student user to see courses."
|
||||
icon={Inbox}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const classes = await getStudentClasses(student.id)
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Courses</h2>
|
||||
<p className="text-muted-foreground">Your enrolled classes.</p>
|
||||
</div>
|
||||
<StudentCoursesView classes={classes} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
78
src/app/(dashboard)/student/learning/textbooks/[id]/page.tsx
Normal file
78
src/app/(dashboard)/student/learning/textbooks/[id]/page.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
|
||||
import { ArrowLeft, BookOpen, Inbox } from "lucide-react"
|
||||
|
||||
import { getTextbookById, getChaptersByTextbookId } from "@/modules/textbooks/data-access"
|
||||
import { TextbookReader } from "@/modules/textbooks/components/textbook-reader"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { getDemoStudentUser } from "@/modules/homework/data-access"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function StudentTextbookDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>
|
||||
}) {
|
||||
const student = await getDemoStudentUser()
|
||||
if (!student) {
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Textbook</h2>
|
||||
<p className="text-muted-foreground">Read chapters and review content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState title="No user found" description="Create a student user to read textbooks." icon={Inbox} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const { id } = await params
|
||||
|
||||
const [textbook, chapters] = await Promise.all([getTextbookById(id), getChaptersByTextbookId(id)])
|
||||
|
||||
if (!textbook) notFound()
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-4rem)] flex-col overflow-hidden">
|
||||
<div className="flex items-center gap-4 border-b bg-background py-4 shrink-0 z-10">
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<Link href="/student/learning/textbooks">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Badge variant="outline">{textbook.subject}</Badge>
|
||||
<span className="text-xs text-muted-foreground uppercase tracking-wider font-medium">
|
||||
{textbook.grade ?? "-"}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold tracking-tight line-clamp-1">{textbook.title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-hidden pt-6">
|
||||
{chapters.length === 0 ? (
|
||||
<div className="px-8">
|
||||
<EmptyState
|
||||
icon={BookOpen}
|
||||
title="No chapters"
|
||||
description="This textbook has no chapters yet."
|
||||
className="bg-card"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[calc(100vh-140px)] px-8 min-h-0">
|
||||
<TextbookReader chapters={chapters} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
80
src/app/(dashboard)/student/learning/textbooks/page.tsx
Normal file
80
src/app/(dashboard)/student/learning/textbooks/page.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { BookOpen, Inbox } from "lucide-react"
|
||||
|
||||
import { getTextbooks } from "@/modules/textbooks/data-access"
|
||||
import { TextbookCard } from "@/modules/textbooks/components/textbook-card"
|
||||
import { TextbookFilters } from "@/modules/textbooks/components/textbook-filters"
|
||||
import { getDemoStudentUser } from "@/modules/homework/data-access"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import Link from "next/link"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
export default async function StudentTextbooksPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<SearchParams>
|
||||
}) {
|
||||
const [student, sp] = await Promise.all([getDemoStudentUser(), searchParams])
|
||||
|
||||
if (!student) {
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Textbooks</h2>
|
||||
<p className="text-muted-foreground">Browse your course textbooks.</p>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState title="No user found" description="Create a student user to see textbooks." icon={Inbox} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const q = getParam(sp, "q") || undefined
|
||||
const subject = getParam(sp, "subject") || undefined
|
||||
const grade = getParam(sp, "grade") || undefined
|
||||
|
||||
const textbooks = await getTextbooks(q, subject, grade)
|
||||
const hasFilters = Boolean(q || (subject && subject !== "all") || (grade && grade !== "all"))
|
||||
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Textbooks</h2>
|
||||
<p className="text-muted-foreground">Browse your course textbooks.</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/student/dashboard">Back</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<TextbookFilters />
|
||||
|
||||
{textbooks.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={BookOpen}
|
||||
title={hasFilters ? "No textbooks match your filters" : "No textbooks yet"}
|
||||
description={hasFilters ? "Try clearing filters or adjusting keywords." : "No textbooks are available right now."}
|
||||
action={hasFilters ? { label: "Clear filters", href: "/student/learning/textbooks" } : undefined}
|
||||
className="bg-card"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{textbooks.map((textbook) => (
|
||||
<TextbookCard key={textbook.id} textbook={textbook} hrefBase="/student/learning/textbooks" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
32
src/app/(dashboard)/student/schedule/loading.tsx
Normal file
32
src/app/(dashboard)/student/schedule/loading.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-40" />
|
||||
<Skeleton className="h-4 w-52" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-60" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="pb-3">
|
||||
<Skeleton className="h-4 w-16" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((__, j) => (
|
||||
<Skeleton key={j} className="h-16 w-full" />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
55
src/app/(dashboard)/student/schedule/page.tsx
Normal file
55
src/app/(dashboard)/student/schedule/page.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { Inbox } from "lucide-react"
|
||||
|
||||
import { getStudentClasses, getStudentSchedule } from "@/modules/classes/data-access"
|
||||
import { getDemoStudentUser } from "@/modules/homework/data-access"
|
||||
import { StudentScheduleFilters } from "@/modules/student/components/student-schedule-filters"
|
||||
import { StudentScheduleView } from "@/modules/student/components/student-schedule-view"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
export default async function StudentSchedulePage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<SearchParams>
|
||||
}) {
|
||||
const student = await getDemoStudentUser()
|
||||
if (!student) {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Schedule</h2>
|
||||
<p className="text-muted-foreground">Your weekly timetable.</p>
|
||||
</div>
|
||||
<EmptyState title="No user found" description="Create a student user to see schedule." icon={Inbox} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const [sp, classes, schedule] = await Promise.all([
|
||||
searchParams,
|
||||
getStudentClasses(student.id),
|
||||
getStudentSchedule(student.id),
|
||||
])
|
||||
|
||||
const classIdParam = sp.classId
|
||||
const classId = typeof classIdParam === "string" ? classIdParam : Array.isArray(classIdParam) ? classIdParam[0] : "all"
|
||||
const filteredItems =
|
||||
classId && classId !== "all" ? schedule.filter((s) => s.classId === classId) : schedule
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Schedule</h2>
|
||||
<p className="text-muted-foreground">Your weekly timetable.</p>
|
||||
</div>
|
||||
<StudentScheduleFilters classes={classes} />
|
||||
</div>
|
||||
<StudentScheduleView items={filteredItems} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
259
src/app/(dashboard)/teacher/classes/insights/page.tsx
Normal file
259
src/app/(dashboard)/teacher/classes/insights/page.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import Link from "next/link"
|
||||
import { Suspense } from "react"
|
||||
import { BarChart3 } from "lucide-react"
|
||||
|
||||
import { getClassHomeworkInsights, getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { InsightsFilters } from "@/modules/classes/components/insights-filters"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
const formatNumber = (v: number | null, digits = 1) => {
|
||||
if (typeof v !== "number" || Number.isNaN(v)) return "-"
|
||||
return v.toFixed(digits)
|
||||
}
|
||||
|
||||
function InsightsResultsFallback() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{Array.from({ length: 3 }).map((_, idx) => (
|
||||
<div key={idx} className="rounded-lg border bg-card">
|
||||
<div className="p-6">
|
||||
<Skeleton className="h-5 w-28" />
|
||||
<Skeleton className="mt-3 h-8 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="rounded-md border bg-card">
|
||||
<div className="p-4">
|
||||
<Skeleton className="h-8 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2 p-4 pt-0">
|
||||
{Array.from({ length: 8 }).map((_, idx) => (
|
||||
<Skeleton key={idx} className="h-10 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
async function InsightsResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
const classId = getParam(params, "classId")
|
||||
|
||||
if (!classId || classId === "all") {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="Select a class to view insights"
|
||||
description="Pick a class to see latest homework and historical score statistics."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const insights = await getClassHomeworkInsights({ classId, limit: 50 })
|
||||
if (!insights) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="Class not found"
|
||||
description="This class may not exist or is not accessible."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const hasAssignments = insights.assignments.length > 0
|
||||
|
||||
if (!hasAssignments) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="No homework data for this class"
|
||||
description="No homework assignments were targeted to students in this class yet."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const latest = insights.latest
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Students</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{insights.studentCounts.total}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Active {insights.studentCounts.active} · Inactive {insights.studentCounts.inactive}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Assignments</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{insights.assignments.length}</div>
|
||||
<div className="text-xs text-muted-foreground">Latest: {latest ? formatDate(latest.createdAt) : "-"}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Overall scores</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{formatNumber(insights.overallScores.avg, 1)}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Median {formatNumber(insights.overallScores.median, 1)} · Count {insights.overallScores.count}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{latest && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">Latest assignment</CardTitle>
|
||||
<div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span className="font-medium text-foreground">{latest.title}</span>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{latest.status}
|
||||
</Badge>
|
||||
<span>·</span>
|
||||
<span>{formatDate(latest.createdAt)}</span>
|
||||
{latest.dueAt ? (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>Due {formatDate(latest.dueAt)}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/teacher/homework/assignments/${latest.assignmentId}`}>Open</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/teacher/homework/assignments/${latest.assignmentId}/submissions`}>Submissions</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-5">
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Targeted</div>
|
||||
<div className="text-lg font-semibold">{latest.targetCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Submitted</div>
|
||||
<div className="text-lg font-semibold">{latest.submittedCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Graded</div>
|
||||
<div className="text-lg font-semibold">{latest.gradedCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Average</div>
|
||||
<div className="text-lg font-semibold">{formatNumber(latest.scoreStats.avg, 1)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Median</div>
|
||||
<div className="text-lg font-semibold">{formatNumber(latest.scoreStats.median, 1)}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="rounded-md border bg-card">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Assignment</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Due</TableHead>
|
||||
<TableHead className="text-right">Targeted</TableHead>
|
||||
<TableHead className="text-right">Submitted</TableHead>
|
||||
<TableHead className="text-right">Graded</TableHead>
|
||||
<TableHead className="text-right">Avg</TableHead>
|
||||
<TableHead className="text-right">Median</TableHead>
|
||||
<TableHead className="text-right">Min</TableHead>
|
||||
<TableHead className="text-right">Max</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{insights.assignments.map((a) => (
|
||||
<TableRow key={a.assignmentId}>
|
||||
<TableCell className="font-medium">
|
||||
<Link href={`/teacher/homework/assignments/${a.assignmentId}`} className="hover:underline">
|
||||
{a.title}
|
||||
</Link>
|
||||
<div className="text-xs text-muted-foreground">Created {formatDate(a.createdAt)}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{a.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
|
||||
<TableCell className="text-right">{a.targetCount}</TableCell>
|
||||
<TableCell className="text-right">{a.submittedCount}</TableCell>
|
||||
<TableCell className="text-right">{a.gradedCount}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(a.scoreStats.avg, 1)}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(a.scoreStats.median, 1)}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(a.scoreStats.min, 0)}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(a.scoreStats.max, 0)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function ClassInsightsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const classes = await getTeacherClasses()
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Class Insights</h2>
|
||||
<p className="text-muted-foreground">Latest homework and historical score statistics for a class.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
|
||||
<InsightsFilters classes={classes} />
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<InsightsResultsFallback />}>
|
||||
<InsightsResults searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
315
src/app/(dashboard)/teacher/classes/my/[id]/page.tsx
Normal file
315
src/app/(dashboard)/teacher/classes/my/[id]/page.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
|
||||
import { getClassHomeworkInsights, getClassSchedule, getClassStudents } from "@/modules/classes/data-access"
|
||||
import { ScheduleView } from "@/modules/classes/components/schedule-view"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
const formatNumber = (v: number | null, digits = 1) => {
|
||||
if (typeof v !== "number" || Number.isNaN(v)) return "-"
|
||||
return v.toFixed(digits)
|
||||
}
|
||||
|
||||
export default async function ClassDetailPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ id: string }>
|
||||
searchParams: Promise<SearchParams>
|
||||
}) {
|
||||
const { id } = await params
|
||||
const sp = await searchParams
|
||||
const hw = getParam(sp, "hw")
|
||||
const hwFilter = hw === "active" || hw === "overdue" ? hw : "all"
|
||||
|
||||
const [insights, students, schedule] = await Promise.all([
|
||||
getClassHomeworkInsights({ classId: id, limit: 50 }),
|
||||
getClassStudents({ classId: id }),
|
||||
getClassSchedule({ classId: id }),
|
||||
])
|
||||
|
||||
if (!insights) return notFound()
|
||||
|
||||
const latest = insights.latest
|
||||
const filteredAssignments = insights.assignments.filter((a) => {
|
||||
if (hwFilter === "all") return true
|
||||
if (hwFilter === "overdue") return a.isOverdue
|
||||
if (hwFilter === "active") return a.isActive
|
||||
return true
|
||||
})
|
||||
const hasAssignments = filteredAssignments.length > 0
|
||||
const scheduleBuilderClasses = [
|
||||
{
|
||||
id: insights.class.id,
|
||||
name: insights.class.name,
|
||||
grade: insights.class.grade,
|
||||
homeroom: insights.class.homeroom ?? null,
|
||||
room: insights.class.room ?? null,
|
||||
studentCount: insights.studentCounts.total,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/teacher/classes/my">Back</Link>
|
||||
</Button>
|
||||
<Badge variant="secondary">{insights.class.grade}</Badge>
|
||||
<Badge variant="outline">{insights.studentCounts.total} students</Badge>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">{insights.class.name}</h2>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{insights.class.room ? `Room: ${insights.class.room}` : "Room: Not set"}
|
||||
{insights.class.homeroom ? ` · Homeroom: ${insights.class.homeroom}` : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>Students</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>Schedule</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/teacher/classes/insights?classId=${encodeURIComponent(insights.class.id)}`}>Insights</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Students</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{insights.studentCounts.total}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Active {insights.studentCounts.active} · Inactive {insights.studentCounts.inactive}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Schedule items</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{schedule.length}</div>
|
||||
<div className="text-xs text-muted-foreground">Weekly timetable entries</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Assignments</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{insights.assignments.length}</div>
|
||||
<div className="text-xs text-muted-foreground">{latest ? `Latest ${formatDate(latest.createdAt)}` : "No homework yet"}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Overall avg</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{formatNumber(insights.overallScores.avg, 1)}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Median {formatNumber(insights.overallScores.median, 1)} · Count {insights.overallScores.count}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{latest ? (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">Latest homework</CardTitle>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<span className="font-medium text-foreground">{latest.title}</span>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{latest.status}
|
||||
</Badge>
|
||||
<span>·</span>
|
||||
<span>{formatDate(latest.createdAt)}</span>
|
||||
{latest.dueAt ? (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>Due {formatDate(latest.dueAt)}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/teacher/homework/assignments/${latest.assignmentId}`}>Open</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/teacher/homework/assignments/${latest.assignmentId}/submissions`}>Submissions</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-5">
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Targeted</div>
|
||||
<div className="text-lg font-semibold">{latest.targetCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Submitted</div>
|
||||
<div className="text-lg font-semibold">{latest.submittedCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Graded</div>
|
||||
<div className="text-lg font-semibold">{latest.gradedCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Average</div>
|
||||
<div className="text-lg font-semibold">{formatNumber(latest.scoreStats.avg, 1)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground">Median</div>
|
||||
<div className="text-lg font-semibold">{formatNumber(latest.scoreStats.median, 1)}</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base">Students (preview)</CardTitle>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/teacher/classes/students?classId=${encodeURIComponent(insights.class.id)}`}>View all</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{students.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">No students enrolled.</div>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{students.slice(0, 8).map((s) => (
|
||||
<TableRow key={s.id}>
|
||||
<TableCell className="font-medium">{s.name}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{s.email}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{s.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base">Schedule</CardTitle>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(insights.class.id)}`}>View all</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScheduleView schedule={schedule} classes={scheduleBuilderClasses} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<CardTitle className="text-base">Homework history</CardTitle>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button asChild size="sm" variant={hwFilter === "all" ? "secondary" : "outline"}>
|
||||
<Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}`}>All</Link>
|
||||
</Button>
|
||||
<Button asChild size="sm" variant={hwFilter === "active" ? "secondary" : "outline"}>
|
||||
<Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=active`}>Active</Link>
|
||||
</Button>
|
||||
<Button asChild size="sm" variant={hwFilter === "overdue" ? "secondary" : "outline"}>
|
||||
<Link href={`/teacher/classes/my/${encodeURIComponent(insights.class.id)}?hw=overdue`}>Overdue</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href={`/teacher/homework/assignments?classId=${encodeURIComponent(insights.class.id)}`}>Open list</Link>
|
||||
</Button>
|
||||
<Button asChild size="sm">
|
||||
<Link href={`/teacher/homework/assignments/create?classId=${encodeURIComponent(insights.class.id)}`}>New homework</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasAssignments ? (
|
||||
<div className="text-sm text-muted-foreground">No homework assignments yet.</div>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Assignment</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Due</TableHead>
|
||||
<TableHead className="text-right">Targeted</TableHead>
|
||||
<TableHead className="text-right">Submitted</TableHead>
|
||||
<TableHead className="text-right">Graded</TableHead>
|
||||
<TableHead className="text-right">Avg</TableHead>
|
||||
<TableHead className="text-right">Median</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredAssignments.map((a) => (
|
||||
<TableRow key={a.assignmentId}>
|
||||
<TableCell className="font-medium">
|
||||
<Link href={`/teacher/homework/assignments/${a.assignmentId}`} className="hover:underline">
|
||||
{a.title}
|
||||
</Link>
|
||||
<div className="text-xs text-muted-foreground">Created {formatDate(a.createdAt)}</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{a.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
|
||||
<TableCell className="text-right">{a.targetCount}</TableCell>
|
||||
<TableCell className="text-right">{a.submittedCount}</TableCell>
|
||||
<TableCell className="text-right">{a.gradedCount}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(a.scoreStats.avg, 1)}</TableCell>
|
||||
<TableCell className="text-right">{formatNumber(a.scoreStats.median, 1)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
32
src/app/(dashboard)/teacher/classes/my/loading.tsx
Normal file
32
src/app/(dashboard)/teacher/classes/my/loading.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-7 w-40" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</div>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, idx) => (
|
||||
<div key={idx} className="rounded-lg border bg-card p-6">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<Skeleton className="h-5 w-[60%]" />
|
||||
<Skeleton className="h-5 w-20" />
|
||||
</div>
|
||||
<Skeleton className="mt-3 h-4 w-32" />
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
<Skeleton className="h-5 w-16" />
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-2 gap-2">
|
||||
<Skeleton className="h-9 w-full" />
|
||||
<Skeleton className="h-9 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Users } from "lucide-react"
|
||||
import { getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { MyClassesGrid } from "@/modules/classes/components/my-classes-grid"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default function MyClassesPage() {
|
||||
return <MyClassesPageImpl />
|
||||
}
|
||||
|
||||
async function MyClassesPageImpl() {
|
||||
const classes = await getTeacherClasses()
|
||||
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">My Classes</h2>
|
||||
<p className="text-muted-foreground">
|
||||
@@ -12,11 +20,8 @@ export default function MyClassesPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState
|
||||
title="No classes found"
|
||||
description="You are not assigned to any classes yet."
|
||||
icon={Users}
|
||||
/>
|
||||
|
||||
<MyClassesGrid classes={classes} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
29
src/app/(dashboard)/teacher/classes/schedule/loading.tsx
Normal file
29
src/app/(dashboard)/teacher/classes/schedule/loading.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-7 w-40" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, idx) => (
|
||||
<div key={idx} className="rounded-lg border bg-card p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-5 w-16" />
|
||||
<Skeleton className="h-5 w-20" />
|
||||
</div>
|
||||
<div className="mt-6 space-y-3">
|
||||
<Skeleton className="h-4 w-[70%]" />
|
||||
<Skeleton className="h-4 w-[85%]" />
|
||||
<Skeleton className="h-4 w-[60%]" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,73 @@
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Suspense } from "react"
|
||||
import { Calendar } from "lucide-react"
|
||||
|
||||
export default function SchedulePage() {
|
||||
import { getClassSchedule, getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { ScheduleFilters } from "@/modules/classes/components/schedule-filters"
|
||||
import { ScheduleView } from "@/modules/classes/components/schedule-view"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
async function ScheduleResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
const classId = getParam(params, "classId")
|
||||
|
||||
const classes = await getTeacherClasses()
|
||||
const schedule = await getClassSchedule({
|
||||
classId: classId && classId !== "all" ? classId : undefined,
|
||||
})
|
||||
|
||||
const hasFilters = Boolean(classId && classId !== "all")
|
||||
|
||||
if (schedule.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={Calendar}
|
||||
title={hasFilters ? "No schedule for this class" : "No schedule available"}
|
||||
description={hasFilters ? "Try selecting another class." : "Your class schedule has not been set up yet."}
|
||||
action={hasFilters ? { label: "Clear filters", href: "/teacher/classes/schedule" } : undefined}
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <ScheduleView schedule={schedule} classes={classes} />
|
||||
}
|
||||
|
||||
function ScheduleResultsFallback() {
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, idx) => (
|
||||
<div key={idx} className="rounded-lg border bg-card p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-5 w-16" />
|
||||
<Skeleton className="h-5 w-20" />
|
||||
</div>
|
||||
<div className="mt-6 space-y-3">
|
||||
<Skeleton className="h-4 w-[70%]" />
|
||||
<Skeleton className="h-4 w-[85%]" />
|
||||
<Skeleton className="h-4 w-[60%]" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function SchedulePage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const classes = await getTeacherClasses()
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Schedule</h2>
|
||||
<p className="text-muted-foreground">
|
||||
@@ -12,11 +75,16 @@ export default function SchedulePage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState
|
||||
title="No schedule available"
|
||||
description="Your class schedule has not been set up yet."
|
||||
icon={Calendar}
|
||||
/>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
|
||||
<ScheduleFilters classes={classes} />
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<ScheduleResultsFallback />}>
|
||||
<ScheduleResults searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
21
src/app/(dashboard)/teacher/classes/students/loading.tsx
Normal file
21
src/app/(dashboard)/teacher/classes/students/loading.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-7 w-40" />
|
||||
<Skeleton className="h-4 w-72" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<div className="rounded-md border bg-card">
|
||||
<div className="space-y-2 p-4">
|
||||
{Array.from({ length: 10 }).map((_, idx) => (
|
||||
<Skeleton key={idx} className="h-10 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,74 @@
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Suspense } from "react"
|
||||
import { User } from "lucide-react"
|
||||
|
||||
export default function StudentsPage() {
|
||||
import { getClassStudents, getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { StudentsFilters } from "@/modules/classes/components/students-filters"
|
||||
import { StudentsTable } from "@/modules/classes/components/students-table"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
async function StudentsResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
|
||||
const q = getParam(params, "q") || undefined
|
||||
const classId = getParam(params, "classId")
|
||||
|
||||
const filteredStudents = await getClassStudents({
|
||||
q,
|
||||
classId: classId && classId !== "all" ? classId : undefined,
|
||||
})
|
||||
|
||||
const hasFilters = Boolean(q || (classId && classId !== "all"))
|
||||
|
||||
if (filteredStudents.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={User}
|
||||
title={hasFilters ? "No students match your filters" : "No students found"}
|
||||
description={hasFilters ? "Try clearing filters or adjusting keywords." : "There are no students in your classes yet."}
|
||||
action={hasFilters ? { label: "Clear filters", href: "/teacher/classes/students" } : undefined}
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<div className="rounded-md border bg-card">
|
||||
<StudentsTable students={filteredStudents} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StudentsResultsFallback() {
|
||||
return (
|
||||
<div className="rounded-md border bg-card">
|
||||
<div className="p-4">
|
||||
<Skeleton className="h-8 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2 p-4 pt-0">
|
||||
{Array.from({ length: 8 }).map((_, idx) => (
|
||||
<Skeleton key={idx} className="h-10 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function StudentsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const classes = await getTeacherClasses()
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Students</h2>
|
||||
<p className="text-muted-foreground">
|
||||
@@ -12,11 +76,16 @@ export default function StudentsPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<EmptyState
|
||||
title="No students found"
|
||||
description="There are no students in your classes yet."
|
||||
icon={User}
|
||||
/>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
|
||||
<StudentsFilters classes={classes} />
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<StudentsResultsFallback />}>
|
||||
<StudentsResults searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,28 +1,27 @@
|
||||
import { TeacherStats } from "@/modules/dashboard/components/teacher-stats";
|
||||
import { TeacherSchedule } from "@/modules/dashboard/components/teacher-schedule";
|
||||
import { RecentSubmissions } from "@/modules/dashboard/components/recent-submissions";
|
||||
import { TeacherQuickActions } from "@/modules/dashboard/components/teacher-quick-actions";
|
||||
import { TeacherDashboardView } from "@/modules/dashboard/components/teacher-dashboard/teacher-dashboard-view"
|
||||
import { getClassSchedule, getTeacherClasses, getTeacherIdForMutations } from "@/modules/classes/data-access";
|
||||
import { getHomeworkAssignments, getHomeworkSubmissions } from "@/modules/homework/data-access";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function TeacherDashboardPage() {
|
||||
const teacherId = await getTeacherIdForMutations();
|
||||
|
||||
const [classes, schedule, assignments, submissions] = await Promise.all([
|
||||
getTeacherClasses({ teacherId }),
|
||||
getClassSchedule({ teacherId }),
|
||||
getHomeworkAssignments({ creatorId: teacherId }),
|
||||
getHomeworkSubmissions({ creatorId: teacherId }),
|
||||
]);
|
||||
|
||||
export default function TeacherDashboardPage() {
|
||||
return (
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Teacher Dashboard</h2>
|
||||
<div className="flex items-center space-x-2">
|
||||
<TeacherQuickActions />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overview Stats */}
|
||||
<TeacherStats />
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
{/* Left Column: Schedule (3/7 width) */}
|
||||
<TeacherSchedule />
|
||||
|
||||
{/* Right Column: Recent Activity (4/7 width) */}
|
||||
<RecentSubmissions />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<TeacherDashboardView
|
||||
data={{
|
||||
classes,
|
||||
schedule,
|
||||
assignments,
|
||||
submissions,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
244
src/app/(dashboard)/teacher/grades/insights/page.tsx
Normal file
244
src/app/(dashboard)/teacher/grades/insights/page.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import { getTeacherIdForMutations } from "@/modules/classes/data-access"
|
||||
import { getGradeHomeworkInsights } from "@/modules/classes/data-access"
|
||||
import { getGradesForStaff } from "@/modules/school/data-access"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { BarChart3 } from "lucide-react"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
if (typeof v === "string") return v
|
||||
if (Array.isArray(v)) return v[0]
|
||||
return undefined
|
||||
}
|
||||
|
||||
const fmt = (v: number | null, digits = 1) => (typeof v === "number" && Number.isFinite(v) ? v.toFixed(digits) : "-")
|
||||
|
||||
export default async function TeacherGradeInsightsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
const gradeId = getParam(params, "gradeId")
|
||||
|
||||
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 insights = selected ? await getGradeHomeworkInsights({ gradeId: selected, limit: 50 }) : null
|
||||
|
||||
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">Grade Insights</h2>
|
||||
<p className="text-muted-foreground">View grade-level homework statistics for grades you lead.</p>
|
||||
</div>
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="No grades assigned"
|
||||
description="You are not assigned as a grade head or teaching head for any grade."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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">Grade Insights</h2>
|
||||
<p className="text-muted-foreground">Homework statistics aggregated across all classes in a grade.</p>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-base">Filters</CardTitle>
|
||||
<Badge variant="secondary" className="tabular-nums">
|
||||
{grades.length}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form action="/teacher/grades/insights" method="get" className="flex flex-col gap-3 md:flex-row md:items-center">
|
||||
<label className="text-sm font-medium">Grade</label>
|
||||
<select
|
||||
name="gradeId"
|
||||
defaultValue={selected || "all"}
|
||||
className="h-10 w-full rounded-md border bg-background px-3 text-sm md:w-[360px]"
|
||||
>
|
||||
<option value="all">Select a grade</option>
|
||||
{grades.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.school.name} / {g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button type="submit" className="md:ml-2">
|
||||
Apply
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{!selected ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="Select a grade to view insights"
|
||||
description="Pick a grade to see latest homework and historical score statistics."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
) : !insights ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="Grade not found"
|
||||
description="This grade may not exist or has no accessible data."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
) : insights.assignments.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="No homework data for this grade"
|
||||
description="No homework assignments were targeted to students in this grade yet."
|
||||
className="h-[360px] bg-card"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Classes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{insights.classCount}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{insights.grade.school.name} / {insights.grade.name}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Students</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{insights.studentCounts.total}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Active {insights.studentCounts.active} • Inactive {insights.studentCounts.inactive}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Overall Avg</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{fmt(insights.overallScores.avg)}</div>
|
||||
<div className="text-xs text-muted-foreground">Across graded homework</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Latest Avg</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{fmt(insights.latest?.scoreStats.avg ?? null)}</div>
|
||||
<div className="text-xs text-muted-foreground">{insights.latest ? insights.latest.title : "-"}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-base">Homework timeline</CardTitle>
|
||||
<Badge variant="secondary" className="tabular-nums">
|
||||
{insights.assignments.length}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead>Assignment</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead className="text-right">Targeted</TableHead>
|
||||
<TableHead className="text-right">Submitted</TableHead>
|
||||
<TableHead className="text-right">Graded</TableHead>
|
||||
<TableHead className="text-right">Avg</TableHead>
|
||||
<TableHead className="text-right">Median</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{insights.assignments.map((a) => (
|
||||
<TableRow key={a.assignmentId}>
|
||||
<TableCell className="font-medium">{a.title}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{a.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{formatDate(a.createdAt)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{a.targetCount}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{a.submittedCount}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{a.gradedCount}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(a.scoreStats.avg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(a.scoreStats.median)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle className="text-base">Class ranking</CardTitle>
|
||||
<Badge variant="secondary" className="tabular-nums">
|
||||
{insights.classes.length}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead>Class</TableHead>
|
||||
<TableHead className="text-right">Students</TableHead>
|
||||
<TableHead className="text-right">Latest Avg</TableHead>
|
||||
<TableHead className="text-right">Prev Avg</TableHead>
|
||||
<TableHead className="text-right">Δ</TableHead>
|
||||
<TableHead className="text-right">Overall Avg</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{insights.classes.map((c) => (
|
||||
<TableRow key={c.class.id}>
|
||||
<TableCell className="font-medium">
|
||||
{c.class.name}
|
||||
{c.class.homeroom ? <span className="text-muted-foreground"> • {c.class.homeroom}</span> : null}
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{c.studentCounts.total}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.latestAvg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.prevAvg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.deltaAvg)}</TableCell>
|
||||
<TableCell className="text-right tabular-nums">{fmt(c.overallScores.avg)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
import { getHomeworkAssignmentById } from "@/modules/homework/data-access"
|
||||
import { getHomeworkAssignmentAnalytics } from "@/modules/homework/data-access"
|
||||
import { HomeworkAssignmentExamContentCard } from "@/modules/homework/components/homework-assignment-exam-content-card"
|
||||
import { HomeworkAssignmentQuestionErrorDetailsCard } from "@/modules/homework/components/homework-assignment-question-error-details-card"
|
||||
import { HomeworkAssignmentQuestionErrorOverviewCard } from "@/modules/homework/components/homework-assignment-question-error-overview-card"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
@@ -10,9 +13,11 @@ export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function HomeworkAssignmentDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const assignment = await getHomeworkAssignmentById(id)
|
||||
const analytics = await getHomeworkAssignmentAnalytics(id)
|
||||
|
||||
if (!assignment) return notFound()
|
||||
if (!analytics) return notFound()
|
||||
|
||||
const { assignment, questions, gradedSampleCount } = analytics
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
@@ -69,12 +74,28 @@ export default async function HomeworkAssignmentDetailPage({ params }: { params:
|
||||
<div className="text-sm">
|
||||
<div className="font-medium">{assignment.dueAt ? formatDate(assignment.dueAt) : "—"}</div>
|
||||
<div className="text-muted-foreground">
|
||||
Late: {assignment.allowLate ? (assignment.lateDueAt ? formatDate(assignment.lateDueAt) : "Allowed") : "Not allowed"}
|
||||
Late:{" "}
|
||||
{assignment.allowLate
|
||||
? assignment.lateDueAt
|
||||
? formatDate(assignment.lateDueAt)
|
||||
: "Allowed"
|
||||
: "Not allowed"}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<HomeworkAssignmentQuestionErrorOverviewCard questions={questions} gradedSampleCount={gradedSampleCount} />
|
||||
<HomeworkAssignmentQuestionErrorDetailsCard questions={questions} gradedSampleCount={gradedSampleCount} />
|
||||
</div>
|
||||
|
||||
<HomeworkAssignmentExamContentCard
|
||||
structure={assignment.structure}
|
||||
questions={questions}
|
||||
gradedSampleCount={gradedSampleCount}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -28,10 +28,22 @@ export default async function HomeworkAssignmentSubmissionsPage({ params }: { pa
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Submissions</h2>
|
||||
<p className="text-muted-foreground">{assignment.title}</p>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Exam: {assignment.sourceExamTitle}</span>
|
||||
<span>•</span>
|
||||
<span>Targets: {assignment.targetCount}</span>
|
||||
<span>•</span>
|
||||
<span>Submitted: {assignment.submittedCount}</span>
|
||||
<span>•</span>
|
||||
<span>Graded: {assignment.gradedCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/teacher/homework/assignments/${id}`}>Back</Link>
|
||||
<Link href="/teacher/homework/submissions">Back</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/teacher/homework/assignments/${id}`}>Open Assignment</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { HomeworkAssignmentForm } from "@/modules/homework/components/homework-assignment-form"
|
||||
import { getExams } from "@/modules/exams/data-access"
|
||||
import { getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { FileQuestion } from "lucide-react"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function CreateHomeworkAssignmentPage() {
|
||||
const exams = await getExams({})
|
||||
const [exams, classes] = await Promise.all([getExams({}), getTeacherClasses()])
|
||||
const options = exams.map((e) => ({ id: e.id, title: e.title }))
|
||||
|
||||
return (
|
||||
@@ -25,8 +26,15 @@ export default async function CreateHomeworkAssignmentPage() {
|
||||
icon={FileQuestion}
|
||||
action={{ label: "Create Exam", href: "/teacher/exams/create" }}
|
||||
/>
|
||||
) : classes.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No classes available"
|
||||
description="Create a class first, then publish homework to that class."
|
||||
icon={FileQuestion}
|
||||
action={{ label: "Go to Classes", href: "/teacher/classes/my" }}
|
||||
/>
|
||||
) : (
|
||||
<HomeworkAssignmentForm exams={options} />
|
||||
<HomeworkAssignmentForm exams={options} classes={classes} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -12,13 +12,28 @@ import {
|
||||
} from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import { getHomeworkAssignments } from "@/modules/homework/data-access"
|
||||
import { getTeacherClasses } from "@/modules/classes/data-access"
|
||||
import { PenTool, PlusCircle } from "lucide-react"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function AssignmentsPage() {
|
||||
const assignments = await getHomeworkAssignments()
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
export default async function AssignmentsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const sp = await searchParams
|
||||
const classId = getParam(sp, "classId") || undefined
|
||||
|
||||
const [assignments, classes] = await Promise.all([
|
||||
getHomeworkAssignments({ classId: classId && classId !== "all" ? classId : undefined }),
|
||||
classId && classId !== "all" ? getTeacherClasses() : Promise.resolve([]),
|
||||
])
|
||||
const hasAssignments = assignments.length > 0
|
||||
const className = classId && classId !== "all" ? classes.find((c) => c.id === classId)?.name : undefined
|
||||
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
@@ -26,25 +41,41 @@ export default async function AssignmentsPage() {
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Assignments</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Manage homework assignments.
|
||||
{classId && classId !== "all" ? `Filtered by class: ${className ?? classId}` : "Manage homework assignments."}
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<Link href="/teacher/homework/assignments/create">
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
Create Assignment
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
{classId && classId !== "all" ? (
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/teacher/homework/assignments">Clear filter</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button asChild>
|
||||
<Link
|
||||
href={
|
||||
classId && classId !== "all"
|
||||
? `/teacher/homework/assignments/create?classId=${encodeURIComponent(classId)}`
|
||||
: "/teacher/homework/assignments/create"
|
||||
}
|
||||
>
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
Create Assignment
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!hasAssignments ? (
|
||||
<EmptyState
|
||||
title="No assignments"
|
||||
description="You haven't created any assignments yet."
|
||||
description={classId && classId !== "all" ? "No assignments for this class yet." : "You haven't created any assignments yet."}
|
||||
icon={PenTool}
|
||||
action={{
|
||||
label: "Create Assignment",
|
||||
href: "/teacher/homework/assignments/create",
|
||||
href:
|
||||
classId && classId !== "all"
|
||||
? `/teacher/homework/assignments/create?classId=${encodeURIComponent(classId)}`
|
||||
: "/teacher/homework/assignments/create",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -10,14 +10,16 @@ import {
|
||||
TableRow,
|
||||
} from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import { getHomeworkSubmissions } from "@/modules/homework/data-access"
|
||||
import { getHomeworkAssignmentReviewList } from "@/modules/homework/data-access"
|
||||
import { Inbox } from "lucide-react"
|
||||
import { getTeacherIdForMutations } from "@/modules/classes/data-access"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function SubmissionsPage() {
|
||||
const submissions = await getHomeworkSubmissions()
|
||||
const hasSubmissions = submissions.length > 0
|
||||
const creatorId = await getTeacherIdForMutations()
|
||||
const assignments = await getHomeworkAssignmentReviewList({ creatorId })
|
||||
const hasAssignments = assignments.length > 0
|
||||
|
||||
return (
|
||||
<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
|
||||
@@ -25,15 +27,15 @@ export default async function SubmissionsPage() {
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Submissions</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Review student homework submissions.
|
||||
Review homework by assignment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!hasSubmissions ? (
|
||||
{!hasAssignments ? (
|
||||
<EmptyState
|
||||
title="No submissions"
|
||||
description="There are no homework submissions to review."
|
||||
title="No assignments"
|
||||
description="There are no homework assignments to review yet."
|
||||
icon={Inbox}
|
||||
/>
|
||||
) : (
|
||||
@@ -42,29 +44,31 @@ export default async function SubmissionsPage() {
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Assignment</TableHead>
|
||||
<TableHead>Student</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Submitted</TableHead>
|
||||
<TableHead>Score</TableHead>
|
||||
<TableHead>Due</TableHead>
|
||||
<TableHead className="text-right">Targets</TableHead>
|
||||
<TableHead className="text-right">Submitted</TableHead>
|
||||
<TableHead className="text-right">Graded</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{submissions.map((s) => (
|
||||
<TableRow key={s.id}>
|
||||
{assignments.map((a) => (
|
||||
<TableRow key={a.id}>
|
||||
<TableCell className="font-medium">
|
||||
<Link href={`/teacher/homework/submissions/${s.id}`} className="hover:underline">
|
||||
{s.assignmentTitle}
|
||||
<Link href={`/teacher/homework/assignments/${a.id}/submissions`} className="hover:underline">
|
||||
{a.title}
|
||||
</Link>
|
||||
<div className="text-xs text-muted-foreground">{a.sourceExamTitle}</div>
|
||||
</TableCell>
|
||||
<TableCell>{s.studentName}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{s.status}
|
||||
{a.status}
|
||||
</Badge>
|
||||
{s.isLate ? <span className="ml-2 text-xs text-destructive">Late</span> : null}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{s.submittedAt ? formatDate(s.submittedAt) : "-"}</TableCell>
|
||||
<TableCell>{typeof s.score === "number" ? s.score : "-"}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
|
||||
<TableCell className="text-right">{a.targetCount}</TableCell>
|
||||
<TableCell className="text-right">{a.submittedCount}</TableCell>
|
||||
<TableCell className="text-right">{a.gradedCount}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { ArrowLeft, Edit } from "lucide-react";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { getTextbookById, getChaptersByTextbookId, getKnowledgePointsByChapterId } from "@/modules/textbooks/data-access";
|
||||
import { getTextbookById, getChaptersByTextbookId, getKnowledgePointsByTextbookId } from "@/modules/textbooks/data-access";
|
||||
import { TextbookContentLayout } from "@/modules/textbooks/components/textbook-content-layout";
|
||||
import { TextbookSettingsDialog } from "@/modules/textbooks/components/textbook-settings-dialog";
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
export default async function TextbookDetailPage({
|
||||
params,
|
||||
}: {
|
||||
@@ -14,36 +16,16 @@ export default async function TextbookDetailPage({
|
||||
}) {
|
||||
const { id } = await params;
|
||||
|
||||
const [textbook, chapters] = await Promise.all([
|
||||
const [textbook, chapters, knowledgePoints] = await Promise.all([
|
||||
getTextbookById(id),
|
||||
getChaptersByTextbookId(id),
|
||||
getKnowledgePointsByTextbookId(id),
|
||||
]);
|
||||
|
||||
if (!textbook) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Fetch all KPs for these chapters. In a real app, this might be optimized to fetch only needed or use a different query strategy.
|
||||
// For now, we simulate fetching KPs for all chapters to pass down, or we could fetch on demand.
|
||||
// Given the layout loads everything client-side for interactivity, let's fetch all KPs associated with any chapter in this textbook.
|
||||
// We'll need to extend the data access for this specific query pattern or loop.
|
||||
// For simplicity in this mock, let's assume getKnowledgePointsByChapterId can handle fetching all KPs for a textbook if we had such a function,
|
||||
// or we iterate. Let's create a helper to get all KPs for the textbook's chapters.
|
||||
|
||||
// Actually, let's update data-access to support getting KPs by Textbook ID directly or just fetch all for mock.
|
||||
// Since we don't have getKnowledgePointsByTextbookId, we will map over chapters.
|
||||
|
||||
const allKnowledgePoints = (await Promise.all(
|
||||
chapters.map(c => getKnowledgePointsByChapterId(c.id))
|
||||
)).flat();
|
||||
|
||||
// Also need to get KPs for children chapters if any
|
||||
const childrenKPs = (await Promise.all(
|
||||
chapters.flatMap(c => c.children || []).map(child => getKnowledgePointsByChapterId(child.id))
|
||||
)).flat();
|
||||
|
||||
const knowledgePoints = [...allKnowledgePoints, ...childrenKPs];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
|
||||
{/* Header / Nav (Fixed height) */}
|
||||
|
||||
@@ -1,20 +1,53 @@
|
||||
import { Search, Filter } from "lucide-react";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select";
|
||||
import { Suspense } from "react"
|
||||
import { BookOpen } from "lucide-react"
|
||||
import { TextbookCard } from "@/modules/textbooks/components/textbook-card";
|
||||
import { TextbookFormDialog } from "@/modules/textbooks/components/textbook-form-dialog";
|
||||
import { getTextbooks } from "@/modules/textbooks/data-access";
|
||||
import { TextbookFilters } from "@/modules/textbooks/components/textbook-filters"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
|
||||
export default async function TextbooksPage() {
|
||||
// In a real app, we would parse searchParams here
|
||||
const textbooks = await getTextbooks();
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParams = { [key: string]: string | string[] | undefined }
|
||||
|
||||
const getParam = (params: SearchParams, key: string) => {
|
||||
const v = params[key]
|
||||
return Array.isArray(v) ? v[0] : v
|
||||
}
|
||||
|
||||
async function TextbooksResults({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
|
||||
const q = getParam(params, "q") || undefined
|
||||
const subject = getParam(params, "subject")
|
||||
const grade = getParam(params, "grade")
|
||||
|
||||
const textbooks = await getTextbooks(q, subject || undefined, grade || undefined)
|
||||
|
||||
const hasFilters = Boolean(q || (subject && subject !== "all") || (grade && grade !== "all"))
|
||||
|
||||
if (textbooks.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={BookOpen}
|
||||
title={hasFilters ? "No textbooks match your filters" : "No textbooks yet"}
|
||||
description={hasFilters ? "Try clearing filters or adjusting keywords." : "Create your first textbook to start organizing chapters."}
|
||||
action={hasFilters ? { label: "Clear filters", href: "/teacher/textbooks" } : undefined}
|
||||
className="bg-card"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{textbooks.map((textbook) => (
|
||||
<TextbookCard key={textbook.id} textbook={textbook} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function TextbooksPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -29,50 +62,13 @@ export default async function TextbooksPage() {
|
||||
<TextbookFormDialog />
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center justify-between bg-card p-4 rounded-lg border shadow-sm">
|
||||
<div className="relative w-full md:w-96">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search textbooks..."
|
||||
className="pl-9 bg-background"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Select>
|
||||
<SelectTrigger className="w-[140px] bg-background">
|
||||
<Filter className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<SelectValue placeholder="Subject" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Subjects</SelectItem>
|
||||
<SelectItem value="math">Mathematics</SelectItem>
|
||||
<SelectItem value="physics">Physics</SelectItem>
|
||||
<SelectItem value="history">History</SelectItem>
|
||||
<SelectItem value="english">English</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select>
|
||||
<SelectTrigger className="w-[140px] bg-background">
|
||||
<SelectValue placeholder="Grade" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Grades</SelectItem>
|
||||
<SelectItem value="10">Grade 10</SelectItem>
|
||||
<SelectItem value="11">Grade 11</SelectItem>
|
||||
<SelectItem value="12">Grade 12</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Suspense fallback={<div className="h-14 w-full animate-pulse rounded-lg bg-muted" />}>
|
||||
<TextbookFilters />
|
||||
</Suspense>
|
||||
|
||||
{/* Grid Content */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
{textbooks.map((textbook) => (
|
||||
<TextbookCard key={textbook.id} textbook={textbook} />
|
||||
))}
|
||||
</div>
|
||||
<Suspense fallback={<div className="h-[360px] w-full animate-pulse rounded-md bg-muted" />}>
|
||||
<TextbooksResults searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
4
src/app/api/auth/[...nextauth]/route.ts
Normal file
4
src/app/api/auth/[...nextauth]/route.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import { handlers } from "@/auth"
|
||||
|
||||
export const { GET, POST } = handlers
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@plugin "tailwindcss-animate";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
|
||||
import { ThemeProvider } from "@/shared/components/theme-provider";
|
||||
import { Toaster } from "@/shared/components/ui/sonner";
|
||||
import { NuqsAdapter } from 'nuqs/adapters/next/app'
|
||||
import { AuthSessionProvider } from "@/shared/components/auth-session-provider"
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -25,9 +26,11 @@ export default function RootLayout({
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<NuqsAdapter>
|
||||
{children}
|
||||
</NuqsAdapter>
|
||||
<AuthSessionProvider>
|
||||
<NuqsAdapter>
|
||||
{children}
|
||||
</NuqsAdapter>
|
||||
</AuthSessionProvider>
|
||||
<Toaster />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
|
||||
61
src/auth.ts
Normal file
61
src/auth.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import NextAuth from "next-auth"
|
||||
import Credentials from "next-auth/providers/credentials"
|
||||
|
||||
export const { handlers, auth, signIn, signOut } = NextAuth({
|
||||
session: { strategy: "jwt" },
|
||||
pages: { signIn: "/login" },
|
||||
providers: [
|
||||
Credentials({
|
||||
credentials: {
|
||||
email: { label: "Email", type: "email" },
|
||||
password: { label: "Password", type: "password" },
|
||||
},
|
||||
authorize: async (credentials) => {
|
||||
const email = String(credentials?.email ?? "").trim().toLowerCase()
|
||||
const password = String(credentials?.password ?? "")
|
||||
if (!email || !password) return null
|
||||
|
||||
const [{ eq }, { db }, { users }] = await Promise.all([
|
||||
import("drizzle-orm"),
|
||||
import("@/shared/db"),
|
||||
import("@/shared/db/schema"),
|
||||
])
|
||||
|
||||
const user = await db.query.users.findFirst({
|
||||
where: eq(users.email, email),
|
||||
})
|
||||
if (!user) return null
|
||||
|
||||
const storedPassword = user.password ?? null
|
||||
if (storedPassword) {
|
||||
if (storedPassword !== password) return null
|
||||
} else if (process.env.NODE_ENV === "production") {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
id: user.id,
|
||||
name: user.name ?? undefined,
|
||||
email: user.email,
|
||||
role: (user.role ?? "student") as string,
|
||||
}
|
||||
},
|
||||
}),
|
||||
],
|
||||
callbacks: {
|
||||
jwt: async ({ token, user }) => {
|
||||
if (user) {
|
||||
token.id = (user as { id: string }).id
|
||||
token.role = (user as { role?: string }).role ?? "student"
|
||||
}
|
||||
return token
|
||||
},
|
||||
session: async ({ session, token }) => {
|
||||
if (session.user) {
|
||||
session.user.id = String(token.id ?? "")
|
||||
session.user.role = String(token.role ?? "student")
|
||||
}
|
||||
return session
|
||||
},
|
||||
},
|
||||
})
|
||||
44
src/middleware.ts
Normal file
44
src/middleware.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { NextResponse } from "next/server"
|
||||
import type { NextAuthRequest } from "next-auth"
|
||||
|
||||
import { auth } from "./auth"
|
||||
|
||||
function roleHome(role: string) {
|
||||
if (role === "admin") return "/admin/dashboard"
|
||||
if (role === "student") return "/student/dashboard"
|
||||
if (role === "parent") return "/parent/dashboard"
|
||||
return "/teacher/dashboard"
|
||||
}
|
||||
|
||||
export default auth((req: NextAuthRequest) => {
|
||||
const { pathname } = req.nextUrl
|
||||
const session = req.auth
|
||||
|
||||
if (!session?.user) {
|
||||
const url = req.nextUrl.clone()
|
||||
url.pathname = "/login"
|
||||
url.searchParams.set("callbackUrl", pathname)
|
||||
return NextResponse.redirect(url)
|
||||
}
|
||||
|
||||
const role = String(session.user.role ?? "teacher")
|
||||
|
||||
if (pathname.startsWith("/admin/") && role !== "admin") {
|
||||
return NextResponse.redirect(new URL(roleHome(role), req.url))
|
||||
}
|
||||
if (pathname.startsWith("/teacher/") && role !== "teacher") {
|
||||
return NextResponse.redirect(new URL(roleHome(role), req.url))
|
||||
}
|
||||
if (pathname.startsWith("/student/") && role !== "student") {
|
||||
return NextResponse.redirect(new URL(roleHome(role), req.url))
|
||||
}
|
||||
if (pathname.startsWith("/parent/") && role !== "parent") {
|
||||
return NextResponse.redirect(new URL(roleHome(role), req.url))
|
||||
}
|
||||
|
||||
return NextResponse.next()
|
||||
})
|
||||
|
||||
export const config = {
|
||||
matcher: ["/dashboard", "/admin/:path*", "/teacher/:path*", "/student/:path*", "/parent/:path*", "/settings/:path*", "/profile"],
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import Link from "next/link"
|
||||
import { GraduationCap } from "lucide-react"
|
||||
|
||||
interface AuthLayoutProps {
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
import * as React from "react"
|
||||
import Link from "next/link"
|
||||
import { useRouter, useSearchParams } from "next/navigation"
|
||||
import { signIn } from "next-auth/react"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
@@ -12,14 +14,32 @@ type LoginFormProps = React.HTMLAttributes<HTMLDivElement>
|
||||
|
||||
export function LoginForm({ className, ...props }: LoginFormProps) {
|
||||
const [isLoading, setIsLoading] = React.useState<boolean>(false)
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
async function onSubmit(event: React.SyntheticEvent) {
|
||||
event.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
setTimeout(() => {
|
||||
setIsLoading(false)
|
||||
}, 3000)
|
||||
const form = event.currentTarget as HTMLFormElement
|
||||
const formData = new FormData(form)
|
||||
const email = String(formData.get("email") ?? "")
|
||||
const password = String(formData.get("password") ?? "")
|
||||
const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard"
|
||||
|
||||
const result = await signIn("credentials", {
|
||||
redirect: false,
|
||||
email,
|
||||
password,
|
||||
callbackUrl,
|
||||
})
|
||||
|
||||
setIsLoading(false)
|
||||
|
||||
if (!result?.error) {
|
||||
router.push(result?.url ?? callbackUrl)
|
||||
router.refresh()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -38,6 +58,7 @@ export function LoginForm({ className, ...props }: LoginFormProps) {
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
autoCapitalize="none"
|
||||
@@ -58,6 +79,7 @@ export function LoginForm({ className, ...props }: LoginFormProps) {
|
||||
</div>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
disabled={isLoading}
|
||||
|
||||
434
src/modules/classes/actions.ts
Normal file
434
src/modules/classes/actions.ts
Normal file
@@ -0,0 +1,434 @@
|
||||
"use server";
|
||||
|
||||
import { revalidatePath } from "next/cache"
|
||||
import { auth } from "@/auth"
|
||||
|
||||
import type { ActionState } from "@/shared/types/action-state"
|
||||
import {
|
||||
createAdminClass,
|
||||
createClassScheduleItem,
|
||||
createTeacherClass,
|
||||
deleteAdminClass,
|
||||
deleteClassScheduleItem,
|
||||
deleteTeacherClass,
|
||||
enrollStudentByEmail,
|
||||
enrollStudentByInvitationCode,
|
||||
ensureClassInvitationCode,
|
||||
regenerateClassInvitationCode,
|
||||
setClassSubjectTeachers,
|
||||
setStudentEnrollmentStatus,
|
||||
updateAdminClass,
|
||||
updateClassScheduleItem,
|
||||
updateTeacherClass,
|
||||
} from "./data-access"
|
||||
import { DEFAULT_CLASS_SUBJECTS, type ClassSubject } from "./types"
|
||||
|
||||
const isClassSubject = (v: string): v is ClassSubject => DEFAULT_CLASS_SUBJECTS.includes(v as ClassSubject)
|
||||
|
||||
export async function createTeacherClassAction(
|
||||
prevState: ActionState<string> | null,
|
||||
formData: FormData
|
||||
): Promise<ActionState<string>> {
|
||||
const schoolName = formData.get("schoolName")
|
||||
const schoolId = formData.get("schoolId")
|
||||
const name = formData.get("name")
|
||||
const grade = formData.get("grade")
|
||||
const gradeId = formData.get("gradeId")
|
||||
const homeroom = formData.get("homeroom")
|
||||
const room = formData.get("room")
|
||||
|
||||
if (typeof name !== "string" || name.trim().length === 0) {
|
||||
return { success: false, message: "Class name is required" }
|
||||
}
|
||||
if (typeof grade !== "string" || grade.trim().length === 0) {
|
||||
return { success: false, message: "Grade is required" }
|
||||
}
|
||||
|
||||
try {
|
||||
const id = await createTeacherClass({
|
||||
schoolName: typeof schoolName === "string" ? schoolName : null,
|
||||
schoolId: typeof schoolId === "string" ? schoolId : null,
|
||||
name,
|
||||
grade,
|
||||
gradeId: typeof gradeId === "string" ? gradeId : null,
|
||||
homeroom: typeof homeroom === "string" ? homeroom : null,
|
||||
room: typeof room === "string" ? room : null,
|
||||
})
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Class created successfully", data: id }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to create class" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateTeacherClassAction(
|
||||
classId: string,
|
||||
prevState: ActionState | null,
|
||||
formData: FormData
|
||||
): Promise<ActionState> {
|
||||
const schoolName = formData.get("schoolName")
|
||||
const schoolId = formData.get("schoolId")
|
||||
const name = formData.get("name")
|
||||
const grade = formData.get("grade")
|
||||
const gradeId = formData.get("gradeId")
|
||||
const homeroom = formData.get("homeroom")
|
||||
const room = formData.get("room")
|
||||
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Missing class id" }
|
||||
}
|
||||
|
||||
try {
|
||||
await updateTeacherClass(classId, {
|
||||
schoolName: typeof schoolName === "string" ? schoolName : undefined,
|
||||
schoolId: typeof schoolId === "string" ? schoolId : undefined,
|
||||
name: typeof name === "string" ? name : undefined,
|
||||
grade: typeof grade === "string" ? grade : undefined,
|
||||
gradeId: typeof gradeId === "string" ? gradeId : undefined,
|
||||
homeroom: typeof homeroom === "string" ? homeroom : undefined,
|
||||
room: typeof room === "string" ? room : undefined,
|
||||
})
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Class updated successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to update class" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteTeacherClassAction(classId: string): Promise<ActionState> {
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Missing class id" }
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteTeacherClass(classId)
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Class deleted successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to delete class" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function enrollStudentByEmailAction(
|
||||
classId: string,
|
||||
prevState: ActionState | null,
|
||||
formData: FormData
|
||||
): Promise<ActionState> {
|
||||
const email = formData.get("email")
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Please select a class" }
|
||||
}
|
||||
if (typeof email !== "string" || email.trim().length === 0) {
|
||||
return { success: false, message: "Student email is required" }
|
||||
}
|
||||
|
||||
try {
|
||||
await enrollStudentByEmail(classId, email)
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/my")
|
||||
return { success: true, message: "Student added successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to add student" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function joinClassByInvitationCodeAction(
|
||||
prevState: ActionState<{ classId: string }> | null,
|
||||
formData: FormData
|
||||
): Promise<ActionState<{ classId: string }>> {
|
||||
const code = formData.get("code")
|
||||
if (typeof code !== "string" || code.trim().length === 0) {
|
||||
return { success: false, message: "Invitation code is required" }
|
||||
}
|
||||
|
||||
const session = await auth()
|
||||
if (!session?.user?.id || String(session.user.role ?? "") !== "student") {
|
||||
return { success: false, message: "Unauthorized" }
|
||||
}
|
||||
|
||||
try {
|
||||
const classId = await enrollStudentByInvitationCode(session.user.id, code)
|
||||
revalidatePath("/student/learning/courses")
|
||||
revalidatePath("/student/schedule")
|
||||
revalidatePath("/profile")
|
||||
return { success: true, message: "Joined class successfully", data: { classId } }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to join class" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function ensureClassInvitationCodeAction(classId: string): Promise<ActionState<{ code: string }>> {
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Missing class id" }
|
||||
}
|
||||
|
||||
try {
|
||||
const code = await ensureClassInvitationCode(classId)
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath(`/teacher/classes/my/${encodeURIComponent(classId)}`)
|
||||
return { success: true, message: "Invitation code ready", data: { code } }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to generate code" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function regenerateClassInvitationCodeAction(classId: string): Promise<ActionState<{ code: string }>> {
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Missing class id" }
|
||||
}
|
||||
|
||||
try {
|
||||
const code = await regenerateClassInvitationCode(classId)
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath(`/teacher/classes/my/${encodeURIComponent(classId)}`)
|
||||
return { success: true, message: "Invitation code updated", data: { code } }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to regenerate code" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function setStudentEnrollmentStatusAction(
|
||||
classId: string,
|
||||
studentId: string,
|
||||
status: "active" | "inactive"
|
||||
): Promise<ActionState> {
|
||||
if (!classId?.trim() || !studentId?.trim()) {
|
||||
return { success: false, message: "Missing enrollment info" }
|
||||
}
|
||||
|
||||
try {
|
||||
await setStudentEnrollmentStatus(classId, studentId, status)
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/my")
|
||||
return { success: true, message: "Student updated successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to update student" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function createClassScheduleItemAction(
|
||||
prevState: ActionState<string> | null,
|
||||
formData: FormData
|
||||
): Promise<ActionState<string>> {
|
||||
const classId = formData.get("classId")
|
||||
const weekday = formData.get("weekday")
|
||||
const startTime = formData.get("startTime")
|
||||
const endTime = formData.get("endTime")
|
||||
const course = formData.get("course")
|
||||
const location = formData.get("location")
|
||||
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Please select a class" }
|
||||
}
|
||||
if (typeof weekday !== "string" || weekday.trim().length === 0) {
|
||||
return { success: false, message: "Weekday is required" }
|
||||
}
|
||||
const weekdayNum = Number(weekday)
|
||||
if (!Number.isInteger(weekdayNum) || weekdayNum < 1 || weekdayNum > 7) {
|
||||
return { success: false, message: "Invalid weekday" }
|
||||
}
|
||||
if (typeof course !== "string" || course.trim().length === 0) {
|
||||
return { success: false, message: "Course is required" }
|
||||
}
|
||||
if (typeof startTime !== "string" || typeof endTime !== "string") {
|
||||
return { success: false, message: "Time is required" }
|
||||
}
|
||||
|
||||
try {
|
||||
const id = await createClassScheduleItem({
|
||||
classId,
|
||||
weekday: weekdayNum as 1 | 2 | 3 | 4 | 5 | 6 | 7,
|
||||
startTime,
|
||||
endTime,
|
||||
course,
|
||||
location: typeof location === "string" ? location : null,
|
||||
})
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Schedule item created successfully", data: id }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to create schedule item" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateClassScheduleItemAction(
|
||||
scheduleId: string,
|
||||
prevState: ActionState | null,
|
||||
formData: FormData
|
||||
): Promise<ActionState> {
|
||||
const classId = formData.get("classId")
|
||||
const weekday = formData.get("weekday")
|
||||
const startTime = formData.get("startTime")
|
||||
const endTime = formData.get("endTime")
|
||||
const course = formData.get("course")
|
||||
const location = formData.get("location")
|
||||
|
||||
if (typeof scheduleId !== "string" || scheduleId.trim().length === 0) {
|
||||
return { success: false, message: "Missing schedule id" }
|
||||
}
|
||||
|
||||
const weekdayNum = typeof weekday === "string" && weekday.trim().length > 0 ? Number(weekday) : undefined
|
||||
if (weekdayNum !== undefined && (!Number.isInteger(weekdayNum) || weekdayNum < 1 || weekdayNum > 7)) {
|
||||
return { success: false, message: "Invalid weekday" }
|
||||
}
|
||||
|
||||
try {
|
||||
await updateClassScheduleItem(scheduleId, {
|
||||
classId: typeof classId === "string" ? classId : undefined,
|
||||
weekday: weekdayNum as 1 | 2 | 3 | 4 | 5 | 6 | 7 | undefined,
|
||||
startTime: typeof startTime === "string" ? startTime : undefined,
|
||||
endTime: typeof endTime === "string" ? endTime : undefined,
|
||||
course: typeof course === "string" ? course : undefined,
|
||||
location: typeof location === "string" ? location : undefined,
|
||||
})
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Schedule item updated successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to update schedule item" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteClassScheduleItemAction(scheduleId: string): Promise<ActionState> {
|
||||
if (typeof scheduleId !== "string" || scheduleId.trim().length === 0) {
|
||||
return { success: false, message: "Missing schedule id" }
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteClassScheduleItem(scheduleId)
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Schedule item deleted successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to delete schedule item" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function createAdminClassAction(
|
||||
prevState: ActionState<string> | undefined,
|
||||
formData: FormData
|
||||
): Promise<ActionState<string>> {
|
||||
const schoolName = formData.get("schoolName")
|
||||
const schoolId = formData.get("schoolId")
|
||||
const name = formData.get("name")
|
||||
const grade = formData.get("grade")
|
||||
const gradeId = formData.get("gradeId")
|
||||
const teacherId = formData.get("teacherId")
|
||||
const homeroom = formData.get("homeroom")
|
||||
const room = formData.get("room")
|
||||
|
||||
if (typeof name !== "string" || name.trim().length === 0) {
|
||||
return { success: false, message: "Class name is required" }
|
||||
}
|
||||
if (typeof grade !== "string" || grade.trim().length === 0) {
|
||||
return { success: false, message: "Grade is required" }
|
||||
}
|
||||
if (typeof teacherId !== "string" || teacherId.trim().length === 0) {
|
||||
return { success: false, message: "Teacher is required" }
|
||||
}
|
||||
|
||||
try {
|
||||
const id = await createAdminClass({
|
||||
schoolName: typeof schoolName === "string" ? schoolName : null,
|
||||
schoolId: typeof schoolId === "string" ? schoolId : null,
|
||||
name,
|
||||
grade,
|
||||
gradeId: typeof gradeId === "string" ? gradeId : null,
|
||||
teacherId,
|
||||
homeroom: typeof homeroom === "string" ? homeroom : null,
|
||||
room: typeof room === "string" ? room : null,
|
||||
})
|
||||
revalidatePath("/admin/school/classes")
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Class created successfully", data: id }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to create class" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateAdminClassAction(
|
||||
classId: string,
|
||||
prevState: ActionState | undefined,
|
||||
formData: FormData
|
||||
): Promise<ActionState> {
|
||||
const schoolName = formData.get("schoolName")
|
||||
const schoolId = formData.get("schoolId")
|
||||
const name = formData.get("name")
|
||||
const grade = formData.get("grade")
|
||||
const gradeId = formData.get("gradeId")
|
||||
const teacherId = formData.get("teacherId")
|
||||
const homeroom = formData.get("homeroom")
|
||||
const room = formData.get("room")
|
||||
const subjectTeachers = formData.get("subjectTeachers")
|
||||
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Missing class id" }
|
||||
}
|
||||
|
||||
try {
|
||||
await updateAdminClass(classId, {
|
||||
schoolName: typeof schoolName === "string" ? schoolName : undefined,
|
||||
schoolId: typeof schoolId === "string" ? schoolId : undefined,
|
||||
name: typeof name === "string" ? name : undefined,
|
||||
grade: typeof grade === "string" ? grade : undefined,
|
||||
gradeId: typeof gradeId === "string" ? gradeId : undefined,
|
||||
teacherId: typeof teacherId === "string" ? teacherId : undefined,
|
||||
homeroom: typeof homeroom === "string" ? homeroom : undefined,
|
||||
room: typeof room === "string" ? room : undefined,
|
||||
})
|
||||
|
||||
if (typeof subjectTeachers === "string" && subjectTeachers.trim().length > 0) {
|
||||
const parsed = JSON.parse(subjectTeachers) as unknown
|
||||
if (!Array.isArray(parsed)) throw new Error("Invalid subject teachers")
|
||||
|
||||
await setClassSubjectTeachers({
|
||||
classId,
|
||||
assignments: parsed.flatMap((item) => {
|
||||
if (!item || typeof item !== "object") return []
|
||||
const subject = (item as { subject?: unknown }).subject
|
||||
const teacherId = (item as { teacherId?: unknown }).teacherId
|
||||
|
||||
if (typeof subject !== "string" || !isClassSubject(subject)) return []
|
||||
|
||||
if (teacherId === null || typeof teacherId === "undefined") {
|
||||
return [{ subject, teacherId: null }]
|
||||
}
|
||||
|
||||
if (typeof teacherId !== "string") return []
|
||||
const trimmed = teacherId.trim()
|
||||
return [{ subject, teacherId: trimmed.length > 0 ? trimmed : null }]
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
revalidatePath("/admin/school/classes")
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Class updated successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to update class" }
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteAdminClassAction(classId: string): Promise<ActionState> {
|
||||
if (typeof classId !== "string" || classId.trim().length === 0) {
|
||||
return { success: false, message: "Missing class id" }
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteAdminClass(classId)
|
||||
revalidatePath("/admin/school/classes")
|
||||
revalidatePath("/teacher/classes/my")
|
||||
revalidatePath("/teacher/classes/students")
|
||||
revalidatePath("/teacher/classes/schedule")
|
||||
return { success: true, message: "Class deleted successfully" }
|
||||
} catch (error) {
|
||||
return { success: false, message: error instanceof Error ? error.message : "Failed to delete class" }
|
||||
}
|
||||
}
|
||||
434
src/modules/classes/components/admin-classes-view.tsx
Normal file
434
src/modules/classes/components/admin-classes-view.tsx
Normal file
@@ -0,0 +1,434 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
import { useRouter } from "next/navigation"
|
||||
|
||||
import type { AdminClassListItem, ClassSubjectTeacherAssignment, TeacherOption } from "../types"
|
||||
import { DEFAULT_CLASS_SUBJECTS } from "../types"
|
||||
import { createAdminClassAction, deleteAdminClassAction, updateAdminClassAction } 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"
|
||||
|
||||
export function AdminClassesClient({
|
||||
classes,
|
||||
teachers,
|
||||
}: {
|
||||
classes: AdminClassListItem[]
|
||||
teachers: TeacherOption[]
|
||||
}) {
|
||||
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 [editTeacherId, setEditTeacherId] = useState("")
|
||||
const [editSubjectTeachers, setEditSubjectTeachers] = useState<Array<{ subject: string; teacherId: string | null }>>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (!createOpen) return
|
||||
setCreateTeacherId(defaultTeacherId)
|
||||
}, [createOpen, defaultTeacherId])
|
||||
|
||||
useEffect(() => {
|
||||
if (!editItem) return
|
||||
setEditTeacherId(editItem.teacher.id)
|
||||
setEditSubjectTeachers(
|
||||
DEFAULT_CLASS_SUBJECTS.map((s) => ({
|
||||
subject: s,
|
||||
teacherId: editItem.subjectTeachers.find((st) => st.subject === s)?.teacher?.id ?? null,
|
||||
}))
|
||||
)
|
||||
}, [editItem])
|
||||
|
||||
const handleCreate = async (formData: FormData) => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await createAdminClassAction(undefined, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setCreateOpen(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to create class")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to create class")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdate = async (formData: FormData) => {
|
||||
if (!editItem) return
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await updateAdminClassAction(editItem.id, undefined, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setEditItem(null)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to update class")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to update class")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteItem) return
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await deleteAdminClassAction(deleteItem.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setDeleteItem(null)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to delete class")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to delete class")
|
||||
} finally {
|
||||
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("，") : "-"
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={() => setCreateOpen(true)} disabled={isWorking}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New class
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<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="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>班主任</TableHead>
|
||||
<TableHead>任课老师</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>
|
||||
|
||||
<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 htmlFor="create-school-name" className="text-right">
|
||||
School
|
||||
</Label>
|
||||
<Input id="create-school-name" name="schoolName" className="col-span-3" placeholder="e.g. First Primary School" />
|
||||
</div>
|
||||
|
||||
<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. Grade 10 · Class 3" autoFocus />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-grade" className="text-right">
|
||||
Grade
|
||||
</Label>
|
||||
<Input id="create-grade" name="grade" className="col-span-3" placeholder="e.g. Grade 10" />
|
||||
</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">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}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={Boolean(editItem)}
|
||||
onOpenChange={(open) => {
|
||||
if (isWorking) return
|
||||
if (!open) 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 htmlFor="edit-school-name" className="text-right">
|
||||
School
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-school-name"
|
||||
name="schoolName"
|
||||
className="col-span-3"
|
||||
defaultValue={editItem.schoolName ?? ""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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-grade" className="text-right">
|
||||
Grade
|
||||
</Label>
|
||||
<Input id="edit-grade" name="grade" className="col-span-3" defaultValue={editItem.grade} />
|
||||
</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">班主任</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">任课老师</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>
|
||||
|
||||
<AlertDialog
|
||||
open={Boolean(deleteItem)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setDeleteItem(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete class</AlertDialogTitle>
|
||||
<AlertDialogDescription>This will permanently delete {deleteItem?.name || "this class"}.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isWorking}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} disabled={isWorking}>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
40
src/modules/classes/components/insights-filters.tsx
Normal file
40
src/modules/classes/components/insights-filters.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client"
|
||||
|
||||
import { useQueryState, parseAsString } from "nuqs"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
|
||||
import type { TeacherClass } from "../types"
|
||||
|
||||
export function InsightsFilters({ classes }: { classes: TeacherClass[] }) {
|
||||
const [classId, setClassId] = useQueryState("classId", parseAsString.withDefault("all"))
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={classId} onValueChange={(val) => setClassId(val === "all" ? null : val)}>
|
||||
<SelectTrigger className="w-[240px]">
|
||||
<SelectValue placeholder="Class" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Select a class</SelectItem>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{classId !== "all" && (
|
||||
<Button variant="ghost" onClick={() => setClassId(null)} className="h-8 px-2 lg:px-3">
|
||||
Reset
|
||||
<X className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
533
src/modules/classes/components/my-classes-grid.tsx
Normal file
533
src/modules/classes/components/my-classes-grid.tsx
Normal file
@@ -0,0 +1,533 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { useMemo, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Calendar, Copy, MoreHorizontal, Pencil, Plus, RefreshCw, Trash2, Users } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
import { parseAsString, useQueryState } from "nuqs"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
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 {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
|
||||
import type { TeacherClass } from "../types"
|
||||
import {
|
||||
createTeacherClassAction,
|
||||
deleteTeacherClassAction,
|
||||
ensureClassInvitationCodeAction,
|
||||
regenerateClassInvitationCodeAction,
|
||||
updateTeacherClassAction,
|
||||
} from "../actions"
|
||||
|
||||
export function MyClassesGrid({ classes }: { classes: TeacherClass[] }) {
|
||||
const router = useRouter()
|
||||
const [isWorking, setIsWorking] = useState(false)
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
|
||||
const [q, setQ] = useQueryState("q", parseAsString.withDefault(""))
|
||||
const [grade, setGrade] = useQueryState("grade", parseAsString.withDefault("all"))
|
||||
|
||||
const gradeOptions = useMemo(() => {
|
||||
const set = new Set<string>()
|
||||
for (const c of classes) set.add(c.grade)
|
||||
return Array.from(set).sort((a, b) => a.localeCompare(b))
|
||||
}, [classes])
|
||||
|
||||
const filteredClasses = useMemo(() => {
|
||||
const needle = q.trim().toLowerCase()
|
||||
return classes.filter((c) => {
|
||||
const gradeOk = grade === "all" ? true : c.grade === grade
|
||||
const qOk = needle.length === 0 ? true : c.name.toLowerCase().includes(needle)
|
||||
return gradeOk && qOk
|
||||
})
|
||||
}, [classes, grade, q])
|
||||
|
||||
const defaultGrade = useMemo(() => (grade !== "all" ? grade : classes[0]?.grade ?? ""), [classes, grade])
|
||||
|
||||
const handleCreate = async (formData: FormData) => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await createTeacherClassAction(null, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setCreateOpen(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to create class")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to create class")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<div className="relative flex-1 md:max-w-sm">
|
||||
<Input
|
||||
placeholder="Search classes..."
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
<Select value={grade} onValueChange={(v) => setGrade(v === "all" ? null : v)}>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Grade" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All grades</SelectItem>
|
||||
{gradeOptions.map((g) => (
|
||||
<SelectItem key={g} value={g}>
|
||||
{g}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{(q || grade !== "all") && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-9"
|
||||
onClick={() => {
|
||||
setQ(null)
|
||||
setGrade(null)
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Dialog
|
||||
open={createOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (isWorking) return
|
||||
setCreateOpen(open)
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="gap-2" disabled={isWorking}>
|
||||
<Plus className="size-4" />
|
||||
New class
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[480px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create class</DialogTitle>
|
||||
<DialogDescription>Add a new class to start managing students.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={handleCreate}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-school-name" className="text-right">
|
||||
School
|
||||
</Label>
|
||||
<Input
|
||||
id="create-school-name"
|
||||
name="schoolName"
|
||||
className="col-span-3"
|
||||
placeholder="Optional"
|
||||
/>
|
||||
</div>
|
||||
<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 1A" required />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-grade" className="text-right">
|
||||
Grade
|
||||
</Label>
|
||||
<Input
|
||||
id="create-grade"
|
||||
name="grade"
|
||||
className="col-span-3"
|
||||
placeholder="e.g. Grade 7"
|
||||
defaultValue={defaultGrade}
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isWorking}>
|
||||
{isWorking ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{classes.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No classes yet"
|
||||
description="Create your first class to start managing students and schedules."
|
||||
icon={Users}
|
||||
action={{ label: "Create class", onClick: () => setCreateOpen(true) }}
|
||||
className="h-[360px] bg-card sm:col-span-2 lg:col-span-3"
|
||||
/>
|
||||
) : filteredClasses.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No classes match your filters"
|
||||
description="Try clearing filters or adjusting keywords."
|
||||
icon={Users}
|
||||
action={{ label: "Clear filters", onClick: () => {
|
||||
setQ(null)
|
||||
setGrade(null)
|
||||
}}}
|
||||
className="h-[360px] bg-card sm:col-span-2 lg:col-span-3"
|
||||
/>
|
||||
) : (
|
||||
filteredClasses.map((c) => (
|
||||
<ClassCard
|
||||
key={c.id}
|
||||
c={c}
|
||||
onWorkingChange={setIsWorking}
|
||||
isWorking={isWorking}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ClassCard({
|
||||
c,
|
||||
isWorking,
|
||||
onWorkingChange,
|
||||
}: {
|
||||
c: TeacherClass
|
||||
isWorking: boolean
|
||||
onWorkingChange: (v: boolean) => void
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [showEdit, setShowEdit] = useState(false)
|
||||
const [showDelete, setShowDelete] = useState(false)
|
||||
|
||||
const handleEnsureCode = async () => {
|
||||
onWorkingChange(true)
|
||||
try {
|
||||
const res = await ensureClassInvitationCodeAction(c.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message || "Invitation code ready")
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to generate invitation code")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to generate invitation code")
|
||||
} finally {
|
||||
onWorkingChange(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRegenerateCode = async () => {
|
||||
onWorkingChange(true)
|
||||
try {
|
||||
const res = await regenerateClassInvitationCodeAction(c.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message || "Invitation code updated")
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to regenerate invitation code")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to regenerate invitation code")
|
||||
} finally {
|
||||
onWorkingChange(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyCode = async () => {
|
||||
const code = c.invitationCode ?? ""
|
||||
if (!code) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(code)
|
||||
toast.success("Copied invitation code")
|
||||
} catch {
|
||||
toast.error("Failed to copy")
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = async (formData: FormData) => {
|
||||
onWorkingChange(true)
|
||||
try {
|
||||
const res = await updateTeacherClassAction(c.id, null, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setShowEdit(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to update class")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to update class")
|
||||
} finally {
|
||||
onWorkingChange(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
onWorkingChange(true)
|
||||
try {
|
||||
const res = await deleteTeacherClassAction(c.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setShowDelete(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to delete class")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to delete class")
|
||||
} finally {
|
||||
onWorkingChange(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="shadow-none">
|
||||
<CardHeader className="space-y-2">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="text-base truncate">
|
||||
<Link href={`/teacher/classes/my/${encodeURIComponent(c.id)}`} className="hover:underline">
|
||||
{c.name}
|
||||
</Link>
|
||||
</CardTitle>
|
||||
<div className="text-muted-foreground text-sm mt-1">
|
||||
{c.room ? `Room: ${c.room}` : "Room: Not set"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary">{c.grade}</Badge>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={isWorking}>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setShowEdit(true)}>
|
||||
<Pencil className="mr-2 size-4" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => setShowDelete(true)}
|
||||
>
|
||||
<Trash2 className="mr-2 size-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm font-medium tabular-nums">{c.studentCount} students</div>
|
||||
{c.homeroom ? <Badge variant="outline">{c.homeroom}</Badge> : null}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-xs uppercase text-muted-foreground">Invitation code</div>
|
||||
<div className="font-mono tabular-nums text-sm">{c.invitationCode ?? "-"}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{c.invitationCode ? (
|
||||
<>
|
||||
<Button variant="outline" size="sm" className="gap-2" onClick={handleCopyCode} disabled={isWorking}>
|
||||
<Copy className="size-4" />
|
||||
Copy
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="gap-2" onClick={handleRegenerateCode} disabled={isWorking}>
|
||||
<RefreshCw className="size-4" />
|
||||
Regenerate
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button variant="outline" size="sm" onClick={handleEnsureCode} disabled={isWorking}>
|
||||
Generate
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn("grid gap-2", "grid-cols-2")}>
|
||||
<Button asChild variant="outline" className="w-full justify-start gap-2">
|
||||
<Link href={`/teacher/classes/students?classId=${encodeURIComponent(c.id)}`}>
|
||||
<Users className="size-4" />
|
||||
Students
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="w-full justify-start gap-2">
|
||||
<Link href={`/teacher/classes/schedule?classId=${encodeURIComponent(c.id)}`}>
|
||||
<Calendar className="size-4" />
|
||||
Schedule
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<Dialog
|
||||
open={showEdit}
|
||||
onOpenChange={(open) => {
|
||||
if (isWorking) return
|
||||
setShowEdit(open)
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[480px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit class</DialogTitle>
|
||||
<DialogDescription>Update basic class information.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={handleEdit}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor={`edit-school-name-${c.id}`} className="text-right">
|
||||
School
|
||||
</Label>
|
||||
<Input
|
||||
id={`edit-school-name-${c.id}`}
|
||||
name="schoolName"
|
||||
className="col-span-3"
|
||||
defaultValue={c.schoolName ?? ""}
|
||||
placeholder="Optional"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor={`edit-name-${c.id}`} className="text-right">
|
||||
Name
|
||||
</Label>
|
||||
<Input
|
||||
id={`edit-name-${c.id}`}
|
||||
name="name"
|
||||
className="col-span-3"
|
||||
defaultValue={c.name}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor={`edit-grade-${c.id}`} className="text-right">
|
||||
Grade
|
||||
</Label>
|
||||
<Input
|
||||
id={`edit-grade-${c.id}`}
|
||||
name="grade"
|
||||
className="col-span-3"
|
||||
defaultValue={c.grade}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor={`edit-homeroom-${c.id}`} className="text-right">
|
||||
Homeroom
|
||||
</Label>
|
||||
<Input
|
||||
id={`edit-homeroom-${c.id}`}
|
||||
name="homeroom"
|
||||
className="col-span-3"
|
||||
defaultValue={c.homeroom ?? ""}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor={`edit-room-${c.id}`} className="text-right">
|
||||
Room
|
||||
</Label>
|
||||
<Input
|
||||
id={`edit-room-${c.id}`}
|
||||
name="room"
|
||||
className="col-span-3"
|
||||
defaultValue={c.room ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isWorking}>
|
||||
{isWorking ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog
|
||||
open={showDelete}
|
||||
onOpenChange={(open) => {
|
||||
if (isWorking) return
|
||||
setShowDelete(open)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete class?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will permanently delete <span className="font-medium text-foreground">{c.name}</span> and remove all
|
||||
enrollments.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isWorking}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
onClick={handleDelete}
|
||||
disabled={isWorking}
|
||||
>
|
||||
{isWorking ? "Deleting..." : "Delete"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
195
src/modules/classes/components/schedule-filters.tsx
Normal file
195
src/modules/classes/components/schedule-filters.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useQueryState, parseAsString } from "nuqs"
|
||||
import { Plus, X } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import type { TeacherClass } from "../types"
|
||||
import { createClassScheduleItemAction } from "../actions"
|
||||
|
||||
export function ScheduleFilters({ classes }: { classes: TeacherClass[] }) {
|
||||
const [classId, setClassId] = useQueryState("classId", parseAsString.withDefault("all"))
|
||||
|
||||
const router = useRouter()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [isWorking, setIsWorking] = useState(false)
|
||||
|
||||
const defaultClassId = useMemo(() => (classId !== "all" ? classId : classes[0]?.id ?? ""), [classId, classes])
|
||||
const [createClassId, setCreateClassId] = useState(defaultClassId)
|
||||
const [weekday, setWeekday] = useState<string>("1")
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
setCreateClassId(defaultClassId)
|
||||
setWeekday("1")
|
||||
}, [open, defaultClassId])
|
||||
|
||||
const handleCreate = async (formData: FormData) => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
formData.set("classId", createClassId)
|
||||
const res = await createClassScheduleItemAction(null, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setOpen(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to create schedule item")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to create schedule item")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Select value={classId} onValueChange={(val) => setClassId(val === "all" ? null : val)}>
|
||||
<SelectTrigger className="w-[240px]">
|
||||
<SelectValue placeholder="Class" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Classes</SelectItem>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{classId !== "all" && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setClassId(null)}
|
||||
className="h-8 px-2 lg:px-3"
|
||||
>
|
||||
Reset
|
||||
<X className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(v) => {
|
||||
if (isWorking) return
|
||||
setOpen(v)
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="gap-2" disabled={classes.length === 0}>
|
||||
<Plus className="size-4" />
|
||||
Add item
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[560px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add schedule item</DialogTitle>
|
||||
<DialogDescription>Create a class schedule entry.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={handleCreate}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Class</Label>
|
||||
<div className="col-span-3">
|
||||
<Select value={createClassId} onValueChange={setCreateClassId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a class" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="weekday" className="text-right">
|
||||
Weekday
|
||||
</Label>
|
||||
<div className="col-span-3">
|
||||
<Select value={weekday} onValueChange={setWeekday}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select weekday" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">Mon</SelectItem>
|
||||
<SelectItem value="2">Tue</SelectItem>
|
||||
<SelectItem value="3">Wed</SelectItem>
|
||||
<SelectItem value="4">Thu</SelectItem>
|
||||
<SelectItem value="5">Fri</SelectItem>
|
||||
<SelectItem value="6">Sat</SelectItem>
|
||||
<SelectItem value="7">Sun</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="weekday" value={weekday} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="startTime" className="text-right">
|
||||
Start
|
||||
</Label>
|
||||
<Input id="startTime" name="startTime" type="time" className="col-span-3" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="endTime" className="text-right">
|
||||
End
|
||||
</Label>
|
||||
<Input id="endTime" name="endTime" type="time" className="col-span-3" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="course" className="text-right">
|
||||
Course
|
||||
</Label>
|
||||
<Input id="course" name="course" className="col-span-3" placeholder="e.g. Math" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="location" className="text-right">
|
||||
Location
|
||||
</Label>
|
||||
<Input id="location" name="location" className="col-span-3" placeholder="Optional" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isWorking || !createClassId}>
|
||||
{isWorking ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
465
src/modules/classes/components/schedule-view.tsx
Normal file
465
src/modules/classes/components/schedule-view.tsx
Normal file
@@ -0,0 +1,465 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Clock, MapPin, MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
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 {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select"
|
||||
import type { ClassScheduleItem, TeacherClass } from "../types"
|
||||
import {
|
||||
createClassScheduleItemAction,
|
||||
deleteClassScheduleItemAction,
|
||||
updateClassScheduleItemAction,
|
||||
} from "../actions"
|
||||
|
||||
const WEEKDAYS: Array<{ key: ClassScheduleItem["weekday"]; label: string }> = [
|
||||
{ key: 1, label: "Mon" },
|
||||
{ key: 2, label: "Tue" },
|
||||
{ key: 3, label: "Wed" },
|
||||
{ key: 4, label: "Thu" },
|
||||
{ key: 5, label: "Fri" },
|
||||
{ key: 6, label: "Sat" },
|
||||
{ key: 7, label: "Sun" },
|
||||
]
|
||||
|
||||
export function ScheduleView({
|
||||
schedule,
|
||||
classes,
|
||||
}: {
|
||||
schedule: ClassScheduleItem[]
|
||||
classes: TeacherClass[]
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const [isWorking, setIsWorking] = useState(false)
|
||||
const [editItem, setEditItem] = useState<ClassScheduleItem | null>(null)
|
||||
const [deleteItem, setDeleteItem] = useState<ClassScheduleItem | null>(null)
|
||||
|
||||
const [createWeekday, setCreateWeekday] = useState<ClassScheduleItem["weekday"]>(1)
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [createClassId, setCreateClassId] = useState<string>("")
|
||||
|
||||
const [editClassId, setEditClassId] = useState<string>("")
|
||||
const [editWeekday, setEditWeekday] = useState<string>("1")
|
||||
|
||||
const classNameById = useMemo(() => new Map(classes.map((c) => [c.id, c.name] as const)), [classes])
|
||||
const defaultClassId = useMemo(() => classes[0]?.id ?? "", [classes])
|
||||
|
||||
useEffect(() => {
|
||||
if (!editItem) return
|
||||
setEditClassId(editItem.classId)
|
||||
setEditWeekday(String(editItem.weekday))
|
||||
}, [editItem])
|
||||
|
||||
useEffect(() => {
|
||||
if (!createOpen) return
|
||||
setCreateClassId(defaultClassId)
|
||||
}, [createOpen, defaultClassId])
|
||||
|
||||
const byDay = new Map<ClassScheduleItem["weekday"], ClassScheduleItem[]>()
|
||||
for (const d of WEEKDAYS) byDay.set(d.key, [])
|
||||
for (const item of schedule) byDay.get(item.weekday)?.push(item)
|
||||
|
||||
const handleCreate = async (formData: FormData) => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
formData.set("classId", createClassId || defaultClassId)
|
||||
formData.set("weekday", String(createWeekday))
|
||||
const res = await createClassScheduleItemAction(null, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setCreateOpen(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to create schedule item")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to create schedule item")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdate = async (formData: FormData) => {
|
||||
if (!editItem) return
|
||||
setIsWorking(true)
|
||||
try {
|
||||
formData.set("classId", editClassId)
|
||||
formData.set("weekday", editWeekday)
|
||||
const res = await updateClassScheduleItemAction(editItem.id, null, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setEditItem(null)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to update schedule item")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to update schedule item")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteItem) return
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await deleteClassScheduleItemAction(deleteItem.id)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setDeleteItem(null)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to delete schedule item")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to delete schedule item")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
||||
{WEEKDAYS.map((d) => {
|
||||
const items = byDay.get(d.key) ?? []
|
||||
return (
|
||||
<Card key={d.key} className="shadow-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle className="text-base">{d.label}</CardTitle>
|
||||
<Badge variant="secondary" className={cn(items.length === 0 && "opacity-60")}>
|
||||
{items.length} items
|
||||
</Badge>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
disabled={classes.length === 0}
|
||||
onClick={() => {
|
||||
setCreateWeekday(d.key)
|
||||
setCreateOpen(true)
|
||||
}}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{items.length === 0 ? (
|
||||
<div className="text-muted-foreground text-sm">No classes scheduled.</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="space-y-1 border-b pb-4 last:border-0 last:pb-0">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium leading-none">{item.course}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">{classNameById.get(item.classId) ?? "Class"}</Badge>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={isWorking}>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setEditItem(item)}>
|
||||
<Pencil className="mr-2 size-4" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive focus:text-destructive"
|
||||
onClick={() => setDeleteItem(item)}
|
||||
>
|
||||
<Trash2 className="mr-2 size-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-muted-foreground flex items-center gap-3 text-sm">
|
||||
<span className="inline-flex items-center gap-1 tabular-nums">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
{item.startTime}–{item.endTime}
|
||||
</span>
|
||||
{item.location ? (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MapPin className="h-3.5 w-3.5" />
|
||||
{item.location}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
|
||||
<Dialog
|
||||
open={createOpen}
|
||||
onOpenChange={(v) => {
|
||||
if (isWorking) return
|
||||
setCreateOpen(v)
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[560px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add schedule item</DialogTitle>
|
||||
<DialogDescription>Create a class schedule entry.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={handleCreate}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Class</Label>
|
||||
<div className="col-span-3">
|
||||
<Select value={createClassId} onValueChange={setCreateClassId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a class" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="classId" value={createClassId} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Weekday</Label>
|
||||
<Input value={WEEKDAYS.find((w) => w.key === createWeekday)?.label ?? ""} readOnly className="col-span-3" />
|
||||
<input type="hidden" name="weekday" value={String(createWeekday)} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-startTime" className="text-right">
|
||||
Start
|
||||
</Label>
|
||||
<Input id="create-startTime" name="startTime" type="time" className="col-span-3" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-endTime" className="text-right">
|
||||
End
|
||||
</Label>
|
||||
<Input id="create-endTime" name="endTime" type="time" className="col-span-3" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-course" className="text-right">
|
||||
Course
|
||||
</Label>
|
||||
<Input id="create-course" name="course" className="col-span-3" placeholder="e.g. Math" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="create-location" className="text-right">
|
||||
Location
|
||||
</Label>
|
||||
<Input id="create-location" name="location" className="col-span-3" placeholder="Optional" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isWorking || !createClassId}>
|
||||
{isWorking ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={Boolean(editItem)}
|
||||
onOpenChange={(v) => {
|
||||
if (isWorking) return
|
||||
if (!v) setEditItem(null)
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-[560px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit schedule item</DialogTitle>
|
||||
<DialogDescription>Update this schedule entry.</DialogDescription>
|
||||
</DialogHeader>
|
||||
{editItem ? (
|
||||
<form action={handleUpdate}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Class</Label>
|
||||
<div className="col-span-3">
|
||||
<Select value={editClassId} onValueChange={setEditClassId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a class" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="classId" value={editClassId} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Weekday</Label>
|
||||
<div className="col-span-3">
|
||||
<Select value={editWeekday} onValueChange={setEditWeekday}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select weekday" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">Mon</SelectItem>
|
||||
<SelectItem value="2">Tue</SelectItem>
|
||||
<SelectItem value="3">Wed</SelectItem>
|
||||
<SelectItem value="4">Thu</SelectItem>
|
||||
<SelectItem value="5">Fri</SelectItem>
|
||||
<SelectItem value="6">Sat</SelectItem>
|
||||
<SelectItem value="7">Sun</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<input type="hidden" name="weekday" value={editWeekday} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="edit-startTime" className="text-right">
|
||||
Start
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-startTime"
|
||||
name="startTime"
|
||||
type="time"
|
||||
className="col-span-3"
|
||||
defaultValue={editItem.startTime}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="edit-endTime" className="text-right">
|
||||
End
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-endTime"
|
||||
name="endTime"
|
||||
type="time"
|
||||
className="col-span-3"
|
||||
defaultValue={editItem.endTime}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="edit-course" className="text-right">
|
||||
Course
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-course"
|
||||
name="course"
|
||||
className="col-span-3"
|
||||
defaultValue={editItem.course}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="edit-location" className="text-right">
|
||||
Location
|
||||
</Label>
|
||||
<Input
|
||||
id="edit-location"
|
||||
name="location"
|
||||
className="col-span-3"
|
||||
defaultValue={editItem.location ?? ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isWorking}>
|
||||
{isWorking ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog
|
||||
open={Boolean(deleteItem)}
|
||||
onOpenChange={(v) => {
|
||||
if (isWorking) return
|
||||
if (!v) setDeleteItem(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete schedule item?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteItem ? (
|
||||
<>
|
||||
This will permanently delete <span className="font-medium text-foreground">{deleteItem.course}</span>{" "}
|
||||
({deleteItem.startTime}–{deleteItem.endTime}).
|
||||
</>
|
||||
) : null}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isWorking}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
onClick={handleDelete}
|
||||
disabled={isWorking}
|
||||
>
|
||||
{isWorking ? "Deleting..." : "Delete"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
169
src/modules/classes/components/students-filters.tsx
Normal file
169
src/modules/classes/components/students-filters.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useQueryState, parseAsString } from "nuqs"
|
||||
import { Search, UserPlus, X } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import type { TeacherClass } from "../types"
|
||||
import { enrollStudentByEmailAction } from "../actions"
|
||||
|
||||
export function StudentsFilters({ classes }: { classes: TeacherClass[] }) {
|
||||
const [search, setSearch] = useQueryState("q", parseAsString.withDefault(""))
|
||||
const [classId, setClassId] = useQueryState("classId", parseAsString.withDefault("all"))
|
||||
|
||||
const router = useRouter()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [isWorking, setIsWorking] = useState(false)
|
||||
|
||||
const defaultClassId = useMemo(() => (classId !== "all" ? classId : classes[0]?.id ?? ""), [classId, classes])
|
||||
const [enrollClassId, setEnrollClassId] = useState(defaultClassId)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
setEnrollClassId(defaultClassId)
|
||||
}, [open, defaultClassId])
|
||||
|
||||
const handleEnroll = async (formData: FormData) => {
|
||||
setIsWorking(true)
|
||||
try {
|
||||
const res = await enrollStudentByEmailAction(enrollClassId, null, formData)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
setOpen(false)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to add student")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to add student")
|
||||
} finally {
|
||||
setIsWorking(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<div className="relative flex-1 md:max-w-sm">
|
||||
<Search className="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Search students..."
|
||||
className="pl-8"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select value={classId} onValueChange={(val) => setClassId(val === "all" ? null : val)}>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Class" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Classes</SelectItem>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{(search || classId !== "all") && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setSearch(null)
|
||||
setClassId(null)
|
||||
}}
|
||||
className="h-8 px-2 lg:px-3"
|
||||
>
|
||||
Reset
|
||||
<X className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(v) => {
|
||||
if (isWorking) return
|
||||
setOpen(v)
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="gap-2" disabled={classes.length === 0}>
|
||||
<UserPlus className="size-4" />
|
||||
Add student
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[520px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add student</DialogTitle>
|
||||
<DialogDescription>Enroll a student by email to a class.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={handleEnroll}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label className="text-right">Class</Label>
|
||||
<div className="col-span-3">
|
||||
<Select value={enrollClassId} onValueChange={setEnrollClassId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a class" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{classes.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="student-email" className="text-right">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="student-email"
|
||||
name="email"
|
||||
type="email"
|
||||
className="col-span-3"
|
||||
placeholder="student@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isWorking || !enrollClassId}>
|
||||
{isWorking ? "Adding..." : "Add"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
158
src/modules/classes/components/students-table.tsx
Normal file
158
src/modules/classes/components/students-table.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { MoreHorizontal, UserCheck, UserX } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
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 {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/components/ui/table"
|
||||
import type { ClassStudent } from "../types"
|
||||
import { setStudentEnrollmentStatusAction } from "../actions"
|
||||
|
||||
export function StudentsTable({ students }: { students: ClassStudent[] }) {
|
||||
const router = useRouter()
|
||||
const [workingKey, setWorkingKey] = useState<string | null>(null)
|
||||
const [removeTarget, setRemoveTarget] = useState<ClassStudent | null>(null)
|
||||
|
||||
const setStatus = async (student: ClassStudent, status: "active" | "inactive") => {
|
||||
const key = `${student.classId}:${student.id}:${status}`
|
||||
setWorkingKey(key)
|
||||
try {
|
||||
const res = await setStudentEnrollmentStatusAction(student.classId, student.id, status)
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
router.refresh()
|
||||
} else {
|
||||
toast.error(res.message || "Failed to update student")
|
||||
}
|
||||
} catch {
|
||||
toast.error("Failed to update student")
|
||||
} finally {
|
||||
setWorkingKey(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Student</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Email</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Class</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Status</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{students.map((s) => (
|
||||
<TableRow key={`${s.classId}:${s.id}`} className={cn("h-12", s.status !== "active" && "opacity-70")}>
|
||||
<TableCell className="font-medium">{s.name}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{s.email}</TableCell>
|
||||
<TableCell>{s.className}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={s.status === "active" ? "secondary" : "outline"}>
|
||||
{s.status === "active" ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" disabled={workingKey !== null}>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{s.status !== "active" ? (
|
||||
<DropdownMenuItem onClick={() => setStatus(s, "active")} disabled={workingKey !== null}>
|
||||
<UserCheck className="mr-2 size-4" />
|
||||
Set active
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<DropdownMenuItem onClick={() => setStatus(s, "inactive")} disabled={workingKey !== null}>
|
||||
<UserX className="mr-2 size-4" />
|
||||
Set inactive
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => setRemoveTarget(s)}
|
||||
className="text-destructive focus:text-destructive"
|
||||
disabled={s.status === "inactive" || workingKey !== null}
|
||||
>
|
||||
<UserX className="mr-2 size-4" />
|
||||
Remove from class
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<AlertDialog
|
||||
open={Boolean(removeTarget)}
|
||||
onOpenChange={(open) => {
|
||||
if (workingKey !== null) return
|
||||
if (!open) setRemoveTarget(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Remove student from class?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{removeTarget ? (
|
||||
<>
|
||||
This will set <span className="font-medium text-foreground">{removeTarget.name}</span> to inactive in{" "}
|
||||
<span className="font-medium text-foreground">{removeTarget.className}</span>.
|
||||
</>
|
||||
) : null}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={workingKey !== null}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
disabled={workingKey !== null}
|
||||
onClick={() => {
|
||||
if (!removeTarget) return
|
||||
setRemoveTarget(null)
|
||||
setStatus(removeTarget, "inactive")
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
1541
src/modules/classes/data-access.ts
Normal file
1541
src/modules/classes/data-access.ts
Normal file
File diff suppressed because it is too large
Load Diff
194
src/modules/classes/types.ts
Normal file
194
src/modules/classes/types.ts
Normal file
@@ -0,0 +1,194 @@
|
||||
export type TeacherClass = {
|
||||
id: string
|
||||
schoolName?: string | null
|
||||
name: string
|
||||
grade: string
|
||||
homeroom?: string | null
|
||||
room?: string | null
|
||||
invitationCode?: string | null
|
||||
studentCount: number
|
||||
}
|
||||
|
||||
export type TeacherOption = {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export const DEFAULT_CLASS_SUBJECTS = ["语文", "数学", "英语", "美术", "体育", "科学", "社会", "音乐"] as const
|
||||
|
||||
export type ClassSubject = (typeof DEFAULT_CLASS_SUBJECTS)[number]
|
||||
|
||||
export type ClassSubjectTeacherAssignment = {
|
||||
subject: ClassSubject
|
||||
teacher: TeacherOption | null
|
||||
}
|
||||
|
||||
export type AdminClassListItem = {
|
||||
id: string
|
||||
schoolName?: string | null
|
||||
schoolId?: string | null
|
||||
name: string
|
||||
grade: string
|
||||
gradeId?: string | null
|
||||
homeroom?: string | null
|
||||
room?: string | null
|
||||
invitationCode?: string | null
|
||||
teacher: TeacherOption
|
||||
subjectTeachers: ClassSubjectTeacherAssignment[]
|
||||
studentCount: number
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export type CreateTeacherClassInput = {
|
||||
schoolName?: string | null
|
||||
schoolId?: string | null
|
||||
name: string
|
||||
grade: string
|
||||
gradeId?: string | null
|
||||
homeroom?: string | null
|
||||
room?: string | null
|
||||
}
|
||||
|
||||
export type UpdateTeacherClassInput = {
|
||||
schoolName?: string | null
|
||||
schoolId?: string | null
|
||||
name?: string
|
||||
grade?: string
|
||||
gradeId?: string | null
|
||||
homeroom?: string | null
|
||||
room?: string | null
|
||||
}
|
||||
|
||||
export type ClassStudent = {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
classId: string
|
||||
className: string
|
||||
status: "active" | "inactive"
|
||||
}
|
||||
|
||||
export type ClassScheduleItem = {
|
||||
id: string
|
||||
classId: string
|
||||
weekday: 1 | 2 | 3 | 4 | 5 | 6 | 7
|
||||
startTime: string
|
||||
endTime: string
|
||||
course: string
|
||||
location?: string | null
|
||||
}
|
||||
|
||||
export type StudentEnrolledClass = {
|
||||
id: string
|
||||
schoolName?: string | null
|
||||
name: string
|
||||
grade: string
|
||||
homeroom?: string | null
|
||||
room?: string | null
|
||||
}
|
||||
|
||||
export type StudentScheduleItem = {
|
||||
id: string
|
||||
classId: string
|
||||
className: string
|
||||
weekday: 1 | 2 | 3 | 4 | 5 | 6 | 7
|
||||
startTime: string
|
||||
endTime: string
|
||||
course: string
|
||||
location?: string | null
|
||||
}
|
||||
|
||||
export type CreateClassScheduleItemInput = {
|
||||
classId: string
|
||||
weekday: 1 | 2 | 3 | 4 | 5 | 6 | 7
|
||||
startTime: string
|
||||
endTime: string
|
||||
course: string
|
||||
location?: string | null
|
||||
}
|
||||
|
||||
export type UpdateClassScheduleItemInput = {
|
||||
classId?: string
|
||||
weekday?: 1 | 2 | 3 | 4 | 5 | 6 | 7
|
||||
startTime?: string
|
||||
endTime?: string
|
||||
course?: string
|
||||
location?: string | null
|
||||
}
|
||||
|
||||
export type ClassBasicInfo = {
|
||||
id: string
|
||||
name: string
|
||||
grade: string
|
||||
homeroom?: string | null
|
||||
room?: string | null
|
||||
invitationCode?: string | null
|
||||
}
|
||||
|
||||
export type ScoreStats = {
|
||||
count: number
|
||||
avg: number | null
|
||||
median: number | null
|
||||
min: number | null
|
||||
max: number | null
|
||||
}
|
||||
|
||||
export type ClassHomeworkAssignmentStats = {
|
||||
assignmentId: string
|
||||
title: string
|
||||
status: string
|
||||
createdAt: string
|
||||
dueAt: string | null
|
||||
isActive: boolean
|
||||
isOverdue: boolean
|
||||
maxScore: number
|
||||
targetCount: number
|
||||
submittedCount: number
|
||||
gradedCount: number
|
||||
scoreStats: ScoreStats
|
||||
}
|
||||
|
||||
export type ClassHomeworkInsights = {
|
||||
class: ClassBasicInfo
|
||||
studentCounts: {
|
||||
total: number
|
||||
active: number
|
||||
inactive: number
|
||||
}
|
||||
assignments: ClassHomeworkAssignmentStats[]
|
||||
latest: ClassHomeworkAssignmentStats | null
|
||||
overallScores: ScoreStats
|
||||
}
|
||||
|
||||
export type GradeHomeworkClassSummary = {
|
||||
class: ClassBasicInfo
|
||||
studentCounts: {
|
||||
total: number
|
||||
active: number
|
||||
inactive: number
|
||||
}
|
||||
latestAvg: number | null
|
||||
prevAvg: number | null
|
||||
deltaAvg: number | null
|
||||
overallScores: ScoreStats
|
||||
}
|
||||
|
||||
export type GradeHomeworkInsights = {
|
||||
grade: {
|
||||
id: string
|
||||
name: string
|
||||
school: { id: string; name: string }
|
||||
}
|
||||
classCount: number
|
||||
studentCounts: {
|
||||
total: number
|
||||
active: number
|
||||
inactive: number
|
||||
}
|
||||
assignments: ClassHomeworkAssignmentStats[]
|
||||
latest: ClassHomeworkAssignmentStats | null
|
||||
overallScores: ScoreStats
|
||||
classes: GradeHomeworkClassSummary[]
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import type { ReactNode } from "react"
|
||||
import { Users, LayoutDashboard, BookOpen, FileText, ClipboardList, Library, Activity } from "lucide-react"
|
||||
|
||||
import type { AdminDashboardData } from "@/modules/dashboard/types"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
|
||||
export function AdminDashboardView({ data }: { data: AdminDashboardData }) {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<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">Dashboard</h1>
|
||||
<div className="text-sm text-muted-foreground">System overview across users, learning content, and activity.</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="gap-2">
|
||||
<Activity className="h-4 w-4" />
|
||||
{data.activeSessionsCount} active sessions
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
{data.userCount} users
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<KpiCard title="Users" value={data.userCount} icon={<Users className="h-4 w-4" />} />
|
||||
<KpiCard title="Classes" value={data.classCount} icon={<LayoutDashboard className="h-4 w-4" />} />
|
||||
<KpiCard title="Homework (published)" value={data.homeworkAssignmentPublishedCount} icon={<ClipboardList className="h-4 w-4" />} />
|
||||
<KpiCard title="To grade" value={data.homeworkSubmissionToGradeCount} icon={<FileText className="h-4 w-4" />} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle>User Roles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{data.userRoleCounts.length === 0 ? (
|
||||
<EmptyState title="No users" description="No user records found." />
|
||||
) : (
|
||||
data.userRoleCounts.map((r) => (
|
||||
<div key={r.role} className="flex items-center justify-between">
|
||||
<Badge variant="secondary">{r.role}</Badge>
|
||||
<div className="text-sm font-medium tabular-nums">{r.count}</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle>Content</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3">
|
||||
<ContentRow label="Textbooks" value={data.textbookCount} icon={<Library className="h-4 w-4 text-muted-foreground" />} />
|
||||
<ContentRow label="Chapters" value={data.chapterCount} icon={<BookOpen className="h-4 w-4 text-muted-foreground" />} />
|
||||
<ContentRow label="Questions" value={data.questionCount} icon={<FileText className="h-4 w-4 text-muted-foreground" />} />
|
||||
<ContentRow label="Exams" value={data.examCount} icon={<ClipboardList className="h-4 w-4 text-muted-foreground" />} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle>Homework Activity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3">
|
||||
<ContentRow label="Assignments" value={data.homeworkAssignmentCount} icon={<ClipboardList className="h-4 w-4 text-muted-foreground" />} />
|
||||
<ContentRow label="Submissions" value={data.homeworkSubmissionCount} icon={<FileText className="h-4 w-4 text-muted-foreground" />} />
|
||||
<ContentRow label="To grade" value={data.homeworkSubmissionToGradeCount} icon={<Activity className="h-4 w-4 text-muted-foreground" />} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Users</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data.recentUsers.length === 0 ? (
|
||||
<EmptyState title="No users yet" description="Seed the database to see users here." />
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.recentUsers.map((u) => (
|
||||
<TableRow key={u.id}>
|
||||
<TableCell className="font-medium">{u.name || "-"}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{u.email}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary">{u.role ?? "unknown"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{formatDate(u.createdAt)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function KpiCard({
|
||||
title,
|
||||
value,
|
||||
icon,
|
||||
}: {
|
||||
title: string
|
||||
value: number
|
||||
icon: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||
<div className="text-muted-foreground">{icon}</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{value}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function ContentRow({
|
||||
label,
|
||||
value,
|
||||
icon,
|
||||
}: {
|
||||
label: string
|
||||
value: number
|
||||
icon: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{icon}
|
||||
<div className="text-sm text-muted-foreground">{label}</div>
|
||||
</div>
|
||||
<div className="text-sm font-medium tabular-nums">{value}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
|
||||
export function AdminDashboard() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader><CardTitle>System Status</CardTitle></CardHeader>
|
||||
<CardContent className="text-green-600 font-bold">Operational</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Total Users</CardTitle></CardHeader>
|
||||
<CardContent>2,450</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Active Sessions</CardTitle></CardHeader>
|
||||
<CardContent>142</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import Link from "next/link"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
|
||||
export function StudentDashboardHeader({ studentName }: { studentName: string }) {
|
||||
return (
|
||||
<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">Dashboard</h1>
|
||||
<div className="text-sm text-muted-foreground">Welcome back, {studentName}.</div>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/student/learning/assignments">View assignments</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { StudentDashboardProps } from "@/modules/dashboard/types"
|
||||
|
||||
import { StudentDashboardHeader } from "./student-dashboard-header"
|
||||
import { StudentGradesCard } from "./student-grades-card"
|
||||
import { StudentRankingCard } from "./student-ranking-card"
|
||||
import { StudentStatsGrid } from "./student-stats-grid"
|
||||
import { StudentTodayScheduleCard } from "./student-today-schedule-card"
|
||||
import { StudentUpcomingAssignmentsCard } from "./student-upcoming-assignments-card"
|
||||
|
||||
export function StudentDashboard({
|
||||
studentName,
|
||||
enrolledClassCount,
|
||||
dueSoonCount,
|
||||
overdueCount,
|
||||
gradedCount,
|
||||
todayScheduleItems,
|
||||
upcomingAssignments,
|
||||
grades,
|
||||
}: StudentDashboardProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<StudentDashboardHeader studentName={studentName} />
|
||||
|
||||
<StudentStatsGrid
|
||||
enrolledClassCount={enrolledClassCount}
|
||||
dueSoonCount={dueSoonCount}
|
||||
overdueCount={overdueCount}
|
||||
gradedCount={gradedCount}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<StudentGradesCard grades={grades} />
|
||||
<StudentRankingCard ranking={grades.ranking} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
<StudentTodayScheduleCard items={todayScheduleItems} />
|
||||
<StudentUpcomingAssignmentsCard upcomingAssignments={upcomingAssignments} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import Link from "next/link"
|
||||
import { BarChart3 } from "lucide-react"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import type { StudentDashboardGradeProps } from "@/modules/homework/types"
|
||||
|
||||
export function StudentGradesCard({ grades }: { grades: StudentDashboardGradeProps }) {
|
||||
const hasGradeTrend = grades.trend.length > 0
|
||||
const hasRecentGrades = grades.recent.length > 0
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
Recent Grades
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasGradeTrend ? (
|
||||
<EmptyState
|
||||
icon={BarChart3}
|
||||
title="No graded work yet"
|
||||
description="Finish and submit assignments to see your score trend."
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border bg-card p-4">
|
||||
<svg viewBox="0 0 100 40" className="h-24 w-full">
|
||||
<polyline
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
points={grades.trend
|
||||
.map((p, i) => {
|
||||
const t = grades.trend.length > 1 ? i / (grades.trend.length - 1) : 0
|
||||
const x = t * 100
|
||||
const v = Number.isFinite(p.percentage) ? Math.max(0, Math.min(100, p.percentage)) : 0
|
||||
const y = 40 - (v / 100) * 40
|
||||
return `${x},${y}`
|
||||
})
|
||||
.join(" ")}
|
||||
className="text-primary"
|
||||
/>
|
||||
</svg>
|
||||
<div className="mt-3 flex items-center justify-between text-sm text-muted-foreground">
|
||||
<div>
|
||||
Latest:{" "}
|
||||
<span className="font-medium text-foreground tabular-nums">
|
||||
{Math.round(grades.trend[grades.trend.length - 1]?.percentage ?? 0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
Points:{" "}
|
||||
<span className="font-medium text-foreground tabular-nums">
|
||||
{grades.trend[grades.trend.length - 1]?.score ?? 0}/{grades.trend[grades.trend.length - 1]?.maxScore ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!hasRecentGrades ? null : (
|
||||
<div className="rounded-md border bg-card">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Assignment</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Score</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">When</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{grades.recent.map((r) => (
|
||||
<TableRow key={r.assignmentId} className="h-12">
|
||||
<TableCell className="font-medium">
|
||||
<Link href={`/student/learning/assignments/${r.assignmentId}`} className="hover:underline">
|
||||
{r.assignmentTitle}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="tabular-nums">
|
||||
{r.score}/{r.maxScore} <span className="text-muted-foreground">({Math.round(r.percentage)}%)</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{formatDate(r.submittedAt)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Trophy } from "lucide-react"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import type { StudentRanking } from "@/modules/homework/types"
|
||||
|
||||
export function StudentRankingCard({ ranking }: { ranking: StudentRanking | null }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="h-4 w-4 text-muted-foreground" />
|
||||
Ranking
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!ranking ? (
|
||||
<EmptyState
|
||||
icon={Trophy}
|
||||
title="No ranking available"
|
||||
description="Join a class and complete graded work to see your rank."
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="rounded-md border bg-card p-4">
|
||||
<div className="text-sm text-muted-foreground">Class Rank</div>
|
||||
<div className="mt-1 text-3xl font-bold tabular-nums">
|
||||
{ranking.rank}/{ranking.classSize}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-md border bg-card p-4">
|
||||
<div className="text-sm text-muted-foreground">Overall</div>
|
||||
<div className="mt-1 text-3xl font-bold tabular-nums">{Math.round(ranking.percentage)}%</div>
|
||||
<div className="text-xs text-muted-foreground tabular-nums">
|
||||
{ranking.totalScore}/{ranking.totalMaxScore} pts
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Based on latest graded submissions per assignment for your class.</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { BookOpen, CheckCircle2, PenTool, TriangleAlert } from "lucide-react"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
|
||||
type Stat = {
|
||||
title: string
|
||||
value: string
|
||||
description: string
|
||||
icon: typeof BookOpen
|
||||
}
|
||||
|
||||
export function StudentStatsGrid({
|
||||
enrolledClassCount,
|
||||
dueSoonCount,
|
||||
overdueCount,
|
||||
gradedCount,
|
||||
}: {
|
||||
enrolledClassCount: number
|
||||
dueSoonCount: number
|
||||
overdueCount: number
|
||||
gradedCount: number
|
||||
}) {
|
||||
const stats: readonly Stat[] = [
|
||||
{
|
||||
title: "My Classes",
|
||||
value: String(enrolledClassCount),
|
||||
description: "Enrolled classes",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
title: "Due Soon",
|
||||
value: String(dueSoonCount),
|
||||
description: "Next 7 days",
|
||||
icon: PenTool,
|
||||
},
|
||||
{
|
||||
title: "Overdue",
|
||||
value: String(overdueCount),
|
||||
description: "Needs attention",
|
||||
icon: TriangleAlert,
|
||||
},
|
||||
{
|
||||
title: "Graded",
|
||||
value: String(gradedCount),
|
||||
description: "With score",
|
||||
icon: CheckCircle2,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((stat) => (
|
||||
<Card key={stat.title}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
|
||||
<stat.icon className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold tabular-nums">{stat.value}</div>
|
||||
<div className="text-xs text-muted-foreground">{stat.description}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
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 { StudentTodayScheduleItem } from "@/modules/dashboard/types"
|
||||
|
||||
export function StudentTodayScheduleCard({ items }: { items: StudentTodayScheduleItem[] }) {
|
||||
const hasSchedule = items.length > 0
|
||||
|
||||
return (
|
||||
<Card className="lg:col-span-3">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CalendarDays className="h-4 w-4 text-muted-foreground" />
|
||||
Today's Schedule
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasSchedule ? (
|
||||
<EmptyState
|
||||
icon={CalendarX}
|
||||
title="No classes today"
|
||||
description="Your timetable is clear for today."
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between border-b pb-4 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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import Link from "next/link"
|
||||
import { PenTool } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
||||
import { formatDate } from "@/shared/lib/utils"
|
||||
import type { StudentHomeworkAssignmentListItem } from "@/modules/homework/types"
|
||||
|
||||
const getStatusVariant = (status: string): "default" | "secondary" | "outline" => {
|
||||
if (status === "graded") return "default"
|
||||
if (status === "submitted") return "secondary"
|
||||
if (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"
|
||||
}
|
||||
|
||||
export function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomingAssignments: StudentHomeworkAssignmentListItem[] }) {
|
||||
const hasAssignments = upcomingAssignments.length > 0
|
||||
|
||||
return (
|
||||
<Card className="lg:col-span-4">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<PenTool className="h-4 w-4 text-muted-foreground" />
|
||||
Upcoming Assignments
|
||||
</CardTitle>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/student/learning/assignments">View all</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasAssignments ? (
|
||||
<EmptyState
|
||||
icon={PenTool}
|
||||
title="No assignments"
|
||||
description="You have no assigned homework right now."
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-md border bg-card">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Title</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Status</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Due</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase text-muted-foreground">Score</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{upcomingAssignments.map((a) => (
|
||||
<TableRow key={a.id} className="h-12">
|
||||
<TableCell className="font-medium">
|
||||
<Link href={`/student/learning/assignments/${a.id}`} className="truncate hover:underline">
|
||||
{a.title}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={getStatusVariant(a.progressStatus)} className="capitalize">
|
||||
{getStatusLabel(a.progressStatus)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
|
||||
<TableCell className="tabular-nums">{a.latestScore ?? "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
|
||||
export function StudentDashboard() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Student Dashboard</h1>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader><CardTitle>My Courses</CardTitle></CardHeader>
|
||||
<CardContent>Enrolled in 5 courses</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Assignments</CardTitle></CardHeader>
|
||||
<CardContent>2 due this week</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,62 +1,22 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar";
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state";
|
||||
import { Inbox } from "lucide-react";
|
||||
import { formatDate } from "@/shared/lib/utils";
|
||||
import type { HomeworkSubmissionListItem } from "@/modules/homework/types";
|
||||
|
||||
interface SubmissionItem {
|
||||
id: string;
|
||||
studentName: string;
|
||||
studentAvatar?: string;
|
||||
assignment: string;
|
||||
submittedAt: string;
|
||||
status: "submitted" | "late";
|
||||
}
|
||||
|
||||
const MOCK_SUBMISSIONS: SubmissionItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
studentName: "Alice Johnson",
|
||||
assignment: "React Component Composition",
|
||||
submittedAt: "10 minutes ago",
|
||||
status: "submitted",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
studentName: "Bob Smith",
|
||||
assignment: "Design System Analysis",
|
||||
submittedAt: "1 hour ago",
|
||||
status: "submitted",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
studentName: "Charlie Brown",
|
||||
assignment: "React Component Composition",
|
||||
submittedAt: "2 hours ago",
|
||||
status: "late",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
studentName: "Diana Prince",
|
||||
assignment: "CSS Grid Layout",
|
||||
submittedAt: "Yesterday",
|
||||
status: "submitted",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
studentName: "Evan Wright",
|
||||
assignment: "Design System Analysis",
|
||||
submittedAt: "Yesterday",
|
||||
status: "submitted",
|
||||
},
|
||||
];
|
||||
|
||||
export function RecentSubmissions() {
|
||||
const hasSubmissions = MOCK_SUBMISSIONS.length > 0;
|
||||
export function RecentSubmissions({ submissions }: { submissions: HomeworkSubmissionListItem[] }) {
|
||||
const hasSubmissions = submissions.length > 0;
|
||||
|
||||
return (
|
||||
<Card className="col-span-4 lg:col-span-4">
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Submissions</CardTitle>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Inbox className="h-4 w-4 text-muted-foreground" />
|
||||
Recent Submissions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasSubmissions ? (
|
||||
@@ -64,15 +24,16 @@ export function RecentSubmissions() {
|
||||
icon={Inbox}
|
||||
title="No New Submissions"
|
||||
description="All caught up! There are no new submissions to review."
|
||||
action={{ label: "View submissions", href: "/teacher/homework/submissions" }}
|
||||
className="border-none h-[300px]"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{MOCK_SUBMISSIONS.map((item) => (
|
||||
{submissions.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between group">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={item.studentAvatar} alt={item.studentName} />
|
||||
<AvatarImage src={undefined} alt={item.studentName} />
|
||||
<AvatarFallback>{item.studentName.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="space-y-1">
|
||||
@@ -80,16 +41,20 @@ export function RecentSubmissions() {
|
||||
{item.studentName}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Submitted <span className="font-medium text-foreground">{item.assignment}</span>
|
||||
<Link
|
||||
href={`/teacher/homework/submissions/${item.id}`}
|
||||
className="font-medium text-foreground hover:underline"
|
||||
>
|
||||
{item.assignmentTitle}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{/* Using static date for demo to prevent hydration mismatch */}
|
||||
{item.submittedAt}
|
||||
{item.submittedAt ? formatDate(item.submittedAt) : "-"}
|
||||
</div>
|
||||
{item.status === "late" && (
|
||||
{item.isLate && (
|
||||
<span className="inline-flex items-center rounded-full border border-destructive px-2 py-0.5 text-xs font-semibold text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
|
||||
Late
|
||||
</span>
|
||||
@@ -0,0 +1,86 @@
|
||||
import Link from "next/link"
|
||||
import { Users } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import type { TeacherClass } from "@/modules/classes/types"
|
||||
|
||||
export function TeacherClassesCard({ classes }: { classes: TeacherClass[] }) {
|
||||
const totalStudents = classes.reduce((sum, c) => sum + (c.studentCount ?? 0), 0)
|
||||
const topClassesByStudents = [...classes].sort((a, b) => (b.studentCount ?? 0) - (a.studentCount ?? 0)).slice(0, 8)
|
||||
const maxStudentCount = Math.max(1, ...topClassesByStudents.map((c) => c.studentCount ?? 0))
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
My Classes
|
||||
</CardTitle>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/teacher/classes/my">View all</Link>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3">
|
||||
{classes.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Users}
|
||||
title="No classes yet"
|
||||
description="Create a class to start managing students and schedules."
|
||||
action={{ label: "Create class", href: "/teacher/classes/my" }}
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{topClassesByStudents.length > 0 ? (
|
||||
<div className="rounded-md border bg-card p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm font-medium">Students by class</div>
|
||||
<div className="text-xs text-muted-foreground tabular-nums">Total {totalStudents}</div>
|
||||
</div>
|
||||
<div className="mt-3 grid gap-2">
|
||||
{topClassesByStudents.map((c) => {
|
||||
const count = c.studentCount ?? 0
|
||||
const pct = Math.max(0, Math.min(100, (count / maxStudentCount) * 100))
|
||||
return (
|
||||
<div key={c.id} className="grid grid-cols-[minmax(0,1fr)_120px_52px] items-center gap-3">
|
||||
<div className="truncate text-sm">{c.name}</div>
|
||||
<div className="h-2 rounded-full bg-muted">
|
||||
<div className="h-2 rounded-full bg-primary" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<div className="text-right text-xs tabular-nums text-muted-foreground">{count}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{classes.slice(0, 6).map((c) => (
|
||||
<Link
|
||||
key={c.id}
|
||||
href={`/teacher/classes/my/${encodeURIComponent(c.id)}`}
|
||||
className="flex items-center justify-between rounded-md border bg-card px-4 py-3 hover:bg-muted/50"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium truncate">{c.name}</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{c.grade}
|
||||
{c.homeroom ? ` · ${c.homeroom}` : ""}
|
||||
{c.room ? ` · ${c.room}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline" className="flex items-center gap-1">
|
||||
<Users className="h-3 w-3" />
|
||||
{c.studentCount} students
|
||||
</Badge>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { TeacherQuickActions } from "./teacher-quick-actions"
|
||||
|
||||
export function TeacherDashboardHeader() {
|
||||
return (
|
||||
<div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Teacher</h2>
|
||||
<p className="text-muted-foreground">Overview of today's work and your classes.</p>
|
||||
</div>
|
||||
<TeacherQuickActions />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import type { TeacherDashboardData, TeacherTodayScheduleItem } from "@/modules/dashboard/types"
|
||||
|
||||
import { TeacherClassesCard } from "./teacher-classes-card"
|
||||
import { TeacherDashboardHeader } from "./teacher-dashboard-header"
|
||||
import { TeacherHomeworkCard } from "./teacher-homework-card"
|
||||
import { RecentSubmissions } from "./recent-submissions"
|
||||
import { TeacherSchedule } from "./teacher-schedule"
|
||||
import { TeacherStats } from "./teacher-stats"
|
||||
|
||||
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 function TeacherDashboardView({ data }: { data: TeacherDashboardData }) {
|
||||
const totalStudents = data.classes.reduce((sum, c) => sum + (c.studentCount ?? 0), 0)
|
||||
const todayWeekday = toWeekday(new Date())
|
||||
|
||||
const classNameById = new Map(data.classes.map((c) => [c.id, c.name] as const))
|
||||
const todayScheduleItems: TeacherTodayScheduleItem[] = data.schedule
|
||||
.filter((s) => s.weekday === todayWeekday)
|
||||
.sort((a, b) => a.startTime.localeCompare(b.startTime))
|
||||
.map((s): TeacherTodayScheduleItem => ({
|
||||
id: s.id,
|
||||
classId: s.classId,
|
||||
className: classNameById.get(s.classId) ?? "Class",
|
||||
course: s.course,
|
||||
startTime: s.startTime,
|
||||
endTime: s.endTime,
|
||||
location: s.location ?? null,
|
||||
}))
|
||||
|
||||
const submittedSubmissions = data.submissions.filter((s) => Boolean(s.submittedAt))
|
||||
const toGradeCount = submittedSubmissions.filter((s) => s.status === "submitted").length
|
||||
const recentSubmissions = submittedSubmissions.slice(0, 6)
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-8 p-8">
|
||||
<TeacherDashboardHeader />
|
||||
|
||||
<TeacherStats
|
||||
totalStudents={totalStudents}
|
||||
classCount={data.classes.length}
|
||||
toGradeCount={toGradeCount}
|
||||
todayScheduleCount={todayScheduleItems.length}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
<TeacherSchedule items={todayScheduleItems} />
|
||||
<RecentSubmissions submissions={recentSubmissions} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<TeacherClassesCard classes={data.classes} />
|
||||
<TeacherHomeworkCard assignments={data.assignments} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import Link from "next/link"
|
||||
import { PenTool } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state"
|
||||
import type { HomeworkAssignmentListItem } from "@/modules/homework/types"
|
||||
|
||||
export function TeacherHomeworkCard({ assignments }: { assignments: HomeworkAssignmentListItem[] }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<PenTool className="h-4 w-4 text-muted-foreground" />
|
||||
Homework
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/teacher/homework/assignments">Open list</Link>
|
||||
</Button>
|
||||
<Button asChild size="sm">
|
||||
<Link href="/teacher/homework/assignments/create">New</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3">
|
||||
{assignments.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={PenTool}
|
||||
title="No homework assignments yet"
|
||||
description="Create an assignment from an exam and publish it to students."
|
||||
action={{ label: "Create assignment", href: "/teacher/homework/assignments/create" }}
|
||||
className="border-none h-72"
|
||||
/>
|
||||
) : (
|
||||
assignments.slice(0, 6).map((a) => (
|
||||
<Link
|
||||
key={a.id}
|
||||
href={`/teacher/homework/assignments/${encodeURIComponent(a.id)}`}
|
||||
className="flex items-center justify-between rounded-md border bg-card px-4 py-3 hover:bg-muted/50"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium truncate">{a.title}</div>
|
||||
<div className="text-sm text-muted-foreground truncate">{a.sourceExamTitle}</div>
|
||||
</div>
|
||||
<Badge variant="outline" className="capitalize">
|
||||
{a.status}
|
||||
</Badge>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { PlusCircle, CheckSquare, Users } from "lucide-react";
|
||||
|
||||
export function TeacherQuickActions() {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button asChild size="sm">
|
||||
<Link href="/teacher/homework/assignments/create">
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
Create Assignment
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/teacher/homework/submissions">
|
||||
<CheckSquare className="mr-2 h-4 w-4" />
|
||||
Grade
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link href="/teacher/classes/my">
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
My Classes
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { Clock, MapPin, CalendarDays, CalendarX } from "lucide-react";
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state";
|
||||
|
||||
type TeacherTodayScheduleItem = {
|
||||
id: string;
|
||||
classId: string;
|
||||
className: string;
|
||||
course: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
location: string | null;
|
||||
};
|
||||
|
||||
export function TeacherSchedule({ items }: { items: TeacherTodayScheduleItem[] }) {
|
||||
const hasSchedule = items.length > 0;
|
||||
|
||||
return (
|
||||
<Card className="col-span-3">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CalendarDays className="h-4 w-4 text-muted-foreground" />
|
||||
Today's Schedule
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasSchedule ? (
|
||||
<EmptyState
|
||||
icon={CalendarX}
|
||||
title="No Classes Today"
|
||||
description="No timetable entries for today."
|
||||
action={{ label: "View schedule", href: "/teacher/classes/schedule" }}
|
||||
className="border-none h-[300px]"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<Link
|
||||
href={`/teacher/classes/schedule?classId=${encodeURIComponent(item.classId)}`}
|
||||
className="font-medium leading-none hover:underline"
|
||||
>
|
||||
{item.course}
|
||||
</Link>
|
||||
<div className="flex items-center text-sm text-muted-foreground">
|
||||
<Clock className="mr-1 h-3 w-3" />
|
||||
<span className="mr-3">{item.startTime}–{item.endTime}</span>
|
||||
{item.location ? (
|
||||
<>
|
||||
<MapPin className="mr-1 h-3 w-3" />
|
||||
<span>{item.location}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary">
|
||||
{item.className}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -2,45 +2,21 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui
|
||||
import { Users, BookOpen, FileCheck, Calendar } from "lucide-react";
|
||||
import { Skeleton } from "@/shared/components/ui/skeleton";
|
||||
|
||||
interface StatItem {
|
||||
title: string;
|
||||
value: string;
|
||||
description: string;
|
||||
icon: React.ElementType;
|
||||
}
|
||||
|
||||
const MOCK_STATS: StatItem[] = [
|
||||
{
|
||||
title: "Total Students",
|
||||
value: "1,248",
|
||||
description: "+12% from last semester",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: "Active Courses",
|
||||
value: "4",
|
||||
description: "2 lectures, 2 workshops",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
title: "To Grade",
|
||||
value: "28",
|
||||
description: "5 submissions pending review",
|
||||
icon: FileCheck,
|
||||
},
|
||||
{
|
||||
title: "Upcoming Classes",
|
||||
value: "3",
|
||||
description: "Today's schedule",
|
||||
icon: Calendar,
|
||||
},
|
||||
];
|
||||
|
||||
interface TeacherStatsProps {
|
||||
totalStudents: number;
|
||||
classCount: number;
|
||||
toGradeCount: number;
|
||||
todayScheduleCount: number;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function TeacherStats({ isLoading = false }: TeacherStatsProps) {
|
||||
export function TeacherStats({
|
||||
totalStudents,
|
||||
classCount,
|
||||
toGradeCount,
|
||||
todayScheduleCount,
|
||||
isLoading = false,
|
||||
}: TeacherStatsProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
@@ -60,9 +36,36 @@ export function TeacherStats({ isLoading = false }: TeacherStatsProps) {
|
||||
);
|
||||
}
|
||||
|
||||
const stats = [
|
||||
{
|
||||
title: "Total Students",
|
||||
value: String(totalStudents),
|
||||
description: "Across all your classes",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: "My Classes",
|
||||
value: String(classCount),
|
||||
description: "Active classes you manage",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
title: "To Grade",
|
||||
value: String(toGradeCount),
|
||||
description: "Submitted homework waiting for grading",
|
||||
icon: FileCheck,
|
||||
},
|
||||
{
|
||||
title: "Today",
|
||||
value: String(todayScheduleCount),
|
||||
description: "Scheduled items today",
|
||||
icon: Calendar,
|
||||
},
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{MOCK_STATS.map((stat, i) => (
|
||||
{stats.map((stat, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
@@ -1,21 +0,0 @@
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { PlusCircle, CheckSquare, MessageSquare } from "lucide-react";
|
||||
|
||||
export function TeacherQuickActions() {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button size="sm">
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
Create Assignment
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<CheckSquare className="mr-2 h-4 w-4" />
|
||||
Grade All
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<MessageSquare className="mr-2 h-4 w-4" />
|
||||
Message Class
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { Clock, MapPin, CalendarX } from "lucide-react";
|
||||
import { EmptyState } from "@/shared/components/ui/empty-state";
|
||||
|
||||
interface ScheduleItem {
|
||||
id: string;
|
||||
course: string;
|
||||
time: string;
|
||||
location: string;
|
||||
type: "Lecture" | "Workshop" | "Lab";
|
||||
}
|
||||
|
||||
// MOCK_SCHEDULE can be empty to test empty state
|
||||
const MOCK_SCHEDULE: ScheduleItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
course: "Advanced Web Development",
|
||||
time: "09:00 AM - 10:30 AM",
|
||||
location: "Room 304",
|
||||
type: "Lecture",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
course: "UI/UX Design Principles",
|
||||
time: "11:00 AM - 12:30 PM",
|
||||
location: "Design Studio A",
|
||||
type: "Workshop",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
course: "Frontend Frameworks",
|
||||
time: "02:00 PM - 03:30 PM",
|
||||
location: "Online (Zoom)",
|
||||
type: "Lecture",
|
||||
},
|
||||
];
|
||||
|
||||
export function TeacherSchedule() {
|
||||
const hasSchedule = MOCK_SCHEDULE.length > 0;
|
||||
|
||||
return (
|
||||
<Card className="col-span-3">
|
||||
<CardHeader>
|
||||
<CardTitle>Today's Schedule</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasSchedule ? (
|
||||
<EmptyState
|
||||
icon={CalendarX}
|
||||
title="No Classes Today"
|
||||
description="You have no classes scheduled for today. Enjoy your free time!"
|
||||
className="border-none h-[300px]"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{MOCK_SCHEDULE.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium leading-none">{item.course}</p>
|
||||
<div className="flex items-center text-sm text-muted-foreground">
|
||||
<Clock className="mr-1 h-3 w-3" />
|
||||
<span className="mr-3">{item.time}</span>
|
||||
<MapPin className="mr-1 h-3 w-3" />
|
||||
<span>{item.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant={item.type === "Lecture" ? "default" : "secondary"}>
|
||||
{item.type}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { TeacherQuickActions } from "@/modules/dashboard/components/teacher-quick-actions";
|
||||
import { TeacherStats } from "@/modules/dashboard/components/teacher-stats";
|
||||
import { TeacherSchedule } from "@/modules/dashboard/components/teacher-schedule";
|
||||
import { RecentSubmissions } from "@/modules/dashboard/components/recent-submissions";
|
||||
|
||||
// This component is now exclusively for the Teacher Role View
|
||||
export function TeacherDashboard() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Teacher Dashboard</h1>
|
||||
<TeacherQuickActions />
|
||||
</div>
|
||||
|
||||
<TeacherStats />
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
<TeacherSchedule />
|
||||
<RecentSubmissions />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
103
src/modules/dashboard/data-access.ts
Normal file
103
src/modules/dashboard/data-access.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
import "server-only"
|
||||
|
||||
import { cache } from "react"
|
||||
import { count, desc, eq, gt } from "drizzle-orm"
|
||||
|
||||
import { db } from "@/shared/db"
|
||||
import {
|
||||
chapters,
|
||||
classes,
|
||||
exams,
|
||||
homeworkAssignments,
|
||||
homeworkSubmissions,
|
||||
questions,
|
||||
sessions,
|
||||
textbooks,
|
||||
users,
|
||||
} from "@/shared/db/schema"
|
||||
import type { AdminDashboardData } from "./types"
|
||||
|
||||
export const getAdminDashboardData = cache(async (): Promise<AdminDashboardData> => {
|
||||
const now = new Date()
|
||||
|
||||
const [
|
||||
activeSessionsRow,
|
||||
userCountRow,
|
||||
userRoleRows,
|
||||
classCountRow,
|
||||
textbookCountRow,
|
||||
chapterCountRow,
|
||||
questionCountRow,
|
||||
examCountRow,
|
||||
homeworkAssignmentCountRow,
|
||||
homeworkAssignmentPublishedCountRow,
|
||||
homeworkSubmissionCountRow,
|
||||
homeworkSubmissionToGradeCountRow,
|
||||
recentUserRows,
|
||||
] = await Promise.all([
|
||||
db.select({ value: count() }).from(sessions).where(gt(sessions.expires, now)),
|
||||
db.select({ value: count() }).from(users),
|
||||
db.select({ role: users.role, value: count() }).from(users).groupBy(users.role),
|
||||
db.select({ value: count() }).from(classes),
|
||||
db.select({ value: count() }).from(textbooks),
|
||||
db.select({ value: count() }).from(chapters),
|
||||
db.select({ value: count() }).from(questions),
|
||||
db.select({ value: count() }).from(exams),
|
||||
db.select({ value: count() }).from(homeworkAssignments),
|
||||
db.select({ value: count() }).from(homeworkAssignments).where(eq(homeworkAssignments.status, "published")),
|
||||
db.select({ value: count() }).from(homeworkSubmissions),
|
||||
db.select({ value: count() }).from(homeworkSubmissions).where(eq(homeworkSubmissions.status, "submitted")),
|
||||
db
|
||||
.select({
|
||||
id: users.id,
|
||||
name: users.name,
|
||||
email: users.email,
|
||||
role: users.role,
|
||||
createdAt: users.createdAt,
|
||||
})
|
||||
.from(users)
|
||||
.orderBy(desc(users.createdAt))
|
||||
.limit(8),
|
||||
])
|
||||
|
||||
const activeSessionsCount = Number(activeSessionsRow[0]?.value ?? 0)
|
||||
const userCount = Number(userCountRow[0]?.value ?? 0)
|
||||
const classCount = Number(classCountRow[0]?.value ?? 0)
|
||||
const textbookCount = Number(textbookCountRow[0]?.value ?? 0)
|
||||
const chapterCount = Number(chapterCountRow[0]?.value ?? 0)
|
||||
const questionCount = Number(questionCountRow[0]?.value ?? 0)
|
||||
const examCount = Number(examCountRow[0]?.value ?? 0)
|
||||
const homeworkAssignmentCount = Number(homeworkAssignmentCountRow[0]?.value ?? 0)
|
||||
const homeworkAssignmentPublishedCount = Number(homeworkAssignmentPublishedCountRow[0]?.value ?? 0)
|
||||
const homeworkSubmissionCount = Number(homeworkSubmissionCountRow[0]?.value ?? 0)
|
||||
const homeworkSubmissionToGradeCount = Number(homeworkSubmissionToGradeCountRow[0]?.value ?? 0)
|
||||
|
||||
const userRoleCounts = userRoleRows
|
||||
.map((r) => ({ role: r.role ?? "unknown", count: Number(r.value ?? 0) }))
|
||||
.sort((a, b) => b.count - a.count)
|
||||
|
||||
const recentUsers = recentUserRows.map((u) => ({
|
||||
id: u.id,
|
||||
name: u.name,
|
||||
email: u.email,
|
||||
role: u.role,
|
||||
createdAt: u.createdAt.toISOString(),
|
||||
}))
|
||||
|
||||
return {
|
||||
activeSessionsCount,
|
||||
userCount,
|
||||
userRoleCounts,
|
||||
classCount,
|
||||
textbookCount,
|
||||
chapterCount,
|
||||
questionCount,
|
||||
examCount,
|
||||
homeworkAssignmentCount,
|
||||
homeworkAssignmentPublishedCount,
|
||||
homeworkSubmissionCount,
|
||||
homeworkSubmissionToGradeCount,
|
||||
recentUsers,
|
||||
}
|
||||
})
|
||||
|
||||
70
src/modules/dashboard/types.ts
Normal file
70
src/modules/dashboard/types.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import type { StudentDashboardGradeProps, StudentHomeworkAssignmentListItem } from "@/modules/homework/types"
|
||||
import type { TeacherClass, ClassScheduleItem } from "@/modules/classes/types"
|
||||
import type { HomeworkAssignmentListItem, HomeworkSubmissionListItem } from "@/modules/homework/types"
|
||||
|
||||
export type AdminDashboardUserRoleCount = {
|
||||
role: string
|
||||
count: number
|
||||
}
|
||||
|
||||
export type AdminDashboardRecentUser = {
|
||||
id: string
|
||||
name: string | null
|
||||
email: string
|
||||
role: string | null
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export type AdminDashboardData = {
|
||||
activeSessionsCount: number
|
||||
userCount: number
|
||||
userRoleCounts: AdminDashboardUserRoleCount[]
|
||||
classCount: number
|
||||
textbookCount: number
|
||||
chapterCount: number
|
||||
questionCount: number
|
||||
examCount: number
|
||||
homeworkAssignmentCount: number
|
||||
homeworkAssignmentPublishedCount: number
|
||||
homeworkSubmissionCount: number
|
||||
homeworkSubmissionToGradeCount: number
|
||||
recentUsers: AdminDashboardRecentUser[]
|
||||
}
|
||||
|
||||
export type StudentTodayScheduleItem = {
|
||||
id: string
|
||||
classId: string
|
||||
className: string
|
||||
course: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
location: string | null
|
||||
}
|
||||
|
||||
export type StudentDashboardProps = {
|
||||
studentName: string
|
||||
enrolledClassCount: number
|
||||
dueSoonCount: number
|
||||
overdueCount: number
|
||||
gradedCount: number
|
||||
todayScheduleItems: StudentTodayScheduleItem[]
|
||||
upcomingAssignments: StudentHomeworkAssignmentListItem[]
|
||||
grades: StudentDashboardGradeProps
|
||||
}
|
||||
|
||||
export type TeacherTodayScheduleItem = {
|
||||
id: string
|
||||
classId: string
|
||||
className: string
|
||||
course: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
location: string | null
|
||||
}
|
||||
|
||||
export type TeacherDashboardData = {
|
||||
classes: TeacherClass[]
|
||||
schedule: ClassScheduleItem[]
|
||||
assignments: HomeworkAssignmentListItem[]
|
||||
submissions: HomeworkSubmissionListItem[]
|
||||
}
|
||||
@@ -75,8 +75,7 @@ export async function createExamAction(
|
||||
startTime: scheduled ? new Date(scheduled) : null,
|
||||
status: "draft",
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Failed to create exam:", error)
|
||||
} catch {
|
||||
return {
|
||||
success: false,
|
||||
message: "Database error: Failed to create exam",
|
||||
@@ -156,8 +155,7 @@ export async function updateExamAction(
|
||||
await db.update(exams).set(updateData).where(eq(exams.id, examId))
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Failed to update exam:", error)
|
||||
} catch {
|
||||
return {
|
||||
success: false,
|
||||
message: "Database error: Failed to update exam",
|
||||
@@ -197,8 +195,7 @@ export async function deleteExamAction(
|
||||
|
||||
try {
|
||||
await db.delete(exams).where(eq(exams.id, examId))
|
||||
} catch (error) {
|
||||
console.error("Failed to delete exam:", error)
|
||||
} catch {
|
||||
return {
|
||||
success: false,
|
||||
message: "Database error: Failed to delete exam",
|
||||
@@ -292,8 +289,7 @@ export async function duplicateExamAction(
|
||||
)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Failed to duplicate exam:", error)
|
||||
} catch {
|
||||
return {
|
||||
success: false,
|
||||
message: "Database error: Failed to duplicate exam",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user