diff --git a/.env b/.env
index 092af7d..c4cd5b1 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VUE_APP_ROOT_URL = http://192.168.100.126:8000/api/v1/
\ No newline at end of file
+VUE_APP_ROOT_URL = http://85.208.254.227/api/v1/
\ No newline at end of file
diff --git a/src/components/AtrributesProduct.vue b/src/components/AtrributesProduct.vue
new file mode 100644
index 0000000..332b447
--- /dev/null
+++ b/src/components/AtrributesProduct.vue
@@ -0,0 +1,256 @@
+<script setup>
+  import { ref, defineProps, defineEmits, defineExpose, watch } from "vue"
+  import ApiService from "@/services/ApiService"
+  import { toast } from "vue3-toastify";
+
+  const props = defineProps({
+    categoryId: {
+      type: String,
+      required: true,
+    },
+    productId: {
+      type: Number,
+      required: true,
+    },
+  })
+
+  const emit = defineEmits(["nextStep"])
+
+  const attributes = ref([])
+
+  const selectedAttributes = ref([])
+
+  const rows = ref([])
+
+  const loading = ref(false)
+
+  const loadingAttributes = ref(false)
+
+  const getAttributes = async () => {
+    try {
+      loading.value = true
+
+      const { data: { data, success } } = await ApiService.get(`admin/attributes`, {
+        params: {
+          category_id: props.categoryId,
+          with_global: 1
+      }})
+
+      if (success) {
+        attributes.value = data?.filter(attribute => attribute?.translation)
+      }
+    } catch (e) {
+      toast.error(e?.response?.data?.message)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const addRow = () => {
+    const newRow = {
+      attributes: {},
+      price: '',
+      stock: '',
+    }
+
+    selectedAttributes.value.forEach(attrId => {
+      const attr = getAttributeById(attrId)
+      if (attr && attr.attribute_values.length > 0) {
+        newRow.attributes[attrId] = attr.attribute_values[0].id
+      } else {
+        newRow.attributes[attrId] = ''
+      }
+    })
+    rows.value.push(newRow)
+  }
+
+  const removeRow = async (index) => {
+    rows.value.splice(index, 1)
+    // if (row.id) {
+    //   try {
+    //     const { data: { message, success } } = await ApiService.delete(`admin/products/${props.productId}/variants/${row.id}`)
+    //
+    //     if (success) {
+    //       toast.success(message)
+    //
+    //       rows.value.splice(index, 1)
+    //     }
+    //   } catch (e) {
+    //     toast.error(e?.response?.data?.message);
+    //   }
+    // } else {
+    //
+    // }
+  }
+
+  const getAttributeById = (id) => {
+    return attributes.value.find(attr => attr.id === id)
+  }
+
+  watch(selectedAttributes, (newVal) => {
+    rows.value.forEach(row => {
+      newVal.forEach(attrId => {
+        if (!row.attributes[attrId]) {
+          const attr = getAttributeById(attrId)
+          if (attr && attr.attribute_values.length > 0) {
+            row.attributes[attrId] = attr.attribute_values[0].id
+          }
+        }
+      })
+      Object.keys(row.attributes).forEach(attrId => {
+        if (!newVal.includes(Number(attrId))) {
+          delete row.attributes[attrId]
+        }
+
+        if (selectedAttributes.value?.length === 0)
+          rows.value = []
+      })
+    })
+  })
+
+  const submitAttributes = async () => {
+    try {
+      loadingAttributes.value = true
+
+      await ApiService.post(`admin/products/${props.productId}/attributes`, {
+        attributes: selectedAttributes.value,
+      })
+
+      const { data: { success, message } } = await ApiService.post(`admin/products/${props.productId}/variants`, {
+        productVariants: rows.value?.map(variant => ({
+          price: variant?.price,
+          inventory: variant?.stock,
+          attributeValues: Object.values(variant?.attributes)
+        })),
+      })
+
+      if (success) {
+        toast.success(message)
+        emit('nextStep')
+      }
+    } catch (e) {
+      toast.error(e.response?.data?.message)
+    } finally {
+      loadingAttributes.value = false
+    }
+  }
+
+  const handlerChangeCheckbox = async (e, attr) => {
+    if (!e.target.checked) {
+      try {
+        const { data: { success, message } } = await ApiService.delete(`admin/products/${props.productId}/attributes/${attr.id}`)
+
+        if (success) {
+          toast.success(message)
+        }
+      } catch (e) {
+        toast.error(e.response?.data?.message)
+      }
+    }
+  }
+
+  getAttributes()
+
+  defineExpose({ attributes, rows, selectedAttributes })
+</script>
+
+<template>
+   <span v-if="loading" class="d-flex justify-content-center w-100">
+     <i class="fa fa-spinner fa-spin text-2xl"></i>
+   </span>
+
+  <div v-else class="pt-8">
+    <div>
+      <div v-for="attr in attributes" :key="attr.id" class="mb-2 form-check">
+        <input
+            type="checkbox"
+            :id="'attr-' + attr?.id"
+            :value="attr?.id"
+            v-model="selectedAttributes"
+            @change="handlerChangeCheckbox($event, attr)"
+            class="form-check-input"
+        />
+        <label :for="'attr-' + attr.id" class="form-check-label">{{ attr?.translation?.title }}</label>
+      </div>
+
+      <template v-if="selectedAttributes?.length">
+        <div v-for="(row, i) in rows" :key="row.id" class="border p-3 rounded mt-4 d-flex items-center gap-3">
+          <div v-for="attrId in selectedAttributes" :key="attrId">
+            <select
+                v-model="row.attributes[attrId]"
+                :id="'attr-' + attrId"
+                class="border rounded px-2 py-1 form-select"
+                :style="{ minWidth: '200px' }"
+            >
+              <option
+                  v-for="val in getAttributeById(attrId)?.attribute_values?.filter(attribute => attribute?.translation)"
+                  :key="val.id"
+                  :value="val.id"
+              >
+                {{ val.translation?.title }}
+              </option>
+            </select>
+          </div>
+
+          <!-- Extra fields -->
+          <input
+              v-model="row.price"
+              type="text"
+              placeholder="قیمت"
+              class="border rounded px-2 py-1 w-24"
+          />
+          <input
+              v-model="row.stock"
+              type="text"
+              placeholder="تعداد موجود"
+              class="border rounded px-2 py-1 w-24"
+          />
+
+          <!-- Delete button -->
+          <button
+              @click="removeRow(i)"
+              class="btn btn-danger btn-outline rounded btn-sm"
+          >
+            <i class="ti ti-trash me-1 text-xl"></i>
+          </button>
+        </div>
+
+        <button
+            v-if="selectedAttributes?.length"
+            @click="addRow"
+            class="mt-4 btn btn-primary text-white px-3 py-2 rounded w-100"
+        >
+          <i class="ti ti-plus"></i>
+          افزودن سطر جدید
+        </button>
+
+        <hr class="my-4" />
+
+        <div class="d-flex justify-content-between align-items-center">
+          <button
+              v-if="selectedAttributes?.length"
+              :disabled="loadingAttributes"
+              @click="submitAttributes"
+              class="mt-4 btn btn-primary text-white px-3 py-2 rounded"
+          >
+            <span v-if="loadingAttributes">
+              <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+            </span>
+            <template v-else>
+              ذخیره ویژگی ها
+            </template>
+          </button>
+
+          <div>
+            <slot />
+          </div>
+        </div>
+
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/ConfigCountriesSelect.vue b/src/components/ConfigCountriesSelect.vue
new file mode 100644
index 0000000..9783dab
--- /dev/null
+++ b/src/components/ConfigCountriesSelect.vue
@@ -0,0 +1,103 @@
+<template>
+  <BCol class="col-lg-6">
+    <div class="form-group">
+      <label class="form-label" for="country-code-select">انتخاب پیش شماره</label>
+      <select
+          id="country-code-select"
+          class="form-select"
+          v-model="country_code"
+          :disabled="loading"
+          aria-describedby="country-code-help"
+      >
+        <option value="" disabled>لطفاً یک کشور انتخاب کنید</option>
+        <option
+            v-for="code in countries"
+            :value="code?.id"
+            :key="code?.id"
+        >
+          {{ code?.title }}
+        </option>
+      </select>
+      <small id="country-code-help" class="form-text text-muted">
+        کد کشور را برای شماره تلفن انتخاب کنید.
+      </small>
+      <div v-if="loading" class="spinner-border spinner-border-sm text-primary" role="status">
+        <span class="visually-hidden">در حال بارگذاری...</span>
+      </div>
+    </div>
+  </BCol>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits } from 'vue';
+import { toast } from 'vue3-toastify';
+import ApiService from '@/services/ApiService';
+
+// Define props for v-model
+const props = defineProps({
+  countryCode: {
+    type: [Number, String], // Allow both Number and String to handle type mismatches
+    default: '',
+  },
+});
+
+// Define emits for v-model
+const emit = defineEmits(['update:country-code']);
+
+// Reactive state
+const countries = ref([]);
+const country_code = ref(props.countryCode); // Initialize with prop value
+const loading = ref(false);
+
+// Fetch country configurations
+const getConfigCountries = async () => {
+  try {
+    loading.value = true;
+    const { data: { data, success } } = await ApiService.get('admin/country-configs');
+
+    if (success)
+      countries.value = data;
+
+    if (props.countryCode && countries.value.some(code => code.id === props.countryCode)) {
+      country_code.value = props.countryCode;
+    } else {
+      country_code.value = ''; // Reset if invalid
+    }
+  } catch (error) {
+    const message = error?.response?.data?.message || 'خطا در دریافت لیست کشورها';
+    toast.error(message);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Watch for changes in country_code and emit to parent
+watch(country_code, (newValue) => {
+  emit('update:country-code', Number(newValue)); // Ensure emitted value is a Number
+});
+
+// Watch for prop changes to update country_code
+watch(() => props.countryCode, (newValue) => {
+  if (newValue && countries.value.some(code => code.id === newValue)) {
+    country_code.value = newValue;
+  } else {
+    country_code.value = '';
+  }
+});
+
+// Fetch data on component mount
+onMounted(getConfigCountries);
+</script>
+
+<style scoped>
+.form-group {
+  position: relative;
+}
+
+.spinner-border {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ProductInfo.vue b/src/components/ProductInfo.vue
new file mode 100644
index 0000000..ef420e8
--- /dev/null
+++ b/src/components/ProductInfo.vue
@@ -0,0 +1,176 @@
+<script setup>
+  import {ref, reactive, defineProps, defineExpose, defineEmits } from "vue"
+  import ApiService from "@/services/ApiService";
+  import { toast } from "vue3-toastify";
+  import {BRow} from "bootstrap-vue-next";
+
+  const defaultFormState = {
+    title: null,
+    slug: null,
+    summary: null,
+    description: null,
+    locale: 'fa'
+  };
+
+  const props = defineProps({
+    productId: {
+      type: Number,
+      required: true,
+    }
+  })
+
+  const emit = defineEmits(["changeLng", "data"]);
+
+  const form = reactive({ ...defaultFormState });
+
+  const errors = ref({})
+
+  const loading = ref(false)
+
+  const clearError = (field) => {
+    errors.value[field] = "";
+  };
+
+  const submitForm = async () => {
+    try {
+      loading.value = true
+
+      const url = form?.id ? `admin/products/${props.productId}/translations/${form?.id}` : `admin/products/${props.productId}/translations`
+
+      const { data: { success, message, data } } = await ApiService[form?.id ? 'put' : 'post'](url, form)
+
+      if (success) {
+        Object.assign(form, defaultFormState)
+
+        emit('data', data)
+
+        toast.success(message)
+      }
+    } catch (e) {
+      toast.error(e?.response?.data?.message)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  defineExpose({ form })
+</script>
+
+<template>
+  <div class="p-2">
+    <BRow class="g-3">
+      <BCol md="6">
+        <div class="form-group">
+          <label class="form-label">عنوان</label>
+          <input
+              v-model="form.title"
+              :class="{ 'is-invalid': errors.title }"
+              class="form-control"
+              placeholder="عنوان محصول"
+              type="text"
+              @input="clearError('title')"
+          />
+        </div>
+        <small v-if="errors.title" class="text-danger">
+          {{ errors.title }}
+        </small>
+      </BCol>
+
+      <BCol lg="6">
+        <div class="form-group">
+          <label class="form-label">انتخاب زبان</label>
+          <select
+              v-model="form.locale"
+              class="form-control"
+              placeholder="انتخاب کنید"
+              @change="emit('changeLng', form.locale)"
+          >
+            <option
+                key="fa"
+                value="fa"
+            >
+              فارسی
+            </option>
+            <option
+                key="en"
+                value="en"
+            >
+              انگلیسی
+            </option>
+            <option
+                key="ar"
+                value="ar"
+            >
+              عربی
+            </option>
+          </select>
+        </div>
+      </BCol>
+
+      <BCol md="6">
+        <div class="form-group">
+          <label class="form-label">کلمه کلیدی</label>
+          <input
+              v-model="form.slug"
+              :class="{ 'is-invalid': errors.slug }"
+              class="form-control"
+              placeholder="کلمه کلیدی محصول"
+              type="text"
+              @input="clearError('slug')"
+          />
+        </div>
+        <small v-if="errors.slug" class="text-danger">
+          {{ errors.slug }}
+        </small>
+      </BCol>
+
+      <BCol md="6">
+        <div class="form-group">
+          <label class="form-label">خلاصه</label>
+          <textarea
+              v-model="form.summary"
+              :class="{ 'is-invalid': errors.summary }"
+              class="form-control"
+              placeholder="خلاصه ای از محصول"
+              @input="clearError('summary')"
+          />
+        </div>
+        <small v-if="errors.summary" class="text-danger">
+          {{ errors.summary }}
+        </small>
+      </BCol>
+
+      <BCol md="6">
+        <div class="form-group">
+          <label class="form-label">توضیحات محصول</label>
+          <textarea
+              v-model="form.description"
+              :class="{ 'is-invalid': errors.description }"
+              class="form-control"
+              placeholder="توضیحات محصول"
+              @input="clearError('description')"
+          />
+        </div>
+        <small v-if="errors.description" class="text-danger">
+          {{ errors.description }}
+        </small>
+      </BCol>
+    </BRow>
+
+    <button
+        type="submit"
+        class="btn btn-primary mt-4"
+        :disabled="loading"
+        @click.prevent="submitForm"
+    >
+        <span v-if="loading">
+          <i class="fa fa-spinner fa-spin"></i>
+        </span>
+      <span v-else>ذخیره محصول</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/SpecificationsProduct.vue b/src/components/SpecificationsProduct.vue
new file mode 100644
index 0000000..b65a2e3
--- /dev/null
+++ b/src/components/SpecificationsProduct.vue
@@ -0,0 +1,337 @@
+<script setup>
+import { ref, defineProps, defineEmits, defineExpose } from "vue";
+import ApiService from "@/services/ApiService";
+import { toast } from "vue3-toastify";
+
+const props = defineProps({
+  categoryId: {
+    type: String,
+    required: true,
+  },
+  productId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["nextStep","previousStep"])
+
+const loading = ref(false);
+
+const loadingNewAttr = ref(false);
+
+const loadingNewAttrValue = ref(false);
+
+const loadingSaveSpecification = ref(false);
+
+const attributes = ref([]);
+
+const specifications = ref([{ selectedAttributeId: null, selectedValueId: null }]);
+
+const showAddAttribute = ref(false);
+
+const showAddAttributeValue = ref(null);
+
+const newAttributeTitle = ref("");
+
+const newAttributeValueTitle = ref("");
+
+// Fetch attributes
+const getAttributes = async () => {
+  try {
+    loading.value = true;
+
+    const { data: { data, success } } = await ApiService.get(`admin/attributes`, {
+      params: {
+        category_id: props.categoryId,
+        with_global: 1,
+      },
+    });
+
+    if (success) {
+      attributes.value = data?.filter(attribute => attribute?.translation);
+    }
+  } catch (e) {
+    toast.error(e?.response?.data?.message);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const addSpecification = () => {
+  specifications.value.push({ selectedAttributeId: null, selectedValueId: null });
+};
+
+const getAttributeValues = (attributeId) => {
+  const attribute = attributes.value.find(attr => attr.id === attributeId);
+  return attribute ? attribute.attribute_values.filter(val => val.translation) : [];
+};
+
+const removeRow = async (index) => {
+  if (!specifications.value[index].id) {
+    specifications.value = specifications.value.filter((r,i) => i !== index)
+  } else {
+    try {
+      const { data: { message, success } } = await ApiService.delete(`admin/products/${props.productId}/specifications/${specifications.value[index]?.id}`)
+
+      if (success) {
+        toast.success(message);
+
+        specifications.value = specifications.value.filter((r,i) => i !== index)
+      }
+    } catch (e) {
+      toast.error(e?.response?.data?.message);
+    }
+  }
+}
+
+// Create a new attribute
+const createAttribute = async () => {
+  if (!newAttributeTitle.value.trim()) {
+    toast.error("Attribute title is required");
+    return;
+  }
+
+  try {
+    loadingNewAttr.value = true;
+    const payload = {
+      category_id: props.categoryId,
+      title: newAttributeTitle.value
+    };
+    const { data: { data, success, message } } = await ApiService.post(`admin/attributes`, payload);
+
+    if (success) {
+      attributes.value.push(data);
+      newAttributeTitle.value = "";
+      showAddAttribute.value = false;
+      toast.success(message);
+    }
+  } catch (e) {
+    toast.error(e?.response?.data?.message);
+    console.log(e)
+  } finally {
+    loadingNewAttr.value = false;
+  }
+};
+
+// Create a new attribute value
+const createAttributeValue = async (specIndex) => {
+  if (!newAttributeValueTitle.value.trim()) {
+    toast.error("Attribute value title is required");
+    return;
+  }
+
+  const spec = specifications.value[specIndex];
+  if (!spec.selectedAttributeId) {
+    toast.error("Please select an attribute first");
+    return;
+  }
+
+  try {
+    loadingNewAttrValue.value = true;
+    const payload = {
+      attribute_id: spec.selectedAttributeId,
+      title: newAttributeValueTitle.value
+    };
+    const { data: { data, success, message } } = await ApiService.post(`admin/attribute-values`, payload);
+
+    if (success) {
+      const attribute = attributes.value.find(attr => attr.id === spec.selectedAttributeId);
+      if (attribute) {
+        attribute.attribute_values.push(data);
+      }
+      newAttributeValueTitle.value = "";
+      showAddAttributeValue.value = null;
+      toast.success(message);
+    }
+  } catch (e) {
+    toast.error(e?.response?.data?.message);
+  } finally {
+    loadingNewAttrValue.value = false;
+  }
+};
+
+// Handle attribute selection
+const handleAttributeSelect = (spec) => {
+  if (spec.selectedAttributeId === "add") {
+    showAddAttribute.value = true;
+    spec.selectedAttributeId = null; // Reset to prevent "add" being a valid selection
+  } else {
+    spec.selectedValueId = null; // Reset value when attribute changes
+    showAddAttributeValue.value = null; // Hide any open value input
+  }
+};
+
+// Handle attribute value selection
+const handleAttributeValueSelect = (spec, index) => {
+  if (spec.selectedValueId === "add") {
+    showAddAttributeValue.value = index;
+    spec.selectedValueId = null; // Reset to prevent "add" being a valid selection
+  }
+};
+
+const submitSpecification = async () => {
+  try {
+    loadingSaveSpecification.value = true;
+
+    const { data: { message, success } } = await ApiService.post(
+        `admin/products/${props.productId}/specifications`, {
+      productSpecifications: specifications.value?.map(item => item.selectedValueId).filter(item => item !== null),
+    })
+
+    if (success) {
+      emit('nextStep')
+
+      toast.success(message)
+    }
+  } catch (e) {
+    toast.error(e?.response?.data?.message);
+  } finally {
+    loadingSaveSpecification.value = false;
+  }
+}
+
+// Initialize attributes
+getAttributes();
+
+defineExpose({ specifications })
+</script>
+
+<template>
+  <div>
+    <span v-if="loading" class="d-flex justify-content-center w-100">
+      <i class="fa fa-spinner fa-spin text-2xl"></i>
+    </span>
+
+    <div v-else class="pt-8">
+      <!-- Specifications -->
+      <div v-for="(spec, i) in specifications" :key="i" class="mb-2 d-flex gap-2 align-items-center">
+        <!-- First dropdown: Attributes -->
+        <select
+            v-model="spec.selectedAttributeId"
+            :id="'attr-' + i"
+            class="border rounded px-2 py-1 form-select"
+            :style="{ minWidth: '200px' }"
+            @change="handleAttributeSelect(spec, i)"
+        >
+          <option value="add">افزودن ویژگی</option>
+          <option
+              v-for="attr in attributes"
+              :key="attr.id"
+              :value="attr.id"
+          >
+            {{ attr.translation?.title }}
+          </option>
+        </select>
+
+        <!-- Second dropdown: Attribute Values -->
+        <select
+            v-model="spec.selectedValueId"
+            :id="'value-' + i"
+            class="border rounded px-2 py-1 form-select"
+            :style="{ minWidth: '200px' }"
+            :disabled="!spec.selectedAttributeId"
+            @change="handleAttributeValueSelect(spec, i)"
+        >
+          <option value="add">افزودن مقدار ویژگی</option>
+          <option
+              v-for="value in getAttributeValues(spec.selectedAttributeId)"
+              :key="value.id"
+              :value="value.id"
+          >
+            {{ value?.translation?.title }}
+          </option>
+        </select>
+
+        <button
+            @click="removeRow(i)"
+            class="btn btn-danger btn-outline rounded btn-sm"
+        >
+          <i class="ti ti-trash me-1 text-xl"></i>
+        </button>
+      </div>
+
+      <div class="d-flex justify-content-between">
+        <div v-if="showAddAttribute" class="mt-4 d-flex gap-2 align-items-center">
+          <input
+              v-model="newAttributeTitle"
+              type="text"
+              class="form-control"
+              placeholder="عنوان ویژگی جدید را وارد کنید"
+              :style="{ maxWidth: '400px' }"
+          />
+          <button
+              @click="createAttribute"
+              class="px-4 py-2 btn btn-success text-white rounded text-nowrap"
+              :disabled="loadingNewAttr"
+          >
+             <span v-if="loadingNewAttr">
+               <i class="fa fa-spinner fa-spin text-2xl"></i>
+             </span>
+             <template v-else>
+               ذخیره ویژگی
+             </template>
+          </button>
+          <button
+              @click="showAddAttribute = false; newAttributeTitle = ''"
+              class="px-4 py-2 btn btn-link rounded"
+          >
+            انصراف
+          </button>
+        </div>
+
+        <div v-if="showAddAttributeValue !== null" class="mt-4 d-flex gap-2 align-items-center align-self-start">
+          <input
+              v-model="newAttributeValueTitle"
+              type="text"
+              class="form-control"
+              placeholder="مقدار ویژگی جدید را وارد کنید"
+              :style="{ maxWidth: '400px' }"
+          />
+          <button
+              @click="createAttributeValue(showAddAttributeValue)"
+              class="px-4 py-2 btn btn-success rounded text-nowrap"
+              :disabled="loadingNewAttrValue"
+          >
+             <span v-if="loadingNewAttrValue">
+               <i class="fa fa-spinner fa-spin text-2xl"></i>
+             </span>
+             <template v-else>
+               ذخیره مقدار ویژگی
+             </template>
+          </button>
+          <button
+              @click="showAddAttributeValue = null; newAttributeValueTitle = ''"
+              class="px-4 py-2 btn btn-link rounded"
+          >
+            انصراف
+          </button>
+        </div>
+      </div>
+
+      <button
+          @click="addSpecification"
+          class="mt-4 px-4 py-2 btn btn-primary text-white rounded"
+      >
+        <i class="ti ti-plus"></i>
+        افزودن مشخصات
+      </button>
+
+      <hr class="py-2"/>
+
+      <button
+          :disabled="loadingSaveSpecification"
+          @click="submitSpecification"
+          class="px-4 py-2 btn btn-primary text-white rounded"
+      >
+         <span v-if="loadingSaveSpecification" class="d-flex justify-content-center w-100">
+            <i class="fa fa-spinner fa-spin text-2xl"></i>
+         </span>
+        <template v-else>
+          ذخیره مشخصات
+        </template>
+      </button>
+
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/customSidebar.vue b/src/components/customSidebar.vue
index a12c082..b798fae 100644
--- a/src/components/customSidebar.vue
+++ b/src/components/customSidebar.vue
@@ -264,6 +264,16 @@ export default {
             <span class="pc-mtext">کاربران</span></router-link
           >
         </li>
+
+        <li class="pc-item" :class="{ active: this.$route.path === '/countries' }">
+          <router-link to="/countries" class="pc-link">
+            <span class="pc-micon">
+              <i class="ph-duotone ph-user-circle"></i>
+            </span>
+            <span class="pc-mtext">کشورها</span>
+          </router-link>
+        </li>
+
         <li
           class="pc-item"
           :class="{
@@ -280,6 +290,7 @@ export default {
             <span class="pc-mtext">بنر ها</span></router-link
           >
         </li>
+
         <li class="pc-item" :class="{ active: this.$route.path === '/brands' }">
           <router-link to="/brands" class="pc-link">
             <span class="pc-micon">
@@ -300,17 +311,17 @@ export default {
             <span class="pc-mtext">ویژگی ها</span></router-link
           >
         </li>
-        <li
-          class="pc-item"
-          :class="{ active: this.$route.path === '/idenities' }"
-        >
-          <router-link to="/idenities" class="pc-link">
-            <span class="pc-micon">
-              <i class="ph-duotone ph-barcode"></i>
-            </span>
-            <span class="pc-mtext">مشخصات</span></router-link
-          >
-        </li>
+<!--        <li-->
+<!--          class="pc-item"-->
+<!--          :class="{ active: this.$route.path === '/idenities' }"-->
+<!--        >-->
+<!--          <router-link to="/idenities" class="pc-link">-->
+<!--            <span class="pc-micon">-->
+<!--              <i class="ph-duotone ph-barcode"></i>-->
+<!--            </span>-->
+<!--            <span class="pc-mtext">مشخصات</span></router-link-->
+<!--          >-->
+<!--        </li>-->
         <li
           class="pc-item"
           :class="{
@@ -327,6 +338,7 @@ export default {
             <span class="pc-mtext">بلاگ ها</span></router-link
           >
         </li>
+
         <li
           class="pc-item"
           :class="{
@@ -343,6 +355,7 @@ export default {
             <span class="pc-mtext">محصولات</span></router-link
           >
         </li>
+
         <li
           class="pc-item"
           :class="{
@@ -360,50 +373,47 @@ export default {
           >
         </li>
 
-        <!-- سفاراشات -->
-        <li class="pc-item pc-hasmenu">
-          <BLink
-            class="pc-link"
-            data-bs-toggle="collapse"
-            href="#collapse-orders"
-            role="button"
-            aria-expanded="false"
-            aria-controls="collapse-orders"
-          >
-            <span class="pc-micon">
-              <i class="ph-duotone ph-shopping-cart"></i>
-            </span>
-            <span class="pc-mtext">سفارشات</span>
-            <span class="pc-arrow">
-              <ChevronDownIcon />
-            </span>
-          </BLink>
-          <div class="collapse" id="collapse-orders">
-            <ul class="pc-submenu">
-              <li
-                class="pc-item"
-                :class="{
+        <li
+            class="pc-item"
+            :class="{
                   active:
                     this.$route.path === '/orders' ||
                     this.$route.name === 'singleOrder',
                 }"
-              >
-                <router-link to="/orders" class="pc-link">
-                  <span class="pc-mtext">سفارشات</span></router-link
-                >
-              </li>
-              <li
-                class="pc-item"
-                :class="{ active: this.$route.path === '/approvedOrders' }"
-              >
-                <router-link to="/approvedOrders" class="pc-link">
-                  <span class="pc-mtext">آیتم های تایید شده(عمده)</span></router-link
-                >
-              </li>
-            </ul>
-          </div>
+        >
+          <router-link to="/orders" class="pc-link">
+            <span class="pc-micon">
+              <i class="ph-duotone ph-shopping-cart"></i>
+            </span>
+            <span class="pc-mtext">سفارشات</span>
+          </router-link>
         </li>
 
+        <!-- سفاراشات -->
+<!--        <li class="pc-item pc-hasmenu">-->
+<!--          <BLink-->
+<!--            class="pc-link"-->
+<!--            data-bs-toggle="collapse"-->
+<!--            href="#collapse-orders"-->
+<!--            role="button"-->
+<!--            aria-expanded="false"-->
+<!--            aria-controls="collapse-orders"-->
+<!--          >-->
+<!--            <span class="pc-micon">-->
+<!--              <i class="ph-duotone ph-shopping-cart"></i>-->
+<!--            </span>-->
+<!--            <span class="pc-mtext">سفارشات</span>-->
+<!--            <span class="pc-arrow">-->
+<!--              <ChevronDownIcon />-->
+<!--            </span>-->
+<!--          </BLink>-->
+<!--          <div class="collapse" id="collapse-orders">-->
+<!--            <ul class="pc-submenu">-->
+<!--            -->
+<!--            </ul>-->
+<!--          </div>-->
+<!--        </li>-->
+
         <!-- دسته ها -->
         <!-- <li class="pc-item pc-hasmenu">
           <BLink
@@ -455,6 +465,7 @@ export default {
             <span class="pc-mtext">نظرات</span></router-link
           >
         </li>
+
         <li
           class="pc-item"
           :class="{
@@ -469,6 +480,7 @@ export default {
             <span class="pc-mtext">پرسش و پاسخ</span></router-link
           >
         </li>
+
         <li class="pc-item pc-hasmenu">
           <BLink
             class="pc-link"
diff --git a/src/components/modals/Brands/addBrand.vue b/src/components/modals/Brands/addBrand.vue
index 2c19c15..cf5ed38 100644
--- a/src/components/modals/Brands/addBrand.vue
+++ b/src/components/modals/Brands/addBrand.vue
@@ -21,105 +21,166 @@
           ></button>
         </div>
         <div class="modal-body">
-          <form @submit.prevent="addBrand">
-            <BRow class="g-3">
-              <!-- Brand Title -->
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">عنوان برند</label>
-                  <input
-                    v-model="title"
-                    @input="clearError('title')"
-                    type="text"
-                    class="form-control"
-                    placeholder="عنوان برند"
-                    :class="{ 'is-invalid': errors.title }"
-                  />
-                  <small v-if="errors.title" class="text-danger">
-                    {{ errors.title }}
-                  </small>
-                </div>
-              </BCol>
-
+          <Steppy
+              v-model:step="step"
+              :tabs="[
+                 { title: 'ثبت دسته بندی', isValid: true },
+                 { title: 'ترجمه ها', isValid: true },
+              ]"
+              backText="قبلی"
+              nextText="بعدی"
+              doneText="ذخیره"
+              primaryColor1="#04A9F5"
+              circleSize="45"
+          >
+            <template #1>
               <!-- Brand Image Upload -->
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">تصویر برند</label>
+              <div class="form-group">
+                <label class="form-label">تصویر برند</label>
 
-                  <input
+                <input
                     type="file"
                     accept="image/*"
                     @change="handleImageChange"
                     class="form-control"
                     :class="{ 'is-invalid': errors.image }"
-                  />
+                />
 
-                  <div v-if="imagePreview" class="mt-2">
-                    <img
+                <div v-if="imagePreview" class="mt-2">
+                  <img
                       :src="imagePreview"
                       alt="Image Preview"
                       class="img-fluid rounded shadow-sm Image-Preview"
-                    />
-                    <button
+                  />
+                  <button
                       type="button"
                       @click="removeImage()"
                       class="delete-btn"
-                    >
-                      <i class="fa fa-trash f-16"></i>
-                    </button>
-                  </div>
-
-                  <small v-if="errors.image" class="text-danger">
-                    {{ errors.image }}
-                  </small>
-                </div>
-              </BCol>
-            </BRow>
-
-            <BRow class="g-3">
-              <!-- Brand Description -->
-              <BCol lg="12">
-                <div class="form-group">
-                  <label class="form-label">توضیحات برند</label>
-                  <textarea
-                    v-model="description"
-                    @input="clearError('description')"
-                    type="text"
-                    class="form-control"
-                    placeholder="توضیحات برند"
-                    :class="{ 'is-invalid': errors.description }"
-                  ></textarea>
-                  <small v-if="errors.description" class="text-danger">
-                    {{ errors.description }}
-                  </small>
+                  >
+                    <i class="fa fa-trash f-16"></i>
+                  </button>
                 </div>
-              </BCol>
-            </BRow>
-
-            <!-- Submit Buttons -->
-            <div
-              class="d-flex justify-content-end gap-2"
-              style="margin-top: 20px"
-            >
-              <button
-                type="button"
-                class="btn btn-secondary"
-                data-bs-dismiss="modal"
-                id="close"
+
+                <small v-if="errors.image" class="text-danger">
+                  {{ errors.image }}
+                </small>
+              </div>
+
+              <div
+                  class="d-flex justify-content-end gap-2"
+                  style="margin-top: 20px"
               >
-                بستن
-              </button>
-              <button type="submit" class="btn btn-primary" :disabled="loading">
+                <button :disabled="loadingStep" @click="handlerAddBrand" class="btn btn-primary">
+                  <span
+                      v-if="loadingStep"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                  />
+                  ذخیره
+                </button>
+              </div>
+            </template>
+
+            <template #2>
+              <form @submit.prevent="addBrand">
+                <BRow class="g-3">
+                  <!-- Brand Title -->
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">عنوان برند</label>
+                      <input
+                          v-model="title"
+                          @input="clearError('title')"
+                          type="text"
+                          class="form-control"
+                          placeholder="عنوان برند"
+                          :class="{ 'is-invalid': errors.title }"
+                      />
+                      <small v-if="errors.title" class="text-danger">
+                        {{ errors.title }}
+                      </small>
+                    </div>
+                  </BCol>
+
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب زبان</label>
+                      <select
+                          v-model="locale"
+                          class="form-control"
+                          placeholder="انتخاب کنید"
+                          @change="handlerChangeLocale"
+                      >
+                        <option
+                            key="fa"
+                            value="fa"
+                        >
+                          فارسی
+                        </option>
+                        <option
+                            key="en"
+                            value="en"
+                        >
+                          انگلیسی
+                        </option>
+                        <option
+                            key="ar"
+                            value="ar"
+                        >
+                          عربی
+                        </option>
+                      </select>
+                    </div>
+                  </BCol>
+
+                  <!-- Brand Description -->
+                  <BCol lg="12">
+                    <div class="form-group">
+                      <label class="form-label">توضیحات برند</label>
+                      <textarea
+                          v-model="description"
+                          @input="clearError('description')"
+                          type="text"
+                          class="form-control"
+                          placeholder="توضیحات برند"
+                          :class="{ 'is-invalid': errors.description }"
+                      ></textarea>
+                      <small v-if="errors.description" class="text-danger">
+                        {{ errors.description }}
+                      </small>
+                    </div>
+                  </BCol>
+                </BRow>
+
+                <!-- Submit Buttons -->
+                <div
+                    class="d-flex justify-content-end gap-2"
+                    style="margin-top: 20px"
+                >
+                  <button
+                      type="button"
+                      class="btn btn-secondary"
+                      data-bs-dismiss="modal"
+                      id="close"
+                  >
+                    بستن
+                  </button>
+                  <button type="submit" class="btn btn-primary" :disabled="loading">
                 <span
-                  v-if="loading"
-                  class="spinner-border spinner-border-sm"
-                  role="status"
-                  aria-hidden="true"
+                    v-if="loading"
+                    class="spinner-border spinner-border-sm"
+                    role="status"
+                    aria-hidden="true"
                 ></span>
-                ذخیره
-              </button>
-            </div>
-          </form>
+                    ذخیره
+                  </button>
+                </div>
+              </form>
+            </template>
+          </Steppy>
+
+
         </div>
       </div>
     </div>
@@ -131,13 +192,19 @@ import { ref } from "vue";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import ApiServiece from "@/services/ApiService";
+import {Steppy} from "vue3-steppy";
 
 export default {
+  components: {Steppy},
   setup(props, { emit }) {
     const image = ref(null);
     const imagePreview = ref(null);
     const description = ref();
     const title = ref();
+    const loadingStep = ref(false);
+    const step = ref(1);
+    const brandId = ref(null);
+    const locale = ref('fa');
 
     const errors = ref({});
     const loading = ref(false);
@@ -150,8 +217,6 @@ export default {
       if (fileInput) {
         fileInput.value = "";
       }
-
-      console.log(image.value);
     };
     const handleImageChange = (event) => {
       const file = event.target.files[0];
@@ -204,14 +269,14 @@ export default {
       }
       loading.value = true;
 
-      const formData = new FormData();
-      formData.append("title", title.value);
-      formData.append("description", description.value);
-      formData.append("image", image.value);
-      console.log(image.value);
-      ApiServiece.post(`admin/brands`, formData, {
+      const params = {
+        title: title.value,
+        description: description.value,
+        locale: locale.value,
+      }
+
+      ApiServiece.post(`admin/brands/${brandId.value}/translations`, params, {
         headers: {
-          "content-type": "multipart",
           Authorization: `Bearer ${localStorage.getItem("token")}`,
         },
       })
@@ -224,11 +289,9 @@ export default {
         })
         .then(() => {
           setTimeout(() => {
-            document.getElementById("close").click();
             emit("brand-updated");
             title.value = "";
             description.value = "";
-            image.value = null;
             imagePreview.value = null;
           }, 500);
         })
@@ -244,6 +307,44 @@ export default {
         });
     };
 
+    const handlerAddBrand = async () => {
+      if (!image.value) {
+        toast.error('تصویر برند نمی تواند خالی باشد.')
+
+        return
+      }
+
+      try {
+        loadingStep.value = true;
+
+        const formData = new FormData();
+
+        formData.append("image", image.value);
+
+        const { data: { message, success, data } } = await ApiServiece.post(
+            `admin/brands`,
+            formData,
+            {
+              headers: {
+                "content-type": "multipart",
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+              },
+            })
+
+        if (success) {
+          toast.success(message)
+
+          brandId.value = data?.id
+
+          step.value++
+        }
+      } catch (e) {
+        toast.error(e?.response?.data?.message)
+      } finally {
+        loadingStep.value = false;
+      }
+    }
+
     return {
       errors,
       loading,
@@ -255,6 +356,11 @@ export default {
       removeImage,
       title,
       description,
+      loadingStep,
+      step,
+      handlerAddBrand,
+      brandId,
+      locale
     };
   },
 };
diff --git a/src/components/modals/Brands/editBrand.vue b/src/components/modals/Brands/editBrand.vue
index 5453fc5..d39aada 100644
--- a/src/components/modals/Brands/editBrand.vue
+++ b/src/components/modals/Brands/editBrand.vue
@@ -20,99 +20,157 @@
           ></button>
         </div>
         <div class="modal-body">
-          <form @submit.prevent="editBrand">
-            <BRow class="g-3">
-              <!-- Brand Title -->
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">عنوان برند</label>
-                  <input
-                    v-model="localTitle"
-                    @input="clearError('localTitle')"
-                    type="text"
-                    class="form-control"
-                    placeholder="عنوان برند"
-                    :class="{ 'is-invalid': errors.localTitle }"
-                  />
-                  <small v-if="errors.localTitle" class="text-danger">
-                    {{ errors.localTitle }}
-                  </small>
-                </div>
-              </BCol>
-
-              <!-- Brand Image Upload -->
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">تصویر برند</label>
+          <BTabs>
+            <BTab title="بارگذاری تصویر برند">
+              <div class="form-group mt-4">
+                <label class="form-label">تصویر برند</label>
 
-                  <input
+                <input
                     type="file"
                     @input="clearError('localImage')"
                     accept="image/*"
                     @change="handleImageChange"
                     class="form-control"
                     :class="{ 'is-invalid': errors.localImage }"
-                  />
+                />
 
-                  <div v-if="imagePreview" class="mt-2">
-                    <img
+                <div v-if="imagePreview" class="mt-2">
+                  <img
                       :src="imagePreview"
                       alt="Image Preview"
                       class="img-fluid rounded shadow-sm Image-Preview"
-                    />
-                  </div>
-
-                  <small v-if="errors.localImage" class="text-danger">
-                    {{ errors.localImage }}
-                  </small>
-                </div>
-              </BCol>
-            </BRow>
-
-            <BRow class="g-3">
-              <!-- Brand Description -->
-              <BCol lg="12">
-                <div class="form-group">
-                  <label class="form-label">توضیحات برند</label>
-                  <textarea
-                    v-model="localDesc"
-                    @input="clearError('localDesc')"
-                    type="text"
-                    class="form-control"
-                    placeholder="توضیحات برند"
-                    :class="{ 'is-invalid': errors.localDesc }"
-                  ></textarea>
-                  <small v-if="errors.localDesc" class="text-danger">
-                    {{ errors.localDesc }}
-                  </small>
+                  />
                 </div>
-              </BCol>
-            </BRow>
-
-            <!-- Submit Buttons -->
-            <div
-              class="d-flex justify-content-end gap-2"
-              style="margin-top: 20px"
-            >
-              <button
-                type="button"
-                class="btn btn-secondary"
-                data-bs-dismiss="modal"
-                id="closeEdit"
+
+                <small v-if="errors.localImage" class="text-danger">
+                  {{ errors.localImage }}
+                </small>
+              </div>
+
+              <div
+                  class="d-flex justify-content-end gap-2"
+                  style="margin-top: 20px"
               >
-                بستن
-              </button>
-              <button type="submit" class="btn btn-primary" :disabled="loading">
-                <span
-                  v-if="loading"
-                  class="spinner-border spinner-border-sm"
-                  role="status"
-                  aria-hidden="true"
-                ></span>
-                ذخیره
-              </button>
-            </div>
-          </form>
+                <button :disabled="loadingImage" @click="editImageBrand" class="btn btn-primary">
+                  <span
+                      v-if="loadingImage"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                  />
+                  ذخیره
+                </button>
+              </div>
+            </BTab>
+            <BTab title="ترجمه ها">
+              <form @submit.prevent="editBrand" class="mt-4">
+                <BButton
+                    :disabled="!findLocaleTranslation"
+                    :loading="loadingDelete"
+                    @click="handlerRemoveTranslation"
+                    class="btn btn-sm rounded btn-danger d-block"
+                    style="margin-right: auto"
+                >
+                  حذف ترجمه {{ findLocaleTranslation }}
+                </BButton>
+
+                <BRow class="g-3">
+                  <!-- Brand Title -->
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">عنوان برند</label>
+                      <input
+                          v-model="localTitle"
+                          @input="clearError('localTitle')"
+                          type="text"
+                          class="form-control"
+                          placeholder="عنوان برند"
+                          :class="{ 'is-invalid': errors.localTitle }"
+                      />
+                      <small v-if="errors.localTitle" class="text-danger">
+                        {{ errors.localTitle }}
+                      </small>
+                    </div>
+                  </BCol>
+
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب زبان</label>
+                      <select
+                          v-model="locale"
+                          class="form-control"
+                          placeholder="انتخاب کنید"
+                          @change="handlerChangeLocale"
+                      >
+                        <option
+                            key="fa"
+                            value="fa"
+                        >
+                          فارسی
+                        </option>
+                        <option
+                            key="en"
+                            value="en"
+                        >
+                          انگلیسی
+                        </option>
+                        <option
+                            key="ar"
+                            value="ar"
+                        >
+                          عربی
+                        </option>
+                      </select>
+                    </div>
+                  </BCol>
+                </BRow>
+
+                <BRow class="g-3">
+                  <!-- Brand Description -->
+                  <BCol lg="12">
+                    <div class="form-group">
+                      <label class="form-label">توضیحات برند</label>
+                      <textarea
+                          v-model="localDesc"
+                          @input="clearError('localDesc')"
+                          type="text"
+                          class="form-control"
+                          placeholder="توضیحات برند"
+                          :class="{ 'is-invalid': errors.localDesc }"
+                      ></textarea>
+                      <small v-if="errors.localDesc" class="text-danger">
+                        {{ errors.localDesc }}
+                      </small>
+                    </div>
+                  </BCol>
+                </BRow>
+
+                <!-- Submit Buttons -->
+                <div
+                    class="d-flex justify-content-end gap-2"
+                    style="margin-top: 20px"
+                >
+                  <button
+                      type="button"
+                      class="btn btn-secondary"
+                      data-bs-dismiss="modal"
+                      id="closeEdit"
+                  >
+                    بستن
+                  </button>
+                  <button type="submit" class="btn btn-primary" :disabled="loading">
+                    <span
+                        v-if="loading"
+                        class="spinner-border spinner-border-sm"
+                        role="status"
+                        aria-hidden="true"
+                    ></span>
+                    ذخیره
+                  </button>
+                </div>
+              </form>
+            </BTab>
+          </BTabs>
         </div>
       </div>
     </div>
@@ -120,13 +178,15 @@
 </template>
 
 <script>
-import { ref, toRef, watch } from "vue";
+import {computed, ref, toRef, watch} from "vue";
 import ApiServiece from "@/services/ApiService";
 
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
+import {BTabs} from "bootstrap-vue-next";
 
 export default {
+  components: {BTabs},
   props: {
     id: {
       type: String,
@@ -144,6 +204,10 @@ export default {
       type: String,
       required: true,
     },
+    brandRow: {
+      type: Object,
+      required: true,
+    },
   },
 
   setup(props, { emit }) {
@@ -152,9 +216,50 @@ export default {
     const localDesc = toRef(props.description);
     const localImage = toRef(props.image);
     const image = ref(null);
-    const localId = toRef(props.id);
     const errors = ref({});
     const loading = ref(false);
+    const loadingImage = ref(false);
+    const locale = ref('fa');
+    const loadingDelete = ref(false);
+
+    const brandRowModel = computed({
+      get: () => props.brandRow,
+      set: (newValue) => emit('update:categoryRow', newValue)
+    });
+
+    watch(
+        () => props.brandRow,
+        (newVal) => {
+          localTitle.value = newVal?.translation?.title
+
+          localDesc.value = newVal?.translation?.description
+
+          locale.value = newVal?.translation?.locale
+
+          imagePreview.value = newVal?.image
+        }
+    )
+
+    const findLocaleTranslation = computed(() => {
+      const foundTranslation = brandRowModel.value?.translations?.find(
+          item => item?.locale === locale.value
+      );
+
+      if (foundTranslation) {
+        switch (foundTranslation?.locale) {
+          case "en":
+            return "انگلیسی";
+          case "fa":
+            return "فارسی";
+          case "ar":
+            return "عربی";
+          default:
+            return null;
+        }
+      }
+
+      return null;
+    });
 
     const handleImageChange = (event) => {
       const file = event.target.files[0];
@@ -178,27 +283,6 @@ export default {
       }
     };
 
-    watch(
-      () => props.title,
-      (newVal) => (localTitle.value = newVal)
-    );
-    watch(
-      () => props.description,
-      (newVal) => (localDesc.value = newVal)
-    );
-    watch(
-      () => props.image,
-      (newVal) => {
-        localImage.value = newVal;
-        imagePreview.value = newVal;
-      }
-    );
-
-    watch(
-      () => props.id,
-      (newVal) => (localId.value = newVal)
-    );
-
     const validateForm = () => {
       errors.value = {};
       if (!localTitle.value)
@@ -215,7 +299,7 @@ export default {
       errors.value[field] = "";
     };
 
-    const editBrand = () => {
+    const editBrand = async () => {
       if (!validateForm()) {
         toast.error("لطفا فیلد های لازم را وارد نمایید", {
           position: "top-right",
@@ -223,47 +307,140 @@ export default {
         });
         return;
       }
-      loading.value = true;
 
-      const formData = new FormData();
-      formData.append("title", localTitle.value);
-      formData.append("description", localDesc.value);
+      try {
+        loading.value = true;
+
+        const params = { title: localTitle.value, description: localDesc.value, locale: locale.value };
+
+        const existingTranslation = brandRowModel.value?.translations?.find(
+            t => t.locale === locale.value
+        );
+
+        const { data } = existingTranslation
+            ? await ApiServiece.put(
+                `admin/brands/${brandRowModel.value?.id}/translations/${existingTranslation?.id}`,
+                params,
+                {
+                  headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            )
+            : await ApiServiece.post(
+                `admin/brands/${brandRowModel.value?.id}/translations`,
+                params,
+                {
+                  headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            );
+
+        if (data?.success) {
+          const updatedBrands = brandRowModel.value ? {...brandRowModel.value} : null;
+
+          if (updatedBrands) {
+            updatedBrands.translations = [...(updatedBrands.translations || []), data?.data];
+
+            brandRowModel.value = updatedBrands;
+          }
+
+          toast.success(data?.message)
 
-      if (image.value) {
-        formData.append("image", image.value);
-      }
-      formData.append("_method", "put");
-
-      ApiServiece.post(`admin/brands/${localId.value}`, formData, {
-        headers: {
-          "content-type": "multipart",
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
-      })
-        .then(() => {
-          toast.success("!برند با موفقیت ویرایش شد", {
-            position: "top-right",
-            autoClose: 1000,
-          });
-        })
-        .then(() => {
           setTimeout(() => {
-            document.getElementById("closeEdit").click();
-            emit("brand-updated");
-          }, 500);
-        })
-        .catch((error) => {
-          console.error(error);
-          toast.error(`${error.response.data.message}`, {
-            position: "top-right",
-            autoClose: 1000,
-          });
-        })
-        .finally(() => {
-          loading.value = false;
+            emit("cat-updated");
+          }, 500)
+        }
+
+      } catch (error) {
+        toast.error(`${error?.response?.data?.message}`, {
+          position: "top-right",
+          autoClose: 1000,
         });
+      } finally {
+        loading.value = false;
+      }
     };
 
+    const editImageBrand = async () => {
+      try {
+        loadingImage.value = true;
+
+        const formData = new FormData();
+
+        formData.append("image", image.value);
+
+        formData.append("_method", 'put');
+
+        const { data: { message, success } } = await ApiServiece.post(
+            `admin/brands/${brandRowModel.value?.id}`,
+            formData,
+            {
+              headers: {
+                "content-type": "multipart",
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+              },
+            })
+
+        if (success) {
+          toast.success(message)
+        }
+      } catch (e) {
+        toast.error(e?.response?.data?.message)
+      } finally {
+        loadingImage.value = false;
+      }
+    }
+
+    const handlerRemoveTranslation = async () => {
+      const findLocale = brandRowModel.value?.translations?.find(item => item?.locale === locale.value);
+
+      if (findLocale) {
+        try {
+          loadingDelete.value = true;
+
+          const { data: { success, message, data } } = await ApiServiece.delete(
+              `admin/brands/${brandRowModel.value?.id}/translations/${findLocale?.id}`
+          )
+
+          if (success) {
+            const updatedBrands = brandRowModel.value ? {...brandRowModel.value} : null;
+
+            if (updatedBrands) {
+              updatedBrands.translations = [...(updatedBrands.translations || []), data];
+
+              brandRowModel.value = updatedBrands;
+            }
+
+            localTitle.value = null
+
+            localDesc.value = null
+
+            toast.success(message)
+          }
+        } catch (e) {
+          console.log(e)
+        }finally {
+          loadingDelete.value = false
+        }
+      }
+    }
+
+    const handlerChangeLocale = (e) => {
+      const findLocale = brandRowModel.value?.translations?.find(item => item?.locale === e.target.value);
+
+      if (findLocale) {
+        localTitle.value = findLocale?.title
+
+        localDesc.value = findLocale?.description
+      } else {
+        localTitle.value = undefined
+
+        localDesc.value = undefined
+      }
+    }
+
     return {
       errors,
       loading,
@@ -274,6 +451,13 @@ export default {
       localImage,
       handleImageChange,
       imagePreview,
+      locale,
+      loadingImage,
+      editImageBrand,
+      findLocaleTranslation,
+      handlerRemoveTranslation,
+      loadingDelete,
+      handlerChangeLocale
     };
   },
 };
diff --git a/src/components/modals/addUser.vue b/src/components/modals/addUser.vue
index 89d913f..4190ffe 100644
--- a/src/components/modals/addUser.vue
+++ b/src/components/modals/addUser.vue
@@ -103,6 +103,8 @@
                   }}</small>
                 </div>
               </BCol>
+
+              <ConfigCountriesSelect v-model:country-code="selectedCountryCode"/>
             </BRow>
 
             <!-- Submit Buttons -->
@@ -137,20 +139,22 @@
 
 <script>
 import { ref } from "vue";
-
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import ApiServiece from "@/services/ApiService";
+import ConfigCountriesSelect from "@/components/ConfigCountriesSelect.vue";
+
 export default {
+  components: {ConfigCountriesSelect},
   setup(props, { emit }) {
     const name = ref();
     const mobile = ref();
     const password = ref();
     const repeatPassword = ref();
     const role = ref();
-
     const errors = ref({});
     const loading = ref(false);
+    const selectedCountryCode = ref('');
 
     const validateForm = () => {
       errors.value = {};
@@ -165,7 +169,7 @@ export default {
         errors.value.password = "رمز عبور باید حداقل 8 کاراکتر باشد";
       } else if (repeatPassword.value.length < 8) {
         errors.value.repeatPassword =
-          "تکرار رمز عبور باید حداقل 8 کاراکتر باشد";
+            "تکرار رمز عبور باید حداقل 8 کاراکتر باشد";
       }
       return Object.keys(errors.value).length === 0;
     };
@@ -187,38 +191,40 @@ export default {
       const formData = new FormData();
       formData.append("mobile", mobile.value);
       if (name.value)
-       formData.append("name", name.value);
+        formData.append("name", name.value);
       formData.append("role", role.value);
       formData.append("password", password.value);
       formData.append("password_confirmation", repeatPassword.value);
+      formData.append("country_config_id", selectedCountryCode.value);
 
       ApiServiece.post(`admin/users`, formData)
-        .then(() => {
-          toast.success("!کاربر با موفقیت اضافه شد", {
-            position: "top-right",
-            autoClose: 1000,
-          });
-          mobile.value = "";
-          name.value = "";
-          role.value = "";
-          password.value = "";
-          repeatPassword.value = "";
-        })
-        .then(() => {
-          setTimeout(() => {
-            document.getElementById("addClose").click();
-            emit("user-updated");
-          }, 500);
-        })
-        .catch((error) => {
-          toast.error(`${error.response.data.message}`, {
-            position: "top-right",
-            autoClose: 1000,
+          .then(() => {
+            toast.success("!کاربر با موفقیت اضافه شد", {
+              position: "top-right",
+              autoClose: 1000,
+            });
+            mobile.value = "";
+            name.value = "";
+            role.value = "";
+            password.value = "";
+            repeatPassword.value = "";
+            selectedCountryCode.value = "";
+          })
+          .then(() => {
+            setTimeout(() => {
+              document.getElementById("addClose").click();
+              emit("user-updated");
+            }, 500);
+          })
+          .catch((error) => {
+            toast.error(`${error.response.data.message}`, {
+              position: "top-right",
+              autoClose: 1000,
+            });
+          })
+          .finally(() => {
+            loading.value = false;
           });
-        })
-        .finally(() => {
-          loading.value = false;
-        });
     };
 
     return {
@@ -231,6 +237,7 @@ export default {
       password,
       repeatPassword,
       role,
+      selectedCountryCode,
     };
   },
 };
diff --git a/src/components/modals/attribute-value/addAttributeValue.vue b/src/components/modals/attribute-value/addAttributeValue.vue
new file mode 100644
index 0000000..2ebb816
--- /dev/null
+++ b/src/components/modals/attribute-value/addAttributeValue.vue
@@ -0,0 +1,360 @@
+<script setup>
+import { ref } from "vue"
+import {Steppy} from "vue3-steppy";
+import ApiServiece from "@/services/ApiService";
+import {toast} from "vue3-toastify";
+import {BRow} from "bootstrap-vue-next";
+import { useRoute } from "vue-router";
+
+// eslint-disable-next-line no-undef
+const emit = defineEmits(['attribute-updated']);
+
+const route = useRoute();
+
+const attributes = ref([])
+
+const step = ref(1)
+
+const attrId = ref(null)
+
+const errors = ref({})
+
+const colorCode = ref();
+
+const attrName = ref(null);
+
+const loading = ref(false);
+
+const loadingAttr = ref(false);
+
+const locale = ref('fa');
+
+const attrModel = ref(null)
+
+const getAttributes = async () => {
+  try {
+    const { data: { success, data } } = await ApiServiece.get(`admin/attributes`)
+
+    if (success) {
+      attributes.value = data;
+    }
+  } catch (e) {
+    toast.error(e?.response?.data?.message)
+  }
+}
+
+const clearError = (field) => {
+  errors.value[field] = "";
+}
+
+const handlerSubmitAttr = async () => {
+  try {
+    loading.value = true;
+
+    const { data: { success, message, data } } = await ApiServiece.post(`admin/attribute-values`,{
+      code: colorCode.value,
+      attribute_id: route?.params?.id,
+    })
+
+    if (success) {
+      toast.success(message)
+
+      attrId.value = data?.id
+
+      step.value++
+    }
+  } catch (e) {
+    toast.error(e?.response?.data?.message)
+  } finally {
+    loading.value = false;
+  }
+}
+
+const addAttribute = async () => {
+  try {
+    loadingAttr.value = true;
+
+    const params = {
+      title: attrName.value,
+      locale: locale.value,
+    }
+
+    const { data: { success, message, data } } = await ApiServiece.post(
+        `admin/attribute-values/${attrId.value}/translations`,
+        params
+    )
+
+    if (success) {
+      toast.success(message)
+      //document.getElementById("close").click();
+      emit("attribute-updated");
+
+      attrModel.value = data
+
+      attrName.value = undefined
+    }
+  } catch (e) {
+    toast.error(e?.response?.data?.message)
+  } finally {
+    loadingAttr.value = false;
+  }
+}
+
+getAttributes()
+</script>
+
+<template>
+  <div
+      class="modal fade"
+      id="addAttributeValue"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+  >
+    <div class="modal-dialog modal-sm" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">
+            اضافه کردن مقدار ویژگی جدید
+          </h5>
+          <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+          ></button>
+        </div>
+
+        <div class="modal-body">
+          <Steppy
+              v-model:step="step"
+              :tabs="[
+                 { title: 'انتخاب ویژگی و رنگ', isValid: true },
+                 { title: 'ترجمه ها', isValid: true },
+              ]"
+              backText="قبلی"
+              nextText="بعدی"
+              doneText="ذخیره"
+              primaryColor1="#04A9F5"
+              circleSize="45"
+          >
+            <template #1>
+              <BRow>
+<!--                <BCol lg="6">-->
+<!--                  <div class="form-group">-->
+<!--                    <label class="form-label">ویژگی ها</label>-->
+<!--                    <select-->
+<!--                        v-model="attrId"-->
+<!--                        class="form-control"-->
+<!--                        placeholder="دسته بندی انتخاب کنید"-->
+<!--                    >-->
+<!--                      <option-->
+<!--                          v-for="attribute in attributes"-->
+<!--                          :key="attribute?.id"-->
+<!--                          :value="attribute?.id"-->
+<!--                      >-->
+<!--                        {{ attribute?.translation?.title ?? 'بدون نام' }}-->
+<!--                      </option>-->
+<!--                    </select>-->
+<!--                  </div>-->
+<!--                </BCol>-->
+
+                <BCol>
+                  <div class="form-group">
+                    <label class="form-label">انتخاب رنگ</label>
+                    <div class="color-picker-wrapper">
+                      <input
+                          v-model="colorCode"
+                          @input="clearError('colorCode')"
+                          type="color"
+                          class="form-control color-picker"
+                          :class="{ 'is-invalid': errors.colorCode }"
+                      />
+                      <span
+                          v-if="colorCode"
+                          class="color-display"
+                          :style="{ backgroundColor: colorCode }"
+                      ></span>
+                    </div>
+                    <span> {{ colorCode }}</span>
+
+                    <small v-if="errors.colorCode" class="text-danger">
+                      {{ errors.colorCode }}
+                    </small>
+                  </div>
+                </BCol>
+              </BRow>
+
+              <!-- Submit Buttons -->
+              <div
+                  class="d-flex justify-content-end gap-2"
+                  style="margin-top: 20px"
+              >
+                <button
+                    class="btn btn-secondary"
+                    data-bs-dismiss="modal"
+                    id="close"
+                >
+                  بستن
+                </button>
+
+                <button @click="handlerSubmitAttr" class="btn btn-primary" :disabled="loading">
+                  <span
+                      v-if="loading"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                  />
+                  ذخیره
+                </button>
+              </div>
+            </template>
+
+            <template #2>
+              <form @submit.prevent="addAttribute">
+                <BRow class="g-3">
+                  <!-- Brand Title -->
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">مقدار ویژگی</label>
+
+                      <input
+                          v-model="attrName"
+                          @input="clearError('attrName')"
+                          type="text"
+                          class="form-control"
+                          placeholder="عنوان ویژگی"
+                          :class="{ 'is-invalid': errors.attrName }"
+                      />
+                      <small v-if="errors.attrName" class="text-danger">
+                        {{ errors.attrName }}
+                      </small>
+                    </div>
+                  </BCol>
+
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب زبان</label>
+                      <select
+                          v-model="locale"
+                          class="form-control"
+                          placeholder="انتخاب کنید"
+                      >
+                        <option
+                            key="fa"
+                            value="fa"
+                        >
+                          فارسی
+                        </option>
+                        <option
+                            key="en"
+                            value="en"
+                        >
+                          انگلیسی
+                        </option>
+                        <option
+                            key="ar"
+                            value="ar"
+                        >
+                          عربی
+                        </option>
+                      </select>
+                    </div>
+                  </BCol>
+                </BRow>
+
+                <div
+                    class="d-flex justify-content-end gap-2"
+                    style="margin-top: 20px"
+                >
+                  <button
+                      class="btn btn-secondary"
+                      data-bs-dismiss="modal"
+                      id="close"
+                  >
+                    بستن
+                  </button>
+
+                  <button type="submit" class="btn btn-primary" :disabled="loadingAttr">
+                  <span
+                      v-if="loadingAttr"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                  />
+                    ذخیره
+                  </button>
+                </div>
+              </form>
+            </template>
+          </Steppy>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-dialog {
+  max-width: 50%;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+.modal-body {
+  padding: 20px;
+  padding: 1rem 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.input-group {
+  margin-top: 0.5rem;
+}
+
+.modal-dialog {
+  max-width: 50%;
+}
+
+.modal-content {
+  padding: 1.5rem;
+}
+
+.modal-header {
+  border-bottom: 1px solid #dee2e6;
+  padding-bottom: 1rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.color-picker-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.color-picker {
+  width: 300px;
+  height: 45px;
+  padding: 0;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.color-display {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  display: inline-block;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/modals/attribute-value/editAttributeValue.vue b/src/components/modals/attribute-value/editAttributeValue.vue
new file mode 100644
index 0000000..868dc48
--- /dev/null
+++ b/src/components/modals/attribute-value/editAttributeValue.vue
@@ -0,0 +1,444 @@
+<script setup>
+import { computed, ref, watch, defineProps, defineEmits } from "vue"
+import { BRow } from "bootstrap-vue-next";
+import {toast} from "vue3-toastify";
+import ApiServiece from "@/services/ApiService";
+
+const colorCode = ref(null)
+const errors = ref({})
+const loading = ref(false)
+const attrName = ref(null)
+const locale = ref('fa')
+const loadingDelete = ref(false)
+
+const props = defineProps({
+  attrRow: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:categoryRow'])
+
+const attrRowModel = computed({
+  get: () => props.attrRow,
+  set: (newValue) => emit('update:categoryRow', newValue)
+});
+
+watch(
+    () => props.attrRow,
+    (newVal) => {
+      colorCode.value = newVal?.code
+
+      attrName.value = newVal?.translation?.title
+
+      locale.value = newVal?.translation?.locale
+    }
+)
+
+const findLocaleTranslation = computed(() => {
+  const foundTranslation = attrRowModel.value?.translations?.find(
+      item => item?.locale === locale.value
+  );
+
+  if (foundTranslation) {
+    switch (foundTranslation?.locale) {
+      case "en":
+        return "انگلیسی";
+      case "fa":
+        return "فارسی";
+      case "ar":
+        return "عربی";
+      default:
+        return null;
+    }
+  }
+
+  return null;
+});
+
+const handlerChangeLocale = (e) => {
+  const findLocale = attrRowModel.value?.translations?.find(item => item?.locale === e.target.value);
+
+  if (findLocale) {
+    attrName.value = findLocale?.title
+  } else {
+    attrName.value = undefined
+  }
+}
+
+const editAttribute = async () => {
+  if (!validateForm()) {
+    toast.error("لطفا فیلد های لازم را وارد نمایید", {
+      position: "top-right",
+      autoClose: 1000,
+    });
+    return;
+  }
+
+  try {
+    loading.value = true;
+
+    const params = { title: attrName.value, locale: locale.value };
+
+    const existingTranslation = attrRowModel.value?.translations?.find(
+        t => t.locale === locale.value
+    );
+
+    const { data } = existingTranslation
+        ? await ApiServiece.put(
+            `admin/attribute-values/${attrRowModel.value?.id}/translations/${existingTranslation?.id}`,
+            params,
+            {
+              headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+              },
+            }
+        )
+        : await ApiServiece.post(
+            `admin/attribute-values/${attrRowModel.value?.id}/translations`,
+            params,
+            {
+              headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+              },
+            }
+        );
+
+    if (data?.success) {
+      const updatedCategory = props.attrRow;
+
+      if (existingTranslation) {
+        updatedCategory.translations = data?.data?.translations || [];
+      } else {
+        updatedCategory.translations = [
+          ...(updatedCategory.translations || []),
+          ...(data?.data?.translations || [])
+        ];
+      }
+
+      attrRowModel.value = updatedCategory;
+
+      toast.success(data?.message)
+
+      emit("cat-updated");
+    }
+
+  } catch (error) {
+    toast.error(`${error?.response?.data?.message}`, {
+      position: "top-right",
+      autoClose: 1000,
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const validateForm = () => {
+  errors.value = {};
+  if (!attrName.value)
+    errors.value.colorName = "وارد کردن مقدار ویژگی ضروری می باشد";
+  if (!locale.value)
+    errors.value.colorCode = "انتخاب زبان ضروری می باشد";
+
+  return Object.keys(errors.value).length === 0;
+};
+
+const handlerRemoveTranslation = async () => {
+  const findLocale = attrRowModel.value?.translations?.find(item => item?.locale === locale.value);
+
+  if (findLocale) {
+    try {
+      loadingDelete.value = true;
+
+      const { data: { success, message, data } } = await ApiServiece.delete(
+          `admin/attribute-values/${attrRowModel.value?.id}/translations/${findLocale?.id}`
+      )
+
+      if (success) {
+        const updatedCategory = props.attrRow;
+
+        if (findLocale) {
+          updatedCategory.translations = data?.data?.translations || [];
+        } else {
+          updatedCategory.translations = [
+            ...(updatedCategory.translations || []),
+            ...(data?.data?.translations || [])
+          ];
+        }
+
+        attrRowModel.value = updatedCategory;
+
+        attrName.value = null
+
+        toast.success(message)
+      }
+    } catch (e) {
+      toast.error(e?.response?.data?.message)
+    }finally {
+      loadingDelete.value = false
+    }
+  }
+}
+
+const clearError = (field) => {
+  errors.value[field] = "";
+}
+
+// const handlerSubmitColor = async () => {
+//   try {
+//     loading.value = true
+//
+//     const { data: { message, success } } = await ApiService.put(
+//       `admin/attribute-values/${attrRowModel.value?.id}`, {
+//       code: colorCode.value,
+//     })
+//
+//     if (success) {
+//       toast.success(message)
+//     }
+//   } catch (e) {
+//     toast.error(e?.response?.data?.message)
+//   } finally {
+//     loading.value = false
+//   }
+// }
+</script>
+
+<template>
+  <div
+      class="modal fade"
+      id="editAttributeValue"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+  >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">
+            ویرایش مقدار ویژگی
+          </h5>
+          <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+          ></button>
+        </div>
+
+        <div class="modal-body">
+          <form @submit.prevent="editAttribute" class="mt-5">
+
+            <BButton
+                :disabled="!findLocaleTranslation"
+                :loading="loadingDelete"
+                @click="handlerRemoveTranslation"
+                class="btn btn-sm rounded btn-danger d-block"
+                style="margin-right: auto"
+            >
+              حذف ترجمه {{ findLocaleTranslation }}
+            </BButton>
+
+            <BRow class="g-3">
+              <!-- Brand Title -->
+              <BCol lg="6">
+                <div class="form-group">
+                  <label class="form-label">مقدار ویژگی</label>
+
+                  <input
+                      v-model="attrName"
+                      @input="clearError('attrName')"
+                      type="text"
+                      class="form-control"
+                      placeholder="عنوان ویژگی"
+                      :class="{ 'is-invalid': errors.attrName }"
+                  />
+                  <small v-if="errors.attrName" class="text-danger">
+                    {{ errors.attrName }}
+                  </small>
+                </div>
+              </BCol>
+
+              <BCol lg="6">
+                <div class="form-group">
+                  <label class="form-label">انتخاب زبان</label>
+                  <select
+                      v-model="locale"
+                      class="form-control"
+                      placeholder="انتخاب کنید"
+                      @change="handlerChangeLocale"
+                  >
+                    <option
+                        key="fa"
+                        value="fa"
+                    >
+                      فارسی
+                    </option>
+                    <option
+                        key="en"
+                        value="en"
+                    >
+                      انگلیسی
+                    </option>
+                    <option
+                        key="ar"
+                        value="ar"
+                    >
+                      عربی
+                    </option>
+                  </select>
+                </div>
+              </BCol>
+            </BRow>
+
+            <div
+                class="d-flex justify-content-end gap-2"
+                style="margin-top: 20px"
+            >
+              <button
+                  class="btn btn-secondary"
+                  data-bs-dismiss="modal"
+                  id="close"
+              >
+                بستن
+              </button>
+
+              <button type="submit" class="btn btn-primary" :disabled="loading">
+                  <span
+                      v-if="loading"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                  />
+                ذخیره
+              </button>
+            </div>
+          </form>
+<!--          <BTabs>-->
+<!--            <BTab title="انتخاب رنگ">-->
+<!--              <BRow>-->
+<!--                <BCol class="mt-5">-->
+<!--                  <div class="form-group">-->
+<!--                    <label class="form-label">انتخاب رنگ</label>-->
+<!--                    <div class="color-picker-wrapper">-->
+<!--                      <input-->
+<!--                          v-model="colorCode"-->
+<!--                          @input="clearError('colorCode')"-->
+<!--                          type="color"-->
+<!--                          class="form-control color-picker"-->
+<!--                          :class="{ 'is-invalid': errors.colorCode }"-->
+<!--                      />-->
+<!--                      <span-->
+<!--                          v-if="colorCode"-->
+<!--                          class="color-display"-->
+<!--                          :style="{ backgroundColor: colorCode }"-->
+<!--                      ></span>-->
+<!--                    </div>-->
+<!--                    <span>{{ colorCode }}</span>-->
+
+<!--                    <small v-if="errors.colorCode" class="text-danger">-->
+<!--                      {{ errors.colorCode }}-->
+<!--                    </small>-->
+<!--                  </div>-->
+<!--                </BCol>-->
+<!--              </BRow>-->
+
+<!--              &lt;!&ndash; Submit Buttons &ndash;&gt;-->
+<!--              <div-->
+<!--                  class="d-flex justify-content-end gap-2"-->
+<!--                  style="margin-top: 20px"-->
+<!--              >-->
+<!--                <button-->
+<!--                    class="btn btn-secondary"-->
+<!--                    data-bs-dismiss="modal"-->
+<!--                    id="close"-->
+<!--                >-->
+<!--                  بستن-->
+<!--                </button>-->
+
+<!--                <button class="btn btn-primary" :disabled="loading" @click="handlerSubmitColor">-->
+<!--                  <span-->
+<!--                      v-if="loading"-->
+<!--                      class="spinner-border spinner-border-sm"-->
+<!--                      role="status"-->
+<!--                      aria-hidden="true"-->
+<!--                  />-->
+<!--                  ذخیره-->
+<!--                </button>-->
+<!--              </div>-->
+<!--            </BTab>-->
+<!--            <BTab title="ترجمه ها">-->
+<!--             -->
+<!--            </BTab>-->
+<!--          </BTabs>-->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-dialog {
+  max-width: 50%;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+.modal-body {
+  padding: 20px;
+  padding: 1rem 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.input-group {
+  margin-top: 0.5rem;
+}
+
+.modal-dialog {
+  max-width: 50%;
+}
+
+.modal-content {
+  padding: 1.5rem;
+}
+
+.modal-header {
+  border-bottom: 1px solid #dee2e6;
+  padding-bottom: 1rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.color-picker-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.color-picker {
+  width: 300px;
+  height: 45px;
+  padding: 0;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.color-display {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  display: inline-block;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/modals/attribute/addAttribute.vue b/src/components/modals/attribute/addAttribute.vue
index dcef6ef..24386cc 100644
--- a/src/components/modals/attribute/addAttribute.vue
+++ b/src/components/modals/attribute/addAttribute.vue
@@ -11,7 +11,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">
-            اضافه کردن رنگ جدید
+            اضافه کردن ویژگی جدید
           </h5>
           <button
             type="button"
@@ -21,77 +21,139 @@
           ></button>
         </div>
         <div class="modal-body">
-          <form @submit.prevent="addAttribute">
-            <BRow class="g-3">
-              <!-- Brand Title -->
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">نام رنگ</label>
-
-                  <input
-                    v-model="colorName"
-                    @input="clearError('colorName')"
-                    type="text"
+          <Steppy
+              v-model:step="step"
+              :tabs="[
+                 { title: 'ثبت دسته بندی', isValid: true },
+                 { title: 'ترجمه ها', isValid: true },
+              ]"
+              backText="قبلی"
+              nextText="بعدی"
+              doneText="ذخیره"
+              primaryColor1="#04A9F5"
+              circleSize="45"
+          >
+            <template #1>
+              <div class="form-group">
+                <label class="form-label">دسته بندی</label>
+                <select
+                    v-model="categoryId"
                     class="form-control"
-                    placeholder="نام رنگ"
-                    :class="{ 'is-invalid': errors.colorName }"
+                    placeholder="دسته بندی انتخاب کنید"
+                >
+                  <option
+                      v-for="category in categories"
+                      :key="category?.id"
+                      :value="category?.id"
+                  >
+                    {{ category?.translation?.title ?? 'بدون نام' }}
+                  </option>
+                </select>
+              </div>
+
+              <!-- Submit Buttons -->
+              <div
+                  class="d-flex justify-content-end gap-2"
+                  style="margin-top: 20px"
+              >
+                <button
+                    class="btn btn-secondary"
+                    data-bs-dismiss="modal"
+                    id="close"
+                >
+                  بستن
+                </button>
+
+                <button @click="handlerSubmitCategory" class="btn btn-primary" :disabled="loading">
+                  <span
+                      v-if="loading"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
                   />
-                  <small v-if="errors.colorName" class="text-danger">
-                    {{ errors.colorName }}
-                  </small>
-                </div>
-              </BCol>
-
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">انتخاب رنگ</label>
-                  <div class="color-picker-wrapper">
-                    <input
-                      v-model="colorCode"
-                      @input="clearError('colorCode')"
-                      type="color"
-                      class="form-control color-picker"
-                      :class="{ 'is-invalid': errors.colorCode }"
-                    />
-                    <span
-                      v-if="colorCode"
-                      class="color-display"
-                      :style="{ backgroundColor: colorCode }"
-                    ></span>
-                  </div>
-                  <span> {{ colorCode }}</span>
-
-                  <small v-if="errors.colorCode" class="text-danger">
-                    {{ errors.colorCode }}
-                  </small>
+                  ذخیره
+                </button>
+              </div>
+            </template>
+
+            <template #2>
+              <form @submit.prevent="addAttribute">
+                <BRow class="g-3">
+                  <!-- Brand Title -->
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">عنوان ویژگی</label>
+
+                      <input
+                          v-model="attrName"
+                          @input="clearError('attrName')"
+                          type="text"
+                          class="form-control"
+                          placeholder="عنوان ویژگی"
+                          :class="{ 'is-invalid': errors.attrName }"
+                      />
+                      <small v-if="errors.attrName" class="text-danger">
+                        {{ errors.attrName }}
+                      </small>
+                    </div>
+                  </BCol>
+
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب زبان</label>
+                      <select
+                          v-model="locale"
+                          class="form-control"
+                          placeholder="انتخاب کنید"
+                      >
+                        <option
+                            key="fa"
+                            value="fa"
+                        >
+                          فارسی
+                        </option>
+                        <option
+                            key="en"
+                            value="en"
+                        >
+                          انگلیسی
+                        </option>
+                        <option
+                            key="ar"
+                            value="ar"
+                        >
+                          عربی
+                        </option>
+                      </select>
+                    </div>
+                  </BCol>
+                </BRow>
+
+                <div
+                    class="d-flex justify-content-end gap-2"
+                    style="margin-top: 20px"
+                >
+                  <button
+                      class="btn btn-secondary"
+                      data-bs-dismiss="modal"
+                      id="close"
+                  >
+                    بستن
+                  </button>
+
+                  <button type="submit" class="btn btn-primary" :disabled="loadingAttr">
+                  <span
+                      v-if="loadingAttr"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                  />
+                    ذخیره
+                  </button>
                 </div>
-              </BCol>
-            </BRow>
-
-            <!-- Submit Buttons -->
-            <div
-              class="d-flex justify-content-end gap-2"
-              style="margin-top: 20px"
-            >
-              <button
-                type="button"
-                class="btn btn-secondary"
-                data-bs-dismiss="modal"
-                id="close"
-              >
-                بستن
-              </button>
-              <button type="submit" class="btn btn-primary" :disabled="loading">
-                <span
-                  v-if="loading"
-                  class="spinner-border spinner-border-sm"
-                  role="status"
-                  aria-hidden="true"
-                ></span>
-                ذخیره
-              </button>
-            </div>
-          </form>
+              </form>
+            </template>
+          </Steppy>
         </div>
       </div>
     </div>
@@ -103,8 +165,10 @@ import { ref, toRef, watch } from "vue";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import ApiServiece from "@/services/ApiService";
+import {Steppy} from "vue3-steppy";
 
 export default {
+  components: {Steppy},
   props: {
     attributeValues: {
       type: Array,
@@ -112,11 +176,17 @@ export default {
     },
   },
   setup(props, { emit }) {
-    const colorName = ref();
+    const attrName = ref();
     const colorCode = ref();
     const localAttributeValues = toRef(props.attributeValues);
     const errors = ref({});
     const loading = ref(false);
+    const loadingAttr = ref(false);
+    const categories = ref([]);
+    const categoryId = ref(null);
+    const categoryResponse = ref(null);
+    const step = ref(1);
+    const locale = ref('fa');
 
     watch(
       () => props.attributeValues,
@@ -125,9 +195,9 @@ export default {
 
     const validateForm = () => {
       errors.value = {};
-      if (!colorName.value)
-        errors.value.colorName = "وارد کردن نام رنگ ضروری می باشد";
-      if (!colorCode.value) errors.value.colorCode = "انتخاب رنگ ضروری می باشد";
+      // if (!attrName.value)
+      //   errors.value.attrName = "وارد کردن نام ویژگی ضروری می باشد";
+      if (!categoryId.value) errors.value.categoryId = "انتخاب دسته بندی ضروری می باشد";
 
       return Object.keys(errors.value).length === 0;
     };
@@ -136,7 +206,7 @@ export default {
       errors.value[field] = "";
     };
 
-    const addAttribute = () => {
+    const handlerSubmitCategory = () => {
       if (!validateForm()) {
         toast.error("لطفا فیلد های لازم را وارد نمایید", {
           position: "top-right",
@@ -144,30 +214,21 @@ export default {
         });
         return;
       }
+
       loading.value = true;
 
-      const formData = new FormData();
-      console.log(localAttributeValues.value);
-      formData.append("title", colorName.value);
-      formData.append("code", colorCode.value);
-      console.log(localAttributeValues);
-      formData.append("attribute_id", 1);
-
-      ApiServiece.post(`admin/attribute-values`, formData)
-        .then(() => {
-    
-          toast.success("!ویژگی با موفقیت اضافه شد", {
+      const params = {
+        category_id: categoryId.value,
+      }
+
+      ApiServiece.post(`admin/attributes`, params)
+        .then(({ data }) => {
+          toast.success(data?.message, {
             position: "top-right",
             autoClose: 1000,
           });
-        })
-        .then(() => {
-          setTimeout(() => {
-            document.getElementById("close").click();
-            emit("attribute-updated");
-            colorName.value = "";
-            colorCode.value = "";
-          }, 500);
+          categoryResponse.value = data?.data?.id;
+          step.value++
         })
         .catch((error) => {
           toast.error(`${error.response.data.message}`, {
@@ -180,13 +241,57 @@ export default {
         });
     };
 
+    const addAttribute = async () => {
+      try {
+        loadingAttr.value = true;
+
+        const params = {
+          title: attrName.value,
+          locale: locale.value,
+        }
+
+        const { data: { success, message } } = await ApiServiece.post(`admin/attributes/${categoryResponse.value}/translations`, params)
+
+        if (success) {
+          toast.success(message)
+          //document.getElementById("close").click();
+          emit("attribute-updated");
+        }
+      } catch (e) {
+        toast.error(e?.response?.data?.message)
+      } finally {
+        loadingAttr.value = false;
+      }
+    }
+
+    const getAttributes = async () => {
+      try {
+        const { data: { success, data } } = await ApiServiece.get(`admin/categories`)
+
+        if (success) {
+          categories.value = data;
+        }
+      } catch (e) {
+        toast.error(e?.response?.data?.message)
+      }
+    }
+
+    getAttributes()
+
     return {
       errors,
       loading,
       clearError,
-      addAttribute,
-      colorName,
+      handlerSubmitCategory,
+      attrName,
       colorCode,
+      getAttributes,
+      categories,
+      loadingAttr,
+      categoryId,
+      step,
+      locale,
+      addAttribute
     };
   },
 };
diff --git a/src/components/modals/attribute/editAttribute.vue b/src/components/modals/attribute/editAttribute.vue
index 2f3cfd7..0e104c2 100644
--- a/src/components/modals/attribute/editAttribute.vue
+++ b/src/components/modals/attribute/editAttribute.vue
@@ -19,77 +19,140 @@
           ></button>
         </div>
         <div class="modal-body">
-          <form @submit.prevent="editAttribute">
-            <BRow class="g-3">
-              <!-- Brand Title -->
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">نام رنگ</label>
-
-                  <input
-                    v-model="localColorName"
-                    @input="clearError('localColorName')"
-                    type="text"
+          <BTabs>
+            <BTab title="دسته بندی">
+              <div class="form-group mt-2">
+                <label class="form-label">دسته بندی</label>
+                <select
+                    v-model="categoryId"
                     class="form-control"
-                    placeholder="نام رنگ"
-                    :class="{ 'is-invalid': errors.colorName }"
+                    placeholder="دسته بندی انتخاب کنید"
+                >
+                  <option
+                      v-for="category in categories"
+                      :key="category?.id"
+                      :value="category?.id"
+                  >
+                    {{ category?.translation?.title ?? 'بدون نام' }}
+                  </option>
+                </select>
+              </div>
+
+              <!-- Submit Buttons -->
+              <div
+                  class="d-flex justify-content-end gap-2"
+                  style="margin-top: 20px"
+              >
+                <button
+                    class="btn btn-secondary"
+                    data-bs-dismiss="modal"
+                    id="close"
+                >
+                  بستن
+                </button>
+
+                <button @click="handlerSubmitCategory" class="btn btn-primary" :disabled="loading">
+                  <span
+                      v-if="loading"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
                   />
-                  <small v-if="errors.localColorName" class="text-danger">
-                    {{ errors.localColorName }}
-                  </small>
-                </div>
-              </BCol>
-
-              <BCol lg="6">
-                <div class="form-group">
-                  <label class="form-label">انتخاب رنگ</label>
-                  <div class="color-picker-wrapper">
-                    <input
-                      v-model="localColorCode"
-                      @input="clearError('localColorCode')"
-                      type="color"
-                      class="form-control color-picker"
-                      :class="{ 'is-invalid': errors.localColorCode }"
-                    />
-                    <span
-                      v-if="colorCode"
-                      class="color-display"
-                      :style="{ backgroundColor: localColorCode }"
-                    ></span>
-                  </div>
-                  <span> {{ localColorCode }}</span>
-
-                  <small v-if="errors.localColorCode" class="text-danger">
-                    {{ errors.localColorCode }}
-                  </small>
+                  ذخیره
+                </button>
+              </div>
+
+            </BTab>
+
+            <BTab title="ترجمه ها">
+              <form @submit.prevent="editAttribute" class="mt-4">
+
+                <BButton
+                    :disabled="!findLocaleTranslation"
+                    :loading="loadingDelete"
+                    @click="handlerRemoveTranslation"
+                    class="btn btn-sm rounded btn-danger d-block"
+                    style="margin-right: auto"
+                >
+                  حذف ترجمه {{ findLocaleTranslation }}
+                </BButton>
+
+                <BRow class="g-3">
+                  <!-- Brand Title -->
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">عنوان ویژگی</label>
+
+                      <input
+                          v-model="localTitle"
+                          @input="clearError('attrName')"
+                          type="text"
+                          class="form-control"
+                          placeholder="عنوان ویژگی"
+                          :class="{ 'is-invalid': errors.attrName }"
+                      />
+                      <small v-if="errors.attrName" class="text-danger">
+                        {{ errors.attrName }}
+                      </small>
+                    </div>
+                  </BCol>
+
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب زبان</label>
+                      <select
+                          v-model="locale"
+                          class="form-control"
+                          placeholder="انتخاب کنید"
+                          @change="handlerChangeLocale"
+                      >
+                        <option
+                            key="fa"
+                            value="fa"
+                        >
+                          فارسی
+                        </option>
+                        <option
+                            key="en"
+                            value="en"
+                        >
+                          انگلیسی
+                        </option>
+                        <option
+                            key="ar"
+                            value="ar"
+                        >
+                          عربی
+                        </option>
+                      </select>
+                    </div>
+                  </BCol>
+                </BRow>
+                <div
+                    class="d-flex justify-content-end gap-2"
+                    style="margin-top: 20px"
+                >
+                  <button
+                      class="btn btn-secondary"
+                      data-bs-dismiss="modal"
+                      id="close"
+                  >
+                    بستن
+                  </button>
+
+                  <button type="submit" class="btn btn-primary" :disabled="loading">
+                  <span
+                      v-if="loading"
+                      class="spinner-border spinner-border-sm"
+                      role="status"
+                      aria-hidden="true"
+                  />
+                    ذخیره
+                  </button>
                 </div>
-              </BCol>
-            </BRow>
-
-            <!-- Submit Buttons -->
-            <div
-              class="d-flex justify-content-end gap-2"
-              style="margin-top: 20px"
-            >
-              <button
-                type="button"
-                class="btn btn-secondary"
-                data-bs-dismiss="modal"
-                id="closeAttributeModal"
-              >
-                بستن
-              </button>
-              <button type="submit" class="btn btn-primary" :disabled="loading">
-                <span
-                  v-if="loading"
-                  class="spinner-border spinner-border-sm"
-                  role="status"
-                  aria-hidden="true"
-                ></span>
-                ذخیره
-              </button>
-            </div>
-          </form>
+              </form>
+            </BTab>
+          </BTabs>
         </div>
       </div>
     </div>
@@ -97,13 +160,15 @@
 </template>
 
 <script>
-import { ref, toRef, watch } from "vue";
+import {computed, ref, watch} from "vue";
 
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import ApiServiece from "@/services/ApiService";
+import {BTabs} from "bootstrap-vue-next";
 
 export default {
+  components: {BTabs},
   props: {
     attributeValues: {
       type: Array,
@@ -121,41 +186,64 @@ export default {
       type: String,
       Required: true,
     },
+    attrRow: {
+      type: Object,
+      required: true,
+    },
   },
   setup(props, { emit }) {
-    const localColorName = ref();
+    const localTitle = ref();
     const localColorCode = ref();
-    const localId = toRef(props.id);
-    const localAttributeValues = toRef(props.attributeValues);
     const errors = ref({});
     const loading = ref(false);
+    const categoryId = ref(null);
+    const categories = ref([]);
+    const locale = ref('fa');
+    const loadingDelete = ref(false);
 
-    watch(
-      () => props.attributeValues,
-      (newVal) => (localAttributeValues.value = newVal)
-    );
-
-    watch(
-      () => props.code,
-      (newVal) => (localColorCode.value = newVal)
-    );
+    const attrRowModel = computed({
+      get: () => props.attrRow,
+      set: (newValue) => emit('update:categoryRow', newValue)
+    });
 
     watch(
-      () => props.title,
-      (newVal) => (localColorName.value = newVal)
-    );
+        () => props.attrRow,
+        (newVal) => {
+          localTitle.value = newVal?.translation?.title
+
+          locale.value = newVal?.translation?.locale
+
+          categoryId.value = newVal?.category?.id
+        }
+    )
+
+    const findLocaleTranslation = computed(() => {
+      const foundTranslation = attrRowModel.value?.translations?.find(
+          item => item?.locale === locale.value
+      );
+
+      if (foundTranslation) {
+        switch (foundTranslation?.locale) {
+          case "en":
+            return "انگلیسی";
+          case "fa":
+            return "فارسی";
+          case "ar":
+            return "عربی";
+          default:
+            return null;
+        }
+      }
 
-    watch(
-      () => props.id,
-      (newVal) => (localId.value = newVal)
-    );
+      return null;
+    });
 
     const validateForm = () => {
       errors.value = {};
-      if (!localColorName.value)
-        errors.value.colorName = "وارد کردن نام رنگ ضروری می باشد";
-      if (!localColorCode.value)
-        errors.value.colorCode = "انتخاب رنگ ضروری می باشد";
+      if (!localTitle.value)
+        errors.value.colorName = "وارد کردن عنوان ویژگی ضروری می باشد";
+      if (!locale.value)
+        errors.value.colorCode = "انتخاب زبان ضروری می باشد";
 
       return Object.keys(errors.value).length === 0;
     };
@@ -164,7 +252,7 @@ export default {
       errors.value[field] = "";
     };
 
-    const editAttribute = () => {
+    const editAttribute = async () => {
       if (!validateForm()) {
         toast.error("لطفا فیلد های لازم را وارد نمایید", {
           position: "top-right",
@@ -172,47 +260,145 @@ export default {
         });
         return;
       }
-      loading.value = true;
-
-      const formData = new FormData();
-      console.log(localAttributeValues.value);
-      formData.append("title", localColorName.value);
-      formData.append("code", localColorCode.value);
-      formData.append("attribute_id", localAttributeValues.value[0].id);
-
-      ApiServiece.put(`admin/attribute-values/${localId.value}`, formData)
-        .then((resp) => {
-          console.log(resp);
-          toast.success("!ویژگی با موفقیت ویرایش شد", {
-            position: "top-right",
-            autoClose: 1000,
-          });
-        })
-        .then(() => {
-          setTimeout(() => {
-            document.getElementById("closeAttributeModal").click();
-            emit("attribute-updated");
-          }, 500);
-        })
-        .catch((error) => {
-        
-          toast.error(`${error.response.data.message}`, {
-            position: "top-right",
-            autoClose: 1000,
-          });
-        })
-        .finally(() => {
-          loading.value = false;
+
+      try {
+        loading.value = true;
+
+        const params = { title: localTitle.value, locale: locale.value };
+
+        const existingTranslation = attrRowModel.value?.translations?.find(
+            t => t.locale === locale.value
+        );
+
+        const { data } = existingTranslation
+            ? await ApiServiece.put(
+                `admin/attributes/${attrRowModel.value?.id}/translations/${existingTranslation?.id}`,
+                params,
+                {
+                  headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            )
+            : await ApiServiece.post(
+                `admin/attributes/${attrRowModel.value?.id}/translations`,
+                params,
+                {
+                  headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            );
+
+        if (data?.success) {
+          const updatedCategory = props.attrRow;
+
+          if (existingTranslation) {
+            updatedCategory.translations = data?.data?.translations || [];
+          } else {
+            updatedCategory.translations = [
+              ...(updatedCategory.translations || []),
+              ...(data?.data?.translations || [])
+            ];
+          }
+
+          attrRowModel.value = updatedCategory;
+
+          console.log(attrRowModel.value,'attrRowModel.value')
+
+          toast.success(data?.message)
+
+          emit("cat-updated");
+        }
+
+      } catch (error) {
+        console.log(error,'error error');
+        toast.error(`${error?.response?.data?.message}`, {
+          position: "top-right",
+          autoClose: 1000,
         });
+      } finally {
+        loading.value = false;
+      }
     };
 
+    const handlerRemoveTranslation = async () => {
+      const findLocale = attrRowModel.value?.translations?.find(item => item?.locale === locale.value);
+
+      if (findLocale) {
+        try {
+          loadingDelete.value = true;
+
+          const { data: { success, message, data } } = await ApiServiece.delete(
+              `admin/attributes/${attrRowModel.value?.id}/translations/${findLocale?.id}`
+          )
+
+          if (success) {
+            const updatedCategory = props.attrRow;
+
+            if (findLocale) {
+              updatedCategory.translations = data?.data?.translations || [];
+            } else {
+              updatedCategory.translations = [
+                ...(updatedCategory.translations || []),
+                ...(data?.data?.translations || [])
+              ];
+            }
+
+            attrRowModel.value = updatedCategory;
+
+            localTitle.value = null
+
+            toast.success(message)
+          }
+        } catch (e) {
+          toast.error(e?.response?.data?.message)
+        }finally {
+          loadingDelete.value = false
+        }
+      }
+    }
+
+    const getAttributes = async () => {
+      try {
+        const { data: { success, data } } = await ApiServiece.get(`admin/categories`)
+
+        if (success) {
+          categories.value = data;
+        }
+      } catch (e) {
+        toast.error(e?.response?.data?.message)
+      }
+    }
+
+    const handlerChangeLocale = (e) => {
+      const findLocale = attrRowModel.value?.translations?.find(item => item?.locale === e.target.value);
+
+      if (findLocale) {
+        localTitle.value = findLocale?.title
+      } else {
+        localTitle.value = undefined
+      }
+    }
+
+    getAttributes()
+
     return {
       errors,
       loading,
       clearError,
       editAttribute,
-      localColorName,
+      localTitle,
       localColorCode,
+      categoryId,
+      getAttributes,
+      categories,
+      attrRowModel,
+      handlerChangeLocale,
+      locale,
+      findLocaleTranslation,
+      handlerRemoveTranslation,
+      loadingDelete,
     };
   },
 };
diff --git a/src/components/modals/attribute/test.vue b/src/components/modals/attribute/test.vue
new file mode 100644
index 0000000..a50f640
--- /dev/null
+++ b/src/components/modals/attribute/test.vue
@@ -0,0 +1,298 @@
+<template>
+  <div
+      class="modal fade"
+      id="addAttribute"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+  >
+    <div class="modal-dialog modal-sm" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">
+            اضافه کردن رنگ جدید
+          </h5>
+          <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <form @submit.prevent="addAttribute">
+            <BRow class="g-3">
+              <!-- Brand Title -->
+              <BCol lg="6">
+                <div class="form-group">
+                  <label class="form-label">نام رنگ</label>
+
+                  <input
+                      v-model="colorName"
+                      @input="clearError('colorName')"
+                      type="text"
+                      class="form-control"
+                      placeholder="نام رنگ"
+                      :class="{ 'is-invalid': errors.colorName }"
+                  />
+                  <small v-if="errors.colorName" class="text-danger">
+                    {{ errors.colorName }}
+                  </small>
+                </div>
+              </BCol>
+
+              <BCol lg="6">
+                <div class="form-group">
+                  <label class="form-label">انتخاب رنگ</label>
+                  <div class="color-picker-wrapper">
+                    <input
+                        v-model="colorCode"
+                        @input="clearError('colorCode')"
+                        type="color"
+                        class="form-control color-picker"
+                        :class="{ 'is-invalid': errors.colorCode }"
+                    />
+                    <span
+                        v-if="colorCode"
+                        class="color-display"
+                        :style="{ backgroundColor: colorCode }"
+                    ></span>
+                  </div>
+                  <span> {{ colorCode }}</span>
+
+                  <small v-if="errors.colorCode" class="text-danger">
+                    {{ errors.colorCode }}
+                  </small>
+                </div>
+              </BCol>
+            </BRow>
+
+            <!-- Submit Buttons -->
+            <div
+                class="d-flex justify-content-end gap-2"
+                style="margin-top: 20px"
+            >
+              <button
+                  type="button"
+                  class="btn btn-secondary"
+                  data-bs-dismiss="modal"
+                  id="close"
+              >
+                بستن
+              </button>
+
+              <button type="submit" class="btn btn-primary" :disabled="loading">
+                <span
+                    v-if="loading"
+                    class="spinner-border spinner-border-sm"
+                    role="status"
+                    aria-hidden="true"
+                ></span>
+                ذخیره
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, toRef, watch } from "vue";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import ApiServiece from "@/services/ApiService";
+
+export default {
+  props: {
+    attributeValues: {
+      type: Array,
+      Required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const colorName = ref();
+    const colorCode = ref();
+    const localAttributeValues = toRef(props.attributeValues);
+    const errors = ref({});
+    const loading = ref(false);
+
+    watch(
+        () => props.attributeValues,
+        (newVal) => (localAttributeValues.value = newVal)
+    );
+
+    const validateForm = () => {
+      errors.value = {};
+      if (!colorName.value)
+        errors.value.colorName = "وارد کردن نام رنگ ضروری می باشد";
+      if (!colorCode.value) errors.value.colorCode = "انتخاب رنگ ضروری می باشد";
+
+      return Object.keys(errors.value).length === 0;
+    };
+
+    const clearError = (field) => {
+      errors.value[field] = "";
+    };
+
+    const addAttribute = () => {
+      if (!validateForm()) {
+        toast.error("لطفا فیلد های لازم را وارد نمایید", {
+          position: "top-right",
+          autoClose: 1000,
+        });
+        return;
+      }
+
+      loading.value = true;
+
+      const formData = new FormData();
+
+      formData.append("title", colorName.value);
+
+      formData.append("code", colorCode.value);
+
+      formData.append("attribute_id", 1);
+
+      ApiServiece.post(`admin/attribute-values`, formData)
+          .then(() => {
+            toast.success("!ویژگی با موفقیت اضافه شد", {
+              position: "top-right",
+              autoClose: 1000,
+            });
+          })
+          .then(() => {
+            setTimeout(() => {
+              //document.getElementById("close").click();
+              emit("attribute-updated");
+              colorName.value = "";
+              colorCode.value = "";
+            }, 500);
+          })
+          .catch((error) => {
+            toast.error(`${error.response.data.message}`, {
+              position: "top-right",
+              autoClose: 1000,
+            });
+          })
+          .finally(() => {
+            loading.value = false;
+          });
+    };
+
+    return {
+      errors,
+      loading,
+      clearError,
+      addAttribute,
+      colorName,
+      colorCode,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.modal-dialog {
+  max-width: 50%;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+.modal-body {
+  padding: 20px;
+  padding: 1rem 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.input-group {
+  margin-top: 0.5rem;
+}
+
+.modal-dialog {
+  max-width: 50%;
+}
+
+.modal-content {
+  padding: 1.5rem;
+}
+
+.modal-header {
+  border-bottom: 1px solid #dee2e6;
+  padding-bottom: 1rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.input-group {
+  margin-top: 0.5rem;
+}
+
+.Image-Preview {
+  min-width: 100px;
+  max-height: 100px;
+  max-width: 100px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+.delete-btn {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+  font-size: 10px;
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  gap: 8px; /* Space between icon and text */
+  margin-right: 100px;
+}
+
+.delete-btn:hover {
+  background-color: #c0392b;
+  transform: scale(1.05);
+}
+
+.delete-btn:active {
+  background-color: #a93226;
+}
+
+.delete-btn:focus {
+  outline: none;
+}
+.color-picker-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.color-picker {
+  width: 300px;
+  height: 45px;
+  padding: 0;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.color-display {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  display: inline-block;
+}
+</style>
diff --git a/src/components/modals/blogCat/addBlogCat.vue b/src/components/modals/blogCat/addBlogCat.vue
index e250236..85351d0 100644
--- a/src/components/modals/blogCat/addBlogCat.vue
+++ b/src/components/modals/blogCat/addBlogCat.vue
@@ -82,7 +82,6 @@
                           v-model="locale"
                           class="form-control"
                           placeholder="انتخاب کنید"
-                          @change="handlerChangeLocale"
                       >
                         <option
                             key="fa"
@@ -137,6 +136,7 @@
                   >
                     بستن
                   </button>
+
                   <button type="submit" class="btn btn-primary" :disabled="loading">
                     <span
                         v-if="loading"
@@ -201,7 +201,7 @@ export default {
 
         const { data: { message, success, data } } = await ApiServiece.post(
             `admin/blog-categories`,
-            { title: title.value },
+            { title: titleCat.value },
           {
           headers: {
             Authorization: `Bearer ${localStorage.getItem("token")}`,
@@ -246,10 +246,10 @@ export default {
         })
         .then(() => {
           setTimeout(() => {
-            document.getElementById("closeAddBlogCat").click();
+            //document.getElementById("closeAddBlogCat").click();
             emit("cat-updated");
             title.value = "";
-            step.value = 1;
+            //step.value = 1;
           }, 500);
         })
         .catch((error) => {
diff --git a/src/components/modals/blogCat/editBlogCat.vue b/src/components/modals/blogCat/editBlogCat.vue
index 0e0a7f1..ea329e3 100644
--- a/src/components/modals/blogCat/editBlogCat.vue
+++ b/src/components/modals/blogCat/editBlogCat.vue
@@ -20,7 +20,6 @@
         </div>
         <div class="modal-body">
           <form @submit.prevent="editCat" class="mt-4">
-
             <BButton
                 :disabled="!findLocaleTranslation"
                 :loading="loadingDelete"
@@ -67,7 +66,7 @@
                 <div class="form-group">
                   <label class="form-label">عنوان دسته</label>
                   <input
-                      v-model="title"
+                      v-model="titleCat"
                       @input="clearError('title')"
                       type="text"
                       class="form-control"
@@ -112,8 +111,8 @@
 </template>
 
 <script>
-import { iconData } from "../../../views/live-preview/icon/data";
-import { ref, toRef, watch } from "vue";
+import { iconData } from "@/views/live-preview/icon/data";
+import {computed, ref, watch} from "vue";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import ApiServiece from "@/services/ApiService";
@@ -132,30 +131,31 @@ export default {
       type: String,
       Required: true,
     },
+    catRow: {
+      type: Object,
+      Required: true,
+    },
   },
   setup(props, { emit }) {
-    const localTitle = toRef(props.title);
-    const localIcon = ref(props.icon);
-    const localId = toRef(props.id);
     const errors = ref({});
     const loading = ref(false);
+    const loadingDelete = ref(false);
     const titleCat = ref(null);
-    const title = ref(null);
+    const locale = ref("fa");
 
-    watch(
-      () => props.title,
-      (newVal) => (localTitle.value = newVal)
-    );
+    const categoryRowModel = computed({
+      get: () => props.catRow,
+      set: (newValue) => emit('update:categoryRow', newValue)
+    });
 
     watch(
-      () => props.icon,
-      (newVal) => (localIcon.value = newVal)
-    );
+      () => props.catRow,
+      (newVal) => {
+        titleCat.value = newVal?.translation?.title
 
-    watch(
-      () => props.id,
-      (newVal) => (localId.value = newVal)
-    );
+        locale.value = newVal?.translation?.locale
+      }
+    )
 
     const clearError = (field) => {
       errors.value[field] = "";
@@ -163,17 +163,12 @@ export default {
 
     const validateForm = () => {
       errors.value = {};
-      if (!localTitle.value)
+      if (!titleCat.value)
         errors.value.localTitle = "وارد کردن عنوان ضروری می باشد";
-      if (!localIcon.value) errors.value.icon = "انتخاب آیکن ضروری است";
       return Object.keys(errors.value).length === 0;
     };
 
-    const setSelectedIcon = (icon) => {
-      localIcon.value = icon;
-    };
-
-    const editCat = () => {
+    const editCat = async () => {
       if (!validateForm()) {
         toast.error("لطفا فیلد های لازم را وارد نمایید", {
           position: "top-right",
@@ -181,48 +176,128 @@ export default {
         });
         return;
       }
-      loading.value = true;
-
-      const formData = new FormData();
-      formData.append("title", localTitle.value);
-      formData.append("icon", localIcon.value);
-      ApiServiece.put(`admin/blog-categories/${localId.value}`, formData)
-        .then(() => {
-          toast.success("!دسته با موفقیت ویرایش شد", {
-            position: "top-right",
-            autoClose: 1000,
-          });
-        })
-        .then(() => {
-          setTimeout(() => {
-            document.getElementById("closeEditBlogCat").click();
-            emit("cat-updated");
-          }, 500);
-        })
-        .catch((error) => {
-        
-          toast.error(`${error.response.data.message}`, {
-            position: "top-right",
-            autoClose: 1000,
-          });
-        })
-        .finally(() => {
-          loading.value = false;
+
+      try {
+        loading.value = true;
+
+        const params = {
+          title: titleCat.value,
+          locale: locale.value,
+        }
+
+        const existingTranslation = categoryRowModel.value?.translations?.find(
+            t => t.locale === locale.value
+        );
+
+        const { data } = existingTranslation
+            ? await ApiServiece.put(
+                `admin/blog-categories/${categoryRowModel.value?.id}/translations/${existingTranslation?.id}`,
+                params,
+                {
+                  headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            )
+            : await ApiServiece.post(
+                `admin/blog-categories/${categoryRowModel.value?.id}/translations`,
+                params,
+                {
+                  headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            );
+
+        console.log(data,'data data data')
+
+        toast.success("!دسته با موفقیت ویرایش شد", {
+          position: "top-right",
+          autoClose: 1000,
         });
+
+      } catch (e) {
+        toast.error(`${e?.response?.data?.message}`, {
+          position: "top-right",
+          autoClose: 1000,
+        })
+      } finally {
+        loading.value = false;
+      }
     };
 
+    const handlerChangeLocale = (e) => {
+      const findLocale = categoryRowModel.value?.translations?.find(item => item?.locale === e.target.value);
+
+      if (findLocale) {
+        titleCat.value = findLocale?.title
+      } else {
+        titleCat.value = undefined
+      }
+    }
+
+    const findLocaleTranslation = computed(() => {
+      const foundTranslation = categoryRowModel.value?.translations?.find(
+          item => item?.locale === locale.value
+      );
+
+      if (foundTranslation) {
+        switch (foundTranslation?.locale) {
+          case "en":
+            return "انگلیسی";
+          case "fa":
+            return "فارسی";
+          case "ar":
+            return "عربی";
+          default:
+            return null;
+        }
+      }
+
+      return null;
+    });
+
+    const handlerRemoveTranslation = async () => {
+      const findLocale = categoryRowModel.value?.translations?.find(item => item?.locale === locale.value);
+
+      if (findLocale) {
+        try {
+          loadingDelete.value = true;
+
+          const { data: { success, message, data } } = await ApiServiece.delete(
+              `admin/blog-categories/${categoryRowModel.value?.id}/translations/${findLocale?.id}`
+          )
+
+          if (success) {
+            const updatedCategory = props.catRow
+
+            updatedCategory.translations = data?.translations
+
+            titleCat.value = null
+
+            categoryRowModel.value = updatedCategory
+
+            toast.success(message)
+          }
+        } catch (e) {
+          console.log(e)
+        }finally {
+          loadingDelete.value = false
+        }
+      }
+    }
+
     return {
       errors,
       loading,
       clearError,
       editCat,
-      localTitle,
       iconData,
-      setSelectedIcon,
-      localIcon,
-      localId,
-      title,
       titleCat,
+      locale,
+      handlerChangeLocale,
+      findLocaleTranslation,
+      handlerRemoveTranslation,
     };
   },
 };
diff --git a/src/components/modals/countries/CountriesModal.vue b/src/components/modals/countries/CountriesModal.vue
new file mode 100644
index 0000000..9918b9e
--- /dev/null
+++ b/src/components/modals/countries/CountriesModal.vue
@@ -0,0 +1,249 @@
+<script setup>
+  import { ref, reactive, defineExpose, defineEmits } from "vue";
+  import ApiService from "@/services/ApiService";
+  import {toast} from "vue3-toastify";
+  import {BRow} from "bootstrap-vue-next";
+  import codeCountries from "@/utils/code-countries"
+
+  const initForm = {
+    title: null,
+    minimum_shipping_weight: null,
+    per_kilograms_cost: null,
+    status: 'in_active',
+    country_code: null,
+  }
+
+  const emit = defineEmits(['country-updated'])
+
+  const errors = ref({})
+
+  const loading = ref(false)
+
+  const form = reactive({...initForm})
+
+  const clearError = (field) => {
+    errors.value[field] = "";
+  };
+
+  const validateForm = () => {
+    errors.value = {};
+    if (!form.title) errors.value.title = "وارد کردن عنوان کشور ضروری می باشد";
+    if (!form.minimum_shipping_weight) errors.value.minimum_shipping_weight = "وارد کردن حداقل وزن حمل ونقل ضروری می باشد";
+    if (!form.per_kilograms_cost) errors.value.per_kilograms_cost = "وارد کردن هزینه ضروری می باشد";
+    if (!form.country_code) errors.value.country_code = "وارد کردن پیش شماره کشور ضروری می باشد";
+
+    return Object.keys(errors.value).length === 0;
+  };
+
+  const addCountry = async () => {
+    if (!validateForm()) {
+      toast.error("لطفا فیلد های لازم را وارد نمایید", {
+        position: "top-right",
+        autoClose: 1000,
+      });
+      return;
+    }
+
+    try {
+      loading.value = true
+
+      const url = form?.id ? `admin/country-configs/${form?.id}` : 'admin/country-configs'
+
+      const { data: { success, message } } = await ApiService[form?.id ? 'put' : 'post'](url, form)
+
+      if (success) {
+        toast.success(message)
+
+        Object.assign(form, initForm)
+
+        document.getElementById("closeModal").click();
+
+        emit("country-updated");
+      }
+    } catch (e) {
+      toast.error(e?.response?.data?.message)
+    } finally {
+      loading.value = false
+    }
+  };
+
+  const closeModal = () => {
+    if (form?.id)
+      form.id = undefined
+
+    Object.assign(form, initForm)
+  }
+
+  defineExpose({ form })
+</script>
+
+<template>
+  <div
+      class="modal fade"
+      id="countriesModal"
+      tabindex="-1"
+      role="dialog"
+      data-bs-backdrop="static"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+  >
+    <div class="modal-dialog modal-sm" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">
+            {{ form?.id ? 'ویرایش کشور' : 'اضافه کردن کشور' }}
+          </h5>
+          <button
+              type="button"
+              class="btn-close"
+              id="closeModal"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+              @click="closeModal"
+          ></button>
+        </div>
+
+        <div class="modal-body">
+          <form @submit.prevent="addCountry">
+            <BRow class="g-3">
+              <!-- Form fields -->
+
+              <BCol class="col-lg-6">
+                <div class="form-group">
+                  <label class="form-label">نام کشور</label>
+                  <input
+                      v-model="form.title"
+                      type="text"
+                      class="form-control"
+                      placeholder="نام کشور را وارد نمایید"
+                  />
+                  <small v-if="errors.title" class="text-danger">{{
+                      errors.title
+                    }}</small>
+                </div>
+              </BCol>
+
+              <BCol class="col-lg-6">
+                <div class="form-group">
+                  <label class="form-label">حداقل هزینه حمل و نقل</label>
+                  <input
+                      v-model="form.minimum_shipping_weight"
+                      @input="clearError('minimum_shipping_weight')"
+                      type="number"
+                      class="form-control"
+                  />
+                  <small v-if="errors.minimum_shipping_weight" class="text-danger">{{
+                      errors.minimum_shipping_weight
+                    }}</small>
+                </div>
+              </BCol>
+
+              <BCol class="col-lg-6">
+                <div class="form-group">
+                  <label class="form-label">هزینه هر کیلو گرم</label>
+                  <input
+                      v-model="form.per_kilograms_cost"
+                      @input="clearError('per_kilograms_cost')"
+                      type="number"
+                      class="form-control"
+                  />
+                  <small v-if="errors.per_kilograms_cost" class="text-danger">{{
+                      errors.per_kilograms_cost
+                    }}</small>
+                </div>
+              </BCol>
+
+              <BCol class="col-lg-6">
+                <div class="form-group">
+                  <label class="form-label">انتخاب پیش شماره</label>
+
+                  <select
+                      class="form-select"
+                      v-model="form.country_code"
+                      @change="clearError('country_code')"
+                  >
+                    <option v-for="code in codeCountries" :value="code?.dial_code" :key="code?.code">
+                      {{ code?.name }}({{ code?.dial_code }})
+                    </option>
+                  </select>
+
+                  <small v-if="errors.country_code" class="text-danger">{{errors.country_code}}</small>
+                </div>
+              </BCol>
+
+              <BCol class="col-lg-6">
+                <div class="form-group">
+                  <label class="form-label">وضعیت</label>
+
+                  <select
+                      class="form-select"
+                      v-model="form.status"
+                      @change="clearError('status')"
+                  >
+                    <option value="active">فعال</option>
+                    <option value="in_active">غیر فعال</option>
+                  </select>
+
+                  <small v-if="errors.status" class="text-danger">{{errors.status}}</small>
+                </div>
+              </BCol>
+
+            </BRow>
+
+            <!-- Submit Buttons -->
+            <div
+                class="d-flex justify-content-end gap-2"
+                style="margin-top: 20px"
+            >
+              <button
+                  type="button"
+                  class="btn btn-secondary"
+                  data-bs-dismiss="modal"
+                  id="addClose"
+              >
+                بستن
+              </button>
+              <button type="submit" class="btn btn-primary" :disabled="loading">
+                <span
+                    v-if="loading"
+                    class="spinner-border spinner-border-sm"
+                    role="status"
+                    aria-hidden="true"
+                ></span>
+                ذخیره
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-dialog {
+  max-width: 50%;
+}
+
+.modal-content {
+  padding: 1.5rem;
+}
+
+.modal-body {
+  padding: 1rem 1.5rem;
+}
+
+.modal-header {
+  border-bottom: 1px solid #dee2e6;
+  padding-bottom: 1rem;
+}
+
+.selected-icon-container i {
+  font-size: 2.5rem;
+}
+
+.icon-container i {
+  font-size: 2rem;
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/modals/editUser.vue b/src/components/modals/editUser.vue
index 571cb99..1983a35 100644
--- a/src/components/modals/editUser.vue
+++ b/src/components/modals/editUser.vue
@@ -84,6 +84,8 @@
                   }}</small>
                 </div>
               </BCol>
+
+              <ConfigCountriesSelect v-model:country-code="localCountryCode"/>
             </BRow>
 
             <div
@@ -120,8 +122,10 @@ import ApiServiece from "@/services/ApiService";
 import { ref, toRef, watch } from "vue";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
+import ConfigCountriesSelect from "@/components/ConfigCountriesSelect.vue";
 
 export default {
+  components: {ConfigCountriesSelect},
   props: {
     name: {
       type: String,
@@ -139,6 +143,10 @@ export default {
       type: String,
       required: true,
     },
+    countryCode: {
+      type: Number,
+      required: true,
+    },
   },
 
   setup(props, { emit }) {
@@ -146,6 +154,7 @@ export default {
     const localName = toRef(props.name);
     const localMobile = toRef(props.mobile);
     const localRole = toRef(props.role);
+    const localCountryCode = toRef(props.countryCode);
     const localId = toRef(props.id);
     const errors = ref({});
     const loading = ref(false);
@@ -168,12 +177,22 @@ export default {
       (newVal) => (localRole.value = newVal)
     );
 
+    watch(
+        () => props.countryCode,
+        (newVal) => {
+          localCountryCode.value = Number(newVal);
+        }
+    );
+
+
     const validateForm = () => {
       errors.value = {};
       if (!localMobile.value)
         errors.value.localMobile = "وارد کردن موبایل ضروری می باشد";
       if (!localRole.value)
         errors.value.localMobile = "انتخاب کردن نقش  کاربر ضروری می باشد";
+      if (!localCountryCode.value)
+        errors.value.localCountryCode = "انتخاب کردن پیش شماره ضروری می باشد";
       if (password.value && password.value.length < 8) {
         errors.value.password = " رمز عبور باید حداقل 8 کاراکتر باشد";
       }
@@ -202,12 +221,13 @@ export default {
       if (password.value) {
         formData.append("password", password.value);
       }
+      formData.append("country_config_id", localCountryCode.value)
+
       ApiServiece.put(`admin/users/${localId.value}`, formData)
         .then(() => {
           toast.success("!کاربر با موفقیت ویرایش شد", {
             position: "top-right",
             autoClose: 1000,
-            onClose: () => emit("user-updated"),
           });
           
         })
@@ -238,6 +258,7 @@ export default {
       password,
       editUser,
       localRole,
+      localCountryCode,
     };
   },
 };
diff --git a/src/router/routes.js b/src/router/routes.js
index dda23b1..4c820cf 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -23,6 +23,15 @@ export default [
     },
     component: () => import("../views/live-preview/pages/users/users.vue"),
   },
+  {
+    path: "/countries",
+    name: "countries",
+    meta: {
+      title: "کشورها",
+      requiresAuth: true,
+    },
+    component: () => import("../views/live-preview/pages/countries/countries.vue"),
+  },
   {
     path: "/brands",
     name: "brands",
@@ -51,6 +60,15 @@ export default [
     component: () =>
       import("../views/live-preview/pages/attributes/attributes.vue"),
   },
+  {
+    path: "/attributes-value/:id",
+    name: "attributes-value",
+    meta: {
+      title: "مقدار ویژگی",
+      requiresAuth: true,
+    },
+    component: () => import("../views/live-preview/pages/attributes-value/attributes-value.vue"),
+  },
   {
     path: "/blogCat",
     name: "blogCat",
@@ -290,9 +308,7 @@ export default [
     },
     component: () => import("../views/live-preview/pages/settings/setting.vue"),
   },
-
   // Auth
-
   {
     path: "/otpLogin",
     name: "otpLogin",
diff --git a/src/utils/code-countries.js b/src/utils/code-countries.js
new file mode 100644
index 0000000..cd53aaf
--- /dev/null
+++ b/src/utils/code-countries.js
@@ -0,0 +1,1214 @@
+export const codeCountries = [
+    {
+        "name": "Afghanistan",
+        "dial_code": "+93",
+        "code": "AF"
+    },
+    {
+        "name": "Aland Islands",
+        "dial_code": "+358",
+        "code": "AX"
+    },
+    {
+        "name": "Albania",
+        "dial_code": "+355",
+        "code": "AL"
+    },
+    {
+        "name": "Algeria",
+        "dial_code": "+213",
+        "code": "DZ"
+    },
+    {
+        "name": "AmericanSamoa",
+        "dial_code": "+1684",
+        "code": "AS"
+    },
+    {
+        "name": "Andorra",
+        "dial_code": "+376",
+        "code": "AD"
+    },
+    {
+        "name": "Angola",
+        "dial_code": "+244",
+        "code": "AO"
+    },
+    {
+        "name": "Anguilla",
+        "dial_code": "+1264",
+        "code": "AI"
+    },
+    {
+        "name": "Antarctica",
+        "dial_code": "+672",
+        "code": "AQ"
+    },
+    {
+        "name": "Antigua and Barbuda",
+        "dial_code": "+1268",
+        "code": "AG"
+    },
+    {
+        "name": "Argentina",
+        "dial_code": "+54",
+        "code": "AR"
+    },
+    {
+        "name": "Armenia",
+        "dial_code": "+374",
+        "code": "AM"
+    },
+    {
+        "name": "Aruba",
+        "dial_code": "+297",
+        "code": "AW"
+    },
+    {
+        "name": "Australia",
+        "dial_code": "+61",
+        "code": "AU"
+    },
+    {
+        "name": "Austria",
+        "dial_code": "+43",
+        "code": "AT"
+    },
+    {
+        "name": "Azerbaijan",
+        "dial_code": "+994",
+        "code": "AZ"
+    },
+    {
+        "name": "Bahamas",
+        "dial_code": "+1242",
+        "code": "BS"
+    },
+    {
+        "name": "Bahrain",
+        "dial_code": "+973",
+        "code": "BH"
+    },
+    {
+        "name": "Bangladesh",
+        "dial_code": "+880",
+        "code": "BD"
+    },
+    {
+        "name": "Barbados",
+        "dial_code": "+1246",
+        "code": "BB"
+    },
+    {
+        "name": "Belarus",
+        "dial_code": "+375",
+        "code": "BY"
+    },
+    {
+        "name": "Belgium",
+        "dial_code": "+32",
+        "code": "BE"
+    },
+    {
+        "name": "Belize",
+        "dial_code": "+501",
+        "code": "BZ"
+    },
+    {
+        "name": "Benin",
+        "dial_code": "+229",
+        "code": "BJ"
+    },
+    {
+        "name": "Bermuda",
+        "dial_code": "+1441",
+        "code": "BM"
+    },
+    {
+        "name": "Bhutan",
+        "dial_code": "+975",
+        "code": "BT"
+    },
+    {
+        "name": "Bolivia, Plurinational State of",
+        "dial_code": "+591",
+        "code": "BO"
+    },
+    {
+        "name": "Bosnia and Herzegovina",
+        "dial_code": "+387",
+        "code": "BA"
+    },
+    {
+        "name": "Botswana",
+        "dial_code": "+267",
+        "code": "BW"
+    },
+    {
+        "name": "Brazil",
+        "dial_code": "+55",
+        "code": "BR"
+    },
+    {
+        "name": "British Indian Ocean Territory",
+        "dial_code": "+246",
+        "code": "IO"
+    },
+    {
+        "name": "Brunei Darussalam",
+        "dial_code": "+673",
+        "code": "BN"
+    },
+    {
+        "name": "Bulgaria",
+        "dial_code": "+359",
+        "code": "BG"
+    },
+    {
+        "name": "Burkina Faso",
+        "dial_code": "+226",
+        "code": "BF"
+    },
+    {
+        "name": "Burundi",
+        "dial_code": "+257",
+        "code": "BI"
+    },
+    {
+        "name": "Cambodia",
+        "dial_code": "+855",
+        "code": "KH"
+    },
+    {
+        "name": "Cameroon",
+        "dial_code": "+237",
+        "code": "CM"
+    },
+    {
+        "name": "Canada",
+        "dial_code": "+1",
+        "code": "CA"
+    },
+    {
+        "name": "Cape Verde",
+        "dial_code": "+238",
+        "code": "CV"
+    },
+    {
+        "name": "Cayman Islands",
+        "dial_code": "+345",
+        "code": "KY"
+    },
+    {
+        "name": "Central African Republic",
+        "dial_code": "+236",
+        "code": "CF"
+    },
+    {
+        "name": "Chad",
+        "dial_code": "+235",
+        "code": "TD"
+    },
+    {
+        "name": "Chile",
+        "dial_code": "+56",
+        "code": "CL"
+    },
+    {
+        "name": "China",
+        "dial_code": "+86",
+        "code": "CN"
+    },
+    {
+        "name": "Christmas Island",
+        "dial_code": "+61",
+        "code": "CX"
+    },
+    {
+        "name": "Cocos (Keeling) Islands",
+        "dial_code": "+61",
+        "code": "CC"
+    },
+    {
+        "name": "Colombia",
+        "dial_code": "+57",
+        "code": "CO"
+    },
+    {
+        "name": "Comoros",
+        "dial_code": "+269",
+        "code": "KM"
+    },
+    {
+        "name": "Congo",
+        "dial_code": "+242",
+        "code": "CG"
+    },
+    {
+        "name": "Congo, The Democratic Republic of the Congo",
+        "dial_code": "+243",
+        "code": "CD"
+    },
+    {
+        "name": "Cook Islands",
+        "dial_code": "+682",
+        "code": "CK"
+    },
+    {
+        "name": "Costa Rica",
+        "dial_code": "+506",
+        "code": "CR"
+    },
+    {
+        "name": "Cote d'Ivoire",
+        "dial_code": "+225",
+        "code": "CI"
+    },
+    {
+        "name": "Croatia",
+        "dial_code": "+385",
+        "code": "HR"
+    },
+    {
+        "name": "Cuba",
+        "dial_code": "+53",
+        "code": "CU"
+    },
+    {
+        "name": "Cyprus",
+        "dial_code": "+357",
+        "code": "CY"
+    },
+    {
+        "name": "Czech Republic",
+        "dial_code": "+420",
+        "code": "CZ"
+    },
+    {
+        "name": "Denmark",
+        "dial_code": "+45",
+        "code": "DK"
+    },
+    {
+        "name": "Djibouti",
+        "dial_code": "+253",
+        "code": "DJ"
+    },
+    {
+        "name": "Dominica",
+        "dial_code": "+1767",
+        "code": "DM"
+    },
+    {
+        "name": "Dominican Republic",
+        "dial_code": "+1849",
+        "code": "DO"
+    },
+    {
+        "name": "Ecuador",
+        "dial_code": "+593",
+        "code": "EC"
+    },
+    {
+        "name": "Egypt",
+        "dial_code": "+20",
+        "code": "EG"
+    },
+    {
+        "name": "El Salvador",
+        "dial_code": "+503",
+        "code": "SV"
+    },
+    {
+        "name": "Equatorial Guinea",
+        "dial_code": "+240",
+        "code": "GQ"
+    },
+    {
+        "name": "Eritrea",
+        "dial_code": "+291",
+        "code": "ER"
+    },
+    {
+        "name": "Estonia",
+        "dial_code": "+372",
+        "code": "EE"
+    },
+    {
+        "name": "Ethiopia",
+        "dial_code": "+251",
+        "code": "ET"
+    },
+    {
+        "name": "Falkland Islands (Malvinas)",
+        "dial_code": "+500",
+        "code": "FK"
+    },
+    {
+        "name": "Faroe Islands",
+        "dial_code": "+298",
+        "code": "FO"
+    },
+    {
+        "name": "Fiji",
+        "dial_code": "+679",
+        "code": "FJ"
+    },
+    {
+        "name": "Finland",
+        "dial_code": "+358",
+        "code": "FI"
+    },
+    {
+        "name": "France",
+        "dial_code": "+33",
+        "code": "FR"
+    },
+    {
+        "name": "French Guiana",
+        "dial_code": "+594",
+        "code": "GF"
+    },
+    {
+        "name": "French Polynesia",
+        "dial_code": "+689",
+        "code": "PF"
+    },
+    {
+        "name": "Gabon",
+        "dial_code": "+241",
+        "code": "GA"
+    },
+    {
+        "name": "Gambia",
+        "dial_code": "+220",
+        "code": "GM"
+    },
+    {
+        "name": "Georgia",
+        "dial_code": "+995",
+        "code": "GE"
+    },
+    {
+        "name": "Germany",
+        "dial_code": "+49",
+        "code": "DE"
+    },
+    {
+        "name": "Ghana",
+        "dial_code": "+233",
+        "code": "GH"
+    },
+    {
+        "name": "Gibraltar",
+        "dial_code": "+350",
+        "code": "GI"
+    },
+    {
+        "name": "Greece",
+        "dial_code": "+30",
+        "code": "GR"
+    },
+    {
+        "name": "Greenland",
+        "dial_code": "+299",
+        "code": "GL"
+    },
+    {
+        "name": "Grenada",
+        "dial_code": "+1473",
+        "code": "GD"
+    },
+    {
+        "name": "Guadeloupe",
+        "dial_code": "+590",
+        "code": "GP"
+    },
+    {
+        "name": "Guam",
+        "dial_code": "+1671",
+        "code": "GU"
+    },
+    {
+        "name": "Guatemala",
+        "dial_code": "+502",
+        "code": "GT"
+    },
+    {
+        "name": "Guernsey",
+        "dial_code": "+44",
+        "code": "GG"
+    },
+    {
+        "name": "Guinea",
+        "dial_code": "+224",
+        "code": "GN"
+    },
+    {
+        "name": "Guinea-Bissau",
+        "dial_code": "+245",
+        "code": "GW"
+    },
+    {
+        "name": "Guyana",
+        "dial_code": "+595",
+        "code": "GY"
+    },
+    {
+        "name": "Haiti",
+        "dial_code": "+509",
+        "code": "HT"
+    },
+    {
+        "name": "Holy See (Vatican City State)",
+        "dial_code": "+379",
+        "code": "VA"
+    },
+    {
+        "name": "Honduras",
+        "dial_code": "+504",
+        "code": "HN"
+    },
+    {
+        "name": "Hong Kong",
+        "dial_code": "+852",
+        "code": "HK"
+    },
+    {
+        "name": "Hungary",
+        "dial_code": "+36",
+        "code": "HU"
+    },
+    {
+        "name": "Iceland",
+        "dial_code": "+354",
+        "code": "IS"
+    },
+    {
+        "name": "India",
+        "dial_code": "+91",
+        "code": "IN"
+    },
+    {
+        "name": "Indonesia",
+        "dial_code": "+62",
+        "code": "ID"
+    },
+    {
+        "name": "Iran, Islamic Republic of Persian Gulf",
+        "dial_code": "+98",
+        "code": "IR"
+    },
+    {
+        "name": "Iraq",
+        "dial_code": "+964",
+        "code": "IQ"
+    },
+    {
+        "name": "Ireland",
+        "dial_code": "+353",
+        "code": "IE"
+    },
+    {
+        "name": "Isle of Man",
+        "dial_code": "+44",
+        "code": "IM"
+    },
+    {
+        "name": "Israel",
+        "dial_code": "+972",
+        "code": "IL"
+    },
+    {
+        "name": "Italy",
+        "dial_code": "+39",
+        "code": "IT"
+    },
+    {
+        "name": "Jamaica",
+        "dial_code": "+1876",
+        "code": "JM"
+    },
+    {
+        "name": "Japan",
+        "dial_code": "+81",
+        "code": "JP"
+    },
+    {
+        "name": "Jersey",
+        "dial_code": "+44",
+        "code": "JE"
+    },
+    {
+        "name": "Jordan",
+        "dial_code": "+962",
+        "code": "JO"
+    },
+    {
+        "name": "Kazakhstan",
+        "dial_code": "+77",
+        "code": "KZ"
+    },
+    {
+        "name": "Kenya",
+        "dial_code": "+254",
+        "code": "KE"
+    },
+    {
+        "name": "Kiribati",
+        "dial_code": "+686",
+        "code": "KI"
+    },
+    {
+        "name": "Korea, Democratic People's Republic of Korea",
+        "dial_code": "+850",
+        "code": "KP"
+    },
+    {
+        "name": "Korea, Republic of South Korea",
+        "dial_code": "+82",
+        "code": "KR"
+    },
+    {
+        "name": "Kuwait",
+        "dial_code": "+965",
+        "code": "KW"
+    },
+    {
+        "name": "Kyrgyzstan",
+        "dial_code": "+996",
+        "code": "KG"
+    },
+    {
+        "name": "Laos",
+        "dial_code": "+856",
+        "code": "LA"
+    },
+    {
+        "name": "Latvia",
+        "dial_code": "+371",
+        "code": "LV"
+    },
+    {
+        "name": "Lebanon",
+        "dial_code": "+961",
+        "code": "LB"
+    },
+    {
+        "name": "Lesotho",
+        "dial_code": "+266",
+        "code": "LS"
+    },
+    {
+        "name": "Liberia",
+        "dial_code": "+231",
+        "code": "LR"
+    },
+    {
+        "name": "Libyan Arab Jamahiriya",
+        "dial_code": "+218",
+        "code": "LY"
+    },
+    {
+        "name": "Liechtenstein",
+        "dial_code": "+423",
+        "code": "LI"
+    },
+    {
+        "name": "Lithuania",
+        "dial_code": "+370",
+        "code": "LT"
+    },
+    {
+        "name": "Luxembourg",
+        "dial_code": "+352",
+        "code": "LU"
+    },
+    {
+        "name": "Macao",
+        "dial_code": "+853",
+        "code": "MO"
+    },
+    {
+        "name": "Macedonia",
+        "dial_code": "+389",
+        "code": "MK"
+    },
+    {
+        "name": "Madagascar",
+        "dial_code": "+261",
+        "code": "MG"
+    },
+    {
+        "name": "Malawi",
+        "dial_code": "+265",
+        "code": "MW"
+    },
+    {
+        "name": "Malaysia",
+        "dial_code": "+60",
+        "code": "MY"
+    },
+    {
+        "name": "Maldives",
+        "dial_code": "+960",
+        "code": "MV"
+    },
+    {
+        "name": "Mali",
+        "dial_code": "+223",
+        "code": "ML"
+    },
+    {
+        "name": "Malta",
+        "dial_code": "+356",
+        "code": "MT"
+    },
+    {
+        "name": "Marshall Islands",
+        "dial_code": "+692",
+        "code": "MH"
+    },
+    {
+        "name": "Martinique",
+        "dial_code": "+596",
+        "code": "MQ"
+    },
+    {
+        "name": "Mauritania",
+        "dial_code": "+222",
+        "code": "MR"
+    },
+    {
+        "name": "Mauritius",
+        "dial_code": "+230",
+        "code": "MU"
+    },
+    {
+        "name": "Mayotte",
+        "dial_code": "+262",
+        "code": "YT"
+    },
+    {
+        "name": "Mexico",
+        "dial_code": "+52",
+        "code": "MX"
+    },
+    {
+        "name": "Micronesia, Federated States of Micronesia",
+        "dial_code": "+691",
+        "code": "FM"
+    },
+    {
+        "name": "Moldova",
+        "dial_code": "+373",
+        "code": "MD"
+    },
+    {
+        "name": "Monaco",
+        "dial_code": "+377",
+        "code": "MC"
+    },
+    {
+        "name": "Mongolia",
+        "dial_code": "+976",
+        "code": "MN"
+    },
+    {
+        "name": "Montenegro",
+        "dial_code": "+382",
+        "code": "ME"
+    },
+    {
+        "name": "Montserrat",
+        "dial_code": "+1664",
+        "code": "MS"
+    },
+    {
+        "name": "Morocco",
+        "dial_code": "+212",
+        "code": "MA"
+    },
+    {
+        "name": "Mozambique",
+        "dial_code": "+258",
+        "code": "MZ"
+    },
+    {
+        "name": "Myanmar",
+        "dial_code": "+95",
+        "code": "MM"
+    },
+    {
+        "name": "Namibia",
+        "dial_code": "+264",
+        "code": "NA"
+    },
+    {
+        "name": "Nauru",
+        "dial_code": "+674",
+        "code": "NR"
+    },
+    {
+        "name": "Nepal",
+        "dial_code": "+977",
+        "code": "NP"
+    },
+    {
+        "name": "Netherlands",
+        "dial_code": "+31",
+        "code": "NL"
+    },
+    {
+        "name": "Netherlands Antilles",
+        "dial_code": "+599",
+        "code": "AN"
+    },
+    {
+        "name": "New Caledonia",
+        "dial_code": "+687",
+        "code": "NC"
+    },
+    {
+        "name": "New Zealand",
+        "dial_code": "+64",
+        "code": "NZ"
+    },
+    {
+        "name": "Nicaragua",
+        "dial_code": "+505",
+        "code": "NI"
+    },
+    {
+        "name": "Niger",
+        "dial_code": "+227",
+        "code": "NE"
+    },
+    {
+        "name": "Nigeria",
+        "dial_code": "+234",
+        "code": "NG"
+    },
+    {
+        "name": "Niue",
+        "dial_code": "+683",
+        "code": "NU"
+    },
+    {
+        "name": "Norfolk Island",
+        "dial_code": "+672",
+        "code": "NF"
+    },
+    {
+        "name": "Northern Mariana Islands",
+        "dial_code": "+1670",
+        "code": "MP"
+    },
+    {
+        "name": "Norway",
+        "dial_code": "+47",
+        "code": "NO"
+    },
+    {
+        "name": "Oman",
+        "dial_code": "+968",
+        "code": "OM"
+    },
+    {
+        "name": "Pakistan",
+        "dial_code": "+92",
+        "code": "PK"
+    },
+    {
+        "name": "Palau",
+        "dial_code": "+680",
+        "code": "PW"
+    },
+    {
+        "name": "Palestinian Territory, Occupied",
+        "dial_code": "+970",
+        "code": "PS"
+    },
+    {
+        "name": "Panama",
+        "dial_code": "+507",
+        "code": "PA"
+    },
+    {
+        "name": "Papua New Guinea",
+        "dial_code": "+675",
+        "code": "PG"
+    },
+    {
+        "name": "Paraguay",
+        "dial_code": "+595",
+        "code": "PY"
+    },
+    {
+        "name": "Peru",
+        "dial_code": "+51",
+        "code": "PE"
+    },
+    {
+        "name": "Philippines",
+        "dial_code": "+63",
+        "code": "PH"
+    },
+    {
+        "name": "Pitcairn",
+        "dial_code": "+872",
+        "code": "PN"
+    },
+    {
+        "name": "Poland",
+        "dial_code": "+48",
+        "code": "PL"
+    },
+    {
+        "name": "Portugal",
+        "dial_code": "+351",
+        "code": "PT"
+    },
+    {
+        "name": "Puerto Rico",
+        "dial_code": "+1939",
+        "code": "PR"
+    },
+    {
+        "name": "Qatar",
+        "dial_code": "+974",
+        "code": "QA"
+    },
+    {
+        "name": "Romania",
+        "dial_code": "+40",
+        "code": "RO"
+    },
+    {
+        "name": "Russia",
+        "dial_code": "+7",
+        "code": "RU"
+    },
+    {
+        "name": "Rwanda",
+        "dial_code": "+250",
+        "code": "RW"
+    },
+    {
+        "name": "Reunion",
+        "dial_code": "+262",
+        "code": "RE"
+    },
+    {
+        "name": "Saint Barthelemy",
+        "dial_code": "+590",
+        "code": "BL"
+    },
+    {
+        "name": "Saint Helena, Ascension and Tristan Da Cunha",
+        "dial_code": "+290",
+        "code": "SH"
+    },
+    {
+        "name": "Saint Kitts and Nevis",
+        "dial_code": "+1869",
+        "code": "KN"
+    },
+    {
+        "name": "Saint Lucia",
+        "dial_code": "+1758",
+        "code": "LC"
+    },
+    {
+        "name": "Saint Martin",
+        "dial_code": "+590",
+        "code": "MF"
+    },
+    {
+        "name": "Saint Pierre and Miquelon",
+        "dial_code": "+508",
+        "code": "PM"
+    },
+    {
+        "name": "Saint Vincent and the Grenadines",
+        "dial_code": "+1784",
+        "code": "VC"
+    },
+    {
+        "name": "Samoa",
+        "dial_code": "+685",
+        "code": "WS"
+    },
+    {
+        "name": "San Marino",
+        "dial_code": "+378",
+        "code": "SM"
+    },
+    {
+        "name": "Sao Tome and Principe",
+        "dial_code": "+239",
+        "code": "ST"
+    },
+    {
+        "name": "Saudi Arabia",
+        "dial_code": "+966",
+        "code": "SA"
+    },
+    {
+        "name": "Senegal",
+        "dial_code": "+221",
+        "code": "SN"
+    },
+    {
+        "name": "Serbia",
+        "dial_code": "+381",
+        "code": "RS"
+    },
+    {
+        "name": "Seychelles",
+        "dial_code": "+248",
+        "code": "SC"
+    },
+    {
+        "name": "Sierra Leone",
+        "dial_code": "+232",
+        "code": "SL"
+    },
+    {
+        "name": "Singapore",
+        "dial_code": "+65",
+        "code": "SG"
+    },
+    {
+        "name": "Slovakia",
+        "dial_code": "+421",
+        "code": "SK"
+    },
+    {
+        "name": "Slovenia",
+        "dial_code": "+386",
+        "code": "SI"
+    },
+    {
+        "name": "Solomon Islands",
+        "dial_code": "+677",
+        "code": "SB"
+    },
+    {
+        "name": "Somalia",
+        "dial_code": "+252",
+        "code": "SO"
+    },
+    {
+        "name": "South Africa",
+        "dial_code": "+27",
+        "code": "ZA"
+    },
+    {
+        "name": "South Sudan",
+        "dial_code": "+211",
+        "code": "SS"
+    },
+    {
+        "name": "South Georgia and the South Sandwich Islands",
+        "dial_code": "+500",
+        "code": "GS"
+    },
+    {
+        "name": "Spain",
+        "dial_code": "+34",
+        "code": "ES"
+    },
+    {
+        "name": "Sri Lanka",
+        "dial_code": "+94",
+        "code": "LK"
+    },
+    {
+        "name": "Sudan",
+        "dial_code": "+249",
+        "code": "SD"
+    },
+    {
+        "name": "Suriname",
+        "dial_code": "+597",
+        "code": "SR"
+    },
+    {
+        "name": "Svalbard and Jan Mayen",
+        "dial_code": "+47",
+        "code": "SJ"
+    },
+    {
+        "name": "Swaziland",
+        "dial_code": "+268",
+        "code": "SZ"
+    },
+    {
+        "name": "Sweden",
+        "dial_code": "+46",
+        "code": "SE"
+    },
+    {
+        "name": "Switzerland",
+        "dial_code": "+41",
+        "code": "CH"
+    },
+    {
+        "name": "Syrian Arab Republic",
+        "dial_code": "+963",
+        "code": "SY"
+    },
+    {
+        "name": "Taiwan",
+        "dial_code": "+886",
+        "code": "TW"
+    },
+    {
+        "name": "Tajikistan",
+        "dial_code": "+992",
+        "code": "TJ"
+    },
+    {
+        "name": "Tanzania, United Republic of Tanzania",
+        "dial_code": "+255",
+        "code": "TZ"
+    },
+    {
+        "name": "Thailand",
+        "dial_code": "+66",
+        "code": "TH"
+    },
+    {
+        "name": "Timor-Leste",
+        "dial_code": "+670",
+        "code": "TL"
+    },
+    {
+        "name": "Togo",
+        "dial_code": "+228",
+        "code": "TG"
+    },
+    {
+        "name": "Tokelau",
+        "dial_code": "+690",
+        "code": "TK"
+    },
+    {
+        "name": "Tonga",
+        "dial_code": "+676",
+        "code": "TO"
+    },
+    {
+        "name": "Trinidad and Tobago",
+        "dial_code": "+1868",
+        "code": "TT"
+    },
+    {
+        "name": "Tunisia",
+        "dial_code": "+216",
+        "code": "TN"
+    },
+    {
+        "name": "Turkey",
+        "dial_code": "+90",
+        "code": "TR"
+    },
+    {
+        "name": "Turkmenistan",
+        "dial_code": "+993",
+        "code": "TM"
+    },
+    {
+        "name": "Turks and Caicos Islands",
+        "dial_code": "+1649",
+        "code": "TC"
+    },
+    {
+        "name": "Tuvalu",
+        "dial_code": "+688",
+        "code": "TV"
+    },
+    {
+        "name": "Uganda",
+        "dial_code": "+256",
+        "code": "UG"
+    },
+    {
+        "name": "Ukraine",
+        "dial_code": "+380",
+        "code": "UA"
+    },
+    {
+        "name": "United Arab Emirates",
+        "dial_code": "+971",
+        "code": "AE"
+    },
+    {
+        "name": "United Kingdom",
+        "dial_code": "+44",
+        "code": "GB"
+    },
+    {
+        "name": "United States",
+        "dial_code": "+1",
+        "code": "US"
+    },
+    {
+        "name": "Uruguay",
+        "dial_code": "+598",
+        "code": "UY"
+    },
+    {
+        "name": "Uzbekistan",
+        "dial_code": "+998",
+        "code": "UZ"
+    },
+    {
+        "name": "Vanuatu",
+        "dial_code": "+678",
+        "code": "VU"
+    },
+    {
+        "name": "Venezuela, Bolivarian Republic of Venezuela",
+        "dial_code": "+58",
+        "code": "VE"
+    },
+    {
+        "name": "Vietnam",
+        "dial_code": "+84",
+        "code": "VN"
+    },
+    {
+        "name": "Virgin Islands, British",
+        "dial_code": "+1284",
+        "code": "VG"
+    },
+    {
+        "name": "Virgin Islands, U.S.",
+        "dial_code": "+1340",
+        "code": "VI"
+    },
+    {
+        "name": "Wallis and Futuna",
+        "dial_code": "+681",
+        "code": "WF"
+    },
+    {
+        "name": "Yemen",
+        "dial_code": "+967",
+        "code": "YE"
+    },
+    {
+        "name": "Zambia",
+        "dial_code": "+260",
+        "code": "ZM"
+    },
+    {
+        "name": "Zimbabwe",
+        "dial_code": "+263",
+        "code": "ZW"
+    }
+]
+
+export default codeCountries;
\ No newline at end of file
diff --git a/src/views/live-preview/pages/attributes-value/attributes-value.vue b/src/views/live-preview/pages/attributes-value/attributes-value.vue
new file mode 100644
index 0000000..59273dd
--- /dev/null
+++ b/src/views/live-preview/pages/attributes-value/attributes-value.vue
@@ -0,0 +1,463 @@
+<script>
+import Layout from "@/layout/custom.vue";
+import ApiServiece from "@/services/ApiService";
+import moment from "jalali-moment";
+import { onMounted, ref, watch, computed } from "vue";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import Swal from "sweetalert2";
+import { useRoute } from "vue-router"
+import AddAttributeValue from "@/components/modals/attribute-value/addAttributeValue.vue";
+import EditAttributeValue from "@/components/modals/attribute-value/editAttributeValue.vue";
+
+export default {
+  name: "BORDER",
+  components: {
+    EditAttributeValue,
+    AddAttributeValue,
+    Layout,
+  },
+  setup() {
+    const searchPage = ref();
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const paginate = ref(20);
+    const page = ref(1);
+    const attributeValues = ref();
+    const filterLoading = ref(false);
+    const searchQuery = ref("");
+    const attributes = ref();
+    const attributeTitle = ref();
+    const attributeId = ref();
+    const attributeCode = ref();
+    const attrRow = ref(null)
+    const route = useRoute()
+
+    let searchTimeout = null;
+    const convertToJalali = (date) => {
+      return moment(date, "YYYY-MM-DD HH:mm:ss")
+          .locale("fa")
+          .format("YYYY/MM/DD");
+    };
+    const handleSearchChange = () => {
+      clearTimeout(searchTimeout);
+
+      searchTimeout = setTimeout(() => {
+        getAttributes();
+        page.value = 1;
+      }, 500);
+    };
+    watch(searchQuery, () => {
+      handleSearchChange();
+    });
+    const getAttributes = () => {
+      filterLoading.value = true;
+      ApiServiece.get(`admin/attribute-values?attribute_id=${route?.params?.id}&title=${encodeURIComponent(
+          searchQuery.value || ""
+      )}&code=${encodeURIComponent(searchQuery.value || "")}
+        &paginate=${paginate.value || 10}&page=${page.value || 1}`)
+          .then((resp) => {
+            filterLoading.value = false;
+            attributes.value = resp.data.data.data;
+            currentPage.value = resp.data.data.current_page;
+            totalPages.value = resp.data.data.last_page;
+          })
+          .catch(() => {
+            filterLoading.value = false;
+          });
+    };
+
+    const handleAttributeUpdated = () => {
+      getAttributes();
+    };
+
+    const nextPage = () => {
+      if (currentPage.value < totalPages.value) {
+        page.value++;
+        getAttributes();
+      }
+    };
+
+    const prevPage = () => {
+      if (currentPage.value > 1) {
+        page.value--;
+        getAttributes();
+      }
+    };
+
+    function handlePageInput() {
+      if (searchPage.value < 1) {
+        searchPage.value = 1;
+      } else if (searchPage.value > totalPages.value) {
+        searchPage.value = totalPages.value;
+      }
+
+      if (searchPage.value >= 1 && searchPage.value <= totalPages.value) {
+        page.value = searchPage.value;
+      }
+    }
+
+    const visiblePages = computed(() => {
+      const pages = [];
+      if (totalPages.value <= 5) {
+        for (let i = 1; i <= totalPages.value; i++) {
+          pages.push(i);
+        }
+      } else {
+        let start = currentPage.value - 2;
+        let end = currentPage.value + 2;
+
+        if (start < 1) {
+          end += 1 - start;
+          start = 1;
+        }
+        if (end > totalPages.value) {
+          start -= end - totalPages.value;
+          end = totalPages.value;
+        }
+        start = Math.max(start, 1);
+
+        for (let i = start; i <= end; i++) {
+          pages.push(i);
+        }
+      }
+      return pages;
+    });
+
+    watch(page, () => {
+      getAttributes();
+    });
+
+    const deleteAttribute = (id, title) => {
+      Swal.fire({
+        text: `می خواهید رنگ ${title ?? ''} را حذف کنید ؟`,
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#3085d6",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "بله!",
+        cancelButtonText: "خیر",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          ApiServiece.delete(`admin/attribute-values/${id}`)
+              .then(() => {
+                toast.success("!ویژگی با موفقیت حذف شد", {
+                  position: "top-right",
+                  autoClose: 3000,
+                });
+                attributes.value = attributes.value.filter(
+                    (attribute) => attribute.id !== id
+                );
+              })
+              .catch((err) => {
+                console.log(err);
+                toast.error("!مشکلی در حذف کردن ویژگی پیش آمد", {
+                  position: "top-right",
+                  autoClose: 3000,
+                });
+              });
+        }
+      });
+    };
+
+    const editModalData = attr => {
+      attrRow.value = attr
+    }
+
+    const getAttributeValues = () => {
+      ApiServiece.get(`admin/attributes`).then((resp) => {
+        console.log(resp);
+        attributeValues.value = resp.data.data;
+      });
+    };
+
+    onMounted(() => {
+      getAttributes();
+      getAttributeValues();
+    });
+
+    return {
+      attributes,
+      convertToJalali,
+      handleAttributeUpdated,
+      editModalData,
+      deleteAttribute,
+      searchQuery,
+      filterLoading,
+      attributeId,
+      attributeCode,
+      attributeTitle,
+      attributeValues,
+      searchPage,
+      currentPage,
+      totalPages,
+      paginate,
+      page,
+      prevPage,
+      nextPage,
+      handlePageInput,
+      visiblePages,
+      attrRow
+    };
+  },
+};
+</script>
+
+<template>
+  <Layout>
+    <BRow>
+      <div class="col-md-12">
+        <div class="card shadow-sm border-0 rounded">
+          <div
+              class="card-header d-flex justify-content-between align-items-center p-3"
+              dir="rtl"
+          >
+            <div class="d-flex align-items-center">
+              <input
+                  v-model="searchQuery"
+                  type="text"
+                  placeholder="جستجو..."
+                  class="form-control form-control-sm d-inline-block me-2"
+                  style="width: 250px; border-radius: 15px"
+              />
+
+            </div>
+            <button
+                data-bs-toggle="modal"
+                data-bs-target="#addAttributeValue"
+                class="btn btn-light text-primary btn-sm px-3"
+            >
+              افزودن مقدار ویژگی
+            </button>
+          </div>
+          <div v-if="!filterLoading" class="card-body table-border-style p-0">
+            <div class="table-responsive">
+              <table class="table table-hover table-bordered m-0" dir="rtl">
+                <thead class="table-light">
+                <tr>
+                  <th>تاریخ ایجاد</th>
+                  <th>نام</th>
+                  <th>رنگ</th>
+                  <th>عملیات</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="attribute in attributes" :key="attribute.id">
+                  <td>{{ convertToJalali(attribute?.created_at) }}</td>
+                  <td>{{ attribute?.translation?.title }}</td>
+                  <td>
+                    <span class="rounded-circle m-auto d-block" :style="{ background: attribute?.code, width: '20px', height: '20px' }" />
+                  </td>
+                  <td>
+                    <button
+                        @click="
+                          editModalData(attribute)
+                        "
+                        data-bs-toggle="modal"
+                        data-bs-target="#editAttributeValue"
+                        class="btn btn-sm btn-outline-warning me-1"
+                    >
+                      ویرایش
+                    </button>
+                    <button
+                        @click="deleteAttribute(attribute?.id, attribute?.translation?.title)"
+                        class="btn btn-sm btn-outline-danger"
+                    >
+                      حذف
+                    </button>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+              v-else
+              class="filter-loader card table-card user-profile-list"
+          ></div>
+        </div>
+      </div>
+      <AddAttributeValue
+          :attributeValues="attributeValues"
+          @attribute-updated="handleAttributeUpdated()"
+      />
+      <edit-attribute-value
+          :attrRow="attrRow"
+          @attribute-updated="handleAttributeUpdated()"
+      />
+    </BRow>
+    <BRow>
+      <BCol sm="12">
+        <div class="d-flex justify-content-center">
+          <nav aria-label="Page navigation">
+            <ul class="pagination">
+              <!-- Previous page -->
+              <li class="page-item" :class="{ disabled: currentPage === 1 }">
+                <span class="page-link" @click="prevPage">قبلی</span>
+              </li>
+
+              <!-- First page and leading dots -->
+              <li
+                  v-if="visiblePages[0] > 1"
+                  class="page-item"
+                  @click="page = 1"
+              >
+                <a class="page-link" href="javascript:void(0)">1</a>
+              </li>
+              <li v-if="visiblePages[0] > 2" class="page-item disabled">
+                <span class="page-link">...</span>
+              </li>
+
+              <!-- Visible pages -->
+              <li
+                  v-for="n in visiblePages"
+                  :key="n"
+                  class="page-item"
+                  :class="{ active: currentPage === n }"
+              >
+                <a
+                    class="page-link"
+                    href="javascript:void(0)"
+                    @click="page = n"
+                >
+                  {{ n }}
+                </a>
+              </li>
+
+              <!-- Trailing dots and last page -->
+              <li
+                  v-if="visiblePages[visiblePages.length - 1] < totalPages - 1"
+                  class="page-item disabled"
+              >
+                <span class="page-link">...</span>
+              </li>
+              <li
+                  v-if="visiblePages[visiblePages.length - 1] < totalPages"
+                  class="page-item"
+                  @click="page = totalPages"
+              >
+                <a class="page-link" href="javascript:void(0)">
+                  {{ totalPages }}
+                </a>
+              </li>
+
+              <!-- Next page -->
+              <li
+                  class="page-item"
+                  :class="{ disabled: currentPage === totalPages }"
+              >
+                <span class="page-link" @click="nextPage">بعدی</span>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </BCol>
+      <BCol sm="4">
+        <div class="ms-0 search-number">
+          <input
+              v-model="searchPage"
+              type="text"
+              class="form-control"
+              placeholder="برو به صفحه"
+              :max="totalPages"
+              min="1"
+              @input="handlePageInput"
+          />
+        </div>
+      </BCol>
+    </BRow>
+  </Layout>
+</template>
+
+<style scoped>
+.card {
+  transition: transform 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-3px);
+}
+.table th,
+.table td {
+  vertical-align: middle;
+  text-align: center;
+}
+.filter-loader {
+  border: 4px solid rgba(0, 123, 255, 0.3);
+  border-top: 4px solid #007bff;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 20px auto;
+}
+.Brand-Image {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+.subject-box {
+  padding: 8px 14px;
+  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
+  color: #ef6c00;
+  font-weight: 600;
+  border-radius: 10px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.subject-box i {
+  color: #ef6c00;
+  font-size: 1rem;
+}
+
+.subject-box:hover {
+  transform: translateY(-2px);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+}
+.search-number {
+  display: flex;
+  align-items: center;
+}
+
+.search-number input {
+  width: 150px;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border-radius: 0.375rem;
+  margin-bottom: 7px;
+  border: 1px solid #ced4da;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.search-number input:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
+}
+
+.search-number input::placeholder {
+  color: #6c757d;
+}
+
+.search-number input:disabled {
+  background-color: #f8f9fa;
+  cursor: not-allowed;
+}
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.page-item {
+  flex: 0 0 auto;
+}
+
+.page-link {
+  cursor: pointer;
+  user-select: none;
+}
+</style>
diff --git a/src/views/live-preview/pages/attributes/attributes.vue b/src/views/live-preview/pages/attributes/attributes.vue
index 962f959..5d62c59 100644
--- a/src/views/live-preview/pages/attributes/attributes.vue
+++ b/src/views/live-preview/pages/attributes/attributes.vue
@@ -8,6 +8,7 @@ import "vue3-toastify/dist/index.css";
 import Swal from "sweetalert2";
 import addAttribute from "@/components/modals/attribute/addAttribute.vue";
 import editAttribute from "@/components/modals/attribute/editAttribute.vue";
+import router from "@/router";
 export default {
   name: "BORDER",
   components: {
@@ -28,6 +29,8 @@ export default {
     const attributeTitle = ref();
     const attributeId = ref();
     const attributeCode = ref();
+    const attrRow = ref(null)
+
     let searchTimeout = null;
     const convertToJalali = (date) => {
       return moment(date, "YYYY-MM-DD HH:mm:ss")
@@ -48,7 +51,7 @@ export default {
     const getAttributes = () => {
       filterLoading.value = true;
       ApiServiece.get(
-        `admin/attribute-values?attribute_id=1&title=${encodeURIComponent(
+        `admin/attributes?attribute_id=1&title=${encodeURIComponent(
           searchQuery.value || ""
         )}&code=${encodeURIComponent(searchQuery.value || "")}
         &paginate=${paginate.value || 10}&page=${page.value || 1}
@@ -56,11 +59,9 @@ export default {
       )
         .then((resp) => {
           filterLoading.value = false;
-          console.log(resp.data);
           attributes.value = resp.data.data.data;
           currentPage.value = resp.data.data.current_page;
           totalPages.value = resp.data.data.last_page;
-          console.log(attributes.value);
         })
         .catch(() => {
           filterLoading.value = false;
@@ -123,13 +124,14 @@ export default {
       }
       return pages;
     });
+
     watch(page, () => {
       getAttributes();
     });
 
     const deleteAttribute = (id, title) => {
       Swal.fire({
-        text: `می خواهید رنگ ${title} را حذف کنید ؟`,
+        text: `می خواهید رنگ ${title ?? ''} را حذف کنید ؟`,
         icon: "warning",
         showCancelButton: true,
         confirmButtonColor: "#3085d6",
@@ -138,7 +140,7 @@ export default {
         cancelButtonText: "خیر",
       }).then((result) => {
         if (result.isConfirmed) {
-          ApiServiece.delete(`admin/attribute-values/${id}`)
+          ApiServiece.delete(`admin/attributes/${id}`)
             .then(() => {
               toast.success("!ویژگی با موفقیت حذف شد", {
                 position: "top-right",
@@ -159,13 +161,9 @@ export default {
       });
     };
 
-    const editModalData = (id, title, code) => {
-      attributeId.value = id;
-      attributeTitle.value = title;
-      attributeCode.value = code;
-    };
-
- 
+    const editModalData = attr => {
+      attrRow.value = attr
+    }
 
     const getAttributeValues = () => {
       ApiServiece.get(`admin/attributes`).then((resp) => {
@@ -174,10 +172,15 @@ export default {
       });
     };
 
+    const redirectToAttrValue = id => {
+      router.push(`/attributes-value/${id}`)
+    }
+
     onMounted(() => {
       getAttributes();
       getAttributeValues();
     });
+
     return {
       attributes,
       convertToJalali,
@@ -199,10 +202,13 @@ export default {
       nextPage,
       handlePageInput,
       visiblePages,
+      attrRow,
+      redirectToAttrValue
     };
   },
 };
 </script>
+
 <template>
   <Layout>
     <BRow>
@@ -227,7 +233,7 @@ export default {
                 data-bs-target="#addAttribute"
                 class="btn btn-light text-primary btn-sm px-3"
               >
-                افزودن رنگ
+                افزودن ویژگی
               </button>
           </div>
           <div v-if="!filterLoading" class="card-body table-border-style p-0">
@@ -235,46 +241,40 @@ export default {
               <table class="table table-hover table-bordered m-0" dir="rtl">
                 <thead class="table-light">
                   <tr>
-                    <th>نام</th>
-                    <th>رنگ</th>
-                    <th>کد رنگ</th>
                     <th>تاریخ ایجاد</th>
+                    <th>نام</th>
+                    <th>دسته بندی</th>
                     <th>عملیات</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr v-for="attribute in attributes" :key="attribute.id">
-                    <td>{{ attribute.title }}</td>
-                    <td
-                      :style="{
-                        backgroundColor: attribute.code,
-                        textAlign: 'center',
-                      }"
-                    ></td>
-                    <td>{{ attribute.code }}</td>
-
                     <td>{{ convertToJalali(attribute?.created_at) }}</td>
+                    <td>{{ attribute?.translation?.title }}</td>
+                    <td>{{ attribute?.category?.translation?.title }}</td>
                     <td>
-                      <!-- <button
+                       <button
                         @click="
-                          editModalData(
-                            attribute?.id,
-                            attribute?.title,
-                            attribute.code
-                          )
+                          editModalData(attribute)
                         "
                         data-bs-toggle="modal"
                         data-bs-target="#editAttribute"
                         class="btn btn-sm btn-outline-warning me-1"
                       >
                         ویرایش
-                      </button> -->
+                      </button>
                       <button
-                        @click="deleteAttribute(attribute.id, attribute.title)"
+                        @click="deleteAttribute(attribute?.id, attribute?.translation?.title)"
                         class="btn btn-sm btn-outline-danger"
                       >
                         حذف
                       </button>
+                      <button
+                          @click="redirectToAttrValue(attribute?.id)"
+                          class="btn btn-sm btn-outline-primary me-1"
+                      >
+                        مقدار ویژگی ها
+                      </button>
                     </td>
                   </tr>
                 </tbody>
@@ -296,6 +296,7 @@ export default {
         :title="attributeTitle"
         :code="attributeCode"
         :attributeValues="attributeValues"
+        :attrRow="attrRow"
         @attribute-updated="handleAttributeUpdated()"
       />
     </BRow>
diff --git a/src/views/live-preview/pages/banners/addBanner.vue b/src/views/live-preview/pages/banners/addBanner.vue
index 4a19d9a..adb314f 100644
--- a/src/views/live-preview/pages/banners/addBanner.vue
+++ b/src/views/live-preview/pages/banners/addBanner.vue
@@ -58,339 +58,395 @@
             </div>
           </BCardHeader>
           <BCardBody>
-            <BRow class="g-3">
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">عنوان</label>
-                  <input
-                    type="text"
-                    v-model="title"
-                    class="form-control"
-                    placeholder="عنوان بنر"
-                    :class="{ 'is-invalid': errors.title }"
-                    @input="clearError('title')"
-                  />
-                </div>
-                <small v-if="errors.title" class="text-danger">
-                  {{ errors.title }}
-                </small>
-              </BCol>
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">پنل نمایش</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="pannel"
-                    @change="clearError('pannel')"
-                    :class="{ 'is-invalid': errors.pannel }"
-                    placeholder="انتخاب پنل"
-                  >
-                    <option value="wholesale">پنل عمده فروشی</option>
-                    <option value="web">وب سایت و اپلیکیشن</option>
-                  </select>
-                </div>
-                <small v-if="errors.pannel" class="text-danger">
-                  {{ errors.pannel }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">نمایش در</label>
-                  <select
-                    v-model="pageType"
-                    :class="{ 'is-invalid': errors.pageType }"
-                    class="form-select"
-                    aria-label="Default select example"
-                    placeholder="انتخاب صفحه"
-                    @change="clearError('pageType')"
-                  >
-                    <option value="main_page">صفحه اصلی</option>
-                    <option value="category">صفحه دسته</option>
-                    <option value="special_page">صفحه فروش ویژه</option>
-                    <option value="brand">صفحه برند</option>
-                    <option value="blog_page">صفحه بلاگ</option>
-                  </select>
-                </div>
-                <small v-if="errors.pageType" class="text-danger">
-                  {{ errors.pageType }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">صفحه دسته</label>
-
-                  <VueSelect
-                    style="--vs-min-height: 48px; --vs-border-radius: 8px"
-                    v-model="selectedCatPage"
-                    :isLoading="categoryPageSelectorLoader"
-                    :options="formattedCategoriesPages"
-                    @change="clearError('selectedCatPage')"
-                    placeholder="دسته ای را انتخاب کنید"
-                    @search="handleCategoryPageSearch"
-                  />
-                </div>
-                <small v-if="errors.selectedCatPage" class="text-danger">
-                  {{ errors.selectedCatPage }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">صفحه برند</label>
-
-                  <VueSelect
-                    style="--vs-min-height: 48px; --vs-border-radius: 8px"
-                    v-model="selectedBrandPage"
-                    :isLoading="brandSelectorLoader"
-                    :options="formattedBrands"
-                    @change="clearError(`selectedBrandPage`)"
-                    placeholder="برندی را انتخاب کنید"
-                    @search="handleBrandSearch"
-                  />
-                </div>
-                <small v-if="errors.selectedBrandPage" class="text-danger">
-                  {{ errors.selectedBrandPage }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pannel != 'wholesale' && pannel" md="6">
-                <div class="form-group">
-                  <label class="form-label">انتخاب صفحه فرود</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="landingType"
-                    @change="clearError('landingType')"
-                    :class="{ 'is-invalid': errors.landingType }"
-                    placeholder="انتخاب صفحه فرود"
+
+            <Steppy
+                v-model:step="step"
+                :tabs="[
+                 { title: 'ایجاد بنر', isValid: true },
+                 { title: 'ترجمه ها', isValid: true },
+              ]"
+                backText="قبلی"
+                nextText="بعدی"
+                doneText="ذخیره"
+                primaryColor1="#04A9F5"
+                circleSize="45"
+            >
+              <template #1>
+                <BRow class="g-3">
+                  <BCol>
+                    <div class="form-group">
+                      <label class="form-label">عنوان</label>
+                      <input
+                          type="text"
+                          v-model="title"
+                          class="form-control"
+                          placeholder="عنوان بنر"
+                          :class="{ 'is-invalid': errors.title }"
+                          @input="clearError('title')"
+                      />
+                    </div>
+                    <small v-if="errors.title" class="text-danger">
+                      {{ errors.title }}
+                    </small>
+                  </BCol>
+
+<!--                  <BCol md="6">-->
+<!--                    <div class="form-group">-->
+<!--                      <label class="form-label">پنل نمایش</label>-->
+<!--                      <select-->
+<!--                          class="form-select"-->
+<!--                          aria-label="Default select example"-->
+<!--                          v-model="pannel"-->
+<!--                          @change="clearError('pannel')"-->
+<!--                          :class="{ 'is-invalid': errors.pannel }"-->
+<!--                          placeholder="انتخاب پنل"-->
+<!--                      >-->
+<!--                        <option value="wholesale">پنل عمده فروشی</option>-->
+<!--                        <option value="web">وب سایت و اپلیکیشن</option>-->
+<!--                      </select>-->
+<!--                    </div>-->
+<!--                    <small v-if="errors.pannel" class="text-danger">-->
+<!--                      {{ errors.pannel }}-->
+<!--                    </small>-->
+<!--                  </BCol>-->
+
+                  <BCol v-if="pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">نمایش در</label>
+                      <select
+                          v-model="pageType"
+                          :class="{ 'is-invalid': errors.pageType }"
+                          class="form-select"
+                          aria-label="Default select example"
+                          placeholder="انتخاب صفحه"
+                          @change="clearError('pageType')"
+                      >
+                        <option value="main_page">صفحه اصلی</option>
+                        <option value="category">صفحه دسته</option>
+                        <option value="special_page">صفحه فروش ویژه</option>
+                        <option value="brand">صفحه برند</option>
+                        <option value="blog_page">صفحه بلاگ</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.pageType" class="text-danger">
+                      {{ errors.pageType }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">صفحه دسته</label>
+
+                      <VueSelect
+                          style="--vs-min-height: 48px; --vs-border-radius: 8px"
+                          v-model="selectedCatPage"
+                          :isLoading="categoryPageSelectorLoader"
+                          :options="formattedCategoriesPages"
+                          @change="clearError('selectedCatPage')"
+                          placeholder="دسته ای را انتخاب کنید"
+                          @search="handleCategoryPageSearch"
+                      />
+                    </div>
+                    <small v-if="errors.selectedCatPage" class="text-danger">
+                      {{ errors.selectedCatPage }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">صفحه برند</label>
+
+                      <VueSelect
+                          style="--vs-min-height: 48px; --vs-border-radius: 8px"
+                          v-model="selectedBrandPage"
+                          :isLoading="brandSelectorLoader"
+                          :options="formattedBrands"
+                          @change="clearError(`selectedBrandPage`)"
+                          placeholder="برندی را انتخاب کنید"
+                          @search="handleBrandSearch"
+                      />
+                    </div>
+                    <small v-if="errors.selectedBrandPage" class="text-danger">
+                      {{ errors.selectedBrandPage }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pannel != 'wholesale' && pannel" md="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب صفحه فرود</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="landingType"
+                          @change="clearError('landingType')"
+                          :class="{ 'is-invalid': errors.landingType }"
+                          placeholder="انتخاب صفحه فرود"
+                      >
+                        <option value="product">صفحه محصولات</option>
+                        <option value="cat">صفحه دسته ها</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.landingType" class="text-danger">
+                      {{ errors.landingType }}
+                    </small>
+                  </BCol>
+
+                  <BCol
+                      v-if="landingType === 'product'"
+                      sm="6"
+                      class="mt-3"
+                      style="margin-top: 30px"
                   >
-                    <option value="product">صفحه محصولات</option>
-                    <option value="cat">صفحه دسته ها</option>
-                  </select>
-                </div>
-                <small v-if="errors.landingType" class="text-danger">
-                  {{ errors.landingType }}
-                </small>
-              </BCol>
-
-              <BCol
-                v-if="landingType === 'product'"
-                sm="6"
-                class="mt-3"
-                style="margin-top: 30px"
-              >
-                <label for="token">صفحه کدام محصول</label>
-
-                <VueSelect
-                  style="
+                    <label for="token">صفحه کدام محصول</label>
+
+                    <VueSelect
+                        style="
                     --vs-min-height: 48px;
                     --vs-border-radius: 8px;
                     margin-top: 7px;
                   "
-                  v-model="selectedLandingProduct"
-                  :isLoading="productSelectorLoader"
-                  @change="clearError(`selectedLandingProduct`)"
-                  :options="formattedProducts"
-                  placeholder="محصولی را انتخاب کنید"
-                  @search="handleSearch"
-                />
-                <small v-if="errors.selectedLandingProduct" class="text-danger">
-                  {{ errors.selectedLandingProduct }}
-                </small>
-              </BCol>
-
-              <BCol v-if="landingType === 'cat'" md="6">
-                <div class="form-group">
-                  <label class="form-label">صفحه کدام دسته</label>
-
-                  <VueSelect
-                    style="--vs-min-height: 48px; --vs-border-radius: 8px"
-                    v-model="selectedLandingCat"
-                    @change="clearError('selectedLandingCat')"
-                    :isLoading="categorySelectorLoader"
-                    :options="formattedCategories"
-                    placeholder="دسته ای را انتخاب کنید"
-                    @search="handleCategorySearch"
-                  />
-                </div>
-                <small v-if="errors.selectedLandingCat" class="text-danger">
-                  {{ errors.selectedLandingCat }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'main_page' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه اصلی</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
-                  >
-                    <option value="A">َA-Slideshow</option>
-                    <option value="B">B-Banner</option>
-                    <option value="C">C-Banner</option>
-                    <option value="D">D-Banner</option>
-                    <option value="E">E-Banner</option>
-                    <option value="F">F-Banner</option>
-                    <option value="G">G-Banner</option>
-                    <option value="H">H-Banner</option>
-                    <option value="I">I-Banner</option>
-                    <option value="J">J-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه دسته ها</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
-                  >
-                    <option value="A">َA-Slideshow</option>
-                    <option value="B">B-Banner</option>
-                    <option value="C">C-Banner</option>
-                    <option value="D">D-Banner</option>
-                    <option value="E">E-Banner</option>
-                    <option value="F">F-Banner</option>
-                    <option value="G">G-Banner</option>
-                    <option value="H">H-Banner</option>
-                    <option value="I">I-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol
-                v-if="pageType === 'special_page' && pannel === 'web'"
-                md="6"
-              >
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه فروش ویژه</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
-                    :value="(selectedLoc = 'A')"
-                  >
-                    <option value="A">A-Slideshow</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol
-                v-if="pageType === 'blog_page' && pannel === 'web'"
-                md="6"
-              >
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه بلاگ</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
-                    :value="(selectedLoc = 'A')"
+                        v-model="selectedLandingProduct"
+                        :isLoading="productSelectorLoader"
+                        @change="clearError(`selectedLandingProduct`)"
+                        :options="formattedProducts"
+                        placeholder="محصولی را انتخاب کنید"
+                        @search="handleSearch"
+                    />
+                    <small v-if="errors.selectedLandingProduct" class="text-danger">
+                      {{ errors.selectedLandingProduct }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="landingType === 'cat'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">صفحه کدام دسته</label>
+
+                      <VueSelect
+                          style="--vs-min-height: 48px; --vs-border-radius: 8px"
+                          v-model="selectedLandingCat"
+                          @change="clearError('selectedLandingCat')"
+                          :isLoading="categorySelectorLoader"
+                          :options="formattedCategories"
+                          placeholder="دسته ای را انتخاب کنید"
+                          @search="handleCategorySearch"
+                      />
+                    </div>
+                    <small v-if="errors.selectedLandingCat" class="text-danger">
+                      {{ errors.selectedLandingCat }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'main_page' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه اصلی</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                      >
+                        <option value="A">َA-Slideshow</option>
+                        <option value="B">B-Banner</option>
+                        <option value="C">C-Banner</option>
+                        <option value="D">D-Banner</option>
+                        <option value="E">E-Banner</option>
+                        <option value="F">F-Banner</option>
+                        <option value="G">G-Banner</option>
+                        <option value="H">H-Banner</option>
+                        <option value="I">I-Banner</option>
+                        <option value="J">J-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه دسته ها</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                      >
+                        <option value="A">َA-Slideshow</option>
+                        <option value="B">B-Banner</option>
+                        <option value="C">C-Banner</option>
+                        <option value="D">D-Banner</option>
+                        <option value="E">E-Banner</option>
+                        <option value="F">F-Banner</option>
+                        <option value="G">G-Banner</option>
+                        <option value="H">H-Banner</option>
+                        <option value="I">I-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol
+                      v-if="pageType === 'special_page' && pannel === 'web'"
+                      md="6"
                   >
-                    <option value="A">A-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه برند</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه فروش ویژه</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                          :value="(selectedLoc = 'A')"
+                      >
+                        <option value="A">A-Slideshow</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol
+                      v-if="pageType === 'blog_page' && pannel === 'web'"
+                      md="6"
                   >
-                    <option value="A">َA-Slideshow</option>
-                    <option value="B">B-Banner</option>
-                    <option value="C">C-Banner</option>
-                    <option value="D">D-Banner</option>
-                    <option value="E">E-Banner</option>
-                    <option value="F">F-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol md="6" v-if="pannel">
-                <div class="form-group">
-                  <label class="form-label">تصویر بنر</label>
-
-                  <input
-                    type="file"
-                    accept="image/*"
-                    @change="handleImageUpload"
-                    class="form-control"
-                    :class="{ 'is-invalid': errors.image }"
-                  />
-
-                  <div v-if="imagePreview" class="mt-2">
-                    <img
-                      :src="imagePreview"
-                      alt="Image Preview"
-                      class="img-fluid rounded shadow-sm Image-Preview"
-                    />
-                  </div>
-
-                  <small v-if="errors.image" class="text-danger">
-                    {{ errors.image }}
-                  </small>
-                </div>
-              </BCol>
-            </BRow>
-          </BCardBody>
-          <BCardFooter>
-            <div class="d-flex justify-content-center">
-              <div class="text-center">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه بلاگ</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                          :value="(selectedLoc = 'A')"
+                      >
+                        <option value="A">A-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه برند</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                      >
+                        <option value="A">َA-Slideshow</option>
+                        <option value="B">B-Banner</option>
+                        <option value="C">C-Banner</option>
+                        <option value="D">D-Banner</option>
+                        <option value="E">E-Banner</option>
+                        <option value="F">F-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+                </BRow>
+
                 <button
-                  type="submit"
-                  class="btn btn-primary"
-                  @click.prevent="submitForm"
-                  :disabled="loading"
+                    type="submit"
+                    class="btn btn-primary mt-5"
+                    @click.prevent="submitForm"
+                    :disabled="loading"
                 >
-                  <span v-if="loading">
+                      <span v-if="loading">
+                        <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+                      </span>
+                  <span v-else>ایجاد</span>
+                </button>
+              </template>
+
+              <template #2>
+                <BRow>
+                  <BCol cols="6">
+                    <div class="form-group">
+                      <label class="form-label">تصویر بنر</label>
+
+                      <input
+                          type="file"
+                          accept="image/*"
+                          @change="handleImageUpload"
+                          class="form-control"
+                          :class="{ 'is-invalid': errors.image }"
+                      />
+
+                      <div v-if="imagePreview" class="mt-2">
+                        <img
+                            :src="imagePreview"
+                            alt="Image Preview"
+                            class="img-fluid rounded shadow-sm Image-Preview"
+                        />
+                      </div>
+
+                      <small v-if="errors.image" class="text-danger">
+                        {{ errors.image }}
+                      </small>
+                    </div>
+                  </BCol>
+
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب زبان</label>
+                      <select
+                          v-model="locale"
+                          class="form-control"
+                          placeholder="انتخاب کنید"
+                      >
+                        <option
+                            key="fa"
+                            value="fa"
+                        >
+                          فارسی
+                        </option>
+                        <option
+                            key="en"
+                            value="en"
+                        >
+                          انگلیسی
+                        </option>
+                        <option
+                            key="ar"
+                            value="ar"
+                        >
+                          عربی
+                        </option>
+                      </select>
+                    </div>
+                  </BCol>
+                </BRow>
+
+                <button
+                    @click.prevent="submitTranslation"
+                    :disabled="loadingFinally"
+                    class="btn btn-primary mt-5"
+                >
+                  <span v-if="loadingFinally">
                     <i class="fa fa-spinner fa-spin"></i> بارگذاری...
                   </span>
                   <span v-else>ایجاد</span>
                 </button>
-              </div>
-            </div>
-          </BCardFooter>
+              </template>
+            </Steppy>
+          </BCardBody>
         </BCard>
       </BCol>
     </BRow>
@@ -413,10 +469,12 @@ import "vue3-toastify/dist/index.css";
 import ApiServiece from "@/services/ApiService";
 import { ref, computed } from "vue";
 import Layout from "@/layout/custom.vue";
+import {Steppy} from "vue3-steppy";
 
 export default {
   name: "SAMPLE-PAGE",
   components: {
+    Steppy,
     Layout,
     mainPageBanner,
     catBanner,
@@ -437,7 +495,7 @@ export default {
     const selectedLandingCat = ref();
     const selectedLandingProduct = ref();
     const selectedLoc = ref();
-    const pannel = ref();
+    const pannel = ref('web');
     const image = ref();
     const imagePreview = ref();
     const productSelectorLoader = ref(false);
@@ -446,6 +504,10 @@ export default {
     const brandSelectorLoader = ref(false);
     const loading = ref(false);
     const errors = ref({});
+    const step = ref(1);
+    const locale = ref('fa');
+    const loadingFinally = ref(false);
+    const bannerId = ref(null);
 
     const handleSearch = async (searchTerm) => {
       if (searchTerm.length < 3) return;
@@ -465,10 +527,10 @@ export default {
     };
 
     const formattedBrands = computed(() =>
-      Array.isArray(brands.value) // ✅ Check if products.value is an array
+      Array.isArray(brands.value)
         ? brands.value.map((brand) => ({
             value: brand.id,
-            label: brand.title,
+            label: brand?.translation?.title,
           }))
         : []
     );
@@ -490,10 +552,10 @@ export default {
     };
 
     const formattedProducts = computed(() =>
-      Array.isArray(products.value) // ✅ Check if products.value is an array
+      Array.isArray(products.value)
         ? products.value.map((product) => ({
-            value: product.id,
-            label: product.title,
+            value: product?.id,
+            label: product?.translation?.title,
           }))
         : []
     );
@@ -516,9 +578,9 @@ export default {
 
     const formattedCategories = computed(() =>
       Array.isArray(cats.value)
-        ? cats.value.map((cat) => ({
-            value: cat.id,
-            label: cat.title,
+        ? cats.value?.map((cat) => ({
+            value: cat?.id,
+            label: cat?.translation?.title,
           }))
         : []
     );
@@ -542,8 +604,8 @@ export default {
     const formattedCategoriesPages = computed(() =>
       Array.isArray(categoryPages.value)
         ? categoryPages.value.map((categoryPage) => ({
-            value: categoryPage.id,
-            label: categoryPage.title,
+            value: categoryPage?.id,
+            label: categoryPage?.translation?.title,
           }))
         : []
     );
@@ -593,7 +655,7 @@ export default {
 
       if (!pannel.value) errors.value.pannel = "پنل نمایش بنر را انتخاب کنید";
 
-      if (!image.value) errors.value.image = "عکس بنر را وارد نمایید";
+      // if (!image.value) errors.value.image = "عکس بنر را وارد نمایید";
 
       return Object.keys(errors.value).length === 0;
     };
@@ -611,65 +673,72 @@ export default {
         return;
       }
       loading.value = true;
-      const formData = new FormData();
-      formData.append("title", title.value);
+
+      const params = {}
+
+      params.title = title.value;
 
       if (pageType.value === "category") {
-        formData.append("page_id", selectedCatPage.value);
+        params.page_id = selectedCatPage.value
       }
 
       if (pageType.value === "brand") {
-        formData.append("page_id", selectedBrandPage.value);
+        params.page_id = selectedBrandPage.value
       }
 
-      if (landingType.value === "product" && pannel.value != "wholesale") {
-        formData.append("product_id", selectedLandingProduct.value);
+      if (landingType.value === "product") {
+        params.page_id = selectedLandingProduct.value
       }
 
-      if (landingType.value === "cat" && pannel.value != "wholesale") {
-        formData.append("category_id", selectedLandingCat.value);
+      if (landingType.value === "cat") {
+        params.category_id = selectedLandingCat.value
       }
 
       if (selectedLoc.value === "A") {
-        formData.append("type", pageType.value === 'blog_page' ? "banner" :"slider");
+        params.type = pageType.value === 'blog_page' ? "banner" :"slider"
       }
 
       if (selectedLoc.value !== "A") {
-        formData.append("type", "banner");
+        params.type = "banner"
       }
 
       if (pannel.value === "wholesale") {
-        formData.append("type", "slider");
-        formData.append("location", "A");
+        params.type = "slider"
+
+        params.location = "A"
       }
 
       if (selectedLoc.value) {
-        formData.append("location", selectedLoc.value);
+        params.location = selectedLoc.value
       }
-      formData.append("panel", pannel.value);
+
+      params.panel = pannel.value
+
       if (pannel.value == "wholesale") {
-        formData.append("page_type", "main_page");
+        params.page_type = 'main_page'
       }
 
       if (pannel.value !== "wholesale") {
-        formData.append("page_type", pageType.value);
+        params.page_type = pageType.value
       }
 
-      formData.append("image", image.value);
-      formData.append("sort", 1);
+      params.sort = 1
 
-      ApiServiece.post(`admin/banners`, formData, {
+      ApiServiece.post(`admin/banners`, params, {
         headers: {
-          "content-type": "multipart",
           Authorization: `Bearer ${localStorage.getItem("token")}`,
         },
       })
-        .then((resp) => {
-          toast.success("!بنر با موفقیت اضافه شد", {
+        .then(({ data }) => {
+          toast.success(data?.message, {
             position: "top-right",
             autoClose: 1000,
           });
-          console.log(resp);
+
+          bannerId.value = data?.data?.id;
+
+          step.value++
+
           loading.value = false;
 
           resetForm();
@@ -683,6 +752,36 @@ export default {
           });
         });
     };
+
+    const submitTranslation = async () => {
+      try {
+        loadingFinally.value = true;
+
+        const formData = new FormData();
+
+        formData.append("image", image.value);
+
+        formData.append("locale", locale.value);
+
+        const { data: { message, success } } = await ApiServiece.post(`admin/banners/${bannerId.value}/translations`,formData,{
+          headers: {
+            'content-type': 'multipart/form-data',
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        })
+
+        if (success) {
+          toast.success(message)
+
+          //image.value = null
+        }
+      } catch (e) {
+        toast.error(e?.response?.data?.message)
+      } finally {
+        loadingFinally.value = false;
+      }
+    }
+
     const resetForm = () => {
       title.value = "";
       selectedCatPage.value = "";
@@ -729,6 +828,11 @@ export default {
       brandSelectorLoader,
       formattedBrands,
       handleBrandSearch,
+      step,
+      locale,
+      submitTranslation,
+      loadingFinally,
+      bannerId
     };
   },
 };
diff --git a/src/views/live-preview/pages/banners/banners.vue b/src/views/live-preview/pages/banners/banners.vue
index 415fa28..0d77529 100644
--- a/src/views/live-preview/pages/banners/banners.vue
+++ b/src/views/live-preview/pages/banners/banners.vue
@@ -203,7 +203,7 @@ export default {
         case 'category':
           return 'دسته ' + banner?.category_page?.title;
         case 'brand':
-          return 'برند ' + banner?.brand_page?.title
+          return 'برند ' + banner?.brand_page?.translation?.title
         case 'main_page':
           return 'صفحه اصلی'
         case 'special_page':
@@ -215,10 +215,10 @@ export default {
 
     const setProductOrCategory = (banner) => {
       if (banner?.category_id) {
-        return `دسته<br>${banner?.category?.title}`;
+        return `دسته<br>${banner?.category?.translation?.title ?? 'ندارد'}`;
       }
       if (banner?.product_id) {
-        return `محصول<br>${banner?.product?.title}`;
+        return `محصول<br>${banner?.product?.translation?.title ?? 'ندارد'}`;
       }
       return "";
     };
diff --git a/src/views/live-preview/pages/banners/editBanner.vue b/src/views/live-preview/pages/banners/editBanner.vue
index 4e09d47..cebcce3 100644
--- a/src/views/live-preview/pages/banners/editBanner.vue
+++ b/src/views/live-preview/pages/banners/editBanner.vue
@@ -58,350 +58,376 @@
             </div>
           </BCardHeader>
           <BCardBody>
-            <BRow class="g-3">
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">عنوان</label>
-                  <input
-                    type="text"
-                    v-model="title"
-                    class="form-control"
-                    placeholder="عنوان بنر"
-                    :class="{ 'is-invalid': errors.title }"
-                    @input="clearError('title')"
-                  />
-                </div>
-                <small v-if="errors.title" class="text-danger">
-                  {{ errors.title }}
-                </small>
-              </BCol>
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">پنل نمایش</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="pannel"
-                    @change="clearError('pannel')"
-                    :class="{ 'is-invalid': errors.pannel }"
-                    placeholder="انخاب پنل"
-                  >
-                    <option value="wholesale">پنل عمده فروشی</option>
-                    <option value="web">وب سایت و اپلیکیشن</option>
-                  </select>
-                </div>
-                <small v-if="errors.pannel" class="text-danger">
-                  {{ errors.pannel }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pannel === 'web' && pannel" md="6">
-                <div class="form-group">
-                  <label class="form-label">نمایش در</label>
-                  <select
-                    v-model="pageType"
-                    :class="{ 'is-invalid': errors.pageType }"
-                    class="form-select"
-                    aria-label="Default select example"
-                    @change="clearError('pageType')"
-                    placeholder="انخاب صفحه اصلی"
-                  >
-                    <option value="main_page">صفحه اصلی</option>
-                    <option value="category">صفحه دسته</option>
-                    <option value="special_page">صفحه فروش ویژه</option>
-                    <option value="brand">صفحه برند</option>
-                    <option value="blog_page">صفحه بلاگ</option>
-                  </select>
-                </div>
-                <small v-if="errors.pageType" class="text-danger">
-                  {{ errors.pageType }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">صفحه دسته</label>
-
-                  <VueSelect
-                    style="--vs-min-height: 48px; --vs-border-radius: 8px"
-                    v-model="selectedCatPage"
-                    @change="clearError('selectedCatPage')"
-                    label="label"
-                    :isLoading="categoryPageSelectorLoader"
-                    :reduce="(option) => option.value"
-                    :options="formattedCatPages"
-                    @search="handleCategoryPageSearch"
-                    placeholder="دسته ای را انتخاب کنید"
-                  />
-                </div>
-                <small v-if="errors.selectedCatPage" class="text-danger">
-                  {{ errors.selectedCatPage }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">صفحه برند</label>
-
-                  <VueSelect
-                    style="--vs-min-height: 48px; --vs-border-radius: 8px"
-                    v-model="selectedBrandPage"
-                    label="label"
-                    :isLoading="brandSelectorLoader"
-                    :reduce="(option) => option.value"
-                    :options="formattedBrands"
-                    @change="clearError(`selectedBrandPage`)"
-                    placeholder="برندی را انتخاب کنید"
-                    @search="handleBrandSearch"
-                  />
-                </div>
-                <small v-if="errors.selectedBrandPage" class="text-danger">
-                  {{ errors.selectedBrandPage }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pannel == 'web' && pannel" md="6">
-                <div class="form-group">
-                  <label class="form-label">انتخاب صفحه فرود</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="landingType"
-                    @change="clearError('landingType')"
-                    :class="{ 'is-invalid': errors.landingType }"
-                    placeholder="انتخاب صفحه فرود"
+
+            <BTabs>
+              <BTab title="ویرایش بنر">
+                <BRow class="g-3 mt-2">
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">عنوان</label>
+                      <input
+                          type="text"
+                          v-model="title"
+                          class="form-control"
+                          placeholder="عنوان بنر"
+                          :class="{ 'is-invalid': errors.title }"
+                          @input="clearError('title')"
+                      />
+                    </div>
+                    <small v-if="errors.title" class="text-danger">
+                      {{ errors.title }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pannel === 'web' && pannel" md="6">
+                    <div class="form-group">
+                      <label class="form-label">نمایش در</label>
+                      <select
+                          v-model="pageType"
+                          :class="{ 'is-invalid': errors.pageType }"
+                          class="form-select"
+                          aria-label="Default select example"
+                          @change="clearError('pageType')"
+                          placeholder="انخاب صفحه اصلی"
+                      >
+                        <option value="main_page">صفحه اصلی</option>
+                        <option value="category">صفحه دسته</option>
+                        <option value="special_page">صفحه فروش ویژه</option>
+                        <option value="brand">صفحه برند</option>
+                        <option value="blog_page">صفحه بلاگ</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.pageType" class="text-danger">
+                      {{ errors.pageType }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">صفحه دسته</label>
+
+                      <VueSelect
+                          style="--vs-min-height: 48px; --vs-border-radius: 8px"
+                          v-model="selectedCatPage"
+                          @change="clearError('selectedCatPage')"
+                          label="label"
+                          :isLoading="categoryPageSelectorLoader"
+                          :reduce="(option) => option.value"
+                          :options="formattedCatPages"
+                          @search="handleCategoryPageSearch"
+                          placeholder="دسته ای را انتخاب کنید"
+                      />
+                    </div>
+                    <small v-if="errors.selectedCatPage" class="text-danger">
+                      {{ errors.selectedCatPage }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">صفحه برند</label>
+
+                      <VueSelect
+                          style="--vs-min-height: 48px; --vs-border-radius: 8px"
+                          v-model="selectedBrandPage"
+                          label="label"
+                          :isLoading="brandSelectorLoader"
+                          :reduce="(option) => option.value"
+                          :options="formattedBrands"
+                          @change="clearError(`selectedBrandPage`)"
+                          placeholder="برندی را انتخاب کنید"
+                          @search="handleBrandSearch"
+                      />
+                    </div>
+                    <small v-if="errors.selectedBrandPage" class="text-danger">
+                      {{ errors.selectedBrandPage }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pannel == 'web' && pannel" md="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب صفحه فرود</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="landingType"
+                          @change="clearError('landingType')"
+                          :class="{ 'is-invalid': errors.landingType }"
+                          placeholder="انتخاب صفحه فرود"
+                      >
+                        <option value="product">صفحه محصولات</option>
+                        <option value="cat">صفحه دسته ها</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.landingType" class="text-danger">
+                      {{ errors.landingType }}
+                    </small>
+                  </BCol>
+
+                  <BCol
+                      v-if="landingType === 'product'"
+                      sm="6"
+                      class="mt-3"
+                      style="margin-top: 30px"
                   >
-                    <option value="product">صفحه محصولات</option>
-                    <option value="cat">صفحه دسته ها</option>
-                  </select>
-                </div>
-                <small v-if="errors.landingType" class="text-danger">
-                  {{ errors.landingType }}
-                </small>
-              </BCol>
-
-              <BCol
-                v-if="landingType === 'product'"
-                sm="6"
-                class="mt-3"
-                style="margin-top: 30px"
-              >
-                <label for="token">صفحه کدام محصول</label>
-
-                <VueSelect
-                  style="
+                    <label for="token">صفحه کدام محصول</label>
+
+                    <VueSelect
+                        style="
                     --vs-min-height: 48px;
                     --vs-border-radius: 8px;
                     margin-top: 7px;
                   "
-                  v-model="selectedLandingProduct"
-                  :reduce="(option) => option.value"
-                  label="label"
-                  :isLoading="productSelectorLoader"
-                  :options="formattedProducts"
-                  @search="handleProductSearch"
-                  placeholder="محصولی را انتخاب کنید"
-                />
-                <small v-if="errors.selectedLandingProduct" class="text-danger">
-                  {{ errors.selectedLandingProduct }}
-                </small>
-              </BCol>
-
-              <BCol v-if="landingType === 'cat'" md="6">
-                <div class="form-group">
-                  <label class="form-label">صفحه کدام دسته </label>
-
-                  <VueSelect
-                    style="--vs-min-height: 48px; --vs-border-radius: 8px"
-                    :isLoading="categorySelectorLoader"
-                    @change="clearError('selectedLandingCat')"
-                    label="label"
-                    v-model="selectedLandingCat"
-                    :reduce="(option) => option.value"
-                    :options="formattedCategories"
-                    placeholder="دسته ای را انتخاب کنید"
-                    @search="handleSearch"
-                  />
-                </div>
-                <small v-if="errors.selectedLandingCat" class="text-danger">
-                  {{ errors.selectedLandingCat }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'main_page' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه اصلی</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
-                  >
-                    <option value="A">َA-Slideshow</option>
-                    <option value="B">B-Banner</option>
-                    <option value="C">C-Banner</option>
-                    <option value="D">D-Banner</option>
-                    <option value="E">E-Banner</option>
-                    <option value="F">F-Banner</option>
-                    <option value="G">G-Banner</option>
-                    <option value="H">H-Banner</option>
-                    <option value="I">I-Banner</option>
-                    <option value="J">J-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه دسته ها</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
-                  >
-                    <option value="A">َA-Slideshow</option>
-                    <option value="B">B-Banner</option>
-                    <option value="C">C-Banner</option>
-                    <option value="D">D-Banner</option>
-                    <option value="E">E-Banner</option>
-                    <option value="F">F-Banner</option>
-                    <option value="G">G-Banner</option>
-                    <option value="H">H-Banner</option>
-                    <option value="I">I-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol
-                v-if="pageType === 'special_page' && pannel === 'web'"
-                md="6"
-              >
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه فروش ویژه</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
-                    :value="(selectedLoc = 'A')"
-                  >
-                    <option value="A">A-Slideshow</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه برند</label>
-                  <select
-                    class="form-select"
-                    aria-label="Default select example"
-                    v-model="selectedLoc"
-                    @change="clearError('selectedLoc')"
-                    :class="{ 'is-invalid': errors.selectedLoc }"
-                    placeholder="موقعیت بنر"
+                        v-model="selectedLandingProduct"
+                        :reduce="(option) => option.value"
+                        label="label"
+                        :isLoading="productSelectorLoader"
+                        :options="formattedProducts"
+                        @search="handleProductSearch"
+                        placeholder="محصولی را انتخاب کنید"
+                    />
+                    <small v-if="errors.selectedLandingProduct" class="text-danger">
+                      {{ errors.selectedLandingProduct }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="landingType === 'cat'" md="6">
+
+                    <div class="form-group">
+                      <label class="form-label">صفحه کدام دسته</label>
+
+                      <VueSelect
+                          style="--vs-min-height: 48px; --vs-border-radius: 8px"
+                          v-model="selectedLandingCat"
+                          @change="clearError('selectedLandingCat')"
+                          :isLoading="categorySelectorLoader"
+                          :options="formattedCategories"
+                          placeholder="دسته ای را انتخاب کنید"
+                          @search="handleSearch"
+                      />
+                    </div>
+                    <small v-if="errors.selectedLandingCat" class="text-danger">
+                      {{ errors.selectedLandingCat }}
+                    </small>
+
+                  </BCol>
+
+                  <BCol v-if="pageType === 'main_page' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه اصلی</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                      >
+                        <option value="A">َA-Slideshow</option>
+                        <option value="B">B-Banner</option>
+                        <option value="C">C-Banner</option>
+                        <option value="D">D-Banner</option>
+                        <option value="E">E-Banner</option>
+                        <option value="F">F-Banner</option>
+                        <option value="G">G-Banner</option>
+                        <option value="H">H-Banner</option>
+                        <option value="I">I-Banner</option>
+                        <option value="J">J-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'category' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه دسته ها</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                      >
+                        <option value="A">َA-Slideshow</option>
+                        <option value="B">B-Banner</option>
+                        <option value="C">C-Banner</option>
+                        <option value="D">D-Banner</option>
+                        <option value="E">E-Banner</option>
+                        <option value="F">F-Banner</option>
+                        <option value="G">G-Banner</option>
+                        <option value="H">H-Banner</option>
+                        <option value="I">I-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol
+                      v-if="pageType === 'special_page' && pannel === 'web'"
+                      md="6"
                   >
-                    <option value="A">َA-Slideshow</option>
-                    <option value="B">B-Banner</option>
-                    <option value="C">C-Banner</option>
-                    <option value="D">D-Banner</option>
-                    <option value="E">E-Banner</option>
-                    <option value="F">F-Banner</option>
-                    <option value="G">G-Banner</option>
-                    <option value="H">H-Banner</option>
-                    <option value="I">I-Banner</option>
-                    <option value="J">J-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol
-                  v-if="pageType === 'blog_page' && pannel === 'web'"
-                  md="6"
-              >
-                <div class="form-group">
-                  <label class="form-label">موقعیت در صفحه بلاگ</label>
-                  <select
-                      class="form-select"
-                      aria-label="Default select example"
-                      v-model="selectedLoc"
-                      @change="clearError('selectedLoc')"
-                      :class="{ 'is-invalid': errors.selectedLoc }"
-                      placeholder="موقعیت بنر"
-                      :value="(selectedLoc = 'A')"
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه فروش ویژه</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                          :value="(selectedLoc = 'A')"
+                      >
+                        <option value="A">A-Slideshow</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol v-if="pageType === 'brand' && pannel === 'web'" md="6">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه برند</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                      >
+                        <option value="A">َA-Slideshow</option>
+                        <option value="B">B-Banner</option>
+                        <option value="C">C-Banner</option>
+                        <option value="D">D-Banner</option>
+                        <option value="E">E-Banner</option>
+                        <option value="F">F-Banner</option>
+                        <option value="G">G-Banner</option>
+                        <option value="H">H-Banner</option>
+                        <option value="I">I-Banner</option>
+                        <option value="J">J-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+
+                  <BCol
+                      v-if="pageType === 'blog_page' && pannel === 'web'"
+                      md="6"
                   >
-                    <option value="A">A-Banner</option>
-                  </select>
-                </div>
-                <small v-if="errors.selectedLoc" class="text-danger">
-                  {{ errors.selectedLoc }}
-                </small>
-              </BCol>
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">تصویر بنر</label>
-
-                  <input
-                    type="file"
-                    accept="image/*"
-                    @change="handleImageUpload"
-                    class="form-control"
-                    :class="{ 'is-invalid': errors.imagePreview }"
-                  />
-
-                  <div v-if="imagePreview" class="mt-2">
-                    <img
-                      :src="imagePreview"
-                      alt="Image Preview"
-                      class="img-fluid rounded shadow-sm Image-Preview"
-                    />
-                  </div>
-
-                  <small v-if="errors.imagePreview" class="text-danger">
-                    {{ errors.imagePreview }}
-                  </small>
-                </div>
-              </BCol>
-            </BRow>
-          </BCardBody>
-          <BCardFooter>
-            <div class="d-flex justify-content-center">
-              <div class="text-center">
+                    <div class="form-group">
+                      <label class="form-label">موقعیت در صفحه بلاگ</label>
+                      <select
+                          class="form-select"
+                          aria-label="Default select example"
+                          v-model="selectedLoc"
+                          @change="clearError('selectedLoc')"
+                          :class="{ 'is-invalid': errors.selectedLoc }"
+                          placeholder="موقعیت بنر"
+                          :value="(selectedLoc = 'A')"
+                      >
+                        <option value="A">A-Banner</option>
+                      </select>
+                    </div>
+                    <small v-if="errors.selectedLoc" class="text-danger">
+                      {{ errors.selectedLoc }}
+                    </small>
+                  </BCol>
+                </BRow>
+
                 <button
-                  type="submit"
-                  class="btn btn-primary"
-                  @click.prevent="submitForm"
-                  :disabled="loading"
+                    type="submit"
+                    class="btn btn-primary mt-4"
+                    @click.prevent="submitForm"
+                    :disabled="loading"
                 >
                   <span v-if="loading">
                     <i class="fa fa-spinner fa-spin"></i> ویرایش...
                   </span>
                   <span v-else>ویرایش</span>
                 </button>
-              </div>
-            </div>
-          </BCardFooter>
+              </BTab>
+
+              <BTab title="ترجمه ها" class="mt-4">
+                <BRow>
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">تصویر بنر</label>
+
+                      <input
+                          type="file"
+                          accept="image/*"
+                          @change="handleImageUpload"
+                          class="form-control"
+                          :class="{ 'is-invalid': errors.imagePreview }"
+                      />
+
+                      <div v-if="imagePreview" class="mt-2">
+                        <img
+                            :src="imagePreview"
+                            alt="Image Preview"
+                            class="img-fluid rounded shadow-sm Image-Preview"
+                        />
+                      </div>
+
+                      <small v-if="errors.imagePreview" class="text-danger">
+                        {{ errors.imagePreview }}
+                      </small>
+                    </div>
+                  </BCol>
+
+                  <BCol lg="6">
+                    <div class="form-group">
+                      <label class="form-label">انتخاب زبان</label>
+                      <select
+                          v-model="locale"
+                          class="form-control"
+                          placeholder="انتخاب کنید"
+                          @change="handlerChangeLocale"
+                      >
+                        <option
+                            key="fa"
+                            value="fa"
+                        >
+                          فارسی
+                        </option>
+                        <option
+                            key="en"
+                            value="en"
+                        >
+                          انگلیسی
+                        </option>
+                        <option
+                            key="ar"
+                            value="ar"
+                        >
+                          عربی
+                        </option>
+                      </select>
+                    </div>
+                  </BCol>
+                </BRow>
+
+                <button
+                    @click.prevent="editTranslationBanner"
+                    :disabled="loading"
+                    class="btn btn-primary mt-5"
+                >
+                  <span v-if="loading">
+                    <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+                  </span>
+                  <span v-else>ایجاد</span>
+                </button>
+              </BTab>
+            </BTabs>
+          </BCardBody>
         </BCard>
       </BCol>
     </BRow>
@@ -425,10 +451,12 @@ import "vue3-toastify/dist/index.css";
 import ApiServiece from "@/services/ApiService";
 import { ref, onMounted, computed } from "vue";
 import Layout from "@/layout/custom.vue";
+import {BTabs} from "bootstrap-vue-next";
 
 export default {
   name: "SAMPLE-PAGE",
   components: {
+    BTabs,
     Layout,
     mainPageBanner,
     catBanner,
@@ -449,26 +477,18 @@ export default {
     const selectedLandingCat = ref();
     const selectedLandingProduct = ref();
     const selectedLoc = ref();
-    const pannel = ref();
+    const pannel = ref('web');
     const image = ref();
     const imagePreview = ref();
     const selectedBrandPage = ref();
     const loading = ref(false);
     const errors = ref({});
-
     const categorySelectorLoader = ref(false);
     const productSelectorLoader = ref(false);
     const categoryPageSelectorLoader = ref(false);
     const brandSelectorLoader = ref(false);
-
-    const formattedCategories = computed(() =>
-      Array.isArray(cats.value)
-        ? cats.value.map((cat) => ({
-            value: cat.id,
-            label: cat.title,
-          }))
-        : []
-    );
+    const banner = ref(null)
+    const locale = ref('fa')
 
     const handleSearch = async (searchTerm) => {
       if (searchTerm.length < 3) return;
@@ -485,6 +505,15 @@ export default {
       }
     };
 
+    const formattedCategories = computed(() =>
+        Array.isArray(cats.value)
+            ? cats.value?.map((cat) => ({
+              value: cat?.id,
+              label: cat?.translation?.title || 'بدون عنوان',
+            }))
+            : []
+    );
+
     const formattedProducts = computed(() =>
       Array.isArray(products.value)
         ? products.value.map((product) => ({
@@ -512,8 +541,8 @@ export default {
     const formattedCatPages = computed(() =>
       Array.isArray(catPages.value)
         ? catPages.value.map((catPage) => ({
-            value: catPage.id,
-            label: catPage.title,
+            value: catPage?.id,
+            label: catPage?.translation?.title ?? ''
           }))
         : []
     );
@@ -537,7 +566,7 @@ export default {
       Array.isArray(brands.value)
         ? brands.value.map((brand) => ({
             value: brand.id,
-            label: brand.title,
+            label: brand?.translation?.title ?? 'بدون عنوان',
           }))
         : []
     );
@@ -592,11 +621,6 @@ export default {
       if (!selectedLoc.value)
         errors.value.selectedLoc = "موقعیت بنر را انتخاب کنید";
 
-      if (!pannel.value) errors.value.pannel = "پنل نمایش بنر را انتخاب کنید";
-
-      if (!imagePreview.value)
-        errors.value.imagePreview = "عکس بنر را وارد نمایید";
-
       return Object.keys(errors.value).length === 0;
     };
 
@@ -629,12 +653,12 @@ export default {
           }
 
           title.value = data?.title;
-          pannel.value = data?.panel;
-          imagePreview.value = data?.image;
+          imagePreview.value = data?.translation?.image;
           selectedLoc.value = data?.location;
           selectedLandingCat.value = data?.category_id;
           selectedLandingProduct.value = data?.product_id;
           pageType.value = data.page_type;
+          banner.value = data;
           if (data.page_id && pageType.value === "category") {
             selectedCatPage.value = data?.page_id;
           }
@@ -669,55 +693,58 @@ export default {
         return;
       }
       loading.value = true;
-      const formData = new FormData();
-      formData.append("title", title.value);
+
+      const params = {}
+
+      params.title = title.value
 
       if (pageType.value === "category") {
-        formData.append("page_id", selectedCatPage.value);
+        params.page_id = selectedCatPage.value
       }
 
       if (pageType.value === "brand") {
-        formData.append("page_id", selectedBrandPage.value);
+        params.page_id = selectedBrandPage.value
       }
 
       if (landingType.value === "product") {
-        formData.append("product_id", selectedLandingProduct.value);
+        params.product_id = selectedLandingProduct.value
       }
 
       if (landingType.value === "cat") {
-        formData.append("category_id", selectedLandingCat.value);
+        params.category_id = selectedLandingCat.value
       }
 
       if (selectedLoc.value === "A") {
-        formData.append("type", pageType.value === 'blog_page' ? "banner" : "slider");
+        params.type = pageType.value === 'blog_page' ? "banner" : "slider"
       }
 
       if (selectedLoc.value !== "A") {
-        formData.append("type", "banner");
+        params.type = "banner"
       }
 
       if (pannel.value === "wholesale") {
-        formData.append("type", "slider");
-        formData.append("location", "A");
+        params.type = "slider"
+
+        params.location = "A"
       }
 
-      formData.append("location", selectedLoc.value);
+      params.location = selectedLoc.value
 
-      formData.append("panel", pannel.value);
+      params.panel = pannel.value
 
       if(pannel.value === 'web')
-        formData.append("page_type", pageType.value);
+        params.page_type = pageType.value
 
-      if (image.value) {
-        formData.append("image", image.value);
-      }
+      // if (image.value) {
+      //   formData.append("image", image.value);
+      // }
 
-      formData.append("sort", 1);
-      formData.append("_method", "put");
+      params.sort = 1
 
-      ApiServiece.post(`admin/banners/${route.params.id}`, formData, {
+      params._method = 'put'
+
+      ApiServiece.post(`admin/banners/${route.params.id}`, params, {
         headers: {
-          "content-type": "multipart",
           Authorization: `Bearer ${localStorage.getItem("token")}`,
         },
       })
@@ -739,6 +766,103 @@ export default {
         });
     };
 
+    const handlerChangeLocale = (e) => {
+      const findLocale = banner.value?.translations?.find(item => item?.locale === e.target.value);
+
+      if (findLocale) {
+        image.value = findLocale?.image
+
+        imagePreview.value = findLocale?.image
+      } else {
+        image.value = undefined
+
+        imagePreview.value = undefined
+      }
+    }
+
+    const editTranslationBanner = async () => {
+      if (!validateForm()) {
+        toast.error("لطفا فیلد های لازم را وارد نمایید", {
+          position: "top-right",
+          autoClose: 1000,
+        });
+        return;
+      }
+
+      try {
+        loading.value = true;
+
+        const formData = new FormData();
+
+        if (image.value instanceof File) {
+          formData.append('image', image.value);
+        } else {
+          toast.error('لطفا تصویر جایگزین انتخاب کنید')
+
+          return;
+        }
+
+        formData.append('locale', locale.value);
+
+        const existingTranslation = banner.value?.translations?.find(
+            t => t.locale === locale.value
+        );
+
+        if (existingTranslation)
+          formData.append('_method', 'put')
+
+        const { data } = existingTranslation
+            ? await ApiServiece.post(
+                `admin/banners/${banner.value?.id}/translations/${existingTranslation?.id}`,
+                formData,
+                {
+                  headers: {
+                    'content-type': 'multipart/form-data',
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            )
+            : await ApiServiece.post(
+                `admin/banners/${banner.value?.id}/translations`,
+                formData,
+                {
+                  headers: {
+                    'content-type': 'multipart/form-data',
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                  },
+                }
+            );
+
+        if (data?.success) {
+          // const updatedCategory = banner.value;
+          //
+          // if (existingTranslation) {
+          //   updatedCategory.translations = data?.data?.translations || [];
+          // } else {
+          //   updatedCategory.translations = [
+          //     ...(updatedCategory.translations || []),
+          //     ...(data?.data?.translations || [])
+          //   ];
+          // }
+
+          banner.value = data?.data;
+
+          toast.success(data?.message)
+
+          //emit("cat-updated");
+        }
+
+      } catch (error) {
+        console.log(error,'error error');
+        toast.error(`${error?.response?.data?.message}`, {
+          position: "top-right",
+          autoClose: 1000,
+        });
+      } finally {
+        loading.value = false;
+      }
+    };
+
     return {
       cats,
       errors,
@@ -771,6 +895,9 @@ export default {
       brandSelectorLoader,
       handleBrandSearch,
       selectedBrandPage,
+      handlerChangeLocale,
+      locale,
+      editTranslationBanner
     };
   },
 };
diff --git a/src/views/live-preview/pages/blogCats/blogCat.vue b/src/views/live-preview/pages/blogCats/blogCat.vue
index 81a7c2a..bc9b28e 100644
--- a/src/views/live-preview/pages/blogCats/blogCat.vue
+++ b/src/views/live-preview/pages/blogCats/blogCat.vue
@@ -29,6 +29,7 @@ export default {
     const cats = ref();
     const catTitle = ref();
     const catId = ref();
+    const catRow = ref();
 
     const convertToJalali = (date) => {
       return moment(date, "YYYY-MM-DD HH:mm:ss")
@@ -151,11 +152,12 @@ export default {
       });
     };
 
-    const editModalData = (id, title, icon) => {
-      catId.value = id;
-      catTitle.value = title;
-      catIcon.value = icon;
-    };
+    const editModalData = (cat) => {
+      // catId.value = id;
+      // catTitle.value = title;
+      // catIcon.value = icon;
+      catRow.value = cat
+    }
 
     watch(page, () => {
       getCats();
@@ -183,6 +185,7 @@ export default {
       handlePageInput,
       searchPage,
       visiblePages,
+      catRow,
     };
   },
 };
@@ -231,10 +234,10 @@ export default {
 
                     <td>
                       <button
-                        @click="editModalData(cat?.id, cat?.translation?.title)"
                         data-bs-toggle="modal"
                         data-bs-target="#editBlogCat"
                         class="btn btn-sm btn-outline-warning me-1"
+                        @click="editModalData(cat)"
                       >
                         ویرایش
                       </button>
@@ -261,6 +264,7 @@ export default {
         :id="catId"
         :title="catTitle"
         :icon="catIcon"
+        :catRow="catRow"
         @cat-updated="handleCatUpdated()"
       />
       <showDescription :desc="catDescription" />
diff --git a/src/views/live-preview/pages/brands/brands.vue b/src/views/live-preview/pages/brands/brands.vue
index 7682f60..3445006 100644
--- a/src/views/live-preview/pages/brands/brands.vue
+++ b/src/views/live-preview/pages/brands/brands.vue
@@ -30,7 +30,9 @@ export default {
     const brandTitle = ref();
     const brandId = ref();
     const brandImage = ref();
+    const brandRow = ref()
     let searchTimeout = null;
+
     const convertToJalali = (date) => {
       return moment(date, "YYYY-MM-DD HH:mm:ss")
         .locale("fa")
@@ -103,7 +105,7 @@ export default {
     };
     const deleteBrand = (id, title) => {
       Swal.fire({
-        text: `می خواهید برند ${title} را حذف کنید؟`,
+        text: `می خواهید برند ${title ?? ''} را حذف کنید؟`,
         icon: "warning",
         showCancelButton: true,
         confirmButtonColor: "#3085d6",
@@ -131,11 +133,8 @@ export default {
       });
     };
 
-    const editModalData = (id, title, desc, img) => {
-      brandId.value = id;
-      brandTitle.value = title;
-      brandDescription.value = desc;
-      brandImage.value = img;
+    const editModalData = (brand) => {
+      brandRow.value = brand;
     };
 
     const descriptionModal = (desc) => {
@@ -194,6 +193,7 @@ export default {
       page,
       paginate,
       handlePageInput,
+      brandRow,
     };
   },
 };
@@ -266,12 +266,7 @@ export default {
                     <td>
                       <button
                         @click="
-                          editModalData(
-                            brand?.id,
-                            brand?.title,
-                            brand.description,
-                            brand.image
-                          )
+                          editModalData(brand)
                         "
                         data-bs-toggle="modal"
                         data-bs-target="#editBrand"
@@ -280,7 +275,7 @@ export default {
                         ویرایش
                       </button>
                       <button
-                        @click="deleteBrand(brand.id, brand.title)"
+                        @click="deleteBrand(brand.id, brand?.translation?.title)"
                         class="btn btn-sm btn-outline-danger"
                       >
                         حذف
@@ -303,6 +298,7 @@ export default {
         :title="brandTitle"
         :description="brandDescription"
         :image="brandImage"
+        :brandRow="brandRow"
         @brand-updated="handleBrandUpdated()"
       />
       <showDescription :desc="brandDescription" />
diff --git a/src/views/live-preview/pages/countries/countries.vue b/src/views/live-preview/pages/countries/countries.vue
new file mode 100644
index 0000000..c172558
--- /dev/null
+++ b/src/views/live-preview/pages/countries/countries.vue
@@ -0,0 +1,526 @@
+<script>
+import { debounce } from "lodash";
+import Layout from "@/layout/custom.vue";
+import { onMounted, ref, watch, computed } from "vue";
+import Swal from "sweetalert2";
+import ApiServiece from "@/services/ApiService";
+import moment from "jalali-moment";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import CountriesModal from "@/components/modals/countries/CountriesModal.vue";
+export default {
+  name: "SAMPLE-PAGE",
+  components: {
+    CountriesModal,
+    Layout,
+  },
+  setup() {
+    const selectedStatus = ref("");
+    const filterLoading = ref(false);
+    const searchPage = ref();
+    const currentPage = ref(1);
+    const totalPages = ref(1);
+    const paginate = ref(20);
+    const page = ref(1);
+    const searchQuery = ref("");
+    const countries = ref([]);
+    const userName = ref();
+    const userMobile = ref();
+    const userId = ref();
+    const userRole = ref();
+    const selectedRole = ref("");
+    const countryModalRef = ref(null);
+    const userProfile = JSON.parse(localStorage.getItem('user_profile'));
+
+    const convertToJalali = (date) => {
+      return moment(date, "YYYY-MM-DD HH:mm:ss")
+          .locale("fa")
+          .format("YYYY/MM/DD");
+    };
+
+    const getCountries = async () => {
+      try {
+        filterLoading.value = true;
+        const { data: { success, data } } = await ApiServiece.get('admin/country-configs', {
+          params: {
+            paginate: paginate.value,
+            page: currentPage.value,
+          }
+        })
+
+        if(success) {
+          countries.value = data?.data
+          currentPage.value = data?.current_page;
+          totalPages.value = data?.last_page;
+        }
+      } catch (e) {
+        toast.error(e?.response?.data?.message);
+      } finally {
+        filterLoading.value = false;
+      }
+    };
+
+    const nextPage = () => {
+      if (currentPage.value < totalPages.value) {
+        page.value++;
+        getCountries();
+      }
+    };
+
+    const prevPage = () => {
+      if (currentPage.value > 1) {
+        page.value--;
+        getCountries();
+      }
+    };
+
+    const visiblePages = computed(() => {
+      const pages = [];
+      if (totalPages.value <= 5) {
+        for (let i = 1; i <= totalPages.value; i++) {
+          pages.push(i);
+        }
+      } else {
+        let start = currentPage.value - 2;
+        let end = currentPage.value + 2;
+
+        if (start < 1) {
+          end += 1 - start;
+          start = 1;
+        }
+        if (end > totalPages.value) {
+          start -= end - totalPages.value;
+          end = totalPages.value;
+        }
+        start = Math.max(start, 1);
+
+        for (let i = start; i <= end; i++) {
+          pages.push(i);
+        }
+      }
+      return pages;
+    });
+
+    watch(selectedRole, () => {
+      getCountries();
+    });
+
+    watch(selectedStatus, () => {
+      getCountries();
+    });
+
+    watch(searchQuery, (newQuery) => {
+      debouncedSearch(newQuery);
+    });
+
+    const debouncedSearch = debounce(() => {
+      getCountries();
+    }, 1000);
+
+    watch(page, () => {
+      getCountries();
+    });
+
+    function handlePageInput() {
+      if (searchPage.value < 1) {
+        searchPage.value = 1;
+      } else if (searchPage.value > totalPages.value) {
+        searchPage.value = totalPages.value;
+      }
+
+      if (searchPage.value >= 1 && searchPage.value <= totalPages.value) {
+        page.value = searchPage.value;
+      }
+    }
+
+    const modalData = (item) => {
+      Object.assign(countryModalRef.value.form, item)
+    };
+
+    const handleUserUpdated = () => {
+      getCountries();
+    };
+
+    const deleteUser = (id) => {
+      Swal.fire({
+        text: "آیا میخواهید این کاربر را حذف کنید؟",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonText: "بله",
+        cancelButtonText: "خیر",
+        confirmButtonColor: "#3085d6",
+        cancelButtonColor: "#d33",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          ApiServiece.delete(`admin/country-configs/${id}`)
+              .then((res) => {
+                toast.success(res?.data?.message , {
+                  position: "top-right",
+                  autoClose: 1000,
+                });
+              })
+              .then(() => {
+                getCountries();
+              })
+              .catch((err) => {
+                toast.error(err?.response?.data?.message, {
+                  position: "top-right",
+                  autoClose: 1000,
+                });
+              });
+        }
+      });
+    };
+
+    const unBlockUser = (id) => {
+      Swal.fire({
+        text: "آیا میخواهید این کاربر را فعال نمایید؟",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonText: "بله",
+        cancelButtonText: "خیر",
+        confirmButtonColor: "#3085d6",
+        cancelButtonColor: "#d33",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          ApiServiece.put(`admin/countries/${id}/restore`)
+              .then(() => {
+                toast.success("!کاربر با موفقیت فعال شد", {
+                  position: "top-right",
+                  autoClose: 1000,
+                });
+              })
+              .then(() => {
+                getCountries();
+              })
+              .catch((err) => {
+                console.log(err);
+                toast.error("در فعال کردن کاربر مشکلی پیش آمد", {
+                  position: "top-right",
+                  autoClose: 1000,
+                });
+              });
+        }
+      });
+    };
+
+    onMounted(() => {
+      getCountries();
+    });
+
+    return {
+      countries,
+      convertToJalali,
+      searchQuery,
+      modalData,
+      userName,
+      userMobile,
+      userId,
+      handleUserUpdated,
+      deleteUser,
+      unBlockUser,
+      userRole,
+      handlePageInput,
+      nextPage,
+      paginate,
+      totalPages,
+      currentPage,
+      prevPage,
+      visiblePages,
+      page,
+      searchPage,
+      selectedRole,
+      selectedStatus,
+      filterLoading,
+      userProfile,
+      getCountries,
+      countryModalRef
+    };
+  },
+};
+</script>
+
+<template>
+  <Layout>
+    <BRow>
+      <div class="col-sm-12">
+        <div class="card table-card user-profile-list">
+          <div class="card-body">
+            <div class="filter-container">
+              <div class="search-filters d-flex align-items-center gap-3">
+                <!-- Search Input -->
+                <input
+                    v-model="searchQuery"
+                    type="text"
+                    placeholder="جستجو..."
+                    class="form-control form-control-sm d-inline-block me-2"
+                    style="width: 250px; border-radius: 15px"
+                />
+
+                <!-- User Role Selector -->
+                <select
+                    class="form-select form-select-sm"
+                    v-model="selectedRole"
+                    style="width: 120px; border-radius: 15px"
+                >
+                  <option value="" disabled selected>نقش کاربر</option>
+                  <option value="">همه</option>
+                  <option value="admin">فقط مدیران</option>
+                  <option value="client">فقط مشتریان</option>
+                  <option value="operator">فقط اپراتورها</option>
+                </select>
+
+                <select
+                    class="form-select form-select-sm"
+                    v-model="selectedStatus"
+                    style="width: 120px; border-radius: 15px"
+                >
+                  <option value="" disabled selected>وضعیت</option>
+                  <option value="">همه</option>
+                  <option value="0">فعال</option>
+                  <option value="1">بلاک</option>
+                </select>
+                <!-- Add User Button -->
+              </div>
+              <button
+                  v-if="userProfile?.role === 'admin'"
+                  data-bs-toggle="modal"
+                  data-bs-target="#countriesModal"
+                  class="btn btn-add-user btn btn-light text-primary btn-sm px-3"
+              >
+                افزودن کشور
+              </button>
+            </div>
+
+            <div v-if="!filterLoading" class="table-responsive">
+              <table class="table table-hover" id="pc-dt-simple">
+                <thead>
+                <tr>
+                  <th>پیش شماره</th>
+                  <th>کشور</th>
+                  <th>حداقل وزن حمل ونقل</th>
+                  <th>هزینه هر کیلوگرم</th>
+                  <th>وضعیت</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-for="country in countries" :key="country.id">
+                  <td>
+                    {{ country?.country_code }}
+                  </td>
+                  <td>
+                    {{ country?.title }}
+                  </td>
+                  <td>
+                    {{ country?.minimum_shipping_weight }}
+                  </td>
+                  <td>
+                    {{ country?.per_kilograms_cost }}
+                  </td>
+                  <td>
+                    <span v-if="!country?.deleted_at" class="badge bg-light-success">فعال</span>
+                    <span v-else class="badge bg-light-danger">بلاک</span>
+                    <div class="overlay-edit">
+                      <ul class="list-inline mb-0">
+                        <li class="list-inline-item m-0">
+                          <a
+                              @click="modalData(country)"
+                              data-bs-toggle="modal"
+                              data-bs-target="#countriesModal"
+                              href="#"
+                              class="avtar avtar-s btn btn-primary"
+                          >
+                            <i class="ti ti-pencil f-18"></i>
+                          </a>
+                        </li>
+                        <li class="list-inline-item m-0">
+                          <a
+                              @click="deleteUser(country?.id)"
+                              href="#"
+                              class="avtar avtar-s btn bg-white btn-link-danger"
+                          >
+                            <i class="ti ti-trash f-18"></i>
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+            <div
+                v-else
+                class="filter-loader card table-card user-profile-list"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <CountriesModal ref="countryModalRef" @country-updated="getCountries" />
+    </BRow>
+    <BRow>
+      <BCol sm="12">
+        <div class="d-flex justify-content-center">
+          <nav aria-label="Page navigation">
+            <ul class="pagination">
+              <!-- Previous page -->
+              <li class="page-item" :class="{ disabled: currentPage === 1 }">
+                <span class="page-link" @click="prevPage">قبلی</span>
+              </li>
+
+              <!-- First page and leading dots -->
+              <li
+                  v-if="visiblePages[0] > 1"
+                  class="page-item"
+                  @click="page = 1"
+              >
+                <a class="page-link" href="javascript:void(0)">1</a>
+              </li>
+              <li v-if="visiblePages[0] > 2" class="page-item disabled">
+                <span class="page-link">...</span>
+              </li>
+
+              <!-- Visible pages -->
+              <li
+                  v-for="n in visiblePages"
+                  :key="n"
+                  class="page-item"
+                  :class="{ active: currentPage === n }"
+              >
+                <a
+                    class="page-link"
+                    href="javascript:void(0)"
+                    @click="page = n"
+                >
+                  {{ n }}
+                </a>
+              </li>
+
+              <!-- Trailing dots and last page -->
+              <li
+                  v-if="visiblePages[visiblePages.length - 1] < totalPages - 1"
+                  class="page-item disabled"
+              >
+                <span class="page-link">...</span>
+              </li>
+              <li
+                  v-if="visiblePages[visiblePages.length - 1] < totalPages"
+                  class="page-item"
+                  @click="page = totalPages"
+              >
+                <a class="page-link" href="javascript:void(0)">
+                  {{ totalPages }}
+                </a>
+              </li>
+
+              <!-- Next page -->
+              <li
+                  class="page-item"
+                  :class="{ disabled: currentPage === totalPages }"
+              >
+                <span class="page-link" @click="nextPage">بعدی</span>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </BCol>
+      <BCol sm="4">
+        <div class="ms-0 search-number">
+          <input
+              v-model="searchPage"
+              type="text"
+              class="form-control"
+              placeholder="برو به صفحه"
+              :max="totalPages"
+              min="1"
+              @input="handlePageInput"
+          />
+        </div>
+      </BCol>
+    </BRow>
+  </Layout>
+</template>
+
+<style scoped>
+.filter-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 16px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.search-filters {
+  display: flex;
+  align-items: center;
+}
+
+.btn-add-user {
+  align-items: center;
+  padding: 10px 20px;
+  color: white;
+  font-size: 14px;
+  border-radius: 8px;
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.btn-add-user i {
+  margin-right: 8px;
+}
+
+.search-number {
+  display: flex;
+  align-items: center;
+}
+
+.search-number input {
+  width: 150px;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border-radius: 0.375rem;
+  margin-bottom: 7px;
+  border: 1px solid #ced4da;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.search-number input:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
+}
+
+.search-number input::placeholder {
+  color: #6c757d;
+}
+
+.search-number input:disabled {
+  background-color: #f8f9fa;
+  cursor: not-allowed;
+}
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.page-item {
+  flex: 0 0 auto;
+}
+
+.page-link {
+  cursor: pointer;
+  user-select: none;
+}
+.filter-loader {
+  border: 4px solid rgba(0, 123, 255, 0.3);
+  border-top: 4px solid #007bff;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 20px auto;
+}
+</style>
diff --git a/src/views/live-preview/pages/discounts/addDiscount.vue b/src/views/live-preview/pages/discounts/addDiscount.vue
index 62b01d9..29a7ff3 100644
--- a/src/views/live-preview/pages/discounts/addDiscount.vue
+++ b/src/views/live-preview/pages/discounts/addDiscount.vue
@@ -245,8 +245,8 @@ export default {
     const formattedCategories = computed(() =>
       Array.isArray(categories.value)
         ? categories.value.map((category) => ({
-            value: category.id,
-            label: category.title,
+            value: category?.id,
+            label: category?.translation?.title,
           }))
         : []
     );
@@ -270,7 +270,7 @@ export default {
       Array.isArray(products.value)
         ? products.value.map((product) => ({
             value: product.id,
-            label: product.title,
+            label: product?.translation?.title,
           }))
         : []
     );
diff --git a/src/views/live-preview/pages/discounts/editDiscount.vue b/src/views/live-preview/pages/discounts/editDiscount.vue
index 032cf34..07f592b 100644
--- a/src/views/live-preview/pages/discounts/editDiscount.vue
+++ b/src/views/live-preview/pages/discounts/editDiscount.vue
@@ -222,28 +222,28 @@ export default {
 
     const formattedCategories = computed(() =>
       Array.isArray(categories.value)
-        ? categories.value.map((category) => ({
-            value: category.id,
-            label: category.title,
+        ? categories.value.filter(item => item?.translation).map((category) => ({
+            value: category?.id,
+            label: category?.translation?.title,
           }))
         : []
     );
 
     const formattedProducts = computed(() =>
       Array.isArray(products.value)
-        ? products.value.map((product) => ({
-            value: product.id,
-            label: product.title,
+        ? products.value.filter(item => item?.translation).map((product) => ({
+            value: product?.id,
+            label: product?.translation?.title,
           }))
         : []
     );
 
     const handleSearch = async (searchTerm) => {
-      if (searchTerm.length < 3) return;
+      if (searchTerm?.length < 3) return;
       categorySelectorLoader.value = true;
       try {
         const response = await ApiServiece.get(
-          `admin/categories?title=${searchTerm}`
+          `admin/categories?title=${searchTerm ?? ''}`
         );
         categories.value = response.data.data;
         categorySelectorLoader.value = false;
@@ -254,11 +254,11 @@ export default {
     };
 
     const handleProductSearch = async (searchTerm) => {
-      if (searchTerm.length < 3) return;
+      if (searchTerm?.length < 3) return;
       productSelectorLoader.value = true;
       try {
         const response = await ApiServiece.get(
-          `admin/products?title=${searchTerm}`
+          `admin/products?title=${searchTerm ?? ''}`
         );
         products.value = response.data.data;
         productSelectorLoader.value = false;
@@ -364,6 +364,9 @@ export default {
 
     onMounted(() => {
       getDiscount();
+
+      handleProductSearch()
+      handleSearch()
     });
 
     const submitForm = () => {
@@ -409,7 +412,7 @@ export default {
       if (maxUsage.value)
         formData.append("max_usage", maxUsage.value);
 
-      ApiServiece.post(`/admin/discounts`, formData)
+      ApiServiece.put(`/admin/discounts/${route.params.id || discount.value?.id}`, formData)
         .then((resp) => {
           loading.value = false;
           toast.success("!تخفیف با موفقیت ویرایش شد", {
diff --git a/src/views/live-preview/pages/products/addProduct.vue b/src/views/live-preview/pages/products/addProduct.vue
index b129838..3be141b 100644
--- a/src/views/live-preview/pages/products/addProduct.vue
+++ b/src/views/live-preview/pages/products/addProduct.vue
@@ -14,7 +14,8 @@
                     { title: 'ایجاد محصول', isValid: true },
                     { title: 'بارگذاری تصاویر', isValid: true },
                     { title: 'ویژگی ها' , isValid: true },
-                    { title: 'زبان ها' , isValid: true }
+                    { title: 'مشخصات' , isValid: true },
+                    { title: 'زبان ها' , isValid: true },
                   ]"
                   backText="قبلی"
                   nextText="بعدی"
@@ -24,72 +25,22 @@
                   :finalize="() => {}"
                   @update:step="handlerStep"
               >
-
                   <template #1>
                     <BRow class="g-3">
                       <BCol md="6">
                         <div class="form-group">
-                          <label class="form-label">عنوان </label>
-                          <input
-                              type="text"
-                              v-model="title"
-                              class="form-control"
-                              placeholder="عنوان محصول"
-                              :class="{ 'is-invalid': errors.title }"
-                              @input="clearError('title')"
-                          />
-                        </div>
-                        <small v-if="errors.title" class="text-danger">
-                          {{ errors.title }}
-                        </small>
-                      </BCol>
-
-                      <BCol md="6">
-                        <div class="form-group">
-                          <label class="form-label">کلمه کلیدی</label>
+                          <label class="form-label">قیمت محصول(بر واحد دلار)</label>
                           <input
-                              type="text"
-                              v-model="slug"
-                              class="form-control"
-                              placeholder="کلمه کلیدی محصول"
-                              :class="{ 'is-invalid': errors.slug }"
-                              @input="clearError('slug')"
-                          />
-                        </div>
-                        <small v-if="errors.slug" class="text-danger">
-                          {{ errors.slug }}
-                        </small>
-                      </BCol>
-
-                      <BCol md="6">
-                        <div class="form-group">
-                          <label class="form-label">خلاصه</label>
-                          <textarea
-                              v-model="summary"
-                              class="form-control"
-                              placeholder="خلاصه ای از محصول"
-                              :class="{ 'is-invalid': errors.summary }"
-                              @input="clearError('summary')"
-                          />
-                        </div>
-                        <small v-if="errors.summary" class="text-danger">
-                          {{ errors.summary }}
-                        </small>
-                      </BCol>
-
-                      <BCol md="6">
-                        <div class="form-group">
-                          <label class="form-label">توضیحات محصول</label>
-                          <textarea
-                              v-model="description"
+                              type="number"
+                              v-model="price"
                               class="form-control"
-                              placeholder="توضیحات محصول"
-                              :class="{ 'is-invalid': errors.description }"
-                              @input="clearError('description')"
+                              placeholder="قیمت دلاری محصول را وارد کنید"
+                              :class="{ 'is-invalid': errors.price }"
+                              @input="clearError('price')"
                           />
                         </div>
-                        <small v-if="errors.description" class="text-danger">
-                          {{ errors.description }}
+                        <small v-if="errors.price" class="text-danger">
+                          {{ errors.price }}
                         </small>
                       </BCol>
 
@@ -129,150 +80,58 @@
 
                       <BCol md="6">
                         <div class="form-group">
-                          <label class="form-label">حالت</label>
-                          <select
-                              :class="{ 'is-invalid': errors.productType }"
-                              v-model="productType"
-                              class="form-control"
-                              @change="clearError('productType')"
-                          >
-                            <option value="" disabled selected>
-                              انتخاب حالت محصول
-                            </option>
-                            <option value="1">تک</option>
-                            <option value="2">عمده</option>
-                            <option value="3">هردو</option>
-                          </select>
-                        </div>
-                        <small v-if="errors.productType" class="text-danger">
-                          {{ errors.productType }}
-                        </small>
-                      </BCol>
-
-                      <BCol md="6" v-if="productType == 2 || productType == 3">
-                        <div class="form-group">
-                          <label class="form-label">قیمت (عمده) </label>
+                          <label class="form-label">وزن</label>
                           <input
                               type="number"
-                              v-model="wholesalePrice"
+                              v-model="weight"
                               class="form-control"
-                              placeholder="قیمت"
-                              :class="{ 'is-invalid': errors.wholesalePrice }"
-                              @input="clearError('wholesalePrice')"
+                              placeholder="وزن"
+                              :class="{ 'is-invalid': errors.weight }"
+                              @input="clearError('weight')"
                           />
                         </div>
-                        <small v-if="errors.wholesalePrice" class="text-danger">
-                          {{ errors.wholesalePrice }}
+                        <small v-if="errors.weight" class="text-danger">
+                          {{ errors.weight }}
                         </small>
                       </BCol>
 
-                      <BCol md="6" v-if="productType != 1">
-                        <div class="form-group">
-                          <label class="form-label">تعداد در کارتن</label>
-                          <input
-                              type="number"
-                              v-model="countInCarton"
-                              class="form-control"
-                              placeholder="تعداد"
-                              :class="{ 'is-invalid': errors.countInCarton }"
-                              @input="clearError('countInCarton')"
-                          />
-                        </div>
-                        <small v-if="errors.countInCarton" class="text-danger">
-                          {{ errors.countInCarton }}
-                        </small>
-                      </BCol>
-
-                      <BCol v-if="productType == 1 || productType == 3" md="6">
-                        <div class="form-group">
-                          <label class="form-label">قیمت (تک) </label>
-                          <input
-                              type="number"
-                              v-model="retailePrice"
-                              class="form-control"
-                              placeholder="قیمت"
-                              :class="{ 'is-invalid': errors.retailePrice }"
-                              @input="clearError('retailePrice')"
-                          />
-                        </div>
-                        <small v-if="errors.retailePrice" class="text-danger">
-                          {{ errors.retailePrice }}
-                        </small>
-                      </BCol>
-
-                      <BCol v-if="spescial == 0" md="6">
+                      <BCol md="6">
                         <div class="form-group">
-                          <label class="form-label">منتخب</label>
+                          <label class="form-label">نوع محصول</label>
                           <select
-                              :class="{ 'is-invalid': errors.isChosen }"
-                              v-model="isChosen"
+                              :class="{ 'is-invalid': errors.discount_type }"
+                              v-model="discount_type"
                               class="form-control"
-                              @change="clearError('isChosen')"
+                              @change="clearError('discount_type')"
                           >
-                            <option value="" disabled>انتخاب حالت منتخب</option>
-                            <option value="1">هست</option>
-                            <option value="0">نیست</option>
+                            <option value="0">عادی</option>
+                            <option value="1">ویژه</option>
+                            <option value="2">منتخب</option>
                           </select>
                         </div>
-                        <small v-if="errors.isChosen" class="text-danger">
-                          {{ errors.isChosen }}
+                        <small v-if="errors.discount_type" class="text-danger">
+                          {{ errors.discount_type }}
                         </small>
                       </BCol>
 
-                      <BCol v-if="isChosen == 1" md="6">
+                      <BCol v-if="discount_type != 0" md="6">
                         <div class="form-group">
-                          <label class="form-label">تخفیف (منتخب) </label>
+                          <label class="form-label">درصد تخفیف</label>
                           <input
                               type="number"
-                              v-model="chosenPrice"
+                              v-model="discount_percentage"
                               class="form-control"
                               placeholder="میزان تخفیف به درصد"
-                              :class="{ 'is-invalid': errors.chosenPrice }"
-                              @input="clearError('chosenPrice')"
-                          />
-                        </div>
-                        <small v-if="errors.chosenPrice" class="text-danger">
-                          {{ errors.chosenPrice }}
-                        </small>
-                      </BCol>
-
-                      <BCol v-if="isChosen == 0" md="6">
-                        <div class="form-group">
-                          <label class="form-label">ویژه</label>
-                          <select
-                              :class="{ 'is-invalid': errors.spescial }"
-                              v-model="spescial"
-                              class="form-control"
-                              @change="clearError('spescial')"
-                          >
-                            <option value="" disabled selected>انتخاب حالت ویژه</option>
-                            <option value="1">هست</option>
-                            <option value="0">نیست</option>
-                          </select>
-                        </div>
-                        <small v-if="errors.spescial" class="text-danger">
-                          {{ errors.spescial }}
-                        </small>
-                      </BCol>
-
-                      <BCol v-if="spescial == 1" md="6">
-                        <div class="form-group">
-                          <label class="form-label">درصد تخفیف ویژه</label>
-                          <input
-                              type="number"
-                              class="form-control"
-                              placeholder="درصد"
-                              :class="{ 'is-invalid': errors.spescialPrice }"
-                              @input="clearError('spescialPrice')"
-                              v-model="spescialPrice"
+                              :class="{ 'is-invalid': errors.discount_percentage }"
+                              @input="clearError('discount_percentage')"
                           />
                         </div>
-                        <small v-if="errors.spescialPrice" class="text-danger">
-                          {{ errors.spescialPrice }}
+                        <small v-if="errors.discount_percentage" class="text-danger">
+                          {{ errors.discount_percentage }}
                         </small>
                       </BCol>
 
-                      <BCol v-if="spescial == 1" md="6">
+                      <BCol v-if="discount_type == 1" md="6">
                         <div class="form-group">
                           <label class="form-label">
                             تاریخ انقضای تخفیف محصول ویژه
@@ -281,34 +140,14 @@
                           <DatePicker
                               :format="'jYYYY/jMM/jDD HH:mm:ss'"
                               type="datetime"
-                              v-model="expire"
+                              v-model="discount_expires_at"
                           ></DatePicker>
                         </div>
-                        <small v-if="errors.expire" class="text-danger">
-                          {{ errors.expire }}
+                        <small v-if="errors.discount_expires_at" class="text-danger">
+                          {{ errors.discount_expires_at }}
                         </small>
                       </BCol>
 
-                      <!-- <BCol md="6">
-                        <div class="form-group">
-                          <label class="form-label">دسته</label>
-                          <select
-                            :class="{ 'is-invalid': errors.selectedCat }"
-                            v-model="selectedCat"
-                            class="form-control"
-                            @change="clearError('selectedCat')"
-                            placeholder="انتخاب دسته محصول"
-                          >
-                            <option v-for="cat in cats" :key="cat.id" :value="cat.id">
-                              {{ cat.title }}
-                            </option>
-                          </select>
-                        </div>
-                        <small v-if="errors.selectedCat" class="text-danger">
-                          {{ errors.selectedCat }}
-                        </small>
-                      </BCol> -->
-
                       <BCol md="6">
                         <div class="form-group">
                           <label class="form-label">دسته</label>
@@ -340,168 +179,26 @@
                           {{ errors.selectedBrand }}
                         </small>
                       </BCol>
-                    </BRow>
-                  </template>
 
-                  <template #2>
-                    <div class="card-header">
-                      <h5 class="mb-0">اضافه کردن رنگ</h5>
-                    </div>
-                    <BRow class="g-3 mt-2">
-                      <template v-if="attrebutes.length === 0">
-                        <BCol>
-                          <div class="alert alert-info text-center">
-                            هیچ ویژگی وجود ندارد برای اضافه کردن ویژگی کلیک کنید
-                            <BButton
-                                variant="success"
-                                size="lg"
-                                class="mt-1 px-4 py-2 shadow-lg rounded-pill"
-                                data-bs-toggle="modal"
-                                data-bs-target="#addAttribute"
-                            >
-                              <i class="fas fa-plus me-2"></i> کلیک کنید
-                            </BButton>
-                          </div>
-                        </BCol>
-                      </template>
-                      <BCol
-                          v-for="attrebute in attrebutes"
-                          :key="attrebute.id"
-                          md="6"
-                          lg="4"
-                      >
-                        <div class="card shadow-sm">
-                          <div class="card-body">
-                            <label
-                                class="form-label d-flex align-items-center mb-3"
-                            >
-                              <BCol md="2" class="d-flex justify-content-center">
-                                <BFormCheckbox
-                                    :id="'checkbox-id-' + attrebute.id"
-                                    class="mr-2 test"
-                                    v-model="attrebute.isChecked"
-                                />
-                              </BCol>
-
-                              <BCol
-                                  md="5"
-                                  class="d-flex align-items-center"
-                                  :style="{ color: attrebute.code }"
-                              >
-                                {{ attrebute.title }}
-                              </BCol>
-
-                              <BCol md="5">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    placeholder="تعداد"
-                                    :disabled="!attrebute.isChecked"
-                                    v-model="attrebute.value"
-                                    @input="clearError(`inventory_${attrebute.id}`)"
-                                />
-                              </BCol>
-                            </label>
-                            <small
-                                v-if="errors[`inventory_${attrebute.id}`]"
-                                class="text-danger"
-                            >
-                              {{ errors[`inventory_${attrebute.id}`] }}
-                            </small>
-                          </div>
+                      <div class="d-flex justify-content-center mt-5">
+                        <div class="text-center">
+                          <button
+                              type="submit"
+                              class="btn btn-primary"
+                              :disabled="loading"
+                              @click.prevent="submitForm"
+                          >
+                            <span v-if="loading">
+                              <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+                            </span>
+                            <span v-else>ایجاد</span>
+                          </button>
                         </div>
-                      </BCol>
-
-                      <small v-if="errors.selectedAttributes" class="text-danger">
-                        {{ errors.selectedAttributes }}
-                      </small>
-                    </BRow>
-
-                    <div class="card-header d-flex justify-content-between">
-                      <h5 class="mb-0">اضافه کردن مشخصه ها</h5>
-
-                      <BButton
-                          v-if="relatedAttrebutes?.length"
-                          variant="success"
-                          size="lg"
-                          class="mt-1 px-4 py-2 shadow-lg rounded-pill"
-                          @click="handleAddIdentityClick"
-                      >
-                        <i class="fas fa-plus me-2"></i> کلیک کنید
-                      </BButton>
-                    </div>
-
-                    <BRow class="g-3 mt-2">
-                      <template v-if="relatedAttrebutes.length === 0">
-                        <BCol>
-                          <div class="alert alert-info text-center">
-                            دسته ای انتخاب نکرده اید یا دسته انتخابی شما مشخصه ای در
-                            خود ندارد برای اضافه کردن مشخصه کلیک کنید
-                            <BButton
-                                variant="success"
-                                size="lg"
-                                class="mt-1 px-4 py-2 shadow-lg rounded-pill"
-                                @click="handleAddIdentityClick"
-                            >
-                              <i class="fas fa-plus me-2"></i> کلیک کنید
-                            </BButton>
-                          </div>
-                        </BCol>
-                      </template>
-
-                      <template v-else>
-                        <BCol
-                            v-for="identity in relatedAttrebutes"
-                            :key="identity.id"
-                            md="6"
-                            lg="4"
-                        >
-                          <div class="card shadow-sm">
-                            <div class="card-body">
-                              <label
-                                  class="form-label d-flex align-items-center mb-3"
-                              >
-                                <BCol md="2" class="d-flex justify-content-center">
-                                  <BFormCheckbox
-                                      :id="'checkbox-id-' + identity.id"
-                                      class="mr-2 test"
-                                      v-model="identity.isChecked"
-                                  />
-                                </BCol>
-
-                                <BCol md="5" class="d-flex align-items-center">
-                                  {{ identity.title }}
-                                </BCol>
-
-                                <BCol md="5">
-                                  <input
-                                      type="text"
-                                      class="form-control"
-                                      placeholder="مقدار"
-                                      :disabled="!identity.isChecked"
-                                      v-model="identity.value"
-                                      @input="clearError(`identity${identity.id}`)"
-                                  />
-                                </BCol>
-                              </label>
-                              <small
-                                  v-if="errors[`identityVal_${identity.id}`]"
-                                  class="text-danger"
-                              >
-                                {{ errors[`identityVal_${identity.id}`] }}
-                              </small>
-                            </div>
-                          </div>
-                        </BCol>
-
-                        <small v-if="errors.selectedIdentities" class="text-danger">
-                          {{ errors.selectedIdentities }}
-                        </small>
-                      </template>
+                      </div>
                     </BRow>
                   </template>
 
-                  <template #3>
+                  <template #2>
                     <div
                         class="card-header text-center p-4"
                         style="background-color: #f7f7f7"
@@ -517,9 +214,7 @@
                           md="6"
                       >
                         <div class="form-group position-relative">
-                          <label class="form-label mb-2 fw-bold text-secondary"
-                          >تصویر محصول</label
-                          >
+                          <label class="form-label mb-2 fw-bold text-secondary">تصویر محصول</label>
 
                           <div class="custom-file">
                             <input
@@ -529,6 +224,17 @@
                                 class="form-control-file rounded-3 shadow-sm"
                                 style="border: 1px solid #ddd; padding: 15px"
                             />
+
+                            <button
+                                :disabled="image?.loading"
+                                @click="submitImage(images[index], image)"
+                                class="btn btn-primary rounded-pill me-4"
+                            >
+                              <span v-if="image?.loading">
+                                <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+                              </span>
+                              <span v-else>ثبت تصویر</span>
+                            </button>
                           </div>
 
                           <div v-if="image.preview" class="mt-3 position-relative">
@@ -540,7 +246,7 @@
 
                             <button
                                 type="button"
-                                @click="removeImage()"
+                                @click="removeImage(index)"
                                 class="delete-btn"
                             >
                               <i class="fa fa-trash f-16"></i>
@@ -553,43 +259,77 @@
                       </small>
                     </BRow>
 
-                    <div class="text-center mt-4">
+                    <div class="d-flex justify-content-between align-items-center mt-4">
+                      <div class="d-flex gap-3">
+                        <button
+                            @click="step--"
+                            class="btn btn-outline btn-primary rounded-pill px-5 py-3"
+                        >
+                          مرحله قبل
+                        </button>
+
+                        <button
+                            @click="addImage"
+                            class="btn btn-primary rounded-pill px-5 py-3"
+                            style="
+                            font-size: 16px;
+                            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+                          "
+                        >
+                          <i class="fa fa-plus-circle me-2"></i> افزودن عکس جدید
+                        </button>
+                      </div>
+
                       <button
-                          @click="addImage"
+                          @click="step++"
                           class="btn btn-primary rounded-pill px-5 py-3"
-                          style="
-                      font-size: 16px;
-                      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-                    "
                       >
-                        <i class="fa fa-plus-circle me-2"></i> افزودن عکس جدید
+                        مرحله بعد
                       </button>
                     </div>
                   </template>
 
+                  <template #3>
+                    <AtrributesProduct
+                        :product-id="productId"
+                        :category-id="categoryId"
+                        @next-step="step++"
+                    />
+
+                    <div class="d-flex justify-content-between">
+                      <button class="btn btn-primary" @click="step--">مرحله قبلی</button>
+                      <button class="btn btn-primary" @click="step++">مرحله بعد</button>
+                    </div>
+                  </template>
+
                   <template #4>
-                    Hi
+                    <SpecificationsProduct
+                        :category-id="categoryId"
+                        :product-id="productId"
+                        @next-step="step++"
+                        @prev-step="step--"
+                    />
+
+                    <div class="d-flex justify-content-between mt-5">
+                      <button class="btn btn-primary" @click="step--">مرحله قبلی</button>
+                      <button class="btn btn-primary" @click="step++">مرحله بعد</button>
+                    </div>
+                  </template>
+
+                  <template #5>
+                    <ProductInfo
+                        :product-id="productId"
+                        @previousStep="step--"
+                    />
+
+                    <button class="btn btn-primary mt-5" @click="step--">مرحله قبلی</button>
                   </template>
               </Steppy>
           </BCardBody>
-          <BCardFooter>
-            <div class="d-flex justify-content-center">
-              <div class="text-center">
-                <button
-                  type="submit"
-                  class="btn btn-primary"
-                  @click.prevent="submitForm"
-                  :disabled="loading"
-                >
-                  <span v-if="loading">
-                    <i class="fa fa-spinner fa-spin"></i> بارگذاری...
-                  </span>
-                  <span v-else>ایجاد</span>
-                </button>
-              </div>
-            </div>
-          </BCardFooter>
-          <addIdentity @identity-updated="handleIdentityUpdate" :categoryId="selectedCat" />
+          <addIdentity
+              @identity-updated="handleIdentityUpdate"
+              :categoryId="selectedCat"
+          />
           <addAttribute
             :attributeValues="attributeValues"
             @attribute-updated="handleAttributeUpdated()"
@@ -614,10 +354,16 @@ import DatePicker from "vue3-persian-datetime-picker";
 import addIdentity from "@/components/modals/identity/addIdentity.vue";
 import { Modal } from "bootstrap"
 import { Steppy } from 'vue3-steppy'
+import AtrributesProduct from "@/components/AtrributesProduct.vue";
+import SpecificationsProduct from "@/components/SpecificationsProduct.vue";
+import ProductInfo from "@/components/ProductInfo.vue";
 
 export default {
   name: "SAMPLE-PAGE",
   components: {
+    ProductInfo,
+    SpecificationsProduct,
+    AtrributesProduct,
     Layout,
     DatePicker,
     addIdentity,
@@ -631,13 +377,13 @@ export default {
     const brandSelectorLoader = ref(false);
     const attributeValues = ref();
     const relatedAttrebutes = ref([]);
-    const countInCarton = ref();
+    const weight = ref();
     const selectedAttributes = ref();
     const selectedIdentities = ref();
-    const expire = ref();
-    const chosenPrice = ref();
+    const discount_expires_at = ref();
+    const discount_percentage = ref();
     const spescialPrice = ref();
-    const wholesalePrice = ref();
+    const price = ref();
     const retailePrice = ref();
 
     const productAttributes = ref([]);
@@ -648,7 +394,7 @@ export default {
     const selectedCat = ref();
     const date = ref();
     const spescial = ref("");
-    const isChosen = ref("");
+    const discount_type = ref("");
     const productType = ref();
     const loading = ref(false);
     const image = ref();
@@ -661,12 +407,17 @@ export default {
     const author = ref("");
     const editor = ref(null);
     const editorContent = ref("");
+    const productId = ref(null);
+    const loadingImage = ref(false);
+    const imagesResponse = ref([]);
+    const categoryId = ref(null);
 
     // ALIREZA
     const productImageRef = ref(null)
     const description = ref(null);
     const step = ref(1);
 
+
     const getAttributeValues = () => {
       ApiServiece.get(`admin/attributes`).then((resp) => {
         console.log(resp);
@@ -719,17 +470,17 @@ export default {
       Array.isArray(brands.value)
         ? brands.value.map((brand) => ({
             value: brand.id,
-            label: brand.title,
+            label: brand?.translation?.title,
           }))
         : []
     );
 
     const handleSearch = async (searchTerm) => {
-      if (searchTerm.length < 3) return;
+      if (searchTerm?.length < 3) return;
       categorySelectorLoader.value = true;
       try {
         const response = await ApiServiece.get(
-          `admin/categories?title=${searchTerm}`
+          `admin/categories?title=${searchTerm ?? ''}`
         );
         categories.value = response.data.data;
         categorySelectorLoader.value = false;
@@ -743,7 +494,7 @@ export default {
       Array.isArray(categories.value)
         ? categories.value.map((category) => ({
             value: category.id,
-            label: category.title,
+            label: category?.translation?.title,
           }))
         : []
     );
@@ -772,9 +523,29 @@ export default {
       }
     };
 
-    const removeImage = (index) => {
-      images.value.splice(index, 1);
-    };
+    const removeImage = async (index) => {
+      if (!imagesResponse.value[index]) {
+        images.value.splice(index, 1);
+      } else {
+        try {
+
+          const { data } = await ApiServiece.post(`admin/products/${productId.value}/images`,{
+            _method: 'DELETE',
+            fileName: imagesResponse.value[index]
+          })
+
+          if (data.success){
+            images.value.splice(index, 1);
+
+            imagesResponse.value.splice(index, 1)
+
+            toast.success(data?.message);
+          }
+        } catch (e) {
+          toast.error(e.response.data.message)
+        }
+      }
+    }
 
     const addImage = () => {
       images.value.push({ file: null, preview: null });
@@ -809,74 +580,28 @@ export default {
 
     const validateForm = () => {
       errors.value = {};
-      if (!title.value) errors.value.title = "وارد کردن عنوان محصول الزامی است";
-      if (!slug.value)
-        errors.value.slug = "وارد کردن کلمه کلیدی محصول ضروری می باشد";
-      if (!summary.value)
-        errors.value.summary = "وارد کردن خلاصه محصول ضروری می باشد";
+
+      if (!weight.value)
+        errors.value.weight = "وارد کردن وزن محصول ضروری می باشد";
       if (!selectedCat.value)
         errors.value.selectedCat = "انتخاب دسته برای محصول ضروری می باشد";
 
       if (!image.value)
         errors.value.image = "وارد کردن عکس محصول ضروری می باشد";
-      if (!description.value)
-        errors.value.description = "وارد کردن توضیحات محصول ضروری می باشد";
-      if (!productType.value)
-        errors.value.productType = "انتخاب حالت محصول ضروری می باشد";
-
-      if (!isChosen.value && spescial.value == 0)
-        errors.value.isChosen = "انتخاب کنید محصول منتخب هست یا خیر";
-      if (!spescial.value && isChosen.value == 0)
-        errors.value.spescial = "انتخاب کنید محصول ویژه هست یا خیر";
-
-      if (!retailePrice.value && productType.value == 1)
-        errors.value.retailePrice = "قیمت محصول تک را وارد نمایید";
-      if (!wholesalePrice.value && productType.value == 2)
-        errors.value.wholesalePrice = "قیمت محصول عمده را وارد نمایید";
-      if (!spescialPrice.value && spescial.value == 1 && isChosen.value == 0)
-        errors.value.spescialPrice = "تخفیف محصول ویژه را وارد کنید";
-      if (!chosenPrice.value && isChosen.value == 1 && spescial.value == 0)
-        errors.value.chosenPrice = "تخفیف محصول منتخب را وارد کنید";
-      if (!expire.value && spescial.value == 1 && isChosen.value == 0)
-        errors.value.expire = "تاریخ انقضای محصول ویژه را انتخاب نمایید";
+      // if (!description.value)
+      //   errors.value.description = "وارد کردن توضیحات محصول ضروری می باشد";
+      // if (!productType.value)
+      //   errors.value.productType = "انتخاب حالت محصول ضروری می باشد";
+
+      if (!discount_type.value)
+        errors.value.discount_type = "انتخاب کنید محصول منتخب هست یا خیر";
+      if (!price.value)
+        errors.value.price = "قیمت محصول را وارد نمایید";
+      if (!discount_expires_at.value && discount_type.value == 1)
+        errors.value.discount_expires_at = "تاریخ انقضای محصول ویژه را انتخاب نمایید";
       if (!selectedBrand.value)
         errors.value.selectedBrand = "انتخاب برند برای محصول ضروری می باشد";
 
-      if (productType.value != 1 && !countInCarton.value)
-        errors.value.countInCarton =
-          "انتخاب تعداد محصول در هر کارتن ضروری می باشد";
-
-      if (images.value.length <= 0)
-        errors.value.images = "انتخاب عکس برای محصول ضروری می باشد";
-
-      const missingInventory = attrebutes.value.filter(
-        (attribute) =>
-          attribute.isChecked &&
-          (attribute.value == null || attribute.value === "")
-      );
-
-      if (missingInventory.length > 0) {
-        missingInventory.forEach((attribute) => {
-          errors.value[
-            `inventory_${attribute.id}`
-          ] = `مقدار موجودی برای ویژگی الزامی است`;
-        });
-      }
-
-      const missingIdentityVal = relatedAttrebutes.value.filter(
-        (identity) =>
-          identity.isChecked &&
-          (identity.value == null || identity.value === "")
-      );
-
-      if (missingIdentityVal.length > 0) {
-        missingIdentityVal.forEach((identity) => {
-          errors.value[
-            `identityVal_${identity.id}`
-          ] = `وارد کردن مقدار مشخصه الزامی می باشد`;
-        });
-      }
-
       return Object.keys(errors.value).length === 0;
     };
 
@@ -934,7 +659,7 @@ export default {
       // quill.on("text-change", () => {
       //   editorContent.value = quill.root.innerHTML;
       // });
-      getAttrebuteValues();
+      //getAttrebuteValues();
       getAttributeValues();
     });
 
@@ -950,155 +675,50 @@ export default {
       loading.value = true;
 
       const formData = new FormData();
-      formData.append("title", title.value);
-      formData.append("slug", slug.value);
-      formData.append("summary", summary.value);
-      formData.append("description", description.value);
-
-      if (isChosen.value == 1) {
-        formData.append("is_chosen", isChosen.value);
-        formData.append("is_special", 0);
-      }
-      if (isChosen.value == 0 && spescial.value == 0) {
-        formData.append("is_chosen", 0);
-        formData.append("is_special", 0);
-      }
 
-      if (spescial.value == 1) {
-        formData.append("is_chosen", 0);
-        formData.append("is_special", spescial.value);
-      }
+      if (discount_type.value != 0){
+        formData.append("discount_type", discount_type.value);
 
-      if (productType.value == 2) {
-        formData.append("wholesale_price", wholesalePrice.value);
-      }
-      if (productType.value == 1) {
-        formData.append("retail_price", retailePrice.value);
+        formData.append("discount_percentage", discount_percentage.value);
       }
-      if (productType.value == 3) {
-        formData.append("retail_price", retailePrice.value);
-        formData.append("wholesale_price", wholesalePrice.value);
-      }
-      formData.append("type", productType.value);
 
-      if (isChosen.value == 1 && spescial.value == 0) {
-        formData.append("chosen_price", chosenPrice.value);
-      }
+      formData.append("weight", weight.value);
 
-      if (spescial.value == 1 && isChosen.value == 0) {
-        formData.append("special_price", parseInt(spescialPrice.value, 10));
+      formData.append("price", price.value);
 
-        // Convert Jalali to Gregorian before sending
+      if (discount_type.value == 1) {
         const georgianDate = moment(
-          expire.value,
+          discount_expires_at.value,
           "jYYYY/jMM/jDD HH:mm:ss"
         ).format("YYYY/MM/DD HH:mm:ss");
 
-        formData.append("special_expires_at", georgianDate);
+        formData.append("discount_expires_at", georgianDate);
       }
 
       formData.append("brand_id", selectedBrand.value);
-      formData.append("category_id", selectedCat.value);
 
-      if (productType.value === "2" || productType.value === "3") {
-        formData.append("count_in_carton", countInCarton.value);
-      }
+      formData.append("category_id", selectedCat.value);
 
       formData.append("image", image.value);
 
       ApiServiece.post(`admin/products`, formData, {
         headers: {
-          "content-type": "multipart",
+          "content-type": "multipart/form-data",
           Authorization: `Bearer ${localStorage.getItem("token")}`,
         },
       })
         .then((resp) => {
-          const id = resp.data.data.id;
-
-          // 🔸 Call attributes API if needed
-          selectedAttributes.value = attrebutes.value
-            .filter((attribute) => attribute.isChecked && attribute.value)
-            .map((attribute) => ({
-              attribute_value_id: attribute.id,
-              inventory: attribute.value,
-              type: productType.value,
-            }));
-
-          if (selectedAttributes.value.length > 0) {
-            const json = JSON.stringify(
-              { productAttributes: selectedAttributes.value },
-              null,
-              2
-            );
-            ApiServiece.post(`admin/products/${id}/attributes`, json);
-          }
+          step.value++
 
-          // 🔸 Call solid-attributes API if needed
-          selectedIdentities.value = relatedAttrebutes.value
-            .filter((identity) => identity.isChecked)
-            .map((identity) => ({
-              attribute_id: identity.id,
-              attribute_value_title: identity.value,
-            }));
-
-          if (selectedIdentities.value.length > 0) {
-            const json = JSON.stringify(
-              { productSolidAttributes: selectedIdentities.value },
-              null,
-              2
-            );
-            ApiServiece.post(`admin/products/${id}/solid-attributes`, json);
-          }
+          productId.value = resp?.data?.data?.id;
 
-          // 🔸 Upload images if any
-          const validImages = images.value.filter((image) => image.file);
-          if (validImages.length > 0) {
-            validImages.forEach((image) => {
-              const formData = new FormData();
-              formData.append("image", image.file);
-              ApiServiece.post(`admin/products/${id}/images`, formData, {
-                headers: {
-                  "content-type": "multipart",
-                  Authorization: `Bearer ${localStorage.getItem("token")}`,
-                },
-              });
-            });
-          }
+          categoryId.value = resp?.data?.data?.category_id;
 
-          toast.success("!محصول با موفقیت اضافه شد", {
+          toast.success(resp?.data?.message, {
             position: "top-right",
             autoClose: 1000,
           });
           loading.value = false;
-          title.value = "";
-          imagePreview.value = null;
-          slug.value = "";
-          summary.value = "";
-          editorContent.value = "";
-          spescial.value = 0;
-          isChosen.value = 0;
-          wholesalePrice.value = "";
-          retailePrice.value = "";
-          productType.value = "";
-          chosenPrice.value = "";
-          spescialPrice.value = "";
-          expire.value = "";
-          selectedBrand.value = null;
-          selectedCat.value = null;
-          countInCarton.value = "";
-          image.value = null;
-          images.value = [];
-          description.value = null;
-          if (productImageRef.value) {
-            productImageRef.value.value = null
-          }
-          attrebutes.value.forEach((attribute) => {
-            attribute.isChecked = false;
-            attribute.value = "";
-          });
-          relatedAttrebutes.value.forEach((identity) => {
-            identity.isChecked = false;
-          });
         })
         .catch((error) => {
           loading.value = false;
@@ -1109,10 +729,46 @@ export default {
         })
         .finally(() => {
           loading.value = false;
-         
         });
     };
 
+    const submitImage = async (file, image) => {
+      if (!file?.file) {
+        toast.error('لطفا یک تصویر بارگذاری کنید.')
+
+        return
+      }
+
+      try {
+        image.loading = true;
+
+        const formData = new FormData();
+
+        formData.append("image", file?.file);
+
+        const { data:{ message, success, data } } = await ApiServiece.post(`admin/products/${productId.value}/images`, formData, {
+          headers: {
+            "content-type": "multipart/form-data",
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          }
+        })
+
+        if (success) {
+          toast.success(message)
+
+          imagesResponse.value = data?.images
+        }
+      } catch (e) {
+        toast.error(e.response?.data?.message)
+      } finally {
+        image.loading = false;
+      }
+    }
+
+    onMounted(() => {
+      handleSearch()
+    })
+
     return {
       title,
       slug,
@@ -1130,7 +786,7 @@ export default {
       blogCat,
       loading,
       productType,
-      isChosen,
+      discount_type,
       spescial,
       date,
       selectedCat,
@@ -1144,11 +800,11 @@ export default {
       selectedAttributes,
       onCheckboxChange,
       retailePrice,
-      wholesalePrice,
+      price,
       spescialPrice,
-      chosenPrice,
-      expire,
-      countInCarton,
+      discount_percentage,
+      discount_expires_at,
+      weight,
       relatedAttrebutes,
       selectedIdentities,
       attributeValues,
@@ -1164,6 +820,11 @@ export default {
       description,
       handleAddIdentityClick,
       handlerStep,
+      submitImage,
+      loadingImage,
+      imagesResponse,
+      productId,
+      categoryId
     };
   },
 };
diff --git a/src/views/live-preview/pages/products/editProduct.vue b/src/views/live-preview/pages/products/editProduct.vue
index 49278ba..a9663b4 100644
--- a/src/views/live-preview/pages/products/editProduct.vue
+++ b/src/views/live-preview/pages/products/editProduct.vue
@@ -7,754 +7,233 @@
             <h5>ویرایش محصول</h5>
           </BCardHeader>
           <BCardBody>
-            <BRow class="g-3">
-              <!-- First Input Field -->
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">عنوان </label>
-                  <input
-                    type="text"
-                    v-model="title"
-                    class="form-control"
-                    placeholder="عنوان محصول"
-                    :class="{ 'is-invalid': errors.title }"
-                    @input="clearError('title')"
-                  />
-                </div>
-                <small v-if="errors.title" class="text-danger">
-                  {{ errors.title }}
-                </small>
-              </BCol>
-
-              <!-- Second Input Field (Slug) -->
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">کلمه کلیدی</label>
-                  <input
-                    type="text"
-                    v-model="slug"
-                    class="form-control"
-                    placeholder="کلمه کلیدی محصول"
-                    :class="{ 'is-invalid': errors.slug }"
-                    @input="clearError('slug')"
-                  />
-                </div>
-                <small v-if="errors.slug" class="text-danger">
-                  {{ errors.slug }}
-                </small>
-              </BCol>
-
-              <!-- Summary Textarea -->
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">خلاصه</label>
-                  <textarea
-                    v-model="summary"
-                    class="form-control"
-                    placeholder="خلاصه ای از محصول"
-                    :class="{ 'is-invalid': errors.summary }"
-                    @input="clearError('summary')"
-                  />
-                </div>
-                <small v-if="errors.summary" class="text-danger">
-                  {{ errors.summary }}
-                </small>
-              </BCol>
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">توضیحات محصول</label>
-                  <textarea
-                      v-model="description"
-                      class="form-control"
-                      placeholder="توضیحات محصول"
-                      :class="{ 'is-invalid': errors.description }"
-                      @input="clearError('description')"
-                  />
-                </div>
-                <small v-if="errors.description" class="text-danger">
-                  {{ errors.description }}
-                </small>
-              </BCol>
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">تصویر محصول</label>
-
-                  <input
-                    type="file"
-                    accept="image/*"
-                    @change="handleImageUpload"
-                    class="form-control"
-                    :class="{ 'is-invalid': errors.image }"
-                  />
-
-                  <div v-if="imagePreview" class="mt-2">
-                    <img
-                      :src="imagePreview"
-                      alt="Image Preview"
-                      class="img-fluid rounded shadow-sm Image-Preview"
-                    />
-                  </div>
-
-                  <small v-if="errors.image" class="text-danger">
-                    {{ errors.image }}
-                  </small>
-                </div>
-              </BCol>
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">حالت</label>
-                  <select
-                    :class="{ 'is-invalid': errors.productType }"
-                    v-model="productType"
-                    class="form-control"
-                    @select="clearError('productType')"
-                    placeholder="انتخاب حالت محصول"
-                  >
-                    <option value="1">تک</option>
-                    <option value="2">عمده</option>
-                    <option value="3">هردو</option>
-                  </select>
-                </div>
-                <small v-if="errors.productType" class="text-danger">
-                  {{ errors.productType }}
-                </small>
-              </BCol>
-
-              <BCol md="6" v-if="productType == 2 || productType == 3">
-                <div class="form-group">
-                  <label class="form-label">قیمت (عمده) </label>
-                  <input
-                    type="number"
-                    v-model="wholesalePrice"
-                    class="form-control"
-                    placeholder="قیمت"
-                    :class="{ 'is-invalid': errors.wholesalePrice }"
-                    @input="clearError('wholesalePrice')"
-                  />
-                </div>
-                <small v-if="errors.wholesalePrice" class="text-danger">
-                  {{ errors.wholesalePrice }}
-                </small>
-              </BCol>
-
-              <BCol md="6" v-if="productType != 1">
-                <div class="form-group">
-                  <label class="form-label">تعداد در کارتن</label>
-                  <input
-                    type="number"
-                    v-model="countInCarton"
-                    class="form-control"
-                    placeholder="تعداد"
-                    :class="{ 'is-invalid': errors.countInCarton }"
-                    @input="clearError('countInCarton')"
-                  />
-                </div>
-                <small v-if="errors.countInCarton" class="text-danger">
-                  {{ errors.countInCarton }}
-                </small>
-              </BCol>
-
-              <BCol v-if="productType == 1 || productType == 3" md="6">
-                <div class="form-group">
-                  <label class="form-label">قیمت (تک) </label>
-                  <input
-                    type="number"
-                    v-model="retailePrice"
-                    class="form-control"
-                    placeholder="قیمت"
-                    :class="{ 'is-invalid': errors.retailePrice }"
-                    @input="clearError('retailePrice')"
-                  />
-                </div>
-                <small v-if="errors.retailePrice" class="text-danger">
-                  {{ errors.retailePrice }}
-                </small>
-              </BCol>
-
-              <BCol v-if="spescial == 0" md="6">
-                <div class="form-group">
-                  <label class="form-label">منتخب</label>
-                  <select
-                    :class="{ 'is-invalid': errors.isChosen }"
-                    v-model="isChosen"
-                    class="form-control"
-                    @select="clearError('isChosen')"
-                    placeholder="انتخاب حالت منتخب"
-                  >
-                    <option value="1">هست</option>
-                    <option value="0">نیست</option>
-                  </select>
-                </div>
-                <small v-if="errors.isChosen" class="text-danger">
-                  {{ errors.isChosen }}
-                </small>
-              </BCol>
-
-              <BCol v-if="isChosen == 1" md="6">
-                <div class="form-group">
-                  <label class="form-label">تخفیف (منتخب) </label>
-                  <input
-                    type="number"
-                    v-model="chosenPrice"
-                    class="form-control"
-                    placeholder="میزان تخفیف به درصد"
-                    :class="{ 'is-invalid': errors.chosenPrice }"
-                    @input="clearError('chosenPrice')"
-                  />
-                </div>
-                <small v-if="errors.slug" class="text-danger">
-                  {{ errors.slug }}
-                </small>
-              </BCol>
-
-              <BCol v-if="isChosen == 0" md="6">
-                <div class="form-group">
-                  <label class="form-label">ویژه</label>
-                  <select
-                    :class="{ 'is-invalid': errors.spescial }"
-                    v-model="spescial"
-                    class="form-control"
-                    @select="clearError('spescial')"
-                    placeholder="انتخاب حالت ویژه"
-                  >
-                    <option value="1">هست</option>
-                    <option value="0">نیست</option>
-                  </select>
-                </div>
-                <small v-if="errors.spescial" class="text-danger">
-                  {{ errors.spescial }}
-                </small>
-              </BCol>
-
-              <BCol v-if="spescial == 1" md="6">
-                <div class="form-group">
-                  <label class="form-label"> درصد تخفیف ویژه</label>
-                  <input
-                    type="number"
-                    class="form-control"
-                    placeholder="درصد"
-                    :class="{ 'is-invalid': errors.spescialPrice }"
-                    @input="clearError('spescialPrice')"
-                    v-model="spescialPrice"
-                  />
-                </div>
-                <small v-if="errors.spescialPrice" class="text-danger">
-                  {{ errors.spescialPrice }}
-                </small>
-              </BCol>
-
-              <BCol v-if="spescial == 1" md="6">
-                <div class="form-group">
-                  <label class="form-label">
-                    تاریخ انقضای تخفیف محصول ویژه
-                  </label>
-
-                  <DatePicker
-                    :format="'jYYYY/jMM/jDD HH:mm:ss'"
-                    type="datetime"
-                    v-model="expire"
-                  ></DatePicker>
-                </div>
-                <small v-if="errors.expire" class="text-danger">
-                  {{ errors.expire }}
-                </small>
-              </BCol>
-
-              <!-- <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">دسته</label>
-                  <select
-                    :class="{ 'is-invalid': errors.blogCat }"
-                    v-model="selectedCat"
-                    class="form-control"
-                    @input="clearError('selectedCat')"
-                    placeholder="انتخاب دسته محصول"
-                  >
-                    <option v-for="cat in cats" :key="cat.id" :value="cat.id">
-                      {{ cat.title }}
-                    </option>
-                  </select>
-                </div>
-                <small v-if="errors.blogCat" class="text-danger">
-                  {{ errors.blogCat }}
-                </small>
-              </BCol> -->
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">دسته</label>
-                  <VueSelect
-                    :isLoading="categorySelectorLoader"
-                    v-model="selectedCat"
-                    :reduce="(option) => option.value"
-                    :options="formattedCategories"
-                    placeholder="دسته ای را انتخاب کنید"
-                    @search="handleSearch"
-                  />
-                </div>
-                <small v-if="errors.selectedCat" class="text-danger">
-                  {{ errors.selectedCat }}
-                </small>
-              </BCol>
-
-              <BCol md="6">
-                <div class="form-group">
-                  <label class="form-label">برند</label>
-                  <VueSelect
-                    v-model="selectedBrand"
-                    :isLoading="brandSelectorLoader"
-                    :options="formattedBrands"
-                    :reduce="(option) => option.value"
-                    placeholder="برندی را انتخاب کنید"
-                    @search="handleBrandSearch"
-                  />
-                </div>
-                <small v-if="errors.selectedBrand" class="text-danger">
-                  {{ errors.selectedBrand }}
-                </small>
-              </BCol>
-
-              <BCard v-if="locals.length !== 0">
+            <span v-if="loadingProduct">
+              <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+            </span>
+            <BTabs v-else>
+              <BTab title="ایجاد محصول">
                 <BRow class="g-3 mt-2">
-                  <div class="card-header">
-                    <h5 class="mb-0">ویرایش ویژگی ها</h5>
-                  </div>
-                  <BCol
-                    v-for="attrebute in locals"
-                    :key="attrebute.id"
-                    md="6"
-                    lg="4"
-                  >
-                    <div class="card shadow-sm">
-                      <div class="card-body">
-                        <!-- Card Header with Delete Icon -->
-                        <div
-                          class="d-flex justify-content-between align-items-center"
-                        >
-                          <!-- Optional Title or Heading for the card -->
-                          <div class="card-title"></div>
-
-                          <!-- Delete Icon -->
-                          <button
-                            class="btn btn-link text-danger p-0"
-                            @click="deleteAttribute(attrebute.id)"
-                            title="حذف"
-                          >
-                            <i class="fas fa-trash-alt"></i>
-                          </button>
-                        </div>
-
-                        <!-- Checkbox Column -->
-                        <label
-                          class="form-label d-flex align-items-center mb-3"
-                        >
-                          <BCol md="2" class="d-flex justify-content-center">
-                            <BFormCheckbox
-                              :id="'checkbox-id-' + attrebute.id"
-                              class="mr-2 test"
-                              v-model="attrebute.isChecked"
-                            />
-                          </BCol>
-
-                          <!-- Title Column with Dynamic Color -->
-                          <BCol
-                            md="5"
-                            class="d-flex align-items-center"
-                            :style="{ color: attrebute.code }"
-                          >
-                            {{ attrebute.title }}
-                          </BCol>
-
-                          <!-- Number Input Column -->
-                          <BCol md="5">
-                            <input
-                              type="number"
-                              class="form-control"
-                              placeholder="تعداد"
-                              :disabled="!attrebute.isChecked"
-                              v-model="attrebute.value"
-                              @input="clearError(`inventory_${attrebute.id}`)"
-                            />
-                          </BCol>
-                        </label>
-
-                        <!-- Error Message -->
-                        <small
-                          v-if="errors[`inventory_${attrebute.id}`]"
-                          class="text-danger"
-                        >
-                          {{ errors[`inventory_${attrebute.id}`] }}
-                        </small>
-
-                        <!-- Edit Button -->
-                        <div class="mt-3 text-center">
-                          <button
-                            class="btn btn-primary"
-                            @click="
-                              editAttribute(
-                                attrebute.id,
-                                attrebute.value,
-                                attrebute.attribute_value_id
-                              )
-                            "
-                          >
-                            ویرایش
-                          </button>
-                        </div>
-                      </div>
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">قیمت محصول(بر واحد دلار)</label>
+                      <input
+                          type="number"
+                          v-model="price"
+                          class="form-control"
+                          placeholder="قیمت دلاری محصول را وارد کنید"
+                          :class="{ 'is-invalid': errors.price }"
+                          @input="clearError('price')"
+                      />
                     </div>
+                    <small v-if="errors.price" class="text-danger">
+                      {{ errors.price }}
+                    </small>
                   </BCol>
 
-                  <small v-if="errors.selectedAttributes" class="text-danger">
-                    {{ errors.selectedAttributes }}
-                  </small>
-                </BRow>
-              </BCard>
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">تصویر محصول</label>
 
-              <BCard v-if="localIdentities.length !== 0">
-                <div class="card-header">
-                  <h5 class="mb-0">ویرایش مشخصه ها</h5>
-                </div>
+                      <input
+                          ref="productImageRef"
+                          type="file"
+                          accept="image/*"
+                          @change="handleImageUpload"
+                          class="form-control"
+                          :class="{ 'is-invalid': errors.image }"
+                      />
 
-                <BRow class="g-3 mt-2">
-                  <!-- Loop through attributes -->
-                  <BCol
-                    v-for="identity in localIdentities"
-                    :key="identity.id"
-                    md="6"
-                    lg="4"
-                  >
-                    <div class="card shadow-sm">
-                      <div class="card-body">
-                        <!-- Card Header with Delete Icon -->
-                        <div
-                          class="d-flex justify-content-between align-items-center"
-                        >
-                          <!-- Optional Title or Heading for the card -->
-                          <div class="card-title">
-                            <!-- You can add a title or leave it empty if you don't need one -->
-                          </div>
-
-                          <!-- Delete Icon -->
-                          <button
-                            class="btn btn-link text-danger p-0"
-                            @click="deleteIdentity(identity.id)"
-                            title="حذف"
-                          >
-                            <i class="fas fa-trash-alt"></i>
-                          </button>
-                        </div>
-
-                        <!-- Checkbox Column -->
-                        <label
-                          class="form-label d-flex align-items-center mb-3"
+                      <div v-if="imagePreview" class="mt-2">
+                        <img
+                            :src="imagePreview"
+                            alt="Image Preview"
+                            class="img-fluid rounded shadow-sm Image-Preview"
+                        />
+                        <button
+                            type="button"
+                            @click="removeImage()"
+                            class="delete-btn"
                         >
-                          <BCol md="2" class="d-flex justify-content-center">
-                            <BFormCheckbox
-                              :id="'checkbox-id-' + identity.id"
-                              class="mr-2 test"
-                              v-model="identity.isChecked"
-                            />
-                          </BCol>
-
-                          <!-- Title Column with Dynamic Color -->
-                          <BCol md="5" class="d-flex align-items-center">
-                            {{ identity.title }}
-                          </BCol>
-
-                          <!-- Number Input Column -->
-                          <BCol md="5">
-                            <input
-                              type="text"
-                              class="form-control"
-                              placeholder="تعداد"
-                              :disabled="!identity.isChecked"
-                              v-model="identity.value"
-                            />
-                          </BCol>
-                        </label>
-
-                        <!-- Error Message -->
-
-                        <!-- Edit Button -->
-                        <div class="mt-3 text-center">
-                          <button
-                            class="btn btn-primary"
-                            @click="
-                              editIdentity(
-                                identity.id,
-                                identity.value,
-                                identity.attribute_value_id
-                              )
-                            "
-                          >
-                            ویرایش
-                          </button>
-                        </div>
+                          <i class="fa fa-trash f-16"></i>
+                        </button>
                       </div>
+
+                      <small v-if="errors.image" class="text-danger">
+                        {{ errors.image }}
+                      </small>
                     </div>
                   </BCol>
 
-                  <small v-if="errors.selectedAttributes" class="text-danger">
-                    {{ errors.selectedAttributes }}
-                  </small>
-                </BRow>
-              </BCard>
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">وزن</label>
+                      <input
+                          type="number"
+                          v-model="weight"
+                          class="form-control"
+                          placeholder="وزن"
+                          :class="{ 'is-invalid': errors.weight }"
+                          @input="clearError('weight')"
+                      />
+                    </div>
+                    <small v-if="errors.weight" class="text-danger">
+                      {{ errors.weight }}
+                    </small>
+                  </BCol>
 
-              <BCard>
-                <div class="card-header">
-                  <h5 class="mb-0">اضافه کردن ویژگی جدید</h5>
-                </div>
-                <BRow class="g-3 mt-2">
-                  <template v-if="attrebutes.length === 0 && !repeatedIdentity">
-                    <BCol>
-                      <div class="alert alert-info text-center">
-                        برای شما ویژگی ثبت نشده است. برای ساختن یک ویژگی
-                        <BButton
-                          variant="success"
-                          size="lg"
-                          class="mt-2 px-4 py-2 shadow-lg rounded-pill"
-                          data-bs-toggle="modal"
-                          data-bs-target="#addIdentity"
-                        >
-                          <i class="fas fa-plus me-2"></i> کلیک کنید
-                        </BButton>
-                      </div>
-                    </BCol>
-                  </template>
-                  <template v-if="attrebutes.length === 0 && repeatedAttrebute">
-                    <BCol>
-                      <div
-                        class="alert alert-info text-center p-4 shadow-lg rounded-lg"
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">نوع محصول</label>
+                      <select
+                          :class="{ 'is-invalid': errors.discount_type }"
+                          v-model="discount_type"
+                          class="form-control"
+                          @change="clearError('discount_type')"
                       >
-                        <h5 class="mb-3">
-                          هیچ ویژگی جدیدی برای شما ثبت نشده است
-                        </h5>
-                        <p class="mb-3">
-                          شما می‌توانید ویژگی های قبلی را ویرایش کنید.
-                          <br />
-                          برای اضافه کردن ویژگی جدید ، لطفاً دکمه زیر را کلیک
-                          کنید .
-                        </p>
-                        <BButton
-                          variant="success"
-                          size="lg"
-                          class="mt-3 px-4 py-2 shadow-lg rounded-pill"
-                          data-bs-toggle="modal"
-                          data-bs-target="#addAttribute"
-                        >
-                          <i class="fas fa-plus me-2"></i> اضافه کردن ویژگی جدید
-                        </BButton>
-                      </div>
-                    </BCol>
-                  </template>
-
-                  <!-- Loop through attributes -->
-                  <BCol
-                    v-for="attrebute in attrebutes"
-                    :key="attrebute.id"
-                    md="6"
-                    lg="4"
-                  >
-                    <div class="card shadow-sm">
-                      <div class="card-body">
-                        <label
-                          class="form-label d-flex align-items-center mb-3"
-                        >
-                          <!-- Checkbox Column -->
-                          <BCol md="2" class="d-flex justify-content-center">
-                            <BFormCheckbox
-                              :id="'checkbox-id-' + attrebute.id"
-                              class="mr-2 test"
-                              v-model="attrebute.isChecked"
-                            />
-                          </BCol>
-
-                          <!-- Title Column with Dynamic Color -->
-                          <BCol
-                            md="5"
-                            class="d-flex align-items-center"
-                            :style="{ color: attrebute.code }"
-                          >
-                            {{ attrebute.title }}
-                          </BCol>
-
-                          <!-- Number Input Column -->
-                          <BCol md="5">
-                            <input
-                              type="number"
-                              class="form-control"
-                              placeholder="تعداد"
-                              :disabled="!attrebute.isChecked"
-                              v-model="attrebute.value"
-                              @input="clearError(`inventory_${attrebute.id}`)"
-                            />
-                          </BCol>
-                        </label>
-                        <small
-                          v-if="errors[`inventory_${attrebute.id}`]"
-                          class="text-danger"
-                        >
-                          {{ errors[`inventory_${attrebute.id}`] }}
-                        </small>
-                      </div>
+                        <option value="0">عادی</option>
+                        <option value="1">ویژه</option>
+                        <option value="2">منتخب</option>
+                      </select>
                     </div>
+                    <small v-if="errors.discount_type" class="text-danger">
+                      {{ errors.discount_type }}
+                    </small>
                   </BCol>
 
-                  <small v-if="errors.selectedAttributes" class="text-danger">
-                    {{ errors.selectedAttributes }}
-                  </small>
-                </BRow>
-              </BCard>
+                  <BCol v-if="discount_type != 0" md="6">
+                    <div class="form-group">
+                      <label class="form-label">درصد تخفیف</label>
+                      <input
+                          type="number"
+                          v-model="discount_percentage"
+                          class="form-control"
+                          placeholder="میزان تخفیف به درصد"
+                          :class="{ 'is-invalid': errors.discount_percentage }"
+                          @input="clearError('discount_percentage')"
+                      />
+                    </div>
+                    <small v-if="errors.discount_percentage" class="text-danger">
+                      {{ errors.discount_percentage }}
+                    </small>
+                  </BCol>
 
-              <BCard>
-                <div class="card-header">
-                  <h5 class="mb-0">اضافه کردن مشخصه جدید</h5>
-                </div>
-                <template v-if="identities.length === 0 && !repeatedIdentity">
-                  <BCol>
-                    <div class="alert alert-info text-center">
-                      برای شما مشخصه‌ای ثبت نشده است. برای ساختن یک مشخصه
-                      <BButton
-                        variant="success"
-                        size="lg"
-                        class="mt-2 px-4 py-2 shadow-lg rounded-pill"
-                        data-bs-toggle="modal"
-                        data-bs-target="#addIdentity"
-                      >
-                        <i class="fas fa-plus me-2"></i> کلیک کنید
-                      </BButton>
+                  <BCol v-if="discount_type == 1" md="6">
+                    <div class="form-group">
+                      <label class="form-label">
+                        تاریخ انقضای تخفیف محصول ویژه
+                      </label>
+
+                      <DatePicker
+                          :format="'jYYYY/jMM/jDD HH:mm:ss'"
+                          type="datetime"
+                          v-model="discount_expires_at"
+                      ></DatePicker>
                     </div>
+                    <small v-if="errors.discount_expires_at" class="text-danger">
+                      {{ errors.discount_expires_at }}
+                    </small>
                   </BCol>
-                </template>
 
-                <template v-if="identities.length === 0 && repeatedIdentity">
-                  <BCol>
-                    <div
-                      class="alert alert-info text-center p-4 shadow-lg rounded-lg"
-                    >
-                      <h5 class="mb-3">
-                        هیچ مشخصه جدیدی برای این دسته‌بندی ثبت نشده است
-                      </h5>
-                      <p class="mb-3">
-                        شما می‌توانید مشخصه‌های قبلی را ویرایش کنید.
-                        <br />
-                        برای اضافه کردن مشخصه جدید به این دسته، لطفاً دکمه زیر
-                        را کلیک کنید .
-                      </p>
-                      <BButton
-                        variant="success"
-                        size="lg"
-                        class="mt-3 px-4 py-2 shadow-lg rounded-pill"
-                        data-bs-toggle="modal"
-                        data-bs-target="#addIdentity"
-                      >
-                        <i class="fas fa-plus me-2"></i> اضافه کردن مشخصه جدید
-                      </BButton>
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">دسته</label>
+                      <VueSelect
+                          :isLoading="categorySelectorLoader"
+                          v-model="selectedCat"
+                          :options="formattedCategories"
+                          placeholder="دسته ای را انتخاب کنید"
+                          @search="handleSearch"
+                      />
                     </div>
+                    <small v-if="errors.selectedCat" class="text-danger">
+                      {{ errors.selectedCat }}
+                    </small>
                   </BCol>
-                </template>
-                <BRow class="g-3 mt-2">
-                  <!-- Loop through attributes -->
-                  <BCol
-                    v-for="identity in identities"
-                    :key="identity.id"
-                    md="6"
-                    lg="4"
-                  >
-                    <div class="card shadow-sm">
-                      <div class="card-body">
-                        <label
-                          class="form-label d-flex align-items-center mb-3"
-                        >
-                          <!-- Checkbox Column -->
-                          <BCol md="2" class="d-flex justify-content-center">
-                            <BFormCheckbox
-                              :id="'checkbox-id-' + identity.id"
-                              class="mr-2 test"
-                              v-model="identity.isChecked"
-                            />
-                          </BCol>
-
-                          <!-- Title Column with Dynamic Color -->
-                          <BCol md="5" class="d-flex align-items-center">
-                            {{ identity.title }}
-                          </BCol>
-
-                          <!-- Number Input Column -->
-
-                          <BCol md="5">
-                            <input
-                              type="text"
-                              class="form-control"
-                              placeholder="مقدار"
-                              :disabled="!identity.isChecked"
-                              v-model="identity.value"
-                              @input="clearError(`identityVal_${identity.id}`)"
-                            />
-                          </BCol>
-                        </label>
-                        <small
-                          v-if="errors[`identityVal_${identity.id}`]"
-                          class="text-danger"
-                        >
-                          {{ errors[`identityVal_${identity.id}`] }}
-                        </small>
-                      </div>
+
+                  <BCol md="6">
+                    <div class="form-group">
+                      <label class="form-label">برند</label>
+                      <VueSelect
+                          v-model="selectedBrand"
+                          :isLoading="brandSelectorLoader"
+                          :options="formattedBrands"
+                          placeholder="برندی را انتخاب کنید"
+                          @search="handleBrandSearch"
+                      />
                     </div>
+                    <small v-if="errors.selectedBrand" class="text-danger">
+                      {{ errors.selectedBrand }}
+                    </small>
                   </BCol>
+
+                  <div class="d-flex justify-content-center mt-5">
+                    <div class="text-center">
+                      <button
+                          type="submit"
+                          class="btn btn-primary"
+                          :disabled="loading"
+                          @click.prevent="submitForm"
+                      >
+                            <span v-if="loading">
+                              <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+                            </span>
+                        <span v-else>ایجاد</span>
+                      </button>
+                    </div>
+                  </div>
                 </BRow>
-              </BCard>
+              </BTab>
 
-              <BCard>
-                <!-- Card Header -->
+              <BTab title="بارگذاری تصاویر">
                 <div
-                  class="card-header text-center p-4"
-                  style="background-color: #f7f7f7"
+                    class="card-header text-center p-4 mt-4"
+                    style="background-color: #f7f7f7"
                 >
                   <h5 class="mb-0 text-dark">اضافه کردن عکس ها</h5>
                 </div>
 
                 <BRow class="g-4 mt-3">
                   <BCol
-                    v-for="(image, index) in images"
-                    :key="index"
-                    class="mb-4"
-                    md="6"
+                      v-for="(image, index) in images"
+                      :key="index"
+                      class="mb-4"
+                      md="6"
                   >
                     <div class="form-group position-relative">
-                      <!-- Label -->
-                      <label class="form-label mb-2 fw-bold text-secondary"
-                        >تصویر محصول</label
-                      >
+                      <label class="form-label mb-2 fw-bold text-secondary">تصویر محصول</label>
 
-                      <!-- File Input -->
                       <div class="custom-file">
                         <input
-                          type="file"
-                          accept="image/*"
-                          @change="(event) => handleImageChange(event, index)"
-                          class="form-control-file rounded-3 shadow-sm"
-                          style="border: 1px solid #ddd; padding: 15px"
+                            type="file"
+                            accept="image/*"
+                            @change="(event) => handleImageChange(event, index)"
+                            class="form-control-file rounded-3 shadow-sm"
+                            style="border: 1px solid #ddd; padding: 15px"
                         />
+
+                        <button
+                            :disabled="image?.loading"
+                            @click="submitImage(images[index], image)"
+                            class="btn btn-primary rounded-pill me-4"
+                        >
+                              <span v-if="image?.loading">
+                                <i class="fa fa-spinner fa-spin"></i> بارگذاری...
+                              </span>
+                          <span v-else>ثبت تصویر</span>
+                        </button>
                       </div>
 
-                      <!-- Image Preview Section -->
                       <div v-if="image.preview" class="mt-3 position-relative">
                         <img
-                          :src="image.preview"
-                          alt="Image Preview"
-                          class="img-fluid rounded-3 shadow-lg border Image-Preview"
+                            :src="image.preview"
+                            alt="Image Preview"
+                            class="img-fluid rounded-3 shadow-lg border Image-Preview"
                         />
 
-                        <!-- Delete Button -->
                         <button
-                          type="button"
-                          @click="removeImage(index, image.preview)"
-                          class="delete-btn"
+                            type="button"
+                            @click="removeImage(index)"
+                            class="delete-btn"
                         >
                           <i class="fa fa-trash f-16"></i>
                         </button>
@@ -766,119 +245,115 @@
                   </small>
                 </BRow>
 
-                <!-- Add New Image Upload Section -->
-                <div class="text-center mt-4">
-                  <button
-                    @click="addImage"
-                    class="btn btn-primary rounded-pill px-5 py-3"
-                    style="
-                      font-size: 16px;
-                      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-                    "
-                  >
-                    <i class="fa fa-plus-circle me-2"></i> افزودن عکس جدید
-                  </button>
+                <div class="d-flex justify-content-between align-items-center mt-4">
+                  <div class="d-flex gap-3">
+                    <button
+                        @click="addImage"
+                        class="btn btn-primary rounded-pill px-5 py-3"
+                        style="
+                            font-size: 16px;
+                            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+                          "
+                    >
+                      <i class="fa fa-plus-circle me-2"></i> افزودن عکس جدید
+                    </button>
+                  </div>
                 </div>
-              </BCard>
-            </BRow>
+              </BTab>
+
+              <BTab title="ویژگی ها">
+                <AtrributesProduct
+                    ref="attributesProductRef"
+                    :product-id="productId"
+                    :category-id="categoryId"
+                    @next-step="step++"
+                    class="mt-5"
+                />
+              </BTab>
+
+              <BTab title="مشخصات">
+                <SpecificationsProduct
+                    ref="specificationsProductRef"
+                    :category-id="categoryId"
+                    :product-id="productId"
+                    class="mt-5"
+                />
+              </BTab>
+
+              <BTab title="زبان ها">
+                <ProductInfo
+                    ref="productInfo"
+                    :product-id="productId"
+                    @previousStep="step--"
+                    @changeLng="handleChangeLanguage"
+                    @data="(data) => product = data"
+                    class="mt-5"
+                />
+              </BTab>
+            </BTabs>
           </BCardBody>
-          <BCardFooter>
-            <div class="d-flex justify-content-center">
-              <div class="text-center">
-                <button
-                  type="submit"
-                  class="btn btn-primary"
-                  @click.prevent="submitForm"
-                  :disabled="loading"
-                >
-                  <span v-if="loading">
-                    <i class="fa fa-spinner fa-spin"></i> بارگذاری...
-                  </span>
-                  <span v-else>ویرایش</span>
-                </button>
-              </div>
-            </div>
-            <addIdentity
-              :cats="categories"
-              @attribute-updated="handleAttributeUpdated()"
-            />
-            <addAttribute @attribute-updated="handleAttributeUpdated()" />
-          </BCardFooter>
         </BCard>
       </BCol>
     </BRow>
+
   </Layout>
 </template>
 
 <script>
 import VueSelect from "vue3-select-component";
-import "quill/dist/quill.snow.css";
-import Swal from "sweetalert2";
-import { useRoute } from "vue-router";
+import moment from "jalali-moment";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
-import moment from "jalali-moment";
 import ApiServiece from "@/services/ApiService";
-import { ref, onMounted, watch, computed } from "vue";
+import { ref, onMounted, watch, computed, nextTick } from "vue";
 import Layout from "@/layout/custom.vue";
-import addIdentity from "@/components/modals/identity/addIdentity.vue";
-import addAttribute from "@/components/modals/attribute/addAttribute.vue";
 import DatePicker from "vue3-persian-datetime-picker";
+import { Modal } from "bootstrap"
+import AtrributesProduct from "@/components/AtrributesProduct.vue";
+import SpecificationsProduct from "@/components/SpecificationsProduct.vue";
+import ProductInfo from "@/components/ProductInfo.vue";
+import {BTabs} from "bootstrap-vue-next";
+import { useRoute } from "vue-router";
 
 export default {
   name: "SAMPLE-PAGE",
   components: {
+    BTabs,
+    ProductInfo,
+    SpecificationsProduct,
+    AtrributesProduct,
     Layout,
     DatePicker,
-    addIdentity,
-    addAttribute,
     VueSelect,
   },
   setup() {
-    const locals = ref([
-      {
-        id: null,
-        title: null,
-        code: null,
-        inventory: null,
-        isChecked: null,
-        attribute_value_id: null,
-      },
-    ]);
-
-    const localIdentities = ref([]);
-    const countInCarton = ref();
-    const files = ref([]);
-    const productValueId = ref();
-    const localsIds = ref();
-    const identities = ref([]);
-    const localIdentitiesIds = ref([]);
+    const categorySelectorLoader = ref(false);
+    const categories = ref([]);
+    const brandSelectorLoader = ref(false);
+    const attributeValues = ref();
+    const relatedAttrebutes = ref([]);
+    const weight = ref();
     const selectedAttributes = ref();
-    const selectedidentities = ref([]);
-    const product = ref();
-    const route = useRoute();
-    const imagesTosend = ref();
-    const expire = ref();
-    const chosenPrice = ref();
+    const selectedIdentities = ref();
+    const discount_expires_at = ref();
+    const discount_percentage = ref();
     const spescialPrice = ref();
-    const wholesalePrice = ref();
+    const price = ref();
     const retailePrice = ref();
+
     const productAttributes = ref([]);
     const images = ref([{ file: null, preview: null }]);
-    const localImages = ref([{ preview: null }]);
-
+    const brands = ref();
     const attrebutes = ref([]);
     const selectedBrand = ref();
     const selectedCat = ref();
     const date = ref();
-    const spescial = ref(0);
-    const isChosen = ref(0);
+    const spescial = ref("");
+    const discount_type = ref("");
     const productType = ref();
     const loading = ref(false);
     const image = ref();
     const imagePreview = ref();
-    const repeatedIdentity = ref(false);
-    const repeatedAttrebute = ref(false);
     const errors = ref({});
     const title = ref("");
     const slug = ref("");
@@ -886,56 +361,62 @@ export default {
     const blogCat = ref();
     const author = ref("");
     const editor = ref(null);
-    const categories = ref([{ id: null, title: "" }]);
-    const brands = ref([{ id: null, title: "" }]);
     const editorContent = ref("");
-    const categorySelectorLoader = ref(false);
-    const brandSelectorLoader = ref(false);
+    const productId = ref(null);
+    const loadingImage = ref(false);
+    const imagesResponse = ref([]);
+    const categoryId = ref(null);
+    const productInfo = ref(null);
+    const specificationsProductRef = ref(null);
+    const loadingProduct = ref(false);
+    const attributesProductRef = ref(null);
+
     // ALIREZA
     const productImageRef = ref(null)
-    const description = ref(null)
+    const description = ref(null);
+    const step = ref(1);
+    const product = ref(null);
+    const route = useRoute()
 
 
+    const getAttributeValues = () => {
+      ApiServiece.get(`admin/attributes`).then((resp) => {
+        attributeValues.value = resp.data.data;
+      });
+    };
 
-    const formattedCategories = computed(() =>
-      Array.isArray(categories.value)
-        ? categories.value.map((category) => ({
-            value: category.id,
-            label: category.title,
-          }))
-        : []
-    );
+    const handleAttributeUpdated = () => {
+      getAttrebuteValues();
+    };
 
-    const handleSearch = async (searchTerm) => {
-      if (searchTerm.length < 3) return;
-      categorySelectorLoader.value = true;
-      try {
-        const response = await ApiServiece.get(
-          `admin/categories?title=${searchTerm}`
-        );
-        categories.value = response.data.data;
-        categorySelectorLoader.value = false;
-      } catch (error) {
-        categorySelectorLoader.value = false;
-        categories.value = [];
+    watch(selectedCat, (value) => {
+      if (value){
+        ApiServiece.get(`admin/attributes?category_id=${selectedCat.value}&with_global=1`)
+            .then((resp) => {
+              relatedAttrebutes.value = resp?.data?.data
+            })
+            .catch((err) => {
+              console.log(err);
+            });
       }
-    };
+    });
 
-    const formattedBrands = computed(() =>
-      Array.isArray(brands.value)
-        ? brands.value.map((brand) => ({
-            value: brand.id,
-            label: brand.title,
-          }))
-        : []
-    );
+    const handleIdentityUpdate = () => {
+      ApiServiece.get(`admin/attributes?category_id=${selectedCat.value}&with_global=1`)
+          .then((resp) => {
+            relatedAttrebutes.value = resp.data.data;
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+    };
 
     const handleBrandSearch = async (searchTerm) => {
       if (searchTerm.length < 3) return;
       brandSelectorLoader.value = true;
       try {
         const response = await ApiServiece.get(
-          `admin/brands?title=${searchTerm}`
+            `admin/brands?title=${searchTerm}`
         );
         brands.value = response.data.data;
         brandSelectorLoader.value = false;
@@ -945,164 +426,47 @@ export default {
       }
     };
 
-    watch(selectedCat, () => {
-      ApiServiece.get(`admin/attributes?category_id=${selectedCat.value}&with_global=1`)
-        .then((resp) => {
-          identities.value = resp.data.data;
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    });
-
-    const getIdentities = () => {
-      ApiServiece.get(`admin/attributes?category_id=${selectedCat.value}&with_global=1`)
-        .then((resp) => {
-          identities.value = resp.data.data;
-        })
-        .then(() => {
-          localIdentitiesIds.value = localIdentities.value.map(
-            (identity) => identity.title
-          );
-
-          let hasRepeatedIdentity = false;
-
-          identities.value = identities.value.filter((identity) => {
-            if (!localIdentitiesIds.value.includes(identity.title)) {
-              return true;
-            } else {
-              hasRepeatedIdentity = true;
-              return false;
-            }
-          });
-
-          repeatedIdentity.value = hasRepeatedIdentity;
+    const formattedBrands = computed(() =>
+        Array.isArray(brands.value)
+            ? brands.value.map((brand) => ({
+              value: brand.id,
+              label: brand?.translation?.title,
+            }))
+            : []
+    );
 
-          console.log(repeatedIdentity.value);
-        });
+    const handleSearch = async (searchTerm) => {
+      if (searchTerm?.length < 3) return;
+      categorySelectorLoader.value = true;
+      try {
+        const response = await ApiServiece.get(
+            `admin/categories?title=${searchTerm ?? ''}`
+        );
+        categories.value = response.data.data;
+        categorySelectorLoader.value = false;
+      } catch (error) {
+        categorySelectorLoader.value = false;
+        categories.value = [];
+      }
     };
 
+    const formattedCategories = computed(() =>
+        Array.isArray(categories.value)
+            ? categories.value.map((category) => ({
+              value: category.id,
+              label: category?.translation?.title,
+            }))
+            : []
+    );
+
     const getAttrebuteValues = () => {
       ApiServiece.get(`admin/attribute-values?attribute_id=1`)
-        .then((resp) => {
-          console.log(resp, "attrebute values");
-          attrebutes.value = resp.data.data;
-          console.log("Attributes before filtering:", attrebutes.value);
-        })
-        .then(() => {
-          getProduct();
-        })
-
-        .catch((err) => {
-          console.log(err);
-        });
-    };
-
-    const deleteAttribute = (id) => {
-      Swal.fire({
-        text: `آیا می خواهید این ویژگی را حذف کنید؟`,
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#3085d6",
-        cancelButtonColor: "#d33",
-        confirmButtonText: "بله!",
-        cancelButtonText: "خیر",
-      }).then((result) => {
-        if (result.isConfirmed) {
-          ApiServiece.delete(
-            `admin/products/${route.params.id}/attributes/${id}`
-          )
-            .then(() => {
-              toast.success("!ویژگی با موفقیت حذف شد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-              locals.value = locals.value.filter((brand) => brand.id !== id);
-            })
-            .catch((err) => {
-              console.log(err);
-              toast.error("!مشکلی در حذف کردن ویژگی پیش آمد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-            });
-        }
-      });
-    };
-
-    const deleteIdentity = (id) => {
-      Swal.fire({
-        text: `آیا می خواهید این مشخصه را حذف کنید؟`,
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#3085d6",
-        cancelButtonColor: "#d33",
-        confirmButtonText: "بله!",
-        cancelButtonText: "خیر",
-      }).then((result) => {
-        if (result.isConfirmed) {
-          ApiServiece.delete(
-            `admin/products/${route.params.id}/attributes/${id}`
-          )
-            .then(() => {
-              toast.success("!مشخصه با موفقیت حذف شد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-              localIdentities.value = localIdentities.value.filter(
-                (identity) => identity.id !== id
-              );
-            })
-            .catch((err) => {
-              console.log(err);
-              toast.error("!مشکلی در حذف کردن مشخصه پیش آمد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-            });
-        }
-      });
-    };
-
-    const deletImage = (name) => {
-      Swal.fire({
-        text: `آیا می خواهید این عکس را حذف کنید؟`,
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonColor: "#3085d6",
-        cancelButtonColor: "#d33",
-        confirmButtonText: "بله!",
-        cancelButtonText: "خیر",
-      }).then((result) => {
-        if (result.isConfirmed) {
-          console.log(name);
-
-          ApiServiece.delete(`admin/products/${route.params.id}/images`, {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-            params: {
-              fileName: name,
-            },
+          .then((resp) => {
+            attrebutes.value = resp.data.data;
           })
-            .then(() => {
-              toast.success("!عکس با موفقیت حذف شد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-              images.value = images.value.filter(
-                (image) => image.preview !== name
-              );
-            })
-            .catch((err) => {
-              console.log(err);
-              toast.error("!مشکلی در حذف کردن عکس پیش آمد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-            });
-        }
-      });
+          .catch((err) => {
+            console.log(err);
+          });
     };
 
     const onCheckboxChange = (attrebute) => {
@@ -1114,25 +478,34 @@ export default {
         });
       } else {
         productAttributes.value = productAttributes.value.filter(
-          (item) => item.attribute_value_id !== attrebute.id
+            (item) => item.attribute_value_id !== attrebute.id
         );
       }
-
-      console.log(productAttributes.value);
     };
-    const removeImage = (index, name) => {
-      const imageExists = localImages.value.some(
-        (image) => image.preview === name
-      );
 
-      if (imageExists) {
-        deletImage(name);
-      } else {
+    const removeImage = async (index) => {
+      if (!imagesResponse.value[index]) {
         images.value.splice(index, 1);
-      }
+      } else {
+        try {
 
-      console.log(images.value);
-    };
+          const { data } = await ApiServiece.post(`admin/products/${productId.value}/images`,{
+            _method: 'DELETE',
+            fileName: imagesResponse.value[index],
+          })
+
+          if (data.success){
+            images.value.splice(index, 1);
+
+            imagesResponse.value.splice(index, 1)
+
+            toast.success(data?.message);
+          }
+        } catch (e) {
+          toast.error(e.response.data.message)
+        }
+      }
+    }
 
     const addImage = () => {
       images.value.push({ file: null, preview: null });
@@ -1146,7 +519,6 @@ export default {
         }
         images.value[index].file = file;
         images.value[index].preview = URL.createObjectURL(file);
-        files.value.push(file);
       }
     };
 
@@ -1168,77 +540,25 @@ export default {
 
     const validateForm = () => {
       errors.value = {};
-      if (!title.value) errors.value.title = "وارد کردن عنوان محصول الزامی است";
-      if (!slug.value)
-        errors.value.slug = "وارد کردن کلمه کلیدی محصول ضروری می باشد";
-      if (!summary.value)
-        errors.value.summary = "وارد کردن خلاصه محصول ضروری می باشد";
+
+      if (!weight.value)
+        errors.value.weight = "وارد کردن وزن محصول ضروری می باشد";
       if (!selectedCat.value)
         errors.value.selectedCat = "انتخاب دسته برای محصول ضروری می باشد";
 
-      if (!imagePreview.value)
-        errors.value.image = "وارد کردن عکس محصول ضروری می باشد";
-      if (!description.value)
-        errors.value.description = "وارد کردن توضیحات محصول ضروری می باشد";
-      if (!productType.value)
-        errors.value.productType = "انتخاب حالت محصول ضروری می باشد";
+      // if (!image.value)
+      //   errors.value.image = "وارد کردن عکس محصول ضروری می باشد";
 
-      if (isChosen.value === undefined || isChosen.value === null) {
-        errors.value.isChosen = "انتخاب کنید محصول منتخب هست یا خیر";
-      }
 
-      if (spescial.value === undefined || spescial.value === null) {
-        errors.value.spescial = "انتخاب کنید محصول ویژه هست یا خیر";
-      }
-
-      if (!retailePrice.value && productType.value == 1)
-        errors.value.retailePrice = "قیمت محصول تک را وارد نمایید";
-      if (!wholesalePrice.value && productType.value == 2)
-        errors.value.wholesalePrice = "قیمت محصول عمده را وارد نمایید";
-      if (!spescialPrice.value && spescial.value == 1 && isChosen.value == 0)
-        errors.value.spescialPrice = "تخفیف محصول ویژه را وارد کنید";
-      if (!chosenPrice.value && isChosen.value == 1 && spescial.value == 0)
-        errors.value.chosenPrice = "تخفیف محصول منتخب را وارد کنید";
-      if (!expire.value && spescial.value == 1 && isChosen.value == 0)
-        errors.value.expire = "تاریخ انقضای محصول ویژه را انتخاب نمایید";
+      if (!discount_type.value)
+        errors.value.discount_type = "انتخاب کنید محصول منتخب هست یا خیر";
+      if (!price.value)
+        errors.value.price = "قیمت محصول را وارد نمایید";
+      if (!discount_expires_at.value && discount_type.value == 1)
+        errors.value.discount_expires_at = "تاریخ انقضای محصول ویژه را انتخاب نمایید";
       if (!selectedBrand.value)
         errors.value.selectedBrand = "انتخاب برند برای محصول ضروری می باشد";
 
-      if (productType.value != 1 && !countInCarton.value)
-        errors.value.countInCarton =
-          "انتخاب تعداد محصول در هر کارتن ضروری می باشد";
-
-      // if (images.value.length <= 0)
-      //   errors.value.images = "انتخاب عکس برای محصول ضروری می باشد";
-
-      const missingInventory = attrebutes.value.filter(
-        (attribute) =>
-          attribute.isChecked &&
-          (attribute.value == null || attribute.value === "")
-      );
-
-      if (missingInventory.length > 0) {
-        missingInventory.forEach((attribute) => {
-          errors.value[
-            `inventory_${attribute.id}`
-          ] = `مقدار موجودی برای ویژگی الزامی است`;
-        });
-      }
-
-      const missingIdentityVal = identities.value.filter(
-        (identity) =>
-          identity.isChecked &&
-          (identity.value == null || identity.value === "")
-      );
-
-      if (missingIdentityVal.length > 0) {
-        missingIdentityVal.forEach((identity) => {
-          errors.value[
-            `identityVal_${identity.id}`
-          ] = `وارد کردن مقدار مشخصه الزامی می باشد`;
-        });
-      }
-
       return Object.keys(errors.value).length === 0;
     };
 
@@ -1246,200 +566,25 @@ export default {
       errors.value[field] = "";
     };
 
-    const getProduct = () => {
-      ApiServiece.get(`admin/products/${route.params.id}`)
-        .then((resp) => {
-          categories.value[0].id = resp?.data?.data?.category.id;
-          categories.value[0].title = resp?.data?.data?.category.title;
-          brands.value[0].id = resp?.data?.data?.brand.id;
-          brands.value[0].title = resp?.data?.data?.brand.title;
-          productValueId.value = resp.data.data;
-          product.value = resp.data.data;
-          title.value = product.value?.title;
-          slug.value = product.value?.slug;
-          summary.value = product.value?.summary;
-          description.value = product.value?.description;
-          imagePreview.value = product.value?.image;
-          productType.value = product.value?.type;
-          wholesalePrice.value = product.value?.wholesale_price;
-          retailePrice.value = product.value?.retail_price;
-          isChosen.value = product.value?.is_chosen;
-          chosenPrice.value = product.value?.chosen_price;
-          spescial.value = product.value?.is_special;
-          spescialPrice.value = product.value?.special_price;
-          selectedCat.value = resp?.data?.data?.category.id;
-          selectedBrand.value = resp?.data?.data?.brand.id;
-          description.value = product.value?.description;
-
-          if (product.value?.special_expires_at) {
-            expire.value = moment(
-              product.value.special_expires_at,
-              "YYYY-MM-DD HH:mm:ss"
-            ).format("jYYYY/jMM/jDD HH:mm:ss");
-          }
-
-          // if (editor.value) {
-          //   quillInstance.value = new Quill(editor.value, {
-          //     theme: "snow",
-          //     modules: {
-          //       toolbar: [
-          //         [{ header: "1" }, { header: "2" }, { font: [] }],
-          //         [{ list: "ordered" }, { list: "bullet" }],
-          //         [{ align: [] }],
-          //         ["bold", "italic", "underline"],
-          //         ["link", "image"],
-          //         [{ script: "sub" }, { script: "super" }],
-          //         [{ direction: "rtl" }],
-          //       ],
-          //     },
-          //   });
-          //
-          //   quillInstance.value.root.innerHTML = product.value.description;
-          //
-          //
-          //
-          //   quillInstance.value.on("text-change", () => {
-          //     description.value = quillInstance.value.root.innerHTML;
-          //   });
-          // }
-          selectedBrand.value = product.value?.brand_id;
-          selectedCat.value = product.value?.category_id;
-
-          countInCarton.value = product.value?.count_in_carton;
-
-          // Update images
-          images.value = product.value.images.map((imageUrl) => ({
-            preview: imageUrl,
-          }));
-
-          localImages.value = product.value.images.map((imageUrl) => ({
-            preview: imageUrl,
-          }));
-
-          locals.value = product.value.attribute_value_products.map(
-            (productAttribute) => {
-              console.log(locals.value, "locals");
-              return {
-                id: productAttribute.id,
-                title: productAttribute.attribute_value.title,
-                code: productAttribute.attribute_value.code,
-                inventory: productAttribute.inventory,
-                attribute_value_id: productAttribute.attribute_value_id,
-                isChecked: productAttribute.inventory > 0,
-                value: productAttribute.inventory,
-              };
-            }
-          );
-
-          localsIds.value = locals.value.map((attribute) => attribute.code);
-
-          let hasRepeatedAttribute = false;
-
-          attrebutes.value = attrebutes.value.filter((attrebute) => {
-            if (!localsIds.value.includes(attrebute.code)) {
-              return true;
-            } else {
-              hasRepeatedAttribute = true;
-              return false;
-            }
-          });
-
-          repeatedAttrebute.value = hasRepeatedAttribute;
-
-          localIdentities.value =
-            product.value.solid_attribute_value_products.map(
-              (productIdentities) => {
-                return {
-                  id: productIdentities.id,
-                  title: productIdentities.attribute_value.attribute.title,
-                  isChecked: true,
-                  value: productIdentities.attribute_value.title,
-                  attribute_value_id: productIdentities.attribute_value_id,
-                };
-              }
-            );
-        })
-        .then(() => {
-          getIdentities();
-        })
-        .catch((err) => {
-          console.log(err);
+    const handleAddIdentityClick = () => {
+      if (!selectedCat.value) {
+        toast.error("لطفا ابتدا یک دسته‌بندی انتخاب کنید", {
+          position: "top-right",
+          autoClose: 3000
         });
-    };
+        return;
+      }
 
-    const editAttribute = (id, inventory, attrebuteValueId) => {
-      Swal.fire({
-        text: "آیا برای ویرایش ویژگی اطمینان دارید؟",
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonText: "بله، ویرایش کن",
-        cancelButtonText: "لغو",
-        reverseButtons: true,
-      }).then((result) => {
-        if (result.isConfirmed) {
-          const formData = new FormData();
-          formData.append("inventory", inventory);
-          formData.append("attribute_value_id", attrebuteValueId);
-
-          ApiServiece.put(
-            `admin/products/${route.params.id}/attributes/${id}`,
-            formData
-          )
-            .then(() => {
-              toast.success("!ویژگی با موفقیت ویرایش شد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-            })
-            .catch(() => {
-              toast.error("!مشکلی در ویرایش ویژگی ایجاد شد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-            });
-        }
-      });
-    };
+      const modal = new Modal(document.getElementById('addIdentity'));
 
-    const editIdentity = (id, title, valueID) => {
-      Swal.fire({
-        text: "آیا برای ویرایش مشخصه اطمینان دارید؟",
-        icon: "warning",
-        showCancelButton: true,
-        confirmButtonText: "بله، ویرایش کن",
-        cancelButtonText: "لغو",
-        reverseButtons: true,
-      }).then((result) => {
-        if (result.isConfirmed) {
-          const formData = new FormData();
-
-          formData.append("attribute_id", id);
-          formData.append("title", title);
-          ApiServiece.put(`admin/attribute-values/:${valueID}`, formData)
-            .then(() => {
-              toast.success("!مشخصه با موفقیت ویرایش شد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-            })
-            .catch(() => {
-              toast.error("!مشکلی در ویرایش مشخصه ایجاد شد", {
-                position: "top-right",
-                autoClose: 3000,
-              });
-            });
-        }
-      });
+      modal?.show();
     };
 
-    const handleAttributeUpdated = () => {
-      getProduct();
-    };
+    const handlerStep = (s) => {
+      console.log(s)
+      //step.value = 1
+    }
 
-    onMounted(() => {
-      getAttrebuteValues();
-    });
-    let id = "";
     const submitForm = () => {
       if (!validateForm()) {
         toast.error("لطفا فیلد های لازم را وارد نمایید", {
@@ -1452,186 +597,193 @@ export default {
       loading.value = true;
 
       const formData = new FormData();
-      formData.append("_method", "put");
-      formData.append("title", title.value);
-      formData.append("slug", slug.value);
-      formData.append("summary", summary.value);
-      formData.append("description", description.value);
 
-      if (productType.value == 2 || productType.value == 3) {
-        formData.append("count_in_carton", countInCarton.value);
-      }
+      if (discount_type.value != 0){
+        formData.append("discount_type", discount_type.value);
 
-      if (productType.value == 2) {
-        formData.append("wholesale_price", wholesalePrice.value);
+        formData.append("discount_percentage", discount_percentage.value);
       }
-      if (productType.value == 1) {
-        formData.append("retail_price", retailePrice.value);
-      }
-      if (productType.value == 3) {
-        formData.append("retail_price", retailePrice.value);
-        formData.append("wholesale_price", wholesalePrice.value);
-      }
-      formData.append("type", productType.value);
 
-      if (isChosen.value == 1 && spescial.value == 0) {
-        formData.append("chosen_price", chosenPrice.value);
-      }
+      formData.append("weight", weight.value);
 
-      if (spescial.value == 1 && isChosen.value == 0) {
-        if (spescialPrice.value) {
-          formData.append("special_price", parseInt(spescialPrice.value, 10));
-        }
+      formData.append("price", price.value);
 
-        if (expire.value) {
-          const georgianDate = moment(
-            expire.value,
+      if (discount_type.value == 1) {
+        const georgianDate = moment(
+            discount_expires_at.value,
             "jYYYY/jMM/jDD HH:mm:ss"
-          ).format("YYYY/MM/DD HH:mm:ss");
+        ).format("YYYY/MM/DD HH:mm:ss");
 
-          formData.append("special_expires_at", georgianDate);
-        }
-      }
-
-      if (isChosen.value == 1) {
-        formData.append("is_chosen", isChosen.value);
-        formData.append("is_special", 0);
-      }
-      if (isChosen.value == 0 && spescial.value == 0) {
-        formData.append("is_chosen", 0);
-        formData.append("is_special", 0);
-      }
-
-      if (spescial.value == 1) {
-        formData.append("is_chosen", 0);
-        formData.append("is_special", spescial.value);
+        formData.append("discount_expires_at", georgianDate);
       }
 
       formData.append("brand_id", selectedBrand.value);
+
       formData.append("category_id", selectedCat.value);
-      if (image.value) {
+
+      if (image.value)
         formData.append("image", image.value);
-      }
 
       formData.append("_method", "put");
 
-      ApiServiece.post(`admin/products/${route.params.id}`, formData, {
+      ApiServiece.post(`admin/products/${productId.value}`, formData, {
         headers: {
-          "content-type": "multipart",
+          "content-type": "multipart/form-data",
           Authorization: `Bearer ${localStorage.getItem("token")}`,
         },
       })
-        .then((resp) => {
-          loading.value = false;
-          id = resp.data.data.id;
-          console.log(id);
-
-          selectedAttributes.value = attrebutes.value
-            .filter((attribute) => attribute.isChecked)
-            .map((attribute) => ({
-              attribute_value_id: attribute.id,
-              inventory: attribute.value,
-              type: productType.value,
-            }));
-
-          const finalPayload = {
-            productAttributes: selectedAttributes.value,
-          };
+          .then((resp) => {
+            // productId.value = resp?.data?.data?.id;
+            //
+            // categoryId.value = resp?.data?.data?.category_id;
 
-          const jsonString = JSON.stringify(finalPayload, null, 2);
-          if (selectedAttributes.value.length > 0) {
-            console.log(selectedAttributes.value);
-            ApiServiece.post(
-              `admin/products/${route.params.id}/attributes`,
-              jsonString
-            );
-          }
+            toast.success(resp?.data?.message, {
+              position: "top-right",
+              autoClose: 1000,
+            });
+            loading.value = false;
+          })
+          .catch((error) => {
+            loading.value = false;
+            toast.error(`${error?.response?.data?.message}`, {
+              position: "top-right",
+              autoClose: 1000,
+            });
+          })
+          .finally(() => {
+            loading.value = false;
+          });
+    };
 
-          selectedidentities.value = identities.value
-            .filter((identity) => identity.isChecked)
-            .map((identity) => ({
-              attribute_id: identity.id,
-              attribute_value_title: identity.value,
-            }));
-          if (selectedidentities.value.length > 0) {
-            const finalPayload = {
-              productSolidAttributes: selectedidentities.value,
-            };
-            const jsonString = JSON.stringify(finalPayload, null, 2);
-            ApiServiece.post(
-              `admin/products/${route.params.id}/solid-attributes`,
-              jsonString
-            );
-          }
+    const submitImage = async (file, image) => {
+      if (!file?.file) {
+        toast.error('لطفا یک تصویر بارگذاری کنید.')
 
-          if (files.value.length > 0) {
-            console.log(files.value);
+        return
+      }
 
-            imagesTosend.value = images.value.filter((image) => {
-              return !localImages.value.some(
-                (localImage) => localImage.preview === image.preview
-              );
-            });
+      try {
+        image.loading = true;
 
-            // Collect all promises
-            const uploadPromises = imagesTosend.value.map((image) => {
-              const formData = new FormData();
-              formData.append("image", image.file);
-
-              return ApiServiece.post(
-                `admin/products/${route.params.id}/images`,
-                formData,
-                {
-                  headers: {
-                    "content-type": "multipart",
-                    Authorization: `Bearer ${localStorage.getItem("token")}`,
-                  },
-                }
-              );
-            });
+        const formData = new FormData();
 
-            // Wait for all uploads to finish
-            Promise.all(uploadPromises)
-              .then((responses) => {
-                console.log("All images uploaded:", responses);
-                loading.value = false;
-                toast.success("!محصول با موفقیت ویرایش شد", {
-                  position: "top-right",
-                  autoClose: 1000,
-                });
-              })
-              .catch((error) => {
-                console.error("Error uploading images:", error);
-                loading.value = false;
-                toast.error("خطایی در بارگذاری تصاویر رخ داد", {
-                  position: "top-right",
-                  autoClose: 1000,
-                });
-              });
-          } else {
-            toast.success("!محصول با موفقیت ویرایش شد", {
-              position: "top-right",
-              autoClose: 1000,
-            });
+        formData.append("image", file?.file);
+
+        const { data:{ message, success, data } } = await ApiServiece.post(`admin/products/${productId.value}/images`, formData, {
+          headers: {
+            "content-type": "multipart/form-data",
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
           }
         })
 
-        .catch((error) => {
-          loading.value = false;
-          console.error(error);
-          toast.error("!مشکلی در ویرایش محصول ایحاد شد", {
-            position: "top-right",
-            autoClose: 1000,
-          });
-        });
+        if (success) {
+          toast.success(message)
+
+          imagesResponse.value = data?.images
+        }
+      } catch (e) {
+        toast.error(e.response?.data?.message)
+      } finally {
+        image.loading = false;
+      }
+    }
+
+    const getProduct = async () => {
+      try {
+        loadingProduct.value = true;
+
+        const { data: { data, success } } = await ApiServiece.get(`admin/products/${route.params.id}`)
+        if (success) {
+          product.value = data;
+          categoryId.value = product.value?.category_id;
+          productId.value = product.value?.id;
+          imagePreview.value = product.value?.image;
+          productType.value = product.value?.type;
+          weight.value = product.value?.weight;
+          price.value = product.value?.price;
+          spescial.value = product.value?.is_special;
+          spescialPrice.value = product.value?.special_price;
+          selectedCat.value = product.value?.category?.id;
+          selectedBrand.value = product.value?.brand_id;
+          images.value = product.value.images.map((imageUrl) => ({
+            preview: imageUrl,
+          }));
+        }
+      } catch (e) {
+        toast.error(e.response?.data?.message)
+      } finally {
+        loadingProduct.value = false;
+      }
     };
 
+    const handleChangeLanguage = (lang) => {
+      const translation = product.value.translations?.find(item => item?.locale === lang);
+
+      Object.assign(productInfo.value.form, {
+        id: translation?.id ?? undefined,
+        title: translation?.title ?? undefined,
+        slug: translation?.slug ?? undefined,
+        summary: translation?.summary ?? undefined,
+        author: translation?.author ?? undefined,
+        description: translation?.description ?? undefined,
+      });
+    }
+
+    onMounted( () => {
+      getProduct()
+      getAttributeValues();
+      handleSearch()
+    });
+
+    watch(categoryId, async (newCategoryId) => {
+      if (newCategoryId) {
+        await nextTick();
+        specificationsProductRef.value.specifications = product.value?.product_specifications?.map(spec => ({
+          selectedAttributeId: spec?.attribute_value?.attribute_id,
+          selectedValueId: spec?.attribute_value_id,
+          id: spec.id,
+        }))
+
+        //attributesProductRef.value.selectedAttributes = product.value?.product_attributes?.map(item => item.attribute_id)
+
+        const uniqueAttributes = product.value?.product_attributes?.filter(
+            (item, index, self) =>
+                index === self.findIndex(t => t.attribute_id === item.attribute_id)
+        ) || [];
+
+        attributesProductRef.value.selectedAttributes = uniqueAttributes.map(item => item.attribute_id) || [];
+
+        attributesProductRef.value.rows = product.value?.product_variants?.map(item => {
+          const attributesObj = item?.attribute_values?.reduce((acc, attr) => {
+            acc[attr.attribute_id] = attr.id;
+            return acc;
+          }, {}) || {};
+          return {
+            id: item?.id,
+            attributes: attributesObj,
+            stock: item?.inventory || 0,
+            price: item?.price || '',
+          };
+        }) || [];
+      }
+    },{ deep: true, immediate: true })
+
+    watch(productInfo, (newProductInfo) => {
+      if (newProductInfo) {
+        productInfo.value.form.title = product.value?.translation?.title;
+        productInfo.value.form.slug = product.value?.translation?.slug;
+        productInfo.value.form.summary = product.value?.translation?.summary;
+        productInfo.value.form.description = product.value?.translation?.description;
+        productInfo.value.form.locale = product.value?.translation?.locale;
+        productInfo.value.form.id = product.value?.translation?.id;
+      }
+    },{ deep: true })
+
     return {
       title,
       slug,
       summary,
       editor,
-      categories,
       errors,
       image,
       imagePreview,
@@ -1644,7 +796,7 @@ export default {
       blogCat,
       loading,
       productType,
-      isChosen,
+      discount_type,
       spescial,
       date,
       selectedCat,
@@ -1652,43 +804,55 @@ export default {
       selectedBrand,
       attrebutes,
       images,
+      step,
       addImage,
       handleImageUpload,
-      description,
+      selectedAttributes,
       onCheckboxChange,
       retailePrice,
-      wholesalePrice,
+      price,
       spescialPrice,
-      chosenPrice,
-      expire,
-
-      selectedAttributes,
-      selectedidentities,
-      locals,
-      editAttribute,
-      deleteAttribute,
-      deletImage,
-      countInCarton,
-      localIdentities,
-      deleteIdentity,
-      identities,
+      discount_percentage,
+      discount_expires_at,
+      weight,
+      relatedAttrebutes,
+      selectedIdentities,
+      attributeValues,
       handleAttributeUpdated,
-      editIdentity,
-      repeatedIdentity,
-      repeatedAttrebute,
-      categorySelectorLoader,
-      formattedCategories,
-      formattedBrands,
+      handleIdentityUpdate,
+      handleBrandSearch,
       brandSelectorLoader,
+      formattedBrands,
       handleSearch,
-      handleBrandSearch,
-      productImageRef
+      formattedCategories,
+      categorySelectorLoader,
+      productImageRef,
+      description,
+      handleAddIdentityClick,
+      handlerStep,
+      submitImage,
+      loadingImage,
+      imagesResponse,
+      productId,
+      categoryId,
+      getProduct,
+      product,
+      productInfo,
+      handleChangeLanguage,
+      specificationsProductRef,
+      loadingProduct,
+      attributesProductRef
     };
   },
 };
 </script>
 
-<style scoped>
+<style>
+:root {
+  --vue-simple-stepper-primary-color: #04A9F5;
+  --vue-simple-stepper-primary-color-contrast: white;
+}
+
 .ql-editor {
   direction: rtl;
   text-align: right;
diff --git a/src/views/live-preview/pages/products/products.vue b/src/views/live-preview/pages/products/products.vue
index d83b70c..35ef7a3 100644
--- a/src/views/live-preview/pages/products/products.vue
+++ b/src/views/live-preview/pages/products/products.vue
@@ -114,7 +114,7 @@ export default {
     });
     const deleteProduct = (id, title) => {
       Swal.fire({
-        text: `می خواهید محصول ${title} را حذف کنید؟`,
+        text: `می خواهید محصول ${title ?? ''} را حذف کنید؟`,
         icon: "warning",
         showCancelButton: true,
         confirmButtonColor: "#3085d6",
@@ -146,7 +146,7 @@ export default {
 
     const restoreProduct = (id, title) => {
       Swal.fire({
-        text: `می خواهید محصول ${title} را بازیابی کنید؟`,
+        text: `می خواهید محصول ${title ?? ''} را بازیابی کنید؟`,
         icon: "warning",
         showCancelButton: true,
         confirmButtonColor: "#3085d6",
@@ -294,6 +294,7 @@ export default {
   },
 };
 </script>
+
 <template>
   <Layout>
     <BRow>
@@ -362,15 +363,11 @@ export default {
                   <tr>
                     <th>عکس</th>
                     <th>عنوان</th>
-                    <th>مدل</th>
                     <th>دسته بندی</th>
                     <th>برند</th>
                     <th>تعداد فروش</th>
-                    <th>برگزیده</th>
-                    <th>تخفیف برگزیده</th>
-                    <th>ویژه</th>
-                    <th>قیمت عمده</th>
-                    <th>قیمت تک</th>
+                    <th>قیمت</th>
+                    <th>وزن</th>
                     <th>وضعیت</th>
                     <th>عملیات</th>
                   </tr>
@@ -386,58 +383,22 @@ export default {
                     </td>
                     <td v-if="!product.image">ندارد</td>
 
-                    <td>{{ product.title }}</td>
+                    <td>{{ product?.translation?.title }}</td>
 
-                    <td v-if="product.type == 1">تکی</td>
-                    <td v-if="product.type == 2">عمده</td>
-                    <td v-if="product.type == 3">تکی و عمده</td>
 
-                    <td>{{ product?.category?.title }}</td>
+                    <td>{{ product?.category?.translation?.title }}</td>
 
-                    <td>{{ product?.brand?.title }}</td>
+                    <td>{{ product?.brand?.translation?.title }}</td>
+
+                    <td>{{ product?.sold_count }}</td>
 
-                    <td>{{ product.sold_count }}</td>
-                    <td>
-                      <span v-if="product.is_chosen == 0">
-                        <i
-                          class="fas fa-times-circle status-icon unavailable"
-                        ></i>
-                      </span>
-                      <span v-if="product.is_chosen == 1">
-                        <i
-                          class="fas fa-check-circle status-icon available"
-                        ></i>
-                      </span>
-                    </td>
-                    <td v-if="product?.chosen_price">
-                      %{{ formatWithCommas(product?.chosen_price) }}
-                    </td>
-                    <td v-if="!product.chosen_price">
-                      <i
-                        class="fas fa-times-circle status-icon unavailable"
-                      ></i>
-                    </td>
                     <td>
-                      <span v-if="product.is_special == 0">
-                        <i
-                          class="fas fa-times-circle status-icon unavailable"
-                        ></i>
-                      </span>
-                      <span v-if="product.is_special == 1">
-                        <i
-                          class="fas fa-check-circle status-icon available"
-                        ></i>
-                      </span>
+                      {{ formatWithCommas(product.price) }}
                     </td>
 
-                    <td v-if="product?.wholesale_price">
-                      {{ formatWithCommas(product.wholesale_price) }}
-                    </td>
-                    <td v-if="!product?.wholesale_price">ندارد</td>
-                    <td v-if="product?.retail_price">
-                      {{ formatWithCommas(product?.retail_price) }}
+                    <td>
+                      {{ product?.weight }}
                     </td>
-                    <td v-if="!product?.retail_price">ندارد</td>
 
                     <td v-if="!product.deleted_at">
                       <span class="badge bg-success text-white">فعال</span>
@@ -455,7 +416,7 @@ export default {
                       </router-link>
                       <button
                         v-if="!product.deleted_at"
-                        @click="deleteProduct(product?.id, product?.title)"
+                        @click="deleteProduct(product?.id, product?.translation?.title)"
                         class="btn btn-sm btn-outline-danger me-1"
                       >
                         حذف
@@ -463,7 +424,7 @@ export default {
 
                       <button
                         v-else
-                        @click="restoreProduct(product?.id, product?.title)"
+                        @click="restoreProduct(product?.id, product?.translation?.title)"
                         class="btn btn-sm btn-outline-success"
                       >
                         بازیابی
diff --git a/src/views/live-preview/pages/users/users.vue b/src/views/live-preview/pages/users/users.vue
index 393032c..b3981e8 100644
--- a/src/views/live-preview/pages/users/users.vue
+++ b/src/views/live-preview/pages/users/users.vue
@@ -30,6 +30,7 @@ export default {
     const userMobile = ref();
     const userId = ref();
     const userRole = ref();
+    const userCountryCode = ref();
     const selectedRole = ref("");
     const userProfile = JSON.parse(localStorage.getItem('user_profile'));
 
@@ -49,7 +50,6 @@ export default {
         }&trashed=${selectedStatus.value || ""}`
       )
         .then((resp) => {
-          console.log(resp.data.data);
           users.value = resp.data.data.data;
           currentPage.value = resp.data.data.current_page;
           totalPages.value = resp.data.data.last_page;
@@ -113,8 +113,7 @@ export default {
       debouncedSearch(newQuery);
     });
 
-    const debouncedSearch = debounce((query) => {
-      console.log("Searching for:", query);
+    const debouncedSearch = debounce(() => {
       getUsers();
     }, 1000);
 
@@ -134,12 +133,14 @@ export default {
       }
     }
 
-    const modalData = (id, name, mobile, role) => {
+    const modalData = (id, name, mobile, role, config_id) => {
       userName.value = name;
       userMobile.value = mobile;
       userId.value = id;
       userRole.value = role;
+      userCountryCode.value = config_id;
     };
+
     const handleUserUpdated = () => {
       getUsers();
     };
@@ -237,6 +238,7 @@ export default {
       selectedStatus,
       filterLoading,
       userProfile,
+      userCountryCode,
     };
   },
 };
@@ -356,7 +358,8 @@ export default {
                                   user.id,
                                   user.name,
                                   user.mobile,
-                                  user.role
+                                  user.role,
+                                  user?.country_config_id
                                 )
                               "
                               data-bs-toggle="modal"
@@ -405,6 +408,7 @@ export default {
         :mobile="userMobile"
         :id="userId"
         :role="userRole"
+        :countryCode="userCountryCode"
       />
       <addUser @user-updated="handleUserUpdated" />
     </BRow>