data driven about us screen

src/app/admin/admin.component.html

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="admin-header">
       <h1>Admin Dashboard</h1>
-      <p>Manage programs, events, and donation tiers</p>
+      <p>Manage programs, events, tiers, history, team, and community content</p>
     </div>
 
     <!-- Tabs -->
@@ -22,6 +22,21 @@
         [class.active]="activeTab() === 'tiers'"
         (click)="activeTab.set('tiers')"
       >Tiers</button>
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'history'"
+        (click)="activeTab.set('history')"
+      >History</button>
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'team'"
+        (click)="activeTab.set('team')"
+      >Team</button>
+      <button
+        class="tab-btn"
+        [class.active]="activeTab() === 'community'"
+        (click)="activeTab.set('community')"
+      >Community</button>
       <button
         class="tab-btn"
         [class.active]="activeTab() === 'station'"
@@ -150,6 +165,127 @@
         </div>
       }
     }
+
+    <!-- History Tab -->
+    @if (activeTab() === 'history') {
+      @if (historyEntries$ | async; as entries) {
+        <div class="tab-content">
+          <div class="tab-toolbar">
+            <h2>History Timeline ({{ entries.length }})</h2>
+            <button class="btn btn-add" (click)="openHistoryForm()">+ Add Entry</button>
+          </div>
+
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>Year</th>
+                <th>Title</th>
+                <th>Order</th>
+                <th>Active</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (entry of entries; track entry.id) {
+                <tr>
+                  <td>{{ entry.year }}</td>
+                  <td>{{ entry.title }}</td>
+                  <td>{{ entry.display_order }}</td>
+                  <td>{{ entry.active ? 'Yes' : 'No' }}</td>
+                  <td class="actions">
+                    <button class="btn-icon btn-edit" (click)="editHistory(entry)">Edit</button>
+                    <button class="btn-icon btn-delete" (click)="deleteHistory(entry.id)">Delete</button>
+                  </td>
+                </tr>
+              } @empty {
+                <tr><td colspan="5" class="empty-row">No history entries yet. Click "Add Entry" to create one.</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    }
+
+    <!-- Team Tab -->
+    @if (activeTab() === 'team') {
+      @if (teamMembers$ | async; as members) {
+        <div class="tab-content">
+          <div class="tab-toolbar">
+            <h2>Team Members ({{ members.length }})</h2>
+            <button class="btn btn-add" (click)="openTeamForm()">+ Add Member</button>
+          </div>
+
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Title</th>
+                <th>Order</th>
+                <th>Active</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (member of members; track member.id) {
+                <tr>
+                  <td>{{ member.name }}</td>
+                  <td>{{ member.title }}</td>
+                  <td>{{ member.display_order }}</td>
+                  <td>{{ member.active ? 'Yes' : 'No' }}</td>
+                  <td class="actions">
+                    <button class="btn-icon btn-edit" (click)="editTeam(member)">Edit</button>
+                    <button class="btn-icon btn-delete" (click)="deleteTeam(member.id)">Delete</button>
+                  </td>
+                </tr>
+              } @empty {
+                <tr><td colspan="5" class="empty-row">No team members yet. Click "Add Member" to create one.</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    }
+
+    <!-- Community Tab -->
+    @if (activeTab() === 'community') {
+      @if (communityHighlights$ | async; as highlights) {
+        <div class="tab-content">
+          <div class="tab-toolbar">
+            <h2>Community Highlights ({{ highlights.length }})</h2>
+            <button class="btn btn-add" (click)="openCommunityForm()">+ Add Highlight</button>
+          </div>
+
+          <table class="admin-table">
+            <thead>
+              <tr>
+                <th>Icon</th>
+                <th>Title</th>
+                <th>Order</th>
+                <th>Active</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (highlight of highlights; track highlight.id) {
+                <tr>
+                  <td>{{ highlight.icon }}</td>
+                  <td>{{ highlight.title }}</td>
+                  <td>{{ highlight.display_order }}</td>
+                  <td>{{ highlight.active ? 'Yes' : 'No' }}</td>
+                  <td class="actions">
+                    <button class="btn-icon btn-edit" (click)="editCommunity(highlight)">Edit</button>
+                    <button class="btn-icon btn-delete" (click)="deleteCommunity(highlight.id)">Delete</button>
+                  </td>
+                </tr>
+              } @empty {
+                <tr><td colspan="5" class="empty-row">No highlights yet. Click "Add Highlight" to create one.</td></tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    }
+
     <!-- Station Tab -->
     @if (activeTab() === 'station') {
       @if (stationConfig$ | async; as config) {
@@ -215,4 +351,13 @@
   @if (showStationForm) {
     <app-admin-station-form [editItem]="stationConfig$ | async" (saved)="onStationSaved()" (closed)="onStationClosed()" />
   }
+  @if (showHistoryForm) {
+    <app-admin-history-form [editItem]="editingHistory" (saved)="onHistorySaved()" (closed)="onHistoryClosed()" />
+  }
+  @if (showTeamForm) {
+    <app-admin-team-form [editItem]="editingTeam" (saved)="onTeamSaved()" (closed)="onTeamClosed()" />
+  }
+  @if (showCommunityForm) {
+    <app-admin-community-form [editItem]="editingCommunity" (saved)="onCommunitySaved()" (closed)="onCommunityClosed()" />
+  }
 </section>