@exxatdesignux/ui 0.0.5 → 0.0.7

package/template/components/data-view-dashboard-charts-team.tsx

@@ -0,0 +1,968 @@
+"use client"
+
+/**
+ * Team **Data** view dashboard — filtered `TeamMember[]` with the same canvas pattern as Placements:
+ * key metrics + charts, show/hide, reorder, width, chart type, persistence.
+ */
+
+import * as React from "react"
+import {
+  closestCorners,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from "recharts"
+import { ChartCard, ChartDataTable, ChartFigure, type ChartLeoInsight } from "@/components/charts-overview"
+import { useChartVariant } from "@/contexts/chart-variant-context"
+import { KeyMetrics, type MetricInsight, type MetricItem } from "@/components/key-metrics"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ViewSegmentedControl } from "@/components/ui/view-segmented-control"
+import { Tip } from "@/components/ui/tip"
+import { DragHandleGripIcon } from "@/components/ui/drag-handle-grip"
+import {
+  ChartContainer,
+  ChartTooltip,
+  chartTooltipKeyboardSyncProps,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart"
+import {
+  KEY_METRICS_KPI_COUNT_DEFAULT,
+  KEY_METRICS_KPI_COUNT_MAX,
+  KEY_METRICS_KPI_COUNT_MIN,
+  mergeDashboardLayoutGeneric,
+} from "@/lib/dashboard-layout-merge"
+import { cn } from "@/lib/utils"
+import type { TeamMember } from "@/lib/mock/team"
+import {
+  KEY_METRICS_CARD_ID,
+  applyVisibleReorder,
+  type ChartType,
+  type DashboardLayout,
+} from "@/components/data-view-dashboard-charts"
+import {
+  CHART_KBD_ACTIVE_BAR,
+  CHART_KBD_ACTIVE_PIE_SHAPE,
+} from "@/lib/chart-keyboard-selection"
+import {
+  loadDataViewLayout,
+  saveDataViewLayout,
+} from "@/lib/data-view-dashboard-storage"
+
+const STATUS_CHART_CFG: ChartConfig = {
+  value: { label: "Members", color: "var(--primary)" },
+}
+
+const ROLE_CHART_CFG: ChartConfig = {
+  value: { label: "Members", color: "var(--primary)" },
+}
+
+interface TeamDashboardCardDef {
+  id: string
+  title: string
+  description: string
+  defaultSpan: 1 | 2
+  defaultChartType: ChartType
+  chartTypes: { type: ChartType; label: string; icon: string }[]
+}
+
+export const ALL_TEAM_DASHBOARD_CARDS: TeamDashboardCardDef[] = [
+  {
+    id: KEY_METRICS_CARD_ID,
+    title: "Key metrics",
+    description: "Summary KPIs for the filtered roster",
+    defaultSpan: 2,
+    defaultChartType: "bar",
+    chartTypes: [],
+  },
+  {
+    id: "team-by-status",
+    title: "Members by status",
+    description: "Active, away, and invited in this view",
+    defaultSpan: 1,
+    defaultChartType: "bar",
+    chartTypes: [
+      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
+      { type: "horizontal-bar", label: "Horizontal Bar", icon: "fa-light fa-chart-bar fa-rotate-90" },
+      { type: "pie", label: "Donut", icon: "fa-light fa-chart-pie" },
+    ],
+  },
+  {
+    id: "team-by-role",
+    title: "Members by role",
+    description: "Top roles in the filtered roster",
+    defaultSpan: 1,
+    defaultChartType: "horizontal-bar",
+    chartTypes: [
+      { type: "horizontal-bar", label: "Horizontal Bar", icon: "fa-light fa-chart-bar fa-rotate-90" },
+      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
+      { type: "pie", label: "Donut", icon: "fa-light fa-chart-pie" },
+    ],
+  },
+]
+
+export const DEFAULT_TEAM_VISIBLE_CARDS = ALL_TEAM_DASHBOARD_CARDS.map(c => c.id)
+export const DEFAULT_TEAM_SPANS: Record<string, 1 | 2> = Object.fromEntries(
+  ALL_TEAM_DASHBOARD_CARDS.map(c => [c.id, c.defaultSpan]),
+)
+export const DEFAULT_TEAM_CHART_TYPES: Record<string, ChartType> = Object.fromEntries(
+  ALL_TEAM_DASHBOARD_CARDS.map(c => [c.id, c.defaultChartType]),
+)
+
+const TEAM_CHART_LEO_INSIGHTS: Partial<Record<string, ChartLeoInsight>> = {
+  "team-by-status": {
+    headline: "Invited members may be waiting on acceptance",
+    explanation:
+      "A noticeable invited slice often means stale invites or slow onboarding. Clearing or re-sending can tighten roster accuracy for permissions and assignments.",
+  },
+  "team-by-role": {
+    headline: "A few roles carry most of the roster",
+    explanation:
+      "When bars skew toward a small set of roles, turnover in those groups has an outsized impact. Leo can suggest backup owners or cross-training patterns to reduce single points of failure.",
+  },
+}
+
+export function loadTeamDashboardLayout(): DashboardLayout | null {
+  const v = loadDataViewLayout("team")
+  if (!v) return null
+  return {
+    visible: v.visible,
+    order: v.order,
+    spans: v.spans,
+    chartTypes: v.chartTypes as Record<string, ChartType> | undefined,
+    keyMetricsKpiCount: v.keyMetricsKpiCount,
+  }
+}
+
+export function mergeTeamDashboardLayout(saved: DashboardLayout | null): DashboardLayout {
+  const defaults = {
+    visible: [...DEFAULT_TEAM_VISIBLE_CARDS],
+    order: ALL_TEAM_DASHBOARD_CARDS.map(c => c.id),
+    spans: { ...DEFAULT_TEAM_SPANS },
+    chartTypes: { ...DEFAULT_TEAM_CHART_TYPES } as Record<string, string>,
+    keyMetricsKpiCount: KEY_METRICS_KPI_COUNT_DEFAULT,
+  }
+  const ids = ALL_TEAM_DASHBOARD_CARDS.map(c => c.id)
+  const m = mergeDashboardLayoutGeneric(saved, defaults, ids)
+  return {
+    visible: m.visible,
+    order: m.order,
+    spans: m.spans as Record<string, 1 | 2>,
+    chartTypes: m.chartTypes as Record<string, ChartType>,
+    keyMetricsKpiCount: m.keyMetricsKpiCount,
+  }
+}
+
+export function saveTeamDashboardLayout(layout: DashboardLayout) {
+  saveDataViewLayout("team", {
+    visible: layout.visible,
+    order: layout.order,
+    spans: layout.spans,
+    chartTypes: layout.chartTypes as Record<string, string> | undefined,
+    keyMetricsKpiCount: layout.keyMetricsKpiCount,
+  })
+}
+
+function EmptyChart({ message = "No team members match the current filters." }: { message?: string }) {
+  return (
+    <div className="flex h-[200px] items-center justify-center text-sm text-muted-foreground" role="status">
+      {message}
+    </div>
+  )
+}
+
+function TeamByStatusChart({ members, chartType }: { members: TeamMember[]; chartType: ChartType }) {
+  const byStatus = React.useMemo(() => {
+    let active = 0
+    let away = 0
+    let invited = 0
+    for (const m of members) {
+      if (m.status === "active") active++
+      else if (m.status === "away") away++
+      else invited++
+    }
+    return [
+      { name: "Active", value: active },
+      { name: "Away", value: away },
+      { name: "Invited", value: invited },
+    ]
+  }, [members])
+
+  if (members.length === 0) return <EmptyChart />
+
+  const statusSummary = `Roster distribution: ${byStatus.map(d => `${d.name} ${d.value}`).join(", ")}. Total ${members.length} members.`
+
+  if (chartType === "pie") {
+    return (
+      <ChartFigure label="Members by status" summary={statusSummary} dataLength={byStatus.length}>
+        {(activeIndex) => (
+          <>
+            <ChartContainer config={STATUS_CHART_CFG} className="mx-auto aspect-square max-h-[220px] w-full">
+              <PieChart>
+                <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+                <Pie
+                  data={byStatus}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius={48}
+                  outerRadius={80}
+                  strokeWidth={2}
+                  stroke="var(--card)"
+                  activeIndex={activeIndex ?? undefined}
+                  activeShape={CHART_KBD_ACTIVE_PIE_SHAPE}
+                >
+                  {byStatus.map((_, i) => (
+                    <Cell
+                      key={i}
+                      fill={i === 0 ? "var(--color-chart-2)" : i === 1 ? "var(--color-chart-3)" : "var(--color-chart-4)"}
+                    />
+                  ))}
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+            <ChartDataTable
+              caption="Members by status"
+              headers={["Status", "Members"]}
+              rows={byStatus.map(d => [d.name, d.value])}
+            />
+          </>
+        )}
+      </ChartFigure>
+    )
+  }
+
+  if (chartType === "horizontal-bar") {
+    return (
+      <ChartFigure label="Members by status" summary={statusSummary} dataLength={byStatus.length}>
+        {(activeIndex) => (
+          <>
+            <ChartContainer config={STATUS_CHART_CFG} className="h-[220px] w-full">
+              <BarChart data={byStatus} layout="vertical" margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
+                <XAxis type="number" allowDecimals={false} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
+                <YAxis type="category" dataKey="name" width={72} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
+                <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+                <Bar
+                  dataKey="value"
+                  fill="var(--color-chart-2)"
+                  radius={[0, 4, 4, 0]}
+                  maxBarSize={22}
+                  activeBar={CHART_KBD_ACTIVE_BAR}
+                  activeIndex={activeIndex ?? undefined}
+                >
+                  {byStatus.map((_, i) => (
+                    <Cell key={i} fill="var(--color-chart-2)" />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ChartContainer>
+            <ChartDataTable
+              caption="Members by status"
+              headers={["Status", "Members"]}
+              rows={byStatus.map(d => [d.name, d.value])}
+            />
+          </>
+        )}
+      </ChartFigure>
+    )
+  }
+
+  return (
+    <ChartFigure label="Members by status" summary={statusSummary} dataLength={byStatus.length}>
+      {(activeIndex) => (
+        <>
+          <ChartContainer config={STATUS_CHART_CFG} className="h-[220px] w-full">
+            <BarChart data={byStatus} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
+              <YAxis allowDecimals={false} width={36} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
+              <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+              <Bar
+                dataKey="value"
+                fill="var(--color-chart-2)"
+                radius={[4, 4, 0, 0]}
+                maxBarSize={48}
+                activeBar={CHART_KBD_ACTIVE_BAR}
+                activeIndex={activeIndex ?? undefined}
+              >
+                {byStatus.map((_, i) => (
+                  <Cell key={i} fill="var(--color-chart-2)" />
+                ))}
+              </Bar>
+            </BarChart>
+          </ChartContainer>
+          <ChartDataTable
+            caption="Members by status"
+            headers={["Status", "Members"]}
+            rows={byStatus.map(d => [d.name, d.value])}
+          />
+        </>
+      )}
+    </ChartFigure>
+  )
+}
+
+function TeamByRoleChart({ members, chartType }: { members: TeamMember[]; chartType: ChartType }) {
+  const byRole = React.useMemo(() => {
+    const map = new Map<string, number>()
+    for (const m of members) map.set(m.role, (map.get(m.role) ?? 0) + 1)
+    return [...map.entries()]
+      .map(([name, value]) => ({
+        name: name.length > 28 ? `${name.slice(0, 26)}…` : name,
+        value,
+      }))
+      .sort((a, b) => b.value - a.value)
+      .slice(0, 10)
+  }, [members])
+
+  if (members.length === 0) return <EmptyChart />
+
+  const roleSummary = `Top ${byRole.length} roles by member count.`
+
+  if (chartType === "pie") {
+    return (
+      <ChartFigure label="Members by role" summary={roleSummary} dataLength={byRole.length}>
+        {(activeIndex) => (
+          <>
+            <ChartContainer config={ROLE_CHART_CFG} className="mx-auto aspect-square max-h-[220px] w-full">
+              <PieChart>
+                <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+                <Pie
+                  data={byRole}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius={48}
+                  outerRadius={80}
+                  strokeWidth={2}
+                  stroke="var(--card)"
+                  activeIndex={activeIndex ?? undefined}
+                  activeShape={CHART_KBD_ACTIVE_PIE_SHAPE}
+                >
+                  {byRole.map((_, i) => (
+                    <Cell
+                      key={i}
+                      fill={["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)"][i % 5]}
+                    />
+                  ))}
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+            <ChartDataTable
+              caption="Members by role"
+              headers={["Role", "Members"]}
+              rows={byRole.map(d => [d.name, d.value])}
+            />
+          </>
+        )}
+      </ChartFigure>
+    )
+  }
+
+  if (chartType === "bar") {
+    return (
+      <ChartFigure label="Members by role" summary={roleSummary} dataLength={byRole.length}>
+        {(activeIndex) => (
+          <>
+            <ChartContainer config={ROLE_CHART_CFG} className="h-[220px] w-full">
+              <BarChart data={byRole} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
+                <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
+                <YAxis allowDecimals={false} width={32} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
+                <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+                <Bar
+                  dataKey="value"
+                  fill="var(--color-chart-4)"
+                  radius={[4, 4, 0, 0]}
+                  maxBarSize={40}
+                  activeBar={CHART_KBD_ACTIVE_BAR}
+                  activeIndex={activeIndex ?? undefined}
+                >
+                  {byRole.map((_, i) => (
+                    <Cell key={i} fill="var(--color-chart-4)" />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ChartContainer>
+            <ChartDataTable
+              caption="Members by role"
+              headers={["Role", "Members"]}
+              rows={byRole.map(d => [d.name, d.value])}
+            />
+          </>
+        )}
+      </ChartFigure>
+    )
+  }
+
+  return (
+    <ChartFigure label="Members by role" summary={roleSummary} dataLength={byRole.length}>
+      {(activeIndex) => (
+        <>
+          <ChartContainer config={ROLE_CHART_CFG} className="h-[220px] w-full">
+            <BarChart data={byRole} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+              <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
+              <XAxis type="number" allowDecimals={false} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
+              <YAxis type="category" dataKey="name" width={120} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
+              <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+              <Bar
+                dataKey="value"
+                fill="var(--color-chart-4)"
+                radius={[0, 4, 4, 0]}
+                maxBarSize={22}
+                activeBar={CHART_KBD_ACTIVE_BAR}
+                activeIndex={activeIndex ?? undefined}
+              >
+                {byRole.map((_, i) => (
+                  <Cell key={i} fill="var(--color-chart-4)" />
+                ))}
+              </Bar>
+            </BarChart>
+          </ChartContainer>
+          <ChartDataTable
+            caption="Members by role"
+            headers={["Role", "Members"]}
+            rows={byRole.map(d => [d.name, d.value])}
+          />
+        </>
+      )}
+    </ChartFigure>
+  )
+}
+
+const TEAM_CHART_RENDERERS: Record<string, React.FC<{ members: TeamMember[]; chartType: ChartType }>> = {
+  "team-by-status": TeamByStatusChart,
+  "team-by-role": TeamByRoleChart,
+}
+
+function SortableTeamDashboardCard({
+  card,
+  members,
+  span,
+  chartType,
+  cardIndex,
+  totalCards,
+  onSpanChange,
+  onChartTypeChange,
+  onRemove,
+  onMoveStep,
+  keyMetrics,
+  keyMetricsKpiCount,
+  onKeyMetricsKpiCountChange,
+}: {
+  card: TeamDashboardCardDef
+  members: TeamMember[]
+  span: 1 | 2
+  chartType: ChartType
+  cardIndex: number
+  totalCards: number
+  onSpanChange: (id: string, span: 1 | 2) => void
+  onChartTypeChange: (id: string, t: ChartType) => void
+  onRemove: (id: string) => void
+  onMoveStep: (direction: -1 | 1) => void
+  keyMetrics?: { metrics: MetricItem[]; insight: MetricInsight } | null
+  keyMetricsKpiCount: number
+  onKeyMetricsKpiCountChange?: (n: number) => void
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: card.id })
+  const { chartVariant } = useChartVariant()
+
+  const style: React.CSSProperties = {
+    ...(transform ? { transform: CSS.Transform.toString(transform) } : {}),
+    transition,
+  }
+
+  const isKeyMetrics = card.id === KEY_METRICS_CARD_ID
+  const Renderer = isKeyMetrics ? null : TEAM_CHART_RENDERERS[card.id]
+  if (!isKeyMetrics && !Renderer) return null
+  if (isKeyMetrics && !keyMetrics) return null
+
+  const canMoveEarlier = cardIndex > 0
+  const canMoveLater = cardIndex < totalCards - 1
+  const chartLeoInsight = TEAM_CHART_LEO_INSIGHTS[card.id]
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "group flex min-h-0 w-full min-w-0 flex-col self-start rounded-xl border-2 border-dashed border-border bg-transparent p-2",
+        span === 2 ? "lg:col-span-2" : undefined,
+        isDragging && "z-20 opacity-95 ring-2 ring-ring",
+      )}
+    >
+      <div className="mb-2 flex w-full min-w-0 flex-wrap items-center gap-2" role="toolbar" aria-label={`${card.title} layout controls`}>
+        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+          <Tip label="Drag to reorder" side="top">
+            <button
+              type="button"
+              ref={setActivatorNodeRef}
+              className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`Drag to reorder ${card.title}`}
+              {...attributes}
+              {...listeners}
+            >
+              <DragHandleGripIcon className="text-[15px]" />
+            </button>
+          </Tip>
+          {card.chartTypes.length > 0 ? (
+            <ViewSegmentedControl
+              aria-label={`Chart type for ${card.title}`}
+              iconOnly
+              value={chartType}
+              onValueChange={v => onChartTypeChange(card.id, v as ChartType)}
+              options={card.chartTypes.map(opt => ({
+                value: opt.type,
+                label: opt.label,
+                icon: opt.icon,
+              }))}
+            />
+          ) : null}
+          {isKeyMetrics && onKeyMetricsKpiCountChange ? (
+            <ViewSegmentedControl
+              aria-label="Number of KPIs to show"
+              iconOnly={false}
+              value={String(keyMetricsKpiCount)}
+              onValueChange={v => onKeyMetricsKpiCountChange(Number(v))}
+              options={Array.from(
+                { length: KEY_METRICS_KPI_COUNT_MAX - KEY_METRICS_KPI_COUNT_MIN + 1 },
+                (_, i) => {
+                  const n = KEY_METRICS_KPI_COUNT_MIN + i
+                  return { value: String(n), label: String(n) }
+                },
+              )}
+            />
+          ) : null}
+          <ViewSegmentedControl
+            aria-label={`Width for ${card.title}`}
+            iconOnly
+            value={String(span) as "1" | "2"}
+            onValueChange={v => onSpanChange(card.id, Number(v) as 1 | 2)}
+            options={[
+              { value: "1", label: "Half width", icon: "fa-light fa-table-columns" },
+              { value: "2", label: "Full width (all columns)", icon: "fa-light fa-maximize" },
+            ]}
+          />
+        </div>
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          <div
+            className="pointer-events-none flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
+            role="group"
+            aria-label={`Reorder ${card.title}`}
+          >
+            <div className="flex items-center gap-0.5 lg:hidden">
+              <Tip label="Move up" side="top">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="size-7 shrink-0"
+                  disabled={!canMoveEarlier}
+                  aria-label={`Move ${card.title} up`}
+                  onClick={() => onMoveStep(-1)}
+                >
+                  <i className="fa-light fa-chevron-up text-xs" aria-hidden="true" />
+                </Button>
+              </Tip>
+              <Tip label="Move down" side="top">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="size-7 shrink-0"
+                  disabled={!canMoveLater}
+                  aria-label={`Move ${card.title} down`}
+                  onClick={() => onMoveStep(1)}
+                >
+                  <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
+                </Button>
+              </Tip>
+            </div>
+            <div className="hidden items-center gap-0.5 lg:flex">
+              <Tip label="Move left" side="top">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="size-7 shrink-0"
+                  disabled={!canMoveEarlier}
+                  aria-label={`Move ${card.title} left`}
+                  onClick={() => onMoveStep(-1)}
+                >
+                  <i className="fa-light fa-chevron-left text-xs" aria-hidden="true" />
+                </Button>
+              </Tip>
+              <Tip label="Move right" side="top">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="size-7 shrink-0"
+                  disabled={!canMoveLater}
+                  aria-label={`Move ${card.title} right`}
+                  onClick={() => onMoveStep(1)}
+                >
+                  <i className="fa-light fa-chevron-right text-xs" aria-hidden="true" />
+                </Button>
+              </Tip>
+            </div>
+          </div>
+          <Tip label={`Remove ${card.title}`} side="top">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="size-8 shrink-0 text-muted-foreground hover:text-destructive"
+              aria-label={`Remove ${card.title} from dashboard`}
+              onClick={() => onRemove(card.id)}
+            >
+              <i className="fa-light fa-trash text-[13px]" aria-hidden="true" />
+            </Button>
+          </Tip>
+        </div>
+      </div>
+      {isKeyMetrics && keyMetrics ? (
+        <KeyMetrics
+          variant="card"
+          title={card.title}
+          description={card.description}
+          metrics={keyMetrics.metrics.slice(0, keyMetricsKpiCount)}
+          insight={keyMetrics.insight}
+          metricsSingleRow
+          metricsHalfWidthLayout={span === 1}
+          className="w-full min-w-0"
+        />
+      ) : (
+        <ChartCard
+          variant={chartVariant}
+          title={card.title}
+          description={card.description}
+          className="!h-auto min-h-0 shrink-0"
+          leoInsight={chartLeoInsight}
+        >
+          {Renderer ? <Renderer members={members} chartType={chartType} /> : null}
+        </ChartCard>
+      )}
+    </div>
+  )
+}
+
+export interface TeamDashboardChartsSectionProps {
+  members: TeamMember[]
+  keyMetrics: { metrics: MetricItem[]; insight: MetricInsight }
+  visibleCards: string[]
+  cardOrder: string[]
+  cardSpans?: Record<string, 1 | 2>
+  cardChartTypes?: Record<string, ChartType>
+  keyMetricsKpiCount?: number
+  layoutEditMode?: boolean
+  onVisibleChange?: (visible: string[]) => void
+  onOrderChange?: (order: string[]) => void
+  onSpanChange?: (id: string, span: 1 | 2) => void
+  onChartTypeChange?: (id: string, chartType: ChartType) => void
+  onKeyMetricsKpiCountChange?: (count: number) => void
+  onResetLayout?: () => void
+  onLayoutEditDone?: () => void
+  onLayoutEditCancel?: () => void
+}
+
+export function TeamDashboardChartsSection({
+  members,
+  keyMetrics,
+  visibleCards,
+  cardOrder,
+  cardSpans = DEFAULT_TEAM_SPANS,
+  cardChartTypes = DEFAULT_TEAM_CHART_TYPES,
+  keyMetricsKpiCount = KEY_METRICS_KPI_COUNT_DEFAULT,
+  layoutEditMode = false,
+  onVisibleChange,
+  onOrderChange,
+  onSpanChange,
+  onChartTypeChange,
+  onKeyMetricsKpiCountChange,
+  onResetLayout,
+  onLayoutEditDone,
+  onLayoutEditCancel,
+}: TeamDashboardChartsSectionProps) {
+  const { chartVariant } = useChartVariant()
+  const defs = React.useMemo(() => new Map(ALL_TEAM_DASHBOARD_CARDS.map(c => [c.id, c])), [])
+
+  const orderedCards = React.useMemo(() => {
+    return cardOrder
+      .filter(id => visibleCards.includes(id) && defs.has(id))
+      .map(id => defs.get(id)!)
+  }, [visibleCards, cardOrder, defs])
+
+  const hiddenCardDefs = React.useMemo(
+    () => ALL_TEAM_DASHBOARD_CARDS.filter(c => !visibleCards.includes(c.id)),
+    [visibleCards],
+  )
+
+  const sortableIds = React.useMemo(() => orderedCards.map(c => c.id), [orderedCards])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      if (!onOrderChange) return
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+      const oldIndex = sortableIds.indexOf(String(active.id))
+      const newIndex = sortableIds.indexOf(String(over.id))
+      if (oldIndex < 0 || newIndex < 0) return
+      const nextVisibleOrder = arrayMove(sortableIds, oldIndex, newIndex)
+      const visibleSet = new Set(visibleCards)
+      onOrderChange(applyVisibleReorder(cardOrder, visibleSet, nextVisibleOrder))
+    },
+    [cardOrder, onOrderChange, sortableIds, visibleCards],
+  )
+
+  const moveStep = React.useCallback(
+    (id: string, direction: -1 | 1) => {
+      if (!onOrderChange) return
+      const idx = sortableIds.indexOf(id)
+      if (idx < 0) return
+      const newIdx = idx + direction
+      if (newIdx < 0 || newIdx >= sortableIds.length) return
+      const nextVisibleOrder = arrayMove(sortableIds, idx, newIdx)
+      const visibleSet = new Set(visibleCards)
+      onOrderChange(applyVisibleReorder(cardOrder, visibleSet, nextVisibleOrder))
+    },
+    [cardOrder, onOrderChange, sortableIds, visibleCards],
+  )
+
+  const addCard = React.useCallback(
+    (id: string) => {
+      if (!onVisibleChange) return
+      if (visibleCards.includes(id)) return
+      onVisibleChange([...visibleCards, id])
+    },
+    [onVisibleChange, visibleCards],
+  )
+
+  const removeCard = React.useCallback(
+    (id: string) => {
+      if (!onVisibleChange) return
+      onVisibleChange(visibleCards.filter(v => v !== id))
+    },
+    [onVisibleChange, visibleCards],
+  )
+
+  if (orderedCards.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-3 px-4 py-12 text-center lg:px-6">
+        <i className="fa-light fa-chart-column text-2xl text-muted-foreground/40" aria-hidden="true" />
+        <p className="text-sm text-muted-foreground">
+          No widgets on the dashboard.
+          {layoutEditMode && hiddenCardDefs.length > 0 ? " Add a widget below." : " Turn on Edit layout and add widgets back."}
+        </p>
+        {layoutEditMode && hiddenCardDefs.length > 0 && onVisibleChange ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button type="button" variant="outline" size="sm" className="size-9 p-0" aria-label="Add widget">
+                <i className="fa-light fa-plus text-sm" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center">
+              {hiddenCardDefs.map(c => (
+                <DropdownMenuItem key={c.id} onSelect={() => addCard(c.id)}>
+                  {c.title}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </div>
+    )
+  }
+
+  const grid = (
+    <div
+      className={cn(
+        "grid grid-cols-1 gap-4 lg:grid-cols-2",
+        layoutEditMode && "lg:items-start lg:content-start lg:auto-rows-min",
+      )}
+    >
+      {orderedCards.map((card, cardIndex) => {
+        const isKeyMetricsCard = card.id === KEY_METRICS_CARD_ID
+        const Renderer = isKeyMetricsCard ? null : TEAM_CHART_RENDERERS[card.id]
+        if (!isKeyMetricsCard && !Renderer) return null
+        const span = cardSpans[card.id] ?? card.defaultSpan
+        const requestedType = cardChartTypes[card.id] ?? card.defaultChartType
+        const allowedTypes = card.chartTypes.map(o => o.type)
+        const chartType =
+          allowedTypes.length === 0
+            ? card.defaultChartType
+            : allowedTypes.includes(requestedType)
+              ? requestedType
+              : card.defaultChartType
+
+        if (
+          layoutEditMode &&
+          onOrderChange &&
+          onSpanChange &&
+          onChartTypeChange &&
+          onVisibleChange
+        ) {
+          return (
+            <SortableTeamDashboardCard
+              key={card.id}
+              card={card}
+              members={members}
+              span={span}
+              chartType={chartType}
+              cardIndex={cardIndex}
+              totalCards={orderedCards.length}
+              onSpanChange={onSpanChange}
+              onChartTypeChange={onChartTypeChange}
+              onRemove={removeCard}
+              onMoveStep={dir => moveStep(card.id, dir)}
+              keyMetrics={isKeyMetricsCard ? keyMetrics : null}
+              keyMetricsKpiCount={keyMetricsKpiCount}
+              onKeyMetricsKpiCountChange={
+                isKeyMetricsCard ? onKeyMetricsKpiCountChange : undefined
+              }
+            />
+          )
+        }
+
+        return (
+          <div
+            key={card.id}
+            className={cn(span === 2 ? "lg:col-span-2" : undefined)}
+          >
+            {isKeyMetricsCard ? (
+              <KeyMetrics
+                variant="card"
+                title={card.title}
+                description={card.description}
+                metrics={keyMetrics.metrics.slice(0, keyMetricsKpiCount)}
+                insight={keyMetrics.insight}
+                metricsSingleRow
+                metricsHalfWidthLayout={span === 1}
+                className="w-full min-w-0"
+              />
+            ) : (
+              <ChartCard
+                variant={chartVariant}
+                title={card.title}
+                description={card.description}
+                leoInsight={TEAM_CHART_LEO_INSIGHTS[card.id]}
+              >
+                {Renderer ? <Renderer members={members} chartType={chartType} /> : null}
+              </ChartCard>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+
+  const editToolbar =
+    layoutEditMode && onVisibleChange && onResetLayout ? (
+      <div
+        className="mb-3 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-transparent px-3 py-2"
+        role="region"
+        aria-label="Dashboard layout options"
+      >
+        <p className="text-xs text-muted-foreground">Drag cards to reorder. Changes save automatically.</p>
+        <div className="flex flex-wrap items-center justify-end gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="h-8 text-xs"
+            onClick={() => onVisibleChange(ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))}
+          >
+            Show all
+          </Button>
+          <Button type="button" size="sm" variant="ghost" className="h-8 text-xs" onClick={() => onVisibleChange([])}>
+            Hide all
+          </Button>
+          <Tip side="bottom" label="Reset visibility, order, widths, and chart types">
+            <Button type="button" size="sm" variant="ghost" className="h-8 px-2 text-xs" onClick={onResetLayout}>
+              <i className="fa-light fa-rotate-left mr-1 text-xs" aria-hidden="true" />
+              Reset
+            </Button>
+          </Tip>
+          {hiddenCardDefs.length > 0 ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button type="button" variant="outline" size="sm" className="size-8 p-0" aria-label="Add widget">
+                  <i className="fa-light fa-plus text-[13px]" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {hiddenCardDefs.map(c => (
+                  <DropdownMenuItem key={c.id} onSelect={() => addCard(c.id)}>
+                    {c.title}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+          {onLayoutEditCancel ? (
+            <Button type="button" size="sm" variant="outline" className="h-8 text-xs" onClick={onLayoutEditCancel}>
+              Cancel
+            </Button>
+          ) : null}
+          {onLayoutEditDone ? (
+            <Button type="button" size="sm" className="h-8 text-xs" onClick={onLayoutEditDone}>
+              Done
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    ) : null
+
+  const gridBody =
+    layoutEditMode && onOrderChange ? (
+      <DndContext sensors={sensors} collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
+        <SortableContext items={sortableIds} strategy={rectSortingStrategy}>
+          {grid}
+        </SortableContext>
+      </DndContext>
+    ) : (
+      grid
+    )
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 px-4 pb-2 lg:px-6",
+        layoutEditMode && "rounded-xl border border-dashed border-border/80 bg-transparent py-3",
+      )}
+    >
+      {editToolbar}
+      {gridBody}
+    </div>
+  )
+}