fix(ui): выбирать календарный месяц отчёта потоков

components/traffic/flow-analytics-panel.tsx

@@ -12,6 +12,7 @@ import { TrafficMiniChart } from "@/components/reui-kit/traffic-mini-chart"
 import { TrafficRxTxChart } from "@/components/reui-kit/traffic-rx-tx-chart"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Switch } from "@/components/ui/switch"
+import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
@@ -44,7 +45,7 @@ const RANGE_LABELS: Record<string, string> = {
   "1h": "1ч",
   "4h": "4ч",
   "24h": "24ч",
-  "30d": "Текущий месяц",
+  "30d": "Месяц",
 }
 
 
@@ -305,6 +306,9 @@ export function FlowAnalyticsDetail({
   analytics,
   monthly,
   monthlyAvailable = true,
+  month,
+  onMonth,
+  monthValid,
   range,
   onRange,
   selectedIface,
@@ -322,6 +326,9 @@ export function FlowAnalyticsDetail({
   analytics: FlowAnalyticsDto | null
   monthly?: FlowMonthlyDto
   monthlyAvailable?: boolean
+  month: string
+  onMonth: (value: string) => void
+  monthValid: boolean
   range: string
   onRange: (r: string) => void
   selectedIface: string
@@ -407,6 +414,7 @@ export function FlowAnalyticsDetail({
                 key={r}
                 type="button"
                 onClick={() => onRange(r)}
+                aria-pressed={range === r}
                 className={cn(
                   "h-7 px-2 text-xs rounded border transition-colors",
                   range === r
@@ -421,6 +429,11 @@ export function FlowAnalyticsDetail({
         </div>
       </div>
 
+      {range === "30d" && <div className="mb-3 flex flex-col gap-2">
+        <Label htmlFor="flow-report-month">Месяц отчёта (UTC)</Label>
+        <Input id="flow-report-month" type="month" value={month} max={new Date().toISOString().slice(0, 7)} onChange={event => onMonth(event.target.value)} aria-invalid={!monthValid} aria-describedby={!monthValid ? "flow-report-month-error" : undefined} />
+        {!monthValid && <p id="flow-report-month-error" role="alert" className="text-sm text-destructive">Выберите существующий месяц не позднее текущего.</p>}
+      </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>