# Interface Frontend - Gestion des Stocks

## 📋 Vue d'ensemble

Cette interface frontend a été conçue pour le système de gestion des stocks de l'Hôpital Psychiatrique de Bingerville. Elle utilise **Laravel Blade** avec **Tailwind CSS** pour un design moderne et responsive.

## 🎨 Technologies utilisées

- **Laravel Blade** - Templates
- **Tailwind CSS v4** - Framework CSS
- **Vite** - Build tool
- **Alpine.js** (optionnel) - Interactivité

## 📁 Structure des fichiers

```
resources/
├── views/
│   ├── layouts/
│   │   └── app.blade.php          # Layout principal avec sidebar
│   ├── auth/
│   │   └── login.blade.php        # Page de connexion
│   ├── dashboard.blade.php         # Tableau de bord
│   ├── products/
│   │   └── index.blade.php         # Liste des produits
│   ├── stocks/
│   │   └── index.blade.php         # Liste des stocks
│   ├── movements/
│   │   └── index.blade.php         # Liste des mouvements
│   ├── requests/
│   │   └── index.blade.php         # Liste des demandes
│   ├── categories/
│   │   └── index.blade.php         # Liste des catégories
│   ├── departments/
│   │   └── index.blade.php         # Liste des départements
│   ├── suppliers/
│   │   └── index.blade.php         # Liste des fournisseurs
│   ├── units/
│   │   └── index.blade.php         # Liste des unités
│   ├── equipment/
│   │   └── index.blade.php         # Liste des équipements
│   └── components/
│       ├── status-badge.blade.php  # Badge de statut réutilisable
│       └── action-buttons.blade.php # Boutons d'action réutilisables
```

## 🚀 Pages disponibles

### 1. Dashboard (`/dashboard`)
- Vue d'ensemble avec statistiques
- Produits à faible stock
- Demandes récentes

### 2. Produits (`/products`)
- Liste de tous les produits
- Filtres par catégorie et statut
- Recherche

### 3. Stocks (`/stocks`)
- Niveaux de stock par produit
- Filtres par niveau de stock
- Recherche

### 4. Mouvements (`/movements`)
- Historique des mouvements (entrée/sortie/transfert)
- Filtres par type, date, produit
- Boutons pour créer entrée/sortie

### 5. Demandes (`/requests`)
- Liste des demandes avec onglets de statut
- Filtres par département et date
- Actions d'approbation/rejet

### 6. Catégories (`/categories`)
- Gestion des catégories de produits

### 7. Départements (`/departments`)
- Gestion des départements de l'hôpital

### 8. Fournisseurs (`/suppliers`)
- Gestion des fournisseurs

### 9. Unités (`/units`)
- Gestion des unités de mesure

### 10. Équipements (`/equipment`)
- Gestion des équipements

## 🎨 Design System

### Couleurs principales
- **Bleu** (`blue-600`) - Actions principales, liens
- **Vert** (`green-600`) - Succès, approbation
- **Rouge** (`red-600`) - Erreurs, rejet, sorties
- **Jaune** (`yellow-600`) - Avertissements, en attente
- **Gris** (`gray-*)` - Texte, bordures, arrière-plans

### Composants réutilisables

#### Status Badge
```blade
<x-status-badge status="en_attente">En attente</x-status-badge>
<x-status-badge status="validée">Validée</x-status-badge>
<x-status-badge status="rejetée">Rejetée</x-status-badge>
```

#### Action Buttons
```blade
<x-action-buttons edit delete view />
<x-action-buttons approve reject />
```

## 📱 Responsive Design

L'interface est entièrement responsive :
- **Mobile** : Sidebar cachée, menu hamburger
- **Tablet** : Layout adaptatif
- **Desktop** : Sidebar fixe, layout complet

## 🔧 Utilisation

### 1. Installer les dépendances
```bash
npm install
```

### 2. Compiler les assets
```bash
npm run dev
# ou pour la production
npm run build
```

### 3. Accéder à l'interface
- Page de connexion : `/login`
- Dashboard : `/dashboard`
- Autres pages via la sidebar

## 🎯 Fonctionnalités à implémenter (Backend)

### Authentification
- [ ] Système de connexion
- [ ] Gestion des sessions
- [ ] Middleware d'authentification

### CRUD Operations
- [ ] Créer, lire, mettre à jour, supprimer pour chaque module
- [ ] Validation des formulaires
- [ ] Gestion des erreurs

### Permissions
- [ ] Intégration avec Spatie Laravel Permission
- [ ] Affichage conditionnel selon les rôles
- [ ] Vérification des permissions dans les actions

### API/Données
- [ ] Connexion aux modèles Eloquent
- [ ] Pagination des tableaux
- [ ] Recherche et filtres fonctionnels
- [ ] Export de données (optionnel)

## 📝 Notes

- Toutes les pages sont actuellement statiques (sans données réelles)
- Les formulaires et boutons sont prêts mais non fonctionnels
- L'interface est prête pour l'intégration backend
- Le design supporte le mode sombre (dark mode)

## 🔄 Prochaines étapes

1. **Intégrer l'authentification** Laravel
2. **Connecter les contrôleurs** aux vues
3. **Ajouter les formulaires** de création/édition
4. **Implémenter les modals** pour les actions
5. **Ajouter la pagination** aux tableaux
6. **Intégrer les permissions** Spatie
7. **Ajouter les notifications** toast
8. **Implémenter la recherche** en temps réel

---

**Interface créée et prête pour l'intégration backend !** 🎉

