// Accueil // Blog // Projets Web // Qui suis-je ? // Contact
Accueil / Projets Web / Omotenashi Shipping Service
pilou2506.vercel.app
Omotenashi Shipping Service — capture d'écran sur ordinateur

Omotenashi Shipping Service

ReactTypeScriptViteTailwind CSS

D'où il vient

Omotenashi Shipping Service est la nouvelle version de ColisJP, mon premier outil de gestion de colis écrit en JavaScript vanilla. Je l'ai reconstruit avec le même niveau d'exigence que Luxury Shipping Assistant, en portant à l'identique toute la logique métier de l'original (tarifs, total, monnaie à rendre, répartition espèces / note de chambre) : les commentaires du code indiquent la correspondance avec la source d'origine.

Ce que fait l'appli

  • Registre de réception dynamique : chambre, nom du client, article, frais de port, matériel d'emballage avec ses tarifs, quantité, calcul automatique du total et de la monnaie, mode de paiement (espèces ou note de chambre), numéro de reçu masqué, employé assigné.
  • Verrouillage des lignes et transfert des lignes cochées vers le relevé quotidien (espèces / chambre × livraison / matériel), avec séparation automatique des lignes mixtes.
  • Sauvegarde automatique locale, historique, export CSV, impression au format A4, mode clair / sombre.

Sous le capot

React 19, TypeScript, Vite et Tailwind CSS v4, avec une identité visuelle inspirée de l'hôtellerie de luxe japonaise (Noto Serif JP, Cormorant Garamond) et une interface en japonais, la langue de l'équipe de réception.

La démo

Aucune base de données : le registre est enregistré dans votre navigateur. Les noms d'employés proposés sont des noms d'exemple.

🎯 Le but du projet

Simplifier et accélérer l'enregistrement des colis à la réception, réduire les erreurs de calcul de tarifs, et garder une traçabilité claire des paiements pour le personnel.

📁 Structure du projet · 40 fichiers

  • omotenashi_shipping_service/
    • dist/
      • assets/
        • index-BhV912qt.js
        • index-DzSwCi1i.css
      • favicon.svg
      • index.html
    • public/
      • favicon.svg
    • src/
      • components/
        • ActionBar.tsx
        • ConfirmDialog.tsx
        • EmptyState.tsx
        • Footer.tsx
        • Header.tsx
        • IntakeRow.tsx
        • IntakeTable.tsx
        • OssMonogram.tsx
        • ReportSection.tsx
        • ReportTable.tsx
        • SelectAllToggle.tsx
        • StaffPicker.tsx
        • ThemeToggle.tsx
        • Toast.tsx
      • lib/
        • csvExport.ts
        • dateFormat.ts
        • pricing.ts
        • rowLogic.ts
        • storage.ts
        • transfer.ts
        • types.ts
        • useCountUp.ts
      • screens/
        • HistoryScreen.tsx
        • IntakeScreen.tsx
        • ReportScreen.tsx
      • App.tsx
      • index.css
      • main.tsx
      • vite-env.d.ts
    • index.html
    • package-lock.json
    • package.json
    • README.md
    • tsconfig.json
    • vite.config.ts

Autres projets