refactor: merge InvoiceCreate into InvoiceDetail (single page for create + edit)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
@@ -39,7 +39,6 @@ const Projects = lazy(() => import('./pages/Projects'))
|
|||||||
const ProjectCreate = lazy(() => import('./pages/ProjectCreate'))
|
const ProjectCreate = lazy(() => import('./pages/ProjectCreate'))
|
||||||
const ProjectDetail = lazy(() => import('./pages/ProjectDetail'))
|
const ProjectDetail = lazy(() => import('./pages/ProjectDetail'))
|
||||||
const Invoices = lazy(() => import('./pages/Invoices'))
|
const Invoices = lazy(() => import('./pages/Invoices'))
|
||||||
const InvoiceCreate = lazy(() => import('./pages/InvoiceCreate'))
|
|
||||||
const InvoiceDetail = lazy(() => import('./pages/InvoiceDetail'))
|
const InvoiceDetail = lazy(() => import('./pages/InvoiceDetail'))
|
||||||
const Settings = lazy(() => import('./pages/Settings'))
|
const Settings = lazy(() => import('./pages/Settings'))
|
||||||
const AuditLog = lazy(() => import('./pages/AuditLog'))
|
const AuditLog = lazy(() => import('./pages/AuditLog'))
|
||||||
@@ -81,7 +80,7 @@ export default function AdminApp() {
|
|||||||
<Route path="projects/new" element={<ProjectCreate />} />
|
<Route path="projects/new" element={<ProjectCreate />} />
|
||||||
<Route path="projects/:id" element={<ProjectDetail />} />
|
<Route path="projects/:id" element={<ProjectDetail />} />
|
||||||
<Route path="invoices" element={<Invoices />} />
|
<Route path="invoices" element={<Invoices />} />
|
||||||
<Route path="invoices/new" element={<InvoiceCreate />} />
|
<Route path="invoices/new" element={<InvoiceDetail />} />
|
||||||
<Route path="invoices/:id" element={<InvoiceDetail />} />
|
<Route path="invoices/:id" element={<InvoiceDetail />} />
|
||||||
<Route path="settings" element={<Settings />} />
|
<Route path="settings" element={<Settings />} />
|
||||||
<Route path="audit-log" element={<AuditLog />} />
|
<Route path="audit-log" element={<AuditLog />} />
|
||||||
|
|||||||
@@ -1,659 +0,0 @@
|
|||||||
import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
|
|
||||||
import { useNavigate, useSearchParams, Link } from 'react-router-dom'
|
|
||||||
import { useAlert } from '../context/AlertContext'
|
|
||||||
import { useAuth } from '../context/AuthContext'
|
|
||||||
import Forbidden from '../components/Forbidden'
|
|
||||||
import FormField from '../components/FormField'
|
|
||||||
import AdminDatePicker from '../components/AdminDatePicker'
|
|
||||||
import { motion } from 'framer-motion'
|
|
||||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core'
|
|
||||||
import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'
|
|
||||||
import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
|
|
||||||
import { CSS } from '@dnd-kit/utilities'
|
|
||||||
import apiFetch from '../utils/api'
|
|
||||||
import { formatCurrency } from '../utils/formatters'
|
|
||||||
|
|
||||||
const API_BASE = '/api/admin'
|
|
||||||
|
|
||||||
const VAT_OPTIONS = [
|
|
||||||
{ value: 21, label: '21%' },
|
|
||||||
{ value: 12, label: '12%' },
|
|
||||||
{ value: 0, label: '0%' }
|
|
||||||
]
|
|
||||||
|
|
||||||
interface InvoiceItem {
|
|
||||||
_key: string
|
|
||||||
description: string
|
|
||||||
quantity: number
|
|
||||||
unit: string
|
|
||||||
unit_price: number
|
|
||||||
vat_rate: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Customer {
|
|
||||||
id: number
|
|
||||||
name: string
|
|
||||||
company_id?: string
|
|
||||||
city?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface BankAccount {
|
|
||||||
id: number
|
|
||||||
account_name: string
|
|
||||||
account_number?: string
|
|
||||||
bank_name?: string
|
|
||||||
bic?: string
|
|
||||||
iban?: string
|
|
||||||
is_default?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
interface InvoiceForm {
|
|
||||||
customer_id: number | null
|
|
||||||
customer_name: string
|
|
||||||
order_id: number | null
|
|
||||||
issue_date: string
|
|
||||||
due_date: string
|
|
||||||
tax_date: string
|
|
||||||
currency: string
|
|
||||||
apply_vat: number
|
|
||||||
vat_rate: number
|
|
||||||
payment_method: string
|
|
||||||
constant_symbol: string
|
|
||||||
issued_by: string
|
|
||||||
notes: string
|
|
||||||
bank_account_id: number | string
|
|
||||||
bank_name: string
|
|
||||||
bank_swift: string
|
|
||||||
bank_iban: string
|
|
||||||
bank_account: string
|
|
||||||
}
|
|
||||||
|
|
||||||
function SortableInvoiceRow({ item, index, currency, apply_vat, onUpdate, onRemove, canDelete }: {
|
|
||||||
item: InvoiceItem; index: number; currency: string; apply_vat: boolean;
|
|
||||||
onUpdate: (index: number, field: keyof InvoiceItem, value: string | number) => void;
|
|
||||||
onRemove: (index: number) => void; canDelete: boolean;
|
|
||||||
}) {
|
|
||||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item._key })
|
|
||||||
const style = {
|
|
||||||
transform: CSS.Transform.toString(transform),
|
|
||||||
transition,
|
|
||||||
opacity: isDragging ? 0.5 : 1,
|
|
||||||
background: isDragging ? 'var(--bg-secondary)' : undefined,
|
|
||||||
position: 'relative' as const,
|
|
||||||
zIndex: isDragging ? 10 : undefined,
|
|
||||||
}
|
|
||||||
const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
|
|
||||||
return (
|
|
||||||
<tr ref={setNodeRef} style={style}>
|
|
||||||
<td style={{ width: '2rem' }}>
|
|
||||||
<button type="button" className="admin-drag-handle" {...attributes} {...listeners} title="Přetáhnout">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
||||||
<circle cx="9" cy="5" r="1.5" /><circle cx="15" cy="5" r="1.5" />
|
|
||||||
<circle cx="9" cy="12" r="1.5" /><circle cx="15" cy="12" r="1.5" />
|
|
||||||
<circle cx="9" cy="19" r="1.5" /><circle cx="15" cy="19" r="1.5" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
<td className="text-tertiary text-center fw-500">{index + 1}</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" value={item.description} onChange={(e) => onUpdate(index, 'description', e.target.value)} className="admin-form-input fw-500" placeholder="Popis položky..." />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="number" value={item.quantity} onChange={(e) => onUpdate(index, 'quantity', e.target.value)} className="admin-form-input" min="0" step="any" style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }} />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" value={item.unit} onChange={(e) => onUpdate(index, 'unit', e.target.value)} className="admin-form-input" placeholder="ks" style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }} />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="number" value={item.unit_price} onChange={(e) => onUpdate(index, 'unit_price', e.target.value)} className="admin-form-input" step="any" style={{ textAlign: 'right', height: '2.25rem', padding: '0.375rem 0.5rem' }} />
|
|
||||||
</td>
|
|
||||||
{apply_vat ? (
|
|
||||||
<td>
|
|
||||||
<select value={item.vat_rate} onChange={(e) => onUpdate(index, 'vat_rate', Number(e.target.value))} className="admin-form-select" style={{ height: '2.25rem', padding: '0.375rem 0.5rem', minWidth: '4.5rem' }}>
|
|
||||||
{VAT_OPTIONS.map(o => (<option key={o.value} value={o.value}>{o.label}</option>))}
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
) : null}
|
|
||||||
<td style={{ textAlign: 'right', fontWeight: 600, whiteSpace: 'nowrap' }}>
|
|
||||||
{formatCurrency(lineTotal, currency)}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{canDelete && (
|
|
||||||
<button type="button" onClick={() => onRemove(index)} className="admin-btn-icon danger" title="Odebrat" aria-label="Odebrat">
|
|
||||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function InvoiceCreate() {
|
|
||||||
const keyCounterRef = useRef(0)
|
|
||||||
const emptyItem = useCallback((): InvoiceItem => ({
|
|
||||||
_key: `inv-${++keyCounterRef.current}`,
|
|
||||||
description: '',
|
|
||||||
quantity: 1,
|
|
||||||
unit: 'ks',
|
|
||||||
unit_price: 0,
|
|
||||||
vat_rate: 21
|
|
||||||
}), [])
|
|
||||||
const dndSensors = useSensors(
|
|
||||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
|
||||||
useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 5 } }),
|
|
||||||
useSensor(KeyboardSensor),
|
|
||||||
)
|
|
||||||
const navigate = useNavigate()
|
|
||||||
const [searchParams] = useSearchParams()
|
|
||||||
const alert = useAlert()
|
|
||||||
const { hasPermission, user } = useAuth()
|
|
||||||
|
|
||||||
const rawOrderId = searchParams.get('fromOrder')
|
|
||||||
const fromOrderId = rawOrderId && /^\d+$/.test(rawOrderId) ? rawOrderId : null
|
|
||||||
|
|
||||||
const [form, setForm] = useState<InvoiceForm>({
|
|
||||||
customer_id: null,
|
|
||||||
customer_name: '',
|
|
||||||
order_id: fromOrderId ? Number(fromOrderId) : null,
|
|
||||||
issue_date: new Date().toISOString().split('T')[0],
|
|
||||||
due_date: new Date(Date.now() + 14 * 86400000).toISOString().split('T')[0],
|
|
||||||
tax_date: new Date().toISOString().split('T')[0],
|
|
||||||
currency: 'CZK',
|
|
||||||
apply_vat: 1,
|
|
||||||
vat_rate: 21,
|
|
||||||
payment_method: 'Příkazem',
|
|
||||||
constant_symbol: '0308',
|
|
||||||
issued_by: user?.fullName || '',
|
|
||||||
notes: '',
|
|
||||||
bank_account_id: '',
|
|
||||||
bank_name: '',
|
|
||||||
bank_swift: '',
|
|
||||||
bank_iban: '',
|
|
||||||
bank_account: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([])
|
|
||||||
const [dueDays, setDueDays] = useState(14)
|
|
||||||
const [items, setItems] = useState<InvoiceItem[]>([emptyItem()])
|
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
|
||||||
const [saving, setSaving] = useState(false)
|
|
||||||
const [loadingInit, setLoadingInit] = useState(true)
|
|
||||||
const [invoiceNumber, setInvoiceNumber] = useState('')
|
|
||||||
|
|
||||||
// Customer selector
|
|
||||||
const [customers, setCustomers] = useState<Customer[]>([])
|
|
||||||
const [customerSearch, setCustomerSearch] = useState('')
|
|
||||||
const [showCustomerDropdown, setShowCustomerDropdown] = useState(false)
|
|
||||||
|
|
||||||
// Draft
|
|
||||||
const DRAFT_KEY = 'boha_invoice_draft'
|
|
||||||
const isManual = !fromOrderId
|
|
||||||
|
|
||||||
const clearDraft = useCallback(() => {
|
|
||||||
try { localStorage.removeItem(DRAFT_KEY) } catch { /* ignore */ }
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Load init data
|
|
||||||
useEffect(() => {
|
|
||||||
const load = async () => {
|
|
||||||
try {
|
|
||||||
const promises = [
|
|
||||||
apiFetch(`${API_BASE}/invoices/next-number`),
|
|
||||||
apiFetch(`${API_BASE}/customers`),
|
|
||||||
apiFetch(`${API_BASE}/bank-accounts`)
|
|
||||||
]
|
|
||||||
if (fromOrderId) {
|
|
||||||
promises.push(apiFetch(`${API_BASE}/invoices/order-data/${fromOrderId}`))
|
|
||||||
}
|
|
||||||
|
|
||||||
const results = await Promise.all(promises)
|
|
||||||
|
|
||||||
const numRes = results[0]
|
|
||||||
if (numRes.ok) {
|
|
||||||
const numData = await numRes.json()
|
|
||||||
if (numData.success) setInvoiceNumber(numData.data?.next_number || numData.data?.number || '')
|
|
||||||
}
|
|
||||||
|
|
||||||
const custRes = results[1]
|
|
||||||
if (custRes.ok) {
|
|
||||||
const custData = await custRes.json()
|
|
||||||
if (custData.success) setCustomers(Array.isArray(custData.data) ? custData.data : custData.data?.customers || [])
|
|
||||||
}
|
|
||||||
|
|
||||||
const bankRes = results[2]
|
|
||||||
if (bankRes.ok) {
|
|
||||||
const bankData = await bankRes.json()
|
|
||||||
if (bankData.success && Array.isArray(bankData.data)) {
|
|
||||||
setBankAccounts(bankData.data)
|
|
||||||
const defaultAcc = bankData.data.find((a: BankAccount) => a.is_default)
|
|
||||||
if (defaultAcc) {
|
|
||||||
setForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
bank_account_id: defaultAcc.id,
|
|
||||||
bank_name: defaultAcc.bank_name || '',
|
|
||||||
bank_swift: defaultAcc.bic || '',
|
|
||||||
bank_iban: defaultAcc.iban || '',
|
|
||||||
bank_account: defaultAcc.account_number || ''
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pre-fill from order
|
|
||||||
if (fromOrderId && results[3]?.ok) {
|
|
||||||
const orderData = await results[3].json()
|
|
||||||
if (orderData.success) {
|
|
||||||
const order = orderData.data
|
|
||||||
const vatRate = Number(order.vat_rate) || 21
|
|
||||||
setForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
customer_id: order.customer_id,
|
|
||||||
customer_name: order.customer_name || '',
|
|
||||||
order_id: order.id,
|
|
||||||
currency: order.currency || 'CZK',
|
|
||||||
apply_vat: Number(order.apply_vat) || 0,
|
|
||||||
vat_rate: vatRate
|
|
||||||
}))
|
|
||||||
if (order.items?.length > 0) {
|
|
||||||
setItems(order.items.map((item: Record<string, unknown>) => ({
|
|
||||||
_key: `inv-${++keyCounterRef.current}`,
|
|
||||||
description: (item.description as string) || '',
|
|
||||||
quantity: Number(item.quantity) || 1,
|
|
||||||
unit: (item.unit as string) || '',
|
|
||||||
unit_price: Number(item.unit_price) || 0,
|
|
||||||
vat_rate: vatRate
|
|
||||||
})))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
alert.error('Chyba při načítání dat')
|
|
||||||
} finally {
|
|
||||||
setLoadingInit(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
load()
|
|
||||||
}, [fromOrderId, alert])
|
|
||||||
|
|
||||||
// Due date calculation
|
|
||||||
useEffect(() => {
|
|
||||||
if (!form.issue_date) return
|
|
||||||
const d = new Date(form.issue_date)
|
|
||||||
d.setDate(d.getDate() + dueDays)
|
|
||||||
setForm(prev => ({ ...prev, due_date: d.toISOString().split('T')[0] }))
|
|
||||||
}, [form.issue_date, dueDays])
|
|
||||||
|
|
||||||
// Customer filtering
|
|
||||||
const filteredCustomers = useMemo(() => {
|
|
||||||
if (!customerSearch) return customers
|
|
||||||
const q = customerSearch.toLowerCase()
|
|
||||||
return customers.filter(c =>
|
|
||||||
(c.name || '').toLowerCase().includes(q) ||
|
|
||||||
(c.company_id || '').includes(customerSearch) ||
|
|
||||||
(c.city || '').toLowerCase().includes(q)
|
|
||||||
)
|
|
||||||
}, [customers, customerSearch])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = () => setShowCustomerDropdown(false)
|
|
||||||
if (showCustomerDropdown) {
|
|
||||||
document.addEventListener('click', handleClickOutside)
|
|
||||||
return () => document.removeEventListener('click', handleClickOutside)
|
|
||||||
}
|
|
||||||
}, [showCustomerDropdown])
|
|
||||||
|
|
||||||
const selectBankAccount = (accountId: string) => {
|
|
||||||
const acc = bankAccounts.find(a => a.id === Number(accountId))
|
|
||||||
if (acc) {
|
|
||||||
setForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
bank_account_id: acc.id,
|
|
||||||
bank_name: acc.bank_name || '',
|
|
||||||
bank_swift: acc.bic || '',
|
|
||||||
bank_iban: acc.iban || '',
|
|
||||||
bank_account: acc.account_number || ''
|
|
||||||
}))
|
|
||||||
} else {
|
|
||||||
setForm(prev => ({ ...prev, bank_account_id: '', bank_name: '', bank_swift: '', bank_iban: '', bank_account: '' }))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectCustomer = (customer: Customer) => {
|
|
||||||
setForm(prev => ({ ...prev, customer_id: customer.id, customer_name: customer.name }))
|
|
||||||
setErrors(prev => ({ ...prev, customer_id: '' }))
|
|
||||||
setCustomerSearch('')
|
|
||||||
setShowCustomerDropdown(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Items management
|
|
||||||
const updateItem = (index: number, field: keyof InvoiceItem, value: string | number) => {
|
|
||||||
setItems(prev => prev.map((item, i) => i === index ? { ...item, [field]: value } : item))
|
|
||||||
}
|
|
||||||
|
|
||||||
const addItem = () => setItems(prev => [...prev, emptyItem()])
|
|
||||||
|
|
||||||
const removeItem = (index: number) => {
|
|
||||||
if (items.length <= 1) return
|
|
||||||
setItems(prev => prev.filter((_, i) => i !== index))
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDragEnd = (event: DragEndEvent) => {
|
|
||||||
const { active, over } = event
|
|
||||||
if (!over || active.id === over.id) return
|
|
||||||
setItems(prev => {
|
|
||||||
const oldIndex = prev.findIndex(i => i._key === String(active.id))
|
|
||||||
const newIndex = prev.findIndex(i => i._key === String(over.id))
|
|
||||||
if (oldIndex === -1 || newIndex === -1) return prev
|
|
||||||
return arrayMove(prev, oldIndex, newIndex)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Totals
|
|
||||||
const totals = useMemo(() => {
|
|
||||||
let subtotal = 0
|
|
||||||
const vatByRate: Record<number, number> = {}
|
|
||||||
|
|
||||||
items.forEach(item => {
|
|
||||||
const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
|
|
||||||
subtotal += lineTotal
|
|
||||||
|
|
||||||
if (form.apply_vat) {
|
|
||||||
const rate = Number(item.vat_rate) || 0
|
|
||||||
if (!vatByRate[rate]) vatByRate[rate] = 0
|
|
||||||
vatByRate[rate] += lineTotal * rate / 100
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const totalVat = Object.values(vatByRate).reduce((s, v) => s + v, 0)
|
|
||||||
return { subtotal, vatByRate, totalVat, total: subtotal + totalVat }
|
|
||||||
}, [items, form.apply_vat])
|
|
||||||
|
|
||||||
const handleSubmit = async (e?: React.FormEvent) => {
|
|
||||||
e?.preventDefault()
|
|
||||||
|
|
||||||
const newErrors: Record<string, string> = {}
|
|
||||||
if (!form.customer_id) newErrors.customer_id = 'Vyberte zákazníka'
|
|
||||||
if (!form.issue_date) newErrors.issue_date = 'Zadejte datum'
|
|
||||||
if (!form.tax_date) newErrors.tax_date = 'Zadejte datum'
|
|
||||||
if (!form.bank_account_id) newErrors.bank_account_id = 'Vyberte bankovní účet'
|
|
||||||
if (items.length === 0 || items.every(i => !i.description.trim())) {
|
|
||||||
newErrors.items = 'Přidejte alespoň jednu položku'
|
|
||||||
}
|
|
||||||
setErrors(newErrors)
|
|
||||||
if (Object.keys(newErrors).length > 0) return
|
|
||||||
|
|
||||||
setSaving(true)
|
|
||||||
try {
|
|
||||||
const response = await apiFetch(`${API_BASE}/invoices`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
...form,
|
|
||||||
invoice_number: invoiceNumber,
|
|
||||||
items: items.filter(i => i.description.trim()).map((item, i) => ({
|
|
||||||
...item,
|
|
||||||
position: i
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
})
|
|
||||||
const result = await response.json()
|
|
||||||
if (result.success) {
|
|
||||||
clearDraft()
|
|
||||||
alert.success(result.message || 'Faktura byla vytvořena')
|
|
||||||
navigate(`/invoices/${result.data.invoice_id}`)
|
|
||||||
} else {
|
|
||||||
alert.error(result.error || 'Nepodařilo se vytvořit fakturu')
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
alert.error('Chyba připojení')
|
|
||||||
} finally {
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!hasPermission('invoices.create')) return <Forbidden />
|
|
||||||
|
|
||||||
if (loadingInit) {
|
|
||||||
return (
|
|
||||||
<div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
|
|
||||||
<div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
|
|
||||||
<div className="admin-skeleton-line h-8" style={{ width: '200px' }} />
|
|
||||||
</div>
|
|
||||||
<div className="admin-card">
|
|
||||||
<div className="admin-skeleton" style={{ gap: '1.25rem' }}>
|
|
||||||
{[0, 1, 2, 3].map(i => (
|
|
||||||
<div key={i} className="admin-skeleton-row">
|
|
||||||
<div className="admin-skeleton-line w-1/4" />
|
|
||||||
<div className="admin-skeleton-line w-1/2" />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<motion.div className="admin-page-header" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25 }}>
|
|
||||||
<div className="flex-row gap-4">
|
|
||||||
<Link to="/invoices" className="admin-btn-icon" title="Zpět" aria-label="Zpět">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
||||||
<path d="M19 12H5M12 19l-7-7 7-7" />
|
|
||||||
</svg>
|
|
||||||
</Link>
|
|
||||||
<div>
|
|
||||||
<h1 className="admin-page-title">
|
|
||||||
Nová faktura {invoiceNumber && <span className="text-tertiary">({invoiceNumber})</span>}
|
|
||||||
</h1>
|
|
||||||
{fromOrderId && <p className="admin-page-subtitle">Z objednávky</p>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="admin-page-actions">
|
|
||||||
<button onClick={handleSubmit} className="admin-btn admin-btn-primary" disabled={saving}>
|
|
||||||
{saving ? (<><div className="admin-spinner admin-spinner-sm" />Ukládání...</>) : 'Uložit'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
{/* Basic info */}
|
|
||||||
<motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.06 }}>
|
|
||||||
<h3 className="admin-card-title">Základní údaje</h3>
|
|
||||||
<div className="admin-form">
|
|
||||||
<div className="offers-form-row-3">
|
|
||||||
<FormField label="Číslo faktury">
|
|
||||||
<input type="text" value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.target.value)} className="admin-form-input" />
|
|
||||||
</FormField>
|
|
||||||
<FormField label="Odběratel" error={errors.customer_id} required>
|
|
||||||
{form.customer_id ? (
|
|
||||||
<div className="offers-customer-selected">
|
|
||||||
<span>{form.customer_name}</span>
|
|
||||||
<button type="button" onClick={() => setForm(prev => ({ ...prev, customer_id: null, customer_name: '' }))} className="admin-btn-icon" title="Odebrat zákazníka">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="offers-customer-select" onClick={(e) => e.stopPropagation()}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={customerSearch}
|
|
||||||
onChange={(e) => { setCustomerSearch(e.target.value); setShowCustomerDropdown(true) }}
|
|
||||||
onFocus={() => setShowCustomerDropdown(true)}
|
|
||||||
className="admin-form-input"
|
|
||||||
placeholder="Hledat zákazníka (název, IČ, město)..."
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
{showCustomerDropdown && (
|
|
||||||
<div className="offers-customer-dropdown">
|
|
||||||
{filteredCustomers.length === 0 ? (
|
|
||||||
<div className="offers-customer-dropdown-empty">Žádní zákazníci</div>
|
|
||||||
) : (
|
|
||||||
filteredCustomers.slice(0, 10).map(c => (
|
|
||||||
<div key={c.id} className="offers-customer-dropdown-item" onMouseDown={() => selectCustomer(c)}>
|
|
||||||
<div>{c.name}</div>
|
|
||||||
{(c.company_id || c.city) && (
|
|
||||||
<div>{c.company_id && `IČ: ${c.company_id}`}{c.city && ` · ${c.city}`}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</FormField>
|
|
||||||
<FormField label="Vystavil">
|
|
||||||
<input type="text" value={form.issued_by} className="admin-form-input" readOnly style={{ backgroundColor: 'var(--bg-secondary)', cursor: 'default' }} />
|
|
||||||
</FormField>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="admin-form-row">
|
|
||||||
<FormField label="Datum vystavení" error={errors.issue_date} required>
|
|
||||||
<AdminDatePicker mode="date" value={form.issue_date} onChange={(val: string) => { setForm(prev => ({ ...prev, issue_date: val })); setErrors(prev => ({ ...prev, issue_date: '' })) }} />
|
|
||||||
</FormField>
|
|
||||||
<FormField label="Splatnost (dny)">
|
|
||||||
<select value={dueDays} onChange={(e) => setDueDays(Number(e.target.value))} className="admin-form-select">
|
|
||||||
{Array.from({ length: 60 }, (_, i) => i + 1).map(n => (
|
|
||||||
<option key={n} value={n}>{n}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
{form.due_date && (
|
|
||||||
<span className="text-tertiary" style={{ fontSize: '0.75rem', marginTop: '0.25rem' }}>
|
|
||||||
Splatnost: {new Date(form.due_date).toLocaleDateString('cs-CZ')}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</FormField>
|
|
||||||
<FormField label="DÚZP" error={errors.tax_date} required>
|
|
||||||
<AdminDatePicker mode="date" value={form.tax_date} onChange={(val: string) => { setForm(prev => ({ ...prev, tax_date: val })); setErrors(prev => ({ ...prev, tax_date: '' })) }} />
|
|
||||||
</FormField>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="offers-form-row-3">
|
|
||||||
<FormField label="Forma úhrady">
|
|
||||||
<select value={form.payment_method} onChange={(e) => setForm(prev => ({ ...prev, payment_method: e.target.value }))} className="admin-form-select">
|
|
||||||
<option value="Příkazem">Příkazem</option>
|
|
||||||
<option value="Hotově">Hotově</option>
|
|
||||||
<option value="Dobírka">Dobírka</option>
|
|
||||||
</select>
|
|
||||||
</FormField>
|
|
||||||
<FormField label="Měna">
|
|
||||||
<select value={form.currency} onChange={(e) => setForm(prev => ({ ...prev, currency: e.target.value }))} className="admin-form-select">
|
|
||||||
<option value="CZK">CZK (Kč)</option>
|
|
||||||
<option value="EUR">EUR</option>
|
|
||||||
<option value="USD">USD ($)</option>
|
|
||||||
</select>
|
|
||||||
</FormField>
|
|
||||||
<FormField label="DPH">
|
|
||||||
<div className="flex-row-gap">
|
|
||||||
<label className="admin-form-checkbox" style={{ whiteSpace: 'nowrap' }}>
|
|
||||||
<input type="checkbox" checked={!!form.apply_vat} onChange={(e) => setForm(prev => ({ ...prev, apply_vat: e.target.checked ? 1 : 0 }))} />
|
|
||||||
<span>Uplatnit DPH</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</FormField>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FormField label="Bankovní účet" error={errors.bank_account_id} required>
|
|
||||||
<select
|
|
||||||
value={form.bank_account_id}
|
|
||||||
onChange={(e) => { selectBankAccount(e.target.value); setErrors(prev => ({ ...prev, bank_account_id: '' })) }}
|
|
||||||
className="admin-form-select"
|
|
||||||
>
|
|
||||||
<option value="">{'\u2014'} Vyberte účet {'\u2014'}</option>
|
|
||||||
{bankAccounts.map(acc => (
|
|
||||||
<option key={acc.id} value={acc.id}>
|
|
||||||
{acc.account_name}{acc.account_number ? ` (${acc.account_number})` : ''}{acc.is_default ? ' ★' : ''}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</FormField>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Items */}
|
|
||||||
<motion.div className="admin-card" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
|
|
||||||
<div className="admin-card-body">
|
|
||||||
<div className="admin-card-header flex-between">
|
|
||||||
<div>
|
|
||||||
<h3 className="admin-card-title">Položky</h3>
|
|
||||||
{errors.items && <span className="admin-form-error">{errors.items}</span>}
|
|
||||||
</div>
|
|
||||||
<button type="button" onClick={addItem} className="admin-btn admin-btn-secondary admin-btn-sm">+ Přidat položku</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
|
|
||||||
<SortableContext items={items.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
|
||||||
<div className="admin-table-responsive">
|
|
||||||
<table className="admin-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style={{ width: '2rem' }} />
|
|
||||||
<th style={{ width: '2rem', textAlign: 'center' }}>#</th>
|
|
||||||
<th>Popis</th>
|
|
||||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Množství</th>
|
|
||||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jednotka</th>
|
|
||||||
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jedn. cena</th>
|
|
||||||
{form.apply_vat ? <th style={{ width: '5rem', textAlign: 'center' }}>DPH</th> : null}
|
|
||||||
<th style={{ width: '8rem', textAlign: 'right' }}>Celkem</th>
|
|
||||||
<th style={{ width: '2.5rem' }}></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{items.map((item, index) => (
|
|
||||||
<SortableInvoiceRow
|
|
||||||
key={item._key}
|
|
||||||
item={item}
|
|
||||||
index={index}
|
|
||||||
currency={form.currency}
|
|
||||||
apply_vat={!!form.apply_vat}
|
|
||||||
onUpdate={updateItem}
|
|
||||||
onRemove={removeItem}
|
|
||||||
canDelete={items.length > 1}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</SortableContext>
|
|
||||||
</DndContext>
|
|
||||||
|
|
||||||
{/* Totals */}
|
|
||||||
<div className="offers-totals-summary">
|
|
||||||
<div className="offers-totals-row">
|
|
||||||
<span>Mezisoučet:</span>
|
|
||||||
<span>{formatCurrency(totals.subtotal, form.currency)}</span>
|
|
||||||
</div>
|
|
||||||
{form.apply_vat && Object.entries(totals.vatByRate).map(([rate, amount]) => (
|
|
||||||
<div key={rate} className="offers-totals-row">
|
|
||||||
<span>DPH {rate}%:</span>
|
|
||||||
<span>{formatCurrency(amount, form.currency)}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<div className="offers-totals-row offers-totals-total">
|
|
||||||
<span>Celkem k úhradě:</span>
|
|
||||||
<span>{formatCurrency(totals.total, form.currency)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Notes */}
|
|
||||||
<motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.15 }}>
|
|
||||||
<h3 className="admin-card-title">Veřejné poznámky na faktuře</h3>
|
|
||||||
<textarea
|
|
||||||
className="admin-form-input"
|
|
||||||
rows={4}
|
|
||||||
value={form.notes}
|
|
||||||
onChange={(e) => setForm(prev => ({ ...prev, notes: e.target.value }))}
|
|
||||||
placeholder="Poznámky zobrazené na faktuře..."
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,18 +1,19 @@
|
|||||||
import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
|
import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
|
||||||
|
import { useNavigate, useSearchParams, useParams, Link } from 'react-router-dom'
|
||||||
import { useAlert } from '../context/AlertContext'
|
import { useAlert } from '../context/AlertContext'
|
||||||
import { useAuth } from '../context/AuthContext'
|
import { useAuth } from '../context/AuthContext'
|
||||||
import { useParams, useNavigate, Link } from 'react-router-dom'
|
import Forbidden from '../components/Forbidden'
|
||||||
|
import FormField from '../components/FormField'
|
||||||
|
import AdminDatePicker from '../components/AdminDatePicker'
|
||||||
|
import ConfirmModal from '../components/ConfirmModal'
|
||||||
import { motion, AnimatePresence } from 'framer-motion'
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core'
|
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core'
|
||||||
import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'
|
import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'
|
||||||
import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
|
import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
|
||||||
import { CSS } from '@dnd-kit/utilities'
|
import { CSS } from '@dnd-kit/utilities'
|
||||||
import ConfirmModal from '../components/ConfirmModal'
|
|
||||||
import Forbidden from '../components/Forbidden'
|
|
||||||
import FormField from '../components/FormField'
|
|
||||||
|
|
||||||
import apiFetch from '../utils/api'
|
import apiFetch from '../utils/api'
|
||||||
import { formatCurrency, formatDate } from '../utils/formatters'
|
import { formatCurrency, formatDate } from '../utils/formatters'
|
||||||
|
|
||||||
const API_BASE = '/api/admin'
|
const API_BASE = '/api/admin'
|
||||||
|
|
||||||
const STATUS_LABELS: Record<string, string> = {
|
const STATUS_LABELS: Record<string, string> = {
|
||||||
@@ -38,6 +39,7 @@ const VAT_OPTIONS = [
|
|||||||
|
|
||||||
interface InvoiceItem {
|
interface InvoiceItem {
|
||||||
id?: number
|
id?: number
|
||||||
|
_key: string
|
||||||
description: string
|
description: string
|
||||||
quantity: number
|
quantity: number
|
||||||
unit: string
|
unit: string
|
||||||
@@ -45,8 +47,42 @@ interface InvoiceItem {
|
|||||||
vat_rate: number
|
vat_rate: number
|
||||||
}
|
}
|
||||||
|
|
||||||
interface EditItem extends InvoiceItem {
|
interface Customer {
|
||||||
_key: string
|
id: number
|
||||||
|
name: string
|
||||||
|
company_id?: string
|
||||||
|
city?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BankAccount {
|
||||||
|
id: number
|
||||||
|
account_name: string
|
||||||
|
account_number?: string
|
||||||
|
bank_name?: string
|
||||||
|
bic?: string
|
||||||
|
iban?: string
|
||||||
|
is_default?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InvoiceForm {
|
||||||
|
customer_id: number | null
|
||||||
|
customer_name: string
|
||||||
|
order_id: number | null
|
||||||
|
issue_date: string
|
||||||
|
due_date: string
|
||||||
|
tax_date: string
|
||||||
|
currency: string
|
||||||
|
apply_vat: number
|
||||||
|
vat_rate: number
|
||||||
|
payment_method: string
|
||||||
|
constant_symbol: string
|
||||||
|
issued_by: string
|
||||||
|
notes: string
|
||||||
|
bank_account_id: number | string
|
||||||
|
bank_name: string
|
||||||
|
bank_swift: string
|
||||||
|
bank_iban: string
|
||||||
|
bank_account: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface InvoiceCustomer {
|
interface InvoiceCustomer {
|
||||||
@@ -71,12 +107,76 @@ interface Invoice {
|
|||||||
paid_date?: string
|
paid_date?: string
|
||||||
notes: string
|
notes: string
|
||||||
apply_vat: number | string
|
apply_vat: number | string
|
||||||
items: InvoiceItem[]
|
items: Omit<InvoiceItem, '_key'>[]
|
||||||
valid_transitions?: string[]
|
valid_transitions?: string[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Sortable row for create mode
|
||||||
|
function SortableInvoiceRow({ item, index, currency, apply_vat, onUpdate, onRemove, canDelete }: {
|
||||||
|
item: InvoiceItem; index: number; currency: string; apply_vat: boolean;
|
||||||
|
onUpdate: (index: number, field: keyof InvoiceItem, value: string | number) => void;
|
||||||
|
onRemove: (index: number) => void; canDelete: boolean;
|
||||||
|
}) {
|
||||||
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item._key })
|
||||||
|
const style = {
|
||||||
|
transform: CSS.Transform.toString(transform),
|
||||||
|
transition,
|
||||||
|
opacity: isDragging ? 0.5 : 1,
|
||||||
|
background: isDragging ? 'var(--bg-secondary)' : undefined,
|
||||||
|
position: 'relative' as const,
|
||||||
|
zIndex: isDragging ? 10 : undefined,
|
||||||
|
}
|
||||||
|
const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
|
||||||
|
return (
|
||||||
|
<tr ref={setNodeRef} style={style}>
|
||||||
|
<td style={{ width: '2rem' }}>
|
||||||
|
<button type="button" className="admin-drag-handle" {...attributes} {...listeners} title="Přetáhnout">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<circle cx="9" cy="5" r="1.5" /><circle cx="15" cy="5" r="1.5" />
|
||||||
|
<circle cx="9" cy="12" r="1.5" /><circle cx="15" cy="12" r="1.5" />
|
||||||
|
<circle cx="9" cy="19" r="1.5" /><circle cx="15" cy="19" r="1.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
<td className="text-tertiary text-center fw-500">{index + 1}</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" value={item.description} onChange={(e) => onUpdate(index, 'description', e.target.value)} className="admin-form-input fw-500" placeholder="Popis položky..." />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" value={item.quantity} onChange={(e) => onUpdate(index, 'quantity', e.target.value)} className="admin-form-input" min="0" step="any" style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }} />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" value={item.unit} onChange={(e) => onUpdate(index, 'unit', e.target.value)} className="admin-form-input" placeholder="ks" style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }} />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" value={item.unit_price} onChange={(e) => onUpdate(index, 'unit_price', e.target.value)} className="admin-form-input" step="any" style={{ textAlign: 'right', height: '2.25rem', padding: '0.375rem 0.5rem' }} />
|
||||||
|
</td>
|
||||||
|
{apply_vat ? (
|
||||||
|
<td>
|
||||||
|
<select value={item.vat_rate} onChange={(e) => onUpdate(index, 'vat_rate', Number(e.target.value))} className="admin-form-select" style={{ height: '2.25rem', padding: '0.375rem 0.5rem', minWidth: '4.5rem' }}>
|
||||||
|
{VAT_OPTIONS.map(o => (<option key={o.value} value={o.value}>{o.label}</option>))}
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
) : null}
|
||||||
|
<td style={{ textAlign: 'right', fontWeight: 600, whiteSpace: 'nowrap' }}>
|
||||||
|
{formatCurrency(lineTotal, currency)}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{canDelete && (
|
||||||
|
<button type="button" onClick={() => onRemove(index)} className="admin-btn-icon danger" title="Odebrat" aria-label="Odebrat">
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sortable row for edit mode (existing invoice items)
|
||||||
function SortableInvoiceEditRow({ item, index, apply_vat, onUpdate, onRemove, canDelete }: {
|
function SortableInvoiceEditRow({ item, index, apply_vat, onUpdate, onRemove, canDelete }: {
|
||||||
item: EditItem; index: number; apply_vat: boolean;
|
item: InvoiceItem; index: number; apply_vat: boolean;
|
||||||
onUpdate: (index: number, field: string, value: string | number) => void;
|
onUpdate: (index: number, field: string, value: string | number) => void;
|
||||||
onRemove: (index: number) => void; canDelete: boolean;
|
onRemove: (index: number) => void; canDelete: boolean;
|
||||||
}) {
|
}) {
|
||||||
@@ -131,14 +231,77 @@ function SortableInvoiceEditRow({ item, index, apply_vat, onUpdate, onRemove, ca
|
|||||||
|
|
||||||
export default function InvoiceDetail() {
|
export default function InvoiceDetail() {
|
||||||
const { id } = useParams<{ id: string }>()
|
const { id } = useParams<{ id: string }>()
|
||||||
const alert = useAlert()
|
const isEdit = Boolean(id)
|
||||||
const { hasPermission } = useAuth()
|
|
||||||
const navigate = useNavigate()
|
|
||||||
|
|
||||||
|
const keyCounterRef = useRef(0)
|
||||||
|
const emptyItem = useCallback((): InvoiceItem => ({
|
||||||
|
_key: `inv-${++keyCounterRef.current}`,
|
||||||
|
description: '',
|
||||||
|
quantity: 1,
|
||||||
|
unit: 'ks',
|
||||||
|
unit_price: 0,
|
||||||
|
vat_rate: 21
|
||||||
|
}), [])
|
||||||
|
|
||||||
|
const dndSensors = useSensors(
|
||||||
|
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||||
|
useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 5 } }),
|
||||||
|
useSensor(KeyboardSensor),
|
||||||
|
)
|
||||||
|
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [searchParams] = useSearchParams()
|
||||||
|
const alert = useAlert()
|
||||||
|
const { hasPermission, user } = useAuth()
|
||||||
|
|
||||||
|
// ─── Create mode state ───
|
||||||
|
const rawOrderId = searchParams.get('fromOrder')
|
||||||
|
const fromOrderId = !isEdit && rawOrderId && /^\d+$/.test(rawOrderId) ? rawOrderId : null
|
||||||
|
|
||||||
|
const [form, setForm] = useState<InvoiceForm>({
|
||||||
|
customer_id: null,
|
||||||
|
customer_name: '',
|
||||||
|
order_id: fromOrderId ? Number(fromOrderId) : null,
|
||||||
|
issue_date: new Date().toISOString().split('T')[0],
|
||||||
|
due_date: new Date(Date.now() + 14 * 86400000).toISOString().split('T')[0],
|
||||||
|
tax_date: new Date().toISOString().split('T')[0],
|
||||||
|
currency: 'CZK',
|
||||||
|
apply_vat: 1,
|
||||||
|
vat_rate: 21,
|
||||||
|
payment_method: 'Příkazem',
|
||||||
|
constant_symbol: '0308',
|
||||||
|
issued_by: user?.fullName || '',
|
||||||
|
notes: '',
|
||||||
|
bank_account_id: '',
|
||||||
|
bank_name: '',
|
||||||
|
bank_swift: '',
|
||||||
|
bank_iban: '',
|
||||||
|
bank_account: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([])
|
||||||
|
const [dueDays, setDueDays] = useState(14)
|
||||||
|
const [items, setItems] = useState<InvoiceItem[]>([emptyItem()])
|
||||||
|
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||||
|
const [saving, setSaving] = useState(false)
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [invoiceNumber, setInvoiceNumber] = useState('')
|
||||||
|
|
||||||
|
// Customer selector (create mode)
|
||||||
|
const [customers, setCustomers] = useState<Customer[]>([])
|
||||||
|
const [customerSearch, setCustomerSearch] = useState('')
|
||||||
|
const [showCustomerDropdown, setShowCustomerDropdown] = useState(false)
|
||||||
|
|
||||||
|
// Draft
|
||||||
|
const DRAFT_KEY = 'boha_invoice_draft'
|
||||||
|
|
||||||
|
const clearDraft = useCallback(() => {
|
||||||
|
try { localStorage.removeItem(DRAFT_KEY) } catch { /* ignore */ }
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// ─── Edit mode state ───
|
||||||
const [invoice, setInvoice] = useState<Invoice | null>(null)
|
const [invoice, setInvoice] = useState<Invoice | null>(null)
|
||||||
const [notes, setNotes] = useState('')
|
const [notes, setNotes] = useState('')
|
||||||
const [saving, setSaving] = useState(false)
|
|
||||||
const [statusChanging, setStatusChanging] = useState<string | null>(null)
|
const [statusChanging, setStatusChanging] = useState<string | null>(null)
|
||||||
const [statusConfirm, setStatusConfirm] = useState<{ show: boolean; status: string | null }>({ show: false, status: null })
|
const [statusConfirm, setStatusConfirm] = useState<{ show: boolean; status: string | null }>({ show: false, status: null })
|
||||||
const [pdfLoading, setPdfLoading] = useState(false)
|
const [pdfLoading, setPdfLoading] = useState(false)
|
||||||
@@ -146,17 +309,99 @@ export default function InvoiceDetail() {
|
|||||||
const [deleteConfirm, setDeleteConfirm] = useState(false)
|
const [deleteConfirm, setDeleteConfirm] = useState(false)
|
||||||
const [deleting, setDeleting] = useState(false)
|
const [deleting, setDeleting] = useState(false)
|
||||||
|
|
||||||
// Edit items
|
// Edit items (edit mode)
|
||||||
const [editingItems, setEditingItems] = useState(false)
|
const [editingItems, setEditingItems] = useState(false)
|
||||||
const [editItems, setEditItems] = useState<EditItem[]>([])
|
const [editItems, setEditItems] = useState<InvoiceItem[]>([])
|
||||||
const editKeyCounter = useRef(0)
|
const editKeyCounter = useRef(0)
|
||||||
const dndSensors = useSensors(
|
|
||||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
|
||||||
useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 5 } }),
|
|
||||||
useSensor(KeyboardSensor),
|
|
||||||
)
|
|
||||||
|
|
||||||
|
// ─── Data loading ───
|
||||||
|
|
||||||
|
// Create mode: load next number, customers, bank accounts, order data
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit) return
|
||||||
|
const load = async () => {
|
||||||
|
try {
|
||||||
|
const promises = [
|
||||||
|
apiFetch(`${API_BASE}/invoices/next-number`),
|
||||||
|
apiFetch(`${API_BASE}/customers`),
|
||||||
|
apiFetch(`${API_BASE}/bank-accounts`)
|
||||||
|
]
|
||||||
|
if (fromOrderId) {
|
||||||
|
promises.push(apiFetch(`${API_BASE}/invoices/order-data/${fromOrderId}`))
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = await Promise.all(promises)
|
||||||
|
|
||||||
|
const numRes = results[0]
|
||||||
|
if (numRes.ok) {
|
||||||
|
const numData = await numRes.json()
|
||||||
|
if (numData.success) setInvoiceNumber(numData.data?.next_number || numData.data?.number || '')
|
||||||
|
}
|
||||||
|
|
||||||
|
const custRes = results[1]
|
||||||
|
if (custRes.ok) {
|
||||||
|
const custData = await custRes.json()
|
||||||
|
if (custData.success) setCustomers(Array.isArray(custData.data) ? custData.data : custData.data?.customers || [])
|
||||||
|
}
|
||||||
|
|
||||||
|
const bankRes = results[2]
|
||||||
|
if (bankRes.ok) {
|
||||||
|
const bankData = await bankRes.json()
|
||||||
|
if (bankData.success && Array.isArray(bankData.data)) {
|
||||||
|
setBankAccounts(bankData.data)
|
||||||
|
const defaultAcc = bankData.data.find((a: BankAccount) => a.is_default)
|
||||||
|
if (defaultAcc) {
|
||||||
|
setForm(prev => ({
|
||||||
|
...prev,
|
||||||
|
bank_account_id: defaultAcc.id,
|
||||||
|
bank_name: defaultAcc.bank_name || '',
|
||||||
|
bank_swift: defaultAcc.bic || '',
|
||||||
|
bank_iban: defaultAcc.iban || '',
|
||||||
|
bank_account: defaultAcc.account_number || ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pre-fill from order
|
||||||
|
if (fromOrderId && results[3]?.ok) {
|
||||||
|
const orderData = await results[3].json()
|
||||||
|
if (orderData.success) {
|
||||||
|
const order = orderData.data
|
||||||
|
const vatRate = Number(order.vat_rate) || 21
|
||||||
|
setForm(prev => ({
|
||||||
|
...prev,
|
||||||
|
customer_id: order.customer_id,
|
||||||
|
customer_name: order.customer_name || '',
|
||||||
|
order_id: order.id,
|
||||||
|
currency: order.currency || 'CZK',
|
||||||
|
apply_vat: Number(order.apply_vat) || 0,
|
||||||
|
vat_rate: vatRate
|
||||||
|
}))
|
||||||
|
if (order.items?.length > 0) {
|
||||||
|
setItems(order.items.map((item: Record<string, unknown>) => ({
|
||||||
|
_key: `inv-${++keyCounterRef.current}`,
|
||||||
|
description: (item.description as string) || '',
|
||||||
|
quantity: Number(item.quantity) || 1,
|
||||||
|
unit: (item.unit as string) || '',
|
||||||
|
unit_price: Number(item.unit_price) || 0,
|
||||||
|
vat_rate: vatRate
|
||||||
|
})))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
alert.error('Chyba při načítání dat')
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
load()
|
||||||
|
}, [isEdit, fromOrderId, alert])
|
||||||
|
|
||||||
|
// Edit mode: load existing invoice
|
||||||
const fetchDetail = useCallback(async () => {
|
const fetchDetail = useCallback(async () => {
|
||||||
|
if (!id) return
|
||||||
try {
|
try {
|
||||||
const response = await apiFetch(`${API_BASE}/invoices/${id}`)
|
const response = await apiFetch(`${API_BASE}/invoices/${id}`)
|
||||||
if (response.status === 401) return
|
if (response.status === 401) return
|
||||||
@@ -177,10 +422,149 @@ export default function InvoiceDetail() {
|
|||||||
}, [id, alert, navigate])
|
}, [id, alert, navigate])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchDetail()
|
if (isEdit) fetchDetail()
|
||||||
}, [fetchDetail])
|
}, [isEdit, fetchDetail])
|
||||||
|
|
||||||
const totals = useMemo(() => {
|
// ─── Create mode: due date calculation ───
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit) return
|
||||||
|
if (!form.issue_date) return
|
||||||
|
const d = new Date(form.issue_date)
|
||||||
|
d.setDate(d.getDate() + dueDays)
|
||||||
|
setForm(prev => ({ ...prev, due_date: d.toISOString().split('T')[0] }))
|
||||||
|
}, [isEdit, form.issue_date, dueDays])
|
||||||
|
|
||||||
|
// ─── Create mode: customer filtering ───
|
||||||
|
const filteredCustomers = useMemo(() => {
|
||||||
|
if (!customerSearch) return customers
|
||||||
|
const q = customerSearch.toLowerCase()
|
||||||
|
return customers.filter(c =>
|
||||||
|
(c.name || '').toLowerCase().includes(q) ||
|
||||||
|
(c.company_id || '').includes(customerSearch) ||
|
||||||
|
(c.city || '').toLowerCase().includes(q)
|
||||||
|
)
|
||||||
|
}, [customers, customerSearch])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = () => setShowCustomerDropdown(false)
|
||||||
|
if (showCustomerDropdown) {
|
||||||
|
document.addEventListener('click', handleClickOutside)
|
||||||
|
return () => document.removeEventListener('click', handleClickOutside)
|
||||||
|
}
|
||||||
|
}, [showCustomerDropdown])
|
||||||
|
|
||||||
|
const selectBankAccount = (accountId: string) => {
|
||||||
|
const acc = bankAccounts.find(a => a.id === Number(accountId))
|
||||||
|
if (acc) {
|
||||||
|
setForm(prev => ({
|
||||||
|
...prev,
|
||||||
|
bank_account_id: acc.id,
|
||||||
|
bank_name: acc.bank_name || '',
|
||||||
|
bank_swift: acc.bic || '',
|
||||||
|
bank_iban: acc.iban || '',
|
||||||
|
bank_account: acc.account_number || ''
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
setForm(prev => ({ ...prev, bank_account_id: '', bank_name: '', bank_swift: '', bank_iban: '', bank_account: '' }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectCustomer = (customer: Customer) => {
|
||||||
|
setForm(prev => ({ ...prev, customer_id: customer.id, customer_name: customer.name }))
|
||||||
|
setErrors(prev => ({ ...prev, customer_id: '' }))
|
||||||
|
setCustomerSearch('')
|
||||||
|
setShowCustomerDropdown(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Create mode: items management ───
|
||||||
|
const updateItem = (index: number, field: keyof InvoiceItem, value: string | number) => {
|
||||||
|
setItems(prev => prev.map((item, i) => i === index ? { ...item, [field]: value } : item))
|
||||||
|
}
|
||||||
|
|
||||||
|
const addItem = () => setItems(prev => [...prev, emptyItem()])
|
||||||
|
|
||||||
|
const removeItem = (index: number) => {
|
||||||
|
if (items.length <= 1) return
|
||||||
|
setItems(prev => prev.filter((_, i) => i !== index))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCreateDragEnd = (event: DragEndEvent) => {
|
||||||
|
const { active, over } = event
|
||||||
|
if (!over || active.id === over.id) return
|
||||||
|
setItems(prev => {
|
||||||
|
const oldIndex = prev.findIndex(i => i._key === String(active.id))
|
||||||
|
const newIndex = prev.findIndex(i => i._key === String(over.id))
|
||||||
|
if (oldIndex === -1 || newIndex === -1) return prev
|
||||||
|
return arrayMove(prev, oldIndex, newIndex)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Create mode: totals ───
|
||||||
|
const createTotals = useMemo(() => {
|
||||||
|
let subtotal = 0
|
||||||
|
const vatByRate: Record<number, number> = {}
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
|
||||||
|
subtotal += lineTotal
|
||||||
|
|
||||||
|
if (form.apply_vat) {
|
||||||
|
const rate = Number(item.vat_rate) || 0
|
||||||
|
if (!vatByRate[rate]) vatByRate[rate] = 0
|
||||||
|
vatByRate[rate] += lineTotal * rate / 100
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const totalVat = Object.values(vatByRate).reduce((s, v) => s + v, 0)
|
||||||
|
return { subtotal, vatByRate, totalVat, total: subtotal + totalVat }
|
||||||
|
}, [items, form.apply_vat])
|
||||||
|
|
||||||
|
// ─── Create mode: submit ───
|
||||||
|
const handleCreateSubmit = async (e?: React.FormEvent) => {
|
||||||
|
e?.preventDefault()
|
||||||
|
|
||||||
|
const newErrors: Record<string, string> = {}
|
||||||
|
if (!form.customer_id) newErrors.customer_id = 'Vyberte zákazníka'
|
||||||
|
if (!form.issue_date) newErrors.issue_date = 'Zadejte datum'
|
||||||
|
if (!form.tax_date) newErrors.tax_date = 'Zadejte datum'
|
||||||
|
if (!form.bank_account_id) newErrors.bank_account_id = 'Vyberte bankovní účet'
|
||||||
|
if (items.length === 0 || items.every(i => !i.description.trim())) {
|
||||||
|
newErrors.items = 'Přidejte alespoň jednu položku'
|
||||||
|
}
|
||||||
|
setErrors(newErrors)
|
||||||
|
if (Object.keys(newErrors).length > 0) return
|
||||||
|
|
||||||
|
setSaving(true)
|
||||||
|
try {
|
||||||
|
const response = await apiFetch(`${API_BASE}/invoices`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
...form,
|
||||||
|
invoice_number: invoiceNumber,
|
||||||
|
items: items.filter(i => i.description.trim()).map((item, i) => ({
|
||||||
|
...item,
|
||||||
|
position: i
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
const result = await response.json()
|
||||||
|
if (result.success) {
|
||||||
|
clearDraft()
|
||||||
|
alert.success(result.message || 'Faktura byla vytvořena')
|
||||||
|
navigate(`/invoices/${result.data.invoice_id}`)
|
||||||
|
} else {
|
||||||
|
alert.error(result.error || 'Nepodařilo se vytvořit fakturu')
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
alert.error('Chyba připojení')
|
||||||
|
} finally {
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Edit mode: totals ───
|
||||||
|
const editTotals = useMemo(() => {
|
||||||
if (!invoice?.items) return { subtotal: 0, vatByRate: {} as Record<number, number>, totalVat: 0, total: 0 }
|
if (!invoice?.items) return { subtotal: 0, vatByRate: {} as Record<number, number>, totalVat: 0, total: 0 }
|
||||||
let subtotal = 0
|
let subtotal = 0
|
||||||
const vatByRate: Record<number, number> = {}
|
const vatByRate: Record<number, number> = {}
|
||||||
@@ -199,8 +583,7 @@ export default function InvoiceDetail() {
|
|||||||
return { subtotal, vatByRate, totalVat, total: subtotal + totalVat }
|
return { subtotal, vatByRate, totalVat, total: subtotal + totalVat }
|
||||||
}, [invoice])
|
}, [invoice])
|
||||||
|
|
||||||
if (!hasPermission('invoices.view')) return <Forbidden />
|
// ─── Edit mode: status change ───
|
||||||
|
|
||||||
const handleStatusChange = async () => {
|
const handleStatusChange = async () => {
|
||||||
if (!statusConfirm.status) return
|
if (!statusConfirm.status) return
|
||||||
setStatusChanging(statusConfirm.status)
|
setStatusChanging(statusConfirm.status)
|
||||||
@@ -225,6 +608,7 @@ export default function InvoiceDetail() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── Edit mode: save notes ───
|
||||||
const handleSaveNotes = async () => {
|
const handleSaveNotes = async () => {
|
||||||
setSaving(true)
|
setSaving(true)
|
||||||
try {
|
try {
|
||||||
@@ -246,6 +630,7 @@ export default function InvoiceDetail() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── Edit mode: PDF export ───
|
||||||
const handleViewPdf = async (lang = 'cs') => {
|
const handleViewPdf = async (lang = 'cs') => {
|
||||||
setLangModal(false)
|
setLangModal(false)
|
||||||
const newWindow = window.open('', '_blank')
|
const newWindow = window.open('', '_blank')
|
||||||
@@ -272,7 +657,7 @@ export default function InvoiceDetail() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Edit items
|
// ─── Edit mode: edit items ───
|
||||||
const startEditItems = () => {
|
const startEditItems = () => {
|
||||||
if (!invoice) return
|
if (!invoice) return
|
||||||
setEditItems(invoice.items.map(item => ({
|
setEditItems(invoice.items.map(item => ({
|
||||||
@@ -299,7 +684,7 @@ export default function InvoiceDetail() {
|
|||||||
setEditItems(prev => prev.filter((_, i) => i !== index))
|
setEditItems(prev => prev.filter((_, i) => i !== index))
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDragEnd = (event: DragEndEvent) => {
|
const handleEditDragEnd = (event: DragEndEvent) => {
|
||||||
const { active, over } = event
|
const { active, over } = event
|
||||||
if (!over || active.id === over.id) return
|
if (!over || active.id === over.id) return
|
||||||
setEditItems(prev => {
|
setEditItems(prev => {
|
||||||
@@ -335,6 +720,7 @@ export default function InvoiceDetail() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── Edit mode: delete ───
|
||||||
const handleDelete = async () => {
|
const handleDelete = async () => {
|
||||||
setDeleting(true)
|
setDeleting(true)
|
||||||
try {
|
try {
|
||||||
@@ -354,18 +740,25 @@ export default function InvoiceDetail() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── Permission checks ───
|
||||||
|
if (!isEdit && !hasPermission('invoices.create')) return <Forbidden />
|
||||||
|
if (isEdit && !hasPermission('invoices.view')) return <Forbidden />
|
||||||
|
|
||||||
|
// ─── Loading skeleton ───
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
|
<div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
|
||||||
<div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
|
<div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
|
||||||
<div className="flex-row-gap">
|
<div className="flex-row-gap">
|
||||||
<div className="admin-skeleton-line" style={{ width: '32px', height: '32px', borderRadius: '8px' }} />
|
{isEdit && <div className="admin-skeleton-line" style={{ width: '32px', height: '32px', borderRadius: '8px' }} />}
|
||||||
<div className="admin-skeleton-line h-8" style={{ width: '200px' }} />
|
<div className="admin-skeleton-line h-8" style={{ width: '200px' }} />
|
||||||
</div>
|
</div>
|
||||||
|
{isEdit && (
|
||||||
<div className="admin-skeleton-row gap-2">
|
<div className="admin-skeleton-row gap-2">
|
||||||
<div className="admin-skeleton-line h-10" style={{ width: '100px', borderRadius: '8px' }} />
|
<div className="admin-skeleton-line h-10" style={{ width: '100px', borderRadius: '8px' }} />
|
||||||
<div className="admin-skeleton-line h-10" style={{ width: '100px', borderRadius: '8px' }} />
|
<div className="admin-skeleton-line h-10" style={{ width: '100px', borderRadius: '8px' }} />
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="admin-card">
|
<div className="admin-card">
|
||||||
<div className="admin-skeleton" style={{ gap: '1.25rem' }}>
|
<div className="admin-skeleton" style={{ gap: '1.25rem' }}>
|
||||||
@@ -381,6 +774,236 @@ export default function InvoiceDetail() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
// CREATE MODE
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
if (!isEdit) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<motion.div className="admin-page-header" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25 }}>
|
||||||
|
<div className="flex-row gap-4">
|
||||||
|
<Link to="/invoices" className="admin-btn-icon" title="Zpět" aria-label="Zpět">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M19 12H5M12 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
<div>
|
||||||
|
<h1 className="admin-page-title">
|
||||||
|
Nová faktura {invoiceNumber && <span className="text-tertiary">({invoiceNumber})</span>}
|
||||||
|
</h1>
|
||||||
|
{fromOrderId && <p className="admin-page-subtitle">Z objednávky</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="admin-page-actions">
|
||||||
|
<button onClick={handleCreateSubmit} className="admin-btn admin-btn-primary" disabled={saving}>
|
||||||
|
{saving ? (<><div className="admin-spinner admin-spinner-sm" />Ukládání...</>) : 'Uložit'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<form onSubmit={handleCreateSubmit}>
|
||||||
|
{/* Basic info */}
|
||||||
|
<motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.06 }}>
|
||||||
|
<h3 className="admin-card-title">Základní údaje</h3>
|
||||||
|
<div className="admin-form">
|
||||||
|
<div className="offers-form-row-3">
|
||||||
|
<FormField label="Číslo faktury">
|
||||||
|
<input type="text" value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.target.value)} className="admin-form-input" />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Odběratel" error={errors.customer_id} required>
|
||||||
|
{form.customer_id ? (
|
||||||
|
<div className="offers-customer-selected">
|
||||||
|
<span>{form.customer_name}</span>
|
||||||
|
<button type="button" onClick={() => setForm(prev => ({ ...prev, customer_id: null, customer_name: '' }))} className="admin-btn-icon" title="Odebrat zákazníka">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="offers-customer-select" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerSearch}
|
||||||
|
onChange={(e) => { setCustomerSearch(e.target.value); setShowCustomerDropdown(true) }}
|
||||||
|
onFocus={() => setShowCustomerDropdown(true)}
|
||||||
|
className="admin-form-input"
|
||||||
|
placeholder="Hledat zákazníka (název, IČ, město)..."
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
{showCustomerDropdown && (
|
||||||
|
<div className="offers-customer-dropdown">
|
||||||
|
{filteredCustomers.length === 0 ? (
|
||||||
|
<div className="offers-customer-dropdown-empty">Žádní zákazníci</div>
|
||||||
|
) : (
|
||||||
|
filteredCustomers.slice(0, 10).map(c => (
|
||||||
|
<div key={c.id} className="offers-customer-dropdown-item" onMouseDown={() => selectCustomer(c)}>
|
||||||
|
<div>{c.name}</div>
|
||||||
|
{(c.company_id || c.city) && (
|
||||||
|
<div>{c.company_id && `IČ: ${c.company_id}`}{c.city && ` · ${c.city}`}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Vystavil">
|
||||||
|
<input type="text" value={form.issued_by} className="admin-form-input" readOnly style={{ backgroundColor: 'var(--bg-secondary)', cursor: 'default' }} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="admin-form-row">
|
||||||
|
<FormField label="Datum vystavení" error={errors.issue_date} required>
|
||||||
|
<AdminDatePicker mode="date" value={form.issue_date} onChange={(val: string) => { setForm(prev => ({ ...prev, issue_date: val })); setErrors(prev => ({ ...prev, issue_date: '' })) }} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Splatnost (dny)">
|
||||||
|
<select value={dueDays} onChange={(e) => setDueDays(Number(e.target.value))} className="admin-form-select">
|
||||||
|
{Array.from({ length: 60 }, (_, i) => i + 1).map(n => (
|
||||||
|
<option key={n} value={n}>{n}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{form.due_date && (
|
||||||
|
<span className="text-tertiary" style={{ fontSize: '0.75rem', marginTop: '0.25rem' }}>
|
||||||
|
Splatnost: {new Date(form.due_date).toLocaleDateString('cs-CZ')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</FormField>
|
||||||
|
<FormField label="DÚZP" error={errors.tax_date} required>
|
||||||
|
<AdminDatePicker mode="date" value={form.tax_date} onChange={(val: string) => { setForm(prev => ({ ...prev, tax_date: val })); setErrors(prev => ({ ...prev, tax_date: '' })) }} />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="offers-form-row-3">
|
||||||
|
<FormField label="Forma úhrady">
|
||||||
|
<select value={form.payment_method} onChange={(e) => setForm(prev => ({ ...prev, payment_method: e.target.value }))} className="admin-form-select">
|
||||||
|
<option value="Příkazem">Příkazem</option>
|
||||||
|
<option value="Hotově">Hotově</option>
|
||||||
|
<option value="Dobírka">Dobírka</option>
|
||||||
|
</select>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Měna">
|
||||||
|
<select value={form.currency} onChange={(e) => setForm(prev => ({ ...prev, currency: e.target.value }))} className="admin-form-select">
|
||||||
|
<option value="CZK">CZK (Kč)</option>
|
||||||
|
<option value="EUR">EUR</option>
|
||||||
|
<option value="USD">USD ($)</option>
|
||||||
|
</select>
|
||||||
|
</FormField>
|
||||||
|
<FormField label="DPH">
|
||||||
|
<div className="flex-row-gap">
|
||||||
|
<label className="admin-form-checkbox" style={{ whiteSpace: 'nowrap' }}>
|
||||||
|
<input type="checkbox" checked={!!form.apply_vat} onChange={(e) => setForm(prev => ({ ...prev, apply_vat: e.target.checked ? 1 : 0 }))} />
|
||||||
|
<span>Uplatnit DPH</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField label="Bankovní účet" error={errors.bank_account_id} required>
|
||||||
|
<select
|
||||||
|
value={form.bank_account_id}
|
||||||
|
onChange={(e) => { selectBankAccount(e.target.value); setErrors(prev => ({ ...prev, bank_account_id: '' })) }}
|
||||||
|
className="admin-form-select"
|
||||||
|
>
|
||||||
|
<option value="">{'\u2014'} Vyberte účet {'\u2014'}</option>
|
||||||
|
{bankAccounts.map(acc => (
|
||||||
|
<option key={acc.id} value={acc.id}>
|
||||||
|
{acc.account_name}{acc.account_number ? ` (${acc.account_number})` : ''}{acc.is_default ? ' ★' : ''}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Items */}
|
||||||
|
<motion.div className="admin-card" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
|
||||||
|
<div className="admin-card-body">
|
||||||
|
<div className="admin-card-header flex-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="admin-card-title">Položky</h3>
|
||||||
|
{errors.items && <span className="admin-form-error">{errors.items}</span>}
|
||||||
|
</div>
|
||||||
|
<button type="button" onClick={addItem} className="admin-btn admin-btn-secondary admin-btn-sm">+ Přidat položku</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleCreateDragEnd}>
|
||||||
|
<SortableContext items={items.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
||||||
|
<div className="admin-table-responsive">
|
||||||
|
<table className="admin-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style={{ width: '2rem' }} />
|
||||||
|
<th style={{ width: '2rem', textAlign: 'center' }}>#</th>
|
||||||
|
<th>Popis</th>
|
||||||
|
<th style={{ width: '5.5rem', textAlign: 'center' }}>Množství</th>
|
||||||
|
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jednotka</th>
|
||||||
|
<th style={{ width: '5.5rem', textAlign: 'center' }}>Jedn. cena</th>
|
||||||
|
{form.apply_vat ? <th style={{ width: '5rem', textAlign: 'center' }}>DPH</th> : null}
|
||||||
|
<th style={{ width: '8rem', textAlign: 'right' }}>Celkem</th>
|
||||||
|
<th style={{ width: '2.5rem' }}></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<SortableInvoiceRow
|
||||||
|
key={item._key}
|
||||||
|
item={item}
|
||||||
|
index={index}
|
||||||
|
currency={form.currency}
|
||||||
|
apply_vat={!!form.apply_vat}
|
||||||
|
onUpdate={updateItem}
|
||||||
|
onRemove={removeItem}
|
||||||
|
canDelete={items.length > 1}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</SortableContext>
|
||||||
|
</DndContext>
|
||||||
|
|
||||||
|
{/* Totals */}
|
||||||
|
<div className="offers-totals-summary">
|
||||||
|
<div className="offers-totals-row">
|
||||||
|
<span>Mezisoučet:</span>
|
||||||
|
<span>{formatCurrency(createTotals.subtotal, form.currency)}</span>
|
||||||
|
</div>
|
||||||
|
{form.apply_vat && Object.entries(createTotals.vatByRate).map(([rate, amount]) => (
|
||||||
|
<div key={rate} className="offers-totals-row">
|
||||||
|
<span>DPH {rate}%:</span>
|
||||||
|
<span>{formatCurrency(amount, form.currency)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="offers-totals-row offers-totals-total">
|
||||||
|
<span>Celkem k úhradě:</span>
|
||||||
|
<span>{formatCurrency(createTotals.total, form.currency)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.15 }}>
|
||||||
|
<h3 className="admin-card-title">Veřejné poznámky na faktuře</h3>
|
||||||
|
<textarea
|
||||||
|
className="admin-form-input"
|
||||||
|
rows={4}
|
||||||
|
value={form.notes}
|
||||||
|
onChange={(e) => setForm(prev => ({ ...prev, notes: e.target.value }))}
|
||||||
|
placeholder="Poznámky zobrazené na faktuře..."
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
|
// EDIT MODE
|
||||||
|
// ═══════════════════════════════════════════════════════════
|
||||||
if (!invoice) return null
|
if (!invoice) return null
|
||||||
|
|
||||||
const isDraft = invoice.status === 'issued'
|
const isDraft = invoice.status === 'issued'
|
||||||
@@ -490,7 +1113,7 @@ export default function InvoiceDetail() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{editingItems ? (
|
{editingItems ? (
|
||||||
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
|
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleEditDragEnd}>
|
||||||
<SortableContext items={editItems.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
<SortableContext items={editItems.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
||||||
<div className="admin-table-responsive">
|
<div className="admin-table-responsive">
|
||||||
<table className="admin-table">
|
<table className="admin-table">
|
||||||
@@ -567,9 +1190,9 @@ export default function InvoiceDetail() {
|
|||||||
<div className="offers-totals-summary">
|
<div className="offers-totals-summary">
|
||||||
<div className="offers-totals-row">
|
<div className="offers-totals-row">
|
||||||
<span>Mezisoučet:</span>
|
<span>Mezisoučet:</span>
|
||||||
<span>{formatCurrency(totals.subtotal, invoice.currency)}</span>
|
<span>{formatCurrency(editTotals.subtotal, invoice.currency)}</span>
|
||||||
</div>
|
</div>
|
||||||
{Number(invoice.apply_vat) > 0 && Object.entries(totals.vatByRate).map(([rate, amount]) => (
|
{Number(invoice.apply_vat) > 0 && Object.entries(editTotals.vatByRate).map(([rate, amount]) => (
|
||||||
<div key={rate} className="offers-totals-row">
|
<div key={rate} className="offers-totals-row">
|
||||||
<span>DPH {rate}%:</span>
|
<span>DPH {rate}%:</span>
|
||||||
<span>{formatCurrency(amount, invoice.currency)}</span>
|
<span>{formatCurrency(amount, invoice.currency)}</span>
|
||||||
@@ -577,7 +1200,7 @@ export default function InvoiceDetail() {
|
|||||||
))}
|
))}
|
||||||
<div className="offers-totals-row offers-totals-total">
|
<div className="offers-totals-row offers-totals-total">
|
||||||
<span>Celkem k úhradě:</span>
|
<span>Celkem k úhradě:</span>
|
||||||
<span>{formatCurrency(totals.total, invoice.currency)}</span>
|
<span>{formatCurrency(editTotals.total, invoice.currency)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user