'use client'; import { useState } from 'react'; import FinanceLayout from '../../../components/FinanceLayout'; const BRAND = '#B22698'; interface BudgetProposal { id: string; dept: string; category: string; amount: number; requestedBy: string; submittedOn: string; purpose: string; status: 'Pending' | 'Approved' | 'Rejected'; approvedOn?: string; remarks?: string; } const INITIAL_BUDGETS: BudgetProposal[] = [ { id: 'BG001', dept: 'ICT', category: 'Software Licenses', amount: 450000, requestedBy: 'David Njoroge', submittedOn: '2026-04-10', purpose: 'Annual renewal of enterprise software licenses for development tools.', status: 'Pending' }, { id: 'BG002', dept: 'Finance', category: 'Staff Training', amount: 180000, requestedBy: 'James Omondi', submittedOn: '2026-04-12', purpose: 'CPA training for 3 finance staff members.', status: 'Pending' }, { id: 'BG003', dept: 'HR', category: 'Recruitment', amount: 95000, requestedBy: 'Susan Kariuki', submittedOn: '2026-04-08', purpose: 'Recruitment campaign for 2 vacant positions.', status: 'Approved', approvedOn: '2026-04-14', remarks: 'Approved as per HR plan 2026.' }, { id: 'BG004', dept: 'Operations', category: 'Equipment', amount: 320000, requestedBy: 'Mary Ndungu', submittedOn: '2026-04-15', purpose: 'Replacement of 4 desktop computers and 2 printers.', status: 'Pending' }, { id: 'BG005', dept: 'ICT', category: 'Infrastructure', amount: 750000, requestedBy: 'David Njoroge', submittedOn: '2026-03-28', purpose: 'Network upgrade and new server procurement.', status: 'Approved', approvedOn: '2026-04-05', remarks: 'Approved. Procurement to follow procurement guidelines.' }, { id: 'BG006', dept: 'Finance', category: 'Audit Services', amount: 200000, requestedBy: 'James Omondi', submittedOn: '2026-04-01', purpose: 'External audit for Q1 2026 financial review.', status: 'Rejected', approvedOn: '2026-04-10', remarks: 'Covered under existing annual audit contract.' }, { id: 'BG007', dept: 'Operations', category: 'Vehicle Maintenance', amount: 115000, requestedBy: 'Mary Ndungu', submittedOn: '2026-04-18', purpose: 'Scheduled service for 3 department vehicles.', status: 'Pending' }, ]; export default function FinanceBudgetsPage() { const [budgets, setBudgets] = useState(INITIAL_BUDGETS); const [toast, setToast] = useState(''); const [approveModal, setApproveModal] = useState(null); const [rejectModal, setRejectModal] = useState(null); const [remarks, setRemarks] = useState(''); const [previewLetter, setPreviewLetter] = useState(null); const [statusFilter, setStatusFilter] = useState('Pending'); const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3500); }; const handleApprove = () => { if (!approveModal) return; setBudgets(prev => prev.map(b => b.id === approveModal ? { ...b, status: 'Approved' as const, approvedOn: new Date().toISOString().split('T')[0], remarks } : b)); setApproveModal(null); setRemarks(''); showToast('Budget proposal approved. Approval letter can now be generated.'); }; const handleReject = () => { if (!rejectModal || !remarks) return; setBudgets(prev => prev.map(b => b.id === rejectModal ? { ...b, status: 'Rejected' as const, approvedOn: new Date().toISOString().split('T')[0], remarks } : b)); setRejectModal(null); setRemarks(''); showToast('Budget proposal rejected.'); }; const downloadLetter = (b: BudgetProposal) => { const letterHtml = ` Budget Approval Letter - ${b.id}
UWEZO FUND
Empowering Communities Through Financial Inclusion
P.O. Box 12345-00100, Nairobi, Kenya | finance@uwezo.go.ke | +254 700 000 000
Ref: UF/FIN/BUDGET/${b.id}/${new Date().getFullYear()}
Date: ${b.approvedOn || new Date().toISOString().split('T')[0]}
To: ${b.requestedBy}
Department: ${b.dept}
Uwezo Fund
RE: BUDGET APPROVAL LETTER — ${b.category.toUpperCase()} (${b.id})

Dear ${b.requestedBy.split(' ')[0]},

I write to inform you that your budget proposal referenced ${b.id} for the ${b.dept} Department has been reviewed by the Finance Office and has been APPROVED as detailed below.

Proposal Reference${b.id}
Department${b.dept}
Budget Category${b.category}
Approved AmountKES ${b.amount.toLocaleString()}
Purpose${b.purpose}
Date Submitted${b.submittedOn}
Date Approved${b.approvedOn}
Finance Remarks${b.remarks || 'Approved as submitted.'}
✓ APPROVED

You are hereby authorized to proceed with the expenditure of KES ${b.amount.toLocaleString()} for the stated purpose. Please ensure all expenditures are supported by appropriate documentation and comply with Uwezo Fund's Financial Regulations and Procurement Guidelines.

Kindly note that this approval is subject to the following conditions:

  1. All procurement must follow the Public Procurement and Asset Disposal Act, 2015.
  2. Expenditure must be within the approved amount. Any variation requires fresh approval.
  3. Supporting documents (LPOs, invoices, receipts) must be submitted to Finance within 30 days.
  4. This approval is valid for the current financial year only.

For any clarifications, please contact the Finance Office.

Yours faithfully,

Catherine Waweru
Finance Officer
Uwezo Fund
finance@uwezo.go.ke
This is an official document generated by Uwezo Fund HRMS v2.0 · ${new Date().toLocaleString()} · Ref: ${b.id}
`; const blob = new Blob([letterHtml], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `Budget-Approval-Letter-${b.id}-${b.dept}.html`; a.click(); URL.revokeObjectURL(url); showToast(`Approval letter for ${b.id} downloaded successfully.`); }; const filtered = statusFilter === 'All' ? budgets : budgets.filter(b => b.status === statusFilter); const pendingCount = budgets.filter(b => b.status === 'Pending').length; const approvedCount = budgets.filter(b => b.status === 'Approved').length; const totalApprovedAmount = budgets.filter(b => b.status === 'Approved').reduce((s, b) => s + b.amount, 0); return ( {toast && (
{toast}
)}

Department Budget Proposals

Review, approve/reject proposals and generate official approval letters

{pendingCount > 0 && (
{pendingCount} proposals awaiting decision
)}

{pendingCount}

Pending Review

{approvedCount}

Approved

KES {totalApprovedAmount.toLocaleString()}

Total Approved Amount

{['Pending', 'All', 'Approved', 'Rejected'].map(s => ( ))}
{filtered.map(b => ( ))}
Proposal Dept Category Amount (KES) Purpose Status Actions

{b.id}

{b.submittedOn} · {b.requestedBy}

 {b.dept} {b.category} {b.amount.toLocaleString()} {b.purpose} {b.status} {b.approvedOn &&

{b.approvedOn}

} 		{b.status === 'Pending' ? (
) : b.status === 'Approved' ? (
) : ( {b.remarks} )}
{approveModal && (

Approve Budget Proposal

An approval letter will be generated after approval