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

web/app/(dashboard)/dashboard/_components/team-load-panel.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { useI18n } from "@/i18n/provider"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import type { DashboardOverview } from "@/lib/api/dashboard"
+
+type TeamLoadPanelProps = {
+  agentStats: DashboardOverview["agentStats"]
+}
+
+function getLoadTone(loadRate: number) {
+  if (loadRate >= 85) {
+    return "bg-red-500"
+  }
+  if (loadRate >= 60) {
+    return "bg-amber-500"
+  }
+  return "bg-emerald-500"
+}
+
+export function TeamLoadPanel({ agentStats }: TeamLoadPanelProps) {
+  const t = useI18n()
+
+  return (
+    <Card className="rounded-md shadow-none">
+      <CardHeader>
+        <CardTitle>{t("dashboardHome.teamLoad")}</CardTitle>
+        <CardDescription>
+          {t("dashboardHome.teamLoadDescription", {
+            online: agentStats.onlineAgents,
+            busy: agentStats.busyAgents,
+            offline: agentStats.offlineAgents,
+          })}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {agentStats.teamLoads.length === 0 ? (
+          <div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
+            {t("dashboardHome.noTeamData")}
+          </div>
+        ) : (
+          agentStats.teamLoads.map((item) => (
+            <div key={item.teamId} className="rounded-md border p-4">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <div className="font-medium">{item.teamName}</div>
+                    {item.hasScheduleNow ? (
+                      <Badge variant="secondary">{t("dashboardHome.scheduled")}</Badge>
+                    ) : (
+                      <Badge variant="outline">{t("dashboardHome.notScheduled")}</Badge>
+                    )}
+                  </div>
+                  <div className="mt-1 text-sm text-muted-foreground">
+                    {t("dashboardHome.teamStats", {
+                      total: item.totalAgents,
+                      online: item.onlineAgents,
+                      busy: item.busyAgents,
+                      offline: item.offlineAgents,
+                    })}
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="text-2xl font-semibold">{item.loadRate.toFixed(1)}%</div>
+                  <div className="text-xs text-muted-foreground">
+                    {t("dashboardHome.load", {
+                      processing: item.processingConversations,
+                      capacity: item.maxConcurrentCapacity || 0,
+                    })}
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-4 h-2 rounded-full bg-muted">
+                <div
+                  className={`h-2 rounded-full ${getLoadTone(item.loadRate)}`}
+                  style={{ width: `${Math.min(item.loadRate, 100)}%` }}
+                />
+              </div>
+
+              <div className="mt-4 grid gap-3 text-sm md:grid-cols-2 xl:grid-cols-4">
+                <div className="rounded-md bg-muted/35 px-3 py-2">
+                  <div className="text-muted-foreground">{t("dashboardHome.waiting")}</div>
+                  <div className="mt-1 text-lg font-semibold">{item.waitingConversations}</div>
+                </div>
+                <div className="rounded-md bg-muted/35 px-3 py-2">
+                  <div className="text-muted-foreground">{t("dashboardHome.processing")}</div>
+                  <div className="mt-1 text-lg font-semibold">{item.processingConversations}</div>
+                </div>
+                <div className="rounded-md bg-muted/35 px-3 py-2">
+                  <div className="text-muted-foreground">{t("dashboardHome.capacity")}</div>
+                  <div className="mt-1 text-lg font-semibold">{item.maxConcurrentCapacity}</div>
+                </div>
+                <div className="rounded-md bg-muted/35 px-3 py-2">
+                  <div className="text-muted-foreground">{t("dashboardHome.busyAgents")}</div>
+                  <div className="mt-1 text-lg font-semibold">{item.busyAgents}</div>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  )
+}