Spaces:
Running
Running
DEVELOPPE MOI UNE APP POUR UN TECHNICIEN INFORMATQUE, creation de fiche client, avec nombre pc, et nombre serveur, lors de passage sur site pour les visites preventives, il pourra creer une fiche vp de controle, qui compendra l'ensemble des controles de maintenantce du poste et ou du serveur, il devra remplir la fiche suite aux controles, lensemble des champs de saisies ont des listes deroulantes avec tout les choix possibles pars point de controle, ou des cases a coche....le but etant de remplir rapidement les elements controles
c6bfd28 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Visites Préventives | TechGuard VP</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800">Visites Préventives</h1> | |
| <button onclick="openVPModal()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 inline-flex items-center"> | |
| <i data-feather="plus" class="mr-2"></i> Nouvelle VP | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-8"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technicien</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <!-- Sample data - would be populated from API in real app --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">Entreprise A</td> | |
| <td class="px-6 py-4 whitespace-nowrap">15/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Jean Dupont</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complétée</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <a href="vp-detail.html" class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i data-feather="eye"></i> | |
| </a> | |
| <button class="text-red-600 hover:text-red-800"> | |
| <i data-feather="trash-2"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">Société B</td> | |
| <td class="px-6 py-4 whitespace-nowrap">20/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Marie Martin</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">En cours</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <a href="vp-detail.html" class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i data-feather="eye"></i> | |
| </a> | |
| <button class="text-red-600 hover:text-red-800"> | |
| <i data-feather="trash-2"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- VP Modal --> | |
| <div id="vpModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl"> | |
| <div class="flex justify-between items-center border-b px-6 py-4"> | |
| <h3 class="text-xl font-semibold text-gray-800">Nouvelle Visite Préventive</h3> | |
| <button onclick="closeVPModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="vpForm"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="vpClient" class="block text-sm font-medium text-gray-700 mb-1">Client</label> | |
| <select id="vpClient" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Sélectionner un client</option> | |
| <option value="1">Entreprise A</option> | |
| <option value="2">Société B</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="vpDate" class="block text-sm font-medium text-gray-700 mb-1">Date</label> | |
| <input type="date" id="vpDate" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="vpTechnician" class="block text-sm font-medium text-gray-700 mb-1">Technicien</label> | |
| <select id="vpTechnician" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Sélectionner un technicien</option> | |
| <option value="1">Jean Dupont</option> | |
| <option value="2">Marie Martin</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="vpType" class="block text-sm font-medium text-gray-700 mb-1">Type de visite</label> | |
| <select id="vpType" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Sélectionner un type</option> | |
| <option value="standard">Standard</option> | |
| <option value="complete">Complète</option> | |
| <option value="server">Serveurs uniquement</option> | |
| </select> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="flex justify-end border-t px-6 py-4"> | |
| <button onclick="closeVPModal()" class="mr-3 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Annuler</button> | |
| <button onclick="saveVP()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">Commencer</button> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| function openVPModal() { | |
| document.getElementById('vpModal').classList.remove('hidden'); | |
| } | |
| function closeVPModal() { | |
| document.getElementById('vpModal').classList.add('hidden'); | |
| } | |
| function saveVP() { | |
| if (validateForm('vpForm')) { | |
| // Here you would typically save to API and redirect to VP detail page | |
| window.location.href = 'vp-detail.html'; | |
| } | |
| } | |
| </script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |