azcomputerguru
c332f4f48d
- Reduce layout density ~20% (tighter padding, margins, fonts) - Flatten Agents table view with Client/Site columns (no grouping) - Add version info to sidebar footer (UI v0.2.0, API v0.1.0) - Replace Commands nav with sidebar History log - Add /history page with full command list - Add /history/:id detail view with output display - Apply Mission Control styling to all new components Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
292 lines
12 KiB
TypeScript
292 lines
12 KiB
TypeScript
import { ReactNode, useState } from "react";
|
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { commandsApi, Command } from "../api/client";
|
|
import {
|
|
LayoutDashboard,
|
|
Server,
|
|
Settings,
|
|
LogOut,
|
|
Menu,
|
|
X,
|
|
Building2,
|
|
MapPin,
|
|
History,
|
|
CheckCircle,
|
|
XCircle,
|
|
Clock,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { useAuth } from "../hooks/useAuth";
|
|
import { Button } from "./Button";
|
|
|
|
interface LayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
const navItems = [
|
|
{ path: "/", label: "Dashboard", icon: LayoutDashboard },
|
|
{ path: "/clients", label: "Clients", icon: Building2 },
|
|
{ path: "/sites", label: "Sites", icon: MapPin },
|
|
{ path: "/agents", label: "Agents", icon: Server },
|
|
{ path: "/settings", label: "Settings", icon: Settings },
|
|
];
|
|
|
|
const APP_VERSION = "0.2.0";
|
|
const SERVER_VERSION = "0.1.0";
|
|
|
|
function CommandStatusIcon({ status }: { status: Command["status"] }) {
|
|
const config = {
|
|
pending: { icon: Clock, color: "text-amber-500" },
|
|
running: { icon: Loader2, color: "text-cyan-500 animate-spin" },
|
|
completed: { icon: CheckCircle, color: "text-emerald-500" },
|
|
failed: { icon: XCircle, color: "text-rose-500" },
|
|
};
|
|
const { icon: Icon, color } = config[status];
|
|
return <Icon className={`h-3 w-3 ${color}`} />;
|
|
}
|
|
|
|
export function Layout({ children }: LayoutProps) {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { user, logout } = useAuth();
|
|
|
|
const { data: commands = [] } = useQuery({
|
|
queryKey: ["commands"],
|
|
queryFn: () => commandsApi.list().then((res) => res.data),
|
|
refetchInterval: 15000,
|
|
});
|
|
|
|
const recentCommands = commands.slice(0, 4);
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate("/login");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950">
|
|
{/* Subtle grid pattern background */}
|
|
<div
|
|
className="fixed inset-0 pointer-events-none"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "50px 50px",
|
|
}}
|
|
/>
|
|
|
|
{/* Mobile header */}
|
|
<div className="lg:hidden fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-slate-900/80 backdrop-blur-xl border-b border-cyan-500/20">
|
|
<span className="font-bold text-lg tracking-wider bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
GURUR<span className="text-cyan-400">MM</span>
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
|
className="text-slate-400 hover:text-cyan-400 hover:bg-cyan-500/10 transition-all duration-300"
|
|
>
|
|
{sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile menu overlay with blur */}
|
|
<div
|
|
className={`fixed inset-0 z-40 lg:hidden transition-all duration-300 ${
|
|
sidebarOpen
|
|
? "opacity-100 pointer-events-auto"
|
|
: "opacity-0 pointer-events-none"
|
|
}`}
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-slate-950/80 backdrop-blur-md"
|
|
onClick={() => setSidebarOpen(false)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex relative">
|
|
{/* Sidebar - Mission Control Aesthetic */}
|
|
<aside
|
|
className={`fixed inset-y-0 left-0 z-50 w-60 transform transition-all duration-300 ease-out lg:translate-x-0 lg:static ${
|
|
sidebarOpen ? "translate-x-0" : "-translate-x-full"
|
|
}`}
|
|
>
|
|
{/* Glassmorphism sidebar container */}
|
|
<div className="flex flex-col h-full bg-slate-900/60 backdrop-blur-xl border-r border-cyan-500/20 shadow-[inset_0_0_30px_rgba(6,182,212,0.05)]">
|
|
{/* Cyan left border glow */}
|
|
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-gradient-to-b from-transparent via-cyan-500/50 to-transparent" />
|
|
|
|
{/* Logo section */}
|
|
<div className="p-4 hidden lg:block">
|
|
<div className="flex items-center gap-3">
|
|
{/* Logo icon with glow */}
|
|
<div className="relative">
|
|
<div className="absolute inset-0 bg-cyan-500/30 blur-lg rounded-lg" />
|
|
<div className="relative h-8 w-8 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
|
|
<LayoutDashboard className="h-4 w-4 text-white" />
|
|
</div>
|
|
</div>
|
|
{/* Logo text with gradient */}
|
|
<div>
|
|
<h1 className="text-lg font-bold tracking-wider">
|
|
<span className="bg-gradient-to-r from-cyan-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
|
|
GURU
|
|
</span>
|
|
<span className="text-slate-300">RMM</span>
|
|
</h1>
|
|
<p className="text-[10px] uppercase tracking-[0.2em] text-slate-500">
|
|
Mission Control
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 px-2 space-y-0.5 mt-4 lg:mt-2 pt-16 lg:pt-0">
|
|
{navItems.map((item) => {
|
|
const isActive = location.pathname === item.path;
|
|
return (
|
|
<Link
|
|
key={item.path}
|
|
to={item.path}
|
|
onClick={() => setSidebarOpen(false)}
|
|
className={`group relative flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-semibold uppercase tracking-wider transition-all duration-300 ${
|
|
isActive
|
|
? "text-cyan-400"
|
|
: "text-slate-400 hover:text-slate-200"
|
|
}`}
|
|
>
|
|
{/* Active/Hover background glow */}
|
|
<div
|
|
className={`absolute inset-0 rounded-lg transition-all duration-300 ${
|
|
isActive
|
|
? "bg-cyan-500/10 shadow-[inset_0_0_20px_rgba(6,182,212,0.1)]"
|
|
: "bg-transparent group-hover:bg-cyan-500/5"
|
|
}`}
|
|
/>
|
|
|
|
{/* Active left border indicator */}
|
|
<div
|
|
className={`absolute left-0 top-2 bottom-2 w-[3px] rounded-full transition-all duration-300 ${
|
|
isActive
|
|
? "bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.8)]"
|
|
: "bg-transparent"
|
|
}`}
|
|
/>
|
|
|
|
{/* Icon with conditional glow */}
|
|
<div className="relative z-10">
|
|
<item.icon
|
|
className={`h-4 w-4 transition-all duration-300 ${
|
|
isActive
|
|
? "text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]"
|
|
: "text-slate-500 group-hover:text-slate-300"
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Label */}
|
|
<span className="relative z-10">{item.label}</span>
|
|
|
|
{/* Active indicator dot */}
|
|
{isActive && (
|
|
<div className="absolute right-4 h-1.5 w-1.5 rounded-full bg-cyan-400 shadow-[0_0_6px_rgba(6,182,212,0.8)]" />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* User profile section */}
|
|
<div className="p-3 border-t border-cyan-500/10">
|
|
<div className="flex items-center gap-2 mb-3 p-2 rounded-lg bg-slate-800/30">
|
|
{/* Avatar with cyan ring glow */}
|
|
<div className="relative">
|
|
{/* Glow ring */}
|
|
<div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full opacity-50 blur-sm" />
|
|
{/* Avatar */}
|
|
<div className="relative h-8 w-8 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 ring-2 ring-cyan-500/50 flex items-center justify-center text-cyan-400 text-sm font-bold shadow-lg">
|
|
{user?.name?.[0] || user?.email?.[0] || "U"}
|
|
</div>
|
|
{/* Online indicator */}
|
|
<div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full bg-emerald-500 ring-2 ring-slate-900 shadow-[0_0_8px_rgba(16,185,129,0.6)]" />
|
|
</div>
|
|
|
|
{/* User info */}
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-slate-200 truncate">
|
|
{user?.name || user?.email}
|
|
</p>
|
|
<p className="text-xs text-cyan-500/70 uppercase tracking-wider truncate">
|
|
{user?.role || "Operator"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sign out button */}
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full justify-start gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-300 group"
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut className="h-4 w-4 transition-all duration-300 group-hover:text-red-400 group-hover:drop-shadow-[0_0_6px_rgba(239,68,68,0.6)]" />
|
|
Sign Out
|
|
</Button>
|
|
|
|
{/* History log */}
|
|
<div className="mt-2 pt-2 border-t border-slate-800/50">
|
|
<Link
|
|
to="/history"
|
|
className="flex items-center gap-1.5 px-1 py-1 text-[10px] font-mono text-slate-500 hover:text-cyan-400 transition-colors"
|
|
>
|
|
<History className="h-3 w-3" />
|
|
<span>History</span>
|
|
</Link>
|
|
|
|
<div className="mt-1 space-y-0.5">
|
|
{recentCommands.length === 0 ? (
|
|
<p className="text-[10px] text-slate-600 px-1">No recent activity</p>
|
|
) : (
|
|
recentCommands.map((cmd: Command) => (
|
|
<Link
|
|
key={cmd.id}
|
|
to={`/history/${cmd.id}`}
|
|
className="flex items-center gap-1.5 px-1 py-0.5 rounded text-[10px] hover:bg-slate-800/50 transition-colors"
|
|
title={cmd.command_text}
|
|
>
|
|
<CommandStatusIcon status={cmd.status} />
|
|
<span className="text-slate-500 hover:text-slate-400 truncate flex-1 font-mono">
|
|
{cmd.command_text.length > 18
|
|
? cmd.command_text.slice(0, 18) + "..."
|
|
: cmd.command_text}
|
|
</span>
|
|
</Link>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Version info */}
|
|
<div className="mt-2 pt-2 border-t border-slate-800/50 text-[10px] font-mono text-slate-600 flex justify-between px-1">
|
|
<span>UI v{APP_VERSION}</span>
|
|
<span>API v{SERVER_VERSION}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main content area */}
|
|
<main className="flex-1 min-h-screen pt-16 lg:pt-0">
|
|
<div className="p-4 lg:p-6 transition-all duration-300">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|