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>Rapports | 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"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-8">Rapports</h1> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h2 class="text-xl font-semibold text-gray-800">Filtrer les rapports</h2> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label for="reportClient" class="block text-sm font-medium text-gray-700 mb-1">Client</label> | |
| <select id="reportClient" 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"> | |
| <option value="">Tous les clients</option> | |
| <option value="1">Entreprise A</option> | |
| <option value="2">Société B</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="reportTechnician" class="block text-sm font-medium text-gray-700 mb-1">Technicien</label> | |
| <select id="reportTechnician" 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"> | |
| <option value="">Tous les techniciens</option> | |
| <option value="1">Jean Dupont</option> | |
| <option value="2">Marie Martin</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="reportDateFrom" class="block text-sm font-medium text-gray-700 mb-1">De</label> | |
| <input type="date" id="reportDateFrom" 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"> | |
| </div> | |
| <div> | |
| <label for="reportDateTo" class="block text-sm font-medium text-gray-700 mb-1">À</label> | |
| <input type="date" id="reportDateTo" 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"> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 inline-flex items-center"> | |
| <i data-feather="filter" class="mr-2"></i> Filtrer | |
| </button> | |
| </div> | |
| </div> | |
| <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">Date</th> | |
| <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">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"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">15/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Entreprise A</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é</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i data-feather="download"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">10/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Société B</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-green-100 text-green-800">Complété</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-3"> | |
| <i data-feather="download"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |