15 lines
2.0 KiB
TypeScript
15 lines
2.0 KiB
TypeScript
import { useMemo, useState } from "react"
|
|
import { DashboardLayout, DashboardHeader, DashboardMain, DashboardContent, Card, CardHeader, CardTitle, CardContent, Progress, Tabs, TabsList, TabsTrigger, TabsContent, DataTable, useDataTable, type DataTableColumnDef } from "@hm-design/ui"
|
|
import { Heading } from "./Heading"
|
|
|
|
type Summary = { category: string; total: number; completed: number }
|
|
const columns: DataTableColumnDef<Summary>[] = [{ accessorKey: "category", header: "업무 분류" }, { accessorKey: "total", header: "전체 건수" }, { accessorKey: "completed", header: "완료 건수" }]
|
|
|
|
export function Dashboard({ statistics = false }: { statistics?: boolean }) {
|
|
const [period, setPeriod] = useState("week")
|
|
const data = useMemo(() => ["설계", "시공", "안전"].map((category, i) => ({ category, total: (period === "week" ? 12 : 48) + i, completed: (period === "week" ? 8 : 32) + i })), [period])
|
|
const table = useDataTable({ columns, data })
|
|
const title = statistics ? "통계 Dashboard" : "업무 Dashboard"
|
|
return <DashboardLayout header={<DashboardHeader><strong>{title}</strong></DashboardHeader>}><DashboardMain><DashboardContent><Heading title={title} description="기간별 건수와 진행률을 확인합니다."/><Tabs value={period} onValueChange={setPeriod}><TabsList aria-label="조회 기간"><TabsTrigger value="week">이번 주</TabsTrigger><TabsTrigger value="month">이번 달</TabsTrigger></TabsList>{["week", "month"].map(p => <TabsContent key={p} value={p}><div className="quality-metrics">{["진행", "대기", "완료"].map((label, i) => <Card key={label}><CardHeader><CardTitle>{label}</CardTitle></CardHeader><CardContent><p>{(p === "week" ? 12 : 48) + i}건</p><Progress value={40 + i * 20} aria-label={`${label} 진행률`}/></CardContent></Card>)}</div></TabsContent>)}</Tabs>{statistics && <Card><CardHeader><CardTitle>업무 분류별 집계</CardTitle></CardHeader><CardContent><DataTable table={table}/></CardContent></Card>}</DashboardContent></DashboardMain></DashboardLayout>
|
|
}
|