AK-21/Graphite-Industrial-Intelligence

1import React from 'react';2import { LayoutDashboard, Database, FileText, Search, Activity, Menu, Share2, Sparkles } from 'lucide-react';3import { motion } from 'framer-motion';4import { Link, useLocation } from 'wouter';5import clsx from 'clsx';6 7interface DashboardLayoutProps {8  children: React.ReactNode;9}10 11export default function DashboardLayout({ children }: DashboardLayoutProps) {12  const [location] = useLocation();13 14  const links = [15    { href: '/', label: 'Home Dashboard', icon: LayoutDashboard },16    { href: '/assets', label: 'Asset Registry', icon: Database },17    { href: '/documents', label: 'Documents', icon: FileText },18    { href: '/qa', label: 'Knowledge Q&A', icon: Search },19    { href: '/graph', label: 'Knowledge Graph', icon: Share2 },20    { href: '/alerts', label: 'Alerts & Timeline', icon: Activity },21  ];22 23  return (24    <div className="flex h-screen w-full overflow-hidden text-foreground">25      {/* Sidebar - Glassmorphism */}26      <motion.aside 27        initial={{ x: -250 }}28        animate={{ x: 0 }}29        className="w-64 glass-panel border-r border-gray-800 flex flex-col z-20"30      >31        <Link href="/">32          <div className="p-6 border-b border-gray-800 flex items-center space-x-3 cursor-pointer hover:bg-gray-800/30 transition-colors">33            <Sparkles className="w-6 h-6 text-accent" />34            <h1 className="text-xl font-bold font-mono text-white tracking-wide">Graphite Industrial</h1>35          </div>36        </Link>37        <nav className="flex-1 overflow-y-auto p-4 space-y-2 mt-4">38          {links.map((link) => {39            const Icon = link.icon;40            const isActive = location === link.href;41            return (42              <Link key={link.href} href={link.href} className="block">43                <motion.div44                  whileHover={{ scale: 1.02, x: 5 }}45                  whileTap={{ scale: 0.98 }}46                  className={clsx(47                    "flex items-center space-x-3 px-4 py-3 rounded-lg font-medium transition-all duration-300 cursor-pointer",48                    isActive 49                      ? "bg-accent/20 text-accent border border-accent/50 shadow-[0_0_15px_rgba(6,182,212,0.3)]" 50                      : "text-gray-400 hover:bg-gray-800/50 hover:text-white border border-transparent"51                  )}52                >53                  <Icon className={clsx("w-5 h-5 transition-colors", isActive ? "text-accent" : "text-gray-500")} />54                  <span>{link.label}</span>55                </motion.div>56              </Link>57            );58          })}59        </nav>60        <div className="p-4 border-t border-gray-800">61           <div className="flex items-center space-x-3 px-4 py-3 bg-gray-900/50 rounded-lg border border-gray-800">62             <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-accent to-blue-600 flex items-center justify-center text-white font-bold shadow-lg shadow-accent/20">63               U64             </div>65             <div className="flex flex-col">66               <span className="text-sm font-medium text-white">Admin User</span>67               <span className="text-xs text-gray-500">System Operator</span>68             </div>69           </div>70        </div>71      </motion.aside>72 73      {/* Main Content */}74      <main className="flex-1 flex flex-col overflow-hidden relative">75        {/* Animated Background Effects */}76        <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-accent/20 rounded-full blur-[120px] mix-blend-screen pointer-events-none animate-blob"></div>77        <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-blue-600/20 rounded-full blur-[120px] mix-blend-screen pointer-events-none animate-blob" style={{ animationDelay: '2s' }}></div>78 79        <header className="h-16 glass-panel border-b border-gray-800 flex items-center px-6 justify-between z-10 sticky top-0">80          <button className="text-gray-400 hover:text-white transition-colors">81            <Menu className="w-6 h-6" />82          </button>83          <div className="flex items-center space-x-4">84             <span className="text-xs font-mono text-accent bg-accent/10 px-3 py-1 rounded-full border border-accent/20 neon-text">85               System Status: OPTIMAL86             </span>87          </div>88        </header>89        <div className="flex-1 overflow-auto p-8 relative z-0">90          {children}91        </div>92      </main>93    </div>94  );95}96