Hugging Face's logo

Spaces:
Rdvel
/
bonne-2
Running

App Files Community
Rdvel commited on
Commit
2d18f0f
·
verified ·
1 Parent(s): 6a6acfd

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1041 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bonne 2
3
- emoji: 🌍
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: bonne-2
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1041 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CHORALE BONNE SEMENCE</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .progress-bar {
11
+ width: 100%;
12
+ height: 4px;
13
+ background-color: #e5e7eb;
14
+ border-radius: 2px;
15
+ overflow: hidden;
16
+ }
17
+
18
+ .progress-bar-fill {
19
+ height: 100%;
20
+ background-color: #3b82f6;
21
+ transition: width 0.5s ease;
22
+ }
23
+
24
+ .sidebar {
25
+ transition: all 0.3s ease;
26
+ }
27
+
28
+ .sidebar.collapsed {
29
+ width: 60px;
30
+ }
31
+
32
+ .sidebar.collapsed .sidebar-text {
33
+ display: none;
34
+ }
35
+
36
+ .sidebar.collapsed .logo-text {
37
+ display: none;
38
+ }
39
+
40
+ .sidebar.collapsed .sidebar-icon {
41
+ margin-right: 0;
42
+ }
43
+
44
+ .main-content {
45
+ transition: all 0.3s ease;
46
+ }
47
+
48
+ .dark-mode {
49
+ background-color: #1a202c;
50
+ color: #f7fafc;
51
+ }
52
+
53
+ .dark-mode .sidebar {
54
+ background-color: #2d3748;
55
+ }
56
+
57
+ .dark-mode .card {
58
+ background-color: #2d3748;
59
+ border-color: #4a5568;
60
+ }
61
+
62
+ .dark-mode input, .dark-mode select, .dark-mode textarea {
63
+ background-color: #4a5568;
64
+ border-color: #4a5568;
65
+ color: #f7fafc;
66
+ }
67
+
68
+ .dark-mode .table {
69
+ background-color: #2d3748;
70
+ }
71
+
72
+ .dark-mode .table th, .dark-mode .table td {
73
+ border-color: #4a5568;
74
+ }
75
+
76
+ .fade-in {
77
+ animation: fadeIn 0.5s;
78
+ }
79
+
80
+ @keyframes fadeIn {
81
+ from { opacity: 0; }
82
+ to { opacity: 1; }
83
+ }
84
+
85
+ .hidden {
86
+ display: none;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gray-100 font-sans">
91
+ <!-- Authentification -->
92
+ <div id="auth-page" class="min-h-screen flex items-center justify-center bg-gray-50 p-4">
93
+ <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
94
+ <div class="text-center mb-8">
95
+ <img src="https://via.placeholder.com/100" alt="Logo Chorale" class="mx-auto h-24 w-auto">
96
+ <h1 class="text-2xl font-bold text-gray-800 mt-4">CHORALE BONNE SEMENCE</h1>
97
+ <p class="text-gray-600">Connectez-vous pour accéder à l'application</p>
98
+ </div>
99
+ <form id="login-form" class="space-y-6">
100
+ <div>
101
+ <label for="username" class="block text-sm font-medium text-gray-700">Nom d'utilisateur</label>
102
+ <input type="text" id="username" name="username" required 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">
103
+ </div>
104
+ <div>
105
+ <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
106
+ <input type="password" id="password" name="password" required 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">
107
+ </div>
108
+ <div>
109
+ <button type="submit" class="w-full flex justify-center py-2 px-4 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">
110
+ Se connecter
111
+ </button>
112
+ </div>
113
+ </form>
114
+ <div id="login-error" class="mt-4 text-center text-sm text-red-600 hidden"></div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Page d'accueil avec barre de progression -->
119
+ <div id="loading-page" class="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-4 hidden">
120
+ <div class="text-center mb-8">
121
+ <img src="https://via.placeholder.com/100" alt="Logo Chorale" class="mx-auto h-24 w-auto">
122
+ <h1 class="text-2xl font-bold text-gray-800 mt-4">CHORALE BONNE SEMENCE</h1>
123
+ <p class="text-gray-600">Chargement de l'application...</p>
124
+ </div>
125
+ <div class="w-full max-w-md">
126
+ <div class="progress-bar">
127
+ <div id="progress-bar-fill" class="progress-bar-fill" style="width: 0%"></div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Interface principale -->
133
+ <div id="main-app" class="hidden">
134
+ <!-- Sidebar -->
135
+ <div id="sidebar" class="sidebar fixed top-0 left-0 h-screen w-64 bg-white shadow-lg z-10">
136
+ <div class="flex items-center justify-between p-4 border-b">
137
+ <div class="flex items-center">
138
+ <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8">
139
+ <span class="logo-text ml-2 text-lg font-semibold">Bonne Semence</span>
140
+ </div>
141
+ <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700">
142
+ <i class="fas fa-bars"></i>
143
+ </button>
144
+ </div>
145
+ <div class="p-4">
146
+ <div class="flex items-center mb-6">
147
+ <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
148
+ <span id="user-initials">A</span>
149
+ </div>
150
+ <div class="ml-3 sidebar-text">
151
+ <p class="text-sm font-medium text-gray-700" id="username-display">Admin</p>
152
+ <p class="text-xs text-gray-500">Administrateur</p>
153
+ </div>
154
+ </div>
155
+ <nav>
156
+ <div class="space-y-1">
157
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="dashboard">
158
+ <i class="sidebar-icon fas fa-tachometer-alt mr-3 text-gray-500"></i>
159
+ <span class="sidebar-text">Tableau de bord</span>
160
+ </a>
161
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="programme">
162
+ <i class="sidebar-icon fas fa-calendar-alt mr-3 text-gray-500"></i>
163
+ <span class="sidebar-text">Programme hebdomadaire</span>
164
+ </a>
165
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="secretariat">
166
+ <i class="sidebar-icon fas fa-file-alt mr-3 text-gray-500"></i>
167
+ <span class="sidebar-text">Secrétariat</span>
168
+ </a>
169
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="conseil">
170
+ <i class="sidebar-icon fas fa-users mr-3 text-gray-500"></i>
171
+ <span class="sidebar-text">Conseil</span>
172
+ </a>
173
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="tresorerie">
174
+ <i class="sidebar-icon fas fa-money-bill-wave mr-3 text-gray-500"></i>
175
+ <span class="sidebar-text">Trésorerie</span>
176
+ </a>
177
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="discipline">
178
+ <i class="sidebar-icon fas fa-gavel mr-3 text-gray-500"></i>
179
+ <span class="sidebar-text">Discipline</span>
180
+ </a>
181
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="social">
182
+ <i class="sidebar-icon fas fa-hands-helping mr-3 text-gray-500"></i>
183
+ <span class="sidebar-text">Social</span>
184
+ </a>
185
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="conduction">
186
+ <i class="sidebar-icon fas fa-music mr-3 text-gray-500"></i>
187
+ <span class="sidebar-text">Conduction</span>
188
+ </a>
189
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="membres">
190
+ <i class="sidebar-icon fas fa-user-friends mr-3 text-gray-500"></i>
191
+ <span class="sidebar-text">Membres</span>
192
+ </a>
193
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="journal">
194
+ <i class="sidebar-icon fas fa-clipboard-list mr-3 text-gray-500"></i>
195
+ <span class="sidebar-text">Journal des opérations</span>
196
+ </a>
197
+ <a href="#" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100" data-page="parametres">
198
+ <i class="sidebar-icon fas fa-cog mr-3 text-gray-500"></i>
199
+ <span class="sidebar-text">Paramètres</span>
200
+ </a>
201
+ <a href="#" id="logout-btn" class="menu-item flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
202
+ <i class="sidebar-icon fas fa-sign-out-alt mr-3 text-gray-500"></i>
203
+ <span class="sidebar-text">Déconnexion</span>
204
+ </a>
205
+ </div>
206
+ </nav>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Main Content -->
211
+ <div id="main-content" class="main-content ml-64 p-6 transition-all duration-300">
212
+ <!-- Dashboard -->
213
+ <div id="dashboard-page" class="page-content">
214
+ <div class="flex justify-between items-center mb-6">
215
+ <h2 class="text-2xl font-bold text-gray-800">Tableau de bord</h2>
216
+ <div class="flex space-x-2">
217
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
218
+ <i class="fas fa-moon"></i>
219
+ </button>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
224
+ <div class="card bg-white p-6 rounded-lg shadow">
225
+ <div class="flex items-center">
226
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
227
+ <i class="fas fa-users text-xl"></i>
228
+ </div>
229
+ <div class="ml-4">
230
+ <p class="text-sm font-medium text-gray-500">Membres</p>
231
+ <p class="text-2xl font-semibold text-gray-800">120</p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ <div class="card bg-white p-6 rounded-lg shadow">
236
+ <div class="flex items-center">
237
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
238
+ <i class="fas fa-calendar-check text-xl"></i>
239
+ </div>
240
+ <div class="ml-4">
241
+ <p class="text-sm font-medium text-gray-500">Activités cette semaine</p>
242
+ <p class="text-2xl font-semibold text-gray-800">5</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <div class="card bg-white p-6 rounded-lg shadow">
247
+ <div class="flex items-center">
248
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
249
+ <i class="fas fa-money-bill-wave text-xl"></i>
250
+ </div>
251
+ <div class="ml-4">
252
+ <p class="text-sm font-medium text-gray-500">Cotisations</p>
253
+ <p class="text-2xl font-semibold text-gray-800">$2,450</p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ <div class="card bg-white p-6 rounded-lg shadow">
258
+ <div class="flex items-center">
259
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
260
+ <i class="fas fa-music text-xl"></i>
261
+ </div>
262
+ <div class="ml-4">
263
+ <p class="text-sm font-medium text-gray-500">Cantiques</p>
264
+ <p class="text-2xl font-semibold text-gray-800">85</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
271
+ <div class="card bg-white p-6 rounded-lg shadow">
272
+ <h3 class="text-lg font-semibold mb-4">Activités récentes</h3>
273
+ <div class="space-y-4">
274
+ <div class="flex items-start">
275
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
276
+ <i class="fas fa-user-plus"></i>
277
+ </div>
278
+ <div class="ml-3">
279
+ <p class="text-sm font-medium">Nouveau membre ajouté</p>
280
+ <p class="text-xs text-gray-500">Jean Dupont - 2 heures ago</p>
281
+ </div>
282
+ </div>
283
+ <div class="flex items-start">
284
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
285
+ <i class="fas fa-money-bill-wave"></i>
286
+ </div>
287
+ <div class="ml-3">
288
+ <p class="text-sm font-medium">Paiement reçu</p>
289
+ <p class="text-xs text-gray-500">Marie Lou - $50 - 5 heures ago</p>
290
+ </div>
291
+ </div>
292
+ <div class="flex items-start">
293
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
294
+ <i class="fas fa-calendar-alt"></i>
295
+ </div>
296
+ <div class="ml-3">
297
+ <p class="text-sm font-medium">Nouvelle activité programmée</p>
298
+ <p class="text-xs text-gray-500">Réunion du conseil - 1 jour ago</p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="card bg-white p-6 rounded-lg shadow">
305
+ <h3 class="text-lg font-semibold mb-4">Statistiques des départements</h3>
306
+ <div class="h-64">
307
+ <canvas id="departmentChart"></canvas>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Programme Hebdomadaire -->
314
+ <div id="programme-page" class="page-content hidden">
315
+ <div class="flex justify-between items-center mb-6">
316
+ <h2 class="text-2xl font-bold text-gray-800">Programme Hebdomadaire</h2>
317
+ <div class="flex space-x-2">
318
+ <button class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
319
+ <i class="fas fa-print"></i>
320
+ </button>
321
+ <button class="p-2 rounded-full bg-gray-200 hover:bg-gray-300">
322
+ <i class="fas fa-download"></i>
323
+ </button>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="card bg-white p-6 rounded-lg shadow mb-6">
328
+ <div class="flex justify-between items-center mb-4">
329
+ <h3 class="text-lg font-semibold">Semaine du 15 au 21 Mai 2023</h3>
330
+ <div class="flex space-x-2">
331
+ <button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">
332
+ <i class="fas fa-arrow-left mr-1"></i> Semaine précédente
333
+ </button>
334
+ <button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">
335
+ Semaine suivante <i class="fas fa-arrow-right ml-1"></i>
336
+ </button>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="overflow-x-auto">
341
+ <table class="min-w-full divide-y divide-gray-200">
342
+ <thead class="bg-gray-50">
343
+ <tr>
344
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jour</th>
345
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Secrétariat</th>
346
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Conseil</th>
347
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trésorerie</th>
348
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Discipline</th>
349
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Social</th>
350
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Conduction</th>
351
+ </tr>
352
+ </thead>
353
+ <tbody class="bg-white divide-y divide-gray-200">
354
+ <tr>
355
+ <td class="px-6 py-4 whitespace-nowrap font-medium">Lundi</td>
356
+ <td class="px-6 py-4 whitespace-normal">Réunion de préparation</td>
357
+ <td class="px-6 py-4 whitespace-normal">Planification stratégique</td>
358
+ <td class="px-6 py-4 whitespace-normal">Collecte des cotisations</td>
359
+ <td class="px-6 py-4 whitespace-normal">Évaluation du comportement</td>
360
+ <td class="px-6 py-4 whitespace-normal">Visite aux malades</td>
361
+ <td class="px-6 py-4 whitespace-normal">Répétition des cantiques</td>
362
+ </tr>
363
+ <tr>
364
+ <td class="px-6 py-4 whitespace-nowrap font-medium">Mardi</td>
365
+ <td class="px-6 py-4 whitespace-normal">Rédaction du PV</td>
366
+ <td class="px-6 py-4 whitespace-normal">-</td>
367
+ <td class="px-6 py-4 whitespace-normal">Comptabilité</td>
368
+ <td class="px-6 py-4 whitespace-normal">Rappel des règles</td>
369
+ <td class="px-6 py-4 whitespace-normal">-</td>
370
+ <td class="px-6 py-4 whitespace-normal">Apprentissage nouveau cantique</td>
371
+ </tr>
372
+ <tr>
373
+ <td class="px-6 py-4 whitespace-nowrap font-medium">Mercredi</td>
374
+ <td class="px-6 py-4 whitespace-normal">-</td>
375
+ <td class="px-6 py-4 whitespace-normal">Réunion du conseil</td>
376
+ <td class="px-6 py-4 whitespace-normal">-</td>
377
+ <td class="px-6 py-4 whitespace-normal">-</td>
378
+ <td class="px-6 py-4 whitespace-normal">Réunion sociale</td>
379
+ <td class="px-6 py-4 whitespace-normal">Répétition générale</td>
380
+ </tr>
381
+ <tr>
382
+ <td class="px-6 py-4 whitespace-nowrap font-medium">Jeudi</td>
383
+ <td class="px-6 py-4 whitespace-normal">Archivage des documents</td>
384
+ <td class="px-6 py-4 whitespace-normal">-</td>
385
+ <td class="px-6 py-4 whitespace-normal">Préparation budget</td>
386
+ <td class="px-6 py-4 whitespace-normal">Suivi des membres</td>
387
+ <td class="px-6 py-4 whitespace-normal">-</td>
388
+ <td class="px-6 py-4 whitespace-normal">-</td>
389
+ </tr>
390
+ <tr>
391
+ <td class="px-6 py-4 whitespace-nowrap font-medium">Vendredi</td>
392
+ <td class="px-6 py-4 whitespace-normal">Préparation réunion</td>
393
+ <td class="px-6 py-4 whitespace-normal">Évaluation</td>
394
+ <td class="px-6 py-4 whitespace-normal">Rapport financier</td>
395
+ <td class="px-6 py-4 whitespace-normal">Sanctions si nécessaire</td>
396
+ <td class="px-6 py-4 whitespace-normal">Préparation activité</td>
397
+ <td class="px-6 py-4 whitespace-normal">Finalisation programme</td>
398
+ </tr>
399
+ </tbody>
400
+ </table>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Secrétariat -->
406
+ <div id="secretariat-page" class="page-content hidden">
407
+ <div class="flex justify-between items-center mb-6">
408
+ <h2 class="text-2xl font-bold text-gray-800">Département du Secrétariat</h2>
409
+ <div class="flex space-x-2">
410
+ <button id="secretariat-add-btn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
411
+ <i class="fas fa-plus mr-2"></i> Ajouter
412
+ </button>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="card bg-white p-6 rounded-lg shadow mb-6">
417
+ <div class="flex justify-between items-center mb-4">
418
+ <h3 class="text-lg font-semibold">Liste des documents</h3>
419
+ <div class="relative w-64">
420
+ <input type="text" placeholder="Rechercher..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
421
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="overflow-x-auto">
426
+ <table class="min-w-full divide-y divide-gray-200">
427
+ <thead class="bg-gray-50">
428
+ <tr>
429
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
430
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Titre</th>
431
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
432
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Auteur</th>
433
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
434
+ </tr>
435
+ </thead>
436
+ <tbody class="bg-white divide-y divide-gray-200">
437
+ <tr>
438
+ <td class="px-6 py-4 whitespace-nowrap">15/05/2023</td>
439
+ <td class="px-6 py-4 whitespace-nowrap">PV Réunion Conseil</td>
440
+ <td class="px-6 py-4 whitespace-nowrap">Procès-verbal</td>
441
+ <td class="px-6 py-4 whitespace-nowrap">Jean Dupont</td>
442
+ <td class="px-6 py-4 whitespace-nowrap">
443
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
444
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
445
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
446
+ </td>
447
+ </tr>
448
+ <tr>
449
+ <td class="px-6 py-4 whitespace-nowrap">10/05/2023</td>
450
+ <td class="px-6 py-4 whitespace-nowrap">Liste Membres Actifs</td>
451
+ <td class="px-6 py-4 whitespace-nowrap">Liste</td>
452
+ <td class="px-6 py-4 whitespace-nowrap">Marie Lou</td>
453
+ <td class="px-6 py-4 whitespace-nowrap">
454
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
455
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
456
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
457
+ </td>
458
+ </tr>
459
+ <tr>
460
+ <td class="px-6 py-4 whitespace-nowrap">05/05/2023</td>
461
+ <td class="px-6 py-4 whitespace-nowrap">Convocation Assemblée</td>
462
+ <td class="px-6 py-4 whitespace-nowrap">Lettre</td>
463
+ <td class="px-6 py-4 whitespace-nowrap">Paul Martin</td>
464
+ <td class="px-6 py-4 whitespace-nowrap">
465
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
466
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
467
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
468
+ </td>
469
+ </tr>
470
+ </tbody>
471
+ </table>
472
+ </div>
473
+
474
+ <div class="mt-4 flex justify-between items-center">
475
+ <div class="text-sm text-gray-500">
476
+ Affichage de 1 à 3 sur 12 entrées
477
+ </div>
478
+ <div class="flex space-x-1">
479
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">Précédent</button>
480
+ <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button>
481
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">2</button>
482
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">3</button>
483
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">4</button>
484
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">Suivant</button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Formulaire d'ajout/modification (caché par défaut) -->
490
+ <div id="secretariat-form" class="card bg-white p-6 rounded-lg shadow hidden">
491
+ <h3 class="text-lg font-semibold mb-4">Ajouter/Modifier un document</h3>
492
+ <form class="space-y-4">
493
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
494
+ <div>
495
+ <label class="block text-sm font-medium text-gray-700">Date du document</label>
496
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
497
+ </div>
498
+ <div>
499
+ <label class="block text-sm font-medium text-gray-700">Type de document</label>
500
+ <select class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
501
+ <option>Procès-verbal</option>
502
+ <option>Lettre</option>
503
+ <option>Liste</option>
504
+ <option>Rapport</option>
505
+ <option>Autre</option>
506
+ </select>
507
+ </div>
508
+ </div>
509
+ <div>
510
+ <label class="block text-sm font-medium text-gray-700">Titre du document</label>
511
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
512
+ </div>
513
+ <div>
514
+ <label class="block text-sm font-medium text-gray-700">Contenu</label>
515
+ <textarea rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
516
+ </div>
517
+ <div class="flex justify-end space-x-3">
518
+ <button type="button" id="secretariat-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">
519
+ Annuler
520
+ </button>
521
+ <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">
522
+ Enregistrer
523
+ </button>
524
+ </div>
525
+ </form>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Conseil -->
530
+ <div id="conseil-page" class="page-content hidden">
531
+ <div class="flex justify-between items-center mb-6">
532
+ <h2 class="text-2xl font-bold text-gray-800">Département du Conseil</h2>
533
+ <div class="flex space-x-2">
534
+ <button id="conseil-add-btn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
535
+ <i class="fas fa-plus mr-2"></i> Ajouter
536
+ </button>
537
+ </div>
538
+ </div>
539
+
540
+ <div class="card bg-white p-6 rounded-lg shadow mb-6">
541
+ <div class="flex justify-between items-center mb-4">
542
+ <h3 class="text-lg font-semibold">Liste des réunions</h3>
543
+ <div class="relative w-64">
544
+ <input type="text" placeholder="Rechercher..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
545
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="overflow-x-auto">
550
+ <table class="min-w-full divide-y divide-gray-200">
551
+ <thead class="bg-gray-50">
552
+ <tr>
553
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
554
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thème</th>
555
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Objectif</th>
556
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
557
+ </tr>
558
+ </thead>
559
+ <tbody class="bg-white divide-y divide-gray-200">
560
+ <tr>
561
+ <td class="px-6 py-4 whitespace-nowrap">15/05/2023 - 21/05/2023</td>
562
+ <td class="px-6 py-4 whitespace-normal">Planification stratégique</td>
563
+ <td class="px-6 py-4 whitespace-normal">Définir les objectifs pour le trimestre</td>
564
+ <td class="px-6 py-4 whitespace-nowrap">
565
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
566
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
567
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
568
+ </td>
569
+ </tr>
570
+ <tr>
571
+ <td class="px-6 py-4 whitespace-nowrap">08/05/2023 - 14/05/2023</td>
572
+ <td class="px-6 py-4 whitespace-normal">Évaluation des activités</td>
573
+ <td class="px-6 py-4 whitespace-normal">Analyser les résultats du mois</td>
574
+ <td class="px-6 py-4 whitespace-nowrap">
575
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
576
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
577
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
578
+ </td>
579
+ </tr>
580
+ <tr>
581
+ <td class="px-6 py-4 whitespace-nowrap">01/05/2023 - 07/05/2023</td>
582
+ <td class="px-6 py-4 whitespace-normal">Résolution des problèmes</td>
583
+ <td class="px-6 py-4 whitespace-normal">Trouver des solutions aux défis</td>
584
+ <td class="px-6 py-4 whitespace-nowrap">
585
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
586
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
587
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
588
+ </td>
589
+ </tr>
590
+ </tbody>
591
+ </table>
592
+ </div>
593
+ </div>
594
+
595
+ <!-- Formulaire d'ajout/modification (caché par défaut) -->
596
+ <div id="conseil-form" class="card bg-white p-6 rounded-lg shadow hidden">
597
+ <h3 class="text-lg font-semibold mb-4">Ajouter/Modifier une réunion</h3>
598
+ <form class="space-y-4">
599
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
600
+ <div>
601
+ <label class="block text-sm font-medium text-gray-700">Date de début</label>
602
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
603
+ </div>
604
+ <div>
605
+ <label class="block text-sm font-medium text-gray-700">Date de fin</label>
606
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
607
+ </div>
608
+ </div>
609
+ <div>
610
+ <label class="block text-sm font-medium text-gray-700">Thème de la semaine</label>
611
+ <textarea rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
612
+ </div>
613
+ <div>
614
+ <label class="block text-sm font-medium text-gray-700">Objectif à atteindre</label>
615
+ <textarea rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
616
+ </div>
617
+ <div class="flex justify-end space-x-3">
618
+ <button type="button" id="conseil-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">
619
+ Annuler
620
+ </button>
621
+ <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">
622
+ Enregistrer
623
+ </button>
624
+ </div>
625
+ </form>
626
+ </div>
627
+ </div>
628
+
629
+ <!-- Trésorerie -->
630
+ <div id="tresorerie-page" class="page-content hidden">
631
+ <div class="flex justify-between items-center mb-6">
632
+ <h2 class="text-2xl font-bold text-gray-800">Département de la Trésorerie</h2>
633
+ <div class="flex space-x-2">
634
+ <button id="tresorerie-add-btn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
635
+ <i class="fas fa-plus mr-2"></i> Ajouter
636
+ </button>
637
+ </div>
638
+ </div>
639
+
640
+ <div class="card bg-white p-6 rounded-lg shadow mb-6">
641
+ <div class="flex justify-between items-center mb-4">
642
+ <h3 class="text-lg font-semibold">Liste des cotisations</h3>
643
+ <div class="relative w-64">
644
+ <input type="text" placeholder="Rechercher..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
645
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="overflow-x-auto">
650
+ <table class="min-w-full divide-y divide-gray-200">
651
+ <thead class="bg-gray-50">
652
+ <tr>
653
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
654
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cotisation 1</th>
655
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cotisation 2</th>
656
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Objectif</th>
657
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
658
+ </tr>
659
+ </thead>
660
+ <tbody class="bg-white divide-y divide-gray-200">
661
+ <tr>
662
+ <td class="px-6 py-4 whitespace-nowrap">15/05/2023 - 21/05/2023</td>
663
+ <td class="px-6 py-4 whitespace-normal">$500</td>
664
+ <td class="px-6 py-4 whitespace-normal">$200</td>
665
+ <td class="px-6 py-4 whitespace-normal">Atteindre $1000 pour le projet</td>
666
+ <td class="px-6 py-4 whitespace-nowrap">
667
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
668
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
669
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
670
+ </td>
671
+ </tr>
672
+ <tr>
673
+ <td class="px-6 py-4 whitespace-nowrap">08/05/2023 - 14/05/2023</td>
674
+ <td class="px-6 py-4 whitespace-normal">$450</td>
675
+ <td class="px-6 py-4 whitespace-normal">$180</td>
676
+ <td class="px-6 py-4 whitespace-normal">Financer les activités sociales</td>
677
+ <td class="px-6 py-4 whitespace-nowrap">
678
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
679
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
680
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
681
+ </td>
682
+ </tr>
683
+ <tr>
684
+ <td class="px-6 py-4 whitespace-nowrap">01/05/2023 - 07/05/2023</td>
685
+ <td class="px-6 py-4 whitespace-normal">$600</td>
686
+ <td class="px-6 py-4 whitespace-normal">$250</td>
687
+ <td class="px-6 py-4 whitespace-normal">Achat de matériel</td>
688
+ <td class="px-6 py-4 whitespace-nowrap">
689
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
690
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
691
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
692
+ </td>
693
+ </tr>
694
+ </tbody>
695
+ </table>
696
+ </div>
697
+ </div>
698
+
699
+ <!-- Formulaire d'ajout/modification (caché par défaut) -->
700
+ <div id="tresorerie-form" class="card bg-white p-6 rounded-lg shadow hidden">
701
+ <h3 class="text-lg font-semibold mb-4">Ajouter/Modifier des cotisations</h3>
702
+ <form class="space-y-4">
703
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
704
+ <div>
705
+ <label class="block text-sm font-medium text-gray-700">Date de début</label>
706
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
707
+ </div>
708
+ <div>
709
+ <label class="block text-sm font-medium text-gray-700">Date de fin</label>
710
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
711
+ </div>
712
+ </div>
713
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
714
+ <div>
715
+ <label class="block text-sm font-medium text-gray-700">Cotisation 1</label>
716
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
717
+ </div>
718
+ <div>
719
+ <label class="block text-sm font-medium text-gray-700">Cotisation 2</label>
720
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
721
+ </div>
722
+ </div>
723
+ <div>
724
+ <label class="block text-sm font-medium text-gray-700">Objectif à atteindre</label>
725
+ <textarea rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
726
+ </div>
727
+ <div class="flex justify-end space-x-3">
728
+ <button type="button" id="tresorerie-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">
729
+ Annuler
730
+ </button>
731
+ <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">
732
+ Enregistrer
733
+ </button>
734
+ </div>
735
+ </form>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- Discipline -->
740
+ <div id="discipline-page" class="page-content hidden">
741
+ <div class="flex justify-between items-center mb-6">
742
+ <h2 class="text-2xl font-bold text-gray-800">Département de la Discipline</h2>
743
+ <div class="flex space-x-2">
744
+ <button id="discipline-add-btn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
745
+ <i class="fas fa-plus mr-2"></i> Ajouter
746
+ </button>
747
+ </div>
748
+ </div>
749
+
750
+ <div class="card bg-white p-6 rounded-lg shadow mb-6">
751
+ <div class="flex justify-between items-center mb-4">
752
+ <h3 class="text-lg font-semibold">Liste des programmes</h3>
753
+ <div class="relative w-64">
754
+ <input type="text" placeholder="Rechercher..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
755
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
756
+ </div>
757
+ </div>
758
+
759
+ <div class="overflow-x-auto">
760
+ <table class="min-w-full divide-y divide-gray-200">
761
+ <thead class="bg-gray-50">
762
+ <tr>
763
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
764
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 1</th>
765
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 2</th>
766
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 3</th>
767
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Membre thème</th>
768
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
769
+ </tr>
770
+ </thead>
771
+ <tbody class="bg-white divide-y divide-gray-200">
772
+ <tr>
773
+ <td class="px-6 py-4 whitespace-nowrap">15/05/2023 - 21/05/2023</td>
774
+ <td class="px-6 py-4 whitespace-normal">Évaluation comportement</td>
775
+ <td class="px-6 py-4 whitespace-normal">Rappel des règles</td>
776
+ <td class="px-6 py-4 whitespace-normal">Suivi des absences</td>
777
+ <td class="px-6 py-4 whitespace-normal">Jean Dupont</td>
778
+ <td class="px-6 py-4 whitespace-nowrap">
779
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
780
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
781
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
782
+ </td>
783
+ </tr>
784
+ <tr>
785
+ <td class="px-6 py-4 whitespace-nowrap">08/05/2023 - 14/05/2023</td>
786
+ <td class="px-6 py-4 whitespace-normal">Analyse participation</td>
787
+ <td class="px-6 py-4 whitespace-normal">Évaluation ponctualité</td>
788
+ <td class="px-6 py-4 whitespace-normal">-</td>
789
+ <td class="px-6 py-4 whitespace-normal">Marie Lou</td>
790
+ <td class="px-6 py-4 whitespace-nowrap">
791
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
792
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
793
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
794
+ </td>
795
+ </tr>
796
+ <tr>
797
+ <td class="px-6 py-4 whitespace-nowrap">01/05/2023 - 07/05/2023</td>
798
+ <td class="px-6 py-4 whitespace-normal">Réunion d'information</td>
799
+ <td class="px-6 py-4 whitespace-normal">Prévention conflits</td>
800
+ <td class="px-6 py-4 whitespace-normal">-</td>
801
+ <td class="px-6 py-4 whitespace-normal">Paul Martin</td>
802
+ <td class="px-6 py-4 whitespace-nowrap">
803
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
804
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
805
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
806
+ </td>
807
+ </tr>
808
+ </tbody>
809
+ </table>
810
+ </div>
811
+ </div>
812
+
813
+ <!-- Formulaire d'ajout/modification (caché par défaut) -->
814
+ <div id="discipline-form" class="card bg-white p-6 rounded-lg shadow hidden">
815
+ <h3 class="text-lg font-semibold mb-4">Ajouter/Modifier un programme</h3>
816
+ <form class="space-y-4">
817
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
818
+ <div>
819
+ <label class="block text-sm font-medium text-gray-700">Date de début</label>
820
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
821
+ </div>
822
+ <div>
823
+ <label class="block text-sm font-medium text-gray-700">Date de fin</label>
824
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
825
+ </div>
826
+ </div>
827
+ <div>
828
+ <label class="block text-sm font-medium text-gray-700">Programme 1</label>
829
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
830
+ </div>
831
+ <div>
832
+ <label class="block text-sm font-medium text-gray-700">Programme 2</label>
833
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
834
+ </div>
835
+ <div>
836
+ <label class="block text-sm font-medium text-gray-700">Programme 3</label>
837
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
838
+ </div>
839
+ <div>
840
+ <label class="block text-sm font-medium text-gray-700">Membre pour le thème</label>
841
+ <select class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
842
+ <option>Jean Dupont</option>
843
+ <option>Marie Lou</option>
844
+ <option>Paul Martin</option>
845
+ <option>Sophie Bernard</option>
846
+ </select>
847
+ </div>
848
+ <div class="flex justify-end space-x-3">
849
+ <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">
850
+ Annuler
851
+ </button>
852
+ <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">
853
+ Enregistrer
854
+ </button>
855
+ </div>
856
+ </form>
857
+ </div>
858
+ </div>
859
+
860
+ <!-- Social -->
861
+ <div id="social-page" class="page-content hidden">
862
+ <div class="flex justify-between items-center mb-6">
863
+ <h2 class="text-2xl font-bold text-gray-800">Département du Social</h2>
864
+ <div class="flex space-x-2">
865
+ <button id="social-add-btn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
866
+ <i class="fas fa-plus mr-2"></i> Ajouter
867
+ </button>
868
+ </div>
869
+ </div>
870
+
871
+ <div class="card bg-white p-6 rounded-lg shadow mb-6">
872
+ <div class="flex justify-between items-center mb-4">
873
+ <h3 class="text-lg font-semibold">Liste des activités sociales</h3>
874
+ <div class="relative w-64">
875
+ <input type="text" placeholder="Rechercher..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
876
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
877
+ </div>
878
+ </div>
879
+
880
+ <div class="overflow-x-auto">
881
+ <table class="min-w-full divide-y divide-gray-200">
882
+ <thead class="bg-gray-50">
883
+ <tr>
884
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
885
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 1</th>
886
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 2</th>
887
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Programme 3</th>
888
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Objectif</th>
889
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
890
+ </tr>
891
+ </thead>
892
+ <tbody class="bg-white divide-y divide-gray-200">
893
+ <tr>
894
+ <td class="px-6 py-4 whitespace-nowrap">15/05/2023 - 21/05/2023</td>
895
+ <td class="px-6 py-4 whitespace-normal">Visite aux malades</td>
896
+ <td class="px-6 py-4 whitespace-normal">Collecte de dons</td>
897
+ <td class="px-6 py-4 whitespace-normal">Réunion d'information</td>
898
+ <td class="px-6 py-4 whitespace-normal">Soutenir 5 familles</td>
899
+ <td class="px-6 py-4 whitespace-nowrap">
900
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
901
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
902
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
903
+ </td>
904
+ </tr>
905
+ <tr>
906
+ <td class="px-6 py-4 whitespace-nowrap">08/05/2023 - 14/05/2023</td>
907
+ <td class="px-6 py-4 whitespace-normal">Soutien scolaire</td>
908
+ <td class="px-6 py-4 whitespace-normal">Distribution alimentaire</td>
909
+ <td class="px-6 py-4 whitespace-normal">-</td>
910
+ <td class="px-6 py-4 whitespace-normal">Aider 10 enfants</td>
911
+ <td class="px-6 py-4 whitespace-nowrap">
912
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
913
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
914
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
915
+ </td>
916
+ </tr>
917
+ <tr>
918
+ <td class="px-6 py-4 whitespace-nowrap">01/05/2023 - 07/05/2023</td>
919
+ <td class="px-6 py-4 whitespace-normal">Sensibilisation</td>
920
+ <td class="px-6 py-4 whitespace-normal">-</td>
921
+ <td class="px-6 py-4 whitespace-normal">-</td>
922
+ <td class="px-6 py-4 whitespace-normal">Toucher 20 personnes</td>
923
+ <td class="px-6 py-4 whitespace-nowrap">
924
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
925
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
926
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
927
+ </td>
928
+ </tr>
929
+ </tbody>
930
+ </table>
931
+ </div>
932
+ </div>
933
+
934
+ <!-- Formulaire d'ajout/modification (caché par défaut) -->
935
+ <div id="social-form" class="card bg-white p-6 rounded-lg shadow hidden">
936
+ <h3 class="text-lg font-semibold mb-4">Ajouter/Modifier une activité sociale</h3>
937
+ <form class="space-y-4">
938
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
939
+ <div>
940
+ <label class="block text-sm font-medium text-gray-700">Date de début</label>
941
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
942
+ </div>
943
+ <div>
944
+ <label class="block text-sm font-medium text-gray-700">Date de fin</label>
945
+ <input type="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
946
+ </div>
947
+ </div>
948
+ <div>
949
+ <label class="block text-sm font-medium text-gray-700">Programme 1</label>
950
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
951
+ </div>
952
+ <div>
953
+ <label class="block text-sm font-medium text-gray-700">Programme 2</label>
954
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
955
+ </div>
956
+ <div>
957
+ <label class="block text-sm font-medium text-gray-700">Programme 3</label>
958
+ <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
959
+ </div>
960
+ <div>
961
+ <label class="block text-sm font-medium text-gray-700">Objectif à atteindre</label>
962
+ <textarea rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
963
+ </div>
964
+ <div class="flex justify-end space-x-3">
965
+ <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">
966
+ Annuler
967
+ </button>
968
+ <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">
969
+ Enregistrer
970
+ </button>
971
+ </div>
972
+ </form>
973
+ </div>
974
+ </div>
975
+
976
+ <!-- Conduction -->
977
+ <div id="conduction-page" class="page-content hidden">
978
+ <div class="flex justify-between items-center mb-6">
979
+ <h2 class="text-2xl font-bold text-gray-800">Département de la Conduction</h2>
980
+ <div class="flex space-x-2">
981
+ <button id="conduction-add-btn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
982
+ <i class="fas fa-plus mr-2"></i> Ajouter
983
+ </button>
984
+ </div>
985
+ </div>
986
+
987
+ <div class="card bg-white p-6 rounded-lg shadow mb-6">
988
+ <div class="flex justify-between items-center mb-4">
989
+ <h3 class="text-lg font-semibold">Liste des programmes musicaux</h3>
990
+ <div class="relative w-64">
991
+ <input type="text" placeholder="Rechercher..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
992
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
993
+ </div>
994
+ </div>
995
+
996
+ <div class="overflow-x-auto">
997
+ <table class="min-w-full divide-y divide-gray-200">
998
+ <thead class="bg-gray-50">
999
+ <tr>
1000
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
1001
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cantique 1</th>
1002
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Membre</th>
1003
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cantique 2</th>
1004
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Membre</th>
1005
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cantique 3</th>
1006
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Membre</th>
1007
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
1008
+ </tr>
1009
+ </thead>
1010
+ <tbody class="bg-white divide-y divide-gray-200">
1011
+ <tr>
1012
+ <td class="px-6 py-4 whitespace-nowrap">15/05/2023 - 21/05/2023</td>
1013
+ <td class="px-6 py-4 whitespace-normal">Cantique #45</td>
1014
+ <td class="px-6 py-4 whitespace-normal">Jean Dupont</td>
1015
+ <td class="px-6 py-4 whitespace-normal">Cantique #78</td>
1016
+ <td class="px-6 py-4 whitespace-normal">Marie Lou</td>
1017
+ <td class="px-6 py-4 whitespace-normal">Cantique #102</td>
1018
+ <td class="px-6 py-4 whitespace-normal">Paul Martin</td>
1019
+ <td class="px-6 py-4 whitespace-nowrap">
1020
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
1021
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
1022
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
1023
+ </td>
1024
+ </tr>
1025
+ <tr>
1026
+ <td class="px-6 py-4 whitespace-nowrap">08/05/2023 - 14/05/2023</td>
1027
+ <td class="px-6 py-4 whitespace-normal">Cantique #32</td>
1028
+ <td class="px-6 py-4 whitespace-normal">Sophie Bernard</td>
1029
+ <td class="px-6 py-4 whitespace-normal">Cantique #56</td>
1030
+ <td class="px-6 py-4 whitespace-normal">Luc Petit</td>
1031
+ <td class="px-6 py-4 whitespace-normal">-</td>
1032
+ <td class="px-6 py-4 whitespace-normal">-</td>
1033
+ <td class="px-6 py-4 whitespace-nowrap">
1034
+ <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-eye"></i></button>
1035
+ <button class="text-green-600 hover:text-green-900 mr-2"><i class="fas fa-edit"></i></button>
1036
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
1037
+ </td>
1038
+ </tr>
1039
+ <tr>
1040
+ <td class="px-6 py-4 whitespace-nowrap">01/
1041
+ </html>