first commit
This commit is contained in:
commit
4b98219bf7
144 changed files with 31561 additions and 0 deletions
18
frontend/components/layout/page-shell.tsx
Normal file
18
frontend/components/layout/page-shell.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PageShellProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Standard page wrapper — enforces consistent vertical spacing across all pages.
|
||||
* Every (dashboard) page should wrap its content in this component.
|
||||
*/
|
||||
export function PageShell({ children, className }: PageShellProps) {
|
||||
return (
|
||||
<div className={cn("space-y-6", className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
211
frontend/components/layout/sidebar.tsx
Normal file
211
frontend/components/layout/sidebar.tsx
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Thermometer,
|
||||
Zap,
|
||||
Wind,
|
||||
Server,
|
||||
Bell,
|
||||
BarChart3,
|
||||
Settings,
|
||||
Database,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Map,
|
||||
Gauge,
|
||||
Fuel,
|
||||
Droplets,
|
||||
Flame,
|
||||
Leaf,
|
||||
Network,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { useState } from "react";
|
||||
|
||||
interface NavItem {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
label: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
const navGroups: NavGroup[] = [
|
||||
{
|
||||
label: "Overview",
|
||||
items: [
|
||||
{ href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ href: "/floor-map", label: "Floor Map", icon: Map },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Infrastructure",
|
||||
items: [
|
||||
{ href: "/power", label: "Power", icon: Zap },
|
||||
{ href: "/generator", label: "Generator", icon: Fuel },
|
||||
{ href: "/cooling", label: "Cooling", icon: Wind },
|
||||
{ href: "/environmental", label: "Environmental", icon: Thermometer },
|
||||
{ href: "/network", label: "Network", icon: Network },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Safety",
|
||||
items: [
|
||||
{ href: "/leak", label: "Leak Detection", icon: Droplets },
|
||||
{ href: "/fire", label: "Fire & Safety", icon: Flame },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Operations",
|
||||
items: [
|
||||
{ href: "/assets", label: "Assets", icon: Server },
|
||||
{ href: "/alarms", label: "Alarms", icon: Bell },
|
||||
{ href: "/capacity", label: "Capacity", icon: Gauge },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Management",
|
||||
items: [
|
||||
{ href: "/reports", label: "Reports", icon: BarChart3 },
|
||||
{ href: "/energy", label: "Energy & CO₂", icon: Leaf },
|
||||
{ href: "/maintenance", label: "Maintenance", icon: Wrench },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
"flex flex-col h-screen border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out shrink-0",
|
||||
collapsed ? "w-16" : "w-60"
|
||||
)}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className={cn(
|
||||
"flex items-center gap-3 px-4 py-5 border-b border-sidebar-border shrink-0",
|
||||
collapsed && "justify-center px-2"
|
||||
)}>
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary shrink-0">
|
||||
<Database className="w-4 h-4 text-primary-foreground" />
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className="flex flex-col leading-tight">
|
||||
<span className="text-sm font-bold tracking-tight text-sidebar-foreground">DemoBMS</span>
|
||||
<span className="text-[10px] text-sidebar-foreground/50 uppercase tracking-widest">Infrastructure</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Main nav */}
|
||||
<nav className="flex-1 px-2 py-3 overflow-y-auto space-y-4">
|
||||
{navGroups.map((group) => (
|
||||
<div key={group.label}>
|
||||
{/* Section header — hidden when collapsed */}
|
||||
{!collapsed && (
|
||||
<p className="px-3 mb-1 text-[10px] font-semibold uppercase tracking-widest text-sidebar-foreground/35 select-none">
|
||||
{group.label}
|
||||
</p>
|
||||
)}
|
||||
{collapsed && (
|
||||
<div className="my-1 mx-2 border-t border-sidebar-border/60" />
|
||||
)}
|
||||
<div className="space-y-0.5">
|
||||
{group.items.map(({ href, label, icon: Icon }) => {
|
||||
const active = pathname === href || pathname.startsWith(href + "/");
|
||||
return (
|
||||
<Tooltip key={href} delayDuration={0}>
|
||||
<TooltipTrigger asChild>
|
||||
<Link
|
||||
href={href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
|
||||
"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background",
|
||||
active
|
||||
? "bg-sidebar-accent text-primary"
|
||||
: "text-sidebar-foreground/70",
|
||||
collapsed && "justify-center px-2"
|
||||
)}
|
||||
>
|
||||
<Icon className={cn("w-4 h-4 shrink-0", active && "text-primary")} />
|
||||
{!collapsed && <span className="flex-1">{label}</span>}
|
||||
</Link>
|
||||
</TooltipTrigger>
|
||||
{collapsed && (
|
||||
<TooltipContent side="right">{label}</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Bottom section: collapse toggle + settings */}
|
||||
<div className="px-2 pb-4 border-t border-sidebar-border pt-3 space-y-0.5 shrink-0">
|
||||
{/* Collapse toggle */}
|
||||
<Tooltip delayDuration={0}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className={cn(
|
||||
"flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
|
||||
"text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background",
|
||||
collapsed && "justify-center px-2"
|
||||
)}
|
||||
aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="w-4 h-4 shrink-0" />
|
||||
) : (
|
||||
<>
|
||||
<ChevronLeft className="w-4 h-4 shrink-0" />
|
||||
<span>Collapse</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
{collapsed && (
|
||||
<TooltipContent side="right">Expand sidebar</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
|
||||
{/* Settings */}
|
||||
<Tooltip delayDuration={0}>
|
||||
<TooltipTrigger asChild>
|
||||
<Link
|
||||
href="/settings"
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
|
||||
"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background",
|
||||
pathname === "/settings" ? "bg-sidebar-accent text-primary" : "text-sidebar-foreground/70",
|
||||
collapsed && "justify-center px-2"
|
||||
)}
|
||||
>
|
||||
<Settings className="w-4 h-4 shrink-0" />
|
||||
{!collapsed && <span>Settings</span>}
|
||||
</Link>
|
||||
</TooltipTrigger>
|
||||
{collapsed && (
|
||||
<TooltipContent side="right">Settings</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
100
frontend/components/layout/topbar.tsx
Normal file
100
frontend/components/layout/topbar.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
"use client";
|
||||
|
||||
import { Bell, Menu, Moon, Sun } from "lucide-react";
|
||||
import { SimulatorPanel } from "@/components/simulator/SimulatorPanel";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { UserButton } from "@clerk/nextjs";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAlarmCount } from "@/lib/alarm-context";
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
||||
import { Sidebar } from "./sidebar";
|
||||
|
||||
const pageTitles: Record<string, string> = {
|
||||
"/dashboard": "Overview",
|
||||
"/floor-map": "Floor Map",
|
||||
"/power": "Power Management",
|
||||
"/generator": "Generator & Transfer",
|
||||
"/cooling": "Cooling & Optimisation",
|
||||
"/environmental": "Environmental Monitoring",
|
||||
"/leak": "Leak Detection",
|
||||
"/fire": "Fire & Safety",
|
||||
"/network": "Network Infrastructure",
|
||||
"/assets": "Asset Management",
|
||||
"/alarms": "Alarms & Events",
|
||||
"/capacity": "Capacity Planning",
|
||||
"/reports": "Reports",
|
||||
"/energy": "Energy & Sustainability",
|
||||
"/maintenance": "Maintenance Windows",
|
||||
"/settings": "Settings",
|
||||
};
|
||||
|
||||
export function Topbar() {
|
||||
const pathname = usePathname();
|
||||
const pageTitle = pageTitles[pathname] ?? "DemoBMS";
|
||||
const { active: activeAlarms } = useAlarmCount();
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-30 flex items-center justify-between h-14 px-4 border-b border-border bg-background/80 backdrop-blur-sm shrink-0">
|
||||
{/* Left: mobile menu + page title */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
|
||||
<Menu className="w-4 h-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="p-0 w-60">
|
||||
<Sidebar />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
<h1 className="text-sm font-semibold text-foreground">{pageTitle}</h1>
|
||||
</div>
|
||||
|
||||
{/* Right: alarm bell + user */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Alarm bell — single canonical alarm indicator */}
|
||||
<Button variant="ghost" size="icon" className="relative h-8 w-8" asChild>
|
||||
<Link href="/alarms" aria-label={`Alarms${activeAlarms > 0 ? ` — ${activeAlarms} active` : ""}`}>
|
||||
<Bell className="w-4 h-4" />
|
||||
{activeAlarms > 0 && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="absolute -top-0.5 -right-0.5 h-4 min-w-4 px-1 text-[9px] leading-none"
|
||||
>
|
||||
{activeAlarms > 99 ? "99+" : activeAlarms}
|
||||
</Badge>
|
||||
)}
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
{/* Scenario simulator */}
|
||||
<SimulatorPanel />
|
||||
|
||||
{/* Theme toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{theme === "dark" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</Button>
|
||||
|
||||
{/* Clerk user button */}
|
||||
<UserButton
|
||||
appearance={{
|
||||
elements: {
|
||||
avatarBox: "w-7 h-7",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue