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
@@ -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} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user