ปรับ card โควตา

src/modules/13_salary/components/SalaryLists/TabMain.vue

@@ -127,6 +127,43 @@ const itemsCard = ref([
     color: "indigo-6",
     total: 0,
   },
+
+  {
+    lable: "จำนวนเงินคนครองปัจจุบัน",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+  {
+    lable: "วงเงิน 6%",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "ใช้ไปเท่าไหร่",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "เหลือเท่าไหร่",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
 ]);
 
 async function fetchDataQuota(id: string) {
@@ -139,6 +176,13 @@ async function fetchDataQuota(id: string) {
       itemsCard.value[1].total = data.fifteenPercent;
       itemsCard.value[2].total = data.chosen;
       itemsCard.value[3].total = data.remaining;
+
+      itemsCard.value[4].total = data.currentAmount;
+      itemsCard.value[5].total = data.sixPercentAmount;
+      itemsCard.value[6].total = data.spentAmount;
+      itemsCard.value[7].total = data.sixPercentSpentAmount;
+      itemsCard.value[8].total = data.useAmount;
+      itemsCard.value[9].total = data.remainingAmount;
     })
     .catch((err) => {
       messageError($q, err);
@@ -234,7 +278,15 @@ onMounted(async () => {
     >
       <div class="row col-12 q-pa-md">
         <div class="row col-12 items-start q-gutter-md items-center">
-          <div v-for="(item, index) in itemsCard" :key="index" class="my-card">
+          <div
+            v-for="(item, index) in store.roundMainCode === 'APR'
+              ? itemsCard.slice(0, 4)
+              : store.roundMainCode === 'OCT'
+              ? itemsCard.slice(4, 10)
+              : itemsCard"
+            :key="index"
+            :class="store.roundMainCode === 'APR' ? 'my-card' : 'col-3'"
+          >
             <q-card>
               <q-card-section>
                 <div class="row items-center no-wrap">