feat: menu agencies (#65)

* feat: agencies => add agencies menu

---------

Co-authored-by: Methapon Metanipat <methapon@frappet.com>

src/components/07_agencies-management/FormBasicInfoAgencies.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import SelectInput from '../shared/SelectInput.vue';
+import useOptionStore from 'src/stores/options';
+
+const optionStore = useOptionStore();
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  onDrawer?: boolean;
+}>();
+
+const group = defineModel('group', { default: '' });
+const name = defineModel('name', { default: '' });
+const nameEn = defineModel('nameEn', { default: '' });
+</script>
+<template>
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-sm"
+        color="info"
+        name="mdi-office-building-outline"
+        style="background-color: var(--surface-3)"
+      />
+      <span class="text-body1 text-weight-bold">
+        {{ $t(`form.field.basicInformation`) }}
+      </span>
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <SelectInput
+        :disable="!readonly && onDrawer"
+        :readonly="readonly"
+        for="input-agencies-code"
+        :label="$t('agencies.group')"
+        option-label="value"
+        :option="optionStore.globalOption?.agenciesType"
+        v-model="group"
+      />
+      <q-input
+        for="input-agencies-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="$t('agencies.name')"
+        v-model="name"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
+      />
+      <q-input
+        for="input-agencies-name-en"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="'Agencies Name'"
+        v-model="nameEn"
+        :rules="[
+          (val: string) => !!val || $t('form.error.required'),
+          (val: string) =>
+            /^[A-Za-z0-9.,' -]+$/.test(val) || $t('form.error.letterOnly'),
+        ]"
+      />
+    </div>
+  </div>
+</template>
+<style scoped></style>

src/components/ProfileBanner.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import ToggleButton from './button/ToggleButton.vue';
+import { Icon } from '@iconify/vue/dist/iconify.js';
 
 defineProps<{
   img?: string | null;
@@ -120,7 +121,7 @@ const smallBanner = ref(false);
                           color: `${color || 'white'}`,
                         }"
                       >
-                        <q-icon :name="icon || 'mdi-account'" />
+                        <Icon :icon="icon || 'mdi-account'" />
                       </div>
                     </template>
                   </q-img>
@@ -132,7 +133,7 @@ const smallBanner = ref(false);
                       color: `${color || 'white'}`,
                     }"
                   >
-                    <q-icon :name="icon || 'mdi-account'" />
+                    <Icon :icon="icon || 'mdi-account'" />
                   </div>
                 </template>
               </q-img>
@@ -145,7 +146,7 @@ const smallBanner = ref(false);
                 color: `${color || 'white'}`,
               }"
             >
-              <q-icon :name="icon || 'mdi-account'" />
+              <Icon :icon="icon || 'mdi-account'" />
             </div>
             <q-badge
               v-if="!hideActive"
@@ -332,9 +333,9 @@ const smallBanner = ref(false);
                           color: `${color || 'white'}`,
                         }"
                       >
-                        <q-icon
+                        <Icon
                           class="full-width full-height flex items-center justify-center"
-                          :name="icon || 'mdi-account'"
+                          :icon="icon || 'mdi-account'"
                         />
                       </div>
                     </template>
@@ -347,9 +348,9 @@ const smallBanner = ref(false);
                       color: `${color || 'white'}`,
                     }"
                   >
-                    <q-icon
+                    <Icon
                       class="full-width full-height flex items-center justify-center"
-                      :name="icon || 'mdi-account'"
+                      :icon="icon || 'mdi-account'"
                     />
                   </div>
                 </template>
@@ -363,9 +364,9 @@ const smallBanner = ref(false);
                 color: `${color || 'white'}`,
               }"
             >
-              <q-icon
+              <Icon
                 class="full-width full-height flex items-center justify-center"
-                :name="icon || 'mdi-account'"
+                :icon="icon || 'mdi-account'"
               />
             </div>
 

src/components/StatCardComponent.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
 const props = withDefaults(
   defineProps<{
     branch: {
@@ -18,7 +20,8 @@ const props = withDefaults(
         | 'magenta'
         | 'blue'
         | 'lime'
-        | 'light-purple';
+        | 'light-purple'
+        | 'light-green';
     }[];
     dark?: boolean;
     textSize?: string;
@@ -45,8 +48,9 @@ const props = withDefaults(
             size="lg"
             style="background-color: hsla(0 0% 100% /0.2)"
             text-color="white"
-            :icon="v.icon"
-          />
+          >
+            <Icon :icon="v.icon" width="24px" />
+          </q-avatar>
         </div>
         <div class="col-6 justify-center column">
           <div
@@ -127,6 +131,10 @@ const props = withDefaults(
   --_color: var(--jungle-8-hsl);
 }
 
+.stat-card__light-green {
+  --_color: var(--green-8-hsl);
+}
+
 .stat-card__light-purple {
   --_color: var(--purple-7-hsl);
 }

src/components/form/AddressForm.vue

@@ -38,12 +38,16 @@ const workplace = defineModel<string>('workplace', { default: '' });
 const workplaceEN = defineModel<string>('workplaceEn', { default: '' });
 const address = defineModel('address', { default: '' });
 const addressEN = defineModel('addressEn', { default: '' });
-const street = defineModel('street', { default: '' });
-const streetEN = defineModel('streetEn', { default: '' });
-const moo = defineModel('moo', { default: '' });
-const mooEN = defineModel('mooEn', { default: '' });
-const soi = defineModel('soi', { default: '' });
-const soiEN = defineModel('soiEn', { default: '' });
+const street = defineModel<string | null | undefined>('street', {
+  default: '',
+});
+const streetEN = defineModel<string | null | undefined>('streetEn', {
+  default: '',
+});
+const moo = defineModel<string | null | undefined>('moo', { default: '' });
+const mooEN = defineModel<string | null | undefined>('mooEn', { default: '' });
+const soi = defineModel<string | null | undefined>('soi', { default: '' });
+const soiEN = defineModel<string | null | undefined>('soiEn', { default: '' });
 const provinceId = defineModel<string | null | undefined>('provinceId');
 const districtId = defineModel<string | null | undefined>('districtId');
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');