Index: src/app/manager/manager-finances/manager-finances.component.css
===================================================================
--- src/app/manager/manager-finances/manager-finances.component.css	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/manager/manager-finances/manager-finances.component.css	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
@@ -0,0 +1,108 @@
+.finances-container {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.financial-summary {
+  margin-bottom: 40px;
+}
+
+.period-toggle {
+  margin-bottom: 20px;
+}
+
+.period-toggle button {
+  padding: 8px 16px;
+  margin-right: 10px;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+}
+
+.period-toggle button.active {
+  background: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.summary-card {
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: white;
+}
+
+.table-container {
+  margin-bottom: 30px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+  background: white;
+}
+
+th, td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: #f8f9fa;
+  font-weight: 600;
+}
+
+tr:hover {
+  background-color: #f5f5f5;
+}
+
+.create-pro-forma {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: white;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group textarea {
+  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/manager-finances/manager-finances.component.html
===================================================================
--- src/app/manager/manager-finances/manager-finances.component.html	(revision abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/manager/manager-finances/manager-finances.component.html	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
@@ -1,1 +1,115 @@
-<p>manager-finances works!</p>
+<app-navbar></app-navbar>
+
+<div class="finances-container">
+  <section class="financial-summary">
+    <h2>Financial Overview</h2>
+    <div class="period-toggle">
+      <button [class.active]="selectedPeriod === 'monthly'" 
+              (click)="selectedPeriod = 'monthly'; loadFinancialSummaries()">
+        Monthly View
+      </button>
+      <button [class.active]="selectedPeriod === 'quarterly'"
+              (click)="selectedPeriod = 'quarterly'; loadFinancialSummaries()">
+        Quarterly View
+      </button>
+    </div>
+
+    <div class="summary-cards">
+      @if (selectedPeriod === 'monthly') {
+        <div class="summary-card">
+          <h3>Monthly Summary</h3>
+          <p>Total Sales: {{monthlySummary?.totalSales | currency}}</p>
+          <p>Total Expenses: {{monthlySummary?.totalExpenses | currency}}</p>
+          <p>Profit: {{monthlySummary?.profit | currency}}</p>
+          <p>Growth: {{monthlySummary?.growth}}%</p>
+        </div>
+      } @else {
+        <div class="summary-card">
+          <h3>Quarterly Summary</h3>
+          <p>Total Sales: {{quarterlySummary?.totalSales | currency}}</p>
+          <p>Total Expenses: {{quarterlySummary?.totalExpenses | currency}}</p>
+          <p>Profit: {{quarterlySummary?.profit | currency}}</p>
+          <p>Growth: {{quarterlySummary?.growth}}%</p>
+        </div>
+      }
+    </div>
+  </section>
+
+  <section class="pro-forma-tables">
+    <div class="table-container">
+      <h3>Unpaid Pro-Formas</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Order ID</th>
+            <th>Amount</th>
+            <th>Due Date</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (proForma of unpaidProFormas; track proForma.id) {
+            <tr>
+              <td>{{proForma.id}}</td>
+              <td>{{proForma.orderId}}</td>
+              <td>{{proForma.amount | currency}}</td>
+              <td>{{proForma.dueDate | date}}</td>
+              <td>{{proForma.status}}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <div class="table-container">
+      <h3>Overdue Pro-Formas</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Order ID</th>
+            <th>Amount</th>
+            <th>Due Date</th>
+            <th>Days Overdue</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (proForma of overdueProFormas; track proForma.id) {
+            <tr>
+              <td>{{proForma.id}}</td>
+              <td>{{proForma.orderId}}</td>
+              <td>{{proForma.amount | currency}}</td>
+              <td>{{proForma.dueDate | date}}</td>
+              <td>{{proForma.daysOverdue}}</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <section class="create-pro-forma">
+    <h3>Create New Pro-Forma</h3>
+    <form [formGroup]="proFormaForm" (ngSubmit)="createProForma()">
+      <div class="form-group">
+        <label for="orderId">Order ID</label>
+        <input id="orderId" type="text" formControlName="orderId">
+      </div>
+
+      <div class="form-group">
+        <label for="dueDate">Due Date</label>
+        <input id="dueDate" type="date" formControlName="dueDate">
+      </div>
+
+      <div class="form-group">
+        <label for="notes">Notes</label>
+        <textarea id="notes" formControlName="notes"></textarea>
+      </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 abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/manager/manager-finances/manager-finances.component.ts	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
@@ -1,11 +1,98 @@
 import { Component } from '@angular/core';
+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 { FinancialSummary } from '../../models/financial-summary.model';
+import { ManagerService } from '../../services/manager.service';
 
 @Component({
   selector: 'app-manager-finances',
-  imports: [],
+  imports: [NavbarComponent, CommonModule, ReactiveFormsModule],
   templateUrl: './manager-finances.component.html',
   styleUrl: './manager-finances.component.css'
 })
 export class ManagerFinancesComponent {
+  allProFormas: ProForma[] = [];
+  unpaidProFormas: ProForma[] = [];
+  pendingProFormas: ProForma[] = [];
+  overdueProFormas: ProForma[] = [];
 
+  monthlySummary: FinancialSummary | null = null;
+  quarterlySummary: FinancialSummary | null = null;
+
+  proFormaForm!: FormGroup;
+  selectedPeriod: 'monthly' | 'quarterly' = 'monthly';
+
+  constructor(
+    private managerService: ManagerService,
+    private fb: FormBuilder
+  ){
+    this.initForm();
+  }
+
+  ngOnInit(){
+    this.loadData();
+  }
+
+  private initForm(){
+    this.proFormaForm = this.fb.group({
+      orderId: ['', Validators.required],
+      dueDate: ['', Validators.required],
+      notes: ['']
+    });
+  }
+
+  private loadData(){
+    this.managerService.getAllProFormas().subscribe({
+      next: (data: ProForma[])=>{
+        this.allProFormas = data;
+        this.categorizeProFormas();
+      },
+      error: (err: string) => console.error('Error loading pro-formas:', err)
+    });
+
+    this.loadFinancialSummaries();
+  }
+
+  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
+    );
+  }
+
+  loadFinancialSummaries(){
+    if (this.selectedPeriod === 'monthly') {
+      this.managerService.getMonthlyFinancialSummary().subscribe({
+        next: (data) => this.monthlySummary = data,
+        error: (err) => console.error('Error loading monthly summary:', err)
+      });
+    } else {
+      this.managerService.getQuarterlyFinancialSummary().subscribe({
+        next: (data) => this.quarterlySummary = data,
+        error: (err) => console.error('Error loading quarterly summary:', err)
+      });
+    }
+  }
+
+  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();
+  }
 }
Index: src/app/models/financial-summary.model.ts
===================================================================
--- src/app/models/financial-summary.model.ts	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
+++ src/app/models/financial-summary.model.ts	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
@@ -0,0 +1,8 @@
+export interface FinancialSummary {
+    totalSales: number;
+    totalExpenses: number;
+    profit: number;
+    growth: number;
+    periodStart: Date;
+    periodEnd: Date;
+}
Index: src/app/models/pro-forma.model.ts
===================================================================
--- src/app/models/pro-forma.model.ts	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
+++ src/app/models/pro-forma.model.ts	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
@@ -0,0 +1,11 @@
+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 abba9c46a849f23a223518410c0a60ab06fb9295)
+++ src/app/services/manager.service.ts	(revision 3a093afe40aa175c0909dbc4dd2f6d48cdd890d7)
@@ -4,4 +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';
 
 @Injectable({
@@ -30,3 +32,19 @@
     );
   }
+
+  getAllProFormas(): Observable<ProForma[]> {
+    return this.http.get<ProForma[]>(`${environment.apiUrl}/manager/pro-formas`);
+  }
+
+  getMonthlyFinancialSummary(): Observable<FinancialSummary>{
+    return this.http.get<FinancialSummary>(`${environment.apiUrl}/manager/finances/monthly`);
+  }
+
+  getQuarterlyFinancialSummary(): Observable<FinancialSummary>{
+    return this.http.get<FinancialSummary>(`${environment.apiUrl}/manager/finances/quarterly`)
+  }
+
+  createProForma(proForma: Partial<ProForma>): Observable<ProForma>{
+    return this.http.post<ProForma>(`${environment.apiUrl}/manager/pro-formas`, proForma);
+  }
 }