Spaces:

depan724
/

dashboard

Running

App Files Files Community

depan724 commited on Oct 12, 2025

Commit

a7b5fd6

verified ·

1 Parent(s): 70ef28d

dans la partie nouvelle employé, il faut ajouté n° sécurité sociale, et un espage piece jointe pour charger des documents

Browse files

Files changed (1) hide show

nouveau-employe.html +265 -0

nouveau-employe.html ADDED Viewed

	@@ -0,0 +1,265 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Remorquage Pro - Nouvel Employé</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .sidebar {
+            transition: all 0.3s ease;
+        }
+        .active-menu {
+            background-color: #3B82F6;
+            color: white;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 flex h-screen">
+    <!-- Sidebar -->
+    <div class="sidebar bg-blue-800 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out" id="sidebar">
+        <div class="text-white flex items-center space-x-2 px-4">
+            <i data-feather="truck" class="h-8 w-8"></i>
+            <span class="text-2xl font-extrabold">Remorquage Pro</span>
+        </div>
+        <nav>
+            <a href="index.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="clients.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="users"></i>
+                <span>Clients</span>
+            </a>
+            <a href="employes.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="user-check"></i>
+                <span>Employés</span>
+            </a>
+            <a href="vehicules.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="truck"></i>
+                <span>Véhicules</span>
+            </a>
+            <a href="missions.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="map-pin"></i>
+                <span>Missions</span>
+            </a>
+            <a href="assurances.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="shield"></i>
+                <span>Assurances</span>
+            </a>
+            <a href="reglements.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="credit-card"></i>
+                <span>Règlements</span>
+            </a>
+            <a href="rapports.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
+                <i data-feather="bar-chart-2"></i>
+                <span>Rapports</span>
+            </a>
+        </nav>
+    </div>
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col overflow-hidden">
+        <!-- Header -->
+        <header class="bg-white shadow-sm">
+            <div class="flex items-center justify-between p-4">
+                <div class="flex items-center">
+                    <button id="menu-toggle" class="text-gray-500 focus:outline-none md:hidden">
+                        <i data-feather="menu"></i>
+                    </button>
+                    <h1 class="text-2xl font-semibold text-gray-800 ml-4">Nouvel Employé</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="relative">
+                        <i data-feather="bell" class="text-gray-500"></i>
+                        <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
+                    </div>
+                    <div class="flex items-center">
+                        <img src="http://static.photos/people/40x40/10" alt="Profile" class="h-10 w-10 rounded-full">
+                        <span class="ml-2 text-gray-700">Admin</span>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <!-- Content -->
+        <main class="flex-1 overflow-y-auto p-6 bg-gray-100">
+            <div class="max-w-3xl mx-auto bg-white rounded-lg shadow p-8" data-aos="fade-up">
+                <h2 class="text-xl font-semibold text-gray-800 mb-6">Informations de l'employé</h2>
+                <form class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
+                            <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
+                            <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Numéro de Sécurité Sociale</label>
+                            <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="1 85 06 75 115 007 36">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">N° Carte Vitale</label>
+                            <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="1234567890123">
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                            <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
+                            <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
+                        <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Code Postal</label>
+                            <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Ville</label>
+                            <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Pays</label>
+                            <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                                <option value="FR" selected>France</option>
+                                <option value="DE">Allemagne</option>
+                                <option value="BE">Belgique</option>
+                                <option value="other">Autre</option>
+                            </select>
+                        </div>
+                    </div>
+                    <!-- Pièces jointes -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Documents obligatoires (CV, Contrat, Carte Vitale, Documents d'identité)</label>
+                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
+                            <div class="space-y-1 text-center">
+                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                </svg>
+                                <div class="flex text-sm text-gray-600">
+                                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
+                                        <span>Uploader un fichier</span>
+                                        <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple>
+                                    </label>
+                                    <p class="pl-1">ou glisser-déposer</p>
+                                </div>
+                                <p class="text-xs text-gray-500">
+                                    PNG, JPG, PDF, DOCX jusqu'à 10MB
+                                </p>
+                            </div>
+                        </div>
+                        <div id="file-list" class="mt-2 grid grid-cols-3 gap-4"></div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Informations complémentaires</label>
+                        <textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
+                    </div>
+                    <div class="flex justify-end space-x-4 pt-4">
+                        <a href="employes.html" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition duration-200">
+                            Annuler
+                        </a>
+                        <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
+                            Enregistrer l'employé
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </main>
+    </div>
+    <script>
+        // Toggle sidebar on mobile
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            document.getElementById('sidebar').classList.toggle('-translate-x-full');
+        });
+        // Gestion des pièces jointes
+        const fileInput = document.getElementById('file-upload');
+        const fileList = document.getElementById('file-list');
+        fileInput.addEventListener('change', function(e) {
+            fileList.innerHTML = '';
+            for (const file of e.target.files) {
+                const fileItem = document.createElement('div');
+                fileItem.className = 'flex items-center p-2 border rounded-lg';
+                const fileIcon = document.createElement('div');
+                fileIcon.className = 'flex-shrink-0 mr-3';
+                let iconClass = 'text-gray-400';
+                if (file.type.includes('image')) {
+                    iconClass = 'text-blue-400';
+                } else if (file.type.includes('pdf')) {
+                    iconClass = 'text-red-400';
+                }
+                fileIcon.innerHTML = `<i data-feather="file" class="h-5 w-5 ${iconClass}"></i>`;
+                const fileInfo = document.createElement('div');
+                fileInfo.className = 'flex-1 min-w-0';
+                fileInfo.innerHTML = `
+                    <p class="text-sm font-medium text-gray-900 truncate">${file.name}</p>
+                    <p class="text-xs text-gray-500">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
+                `;
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'ml-2 text-red-500 hover:text-red-700';
+                removeBtn.innerHTML = '<i data-feather="x" class="h-4 w-4"></i>';
+                removeBtn.onclick = () => {
+                    fileItem.remove();
+                };
+                fileItem.appendChild(fileIcon);
+                fileItem.appendChild(fileInfo);
+                fileItem.appendChild(removeBtn);
+                fileList.appendChild(fileItem);
+            }
+            feather.replace();
+        });
+        // Gestion du drag and drop
+        const dropZone = fileInput.closest('div');
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('border-blue-500');
+        });
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('border-blue-500');
+        });
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('border-blue-500');
+            fileInput.files = e.dataTransfer.files;
+            fileInput.dispatchEvent(new Event('change'));
+        });
+    </script>
+    <script>AOS.init();</script>
+    <script>feather.replace();</script>
+</body>
+</html>