Merge branch 'develop'

public/option/option.json

@@ -1004,6 +1004,48 @@
         "label": "Ministry of Labour",
         "value": "MOL"
       }
+    ],
+
+    "propertiesField": [
+      {
+        "label": "Worker status",
+        "value": "workerStatus",
+        "type": "array"
+      },
+      {
+        "label": "Work type",
+        "value": "workType",
+        "type": "array"
+      },
+      {
+        "label": "Hospital name / Medical entitlement",
+        "value": "hospitalNEntitlement",
+        "type": "string"
+      },
+      {
+        "label": "Reference Number (Ref)",
+        "value": "refNo",
+        "type": "string"
+      },
+      {
+        "label": "Work Status",
+        "value": "workStatus",
+        "type": "string"
+      },
+      {
+        "label": "Contact channels",
+        "value": "contactChannel",
+        "type": "string"
+      },
+      {
+        "label": "Remark",
+        "value": "remark",
+        "type": "string"
+      },
+      { "label": "Document Check", "value": "documentCheck", "type": "string" },
+      { "label": "Duty", "value": "duty", "type": "string" },
+      { "label": "Messenger", "value": "messenger", "type": "string" },
+      { "label": "Form", "value": "designForm", "type": "string" }
     ]
   },
 
@@ -2013,6 +2055,48 @@
         "label": "กรมแรงงาน",
         "value": "MOL"
       }
+    ],
+
+    "propertiesField": [
+      {
+        "label": "สถานะคนงาน",
+        "value": "workerStatus",
+        "type": "array"
+      },
+      {
+        "label": "ประเภทงาน",
+        "value": "workType",
+        "type": "array"
+      },
+      {
+        "label": "ชื่อ รพ./สิทธิการรักษา",
+        "value": "hospitalNEntitlement",
+        "type": "string"
+      },
+      {
+        "label": "เลขที่อ้างอิง (Ref)",
+        "value": "refNo",
+        "type": "string"
+      },
+      {
+        "label": "สถานะงาน",
+        "value": "workStatus",
+        "type": "string"
+      },
+      {
+        "label": "ช่องทางการติดต่อ",
+        "value": "contactChannel",
+        "type": "string"
+      },
+      {
+        "label": "หมายเหตุ",
+        "value": "remark",
+        "type": "string"
+      },
+      { "label": "ตรวจสอบเอกสาร", "value": "documentCheck", "type": "string" },
+      { "label": "อากร", "value": "duty", "type": "string" },
+      { "label": "พนักงานส่งเอกสาร", "value": "messenger", "type": "string" },
+      { "label": "ออกแบบฟอร์ม", "value": "designForm", "type": "string" }
     ]
   }
 }

src/components/00_home/MenuItem.vue

@@ -15,6 +15,7 @@ defineProps<{
     hidden?: boolean;
     disabled?: boolean;
     isax?: boolean;
+    tab?: string;
     color:
       | 'green'
       | 'red'
@@ -28,8 +29,8 @@ defineProps<{
   }[];
 }>();
 
-function navigateTo(destination: string) {
+function navigateTo(destination: string, tab?: string) {
-  router.push(`${destination}`);
+  router.push({ path: `${destination}`, query: tab ? { tab } : {} });
 }
 </script>
 
@@ -44,7 +45,7 @@ function navigateTo(destination: string) {
       v-for="(v, i) in list.filter((item) => !item.hidden)"
       :key="i"
       :bordered="$q.dark.isActive"
-      @click="!v.disabled && navigateTo(v.value)"
+      @click="!v.disabled && navigateTo(v.value, v.tab)"
     >
       <AppCircle
         :id="`menu-icon-${v.value}`"

src/components/04_flow-management/FormFlow.vue

@@ -455,7 +455,12 @@ onMounted(async () => {
                           :key="i"
                           class="surface-2 bordered rounded q-px-xs"
                         >
-                          {{ optionStore.mapOption(att.fieldName ?? '') }}
+                          {{
+                            optionStore.mapOption(
+                              att.fieldName ?? '',
+                              'propertiesField',
+                            )
+                          }}
                         </span>
                       </section>
                     </div>

src/components/04_product-service/WorkManagementComponent.vue

@@ -584,7 +584,12 @@ watch(
                         :key="i"
                         class="surface-2 bordered rounded q-px-xs"
                       >
-                        {{ optionStore.mapOption(att.fieldName ?? '') }}
+                        {{
+                          optionStore.mapOption(
+                            att.fieldName ?? '',
+                            'propertiesField',
+                          )
+                        }}
                       </span>
                     </div>
                     <div v-else class="app-text-muted-2">

src/components/04_property-management/FormProperty.vue

@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getRole } from 'src/services/keycloak';
+import SelectBranch from '../shared/select/SelectBranch.vue';
+import SelectInput from '../shared/SelectInput.vue';
+import ToggleButton from '../button/ToggleButton.vue';
+import { Status } from 'src/stores/types';
+
+const name = defineModel<string>('name');
+const nameEN = defineModel<string>('nameEn');
+const type = defineModel<Record<string, any>>('type');
+const registeredBranchId = defineModel<string>('registeredBranchId');
+const status = defineModel<Status>('status');
+
+const isAdmin = computed(() => {
+  const roles = getRole() || [];
+  return roles.includes('system');
+});
+
+const typeOption = [
+  {
+    label: 'Text',
+    value: 'string',
+    color: 'var(--pink-6-hsl)',
+    icon: 'mdi-alpha-t',
+  },
+  {
+    label: 'Number',
+    value: 'number',
+    color: 'var(--purple-11-hsl)',
+    icon: 'mdi-numeric',
+  },
+  {
+    label: 'Date',
+    value: 'date',
+    color: 'var(--green-9-hsl)',
+    icon: 'mdi-calendar-blank-outline',
+  },
+  {
+    label: 'Selection',
+    value: 'array',
+    color: 'var(--indigo-7-hsl)',
+    icon: 'mdi-code-array',
+  },
+];
+
+defineProps<{
+  readonly?: boolean;
+  onDrawer?: boolean;
+  inputOnly?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'changeStatus'): void;
+}>();
+</script>
+
+<template>
+  <div
+    :class="{ 'surface-1 rounded bordered': readonly }"
+    style="border: 1px solid transparent"
+  >
+    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
+      <q-icon
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-map-marker-radius-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t('general.information', { msg: $t('property.title') }) }}
+      <span
+        class="row items-center text-weight-regular text-body2"
+        :class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
+      >
+        <ToggleButton
+          class="q-mr-sm"
+          two-way
+          :model-value="status !== 'INACTIVE'"
+          @click="
+            () => {
+              onDrawer
+                ? $emit('changeStatus')
+                : status !== 'INACTIVE'
+                  ? (status = 'INACTIVE')
+                  : (status = 'CREATED');
+            }
+          "
+        />
+        {{ $t('status.title') }}
+      </span>
+    </div>
+
+    <div class="q-col-gutter-sm row">
+      <SelectBranch
+        v-if="isAdmin"
+        v-model:value="registeredBranchId"
+        :label="$t('quotation.branchVirtual')"
+        class="col-12"
+        :class="{
+          'field-one': inputOnly && $q.screen.gt.sm,
+          'q-mb-sm': inputOnly && $q.screen.lt.md,
+        }"
+        simple
+        required
+        :readonly
+      />
+      <q-input
+        :for="`input-name-${onDrawer ? 'drawer' : 'dialog'}`"
+        :bg-color="readonly ? 'transparent' : ''"
+        :readonly
+        class="col-md-6 col-12"
+        hide-bottom-space
+        dense
+        outlined
+        :label="$t('property.dialog.name')"
+        :model-value="!readonly ? name : name || '-'"
+        @update:model-value="(v) => (name = v?.toString() || '')"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+      />
+
+      <q-input
+        :for="`input-nameEn-${onDrawer ? 'drawer' : 'dialog'}`"
+        :bg-color="readonly ? 'transparent' : ''"
+        :readonly
+        class="col-md-6 col-12"
+        hide-bottom-space
+        dense
+        outlined
+        :label="$t('property.dialog.nameEn')"
+        :model-value="!readonly ? nameEN : nameEN || '-'"
+        @update:model-value="(v) => (nameEN = v?.toString() || '')"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+      />
+
+      <SelectInput
+        hide-input
+        :fill-input="false"
+        :hide-selected="false"
+        :readonly
+        :for="`input-type-${onDrawer ? 'drawer' : 'dialog'}`"
+        :label="$t('property.dialog.type')"
+        class="col-md-6 col-12"
+        v-model="type.type"
+        :option="typeOption"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+      >
+        <template v-slot:option="{ scope }">
+          <q-item
+            v-if="scope.opt"
+            v-bind="scope.itemProps"
+            class="row items-center col-12"
+            :id="`type-${scope.itemProps}`"
+          >
+            <q-avatar
+              size="sm"
+              class="q-mr-md"
+              :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+            >
+              <q-icon
+                size="20px"
+                :name="scope.opt.icon"
+                :style="`color: hsl(${scope.opt.color})`"
+              />
+            </q-avatar>
+            {{ scope.opt.label }}
+          </q-item>
+        </template>
+
+        <template v-slot:selected-item="{ scope }">
+          <div v-if="scope.opt" class="row items-center col-12">
+            <q-avatar
+              size="xs"
+              class="q-mr-sm"
+              :style="`background-color: hsla(${scope.opt.color}/0.2)`"
+            >
+              <q-icon
+                size="14px"
+                :name="scope.opt.icon"
+                :style="`color: hsl(${scope.opt.color})`"
+              />
+            </q-avatar>
+            {{ scope.opt.label }}
+          </div>
+        </template>
+      </SelectInput>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.responsible-search .q-field__control) {
+  height: 36px;
+  font-size: 12px;
+}
+
+:deep(
+    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+  ) {
+  justify-content: start !important;
+  padding-right: 8px !important;
+  padding-top: 16px;
+  min-width: 0px;
+}
+
+:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
+  color: hsl(var(--text-mute));
+}
+
+:deep(
+    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+  ) {
+  color: var(--brand-1);
+}
+
+:deep(
+    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
+      .q-focus-helper
+  ) {
+  visibility: hidden;
+}
+
+:deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) {
+  visibility: hidden;
+}
+</style>

src/components/05_quotation/QuotationCard.vue

@@ -24,6 +24,7 @@ defineProps<{
   hideAction?: boolean;
   useCancel?: boolean;
   disableCancel?: boolean;
+  useRejectCancel?: boolean;
 
   customData?: {
     label: string;
@@ -41,6 +42,7 @@ defineEmits<{
   (e: 'example'): void;
   (e: 'preview'): void;
   (e: 'cancel'): void;
+  (e: 'rejectCancel'): void;
 }>();
 
 const rand = Math.random();
@@ -62,15 +64,16 @@ const rand = Math.random();
           solid
         />
       </div>
-      <div class="q-mr-sm" style="font-size: 90%">
+      <div class="q-mr-sm col row q-gutter-xs" style="font-size: 90%">
         <BadgeComponent
           :title="status"
           :hsla-color="badgeColor || '--blue-6-hsl'"
           :border="urgent"
         />
+        <slot name="badge"></slot>
       </div>
 
-      <nav class="col text-right no-wrap">
+      <nav class="text-right no-wrap">
         <q-btn
           v-if="!hidePreview"
           flat
@@ -97,6 +100,7 @@ const rand = Math.random();
           hide-toggle
           :use-cancel
           :disable-cancel
+          :use-reject-cancel
           :hide-delete="hideKebabDelete"
           :hide-view="hideKebabView"
           :hide-edit="hideKebabEdit"
@@ -106,6 +110,7 @@ const rand = Math.random();
           @upload="$emit('upload')"
           @delete="$emit('delete')"
           @cancel="$emit('cancel')"
+          @reject-cancel="$emit('rejectCancel')"
         />
       </nav>
     </header>

src/components/08_request-list/DataDisplay.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import { formatNumberDecimal } from 'src/stores/utils';
 
 defineEmits<{ (e: 'labelClick', value: string, index: number | null): void }>();
 
@@ -39,7 +38,7 @@ withDefaults(
             v-if="typeof value === 'string'"
             @click="$emit('labelClick', value, null)"
           >
-            {{ formatNumberDecimal(+value, 2) }}
+            {{ value }}
             <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
           </span>
           <span v-else :class="{ 'link cursor-pointer': clickable }">

src/components/button/MainButton.vue

@@ -24,7 +24,7 @@ defineProps<{
       'main-btn__solid': solid && !outlined,
       'main-btn__outline': !solid && outlined,
       'main-btn__pill': pill,
-      'main-btn__dark': dark,
+      'main-btn__dark': dark || $q.dark.isActive,
       'main-btn__icon-only': iconOnly,
     }"
     :style="{ '--button-main-color': color }"

src/components/dialog/DialogProperties.vue

@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
 
 import useOptionStore from 'src/stores/options';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
-import { Option } from 'stores/options/types';
 import {
   WorkFlowPayloadStep,
   WorkflowTemplate,
@@ -15,6 +14,12 @@ import SelectFlow from '../shared/select/SelectFlow.vue';
 import NoData from '../NoData.vue';
 import DialogForm from '../DialogForm.vue';
 
+interface Option {
+  value: string;
+  label: string;
+  type: string;
+}
+
 const { t } = useI18n();
 const { getWorkflowTemplate } = useWorkflowTemplate();
 const optionStore = useOptionStore();
@@ -90,8 +95,9 @@ function manageProperties(
 ) {
   if (property === 'all' && propertiesOption.value) {
     if (
-      tempStep.value[stepIndex].attributes.properties.length ===
+      tempStep.value[stepIndex].attributes.properties.filter((p) =>
-      propertiesOption.value.length
+        propertiesOption.value.some((opt: Option) => opt.value === p.fieldName),
+      ).length === propertiesOption.value.length
     ) {
       tempStep.value[stepIndex].attributes.properties = [];
       return;
@@ -261,8 +267,8 @@ function confirmDelete(items: unknown[], index: number) {
   });
 }
 
-function assignTemp() {
+async function assignTemp() {
-  propertiesOption.value = optionStore.globalOption?.servicePropertiesField;
+  propertiesOption.value = optionStore.globalOption?.propertiesField;
 
   tempStep.value = JSON.parse(JSON.stringify(dataStep.value));
   tempWorkflowId.value = workflowId.value;
@@ -385,8 +391,11 @@ watch(
                   <div class="full-width flex items-center">
                     <q-icon
                       v-if="
-                        tempStep[stepIndex].attributes.properties?.length ===
+                        tempStep[stepIndex].attributes.properties?.filter((p) =>
-                        propertiesOption?.length
+                          propertiesOption.some(
+                            (opt: Option) => opt.value === p.fieldName,
+                          ),
+                        ).length === propertiesOption.length
                       "
                       name="mdi-checkbox-marked"
                       size="xs"
@@ -407,10 +416,13 @@ watch(
                 <q-item
                   v-for="(ops, index) in propertiesOption"
                   clickable
+                  :class="{
+                    'bordered-t': index === propertiesOption.length - 4,
+                  }"
                   :key="index"
-                  @click="manageProperties(stepIndex, ops.value, ops.type)"
                   :for="`list-${ops.value}`"
                   :id="`list-${ops.value}`"
+                  @click="manageProperties(stepIndex, ops.value, ops.type)"
                 >
                   <div class="full-width flex items-center no-wrap">
                     <q-icon

src/components/shared/KebabAction.vue

@@ -15,6 +15,7 @@ const props = withDefaults(
     useLink?: boolean;
     useUpload?: boolean;
     useCancel?: boolean;
+    useRejectCancel?: boolean;
     disableCancel?: boolean;
     disableDelete?: boolean;
   }>(),
@@ -31,6 +32,7 @@ defineEmits<{
   (e: 'upload'): void;
   (e: 'delete'): void;
   (e: 'cancel'): void;
+  (e: 'rejectCancel'): void;
   (e: 'changeStatus'): void;
 }>();
 
@@ -193,12 +195,41 @@ watch(
             }"
           />
           <span class="col-9 q-px-md flex items-center">
-            <slot name="labelDelete">
+            <slot name="labelCancel">
               {{ $t('general.cancel') }}
             </slot>
           </span>
         </q-item>
 
+        <q-item
+          v-if="useRejectCancel"
+          v-close-popup
+          dense
+          class="row"
+          style="white-space: nowrap"
+          :clickable="!disableCancel"
+          :id="`btn-kebab-delete-${idName}`"
+          :class="{
+            'surface-3': disableCancel,
+            'app-text-muted': disableCancel,
+          }"
+          @click.stop="() => $emit('rejectCancel')"
+        >
+          <q-icon
+            size="xs"
+            name="mdi-close"
+            class="col-3"
+            :class="{
+              'app-text-negative': !disableCancel,
+            }"
+          />
+          <span class="col-9 q-px-md flex items-center">
+            <slot name="labelRejectCancel">
+              {{ $t('requestList.status.work.RejectCancel') }}
+            </slot>
+          </span>
+        </q-item>
+
         <q-item v-if="!hideToggle" dense>
           <q-item-section class="q-py-sm">
             <div class="q-pa-sm surface-2 rounded flex items-center">

src/i18n/eng.ts

@@ -248,7 +248,7 @@ export default {
     unread: 'Unread',
     all: 'All',
     read: 'Read',
-    viewALL: 'View All',
+    viewAll: 'View All',
     markAsRead: 'Mark as Read',
   },
 
@@ -941,6 +941,7 @@ export default {
         Ended: 'Ended',
         Completed: 'Completed',
         Canceled: 'Canceled',
+        RejectCancel: 'Reject cancellation request',
       },
 
       Pending: 'Pending',
@@ -949,6 +950,8 @@ export default {
       Completed: 'Completed',
       Canceled: 'Canceled',
       CancelRequested: 'Cancel Requested',
+      RejectCancel: 'Rejection of cancellation request',
+      RejectedCancel: 'Cancellation request rejected',
 
       AwaitOrder: 'Awaiting Order',
       ReadyOrder: 'Ready for Order',
@@ -1360,6 +1363,7 @@ export default {
       Product: 'Product and Service Report',
       Sale: 'Sales Summary Report',
       Profit: 'Profit and Loss Report',
+      Debt: 'Overdue Customer Report',
     },
     document: {
       code: 'Code',
@@ -1395,6 +1399,12 @@ export default {
       expenses: 'Expenses',
       income: 'Income',
     },
+    debtReport: {
+      title: 'Overdue Customer Report',
+      customerName: 'Customer Name',
+      unpaid: 'Unpaid',
+      paid: 'Paid',
+    },
   },
   dashboard: {
     title: 'Dashboard',
@@ -1443,4 +1453,20 @@ export default {
     11: 'November',
     12: 'December',
   },
+
+  property: {
+    title: 'Property',
+    caption: 'Manage Properties',
+    table: {
+      name: 'Name',
+      nameEn: 'English Name',
+      type: 'Type',
+    },
+    dialog: {
+      title: '',
+      name: 'Name',
+      nameEn: 'English Name',
+      type: 'Type',
+    },
+  },
 };

src/i18n/tha.ts

@@ -194,6 +194,7 @@ export default {
       personnel: 'บุคลากร',
       productService: 'สินค้าและบริการ',
       workflow: 'ขั้นตอนการทำงาน',
+      property: 'คุณสมบัติ',
       customer: 'ลูกค้า',
       mainData: 'ข้อมูลหลัก',
       agencies: 'หน่วยงาน',
@@ -930,6 +931,7 @@ export default {
         Ended: 'จบงาน',
         Completed: 'เสร็จสิ้น',
         Canceled: 'ยกเลิก',
+        RejectCancel: 'ปฏิเสธคําขอยกเลิก',
       },
       Pending: 'รอดำเนินการ',
       Ready: 'พร้อมดำเนินการ',
@@ -937,6 +939,8 @@ export default {
       Completed: 'เสร็จสิ้น',
       Canceled: 'ยกเลิก',
       CancelRequested: 'ต้องการยกเลิก',
+      RejectCancel: 'การปฏิเสธคําขอยกเลิก',
+      RejectedCancel: 'ปฏิเสธคําขอยกเลิกแล้ว',
 
       AwaitOrder: 'รอสั่งงาน',
       ReadyOrder: 'พร้อมสั่งงาน',
@@ -1340,6 +1344,7 @@ export default {
       Product: 'รายงานสินค้าและบริการ',
       Sale: 'รายงานสรุปยอดขาย',
       Profit: 'รายงานกำไรและขาดทุน',
+      Debt: 'รายงานลูกค้าที่มีหนี้ค้างชำระ',
     },
     document: {
       code: 'รหัส',
@@ -1376,6 +1381,12 @@ export default {
       expenses: 'ต้นทุน',
       income: 'รายได้',
     },
+    debtReport: {
+      title: 'รายงานลูกค้าที่มีหนี้ค้างชำระ ',
+      customerName: 'ชื่อลูกค้า',
+      unpaid: 'ยังไม่ได้ชำระ',
+      paid: 'ชำระแล้ว',
+    },
   },
   dashboard: {
     title: 'Dashboard',
@@ -1424,4 +1435,20 @@ export default {
     11: 'พฤศจิกายน',
     12: 'ธันวาคม',
   },
+
+  property: {
+    title: 'คุณสมบัติ',
+    caption: 'จัดการคุณสมบัติ',
+    table: {
+      name: 'ชื่อ',
+      nameEn: 'ชื่อภาษาอังกฤษ',
+      type: 'ประเภท',
+    },
+    dialog: {
+      title: '',
+      name: 'ชื่อ',
+      nameEn: 'ชื่อภาษาอังกฤษ',
+      type: 'ประเภท',
+    },
+  },
 };

src/layouts/DrawerComponent.vue

@@ -120,6 +120,15 @@ onMounted(async () => {
           ),
         },
         { label: 'workflow', route: '/workflow' },
+        {
+          label: 'property',
+          route: '/property',
+          hidden: !(
+            role.value.includes('admin') ||
+            role.value.includes('head_of_admin') ||
+            role.value.includes('system')
+          ),
+        },
         { label: 'productService', route: '/product-service' },
         { label: 'customer', route: '/customer-management' },
         { label: 'agencies', route: '/agencies-management' },

src/layouts/MainLayout.vue

@@ -115,8 +115,13 @@ function doLogout() {
 }
 
 function readNoti(id: string) {
+  const notification = notificationData.value.find((n) => n.id === id);
+
   state.notiDialog = true;
   state.notiId = id;
+  if (notification) {
+    notification.read = true;
+  }
 }
 
 onMounted(async () => {
@@ -307,17 +312,17 @@ onMounted(async () => {
                   }
                 "
               >
-                <div class="q-px-md q-py-sm row col-12 items-center">
+                <div class="q-pa-sm row col-12 items-center">
                   <div class="text-subtitle1 text-weight-bold">
                     {{ $t('noti.title') }}
                   </div>
                   <q-space />
                 </div>
-                <div class="q-px-md q-pb-md q-gutter-x-md">
+                <div class="q-px-sm q-pb-md">
                   <q-btn
                     rounded
                     padding="0px 10px"
-                    class="text-weight-medium"
+                    class="text-weight-medium text-capitalize"
                     v-for="(btn, index) in notiMenu"
                     :flat="!btn.active"
                     :unelevated="btn.active"
@@ -327,68 +332,82 @@ onMounted(async () => {
                     @click="setActive(btn)"
                   />
                 </div>
-                <div style="max-height: 30vh; width: 400px; overflow-y: auto">
+                <section
-                  <section
+                  v-if="
-                    v-if="
+                    state.filterUnread
-                      state.filterUnread
+                      ? notificationData.filter((v) => !v.read).length
-                        ? notificationData.filter((v) => !v.read).length
+                      : notificationData.length
-                        : notificationData.length
+                  "
-                    "
+                  class="caption cursor-pointer scroll"
-                    class="caption cursor-pointer"
+                  style="max-height: 30vh; width: 300px"
+                >
+                  <q-item
+                    v-for="(item, i) in state.filterUnread
+                      ? notificationData.filter((v) => !v.read)
+                      : notificationData"
+                    dense
+                    clickable
+                    class="items-center q-py-xs q-px-sm"
+                    v-ripple
+                    @click="readNoti(item.id)"
+                    :key="i"
                   >
-                    <q-item
+                    <div
-                      v-for="(item, i) in state.filterUnread
+                      class="rounded q-mr-sm"
-                        ? notificationData.filter((v) => !v.read)
+                      :style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
-                        : notificationData"
+                    />
-                      dense
+                    <q-avatar
-                      clickable
+                      v-if="$q.screen.gt.xs"
-                      class="q-py-sm"
+                      color="positive"
-                      v-ripple
+                      style="height: 36px; width: 36px"
-                      @click="readNoti(item.id)"
-                      :key="i"
                     >
-                      <q-avatar
+                      <q-icon color="white" name="mdi-check" />
-                        color="positive"
+                    </q-avatar>
-                        style="height: 36px; width: 36px"
-                      >
-                        <q-icon color="white" name="mdi-check" />
-                      </q-avatar>
 
-                      <div class="col-6 column text-caption q-pl-md ellipsis">
+                    <div class="col column text-caption q-pl-md ellipsis">
-                        <span
+                      <span class="block ellipsis full-width text-weight-bold">
-                          class="block ellipsis full-width text-weight-bold"
+                        {{ item.title }}
-                        >
-                          {{ item.title }}
-                        </span>
-                        <span class="block ellipsis full-width text-stone">
-                          {{ item.detail }}
-                        </span>
-                      </div>
-                      <span align="right" class="col text-caption text-stone">
-                        {{ moment(item.createdAt).fromNow() }}
                       </span>
-                      <q-tooltip
+                      <span
-                        anchor="top middle"
+                        class="block ellipsis full-width text-stone"
-                        self="bottom middle"
+                        :class="{ 'text-weight-medium': !item.read }"
-                        :delay="1000"
-                        :offset="[10, 10]"
                       >
                         {{ item.detail }}
-                      </q-tooltip>
+                      </span>
-                    </q-item>
+                    </div>
-                  </section>
+                    <span
-                  <section v-else class="text-center q-py-sm">
+                      align="right"
-                    <span class="app-text-muted">
+                      class="text-caption text-stone q-pl-md"
-                      {{ $t('general.noData') }}
+                      :class="{ 'text-weight-bold': !item.read }"
+                    >
+                      {{ moment(item.createdAt).fromNow() }}
                     </span>
-                  </section>
+                    <q-tooltip
-                </div>
+                      anchor="top middle"
+                      self="bottom middle"
+                      :delay="1000"
+                      :offset="[10, 10]"
+                    >
+                      {{ item.title }}
+                      {{ item.detail }}
+                    </q-tooltip>
+                  </q-item>
+                </section>
+                <section
+                  v-else
+                  class="text-center q-py-sm"
+                  style="max-height: 30vh; width: 300px"
+                >
+                  <span class="app-text-muted">
+                    {{ $t('general.noData') }}
+                  </span>
+                </section>
                 <div class="col bordered-t">
                   <q-btn
                     flat
                     dense
                     color="info"
-                    class="full-width"
+                    class="full-width text-capitalize"
                     @click="() => $router.push('/notification')"
                   >
                     {{ $t('noti.viewAll') }}

src/pages/00_notification/MainPage.vue

@@ -75,8 +75,13 @@ async function deleteNoti() {
 }
 
 function readNoti(id: string) {
+  const notification = noti.value.find((n) => n.id === id);
+
   state.notiId = id;
   state.notiDialog = true;
+  if (notification) {
+    notification.read = true;
+  }
 }
 
 onMounted(async () => {
@@ -203,10 +208,10 @@ onMounted(async () => {
             class="q-py-sm q-px-md rounded row no-wrap items-center"
             @click.stop="readNoti(n.id)"
           >
-            <!-- <div
+            <div
               class="rounded"
               :style="`background: hsl(var(--info-bg)/${n.read ? 0 : 1}); width: 6px; height: 6px`"
-            /> -->
+            />
             <q-checkbox
               :model-value="selectedNoti.includes(n.id)"
               size="xs"

src/pages/04_product-service/MainPage.vue

@@ -1463,7 +1463,7 @@ const currentPropertiesMode = ref<'service' | 'work'>('service');
 
 function openPropertiesDialog(type: 'service' | 'work') {
   if (type === 'service') {
-    propertiesOption.value = optionStore.globalOption.servicePropertiesField;
+    propertiesOption.value = optionStore.globalOption.propertiesField;
   }
 
   if (type === 'work') {

src/pages/04_property-managment/MainPage.vue

@@ -0,0 +1,875 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { onMounted, reactive, ref } from 'vue';
+import { QSelect, QTableProps } from 'quasar';
+import { useNavigator } from 'src/stores/navigator';
+import { useProperty } from 'src/stores/property';
+import { useQuasar } from 'quasar';
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import NoData from 'src/components/NoData.vue';
+import { watch } from 'vue';
+import KebabAction from 'src/components/shared/KebabAction.vue';
+import { FloatingActionButton, PaginationComponent } from 'src/components';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import PropertyDialog from './PropertyDialog.vue';
+import { Property } from 'src/stores/property/types';
+import { dialog } from 'src/stores/utils';
+import CreateButton from 'src/components/AddButton.vue';
+
+const { t } = useI18n();
+const $q = useQuasar();
+const navigatorStore = useNavigator();
+const propertyStore = useProperty();
+const {
+  data: propertyData,
+  page: propertyPage,
+  pageSize: propertyPageSize,
+  pageMax: propertyPageMax,
+} = storeToRefs(propertyStore);
+
+const currPropertyData = ref<Property>();
+const formProperty = ref<Property>({
+  name: '',
+  nameEN: '',
+  type: {},
+});
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const refFilter = ref<InstanceType<typeof QSelect>>();
+const fieldSelected = ref<('order' | 'name' | 'type')[]>([
+  'order',
+  'name',
+  'type',
+]);
+const fieldSelectedOption = ref<{ label: string; value: string }[]>([
+  {
+    label: 'general.order',
+    value: 'order',
+  },
+  {
+    label: 'property.table.name',
+    value: 'name',
+  },
+  {
+    label: 'property.table.type',
+    value: 'type',
+  },
+]);
+
+const columns = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'order',
+  },
+  {
+    name: 'name',
+    align: 'center',
+    label: 'property.table.name',
+    field: 'order',
+  },
+
+  {
+    name: 'type',
+    align: 'center',
+    label: 'property.table.type',
+    field: 'type',
+  },
+] satisfies QTableProps['columns'];
+
+const typeOption = {
+  string: {
+    label: 'Text',
+    value: 'string',
+    color: 'var(--pink-6-hsl)',
+    icon: 'mdi-alpha-t',
+  },
+  number: {
+    label: 'Number',
+    value: 'number',
+    color: 'var(--purple-11-hsl)',
+    icon: 'mdi-numeric',
+  },
+  date: {
+    label: 'Date',
+    value: 'date',
+    color: 'var(--green-9-hsl)',
+    icon: 'mdi-calendar-blank-outline',
+  },
+  array: {
+    label: 'Selection',
+    value: 'array',
+    color: 'var(--indigo-7-hsl)',
+    icon: 'mdi-code-array',
+  },
+};
+
+const pageState = reactive({
+  hideStat: false,
+  inputSearch: '',
+  fieldSelected: [],
+  gridView: false,
+  total: 0,
+
+  addModal: false,
+  viewDrawer: false,
+  isDrawerEdit: true,
+});
+
+async function fetchPropertyList(mobileFetch?: boolean) {
+  const res = await propertyStore.getPropertyList({
+    page: mobileFetch ? 1 : propertyPage.value,
+    pageSize: mobileFetch
+      ? propertyData.value.length +
+        (pageState.total === propertyData.value.length ? 1 : 0)
+      : propertyPageSize.value,
+    query: pageState.inputSearch,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+  });
+  if (res) {
+    propertyData.value =
+      $q.screen.xs && !mobileFetch
+        ? [...propertyData.value, ...res.result]
+        : res.result;
+
+    propertyPageMax.value = Math.ceil(res.total / propertyPageSize.value);
+    if (pageState.inputSearch || statusFilter.value !== 'all') return;
+    pageState.total = res.total;
+  }
+}
+
+function triggerDialog(type: 'add' | 'edit' | 'view') {
+  if (type === 'add') {
+    pageState.addModal = true;
+    pageState.isDrawerEdit = true;
+  }
+  if (type === 'view') {
+    pageState.viewDrawer = true;
+    pageState.isDrawerEdit = false;
+  }
+  if (type === 'edit') {
+    pageState.viewDrawer = true;
+    pageState.isDrawerEdit = true;
+  }
+}
+
+function assignFormData(propertyData: Property) {
+  currPropertyData.value = JSON.parse(JSON.stringify(propertyData));
+  formProperty.value = JSON.parse(
+    JSON.stringify({
+      name: propertyData.name,
+      nameEN: propertyData.nameEN,
+      type: propertyData.type,
+      status: propertyData.status,
+      registeredBranchId: propertyData.registeredBranchId,
+    }),
+  );
+}
+
+function resetForm() {
+  currPropertyData.value = undefined;
+  pageState.isDrawerEdit = true;
+  pageState.addModal = false;
+  pageState.viewDrawer = false;
+  formProperty.value = {
+    name: '',
+    nameEN: '',
+    type: {},
+  };
+}
+
+async function deleteProperty(id?: string) {
+  const targetId = id || currPropertyData.value?.id;
+  if (targetId === undefined) return;
+
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    persistent: true,
+    message: t('dialog.message.confirmDelete'),
+    action: async () => {
+      await propertyStore.deleteProperty(targetId);
+      await fetchPropertyList($q.screen.xs);
+
+      resetForm();
+    },
+    cancel: () => {},
+  });
+}
+
+async function changeStatus(id?: string) {
+  const targetId = id || currPropertyData.value?.id;
+  if (targetId === undefined) return;
+
+  formProperty.value.status =
+    formProperty.value.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE';
+
+  const res = await propertyStore.editProperty({
+    id: targetId,
+    ...formProperty.value,
+  });
+  if (res) {
+    formProperty.value.status = res.data.status;
+    if (currPropertyData.value) {
+      currPropertyData.value.status = res.data.status;
+    }
+    await fetchPropertyList();
+  }
+}
+
+async function triggerChangeStatus(data?: Property) {
+  const targetId = (data && data.id) || currPropertyData.value?.id;
+  const targetStatus = (data && data.status) || currPropertyData.value?.status;
+  if (data) assignFormData(data);
+  if (targetId === undefined || targetStatus === undefined) return;
+
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: targetStatus !== 'INACTIVE' ? 'warning' : 'info',
+      icon:
+        targetStatus !== 'INACTIVE'
+          ? 'mdi-alert'
+          : 'mdi-message-processing-outline',
+      title: t('dialog.title.confirmChangeStatus'),
+      actionText:
+        targetStatus !== 'INACTIVE' ? t('general.close') : t('general.open'),
+      message:
+        targetStatus !== 'INACTIVE'
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
+      action: async () => {
+        await changeStatus(targetId).then(resolve).catch(reject);
+      },
+      cancel: () => {},
+    });
+  });
+}
+
+function undo() {
+  if (!currPropertyData.value) return;
+  assignFormData(currPropertyData.value);
+  pageState.isDrawerEdit = false;
+}
+
+async function submit() {
+  if (currPropertyData.value?.id !== undefined) {
+    await propertyStore.editProperty({
+      id: currPropertyData.value.id,
+      ...formProperty.value,
+    });
+  } else {
+    await propertyStore.creatProperty({
+      ...formProperty.value,
+    });
+  }
+  await fetchPropertyList($q.screen.xs);
+  resetForm();
+}
+
+onMounted(async () => {
+  navigatorStore.current.title = 'property.title';
+  navigatorStore.current.path = [{ text: 'property.caption', i18n: true }];
+  await fetchPropertyList();
+});
+
+watch(
+  () => statusFilter.value,
+  () => {
+    propertyData.value = [];
+    propertyPage.value = 1;
+    fetchPropertyList();
+  },
+);
+watch([() => pageState.inputSearch, propertyPageSize], () => {
+  propertyData.value = [];
+  propertyPage.value = 1;
+  fetchPropertyList();
+});
+</script>
+<template>
+  <FloatingActionButton
+    style="z-index: 999"
+    hide-icon
+    @click="triggerDialog('add')"
+  ></FloatingActionButton>
+
+  <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.total }}
+      </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-tag-text-outline',
+                count: pageState.total,
+                label: 'property.title',
+                color: 'blue',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <!-- SEC: header content -->
+    <section class="col surface-1 rounded bordered overflow-hidden">
+      <div class="column full-height no-wrap">
+        <header
+          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="col col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+              <template v-if="$q.screen.lt.md" v-slot:append>
+                <span class="row">
+                  <q-separator vertical />
+                  <q-btn
+                    icon="mdi-filter-variant"
+                    unelevated
+                    class="q-ml-sm"
+                    padding="4px"
+                    size="sm"
+                    rounded
+                    @click="refFilter?.showPopup"
+                  />
+                </span>
+              </template>
+            </q-input>
+
+            <div class="row col-md-5" style="white-space: nowrap">
+              <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
+                v-model="statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  { label: $t('general.all'), value: 'all' },
+                  { label: $t('general.active'), value: 'statusACTIVE' },
+                  { label: $t('general.inactive'), value: 'statusINACTIVE' },
+                ]"
+              />
+              <q-select
+                v-show="$q.screen.gt.sm"
+                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="fieldSelected"
+                option-label="label"
+                option-value="value"
+                autocomplete="off"
+                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>
+        </header>
+
+        <!-- SEC: body content -->
+        <article
+          v-if="propertyData.length === 0"
+          class="col surface-2 flex items-center justify-center"
+        >
+          <NoData
+            v-if="pageState.total !== 0"
+            :not-found="!!pageState.inputSearch"
+          />
+          <CreateButton
+            v-if="pageState.total === 0"
+            @click="triggerDialog('add')"
+            label="general.add"
+            :i18n-args="{ text: $t('flow.title') }"
+          />
+        </article>
+
+        <article v-else class="col q-pa-md surface-2 scroll full-width">
+          <q-infinite-scroll
+            :offset="10"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || propertyPage === propertyPageMax) return;
+                propertyPage = propertyPage + 1;
+                fetchPropertyList().then(() =>
+                  done(propertyPage >= propertyPageMax),
+                );
+              }
+            "
+          >
+            <q-table
+              flat
+              bordered
+              :grid="pageState.gridView"
+              :rows="propertyData"
+              :columns="columns"
+              class="full-width"
+              card-container-class="q-col-gutter-md"
+              row-key="name"
+              :rows-per-page-options="[0]"
+              hide-pagination
+              :visible-columns="fieldSelected"
+            >
+              <template #header="{ cols }">
+                <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
+                  <q-th
+                    v-for="(v, i) in cols"
+                    :key="i"
+                    :class="{
+                      'text-center': v.name === 'order',
+                      'text-left': v.name === 'name' || v.name === 'type',
+                    }"
+                  >
+                    {{ $t(v.label) }}
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+
+              <template #body="props">
+                <q-tr
+                  :class="{
+                    'app-text-muted': props.row.status === 'INACTIVE',
+                    'status-active': props.row.status !== 'INACTIVE',
+                    'status-inactive': props.row.status === 'INACTIVE',
+                  }"
+                  :style="
+                    props.rowIndex % 2 !== 0
+                      ? $q.dark.isActive
+                        ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                        : `background: #f9fafc`
+                      : ''
+                  "
+                >
+                  <q-td
+                    v-if="fieldSelected.includes('order')"
+                    class="text-center"
+                    style="width: 5%"
+                  >
+                    {{
+                      $q.screen.xs
+                        ? props.rowIndex + 1
+                        : (propertyPage - 1) * propertyPageSize +
+                          props.rowIndex +
+                          1
+                    }}
+                  </q-td>
+                  <q-td v-if="fieldSelected.includes('name')">
+                    <section class="row items-center no-wrap">
+                      <q-avatar
+                        class="q-mr-sm"
+                        size="md"
+                        style="
+                          color: var(--blue-6);
+                          background: hsla(var(--blue-6-hsl) / 0.1);
+                        "
+                      >
+                        <q-icon name="mdi-tag-text-outline" />
+
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 8px;
+                            min-height: 8px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
+                      </q-avatar>
+                      {{
+                        $i18n.locale === 'eng'
+                          ? props.row.nameEN
+                          : props.row.name
+                      }}
+                    </section>
+                  </q-td>
+
+                  <q-td
+                    style="width: 20%"
+                    v-if="fieldSelected.includes('type')"
+                    class="text-left"
+                  >
+                    <q-avatar
+                      size="sm"
+                      class="q-mr-xs"
+                      :style="`background-color: hsla(${
+                        typeOption[
+                          props.row.type.type as keyof typeof typeOption
+                        ].color
+                      }/0.2)`"
+                    >
+                      <q-icon
+                        size="20px"
+                        :name="
+                          typeOption[
+                            props.row.type.type as keyof typeof typeOption
+                          ].icon
+                        "
+                        :style="`color: hsl(${
+                          typeOption[
+                            props.row.type.type as keyof typeof typeOption
+                          ].color
+                        })`"
+                      />
+                    </q-avatar>
+                    {{
+                      typeOption[props.row.type.type as keyof typeof typeOption]
+                        .label
+                    }}
+                  </q-td>
+                  <q-td style="width: 20%" class="text-right">
+                    <q-btn
+                      icon="mdi-eye-outline"
+                      :id="`btn-eye-${props.row.name}`"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('view');
+                        }
+                      "
+                    />
+                    <KebabAction
+                      :id-name="props.row.name"
+                      :status="props.row.status"
+                      @view="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('view');
+                        }
+                      "
+                      @edit="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('edit');
+                        }
+                      "
+                      @delete="
+                        () => {
+                          deleteProperty(props.row.id);
+                        }
+                      "
+                      @change-status="
+                        () => {
+                          triggerChangeStatus(props.row);
+                        }
+                      "
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+
+              <template v-slot:item="props">
+                <section class="col-12 col-md-4 column">
+                  <div
+                    :class="{
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    class="surface-1 rounded bordered row no-wrap col"
+                    style="overflow: hidden"
+                  >
+                    <div
+                      class="col-md-2 col-3 flex items-center justify-center"
+                      style="
+                        color: var(--blue-6);
+                        background: hsla(var(--blue-6-hsl) / 0.1);
+                      "
+                    >
+                      <q-icon name="mdi-tag-text-outline" size="md" />
+                    </div>
+                    <article class="row q-pa-sm q-gutter-y-sm col">
+                      <div
+                        v-if="fieldSelected.includes('name')"
+                        class="text-weight-bold col-12 ellipsis-2-lines"
+                        :class="{
+                          'app-text-muted': props.row.status === 'INACTIVE',
+                        }"
+                      >
+                        {{
+                          $i18n.locale === 'eng'
+                            ? props.row.nameEN
+                            : props.row.name
+                        }}
+                        <q-tooltip>
+                          {{
+                            $i18n.locale === 'eng'
+                              ? props.row.nameEN
+                              : props.row.name
+                          }}
+                        </q-tooltip>
+                      </div>
+                      <div
+                        v-if="fieldSelected.includes('type')"
+                        class="self-end"
+                      >
+                        <q-avatar
+                          size="xs"
+                          class="q-mr-xs"
+                          :style="`background-color: hsla(${
+                            typeOption[
+                              props.row.type.type as keyof typeof typeOption
+                            ].color
+                          }/0.2)`"
+                        >
+                          <q-icon
+                            size="16px"
+                            :name="
+                              typeOption[
+                                props.row.type.type as keyof typeof typeOption
+                              ].icon
+                            "
+                            :style="`color: hsl(${
+                              typeOption[
+                                props.row.type.type as keyof typeof typeOption
+                              ].color
+                            })`"
+                          />
+                        </q-avatar>
+                        {{
+                          typeOption[
+                            props.row.type.type as keyof typeof typeOption
+                          ].label
+                        }}
+                      </div>
+                    </article>
+                    <nav class="q-pa-sm row items-center self-start">
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('view');
+                          }
+                        "
+                      />
+                      <KebabAction
+                        :id-name="props.row.id"
+                        :status="props.row.status"
+                        @view="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('view');
+                          }
+                        "
+                        @edit="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('edit');
+                          }
+                        "
+                        @delete="
+                          () => {
+                            deleteProperty(props.row.id);
+                          }
+                        "
+                        @change-status="
+                          () => {
+                            triggerChangeStatus(props.row);
+                          }
+                        "
+                      />
+                    </nav>
+                  </div>
+                </section>
+              </template>
+            </q-table>
+
+            <template v-slot:loading>
+              <div
+                v-if="$q.screen.lt.sm && propertyPage !== propertyPageMax"
+                class="row justify-center"
+              >
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
+            </template>
+          </q-infinite-scroll>
+        </article>
+
+        <!-- SEC: footer content -->
+        <footer
+          class="row justify-between items-center q-px-md q-py-sm surface-2"
+          v-if="propertyPageMax > 0 && $q.screen.gt.xs"
+        >
+          <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><PaginationPageSize v-model="propertyPageSize" /></div>
+            </div>
+          </div>
+          <div class="col-4 row justify-center app-text-muted">
+            {{
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: propertyData.length,
+                    total: pageState.inputSearch
+                      ? propertyData.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: propertyData.length,
+                    total: pageState.inputSearch
+                      ? propertyData.length
+                      : pageState.total,
+                  })
+            }}
+          </div>
+          <nav class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="propertyPage"
+              v-model:max-page="propertyPageMax"
+              :fetch-data="() => fetchPropertyList()"
+            />
+          </nav>
+        </footer>
+      </div>
+    </section>
+  </div>
+
+  <PropertyDialog
+    @change-status="triggerChangeStatus"
+    @drawer-delete="() => deleteProperty()"
+    @drawer-edit="pageState.isDrawerEdit = true"
+    @drawer-undo="() => undo()"
+    @close="() => resetForm()"
+    @submit="() => submit()"
+    :readonly="!pageState.isDrawerEdit"
+    :isEdit="pageState.isDrawerEdit"
+    v-model="pageState.addModal"
+    v-model:property-data="formProperty"
+    v-model:drawer-model="pageState.viewDrawer"
+  />
+</template>
+
+<style scoped>
+.status-active {
+  --_branch-status-color: var(--green-6-hsl);
+}
+
+.status-inactive {
+  --_branch-status-color: var(--stone-5-hsl);
+  --_branch-badge-bg: var(--stone-5-hsl);
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
+</style>

src/pages/04_property-managment/PropertyDialog.vue

@@ -0,0 +1,252 @@
+<script lang="ts" setup>
+import SideMenu from 'src/components/SideMenu.vue';
+import DrawerInfo from 'src/components/DrawerInfo.vue';
+import FormProperty from 'src/components/04_property-management/FormProperty.vue';
+import {
+  UndoButton,
+  SaveButton,
+  EditButton,
+  DeleteButton,
+} from 'src/components/button';
+import { Property } from 'src/stores/property/types';
+import { DialogFormContainer, DialogHeader } from 'src/components/dialog';
+
+const model = defineModel<boolean>({ required: true, default: false });
+const drawerModel = defineModel<boolean>('drawerModel', {
+  required: true,
+  default: false,
+});
+
+const formProperty = defineModel<Property>('propertyData', {
+  required: true,
+  default: {
+    name: '',
+    nameEN: '',
+    type: {},
+  },
+});
+
+withDefaults(
+  defineProps<{
+    readonly?: boolean;
+    isEdit?: boolean;
+  }>(),
+  { readonly: false, isEdit: false },
+);
+
+defineEmits<{
+  (e: 'submit'): void;
+  (e: 'close'): void;
+  (e: 'changeStatus'): void;
+  (e: 'drawerUndo'): void;
+  (e: 'drawerEdit'): void;
+  (e: 'drawerDelete'): void;
+}>();
+</script>
+<template>
+  <DialogFormContainer
+    width="65vw"
+    height="500px"
+    v-model="model"
+    @submit="() => $emit('submit')"
+  >
+    <template #header>
+      <DialogHeader
+        :title="$t(`general.add`, { text: $t('property.title') })"
+      />
+    </template>
+
+    <section
+      class="col surface-1 rounded bordered scroll row relative-position"
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <div
+        class="rounded row"
+        style="position: absolute; z-index: 999; right: 0; top: 0"
+        :class="{
+          'q-py-md q-px-lg': $q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div class="surface-1 row rounded">
+          <SaveButton id="btn-info-basic-save" icon-only type="submit" />
+        </div>
+      </div>
+
+      <section
+        class="col"
+        style="height: 100%; max-height: 100; overflow-y: auto"
+        v-if="$q.screen.gt.sm"
+      >
+        <div class="q-py-md q-pl-md q-pr-sm">
+          <SideMenu
+            :menu="[
+              {
+                name: $t('general.information', {
+                  msg: $t('property.title'),
+                }),
+                anchor: 'form-property-dialog',
+              },
+            ]"
+            background="transparent"
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#flow-form-dialog"
+          ></SideMenu>
+        </div>
+      </section>
+
+      <section
+        class="col-12 col-md-10"
+        :class="{
+          'q-py-md q-pr-md ': $q.screen.gt.sm,
+          'q-pa-sm': !$q.screen.gt.sm,
+        }"
+        style="height: 100%; max-height: 100%; overflow-y: auto"
+        id="form-property-dialog"
+      >
+        <FormProperty
+          v-model:name="formProperty.name"
+          v-model:name-en="formProperty.nameEN"
+          v-model:type="formProperty.type"
+          v-model:registered-branch-id="formProperty.registeredBranchId"
+          v-model:status="formProperty.status"
+        />
+      </section>
+    </section>
+  </DialogFormContainer>
+
+  <DrawerInfo
+    bg-on
+    hide-action
+    :is-edit="isEdit"
+    :title="propertyData.name"
+    v-model:drawerOpen="drawerModel"
+    :submit="() => $emit('submit')"
+    :close="() => $emit('close')"
+  >
+    <div class="col column full-height">
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        id="drawer-user-form"
+        :class="{
+          'q-px-lg q-py-md': $q.screen.gt.sm,
+          'q-px-md q-py-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div
+          class="col surface-1 full-height rounded bordered scroll row relative-position"
+        >
+          <div
+            class="rounded row"
+            :class="{
+              'q-py-md q-px-lg': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            style="position: absolute; z-index: 999; top: 0; right: 0"
+          >
+            <div
+              v-if="propertyData.status !== 'INACTIVE'"
+              class="surface-1 row rounded"
+            >
+              <UndoButton
+                v-if="isEdit"
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    $emit('drawerUndo');
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="isEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!isEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    $emit('drawerEdit');
+                    // infoDrawerEdit = true;
+                    // isImageEdit = true;
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!isEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="
+                  () => {
+                    $emit('drawerDelete');
+                    // onDelete(currentUser.id);
+                  }
+                "
+                type="button"
+              />
+            </div>
+          </div>
+
+          <section
+            class="col"
+            style="height: 100%; max-height: 100; overflow-y: auto"
+            v-if="$q.screen.gt.sm"
+          >
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="[
+                  {
+                    name: $t('general.information', {
+                      msg: $t('property.title'),
+                    }),
+                    anchor: 'form-property-dialog',
+                  },
+                ]"
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#flow-form-dialog"
+              ></SideMenu>
+            </div>
+          </section>
+
+          <section
+            class="col-12 col-md-10"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            style="height: 100%; max-height: 100%; overflow-y: auto"
+            id="flow-form-drawer"
+          >
+            <FormProperty
+              onDrawer
+              :readonly="!isEdit"
+              v-model:name="formProperty.name"
+              v-model:name-en="formProperty.nameEN"
+              v-model:type="formProperty.type"
+              v-model:registered-branch-id="formProperty.registeredBranchId"
+              v-model:status="formProperty.status"
+              @change-status="$emit('changeStatus')"
+            />
+          </section>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
+</template>
+<style scoped></style>

src/pages/05_quotation/QuotationForm.vue

@@ -1756,7 +1756,7 @@ function covertToNode() {
               </div>
             </q-expansion-item>
             <q-expansion-item
-              v-if="view === View.Accepted"
+              v-if="false"
               for="item-up"
               id="item-up"
               dense
@@ -2155,7 +2155,7 @@ function covertToNode() {
 
           <template
             v-if="
-              (view === View.Quotation || view === View.Payment) &&
+              (view === View.Quotation || view === View.Accepted) &&
               quotationFormData.id
             "
           >
@@ -2186,7 +2186,6 @@ function covertToNode() {
               <div class="surface-1 q-pa-md row" style="gap: var(--size-2)">
                 <SelectInput
                   class="q-mr-xl col-md-3 col-12"
-                  incremental
                   v-model="templateForm"
                   id="quotation-branch"
                   :option="templateFormOption"

src/pages/05_quotation/QuotationFormProductSelect.vue

@@ -773,7 +773,12 @@ watch(
                                   :key="att"
                                   class="bordered q-py-xs q-px-sm rounded"
                                 >
-                                  {{ optionStore.mapOption(att.fieldName) }}
+                                  {{
+                                    optionStore.mapOption(
+                                      att.fieldName,
+                                      'propertiesField',
+                                    )
+                                  }}
                                 </div>
                               </div>
                             </template>

src/pages/08_request-list/FormCancel.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+const reason = defineModel<string>('reason');
+</script>
+<template>
+  <article>
+    <q-input
+      dense
+      outlined
+      type="textarea"
+      v-model="reason"
+      hide-bottom-space
+      class="full-height"
+      :label="
+        $t('general.remark', { msg: $t('requestList.status.RejectCancel') })
+      "
+      :rules="[(val) => !!val || $t('form.error.required')]"
+    />
+  </article>
+</template>
+
+<style scoped></style>

src/pages/08_request-list/MainPage.vue

@@ -11,6 +11,9 @@ import NoData from 'src/components/NoData.vue';
 import TableRequestList from './TableRequestList.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
+import DialogHeader from 'src/components/dialog/DialogHeader.vue';
+import FormCancel from './FormCancel.vue';
 
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
@@ -19,6 +22,7 @@ import useFlowStore from 'src/stores/flow';
 import { useRequestList } from 'src/stores/request-list';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
 import { dialogWarningClose } from 'src/stores/utils';
+import { CancelButton, SaveButton } from 'src/components/button';
 
 const $q = useQuasar();
 const navigatorStore = useNavigator();
@@ -37,6 +41,9 @@ const pageState = reactive({
   fieldSelected: [...column.map((v) => v.name)],
   gridView: false,
   total: 0,
+  rejectCancelDialog: false,
+  rejectCancelReason: '',
+  requestId: '',
 });
 
 const fieldSelectedOption = computed(() => {
@@ -93,6 +100,23 @@ function triggerView(opts: { requestData: RequestData }) {
   window.open(url.toString(), '_blank');
 }
 
+async function submitRejectCancel() {
+  const res = await requestListStore.rejectRequest(pageState.requestId, {
+    reason: pageState.rejectCancelReason,
+  });
+
+  if (res) {
+    const indexRequest = data.value?.findIndex(
+      (v) => v.id === pageState.requestId,
+    );
+
+    data.value[indexRequest].rejectRequestCancel = true;
+    data.value[indexRequest].rejectRequestCancelReason =
+      pageState.rejectCancelReason;
+    pageState.rejectCancelDialog = false;
+  }
+}
+
 onMounted(async () => {
   pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'requestList.title';
@@ -357,6 +381,13 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () => {
               :visible-columns="pageState.fieldSelected"
               @view="(data) => triggerView({ requestData: data })"
               @delete="(data) => triggerCancel(data.id)"
+              @reject-cancel="
+                (data) => {
+                  pageState.rejectCancelDialog = true;
+                  pageState.rejectCancelReason = '';
+                  pageState.requestId = data.id;
+                }
+              "
             />
             <template v-slot:loading>
               <div
@@ -409,6 +440,36 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () => {
         </footer>
       </div>
     </section>
+
+    <DialogFormContainer
+      width="60vw"
+      height="40vh"
+      v-model="pageState.rejectCancelDialog"
+      @submit="() => submitRejectCancel()"
+    >
+      <template #header>
+        <DialogHeader :title="$t('requestList.status.work.RejectCancel')" />
+      </template>
+
+      <section class="col q-pa-md scroll">
+        <FormCancel v-model:reason="pageState.rejectCancelReason" />
+      </section>
+
+      <template #footer>
+        <CancelButton
+          class="q-ml-auto"
+          outlined
+          @click="() => (pageState.rejectCancelDialog = false)"
+        />
+        <SaveButton
+          label="ยืนยัน"
+          class="q-ml-sm"
+          icon="mdi-check"
+          solid
+          type="submit"
+        />
+      </template>
+    </DialogFormContainer>
   </div>
 </template>
 <style></style>

src/pages/08_request-list/ProductExpansion.vue

@@ -20,6 +20,8 @@ const props = defineProps<{
   imgUrl?: string;
   requestCancel?: boolean;
   requestCancelReason?: string;
+  rejectRequestCancel?: boolean;
+  rejectRequestCancelReason?: string;
   installmentInfo?: {
     total: number;
     paid?: number;
@@ -37,7 +39,9 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
     case RequestWorkStatus.Ready:
     case RequestWorkStatus.Waiting:
     case RequestWorkStatus.InProgress:
-      return [RequestWorkStatus.Canceled];
+      return props.requestCancel && !props.rejectRequestCancel
+        ? [RequestWorkStatus.Canceled, RequestWorkStatus.RejectCancel]
+        : [RequestWorkStatus.Canceled];
     case RequestWorkStatus.Validate:
     case RequestWorkStatus.Ended:
     case RequestWorkStatus.Completed:
@@ -45,12 +49,15 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
       return [];
     default:
       if (props.readonly) return [];
+      const statuses = [
+        RequestWorkStatus.Ready,
+        RequestWorkStatus.Ended,
+        RequestWorkStatus.Canceled,
+      ];
       if (props.orderAble) {
-        return [
+        return props.requestCancel && !props.rejectRequestCancel
-          RequestWorkStatus.Ready,
+          ? [...statuses, RequestWorkStatus.RejectCancel]
-          RequestWorkStatus.Ended,
+          : statuses;
-          RequestWorkStatus.Canceled,
-        ];
       } else {
         return [RequestWorkStatus.Ended, RequestWorkStatus.Canceled];
       }
@@ -101,13 +108,21 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
           </div>
           <BadgeComponent
             v-if="requestCancel && !cancel"
-            :hsla-color="'--red-5-hsl'"
+            :hsla-color="rejectRequestCancel ? '--blue-6-hsl' : '--red-5-hsl'"
             class="q-ml-sm"
-            :title="$t(`requestList.status.CancelRequested`) || '-'"
+            :title="
+              rejectRequestCancel
+                ? $t('requestList.status.RejectedCancel') || '-'
+                : $t(`requestList.status.CancelRequested`) || '-'
+            "
           >
             <template #append>
               <q-tooltip>
-                {{ requestCancelReason || $t('general.noReason') }}
+                {{
+                  rejectRequestCancel
+                    ? rejectRequestCancelReason || $t('general.noReason')
+                    : requestCancelReason || $t('general.noReason')
+                }}
               </q-tooltip>
             </template>
           </BadgeComponent>
@@ -171,10 +186,11 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
                   clickable
                   v-close-popup
                   class="row items-center"
+                  :class="{ 'bordered-t': value === 'RejectCancel' }"
                   @click="
                     $emit('changeStatus', {
                       step: status,
-                      requestWorkStatus: value,
+                      requestWorkStatus: value as RequestWorkStatus,
                     })
                   "
                 >

src/pages/08_request-list/PropertiesExpansion.vue

@@ -164,12 +164,15 @@ defineEmits<{
           class="row items-center q-pb-sm"
         >
           <article class="col-5">
-            {{ i + 1 }} {{ optionStore.mapOption(prop.fieldName) }}
+            {{ i + 1 }}
+            {{ optionStore.mapOption(prop.fieldName, 'propertiesField') }}
           </article>
           <PropertiesToInput
             :readonly="!state.isEdit || readonlyField.includes(prop.fieldName)"
             :prop="prop"
-            :placeholder="optionStore.mapOption(prop.fieldName)"
+            :placeholder="
+              optionStore.mapOption(prop.fieldName, 'propertiesField')
+            "
             v-model="formData[prop.fieldName]"
           />
         </span>

src/pages/08_request-list/RequestAction.vue

@@ -33,7 +33,7 @@ enum Step {
   Configure = 2,
 }
 
-const open = defineModel<boolean>('selected', { default: false });
+const open = defineModel<boolean>({ default: false });
 const step = ref<Step>(Step.Product);
 const selected = ref<{ _work: RequestWork }[]>([]);
 const form = reactive({

src/pages/08_request-list/RequestListView.vue

@@ -11,10 +11,13 @@ import PropertiesExpansion from './PropertiesExpansion.vue';
 import FormGroupHead from './FormGroupHead.vue';
 import AvatarGroup from 'src/components/shared/AvatarGroup.vue';
 import { StateButton } from 'components/button';
-import { CancelButton, MainButton } from 'components/button';
+import { CancelButton, MainButton, SaveButton } from 'components/button';
 import DutyExpansion from './DutyExpansion.vue';
 import MessengerExpansion from './MessengerExpansion.vue';
 import RequestAction from './RequestAction.vue';
+import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
+import DialogHeader from 'src/components/dialog/DialogHeader.vue';
+import FormCancel from './FormCancel.vue';
 
 // NOTE: Store
 import {
@@ -104,6 +107,9 @@ const pageState = reactive({
   hideMetaData: false,
   currentStep: 1,
   requestActionDialog: false,
+  rejectCancelDialog: false,
+  rejectCancelReason: '',
+  requestWorkId: '',
 });
 
 // NOTE: Function
@@ -173,6 +179,14 @@ async function triggerChangeStatusWork(step: Step, responsibleUserId?: string) {
     });
     return;
   }
+
+  if (step.workStatus === 'RejectCancel') {
+    pageState.rejectCancelDialog = true;
+    pageState.rejectCancelReason = '';
+    pageState.requestWorkId = step.requestWorkId;
+    return;
+  }
+
   const res = await requestListStore.editStatusRequestWork(step);
   if (res) {
     const indexWork = workList.value?.findIndex(
@@ -400,6 +414,30 @@ async function submitRequestAction(data: {
     pageState.requestActionDialog = false;
   }
 }
+
+async function submitRejectCancel() {
+  const current = route.params['requestListId'];
+  if (typeof current !== 'string') return;
+
+  const res = await requestListStore.rejectRequestWork(
+    current,
+    pageState.requestWorkId,
+    {
+      reason: pageState.rejectCancelReason,
+    },
+  );
+
+  if (res) {
+    const indexWork = workList.value?.findIndex(
+      (v) => v.id === pageState.requestWorkId,
+    );
+
+    workList.value[indexWork].rejectRequestCancel = true;
+    workList.value[indexWork].rejectRequestCancelReason =
+      pageState.rejectCancelReason;
+    pageState.rejectCancelDialog = false;
+  }
+}
 </script>
 <template>
   <div class="column surface-0 fullscreen" v-if="data">
@@ -599,8 +637,8 @@ async function submitRequestAction(data: {
                       data.quotation?.invoice?.map((i: Invoice) => i.code)
                     "
                     @label-click="
-                      (_: string, i: number) => {
+                      (value: string, index: number | null) => {
-                        if (!data) return;
+                        if (!data || index === null) return;
 
                         data.quotation.isDebitNote
                           ? goToDebitNote({
@@ -609,8 +647,8 @@ async function submitRequestAction(data: {
                             })
                           : goToQuotation(data.quotation, {
                               tab: 'invoice',
-                              id: data.quotation.invoice?.[i]?.id,
+                              id: data.quotation.id,
-                              amount: data.quotation.invoice?.[i]?.amount,
+                              amount: data.quotation.invoice?.[index]?.amount,
                             });
                       }
                     "
@@ -733,6 +771,8 @@ async function submitRequestAction(data: {
             <ProductExpansion
               :request-cancel="value.customerRequestCancel"
               :request-cancel-reason="value.customerRequestCancelReason"
+              :reject-request-cancel="value.rejectRequestCancel"
+              :reject-request-cancel-reason="value.rejectRequestCancelReason"
               :cancel="data.requestDataStatus === RequestDataStatus.Canceled"
               :readonly="
                 data.requestDataStatus === RequestDataStatus.Canceled ||
@@ -929,5 +969,35 @@ async function submitRequestAction(data: {
     :responsible-district-id="data?.quotation.customerBranch.districtId || ''"
     @submit="submitRequestAction"
   />
+
+  <DialogFormContainer
+    width="60vw"
+    height="40vh"
+    v-model="pageState.rejectCancelDialog"
+    @submit="() => submitRejectCancel()"
+  >
+    <template #header>
+      <DialogHeader :title="$t('requestList.status.work.RejectCancel')" />
+    </template>
+
+    <section class="col q-pa-md scroll">
+      <FormCancel v-model:reason="pageState.rejectCancelReason" />
+    </section>
+
+    <template #footer>
+      <CancelButton
+        class="q-ml-auto"
+        outlined
+        @click="() => (pageState.rejectCancelDialog = false)"
+      />
+      <SaveButton
+        label="ยืนยัน"
+        class="q-ml-sm"
+        icon="mdi-check"
+        solid
+        type="submit"
+      />
+    </template>
+  </DialogFormContainer>
 </template>
 <style scoped></style>

src/pages/08_request-list/TableRequestList.vue

@@ -32,6 +32,7 @@ const props = withDefaults(
 defineEmits<{
   (e: 'view', data: RequestData): void;
   (e: 'delete', data: RequestData): void;
+  (e: 'rejectCancel', data: RequestData): void;
 }>();
 
 function responsiblePerson(quotation: QuotationFull): CreatedBy[] | undefined {
@@ -188,15 +189,24 @@ function getEmployeeName(
               props.row.customerRequestCancel &&
               props.row.requestDataStatus !== RequestDataStatus.Canceled
             "
-            :hsla-color="'--red-5-hsl'"
+            :hsla-color="
+              props.row.rejectRequestCancel ? '--blue-6-hsl' : '--red-5-hsl'
+            "
+            :title="
+              props.row.rejectRequestCancel
+                ? $t('requestList.status.RejectedCancel') || '-'
+                : $t(`requestList.status.CancelRequested`) || '-'
+            "
             class="q-ml-sm"
-            :title="$t(`requestList.status.CancelRequested`) || '-'"
           >
             <template #append>
               <q-tooltip>
                 {{
-                  props.row.customerRequestCancelReason ||
+                  props.row.rejectRequestCancel
-                  $t('general.noReason')
+                    ? props.row.rejectRequestCancelReason ||
+                      $t('general.noReason')
+                    : props.row.customerRequestCancelReason ||
+                      $t('general.noReason')
                 }}
               </q-tooltip>
             </template>
@@ -220,11 +230,15 @@ function getEmployeeName(
             hide-view
             hide-delete
             use-cancel
+            :use-reject-cancel="
+              props.row.customerRequestCancel && !props.row.rejectRequestCancel
+            "
             :disable-cancel="
               props.row.requestDataStatus === RequestDataStatus.Canceled ||
               props.row.requestDataStatus === RequestDataStatus.Completed
             "
             @cancel="$emit('delete', props.row)"
+            @reject-cancel="$emit('rejectCancel', props.row)"
           />
         </q-td>
       </q-tr>
@@ -242,6 +256,10 @@ function getEmployeeName(
           hide-kebab-edit
           hide-kebab-delete
           use-cancel
+          class="full-height"
+          :use-reject-cancel="
+            props.row.customerRequestCancel && !props.row.rejectRequestCancel
+          "
           :disable-cancel="
             props.row.requestDataStatus === RequestDataStatus.Canceled ||
             props.row.requestDataStatus === RequestDataStatus.Completed
@@ -285,6 +303,7 @@ function getEmployeeName(
           ]"
           @view="$emit('view', props.row)"
           @cancel="$emit('delete', props.row)"
+          @reject-cancel="$emit('rejectCancel', props.row)"
         >
           <template v-slot:responsiblePerson="{ props: subProps }">
             <div class="col-4 app-text-muted q-pr-sm">
@@ -312,6 +331,35 @@ function getEmployeeName(
               <span v-else>-</span>
             </div>
           </template>
+
+          <template #badge>
+            <BadgeComponent
+              v-if="
+                props.row.customerRequestCancel &&
+                props.row.requestDataStatus !== RequestDataStatus.Canceled
+              "
+              :hsla-color="
+                props.row.rejectRequestCancel ? '--blue-6-hsl' : '--red-5-hsl'
+              "
+              :title="
+                props.row.rejectRequestCancel
+                  ? $t('requestList.status.RejectedCancel') || '-'
+                  : $t(`requestList.status.CancelRequested`) || '-'
+              "
+            >
+              <template #append>
+                <q-tooltip>
+                  {{
+                    props.row.rejectRequestCancel
+                      ? props.row.rejectRequestCancelReason ||
+                        $t('general.noReason')
+                      : props.row.customerRequestCancelReason ||
+                        $t('general.noReason')
+                  }}
+                </q-tooltip>
+              </template>
+            </BadgeComponent>
+          </template>
         </QuotationCard>
       </div>
     </template>

src/pages/09_task-order/MainPage.vue

@@ -4,6 +4,7 @@ import { computed, onMounted, reactive, watch, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -29,6 +30,7 @@ import { PaginationResult } from 'src/types';
 
 const { t } = useI18n();
 const $q = useQuasar();
+const route = useRoute();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const taskOrderStore = useTaskOrderStore();
@@ -143,6 +145,10 @@ onMounted(async () => {
   navigatorStore.current.path = [{ text: 'taskOrder.caption', i18n: true }];
   fetchTaskOrderList();
   taskOrderStore.getTaskOrderStats();
+
+  if (route.query['tab'] && typeof route.query['tab'] === 'string') {
+    pageState.currentTab = route.query['tab'];
+  }
 });
 
 watch(

src/pages/12_debit-note/TableDebitNote.vue

@@ -59,7 +59,7 @@ const visible = computed(() =>
       } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
     >
       <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
-        <q-td v-for="col in visible" :align="col.align">
+        <q-td v-for="col in visible" :align="col.align" :key="col.name">
           <!-- NOTE: custom column will starts with # -->
           <template v-if="!col.name.startsWith('#')">
             <span v-if="col.name !== 'quotationPayment'">

src/pages/12_debit-note/constants.ts

@@ -69,7 +69,7 @@ export const columns = [
     name: 'creditNoteValue',
     align: 'center',
     label: 'debitNote.label.value',
-    field: (data: DebitNote) => formatNumberDecimal(data.totalPrice),
+    field: (data: DebitNote) => formatNumberDecimal(data.finalPrice),
   },
   {
     name: '#action',

src/pages/14_report/MainPage.vue

@@ -22,6 +22,7 @@ import {
   colProfit,
   colProfitByMoth,
   colProfitByYear,
+  colProfitDebtReport,
 } from './constants';
 import useFlowStore from 'src/stores/flow';
 import { useReportStore } from 'src/stores/report';
@@ -29,6 +30,7 @@ import BadgeComponent from 'src/components/BadgeComponent.vue';
 import Expansion from 'src/components/14_report/Expansion.vue';
 import { SaveButton } from 'src/components/button';
 import { ReportProfit } from 'src/stores/report/types';
+import { dateFormatJS } from 'src/utils/datetime';
 
 // NOTE: Variable
 const navigatorStore = useNavigator();
@@ -46,8 +48,16 @@ const {
   dataReportSale,
   dataReportProduct,
   dataReportProfit,
+  detaReportDept,
 } = storeToRefs(reportStore);
 
+const endDate = new Date();
+const startDate = new Date(new Date().setFullYear(endDate.getFullYear() - 1));
+
+const state = reactive({
+  date: [startDate, endDate],
+});
+
 const userRoles = computed(() => getRole() || []);
 
 const combinedProfitYear = computed(() => {
@@ -72,24 +82,48 @@ const combinedProfitYear = computed(() => {
 });
 
 async function fetchReportQuotation() {
-  dataReportQuotation.value = (await reportStore.getReportQuotation()) || [];
+  dataReportQuotation.value =
+    (await reportStore.getReportQuotation({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 async function fetchReportInvoice() {
-  dataReportInvoice.value = (await reportStore.getReportInvoice()) || [];
+  dataReportInvoice.value =
+    (await reportStore.getReportInvoice({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 
 async function fetchReportReceipt() {
-  dataReportReceipt.value = (await reportStore.getReportReceipt()) || [];
+  dataReportReceipt.value =
+    (await reportStore.getReportReceipt({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 async function fetchReportSale() {
-  dataReportSale.value = (await reportStore.getReportSale()) || undefined;
+  dataReportSale.value =
+    (await reportStore.getReportSale({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || undefined;
 }
 async function fetchReportProduct() {
-  dataReportProduct.value = (await reportStore.getReportProduct()) || [];
+  dataReportProduct.value =
+    (await reportStore.getReportProduct({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || [];
 }
 
 async function fetchReportProfit() {
-  dataReportProfit.value = (await reportStore.getReportProfit()) || undefined;
+  dataReportProfit.value =
+    (await reportStore.getReportProfit({
+      startDate: state.date[0],
+      endDate: state.date[1],
+    })) || undefined;
   dataReportProfitByYears.value = dataReportProfit.value?.dataset || [];
 }
 
@@ -98,6 +132,10 @@ async function fetchReportProfitByYears(years: number) {
   dataReportProfitByYears.value = res?.dataset || [];
 }
 
+async function fetchReportDept() {
+  detaReportDept.value = (await reportStore.getReportDept()) || [];
+}
+
 onMounted(async () => {
   navigatorStore.current.title = 'report.title';
   navigatorStore.current.path = [{ text: '' }];
@@ -146,6 +184,10 @@ async function fetchReportTab() {
       await fetchReportProfit();
       break;
     }
+    case ViewMode.DebtReport: {
+      await fetchReportDept();
+      break;
+    }
   }
 }
 
@@ -153,7 +195,7 @@ onMounted(async () => {
   await fetchReportTab();
 });
 
-watch([() => pageState.currentTab], async () => {
+watch([() => pageState.currentTab, () => state.date], async () => {
   await fetchReportTab();
 });
 
@@ -164,9 +206,50 @@ watch([() => pastYears.value], async () => {
 
 <template>
   <div class="column full-height no-wrap">
+    <div class="row q-mb-sm">
+      <VueDatePicker
+        utc
+        range
+        teleport
+        auto-apply
+        for="select-date-range"
+        class="col-md-3 col"
+        v-model="state.date"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
+      >
+        <template #trigger>
+          <q-input
+            placeholder="DD/MM/YYYY"
+            hide-bottom-space
+            dense
+            outlined
+            for="select-date-range"
+            :model-value="
+              dateFormatJS({ date: state.date[0] }) +
+              '  -  ' +
+              dateFormatJS({ date: state.date[1] })
+            "
+          >
+            <template #prepend>
+              <q-icon name="mdi-calendar-outline" class="app-text-muted" />
+            </template>
+            <q-tooltip>
+              {{
+                dateFormatJS({ date: state.date[0] }) +
+                '  -  ' +
+                dateFormatJS({ date: state.date[1] })
+              }}
+            </q-tooltip>
+          </q-input>
+        </template>
+      </VueDatePicker>
+    </div>
+
     <section class="col surface-1 rounded bordered overflow-hidden">
       <div class="column full-height">
         <!-- SEC: header content -->
+
         <header
           class="row surface-3 justify-between full-width items-center"
           style="z-index: 1"
@@ -222,7 +305,12 @@ watch([() => pastYears.value], async () => {
                       style="margin-left: auto"
                       :icon="'material-symbols:download'"
                       :label="$t('general.download')"
-                      @click.stop="reportStore.downloadReportQuotation()"
+                      @click.stop="
+                        reportStore.downloadReportQuotation({
+                          startDate: state.date[0],
+                          endDate: state.date[1],
+                        })
+                      "
                     />
                   </div>
                 </template>
@@ -263,7 +351,12 @@ watch([() => pastYears.value], async () => {
                       style="margin-left: auto"
                       :icon="'material-symbols:download'"
                       :label="$t('general.download')"
-                      @click.stop="reportStore.downloadReportInvoice()"
+                      @click.stop="
+                        reportStore.downloadReportInvoice({
+                          startDate: state.date[0],
+                          endDate: state.date[1],
+                        })
+                      "
                     />
                   </div>
                 </template>
@@ -303,7 +396,12 @@ watch([() => pastYears.value], async () => {
                       style="margin-left: auto"
                       :icon="'material-symbols:download'"
                       :label="$t('general.download')"
-                      @click.stop="reportStore.downloadReportReceipt()"
+                      @click.stop="
+                        reportStore.downloadReportReceipt({
+                          startDate: state.date[0],
+                          endDate: state.date[1],
+                        })
+                      "
                     />
                   </div>
                 </template>
@@ -345,7 +443,12 @@ watch([() => pastYears.value], async () => {
                     style="margin-left: auto"
                     :icon="'material-symbols:download'"
                     :label="$t('general.download')"
-                    @click.stop="reportStore.downloadReportInvoice()"
+                    @click.stop="
+                      reportStore.downloadReportInvoice({
+                        startDate: state.date[0],
+                        endDate: state.date[1],
+                      })
+                    "
                   />
                 </div>
               </template>
@@ -386,7 +489,12 @@ watch([() => pastYears.value], async () => {
                     style="margin-left: auto"
                     :icon="'material-symbols:download'"
                     :label="$t('general.download')"
-                    @click.stop="reportStore.downloadReportInvoice()"
+                    @click.stop="
+                      reportStore.downloadReportInvoice({
+                        startDate: state.date[0],
+                        endDate: state.date[1],
+                      })
+                    "
                   />
                 </div>
               </template>
@@ -409,7 +517,10 @@ watch([() => pastYears.value], async () => {
                       :icon="'material-symbols:download'"
                       :label="$t('general.download')"
                       @click.stop="
-                        reportStore.downloadReportSale('by-customer')
+                        reportStore.downloadReportSale('by-customer', {
+                          startDate: state.date[0],
+                          endDate: state.date[1],
+                        })
                       "
                     />
                   </div>
@@ -450,7 +561,10 @@ watch([() => pastYears.value], async () => {
                       :icon="'material-symbols:download'"
                       :label="$t('general.download')"
                       @click.stop="
-                        reportStore.downloadReportSale('by-product-group')
+                        reportStore.downloadReportSale('by-product-group', {
+                          startDate: state.date[0],
+                          endDate: state.date[1],
+                        })
                       "
                     />
                   </div>
@@ -482,7 +596,12 @@ watch([() => pastYears.value], async () => {
                       style="margin-left: auto"
                       :icon="'material-symbols:download'"
                       :label="$t('general.download')"
-                      @click.stop="reportStore.downloadReportSale('by-sale')"
+                      @click.stop="
+                        reportStore.downloadReportSale('by-sale', {
+                          startDate: state.date[0],
+                          endDate: state.date[1],
+                        })
+                      "
                     />
                   </div>
                 </template>
@@ -636,6 +755,36 @@ watch([() => pastYears.value], async () => {
               </Expansion>
             </div>
           </template>
+
+          <template v-if="pageState.currentTab === ViewMode.DebtReport">
+            <Expansion default-opened>
+              <template #header>
+                <div class="flex full-width items-center">
+                  {{ $t('report.debtReport.title') }}
+                </div>
+              </template>
+
+              <template #main>
+                <TableReport
+                  :row="
+                    detaReportDept.map((v) => ({
+                      customerName:
+                        v.customerBranch.customer.customerType === 'CORP'
+                          ? $i18n.locale === 'eng'
+                            ? v.customerBranch.registerNameEN
+                            : v.customerBranch.registerName
+                          : $i18n.locale === 'eng'
+                            ? `${v.customerBranch.firstNameEN} ${v.customerBranch.lastNameEN}`
+                            : `${v.customerBranch.firstName} ${v.customerBranch.lastName}`,
+                      unpaid: v.unpaid,
+                      paid: v.paid,
+                    }))
+                  "
+                  :columns="colProfitDebtReport"
+                ></TableReport>
+              </template>
+            </Expansion>
+          </template>
         </article>
       </div>
     </section>

src/pages/14_report/constants.ts

@@ -1,6 +1,6 @@
 import { QTableProps } from 'quasar';
-import { Invoice, Receipt } from 'src/stores/payment/types';
 import {
+  CustomerDept,
   Report,
   ReportProduct,
   ReportQuotation,
@@ -15,6 +15,7 @@ export enum ViewMode {
   Product = 'product',
   Sale = 'sale',
   Profit = 'profit',
+  DebtReport = 'debtReport',
 }
 
 type ColumnsSale = {
@@ -48,6 +49,10 @@ type ColumnsProfixByYear = Omit<ColumnsProfixByMonth, 'moth'> & {
   income: number;
 };
 
+type ColumnsDebt = Omit<CustomerDept, 'customerBranch'> & {
+  customerName: string;
+};
+
 export const colReportQuotation = [
   {
     name: 'code',
@@ -260,10 +265,33 @@ export const colProfitByYear = [
     field: (data: ColumnsProfixByYear) => formatNumberDecimal(data.income, 2),
   },
 ] as const satisfies QTableProps['columns'];
+
+export const colProfitDebtReport = [
+  {
+    name: 'customerName',
+    align: 'left',
+    label: 'report.debtReport.customerName',
+    field: (data: ColumnsDebt) => data.customerName,
+  },
+  {
+    name: 'unpaid',
+    align: 'left',
+    label: 'report.debtReport.unpaid',
+    field: (data: ColumnsDebt) => formatNumberDecimal(data.unpaid, 2),
+  },
+  {
+    name: 'paid',
+    align: 'left',
+    label: 'report.debtReport.paid',
+    field: (data: ColumnsDebt) => formatNumberDecimal(data.paid, 2),
+  },
+] as const satisfies QTableProps['columns'];
+
 export const pageTabs = [
   { label: 'Document', value: ViewMode.Document, by: ['user'] },
   { label: 'Invoice', value: ViewMode.Invoice, by: ['user'] },
   { label: 'Product', value: ViewMode.Product, by: ['user'] },
   { label: 'Sale', value: ViewMode.Sale, by: ['admin'] },
   { label: 'Profit', value: ViewMode.Profit, by: ['admin'] },
+  { label: 'Debt', value: ViewMode.DebtReport, by: ['admin'] },
 ];

src/pages/15_dash-board/MainPage.vue

@@ -97,7 +97,7 @@ watch(
         teleport
         auto-apply
         for="select-date-range"
-        class="col-md-4 col"
+        class="col-md-3 col"
         v-model="state.date"
         :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
@@ -118,6 +118,13 @@ watch(
             <template #prepend>
               <q-icon name="mdi-calendar-outline" class="app-text-muted" />
             </template>
+            <q-tooltip>
+              {{
+                dateFormatJS({ date: state.date[0] }) +
+                '  -  ' +
+                dateFormatJS({ date: state.date[1] })
+              }}
+            </q-tooltip>
           </q-input>
         </template>
       </VueDatePicker>

src/pages/15_dash-board/chart/ChartReceipt.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import VueApexCharts from 'vue3-apexcharts';
+import VueApexCharts, { VueApexChartsComponent } from 'vue3-apexcharts';
 import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { formatNumberDecimal } from 'src/stores/utils';
-const { locale } = useI18n({ useScope: 'global' });
 
 const prop = withDefaults(
   defineProps<{
@@ -22,12 +21,14 @@ const prop = withDefaults(
     categories: () => ['Jan', 'Feb', 'Mar'],
   },
 );
-const chartOptions = computed(() => {
+
+const chartOptions = computed<VueApexChartsComponent['options']>(() => {
   return {
     colors: ['#035aa1', '#ae3ec9', '#ffa94d', '#e64980'],
     chart: {
       fontFamily: 'Noto Sans Thai',
       type: 'line',
+      foreColor: 'var(--foreground)',
       zoom: {
         enabled: false,
       },
@@ -91,7 +92,7 @@ const detail = [
         </q-avatar>
         <DataDisplay
           :label="$t(`dashboard.receipt.${v.label}`)"
-          :value="summary[i].toString()"
+          :value="formatNumberDecimal(summary[i], 2)"
         />
       </span>
     </div>

src/pages/MainPage.vue

@@ -84,12 +84,12 @@ onMounted(() => {
       isax: true,
     },
     {
-      value: '',
+      value: 'task-order',
       icon: 'material-symbols:box',
       color: 'camo',
       title: 'menu.invoice',
       caption: 'menu.invoiceCaption',
-      disabled: true,
+      tab: 'Complete',
     },
     {
       value: '',
@@ -99,23 +99,22 @@ onMounted(() => {
       caption: 'menu.accountingLedgerCaption',
       isax: true,
       disabled: true,
+      hidden: true,
     },
     {
-      value: '',
+      value: 'report',
+      icon: 'mdi-file-document',
+      color: 'indigo',
+      title: 'menu.report',
+      caption: 'menu.reportCaption',
+    },
+    {
+      value: 'dash-board',
       icon: 'isax-element-35',
       color: 'cyan',
       title: 'menu.dashboard',
       caption: 'menu.dashboardCaption',
       isax: true,
-      disabled: true,
-    },
-    {
-      value: '',
-      icon: 'mdi-file-document',
-      color: 'indigo',
-      title: 'menu.report',
-      caption: 'menu.reportCaption',
-      disabled: true,
     },
   ];
 });

src/router/routes.ts

@@ -80,6 +80,11 @@ const routes: RouteRecordRaw[] = [
         name: 'Workflow',
         component: () => import('pages/04_flow-managment/MainPage.vue'),
       },
+      {
+        path: '/property',
+        name: 'Property',
+        component: () => import('pages/04_property-managment/MainPage.vue'),
+      },
       {
         path: '/quotation',
         name: 'Quotation',

src/stores/options/index.ts

@@ -1,8 +1,11 @@
 import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useProperty } from 'src/stores/property';
+import { toCamelCase } from '../utils';
 
 const useOptionStore = defineStore('optionStore', () => {
+  const { getPropertyList } = useProperty();
   const { locale } = useI18n();
 
   const globalOption = ref();
@@ -12,6 +15,36 @@ const useOptionStore = defineStore('optionStore', () => {
     rawOption.value = await fetch('/option/option.json').then((r) => r.json());
 
     _switchOptionLang();
+
+    const res = await getPropertyList({ pageSize: 999, activeOnly: true });
+    const targetOptions = globalOption.value?.propertiesField ?? [];
+
+    if (!res) return;
+
+    const propList = res.result.map((v) => {
+      return {
+        label: locale.value === 'eng' ? v.nameEN : v.name,
+        value: toCamelCase(v.nameEN),
+        type: v.type.type,
+      };
+    });
+
+    globalOption.value.propertiesField = [...targetOptions];
+
+    const existingValues = new Set(
+      globalOption.value.propertiesField.map(
+        (item: { value: string }) => item.value,
+      ),
+    );
+    const newProps = propList.filter((prop) => !existingValues.has(prop.value));
+
+    if (newProps) {
+      globalOption.value.propertiesField.splice(
+        globalOption.value.propertiesField.length - 4,
+        0,
+        ...newProps,
+      );
+    }
   })();
 
   watch(locale, _switchOptionLang);

src/stores/property/index.ts

@@ -0,0 +1,71 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { api } from 'src/boot/axios';
+import { PaginationResult } from 'src/types';
+import { Status } from '../types';
+import { Property } from './types';
+
+export const useProperty = defineStore('property-store', () => {
+  const data = ref<Property[]>([]);
+  const page = ref<number>(1);
+  const pageMax = ref<number>(1);
+  const pageSize = ref<number>(30);
+
+  async function getProperty(id: string) {
+    const res = await api.get<Property[]>(`/property/${id}`);
+
+    if (res.status >= 400) return null;
+
+    return res.data;
+  }
+
+  async function getPropertyList(params?: {
+    page?: number;
+    pageSize?: number;
+    query?: string;
+    status?: Status;
+    activeOnly?: boolean;
+  }) {
+    const res = await api.get<PaginationResult<Property>>('/property', {
+      params,
+    });
+
+    if (res.status >= 400) return null;
+
+    return res.data;
+  }
+
+  async function creatProperty(data: Property) {
+    const res = await api.post<Property>('/property', data);
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  async function editProperty(data: Property) {
+    const res = await api.put<Property>(`/property/${data.id}`, {
+      ...data,
+      id: undefined,
+    });
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  async function deleteProperty(id: string) {
+    const res = await api.delete<Property>(`/property/${id}`);
+    if (res.status >= 400) return null;
+    return res;
+  }
+
+  return {
+    data,
+    page,
+    pageSize,
+    pageMax,
+
+    getProperty,
+    getPropertyList,
+    creatProperty,
+    editProperty,
+    deleteProperty,
+  };
+});

src/stores/property/types.ts

@@ -0,0 +1,10 @@
+import { Status } from '../types';
+
+export type Property = {
+  id?: string;
+  status?: Status;
+  registeredBranchId?: string;
+  name: string;
+  nameEN: string;
+  type: Record<string, any>;
+};

src/stores/report/index.ts

@@ -8,13 +8,35 @@ import {
   ReportQuotation,
   ReportSale,
   ReportProfit,
+  CustomerDept,
 } from './types';
 import { baseUrl } from '../utils';
 import { getToken } from 'src/services/keycloak';
 
 const ENDPOINT = 'report';
 
-async function _download(url: string, filename?: string) {
+async function _download(
+  url: string,
+  filename?: string,
+  params?: {
+    startDate: string | Date;
+    endDate: string | Date;
+  },
+) {
+  if (params) {
+    const queryParams = new URLSearchParams({
+      startDate:
+        params.startDate instanceof Date
+          ? params.startDate.toISOString()
+          : params.startDate,
+      endDate:
+        params.endDate instanceof Date
+          ? params.endDate.toISOString()
+          : params.endDate,
+    }).toString();
+    url += '?' + queryParams;
+  }
+
   const res = await fetch(url, {
     headers: { ['Authorization']: 'Bearer ' + (await getToken()) },
   });
@@ -29,15 +51,24 @@ async function _download(url: string, filename?: string) {
   }
 }
 
-export async function downloadReportQuotation() {
+export async function downloadReportQuotation(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
   await _download(
     baseUrl + '/' + ENDPOINT + '/quotation/download',
     'quotation-report',
+    params,
   );
 }
 
-export async function getReportQuotation() {
+export async function getReportQuotation(params?: {
-  const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`);
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<ReportQuotation[]>(`/${ENDPOINT}/quotation`, {
+    params,
+  });
   if (res.status < 400) {
     res.data;
     return res.data;
@@ -45,30 +76,44 @@ export async function getReportQuotation() {
   return null;
 }
 
-export async function downloadReportInvoice() {
+export async function downloadReportInvoice(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
   await _download(
     baseUrl + '/' + ENDPOINT + '/invoice/download',
     'invoice-report',
+    params,
   );
 }
 
-export async function getReportInvoice() {
+export async function getReportInvoice(params?: {
-  const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`);
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<Report[]>(`/${ENDPOINT}/invoice`, { params });
   if (res.status < 400) {
     return res.data;
   }
   return null;
 }
 
-export async function downloadReportReceipt() {
+export async function downloadReportReceipt(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
   await _download(
     baseUrl + '/' + ENDPOINT + '/receipt/download',
     'receipt-report',
+    params,
   );
 }
 
-export async function getReportReceipt() {
+export async function getReportReceipt(params?: {
-  const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`);
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<Report[]>(`/${ENDPOINT}/receipt`, { params });
   if (res.status < 400) {
     return res.data;
   }
@@ -77,15 +122,23 @@ export async function getReportReceipt() {
 
 export async function downloadReportSale(
   category: 'by-product-group' | 'by-sale' | 'by-customer',
+  params?: {
+    startDate: string | Date;
+    endDate: string | Date;
+  },
 ) {
   await _download(
     baseUrl + '/' + ENDPOINT + '/sale/' + category + '/download',
     'sale-' + category + '-report',
+    params,
   );
 }
 
-export async function getReportSale() {
+export async function getReportSale(params?: {
-  const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`);
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<ReportSale>(`/${ENDPOINT}/sale`, { params });
 
   if (res.status < 400) {
     return res.data;
@@ -93,15 +146,24 @@ export async function getReportSale() {
   return null;
 }
 
-export async function downloadReportProduct() {
+export async function downloadReportProduct(params?: {
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
   await _download(
     baseUrl + '/' + ENDPOINT + '/receipt/download',
     'product-report',
+    params,
   );
 }
 
-export async function getReportProduct() {
+export async function getReportProduct(params?: {
-  const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`);
+  startDate: string | Date;
+  endDate: string | Date;
+}) {
+  const res = await api.get<ReportProduct[]>(`/${ENDPOINT}/product`, {
+    params,
+  });
   if (res.status < 400) {
     return res.data;
   }
@@ -146,6 +208,14 @@ export async function getReportProfit(params?: {
   return null;
 }
 
+export async function getReportDept() {
+  const res = await api.get<CustomerDept[]>(`/${ENDPOINT}/customer-dept`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
 export const useReportStore = defineStore('report-store', () => {
   const dataReportQuotation = ref<ReportQuotation[]>([]);
   const dataReportInvoice = ref<Report[]>([]);
@@ -154,6 +224,7 @@ export const useReportStore = defineStore('report-store', () => {
   const dataReportProduct = ref<ReportProduct[]>([]);
   const dataReportPayment = ref<ReportPayment[]>([]);
   const dataReportProfit = ref<ReportProfit>();
+  const detaReportDept = ref<CustomerDept[]>([]);
 
   return {
     dataReportQuotation,
@@ -163,6 +234,7 @@ export const useReportStore = defineStore('report-store', () => {
     dataReportProduct,
     dataReportPayment,
     dataReportProfit,
+    detaReportDept,
 
     downloadReportQuotation,
     getReportQuotation,
@@ -176,5 +248,6 @@ export const useReportStore = defineStore('report-store', () => {
     getReportProduct,
     getReportPayment,
     getReportProfit,
+    getReportDept,
   };
 });

src/stores/report/types.ts

@@ -63,3 +63,9 @@ export type ReportProfit = {
   expenses: number;
   income: number;
 };
+
+export type CustomerDept = {
+  customerBranch: CustomerBranch;
+  unpaid: number;
+  paid: number;
+};

src/stores/request-list/index.ts

@@ -294,6 +294,37 @@ export const useRequestList = defineStore('request-list', () => {
     return null;
   }
 
+  async function rejectRequest(
+    requestDataId: string,
+    body: { reason: string },
+  ) {
+    const res = await api.post(
+      `/request-data/${requestDataId}/reject-request-cancel`,
+      body,
+    );
+
+    if (res.status < 400) return true;
+
+    return false;
+  }
+
+  async function rejectRequestWork(
+    requestDataId: string,
+    requestWorkId: string,
+    body: {
+      reason: string;
+    },
+  ) {
+    const res = await api.post(
+      `/request-data/${requestDataId}/request-work/${requestWorkId}/reject-request-cancel`,
+      body,
+    );
+
+    if (res.status < 400) return true;
+
+    return false;
+  }
+
   return {
     data,
     page,
@@ -316,6 +347,9 @@ export const useRequestList = defineStore('request-list', () => {
     cancelRequest,
 
     actionRequestWork,
+
+    rejectRequest,
+    rejectRequestWork,
   };
 });
 

src/stores/request-list/types.ts

@@ -11,6 +11,8 @@ export type RequestData = {
 
   customerRequestCancel?: boolean;
   customerRequestCancelReason?: string;
+  rejectRequestCancel?: boolean;
+  rejectRequestCancelReason?: string;
 
   quotation: QuotationFull & {
     debitNoteQuotationId: string;
@@ -43,6 +45,7 @@ export enum RequestWorkStatus {
   Ended = 'Ended',
   Completed = 'Completed',
   Canceled = 'Canceled',
+  RejectCancel = 'RejectCancel',
 }
 
 export enum DocStatus {
@@ -65,6 +68,8 @@ export type RequestWork = {
   processByUserId?: string;
   customerRequestCancel?: boolean;
   customerRequestCancelReason?: string;
+  rejectRequestCancel?: boolean;
+  rejectRequestCancelReason?: string;
 };
 
 export type RowDocument = {