Tableau de bord SaaS Next.js avec flux d'intégration

1. Configurer Next.js et shadcn 2. Ajouter une authentification Supabase simple avec une page d'inscription et de connexion 3. Configurer le frontend selon le prompt suivant : <prompt frontend> <summary_title> Créez des composants détaillés avec ces exigences : 1. Utilisez la directive 'use client' pour les composants côté client 2. Stylez avec les classes utilitaires Tailwind CSS pour un design responsive 3. Utilisez Lucide React pour les icônes (du package lucide-react). N'utilisez PAS d'autres bibliothèques UI sauf si demandé 4. Utilisez des photos stock de https://t.co/kmBMYKBzp0 lorsque c'est approprié, uniquement des URL valides dont vous savez qu'elles existent 5. Configurez next.config.js image remotePatterns pour activer les photos stock de https://t.co/kmBMYKBzp0 6. Créez le fichier layout.tsx racine qui encapsule les éléments de navigation nécessaires pour toutes les pages 7. IMPÉRATIVEMENT implémenter les éléments de navigation à leur place légitime, c'est-à-dire barre latérale gauche, en-tête supérieur 8. Implémenter avec précision les mises en page en grille nécessaires 9. Suivez les bonnes pratiques d'importation : - Utilisez les alias de chemin @/ - Gardez les imports de composants organisés - Mettez à jour le fichier src/app/page.tsx actuel avec le nouveau code complet - N'oubliez pas la gestion de la route racine (page.tsx) - Vous DEVEZ terminer tout le prompt avant de vous arrêter Tableau de bord SaaS moderne avec flux d'intégration </summary_title> <image_analysis> 1. Éléments de navigation : - Barre latérale gauche avec : Tableau de bord, Contenu, Communauté, Marketing, Analytique, Ventes, Boutique en ligne - Navigation secondaire en bas avec : Paramètres, Aide - Section de profil utilisateur en haut de la barre latérale 2. Composants de mise en page : - Largeur de la barre latérale : 240px - Zone de contenu principale : largeur flexible - Conteneurs de cartes : ~500px de largeur - Padding : 24px (cohérent partout) - Conteneur responsive avec marges de 32px 3. Sections de contenu : - En-tête de bienvenue avec salutation utilisateur - Liste de contrôle de démarrage (4 étapes) - Carte de réservation d'appel vidéo - Carte d'aperçu du constructeur de page - Indicateurs de progression pour les tâches terminées 4. Contrôles interactifs : - Éléments de liste de contrôle avec états de complétion - Boutons principaux "Planifier un horaire" et "Essayer" - Liens texte "En savoir plus" - Éléments de menu de navigation avec états de survol - Contrôles d'éditeur de texte enrichi dans le constructeur de page 5. Couleurs : - Bleu principal : #0066FF (boutons) - Gris de fond : #F5F5F7 - Texte sombre : #1A1A1A - Vert de succès : #34C759 - Couleurs d'accent pour les avatars 6. Structure de grille/mise en page : - Mise en page à colonne unique pour le contenu principal - Espace de 24px entre les cartes - Conteneurs à largeur flexible - Système de grille de cartes avec coins arrondis (12px) </image_analysis> <development_planning> 1. Structure du projet : ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. Fonctionnalités clés : - Système de liste de contrôle d'intégration - Planification d'appel vidéo - Interface de constructeur de page - Suivi de progression - Tableau de bord utilisateur 3. Gestion d'état : ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. Routes : ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. Architecture des composants : - DashboardLayout (parent) - OnboardingCard (fonctionnalité) - VideoCallCard (fonctionnalité) - PageBuilderPreview (fonctionnalité) - NavigationMenu (partagé) - ActionButton (partagé) 6. Points de rupture responsives : ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </prompt frontend> 4. Configurer la structure des pages selon le prompt suivant <prompt structure des pages> Structure de routes Next.js basée sur les éléments du menu de navigation (hors route principale). Assurez-vous d'envelopper toutes les routes avec le composant : Routes : - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help Implémentations des pages : /dashboard : Objectif principal : Fournir un aperçu des indicateurs clés et un accès rapide aux fonctions principales Composants clés - Grille de cartes de statistiques - Flux d'activité récent - Boutons d'action rapide - Graphiques de performance - Notifications de tâches Structure de mise en page - Mise en page basée sur une grille avec système de 12 colonnes - Cartes responsives qui s'empilent sur mobile - En-tête collant avec indicateurs clés /content : Objectif principal : Gérer et organiser tous les actifs de contenu Composants clés - Liste de contenu /bascule de vue en grille - Système de recherche et de filtres - Éditeur de contenu - Bibliothèque multimédia - Historique des versions Structure de mise en page : - Vue divisée avec navigation latérale - Zone de contenu principale avec défilement infini - Superpositions modales pour l'édition /community : Objectif principal : Gérer les interactions utilisateur et les fonctionnalités communautaires Composants clés - Annuaire des membres - Forums de discussion - Outils de modération - Signalements utilisateur - Journaux d'activité Structure de mise en page - Mise en page à trois colonnes - Barre latérale repliable - Zone de contenu principale défilable /marketing : Objectif principal : Gestion de campagnes et outils marketing Composants clés - Créateur de campagne - Constructeur de modèles d'e-mail - Tableau de bord analytique - Segments d'audience - Outils de test A/B Structure de mise en page - Interface à onglets - Vue divisée pour l'édition - Panneau d'aperçu /analytics : Objectif principal : Visualisation des données et rapports Composants clés - Graphiques interactifs - Constructeur de rapports personnalisés - Outils d'exportation de données - Comparaisons de métriques - Sélecteur de plage de dates Structure de mise en page - Graphiques en pleine largeur - En-tête de filtres collant - Tableaux de données responsives /sales : Objectif principal : Pipeline de ventes et gestion des commandes Composants clés - Tableau de bord des commandes - Profils clients - Générateur de factures - Traitement des paiements - Rapports de ventes Structure de mise en page - Vue tableau Kanban - Option de vue liste - Panneau de détails /storefront : Objectif principal : Gestion de la boutique e-commerce Composants clés - Gestionnaire de produits - Contrôle des stocks - Personnalisateur de boutique - Exécution des commandes - Configuration de l'expédition Structure de mise en page - Mise en page de produits en grille - Barre latérale d'édition rapide - Mode aperçu /settings : Objectif principal : Configuration du système et préférences utilisateur Composants clés - Paramètres du compte - Préférences système - Configuration des intégrations - Gestion des utilisateurs - Paramètres de sécurité Structure de mise en page - Panneaux de paramètres catégorisés - Mises en page basées sur des formulaires - Modales de confirmation /help : Objectif principal : Documentation de support et assistance Composants clés - Recherche dans la documentation - Section FAQ - Contacter le support - Vidéos tutoriels - Base de connaissances Structure de mise en page - Barre latérale recherchable - Vue d'article - Panneau de liens rapides Mises en page : AdminLayout : - Routes applicables : Toutes sauf /help - Composants principaux - Barre de navigation supérieure - Navigation latérale - Menu de profil utilisateur - Notifications - Fil d'Ariane - Comportement responsive - Barre latérale repliable sur mobile - Menu déroulant pour la navigation sur petits écrans - Largeur de contenu ajustable HelpLayout - Routes applicables : /help - Composants principaux - Barre latérale de documentation - Barre de recherche - Widget de chat de support - Bouton retour à l'administration - Comportement responsive - Pleine largeur sur mobile - Bouton d'action flottant pour le support - Sections repliables </prompt structure des pages>