Documentation DARDECO

Présentation du Projet

Nom: DARDECO — Plateforme E-commerce de Design d'Intérieur Premium

Slogan: "L'Art de Vivre Chez Vous" — "The Art of Living at Home" — "فن العيش في بيتك"

Fondateur: Mourad Ghazi — mouradghazi002@gmail.com

Concept

DARDECO (دار ديكو) est composé de "دار" (maison) et "ديكو" (décoration). La plateforme vend des meubles et objets de design d'intérieur qui marient l'artisanat marocain authentique avec le design scandinave et international contemporain.

Cibles Marchés

Segment	Description	Zones
Principale	Couples et familles (30–55 ans), revenus moyens-élevés, urbains	Casablanca, Rabat, Marrakech, Tanger
Secondaire	Diaspora marocaine en Europe (France, Belgique, Suisse)	Europe, Canada
B2B	Architectes, décorateurs, hôtels et riads de luxe	Maroc & international

Fonctionnalités Phares

• Personnalisation produit: Couleur, bois, dimensions, tissu — prix mis à jour en temps réel
• Quick View: Aperçu produit en modal sans quitter la page
• Panier intelligent: Suggestions complémentaires ("Complétez votre ensemble salon")
• Suivi en temps réel: Timeline visuelle des commandes avec notifications
• Assistant Sami: IA en darija marocaine, français et arabe
• Dashboard arabophone: Interface admin complète en arabe pour le propriétaire
• Pricing dynamique: Flash sale, segments clients, stock faible, bundles

Roadmap en 3 Phases (12 mois)

• Phase 1 (Mois 1–3) — MVP: Site e-commerce fonctionnel, 20–30 produits, Sami v1, paiements de base
• Phase 2 (Mois 4–6) — Croissance: CRM avancé, fidélité, newsletter, variantes produits, B2B
• Phase 3 (Mois 7–12) — Excellence: Recherche par image, AR ("posez le canapé dans votre salon"), app mobile, marketplace artisans

Stack Frontend

Technologie	Version	Usage
React	18.2.0	UI principale
Tailwind CSS	Latest	Stylage utilitaire
React Router DOM	6.26.0	Routage client
@tanstack/react-query	5.84.1	État asynchrone & cache
Framer Motion	11.16.4	Animations
Recharts	2.15.4	Graphiques analytiques
jspdf	4.2.1	Génération factures PDF
Shadcn/ui	Latest	Composants UI accessibles
Lucide React	0.475.0	Icônes

Backend & Infrastructure (Base44 BaaS)

• Authentification: JWT, OAuth Google, OTP email, reset password
• Base de Données: Entités JSON avec Row Level Security (RLS)
• Fonctions Backend: Deno Deploy pour logique serveur
• Intégrations Core: InvokeLLM, SendEmail, UploadFile, GenerateImage
• Temps Réel: WebSockets (base44.entities.X.subscribe)

Design System

Inspiré de Case Furniture — design luxe minimaliste centré produit:

Couleur	Hex	Usage
Charcoal Black	#1B1B1B	Textes, boutons principaux, header
Off-White	#FFFFFA	Fond page principale
Accent (terracotta)	#C65D3B	CTA, badges promo, accents
Success Green	#27AE60	Stock disponible, confirmation
Warning Orange	#F39C12	Stock faible, alertes

Fonts: Cormorant Garamond (titres serif élégants) + Inter (corps de texte)

Accueil (Home.jsx)

• HeroSlider: Bannières plein-écran avec Ken Burns effect (zoom lent) toutes les 6 secondes
• CollectionGrid: Navigation par catégories (furniture, lighting, storage, accessories, tables-de-chevet, outlet)
• FeaturedProducts: Grille produits mis en avant
• EditorialSection: Storytelling de marque
• MarqueeStrip: Bandeau défilant (livraison gratuite, garanties)
• NewsletterPopup: Popup avec délai configurable (4s par défaut)

Collection (Collection.jsx)

• Filtres: style (modern, scandinavian, berber, industrial, minimalist, oriental), prix, disponibilité
• Tri: nouveauté, prix croissant/décroissant, popularité
• QuickView modal: aperçu sans quitter la page (45% image / 55% infos)
• Responsive: 4 colonnes desktop → 2 tablette → 1 mobile
• Sync temps réel: WebSocket invalidation cache

Détail Produit (ProductDetail.jsx)

• ProductGallery: Galerie avec zoom, thumbnails, navigation
• Swatches couleurs: chaque couleur peut avoir sa propre image
• Prix dynamique: badge -X%, bannière flash sale avec compte à rebours
• Onglets: Description | Dimensions | Matériaux | Avis (ReviewsList)
• Badges confiance: livraison gratuite, retours, garantie
• Produits related: même catégorie, filtrés et limités à 4

Checkout (Checkout.jsx)

1. Étape 1: Informations client (nom, email, téléphone, adresse, ville marocaine)
2. Étape 2: Mode de livraison (standard, express, lourd avec montage, retrait showroom)
3. Étape 3: Paiement (carte, virement, paiement à la livraison +20 MAD, 3×sans frais)

Post-commande: création Order → email confirmation → génération facture PDF → redirection

Suivi Commande (TrackOrder.jsx)

• Recherche publique par numéro de commande (ex: DAR-123456)
• Timeline visuelle 5 étapes avec indicateur de progression
• Détails complets sans authentification
• Support: email + WhatsApp direct

Assistant Sami (Assistant.jsx)

• Interface chat avec agent IA dardeco_assistant
• Affichage produits recommandés avec images et liens
• Quick replies (suggestions de questions prédéfinies)
• Compréhension darija, français, arabe

Autres Pages

• Cart.jsx: Panier avec drawer latéral (CartDrawer) + page complète
• OrderConfirmation.jsx: Page de remerciement avec timeline et renvoi facture
• Profile.jsx: Compte client, historique commandes, points fidélité
• SearchResults.jsx: Recherche texte sur nom, description, designer
• About.jsx / Contact.jsx: Pages statiques

AdminLayout.jsx — Structure Globale

• Sidebar: navigation groupée (Commerce, Catalogue, Intelligence, Système)
• AdminAccessGate: code d'accès sécurisé avant /admin (session 8h, 3 essais max)
• Topbar: breadcrumb, recherche universelle Cmd+K, notifications
• SamiAdmin: barre de commande IA avec shortcut ⌘K
• SamiWidget: assistant flottant contextuel
• NotificationCenter: alertes temps réel avec badge

AdminDashboard.jsx

• KPIs: CA, commandes, panier moyen, taux conversion
• Graphiques Recharts: ventes par jour/semaine/mois/année
• Pipeline commandes: répartition par statut
• Alertes stock critique
• Live ticker des nouvelles commandes
• Daily Briefing IA: résumé matinal automatique

AdminProducts.jsx

• CRUD complet avec ProductFormModal
• Upload images multiples, variantes couleurs avec hex et images dédiées
• Traduction automatique IA (FR → EN, AR) via translateProduct
• Toggle inline actif/inactif, is_new, is_featured
• Filtres: catégorie, statut, stock, prix

AdminOrders.jsx

• 13 statuts de commande avec workflow configurable
• OrderDetailModal: détails complets, génération facture, envoi email
• Alertes commandes en retard
• Saisie tracking number et transporteur
• AuditLog intégré

AdminCustomers.jsx — CRM 360°

• Segmentation: nouveau, VIP, dormeur, promo_hunter, B2B
• Programme fidélité: Bronze → Argent → Or → Platine
• Historique interactions et commandes par client
• Notes privées internes
• Blacklist management

AdminPricing.jsx — Pricing Dynamique

• Flash Sale: dates début/fin, compte à rebours visible sur site
• Low Stock: seuil de stock déclencheur
• Segment Discount: prix différenciés VIP/nouveau/B2B
• Bundle: offres groupées
• Priorité des règles + plancher de prix (min_price)
• Aperçu temps réel de l'impact

AdminAnalytics.jsx

• Graphiques ventes par catégorie, produit, période
• Analyse stocks: rotation, meilleurs vendeurs
• Rapports IA (SamiInsightCard): forces, faiblesses, recommandations actionnables

AdminSupport.jsx

• Tickets avec fil de messages complet
• Priorité: critique / haute / normale / basse
• Catégories: avant-vente, livraison, retour, montage, réclamation
• Réponses suggérées par Sami IA
• Score de satisfaction post-résolution

AdminSettings.jsx — 12 Onglets

Général, SEO, Catalogue, Livraison, Paiement, Facturation, Réseaux sociaux, Newsletter, Automatisation, Polices, Scripts, Régional

AdminUsers.jsx

7 rôles: super_admin, manager_general, responsable_commercial, gestionnaire_stock, service_client, marketing, comptable. Permissions granulaires par module (view/create/edit/delete).

Product

Champs: name, slug, sku, designer, category (furniture/lighting/storage/accessories/tables-de-chevet/outlet), subcategory, description, price, original_price, images[], lifestyle_image, colors[{name, hex, image_url}], materials[], dimensions{width,depth,height,weight}, stock, is_new, is_featured, is_active, style, sort_order, translations{en,ar}{name,description,designer,subcategory,materials}

RLS: Lecture publique. CRUD admins + users avec permissions catalogue

PricingRule

Champs: name, type (flash_sale/low_stock/segment_discount/bundle), is_active, discount_type (percent/fixed), discount_value, applies_to (all/category/product), category, product_ids[], flash_start, flash_end, stock_threshold, segment (vip/nouveau/dormeur/b2b/all), min_price, priority, description

RLS: Lecture publique. CRUD réservé super_admin

Order

Statuts (13): nouvelle → paiement_verifie → preparation → controle_qualite → emballage → attente_transport → expedition → en_route → livre → cloturee / annulee / sav_ouvert / retour_transit

Champs: order_number, customer_name/email/phone, shipping_address, items[{product_id, product_name, sku, quantity, unit_price, color}], subtotal, shipping_cost, discount, total, payment_method, payment_status, tracking_number, carrier, promo_code, delivery_type

Customer (CRM)

Champs: civility, full_name, email, phone, type (particulier/entreprise), company, ice, city, addresses[], segment, tags[], preferred_style, total_spent, order_count, loyalty_points, loyalty_tier (bronze/argent/or/platine), acquisition_source, notes, is_blacklisted

CartItem

Champs: product_id, product_name, product_image, product_price, quantity, color, session_id, description

RLS: Accès strictement par created_by_id

PromoCode

Champs: code, type (percent/fixed/free_shipping/gift), value, min_order, max_uses, used_count, expires_at, is_active, description

Review

Champs: product_id, customer_name, customer_email, rating (1–5), title, comment, is_verified, is_approved, helpful_count

SupportTicket

Champs: ticket_number, subject, customer_name/email/phone, order_number, category, priority, status, messages[{role, content, author, date}], assigned_to, tags[], resolved_at, satisfaction_score

AdminUser

Champs: full_name, email, role (7 rôles), permissions{catalogue,commandes,clients,promotions,analytique,parametres}{view,create,edit,delete}, is_active, access_code, expires_at, last_login, notes

SiteSettings (60+ champs)

site_name, logo_url, brand colors, SEO, social_links, shipping_settings{zones,tarifs,seuil_gratuit}, payment_methods{cod,bank_transfer,card}, invoice_settings, newsletter_settings, fonts{heading,body}, announcement_bar, newsletter_popup, etc.

PrivateEmail

Champs: subject, content, recipient_email, access_token, is_read, expires_at, max_views, view_count, created_by_admin

Newsletter / AdminNotification

Newsletter: email, source (popup/footer), is_active. AdminNotification: type, priority, title, message, entity_id, is_read, action_url

generateInvoiceAndEmail

Params: order_id, send_email (boolean) → Retour: {invoice_url, email_sent}

Génère la facture PDF et l'envoie par email. Appelée automatiquement post-commande.

sendOrderConfirmationEmail

Params: order_id → Email de confirmation avec détails commande, remerciements, prochaines étapes

sendOrderStatusEmail

Params: order_id, new_status → Notification au client lors de chaque changement de statut

sendWelcomeEmail

Params: user_email, user_name → Email de bienvenue nouvel inscrit

autoSendInvoiceEmail

Automation sur création/modification de commande → envoi automatique de la facture

generateInvoice

Params: order_id → Retour: {invoice_url} — Génère PDF sans envoi

createPrivateEmail

Params: subject, content, recipient_email, expires_at, max_views → Crée email avec token unique d'accès sécurisé

readPrivateEmail

Params: token → Vérifie expiration + nombre de vues, marque comme lu. Sécurité: accès à usage unique

notifyNewOrder

Automation sur création de commande → crée AdminNotification + email/SMS optionnel

verifyAdminCode

Params: code → Retour: {valid: boolean} | Compare avec secret ADMIN_ACCESS_CODE, protection brute-force

translateProduct / translateAllProducts

Traduit les fiches produits (name, description, designer, subcategory, materials) via InvokeLLM → FR vers EN et AR

weeklyOrderSummary

Scheduled automation hebdomadaire → rapport CA, commandes, top produits, alertes envoyé par email

Multi-Langue (i18n)

• 3 langues: Français (défaut), Arabe (RTL), Anglais
• Contexte LangProvider avec hook useLang()
• Traduction automatique produits via IA (translateProduct)
• Switcher dans Navbar et Admin sans rechargement de page

Pricing Dynamique

• Hook usePricingRules() + fonction getEffectivePrice(product, rules)
• Règles avec priorités et plancher de prix
• FlashSaleBanner avec compte à rebours en temps réel
• Badge -X% sur ProductCard quand réduction active
• Support multi-règles simultanées

Panier & Checkout

• CartProvider (Context global) avec CartDrawer latéral
• Persist en base via CartItem entity (créé_by_id RLS)
• Calcul frais livraison automatique par ville marocaine
• Validation code promo en temps réel
• 3 modes de paiement: carte, virement, livraison (COD)

Assistant Sami IA

Composant	Usage
SamiChat	Widget flottant site public, recommandations produits, proactif par page
SamiAdmin	Barre commande ⌘K admin, navigation naturelle, rapports IA
SamiWidget	Widget flottant admin, insights opérationnels
SamiInsightCard	Cartes insights dans Analytics

Programme de Fidélité

• Niveaux: Bronze → Argent → Or → Platine
• 1 MAD = 1 point, 1000 points = 50 MAD de réduction
• Segmentation automatique: nouveau, VIP, dormeur, B2B, promo_hunter

Synchronisation Temps Réel

• WebSockets base44.entities.X.subscribe()
• Live ticker commandes dans Dashboard
• NotificationCenter avec badge unread dynamique
• useProductsSync hook pour cohérence catalogue

Emails & Automatisation

• Confirmation commande + facture PDF automatique
• Emails de statut à chaque étape du workflow
• Emails privés sécurisés (token unique, expiration, limite vues)
• Newsletter avec double opt-in
• Rapport hebdomadaire automatique (automation scheduled)

AdminAccessGate

• Page de garde avant /admin: code d'accès vérifié via verifyAdminCode backend
• Session sessionStorage (8 heures)
• Brute-force protection: blocage 30s après 3 tentatives échouées
• Masquage du code (toggle show/hide)

Row Level Security (RLS)

Entité	Règle
Product	Lecture publique. CRUD: super_admin OU permissions.catalogue
Order	Lecture/écriture: created_by_id OU super_admin OU permissions.commandes
CartItem	Accès strict: created_by_id uniquement
Customer	Created_by_id OU super_admin OU permissions.clients
SiteSettings	Super_admin uniquement (CRUD)
PricingRule	Lecture publique. CRUD: super_admin uniquement
PrivateEmail	Super_admin uniquement

Rôles Admin

• super_admin: Accès complet à tous les modules
• manager_general: Vue globale, lecture/édition limitée
• responsable_commercial: Commandes, clients, promotions
• gestionnaire_stock: Produits, stocks, catégories
• service_client: Tickets support, commandes (lecture)
• marketing: Newsletter, analytiques (lecture)
• comptable: Commandes, factures, analytiques financières

Emails Privés Sécurisés

• Token unique aléatoire par email
• URL: /private-email/:token
• Expiration temporelle (expires_at)
• Limite de vues (max_views / view_count)
• Marquage lu après consultation

Secrets & Variables d'Environnement

• ADMIN_ACCESS_CODE: Code d'accès admin (jamais exposé en frontend)
• Utilisation Deno.env.get() exclusivement en backend
• createClientFromRequest(req) pour auth SDK dans les fonctions

Authentification Utilisateurs

• Email + mot de passe (loginViaEmailPassword)
• OAuth Google (loginWithProvider)
• Vérification email OTP (verifyOtp → setToken → redirect)
• Réinitialisation mot de passe (resetPasswordRequest + resetPassword)
• Hard redirect (window.location.href) obligatoire post-login pour reload auth state