From 205ea7084debc86837da0f27ca2ca06b63c1020a Mon Sep 17 00:00:00 2001
From: jmdotdev <johnmwanikig2000@gmail.com>
Date: Tue, 13 May 2025 23:49:07 +0300
Subject: [PATCH 1/2] implement admin-layout

---
 .../admin/side-nav/side-nav.component.html    |  3 +++
 .../admin/side-nav/side-nav.component.scss    |  0
 .../admin/side-nav/side-nav.component.spec.ts | 23 +++++++++++++++++++
 .../admin/side-nav/side-nav.component.ts      | 12 ++++++++++
 .../admin-layout/admin-layout.component.html  |  7 ++++++
 .../admin-layout/admin-layout.component.scss  |  0
 .../admin-layout.component.spec.ts            | 23 +++++++++++++++++++
 .../admin-layout/admin-layout.component.ts    | 13 +++++++++++
 8 files changed, 81 insertions(+)
 create mode 100644 eventz-ui/src/components/admin/side-nav/side-nav.component.html
 create mode 100644 eventz-ui/src/components/admin/side-nav/side-nav.component.scss
 create mode 100644 eventz-ui/src/components/admin/side-nav/side-nav.component.spec.ts
 create mode 100644 eventz-ui/src/components/admin/side-nav/side-nav.component.ts
 create mode 100644 eventz-ui/src/layouts/admin-layout/admin-layout.component.html
 create mode 100644 eventz-ui/src/layouts/admin-layout/admin-layout.component.scss
 create mode 100644 eventz-ui/src/layouts/admin-layout/admin-layout.component.spec.ts
 create mode 100644 eventz-ui/src/layouts/admin-layout/admin-layout.component.ts

diff --git a/eventz-ui/src/components/admin/side-nav/side-nav.component.html b/eventz-ui/src/components/admin/side-nav/side-nav.component.html
new file mode 100644
index 0000000..b1ef324
--- /dev/null
+++ b/eventz-ui/src/components/admin/side-nav/side-nav.component.html
@@ -0,0 +1,3 @@
+<div class="min-h-screen bg-white">
+sidenav works
+</div>
diff --git a/eventz-ui/src/components/admin/side-nav/side-nav.component.scss b/eventz-ui/src/components/admin/side-nav/side-nav.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/components/admin/side-nav/side-nav.component.spec.ts b/eventz-ui/src/components/admin/side-nav/side-nav.component.spec.ts
new file mode 100644
index 0000000..6567f6a
--- /dev/null
+++ b/eventz-ui/src/components/admin/side-nav/side-nav.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SideNavComponent } from './side-nav.component';
+
+describe('SideNavComponent', () => {
+  let component: SideNavComponent;
+  let fixture: ComponentFixture<SideNavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SideNavComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SideNavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/components/admin/side-nav/side-nav.component.ts b/eventz-ui/src/components/admin/side-nav/side-nav.component.ts
new file mode 100644
index 0000000..533de3a
--- /dev/null
+++ b/eventz-ui/src/components/admin/side-nav/side-nav.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-side-nav',
+  standalone: true,
+  imports: [],
+  templateUrl: './side-nav.component.html',
+  styleUrl: './side-nav.component.scss'
+})
+export class SideNavComponent {
+
+}
diff --git a/eventz-ui/src/layouts/admin-layout/admin-layout.component.html b/eventz-ui/src/layouts/admin-layout/admin-layout.component.html
new file mode 100644
index 0000000..80ac92e
--- /dev/null
+++ b/eventz-ui/src/layouts/admin-layout/admin-layout.component.html
@@ -0,0 +1,7 @@
+<div class="flex min-w-full min-h-screen bg-eventsDetailBackground">
+ <div class="w-1/5">
+    <app-side-nav></app-side-nav>
+ </div>
+ <div>
+ </div>
+</div>
diff --git a/eventz-ui/src/layouts/admin-layout/admin-layout.component.scss b/eventz-ui/src/layouts/admin-layout/admin-layout.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/layouts/admin-layout/admin-layout.component.spec.ts b/eventz-ui/src/layouts/admin-layout/admin-layout.component.spec.ts
new file mode 100644
index 0000000..3af6ec9
--- /dev/null
+++ b/eventz-ui/src/layouts/admin-layout/admin-layout.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminLayoutComponent } from './admin-layout.component';
+
+describe('AdminLayoutComponent', () => {
+  let component: AdminLayoutComponent;
+  let fixture: ComponentFixture<AdminLayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminLayoutComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AdminLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/layouts/admin-layout/admin-layout.component.ts b/eventz-ui/src/layouts/admin-layout/admin-layout.component.ts
new file mode 100644
index 0000000..ac94894
--- /dev/null
+++ b/eventz-ui/src/layouts/admin-layout/admin-layout.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { SideNavComponent } from "../../components/admin/side-nav/side-nav.component";
+
+@Component({
+  selector: 'app-admin-layout',
+  standalone: true,
+  imports: [SideNavComponent],
+  templateUrl: './admin-layout.component.html',
+  styleUrl: './admin-layout.component.scss'
+})
+export class AdminLayoutComponent {
+
+}

From 4db9815946a2aa9640fba0154a2e05478deb71df Mon Sep 17 00:00:00 2001
From: jmdotdev <johnmwanikig2000@gmail.com>
Date: Wed, 14 May 2025 00:15:47 +0300
Subject: [PATCH 2/2] finish admin layout implementation

---
 eventz-ui/src/app/app.routes.ts               | 10 +++++++-
 .../admin/top-bar/top-bar.component.html      |  1 +
 .../admin/top-bar/top-bar.component.scss      |  0
 .../admin/top-bar/top-bar.component.spec.ts   | 23 +++++++++++++++++++
 .../admin/top-bar/top-bar.component.ts        | 12 ++++++++++
 .../admin-layout/admin-layout.component.html  | 10 ++++++--
 .../admin-layout/admin-layout.component.ts    |  4 +++-
 .../admin/dashboard/dashboard.component.html  |  3 +++
 .../admin/dashboard/dashboard.component.scss  |  0
 .../dashboard/dashboard.component.spec.ts     | 23 +++++++++++++++++++
 .../admin/dashboard/dashboard.component.ts    | 12 ++++++++++
 11 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 eventz-ui/src/components/admin/top-bar/top-bar.component.html
 create mode 100644 eventz-ui/src/components/admin/top-bar/top-bar.component.scss
 create mode 100644 eventz-ui/src/components/admin/top-bar/top-bar.component.spec.ts
 create mode 100644 eventz-ui/src/components/admin/top-bar/top-bar.component.ts
 create mode 100644 eventz-ui/src/pages/admin/dashboard/dashboard.component.html
 create mode 100644 eventz-ui/src/pages/admin/dashboard/dashboard.component.scss
 create mode 100644 eventz-ui/src/pages/admin/dashboard/dashboard.component.spec.ts
 create mode 100644 eventz-ui/src/pages/admin/dashboard/dashboard.component.ts

diff --git a/eventz-ui/src/app/app.routes.ts b/eventz-ui/src/app/app.routes.ts
index fc72164..bb4689f 100644
--- a/eventz-ui/src/app/app.routes.ts
+++ b/eventz-ui/src/app/app.routes.ts
@@ -5,11 +5,19 @@ import { RegisterComponent } from '../pages/register/register.component';
 import { EventDetailComponent } from '../pages/event-detail/event-detail.component';
 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';
 export const routes: Routes = [
    {path:'',component: LandingComponent},
    {path:'login', component: LoginComponent},
    {path:'register', component: RegisterComponent},
    {path:'event-detail/:id',component: EventDetailComponent},
    {path: 'cart', component: CartComponent },
-   {path:'checkout',component: CheckoutComponent}
+   {path:'checkout',component: CheckoutComponent},
+   {
+      path:'admin',component: AdminLayoutComponent, 
+      children: [
+         {path: '', component: DashboardComponent}
+      ]
+   }
 ];
diff --git a/eventz-ui/src/components/admin/top-bar/top-bar.component.html b/eventz-ui/src/components/admin/top-bar/top-bar.component.html
new file mode 100644
index 0000000..8e2db96
--- /dev/null
+++ b/eventz-ui/src/components/admin/top-bar/top-bar.component.html
@@ -0,0 +1 @@
+<p>top-bar works!</p>
diff --git a/eventz-ui/src/components/admin/top-bar/top-bar.component.scss b/eventz-ui/src/components/admin/top-bar/top-bar.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/components/admin/top-bar/top-bar.component.spec.ts b/eventz-ui/src/components/admin/top-bar/top-bar.component.spec.ts
new file mode 100644
index 0000000..3d402e1
--- /dev/null
+++ b/eventz-ui/src/components/admin/top-bar/top-bar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopBarComponent } from './top-bar.component';
+
+describe('TopBarComponent', () => {
+  let component: TopBarComponent;
+  let fixture: ComponentFixture<TopBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TopBarComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TopBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/components/admin/top-bar/top-bar.component.ts b/eventz-ui/src/components/admin/top-bar/top-bar.component.ts
new file mode 100644
index 0000000..4d07e09
--- /dev/null
+++ b/eventz-ui/src/components/admin/top-bar/top-bar.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-top-bar',
+  standalone: true,
+  imports: [],
+  templateUrl: './top-bar.component.html',
+  styleUrl: './top-bar.component.scss'
+})
+export class TopBarComponent {
+
+}
diff --git a/eventz-ui/src/layouts/admin-layout/admin-layout.component.html b/eventz-ui/src/layouts/admin-layout/admin-layout.component.html
index 80ac92e..c4c6720 100644
--- a/eventz-ui/src/layouts/admin-layout/admin-layout.component.html
+++ b/eventz-ui/src/layouts/admin-layout/admin-layout.component.html
@@ -2,6 +2,12 @@
  <div class="w-1/5">
     <app-side-nav></app-side-nav>
  </div>
- <div>
- </div>
+   <div class="flex flex-col w-4/5">
+     <div class="h-14 bg-white">
+        <app-top-bar></app-top-bar>
+     </div>
+     <div>
+         <router-outlet></router-outlet>
+     </div>
+   </div>
 </div>
diff --git a/eventz-ui/src/layouts/admin-layout/admin-layout.component.ts b/eventz-ui/src/layouts/admin-layout/admin-layout.component.ts
index ac94894..966b1c9 100644
--- a/eventz-ui/src/layouts/admin-layout/admin-layout.component.ts
+++ b/eventz-ui/src/layouts/admin-layout/admin-layout.component.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import { SideNavComponent } from "../../components/admin/side-nav/side-nav.component";
+import { RouterOutlet } from '@angular/router';
+import { TopBarComponent } from "../../components/admin/top-bar/top-bar.component";
 
 @Component({
   selector: 'app-admin-layout',
   standalone: true,
-  imports: [SideNavComponent],
+  imports: [SideNavComponent, RouterOutlet, TopBarComponent],
   templateUrl: './admin-layout.component.html',
   styleUrl: './admin-layout.component.scss'
 })
diff --git a/eventz-ui/src/pages/admin/dashboard/dashboard.component.html b/eventz-ui/src/pages/admin/dashboard/dashboard.component.html
new file mode 100644
index 0000000..edc8f4f
--- /dev/null
+++ b/eventz-ui/src/pages/admin/dashboard/dashboard.component.html
@@ -0,0 +1,3 @@
+<div>
+<p>Dashboard Works!!</p>
+</div>
diff --git a/eventz-ui/src/pages/admin/dashboard/dashboard.component.scss b/eventz-ui/src/pages/admin/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/eventz-ui/src/pages/admin/dashboard/dashboard.component.spec.ts b/eventz-ui/src/pages/admin/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..815d1b8
--- /dev/null
+++ b/eventz-ui/src/pages/admin/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/eventz-ui/src/pages/admin/dashboard/dashboard.component.ts b/eventz-ui/src/pages/admin/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..68e461a
--- /dev/null
+++ b/eventz-ui/src/pages/admin/dashboard/dashboard.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  imports: [],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.scss'
+})
+export class DashboardComponent {
+
+}