"use client"
import React, { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
export type PanelType = 'map' | 'timeline' | 'feed' | 'risk_card' | 'entity_card' | 'claim_table' | 'alerts' | 'cyber' | 'infrastructure' | 'watchlist'
interface Panel {
id: string
type: PanelType
title: string
w: number
h: number
}
interface DashboardTemplate {
id: string
name: string
panels: Panel[]
}
const TEMPLATES: DashboardTemplate[] = [
{
id: 'global_crisis', name: 'GLOBAL CRISIS DASHBOARD',
panels: [
{ id: 'p1', type: 'map', title: 'TACTICAL MAP', w: 8, h: 4 },
{ id: 'p2', type: 'alerts', title: 'GLOBAL ALERTS', w: 4, h: 4 },
{ id: 'p3', type: 'timeline', title: 'EVENT TIMELINE', w: 12, h: 2 }
]
},
{
id: 'maritime_risk', name: 'MARITIME RISK DASHBOARD',
panels: [
{ id: 'p1', type: 'infrastructure', title: 'CHOKEPOINTS & PORTS', w: 12, h: 3 },
{ id: 'p2', type: 'map', title: 'VESSEL TRACKING', w: 9, h: 5 },
{ id: 'p3', type: 'watchlist', title: 'SANCTIONED VESSELS', w: 3, h: 5 }
]
},
{
id: 'cyber_threat', name: 'CYBER THREAT DASHBOARD',
panels: [
{ id: 'p1', type: 'cyber', title: 'ACTIVE IOCS', w: 6, h: 4 },
{ id: 'p2', type: 'feed', title: 'SIGINT FEED', w: 6, h: 4 },
{ id: 'p3', type: 'risk_card', title: 'CRITICAL INFRASTRUCTURE RISK', w: 12, h: 2 }
]
},
{
id: 'sanctions_comp', name: 'SANCTIONS & COMPLIANCE',
panels: [
{ id: 'p1', type: 'entity_card', title: 'SDN TARGET PROFILE', w: 4, h: 5 },
{ id: 'p2', type: 'map', title: 'ASSET NETWORK', w: 8, h: 5 },
{ id: 'p3', type: 'claim_table', title: 'GLOBAL LIST HITS', w: 12, h: 3 }
]
}
]
let ds = {
alerts: [] as any[],
feed: [] as string[],
iocs: [] as any[],
vessels: [] as any[],
evts: [] as any[],
sanc: [] as any[]
}
let sub_cb: (() => void)[] = []
const ping_subs = () => sub_cb.forEach(c => c())
if (typeof window !== 'undefined') {
const r_ip = () => `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`
const r_imo = () => `imo ${Math.floor(Math.random() * 9000000 + 1000000)}`
const lvls = ['high', 'med', 'low']
const msgs = ['unauthorized access attempt', 'bso anomaly detected', 'vessel ping lost', 'rf intercept burst', 'pcap signature match', 'target deviation']
const lists = ['OFAC', 'EU', 'UK HMT', 'UN', 'SECO']
const r_ent = () => `ent_${Math.floor(Math.random() * 900000 + 100000)}`
for (let i = 0; i < 150; i++) {
ds.alerts.push({ id: i, time: new Date(Date.now() - i * 60000).toISOString().slice(11, 19) + 'z', msg: msgs[i % msgs.length] + ' ref_' + Math.floor(Math.random() * 1000), lvl: lvls[i % lvls.length] })
ds.feed.push(`> recv: intercept_${i} [sig: ${(Math.random() * 100).toFixed(1)}%] payload: 0x${Math.floor(Math.random() * 100000000).toString(16)}`)
ds.iocs.push({ ip: r_ip(), hits: Math.floor(Math.random() * 900) })
ds.vessels.push({ imo: r_imo(), flag: ['PAN', 'LBR', 'MHL', 'USA', 'CHN'][i % 5] })
ds.evts.push({ id: i, time: new Date(Date.now() - i * 3600000).toISOString().slice(11, 16) + 'z', val: Math.random() * 100 })
ds.sanc.push({ id: i, ent: r_ent(), list: lists[i % lists.length], prog: `[${['IRAN', 'RUSSIA', 'DPRK', 'CYBER'][i % 4]}]`, match: Math.floor(Math.random() * 20 + 80) })
}
setInterval(() => {
ds.alerts.unshift({ id: Date.now(), time: new Date().toISOString().slice(11, 19) + 'z', msg: msgs[Math.floor(Math.random() * msgs.length)] + ' ref_' + Math.floor(Math.random() * 1000), lvl: lvls[Math.floor(Math.random() * lvls.length)] })
ds.feed.unshift(`> recv: intercept_${Date.now() % 1000} [sig: ${(Math.random() * 100).toFixed(1)}%] payload: 0x${Math.floor(Math.random() * 100000000).toString(16)}`)
ds.iocs.unshift({ ip: r_ip(), hits: Math.floor(Math.random() * 100) })
ds.vessels.unshift({ imo: r_imo(), flag: ['PAN', 'LBR', 'MHL', 'USA', 'CHN'][Math.floor(Math.random() * 5)] })
ds.evts.unshift({ id: Date.now(), time: new Date().toISOString().slice(11, 16) + 'z', val: Math.random() * 100 })
ds.sanc.unshift({ id: Date.now(), ent: r_ent(), list: lists[Math.floor(Math.random() * lists.length)], prog: `[${['IRAN', 'RUSSIA', 'DPRK', 'CYBER'][Math.floor(Math.random() * 4)]}]`, match: Math.floor(Math.random() * 20 + 80) })
if (ds.alerts.length > 200) ds.alerts.pop()
if (ds.feed.length > 200) ds.feed.pop()
if (ds.iocs.length > 200) ds.iocs.pop()
if (ds.vessels.length > 200) ds.vessels.pop()
if (ds.evts.length > 200) ds.evts.pop()
if (ds.sanc.length > 200) ds.sanc.pop()
ping_subs()
}, 400)
}
const use_ds = () => {
const [, f] = useState({})
useEffect(() => {
const c = () => f({})
sub_cb.push(c)
return () => { sub_cb = sub_cb.filter(x => x !== c) }
}, [])
return ds
}
const alerts_mod = () => (
{use_ds().alerts.map((a: any) => (
[{a.time}] {a.msg}
))}
{use_ds().evts.slice(0, 50).map((e: any) => (
{e.time}
evt_{e.id.toString(16).slice(-6)}
))}
{use_ds().vessels.map((v: any, i: number) => (
{v.imo} [{v.flag}]
track
))}
:: active indicators of compromise
{use_ds().iocs.map((v: any, i: number) => (
[{v.hits} hits]
{v.ip}
))}
)
const infra_mod = () => (
{['suez', 'panama', 'hormuz'].map((c, i) => (
{c}
{Math.floor(use_ds().vessels.length / 3) + i * 12} vessels
))}
critical threat level
multiple cascading failures imminent
)
}
const feed_mod = () => (
{use_ds().feed.map((f: string, i: number) => (
{f}
))}
primary identifier
{s.ent}
sdn target
fuzzy match score: {s.match}%
known aliases: 14
linked assets: 3 vessels, 1 corp
[ linked assets locked ]
)
}
const claim_table_mod = () => (
timestamp
entity id
list source
program
match confidence
{use_ds().sanc.slice(0, 30).map((s: any) => (
{s.id.toString().slice(-8)}z
{s.ent}
{s.list}
{s.prog}
90 ? 'bg-rose-500' : s.match > 85 ? 'bg-amber-500' : 'bg-emerald-500'}`} style={{ width: `${s.match}%` }} />
{s.match}%
))}
)
const render_mod = (type: PanelType, children: React.ReactNode) => {
switch (type) {
case 'map': return children
case 'alerts': return alerts_mod()
case 'timeline': return timeline_mod()
case 'watchlist': return watchlist_mod()
case 'cyber': return cyber_mod()
case 'infrastructure': return infra_mod()
case 'risk_card': return risk_mod()
case 'feed': return feed_mod()
case 'entity_card': return entity_card_mod()
case 'claim_table': return claim_table_mod()
default:
return (
{type} MODULE
)
}
}
export function DashboardWorkspace({ children, onClose }: { children: React.ReactNode, onClose?: () => void }) {
const [active_template, set_active_template] = useState
('global_crisis')
const [menu_open, set_menu_open] = useState(false)
const template = TEMPLATES.find(t => t.id === active_template) || TEMPLATES[0]
return (
{ }
{onClose && (
)}
Active Workspace
{template.name}
Layer 16: Telemetry Active
{ }
{menu_open && (
Workspace Templates
{TEMPLATES.map(t => (
))}
)}
{ }
{ }
{template.panels.map(p => (
{render_mod(p.type, children)}
))}