Index: src/app/manager/manager-finances/manager-finances.component.html
===================================================================
--- src/app/manager/manager-finances/manager-finances.component.html	(revision f27b9bd1eae3d0e2777a2174a7841080cadee74e)
+++ src/app/manager/manager-finances/manager-finances.component.html	(revision 1862457f735286235f284fbb0f384d7b1d14c246)
@@ -38,5 +38,5 @@
   <section class="pro-forma-tables">
     <div class="table-container">
-      <h3>Unpaid Pro-Formas</h3>
+      <h3>Unpaid Pro-Formas ({{unpaidProFormas.length}})</h3>
       <table>
         <thead>
@@ -53,8 +53,8 @@
             <tr>
               <td>{{proForma.id}}</td>
-              <td>{{proForma.orderId}}</td>
+              <td>{{proForma.ordId}}</td>
               <td>{{proForma.amount | currency}}</td>
-              <td>{{proForma.dueDate | date}}</td>
-              <td>{{proForma.status}}</td>
+              <td>{{proForma.pfDeadline | date}}</td>
+              <td>{{proForma.statusName}}</td>
             </tr>
           }
@@ -64,5 +64,5 @@
 
     <div class="table-container">
-      <h3>Overdue Pro-Formas</h3>
+      <h3>Overdue Pro-Formas ({{overdueProFormas.length}})</h3>
       <table>
         <thead>
@@ -77,10 +77,10 @@
         <tbody>
           @for (proForma of overdueProFormas; track proForma.id) {
-            <tr>
+            <tr class="overdue">
               <td>{{proForma.id}}</td>
-              <td>{{proForma.orderId}}</td>
+              <td>{{proForma.ordId}}</td>
               <td>{{proForma.amount | currency}}</td>
-              <td>{{proForma.dueDate | date}}</td>
-              <td>{{proForma.daysOverdue}}</td>
+              <td>{{proForma.pfDeadline | date}}</td>
+              <td class="days-overdue">{{proForma.daysOverdue}}</td>
             </tr>
           }
@@ -94,16 +94,16 @@
     <form [formGroup]="proFormaForm" (ngSubmit)="createProForma()">
       <div class="form-group">
-        <label for="orderId">Order ID</label>
-        <input id="orderId" type="text" formControlName="orderId">
+        <label for="ordId">Order ID</label>
+        <input id="ordId" type="number" formControlName="ordId">
       </div>
 
       <div class="form-group">
-        <label for="dueDate">Due Date</label>
-        <input id="dueDate" type="date" formControlName="dueDate">
+        <label for="customerId">Customer ID</label>
+        <input id="customerId" type="number" formControlName="customerId">
       </div>
 
       <div class="form-group">
-        <label for="notes">Notes</label>
-        <textarea id="notes" formControlName="notes"></textarea>
+        <label for="pfDeadline">Deadline</label>
+        <input id="pfDeadline" type="date" formControlName="pfDeadline">
       </div>
 
Index: src/app/manager/manager-finances/manager-finances.component.ts
===================================================================
--- src/app/manager/manager-finances/manager-finances.component.ts	(revision f27b9bd1eae3d0e2777a2174a7841080cadee74e)
+++ src/app/manager/manager-finances/manager-finances.component.ts	(revision 1862457f735286235f284fbb0f384d7b1d14c246)
@@ -6,4 +6,5 @@
 import { FinancialSummary } from '../../models/financial-summary.model';
 import { ManagerService } from '../../services/manager.service';
+import { ProFormaResponseDto } from '../../models/pro-forma-dtos.model';
 
 @Component({
@@ -14,8 +15,8 @@
 })
 export class ManagerFinancesComponent {
-  allProFormas: ProForma[] = [];
-  unpaidProFormas: ProForma[] = [];
-  pendingProFormas: ProForma[] = [];
-  overdueProFormas: ProForma[] = [];
+  allProFormas: ProFormaResponseDto[] = [];
+  unpaidProFormas: ProFormaResponseDto[] = [];
+  pendingProFormas: ProFormaResponseDto[] = [];
+  overdueProFormas: ProFormaResponseDto[] = [];
 
   monthlySummary: FinancialSummary | null = null;
@@ -28,13 +29,13 @@
     private managerService: ManagerService,
     private fb: FormBuilder
-  ){
+  ) {
     this.initForm();
   }
 
-  ngOnInit(){
+  ngOnInit() {
     this.loadData();
   }
 
-  private initForm(){
+  private initForm() {
     this.proFormaForm = this.fb.group({
       orderId: ['', Validators.required],
@@ -44,7 +45,7 @@
   }
 
-  private loadData(){
+  private loadData() {
     this.managerService.getAllProFormas().subscribe({
-      next: (data: ProForma[])=>{
+      next: (data: ProFormaResponseDto[]) => {
         this.allProFormas = data;
         this.categorizeProFormas();
@@ -56,15 +57,15 @@
   }
 
-  private categorizeProFormas(){
+  private categorizeProFormas() {
     const now = new Date();
 
-    this.unpaidProFormas = this.allProFormas.filter(pf=>!pf.isPaid);
-    this.pendingProFormas = this.allProFormas.filter(pf=>!pf.isCreated);
-    this.overdueProFormas = this.allProFormas.filter(pf=> 
-      !pf.isPaid && new Date(pf.dueDate)<now
+    this.unpaidProFormas = this.allProFormas.filter(pf => pf.statusName == 'UNPAID');
+    this.pendingProFormas = this.allProFormas.filter(pf => pf.statusName == 'PENDING');
+    this.overdueProFormas = this.allProFormas.filter(pf =>
+      pf.statusName == 'UNPAID' && new Date(pf.pfDeadline) < now
     );
   }
 
-  loadFinancialSummaries(){
+  loadFinancialSummaries() {
     if (this.selectedPeriod === 'monthly') {
       this.managerService.getMonthlyFinancialSummary().subscribe({
@@ -80,5 +81,5 @@
   }
 
-  createProForma(){
+  createProForma() {
     if (this.proFormaForm.valid) {
       this.managerService.createProForma(this.proFormaForm.value).subscribe({
Index: src/app/models/pro-forma-dtos.model.ts
===================================================================
--- src/app/models/pro-forma-dtos.model.ts	(revision 1862457f735286235f284fbb0f384d7b1d14c246)
+++ src/app/models/pro-forma-dtos.model.ts	(revision 1862457f735286235f284fbb0f384d7b1d14c246)
@@ -0,0 +1,19 @@
+export interface CreateProFormaDto{
+    pfDeadline: string;
+    ordId: number;
+    customerId: number;
+}
+
+export interface ProFormaResponseDto {
+    id: number;
+    pfDeadline: string;
+    pfDateCreated: string;
+    statusId: number;
+    statusName: string;
+    ordId: number;
+    customerId: number;
+    customerName: string;
+    customerEmail: string;
+    customerPhone: string;
+    daysOverdue?: number;
+}
Index: src/app/services/manager.service.ts
===================================================================
--- src/app/services/manager.service.ts	(revision f27b9bd1eae3d0e2777a2174a7841080cadee74e)
+++ src/app/services/manager.service.ts	(revision 1862457f735286235f284fbb0f384d7b1d14c246)
@@ -6,4 +6,5 @@
 import { ProForma } from '../models/pro-forma.model';
 import { FinancialSummary } from '../models/financial-summary.model';
+import { ProFormaResponseDto } from '../models/pro-forma-dtos.model';
 
 @Injectable({
@@ -33,6 +34,6 @@
   }
 
-  getAllProFormas(): Observable<ProForma[]> {
-    return this.http.get<ProForma[]>(`${environment.apiUrl}/manager/pro-formas`);
+  getAllProFormas(): Observable<ProFormaResponseDto[]> {
+    return this.http.get<ProFormaResponseDto[]>(`${environment.apiUrl}/manager/pro-formas`);
   }
 
@@ -45,6 +46,6 @@
   }
 
-  createProForma(proForma: Partial<ProForma>): Observable<ProForma>{
-    return this.http.post<ProForma>(`${environment.apiUrl}/manager/pro-formas`, proForma);
+  createProForma(proForma: Partial<ProForma>): Observable<ProFormaResponseDto>{
+    return this.http.post<ProFormaResponseDto>(`${environment.apiUrl}/manager/pro-formas`, proForma);
   }
 }