diff --git a/app/components/imports/AddOS.vue b/app/components/imports/AddOS.vue
new file mode 100644
index 0000000..018a779
--- /dev/null
+++ b/app/components/imports/AddOS.vue
@@ -0,0 +1,3 @@
+<script lang="ts" setup></script>
+
+<template>AddOS</template>
diff --git a/app/components/imports/AddProductForm.vue b/app/components/imports/AddProductForm.vue
new file mode 100644
index 0000000..a2ceeb9
--- /dev/null
+++ b/app/components/imports/AddProductForm.vue
@@ -0,0 +1,264 @@
+<script setup>
+const { $insertapi } = useNuxtApp();
+
+const isPending = ref(false);
+const body = ref({
+  name: null,
+  manufacturer: null,
+  os: null,
+  battery: null,
+  screen: null,
+  cpu: null,
+  gpu: null,
+  camera_system: null,
+  sim: null,
+  network_technology: null,
+  charging_technology: null,
+  external_storage: null,
+  ip_rating: null,
+  design: null,
+});
+
+function selected(field, data) {
+  body.value[field] = data.id;
+}
+
+async function createProduct() {
+  isPending.value = true;
+  const res = await $insertapi("product", body.value);
+  isPending.value = false;
+}
+
+/* TODO: <SearchBox> addons */
+const addOS = {
+  component: "imports/AddOS",
+  width: "60%",
+  height: "auto",
+  title: "AddOS",
+};
+</script>
+
+<template>
+  <h1 class="subtitle is-4">AddProductForm</h1>
+  <form class="fixed-grid has-12-cols">
+    <div class="grid">
+      <div class="cell is-col-span-8">
+        <div class="field">
+          <label class="label">Tên sản phẩm</label>
+          <div class="control">
+            <input
+              class="input"
+              v-model.trim="body.name"
+              type="text"
+              placeholder="Tên"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">OS</label>
+          <SearchBox
+            v-bind="{
+              api: 'OS',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'OS',
+            }"
+            @option="selected('os', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Hãng</label>
+          <SearchBox
+            v-bind="{
+              api: 'Manufacturer',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'Hãng',
+            }"
+            @option="selected('manufacturer', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Pin</label>
+          <SearchBox
+            v-bind="{
+              api: 'Battery',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'Pin',
+            }"
+            @option="selected('battery', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Màn hình</label>
+          <SearchBox
+            v-bind="{
+              api: 'Screen',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'Màn hình',
+            }"
+            @option="selected('screen', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">CPU</label>
+          <SearchBox
+            v-bind="{
+              api: 'CPU',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'CPU',
+            }"
+            @option="selected('cpu', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">GPU</label>
+          <SearchBox
+            v-bind="{
+              api: 'GPU',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'GPU',
+            }"
+            @option="selected('gpu', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Camera</label>
+          <SearchBox
+            v-bind="{
+              api: 'Camera_System',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'Camera',
+            }"
+            @option="selected('camera_system', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">SIM</label>
+          <SearchBox
+            v-bind="{
+              api: 'SIM',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'SIM',
+            }"
+            @option="selected('sim', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Kết nối</label>
+          <SearchBox
+            v-bind="{
+              api: 'Network_Technology',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'Kết nối',
+            }"
+            @option="selected('network_technology', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Công nghệ sạc</label>
+          <SearchBox
+            v-bind="{
+              api: 'Charging_Technology',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'Công nghệ sạc',
+            }"
+            @option="selected('charging_technology', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Bộ nhớ ngoài</label>
+          <SearchBox
+            v-bind="{
+              api: 'External_Storage',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'Bộ nhớ ngoài',
+            }"
+            @option="selected('external_storage', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Chỉ số IP</label>
+          <SearchBox
+            v-bind="{
+              api: 'IP_Rating',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'Chỉ số IP',
+            }"
+            @option="selected('ip_rating', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Chất liệu</label>
+          <SearchBox
+            v-bind="{
+              api: 'Design',
+              field: 'label',
+              column: ['frame_material', 'back_material'],
+              first: true,
+              placeholder: 'Chất liệu',
+            }"
+            @option="selected('design', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-12">
+        <button
+          :class="['button is-primary', { 'is-loading': isPending }]"
+          :disabled="Object.values(body).every((v) => v === null)"
+          @click.prevent="createProduct"
+        >
+          Tạo sản phẩm
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/imports/AddProductVariantForm.vue b/app/components/imports/AddProductVariantForm.vue
new file mode 100644
index 0000000..d132013
--- /dev/null
+++ b/app/components/imports/AddProductVariantForm.vue
@@ -0,0 +1,134 @@
+<script setup>
+import InputNumber from "@/components/common/InputNumber.vue";
+
+const { $insertapi } = useNuxtApp();
+
+const isPending = ref(false);
+const body = ref({
+  product: null,
+  price: null,
+  internal_storage: null,
+  ram: null,
+  color: null,
+  note: null,
+});
+
+function selected(field, data) {
+  if (field === "price") {
+    body.value[field] = data;
+  } else {
+    body.value[field] = data.id;
+  }
+}
+
+async function createProductVariant() {
+  isPending.value = true;
+  const res = await $insertapi("Product_Variant", body.value);
+  isPending.value = false;
+}
+</script>
+
+<template>
+  <h1 class="subtitle is-4">AddProductVariantForm</h1>
+  <form class="fixed-grid has-12-cols">
+    <div class="grid">
+      <div class="cell is-col-span-8">
+        <div class="field">
+          <label class="label">Sản phẩm</label>
+          <SearchBox
+            v-bind="{
+              api: 'product',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'Sản phẩm',
+            }"
+            @option="selected('product', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Đơn giá</label>
+          <div class="control">
+            <InputNumber
+              v-bind="{
+                record: body,
+                attr: 'price',
+                placeholder: 'Đơn giá',
+              }"
+              @number="selected('price', $event)"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Màu sắc</label>
+          <SearchBox
+            v-bind="{
+              api: 'color',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'Màu sắc',
+            }"
+            @option="selected('color', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">RAM</label>
+          <SearchBox
+            v-bind="{
+              api: 'RAM',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'RAM',
+            }"
+            @option="selected('ram', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Bộ nhớ trong</label>
+          <SearchBox
+            v-bind="{
+              api: 'internalstorage',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'Bộ nhớ trong',
+            }"
+            @option="selected('internal_storage', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-12">
+        <div class="field">
+          <label class="label">Ghi chú</label>
+          <textarea
+            v-model.trim="body.note"
+            class="textarea"
+            name="note"
+            placeholder="Ghi chú"
+            rows="2"
+          ></textarea>
+        </div>
+      </div>
+
+      <div class="cell is-col-span-12">
+        <button
+          :class="['button is-primary', { 'is-loading': isPending }]"
+          :disabled="Object.values(body).every((v) => v === null)"
+          @click.prevent="createProductVariant"
+        >
+          Thêm phiên bản
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/imports/Imports.vue b/app/components/imports/Imports.vue
index 4256a3f..49a125a 100644
--- a/app/components/imports/Imports.vue
+++ b/app/components/imports/Imports.vue
@@ -1,38 +1,8 @@
 <script setup>
+import AddProductForm from "@/components/imports/AddProductForm.vue";
+import AddProductVariantForm from "@/components/imports/AddProductVariantForm.vue";
 import FileUpload from "@/components/media/FileUpload.vue";
-
-const { $getdata } = useNuxtApp();
-const files = ref([]);
-
-onMounted(async () => {
-  const filesFetched = await $getdata("file", {
-    id__gte: 12473,
-    id__lte: 12475,
-  });
-
-  files.value = filesFetched;
-});
-
-async function onClick(url) {
-  const blob = await $fetch("/api/hello", {
-    query: { url },
-    responseType: "blob",
-  });
-  const urlDownload = window.URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = urlDownload;
-  link.setAttribute("download", "aName");
-  link.click();
-  link.remove();
-}
-
-const buildUrl = (f) => `https://api.utopia.com.vn/download?name=${f.file}&type=file`;
-
-function onFiles(files) {
-  console.log("files", toRaw(files));
-}
 </script>
-
 <template>
   <FileUpload
     :type="['file']"
@@ -47,20 +17,6 @@ function onFiles(files) {
     </template>
     <span class="font-medium">Import</span>
   </FileUpload>
-  <div class="buttons">
-    <button
-      class="button"
-      v-for="(url, i) in files.map(buildUrl)"
-      :key="i"
-      @click="onClick(url)"
-    >
-      <span class="icon">
-        <Icon
-          name="material-symbols:download-rounded"
-          :size="18"
-        />
-      </span>
-      <span>{{ files[i].name }}</span>
-    </button>
-  </div>
+  <AddProductVariantForm />
+  <AddProductForm />
 </template>
diff --git a/app/plugins/02-connection.js b/app/plugins/02-connection.js
index 4bbfc9b..ea0030b 100644
--- a/app/plugins/02-connection.js
+++ b/app/plugins/02-connection.js
@@ -570,19 +570,13 @@ export default defineNuxtPlugin((nuxtApp) => {
       commit: "product",
       url: "data/Product/",
       url_detail: "data-detail/Product/",
-      params: {
-        sort: "id",
-        values:
-          "prdbk__transaction__amount_remain,prdbk__transaction,price_excluding_vat,prdbk__transaction__txncurrent__detail__status__name,locked_until,note,cart,cart__name,cart__code,cart__dealer,cart__dealer__code,cart__dealer__name,direction,type,zone_type,dealer,link,type__name,dealer__code,dealer__name,prdbk,prdbk__transaction__customer,prdbk__transaction,prdbk__transaction__policy__code,prdbk__transaction__sale_price,prdbk__transaction__discount_amount,prdbk__transaction__code,prdbk__transaction__customer__code,prdbk__transaction__customer__phone,prdbk__transaction__customer__fullname,prdbk__transaction__customer__legal_code,id,code,trade_code,land_lot_code,zone_code,zone_type__name,lot_area,building_area,total_built_area,number_of_floors,land_lot_size,origin_price,direction__name,villa_model,product_type,template_name,project,project__name,status,status__code,status__name,status__color,status__sale_status,status__sale_status__color,create_time,prdbk__transaction__amount_received",
-        distinct_values: {
-          label: {
-            type: "Concat",
-            field: ["trade_code", "type__name", "land_lot_size", "zone_type__name", "status__name"],
-          },
-          count_note: { type: "Count", field: "prdnote" },
-        },
-        summary: "annotate",
-      },
+      params: {},
+    },
+    {
+      name: "Product_Variant",
+      url: "data/Product_Variant/",
+      url_detail: "data-detail/Product_Variant/",
+      params: {},
     },
     {
       name: "productdocument",
@@ -996,6 +990,115 @@ export default defineNuxtPlugin((nuxtApp) => {
       url_detail: "data-detail/Invoice/",
       params: {},
     },
+    {
+      name: "Manufacturer",
+      url: "data/Manufacturer/",
+      url_detail: "data-detail/Manufacturer/",
+      params: {},
+    },
+    {
+      name: "OS",
+      url: "data/OS/",
+      url_detail: "data-detail/OS/",
+      params: {},
+    },
+    {
+      name: "Battery",
+      url: "data/Battery/",
+      url_detail: "data-detail/Battery/",
+      params: {},
+    },
+    {
+      name: "Screen",
+      url: "data/Screen/",
+      url_detail: "data-detail/Screen/",
+      params: {},
+    },
+    {
+      name: "CPU",
+      url: "data/CPU/",
+      url_detail: "data-detail/CPU/",
+      params: {},
+    },
+    {
+      name: "GPU",
+      url: "data/GPU/",
+      url_detail: "data-detail/GPU/",
+      params: {},
+    },
+    {
+      name: "Camera_System",
+      url: "data/Camera_System/",
+      url_detail: "data-detail/Camera_System/",
+      params: {},
+    },
+    {
+      name: "SIM",
+      url: "data/SIM/",
+      url_detail: "data-detail/SIM/",
+      params: {},
+    },
+    {
+      name: "Network_Technology",
+      url: "data/Network_Technology/",
+      url_detail: "data-detail/Network_Technology/",
+      params: {},
+    },
+    {
+      name: "Charging_Technology",
+      url: "data/Charging_Technology/",
+      url_detail: "data-detail/Charging_Technology/",
+      params: {},
+    },
+    {
+      name: "External_Storage",
+      url: "data/External_Storage/",
+      url_detail: "data-detail/External_Storage/",
+      params: {},
+    },
+    {
+      name: "IP_Rating",
+      url: "data/IP_Rating/",
+      url_detail: "data-detail/IP_Rating/",
+      params: {},
+    },
+    {
+      name: "Design",
+      url: "data/Design/",
+      url_detail: "data-detail/Design/",
+      params: {
+        values: "id,code,frame_material,back_material,create_time",
+        distinct_values: {
+          label: {
+            type: "Concat",
+            field: ["frame_material", "back_material"],
+          },
+        },
+        summary: "annotate",
+      },
+    },
+    {
+      name: "color",
+      url: "data/Color/",
+      url_detail: "data-detail/Color/",
+      params: {},
+    },
+    {
+      name: "RAM",
+      url: "data/RAM/",
+      url_detail: "data-detail/RAM/",
+      params: {
+        sort: "capacity",
+      },
+    },
+    {
+      name: "internalstorage",
+      url: "data/Internal_Storage/",
+      url_detail: "data-detail/Internal_Storage/",
+      params: {
+        sort: "capacity",
+      },
+    },
   ];
   const { $copy, $clone, $updateSeriesFields, $snackbar, $store, $remove, $dialog } = nuxtApp;
 
@@ -1014,6 +1117,11 @@ export default defineNuxtPlugin((nuxtApp) => {
     const result = Array.isArray(name)
       ? apis.filter((v) => name.findIndex((x) => v.name === x) >= 0)
       : apis.find((v) => v.name === name);
+
+    if (!result) {
+      console.error(`API "${name}" doesn't exist`);
+    }
+
     return $copy(result);
   };
 
@@ -1070,18 +1178,17 @@ export default defineNuxtPlugin((nuxtApp) => {
           params: { values },
         });
       } else {
-        let params = { action: "import", values };
         rs = await $fetch(`${curpath}import-data/${found.url.substring(5, found.url.length - 1)}/`, {
           method: "POST",
           body: data,
-          params,
+          params: { action: "import", values },
         });
       }
       // update store
       if (found.commit) {
         if ($store[found.commit]) {
-          let copy = JSON.parse(JSON.stringify($store[found.commit]));
-          let rows = Array.isArray(rs.data) ? rs.data : [rs.data];
+          let copy = $copy($store[found.commit]);
+          let rows = Array.isArray(rs) ? rs : [rs];
           rows.map((v) => {
             if (v.id && !v.error) {
               let idx = copy.findIndex((x) => x.id === v.id);
diff --git a/app/plugins/04-components.js b/app/plugins/04-components.js
index 0c226f1..183da55 100644
--- a/app/plugins/04-components.js
+++ b/app/plugins/04-components.js
@@ -7,6 +7,7 @@ import POS from "@/components/pos/POS.vue";
 import CreateReceipts from "@/components/receipts/CreateReceipts.vue";
 import Return from "@/components/receipts/Return.vue";
 import Imports from "@/components/imports/Imports.vue";
+import AddOS from "@/components/imports/AddOS.vue";
 import Returns from "@/components/imports/Returns.vue";
 import Exports from "@/components/exports/Exports.vue";
 import ExportsDamaged from "@/components/exports/ExportsDamaged.vue";
@@ -145,6 +146,7 @@ const components = {
   CreateReceipts,
   Return,
   Imports,
+  AddOS,
   Returns,
   Exports,
   ExportsDamaged,