Hugging Face's logo

Spaces:
Rdvel
/
boo
Running

App Files Community
Rdvel commited on
Commit
80fcffb
路
verified 路
1 Parent(s): 55f622e

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +518 -320
index.html CHANGED
@@ -68,6 +68,28 @@
68
  transform: scale(1.05);
69
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0,0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
70
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  </style>
72
  </head>
73
  <body class="bg-gray-100 font-sans">
@@ -151,7 +173,7 @@
151
  <div class="px-2">
152
  <div class="text-xs uppercase text-blue-300 font-semibold px-4 mb-2 sidebar-text">Navigation</div>
153
 
154
- <a href="#" class="block px-4 py-2 text-sm font-medium rounded-md bg-blue-700 text-white">
155
  <i class="fas fa-home sidebar-icon mr-3"></i>
156
  <span class="sidebar-text">Tableau de bord</span>
157
  </a>
@@ -430,6 +452,18 @@
430
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100% de pr茅sence 脿 l'heure</td>
431
  <td class="px-6 py-4 text-sm text-gray-500">Contr么le des pr茅sences</td>
432
  </tr>
 
 
 
 
 
 
 
 
 
 
 
 
433
  </tbody>
434
  </table>
435
  </div>
@@ -442,12 +476,17 @@
442
  <div class="bg-white rounded-lg shadow overflow-hidden">
443
  <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
444
  <h3 class="text-lg font-semibold text-gray-700">D茅partement du Conseil</h3>
445
- <button id="council-edit-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
446
- <i class="fas fa-edit mr-2"></i>脡diter
447
- </button>
 
 
 
 
 
448
  </div>
449
 
450
- <div id="council-view" class="p-6">
451
  <div class="mb-6">
452
  <h4 class="text-md font-medium text-gray-700 mb-2">Semaine du 01/01/2023 au 07/01/2023</h4>
453
  <div class="bg-gray-50 p-4 rounded-md">
@@ -479,13 +518,18 @@
479
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Unit茅 dans la chorale</td>
480
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Collaboration entre membres</td>
481
  </tr>
 
 
 
 
 
482
  </tbody>
483
  </table>
484
  </div>
485
  </div>
486
 
487
- <div id="council-edit" class="hidden p-6">
488
- <form>
489
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
490
  <div>
491
  <label for="council-date-from" class="block text-sm font-medium text-gray-700">Date du</label>
@@ -520,347 +564,501 @@
520
  </div>
521
  </div>
522
 
523
- <!-- Param猫tres -->
524
- <div id="settings-content" class="hidden">
525
  <div class="bg-white rounded-lg shadow overflow-hidden">
526
- <div class="px-6 py-4 border-b border-gray-200">
527
- <h3 class="text-lg font-semibold text-gray-700">Param猫tres de l'application</h3>
 
 
 
 
 
 
 
 
528
  </div>
529
 
530
- <div class="p-6">
531
- <div class="mb-8">
532
- <h4 class="text-md font-medium text-gray-700 mb-4">Param猫tres g茅n茅raux</h4>
533
-
534
- <div class="space-y-4">
535
- <div class="flex items-center justify-between">
536
- <div>
537
- <p class="text-sm font-medium text-gray-700">Langue</p>
538
- <p class="text-sm text-gray-500">Choisissez la langue de l'interface</p>
539
- </div>
540
- <div class="flex items-center space-x-2">
541
- <button id="language-fr" class="px-3 py-1 border border-blue-600 rounded-md text-sm font-medium text-blue-600 bg-blue-50">Fran莽ais</button>
542
- <button id="language-en" class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white">English</button>
543
- </div>
544
- </div>
545
 
546
- <div class="flex items-center justify-between pt-4 border-t border-gray-200">
547
- <div>
548
- <p class="text-sm font-medium text-gray-700">Th猫me</p>
549
- <p class="text-sm text-gray-500">Choisissez entre le mode clair ou sombre</p>
550
- </div>
551
- <div class="flex items-center space-x-2">
552
- <button id="theme-light" class="px-3 py-1 border border-blue-600 rounded-md text-sm font-medium text-blue-600 bg-blue-50">Clair</button>
553
- <button id="theme-dark" class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white">Sombre</button>
554
- </div>
555
- </div>
556
  </div>
557
  </div>
558
 
559
- <div class="mb-8">
560
- <h4 class="text-md font-medium text-gray-700 mb-4">Param猫tres administrateur</h4>
561
-
562
- <div class="space-y-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
563
  <div>
564
- <label for="admin-username" class="block text-sm font-medium text-gray-700">Nom d'utilisateur administrateur</label>
565
- <input type="text" id="admin-username" value="Admin" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
566
  </div>
567
-
568
  <div>
569
- <label for="admin-password" class="block text-sm font-medium text-gray-700">Nouveau mot de passe</label>
570
- <input type="password" id="admin-password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
571
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
572
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
573
  <div>
574
- <label for="admin-confirm-password" class="block text-sm font-medium text-gray-700">Confirmer le mot de passe</label>
575
- <input type="password" id="admin-confirm-password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
576
  </div>
577
-
578
- <div class="pt-2">
579
- <button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
580
- Enregistrer les modifications
581
- </button>
582
  </div>
583
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
584
  </div>
585
 
586
- <div>
587
- <h4 class="text-md font-medium text-gray-700 mb-4">Gestion des utilisateurs</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
588
 
589
- <div class="overflow-x-auto">
590
- <table class="min-w-full divide-y divide-gray-200">
591
- <thead class="bg-gray-50">
592
- <tr>
593
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
594
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">D茅partement</th>
595
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Droits d'acc猫s</th>
596
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
597
- </tr>
598
- </thead>
599
- <tbody class="bg-white divide-y divide-gray-200">
600
- <tr>
601
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Admin</td>
602
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tous</td>
603
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Administrateur</td>
604
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
605
- <button class="text-blue-600 hover:text-blue-900">Modifier</button>
606
- </td>
607
- </tr>
608
- <tr>
609
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Secr茅taire</td>
610
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Secr茅tariat</td>
611
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">脡dition</td>
612
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
613
- <button class="text-blue-600 hover:text-blue-900">Modifier</button>
614
- </td>
615
- </tr>
616
- </tbody>
617
- </table>
618
  </div>
619
 
620
  <div class="mt-6">
621
- <h5 class="text-sm font-medium text-gray-700 mb-2">Ajouter un nouvel utilisateur</h5>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
622
 
623
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
624
- <div>
625
- <label for="new-user-name" class="block text-sm font-medium text-gray-700">Nom complet</label>
626
- <input type="text" id="new-user-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
627
- </div>
628
-
629
- <div>
630
- <label for="new-user-department" class="block text-sm font-medium text-gray-700">D茅partement</label>
631
- <select id="new-user-department" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
632
- <option>S茅lectionnez</option>
633
- <option>Secr茅tariat</option>
634
- <option>Conseil</option>
635
- <option>Tr茅sorerie</option>
636
- <option>Discipline</option>
637
- <option>Social</option>
638
- <option>Conduction</option>
639
- </select>
640
- </div>
641
-
642
- <div>
643
- <label for="new-user-role" class="block text-sm font-medium text-gray-700">R么le</label>
644
- <select id="new-user-role" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
645
- <option>S茅lectionnez</option>
646
- <option>Administrateur</option>
647
- <option>脡diteur</option>
648
- <option>Consultation</option>
649
- </select>
650
- </div>
651
- </div>
652
 
653
- <div class="mt-4">
654
- <button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
655
- Ajouter l'utilisateur
656
- </button>
657
- </div>
658
  </div>
659
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
660
  </div>
661
  </div>
662
  </div>
663
- </main>
664
- </div>
665
- </div>
666
-
667
- <script>
668
- // Variables d'茅tat
669
- let currentLanguage = 'fr';
670
- let darkMode = false;
671
- let currentUser = null;
672
-
673
- // 脡l茅ments DOM
674
- const authPage = document.getElementById('auth-page');
675
- const homePage = document.getElementById('home-page');
676
- const mainPage = document.getElementById('main-page');
677
- const loginForm = document.getElementById('login-form');
678
- const loginError = document.getElementById('login-error');
679
- const progressBar = document.getElementById('progress');
680
- const progressText = document.getElementById('progress-text');
681
- const sidebar = document.getElementById('sidebar');
682
- const sidebarToggle = document.getElementById('sidebar-toggle');
683
- const darkModeToggle = document.getElementById('dark-mode-toggle');
684
- const languageToggle = document.getElementById('language-toggle');
685
- const notificationsBtn = document.getElementById('notifications-btn');
686
- const notificationsDropdown = document.getElementById('notifications-dropdown');
687
- const logoutLink = document.getElementById('logout-link');
688
- const pageTitle = document.getElementById('page-title');
689
- const mainContent = document.getElementById('main-content');
690
-
691
- // Contenus des pages
692
- const dashboardContent = document.getElementById('dashboard-content');
693
- const programContent = document.getElementById('program-content');
694
- const councilContent = document.getElementById('council-content');
695
- const settingsContent = document.getElementById('settings-content');
696
-
697
- // Boutons et formulaires
698
- const councilEditBtn = document.getElementById('council-edit-btn');
699
- const councilView = document.getElementById('council-view');
700
- const councilEdit = document.getElementById('council-edit');
701
- const councilCancelBtn = document.getElementById('council-cancel-btn');
702
-
703
- // Liens de navigation
704
- const programLink = document.getElementById('program-link');
705
- const councilLink = document.getElementById('council-link');
706
- const settingsLink = document.getElementById('settings-link');
707
-
708
- // Gestionnaires d'茅v茅nements
709
- loginForm.addEventListener('submit', handleLogin);
710
- sidebarToggle.addEventListener('click', toggleSidebar);
711
- darkModeToggle.addEventListener('click', toggleDarkMode);
712
- languageToggle.addEventListener('click', toggleLanguage);
713
- notificationsBtn.addEventListener('click', toggleNotifications);
714
- logoutLink.addEventListener('click', handleLogout);
715
-
716
- // Navigation
717
- programLink.addEventListener('click', () => showContent('program'));
718
- councilLink.addEventListener('click', () => showContent('council'));
719
- settingsLink.addEventListener('click', () => showContent('settings'));
720
-
721
- // Boutons d茅partement
722
- document.querySelectorAll('.department-icon').forEach(icon => {
723
- icon.addEventListener('click', function() {
724
- const department = this.getAttribute('data-department');
725
- showContent(department);
726
- });
727
- });
728
-
729
- // Conseil
730
- councilEditBtn.addEventListener('click', () => {
731
- councilView.classList.add('hidden');
732
- councilEdit.classList.remove('hidden');
733
- });
734
-
735
- councilCancelBtn.addEventListener('click', () => {
736
- councilView.classList.remove('hidden');
737
- councilEdit.classList.add('hidden');
738
- });
739
-
740
- // Fonctions
741
- function handleLogin(e) {
742
- e.preventDefault();
743
- const username = document.getElementById('username').value;
744
- const password = document.getElementById('password').value;
745
-
746
- // Authentification simple (脿 remplacer par une authentification r茅elle)
747
- if (username === 'Admin' && password === '1234') {
748
- currentUser = {
749
- username: username,
750
- role: 'admin',
751
- department: 'all'
752
- };
753
-
754
- loginError.classList.add('hidden');
755
- authPage.classList.add('hidden');
756
- homePage.classList.remove('hidden');
757
 
758
- // Simuler le chargement avec une barre de progression
759
- simulateLoading();
760
- } else {
761
- loginError.classList.remove('hidden');
762
- }
763
- }
764
-
765
- function simulateLoading() {
766
- let progress = 0;
767
- const interval = setInterval(() => {
768
- progress += 1;
769
- progressBar.style.width = `${progress}%`;
770
- progressText.textContent = `${progress}%`;
771
-
772
- if (progress >= 100) {
773
- clearInterval(interval);
774
- homePage.classList.add('hidden');
775
- mainPage.classList.remove('hidden');
776
-
777
- // Mettre 脿 jour l'interface utilisateur
778
- updateUI();
779
- }
780
- }, 100);
781
- }
782
-
783
- function toggleSidebar() {
784
- sidebar.classList.toggle('collapsed');
785
- }
786
-
787
- function toggleDarkMode() {
788
- darkMode = !darkMode;
789
- document.body.classList.toggle('dark-mode');
790
-
791
- if (darkMode) {
792
- darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
793
- } else {
794
- darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
795
- }
796
- }
797
-
798
- function toggleLanguage() {
799
- currentLanguage = currentLanguage === 'fr' ? 'en' : 'fr';
800
- languageToggle.textContent = currentLanguage.toUpperCase();
801
-
802
- // Ici, vous pourriez ajouter une logique pour changer tout le texte de l'interface
803
- // en fonction de la langue s茅lectionn茅e
804
- }
805
-
806
- function toggleNotifications() {
807
- notificationsDropdown.classList.toggle('hidden');
808
- }
809
-
810
- function handleLogout() {
811
- currentUser = null;
812
- mainPage.classList.add('hidden');
813
- authPage.classList.remove('hidden');
814
-
815
- // R茅initialiser le formulaire
816
- loginForm.reset();
817
- }
818
-
819
- function showContent(content) {
820
- // Masquer tous les contenus
821
- dashboardContent.classList.add('hidden');
822
- programContent.classList.add('hidden');
823
- councilContent.classList.add('hidden');
824
- settingsContent.classList.add('hidden');
825
-
826
- // Afficher le contenu demand茅
827
- switch(content) {
828
- case 'dashboard':
829
- dashboardContent.classList.remove('hidden');
830
- pageTitle.textContent = currentLanguage === 'fr' ? 'Tableau de bord' : 'Dashboard';
831
- break;
832
- case 'program':
833
- programContent.classList.remove('hidden');
834
- pageTitle.textContent = currentLanguage === 'fr' ? 'Programme Hebdomadaire' : 'Weekly Program';
835
- break;
836
- case 'council':
837
- councilContent.classList.remove('hidden');
838
- pageTitle.textContent = currentLanguage === 'fr' ? 'D茅partement du Conseil' : 'Council Department';
839
- break;
840
- case 'settings':
841
- settingsContent.classList.remove('hidden');
842
- pageTitle.textContent = currentLanguage === 'fr' ? 'Param猫tres' : 'Settings';
843
- break;
844
- default:
845
- dashboardContent.classList.remove('hidden');
846
- pageTitle.textContent = currentLanguage === 'fr' ? 'Tableau de bord' : 'Dashboard';
847
- }
848
- }
849
-
850
- function updateUI() {
851
- // Mettre 脿 jour l'interface en fonction de l'utilisateur connect茅
852
- document.getElementById('sidebar-username').textContent = currentUser.username;
853
-
854
- // G茅rer les droits d'acc猫s en fonction du r么le de l'utilisateur
855
- // Cette partie serait plus complexe dans une application r茅elle
856
- }
857
-
858
- // Initialiser l'application
859
- document.addEventListener('DOMContentLoaded', () => {
860
- authPage.classList.remove('hidden');
861
- homePage.classList.add('hidden');
862
- mainPage.classList.add('hidden');
863
- });
864
- </script>
865
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 馃К <a href="https://enzostvs-deepsite.hf.space?remix=Rdvel/boo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
866
  </html>
 
68
  transform: scale(1.05);
69
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0,0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
70
  }
71
+
72
+ .tab-content {
73
+ display: none;
74
+ }
75
+
76
+ .tab-content.active {
77
+ display: block;
78
+ animation: fadeIn 0.3s;
79
+ }
80
+
81
+ .tab-button.active {
82
+ background-color: #3b82f6;
83
+ color: white;
84
+ }
85
+
86
+ .member-photo {
87
+ width: 120px;
88
+ height: 120px;
89
+ object-fit: cover;
90
+ border-radius: 50%;
91
+ border: 3px solid #3b82f6;
92
+ }
93
  </style>
94
  </head>
95
  <body class="bg-gray-100 font-sans">
 
173
  <div class="px-2">
174
  <div class="text-xs uppercase text-blue-300 font-semibold px-4 mb-2 sidebar-text">Navigation</div>
175
 
176
+ <a href="#" id="dashboard-link" class="block px-4 py-2 text-sm font-medium rounded-md bg-blue-700 text-white">
177
  <i class="fas fa-home sidebar-icon mr-3"></i>
178
  <span class="sidebar-text">Tableau de bord</span>
179
  </a>
 
452
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100% de pr茅sence 脿 l'heure</td>
453
  <td class="px-6 py-4 text-sm text-gray-500">Contr么le des pr茅sences</td>
454
  </tr>
455
+ <tr>
456
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Social</td>
457
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Solidarit茅</td>
458
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Visiter tous les membres malades</td>
459
+ <td class="px-6 py-4 text-sm text-gray-500">Visites le samedi</td>
460
+ </tr>
461
+ <tr>
462
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Conduction</td>
463
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Nouveaux cantiques</td>
464
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apprendre 3 nouveaux cantiques</td>
465
+ <td class="px-6 py-4 text-sm text-gray-500">R茅p茅tition le vendredi</td>
466
+ </tr>
467
  </tbody>
468
  </table>
469
  </div>
 
476
  <div class="bg-white rounded-lg shadow overflow-hidden">
477
  <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
478
  <h3 class="text-lg font-semibold text-gray-700">D茅partement du Conseil</h3>
479
+ <div class="flex space-x-2">
480
+ <button id="council-view-btn" class="tab-button active px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none">
481
+ Visualiser
482
+ </button>
483
+ <button id="council-edit-btn" class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none">
484
+ 脡diter
485
+ </button>
486
+ </div>
487
  </div>
488
 
489
+ <div id="council-view" class="tab-content active p-6">
490
  <div class="mb-6">
491
  <h4 class="text-md font-medium text-gray-700 mb-2">Semaine du 01/01/2023 au 07/01/2023</h4>
492
  <div class="bg-gray-50 p-4 rounded-md">
 
518
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Unit茅 dans la chorale</td>
519
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Collaboration entre membres</td>
520
  </tr>
521
+ <tr>
522
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/01/2023 - 21/01/2023</td>
523
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Engagement</td>
524
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Augmenter la participation</td>
525
+ </tr>
526
  </tbody>
527
  </table>
528
  </div>
529
  </div>
530
 
531
+ <div id="council-edit" class="tab-content p-6">
532
+ <form id="council-form">
533
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
534
  <div>
535
  <label for="council-date-from" class="block text-sm font-medium text-gray-700">Date du</label>
 
564
  </div>
565
  </div>
566
 
567
+ <!-- D茅partement Tr茅sorerie -->
568
+ <div id="treasury-content" class="hidden">
569
  <div class="bg-white rounded-lg shadow overflow-hidden">
570
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
571
+ <h3 class="text-lg font-semibold text-gray-700">D茅partement de la Tr茅sorerie</h3>
572
+ <div class="flex space-x-2">
573
+ <button id="treasury-view-btn" class="tab-button active px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none">
574
+ Visualiser
575
+ </button>
576
+ <button id="treasury-edit-btn" class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none">
577
+ 脡diter
578
+ </button>
579
+ </div>
580
  </div>
581
 
582
+ <div id="treasury-view" class="tab-content active p-6">
583
+ <div class="mb-6">
584
+ <h4 class="text-md font-medium text-gray-700 mb-2">Semaine du 01/01/2023 au 07/01/2023</h4>
585
+ <div class="bg-gray-50 p-4 rounded-md">
586
+ <h5 class="font-medium text-gray-700 mb-1">Cotisation 1:</h5>
587
+ <p class="text-gray-600">5000 FCFA par membre</p>
 
 
 
 
 
 
 
 
 
588
 
589
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Cotisation 2:</h5>
590
+ <p class="text-gray-600">2000 FCFA pour les activit茅s</p>
591
+
592
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Objectif 脿 atteindre:</h5>
593
+ <p class="text-gray-600">Collecter 100% des cotisations avant le 05/01/2023</p>
 
 
 
 
 
594
  </div>
595
  </div>
596
 
597
+ <div class="overflow-x-auto">
598
+ <table class="min-w-full divide-y divide-gray-200">
599
+ <thead class="bg-gray-50">
600
+ <tr>
601
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
602
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cotisation 1</th>
603
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cotisation 2</th>
604
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Objectif</th>
605
+ </tr>
606
+ </thead>
607
+ <tbody class="bg-white divide-y divide-gray-200">
608
+ <tr>
609
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/01/2023 - 07/01/2023</td>
610
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5000 FCFA</td>
611
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2000 FCFA</td>
612
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Collecte compl猫te</td>
613
+ </tr>
614
+ <tr>
615
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08/01/2023 - 14/01/2023</td>
616
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5000 FCFA</td>
617
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3000 FCFA</td>
618
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Collecte compl猫te</td>
619
+ </tr>
620
+ </tbody>
621
+ </table>
622
+ </div>
623
+ </div>
624
+
625
+ <div id="treasury-edit" class="tab-content p-6">
626
+ <form id="treasury-form">
627
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
628
  <div>
629
+ <label for="treasury-date-from" class="block text-sm font-medium text-gray-700">Date du</label>
630
+ <input type="date" id="treasury-date-from" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
631
  </div>
 
632
  <div>
633
+ <label for="treasury-date-to" class="block text-sm font-medium text-gray-700">Date au</label>
634
+ <input type="date" id="treasury-date-to" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
635
  </div>
636
+ </div>
637
+
638
+ <div class="mt-6">
639
+ <label for="treasury-contribution1" class="block text-sm font-medium text-gray-700">Cotisation 1</label>
640
+ <textarea id="treasury-contribution1" rows="2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
641
+ </div>
642
+
643
+ <div class="mt-6">
644
+ <label for="treasury-contribution2" class="block text-sm font-medium text-gray-700">Cotisation 2</label>
645
+ <textarea id="treasury-contribution2" rows="2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
646
+ </div>
647
+
648
+ <div class="mt-6">
649
+ <label for="treasury-objective" class="block text-sm font-medium text-gray-700">Objectif 脿 atteindre</label>
650
+ <textarea id="treasury-objective" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
651
+ </div>
652
+
653
+ <div class="mt-6 flex justify-end space-x-3">
654
+ <button type="button" id="treasury-cancel-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
655
+ Annuler
656
+ </button>
657
+ <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
658
+ Enregistrer
659
+ </button>
660
+ </div>
661
+ </form>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- D茅partement Discipline -->
667
+ <div id="discipline-content" class="hidden">
668
+ <div class="bg-white rounded-lg shadow overflow-hidden">
669
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
670
+ <h3 class="text-lg font-semibold text-gray-700">D茅partement de la Discipline</h3>
671
+ <div class="flex space-x-2">
672
+ <button id="discipline-view-btn" class="tab-button active px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none">
673
+ Visualiser
674
+ </button>
675
+ <button id="discipline-edit-btn" class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none">
676
+ 脡diter
677
+ </button>
678
+ </div>
679
+ </div>
680
+
681
+ <div id="discipline-view" class="tab-content active p-6">
682
+ <div class="mb-6">
683
+ <h4 class="text-md font-medium text-gray-700 mb-2">Semaine du 01/01/2023 au 07/01/2023</h4>
684
+ <div class="bg-gray-50 p-4 rounded-md">
685
+ <h5 class="font-medium text-gray-700 mb-1">Programme 1:</h5>
686
+ <p class="text-gray-600">Contr么le de pr茅sence aux r茅p茅titions</p>
687
+
688
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Programme 2:</h5>
689
+ <p class="text-gray-600">Ponctualit茅 aux r茅unions</p>
690
+
691
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Programme 3:</h5>
692
+ <p class="text-gray-600">Respect du code vestimentaire</p>
693
 
694
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Membre responsable:</h5>
695
+ <p class="text-gray-600">Jean Dupont</p>
696
+ </div>
697
+ </div>
698
+
699
+ <div class="overflow-x-auto">
700
+ <table class="min-w-full divide-y divide-gray-200">
701
+ <thead class="bg-gray-50">
702
+ <tr>
703
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
704
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 1</th>
705
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 2</th>
706
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 3</th>
707
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Responsable</th>
708
+ </tr>
709
+ </thead>
710
+ <tbody class="bg-white divide-y divide-gray-200">
711
+ <tr>
712
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/01/2023 - 07/01/2023</td>
713
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Contr么le de pr茅sence</td>
714
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ponctualit茅</td>
715
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Code vestimentaire</td>
716
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jean Dupont</td>
717
+ </tr>
718
+ <tr>
719
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08/01/2023 - 14/01/2023</td>
720
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Participation active</td>
721
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Respect horaires</td>
722
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tenue correcte</td>
723
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Marie Lambert</td>
724
+ </tr>
725
+ </tbody>
726
+ </table>
727
+ </div>
728
+ </div>
729
+
730
+ <div id="discipline-edit" class="tab-content p-6">
731
+ <form id="discipline-form">
732
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
733
  <div>
734
+ <label for="discipline-date-from" class="block text-sm font-medium text-gray-700">Date du</label>
735
+ <input type="date" id="discipline-date-from" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
736
  </div>
737
+ <div>
738
+ <label for="discipline-date-to" class="block text-sm font-medium text-gray-700">Date au</label>
739
+ <input type="date" id="discipline-date-to" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 
 
740
  </div>
741
  </div>
742
+
743
+ <div class="mt-6">
744
+ <label for="discipline-program1" class="block text-sm font-medium text-gray-700">Programme 1</label>
745
+ <input type="text" id="discipline-program1" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
746
+ </div>
747
+
748
+ <div class="mt-6">
749
+ <label for="discipline-program2" class="block text-sm font-medium text-gray-700">Programme 2</label>
750
+ <input type="text" id="discipline-program2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
751
+ </div>
752
+
753
+ <div class="mt-6">
754
+ <label for="discipline-program3" class="block text-sm font-medium text-gray-700">Programme 3</label>
755
+ <input type="text" id="discipline-program3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
756
+ </div>
757
+
758
+ <div class="mt-6">
759
+ <label for="discipline-member" class="block text-sm font-medium text-gray-700">Membre responsable</label>
760
+ <select id="discipline-member" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
761
+ <option>S茅lectionnez un membre</option>
762
+ <option>Jean Dupont</option>
763
+ <option>Marie Lambert</option>
764
+ <option>Paul Martin</option>
765
+ <option>Sophie Durand</option>
766
+ </select>
767
+ </div>
768
+
769
+ <div class="mt-6 flex justify-end space-x-3">
770
+ <button type="button" id="discipline-cancel-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
771
+ Annuler
772
+ </button>
773
+ <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
774
+ Enregistrer
775
+ </button>
776
+ </div>
777
+ </form>
778
+ </div>
779
+ </div>
780
+ </div>
781
+
782
+ <!-- D茅partement Social -->
783
+ <div id="social-content" class="hidden">
784
+ <div class="bg-white rounded-lg shadow overflow-hidden">
785
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
786
+ <h3 class="text-lg font-semibold text-gray-700">D茅partement du Social</h3>
787
+ <div class="flex space-x-2">
788
+ <button id="social-view-btn" class="tab-button active px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none">
789
+ Visualiser
790
+ </button>
791
+ <button id="social-edit-btn" class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none">
792
+ 脡diter
793
+ </button>
794
+ </div>
795
+ </div>
796
+
797
+ <div id="social-view" class="tab-content active p-6">
798
+ <div class="mb-6">
799
+ <h4 class="text-md font-medium text-gray-700 mb-2">Semaine du 01/01/2023 au 07/01/2023</h4>
800
+ <div class="bg-gray-50 p-4 rounded-md">
801
+ <h5 class="font-medium text-gray-700 mb-1">Programme 1:</h5>
802
+ <p class="text-gray-600">Visite des membres malades</p>
803
+
804
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Programme 2:</h5>
805
+ <p class="text-gray-600">Collecte de dons pour les n茅cessiteux</p>
806
+
807
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Programme 3:</h5>
808
+ <p class="text-gray-600">R茅union de soutien psychologique</p>
809
+
810
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Objectif 脿 atteindre:</h5>
811
+ <p class="text-gray-600">Visiter tous les membres malades et collecter 100 000 FCFA</p>
812
+ </div>
813
  </div>
814
 
815
+ <div class="overflow-x-auto">
816
+ <table class="min-w-full divide-y divide-gray-200">
817
+ <thead class="bg-gray-50">
818
+ <tr>
819
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
820
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 1</th>
821
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 2</th>
822
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 3</th>
823
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Objectif</th>
824
+ </tr>
825
+ </thead>
826
+ <tbody class="bg-white divide-y divide-gray-200">
827
+ <tr>
828
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/01/2023 - 07/01/2023</td>
829
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Visite malades</td>
830
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Collecte dons</td>
831
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Soutien psychologique</td>
832
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">100 000 FCFA</td>
833
+ </tr>
834
+ <tr>
835
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08/01/2023 - 14/01/2023</td>
836
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Visite familles</td>
837
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Aide alimentaire</td>
838
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conseil familial</td>
839
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50 colis alimentaires</td>
840
+ </tr>
841
+ </tbody>
842
+ </table>
843
+ </div>
844
+ </div>
845
+
846
+ <div id="social-edit" class="tab-content p-6">
847
+ <form id="social-form">
848
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
849
+ <div>
850
+ <label for="social-date-from" class="block text-sm font-medium text-gray-700">Date du</label>
851
+ <input type="date" id="social-date-from" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
852
+ </div>
853
+ <div>
854
+ <label for="social-date-to" class="block text-sm font-medium text-gray-700">Date au</label>
855
+ <input type="date" id="social-date-to" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
856
+ </div>
857
+ </div>
858
 
859
+ <div class="mt-6">
860
+ <label for="social-program1" class="block text-sm font-medium text-gray-700">Programme 1</label>
861
+ <input type="text" id="social-program1" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
862
+ </div>
863
+
864
+ <div class="mt-6">
865
+ <label for="social-program2" class="block text-sm font-medium text-gray-700">Programme 2</label>
866
+ <input type="text" id="social-program2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
867
+ </div>
868
+
869
+ <div class="mt-6">
870
+ <label for="social-program3" class="block text-sm font-medium text-gray-700">Programme 3</label>
871
+ <input type="text" id="social-program3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
872
  </div>
873
 
874
  <div class="mt-6">
875
+ <label for="social-objective" class="block text-sm font-medium text-gray-700">Objectif 脿 atteindre</label>
876
+ <textarea id="social-objective" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
877
+ </div>
878
+
879
+ <div class="mt-6 flex justify-end space-x-3">
880
+ <button type="button" id="social-cancel-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
881
+ Annuler
882
+ </button>
883
+ <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
884
+ Enregistrer
885
+ </button>
886
+ </div>
887
+ </form>
888
+ </div>
889
+ </div>
890
+ </div>
891
+
892
+ <!-- D茅partement Conduction -->
893
+ <div id="conduction-content" class="hidden">
894
+ <div class="bg-white rounded-lg shadow overflow-hidden">
895
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
896
+ <h3 class="text-lg font-semibold text-gray-700">D茅partement de la Conduction</h3>
897
+ <div class="flex space-x-2">
898
+ <button id="conduction-view-btn" class="tab-button active px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none">
899
+ Visualiser
900
+ </button>
901
+ <button id="conduction-edit-btn" class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none">
902
+ 脡diter
903
+ </button>
904
+ </div>
905
+ </div>
906
+
907
+ <div id="conduction-view" class="tab-content active p-6">
908
+ <div class="mb-6">
909
+ <h4 class="text-md font-medium text-gray-700 mb-2">Semaine du 01/01/2023 au 07/01/2023</h4>
910
+ <div class="bg-gray-50 p-4 rounded-md">
911
+ <h5 class="font-medium text-gray-700 mb-1">Cantique 1:</h5>
912
+ <p class="text-gray-600">"Gloire 脿 Dieu" - Interpr茅t茅 par Jean Dupont</p>
913
 
914
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Cantique 2:</h5>
915
+ <p class="text-gray-600">"Merci Seigneur" - Interpr茅t茅 par Marie Lambert</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
916
 
917
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Cantique 3:</h5>
918
+ <p class="text-gray-600">"All茅luia" - Interpr茅t茅 par Paul Martin</p>
919
+
920
+ <h5 class="font-medium text-gray-700 mt-3 mb-1">Nouveaux cantiques:</h5>
921
+ <p class="text-gray-600">"Amour divin" et "Louange 茅ternelle" 脿 apprendre cette semaine</p>
922
  </div>
923
  </div>
924
+
925
+ <div class="overflow-x-auto">
926
+ <table class="min-w-full divide-y divide-gray-200">
927
+ <thead class="bg-gray-50">
928
+ <tr>
929
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
930
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cantique 1</th>
931
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cantique 2</th>
932
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cantique 3</th>
933
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nouveaux</th>
934
+ </tr>
935
+ </thead>
936
+ <tbody class="bg-white divide-y divide-gray-200">
937
+ <tr>
938
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/01/2023 - 07/01/2023</td>
939
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Gloire 脿 Dieu (Jean)</td>
940
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Merci Seigneur (Marie)</td>
941
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">All茅luia (Paul)</td>
942
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Amour divin, Louange 茅ternelle</td>
943
+ </tr>
944
+ <tr>
945
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08/01/2023 - 14/01/2023</td>
946
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Saint est l'脡ternel (Sophie)</td>
947
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">J茅sus est vivant (Luc)</td>
948
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mon sauveur (Anne)</td>
949
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Gloire au Roi, Hosanna</td>
950
+ </tr>
951
+ </tbody>
952
+ </table>
953
+ </div>
954
+ </div>
955
+
956
+ <div id="conduction-edit" class="tab-content p-6">
957
+ <form id="conduction-form">
958
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
959
+ <div>
960
+ <label for="conduction-date-from" class="block text-sm font-medium text-gray-700">Date du</label>
961
+ <input type="date" id="conduction-date-from" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
962
+ </div>
963
+ <div>
964
+ <label for="conduction-date-to" class="block text-sm font-medium text-gray-700">Date au</label>
965
+ <input type="date" id="conduction-date-to" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
966
+ </div>
967
+ </div>
968
+
969
+ <div class="mt-6">
970
+ <label for="conduction-song1" class="block text-sm font-medium text-gray-700">Cantique 1</label>
971
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
972
+ <input type="text" id="conduction-song1" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Titre du cantique">
973
+ <select id="conduction-member1" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
974
+ <option>S茅lectionnez un membre</option>
975
+ <option>Jean Dupont</option>
976
+ <option>Marie Lambert</option>
977
+ <option>Paul Martin</option>
978
+ <option>Sophie Durand</option>
979
+ </select>
980
+ </div>
981
+ </div>
982
+
983
+ <div class="mt-6">
984
+ <label for="conduction-song2" class="block text-sm font-medium text-gray-700">Cantique 2</label>
985
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
986
+ <input type="text" id="conduction-song2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Titre du cantique">
987
+ <select id="conduction-member2" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
988
+ <option>S茅lectionnez un membre</option>
989
+ <option>Jean Dupont</option>
990
+ <option>Marie Lambert</option>
991
+ <option>Paul Martin</option>
992
+ <option>Sophie Durand</option>
993
+ </select>
994
+ </div>
995
+ </div>
996
+
997
+ <div class="mt-6">
998
+ <label for="conduction-song3" class="block text-sm font-medium text-gray-700">Cantique 3</label>
999
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1000
+ <input type="text" id="conduction-song3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Titre du cantique">
1001
+ <select id="conduction-member3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
1002
+ <option>S茅lectionnez un membre</option>
1003
+ <option>Jean Dupont</option>
1004
+ <option>Marie Lambert</option>
1005
+ <option>Paul Martin</option>
1006
+ <option>Sophie Durand</option>
1007
+ </select>
1008
+ </div>
1009
+ </div>
1010
+
1011
+ <div class="mt-6">
1012
+ <label for="conduction-new-songs" class="block text-sm font-medium text-gray-700">Nouveaux cantiques</label>
1013
+ <textarea id="conduction-new-songs" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Liste des nouveaux cantiques 脿 apprendre"></textarea>
1014
+ </div>
1015
+
1016
+ <div class="mt-6 flex justify-end space-x-3">
1017
+ <button type="button" id="conduction-cancel-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
1018
+ Annuler
1019
+ </button>
1020
+ <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
1021
+ Enregistrer
1022
+ </button>
1023
+ </div>
1024
+ </form>
1025
  </div>
1026
  </div>
1027
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1028
 
1029
+ <!-- Gestion des Membres -->
1030
+ <div id="members-content" class="hidden">
1031
+ <div class="bg-white rounded-lg shadow overflow-hidden">
1032
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
1033
+ <h3 class="text-lg font-semibold text-gray-700">Gestion des Membres</h3>
1034
+ <div class="flex space-x-2">
1035
+ <button id="members-view-btn" class="tab-button active px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none">
1036
+ Visualiser
1037
+ </button>
1038
+ <button id="members-edit-btn" class="tab-button px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none">
1039
+ 脡diter
1040
+ </button>
1041
+ </div>
1042
+ </div>
1043
+
1044
+ <div id="members-view" class="tab-content active p-6">
1045
+ <div class="mb-6 flex justify-between items-center">
1046
+ <div class="relative w-64">
1047
+ <input type="text" id="members-search" class="block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Rechercher un membre...">
1048
+ <button class="absolute right-3 top-2 text-gray-400 hover:text-gray-500">
1049
+ <i class="fas fa-search"></i>
1050
+ </button>
1051
+ </div>
1052
+ <button id="members-export-btn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
1053
+ <i class="fas fa-file-export mr-2"></i>Exporter
1054
+ </button>
1055
+ </div>
1056
+
1057
+ <div class="overflow-x-auto">
1058
+ <table class="min-w-full divide-y divide-gray-200">
1059
+ <thead class="bg-gray-50">
1060
+ <tr>
1061
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Photo</th>
1062
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
1063
+ <th scope="col" class="
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1064
  </html>