Merge branch 'develop' of github.com:Frappet/hrms-mgt into develop

src/api/02_organizational/api.organization.ts

@@ -37,6 +37,7 @@ export default {
   orgPosExecutive: `${orgPos}/executive`,
   orgPosType: `${orgPos}/type`,
   orgPosTypeSearch: `${orgPos}/position/search`,
+  orgCommandCode: `${organization}/metadata/commandCode`,
 
   orgPosTypeId: (id: string) => `${orgPos}/type/${id}`,
   orgPosLevel: `${orgPos}/level`,
@@ -129,12 +130,10 @@ export default {
   orgProfileEmpTemp: `${orgEmployeePosTemp}/profile`,
   orgSearchProfileEmpTemp: `${orgProfile}-temp/search`,
 
-  
   orgProfileById: (id: string, type: string) =>
     `${orgProfile}${type}/admin/${id}`,
   orgDeceasedProfile: `${orgPos}/profile/search`,
 
-
   orgCheckAvatar: (id: string) => `${orgProfile}/avatar/profileId-admin/${id}`,
   orgCheckAvatarAdmin: (id: string) =>
     `${orgProfile}/avatar/profileid-admin/${id}`,

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_PositionHistory.vue

@@ -4,16 +4,18 @@ import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useGovernmentPosDataStore } from "@/modules/04_registryPerson/stores/Position";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
+import type { DataPositions } from "@/modules/04_registryPerson/interface/response/Position";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const route = useRoute();
+const store = useGovernmentPosDataStore();
 const {
   date2Thai,
   showLoader,
@@ -30,8 +32,8 @@ const salaryId = defineModel<string>("salaryId", { required: true });
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const rows = ref<DataPositions[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const rowsMain = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const rowsMain = ref<DataPositions[]>([]); //รายการข้อมูลประวัติการแก้ไข
 const keyword = ref<string>(""); //คำค้นหา
 const baseColumns = ref<QTableProps["columns"]>([
   {
@@ -58,7 +60,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format(val, row) {
       return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}${row.posNo}`
+        ? `${row.posNoAbb}.${row.posNo}`
         : row.posNo
         ? row.posNo
         : "-";
@@ -133,46 +135,26 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
+    format(v, row) {
+      return row.amount
+        ? `${row.amount.toLocaleString()}${
+            row.amountSpecial !== 0 && row.amountSpecial
+              ? ` (${row.amountSpecial.toLocaleString()})`
+              : ""
+          }`
+        : "-";
+    },
     sort: (a: string, b: string) =>
       a
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  // {
-  //   name: "positionSalaryAmount",
-  //   align: "left",
-  //   label: "เงินประจำตำแหน่ง",
-  //   sortable: true,
-  //   field: "positionSalaryAmount",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  //   format: (v) => Number(v).toLocaleString(),
-  //   sort: (a: string, b: string) =>
-  //     a
-  //       .toString()
-  //       .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  // },
-  // {
-  //   name: "mouthSalaryAmount",
-  //   align: "left",
-  //   label: "เงินค่าตอบแทนรายเดือน",
-  //   sortable: true,
-  //   field: "mouthSalaryAmount",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  //   format: (v) => Number(v).toLocaleString(),
-  //   sort: (a: string, b: string) =>
-  //     a
-  //       .toString()
-  //       .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  // },
   {
-    name: "refCommandNo",
+    name: "commandNo",
     align: "left",
     label: "เลขที่คำสั่ง",
     sortable: true,
-    field: "refCommandNo",
+    field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
         ? `${row.commandNo}/${row.commandYear}`
@@ -184,13 +166,16 @@ const baseColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "commandName",
+    name: "commandCode",
     align: "left",
     label: "ประเภทคำสั่ง",
     sortable: true,
-    field: "commandName",
+    field: "commandCode",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return store.convertCommandCodeName(val);
+    },
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -239,22 +224,47 @@ const baseColumns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "commandDateAffect",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
   "posNo",
   "positionName",
   "positionType",
   "positionLevel",
   "positionExecutive",
+  "amount",
+  "commandNo",
+  "commandCode",
   "commandDateSign",
-  "commandName",
-  "refCommandNo",
-  "remark",
   "organization",
+  "remark",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
@@ -377,7 +387,10 @@ watch(
           <template v-slot:body="props">
             <q-tr :props="props">
               <q-td v-for="col in props.cols">
-                <div class="table_ellipsis">
+                <div v-if="col.name == 'organization'" class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+                <div v-else>
                   {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>

src/modules/04_registryPerson/interface/index/government.ts

@@ -57,4 +57,28 @@ interface Data {
   name: string;
   time: string;
 }
-export type { RequestItemsHistoryObject, FormMain, DataCardPos };
+
+interface FormPostition {
+  commandCode: string; //ประเภทคำสั่ง
+  commandNo: string; //เลขที่คำสั่ง
+  commandYear: number | null; //ปี
+  commandDateAffect: Date | null; //วันที่มีผล
+  commandDateSign: Date | null; //วันที่ลงนาม
+  posNoAbb: string; //ตัวย่อเลขที่ตำแหน่ง
+  posNo: string; //เลขที่ตำแหน่ง
+  positionName: string; //ตำแหน่ง
+  positionType: string; //ประเภทตำแหน่ง, กลุ่มงาน
+  positionLevel: string; //ระดับตำแหน่ง, ระดับชั้นงาน
+  positionLine: string; // สายงาน
+  positionPathSide: string; //ด้าน/สาขา
+  positionExecutive: string; //ตำแหน่งทางการบริหาร
+  amount: number | null; //เงินเดือน
+  amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
+  orgRoot: string; //หน่วยงาน
+  orgChild1: string; //ส่วนราชการระดับ 1
+  orgChild2: string; //ส่วนราชการระดับ 2
+  orgChild3: string; //ส่วนราชการระดับ 3
+  orgChild4: string; //ส่วนราชการระดับ 4
+  remark: string; //หมายเหตุstring
+}
+export type { RequestItemsHistoryObject, FormMain, DataCardPos, FormPostition };

src/modules/04_registryPerson/interface/response/Position.ts

@@ -0,0 +1,119 @@
+interface DataPositions {
+  amount: number;
+  amountSpecial: number;
+  commandCode: string;
+  commandDateAffect: Date;
+  commandDateSign: Date;
+  commandId: string;
+  commandName: string;
+  commandNo: string;
+  commandYear: number;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  dateGovernment: Date;
+  id: string;
+  isEntry: boolean;
+  isGovernment: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date;
+  mouthSalaryAmount: number;
+  order: number;
+  orgChild1: string;
+  orgChild2: string;
+  orgChild3: string;
+  orgChild4: string;
+  orgRoot: string;
+  posNo: string;
+  posNoAbb: string;
+  positionCee: string;
+  positionExecutive: string;
+  positionLevel: string;
+  positionLine: string;
+  positionPathSide: string;
+  positionName: string;
+  positionSalaryAmount: number;
+  positionType: string;
+  profileEmployeeId: string;
+  profileId: string;
+  refId: string;
+  remark: string;
+}
+
+interface DataCommandCode {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+  code: number;
+}
+
+interface DataPosType {
+  id: string;
+  posTypeName: string;
+  posTypeRank: number;
+  posLevels: DataPosLevel[];
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  lastUpdateFullName: string;
+  posTypeShortName?: string;
+}
+
+interface DataPosLevel {
+  id: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posLevelAuthority: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  lastUpdateFullName: string;
+}
+
+interface DataPosPosition {
+  createdAt: Date;
+  id: string;
+  isSpecial: boolean;
+  lastUpdateFullName: string;
+  lastUpdatedAt: Date;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posTypeId: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionIsSelected: boolean;
+  positionName: string;
+}
+
+interface DataPosExecutive {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  lastUpdateFullName: string;
+  posExecutiveName: string;
+  posExecutivePriority: number;
+}
+
+interface DataTenure {
+  name: string;
+  days: number;
+  year: number;
+  month: number;
+  day: number;
+}
+
+export type {
+  DataPositions,
+  DataCommandCode,
+  DataPosType,
+  DataPosLevel,
+  DataPosPosition,
+  DataPosExecutive,
+  DataTenure,
+};

src/modules/04_registryPerson/stores/Position.ts

@@ -0,0 +1,43 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {} = mixin;
+
+export const useGovernmentPosDataStore = defineStore("GovernmentPos", () => {
+  //  commandCode ขอตำแหน่ง
+  const positionCode = ref<number[]>([
+    0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16,
+  ]);
+
+  const commandCodeData = ref<DataOption[]>([]);
+  const posTypeData = ref<DataOption[]>([]); //รายการประเภทตำแหน่ง | กลุ่มงาน
+  const posLevelData = ref<DataOption[]>([]); //รายการระดับตำแหน่ง | ระดับชั้นงาน
+  const posLineData = ref<DataOption[]>([]); //รายการสายงาน
+  const posPathSideData = ref<DataOption[]>([]); //รายการด้าน/สาขา
+  const posExecutiveData = ref<DataOption[]>([]); //รายการตำแหน่งทางการบริหาร
+
+  function convertCommandCodeName(val: string) {
+    return commandCodeData.value.find((e: DataOption) => e.id === val)?.name;
+  }
+
+  return {
+    // Data
+    commandCodeData,
+    posTypeData,
+    posLevelData,
+    posLineData,
+    posPathSideData,
+    posExecutiveData,
+    positionCode,
+
+    // Function
+    convertCommandCodeName,
+  };
+});

src/modules/09_leave/components/01_RoundTime/DialogForm.vue

@@ -54,6 +54,25 @@ const objectRound: MyObjectRoundRef = {
   endTimeAfternoon: pmOutRef,
 };
 
+const formDate = reactive<any>({
+  startTimeMorning: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+  endTimeMorning: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+  startTimeAfternoon: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+  endTimeAfternoon: {
+    hours: new Date().getHours(),
+    minutes: new Date().getMinutes(),
+  },
+});
+
 /** Form ข้อมูล */
 const formData = reactive<FormData>({
   startTimeMorning: "",
@@ -200,16 +219,29 @@ watch(
             <p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
             <div class="row justify-between q-my-sm items-start">
               <p class="q-ma-none mt">เวลาเข้างาน</p>
-              <q-input
+
-                ref="amRef"
+              <datepicker
-                class="inputgreen"
+                menu-class-name="modalfix"
+                v-model="formDate.startTimeMorning"
+                time-picker
                 :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
+                :enableTimePicker="true"
-                dense
+                @update:model-value="(value:any)=>(formData.startTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
-                lazy-rules
+              >
-                borderless
+                <template #trigger>
-                v-model="formData.startTimeMorning"
+                  <q-input
-                :rules="[
+                    ref="amRef"
+                    class="inputgreen"
+                    :readonly="props.editCheck === 'edit' || isRead"
+                    :outlined="props.editCheck === 'add'"
+                    dense
+                    borderless
+                    :model-value="
+                      formData.startTimeMorning
+                        ? `${formData.startTimeMorning} น.`
+                        : '--:-- --'
+                    "
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
                   (val:string) => {
                     if (val && formData.endTimeMorning) {
@@ -229,24 +261,59 @@ watch(
                     return true;
                   },
                 ]"
-                hide-bottom-space
+                    hide-bottom-space
-                type="time"
+                    style="width: 140px"
-                style="width: 140px"
+                    ><template v-slot:append>
-              />
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon> </template
+                  ></q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
             <q-separator inset />
             <div class="row items-start q-my-sm justify-between">
               <p class="q-ma-none mt">เวลาออกงาน</p>
-              <q-input
+              <datepicker
-                ref="amOutRef"
+                menu-class-name="modalfix"
-                class="inputgreen"
+                v-model="formDate.endTimeMorning"
+                time-picker
                 :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
+                :enableTimePicker="true"
-                dense
+                @update:model-value="(value:any)=>(formData.endTimeMorning = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
-                v-model="formData.endTimeMorning"
+              >
-                lazy-rules
+                <template #trigger>
-                borderless
+                  <q-input
-                :rules="[
+                    ref="amOutRef"
+                    class="inputgreen"
+                    :readonly="props.editCheck === 'edit' || isRead"
+                    :outlined="props.editCheck === 'add'"
+                    dense
+                    :model-value="
+                      formData.endTimeMorning
+                        ? `${formData.endTimeMorning} น.`
+                        : '--:-- --'
+                    "
+                    borderless
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
                   (val:string) => {
                     if (val && formData.startTimeMorning) {
@@ -266,10 +333,33 @@ watch(
                     return true;
                   },
                 ]"
-                hide-bottom-space
+                    hide-bottom-space
-                type="time"
+                    style="width: 140px"
-                style="width: 140px"
+                    ><template v-slot:append>
-              />
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon> </template
+                  ></q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
           </div>
           <div
@@ -278,9 +368,18 @@ watch(
             <p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
             <div class="row justify-between q-my-sm items-start">
               <p class="q-ma-none mt">เวลาเข้างาน</p>
-              <q-input
+              <datepicker
-                ref="pmRef"
+                menu-class-name="modalfix"
-                :rules="[
+                v-model="formDate.startTimeAfternoon"
+                time-picker
+                :readonly="props.editCheck === 'edit' || isRead"
+                :enableTimePicker="true"
+                @update:model-value="(value:any)=>(formData.startTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
+              >
+                <template #trigger>
+                  <q-input
+                    ref="pmRef"
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
                   (val:string) => {
                     if (val && formData.endTimeAfternoon) {
@@ -300,24 +399,60 @@ watch(
                     return true;
                   },
                 ]"
-                class="inputgreen"
+                    class="inputgreen"
-                :readonly="props.editCheck === 'edit' || isRead"
+                    :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
+                    :outlined="props.editCheck === 'add'"
-                dense
+                    dense
-                lazy-rules
+                    borderless
-                borderless
+                    :model-value="
-                v-model="formData.startTimeAfternoon"
+                      formData.startTimeAfternoon
-                hide-bottom-space
+                        ? `${formData.startTimeAfternoon} น.`
-                type="time"
+                        : '--:-- --'
-                style="width: 140px"
+                    "
-              />
+                    hide-bottom-space
+                    style="width: 140px"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon> </template
+                  ></q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
             <q-separator inset />
             <div class="row items-start q-my-sm justify-between">
               <p class="q-ma-none mt">เวลาออกงาน</p>
-              <q-input
+              <datepicker
-                ref="pmOutRef"
+                menu-class-name="modalfix"
-                :rules="[
+                v-model="formDate.endTimeAfternoon"
+                time-picker
+                :readonly="props.editCheck === 'edit' || isRead"
+                :enableTimePicker="true"
+                @update:model-value="(value:any)=>(formData.endTimeAfternoon = `${String(value.hours).padStart(2,'0')}:${String(value.minutes).padStart(2,'0')}`)"
+              >
+                <template #trigger>
+                  <q-input
+                    ref="pmOutRef"
+                    :rules="[
                   (val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
                   (val:string) => {
                     if (val && formData.startTimeAfternoon) {
@@ -337,17 +472,45 @@ watch(
                     return true;
                   },
                 ]"
-                class="inputgreen"
+                    class="inputgreen"
-                :readonly="props.editCheck === 'edit' || isRead"
+                    :readonly="props.editCheck === 'edit' || isRead"
-                :outlined="props.editCheck === 'add'"
+                    :outlined="props.editCheck === 'add'"
-                dense
+                    dense
-                v-model="formData.endTimeAfternoon"
+                    :model-value="
-                lazy-rules
+                      formData.endTimeAfternoon
-                borderless
+                        ? `${formData.endTimeAfternoon} น.`
-                hide-bottom-space
+                        : '--:-- --'
-                type="time"
+                    "
-                style="width: 140px"
+                    borderless
-              />
+                    hide-bottom-space
+                    style="width: 140px"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        v-if="props.editCheck !== 'edit' && !isRead"
+                        name="mdi-clock-outline"
+                        size="15px"
+                        color="dark"
+                      ></q-icon>
+                    </template>
+                  </q-input>
+                </template>
+                <template
+                  #action-row="{ internalModelValue, selectDate, closePicker }"
+                >
+                  <div class="time_picker action-row q-gutter-sm">
+                    <q-btn
+                      label="ยกเลิก"
+                      @click="closePicker"
+                      color="grey"
+                      outline
+                    >
+                    </q-btn>
+                    <q-btn label="ตกลง" @click="selectDate" color="primary">
+                    </q-btn>
+                  </div>
+                </template>
+              </datepicker>
             </div>
           </div>
           <q-input
@@ -426,6 +589,14 @@ watch(
   border-radius: 6px !important;
   border: 1px solid #e1e1e1;
 }
+
+.action-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 $toggle-background-color-on: #06884d;
 $toggle-background-color-off: darkgray;
 $toggle-control-color: white;

src/style/quasar-variables.sass

@@ -48,6 +48,8 @@ $activetab: #4a5568
 .bg-activetab
     background: $activetab !important
 
+
+
 .inputgreen .q-field__prefix,
 .inputgreen .q-field__suffix,
 .inputgreen .q-field__input,
@@ -55,6 +57,11 @@ $activetab: #4a5568
 
     color: rgb(6, 136, 77)
 
+.dp__action_row
+    padding: 10px 0,
+    border-top: 1px solid #e1e1e1
+    width: 100%
+
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap')
 
 $noto-thai: 'Noto Sans Thai', sans-serif