File size: 2,896 Bytes
88aeaf5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import type { ComponentType } from "react"
import type { LucideIcon } from "lucide-react"
import { Crosshair, Film, ListChecks, Radio, SlidersHorizontal } from "lucide-react"
import { DetectorPanel } from "./detector/DetectorPanel"
import { PreviewPanel } from "./preview/PreviewPanel"
import { RuleStudioPanel } from "./rules/RuleStudioPanel"
import { ActivityPanel } from "./activity/ActivityPanel"
import { SettingsPanel } from "./settings/SettingsPanel"

export type SectionId = "test" | "automation" | "settings"

/** Top-level horizontal bands, each separated by a rule. */
export interface DashboardSection {
  id: SectionId
  label: string
  hint: string
  order: number
}

export const SECTIONS: DashboardSection[] = [
  { id: "test", label: "Test", hint: "detect 路 replay 路 fired actions", order: 1 },
  { id: "automation", label: "Automations & Firings", hint: "compile 路 validate 路 log", order: 2 },
  { id: "settings", label: "Settings", hint: "dispatch 路 compiler", order: 3 },
]

/**
 * A dashboard module. Add functionality by dropping a new folder under
 * `modules/<name>/` that exports a Panel, then registering it here with the
 * `section` it belongs to and its `span` (out of a 12-column section grid).
 */
export interface DashboardModule {
  id: string
  index: string
  eyebrow: string
  title: string
  icon: LucideIcon
  section: SectionId
  order: number
  span: number
  Panel: ComponentType
}

export const MODULES: DashboardModule[] = [
  {
    id: "detector",
    index: "01",
    eyebrow: "input",
    title: "Detector",
    icon: Crosshair,
    section: "test",
    order: 1,
    span: 4,
    Panel: DetectorPanel,
  },
  {
    id: "replay",
    index: "02",
    eyebrow: "output",
    title: "Annotated Replay",
    icon: Film,
    section: "test",
    order: 2,
    span: 8,
    Panel: PreviewPanel,
  },
  {
    id: "rules",
    index: "03",
    eyebrow: "automation",
    title: "Rule Studio",
    icon: ListChecks,
    section: "automation",
    order: 1,
    span: 5,
    Panel: RuleStudioPanel,
  },
  {
    id: "activity",
    index: "04",
    eyebrow: "telemetry",
    title: "Activity & Firings",
    icon: Radio,
    section: "automation",
    order: 2,
    span: 7,
    Panel: ActivityPanel,
  },
  {
    id: "dispatch",
    index: "05",
    eyebrow: "config",
    title: "Dispatch & Compiler",
    icon: SlidersHorizontal,
    section: "settings",
    order: 1,
    span: 6,
    Panel: SettingsPanel,
  },
]

export function modulesForSection(section: SectionId): DashboardModule[] {
  return MODULES.filter((m) => m.section === section).sort((a, b) => a.order - b.order)
}

// Static map so Tailwind keeps the col-span classes (no dynamic interpolation).
export const SPAN_CLASS: Record<number, string> = {
  4: "lg:col-span-4",
  5: "lg:col-span-5",
  6: "lg:col-span-6",
  7: "lg:col-span-7",
  8: "lg:col-span-8",
  12: "lg:col-span-12",
}