尚未偵測到更新。GitHub 發布版本後會顯示在這裡。
依最近已完成的 8 小時觀測回合間的 GitHub 星號增量排序
The distributed app store for vibe-coded projects. Browse, discover, and install open-source apps from across GitHub.
翻譯準備中
個人 GitHub 帳號下公開儲存庫的擁有者可以登入並驗證所有權，自行管理介紹，無需管理員核准。
登入並產生驗證檔案，在 30 分鐘內將其提交至此儲存庫的預設分支。其他分支或分叉儲存庫中的檔案無效。然後在下方檢查檔案，即可無需管理員核准直接管理專案。請保留檔案以維持管理權限。
如需登入，將前往登入頁面。登入後請回到此處，再次點擊所選的驗證按鈕。
在專案資料夾中執行 /nomorevibe verify，即可驗證所有權並自行管理介紹。
一分鐘完成驗證製作者的介紹僅有上面的一句話。 更多詳情請閱讀儲存庫 README。 儲存庫 README ↗
正在載入完整 README。
檢視完整 README ↗Création de l'interface Caisse — La Vida Food
Crée l'interface principale de Caisse (POS) pour le restaurant La Vida Food.
🎯 Objectif
Cette interface est le cœur opérationnel du logiciel. Elle doit permettre au caissier de prendre une commande rapidement, sélectionner les produits, modifier les quantités et voir en permanence le panier ainsi que le total.
Pour cette première étape, ne crée pas encore le Dashboard, les rapports, les crédits clients, les imprimantes, les RH, le KDS ou le multi-restaurant.
Concentre-toi uniquement sur l'interface Caisse.
🎨 Direction artistique
Créer une interface :
Moderne
Premium
Professionnelle
Minimaliste
Très rapide à utiliser
Inspirée des meilleurs logiciels POS de restaurants modernes
Optimisée pour un écran Desktop 1366px / 1440px
Responsive pour tablette
Couleurs
Utilise principalement :
Background général : #F5F6F8
Sidebar : #111827
Cartes : #FFFFFF
Texte principal : #111827
Texte secondaire : #6B7280
Couleur principale/action : #F97316
Succès : #22C55E
Erreur : #EF4444
Bordures : #E5E7EB
L'orange doit être utilisé principalement pour les actions importantes et les éléments actifs.
Ne surcharge pas l'interface avec trop de couleurs.
Typographie
Utilise Inter ou une police moderne similaire.
Les montants importants doivent être très lisibles.
🖥️ STRUCTURE DE L'INTERFACE
L'écran doit être divisé en 3 zones principales :
┌─────────────────────────────────────────────────────────────────────────┐
│ TOP BAR │
├───────────────┬───────────────────────────────────────┬─────────────────┤
│ │ │ │
│ SIDEBAR │ PRODUITS / CATÉGORIES │ COMMANDE │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
└───────────────┴───────────────────────────────────────┴─────────────────┘
Créer une sidebar verticale fixe à gauche.
En haut :
LA VIDA FOOD
avec une petite icône/logo de restaurant.
Navigation :
🧾 Caisse — actif
🪑 Tables
📋 Commandes
💳 Crédits
📊 Rapports
Séparateur.
⚙️ Paramètres
En bas :
Avatar du caissier
Nom : Caissier
Statut : En ligne
Déconnexion
État actif
La section Caisse doit être clairement visible avec :
fond orange très léger ou orange
icône orange/blanche
texte plus contrasté
La sidebar doit être élégante et compacte.
Créer une barre supérieure dans la zone principale.
À gauche :
Caisse
Prise de commande
À droite :
🔍 Rechercher un produit...
🔔
👤 Caissier
Ajouter également une petite indication :
Aujourd'hui — 17 Août 2026
La partie centrale doit être dédiée aux produits.
Catégories
Afficher les catégories horizontalement sous le header.
Exemple :
[Tous] [Pizzas] [Burgers] [Plats] [Boissons] [Desserts]
La catégorie active doit être orange.
Les catégories doivent être faciles à cliquer avec de grandes zones tactiles.
Ajouter une barre de recherche :
🔍 Rechercher un produit...
La recherche doit filtrer les produits instantanément.
Prévoir également la recherche par :
nom
catégorie
Afficher les produits sous forme de cartes.
Exemple :
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ │ │ │ │ │
│ IMAGE │ │ IMAGE │ │ IMAGE │
│ │ │ │ │ │
├─────────────┤ ├─────────────┤ ├─────────────┤
│ Margherita │ │ 4 Fromages │ │ Burger │
│ Pizza │ │ Pizza │ │ Classic │
│ │ │ │ │ │
│ 650 DA │ │ 900 DA │ │ 750 DA │
└─────────────┘ └─────────────┘ └─────────────┘
Chaque carte doit contenir :
image
nom
catégorie
prix
statut disponible/indisponible
Interaction
Lorsqu'on clique sur un produit :
Ajouter immédiatement le produit au panier.
Ne demande pas de confirmation inutile.
Si le produit est déjà dans le panier :
augmenter automatiquement sa quantité de +1.
La partie droite doit être une sidebar de commande fixe.
Elle doit rester visible même lorsque l'utilisateur navigue dans les catégories.
Header :
Commande
Table 12
Ajouter éventuellement :
[Changer de table]
Articles du panier
Exemple :
🍔 Burger Classic
[-] 2 [+]
750 DA
Chaque article doit permettre :
augmenter quantité
diminuer quantité
supprimer
modifier
Afficher clairement le prix total de la ligne.
Exemple :
Burger Classic
2 × 750 DA 1 500 DA
Prévoir une petite action sur chaque article :
Modifier
Elle ouvrira plus tard une modal permettant :
Suppléments
Modificateurs
Notes
Pour cette première version, créer simplement l'interface de la modal sans connecter toute la logique métier.
Exemple :
Modifier Burger Classic
Suppléments
☐ Fromage +100 DA
☐ Œuf +100 DA
☐ Bacon +150 DA
Note
[ Sans oignons ]
[Annuler] [Ajouter]
En bas du panier :
────────────────────────────
Sous-total 2 220 DA
Remise 0 DA
────────────────────────────
TOTAL 2 220 DA
Le TOTAL doit être beaucoup plus visible que les autres informations.
Créer un gros bouton orange en bas du panier :
💳 PAYER — 2 220 DA
Le bouton doit être :
très visible
large
facilement cliquable
fixé en bas du panneau panier
Pour cette première étape, le bouton peut ouvrir une modal de paiement placeholder, mais ne développe pas encore toute la logique de paiement.
Prévoir également l'état lorsque aucune commande n'est créée.
Afficher :
🛒
Aucune commande
Sélectionnez un produit
pour commencer une commande.
Ne pas laisser un grand espace vide sans indication.
Utilise de fausses données réalistes pour rendre l'interface immédiatement exploitable.
Catégories :
Tous
Pizzas
Burgers
Plats
Boissons
Desserts
Produits :
Pizza Margherita — 650 DA
Pizza 4 Fromages — 900 DA
Pizza Viande — 950 DA
Burger Classic — 750 DA
Chicken Burger — 800 DA
Double Burger — 950 DA
Frites — 250 DA
Coca Cola — 120 DA
Eau — 80 DA
Tiramisu — 400 DA
Utiliser des images de démonstration cohérentes avec les produits.
Cette interface est utilisée dans un restaurant pendant le service.
Donc :
éviter les animations inutiles
éviter les popups inutiles
privilégier les gros boutons
privilégier les clics rapides
garder le panier toujours visible
afficher immédiatement les changements de quantité
mettre à jour le total en temps réel
éviter les pages inutiles
rendre les actions principales accessibles en 1 clic
Le caissier doit pouvoir faire :
Choisir catégorie → Cliquer produit → Produit ajouté → Payer
avec le minimum d'étapes.
Desktop :
Sidebar 220px
Produits environ 65%
Panier environ 35%
Sur tablette :
réduire la sidebar
conserver les produits et le panier
garder le bouton paiement visible
Ne transforme pas l'application en une interface mobile classique.
Elle doit rester une interface POS tactile.
Construis l'interface avec des composants réutilisables :
Sidebar
TopBar
CategoryTabs
ProductSearch
ProductGrid
ProductCard
OrderPanel
OrderItem
OrderSummary
PaymentButton
ModifierModal
Utilise une structure propre afin que les prochaines interfaces puissent réutiliser les mêmes composants.
Pour cette première version, ne développe pas :
❌ Dashboard
❌ RH
❌ KDS
❌ Multi-restaurants
❌ Analytics avancés
❌ Gestion des imprimantes
❌ Rapport Z complet
❌ Gestion complète des crédits
❌ Backend complexe
Nous construisons d'abord le frontend de l'écran Caisse et son expérience utilisateur.
Prépare cependant l'architecture pour pouvoir connecter ces modules plus tard.
✅ RÉSULTAT ATTENDU
Je veux obtenir une interface qui ressemble à un vrai logiciel POS professionnel de restaurant, et non à une simple dashboard web.
Le résultat doit être :
rapide + élégant + tactile + lisible + professionnel + orienté prise de commande.
Priorité absolue :
Produits au centre + commande toujours visible à droite + total très visible + bouton PAYER accessible en permanence.
Ne crée aucune autre page inutile pour le moment.
This project was built with Lovable.
Continue developing this project in the Lovable editor.
main on GitHub and your changes sync back into Lovable, ready for your next prompt.Prefer working locally? You need Node.js and npm — install with nvm.
git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev