ปรับหน้าจัดการประเภคปัญหา

src/modules/00_support/components/category/TableCategory.vue

@@ -2,12 +2,35 @@
 import { useSupportStore } from "@/modules/00_support/store/Main";
 import DialogCategory from "@/modules/00_support/components/category/DialogCategory.vue";
 import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar";
+const router = useRouter();
 const store = useSupportStore();
 const open = ref<boolean>(false);
 const currentName = ref<string>("");
 const status = ref<"add" | "edit" | "delete">("add");
 const categoryId = ref<string>("");
 
+const columnsCategory = [
+  {
+    name: "name",
+    align: "center",
+    label: "ประเภทของปัญหา",
+    field: "name",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "actions",
+    align: "center",
+    label: "",
+    field: "",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+] satisfies QTableProps["columns"];
+
 onMounted(async () => {
   await store.fetchCategory();
 });
@@ -15,25 +38,39 @@ onMounted(async () => {
 
 <template>
   <div class="flex q-my-md">
+    <q-btn
+      flat
+      round
+      class="bg-teal-1 full-height"
+      color="primary"
+      icon="mdi-chevron-left"
+      dense
+      @click="router.go(-1)"
+    >
+    </q-btn>
     <p class="text-h6 text-weight-medium align-center">จัดการประเภคของปัญหา</p>
     <q-space />
+  </div>
+
+  <div class="bg-white q-pa-md">
     <q-btn
-      dense
-      size="16px"
+      class="q-mb-sm"
+      flat
+      round
+      color="primary"
       @click="
         () => {
           open = true;
           status = 'add';
         }
       "
-      >เพิ่มประเภทของปัญหา</q-btn
+      icon="mdi-plus"
     >
-  </div>
-
-  <div>
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+    </q-btn>
     <q-table
       :rows="store.rowsCategory?.result"
-      :columns="store.columnsCategory"
+      :columns="columnsCategory"
       row-key="name"
     >
       <template v-slot:body-cell-actions="data">