changes

app/components/pos/POS.vue

@@ -1,22 +1,26 @@
 <script setup>
 import ProductCard from "@/components/pos/ProductCard.vue";
+import SearchBox from "@/components/SearchBox.vue";
 
 const store = useStore();
-function selectProduct() {
+function openModal() {
   store.showmodal = {
     component: "pos/ProductSelection",
     title: "Chọn sản phẩm",
     width: "85%",
-    height: "80%",
+    height: "500px",
   };
 }
+
+const customer = ref(null);
+const paymentMethod = ref(null);
 </script>
 
 <template>
   <div class="card">
     <div class="card-content">
       <button
-        @click="selectProduct"
+        @click="openModal"
         class="button is-primary"
       >
         <span class="icon">
@@ -42,19 +46,29 @@ function selectProduct() {
                 />
               </span>
               <span>Giỏ hàng</span>
+              <span>({{ store.selectedImeis.length }})</span>
             </p>
-            <div class="is-flex is-flex-direction-column is-gap-1">
+            <div
+              v-if="store.selectedImeis.length > 0"
+              class="is-flex is-flex-direction-column is-gap-1"
+            >
               <ProductCard
                 v-for="imei in store.selectedImeis"
                 :key="imei.id"
                 :imei="imei"
               />
             </div>
+            <p
+              v-else
+              class="py-4 fs-16 has-text-grey has-text-centered"
+            >
+              Không có sản phẩm nào trong giỏ hàng
+            </p>
           </div>
         </div>
       </div>
       <div class="cell is-col-span-4">
-        <div class="card">
+        <div class="card mb-3">
           <div class="card-content">
             <p class="icon-text fs-17 font-semibold mb-4">
               <span class="icon">
@@ -65,7 +79,51 @@ function selectProduct() {
               </span>
               <span>Khách hàng</span>
             </p>
-            <div>customers content</div>
+            <div>
+              <SearchBox
+                v-bind="{
+                  api: 'customer',
+                  field: 'label',
+                  column: ['label'],
+                  first: true,
+                  clearable: true,
+                  placeholder: 'Khách hàng',
+                  addon: {
+                    component: 'customer/CustomerQuickAdd',
+                    width: '50%',
+                    height: 'auto',
+                    title: 'Tạo khách hàng',
+                  },
+                  onOption: (e) => (customer = e),
+                }"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="card mb-3">
+          <div class="card-content">
+            <p class="icon-text fs-17 font-semibold mb-4">
+              <span class="icon">
+                <Icon
+                  name="material-symbols:credit-card-outline"
+                  :size="18"
+                />
+              </span>
+              <span>Thanh toán</span>
+            </p>
+            <div>
+              <SearchBox
+                v-bind="{
+                  api: 'Payment_Method',
+                  field: 'name',
+                  column: ['name'],
+                  first: true,
+                  clearable: true,
+                  placeholder: 'Phương thức thanh toán',
+                  onOption: (e) => (paymentMethod = e),
+                }"
+              />
+            </div>
           </div>
         </div>
       </div>