Inventory Frontend

Interface web de gestion d'inventaire industriel pour Malio. Application SPA complète permettant la gestion du parc machines, des pièces, composants, produits, fournisseurs et documents associés.

Stack technique

Technologie	Version	Rôle
Nuxt	4	Framework (SPA, SSR désactivé)
Vue 3	3.5	Composition API + <script setup>
TypeScript	5.7	Typage strict sur l'ensemble du projet
TailwindCSS	4	Utility-first CSS
DaisyUI	5	Composants UI (alertes, modales, badges, etc.)
Lucide	via unplugin-icons	Icônes SVG
Vitest	4	Tests unitaires
Playwright	1.58	Tests E2E

Prérequis

• Node.js >= 20
• npm
• Backend Symfony démarré avec l'API sur http://localhost:8081/api

Installation

npm install

Développement

npm run dev

L'application est accessible sur http://localhost:3001.

Commandes disponibles

Commande	Description
npm run dev	Serveur de développement avec HMR
npm run build	Build de production
npm run lint:fix	Correction automatique ESLint
npx nuxi typecheck	Vérification TypeScript (0 erreurs attendu)
npm run test	Tests unitaires Vitest
npm run test:watch	Tests unitaires en mode watch
npm run test:e2e	Tests E2E Playwright (Chrome)

Fonctionnalités

Gestion du parc

• Machines : création, édition, vue détaillée avec structure hiérarchique (composants, pièces, produits)
• Squelettes machines : templates réutilisables pour créer des machines à partir d'un modèle type
• Sites : gestion multi-sites avec coordonnées de contact

Catalogues

• Composants, Pièces, Produits : catalogues avec recherche serveur, tri, pagination et filtres
• Catégories : système de types avec champs personnalisés configurables et exigences (contraintes de structure)
• Fournisseurs : gestion des constructeurs/fabricants avec liaison multi-entités

Documents et traçabilité

• Documents : upload, prévisualisation PDF/images, stockage sur système de fichiers avec compression PDF automatique
• Journal d'activité : audit trail complet sur toutes les entités (création, modification, suppression)
• Commentaires : système de tickets/commentaires sur les fiches avec statut ouvert/résolu

Administration

• Rôles : ADMIN, GESTIONNAIRE, VIEWER avec permissions granulaires
• Profils : gestion des utilisateurs et attribution des rôles
• Notifications : badge compteur de commentaires ouverts avec polling

Architecture

app/
├── pages/                  # 36 pages (file-based routing)
├── components/             # 57 composants Vue (auto-imported par Nuxt)
│   ├── common/             #   Composants UI réutilisables (modales, pagination, recherche)
│   ├── form/               #   Champs de formulaire (email, téléphone)
│   ├── layout/             #   Navbar principale
│   ├── machine/            #   Vue détail et création de machines
│   │   └── create/         #   Wizard de création machine
│   ├── model-types/        #   Gestion des types/catégories
│   └── sites/              #   Modales site (création, édition)
├── composables/            # 45 composables (logique métier)
├── shared/                 # Types, utilitaires, validation
│   ├── utils/              #   Helpers API, champs personnalisés, affichage, erreurs
│   ├── validation/         #   Validation email, téléphone
│   └── model/              #   Définitions de structures
├── services/               # Service layer (wrappers API spécialisés)
├── middleware/              # Middleware d'auth global (session cookie)
└── utils/                  # Formatage dates, montants, événements

Conventions de code

Composables

Pattern avec injection de dépendances explicite :

interface Deps {
  machineId: Ref<string>
  onSave: () => void
}

export function useMachineDetail(deps: Deps) {
  // ...
}

Communication entre composants

Props + Events uniquement — pas de provide/inject dans le projet.

Appels API

Le composable useApi.ts centralise tous les appels HTTP :

• Cookies de session inclus automatiquement (credentials: 'include')
• application/ld+json pour POST/PUT
• application/merge-patch+json pour PATCH
• Gestion d'erreurs centralisée avec traduction des messages backend en français

Styles

Classes DaisyUI standard :

• Input : input input-bordered input-sm md:input-md
• Select : select select-bordered select-sm md:select-md
• Button : btn btn-sm md:btn-md btn-primary

Authentification

L'application utilise une authentification par session (cookies), pas de JWT.

Le middleware global profile.global.ts vérifie la session à chaque navigation :

• Utilisateur non connecté → redirection vers /profiles
• Route /admin/* → accès restreint à ROLE_ADMIN

Tests

• 13 tests unitaires (Vitest + happy-dom) couvrant composables, utils et composants
• 3 specs E2E (Playwright + Chrome) avec setup d'authentification

Submodule Git

Ce repo est un submodule du repo principal Inventory.

Workflow de commit :

1. Commiter dans ce repo (frontend) en premier
2. Commiter dans le repo principal pour mettre à jour le pointeur submodule
3. Pousser les deux repos