Ops dashboard block

1"use client";
2 
3import * as React from "react";
4import {
5  Activity,
6  Braces,
7  ChevronDown,
8  Clock3,
9  Database,
10  Layers,
11  PanelRight,
12  Plus,
13  Search,
14  Shield,
15  Sparkles,
16  Table2,
17} from "lucide-react";
18 
19import { BarChart } from "@/registry/blacksite/charts/bar-chart";
20import { GanttTimeline } from "@/registry/blacksite/charts/gantt-timeline";
21import { LineChart } from "@/registry/blacksite/charts/line-chart";
22import { TacticalMap } from "@/registry/blacksite/maps/tactical-map";
23import { Panel } from "@/registry/blacksite/ui/panel";
24import { SidebarRail } from "@/registry/blacksite/ui/sidebar-rail";
25import { StatusBadge } from "@/registry/blacksite/ui/status-badge";
26 
27import {
28  alertRows,
29  lineageNodes,
30  mapMarkers,
31  mapZones,
32  navFooter,
33  navItems,
34  objectTypeCountClass,
35  objectTypes,
36  riskDistribution,
37  savedViews,
38  throughputData,
39  timelineTasks,
40} from "./dashboard-ops-data";
41 
42export interface DashboardOpsProps extends React.HTMLAttributes<HTMLDivElement> {}
43 
44function DashboardOps({ className, ...props }: DashboardOpsProps) {
45  const [activeNav, setActiveNav] = React.useState("home");
46  const [selectedAlert, setSelectedAlert] = React.useState(alertRows[0]);
47 
48  const lineChartSeries = React.useMemo(
49    () => [
50      { key: "inbound", label: "Inbound", color: "var(--color-chart-1)" },
51      { key: "delayed", label: "Delayed", color: "var(--color-warning)" },
52    ],
53    [],
54  );
55 
56  const barChartSeries = React.useMemo(
57    () => [
58      { key: "open", label: "Open", color: "var(--color-danger)", stackId: "risk" },
59      { key: "actioned", label: "Actioned", color: "var(--color-info)", stackId: "risk" },
60    ],
61    [],
62  );
63 
64  const lineChartThresholds = React.useMemo(
65    () => [{ value: 18, label: "Delay threshold", tone: "danger" as const }],
66    [],
67  );
68 
69  return (
70    <div
71      className={["bg-background text-foreground min-h-svh lg:h-svh lg:overflow-hidden", className]
72        .filter(Boolean)
73        .join(" ")}
74      {...props}
75    >
76      <div className="flex min-h-svh flex-col lg:h-svh">
77        <TopBar />
78 
79        <div className="flex min-h-0 flex-1 flex-col lg:flex-row">
80          <div className="hidden lg:block">
81            <SidebarRail
82              items={navItems}
83              footerItems={navFooter}
84              activeId={activeNav}
85              onActiveChange={setActiveNav}
86            />
87          </div>
88 
89// … truncated