chore: import clean Agent Desk snapshot (6/7)

web/components/data-table.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import {
+  ArrowUpRightIcon,
+  CircleCheckIcon,
+  Clock3Icon,
+  FilterIcon,
+} from "lucide-react"
+
+import { formatDateTime } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
+import { useI18n } from "@/i18n/provider"
+
+type DashboardTask = {
+  id: number
+  module: string
+  owner: string
+  status: string
+  progress: string
+  updatedAt: string
+}
+
+export function DataTable({ data }: { data: DashboardTask[] }) {
+  const t = useI18n()
+  return (
+    <Tabs
+      defaultValue="modules"
+      className="w-full flex-col justify-start gap-6 px-4 lg:px-6"
+    >
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <CardTitle className="text-xl">{t("scaffold.moduleBoard")}</CardTitle>
+          <CardDescription className="mt-1">
+            {t("scaffold.moduleBoardDescription")}
+          </CardDescription>
+        </div>
+        <div className="flex items-center gap-2">
+          <Input className="w-full md:w-64" placeholder={t("scaffold.searchModule")} />
+          <Button variant="outline">
+            <FilterIcon />
+            {t("scaffold.filter")}
+          </Button>
+        </div>
+      </div>
+      <TabsList className="w-fit">
+        <TabsTrigger value="modules">{t("scaffold.moduleList")}</TabsTrigger>
+        <TabsTrigger value="milestones">{t("scaffold.milestones")}</TabsTrigger>
+      </TabsList>
+      <TabsContent value="modules" className="m-0">
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("scaffold.phaseOneModules")}</CardTitle>
+            <CardDescription>
+              {t("scaffold.phaseOneDescription")}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-hidden rounded-xl border">
+              <Table>
+                <TableHeader className="bg-muted/50">
+                  <TableRow>
+                    <TableHead>{t("scaffold.module")}</TableHead>
+                    <TableHead>{t("scaffold.owner")}</TableHead>
+                    <TableHead>{t("scaffold.status")}</TableHead>
+                    <TableHead>{t("scaffold.progress")}</TableHead>
+                    <TableHead className="text-right">{t("scaffold.updatedAt")}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {data.map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell className="font-medium">{item.module}</TableCell>
+                      <TableCell>{item.owner}</TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className="px-1.5">
+                          {item.status === t("scaffold.done") ? (
+                            <CircleCheckIcon className="fill-green-500 text-green-500" />
+                          ) : (
+                            <Clock3Icon className="text-amber-500" />
+                          )}
+                          {item.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{item.progress}</TableCell>
+                      <TableCell className="text-right text-muted-foreground">
+                        {formatDateTime(item.updatedAt)}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="milestones" className="m-0">
+        <Card className="border-dashed">
+          <CardHeader>
+            <CardTitle>{t("scaffold.nextMilestone")}</CardTitle>
+            <CardDescription>
+              {t("scaffold.nextMilestoneDescription")}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3">
+            {[
+              t("scaffold.milestoneLogin"),
+              t("scaffold.milestoneForms"),
+              t("scaffold.milestoneKnowledge"),
+            ].map((item) => (
+              <div
+                key={item}
+                className="flex items-center justify-between rounded-xl border px-4 py-3"
+              >
+                <span className="text-sm">{item}</span>
+                <ArrowUpRightIcon className="size-4 text-muted-foreground" />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}