feat: จัด layout

src/pages/03_customer-management/MainPage.vue

@@ -1,5 +1,98 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-<template></template>
+import SelectorList from 'components/SelectorList.vue';
+import StatCardComponent from 'components/StatCardComponent.vue';
+import TooltipComponent from 'components/TooltipComponent.vue';
+import AddButton from 'components/AddButton.vue';
+import AppBox from 'components/app/AppBox.vue';
+
+const costomerStats = [
+  {
+    id: 1,
+    count: 2,
+    name: 'นายจ้าง 1',
+    nameEN: 'Employer 1',
+  },
+
+  {
+    id: 2,
+    count: 3,
+    name: 'นายจ้าง 2',
+    nameEN: 'Employer 2',
+  },
+];
+
+const selectorLabel = ref<string>('');
+const selectorList = computed(() => [
+  { label: 'EMPLOYER', count: 0 },
+  { label: 'WORKER', count: 0 },
+]);
+</script>
+
+<template>
+  <div class="column q-pb-lg">
+    <div class="text-h6 text-weight-bold q-mb-md">
+      {{ $t('costomerManagement') }}
+    </div>
+
+    <div class="row full-width q-mb-md no-wrap">
+      <SelectorList
+        :list="selectorList"
+        v-model:selector="selectorLabel"
+        class="q-mr-md col-4"
+      />
+
+      <!-- stat -->
+      <AppBox bordered class="column full-width">
+        <div class="text-weight-bold text-subtitle1">
+          {{ $t('costomerStatTitle') }}
+        </div>
+        <div class="row full-width q-py-md" style="overflow-x: auto">
+          <StatCardComponent
+            v-if="costomerStats"
+            :branch="
+              costomerStats.map((v) => ({
+                count: v.count,
+                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+              }))
+            "
+            :dark="$q.dark.isActive"
+            class="no-wrap"
+          />
+        </div>
+      </AppBox>
+    </div>
+
+    <!-- main -->
+    <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
+      <div class="col-1 self-end">
+        <div class="row">
+          <TooltipComponent
+            title="costomerTooltipTitle"
+            caption="costomerTooltipCaption"
+            imgSrc="personnel-table-"
+          />
+        </div>
+      </div>
+
+      <div
+        class="col self-center"
+        style="display: flex; flex-grow: 1; align-items: center"
+      >
+        <AddButton
+          :label="'costomerAdd'"
+          :cyanOn="true"
+          @trigger="
+            () => {
+              console.log('add');
+            }
+          "
+        />
+      </div>
+    </AppBox>
+  </div>
+</template>
 
 <style scoped></style>