Jakob Wennberg
b800dcd403
* style(ui): system-wide UX/UI polish pass — design-system conformance + copy cleanup Multi-agent scan of all 404 UI files against the locked design system, then 141 verified surgical fixes across 109 files (net -32 lines): - Remove forbidden elevation/motion: shadow-* and rounded-xl on cards, active:scale bounce, hover:shadow on list items, transition-all -> transition-colors. - Drop font-medium from single-weight Hedvig display headings/numerals. - Replace raw rainbow Tailwind status colors with Badge variants / brand tokens / neutral surfaces (achromatic chrome, semantic colors stay data-only). - Route raw dates through formatDate(), hand-rolled currency through formatCurrency(), add tabular-nums to financial figures; text-gray-* -> text-foreground tokens. - Swap hand-rolled skeletons for the Skeleton primitive; off-scale spacing -> token scale. - Fix copy: mislabeled "Leverantörsfakturor" -> "Utgifter" on bank-import outflow total, collapse no-op identical-branch ternaries, broken Swedish diacritics (mojibake), correct mismatch-password toast, correct supplier currency-field label. - Remove PII-leaking debug console.log on register, stray console.logs. Verified: tsc clean on all changed files, eslint clean, production build passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(auth): sanitize residual error logs in register flow Follow-up to PR review (compliance swarm V16 / GDPR Art.5(1)(f)): the remaining console.error calls in the register flow passed raw error objects, which Supabase may populate with PII (email) in nested fields. Log only sanitized message strings instead. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
|
} from '@/components/ui/table'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface MonthlyRow {
|
|
month: string
|
|
value: number
|
|
label?: string
|
|
}
|
|
|
|
interface MonthlyTrendTableProps {
|
|
rows: MonthlyRow[]
|
|
valueLabel?: string
|
|
valueSuffix?: string
|
|
formatValue?: (v: number) => string
|
|
className?: string
|
|
}
|
|
|
|
export default function MonthlyTrendTable({
|
|
rows,
|
|
valueLabel = 'Belopp',
|
|
valueSuffix = 'kr',
|
|
formatValue,
|
|
className,
|
|
}: MonthlyTrendTableProps) {
|
|
if (rows.length === 0) {
|
|
return (
|
|
<div className={cn('rounded-lg border p-6 text-center text-sm text-muted-foreground', className)}>
|
|
Ingen data att visa
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const maxValue = Math.max(...rows.map(r => Math.abs(r.value)), 1)
|
|
const fmt = formatValue ?? ((v: number) => v.toLocaleString('sv-SE'))
|
|
|
|
return (
|
|
<div className={cn('rounded-lg border', className)}>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Period</TableHead>
|
|
<TableHead className="text-right">{valueLabel}</TableHead>
|
|
<TableHead className="w-[40%]"></TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{rows.map((row) => {
|
|
const barWidth = Math.round((Math.abs(row.value) / maxValue) * 100)
|
|
return (
|
|
<TableRow key={row.month}>
|
|
<TableCell className="font-medium">{row.label ?? row.month}</TableCell>
|
|
<TableCell className="text-right tabular-nums">
|
|
{fmt(row.value)} {valueSuffix}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="h-4 w-full rounded-sm bg-muted overflow-hidden">
|
|
<div
|
|
className="h-full rounded-sm bg-primary/60 transition-all"
|
|
style={{ width: `${barWidth}%` }}
|
|
/>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)
|
|
}
|