Crealcs Development DokuWiki

Modifiez cette page et cliquez sur « Enregistrer ». Voyez le guide de mise en page pour une aide à propos du formatage. Veuillez ne modifier cette page que si vous pouvez l'améliorer. Si vous souhaitez faire des tests, faites vos premiers pas dans le bac à sable.

====== Phase A — MVP Investisseur ======

===== Changement de stratégie =====

À partir de maintenant, le programme entre dans une nouvelle phase :

<code>
PHASE A

MVP INVESTISSEUR
</code>

L'objectif n'est plus d'ajouter de nouveaux domaines métier.

L'objectif devient :

<code>
Rendre démontrable

Tester les parcours

Valider l'UX

Obtenir un MVP investissable

Préparer les UAT
</code>

----

====== État actuel ======

===== Backend =====

Le backend Enterprise est considéré comme :

<code>
Fonctionnellement complet
pour le MVP
</code>

Les domaines disponibles sont :

<code>
CRM

Properties

Reservations

Portfolio

Distribution

Marketing

Loyalty

Referral

Analytics

Executive

Developer Platform

Marketplace
</code>

----

====== Nouvelle Roadmap ======

===== Sprint 11 =====

UX Foundation & Design System

<code>
Design System

Navigation

Layouts

Dashboard Framework

Data Tables

Forms

Permissions UX

Responsive Foundation
</code>

----

===== Sprint 12 =====

Property & Reservation MVP

<code>
Property UI

Availability Calendar

Pricing UI

Reservation UI

Guest UI

Check-In

Check-Out
</code>

----

===== Sprint 13 =====

CRM & Operations MVP

<code>
Customer UI

Communications

Notes

Housekeeping

Maintenance

Guest Requests

Operations Dashboard
</code>

----

===== Sprint 14 =====

Analytics & Executive MVP

<code>
Property Dashboard

Reservation Dashboard

CRM Dashboard

Executive Dashboard

KPI Center

Reporting UI
</code>

----

===== Sprint 15 =====

Validation & Investor Demo

<code>
UAT

Bug Fixes

Demo Data

Investor Scenario

Pilot Validation

Release Candidate
</code>

----

====== Critères MVP ======

Le MVP est considéré terminé lorsque l'utilisateur peut :

<code>
Créer une propriété

Ajouter des disponibilités

Configurer des tarifs

Créer une réservation

Ajouter un voyageur

Encaisser un paiement

Effectuer un check-in

Effectuer un check-out

Consulter les KPI
</code>

sans intervention technique.

----

====== Parcours Investisseur ======

===== Démonstration officielle =====

Durée cible :

<code>
10 minutes
</code>

----

===== Scénario =====

<code>
Connexion

↓

Création propriété

↓

Ajout disponibilités

↓

Création réservation

↓

Paiement

↓

Check-In

↓

Demande voyageur

↓

Check-Out

↓

Facture

↓

Dashboard exécutif
</code>

----

====== Phase B ======

Après validation MVP :

<code>
Sprint 16
Operations & Observability

Sprint 17
Security Operations

Sprint 18
Enterprise AI Platform

Sprint 19
Scalabilité Enterprise
</code>

Le backlog Enterprise est conservé intégralement.

Aucun domaine métier précédemment conçu n'est supprimé.

----

====== Sprint 11-A.1 — UX Foundation & Design System ======

===== Objectif =====

Construire le socle UI de toute la plateforme.

Cette étape devient la référence unique pour :

<code>
CRM

Properties

Reservations

Operations

Analytics

Executive

Marketplace
</code>

afin de garantir :

<code>
Cohérence

Rapidité de développement

Qualité UX

Scalabilité Frontend

Expérience investisseur
</code>

À l'issue de cette étape :

<code>
✓ Design Tokens

✓ Component Library

✓ Layout System

✓ Navigation Framework

✓ Theme System

✓ Responsive Grid

✓ Data Tables

✓ Form Framework
</code>

----

====== Architecture Frontend cible ======

<code>
apps/web

├── app
├── pages
├── layouts
├── modules
├── shared
│   ├── ui
│   ├── forms
│   ├── tables
│   ├── charts
│   └── navigation
├── design-system
└── themes
</code>

----

====== Sprint 11-A.1-A ======

===== Design Tokens =====

----

====== Étape 1 — Structure ======

<code>
src/design-system/tokens

├── colors.ts
├── spacing.ts
├── typography.ts
├── shadows.ts
├── radius.ts
├── z-index.ts
└── index.ts
</code>

----

====== Étape 2 — Couleurs ======

===== Palette =====

<code ts>
Primary

Secondary

Success

Warning

Danger

Info

Neutral
</code>

----

===== Exemple =====

<code ts>
export const colors = {
  primary: {
    50: '#EFF6FF',
    100: '#DBEAFE',
    500: '#3B82F6',
    600: '#2563EB',
    700: '#1D4ED8'
  }
};
</code>

----

====== Étape 3 — Espacements ======

----

====== Étape 4 — Typographie ======

<code ts>
Display

Heading

Body

Caption

Label
</code>

----

====== Étape 5 — Radius ======

----

====== Sprint 11-A.1-B ======

===== Theme System =====

----

====== Étape 6 — Supporter ======

<code>
Light Theme

Dark Theme

System Theme
</code>

----

====== Étape 7 — Structure ======

<code>
src/themes

├── light.ts
├── dark.ts
├── provider.tsx
└── hooks.ts
</code>

----

====== Étape 8 — Provider ======

{children}

</ThemeProvider>
</code>

----

====== Sprint 11-A.1-C ======

===== Responsive Grid =====

----

====== Étape 9 — Breakpoints ======

<code ts>
xs  0

sm  640

md  768

lg  1024

xl  1280

2xl 1536
</code>

----

====== Étape 10 — Grid ======

===== Composants =====

<code>
Container

Row

Col

Stack

Grid
</code>

----

====== Étape 11 — Objectif ======

Compatible :

<code>
Desktop

Tablet

Mobile
</code>

sans réécriture.

----

====== Sprint 11-A.1-D ======

===== Layout Framework =====

----

====== Étape 12 — Layouts ======

===== Créer =====

<code>
AuthLayout

DashboardLayout

SettingsLayout

PublicLayout

FullscreenLayout
</code>

----

====== Étape 13 — Dashboard Layout ======

===== Contient =====

<code>
Sidebar

Header

Breadcrumbs

Notifications

Workspace

Footer
</code>

----

====== Étape 14 — Navigation ======

===== Navigation principale =====

<code>
Dashboard

CRM

Properties

Reservations

Operations

Analytics

Executive

Marketplace

Settings
</code>

----

====== Sprint 11-A.1-E ======

===== Component Library =====

----

====== Étape 15 — Base Components ======

<code>
Button

Input

Textarea

Select

Checkbox

Radio

Switch

Badge

Avatar

Card

Modal

Drawer

Tooltip

Tabs
</code>

----

====== Étape 16 — Feedback ======

<code>
Alert

Toast

Skeleton

Progress

EmptyState

ErrorState
</code>

----

====== Étape 17 — Structure ======

<code>
src/shared/ui

├── button
├── input
├── modal
├── card
├── badge
└── ...
</code>

----

====== Sprint 11-A.1-F ======

===== Data Tables =====

----

====== Étape 18 — DataTable ======

===== Fonctionnalités =====

<code>
Pagination

Sorting

Filtering

Column Visibility

Export CSV

Bulk Actions
</code>

----

====== Étape 19 — Utilisation ======

<code>
Customers

Properties

Reservations

Invoices

Tickets
</code>

----

====== Étape 20 — Composants ======

<code>
DataTable

DataToolbar

ColumnFilter

BulkActions

Pagination
</code>

----

====== Sprint 11-A.1-G ======

===== Form Framework =====

----

====== Étape 21 — Standard ======

<code>
React Hook Form

Zod

Nest DTO
</code>

----

====== Étape 22 — Form Components ======

<code>
Form

FormField

FormInput

FormSelect

FormDatePicker

FormCurrency

FormTextarea
</code>

----

====== Étape 23 — Validation ======

===== Supporter =====

<code>
Realtime

Async

Server Validation

Field Dependencies
</code>

----

====== Sprint 11-A.1-H ======

===== Dashboard Widgets =====

----

====== Étape 24 — Widgets Foundation ======

===== Créer =====

<code>
StatCard

KpiCard

ChartCard

ActivityFeed

QuickActions

RecentItems
</code>

----

====== Étape 25 — Charts ======

===== Standardiser =====

<code>
Line Chart

Bar Chart

Area Chart

Pie Chart

Heatmap
</code>

----

====== Sprint 11-A.1-I ======

===== UX Standards =====

----

====== Étape 26 — États ======

===== Tous les écrans doivent supporter =====

<code>
Loading

Empty

Error

Success

Offline
</code>

----

====== Étape 27 — Accessibilité ======

===== Respecter =====

<code>
WCAG AA

Keyboard Navigation

Screen Readers

Focus Management
</code>

----

====== Étape 28 — Performance ======

===== Objectifs =====

<code>
LCP < 2.5s

TTI < 3s

CLS < 0.1
</code>

----

====== Sprint 11-A.1-J ======

===== Validation =====

----

====== Étape 29 — Storybook ======

===== Mettre en place =====

<code>
Component Catalog

Design Documentation

Usage Examples

Visual Testing
</code>

----

====== Étape 30 — Tests UI ======

===== Vérifier =====

<code>
Responsive

Dark Mode

Navigation

Forms

Tables

Accessibility
</code>

----

====== Étape 31 — Démonstration ======

===== À la fin du sprint =====

L'investisseur doit pouvoir voir :

<code>
Connexion

↓

Dashboard

↓

Navigation complète

↓

Tables CRM

↓

Formulaires

↓

Composants Enterprise

↓

Dark Mode
</code>

sans backend finalisé.

----

====== Définition de terminé ======

Le Sprint 11-A.1 est terminé lorsque :

<code>
✓ Design Tokens créés

✓ Theme System créé

✓ Layouts créés

✓ Navigation créée

✓ Component Library créée

✓ Data Tables créées

✓ Form Framework créé

✓ Storybook opérationnel
</code>

----

====== Livrables ======

<code>
Design Tokens

Theme Provider

Responsive Grid

Dashboard Layout

Navigation Framework

Component Library

DataTable Framework

Form Framework

Dashboard Widgets

Storybook

UI Foundation
</code>

----

====== Sprint 11-A.2 — Authentication UX & Workspace Foundation ======

===== Objectif =====

Construire la porte d'entrée du MVP investisseur.

Cette étape fournit la première expérience utilisateur visible de la plateforme.

L'utilisateur doit pouvoir :

<code>
Se connecter

Choisir son tenant

Accéder à son espace

Naviguer rapidement

Recevoir des notifications

Effectuer des recherches globales
</code>

À l'issue de cette étape :

<code>
✓ Login

✓ Register

✓ Forgot Password

✓ Tenant Switcher

✓ Workspace Selector

✓ User Menu

✓ Notifications Center

✓ Global Search Bar
</code>

----

====== Architecture UX ======

<code>
Authentication

↓

Tenant Selection

↓

Workspace Selection

↓

Dashboard

↓

Global Navigation
</code>

----

====== Sprint 11-A.2-A ======

===== Authentication Pages =====

----

====== Étape 1 — Structure ======

<code>
src/app/(auth)

├── login
├── register
├── forgot-password
├── reset-password
└── verify-email
</code>

----

====== Étape 2 — Login Page ======

===== Créer =====

<code>
/login
</code>

----

===== Champs =====

<code>
Email

Password

Remember Me
</code>

----

===== Actions =====

<code>
Login

Forgot Password

Register
</code>

----

====== Étape 3 — Composants ======

<code>
LoginForm

LoginCard

SocialLoginButtons

AuthHeader

AuthFooter
</code>

----

====== Étape 4 — États ======

===== Supporter =====

<code>
Loading

Invalid Credentials

Account Locked

MFA Required

Success
</code>

----

====== Sprint 11-A.2-B ======

===== Registration =====

----

====== Étape 5 — Register Page ======

===== Créer =====

<code>
/register
</code>

----

===== Champs =====

<code>
First Name

Last Name

Email

Password

Confirm Password

Company Name
</code>

----

====== Étape 6 — Validation ======

===== Vérifier =====

<code>
Email Unique

Password Strength

Terms Acceptance
</code>

----

====== Étape 7 — Workflow ======

<code>
Register

↓

Email Verification

↓

Tenant Creation

↓

Workspace Setup
</code>

----

====== Sprint 11-A.2-C ======

===== Password Recovery =====

----

====== Étape 8 — Forgot Password ======

===== Créer =====

<code>
/forgot-password
</code>

----

===== Processus =====

<code>
Email

↓

Reset Link

↓

New Password

↓

Success
</code>

----

====== Étape 9 — Reset Password ======

===== Créer =====

<code>
/reset-password
</code>

----

===== Sécurité =====

<code>
Token Validation

Expiration

Password Policy
</code>

----

====== Sprint 11-A.2-D ======

===== Tenant Switcher =====

----

====== Étape 10 — Tenant Switcher ======

===== Créer =====

<code>
TenantSwitcher
</code>

----

===== Afficher =====

<code>
Tenant Name

Role

Environment

Status
</code>

----

====== Étape 11 — Utilisation ======

Compatible :

<code>
Multi-Tenant

Multi-Portfolio

Partner Accounts

Internal Users
</code>

----

====== Étape 12 — Exemple UX ======

<code>
Acme Hospitality

▼

Production

↓

Switch Tenant
</code>

----

====== Sprint 11-A.2-E ======

===== Workspace Selector =====

----

====== Étape 13 — Workspace Selector ======

===== Créer =====

<code>
WorkspaceSelector
</code>

----

===== Espaces =====

<code>
Operations

CRM

Reservations

Analytics

Executive

Marketplace
</code>

----

====== Étape 14 — Objectif ======

Permettre :

<code>
Accès rapide

Navigation métier

Réduction du bruit visuel
</code>

----

====== Sprint 11-A.2-F ======

===== User Menu =====

----

====== Étape 15 — UserMenu ======

===== Créer =====

<code>
UserMenu
</code>

----

===== Contenu =====

<code>
Profile

Preferences

Notifications

Security

API Keys

Logout
</code>

----

====== Étape 16 — Avatar ======

===== Supporter =====

<code>
Photo

Initials

Presence Status
</code>

----

====== Sprint 11-A.2-G ======

===== Notifications Center =====

----

====== Étape 17 — NotificationCenter ======

===== Créer =====

<code>
NotificationCenter
</code>

----

===== Types =====

<code>
Reservations

Payments

Operations

Marketing

System

Security
</code>

----

====== Étape 18 — Fonctionnalités ======

<code>
Unread Count

Mark As Read

Priority

Deep Link
</code>

----

====== Étape 19 — Exemple ======

<code>
Nouvelle réservation

Property:
Villa Horizon

Il y a 2 min
</code>

----

====== Sprint 11-A.2-H ======

===== Global Search Bar =====

----

====== Étape 20 — Search Component ======

===== Créer =====

<code>
GlobalSearchBar
</code>

----

===== Recherche =====

<code>
Customers

Properties

Reservations

Invoices

Tickets

Tasks
</code>

----

====== Étape 21 — UX ======

===== Supporter =====

<code>
Instant Search

Keyboard Shortcut

Recent Searches

Suggestions
</code>

----

====== Étape 22 — Raccourci ======

<code>
⌘ K

CTRL K
</code>

----

====== Sprint 11-A.2-I ======

===== Layout Integration =====

----

====== Étape 23 — Dashboard Header ======

===== Intégrer =====

<code>
Logo

Breadcrumbs

Global Search

Notifications

Tenant Switcher

User Menu
</code>

----

====== Étape 24 — Sidebar ======

===== Afficher =====

<code>
Dashboard

CRM

Properties

Reservations

Operations

Analytics

Executive

Marketplace

Settings
</code>

----

====== Étape 25 — Mobile ======

===== Supporter =====

<code>
Collapsible Sidebar

Bottom Navigation

Touch Friendly
</code>

----

====== Sprint 11-A.2-J ======

===== Validation MVP =====

----

====== Étape 26 — Tests UX ======

===== Vérifier =====

<code>
Login

Registration

Password Reset

Tenant Switching

Workspace Navigation

Notifications

Search
</code>

----

====== Étape 27 — Tests Accessibilité ======

===== Vérifier =====

<code>
Keyboard Navigation

Screen Readers

Focus Management

Color Contrast
</code>

----

====== Étape 28 — Démonstration Investisseur ======

===== Parcours =====

<code>
Login

↓

Tenant Selection

↓

Workspace Selection

↓

Dashboard

↓

Search Reservation

↓

Open Customer

↓

Notification Center

↓

Logout
</code>

----

====== Définition de terminé ======

Le Sprint 11-A.2 est terminé lorsque :

<code>
✓ Login créé

✓ Register créé

✓ Forgot Password créé

✓ Tenant Switcher créé

✓ Workspace Selector créé

✓ User Menu créé

✓ Notifications Center créé

✓ Global Search Bar créée

✓ Workspace Foundation opérationnelle
</code>

----

====== Livrables ======

<code>
Login Page

Register Page

Forgot Password Flow

Reset Password Flow

TenantSwitcher

WorkspaceSelector

UserMenu

NotificationCenter

GlobalSearchBar

Workspace Foundation
</code>

----

====== Sprint 11-B.1 — Property Management UI ======

===== Objectif =====

Construire le premier parcours métier complet visible du MVP.

Cette étape permet à un utilisateur de :

<code>
Créer une propriété

Consulter une propriété

Modifier une propriété

Gérer ses équipements

Gérer ses photos

Visualiser son état

Piloter ses performances
</code>

Ce sprint constitue la première démonstration concrète du produit pour un investisseur.

À l'issue de cette étape :

<code>
✓ Property List

✓ Property Details

✓ Property Creation Wizard

✓ Property Gallery

✓ Property Amenities

✓ Property Status

✓ Property Actions

✓ Property Dashboard
</code>

----

====== Architecture UI ======

<code>
Properties

├── Property List
├── Property Detail
├── Property Create
├── Property Edit
├── Property Gallery
├── Property Amenities
├── Property Status
└── Property Dashboard
</code>

----

====== Sprint 11-B.1-A ======

===== Property List =====

----

====== Étape 1 — Route ======

<code>
/properties
</code>

----

====== Étape 2 — Écran ======

===== Afficher =====

<code>
Property Name

Type

Status

Capacity

Location

Score

Occupancy

Actions
</code>

----

====== Étape 3 — DataTable ======

===== Supporter =====

<code>
Pagination

Sorting

Filtering

Bulk Actions

Export CSV
</code>

----

====== Étape 4 — Filtres ======

<code>
Status

Type

City

Capacity

Score

Owner
</code>

----

====== Étape 5 — Actions ======

<code>
View

Edit

Duplicate