diff --git a/app/staff/mockups/hub-salarie/page.tsx b/app/staff/mockups/hub-salarie/page.tsx new file mode 100644 index 0000000..97091ca --- /dev/null +++ b/app/staff/mockups/hub-salarie/page.tsx @@ -0,0 +1,874 @@ +"use client"; + +import { useState } from "react"; +import { + FileText, + Download, + Upload, + User, + FileSignature, + Calendar, + Bell, + CheckCircle, + Clock, + AlertCircle, + Home, + Briefcase, + CreditCard, + Settings, + LogOut, + ChevronRight, + Eye, + Palmtree, + Plus, + X +} from "lucide-react"; + +export default function HubSalarieMockup() { + const [activeTab, setActiveTab] = useState<'accueil' | 'contrats' | 'paie' | 'conges' | 'documents' | 'profil'>('accueil'); + + // Données mockées + const mockEmployee = { + firstName: "Marie", + lastName: "Dupont", + email: "marie.dupont@example.com", + numSecu: "2 85 03 75 123 456 78", + address: "123 rue de la République, 75001 Paris", + phone: "06 12 34 56 78" + }; + + const mockContracts = [ + { + id: 1, + type: "CDDU", + title: "Festival d'été 2025", + organization: "Théâtre National", + startDate: "2025-07-01", + endDate: "2025-07-31", + status: "active", + signedAt: "2025-06-15" + }, + { + id: 2, + type: "CDDU", + title: "Production Molière", + organization: "Compagnie ABC", + startDate: "2025-09-10", + endDate: "2025-10-20", + status: "signed", + signedAt: "2025-08-28" + }, + { + id: 3, + type: "CDDU", + title: "Tournée régionale", + organization: "Théâtre National", + startDate: "2025-05-01", + endDate: "2025-05-15", + status: "completed", + signedAt: "2025-04-10" + } + ]; + + const mockPayslips = [ + { id: 1, month: "Octobre 2025", amount: "2 450,00", downloadUrl: "#", status: "available" }, + { id: 2, month: "Septembre 2025", amount: "2 680,00", downloadUrl: "#", status: "available" }, + { id: 3, month: "Août 2025", amount: "3 120,00", downloadUrl: "#", status: "available" }, + { id: 4, month: "Juillet 2025", amount: "2 890,00", downloadUrl: "#", status: "available" }, + ]; + + const mockDocuments = [ + { id: 1, name: "Attestation Pôle Emploi - Octobre 2025.pdf", date: "2025-11-01", type: "Attestation", size: "245 KB" }, + { id: 2, name: "Certificat de travail - Tournée.pdf", date: "2025-05-16", type: "Certificat", size: "189 KB" }, + { id: 3, name: "RIB.pdf", date: "2025-01-10", type: "Bancaire", size: "78 KB" }, + ]; + + const mockPendingSignatures = [ + { + id: 1, + title: "Contrat CDDU - Spectacle de Noël", + organization: "Centre Culturel", + dueDate: "2025-11-10", + priority: "high" + } + ]; + + const mockNotifications = [ + { id: 1, type: "success", message: "Votre fiche de paie d'octobre est disponible", date: "Il y a 2 heures" }, + { id: 2, type: "warning", message: "Un nouveau contrat attend votre signature", date: "Il y a 1 jour" }, + { id: 3, type: "info", message: "Pensez à mettre à jour votre RIB si nécessaire", date: "Il y a 3 jours" }, + ]; + + // Données mockées pour les congés (RG uniquement) + const mockCongesBalance = { + congesPayes: { acquis: 25, pris: 12, solde: 13 }, + rtt: { acquis: 10, pris: 4, solde: 6 }, + congesSansSolde: { pris: 0 }, + }; + + const mockCongesHistory = [ + { + id: 1, + type: "Congés payés", + startDate: "2025-08-15", + endDate: "2025-08-29", + days: 10, + status: "approved", + approvedBy: "Marie Martin", + approvedAt: "2025-07-20" + }, + { + id: 2, + type: "RTT", + startDate: "2025-10-10", + endDate: "2025-10-10", + days: 1, + status: "approved", + approvedBy: "Marie Martin", + approvedAt: "2025-10-01" + }, + { + id: 3, + type: "Congés payés", + startDate: "2025-12-23", + endDate: "2025-12-31", + days: 5, + status: "pending", + approvedBy: null, + approvedAt: null + }, + ]; + + return ( +
+ {/* Header */} +
+
+
+
+
+ O +
+
+

Espace Paie Salarié

+

MOCKUP - Interface de démonstration

+
+
+
+ +
+
+

{mockEmployee.firstName} {mockEmployee.lastName}

+

Salarié

+
+
+ +
+
+
+
+
+
+ +
+ {/* Navigation Tabs */} + + + {/* Content */} + {activeTab === 'accueil' && ( +
+ {/* Welcome Banner */} +
+

Bonjour {mockEmployee.firstName} !

+

Bienvenue sur votre espace personnel. Gérez vos documents, contrats et informations en toute simplicité.

+
+ + {/* Pending Actions */} + {mockPendingSignatures.length > 0 && ( +
+
+ +
+

Actions en attente

+
+ {mockPendingSignatures.map(sig => ( +
+
+
+

{sig.title}

+

{sig.organization}

+

À signer avant le {new Date(sig.dueDate).toLocaleDateString('fr-FR')}

+
+ +
+
+ ))} +
+
+
+
+ )} + +
+ {/* Quick Stats */} +
+
+
+
+ +
+

3

+

Contrats actifs

+
+
+
+ +
+

24

+

Fiches de paie

+
+
+
+ +
+

1

+

À signer

+
+
+ + {/* Recent Payslips */} +
+
+

Dernières fiches de paie

+ +
+
+ {mockPayslips.slice(0, 3).map(payslip => ( +
+
+
+ +
+
+

{payslip.month}

+

{payslip.amount} €

+
+
+ +
+ ))} +
+
+
+ + {/* Notifications */} +
+

Notifications

+
+ {mockNotifications.map(notif => ( +
+

{notif.message}

+

{notif.date}

+
+ ))} +
+
+
+
+ )} + + {activeTab === 'contrats' && ( +
+
+

Mes Contrats de Travail

+
+ +
+
+ +
+ {mockContracts.map(contract => ( +
+
+
+
+ + {contract.status === 'active' ? 'En cours' : + contract.status === 'signed' ? 'Signé' : + 'Terminé'} + + + {contract.type} + +
+

{contract.title}

+

{contract.organization}

+
+
+ + Du {new Date(contract.startDate).toLocaleDateString('fr-FR')} au {new Date(contract.endDate).toLocaleDateString('fr-FR')} +
+
+ + Signé le {new Date(contract.signedAt).toLocaleDateString('fr-FR')} +
+
+
+
+ + +
+
+
+ ))} +
+
+ )} + + {activeTab === 'paie' && ( +
+
+

Mes Fiches de Paie

+ +
+ +
+
+ + + + + + + + + + + {mockPayslips.map(payslip => ( + + + + + + + ))} + +
+ Période + + Montant Net + + Statut + + Actions +
+
+
+ +
+ {payslip.month} +
+ 		+ {payslip.amount} € + + + Disponible + + +
+ + +
+
+
+
+
+ )} + + {activeTab === 'conges' && ( +
+ {/* Header with info badge */} +
+
+

Congés & RTT

+

Gérez vos demandes de congés et consultez vos soldes

+
+
+

Réservé au Régime Général uniquement

+
+
+ + {/* Soldes des congés */} +
+
+
+

Congés Payés

+ +
+
+
+ Acquis + {mockCongesBalance.congesPayes.acquis} jours +
+
+ Pris + {mockCongesBalance.congesPayes.pris} jours +
+
+
+ Solde + {mockCongesBalance.congesPayes.solde} jours +
+
+
+
+ +
+
+

RTT

+ +
+
+
+ Acquis + {mockCongesBalance.rtt.acquis} jours +
+
+ Pris + {mockCongesBalance.rtt.pris} jours +
+
+
+ Solde + {mockCongesBalance.rtt.solde} jours +
+
+
+
+ +
+
+

Congés sans solde

+ +
+
+
+ Pris cette année + {mockCongesBalance.congesSansSolde.pris} jours +
+

Les congés sans solde sont soumis à validation de l'employeur

+
+
+
+ + {/* Nouvelle demande */} +
+
+

Faire une nouvelle demande

+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +