"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Terminal } from "lucide-react"; import { GlobalStyles, PROCESSES, REVENUE_ASCII, BOOT_SEQUENCE, TuiWindow, AsciiBarChart } from "@/src/components/CoreLandingPages/AgencyPortfolio/tsx/THEMAINFRAME"; // --- MAIN LAYOUT --- export default function MainframeDashboard() { const [booted, setBooted] = useState(false); const [bootLines, setBootLines] = useState([]); const [windows, setWindows] = useState([ { id: "dashboard", title: "C:\\AGENCY\\DASHBOARD.EXE", x: 50, y: 50, w: 600, h: 400, z: 10 }, { id: "terminal", title: "C:\\CMD.EXE", x: 700, y: 100, w: 400, h: 300, z: 11 }, { id: "finance", title: "C:\\FINANCE\\LEDGER.DAT", x: 100, y: 500, w: 500, h: 300, z: 9 }, ]); const [activeZ, setActiveZ] = useState(12); const [inputVal, setInputVal] = useState(""); // Boot Sequence Effect useEffect(() => { let delay = 0; BOOT_SEQUENCE.forEach((line, index) => { delay += Math.random() * 500 + 200; setTimeout(() => { setBootLines(prev => [...prev, line]); if (index === BOOT_SEQUENCE.length - 1) { setTimeout(() => setBooted(true), 1000); } }, delay); }); }, []); const bringToFront = (id: string) => { setWindows(prev => prev.map(w => w.id === id ? { ...w, z: activeZ + 1 } : w)); setActiveZ(z => z + 1); }; const closeWindow = (id: string) => { setWindows(prev => prev.filter(w => w.id !== id)); }; const handleCommand = (e: React.FormEvent) => { e.preventDefault(); if (inputVal.toLowerCase() === "exit") window.location.reload(); if (inputVal.toLowerCase() === "help") alert("COMMANDS: EXIT, REBOOT, LIST"); setInputVal(""); }; if (!booted) { return (

{bootLines.map((line, i) => (

{line}

))} _

); } return (

{/* DESKTOP ICONS */}

{[ { label: "SYSTEM", icon: "░▒▓" }, { label: "NETWORK", icon: "☲" }, { label: "TRASH", icon: "🗑" }, ].map(icon => (

{icon.icon}

{icon.label}

))}

{/* WINDOW MANAGER */} {windows.map((win) => ( closeWindow(win.id)} onFocus={() => bringToFront(win.id)} > {/* 1. DASHBOARD CONTENT */} {win.id === 'dashboard' && (

System Overview

AGENCY_NAME: PARADIGM

UPTIME: 421 Days

ACTIVE_USERS: 14

STATUS: OPTIMAL

                                                {`   __
 _/o_\\_
( \\_  /
/ / \\ \\
\\_) (_/`}

Rev_Stream (Year To Date)

)} {/* 2. TERMINAL CONTENT */} {win.id === 'terminal' && (

{PROCESSES.map(p => (

{p.pid} {p.name} {p.status}

))}

AWAITING INPUT...

)} {/* 3. FINANCE CONTENT */} {win.id === 'finance' && (

{[ { id: "001", client: "NIKE", val: "45,000" }, { id: "002", client: "ACME", val: "12,200" }, { id: "003", client: "NASA", val: "99,000" }, ].map((row, i) => ( ))}

ID	CLIENT	$$$
{row.id}	{row.client}	{row.val}

--- END OF FILE ---

)} ))} {/* TASKBAR */}

{windows.map(w => ( ))}

MEM: 640K OK

); }

Property	Type	Default	Description
terminalColor	string	#00ff00	Terminal green color for text.
backgroundColor	string	#000000	Mainframe background color (black).
enableScanlines	boolean	true	Enable CRT scanline effects.
fontFamily	string	monospace	Monospace font for retro computing feel.

The Mainframe

Props