fix: invoice items table — match offer detail card style
Changed from offers-editor-section + offers-items-table to admin-card + admin-card-body + admin-table-responsive, matching the offer detail page structure. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -576,18 +576,19 @@ export default function InvoiceCreate() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Items */}
|
{/* Items */}
|
||||||
<motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
|
<motion.div className="admin-card" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
|
||||||
<div className="flex-between mb-4">
|
<div className="admin-card-body">
|
||||||
|
<div className="admin-card-header flex-between">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="admin-card-title" style={{ margin: 0 }}>Položky</h3>
|
<h3 className="admin-card-title">Položky</h3>
|
||||||
{errors.items && <span className="admin-form-error">{errors.items}</span>}
|
{errors.items && <span className="admin-form-error">{errors.items}</span>}
|
||||||
</div>
|
</div>
|
||||||
<button type="button" onClick={addItem} className="admin-btn admin-btn-primary admin-btn-sm">+ Přidat položku</button>
|
<button type="button" onClick={addItem} className="admin-btn admin-btn-secondary admin-btn-sm">+ Přidat položku</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
|
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
|
||||||
<SortableContext items={items.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
<SortableContext items={items.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
||||||
<div className="offers-items-table">
|
<div className="admin-table-responsive">
|
||||||
<table className="admin-table">
|
<table className="admin-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -638,6 +639,7 @@ export default function InvoiceCreate() {
|
|||||||
<span>{formatCurrency(totals.total, form.currency)}</span>
|
<span>{formatCurrency(totals.total, form.currency)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Notes */}
|
{/* Notes */}
|
||||||
|
|||||||
@@ -472,9 +472,10 @@ export default function InvoiceDetail() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Items */}
|
{/* Items */}
|
||||||
<motion.div className="offers-editor-section" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
|
<motion.div className="admin-card" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.25, delay: 0.12 }}>
|
||||||
<div className="flex-between mb-4">
|
<div className="admin-card-body">
|
||||||
<h3 className="admin-card-title" style={{ margin: 0 }}>Položky</h3>
|
<div className="admin-card-header flex-between">
|
||||||
|
<h3 className="admin-card-title">Položky</h3>
|
||||||
{isDraft && hasPermission('invoices.edit') && (
|
{isDraft && hasPermission('invoices.edit') && (
|
||||||
editingItems ? (
|
editingItems ? (
|
||||||
<div className="flex-row gap-2">
|
<div className="flex-row gap-2">
|
||||||
@@ -491,7 +492,7 @@ export default function InvoiceDetail() {
|
|||||||
{editingItems ? (
|
{editingItems ? (
|
||||||
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
|
<DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
|
||||||
<SortableContext items={editItems.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
<SortableContext items={editItems.map(i => i._key)} strategy={verticalListSortingStrategy}>
|
||||||
<div className="offers-items-table">
|
<div className="admin-table-responsive">
|
||||||
<table className="admin-table">
|
<table className="admin-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -525,7 +526,7 @@ export default function InvoiceDetail() {
|
|||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{invoice.items?.length > 0 ? (
|
{invoice.items?.length > 0 ? (
|
||||||
<div className="offers-items-table">
|
<div className="admin-table-responsive">
|
||||||
<table className="admin-table">
|
<table className="admin-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -579,6 +580,7 @@ export default function InvoiceDetail() {
|
|||||||
<span>{formatCurrency(totals.total, invoice.currency)}</span>
|
<span>{formatCurrency(totals.total, invoice.currency)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Notes */}
|
{/* Notes */}
|
||||||
|
|||||||
Reference in New Issue
Block a user