feat: credit note (#171)

* feat: add main page credit note

* feat: enable credit note route and update menu item states

* refactor: add i18n

* refactor: edit i18n status

* feat: add action column

* feat: add empty form page

* feat: add get data

* feat: add type credit note status

* refactor: add type name en

* refactor: add type credit note status in type credit note

* feat: add hsla colors

* refactor: add slot grid

* refactor: handle  hide kebab edit show only tab tssued

* feat: show grid card

* feat: i18n

* feat: add credit note form and dialog

* refactor: add props hide kebab deelete

* refactor: hide kebab

* style: update color segments to indigo theme

* feat: i18n

* fix: update labels for credit note fields

* refactor: add type

* feat: new select quotation

* refactor: use new select quotation

* feat: navigate to

* refactor: function trigger and navigate to

* feat: i18n bank

* feat: add payment expansion component and integrate into credit note form

* refactor: bind i18n pay condition

* refactor: navigate to get quotation id

* feat: i18n

* fix: update label for createdBy field in credit note form

* feat: add credit note information expansion component

* feat: add Credit Note expansion component and update form layout

* refactor: bind quotation id and send

* refactor: deelete duplicate type

* refactor: show state button

* refactor: handle show status

* feat: add function update payback status

* feat: add return and canceled reasons to credit note translations

* feat: enhance SelectReadyRequestWork component with credit note handling and fetch parameters

* feat: type

* feat: add status handling and optional display for employee table

* refactor: rename selectedQuotationId to quotationId in FormCredit component

* feat: set default opened state for CreditNoteExpansion and add reason options

* feat: update PaymentExpansion to handle payback type selection and clear fields for cash payments

* feat: enhance ProductExpansion to support credit note handling and adjust price calculations

* feat: implement product handling and price calculation in CreditNote form

* feat: add manage attachment function to store

* refactor: bind delete credit note

* feat: add credit note status and reference fields to types

* refactor: update task step handling and simplify request work structure in credit note form

* feat: add navigation to quotation from credit note form

* feat: enhance upload section layout based on file data

* feat: add readonly functionality to credit note form and related components

* refactor: remove console log

* feat: update i18n

* style: add rounded corners to complete view container in quotation form

* feat: add RefundInformation component and update credit note form status handling

* feat: i18n

* feat: update payback status endpoint and add paybackStatus to CreditNote type

* feat: enhance QuotationFormReceipt component with optional props and slot support

* feat: integrate payback status handling in RefundInformation and FormPage components

* feat: add external file group

* feat: update API endpoint paths for credit note operations

* feat: improve layout and styling in UploadFile components

* feat: implement file upload and management in Credit Note

* refactor: update upload to check if it is redirect or not

* feat: upload file slips

* feat: add payback date dispaly

* refactor: change module no

* fix: icon link to main page instead

* feat: add file dialog with image download functionality

* fix: view slip

* feat: add download button to image viewer

* feat: handle after submit

* feat: conditionally render bank transfer information

* feat: handle upload file on create

* feat: handle change payback status

* feat: payback type in credit note form

* fix: correct reference to quotation data in goToQuotation function

---------

Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Co-authored-by: puriphatt <puriphat@frappet.com>
Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>

src/components/dialog/DialogViewFile.vue

@@ -6,29 +6,57 @@ import DialogHeader from './DialogHeader.vue';
 import MainButton from '../button/MainButton.vue';
 import NoData from '../NoData.vue';
 
-defineProps<{
-  title: string;
+const props = defineProps<{
+  title?: string;
   url?: string;
+  hideTab?: boolean;
+  download?: boolean;
+  transformUrl?: (url: string) => string | Promise<string>;
 }>();
 
 const open = defineModel<boolean>({ default: false });
 
 const state = reactive({
   imageZoom: 100,
+  transformedUrl: props.url,
 });
 
-function openDialog() {
+async function openDialog() {
   state.imageZoom = 100;
+  if (props.url && props.transformUrl) {
+    state.transformedUrl = await props.transformUrl(props.url);
+  } else {
+    state.transformedUrl = props.url;
+  }
+}
+
+async function downloadImage(url: string | null) {
+  if (!url) return;
+  const res = await fetch(url);
+  const blob = await res.blob();
+
+  let extension = '';
+
+  if (blob.type === 'image/jpeg') extension = '.jpg';
+  else if (blob.type === 'image/png') extension = '.png';
+  else return;
+
+  let a = document.createElement('a');
+  a.download = `download${extension}`;
+  a.href = window.URL.createObjectURL(blob);
+  a.click();
+  a.remove();
 }
 </script>
 <template>
   <DialogFormContainer v-model="open" v-on:open="openDialog">
     <template #header>
-      <DialogHeader :title="title" />
+      <DialogHeader :title="title || ''" />
     </template>
 
     <main class="column full-height">
       <section
+        v-if="!hideTab"
         style="background: var(--gray-3)"
         class="q-py-sm row justify-center"
       >
@@ -74,18 +102,32 @@ function openDialog() {
       </section>
 
       <div
-        :class="{ 'cursor-pointer': state.imageZoom > 100 }"
         class="full-height full-width flex justify-center items-center col scroll q-pa-md"
+        :class="{ 'cursor-pointer': state.imageZoom > 100 }"
         v-dragscroll
       >
         <q-img
-          v-if="url"
+          v-if="state.transformedUrl"
           class="full-height"
-          :src="url"
+          :src="state.transformedUrl"
           fit="contain"
           :style="{ transform: `scale(${state.imageZoom / 100})` }"
           style="transform-origin: 0 0"
-        />
+        >
+          <div v-if="download" style="border-radius: 50%" class="no-padding">
+            <q-btn
+              v-if="state.transformedUrl"
+              class="upload-image-btn"
+              icon="mdi-download-outline"
+              id="btn-download-img"
+              size="md"
+              unelevated
+              round
+              @click="downloadImage(state.transformedUrl)"
+              style="color: hsla(var(--stone-0-hsl) / 0.7)"
+            />
+          </div>
+        </q-img>
         <NoData v-else />
       </div>
     </main>