jws-frontend/src/pages/05_quotation/MainPage.vue

<script lang="ts" setup>
import { pageTabs, fieldSelectedOption } from './constants';

import { onMounted, reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';

// NOTE: Import stores
import { useQuotationStore } from 'src/stores/quotations';
import { isRoleInclude } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import useFlowStore from 'src/stores/flow';
import useMyBranch from 'stores/my-branch';
import { useQuotationForm } from './form';

// NOTE  Import Types
import { CustomerBranchCreate } from 'stores/customer/types';

// NOTE: Import Components
import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';
import StatCardComponent from 'src/components/StatCardComponent.vue';
import FloatingActionButton from 'components/FloatingActionButton.vue';
import FormAbout from 'src/components/05_quotation/FormAbout.vue';
import CreateButton from 'src/components/AddButton.vue';
import ItemCard from 'src/components/ItemCard.vue';
import DialogForm from 'components/DialogForm.vue';
import SideMenu from 'components/SideMenu.vue';
import NoData from 'src/components/NoData.vue';

import { dialogCreateCustomerItem } from 'src/pages/03_customer-management/constant';

import { SaveButton } from 'components/button';

import ProfileBanner from 'components/ProfileBanner.vue';
import { AddressForm } from 'components/form';
import {
  EmployerFormBusiness,
  EmployerFormAbout,
} from 'src/pages/03_customer-management/components';

import { useCustomerForm } from 'src/pages/03_customer-management/form';
import { Quotation } from 'src/stores/quotations/types';

const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
const flowStore = useFlowStore();
const userBranch = useMyBranch();
const navigatorStore = useNavigator();

const {
  currentFormData: quotationFormData,
  currentFormState: quotationFormState,
} = storeToRefs(quotationFormStore);
const { state: customerFormState, currentFormData: customerFormData } =
  storeToRefs(customerFormStore);
const { currentMyBranch } = storeToRefs(userBranch);

const special = ref(false);
const branchId = ref('');
const agentPrice = ref<boolean>(false);
const emptyCreateDialog = ref(false);
const onCreateImageList = ref<{
  selectedImage: string;
  list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
const currentQuotationPayment = ref<Quotation>();

const pageState = reactive({
  hideStat: false,
  inputSearch: '',
  fieldSelected: [],
  gridView: true,
  total: 0,

  currentTab: 'Issued',
  addModal: false,
  quotationModal: false,
  employeeModal: false,
  receiptModal: false,
});

const CUSTOMER_BRANCH_DEFAULT: CustomerBranchCreate & {
  id?: string;
  branchCode?: string;
  codeCustomer?: string;
} = {
  customerCode: '',
  customerId: '',
  legalPersonNo: '',
  citizenId: '',
  namePrefix: '',
  firstName: '',
  lastName: '',
  firstNameEN: '',
  lastNameEN: '',
  telephoneNo: '',
  gender: '',
  birthDate: new Date().toString(),
  businessType: '',
  jobPosition: '',
  jobDescription: '',
  payDate: '',
  payDateEN: '',
  wageRate: 0,
  wageRateText: '',
  homeCode: '',
  employmentOffice: '',
  employmentOfficeEN: '',
  address: '',
  addressEN: '',
  street: '',
  streetEN: '',
  moo: '',
  mooEN: '',
  soi: '',
  soiEN: '',
  provinceId: '',
  districtId: '',
  subDistrictId: '',
  contactName: '',
  email: '',
  contactTel: '',
  officeTel: '',
  agentUserId: undefined,
  status: 'CREATED',
  customerName: '',
  registerName: '',
  registerNameEN: '',
  registerDate: new Date(),
  authorizedCapital: '',
  authorizedName: '',
  authorizedNameEN: '',
  code: '',
};

const formDataCustomerBranch = ref<
  CustomerBranchCreate & {
    id?: string;
    branchCode?: string;
    codeCustomer?: string;
  }
>(structuredClone(CUSTOMER_BRANCH_DEFAULT));

function setDefaultCustomer() {
  formDataCustomerBranch.value = structuredClone(CUSTOMER_BRANCH_DEFAULT);
}

async function submitCustomer() {
  if (currentMyBranch.value === undefined) return;

  const { code, customerCode, birthDate, ...payload } =
    formDataCustomerBranch.value;

  customerFormData.value.customerBranch = [{ ...payload }];
  customerFormData.value.registeredBranchId = isRoleInclude(['system'])
    ? branchId.value
    : currentMyBranch.value.id;
  await customerFormStore.submitFormCustomer();

  customerFormState.value.dialogModal = false;
  // customerFormState.value.dialogType = 'info';
}

async function triggerDialogDeleteQuottaion(id: string) {
  quotationFormStore.dialogDelete(async () => {
    await quotationStore.deleteQuotation(id);
    await fetchQuotationList();
  });
}

function triggerCreateCustomerd(opts: { type: 'CORP' | 'PERS' }) {
  setDefaultCustomer();
  customerFormState.value.dialogType = 'create';
  customerFormData.value.customerType = opts?.type;
  customerFormState.value.dialogModal = true;
}

function triggerSelectTypeCustomerd() {
  emptyCreateDialog.value = true;
}

function triggerAddQuotationDialog() {
  pageState.addModal = true;
  // TODO: form and state controll
}

function triggerQuotationDialog(opts: {
  statusDialog: 'info' | 'edit' | 'create';
  quotationId?: string;
  branchId?: string;
}) {
  const url = new URL(
    `/quotation/${opts.statusDialog === 'create' ? 'add' : 'view'}`,
    window.location.origin,
  );

  localStorage.setItem(
    'new-quotation',
    JSON.stringify({
      customerBranchId: quotationFormData.value.customerBranchId,
      branchId: opts.branchId ?? branchId.value,
      agentPrice: agentPrice.value,
      special: special.value,
      statusDialog: opts.statusDialog,
      quotationId: opts.quotationId,
    }),
  );

  window.open(url.toString(), '_blank');
}

function triggerReceiptDialog(data: Quotation) {
  currentQuotationPayment.value = data;
  pageState.receiptModal = true;
}

const quotationStore = useQuotationStore();
const {
  data: quotationData,
  page: quotationPage,
  pageSize: quotationPageSize,
  pageMax: quotationPageMax,
  stats: quotationStats,
} = storeToRefs(quotationStore);

onMounted(async () => {
  navigatorStore.current.title = 'quotation.title';
  navigatorStore.current.path = [
    {
      text: 'quotation.caption',
      i18n: true,
      handler: () => {
        pageState.currentTab = 'Issued';
      },
    },
  ];

  {
    const ret = await quotationStore.getQuotationStats();
    if (ret) {
      quotationStats.value = Object.assign(quotationStats.value, ret);
    }
  }

  {
    const ret = await quotationStore.getQuotationList({
      page: quotationPage.value,
      pageSize: quotationPageSize.value,
      status: 'Issued',
      urgentFirst: true,
    });

    if (ret) {
      quotationData.value = ret.result;
      quotationPageMax.value = Math.ceil(ret.total / quotationPageSize.value);
      pageState.total = ret.total;
    }
  }

  flowStore.rotate();
});

async function fetchQuotationList() {
  {
    console.log(pageState.currentTab);
    const ret = await quotationStore.getQuotationList({
      page: quotationPage.value,
      pageSize: quotationPageSize.value,
      status:
        pageState.currentTab !== 'Issued'
          ? (
              {
                Accepted: 'Accepted',
                Expired: 'Expired',
                Invoice: 'PaymentInProcess',
                PaymentSuccess: 'PaymentSuccess',
                ProcessComplete: 'ProcessComplete',
              } as const
            )[pageState.currentTab]
          : 'Issued',
      query: pageState.inputSearch,
      urgentFirst: true,
    });

    if (ret) {
      quotationData.value = ret.result;
      quotationPageMax.value = Math.ceil(ret.total / quotationPageSize.value);
      pageState.total = ret.total;
    }
  }

  {
    const ret = await quotationStore.getQuotationStats();
    if (ret) {
      quotationStats.value = Object.assign(quotationStats.value, ret);
    }
  }

  flowStore.rotate();
}

watch(() => pageState.currentTab, fetchQuotationList);
watch(() => pageState.inputSearch, fetchQuotationList);

async function storeDataLocal(id: string) {
  await quotationFormStore.assignFormData(id, 'assign');

  localStorage.setItem(
    'quotation-preview',
    JSON.stringify({
      data: quotationFormData.value,
      meta: {
        source: quotationFormState.value.source,
        createdBy: quotationFormState.value.createdBy('tha'),
      },
    }),
  );

  window.open('/quotation/document-view', '_blank');
}
</script>

<template>
  <FloatingActionButton
    hide-icon
    style="z-index: 999"
    @click.stop="triggerAddQuotationDialog"
  />

  <div class="column full-height no-wrap">
    <!-- SEC: stat -->
    <section class="text-body-2 q-mb-xs flex items-center">
      {{ $t('general.dataSum') }}
      <q-badge
        rounded
        class="q-ml-sm"
        style="
          background-color: hsla(var(--info-bg) / 0.15);
          color: hsl(var(--info-bg));
        "
      >
        {{
          pageState.currentTab === 'Issued'
            ? quotationStats.issued
            : pageState.currentTab === 'Accepted'
              ? quotationStats.accepted
              : pageState.currentTab === 'Expired'
                ? quotationStats.expired
                : pageState.currentTab === 'Invoice'
                  ? quotationStats.paymentInProcess
                  : pageState.currentTab === 'PaymentSuccess'
                    ? quotationStats.paymentSuccess
                    : pageState.currentTab === 'ProcessComplete'
                      ? quotationStats.processComplete
                      : 0
        }}
      </q-badge>
      <q-btn
        class="q-ml-sm"
        icon="mdi-pin-outline"
        color="primary"
        size="sm"
        flat
        dense
        rounded
        @click="pageState.hideStat = !pageState.hideStat"
        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
    </section>

    <transition name="slide">
      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
        <div style="display: inline-block">
          <StatCardComponent
            labelI18n
            :branch="[
              {
                icon: 'mdi-cash',
                count: quotationStats.issued,
                label: 'quotation.status.Issued',
                color: 'orange',
                hidden: pageState.currentTab !== 'Issued',
              },
              {
                icon: 'mdi-hand-coin-outline',
                count: quotationStats.accepted,
                label: 'quotation.status.Accepted',
                color: 'pink',
                hidden: pageState.currentTab !== 'Accepted',
              },

              {
                icon: 'mdi-hand-coin-outline',
                count: quotationStats.expired,
                label: 'quotation.status.Expired',
                color: 'cyan',
                hidden: pageState.currentTab !== 'Expired',
              },

              {
                icon: 'mdi-hand-coin-outline',
                count: quotationStats.paymentInProcess,
                label: 'quotation.status.Invoice',
                color: 'purple',
                hidden: pageState.currentTab !== 'Invoice',
              },

              {
                icon: 'mdi-hand-coin-outline',
                count: quotationStats.paymentSuccess,
                label: 'quotation.status.PaymentSuccess',
                color: 'dark-orange',
                hidden: pageState.currentTab !== 'PaymentSuccess',
              },

              {
                icon: 'mdi-hand-coin-outline',
                count: quotationStats.processComplete,
                label: 'quotation.status.ProcessComplete',
                color: 'blue',
                hidden: pageState.currentTab !== 'ProcessComplete',
              },
            ]"
            :dark="$q.dark.isActive"
          />
        </div>
      </div>
    </transition>

    <!-- SEC: header content -->
    <header class="col surface-1 rounded">
      <div class="column full-height">
        <section
          class="row surface-3 justify-between full-width items-center bordered-b"
          style="z-index: 1"
        >
          <div class="row q-py-sm q-px-md justify-between full-width">
            <q-input
              for="input-search"
              outlined
              dense
              :label="$t('general.search')"
              class="q-mr-md col-12 col-md-3"
              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
              v-model="pageState.inputSearch"
              debounce="200"
            >
              <template #prepend>
                <q-icon name="mdi-magnify" />
              </template>
            </q-input>

            <div
              v-if="false"
              class="row col-12 col-md-4 justify-end"
              :class="{ 'q-pt-xs': $q.screen.lt.md }"
              style="white-space: nowrap"
            >
              <q-select
                v-if="!pageState.gridView"
                id="select-field"
                for="select-field"
                class="col q-ml-sm"
                :options="
                  fieldSelectedOption.map((v) => ({
                    ...v,
                    label: $t(v.label),
                  }))
                "
                :display-value="$t('general.displayField')"
                :hide-dropdown-icon="$q.screen.lt.sm"
                v-model="pageState.fieldSelected"
                option-label="label"
                option-value="value"
                map-options
                emit-value
                outlined
                multiple
                dense
              />

              <q-btn-toggle
                id="btn-mode"
                v-model="pageState.gridView"
                dense
                class="no-shadow bordered rounded surface-1 q-ml-sm"
                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
                size="xs"
                :options="[
                  { value: true, slot: 'folder' },
                  { value: false, slot: 'list' },
                ]"
              >
                <template v-slot:folder>
                  <q-icon
                    name="mdi-view-grid-outline"
                    size="16px"
                    class="q-px-sm q-py-xs rounded"
                    :style="{
                      color: $q.dark.isActive
                        ? pageState.gridView
                          ? '#C9D3DB '
                          : '#787B7C'
                        : pageState.gridView
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
                <template v-slot:list>
                  <q-icon
                    name="mdi-format-list-bulleted"
                    class="q-px-sm q-py-xs rounded"
                    size="16px"
                    :style="{
                      color: $q.dark.isActive
                        ? pageState.gridView === false
                          ? '#C9D3DB'
                          : '#787B7C'
                        : pageState.gridView === false
                          ? '#787B7C'
                          : '#C9D3DB',
                    }"
                  />
                </template>
              </q-btn-toggle>
            </div>
          </div>
        </section>

        <nav class="surface-2 bordered-b q-px-md full-width">
          <q-tabs
            inline-label
            mobile-arrows
            dense
            v-model="pageState.currentTab"
            align="left"
            class="full-width"
            active-color="info"
          >
            <q-tab
              v-for="tab in pageTabs"
              :name="tab"
              :key="tab"
              @click="
                () => {
                  quotationPage = 1;

                  pageState.currentTab = tab;
                  pageState.inputSearch = '';

                  flowStore.rotate();
                }
              "
            >
              <div
                class="row text-capitalize"
                :class="
                  pageState.currentTab === tab ? 'text-bold' : 'app-text-muted'
                "
              >
                {{ $t(`quotation.status.${tab}`) }}
              </div>
            </q-tab>
          </q-tabs>
        </nav>
        <!-- SEC: body content -->
        <article
          v-if="!quotationData || quotationData.length === 0"
          class="col surface-2 flex items-center justify-center"
        >
          <NoData
            v-if="pageState.inputSearch"
            :not-found="!!pageState.inputSearch"
          />

          <CreateButton
            v-if="!pageState.inputSearch"
            @click="triggerAddQuotationDialog"
            label="general.add"
            :i18n-args="{ text: $t('quotation.title') }"
          />
        </article>
        <article v-else class="col q-pa-md surface-2 scroll">
          <div class="row q-col-gutter-md">
            <div
              v-for="v in quotationData"
              :key="v.id"
              class="col-md-4 col-sm-6 col-12"
            >
              <QuotationCard
                :urgent="v.urgent"
                :code="v.code"
                :title="v.workName"
                :created-at="
                  new Date(v.createdAt).toLocaleString('th-TH', {
                    hour12: false,
                  })
                "
                :valid-until="
                  (() => {
                    const date = new Date(v.dueDate);
                    date.setHours(23, 59, 59, 0);
                    return date.toLocaleString('th-TH', { hour12: false });
                  })()
                "
                :status="$t(`quotation.status.${v.quotationStatus}`)"
                :worker-count="v._count.worker"
                :worker-max="v.workerMax || v._count.worker"
                :customer-name="
                  v.customerBranch.registerName ||
                  `${v.customerBranch.firstName || '-'} ${v.customerBranch.lastName || ''}`
                "
                :reporter="
                  $i18n.locale === 'eng'
                    ? v.createdBy.firstNameEN + ' ' + v.createdBy.lastNameEN
                    : v.createdBy.firstName + ' ' + v.createdBy.lastName
                "
                :total-price="v.finalPrice"
                @preview="storeDataLocal(v.id)"
                @view="
                  () => {
                    triggerQuotationDialog({
                      statusDialog: 'info',
                      quotationId: v.id,
                      branchId: v.customerBranch.customer.registeredBranchId,
                    });
                  }
                "
                @edit="
                  triggerQuotationDialog({
                    statusDialog: 'edit',
                    quotationId: v.id,
                    branchId: v.customerBranch.customer.registeredBranchId,
                  })
                "
                @link="triggerReceiptDialog(v)"
                @upload="console.log('upload')"
                @delete="triggerDialogDeleteQuottaion(v.id)"
              />
            </div>
          </div>
        </article>

        <!-- SEC: footer content -->
        <footer
          class="row justify-between items-center q-px-md q-py-sm surface-2"
          v-if="quotationPageMax > 0"
        >
          <div class="col-4">
            <div class="row items-center no-wrap">
              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
                {{ $t('general.recordPerPage') }}
              </div>
              <div>
                <q-btn-dropdown
                  dense
                  unelevated
                  :label="quotationPageSize"
                  class="bordered q-pl-md"
                >
                  <q-list>
                    <q-item
                      v-for="v in [10, 30, 50, 100, 500, 1000]"
                      :key="v"
                      clickable
                      v-close-popup
                      @click="quotationPageSize = v"
                    >
                      <q-item-section>
                        <q-item-label>{{ v }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </div>
            </div>
          </div>
          <div class="col-4 row justify-center app-text-muted">
            {{
              $t('general.recordsPage', {
                resultcurrentPage: quotationData.length,
                total: pageState.inputSearch
                  ? quotationData.length
                  : pageState.total,
              })
            }}
          </div>
          <nav class="col-4 row justify-end">
            <PaginationComponent
              v-model:current-page="quotationPage"
              v-model:max-page="quotationPageMax"
              :fetch-data="fetchQuotationList"
            />
          </nav>
        </footer>
      </div>
    </header>
  </div>

  <!-- NOTE: SEC START - Dialog -->

  <!-- NOTE: START - Quotation Form, Add Quotation -->

  <DialogForm
    :title="$t('general.add', { text: $t('quotation.title') })"
    v-model:modal="pageState.addModal"
    :submit-label="$t('general.add', { text: $t('quotation.title') })"
    submit-icon="mdi-check"
    height="auto"
    width="60vw"
    :submit="
      () => {
        quotationFormState.mode = 'create';
        triggerQuotationDialog({ statusDialog: 'create' });
      }
    "
    :close="
      () => {
        branchId = '';
        quotationFormData.customerBranchId = '';
      }
    "
    :beforeClose="
      () => {
        agentPrice = false;
        special = false;
        return false;
      }
    "
  >
    <header class="q-mx-lg q-mt-lg">
      <ProfileBanner
        img="/images/quotation-bg-avatar.png"
        fallback-cover="/images/quotation-banner.png"
        bg-color="var(--surface-1)"
        :title="$t('general.itemNo', { msg: $t('quotation.title') })"
        hideActive
        readonly
        noImageAction
        hideFade
      />
    </header>
    <section class="col surface-1 q-ma-lg rounded bordered row scroll">
      <div
        class="col-12 q-px-md q-py-lg"
        id="customer-form-content"
        style="height: 100%; max-height: 100%; overflow-y: auto"
      >
        <FormAbout
          on-create
          v-model:agent-price="agentPrice"
          v-model:branch-id="branchId"
          v-model:special="special"
          v-model:customer-branch-id="quotationFormData.customerBranchId"
          @add-customer="triggerSelectTypeCustomerd()"
        />
      </div>
    </section>
  </DialogForm>

  <!-- NOTE: END - Quotation Form -->

  <!-- NOTE: START - Customer / Employer Type Select Form -->

  <DialogForm
    v-model:modal="emptyCreateDialog"
    :title="$t('customer.employerType')"
    hide-footer
    no-app-box
    width="40vw"
    height="250px"
    :close="
      () => {
        emptyCreateDialog = false;
        onCreateImageList = { selectedImage: '', list: [] };
      }
    "
  >
    <div class="full-height row q-pa-md">
      <ItemCard
        class="col q-mx-sm full-height"
        v-for="value in dialogCreateCustomerItem"
        :key="value.text"
        :icon="value.icon"
        :text="value.text"
        :icon-color="value.iconColor"
        :bg-color="value.color"
        @trigger="
          () => {
            triggerCreateCustomerd({
              type:
                value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
            });
            emptyCreateDialog = false;
          }
        "
      />
    </div>
  </DialogForm>

  <!-- NOTE: END - Customer / Employer Type Form -->

  <!-- NOTE: START - Customer / Employer Form -->

  <DialogForm
    hide-footer
    ref="formDialogRef"
    v-model:modal="customerFormState.dialogModal"
    :title="
      customerFormState.dialogType === 'create'
        ? $t(`general.add`, {
            text: `${$t('customer.employer')} `,
          })
        : `${$t('customer.employer')} `
    "
    :submit="
      () => {
        submitCustomer();
      }
    "
    :close="
      () => {
        customerFormState.dialogModal = false;
        customerFormStore.resetForm(true);
        setDefaultCustomer();
      }
    "
  >
    <div
      :class="{
        'q-mx-lg q-my-md': $q.screen.gt.sm,
        'q-mx-md q-my-sm': !$q.screen.gt.sm,
      }"
    >
      <ProfileBanner
        v-if="customerFormData.customerBranch !== undefined"
        active
        hide-fade
        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
        :img="
          customerFormState.customerImageUrl ||
          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
        "
        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
        :icon="
          customerFormData.customerType === 'PERS'
            ? 'mdi-account-plus-outline'
            : 'mdi-office-building-outline'
        "
        :title="
          customerFormData.customerType === 'PERS'
            ? `${customerFormData.customerBranch[0]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
            : customerFormData.customerBranch[0]?.registerName || ''
        "
        :caption="
          customerFormData.customerType === 'PERS'
            ? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
            : customerFormData.customerBranch[0]?.registerNameEN || ''
        "
        @view="
          () => {
            customerFormState.imageDialog = true;
            customerFormState.isImageEdit = false;
          }
        "
        @edit="
          customerFormState.imageDialog = customerFormState.isImageEdit = true
        "
      />
    </div>
    <div
      class="col"
      :class="{
        'q-px-lg q-pb-lg': $q.screen.gt.sm,
        'q-px-md q-pb-sm': !$q.screen.gt.sm,
      }"
    >
      <div
        style="overflow-y: auto"
        class="row full-width full-height surface-1 rounded bordered relative-position"
      >
        <div
          :class="{
            'q-py-md q-px-lg': $q.screen.gt.sm,
            'q-py-sm q-px-lg': !$q.screen.gt.sm,
          }"
          style="position: absolute; z-index: 99999; top: 0; right: 0"
        >
          <div
            v-if="customerFormData.status !== 'INACTIVE'"
            class="surface-1 row rounded"
          >
            <SaveButton
              v-if="
                customerFormState.dialogType === 'edit' ||
                customerFormState.dialogType === 'create'
              "
              id="btn-info-basic-save"
              icon-only
              type="submit"
            />
          </div>
        </div>
        <div
          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
          v-if="$q.screen.gt.sm"
        >
          <SideMenu
            :menu="[
              {
                name: $t('form.customerInformation'),
                anchor: 'form-information',
              },
              {
                name: $t('customerBranch.tab.business'),
                anchor: 'form-business',
              },
              {
                name: $t('form.address'),
                anchor: 'form-address',
              },
            ]"
            background="transparent"
            :active="{
              background: 'hsla(var(--blue-6-hsl) / .2)',
              foreground: 'var(--blue-6)',
            }"
            scroll-element="#branch-form"
          />
        </div>

        <div
          class="col-12 col-md-10 full-height q-col-gutter-sm"
          :class="{
            'q-py-md q-pr-md ': $q.screen.gt.sm,
            'q-py-md q-px-lg': !$q.screen.gt.sm,
          }"
          id="branch-form"
          style="overflow-y: auto"
        >
          <EmployerFormAbout
            id="form-information"
            show-title
            :index="'0'"
            :customerType="customerFormData.customerType"
            :readonly="customerFormState.dialogType === 'info'"
            v-model:citizen-id="formDataCustomerBranch.citizenId"
            v-model:prefix-name="formDataCustomerBranch.namePrefix"
            v-model:first-name="formDataCustomerBranch.firstName"
            v-model:last-name="formDataCustomerBranch.lastName"
            v-model:first-name-en="formDataCustomerBranch.firstNameEN"
            v-model:last-name-en="formDataCustomerBranch.lastNameEN"
            v-model:gender="formDataCustomerBranch.gender"
            v-model:birth-date="formDataCustomerBranch.birthDate"
            v-model:customer-name="formDataCustomerBranch.customerName"
            v-model:legal-person-no="formDataCustomerBranch.legalPersonNo"
            v-model:register-name="formDataCustomerBranch.registerName"
            v-model:register-name-en="formDataCustomerBranch.registerNameEN"
            v-model:register-date="formDataCustomerBranch.registerDate"
            v-model:authorized-capital="
              formDataCustomerBranch.authorizedCapital
            "
            v-model:telephone-no="formDataCustomerBranch.telephoneNo"
          />

          <EmployerFormBusiness
            id="form-business"
            show-title
            prefix-id="dialog"
            dense
            outlined
            :readonly="customerFormState.dialogType === 'info'"
            v-model:bussiness-type="formDataCustomerBranch.businessType"
            v-model:job-position="formDataCustomerBranch.jobPosition"
            v-model:job-description="formDataCustomerBranch.jobDescription"
            v-model:pay-date="formDataCustomerBranch.payDate"
            v-model:pay-date-en="formDataCustomerBranch.payDateEN"
            v-model:wage-rate="formDataCustomerBranch.wageRate"
            v-model:wage-rate-text="formDataCustomerBranch.wageRateText"
          />
          <AddressForm
            id="form-address"
            prefix-id="employer"
            dense
            outlined
            use-employment
            :title="$t('form.address')"
            :addressTitle="$t('form.address')"
            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
            :readonly="customerFormState.dialogType === 'info'"
            v-model:bussiness-type="formDataCustomerBranch.businessType"
            v-model:address="formDataCustomerBranch.address"
            v-model:address-en="formDataCustomerBranch.addressEN"
            v-model:street="formDataCustomerBranch.street"
            v-model:street-en="formDataCustomerBranch.streetEN"
            v-model:moo="formDataCustomerBranch.moo"
            v-model:moo-en="formDataCustomerBranch.mooEN"
            v-model:soi="formDataCustomerBranch.soi"
            v-model:soi-en="formDataCustomerBranch.soiEN"
            v-model:province-id="formDataCustomerBranch.provinceId"
            v-model:district-id="formDataCustomerBranch.districtId"
            v-model:sub-district-id="formDataCustomerBranch.subDistrictId"
            v-model:home-code="formDataCustomerBranch.homeCode"
          />
        </div>
      </div>
    </div>
  </DialogForm>
</template>

<style scoped></style>