feat: add frontend auth pages, app layout, and Supabase integration (Phase 1E)
- Auth pages: login (password + magic link), register (with firm name), callback - Supabase client setup: browser client, server client, middleware for session refresh - App layout: sidebar (Dashboard, Akten, Fristen, Termine, AI Analyse, Einstellungen), header with user info and tenant switcher - Shared: API client with auth headers, TypeScript types matching Go models, QueryClientProvider + Toaster providers - Dependencies: @supabase/supabase-js, @supabase/ssr, @tanstack/react-query, lucide-react, date-fns, sonner
This commit is contained in:
79
frontend/src/components/layout/TenantSwitcher.tsx
Normal file
79
frontend/src/components/layout/TenantSwitcher.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import { api } from "@/lib/api";
|
||||
import type { TenantWithRole } from "@/lib/types";
|
||||
import { ChevronsUpDown } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export function TenantSwitcher() {
|
||||
const [tenants, setTenants] = useState<TenantWithRole[]>([]);
|
||||
const [current, setCurrent] = useState<TenantWithRole | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.get<TenantWithRole[]>("/tenants").then((data) => {
|
||||
setTenants(data);
|
||||
const savedId = localStorage.getItem("kanzlai_tenant_id");
|
||||
const match = data.find((t) => t.id === savedId) || data[0];
|
||||
if (match) {
|
||||
setCurrent(match);
|
||||
localStorage.setItem("kanzlai_tenant_id", match.id);
|
||||
}
|
||||
}).catch(() => {
|
||||
// Not authenticated or no tenants
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
|
||||
function switchTenant(tenant: TenantWithRole) {
|
||||
setCurrent(tenant);
|
||||
localStorage.setItem("kanzlai_tenant_id", tenant.id);
|
||||
setOpen(false);
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
if (!current) return null;
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
|
||||
>
|
||||
<span className="max-w-[160px] truncate">{current.name}</span>
|
||||
<ChevronsUpDown className="h-3.5 w-3.5 text-neutral-400" />
|
||||
</button>
|
||||
|
||||
{open && tenants.length > 1 && (
|
||||
<div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
|
||||
{tenants.map((tenant) => (
|
||||
<button
|
||||
key={tenant.id}
|
||||
onClick={() => switchTenant(tenant)}
|
||||
className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
|
||||
tenant.id === current.id
|
||||
? "bg-neutral-50 font-medium text-neutral-900"
|
||||
: "text-neutral-600 hover:bg-neutral-50"
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{tenant.name}</span>
|
||||
<span className="ml-auto text-xs text-neutral-400">
|
||||
{tenant.role}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user