refactor(register): customer, supplier and article detail as documents, not card piles (#1624)
The three register detail pages rendered a handful of facts as a grid of sparse bordered cards floating in an empty page. They now read as one flowing document: serif entity name over a quiet type/status kicker, quiet ghost actions top right (delete turns terracotta only on hover), and hairline-kickered definition sections (KONTAKT, KUNDUPPGIFTER, PRIS, BOKFORING, BETALNINGSUPPGIFTER, FAKTUROR) with aligned label/value rows in a constrained column (max-w-2xl, supplier max-w-3xl for its invoice table). Sections land with the standard stagger-enter. New shared primitive components/ui/detail-section.tsx (DetailSection, DefRow, DefEmpty) carries the grammar. Empty values render a muted en dash for facts that matter (email, phone, expense account) and are omitted row-wise otherwise; a section with nothing to say is omitted. Behavior preserved: edit/deactivate/delete flows, confirm dialogs, personal-number reveal + AttnLine, account-activation retry, viewer lock states, routing and all existing i18n keys. New def_* label keys added line-wise to both sv.json and en.json; customer invoice_count gained ICU plural (1 faktura, not 1 fakturor). Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
co-authored by
Jakob Wennberg
Claude Fable 5
Jakob Wennberg
Claude Fable 5
parent
51539b93ed
commit
a977a67063
@@ -993,6 +993,7 @@ One line per decision: `[YYYY-MM-DD] <decision>: <why>`. Appended by agents and
|
||||
[2026-08-14] The onboarding branch question ("Var fanns bokföringen innan?") became its own journey step at the existing KLART station (done -> source, same station grammar as momsyn/moms under MOMSEN) instead of a sixth rail station: a 6-point rail crowds the 680px band's 150px label slots, "BOKFÖRINGEN INNAN" would sit next to the existing "BOKFÖRINGEN" station, and mode='add' (which never sees the branch question) would need an asymmetric rail. The done screen ends in a revealed Fortsätt that dispatches DONE_CONTINUE (mode='first' only, reducer-guarded).
|
||||
[2026-08-14] Migration /preview fetches ALL allowed fiscal years (dropped latestOnly): the connect step's "Hittade X konton och Y verifikationer" renders from /preview's sieStats, not /sie-data's generateImportPreview, so fixing only /sie-data would have left the founder-reported "0 verifikationer" (actual: 4153) on screen. Costs one SIE export per extra year at connect time, the same work /sie-data repeats right after; honest counts won over latency.
|
||||
[2026-08-14] /sie-data validation stays newest-file-only (not per-file, not on the merged parse): preserves exactly which datasets are accepted today, and validateSIEFile assumes single-file invariants (balance yearIndexes relative to ONE current year) that mergeParsedSIEFiles deliberately does not preserve. Older files' problems still surface per-file at import time.
|
||||
[2026-08-15] Register detail de-box (customers/suppliers/articles): added new def_* label keys next to the old colon-suffixed and inline-format keys instead of renaming or deleting them: message files are only ever edited line-wise (duplicate-key hazard forbids JSON round-trips), so dead keys are cheaper than a risky rewrite. Also converted the customer invoice list's per-row status Badge to muted text with a chip only for Förfallen, per the locked "chips mark exceptions" convention: paid on every row was the same-chip-on-every-row bug the convention names.
|
||||
[2026-08-15] Employee form save-scope fix: moved the self-saving sections (Förmåner, Ingående saldon) OUTSIDE the page <form> under a "Sparas separat" kicker with a one-line scope hint, kept them as Cards (locked section pattern; the task-suggested hairline no-box region would deviate from every sibling section) and rejected the tab/sub-page shape (page has no tab structure, would be more invasive). This also fixes a real double-fire: shadcn Button has no default type, so the panels' save/add/delete buttons inside the form implicitly submitted the whole employee PATCH on every click; opening-balances now has its own <form> whose save enables only when dirty.
|
||||
[2026-08-14] SKV manual-verifikat deep link payload moved from URL params to single-use sessionStorage (supersedes same-day URL-params decision): compliance swarm flagged financial data in query strings landing in history/access logs/Referer (GDPR Art.5(1)(f), ISO A.8.12); URL now carries only the opaque row id.
|
||||
[2026-08-14] SKV prefill sessionStorage XSS window accepted as residual risk (ISO A.8.12 low, swarm PR #1621): script execution already implies full ledger read via authenticated APIs; a server-issued staging token adds a roundtrip, not protection. Documented in manual-verifikat-prefill.ts header.
|
||||
|
||||
@@ -4,9 +4,9 @@ import { useState, useEffect, useCallback, useRef, use } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { useLocale, useTranslations } from 'next-intl'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { DetailSection, DefRow } from '@/components/ui/detail-section'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import ArticleForm from '@/components/articles/ArticleForm'
|
||||
@@ -17,17 +17,7 @@ import {
|
||||
} from '@/lib/hooks/use-submit-with-account-activation'
|
||||
import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
|
||||
import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog'
|
||||
import {
|
||||
Archive,
|
||||
ArchiveRestore,
|
||||
ArrowLeft,
|
||||
Package,
|
||||
Wrench,
|
||||
Edit2,
|
||||
Trash2,
|
||||
Loader2,
|
||||
Lock,
|
||||
} from 'lucide-react'
|
||||
import { ArrowLeft, Loader2, Lock } from 'lucide-react'
|
||||
import { useCanWrite } from '@/lib/hooks/use-can-write'
|
||||
import { formatCurrency } from '@/lib/utils'
|
||||
import type { Article, ArticleType, CreateArticleInput } from '@/types'
|
||||
@@ -37,11 +27,6 @@ const ARTICLE_TYPE_KEY: Record<ArticleType, string> = {
|
||||
tjanst: 'type_tjanst',
|
||||
}
|
||||
|
||||
const articleTypeIcons: Record<ArticleType, React.ElementType> = {
|
||||
vara: Package,
|
||||
tjanst: Wrench,
|
||||
}
|
||||
|
||||
export default function ArticleDetailPage({
|
||||
params,
|
||||
}: {
|
||||
@@ -221,178 +206,130 @@ export default function ArticleDetailPage({
|
||||
|
||||
if (!article) return null
|
||||
|
||||
const Icon = articleTypeIcons[article.type]
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col items-start justify-between gap-4 sm:flex-row">
|
||||
<div>
|
||||
<Link
|
||||
href="/articles"
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{t('back')}
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-display text-2xl leading-8 tracking-tight">{article.name}</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
{article.active ? (
|
||||
<span className="text-sm text-muted-foreground">{t('status_active')}</span>
|
||||
) : (
|
||||
<Badge variant="outline" className="font-normal">
|
||||
{t('status_inactive')}
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-sm text-muted-foreground tabular-nums">
|
||||
{t(ARTICLE_TYPE_KEY[article.type])}
|
||||
{article.article_number ? ` · #${article.article_number}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-2xl space-y-8 stagger-enter">
|
||||
{/* Header: serif name over a quiet type/status kicker, quiet actions right */}
|
||||
<div>
|
||||
<Link
|
||||
href="/articles"
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-6"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{t('back')}
|
||||
</Link>
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<h1 className="font-display text-2xl leading-8 tracking-tight">{article.name}</h1>
|
||||
<p className="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<span className="tabular-nums">
|
||||
{t(ARTICLE_TYPE_KEY[article.type])}
|
||||
{article.article_number ? ` · #${article.article_number}` : ''}
|
||||
{article.active ? ` · ${t('status_active')}` : ''}
|
||||
</span>
|
||||
{!article.active && (
|
||||
<Badge variant="outline" className="font-normal">
|
||||
{t('status_inactive')}
|
||||
</Badge>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsEditOpen(true)}
|
||||
className="min-h-10 text-muted-foreground hover:text-foreground"
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{!canWrite && <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('edit')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleToggleActive}
|
||||
className="min-h-10 text-muted-foreground hover:text-foreground"
|
||||
disabled={isTogglingActive || !canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{isTogglingActive ? (
|
||||
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
||||
) : !canWrite ? (
|
||||
<Lock className="h-4 w-4 mr-1" />
|
||||
) : null}
|
||||
{article.active ? t('deactivate') : t('activate')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
className="min-h-10 text-muted-foreground hover:text-destructive"
|
||||
disabled={isDeleting || !canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
||||
) : !canWrite ? (
|
||||
<Lock className="h-4 w-4 mr-1" />
|
||||
) : null}
|
||||
{t('delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditOpen(true)}
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{canWrite ? <Edit2 className="h-4 w-4 mr-1" /> : <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('edit')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleToggleActive}
|
||||
className="min-h-10"
|
||||
disabled={isTogglingActive || !canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{isTogglingActive ? (
|
||||
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
||||
) : !canWrite ? (
|
||||
<Lock className="h-4 w-4 mr-1" />
|
||||
) : article.active ? (
|
||||
<Archive className="h-4 w-4 mr-1" />
|
||||
) : (
|
||||
<ArchiveRestore className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
{article.active ? t('deactivate') : t('activate')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
className="min-h-10 text-destructive hover:text-destructive"
|
||||
disabled={isDeleting || !canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
||||
) : canWrite ? (
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
) : (
|
||||
<Lock className="h-4 w-4 mr-1" />
|
||||
)}
|
||||
{t('delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Pricing */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_pricing')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_price')}</span>
|
||||
<span className="tabular-nums">{formatCurrency(article.price_excl_vat, article.currency)}</span>
|
||||
</div>
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_vat')}</span>
|
||||
<span className="tabular-nums">{article.vat_rate} %</span>
|
||||
</div>
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_unit')}</span>
|
||||
<span>{article.unit}</span>
|
||||
</div>
|
||||
{article.cost_price != null && (
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_cost_price')}</span>
|
||||
<span className="tabular-nums">{formatCurrency(article.cost_price, article.currency)}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<DetailSection kicker={t('section_pricing')}>
|
||||
<DefRow label={t('label_price')}>
|
||||
<span className="tabular-nums">
|
||||
{formatCurrency(article.price_excl_vat, article.currency)}
|
||||
</span>
|
||||
</DefRow>
|
||||
<DefRow label={t('label_vat')}>
|
||||
<span className="tabular-nums">{article.vat_rate} %</span>
|
||||
</DefRow>
|
||||
<DefRow label={t('label_unit')}>{article.unit}</DefRow>
|
||||
{article.cost_price != null && (
|
||||
<DefRow label={t('label_cost_price')}>
|
||||
<span className="tabular-nums">
|
||||
{formatCurrency(article.cost_price, article.currency)}
|
||||
</span>
|
||||
</DefRow>
|
||||
)}
|
||||
</DetailSection>
|
||||
|
||||
{/* Accounting */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_accounting')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_revenue_account')}</span>
|
||||
<span className="tabular-nums">
|
||||
{article.revenue_account || t('revenue_account_auto')}
|
||||
</span>
|
||||
</div>
|
||||
{article.type === 'tjanst' && article.housework_type && (
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_housework')}</span>
|
||||
<span>{article.housework_type}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<DetailSection kicker={t('section_accounting')}>
|
||||
<DefRow label={t('label_revenue_account')}>
|
||||
{article.revenue_account ? (
|
||||
<span className="tabular-nums">{article.revenue_account}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground">{t('revenue_account_auto')}</span>
|
||||
)}
|
||||
</DefRow>
|
||||
{article.type === 'tjanst' && article.housework_type && (
|
||||
<DefRow label={t('label_housework')}>{article.housework_type}</DefRow>
|
||||
)}
|
||||
</DetailSection>
|
||||
|
||||
{/* Details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_details')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{article.name_en && (
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_name_en')}</span>
|
||||
<span className="truncate ml-2">{article.name_en}</span>
|
||||
</div>
|
||||
)}
|
||||
{article.ean && (
|
||||
<div className="text-sm flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('label_ean')}</span>
|
||||
<span className="tabular-nums">{article.ean}</span>
|
||||
</div>
|
||||
)}
|
||||
{!article.name_en && !article.ean && (
|
||||
<p className="text-sm text-muted-foreground">{t('no_details')}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
{/* Optional facts (English name, EAN) are omitted row-wise; when none
|
||||
exist the whole section goes, so the document never pads itself
|
||||
with placeholders for facts nobody entered. */}
|
||||
{(article.name_en || article.ean) && (
|
||||
<DetailSection kicker={t('section_details')}>
|
||||
{article.name_en && <DefRow label={t('label_name_en')}>{article.name_en}</DefRow>}
|
||||
{article.ean && (
|
||||
<DefRow label={t('label_ean')}>
|
||||
<span className="tabular-nums">{article.ean}</span>
|
||||
</DefRow>
|
||||
)}
|
||||
</DetailSection>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
{article.notes && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_notes')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{article.notes}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<DetailSection kicker={t('section_notes')}>
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{article.notes}</p>
|
||||
</DetailSection>
|
||||
)}
|
||||
|
||||
<DestructiveConfirmDialog {...confirmDialogProps} />
|
||||
|
||||
@@ -5,9 +5,9 @@ import { useRouter } from 'next/navigation'
|
||||
import { use } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { DetailSection, DefRow, DefEmpty } from '@/components/ui/detail-section'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import {
|
||||
@@ -17,22 +17,7 @@ import {
|
||||
import { AttnLine } from '@/components/ui/attn-line'
|
||||
import CustomerForm from '@/components/customers/CustomerForm'
|
||||
import { DestructiveConfirmDialog, useDestructiveConfirm } from '@/components/ui/destructive-confirm-dialog'
|
||||
import {
|
||||
ArrowLeft,
|
||||
Building,
|
||||
Globe,
|
||||
User,
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Edit2,
|
||||
Trash2,
|
||||
Loader2,
|
||||
ReceiptText,
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from 'lucide-react'
|
||||
import { ArrowLeft, Loader2, Lock, Eye, EyeOff } from 'lucide-react'
|
||||
import { useLocale } from 'next-intl'
|
||||
import { useCanWrite } from '@/lib/hooks/use-can-write'
|
||||
import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
|
||||
@@ -47,13 +32,6 @@ const CUSTOMER_TYPE_KEY: Record<CustomerType, string> = {
|
||||
non_eu_business: 'type_non_eu_business',
|
||||
}
|
||||
|
||||
const customerTypeIcons: Record<CustomerType, React.ElementType> = {
|
||||
individual: User,
|
||||
swedish_business: Building,
|
||||
eu_business: Globe,
|
||||
non_eu_business: Globe,
|
||||
}
|
||||
|
||||
interface RelatedInvoice {
|
||||
id: string
|
||||
invoice_number: string | null
|
||||
@@ -232,244 +210,200 @@ export default function CustomerDetailPage({
|
||||
|
||||
if (!customer) return null
|
||||
|
||||
const Icon = customerTypeIcons[customer.customer_type]
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<Link
|
||||
href="/customers"
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-2"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{t('back')}
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-display text-2xl leading-8 tracking-tight">{customer.name}</h1>
|
||||
<p className="text-sm text-muted-foreground">{t(CUSTOMER_TYPE_KEY[customer.customer_type])}</p>
|
||||
</div>
|
||||
<div className="max-w-2xl space-y-8 stagger-enter">
|
||||
{/* Header: serif name over a quiet type kicker, quiet actions right */}
|
||||
<div>
|
||||
<Link
|
||||
href="/customers"
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-6"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{t('back')}
|
||||
</Link>
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<h1 className="font-display text-2xl leading-8 tracking-tight">{customer.name}</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{t(CUSTOMER_TYPE_KEY[customer.customer_type])}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsEditOpen(true)}
|
||||
className="min-h-10 text-muted-foreground hover:text-foreground"
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{!canWrite && <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('edit')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
className="min-h-10 text-muted-foreground hover:text-destructive"
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{!canWrite && <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsEditOpen(true)}
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{canWrite ? <Edit2 className="h-4 w-4 mr-1" /> : <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('edit')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
className="text-destructive hover:text-destructive"
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{canWrite ? <Trash2 className="h-4 w-4 mr-1" /> : <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Contact */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_contact')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{customer.email && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Mail className="h-4 w-4 text-muted-foreground" />
|
||||
<a href={`mailto:${customer.email}`} className="hover:underline">
|
||||
{customer.email}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{customer.phone && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Phone className="h-4 w-4 text-muted-foreground" />
|
||||
{customer.phone}
|
||||
</div>
|
||||
)}
|
||||
{(customer.address_line1 || customer.city) && (
|
||||
<div className="flex items-start gap-2 text-sm">
|
||||
<MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
|
||||
<div>
|
||||
{customer.address_line1 && <p>{customer.address_line1}</p>}
|
||||
{customer.address_line2 && <p>{customer.address_line2}</p>}
|
||||
{(customer.postal_code || customer.city) && (
|
||||
<p>{[customer.postal_code, customer.city].filter(Boolean).join(' ')}</p>
|
||||
)}
|
||||
{customer.country && <p>{customer.country}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!customer.email && !customer.phone && !customer.address_line1 && !customer.city && (
|
||||
<p className="text-sm text-muted-foreground">{t('no_contact_info')}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Customer details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_business')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{customer.customer_number && (
|
||||
<div className="text-sm">
|
||||
<span className="text-muted-foreground">{t('label_customer_number')} </span>
|
||||
{customer.customer_number}
|
||||
</div>
|
||||
)}
|
||||
{customer.customer_type !== 'individual' && customer.org_number && (
|
||||
<div className="text-sm">
|
||||
<span className="text-muted-foreground">{t('label_org_number')} </span>
|
||||
{customer.org_number}
|
||||
</div>
|
||||
)}
|
||||
{customer.customer_type === 'individual' && (customer.personal_number || customer.org_number) && (
|
||||
<div className="text-sm">
|
||||
<span className="text-muted-foreground">{t('label_personal_number')} </span>
|
||||
<span className="tabular-nums">
|
||||
{revealedPersonalNumber ??
|
||||
maskCustomerPersonalNumber(customer.personal_number || customer.org_number)}
|
||||
</span>
|
||||
{/* Viewers keep the mask: the endpoint refuses them anyway. */}
|
||||
{canWrite && customer.personal_number && !isUnreadablePersonalNumber && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-1 h-10 w-10 align-middle"
|
||||
onClick={togglePersonalNumber}
|
||||
disabled={isRevealing}
|
||||
aria-label={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
|
||||
title={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
|
||||
>
|
||||
{isRevealing ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : revealedPersonalNumber ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{isUnreadablePersonalNumber && (
|
||||
<AttnLine
|
||||
className="mt-1"
|
||||
action={{ label: t('personal_number_unreadable_action'), onClick: () => setIsEditOpen(true) }}
|
||||
>
|
||||
{t('personal_number_unreadable')}
|
||||
</AttnLine>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{customer.vat_number && (
|
||||
<div className="text-sm flex items-center gap-2">
|
||||
<span className="text-muted-foreground">{t('label_vat')} </span>
|
||||
{customer.vat_number}
|
||||
{customer.vat_number_validated && (
|
||||
<Badge variant="success" className="text-xs">{t('verified')}</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm">
|
||||
<span className="text-muted-foreground">{t('label_payment_terms')} </span>
|
||||
{t('payment_terms_value', { days: customer.default_payment_terms || 30 })}
|
||||
</div>
|
||||
{!customer.customer_number && !customer.org_number && !customer.personal_number && !customer.vat_number && (
|
||||
<p className="text-sm text-muted-foreground">{t('no_business_info')}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Summary */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_summary')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<ReceiptText className="h-4 w-4 text-muted-foreground" />
|
||||
<span>{t('invoice_count', { count: customer.invoices?.length || 0 })}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
{customer.notes && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('section_notes')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{customer.notes}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Related invoices */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<ReceiptText className="h-4 w-4" />
|
||||
{t('section_invoices')}
|
||||
{customer.invoices?.length > 0 && (
|
||||
<span className="text-sm text-muted-foreground tabular-nums">({customer.invoices.length})</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{customer.invoices?.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{customer.invoices.map((invoice) => (
|
||||
<Link
|
||||
key={invoice.id}
|
||||
href={`/invoices/${invoice.id}`}
|
||||
className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div>
|
||||
<p className={cn('font-medium', !invoice.invoice_number && 'italic text-muted-foreground')}>{invoiceNumberDisplay(invoice.invoice_number)}</p>
|
||||
<p className="text-sm text-muted-foreground tabular-nums">{formatDate(invoice.invoice_date)}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm tabular-nums">
|
||||
{formatCurrency(invoice.total, invoice.currency)}
|
||||
</span>
|
||||
<Badge variant={invoice.payment_status === 'paid' ? 'success' : 'secondary'}>
|
||||
{invoice.payment_status === 'paid'
|
||||
? t('invoice_status_paid')
|
||||
: invoice.payment_status === 'overdue'
|
||||
? t('invoice_status_overdue')
|
||||
: t('invoice_status_unpaid')}
|
||||
</Badge>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<DetailSection kicker={t('section_contact')}>
|
||||
<DefRow label={t('def_email')}>
|
||||
{customer.email ? (
|
||||
<a href={`mailto:${customer.email}`} className="hover:underline">
|
||||
{customer.email}
|
||||
</a>
|
||||
) : (
|
||||
<DefEmpty />
|
||||
)}
|
||||
</DefRow>
|
||||
<DefRow label={t('def_phone')}>{customer.phone || <DefEmpty />}</DefRow>
|
||||
<DefRow label={t('def_address')}>
|
||||
{customer.address_line1 || customer.city ? (
|
||||
<div>
|
||||
{customer.address_line1 && <p>{customer.address_line1}</p>}
|
||||
{customer.address_line2 && <p>{customer.address_line2}</p>}
|
||||
{(customer.postal_code || customer.city) && (
|
||||
<p>{[customer.postal_code, customer.city].filter(Boolean).join(' ')}</p>
|
||||
)}
|
||||
{customer.country && <p>{customer.country}</p>}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
{t('no_invoices')}
|
||||
</p>
|
||||
<DefEmpty />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DefRow>
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection kicker={t('section_business')}>
|
||||
<DefRow label={t('def_customer_number')}>
|
||||
{customer.customer_number || <DefEmpty />}
|
||||
</DefRow>
|
||||
{customer.customer_type !== 'individual' && (
|
||||
<DefRow label={t('def_org_number')}>
|
||||
{customer.org_number ? (
|
||||
<span className="tabular-nums">{customer.org_number}</span>
|
||||
) : (
|
||||
<DefEmpty />
|
||||
)}
|
||||
</DefRow>
|
||||
)}
|
||||
{customer.customer_type === 'individual' && (customer.personal_number || customer.org_number) && (
|
||||
<DefRow label={t('def_personal_number')}>
|
||||
<span className="tabular-nums">
|
||||
{revealedPersonalNumber ??
|
||||
maskCustomerPersonalNumber(customer.personal_number || customer.org_number)}
|
||||
</span>
|
||||
{/* Viewers keep the mask: the endpoint refuses them anyway. */}
|
||||
{canWrite && customer.personal_number && !isUnreadablePersonalNumber && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-1 h-10 w-10 -my-2 align-middle"
|
||||
onClick={togglePersonalNumber}
|
||||
disabled={isRevealing}
|
||||
aria-label={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
|
||||
title={revealedPersonalNumber ? t('personal_number_hide') : t('personal_number_show')}
|
||||
>
|
||||
{isRevealing ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : revealedPersonalNumber ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{isUnreadablePersonalNumber && (
|
||||
<AttnLine
|
||||
className="mt-1"
|
||||
action={{ label: t('personal_number_unreadable_action'), onClick: () => setIsEditOpen(true) }}
|
||||
>
|
||||
{t('personal_number_unreadable')}
|
||||
</AttnLine>
|
||||
)}
|
||||
</DefRow>
|
||||
)}
|
||||
{customer.vat_number && (
|
||||
<DefRow label={t('def_vat')}>
|
||||
<span className="inline-flex flex-wrap items-center gap-2">
|
||||
{customer.vat_number}
|
||||
{customer.vat_number_validated && (
|
||||
<Badge variant="success" className="text-xs">{t('verified')}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</DefRow>
|
||||
)}
|
||||
<DefRow label={t('def_payment_terms')}>
|
||||
{t('payment_terms_value', { days: customer.default_payment_terms || 30 })}
|
||||
</DefRow>
|
||||
</DetailSection>
|
||||
|
||||
{customer.notes && (
|
||||
<DetailSection kicker={t('section_notes')}>
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-wrap">{customer.notes}</p>
|
||||
</DetailSection>
|
||||
)}
|
||||
|
||||
<DetailSection
|
||||
kicker={t('section_invoices')}
|
||||
aside={
|
||||
customer.invoices?.length > 0 ? (
|
||||
<span className="text-[11px] tabular-nums text-muted-foreground">
|
||||
{t('invoice_count', { count: customer.invoices.length })}
|
||||
</span>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
{customer.invoices?.length > 0 ? (
|
||||
<div className="divide-y divide-border">
|
||||
{customer.invoices.map((invoice) => (
|
||||
<Link
|
||||
key={invoice.id}
|
||||
href={`/invoices/${invoice.id}`}
|
||||
className="flex items-center gap-3 py-3 text-sm transition-colors duration-150 hover:bg-secondary/35"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'min-w-0 truncate',
|
||||
!invoice.invoice_number && 'italic text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{invoiceNumberDisplay(invoice.invoice_number)}
|
||||
</span>
|
||||
<span className="text-muted-foreground tabular-nums">
|
||||
{formatDate(invoice.invoice_date)}
|
||||
</span>
|
||||
<span className="ml-auto tabular-nums">
|
||||
{formatCurrency(invoice.total, invoice.currency)}
|
||||
</span>
|
||||
{/* Chips mark exceptions: an overdue invoice is the deviation
|
||||
worth a chip; paid and not-yet-due render as muted text. */}
|
||||
{invoice.payment_status === 'overdue' ? (
|
||||
<Badge variant="destructive">{t('invoice_status_overdue')}</Badge>
|
||||
) : (
|
||||
<span className="min-w-14 text-right text-xs text-muted-foreground">
|
||||
{invoice.payment_status === 'paid'
|
||||
? t('invoice_status_paid')
|
||||
: t('invoice_status_unpaid')}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">{t('no_invoices')}</p>
|
||||
)}
|
||||
</DetailSection>
|
||||
|
||||
<DestructiveConfirmDialog {...confirmDialogProps} />
|
||||
|
||||
|
||||
@@ -5,13 +5,14 @@ import { useParams, useRouter } from 'next/navigation'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { DetailSection, DefRow, DefEmpty } from '@/components/ui/detail-section'
|
||||
import { QUIET_LINK_CLASS } from '@/components/ui/dry-table'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
import { getErrorMessage } from '@/lib/errors/get-error-message'
|
||||
import { ArrowLeft, Edit, Trash2, FileText, Lock } from 'lucide-react'
|
||||
import { ArrowLeft, Lock } from 'lucide-react'
|
||||
import { useCanWrite } from '@/lib/hooks/use-can-write'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import SupplierForm from '@/components/suppliers/SupplierForm'
|
||||
@@ -181,124 +182,159 @@ export default function SupplierDetailPage() {
|
||||
credited: t('status_credited'),
|
||||
}
|
||||
|
||||
// One fallback row keeps the figures band composed for a supplier that has
|
||||
// no invoices yet: zeros in the supplier's own default currency.
|
||||
const currencyRows = supplier.stats?.by_currency?.length
|
||||
? supplier.stats.by_currency
|
||||
: [{ currency: supplier.default_currency || 'SEK', total_outstanding: 0, total_paid: 0 }]
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.push('/suppliers')} aria-label={t('back_aria')}>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<div>
|
||||
<div className="max-w-3xl space-y-8 stagger-enter">
|
||||
{/* Header: serif name over a quiet type/org kicker, quiet actions right */}
|
||||
<div>
|
||||
<Link
|
||||
href="/suppliers"
|
||||
className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 mb-6"
|
||||
aria-label={t('back_aria')}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{t('back')}
|
||||
</Link>
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<h1 className="font-display text-2xl leading-8 tracking-tight">{supplier.name}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{supplierTypeLabels[supplier.supplier_type]}
|
||||
{supplier.org_number && t('org_number_inline', { number: supplier.org_number })}
|
||||
{supplier.org_number ? ` · ${t('kicker_org', { number: supplier.org_number })}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsEditOpen(true)}
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{canWrite ? <Edit className="mr-2 h-4 w-4" /> : <Lock className="mr-2 h-4 w-4" />}
|
||||
{t('edit')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
onClick={handleDelete}
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
aria-label={t('delete_confirm_label')}
|
||||
>
|
||||
{canWrite ? <Trash2 className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsEditOpen(true)}
|
||||
className="min-h-10 text-muted-foreground hover:text-foreground"
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{!canWrite && <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('edit')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
className="min-h-10 text-muted-foreground hover:text-destructive"
|
||||
disabled={!canWrite}
|
||||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||||
>
|
||||
{!canWrite && <Lock className="h-4 w-4 mr-1" />}
|
||||
{t('delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm text-muted-foreground">{t('outstanding')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{(supplier.stats?.by_currency?.length ? supplier.stats.by_currency : [{ currency: supplier.default_currency || 'SEK', total_outstanding: 0, total_paid: 0 }]).map((row) => (
|
||||
<p key={row.currency} className="font-display text-2xl tabular-nums">
|
||||
{/* Figures band: the three headline numbers, flat on the page */}
|
||||
<div className="grid gap-6 sm:grid-cols-3">
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{t('outstanding')}
|
||||
</p>
|
||||
<div className="mt-1">
|
||||
{currencyRows.map((row) => (
|
||||
<p key={row.currency} className="font-display text-xl tabular-nums">
|
||||
{amountWithCurrency(row.total_outstanding, row.currency)}
|
||||
</p>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm text-muted-foreground">{t('total_paid')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{(supplier.stats?.by_currency?.length ? supplier.stats.by_currency : [{ currency: supplier.default_currency || 'SEK', total_outstanding: 0, total_paid: 0 }]).map((row) => (
|
||||
<p key={row.currency} className="font-display text-2xl tabular-nums">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{t('total_paid')}
|
||||
</p>
|
||||
<div className="mt-1">
|
||||
{currencyRows.map((row) => (
|
||||
<p key={row.currency} className="font-display text-xl tabular-nums">
|
||||
{amountWithCurrency(row.total_paid, row.currency)}
|
||||
</p>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm text-muted-foreground">{t('invoice_count')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="font-display text-2xl tabular-nums">{supplier.stats?.invoice_count || 0}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{t('invoice_count')}
|
||||
</p>
|
||||
<p className="mt-1 font-display text-xl tabular-nums">
|
||||
{supplier.stats?.invoice_count || 0}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact & Payment Info */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('contact_section_title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
{supplier.email && <p>{t('email_inline', { email: supplier.email })}</p>}
|
||||
{supplier.phone && <p>{t('phone_inline', { phone: supplier.phone })}</p>}
|
||||
{supplier.address_line1 && <p>{supplier.address_line1}</p>}
|
||||
{supplier.postal_code && <p>{supplier.postal_code} {supplier.city}</p>}
|
||||
{supplier.vat_number && <p>{t('vat_inline', { vat: supplier.vat_number })}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{t('payment_section_title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
{supplier.bankgiro && <p>{t('bankgiro_inline', { value: supplier.bankgiro })}</p>}
|
||||
{supplier.plusgiro && <p>{t('plusgiro_inline', { value: supplier.plusgiro })}</p>}
|
||||
{supplier.iban && <p>{t('iban_inline', { value: supplier.iban })}</p>}
|
||||
{supplier.bic && <p>{t('bic_inline', { value: supplier.bic })}</p>}
|
||||
<p>{t('payment_terms_inline', { days: supplier.default_payment_terms })}</p>
|
||||
<p>{t('currency_inline', { currency: supplier.default_currency })}</p>
|
||||
{supplier.default_expense_account && <p>{t('expense_account_inline', { account: supplier.default_expense_account })}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<DetailSection kicker={t('contact_section_title')}>
|
||||
<DefRow label={t('def_email')}>{supplier.email || <DefEmpty />}</DefRow>
|
||||
<DefRow label={t('def_phone')}>{supplier.phone || <DefEmpty />}</DefRow>
|
||||
<DefRow label={t('def_address')}>
|
||||
{supplier.address_line1 || supplier.city ? (
|
||||
<div>
|
||||
{supplier.address_line1 && <p>{supplier.address_line1}</p>}
|
||||
{supplier.address_line2 && <p>{supplier.address_line2}</p>}
|
||||
{(supplier.postal_code || supplier.city) && (
|
||||
<p>{[supplier.postal_code, supplier.city].filter(Boolean).join(' ')}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<DefEmpty />
|
||||
)}
|
||||
</DefRow>
|
||||
{supplier.vat_number && <DefRow label={t('def_vat')}>{supplier.vat_number}</DefRow>}
|
||||
</DetailSection>
|
||||
|
||||
{/* Invoices */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base">{t('invoices_section_title')}</CardTitle>
|
||||
<Link href="/supplier-invoices?new=1">
|
||||
<Button size="sm">
|
||||
<FileText className="mr-2 h-4 w-4" />
|
||||
{t('new_invoice')}
|
||||
</Button>
|
||||
<DetailSection kicker={t('payment_section_title')}>
|
||||
{supplier.bankgiro && (
|
||||
<DefRow label={t('def_bankgiro')}>
|
||||
<span className="tabular-nums">{supplier.bankgiro}</span>
|
||||
</DefRow>
|
||||
)}
|
||||
{supplier.plusgiro && (
|
||||
<DefRow label={t('def_plusgiro')}>
|
||||
<span className="tabular-nums">{supplier.plusgiro}</span>
|
||||
</DefRow>
|
||||
)}
|
||||
{supplier.iban && (
|
||||
<DefRow label={t('def_iban')}>
|
||||
<span className="tabular-nums">{supplier.iban}</span>
|
||||
</DefRow>
|
||||
)}
|
||||
{supplier.bic && (
|
||||
<DefRow label={t('def_bic')}>
|
||||
<span className="tabular-nums">{supplier.bic}</span>
|
||||
</DefRow>
|
||||
)}
|
||||
<DefRow label={t('def_payment_terms')}>
|
||||
{t('payment_terms_value', { days: supplier.default_payment_terms })}
|
||||
</DefRow>
|
||||
<DefRow label={t('def_currency')}>{supplier.default_currency}</DefRow>
|
||||
<DefRow label={t('def_expense_account')}>
|
||||
{supplier.default_expense_account ? (
|
||||
<span className="tabular-nums">{supplier.default_expense_account}</span>
|
||||
) : (
|
||||
<DefEmpty />
|
||||
)}
|
||||
</DefRow>
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection
|
||||
kicker={t('invoices_section_title')}
|
||||
aside={
|
||||
<Link href="/supplier-invoices?new=1" className={QUIET_LINK_CLASS}>
|
||||
{t('new_invoice')}
|
||||
</Link>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
}
|
||||
>
|
||||
{invoices.length === 0 ? (
|
||||
<p className="text-muted-foreground text-sm text-center py-8">
|
||||
<p className="text-muted-foreground text-sm py-4">
|
||||
{t('no_invoices')}
|
||||
</p>
|
||||
) : (
|
||||
@@ -366,8 +402,7 @@ export default function SupplierDetailPage() {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DetailSection>
|
||||
|
||||
<DestructiveConfirmDialog {...confirmDialogProps} />
|
||||
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
/**
|
||||
* Register-detail document grammar (customers, suppliers, articles).
|
||||
*
|
||||
* A detail page is one flowing document, not a pile of cards: each group of
|
||||
* facts is introduced by an uppercase hairline kicker and set as aligned
|
||||
* label/value rows. The kicker's hairline is the only rule; groups are
|
||||
* separated by whitespace, never borders (Living Paper, design.md).
|
||||
*/
|
||||
|
||||
export function DetailSection({
|
||||
kicker,
|
||||
aside,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
kicker: string
|
||||
/** Optional right-aligned element on the kicker line: a count, a quiet action. */
|
||||
aside?: React.ReactNode
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<section className={className}>
|
||||
<div className="flex items-baseline justify-between gap-4 border-b border-border pb-2">
|
||||
<h2 className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{kicker}
|
||||
</h2>
|
||||
{aside}
|
||||
</div>
|
||||
<div className="mt-3">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export function DefRow({
|
||||
label,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'grid grid-cols-[8rem_1fr] gap-x-6 py-2 text-sm sm:grid-cols-[10rem_1fr]',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="text-muted-foreground">{label}</div>
|
||||
<div className="min-w-0">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Muted placeholder for a value that matters but is not filled in. The en dash
|
||||
* is the literal rendered value (same vocabulary as the orders list), which is
|
||||
* why it is allowed to be a dash at all.
|
||||
*/
|
||||
export function DefEmpty() {
|
||||
return <span className="text-muted-foreground">{'–'}</span>
|
||||
}
|
||||
+23
-1
@@ -1274,9 +1274,17 @@
|
||||
"label_personal_number": "Personal no.:",
|
||||
"label_vat": "VAT:",
|
||||
"label_payment_terms": "Payment terms:",
|
||||
"def_email": "Email",
|
||||
"def_phone": "Phone",
|
||||
"def_address": "Address",
|
||||
"def_customer_number": "Customer number",
|
||||
"def_org_number": "Org. no.",
|
||||
"def_personal_number": "Personal number",
|
||||
"def_vat": "VAT number",
|
||||
"def_payment_terms": "Payment terms",
|
||||
"payment_terms_value": "{days} days",
|
||||
"verified": "Verified",
|
||||
"invoice_count": "{count} invoices",
|
||||
"invoice_count": "{count, plural, one {# invoice} other {# invoices}}",
|
||||
"load_failed_title": "Could not load customer",
|
||||
"load_failed_description": "Customer not found.",
|
||||
"updated_title": "Customer updated",
|
||||
@@ -4456,6 +4464,20 @@
|
||||
"payment_terms_inline": "Payment terms: {days} days",
|
||||
"currency_inline": "Currency: {currency}",
|
||||
"expense_account_inline": "Expense account: {account}",
|
||||
"delete": "Delete",
|
||||
"kicker_org": "Org. no. {number}",
|
||||
"def_email": "Email",
|
||||
"def_phone": "Phone",
|
||||
"def_address": "Address",
|
||||
"def_vat": "VAT number",
|
||||
"def_bankgiro": "Bankgiro",
|
||||
"def_plusgiro": "Plusgiro",
|
||||
"def_iban": "IBAN",
|
||||
"def_bic": "BIC",
|
||||
"def_payment_terms": "Payment terms",
|
||||
"payment_terms_value": "{days} days",
|
||||
"def_currency": "Currency",
|
||||
"def_expense_account": "Expense account",
|
||||
"invoices_section_title": "Invoices",
|
||||
"new_invoice": "New invoice",
|
||||
"no_invoices": "No invoices registered for this supplier",
|
||||
|
||||
+23
-1
@@ -1274,9 +1274,17 @@
|
||||
"label_personal_number": "Persnr:",
|
||||
"label_vat": "VAT:",
|
||||
"label_payment_terms": "Betalningsvillkor:",
|
||||
"def_email": "E-post",
|
||||
"def_phone": "Telefon",
|
||||
"def_address": "Adress",
|
||||
"def_customer_number": "Kundnummer",
|
||||
"def_org_number": "Org.nr",
|
||||
"def_personal_number": "Personnummer",
|
||||
"def_vat": "VAT-nummer",
|
||||
"def_payment_terms": "Betalningsvillkor",
|
||||
"payment_terms_value": "{days} dagar",
|
||||
"verified": "Verifierad",
|
||||
"invoice_count": "{count} fakturor",
|
||||
"invoice_count": "{count, plural, one {# faktura} other {# fakturor}}",
|
||||
"load_failed_title": "Kunde inte ladda kund",
|
||||
"load_failed_description": "Kunden hittades inte.",
|
||||
"updated_title": "Kund uppdaterad",
|
||||
@@ -4456,6 +4464,20 @@
|
||||
"payment_terms_inline": "Betalningsvillkor: {days} dagar",
|
||||
"currency_inline": "Valuta: {currency}",
|
||||
"expense_account_inline": "Kostnadskonto: {account}",
|
||||
"delete": "Ta bort",
|
||||
"kicker_org": "Org.nr {number}",
|
||||
"def_email": "E-post",
|
||||
"def_phone": "Telefon",
|
||||
"def_address": "Adress",
|
||||
"def_vat": "VAT-nummer",
|
||||
"def_bankgiro": "Bankgiro",
|
||||
"def_plusgiro": "Plusgiro",
|
||||
"def_iban": "IBAN",
|
||||
"def_bic": "BIC",
|
||||
"def_payment_terms": "Betalningsvillkor",
|
||||
"payment_terms_value": "{days} dagar",
|
||||
"def_currency": "Valuta",
|
||||
"def_expense_account": "Kostnadskonto",
|
||||
"invoices_section_title": "Fakturor",
|
||||
"new_invoice": "Ny faktura",
|
||||
"no_invoices": "Inga fakturor registrerade för denna leverantör",
|
||||
|
||||
Reference in New Issue
Block a user