Spaces:
Running
Running
Download index.html from Timoxy/gestion-tecaled: direct link, hf CLI and curl.
- Browser
- Download file 79.4 kB
-
https://huggingface.co/spaces/Timoxy/gestion-tecaled/resolve/main/index.html
- Command line
-
hf download hf://spaces/Timoxy/gestion-tecaled/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Timoxy/gestion-tecaled/resolve/main/index.html
79.4 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GMAO LED - Suivi des Maintenances</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
dark: '#1F2937',
light: '#F3F4F6',
}
}
}
}
</script>
<style>
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.sidebar.collapsed .logo-text {
display: none;
}
.sidebar.collapsed .nav-item {
justify-content: center;
}
.main-content {
transition: all 0.3s ease;
}
.sidebar.collapsed + .main-content {
margin-left: 70px;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-dark text-white w-64 flex flex-col h-full fixed">
<div class="p-4 flex items-center border-b border-gray-700">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<i class="fas fa-tv text-white"></i>
</div>
<span class="logo-text ml-3 text-xl font-bold">LED GMAO</span>
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar py-4">
<nav>
<div class="px-4">
<div class="text-gray-400 uppercase text-xs font-semibold mb-2 sidebar-text">Menu Principal</div>
<a href="#" class="nav-item flex items-center px-4 py-3 text-white bg-primary rounded-lg mx-2 mb-1" onclick="showSection('dashboard')">
<i class="fas fa-tachometer-alt"></i>
<span class="sidebar-text ml-3">Tableau de bord</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('clients')">
<i class="fas fa-users"></i>
<span class="sidebar-text ml-3">Clients</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('ecrans')">
<i class="fas fa-tv"></i>
<span class="sidebar-text ml-3">Écrans LED</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('dalles')">
<i class="fas fa-th-large"></i>
<span class="sidebar-text ml-3">Dalles</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('modules')">
<i class="fas fa-microchip"></i>
<span class="sidebar-text ml-3">Modules</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('interventions')">
<i class="fas fa-tools"></i>
<span class="sidebar-text ml-3">Interventions</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('rapports')">
<i class="fas fa-file-alt"></i>
<span class="sidebar-text ml-3">Rapports</span>
</a>
</div>
<div class="px-4 mt-6">
<div class="text-gray-400 uppercase text-xs font-semibold mb-2 sidebar-text">Paramètres</div>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('parametres')">
<i class="fas fa-cog"></i>
<span class="sidebar-text ml-3">Paramètres</span>
</a>
</div>
</nav>
</div>
<div class="p-4 border-t border-gray-700">
<button onclick="toggleSidebar()" class="w-full flex items-center justify-center text-gray-300 hover:text-white">
<i class="fas fa-chevron-left"></i>
<span class="sidebar-text ml-2">Réduire</span>
</button>
</div>
</div>
<!-- Main Content -->
<div class="main-content flex-1 overflow-auto ml-64">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="flex justify-between items-center px-6 py-4">
<div class="flex items-center">
<h1 class="text-xl font-semibold text-gray-800" id="page-title">Tableau de bord</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="relative">
<button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none">
<i class="fas fa-bell"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</button>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-semibold">JD</div>
<span class="ml-2 text-gray-700">John Doe</span>
</div>
</div>
</div>
</header>
<!-- Dashboard Section -->
<div id="dashboard-section" class="p-6 fade-in">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-blue-100 text-primary">
<i class="fas fa-users text-xl"></i>
</div>
<div class="ml-4">
<p class="text-gray-500">Clients</p>
<h3 class="text-2xl font-bold" id="client-count">12</h3>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-green-100 text-secondary">
<i class="fas fa-tv text-xl"></i>
</div>
<div class="ml-4">
<p class="text-gray-500">Écrans LED</p>
<h3 class="text-2xl font-bold" id="ecran-count">24</h3>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
<i class="fas fa-tools text-xl"></i>
</div>
<div class="ml-4">
<p class="text-gray-500">Interventions</p>
<h3 class="text-2xl font-bold" id="intervention-count">56</h3>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-purple-100 text-purple-500">
<i class="fas fa-exclamation-triangle text-xl"></i>
</div>
<div class="ml-4">
<p class="text-gray-500">En attente</p>
<h3 class="text-2xl font-bold" id="pending-count">5</h3>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Dernières interventions</h2>
<a href="#" class="text-primary text-sm" onclick="showSection('interventions')">Voir tout</a>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Écran</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-3 whitespace-nowrap">15/06/2023</td>
<td class="px-4 py-3 whitespace-nowrap">LED-2456</td>
<td class="px-4 py-3 whitespace-nowrap">Remplacement module</td>
<td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Terminé</span></td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap">10/06/2023</td>
<td class="px-4 py-3 whitespace-nowrap">LED-1892</td>
<td class="px-4 py-3 whitespace-nowrap">Réparation mécanique</td>
<td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Terminé</span></td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap">05/06/2023</td>
<td class="px-4 py-3 whitespace-nowrap">LED-3345</td>
<td class="px-4 py-3 whitespace-nowrap">Diagnostic</td>
<td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En cours</span></td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap">01/06/2023</td>
<td class="px-4 py-3 whitespace-nowrap">LED-1123</td>
<td class="px-4 py-3 whitespace-nowrap">Remplacement dalle</td>
<td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">En attente</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Écrans en maintenance</h2>
<a href="#" class="text-primary text-sm" onclick="showSection('ecrans')">Voir tout</a>
</div>
<div class="space-y-4">
<div class="flex items-center p-3 border border-gray-200 rounded-lg">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-primary">
<i class="fas fa-tv"></i>
</div>
<div class="ml-4">
<h4 class="font-medium">LED-2456</h4>
<p class="text-sm text-gray-500">Client: Société ABC</p>
</div>
<div class="ml-auto">
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En cours</span>
</div>
</div>
<div class="flex items-center p-3 border border-gray-200 rounded-lg">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-primary">
<i class="fas fa-tv"></i>
</div>
<div class="ml-4">
<h4 class="font-medium">LED-1123</h4>
<p class="text-sm text-gray-500">Client: Entreprise XYZ</p>
</div>
<div class="ml-auto">
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">En attente</span>
</div>
</div>
<div class="flex items-center p-3 border border-gray-200 rounded-lg">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-primary">
<i class="fas fa-tv"></i>
</div>
<div class="ml-4">
<h4 class="font-medium">LED-3345</h4>
<p class="text-sm text-gray-500">Client: Groupe 123</p>
</div>
<div class="ml-auto">
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En cours</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Statistiques des interventions</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 text-sm bg-primary text-white rounded-lg">Mois</button>
<button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-lg">Trimestre</button>
<button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-lg">Année</button>
</div>
</div>
<div class="h-64">
<!-- Chart placeholder -->
<div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg">
<p class="text-gray-500">Graphique des interventions</p>
</div>
</div>
</div>
</div>
<!-- Clients Section -->
<div id="clients-section" class="p-6 hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Gestion des Clients</h2>
<button onclick="openClientModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Nouveau Client
</button>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center">
<div class="relative w-64">
<input type="text" placeholder="Rechercher un client..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
<i class="fas fa-filter"></i> Filtres
</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
<i class="fas fa-download"></i> Exporter
</button>
</div>
</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">Nom</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Écrans</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="clients-table-body">
<!-- Clients will be loaded here -->
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-500">
Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">24</span> clients
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Précédent
</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Suivant
</button>
</div>
</div>
</div>
</div>
<!-- Ecrans Section -->
<div id="ecrans-section" class="p-6 hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Gestion des Écrans LED</h2>
<button onclick="openEcranModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Nouvel Écran
</button>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center">
<div class="relative w-64">
<input type="text" placeholder="Rechercher un écran..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex space-x-2">
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Tous les clients</option>
<option>Client A</option>
<option>Client B</option>
</select>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Tous les statuts</option>
<option>Actif</option>
<option>En maintenance</option>
<option>Hors service</option>
</select>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
<i class="fas fa-download"></i> Exporter
</button>
</div>
</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">Référence</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">Dimensions</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dalles</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">Dernière intervention</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="ecrans-table-body">
<!-- Ecrans will be loaded here -->
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-500">
Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">24</span> écrans
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Précédent
</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Suivant
</button>
</div>
</div>
</div>
</div>
<!-- Dalles Section -->
<div id="dalles-section" class="p-6 hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Gestion des Dalles</h2>
<button onclick="openDalleModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Nouvelle Dalle
</button>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center">
<div class="relative w-64">
<input type="text" placeholder="Rechercher une dalle..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex space-x-2">
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Tous les écrans</option>
<option>LED-2456</option>
<option>LED-1892</option>
</select>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Tous les statuts</option>
<option>Fonctionnelle</option>
<option>En réparation</option>
<option>Hors service</option>
</select>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
<i class="fas fa-download"></i> Exporter
</button>
</div>
</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">Référence</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Écran</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modules</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">Dernière intervention</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="dalles-table-body">
<!-- Dalles will be loaded here -->
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-500">
Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">48</span> dalles
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Précédent
</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Suivant
</button>
</div>
</div>
</div>
</div>
<!-- Modules Section -->
<div id="modules-section" class="p-6 hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Gestion des Modules</h2>
<button onclick="openModuleModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Nouveau Module
</button>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center">
<div class="relative w-64">
<input type="text" placeholder="Rechercher un module..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex space-x-2">
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Toutes les dalles</option>
<option>DAL-4567</option>
<option>DAL-7890</option>
</select>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Tous les types</option>
<option>LED</option>
<option>Contrôleur</option>
<option>Alimentation</option>
</select>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
<i class="fas fa-download"></i> Exporter
</button>
</div>
</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">Référence</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dalle</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</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">Dernière intervention</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="modules-table-body">
<!-- Modules will be loaded here -->
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-500">
Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">192</span> modules
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Précédent
</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Suivant
</button>
</div>
</div>
</div>
</div>
<!-- Interventions Section -->
<div id="interventions-section" class="p-6 hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Gestion des Interventions</h2>
<button onclick="openInterventionModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Nouvelle Intervention
</button>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="p-4 border-b border-gray-200">
<div class="flex justify-between items-center">
<div class="relative w-64">
<input type="text" placeholder="Rechercher une intervention..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<div class="flex space-x-2">
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Tous les types</option>
<option>Mécanique</option>
<option>Électronique</option>
<option>Logiciel</option>
</select>
<select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none">
<option>Tous les statuts</option>
<option>Planifiée</option>
<option>En cours</option>
<option>Terminée</option>
<option>Annulée</option>
</select>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
<i class="fas fa-download"></i> Exporter
</button>
</div>
</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">Référence</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Élément</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</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-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="interventions-table-body">
<!-- Interventions will be loaded here -->
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
<div class="text-sm text-gray-500">
Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">56</span> interventions
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Précédent
</button>
<button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
Suivant
</button>
</div>
</div>
</div>
</div>
<!-- Rapports Section -->
<div id="rapports-section" class="p-6 hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Rapports et Statistiques</h2>
<button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-download mr-2"></i> Exporter
</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">Interventions par type</h3>
<div class="h-64">
<!-- Chart placeholder -->
<div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg">
<p class="text-gray-500">Graphique des interventions par type</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">Interventions par statut</h3>
<div class="h-64">
<!-- Chart placeholder -->
<div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg">
<p class="text-gray-500">Graphique des interventions par statut</p>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6 mb-6">
<h3 class="text-lg font-semibold mb-4">Interventions par mois</h3>
<div class="h-96">
<!-- Chart placeholder -->
<div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg">
<p class="text-gray-500">Graphique des interventions par mois</p>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Rapports personnalisés</h3>
<button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Créer un rapport
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex items-center mb-3">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-primary mr-3">
<i class="fas fa-file-alt"></i>
</div>
<h4 class="font-medium">Rapport mensuel</h4>
</div>
<p class="text-sm text-gray-500 mb-3">Rapport complet des interventions du mois dernier</p>
<div class="flex justify-between text-sm">
<span class="text-gray-500">15/06/2023</span>
<button class="text-primary hover:text-blue-700">Télécharger</button>
</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex items-center mb-3">
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-secondary mr-3">
<i class="fas fa-file-excel"></i>
</div>
<h4 class="font-medium">Statistiques annuelles</h4>
</div>
<p class="text-sm text-gray-500 mb-3">Toutes les interventions de l'année en cours</p>
<div class="flex justify-between text-sm">
<span class="text-gray-500">01/06/2023</span>
<button class="text-primary hover:text-blue-700">Télécharger</button>
</div>
</div>
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex items-center mb-3">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center text-purple-500 mr-3">
<i class="fas fa-file-pdf"></i>
</div>
<h4 class="font-medium">Analyse des pannes</h4>
</div>
<p class="text-sm text-gray-500 mb-3">Analyse des pannes récurrentes et solutions</p>
<div class="flex justify-between text-sm">
<span class="text-gray-500">20/05/2023</span>
<button class="text-primary hover:text-blue-700">Télécharger</button>
</div>
</div>
</div>
</div>
</div>
<!-- Paramètres Section -->
<div id="parametres-section" class="p-6 hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Paramètres</h2>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="border-b border-gray-200">
<nav class="flex -mb-px">
<button onclick="showSettingsTab('general')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-primary text-primary">
Général
</button>
<button onclick="showSettingsTab('users')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
Utilisateurs
</button>
<button onclick="showSettingsTab('notifications')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
Notifications
</button>
<button onclick="showSettingsTab('backup')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
Sauvegarde
</button>
</nav>
</div>
<div class="p-6">
<div id="general-settings" class="settings-content">
<h3 class="text-lg font-semibold mb-4">Paramètres généraux</h3>
<div 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 de l'entreprise</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="LED Maintenance Pro">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Logo</label>
<div class="flex items-center">
<div class="w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center mr-4">
<i class="fas fa-image text-gray-400"></i>
</div>
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Changer</button>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="123 Rue des Écrans, 75000 Paris">
</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">Téléphone</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="+33 1 23 45 67 89">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="contact@ledmaintenance.com">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Fuseau horaire</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>Europe/Paris</option>
<option>Europe/London</option>
<option>America/New_York</option>
</select>
</div>
<div class="flex justify-end">
<button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Enregistrer</button>
</div>
</div>
</div>
<div id="users-settings" class="settings-content hidden">
<h3 class="text-lg font-semibold mb-4">Gestion des utilisateurs</h3>
<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">Nom</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôle</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dernière connexion</th>
<th scope="col" class="px-6 py-3 text-right 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">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-semibold mr-3">JD</div>
<div>John Doe</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">john.doe@example.com</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Administrateur</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">15/06/2023 14:30</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold mr-3">AS</div>
<div>Alice Smith</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">alice.smith@example.com</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Technicien</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">14/06/2023 09:15</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold mr-3">RJ</div>
<div>Robert Johnson</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">robert.j@example.com</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Assistant</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">10/06/2023 16:45</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6">
<h4 class="text-md font-semibold mb-3">Ajouter un utilisateur</h4>
<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 complet</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Rôle</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>Administrateur</option>
<option>Technicien</option>
<option>Assistant</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
<input type="password" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Ajouter</button>
</div>
</div>
</div>
<div id="notifications-settings" class="settings-content hidden">
<h3 class="text-lg font-semibold mb-4">Paramètres de notifications</h3>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Notifications par email</label>
<div class="space-y-3">
<div class="flex items-center">
<input type="checkbox" id="notif-new-intervention" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="notif-new-intervention" class="ml-2 block text-sm text-gray-700">Nouvelle intervention planifiée</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="notif-intervention-status" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="notif-intervention-status" class="ml-2 block text-sm text-gray-700">Changement de statut d'intervention</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="notif-maintenance-alert" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="notif-maintenance-alert" class="ml-2 block text-sm text-gray-700">Alerte de maintenance préventive</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email de notification</label>
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="contact@ledmaintenance.com">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Notifications dans l'application</label>
<div class="space-y-3">
<div class="flex items-center">
<input type="checkbox" id="app-notif-new-intervention" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="app-notif-new-intervention" class="ml-2 block text-sm text-gray-700">Nouvelle intervention assignée</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="app-notif-urgent" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
<label for="app-notif-urgent" class="ml-2 block text-sm text-gray-700">Interventions urgentes</label>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Enregistrer</button>
</div>
</div>
</div>
<div id="backup-settings" class="settings-content hidden">
<h3 class="text-lg font-semibold mb-4">Sauvegarde et restauration</h3>
<div class="space-y-6">
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-500 mt-1"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800">Information</h3>
<div class="mt-2 text-sm text-blue-700">
<p>Les sauvegardes sont automatiquement effectuées tous les jours à 2h00. Vous pouvez également créer une sauvegarde manuelle à tout moment.</p>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Dernières sauvegardes</label>
<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">Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taille</th>
<th scope="col" class="px-6 py-3 text-right 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 02:00</td>
<td class="px-6 py-4 whitespace-nowrap">Automatique</td>
<td class="px-6 py-4 whitespace-nowrap">45.7 MB</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-download"></i> Télécharger</button>
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">14/06/2023 02:00</td>
<td class="px-6 py-4 whitespace-nowrap">Automatique</td>
<td class="px-6 py-4 whitespace-nowrap">45.2 MB</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-download"></i> Télécharger</button>
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">10/06/2023 15:30</td>
<td class="px-6 py-4 whitespace-nowrap">Manuelle</td>
<td class="px-6 py-4 whitespace-nowrap">44.9 MB</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-download"></i> Télécharger</button>
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-md font-semibold mb-3">Créer une sauvegarde</h4>
<p class="text-sm text-gray-500 mb-4">Créez une sauvegarde manuelle de toutes vos données.</p>
<button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700 flex items-center">
<i class="fas fa-save mr-2"></i> Créer une sauvegarde
</button>
</div>
<div>
<h4 class="text-md font-semibold mb-3">Restaurer une sauvegarde</h4>
<p class="text-sm text-gray-500 mb-4">Restaurer les données à partir d'un fichier de sauvegarde.</p>
<div class="flex">
<input type="file" class="hidden" id="backup-file">
<label for="backup-file" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 flex items-center cursor-pointer">
<i class="fas fa-file-upload mr-2"></i> Sélectionner un fichier
</label>
<button class="ml-3 px-6 py-2 bg-secondary text-white rounded-lg hover:bg-green-700 flex items-center">
<i class="fas fa-redo mr-2"></i> Restaurer
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Client Modal -->
<div id="client-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-center border-b pb-4">
<h3 class="text-xl font-semibold">Nouveau Client</h3>
<button onclick="closeClientModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mt-6 space-y-4">
<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 du client*</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Société ABC">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Contact principal*</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Jean Dupont">
</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 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="contact@societe-abc.com">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Téléphone*</label>
<input type="tel" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="01 23 45 67 89">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="123 Rue des Écrans, 75000 Paris">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
<textarea class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="3" placeholder="Informations supplémentaires..."></textarea>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button onclick="closeClientModal()" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100">Annuler</button>
<button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Enregistrer</button>
</div>
</div>
</div>
</div>
<!-- Ecran Modal -->
<div id="ecran-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-center border-b pb-4">
<h3 class="text-xl font-semibold">Nouvel Écran LED</h3>
<button onclick="closeEcranModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mt-6 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Client*</label>
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<option>Sélectionner un client</option>
<option>Société ABC</option>
<option>Entreprise XYZ</option>
<option>Groupe 123</option>
</select>
</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">Référence*</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="LED-XXXX">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Modèle</label>
<input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="P3.91">
</div>
</div>
<div class="grid grid-c
</html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GMAO LED - Suivi des Maintenances</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
dark: '#1F2937',
light: '#F3F4F6',
}
}
}
}
</script>
<style>
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.sidebar.collapsed .logo-text {
display: none;
}
.sidebar.collapsed .nav-item {
justify-content: center;
}
.main-content {
transition: all 0.3s ease;
}
.sidebar.collapsed + .main-content {
margin-left: 70px;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-dark text-white w-64 flex flex-col h-full fixed">
<div class="p-4 flex items-center border-b border-gray-700">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<i class="fas fa-tv text-white"></i>
</div>
<span class="logo-text ml-3 text-xl font-bold">LED GMAO</span>
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar py-4">
<nav>
<div class="px-4">
<div class="text-gray-400 uppercase text-xs font-semibold mb-2 sidebar-text">Menu Principal</div>
<a href="#" class="nav-item flex items-center px-4 py-3 text-white bg-primary rounded-lg mx-2 mb-1" onclick="showSection('dashboard')">
<i class="fas fa-tachometer-alt"></i>
<span class="sidebar-text ml-3">Tableau de bord</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('clients')">
<i class="fas fa-users"></i>
<span class="sidebar-text ml-3">Clients</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('ecrans')">
<i class="fas fa-tv"></i>
<span class="sidebar-text ml-3">Écrans LED</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('dalles')">
<i class="fas fa-th-large"></i>
<span class="sidebar-text ml-3">Dalles</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('modules')">
<i class="fas fa-microchip"></i>
<span class="sidebar-text ml-3">Modules</span>