TSM.ID
316 lines
15 KiB
TypeScript
316 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useRef } from "react";
|
|
import { useDictionary } from "@/lib/dictionary";
|
|
import { useOmni } from "@/components/OmniSyncProvider";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface NeuralSubject {
|
|
id: string;
|
|
name: string;
|
|
attentionScore: number;
|
|
cognitiveLoad: number;
|
|
alphaWave: number;
|
|
status: "FOCUSED" | "DISTRACTED" | "ZONED_OUT";
|
|
}
|
|
|
|
export default function TelepathyMatrix() {
|
|
const { t } = useDictionary();
|
|
const { theme, locale } = useOmni();
|
|
const router = useRouter();
|
|
const [isCheckingAuth, setIsCheckingAuth] = useState(true);
|
|
|
|
// ALL HOOKS MUST BE DECLARED BEFORE ANY CONDITIONAL RETURN (React Rules of Hooks)
|
|
const [subjects, setSubjects] = useState<NeuralSubject[]>([
|
|
{ id: "xcu_subj_01", name: "Commander Alpha", attentionScore: 95, cognitiveLoad: 80, alphaWave: 0.8, status: "FOCUSED" },
|
|
{ id: "xcu_subj_02", name: "Operative Bravo", attentionScore: 88, cognitiveLoad: 60, alphaWave: 0.6, status: "FOCUSED" },
|
|
{ id: "xcu_subj_03", name: "Spectre 7", attentionScore: 45, cognitiveLoad: 30, alphaWave: 0.4, status: "DISTRACTED" },
|
|
{ id: "xcu_subj_04", name: "Agent Echo", attentionScore: 12, cognitiveLoad: 10, alphaWave: 0.1, status: "ZONED_OUT" },
|
|
{ id: "xcu_subj_05", name: "Node Delta", attentionScore: 78, cognitiveLoad: 70, alphaWave: 0.7, status: "FOCUSED" },
|
|
{ id: "xcu_subj_06", name: "Vanguard 1", attentionScore: 25, cognitiveLoad: 15, alphaWave: 0.2, status: "ZONED_OUT" },
|
|
]);
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
useEffect(() => {
|
|
const checkAuth = async () => {
|
|
try {
|
|
const res = await fetch("/api/superadmin/supreme-dashboard");
|
|
const data = await res.json();
|
|
if (data.error) {
|
|
router.push("/");
|
|
} else {
|
|
setIsCheckingAuth(false);
|
|
}
|
|
} catch (err) {
|
|
router.push("/");
|
|
}
|
|
};
|
|
checkAuth();
|
|
}, [router]);
|
|
|
|
// Brainwave Visualization Effect - MUST be before conditional return (React Rules of Hooks)
|
|
useEffect(() => {
|
|
if (isCheckingAuth) return;
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return;
|
|
|
|
let animationFrameId: number;
|
|
let time = 0;
|
|
|
|
const resize = () => {
|
|
canvas.width = canvas.parentElement?.clientWidth || 800;
|
|
canvas.height = 150;
|
|
};
|
|
window.addEventListener("resize", resize);
|
|
resize();
|
|
|
|
const draw = () => {
|
|
time += 0.05;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const width = canvas.width;
|
|
const height = canvas.height;
|
|
const centerY = height / 2;
|
|
|
|
// Draw 3 Brainwaves (Alpha, Beta, Gamma)
|
|
const waves = [
|
|
{ color: "rgba(11, 92, 255, 0.8)", freq: 0.02, amp: 20, speed: 1.5 }, // Alpha (Blue)
|
|
{ color: "rgba(37, 211, 102, 0.8)", freq: 0.05, amp: 10, speed: 2.5 }, // Beta (Green)
|
|
{ color: "rgba(255, 0, 128, 0.8)", freq: 0.1, amp: 5, speed: 4.0 } // Gamma (Magenta)
|
|
];
|
|
|
|
waves.forEach((wave, i) => {
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, centerY);
|
|
|
|
for (let x = 0; x < width; x++) {
|
|
const y = Math.sin(x * wave.freq + time * wave.speed + i) * wave.amp
|
|
+ Math.sin(x * wave.freq * 0.5 + time) * (wave.amp * 0.5);
|
|
ctx.lineTo(x, centerY + y);
|
|
}
|
|
|
|
ctx.strokeStyle = wave.color;
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
});
|
|
|
|
// Draw grid overlay
|
|
ctx.strokeStyle = "rgba(255,255,255,0.05)";
|
|
ctx.lineWidth = 1;
|
|
for (let x = 0; x < width; x += 30) {
|
|
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke();
|
|
}
|
|
for (let y = 0; y < height; y += 30) {
|
|
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke();
|
|
}
|
|
|
|
animationFrameId = requestAnimationFrame(draw);
|
|
};
|
|
draw();
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", resize);
|
|
cancelAnimationFrame(animationFrameId);
|
|
};
|
|
}, [isCheckingAuth]);
|
|
|
|
// Simulate real-time neural data updates - MUST be before conditional return
|
|
useEffect(() => {
|
|
if (isCheckingAuth) return;
|
|
const interval = setInterval(() => {
|
|
setSubjects(prev => prev.map(s => {
|
|
let newScore = s.attentionScore + (Math.random() * 10 - 5);
|
|
newScore = Math.max(0, Math.min(100, newScore));
|
|
|
|
let newStatus: "FOCUSED" | "DISTRACTED" | "ZONED_OUT" = "FOCUSED";
|
|
if (newScore < 30) newStatus = "ZONED_OUT";
|
|
else if (newScore < 60) newStatus = "DISTRACTED";
|
|
|
|
return {
|
|
...s,
|
|
attentionScore: newScore,
|
|
cognitiveLoad: Math.max(0, Math.min(100, s.cognitiveLoad + (Math.random() * 6 - 3))),
|
|
status: newStatus
|
|
};
|
|
}));
|
|
}, 2000);
|
|
return () => clearInterval(interval);
|
|
}, [isCheckingAuth]);
|
|
|
|
if (isCheckingAuth) {
|
|
return <div className="min-h-screen bg-black flex items-center justify-center text-purple-500 font-mono text-sm">INITIALIZING SECURE CONNECTION...</div>;
|
|
}
|
|
|
|
const sendSensoryPing = (id: string, name: string) => {
|
|
// Flash the screen to simulate ping
|
|
const el = document.getElementById(`card-${id}`);
|
|
if (el) {
|
|
el.classList.add("ring-4", "ring-[#ff0080]", "ring-opacity-100", "scale-105");
|
|
setTimeout(() => el.classList.remove("ring-4", "ring-[#ff0080]", "ring-opacity-100", "scale-105"), 500);
|
|
}
|
|
alert(`Sensory Ping (Haptic & Audio) disuntikkan langsung ke korteks partisipan [${name}]`);
|
|
};
|
|
|
|
return (
|
|
<div className={`min-h-screen ${theme === 'dark' ? 'bg-[#03060a] text-gray-200' : 'bg-gray-50 text-gray-900'} font-sans selection:bg-purple-500/30 overflow-x-hidden relative`}>
|
|
<style dangerouslySetInnerHTML={{__html: `
|
|
@keyframes cyber-pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.8; transform: scale(0.98); }
|
|
}
|
|
.animate-cyber-pulse {
|
|
animation: cyber-pulse 2s infinite ease-in-out;
|
|
}
|
|
@keyframes emergency-flash {
|
|
0%, 100% { background-color: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); }
|
|
50% { background-color: rgba(220, 38, 38, 0.4); border-color: rgba(220, 38, 38, 0.8); box-shadow: 0 0 20px rgba(220, 38, 38, 0.6); }
|
|
}
|
|
.emergency-flash {
|
|
animation: emergency-flash 1s infinite;
|
|
}
|
|
`}} />
|
|
|
|
{/* Decorative Grid */}
|
|
<div className="absolute inset-0 z-0 pointer-events-none" style={{
|
|
backgroundImage: theme === 'dark'
|
|
? 'linear-gradient(rgba(255, 0, 128, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 0, 128, 0.03) 1px, transparent 1px)'
|
|
: 'linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px)',
|
|
backgroundSize: '40px 40px'
|
|
}}></div>
|
|
|
|
<div className="relative z-10 p-6 md:p-10 max-w-7xl mx-auto flex flex-col gap-8">
|
|
|
|
{/* HEADER */}
|
|
<header className="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-white/10 pb-6 gap-4">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className="w-8 h-8 bg-purple-500/20 rounded-lg flex items-center justify-center border border-purple-500/50 shadow-[0_0_15px_rgba(168,85,247,0.4)]">
|
|
<svg className="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
|
</div>
|
|
<h1 className="text-3xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-[#ff0080] to-[#7928ca]">
|
|
TELEPATHY MATRIX
|
|
</h1>
|
|
</div>
|
|
<p className="text-sm font-mono text-purple-400/80 uppercase tracking-widest">
|
|
Global Neural Attention & Cognitive Load Dashboard
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30 flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
|
|
<span className="font-mono text-red-400 text-xs font-bold uppercase">Surveillance Active</span>
|
|
</div>
|
|
<Link href="/supreme-admin" className="px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-sm font-bold transition-all shadow-sm">
|
|
Kembali ke Supreme Admin
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
{/* MASTER OSCILLATOR CANVAS */}
|
|
<div className={`rounded-2xl border ${theme === 'dark' ? 'bg-black/60 border-white/10' : 'bg-white border-gray-200'} backdrop-blur-xl p-6 relative overflow-hidden shadow-2xl`}>
|
|
<div className="absolute top-4 left-4 flex items-center gap-2 z-20">
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Aggregated Brainwaves</span>
|
|
</div>
|
|
<div className="absolute top-4 right-4 flex gap-3 z-20 text-[9px] font-black uppercase tracking-widest">
|
|
<div className="flex items-center gap-1"><span className="w-2 h-2 bg-blue-500 rounded-full"></span> Alpha (Relaxed)</div>
|
|
<div className="flex items-center gap-1"><span className="w-2 h-2 bg-green-500 rounded-full"></span> Beta (Focused)</div>
|
|
<div className="flex items-center gap-1"><span className="w-2 h-2 bg-[#ff0080] rounded-full"></span> Gamma (High Load)</div>
|
|
</div>
|
|
<div className="w-full h-[150px] mt-4 relative z-10 opacity-80 mix-blend-screen">
|
|
<canvas ref={canvasRef} className="absolute inset-0 w-full h-full"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
{/* NEURAL GRID */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-black uppercase tracking-widest flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fillRule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clipRule="evenodd"></path></svg>
|
|
Active Subjects
|
|
</h2>
|
|
<div className="text-[10px] font-mono bg-white/5 border border-white/10 px-3 py-1 rounded-full text-gray-400">
|
|
{subjects.filter(s => s.status === 'ZONED_OUT').length} CRITICAL / {subjects.length} TOTAL
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{subjects.map(subject => {
|
|
const isCritical = subject.status === 'ZONED_OUT';
|
|
return (
|
|
<div
|
|
id={`card-${subject.id}`}
|
|
key={subject.id}
|
|
className={`glass-panel p-6 rounded-2xl border transition-all duration-300 relative overflow-hidden group ${
|
|
isCritical ? 'emergency-flash' : theme === 'dark' ? 'border-white/5 bg-white/2 hover:border-white/20' : 'border-gray-200 bg-white hover:border-purple-300 shadow-sm'
|
|
}`}
|
|
>
|
|
{/* Background Glow */}
|
|
<div className={`absolute -right-10 -top-10 w-32 h-32 rounded-full blur-3xl opacity-20 pointer-events-none transition-colors ${
|
|
isCritical ? 'bg-red-500' : subject.status === 'FOCUSED' ? 'bg-emerald-500' : 'bg-amber-500'
|
|
}`}></div>
|
|
|
|
<div className="flex justify-between items-start mb-6 relative z-10">
|
|
<div>
|
|
<div className="text-[10px] font-mono text-gray-500">{subject.id}</div>
|
|
<h3 className={`text-lg font-black tracking-tight mt-1 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>{subject.name}</h3>
|
|
</div>
|
|
<div className={`px-2 py-1 rounded-md text-[9px] font-black uppercase tracking-widest border ${
|
|
isCritical ? 'bg-red-500/20 text-red-500 border-red-500/30' :
|
|
subject.status === 'FOCUSED' ? 'bg-emerald-500/20 text-emerald-500 border-emerald-500/30' :
|
|
'bg-amber-500/20 text-amber-500 border-amber-500/30'
|
|
}`}>
|
|
{subject.status}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-5 relative z-10">
|
|
<div>
|
|
<div className="flex justify-between text-xs mb-1 font-bold">
|
|
<span className="text-gray-500 uppercase">Attention Score</span>
|
|
<span className={isCritical ? 'text-red-500' : 'text-emerald-500'}>{subject.attentionScore.toFixed(1)}%</span>
|
|
</div>
|
|
<div className="w-full bg-black/40 rounded-full h-1.5 overflow-hidden border border-white/5">
|
|
<div className={`h-full transition-all duration-500 ${isCritical ? 'bg-red-500' : 'bg-emerald-500'}`} style={{ width: `${subject.attentionScore}%` }}></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex justify-between text-xs mb-1 font-bold">
|
|
<span className="text-gray-500 uppercase">Cognitive Load</span>
|
|
<span className="text-purple-400">{subject.cognitiveLoad.toFixed(1)}%</span>
|
|
</div>
|
|
<div className="w-full bg-black/40 rounded-full h-1.5 overflow-hidden border border-white/5">
|
|
<div className="bg-purple-500 h-full transition-all duration-500" style={{ width: `${subject.cognitiveLoad}%` }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 pt-4 border-t border-white/10 relative z-10 flex justify-between items-center">
|
|
<div className="text-[9px] font-mono text-gray-500">
|
|
Alpha: {subject.alphaWave.toFixed(2)}Hz
|
|
</div>
|
|
<button
|
|
onClick={() => sendSensoryPing(subject.id, subject.name)}
|
|
className={`px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all shadow-lg hover:scale-105 active:scale-95 ${
|
|
isCritical
|
|
? 'bg-red-600 hover:bg-red-500 text-white shadow-red-500/30'
|
|
: 'bg-white/10 hover:bg-white/20 text-gray-300 border border-white/10'
|
|
}`}
|
|
>
|
|
Sensory Ping
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|