Kaislo — Caisse et gestion de stock pour tous les commerces

Site public (pour Google) + application de caisse, en Next.js. Démo prête à présenter : un restaurant et une épicerie, tous deux nommés Amorac Kaislo (comme leurs gérants, vendeurs et clients), dans la devise du pays choisi.

En ligne (Hostinger), les données sont synchronisées avec le serveur PHP + MySQL et la caisse marche aussi sans internet. Sur GitHub Pages (version de test), il n'y a pas de serveur : les données restent dans le navigateur. Prochaine étape : application mobile (Capacitor).

Lancer sur votre PC

npm install        # une seule fois
npm run dev        # puis ouvrir http://localhost:3000

• Site public : http://localhost:3000
• Application : http://localhost:3000/app
• Connexion : numéro de téléphone + code PIN (chaque personne a son numéro)
• Démo restaurant : gérant 06 00 00 00 01 / 1234 · vendeurs 06 00 00 00 02 / 0000 et 06 00 00 00 03 / 1111
• Démo épicerie : gérant 06 00 00 00 11 / 1234 · vendeurs 06 00 00 00 12 / 0000 et 06 00 00 00 13 / 1111
• Espace Amorac : /admin (mot de passe de démo dans src/config.js)

Mettre en ligne sur Hostinger

1. Dans src/config.js, remplacer SITE_URL par l'adresse définitive du site
2. Arrêter npm run dev s'il tourne (Ctrl + C), puis npm run build → crée le dossier out/ (les deux commandes utilisent le même dossier .next et se gênent)
3. hPanel → domaine ou sous-domaine → activer le SSL (gratuit, obligatoire pour le Bluetooth)
4. Gestionnaire de fichiers → public_html → envoyer tout le contenu de out/ (y compris .htaccess)
5. À chaque mise à jour : refaire npm run build, renvoyer out/ (la version du service worker change toute seule : scripts/version-sw.mjs)

Ce que fait l'application

Fonction	Où
Caisse avec options (accompagnements, tailles), recherche, code-barres	Caisse
Remises (% ou montant) et prix promo	Caisse / Produits
Vente à crédit, carnet clients, remboursements, rappel WhatsApp	Crédit
Tables, commandes en cours, ticket cuisine	Tables (restaurants)
Stock, entrées de marchandise, inventaire, valeur du stock	Stock (épiceries, boutiques)
Marge (prix d'achat), dépenses, solde, statistiques	Accueil (gérant)
Ouverture et fermeture de caisse chaque jour (fond compté, total vendu par article, écart), historique des journées	Ventes
Reçu envoyé par WhatsApp (client à distance)	Caisse / ticket
Espace équipe Amorac : commerces, abonnements, paiements, offres	/admin
Vendeurs, codes PIN, droits (produits, remises)	Réglages
Photos des articles, catégories (gérant et vendeurs autorisés)	Produits
Logo (aussi imprimé sur le ticket), téléphone, e-mail, adresse, position sur la carte	Réglages → Commerce
Impression Bluetooth (ventes, cuisine, clôture, remboursements)	Imprimante

Organisation du code

Dossier	Rôle
src/app/	Les adresses du site : (fr)/ pages françaises et /app, (en)/en/ pages anglaises (le contenu est dans src/components/site/pages/)
src/components/site/	Éléments du site public
src/components/app/	L'application : ecrans/ (un fichier par écran) et feuilles/ (fenêtres)
src/store/	L'état de l'application et toutes les actions (caisse, gestion, impression)
src/lib/donnees/	Calculs (vente, statistiques, crédit, clôture), données de démo, stockage
src/lib/impression/	Tickets et imprimante Bluetooth
src/app/globals.css	Le design (couleurs, téléphone / tablette / ordinateur)

Trois fichiers sont prévus pour être remplacés plus tard :

• src/lib/donnees/stockage.js → appels à l'API Laravel
• src/lib/donnees/images.js → envoi des photos et logos sur le serveur (aujourd'hui : base d'images de l'appareil)
• src/lib/impression/bluetooth-web.js → Bluetooth natif dans l'app mobile (iPhone + imprimantes Bluetooth « classique »)

Imprimante

Imprimante thermique Bluetooth BLE, 58 ou 80 mm, ESC/POS. Dans le navigateur : Chrome (Android ou ordinateur). Sur iPhone, l'aperçu du ticket s'affiche à l'écran.

Version de test en ligne (GitHub Pages)

Lien à donner aux clients : https://oum731.github.io/kaislo/

Pour mettre à jour ce lien après des modifications (arrêtez npm run dev avant) :

npm run publier-github

Le site est alors construit pour le sous-dossier /kaislo et envoyé sur la branche gh-pages. Ensuite, relancez npm run build avant tout envoi sur Hostinger (dossier out/ normal).

Pages légales

Conditions d'utilisation, confidentialité, cookies, sécurité, mentions légales : src/app/<page>/page.js. Avant le lancement commercial :

• compléter SOCIETE et HEBERGEUR dans src/config.js (forme juridique, siège, immatriculation, responsable) ;
• changer DATE_PAGES_LEGALES à chaque modification ;
• faire relire les textes par un juriste du pays du siège d'Amorac.

Captures d'écran du site

Les 9 images de public/captures/ (vente, épicerie, fermeture de la journée, crédit, stock, tableau de bord, tables) sont prises automatiquement dans la vraie démo (ordinateur 1440 × 900, téléphone 390 × 844 en double définition).

npm run build
npm run captures            # toutes les captures (environ 1 minute)
npm run captures -- stock   # une seule capture

Les scènes sont décrites dans scripts/captures.mjs.

Sans PC : GitHub → onglet Actions → « Captures et vidéos » → Run workflow (captures, vidéos, ou les deux). Le résultat est envoyé sur la branche medias-auto : regardez les images et les vidéos, puis ouvrez une pull request de medias-auto vers main.

Vidéos de démonstration

Les 5 vidéos de public/videos/ (présentation, restaurant, épicerie, ajout d'articles, vendeurs) sont tournées automatiquement dans la vraie démo, avec voix off (Vivienne) et musique composée par le script.

This is the beginning of the README. Read the rest at the original. Read the full README ↗