mylegal-stage-law/src/components/app-shell.tsx

import { Link, useLocation, useNavigate } from "@tanstack/react-router";
import { useAuth } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { HeaderTimer } from "@/components/timer/header-timer";
import { QuickAddTime, QuickAddExpense } from "@/components/quick-add/quick-add";
import {
  Briefcase,
  Users,
  FileText,
  Receipt,
  ShieldCheck,
  LogOut,
  Scale,
  LayoutDashboard,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

interface NavItem {
  to: string;
  label: string;
  icon: typeof Briefcase;
  adminOnly?: boolean;
}

const NAV: NavItem[] = [
  { to: "/", label: "Dashboard", icon: LayoutDashboard },
  { to: "/clients", label: "Clients", icon: Users },
  { to: "/cases", label: "Cases", icon: Briefcase },
  { to: "/invoices", label: "Invoices", icon: Receipt },
  { to: "/admin/users", label: "Users", icon: ShieldCheck, adminOnly: true },
];

export function AppShell({ children }: { children: ReactNode }) {
  const { user, signOut, isAdmin, roles } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();

  const handleSignOut = async () => {
    await signOut();
    navigate({ to: "/login" });
  };

  return (
    <div className="flex min-h-screen bg-background">
      {/* Sidebar */}
      <aside className="hidden md:flex w-64 flex-col bg-sidebar text-sidebar-foreground border-r border-sidebar-border">
        <div className="px-6 py-5 border-b border-sidebar-border flex items-center gap-2.5">
          <div className="h-9 w-9 rounded-md bg-sidebar-primary flex items-center justify-center">
            <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
          </div>
          <div className="leading-tight">
            <div className="font-serif text-lg">Counsel</div>
            <div className="text-[10px] uppercase tracking-widest text-sidebar-foreground/60">
              Law Firm Suite
            </div>
          </div>
        </div>

        <nav className="flex-1 px-3 py-4 space-y-0.5">
          {NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
            const active =
              item.to === "/"
                ? location.pathname === "/"
                : location.pathname.startsWith(item.to);
            const Icon = item.icon;
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
                  active
                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
                    : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
                )}
              >
                <Icon className="h-4 w-4" />
                {item.label}
              </Link>
            );
          })}
        </nav>

        <div className="px-4 py-4 border-t border-sidebar-border">
          <div className="text-xs text-sidebar-foreground/70 truncate mb-0.5">{user?.email}</div>
          <div className="text-[10px] uppercase tracking-wider text-sidebar-foreground/50 mb-3">
            {roles.join(" · ") || "no role"}
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="w-full justify-start text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
            onClick={handleSignOut}
          >
            <LogOut className="h-4 w-4 mr-2" />
            Sign out
          </Button>
        </div>
      </aside>

      {/* Mobile top bar */}
      <div className="md:hidden fixed top-0 inset-x-0 h-14 bg-sidebar text-sidebar-foreground border-b border-sidebar-border flex items-center justify-between px-4 z-30 gap-2">
        <Link to="/" className="flex items-center gap-2 min-w-0">
          <Scale className="h-5 w-5 shrink-0" />
          <span className="font-serif text-lg truncate">Counsel</span>
        </Link>
        <div className="flex items-center gap-1.5">
          <QuickAddTime />
          <QuickAddExpense />
          <HeaderTimer />
          <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
            <LogOut className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <main className="flex-1 min-w-0 md:ml-0 mt-14 md:mt-0">
        {/* Desktop top bar with quick-add and timer */}
        <div className="hidden md:flex h-14 items-center justify-end gap-2 px-6 border-b bg-card">
          <QuickAddTime />
          <QuickAddExpense />
          <HeaderTimer />
        </div>
        <div className="md:hidden flex overflow-x-auto gap-1 px-3 py-2 border-b bg-card">
          {NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
            const active =
              item.to === "/"
                ? location.pathname === "/"
                : location.pathname.startsWith(item.to);
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap",
                  active ? "bg-primary text-primary-foreground" : "text-muted-foreground",
                )}
              >
                {item.label}
              </Link>
            );
          })}
        </div>
        {children}
      </main>
    </div>
  );
}

export function PageHeader({
  title,
  description,
  actions,
}: {
  title: string;
  description?: string;
  actions?: ReactNode;
}) {
  return (
    <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 mb-6">
      <div>
        <h1 className="font-serif text-3xl text-foreground">{title}</h1>
        {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
      </div>
      {actions && <div className="flex gap-2">{actions}</div>}
    </div>
  );
}

export function PageContainer({ children }: { children: ReactNode }) {
  return <div className="p-6 md:p-8 max-w-[1400px] mx-auto">{children}</div>;
}