a7dcaac6ad
The KPI payload has carried income, expenses and net per month since the aggregates RPC, but after the Recharts trend chart was dropped only the net column was rendered (the bars pane). A fiscal year's month-by-month sums were therefore fetched and never shown (#2196). - New components/kpi/KPIMonthsTable.tsx: full-width dry table (Manad, Intakter, Kostnader, Resultat) with the period totals as the last row, rendered between the panes and the cost story. Rows and totals come from the pure helper components/kpi/months-table.ts. - New preference showMonthlyTable (default true) on KPIPreferences: filled by mergeWithDefaults on read, accepted by the preferences route, sent whole by the dialog, required by readPreferencesBody. A boolean, not a KPI_DEFINITIONS id: stored kpiOrder arrays would hide a new id for every existing company. - One Switch row in the Anpassa dialog after the KPI list. - Reuses the orphaned kpi.trend_* keys; adds months_col_month, months_total and the two settings keys in sv and en. - Tests: helper rows/totals/inactive flags, defaults + merge, route accepts false and rejects a string; fixtures updated for the new field. Closes #2196 Claude-Session: https://claude.ai/code/session_0179bdetHyofL6ATfQxB5wP5 Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
import { TH_CLASS, TD_CLASS } from '@/components/ui/dry-table'
|
|
import { cn, formatCurrency } from '@/lib/utils'
|
|
import type { KPIReport } from '@/types'
|
|
import { monthsTableRows } from './months-table'
|
|
|
|
/**
|
|
* Income, expenses and net result month by month for the selected fiscal
|
|
* year, with the period totals as the last row (#2196). Full width like
|
|
* KPIBreakdown: the bars pane only has room for the net column, and this
|
|
* table is where the two other columns the payload already carries show.
|
|
*/
|
|
export function KPIMonthsTable({ report }: { report: KPIReport }) {
|
|
const t = useTranslations('kpi')
|
|
if (report.months.length === 0) return null
|
|
const { rows, total } = monthsTableRows(report)
|
|
const numeric = 'whitespace-nowrap text-right tabular-nums'
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-1 flex items-center gap-3 px-1">
|
|
<h2 className="text-xs uppercase tracking-wider text-muted-foreground">
|
|
{t('trend_title')}
|
|
</h2>
|
|
<div className="h-px flex-1 bg-border/60" />
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse text-[13px]">
|
|
<thead>
|
|
<tr>
|
|
<th className={cn(TH_CLASS, 'w-full')}>{t('months_col_month')}</th>
|
|
<th className={cn(TH_CLASS, 'text-right')}>{t('trend_legend_income')}</th>
|
|
<th className={cn(TH_CLASS, 'text-right')}>{t('trend_legend_expenses')}</th>
|
|
<th className={cn(TH_CLASS, 'text-right')}>{t('trend_legend_net')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((m) => (
|
|
<tr key={m.label} className={cn(m.inactive && 'text-muted-foreground/60')}>
|
|
<td className={cn(TD_CLASS, 'whitespace-nowrap')}>{m.label}</td>
|
|
<td className={cn(TD_CLASS, numeric)}>{formatCurrency(m.income)}</td>
|
|
<td className={cn(TD_CLASS, numeric)}>{formatCurrency(m.expenses)}</td>
|
|
<td className={cn(TD_CLASS, numeric, m.net < 0 && !m.inactive && 'text-destructive')}>
|
|
{formatCurrency(m.net)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr className="font-medium">
|
|
<td className={cn(TD_CLASS, 'border-b-0 whitespace-nowrap')}>{t('months_total')}</td>
|
|
<td className={cn(TD_CLASS, 'border-b-0', numeric)}>{formatCurrency(total.income)}</td>
|
|
<td className={cn(TD_CLASS, 'border-b-0', numeric)}>{formatCurrency(total.expenses)}</td>
|
|
<td className={cn(TD_CLASS, 'border-b-0', numeric, total.net < 0 && 'text-destructive')}>
|
|
{formatCurrency(total.net)}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|