Jakob Wennberg
5b5ee8e429
* feat(ui): shared migration primitives (UI migration PR 3) The component kit every page migration (PR 4-8) builds on: - ContextPicker: the one-per-page chip-dropdown context scope (convention 8), right-aligned popover with checks and muted annotations - FyPicker: fiscal-year picker on ContextPicker with the same controlled API and per-company localStorage key as FiscalYearSelector, which it replaces page by page from PR 4 - SplitButton: primary + caret menu, last-used mode persisted per user via ui_state.create_mode (lib/ui-state/client, unit-tested); nav persistence refactored onto the same helper - ConfirmDialog: centered min-460px confirm-up-front dialog (convention 10) with pending state on an awaitable onConfirm - HelpPopover: 17px "?" after the H1 opening an anchored popover (convention 7); PageHeader gets a `help` slot - AttnLine: the one-ochre-sentence attention pattern (convention 6) with optional inline action; new AA-safe --attn token pair - RowStatus: chips-mark-exceptions helper (convention 5) - SlideOver: right review panel, 480px, 18px inset, rounded, veil + Esc (convention 13), with header kicker / body / footer slots - Stagger: .stagger-enter applied to the five target pages' list containers (bookkeeping, transactions, pending, invoices, supplier-invoices); structural loading.tsx added for supplier-invoices, customers, kpi, pending, deadlines No page adopts the new pickers/dialogs yet: that is PR 4-8, one page per PR against this kit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(ui): FyPicker chip must not double the Rakenskapsar label Real fiscal periods are often named "Rakenskapsar 2026" already; only prefix the label when the period name lacks it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { cn } from '@/lib/utils'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Loader2 } from 'lucide-react'
|
|
|
|
interface ConfirmDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
title: string
|
|
/**
|
|
* Body text that DESCRIBES THE OUTCOME up front ("Bokförs som verifikat
|
|
* A-217 med 1 250,00 kr ...") instead of the page commenting afterwards
|
|
* (UI-migration convention 10).
|
|
*/
|
|
description?: React.ReactNode
|
|
/** Optional richer body (e.g. a kontering preview) rendered below the description. */
|
|
children?: React.ReactNode
|
|
confirmLabel: string
|
|
cancelLabel?: string
|
|
/** Await-able: the dialog shows a pending state until the promise settles. */
|
|
onConfirm: () => void | Promise<void>
|
|
/** Terracotta confirm for destructive outcomes (avvisa, makulera). */
|
|
destructive?: boolean
|
|
}
|
|
|
|
/**
|
|
* Small centered confirmation dialog (min 460px on desktop): confirm before
|
|
* acting, describing the outcome, rather than commenting after the fact.
|
|
*/
|
|
export function ConfirmDialog({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
description,
|
|
children,
|
|
confirmLabel,
|
|
cancelLabel,
|
|
onConfirm,
|
|
destructive = false,
|
|
}: ConfirmDialogProps) {
|
|
const tCommon = useTranslations('common')
|
|
const [pending, setPending] = useState(false)
|
|
|
|
const handleConfirm = async () => {
|
|
try {
|
|
setPending(true)
|
|
await onConfirm()
|
|
onOpenChange(false)
|
|
} finally {
|
|
setPending(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(next) => !pending && onOpenChange(next)}>
|
|
<DialogContent className="sm:min-w-[460px] sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="font-display text-lg tracking-tight">
|
|
{title}
|
|
</DialogTitle>
|
|
{description && (
|
|
<DialogDescription className="text-[13px] leading-relaxed">
|
|
{description}
|
|
</DialogDescription>
|
|
)}
|
|
</DialogHeader>
|
|
{children}
|
|
<DialogFooter className="gap-2 sm:gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => onOpenChange(false)}
|
|
disabled={pending}
|
|
>
|
|
{cancelLabel ?? tCommon('cancel')}
|
|
</Button>
|
|
<Button
|
|
variant={destructive ? 'destructive' : 'default'}
|
|
onClick={() => void handleConfirm()}
|
|
disabled={pending}
|
|
className={cn(pending && 'cursor-wait')}
|
|
>
|
|
{pending && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />}
|
|
{confirmLabel}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|