<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex"> <nav class="bg-white w-64 p-4 shadow-lg"> <div class="flex items-center mb-6"> <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18v18H3V3z"/></svg> <span class="ml-2 text-2xl font-bold text-blue-600">Logo</span> </div> <ul> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-blue-600 hover:text-blue-800 bg-blue-100 rounded transition duration-300"> <i class="iconoir-dashboard text-2xl text-blue-600"></i> <span class="ml-2">Projects</span> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-gray-600 hover:text-blue-800 hover:bg-blue-100 rounded transition duration-300"> <i class="iconoir-message text-2xl text-gray-600"></i> <span class="ml-2">Messages</span> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center p-2 text-gray-600 hover:text-blue-800 hover:bg-blue-100 rounded transition duration-300"> <i class="iconoir-settings text-2xl text-gray-600"></i> <span class="ml-2">Settings</span> </a> </li> </ul> </nav> <main class="flex-1 p-6"> <header class="flex justify-between items-center mb-4"> <h2 class="text-2xl font-bold text-gray-800">User Complaints</h2> <div class="relative"> <button class="flex items-center bg-blue-600 border border-blue-500 rounded p-2"> <i class="iconoir-user text-xl text-white"></i> <span class="ml-2 text-white">Profile</span> </button> <div class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded hidden"> <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Profile</a> <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Logout</a> </div> </div> </header> <div class="mb-4 flex items-center"> <button id="createComplaintBtn" class="flex items-center bg-blue-600 text-white p-3 rounded-lg shadow-lg hover:bg-blue-500 transition duration-300"> <i class="iconoir-plus-circle text-xl"></i> <span class="ml-2">Créer Doleance</span> </button> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-white p-6 rounded-lg shadow-lg border-l-4 border-blue-500 transition duration-300 hover:shadow-xl"> <div class="mb-2"> <span class="font-bold text-gray-800">Complaint 1</span> <p class="text-gray-600">This is the description of the first complaint.</p> </div> <footer class="flex justify-between items-center mt-4"> <span class="text-gray-600 text-sm">12/10/2023</span> <span class="bg-yellow-500 text-white px-2 py-1 rounded text-sm">En cours</span> </footer> </div> <div class="bg-white p-6 rounded-lg shadow-lg border-l-4 border-green-500 transition duration-300 hover:shadow-xl"> <div class="mb-2"> <span class="font-bold text-gray-800">Complaint 2</span> <p class="text-gray-600">This is the description of the second complaint.</p> </div> <footer class="flex justify-between items-center mt-4"> <span class="text-gray-600 text-sm">11/10/2023</span> <span class="bg-green-500 text-white px-2 py-1 rounded text-sm">Traité</span> </footer> </div> <div class="bg-white p-6 rounded-lg shadow-lg border-l-4 border-red-500 transition duration-300 hover:shadow-xl"> <div class="mb-2"> <span class="font-bold text-gray-800">Complaint 3</span> <p class="text-gray-600">This is the description of the third complaint.</p> </div> <footer class="flex justify-between items-center mt-4"> <span class="text-gray-600 text-sm">10/10/2023</span> <span class="bg-red-500 text-white px-2 py-1 rounded text-sm">Terminé</span> </footer> </div> <div class="bg-white p-6 rounded-lg shadow-lg border-l-4 border-yellow-500 transition duration-300 hover:shadow-xl"> <div class="mb-2"> <span class="font-bold text-gray-800">Complaint 4</span> <p class="text-gray-600">This is the description of the fourth complaint.</p> </div> <footer class="flex justify-between items-center mt-4"> <span class="text-gray-600 text-sm">09/10/2023</span> <span class="bg-yellow-500 text-white px-2 py-1 rounded text-sm">En cours</span> </footer> </div> </div> <div id="complaintModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden"> <div class="bg-white rounded-lg p-6 w-96"> <h3 class="text-lg font-bold mb-4">Créer Doleance</h3> <form> <div class="mb-4"> <label for="title" class="block text-gray-700 mb-2">Titre</label> <input type="text" id="title" class="w-full p-2 border rounded" placeholder="Entrez le titre"> </div> <div class="mb-4"> <label for="ssefType" class="block text-gray-700 mb-2">Type SSEF</label> <select id="ssefType" class="w-full p-2 border rounded"> <option value="selected">Sélectionné</option> <option value="type1">Type 1</option> <option value="type2">Type 2</option> <option value="type3">Type 3</option> </select> </div> <div class="mb-4"> <label for="province" class="block text-gray-700 mb-2">Province</label> <select id="province" class="w-full p-2 border rounded"> <option value="">Sélectionnez une province</option> <option value="province1">Province 1</option> <option value="province2">Province 2</option> <option value="province3">Province 3</option> </select> </div> <div class="mb-4"> <label for="territory" class="block text-gray-700 mb-2">Territoire</label> <select id="territory" class="w-full p-2 border rounded"> <option value="">Sélectionnez un territoire</option> <option value="territory1">Territory 1</option> <option value="territory2">Territory 2</option> <option value="territory3">Territory 3</option> </select> </div> <div class="mb-4"> <label for="description" class="block text-gray-700 mb-2">Description</label> <textarea id="description" class="w-full p-2 border rounded" placeholder="Entrez la description" rows="3"></textarea> </div> <div class="flex justify-end"> <button type="button" id="closeModal" class="bg-gray-300 text-gray-700 px-4 py-2 rounded mr-2">Annuler</button> <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Soumettre</button> </div> </form> </div> </div> </main> <script> const createComplaintBtn = document.getElementById('createComplaintBtn'); const complaintModal = document.getElementById('complaintModal'); const closeModal = document.getElementById('closeModal'); createComplaintBtn.addEventListener('click', () => { complaintModal.classList.remove('hidden'); }); closeModal.addEventListener('click', () => { complaintModal.classList.add('hidden'); }); </script> </body>
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v
v