Implement admin-layout

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}
+      ]
+   }
 ];

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>

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();
+  });
+});

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 {
+
+}

eventz-ui/src/components/admin/top-bar/top-bar.component.html

@@ -0,0 +1 @@
+<p>top-bar works!</p>

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();
+  });
+});

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 {
+
+}

eventz-ui/src/layouts/admin-layout/admin-layout.component.html

@@ -0,0 +1,13 @@
+<div class="flex min-w-full min-h-screen bg-eventsDetailBackground">
+ <div class="w-1/5">
+    <app-side-nav></app-side-nav>
+ </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>

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();
+  });
+});

eventz-ui/src/layouts/admin-layout/admin-layout.component.ts

@@ -0,0 +1,15 @@
+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, RouterOutlet, TopBarComponent],
+  templateUrl: './admin-layout.component.html',
+  styleUrl: './admin-layout.component.scss'
+})
+export class AdminLayoutComponent {
+
+}

eventz-ui/src/pages/admin/dashboard/dashboard.component.html

@@ -0,0 +1,3 @@
+<div>
+<p>Dashboard Works!!</p>
+</div>

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();
+  });
+});

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 {
+
+}