changes

2026-07-09 16:45:48 +07:00
parent 42124d4071
commit df4ed4bd4d
20 changed files with 726 additions and 964 deletions
--- a/app/components/Modal.vue
+++ b/app/components/Modal.vue
@@ -14,7 +14,7 @@
      <div
        class="modal-card"
        :style="{
-          width: $store.viewport <= 1 ? 'calc(100% - var(--bulma-modal-card-spacing))' : width,
+          width: $store.viewport > 1 ? width : null,
          height,
        }"
      >
--- a/app/components/customer/Customer.vue
+++ b/app/components/customer/Customer.vue
@@ -52,7 +52,6 @@
 <script setup>
 import CustomerForm from "~/components/customer/CustomerForm.vue";
 import CustomerView from "~/components/customer/CustomerView.vue";
-import Modal from "~/components/Modal.vue";
 import ImageGallery from "~/components/media/ImageGallery.vue";
 const { $dialog } = useNuxtApp();

--- a/app/components/datatable/ContextMenu.vue
+++ b/app/components/datatable/ContextMenu.vue
@@ -1,44 +1,6 @@
 <template>
  <div class="is-flex is-flex-direction-column max-h-full">
    <div class="is-flex-shrink-0 toolbar field has-addons is-justify-content-center">
-      <!-- <div class="control">
-        <button
-          class="button is-light is-primary"
-          @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
-        >
-          <span class="icon">
-            <Icon
-              name="mdi:sort-alphabetical-ascending"
-              :size="22"
-              :class="checkFilter() && 'has-text-grey-70'"
-            />
-          </span>
-        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
-          >Sắp xếp tăng dần</span
-        >
-      </div>
-      <div class="control">
-        <button
-          class="button is-light is-primary"
-          @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
-        >
-          <span class="icon">
-            <Icon
-              name="mdi:sort-alphabetical-descending"
-              :size="22"
-              :class="checkFilter() && 'has-text-grey-70'"
-            />
-          </span>
-        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
-          >Sắp xếp giảm dần</span
-        >
-      </div> -->
      <div class="control">
        <button
          class="button"
@@ -51,11 +13,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Chuyển cột sang trái</span
-        >
+        <span class="tooltiptext">Chuyển cột sang trái</span>
      </div>
      <div class="control">
        <button
@@ -69,11 +27,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Chuyển cột sang phải</span
-        >
+        <span class="tooltiptext">Chuyển cột sang phải</span>
      </div>
      <div class="control">
        <button
@@ -87,11 +41,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Tăng độ rộng cột</span
-        >
+        <span class="tooltiptext">Tăng độ rộng cột</span>
      </div>
      <div class="control">
        <button
@@ -105,11 +55,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Giảm độ rộng cột</span
-        >
+        <span class="tooltiptext">Giảm độ rộng cột</span>
      </div>
      <div class="control">
        <button
@@ -123,11 +69,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Ẩn cột</span
-        >
+        <span class="tooltiptext">Ẩn cột</span>
      </div>
      <div class="control">
        <button
@@ -141,11 +83,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Xóa cột</span
-        >
+        <span class="tooltiptext">Xóa cột</span>
      </div>
      <div class="control">
        <button
@@ -159,11 +97,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Sao chép cột</span
-        >
+        <span class="tooltiptext">Sao chép cột</span>
      </div>
      <div class="control">
        <button
@@ -177,11 +111,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Danh sách cột</span
-        >
+        <span class="tooltiptext">Danh sách cột</span>
      </div>
      <div class="control">
        <button
@@ -195,11 +125,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; left: 0"
-          >Tạo cột mới</span
-        >
+        <span class="tooltiptext left-auto right-0">Tạo cột mới</span>
      </div>
      <div class="control">
        <button
@@ -213,11 +139,7 @@
            />
          </span>
        </button>
-        <span
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; right: 0"
-          >Tùy chọn bảng</span
-        >
+        <span class="tooltiptext left-auto right-0">Tùy chọn bảng</span>
      </div>
      <div class="control">
        <button
@@ -231,12 +153,7 @@
            />
          </span>
        </button>
-        <p
-          class="tooltiptext"
-          style="top: 110%; bottom: unset; min-width: max-content; right: 0"
-        >
-          Lưu thiết lập
-        </p>
+        <p class="tooltiptext left-auto right-0">Lưu thiết lập</p>
      </div>
    </div>
    <div class="is-flex-shrink-0 tabs">
--- a/app/components/datatable/TimeOption.vue
+++ b/app/components/datatable/TimeOption.vue
@@ -87,12 +87,7 @@
              />
            </span>
          </button>
-          <span
-            class="tooltiptext"
-            style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
-          >
-            Nhập dữ liệu
-          </span>
+          <span class="tooltiptext top-0">Nhập dữ liệu</span>
        </p>
        <p
          v-if="enableAdd && $getEditRights()"
@@ -109,12 +104,7 @@
              />
            </span>
          </button>
-          <span
-            class="tooltiptext"
-            style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
-          >
-            Thêm mới
-          </span>
+          <span class="tooltiptext left-auto right-0">Thêm mới</span>
        </p>
        <p class="control">
          <button
@@ -128,12 +118,7 @@
              />
            </span>
          </button>
-          <span
-            class="tooltiptext"
-            style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
-          >
-            Xuất Excel
-          </span>
+          <span class="tooltiptext left-auto right-0">Xuất Excel</span>
        </p>
        <p class="control">
          <button
@@ -147,12 +132,7 @@
              />
            </span>
          </button>
-          <span
-            class="tooltiptext"
-            style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
-          >
-            Làm mới
-          </span>
+          <span class="tooltiptext left-auto right-0">Làm mới</span>
        </p>
        <Icon
          v-if="loading"
--- a/app/components/imports/DeleteProduct.vue
+++ b/app/components/imports/DeleteProduct.vue
@@ -1,6 +1,4 @@
 <script setup>
-import Modal from "~/components/Modal.vue";
-
 const props = defineProps({
  product: Object,
 });
--- a/app/components/imports/DeleteProductVariant.vue
+++ b/app/components/imports/DeleteProductVariant.vue
@@ -1,6 +1,4 @@
 <script setup>
-import Modal from "~/components/Modal.vue";
-
 const props = defineProps({
  variant: Object,
 });
--- a/app/components/marketing/email/Email.vue
+++ b/app/components/marketing/email/Email.vue
@@ -3,141 +3,114 @@
    class="container is-fluid px-0"
    style="overflow: hidden"
  >
-    <!-- 95px is height of nav + breadcrumb -->
-    <div
-      class="columns m-0"
-      style="height: calc(100vh - 95px)"
-    >
-      <!-- Form Section -->
-      <div
-        class="column is-5 pb-5"
-        style="overflow-y: scroll; border-right: 1px solid #dbdbdb"
-      >
-        <label class="label">
-          <span class="icon-text">
-            <span>Chọn mẫu</span>
-          </span>
-        </label>
-        <div class="level mb-4 mt-2 pr-4">
+    <div class="fixed-grid has-12-cols">
+      <div class="grid">
+        <!-- Form Section -->
+        <div
+          class="cell is-col-span-5"
+          style="overflow-y: scroll"
+        >
+          <label class="label">Chọn mẫu</label>
          <!-- Template Selector -->
-
-          <div
-            class="level-left"
-            style="flex: 1"
-          >
-            <div
-              class="level-item"
-              style="flex: 1"
-            >
-              <div
-                class="field"
-                style="width: 100%"
+          <div class="field has-addons">
+            <div class="control has-icons-left is-expanded">
+              <span class="icon is-small is-left">
+                <Icon
+                  name="tabler:template"
+                  :size="20"
+                />
+              </span>
+              <div class="select is-fullwidth">
+                <select
+                  v-model="selectedValue"
+                  @change="handleTemplateChange"
+                >
+                  <option value="defaultTemplate">Mặc định</option>
+                  <option
+                    v-for="template in dataTemplate"
+                    :key="template.id"
+                    :value="template.name"
+                  >
+                    {{ template.name }}
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div class="control">
+              <button
+                v-if="selectedTemplateId"
+                class="button is-danger is-light"
+                @click="showDeleteDialog = true"
+                :disabled="loading"
              >
-                <div class="control">
-                  <div class="select is-fullwidth">
-                    <select
-                      v-model="selectedValue"
-                      @change="handleTemplateChange"
-                    >
-                      <option value="defaultTemplate">Mặc định</option>
-                      <option
-                        v-for="template in dataTemplate"
-                        :key="template.id"
-                        :value="template.name"
-                      >
-                        {{ template.name }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
-              </div>
+                <span class="icon">
+                  <Icon
+                    name="material-symbols:delete-outline-rounded"
+                    :size="20"
+                  />
+                </span>
+              </button>
+            </div>
+            <div class="control">
+              <button
+                class="button is-primary is-light"
+                @click="handleOpenModal"
+              >
+                <span class="icon">
+                  <Icon
+                    name="material-symbols:save-outline-rounded"
+                    :size="20"
+                  />
+                </span>
+              </button>
            </div>
          </div>
-
-          <!-- Action Buttons -->
-          <div
-            v-if="$getEditRights()"
-            class="level-right"
-          >
-            <div class="level-item">
-              <div class="buttons">
-                <button
-                  class="button is-light"
-                  @click="handleOpenModal"
-                >
-                  <span class="icon">
-                    <Icon
-                      name="material-symbols:save-outline-rounded"
-                      :size="18"
-                      class="has-text-primary"
-                    />
-                  </span>
-                </button>
-                <button
-                  v-if="selectedTemplateId"
-                  class="button is-danger is-outlined"
-                  @click="showDeleteDialog = true"
-                  :disabled="loading"
-                >
-                  <span class="icon">
-                    <Icon
-                      name="material-symbols:delete-outline-rounded"
-                      :size="18"
-                    />
-                  </span>
-                </button>
+          <!-- Tabs -->
+          <div class="tabs">
+            <ul>
+              <li
+                v-for="tab in ['content', 'mappings', 'automation']"
+                :key="tab"
+                :class="[activeTab === tab && 'is-active']"
+              >
+                <a @click="activeTab = tab">{{ capitalize(tab) }}</a>
+              </li>
+            </ul>
+          </div>
+          <!-- Form Component based on tab -->
+          <div class="card">
+            <div class="card-content p-4">
+              <div v-show="activeTab === 'content'">
+                <component
+                  :is="currentFormComponent"
+                  :key="formKey"
+                  :initial-data="emailFormData"
+                  @data-change="handleChangeData"
+                />
              </div>
+              <MappingConfigurator
+                v-if="activeTab === 'mappings'"
+                :mappings="formData.mappings"
+                @update:mappings="updateMappings"
+              />
+              <JobConfigurator
+                v-if="activeTab === 'automation'"
+                :template-id="selectedTemplateId"
+              />
            </div>
          </div>
        </div>
-
-        <!-- Tabbed Interface -->
-        <div class="tabs mb-3">
-          <ul>
-            <li :class="{ 'is-active': activeTab === 'content' }">
-              <a @click="activeTab = 'content'">Content</a>
-            </li>
-            <template v-if="$getEditRights()">
-              <li :class="{ 'is-active': activeTab === 'mappings' }">
-                <a @click="activeTab = 'mappings'">Mappings</a>
-              </li>
-              <li :class="{ 'is-active': activeTab === 'automation' }">
-                <a @click="activeTab = 'automation'">Automation</a>
-              </li>
-            </template>
-          </ul>
-        </div>
-
-        <!-- Form Component based on tab -->
-        <div v-show="activeTab === 'content'">
+        <!-- Preview Section -->
+        <div
+          class="cell is-col-span-7"
+          style="overflow-y: scroll"
+        >
          <component
-            :is="currentFormComponent"
-            :key="formKey"
-            :initial-data="emailFormData"
-            @data-change="handleChangeData"
+            :is="currentTemplateComponent"
+            v-bind="templateProps"
+            style="height: 100%"
          />
        </div>
-        <div v-if="activeTab === 'mappings'">
-          <MappingConfigurator
-            :mappings="formData.mappings"
-            @update:mappings="updateMappings"
-          />
-        </div>
-        <div v-if="activeTab === 'automation'">
-          <JobConfigurator :template-id="selectedTemplateId" />
-        </div>
-      </div>
-
-      <!-- Preview Section -->
-      <div
-        class="column is-7 p-0"
-        style="overflow-y: scroll"
-      >
-        <component
-          :is="currentTemplateComponent"
-          v-bind="templateProps"
-          style="height: 100%"
-        />
      </div>
    </div>

@@ -184,16 +157,16 @@
  </div>

  <Modal
-    @close="showmodal = undefined"
-    v-bind="showmodal"
    v-if="showmodal"
-  ></Modal>
+    v-bind="showmodal"
+    @close="showmodal = undefined"
+  />
 </template>

 <script setup>
+import { capitalize } from "es-toolkit";
 import EmailForm1 from "./forms/EmailForm1.vue";
 import Template1 from "~/components/marketing/email/Template1.vue";
-import Modal from "~/components/Modal.vue";
 import MappingConfigurator from "~/components/marketing/email/MappingConfigurator.vue";
 import JobConfigurator from "~/components/marketing/email/JobConfigurator.vue";

@@ -380,7 +353,7 @@ const handleDeleteTemplate = async () => {

 const fetchTemplates = async () => {
  try {
-    dataTemplate.value = await $getdata("emailtemplate");
+    dataTemplate.value = await $getdata("Email_Template");
  } catch (error) {
    $snackbar("Error: Failed to fetch templates");
    console.error(error);
--- a/app/components/marketing/email/JobConfigurator.vue
+++ b/app/components/marketing/email/JobConfigurator.vue
@@ -1,102 +1,91 @@
 <template>
-  <div class="box">
-    <div class="level">
-      <div class="level-left">
-        <h5 class="title is-5">Automation Jobs</h5>
-      </div>
-      <div class="level-right">
-        <button
-          class="button is-primary"
-          @click="openNewJobForm"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:add-rounded"
-              :size="18"
-            />
-          </span>
-          <span>Add New Job</span>
-        </button>
-      </div>
+  <div>
+    <div class="block is-flex is-gap-1 is-align-items-center is-justify-content-space-between">
+      <p class="fs-17 font-semibold">Automation Jobs</p>
+      <button
+        class="button is-primary"
+        @click="openNewJobForm"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:add-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Add New Job</span>
+      </button>
    </div>
-
-    <div
+    <p
      v-if="isLoading"
-      class="has-text-centered"
+      class="has-text-centered has-text-grey py-4"
    >
-      <p>Loading jobs...</p>
-    </div>
-
-    <div
+      Loading jobs...
+    </p>
+    <p
      v-else-if="jobs.length === 0"
-      class="has-text-centered"
+      class="has-text-centered has-text-grey py-4"
    >
-      <p>No automation jobs found for this template.</p>
-    </div>
-
+      No automation jobs found for this template.
+    </p>
    <div v-else>
      <div
        v-for="job in jobs"
        :key="job.id"
-        class="mb-4 p-3 border"
+        class="mb-4 p-3 rounded"
+        style="border: 1px solid var(--bulma-grey-90)"
      >
-        <div class="level">
-          <div class="level-left">
-            <div>
-              <p class="has-text-weight-bold">{{ job.name }}</p>
-              <p class="is-size-7">Model: {{ job.model_name }}</p>
-              <p class="is-size-7">
-                Triggers:
-                <span
-                  v-if="job.trigger_on_create"
-                  class="tag is-info is-light mr-1"
-                  >On Create</span
-                >
-                <span
-                  v-if="job.trigger_on_update"
-                  class="tag is-warning is-light"
-                  >On Update</span
-                >
-              </p>
-            </div>
+        <div class="is-flex is-gap-1 is-justify-content-space-between is-align-items-center">
+          <div class="is-flex-shrink-1">
+            <p class="font-semibold mb-1">{{ job.name }}</p>
+            <p class="is-size-7">Model: {{ job.model_name }}</p>
+            <p class="is-size-7">
+              Triggers:
+              <span
+                v-if="job.trigger_on_create"
+                class="tag is-info is-light mr-1"
+                >On Create</span
+              >
+              <span
+                v-if="job.trigger_on_update"
+                class="tag is-warning is-light"
+                >On Update</span
+              >
+            </p>
          </div>
-          <div class="level-right">
-            <div class="field has-addons">
-              <div class="control">
-                <button
-                  class="button is-small"
-                  :class="{ 'is-success': job.active, 'is-light': !job.active }"
-                  @click="toggleJobStatus(job)"
-                >
-                  {{ job.active ? "Active" : "Inactive" }}
-                </button>
-              </div>
-              <div class="control">
-                <button
-                  class="button is-small"
-                  @click="openEditJobForm(job)"
-                >
-                  <span class="icon">
-                    <Icon
-                      name="material-symbols:edit-outline-rounded"
-                      :size="18"
-                    />
-                  </span>
-                </button>
-              </div>
-              <div class="control">
-                <button
-                  class="button is-danger is-small"
-                  @click="confirmDelete(job)"
-                >
-                  <span class="icon">
-                    <Icon
-                      name="material-symbols:delete-outline-rounded"
-                      :size="18"
-                    />
-                  </span>
-                </button>
-              </div>
+          <div class="field has-addons">
+            <div class="control">
+              <button
+                :class="['button is-small', job.active && 'is-primary']"
+                @click="toggleJobStatus(job)"
+              >
+                {{ job.active ? "Active" : "Inactive" }}
+              </button>
+            </div>
+            <div class="control">
+              <button
+                class="button is-small"
+                @click="openEditJobForm(job)"
+              >
+                <span class="icon">
+                  <Icon
+                    name="material-symbols:edit-outline-rounded"
+                    :size="18"
+                  />
+                </span>
+              </button>
+            </div>
+            <div class="control">
+              <button
+                class="button is-danger is-small"
+                @click="confirmDelete(job)"
+              >
+                <span class="icon">
+                  <Icon
+                    name="material-symbols:delete-outline-rounded"
+                    :size="18"
+                  />
+                </span>
+              </button>
            </div>
          </div>
        </div>
@@ -197,7 +186,7 @@
  </div>
 </template>

-<script setup lang="ts">
+<script setup>
 import { apiUrl, putApiUrl } from "~/components/marketing/email/Email.utils";

 const props = defineProps({
@@ -207,10 +196,9 @@ const props = defineProps({
  },
 });

-const nuxtApp = useNuxtApp();
-const $snackbar = nuxtApp.$snackbar as (message: string) => void;
+const { $getdata, $snackbar } = useNuxtApp();

-const jobs = ref<any[]>([]);
+const jobs = ref([]);
 const isLoading = ref(false);
 const isSaving = ref(false);
 const showForm = ref(false);
@@ -238,7 +226,11 @@ const fetchJobs = async () => {
    const response = await $fetch(`${apiUrl}/Email_Job/`, {
      params: { template_id: props.templateId },
    });
-    jobs.value = response.rows || [];
+    jobs.value = await $getdata("Email_Job", {
+      filter: {
+        template_id: props.templateId,
+      },
+    });
  } catch (error) {
    console.error("Error fetching email jobs:", error);
    $snackbar(`Error fetching jobs`);
@@ -259,7 +251,7 @@ const openNewJobForm = () => {
  showForm.value = true;
 };

-const openEditJobForm = (job: any) => {
+const openEditJobForm = (job) => {
  isEditing.value = true;
  jobForm.value = { ...job };
  showForm.value = true;
@@ -283,19 +275,19 @@ const saveJob = async () => {
          body: data,
        });
    if (response) {
-      $snackbar(`Job saved successfully`);
+      $snackbar("Job saved successfully", "Success");
      await fetchJobs();
      closeForm();
    }
  } catch (error) {
    console.error("Error saving job:", error);
-    $snackbar(`Error saving job`);
+    $snackbar("Error saving job", "Error");
  } finally {
    isSaving.value = false;
  }
 };

-const toggleJobStatus = async (job: any) => {
+const toggleJobStatus = async (job) => {
  const updatedJob = { ...job, active: !job.active };
  try {
    await $fetch(`${putApiUrl}/Email_Job/${job.id}`, {
@@ -310,13 +302,13 @@ const toggleJobStatus = async (job: any) => {
  }
 };

-const confirmDelete = (job: any) => {
+const confirmDelete = (job) => {
  if (confirm(`Are you sure you want to delete the job "${job.name}"?`)) {
    deleteJob(job.id);
  }
 };

-const deleteJob = async (jobId: number) => {
+const deleteJob = async (jobId) => {
  try {
    await $fetch(`${putApiUrl}/Email_Job/${jobId}`, {
      method: "DELETE",
@@ -333,13 +325,6 @@ onMounted(fetchJobs);
 </script>

 <style scoped>
-.box {
-  padding: 1.5rem;
-}
-.border {
-  border: 1px solid #dbdbdb;
-  border-radius: 4px;
-}
 .modal-card-foot {
  justify-content: flex-end;
 }
--- a/app/components/marketing/email/MappingConfigurator.vue
+++ b/app/components/marketing/email/MappingConfigurator.vue
@@ -1,161 +1,151 @@
 <template>
-  <div class="box">
+  <div>
    <div
      v-for="(mapping, mapIndex) in localMappings"
      :key="mapIndex"
-      class="mb-5 p-4 border"
+      class="card"
+      style="border: 1px solid var(--bulma-grey-90)"
    >
-      <div class="level">
-        <div class="level-left">
-          <h5 class="title is-5">Mapping {{ mapIndex + 1 }}: {{ mapping.alias }}</h5>
-        </div>
-        <div class="level-right">
-          <button
-            class="button is-danger is-small"
-            @click="removeMapping(mapIndex)"
-          >
-            <span class="icon is-small">
-              <Icon name="material-symbols:delete-outline-rounded" />
-            </span>
-          </button>
-        </div>
-      </div>
-
-      <div class="columns is-multiline">
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Alias</label>
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="mapping.alias"
-                @input="update"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Model</label>
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="mapping.model"
-                @input="update"
-                placeholder="e.g., app.Transaction"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Lookup Field</label>
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="mapping.lookup_field"
-                @input="update"
-                placeholder="e.g., id"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Lookup Value From</label>
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="mapping.lookup_value_from"
-                @input="update"
-                placeholder="e.g., transaction_id or transaction.customer.id"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Type</label>
-            <div class="control">
-              <div class="select is-fullwidth">
-                <select
-                  v-model="mapping.type"
-                  @change="update"
-                >
-                  <option value="object">Object</option>
-                  <option value="list">List</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Is Trigger Object?</label>
-            <div class="control">
-              <label class="checkbox">
-                <input
-                  type="checkbox"
-                  v-model="mapping.is_trigger_object"
-                  @change="update"
-                />
-                Yes
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <hr />
-      <h6 class="title is-6">Fields</h6>
-      <div
-        v-for="(field, fieldIndex) in mapping.fields"
-        :key="fieldIndex"
-        class="field has-addons"
-      >
-        <div class="control">
-          <input
-            class="input"
-            type="text"
-            v-model="field.placeholder"
-            @input="update"
-            placeholder="[placeholder]"
-          />
-        </div>
-        <div class="control is-expanded">
-          <input
-            class="input"
-            type="text"
-            v-model="field.source"
-            @input="update"
-            placeholder="source.field.name"
-          />
-        </div>
-        <div class="control">
+      <div class="card-content p-4">
+        <div class="block is-flex is-gap-1 is-justify-content-space-between is-align-items-center">
+          <h5 class="fs-17 font-semibold">Mapping {{ mapIndex + 1 }}: {{ mapping.alias }}</h5>
          <button
            class="button is-danger is-light"
-            @click="removeField(mapIndex, fieldIndex as number)"
+            @click="removeMapping(mapIndex)"
          >
            <span class="icon">
              <Icon
                name="material-symbols:delete-outline-rounded"
-                :size="20"
+                :size="18"
              />
            </span>
          </button>
        </div>
+        <div class="fixed-grid">
+          <div class="grid">
+            <div class="cell">
+              <label class="label">Alias</label>
+              <div class="control">
+                <input
+                  class="input"
+                  type="text"
+                  v-model="mapping.alias"
+                  @input="update"
+                />
+              </div>
+            </div>
+            <div class="cell">
+              <label class="label">Model</label>
+              <div class="control">
+                <input
+                  class="input"
+                  type="text"
+                  v-model="mapping.model"
+                  @input="update"
+                  placeholder="e.g., app.Transaction"
+                />
+              </div>
+            </div>
+            <div class="cell">
+              <label class="label">Lookup Field</label>
+              <div class="control">
+                <input
+                  class="input"
+                  type="text"
+                  v-model="mapping.lookup_field"
+                  @input="update"
+                  placeholder="e.g., id"
+                />
+              </div>
+            </div>
+            <div class="cell">
+              <label class="label">Lookup Value From</label>
+              <div class="control">
+                <input
+                  class="input"
+                  type="text"
+                  v-model="mapping.lookup_value_from"
+                  @input="update"
+                  placeholder="e.g., transaction_id or transaction.customer.id"
+                />
+              </div>
+            </div>
+            <div class="cell">
+              <label class="label">Type</label>
+              <div class="control">
+                <div class="select is-fullwidth">
+                  <select
+                    v-model="mapping.type"
+                    @change="update"
+                  >
+                    <option value="object">Object</option>
+                    <option value="list">List</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="cell">
+              <label class="label">Is Trigger Object?</label>
+              <div class="control">
+                <label class="checkbox">
+                  <input
+                    type="checkbox"
+                    v-model="mapping.is_trigger_object"
+                    @change="update"
+                  />
+                  Yes
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr />
+        <p class="label">Fields</p>
+        <div
+          v-for="(field, fieldIndex) in mapping.fields"
+          :key="fieldIndex"
+          class="field has-addons"
+        >
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              v-model="field.placeholder"
+              @input="update"
+              placeholder="[placeholder]"
+            />
+          </div>
+          <div class="control is-expanded">
+            <input
+              class="input"
+              type="text"
+              v-model="field.source"
+              @input="update"
+              placeholder="source.field.name"
+            />
+          </div>
+          <div class="control">
+            <button
+              class="button is-danger is-light"
+              @click="removeField(mapIndex, fieldIndex as number)"
+            >
+              <span class="icon">
+                <Icon
+                  name="material-symbols:delete-outline-rounded"
+                  :size="20"
+                />
+              </span>
+            </button>
+          </div>
+        </div>
+        <button
+          class="button is-small is-light"
+          @click="addField(mapIndex)"
+        >
+          <span class="icon is-small">+</span>
+          <span>Add Field</span>
+        </button>
      </div>
-      <button
-        class="button is-small is-light"
-        @click="addField(mapIndex)"
-      >
-        <span class="icon is-small">+</span>
-        <span>Add Field</span>
-      </button>
    </div>

    <button
@@ -174,8 +164,6 @@
 </template>

 <script setup lang="ts">
-import { ref, watch } from "vue";
-
 const props = defineProps({
  mappings: {
    type: Array,
@@ -260,13 +248,3 @@ const update = () => {
  emit("update:mappings", reformatMappingsForEmit());
 };
 </script>
-
-<style scoped>
-.box {
-  padding: 1.5rem;
-}
-.border {
-  border: 1px solid #dbdbdb;
-  border-radius: 4px;
-}
-</style>
--- a/app/components/marketing/email/Template1.vue
+++ b/app/components/marketing/email/Template1.vue
@@ -4,14 +4,7 @@
      :is="'style'"
      v-html="styles"
    />
-    <div
-      class="container py-6"
-      :style="{
-        minHeight: '100%',
-        backgroundColor: 'hsl(0, 0%, 97%)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
-      }"
-    >
+    <div class="container py-6 min-h-full">
      <table
        role="presentation"
        cellspacing="0"
@@ -37,8 +30,7 @@
                  width: '100%',
                  maxWidth: '680px',
                  backgroundColor: '#ffffff',
-                  borderRadius: '16px',
-                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+                  border: '1px solid #dedede',
                  overflow: 'hidden',
                }"
              >
@@ -102,22 +94,21 @@
                          overflow: 'hidden',
                        }"
                      >
-                        <div :style="{ padding: '15px' }">
+                        <div
+                          class="message-content"
+                          :style="{
+                            padding: '16px',
+                            fontSize: '16px',
+                            margin: '0',
+                            color: '#374151',
+                            lineHeight: '1.6',
+                            wordBreak: 'break-word',
+                          }"
+                        >
                          <div
-                            class="message-content"
-                            :style="{
-                              fontSize: '16px',
-                              margin: '0',
-                              color: '#374151',
-                              lineHeight: '1.6',
-                              wordBreak: 'break-word',
-                            }"
-                          >
-                            <div
-                              class="content"
-                              v-html="processedMessage"
-                            />
-                          </div>
+                            class="content"
+                            v-html="processedMessage"
+                          ></div>
                        </div>

                        <div
@@ -169,7 +160,6 @@
                      <div
                        class="company-info"
                        :style="{
-                          background: 'linear-gradient(to right, #000000, #0f9b0f)',
                          color: '#ffffff',
                          borderRadius: '12px',
                        }"
@@ -233,7 +223,6 @@

 <script setup>
 import { imageUrl } from "~/components/marketing/email/Email.utils";
-import { computed } from "vue";

 const props = defineProps({
  content: Object,
@@ -248,7 +237,7 @@ const hasValidImage = computed(() => {
  return props.content.imageUrl && props.content.imageUrl.trim() !== "";
 });

-const replaceKeywords = (contentstring) => {
+const replaceKeywords = (content) => {
  if (!content) return "";

  let replacedContent = content;
@@ -415,10 +404,6 @@ const styles = `
      .message-text {
        font-size: 12px !important;
      }
-      .logo-container {
-        width: 150px !important;
-        height: 45px !important;
-      }
      .company-name {
        font-size: 12px !important;
        color: #ffffff !important;
--- a/app/components/marketing/email/dataGmail/OpenListGmail.vue
+++ b/app/components/marketing/email/dataGmail/OpenListGmail.vue
@@ -1,67 +1,56 @@
 <template>
-  <div class="box">
-    <div class="table-container">
-      <table class="table is-bordered is-fullwidth is-hoverable">
-        <thead>
-          <tr>
-            <th>List Name</th>
-            <th>Email</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-if="loading">
-            <tr
-              v-for="index in 5"
-              :key="index"
-            >
-              <td>
-                <div
-                  class="skeleton-loader"
-                  style="width: 150px; height: 20px"
-                ></div>
-              </td>
-              <td>
-                <div
-                  class="skeleton-loader"
-                  style="width: 250px; height: 20px"
-                ></div>
-              </td>
-            </tr>
-          </template>
-          <template v-else-if="dataEmail.length === 0">
-            <tr>
-              <td
-                colspan="2"
-                class="has-text-centered py-6"
-              >
-                <div class="has-text-grey">
-                  <p class="has-text-weight-medium">No saved lists found</p>
-                  <p class="is-size-7 mt-2">Create a new list to get started</p>
-                </div>
-              </td>
-            </tr>
-          </template>
-          <template v-else>
-            <tr
-              v-for="item in dataEmail"
-              :key="item.id"
-              :class="['is-clickable', selectedEmails === item.email ? 'is-selected' : '']"
-              @click="handleRowClick(item.email, item.name, item.id)"
-            >
-              <td class="has-text-weight-medium">{{ item.name }}</td>
-              <td class="has-text-grey-30">{{ item.email }}</td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
+  <div class="table-container">
+    <table class="table is-fullwidth is-hoverable">
+      <thead>
+        <tr>
+          <th>List Name</th>
+          <th>Email</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-if="loading"
+          v-for="index in 5"
+          :key="index"
+        >
+          <td>
+            <div class="skeleton-lines">
+              <div></div>
+            </div>
+          </td>
+          <td>
+            <div class="skeleton-lines">
+              <div></div>
+            </div>
+          </td>
+        </tr>
+        <tr v-else-if="dataEmail.length === 0">
+          <td
+            colspan="2"
+            class="has-text-centered py-6"
+          >
+            <div class="has-text-grey">
+              <p class="has-text-weight-medium">No saved lists found</p>
+              <p class="is-size-7 mt-1">Create a new list to get started</p>
+            </div>
+          </td>
+        </tr>
+        <tr
+          v-else
+          v-for="item in dataEmail"
+          :key="item.id"
+          :class="['is-clickable', selectedEmails === item.email ? 'is-selected' : '']"
+          @click="handleRowClick(item.email, item.name, item.id)"
+        >
+          <td class="has-text-weight-medium">{{ item.name }}</td>
+          <td class="has-text-grey-30">{{ item.email }}</td>
+        </tr>
+      </tbody>
+    </table>
  </div>
 </template>

 <script setup lang="ts">
-import { ref } from "vue";
-import { useNuxtApp } from "nuxt/app";
-
 interface EmailItem {
  id: string;
  name: string;
@@ -112,10 +101,6 @@ const handleRowClick = (email: string, name: string, id: string) => {
 </script>

 <style scoped>
-.is-clickable {
-  cursor: pointer;
-}
-
 .is-clickable:hover {
  background-color: hsl(219, 70%, 96%) !important;
 }
@@ -123,20 +108,4 @@ const handleRowClick = (email: string, name: string, id: string) => {
 .is-selected {
  background-color: hsl(219, 70%, 90%) !important;
 }
-
-.skeleton-loader {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: loading 2s ease-in-out infinite;
-  border-radius: 4px;
-}
-
-@keyframes loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
 </style>
--- a/app/components/marketing/email/forms/EmailForm1.vue
+++ b/app/components/marketing/email/forms/EmailForm1.vue
@@ -1,329 +1,322 @@
 <template>
-  <div class="pr-4">
-    <form @submit.prevent="handleSendEmail">
-      <!-- Receiver Section -->
-      <div class="field">
-        <label class="label">
-          <span class="icon-text">
-            <span
-              >Người nhận {{ selectedName ? `(Đang mở: ${selectedName})` : ""
-              }}<b class="ml-1 has-text-danger">*</b></span
-            >
-          </span>
-        </label>
-        <div class="field is-flex">
-          <div class="control is-expanded pr-3 is-flex-grow-1">
-            <input
-              ref="emailTextareaRef"
-              class="input"
-              name="receiver"
-              id="receiver"
-              style="height: 100%"
-              v-model="formData.content.receiver"
-              placeholder="Nhập địa chỉ email người nhận, ngăn cách bằng dấu chấm phẩy (;)"
-              @input="handleInputChange('receiver', $event)"
-            />
-          </div>
-          <div class="control">
-            <div class="buttons is-flex is-flex-wrap-nowrap">
-              <button
-                v-if="$getEditRights()"
-                type="button"
-                class="button is-light"
-                @click="handleOpenModal('save-list')"
-                style="border-radius: 8px; width: 100%"
-              >
-                <span>Lưu</span>
-              </button>
-              <button
-                type="button"
-                class="button is-info"
-                @click="handleOpenModal('open-list')"
-                style="border-radius: 8px; width: 100%"
-              >
-                <span>Mở</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Subject Section -->
-      <div class="field">
-        <label class="label">
-          <span class="icon-text">
-            <span>Tiêu đề<b class="ml-1 has-text-danger">*</b></span>
-          </span>
-        </label>
-        <div class="control">
+  <form @submit.prevent="handleSendEmail">
+    <!-- Receiver Section -->
+    <div class="field">
+      <label class="label">
+        <span class="icon-text">
+          <span>Người nhận {{ selectedName ? `(Đang mở: ${selectedName})` : "" }}<b class="has-text-danger">*</b></span>
+        </span>
+      </label>
+      <div class="field has-addons">
+        <div class="control is-expanded">
          <input
-            type="text"
-            id="subject"
-            name="subject"
+            ref="emailTextareaRef"
            class="input"
-            v-model="formData.content.subject"
-            placeholder="Nhập tiêu đề email..."
-            required
-            @input="handleInputChange('subject', $event)"
+            name="receiver"
+            id="receiver"
+            v-model="formData.content.receiver"
+            @input="handleInputChange('receiver', $event)"
+            placeholder="Nhập địa chỉ email người nhận, ngăn cách bằng dấu chấm phẩy (;)"
+            title="Nhập địa chỉ email người nhận, ngăn cách bằng dấu chấm phẩy (;)"
          />
        </div>
-      </div>
-
-      <!-- Content Section -->
-      <div class="field">
-        <label class="label">
-          <span class="icon-text">
-            <span>Nội dung</span>
-          </span>
-        </label>
        <div class="control">
-          <div
-            class="box"
-            style="padding: 0"
+          <button
+            v-if="$getEditRights()"
+            @click="handleOpenModal('save-list')"
+            class="button is-primary is-light"
+            type="button"
          >
-            <Editor
-              :key="quillKey"
-              :text="formData.content.content"
-              pagename="pagedataemail"
-              :height="'300px'"
-              @content="handleQuillChange"
-            />
-          </div>
+            <span class="icon">
+              <Icon
+                name="material-symbols:save-outline-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+          <span class="tooltiptext left-auto right-0">Lưu</span>
        </div>
-      </div>
-
-      <!-- Image URL Section -->
-      <div class="field">
-        <label class="label">
-          <span class="icon-text">
-            <span>Đường dẫn hình ảnh</span>
-          </span>
-        </label>
        <div class="control">
-          <input
-            type="url"
-            id="imageUrl"
-            name="imageUrl"
-            class="input"
-            placeholder="https://hinhanh.com/image.jpg"
-            @input="handleInputChange('imageUrl', $event)"
-          />
+          <button
+            @click="handleOpenModal('open-list')"
+            class="button is-info is-light"
+            type="button"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:list-alt-outline-rounded"
+                :size="20"
+              />
+            </span>
+          </button>
+          <span class="tooltiptext left-auto right-0">Xem danh sách </span>
        </div>
      </div>
+    </div>

-      <!-- Link URLs Section -->
-      <div class="field">
-        <div class="level">
-          <div class="level-left">
-            <div class="level-item">
-              <label class="label mb-0">
-                <span class="icon-text">
-                  <span>Đường dẫn liên kết</span>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div class="level-right">
-            <div class="level-item">
-              <button
-                type="button"
-                @click="addLinkUrl"
-                class="button is-normal"
-              >
-                <span class="icon">
-                  <Icon name="material-symbols:add-rounded" />
-                </span>
-                <span>Thêm liên kết</span>
-              </button>
-            </div>
+    <!-- Subject Section -->
+    <div class="field">
+      <label class="label">
+        <span class="icon-text">
+          <span>Tiêu đề <b class="has-text-danger">*</b></span>
+        </span>
+      </label>
+      <div class="control">
+        <input
+          type="text"
+          id="subject"
+          name="subject"
+          class="input"
+          v-model="formData.content.subject"
+          placeholder="Nhập tiêu đề email"
+          required
+          @input="handleInputChange('subject', $event)"
+        />
+      </div>
+    </div>
+
+    <!-- Content Section -->
+    <div class="field">
+      <label class="label">
+        <span class="icon-text">
+          <span>Nội dung</span>
+        </span>
+      </label>
+      <div class="control">
+        <Editor
+          :key="quillKey"
+          :text="formData.content.content"
+          style="height: 300px"
+          @content="handleQuillChange"
+        />
+      </div>
+    </div>
+
+    <!-- Image URL Section -->
+    <div class="field">
+      <label class="label">
+        <span class="icon-text">
+          <span>Đường dẫn hình ảnh</span>
+        </span>
+      </label>
+      <div class="control">
+        <input
+          type="url"
+          id="imageUrl"
+          name="imageUrl"
+          class="input"
+          placeholder="https://hinhanh.com/image.jpg"
+          @input="handleInputChange('imageUrl', $event)"
+        />
+      </div>
+    </div>
+
+    <!-- Link URLs Section -->
+    <div class="field">
+      <div class="level">
+        <div class="level-left">
+          <div class="level-item">
+            <label class="label mb-0">
+              <span class="icon-text">
+                <span>Đường dẫn liên kết</span>
+              </span>
+            </label>
          </div>
        </div>
-        <div
-          v-for="(link, index) in formData.content.linkUrl"
-          :key="index"
-          class="field columns has-addons mb-2"
-          :class="`${formData.content.linkUrl.length > 1 ? 'pr-3' : ''}`"
-        >
-          <div class="control column is-6 pr-0 is-expanded">
-            <input
-              type="url"
-              class="input"
-              style="border-radius: 8px"
-              v-model="formData.content.linkUrl[index]"
-              :placeholder="`Liên kết ${index + 1}: https://example.com`"
-              @input="props.onDataChange(formData)"
-            />
-          </div>
-          <div class="control column is-6 is-expanded">
-            <input
-              type="text"
-              class="input"
-              style="border-radius: 8px"
-              v-model="formData.content.textLinkUrl[index]"
-              :placeholder="`Tên ${index + 1}`"
-              @input="props.onDataChange(formData)"
-            />
-          </div>
-          <div
-            class="control column is-1 p-0"
-            v-if="formData.content.linkUrl.length > 1"
-            style="align-self: center; width: 40px"
-          >
+        <div class="level-right">
+          <div class="level-item">
            <button
+              @click="addLinkUrl"
+              class="button is-primary is-light"
              type="button"
-              @click="removeLinkUrl(index)"
-              class="button is-danger has-text-white"
-              style="border-radius: 8px"
            >
              <span class="icon">
-                <Icon name="material-symbols:delete-outline-rounded" />
+                <Icon
+                  name="material-symbols:add-rounded"
+                  :size="18"
+                />
              </span>
+              <span>Thêm liên kết</span>
            </button>
          </div>
        </div>
      </div>
-
-      <!-- Keywords Section -->
      <div
-        v-if="detectedKeywords.length > 0"
-        class="field"
+        v-for="(link, index) in formData.content.linkUrl"
+        :key="index"
+        class="field columns has-addons mb-2"
+        :class="`${formData.content.linkUrl.length > 1 ? 'pr-3' : ''}`"
      >
-        <label class="label">
-          <span class="icon-text">
-            <span>Từ khóa</span>
-          </span>
-        </label>
-        <div class="box">
-          <div
-            v-for="(keyword, index) in detectedKeywords"
-            :key="index"
-            class="field has-addons mb-2 columns"
-          >
-            <div class="control column is-4 pr-0 pb-0">
-              <span
-                style="width: 100%"
-                class="button is-static is-small"
-                >{{ keyword }}</span
-              >
-            </div>
-            <div class="control is-expanded column is-8 pb-0">
-              <input
-                type="text"
-                class="input is-small"
-                :value="getKeywordValue(keyword)"
-                :placeholder="`Nhập giá trị cho ${keyword}`"
-                @input="handleKeywordValueChange(keyword, ($event.target as HTMLInputElement).value)"
-              />
-            </div>
-          </div>
+        <div class="control column is-6 pr-0 is-expanded">
+          <input
+            type="url"
+            class="input"
+            style="border-radius: 8px"
+            v-model="formData.content.linkUrl[index]"
+            :placeholder="`Liên kết ${index + 1}: https://example.com`"
+            @input="props.onDataChange(formData)"
+          />
        </div>
-      </div>
-
-      <!-- Submit Button -->
-      <div class="field">
-        <div class="control">
+        <div class="control column is-6 is-expanded">
+          <input
+            type="text"
+            class="input"
+            style="border-radius: 8px"
+            v-model="formData.content.textLinkUrl[index]"
+            :placeholder="`Tên ${index + 1}`"
+            @input="props.onDataChange(formData)"
+          />
+        </div>
+        <div
+          class="control column is-1 p-0"
+          v-if="formData.content.linkUrl.length > 1"
+          style="align-self: center; width: 40px"
+        >
          <button
-            class="button is-primary has-text-white"
-            :class="{ 'is-loading': loading }"
-            :disabled="loading"
+            type="button"
+            @click="removeLinkUrl(index)"
+            class="button is-danger has-text-white"
+            style="border-radius: 8px"
          >
-            <span v-if="loading">Đang gửi</span>
-            <template v-else>
-              <span class="icon">
-                <Icon name="material-symbols:send-rounded" />
-              </span>
-              <span>Gửi email</span>
-            </template>
+            <span class="icon">
+              <Icon name="material-symbols:delete-outline-rounded" />
+            </span>
          </button>
        </div>
      </div>
-    </form>
-  </div>
+    </div>
+
+    <!-- Keywords Section -->
+    <div
+      v-if="detectedKeywords.length > 0"
+      class="field"
+    >
+      <label class="label">
+        <span class="icon-text">
+          <span>Từ khóa</span>
+        </span>
+      </label>
+      <div class="box">
+        <div
+          v-for="(keyword, index) in detectedKeywords"
+          :key="index"
+          class="field has-addons mb-2 columns"
+        >
+          <div class="control column is-4 pr-0 pb-0">
+            <span
+              style="width: 100%"
+              class="button is-static is-small"
+              >{{ keyword }}</span
+            >
+          </div>
+          <div class="control is-expanded column is-8 pb-0">
+            <input
+              type="text"
+              class="input is-small"
+              :value="getKeywordValue(keyword)"
+              :placeholder="`Nhập giá trị cho ${keyword}`"
+              @input="handleKeywordValueChange(keyword, $event.target.value)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Submit Button -->
+    <div class="field">
+      <div class="control is-flex is-justify-content-flex-end">
+        <button :class="['button is-primary has-text-white', loading && 'is-loading']">
+          <span v-if="loading">Đang gửi</span>
+          <template v-else>
+            <span class="icon">
+              <Icon name="material-symbols:send-rounded" />
+            </span>
+            <span>Gửi email</span>
+          </template>
+        </button>
+      </div>
+    </div>
+  </form>
  <Modal
    @dataevent="handleRowClick"
    @close="showmodal = undefined"
    v-bind="showmodal"
    v-if="showmodal"
-  ></Modal>
+  />
 </template>

-<script setup lang="ts">
+<script setup>
 import { render } from "@vue-email/render";
-import Modal from "~/components/Modal.vue";
 import Template1 from "~/components/marketing/email/Template1.vue";
 import Editor from "~/components/common/Editor.vue";

-const nuxtApp = useNuxtApp();
-const $snackbar = nuxtApp.$snackbar as (message?: string) => void;
-const $getpath = nuxtApp.$getpath as (message?: string) => void;
-const $getEditRights = nuxtApp.$getEditRights as () => boolean;
-
-const apiUrl = `${$getpath()}data`;
+const { $getdata, $getEditRights, $snackbar } = useNuxtApp();
 const showmodal = ref();

 // Types
-interface KeywordItem {
-  keyword: string;
-  value: string;
-}
+// interface KeywordItem {
+//   keyword: string;
+//   value: string;
+// }

-interface FormContent {
-  receiver: string;
-  subject: string;
-  content: string;
-  imageUrl: string | null;
-  linkUrl: string[];
-  textLinkUrl: string[];
-  keyword: KeywordItem[];
-  html: string;
-}
+// interface FormContent {
+//   receiver: string;
+//   subject: string;
+//   content: string;
+//   imageUrl: string | null;
+//   linkUrl: string[];
+//   textLinkUrl: string[];
+//   keyword: KeywordItem[];
+//   html: string;
+// }

-interface FormData {
-  id?: number;
-  name: string;
-  template: string;
-  content: FormContent;
-}
+// interface FormData {
+//   id?: number;
+//   name: string;
+//   template: string;
+//   content: FormContent;
+// }

-type ModalType = "none" | "save-list" | "open-list";
+// type ModalType = "none" | "save-list" | "open-list";

-interface Props {
-  onDataChange: (data: FormData) => void;
-  initialData?: FormData;
-}
+// interface Props {
+//   onDataChange: (data: FormData) => void;
+//   initialData?: FormData;
+// }

-// Props
-const props = withDefaults(defineProps<Props>(), {
-  initialData: () => ({
-    id: undefined,
-    name: "",
-    template: "template1",
-    content: {
-      receiver: "",
-      subject: "",
-      content: "",
-      imageUrl: null,
-      linkUrl: [""],
-      textLinkUrl: [""],
-      keyword: [{ keyword: "", value: "" }],
-      html: "",
-    },
-  }),
+const props = defineProps({
+  onDataChange: Function,
+  initialData: {
+    type: Object,
+    default: () => ({
+      id: undefined,
+      name: "",
+      template: "template1",
+      content: {
+        receiver: "",
+        subject: "",
+        content: "",
+        imageUrl: null,
+        linkUrl: [""],
+        textLinkUrl: [""],
+        keyword: [{ keyword: "", value: "" }],
+        html: "",
+      },
+    }),
+  },
 });
-
 const selectedName = ref("");
 const selectedId = ref("");

-// Refs
-const emailTextareaRef = ref<HTMLTextAreaElement | null>(null);
+const emailTextareaRef = ref(null);
 const loading = ref(false);
-const modalType = ref<ModalType>("none");
-const formData = ref<FormData>(props.initialData);
+const modalType = ref("none");
+const formData = ref(props.initialData);
 const quillKey = ref(0);
 const dataEmails = ref([]);
-const detectedKeywords = ref<string[]>([]);
+const detectedKeywords = ref([]);

-const handleRowClick = (data: { email: string; name: string; id: string }) => {
+const handleRowClick = (data /* : { email: string; name: string; id: string } */) => {
  formData.value = {
    ...formData.value,
    content: {
@@ -341,12 +334,12 @@ const handleRowClick = (data: { email: string; name: string; id: string }) => {
 };

 // Methods
-const extractKeywords = (content: string): string[] => {
+const extractKeywords = (content) => {
  if (!content) return [];

  const regex = /\{\{([^}]+)\}\}/g;
-  const matches: string[] = [];
-  let match: RegExpExecArray | null = null;
+  const matches = [];
+  let match = null;

  while ((match = regex.exec(content)) !== null) {
    if (match[1]) {
@@ -357,14 +350,13 @@ const extractKeywords = (content: string): string[] => {
  return [...new Set(matches)];
 };

-const getKeywordValue = (keyword: string): string => {
+const getKeywordValue = (keyword) => {
  const found = formData.value.content.keyword.find((kw) => kw.keyword === keyword);
  return found ? found.value : "";
 };

-const handleInputChange = (field: keyof FormContent | "name" | "template", eventOrValue: Event | string) => {
-  const value =
-    typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
+const handleInputChange = (field /* : keyof FormContent | "name" | "template" */, eventOrValue) => {
+  const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
  if (field === "receiver" && value.trim() === "") {
    selectedName.value = "";
  }
@@ -380,7 +372,7 @@ const handleInputChange = (field: keyof FormContent | "name" | "template", event
  props.onDataChange(formData.value);
 };

-const handleQuillChange = (content: string) => {
+const handleQuillChange = (content) => {
  formData.value = {
    ...formData.value,
    content: {
@@ -391,9 +383,8 @@ const handleQuillChange = (content: string) => {
  props.onDataChange(formData.value);
 };

-const handleLinkUrlChange = (index: number, eventOrValue: Event | string) => {
-  const value =
-    typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
+const handleLinkUrlChange = (index, eventOrValue) => {
+  const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
  const newLinkUrl = [...formData.value.content.linkUrl];
  newLinkUrl[index] = value;
  formData.value = {
@@ -403,9 +394,8 @@ const handleLinkUrlChange = (index: number, eventOrValue: Event | string) => {
  props.onDataChange(formData.value);
 };

-const handleTextLinkUrlChange = (index: number, eventOrValue: Event | string) => {
-  const value =
-    typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
+const handleTextLinkUrlChange = (index, eventOrValue) => {
+  const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
  const newTextLinkUrl = [...formData.value.content.textLinkUrl];
  newTextLinkUrl[index] = value;
  formData.value = {
@@ -415,9 +405,8 @@ const handleTextLinkUrlChange = (index: number, eventOrValue: Event | string) =>
  props.onDataChange(formData.value);
 };

-const handleKeywordValueChange = (keyword: string, eventOrValue: Event | string) => {
-  const value =
-    typeof eventOrValue === "string" ? eventOrValue : ((eventOrValue.target as HTMLInputElement)?.value ?? "");
+const handleKeywordValueChange = (keyword, eventOrValue) => {
+  const value = typeof eventOrValue === "string" ? eventOrValue : (eventOrValue.target?.value ?? "");
  const keywordIndex = formData.value.content.keyword.findIndex((kw) => kw.keyword === keyword);
  if (keywordIndex !== -1) {
    const newKeywords = [...formData.value.content.keyword];
@@ -445,7 +434,7 @@ const addLinkUrl = () => {
  props.onDataChange(formData.value);
 };

-const removeLinkUrl = (index: number) => {
+const removeLinkUrl = (index) => {
  if (formData.value.content.linkUrl.length > 1) {
    const newLinkUrl = formData.value.content.linkUrl.filter((_, i) => i !== index);
    const newTextLinkUrl = formData.value.content.textLinkUrl.filter((_, i) => i !== index);
@@ -563,10 +552,10 @@ const handleSendEmail = async () => {
  }
 };

-const handleOpenModal = async (type: ModalType) => {
+const handleOpenModal = async (type) => {
  modalType.value = type;
-  await getData();
-  console.log(modalType.value);
+  await getEmailList();
+
  if (type === "save-list") {
    showmodal.value = {
      component: "marketing/email/dataGmail/SaveListGmail",
@@ -584,7 +573,7 @@ const handleOpenModal = async (type: ModalType) => {
    showmodal.value = {
      component: "marketing/email/dataGmail/OpenListGmail",
      title: "Danh sách email",
-      width: "95%",
+      width: "min(700px, 75%)",
      height: "auto",
      vbind: {
        dataEmail: dataEmails.value,
@@ -600,24 +589,13 @@ const handleCloseModal = () => {
  showmodal.value = undefined;
 };

-const getData = async () => {
+async function getEmailList() {
  loading.value = true;
-  const emailListUrl = `${apiUrl}/Email_List/`;
+  dataEmails.value = await $getdata("Email_List");
+  loading.value = false;
+}

-  try {
-    const response = await $fetch(emailListUrl);
-    dataEmails.value = response.rows;
-    console.log(response);
-    console.log(dataEmails.value);
-  } catch (error) {
-    console.error("Error fetching email list:", error);
-    throw error;
-  } finally {
-    loading.value = false;
-  }
-};
-
-const handleEditList = (id: string, name: string, emails: string) => {
+const handleEditList = (id, name, emails) => {
  modalType.value = "save-list";
 };

--- a/app/components/media/FileUpload.vue
+++ b/app/components/media/FileUpload.vue
@@ -116,8 +116,8 @@ function doChange() {

 function getFiles(files) {
  emit("files", files);
-  // setTimeout(() => {
-  //   showmodal.value = undefined;
-  // }, 3000);
+  setTimeout(() => {
+    showmodal.value = undefined;
+  }, 3000);
 }
 </script>
--- a/app/components/menu/MenuFile.vue
+++ b/app/components/menu/MenuFile.vue
@@ -42,8 +42,6 @@
  </div>
 </template>
 <script setup>
-import Modal from "~/components/Modal.vue";
-
 const { $getpath } = useNuxtApp();

 const showModal = ref();
--- a/app/components/pos/ChooseIMEIButton.vue
+++ b/app/components/pos/ChooseIMEIButton.vue
@@ -1,6 +1,4 @@
 <script setup>
-import Modal from "~/components/Modal.vue";
-
 const props = defineProps({
  variant: Object,
 });
--- a/app/components/pos/POS.vue
+++ b/app/components/pos/POS.vue
@@ -4,7 +4,6 @@ import CartItem from "~/components/pos/CartItem.vue";
 import CartTabs from "~/components/pos/CartTabs.vue";
 import useActiveCart from "~/components/pos/composables/useActiveCart";
 import useOrderInfo from "~/components/pos/composables/useOrderInfo";
-import SearchBox from "~/components/SearchBox.vue";

 const store = useStore();
 const { $insertapi } = useNuxtApp();