"use client"; import { useState } from "react"; import { CheckSquare, Calendar as CalIcon, PieChart, Search, Bell, Plus, Paperclip, MessageSquare, Layout, Pause, Play, } from "lucide-react"; import { cn } from "@/src/lib/utils"; import { CLIENTS, DashboardView, TaskTableView, ReportsView } from "@/src/components/CoreLandingPages/AgencyPortfolio/tsx/OPERATOROS"; // --- MAIN LAYOUT --- export default function AgencyOperator() { const [activeTab, setActiveTab] = useState("dashboard"); const [selectedClient, setSelectedClient] = useState("all"); const [isTracking, setIsTracking] = useState(false); const [timer, setTimer] = useState("00:00:00"); const TABS = [ { id: "dashboard", label: "Overview", icon: Layout }, { id: "tasks", label: "Workforce", icon: CheckSquare }, { id: "schedule", label: "Timeline", icon: CalIcon }, { id: "reports", label: "Reports", icon: PieChart }, ]; return (

{/* 1. PRIMARY SIDEBAR (Client Switcher) */}

{CLIENTS.map((client) => ( ))}

{/* 2. MAIN CONTENT AREA */}

{/* Header / Command Bar */}

{/* Context Breadcrumb */}

{CLIENTS.find(c => c.id === selectedClient)?.name} / {activeTab}

{/* Global Timer & Actions */}

{isTracking ? "01:24:10" : "00:00:00"} Billable

{/* Navigation Tabs */}

{TABS.map((tab) => ( ))}

{/* Viewport */}

{activeTab === 'dashboard' && } {activeTab === 'tasks' && } {activeTab === 'schedule' && (

Timeline View Integration Ready

)} {activeTab === 'reports' && }

{/* 3. OPTIONAL RIGHT PANEL (Context/Chat) */} {/* Hidden on small screens, meant for notes/chat while working */}

); }

Property	Type	Default	Description
terminalColor	string	#00ff00	Terminal text color (typically green).
backgroundColor	string	#0a0a0a	Terminal background color.
enableTypingEffect	boolean	true	Enable typing animation effects.
fontFamily	string	monospace	Font family (monospace for terminal feel).

Operator OS

Props