From c5ede797ee2f5539bf11d44fee3421dffe64a4b4 Mon Sep 17 00:00:00 2001
From: Tonfa137206 <lequoctoan137@gmail.com>
Date: Mon, 10 Aug 2026 14:46:47 +0700
Subject: [PATCH 1/3] feat(inventory): complete UI for inventory count list and
 details (T231-T234)

---
 src/components/AppSidebar.vue                |   1 +
 src/components/InventoryCountCreateModal.vue | 324 +++++++++++++++++++
 src/router/index.js                          |   4 +-
 src/views/InventoryCountDetailView.vue       | 217 +++++++++++++
 src/views/InventoryCountList.vue             | 300 +++++++++++++++++
 5 files changed, 845 insertions(+), 1 deletion(-)
 create mode 100644 src/components/InventoryCountCreateModal.vue
 create mode 100644 src/views/InventoryCountDetailView.vue
 create mode 100644 src/views/InventoryCountList.vue

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index b87d7cd..7433f21 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -49,6 +49,7 @@ const menuSections = [
       },
       { label: "Phiếu nhập kho", to: "/stock-in", icon: "mdi-tray-arrow-down" },
       { label: "Phiếu xuất kho", to: "/stock-out", icon: "mdi-tray-arrow-up" },
+      { label: "Kiểm kê kho", to: "/inventory-counts", icon: "mdi-clipboard-check-outline" },
     ],
   },
   {
diff --git a/src/components/InventoryCountCreateModal.vue b/src/components/InventoryCountCreateModal.vue
new file mode 100644
index 0000000..a3288fa
--- /dev/null
+++ b/src/components/InventoryCountCreateModal.vue
@@ -0,0 +1,324 @@
+<template>
+  <!-- Backdrop (Mờ nền) -->
+  <div 
+    v-if="isOpen" 
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 backdrop-blur-sm transition-opacity"
+  >
+    <!-- Modal Panel -->
+    <div 
+      class="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden transform transition-all"
+    >
+      <!-- Header -->
+      <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
+        <h3 class="text-lg font-semibold text-gray-800">Tạo đợt kiểm kê mới</h3>
+        <button 
+          @click="closeModal" 
+          class="text-gray-400 hover:text-gray-600 transition-colors p-1.5 rounded-full hover:bg-gray-100"
+          :disabled="isSubmitting"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Body Form -->Đóng vai trò là một Tech Lead / Frontend Architect. Dự án Vue 3 + Tailwind CSS của chúng tôi đang ở giai đoạn nước rút (Sprint 5). Tôi vừa hoàn thành Task T231 (Danh sách đợt kiểm kê) và T233 (Modal tạo đợt kiểm kê).
+
+Hãy đọc toàn bộ thư mục src/views/ và src/components/, đặc biệt tập trung vào các module Inventory và ImportExcel, sau đó thực hiện 2 việc sau:
+
+Phần 1: Gap Analysis (Đánh giá hiện trạng)
+Đối chiếu source code hiện tại với danh sách các task dưới đây để báo cáo xem file/component nào đã có, file nào chưa có, hoặc code nào đang làm dở:
+
+Cụm Chi tiết Kiểm kê (T232, T234, T235, T236):
+
+Cần UI hiển thị danh sách sản phẩm trong đợt kiểm kê (số lượng hệ thống, số lượng thực tế, chênh lệch).
+
+Yêu cầu cốt lõi (T234): Form nhập số lượng thực tế phải là dạng inline-editing (nhập trực tiếp trên bảng), thao tác phải cực nhanh, tuyệt đối KHÔNG bắt user mở modal cho từng dòng.
+
+Cần có nút Chốt (Finalize) / Hủy (Cancel) đợt kiểm kê và khóa UI sau thao tác (T235).
+
+Phải có UI loading, empty state, và xử lý lỗi API (T236).
+
+Cụm Import Excel (T237, T238):
+
+Flow import phải được rút gọn tối đa còn 2 bước: (1) Upload file -> Backend validate -> Nếu hợp lệ mới bật nút (2) Xác nhận Import. Không được để nút validate rời rạc ở Frontend.
+
+Nút tải file mẫu (Template) phải tải đúng bản sạch, không kèm sheet tham chiếu rườm rà.
+
+Phần 2: Actionable Coding Plan (Kế hoạch thực thi)
+Sau khi đánh giá, hãy cung cấp cho tôi bản thiết kế Component (dự kiến tên file, các biến state cần có, logic tính toán chênh lệch) và viết mã nguồn hoàn chỉnh cho Task T232 + T234 (Giao diện chi tiết đợt kiểm kê & Bảng nhập liệu inline) để tôi có thể bắt đầu code ngay lập tức. Đảm bảo sử dụng Tailwind CSS đồng bộ với dự án.
+      <div class="p-6">
+        <form @submit.prevent="handleSubmit">
+          
+          <!-- Kho (Warehouse) - Bắt buộc -->
+          <div class="mb-5">
+            <label class="block text-sm font-medium text-gray-700 mb-1.5">
+              Kho kiểm kê <span class="text-red-500">*</span>
+            </label>
+            <select 
+              v-model="formData.warehouseId"
+              class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors bg-white"
+              :class="errors.warehouseId ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20' : 'border-gray-300 focus:border-blue-500'"
+              @change="errors.warehouseId = false"
+            >
+              <option value="" disabled>-- Chọn kho --</option>
+              <option v-for="wh in mockWarehouses" :key="wh.id" :value="wh.id">
+                {{ wh.name }}
+              </option>
+            </select>
+            <!-- Thông báo lỗi validate -->
+            <p v-if="errors.warehouseId" class="text-red-500 text-xs mt-1.5 flex items-center gap-1">
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+              Vui lòng chọn kho để kiểm kê.
+            </p>
+          </div>
+
+          <!-- Phạm vi kiểm kê (Scope) -->
+          <div class="mb-5">
+            <label class="block text-sm font-medium text-gray-700 mb-2">Phạm vi kiểm kê</label>
+            <div class="flex gap-6">
+              <label class="flex items-center cursor-pointer group">
+                <input 
+                  type="radio" 
+                  v-model="formData.scope" 
+                  value="ALL" 
+                  class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+                >
+                <span class="ml-2 text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Kiểm kê toàn bộ</span>
+              </label>
+              <label class="flex items-center cursor-pointer group">
+                <input 
+                  type="radio" 
+                  v-model="formData.scope" 
+                  value="PARTIAL" 
+                  class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+                >
+                <span class="ml-2 text-sm text-gray-700 group-hover:text-blue-600 transition-colors">Theo sản phẩm cụ thể</span>
+              </label>
+            </div>
+          </div>
+
+          <!-- Danh sách sản phẩm (Chỉ hiện nếu chọn PARTIAL) -->
+          <div v-if="formData.scope === 'PARTIAL'" class="mb-5 bg-gray-50/80 p-4 rounded-lg border border-gray-200">
+            <label class="block text-sm font-medium text-gray-700 mb-3">
+              Chọn sản phẩm <span class="text-red-500">*</span>
+            </label>
+            <!-- Wrapper có thanh cuộn nếu danh sách dài -->
+            <div class="max-h-48 overflow-y-auto pr-2 custom-scrollbar">
+              <div 
+                v-for="product in mockProducts" 
+                :key="product.id"
+                class="flex items-center py-2 border-b border-gray-100 last:border-0 hover:bg-white transition-colors px-2 rounded"
+              >
+                <input 
+                  type="checkbox" 
+                  :id="`product-${product.id}`"
+                  :value="product.id"
+                  v-model="formData.productIds"
+                  class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer"
+                  @change="errors.productIds = false"
+                >
+                <label :for="`product-${product.id}`" class="ml-3 text-sm text-gray-700 cursor-pointer flex-1 flex justify-between items-center">
+                  <div class="flex flex-col">
+                    <span class="font-medium">{{ product.sku }}</span>
+                    <span class="text-gray-500 text-xs">{{ product.name }}</span>
+                  </div>
+                  <span class="text-gray-500 text-xs bg-gray-100 px-2 py-1 rounded">Tồn: {{ product.stock }}</span>
+                </label>
+              </div>
+            </div>
+            <!-- Thông báo lỗi validate -->
+            <p v-if="errors.productIds" class="text-red-500 text-xs mt-2 flex items-center gap-1">
+               <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+              Vui lòng chọn ít nhất một sản phẩm.
+            </p>
+          </div>
+
+          <!-- Ghi chú -->
+          <div class="mb-2">
+            <label class="block text-sm font-medium text-gray-700 mb-1.5">Ghi chú (Tùy chọn)</label>
+            <textarea 
+              v-model="formData.note"
+              rows="2"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+              placeholder="Nhập lý do kiểm kê..."
+            ></textarea>
+          </div>
+
+        </form>
+      </div>
+
+      <!-- Footer Actions -->
+      <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end gap-3 rounded-b-xl">
+        <button 
+          type="button"
+          @click="closeModal"
+          class="px-5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-200"
+          :disabled="isSubmitting"
+        >
+          Hủy bỏ
+        </button>
+        
+        <!-- Nút Submit có Loading -->
+        <button 
+          @click="handleSubmit"
+          class="px-5 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center justify-center min-w-[130px]"
+          :disabled="isSubmitting"
+        >
+          <svg v-if="isSubmitting" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <span v-if="!isSubmitting">Xác nhận tạo</span>
+          <span v-else>Đang xử lý...</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+
+// ==========================================
+// 1. PROPS & EMITS
+// ==========================================
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+// ==========================================
+// 2. MOCK DATA
+// ==========================================
+const mockWarehouses = [
+  { id: 'WH01', name: 'Kho Tổng Hà Nội' },
+  { id: 'WH02', name: 'Kho Chi nhánh HCM' },
+  { id: 'WH03', name: 'Kho Lạnh Đà Nẵng' }
+]
+
+const mockProducts = [
+  { id: 'P001', sku: 'IP14-PRO-128', name: 'iPhone 14 Pro 128GB', stock: 45 },
+  { id: 'P002', sku: 'MB-AIR-M2', name: 'MacBook Air M2 256GB', stock: 12 },
+  { id: 'P003', sku: 'AP-PRO-2', name: 'AirPods Pro Gen 2', stock: 105 },
+  { id: 'P004', sku: 'IPAD-AIR-5', name: 'iPad Air 5 64GB', stock: 30 },
+  { id: 'P005', sku: 'AW-S8-45', name: 'Apple Watch Series 8 45mm', stock: 22 },
+  { id: 'P006', sku: 'SS-S23-ULT', name: 'Samsung S23 Ultra', stock: 15 }
+]
+
+// ==========================================
+// 3. STATE (FORM & VALIDATION)
+// ==========================================
+const formData = reactive({
+  warehouseId: '',
+  scope: 'ALL', // 'ALL' hoặc 'PARTIAL'
+  productIds: [],
+  note: ''
+})
+
+const errors = reactive({
+  warehouseId: false,
+  productIds: false
+})
+
+const isSubmitting = ref(false)
+
+// ==========================================
+// 4. WATCHERS
+// ==========================================
+// Reset form mỗi khi Modal được mở lên
+watch(() => props.isOpen, (newVal) => {
+  if (newVal) {
+    formData.warehouseId = ''
+    formData.scope = 'ALL'
+    formData.productIds = []
+    formData.note = ''
+    errors.warehouseId = false
+    errors.productIds = false
+  }
+})
+
+// Tự động clear danh sách sản phẩm nếu người dùng đổi lại scope là 'ALL'
+watch(() => formData.scope, (newVal) => {
+  if (newVal === 'ALL') {
+    formData.productIds = []
+    errors.productIds = false
+  }
+})
+
+// ==========================================
+// 5. ACTIONS
+// ==========================================
+const closeModal = () => {
+  if (isSubmitting.value) return // Không cho đóng khi đang tải
+  emit('close')
+}
+
+const handleSubmit = async () => {
+  // --- A. Validate ---
+  let isValid = true
+  
+  if (!formData.warehouseId) {
+    errors.warehouseId = true
+    isValid = false
+  }
+  
+  if (formData.scope === 'PARTIAL' && formData.productIds.length === 0) {
+    errors.productIds = true
+    isValid = false
+  }
+
+  if (!isValid) return
+
+  // --- B. Xử lý Submit (Giả lập gọi API) ---
+  isSubmitting.value = true
+  
+  try {
+    // Giả lập delay mạng 1 giây để xem hiệu ứng loading
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    
+    // Gói dữ liệu (Payload) gửi ra component cha
+    const payload = {
+      // Dữ liệu thực tế form
+      ...formData,
+      
+      // Mock thêm các field giống DB để component cha dễ push vào mảng hiển thị
+      id: Math.floor(Math.random() * 10000), 
+      code: `KK-${new Date().toISOString().slice(0, 10).replace(/-/g, '')}-${Math.floor(Math.random() * 1000)}`,
+      warehouseName: mockWarehouses.find(w => w.id === formData.warehouseId)?.name,
+      status: 'DRAFT',
+      createdDate: new Date().toISOString(),
+      createdBy: 'Current User'
+    }
+    
+    // Bắn event báo cha đóng modal và add data
+    emit('submit', payload)
+    
+  } catch (error) {
+    console.error(error)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+/* CSS Custom Scrollbar cho danh sách sản phẩm (chỉ hiển thị trên trình duyệt Webkit) */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent; 
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #cbd5e1; 
+  border-radius: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8; 
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index b466e62..8bdfa83 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,6 +15,7 @@ import ApprovalsView from '../views/ApprovalsView.vue'
 import PendingExportApprovalsView from '../views/PendingExportApprovalsView.vue'
 import ImportExcelView from '../views/ImportExcelView.vue'
 import AlertsView from '../views/AlertsView.vue'
+import InventoryCountList from '../views/InventoryCountList.vue'
 import UsersView from '../views/UsersView.vue'
 import EmployeeListView from '../views/employees/EmployeeListView.vue'
 import CategoryListView from '../views/categories/CategoryListView.vue'
@@ -29,6 +30,8 @@ const routes = [
   { path: '/warehouses', component: WarehousesView, meta: { title: 'Kho hàng' } },
   { path: '/inventory', component: InventoryView, meta: { title: 'Tồn kho' } },
   { path: '/inventory-transactions', component: InventoryTransactionsView, meta: { title: 'Lịch sử giao dịch' } },
+  { path: '/inventory-counts', component: InventoryCountList, meta: { title: 'Kiểm kê kho' } },
+  { path: '/inventory/:id', name: 'InventoryDetail', component: () => import('../views/InventoryCountDetailView.vue') },
   { path: '/stock-in', component: StockDocumentsView, props: { type: 'in' }, meta: { title: 'Phiếu nhập kho' } },
   { path: '/stock-in/create', component: StockDocumentCreateView, props: { type: 'in' }, meta: { title: 'Tạo phiếu nhập kho' } },
   { path: '/stock-in/:id/edit', component: StockDocumentCreateView, props: route => ({ id: route.params.id, type: 'in', mode: 'edit' }), meta: { title: 'Chỉnh sửa phiếu nhập kho' } },
@@ -44,7 +47,6 @@ const routes = [
   { path: '/alerts', component: AlertsView, meta: { title: 'Cảnh báo tồn kho' } },
   { path: '/employees', component: EmployeeListView, meta: { title: 'Nhân viên' } },
   { path: '/users', component: UsersView, meta: { title: 'Nhân viên & phân quyền' } },
-
 ]
 
 const router = createRouter({
diff --git a/src/views/InventoryCountDetailView.vue b/src/views/InventoryCountDetailView.vue
new file mode 100644
index 0000000..4a4d314
--- /dev/null
+++ b/src/views/InventoryCountDetailView.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="container mx-auto px-4 py-6 max-w-7xl">
+    <!-- Header & Action Buttons -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-800">
+          Chi tiết kiểm kê: <span class="text-blue-600">{{ inventoryCount?.code || '...' }}</span>
+        </h1>
+        <p class="text-gray-500 mt-1 font-medium">
+          Kho: {{ inventoryCount?.warehouseName }} | Ngày tạo: {{ inventoryCount?.createdAt }}
+        </p>
+      </div>
+
+      <!-- Actions (Chỉ hiện khi chưa chốt/hủy và đã load xong) -->
+      <div class="flex gap-3" v-if="!isLoading && !isLocked">
+        <button 
+          @click="cancelCount" 
+          class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
+          :disabled="isCancelling || isFinalizing"
+        >
+          <svg v-if="isCancelling" class="animate-spin -ml-1 mr-2 h-4 w-4 text-gray-700" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+          Hủy đợt kiểm kê
+        </button>
+        <button 
+          @click="finalizeCount" 
+          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
+          :disabled="isCancelling || isFinalizing"
+        >
+          <svg v-if="isFinalizing" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+          Chốt kiểm kê (Finalize)
+        </button>
+      </div>
+      
+      <!-- Status Badge when locked -->
+      <div v-else-if="!isLoading && isLocked" class="px-4 py-2 rounded-lg font-bold shadow-sm" 
+           :class="inventoryCount?.status === 'COMPLETED' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
+        {{ inventoryCount?.status === 'COMPLETED' ? 'Đã Chốt (Đã cập nhật tồn kho)' : 'Đã Hủy' }}
+      </div>
+    </div>
+
+    <!-- UI: Xử lý lỗi API (T236) -->
+    <div v-if="error" class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-md shadow-sm">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <p class="text-sm text-red-700 font-medium">{{ error }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- UI: Loading Skeleton (T236) -->
+    <div v-if="isLoading" class="flex justify-center items-center py-24">
+      <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600"></div>
+    </div>
+
+    <!-- Bảng Danh Sách Sản Phẩm (T232) -->
+    <div v-else class="bg-white shadow-sm border border-gray-200 rounded-xl overflow-hidden">
+      
+      <!-- UI: Empty State (T236) -->
+      <div v-if="items.length === 0" class="py-20 text-center">
+        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+        </svg>
+        <h3 class="mt-4 text-sm font-semibold text-gray-900">Không có sản phẩm nào</h3>
+        <p class="mt-1 text-sm text-gray-500">Danh sách kiểm kê hiện đang trống. Hãy thêm sản phẩm vào hệ thống.</p>
+      </div>
+
+      <!-- UI: Inline Editing Table (T234) -->
+      <div v-else class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50">
+            <tr>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Mã SP</th>
+              <th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Tên sản phẩm</th>
+              <th class="px-6 py-4 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Tồn hệ thống</th>
+              <!-- Cột nhập liệu có màu nhấn để user chú ý -->
+              <th class="px-6 py-4 text-right text-xs font-bold text-blue-600 uppercase tracking-wider w-56">Tồn thực tế</th>
+              <th class="px-6 py-4 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Chênh lệch</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr v-for="item in items" :key="item.id" class="hover:bg-blue-50/50 transition-colors">
+              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ item.productCode }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ item.productName }}</td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">{{ item.systemQuantity }}</td>
+              
+              <!-- Inline Edit Input -->
+              <td class="px-6 py-4 whitespace-nowrap text-right">
+                <input 
+                  type="number" 
+                  v-model.number="item.actualQuantity" 
+                  min="0"
+                  :disabled="isLocked"
+                  class="w-full text-right border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm py-2 px-3 border transition-colors disabled:bg-gray-100 disabled:text-gray-500 disabled:border-transparent"
+                  :class="{'border-red-400 focus:ring-red-500 focus:border-red-500 bg-red-50': item.actualQuantity < 0}"
+                />
+              </td>
+              
+              <!-- Tính chênh lệch Auto -->
+              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-bold">
+                <span :class="{
+                  'text-green-600': getDifference(item) > 0,
+                  'text-red-600': getDifference(item) < 0,
+                  'text-gray-400': getDifference(item) === 0 || isNaN(getDifference(item))
+                }">
+                  {{ getDifference(item) > 0 ? '+' : '' }}{{ getDifference(item) }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const inventoryId = route.params.id || 'fake-id'
+
+// --- State Management ---
+const isLoading = ref(true)
+const error = ref('')
+const isFinalizing = ref(false)
+const isCancelling = ref(false)
+
+const inventoryCount = ref(null)
+const items = ref([])
+
+// Khóa UI nếu đã chốt hoặc đang call API (T235)
+const isLocked = computed(() => {
+  return inventoryCount.value?.status === 'COMPLETED' || 
+         inventoryCount.value?.status === 'CANCELLED' || 
+         isFinalizing.value || 
+         isCancelling.value
+})
+
+// --- Logic Tính Chênh Lệch ---
+const getDifference = (item) => {
+  if (item.actualQuantity === null || item.actualQuantity === '') return 0
+  return item.actualQuantity - item.systemQuantity
+}
+
+// --- API Mocks ---
+const fetchDetail = async () => {
+  isLoading.value = true
+  error.value = ''
+  try {
+    // Giả lập call API 600ms
+    await new Promise(resolve => setTimeout(resolve, 600))
+    
+    // Dữ liệu Mock
+    inventoryCount.value = {
+      id: inventoryId,
+      code: 'KK-202310-001',
+      warehouseName: 'Kho Trung Tâm',
+      status: 'IN_PROGRESS',
+      createdAt: '10/10/2023 08:30'
+    }
+    
+    items.value = [
+      { id: 1, productCode: 'SP001', productName: 'iPhone 15 Pro Max', systemQuantity: 50, actualQuantity: 50 },
+      { id: 2, productCode: 'SP002', productName: 'MacBook Air M2', systemQuantity: 15, actualQuantity: 12 },
+      { id: 3, productCode: 'SP003', productName: 'AirPods Pro 2', systemQuantity: 100, actualQuantity: 105 },
+      { id: 4, productCode: 'SP004', productName: 'iPad Pro 11 inch', systemQuantity: 0, actualQuantity: 2 },
+    ]
+  } catch (err) {
+    error.value = 'Lỗi kết nối. Không thể tải chi tiết đợt kiểm kê.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// --- Action Handlers (T235) ---
+const finalizeCount = async () => {
+  if (!confirm('CHÚ Ý: Bạn có chắc chắn muốn chốt kiểm kê? \nSố lượng thực tế sẽ ghi đè lên tồn kho hệ thống và KHÔNG THỂ hoàn tác.')) return
+  
+  isFinalizing.value = true
+  try {
+    // Giả lập lưu API
+    await new Promise(resolve => setTimeout(resolve, 800))
+    
+    inventoryCount.value.status = 'COMPLETED'
+    // Sau khi chốt thành công, computed isLocked sẽ tự động true -> Disable toàn bộ ô input
+  } catch (err) {
+    error.value = 'Chốt kiểm kê thất bại. Vui lòng thử lại.'
+  } finally {
+    isFinalizing.value = false
+  }
+}
+
+const cancelCount = async () => {
+  if (!confirm('Bạn có chắc chắn muốn HỦY đợt kiểm kê này?')) return
+  
+  isCancelling.value = true
+  try {
+    await new Promise(resolve => setTimeout(resolve, 500))
+    inventoryCount.value.status = 'CANCELLED'
+  } catch (err) {
+    error.value = 'Hủy kiểm kê thất bại.'
+  } finally {
+    isCancelling.value = false
+  }
+}
+
+// --- Initialization ---
+onMounted(() => {
+  fetchDetail()
+})
+</script>
diff --git a/src/views/InventoryCountList.vue b/src/views/InventoryCountList.vue
new file mode 100644
index 0000000..4a62777
--- /dev/null
+++ b/src/views/InventoryCountList.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="p-6 bg-gray-50 min-h-screen">
+    <!-- Main Card -->
+    <div class="max-w-7xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+      
+      <!-- 1. Header Area -->
+      <div class="mb-6 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-800">Đợt kiểm kê kho</h1>
+          <p class="text-sm text-gray-500 mt-1">Quản lý danh sách các đợt kiểm kê hàng hóa</p>
+        </div>
+        <!-- ĐÃ SỬA: Thêm sự kiện @click để mở Modal -->
+        <button 
+          @click="isCreateModalOpen = true"
+          class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-medium transition-colors shadow-sm flex items-center gap-2"
+        >
+          <span>+</span> Tạo đợt kiểm kê
+        </button>
+      </div>
+
+      <!-- 2. Filter Section -->
+      <div class="flex flex-wrap items-end gap-4 mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
+        <!-- Lọc theo Kho (Warehouse) -->
+        <div class="flex flex-col flex-1 min-w-[200px] max-w-xs">
+          <label class="text-sm font-medium text-gray-700 mb-1.5">Kho (Warehouse)</label>
+          <select 
+            v-model="filters.warehouse"
+            class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+          >
+            <option value="">-- Tất cả kho --</option>
+            <option v-for="wh in availableWarehouses" :key="wh" :value="wh">
+              {{ wh }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Lọc theo Trạng thái (Status) -->
+        <div class="flex flex-col flex-1 min-w-[200px] max-w-xs">
+          <label class="text-sm font-medium text-gray-700 mb-1.5">Trạng thái (Status)</label>
+          <select 
+            v-model="filters.status"
+            class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+          >
+            <option value="">-- Tất cả trạng thái --</option>
+            <option v-for="status in availableStatuses" :key="status.value" :value="status.value">
+              {{ status.label }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Nút Clear Filter -->
+        <div class="flex items-end">
+          <button 
+            @click="clearFilters"
+            class="px-4 py-2 text-sm font-medium rounded-lg transition-colors border"
+            :class="hasActiveFilters 
+              ? 'text-gray-700 bg-white border-gray-300 hover:bg-gray-100 shadow-sm' 
+              : 'text-gray-400 bg-gray-50 border-gray-200 cursor-not-allowed'"
+            :disabled="!hasActiveFilters"
+          >
+            Làm mới (Clear)
+          </button>
+        </div>
+      </div>
+
+      <!-- 3. Data Table -->
+      <div class="overflow-x-auto rounded-lg border border-gray-200">
+        <table class="min-w-full divide-y divide-gray-200 text-sm">
+          <thead class="bg-gray-50">
+            <tr>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Mã đợt</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Kho</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Trạng thái</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Ngày tạo</th>
+              <th scope="col" class="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">Người tạo</th>
+              <th scope="col" class="px-6 py-3 text-center font-medium text-gray-500 uppercase tracking-wider">Thao tác</th>
+            </tr>
+          </thead>
+          
+          <tbody class="bg-white divide-y divide-gray-200">
+            <!-- Render dữ liệu -->
+            <tr v-for="item in filteredData" :key="item.id" class="hover:bg-blue-50/50 transition-colors">
+              <td class="px-6 py-4 whitespace-nowrap font-semibold text-blue-600 cursor-pointer hover:underline">
+                {{ item.code }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-gray-700 font-medium">
+                {{ item.warehouse }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span :class="['px-2.5 py-1 inline-flex text-xs font-semibold rounded-full border', getStatusBadgeClass(item.status)]">
+                  {{ formatStatus(item.status) }}
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-gray-500">
+                {{ formatDate(item.createdDate) }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-gray-500">
+                {{ item.createdBy }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-center font-medium">
+                <router-link :to="`/inventory/${item.id}`" class="text-blue-600 hover:text-blue-900 transition-colors">Chi tiết</router-link>
+              </td>
+            </tr>
+
+            <!-- Empty State (Khi filter không ra kết quả) -->
+            <tr v-if="filteredData.length === 0">
+              <td colspan="6" class="px-6 py-12 text-center text-gray-500 bg-gray-50/50">
+                <div class="flex flex-col items-center justify-center">
+                  <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                  </svg>
+                  <p>Không tìm thấy đợt kiểm kê nào phù hợp với bộ lọc.</p>
+                  <button @click="clearFilters" class="mt-2 text-blue-600 hover:underline">Xóa bộ lọc</button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination Placeholder -->
+      <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
+        <p>Hiển thị <b>{{ filteredData.length }}</b> kết quả</p>
+        <div class="flex gap-1">
+          <button class="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50" disabled>Trước</button>
+          <button class="px-3 py-1 border rounded bg-blue-50 text-blue-600 border-blue-200">1</button>
+          <button class="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50" disabled>Sau</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ĐÃ THÊM: Nhúng component Modal vào đây -->
+    <InventoryCountCreateModal 
+      :isOpen="isCreateModalOpen"
+      @close="isCreateModalOpen = false"
+      @submit="handleCreateSubmit"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+// ĐÃ THÊM: Import component Modal
+import InventoryCountCreateModal from '../components/InventoryCountCreateModal.vue'
+
+// ==========================================
+// THÊM MỚI: QUẢN LÝ MODAL TẠO KIỂM KÊ
+// ==========================================
+const isCreateModalOpen = ref(false)
+
+const handleCreateSubmit = (newCountPayload) => {
+  // Đẩy dữ liệu mới vào đầu mảng mockData để hiển thị ngay trên UI
+  mockData.value.unshift({
+    id: newCountPayload.id,
+    code: newCountPayload.code,
+    warehouse: newCountPayload.warehouseName,
+    status: newCountPayload.status,
+    createdDate: newCountPayload.createdDate,
+    createdBy: newCountPayload.createdBy
+  })
+  
+  // Đóng Modal
+  isCreateModalOpen.value = false 
+  
+  // Thông báo giả lập
+  alert(`Đã tạo thành công đợt kiểm kê: ${newCountPayload.code}`)
+}
+
+
+// ==========================================
+// 1. MOCK DATA (Dữ liệu giả lập)
+// ==========================================
+const mockData = ref([
+  {
+    id: 1,
+    code: 'KK-202310-001',
+    warehouse: 'Kho Tổng Hà Nội',
+    status: 'DRAFT',
+    createdDate: '2023-10-25T08:30:00Z',
+    createdBy: 'Nguyễn Văn A'
+  },
+  {
+    id: 2,
+    code: 'KK-202310-002',
+    warehouse: 'Kho Chi nhánh HCM',
+    status: 'IN_PROGRESS',
+    createdDate: '2023-10-24T14:15:00Z',
+    createdBy: 'Trần Thị B'
+  },
+  {
+    id: 3,
+    code: 'KK-202310-003',
+    warehouse: 'Kho Tổng Hà Nội',
+    status: 'COMPLETED',
+    createdDate: '2023-10-20T09:00:00Z',
+    createdBy: 'Lê Văn C'
+  },
+  {
+    id: 4,
+    code: 'KK-202310-004',
+    warehouse: 'Kho Lạnh Đà Nẵng',
+    status: 'CANCELLED',
+    createdDate: '2023-10-26T10:45:00Z',
+    createdBy: 'Nguyễn Văn A'
+  },
+  {
+    id: 5,
+    code: 'KK-202310-005',
+    warehouse: 'Kho Chi nhánh HCM',
+    status: 'COMPLETED',
+    createdDate: '2023-10-15T16:20:00Z',
+    createdBy: 'Phạm Văn D'
+  }
+])
+
+// ==========================================
+// 2. STATE & CẤU HÌNH BỘ LỌC (FILTER)
+// ==========================================
+// Tự động trích xuất danh sách kho duy nhất (Unique) từ mockData
+const availableWarehouses = computed(() => {
+  return [...new Set(mockData.value.map(item => item.warehouse))]
+})
+
+// Cấu hình các trạng thái (Có thể thay đổi text Tiếng Việt tại đây)
+const availableStatuses = [
+  { value: 'DRAFT', label: 'Bản nháp' },
+  { value: 'IN_PROGRESS', label: 'Đang kiểm kê' },
+  { value: 'COMPLETED', label: 'Đã hoàn thành' },
+  { value: 'CANCELLED', label: 'Đã hủy' }
+]
+
+// Object chứa các giá trị filter người dùng đang chọn
+const filters = reactive({
+  warehouse: '',
+  status: ''
+})
+
+// Kiểm tra xem user có đang filter gì không để style/disable nút "Clear"
+const hasActiveFilters = computed(() => filters.warehouse !== '' || filters.status !== '')
+
+// Hàm xóa toàn bộ điều kiện lọc
+const clearFilters = () => {
+  filters.warehouse = ''
+  filters.status = ''
+}
+
+// ==========================================
+// 3. LOGIC LỌC DỮ LIỆU
+// ==========================================
+// filteredData sẽ tự động tính toán lại mỗi khi `mockData` hoặc `filters` thay đổi
+const filteredData = computed(() => {
+  return mockData.value.filter(item => {
+    // Nếu filter 'warehouse' rỗng (chọn tất cả) -> luôn true, ngược lại so sánh bằng
+    const matchWarehouse = filters.warehouse ? item.warehouse === filters.warehouse : true
+    
+    // Tương tự với 'status'
+    const matchStatus = filters.status ? item.status === filters.status : true
+    
+    return matchWarehouse && matchStatus
+  })
+})
+
+// ==========================================
+// 4. UTILITY / HELPER FUNCTIONS
+// ==========================================
+// Chuyển đổi định dạng ngày tháng sang dạng VN
+const formatDate = (isoString) => {
+  if (!isoString) return ''
+  const date = new Date(isoString)
+  return new Intl.DateTimeFormat('vi-VN', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  }).format(date)
+}
+
+// Lấy nhãn tiếng Việt cho status
+const formatStatus = (statusValue) => {
+  const statusObj = availableStatuses.find(s => s.value === statusValue)
+  return statusObj ? statusObj.label : statusValue
+}
+
+// Trả về class Tailwind để tô màu cho Badge dựa trên Status
+const getStatusBadgeClass = (status) => {
+  switch (status) {
+    case 'DRAFT':
+      return 'bg-gray-50 text-gray-700 border-gray-200'
+    case 'IN_PROGRESS':
+      return 'bg-blue-50 text-blue-700 border-blue-200'
+    case 'COMPLETED':
+      return 'bg-emerald-50 text-emerald-700 border-emerald-200'
+    case 'CANCELLED':
+      return 'bg-red-50 text-red-700 border-red-200'
+    default:
+      return 'bg-gray-50 text-gray-700 border-gray-200'
+  }
+}
+</script>
\ No newline at end of file

From 971f88d14e5a53458e48c94f415fd4f20ef0f518 Mon Sep 17 00:00:00 2001
From: Tonfa137206 <lequoctoan137@gmail.com>
Date: Mon, 10 Aug 2026 20:08:39 +0700
Subject: [PATCH 2/3] feat(import): refactor to 2-step flow and sync enum with
 backend (T237, T238)

---
 src/components/AppSidebar.vue      |   4 +-
 src/services/excelImportService.js |   2 +-
 src/views/ImportExcelView.vue      | 863 ++++++++---------------------
 3 files changed, 243 insertions(+), 626 deletions(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 7433f21..3286d20 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -70,12 +70,12 @@ const menuSections = [
   {
     title: "Hệ thống",
     items: [
+      { label: "Cảnh báo tồn kho", to: "/alerts", icon: "mdi-alert-outline" },
       {
-        label: "Import Excel",
+        label: "Nhập liệu Excel",
         to: "/import-excel",
         icon: "mdi-file-excel-outline",
       },
-      { label: "Cảnh báo tồn kho", to: "/alerts", icon: "mdi-alert-outline" },
       {
         label: "Nhân viên",
         to: "/employees",
diff --git a/src/services/excelImportService.js b/src/services/excelImportService.js
index 89efc87..ea77cf6 100644
--- a/src/services/excelImportService.js
+++ b/src/services/excelImportService.js
@@ -47,7 +47,7 @@ export async function createImportSession(file, loaiImport, warehouseId) {
     formData.append('file', file)
     formData.append('loaiImport', loaiImport)
     if (warehouseId) {
-      formData.append('khoId', warehouseId)
+      formData.append('khoId', warehouseId) 
     }
 
     const { data } = await excelImportClient.post('/api/excel-imports', formData, {
diff --git a/src/views/ImportExcelView.vue b/src/views/ImportExcelView.vue
index 61a2030..b0761a4 100644
--- a/src/views/ImportExcelView.vue
+++ b/src/views/ImportExcelView.vue
@@ -1,8 +1,167 @@
+<template>
+  <div class="container mx-auto px-4 py-6 max-w-6xl">
+    <PageHeader title="Import dữ liệu Excel" description="Nhập dữ liệu danh sách sản phẩm hoặc sản phẩm kèm tồn kho đầu kỳ bằng file mẫu chuẩn." />
+
+    <!-- Message Alert Area -->
+    <div class="mt-4 mb-6">
+      <div v-if="globalError" class="p-4 text-red-800 rounded-lg bg-red-50 border border-red-200 flex items-start gap-3 shadow-sm animate-fade-in">
+        <svg class="w-6 h-6 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <div><span class="font-bold">Lỗi: </span><span>{{ globalError }}</span></div>
+      </div>
+      <div v-if="globalSuccess" class="p-4 text-green-800 rounded-lg bg-green-50 border border-green-200 flex items-start gap-3 shadow-sm animate-fade-in">
+        <svg class="w-6 h-6 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        <div><span class="font-bold">Thành công: </span><span>{{ globalSuccess }}</span></div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      
+      <!-- PHẦN 1: TẢI MẪU & CẤU HÌNH -->
+      <div class="md:col-span-1 space-y-6">
+        <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-200">
+          <h3 class="text-lg font-bold text-gray-800 mb-2">1. Tải file mẫu</h3>
+          <p class="text-sm text-gray-500 mb-4">Sử dụng đúng template chuẩn (bản sạch) để dữ liệu được xử lý mượt mà nhất.</p>
+          <button 
+            class="w-full py-2.5 bg-white border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-colors flex justify-center items-center gap-2 disabled:opacity-50 shadow-sm"
+            :disabled="isDownloading"
+            @click="handleDownloadTemplate"
+          >
+            <svg v-if="isDownloading" class="animate-spin h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+            <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
+            Tải Template
+          </button>
+        </div>
+
+        <!-- Tùy chọn Import đã được di chuyển sang phía trên khu vực Upload -->
+      </div>
+
+      <!-- PHẦN 2: UPLOAD & KẾT QUẢ -->
+      <div class="md:col-span-2">
+        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 h-full flex flex-col">
+          <h3 class="text-lg font-bold text-gray-800 mb-2">2. Upload & Xác nhận</h3>
+          <p class="text-sm text-gray-500 mb-6">Hệ thống tự động chạy Validation ngay sau khi file được tải lên.</p>
+
+          <!-- Dropdown Loại dữ liệu Import -->
+          <div v-if="!validationResult" class="mb-4">
+            <label class="block text-sm font-bold text-gray-700 mb-1">
+              Loại dữ liệu Import <span class="text-red-500">*</span>
+            </label>
+            <select v-model="importType" class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm py-2.5 px-3 border bg-white" :disabled="isProcessing" :class="{'border-red-300': globalError && !importType}">
+              <option value="" disabled>-- Vui lòng chọn loại dữ liệu trước khi tải file --</option>
+              <option value="PRODUCT_ONLY">Sản phẩm</option>
+              <option value="PRODUCT_WITH_OPENING_STOCK">Tồn đầu kỳ</option>
+            </select>
+            
+            <div v-if="importType === 'PRODUCT_WITH_OPENING_STOCK'" class="mt-4">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Kho nhận tồn đầu kỳ (tùy chọn)</label>
+              <select v-model="selectedWarehouseId" class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm py-2.5 px-3 border bg-white" :disabled="isProcessing">
+                <option value="">-- Để trống nếu file đã có mã kho --</option>
+                <option v-for="w in warehouses" :key="w.id" :value="w.id">{{ w.tenKho }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Upload Area (Chỉ hiện khi chưa có kết quả thành công/lỗi nặng) -->
+          <div 
+            v-if="!validationResult"
+            class="border-2 border-dashed rounded-xl p-10 text-center transition-colors mb-6"
+            :class="isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:bg-gray-50'"
+            @dragover.prevent="isDragging = true"
+            @dragleave.prevent="isDragging = false"
+            @drop.prevent="handleDrop"
+          >
+            <div v-if="isProcessing" class="flex flex-col items-center justify-center">
+              <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 mb-4"></div>
+              <p class="text-blue-700 font-semibold text-lg">{{ processingStatusText }}</p>
+            </div>
+            <div v-else>
+              <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <div class="text-base text-gray-600">
+                <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-semibold text-blue-600 hover:text-blue-500 focus-within:outline-none">
+                  <span>Chọn file Excel (.xlsx)</span>
+                  <input id="file-upload" ref="fileInput" type="file" accept=".xlsx" class="sr-only" @change="onFileChange">
+                </label>
+                <p class="pl-1 inline">hoặc kéo thả vào đây</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- NẾU FILE HỢP LỆ (Thành công -> Chốt) -->
+          <div v-if="validationResult?.valid" class="bg-green-50 rounded-xl p-6 border border-green-200 mt-auto shadow-inner">
+            <div class="flex items-center gap-4 mb-6">
+              <div class="bg-green-100 p-3 rounded-full"><svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div>
+              <div>
+                <h4 class="text-green-800 font-bold text-lg">Dữ liệu hoàn toàn hợp lệ!</h4>
+                <p class="text-green-700">Sẵn sàng nhập <span class="font-bold text-lg">{{ validationResult.soDongHopLe }}</span> dòng dữ liệu vào hệ thống.</p>
+              </div>
+            </div>
+            <button 
+              @click="handleFinalImport"
+              class="w-full py-3.5 bg-green-600 text-white font-bold text-lg rounded-lg hover:bg-green-700 transition-colors shadow-md flex justify-center items-center gap-2"
+              :disabled="isApplying"
+            >
+              <svg v-if="isApplying" class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+              Xác nhận Import Dữ Liệu
+            </button>
+            <div class="mt-4 text-center">
+              <button @click="resetFlow" class="text-sm text-gray-500 hover:text-gray-700 underline">Hủy bỏ / Chọn file khác</button>
+            </div>
+          </div>
+
+          <!-- NẾU FILE CÓ LỖI -->
+          <div v-if="validationResult && !validationResult.valid" class="flex flex-col h-full">
+            <div class="bg-red-50 border border-red-200 rounded-t-lg p-4 flex justify-between items-center">
+              <span class="font-bold text-red-800 flex items-center gap-2 text-base">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
+                Phát hiện {{ validationResult.soDongLoi }} dòng lỗi
+              </span>
+              <button @click="resetFlow" class="px-4 py-1.5 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 shadow-sm">Thử lại file khác</button>
+            </div>
+            
+            <div class="overflow-x-auto border-x border-b border-red-200 rounded-b-lg">
+              <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-red-100/50">
+                  <tr>
+                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase">Dòng</th>
+                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase">Cột lỗi</th>
+                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-700 uppercase">Chi tiết</th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr v-for="err in errorsResponse?.content" :key="err.id" class="text-sm">
+                    <td class="px-4 py-3 font-semibold text-gray-900">#{{ err.rowNumber }}</td>
+                    <td class="px-4 py-3 text-red-600 font-bold bg-red-50/30">{{ err.columnName }}</td>
+                    <td class="px-4 py-3 text-gray-700">
+                      <span class="block mb-1">{{ err.message }}</span>
+                      <span class="text-xs text-gray-500 block">Dữ liệu gốc: <code class="bg-gray-100 px-1 py-0.5 rounded">{{ err.originalValue || '(trống)' }}</code></span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              
+              <!-- Phân trang lỗi -->
+              <div class="bg-gray-50 px-4 py-3 flex justify-between items-center border-t border-gray-200" v-if="errorsResponse">
+                <span class="text-xs text-gray-500 font-medium">Trang {{ errorsResponse.page + 1 }}/{{ errorsResponse.totalPages }}</span>
+                <div class="flex gap-2">
+                  <button class="px-3 py-1.5 text-xs font-semibold border rounded bg-white hover:bg-gray-100 disabled:opacity-50" :disabled="errorsResponse.page === 0" @click="fetchErrors(errorsResponse.page - 1)">Trang trước</button>
+                  <button class="px-3 py-1.5 text-xs font-semibold border rounded bg-white hover:bg-gray-100 disabled:opacity-50" :disabled="errorsResponse.page >= errorsResponse.totalPages - 1" @click="fetchErrors(errorsResponse.page + 1)">Trang sau</button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import PageHeader from '../components/PageHeader.vue'
-import ConfirmDialog from '../components/ConfirmDialog.vue'
 import { getWarehouses } from '../services/warehouseService'
 import {
   downloadTemplate,
@@ -15,698 +174,156 @@ import {
 
 const router = useRouter()
 
-// Basic config & warehouse states
-const importType = ref('PRODUCT_ONLY') // PRODUCT_ONLY or PRODUCT_WITH_OPENING_STOCK
+// -- States --
+const importType = ref('')
 const warehouses = ref([])
 const selectedWarehouseId = ref('')
-const isLoadingWarehouses = ref(false)
-const warehouseError = ref('')
 
-// File picker states
+const isDragging = ref(false)
 const fileInput = ref(null)
 const selectedFile = ref(null)
-const fileError = ref('')
 
-// Step statuses & session workflow states
-const isDownloadingTemplate = ref(false)
-const isCreatingSession = ref(false)
-const isValidating = ref(false)
-const isConfirming = ref(false)
+const isDownloading = ref(false)
+const isProcessing = ref(false)
 const isApplying = ref(false)
+const processingStatusText = ref('')
 
-// Session detail states
-const importId = ref(null)
-const sessionSummary = ref(null)
-const validationResult = ref(null)
-const confirmResult = ref(null)
-const applyResult = ref(null)
-
-// Error table states (Step 4)
-const errorsResponse = ref(null)
-const errorPage = ref(0)
-const errorSize = ref(20)
-const isLoadingErrors = ref(false)
-
-// Warning / Success messages
 const globalError = ref('')
-const globalWarning = ref('')
 const globalSuccess = ref('')
-const showApplyConfirm = ref(false)
-
-// Step status computation
-const step1Status = computed(() => 'completed')
-
-const step2Status = computed(() => {
-  return selectedFile.value ? 'completed' : 'active'
-})
-
-const step3Status = computed(() => {
-  if (applyResult.value || confirmResult.value || validationResult.value || importId.value) return 'completed'
-  return selectedFile.value ? 'active' : 'locked'
-})
-
-const step4Status = computed(() => {
-  if (applyResult.value || confirmResult.value || (validationResult.value && validationResult.value.valid)) return 'completed'
-  if (validationResult.value && !validationResult.value.valid) return 'failed'
-  return (importId.value && selectedFile.value) ? 'active' : 'locked'
-})
 
-const step5Status = computed(() => {
-  if (applyResult.value || confirmResult.value) return 'completed'
-  return (validationResult.value && validationResult.value.valid && selectedFile.value) ? 'active' : 'locked'
-})
-
-const step6Status = computed(() => {
-  if (applyResult.value) return 'completed'
-  return (confirmResult.value && selectedFile.value) ? 'active' : 'locked'
-})
+const importId = ref(null)
+const validationResult = ref(null)
+const errorsResponse = ref(null)
 
-// Fetch warehouse options
-async function fetchWarehouseList() {
-  isLoadingWarehouses.value = true
-  warehouseError.value = ''
+// -- Lifecycle --
+onMounted(async () => {
   try {
     const list = await getWarehouses({ status: 'HOAT_DONG' })
     warehouses.value = list || []
-    warehouseError.value = ''
   } catch (error) {
-    warehouseError.value = error.message || 'Không thể tải danh sách kho hàng. Vui lòng thử lại.'
-  } finally {
-    isLoadingWarehouses.value = false
-  }
-}
-
-onMounted(() => {
-  fetchWarehouseList()
-})
-
-// File handlers
-function onFileChange(event) {
-  const files = event.target.files
-  fileError.value = ''
-  globalError.value = ''
-  globalSuccess.value = ''
-
-  if (!files || files.length === 0) {
-    selectedFile.value = null
-    event.target.value = ''
-    return
-  }
-
-  const file = files[0]
-  if (!file.name.toLowerCase().endsWith('.xlsx')) {
-    fileError.value = 'Chỉ chấp nhận file định dạng .xlsx'
-    selectedFile.value = null
-    event.target.value = ''
-    return
-  }
-
-  selectedFile.value = file
-}
-
-function formatFileSize(bytes) {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-// Watchers for resetting flow on configuration/file change
-watch(selectedFile, (newVal, oldVal) => {
-  if (!newVal && fileInput.value) {
-    fileInput.value.value = ''
-  }
-  if (importId.value && newVal !== oldVal) {
-    resetWorkflowState('File đã thay đổi, vui lòng validate lại từ đầu.')
-  }
-})
-
-watch([importType, selectedWarehouseId], () => {
-  if (importId.value) {
-    resetWorkflowState('Cấu hình import đã thay đổi, vui lòng khởi tạo phiên và validate lại từ đầu.')
+    globalError.value = 'Không tải được danh sách kho.'
   }
 })
 
-function resetWorkflowState(warningMessage) {
+// -- Utils --
+function resetFlow() {
+  selectedFile.value = null
+  if (fileInput.value) fileInput.value.value = ''
   importId.value = null
-  sessionSummary.value = null
   validationResult.value = null
   errorsResponse.value = null
-  errorPage.value = 0
-  confirmResult.value = null
-  applyResult.value = null
-  globalWarning.value = warningMessage
-  globalSuccess.value = ''
   globalError.value = ''
+  globalSuccess.value = ''
 }
 
-// Step 1: Download template
+// -- Handlers --
 async function handleDownloadTemplate() {
-  isDownloadingTemplate.value = true
+  isDownloading.value = true
   globalError.value = ''
-  globalSuccess.value = ''
   try {
     const { data, filename } = await downloadTemplate()
     const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
     const url = window.URL.createObjectURL(blob)
     const link = document.createElement('a')
     link.href = url
-    link.setAttribute('download', filename || 'SME_StockSense_Import_Template_v1.xlsx')
+    // Cập nhật tên template sạch như yêu cầu T238
+    link.setAttribute('download', filename || 'Template_SME_StockSense_Clean.xlsx')
     document.body.appendChild(link)
     link.click()
     link.remove()
     window.URL.revokeObjectURL(url)
-    globalSuccess.value = 'Tải file mẫu Excel thành công.'
-  } catch (error) {
-    globalError.value = error.message || 'Không thể tải file mẫu.'
-    if (error.status === 401) router.replace('/login')
+  } catch (err) {
+    globalError.value = 'Tải file mẫu thất bại. Vui lòng thử lại.'
   } finally {
-    isDownloadingTemplate.value = false
+    isDownloading.value = false
   }
 }
 
-// Step 3: Create import session
-async function handleCreateSession() {
-  if (!selectedFile.value) {
-    globalError.value = 'Vui lòng chọn file Excel trước.'
-    return
-  }
-
-  isCreatingSession.value = true
-  globalError.value = ''
-  globalSuccess.value = ''
-  globalWarning.value = ''
-
-  try {
-    const data = await createImportSession(
-      selectedFile.value,
-      importType.value,
-      selectedWarehouseId.value || null
-    )
-    importId.value = data.id
-    sessionSummary.value = data
-    globalSuccess.value = `Khởi tạo phiên import thành công (ID: ${data.id}). Hãy thực hiện Validate ở bước tiếp theo.`
-  } catch (error) {
-    globalError.value = error.message || 'Không thể khởi tạo phiên import.'
-    if (error.status === 401) router.replace('/login')
-  } finally {
-    isCreatingSession.value = false
-  }
+function handleDrop(e) {
+  isDragging.value = false
+  const files = e.dataTransfer.files
+  if (files.length > 0) processSelectedFile(files[0])
 }
 
-// Step 4: Validate and fetch errors
-async function handleValidateSession() {
-  if (!importId.value || !selectedFile.value) return
+function onFileChange(e) {
+  const files = e.target.files
+  if (files.length > 0) processSelectedFile(files[0])
+}
 
-  isValidating.value = true
-  globalError.value = ''
-  globalSuccess.value = ''
-  globalWarning.value = ''
-  errorsResponse.value = null
-  errorPage.value = 0
+// KẾT HỢP LUỒNG VALIDATE NGAY LÚC UPLOAD
+async function processSelectedFile(file) {
+  resetFlow()
+  if (!importType.value) {
+    globalError.value = 'Vui lòng chọn "Loại dữ liệu Import" trước khi tải file lên.'
+    return
+  }
+  if (!file.name.toLowerCase().endsWith('.xlsx')) {
+    globalError.value = 'Hệ thống chỉ chấp nhận định dạng Excel (.xlsx)'
+    return
+  }
+  selectedFile.value = file
+  isProcessing.value = true
 
   try {
-    const response = await validateImportSession(
-      importId.value,
-      selectedFile.value,
-      importType.value,
-      selectedWarehouseId.value || null
-    )
-    validationResult.value = response
-
-    if (response.soDongLoi > 0 || !response.valid) {
-      globalError.value = `Dữ liệu file Excel có ${response.soDongLoi} dòng lỗi. Vui lòng xem bảng lỗi bên dưới.`
+    // 1. Khởi tạo phiên ngầm
+    processingStatusText.value = 'Đang đẩy file lên máy chủ...'
+    const sessionInfo = await createImportSession(file, importType.value, selectedWarehouseId.value || null)
+    importId.value = sessionInfo.id
+
+    // 2. Tự động gọi Validate ngầm
+    processingStatusText.value = 'Đang kiểm tra và xác thực dữ liệu...'
+    const validation = await validateImportSession(importId.value, file, importType.value, selectedWarehouseId.value || null)
+    validationResult.value = validation
+
+    // 3. Phân nhánh kết quả
+    if (validation.soDongLoi > 0 || !validation.valid) {
       await fetchErrors(0)
-    } else {
-      globalSuccess.value = 'Tất cả dòng dữ liệu hợp lệ! Sẵn sàng xác nhận để import.'
     }
-  } catch (error) {
-    globalError.value = error.message || 'Không thể kiểm tra dữ liệu file Excel.'
-    if (error.status === 401) router.replace('/login')
+  } catch (err) {
+    globalError.value = err.message || 'Lỗi xử lý file Excel. Vui lòng kiểm tra lại.'
+    if (err.status === 401) router.replace('/login')
   } finally {
-    isValidating.value = false
+    isProcessing.value = false
   }
 }
 
-// Fetch paginated errors
 async function fetchErrors(page = 0) {
-  if (!importId.value || !selectedFile.value) return
-  isLoadingErrors.value = true
+  if (!importId.value) return
   try {
-    const data = await getSessionErrors(importId.value, page, errorSize.value)
+    const data = await getSessionErrors(importId.value, page, 20)
     errorsResponse.value = data
-    errorPage.value = page
-  } catch (error) {
-    globalError.value = error.message || 'Không thể tải danh sách lỗi validation.'
-    if (error.status === 401) router.replace('/login')
-  } finally {
-    isLoadingErrors.value = false
+  } catch (err) {
+    globalError.value = 'Không tải được chi tiết lỗi.'
   }
 }
 
-// Step 5: Confirm import
-async function handleConfirmSession() {
+// KẾT HỢP LUỒNG CONFIRM & APPLY VÀO 1 NÚT XÁC NHẬN
+async function handleFinalImport() {
   if (!importId.value || !selectedFile.value) return
-
-  isConfirming.value = true
-  globalError.value = ''
-  globalSuccess.value = ''
-
-  try {
-    const response = await confirmImportSession(importId.value)
-    confirmResult.value = response
-    globalSuccess.value = 'Xác nhận phiên import thành công. Bạn có thể tiến hành Apply dữ liệu.'
-  } catch (error) {
-    globalError.value = error.message || 'Không thể xác nhận phiên import.'
-    if (error.status === 401) router.replace('/login')
-  } finally {
-    isConfirming.value = false
-  }
-}
-
-// Step 6: Apply import
-async function handleApplySession() {
-  showApplyConfirm.value = false
-  if (!importId.value || !selectedFile.value) return
-
   isApplying.value = true
   globalError.value = ''
-  globalSuccess.value = ''
-
   try {
-    const response = await applyImportSession(importId.value, selectedFile.value)
-    applyResult.value = response
-    globalSuccess.value = 'Import dữ liệu Excel vào hệ thống thành công!'
-  } catch (error) {
-    globalError.value = error.message || 'Không thể áp dụng dữ liệu import.'
-    if (error.status === 401) router.replace('/login')
+    // Gọi Confirm
+    await confirmImportSession(importId.value)
+    // Gọi Apply ngay sau đó
+    await applyImportSession(importId.value, selectedFile.value)
+    
+    globalSuccess.value = 'Tích hợp dữ liệu vào hệ thống THÀNH CÔNG!'
+    validationResult.value = null // Ẩn nút xác nhận
+    selectedFile.value = null
+  } catch (err) {
+    globalError.value = err.message || 'Lỗi khi đồng bộ dữ liệu vào Database.'
   } finally {
     isApplying.value = false
   }
 }
-
-// Reset everything to start fresh
-function handleResetAll() {
-  selectedFile.value = null
-  selectedWarehouseId.value = ''
-  if (fileInput.value) fileInput.value.value = ''
-  resetWorkflowState('')
-}
-
-function formatDate(dateStr) {
-  if (!dateStr) return ''
-  try {
-    return new Date(dateStr).toLocaleString('vi-VN')
-  } catch (e) {
-    return dateStr
-  }
-}
 </script>
 
-<template>
-  <div class="page-shell">
-    <PageHeader title="Import dữ liệu Excel" description="Nhập dữ liệu danh sách sản phẩm hoặc sản phẩm kèm tồn kho đầu kỳ bằng file mẫu Excel." />
-
-    <!-- Message Alert Area -->
-    <div class="mt-4">
-      <div v-if="globalError" class="p-4 mb-4 text-red-800 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2 shadow-sm animate-fade-in">
-        <i class="mdi mdi-alert-circle-outline text-lg mt-0.5"></i>
-        <div>
-          <span class="font-bold">Lỗi: </span>
-          <span>{{ globalError }}</span>
-        </div>
-      </div>
-
-      <div v-if="globalWarning" class="p-4 mb-4 text-yellow-800 rounded-lg bg-yellow-50 border border-yellow-200 flex items-start gap-2 shadow-sm animate-fade-in">
-        <i class="mdi mdi-alert-outline text-lg mt-0.5"></i>
-        <div>
-          <span class="font-bold">Cảnh báo: </span>
-          <span>{{ globalWarning }}</span>
-        </div>
-      </div>
-
-      <div v-if="globalSuccess" class="p-4 mb-4 text-green-800 rounded-lg bg-green-50 border border-green-200 flex items-start gap-2 shadow-sm animate-fade-in">
-        <i class="mdi mdi-check-circle-outline text-lg mt-0.5"></i>
-        <div>
-          <span class="font-bold">Thành công: </span>
-          <span>{{ globalSuccess }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Stepper Workflow -->
-    <div class="mt-6 flex flex-col gap-6">
-
-      <!-- Step 1: Download Template -->
-      <div class="card card-pad step-card" :class="[step1Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step1Status]">
-            <i class="mdi mdi-check"></i>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800 flex items-center gap-2">
-              Bước 1 — Tải File Mẫu Excel
-            </h3>
-            <p class="muted mt-1">Dùng file mẫu chuẩn để nhập sản phẩm hoặc sản phẩm kèm tồn kho đầu kỳ.</p>
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="isDownloadingTemplate" @click="handleDownloadTemplate">
-                <i v-if="isDownloadingTemplate" class="mdi mdi-loading mdi-spin"></i>
-                <i v-else class="mdi mdi-download"></i>
-                Tải file mẫu Excel
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 2: Setup Import -->
-      <div class="card card-pad step-card" :class="[step2Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step2Status]">
-            <i v-if="step2Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>2</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 2 — Cấu hình & Chọn File</h3>
-            <p class="muted mt-1 mb-4">Lựa chọn loại dữ liệu import, kho hàng (nếu kèm tồn kho) và tải file lên.</p>
-
-            <div class="grid grid-2 md:grid-cols-2 gap-4">
-              <!-- Select Import Type -->
-              <div class="field">
-                <label>Loại import *</label>
-                <select v-model="importType" class="select" :disabled="isCreatingSession || isValidating || isConfirming || isApplying || applyResult">
-                  <option value="PRODUCT_ONLY">Chỉ sản phẩm (PRODUCT_ONLY)</option>
-                  <option value="PRODUCT_WITH_OPENING_STOCK">Sản phẩm + tồn đầu kỳ (PRODUCT_WITH_OPENING_STOCK)</option>
-                </select>
-              </div>
-
-              <!-- Select Warehouse if Required -->
-              <div v-if="importType === 'PRODUCT_WITH_OPENING_STOCK'" class="field">
-                <label>Kho nhận hàng đầu kỳ</label>
-                <select v-model="selectedWarehouseId" class="select" :disabled="isLoadingWarehouses || isCreatingSession || isValidating || isConfirming || isApplying || applyResult">
-                  <option value="">-- Chọn kho hàng nhận tồn đầu kỳ --</option>
-                  <option v-for="w in warehouses" :key="w.id" :value="w.id">{{ w.tenKho }} ({{ w.maKho }})</option>
-                </select>
-                <small class="text-slate-400 mt-1 block">Có thể để trống nếu file tồn đầu kỳ đã có mã kho theo từng dòng.</small>
-                <small v-if="isLoadingWarehouses" class="text-slate-400">Đang tải danh sách kho hàng...</small>
-                <small v-if="warehouseError" class="text-red-600 font-semibold mt-1 block">{{ warehouseError }}</small>
-              </div>
-            </div>
-
-            <!-- File Upload -->
-            <div class="field mt-4">
-              <label>Chọn file dữ liệu Excel (.xlsx) *</label>
-              <div class="flex flex-wrap items-center gap-3">
-                <button class="btn btn-secondary" type="button" :disabled="isCreatingSession || isValidating || isConfirming || isApplying || applyResult" @click="fileInput.click()">
-                  <i class="mdi mdi-file-excel-outline"></i>
-                  Chọn file từ máy tính
-                </button>
-                <input ref="fileInput" type="file" accept=".xlsx" class="hidden" @change="onFileChange" />
-
-                <div v-if="selectedFile" class="flex items-center gap-2 p-2 bg-slate-100 rounded-md border border-slate-200">
-                  <i class="mdi mdi-file-check-outline text-green-600 text-lg"></i>
-                  <span class="text-sm font-semibold text-slate-700">{{ selectedFile.name }} ({{ formatFileSize(selectedFile.size) }})</span>
-                </div>
-                <span v-else class="text-sm text-slate-400">Chưa có file nào được chọn</span>
-              </div>
-              <small v-if="fileError" class="text-red-600 font-semibold mt-1 block">{{ fileError }}</small>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 3: Create Session -->
-      <div class="card card-pad step-card" :class="[step3Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step3Status]">
-            <i v-if="step3Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>3</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 3 — Tạo Phiên Import</h3>
-            <p class="muted mt-1">Đăng ký file và loại import với hệ thống để khởi tạo mã phiên.</p>
-
-            <!-- Session details if created -->
-            <div v-if="sessionSummary" class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-md text-sm">
-              <div class="font-bold text-blue-900 mb-1">Chi tiết phiên import khởi tạo:</div>
-              <div class="grid grid-2 gap-x-4 gap-y-1">
-                <div>Mã phiên import (ID): <span class="font-semibold">{{ sessionSummary.id }}</span></div>
-                <div>Tên file gốc: <span class="font-semibold">{{ sessionSummary.tenFile }}</span></div>
-                <div>Loại import: <span class="font-semibold">{{ sessionSummary.loaiImport }}</span></div>
-                <div>Trạng thái:
-                  <span class="font-bold px-2 py-0.5 rounded-full text-xs" :class="sessionSummary.trangThai === 'CHO_XU_LY' ? 'bg-yellow-100 text-yellow-800' : 'bg-slate-100 text-slate-800'">
-                    {{ sessionSummary.trangThai }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="step3Status !== 'active' || isCreatingSession || !selectedFile" @click="handleCreateSession">
-                <i v-if="isCreatingSession" class="mdi mdi-loading mdi-spin"></i>
-                Khởi tạo phiên import
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 4: Validate and Persist Errors -->
-      <div class="card card-pad step-card" :class="[step4Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step4Status]">
-            <i v-if="step4Status === 'completed'" class="mdi mdi-check"></i>
-            <i v-else-if="step4Status === 'failed'" class="mdi mdi-close-circle-outline"></i>
-            <span v-else>4</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 4 — Kiểm Tra Dữ Liệu (Validate)</h3>
-            <p class="muted mt-1">Hệ thống sẽ kiểm tra định dạng dữ liệu, sự tồn tại của mã sản phẩm, danh mục và kho hàng.</p>
-
-            <!-- Validation Summary -->
-            <div v-if="validationResult" class="mt-3 p-3 rounded-md text-sm border" :class="validationResult.valid ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'">
-              <div class="font-bold mb-1" :class="validationResult.valid ? 'text-green-900' : 'text-red-900'">Kết quả kiểm tra dữ liệu:</div>
-              <div class="grid grid-4 gap-2">
-                <div>Tổng số dòng: <span class="font-bold">{{ validationResult.tongSoDong }}</span></div>
-                <div>Số dòng hợp lệ: <span class="font-bold text-green-700">{{ validationResult.soDongHopLe }}</span></div>
-                <div>Số dòng lỗi: <span class="font-bold text-red-700">{{ validationResult.soDongLoi }}</span></div>
-                <div>Kết luận:
-                  <span class="font-bold" :class="validationResult.valid ? 'text-green-700' : 'text-red-700'">
-                    {{ validationResult.valid ? 'HỢP LỆ' : 'KHÔNG HỢP LỆ' }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Action button -->
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="step4Status === 'locked' || isValidating || !selectedFile || !importId" @click="handleValidateSession">
-                <i v-if="isValidating" class="mdi mdi-loading mdi-spin"></i>
-                Kiểm tra dữ liệu Excel
-              </button>
-            </div>
-
-            <!-- Error Report Table -->
-            <div v-if="errorsResponse && errorsResponse.content && errorsResponse.content.length > 0" class="mt-4 border border-red-100 rounded-lg overflow-hidden">
-              <div class="bg-red-900 text-white p-3 font-semibold flex items-center gap-2">
-                <i class="mdi mdi-alert-box-outline"></i>
-                Bảng chi tiết các lỗi dữ liệu trong file Excel (Trang {{ errorsResponse.page + 1 }}/{{ errorsResponse.totalPages }})
-              </div>
-
-              <div class="table-wrap">
-                <table class="data-table">
-                  <thead>
-                    <tr>
-                      <th style="width: 80px;">Dòng</th>
-                      <th style="width: 150px;">Cột dữ liệu</th>
-                      <th style="width: 180px;">Giá trị trong file</th>
-                      <th>Chi tiết lỗi</th>
-                      <th>Gợi ý khắc phục</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="err in errorsResponse.content" :key="err.id">
-                      <td class="font-bold text-slate-900">{{ err.rowNumber }}</td>
-                      <td class="text-red-700 font-semibold">{{ err.columnName }}</td>
-                      <td>
-                        <code class="px-1.5 py-0.5 bg-slate-100 border rounded text-xs text-slate-800">{{ err.originalValue === null || err.originalValue === '' ? '(trống)' : err.originalValue }}</code>
-                      </td>
-                      <td class="text-red-600 font-semibold">{{ err.message }}</td>
-                      <td class="text-green-700 font-semibold">{{ err.suggestion || '-' }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-
-              <!-- Pagination controls -->
-              <div class="p-3 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
-                <span class="text-sm text-slate-600">Tìm thấy <span class="font-bold">{{ errorsResponse.totalElements }}</span> lỗi dữ liệu</span>
-                <div class="flex items-center gap-2">
-                  <button class="btn btn-sm" :disabled="errorsResponse.page === 0 || isLoadingErrors" @click="fetchErrors(errorsResponse.page - 1)">
-                    <i class="mdi mdi-chevron-left"></i> Trước
-                  </button>
-                  <span class="text-sm font-semibold">Trang {{ errorsResponse.page + 1 }} / {{ errorsResponse.totalPages }}</span>
-                  <button class="btn btn-sm" :disabled="errorsResponse.page >= errorsResponse.totalPages - 1 || isLoadingErrors" @click="fetchErrors(errorsResponse.page + 1)">
-                    Sau <i class="mdi mdi-chevron-right"></i>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 5: Confirm -->
-      <div class="card card-pad step-card" :class="[step5Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step5Status]">
-            <i v-if="step5Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>5</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 5 — Xác Nhận</h3>
-            <p class="muted mt-1">Xác nhận phiên import đã đầy đủ dữ liệu hợp lệ và sẵn sàng tích hợp vào cơ sở dữ liệu.</p>
-
-            <div v-if="confirmResult" class="mt-3 p-3 bg-green-50 border border-green-200 rounded-md text-sm text-green-900">
-              <i class="mdi mdi-check-circle text-green-600 mr-1"></i>
-              Phiên import đã được chuyển sang trạng thái: <span class="font-bold">{{ confirmResult.status }}</span> (Đã Xác Nhận).
-            </div>
-
-            <div class="mt-3">
-              <button class="btn btn-primary" :disabled="step5Status !== 'active' || isConfirming || !selectedFile || !importId" @click="handleConfirmSession">
-                <i v-if="isConfirming" class="mdi mdi-loading mdi-spin"></i>
-                Xác nhận phiên import
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 6: Apply -->
-      <div class="card card-pad step-card" :class="[step6Status]">
-        <div class="flex items-start gap-4">
-          <div class="step-number" :class="[step6Status]">
-            <i v-if="step6Status === 'completed'" class="mdi mdi-check"></i>
-            <span v-else>6</span>
-          </div>
-          <div class="flex-1">
-            <h3 class="section-title text-slate-800">Bước 6 — Áp Dụng Dữ Liệu</h3>
-            <p class="muted mt-1">Thực thi lưu chính thức các sản phẩm mới và cập nhật số lượng tồn kho đầu kỳ tương ứng.</p>
-
-            <div v-if="applyResult" class="mt-3 p-4 bg-slate-100 border border-slate-300 rounded-lg text-slate-800">
-              <h4 class="font-bold text-slate-900 mb-2">Kết quả thực thi import thành công:</h4>
-              <ul class="list-disc pl-5 space-y-1 text-sm">
-                <li>Mã import: <span class="font-semibold">{{ applyResult.importId }}</span></li>
-                <li>Trạng thái: <span class="font-bold text-green-700">{{ applyResult.status }}</span></li>
-                <li>Thời gian hoàn thành: <span class="font-semibold">{{ formatDate(applyResult.completedAt) }}</span></li>
-                <li>Tổng số sản phẩm/khoản mục xử lý: <span class="font-semibold">{{ applyResult.totalRows }}</span></li>
-                <li>Số dòng áp dụng thành công: <span class="font-bold text-green-700">{{ applyResult.validRows }}</span></li>
-                <li>Thông điệp: <span class="font-semibold">{{ applyResult.message }}</span></li>
-              </ul>
-            </div>
-
-            <div class="mt-4 flex gap-3">
-              <button class="btn btn-success" :disabled="step6Status !== 'active' || isApplying || !selectedFile || !importId" @click="showApplyConfirm = true">
-                <i v-if="isApplying" class="mdi mdi-loading mdi-spin"></i>
-                Áp dụng import dữ liệu
-              </button>
-
-              <button class="btn" type="button" @click="handleResetAll">
-                Làm mới từ đầu
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-
-    <!-- Confirm Apply Dialog -->
-    <ConfirmDialog
-      :open="showApplyConfirm"
-      title="Cảnh báo cập nhật dữ liệu"
-      message="Thao tác này sẽ cập nhật dữ liệu sản phẩm/tồn kho chính thức vào hệ thống và ghi nhận các giao dịch nhập tồn kho đầu kỳ. Bạn có chắc chắn muốn thực hiện?"
-      confirm-text="Đồng ý import"
-      :loading="isApplying"
-      @cancel="showApplyConfirm = false"
-      @confirm="handleApplySession"
-    />
-  </div>
-</template>
-
 <style scoped>
-.step-card {
-  border-left: 4px solid transparent;
-  transition: all 0.2s ease-in-out;
-}
-
-.step-card.completed {
-  border-left-color: var(--success);
-  background-color: #f0fdf4;
-}
-
-.step-card.active {
-  border-left-color: var(--primary);
-  background-color: #ffffff;
-  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
-}
-
-.step-card.failed {
-  border-left-color: var(--danger);
-  background-color: #fef2f2;
-}
-
-.step-card.locked {
-  border-left-color: var(--border);
-  opacity: 0.55;
-  background-color: var(--surface-soft);
-}
-
-.step-number {
-  width: 32px;
-  height: 32px;
-  border-radius: 999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 800;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.step-number.completed {
-  background-color: var(--success);
-  color: #ffffff;
-}
-
-.step-number.active {
-  background-color: var(--primary);
-  color: #ffffff;
-}
-
-.step-number.failed {
-  background-color: var(--danger);
-  color: #ffffff;
-}
-
-.step-number.locked {
-  background-color: var(--border-strong);
-  color: var(--muted);
-}
-
-.mdi-spin {
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
+/* Tailwind CSS đã bao hàm tất cả, không cần thêm style thủ công */
 .animate-fade-in {
-  animation: fadeIn 0.2s ease-out both;
+  animation: fadeIn 0.3s ease-out both;
 }
-
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(-4px); }
   to { opacity: 1; transform: translateY(0); }

From 264f9ecd26091bf874eeb89cae2ea697e8f3941e Mon Sep 17 00:00:00 2001
From: Tonfa137206 <lequoctoan137@gmail.com>
Date: Tue, 11 Aug 2026 23:53:12 +0700
Subject: [PATCH 3/3] refactor(inventory): remove mock data, clean up verbose
 comments, and integrate real API

---
 src/components/InventoryCountCreateModal.vue | 148 +++++--------------
 1 file changed, 35 insertions(+), 113 deletions(-)

diff --git a/src/components/InventoryCountCreateModal.vue b/src/components/InventoryCountCreateModal.vue
index a3288fa..4397485 100644
--- a/src/components/InventoryCountCreateModal.vue
+++ b/src/components/InventoryCountCreateModal.vue
@@ -22,31 +22,6 @@
         </button>
       </div>
 
-      <!-- Body Form -->Đóng vai trò là một Tech Lead / Frontend Architect. Dự án Vue 3 + Tailwind CSS của chúng tôi đang ở giai đoạn nước rút (Sprint 5). Tôi vừa hoàn thành Task T231 (Danh sách đợt kiểm kê) và T233 (Modal tạo đợt kiểm kê).
-
-Hãy đọc toàn bộ thư mục src/views/ và src/components/, đặc biệt tập trung vào các module Inventory và ImportExcel, sau đó thực hiện 2 việc sau:
-
-Phần 1: Gap Analysis (Đánh giá hiện trạng)
-Đối chiếu source code hiện tại với danh sách các task dưới đây để báo cáo xem file/component nào đã có, file nào chưa có, hoặc code nào đang làm dở:
-
-Cụm Chi tiết Kiểm kê (T232, T234, T235, T236):
-
-Cần UI hiển thị danh sách sản phẩm trong đợt kiểm kê (số lượng hệ thống, số lượng thực tế, chênh lệch).
-
-Yêu cầu cốt lõi (T234): Form nhập số lượng thực tế phải là dạng inline-editing (nhập trực tiếp trên bảng), thao tác phải cực nhanh, tuyệt đối KHÔNG bắt user mở modal cho từng dòng.
-
-Cần có nút Chốt (Finalize) / Hủy (Cancel) đợt kiểm kê và khóa UI sau thao tác (T235).
-
-Phải có UI loading, empty state, và xử lý lỗi API (T236).
-
-Cụm Import Excel (T237, T238):
-
-Flow import phải được rút gọn tối đa còn 2 bước: (1) Upload file -> Backend validate -> Nếu hợp lệ mới bật nút (2) Xác nhận Import. Không được để nút validate rời rạc ở Frontend.
-
-Nút tải file mẫu (Template) phải tải đúng bản sạch, không kèm sheet tham chiếu rườm rà.
-
-Phần 2: Actionable Coding Plan (Kế hoạch thực thi)
-Sau khi đánh giá, hãy cung cấp cho tôi bản thiết kế Component (dự kiến tên file, các biến state cần có, logic tính toán chênh lệch) và viết mã nguồn hoàn chỉnh cho Task T232 + T234 (Giao diện chi tiết đợt kiểm kê & Bảng nhập liệu inline) để tôi có thể bắt đầu code ngay lập tức. Đảm bảo sử dụng Tailwind CSS đồng bộ với dự án.
       <div class="p-6">
         <form @submit.prevent="handleSubmit">
           
@@ -62,7 +37,7 @@ Sau khi đánh giá, hãy cung cấp cho tôi bản thiết kế Component (dự
               @change="errors.warehouseId = false"
             >
               <option value="" disabled>-- Chọn kho --</option>
-              <option v-for="wh in mockWarehouses" :key="wh.id" :value="wh.id">
+              <option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
                 {{ wh.name }}
               </option>
             </select>
@@ -106,7 +81,7 @@ Sau khi đánh giá, hãy cung cấp cho tôi bản thiết kế Component (dự
             <!-- Wrapper có thanh cuộn nếu danh sách dài -->
             <div class="max-h-48 overflow-y-auto pr-2 custom-scrollbar">
               <div 
-                v-for="product in mockProducts" 
+                v-for="product in products" 
                 :key="product.id"
                 class="flex items-center py-2 border-b border-gray-100 last:border-0 hover:bg-white transition-colors px-2 rounded"
               >
@@ -178,11 +153,10 @@ Sau khi đánh giá, hãy cung cấp cho tôi bản thiết kế Component (dự
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
+import { getWarehouses } from '../services/warehouseService'
+import { getProducts } from '../services/productService'
 
-// ==========================================
-// 1. PROPS & EMITS
-// ==========================================
 const props = defineProps({
   isOpen: {
     type: Boolean,
@@ -192,30 +166,14 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'submit'])
 
-// ==========================================
-// 2. MOCK DATA
-// ==========================================
-const mockWarehouses = [
-  { id: 'WH01', name: 'Kho Tổng Hà Nội' },
-  { id: 'WH02', name: 'Kho Chi nhánh HCM' },
-  { id: 'WH03', name: 'Kho Lạnh Đà Nẵng' }
-]
-
-const mockProducts = [
-  { id: 'P001', sku: 'IP14-PRO-128', name: 'iPhone 14 Pro 128GB', stock: 45 },
-  { id: 'P002', sku: 'MB-AIR-M2', name: 'MacBook Air M2 256GB', stock: 12 },
-  { id: 'P003', sku: 'AP-PRO-2', name: 'AirPods Pro Gen 2', stock: 105 },
-  { id: 'P004', sku: 'IPAD-AIR-5', name: 'iPad Air 5 64GB', stock: 30 },
-  { id: 'P005', sku: 'AW-S8-45', name: 'Apple Watch Series 8 45mm', stock: 22 },
-  { id: 'P006', sku: 'SS-S23-ULT', name: 'Samsung S23 Ultra', stock: 15 }
-]
+const warehouses = ref([])
+const products = ref([])
+const isLoading = ref(false)
+const isSubmitting = ref(false)
 
-// ==========================================
-// 3. STATE (FORM & VALIDATION)
-// ==========================================
 const formData = reactive({
   warehouseId: '',
-  scope: 'ALL', // 'ALL' hoặc 'PARTIAL'
+  scope: 'ALL',
   productIds: [],
   note: ''
 })
@@ -225,81 +183,45 @@ const errors = reactive({
   productIds: false
 })
 
-const isSubmitting = ref(false)
+const fetchInitialData = async () => {
+  isLoading.value = true
+  try {
+    const warehouseData = await getWarehouses({ status: 'HOAT_DONG' })
+    warehouses.value = warehouseData.content || warehouseData.data || warehouseData
 
-// ==========================================
-// 4. WATCHERS
-// ==========================================
-// Reset form mỗi khi Modal được mở lên
-watch(() => props.isOpen, (newVal) => {
-  if (newVal) {
-    formData.warehouseId = ''
-    formData.scope = 'ALL'
-    formData.productIds = []
-    formData.note = ''
-    errors.warehouseId = false
-    errors.productIds = false
+    const productData = await getProducts()
+    products.value = productData.content || productData.data || productData
+  } catch (error) {
+    console.error('Lỗi tải dữ liệu kho/sản phẩm:', error)
+  } finally {
+    isLoading.value = false
   }
-})
+}
 
-// Tự động clear danh sách sản phẩm nếu người dùng đổi lại scope là 'ALL'
-watch(() => formData.scope, (newVal) => {
-  if (newVal === 'ALL') {
-    formData.productIds = []
-    errors.productIds = false
-  }
+onMounted(() => {
+  fetchInitialData()
 })
 
-// ==========================================
-// 5. ACTIONS
-// ==========================================
 const closeModal = () => {
-  if (isSubmitting.value) return // Không cho đóng khi đang tải
+  if (isSubmitting.value) return
+  formData.warehouseId = ''
+  formData.scope = 'ALL'
+  formData.productIds = []
+  formData.note = ''
+  errors.warehouseId = false
+  errors.productIds = false
   emit('close')
 }
 
 const handleSubmit = async () => {
-  // --- A. Validate ---
-  let isValid = true
-  
-  if (!formData.warehouseId) {
-    errors.warehouseId = true
-    isValid = false
-  }
-  
-  if (formData.scope === 'PARTIAL' && formData.productIds.length === 0) {
-    errors.productIds = true
-    isValid = false
-  }
+  errors.warehouseId = !formData.warehouseId
+  errors.productIds = formData.scope === 'PARTIAL' && formData.productIds.length === 0
 
-  if (!isValid) return
+  if (errors.warehouseId || errors.productIds) return
 
-  // --- B. Xử lý Submit (Giả lập gọi API) ---
   isSubmitting.value = true
-  
   try {
-    // Giả lập delay mạng 1 giây để xem hiệu ứng loading
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    
-    // Gói dữ liệu (Payload) gửi ra component cha
-    const payload = {
-      // Dữ liệu thực tế form
-      ...formData,
-      
-      // Mock thêm các field giống DB để component cha dễ push vào mảng hiển thị
-      id: Math.floor(Math.random() * 10000), 
-      code: `KK-${new Date().toISOString().slice(0, 10).replace(/-/g, '')}-${Math.floor(Math.random() * 1000)}`,
-      warehouseName: mockWarehouses.find(w => w.id === formData.warehouseId)?.name,
-      status: 'DRAFT',
-      createdDate: new Date().toISOString(),
-      createdBy: 'Current User'
-    }
-    
-    // Bắn event báo cha đóng modal và add data
-    emit('submit', payload)
-    
-  } catch (error) {
-    console.error(error)
+    emit('submit', { ...formData })
   } finally {
     isSubmitting.value = false
   }