feat: menu request list (#75)

* feat: i18n

* feat: request list

* refactor: hide stat transition on app.scss

* feat: request list i18n

* feat: request list => constants and main page

* feat: add store

* feat: add fetch data

* feat: add utilities fn

* feat: add store function / types

* refactor: request list type

* refactor: request list constants

* refactor: quotation card => add customData and badge color props

* feat: avatar group components

* feat: request list group

* refactor: request list => remove tab, add table data

* feat: send search query

* feat: add parameter

* refactor: remove unused function

* fix: rename component lits to list

* feat: show stats from api

* chore: cleanup

* refactor: make it type safe

* refactor: accept rotate flow id as parameter

* feat: use page size component

* feat: add component, data display & expansion product

* feat: i18n

* refactor: constants and request list table

* refactor: type code, createdAt, updatedAt

* refactor: utils function changThemeMode

* feat: request list => view page

* refactor: use type instead of infer from value

* fix: function getEmployeeName att type

* refactor: fetch work list

* refactor: loop work list

* feat: add i18n duty

* feat: add form issue component

* feat: add form issue section

* fix: store error

* refactor: edit by value

* refactor: accept basic info from outside instead

* feat: add status filter support on fetch

* refactor: remove delete button

* refactor: wording

* feat/fix: request list i18n & constant

* feat: document type

* feat/refactor: request list => document expansion

* refactor: doc expansion use FormGroupHead

* refactor: fetch data based on id from route param

* refactor: text area disable

* feat: properties expansion display (mocking)

* refactor: add document at product relation

* refactor: edit get value product

* feat: get workflow step to show on top

* refactor: add type

* refactor: add get attachment

* refactor: add view attachment

* refactor: edit file name

* refactor: define props get hide icon

* refactor: edit align row

* refactor: by value table document

* refactor: by value row table

* feat: add independent ocr dialog

* chore: clean up

* refactor: accept more props and small adjustment

* fix: error withDefault call

* feat: accept default metadata when open

* fix: typo

* feat: add override hook when finish ocr

* feat: reset state on open

* feat: detect reader result is actually string

* fix: variable name conflict

* feat: properties to input component

* feat: properties input in properties expansion

* feat: properties expansion data (temporary)

* refactor: add i18n status work

* refactor: edit type work status and add step status

* refactor: add edit status work

* refactor: edit step work

* refactor: properties data type

* refactor: filter selected product & specific properties

* feat: add emit event

* refactor: change variable name for better understanding

* refactor: hide step that no properties

* refactor: work status type to validate

* feat: work status color

* refactor: key for filename

* refactor: close expansion when change step

* refactor: responsive meta data

* refactor: product expansion responsive

* fix: dark mode step text color

* fix: document expansion table no data label

* refactor: main page body bordered and overflow hidden

* refactor: use utils function instead

* refactor: add process

* refactor: by value  name

* refactor: add upload file

* refactor: upload file

* refactor: by value

* fix: option worker type

* refactor: fetchRequestAttachment after edit

* fix: metadata display

* refactor: add class full-height

* refactor: edit type

* refactor: fetch file

* refactor: by value visa

* refactor: request list attributes type

* fix: properties to input props (placeholder, readonly, disable)

* feat: request list properties function

* fix: error when no workflow

* docs: update comment to fix indent

* refactor: step type (attributes)

* refactor: add attributes payload on editStatusRequestWork function

* feat/refactor: functional form expansion/filter worklist

* refactor: set attributes properties after submit

* refactor: add request work ready status

* feat: request list => form employee component

* feat/refactor: form expansion select user/layout

* fix: properties readonly

---------

Co-authored-by: puriphatt <puriphat@frappet.com>
Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>

src/components/05_quotation/QuotationCard.vue

@@ -18,6 +18,14 @@ defineProps<{
   reporter?: string;
   totalPrice?: number;
   urgent?: boolean;
+  hidePreview?: boolean;
+  badgeColor?: string;
+
+  customData?: {
+    label: string;
+    value: string | number | unknown;
+    slotName?: string;
+  }[];
 }>();
 
 defineEmits<{
@@ -52,13 +60,14 @@ const rand = Math.random();
       <div class="q-mr-sm" style="font-size: 90%">
         <BadgeComponent
           :title="status"
-          hsla-color="--blue-6-hsl"
+          :hsla-color="badgeColor || '--blue-6-hsl'"
           :border="urgent"
         />
       </div>
 
       <nav class="col text-right">
         <q-btn
+          v-if="!hidePreview"
           flat
           dense
           rounded
@@ -111,7 +120,28 @@ const rand = Math.random();
         'surface-2': !urgent,
       }"
     >
-      <article class="row q-py-sm">
+      <article
+        class="q-py-sm"
+        :class="{
+          row: $q.screen.gt.sm,
+          column: $q.screen.lt.sm,
+        }"
+        v-if="customData && customData?.length > 0"
+      >
+        <template v-for="cData in customData" :key="cData.label">
+          <template v-if="cData.slotName">
+            <slot :name="cData.slotName" :props="cData" />
+          </template>
+          <template v-else>
+            <div class="col-4 app-text-muted q-pr-sm">
+              {{ cData.label || '-' }}
+            </div>
+            <div class="col-8">{{ cData.value || '-' }}</div>
+          </template>
+        </template>
+      </article>
+
+      <article v-else class="row q-py-sm">
         <div class="col-4 app-text-muted q-pr-sm">
           {{ $t('quotation.customerName') }}
         </div>
@@ -125,6 +155,7 @@ const rand = Math.random();
         </div>
         <div class="col-8">
           <BadgeComponent
+            :hsla-color="badgeColor"
             icon="mdi-account-multiple-outline"
             :title="[workerCount, workerMax].join(' / ')"
           />