demo

@@ -67,11 +67,11 @@ class OcrController extends Controller
     {
         try {
             // Lấy template name từ request hoặc mặc định
-            $templateName = $request->get('template_name', 'nemo12');
+            $templateName = $request->get('template_name', '');
 
             // Giả sử file OCR JSON & ảnh nằm trong storage/app/public/image/
-            $jsonPath = public_path("image/data_picking_detail_1754967679.json");
-            $imgPath = ("image/data_picking_detail_1754967679.jpg");
+            $jsonPath = public_path("image/3_1757295841_with_table.json");
+            $imgPath = ("image/3_1757295841.jpg");
 
             if (!file_exists($jsonPath)) {
                 return response()->json(['error' => 'File OCR JSON không tìm thấy'], 404);
@@ -82,6 +82,14 @@ class OcrController extends Controller
                 return response()->json(['error' => 'File OCR JSON không hợp lệ'], 400);
             }
 
+            if (!empty($ocrData)) {
+                foreach ($ocrData['tables'] as $item_data) {
+                    $table_box = $item_data['table_box'];
+                    $total_rows = $item_data['total_rows'] - 1;
+                    $table_detail = $item_data['cells'];
+                }
+            }
+
             $dataMapping = [];
             $is_template = false;
 
@@ -111,12 +119,17 @@ class OcrController extends Controller
                 }
             }
 
+
             return response()->json([
                 'success' => true,
-                'ocrData'      => $ocrData,
-                'pdfImageUrl'  => $imgPath,
-                'dataMapping'  => $dataMapping,
-                'is_template'  => $is_template,
+                'ocrData' => $ocrData['ocr_data'] ?? [],
+                'tableInfo' => $table_detail ?? [],
+                'table_box' => $table_box ?? [],
+                'total_rows' => $total_rows ?? 0,
+                'rows_box' => $rows_box ?? [],
+                'pdfImageUrl' => $imgPath,
+                'dataMapping' => $dataMapping,
+                'is_template' => $is_template,
                 'fieldOptions' => [
                     [ 'value' => 'template_name',  'label' => 'Tên Mẫu PDF' ],
                     [ 'value' => 'customer_name',  'label' => 'Tên khách hàng' ],

@@ -175,3 +175,22 @@ select {
     opacity: 1;
     transform: scale(1.02);
 }
+
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.data-table th,
+.data-table td {
+    border: 1px solid #ccc;
+    padding: 6px;
+}
+.data-table input {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.mt-10 {
+    margin-top: 10px;
+}

@@ -106,7 +106,46 @@
                    @blur="removeAllFocus()"
             >
         </div>
-        <button @click="saveTemplate">💾Save</button>
+
+        <!-- Table mapping -->
+        <table class="data-table" v-if="total_rows > 0">
+            <thead>
+            <tr>
+                <th>Product Name</th>
+                <th>Product Code</th>
+                <th>Quantity</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr class="table-detail"
+                v-for="(row, rowIndex) in total_rows"
+                :key="rowIndex"
+                :data-row="rowIndex"
+            >
+                <td class="form-group">
+                    <input
+                        :data-row="rowIndex"
+                        :data-field="'product_name'"
+                        placeholder="Enter name">
+                </td>
+                <td class="form-group">
+                    <input
+                        :data-row="rowIndex"
+                        :data-field="'product_code'"
+                        placeholder="Enter code">
+                </td>
+                <td class="form-group">
+                    <input
+                        :data-row="rowIndex"
+                        :data-field="'quantity'"
+                        type="number"
+                        placeholder="0">
+                </td>
+            </tr>
+            </tbody>
+        </table>
+
+        <button class="mt-10" @click="saveTemplate">💾Save</button>
     </div>
 
 </div>
@@ -124,6 +163,9 @@
                 activeIndex: null,
                 manualField: "",
                 formData: {},
+                tableInfo: {},
+                total_rows: 0,
+                table_box: [],
                 manualBoxData: {},
                 fieldOptions: [],
                 customer_name_xy: '',
@@ -836,11 +878,14 @@
                     }
 
                     this.ocrData      = data.ocrData;
+                    this.tableInfo    = data.tableInfo;
+                    this.table_box    = data.table_box;
+                    this.total_rows   = data.total_rows;
                     this.pdfImageUrl  = data.pdfImageUrl;
                     this.fieldOptions = data.fieldOptions;
                     this.dataMapping  = data.dataMapping;
                     this.is_template  = data.is_template;
-                    console.log('Loaded OCR data:', this.ocrData);
+                    //console.log('Loaded OCR data:', this.ocrData);
 
                 } catch (error) {
                     console.error('Error in loadOCRData:', error);