create-snapify-app 0.0.0-stage → 1.1.0

package/template/src/admin/pages/DashboardPage.tsx

@@ -0,0 +1,239 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  ArrowRight,
+  CheckCircle2,
+  Clock,
+  Eye,
+  FilePlus2,
+  Image as ImageIcon,
+  Inbox,
+  Mail,
+  MousePointerClick,
+  Newspaper,
+  Radio,
+  Users,
+  XCircle,
+} from 'lucide-react';
+import { api } from '../lib/api';
+import { useAsync } from '../lib/hooks';
+import { countryFlag, countryName, fmtDuration, fmtNumber, submissionExcerpt, submissionTitle, timeAgo } from '../lib/format';
+import { useAuth } from '../context/AuthContext';
+import { Badge, Button, Card, EmptyState, ErrorState, PageHeader, PageSkeleton, ScoreRing, StatCard } from '../ui/primitives';
+import { BarList, Legend, TrendChart } from '../ui/charts';
+
+const SERIES = [
+  { key: 'views', label: 'Pages vues', color: '#00a89d' },
+  { key: 'sessions', label: 'Visiteurs', color: '#6366f1' },
+];
+
+export default function DashboardPage() {
+  const { user, can } = useAuth();
+  const { data, error, loading, reload } = useAsync(() => api.dashboard(), []);
+
+  if (loading && !data) return <PageSkeleton />;
+  if (error || !data) return <ErrorState message={error || ''} onRetry={reload} />;
+  const a = data.analytics;
+  const c = data.counts;
+  const hour = new Date().getHours();
+
+  const health = [
+    ...(data.health
+      ? [
+          { ok: data.health.gemini, label: 'Assistant IA (Gemini)', hint: 'Clé API configurée' },
+          { ok: data.health.smtp, label: 'Envoi d’e-mails (SMTP)', hint: 'Notifications des formulaires et de la newsletter' },
+          { ok: data.health.google, label: 'Google Search Console', hint: data.health.googleOAuthConfigured ? 'Connexion au compte Google' : 'Identifiants OAuth à configurer' },
+        ]
+      : []),
+    { ok: !data.maintenance, label: 'Site en ligne', hint: data.maintenance ? 'Mode maintenance actif' : 'Accessible aux visiteurs' },
+  ];
+
+  const healthCard = (
+    <Card>
+      <h2 className="mb-4 text-[15px] font-semibold text-slate-900">Santé du site</h2>
+      <div className="mb-5 flex items-center gap-4 rounded-xl bg-slate-50 p-4">
+        <ScoreRing score={data.seoAverage} size={56} />
+        <div>
+          <p className="text-sm font-medium text-slate-900">Score SEO moyen</p>
+          <p className="text-xs text-slate-500">Sur l’ensemble des pages publiées</p>
+          {can('seo.edit') && (
+            <Link to="/seo" className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-brand-700 hover:underline">
+              Optimiser <ArrowRight className="h-3 w-3" />
+            </Link>
+          )}
+        </div>
+      </div>
+      <ul className="space-y-3">
+        {health.map((h) => (
+          <li key={h.label} className="flex items-start gap-3">
+            {h.ok ? <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" /> : <XCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />}
+            <div>
+              <p className="text-sm text-slate-800">{h.label}</p>
+              <p className="text-xs text-slate-500">{h.hint}</p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+
+  const submissionsCard = data.recentSubmissions && (
+    <Card padded={false} className={a ? 'lg:col-span-2 xl:col-span-1' : 'lg:col-span-2'}>
+      <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4">
+        <h2 className="text-[15px] font-semibold text-slate-900">Dernières demandes</h2>
+        <Link to="/forms" className="text-[13px] font-medium text-brand-700 hover:underline">
+          Tout voir
+        </Link>
+      </div>
+      {data.recentSubmissions.length === 0 ? (
+        <EmptyState icon={Mail} title="Aucune demande" description="Les messages du formulaire de contact apparaîtront ici." />
+      ) : (
+        <ul className="divide-y divide-slate-100">
+          {data.recentSubmissions.slice(0, 5).map((s) => (
+            <li key={s.id}>
+              <Link to={`/forms?open=${s.id}`} className="flex items-start gap-3 px-5 py-3 transition hover:bg-slate-50">
+                <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full" style={{ background: s.read ? 'transparent' : '#00a89d' }} />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-slate-800">{submissionTitle(s.payload)}</p>
+                  <p className="truncate text-xs text-slate-500">{submissionExcerpt(s.payload)}</p>
+                </div>
+                <span className="shrink-0 text-xs text-slate-400">{timeAgo(s.createdAt)}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Card>
+  );
+
+  const quickLinks = [
+    { to: '/pages', icon: FilePlus2, label: 'Pages', value: `${c.publishedPages} publiées / ${c.pages}` },
+    { to: '/posts', icon: Newspaper, label: 'Articles', value: `${c.posts} dont ${c.draftPosts} brouillon(s)` },
+    ...(c.subscribers !== null ? [{ to: '/newsletter', icon: MousePointerClick, label: 'Abonnés newsletter', value: fmtNumber(c.subscribers) }] : []),
+    { to: '/media', icon: ImageIcon, label: 'Médias', value: `${c.media} fichier(s)` },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={`${hour < 18 ? 'Bonjour' : 'Bonsoir'} ${user?.name?.split(' ')[0] || ''}`.trim()}
+        description="Vue d’ensemble de l’activité du site sur les 30 derniers jours."
+        actions={
+          can('pages.edit', 'posts.edit') ? (
+            <>
+              <Link to="/posts">
+                <Button icon={Newspaper}>Nouvel article</Button>
+              </Link>
+              <Link to="/pages">
+                <Button variant="primary" icon={FilePlus2}>
+                  Nouvelle page
+                </Button>
+              </Link>
+            </>
+          ) : null
+        }
+      />
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {a ? (
+          <>
+            <StatCard label="Pages vues" value={fmtNumber(a.pageViews)} icon={Eye} hint="30 derniers jours" />
+            <StatCard label="Visiteurs uniques" value={fmtNumber(a.uniqueSessions)} icon={Users} tone="violet" hint={`Rebond ${a.bounceRate} %`} />
+            <StatCard label="Temps moyen par page" value={fmtDuration(a.avgTimeOnPageSec)} icon={Clock} tone="sky" />
+          </>
+        ) : (
+          <>
+            <StatCard label="Pages publiées" value={`${c.publishedPages} / ${c.pages}`} icon={FilePlus2} hint={`${c.pages - c.publishedPages} non publiée(s)`} />
+            <StatCard label="Articles" value={fmtNumber(c.posts)} icon={Newspaper} tone="violet" hint={`${c.draftPosts} brouillon(s)`} />
+            <StatCard label="Médias" value={fmtNumber(c.media)} icon={ImageIcon} tone="sky" hint="Dans la médiathèque" />
+          </>
+        )}
+        {c.submissions !== null && (
+          <StatCard
+            label="Demandes de contact"
+            value={fmtNumber(c.submissions)}
+            icon={Inbox}
+            tone="amber"
+            hint={c.unreadSubmissions ? <Badge tone="warning">{c.unreadSubmissions} non lue(s)</Badge> : 'Tout est lu'}
+          />
+        )}
+      </div>
+
+      {a ? (
+        <>
+          <div className="grid gap-6 xl:grid-cols-3">
+            <Card className="xl:col-span-2">
+              <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <h2 className="text-[15px] font-semibold text-slate-900">Audience</h2>
+                  <p className="flex items-center gap-1.5 text-xs text-slate-500">
+                    <Radio className="h-3 w-3 text-emerald-500" /> {a.activeNow} visiteur(s) actif(s) en ce moment
+                  </p>
+                </div>
+                <Legend series={SERIES} />
+              </div>
+              <TrendChart data={a.timeseries} series={SERIES} />
+              <div className="mt-2 text-right">
+                <Link to="/analytics" className="inline-flex items-center gap-1 text-[13px] font-medium text-brand-700 hover:underline">
+                  Statistiques détaillées <ArrowRight className="h-3.5 w-3.5" />
+                </Link>
+              </div>
+            </Card>
+            {healthCard}
+          </div>
+
+          <div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
+            <Card>
+              <h2 className="mb-3 text-[15px] font-semibold text-slate-900">Pages les plus vues</h2>
+              <BarList items={a.topPages.slice(0, 6).map((p) => ({ key: p.path, label: p.path, value: p.views, extra: fmtDuration(p.avgTimeSec) }))} />
+            </Card>
+            <Card>
+              <h2 className="mb-3 text-[15px] font-semibold text-slate-900">Pays des visiteurs</h2>
+              <BarList
+                items={a.countries.slice(0, 6).map((c) => ({
+                  key: c.country,
+                  label: (
+                    <span className="flex items-center gap-2">
+                      <span className="text-base leading-none">{countryFlag(c.country)}</span>
+                      {countryName(c.country)}
+                    </span>
+                  ),
+                  value: c.views,
+                }))}
+              />
+            </Card>
+            {submissionsCard}
+          </div>
+        </>
+      ) : (
+        <div className="grid gap-6 lg:grid-cols-3">
+          {submissionsCard}
+          {healthCard}
+        </div>
+      )}
+
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {quickLinks.map((q) => (
+          <Link key={q.label} to={q.to} className="group">
+            <Card className="flex items-center gap-4 transition group-hover:border-slate-300">
+              <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100 text-slate-600 transition group-hover:bg-brand-50 group-hover:text-brand-700">
+                <q.icon className="h-5 w-5" />
+              </span>
+              <div className="min-w-0">
+                <p className="text-sm font-medium text-slate-900">{q.label}</p>
+                <p className="truncate text-xs text-slate-500">{q.value}</p>
+              </div>
+              <ArrowRight className="ml-auto h-4 w-4 text-slate-300 transition group-hover:translate-x-0.5 group-hover:text-slate-500" />
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/src/admin/pages/EngagementPage.tsx

@@ -0,0 +1,168 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useCallback } from 'react';
+import { ChevronDown, ChevronUp, MousePointerClick, Plus, Puzzle, Trash2 } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import type { FloatingButtonConfig } from '../../../server/cms/types';
+import { api } from '../lib/api';
+import { useEditable } from '../lib/hooks';
+import { useSite, useSiteData } from '../context/SiteContext';
+import { Alert, Button, EmptyState, Field, Input, PageHeader, Section, Select, Switch } from '../ui/primitives';
+import { SaveBar } from '../ui/SaveBar';
+import { LinkInput } from '../editor/fields';
+
+interface State {
+  buttons: FloatingButtonConfig[];
+}
+
+const DEFAULT_BAR: FloatingButtonConfig[] = [
+  { id: 'call', label: 'Appeler', path: 'tel:', style: 'outline', enabled: true },
+  { id: 'contact', label: 'Parler de votre projet', path: '/contact/', style: 'primary', enabled: true },
+];
+
+function PhonePreview({ state }: { state: State }) {
+  const site = useSiteData();
+  const buttons = state.buttons.filter((b) => b.enabled && b.label);
+  return (
+    <div className="mx-auto w-[270px] overflow-hidden rounded-[30px] border-[7px] border-slate-900 bg-white shadow-2xl">
+      <div className="relative h-[480px] bg-gradient-to-b from-slate-50 to-white">
+        <div className="flex items-center justify-between border-b border-slate-100 bg-white px-4 py-3">
+          <span className="text-sm font-bold" style={{ color: site.branding.colors.navy }}>
+            {site.branding.siteName}
+          </span>
+          <span className="h-3 w-5 rounded-sm bg-slate-200" />
+        </div>
+        <div className="space-y-2 p-4">
+          <div className="h-24 rounded-lg" style={{ background: site.branding.colors.navy }} />
+          <div className="h-3 w-3/4 rounded bg-slate-200" />
+          <div className="h-3 w-1/2 rounded bg-slate-200" />
+          <div className="h-3 w-2/3 rounded bg-slate-100" />
+        </div>
+        <div className="absolute inset-x-3 bottom-3 flex gap-2">
+          {(buttons.length ? buttons : DEFAULT_BAR).slice(0, 2).map((b) => (
+              <span
+                key={b.id}
+                className="flex-1 truncate rounded-lg px-2 py-2 text-center text-xs font-semibold"
+                style={
+                  b.style === 'primary'
+                    ? { background: site.branding.colors.primary, color: '#fff' }
+                    : b.style === 'outline'
+                      ? { border: `1.5px solid ${site.branding.colors.primary}`, color: site.branding.colors.primary, background: '#fff' }
+                      : { color: site.branding.colors.navy, background: '#f1f5f9' }
+                }
+              >
+                {b.label}
+              </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function EngagementPage() {
+  const site = useSiteData();
+  const { patchSite } = useSite();
+  const initial = React.useMemo<State>(() => ({ buttons: site.floatingButtons }), [site.floatingButtons]);
+
+  const save = useCallback(
+    async (s: State) => {
+      await api.saveFloatingButtons(s.buttons);
+      patchSite('floatingButtons', s.buttons);
+    },
+    [patchSite]
+  );
+  const ed = useEditable<State>(initial, save);
+  if (!ed.value) return null;
+  const { buttons } = ed.value;
+  const setButtons = (b: FloatingButtonConfig[]) => ed.patch({ buttons: b });
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Boutons flottants" description="Les boutons d’action affichés en permanence en bas de l’écran sur mobile." />
+      <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
+        <div className="space-y-6">
+          <Alert tone="info" icon={Puzzle}>
+            Le bouton WhatsApp et l’assistant IA sont désormais des modules : réglez-les depuis{' '}
+            <Link to="/modules" className="font-semibold underline">
+              Modules installés
+            </Link>
+            .
+          </Alert>
+          <Section
+            title={
+              <span className="flex items-center gap-2">
+                <MousePointerClick className="h-4 w-4 text-brand-600" /> Boutons d’action flottants
+              </span>
+            }
+            description="Barre fixée en bas de l’écran sur mobile. Sans bouton configuré, le site affiche « Appeler » et « Parler de votre projet ». Deux boutons au maximum."
+            actions={
+              <Button size="sm" icon={Plus} disabled={buttons.length >= 4} onClick={() => setButtons([...buttons, { id: crypto.randomUUID(), label: '', path: '/contact/', style: 'primary', enabled: true }])}>
+                Ajouter
+              </Button>
+            }
+          >
+            {buttons.length === 0 ? (
+              <EmptyState icon={MousePointerClick} title="Aucun bouton" description="Ajoutez un bouton pour inciter vos visiteurs à passer à l’action." />
+            ) : (
+              buttons.map((b, i) => (
+                <div key={b.id} className="rounded-xl border border-slate-200 p-4">
+                  <div className="grid gap-3 md:grid-cols-[1fr_1fr_150px]">
+                    <Field label="Libellé">
+                      <Input value={b.label} onChange={(e) => setButtons(buttons.map((x) => (x.id === b.id ? { ...x, label: e.target.value } : x)))} placeholder="Demander un audit" />
+                    </Field>
+                    <Field label="Destination">
+                      <LinkInput value={b.path} onChange={(path) => setButtons(buttons.map((x) => (x.id === b.id ? { ...x, path } : x)))} />
+                    </Field>
+                    <Field label="Style">
+                      <Select
+                        value={b.style}
+                        onChange={(style) => setButtons(buttons.map((x) => (x.id === b.id ? { ...x, style: style as FloatingButtonConfig['style'] } : x)))}
+                        options={[
+                          { value: 'primary', label: 'Plein' },
+                          { value: 'outline', label: 'Contour' },
+                          { value: 'ghost', label: 'Discret' },
+                        ]}
+                      />
+                    </Field>
+                  </div>
+                  <div className="mt-3 flex items-center justify-between">
+                    <Switch checked={b.enabled} onChange={(enabled) => setButtons(buttons.map((x) => (x.id === b.id ? { ...x, enabled } : x)))} label="Actif" />
+                    <div className="flex">
+                      <Button size="icon" variant="ghost" disabled={i === 0} onClick={() => setButtons(swap(buttons, i, i - 1))}>
+                        <ChevronUp className="h-4 w-4" />
+                      </Button>
+                      <Button size="icon" variant="ghost" disabled={i === buttons.length - 1} onClick={() => setButtons(swap(buttons, i, i + 1))}>
+                        <ChevronDown className="h-4 w-4" />
+                      </Button>
+                      <Button size="icon" variant="ghost" className="text-rose-600 hover:bg-rose-50" onClick={() => setButtons(buttons.filter((x) => x.id !== b.id))}>
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+            {buttons.filter((b) => b.enabled).length > 2 ? <Alert tone="warning">Seuls les deux premiers boutons actifs sont affichés sur mobile.</Alert> : null}
+          </Section>
+        </div>
+
+        <div className="space-y-3 xl:sticky xl:top-20 xl:self-start">
+          <p className="text-center text-xs font-semibold uppercase tracking-wide text-slate-500">Aperçu mobile</p>
+          <PhonePreview state={ed.value} />
+        </div>
+      </div>
+      <SaveBar dirty={ed.dirty} saving={ed.saving} onSave={ed.commit} onReset={ed.reset} blocker={ed.blocker} />
+    </div>
+  );
+}
+
+function swap<T>(arr: T[], a: number, b: number): T[] {
+  const next = [...arr];
+  [next[a], next[b]] = [next[b], next[a]];
+  return next;
+}