Index: src/app/manager/create-delivery/create-delivery.component.css
===================================================================
--- src/app/manager/create-delivery/create-delivery.component.css	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/manager/create-delivery/create-delivery.component.css	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -0,0 +1,108 @@
+.container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.orders-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.order-card {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.order-card:hover {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.order-card.unavailable {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+}
+
+.order-card.selected {
+  border-color: #007bff;
+  background-color: #f8f9fa;
+}
+
+.order-hover-details {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.order-card:hover .order-hover-details {
+  display: block;
+}
+
+.missing-articles {
+  color: #dc3545;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #dee2e6;
+}
+
+.delivery-form {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.delivery-form.enabled {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+button[type="submit"] {
+  width: 100%;
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button[type="submit"]:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
Index: src/app/manager/create-delivery/create-delivery.component.html
===================================================================
--- src/app/manager/create-delivery/create-delivery.component.html	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/manager/create-delivery/create-delivery.component.html	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -1,1 +1,87 @@
-<p>create-delivery works!</p>
+<app-navbar></app-navbar>
+
+<div class="container">
+  <h2>Create New Delivery</h2>
+
+  <div class="orders-section">
+    <h3>Available Orders</h3>
+    <div class="orders-grid">
+      @for (order of undeliveredOrders; track order.id) {
+        <div class="order-card" 
+             [class.unavailable]="!order.isAvailable"
+             [class.selected]="selectedOrders.includes(order)"
+             (click)="toggleOrderSelection(order)">
+          
+          <div class="order-header">
+            <span>Order #{{order.id}}</span>
+            <span>{{order.createdAt | date}}</span>
+          </div>
+
+          <div class="order-details">
+            <p><strong>Customer:</strong> {{order.customerName}}</p>
+            <p><strong>Total:</strong> {{order.ordSum| currency}}</p>
+          </div>
+
+          <div class="order-hover-details">
+            <h4>Delivery Address:</h4>
+            <p>{{order.deliveryAddress}}</p>
+
+            <h4>Articles:</h4>
+            <ul>
+              @for (article of order.articles; track article.id) {
+                <li>
+                  {{article.name}} - {{article.quantity}} units
+                  ({{article.price | currency}}/unit)
+                </li>
+              }
+            </ul>
+
+            @if (!order.isAvailable) {
+              <div class="missing-articles">
+                <h4>Missing Articles:</h4>
+                <ul>
+                  @for (article of order.missingArticles; track article.id) {
+                    <li>
+                      {{article.name}} - Need: {{article.quantity}}, 
+                      Available: {{warehouseStock[article.id]?.quantity || 0}}
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+
+  <div class="delivery-form" [class.enabled]="selectedOrders.length > 0">
+    <h3>Delivery Details</h3>
+    <form [formGroup]="form" (ngSubmit)="createDelivery()">
+      <div class="form-group">
+        <label for="deliveryDate">Delivery Date</label>
+        <input type="date" 
+               id="deliveryDate" 
+               formControlName="deliveryDate"
+               [min]="today">
+      </div>
+
+      <div class="form-group">
+        <label for="driver">Select Driver</label>
+        <select id="driver" formControlName="driverId">
+          <option value="">Select a driver...</option>
+          @for (driver of drivers; track driver.id) {
+            <option [value]="driver.id">
+              {{driver.name}}
+            </option>
+          }
+        </select>
+      </div>
+
+      <button type="submit" 
+              [disabled]="form.invalid || !selectedOrders.length">
+        Create Delivery
+      </button>
+    </form>
+  </div>
+</div>
Index: src/app/manager/create-delivery/create-delivery.component.ts
===================================================================
--- src/app/manager/create-delivery/create-delivery.component.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/manager/create-delivery/create-delivery.component.ts	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -1,11 +1,105 @@
 import { Component } from '@angular/core';
+import { Article, Order } from '../../models';
+import { ManagerService } from '../../services/manager.service';
+import { OrderService } from '../../services/order.service';
+import { Delivery } from '../../models/delivery.model';
+import { NavbarComponent } from '../../navbar/navbar.component';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Driver } from '../../models/driver.model';
 
 @Component({
   selector: 'app-create-delivery',
-  imports: [],
+  imports: [NavbarComponent, CommonModule, ReactiveFormsModule],
   templateUrl: './create-delivery.component.html',
   styleUrl: './create-delivery.component.css'
 })
 export class CreateDeliveryComponent {
+  form!: FormGroup;
+  undeliveredOrders: Order[] = [];
+  selectedOrders: Order[] = [];
+  deliveryDate: Date | null = null;
+  driverName: string = '';
+  delivery: Delivery | null = null;
+  drivers: Driver[] = [];
+  warehouseStock: { [articleId: string]: { quantity: number } } = {};
 
+  constructor(
+    private orderSvc: OrderService,
+    private fb: FormBuilder,
+    private router: Router,
+    private managerSvc: ManagerService
+  ){}
+
+  ngOnInit() {
+    this.initForm();
+    this.loadData();
+  }
+
+  private initForm(){
+    this.form = this.fb.group({
+      deliveryDate: ['', Validators.required],
+      driverId: ['', Validators.required]
+    })
+  }
+
+  private loadData(){
+    this.orderSvc.getUnassignedOrdersForWarehouse().subscribe(orders => {
+      this.undeliveredOrders = orders;
+    });
+
+    this.managerSvc.getAvailableDrivers(this.deliveryDate).subscribe(drivers => {
+      this.drivers = drivers;
+    });
+  }
+
+  isOrderAvailable(order: Order): boolean {
+    // TODO: Implement order item article list so we can check if all articles are available in the warehouse
+    // return order.articles.every(article=> this.warehouseStock[article.id]?.quantity >= article.quantity)
+    return false;
+  }
+
+  getMissingArticles(order: Order): Article[]{
+    return order.articles.filter(article=> !this.warehouseStock[article.id] ||
+      this.warehouseStock[article.id].quantity < article.quantity
+    );
+  }
+
+  toggleOrderSelection(order: Order){
+    if (!this.isOrderAvailable(order)) return;
+
+    const index = this.selectedOrders.indexOf(order);
+    if(index===-1){
+      this.selectedOrders.push(order);
+    }else{
+      this.selectedOrders.splice(index,1);
+    }
+  }
+
+  createDelivery(){
+    if(this.form.invalid || !this.selectedOrders.length) return;
+
+    const delivery: Delivery = {
+      orders: this.selectedOrders.map(o=>o.id),
+      driverId: this.form.get('driverId')?.value,
+      delDate: this.form.get('deliveryDate')?.value,
+      delStatus: 'pending'
+    };
+
+    this.managerSvc.createDelivery(delivery).subscribe({
+      next: () => {
+        alert('Delivery created successfully');
+        this.router.navigate(['/manager/deliveries']);
+      },
+      error: () => alert('Failed to create delivery')
+    });
+  }
+
+  private checkOrdersAvailability(){
+    this.undeliveredOrders.forEach(order => {
+      order.isAvailable = this.isOrderAvailable(order);
+      order.missingArticles = this.getMissingArticles(order);
+    });
+  }
 }
Index: src/app/models/delivery.model.ts
===================================================================
--- src/app/models/delivery.model.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/models/delivery.model.ts	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -3,3 +3,5 @@
     driverName: string;
     delStatus: string;
+    orders: number[];
+    driverId: number;
 }
Index: src/app/models/driver.model.ts
===================================================================
--- src/app/models/driver.model.ts	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
+++ src/app/models/driver.model.ts	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -0,0 +1,9 @@
+export interface Driver {
+    id: number;
+    name: string;
+    phone: string;
+    vehicle: string;
+    licensePlate: string;
+    available: boolean;
+    rating?: number; // Optional field for driver rating
+}
Index: src/app/models/order.model.ts
===================================================================
--- src/app/models/order.model.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/models/order.model.ts	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -9,3 +9,5 @@
   deliveryId: number;
   pfId: number;
+  isAvailable?: boolean;
+  missingArticles?: any[];
 }
Index: src/app/navbar/navbar.component.html
===================================================================
--- src/app/navbar/navbar.component.html	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/navbar/navbar.component.html	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -2,13 +2,6 @@
   <div class="container-fluid">
     <a class="navbar-brand" routerLink="/">DistributorApp</a>
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#nav"
-      aria-controls="nav"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav"
+      aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -25,12 +18,8 @@
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/customer/deliveries"
-              >My Deliveries</a
-            >
+            <a class="nav-link" routerLink="/customer/deliveries">My Deliveries</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/customer/proformas"
-              >My Pro-Formas</a
-            >
+            <a class="nav-link" routerLink="/customer/proformas">My Pro-Formas</a>
           </li>
           <li class="nav-item">
@@ -38,7 +27,5 @@
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/customer/orders/create"
-              >Create Order</a
-            >
+            <a class="nav-link" routerLink="/customer/orders/create">Create Order</a>
           </li>
         </ng-container>
@@ -53,7 +40,5 @@
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/manager/deliveries"
-              >All Deliveries</a
-            >
+            <a class="nav-link" routerLink="/manager/deliveries">All Deliveries</a>
           </li>
           <li class="nav-item">
@@ -67,7 +52,5 @@
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/manager/create-delivery">
-              Create Delivery
-            </a>
+            <a class="nav-link" routerLink="/manager/create-delivery">Create Delivery</a>
           </li>
           <li class="nav-item">
@@ -89,33 +72,20 @@
         <ng-container *ngIf="userRole === 'ROLE_ADMIN'">
           <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              id="createDropdown"
-              role="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
+            <a class="nav-link dropdown-toggle" id="createDropdown" role="button" data-bs-toggle="dropdown"
+              aria-expanded="false">
               Create
             </a>
             <ul class="dropdown-menu" aria-labelledby="createDropdown">
               <li>
-                <a class="dropdown-item" routerLink="/admin/driver/add"
-                  >Driver</a
-                >
+                <a class="dropdown-item" routerLink="/admin/driver/add">Driver</a>
               </li>
               <li>
-                <a class="dropdown-item" routerLink="/admin/manager/add"
-                  >Manager</a
-                >
+                <a class="dropdown-item" routerLink="/admin/manager/add">Manager</a>
               </li>
               <li>
-                <a class="dropdown-item" routerLink="/admin/warehouse/add"
-                  >Warehouse</a
-                >
+                <a class="dropdown-item" routerLink="/admin/warehouse/add">Warehouse</a>
               </li>
               <li>
-                <a class="dropdown-item" routerLink="/admin/vehicle/add"
-                  >Vehicle</a
-                >
+                <a class="dropdown-item" routerLink="/admin/vehicle/add">Vehicle</a>
               </li>
             </ul>
Index: src/app/services/manager.service.ts
===================================================================
--- src/app/services/manager.service.ts	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/services/manager.service.ts	(revision 5a242bb9f206cf4618c68e66b017b86c2bd64eb2)
@@ -4,4 +4,5 @@
 import { environment } from '../../environment';
 import { Manager } from '../models/manager.model';
+import { Driver } from '../models/driver.model';
 
 @Injectable({
@@ -9,5 +10,5 @@
 })
 export class ManagerService {
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
 
   getProfile(): Observable<Manager> {
@@ -30,3 +31,9 @@
     );
   }
+
+  getAvailableDrivers(deliveryDate: Date | null) {
+    return this.http.get<Driver[]>(`${environment.apiUrl}/manager/drivers/available`, {
+      params: { deliveryDate: deliveryDate ? deliveryDate.toISOString() : '' },
+    });
+  }
 }