refactor: merge InvoiceCreate into InvoiceDetail (single page for create + edit)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/admin/pages/InvoiceDetail.tsx

@@ -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 { 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 { 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 ConfirmModal from '../components/ConfirmModal'
-import Forbidden from '../components/Forbidden'
-import FormField from '../components/FormField'
-
 import apiFetch from '../utils/api'
 import { formatCurrency, formatDate } from '../utils/formatters'
+
 const API_BASE = '/api/admin'
 
 const STATUS_LABELS: Record<string, string> = {
@@ -38,6 +39,7 @@ const VAT_OPTIONS = [
 
 interface InvoiceItem {
   id?: number
+  _key: string
   description: string
   quantity: number
   unit: string
@@ -45,8 +47,42 @@ interface InvoiceItem {
   vat_rate: number
 }
 
-interface EditItem extends InvoiceItem {
-  _key: string
+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
 }
 
 interface InvoiceCustomer {
@@ -71,12 +107,76 @@ interface Invoice {
   paid_date?: string
   notes: string
   apply_vat: number | string
-  items: InvoiceItem[]
+  items: Omit<InvoiceItem, '_key'>[]
   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 }: {
-  item: EditItem; index: number; apply_vat: boolean;
+  item: InvoiceItem; index: number; apply_vat: boolean;
   onUpdate: (index: number, field: string, value: string | number) => void;
   onRemove: (index: number) => void; canDelete: boolean;
 }) {
@@ -131,14 +231,77 @@ function SortableInvoiceEditRow({ item, index, apply_vat, onUpdate, onRemove, ca
 
 export default function InvoiceDetail() {
   const { id } = useParams<{ id: string }>()
-  const alert = useAlert()
-  const { hasPermission } = useAuth()
-  const navigate = useNavigate()
+  const isEdit = Boolean(id)
 
+  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 [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 [notes, setNotes] = useState('')
-  const [saving, setSaving] = useState(false)
   const [statusChanging, setStatusChanging] = useState<string | null>(null)
   const [statusConfirm, setStatusConfirm] = useState<{ show: boolean; status: string | null }>({ show: false, status: null })
   const [pdfLoading, setPdfLoading] = useState(false)
@@ -146,17 +309,99 @@ export default function InvoiceDetail() {
   const [deleteConfirm, setDeleteConfirm] = useState(false)
   const [deleting, setDeleting] = useState(false)
 
-  // Edit items
+  // Edit items (edit mode)
   const [editingItems, setEditingItems] = useState(false)
-  const [editItems, setEditItems] = useState<EditItem[]>([])
+  const [editItems, setEditItems] = useState<InvoiceItem[]>([])
   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 () => {
+    if (!id) return
     try {
       const response = await apiFetch(`${API_BASE}/invoices/${id}`)
       if (response.status === 401) return
@@ -177,10 +422,149 @@ export default function InvoiceDetail() {
   }, [id, alert, navigate])
 
   useEffect(() => {
-    fetchDetail()
-  }, [fetchDetail])
+    if (isEdit) 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 }
     let subtotal = 0
     const vatByRate: Record<number, number> = {}
@@ -199,8 +583,7 @@ export default function InvoiceDetail() {
     return { subtotal, vatByRate, totalVat, total: subtotal + totalVat }
   }, [invoice])
 
-  if (!hasPermission('invoices.view')) return <Forbidden />
-
+  // ─── Edit mode: status change ───
   const handleStatusChange = async () => {
     if (!statusConfirm.status) return
     setStatusChanging(statusConfirm.status)
@@ -225,6 +608,7 @@ export default function InvoiceDetail() {
     }
   }
 
+  // ─── Edit mode: save notes ───
   const handleSaveNotes = async () => {
     setSaving(true)
     try {
@@ -246,6 +630,7 @@ export default function InvoiceDetail() {
     }
   }
 
+  // ─── Edit mode: PDF export ───
   const handleViewPdf = async (lang = 'cs') => {
     setLangModal(false)
     const newWindow = window.open('', '_blank')
@@ -272,7 +657,7 @@ export default function InvoiceDetail() {
     }
   }
 
-  // Edit items
+  // ─── Edit mode: edit items ───
   const startEditItems = () => {
     if (!invoice) return
     setEditItems(invoice.items.map(item => ({
@@ -299,7 +684,7 @@ export default function InvoiceDetail() {
     setEditItems(prev => prev.filter((_, i) => i !== index))
   }
 
-  const handleDragEnd = (event: DragEndEvent) => {
+  const handleEditDragEnd = (event: DragEndEvent) => {
     const { active, over } = event
     if (!over || active.id === over.id) return
     setEditItems(prev => {
@@ -335,6 +720,7 @@ export default function InvoiceDetail() {
     }
   }
 
+  // ─── Edit mode: delete ───
   const handleDelete = async () => {
     setDeleting(true)
     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) {
     return (
       <div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
         <div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
           <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>
-          <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>
+          {isEdit && (
+            <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>
+          )}
         </div>
         <div className="admin-card">
           <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
 
   const isDraft = invoice.status === 'issued'
@@ -490,7 +1113,7 @@ export default function InvoiceDetail() {
         </div>
 
         {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}>
               <div className="admin-table-responsive">
                 <table className="admin-table">
@@ -567,9 +1190,9 @@ export default function InvoiceDetail() {
         <div className="offers-totals-summary">
           <div className="offers-totals-row">
             <span>Mezisoučet:</span>
-            <span>{formatCurrency(totals.subtotal, invoice.currency)}</span>
+            <span>{formatCurrency(editTotals.subtotal, invoice.currency)}</span>
           </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">
               <span>DPH {rate}%:</span>
               <span>{formatCurrency(amount, invoice.currency)}</span>
@@ -577,7 +1200,7 @@ export default function InvoiceDetail() {
           ))}
           <div className="offers-totals-row offers-totals-total">
             <span>Celkem k úhradě:</span>
-            <span>{formatCurrency(totals.total, invoice.currency)}</span>
+            <span>{formatCurrency(editTotals.total, invoice.currency)}</span>
           </div>
         </div>
         </div>