fix(ui): показывать подтверждённые данные месячного отчёта

components/traffic/flow-analytics-panel.tsx

@@ -4,7 +4,7 @@ import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-
 
 import { useMemo, useState } from "react"
 import { type ColumnDef, useTable } from "@tanstack/react-table"
-import type { FlowAnalyticsDto, FlowBreakdownRow, FlowEntityCard, FlowPathRow, FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
+import type { FlowMonthlyDto, FlowAnalyticsDto, FlowBreakdownRow, FlowEntityCard, FlowPathRow, FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
 import { ArrowDownIcon, ArrowUpIcon, GitBranchIcon, GlobeIcon, LayersIcon, NetworkIcon, RouteIcon, ShieldIcon, UsersIcon } from "lucide-react"
 import { Badge } from "@/components/reui/badge"
 import { KpiStatGrid, type KpiStatItem } from "@/components/reui-kit/kpi-stat-grid"
@@ -39,7 +39,7 @@ const RANGE_LABELS: Record<string, string> = {
   "1h": "1ч",
   "4h": "4ч",
   "24h": "24ч",
-  "30d": "месяц",
+  "30d": "Текущий месяц",
 }
 
 function MiniAreaChart({ rx, tx, height = 44 }: { rx: number[]; tx: number[]; height?: number }) {
@@ -137,11 +137,13 @@ function FlowBreakdownGrid({
   rows,
   empty,
   country,
+  monthly = false,
   onPick,
 }: {
   rows: FlowBreakdownRow[]
   empty?: string
   country?: boolean
+  monthly?: boolean
   onPick?: (row: FlowBreakdownRow) => void
 }) {
   const columns = useMemo<ColumnDef<DataGridFeatures, FlowBreakdownRow>[]>(
@@ -197,12 +199,13 @@ function FlowBreakdownGrid({
     [country],
   )
 
+  const visibleColumns = useMemo(() => monthly ? columns.filter(column => column.id !== "rate") : columns, [columns, monthly])
   const table = useTable({
     features: dataGridFeatures,
     manualPagination: true,
     manualSorting: true,
     data: rows,
-    columns,
+    columns: visibleColumns,
     getRowId: (row) => row.id,
   })
 
@@ -316,6 +319,8 @@ function FlowPathsGrid({
 export function FlowAnalyticsDetail({
   card,
   analytics,
+  monthly,
+  monthlyAvailable = true,
   range,
   onRange,
   selectedIface,
@@ -331,6 +336,8 @@ export function FlowAnalyticsDetail({
 }: {
   card: FlowEntityCard | null
   analytics: FlowAnalyticsDto | null
+  monthly?: FlowMonthlyDto
+  monthlyAvailable?: boolean
   range: string
   onRange: (r: string) => void
   selectedIface: string
@@ -379,6 +386,7 @@ export function FlowAnalyticsDetail({
         <div className="flex items-center gap-3 shrink-0">
           <div className="flex items-center gap-2">
             <Switch
+              disabled={range === "30d"}
               id="flow-dedup"
               checked={dedup}
               onCheckedChange={onDedup}
@@ -389,6 +397,7 @@ export function FlowAnalyticsDetail({
           </div>
           <div className="flex items-center gap-2">
             <Switch
+              disabled={range === "30d"}
               id="flow-exclude-overlay"
               checked={excludeOverlay}
               onCheckedChange={onExcludeOverlay}
@@ -399,6 +408,7 @@ export function FlowAnalyticsDetail({
           </div>
           <div className="flex items-center gap-2">
             <Switch
+              disabled={range === "30d"}
               id="flow-exclude-mesh"
               checked={excludeMesh}
               onCheckedChange={onExcludeMesh}
@@ -408,7 +418,7 @@ export function FlowAnalyticsDetail({
             </Label>
           </div>
           <div className="flex gap-1">
-            {RANGE_KEYS.map((r) => (
+            {RANGE_KEYS.filter(r => r !== "30d" || monthlyAvailable).map((r) => (
               <button
                 key={r}
                 type="button"
@@ -427,6 +437,13 @@ export function FlowAnalyticsDetail({
         </div>
       </div>
 
+      {range === "30d" && <p className="text-sm text-muted-foreground mb-3">Календарный месяц по UTC. Фильтры интерфейса, дублей, overlay и mesh к этому отчёту не применяются.</p>}
+      {monthly && range === "30d" && <section aria-label="Месячный отчёт" className="flex flex-col gap-4">
+        <p className="text-sm">Период: {monthly.month} (UTC) · Объём: {formatBytes(monthly.bytes)}</p>
+        <div><h3 className="text-sm font-medium mb-2">Страны</h3><FlowBreakdownGrid rows={monthly.countries} country monthly /></div>
+        <div><h3 className="text-sm font-medium mb-2">Сервисы</h3><FlowBreakdownGrid rows={monthly.services} monthly /></div>
+        <div><h3 className="text-sm font-medium mb-2">ASN</h3><FlowBreakdownGrid rows={monthly.asns} monthly /></div>
+      </section>}
       {analytics?.ifaces && analytics.ifaces.length > 0 ? (
         <div className="mb-3 pb-3 border-b">
           <div className="flex items-center gap-2 flex-wrap">