@crmy/web 0.5.1

package/src/pages/UseCases.tsx

@@ -0,0 +1,396 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState, useMemo, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { TopBar } from '@/components/layout/TopBar';
+import { useUseCases } from '@/api/hooks';
+import { useAppStore } from '@/store/appStore';
+import { useAgentSettings } from '@/contexts/AgentSettingsContext';
+import { ListToolbar, type FilterConfig, type SortOption } from '@/components/crm/ListToolbar';
+import { DatePicker } from '@/components/ui/date-picker';
+import { motion } from 'framer-motion';
+import { Columns3, List, BarChart3, Plus, Sparkles, ChevronUp, ChevronDown } from 'lucide-react';
+import { PaginationBar } from '@/components/crm/PaginationBar';
+import { useCaseStageConfig } from '@/lib/stageConfig';
+
+type ViewMode = 'kanban' | 'table' | 'dashboard';
+const kanbanStages = ['discovery', 'poc', 'production', 'scaling', 'sunset'];
+
+type ProdDatePreset = 'all' | 'today' | 'this_week' | 'this_month' | 'this_quarter' | 'custom';
+
+const PROD_DATE_OPTIONS: { value: ProdDatePreset; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'today', label: 'Today' },
+  { value: 'this_week', label: 'This Week' },
+  { value: 'this_month', label: 'This Month' },
+  { value: 'this_quarter', label: 'This Quarter' },
+  { value: 'custom', label: 'Custom' },
+];
+
+function getProdDateRange(preset: ProdDatePreset): { start: Date; end: Date } | null {
+  if (preset === 'all') return null;
+  const now = new Date();
+  if (preset === 'today') {
+    const start = new Date(now); start.setHours(0, 0, 0, 0);
+    const end = new Date(now); end.setHours(23, 59, 59, 999);
+    return { start, end };
+  }
+  if (preset === 'this_week') {
+    const start = new Date(now);
+    const day = start.getDay();
+    start.setDate(start.getDate() + (day === 0 ? -6 : 1 - day));
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(start); end.setDate(start.getDate() + 6); end.setHours(23, 59, 59, 999);
+    return { start, end };
+  }
+  if (preset === 'this_month') {
+    const start = new Date(now.getFullYear(), now.getMonth(), 1);
+    const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
+    return { start, end };
+  }
+  if (preset === 'this_quarter') {
+    const q = Math.floor(now.getMonth() / 3);
+    const start = new Date(now.getFullYear(), q * 3, 1);
+    const end = new Date(now.getFullYear(), q * 3 + 3, 0, 23, 59, 59, 999);
+    return { start, end };
+  }
+  return null;
+}
+
+const filterConfigs: FilterConfig[] = [
+  { key: 'stage', label: 'Stage', options: kanbanStages.map(k => ({ value: k, label: useCaseStageConfig[k]?.label ?? k })) },
+];
+const sortOptions: SortOption[] = [
+  { key: 'name', label: 'Name' }, { key: 'stage', label: 'Stage' },
+  { key: 'attributed_arr', label: 'ARR' }, { key: 'health_score', label: 'Health' },
+  { key: 'target_prod_date', label: 'Prod Date' }, { key: 'created_at', label: 'Created' },
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type UseCase = any;
+
+export default function UseCases() {
+  const { openDrawer, openQuickAdd, openAIWithContext } = useAppStore();
+  const { enabled: agentEnabled } = useAgentSettings();
+  const navigate = useNavigate();
+  const [view, setView] = useState<ViewMode>('table');
+  const [search, setSearch] = useState('');
+  const [activeFilters, setActiveFilters] = useState<Record<string, string[]>>({});
+  const [sort, setSort] = useState<{ key: string; dir: 'asc' | 'desc' } | null>(null);
+  const [prodDate, setProdDate] = useState<ProdDatePreset>('all');
+  const [customFrom, setCustomFrom] = useState('');
+  const [customTo, setCustomTo] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { data, isLoading } = useUseCases({ q: search || undefined, limit: 200 }) as any;
+  const allUseCases: UseCase[] = data?.data ?? [];
+
+  const handleFilterChange = (key: string, values: string[]) => {
+    setActiveFilters(prev => { const next = { ...prev }; if (values.length === 0) delete next[key]; else next[key] = values; return next; });
+  };
+  const handleSortChange = (key: string) => {
+    setSort(prev => prev?.key === key ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'asc' });
+  };
+
+  const filtered = useMemo(() => {
+    let result = [...allUseCases];
+    if (activeFilters.stage?.length) result = result.filter(u => activeFilters.stage.includes(u.stage as string));
+
+    // Production date filtering
+    if (prodDate !== 'all') {
+      let start: Date, end: Date;
+      if (prodDate === 'custom') {
+        start = customFrom ? new Date(customFrom + 'T00:00:00') : new Date(0);
+        end = customTo ? new Date(customTo + 'T23:59:59') : new Date(8640000000000000);
+      } else {
+        const range = getProdDateRange(prodDate);
+        if (range) { start = range.start; end = range.end; }
+        else { start = new Date(0); end = new Date(8640000000000000); }
+      }
+      result = result.filter(d => {
+        if (!d.target_prod_date) return true; // unscheduled use cases always visible
+        const pd = new Date(d.target_prod_date);
+        return pd >= start && pd <= end;
+      });
+    }
+
+    if (sort) {
+      result.sort((a, b) => {
+        const aVal = (a[sort.key] ?? '') as string | number;
+        const bVal = (b[sort.key] ?? '') as string | number;
+        if (typeof aVal === 'number' && typeof bVal === 'number') return sort.dir === 'asc' ? aVal - bVal : bVal - aVal;
+        return sort.dir === 'asc' ? String(aVal).localeCompare(String(bVal)) : String(bVal).localeCompare(String(aVal));
+      });
+    }
+    return result;
+  }, [allUseCases, activeFilters, sort, prodDate, customFrom, customTo]);
+
+  useEffect(() => { setPage(1); }, [search, activeFilters, sort, prodDate, customFrom, customTo]);
+  const paginated = filtered.slice((page - 1) * pageSize, page * pageSize);
+
+  const SortHeader = ({ label, sortKey }: { label: string; sortKey: string }) => (
+    <th onClick={() => handleSortChange(sortKey)} className="text-left px-4 py-3 text-xs font-display font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors select-none">
+      <span className="inline-flex items-center gap-1">
+        {label}
+        {sort?.key === sortKey && (sort.dir === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
+      </span>
+    </th>
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <TopBar title="Use Cases">
+        <div className="hidden md:flex items-center gap-1 bg-muted rounded-xl p-0.5">
+          {[
+            { mode: 'kanban', icon: Columns3 },
+            { mode: 'table', icon: List },
+            { mode: 'dashboard', icon: BarChart3 },
+          ].map(({ mode, icon: Icon }) => (
+            <button key={mode} onClick={() => setView(mode as ViewMode)}
+              className={`p-1.5 rounded-lg text-sm transition-all ${view === mode ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground'}`}>
+              <Icon className="w-4 h-4" />
+            </button>
+          ))}
+        </div>
+      </TopBar>
+
+      {/* Production date selector */}
+      <div className="px-4 md:px-6 pt-3 pb-1 flex flex-wrap items-center gap-2">
+        <span className="text-xs text-muted-foreground font-semibold">Prod Date:</span>
+        <div className="inline-flex rounded-xl border border-border bg-muted/40 p-0.5 gap-0.5">
+          {PROD_DATE_OPTIONS.map(opt => (
+            <button key={opt.value} onClick={() => setProdDate(opt.value)}
+              className={['px-3 py-1.5 text-xs font-medium rounded-lg transition-all',
+                prodDate === opt.value ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+              ].join(' ')}>
+              {opt.label}
+            </button>
+          ))}
+        </div>
+        {prodDate === 'custom' && (
+          <div className="flex items-center gap-2">
+            <DatePicker
+              value={customFrom}
+              onChange={setCustomFrom}
+              size="sm"
+              placeholder="From"
+              className="w-36"
+            />
+            <span className="text-xs text-muted-foreground">to</span>
+            <DatePicker
+              value={customTo}
+              onChange={setCustomTo}
+              size="sm"
+              placeholder="To"
+              className="w-36"
+            />
+          </div>
+        )}
+      </div>
+
+      <ListToolbar searchValue={search} onSearchChange={setSearch} searchPlaceholder="Search use cases..."
+        filters={filterConfigs} activeFilters={activeFilters} onFilterChange={handleFilterChange}
+        onClearFilters={() => { setActiveFilters({}); setProdDate('all'); }} sortOptions={sortOptions} currentSort={sort}
+        onSortChange={handleSortChange} onAdd={() => openQuickAdd('use-case')} addLabel="New Use Case" entityType="use cases" />
+
+      <div className="flex-1 overflow-y-auto pb-24 md:pb-6">
+        {isLoading ? (
+          <div className="flex gap-4 px-4 md:px-6 pt-2">
+            {[...Array(4)].map((_, i) => <div key={i} className="flex-shrink-0 w-72 h-64 bg-muted/50 rounded-2xl animate-pulse" />)}
+          </div>
+        ) : view === 'kanban' ? (
+          <>
+            <div className="border-t border-border mb-4" />
+            <div className="flex gap-3 md:gap-4 px-4 md:px-6 pb-4 overflow-x-auto min-h-full snap-x snap-mandatory md:snap-none no-scrollbar">
+              {kanbanStages.map((stage) => {
+                const config = useCaseStageConfig[stage] ?? { label: stage, color: '#94a3b8' };
+                const stageUCs = filtered.filter((u) => u.stage === stage);
+                const totalArr = stageUCs.reduce((sum, u) => sum + ((u.attributed_arr as number) || 0), 0);
+                return (
+                  <div key={stage} className="flex-shrink-0 w-[280px] md:w-72 flex flex-col snap-center">
+                    <div className="flex items-center justify-between mb-3 px-1">
+                      <div className="flex items-center gap-2">
+                        <span className="px-2.5 py-1 rounded-lg text-xs font-semibold" style={{ backgroundColor: config.color + '20', color: config.color }}>
+                          {config.label}
+                        </span>
+                        <span className="text-xs text-muted-foreground font-mono">{stageUCs.length}</span>
+                      </div>
+                      {totalArr > 0 && <span className="text-xs text-muted-foreground font-mono">${(totalArr / 1000).toFixed(0)}K ARR</span>}
+                    </div>
+                    <div className="flex-1 space-y-2">
+                      {stageUCs.map((uc, i) => {
+                        const client = (uc.account_name ?? uc.client ?? '') as string;
+                        const arr = (uc.attributed_arr as number) ?? 0;
+                        const health = (uc.health_score as number) ?? 0;
+                        return (
+                          <motion.div key={uc.id as string} initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.03 }}
+                            onClick={() => openDrawer('use-case', uc.id as string)}
+                            className="bg-card border border-border rounded-2xl p-3.5 cursor-pointer hover:border-primary/30 hover:shadow-md transition-all press-scale group">
+                            <div className="flex items-start justify-between">
+                              <p className="text-sm font-display font-bold text-foreground">{uc.name as string}</p>
+                              {agentEnabled && (
+                                <button onClick={(e) => { e.stopPropagation(); openAIWithContext({ type: 'use-case', id: uc.id as string, name: uc.name as string, detail: client }); navigate('/agent'); }}
+                                  className="p-0.5 rounded-lg md:opacity-0 md:group-hover:opacity-100 hover:bg-accent/10 transition-all">
+                                  <Sparkles className="w-3.5 h-3.5 text-accent" />
+                                </button>
+                              )}
+                            </div>
+                            {client && <p className="text-xs text-muted-foreground mt-1">{client}</p>}
+                            <div className="flex items-center justify-between mt-2.5">
+                              {arr > 0 ? (
+                                <span className="text-sm font-display font-extrabold text-foreground">
+                                  ${arr >= 1000 ? `${(arr / 1000).toFixed(0)}K` : arr}
+                                </span>
+                              ) : <span />}
+                              {health > 0 && (
+                                <span className={`px-2 py-0.5 rounded-lg text-xs font-semibold ${health >= 80 ? 'bg-green-500/15 text-green-400' : health >= 50 ? 'bg-yellow-500/15 text-yellow-400' : 'bg-red-500/15 text-red-400'}`}>
+                                  {health}
+                                </span>
+                              )}
+                            </div>
+                          </motion.div>
+                        );
+                      })}
+                      <button onClick={() => openQuickAdd('use-case')}
+                        className="w-full flex items-center justify-center gap-1 py-2.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-xl transition-colors press-scale">
+                        <Plus className="w-3.5 h-3.5" /> Add Use Case
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        ) : view === 'table' ? (
+          <div className="px-4 md:px-6">
+            {filtered.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+                <p className="text-sm">No use cases found.</p>
+                <button onClick={() => { setSearch(''); setActiveFilters({}); setProdDate('all'); }} className="mt-2 text-xs text-primary font-semibold hover:underline">Clear all filters</button>
+              </div>
+            ) : (
+              <div className="bg-card border border-border rounded-2xl overflow-hidden shadow-sm">
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="border-b border-border bg-surface-sunken/50">
+                        <SortHeader label="Use Case" sortKey="name" />
+                        <th className="text-left px-4 py-3 text-xs font-display font-semibold text-muted-foreground">Client</th>
+                        <SortHeader label="Stage" sortKey="stage" />
+                        <SortHeader label="ARR" sortKey="attributed_arr" />
+                        <SortHeader label="Health" sortKey="health_score" />
+                        <SortHeader label="Prod Date" sortKey="target_prod_date" />
+                        <SortHeader label="Created" sortKey="created_at" />
+                        {agentEnabled && <th className="px-2 py-3 w-8"></th>}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {paginated.map((uc, i) => {
+                        const stage = (uc.stage ?? '') as string;
+                        const config = useCaseStageConfig[stage] ?? { label: stage, color: '#94a3b8' };
+                        const arr = (uc.attributed_arr ?? 0) as number;
+                        const health = (uc.health_score ?? 0) as number;
+                        const client = (uc.account_name ?? uc.client ?? '') as string;
+                        return (
+                          <tr key={uc.id as string} onClick={() => openDrawer('use-case', uc.id as string)}
+                            className={`border-b border-border last:border-0 hover:bg-primary/5 cursor-pointer transition-colors group ${i % 2 === 1 ? 'bg-surface-sunken/30' : ''}`}>
+                            <td className="px-4 py-3 font-display font-bold text-foreground">{uc.name as string}</td>
+                            <td className="px-4 py-3 text-muted-foreground">{client || '—'}</td>
+                            <td className="px-4 py-3">
+                              <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold"
+                                style={{ backgroundColor: config.color + '18', color: config.color }}>
+                                {config.label}
+                              </span>
+                            </td>
+                            <td className="px-4 py-3 font-display font-bold text-foreground">{arr > 0 ? `$${(arr / 1000).toFixed(0)}K` : '—'}</td>
+                            <td className="px-4 py-3">
+                              {health > 0 ? (
+                                <span className={`px-2 py-0.5 rounded-lg text-xs font-semibold ${health >= 80 ? 'bg-green-500/15 text-green-400' : health >= 50 ? 'bg-yellow-500/15 text-yellow-400' : 'bg-red-500/15 text-red-400'}`}>
+                                  {health}
+                                </span>
+                              ) : '—'}
+                            </td>
+                            <td className="px-4 py-3 text-muted-foreground text-xs">
+                              {uc.target_prod_date ? new Date(uc.target_prod_date as string).toLocaleDateString() : '—'}
+                            </td>
+                            <td className="px-4 py-3 text-muted-foreground text-xs">
+                              {uc.created_at ? new Date(uc.created_at as string).toLocaleDateString() : '—'}
+                            </td>
+                            {agentEnabled && (
+                              <td className="px-2 py-3">
+                                <button onClick={(e) => { e.stopPropagation(); openAIWithContext({ type: 'use-case', id: uc.id as string, name: uc.name as string, detail: client }); navigate('/agent'); }}
+                                  className="p-1.5 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-accent/10 transition-all">
+                                  <Sparkles className="w-3.5 h-3.5 text-accent" />
+                                </button>
+                              </td>
+                            )}
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+                <div className="px-4">
+                  <PaginationBar page={page} pageSize={pageSize} total={filtered.length} onPageChange={setPage} onPageSizeChange={setPageSize} />
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="px-4 md:px-6">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
+              {[
+                { label: 'Total ARR', value: filtered.filter(u => u.stage !== 'sunset').reduce((s, u) => s + ((u.attributed_arr as number) || 0), 0), isCount: false },
+                { label: 'Production ARR', value: filtered.filter(u => u.stage === 'production' || u.stage === 'scaling').reduce((s, u) => s + ((u.attributed_arr as number) || 0), 0), isCount: false },
+                { label: 'Active Use Cases', value: filtered.filter(u => u.stage !== 'sunset').length, isCount: true },
+              ].map((card) => (
+                <div key={card.label} className="bg-card border border-border rounded-2xl p-5 shadow-sm">
+                  <p className="text-xs text-muted-foreground font-display font-semibold">{card.label}</p>
+                  <p className="text-2xl font-display font-extrabold text-foreground mt-1">
+                    {card.isCount ? card.value : (
+                      (card.value as number) >= 1_000_000
+                        ? `$${((card.value as number) / 1_000_000).toFixed(2)}M`
+                        : `$${((card.value as number) / 1000).toFixed(0)}K`
+                    )}
+                  </p>
+                </div>
+              ))}
+            </div>
+            <div className="bg-card border border-border rounded-2xl p-5 shadow-sm">
+              <h3 className="font-display font-bold text-foreground mb-4">ARR by stage</h3>
+              <div className="space-y-4">
+                {kanbanStages.map((stage) => {
+                  const config = useCaseStageConfig[stage] ?? { label: stage, color: '#94a3b8' };
+                  const total = filtered.filter(u => u.stage === stage).reduce((s, u) => s + ((u.attributed_arr as number) || 0), 0);
+                  const count = filtered.filter(u => u.stage === stage).length;
+                  const max = Math.max(...kanbanStages.map(s => filtered.filter(u => u.stage === s).reduce((sum, u) => sum + ((u.attributed_arr as number) || 0), 0)), 1);
+                  return (
+                    <div key={stage} className="flex items-center gap-3">
+                      <span className="text-xs w-24 truncate font-semibold" style={{ color: config.color }}>{config.label}</span>
+                      <div className="flex-1 h-8 bg-muted rounded-xl overflow-hidden">
+                        <motion.div initial={{ width: 0 }} animate={{ width: total > 0 ? `${(total / max) * 100}%` : '0%' }}
+                          transition={{ duration: 0.8, ease: 'easeOut' }}
+                          className="h-full rounded-xl flex items-center px-3"
+                          style={{ backgroundColor: config.color + '30' }}>
+                          {total > 0 && (
+                            <span className="text-xs font-display font-bold" style={{ color: config.color }}>
+                              ${(total / 1000).toFixed(0)}K
+                            </span>
+                          )}
+                        </motion.div>
+                      </div>
+                      <span className="text-xs text-muted-foreground font-mono w-6 text-right">{count}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/pages/auth/Login.tsx

@@ -0,0 +1,261 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import { useNavigate, Navigate } from 'react-router-dom';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../../components/ui/card';
+import { auth, setToken, setUser } from '../../api/client';
+import crMyLogo from '../../assets/crmy-logo.png';
+import { X, Check, Sun, Moon } from 'lucide-react';
+import { useAppStore } from '../../store/appStore';
+
+const PASSWORD_RULES = [
+  { label: 'At least 8 characters', test: (p: string) => p.length >= 8 },
+  { label: 'One uppercase letter', test: (p: string) => /[A-Z]/.test(p) },
+  { label: 'One number', test: (p: string) => /\d/.test(p) },
+  { label: 'One special character', test: (p: string) => /[^A-Za-z0-9]/.test(p) },
+];
+
+function isValidEmail(email: string) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+function isValidPassword(password: string) {
+  return PASSWORD_RULES.every((r) => r.test(password));
+}
+
+// Light-mode inline overrides: card always appears as a dark panel to contrast against the light page background
+const CHARCOAL_LIGHT_STYLE: React.CSSProperties = {
+  '--background': '220 10% 32%',
+  '--card': '220 14% 18%',
+  '--card-foreground': '36 15% 92%',
+  '--popover': '220 14% 22%',
+  '--popover-foreground': '36 15% 92%',
+  '--muted': '220 10% 24%',
+  '--muted-foreground': '220 8% 62%',
+  '--input': '220 10% 32%',
+  '--border': '220 10% 28%',
+  '--foreground': '36 15% 92%',
+} as React.CSSProperties;
+
+const WARM_LIGHT_STYLE: React.CSSProperties = {
+  '--background': '15 25% 32%',
+  '--card': '15 22% 18%',
+  '--card-foreground': '25 100% 95%',
+  '--popover': '15 22% 22%',
+  '--popover-foreground': '25 100% 95%',
+  '--muted': '15 20% 24%',
+  '--muted-foreground': '20 15% 62%',
+  '--input': '15 20% 32%',
+  '--border': '15 20% 28%',
+  '--foreground': '25 100% 95%',
+} as React.CSSProperties;
+
+export function LoginPage() {
+  const navigate = useNavigate();
+  const { darkVariant } = useAppStore();
+  const isCharcoal = darkVariant === 'charcoal';
+
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [tenantName, setTenantName] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [isDark, setIsDark] = useState(() => document.documentElement.classList.contains('dark'));
+
+  const toggleTheme = () => {
+    const next = !isDark;
+    setIsDark(next);
+    document.documentElement.classList.toggle('dark', next);
+    localStorage.setItem('crmy_theme', next ? 'dark' : 'light');
+  };
+
+  if (localStorage.getItem('crmy_token')) {
+    return <Navigate to="/" replace />;
+  }
+
+  const touch = (field: string) => setTouched((t) => ({ ...t, [field]: true }));
+
+  const emailError = touched.email && !isValidEmail(email) ? 'Enter a valid email address' : '';
+  const passwordError =
+    touched.password && mode === 'register' && !isValidPassword(password)
+      ? 'Password does not meet requirements'
+      : touched.password && !password
+        ? 'Password is required'
+        : '';
+  const nameError = touched.name && mode === 'register' && !name.trim() ? 'Name is required' : '';
+  const tenantError =
+    touched.tenantName && mode === 'register' && !tenantName.trim() ? 'Organization name is required' : '';
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setTouched({ email: true, password: true, name: true, tenantName: true });
+
+    if (!isValidEmail(email)) return;
+    if (!password) return;
+    if (mode === 'register') {
+      if (!isValidPassword(password) || !name.trim() || !tenantName.trim()) return;
+    }
+
+    setError('');
+    setLoading(true);
+    try {
+      const result =
+        mode === 'login'
+          ? await auth.login(email, password)
+          : await auth.register({ email, password, name, tenant_name: tenantName });
+      setToken(result.token);
+      setUser(result.user);
+      navigate('/');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Authentication failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const switchMode = (next: 'login' | 'register') => {
+    setMode(next);
+    setTouched({});
+    setError('');
+  };
+
+  // Page background: light mode uses a tinted background; dark mode uses CSS variable
+  const pageBg = isDark ? 'bg-background' : isCharcoal ? 'bg-[hsl(220_20%_93%)]' : 'bg-[hsl(30_25%_93%)]';
+
+  // Card wrapper: always rendered as a dark panel, variant-aware
+  const cardClass = isCharcoal ? 'dark charcoal' : 'dark';
+  // In light mode, override CSS vars so the card appears as a medium-dark panel against the light page
+  const cardStyle = !isDark ? (isCharcoal ? CHARCOAL_LIGHT_STYLE : WARM_LIGHT_STYLE) : undefined;
+
+  return (
+    <div className={`flex min-h-screen items-center justify-center p-4 ${pageBg}`}>
+      <button
+        onClick={toggleTheme}
+        className="fixed top-4 right-4 p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        aria-label="Toggle theme"
+      >
+        {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+      </button>
+      <div className={`${cardClass} w-full max-w-md`} style={cardStyle}>
+      <Card className="w-full">
+        <CardHeader className="text-left">
+          <div className="flex items-center gap-3 mb-1">
+            <img src={crMyLogo} alt="CRMy" className="h-14 w-14 object-contain" />
+            <CardTitle className="font-brand font-bold text-2xl flex-1">
+              {mode === 'login' ? (
+                <>Sign in to <span className="text-primary">CRMy</span></>
+              ) : (
+                <>Create your account</>
+              )}
+            </CardTitle>
+            {mode === 'register' && (
+              <button
+                onClick={() => switchMode('login')}
+                className="ml-auto p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                aria-label="Back to sign in"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            )}
+          </div>
+          {mode === 'register' && (
+            <CardDescription className="text-center">Set up a new tenant and admin account</CardDescription>
+          )}
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+            {mode === 'register' && (
+              <>
+                <div>
+                  <label className="mb-1 block text-sm font-medium">Your name <span className="text-destructive">*</span></label>
+                  <Input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    onBlur={() => touch('name')}
+                    aria-invalid={!!nameError}
+                  />
+                  {nameError && <p className="mt-1 text-xs text-destructive">{nameError}</p>}
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium">Organization name <span className="text-destructive">*</span></label>
+                  <Input
+                    value={tenantName}
+                    onChange={(e) => setTenantName(e.target.value)}
+                    onBlur={() => touch('tenantName')}
+                    aria-invalid={!!tenantError}
+                  />
+                  {tenantError && <p className="mt-1 text-xs text-destructive">{tenantError}</p>}
+                </div>
+              </>
+            )}
+            <div>
+              <label className="mb-1 block text-sm font-medium">Email <span className="text-destructive">*</span></label>
+              <Input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                onBlur={() => touch('email')}
+                aria-invalid={!!emailError}
+              />
+              {emailError && <p className="mt-1 text-xs text-destructive">{emailError}</p>}
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium">Password <span className="text-destructive">*</span></label>
+              <Input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onBlur={() => touch('password')}
+                aria-invalid={!!passwordError}
+              />
+              {passwordError && mode !== 'register' && (
+                <p className="mt-1 text-xs text-destructive">{passwordError}</p>
+              )}
+              {mode === 'register' && touched.password && (
+                <ul className="mt-2 space-y-1">
+                  {PASSWORD_RULES.map((rule) => {
+                    const passing = rule.test(password);
+                    return (
+                      <li key={rule.label} className={`flex items-center gap-1.5 text-xs ${passing ? 'text-success' : 'text-muted-foreground'}`}>
+                        <Check className={`w-3 h-3 ${passing ? 'opacity-100' : 'opacity-30'}`} />
+                        {rule.label}
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Please wait...' : mode === 'login' ? 'Sign in' : 'Create account'}
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm text-muted-foreground">
+            {mode === 'login' ? (
+              <>
+                Don't have an account?{' '}
+                <button className="text-primary hover:underline" onClick={() => switchMode('register')}>
+                  Register
+                </button>
+              </>
+            ) : (
+              <>
+                Already have an account?{' '}
+                <button className="text-primary hover:underline" onClick={() => switchMode('login')}>
+                  Sign in
+                </button>
+              </>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+      </div>
+    </div>
+  );
+}