Index: angular.json
===================================================================
--- angular.json	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ angular.json	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -17,7 +17,5 @@
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": [
@@ -31,5 +29,7 @@
               "src/styles.css"
             ],
-            "scripts": [],
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ],
             "server": "src/main.server.ts",
             "outputMode": "server",
@@ -87,8 +87,5 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
@@ -98,7 +95,5 @@
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
Index: src/app/admin/add-driver/add-driver.component.html
===================================================================
--- src/app/admin/add-driver/add-driver.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-driver/add-driver.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,81 @@
+<app-navbar></app-navbar>
+<div class="container mt-4">
+  <h3>Create Driver</h3>
+  <form
+    [formGroup]="form"
+    (ngSubmit)="onSubmit()"
+    enctype="multipart/form-data"
+  >
+    <div class="mb-3">
+      <label class="form-label">Name</label>
+      <input type="text" class="form-control" formControlName="name" />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Surname</label>
+      <input type="text" class="form-control" formControlName="surname" />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Email</label>
+      <input type="email" class="form-control" formControlName="email" />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Password</label>
+      <input type="password" class="form-control" formControlName="password" />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Repeat Password</label>
+      <input
+        type="password"
+        class="form-control"
+        formControlName="repeatedPassword"
+      />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Mobile</label>
+      <input type="text" class="form-control" formControlName="mobile" />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Profile Image</label>
+      <input
+        type="file"
+        class="form-control"
+        (change)="onFileSelected($event)"
+        accept="image/*"
+      />
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">City</label>
+      <select
+        class="form-select"
+        formControlName="city"
+        (change)="onCityDropdownChange($event)"
+      >
+        <option value="">Select a city</option>
+        <option *ngFor="let city of cities" [value]="city.id">
+          {{ city.name }}
+        </option>
+      </select>
+    </div>
+
+    <div class="mb-3">
+      <label class="form-label">Vehicle</label>
+      <select class="form-select" formControlName="vehicle">
+        <option value="">Select a vehicle</option>
+        <option *ngFor="let v of vehicles" [value]="v.id">
+          {{ v.plateNumber }}
+        </option>
+      </select>
+    </div>
+
+    <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+      Create Driver
+    </button>
+  </form>
+</div>
Index: src/app/admin/add-driver/add-driver.component.spec.ts
===================================================================
--- src/app/admin/add-driver/add-driver.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-driver/add-driver.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDriverComponent } from './add-driver.component';
+
+describe('AddDriverComponent', () => {
+  let component: AddDriverComponent;
+  let fixture: ComponentFixture<AddDriverComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddDriverComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddDriverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/admin/add-driver/add-driver.component.ts
===================================================================
--- src/app/admin/add-driver/add-driver.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-driver/add-driver.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,88 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  FormBuilder,
+  Validators,
+  ReactiveFormsModule,
+  FormGroup,
+} from '@angular/forms';
+import { RouterModule, Router } from '@angular/router';
+import { AdminService } from '../../services/admin.service';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environment';
+
+@Component({
+  selector: 'app-add-driver',
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, NavbarComponent],
+  templateUrl: './add-driver.component.html',
+  styleUrl: './add-driver.component.css',
+})
+export class AddDriverComponent {
+  form!: FormGroup;
+  cities: any[] = [];
+  vehicles: any[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private admin: AdminService,
+    private router: Router,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', Validators.required],
+      repeatedPassword: ['', Validators.required],
+      name: ['', Validators.required],
+      surname: ['', Validators.required],
+      mobile: ['', Validators.required],
+      profileImage: [null],
+      city: ['', Validators.required],
+      vehicle: ['', Validators.required],
+    });
+
+    this.loadCities();
+  }
+
+  onSubmit() {
+    if (this.form.invalid) return;
+
+    const formData = new FormData();
+    Object.entries(this.form.value).forEach(([key, value]) => {
+      formData.append(key, value as any);
+    });
+
+    this.admin.addDriver(formData).subscribe({
+      next: () => this.router.navigate(['/admin/dashboard']),
+      error: (e) => alert('Error adding driver: ' + e.message),
+    });
+  }
+
+  loadCities() {
+    this.http.get<any[]>(`${environment.apiUrl}/city/all`).subscribe((data) => {
+      this.cities = data;
+    });
+  }
+
+  onCityDropdownChange(event: Event) {
+    const value = (event.target as HTMLSelectElement).value;
+    this.onCityChange(+value);
+  }
+
+  onCityChange(cityId: number) {
+    this.http
+      .get<any[]>(`${environment.apiUrl}/vehicle/find-by-city?cityId=${cityId}`)
+      .subscribe((data) => {
+        this.vehicles = data;
+      });
+  }
+
+  onFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      this.form.patchValue({ profileImage: file });
+    }
+  }
+}
Index: src/app/admin/add-manager/add-manager.component.html
===================================================================
--- src/app/admin/add-manager/add-manager.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-manager/add-manager.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,126 @@
+<app-navbar></app-navbar>
+
+<div class="container mt-4">
+  <h3>Create a Manager</h3>
+  <form
+    [formGroup]="form"
+    (ngSubmit)="onSubmit()"
+    enctype="multipart/form-data"
+  >
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">Email</label>
+        <input
+          type="email"
+          class="form-control"
+          formControlName="email"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">Password</label>
+        <input
+          type="password"
+          class="form-control"
+          formControlName="password"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">Repeat Password</label>
+        <input
+          type="password"
+          class="form-control"
+          formControlName="repeatedPassword"
+          required
+        />
+        <div *ngIf="form.hasError('notMatching')" class="text-danger small">
+          Passwords do not match
+        </div>
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">First Name</label>
+        <input
+          type="text"
+          class="form-control"
+          formControlName="name"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">Last Name</label>
+        <input
+          type="text"
+          class="form-control"
+          formControlName="surname"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">Mobile</label>
+        <input
+          type="tel"
+          class="form-control"
+          formControlName="mobile"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">Profile Picture</label>
+        <input
+          type="file"
+          class="form-control"
+          (change)="onFileSelected($event)"
+          accept="image/*"
+        />
+      </div>
+    </div>
+
+    <div class="row mb-3">
+      <div class="col-md-6">
+        <label class="form-label">City</label>
+        <select
+          class="form-select"
+          formControlName="city"
+          (change)="onCityChange($event)"
+        >
+          <option value="">Select your city</option>
+          <option *ngFor="let c of cities" [value]="c.id">{{ c.name }}</option>
+        </select>
+      </div>
+
+      <div class="col-md-6" *ngIf="selectedWarehouse">
+        <label class="form-label">Warehouse</label>
+        <input
+          type="text"
+          class="form-control"
+          [value]="selectedWarehouse.address"
+          readonly
+        />
+        <!-- hidden input is the formControl above -->
+      </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
+      Submit
+    </button>
+  </form>
+</div>
Index: src/app/admin/add-manager/add-manager.component.spec.ts
===================================================================
--- src/app/admin/add-manager/add-manager.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-manager/add-manager.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddManagerComponent } from './add-manager.component';
+
+describe('AddManagerComponent', () => {
+  let component: AddManagerComponent;
+  let fixture: ComponentFixture<AddManagerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddManagerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddManagerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/admin/add-manager/add-manager.component.ts
===================================================================
--- src/app/admin/add-manager/add-manager.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-manager/add-manager.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,98 @@
+import { Component } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { AdminService } from '../../services/admin.service';
+import { Router, RouterModule } from '@angular/router';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environment';
+
+@Component({
+  selector: 'app-add-manager',
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, NavbarComponent],
+  templateUrl: './add-manager.component.html',
+  styleUrl: './add-manager.component.css',
+})
+export class AddManagerComponent {
+  form!: FormGroup;
+  cities: any[] = [];
+  selectedWarehouse: { id: number; address: string } | null = null;
+
+  constructor(
+    private fb: FormBuilder,
+    private admin: AdminService,
+    private router: Router,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {
+    this.form = this.fb.group(
+      {
+        email: ['', [Validators.required, Validators.email]],
+        password: ['', [Validators.required, Validators.minLength(8)]],
+        repeatedPassword: ['', Validators.required],
+        name: ['', Validators.required],
+        surname: ['', Validators.required],
+        mobile: ['', Validators.required],
+        profileImage: [null],
+        city: ['', Validators.required],
+        warehouseId: ['', Validators.required], // will hold ID
+      },
+      {
+        validators: this.passwordMatchValidator,
+      }
+    );
+
+    this.loadCities();
+  }
+
+  onSubmit() {
+    if (this.form.invalid) return;
+
+    const formData = new FormData();
+
+    for (const [key, value] of Object.entries(this.form.value)) {
+      formData.append(key, value as any);
+    }
+
+    this.admin.addManager(formData).subscribe({
+      next: () => this.router.navigate(['/admin/dashboard']),
+      error: (e) => alert('Error creating manager: ' + e.message),
+    });
+  }
+
+  passwordMatchValidator(group: FormGroup) {
+    const pw = group.get('password')?.value;
+    const rpt = group.get('repeatedPassword')?.value;
+    return pw && rpt && pw !== rpt ? { notMatching: true } : null;
+  }
+
+  loadCities() {
+    this.http
+      .get<any[]>(`${environment.apiUrl}/cities/listAll`)
+      .subscribe((data) => (this.cities = data));
+  }
+
+  onCityChange(event: Event) {
+    const cityId = Number((event.target as HTMLSelectElement).value);
+
+    this.http
+      .get<{ id: number; address: string }>(
+        `${environment.apiUrl}/warehouse/find-by-city?cityId=${cityId}`
+      )
+      .subscribe((warehouse) => {
+        this.selectedWarehouse = warehouse;
+        this.form.patchValue({ warehouseId: warehouse.id });
+      });
+  }
+
+  onFileSelected(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0] ?? null;
+    if (file) this.form.patchValue({ profileImage: file });
+  }
+}
Index: src/app/admin/add-vehicle/add-vehicle.component.html
===================================================================
--- src/app/admin/add-vehicle/add-vehicle.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-vehicle/add-vehicle.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,62 @@
+<app-navbar></app-navbar>
+<div class="container mt-4">
+  <h3>Add Vehicle</h3>
+  <form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <div class="mb-3">
+      <label class="form-label">Carry Weight</label>
+      <input class="form-control" formControlName="plateNumber" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Current Kilometers</label>
+      <input
+        type="number"
+        class="form-control"
+        formControlName="vehicleKilometers"
+      />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Service Interval</label>
+      <input class="form-control" formControlName="vehicleServiceInterval" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Last Service Date</label>
+      <input class="form-control" formControlName="vehicleLastService" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Last Service Kilometers</label>
+      <input class="form-control" formControlName="vehicleLastServiceKm" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Plate Number</label>
+      <input
+        type="number"
+        class="form-control"
+        formControlName="vehiclePlate"
+      />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">VIN</label>
+      <input class="form-control" formControlName="vehicleVIN" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Registration Date</label>
+      <input class="form-control" formControlName="vehicleRegDate" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Capacity</label>
+      <input type="number" class="form-control" formControlName="capacity" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Warehouse</label>
+      <select class="form-select" formControlName="warehouseId">
+        <option value="">Select a warehouse</option>
+        <option *ngFor="let wh of warehouses" [value]="wh.id">
+          {{ wh.address }}
+        </option>
+      </select>
+    </div>
+    <button class="btn btn-primary" [disabled]="form.invalid">
+      Add Vehicle
+    </button>
+  </form>
+</div>
Index: src/app/admin/add-vehicle/add-vehicle.component.spec.ts
===================================================================
--- src/app/admin/add-vehicle/add-vehicle.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-vehicle/add-vehicle.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddVehicleComponent } from './add-vehicle.component';
+
+describe('AddVehicleComponent', () => {
+  let component: AddVehicleComponent;
+  let fixture: ComponentFixture<AddVehicleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddVehicleComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddVehicleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/admin/add-vehicle/add-vehicle.component.ts
===================================================================
--- src/app/admin/add-vehicle/add-vehicle.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-vehicle/add-vehicle.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,69 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { AdminService } from '../../services/admin.service';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environment';
+
+@Component({
+  selector: 'app-add-vehicle',
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, NavbarComponent],
+  templateUrl: './add-vehicle.component.html',
+  styleUrl: './add-vehicle.component.css',
+})
+export class AddVehicleComponent {
+  form!: FormGroup;
+  warehouses: any[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private admin: AdminService,
+    private router: Router,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      vehicleCarryWeight: ['', Validators.required],
+      vehicleServiceInterval: ['', Validators.required],
+      vehicleKilometers: ['', Validators.required],
+      vehicleLastService: ['', Validators.required],
+      vehicleLastServiceKm: ['', Validators.required],
+      vehiclePlate: ['', Validators.required],
+      vehicleVIN: ['', Validators.required],
+      vehicleRegDate: ['', Validators.required],
+      warehouseId: ['', Validators.required],
+    });
+
+    this.loadWarehouses();
+  }
+
+  onSubmit() {
+    if (this.form.invalid) return;
+
+    const formData = new FormData();
+    Object.entries(this.form.value).forEach(([key, value]) => {
+      formData.append(key, value as any);
+    });
+
+    this.admin.addVehicle(formData).subscribe({
+      next: () => this.router.navigate(['/admin/dashboard']),
+      error: (e) => alert('Error adding vehicle: ' + e.message),
+    });
+  }
+
+  loadWarehouses() {
+    this.http
+      .get<any[]>(`${environment.apiUrl}/warehouse/all`)
+      .subscribe((data) => {
+        this.warehouses = data;
+      });
+  }
+}
Index: src/app/admin/add-warehouse/add-warehouse.component.html
===================================================================
--- src/app/admin/add-warehouse/add-warehouse.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-warehouse/add-warehouse.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,20 @@
+<app-navbar></app-navbar>
+<div class="container mt-4">
+  <h3>Create Warehouse</h3>
+  <form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <div class="mb-3">
+      <label class="form-label">Address</label>
+      <input class="form-control" formControlName="address" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">City</label>
+      <select class="form-select" formControlName="cityId">
+        <option value="">Select your city</option>
+        <option *ngFor="let c of cities" [value]="c.id">{{ c.name }}</option>
+      </select>
+    </div>
+    <button class="btn btn-primary" [disabled]="form.invalid">
+      Create Warehouse
+    </button>
+  </form>
+</div>
Index: src/app/admin/add-warehouse/add-warehouse.component.spec.ts
===================================================================
--- src/app/admin/add-warehouse/add-warehouse.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-warehouse/add-warehouse.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddWarehouseComponent } from './add-warehouse.component';
+
+describe('AddWarehouseComponent', () => {
+  let component: AddWarehouseComponent;
+  let fixture: ComponentFixture<AddWarehouseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddWarehouseComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddWarehouseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/admin/add-warehouse/add-warehouse.component.ts
===================================================================
--- src/app/admin/add-warehouse/add-warehouse.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/add-warehouse/add-warehouse.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,61 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { AdminService } from '../../services/admin.service';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environment';
+
+@Component({
+  selector: 'app-add-warehouse',
+  imports: [CommonModule, ReactiveFormsModule, RouterModule, NavbarComponent],
+  templateUrl: './add-warehouse.component.html',
+  styleUrl: './add-warehouse.component.css',
+})
+export class AddWarehouseComponent {
+  form!: FormGroup;
+  cities: any[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private admin: AdminService,
+    private router: Router,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      address: ['', Validators.required],
+      city: [null, Validators.required],
+    });
+
+    this.loadCities();
+  }
+
+  onSubmit() {
+    if (this.form.invalid) return;
+
+    const formData = new FormData();
+
+    for (const [key, value] of Object.entries(this.form.value)) {
+      formData.append(key, value as any);
+    }
+
+    this.admin.addWarehouse(formData).subscribe({
+      next: () => this.router.navigate(['/admin/dashboard']),
+      error: (e) => alert('Error creating warehosue: ' + e.message),
+    });
+  }
+
+  loadCities() {
+    this.http
+      .get<any[]>(`${environment.apiUrl}/cities/listAll`)
+      .subscribe((data) => (this.cities = data));
+  }
+}
Index: src/app/admin/admin-dashboard/admin-dashboard.component.html
===================================================================
--- src/app/admin/admin-dashboard/admin-dashboard.component.html	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/admin/admin-dashboard/admin-dashboard.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,1 +1,5 @@
-<p>admin-dashboard works!</p>
+<app-navbar></app-navbar>
+<div class="container mt-4">
+  <h4>Reports Overview</h4>
+  <app-reports-summary></app-reports-summary>
+</div>
Index: src/app/admin/admin-dashboard/admin-dashboard.component.ts
===================================================================
--- src/app/admin/admin-dashboard/admin-dashboard.component.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/admin/admin-dashboard/admin-dashboard.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { CommonModule } from '@angular/common';
+import { ReportsSummaryComponent } from '../reports-summary/reports-summary.component';
 
 @Component({
   selector: 'app-admin-dashboard',
-  imports: [],
+  imports: [NavbarComponent, CommonModule, ReportsSummaryComponent],
   templateUrl: './admin-dashboard.component.html',
-  styleUrl: './admin-dashboard.component.css'
+  styleUrl: './admin-dashboard.component.css',
 })
-export class AdminDashboardComponent {
-
-}
+export class AdminDashboardComponent {}
Index: src/app/admin/reports-summary/reports-summary.component.html
===================================================================
--- src/app/admin/reports-summary/reports-summary.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/reports-summary/reports-summary.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,1 @@
+<p>reports-summary works!</p>
Index: src/app/admin/reports-summary/reports-summary.component.spec.ts
===================================================================
--- src/app/admin/reports-summary/reports-summary.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/reports-summary/reports-summary.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportsSummaryComponent } from './reports-summary.component';
+
+describe('ReportsSummaryComponent', () => {
+  let component: ReportsSummaryComponent;
+  let fixture: ComponentFixture<ReportsSummaryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReportsSummaryComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ReportsSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/admin/reports-summary/reports-summary.component.ts
===================================================================
--- src/app/admin/reports-summary/reports-summary.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/admin/reports-summary/reports-summary.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-reports-summary',
+  imports: [],
+  templateUrl: './reports-summary.component.html',
+  styleUrl: './reports-summary.component.css'
+})
+export class ReportsSummaryComponent {
+
+}
Index: src/app/app.routes.ts
===================================================================
--- src/app/app.routes.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/app.routes.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -8,4 +8,8 @@
 import { DriverDashboardComponent } from './driver/driver-dashboard/driver-dashboard.component';
 import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
+import { AddDriverComponent } from './admin/add-driver/add-driver.component';
+import { AddVehicleComponent } from './admin/add-vehicle/add-vehicle.component';
+import { AddWarehouseComponent } from './admin/add-warehouse/add-warehouse.component';
+import { AddManagerComponent } from './admin/add-manager/add-manager.component';
 
 export const routes: Routes = [
@@ -17,5 +21,5 @@
   },
   {
-    path: 'customer/dashboard',
+    path: 'manager/dashboard',
     component: ManagerDashboardComponent,
     canActivate: [authGuard],
@@ -23,5 +27,5 @@
   },
   {
-    path: 'customer/dashboard',
+    path: 'driver/dashboard',
     component: DriverDashboardComponent,
     canActivate: [authGuard],
@@ -31,4 +35,28 @@
     path: 'admin/dashboard',
     component: AdminDashboardComponent,
+    canActivate: [authGuard],
+    data: { roles: ['ROLE_ADMIN'] },
+  },
+  {
+    path: 'admin/driver/add',
+    component: AddDriverComponent,
+    canActivate: [authGuard],
+    data: { roles: ['ROLE_ADMIN'] },
+  },
+  {
+    path: 'admin/manager/add',
+    component: AddManagerComponent,
+    canActivate: [authGuard],
+    data: { roles: ['ROLE_ADMIN'] },
+  },
+  {
+    path: 'admin/warehouse/add',
+    component: AddWarehouseComponent,
+    canActivate: [authGuard],
+    data: { roles: ['ROLE_ADMIN'] },
+  },
+  {
+    path: 'admin/vehicle/add',
+    component: AddVehicleComponent,
     canActivate: [authGuard],
     data: { roles: ['ROLE_ADMIN'] },
Index: src/app/auth/auth.service.ts
===================================================================
--- src/app/auth/auth.service.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/auth/auth.service.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -4,4 +4,5 @@
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { environment } from '../../environment';
+import { StorageService } from '../services/storage.service';
 
 interface LoginResponse {
@@ -16,4 +17,6 @@
   private jwtHelper = new JwtHelperService();
   private currentUserSubject = new BehaviorSubject<any>(null);
+
+  constructor(private storage: StorageService) {}
 
   login(email: string, password: string) {
@@ -44,14 +47,14 @@
 
   private storeToken(token: string) {
-    console.log("Token is:" + token.toString);
-    return localStorage.setItem(environment.tokenKey, token);
+    console.log('Token is:' + token.toString);
+    return this.storage.set(environment.tokenKey, token);
   }
 
   getToken(): string | null {
-    return localStorage.getItem(environment.tokenKey);
+    return this.storage.get(environment.tokenKey);
   }
 
   clearToken() {
-    localStorage.removeItem(environment.tokenKey);
+    this.storage.remove(environment.tokenKey);
     this.currentUserSubject.next(null);
   }
Index: src/app/auth/login/login.component.ts
===================================================================
--- src/app/auth/login/login.component.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/auth/login/login.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -37,14 +37,16 @@
       {
         const credentials = this.loginForm.value;
-        this.authService.login(credentials.email,credentials.password).subscribe({
-          next: (response) => {
-            localStorage.setItem('jwtToken', response.token);
-            console.log('The received token is: ' + response.token);
-            this.onLoginSuccess();
-          },
-          error: (err) => {
-            this.errorMessage = err.error.errorMessage || 'Login failed';
-          },
-        });
+        this.authService
+          .login(credentials.email, credentials.password)
+          .subscribe({
+            next: (response) => {
+              localStorage.setItem('jwtToken', response.token);
+              console.log('The received token is: ' + response.token);
+              this.onLoginSuccess();
+            },
+            error: (err) => {
+              this.errorMessage = err.error.errorMessage || 'Login failed';
+            },
+          });
       }
     }
@@ -62,5 +64,5 @@
     const roles: string[] = decodedToken?.roles || [];
 
-    if(roles.length===0){
+    if (roles.length === 0) {
       this.router.navigate(['/']);
       return;
@@ -70,4 +72,6 @@
 
     const primaryRole = roles[0].toUpperCase();
+
+    localStorage.setItem('role', primaryRole);
 
     switch (primaryRole) {
@@ -81,5 +85,5 @@
         this.router.navigate(['/driver/dashboard']);
         break;
-      case 'ADMIN':
+      case 'ROLE_ADMIN':
         this.router.navigate(['/admin/dashboard']);
         break;
Index: src/app/customer/customer-dashboard/customer-dashboard.component.html
===================================================================
--- src/app/customer/customer-dashboard/customer-dashboard.component.html	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/customer/customer-dashboard/customer-dashboard.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,1 +1,1 @@
-<p>customer-dashboard works!</p>
+<app-navbar></app-navbar>
Index: src/app/customer/customer-dashboard/customer-dashboard.component.ts
===================================================================
--- src/app/customer/customer-dashboard/customer-dashboard.component.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/customer/customer-dashboard/customer-dashboard.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
+import { NavbarComponent } from '../../navbar/navbar.component';
 
 @Component({
   selector: 'app-customer-dashboard',
-  imports: [],
+  imports: [NavbarComponent],
   templateUrl: './customer-dashboard.component.html',
-  styleUrl: './customer-dashboard.component.css'
+  styleUrl: './customer-dashboard.component.css',
 })
-export class CustomerDashboardComponent {
-
-}
+export class CustomerDashboardComponent {}
Index: src/app/customer/delivery-list/delivery-list.component.html
===================================================================
--- src/app/customer/delivery-list/delivery-list.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/customer/delivery-list/delivery-list.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,1 @@
+<p>delivery-list works!</p>
Index: src/app/customer/delivery-list/delivery-list.component.spec.ts
===================================================================
--- src/app/customer/delivery-list/delivery-list.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/customer/delivery-list/delivery-list.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeliveryListComponent } from './delivery-list.component';
+
+describe('DeliveryListComponent', () => {
+  let component: DeliveryListComponent;
+  let fixture: ComponentFixture<DeliveryListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeliveryListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeliveryListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/customer/delivery-list/delivery-list.component.ts
===================================================================
--- src/app/customer/delivery-list/delivery-list.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/customer/delivery-list/delivery-list.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-delivery-list',
+  imports: [],
+  templateUrl: './delivery-list.component.html',
+  styleUrl: './delivery-list.component.css'
+})
+export class DeliveryListComponent {
+
+}
Index: src/app/customer/order-list/order-list.component.html
===================================================================
--- src/app/customer/order-list/order-list.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/customer/order-list/order-list.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,1 @@
+<p>order-list works!</p>
Index: src/app/customer/order-list/order-list.component.spec.ts
===================================================================
--- src/app/customer/order-list/order-list.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/customer/order-list/order-list.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderListComponent } from './order-list.component';
+
+describe('OrderListComponent', () => {
+  let component: OrderListComponent;
+  let fixture: ComponentFixture<OrderListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OrderListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OrderListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/customer/order-list/order-list.component.ts
===================================================================
--- src/app/customer/order-list/order-list.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/customer/order-list/order-list.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-order-list',
+  imports: [],
+  templateUrl: './order-list.component.html',
+  styleUrl: './order-list.component.css'
+})
+export class OrderListComponent {
+
+}
Index: src/app/driver/driver-dashboard/driver-dashboard.component.html
===================================================================
--- src/app/driver/driver-dashboard/driver-dashboard.component.html	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/driver/driver-dashboard/driver-dashboard.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,1 +1,1 @@
-<p>driver-dashboard works!</p>
+<app-navbar></app-navbar>
Index: src/app/driver/driver-dashboard/driver-dashboard.component.ts
===================================================================
--- src/app/driver/driver-dashboard/driver-dashboard.component.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/driver/driver-dashboard/driver-dashboard.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
+import { NavbarComponent } from '../../navbar/navbar.component';
 
 @Component({
   selector: 'app-driver-dashboard',
-  imports: [],
+  imports: [NavbarComponent],
   templateUrl: './driver-dashboard.component.html',
-  styleUrl: './driver-dashboard.component.css'
+  styleUrl: './driver-dashboard.component.css',
 })
-export class DriverDashboardComponent {
-
-}
+export class DriverDashboardComponent {}
Index: src/app/manager/inventory-table/inventory-table.component.html
===================================================================
--- src/app/manager/inventory-table/inventory-table.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/manager/inventory-table/inventory-table.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,1 @@
+<p>inventory-table works!</p>
Index: src/app/manager/inventory-table/inventory-table.component.spec.ts
===================================================================
--- src/app/manager/inventory-table/inventory-table.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/manager/inventory-table/inventory-table.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InventoryTableComponent } from './inventory-table.component';
+
+describe('InventoryTableComponent', () => {
+  let component: InventoryTableComponent;
+  let fixture: ComponentFixture<InventoryTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InventoryTableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InventoryTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/manager/inventory-table/inventory-table.component.ts
===================================================================
--- src/app/manager/inventory-table/inventory-table.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/manager/inventory-table/inventory-table.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-inventory-table',
+  imports: [],
+  templateUrl: './inventory-table.component.html',
+  styleUrl: './inventory-table.component.css'
+})
+export class InventoryTableComponent {
+
+}
Index: src/app/manager/manager-dashboard/manager-dashboard.component.html
===================================================================
--- src/app/manager/manager-dashboard/manager-dashboard.component.html	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/manager/manager-dashboard/manager-dashboard.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,1 +1,1 @@
-<p>manager-dashboard works!</p>
+<app-navbar></app-navbar>
Index: src/app/manager/manager-dashboard/manager-dashboard.component.ts
===================================================================
--- src/app/manager/manager-dashboard/manager-dashboard.component.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/manager/manager-dashboard/manager-dashboard.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
+import { NavbarComponent } from '../../navbar/navbar.component';
 
 @Component({
   selector: 'app-manager-dashboard',
-  imports: [],
+  imports: [NavbarComponent],
   templateUrl: './manager-dashboard.component.html',
-  styleUrl: './manager-dashboard.component.css'
+  styleUrl: './manager-dashboard.component.css',
 })
-export class ManagerDashboardComponent {
-
-}
+export class ManagerDashboardComponent {}
Index: src/app/manager/vehicle-status/vehicle-status.component.html
===================================================================
--- src/app/manager/vehicle-status/vehicle-status.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/manager/vehicle-status/vehicle-status.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,1 @@
+<p>vehicle-status works!</p>
Index: src/app/manager/vehicle-status/vehicle-status.component.spec.ts
===================================================================
--- src/app/manager/vehicle-status/vehicle-status.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/manager/vehicle-status/vehicle-status.component.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VehicleStatusComponent } from './vehicle-status.component';
+
+describe('VehicleStatusComponent', () => {
+  let component: VehicleStatusComponent;
+  let fixture: ComponentFixture<VehicleStatusComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VehicleStatusComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VehicleStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
Index: src/app/manager/vehicle-status/vehicle-status.component.ts
===================================================================
--- src/app/manager/vehicle-status/vehicle-status.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/manager/vehicle-status/vehicle-status.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-vehicle-status',
+  imports: [],
+  templateUrl: './vehicle-status.component.html',
+  styleUrl: './vehicle-status.component.css'
+})
+export class VehicleStatusComponent {
+
+}
Index: src/app/navbar/navbar.component.css
===================================================================
--- src/app/navbar/navbar.component.css	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/navbar/navbar.component.css	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,3 @@
+.navbar-nav .nav-link {
+  margin-right: 1rem;
+}
Index: src/app/navbar/navbar.component.html
===================================================================
--- src/app/navbar/navbar.component.html	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/navbar/navbar.component.html	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,27 +1,101 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">My App</a>
-    <div class="collapse navbar-collapse">
+    <a class="navbar-brand" routerLink="/">DistributorApp</a>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#nav"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="nav">
       <ul class="navbar-nav ms-auto">
-        <li *ngIf="userRole === 'CUSTOMER'" class="nav-item">
-          <a class="nav-link" routerLink="/customer/dashboard"
-            >Customer Dashboard</a
-          >
-        </li>
-        <li *ngIf="userRole === 'MANAGER'" class="nav-item">
-          <a class="nav-link" routerLink="/manager/dashboard"
-            >Manager Dashboard</a
-          >
-        </li>
-        <li *ngIf="userRole === 'DRIVER'" class="nav-item">
-          <a class="nav-link" routerLink="/driver/dashboard"
-            >Driver Dashboard</a
-          >
-        </li>
-        <li *ngIf="userRole === 'ADMIN'" class="nav-item">
-          <a class="nav-link" routerLink="/admin/dashboard">Admin Dashboard</a>
-        </li>
+        <!-- Customer -->
+        <ng-container *ngIf="userRole === 'ROLE_CUSTOMER'">
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/customer/home">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/customer/orders">My Orders</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/customer/proformas"
+              >My Pro-Formas</a
+            >
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/customer/create-order"
+              >Create Order</a
+            >
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/customer/profile">Profile</a>
+          </li>
+        </ng-container>
+        <!-- Manager -->
+        <ng-container *ngIf="userRole === 'ROLE_MANAGER'">
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/manager/home">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/manager/warehouse">My Warehouse</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/manager/create-delivery"
+              >Create Delivery</a
+            >
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/manager/profile">Profile</a>
+          </li>
+        </ng-container>
+        <!-- Driver -->
+        <ng-container *ngIf="userRole === 'ROLE_DRIVER'">
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/driver/home">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/driver/profile">Profile</a>
+          </li>
+        </ng-container>
+        <!-- Admin -->
+        <ng-container *ngIf="userRole === 'ROLE_ADMIN'">
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+              >Create</a
+            >
+            <ul class="dropdown-menu">
+              <li>
+                <a class="dropdown-item" routerLink="/admin/driver/add"
+                  >Driver</a
+                >
+              </li>
+              <li>
+                <a class="dropdown-item" routerLink="/admin/manager/add"
+                  >Manager</a
+                >
+              </li>
+              <li>
+                <a class="dropdown-item" routerLink="/admin/warehouse/add"
+                  >Warehouse</a
+                >
+              </li>
+              <li>
+                <a class="dropdown-item" routerLink="/admin/vehicle/add"
+                  >Vehicle</a
+                >
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/admin/reports">Reports</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/admin/profile">Profile</a>
+          </li>
+        </ng-container>
         <li class="nav-item">
-          <a class="nav-link" (click)="logout()">Logout</a>
+          <a class="nav-link text-danger" (click)="logout()">Logout</a>
         </li>
       </ul>
Index: src/app/navbar/navbar.component.ts
===================================================================
--- src/app/navbar/navbar.component.ts	(revision 8de78e14457855e4e19bb1c23b30fdd8446c7183)
+++ src/app/navbar/navbar.component.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -1,23 +1,25 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../auth/auth.service';
-import { Router } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-navbar',
-  imports: [],
+  imports: [CommonModule, RouterModule],
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.css',
 })
 export class NavbarComponent implements OnInit {
-  role: string | null = null;
+  userRole: string | null = null;
 
   constructor(private authService: AuthService, private router: Router) {}
 
   ngOnInit() {
-    this.role = this.authService.getRole();
+    this.userRole = localStorage.getItem('role');
   }
 
   logout() {
     localStorage.removeItem('jwtToken');
+    localStorage.removeItem('role');
     this.router.navigate(['/login']);
   }
Index: src/app/services/admin.service.spec.ts
===================================================================
--- src/app/services/admin.service.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/services/admin.service.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AdminService } from './admin.service';
+
+describe('AdminService', () => {
+  let service: AdminService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AdminService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
Index: src/app/services/admin.service.ts
===================================================================
--- src/app/services/admin.service.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/services/admin.service.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,39 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdminService {
+  constructor(private http: HttpClient) {}
+
+  addDriver(data: any): Observable<any> {
+    return this.http.post<{ token: string }>(
+      `${environment.apiUrl}/admin/create-driver`,
+      data
+    );
+  }
+
+  addManager(data: any): Observable<any> {
+    return this.http.post<{ token: string }>(
+      `${environment.apiUrl}/admin/create-manager`,
+      data
+    );
+  }
+
+  addWarehouse(data: any): Observable<any> {
+    return this.http.post<{ token: string }>(
+      `${environment.apiUrl}/admin/create-warehouse`,
+      data
+    );
+  }
+
+  addVehicle(data: any): Observable<any> {
+    return this.http.post<{ token: string }>(
+      `${environment.apiUrl}/admin/create-vehicle`,
+      data
+    );
+  }
+}
Index: src/app/services/storage.service.spec.ts
===================================================================
--- src/app/services/storage.service.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/services/storage.service.spec.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StorageService } from './storage.service';
+
+describe('StorageService', () => {
+  let service: StorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
Index: src/app/services/storage.service.ts
===================================================================
--- src/app/services/storage.service.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
+++ src/app/services/storage.service.ts	(revision a06ddbe11299c978028d0fd2a9863f92a3f8cca4)
@@ -0,0 +1,29 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StorageService {
+  private isBrowser: boolean;
+
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
+    this.isBrowser = isPlatformBrowser(this.platformId);
+  }
+
+  get(key: string): string | null {
+    return this.isBrowser ? localStorage.getItem(key) : null;
+  }
+
+  set(key: string, value: string) {
+    if (this.isBrowser) {
+      localStorage.setItem(key, value);
+    }
+  }
+
+  remove(key: string) {
+    if (this.isBrowser) {
+      localStorage.removeItem(key);
+    }
+  }
+}