templates/munganyo/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Munganyo - Actes Exécutifs de l'Union des Comores{% endblock %}
  5. {% block body %}
  6. <!-- Hero Section Munganyo -->
  7. <section class="relative bg-gradient-to-br from-[#006633] via-[#008040] to-[#00994d] text-white overflow-hidden">
  8. <div class="absolute inset-0 opacity-20">
  9. <div class="absolute top-20 left-10 w-64 h-64 bg-[#006633] rounded-full blur-3xl"></div>
  10. <div class="absolute bottom-20 right-10 w-96 h-96 bg-[#008040] rounded-full blur-3xl"></div>
  11. </div>
  13. <div class="container mx-auto px-4 py-12 md:py-20 relative z-10">
  14. <div class="max-w-4xl mx-auto text-center">
  15. <div class="inline-flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 md:px-5 py-1.5 md:py-2 mb-4 md:mb-6 border border-white/30">
  16. <i class="fas fa-file-alt mr-1 md:mr-2 text-sm md:text-base"></i>
  17. <span class="text-xs md:text-sm font-medium text-white">Plateforme des actes exécutifs</span>
  18. </div>
  19. <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 md:mb-6 text-white">
  20. Munganyo
  21. <span class="block text-white text-xl md:text-2xl lg:text-3xl">
  22. Actes du Gouvernement
  23. </span>
  24. </h1>
  25. <p class="text-base md:text-xl text-white/90 mb-6 md:mb-8 max-w-2xl mx-auto leading-relaxed hidden sm:block">
  26. La plateforme officielle de consultation des décrets, arrêtés et circulaires
  27. en vigueur de l'Union des Comores
  28. </p>
  30. <!-- Barre de recherche -->
  31. <div class="max-w-2xl mx-auto">
  32. <div class="relative">
  33. <i class="fas fa-search absolute left-3 md:left-5 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm md:text-lg"></i>
  34. <input type="text"
  35. id="searchInput"
  36. placeholder="Rechercher un décret, un arrêté, une circulaire..."
  37. class="w-full pl-9 md:pl-14 pr-24 md:pr-36 py-3 md:py-5 text-gray-800 text-sm md:text-lg rounded-full border-none shadow-2xl focus:outline-none focus:ring-4 focus:ring-[#006633]/50 focus:shadow-xl transition-all duration-300">
  38. <button id="searchBtn" class="absolute right-1 md:right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-[#006633] to-[#008040] text-white px-3 md:px-6 py-1.5 md:py-2.5 rounded-full font-semibold hover:from-[#008040] hover:to-[#00994d] transition-all duration-300 shadow-md hover:shadow-lg text-sm md:text-base">
  39. <i class="fas fa-search md:mr-1"></i>
  40. <span class="hidden md:inline">Rechercher</span>
  41. </button>
  42. </div>
  43. </div>
  45. <!-- Filtres rapides -->
  46. <div class="mt-6 md:mt-10 flex flex-wrap justify-center gap-2 md:gap-3">
  47. <button onclick="applyQuickFilter('all')" class="quick-filter px-4 md:px-5 py-2 md:py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-xs md:text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-1 md:gap-2">
  48. <i class="fas fa-th-large text-xs md:text-sm"></i>
  49. Tous les actes
  50. </button>
  51. <button onclick="applyQuickFilter('decret')" class="quick-filter px-4 md:px-5 py-2 md:py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-xs md:text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-1 md:gap-2">
  52. <i class="fas fa-gavel text-xs md:text-sm"></i>
  53. Décrets
  54. </button>
  55. <button onclick="applyQuickFilter('arrete')" class="quick-filter px-4 md:px-5 py-2 md:py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-xs md:text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-1 md:gap-2">
  56. <i class="fas fa-clipboard-list text-xs md:text-sm"></i>
  57. Arrêtés
  58. </button>
  59. <button onclick="applyQuickFilter('circulaire')" class="quick-filter px-4 md:px-5 py-2 md:py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-xs md:text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-1 md:gap-2">
  60. <i class="fas fa-envelope text-xs md:text-sm"></i>
  61. Circulaires
  62. </button>
  63. <button onclick="applyQuickFilter('instruction')" class="quick-filter px-4 md:px-5 py-2 md:py-2.5 bg-gradient-to-r from-[#006633] to-[#008040] hover:from-[#004d26] hover:to-[#006633] rounded-full text-xs md:text-sm font-semibold text-white transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-1 md:gap-2">
  64. <i class="fas fa-tasks text-xs md:text-sm"></i>
  65. Instructions
  66. </button>
  67. </div>
  68. </div>
  69. </div>
  71. <div class="absolute bottom-0 left-0 right-0">
  72. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full">
  73. <path fill="#f3f4f6" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,170.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  74. </svg>
  75. </div>
  76. </section>
  78. <!-- Section Statistiques -->
  79. <section class="py-12 md:py-16 bg-gray-50">
  80. <div class="container mx-auto px-4">
  81. <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
  82. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all">
  83. <div class="w-10 h-10 md:w-14 md:h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  84. <i class="fas fa-file-signature text-xl md:text-2xl text-[#006633]"></i>
  85. </div>
  86. <div class="text-2xl md:text-3xl font-bold text-gray-800 mb-0.5 md:mb-1" id="totalActs">0</div>
  87. <div class="text-gray-600 font-medium text-xs md:text-base">Actes exécutifs</div>
  88. <div class="text-xs text-gray-400 mt-1 hidden md:block">Décrets, arrêtés, circulaires</div>
  89. </div>
  91. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all">
  92. <div class="w-10 h-10 md:w-14 md:h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  93. <i class="fas fa-gavel text-xl md:text-2xl text-[#006633]"></i>
  94. </div>
  95. <div class="text-2xl md:text-3xl font-bold text-gray-800 mb-0.5 md:mb-1" id="totalDecrets">0</div>
  96. <div class="text-gray-600 font-medium text-xs md:text-base">Décrets</div>
  97. <div class="text-xs text-gray-400 mt-1 hidden md:block">En vigueur</div>
  98. </div>
  100. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all">
  101. <div class="w-10 h-10 md:w-14 md:h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  102. <i class="fas fa-clipboard-list text-xl md:text-2xl text-[#006633]"></i>
  103. </div>
  104. <div class="text-2xl md:text-3xl font-bold text-gray-800 mb-0.5 md:mb-1" id="totalArretes">0</div>
  105. <div class="text-gray-600 font-medium text-xs md:text-base">Arrêtés</div>
  106. <div class="text-xs text-gray-400 mt-1 hidden md:block">Interministériels et ministériels</div>
  107. </div>
  109. <div class="bg-white rounded-2xl shadow-lg p-4 md:p-6 text-center transform hover:-translate-y-2 transition-all">
  110. <div class="w-10 h-10 md:w-14 md:h-14 bg-[#006633]/10 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-4">
  111. <i class="fas fa-chart-line text-xl md:text-2xl text-[#006633]"></i>
  112. </div>
  113. <div class="text-2xl md:text-3xl font-bold text-gray-800 mb-0.5 md:mb-1" id="totalVigueur">0</div>
  114. <div class="text-gray-600 font-medium text-xs md:text-base">En vigueur</div>
  115. <div class="text-xs text-gray-400 mt-1 hidden md:block">Actes actuellement valides</div>
  116. </div>
  117. </div>
  118. </div>
  119. </section>
  121. <!-- Filtres avancés -->
  122. <section class="py-6 md:py-8 bg-white border-b">
  123. <div class="container mx-auto px-4">
  124. <div class="bg-gray-50 rounded-2xl p-4 md:p-6">
  125. <div class="flex flex-col md:flex-row md:flex-wrap md:items-center justify-between gap-3 md:gap-4">
  126. <div class="flex items-center space-x-2 md:space-x-3">
  127. <i class="fas fa-filter text-gray-400 text-sm md:text-base"></i>
  128. <span class="font-medium text-gray-700 text-sm md:text-base">Filtres :</span>
  129. </div>
  130. <div class="flex flex-wrap gap-2 md:gap-3">
  131. <select id="filterType" class="px-3 md:px-4 py-1.5 md:py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633] text-sm">
  132. <option value="">Tous les types</option>
  133. <option value="decret">Décrets</option>
  134. <option value="arrete">Arrêtés</option>
  135. <option value="circulaire">Circulaires</option>
  136. <option value="instruction">Instructions</option>
  137. </select>
  138. <select id="filterInstitution" class="px-3 md:px-4 py-1.5 md:py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633] text-sm">
  139. <option value="">Toutes les institutions</option>
  140. <option value="Présidence">Présidence</option>
  141. <option value="Finances">Ministère des Finances</option>
  142. <option value="Justice">Ministère de la Justice</option>
  143. <option value="Secrétariat">Secrétariat Général</option>
  144. </select>
  145. <select id="filterYear" class="px-3 md:px-4 py-1.5 md:py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633] text-sm">
  146. <option value="">Toutes les années</option>
  147. <option value="2026">2026</option>
  148. <option value="2025">2025</option>
  149. <option value="2024">2024</option>
  150. </select>
  151. <select id="filterStatus" class="px-3 md:px-4 py-1.5 md:py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#006633] focus:border-[#006633] text-sm">
  152. <option value="">Statut juridique</option>
  153. <option value="vigueur">En vigueur</option>
  154. <option value="modifie">Modifié</option>
  155. <option value="abroge">Abrogé</option>
  156. </select>
  157. <button id="applyFiltersBtn" class="bg-gradient-to-r from-[#006633] to-[#008040] text-white px-4 md:px-6 py-1.5 md:py-2 rounded-xl hover:from-[#004d26] hover:to-[#006633] transition text-sm">
  158. <i class="fas fa-search mr-1 md:mr-2"></i>Appliquer
  159. </button>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. </section>
  166. <!-- Section des résultats avec ID pour l'ancrage -->
  167. <section id="resultsSection" class="py-12 md:py-16 bg-gray-50 scroll-mt-20">
  168. <div class="container mx-auto px-4">
  169. <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-6 md:mb-8 gap-3">
  170. <div>
  171. <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Derniers actes publiés</h2>
  172. <p class="text-gray-600 text-sm md:text-base mt-1">Les décrets et arrêtés les plus récents du Journal Officiel</p>
  173. </div>
  174. <div class="flex space-x-2">
  175. <button id="tableViewBtn" class="px-3 md:px-4 py-1.5 md:py-2 bg-gradient-to-r from-[#006633] to-[#008040] text-white rounded-lg shadow-sm text-sm">
  176. <i class="fas fa-table"></i>
  177. </button>
  178. <button id="listViewBtn" class="px-3 md:px-4 py-1.5 md:py-2 bg-white rounded-lg shadow-sm hover:bg-gray-50 transition text-sm">
  179. <i class="fas fa-list"></i>
  180. </button>
  181. </div>
  182. </div>
  184. <!-- Bandeau de résultat de filtre -->
  185. <div id="filterResultBadge" class="mb-4 hidden">
  186. <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-3 flex items-center justify-between">
  187. <div class="flex items-center gap-2">
  188. <i class="fas fa-filter text-blue-500"></i>
  189. <span class="text-sm text-gray-700" id="filterResultText"></span>
  190. </div>
  191. <button onclick="resetFilters()" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
  192. <i class="fas fa-times mr-1"></i>Effacer les filtres
  193. </button>
  194. </div>
  195. </div>
  197. <!-- Vue Tableau -->
  198. <div id="tableView" class="bg-white rounded-2xl shadow-lg overflow-hidden">
  199. <div class="overflow-x-auto">
  200. <table class="min-w-[800px] md:min-w-full divide-y divide-gray-200">
  201. <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
  202. <tr>
  203. <th class="px-4 md:px-6 py-3 md:py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Type</th>
  204. <th class="px-4 md:px-6 py-3 md:py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Numéro</th>
  205. <th class="px-4 md:px-6 py-3 md:py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Titre</th>
  206. <th class="px-4 md:px-6 py-3 md:py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Institution</th>
  207. <th class="px-4 md:px-6 py-3 md:py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Date</th>
  208. <th class="px-4 md:px-6 py-3 md:py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Statut</th>
  209. <th class="px-4 md:px-6 py-3 md:py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
  210. </tr>
  211. </thead>
  212. <tbody id="actsTableBody" class="bg-white divide-y divide-gray-100">
  213. <tr>
  214. <td colspan="7" class="px-6 py-8 text-center text-gray-500">
  215. <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
  216. <p>Chargement des données...</p>
  217. </td>
  218. </tr>
  219. </tbody>
  220. </table>
  221. </div>
  222. </div>
  224. <!-- Vue Liste -->
  225. <div id="listView" style="display: none;" class="space-y-4">
  226. <div id="actsListBody" class="space-y-4">
  227. <!-- Les données seront insérées ici -->
  228. </div>
  229. </div>
  231. <div class="mt-6 bg-gray-50 px-4 md:px-6 py-3 md:py-4 border-t rounded-b-2xl">
  232. <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
  233. <div class="text-xs md:text-sm text-gray-600" id="paginationInfo">
  234. Affichage de <span id="startCount">0</span> à <span id="endCount">0</span> sur <span id="totalCount">0</span> actes
  235. </div>
  236. <div class="flex flex-wrap gap-1 md:gap-2" id="paginationControls">
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. </section>
  243. <!-- Modal Détails -->
  244. <div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4" style="display: none;">
  245. <div class="bg-white rounded-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
  246. <div class="sticky top-0 bg-white border-b px-6 py-4 flex justify-between items-center">
  247. <h3 class="text-xl font-bold text-gray-800">Détails de l'acte</h3>
  248. <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
  249. <i class="fas fa-times text-2xl"></i>
  250. </button>
  251. </div>
  252. <div class="p-6" id="modalContent">
  253. <!-- Contenu dynamique -->
  254. </div>
  255. </div>
  256. </div>
  258. <!-- Section Alertes -->
  259. <section class="py-12 md:py-16 bg-gradient-to-r from-[#006633] to-[#008040] text-white">
  260. <div class="container mx-auto px-4">
  261. <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
  262. <div>
  263. <i class="fas fa-bell text-3xl md:text-4xl mb-3 md:mb-4 opacity-80"></i>
  264. <h2 class="text-2xl md:text-3xl font-bold mb-3 md:mb-4">Restez informé des nouveaux actes</h2>
  265. <p class="text-white/90 mb-4 md:mb-6 leading-relaxed text-sm md:text-base">
  266. Recevez une notification par email dès qu'un nouveau décret ou arrêté est publié.
  267. </p>
  268. <ul class="space-y-2 md:space-y-3 mb-6 md:mb-8">
  269. <li class="flex items-center text-sm md:text-base">
  270. <i class="fas fa-check-circle text-emerald-300 mr-2 md:mr-3"></i>
  271. <span>Alertes personnalisables par institution</span>
  272. </li>
  273. <li class="flex items-center text-sm md:text-base">
  274. <i class="fas fa-check-circle text-emerald-300 mr-2 md:mr-3"></i>
  275. <span>Notification en temps réel des publications</span>
  276. </li>
  277. </ul>
  278. <a href="#" class="inline-flex items-center bg-white text-[#006633] px-5 md:px-6 py-2.5 md:py-3 rounded-xl font-semibold hover:bg-gray-100 transition shadow-lg text-sm md:text-base">
  279. <i class="fas fa-envelope mr-2"></i>
  280. S'abonner aux alertes
  281. </a>
  282. </div>
  284. <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 md:p-6">
  285. <h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4">Dernières alertes envoyées</h3>
  286. <div class="space-y-3 md:space-y-4">
  287. <div class="flex items-start space-x-2 md:space-x-3">
  288. <div class="w-6 h-6 md:w-8 md:h-8 bg-emerald-500 rounded-full flex items-center justify-center flex-shrink-0">
  289. <i class="fas fa-gavel text-white text-xs"></i>
  290. </div>
  291. <div>
  292. <p class="text-xs md:text-sm font-medium">Nouveau décret publié</p>
  293. <p class="text-xs text-emerald-200">Décret n°2026-045/PR - 01 mars 2026</p>
  294. </div>
  295. </div>
  296. <div class="flex items-start space-x-2 md:space-x-3">
  297. <div class="w-6 h-6 md:w-8 md:h-8 bg-teal-500 rounded-full flex items-center justify-center flex-shrink-0">
  298. <i class="fas fa-file-alt text-white text-xs"></i>
  299. </div>
  300. <div>
  301. <p class="text-xs md:text-sm font-medium">Nouvel arrêté publié</p>
  302. <p class="text-xs text-emerald-200">Arrêté n°2026-089/MF - 25 février 2026</p>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. </section>
  311. <script>
  312. // Données
  313. let allActs = {{ acts|json_encode|raw }};
  314. let filteredActs = [...allActs];
  315. let currentView = 'table';
  316. let currentPage = 1;
  317. let itemsPerPage = 5;
  318. let activeFilters = { type: '', institution: '', year: '', status: '', search: '' };
  320. // Initialisation
  321. document.addEventListener('DOMContentLoaded', function() {
  322. updateStats();
  323. renderActs();
  325. // Événements
  326. document.getElementById('searchBtn').addEventListener('click', function() {
  327. performSearch();
  328. scrollToResults();
  329. });
  330. document.getElementById('searchInput').addEventListener('keypress', function(e) {
  331. if(e.key === 'Enter') {
  332. performSearch();
  333. scrollToResults();
  334. }
  335. });
  336. document.getElementById('applyFiltersBtn').addEventListener('click', function() {
  337. applyAdvancedFilters();
  338. scrollToResults();
  339. });
  340. document.getElementById('tableViewBtn').addEventListener('click', () => setView('table'));
  341. document.getElementById('listViewBtn').addEventListener('click', () => setView('list'));
  342. });
  344. // Fonction pour scroller vers les résultats
  345. function scrollToResults() {
  346. const resultsSection = document.getElementById('resultsSection');
  347. if(resultsSection) {
  348. const offset = 80;
  349. const elementPosition = resultsSection.getBoundingClientRect().top;
  350. const offsetPosition = elementPosition + window.pageYOffset - offset;
  352. window.scrollTo({
  353. top: offsetPosition,
  354. behavior: 'smooth'
  355. });
  356. }
  357. }
  359. // Mise à jour du bandeau de filtre
  360. function updateFilterBadge() {
  361. const badge = document.getElementById('filterResultBadge');
  362. const filterText = document.getElementById('filterResultText');
  363. let filters = [];
  365. if(activeFilters.search) filters.push(`Recherche: "${activeFilters.search}"`);
  366. if(activeFilters.type) {
  367. const typeNames = { decret: 'Décrets', arrete: 'Arrêtés', circulaire: 'Circulaires', instruction: 'Instructions' };
  368. filters.push(`Type: ${typeNames[activeFilters.type] || activeFilters.type}`);
  369. }
  370. if(activeFilters.institution) filters.push(`Institution: ${activeFilters.institution}`);
  371. if(activeFilters.year) filters.push(`Année: ${activeFilters.year}`);
  372. if(activeFilters.status) {
  373. const statusNames = { vigueur: 'En vigueur', modifie: 'Modifié', abroge: 'Abrogé' };
  374. filters.push(`Statut: ${statusNames[activeFilters.status] || activeFilters.status}`);
  375. }
  377. if(filters.length > 0) {
  378. filterText.innerHTML = `<i class="fas fa-chart-line mr-1"></i> Filtres actifs : ${filters.join(' • ')} - ${filteredActs.length} résultat(s) trouvé(s)`;
  379. badge.classList.remove('hidden');
  380. } else {
  381. badge.classList.add('hidden');
  382. }
  383. }
  385. // Réinitialiser les filtres
  386. function resetFilters() {
  387. document.getElementById('filterType').value = '';
  388. document.getElementById('filterInstitution').value = '';
  389. document.getElementById('filterYear').value = '';
  390. document.getElementById('filterStatus').value = '';
  391. document.getElementById('searchInput').value = '';
  393. activeFilters = { type: '', institution: '', year: '', status: '', search: '' };
  394. filteredActs = [...allActs];
  395. currentPage = 1;
  396. renderActs();
  397. updateStats();
  398. updateFilterBadge();
  399. scrollToResults();
  400. }
  402. // Recherche
  403. function performSearch() {
  404. const searchTerm = document.getElementById('searchInput').value.toLowerCase();
  405. activeFilters.search = searchTerm;
  407. if(searchTerm === '') {
  408. filteredActs = [...allActs];
  409. } else {
  410. filteredActs = allActs.filter(act => {
  411. return act.numero.toLowerCase().includes(searchTerm) ||
  412. act.titre.toLowerCase().includes(searchTerm) ||
  413. act.description.toLowerCase().includes(searchTerm);
  414. });
  415. }
  417. // Réappliquer les autres filtres
  418. applyCurrentFilters();
  419. }
  421. // Filtre rapide
  422. function applyQuickFilter(type) {
  423. document.getElementById('filterType').value = type === 'all' ? '' : type;
  424. activeFilters.type = type === 'all' ? '' : type;
  425. applyAdvancedFilters();
  426. }
  428. // Appliquer les filtres actuels
  429. function applyCurrentFilters() {
  430. let results = [...allActs];
  432. if(activeFilters.search) {
  433. results = results.filter(act => {
  434. return act.numero.toLowerCase().includes(activeFilters.search) ||
  435. act.titre.toLowerCase().includes(activeFilters.search) ||
  436. act.description.toLowerCase().includes(activeFilters.search);
  437. });
  438. }
  440. if(activeFilters.type) {
  441. results = results.filter(act => act.type === activeFilters.type);
  442. }
  444. if(activeFilters.institution) {
  445. results = results.filter(act => act.institution.includes(activeFilters.institution));
  446. }
  448. if(activeFilters.year) {
  449. results = results.filter(act => act.date.startsWith(activeFilters.year));
  450. }
  452. if(activeFilters.status) {
  453. results = results.filter(act => act.status === activeFilters.status);
  454. }
  456. filteredActs = results;
  457. currentPage = 1;
  458. renderActs();
  459. updateStats();
  460. updateFilterBadge();
  461. }
  463. // Filtres avancés
  464. function applyAdvancedFilters() {
  465. activeFilters.type = document.getElementById('filterType').value;
  466. activeFilters.institution = document.getElementById('filterInstitution').value;
  467. activeFilters.year = document.getElementById('filterYear').value;
  468. activeFilters.status = document.getElementById('filterStatus').value;
  470. applyCurrentFilters();
  471. }
  473. // Changer l'affichage
  474. function setView(view) {
  475. currentView = view;
  476. const tableView = document.getElementById('tableView');
  477. const listView = document.getElementById('listView');
  478. const tableViewBtn = document.getElementById('tableViewBtn');
  479. const listViewBtn = document.getElementById('listViewBtn');
  481. if(view === 'table') {
  482. tableView.style.display = 'block';
  483. listView.style.display = 'none';
  484. tableViewBtn.className = 'px-3 md:px-4 py-1.5 md:py-2 bg-gradient-to-r from-[#006633] to-[#008040] text-white rounded-lg shadow-sm text-sm';
  485. listViewBtn.className = 'px-3 md:px-4 py-1.5 md:py-2 bg-white rounded-lg shadow-sm hover:bg-gray-50 transition text-sm';
  486. } else {
  487. tableView.style.display = 'none';
  488. listView.style.display = 'block';
  489. listViewBtn.className = 'px-3 md:px-4 py-1.5 md:py-2 bg-gradient-to-r from-[#006633] to-[#008040] text-white rounded-lg shadow-sm text-sm';
  490. tableViewBtn.className = 'px-3 md:px-4 py-1.5 md:py-2 bg-white rounded-lg shadow-sm hover:bg-gray-50 transition text-sm';
  491. }
  492. renderActs();
  493. }
  495. // Rendu des actes
  496. function renderActs() {
  497. const start = (currentPage - 1) * itemsPerPage;
  498. const end = start + itemsPerPage;
  499. const pageActs = filteredActs.slice(start, end);
  500. const totalPages = Math.ceil(filteredActs.length / itemsPerPage);
  502. // Rendu tableau
  503. const tableBody = document.getElementById('actsTableBody');
  504. if(pageActs.length === 0) {
  505. tableBody.innerHTML = `
  506. <tr>
  507. <td colspan="7" class="px-6 py-8 text-center text-gray-500">
  508. <i class="fas fa-search text-2xl mb-2"></i>
  509. <p>Aucun acte trouvé</p>
  510. <p class="text-sm mt-2">Essayez de modifier vos critères de recherche</p>
  511. </td>
  512. </tr>
  513. `;
  514. } else {
  515. tableBody.innerHTML = pageActs.map(act => `
  516. <tr class="hover:bg-gray-50 transition cursor-pointer">
  517. <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">
  518. <span class="px-2 md:px-3 py-0.5 md:py-1 text-xs font-semibold rounded-full bg-[#006633]/10 text-[#006633]">
  519. <i class="fas ${act.typeIcon} mr-1"></i> ${act.typeLabel}
  520. </span>
  521. </td>
  522. <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap font-mono text-xs md:text-sm font-semibold text-gray-800">
  523. ${act.numero}
  524. </td>
  525. <td class="px-4 md:px-6 py-3 md:py-4">
  526. <div class="text-xs md:text-sm font-medium text-gray-900">${act.titre}</div>
  527. <div class="text-xs text-gray-500 mt-1 hidden md:block">${act.description}</div>
  528. </td>
  529. <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">
  530. <div class="text-xs md:text-sm text-gray-700">${act.institution}</div>
  531. </td>
  532. <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">
  533. <div class="text-xs md:text-sm text-gray-700">${act.dateFormatted}</div>
  534. </td>
  535. <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">
  536. <span class="px-2 py-0.5 md:py-1 text-xs font-semibold rounded-full bg-green-100 text-green-700">
  537. <i class="fas ${act.statusIcon} mr-1"></i> ${act.statusLabel}
  538. </span>
  539. </td>
  540. <td class="px-4 md:px-6 py-3 md:py-4 whitespace-nowrap">
  541. <div class="flex space-x-2">
  542. <button onclick="showDetails(${act.id})" class="text-[#006633] hover:text-[#008040]">
  543. <i class="fas fa-eye"></i>
  544. </button>
  545. <button onclick="generatePDF(${act.id})" class="text-gray-600 hover:text-gray-800">
  546. <i class="fas fa-download"></i>
  547. </button>
  548. </div>
  549. </td>
  550. </tr>
  551. `).join('');
  552. }
  554. // Rendu liste
  555. const listBody = document.getElementById('actsListBody');
  556. if(pageActs.length === 0) {
  557. listBody.innerHTML = `
  558. <div class="bg-white rounded-2xl shadow-lg p-8 text-center text-gray-500">
  559. <i class="fas fa-search text-3xl mb-3"></i>
  560. <p>Aucun acte trouvé</p>
  561. <p class="text-sm mt-2">Essayez de modifier vos critères de recherche</p>
  562. </div>
  563. `;
  564. } else {
  565. listBody.innerHTML = pageActs.map(act => `
  566. <div class="bg-white rounded-2xl shadow-lg p-6 hover:shadow-xl transition cursor-pointer">
  567. <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
  568. <div class="flex-1">
  569. <div class="flex items-center gap-2 mb-3">
  570. <span class="px-3 py-1 text-xs font-semibold rounded-full bg-[#006633]/10 text-[#006633]">
  571. <i class="fas ${act.typeIcon} mr-1"></i> ${act.typeLabel}
  572. </span>
  573. <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-700">
  574. <i class="fas ${act.statusIcon} mr-1"></i> ${act.statusLabel}
  575. </span>
  576. </div>
  577. <h3 class="text-lg font-bold text-gray-800 mb-2">${act.titre}</h3>
  578. <p class="text-gray-600 text-sm mb-3">${act.description}</p>
  579. <div class="flex flex-wrap gap-4 text-sm text-gray-500">
  580. <span><i class="fas fa-hashtag mr-1"></i> ${act.numero}</span>
  581. <span><i class="fas fa-building mr-1"></i> ${act.institution}</span>
  582. <span><i class="fas fa-calendar mr-1"></i> ${act.dateFormatted}</span>
  583. </div>
  584. </div>
  585. <div class="flex gap-2">
  586. <button onclick="showDetails(${act.id})" class="px-4 py-2 bg-[#006633]/10 text-[#006633] rounded-lg hover:bg-[#006633]/20 transition">
  587. <i class="fas fa-eye mr-1"></i> Voir
  588. </button>
  589. <button onclick="generatePDF(${act.id})" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
  590. <i class="fas fa-download mr-1"></i> PDF
  591. </button>
  592. </div>
  593. </div>
  594. </div>
  595. `).join('');
  596. }
  598. // Pagination
  599. document.getElementById('startCount').textContent = filteredActs.length === 0 ? 0 : start + 1;
  600. document.getElementById('endCount').textContent = Math.min(end, filteredActs.length);
  601. document.getElementById('totalCount').textContent = filteredActs.length;
  603. const paginationDiv = document.getElementById('paginationControls');
  604. if(totalPages > 1) {
  605. let html = '';
  606. html += `<button onclick="changePage(${currentPage - 1})" class="px-2 md:px-3 py-1 border rounded-lg hover:bg-gray-100 transition" ${currentPage === 1 ? 'disabled style="opacity:0.5"' : ''}>Précédent</button>`;
  608. let startPage = Math.max(1, currentPage - 2);
  609. let endPage = Math.min(totalPages, startPage + 4);
  610. startPage = Math.max(1, endPage - 4);
  612. for(let i = startPage; i <= endPage; i++) {
  613. html += `<button onclick="changePage(${i})" class="px-3 md:px-4 py-1 ${currentPage === i ? 'bg-gradient-to-r from-[#006633] to-[#008040] text-white' : 'border hover:bg-gray-100'} rounded-lg text-sm">${i}</button>`;
  614. }
  616. if(endPage < totalPages) {
  617. html += `<span class="px-2">...</span>`;
  618. html += `<button onclick="changePage(${totalPages})" class="px-3 md:px-4 py-1 border rounded-lg hover:bg-gray-100 text-sm">${totalPages}</button>`;
  619. }
  621. html += `<button onclick="changePage(${currentPage + 1})" class="px-2 md:px-3 py-1 border rounded-lg hover:bg-gray-100 transition" ${currentPage === totalPages ? 'disabled style="opacity:0.5"' : ''}>Suivant</button>`;
  623. paginationDiv.innerHTML = html;
  624. } else {
  625. paginationDiv.innerHTML = '';
  626. }
  627. }
  629. // Changer de page
  630. function changePage(page) {
  631. const totalPages = Math.ceil(filteredActs.length / itemsPerPage);
  632. if(page < 1 || page > totalPages) return;
  633. currentPage = page;
  634. renderActs();
  635. }
  637. // Afficher les détails
  638. function showDetails(id) {
  639. const act = allActs.find(a => a.id === id);
  640. if(!act) return;
  642. const modalContent = document.getElementById('modalContent');
  643. modalContent.innerHTML = `
  644. <div class="space-y-6">
  645. <div class="flex items-center gap-3 pb-4 border-b">
  646. <div class="w-16 h-16 bg-[#006633]/10 rounded-2xl flex items-center justify-center">
  647. <i class="fas ${act.typeIcon} text-3xl text-[#006633]"></i>
  648. </div>
  649. <div>
  650. <div class="flex items-center gap-2 mb-2">
  651. <span class="px-3 py-1 text-xs font-semibold rounded-full bg-[#006633]/10 text-[#006633]">
  652. ${act.typeLabel}
  653. </span>
  654. <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-700">
  655. ${act.statusLabel}
  656. </span>
  657. </div>
  658. <h2 class="text-2xl font-bold text-gray-800">${act.titre}</h2>
  659. </div>
  660. </div>
  662. <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-gray-50 rounded-xl">
  663. <div>
  664. <p class="text-sm text-gray-500">Numéro</p>
  665. <p class="font-mono font-semibold text-gray-800">${act.numero}</p>
  666. </div>
  667. <div>
  668. <p class="text-sm text-gray-500">Date de publication</p>
  669. <p class="font-semibold text-gray-800">${act.dateFormatted}</p>
  670. </div>
  671. <div>
  672. <p class="text-sm text-gray-500">Institution</p>
  673. <p class="font-semibold text-gray-800">${act.institution}</p>
  674. <p class="text-sm text-gray-500">${act.institutionDetail}</p>
  675. </div>
  676. <div>
  677. <p class="text-sm text-gray-500">Statut juridique</p>
  678. <p class="font-semibold text-green-700">${act.statusLabel}</p>
  679. </div>
  680. </div>
  682. <div>
  683. <h4 class="font-bold text-gray-800 mb-3">Contenu de l'acte</h4>
  684. <div class="bg-gray-50 rounded-xl p-4">
  685. <pre class="whitespace-pre-wrap font-sans text-sm text-gray-700">${act.content}</pre>
  686. </div>
  687. </div>
  689. <div class="flex gap-3 pt-4 border-t">
  690. <button onclick="generatePDF(${act.id}); closeModal();" class="flex-1 px-6 py-3 bg-gradient-to-r from-[#006633] to-[#008040] text-white rounded-xl font-semibold hover:from-[#004d26] hover:to-[#006633] transition">
  691. <i class="fas fa-download mr-2"></i>Télécharger en PDF
  692. </button>
  693. <button onclick="closeModal()" class="px-6 py-3 border border-gray-300 rounded-xl hover:bg-gray-50 transition">
  694. Fermer
  695. </button>
  696. </div>
  697. </div>
  698. `;
  700. document.getElementById('detailModal').style.display = 'flex';
  701. }
  703. // Fermer le modal
  704. function closeModal() {
  705. document.getElementById('detailModal').style.display = 'none';
  706. }
  708. // Génération PDF
  709. function generatePDF(id) {
  710. const act = allActs.find(a => a.id === id);
  711. if(act) {
  712. const content = `${act.typeLabel.toUpperCase()} N°${act.numero}\n\n${act.titre}\n\n${act.content}\n\n---\nPublié le ${act.dateFormatted}\nInstitution: ${act.institution} - ${act.institutionDetail}\nStatut: ${act.statusLabel}`;
  714. const blob = new Blob([content], {type: 'application/pdf'});
  715. const url = URL.createObjectURL(blob);
  716. const a = document.createElement('a');
  717. a.href = url;
  718. a.download = `${act.typeLabel}_${act.numero}.pdf`;
  719. document.body.appendChild(a);
  720. a.click();
  721. document.body.removeChild(a);
  722. URL.revokeObjectURL(url);
  724. // Notification légère
  725. const notification = document.createElement('div');
  726. notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
  727. notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i>Téléchargement du PDF démarré`;
  728. document.body.appendChild(notification);
  729. setTimeout(() => notification.remove(), 3000);
  730. }
  731. }
  733. // Mettre à jour les statistiques
  734. function updateStats() {
  735. const total = allActs.length;
  736. const decrets = allActs.filter(a => a.type === 'decret').length;
  737. const arretes = allActs.filter(a => a.type === 'arrete').length;
  738. const enVigueur = allActs.filter(a => a.status === 'vigueur').length;
  740. document.getElementById('totalActs').textContent = total;
  741. document.getElementById('totalDecrets').textContent = decrets;
  742. document.getElementById('totalArretes').textContent = arretes;
  743. document.getElementById('totalVigueur').textContent = enVigueur;
  744. }
  746. // Fermer le modal en cliquant en dehors
  747. document.getElementById('detailModal').addEventListener('click', function(e) {
  748. if(e.target === this) {
  749. closeModal();
  750. }
  751. });
  752. </script>
  753. {% endblock %}