From 3ffbd6925d18067aa461c94a1ca984e09ce08911 Mon Sep 17 00:00:00 2001
From: JohnMwaniki <johnmwanikig2000@gmail.com>
Date: Mon, 19 Jan 2026 22:23:04 +0300
Subject: [PATCH] feat: add create events and creat ticket page

---
 eventz-ui/src/app/app.routes.ts               |  4 +-
 .../table-header/table-header.component.html  |  4 +-
 .../table-header/table-header.component.ts    |  6 ++
 .../create-event/create-event.component.html  | 57 +++++++++++++++++++
 .../create-event/create-event.component.scss  |  0
 .../create-event.component.spec.ts            | 23 ++++++++
 .../create-event/create-event.component.ts    | 12 ++++
 .../create-ticket.component.html              | 38 +++++++++++++
 .../create-ticket.component.scss              |  0
 .../create-ticket.component.spec.ts           | 23 ++++++++
 .../create-ticket/create-ticket.component.ts  | 12 ++++
 .../ticket-list-table.component.html          |  4 +-
 .../ticket-list-table.component.ts            | 11 +++-
 13 files changed, 188 insertions(+), 6 deletions(-)
 create mode 100644 eventz-ui/src/pages/admin/create-event/create-event.component.html
 create mode 100644 eventz-ui/src/pages/admin/create-event/create-event.component.scss
 create mode 100644 eventz-ui/src/pages/admin/create-event/create-event.component.spec.ts
 create mode 100644 eventz-ui/src/pages/admin/create-event/create-event.component.ts
 create mode 100644 eventz-ui/src/pages/admin/create-ticket/create-ticket.component.html
 create mode 100644 eventz-ui/src/pages/admin/create-ticket/create-ticket.component.scss
 create mode 100644 eventz-ui/src/pages/admin/create-ticket/create-ticket.component.spec.ts
 create mode 100644 eventz-ui/src/pages/admin/create-ticket/create-ticket.component.ts

diff --git a/eventz-ui/src/app/app.routes.ts b/eventz-ui/src/app/app.routes.ts
index 3495af5..8991b55 100644
--- a/eventz-ui/src/app/app.routes.ts
+++ b/eventz-ui/src/app/app.routes.ts
@@ -12,7 +12,9 @@ export const routes: Routes = [
          {path: '', loadComponent: () => import('../pages/admin/dashboard/dashboard.component').then(m => m.DashboardComponent)},
          {path: 'events', loadComponent: () => import('../pages/admin/admin-events-list/admin-events-list.component').then(m => m.AdminEventsListComponent)},
          {path: 'tickets', loadComponent: () => import('../pages/admin/ticket-list-table/ticket-list-table.component').then(m => m.TicketListTableComponent)},
-         {path: 'users', loadComponent: () => import('../pages/admin/user-list-table/user-list-table.component').then(m => m.UserListTableComponent)}
+         {path: 'users', loadComponent: () => import('../pages/admin/user-list-table/user-list-table.component').then(m => m.UserListTableComponent)},
+         {path: 'create-ticket', loadComponent: () => import('../pages/admin/create-ticket/create-ticket.component').then(m => m.CreateTicketComponent)},
+         {path: 'create-event', loadComponent: () => import('../pages/admin/create-event/create-event.component').then(m => m.CreateEventComponent)}
       ]
    }
 ];
diff --git a/eventz-ui/src/components/admin/table-header/table-header.component.html b/eventz-ui/src/components/admin/table-header/table-header.component.html
index b07693d..4420659 100644
--- a/eventz-ui/src/components/admin/table-header/table-header.component.html
+++ b/eventz-ui/src/components/admin/table-header/table-header.component.html
@@ -19,7 +19,9 @@
       <div class="w-[1px] h-[30px] bg-eventTogglerBackground"></div>
     </div>
 
-    <div class="flex items-center my-2 md:my-0">
+    <div class="flex items-center my-2 md:my-0 cursor-pointer"
+            (click)="navigateToAddEvent()"
+    >
       <div
         class="flex items-center justify-center bg-paleBlue text-deepBlue h-8 w-8 rounded-full cursor-pointer"
       >
diff --git a/eventz-ui/src/components/admin/table-header/table-header.component.ts b/eventz-ui/src/components/admin/table-header/table-header.component.ts
index 67889fb..715982b 100644
--- a/eventz-ui/src/components/admin/table-header/table-header.component.ts
+++ b/eventz-ui/src/components/admin/table-header/table-header.component.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faEllipsisH, faPlus, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { NgClass } from "../../../../node_modules/@angular/common/index";
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-table-header',
@@ -18,8 +19,13 @@ export class TableHeaderComponent {
     showEventsTable: boolean = true;
     @Output() showEvents = new EventEmitter<boolean>(true);
 
+    constructor ( private router: Router) {}
+
     toggleShowEvents (value: boolean) {
        this.showEvents.emit(value)
        this.showEventsTable = value;
     }
+    navigateToAddEvent () {
+      this.router.navigate(['/admin/create-event']);
+    }
 }
diff --git a/eventz-ui/src/pages/admin/create-event/create-event.component.html b/eventz-ui/src/pages/admin/create-event/create-event.component.html
new file mode 100644
index 0000000..3bc8630
--- /dev/null
+++ b/eventz-ui/src/pages/admin/create-event/create-event.component.html
@@ -0,0 +1,57 @@
+<div class="flex flex-col bg-white rounded-lg py-6 md:py-10 px-8 lg:px-32 xl:px-56 mx-4 my-6">
+<div class="text-3xl text-center w-full">
+    Create Event
+</div>
+<div> 
+    <form class="flex flex-col gap-4 mt-4">
+         <div class="flex flex-col">
+            <label for="title" class="mb-1 font-semibold">Event Title</label>
+            <input id="title" class="border border-gray-300 rounded-md p-2" placeholder="Enter event title" type="text"/>
+        </div>
+       <div class="flex flex-col">
+            <label for="venue" class="mb-1 font-semibold">Venue</label>
+            <select id="venue" class="border border-gray-300 rounded-md p-2">
+                <option value="" disabled selected>Select venue</option>
+                <option value="event1">venue 1</option>
+                <option value="event2">venue 2</option>
+                <option value="event3">venue 3</option>
+            </select>
+        </div>
+        <div class="flex flex-col">
+            <label for="no of tickets" class="mb-1 font-semibold">No of tickets</label>
+            <input id="no of tickets" class="border border-gray-300 rounded-md p-2" placeholder="Enter no of tickets" type="number"/>
+        </div>
+        <div class="flex flex-col">
+            <label for="priority" class="mb-1 font-semibold">Category</label>
+            <select id="priority" class="border border-gray-300 rounded-md p-2">
+                <option value="" disabled selected>Select category</option>
+                <option value="Category 1">Category 1</option>
+                <option value="Category 2">Category 2</option>
+                <option value="Category 3">Category 3</option>
+            </select>
+        </div>
+        <div class="flex flex-col md:flex-row gap-4">
+            <div class="w-full md:w-1/2">
+                <label for="date" class="mb-1 font-semibold">Start Date</label>
+                <input id="date" class="border border-gray-300 rounded-md p-2 w-full" type="datetime"/>
+            </div>
+            <div class="w-full md:w-1/2">
+                <label for="date" class="mb-1 font-semibold">End Date</label>
+                <input id="date" class="border border-gray-300 rounded-md p-2 w-full" type="datetime"/>
+            </div>
+        </div>
+        <div class="flex flex-col">
+            <img src="" alt="Event Image Preview" class="mb-2 w-full h-44 object-cover bg-gray-200 border rounded-md"/>
+            <label for="image" class="mb-1 font-semibold">Event Image</label>
+            <input id="image" class="border border-gray-300 rounded-md p-2" type="file" />
+        </div>
+        <div class="flex flex-col">
+            <label for="description" class="mb-1 font-semibold">Event Description</label>
+            <textarea id="description" class="border border-gray-300 rounded-md p-2" placeholder="Enter event description" rows="4"></textarea>
+        </div>
+        <button type="submit" class="bg-blue-600 text-white rounded-md p-2 mt-4 hover:bg-blue-700">Create Event</button>
+    </form>
+</div>
+
+</div>
+
diff --git a/eventz-ui/src/pages/admin/create-event/create-event.component.scss b/eventz-ui/src/pages/admin/create-event/create-event.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/pages/admin/create-event/create-event.component.spec.ts b/eventz-ui/src/pages/admin/create-event/create-event.component.spec.ts
new file mode 100644
index 0000000..c906274
--- /dev/null
+++ b/eventz-ui/src/pages/admin/create-event/create-event.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateEventComponent } from './create-event.component';
+
+describe('CreateEventComponent', () => {
+  let component: CreateEventComponent;
+  let fixture: ComponentFixture<CreateEventComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateEventComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CreateEventComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/pages/admin/create-event/create-event.component.ts b/eventz-ui/src/pages/admin/create-event/create-event.component.ts
new file mode 100644
index 0000000..e0f4cda
--- /dev/null
+++ b/eventz-ui/src/pages/admin/create-event/create-event.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-event',
+  standalone: true,
+  imports: [],
+  templateUrl: './create-event.component.html',
+  styleUrl: './create-event.component.scss'
+})
+export class CreateEventComponent {
+
+}
diff --git a/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.html b/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.html
new file mode 100644
index 0000000..3f026af
--- /dev/null
+++ b/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.html
@@ -0,0 +1,38 @@
+<div class="flex flex-col bg-white rounded-lg py-6 md:py-10 px-8 lg:px-32 xl:px-56 mx-4 my-6">
+<div class="text-3xl text-center w-full">
+    Create Ticket
+</div>
+<div> 
+    <form class="flex flex-col gap-4 mt-4">
+       <div class="flex flex-col">
+            <label for="priority" class="mb-1 font-semibold">Event</label>
+            <select id="priority" class="border border-gray-300 rounded-md p-2">
+                <option value="" disabled selected>Select event</option>
+                <option value="event1">Event 1</option>
+                <option value="event2">Event 2</option>
+                <option value="event3">Event 3</option>
+            </select>
+        </div>
+        <div class="flex flex-col">
+            <label for="no of tickets" class="mb-1 font-semibold">No of tickets</label>
+            <input id="no of tickets" class="border border-gray-300 rounded-md p-2" placeholder="Enter no of tickets" type="number"/>
+        </div>
+        <div class="flex flex-col">
+            <label for="priority" class="mb-1 font-semibold">Category</label>
+            <select id="priority" class="border border-gray-300 rounded-md p-2">
+                <option value="" disabled selected>Select priority</option>
+                <option value="Category 1">Category 1</option>
+                <option value="Category 2">Category 2</option>
+                <option value="Category 3">Category 3</option>
+            </select>
+        </div>
+         <div class="flex flex-col">
+            <label for="cost" class="mb-1 font-semibold">Ticket Cost</label>
+            <input id="cost" class="border border-gray-300 rounded-md p-2" placeholder="Enter ticket cost" type="number"/>
+        </div>
+        <button type="submit" class="bg-blue-600 text-white rounded-md p-2 mt-4 hover:bg-blue-700">Create Ticket</button>
+    </form>
+</div>
+
+</div>
+
diff --git a/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.scss b/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.spec.ts b/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.spec.ts
new file mode 100644
index 0000000..ff4115b
--- /dev/null
+++ b/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTicketComponent } from './create-ticket.component';
+
+describe('CreateTicketComponent', () => {
+  let component: CreateTicketComponent;
+  let fixture: ComponentFixture<CreateTicketComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateTicketComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CreateTicketComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.ts b/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.ts
new file mode 100644
index 0000000..d3a9bcc
--- /dev/null
+++ b/eventz-ui/src/pages/admin/create-ticket/create-ticket.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-ticket',
+  standalone: true,
+  imports: [],
+  templateUrl: './create-ticket.component.html',
+  styleUrl: './create-ticket.component.scss'
+})
+export class CreateTicketComponent {
+
+}
diff --git a/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.html b/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.html
index 3ecc4b8..3e111a5 100644
--- a/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.html
+++ b/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.html
@@ -17,8 +17,8 @@ <h2 class="font-semibold text-lg text-eventTableColor">Tickets List</h2>
             *ngIf="showHeaderDropDown"
             class="absolute right-4 mt-28 w-auto bg-white border rounded shadow z-10 cursor-pointer"
           >
-            <button class="block w-full text-left px-4 py-2 hover:bg-gray-100">
-              Add Ticket
+            <button class="block w-full text-left px-4 py-2 hover:bg-gray-100" (click)="navigateToCreateTicket()">
+              Create Ticket
             </button>
         </div>
   </div>
diff --git a/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.ts b/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.ts
index 299b0b1..54374db 100644
--- a/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.ts
+++ b/eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faCheck, faEllipsisV, faTimes, faPlus, faSearch, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
-import { Ticket, User } from '../../../interfaces/interface';
+import { Ticket } from '../../../interfaces/interface';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-ticket-list-table',
@@ -23,6 +24,8 @@ export class TicketListTableComponent {
   faEllipsisH = faEllipsisH;
   showHeaderDropDown: boolean = false;
 
+  constructor (private router: Router) {}
+
   tickets: Ticket[] = Array.from({ length: 37 }).map((_, i) => ({
     ticketNo: `#Ticket ${i + 1}`,
     event: ['NY Exhibition', 'LA Event', 'MIAMI Event'][i % 3],
@@ -37,7 +40,7 @@ export class TicketListTableComponent {
 
   get paginatedTickets(): Ticket[] | [] {
     const start = (this.currentPage - 1) * this.pageSize;
-    return this.tickets.slice(start, start + this.pageSize);
+    return this.tickets.slice(start, start + this.pageSize) || [];
   }
 
   changePage(page: number) {
@@ -54,4 +57,8 @@ export class TicketListTableComponent {
   openHeaderDropDown () {
     this.showHeaderDropDown = !this.showHeaderDropDown;
   }
+
+  navigateToCreateTicket () {
+    this.router.navigate(['admin/create-ticket']);
+  }
 }