changes

app/components/pos/POS.vue

@@ -1,3 +1,74 @@
-<script lang="ts" setup></script>
+<script setup>
+import ProductCard from "@/components/pos/ProductCard.vue";
 
-<template>POS</template>
+const store = useStore();
+function selectProduct() {
+  store.showmodal = {
+    component: "pos/ProductSelection",
+    title: "Chọn sản phẩm",
+    width: "85%",
+    height: "80%",
+  };
+}
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-content">
+      <button
+        @click="selectProduct"
+        class="button is-primary"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:add-rounded"
+            :size="20"
+          />
+        </span>
+        <span>Chọn sản phẩm</span>
+      </button>
+    </div>
+  </div>
+  <div class="fixed-grid has-12-cols">
+    <div class="grid">
+      <div class="cell is-col-span-8">
+        <div class="card">
+          <div class="card-content">
+            <p class="icon-text fs-17 font-semibold mb-4">
+              <span class="icon">
+                <Icon
+                  name="material-symbols:shopping-cart-outline-rounded"
+                  :size="18"
+                />
+              </span>
+              <span>Giỏ hàng</span>
+            </p>
+            <div class="is-flex is-flex-direction-column is-gap-1">
+              <ProductCard
+                v-for="imei in store.selectedImeis"
+                :key="imei.id"
+                :imei="imei"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="card">
+          <div class="card-content">
+            <p class="icon-text fs-17 font-semibold mb-4">
+              <span class="icon">
+                <Icon
+                  name="material-symbols:supervisor-account-outline-rounded"
+                  :size="18"
+                />
+              </span>
+              <span>Khách hàng</span>
+            </p>
+            <div>customers content</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>