79 lines
3.5 KiB
Markdown
79 lines
3.5 KiB
Markdown
# PANZAÏ — Démo plateforme de commande
|
|
|
|
Démo fonctionnelle réalisée par **KNRWebsite** pour PANZAÏ — Jungle Street Food (Thonon-les-Bains).
|
|
|
|
- **Site client** (`/`) : accueil, carte, personnalisation des plats, panier, paiement (simulé), suivi de commande en direct.
|
|
- **Dashboard gérant** (`/admin`) : commandes en temps réel (kanban + son), gestion du menu (prix, ruptures), statistiques, horaires et réglages de livraison.
|
|
|
|
Le site et le dashboard sont **reliés** : une commande passée sur le téléphone apparaît dans le dashboard en 2 secondes, et le suivi côté client avance quand le gérant clique.
|
|
|
|
## Lancer la démo
|
|
|
|
Prérequis : [Node.js](https://nodejs.org) 20 ou plus.
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Puis ouvre :
|
|
|
|
- Site client : http://localhost:3000
|
|
- Dashboard gérant : http://localhost:3000/admin
|
|
|
|
### Démo sur téléphone + tablette (recommandé pour le rendez-vous)
|
|
|
|
`npm run dev` écoute sur le réseau local. Le terminal affiche une adresse du type `http://192.168.1.42:3000`.
|
|
Avec le Mac, le téléphone et la tablette sur **le même Wi-Fi** :
|
|
|
|
- sur le **téléphone** : `http://<IP-du-Mac>:3000` → passer une commande ;
|
|
- sur la **tablette** (ou le Mac) : `http://<IP-du-Mac>:3000/admin` → cliquer sur **Activer le son**, puis accepter la commande.
|
|
|
|
### Version optimisée (plus rapide)
|
|
|
|
```bash
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
## Scénario de démo conseillé (2 minutes)
|
|
|
|
1. Montrer l'accueil sur le téléphone (hero, toucan, best-sellers, bouton Commander toujours visible).
|
|
2. Ajouter un Crousty XL (sauce chili thaï) + un Pad Thaï, aller au panier, choisir Livraison, payer.
|
|
3. Sur la tablette : la commande arrive avec un son et pulse → **Accepter 20 min**.
|
|
4. Sur le téléphone : le suivi passe à « Ça chauffe au wok 🔥 ».
|
|
5. Tablette : **Marquer prête** → **Remise au livreur**. Le suivi client suit.
|
|
6. Dans **Menu** : mettre le Pad Thaï en **Rupture** → il est grisé sur le site client (≈10 s).
|
|
7. Dans **Statistiques** : montrer la commission économisée vs Uber Eats.
|
|
8. Dans **Horaires & réglages** : interrupteur « Commandes en pause » visible côté client.
|
|
|
|
Bouton **Remettre la démo à zéro** en bas de « Horaires & réglages ».
|
|
|
|
## Ce qui est simulé dans cette démo
|
|
|
|
| Élément | Démo | Production |
|
|
|---|---|---|
|
|
| Base de données | en mémoire (remise à zéro au redémarrage) | Supabase / Postgres |
|
|
| Paiement | simulé (1,4 s) | Stripe (carte, Apple Pay, Google Pay) |
|
|
| Temps réel | rafraîchissement toutes les 2 s | Supabase Realtime |
|
|
| Connexion gérant | aucune | compte sécurisé |
|
|
| SMS client | texte seulement | Brevo / Twilio |
|
|
| Avis Google, carte Maps | emplacements | API Google |
|
|
| Historique stats | chiffres de démo + jour en direct | calculé depuis la base |
|
|
| Logo | toucan provisoire | logo officiel PANZAÏ |
|
|
|
|
À compléter avec le restaurant : prix du Veggie, boissons, desserts, suppléments, horaires, zone et frais de livraison, photos HD.
|
|
|
|
## Structure
|
|
|
|
```
|
|
pages/ index, menu, panier, commande/[id], admin/*
|
|
components/ header, footer, cartes plats, fenêtre de personnalisation…
|
|
composables/ panier, données du resto, actions du dashboard
|
|
server/api/ API (menu, commandes, réglages)
|
|
server/utils/ store.ts — données de démo (carte, commandes, horaires)
|
|
assets/main.css design system (couleurs, typo, boutons)
|
|
public/img/ photos des plats
|
|
```
|
|
|
|
Stack : Nuxt 3 (Vue 3), sans dépendance externe. Polices : Shojumaru (titres) et Manrope (texte) via Google Fonts.
|