# Frontend - StageEnvie2e

Interface web pour la gestion des ressources humaines.

## 🎨 Tech Stack (À choisir)

- **Option 1**: React + Vite + Tailwind CSS
- **Option 2**: Vue 3 + Vite + Tailwind CSS
- **Option 3**: Angular + TypeScript + Material UI

## 📋 Setup Checklist

- [ ] Choisir le framework (React/Vue/Angular)
- [ ] Copier `.env.example` en `.env.local`
- [ ] Installer les dépendances (`npm install`)
- [ ] Implémenter les pages principales
- [ ] Intégration API (Axios/Fetch)
- [ ] Authentication (JWT tokens)
- [ ] Responsive design (mobile/tablet/desktop)
- [ ] Tests unitaires et E2E
- [ ] Déploiement static (Vercel/Netlify)

## 📄 Pages à implémenter

```
/                     → Dashboard RH
/login                → Authentification
/employes             → Liste des employés
/employes/:cos        → Détails employé
/contrats             → Gestion des contrats
/absences             → Suivi des absences
/visites              → Visites médicales
/admin                → Paramètres admin
```

## 🔑 Configuration API

L'API backend est sur `http://localhost:8000/api` (configurable dans `.env.local`):

```javascript
// axios config exemple
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
const api = axios.create({
  baseURL: API_BASE_URL,
  timeout: parseInt(import.meta.env.VITE_API_TIMEOUT)
});
```

## 📦 Dépendances (React + Vite exemple)

```json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-router-dom": "^6.18.0",
    "axios": "^1.6.0",
    "tailwindcss": "^3.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "@vitejs/plugin-react": "^4.2.0"
  }
}
```

## 🏃 Run Checklist

1. Copier `.env.example` → `.env.local`
2. Vérifier `VITE_API_BASE_URL` pointe vers le backend
3. Lancer: `npm run dev`
4. Frontend disponible sur `http://localhost:5173` (Vite default)
5. Backend doit être accessible pour les requêtes API

## 🔒 Authentification

- [ ] Login form avec JWT token storage
- [ ] Token refresh logic
- [ ] Protected routes (PrivateRoute component)
- [ ] Logout with token cleanup
- [ ] Role-based UI (Admin, RH, Employé)

## 🎯 États de l'application

```javascript
// Exemple Redux/Pinia store
- auth (user, token, isAuthenticated)
- employes (list, loading, error)
- contrats (list, loading, error)
- ui (sidebarOpen, theme, etc)
```

## 🧪 Tests

```bash
npm run test              # Unit tests
npm run test:e2e          # E2E avec Cypress/Playwright
npm run coverage          # Coverage report
```

## 📊 Données à afficher

**Tableau Employés**:
- COS (clé), Nom (NSA), Titre (TIT), Établissement
- Filtres: Nom, établissement, statut
- Actions: Voir détails, Éditer, Supprimer

**Détails Employé**:
- Infos perso (COS, NSA, TIT, etc)
- Contrats associés
- Absences
- Visites médicales

## 🚀 Build pour production

```bash
npm run build
# Génère /dist/ prêt à déployer
```

## 📚 Ressources

- [React docs](https://react.dev)
- [Vite docs](https://vitejs.dev)
- [Tailwind CSS](https://tailwindcss.com)
- [Axios](https://axios-http.com)