+ {/* CENTER: global search lives IN the 1fr grid track so it is
+ bounded by the left (back-button) and right (actions) columns
+ and can never overlap them. The previous approach absolutely
+ positioned the bar at viewport-center, which ignored the side
+ columns and crowded the "New" button at narrower widths
+ (UAT 2026-06-03). `mx-auto` keeps it visually centered within
+ the available middle space; `max-w-xl` stops it sprawling on
+ wide screens; `min-w-0` lets it shrink rather than push the
+ side columns. The grid `gap-3` guarantees breathing room from
+ both neighbours. */}
+
diff --git a/src/components/reports/financial/financial-report-client.tsx b/src/components/reports/financial/financial-report-client.tsx
index a6f3e90d..44cce635 100644
--- a/src/components/reports/financial/financial-report-client.tsx
+++ b/src/components/reports/financial/financial-report-client.tsx
@@ -3,20 +3,7 @@
import { useMemo, useState, useCallback } from 'react';
import { useSearchParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
-import {
- Bar,
- BarChart,
- CartesianGrid,
- Cell,
- Line,
- LineChart,
- Pie,
- PieChart,
- ResponsiveContainer,
- Tooltip,
- XAxis,
- YAxis,
-} from 'recharts';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { PageHeader } from '@/components/shared/page-header';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -35,6 +22,10 @@ import type { Route } from 'next';
import { Wallet } from 'lucide-react';
// ─── Payload types (mirror the /api/v1/reports/financial response) ───────────
+// NOTE: the API still returns expense/cash-flow/net-contribution fields; we
+// deliberately omit them here. Expenses are business-trip costs tracked in the
+// standalone Expenses section and do NOT factor into the financial picture, so
+// the Financial report is purely revenue / deposits / collections.
interface FinancialKpis {
revenueCollected: number;
@@ -43,8 +34,6 @@ interface FinancialKpis {
refundsIssued: number;
pipelineExpected: number;
expectedDepositsOutstanding: number;
- expensesTotal: number;
- netContribution: number;
currency: string;
}
interface RevenueByMonthRow {
@@ -62,15 +51,6 @@ interface AgingRow {
count: number;
value: number;
}
-interface CashFlowRow {
- month: string;
- inflow: number;
- outflow: number;
-}
-interface ExpenseBreakdownRow {
- category: string;
- total: number;
-}
interface OutstandingDepositRow {
interestId: string;
clientName: string;
@@ -98,16 +78,6 @@ interface RefundRow {
currency: string;
notes: string | null;
}
-interface ExpenseLedgerRow {
- id: string;
- expenseDate: string;
- payer: string | null;
- category: string | null;
- establishmentName: string | null;
- amount: number;
- currency: string;
- paymentStatus: string | null;
-}
interface FinancialPayload {
data: {
@@ -115,12 +85,9 @@ interface FinancialPayload {
revenueByMonth: RevenueByMonthRow[];
collectionFunnel: CollectionFunnelRow[];
aging: AgingRow[];
- cashFlow: CashFlowRow[];
- expenseBreakdown: ExpenseBreakdownRow[];
outstandingDeposits: OutstandingDepositRow[];
recentPayments: RecentPaymentRow[];
refundLog: RefundRow[];
- expenseLedger: ExpenseLedgerRow[];
range: { from: string; to: string };
hasData: boolean;
};
@@ -133,15 +100,6 @@ interface FinancialTemplateConfig extends Record
{
type MonthGranularity = 'month' | 'quarter' | 'year';
-const DONUT_COLORS = [
- 'hsl(var(--chart-1))',
- 'hsl(var(--chart-3))',
- 'hsl(var(--chart-4))',
- 'hsl(var(--chart-5))',
- 'hsl(var(--chart-2))',
- 'hsl(var(--chart-6))',
-];
-
export function FinancialReportClient({ portSlug }: { portSlug: string }) {
const searchParams = useSearchParams();
const initialTemplateId = searchParams?.get('templateId') ?? null;
@@ -181,11 +139,9 @@ export function FinancialReportClient({ portSlug }: { portSlug: string }) {
const revenueByMonth = d?.revenueByMonth ?? [];
const collectionFunnel = d?.collectionFunnel ?? [];
const aging = d?.aging ?? [];
- const expenseBreakdown = d?.expenseBreakdown ?? [];
const outstandingDeposits = d?.outstandingDeposits ?? [];
const recentPayments = d?.recentPayments ?? [];
const refundLog = d?.refundLog ?? [];
- const expenseLedger = d?.expenseLedger ?? [];
// Re-bucket the monthly revenue series for the quarter/year toggle.
// Depend on the query-data reference (stable across renders once
@@ -195,17 +151,13 @@ export function FinancialReportClient({ portSlug }: { portSlug: string }) {
() => rebucketRevenue(d?.revenueByMonth ?? [], granularity),
[d?.revenueByMonth, granularity],
);
- const cashFlowSeries = useMemo(
- () => (d?.cashFlow ?? []).map((r) => ({ ...r, label: formatMonthLabel(r.month) })),
- [d?.cashFlow],
- );
const fundedCount = collectionFunnel.length > 0 ? collectionFunnel[0]!.count : 0;
function buildExportPayload(): ReportPayload {
if (!kpis) throw new Error('Report still loading');
return {
title: 'Financial',
- description: 'Revenue collected, deposits, outstanding, cash flow, and expenses.',
+ description: 'Revenue collected, deposits, outstanding balances, and collections.',
filenameSlug: 'financial',
range: bounds,
kpis: [
@@ -220,8 +172,6 @@ export function FinancialReportClient({ portSlug }: { portSlug: string }) {
label: 'Outstanding deposits',
value: formatMoney(kpis.expectedDepositsOutstanding, currency),
},
- { label: 'Expenses', value: formatMoney(kpis.expensesTotal, currency) },
- { label: 'Net contribution', value: formatMoney(kpis.netContribution, currency) },
],
sections: [
{
@@ -252,23 +202,6 @@ export function FinancialReportClient({ portSlug }: { portSlug: string }) {
daysOutstanding: r.daysOutstanding,
})),
},
- {
- title: 'Expense ledger',
- columns: [
- { key: 'expenseDate', label: 'Date' },
- { key: 'category', label: 'Category' },
- { key: 'payer', label: 'Payer' },
- { key: 'amount', label: 'Amount', align: 'right' },
- { key: 'paymentStatus', label: 'Status' },
- ],
- rows: expenseLedger.map((r) => ({
- expenseDate: r.expenseDate ? r.expenseDate.slice(0, 10) : '—',
- category: r.category ?? '—',
- payer: r.payer ?? '—',
- amount: formatMoney(r.amount, r.currency),
- paymentStatus: r.paymentStatus ?? '—',
- })),
- },
],
};
}
@@ -281,14 +214,14 @@ export function FinancialReportClient({ portSlug }: { portSlug: string }) {
);
@@ -299,7 +232,7 @@ export function FinancialReportClient({ portSlug }: { portSlug: string }) {