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 @@ + 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; + + 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 @@ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameLocationOrganized ByVerifiedDateActions
{{ event.name }}{{ event.location }}{{ event.organizedBy }} +
+ + +
+ 		{{ event.date }} + + +
+ + + +
+
+ + +
+ + Page {{ currentPage }} of {{ totalPages }} + + +
+ + + +
+
+
+
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; + + 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',