Hugging Face's logo

Spaces:
nobdistrib
/
techguard-vp-manager
Running

App Files Community
nobdistrib commited on
Commit
c6bfd28
·
verified ·
1 Parent(s): 81061da

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

Browse files
Files changed (10) hide show
  1. README.md +8 -5
  2. clients.html +138 -0
  3. components/footer.js +56 -0
  4. components/navbar.js +102 -0
  5. index.html +76 -19
  6. reports.html +113 -0
  7. script.js +42 -0
  8. style.css +21 -18
  9. vp-detail.html +169 -0
  10. vp.html +150 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Techguard Vp Manager
3
- emoji: 🐠
4
- colorFrom: red
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: TechGuard VP Manager ️🔧
3
+ colorFrom: purple
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
clients.html ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gestion Clients | TechGuard VP</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-100">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="flex justify-between items-center mb-8">
19
+ <h1 class="text-3xl font-bold text-gray-800">Gestion des Clients</h1>
20
+ <button onclick="openClientModal()" 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">
21
+ <i data-feather="plus" class="mr-2"></i> Nouveau Client
22
+ </button>
23
+ </div>
24
+
25
+ <div class="bg-white rounded-lg shadow overflow-hidden">
26
+ <div class="overflow-x-auto">
27
+ <table class="min-w-full divide-y divide-gray-200">
28
+ <thead class="bg-gray-50">
29
+ <tr>
30
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
31
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adresse</th>
32
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PC</th>
33
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Serveurs</th>
34
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
35
+ </tr>
36
+ </thead>
37
+ <tbody class="bg-white divide-y divide-gray-200">
38
+ <!-- Sample data - would be populated from API in real app -->
39
+ <tr>
40
+ <td class="px-6 py-4 whitespace-nowrap">Entreprise A</td>
41
+ <td class="px-6 py-4 whitespace-nowrap">123 Rue Principale, Paris</td>
42
+ <td class="px-6 py-4 whitespace-nowrap">15</td>
43
+ <td class="px-6 py-4 whitespace-nowrap">2</td>
44
+ <td class="px-6 py-4 whitespace-nowrap">
45
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
46
+ <i data-feather="edit"></i>
47
+ </button>
48
+ <button class="text-red-600 hover:text-red-800">
49
+ <i data-feather="trash-2"></i>
50
+ </button>
51
+ </td>
52
+ </tr>
53
+ <tr>
54
+ <td class="px-6 py-4 whitespace-nowrap">Société B</td>
55
+ <td class="px-6 py-4 whitespace-nowrap">456 Avenue Centrale, Lyon</td>
56
+ <td class="px-6 py-4 whitespace-nowrap">8</td>
57
+ <td class="px-6 py-4 whitespace-nowrap">1</td>
58
+ <td class="px-6 py-4 whitespace-nowrap">
59
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
60
+ <i data-feather="edit"></i>
61
+ </button>
62
+ <button class="text-red-600 hover:text-red-800">
63
+ <i data-feather="trash-2"></i>
64
+ </button>
65
+ </td>
66
+ </tr>
67
+ </tbody>
68
+ </table>
69
+ </div>
70
+ </div>
71
+ </main>
72
+
73
+ <!-- Client Modal -->
74
+ <div id="clientModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">
75
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
76
+ <div class="flex justify-between items-center border-b px-6 py-4">
77
+ <h3 class="text-xl font-semibold text-gray-800">Nouveau Client</h3>
78
+ <button onclick="closeClientModal()" class="text-gray-500 hover:text-gray-700">
79
+ <i data-feather="x"></i>
80
+ </button>
81
+ </div>
82
+ <div class="p-6">
83
+ <form id="clientForm">
84
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
85
+ <div>
86
+ <label for="clientName" class="block text-sm font-medium text-gray-700 mb-1">Nom du client</label>
87
+ <input type="text" id="clientName" 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>
88
+ </div>
89
+ <div>
90
+ <label for="clientAddress" class="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
91
+ <input type="text" id="clientAddress" 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>
92
+ </div>
93
+ <div>
94
+ <label for="pcCount" class="block text-sm font-medium text-gray-700 mb-1">Nombre de PC</label>
95
+ <input type="number" id="pcCount" min="0" 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>
96
+ </div>
97
+ <div>
98
+ <label for="serverCount" class="block text-sm font-medium text-gray-700 mb-1">Nombre de serveurs</label>
99
+ <input type="number" id="serverCount" min="0" 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>
100
+ </div>
101
+ </div>
102
+ <div class="mt-6">
103
+ <label for="clientNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
104
+ <textarea id="clientNotes" rows="3" 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"></textarea>
105
+ </div>
106
+ </form>
107
+ </div>
108
+ <div class="flex justify-end border-t px-6 py-4">
109
+ <button onclick="closeClientModal()" class="mr-3 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Annuler</button>
110
+ <button onclick="saveClient()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Enregistrer</button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <custom-footer></custom-footer>
116
+
117
+ <script>
118
+ feather.replace();
119
+
120
+ function openClientModal() {
121
+ document.getElementById('clientModal').classList.remove('hidden');
122
+ }
123
+
124
+ function closeClientModal() {
125
+ document.getElementById('clientModal').classList.add('hidden');
126
+ }
127
+
128
+ function saveClient() {
129
+ if (validateForm('clientForm')) {
130
+ // Here you would typically save to API
131
+ alert('Client enregistré avec succès!');
132
+ closeClientModal();
133
+ }
134
+ }
135
+ </script>
136
+ <script src="script.js"></script>
137
+ </body>
138
+ </html>
components/footer.js ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer {
7
+ background-color: #1a202c;
8
+ }
9
+ .footer-link:hover {
10
+ color: #4299e1;
11
+ transition: color 0.3s ease;
12
+ }
13
+ </style>
14
+ <footer class="footer text-white py-8">
15
+ <div class="container mx-auto px-4">
16
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
17
+ <div>
18
+ <h3 class="text-xl font-bold mb-4">TechGuard VP</h3>
19
+ <p class="text-gray-400">Solution de gestion des visites préventives pour techniciens informatiques.</p>
20
+ </div>
21
+ <div>
22
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
23
+ <ul class="space-y-2">
24
+ <li><a href="index.html" class="footer-link text-gray-400 hover:text-white">Accueil</a></li>
25
+ <li><a href="clients.html" class="footer-link text-gray-400 hover:text-white">Clients</a></li>
26
+ <li><a href="vp.html" class="footer-link text-gray-400 hover:text-white">Visites Préventives</a></li>
27
+ <li><a href="reports.html" class="footer-link text-gray-400 hover:text-white">Rapports</a></li>
28
+ </ul>
29
+ </div>
30
+ <div>
31
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
32
+ <ul class="space-y-2">
33
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Documentation</a></li>
34
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">FAQ</a></li>
35
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Contact</a></li>
36
+ </ul>
37
+ </div>
38
+ <div>
39
+ <h4 class="text-lg font-semibold mb-4">Contact</h4>
40
+ <ul class="space-y-2">
41
+ <li class="flex items-center text-gray-400"><i data-feather="mail" class="mr-2"></i> contact@techguardvp.com</li>
42
+ <li class="flex items-center text-gray-400"><i data-feather="phone" class="mr-2"></i> +33 1 23 45 67 89</li>
43
+ <li class="flex items-center text-gray-400"><i data-feather="map-pin" class="mr-2"></i> Paris, France</li>
44
+ </ul>
45
+ </div>
46
+ </div>
47
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
48
+ <p>&copy; 2023 TechGuard VP. Tous droits réservés.</p>
49
+ </div>
50
+ </div>
51
+ </footer>
52
+ `;
53
+ }
54
+ }
55
+
56
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,102 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .navbar {
7
+ transition: all 0.3s ease;
8
+ }
9
+ .nav-link {
10
+ position: relative;
11
+ }
12
+ .nav-link:after {
13
+ content: '';
14
+ position: absolute;
15
+ width: 0;
16
+ height: 2px;
17
+ bottom: -2px;
18
+ left: 0;
19
+ background-color: #3b82f6;
20
+ transition: width 0.3s ease;
21
+ }
22
+ .nav-link:hover:after {
23
+ width: 100%;
24
+ }
25
+ </style>
26
+ <nav class="navbar bg-white shadow-md">
27
+ <div class="container mx-auto px-4">
28
+ <div class="flex justify-between items-center h-16">
29
+ <div class="flex items-center">
30
+ <a href="index.html" class="flex items-center">
31
+ <i data-feather="shield" class="text-blue-600 mr-2"></i>
32
+ <span class="text-xl font-bold text-gray-800">TechGuard VP</span>
33
+ </a>
34
+ </div>
35
+ <div class="hidden md:block">
36
+ <div class="ml-10 flex items-baseline space-x-8">
37
+ <a href="clients.html" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Clients</a>
38
+ <a href="vp.html" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Visites Préventives</a>
39
+ <a href="reports.html" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Rapports</a>
40
+ </div>
41
+ </div>
42
+ <div class="hidden md:block">
43
+ <div class="ml-4 flex items-center md:ml-6">
44
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
45
+ <i data-feather="bell"></i>
46
+ </button>
47
+ <div class="ml-3 relative">
48
+ <div>
49
+ <button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
50
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile">
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ <div class="-mr-2 flex md:hidden">
57
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
58
+ <i data-feather="menu"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ <!-- Mobile menu -->
64
+ <div id="mobile-menu" class="hidden md:hidden">
65
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
66
+ <a href="clients.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Clients</a>
67
+ <a href="vp.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Visites Préventives</a>
68
+ <a href="reports.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Rapports</a>
69
+ </div>
70
+ <div class="pt-4 pb-3 border-t border-gray-200">
71
+ <div class="flex items-center px-5">
72
+ <div class="flex-shrink-0">
73
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile">
74
+ </div>
75
+ <div class="ml-3">
76
+ <div class="text-base font-medium text-gray-800">Jean Dupont</div>
77
+ <div class="text-sm font-medium text-gray-500">Technicien</div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </nav>
83
+ `;
84
+
85
+ // Add mobile menu toggle functionality
86
+ const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
87
+ const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
88
+
89
+ mobileMenuButton.addEventListener('click', () => {
90
+ mobileMenu.classList.toggle('hidden');
91
+ const icon = mobileMenuButton.querySelector('i');
92
+ if (mobileMenu.classList.contains('hidden')) {
93
+ icon.setAttribute('data-feather', 'menu');
94
+ } else {
95
+ icon.setAttribute('data-feather', 'x');
96
+ }
97
+ feather.replace();
98
+ });
99
+ }
100
+ }
101
+
102
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,76 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TechGuard VP Manager</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-100">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="text-center mb-12">
19
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">TechGuard VP Manager</h1>
20
+ <p class="text-xl text-gray-600">Gestion des visites préventives pour techniciens informatiques</p>
21
+ </div>
22
+
23
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
24
+ <!-- Client Card -->
25
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
26
+ <div class="bg-blue-600 p-4 text-white">
27
+ <i data-feather="users" class="inline mr-2"></i>
28
+ <h2 class="text-xl font-semibold inline">Clients</h2>
29
+ </div>
30
+ <div class="p-6">
31
+ <p class="text-gray-700 mb-6">Gérez vos clients et leurs équipements informatiques.</p>
32
+ <a href="clients.html" 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">
33
+ <i data-feather="arrow-right" class="mr-2"></i> Accéder
34
+ </a>
35
+ </div>
36
+ </div>
37
+
38
+ <!-- VP Card -->
39
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
40
+ <div class="bg-green-600 p-4 text-white">
41
+ <i data-feather="clipboard" class="inline mr-2"></i>
42
+ <h2 class="text-xl font-semibold inline">Visites Préventives</h2>
43
+ </div>
44
+ <div class="p-6">
45
+ <p class="text-gray-700 mb-6">Créez et complétez vos fiches de contrôle préventif.</p>
46
+ <a href="vp.html" 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">
47
+ <i data-feather="arrow-right" class="mr-2"></i> Accéder
48
+ </a>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Reports Card -->
53
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
54
+ <div class="bg-purple-600 p-4 text-white">
55
+ <i data-feather="file-text" class="inline mr-2"></i>
56
+ <h2 class="text-xl font-semibold inline">Rapports</h2>
57
+ </div>
58
+ <div class="p-6">
59
+ <p class="text-gray-700 mb-6">Consultez et exportez vos rapports de maintenance.</p>
60
+ <a href="reports.html" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 inline-flex items-center">
61
+ <i data-feather="arrow-right" class="mr-2"></i> Accéder
62
+ </a>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </main>
67
+
68
+ <custom-footer></custom-footer>
69
+
70
+ <script>
71
+ feather.replace();
72
+ </script>
73
+ <script src="script.js"></script>
74
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
75
+ </body>
76
+ </html>
reports.html ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Rapports | TechGuard VP</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-100">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <h1 class="text-3xl font-bold text-gray-800 mb-8">Rapports</h1>
19
+
20
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
21
+ <div class="p-6 border-b border-gray-200">
22
+ <h2 class="text-xl font-semibold text-gray-800">Filtrer les rapports</h2>
23
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
24
+ <div>
25
+ <label for="reportClient" class="block text-sm font-medium text-gray-700 mb-1">Client</label>
26
+ <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">
27
+ <option value="">Tous les clients</option>
28
+ <option value="1">Entreprise A</option>
29
+ <option value="2">Société B</option>
30
+ </select>
31
+ </div>
32
+ <div>
33
+ <label for="reportTechnician" class="block text-sm font-medium text-gray-700 mb-1">Technicien</label>
34
+ <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">
35
+ <option value="">Tous les techniciens</option>
36
+ <option value="1">Jean Dupont</option>
37
+ <option value="2">Marie Martin</option>
38
+ </select>
39
+ </div>
40
+ <div>
41
+ <label for="reportDateFrom" class="block text-sm font-medium text-gray-700 mb-1">De</label>
42
+ <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">
43
+ </div>
44
+ <div>
45
+ <label for="reportDateTo" class="block text-sm font-medium text-gray-700 mb-1">À</label>
46
+ <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">
47
+ </div>
48
+ </div>
49
+ <div class="mt-4 flex justify-end">
50
+ <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">
51
+ <i data-feather="filter" class="mr-2"></i> Filtrer
52
+ </button>
53
+ </div>
54
+ </div>
55
+
56
+ <div class="overflow-x-auto">
57
+ <table class="min-w-full divide-y divide-gray-200">
58
+ <thead class="bg-gray-50">
59
+ <tr>
60
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
61
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
62
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technicien</th>
63
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
64
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
65
+ </tr>
66
+ </thead>
67
+ <tbody class="bg-white divide-y divide-gray-200">
68
+ <tr>
69
+ <td class="px-6 py-4 whitespace-nowrap">15/06/2023</td>
70
+ <td class="px-6 py-4 whitespace-nowrap">Entreprise A</td>
71
+ <td class="px-6 py-4 whitespace-nowrap">Jean Dupont</td>
72
+ <td class="px-6 py-4 whitespace-nowrap">
73
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complété</span>
74
+ </td>
75
+ <td class="px-6 py-4 whitespace-nowrap">
76
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
77
+ <i data-feather="download"></i>
78
+ </button>
79
+ <button class="text-purple-600 hover:text-purple-800">
80
+ <i data-feather="eye"></i>
81
+ </button>
82
+ </td>
83
+ </tr>
84
+ <tr>
85
+ <td class="px-6 py-4 whitespace-nowrap">10/06/2023</td>
86
+ <td class="px-6 py-4 whitespace-nowrap">Société B</td>
87
+ <td class="px-6 py-4 whitespace-nowrap">Marie Martin</td>
88
+ <td class="px-6 py-4 whitespace-nowrap">
89
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complété</span>
90
+ </td>
91
+ <td class="px-6 py-4 whitespace-nowrap">
92
+ <button class="text-blue-600 hover:text-blue-800 mr-3">
93
+ <i data-feather="download"></i>
94
+ </button>
95
+ <button class="text-purple-600 hover:text-purple-800">
96
+ <i data-feather="eye"></i>
97
+ </button>
98
+ </td>
99
+ </tr>
100
+ </tbody>
101
+ </table>
102
+ </div>
103
+ </div>
104
+ </main>
105
+
106
+ <custom-footer></custom-footer>
107
+
108
+ <script>
109
+ feather.replace();
110
+ </script>
111
+ <script src="script.js"></script>
112
+ </body>
113
+ </html>
script.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared JavaScript functions
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Initialize tooltips
4
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
5
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
6
+ return new bootstrap.Tooltip(tooltipTriggerEl);
7
+ });
8
+ });
9
+
10
+ // Form validation function
11
+ function validateForm(formId) {
12
+ const form = document.getElementById(formId);
13
+ const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
14
+ let isValid = true;
15
+
16
+ inputs.forEach(input => {
17
+ if (!input.value) {
18
+ input.classList.add('border-red-500');
19
+ isValid = false;
20
+ } else {
21
+ input.classList.remove('border-red-500');
22
+ }
23
+ });
24
+
25
+ return isValid;
26
+ }
27
+
28
+ // Toggle dropdown function
29
+ function toggleDropdown(dropdownId) {
30
+ const dropdown = document.getElementById(dropdownId);
31
+ dropdown.classList.toggle('hidden');
32
+ }
33
+
34
+ // Close dropdown when clicking outside
35
+ document.addEventListener('click', function(event) {
36
+ const dropdowns = document.querySelectorAll('.dropdown-content');
37
+ dropdowns.forEach(dropdown => {
38
+ if (!dropdown.contains(event.target) && !event.target.matches('.dropdown-toggle')) {
39
+ dropdown.classList.add('hidden');
40
+ }
41
+ });
42
+ });
style.css CHANGED
@@ -1,28 +1,31 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles that can't be handled by Tailwind */
2
  body {
3
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
4
  }
5
 
6
+ /* Animation for form inputs */
7
+ .form-input {
8
+ transition: all 0.3s ease;
9
  }
10
 
11
+ .form-input:focus {
12
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 
 
 
13
  }
14
 
15
+ /* Custom scrollbar */
16
+ ::-webkit-scrollbar {
17
+ width: 8px;
 
 
 
18
  }
19
 
20
+ ::-webkit-scrollbar-track {
21
+ background: #f1f1f1;
22
  }
23
+
24
+ ::-webkit-scrollbar-thumb {
25
+ background: #888;
26
+ border-radius: 4px;
27
+ }
28
+
29
+ ::-webkit-scrollbar-thumb:hover {
30
+ background: #555;
31
+ }
vp-detail.html ADDED
@@ -0,0 +1,169 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Détail VP | TechGuard VP</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-100">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="flex justify-between items-center mb-8">
19
+ <div>
20
+ <h1 class="text-3xl font-bold text-gray-800">Visite Préventive</h1>
21
+ <p class="text-gray-600">Client: Entreprise A - 15/06/2023</p>
22
+ </div>
23
+ <div class="flex space-x-4">
24
+ <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">
25
+ <i data-feather="printer" class="mr-2"></i> Imprimer
26
+ </button>
27
+ <button 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">
28
+ <i data-feather="save" class="mr-2"></i> Enregistrer
29
+ </button>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
34
+ <div class="border-b border-gray-200">
35
+ <nav class="flex -mb-px">
36
+ <button class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-blue-500 text-blue-600">
37
+ <i data-feather="monitor" class="inline mr-2"></i> Postes de travail
38
+ </button>
39
+ <button class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
40
+ <i data-feather="server" class="inline mr-2"></i> Serveurs
41
+ </button>
42
+ <button class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
43
+ <i data-feather="file-text" class="inline mr-2"></i> Notes
44
+ </button>
45
+ </nav>
46
+ </div>
47
+
48
+ <div class="p-6">
49
+ <div class="mb-8">
50
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Contrôles généraux</h3>
51
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
52
+ <!-- Checkbox controls -->
53
+ <div class="flex items-center">
54
+ <input id="check1" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
55
+ <label for="check1" class="ml-2 block text-sm text-gray-900">Nettoyage physique des postes</label>
56
+ </div>
57
+ <div class="flex items-center">
58
+ <input id="check2" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
59
+ <label for="check2" class="ml-2 block text-sm text-gray-900">Vérification des sauvegardes</label>
60
+ </div>
61
+ <div class="flex items-center">
62
+ <input id="check3" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
63
+ <label for="check3" class="ml-2 block text-sm text-gray-900">Mises à jour système</label>
64
+ </div>
65
+ <div class="flex items-center">
66
+ <input id="check4" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
67
+ <label for="check4" class="ml-2 block text-sm text-gray-900">Vérification antivirus</label>
68
+ </div>
69
+ <div class="flex items-center">
70
+ <input id="check5" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
71
+ <label for="check5" class="ml-2 block text-sm text-gray-900">Test des UPS</label>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="mb-8">
77
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Détails par poste</h3>
78
+
79
+ <div class="overflow-x-auto">
80
+ <table class="min-w-full divide-y divide-gray-200">
81
+ <thead class="bg-gray-50">
82
+ <tr>
83
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Poste</th>
84
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">État</th>
85
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Disque</th>
86
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RAM</th>
87
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
88
+ </tr>
89
+ </thead>
90
+ <tbody class="bg-white divide-y divide-gray-200">
91
+ <tr>
92
+ <td class="px-6 py-4 whitespace-nowrap">PC-001</td>
93
+ <td class="px-6 py-4 whitespace-nowrap">
94
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm">
95
+ <option>Opérationnel</option>
96
+ <option>Problème mineur</option>
97
+ <option>Problème majeur</option>
98
+ <option>Hors service</option>
99
+ </select>
100
+ </td>
101
+ <td class="px-6 py-4 whitespace-nowrap">
102
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm">
103
+ <option>OK</option>
104
+ <option>Espace faible</option>
105
+ <option>Erreurs</option>
106
+ </select>
107
+ </td>
108
+ <td class="px-6 py-4 whitespace-nowrap">
109
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm">
110
+ <option>OK</option>
111
+ <option>Utilisation élevée</option>
112
+ </select>
113
+ </td>
114
+ <td class="px-6 py-4 whitespace-nowrap">
115
+ <button class="text-blue-600 hover:text-blue-800">
116
+ <i data-feather="edit"></i>
117
+ </button>
118
+ </td>
119
+ </tr>
120
+ <tr>
121
+ <td class="px-6 py-4 whitespace-nowrap">PC-002</td>
122
+ <td class="px-6 py-4 whitespace-nowrap">
123
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm">
124
+ <option>Opérationnel</option>
125
+ <option selected>Problème mineur</option>
126
+ <option>Problème majeur</option>
127
+ <option>Hors service</option>
128
+ </select>
129
+ </td>
130
+ <td class="px-6 py-4 whitespace-nowrap">
131
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm">
132
+ <option>OK</option>
133
+ <option selected>Espace faible</option>
134
+ <option>Erreurs</option>
135
+ </select>
136
+ </td>
137
+ <td class="px-6 py-4 whitespace-nowrap">
138
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm">
139
+ <option>OK</option>
140
+ <option>Utilisation élevée</option>
141
+ </select>
142
+ </td>
143
+ <td class="px-6 py-4 whitespace-nowrap">
144
+ <button class="text-blue-600 hover:text-blue-800">
145
+ <i data-feather="edit"></i>
146
+ </button>
147
+ </td>
148
+ </tr>
149
+ </tbody>
150
+ </table>
151
+ </div>
152
+ </div>
153
+
154
+ <div>
155
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Observations</h3>
156
+ <textarea rows="4" 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" placeholder="Ajoutez vos observations ici..."></textarea>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </main>
161
+
162
+ <custom-footer></custom-footer>
163
+
164
+ <script>
165
+ feather.replace();
166
+ </script>
167
+ <script src="script.js"></script>
168
+ </body>
169
+ </html>
vp.html ADDED
@@ -0,0 +1,150 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Visites Préventives | TechGuard VP</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-100">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="flex justify-between items-center mb-8">
19
+ <h1 class="text-3xl font-bold text-gray-800">Visites Préventives</h1>
20
+ <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">
21
+ <i data-feather="plus" class="mr-2"></i> Nouvelle VP
22
+ </button>
23
+ </div>
24
+
25
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
26
+ <div class="overflow-x-auto">
27
+ <table class="min-w-full divide-y divide-gray-200">
28
+ <thead class="bg-gray-50">
29
+ <tr>
30
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
31
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
32
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technicien</th>
33
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
34
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
35
+ </tr>
36
+ </thead>
37
+ <tbody class="bg-white divide-y divide-gray-200">
38
+ <!-- Sample data - would be populated from API in real app -->
39
+ <tr>
40
+ <td class="px-6 py-4 whitespace-nowrap">Entreprise A</td>
41
+ <td class="px-6 py-4 whitespace-nowrap">15/06/2023</td>
42
+ <td class="px-6 py-4 whitespace-nowrap">Jean Dupont</td>
43
+ <td class="px-6 py-4 whitespace-nowrap">
44
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Complétée</span>
45
+ </td>
46
+ <td class="px-6 py-4 whitespace-nowrap">
47
+ <a href="vp-detail.html" class="text-blue-600 hover:text-blue-800 mr-3">
48
+ <i data-feather="eye"></i>
49
+ </a>
50
+ <button class="text-red-600 hover:text-red-800">
51
+ <i data-feather="trash-2"></i>
52
+ </button>
53
+ </td>
54
+ </tr>
55
+ <tr>
56
+ <td class="px-6 py-4 whitespace-nowrap">Société B</td>
57
+ <td class="px-6 py-4 whitespace-nowrap">20/06/2023</td>
58
+ <td class="px-6 py-4 whitespace-nowrap">Marie Martin</td>
59
+ <td class="px-6 py-4 whitespace-nowrap">
60
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">En cours</span>
61
+ </td>
62
+ <td class="px-6 py-4 whitespace-nowrap">
63
+ <a href="vp-detail.html" class="text-blue-600 hover:text-blue-800 mr-3">
64
+ <i data-feather="eye"></i>
65
+ </a>
66
+ <button class="text-red-600 hover:text-red-800">
67
+ <i data-feather="trash-2"></i>
68
+ </button>
69
+ </td>
70
+ </tr>
71
+ </tbody>
72
+ </table>
73
+ </div>
74
+ </div>
75
+ </main>
76
+
77
+ <!-- VP Modal -->
78
+ <div id="vpModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">
79
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
80
+ <div class="flex justify-between items-center border-b px-6 py-4">
81
+ <h3 class="text-xl font-semibold text-gray-800">Nouvelle Visite Préventive</h3>
82
+ <button onclick="closeVPModal()" class="text-gray-500 hover:text-gray-700">
83
+ <i data-feather="x"></i>
84
+ </button>
85
+ </div>
86
+ <div class="p-6">
87
+ <form id="vpForm">
88
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
89
+ <div>
90
+ <label for="vpClient" class="block text-sm font-medium text-gray-700 mb-1">Client</label>
91
+ <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>
92
+ <option value="">Sélectionner un client</option>
93
+ <option value="1">Entreprise A</option>
94
+ <option value="2">Société B</option>
95
+ </select>
96
+ </div>
97
+ <div>
98
+ <label for="vpDate" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
99
+ <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>
100
+ </div>
101
+ <div>
102
+ <label for="vpTechnician" class="block text-sm font-medium text-gray-700 mb-1">Technicien</label>
103
+ <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>
104
+ <option value="">Sélectionner un technicien</option>
105
+ <option value="1">Jean Dupont</option>
106
+ <option value="2">Marie Martin</option>
107
+ </select>
108
+ </div>
109
+ <div>
110
+ <label for="vpType" class="block text-sm font-medium text-gray-700 mb-1">Type de visite</label>
111
+ <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>
112
+ <option value="">Sélectionner un type</option>
113
+ <option value="standard">Standard</option>
114
+ <option value="complete">Complète</option>
115
+ <option value="server">Serveurs uniquement</option>
116
+ </select>
117
+ </div>
118
+ </div>
119
+ </form>
120
+ </div>
121
+ <div class="flex justify-end border-t px-6 py-4">
122
+ <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>
123
+ <button onclick="saveVP()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">Commencer</button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <custom-footer></custom-footer>
129
+
130
+ <script>
131
+ feather.replace();
132
+
133
+ function openVPModal() {
134
+ document.getElementById('vpModal').classList.remove('hidden');
135
+ }
136
+
137
+ function closeVPModal() {
138
+ document.getElementById('vpModal').classList.add('hidden');
139
+ }
140
+
141
+ function saveVP() {
142
+ if (validateForm('vpForm')) {
143
+ // Here you would typically save to API and redirect to VP detail page
144
+ window.location.href = 'vp-detail.html';
145
+ }
146
+ }
147
+ </script>
148
+ <script src="script.js"></script>
149
+ </body>
150
+ </html>