Index: src/app/manager/manager-dashboard/manager-dashboard.component.html
===================================================================
--- src/app/manager/manager-dashboard/manager-dashboard.component.html	(revision 071c0cfd44048f99bc048d46b7faaa971c683f4b)
+++ src/app/manager/manager-dashboard/manager-dashboard.component.html	(revision 66463aa0612ffb5aa6e04cca7472ec1fb307db7a)
@@ -1,40 +1,51 @@
 <app-navbar></app-navbar>
-<h2>New Orders</h2>
-<table class="table">
-  <thead>
-    <tr>
-      <th>Order #</th>
-      <th>Customer</th>
-      <th>Date</th>
-      <th>Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let order of unassignedOrders">
-      <td>{{ order.id }}</td>
-      <!-- <td>{{ order.customerName }}</td>
-      <td>{{ order.date | date }}</td>
-      <td>{{ order.status }}</td> -->
-    </tr>
-  </tbody>
-</table>
 
-<h2>Active Deliveries</h2>
-<table class="table">
-  <thead>
-    <tr>
-      <th>Delivery #</th>
-      <th>Driver</th>
-      <th>Status</th>
-      <th>Orders</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let delivery of activeDeliveries">
-      <!-- <td>{{ delivery.id }}</td> -->
-      <td>{{ delivery.driverName }}</td>
-      <!-- <td>{{ delivery.status }}</td> -->
-      <!-- <td>{{ delivery.orderCount }}</td> -->
-    </tr>
-  </tbody>
-</table>
+<div class="container mt-4">
+  <h1 class="mb-4">Manager Dashboard</h1>
+
+  <div class="row">
+    <div class="col-md-6">
+      <h2>New Orders</h2>
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>Order #</th>
+            <th>Customer</th>
+            <th>Date</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let order of unassignedOrders">
+            <td>{{ order.id }}</td>
+            <!-- <td>{{ order.customerName }}</td>
+            <td>{{ order.date | date: "shortDate" }}</td>
+            <td>{{ order.status }}</td> -->
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="col-md-6">
+      <h2>Active Deliveries</h2>
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>Delivery #</th>
+            <th>Driver</th>
+            <th>Status</th>
+            <th>Orders</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let delivery of activeDeliveries">
+            <!-- <td>{{ delivery.id }}</td> -->
+            <td>{{ delivery.driverName }}</td>
+            <!-- <td>{{ delivery.status }}</td>
+            <td>{{ delivery.orderCount }}</td> -->
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
Index: src/app/manager/manager-finances/manager-finances.component.html
===================================================================
--- src/app/manager/manager-finances/manager-finances.component.html	(revision 071c0cfd44048f99bc048d46b7faaa971c683f4b)
+++ src/app/manager/manager-finances/manager-finances.component.html	(revision 66463aa0612ffb5aa6e04cca7472ec1fb307db7a)
@@ -89,27 +89,3 @@
     </div>
   </section>
-
-  <section class="create-pro-forma">
-    <h3>Create New Pro-Forma</h3>
-    <form [formGroup]="proFormaForm" (ngSubmit)="createProForma()">
-      <div class="form-group">
-        <label for="ordId">Order ID</label>
-        <input id="ordId" type="number" formControlName="ordId">
-      </div>
-
-      <div class="form-group">
-        <label for="customerId">Customer ID</label>
-        <input id="customerId" type="number" formControlName="customerId">
-      </div>
-
-      <div class="form-group">
-        <label for="pfDeadline">Deadline</label>
-        <input id="pfDeadline" type="date" formControlName="pfDeadline">
-      </div>
-
-      <button type="submit" [disabled]="proFormaForm.invalid">
-        Create Pro-Forma
-      </button>
-    </form>
-  </section>
 </div>
Index: src/app/manager/manager-finances/manager-finances.component.ts
===================================================================
--- src/app/manager/manager-finances/manager-finances.component.ts	(revision 071c0cfd44048f99bc048d46b7faaa971c683f4b)
+++ src/app/manager/manager-finances/manager-finances.component.ts	(revision 66463aa0612ffb5aa6e04cca7472ec1fb307db7a)
@@ -2,13 +2,13 @@
 import { NavbarComponent } from '../../navbar/navbar.component';
 import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { ProForma } from '../../models/pro-forma.model';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { FinancialSummary } from '../../models/financial-summary.model';
 import { ManagerService } from '../../services/manager.service';
 import { ProFormaResponseDto } from '../../models/pro-forma-dtos.model';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-manager-finances',
-  imports: [NavbarComponent, CommonModule, ReactiveFormsModule],
+  imports: [NavbarComponent, CommonModule, FormsModule, ReactiveFormsModule],
   templateUrl: './manager-finances.component.html',
   styleUrl: './manager-finances.component.css'
@@ -26,21 +26,14 @@
   selectedPeriod: 'monthly' | 'quarterly' = 'monthly';
 
+  orderIdForProForma: number | null = null;
+  isCreatingProForma: boolean = false;
+  proFormaCreationStatus: { success: boolean; message?: string } | null = null;
+
   constructor(
-    private managerService: ManagerService,
-    private fb: FormBuilder
-  ) {
-    this.initForm();
-  }
+    private managerService: ManagerService
+  ) { }
 
   ngOnInit() {
     this.loadData();
-  }
-
-  private initForm() {
-    this.proFormaForm = this.fb.group({
-      orderId: ['', Validators.required],
-      dueDate: ['', Validators.required],
-      notes: ['']
-    });
   }
 
@@ -81,19 +74,36 @@
   }
 
-  createProForma() {
-    if (this.proFormaForm.valid) {
-      this.managerService.createProForma(this.proFormaForm.value).subscribe({
-        next: () => {
-          this.loadData();
-          this.proFormaForm.reset();
-        },
-        error: (err) => console.error('Error creating pro-forma:', err)
-      });
-    }
-  }
-
   togglePeriod() {
     this.selectedPeriod = this.selectedPeriod === 'monthly' ? 'quarterly' : 'monthly';
     this.loadFinancialSummaries();
   }
+
+  createProForma() {
+    if (!this.orderIdForProForma) return;
+
+    this.isCreatingProForma = true;
+    this.proFormaCreationStatus = null;
+
+    this.managerService.createProForma(this.orderIdForProForma).subscribe({
+      next: (response) => {
+        this.isCreatingProForma = false;
+        this.proFormaCreationStatus = { success: true };
+        this.orderIdForProForma = null;
+
+        this.loadFinancialSummaries();
+
+        setTimeout(() => {
+          this.proFormaCreationStatus = null;
+        }, 3000);
+      },
+      error: (error) => {
+        this.isCreatingProForma = false;
+        this.proFormaCreationStatus = {
+          success: false,
+          message: error.error?.message || 'Failed to create pro-forma'
+        };
+      }
+    });
+
+  }
 }
Index: src/app/models/pro-forma-dtos.model.ts
===================================================================
--- src/app/models/pro-forma-dtos.model.ts	(revision 071c0cfd44048f99bc048d46b7faaa971c683f4b)
+++ src/app/models/pro-forma-dtos.model.ts	(revision 66463aa0612ffb5aa6e04cca7472ec1fb307db7a)
@@ -1,6 +1,4 @@
 export interface CreateProFormaDto{
-    pfDeadline: string;
     ordId: number;
-    customerId: number;
 }
 
@@ -21,2 +19,14 @@
     daysOverdue?: number;
 }
+
+export interface ProForma {
+    id: number;
+    orderId: number;
+    amount: number;
+    dueDate: Date;
+    status: 'pending' | 'paid' | 'overdue';
+    isPaid: boolean;
+    isCreated: boolean;
+    daysOverdue?: number;
+    notes?: string;
+}
Index: c/app/models/pro-forma.model.ts
===================================================================
--- src/app/models/pro-forma.model.ts	(revision 071c0cfd44048f99bc048d46b7faaa971c683f4b)
+++ 	(revision )
@@ -1,11 +1,0 @@
-export interface ProForma {
-    id: number;
-    orderId: number;
-    amount: number;
-    dueDate: Date;
-    status: 'pending' | 'paid' | 'overdue';
-    isPaid: boolean;
-    isCreated: boolean;
-    daysOverdue?: number;
-    notes?: string;
-}
Index: src/app/services/manager.service.ts
===================================================================
--- src/app/services/manager.service.ts	(revision 071c0cfd44048f99bc048d46b7faaa971c683f4b)
+++ src/app/services/manager.service.ts	(revision 66463aa0612ffb5aa6e04cca7472ec1fb307db7a)
@@ -4,7 +4,6 @@
 import { environment } from '../../environment';
 import { Manager } from '../models/manager.model';
-import { ProForma } from '../models/pro-forma.model';
 import { FinancialSummary } from '../models/financial-summary.model';
-import { ProFormaResponseDto } from '../models/pro-forma-dtos.model';
+import { ProForma, ProFormaResponseDto } from '../models/pro-forma-dtos.model';
 
 @Injectable({
@@ -46,5 +45,5 @@
   }
 
-  createProForma(proForma: Partial<ProForma>): Observable<ProFormaResponseDto>{
+  createProForma(proForma: number): Observable<ProFormaResponseDto>{
     return this.http.post<ProFormaResponseDto>(`${environment.apiUrl}/manager/pro-formas`, proForma);
   }