create-snapify-app 0.0.0-stage → 1.1.0

package/template/apps/client/src/App.tsx

@@ -0,0 +1,765 @@
+/**
+ * Snapify — Espace client (même design que le backoffice)
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link, Navigate, NavLink, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import {
+  AlertTriangle,
+  ArrowRight,
+  Bug,
+  CreditCard,
+  Eye,
+  EyeOff,
+  FileText,
+  Inbox,
+  LayoutDashboard,
+  LifeBuoy,
+  Lock,
+  LogOut,
+  Mail,
+  Menu as MenuIcon,
+  Receipt,
+  Settings2,
+  ShieldCheck,
+  UserRound,
+  X,
+} from 'lucide-react';
+import { SnapifyMark } from '../../../src/components/SnapifyLogo';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  cx,
+  EmptyState,
+  Field,
+  Input,
+  PageHeader,
+  PageSkeleton,
+  Section,
+  Select,
+  StatCard,
+  Table,
+  Td,
+  Textarea,
+  Th,
+} from '../../../src/admin/ui/primitives';
+import { useAuth } from '../../shared/AuthContext';
+import { clientApi } from './lib/api';
+
+const CGU_TN = 'https://snapify.tn/conditions-utilisation';
+const CGU_FR = 'https://snapify.fr/conditions-utilisation';
+
+const NAV = [
+  { to: '/', label: 'Tableau de bord', icon: LayoutDashboard },
+  { to: '/demandes', label: 'Mes demandes', icon: Inbox },
+  { to: '/tickets', label: 'Support', icon: LifeBuoy },
+  { to: '/bugs', label: 'Signaler un bug', icon: Bug },
+  { to: '/paiements', label: 'Paiements', icon: CreditCard },
+  { to: '/factures', label: 'Factures', icon: FileText },
+  { to: '/profil', label: 'Mon profil', icon: Settings2 },
+];
+
+function StatusBadge({ status }: { status: string }) {
+  const map: Record<string, ['success' | 'warning' | 'danger' | 'neutral' | 'info', string]> = {
+    paid: ['success', 'Payée'],
+    pending: ['warning', 'En attente'],
+    failed: ['danger', 'Échouée'],
+    open: ['warning', 'Ouvert'],
+    in_progress: ['info', 'En cours'],
+    waiting: ['neutral', 'En attente'],
+    resolved: ['success', 'Résolu'],
+    closed: ['neutral', 'Fermé'],
+    lead: ['info', 'Lead'],
+    active: ['success', 'Actif'],
+    draft: ['neutral', 'Brouillon'],
+    sent: ['info', 'Envoyée'],
+    void: ['danger', 'Annulée'],
+  };
+  const [tone, label] = map[status] || ['neutral', status];
+  return (
+    <Badge tone={tone} dot>
+      {label}
+    </Badge>
+  );
+}
+
+function useLoad<T>(fn: () => Promise<T>, deps: unknown[] = []) {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState('');
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    setError('');
+    fn()
+      .then((d) => {
+        if (!cancelled) setData(d);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Erreur');
+      });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, tick]);
+  return { data, error, reload: () => setTick((t) => t + 1) };
+}
+
+function AuthScreen() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPw, setShowPw] = useState(false);
+  const [err, setErr] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    setErr('');
+    try {
+      await login(email, password);
+    } catch (ex) {
+      setErr(ex instanceof Error ? ex.message : 'Erreur');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const perks = [
+    { icon: Inbox, t: 'Suivi de votre demande et de l’installation' },
+    { icon: Receipt, t: 'Paiements et factures téléchargeables' },
+    { icon: LifeBuoy, t: 'Support & signalement de bugs' },
+    { icon: ShieldCheck, t: 'Accès sécurisé après commande' },
+  ];
+
+  return (
+    <div className="cl-auth">
+      <aside className="cl-auth-brand" aria-hidden={false}>
+        <div className="cl-auth-orb cl-auth-orb-a" />
+        <div className="cl-auth-orb cl-auth-orb-b" />
+        <div className="cl-auth-grid" />
+        <div className="cl-auth-brand-inner">
+          <div className="cl-auth-logo">
+            <div className="cl-auth-logo-mark">
+              <SnapifyMark className="h-7 w-7" accent="#FFFFFF" />
+            </div>
+            <span className="cl-auth-logo-name">Snapify</span>
+          </div>
+          <div className="cl-auth-hero">
+            <span className="cl-auth-kicker">Espace client</span>
+            <h2 className="cl-auth-title">Votre projet, vos paiements et le support — au même endroit.</h2>
+            <p className="cl-auth-sub">Connectez-vous avec l’e-mail et le mot de passe reçus après votre commande Snapify.</p>
+            <ul className="cl-auth-perks">
+              {perks.map(({ icon: Icon, t }) => (
+                <li key={t} className="cl-auth-perk">
+                  <span className="cl-auth-perk-icon">
+                    <Icon className="h-4 w-4" />
+                  </span>
+                  {t}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <p className="cl-auth-foot">© {new Date().getFullYear()} NOVALABS WEB DESIGN — Snapify</p>
+        </div>
+      </aside>
+
+      <div className="cl-auth-panel">
+        <div className="cl-auth-card">
+          <div className="cl-auth-mobile-brand">
+            <div className="cl-auth-logo-mark">
+              <SnapifyMark className="h-7 w-7" accent="#FFFFFF" />
+            </div>
+            <div>
+              <div className="text-base font-semibold text-slate-900">Snapify</div>
+              <div className="text-xs text-slate-500">Espace client</div>
+            </div>
+          </div>
+
+          <header className="cl-auth-card-head">
+            <h1>Connexion</h1>
+            <p>Utilisez les identifiants envoyés par e-mail après votre commande.</p>
+          </header>
+
+          <form className="cl-auth-form" onSubmit={submit}>
+            <div className="cl-auth-field">
+              <label htmlFor="cl-email">E-mail</label>
+              <div className="cl-auth-input-wrap">
+                <Mail aria-hidden />
+                <input
+                  id="cl-email"
+                  className="cl-auth-input"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  autoComplete="email"
+                  placeholder="vous@entreprise.tn"
+                  autoFocus
+                />
+              </div>
+            </div>
+            <div className="cl-auth-field">
+              <label htmlFor="cl-password">Mot de passe</label>
+              <div className="cl-auth-input-wrap">
+                <Lock aria-hidden />
+                <input
+                  id="cl-password"
+                  className="cl-auth-input"
+                  type={showPw ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  autoComplete="current-password"
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  className="cl-auth-eye"
+                  onClick={() => setShowPw((v) => !v)}
+                  aria-label={showPw ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+                >
+                  {showPw ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+            {err ? <p className="cl-auth-error">{err}</p> : null}
+            <button type="submit" className="cl-auth-submit" disabled={busy}>
+              {busy ? 'Connexion…' : 'Se connecter'}
+              {!busy ? <ArrowRight className="h-4 w-4" /> : null}
+            </button>
+          </form>
+
+          <p className="cl-auth-hint">
+            Pas encore client ?{' '}
+            <a href="https://snapify.tn/commander">Commander un site</a>
+            . Les accès sont créés automatiquement après la commande.
+          </p>
+          <p className="cl-auth-legal">
+            En vous connectant vous acceptez les{' '}
+            <a href={CGU_TN} target="_blank" rel="noreferrer">
+              CGU Tunisie
+            </a>{' '}
+            /{' '}
+            <a href={CGU_FR} target="_blank" rel="noreferrer">
+              CGU France
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Shell({ children, onLogout, name }: { children: React.ReactNode; onLogout: () => void; name: string }) {
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+  useEffect(() => setOpen(false), [location.pathname]);
+  const current = NAV.find((n) => (n.to === '/' ? location.pathname === '/' : location.pathname.startsWith(n.to)));
+
+  const Sidebar = (
+    <div className="flex h-full flex-col bg-navy-950 text-slate-300">
+      <div className="flex h-16 shrink-0 items-center gap-3 px-5">
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600">
+          <SnapifyMark className="h-6 w-6" accent="#FFFFFF" />
+        </div>
+        <div className="min-w-0 leading-tight">
+          <p className="truncate text-sm font-semibold text-white">Snapify</p>
+          <p className="text-[11px] text-slate-500">Espace client</p>
+        </div>
+      </div>
+      <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4">
+        {NAV.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === '/'}
+            className={({ isActive }) =>
+              cx(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition',
+                isActive ? 'bg-white/10 font-medium text-white' : 'text-slate-400 hover:bg-white/5 hover:text-slate-100'
+              )
+            }
+          >
+            {({ isActive }) => (
+              <>
+                <item.icon className={cx('h-4 w-4 shrink-0', isActive ? 'text-brand-400' : 'text-slate-500')} />
+                {item.label}
+              </>
+            )}
+          </NavLink>
+        ))}
+      </nav>
+      <div className="border-t border-white/10 p-4">
+        <div className="mb-3 flex items-center gap-2 text-sm text-slate-300">
+          <UserRound className="h-4 w-4 text-slate-500" />
+          <span className="truncate">{name}</span>
+        </div>
+        <button type="button" onClick={onLogout} className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-400 hover:bg-white/5 hover:text-white">
+          <LogOut className="h-4 w-4" /> Déconnexion
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <aside className="fixed inset-y-0 left-0 z-30 hidden w-64 lg:block">{Sidebar}</aside>
+      {open ? (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div className="absolute inset-0 bg-slate-900/50" onClick={() => setOpen(false)} />
+          <div className="absolute inset-y-0 left-0 w-72 shadow-2xl">{Sidebar}</div>
+          <button type="button" className="absolute right-3 top-4 rounded-lg p-1.5 text-white" onClick={() => setOpen(false)} aria-label="Fermer">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+      ) : null}
+      <div className="lg:pl-64">
+        <header className="sticky top-0 z-20 flex h-16 items-center gap-3 border-b border-slate-200/80 bg-white/85 px-4 backdrop-blur sm:px-6">
+          <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setOpen(true)} aria-label="Menu">
+            <MenuIcon className="h-5 w-5" />
+          </Button>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-semibold text-slate-900">{current?.label || 'Espace client'}</p>
+          </div>
+          <a href="https://snapify.tn" className="hidden text-sm text-slate-500 hover:text-brand-700 sm:inline">
+            snapify.tn
+          </a>
+        </header>
+        <main className="mx-auto max-w-6xl px-4 py-6 sm:px-6">{children}</main>
+      </div>
+    </div>
+  );
+}
+
+function Overview() {
+  const { data, error, reload } = useLoad(() => clientApi<{ stats: Record<string, number>; recentRequests: { id: string; domain: string; status: string; amountLabel: string }[]; recentTickets: { id: string; subject: string; status: string }[]; profile: { market: string; name: string; domain: string } }>('/overview'));
+  if (!data && !error) return <PageSkeleton />;
+  return (
+    <div className="space-y-6">
+      <PageHeader title={`Bonjour${data?.profile?.name ? `, ${data.profile.name.split(' ')[0]}` : ''}`} description="Suivi de votre projet Snapify, paiements et support." />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard label="Demandes" value={String(data?.stats.requests ?? '—')} icon={Inbox} />
+        <StatCard label="Payées" value={String(data?.stats.paid ?? '—')} icon={CreditCard} />
+        <StatCard label="Tickets ouverts" value={String(data?.stats.openTickets ?? '—')} icon={LifeBuoy} />
+        <StatCard label="Factures" value={String(data?.stats.invoices ?? '—')} icon={FileText} />
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card padded>
+          <div className="mb-3 flex items-center justify-between">
+            <h2 className="text-[15px] font-semibold">Dernières demandes</h2>
+            <Link to="/demandes" className="text-sm text-brand-700">
+              Voir tout
+            </Link>
+          </div>
+          {!data?.recentRequests?.length ? (
+            <EmptyState icon={Inbox} title="Aucune demande" description="Commandez une licence sur snapify.tn/commander." />
+          ) : (
+            <ul className="space-y-2">
+              {data.recentRequests.map((o) => (
+                <li key={o.id} className="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2 text-sm">
+                  <span className="font-medium">{o.domain}</span>
+                  <span className="flex items-center gap-2">
+                    <span className="tabular-nums text-slate-500">{o.amountLabel}</span>
+                    <StatusBadge status={o.status} />
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+        <Card padded>
+          <div className="mb-3 flex items-center justify-between">
+            <h2 className="text-[15px] font-semibold">Tickets récents</h2>
+            <Button size="sm" onClick={reload}>
+              Actualiser
+            </Button>
+          </div>
+          {!data?.recentTickets?.length ? (
+            <EmptyState icon={LifeBuoy} title="Aucun ticket" description="Créez un ticket support si besoin." />
+          ) : (
+            <ul className="space-y-2">
+              {data.recentTickets.map((t) => (
+                <li key={t.id} className="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2 text-sm">
+                  <span className="truncate pr-2">{t.subject}</span>
+                  <StatusBadge status={t.status} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+      </div>
+      <Card padded className="border-brand-100 bg-brand-50/40">
+        <div className="flex gap-3">
+          <AlertTriangle className="h-5 w-5 shrink-0 text-brand-700" />
+          <div className="text-sm text-slate-700">
+            <p className="font-medium text-slate-900">Conditions d’utilisation</p>
+            <p className="mt-1">
+              Consultez les CGU applicables :{' '}
+              <a className="text-brand-700 underline" href={CGU_TN} target="_blank" rel="noreferrer">
+                Tunisie
+              </a>{' '}
+              ·{' '}
+              <a className="text-brand-700 underline" href={CGU_FR} target="_blank" rel="noreferrer">
+                France
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+function RequestsPage() {
+  const { data, error } = useLoad(() =>
+    clientApi<{ items: { id: string; domain: string; status: string; amountLabel: string; createdAt: string; details?: { siteType?: string; phone?: string } }[] }>('/requests')
+  );
+  if (!data && !error) return <PageSkeleton />;
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Mes demandes" description="Demandes de site / licences Snapify." />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      <Card padded={false}>
+        {!data?.items.length ? (
+          <div className="p-6">
+            <EmptyState icon={Inbox} title="Aucune demande" description="Commandez un site sur snapify.tn/commander." />
+          </div>
+        ) : (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Domaine</Th>
+                <Th>Type</Th>
+                <Th>Montant</Th>
+                <Th>Statut</Th>
+                <Th>Date</Th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((o) => (
+                <tr key={o.id}>
+                  <Td className="font-medium">{o.domain}</Td>
+                  <Td>{o.details?.siteType || '—'}</Td>
+                  <Td className="tabular-nums">{o.amountLabel}</Td>
+                  <Td>
+                    <StatusBadge status={o.status} />
+                  </Td>
+                  <Td className="text-slate-500">{new Date(o.createdAt).toLocaleDateString('fr-FR')}</Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function TicketsPage({ defaultKind = 'support' }: { defaultKind?: 'support' | 'bug' }) {
+  const { data, error, reload } = useLoad(() => clientApi<{ items: { id: string; kind: string; status: string; subject: string; body: string; createdAt: string }[] }>('/tickets'));
+  const [form, setForm] = useState({ subject: '', body: '', kind: defaultKind as string, priority: 'normal' });
+  const [msg, setMsg] = useState('');
+  const [busy, setBusy] = useState(false);
+  const items = useMemo(() => (data?.items || []).filter((t) => (defaultKind === 'bug' ? t.kind === 'bug' : t.kind !== 'bug')), [data, defaultKind]);
+
+  const create = async () => {
+    setBusy(true);
+    setMsg('');
+    try {
+      await clientApi('/tickets', { method: 'POST', body: JSON.stringify({ ...form, kind: defaultKind === 'bug' ? 'bug' : form.kind }) });
+      setForm({ subject: '', body: '', kind: defaultKind, priority: 'normal' });
+      setMsg(defaultKind === 'bug' ? 'Bug signalé. Merci !' : 'Ticket créé.');
+      reload();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : 'Erreur');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!data && !error) return <PageSkeleton />;
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={defaultKind === 'bug' ? 'Signaler un bug' : 'Support'}
+        description={defaultKind === 'bug' ? 'Décrivez un dysfonctionnement sur votre site ou l’espace client.' : 'Ouvrez un ticket — l’équipe Snapify vous répond.'}
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? <Alert tone={msg.toLowerCase().includes('erreur') ? 'danger' : 'success'}>{msg}</Alert> : null}
+      <Card padded>
+        <h2 className="mb-3 text-[15px] font-semibold">{defaultKind === 'bug' ? 'Nouveau signalement' : 'Nouveau ticket'}</h2>
+        <div className="grid gap-3">
+          {defaultKind !== 'bug' ? (
+            <Field label="Type">
+              <Select
+                value={form.kind}
+                onChange={(v) => setForm({ ...form, kind: v })}
+                options={[
+                  { value: 'support', label: 'Support' },
+                  { value: 'payment', label: 'Paiement' },
+                  { value: 'license', label: 'Licence / projet' },
+                ]}
+              />
+            </Field>
+          ) : null}
+          <Field label="Sujet">
+            <Input value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} placeholder={defaultKind === 'bug' ? 'Ex. Page panier blanche sur mobile' : 'Ex. Accès FTP pour installation'} />
+          </Field>
+          <Field label="Description">
+            <Textarea rows={5} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} placeholder="Contexte, URL, étapes pour reproduire…" />
+          </Field>
+          <Button variant="primary" disabled={busy || form.subject.length < 3} onClick={create}>
+            {busy ? 'Envoi…' : 'Envoyer'}
+          </Button>
+        </div>
+      </Card>
+      <Card padded={false}>
+        {!items.length ? (
+          <div className="p-6">
+            <EmptyState icon={LifeBuoy} title="Aucun élément" />
+          </div>
+        ) : (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Sujet</Th>
+                <Th>Type</Th>
+                <Th>Statut</Th>
+                <Th>Date</Th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((t) => (
+                <tr key={t.id}>
+                  <Td>
+                    <div className="font-medium">{t.subject}</div>
+                    {t.body ? <div className="mt-0.5 line-clamp-2 text-xs text-slate-500">{t.body}</div> : null}
+                  </Td>
+                  <Td>{t.kind}</Td>
+                  <Td>
+                    <StatusBadge status={t.status} />
+                  </Td>
+                  <Td className="text-slate-500">{new Date(t.createdAt).toLocaleDateString('fr-FR')}</Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function PaymentsPage() {
+  const { data, error } = useLoad(() =>
+    clientApi<{ items: { id: string; amountLabel: string; status: string; domain?: string; createdAt: string; paymentId?: string | null }[] }>('/payments')
+  );
+  if (!data && !error) return <PageSkeleton />;
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Paiements" description="Historique Flouci et licences." />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      <Card padded={false}>
+        {!data?.items.length ? (
+          <div className="p-6">
+            <EmptyState icon={CreditCard} title="Aucun paiement" />
+          </div>
+        ) : (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Projet</Th>
+                <Th>Montant</Th>
+                <Th>Statut</Th>
+                <Th>Date</Th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((p) => (
+                <tr key={p.id}>
+                  <Td className="font-medium">{p.domain || '—'}</Td>
+                  <Td className="tabular-nums">{p.amountLabel}</Td>
+                  <Td>
+                    <StatusBadge status={p.status} />
+                  </Td>
+                  <Td className="text-slate-500">{new Date(p.createdAt).toLocaleDateString('fr-FR')}</Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function InvoicesPage() {
+  const { data, error } = useLoad(() =>
+    clientApi<{ items: { id: string; number: string; amountLabel: string; status: string; createdAt: string; downloadUrl: string }[] }>('/invoices')
+  );
+  if (!data && !error) return <PageSkeleton />;
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Factures" description="Téléchargez vos factures Snapify." />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      <Card padded={false}>
+        {!data?.items.length ? (
+          <div className="p-6">
+            <EmptyState icon={FileText} title="Aucune facture" description="Les factures apparaissent après génération par l’équipe." />
+          </div>
+        ) : (
+          <Table>
+            <thead>
+              <tr>
+                <Th>N°</Th>
+                <Th>Montant</Th>
+                <Th>Statut</Th>
+                <Th>Date</Th>
+                <Th></Th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((inv) => (
+                <tr key={inv.id}>
+                  <Td className="font-medium">{inv.number}</Td>
+                  <Td className="tabular-nums">{inv.amountLabel}</Td>
+                  <Td>
+                    <StatusBadge status={inv.status} />
+                  </Td>
+                  <Td className="text-slate-500">{new Date(inv.createdAt).toLocaleDateString('fr-FR')}</Td>
+                  <Td>
+                    <a className="text-sm font-medium text-brand-700" href={inv.downloadUrl} target="_blank" rel="noreferrer">
+                      Télécharger
+                    </a>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function ProfilePage() {
+  const { user, refresh } = useAuth();
+  const { data, error, reload } = useLoad(() =>
+    clientApi<{ profile: { name: string; phone: string; company: string; domain: string; email: string; market: string; status: string }; user: { displayName: string } }>('/me')
+  );
+  const [form, setForm] = useState({ name: '', phone: '', company: '', domain: '', displayName: '' });
+  const [msg, setMsg] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (data) {
+      setForm({
+        name: data.profile.name || '',
+        phone: data.profile.phone || '',
+        company: data.profile.company || '',
+        domain: data.profile.domain || '',
+        displayName: data.user.displayName || user?.displayName || '',
+      });
+    }
+  }, [data, user]);
+
+  const save = async () => {
+    setBusy(true);
+    setMsg('');
+    try {
+      await clientApi('/profile', { method: 'PATCH', body: JSON.stringify(form) });
+      await refresh();
+      reload();
+      setMsg('Profil mis à jour.');
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : 'Erreur');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!data && !error) return <PageSkeleton />;
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Mon profil" description="Coordonnées et préférences du compte client." />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? <Alert tone={msg.includes('Erreur') ? 'danger' : 'success'}>{msg}</Alert> : null}
+      <Card padded>
+        <div className="grid gap-4 md:grid-cols-2">
+          <Field label="E-mail">
+            <Input value={data?.profile.email || ''} disabled />
+          </Field>
+          <Field label="Nom affiché">
+            <Input value={form.displayName} onChange={(e) => setForm({ ...form, displayName: e.target.value })} />
+          </Field>
+          <Field label="Nom complet">
+            <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+          </Field>
+          <Field label="Téléphone">
+            <Input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
+          </Field>
+          <Field label="Société">
+            <Input value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
+          </Field>
+          <Field label="Domaine principal">
+            <Input value={form.domain} onChange={(e) => setForm({ ...form, domain: e.target.value })} />
+          </Field>
+        </div>
+        <div className="mt-4 flex flex-wrap items-center gap-3">
+          <Button variant="primary" disabled={busy} onClick={save}>
+            Enregistrer
+          </Button>
+          <StatusBadge status={data?.profile.status || 'lead'} />
+          <span className="text-sm text-slate-500">Marché : {data?.profile.market === 'fr' ? 'France' : 'Tunisie'}</span>
+        </div>
+      </Card>
+      <Section title="Documents légaux">
+        <p className="text-sm text-slate-600">
+          <a className="text-brand-700 underline" href={CGU_TN} target="_blank" rel="noreferrer">
+            Conditions d’utilisation — Tunisie
+          </a>
+          <br />
+          <a className="text-brand-700 underline" href={CGU_FR} target="_blank" rel="noreferrer">
+            Conditions d’utilisation — France
+          </a>
+        </p>
+      </Section>
+    </div>
+  );
+}
+
+export function App() {
+  const { user, loading, logout } = useAuth();
+  const nav = useNavigate();
+
+  if (loading) return <PageSkeleton />;
+  if (!user) return <AuthScreen />;
+
+  return (
+    <Shell
+      name={user.displayName}
+      onLogout={async () => {
+        await logout();
+        nav('/');
+      }}
+    >
+      <Routes>
+        <Route index element={<Overview />} />
+        <Route path="demandes" element={<RequestsPage />} />
+        <Route path="tickets" element={<TicketsPage />} />
+        <Route path="bugs" element={<TicketsPage defaultKind="bug" />} />
+        <Route path="paiements" element={<PaymentsPage />} />
+        <Route path="factures" element={<InvoicesPage />} />
+        <Route path="profil" element={<ProfilePage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Shell>
+  );
+}