Admin mode. Data driven content sections. Bugfixes.

src/app/admin/admin.component.html

@@ -0,0 +1,160 @@
+<section class="admin-page">
+  <div class="container">
+    <div class="admin-header">
+      <h1>Admin Dashboard</h1>
+      <p>Manage programs, events, and donation tiers</p>
+    </div>
+
+    <!-- Tabs -->
+    <div class="admin-tabs">
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'programs'"
+        (click)="activeTab.set('programs')"
+      >Programs</button>
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'events'"
+        (click)="activeTab.set('events')"
+      >Events</button>
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'tiers'"
+        (click)="activeTab.set('tiers')"
+      >Tiers</button>
+    </div>
+
+    <!-- Programs Tab -->
+    @if (activeTab() === 'programs') {
+      @if (programs$ | async; as programs) {
+        <div class="tab-content">
+          <div class="tab-toolbar">
+            <h2>Programs ({{ programs.length }})</h2>
+            <button class="btn btn-add" (click)="openProgramForm()">+ Add Program</button>
+          </div>
+
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>Day</th>
+                <th>Time</th>
+                <th>Title</th>
+                <th>Host</th>
+                <th>Genre</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (program of programs; track program.id) {
+                <tr>
+                  <td>{{ program.day_label }}</td>
+                  <td>{{ program.time }}</td>
+                  <td>{{ program.title }}</td>
+                  <td>{{ program.host }}</td>
+                  <td>{{ program.genre }}</td>
+                  <td class="actions">
+                    <button class="btn-icon btn-edit" (click)="editProgram(program)">Edit</button>
+                    <button class="btn-icon btn-delete" (click)="deleteProgram(program.id)">Delete</button>
+                  </td>
+                </tr>
+              } @empty {
+                <tr><td colspan="6" class="empty-row">No programs yet. Click "Add Program" to create one.</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    }
+
+    <!-- Events Tab -->
+    @if (activeTab() === 'events') {
+      @if (events$ | async; as events) {
+        <div class="tab-content">
+          <div class="tab-toolbar">
+            <h2>Events ({{ events.length }})</h2>
+            <button class="btn btn-add" (click)="openEventForm()">+ Add Event</button>
+          </div>
+
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Title</th>
+                <th>Location</th>
+                <th>Active</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (event of events; track event.id) {
+                <tr>
+                  <td>{{ event.date }}</td>
+                  <td>{{ event.title }}</td>
+                  <td>{{ event.location }}</td>
+                  <td>{{ event.active ? 'Yes' : 'No' }}</td>
+                  <td class="actions">
+                    <button class="btn-icon btn-edit" (click)="editEvent(event)">Edit</button>
+                    <button class="btn-icon btn-delete" (click)="deleteEvent(event.id)">Delete</button>
+                  </td>
+                </tr>
+              } @empty {
+                <tr><td colspan="5" class="empty-row">No events yet. Click "Add Event" to create one.</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    }
+
+    <!-- Tiers Tab -->
+    @if (activeTab() === 'tiers') {
+      @if (tiers$ | async; as tiers) {
+        <div class="tab-content">
+          <div class="tab-toolbar">
+            <h2>Donation Tiers ({{ tiers.length }})</h2>
+            <button class="btn btn-add" (click)="openTierForm()">+ Add Tier</button>
+          </div>
+
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>Order</th>
+                <th>Name</th>
+                <th>Amount</th>
+                <th>Benefits</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (tier of tiers; track tier.id) {
+                <tr>
+                  <td>{{ tier.display_order }}</td>
+                  <td>{{ tier.icon }} {{ tier.name }}</td>
+                  <td>${{ tier.amount.toFixed(2) }}</td>
+                  <td class="benefits-cell">{{ tier.benefits.join(', ') }}</td>
+                  <td class="actions">
+                    <button class="btn-icon btn-edit" (click)="editTier(tier)">Edit</button>
+                    <button class="btn-icon btn-delete" (click)="deleteTier(tier.id)">Delete</button>
+                  </td>
+                </tr>
+              } @empty {
+                <tr><td colspan="5" class="empty-row">No tiers yet. Click "Add Tier" to create one.</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    }
+  </div>
+
+  <!-- Form modals -->
+  @if (showProgramForm) {
+    <app-admin-program-form [editItem]="editingProgram" (saved)="onProgramSaved()" (closed)="onProgramClosed()" />
+  }
+  @if (showEventForm) {
+    <app-admin-event-form [editItem]="editingEvent" (saved)="onEventSaved()" (closed)="onEventClosed()" />
+  }
+  @if (showTierForm) {
+    <app-admin-tier-form [editItem]="editingTier" (saved)="onTierSaved()" (closed)="onTierClosed()" />
+  }
+</section>