From d9c052e79cd2a9d88a4c422f7e8ea1085b40a480 Mon Sep 17 00:00:00 2001
From: JohnMwaniki <johnmwanikig2000@gmail.com>
Date: Tue, 13 Jan 2026 22:45:32 +0300
Subject: [PATCH] Add admin events table

---
 eventz-ui/src/app/app.routes.ts               |  5 +-
 .../admin-events-list.component.html          |  1 +
 .../admin-events-list.component.scss          |  0
 .../admin-events-list.component.spec.ts       | 23 +++++
 .../admin-events-list.component.ts            | 14 +++
 .../events-table/events-table.component.html  | 91 +++++++++++++++++++
 .../events-table/events-table.component.scss  |  0
 .../events-table.component.spec.ts            | 23 +++++
 .../events-table/events-table.component.ts    | 50 ++++++++++
 .../admin/pie-chart/pie-chart.component.scss  |  4 +-
 .../admin/pie-chart/pie-chart.component.ts    |  2 +-
 eventz-ui/src/interfaces/interface.ts         |  7 ++
 eventz-ui/tailwind.config.js                  |  3 +-
 13 files changed, 219 insertions(+), 4 deletions(-)
 create mode 100644 eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.html
 create mode 100644 eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.scss
 create mode 100644 eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.spec.ts
 create mode 100644 eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.ts
 create mode 100644 eventz-ui/src/components/admin/events-table/events-table.component.html
 create mode 100644 eventz-ui/src/components/admin/events-table/events-table.component.scss
 create mode 100644 eventz-ui/src/components/admin/events-table/events-table.component.spec.ts
 create mode 100644 eventz-ui/src/components/admin/events-table/events-table.component.ts

diff --git a/eventz-ui/src/app/app.routes.ts b/eventz-ui/src/app/app.routes.ts
index bb4689f..8e0f1c8 100644
--- a/eventz-ui/src/app/app.routes.ts
+++ b/eventz-ui/src/app/app.routes.ts
@@ -7,6 +7,8 @@ import { CheckoutComponent } from '../pages/checkout/checkout.component';
 import { CartComponent } from '../pages/cart/cart.component';
 import { AdminLayoutComponent } from '../layouts/admin-layout/admin-layout.component';
 import { DashboardComponent } from '../pages/admin/dashboard/dashboard.component';
+import { EventsTableComponent } from '../components/admin/events-table/events-table.component';
+import { AdminEventsListComponent } from '../components/admin/admin-events-list/admin-events-list.component';
 export const routes: Routes = [
    {path:'',component: LandingComponent},
    {path:'login', component: LoginComponent},
@@ -17,7 +19,8 @@ export const routes: Routes = [
    {
       path:'admin',component: AdminLayoutComponent, 
       children: [
-         {path: '', component: DashboardComponent}
+         {path: '', component: DashboardComponent},
+         {path: 'events', component: AdminEventsListComponent}
       ]
    }
 ];
diff --git a/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.html b/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.html
new file mode 100644
index 0000000..31a6013
--- /dev/null
+++ b/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.html
@@ -0,0 +1 @@
+<app-events-table></app-events-table>
diff --git a/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.scss b/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.spec.ts b/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.spec.ts
new file mode 100644
index 0000000..b8fd6c4
--- /dev/null
+++ b/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminEventsListComponent } from './admin-events-list.component';
+
+describe('AdminEventsListComponent', () => {
+  let component: AdminEventsListComponent;
+  let fixture: ComponentFixture<AdminEventsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminEventsListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AdminEventsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.ts b/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.ts
new file mode 100644
index 0000000..5bcadcd
--- /dev/null
+++ b/eventz-ui/src/components/admin/admin-events-list/admin-events-list.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EventsTableComponent } from "../events-table/events-table.component";
+
+@Component({
+  selector: 'app-admin-events-list',
+  standalone: true,
+  imports: [CommonModule, EventsTableComponent],
+  templateUrl: './admin-events-list.component.html',
+  styleUrl: './admin-events-list.component.scss'
+})
+export class AdminEventsListComponent {
+
+}
diff --git a/eventz-ui/src/components/admin/events-table/events-table.component.html b/eventz-ui/src/components/admin/events-table/events-table.component.html
new file mode 100644
index 0000000..fb10056
--- /dev/null
+++ b/eventz-ui/src/components/admin/events-table/events-table.component.html
@@ -0,0 +1,91 @@
+<div class="flex flex-col bg-white rounded-lg p-4 mx-4 my-6">
+<div class="w-full overflow-x-auto">
+  <table class="min-w-full text-sm text-left">
+    <thead class="uppercase text-xs border-b-[1px] border-b-gray-300 text-eventTableColor">
+      <tr>
+        <th class="px-4 py-3">Name</th>
+        <th class="px-4 py-3">Location</th>
+        <th class="px-4 py-3">Organized By</th>
+        <th class="px-4 py-3">Verified</th>
+        <th class="px-4 py-3">Date</th>
+        <th class="px-4 py-3 text-right">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr
+        *ngFor="let event of paginatedEvents; let i = index"
+        class="hover:bg-gray-50 hover:cursor-pointer text-eventTableColor"
+      >
+        <td class="px-4 py-3 font-medium">{{ event.name }}</td>
+        <td class="px-4 py-3">{{ event.location }}</td>
+        <td class="px-4 py-3">{{ event.organizedBy }}</td>
+
+        <!-- Verified -->
+        <td class="px-4 py-3">
+          <div
+            class="flex items-center justify-center w-6 h-6 rounded-full"
+            [ngClass]="event.verified ? 'bg-green-600' : 'bg-red-600'"
+          >
+            <fa-icon *ngIf="event.verified" [icon]="faCheck" class="text-md cursor-pointer text-white"></fa-icon>
+            <fa-icon *ngIf="!event.verified" [icon]="faTimes" class="text-md cursor-pointer text-white"></fa-icon>
+          </div>
+        </td>
+
+        <td class="px-4 py-3">{{ event.date }}</td>
+
+        <!-- Actions -->
+        <td class="px-4 py-3 text-right relative">
+          <button
+            class="p-2 rounded hover:bg-gray-200"
+            (click)="toggleMenu(i)"
+          >
+         <fa-icon [icon]="faElipsis" class="text-lg cursor-pointer"></fa-icon>
+
+          </button>
+
+          <div
+            *ngIf="openMenuIndex === i"
+            class="absolute right-4 mt-2 w-32 bg-white border rounded shadow z-10"
+          >
+            <button class="block w-full text-left px-4 py-2 hover:bg-gray-100">
+              View
+            </button>
+            <button class="block w-full text-left px-4 py-2 hover:bg-gray-100">
+              Edit
+            </button>
+            <button class="block w-full text-left px-4 py-2 text-red-600 hover:bg-gray-100">
+              Delete
+            </button>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- Pagination -->
+  <div class="flex items-center justify-between px-4 py-3 border-t">
+    <span class="text-sm text-eventTableColor">
+      Page {{ currentPage }} of {{ totalPages }}
+    </span>
+
+    <div class="flex gap-2">
+      <button
+        class="px-3 py-1 border rounded disabled:opacity-50"
+        (click)="changePage(currentPage - 1)"
+        [disabled]="currentPage === 1"
+      >
+        Prev
+      </button>
+
+      <button
+        class="px-3 py-1 border rounded disabled:opacity-50"
+        (click)="changePage(currentPage + 1)"
+        [disabled]="currentPage === totalPages"
+      >
+        Next
+      </button>
+    </div>
+  </div>
+</div>
+</div>
diff --git a/eventz-ui/src/components/admin/events-table/events-table.component.scss b/eventz-ui/src/components/admin/events-table/events-table.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/components/admin/events-table/events-table.component.spec.ts b/eventz-ui/src/components/admin/events-table/events-table.component.spec.ts
new file mode 100644
index 0000000..9a68a6d
--- /dev/null
+++ b/eventz-ui/src/components/admin/events-table/events-table.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventsTableComponent } from './events-table.component';
+
+describe('EventsTableComponent', () => {
+  let component: EventsTableComponent;
+  let fixture: ComponentFixture<EventsTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EventsTableComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EventsTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/components/admin/events-table/events-table.component.ts b/eventz-ui/src/components/admin/events-table/events-table.component.ts
new file mode 100644
index 0000000..e164855
--- /dev/null
+++ b/eventz-ui/src/components/admin/events-table/events-table.component.ts
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { EventItem } from '../../../interfaces/interface';
+import  { CommonModule } from '@angular/common'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faEllipsisV, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
+
+
+@Component({
+  selector: 'app-events-table',
+  standalone: true,
+  imports: [CommonModule, FontAwesomeModule],
+  templateUrl: './events-table.component.html',
+  styleUrl: './events-table.component.scss'
+})
+export class EventsTableComponent {
+  pageSize = 10;
+  currentPage = 1;
+  openMenuIndex: number | null = null;
+  faElipsis = faEllipsisV;
+  faCheck = faCheck;
+  faTimes = faTimes;
+
+  events: EventItem[] = Array.from({ length: 37 }).map((_, i) => ({
+    name: `Event ${i + 1}`,
+    location: ['Nairobi', 'Mombasa', 'Kisumu'][i % 3],
+    organizedBy: ['Google', 'Microsoft', 'Local Org'][i % 3],
+    verified: i % 2 === 0,
+    date: new Date(2025, 0, i + 1).toDateString()
+  }));
+
+  get totalPages(): number {
+    return Math.ceil(this.events.length / this.pageSize);
+  }
+
+  get paginatedEvents(): EventItem[] {
+    const start = (this.currentPage - 1) * this.pageSize;
+    return this.events.slice(start, start + this.pageSize);
+  }
+
+  changePage(page: number) {
+    if (page >= 1 && page <= this.totalPages) {
+      this.currentPage = page;
+      this.openMenuIndex = null;
+    }
+  }
+
+  toggleMenu(index: number) {
+    this.openMenuIndex = this.openMenuIndex === index ? null : index;
+  }
+}
diff --git a/eventz-ui/src/components/admin/pie-chart/pie-chart.component.scss b/eventz-ui/src/components/admin/pie-chart/pie-chart.component.scss
index 8b13789..87252e1 100644
--- a/eventz-ui/src/components/admin/pie-chart/pie-chart.component.scss
+++ b/eventz-ui/src/components/admin/pie-chart/pie-chart.component.scss
@@ -1 +1,3 @@
-
+.chart-wrapper {
+  height: 225px;
+}
\ No newline at end of file
diff --git a/eventz-ui/src/components/admin/pie-chart/pie-chart.component.ts b/eventz-ui/src/components/admin/pie-chart/pie-chart.component.ts
index b54dec3..c21ed2f 100644
--- a/eventz-ui/src/components/admin/pie-chart/pie-chart.component.ts
+++ b/eventz-ui/src/components/admin/pie-chart/pie-chart.component.ts
@@ -17,7 +17,7 @@ export class PieChartComponent {
       position: 'bottom' // 'top' | 'left' | 'right' | 'bottom'
     }
   },
-  // maintainAspectRatio: false
+  maintainAspectRatio: false
 };
 
   pieChartData: ChartConfiguration<'pie'>['data'] = {
diff --git a/eventz-ui/src/interfaces/interface.ts b/eventz-ui/src/interfaces/interface.ts
index 5a388c9..437fa05 100644
--- a/eventz-ui/src/interfaces/interface.ts
+++ b/eventz-ui/src/interfaces/interface.ts
@@ -44,4 +44,11 @@ export interface ISideNav {
     path: string;
     isActive: boolean;
     icon: IconProp
+}
+export interface EventItem {
+  name: string;
+  location: string;
+  organizedBy: string;
+  verified: boolean;
+  date: string;
 }
\ No newline at end of file
diff --git a/eventz-ui/tailwind.config.js b/eventz-ui/tailwind.config.js
index 0535ee8..468ce56 100644
--- a/eventz-ui/tailwind.config.js
+++ b/eventz-ui/tailwind.config.js
@@ -20,7 +20,8 @@ module.exports = {
         paleBlue: '#CDC6F6',
         paleGray: '#CCCCC',
         adminBackground: '#F5F7FA',
-        upcomingEventColor: '#718EBF'
+        upcomingEventColor: '#718EBF',
+        eventTableColor: '#2B3674'
       },
       boxShadow: {
         'customWhite': 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',