Backend·3 min de lecture·541 mots

Inventaire composants backend

Component Inventory — Backend

33 fichiers .tsx dans app/src/components/ (hors app/). Composants UI partagés entre les écrans admin / superadmin / vitrines / landing.

Vue d'ensemble

app/src/components/
├── admin/                       # AdminShell + sub-components admin gérant
│   ├── admin-shell.tsx          # Layout principal : sidebar + topbar + bottom-nav mobile + dark mode
│   ├── admin-sidebar.tsx        # Nav latérale rétractable, dark mode scopé `.admin-dark`
│   ├── admin-topbar.tsx         # Topbar + Cmd+K + notifs + theme toggle
│   ├── admin-mobile-drawer.tsx  # Drawer hamburger mobile (remplace bottom-nav après `1aeba53`)
│   ├── admin-nav-items.ts       # Items de nav (data)
│   ├── admin-global-provider.tsx # Contexte global admin (toasts, dialogs)
│   ├── command-palette.tsx      # Cmd+K palette (tenants/users/codes/produits)
│   ├── notif-bell.tsx           # Centre notifs + polling 30s + toasts
│   ├── onboarding-checklist.tsx # Checklist post-onboarding gérant
│   ├── theme-toggle.tsx         # Light/dark
│   ├── toast-container.tsx      # Toasts globaux
│   └── dashboard/               # Cards dashboard admin
│       ├── kpi-card.tsx
│       ├── sparkline.tsx        # SVG inline (cf. mobile DEC-189)
│       ├── top-produits.tsx
│       ├── dernieres-commandes.tsx
│       └── alerts.tsx
│
├── vitrine/                     # Renderer vitrine publique
│   ├── vitrine-page.tsx         # Renderer principal (snapshots → React tree, guards hasBuilderXXX)
│   ├── vitrine-builder-renderer.tsx  # Variante builder preview
│   ├── navbar-renderer.tsx
│   ├── footer-renderer.tsx
│   ├── auth-client.tsx          # Composant auth embed
│   ├── badge-panier.tsx
│   └── preview-bar.tsx          # Bandeau preview live mode
│
├── recherche/                   # Composants recherche marketplace
├── superadmin/                  # Composants SA spécifiques
└── landing/                     # Composants page d'accueil marketplace

Components inline (dans src/app/...)

Beaucoup de composants sont co-localisés avec leurs routes — pattern Next.js App Router. Exemples notables :

src/app/admin/vitrine/builder/components/
├── builder-shell.tsx       # Layout builder (sidebar gauche + canvas + panels droite)
├── builder-canvas.tsx      # Zone de drop @dnd-kit
├── builder-header.tsx      # Header avec Publish + Preview + isDirty indicator
├── builder-sidebar.tsx     # Library de sections/blocs
└── builder-panels.tsx      # Panels propriétés à droite

src/app/admin/vitrine/builder/hooks/
├── use-builder-store.ts    # Zustand store builder
└── use-vitrine-sync.ts     # Autosave + isDirty (fast-deep-equal)

src/app/admin/login/components/  # Wizard onboarding 7 étapes
src/app/admin/setup/components/
src/app/admin/parametres/sections/  # Sections Réglages 4 tabs WP-232
src/app/admin/services/components/  # Refonte Shopify-like fc92358
src/app/superadmin/*/components/    # Tables, filtres, dialogs SA

Design system (admin)

  • Tailwind 4 utility-first via PostCSS plugin
  • Dark mode scopé : .admin-dark (sidebar Saga A→D) + dark mode partagé côté superadmin
  • Topbar shell : sidebar pinnable (AdminPrefs), Cmd+K, notif-bell polling, theme toggle
  • Mobile responsive : drawer hamburger (16 pages rendues responsive Saga Mobile 1→4)
  • AdminShell unique pour admin + superadmin (variant shell bleu nuit #1e3a8a côté SA)

Routing UI

  • Pages admin : src/app/admin/<feature>/page.tsx (16 features)
  • Pages superadmin : src/app/superadmin/<feature>/page.tsx (6 features)
  • Vitrines tenants : src/app/[slug]/<page>/page.tsx (catch-all subdomain)
  • Marketplace : src/app/page.tsx + src/app/landing/

Conventions code

  • Server Components par défaut. "use client" uniquement quand nécessaire (état local, effets, dnd, ...).
  • Pas de docstrings multi-lignes (CLAUDE.md).
  • Pas de comments sauf WHY non-évident.
  • Imports : @/ alias vers src/.

Hooks personnalisés notables

src/app/admin/vitrine/builder/hooks/use-builder-store.ts   # Zustand store unique builder
src/app/admin/vitrine/builder/hooks/use-vitrine-sync.ts    # Autosave debounced + isDirty
src/lib/auth/session.ts                                     # getSessionFromRequest (utilisé dans toutes les routes)
src/lib/acces-vitrine.ts                                    # filtreTenantsAccessibles + verifierAccesTenant
src/lib/canaux.ts                                           # CANAL_META source de vérité types canaux
src/lib/restaurant.ts                                       # ConfigRestaurant defaults + transitions statut

Tests

Tests composants admin = à 0% en CI. Tests lib/ (8 unitaires post-P0 hardening).