feat: add preview footer

src/pages/05_quotation/peview/ViewFooter.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+defineProps<{
+  data?: {
+    name: string;
+    buyer: string;
+    buyDate: string;
+
+    company: string;
+    approver: string;
+    approveDate: string;
+  };
+}>();
+</script>
+<template>
+  <div class="footer-container">
+    <div class="footer-top">
+      <div>ในนาม {{ data?.name || '-' }}</div>
+      <div>ในนาม {{ data?.company || '-' }}</div>
+    </div>
+
+    <img src="/images/jws-stamp.png" alt="${0}" />
+
+    <div class="footer-bottom">
+      <section>
+        <div>
+          <span>.......................................</span>
+          <span>ผู้สั่งซื้อสินค้า</span>
+        </div>
+        <div>
+          <span>.......................................</span>
+          <span>วันที่</span>
+        </div>
+      </section>
+      <section>
+        <div>
+          <span>.......................................</span>
+          <span>ผู้อนุมัติ</span>
+        </div>
+        <div>
+          <span>.......................................</span>
+          <span>วันที่</span>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.footer-container {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  height: 1.5in;
+}
+
+.footer-top {
+  position: absolute;
+  width: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+
+  & > * {
+    width: 35%;
+  }
+}
+.footer-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+
+  & > * {
+    display: flex;
+    width: 35%;
+    justify-content: space-around;
+
+    & > * {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+  }
+}
+</style>

src/pages/05_quotation/peview/ViewForm.vue

@@ -17,6 +17,7 @@ import { QuotationPayload } from 'src/stores/quotations/types';
 
 // NOTE: Import Components
 import ViewHeader from './ViewHeader.vue';
+import ViewFooter from './ViewFooter.vue';
 import BankComponents from './BankComponents.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
 
@@ -421,11 +422,15 @@ function print() {
       >
         ช่องทางซำระเงิน
       </span>
-      <BankComponents
-        v-for="bank in bankList"
-        :bank-book="bank"
-        :key="bank.id"
-      />
+      <article style="height: 5.8in">
+        <BankComponents
+          v-for="bank in bankList"
+          :bank-book="bank"
+          :key="bank.id"
+        />
+      </article>
+
+      <ViewFooter />
     </section>
   </div>
 </template>