@trackany-device/components 1.0.0

package/package.json

@@ -0,0 +1,185 @@
+{
+    "name": "@trackany-device/components",
+    "version": "1.0.0",
+    "description": "Shared React components for the Track Any Device platform.",
+    "license": "UNLICENSED",
+    "type": "module",
+    "engines": {
+        "node": ">=20"
+    },
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "exports": {
+        ".": "./src/index.ts",
+        "./styles/*": "./src/styles/*",
+        "./styles/keenicons.css": "./src/components/keenicons/assets/styles.css"
+    },
+    "files": [
+        "src",
+        "!src/**/*.test.*",
+        "!src/**/*.spec.*",
+        "!src/**/.DS_Store"
+    ],
+    "scripts": {
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "types:check": "tsc --noEmit",
+        "types:watch": "tsc --noEmit --watch",
+        "release": "semantic-release",
+        "release:dry": "semantic-release --dry-run"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org"
+    },
+    "dependencies": {
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.0.0"
+    },
+    "peerDependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@googlemaps/js-api-loader": "^2.0.0",
+        "@hookform/resolvers": "^5.2.1",
+        "@radix-ui/react-accordion": "^1.2.0",
+        "@radix-ui/react-alert-dialog": "^1.1.0",
+        "@radix-ui/react-aspect-ratio": "^1.1.0",
+        "@radix-ui/react-avatar": "^1.1.0",
+        "@radix-ui/react-checkbox": "^1.1.0",
+        "@radix-ui/react-collapsible": "^1.1.0",
+        "@radix-ui/react-dialog": "^1.1.0",
+        "@radix-ui/react-dropdown-menu": "^2.1.0",
+        "@radix-ui/react-hover-card": "^1.1.0",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-navigation-menu": "^1.2.0",
+        "@radix-ui/react-popover": "^1.1.0",
+        "@radix-ui/react-progress": "^1.1.0",
+        "@radix-ui/react-radio-group": "^1.2.0",
+        "@radix-ui/react-scroll-area": "^1.2.0",
+        "@radix-ui/react-select": "^2.1.0",
+        "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-slider": "^1.2.0",
+        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toggle": "^1.1.0",
+        "@radix-ui/react-toggle-group": "^1.1.0",
+        "@radix-ui/react-tooltip": "^1.1.0",
+        "@tanstack/react-table": "^8.21.3",
+        "@xyflow/react": "^12.0.0",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.1.0",
+        "input-otp": "^1.4.2",
+        "lucide-react": "^0.541.0",
+        "motion": "^12.0.0",
+        "react": "^19.0.0",
+        "react-aria-components": "^1.12.0",
+        "react-day-picker": "^9.9.0",
+        "react-dom": "^19.0.0",
+        "react-hook-form": "^7.68.0",
+        "react-resizable-panels": "^3.0.5",
+        "recharts": "^2.15.1",
+        "sonner": "^2.0.7",
+        "tw-animate-css": "^1.4.0",
+        "vaul": "^1.1.2",
+        "zod": "^3.25.67"
+    },
+    "peerDependenciesMeta": {
+        "@dnd-kit/core": {
+            "optional": true
+        },
+        "@dnd-kit/modifiers": {
+            "optional": true
+        },
+        "@dnd-kit/sortable": {
+            "optional": true
+        },
+        "@dnd-kit/utilities": {
+            "optional": true
+        },
+        "@googlemaps/js-api-loader": {
+            "optional": true
+        },
+        "@xyflow/react": {
+            "optional": true
+        },
+        "recharts": {
+            "optional": true
+        },
+        "tw-animate-css": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@googlemaps/js-api-loader": "^2.0.0",
+        "@hookform/resolvers": "^5.2.1",
+        "@radix-ui/react-accordion": "^1.2.0",
+        "@radix-ui/react-alert-dialog": "^1.1.0",
+        "@radix-ui/react-aspect-ratio": "^1.1.0",
+        "@radix-ui/react-avatar": "^1.1.0",
+        "@radix-ui/react-checkbox": "^1.1.0",
+        "@radix-ui/react-collapsible": "^1.1.0",
+        "@radix-ui/react-dialog": "^1.1.0",
+        "@radix-ui/react-dropdown-menu": "^2.1.0",
+        "@radix-ui/react-hover-card": "^1.1.0",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-navigation-menu": "^1.2.0",
+        "@radix-ui/react-popover": "^1.1.0",
+        "@radix-ui/react-progress": "^1.1.0",
+        "@radix-ui/react-radio-group": "^1.2.0",
+        "@radix-ui/react-scroll-area": "^1.2.0",
+        "@radix-ui/react-select": "^2.1.0",
+        "@radix-ui/react-separator": "^1.1.0",
+        "@radix-ui/react-slider": "^1.2.0",
+        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toggle": "^1.1.0",
+        "@radix-ui/react-toggle-group": "^1.1.0",
+        "@radix-ui/react-tooltip": "^1.1.0",
+        "@semantic-release/changelog": "^6.0.3",
+        "@semantic-release/git": "^10.0.1",
+        "@storybook/addon-essentials": "^8.6.18",
+        "@storybook/addon-interactions": "^8.6.18",
+        "@storybook/react": "^8.6.18",
+        "@storybook/react-vite": "^8.6.18",
+        "@storybook/test": "^8.6.18",
+        "@tailwindcss/vite": "^4.3.0",
+        "@tanstack/react-table": "^8.21.3",
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.7.0",
+        "@xyflow/react": "^12.0.0",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.1.0",
+        "input-otp": "^1.4.2",
+        "lucide-react": "^0.541.0",
+        "motion": "^12.0.0",
+        "react": "^19.0.0",
+        "react-aria-components": "^1.12.0",
+        "react-day-picker": "^9.9.0",
+        "react-dom": "^19.0.0",
+        "react-hook-form": "^7.68.0",
+        "react-resizable-panels": "^3.0.5",
+        "recharts": "^2.15.1",
+        "semantic-release": "^24.2.9",
+        "sonner": "^2.0.7",
+        "storybook": "^8.6.18",
+        "tailwindcss": "^4.3.0",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "^5.0.0",
+        "vaul": "^1.1.2",
+        "vite": "^6.4.2",
+        "zod": "^3.25.67"
+    }
+}

package/src/components/Card.tsx

@@ -0,0 +1,9 @@
+// Re-export the ShadCN-compatible Card primitives from ui/card
+export {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardDescription,
+    CardContent,
+    CardFooter,
+} from './ui/card';

package/src/components/alert-error.tsx

@@ -0,0 +1,24 @@
+import { AlertCircleIcon } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
+
+export default function AlertError({
+    errors,
+    title,
+}: {
+    errors: string[];
+    title?: string;
+}) {
+    return (
+        <Alert variant="destructive">
+            <AlertCircleIcon />
+            <AlertTitle>{title || 'Something went wrong.'}</AlertTitle>
+            <AlertDescription>
+                <ul className="list-inside list-disc text-sm">
+                    {Array.from(new Set(errors)).map((error, index) => (
+                        <li key={index}>{error}</li>
+                    ))}
+                </ul>
+            </AlertDescription>
+        </Alert>
+    );
+}

package/src/components/app-content.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SidebarInset } from './ui/sidebar';
+import type { AppVariant } from '../types/ui';
+
+type Props = React.ComponentProps<'main'> & {
+    variant?: AppVariant;
+};
+
+export function AppContent({ variant = 'sidebar', children, ...props }: Props) {
+    if (variant === 'sidebar') {
+        return <SidebarInset {...props}>{children}</SidebarInset>;
+    }
+
+    return (
+        <main
+            className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-md"
+            {...props}
+        >
+            {children}
+        </main>
+    );
+}

package/src/components/app-header.tsx

@@ -0,0 +1,153 @@
+'use client';
+import { PlatformLink } from '../platform/context';
+import { Menu, Search } from 'lucide-react';
+import AppLogo from './app-logo';
+import { Breadcrumbs } from './breadcrumbs';
+import { NotificationBell } from './notification-bell';
+import { UserMenuContent } from './user-menu-content';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import { Button } from './ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import {
+    NavigationMenu,
+    NavigationMenuItem,
+    NavigationMenuList,
+    navigationMenuTriggerStyle,
+} from './ui/navigation-menu';
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from './ui/sheet';
+import { useCurrentUrl } from '../hooks/use-current-url';
+import { useInitials } from '../hooks/use-initials';
+import { cn } from '../lib/utils';
+import type { BreadcrumbItem, NavItem } from '../types/navigation';
+import type { User } from '../types/auth';
+
+const activeItemStyles = 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
+
+type Props = {
+    breadcrumbs?: BreadcrumbItem[];
+    user?: User | null;
+    navItems?: NavItem[];
+    dashboardHref?: string;
+    unreadCount?: number;
+    settingsUrl?: string;
+    logoutUrl?: string;
+};
+
+export function AppHeader({
+    breadcrumbs = [],
+    user,
+    navItems = [],
+    dashboardHref = '/dashboard',
+    unreadCount = 0,
+    settingsUrl = '/settings/profile',
+    logoutUrl = '/logout',
+}: Props) {
+    const getInitials = useInitials();
+    const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();
+
+    return (
+        <>
+            <div className="border-b border-sidebar-border/80">
+                <div className="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
+                    <div className="lg:hidden">
+                        <Sheet>
+                            <SheetTrigger asChild>
+                                <Button variant="ghost" size="icon" className="mr-2 h-[34px] w-[34px]">
+                                    <Menu className="h-5 w-5" />
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent side="left" className="flex h-full w-64 flex-col items-stretch justify-between bg-sidebar">
+                                <SheetTitle className="sr-only">Navigation menu</SheetTitle>
+                                <SheetHeader className="flex justify-start text-left">
+                                    <AppLogo className="h-6 w-6 fill-current text-black dark:text-white" />
+                                </SheetHeader>
+                                <div className="flex h-full flex-1 flex-col space-y-4 p-4">
+                                    <div className="flex flex-col space-y-4">
+                                        {navItems.map((item) => (
+                                            <PlatformLink key={item.title} href={item.href} className="flex items-center space-x-2 font-medium">
+                                                {item.icon && <item.icon className="h-5 w-5" />}
+                                                <span>{item.title}</span>
+                                            </PlatformLink>
+                                        ))}
+                                    </div>
+                                </div>
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+
+                    <PlatformLink href={dashboardHref} prefetch className="flex items-center space-x-2">
+                        <AppLogo />
+                    </PlatformLink>
+
+                    <div className="ml-6 hidden h-full items-center space-x-6 lg:flex">
+                        <NavigationMenu className="flex h-full items-stretch">
+                            <NavigationMenuList className="flex h-full items-stretch space-x-2">
+                                {navItems.map((item, index) => (
+                                    <NavigationMenuItem key={index} className="relative flex h-full items-center">
+                                        <PlatformLink
+                                            href={item.href}
+                                            className={cn(
+                                                navigationMenuTriggerStyle(),
+                                                whenCurrentUrl(item.href, activeItemStyles),
+                                                'h-9 cursor-pointer px-3',
+                                            )}
+                                        >
+                                            {item.icon && <item.icon className="mr-2 h-4 w-4" />}
+                                            {item.title}
+                                        </PlatformLink>
+                                        {isCurrentUrl(item.href) && (
+                                            <div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white" />
+                                        )}
+                                    </NavigationMenuItem>
+                                ))}
+                            </NavigationMenuList>
+                        </NavigationMenu>
+                    </div>
+
+                    <div className="ml-auto flex items-center space-x-2">
+                        <div className="relative flex items-center space-x-1">
+                            <Button variant="ghost" size="icon" className="group h-9 w-9 cursor-pointer">
+                                <Search className="!size-5 opacity-80 group-hover:opacity-100" />
+                            </Button>
+                            <NotificationBell unreadCount={unreadCount} />
+                        </div>
+                        {user && (
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button variant="ghost" className="size-10 rounded-full p-1">
+                                        <Avatar className="size-8 overflow-hidden rounded-full">
+                                            <AvatarImage src={user.avatar} alt={user.name} />
+                                            <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
+                                                {getInitials(user.name)}
+                                            </AvatarFallback>
+                                        </Avatar>
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent className="w-56" align="end">
+                                    <UserMenuContent user={user} settingsUrl={settingsUrl} logoutUrl={logoutUrl} />
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        )}
+                    </div>
+                </div>
+            </div>
+            {breadcrumbs.length > 1 && (
+                <div className="flex w-full border-b border-sidebar-border/70">
+                    <div className="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
+                        <Breadcrumbs breadcrumbs={breadcrumbs} />
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

package/src/components/app-logo-icon.tsx

@@ -0,0 +1,13 @@
+import type { SVGAttributes } from 'react';
+
+export default function AppLogoIcon(props: SVGAttributes<SVGElement>) {
+    return (
+        <svg {...props} viewBox="0 0 40 42" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.2 5.63325L8.6 0.855469L0 5.63325V32.1434L16.2 41.1434L32.4 32.1434V23.699L40 19.4767V9.85547L31.4 5.07769L22.8 9.85547V18.2999L17.2 21.411V5.63325ZM38 18.2999L32.4 21.411V15.2545L38 12.1434V18.2999ZM36.9409 10.4439L31.4 13.5221L25.8591 10.4439L31.4 7.36561L36.9409 10.4439ZM24.8 18.2999V12.1434L30.4 15.2545V21.411L24.8 18.2999ZM23.8 20.0323L29.3409 23.1105L16.2 30.411L10.6591 27.3328L23.8 20.0323ZM7.6 27.9212L15.2 32.1434V38.2999L2 30.9666V7.92116L7.6 11.0323V27.9212ZM8.6 9.29991L3.05913 6.22165L8.6 3.14339L14.1409 6.22165L8.6 9.29991ZM30.4 24.8101L17.2 32.1434V38.2999L30.4 30.9666V24.8101ZM9.6 11.0323L15.2 7.92117V22.5221L9.6 25.6333V11.0323Z"
+            />
+        </svg>
+    );
+}

package/src/components/app-logo.tsx

@@ -0,0 +1,21 @@
+import logoUrl from '../assets/logo.png';
+
+export default function AppLogo({
+    className,
+    src,
+    alt = 'Logo',
+    ...props
+}: React.ComponentProps<'div'> & { src?: string; alt?: string }) {
+    return (
+        <div
+            className={`flex items-center gap-2${className ? ` ${className}` : ''}`}
+            {...props}
+        >
+            <img
+                src={src ?? logoUrl}
+                alt={alt}
+                className="h-8 max-w-[120px] object-contain group-data-[collapsible=icon]:hidden"
+            />
+        </div>
+    );
+}

package/src/components/app-shell.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { SidebarProvider } from './ui/sidebar';
+import type { AppVariant } from '../types/ui';
+
+type Props = {
+    children: ReactNode;
+    variant?: AppVariant;
+    defaultOpen?: boolean;
+};
+
+export function AppShell({ children, variant = 'sidebar', defaultOpen = true }: Props) {
+    if (variant === 'header') {
+        return (
+            <div className="flex min-h-screen w-full flex-col">{children}</div>
+        );
+    }
+
+    return <SidebarProvider defaultOpen={defaultOpen}>{children}</SidebarProvider>;
+}

package/src/components/app-sidebar-header.tsx

@@ -0,0 +1,68 @@
+'use client';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { SidebarTrigger } from './ui/sidebar';
+import { Breadcrumbs } from './breadcrumbs';
+import { NotificationBell } from './notification-bell';
+import { UserMenuContent } from './user-menu-content';
+import { useInitials } from '../hooks/use-initials';
+import type { BreadcrumbItem } from '../types/navigation';
+import type { User } from '../types/auth';
+
+export function AppSidebarHeader({
+    breadcrumbs = [],
+    user,
+    unreadCount = 0,
+    settingsUrl = '/settings/profile',
+    logoutUrl = '/logout',
+}: {
+    breadcrumbs?: BreadcrumbItem[];
+    user?: User | null;
+    unreadCount?: number;
+    settingsUrl?: string;
+    logoutUrl?: string;
+}) {
+    const getInitials = useInitials();
+
+    return (
+        <header className="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-border bg-background px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+            <div className="flex items-center gap-2">
+                <SidebarTrigger className="-ml-1 text-muted-foreground hover:text-foreground" />
+                <Breadcrumbs breadcrumbs={breadcrumbs} />
+            </div>
+
+            <div className="flex items-center gap-1">
+                <NotificationBell unreadCount={unreadCount} />
+
+                {user && (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <button className="flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-foreground hover:bg-accent hover:text-accent-foreground">
+                                <Avatar className="size-7 overflow-hidden rounded-full">
+                                    <AvatarImage src={user.avatar} alt={user.name} />
+                                    <AvatarFallback className="rounded-full bg-primary text-[11px] font-semibold text-primary-foreground">
+                                        {getInitials(user.name)}
+                                    </AvatarFallback>
+                                </Avatar>
+                                <span className="hidden max-w-32 truncate font-medium sm:block">
+                                    {user.name}
+                                </span>
+                            </button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-56" align="end">
+                            <UserMenuContent
+                                user={user}
+                                settingsUrl={settingsUrl}
+                                logoutUrl={logoutUrl}
+                            />
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                )}
+            </div>
+        </header>
+    );
+}

package/src/components/app-sidebar.tsx

@@ -0,0 +1,106 @@
+import { PlatformLink } from '../platform/context';
+import {
+    AlertTriangle, History, LayoutGrid, MapPin, MonitorPlay,
+    Settings, Shield, Smartphone, Terminal, Users, UserSquare2, Workflow,
+} from 'lucide-react';
+import AppLogo from './app-logo';
+import { NavMain } from './nav-main';
+import { NavUser } from './nav-user';
+import {
+    Sidebar, SidebarContent, SidebarFooter, SidebarHeader,
+    SidebarMenu, SidebarMenuButton, SidebarMenuItem,
+} from './ui/sidebar';
+import type { NavItem } from '../types/navigation';
+import type { User } from '../types/auth';
+
+export const DEFAULT_TENANT_NAV: NavItem[] = [
+    { title: 'Live Monitoring', href: '/map', icon: MonitorPlay },
+    { title: 'Assignees', href: '/assignees', icon: Users },
+    { title: 'Alerts & Incidents', href: '/incidents', icon: AlertTriangle },
+    { title: 'Beats & Boundaries', href: '/beats', icon: MapPin },
+    { title: 'Assignments', href: '/assignments', icon: Shield },
+    { title: 'Playback History', href: '/playback', icon: History },
+    { title: 'Devices', href: '/devices', icon: Smartphone },
+    { title: 'Supervisors & Teams', href: '/supervisors', icon: UserSquare2 },
+    { title: 'Workflows', href: '/workflows', icon: Workflow },
+    { title: 'Device Logs', href: '/device-logs', icon: Terminal },
+    { title: 'Settings', href: '/settings/organization', icon: Settings },
+];
+
+export function AppSidebar({
+    navItems,
+    dashboardItem,
+    user,
+    tenant,
+    settingsUrl = '/settings/profile',
+    logoutUrl = '/logout',
+    dashboardHref = '/dashboard',
+}: {
+    navItems?: NavItem[];
+    dashboardItem?: NavItem;
+    user?: User | null;
+    tenant?: { display_name?: string | null; sub_brand?: string | null } | null;
+    settingsUrl?: string;
+    logoutUrl?: string;
+    dashboardHref?: string;
+}) {
+    const items = navItems ?? DEFAULT_TENANT_NAV;
+    const dashboard: NavItem = dashboardItem ?? { title: 'Dashboard', href: dashboardHref, icon: LayoutGrid };
+    const allItems = [dashboard, ...items];
+
+    const appName =
+        (typeof window !== 'undefined' && (window as any).AppConfig?.appName) || 'Fleet Tracking';
+    const displayName = tenant?.display_name ?? appName;
+    const subBrand = tenant?.sub_brand ?? null;
+
+    return (
+        <Sidebar collapsible="icon" variant="floating">
+            <SidebarHeader className="mb-4 pt-0">
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" asChild className="hover:bg-sidebar-accent">
+                            <PlatformLink
+                                href={dashboardHref}
+                                className="flex-direction-col mx-auto h-[120px] max-w-[240px] items-center justify-center gap-2 rounded-lg bg-white/100 px-3 py-4 text-sm font-medium group-data-[collapsible=icon]:hidden hover:bg-white/90"
+                            >
+                                <AppLogo />
+                            </PlatformLink>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+
+            <SidebarContent>
+                <NavMain items={allItems} />
+            </SidebarContent>
+
+            <SidebarFooter>
+                <div className="border-t border-sidebar-border px-3 py-3 group-data-[collapsible=icon]:hidden">
+                    <ul className="flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-sidebar-foreground/60">
+                        {[['Terms', '/terms'], ['Privacy', '/privacy'], ['Cookies', '/cookies']].map(([label, href]) => (
+                            <li key={label}>
+                                <a href={href} className="hover:text-sidebar-foreground" target="_blank" rel="noopener noreferrer">
+                                    {label}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                    <p className="mt-2 text-[11px] text-sidebar-foreground/40">
+                        © {new Date().getFullYear()} {appName}. All rights reserved.
+                    </p>
+                </div>
+
+                <div className="border-t border-sidebar-border px-3 py-3 group-data-[collapsible=icon]:hidden">
+                    <p className="text-[11px] leading-tight text-sidebar-foreground/60">{displayName}</p>
+                    {subBrand && (
+                        <p className="mt-0.5 text-[11px] text-sidebar-foreground/40">{subBrand}</p>
+                    )}
+                </div>
+
+                {user && (
+                    <NavUser user={user} settingsUrl={settingsUrl} logoutUrl={logoutUrl} />
+                )}
+            </SidebarFooter>
+        </Sidebar>
+    );
+}