Wire frontend to the backend: auth, organizations, real patient API

Connects the UI-only app to the new backend over Better Auth + a small
patient API client, replacing the in-memory fixture and placeholder identity.

- Better Auth React client (lib/auth-client.ts) + shared access-control
  roles; API client (lib/api-client.ts) sending credentials cross-origin.
- Designed (auth) route group: login, signup, verify-email, forgot/reset
  password, clinic onboarding, and accept-invite.
- proxy.ts (this Next's renamed middleware) optimistic redirect + an
  authoritative client AppAuthGuard requiring a session and active clinic.
- Real identity in nav-user (useSession + sign out); the unused team
  switcher repurposed as an organization (clinic) switcher; Care-team
  settings tab manages members and invitations.
- lib/patients.ts now calls the org-scoped API (types unchanged); patients
  table and create/edit dialog updated for async create/update.
- next.config: standalone output + Dockerfile for containerized runs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/components/sidebar-02/app-sidebar.tsx

@@ -16,6 +16,7 @@ import type { Route } from "./nav-main";
 import DashboardNavigation from "@/components/sidebar-02/nav-main";
 import { NotificationsPopover } from "@/components/sidebar-02/nav-notifications";
 import { NavUser } from "@/components/sidebar-02/nav-user";
+import { OrgSwitcher } from "@/components/sidebar-02/team-switcher";
 
 const sampleNotifications = [
   {
@@ -107,6 +108,7 @@ export function DashboardSidebar() {
         </motion.div>
       </SidebarHeader>
       <SidebarContent className="gap-4 px-2 py-4">
+        <OrgSwitcher />
         <DashboardNavigation routes={dashboardRoutes} />
       </SidebarContent>
       <SidebarFooter className="px-2">

frontend/components/sidebar-02/nav-user.tsx

@@ -2,6 +2,7 @@
 
 import { ChevronsUpDown, LogOut, Settings as SettingsIcon, Sun } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
@@ -19,12 +20,21 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
+import { authClient } from "@/lib/auth-client";
 
-// Placeholder identity — there is no auth backend yet.
-const user = { name: "Dr. Khalid", role: "Clinician", initials: "K" };
 // Open-source repo (placeholder).
 const REPO_URL = "https://github.com/temetro/temetro";
 
+function initialsFromName(name: string): string {
+  const letters = name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .filter(Boolean)
+    .join("")
+    .slice(0, 2);
+  return (letters || "?").toUpperCase();
+}
+
 function GitHubIcon({ className }: { className?: string }) {
   return (
     <svg
@@ -41,6 +51,17 @@ function GitHubIcon({ className }: { className?: string }) {
 export function NavUser() {
   const { isMobile, state } = useSidebar();
   const isCollapsed = state === "collapsed";
+  const router = useRouter();
+  const { data } = authClient.useSession();
+
+  const name = data?.user?.name ?? "Clinician";
+  const email = data?.user?.email ?? "";
+  const initials = initialsFromName(name);
+
+  const signOut = async () => {
+    await authClient.signOut();
+    router.push("/login");
+  };
 
   return (
     <SidebarMenu>
@@ -51,19 +72,19 @@ export function NavUser() {
               <SidebarMenuButton
                 className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                 size="lg"
-                tooltip={user.name}
+                tooltip={name}
               />
             }
           >
             <Avatar className="size-8">
-              <AvatarFallback>{user.initials}</AvatarFallback>
+              <AvatarFallback>{initials}</AvatarFallback>
             </Avatar>
             {!isCollapsed && (
               <>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate font-medium">{name}</span>
                   <span className="truncate text-xs text-muted-foreground">
-                    {user.role}
+                    {email}
                   </span>
                 </div>
                 <ChevronsUpDown className="ml-auto size-4" />
@@ -78,12 +99,12 @@ export function NavUser() {
           >
             <DropdownMenuLabel className="flex items-center gap-2 py-2 text-foreground">
               <Avatar className="size-8">
-                <AvatarFallback>{user.initials}</AvatarFallback>
+                <AvatarFallback>{initials}</AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate font-medium">{name}</span>
                 <span className="truncate text-xs text-muted-foreground">
-                  {user.role}
+                  {email}
                 </span>
               </div>
             </DropdownMenuLabel>
@@ -104,7 +125,7 @@ export function NavUser() {
               <DropdownMenuShortcut>Dark</DropdownMenuShortcut>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuItem variant="destructive">
+            <DropdownMenuItem onClick={signOut} variant="destructive">
               <LogOut />
               Log out
             </DropdownMenuItem>

frontend/components/sidebar-02/team-switcher.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import { Building2, ChevronsUpDown, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -15,63 +17,84 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
-import { ChevronsUpDown, Plus } from "lucide-react";
-import * as React from "react";
+import { authClient } from "@/lib/auth-client";
 
-type Team = {
-  name: string;
-  logo: React.ElementType;
-  plan: string;
-};
+// Switches the active clinic (organization). Scopes every subsequent patient
+// API call. Replaces the old static "team switcher".
+export function OrgSwitcher() {
+  const { isMobile, state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const router = useRouter();
+  const { data: orgs } = authClient.useListOrganizations();
+  const { data: activeOrg } = authClient.useActiveOrganization();
 
-export function TeamSwitcher({ teams }: { teams: Team[] }) {
-  const { isMobile } = useSidebar();
-  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+  const setActive = async (organizationId: string) => {
+    if (organizationId === activeOrg?.id) return;
+    await authClient.organization.setActive({ organizationId });
+  };
 
-  if (!activeTeam) return null;
-
-  const Logo = activeTeam.logo;
+  const activeName = activeOrg?.name ?? "Select clinic";
 
   return (
     <SidebarMenu>
       <SidebarMenuItem>
         <DropdownMenu>
-          <DropdownMenuTrigger render={<SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" />}><div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-background text-foreground">
-                                  <Logo className="size-4" />
-                                </div><div className="grid flex-1 text-left text-sm leading-tight">
-                                  <span className="truncate font-semibold">
-                                    {activeTeam.name}
-                                  </span>
-                                  <span className="truncate text-xs">{activeTeam.plan}</span>
-                                </div><ChevronsUpDown className="ml-auto" /></DropdownMenuTrigger>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                size="lg"
+                tooltip={activeName}
+              />
+            }
+          >
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-background text-foreground">
+              <Building2 className="size-4" />
+            </div>
+            {!isCollapsed && (
+              <>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-semibold">{activeName}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    Clinic
+                  </span>
+                </div>
+                <ChevronsUpDown className="ml-auto size-4" />
+              </>
+            )}
+          </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg mb-4"
             align="start"
-            side={isMobile ? "bottom" : "right"}
+            className="min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : isCollapsed ? "right" : "bottom"}
             sideOffset={4}
           >
             <DropdownMenuLabel className="text-xs text-muted-foreground">
-              Teams
+              Clinics
             </DropdownMenuLabel>
-            {teams.map((team, index) => (
+            {(orgs ?? []).map((org) => (
               <DropdownMenuItem
-                key={team.name}
-                onClick={() => setActiveTeam(team)}
                 className="gap-2 p-2"
+                key={org.id}
+                onClick={() => setActive(org.id)}
               >
                 <div className="flex size-6 items-center justify-center rounded-sm border">
-                  <team.logo className="size-4 shrink-0" />
+                  <Building2 className="size-4 shrink-0" />
                 </div>
-                {team.name}
-                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                <span className="truncate">{org.name}</span>
               </DropdownMenuItem>
             ))}
             <DropdownMenuSeparator />
-            <DropdownMenuItem className="gap-2 p-2">
+            <DropdownMenuItem
+              className="gap-2 p-2"
+              onClick={() => router.push("/onboarding")}
+            >
               <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <Plus className="size-4" />
               </div>
-              <div className="font-medium text-muted-foreground">Add team</div>
+              <div className="font-medium text-muted-foreground">
+                Create clinic
+              </div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>