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:
BOHA
2026-03-23 19:22:01 +01:00
parent 892d83cd90
commit 93ea9911f8
2 changed files with 14 additions and 10 deletions

View File

@@ -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 */}

View File

@@ -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 */}