feat: other information component

src/components/03_customer-management/OtherInformation.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+const additionalEmployerDocument = defineModel<File | null>(
+  'additionalEmployerDocument',
+);
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-3 app-text-muted">• {{ $t(`otherDocument`) }}</div>
+    <div class="col-9 row q-col-gutter-md">
+      <q-file
+        id="input-attchment"
+        :dense="dense"
+        :outlined="readonly ? false : outlined"
+        :readonly="readonly"
+        :borderless="readonly"
+        multiple
+        append
+        :label="$t('additionalEmployerDocument')"
+        class="col-6"
+        v-model="additionalEmployerDocument"
+      >
+        <template v-slot:prepend>
+          <Icon
+            icon="material-symbols:attach-file"
+            width="20px"
+            style="color: var(--brand-1)"
+          />
+        </template>
+      </q-file>
+    </div>
+  </div>
+
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style></style>

src/i18n/en-US/other-document.ts

@@ -0,0 +1,4 @@
+export default {
+  otherDocument: 'Other Document',
+  additionalEmployerDocument: 'Additional Employer Documents',
+};

src/i18n/th-th/other-document.ts

@@ -0,0 +1,4 @@
+export default {
+  otherDocument: 'เอกสารอื่นๆ',
+  additionalEmployerDocument: 'เอกสารนายจ้างเพิ่มเติม',
+};