From 93ea9911f8cf05d7979250b935b9c3bfbd2620eb Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Mon, 23 Mar 2026 19:22:01 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20invoice=20items=20table=20=E2=80=94=20ma?=
 =?UTF-8?q?tch=20offer=20detail=20card=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/admin/pages/InvoiceCreate.tsx | 12 +++++++-----
 src/admin/pages/InvoiceDetail.tsx | 12 +++++++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/admin/pages/InvoiceCreate.tsx b/src/admin/pages/InvoiceCreate.tsx
index a64b976..6451886 100644
--- a/src/admin/pages/InvoiceCreate.tsx
+++ b/src/admin/pages/InvoiceCreate.tsx
@@ -576,18 +576,19 @@ export default function InvoiceCreate() {
         </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">
+        <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" style={{ margin: 0 }}>Položky</h3>
+              <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-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>
 
           <DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
             <SortableContext items={items.map(i => i._key)} strategy={verticalListSortingStrategy}>
-              <div className="offers-items-table">
+              <div className="admin-table-responsive">
                 <table className="admin-table">
                   <thead>
                     <tr>
@@ -638,6 +639,7 @@ export default function InvoiceCreate() {
               <span>{formatCurrency(totals.total, form.currency)}</span>
             </div>
           </div>
+          </div>
         </motion.div>
 
         {/* Notes */}
diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx
index 0c4f547..553d6bf 100644
--- a/src/admin/pages/InvoiceDetail.tsx
+++ b/src/admin/pages/InvoiceDetail.tsx
@@ -472,9 +472,10 @@ export default function InvoiceDetail() {
       </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>
+      <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">
+          <h3 className="admin-card-title">Položky</h3>
           {isDraft && hasPermission('invoices.edit') && (
             editingItems ? (
               <div className="flex-row gap-2">
@@ -491,7 +492,7 @@ export default function InvoiceDetail() {
         {editingItems ? (
           <DndContext sensors={dndSensors} collisionDetection={closestCenter} modifiers={[restrictToVerticalAxis, restrictToParentElement]} onDragEnd={handleDragEnd}>
             <SortableContext items={editItems.map(i => i._key)} strategy={verticalListSortingStrategy}>
-              <div className="offers-items-table">
+              <div className="admin-table-responsive">
                 <table className="admin-table">
                   <thead>
                     <tr>
@@ -525,7 +526,7 @@ export default function InvoiceDetail() {
         ) : (
           <>
             {invoice.items?.length > 0 ? (
-              <div className="offers-items-table">
+              <div className="admin-table-responsive">
                 <table className="admin-table">
                   <thead>
                     <tr>
@@ -579,6 +580,7 @@ export default function InvoiceDetail() {
             <span>{formatCurrency(totals.total, invoice.currency)}</span>
           </div>
         </div>
+        </div>
       </motion.div>
 
       {/* Notes */}