first commit

src/app/dashboard/pages/reunion/reunion.html

@@ -0,0 +1,87 @@
+<div class="min-h-screen flex flex-col gap-2">
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Réunions</h1>
+    <button z-button (click)="openCreate()">Nouvelle réunion</button>
+  </div>
+
+  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <z-card class="text-center py-4">
+      <div class="text-sm text-gray-500 dark:text-gray-400">Total des réunions</div>
+      <div class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">
+        {{ total() }}
+      </div>
+    </z-card>
+
+    <z-card class="text-center py-4">
+      <div class="text-sm text-gray-500 dark:text-gray-400">Réunions à venir</div>
+      <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-1">
+        {{ upcomingReunions() }}
+      </div>
+    </z-card>
+
+    <z-card class="text-center py-4">
+      <div class="text-sm text-gray-500 dark:text-gray-400">Réunions passées</div>
+      <div class="text-3xl font-bold text-amber-600 dark:text-amber-400 mt-1">
+        {{ pastReunions() }}
+      </div>
+    </z-card>
+
+    <z-card class="text-center py-4">
+      <div class="text-sm text-gray-500 dark:text-gray-400">Hippodromes concernés</div>
+      <div class="text-3xl font-bold text-green-600 dark:text-green-400 mt-1">
+        {{ uniqueHippodromes() }}
+      </div>
+    </z-card>
+  </div>
+
+  <app-search-bar placeholder="Rechercher (nom, date, hippodrome…)" (search)="onSearch($event)" />
+
+  <div class="rounded-2xl overflow-hidden">
+    <app-data-table
+      [columns]="cols"
+      [data]="rows()"
+      [loading]="loading()"
+      [sort]="sort()"
+      (sortChange)="sort.set($event)"
+    >
+      <ng-template #rowActions let-row>
+        <div class="flex flex-row gap-2">
+          <button
+            class="p-1 rounded text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-gray-800 cursor-pointer"
+            (click)="openEdit(row)"
+          >
+            <lucide-angular name="folder-pen" class="size-5"></lucide-angular>
+          </button>
+          <button
+            class="p-1 rounded text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-gray-800 cursor-pointer"
+            (click)="remove(row)"
+          >
+            <lucide-angular name="trash-2" class="size-5"></lucide-angular>
+          </button>
+        </div>
+      </ng-template>
+    </app-data-table>
+
+    <app-paginator
+      [page]="page()"
+      [perPage]="perPage()"
+      [total]="total()"
+      (pageChange)="page.set($event)"
+      (perPageChange)="perPage.set($event)"
+      [pageSizes]="pageSize"
+    />
+  </div>
+
+  <app-modal [open]="modalOpen()" [title]="modalTitle()" size="md" (close)="closeModal()">
+    <app-reunion-form
+      [value]="editingItem()"
+      (save)="onFormSave($event)"
+      (cancel)="closeModal()"
+    ></app-reunion-form>
+
+    <div modal-actions class="flex gap-2 justify-end">
+      <z-button zType="destructive" (click)="closeModal()">Annuler</z-button>
+      <z-button zType="default" (click)="submitChildForm()">Enregistrer</z-button>
+    </div>
+  </app-modal>
+</div>