feat: portal redesign — shadcn/ui, React Query, Zod, isolated portals

Foundation:
- CLAUDE.md with full coding rules (tech stack, patterns, redirect rules)
- Install @tanstack/react-query, zod, react-hook-form, shadcn/ui deps
- CSS variables design system (Tailwind v4 + tw-animate-css)
- Shared components: Button, Input, Label, Card, Badge, Separator, Form
- PortalLoginShell: two-column login layout (branding left, form right)
- PortalNav: shared sidebar nav used by all portals
- ReactQueryProvider in root layout
- api-client.ts: typed fetch wrapper (no raw fetch in components)

Portal isolation:
- Sidebar now returns null for all non-chapter routes; portals own their layout
- Admin layout: auth guard + PortalNav (slate accent)
- Org layout: auth guard + PortalNav (violet accent)
- Member layout: server-side cookie check → MemberNav client component
- Chapter admin sidebar: PortalNav (blue accent)

Login pages (all use react-hook-form + Zod + PortalLoginShell):
- /login → defaults next to /search (was /) — fixes redirect bug
- /admin/login → replaces /admin
- /org/login → replaces /org
- /member-login → two-step phone+OTP with proper form validation

Portal selector (/) redesigned with accent border-left cards

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/admin/login/page.tsx

@@ -1,60 +1,68 @@
 'use client';
 
-import { FormEvent, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { useSuperAdmin } from '../../_lib/super-admin-context';
+import { PortalLoginShell } from '../../_components/portal-login-shell';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../_components/ui/form';
+import { Input } from '../../_components/ui/input';
+import { Button } from '../../_components/ui/button';
+import Link from 'next/link';
+
+const schema = z.object({
+  email: z.string().email('Enter a valid email'),
+  password: z.string().min(1, 'Password is required'),
+});
+type FormValues = z.infer<typeof schema>;
 
 export default function SuperAdminLoginPage() {
   const { login } = useSuperAdmin();
   const router = useRouter();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [busy, setBusy] = useState(false);
 
-  async function handleSubmit(e: FormEvent) {
-    e.preventDefault();
-    setError('');
-    setBusy(true);
+  const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { email: '', password: '' } });
+
+  async function onSubmit(values: FormValues) {
     try {
-      await login(email, password);
+      await login(values.email, values.password);
       router.replace('/admin');
-    } catch (err: any) {
-      setError(err.message ?? 'Login failed');
-    } finally {
-      setBusy(false);
+    } catch (err) {
+      form.setError('root', { message: err instanceof Error ? err.message : 'Login failed' });
     }
   }
 
   return (
-    <div className="max-w-sm mx-auto mt-24">
-      <h1 className="text-xl font-bold mb-4">Super Admin Login</h1>
-      <form onSubmit={handleSubmit} className="flex flex-col gap-3">
-        <input
-          type="email"
-          placeholder="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-          className="border rounded px-3 py-2 text-sm"
-        />
-        <input
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-          className="border rounded px-3 py-2 text-sm"
-        />
-        {error && <p className="text-red-600 text-sm">{error}</p>}
-        <button
-          type="submit"
-          disabled={busy}
-          className="bg-blue-600 text-white rounded px-4 py-2 text-sm font-medium disabled:opacity-50"
-        >
-          {busy ? 'Signing in...' : 'Sign in'}
-        </button>
-      </form>
-    </div>
+    <PortalLoginShell
+      title="Super Admin"
+      subtitle="Platform-wide administration access."
+      accentClass="bg-slate-900"
+      footer={<Link href="/" className="hover:text-foreground transition-colors">← Back to portal selector</Link>}
+    >
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormField control={form.control} name="email" render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl><Input type="email" placeholder="superadmin@tower.com" autoComplete="username" {...field} /></FormControl>
+              <FormMessage />
+            </FormItem>
+          )} />
+          <FormField control={form.control} name="password" render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl><Input type="password" autoComplete="current-password" {...field} /></FormControl>
+              <FormMessage />
+            </FormItem>
+          )} />
+          {form.formState.errors.root && (
+            <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
+          )}
+          <Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
+            {form.formState.isSubmitting ? 'Signing in…' : 'Sign in'}
+          </Button>
+        </form>
+      </Form>
+    </PortalLoginShell>
   );
 }