admin/accounted
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): design-system consistency pass over dense pages + i18n de-bloat (#961)

Browse Source 
* refactor(ui): normalize dense pages to the locked design system

Sweep of the info-dense surfaces against .claude/rules/design.md; no
behavior changes, classNames and primitive adoption only.

- Replace hand-rolled h1s with PageHeader (import, suppliers, kpi,
  salary/employees, skattekonto, settings layout) and drop the one
  double title (SalarySettingsContent under the settings h1)
- Replace hand-rolled empty states with EmptyState (skattekonto,
  banking/api-keys/oauth/counterparty settings) and hand-rolled
  pulse divs with Skeleton (deadlines, report view loaders)
- Remove semantic colors used as chrome: amber/emerald banners in
  AGIPanel and SkatteverketPanel, success/warning tints in
  kassaflodesanalys, arsredovisning and import become neutral
  surfaces with the tint kept on the icon only
- Full-opacity borders everywhere (border-border/30-60,
  border-destructive/20-40, border-foreground/30, text-destructive/80)
- Snap off-scale spacing (p-5 to p-6, p-2.5 to p-3, gap/mt-x.5 to
  scale values); KPI metric tiles p-6 to p-4 per the tile rule
- Remove the mobile Select that duplicated the invoices status Tabs
  (TabsList already scrolls horizontally); single Tabs now serves
  both breakpoints
- supplier-invoices: shared formatCurrency instead of a local
  formatAmount helper; skattekonto: formatDate/formatDateLong/
  formatDateTime instead of raw dates and toLocaleString
- arsredovisning flerarsoversikt converted to the Table primitive
  with right-aligned tabular-nums cells
- Settings: CardTitle text-base on section cards, one heading idiom
  in AccountSettingsContent, h3 to h2 in CompanyProfileView

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* refactor(i18n): trim text bloat and fix an untranslated sv string

- Fix invoice_credit.create_failed_fallback: sv catalog carried the
  English "Failed to create credit note"; now "Kunde inte skapa
  kreditfaktura". Translate new_user_checklist.step3_title in en
- Drop descriptions that paraphrase their own title (design.md
  forbidden pattern): invoice_detail.credited_description,
  invoice_credit.original_card_description, invoice_editor
  customer/notes card descriptions (keys deleted from both
  catalogs, zero remaining usages); the transaction booking
  DialogDescription becomes sr-only so screen readers keep it
- Trim redundant sentences from settings_salary.info_payroll_scope,
  settings_backup.intro, ext_cloud_backup_long_description,
  settings.name_description, salary_payments.open_payments_note and
  shorten invoice_credit.reason_card_description; statutory BFL/tax
  prose untouched
- Normalize toast punctuation (dimensions/self_billing
  created_description lose the trailing period like their siblings)
- common.delete "Radera" to "Ta bort" (zero live call sites; Radera
  stays reserved for irreversible account/company deletion)

Catalogs verified key-identical (4795 keys each) and JSON-parseable.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-07-10 08:56:30 +02:00
committed by GitHub
co-authored by Claude Fable 5
parent ca8a89324c
commit da859d7236
41 changed files with 373 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/bookkeeping/[id]/page.tsx
+1 -1
View File
@@ -339,7 +339,7 @@ export default function JournalEntryDetailPage({ params }: { params: Promise<{ i
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="space-y-1">
<div className="flex items-center gap-2 flex-wrap">
<h1 className="font-display text-2xl md:text-3xl tracking-tight font-mono">
<h1 className="text-2xl md:text-3xl tracking-tight font-mono">
{formatVoucher(entry)}
</h1>
<JournalEntryStatusBadge entry={entry} />
app/(dashboard)/bookkeeping/year-end/arsredovisning/page.tsx
+37 -35
View File
@@ -10,9 +10,11 @@ import { Skeleton } from '@/components/ui/skeleton'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { PageHeader } from '@/components/ui/page-header'
import { ArrowLeft, FileDown, Plus, ExternalLink, Loader2, Save, CheckCircle2 } from 'lucide-react'
import { useToast } from '@/components/ui/use-toast'
import { formatCurrency } from '@/lib/utils'
import { FiscalYearSelector } from '@/components/common/FiscalYearSelector'
import { DigitalInlamning, INLAMNING_COMING_SOON } from '@/components/bokslut/DigitalInlamning'
import type { ArsredovisningData } from '@/lib/bokslut/arsredovisning/types'
@@ -388,7 +390,7 @@ export default function ArsredovisningPage() {
</p>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-description">Verksamhetsbeskrivning</Label>
<Textarea
id="ar-description"
@@ -397,7 +399,7 @@ export default function ArsredovisningPage() {
rows={3}
/>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-events">Väsentliga händelser</Label>
<Textarea
id="ar-events"
@@ -406,7 +408,7 @@ export default function ArsredovisningPage() {
rows={4}
/>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-rd">Resultatdisposition</Label>
<Textarea
id="ar-rd"
@@ -415,7 +417,7 @@ export default function ArsredovisningPage() {
rows={3}
/>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-agm-date">Datum för årsstämma</Label>
<Input
id="ar-agm-date"
@@ -440,7 +442,7 @@ export default function ArsredovisningPage() {
fält visas som &quot;Inga.&quot; i PDF:en.
</p>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-ltd">
Långfristiga skulder förfallande efter mer än fem år (kr)
</Label>
@@ -457,7 +459,7 @@ export default function ArsredovisningPage() {
ÅRL 5:13 §. Lämna tomt om inga skulder förfaller senare än fem år.
</p>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-securities">Ställda säkerheter</Label>
<Textarea
id="ar-securities"
@@ -468,7 +470,7 @@ export default function ArsredovisningPage() {
/>
<p className="text-xs text-muted-foreground">ÅRL 5:14 §.</p>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-contingent">Eventualförpliktelser</Label>
<Textarea
id="ar-contingent"
@@ -479,7 +481,7 @@ export default function ArsredovisningPage() {
/>
<p className="text-xs text-muted-foreground">ÅRL 5:15 §.</p>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-parent-name">
Moderföretag: namn (om koncerntillhörighet)
</Label>
@@ -495,7 +497,7 @@ export default function ArsredovisningPage() {
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-parent-orgnr">Moderföretagets org.nr</Label>
<Input
id="ar-parent-orgnr"
@@ -504,7 +506,7 @@ export default function ArsredovisningPage() {
placeholder="556677-8899"
/>
</div>
<div className="space-y-1.5">
<div className="space-y-2">
<Label htmlFor="ar-parent-city">Moderföretagets säte</Label>
<Input
id="ar-parent-city"
@@ -551,34 +553,34 @@ export default function ArsredovisningPage() {
<CardTitle className="text-base">Flerårsöversikt</CardTitle>
</CardHeader>
<CardContent>
<table className="w-full text-sm">
<thead>
<tr className="text-left text-xs uppercase tracking-wider text-muted-foreground border-b border-border">
<th className="py-2">År</th>
<th className="py-2 text-right">Nettoomsättning</th>
<th className="py-2 text-right">Resultat efter fin.</th>
<th className="py-2 text-right">Soliditet</th>
</tr>
</thead>
<tbody>
<Table>
<TableHeader>
<TableRow>
<TableHead>År</TableHead>
<TableHead className="text-right">Nettoomsättning</TableHead>
<TableHead className="text-right">Resultat efter fin.</TableHead>
<TableHead className="text-right">Soliditet</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.forvaltningsberattelse.flerarsoversikt.map((row) => (
<tr key={row.year} className="border-b border-border last:border-b-0">
<td className="py-2">{row.year}</td>
<td className="py-2 text-right tabular-nums">
{row.net_revenue.toLocaleString('sv-SE')}
</td>
<td className="py-2 text-right tabular-nums">
{row.result_after_financial.toLocaleString('sv-SE')}
</td>
<td className="py-2 text-right tabular-nums">
<TableRow key={row.year}>
<TableCell>{row.year}</TableCell>
<TableCell className="text-right tabular-nums">
{formatCurrency(row.net_revenue)}
</TableCell>
<TableCell className="text-right tabular-nums">
{formatCurrency(row.result_after_financial)}
</TableCell>
<TableCell className="text-right tabular-nums">
{row.soliditet_pct === null
? '-'
: `${row.soliditet_pct.toFixed(1)} %`}
</td>
</tr>
</TableCell>
</TableRow>
))}
</tbody>
</table>
</TableBody>
</Table>
</CardContent>
</Card>
@@ -709,7 +711,7 @@ export default function ArsredovisningPage() {
}
>
{data.warnings.length > 0 && (
<div className="rounded-md border border-warning/40 bg-warning/5 p-3 text-xs text-warning-foreground space-y-1">
<div className="rounded-md border border-border bg-muted/30 p-3 text-xs space-y-1">
<p className="font-medium">Innan inlämning till Bolagsverket:</p>
<ul className="list-disc pl-5 space-y-1">
{data.warnings.map((w, i) => (
@@ -718,7 +720,7 @@ export default function ArsredovisningPage() {
</ul>
</div>
)}
<div className="rounded-md border border-warning/40 bg-warning/5 p-3 text-xs text-warning-foreground">
<div className="rounded-md border border-border bg-muted/30 p-3 text-xs">
<strong>Notis om digital inlämning:</strong> Digital inlämning (iXBRL) av
årsredovisning föreslås bli obligatorisk för K2/K3-aktiebolag för
räkenskapsår som inleds efter 2025-12-31. Använd avsnittet{' '}
app/(dashboard)/deadlines/page.tsx
+11 -10
View File
@@ -8,6 +8,7 @@ import { useToast } from '@/components/ui/use-toast'
import { ToastAction } from '@/components/ui/toast'
import { DeadlineList } from '@/components/deadlines/DeadlineList'
import { PageHeader } from '@/components/ui/page-header'
import { Skeleton } from '@/components/ui/skeleton'
import { AlertTriangle, ArrowRight, CalendarClock } from 'lucide-react'
import { useCompany } from '@/contexts/CompanyContext'
import { formatCurrency } from '@/lib/utils'
@@ -204,18 +205,18 @@ export default function DeadlinesPage() {
<PageHeader title={t('title')} />
<div className="space-y-3">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="rounded-lg border p-4 animate-pulse">
<div key={i} className="rounded-lg border p-4">
<div className="flex items-center gap-4">
<div className="w-12 space-y-1">
<div className="h-5 bg-muted rounded w-8 mx-auto" />
<div className="h-3 bg-muted rounded w-6 mx-auto" />
<Skeleton className="h-5 w-8 mx-auto" />
<Skeleton className="h-3 w-6 mx-auto" />
</div>
<div className="w-px h-8 bg-muted" />
<div className="flex-1 space-y-1.5">
<div className="h-4 bg-muted rounded w-48" />
<div className="h-3 bg-muted rounded w-24" />
<Skeleton className="w-px h-8" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-48" />
<Skeleton className="h-3 w-24" />
</div>
<div className="h-4 bg-muted rounded w-16" />
<Skeleton className="h-4 w-16" />
</div>
</div>
))}
@@ -241,7 +242,7 @@ export default function DeadlinesPage() {
<CalendarClock className="h-4 w-4 text-muted-foreground flex-shrink-0" />
<p className="text-sm">
<span className="font-medium">{t('no_system_deadlines_title')}</span>
<span className="text-muted-foreground ml-1.5">
<span className="text-muted-foreground ml-2">
{t('no_system_deadlines_description')}
</span>
</p>
@@ -259,7 +260,7 @@ export default function DeadlinesPage() {
<AlertTriangle className="h-4 w-4 text-destructive flex-shrink-0" />
<p className="text-sm">
<span className="font-medium">{t('overdue_invoices', { count: overdueInvoices.count })}</span>
<span className="text-muted-foreground ml-1.5 tabular-nums">
<span className="text-muted-foreground ml-2 tabular-nums">
{formatCurrency(overdueInvoices.total)}
</span>
</p>
app/(dashboard)/import/page.tsx
+30 -35
View File
@@ -7,6 +7,8 @@ import { useTranslations } from 'next-intl'
import { Card, CardContent } from '@/components/ui/card'
import { Progress } from '@/components/ui/progress'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { PageHeader } from '@/components/ui/page-header'
import { useToast } from '@/components/ui/use-toast'
import { getErrorMessage } from '@/lib/errors/get-error-message'
import { ArrowLeftRight, ArrowRightLeft, FileText, ArrowLeft, Landmark, Loader2, Info, ChevronRight, FileSpreadsheet, Download, AlertTriangle } from 'lucide-react'
@@ -292,7 +294,7 @@ function BankFileImportWizard() {
{/* Overlap warning: active PSD2 means file import will likely create
duplicates of transactions the nightly sync already covers. */}
{activePsd2Banks.length > 0 && (
<div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/5 p-4">
<div className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-4">
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-warning" />
<div className="flex-1 text-sm">
<p className="font-medium">
@@ -2011,16 +2013,11 @@ export default function ImportPage() {
const hasMigrationExtension = ENABLED_EXTENSION_IDS.has('arcim-migration')
return (
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="font-display text-2xl md:text-3xl tracking-tight">
{view === 'export' ? t('export_title') : t('title')}
</h1>
<p className="text-muted-foreground">
{view === 'export' ? t('export_subtitle') : t('subtitle')}
</p>
</div>
<div className="space-y-8">
<PageHeader
title={view === 'export' ? t('export_title') : t('title')}
description={view === 'export' ? t('export_subtitle') : undefined}
/>
{mode === null && (
<>
@@ -2048,7 +2045,7 @@ export default function ImportPage() {
tabIndex={isSandbox ? -1 : 0}
aria-disabled={isSandbox}
className={cn(
'group flex items-start gap-4 rounded-lg border bg-card p-5 transition-colors',
'group flex items-start gap-4 rounded-lg border bg-card p-6 transition-colors',
isSandbox
? 'opacity-50 cursor-not-allowed'
: 'cursor-pointer hover:border-foreground/15'
@@ -2060,23 +2057,21 @@ export default function ImportPage() {
<Landmark className="h-[18px] w-[18px] text-foreground/60" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2.5">
<div className="flex items-center gap-2">
<h3 className="text-[15px] font-semibold leading-tight">{t('psd2_title')}</h3>
{hasBankSync ? (
<span className="text-[11px] font-medium text-success bg-success/10 px-2 py-0.5 rounded-full leading-none">
{t('psd2_recommended')}
</span>
<Badge variant="success">{t('psd2_recommended')}</Badge>
) : (
<span className="text-[11px] font-medium text-muted-foreground bg-secondary px-2 py-0.5 rounded-full leading-none">
{t('psd2_requires_subscription')}
</span>
)}
</div>
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed max-w-lg">
<p className="text-sm text-muted-foreground mt-1 leading-relaxed max-w-lg">
{t('psd2_description')}
</p>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2.5 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
</div>
)}
@@ -2087,7 +2082,7 @@ export default function ImportPage() {
tabIndex={isSandbox ? -1 : 0}
aria-disabled={isSandbox}
className={cn(
'group rounded-lg border bg-card p-5 transition-colors',
'group rounded-lg border bg-card p-6 transition-colors',
isSandbox
? 'opacity-50 cursor-not-allowed'
: 'cursor-pointer hover:border-foreground/15'
@@ -2101,13 +2096,13 @@ export default function ImportPage() {
</div>
<div className="flex-1 min-w-0">
<h3 className="text-[15px] font-semibold leading-tight">{t('migration_title')}</h3>
<p className="text-sm mt-1.5 leading-relaxed max-w-lg underline decoration-foreground/20 underline-offset-2 text-muted-foreground">
<p className="text-sm mt-1 leading-relaxed max-w-lg underline decoration-foreground/20 underline-offset-2 text-muted-foreground">
{t('migration_description')}
</p>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2.5 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
</div>
<div className="flex flex-wrap gap-2 mt-3.5 ml-[52px]">
<div className="flex flex-wrap gap-2 mt-4 ml-[52px]">
{([
{ name: 'Fortnox', logo: '/logos/fortnox.svg' },
{ name: 'Visma', logo: '/logos/visma.jpeg' },
@@ -2115,7 +2110,7 @@ export default function ImportPage() {
{ name: 'Björn Lundén', logo: '/logos/bjornlunden.png' },
{ name: 'Briox', logo: '/logos/Briox_logo.png' },
] as const).map(provider => (
<div key={provider.name} className="flex items-center gap-1.5 rounded border border-border/60 bg-muted/30 px-2 py-1">
<div key={provider.name} className="flex items-center gap-2 rounded border border-border bg-muted/30 px-2 py-1">
<img src={provider.logo} alt={provider.name} className="h-4 w-4 shrink-0 rounded-sm object-contain" />
<span className="text-[11px] font-medium text-muted-foreground">{provider.name}</span>
</div>
@@ -2133,7 +2128,7 @@ export default function ImportPage() {
role="button"
tabIndex={0}
className={cn(
'group flex items-start gap-4 rounded-lg border bg-card p-5 transition-colors',
'group flex items-start gap-4 rounded-lg border bg-card p-6 transition-colors',
'cursor-pointer hover:border-foreground/15'
)}
onClick={() => setMode('bank')}
@@ -2144,10 +2139,10 @@ export default function ImportPage() {
</div>
<div className="flex-1 min-w-0">
<h3 className="text-[15px] font-semibold leading-tight">{t('bankfile_title')}</h3>
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed max-w-lg">
<p className="text-sm text-muted-foreground mt-1 leading-relaxed max-w-lg">
{t('bankfile_description')}
</p>
<div className="flex flex-wrap gap-1.5 mt-2.5">
<div className="flex flex-wrap gap-2 mt-2">
{['CSV', 'OFX', 'SEB', 'Swedbank', 'Nordea'].map(fmt => (
<span key={fmt} className="text-[11px] text-muted-foreground/80 bg-muted/80 px-1.5 py-0.5 rounded leading-none">
{fmt}
@@ -2155,7 +2150,7 @@ export default function ImportPage() {
))}
</div>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2.5 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
</div>
{/* 4. CSV/Excel-data (ingående balanser, kunder, leverantörer) */}
@@ -2163,7 +2158,7 @@ export default function ImportPage() {
role="button"
tabIndex={0}
className={cn(
'group flex items-start gap-4 rounded-lg border bg-card p-5 transition-colors',
'group flex items-start gap-4 rounded-lg border bg-card p-6 transition-colors',
'cursor-pointer hover:border-foreground/15'
)}
onClick={() => setMode('csv_data')}
@@ -2174,10 +2169,10 @@ export default function ImportPage() {
</div>
<div className="flex-1 min-w-0">
<h3 className="text-[15px] font-semibold leading-tight">{t('csv_data_title')}</h3>
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed max-w-lg">
<p className="text-sm text-muted-foreground mt-1 leading-relaxed max-w-lg">
{t('csv_data_description')}
</p>
<div className="flex flex-wrap gap-1.5 mt-2.5">
<div className="flex flex-wrap gap-2 mt-2">
{[
{ key: 'XLSX', label: 'XLSX' },
{ key: 'CSV', label: 'CSV' },
@@ -2192,7 +2187,7 @@ export default function ImportPage() {
))}
</div>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2.5 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
</div>
{/* 5. Bokföringsdata (SIE) */}
@@ -2200,7 +2195,7 @@ export default function ImportPage() {
role="button"
tabIndex={0}
className={cn(
'group flex items-start gap-4 rounded-lg border bg-card p-5 transition-colors',
'group flex items-start gap-4 rounded-lg border bg-card p-6 transition-colors',
'cursor-pointer hover:border-foreground/15'
)}
onClick={() => setMode('sie')}
@@ -2211,10 +2206,10 @@ export default function ImportPage() {
</div>
<div className="flex-1 min-w-0">
<h3 className="text-[15px] font-semibold leading-tight">{t('sie_title')}</h3>
<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed max-w-lg">
<p className="text-sm text-muted-foreground mt-1 leading-relaxed max-w-lg">
{t('sie_description')}
</p>
<div className="flex flex-wrap gap-1.5 mt-2.5">
<div className="flex flex-wrap gap-2 mt-2">
{['SIE4', '.se'].map(fmt => (
<span key={fmt} className="text-[11px] text-muted-foreground/80 bg-muted/80 px-1.5 py-0.5 rounded leading-none">
{fmt}
@@ -2222,7 +2217,7 @@ export default function ImportPage() {
))}
</div>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2.5 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
<ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0 mt-2 transition-transform duration-150 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
</div>
</div>
</TabsContent>
app/(dashboard)/invoices/[id]/credit/page.tsx
-3
View File
@@ -179,9 +179,6 @@ export default function CreateCreditNotePage({ params }: { params: Promise<{ id:
<Card>
<CardHeader>
<CardTitle>{t('original_card_title')}</CardTitle>
<CardDescription>
{t('original_card_description')}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4 text-sm">
app/(dashboard)/invoices/[id]/page.tsx
-3
View File
@@ -1144,9 +1144,6 @@ export default function InvoiceDetailPage({ params }: { params: Promise<{ id: st
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground mb-2">
{t('credited_description')}
</p>
<Link href={`/invoices/${creditNote.id}`}>
<Button variant="outline" size="sm" className="w-full">
<ExternalLink className="mr-2 h-4 w-4" />
app/(dashboard)/invoices/page.tsx
+2 -20
View File
@@ -9,7 +9,6 @@ import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { PageHeader } from '@/components/ui/page-header'
import { Skeleton } from '@/components/ui/skeleton'
import {
@@ -222,25 +221,8 @@ export default function InvoicesPage() {
className="pl-10"
/>
</div>
{/* Mobile: dropdown select */}
<Select value={activeTab} onValueChange={setActiveTab}>
<SelectTrigger className="sm:hidden w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{t('tab_all')}</SelectItem>
<SelectItem value="unpaid">{t('tab_unpaid')}</SelectItem>
<SelectItem value="paid">{t('tab_paid')}</SelectItem>
<SelectItem value="draft">{t('tab_draft')}</SelectItem>
<SelectItem value="proforma">{t('tab_proforma')}</SelectItem>
<SelectItem value="delivery_note">{t('tab_delivery_note')}</SelectItem>
<SelectItem value="credit">{t('tab_credit')}</SelectItem>
<SelectItem value="cancelled">{t('tab_cancelled')}</SelectItem>
</SelectContent>
</Select>
{/* Desktop: tab bar */}
<Tabs value={activeTab} onValueChange={setActiveTab} className="hidden sm:block">
<TabsList>
<Tabs value={activeTab} onValueChange={setActiveTab} className="min-w-0">
<TabsList className="w-max max-w-full justify-start">
<TabsTrigger value="all">{t('tab_all')}</TabsTrigger>
<TabsTrigger value="unpaid">{t('tab_unpaid')}</TabsTrigger>
<TabsTrigger value="paid">{t('tab_paid')}</TabsTrigger>
app/(dashboard)/kpi/page.tsx
+7 -6
View File
@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react'
import { useTranslations } from 'next-intl'
import { Card, CardContent } from '@/components/ui/card'
import { Skeleton } from "@/components/ui/skeleton"
import { PageHeader } from '@/components/ui/page-header'
import { FiscalYearSelector } from '@/components/common/FiscalYearSelector'
import dynamic from 'next/dynamic'
import { KPIHeroCards } from '@/components/kpi/KPIHeroCards'
@@ -95,16 +96,16 @@ export default function KpiPage() {
return (
<div className="space-y-8">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h1 className="font-display text-2xl md:text-3xl tracking-tight">{t('title')}</h1>
<div className="flex gap-2">
<PageHeader
title={t('title')}
action={
<KPISettingsDialog
preferences={preferences}
onSave={handleSavePreferences}
saving={isSavingPrefs}
/>
</div>
</div>
}
/>
<FiscalYearSelector
value={selectedPeriod || null}
@@ -143,7 +144,7 @@ function LoadingSkeleton() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[1, 2, 3, 4].map((i) => (
<Card key={i}>
<CardContent className="p-6 space-y-2">
<CardContent className="p-4 space-y-2">
<Skeleton className="h-3 w-20" />
<Skeleton className="h-7 w-28" />
<Skeleton className="h-3 w-16" />
app/(dashboard)/pending/page.tsx
+4 -4
View File
@@ -384,11 +384,11 @@ function InvoicePreview({ data }: { data: Record<string, unknown> }) {
)}
<div className="border-t pt-2 grid grid-cols-2 gap-x-4 gap-y-1">
<span className="text-muted-foreground">Netto</span>
<span className="font-mono tabular-nums text-right">{formatCurrency(data.subtotal as number, (data.currency as string) || 'SEK')}</span>
<span className="tabular-nums text-right">{formatCurrency(data.subtotal as number, (data.currency as string) || 'SEK')}</span>
<span className="text-muted-foreground">Moms</span>
<span className="font-mono tabular-nums text-right">{formatCurrency(data.vat_amount as number, (data.currency as string) || 'SEK')}</span>
<span className="tabular-nums text-right">{formatCurrency(data.vat_amount as number, (data.currency as string) || 'SEK')}</span>
<span className="font-medium">Totalt</span>
<span className="font-mono tabular-nums font-medium text-right">{formatCurrency(data.total as number, (data.currency as string) || 'SEK')}</span>
<span className="tabular-nums font-medium text-right">{formatCurrency(data.total as number, (data.currency as string) || 'SEK')}</span>
</div>
</div>
)
@@ -944,7 +944,7 @@ export default function PendingOperationsPage() {
const showFilterDot = sourceFilter !== 'all'
return (
<div className="space-y-6">
<div className="space-y-8">
<PageHeader
title={t('title')}
description={t('subtitle')}
app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx
+8 -8
View File
@@ -32,7 +32,7 @@ interface CashRowProps {
function CashRow({ label, amount }: CashRowProps) {
return (
<div className="flex items-center justify-between py-1.5 text-sm">
<div className="flex items-center justify-between py-1 text-sm">
<span className="text-foreground">{label}</span>
<span className="tabular-nums text-right">{formatAmount(amount)}</span>
</div>
@@ -96,9 +96,9 @@ export function KassaflodesanalysClient() {
<div className="space-y-8">
<Link
href="/reports"
className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
<ArrowLeft className="h-3.5 w-3.5" />
<ArrowLeft className="h-4 w-4" />
Rapporter
</Link>
<PageHeader title="Kassaflödesanalys" />
@@ -159,7 +159,7 @@ export function KassaflodesanalysClient() {
<Skeleton className="h-32" />
</div>
) : error ? (
<Card className="border-destructive/40">
<Card className="border-destructive">
<CardContent className="p-6 text-sm text-destructive">{error}</CardContent>
</Card>
) : report ? (
@@ -265,7 +265,7 @@ export function KassaflodesanalysClient() {
{/* Total */}
<Card>
<CardContent className="p-6">
<div className="flex items-center justify-between text-base font-medium">
<div className="flex items-center justify-between">
<span className="font-display text-lg">Årets kassaflöde</span>
<span className="font-display text-lg tabular-nums">
{formatAmount(report.total_cash_flow)}
@@ -278,8 +278,8 @@ export function KassaflodesanalysClient() {
<Card
className={
report.reconciliation.is_reconciled
? 'border-success/40 bg-success/5'
: 'border-destructive/60 bg-destructive/5'
? 'border-border bg-muted/30'
: 'border-destructive'
}
>
<CardContent className="p-6 space-y-3">
@@ -313,7 +313,7 @@ export function KassaflodesanalysClient() {
amount={report.reconciliation.delta_calculated}
/>
{!report.reconciliation.is_reconciled && (
<div className="flex items-center justify-between border-t border-destructive/40 pt-2 mt-2 text-sm font-medium text-destructive">
<div className="flex items-center justify-between border-t border-destructive pt-2 mt-2 text-sm font-medium text-destructive">
<span>Avvikelse</span>
<span className="tabular-nums text-right">
{formatAmount(report.reconciliation.mismatch_amount)}
app/(dashboard)/salary/employees/page.tsx
+18 -15
View File
@@ -7,6 +7,7 @@ import { useTranslations } from 'next-intl'
import { Card, CardContent } from '@/components/ui/card'
import { Skeleton } from "@/components/ui/skeleton"
import { Button } from '@/components/ui/button'
import { PageHeader } from '@/components/ui/page-header'
import { EmptyState } from '@/components/ui/empty-state'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Plus, ArrowLeft, UserCircle } from 'lucide-react'
@@ -54,22 +55,24 @@ export default function EmployeesPage() {
return (
<div className="space-y-8">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Button variant="ghost" size="icon" asChild>
<Link href="/salary" aria-label={t('back_to_payroll')}><ArrowLeft className="h-4 w-4" /></Link>
</Button>
<div>
<h1 className="font-display text-2xl md:text-3xl tracking-tight">{t('title')}</h1>
<p className="text-sm text-muted-foreground mt-1">{t('registered_count', { count: employees.length })}</p>
</div>
<div className="flex items-start gap-3">
<Button variant="ghost" size="icon" asChild>
<Link href="/salary" aria-label={t('back_to_payroll')}><ArrowLeft className="h-4 w-4" /></Link>
</Button>
<div className="flex-1">
<PageHeader
title={t('title')}
description={t('registered_count', { count: employees.length })}
action={
canWrite ? (
<Button onClick={openNewEmployee}>
<Plus className="mr-2 h-4 w-4" />
{t('new_employee')}
</Button>
) : undefined
}
/>
</div>
{canWrite && (
<Button onClick={openNewEmployee}>
<Plus className="mr-2 h-4 w-4" />
{t('new_employee')}
</Button>
)}
</div>
{loading ? (
app/(dashboard)/settings/layout.tsx
+2 -1
View File
@@ -3,6 +3,7 @@
import { useEffect } from 'react'
import { useSearchParams, useRouter } from 'next/navigation'
import { useTranslations } from 'next-intl'
import { PageHeader } from '@/components/ui/page-header'
import { SettingsShell } from '@/components/settings/SettingsShell'
const TAB_TO_ROUTE: Record<string, string> = {
@@ -34,7 +35,7 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
return (
<div className="space-y-8">
<h1 className="font-display text-2xl tracking-tight md:text-3xl">{t('aria_label')}</h1>
<PageHeader title={t('aria_label')} />
<SettingsShell variant="page">{children}</SettingsShell>
</div>
)
app/(dashboard)/skattekonto/page.tsx
+44 -45
View File
@@ -5,6 +5,8 @@ import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { PageHeader } from '@/components/ui/page-header'
import { EmptyState } from '@/components/ui/empty-state'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import {
@@ -16,7 +18,12 @@ import {
DialogTitle,
} from '@/components/ui/dialog'
import { useToast } from '@/components/ui/use-toast'
import { formatCurrency } from '@/lib/utils'
import {
formatCurrency,
formatDate,
formatDateLong,
formatDateTime,
} from '@/lib/utils'
import { formatVoucher } from '@/lib/bookkeeping/voucher-series-resolver'
import {
AlertCircle,
@@ -263,19 +270,19 @@ export default function SkattekontoPage() {
<div className="space-y-6">
<PageHeading />
<Card>
<CardContent className="flex flex-col items-center py-12 text-center">
<Landmark className="mb-4 h-10 w-10 text-muted-foreground/40" />
<p className="mb-1 font-medium">Skatteverket är inte anslutet</p>
<p className="mb-4 max-w-md text-sm text-muted-foreground">
För att se saldo och transaktioner på skattekontot behöver du
ansluta med BankID i inställningarna.
</p>
<Button asChild>
<Link href="/settings/tax">
<ExternalLink className="mr-2 h-4 w-4" />
Anslut Skatteverket
</Link>
</Button>
<CardContent className="p-0">
<EmptyState
icon={Landmark}
title="Skatteverket är inte anslutet"
description="För att se saldo och transaktioner på skattekontot behöver du ansluta med BankID i inställningarna."
>
<Button asChild>
<Link href="/settings/tax">
<ExternalLink className="mr-2 h-4 w-4" />
Anslut Skatteverket
</Link>
</Button>
</EmptyState>
</CardContent>
</Card>
</div>
@@ -287,17 +294,17 @@ export default function SkattekontoPage() {
<div className="space-y-6">
<PageHeading />
<Card>
<CardContent className="flex flex-col items-center py-12 text-center">
<AlertCircle className="mb-4 h-10 w-10 text-muted-foreground/40" />
<p className="mb-1 font-medium">Kunde inte hämta skattekontot</p>
<p className="mb-4 max-w-md text-sm text-muted-foreground">
Något gick fel när saldo och transaktioner skulle hämtas. Försök
igen om en stund.
</p>
<Button variant="outline" onClick={() => void reload()}>
<RefreshCw className="mr-2 h-4 w-4" />
Försök igen
</Button>
<CardContent className="p-0">
<EmptyState
icon={AlertCircle}
title="Kunde inte hämta skattekontot"
description="Något gick fel när saldo och transaktioner skulle hämtas. Försök igen om en stund."
>
<Button variant="outline" onClick={() => void reload()}>
<RefreshCw className="mr-2 h-4 w-4" />
Försök igen
</Button>
</EmptyState>
</CardContent>
</Card>
</div>
@@ -401,17 +408,7 @@ export default function SkattekontoPage() {
}
function PageHeading({ right }: { right?: React.ReactNode }) {
return (
<div className="flex items-end justify-between gap-4">
<div>
<h1 className="font-serif text-3xl">Skattekonto</h1>
<p className="text-sm text-muted-foreground">
Saldo och transaktioner från Skatteverket
</p>
</div>
{right}
</div>
)
return <PageHeader title="Skattekonto" action={right} />
}
function BalanceHero({
@@ -456,7 +453,7 @@ function BalanceHero({
Skatteverket
</p>
<p
className={`font-serif text-4xl tabular-nums ${
className={`font-display text-2xl tabular-nums ${
skvNegative ? 'text-destructive' : 'text-foreground'
}`}
>
@@ -473,7 +470,7 @@ function BalanceHero({
Kronofogden
</p>
<p
className={`font-serif text-4xl tabular-nums ${
className={`font-display text-2xl tabular-nums ${
kfmNegative ? 'text-destructive' : 'text-foreground'
}`}
>
@@ -514,7 +511,7 @@ function BalanceHero({
Saldo per
</p>
<p className="font-medium tabular-nums">
{new Date(data.senastUppdaterad).toLocaleString('sv-SE')}
{formatDateLong(data.senastUppdaterad)}
</p>
</div>
</div>
@@ -523,7 +520,7 @@ function BalanceHero({
<p className="text-xs text-muted-foreground">
Synkas automatiskt varje natt. Senast synkad{' '}
<span className="tabular-nums">
{new Date(saldo.lastSyncedAt).toLocaleString('sv-SE')}
{formatDateTime(saldo.lastSyncedAt)}
</span>
. Skatteverket uppdaterar saldot periodvis: datumet ovan ändras
inte varje gång du synkroniserar.
@@ -584,9 +581,11 @@ function TransactionTable({
const isBooked = !!row.journal_entry_id
return (
<TableRow key={row.id}>
<TableCell className="tabular-nums">{row.transaktionsdatum}</TableCell>
<TableCell className="tabular-nums">{formatDate(row.transaktionsdatum)}</TableCell>
{showForfallodatum && (
<TableCell className="tabular-nums">{row.forfallodatum ?? '-'}</TableCell>
<TableCell className="tabular-nums">
{row.forfallodatum ? formatDate(row.forfallodatum) : '-'}
</TableCell>
)}
<TableCell>
{row.transaktionstext}
@@ -599,7 +598,7 @@ function TransactionTable({
voucher_number: row.match_suggestion.voucher_number,
})
: 'utkast'}{' '}
({row.match_suggestion.entry_date})
({formatDate(row.match_suggestion.entry_date)})
</p>
)}
</TableCell>
@@ -681,7 +680,7 @@ function MatchDialog({
<DialogDescription>
{row && (
<>
{row.transaktionsdatum} • {row.transaktionstext} •{' '}
{formatDate(row.transaktionsdatum)} • {row.transaktionstext} •{' '}
<span className="tabular-nums">
{formatCurrency(Number(row.belopp_skatteverket))}
</span>
@@ -723,7 +722,7 @@ function MatchDialog({
<TableBody>
{candidates.map(c => (
<TableRow key={c.journal_entry_id}>
<TableCell className="tabular-nums">{c.entry_date}</TableCell>
<TableCell className="tabular-nums">{formatDate(c.entry_date)}</TableCell>
<TableCell className="tabular-nums">
{formatVoucher(c)}
</TableCell>
app/(dashboard)/supplier-invoices/[id]/page.tsx
+17 -21
View File
@@ -22,7 +22,7 @@ import Link from 'next/link'
import { AccountNumber } from '@/components/ui/account-number'
import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog'
import AccountCombobox from '@/components/bookkeeping/AccountCombobox'
import { formatCurrency } from '@/lib/utils'
import { formatAmount, formatCurrency } from '@/lib/utils'
import { getDisplayTotal } from '@/lib/invoices/rounding'
import type { SupplierInvoice, SupplierInvoiceItem, SupplierInvoicePayment, BASAccount } from '@/types'
@@ -56,10 +56,6 @@ interface MarkPaidPreview {
accounting_method: 'accrual' | 'cash'
}
function formatAmount(amount: number): string {
return amount.toLocaleString('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
// A line is periodiserad when both period dates are set: the cost was parked
// on the 17xx interim account and dissolves monthly via accrual_schedules.
const itemHasAccrual = (item: SupplierInvoiceItem): boolean =>
@@ -433,7 +429,7 @@ export default function SupplierInvoiceDetailPage() {
)
return (
<div className="space-y-6 max-w-4xl">
<div className="space-y-8 max-w-4xl">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-3 sm:gap-4 min-w-0">
@@ -605,29 +601,29 @@ export default function SupplierInvoiceDetailPage() {
<CardContent className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-muted-foreground">{t('net_excl_vat')}</span>
<span className="tabular-nums">{formatAmount(invoice.subtotal)} {invoice.currency}</span>
<span className="tabular-nums">{formatCurrency(invoice.subtotal, invoice.currency)}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">{t('vat_label')}</span>
<span className="tabular-nums">{formatAmount(invoice.vat_amount)} {invoice.currency}</span>
<span className="tabular-nums">{formatCurrency(invoice.vat_amount, invoice.currency)}</span>
</div>
{rounding.applies && (
<div className="flex justify-between">
<span className="text-muted-foreground">{t('ore_rounding')}</span>
<span className="tabular-nums">{formatAmount(rounding.roundingDelta)} {invoice.currency}</span>
<span className="tabular-nums">{formatCurrency(rounding.roundingDelta, invoice.currency)}</span>
</div>
)}
<div className="flex justify-between font-semibold text-base pt-2 border-t">
<span>{t('total_label')}</span>
<span className="tabular-nums">{formatAmount(rounding.displayed)} {invoice.currency}</span>
<span className="tabular-nums">{formatCurrency(rounding.displayed, invoice.currency)}</span>
</div>
<div className="flex justify-between pt-2">
<span className="text-muted-foreground">{t('paid_label')}</span>
<span className="tabular-nums text-success">{formatAmount(invoice.paid_amount)} {invoice.currency}</span>
<span className="tabular-nums text-success">{formatCurrency(invoice.paid_amount, invoice.currency)}</span>
</div>
<div className="flex justify-between font-semibold">
<span>{t('remaining_label')}</span>
<span className="tabular-nums">{formatAmount(invoice.remaining_amount)} {invoice.currency}</span>
<span className="tabular-nums">{formatCurrency(invoice.remaining_amount, invoice.currency)}</span>
</div>
</CardContent>
</Card>
@@ -692,11 +688,11 @@ export default function SupplierInvoiceDetailPage() {
</td>
<td className="py-2 text-right">{item.quantity}</td>
<td className="py-2">{item.unit}</td>
<td className="py-2 text-right tabular-nums">{formatAmount(item.unit_price)}</td>
<td className="py-2 text-right tabular-nums">{formatCurrency(item.unit_price, invoice.currency)}</td>
<td className="py-2"><AccountNumber number={item.account_number} /></td>
<td className="py-2 text-right">{Math.round(item.vat_rate * 100)}%</td>
<td className="py-2 text-right tabular-nums">{formatAmount(item.line_total)}</td>
<td className="py-2 text-right tabular-nums">{formatAmount(item.vat_amount)}</td>
<td className="py-2 text-right tabular-nums">{formatCurrency(item.line_total, invoice.currency)}</td>
<td className="py-2 text-right tabular-nums">{formatCurrency(item.vat_amount, invoice.currency)}</td>
</tr>
))}
</tbody>
@@ -720,12 +716,12 @@ export default function SupplierInvoiceDetailPage() {
</p>
)}
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>{item.quantity} {item.unit} × {formatAmount(item.unit_price)}</span>
<span className="tabular-nums">{formatAmount(item.line_total)} kr</span>
<span>{item.quantity} {item.unit} × {formatCurrency(item.unit_price, invoice.currency)}</span>
<span className="tabular-nums">{formatCurrency(item.line_total, invoice.currency)}</span>
</div>
<div className="flex items-center justify-between text-xs text-muted-foreground">
<span><AccountNumber number={item.account_number} /> · {t('vat_inline', { rate: Math.round(item.vat_rate * 100) })}</span>
<span className="tabular-nums">{t('vat_amount_inline', { amount: formatAmount(item.vat_amount) })}</span>
<span className="tabular-nums">{t('vat_amount_inline', { amount: formatCurrency(item.vat_amount, invoice.currency) })}</span>
</div>
</div>
))}
@@ -755,7 +751,7 @@ export default function SupplierInvoiceDetailPage() {
{payments.map((p) => (
<tr key={p.id} className="border-b last:border-0">
<td className="py-2 tabular-nums">{formatDate(p.payment_date)}</td>
<td className="py-2 text-right tabular-nums">{formatAmount(p.amount)} {p.currency}</td>
<td className="py-2 text-right tabular-nums">{formatCurrency(p.amount, p.currency)}</td>
<td className="py-2">
{p.journal_entry_id ? (
<Link href={`/bookkeeping/${p.journal_entry_id}`} className="text-primary hover:underline font-mono text-xs">
@@ -775,7 +771,7 @@ export default function SupplierInvoiceDetailPage() {
<div key={p.id} className="border rounded-lg p-3 space-y-1">
<div className="flex items-center justify-between text-sm">
<span className="tabular-nums">{formatDate(p.payment_date)}</span>
<span className="font-mono font-medium">{formatAmount(p.amount)} {p.currency}</span>
<span className="font-mono font-medium">{formatCurrency(p.amount, p.currency)}</span>
</div>
<div className="flex items-center justify-between text-xs text-muted-foreground">
{p.journal_entry_id ? (
@@ -1096,7 +1092,7 @@ export default function SupplierInvoiceDetailPage() {
</div>
</div>
<div className="tabular-nums font-medium">
{formatAmount(Math.abs(c.amount))} {invoice.currency}
{formatCurrency(Math.abs(c.amount), invoice.currency)}
</div>
<Button
variant="outline"
app/(dashboard)/supplier-invoices/page.tsx
+10 -11
View File
@@ -6,7 +6,8 @@ import { useTranslations } from 'next-intl'
import { Skeleton } from "@/components/ui/skeleton"
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { DataList, DataListEmpty } from '@/components/ui/data-list'
import { Card, CardContent } from '@/components/ui/card'
import { DataListEmpty } from '@/components/ui/data-list'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Plus, FileInput, Lock } from 'lucide-react'
@@ -14,13 +15,9 @@ import Link from 'next/link'
import { PageHeader } from '@/components/ui/page-header'
import NewSupplierInvoiceDialog from '@/components/supplier-invoices/NewSupplierInvoiceDialog'
import { useCanWrite } from '@/lib/hooks/use-can-write'
import { formatDate } from '@/lib/utils'
import { formatCurrency, formatDate } from '@/lib/utils'
import type { SupplierInvoice } from '@/types'
function formatAmount(amount: number): string {
return amount.toLocaleString('sv-SE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
const STATUS_VARIANTS: Record<string, 'default' | 'secondary' | 'success' | 'warning' | 'destructive'> = {
registered: 'secondary',
approved: 'default',
@@ -134,7 +131,8 @@ export default function SupplierInvoicesPage() {
</TabsList>
<TabsContent value={activeTab}>
<DataList>
<Card>
<CardContent className="p-0">
{isLoading ? (
<div>
<div className="p-3 border-b border-border">
@@ -184,7 +182,7 @@ export default function SupplierInvoicesPage() {
<TableBody>
{filteredInvoices.map((inv) => (
<TableRow key={inv.id}>
<TableCell className="font-mono tabular-nums">{inv.arrival_number}</TableCell>
<TableCell className="tabular-nums">{inv.arrival_number}</TableCell>
<TableCell>
<Link href={`/suppliers/${inv.supplier_id}`} className="hover:underline">
{inv.supplier?.name || '-'}
@@ -197,8 +195,8 @@ export default function SupplierInvoicesPage() {
</TableCell>
<TableCell className="tabular-nums">{formatDate(inv.invoice_date)}</TableCell>
<TableCell className="tabular-nums">{formatDate(inv.due_date)}</TableCell>
<TableCell className="text-right tabular-nums">{formatAmount(inv.total)}</TableCell>
<TableCell className="text-right tabular-nums">{formatAmount(inv.remaining_amount)}</TableCell>
<TableCell className="text-right tabular-nums">{formatCurrency(inv.total, inv.currency)}</TableCell>
<TableCell className="text-right tabular-nums">{formatCurrency(inv.remaining_amount, inv.currency)}</TableCell>
<TableCell>
<Badge variant={STATUS_VARIANTS[inv.status] || 'secondary'}>
{STATUS_LABEL_KEYS[inv.status] ? t(STATUS_LABEL_KEYS[inv.status]) : inv.status}
@@ -209,7 +207,8 @@ export default function SupplierInvoicesPage() {
</TableBody>
</Table>
)}
</DataList>
</CardContent>
</Card>
</TabsContent>
</Tabs>
app/(dashboard)/suppliers/page.tsx
+39 -38
View File
@@ -9,6 +9,7 @@ import { Input } from '@/components/ui/input'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { EmptyState } from '@/components/ui/empty-state'
import { Skeleton } from '@/components/ui/skeleton'
import { PageHeader } from '@/components/ui/page-header'
import { ReportExportMenu } from '@/components/reports/ReportExportMenu'
import { useToast } from '@/components/ui/use-toast'
import { Plus, Search, Building2, Lock } from 'lucide-react'
@@ -113,44 +114,44 @@ export default function SuppliersPage() {
return (
<div className="space-y-8">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 className="font-display text-2xl md:text-3xl tracking-tight">{t('title')}</h1>
</div>
<div className="flex items-center gap-2">
<ReportExportMenu
size="default"
items={[
{ format: 'xlsx', href: '/api/export/suppliers' },
{ format: 'csv', href: '/api/export/suppliers?format=csv' },
]}
/>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button
disabled={!canWrite}
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
>
{canWrite ? (
<Plus className="mr-2 h-4 w-4" />
) : (
<Lock className="mr-2 h-4 w-4" />
)}
{t('new_supplier')}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>{t('add_supplier')}</DialogTitle>
</DialogHeader>
<SupplierForm
onSubmit={handleCreateSupplier}
isLoading={isCreating}
/>
</DialogContent>
</Dialog>
</div>
</div>
<PageHeader
title={t('title')}
action={
<div className="flex items-center gap-2">
<ReportExportMenu
size="default"
items={[
{ format: 'xlsx', href: '/api/export/suppliers' },
{ format: 'csv', href: '/api/export/suppliers?format=csv' },
]}
/>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button
disabled={!canWrite}
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
>
{canWrite ? (
<Plus className="mr-2 h-4 w-4" />
) : (
<Lock className="mr-2 h-4 w-4" />
)}
{t('new_supplier')}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-2xl max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>{t('add_supplier')}</DialogTitle>
</DialogHeader>
<SupplierForm
onSubmit={handleCreateSupplier}
isLoading={isCreating}
/>
</DialogContent>
</Dialog>
</div>
}
/>
{/* Search */}
<div className="relative">