ผังบัญชีค่าจ้างลูกจ้างประจำ => ปรับ field date

src/views/TestManagement.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const splitterModel = ref<number>(15);
+const tab = ref<string>("admin");
+const active = ref<string>("role");
+</script>
+
+<template>
+  <q-card
+    ><q-splitter v-model="splitterModel" disable>
+      <template v-slot:before>
+        <div class="">
+          <div class="text-h4 q-mb-md q-pa-md">Management</div>
+          <q-list separator>
+            <q-item
+              clickable
+              v-ripple
+              :active="active === 'role' ? true : false"
+              active-class="bg-primary text-grey-1"
+              @click="active = 'role'"
+            >
+              <q-item-section>Role Management</q-item-section>
+            </q-item>
+
+            <q-item
+              clickable
+              v-ripple
+              :active="active === 'user' ? true : false"
+              active-class="bg-primary text-grey-1"
+              @click="active = 'user'"
+            >
+              <q-item-section>
+                <q-item-label>User Management</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+      </template>
+
+      <template v-slot:after>
+        <div class="q-pa-md">
+          <div class="text-h4 q-mb-md">
+            {{ active === "role" ? "Role Management" : "User Management" }}
+          </div>
+        </div>
+        <div v-if="active === 'role'"></div>
+        <div v-else>
+          <q-tabs
+            v-model="tab"
+            class="text-grey"
+            active-color="primary"
+            indicator-color="primary"
+            align="justify"
+          >
+            <q-tab name="admin">
+              <div class="text-h7">
+                Admin
+                <q-badge align="top" color="red" rounded label="10"></q-badge>
+              </div>
+            </q-tab>
+            <q-tab name="user">
+              <div class="text-h7">
+                User
+                <q-badge align="top" color="red" rounded label="100"></q-badge>
+              </div>
+            </q-tab>
+          </q-tabs>
+
+          <q-separator />
+
+          <q-tab-panels v-model="tab" animated>
+            <q-tab-panel name="admin">
+              <div class="text-h6">Mails</div>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </q-tab-panel>
+
+            <q-tab-panel name="user">
+              <div class="text-h6">Alarms</div>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </q-tab-panel>
+          </q-tab-panels>
+        </div>
+      </template>
+    </q-splitter>
+  </q-card>
+</template>
+
+<style scoped></style>