dashboard: - Add comparison-badge, dashboard-notification-widget, dashboard-responsive-layout, dashboard-time-range-filter - Add parent-dashboard components directory - Add config, hooks, and services directories diagnostic: - Add role-config and services directory elective: - Add elective-course-detail, elective-stats-cards, parent-selection-view components - Add data-access-settings and data-access-stats
107 lines
5.1 KiB
TypeScript
107 lines
5.1 KiB
TypeScript
import Link from "next/link"
|
|
import { PenTool } from "lucide-react"
|
|
import { getLocale, getTranslations } from "next-intl/server"
|
|
|
|
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 { StatusBadge } from "@/shared/components/ui/status-badge"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
|
|
import { formatDate, cn } from "@/shared/lib/utils"
|
|
import { getActionLabelKey, getActionVariant, getDueUrgency } from "@/modules/dashboard/lib/dashboard-utils"
|
|
import type { StudentHomeworkAssignmentListItem } from "@/modules/homework/types"
|
|
import {
|
|
STUDENT_HOMEWORK_PROGRESS_VARIANT,
|
|
STUDENT_HOMEWORK_PROGRESS_LABEL,
|
|
} from "@/modules/homework/types"
|
|
|
|
export async function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomingAssignments: StudentHomeworkAssignmentListItem[] }) {
|
|
const t = await getTranslations("dashboard")
|
|
const locale = await getLocale()
|
|
const hasAssignments = upcomingAssignments.length > 0
|
|
const now = new Date()
|
|
|
|
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" />
|
|
{t("sections.upcomingAssignments")}
|
|
</CardTitle>
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href="/student/learning/assignments">{t("quickActions.viewAll")}</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!hasAssignments ? (
|
|
<EmptyState
|
|
icon={PenTool}
|
|
title={t("empty.noAssignmentsStudent")}
|
|
description={t("empty.noAssignmentsStudentDesc")}
|
|
action={{ label: t("quickActions.viewAll"), href: "/student/learning/assignments" }}
|
|
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">{t("table.title")}</TableHead>
|
|
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.status")}</TableHead>
|
|
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.due")}</TableHead>
|
|
<TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.score")}</TableHead>
|
|
<TableHead className="text-xs font-medium uppercase text-muted-foreground text-right">{t("table.action")}</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{upcomingAssignments.map((a) => {
|
|
const urgency = getDueUrgency(a.dueAt, now)
|
|
const isGraded = a.progressStatus === "graded"
|
|
|
|
return (
|
|
<TableRow key={a.id} className="h-12">
|
|
<TableCell className="font-medium">
|
|
<div className="flex items-center gap-2">
|
|
<Link href={`/student/learning/assignments/${a.id}`} className="truncate hover:underline">
|
|
{a.title}
|
|
</Link>
|
|
{!isGraded && urgency === "overdue" && (
|
|
<Badge variant="destructive" className="h-5 px-1.5 text-[10px] uppercase">{t("badge.late")}</Badge>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<StatusBadge
|
|
status={a.progressStatus}
|
|
variantMap={STUDENT_HOMEWORK_PROGRESS_VARIANT}
|
|
labelMap={STUDENT_HOMEWORK_PROGRESS_LABEL}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className={cn(
|
|
"text-muted-foreground",
|
|
!isGraded && urgency === "overdue" && "text-destructive font-medium",
|
|
!isGraded && urgency === "urgent" && "text-orange-500 font-medium"
|
|
)}>
|
|
{a.dueAt ? formatDate(a.dueAt, locale) : "-"}
|
|
</TableCell>
|
|
<TableCell className="tabular-nums">{a.latestScore ?? "-"}</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button asChild size="sm" variant={getActionVariant(a.progressStatus)} className="h-7 text-xs">
|
|
<Link href={`/student/learning/assignments/${a.id}`}>
|
|
{t(getActionLabelKey(a.progressStatus))}
|
|
</Link>
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|