Jakob Wennberg
d0c0d8a7d2
- Move Reports to Finans nav group and auto-expand Övrigt on its pages - Make report tabs horizontally scrollable with gradient fade on mobile - Surface deadlines and alerts above the fold on dashboard - Add dismissible categorization hint card on transactions page - Split settings company form into 4 separate Cards for scannability - Add monthly breakdown report, document upload zone, journal entry attachments - Add batch category selector, receipt document linking, invoice form improvements Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
export interface MonthlyDataPoint {
|
|
label: string
|
|
income: number
|
|
expenses: number
|
|
}
|
|
|
|
interface IncomeExpenseChartProps {
|
|
months: MonthlyDataPoint[]
|
|
}
|
|
|
|
export function IncomeExpenseChart({ months }: IncomeExpenseChartProps) {
|
|
if (months.length === 0) return null
|
|
|
|
return (
|
|
<Card className="mb-4">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-base">Intäkter vs Kostnader per månad</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart
|
|
data={months}
|
|
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
|
<XAxis dataKey="label" tick={{ fontSize: 12 }} />
|
|
<YAxis
|
|
tickFormatter={(v) => new Intl.NumberFormat('sv-SE', { notation: 'compact' }).format(v)}
|
|
/>
|
|
<Tooltip
|
|
formatter={(value, name) => [
|
|
new Intl.NumberFormat('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Number(value)) + ' kr',
|
|
name === 'income' ? 'Intäkter' : 'Kostnader',
|
|
]}
|
|
/>
|
|
<Legend
|
|
formatter={(value) => (value === 'income' ? 'Intäkter' : 'Kostnader')}
|
|
/>
|
|
<Bar dataKey="income" fill="hsl(var(--chart-1))" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="expenses" fill="hsl(var(--chart-2))" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|