Changes

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

src/routeTree.gen.ts

@@ -9,8 +9,20 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as SetupRouteImport } from './routes/setup'
+import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 
+const SetupRoute = SetupRouteImport.update({
+  id: '/setup',
+  path: '/setup',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -19,28 +31,50 @@ const IndexRoute = IndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+  '/setup': typeof SetupRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+  '/setup': typeof SetupRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/login': typeof LoginRoute
+  '/setup': typeof SetupRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/login' | '/setup'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/login' | '/setup'
+  id: '__root__' | '/' | '/login' | '/setup'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  LoginRoute: typeof LoginRoute
+  SetupRoute: typeof SetupRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/setup': {
+      id: '/setup'
+      path: '/setup'
+      fullPath: '/setup'
+      preLoaderRoute: typeof SetupRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -53,7 +87,18 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  LoginRoute: LoginRoute,
+  SetupRoute: SetupRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

src/routes/login.tsx

@@ -0,0 +1,122 @@
+import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { useAuth } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Scale, Loader2, ShieldCheck } from "lucide-react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/login")({
+  component: LoginPage,
+});
+
+function LoginPage() {
+  const { signIn, session, loading } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!loading && session) navigate({ to: "/" });
+  }, [loading, session, navigate]);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    const { error } = await signIn(email.trim(), password);
+    setSubmitting(false);
+    if (error) {
+      toast.error("Sign-in failed", { description: error });
+    } else {
+      navigate({ to: "/" });
+    }
+  };
+
+  return (
+    <div className="min-h-screen grid lg:grid-cols-2 bg-background">
+      {/* Brand panel */}
+      <div className="hidden lg:flex flex-col justify-between p-12 bg-sidebar text-sidebar-foreground">
+        <div className="flex items-center gap-3">
+          <div className="h-10 w-10 rounded-md bg-sidebar-primary flex items-center justify-center">
+            <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
+          </div>
+          <div>
+            <div className="font-serif text-xl">Counsel</div>
+            <div className="text-xs uppercase tracking-widest text-sidebar-foreground/60">
+              Law Firm Suite
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-md">
+          <h2 className="font-serif text-4xl leading-tight mb-4">
+            Practice management, built for the discipline of law.
+          </h2>
+          <p className="text-sidebar-foreground/70 leading-relaxed">
+            Cases, clients, documents, time, and billing — secured behind authenticated access and
+            row-level data protection. Designed for HOA-focused firms and beyond.
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2 text-xs text-sidebar-foreground/60">
+          <ShieldCheck className="h-4 w-4" />
+          Encrypted in transit · Role-based access · Audit-ready
+        </div>
+      </div>
+
+      {/* Form */}
+      <div className="flex items-center justify-center p-6">
+        <Card className="w-full max-w-md border-border/60 shadow-sm">
+          <CardHeader className="space-y-2">
+            <div className="lg:hidden flex items-center gap-2 mb-2">
+              <Scale className="h-5 w-5 text-primary" />
+              <span className="font-serif text-lg">Counsel</span>
+            </div>
+            <CardTitle className="font-serif text-2xl">Sign in</CardTitle>
+            <CardDescription>Restricted access. Contact your administrator for credentials.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={onSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="attorney@firm.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <Button type="submit" className="w-full" disabled={submitting}>
+                {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Sign in
+              </Button>
+              <p className="text-xs text-muted-foreground text-center">
+                First time setting up the firm?{" "}
+                <Link to="/setup" className="text-primary underline-offset-4 hover:underline">
+                  Create the founding admin account
+                </Link>
+              </p>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/routes/setup.tsx

@@ -0,0 +1,143 @@
+import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Loader2, Scale } from "lucide-react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/setup")({
+  component: SetupPage,
+});
+
+function SetupPage() {
+  const navigate = useNavigate();
+  const { loading, session } = useAuth();
+  const [checking, setChecking] = useState(true);
+  const [allowed, setAllowed] = useState(false);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    // If anyone exists, block access to /setup
+    (async () => {
+      const { count } = await supabase
+        .from("user_roles")
+        .select("*", { count: "exact", head: true });
+      if ((count ?? 0) === 0) setAllowed(true);
+      setChecking(false);
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (!loading && session && !allowed) navigate({ to: "/" });
+  }, [loading, session, allowed, navigate]);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    const redirectUrl = `${window.location.origin}/`;
+    const { error } = await supabase.auth.signUp({
+      email: email.trim(),
+      password,
+      options: {
+        emailRedirectTo: redirectUrl,
+        data: { full_name: name.trim() },
+      },
+    });
+    setSubmitting(false);
+    if (error) {
+      toast.error("Could not create account", { description: error.message });
+      return;
+    }
+    toast.success("Founding admin account created");
+    navigate({ to: "/" });
+  };
+
+  if (checking) {
+    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>
+    );
+  }
+
+  if (!allowed) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background p-6">
+        <Card className="max-w-md">
+          <CardHeader>
+            <CardTitle className="font-serif">Setup unavailable</CardTitle>
+            <CardDescription>
+              Firm is already initialized. Use the standard sign-in page.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button asChild>
+              <Link to="/login">Go to sign in</Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-6">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <div className="flex items-center gap-2 mb-2">
+            <Scale className="h-5 w-5 text-primary" />
+            <span className="font-serif text-lg">Counsel</span>
+          </div>
+          <CardTitle className="font-serif text-2xl">Create founding admin</CardTitle>
+          <CardDescription>
+            This is a one-time setup. The first account becomes the firm administrator and can invite
+            attorneys and staff afterward.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Full name</Label>
+              <Input id="name" required value={name} onChange={(e) => setName(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                required
+                minLength={10}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <p className="text-xs text-muted-foreground">
+                Minimum 10 characters. Avoid commonly leaked passwords.
+              </p>
+            </div>
+            <Button type="submit" className="w-full" disabled={submitting}>
+              {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Create admin account
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}