Files
accounted/components/bookkeeping/assets/EditAssetDialog.tsx
T
9686b54b41 refactor(design): lock the border-radius ladder, one radius per role (#1607)
Seven radii were in circulation (4/5/6/8/12/16px + pill) with no rule for
which went where; one toolbar row on /transactions mixed four shape
languages. This locks a 4-tier ladder (design.md convention 16):

- pill: interactive toolbar controls (buttons, chips, pickers, segmented
  controls, toolbar search, count nubs)
- rounded-xl (12px): overlay tier: page panel, dialogs, slide-overs
- rounded-lg (8px): cards, form fields, popover/menu content, boxes
- rounded-sm (4px): nested leaves (menu items, checkboxes, kbd/code nubs)

Changes:
- New SegmentedControl primitive (pill-in-pill tablist, h-8) replaces the
  hand-rolled bg-muted/70 tablist copied across 11 files
- New ToolbarSearch primitive (pill, h-8) adopted on 9 page toolbars;
  dialog/picker searches keep the rounded-lg Input
- dialog.tsx 8px -> 12px, matching SettingsModal/slide-over/CommandPalette
- ContextPicker chips at the shared h-8 toolbar height
- ~300 rounded-md / bare rounded call sites remapped by role; auth icon
  tiles and the mobile nav sheet come down from 16px to 12px
- rounded-md, bare rounded, rounded-2xl and rounded-[Npx] are dead
  vocabulary, enforced by a new off-ladder-radius check in check:guards

Verified: lint 0 errors, 14422 unit tests pass, check:guards green, tsc
clean on all changed files, sandbox screenshots of transactions/
bookkeeping/granskning toolbars and the Ny verifikation dialog.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-08-14 08:55:37 +02:00

249 lines
8.6 KiB
TypeScript

'use client'
import { useState } from 'react'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Loader2, Lock } from 'lucide-react'
import { useToast } from '@/components/ui/use-toast'
import { useCanWrite } from '@/lib/hooks/use-can-write'
import { getErrorMessage } from '@/lib/errors/get-error-message'
import type { Asset, AssetCategory } from '@/types'
/** The list route annotates each asset with whether any depreciation has been
* posted against it. When true, the acquisition-basis fields are locked. */
type EditableAsset = Asset & { has_posted_depreciation?: boolean }
interface EditAssetDialogProps {
asset: EditableAsset
open: boolean
onOpenChange: (open: boolean) => void
onSaved: () => void
}
// Same category labels as CreateAssetDialog.
const CATEGORY_OPTIONS: { value: AssetCategory; label: string }[] = [
{ value: 'computer', label: 'Dator / IT-utrustning' },
{ value: 'equipment', label: 'Inventarier' },
{ value: 'machinery', label: 'Maskiner' },
{ value: 'vehicle', label: 'Fordon' },
{ value: 'building', label: 'Byggnad' },
{ value: 'land_improvement', label: 'Markanläggning' },
{ value: 'immaterial', label: 'Immateriell tillgång' },
{ value: 'other_tangible', label: 'Övrig materiell tillgång' },
]
export function EditAssetDialog({ asset, open, onOpenChange, onSaved }: EditAssetDialogProps) {
const { toast } = useToast()
const { canWrite } = useCanWrite()
// Once depreciation has been booked, acquisition date/cost/category are
// locked: a real change has to go through storno. The server enforces the
// same rule (ASSET_CORRECTION_BLOCKED); this just makes it visible up front.
const basisLocked = asset.has_posted_depreciation === true
const [name, setName] = useState(asset.name)
const [category, setCategory] = useState<AssetCategory>(asset.category)
const [acquisitionDate, setAcquisitionDate] = useState(asset.acquisition_date)
const [acquisitionCost, setAcquisitionCost] = useState(String(asset.acquisition_cost))
const [usefulLifeYears, setUsefulLifeYears] = useState(
String(Math.round(asset.useful_life_months / 12)),
)
const [submitting, setSubmitting] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleSubmit = async () => {
setError(null)
const trimmedName = name.trim()
if (!trimmedName) {
setError('Namnet får inte vara tomt.')
return
}
// Send only what actually changed. This keeps a name-only edit on a
// depreciated asset from tripping the acquisition-basis guard, and avoids
// clobbering a useful_life_months value that isn't a clean multiple of 12.
const patch: Record<string, unknown> = {}
if (trimmedName !== asset.name) patch.name = trimmedName
if (!basisLocked) {
if (category !== asset.category) patch.category = category
if (acquisitionDate !== asset.acquisition_date) patch.acquisition_date = acquisitionDate
const cost = parseFloat(acquisitionCost)
if (!Number.isFinite(cost) || cost <= 0) {
setError('Anskaffningsvärdet måste vara större än 0.')
return
}
if (cost !== Number(asset.acquisition_cost)) patch.acquisition_cost = cost
}
const years = parseInt(usefulLifeYears, 10)
if (!Number.isFinite(years) || years <= 0) {
setError('Ange en avskrivningstid (minst 1 år).')
return
}
const months = years * 12
if (months !== asset.useful_life_months) patch.useful_life_months = months
if (Object.keys(patch).length === 0) {
toast({ title: 'Inga ändringar', description: 'Inget att spara.' })
onOpenChange(false)
return
}
setSubmitting(true)
try {
const res = await fetch(`/api/assets/${asset.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(patch),
})
const body = await res.json()
if (!res.ok) {
setError(getErrorMessage(body?.error ?? body) || 'Kunde inte spara ändringen.')
return
}
toast({ title: 'Tillgång uppdaterad', description: trimmedName })
onSaved()
} catch (err) {
setError(getErrorMessage(err))
} finally {
setSubmitting(false)
}
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Ändra anläggningstillgång</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div className="space-y-1.5">
<Label htmlFor="edit-asset-name">Namn</Label>
<Input
id="edit-asset-name"
value={name}
onChange={(e) => setName(e.target.value)}
autoFocus
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="edit-asset-category">Kategori</Label>
<Select
value={category}
onValueChange={(v) => setCategory(v as AssetCategory)}
disabled={basisLocked}
>
<SelectTrigger id="edit-asset-category">
<SelectValue />
</SelectTrigger>
<SelectContent>
{CATEGORY_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{o.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5">
<Label htmlFor="edit-asset-date">Anskaffat</Label>
<Input
id="edit-asset-date"
type="date"
value={acquisitionDate}
onChange={(e) => setAcquisitionDate(e.target.value)}
disabled={basisLocked}
className="tabular-nums"
/>
</div>
<div className="space-y-1.5">
<Label htmlFor="edit-asset-cost">Anskaffningsvärde (kr)</Label>
<Input
id="edit-asset-cost"
type="number"
step="1"
min="0"
value={acquisitionCost}
onChange={(e) => setAcquisitionCost(e.target.value)}
disabled={basisLocked}
className="tabular-nums"
/>
</div>
</div>
{basisLocked && (
<div className="flex items-start gap-2 rounded-lg border border-border bg-muted/30 p-3 text-xs text-muted-foreground">
<Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" />
<span>
Anskaffningsdatum, anskaffningsvärde och kategori är låsta eftersom avskrivningar
redan har bokförts. Återför avskrivningen (storno) eller använd avyttring för att
ändra grunduppgifterna. Namn och avskrivningstid kan fortfarande justeras.
</span>
</div>
)}
<div className="space-y-1.5">
<Label htmlFor="edit-asset-life">Avskrivningstid (år)</Label>
<Input
id="edit-asset-life"
type="number"
min="1"
max="50"
step="1"
value={usefulLifeYears}
onChange={(e) => setUsefulLifeYears(e.target.value)}
className="tabular-nums"
/>
</div>
{error && (
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
{error}
</div>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
Avbryt
</Button>
<Button
onClick={handleSubmit}
disabled={!canWrite || submitting}
title={
!canWrite ? 'Endast användare med skrivrättigheter kan ändra tillgångar.' : undefined
}
>
{!canWrite && <Lock className="mr-1 h-4 w-4" />}
{submitting ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> Sparar
</>
) : (
'Spara'
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}