initial commit

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

src/admin/pages/InvoiceDetail.tsx

@@ -0,0 +1,598 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { useAlert } from '../context/AlertContext'
+import { useAuth } from '../context/AuthContext'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { motion, AnimatePresence } from 'framer-motion'
+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> = {
+  issued: 'Vystavena',
+  paid: 'Zaplacena',
+  overdue: 'Po splatnosti'
+}
+
+const STATUS_CLASSES: Record<string, string> = {
+  issued: 'admin-badge-invoice-issued',
+  paid: 'admin-badge-invoice-paid',
+  overdue: 'admin-badge-invoice-overdue'
+}
+
+const TRANSITION_LABELS: Record<string, string> = { paid: 'Zaplaceno' }
+const TRANSITION_CLASSES: Record<string, string> = { paid: 'admin-btn admin-btn-primary' }
+
+const VAT_OPTIONS = [
+  { value: 21, label: '21%' },
+  { value: 12, label: '12%' },
+  { value: 0, label: '0%' }
+]
+
+interface InvoiceItem {
+  id?: number
+  description: string
+  quantity: number
+  unit: string
+  unit_price: number
+  vat_rate: number
+}
+
+interface EditItem extends InvoiceItem {
+  _key: string
+}
+
+interface InvoiceCustomer {
+  company_id?: string
+  vat_id?: string
+}
+
+interface Invoice {
+  id: number
+  invoice_number: string
+  customer_name: string | null
+  customer?: InvoiceCustomer
+  order_id?: number
+  order_number?: string
+  currency: string
+  status: string
+  issue_date: string
+  due_date: string
+  tax_date: string
+  payment_method: string
+  issued_by: string | null
+  paid_date?: string
+  notes: string
+  apply_vat: number | string
+  items: InvoiceItem[]
+  valid_transitions?: string[]
+}
+
+export default function InvoiceDetail() {
+  const { id } = useParams<{ id: string }>()
+  const alert = useAlert()
+  const { hasPermission } = useAuth()
+  const navigate = useNavigate()
+
+  const [loading, setLoading] = useState(true)
+  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)
+  const [langModal, setLangModal] = useState(false)
+  const [deleteConfirm, setDeleteConfirm] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+
+  // Edit items
+  const [editingItems, setEditingItems] = useState(false)
+  const [editItems, setEditItems] = useState<EditItem[]>([])
+  const editKeyCounter = useRef(0)
+
+  const fetchDetail = useCallback(async () => {
+    try {
+      const response = await apiFetch(`${API_BASE}/invoices/${id}`)
+      if (response.status === 401) return
+      const result = await response.json()
+      if (result.success) {
+        setInvoice(result.data)
+        setNotes(result.data.notes || '')
+      } else {
+        alert.error(result.error || 'Nepodařilo se načíst fakturu')
+        navigate('/invoices')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+      navigate('/invoices')
+    } finally {
+      setLoading(false)
+    }
+  }, [id, alert, navigate])
+
+  useEffect(() => {
+    fetchDetail()
+  }, [fetchDetail])
+
+  const totals = useMemo(() => {
+    if (!invoice?.items) return { subtotal: 0, vatByRate: {} as Record<number, number>, totalVat: 0, total: 0 }
+    let subtotal = 0
+    const vatByRate: Record<number, number> = {}
+
+    invoice.items.forEach(item => {
+      const lineTotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
+      subtotal += lineTotal
+      if (Number(invoice.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 }
+  }, [invoice])
+
+  if (!hasPermission('invoices.view')) return <Forbidden />
+
+  const handleStatusChange = async () => {
+    if (!statusConfirm.status) return
+    setStatusChanging(statusConfirm.status)
+    setStatusConfirm({ show: false, status: null })
+    try {
+      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: statusConfirm.status })
+      })
+      const result = await response.json()
+      if (result.success) {
+        alert.success(result.message || 'Stav byl změněn')
+        fetchDetail()
+      } else {
+        alert.error(result.error || 'Nepodařilo se změnit stav')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    } finally {
+      setStatusChanging(null)
+    }
+  }
+
+  const handleSaveNotes = async () => {
+    setSaving(true)
+    try {
+      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ notes })
+      })
+      const result = await response.json()
+      if (result.success) {
+        alert.success('Poznámky byly uloženy')
+      } else {
+        alert.error(result.error || 'Nepodařilo se uložit poznámky')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleViewPdf = async (lang = 'cs') => {
+    setLangModal(false)
+    const newWindow = window.open('', '_blank')
+    setPdfLoading(true)
+    try {
+      const response = await apiFetch(`${API_BASE}/invoices-pdf/${id}?lang=${encodeURIComponent(lang)}`)
+      if (!response.ok) {
+        newWindow?.close()
+        alert.error('Nepodařilo se vygenerovat PDF')
+        return
+      }
+      const html = await response.text()
+      if (newWindow) {
+        newWindow.document.open()
+        newWindow.document.write(html)
+        newWindow.document.close()
+        newWindow.onload = () => newWindow.print()
+      }
+    } catch {
+      newWindow?.close()
+      alert.error('Chyba připojení')
+    } finally {
+      setPdfLoading(false)
+    }
+  }
+
+  // Edit items
+  const startEditItems = () => {
+    if (!invoice) return
+    setEditItems(invoice.items.map(item => ({
+      _key: `ei-${++editKeyCounter.current}`,
+      description: item.description || '',
+      quantity: Number(item.quantity) || 1,
+      unit: item.unit || '',
+      unit_price: Number(item.unit_price) || 0,
+      vat_rate: Number(item.vat_rate) || 21
+    })))
+    setEditingItems(true)
+  }
+
+  const updateEditItem = (index: number, field: string, value: string | number) => {
+    setEditItems(prev => prev.map((item, i) => i === index ? { ...item, [field]: value } : item))
+  }
+
+  const addEditItem = () => {
+    setEditItems(prev => [...prev, { _key: `ei-${++editKeyCounter.current}`, description: '', quantity: 1, unit: 'ks', unit_price: 0, vat_rate: 21 }])
+  }
+
+  const removeEditItem = (index: number) => {
+    if (editItems.length <= 1) return
+    setEditItems(prev => prev.filter((_, i) => i !== index))
+  }
+
+  const saveEditItems = async () => {
+    setSaving(true)
+    try {
+      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          items: editItems.filter(i => i.description.trim()).map((item, i) => ({ ...item, position: i }))
+        })
+      })
+      const result = await response.json()
+      if (result.success) {
+        alert.success('Položky byly uloženy')
+        setEditingItems(false)
+        fetchDetail()
+      } else {
+        alert.error(result.error || 'Nepodařilo se uložit položky')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    setDeleting(true)
+    try {
+      const response = await apiFetch(`${API_BASE}/invoices/${id}`, { method: 'DELETE' })
+      const result = await response.json()
+      if (result.success) {
+        alert.success(result.message || 'Faktura byla smazána')
+        navigate('/invoices')
+      } else {
+        alert.error(result.error || 'Nepodařilo se smazat fakturu')
+      }
+    } catch {
+      alert.error('Chyba připojení')
+    } finally {
+      setDeleting(false)
+      setDeleteConfirm(false)
+    }
+  }
+
+  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' }} />
+            <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>
+        </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>
+    )
+  }
+
+  if (!invoice) return null
+
+  const isDraft = invoice.status === 'issued'
+  const isPaid = invoice.status === 'paid'
+
+  return (
+    <div>
+      {/* Header */}
+      <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 flex-row-gap">
+              Faktura {invoice.invoice_number}
+              <span className={`admin-badge ${STATUS_CLASSES[invoice.status] || ''}`}>
+                {STATUS_LABELS[invoice.status] || invoice.status}
+              </span>
+            </h1>
+          </div>
+        </div>
+        <div className="admin-page-actions">
+          {hasPermission('invoices.export') && (
+            <button onClick={() => setLangModal(true)} className="admin-btn admin-btn-secondary" disabled={pdfLoading}>
+              {pdfLoading ? (<><div className="admin-spinner admin-spinner-sm" />PDF...</>) : (<>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                  <polyline points="14 2 14 8 20 8" />
+                </svg>PDF</>)}
+            </button>
+          )}
+          {hasPermission('invoices.edit') && invoice.valid_transitions?.map(status => (
+            <button key={status} onClick={() => setStatusConfirm({ show: true, status })} className={TRANSITION_CLASSES[status] || 'admin-btn admin-btn-secondary'} disabled={statusChanging === status}>
+              {statusChanging === status ? <div className="admin-spinner" style={{ width: 14, height: 14, borderWidth: 2 }} /> : (TRANSITION_LABELS[status] || status)}
+            </button>
+          ))}
+          {hasPermission('invoices.delete') && (
+            <button onClick={() => setDeleteConfirm(true)} className="admin-btn admin-btn-primary">Smazat</button>
+          )}
+        </div>
+      </motion.div>
+
+      {/* 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">Informace</h3>
+        <div className="admin-form">
+          <div className="offers-form-row-3 mb-2">
+            <FormField label="Zákazník">
+              <div className="fw-500">{invoice.customer_name || '\u2014'}</div>
+              {invoice.customer && (
+                <div className="text-tertiary" style={{ fontSize: '0.8rem', marginTop: '0.2rem' }}>
+                  {invoice.customer.company_id && `IČ: ${invoice.customer.company_id}`}
+                  {invoice.customer.vat_id && ` · DIČ: ${invoice.customer.vat_id}`}
+                </div>
+              )}
+            </FormField>
+            <FormField label="Objednávka">
+              <div>
+                {invoice.order_id ? (
+                  <Link to={`/orders/${invoice.order_id}`} className="link-accent">{invoice.order_number}</Link>
+                ) : '\u2014'}
+              </div>
+            </FormField>
+            <FormField label="Měna"><div>{invoice.currency}</div></FormField>
+          </div>
+          <div className="offers-form-row-3 mb-2">
+            <FormField label="Datum vystavení"><div>{formatDate(invoice.issue_date)}</div></FormField>
+            <FormField label="Datum splatnosti">
+              <div className={invoice.status === 'overdue' ? 'text-danger fw-600' : ''}>{formatDate(invoice.due_date)}</div>
+            </FormField>
+            <FormField label="DÚZP"><div>{formatDate(invoice.tax_date)}</div></FormField>
+          </div>
+          <div className="offers-form-row-3">
+            <FormField label="Forma úhrady"><div>{invoice.payment_method}</div></FormField>
+            <FormField label="Variabilní symbol"><div>{invoice.invoice_number}</div></FormField>
+            <FormField label="Vystavil"><div>{invoice.issued_by || '\u2014'}</div></FormField>
+          </div>
+          {invoice.paid_date && (
+            <div className="admin-form-row mt-2">
+              <FormField label="Datum úhrady">
+                <div style={{ color: 'var(--success)', fontWeight: 500 }}>{formatDate(invoice.paid_date)}</div>
+              </FormField>
+            </div>
+          )}
+        </div>
+      </motion.div>
+
+      {/* Items */}
+      <motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
+        <div className="flex-between mb-4">
+          <h3 className="admin-card-title" style={{ margin: 0 }}>Položky</h3>
+          {isDraft && hasPermission('invoices.edit') && (
+            editingItems ? (
+              <div className="flex-row gap-2">
+                <button type="button" onClick={addEditItem} className="admin-btn admin-btn-secondary admin-btn-sm">+ Přidat položku</button>
+                <button onClick={saveEditItems} className="admin-btn admin-btn-primary admin-btn-sm" disabled={saving}>{saving ? 'Ukládání...' : 'Uložit položky'}</button>
+                <button onClick={() => setEditingItems(false)} className="admin-btn admin-btn-secondary admin-btn-sm">Zrušit</button>
+              </div>
+            ) : (
+              <button onClick={startEditItems} className="admin-btn admin-btn-secondary admin-btn-sm">Upravit položky</button>
+            )
+          )}
+        </div>
+
+        {editingItems ? (
+          <div className="offers-items-table">
+            <table className="admin-table">
+              <thead>
+                <tr>
+                  <th style={{ width: '2.5rem', 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>
+                  <th style={{ width: '5rem', textAlign: 'center' }}>%DPH</th>
+                  <th style={{ width: '5.5rem' }}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {editItems.map((item, index) => (
+                  <tr key={item._key}>
+                    <td className="text-tertiary" style={{ textAlign: 'center', fontWeight: 500 }}>{index + 1}</td>
+                    <td><input type="text" value={item.description} onChange={(e) => updateEditItem(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) => updateEditItem(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) => updateEditItem(index, 'unit', e.target.value)} className="admin-form-input" style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }} /></td>
+                    <td><input type="number" value={item.unit_price} onChange={(e) => updateEditItem(index, 'unit_price', e.target.value)} className="admin-form-input" step="any" style={{ textAlign: 'right', height: '2.25rem', padding: '0.375rem 0.5rem' }} /></td>
+                    <td>
+                      {Number(invoice.apply_vat) ? (
+                        <select value={item.vat_rate} onChange={(e) => updateEditItem(index, 'vat_rate', Number(e.target.value))} className="admin-form-input" style={{ textAlign: 'center', height: '2.25rem', padding: '0.375rem 0.5rem' }}>
+                          {VAT_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+                        </select>
+                      ) : (
+                        <span className="text-tertiary" style={{ display: 'block', textAlign: 'center' }}>0%</span>
+                      )}
+                    </td>
+                    <td>
+                      <div style={{ display: 'flex', gap: '0.125rem', justifyContent: 'center' }}>
+                        {editItems.length > 1 && (
+                          <button type="button" onClick={() => removeEditItem(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>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <>
+            {invoice.items?.length > 0 ? (
+              <div className="offers-items-table">
+                <table className="admin-table">
+                  <thead>
+                    <tr>
+                      <th style={{ width: '2.5rem', textAlign: 'center' }}>#</th>
+                      <th>Popis</th>
+                      <th style={{ width: '5.5rem', textAlign: 'center' }}>Množství</th>
+                      <th style={{ width: '5rem', textAlign: 'center' }}>Jednotka</th>
+                      <th style={{ width: '8rem', textAlign: 'right' }}>Jedn. cena</th>
+                      <th style={{ width: '4rem', textAlign: 'center' }}>%DPH</th>
+                      <th style={{ width: '9rem', textAlign: 'right' }}>Celkem</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {invoice.items.map((item, index) => {
+                      const lineSubtotal = (Number(item.quantity) || 0) * (Number(item.unit_price) || 0)
+                      const lineVat = Number(invoice.apply_vat) ? lineSubtotal * (Number(item.vat_rate) || 0) / 100 : 0
+                      return (
+                        <tr key={item.id || index}>
+                          <td className="text-tertiary" style={{ textAlign: 'center', fontWeight: 500 }}>{index + 1}</td>
+                          <td className="fw-500">{item.description || '\u2014'}</td>
+                          <td style={{ textAlign: 'center' }}>{item.quantity} {item.unit && <span className="text-tertiary">{item.unit}</span>}</td>
+                          <td style={{ textAlign: 'center' }}>{item.unit || '\u2014'}</td>
+                          <td className="admin-mono text-right">{formatCurrency(item.unit_price, invoice.currency)}</td>
+                          <td style={{ textAlign: 'center' }}>{Number(invoice.apply_vat) ? Number(item.vat_rate) : 0}%</td>
+                          <td className="admin-mono" style={{ textAlign: 'right', fontWeight: 600 }}>{formatCurrency(lineSubtotal + lineVat, invoice.currency)}</td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <p className="text-tertiary">Žádné položky.</p>
+            )}
+          </>
+        )}
+
+        <div className="offers-totals-summary">
+          <div className="offers-totals-row">
+            <span>Mezisoučet:</span>
+            <span>{formatCurrency(totals.subtotal, invoice.currency)}</span>
+          </div>
+          {Number(invoice.apply_vat) > 0 && Object.entries(totals.vatByRate).map(([rate, amount]) => (
+            <div key={rate} className="offers-totals-row">
+              <span>DPH {rate}%:</span>
+              <span>{formatCurrency(amount, invoice.currency)}</span>
+            </div>
+          ))}
+          <div className="offers-totals-row offers-totals-total">
+            <span>Celkem k úhradě:</span>
+            <span>{formatCurrency(totals.total, invoice.currency)}</span>
+          </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>
+        {isPaid ? (
+          notes && notes.trim() && notes !== '<p><br></p>' ? (
+            <div dangerouslySetInnerHTML={{ __html: notes }} />
+          ) : (
+            <p className="text-tertiary">Žádné poznámky.</p>
+          )
+        ) : (
+          <>
+            <textarea className="admin-form-input" rows={4} value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Poznámky zobrazené na faktuře..." />
+            {hasPermission('invoices.edit') && (
+              <div className="mt-2">
+                <button onClick={handleSaveNotes} className="admin-btn admin-btn-secondary admin-btn-sm" disabled={saving}>
+                  {saving ? 'Ukládání...' : 'Uložit poznámky'}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </motion.div>
+
+      {/* Status change confirm */}
+      <ConfirmModal
+        isOpen={statusConfirm.show}
+        onClose={() => setStatusConfirm({ show: false, status: null })}
+        onConfirm={handleStatusChange}
+        title="Změnit stav faktury"
+        message={`Opravdu chcete změnit stav faktury "${invoice.invoice_number}" na "${STATUS_LABELS[statusConfirm.status || '']}"?`}
+        confirmText={TRANSITION_LABELS[statusConfirm.status || ''] || 'Potvrdit'}
+        cancelText="Zrušit"
+        type="default"
+      />
+
+      {/* Delete confirm */}
+      <ConfirmModal
+        isOpen={deleteConfirm}
+        onClose={() => setDeleteConfirm(false)}
+        onConfirm={handleDelete}
+        title="Smazat fakturu"
+        message={`Opravdu chcete smazat fakturu "${invoice.invoice_number}"? Tato akce je nevratná.`}
+        confirmText="Smazat"
+        cancelText="Zrušit"
+        type="danger"
+        loading={deleting}
+      />
+
+      {/* Language selection for PDF */}
+      <AnimatePresence>
+        {langModal && (
+          <motion.div className="admin-modal-overlay" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
+            <div className="admin-modal-backdrop" onClick={() => setLangModal(false)} />
+            <motion.div className="admin-modal admin-confirm-modal" role="dialog" aria-modal="true" initial={{ opacity: 0, scale: 0.95, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 20 }} transition={{ duration: 0.2 }}>
+              <div className="admin-modal-body admin-confirm-content">
+                <div className="admin-confirm-icon admin-confirm-icon-info">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
+                    <path d="M2 12h20" />
+                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+                  </svg>
+                </div>
+                <h2 className="admin-confirm-title">Jazyk faktury</h2>
+                <p className="admin-confirm-message">V jakém jazyce chcete vygenerovat fakturu?</p>
+              </div>
+              <div className="admin-modal-footer">
+                <button type="button" onClick={() => handleViewPdf('cs')} className="admin-btn admin-btn-primary">Čeština</button>
+                <button type="button" onClick={() => handleViewPdf('en')} className="admin-btn admin-btn-primary">English</button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}