feat(statistics): добавить раздел статистики трафика

Куб IPFIX час+день с AND-слайсами и экраном отчётности /statistics, живой /traffic не меняем.

Co-authored-by: Cursor <[email protected]>

components/data-grids/statistics-breakdown-data-grid.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { CompactDataGrid, type CompactDataGridColumn } from "@/components/data-grids/compact-data-grid"
+import { Flag } from "@/components/flag"
+import { Badge } from "@/components/reui/badge"
+import { fmtBps, formatBytes } from "@/lib/fmt-rate"
+import { cn } from "@/lib/utils"
+import type { StatisticsBreakdownRow } from "@mmapp/contracts/statistics"
+
+export type StatisticsSliceKind = "users" | "servers" | "interfaces" | "countries" | "services" | "asns"
+
+export function StatisticsBreakdownDataGrid({
+  rows,
+  kind,
+  selectedId,
+  onRowClick,
+  isLoading,
+}: {
+  rows: StatisticsBreakdownRow[]
+  kind: StatisticsSliceKind
+  selectedId?: string
+  onRowClick?: (row: StatisticsBreakdownRow) => void
+  isLoading?: boolean
+}) {
+  const columns: CompactDataGridColumn<StatisticsBreakdownRow>[] = [
+    {
+      id: "label",
+      header: "Имя",
+      accessorKey: "label",
+      cell: (row) => (
+        <span className={cn("flex items-center gap-2", selectedId === row.id && "font-medium")}>
+          {kind === "countries" && row.id !== "XX" ? <Flag code={row.id} size={16} /> : null}
+          <span className="truncate">{row.label || row.id}</span>
+          {selectedId === row.id ? (
+            <Badge variant="outline" size="sm">
+              слайс
+            </Badge>
+          ) : null}
+        </span>
+      ),
+    },
+    {
+      id: "bytes",
+      header: "Байты",
+      accessorKey: "bytes",
+      cell: (row) => <span className="tabular-nums">{formatBytes(row.bytes)}</span>,
+    },
+    {
+      id: "packets",
+      header: "Пакеты",
+      accessorKey: "packets",
+      cell: (row) => <span className="tabular-nums">{row.packets.toLocaleString("ru-RU")}</span>,
+    },
+    {
+      id: "bps",
+      header: "Средний bitrate",
+      accessorKey: "bps",
+      cell: (row) => <span className="tabular-nums">{fmtBps(row.bps)}</span>,
+    },
+    {
+      id: "percent",
+      header: "Доля",
+      accessorKey: "percent",
+      cell: (row) => <span className="tabular-nums">{row.percent.toFixed(1)}%</span>,
+    },
+  ]
+
+  return (
+    <CompactDataGrid
+      data={rows}
+      columns={columns}
+      isLoading={isLoading}
+      emptyTitle="Нет трафика"
+      emptyDescription="За выбранный период и слайсы нет данных куба."
+      onRowClick={onRowClick}
+    />
+  )
+}