Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/app-shell.tsx

@@ -0,0 +1,160 @@
+import { Link, useLocation, useNavigate } from "@tanstack/react-router";
+import { useAuth } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+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">
+        <Link to="/" className="flex items-center gap-2">
+          <Scale className="h-5 w-5" />
+          <span className="font-serif text-lg">Counsel</span>
+        </Link>
+        <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
+          <LogOut className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <main className="flex-1 min-w-0 md:ml-0 mt-14 md:mt-0">
+        <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>;
+}

src/components/protected-layout.tsx

@@ -0,0 +1,29 @@
+import { useEffect, type ReactNode } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useAuth } from "@/lib/auth";
+import { AppShell } from "@/components/app-shell";
+import { Loader2 } from "lucide-react";
+
+export function ProtectedLayout({ children, adminOnly }: { children: ReactNode; adminOnly?: boolean }) {
+  const { loading, session, isAdmin } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (loading) return;
+    if (!session) {
+      navigate({ to: "/login" });
+    } else if (adminOnly && !isAdmin) {
+      navigate({ to: "/" });
+    }
+  }, [loading, session, isAdmin, adminOnly, navigate]);
+
+  if (loading || !session || (adminOnly && !isAdmin)) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return <AppShell>{children}</AppShell>;
+}

src/routes/__root.tsx

@@ -1,15 +1,16 @@
-import { Outlet, Link, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
-
+import { Outlet, createRootRoute, HeadContent, Scripts, Link } from "@tanstack/react-router";
+import { Toaster } from "@/components/ui/sonner";
+import { AuthProvider } from "@/lib/auth";
 import appCss from "../styles.css?url";
 
 function NotFoundComponent() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
       <div className="max-w-md text-center">
-        <h1 className="text-7xl font-bold text-foreground">404</h1>
+        <h1 className="text-7xl font-serif text-foreground">404</h1>
         <h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
         <p className="mt-2 text-sm text-muted-foreground">
-          The page you're looking for doesn't exist or has been moved.
+          The page you're looking for doesn't exist.
         </p>
         <div className="mt-6">
           <Link
@@ -29,21 +30,11 @@ export const Route = createRootRoute({
     meta: [
       { charSet: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
-      { title: "Lovable App" },
-      { name: "description", content: "Lovable Generated Project" },
-      { name: "author", content: "Lovable" },
-      { property: "og:title", content: "Lovable App" },
-      { property: "og:description", content: "Lovable Generated Project" },
-      { property: "og:type", content: "website" },
-      { name: "twitter:card", content: "summary" },
-      { name: "twitter:site", content: "@Lovable" },
-    ],
-    links: [
-      {
-        rel: "stylesheet",
-        href: appCss,
-      },
+      { title: "Counsel — Law Firm Management" },
+      { name: "description", content: "Secure case, client, document, time and billing management for law firms." },
+      { name: "robots", content: "noindex, nofollow" },
     ],
+    links: [{ rel: "stylesheet", href: appCss }],
   }),
   shellComponent: RootShell,
   component: RootComponent,
@@ -65,5 +56,10 @@ function RootShell({ children }: { children: React.ReactNode }) {
 }
 
 function RootComponent() {
-  return <Outlet />;
+  return (
+    <AuthProvider>
+      <Outlet />
+      <Toaster richColors position="top-right" />
+    </AuthProvider>
+  );
 }