Skip to content

Use Cases - Diagrammes UML

Ce document contient les diagrammes de sequence Mermaid pour tous les use cases de Spotted.

UC01 - Organisation - Inscription

sequenceDiagram
    actor Org as Organisation
    participant UI as Interface Web
    participant API as Backend API
    participant DB as Base de donnees
    participant Email as Service Email

    Org->>UI: Accede page inscription
    Org->>UI: Remplit formulaire (login, email, password)
    Org->>UI: Accepte CGU
    Org->>UI: Soumet formulaire
    UI->>API: POST /register
    API->>API: Valide email (format)
    API->>API: Valide mot de passe (force)
    API->>DB: Verifie login unique
    API->>DB: Verifie email unique
    API->>API: Hash mot de passe (bcrypt)
    API->>DB: Cree compte (statut: non-active)
    API->>Email: Envoie email confirmation
    Email-->>Org: Email avec lien validation
    API->>UI: Retour succes
    UI->>Org: Message "Verifiez votre email"

    Note over Org,Email: L'organisation clique sur le lien

    Org->>API: GET /activate?token=xyz
    API->>DB: Verifie token
    API->>DB: Active compte
    API->>UI: Redirection dashboard
    UI->>Org: Compte active OK

UC02 - ORGANISATION - Configuration du profil

sequenceDiagram
    actor Org as Organisation
    participant UI as Interface Web
    participant API as Backend API
    participant Storage as Stockage S3
    participant DB as Base de donnees

    Org->>UI: Accede "Mon profil"
    UI->>API: GET /profile
    API->>DB: Recupere donnees profil
    DB->>API: Donnees profil
    API->>UI: Affiche profil

    Org->>UI: Modifie informations
    Org->>UI: Upload logo
    UI->>Storage: Upload fichier
    Storage->>UI: URL logo

    Org->>UI: Choisit couleur (color picker)
    Org->>UI: Saisit coordonnees bancaires (IBAN, BIC)
    Org->>UI: Sauvegarde

    UI->>API: PUT /profile
    API->>API: Valide IBAN (format + checksum)
    API->>API: Valide BIC
    API->>API: Chiffre coordonnees bancaires
    API->>DB: Met a jour profil
    DB->>API: Confirmation
    API->>UI: Succes
    UI->>Org: Message confirmation OK

UC03 - ORGANISATION - Creation d'un evenement/galerie

sequenceDiagram
    actor Org as Organisation
    participant UI as Interface Web
    participant API as Backend API
    participant DB as Base de donnees
    participant QR as Generateur QR Code

    Org->>UI: Clique "Creer un evenement"
    UI->>Org: Affiche formulaire

    Org->>UI: Remplit formulaire
    Note over Org,UI: Nom, date, lieu, description, - type, visibilite

    alt Upload photo de couverture
        Org->>UI: Upload photo
        UI->>API: Upload fichier
        API->>DB: Stocke photo
    end

    alt Protege par mot de passe
        Org->>UI: Definit mot de passe
    end

    Org->>UI: Sauvegarde
    UI->>API: POST /events
    API->>API: Genere ID unique (slug)
    API->>DB: Cree evenement
    API->>QR: Genere QR code (URL galerie)
    QR->>API: QR code (PNG, SVG)

    alt Photo de couverture non fournie
        API->>API: Genere photo par defaut
    end

    API->>DB: Sauvegarde evenement complet
    DB->>API: Confirmation
    API->>UI: Retour evenement cree
    UI->>Org: Redirection page evenement

    Note over Org,UI: URL: spotted.com/events/[slug] - Outils marketing generes automatiquement

UC04 - ORGANISATION - Generation d'acces photographe

sequenceDiagram
    actor Org as Organisation
    participant UI as Interface Web
    participant API as Backend API
    participant DB as Base de donnees
    participant Email as Service Email

    Org->>UI: Accede evenement
    Org->>UI: Clique "Inviter un photographe"
    UI->>Org: Formulaire invitation

    Org->>UI: Saisit email photographe
    Org->>UI: Saisit nom photographe (optionnel)
    Org->>UI: Clique "Envoyer invitation"

    UI->>API: POST /events/{id}/photographers
    API->>API: Genere login unique (spotted-evt-abc123)
    API->>API: Genere mot de passe aleatoire (12 chars)
    API->>API: Hash mot de passe
    API->>DB: Cree acces photographe
    DB->>API: Confirmation

    API->>Email: Prepare email invitation
    Note over Email: Template avec login/mdp - + lien direct upload
    Email-->>Org: Email envoye au photographe

    API->>UI: Succes
    UI->>Org: Confirmation "Invitation envoyee OK"
    UI->>Org: Acces visible dans liste (statut: En attente)

UC05 - ORGANISATION - Gestion des acces photographe

sequenceDiagram
    actor Org as Organisation
    participant UI as Interface Web
    participant API as Backend API
    participant DB as Base de donnees
    participant Email as Service Email

    Org->>UI: Accede gestion acces
    UI->>API: GET /events/{id}/photographers
    API->>DB: Recupere liste acces
    DB->>API: Liste acces + stats
    API->>UI: Affiche tableau acces

    alt Modification acces
        Org->>UI: Clique "Modifier"
        Org->>UI: Change email ou regenere identifiants
        UI->>API: PUT /photographers/{id}
        API->>DB: Met a jour acces
        API->>Email: Renvoie email si demande
        API->>UI: Confirmation
    end

    alt Suppression acces
        Org->>UI: Clique "Supprimer"
        UI->>Org: Modal confirmation
        Org->>UI: Choisit: Garder photos / Supprimer photos
        Org->>UI: Confirme
        UI->>API: DELETE /photographers/{id}

        alt Supprimer photos
            API->>DB: Supprime photos associees
        end

        API->>DB: Supprime acces
        API->>UI: Confirmation
        UI->>Org: Acces revoque OK

        Note over API,DB: Le photographe ne peut plus - se connecter immediatement
    end

UC06 - PHOTOGRAPHE - Reception invitation et premiere connexion

sequenceDiagram
    actor Photo as Photographe
    participant Email as Email
    participant UI as Page Upload
    participant API as Backend API
    participant DB as Base de donnees

    Email-->>Photo: Recoit email invitation
    Note over Email,Photo: Email contient: - - Login/mot de passe - - Lien direct upload

    Photo->>UI: Clique sur lien
    UI->>API: GET /upload/{token}
    API->>API: Verifie token
    API->>API: Auto-authentification
    API->>DB: Recupere infos evenement
    DB->>API: Infos evenement
    API->>UI: Session creee

    alt Premiere connexion
        UI->>Photo: Invite a completer mini-profil
        Photo->>UI: Saisit nom, pseudonyme, bio (optionnel)
        UI->>API: POST /photographers/profile
        API->>DB: Sauvegarde profil
    end

    UI->>Photo: Affiche interface upload
    Note over UI,Photo: Message de bienvenue: - "Vous contribuez a [Nom evenement]"

UC07 - PHOTOGRAPHE - Upload de photos

sequenceDiagram
    actor Photo as Photographe
    participant UI as Page Upload
    participant API as Backend API
    participant Storage as S3 Staging
    participant Queue as File d'attente
    participant Worker as Background Worker
    participant S3Prod as S3 Production
    participant DB as Base de donnees

    Photo->>UI: Selectionne fichiers (drag & drop)
    UI->>UI: Valide formats (JPG, PNG, RAW)
    UI->>UI: Valide taille (<50MB par fichier)

    loop Pour chaque fichier
        UI->>Storage: Upload fichier
        Storage->>UI: Confirmation + URL temporaire
        UI->>Photo: Barre progression
        UI->>API: POST /photos/uploaded
        API->>DB: Enregistre metadonnees (statut: processing)
        API->>Queue: Ajoute job processing
    end

    UI->>Photo: Tous fichiers uploades OK
    Note over Photo,UI: Le photographe peut fermer - la page pendant le processing

    par Processing asynchrone (background)
        Queue->>Worker: Job de processing
        Worker->>Storage: Recupere fichier
        Worker->>Worker: Extraction EXIF (date, heure, GPS)
        Worker->>Worker: Generation thumbnails (6 resolutions)
        Worker->>Worker: Optimisation (compression, WebP)
        Worker->>Worker: Application watermark
        Worker->>Worker: Calcul hash MD5 (detection doublons)

        alt Doublon detecte
            Worker->>DB: Marque comme doublon
        else Nouveau fichier
            Worker->>S3Prod: Upload vers stockage definitif
            Worker->>DB: Met a jour statut (published)
            Worker->>DB: Indexation pour recherche
        end

        Worker->>Queue: Job termine
    end

    opt Notification (optionnel)
        Worker->>Email: Email "Vos photos sont en ligne"
        Email-->>Photo: Notification
    end

UC08 - PHOTOGRAPHE - Configuration du watermark

sequenceDiagram
    actor Photo as Photographe
    participant UI as Page Upload
    participant API as Backend API
    participant Preview as Generateur Preview
    participant DB as Base de donnees

    Photo->>UI: Clique "Configurer watermark"
    UI->>Photo: Affiche options

    alt Option 1: Watermark par defaut
        Photo->>UI: Selectionne "Par defaut"
        UI->>Preview: Genere preview (logo Spotted)
    end

    alt Option 2: Texte personnalise
        Photo->>UI: Selectionne "Personnalise"
        Photo->>UI: Saisit texte (max 30 chars)
        UI->>UI: Valide longueur
        UI->>Preview: Genere preview en temps reel
        Preview->>UI: Image preview
        UI->>Photo: Affiche preview
    end

    Photo->>UI: Sauvegarde
    UI->>API: PUT /photographers/watermark
    API->>DB: Sauvegarde config watermark
    DB->>API: Confirmation
    API->>UI: Succes

    alt Application retroactive
        Photo->>UI: Coche "Appliquer aux photos existantes"
        UI->>Photo: Confirmation requise
        Photo->>UI: Confirme
        UI->>API: POST /photographers/regenerate-watermarks
        API->>Queue: Jobs de regeneration
        Queue->>Worker: Traite chaque photo
        Worker->>DB: Met a jour photos
    end

    UI->>Photo: Configuration sauvegardee OK

UC09 - PHOTOGRAPHE - Ajout descriptions et tags

sequenceDiagram
    actor Photo as Photographe
    participant UI as Page Upload
    participant API as Backend API
    participant Search as Indexation
    participant DB as Base de donnees

    alt Description globale (pendant upload)
        Photo->>UI: Saisit description globale
        Note over Photo,UI: "Arrivee marathon - 9h a 10h"
        UI->>API: POST /photos (batch)
        API->>DB: Applique description a toutes
    end

    alt Description individuelle (apres upload)
        Photo->>UI: Clique sur photo
        UI->>Photo: Modal photo + formulaire
        Photo->>UI: Saisit description (max 500 chars)
        Photo->>UI: Ajoute tags (autocompletion)

        UI->>API: GET /tags/suggestions
        API->>DB: Recupere tags populaires
        DB->>API: Liste tags
        API->>UI: Suggestions tags

        Photo->>UI: Selectionne/cree tags (max 10)
        Photo->>UI: Sauvegarde

        UI->>API: PUT /photos/{id}
        API->>DB: Met a jour description + tags
        API->>Search: Reindexe photo
        Search->>Search: Update index ElasticSearch
        API->>UI: Confirmation
        UI->>Photo: Sauvegarde OK
    end

    alt Modification en masse
        Photo->>UI: Selectionne plusieurs photos
        Photo->>UI: Clique "Modifier en masse"
        UI->>Photo: Formulaire batch
        Photo->>UI: Saisit tags communs
        UI->>API: PUT /photos/batch
        API->>DB: Met a jour selection
        API->>Search: Reindexe toutes
    end

UC10 - PHOTOGRAPHE - Acces FTP

sequenceDiagram
    actor Photo as Photographe
    participant UI as Page Upload
    participant API as Backend API
    participant Admin as Admin Spotted
    participant FTP as Serveur FTP
    participant Email as Service Email
    participant Worker as Background Worker

    Note over Photo,Email: V1: Acces FTP sur demande manuelle

    Photo->>UI: Clique "Demander acces FTP"
    UI->>API: POST /photographers/request-ftp
    API->>Admin: Notification demande FTP

    Admin->>FTP: Cree compte FTP manuellement
    FTP->>Admin: Credentials (login, password)
    Admin->>Email: Envoie credentials au photographe
    Email-->>Photo: Email avec infos FTP

    Note over Photo,FTP: Photographe utilise client FTP - (FileZilla, Cyberduck, etc.)

    Photo->>FTP: Connexion SFTP
    FTP->>FTP: Authentification
    FTP->>Photo: Acces accorde (dossier chroot)

    Photo->>FTP: Upload fichiers
    FTP->>FTP: Detection nouveaux fichiers
    FTP->>Worker: Declenche processing

    Note over Worker: Meme workflow que upload web: - - Extraction EXIF - - Thumbnails - - Watermark - - Indexation

    Worker->>DB: Photos publiees

    rect rgb(240, 240, 255)
        Note over Photo,Worker: V2: Acces FTP automatique - (cree avec login/mdp photographe)
    end

UC11 - CLIENT - Navigation publique des evenements

sequenceDiagram
    actor Client as Visiteur
    participant UI as Page Accueil
    participant API as Backend API
    participant DB as Base de donnees
    participant SEO as Meta Tags

    Client->>UI: Accede spotted.com
    UI->>API: GET /events?status=all
    API->>DB: Recupere evenements
    Note over API,DB: Tri: EN COURS > 7 derniers jours > Tous
    DB->>API: Liste evenements + metadonnees
    API->>UI: Evenements + stats

    UI->>Client: Affiche page hierarchisee
    Note over UI,Client: 1. EN COURS (badge) - 2. Recents (7j) - 3. Archive

    alt Filtrage
        Client->>UI: Applique filtres (type, date, lieu)
        UI->>API: GET /events?type=sport&date=...
        API->>DB: Requete filtree
        DB->>API: Resultats
        API->>UI: Evenements filtres
    end

    alt Recherche
        Client->>UI: Saisit recherche (nom evenement)
        UI->>API: GET /events/search?q=marathon
        API->>DB: Fulltext search
        DB->>API: Resultats
        API->>UI: Evenements trouves
    end

    Client->>UI: Clique sur evenement
    UI->>API: GET /events/{slug}
    API->>DB: Recupere details evenement

    alt Evenement protege
        API->>UI: Requiert mot de passe
        UI->>Client: Prompt mot de passe
        Client->>UI: Saisit mot de passe
        UI->>API: POST /events/{slug}/unlock
        API->>API: Verifie mot de passe
    end

    API->>SEO: Genere OG tags (OpenGraph)
    API->>UI: Donnees evenement + galerie
    UI->>Client: Affiche galerie photos

UC12 - CLIENT - Visualisation galerie et recherche

sequenceDiagram
    actor Client as Visiteur
    participant UI as Galerie
    participant API as Backend API
    participant CDN as CloudFront CDN
    participant Search as ElasticSearch
    participant DB as Base de donnees

    Client->>UI: Accede galerie evenement
    UI->>API: GET /events/{slug}/photos?page=1
    API->>DB: Recupere photos (pagination)
    DB->>API: Liste photos (20 par page)
    API->>UI: Photos + metadonnees

    UI->>CDN: Charge thumbnails
    CDN->>UI: Images optimisees (WebP)
    UI->>Client: Affiche grille photos (lazy loading)

    alt Recherche temporelle
        Client->>UI: Saisit heure (10:30)
        UI->>API: GET /photos?event={id}&time=10:30&range=15
        API->>Search: Recherche EXIF timestamp ±15min
        Search->>API: Photos matchees
        API->>UI: Photos filtrees
        UI->>Client: Affiche resultats (~200 photos)
    end

    alt Recherche par tags
        Client->>UI: Clique tag ou saisit tag
        UI->>API: GET /photos?tags=arrivee,finisher
        API->>Search: Recherche tags
        Search->>API: Photos matchees
        API->>UI: Photos filtrees
    end

    alt Recherche par zone
        Client->>UI: Selectionne zone "Arrivee"
        UI->>API: GET /photos?zone=arrivee
        API->>DB: Filtre par zone
        DB->>API: Photos zone
        API->>UI: Photos filtrees
    end

    Client->>UI: Clique sur photo
    UI->>Client: Ouvre lightbox
    UI->>CDN: Charge resolution moyenne
    CDN->>UI: Image 1200x1200px

    alt Navigation lightbox
        Client->>UI: Touche ← ou →
        UI->>CDN: Preload images adjacentes
        UI->>Client: Affiche photo suivante/precedente
    end

    alt Zoom
        Client->>UI: Double-clic ou pinch
        UI->>CDN: Charge haute resolution (watermarked)
        CDN->>UI: Image 2000x2000px
        UI->>Client: Affiche zoomee
    end

UC13 - CLIENT - Achat de photos - Selection produit

sequenceDiagram
    actor Client as Client
    participant UI as Interface
    participant Modal as Modal Achat
    participant API as Backend API
    participant DB as Base de donnees

    Client->>UI: Clique "Acheter" sur photo
    UI->>Modal: Ouvre modal
    Modal->>API: GET /products
    API->>DB: Recupere liste produits + prix
    DB->>API: Produits disponibles
    API->>Modal: Produits + prix TTC

    Modal->>Client: Affiche options
    Note over Modal,Client: - Photo numerique (10€) - - Impression 10x15 (15€) - - Agrandissements (25-80€)

    alt Photo numerique
        Client->>Modal: Selectionne "Numerique"
        Modal->>Modal: Prix = 10€
    end

    alt Impression
        Client->>Modal: Selectionne "Impression 10x15"
        Modal->>Client: Affiche options
        Client->>Modal: Choisit papier (Mat/Brillant)
        Client->>Modal: Coche "Avec cadre" (+5€)
        Modal->>Modal: Calcule prix dynamique
        Modal->>Client: Prix = 20€
        Modal->>Modal: Genere mockup visuel
    end

    Client->>Modal: Ajuste quantite (1-99)
    Modal->>Modal: Prix total = Prix unitaire × Quantite
    Modal->>Client: Affiche prix total

    alt Ajout panier
        Client->>Modal: Clique "Ajouter au panier"
        Modal->>API: POST /cart/items
        API->>DB: Ajoute article au panier (localStorage ou DB)
        API->>Modal: Confirmation
        Modal->>Client: Toast "Ajoute au panier OK"
        Modal->>UI: Ferme modal
        UI->>UI: Badge panier +1
    end

    alt Achat direct
        Client->>Modal: Clique "Acheter maintenant"
        Modal->>API: POST /cart/items
        API->>DB: Cree panier temporaire
        API->>Modal: Panier cree
        Modal->>UI: Redirection checkout
    end

UC14 - CLIENT - Gestion du panier

sequenceDiagram
    actor Client as Client
    participant UI as Interface
    participant Panier as Page Panier
    participant API as Backend API
    participant DB as Base de donnees

    Client->>UI: Clique icone panier (badge: 3 articles)
    UI->>Panier: Ouvre panier

    Panier->>API: GET /cart
    API->>DB: Recupere articles panier
    DB->>API: Liste articles + details
    API->>Panier: Articles + prix

    Panier->>Client: Affiche recapitulatif
    Note over Panier,Client: - Liste articles - - Sous-total - - Frais de port - - Total TTC

    alt Modification quantite
        Client->>Panier: Change quantite (boutons +/-)
        Panier->>API: PUT /cart/items/{id}
        API->>DB: Met a jour quantite
        API->>API: Recalcule sous-total
        API->>API: Recalcule frais de port
        Note over API: 1 impression: 5€ - 2-5: 6€ - 6-10: 8€
        API->>Panier: Nouveaux totaux
        Panier->>Client: Affiche totaux mis a jour
    end

    alt Suppression article
        Client->>Panier: Clique icone poubelle
        Panier->>API: DELETE /cart/items/{id}
        API->>DB: Supprime article
        API->>API: Recalcule totaux
        API->>Panier: Totaux mis a jour
        Panier->>Client: Article retire + totaux
    end

    alt Vider panier
        Client->>Panier: Clique "Vider le panier"
        Panier->>Client: Confirmation requise
        Client->>Panier: Confirme
        Panier->>API: DELETE /cart
        API->>DB: Vide panier
        API->>Panier: Panier vide
        Panier->>Client: Message "Panier vide"
    end

    alt Valider commande
        Client->>Panier: Clique "Valider ma commande"
        Panier->>UI: Redirection checkout
    end

UC15 - CLIENT - Validation commande (Checkout)

sequenceDiagram
    actor Client as Client
    participant UI as Checkout
    participant API as Backend API
    participant DB as Base de donnees
    participant Google as Google Places API

    Client->>UI: Accede checkout
    UI->>API: GET /cart
    API->>DB: Recupere panier
    DB->>API: Articles + totaux
    API->>UI: Donnees panier
    UI->>Client: Affiche etape 1/4

    rect rgb(230, 240, 255)
        Note over Client,UI: Etape 1: Informations client
        Client->>UI: Saisit email
        UI->>UI: Valide email (format)
        opt Creer un compte (V2)
            Client->>UI: Coche "Creer un compte"
            UI->>Client: Demande mot de passe
        end
    end

    rect rgb(240, 250, 240)
        Note over Client,Google: Etape 2: Adresse livraison (si impressions)

        alt Panier contient impressions
            Client->>UI: Clique "Suivant"
            UI->>Client: Affiche formulaire adresse
            Client->>UI: Commence a saisir adresse
            UI->>Google: Autocomplete adresse
            Google->>UI: Suggestions
            UI->>Client: Affiche suggestions
            Client->>UI: Selectionne adresse
            Client->>UI: Complete (telephone)
        else Uniquement photos numeriques
            UI->>UI: Skip etape 2
        end
    end

    rect rgb(255, 250, 240)
        Note over Client,UI: Etape 3: Adresse facturation
        Client->>UI: Coche "Identique a livraison"
        UI->>UI: Copie adresse

        alt Adresse differente
            Client->>UI: Decoche
            UI->>Client: Affiche formulaire facturation
            Client->>UI: Saisit adresse facturation
        end
    end

    rect rgb(250, 240, 255)
        Note over Client,API: Etape 4: Recapitulatif
        UI->>Client: Affiche recapitulatif complet
        Note over UI,Client: - Articles - - Adresses - - Totaux - - CGU

        Client->>UI: Coche "J'accepte les CGU"
        Client->>UI: Coche "Politique de confidentialite"
        UI->>UI: Active bouton "Proceder au paiement"

        Client->>UI: Clique "Proceder au paiement"
        UI->>API: POST /orders/create
        API->>DB: Cree commande (statut: pending)
        DB->>API: Order ID
        API->>UI: Redirection Stripe
    end

UC16 - CLIENT - Paiement

sequenceDiagram
    actor Client as Client
    participant UI as Interface Spotted
    participant API as Backend API
    participant Stripe as Stripe Checkout
    participant Bank as Banque (3DS)
    participant Webhook as Stripe Webhook
    participant DB as Base de donnees
    participant Email as Service Email

    Client->>UI: Clique "Proceder au paiement"
    UI->>API: POST /checkout/session
    API->>DB: Recupere commande
    API->>Stripe: Cree session Stripe
    Note over API,Stripe: order_id, montant, - articles, customer_email
    Stripe->>API: Session ID + URL
    API->>UI: Redirect URL
    UI->>Stripe: Redirection client

    Stripe->>Client: Page paiement Stripe
    Client->>Stripe: Saisit infos carte bancaire
    Stripe->>Stripe: Valide carte (Luhn, CVV)

    alt 3D Secure requis
        Stripe->>Bank: Requete 3DS
        Bank->>Client: Challenge 3DS (SMS, app banque)
        Client->>Bank: Valide 3DS
        Bank->>Stripe: 3DS valide
    end

    Stripe->>Stripe: Traite paiement

    alt Paiement reussi
        Stripe->>Webhook: Event payment_intent.succeeded
        Webhook->>API: POST /webhooks/stripe
        API->>API: Verifie signature webhook
        API->>DB: Met a jour commande (statut: paid)
        API->>DB: Calcule commissions (30% organisation)
        API->>Email: Prepare email confirmation
        Email-->>Client: Email confirmation + facture PDF

        Stripe->>UI: Redirection success_url
        UI->>API: GET /orders/{id}/confirmation
        API->>DB: Recupere commande
        DB->>API: Details commande
        API->>UI: Page confirmation
        UI->>Client: "Merci pour votre commande! "

        alt Photos numeriques
            UI->>Client: Liens telechargement immediats
        end
    end

    alt Paiement echoue
        Stripe->>UI: Redirection cancel_url
        UI->>Client: Page erreur
        Note over UI,Client: Message explicite: - - Carte refusee - - Fonds insuffisants - - 3DS echoue
        UI->>Client: Bouton "Reessayer"

        API->>DB: Commande (statut: failed)
        opt Email optionnel
            Email-->>Client: "Commande en attente de paiement"
        end
    end

UC17 - CLIENT - Confirmation et livraison

sequenceDiagram
    actor Client as Client
    participant UI as Page Confirmation
    participant API as Backend API
    participant DB as Base de donnees
    participant Email as Service Email
    participant PDF as Generateur PDF
    participant Print as Print-on-Demand
    participant CDN as Storage S3

    Note over Client,CDN: Immediatement apres paiement reussi

    UI->>API: GET /orders/{id}
    API->>DB: Recupere commande complete
    DB->>API: Commande + articles
    API->>UI: Details commande

    UI->>Client: Affiche confirmation
    Note over UI,Client: - N° commande - - Recapitulatif - - Montant paye

    par Generation facture PDF
        API->>PDF: Genere facture
        Note over PDF: - Infos vendeur (Spotted) - - Infos client - - Detail articles - - TVA, Total TTC
        PDF->>CDN: Upload facture PDF
        CDN->>API: URL facture
        API->>DB: Stocke URL facture
    end

    par Email confirmation
        API->>Email: Prepare email
        Email->>PDF: Recupere facture PDF
        Email->>Email: Template email + piece jointe
        Email-->>Client: Email confirmation
        Note over Email,Client: - N° commande - - Recapitulatif - - Facture PDF - - Liens telechargement si numerique - - Delai livraison si impression
    end

    alt Photos numeriques
        UI->>API: GET /orders/{id}/downloads
        API->>API: Genere liens signes (JWT)
        Note over API: Validite: 30 jours - Telechargements: illimites
        API->>UI: Liens telechargement
        UI->>Client: Boutons "Telecharger" (par photo)

        Client->>UI: Clique "Telecharger"
        UI->>API: GET /download/{token}
        API->>API: Verifie token (validite)
        API->>CDN: Recupere photo HD (sans watermark)
        CDN->>API: Photo
        API->>Client: Telechargement fichier
    end

    alt Impressions physiques
        API->>Print: POST /orders (API Print-on-Demand)
        Note over API,Print: - Photos HD - - Type produit - - Quantite - - Adresse livraison
        Print->>Print: Fabrique produits
        Print->>Print: Emballe et expedie
        Print->>API: Numero de tracking
        API->>DB: Stocke tracking
        API->>DB: Met a jour statut (shipped)

        API->>Email: Email expedition
        Email-->>Client: "Votre commande a ete expediee "
        Note over Email,Client: - N° tracking - - Lien transporteur - - Delai estime

        Note over Print,Client: 5-7 jours ouvres

        Print->>Client: Livraison colis
        Print->>API: Webhook delivery_confirmed
        API->>DB: Met a jour statut (delivered)
    end

UC18 - ORGANISATION - Suivi ventes et commissions

sequenceDiagram
    actor Org as Organisation
    participant UI as Dashboard
    participant API as Backend API
    participant DB as Base de donnees
    participant Analytics as Service Analytics
    participant Email as Service Email
    participant Bank as Service Paiement

    Org->>UI: Accede dashboard
    UI->>API: GET /dashboard/stats
    API->>DB: Recupere donnees agregees
    Note over API,DB: - Ventes mois en cours - - Commission mois - - Photos vendues - - Evenements actifs
    DB->>API: KPIs
    API->>Analytics: Recupere metriques avancees
    Analytics->>API: Graphiques (12 mois)
    API->>UI: Donnees completes
    UI->>Org: Affiche dashboard

    rect rgb(240, 250, 255)
        Note over Org,UI: Vue d'ensemble
        UI->>Org: Cards KPIs
        UI->>Org: Graphiques (ventes, produits, top evenements)
    end

    Org->>UI: Clique sur evenement
    UI->>API: GET /events/{id}/stats
    API->>DB: Stats detaillees evenement
    DB->>API: Ventes, commission, top photos
    API->>UI: Stats evenement
    UI->>Org: Affiche details evenement

    alt Export donnees
        Org->>UI: Clique "Exporter"
        UI->>API: GET /dashboard/export?format=csv
        API->>DB: Recupere donnees brutes
        DB->>API: Donnees
        API->>API: Genere CSV/Excel
        API->>Org: Telechargement fichier
    end

    rect rgb(255, 250, 240)
        Note over Org,Bank: Gestion commissions

        Note over API,DB: Le 1er de chaque mois: - Calcul automatique

        API->>DB: Calcule commissions mois precedent
        DB->>API: Total commissions par organisation
        API->>DB: Genere rapport commission (PDF)
        API->>Email: Notification commissions pretes
        Email-->>Org: "Votre commission: 1250€"

        Org->>UI: Accede "Paiements"
        UI->>API: GET /payments/pending
        API->>DB: Recupere commissions en attente
        DB->>API: Liste paiements
        API->>UI: Affiche commissions

        Note over Bank,Org: Le 15 du mois: - Virement automatique

        alt Commission >= 50€
            Bank->>Bank: Virement SEPA
            Bank->>Org: Virement commission
            Bank->>API: Webhook payment_sent
            API->>DB: Met a jour statut (paid)
            API->>Email: Confirmation virement
            Email-->>Org: "Commission versee OK"
        else Commission < 50€
            API->>DB: Report mois suivant
            API->>Email: Email report
            Email-->>Org: "Commission reportee (seuil 50€)"
        end
    end

    rect rgb(250, 255, 240)
        Note over Org,Email: Attestation fiscale annuelle

        Note over API,DB: 1er janvier: - Generation automatique

        API->>DB: Recupere commissions annee N-1
        DB->>API: Total + detail mensuel
        API->>PDF: Genere attestation fiscale
        PDF->>CDN: Upload PDF
        API->>Email: Notification attestation dispo
        Email-->>Org: "Attestation fiscale 2024 disponible"

        Org->>UI: Accede "Attestation fiscale"
        UI->>API: GET /attestations/2024
        API->>CDN: Recupere PDF
        CDN->>Org: Telechargement attestation
    end

UC19 - ORGANISATION - Outils marketing

sequenceDiagram
    actor Org as Organisation
    participant UI as Dashboard
    participant API as Backend API
    participant QR as Generateur QR
    participant PDF as Generateur PDF
    participant Template as Template Engine
    participant DB as Base de donnees
    participant Storage as S3

    Org->>UI: Accede evenement
    Org->>UI: Clique "Outils marketing"
    UI->>Org: Affiche menu outils

    rect rgb(240, 255, 240)
        Note over Org,Storage: Generation QR Code

        Org->>UI: Clique "Generer QR Code"
        UI->>Org: Options QR code
        Note over UI,Org: - Destination (galerie/accueil) - - Logo au centre - - Couleur

        Org->>UI: Configure et valide
        UI->>API: POST /events/{id}/qrcode
        API->>DB: Recupere URL galerie
        DB->>API: URL (spotted.com/events/{slug})
        API->>QR: Genere QR code
        Note over QR: Formats: PNG, SVG
        QR->>Storage: Upload QR codes
        Storage->>API: URLs
        API->>UI: QR codes generes
        UI->>Org: Telechargement (PNG 2000x2000, SVG, PDF)
    end

    rect rgb(255, 245, 240)
        Note over Org,Storage: Generation affiches PDF

        Org->>UI: Clique "Generer affiche"
        UI->>Org: Choix template
        Note over UI,Org: - Affiche evenement - - Affiche "Photos disponibles" - - Formats: A4, A3, A2

        Org->>UI: Selectionne template + options
        Org->>UI: Personnalise message (max 100 chars)
        UI->>API: POST /events/{id}/poster

        API->>DB: Recupere donnees evenement
        API->>QR: Recupere QR code
        API->>Template: Charge template
        Template->>Template: Remplace variables
        Note over Template: - Nom evenement - - Date/lieu - - Logo organisation - - QR code - - Message personnalise

        Template->>PDF: Genere PDF haute resolution
        PDF->>Storage: Upload PDF
        Storage->>API: URL PDF
        API->>UI: PDF genere
        UI->>Org: Telechargement PDF
    end

    rect rgb(245, 245, 255)
        Note over Org,Template: Templates emails

        Org->>UI: Clique "Templates emails"
        UI->>Org: Affiche templates disponibles
        Note over UI,Org: - Email pre-evenement - - Email post-evenement - - Signature email

        Org->>UI: Selectionne template
        UI->>API: GET /templates/{type}
        API->>Template: Charge template
        API->>DB: Recupere donnees evenement
        Template->>Template: Personnalise contenu
        Note over Template: - Nom evenement - - Date - - QR code - - Lien galerie

        Template->>API: HTML + Texte brut
        API->>UI: Template personnalise
        UI->>Org: Preview + code HTML copiable

        Org->>UI: Copie code HTML
        Note over Org,UI: Pour integration dans - Mailchimp, Brevo, etc.
    end

    Note over Org,UI: Historique des outils generes - disponible pour re-telechargement

UC20 - Workflow global de bout en bout

sequenceDiagram
    actor Org as Organisation
    actor Photo as Photographe
    actor Client as Client
    participant Platform as Plateforme Spotted
    participant Print as Print-on-Demand
    participant Bank as Service Paiement

    rect rgb(230, 240, 255)
        Note over Org,Platform: Phase 1: Setup
        Org->>Platform: Inscription (gratuit)
        Org->>Platform: Cree evenement
        Org->>Platform: Genere acces photographe
        Platform-->>Photo: Email invitation (login/mdp)
    end

    rect rgb(240, 255, 240)
        Note over Photo,Platform: Phase 2: Contribution
        Photo->>Platform: Connexion page upload
        Photo->>Platform: Upload photos (web ou FTP)
        Platform->>Platform: Processing asynchrone
        Note over Platform: - Thumbnails - - Watermarks - - Indexation
        Platform->>Platform: Publication photos
    end

    rect rgb(255, 250, 240)
        Note over Client,Platform: Phase 3: Decouverte
        Client->>Platform: Decouvre via reseaux sociaux
        alt Ou
            Client->>Platform: Navigation publique evenements
        end
        Client->>Platform: Recherche ses photos (temps/tags)
        Platform->>Client: Affiche photos filtrees
    end

    rect rgb(255, 245, 255)
        Note over Client,Bank: Phase 4: Achat
        Client->>Platform: Selectionne photo + produit
        Client->>Platform: Ajoute au panier
        Client->>Platform: Checkout (adresse, email)
        Client->>Bank: Paiement Stripe (CB, 3DS)
        Bank->>Platform: Confirmation paiement
        Platform->>Client: Email confirmation + facture
    end

    rect rgb(245, 255, 255)
        Note over Platform,Client: Phase 5: Livraison

        alt Photos numeriques
            Platform->>Client: Telechargement immediat
        end

        alt Impressions
            Platform->>Print: Commande production
            Print->>Print: Fabrication
            Print->>Client: Expedition (5-7j)
            Print->>Platform: Tracking
            Platform->>Client: Email tracking
        end
    end

    rect rgb(255, 255, 240)
        Note over Platform,Org: Phase 6: Commissions
        Platform->>Platform: Calcule commission (30%)
        Note over Platform: Le 1er du mois
        Platform->>Org: Notification commission
        Note over Platform: Le 15 du mois
        Bank->>Org: Virement commission (si ≥50€)
        Platform->>Org: Email confirmation
    end

    Note over Org,Client: Cycle complet termine OK - Organisation genere revenus passifs - Photographe a visibilite/reconnaissance - Client a ses souvenirs

Legende des diagrammes

Symboles utilises

  • actor: Utilisateur humain (Organisation, Photographe, Client)
  • participant: Systeme ou service (API, Base de donnees, Email, etc.)
  • ->>: Appel synchrone
  • -->>: Reponse asynchrone (email, notification)
  • rect: Regroupement logique (phase, etape)
  • alt/else: Condition (si/sinon)
  • opt: Optionnel
  • par: Parallele (taches simultanees)
  • loop: Boucle

Codes couleur des rect

  • Bleu clair (rgb(230, 240, 255)): Setup/Configuration
  • Vert clair (rgb(240, 255, 240)): Actions photographe
  • Orange clair (rgb(255, 250, 240)): Actions client
  • Rose clair (rgb(255, 245, 255)): Paiement
  • Cyan clair (rgb(245, 255, 255)): Livraison
  • Jaune clair (rgb(255, 255, 240)): Commissions

Note: Ces diagrammes peuvent etre affiches dans MkDocs avec le plugin mermaid2 installe.