Jakob Wennberg
ec27228a8e
Em dashes (—) and en dashes (–) had spread across comments, docs, tests, and a few UI strings, reading as AI-generated boilerplate rather than house style. Replaced each with punctuation matching its context: colon for explanatory clauses, comma for asides, plain hyphen for numeric/legal ranges (e.g. "21-23§"), "to"/"till" for date ranges, parentheses for paired-dash asides. messages/en.json and messages/sv.json were fixed by hand together to keep sv/en in sync. Left untouched where the dash is the functional subject rather than decorative punctuation: date-range-parser.ts's separator regex, charset-repair.ts's CP1252 byte-mapping table (and its test), the SIE encoding mojibake docs, generic-csv.ts's minus-sign normalizer, the agent system-prompt files that already instruct against em dashes, and a golden iXBRL test fixture compared byte-for-byte. Also fixes two bugs surfaced along the way: an off-by-one in ApiKeysPanel's scope-label split (a leftover from an earlier partial pass), and a charset-repair test that had lost the literal en-dash it exists to verify. Regenerated the agent atom seed migration (skills:generate) since 27 SKILL.md files changed. Added a CLAUDE.md rule against em/en dashes, with an explicit carve-out for the functional-dash cases above. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
739 lines
25 KiB
TypeScript
739 lines
25 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import { useLocale, useTranslations } from 'next-intl'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import { EmptyState } from '@/components/ui/empty-state'
|
|
import { useToast } from '@/components/ui/use-toast'
|
|
import { getErrorMessage, type ErrorLocale } from '@/lib/errors/get-error-message'
|
|
import { useCanWrite } from '@/lib/hooks/use-can-write'
|
|
import { formatDate } from '@/lib/utils'
|
|
import {
|
|
Plus,
|
|
Search,
|
|
Lock,
|
|
Tags,
|
|
ChevronUp,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
ChevronsUpDown,
|
|
Loader2,
|
|
} from 'lucide-react'
|
|
import DimensionValueForm, {
|
|
type DimensionValueFormInput,
|
|
} from '@/components/dimensions/DimensionValueForm'
|
|
import {
|
|
fetchDimensions,
|
|
PROJECT_DIM_NO,
|
|
type DimensionDto,
|
|
type DimensionValueDto,
|
|
} from '@/components/dimensions/types'
|
|
|
|
type SortColumn = 'code' | 'name' | 'status' | 'start_date' | 'end_date'
|
|
type SortDir = 'asc' | 'desc'
|
|
|
|
type DialogState =
|
|
| { mode: 'create' }
|
|
| { mode: 'edit'; value: DimensionValueDto }
|
|
| null
|
|
|
|
function compareStrings(a: string, b: string): number {
|
|
return a.localeCompare(b, 'sv', { sensitivity: 'base' })
|
|
}
|
|
|
|
/**
|
|
* Register for dimension values (kostnadsställen & projekt): the
|
|
* customers-page register recipe hosted behind one segmented tab per registry
|
|
* dimension. Archive rides the edit form's aktiv switch (PATCH is_active);
|
|
* delete lives only in the edit dialog and surfaces the DB retention
|
|
* trigger's Swedish "…arkivera det istället" message when the value is
|
|
* referenced by posted lines.
|
|
*/
|
|
export default function DimensionsManager() {
|
|
const t = useTranslations('dimensions')
|
|
const errorLocale = useLocale() as ErrorLocale
|
|
const { toast } = useToast()
|
|
const { canWrite } = useCanWrite()
|
|
|
|
const [dimensions, setDimensions] = useState<DimensionDto[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [loadFailed, setLoadFailed] = useState(false)
|
|
const [activeDimId, setActiveDimId] = useState<string | null>(null)
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [sortColumn, setSortColumn] = useState<SortColumn>('code')
|
|
const [sortDir, setSortDir] = useState<SortDir>('asc')
|
|
const [dialog, setDialog] = useState<DialogState>(null)
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [newDimDialogOpen, setNewDimDialogOpen] = useState(false)
|
|
const [isCreatingDimension, setIsCreatingDimension] = useState(false)
|
|
|
|
const loadDimensions = useCallback(
|
|
async (showSpinner: boolean) => {
|
|
if (showSpinner) setIsLoading(true)
|
|
try {
|
|
const dims = await fetchDimensions()
|
|
const sorted = [...dims].sort(
|
|
(a, b) => a.sort_order - b.sort_order || a.sie_dim_no - b.sie_dim_no,
|
|
)
|
|
setDimensions(sorted)
|
|
setLoadFailed(false)
|
|
setActiveDimId((prev) =>
|
|
prev && sorted.some((d) => d.id === prev) ? prev : (sorted[0]?.id ?? null),
|
|
)
|
|
} catch (err) {
|
|
setLoadFailed(true)
|
|
toast({
|
|
title: t('load_failed_title'),
|
|
description: getErrorMessage(err, { locale: errorLocale }),
|
|
variant: 'destructive',
|
|
})
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
},
|
|
[toast, t, errorLocale],
|
|
)
|
|
|
|
useEffect(() => {
|
|
void loadDimensions(true)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const activeDim = useMemo(
|
|
() => dimensions.find((d) => d.id === activeDimId) ?? null,
|
|
[dimensions, activeDimId],
|
|
)
|
|
const isProjectTab = activeDim?.sie_dim_no === PROJECT_DIM_NO
|
|
|
|
// Parent (#UNDERDIM) of the active tab's dimension, when it has one.
|
|
const parentDimName = useMemo(() => {
|
|
if (!activeDim || activeDim.parent_sie_dim_no == null) return null
|
|
const parent = dimensions.find(
|
|
(d) => d.sie_dim_no === activeDim.parent_sie_dim_no,
|
|
)
|
|
return parent?.name ?? `#${activeDim.parent_sie_dim_no}`
|
|
}, [dimensions, activeDim])
|
|
|
|
const filteredValues = useMemo(() => {
|
|
if (!activeDim) return []
|
|
const term = searchTerm.trim().toLowerCase()
|
|
if (!term) return activeDim.values
|
|
return activeDim.values.filter(
|
|
(v) =>
|
|
v.code.toLowerCase().includes(term) || v.name.toLowerCase().includes(term),
|
|
)
|
|
}, [activeDim, searchTerm])
|
|
|
|
const sortedValues = useMemo(() => {
|
|
const arr = [...filteredValues]
|
|
arr.sort((a, b) => {
|
|
let cmp = 0
|
|
switch (sortColumn) {
|
|
case 'code':
|
|
cmp = compareStrings(a.code, b.code)
|
|
break
|
|
case 'name':
|
|
cmp = compareStrings(a.name, b.name)
|
|
break
|
|
case 'status':
|
|
cmp = Number(b.is_active) - Number(a.is_active) || compareStrings(a.code, b.code)
|
|
break
|
|
case 'start_date':
|
|
cmp = compareStrings(a.start_date ?? '', b.start_date ?? '')
|
|
break
|
|
case 'end_date':
|
|
cmp = compareStrings(a.end_date ?? '', b.end_date ?? '')
|
|
break
|
|
}
|
|
return sortDir === 'asc' ? cmp : -cmp
|
|
})
|
|
return arr
|
|
}, [filteredValues, sortColumn, sortDir])
|
|
|
|
const updateSort = useCallback(
|
|
(column: SortColumn) => {
|
|
if (column === sortColumn) {
|
|
setSortDir((prev) => (prev === 'asc' ? 'desc' : 'asc'))
|
|
} else {
|
|
setSortColumn(column)
|
|
setSortDir('asc')
|
|
}
|
|
},
|
|
[sortColumn],
|
|
)
|
|
|
|
async function handleSubmitValue(input: DimensionValueFormInput) {
|
|
if (!activeDim || !dialog) return
|
|
setIsSaving(true)
|
|
try {
|
|
if (dialog.mode === 'edit') {
|
|
const res = await fetch(
|
|
`/api/dimensions/${activeDim.id}/values/${dialog.value.id}`,
|
|
{
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: input.name,
|
|
is_active: input.is_active,
|
|
start_date: input.start_date,
|
|
end_date: input.end_date,
|
|
}),
|
|
},
|
|
)
|
|
const json = await res.json().catch(() => null)
|
|
if (!res.ok) throw json ?? new Error()
|
|
toast({ title: t('updated_title') })
|
|
} else {
|
|
// "Create as archived" rides the create contract's is_active field:
|
|
// one atomic POST, no follow-up PATCH.
|
|
const body: Record<string, unknown> = {
|
|
code: input.code,
|
|
name: input.name,
|
|
is_active: input.is_active,
|
|
}
|
|
if (input.start_date) body.start_date = input.start_date
|
|
if (input.end_date) body.end_date = input.end_date
|
|
const res = await fetch(`/api/dimensions/${activeDim.id}/values`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
})
|
|
const json = await res.json().catch(() => null)
|
|
if (!res.ok) throw json ?? new Error()
|
|
toast({
|
|
title: t('created_title'),
|
|
description: t('created_description', { code: input.code }),
|
|
})
|
|
}
|
|
setDialog(null)
|
|
await loadDimensions(false)
|
|
} catch (err) {
|
|
toast({
|
|
title: t('save_failed_title'),
|
|
description: getErrorMessage(err, { locale: errorLocale }),
|
|
variant: 'destructive',
|
|
})
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleCreateDimension(input: NewDimensionFormInput) {
|
|
setIsCreatingDimension(true)
|
|
try {
|
|
// Contract: sie_dim_no omitted → the server picks the next free ≥20;
|
|
// parent_sie_dim_no omitted → no #UNDERDIM hierarchy.
|
|
const body: Record<string, unknown> = {
|
|
name: input.name,
|
|
resets_annually: input.resets_annually,
|
|
}
|
|
if (input.sie_dim_no !== null) body.sie_dim_no = input.sie_dim_no
|
|
if (input.parent_sie_dim_no !== null) {
|
|
body.parent_sie_dim_no = input.parent_sie_dim_no
|
|
}
|
|
const res = await fetch('/api/dimensions', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
})
|
|
const json = await res.json().catch(() => null)
|
|
if (!res.ok) throw json ?? new Error()
|
|
const createdId = (json?.data?.dimension as { id?: string } | undefined)?.id
|
|
toast({ title: t('dim_created_title') })
|
|
setNewDimDialogOpen(false)
|
|
await loadDimensions(false)
|
|
if (createdId) {
|
|
setActiveDimId(createdId)
|
|
setSearchTerm('')
|
|
}
|
|
} catch (err) {
|
|
toast({
|
|
title: t('save_failed_title'),
|
|
description: getErrorMessage(err, { locale: errorLocale }),
|
|
variant: 'destructive',
|
|
})
|
|
} finally {
|
|
setIsCreatingDimension(false)
|
|
}
|
|
}
|
|
|
|
async function handleDeleteValue() {
|
|
if (!activeDim || dialog?.mode !== 'edit') return
|
|
setIsSaving(true)
|
|
try {
|
|
const res = await fetch(
|
|
`/api/dimensions/${activeDim.id}/values/${dialog.value.id}`,
|
|
{ method: 'DELETE' },
|
|
)
|
|
if (!res.ok) {
|
|
const json = await res.json().catch(() => null)
|
|
// Values referenced by posted lines cannot be deleted: the DB
|
|
// retention trigger's Swedish message ("…arkivera det istället")
|
|
// rides the error envelope; surface it verbatim.
|
|
toast({
|
|
title: t('delete_failed_title'),
|
|
description: getErrorMessage(json, { locale: errorLocale }),
|
|
variant: 'destructive',
|
|
})
|
|
return
|
|
}
|
|
toast({ title: t('deleted_title') })
|
|
setDialog(null)
|
|
await loadDimensions(false)
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}
|
|
|
|
function SortableHeader({
|
|
column,
|
|
label,
|
|
className,
|
|
}: {
|
|
column: SortColumn
|
|
label: string
|
|
className?: string
|
|
}) {
|
|
const isActive = sortColumn === column
|
|
const Icon = isActive ? (sortDir === 'asc' ? ChevronUp : ChevronDown) : ChevronsUpDown
|
|
return (
|
|
<TableHead className={className}>
|
|
<button
|
|
type="button"
|
|
onClick={() => updateSort(column)}
|
|
className="inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{label}
|
|
<Icon className="h-3 w-3 opacity-70" aria-hidden="true" />
|
|
</button>
|
|
</TableHead>
|
|
)
|
|
}
|
|
|
|
function renderStatusBadge(value: DimensionValueDto) {
|
|
return value.is_active ? (
|
|
<Badge variant="success">{t('status_active')}</Badge>
|
|
) : (
|
|
<Badge variant="secondary">{t('status_archived')}</Badge>
|
|
)
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="space-y-8">
|
|
<Skeleton className="h-10 w-64" />
|
|
<Card>
|
|
<CardContent className="p-6 space-y-3">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<Skeleton key={i} className="h-10 w-full" />
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (loadFailed && dimensions.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<EmptyState
|
|
icon={Tags}
|
|
title={t('load_failed_title')}
|
|
description={t('load_failed_description')}
|
|
actionLabel={t('retry')}
|
|
onAction={() => void loadDimensions(true)}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Segmented tabs: one per registry dimension (1 Kostnadsställe,
|
|
6 Projekt, plus any custom 20+ dims) */}
|
|
<div className="space-y-2">
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<Tabs
|
|
value={activeDimId ?? undefined}
|
|
onValueChange={(id) => {
|
|
setActiveDimId(id)
|
|
setSearchTerm('')
|
|
}}
|
|
>
|
|
<TabsList>
|
|
{dimensions.map((dim) => (
|
|
<TabsTrigger key={dim.id} value={dim.id}>
|
|
{dim.name}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
variant="outline"
|
|
disabled={!canWrite}
|
|
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
|
onClick={() => setNewDimDialogOpen(true)}
|
|
>
|
|
{t('new_dimension')}
|
|
</Button>
|
|
<Button
|
|
disabled={!canWrite}
|
|
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
|
onClick={() => setDialog({ mode: 'create' })}
|
|
>
|
|
{canWrite ? <Plus className="mr-2 h-4 w-4" /> : <Lock className="mr-2 h-4 w-4" />}
|
|
{t('new_value')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{parentDimName && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{t('subdimension_of', { parent: parentDimName })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={t('search_placeholder')}
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
|
|
{/* Value list */}
|
|
{sortedValues.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
{searchTerm ? (
|
|
<EmptyState
|
|
icon={Search}
|
|
title={t('no_search_results_title')}
|
|
description={t('no_search_results_description', { term: searchTerm })}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
icon={Tags}
|
|
title={t('empty_title')}
|
|
description={t('empty_description', { dimension: activeDim?.name ?? '' })}
|
|
actionLabel={canWrite ? t('new_value') : undefined}
|
|
onAction={canWrite ? () => setDialog({ mode: 'create' }) : undefined}
|
|
/>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<>
|
|
{/* Desktop table */}
|
|
<Card className="hidden md:block">
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<SortableHeader column="code" label={t('col_code')} />
|
|
<SortableHeader column="name" label={t('col_name')} />
|
|
<SortableHeader column="status" label={t('col_status')} />
|
|
{isProjectTab && (
|
|
<>
|
|
<SortableHeader column="start_date" label={t('col_start')} />
|
|
<SortableHeader column="end_date" label={t('col_end')} />
|
|
</>
|
|
)}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{sortedValues.map((value) => (
|
|
<TableRow
|
|
key={value.id}
|
|
className="cursor-pointer"
|
|
onClick={() => setDialog({ mode: 'edit', value })}
|
|
>
|
|
<TableCell className="font-mono">{value.code}</TableCell>
|
|
<TableCell className="font-medium">{value.name}</TableCell>
|
|
<TableCell>{renderStatusBadge(value)}</TableCell>
|
|
{isProjectTab && (
|
|
<>
|
|
<TableCell className="tabular-nums text-muted-foreground">
|
|
{value.start_date ? formatDate(value.start_date) : '-'}
|
|
</TableCell>
|
|
<TableCell className="tabular-nums text-muted-foreground">
|
|
{value.end_date ? formatDate(value.end_date) : '-'}
|
|
</TableCell>
|
|
</>
|
|
)}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Mobile card list */}
|
|
<div className="grid gap-4 md:hidden">
|
|
{sortedValues.map((value) => (
|
|
<Card
|
|
key={value.id}
|
|
className="cursor-pointer transition-colors duration-150 hover:bg-secondary/60"
|
|
onClick={() => setDialog({ mode: 'edit', value })}
|
|
>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<p className="font-mono text-sm">{value.code}</p>
|
|
<p className="text-sm text-muted-foreground mt-1 truncate">
|
|
{value.name}
|
|
</p>
|
|
</div>
|
|
{renderStatusBadge(value)}
|
|
</div>
|
|
</CardHeader>
|
|
{isProjectTab && (value.start_date || value.end_date) && (
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground tabular-nums">
|
|
{value.start_date ? formatDate(value.start_date) : '-'}
|
|
{' till '}
|
|
{value.end_date ? formatDate(value.end_date) : '-'}
|
|
</p>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Create/edit dialog */}
|
|
<Dialog open={dialog !== null} onOpenChange={(open) => !open && setDialog(null)}>
|
|
<DialogContent className="sm:max-w-2xl max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{dialog?.mode === 'edit'
|
|
? t('edit_value_title')
|
|
: t('new_value_title', { dimension: activeDim?.name ?? '' })}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
{activeDim && dialog && (
|
|
<DimensionValueForm
|
|
key={dialog.mode === 'edit' ? dialog.value.id : 'create'}
|
|
dimension={activeDim}
|
|
value={dialog.mode === 'edit' ? dialog.value : null}
|
|
isSaving={isSaving}
|
|
onSubmit={handleSubmitValue}
|
|
onDelete={dialog.mode === 'edit' ? handleDeleteValue : undefined}
|
|
/>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* New dimension dialog — the content (and thus the form state)
|
|
unmounts on close, so each open starts from a blank form. */}
|
|
<Dialog
|
|
open={newDimDialogOpen}
|
|
onOpenChange={(open) => !open && setNewDimDialogOpen(false)}
|
|
>
|
|
<DialogContent className="sm:max-w-lg max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('new_dimension_title')}</DialogTitle>
|
|
</DialogHeader>
|
|
<NewDimensionForm
|
|
dimensions={dimensions}
|
|
isSaving={isCreatingDimension}
|
|
onSubmit={handleCreateDimension}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface NewDimensionFormInput {
|
|
name: string
|
|
/** null → omit from the POST; the server picks the next free number ≥20. */
|
|
sie_dim_no: number | null
|
|
resets_annually: boolean
|
|
/** null → omit from the POST; no #UNDERDIM hierarchy. */
|
|
parent_sie_dim_no: number | null
|
|
}
|
|
|
|
/**
|
|
* Create form for a custom registry dimension (#DIM 20+). The parent
|
|
* (#UNDERDIM) select is an advanced, rarely-used SIE concept — kept behind a
|
|
* quiet disclosure so the common path stays name + number.
|
|
*/
|
|
function NewDimensionForm({
|
|
dimensions,
|
|
isSaving,
|
|
onSubmit,
|
|
}: {
|
|
/** Existing dims — active ones populate the parent select. */
|
|
dimensions: DimensionDto[]
|
|
isSaving: boolean
|
|
onSubmit: (input: NewDimensionFormInput) => void | Promise<void>
|
|
}) {
|
|
const t = useTranslations('dimensions')
|
|
const [name, setName] = useState('')
|
|
const [numberStr, setNumberStr] = useState('')
|
|
const [resetsAnnually, setResetsAnnually] = useState(true)
|
|
const [showAdvanced, setShowAdvanced] = useState(false)
|
|
const [parent, setParent] = useState('none')
|
|
const [nameError, setNameError] = useState<string | null>(null)
|
|
const [numberError, setNumberError] = useState<string | null>(null)
|
|
|
|
const parentOptions = dimensions.filter((d) => d.is_active)
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
const trimmedName = name.trim()
|
|
const trimmedNumber = numberStr.trim()
|
|
let valid = true
|
|
if (!trimmedName || trimmedName.length > 60) {
|
|
setNameError(t('dim_form_name_invalid'))
|
|
valid = false
|
|
} else {
|
|
setNameError(null)
|
|
}
|
|
let sieDimNo: number | null = null
|
|
if (trimmedNumber) {
|
|
const parsed = Number(trimmedNumber)
|
|
if (!Number.isInteger(parsed) || parsed < 20) {
|
|
setNumberError(t('dim_form_number_invalid'))
|
|
valid = false
|
|
} else {
|
|
setNumberError(null)
|
|
sieDimNo = parsed
|
|
}
|
|
} else {
|
|
setNumberError(null)
|
|
}
|
|
if (!valid) return
|
|
void onSubmit({
|
|
name: trimmedName,
|
|
sie_dim_no: sieDimNo,
|
|
resets_annually: resetsAnnually,
|
|
parent_sie_dim_no: parent === 'none' ? null : Number(parent),
|
|
})
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="new-dimension-name">{t('form_name_label')}</Label>
|
|
<Input
|
|
id="new-dimension-name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
autoComplete="off"
|
|
autoFocus
|
|
/>
|
|
{nameError && <p className="text-xs text-destructive">{nameError}</p>}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="new-dimension-number">{t('dim_form_number_label')}</Label>
|
|
<Input
|
|
id="new-dimension-number"
|
|
type="number"
|
|
inputMode="numeric"
|
|
min={20}
|
|
step={1}
|
|
value={numberStr}
|
|
onChange={(e) => setNumberStr(e.target.value)}
|
|
className="tabular-nums"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">{t('dim_form_number_help')}</p>
|
|
{numberError && <p className="text-xs text-destructive">{numberError}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="new-dimension-resets">{t('dim_form_resets_label')}</Label>
|
|
<p className="text-xs text-muted-foreground max-w-md">
|
|
{t('dim_form_resets_help')}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="new-dimension-resets"
|
|
checked={resetsAnnually}
|
|
onCheckedChange={setResetsAnnually}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAdvanced((prev) => !prev)}
|
|
className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-expanded={showAdvanced}
|
|
>
|
|
<ChevronRight
|
|
className={`h-3 w-3 transition-transform ${showAdvanced ? 'rotate-90' : ''}`}
|
|
aria-hidden="true"
|
|
/>
|
|
{t('dim_form_advanced')}
|
|
</button>
|
|
{showAdvanced && (
|
|
<div className="space-y-2">
|
|
<Label>{t('dim_form_parent_label')}</Label>
|
|
<Select value={parent} onValueChange={setParent}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">{t('dim_form_parent_none')}</SelectItem>
|
|
{parentOptions.map((dim) => (
|
|
<SelectItem key={dim.id} value={String(dim.sie_dim_no)}>
|
|
{dim.name} ({dim.sie_dim_no})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-xs text-muted-foreground">{t('dim_form_parent_help')}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-end pt-2">
|
|
<Button type="submit" disabled={isSaving}>
|
|
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
{t('form_create')}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|