create-snapify-app 0.0.0-stage → 1.1.0

package/template/apps/superadmin/src/lib/api.ts

@@ -0,0 +1,20 @@
+/**
+ * Snapify Superadmin — client API
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+
+export async function sa<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`/api/superadmin${path}`, {
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) },
+    ...init,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error((data as { error?: string }).error || `HTTP ${res.status}`);
+  return data as T;
+}
+
+export const dt = (millimes: number) =>
+  `${(millimes / 1000).toLocaleString('fr-FR', { maximumFractionDigits: 3 })} DT`;
+
+export const when = (iso: string) => new Date(iso).toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' });

package/template/apps/superadmin/src/lib/hooks.ts

@@ -0,0 +1,20 @@
+/**
+ * Snapify Superadmin — hooks partagés
+ */
+import { useCallback, useEffect, useState } from 'react';
+
+export function useLoad<T>(load: () => Promise<T>, deps: unknown[] = []) {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState('');
+  const reload = useCallback(() => {
+    setError('');
+    load()
+      .then(setData)
+      .catch((e: Error) => setError(e.message));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+  useEffect(() => {
+    reload();
+  }, [reload]);
+  return { data, error, reload };
+}

package/template/apps/superadmin/src/main.tsx

@@ -0,0 +1,16 @@
+/**
+ * Snapify Superadmin
+ */
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { App } from './App';
+import '../../../src/admin/admin.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter basename="/hamdisup90">
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/template/apps/superadmin/src/pages/ClientsPage.tsx

@@ -0,0 +1,185 @@
+/**
+ * Snapify Superadmin — Fiches clients (demandes de site)
+ */
+import React, { useState } from 'react';
+import { RefreshCw, Users } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, Field, Input, PageHeader, PageSkeleton, Select, Table, Tabs, Td, Textarea, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type Client = {
+  id: string;
+  email: string;
+  name: string;
+  phone: string;
+  company: string;
+  domain: string;
+  market: string;
+  country: string;
+  status: string;
+  notes: string;
+  licenseOrderIds: string[];
+  createdAt: string;
+};
+
+const STATUS = [
+  { value: 'all', label: 'Tous' },
+  { value: 'lead', label: 'Leads' },
+  { value: 'active', label: 'Actifs' },
+  { value: 'paused', label: 'En pause' },
+  { value: 'done', label: 'Terminés' },
+  { value: 'cancelled', label: 'Annulés' },
+];
+
+export function ClientsPage() {
+  const [status, setStatus] = useState('all');
+  const [q, setQ] = useState('');
+  const { data, error, reload } = useLoad(() => sa<{ items: Client[] }>(`/clients?status=${status}&q=${encodeURIComponent(q)}`), [status, q]);
+  const [selected, setSelected] = useState<string | null>(null);
+  const detail = useLoad(
+    () => (selected ? sa<{ client: Client; orders: unknown[]; tickets: unknown[]; invoices: unknown[] }>(`/clients/${selected}`) : Promise.resolve(null)),
+    [selected]
+  );
+  const [notes, setNotes] = useState('');
+  const [clientStatus, setClientStatus] = useState('lead');
+  const [msg, setMsg] = useState('');
+  const [busy, setBusy] = useState(false);
+  const items = data?.items || [];
+
+  React.useEffect(() => {
+    if (detail.data?.client) {
+      setNotes(detail.data.client.notes || '');
+      setClientStatus(detail.data.client.status);
+    }
+  }, [detail.data]);
+
+  const save = async () => {
+    if (!selected) return;
+    setBusy(true);
+    setMsg('');
+    try {
+      await sa(`/clients/${selected}`, { method: 'PATCH', body: JSON.stringify({ notes, status: clientStatus }) });
+      setMsg('Fiche enregistrée.');
+      reload();
+      detail.reload();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : 'Erreur');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Clients"
+        description="Fiches créées automatiquement à chaque demande de site / licence."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? <Alert tone={msg.includes('Erreur') ? 'danger' : 'success'}>{msg}</Alert> : null}
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Tabs value={status} onChange={setStatus} tabs={STATUS.map((s) => ({ value: s.value, label: s.label }))} />
+        <Input className="max-w-xs" placeholder="Rechercher e-mail, nom, domaine…" value={q} onChange={(e) => setQ(e.target.value)} />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-5">
+        <Card padded={false} className="lg:col-span-3">
+          {!data ? (
+            <div className="p-5">
+              <PageSkeleton />
+            </div>
+          ) : !items.length ? (
+            <div className="p-6">
+              <EmptyState icon={Users} title="Aucun client" description="Les fiches apparaissent dès qu’un visiteur commande un site." />
+            </div>
+          ) : (
+            <Table>
+              <thead>
+                <tr>
+                  <Th>Client</Th>
+                  <Th>Domaine</Th>
+                  <Th>Marché</Th>
+                  <Th>Statut</Th>
+                  <Th>Demandes</Th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((c) => (
+                  <tr
+                    key={c.id}
+                    className={selected === c.id ? 'bg-brand-50/50' : 'cursor-pointer hover:bg-slate-50'}
+                    onClick={() => setSelected(c.id)}
+                  >
+                    <Td>
+                      <div className="font-medium">{c.name}</div>
+                      <div className="text-xs text-slate-500">{c.email}</div>
+                    </Td>
+                    <Td>{c.domain || '—'}</Td>
+                    <Td>
+                      <Badge tone={c.market === 'fr' ? 'info' : 'success'}>{c.market === 'fr' ? 'FR' : 'TN'}</Badge>
+                    </Td>
+                    <Td>
+                      <Badge>{c.status}</Badge>
+                    </Td>
+                    <Td className="tabular-nums">{c.licenseOrderIds?.length || 0}</Td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+          )}
+        </Card>
+
+        <Card padded className="lg:col-span-2">
+          {!selected ? (
+            <EmptyState icon={Users} title="Sélectionnez un client" description="Détail, notes internes et historique." />
+          ) : !detail.data ? (
+            <PageSkeleton />
+          ) : (
+            <div className="space-y-4">
+              <div>
+                <h2 className="text-[15px] font-semibold text-slate-900">{detail.data.client.name}</h2>
+                <p className="text-sm text-slate-500">{detail.data.client.email}</p>
+                <p className="mt-1 text-sm text-slate-600">
+                  {detail.data.client.phone || '—'} · {detail.data.client.company || 'Sans société'}
+                </p>
+                <p className="text-sm">
+                  Domaine : <strong>{detail.data.client.domain || '—'}</strong>
+                </p>
+                <p className="text-xs text-slate-400">Créé {when(detail.data.client.createdAt)}</p>
+              </div>
+              <Field label="Statut fiche">
+                <Select value={clientStatus} onChange={setClientStatus} options={STATUS.filter((s) => s.value !== 'all')} />
+              </Field>
+              <Field label="Notes internes">
+                <Textarea rows={5} value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Suivi commercial, accès, remarques…" />
+              </Field>
+              <Button variant="primary" disabled={busy} onClick={save}>
+                Enregistrer
+              </Button>
+              <div className="grid grid-cols-3 gap-2 border-t border-slate-100 pt-4 text-center text-sm">
+                <div>
+                  <div className="text-lg font-semibold">{(detail.data.orders as unknown[]).length}</div>
+                  <div className="text-xs text-slate-500">Demandes</div>
+                </div>
+                <div>
+                  <div className="text-lg font-semibold">{(detail.data.tickets as unknown[]).length}</div>
+                  <div className="text-xs text-slate-500">Tickets</div>
+                </div>
+                <div>
+                  <div className="text-lg font-semibold">{(detail.data.invoices as unknown[]).length}</div>
+                  <div className="text-xs text-slate-500">Factures</div>
+                </div>
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}

package/template/apps/superadmin/src/pages/InvoicesPage.tsx

@@ -0,0 +1,157 @@
+/**
+ * Snapify Superadmin — Factures
+ */
+import React, { useState } from 'react';
+import { FileText, RefreshCw, Send, Trash2 } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, PageHeader, PageSkeleton, Select, Table, Tabs, Td, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type Invoice = {
+  id: string;
+  number: string;
+  kind: string;
+  customerName: string;
+  customerEmail: string;
+  amountLabel: string;
+  status: string;
+  createdAt: string;
+  sentAt: string | null;
+  paidAt: string | null;
+};
+
+export function InvoicesPage() {
+  const [status, setStatus] = useState('all');
+  const { data, error, reload } = useLoad(() => sa<{ items: Invoice[] }>(`/invoices?status=${status}`), [status]);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [msg, setMsg] = useState('');
+  const items = data?.items || [];
+
+  return (
+    <div>
+      <PageHeader
+        title="Factures"
+        description="Factures licences et marketplace — envoi par e-mail."
+        actions={
+          <Button icon={RefreshCw} onClick={reload}>
+            Actualiser
+          </Button>
+        }
+      />
+      {error ? <Alert tone="danger">{error}</Alert> : null}
+      {msg ? (
+        <div className="mb-4">
+          <Alert tone={msg.toLowerCase().includes('erreur') || msg.toLowerCase().includes('manquant') ? 'danger' : 'success'}>{msg}</Alert>
+        </div>
+      ) : null}
+      <Tabs
+        value={status}
+        onChange={setStatus}
+        tabs={[
+          { value: 'all', label: 'Toutes', badge: <Badge>{items.length}</Badge> },
+          { value: 'draft', label: 'Brouillons' },
+          { value: 'sent', label: 'Envoyées' },
+          { value: 'paid', label: 'Payées' },
+          { value: 'void', label: 'Annulées' },
+        ]}
+      />
+      <Card padded={false}>
+        {!data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : items.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>N°</Th>
+                <Th>Client</Th>
+                <Th>Type</Th>
+                <Th>Montant</Th>
+                <Th>Statut</Th>
+                <Th className="hidden sm:table-cell">Date</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((inv) => (
+                <tr key={inv.id} className="hover:bg-slate-50/60">
+                  <Td className="font-mono text-xs font-medium">{inv.number}</Td>
+                  <Td>
+                    <p className="font-medium text-slate-900">{inv.customerName}</p>
+                    <p className="text-xs text-slate-500">{inv.customerEmail || '—'}</p>
+                  </Td>
+                  <Td>
+                    <Badge>{inv.kind}</Badge>
+                  </Td>
+                  <Td className="whitespace-nowrap font-medium">{inv.amountLabel}</Td>
+                  <Td>
+                    <Select
+                      value={inv.status}
+                      options={[
+                        { value: 'draft', label: 'Brouillon' },
+                        { value: 'sent', label: 'Envoyée' },
+                        { value: 'paid', label: 'Payée' },
+                        { value: 'void', label: 'Annulée' },
+                      ]}
+                      disabled={busy === inv.id}
+                      onChange={async (v) => {
+                        setBusy(inv.id);
+                        try {
+                          await sa(`/invoices/${inv.id}`, { method: 'PATCH', body: JSON.stringify({ status: v }) });
+                          reload();
+                        } finally {
+                          setBusy(null);
+                        }
+                      }}
+                    />
+                  </Td>
+                  <Td className="hidden text-slate-500 sm:table-cell">{when(inv.createdAt)}</Td>
+                  <Td className="text-right">
+                    <div className="flex justify-end gap-1.5">
+                      <Button
+                        size="sm"
+                        icon={Send}
+                        loading={busy === inv.id}
+                        onClick={async () => {
+                          setBusy(inv.id);
+                          setMsg('');
+                          try {
+                            const r = await sa<{ mailed: boolean; reason?: string }>(`/invoices/${inv.id}/send`, { method: 'POST', body: '{}' });
+                            setMsg(r.mailed ? `Facture ${inv.number} envoyée.` : `Non envoyée : ${r.reason || 'SMTP'}`);
+                            reload();
+                          } catch (e) {
+                            setMsg(e instanceof Error ? e.message : 'Erreur');
+                          } finally {
+                            setBusy(null);
+                          }
+                        }}
+                      >
+                        Envoyer
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="danger"
+                        icon={Trash2}
+                        disabled={busy === inv.id}
+                        onClick={async () => {
+                          if (!window.confirm(`Supprimer ${inv.number} ?`)) return;
+                          setBusy(inv.id);
+                          await sa(`/invoices/${inv.id}`, { method: 'DELETE' });
+                          reload();
+                          setBusy(null);
+                        }}
+                      />
+                    </div>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={FileText} title="Aucune facture" description="Générez une facture depuis une demande licence ou une commande marketplace." />
+        )}
+      </Card>
+    </div>
+  );
+}

package/template/apps/superadmin/src/pages/NewsletterPage.tsx

@@ -0,0 +1,212 @@
+/**
+ * Snapify Superadmin — Newsletter
+ */
+import React, { useState } from 'react';
+import { Mail, Plus, RefreshCw, Send, Trash2 } from 'lucide-react';
+import { Alert, Badge, Button, Card, EmptyState, Field, Input, PageHeader, PageSkeleton, Section, Table, Td, Textarea, Th } from '../../../../src/admin/ui/primitives';
+import { sa, when } from '../lib/api';
+import { useLoad } from '../lib/hooks';
+
+type Sub = { id: string; email: string; name: string; status: string; source: string; createdAt: string };
+type Campaign = { id: string; subject: string; status: string; recipientCount: number; sentAt: string | null; createdAt: string };
+
+export function NewsletterPage() {
+  const subs = useLoad(() => sa<{ items: Sub[] }>('/newsletter/subscribers'));
+  const camps = useLoad(() => sa<{ items: Campaign[] }>('/newsletter/campaigns'));
+  const [email, setEmail] = useState('');
+  const [name, setName] = useState('');
+  const [subject, setSubject] = useState('');
+  const [html, setHtml] = useState('<p>Bonjour,</p><p>Votre actualité Snapify…</p>');
+  const [busy, setBusy] = useState('');
+  const [msg, setMsg] = useState('');
+
+  const active = (subs.data?.items || []).filter((s) => s.status === 'active').length;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Newsletter"
+        description="Abonnés et campagnes e-mail (SMTP plateforme)."
+        actions={
+          <Button
+            icon={RefreshCw}
+            onClick={() => {
+              subs.reload();
+              camps.reload();
+            }}
+          >
+            Actualiser
+          </Button>
+        }
+      />
+      {msg ? <Alert tone={msg.toLowerCase().includes('erreur') || msg.toLowerCase().includes('aucun') ? 'danger' : 'success'}>{msg}</Alert> : null}
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Section title="Envoyer une campagne" description={`${active} abonné(s) actif(s)`}>
+          <Field label="Sujet">
+            <Input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Nouveautés Snapify" />
+          </Field>
+          <Field label="Contenu HTML" hint="Envoyé dans le template Snapify.">
+            <Textarea rows={8} value={html} onChange={(e) => setHtml(e.target.value)} className="font-mono text-xs" />
+          </Field>
+          <Button
+            variant="primary"
+            icon={Send}
+            loading={busy === 'send'}
+            disabled={!subject.trim() || !html.trim()}
+            onClick={async () => {
+              if (!window.confirm(`Envoyer à ${active} abonné(s) ?`)) return;
+              setBusy('send');
+              setMsg('');
+              try {
+                const r = await sa<{ sent: number; failed: number; total: number }>('/newsletter/send', {
+                  method: 'POST',
+                  body: JSON.stringify({ subject, html }),
+                });
+                setMsg(`Campagne envoyée : ${r.sent}/${r.total} (échecs : ${r.failed}).`);
+                camps.reload();
+              } catch (e) {
+                setMsg(e instanceof Error ? e.message : 'Erreur');
+              } finally {
+                setBusy('');
+              }
+            }}
+          >
+            Envoyer à tous les abonnés
+          </Button>
+        </Section>
+
+        <Section title="Ajouter un abonné">
+          <Field label="E-mail">
+            <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="client@exemple.tn" />
+          </Field>
+          <Field label="Nom">
+            <Input value={name} onChange={(e) => setName(e.target.value)} />
+          </Field>
+          <Button
+            icon={Plus}
+            loading={busy === 'add'}
+            onClick={async () => {
+              setBusy('add');
+              setMsg('');
+              try {
+                await sa('/newsletter/subscribers', { method: 'POST', body: JSON.stringify({ email, name }) });
+                setEmail('');
+                setName('');
+                setMsg('Abonné ajouté.');
+                subs.reload();
+              } catch (e) {
+                setMsg(e instanceof Error ? e.message : 'Erreur');
+              } finally {
+                setBusy('');
+              }
+            }}
+          >
+            Ajouter
+          </Button>
+        </Section>
+      </div>
+
+      <Card padded={false}>
+        <div className="border-b border-slate-100 px-5 py-4">
+          <h2 className="text-[15px] font-semibold text-slate-900">Abonnés</h2>
+        </div>
+        {!subs.data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : subs.data.items.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>E-mail</Th>
+                <Th>Nom</Th>
+                <Th>Statut</Th>
+                <Th className="hidden sm:table-cell">Depuis</Th>
+                <Th />
+              </tr>
+            </thead>
+            <tbody>
+              {subs.data.items.map((s) => (
+                <tr key={s.id} className="hover:bg-slate-50/60">
+                  <Td className="font-medium">{s.email}</Td>
+                  <Td>{s.name || '—'}</Td>
+                  <Td>
+                    <Badge tone={s.status === 'active' ? 'success' : 'neutral'} dot>
+                      {s.status}
+                    </Badge>
+                  </Td>
+                  <Td className="hidden text-slate-500 sm:table-cell">{when(s.createdAt)}</Td>
+                  <Td className="text-right">
+                    <div className="flex justify-end gap-1.5">
+                      <Button
+                        size="sm"
+                        onClick={async () => {
+                          await sa(`/newsletter/subscribers/${s.id}`, {
+                            method: 'PATCH',
+                            body: JSON.stringify({ status: s.status === 'active' ? 'unsubscribed' : 'active' }),
+                          });
+                          subs.reload();
+                        }}
+                      >
+                        {s.status === 'active' ? 'Désabonner' : 'Réactiver'}
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="danger"
+                        icon={Trash2}
+                        onClick={async () => {
+                          if (!window.confirm(`Supprimer ${s.email} ?`)) return;
+                          await sa(`/newsletter/subscribers/${s.id}`, { method: 'DELETE' });
+                          subs.reload();
+                        }}
+                      />
+                    </div>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={Mail} title="Aucun abonné" description="Ajoutez des contacts pour envoyer des campagnes." />
+        )}
+      </Card>
+
+      <Card padded={false}>
+        <div className="border-b border-slate-100 px-5 py-4">
+          <h2 className="text-[15px] font-semibold text-slate-900">Campagnes envoyées</h2>
+        </div>
+        {!camps.data ? (
+          <div className="p-5">
+            <PageSkeleton />
+          </div>
+        ) : camps.data.items.length ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th>Sujet</Th>
+                <Th>Destinataires</Th>
+                <Th>Statut</Th>
+                <Th>Date</Th>
+              </tr>
+            </thead>
+            <tbody>
+              {camps.data.items.map((c) => (
+                <tr key={c.id}>
+                  <Td className="font-medium">{c.subject}</Td>
+                  <Td>{c.recipientCount}</Td>
+                  <Td>
+                    <Badge tone="success">{c.status}</Badge>
+                  </Td>
+                  <Td className="text-slate-500">{when(c.sentAt || c.createdAt)}</Td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+        ) : (
+          <EmptyState icon={Send} title="Aucune campagne" description="Les envois apparaîtront ici." />
+        )}
+      </Card>
+    </div>
+  );
+}