Jakob WennbergandClaude Fable 5
17dc5f12f6
* fix(articles): stop losing and mislabeling non-SEK article prices Support report (odinaero.se): EUR article prices did not stick and the register showed every price in kr. Three concrete defects, one cause: articles.currency existed in the DB and API but the UI dropped it. - Edit dialog omitted currency from initialData, so ArticleForm fell back to SEK and every save silently reset an EUR article to SEK. - Register list and detail page formatted prices without the article's currency, rendering EUR amounts as "kr". - "Spara som artikel" in the invoice editor posted the line price without the invoice's currency, so lines from EUR invoices became SEK articles. - The xlsx/csv register export stamped the kr-suffixed currency format on every price; prices now use a new suffix-free decimalColumn and a Valuta column carries the per-article code. Follow-ups (not in this diff): the article importer does not detect a Valuta column yet, and the MCP create/update_article staged schemas have no currency param (agent-created articles stay SEK). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(articles): reinstate deactivate/activate on the article detail page Support report (odinaero.se): no button to set an article inactive. Commit 8a9a930f turned DELETE into a hard delete and removed the deactivate action, but hard delete is refused for articles referenced by invoice lines (ARTICLE_IN_USE), leaving used articles with no retire path even though the API, the list badge and the i18n keys for deactivation all still exist. Adds an Inaktivera/Aktivera button next to Redigera that PATCHes the active flag (confirm dialog on deactivate, none on reactivate) and stays on the page so the status badge reflects the change. Reuses the orphaned deactivate_* keys; adds the three missing activate_* keys in both locales. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix(customers): stop resetting customer language to Swedish on every edit Same defect class as the article currency reset in this branch: the customer edit dialog's initialData omits language, CustomerForm defaults it to 'sv' and submits every field, and the PATCH route applies it. Editing any detail on an English-language customer silently flipped their invoice PDFs and emails back to Swedish. Found by a repo-wide sweep for hand-picked initialData edit dialogs; customers, suppliers and articles are the only three such call sites, and suppliers passes every form field already. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2582 lines
114 KiB
TypeScript
2582 lines
114 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useRef, useMemo } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { useTranslations } from 'next-intl'
|
||
import { createClient } from '@/lib/supabase/client'
|
||
import { useForm, useFieldArray, Controller } from 'react-hook-form'
|
||
import { Reorder } from 'framer-motion'
|
||
import { SortableRow } from '@/components/ui/sortable-row'
|
||
import { zodResolver } from '@hookform/resolvers/zod'
|
||
import { z } from 'zod'
|
||
import { addDays, format } from 'date-fns'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Input } from '@/components/ui/input'
|
||
import { TagInput } from '@/components/ui/tag-input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Textarea } from '@/components/ui/textarea'
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||
import { Separator } from '@/components/ui/separator'
|
||
import { Switch } from '@/components/ui/switch'
|
||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
import { useToast } from '@/components/ui/use-toast'
|
||
import { formatCurrency } from '@/lib/utils'
|
||
import { getVatRules, getAvailableVatRates } from '@/lib/invoices/vat-rules'
|
||
import { sortArticles } from '@/lib/articles/sort'
|
||
import { getAmountToPay } from '@/lib/invoices/rounding'
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
|
||
import { Loader2, Plus, Trash2, ArrowLeft, Send, Eye, Landmark, Lock, AlertTriangle, MoreVertical, CalendarClock, Tags, Copy } from 'lucide-react'
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuTrigger,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuRadioGroup,
|
||
DropdownMenuRadioItem,
|
||
DropdownMenuSeparator,
|
||
} from '@/components/ui/dropdown-menu'
|
||
import { useCanWrite } from '@/lib/hooks/use-can-write'
|
||
import { ConfirmationDialog } from '@/components/ui/confirmation-dialog'
|
||
import { InvoiceReviewContent } from '@/components/invoices/InvoiceReviewContent'
|
||
import { getErrorMessage } from '@/lib/errors/get-error-message'
|
||
import { useUnsavedChanges } from '@/lib/hooks/use-unsaved-changes'
|
||
import CustomerForm from '@/components/customers/CustomerForm'
|
||
import { BankDetailsSetupDialog } from '@/components/invoices/BankDetailsSetupDialog'
|
||
import { FirstInvoiceLogoPrompt } from '@/components/invoices/FirstInvoiceLogoPrompt'
|
||
import { useCompany, useCapability } from '@/contexts/CompanyContext'
|
||
import { CAPABILITY } from '@/lib/entitlements/keys'
|
||
import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
|
||
import AgentSparkleButton from '@/components/agent/AgentSparkleButton'
|
||
import {
|
||
ROT_WORK_TYPES,
|
||
RUT_WORK_TYPES,
|
||
ROT_MAX,
|
||
RUT_MAX,
|
||
computeDeduction,
|
||
} from '@/lib/invoices/rot-rut-rules'
|
||
import AccrualPeriodControl from '@/components/bookkeeping/AccrualPeriodControl'
|
||
import AccountCombobox from '@/components/bookkeeping/AccountCombobox'
|
||
import LineDimensionFields from '@/components/dimensions/LineDimensionFields'
|
||
import { DEFAULT_DEFERRED_REVENUE_ACCOUNT } from '@/lib/bookkeeping/accruals/account-suggestions'
|
||
import { countCalendarMonths } from '@/lib/bookkeeping/accruals/compute'
|
||
import type { InvoiceCopyInitial } from '@/lib/invoices/copy-invoice'
|
||
import { INVOICE_POSTING_ACCOUNT_REGEX } from '@/lib/invoices/posting-account'
|
||
import type { Customer, Currency, CreateInvoiceInput, CreateCustomerInput, InvoiceDocumentType, Article, Invoice, InvoiceItem, BASAccount } from '@/types'
|
||
|
||
const currencies: Currency[] = ['SEK', 'EUR', 'USD', 'GBP', 'NOK', 'DKK']
|
||
const units = ['st', 'tim', 'dag', 'månad', 'km', 'kg']
|
||
|
||
// A draft invoice + its line items, as fetched for the edit flow.
|
||
export type InvoiceForEdit = Invoice & { items: InvoiceItem[] }
|
||
|
||
// `create` is the original "new invoice" flow (unchanged). `edit` pre-fills the
|
||
// form from an existing DRAFT and saves via PATCH instead of POST: no review
|
||
// dialog, no number allocation, no self-billed tab, no send/logo prompts.
|
||
// `bare` renders the editor without page chrome (back button, full-size
|
||
// heading, fixed mobile action bar) so it drops into NewInvoiceDialog: the
|
||
// same convention as JournalEntryForm's `bare`.
|
||
export type InvoiceEditorProps = (
|
||
| { mode?: 'create' }
|
||
| { mode: 'edit'; initial: InvoiceForEdit }
|
||
| { mode: 'copy'; initial: InvoiceCopyInitial }
|
||
) & {
|
||
bare?: boolean
|
||
/** Open with the självfaktura tab preselected (the "Självfaktura" entry in
|
||
* the invoice list's split button). Create mode only. */
|
||
initialSelfBilled?: boolean
|
||
}
|
||
|
||
// Subset of Article fields the line picker needs to pre-fill a row.
|
||
type ArticleOption = Pick<
|
||
Article,
|
||
'id' | 'article_number' | 'name' | 'unit' | 'price_excl_vat' | 'vat_rate' | 'revenue_account' | 'currency'
|
||
>
|
||
|
||
function RequiredMark() {
|
||
return <span className="text-destructive ml-0.5" aria-hidden="true">*</span>
|
||
}
|
||
|
||
// True when a dimensions bag ({sie_dim_no: code}) carries at least one value.
|
||
function hasDimensionValues(dims: Record<string, string> | null | undefined): boolean {
|
||
return !!dims && Object.keys(dims).length > 0
|
||
}
|
||
|
||
// Compact display of a dimensions bag, e.g. "KS01 · P001" (dim-number order).
|
||
function compactDims(dims: Record<string, string>): string {
|
||
return Object.entries(dims)
|
||
.filter(([, v]) => v)
|
||
.sort(([a], [b]) => Number(a) - Number(b))
|
||
.map(([, v]) => v)
|
||
.join(' · ')
|
||
}
|
||
|
||
export default function InvoiceEditor(props: InvoiceEditorProps = { mode: 'create' }) {
|
||
// Edit mode pre-fills the form from an existing draft and saves via PATCH.
|
||
const isEditMode = props.mode === 'edit'
|
||
const isCopyMode = props.mode === 'copy'
|
||
const initial = props.mode === 'edit' ? props.initial : null
|
||
const copyInitial = props.mode === 'copy' ? props.initial : null
|
||
const initialOreRounding = initial?.ore_rounding ?? copyInitial?.ore_rounding
|
||
const bare = props.bare === true
|
||
const router = useRouter()
|
||
const { toast } = useToast()
|
||
const { canWrite } = useCanWrite()
|
||
const { company } = useCompany()
|
||
const hasEmailSend = useCapability(CAPABILITY.email_send)
|
||
const supabase = createClient()
|
||
const t = useTranslations('invoice_editor')
|
||
const ts = useTranslations('self_billing')
|
||
const ta = useTranslations('accruals')
|
||
// Toggle between a normal customer invoice (default) and registering a
|
||
// self-billing invoice we received (mottagen självfaktura, ML 17 kap 15§).
|
||
// Self-billing is never available when editing an existing draft.
|
||
const [mode, setMode] = useState<'invoice' | 'self_billed'>(
|
||
props.initialSelfBilled && !isEditMode ? 'self_billed' : 'invoice',
|
||
)
|
||
// Company-wide opt-in from the invoice settings page: the whole payment
|
||
// link section (manual field + Stripe auto toggle) stays hidden until the
|
||
// company enables it. The send routes enforce the same setting server-side
|
||
// (maybeCreatePaymentLinkForInvoice), so this is presentation, not the gate.
|
||
const [paymentLinksEnabled, setPaymentLinksEnabled] = useState(false)
|
||
// An already-linked invoice keeps showing the section even when the
|
||
// setting is off, so the user can still see or clear the old link.
|
||
const hasExistingPaymentLink = Boolean(initial?.payment_link_url)
|
||
// Active Stripe connection: drives the "auto payment link" toggle in the
|
||
// payment link section. Absent extension or no connection → toggle hidden.
|
||
const [stripeConnected, setStripeConnected] = useState(false)
|
||
useEffect(() => {
|
||
if (!paymentLinksEnabled) return
|
||
if (!ENABLED_EXTENSION_IDS.has('stripe')) return
|
||
let cancelled = false
|
||
fetch('/api/extensions/ext/stripe/status')
|
||
.then((res) => (res.ok ? res.json() : null))
|
||
.then((data) => {
|
||
if (!cancelled && data?.connection?.status === 'active') setStripeConnected(true)
|
||
})
|
||
.catch(() => {})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [paymentLinksEnabled])
|
||
|
||
const schema = useMemo(() => {
|
||
const itemSchema = z.object({
|
||
// 'text' rows carry only a (possibly empty) description: a free-text or
|
||
// blank spacer line. Product rows keep the original requirements,
|
||
// enforced in the refine below so the base shape stays uniform.
|
||
line_type: z.enum(['product', 'text']).optional(),
|
||
description: z.string(),
|
||
quantity: z.number(),
|
||
unit: z.string(),
|
||
unit_price: z.number(),
|
||
vat_rate: z.number().min(0).max(25),
|
||
// Article linkage (artikelregister). Optional: free-text lines omit them.
|
||
article_id: z.string().nullable().optional(),
|
||
revenue_account: z
|
||
.string()
|
||
.regex(INVOICE_POSTING_ACCOUNT_REGEX, t('posting_account_invalid'))
|
||
.nullable()
|
||
.optional(),
|
||
// ROT/RUT-avdrag per line. Optional: null means "no deduction".
|
||
deduction_type: z.enum(['rot', 'rut']).nullable().optional(),
|
||
labor_hours: z.number().nonnegative().nullable().optional(),
|
||
work_type: z.string().nullable().optional(),
|
||
housing_designation: z.string().nullable().optional(),
|
||
apartment_number: z.string().nullable().optional(),
|
||
brf_org_number: z.string().nullable().optional(),
|
||
// Periodisering (förutbetald intäkt). Active when balance account is
|
||
// non-null; both period dates are then required (refine below).
|
||
accrual_period_start: z.string().nullable().optional(),
|
||
accrual_period_end: z.string().nullable().optional(),
|
||
accrual_balance_account: z.string().nullable().optional(),
|
||
// Per-item dimensions bag ({sie_dim_no: code}, dimensions PR7). Stored
|
||
// as-is; the server merges it over the invoice's default_dimensions on
|
||
// the item's revenue line at booking time.
|
||
dimensions: z.record(z.string(), z.string()).nullable().optional(),
|
||
}).superRefine((item, ctx) => {
|
||
if (item.accrual_balance_account != null) {
|
||
const start = item.accrual_period_start
|
||
const end = item.accrual_period_end
|
||
let invalid = !start || !end || end < start
|
||
if (!invalid) {
|
||
try {
|
||
invalid = countCalendarMonths(start as string, end as string) < 2
|
||
} catch {
|
||
invalid = true
|
||
}
|
||
}
|
||
if (invalid) {
|
||
ctx.addIssue({
|
||
code: z.ZodIssueCode.custom,
|
||
path: ['accrual_period_end'],
|
||
message: ta('validation_period'),
|
||
})
|
||
}
|
||
}
|
||
if (item.line_type === 'text') return
|
||
if (item.description.trim().length === 0) {
|
||
ctx.addIssue({ code: z.ZodIssueCode.custom, path: ['description'], message: t('validation_description_required') })
|
||
}
|
||
if (!(item.quantity >= 0.01)) {
|
||
ctx.addIssue({ code: z.ZodIssueCode.custom, path: ['quantity'], message: t('validation_quantity_min') })
|
||
}
|
||
if (item.unit.trim().length === 0) {
|
||
ctx.addIssue({ code: z.ZodIssueCode.custom, path: ['unit'], message: t('validation_unit_required') })
|
||
}
|
||
// Negative unit prices are allowed: discount lines (e.g. "Rabatt -100")
|
||
// are a valid way to reduce an invoice total. The backend schema accepts
|
||
// them too (see lib/api/schemas.ts CreateInvoiceItemSchema). An empty
|
||
// price field is still rejected by the base `unit_price: z.number()` type
|
||
// (NaN), so we only need to allow the sign here.
|
||
})
|
||
return z.object({
|
||
customer_id: z.string().min(1, t('validation_customer_required')),
|
||
invoice_date: z.string().min(1, t('validation_invoice_date_required')),
|
||
due_date: z.string().min(1, t('validation_due_date_required')),
|
||
delivery_date: z.string().optional(),
|
||
currency: z.enum(['SEK', 'EUR', 'USD', 'GBP', 'NOK', 'DKK']),
|
||
document_type: z.enum(['invoice', 'proforma', 'delivery_note']),
|
||
your_reference: z.string().optional(),
|
||
our_reference: z.string().optional(),
|
||
notes: z.string().optional(),
|
||
// Optional online payment link (pasted from e.g. the Stripe dashboard).
|
||
// https-only: mirrors the server-side CreateInvoiceSchema gate.
|
||
payment_link_url: z
|
||
.string()
|
||
.optional()
|
||
.refine(
|
||
(v) => {
|
||
if (!v || !v.trim()) return true
|
||
try {
|
||
return new URL(v).protocol === 'https:'
|
||
} catch {
|
||
return false
|
||
}
|
||
},
|
||
{ message: t('validation_payment_link_https') },
|
||
),
|
||
// Opt-out for the automatic Stripe payment link on send (only rendered
|
||
// when the company has an active Stripe connection).
|
||
payment_link_auto: z.boolean().optional(),
|
||
// Self-billing received (mottagen självfaktura). Present in the form for
|
||
// both modes; required only in self_billed mode: enforced in onSubmit.
|
||
external_invoice_number: z.string().optional(),
|
||
self_billing_agreement_ref: z.string().optional(),
|
||
received_date: z.string().optional(),
|
||
// Invoice-level ROT/RUT claim info. Personnummer is plaintext on
|
||
// the wire; the API encrypts it before storage. The API additionally
|
||
// accepts the bostadsrätt pair (deduction_apartment_number +
|
||
// deduction_brf_org_number): no editor UI for it yet, rot i
|
||
// bostadsrätt data enters via API/MCP until the payout-file UI ships.
|
||
deduction_personnummer: z.string().optional(),
|
||
deduction_housing_designation: z.string().optional(),
|
||
items: z.array(itemSchema).min(1, t('validation_min_one_row')),
|
||
})
|
||
}, [t, ta])
|
||
|
||
type FormData = z.infer<typeof schema>
|
||
|
||
const [customers, setCustomers] = useState<Customer[]>([])
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||
const [isSavingDraft, setIsSavingDraft] = useState(false)
|
||
const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null)
|
||
const [showReview, setShowReview] = useState(false)
|
||
const [pendingData, setPendingData] = useState<FormData | null>(null)
|
||
const [createdInvoiceId, setCreatedInvoiceId] = useState<string | null>(null)
|
||
const [showSendPrompt, setShowSendPrompt] = useState(false)
|
||
const [isSending, setIsSending] = useState(false)
|
||
const [isPreviewing, setIsPreviewing] = useState(false)
|
||
const [, setDefaultNotes] = useState<string | null>(null)
|
||
const [isCreateCustomerOpen, setIsCreateCustomerOpen] = useState(false)
|
||
const [isCreatingCustomer, setIsCreatingCustomer] = useState(false)
|
||
const [hasBankDetails, setHasBankDetails] = useState<boolean | null>(null)
|
||
const [showBankSetup, setShowBankSetup] = useState(false)
|
||
const [accountingMethod, setAccountingMethod] = useState<'accrual' | 'cash'>('accrual')
|
||
// Öresavrundning is display-only. In edit mode the draft's stored flag wins;
|
||
// otherwise it defaults to the company-wide setting (loaded below).
|
||
const [oreRounding, setOreRounding] = useState<boolean>(
|
||
typeof initialOreRounding === 'boolean' ? initialOreRounding : true,
|
||
)
|
||
const [vatRegistered, setVatRegistered] = useState<boolean>(true)
|
||
const [numberPreview, setNumberPreview] = useState<string | null>(null)
|
||
const [logoUrl, setLogoUrl] = useState<string | null>(null)
|
||
// Artikelregister: active articles for the line picker + which line is mid quick-create.
|
||
const [articles, setArticles] = useState<ArticleOption[]>([])
|
||
const [savingArticleIndex, setSavingArticleIndex] = useState<number | null>(null)
|
||
// Active balance-sheet and revenue accounts for the optional per-line
|
||
// posting override, plus which rows currently show that picker.
|
||
const [postingAccounts, setPostingAccounts] = useState<BASAccount[]>([])
|
||
const [accountOverrideRows, setAccountOverrideRows] = useState<Set<number>>(new Set())
|
||
// Dimension tagging (kostnadsställe/projekt, dimensions PR7). Affordances
|
||
// render only when company_settings.dimensions_enabled: a UI-visibility
|
||
// gate; a draft that already carries bags still round-trips untouched when
|
||
// the toggle is off. defaultDims is the invoice-level default; per-item
|
||
// overrides live on the form items and open via the row ⋮ menu (same
|
||
// open/close bookkeeping as accountOverrideRows).
|
||
const [dimensionsEnabled, setDimensionsEnabled] = useState(false)
|
||
const [defaultDims, setDefaultDims] = useState<Record<string, string>>(
|
||
initial?.default_dimensions ?? copyInitial?.default_dimensions ?? {},
|
||
)
|
||
const [dimensionOverrideRows, setDimensionOverrideRows] = useState<Set<number>>(new Set())
|
||
// True only when the user had zero invoices when this page loaded. The
|
||
// post-create flow uses this to offer a one-shot "upload a logo?" prompt,
|
||
// issue #520. Self-limits: once count > 0 it stays false.
|
||
const [hadZeroInvoices, setHadZeroInvoices] = useState<boolean | null>(null)
|
||
const [showLogoPrompt, setShowLogoPrompt] = useState(false)
|
||
const pendingCustomerRef = useRef<Customer | null>(null)
|
||
// In edit mode the first time we resolve the pre-filled customer we must NOT
|
||
// re-derive due_date / forced VAT rates from it: those came from the saved
|
||
// draft. Starts true for create (always derive), false for edit (skip once).
|
||
const didInitialCustomerSync = useRef(!isEditMode)
|
||
|
||
// Edit mode: the claim card's property fields are restored from the first
|
||
// rot line (they're stamped onto every rot line server-side at save time).
|
||
const initialRotLine = initial?.items?.find((i) => i.deduction_type === 'rot') ?? null
|
||
|
||
const {
|
||
register,
|
||
control,
|
||
handleSubmit,
|
||
watch,
|
||
setValue,
|
||
setError,
|
||
getValues,
|
||
formState: { errors, isDirty, dirtyFields },
|
||
} = useForm<FormData>({
|
||
resolver: zodResolver(schema),
|
||
// Edit mode pre-fills from the existing draft (header + every line incl.
|
||
// line_type, article link, ROT/RUT and periodisering). The personnummer
|
||
// can't be restored (stored encrypted): the user re-enters it if the
|
||
// draft carries a ROT/RUT claim. Create mode keeps the original empty form.
|
||
defaultValues: initial
|
||
? {
|
||
customer_id: initial.customer_id,
|
||
invoice_date: initial.invoice_date,
|
||
due_date: initial.due_date,
|
||
delivery_date: initial.delivery_date ?? '',
|
||
currency: initial.currency,
|
||
document_type: (initial.document_type ?? 'invoice') as InvoiceDocumentType,
|
||
your_reference: initial.your_reference ?? '',
|
||
our_reference: initial.our_reference ?? '',
|
||
notes: initial.notes ?? '',
|
||
payment_link_url: initial.payment_link_url ?? '',
|
||
payment_link_auto: initial.payment_link_auto ?? true,
|
||
external_invoice_number: '',
|
||
self_billing_agreement_ref: '',
|
||
received_date: '',
|
||
deduction_personnummer: '',
|
||
deduction_housing_designation: initialRotLine?.housing_designation ?? '',
|
||
items: (initial.items ?? []).map((item) => ({
|
||
line_type: (item.line_type ?? 'product') as 'product' | 'text',
|
||
description: item.description,
|
||
quantity: item.quantity,
|
||
unit: item.unit,
|
||
unit_price: item.unit_price,
|
||
vat_rate: item.vat_rate ?? 25,
|
||
article_id: item.article_id ?? null,
|
||
revenue_account: item.revenue_account ?? null,
|
||
deduction_type: item.deduction_type ?? null,
|
||
labor_hours: item.labor_hours ?? null,
|
||
work_type: item.work_type ?? null,
|
||
housing_designation: item.housing_designation ?? null,
|
||
apartment_number: item.apartment_number ?? null,
|
||
brf_org_number: item.brf_org_number ?? null,
|
||
accrual_period_start: item.accrual_period_start ?? null,
|
||
accrual_period_end: item.accrual_period_end ?? null,
|
||
accrual_balance_account: item.accrual_balance_account ?? null,
|
||
dimensions: hasDimensionValues(item.dimensions) ? item.dimensions ?? null : null,
|
||
})),
|
||
}
|
||
: copyInitial
|
||
? {
|
||
customer_id: copyInitial.customer_id,
|
||
invoice_date: '',
|
||
due_date: '',
|
||
delivery_date: '',
|
||
currency: copyInitial.currency,
|
||
document_type: 'invoice' as InvoiceDocumentType,
|
||
your_reference: '',
|
||
our_reference: copyInitial.our_reference,
|
||
notes: copyInitial.notes,
|
||
payment_link_url: '',
|
||
payment_link_auto: true,
|
||
external_invoice_number: '',
|
||
self_billing_agreement_ref: '',
|
||
received_date: '',
|
||
deduction_personnummer: '',
|
||
deduction_housing_designation: '',
|
||
items: copyInitial.items,
|
||
}
|
||
: {
|
||
customer_id: '',
|
||
invoice_date: '',
|
||
due_date: '',
|
||
currency: 'SEK',
|
||
document_type: 'invoice' as InvoiceDocumentType,
|
||
payment_link_url: '',
|
||
payment_link_auto: true,
|
||
external_invoice_number: '',
|
||
self_billing_agreement_ref: '',
|
||
received_date: '',
|
||
items: [{
|
||
description: '',
|
||
quantity: 1,
|
||
unit: 'st',
|
||
unit_price: 0,
|
||
vat_rate: 25,
|
||
article_id: null,
|
||
revenue_account: null,
|
||
deduction_type: null,
|
||
labor_hours: null,
|
||
work_type: null,
|
||
housing_designation: null,
|
||
apartment_number: null,
|
||
brf_org_number: null,
|
||
accrual_period_start: null,
|
||
accrual_period_end: null,
|
||
accrual_balance_account: null,
|
||
dimensions: null,
|
||
}],
|
||
},
|
||
})
|
||
|
||
useUnsavedChanges(isDirty)
|
||
|
||
// Set date defaults on client only to avoid hydration mismatch. Skipped when
|
||
// editing: the draft's own dates are already loaded into the form.
|
||
useEffect(() => {
|
||
if (isEditMode) return
|
||
setValue('invoice_date', format(new Date(), 'yyyy-MM-dd'))
|
||
setValue('received_date', format(new Date(), 'yyyy-MM-dd'))
|
||
setValue('due_date', format(addDays(new Date(), 30), 'yyyy-MM-dd'))
|
||
}, [])
|
||
|
||
const { fields, append, remove, move } = useFieldArray({
|
||
control,
|
||
name: 'items',
|
||
})
|
||
|
||
// Drag-to-reorder (grip handle left of each row). framer-motion hands back
|
||
// the fully reordered array; we translate the single displacement into a
|
||
// react-hook-form move() so the registered inputs follow. The persisted
|
||
// sort_order is the array index at create time, so reordering here is all
|
||
// that's needed: no extra payload.
|
||
const handleItemsReorder = (newOrder: typeof fields) => {
|
||
const movedAt = newOrder.findIndex((f, i) => f.id !== fields[i]?.id)
|
||
if (movedAt === -1) return
|
||
const from = fields.findIndex((f) => f.id === newOrder[movedAt].id)
|
||
if (from !== -1 && from !== movedAt) move(from, movedAt)
|
||
}
|
||
|
||
const watchItems = watch('items')
|
||
const watchCurrency = watch('currency')
|
||
const watchCustomerId = watch('customer_id')
|
||
const watchDocumentType = watch('document_type') as InvoiceDocumentType
|
||
|
||
// After customers state updates with the new customer, select it
|
||
useEffect(() => {
|
||
const pending = pendingCustomerRef.current
|
||
if (pending && customers.some((c) => c.id === pending.id)) {
|
||
setValue('customer_id', pending.id, { shouldValidate: true, shouldDirty: true })
|
||
setSelectedCustomer(pending)
|
||
pendingCustomerRef.current = null
|
||
}
|
||
}, [customers, setValue])
|
||
|
||
useEffect(() => {
|
||
if (!company?.id) return
|
||
fetchCustomers()
|
||
fetchDefaultNotes()
|
||
fetchArticles()
|
||
fetchRevenueAccounts()
|
||
}, [company?.id])
|
||
|
||
async function fetchArticles() {
|
||
if (!company?.id) return
|
||
const { data } = await supabase
|
||
.from('articles')
|
||
.select('id, article_number, name, unit, price_excl_vat, vat_rate, revenue_account, currency')
|
||
.eq('company_id', company.id)
|
||
.eq('active', true)
|
||
// Numeric-aware order by article number ('2' before '10', unnumbered last):
|
||
// the picker should follow the user's own numbering, not the alphabet.
|
||
setArticles(sortArticles((data ?? []) as ArticleOption[]))
|
||
}
|
||
|
||
async function fetchRevenueAccounts() {
|
||
if (!company?.id) return
|
||
try {
|
||
const res = await fetch('/api/bookkeeping/accounts')
|
||
const body = await res.json()
|
||
const accounts = ((body?.data as BASAccount[]) || [])
|
||
.filter((account) => account.account_class >= 1 && account.account_class <= 3)
|
||
setPostingAccounts(accounts)
|
||
} catch {
|
||
// Non-fatal: the override picker degrades to free 4-digit entry.
|
||
}
|
||
}
|
||
|
||
// Apply a chosen article's defaults onto a line. Selecting "none" detaches the
|
||
// article link (and its account override) but keeps the typed text/price so the
|
||
// row becomes an editable free-text line.
|
||
function applyArticle(index: number, articleId: string) {
|
||
if (articleId === 'none') {
|
||
setValue(`items.${index}.article_id`, null, { shouldDirty: true })
|
||
setValue(`items.${index}.revenue_account`, null, { shouldDirty: true })
|
||
return
|
||
}
|
||
const a = articles.find((x) => x.id === articleId)
|
||
if (!a) return
|
||
setValue(`items.${index}.article_id`, a.id, { shouldDirty: true })
|
||
setValue(`items.${index}.description`, a.name, { shouldValidate: true, shouldDirty: true })
|
||
if (a.unit) setValue(`items.${index}.unit`, a.unit, { shouldDirty: true })
|
||
setValue(`items.${index}.unit_price`, Number(a.price_excl_vat) || 0, { shouldValidate: true, shouldDirty: true })
|
||
// Only adopt the article's VAT rate when it's allowed for this customer
|
||
// (and the rate isn't locked, e.g. reverse charge / export). Otherwise keep
|
||
// the line's current rate so the API's per-customer VAT rule isn't violated.
|
||
if (!isRateLocked && availableRates.some((r) => r.rate === a.vat_rate)) {
|
||
setValue(`items.${index}.vat_rate`, a.vat_rate, { shouldValidate: true, shouldDirty: true })
|
||
}
|
||
// The account override rides along regardless of rate; the engine ignores it
|
||
// for reverse-charge/export and validates it against the chart of accounts.
|
||
setValue(`items.${index}.revenue_account`, a.revenue_account ?? null, { shouldDirty: true })
|
||
// Pre-fill the invoice's (single) currency from the article ONLY on the
|
||
// first priced line, and only while the user hasn't chosen a currency
|
||
// themselves. Never flip an in-progress invoice's currency on a later pick:
|
||
// an invoice carries one currency for all its lines, so overwriting it would
|
||
// relabel existing line amounts (or the user's explicit choice) as another
|
||
// currency with no FX conversion, producing a legally wrong faktura and
|
||
// wrong VAT (ML 17 kap). The article's currency comes from the currencies
|
||
// reference table.
|
||
const currencyUserSet = Boolean(dirtyFields.currency)
|
||
const invoiceHasOtherContent = (watchItems ?? []).some(
|
||
(it, i) => i !== index && (Boolean(it?.article_id) || Number(it?.unit_price) > 0)
|
||
)
|
||
if (
|
||
a.currency &&
|
||
currencies.includes(a.currency as Currency) &&
|
||
a.currency !== getValues('currency') &&
|
||
!currencyUserSet &&
|
||
!invoiceHasOtherContent
|
||
) {
|
||
setValue('currency', a.currency as Currency, { shouldDirty: true })
|
||
}
|
||
}
|
||
|
||
// "Spara som artikel": persist the current free-text line into the register and
|
||
// back-fill the article_id so the row is now catalog-linked.
|
||
async function saveLineAsArticle(index: number) {
|
||
const item = watchItems[index]
|
||
if (!item?.description?.trim()) {
|
||
toast({ title: t('save_article_need_description'), variant: 'destructive' })
|
||
return
|
||
}
|
||
setSavingArticleIndex(index)
|
||
try {
|
||
const response = await fetch('/api/articles', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
name: item.description.trim(),
|
||
unit: item.unit || 'st',
|
||
price_excl_vat: Number(item.unit_price) || 0,
|
||
vat_rate: item.vat_rate ?? 25,
|
||
// The typed unit price is in the invoice's currency: without this an
|
||
// EUR invoice line becomes an SEK article with the EUR number.
|
||
currency: getValues('currency'),
|
||
}),
|
||
})
|
||
const result = await response.json()
|
||
if (!response.ok) {
|
||
throw new Error(getErrorMessage(result, { context: 'article', statusCode: response.status }))
|
||
}
|
||
const created = result.data as ArticleOption
|
||
setArticles((prev) => sortArticles([...prev, created]))
|
||
setValue(`items.${index}.article_id`, created.id, { shouldDirty: true })
|
||
toast({ title: t('article_saved_title'), description: created.name })
|
||
} catch (error) {
|
||
toast({
|
||
title: t('save_article_failed'),
|
||
description: getErrorMessage(error, { context: 'article' }),
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setSavingArticleIndex(null)
|
||
}
|
||
}
|
||
|
||
async function fetchDefaultNotes() {
|
||
if (!company?.id) return
|
||
const { data } = await supabase
|
||
.from('company_settings')
|
||
.select('invoice_default_notes, default_our_reference, clearing_number, account_number, bankgiro, accounting_method, ore_rounding, logo_url, vat_registered, dimensions_enabled, invoice_payment_links_enabled')
|
||
.eq('company_id', company.id)
|
||
.single()
|
||
if (data?.invoice_default_notes) {
|
||
setDefaultNotes(data.invoice_default_notes)
|
||
if (!isEditMode && !isCopyMode) {
|
||
setValue('notes', data.invoice_default_notes)
|
||
}
|
||
}
|
||
// Pre-fill "Vår referens" from the company default: only when creating a
|
||
// fresh invoice, so an edited draft's own reference is never overwritten.
|
||
if (!isEditMode && !isCopyMode && data?.default_our_reference) {
|
||
setValue('our_reference', data.default_our_reference)
|
||
}
|
||
setHasBankDetails(
|
||
!!(data?.clearing_number && data?.account_number) || !!data?.bankgiro
|
||
)
|
||
if (data?.accounting_method === 'cash' || data?.accounting_method === 'accrual') {
|
||
setAccountingMethod(data.accounting_method)
|
||
}
|
||
// An explicit per-invoice flag (edit mode) wins; only fall back to the
|
||
// company-wide setting when creating or when the draft never set one.
|
||
if (typeof data?.ore_rounding === 'boolean' && initialOreRounding == null) {
|
||
setOreRounding(data.ore_rounding)
|
||
}
|
||
setLogoUrl(data?.logo_url ?? null)
|
||
if (typeof data?.vat_registered === 'boolean') {
|
||
setVatRegistered(data.vat_registered)
|
||
}
|
||
// Gates the dimension affordances (header default + per-row override).
|
||
setDimensionsEnabled(data?.dimensions_enabled === true)
|
||
// Gates the payment-link section (opt-in on the invoice settings page).
|
||
setPaymentLinksEnabled(data?.invoice_payment_links_enabled === true)
|
||
}
|
||
|
||
// First-invoice detection (issue #520): captured at page load so the
|
||
// post-create flow can offer the logo prompt for genuinely first-time
|
||
// invoices only. head:true keeps it cheap: no rows pulled.
|
||
useEffect(() => {
|
||
if (!company?.id) return
|
||
let cancelled = false
|
||
;(async () => {
|
||
const { count } = await supabase
|
||
.from('invoices')
|
||
.select('id', { count: 'exact', head: true })
|
||
.eq('company_id', company.id)
|
||
if (!cancelled) setHadZeroInvoices(count === 0 || count === null)
|
||
})()
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
// supabase is a stable reference from createClient() at top of component
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [company?.id])
|
||
|
||
// Preview the next invoice number so the user can catch a mis-set
|
||
// sequence/prefix before committing. The actual allocator still runs
|
||
// atomically at create time; this is read-only.
|
||
useEffect(() => {
|
||
if (!company?.id) return
|
||
// Editing an existing draft: it already has (or will keep) its own number,
|
||
// never show the "next number" preview.
|
||
if (isEditMode || watchDocumentType === 'delivery_note') {
|
||
setNumberPreview(null)
|
||
return
|
||
}
|
||
let cancelled = false
|
||
fetch(`/api/invoices/next-number?document_type=${encodeURIComponent(watchDocumentType)}`)
|
||
.then((r) => (r.ok ? r.json() : null))
|
||
.then((res) => {
|
||
if (!cancelled) setNumberPreview(res?.data?.preview ?? null)
|
||
})
|
||
.catch(() => {
|
||
if (!cancelled) setNumberPreview(null)
|
||
})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [company?.id, watchDocumentType])
|
||
|
||
useEffect(() => {
|
||
if (watchCustomerId) {
|
||
const customer = customers.find((c) => c.id === watchCustomerId)
|
||
setSelectedCustomer(customer || null)
|
||
|
||
// Skip the derived side-effects (due_date, forced VAT rate) the first time
|
||
// we resolve a pre-filled customer in edit mode: those values came from
|
||
// the saved draft and must not be overwritten. Applied normally on every
|
||
// subsequent (user-initiated) customer change, and always in create mode.
|
||
if (customer) {
|
||
if (didInitialCustomerSync.current) {
|
||
// Update due date based on customer payment terms
|
||
if (customer.default_payment_terms) {
|
||
setValue(
|
||
'due_date',
|
||
format(addDays(new Date(), customer.default_payment_terms), 'yyyy-MM-dd')
|
||
)
|
||
}
|
||
|
||
// When the customer forces a single rate (reverse charge/export),
|
||
// update all lines so the picker can't leave stale 25% values behind.
|
||
const rates = getAvailableVatRates(customer.customer_type, customer.vat_number_validated)
|
||
if (rates.length === 1) {
|
||
const forcedRate = rates[0].rate
|
||
watchItems.forEach((_, i) => {
|
||
setValue(`items.${i}.vat_rate`, forcedRate)
|
||
})
|
||
}
|
||
}
|
||
didInitialCustomerSync.current = true
|
||
}
|
||
}
|
||
}, [watchCustomerId, customers, setValue])
|
||
|
||
async function fetchCustomers() {
|
||
if (!company?.id) return
|
||
const { data, error } = await supabase
|
||
.from('customers')
|
||
.select('*')
|
||
.eq('company_id', company.id)
|
||
.order('name', { ascending: true })
|
||
|
||
if (error) {
|
||
toast({
|
||
title: t('load_customers_failed_title'),
|
||
description: t('load_customers_failed_description'),
|
||
variant: 'destructive',
|
||
})
|
||
} else {
|
||
setCustomers(data || [])
|
||
}
|
||
setIsLoading(false)
|
||
}
|
||
|
||
async function handleCreateCustomer(data: CreateCustomerInput) {
|
||
setIsCreatingCustomer(true)
|
||
|
||
const response = await fetch('/api/customers', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data),
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (!response.ok) {
|
||
toast({
|
||
title: t('create_customer_failed_title'),
|
||
description: getErrorMessage(result, { context: 'customer' }),
|
||
variant: 'destructive',
|
||
})
|
||
} else {
|
||
toast({
|
||
title: t('customer_created_title'),
|
||
description: t('customer_created_description', { name: data.name }),
|
||
})
|
||
pendingCustomerRef.current = result.data
|
||
setCustomers(prev => [...prev, result.data])
|
||
setIsCreateCustomerOpen(false)
|
||
}
|
||
|
||
setIsCreatingCustomer(false)
|
||
}
|
||
|
||
const subtotal = watchItems.reduce((sum, item) => {
|
||
return sum + (item.quantity || 0) * (item.unit_price || 0)
|
||
}, 0)
|
||
|
||
const vatRules = selectedCustomer
|
||
? getVatRules(selectedCustomer.customer_type, selectedCustomer.vat_number_validated)
|
||
: null
|
||
|
||
const availableRates = selectedCustomer
|
||
? getAvailableVatRates(selectedCustomer.customer_type, selectedCustomer.vat_number_validated)
|
||
: []
|
||
const isRateLocked = availableRates.length === 1
|
||
// A non-momsregistrerad company never charges VAT: hide the Moms column and
|
||
// book every line momsfritt. `vatRegistered` is the single switch the whole
|
||
// form keys off: no rate picker, no warning, no VAT in the totals/preview.
|
||
// The API enforces the same (forces 0% server-side), so a stale hidden field
|
||
// value can't smuggle VAT onto the invoice. With VAT shown the description
|
||
// keeps its 3/12 width; when hidden it widens to fill the freed columns.
|
||
const descColSpan = vatRegistered ? 'md:col-span-3' : 'md:col-span-5'
|
||
|
||
// Calculate per-item VAT. When not VAT-registered every rate is forced to 0
|
||
// so vatAmount stays 0 and total === subtotal.
|
||
const vatByRate = new Map<number, { base: number; vat: number }>()
|
||
let vatAmount = 0
|
||
for (const item of watchItems) {
|
||
const rate = vatRegistered ? (item.vat_rate ?? (vatRules?.rate || 25)) : 0
|
||
const lineTotal = (item.quantity || 0) * (item.unit_price || 0)
|
||
const lineVat = Math.round(lineTotal * rate / 100 * 100) / 100
|
||
vatAmount += lineVat
|
||
const existing = vatByRate.get(rate) || { base: 0, vat: 0 }
|
||
existing.base += lineTotal
|
||
existing.vat += lineVat
|
||
vatByRate.set(rate, existing)
|
||
}
|
||
const total = subtotal + vatAmount
|
||
|
||
// ROT/RUT-avdrag live preview. Computed client-side for instant feedback;
|
||
// the API recomputes server-side as the source of truth. Skipped for
|
||
// non-invoice document types (proformas and delivery notes don't book
|
||
// a deduction).
|
||
const isSelfBilled = mode === 'self_billed'
|
||
// ROT/RUT is an own-issued, B2C concept: never shown for a received self-bill.
|
||
const isInvoiceDoc = watchDocumentType === 'invoice' && !isSelfBilled
|
||
const deductionByKind = { rot: 0, rut: 0 }
|
||
if (isInvoiceDoc) {
|
||
for (const item of watchItems) {
|
||
if (!item.deduction_type) continue
|
||
const amount = computeDeduction({
|
||
unit_price: item.unit_price || 0,
|
||
quantity: item.quantity || 0,
|
||
deduction_type: item.deduction_type,
|
||
})
|
||
if (item.deduction_type === 'rot') deductionByKind.rot += amount
|
||
else deductionByKind.rut += amount
|
||
}
|
||
}
|
||
const deductionTotal = Math.round((deductionByKind.rot + deductionByKind.rut) * 100) / 100
|
||
const hasAnyDeduction = deductionTotal > 0
|
||
const hasAnyRotLine = isInvoiceDoc && watchItems.some((i) => i.deduction_type === 'rot')
|
||
|
||
// Öresavrundning live preview: same helper as the PDF/email, so the summary
|
||
// shows exactly what the customer will see. Display-only; the saved invoice
|
||
// keeps the exact öre.
|
||
const { rounding: displayRounding, toPay: displayedToPay } = getAmountToPay(
|
||
{ total, currency: watchCurrency, ore_rounding: oreRounding, deduction_total: deductionTotal },
|
||
null,
|
||
)
|
||
|
||
// Periodisering per rad: kräver faktureringsmetoden och en riktig faktura.
|
||
// EU-/exportkunder bokas på 3308/3305 (omvänd skattskyldighet/export) och
|
||
// kan inte periodiseras: ruta 39/40 ska spegla hela försäljningen.
|
||
const customerBlocksAccrual =
|
||
selectedCustomer?.customer_type === 'eu_business' ||
|
||
selectedCustomer?.customer_type === 'non_eu_business'
|
||
const canUseAccrual = isInvoiceDoc && accountingMethod === 'accrual' && !customerBlocksAccrual
|
||
|
||
function toggleAccrual(index: number) {
|
||
if (watchItems[index]?.accrual_balance_account != null) {
|
||
setValue(`items.${index}.accrual_period_start`, null, { shouldDirty: true })
|
||
setValue(`items.${index}.accrual_period_end`, null, { shouldDirty: true })
|
||
setValue(`items.${index}.accrual_balance_account`, null, { shouldDirty: true })
|
||
} else {
|
||
setValue(`items.${index}.accrual_period_start`, watch('invoice_date') || '', { shouldDirty: true })
|
||
setValue(`items.${index}.accrual_period_end`, '', { shouldDirty: true })
|
||
setValue(
|
||
`items.${index}.accrual_balance_account`,
|
||
DEFAULT_DEFERRED_REVENUE_ACCOUNT,
|
||
{ shouldDirty: true },
|
||
)
|
||
}
|
||
}
|
||
|
||
// Open/close the optional per-line posting-account override. Closing clears
|
||
// the value so the engine falls back to the VAT-rate-derived revenue account.
|
||
function toggleAccountOverride(index: number) {
|
||
const isOpen = accountOverrideRows.has(index) || !!watchItems[index]?.revenue_account
|
||
if (isOpen) {
|
||
setValue(`items.${index}.revenue_account`, null, { shouldDirty: true })
|
||
setAccountOverrideRows((prev) => {
|
||
const next = new Set(prev)
|
||
next.delete(index)
|
||
return next
|
||
})
|
||
} else {
|
||
setAccountOverrideRows((prev) => new Set(prev).add(index))
|
||
}
|
||
}
|
||
|
||
// Open/close the optional per-item dimensions override (⋮ menu). Closing
|
||
// clears the bag so the row falls back to the invoice's default_dimensions.
|
||
function toggleItemDimensions(index: number) {
|
||
const isOpen = dimensionOverrideRows.has(index) || hasDimensionValues(watchItems[index]?.dimensions)
|
||
if (isOpen) {
|
||
setValue(`items.${index}.dimensions`, null, { shouldDirty: true })
|
||
setDimensionOverrideRows((prev) => {
|
||
const next = new Set(prev)
|
||
next.delete(index)
|
||
return next
|
||
})
|
||
} else {
|
||
setDimensionOverrideRows((prev) => new Set(prev).add(index))
|
||
}
|
||
}
|
||
|
||
function updateItemDimension(index: number, dimNo: string, code: string | null) {
|
||
const current = { ...(watchItems[index]?.dimensions ?? {}) }
|
||
const trimmed = code?.trim()
|
||
if (trimmed) current[dimNo] = trimmed
|
||
else delete current[dimNo]
|
||
setValue(
|
||
`items.${index}.dimensions`,
|
||
Object.keys(current).length > 0 ? current : null,
|
||
{ shouldDirty: true },
|
||
)
|
||
// Keep the sub-row open after the user clears the last value: it closes
|
||
// only via the ⋮ menu (same lifecycle as the account override).
|
||
setDimensionOverrideRows((prev) => (prev.has(index) ? prev : new Set(prev).add(index)))
|
||
}
|
||
|
||
function setDefaultDimension(dimNo: string, code: string | null) {
|
||
setDefaultDims((prev) => {
|
||
const next = { ...prev }
|
||
const trimmed = code?.trim()
|
||
if (trimmed) next[dimNo] = trimmed
|
||
else delete next[dimNo]
|
||
return next
|
||
})
|
||
}
|
||
|
||
// Per-item bags ride the payload only when they carry values: the server
|
||
// treats an absent bag as "inherit the invoice's default_dimensions".
|
||
function pruneItemDimensions<T extends { dimensions?: Record<string, string> | null }>(
|
||
items: T[],
|
||
): T[] {
|
||
return items.map((item) =>
|
||
hasDimensionValues(item.dimensions) ? item : { ...item, dimensions: undefined },
|
||
)
|
||
}
|
||
|
||
// The form always carries the self-billing fields (they default to '' in both
|
||
// create and edit mode). This editor's normal create/draft/edit flows never
|
||
// use self-billing, that goes through the dedicated /api/invoices/self-billed
|
||
// path, so drop these empty carriers before spreading the form data into the
|
||
// /api/invoices (or PATCH) body: a bare external_invoice_number: '' otherwise
|
||
// trips the shared CreateInvoiceSchema's min(1). Belt-and-suspenders; the
|
||
// server schema also coerces '' to undefined for these fields.
|
||
function stripSelfBillingFields(data: FormData): FormData {
|
||
const {
|
||
external_invoice_number: _ein,
|
||
self_billing_agreement_ref: _sbar,
|
||
received_date: _rd,
|
||
...rest
|
||
} = data
|
||
return rest
|
||
}
|
||
|
||
// Self-billing path: no review dialog, no PDF, no send: it arrives already
|
||
// booked. POST straight to the dedicated endpoint and open the verifikat.
|
||
async function handleSelfBilledSubmit(data: FormData) {
|
||
setIsSubmitting(true)
|
||
try {
|
||
const response = await fetch('/api/invoices/self-billed', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
customer_id: data.customer_id,
|
||
external_invoice_number: data.external_invoice_number,
|
||
self_billing_agreement_ref: data.self_billing_agreement_ref || undefined,
|
||
invoice_date: data.invoice_date,
|
||
received_date: data.received_date,
|
||
due_date: data.due_date,
|
||
currency: data.currency,
|
||
notes: data.notes,
|
||
items: data.items.map((i) => ({
|
||
description: i.description,
|
||
quantity: i.quantity,
|
||
unit: i.unit,
|
||
unit_price: i.unit_price,
|
||
vat_rate: i.vat_rate,
|
||
})),
|
||
}),
|
||
})
|
||
const result = await response.json()
|
||
if (!response.ok) {
|
||
throw new Error(getErrorMessage(result, { context: 'invoice', statusCode: response.status }))
|
||
}
|
||
toast({
|
||
title: ts('created_title'),
|
||
description: ts('created_description', { number: data.external_invoice_number ?? '' }),
|
||
})
|
||
router.replace(`/invoices/${result.data.id}`)
|
||
} catch (error) {
|
||
toast({
|
||
title: ts('create_failed_title'),
|
||
description: getErrorMessage(error, { context: 'invoice' }),
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function onSubmit(data: FormData) {
|
||
if (isEditMode) {
|
||
// Editing a draft: no review dialog, straight to PATCH.
|
||
await saveEdit(data)
|
||
return
|
||
}
|
||
if (isSelfBilled) {
|
||
// The two self-billing-only fields are optional in the shared schema:
|
||
// enforce them here so the inline errors render under the right inputs.
|
||
let valid = true
|
||
if (!data.external_invoice_number?.trim()) {
|
||
setError('external_invoice_number', { message: ts('validation_external_number_required') })
|
||
valid = false
|
||
}
|
||
if (!data.received_date) {
|
||
setError('received_date', { message: ts('validation_received_date_required') })
|
||
valid = false
|
||
}
|
||
if (!valid) return
|
||
await handleSelfBilledSubmit(data)
|
||
return
|
||
}
|
||
setPendingData(data)
|
||
// Re-fetch the preview right before review so the displayed number
|
||
// reflects any concurrent invoice creations. Skip for delivery notes.
|
||
if (data.document_type !== 'delivery_note') {
|
||
try {
|
||
const r = await fetch(`/api/invoices/next-number?document_type=${encodeURIComponent(data.document_type)}`)
|
||
if (r.ok) {
|
||
const json = await r.json()
|
||
setNumberPreview(json?.data?.preview ?? null)
|
||
}
|
||
} catch {
|
||
// Preview is best-effort; the allocator at create time is the source of truth.
|
||
}
|
||
}
|
||
if (hasBankDetails === false && watchDocumentType === 'invoice') {
|
||
setShowBankSetup(true)
|
||
return
|
||
}
|
||
setShowReview(true)
|
||
}
|
||
|
||
function handleBankSetupComplete() {
|
||
setHasBankDetails(true)
|
||
setShowBankSetup(false)
|
||
if (pendingData) {
|
||
setShowReview(true)
|
||
}
|
||
}
|
||
|
||
function getDocLabel(type: InvoiceDocumentType): string {
|
||
if (type === 'proforma') return t('doc_label_proforma')
|
||
if (type === 'delivery_note') return t('doc_label_delivery_note')
|
||
return t('doc_label_invoice')
|
||
}
|
||
|
||
function handleLogoPromptClose() {
|
||
setShowLogoPrompt(false)
|
||
// Resume the post-create flow that was deferred by the logo prompt.
|
||
// The send-now dialog only emails: skipped without the email_send
|
||
// capability (the invoice page's SendInvoiceDialog carries the upsell).
|
||
if (selectedCustomer?.email && createdInvoiceId && hasEmailSend) {
|
||
setShowSendPrompt(true)
|
||
} else if (createdInvoiceId) {
|
||
router.replace(`/invoices/${createdInvoiceId}`)
|
||
}
|
||
}
|
||
|
||
async function handleConfirm() {
|
||
if (!pendingData) return
|
||
setIsSubmitting(true)
|
||
|
||
// Privacy by default: ROT/RUT line fields and the invoice-level
|
||
// personnummer / housing designation are only sent to the API when the
|
||
// user actually claims a deduction. Defaults are pre-instantiated as
|
||
// null in the form state, but null personal-data fields shouldn't ride
|
||
// along on every regular invoice.
|
||
const anyDeduction = pendingData.items.some((i) => i.deduction_type)
|
||
const sanitizedItems = pruneItemDimensions(pendingData.items).map((item) => {
|
||
if (item.deduction_type) return item
|
||
const {
|
||
deduction_type: _dt,
|
||
labor_hours: _lh,
|
||
work_type: _wt,
|
||
housing_designation: _hd,
|
||
apartment_number: _an,
|
||
brf_org_number: _bn,
|
||
...rest
|
||
} = item
|
||
return rest
|
||
})
|
||
const sanitizedPayload: CreateInvoiceInput & { default_dimensions: Record<string, string> } = {
|
||
...(stripSelfBillingFields(pendingData) as CreateInvoiceInput),
|
||
ore_rounding: oreRounding,
|
||
// Invoice-level default dims: always sent so an edited draft can clear
|
||
// them; {} means "no defaults".
|
||
default_dimensions: defaultDims,
|
||
items: sanitizedItems as CreateInvoiceInput['items'],
|
||
...(anyDeduction
|
||
? {}
|
||
: { deduction_personnummer: undefined, deduction_housing_designation: undefined }),
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/invoices', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(sanitizedPayload),
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (!response.ok) {
|
||
throw new Error(getErrorMessage(result, { context: 'invoice', statusCode: response.status }))
|
||
}
|
||
|
||
const docLabel = getDocLabel(watchDocumentType)
|
||
toast({
|
||
title: t('doc_created_title', { docLabel }),
|
||
description: t('doc_created_description', { docLabel, number: result.data.invoice_number }),
|
||
})
|
||
|
||
setShowReview(false)
|
||
setCreatedInvoiceId(result.data.id)
|
||
|
||
// First-invoice-only logo prompt (issue #520) takes priority over the
|
||
// send-now dialog so a fresh upload makes it onto the just-sent PDF
|
||
// (pdf-template reads logo_url live from company_settings). Once the
|
||
// prompt closes, handleLogoPromptClose resumes the regular flow.
|
||
if (hadZeroInvoices === true && !logoUrl) {
|
||
setShowLogoPrompt(true)
|
||
} else if (selectedCustomer?.email && hasEmailSend) {
|
||
setShowSendPrompt(true)
|
||
} else {
|
||
router.replace(`/invoices/${result.data.id}`)
|
||
}
|
||
} catch (error) {
|
||
toast({
|
||
title: t('create_invoice_failed_title'),
|
||
description: getErrorMessage(error, { context: 'invoice' }),
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsSubmitting(false)
|
||
}
|
||
}
|
||
|
||
// "Spara som utkast": save an unnumbered draft (save_as_draft) without the
|
||
// review dialog. The invoice gets no F-number and fires no invoice.created
|
||
// until the user opens it and clicks "Granska & skapa" (finalize). Same
|
||
// ROT/RUT privacy sanitization as handleConfirm.
|
||
async function saveDraftData(data: FormData) {
|
||
setIsSavingDraft(true)
|
||
|
||
const anyDeduction = data.items.some((i) => i.deduction_type)
|
||
const sanitizedItems = pruneItemDimensions(data.items).map((item) => {
|
||
if (item.deduction_type) return item
|
||
const {
|
||
deduction_type: _dt,
|
||
labor_hours: _lh,
|
||
work_type: _wt,
|
||
housing_designation: _hd,
|
||
apartment_number: _an,
|
||
brf_org_number: _bn,
|
||
...rest
|
||
} = item
|
||
return rest
|
||
})
|
||
const payload: CreateInvoiceInput & { default_dimensions: Record<string, string> } = {
|
||
...(stripSelfBillingFields(data) as CreateInvoiceInput),
|
||
save_as_draft: true,
|
||
ore_rounding: oreRounding,
|
||
default_dimensions: defaultDims,
|
||
items: sanitizedItems as CreateInvoiceInput['items'],
|
||
...(anyDeduction
|
||
? {}
|
||
: { deduction_personnummer: undefined, deduction_housing_designation: undefined }),
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/invoices', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
const result = await response.json()
|
||
if (!response.ok) {
|
||
throw new Error(getErrorMessage(result, { context: 'invoice', statusCode: response.status }))
|
||
}
|
||
toast({
|
||
title: t('toast_draft_saved_title'),
|
||
description: t('toast_draft_saved_description'),
|
||
})
|
||
// replace (here and in every post-save navigation): the editor page must
|
||
// drop out of history, or the detail page's back arrow reopens a fresh
|
||
// editor instead of returning to the list (issue #1053).
|
||
router.replace(`/invoices/${result.data.id}`)
|
||
} catch (error) {
|
||
toast({
|
||
title: t('save_draft_failed_title'),
|
||
description: getErrorMessage(error, { context: 'invoice' }),
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsSavingDraft(false)
|
||
}
|
||
}
|
||
|
||
// Edit mode: PATCH the existing draft (header + items). Same ROT/RUT privacy
|
||
// sanitization as create: personal-data fields only ride along when a
|
||
// deduction is actually claimed. No review dialog, no number allocation, no
|
||
// send/logo prompt; on success go back to the invoice detail page.
|
||
async function saveEdit(data: FormData) {
|
||
if (!initial) return
|
||
setIsSubmitting(true)
|
||
|
||
const anyDeduction = data.items.some((i) => i.deduction_type)
|
||
const sanitizedItems = pruneItemDimensions(data.items).map((item) => {
|
||
if (item.deduction_type) return item
|
||
const {
|
||
deduction_type: _dt,
|
||
labor_hours: _lh,
|
||
work_type: _wt,
|
||
housing_designation: _hd,
|
||
apartment_number: _an,
|
||
brf_org_number: _bn,
|
||
...rest
|
||
} = item
|
||
return rest
|
||
})
|
||
const payload: CreateInvoiceInput & { default_dimensions: Record<string, string> } = {
|
||
...(stripSelfBillingFields(data) as CreateInvoiceInput),
|
||
ore_rounding: oreRounding,
|
||
default_dimensions: defaultDims,
|
||
items: sanitizedItems as CreateInvoiceInput['items'],
|
||
...(anyDeduction
|
||
? {}
|
||
: { deduction_personnummer: undefined, deduction_housing_designation: undefined }),
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/api/invoices/${initial.id}`, {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
const result = await response.json()
|
||
if (!response.ok) {
|
||
throw new Error(getErrorMessage(result, { context: 'invoice', statusCode: response.status }))
|
||
}
|
||
toast({
|
||
title: t('toast_draft_updated_title'),
|
||
description: t('toast_draft_updated_description'),
|
||
})
|
||
router.replace(`/invoices/${initial.id}`)
|
||
} catch (error) {
|
||
toast({
|
||
title: t('update_failed_title'),
|
||
description: getErrorMessage(error, { context: 'invoice' }),
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function handleSendNow() {
|
||
if (!createdInvoiceId) return
|
||
setIsSending(true)
|
||
|
||
try {
|
||
const response = await fetch(`/api/invoices/${createdInvoiceId}/send`, {
|
||
method: 'POST',
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const result = await response.json()
|
||
throw new Error(getErrorMessage(result, { context: 'invoice', statusCode: response.status }))
|
||
}
|
||
|
||
toast({
|
||
title: t('invoice_sent_title'),
|
||
description: t('invoice_sent_description', { email: selectedCustomer?.email ?? '' }),
|
||
})
|
||
} catch (error) {
|
||
toast({
|
||
title: t('send_invoice_failed_title'),
|
||
description: getErrorMessage(error, { context: 'invoice' }),
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsSending(false)
|
||
setShowSendPrompt(false)
|
||
router.replace(`/invoices/${createdInvoiceId}`)
|
||
}
|
||
}
|
||
|
||
async function handlePreviewPDF() {
|
||
if (!pendingData) return
|
||
setIsPreviewing(true)
|
||
|
||
try {
|
||
const response = await fetch('/api/invoices/preview-pdf', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
customer_id: pendingData.customer_id,
|
||
invoice_date: pendingData.invoice_date,
|
||
due_date: pendingData.due_date,
|
||
currency: pendingData.currency,
|
||
document_type: pendingData.document_type,
|
||
items: pendingData.items,
|
||
your_reference: pendingData.your_reference,
|
||
our_reference: pendingData.our_reference,
|
||
notes: pendingData.notes,
|
||
payment_link_url: pendingData.payment_link_url,
|
||
invoice_number: numberPreview,
|
||
}),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const result = await response.json()
|
||
throw new Error(getErrorMessage(result, { context: 'invoice', statusCode: response.status }))
|
||
}
|
||
|
||
const blob = await response.blob()
|
||
const url = window.URL.createObjectURL(blob)
|
||
window.open(url, '_blank')
|
||
} catch (error) {
|
||
toast({
|
||
title: t('preview_pdf_failed'),
|
||
description: getErrorMessage(error, { context: 'invoice' }),
|
||
variant: 'destructive',
|
||
})
|
||
} finally {
|
||
setIsPreviewing(false)
|
||
}
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className="flex items-center justify-center h-64">
|
||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const titleText = isEditMode
|
||
? t('title_edit')
|
||
: isCopyMode
|
||
? t('title_copy')
|
||
: isSelfBilled
|
||
? ts('title')
|
||
: watchDocumentType === 'proforma'
|
||
? t('title_proforma')
|
||
: watchDocumentType === 'delivery_note'
|
||
? t('title_delivery_note')
|
||
: t('title_invoice')
|
||
const subtitleText = isEditMode
|
||
? t('subtitle_edit')
|
||
: isCopyMode
|
||
? t('subtitle_copy')
|
||
: isSelfBilled
|
||
? ts('subtitle')
|
||
: watchDocumentType === 'proforma'
|
||
? t('subtitle_proforma')
|
||
: watchDocumentType === 'delivery_note'
|
||
? t('subtitle_delivery_note')
|
||
: t('subtitle_invoice')
|
||
|
||
// In bare (dialog) mode the dialog owns the accessible title (sr-only
|
||
// DialogTitle) and the page already has its own h1, so the visible heading
|
||
// steps down to h2: it still tracks document type and number preview live.
|
||
const Heading = bare ? 'h2' : 'h1'
|
||
|
||
return (
|
||
<div className={bare ? 'space-y-6' : 'space-y-8'}>
|
||
<div className="flex items-center gap-4">
|
||
{!bare && (
|
||
<Button variant="ghost" size="icon" onClick={() => router.back()} aria-label={t('back')}>
|
||
<ArrowLeft className="h-5 w-5" />
|
||
</Button>
|
||
)}
|
||
<div className="flex-1 min-w-0">
|
||
<Heading className={bare ? 'font-display text-xl tracking-tight' : 'font-display text-2xl leading-8 tracking-tight'}>
|
||
{titleText}
|
||
{numberPreview && !isSelfBilled && (
|
||
<span className={bare ? 'ml-2 text-muted-foreground tabular-nums text-lg' : 'ml-2 text-muted-foreground tabular-nums text-xl md:text-2xl'}>
|
||
({numberPreview})
|
||
</span>
|
||
)}
|
||
</Heading>
|
||
{!bare && <p className="text-muted-foreground">{subtitleText}</p>}
|
||
</div>
|
||
<AgentSparkleButton
|
||
intentId="invoice.draft"
|
||
intentArgs={{ customer_id: watchCustomerId ?? null }}
|
||
contextRef={watchCustomerId ? `customer:${watchCustomerId}` : 'invoice:new'}
|
||
/>
|
||
</div>
|
||
|
||
{isCopyMode && copyInitial && (
|
||
<div className="flex items-start gap-3 rounded-lg border border-border/60 bg-muted/30 px-4 py-3 text-sm">
|
||
<Copy className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||
<p className="text-muted-foreground">
|
||
{t('copy_notice', { number: copyInitial.source_invoice_number })}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{!isEditMode && !isCopyMode && (
|
||
<Tabs value={mode} onValueChange={(v) => setMode(v as 'invoice' | 'self_billed')}>
|
||
<TabsList>
|
||
<TabsTrigger value="invoice">{t('mode_invoice')}</TabsTrigger>
|
||
<TabsTrigger value="self_billed">{t('mode_self_billed')}</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
)}
|
||
|
||
{hasBankDetails === false && !isSelfBilled && (
|
||
<div className="flex items-center gap-3 rounded-lg border border-border/60 bg-muted/30 px-4 py-3 text-sm">
|
||
<Landmark className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||
<p className="text-muted-foreground">{t('bank_missing_warning')}</p>
|
||
<Button variant="link" size="sm" className="ml-auto shrink-0 px-0" onClick={() => setShowBankSetup(true)}>
|
||
{t('bank_add_now')}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
<form onSubmit={handleSubmit(onSubmit)} className={bare ? 'space-y-6' : 'space-y-6 pb-28 md:pb-0'}>
|
||
<div className="grid gap-6 lg:grid-cols-3 lg:items-start">
|
||
{/* Main content */}
|
||
<div className="lg:col-span-2 space-y-6">
|
||
{/* Customer selection */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{isSelfBilled ? <>{ts('customer_label')}<RequiredMark /></> : <>{t('customer_card_title')}<RequiredMark /></>}</CardTitle>
|
||
{isSelfBilled && <CardDescription>{ts('issuer_card_description')}</CardDescription>}
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Controller
|
||
name="customer_id"
|
||
control={control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder={t('select_customer_placeholder')} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{customers.map((customer) => (
|
||
<SelectItem key={customer.id} value={customer.id}>
|
||
{customer.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
className="mt-2"
|
||
onClick={() => setIsCreateCustomerOpen(true)}
|
||
>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
{t('create_customer')}
|
||
</Button>
|
||
{errors.customer_id && (
|
||
<p className="text-sm text-destructive mt-2">{errors.customer_id.message}</p>
|
||
)}
|
||
|
||
{isSelfBilled && (
|
||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>{ts('external_number_label')}<RequiredMark /></Label>
|
||
<Input placeholder={ts('external_number_placeholder')} {...register('external_invoice_number')} />
|
||
{errors.external_invoice_number && (
|
||
<p className="text-sm text-destructive">{errors.external_invoice_number.message}</p>
|
||
)}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>{ts('agreement_ref_label')}</Label>
|
||
<Input placeholder={ts('agreement_ref_placeholder')} {...register('self_billing_agreement_ref')} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Invoice items */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{t('items_card_title')}</CardTitle>
|
||
<CardDescription>{t('items_card_description')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<Reorder.Group
|
||
as="div"
|
||
axis="y"
|
||
values={fields}
|
||
onReorder={handleItemsReorder}
|
||
className="space-y-4"
|
||
>
|
||
{fields.map((field, index) => {
|
||
const isTextRow = watchItems[index]?.line_type === 'text'
|
||
const lineTotal = (watchItems[index]?.quantity || 0) * (watchItems[index]?.unit_price || 0)
|
||
const lineVat = vatRegistered && !isTextRow
|
||
? Math.round(lineTotal * (watchItems[index]?.vat_rate ?? 25) / 100 * 100) / 100
|
||
: 0
|
||
// Free-text / blank row: just a description field (may be left
|
||
// empty for a spacer) and a delete button.
|
||
if (isTextRow) {
|
||
return (
|
||
<SortableRow
|
||
key={field.id}
|
||
value={field}
|
||
handleLabel={t('drag_handle_aria')}
|
||
disabled={fields.length === 1}
|
||
>
|
||
<div className="rounded-lg border bg-card p-4 md:rounded-none md:border-0 md:bg-transparent md:p-0">
|
||
<div className="flex items-end gap-2">
|
||
<div className="flex-1 space-y-1">
|
||
<Label className="text-xs text-muted-foreground">{t('text_row_label')}</Label>
|
||
<Input
|
||
placeholder={t('text_row_placeholder')}
|
||
{...register(`items.${index}.description`)}
|
||
/>
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="shrink-0 min-h-[44px] min-w-[44px] text-muted-foreground hover:text-destructive"
|
||
onClick={() => remove(index)}
|
||
disabled={fields.length === 1}
|
||
aria-label={t('remove_row_aria')}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</SortableRow>
|
||
)
|
||
}
|
||
// Per-row action button. On real invoices it's a ⋮ menu that
|
||
// holds both the ROT/RUT skattereduktion choice and delete;
|
||
// proformas/delivery notes have no deduction model, so they
|
||
// keep a plain trash button (a one-item menu would be noise).
|
||
const renderRowActions = (triggerClassName: string) =>
|
||
isInvoiceDoc ? (
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className={triggerClassName}
|
||
aria-label={t('row_actions_aria')}
|
||
>
|
||
<MoreVertical className="h-4 w-4" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end" className="min-w-56">
|
||
<DropdownMenuLabel>{t('deduction_menu_label')}</DropdownMenuLabel>
|
||
<DropdownMenuRadioGroup
|
||
value={watchItems[index]?.deduction_type ?? 'none'}
|
||
onValueChange={(v) => {
|
||
const next = v === 'none' ? null : (v as 'rot' | 'rut')
|
||
setValue(`items.${index}.deduction_type`, next, { shouldDirty: true })
|
||
if (next === null) {
|
||
setValue(`items.${index}.work_type`, null)
|
||
setValue(`items.${index}.labor_hours`, null)
|
||
setValue(`items.${index}.housing_designation`, null)
|
||
setValue(`items.${index}.apartment_number`, null)
|
||
} else if (watchItems[index]?.accrual_balance_account != null) {
|
||
// ROT/RUT och periodisering kombineras aldrig
|
||
// på samma rad: avdraget vinner.
|
||
setValue(`items.${index}.accrual_period_start`, null)
|
||
setValue(`items.${index}.accrual_period_end`, null)
|
||
setValue(`items.${index}.accrual_balance_account`, null)
|
||
}
|
||
}}
|
||
>
|
||
<DropdownMenuRadioItem value="none" className="py-2">{t('deduction_none')}</DropdownMenuRadioItem>
|
||
<DropdownMenuRadioItem value="rot" className="py-2">{t('deduction_rot')}</DropdownMenuRadioItem>
|
||
<DropdownMenuRadioItem value="rut" className="py-2">{t('deduction_rut')}</DropdownMenuRadioItem>
|
||
</DropdownMenuRadioGroup>
|
||
{canUseAccrual && !watchItems[index]?.deduction_type && (
|
||
<>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onSelect={() => toggleAccrual(index)} className="py-2">
|
||
<CalendarClock className="h-4 w-4" />
|
||
{watchItems[index]?.accrual_balance_account != null
|
||
? ta('row_menu_remove')
|
||
: ta('row_menu_add')}
|
||
</DropdownMenuItem>
|
||
</>
|
||
)}
|
||
{watchItems[index]?.line_type !== 'text' && (
|
||
<>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onSelect={() => toggleAccountOverride(index)} className="py-2">
|
||
<Landmark className="h-4 w-4" />
|
||
{(accountOverrideRows.has(index) || watchItems[index]?.revenue_account)
|
||
? t('row_menu_remove_account')
|
||
: t('row_menu_set_account')}
|
||
</DropdownMenuItem>
|
||
</>
|
||
)}
|
||
{dimensionsEnabled && watchItems[index]?.line_type !== 'text' && (
|
||
<>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem onSelect={() => toggleItemDimensions(index)} className="py-2">
|
||
<Tags className="h-4 w-4" />
|
||
{(dimensionOverrideRows.has(index) || hasDimensionValues(watchItems[index]?.dimensions))
|
||
? t('row_menu_remove_dimensions')
|
||
: t('row_menu_set_dimensions')}
|
||
</DropdownMenuItem>
|
||
</>
|
||
)}
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
className="py-2 text-destructive focus:text-destructive"
|
||
disabled={fields.length === 1}
|
||
onSelect={() => remove(index)}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
{t('remove_row')}
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
) : (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className={triggerClassName}
|
||
onClick={() => remove(index)}
|
||
disabled={fields.length === 1}
|
||
aria-label={t('remove_row_aria')}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
)
|
||
return (
|
||
<SortableRow
|
||
key={field.id}
|
||
value={field}
|
||
handleLabel={t('drag_handle_aria')}
|
||
disabled={fields.length === 1}
|
||
>
|
||
<div
|
||
className="rounded-lg border bg-card p-4 space-y-3 relative md:rounded-none md:border-0 md:bg-transparent md:p-0 md:space-y-0 md:grid md:grid-cols-12 md:gap-4 md:items-start"
|
||
>
|
||
{/* Article picker (artikelregister). Optional: leave on
|
||
"Egen rad" to type a free-text line. Selecting an
|
||
article pre-fills description, unit, price, VAT and any
|
||
revenue-account override. */}
|
||
<div className="md:col-span-12 flex flex-wrap items-end gap-2">
|
||
<div className="flex-1 min-w-[180px] space-y-1 md:space-y-2">
|
||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">{t('article_label')}</Label>
|
||
<Controller
|
||
name={`items.${index}.article_id`}
|
||
control={control}
|
||
render={({ field }) => (
|
||
<Select
|
||
value={field.value ?? 'none'}
|
||
onValueChange={(v) => applyArticle(index, v)}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder={t('article_placeholder')} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="none">{t('article_free_text')}</SelectItem>
|
||
{articles.map((a) => (
|
||
<SelectItem key={a.id} value={a.id}>
|
||
{a.article_number ? `${a.article_number}: ${a.name}` : a.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
{canWrite && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-10 shrink-0"
|
||
onClick={() => saveLineAsArticle(index)}
|
||
disabled={savingArticleIndex === index}
|
||
>
|
||
{savingArticleIndex === index ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Plus className="h-4 w-4 md:mr-1" />
|
||
)}
|
||
<span className="hidden md:inline">{t('save_as_article')}</span>
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Description + mobile delete button */}
|
||
<div className="flex items-start gap-2 md:contents">
|
||
<div className={`flex-1 space-y-1 ${descColSpan} md:space-y-2`}>
|
||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">{t('description_label')}</Label>
|
||
<Input
|
||
placeholder={t('description_placeholder')}
|
||
{...register(`items.${index}.description`)}
|
||
/>
|
||
{errors.items?.[index]?.description && (
|
||
<p className="text-sm text-destructive">
|
||
{errors.items[index].description?.message}
|
||
</p>
|
||
)}
|
||
</div>
|
||
{renderRowActions('shrink-0 min-h-[44px] min-w-[44px] -mr-2 -mt-1 md:hidden')}
|
||
</div>
|
||
|
||
{/* Antal, Enhet, à-pris */}
|
||
<div className="grid grid-cols-3 gap-2 md:contents">
|
||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">{t('quantity_label')}</Label>
|
||
<Input
|
||
type="number"
|
||
step="0.01"
|
||
inputMode="decimal"
|
||
className="text-right tabular-nums"
|
||
{...register(`items.${index}.quantity`, { valueAsNumber: true })}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">{t('unit_label')}</Label>
|
||
<Controller
|
||
name={`items.${index}.unit`}
|
||
control={control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{units.map((unit) => (
|
||
<SelectItem key={unit} value={unit}>
|
||
{unit}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">{t('unit_price_label')}</Label>
|
||
<Input
|
||
type="number"
|
||
step="any"
|
||
inputMode="decimal"
|
||
className="text-right tabular-nums"
|
||
{...register(`items.${index}.unit_price`, { valueAsNumber: true })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Moms: hidden entirely when the company is not
|
||
momsregistrerad (no VAT may be charged). */}
|
||
{vatRegistered && (
|
||
<div className="space-y-1 md:col-span-2 md:space-y-2">
|
||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">{t('vat_label')}</Label>
|
||
<Controller
|
||
name={`items.${index}.vat_rate`}
|
||
control={control}
|
||
render={({ field }) => (
|
||
<Select
|
||
value={String(field.value ?? 25)}
|
||
onValueChange={(v) => field.onChange(Number(v))}
|
||
disabled={isRateLocked}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{availableRates.map((opt) => (
|
||
<SelectItem key={opt.rate} value={String(opt.rate)}>
|
||
{opt.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Desktop row actions (⋮ menu or trash). An invisible
|
||
label spacer mirrors the field columns (same Label +
|
||
space-y-2), so the button sits on the input row, not
|
||
high against the labels, nor low at the row bottom. */}
|
||
<div className="hidden md:col-span-1 md:block md:space-y-2">
|
||
<Label className="invisible text-xs md:text-sm" aria-hidden="true"> </Label>
|
||
<div className="flex justify-end">
|
||
{renderRowActions('')}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ROT/RUT-avdrag strip: only when a deduction is active
|
||
on this row (chosen via the ⋮ menu). A leading tag shows
|
||
which reduction applies; the work-type + hours are
|
||
required for the Skatteverket claim. Rows with no
|
||
deduction render nothing here and stay clean. */}
|
||
{isInvoiceDoc && watchItems[index]?.deduction_type && (
|
||
<div className="md:col-span-12 mt-2 md:mt-3">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="text-xs font-medium tabular-nums text-muted-foreground">
|
||
{watchItems[index]?.deduction_type === 'rot' ? 'ROT 30%' : 'RUT 50%'}
|
||
</span>
|
||
<Controller
|
||
name={`items.${index}.work_type`}
|
||
control={control}
|
||
render={({ field: workField }) => {
|
||
const opts =
|
||
watchItems[index]?.deduction_type === 'rot'
|
||
? ROT_WORK_TYPES
|
||
: RUT_WORK_TYPES
|
||
return (
|
||
<Select
|
||
value={workField.value ?? ''}
|
||
onValueChange={(v) => workField.onChange(v || null)}
|
||
>
|
||
<SelectTrigger className="h-8 w-56">
|
||
<SelectValue placeholder={t('deduction_work_type_placeholder')} />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{opts.map((w) => (
|
||
<SelectItem key={w.code} value={w.code}>
|
||
{w.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
)
|
||
}}
|
||
/>
|
||
<Input
|
||
type="number"
|
||
step="0.5"
|
||
inputMode="decimal"
|
||
placeholder={t('deduction_hours_placeholder')}
|
||
className="h-8 w-32 text-right tabular-nums"
|
||
{...register(`items.${index}.labor_hours`, {
|
||
valueAsNumber: true,
|
||
setValueAs: (v) =>
|
||
v === '' || Number.isNaN(v) ? null : Number(v),
|
||
})}
|
||
/>
|
||
{(() => {
|
||
const amt = computeDeduction({
|
||
unit_price: watchItems[index]?.unit_price || 0,
|
||
quantity: watchItems[index]?.quantity || 0,
|
||
deduction_type: watchItems[index]?.deduction_type,
|
||
})
|
||
return amt > 0 ? (
|
||
<span className="text-xs tabular-nums text-muted-foreground">
|
||
−{formatCurrency(amt, watchCurrency)}
|
||
</span>
|
||
) : null
|
||
})()}
|
||
</div>
|
||
{/* Labor-only disclosure (Skatteverket fakturamodellen).
|
||
30%/50% applies to the full line total: the seller
|
||
must ensure the line is 100% labor; material has
|
||
to be invoiced separately. */}
|
||
<div className="mt-2 flex items-start gap-2 text-xs text-warning-foreground">
|
||
<AlertTriangle className="h-3.5 w-3.5 mt-0.5 text-warning shrink-0" />
|
||
<p>{t('deduction_labor_only_warning')}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Periodisering (förutbetald intäkt): activated via the
|
||
row's ⋮ menu. Intäkten krediteras 29xx vid bokning och
|
||
löses upp månadsvis över perioden; momsen påverkas inte. */}
|
||
{canUseAccrual && watchItems[index]?.accrual_balance_account != null && (
|
||
<div className="md:col-span-12 mt-2 md:mt-3">
|
||
<AccrualPeriodControl
|
||
direction="revenue"
|
||
amount={lineTotal}
|
||
idPrefix={`accrual-invoice-${index}`}
|
||
value={{
|
||
start: watchItems[index]?.accrual_period_start ?? '',
|
||
end: watchItems[index]?.accrual_period_end ?? '',
|
||
balanceAccount:
|
||
watchItems[index]?.accrual_balance_account ||
|
||
DEFAULT_DEFERRED_REVENUE_ACCOUNT,
|
||
}}
|
||
onChange={(next) => {
|
||
setValue(`items.${index}.accrual_period_start`, next.start, { shouldDirty: true })
|
||
setValue(`items.${index}.accrual_period_end`, next.end, { shouldDirty: true })
|
||
setValue(`items.${index}.accrual_balance_account`, next.balanceAccount, { shouldDirty: true })
|
||
}}
|
||
onRemove={() => toggleAccrual(index)}
|
||
/>
|
||
{errors.items?.[index]?.accrual_period_end && (
|
||
<p className="mt-1 text-sm text-destructive">
|
||
{errors.items[index].accrual_period_end?.message}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Optional posting-account override (engångsartikel). When
|
||
unset the engine derives the revenue account from the VAT
|
||
rate; reverse-charge/export lines ignore the override. */}
|
||
{isInvoiceDoc && watchItems[index]?.line_type !== 'text' &&
|
||
(accountOverrideRows.has(index) || watchItems[index]?.revenue_account) && (
|
||
<div className="md:col-span-12 mt-2 md:mt-3">
|
||
<div className="flex flex-wrap items-end gap-2">
|
||
<div className="min-w-[220px] flex-1 space-y-1 md:space-y-2">
|
||
<Label className="text-xs text-muted-foreground md:text-sm md:text-foreground">
|
||
{t('revenue_account_label')}
|
||
</Label>
|
||
<Controller
|
||
name={`items.${index}.revenue_account`}
|
||
control={control}
|
||
render={({ field }) => (
|
||
<AccountCombobox
|
||
value={field.value ?? ''}
|
||
accounts={postingAccounts}
|
||
onChange={(v) => field.onChange(v || null)}
|
||
/>
|
||
)}
|
||
/>
|
||
{errors.items?.[index]?.revenue_account && (
|
||
<p className="text-sm text-destructive">
|
||
{errors.items[index].revenue_account?.message}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<p className="mt-1 text-xs text-muted-foreground">{t('revenue_account_hint')}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Per-item dimensions override (dimensions PR7): opened
|
||
via the row's ⋮ menu. The bag is stored as-is; the
|
||
server merges it over the invoice's default_dimensions
|
||
for this item's revenue line at booking time. */}
|
||
{dimensionsEnabled && isInvoiceDoc && watchItems[index]?.line_type !== 'text' &&
|
||
(dimensionOverrideRows.has(index) || hasDimensionValues(watchItems[index]?.dimensions)) && (
|
||
<div className="md:col-span-12 mt-2 md:mt-3">
|
||
<div className="max-w-md">
|
||
<LineDimensionFields
|
||
dimensions={watchItems[index]?.dimensions ?? undefined}
|
||
onChange={(dimNo, code) => updateItemDimension(index, dimNo, code)}
|
||
inputClassName="h-8"
|
||
/>
|
||
</div>
|
||
{hasDimensionValues(defaultDims) && (
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
{t('row_dimensions_inherit_hint', { dims: compactDims(defaultDims) })}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Mobile summary row */}
|
||
<div className="flex justify-between text-sm pt-1 border-t border-border/40 md:hidden">
|
||
<span className="text-muted-foreground">{t('row_label', { index: index + 1 })}</span>
|
||
<span className="font-medium tabular-nums">{formatCurrency(lineTotal + lineVat, watchCurrency)}</span>
|
||
</div>
|
||
</div>
|
||
</SortableRow>
|
||
)
|
||
})}
|
||
</Reorder.Group>
|
||
|
||
<div className="flex flex-col gap-2 sm:flex-row">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
className="w-full md:w-auto"
|
||
onClick={() =>
|
||
append({
|
||
line_type: 'product',
|
||
description: '',
|
||
quantity: 1,
|
||
unit: 'st',
|
||
unit_price: 0,
|
||
vat_rate: vatRegistered ? (availableRates[0]?.rate ?? 25) : 0,
|
||
article_id: null,
|
||
revenue_account: null,
|
||
deduction_type: null,
|
||
labor_hours: null,
|
||
work_type: null,
|
||
housing_designation: null,
|
||
apartment_number: null,
|
||
brf_org_number: null,
|
||
accrual_period_start: null,
|
||
accrual_period_end: null,
|
||
accrual_balance_account: null,
|
||
dimensions: null,
|
||
})
|
||
}
|
||
>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
{t('add_row')}
|
||
</Button>
|
||
{/* Free-text / blank row: explanatory text under an item, or
|
||
an empty spacer. Carries no amounts and never books. Not
|
||
offered for a received självfaktura: that is a faithful
|
||
revenue-only transcription, and the self-billed endpoint
|
||
(SelfBillingInvoiceItemSchema) has no line_type and rejects
|
||
zero-amount rows. */}
|
||
{!isSelfBilled && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
className="w-full md:w-auto text-muted-foreground"
|
||
onClick={() =>
|
||
append({
|
||
line_type: 'text',
|
||
description: '',
|
||
quantity: 0,
|
||
unit: '',
|
||
unit_price: 0,
|
||
vat_rate: 0,
|
||
article_id: null,
|
||
revenue_account: null,
|
||
deduction_type: null,
|
||
labor_hours: null,
|
||
work_type: null,
|
||
housing_designation: null,
|
||
apartment_number: null,
|
||
brf_org_number: null,
|
||
accrual_period_start: null,
|
||
accrual_period_end: null,
|
||
accrual_balance_account: null,
|
||
dimensions: null,
|
||
})
|
||
}
|
||
>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
{t('add_text_row')}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* ROT/RUT-avdrag claim info. Surfaces only when any item has
|
||
a deduction_type set: keeps the form quiet for the 90%+
|
||
of users who don't sell ROT/RUT-eligible services. */}
|
||
{isInvoiceDoc && hasAnyDeduction && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{t('deduction_card_title')}</CardTitle>
|
||
<CardDescription>{t('deduction_card_description')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="deduction_personnummer">
|
||
{t('deduction_personnummer_label')}<RequiredMark />
|
||
</Label>
|
||
<Input
|
||
id="deduction_personnummer"
|
||
placeholder={t('deduction_personnummer_placeholder')}
|
||
autoComplete="off"
|
||
{...register('deduction_personnummer')}
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('deduction_personnummer_hint')}
|
||
</p>
|
||
</div>
|
||
{hasAnyRotLine && (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="deduction_housing_designation">
|
||
{t('deduction_housing_label')}<RequiredMark />
|
||
</Label>
|
||
<Input
|
||
id="deduction_housing_designation"
|
||
placeholder={t('deduction_housing_placeholder')}
|
||
{...register('deduction_housing_designation')}
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('deduction_housing_hint')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
{(deductionByKind.rot > ROT_MAX || deductionByKind.rut > RUT_MAX) && (
|
||
<div className="rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
|
||
{t('deduction_cap_over')}
|
||
{deductionByKind.rot > ROT_MAX && ` (ROT ${ROT_MAX.toLocaleString('sv-SE')} kr)`}
|
||
{deductionByKind.rut > RUT_MAX && ` (RUT ${RUT_MAX.toLocaleString('sv-SE')} kr)`}
|
||
{'. '}
|
||
{t('deduction_cap_check')}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Notes */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{t('notes_card_title')}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Textarea
|
||
placeholder={t('notes_placeholder')}
|
||
{...register('notes')}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Sidebar: sticky so totals + action stay visible while scrolling items */}
|
||
<div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
|
||
{/* Invoice details */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{t('details_card_title')}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{!isSelfBilled && (
|
||
<div className="space-y-2">
|
||
<Label>{t('document_type_label')}</Label>
|
||
<Controller
|
||
name="document_type"
|
||
control={control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="invoice">{t('doctype_invoice')}</SelectItem>
|
||
<SelectItem value="proforma">{t('doctype_proforma')}</SelectItem>
|
||
<SelectItem value="delivery_note">{t('doctype_delivery_note')}</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
<Label>{t('currency_label')}</Label>
|
||
<Controller
|
||
name="currency"
|
||
control={control}
|
||
render={({ field }) => (
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{currencies.map((currency) => (
|
||
<SelectItem key={currency} value={currency}>
|
||
{currency}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>{t('invoice_date_label')}<RequiredMark /></Label>
|
||
<Input type="date" {...register('invoice_date')} aria-required="true" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>{t('due_date_label')}<RequiredMark /></Label>
|
||
<Input type="date" {...register('due_date')} aria-required="true" />
|
||
</div>
|
||
|
||
{isSelfBilled && (
|
||
<div className="space-y-2">
|
||
<Label>{ts('received_date_label')}<RequiredMark /></Label>
|
||
<Input type="date" {...register('received_date')} aria-required="true" />
|
||
{errors.received_date && (
|
||
<p className="text-sm text-destructive">{errors.received_date.message}</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{watchDocumentType === 'invoice' && !isSelfBilled && (
|
||
<div className="space-y-2">
|
||
<Label>{t('delivery_date_label')}</Label>
|
||
<Input type="date" {...register('delivery_date')} placeholder={t('delivery_date_placeholder')} />
|
||
</div>
|
||
)}
|
||
|
||
{!isSelfBilled && (
|
||
<>
|
||
<Separator />
|
||
|
||
<div className="space-y-2">
|
||
<Label>{t('your_reference_label')}</Label>
|
||
<Controller
|
||
name="your_reference"
|
||
control={control}
|
||
render={({ field }) => (
|
||
<TagInput
|
||
value={field.value ?? ''}
|
||
onChange={field.onChange}
|
||
placeholder={t('your_reference_placeholder')}
|
||
/>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>{t('our_reference_label')}</Label>
|
||
<Controller
|
||
name="our_reference"
|
||
control={control}
|
||
render={({ field }) => (
|
||
<TagInput
|
||
value={field.value ?? ''}
|
||
onChange={field.onChange}
|
||
placeholder={t('our_reference_placeholder')}
|
||
/>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* Online payment link: manual paste or the Stripe auto
|
||
toggle. Only real invoices: proformas and delivery notes
|
||
carry no payment request. Hidden unless the company has
|
||
opted in on the invoice settings page, except when the
|
||
draft already carries a link (still viewable/clearable). */}
|
||
{watchDocumentType === 'invoice' && (paymentLinksEnabled || hasExistingPaymentLink) && (
|
||
<div className="space-y-2">
|
||
<Label htmlFor="payment_link_url">{t('payment_link_label')}</Label>
|
||
<Input
|
||
id="payment_link_url"
|
||
type="url"
|
||
inputMode="url"
|
||
placeholder={t('payment_link_placeholder')}
|
||
{...register('payment_link_url')}
|
||
/>
|
||
{errors.payment_link_url ? (
|
||
<p className="text-sm text-destructive">{errors.payment_link_url.message}</p>
|
||
) : (
|
||
<p className="text-xs text-muted-foreground">
|
||
{stripeConnected ? t('payment_link_hint_auto') : t('payment_link_hint')}
|
||
</p>
|
||
)}
|
||
{stripeConnected && !watch('payment_link_url')?.trim() && (
|
||
<div className="flex items-center gap-2 pt-1">
|
||
<Switch
|
||
id="payment_link_auto"
|
||
checked={watch('payment_link_auto') ?? true}
|
||
onCheckedChange={(v) =>
|
||
setValue('payment_link_auto', v, { shouldDirty: true })
|
||
}
|
||
/>
|
||
<Label
|
||
htmlFor="payment_link_auto"
|
||
className="text-sm font-normal text-muted-foreground"
|
||
>
|
||
{t('payment_link_auto_label')}
|
||
</Label>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Invoice-level default dims (kostnadsställe/projekt):
|
||
written to every generated journal line; per-item bags
|
||
(row ⋮ menu) merge on top. Renders only when dimensions
|
||
are enabled for the company and the doc actually books. */}
|
||
{dimensionsEnabled && isInvoiceDoc && (
|
||
<>
|
||
<Separator />
|
||
<div className="space-y-1">
|
||
<LineDimensionFields
|
||
dimensions={defaultDims}
|
||
onChange={setDefaultDimension}
|
||
inputClassName="h-9"
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('dimensions_default_hint')}
|
||
</p>
|
||
</div>
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Summary */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{t('summary_card_title')}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">{t('subtotal_label')}</span>
|
||
<span>{formatCurrency(subtotal, watchCurrency)}</span>
|
||
</div>
|
||
{/* VAT rows: only when momsregistrerad. A non-registered company
|
||
shows no moms line at all (subtotal === total). */}
|
||
{vatRegistered && Array.from(vatByRate.entries())
|
||
.sort(([a], [b]) => b - a)
|
||
.map(([rate, group]) => (
|
||
<div key={rate}>
|
||
{vatByRate.size > 1 && (
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">{t('net_at_rate', { rate })}</span>
|
||
<span>{formatCurrency(group.base, watchCurrency)}</span>
|
||
</div>
|
||
)}
|
||
{group.vat > 0 && (
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">{t('vat_at_rate', { rate })}</span>
|
||
<span>{formatCurrency(group.vat, watchCurrency)}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
{vatRegistered && vatByRate.size === 0 && (
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">{t('vat_label_short')}</span>
|
||
<span>{formatCurrency(0, watchCurrency)}</span>
|
||
</div>
|
||
)}
|
||
{displayRounding.applies && (
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">{t('ore_rounding_label')}</span>
|
||
<span className="tabular-nums">{formatCurrency(displayRounding.roundingDelta, watchCurrency)}</span>
|
||
</div>
|
||
)}
|
||
{hasAnyDeduction && (
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-muted-foreground">{t('deduction_summary_label')}</span>
|
||
<span className="tabular-nums">−{formatCurrency(deductionTotal, watchCurrency)}</span>
|
||
</div>
|
||
)}
|
||
<Separator />
|
||
<div className="flex justify-between font-bold text-lg">
|
||
<span>{hasAnyDeduction ? t('to_pay_label') : t('total_label')}</span>
|
||
<span>{formatCurrency(displayedToPay, watchCurrency)}</span>
|
||
</div>
|
||
{hasAnyDeduction && (
|
||
<div className="flex justify-between text-xs text-muted-foreground">
|
||
<span>{t('total_incl_vat_label')}</span>
|
||
<span className="tabular-nums">{formatCurrency(total, watchCurrency)}</span>
|
||
</div>
|
||
)}
|
||
{/* Öresavrundning: display-only rounding of the invoice total to
|
||
whole kronor (SEK only). The exact amount stays in the books;
|
||
this only changes what's shown on the PDF, list and detail.
|
||
Defaults to the company setting (company_settings.ore_rounding). */}
|
||
{watchCurrency === 'SEK' && (
|
||
<>
|
||
<Separator />
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div className="space-y-0.5">
|
||
<Label htmlFor="ore-rounding" className="text-sm">{t('ore_rounding_label')}</Label>
|
||
<p className="text-xs text-muted-foreground">{t('ore_rounding_help')}</p>
|
||
</div>
|
||
<Switch
|
||
id="ore-rounding"
|
||
checked={oreRounding}
|
||
onCheckedChange={setOreRounding}
|
||
aria-label={t('ore_rounding_label')}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Actions: desktop/tablet only. In bare (dialog) mode the fixed
|
||
mobile bar is unusable (DialogContent's transform re-anchors
|
||
`fixed` children), so these buttons show at every width. */}
|
||
<div className={bare ? 'flex flex-col gap-2' : 'hidden md:flex md:flex-col md:gap-2'}>
|
||
<Button
|
||
type="submit"
|
||
className="w-full"
|
||
size="lg"
|
||
disabled={isSubmitting || isSavingDraft || !canWrite}
|
||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||
>
|
||
{!canWrite && <Lock className="mr-2 h-4 w-4 inline" />}
|
||
{isEditMode && isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{isEditMode ? t('save_changes') : isSelfBilled ? ts('register') : t('review_and_create')}
|
||
</Button>
|
||
{!isEditMode && !isSelfBilled && watchDocumentType === 'invoice' && (
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
className="w-full"
|
||
size="lg"
|
||
disabled={isSubmitting || isSavingDraft || !canWrite}
|
||
title={!canWrite ? t('viewer_disabled_tooltip') : t('save_as_draft_tooltip')}
|
||
onClick={handleSubmit(saveDraftData)}
|
||
>
|
||
{isSavingDraft ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
||
{t('save_as_draft')}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mobile sticky total bar: page mode only (see bare note above) */}
|
||
{!bare && (
|
||
<div className="md:hidden fixed left-0 right-0 z-40 bg-card/98 backdrop-blur-sm border-t border-border/40 px-5 py-3" style={{ bottom: 'calc(4rem + env(safe-area-inset-bottom, 0px))' }}>
|
||
<div className="max-w-5xl mx-auto flex items-center justify-between gap-4">
|
||
<div>
|
||
<p className="text-xs text-muted-foreground">
|
||
{hasAnyDeduction ? t('to_pay_label') : t('total_label')}
|
||
</p>
|
||
<p className="text-lg font-bold tabular-nums">
|
||
{formatCurrency(displayedToPay, watchCurrency)}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
{!isEditMode && !isSelfBilled && watchDocumentType === 'invoice' && (
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
disabled={isSubmitting || isSavingDraft || !canWrite}
|
||
onClick={handleSubmit(saveDraftData)}
|
||
>
|
||
{isSavingDraft ? <Loader2 className="h-4 w-4 animate-spin" /> : t('save_as_draft_short')}
|
||
</Button>
|
||
)}
|
||
<Button
|
||
type="submit"
|
||
disabled={isSubmitting || isSavingDraft || !canWrite}
|
||
title={!canWrite ? t('viewer_disabled_tooltip') : undefined}
|
||
>
|
||
{!canWrite && <Lock className="mr-2 h-4 w-4 inline" />}
|
||
{isEditMode && isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{isEditMode ? t('save_changes') : isSelfBilled ? ts('register') : t('review_and_create')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</form>
|
||
|
||
{selectedCustomer && vatRules && (
|
||
<ConfirmationDialog
|
||
open={showReview}
|
||
onOpenChange={setShowReview}
|
||
onConfirm={handleConfirm}
|
||
isSubmitting={isSubmitting}
|
||
title={watchDocumentType === 'proforma'
|
||
? t('review_dialog_title_proforma')
|
||
: watchDocumentType === 'delivery_note'
|
||
? t('review_dialog_title_delivery_note')
|
||
: t('review_dialog_title_invoice')}
|
||
warningText={watchDocumentType === 'invoice'
|
||
? accountingMethod === 'cash'
|
||
? t('review_warning_invoice_cash')
|
||
: t('review_warning_invoice_accrual')
|
||
: watchDocumentType === 'proforma'
|
||
? t('review_warning_proforma')
|
||
: t('review_warning_delivery_note')}
|
||
confirmLabel={watchDocumentType === 'proforma'
|
||
? t('confirm_create_proforma')
|
||
: watchDocumentType === 'delivery_note'
|
||
? t('confirm_create_delivery_note')
|
||
: t('confirm_create_invoice')}
|
||
extraActions={
|
||
<Button
|
||
variant="outline"
|
||
onClick={handlePreviewPDF}
|
||
disabled={isPreviewing || isSubmitting}
|
||
>
|
||
{isPreviewing ? (
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Eye className="mr-2 h-4 w-4" />
|
||
)}
|
||
{isPreviewing ? t('preview_pdf_generating') : t('preview_pdf')}
|
||
</Button>
|
||
}
|
||
>
|
||
<InvoiceReviewContent
|
||
customer={selectedCustomer}
|
||
invoiceDate={pendingData?.invoice_date || ''}
|
||
dueDate={pendingData?.due_date || ''}
|
||
currency={(pendingData?.currency || 'SEK') as Currency}
|
||
items={(pendingData?.items || []).map((item) => ({
|
||
...item,
|
||
vat_rate: vatRegistered ? (item.vat_rate ?? (vatRules?.rate || 25)) : 0,
|
||
}))}
|
||
subtotal={subtotal}
|
||
vatAmount={vatAmount}
|
||
total={total}
|
||
yourReference={pendingData?.your_reference}
|
||
ourReference={pendingData?.our_reference}
|
||
notes={pendingData?.notes}
|
||
numberPreview={numberPreview}
|
||
oreRounding={oreRounding}
|
||
vatRegistered={vatRegistered}
|
||
/>
|
||
</ConfirmationDialog>
|
||
)}
|
||
|
||
{/* Create customer dialog */}
|
||
<Dialog open={isCreateCustomerOpen} onOpenChange={setIsCreateCustomerOpen}>
|
||
<DialogContent className="sm:max-w-2xl max-h-[95dvh] sm:max-h-[90vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>{t('create_customer_dialog_title')}</DialogTitle>
|
||
</DialogHeader>
|
||
<CustomerForm
|
||
onSubmit={handleCreateCustomer}
|
||
isLoading={isCreatingCustomer}
|
||
/>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Bank details setup dialog */}
|
||
<BankDetailsSetupDialog
|
||
open={showBankSetup}
|
||
onOpenChange={setShowBankSetup}
|
||
onComplete={handleBankSetupComplete}
|
||
/>
|
||
|
||
{/* First-invoice logo prompt (issue #520) */}
|
||
<FirstInvoiceLogoPrompt
|
||
open={showLogoPrompt}
|
||
onClose={handleLogoPromptClose}
|
||
logoUrl={logoUrl}
|
||
onLogoUpdate={(url) => setLogoUrl(url)}
|
||
/>
|
||
|
||
{/* Send now prompt dialog */}
|
||
<Dialog open={showSendPrompt} onOpenChange={(open) => {
|
||
if (!open && createdInvoiceId) {
|
||
setShowSendPrompt(false)
|
||
router.replace(`/invoices/${createdInvoiceId}`)
|
||
}
|
||
}}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>{t('send_now_dialog_title')}</DialogTitle>
|
||
<DialogDescription>
|
||
{t('send_now_dialog_description', { email: selectedCustomer?.email ?? '' })}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter className="flex gap-2 sm:gap-0">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setShowSendPrompt(false)
|
||
if (createdInvoiceId) router.replace(`/invoices/${createdInvoiceId}`)
|
||
}}
|
||
disabled={isSending}
|
||
>
|
||
{t('send_later')}
|
||
</Button>
|
||
<Button onClick={handleSendNow} disabled={isSending}>
|
||
{isSending ? (
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Send className="mr-2 h-4 w-4" />
|
||
)}
|
||
{isSending ? t('send_now_sending') : t('send_now')}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
)
|
||
}
|