From 624d6facd434ddf81c6ac2be4e2e3164c48be04b Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Wed, 16 Oct 2024 18:03:50 +0700
Subject: [PATCH] refactor: show peview

---
 src/pages/05_quotation/peview/ViewForm.vue   | 293 +++++++++++++++++++
 src/pages/05_quotation/peview/ViewHeader.vue | 122 ++++++++
 src/router/routes.ts                         |   5 +
 3 files changed, 420 insertions(+)
 create mode 100644 src/pages/05_quotation/peview/ViewForm.vue
 create mode 100644 src/pages/05_quotation/peview/ViewHeader.vue

diff --git a/src/pages/05_quotation/peview/ViewForm.vue b/src/pages/05_quotation/peview/ViewForm.vue
new file mode 100644
index 00000000..c839f050
--- /dev/null
+++ b/src/pages/05_quotation/peview/ViewForm.vue
@@ -0,0 +1,293 @@
+<script lang="ts" setup>
+// NOTE: Import stores
+// NOTE  Import Types
+// NOTE: Import Components
+import ViewHeader from './ViewHeader.vue';
+</script>
+
+<template>
+  <div class="row justify-between container">
+    <section class="content">
+      <ViewHeader class="q-mb-lg" />
+
+      <span
+        class="q-mb-sm"
+        style="
+          font-weight: 800;
+          font-size: 16px;
+          color: var(--orange-5);
+          display: block;
+          border-bottom: 2px solid var(--orange-5);
+        "
+      >
+        รายการสินค้า
+      </span>
+
+      <table style="width: 100%" class="q-mb-md" cellpadding="0">
+        <tbody>
+          <tr>
+            <th>อันดับ</th>
+            <th>รหัสสินค้า</th>
+            <th>รายละเอียด</th>
+            <th>จำนวน</th>
+            <th>ราคาต่อหน่วย</th>
+            <th>ส่วนสด</th>
+            <th>ภาษี</th>
+            <th>มูลค่า</th>
+          </tr>
+          <tr class="color-tr" v-for="(_, i) in Array(18)">
+            <td class="text-center">{{ i + 1 }}</td>
+            <td>PG01T01S01001</td>
+            <td>ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)</td>
+            <td>3</td>
+            <td>2,000.00</td>
+            <td>0.00</td>
+            <td>7%</td>
+            <td>12,750.00</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table
+        style="width: 30%; margin-left: auto"
+        class="q-mb-md"
+        cellpadding="0"
+      >
+        <tbody>
+          <tr>
+            <td>ยอดรวม</td>
+            <td class="text-right">11,900.00</td>
+          </tr>
+
+          <tr class="bg-color-orange">
+            <td>ส่วนลด</td>
+            <td class="text-right">100.00</td>
+          </tr>
+          <tr>
+            <td>จำนวนเงินหลังหักส่วนลด</td>
+            <td class="text-right">0</td>
+          </tr>
+
+          <tr class="bg-color-orange">
+            <td>จำนวนเงินยกเว้นภาษี</td>
+            <td class="text-right">0</td>
+          </tr>
+
+          <tr>
+            <td>จำนวนเงินยกภาษี</td>
+            <td class="text-right">100.00</td>
+          </tr>
+
+          <tr class="bg-color-orange">
+            <td>ภาษีมูลค่าเพิ่ม 7%</td>
+            <td class="text-right">100.00</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="row justify-between q-mb-md" style="width: 100%">
+        <div
+          class="column set-width bg-color-orange full-height"
+          style="padding: 12px"
+        >
+          (หนึ่งหมื่นเจ็ดพันหกร้อยห้าสิบห้าบาท)
+        </div>
+        <div
+          class="column text-right border-5"
+          style="width: 40%; background: var(--orange-5); padding: 8px"
+        >
+          <span
+            class="border-5"
+            style="
+              width: 70%;
+              margin-left: auto;
+              background: white;
+              padding: 4px;
+            "
+          >
+            11,800.00
+          </span>
+        </div>
+      </div>
+    </section>
+
+    <section class="content">
+      <ViewHeader class="q-mb-lg" />
+
+      <span
+        class="q-mb-sm"
+        style="
+          font-weight: 800;
+          font-size: 16px;
+          color: var(--orange-5);
+          display: block;
+          border-bottom: 2px solid var(--orange-5);
+        "
+      >
+        หมายเหตุ
+      </span>
+
+      <div
+        class="surface-0 border-5 q-mb-md"
+        style="width: 100%; padding: 8px 16px"
+      >
+        <table style="width: 30%" class="q-mb-md" cellpadding="0">
+          <tbody>
+            <tr v-for="(_, i) in Array(5)">
+              <td class="text-center">{{ i + 1 }}</td>
+              <td>1CC6613334</td>
+              <td>MR. ZAYAR LIN</td>
+            </tr>
+          </tbody>
+        </table>
+
+        สิ่งที่ลูกค้าได้รับ
+
+        <table style="width: 30%" class="q-mt-md" cellpadding="0">
+          <tbody>
+            <tr v-for="(_, i) in Array(5)">
+              <td class="text-center">{{ i + 1 }}</td>
+              <td>ใบอนุญาตทำงาน 2 ปี</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <span
+        class="q-mb-sm"
+        style="
+          font-weight: 800;
+          font-size: 16px;
+          color: var(--orange-5);
+          display: block;
+          border-bottom: 2px solid var(--orange-5);
+        "
+      >
+        เงื่อนไข
+      </span>
+
+      <div
+        class="detail-note surface-0 border-5 q-mb-md"
+        style="width: 100%; padding: 8px 16px"
+      >
+        <span>
+          ***เงื่อนไขบริการเฉพาะยื่นเอกสาร MOU นำเข้าสัญชาติเมียนมา (RE-TRUN)
+          เท่านั้น
+        </span>
+
+        <span>
+          - ราคาดังกล่าว เฉพาะคนต่างด้าวสัญชาติเมียนมา ที่มี Passport (เดิม)
+          อายุเล่ม มากกว่า 2 ปี 6 เดือน เท่านั้น กรณี เล่ม Passport (เดิม)
+          มีอายุเล่ม น้อยกว่า 2 ปี จะมีค่าใช้จ่ายเพิ่มเติมในการทำเล่ม Passport
+          (ใหม่)
+        </span>
+
+        <span>
+          - คนต่างด้าวจะต้องเดินทางกลับประเทศต้นทางก่อน Visa จะหมดอายุ
+          มิฉะนั้นจะถูกปรับฐานอยู่ในราชอาณาจักรเกินกำหนด (Overstay)
+        </span>
+        <span>- คนต่างด้าวจะต้องมีอายุระหว่าง 18-55 ปี เท่านั้น</span>
+        <span>
+          - คนต่างต้าวจะต้องมีบัตรประชาชนพม่า (ฉบับจริง) และสำเนาทะเบียนบ้าน
+          เท่านั้น
+        </span>
+        <span>- ใบเสนอราคานี้มีอายุ 30 วัน นับตั้งแต่วันที่เสนอราคา</span>
+        <span>- เงื่อนไขการชำระเงิน แบ่งจ่าย 3 งวด</span>
+        <span>- งวดที่ 1 ชำระเงิน ณ วันยื่นเอกสาร จำนวน 2000 บาท</span>
+      </div>
+    </section>
+
+    <section class="content">
+      <ViewHeader class="q-mb-lg" />
+
+      <span
+        class="q-mb-sm"
+        style="
+          font-weight: 800;
+          font-size: 16px;
+          color: var(--orange-5);
+          display: block;
+          border-bottom: 2px solid var(--orange-5);
+        "
+      >
+        ช่องทางซำระเงิน
+      </span>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+table {
+  border-collapse: collapse;
+}
+
+th {
+  background: var(--orange-5);
+  color: white;
+
+  padding: 4px;
+}
+td {
+  padding: 4px 8px;
+}
+
+.border-5 {
+  border-radius: 5px;
+}
+.set-width {
+  width: 50%;
+}
+
+.bg-color-orange {
+  background-color: hsla(var(--orange-5-hsl) / 0.1);
+}
+
+.color-tr:nth-child(odd) {
+  background-color: hsla(var(--orange-5-hsl) / 0.1);
+}
+
+.container {
+  padding: 1rem;
+  display: flex;
+  gap: 1rem;
+  margin-inline: auto;
+  background: white;
+  width: 8in;
+}
+
+.container :deep(*) {
+  font-size: 95%;
+}
+.content {
+  width: 100%;
+  align-items: center;
+  background: white;
+  page-break-after: always;
+  break-after: page;
+}
+.position-bottom {
+  margin-top: auto;
+}
+.detail-note {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  & > * {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+hr {
+  border-style: solid;
+  border-color: var(--orange-5);
+}
+
+@media print {
+  .container {
+    padding: 0;
+    gap: 0;
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/pages/05_quotation/peview/ViewHeader.vue b/src/pages/05_quotation/peview/ViewHeader.vue
new file mode 100644
index 00000000..029fd582
--- /dev/null
+++ b/src/pages/05_quotation/peview/ViewHeader.vue
@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+// NOTE: Import stores
+
+// NOTE  Import Types
+// NOTE: Import Components
+</script>
+
+<template>
+  <div class="row items-center q-mb-lg">
+    <div class="column" style="width: 50%">
+      <img src="/logo.png" width="192px" style="object-fit: scale-down" />
+    </div>
+    <div
+      class="column"
+      style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
+    >
+      ใบเสนอราคา
+    </div>
+  </div>
+
+  <article class="detail-card">
+    <section class="detail-customer-info">
+      <article>
+        <b>
+          บริษัท นำคนต่างด้าวมาทำงานในประเทศ จ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด
+          (สำนักงานใหญ่)
+        </b>
+        <span>
+          49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
+          10140
+        </span>
+        <span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
+        <span>เบอร์โทร 02-018-8688</span>
+        <span>https://www.jobsworkerservice.com</span>
+      </article>
+      <article>
+        <b>ลูกค้า</b>
+        <span>
+          49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
+          10140
+        </span>
+        <span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
+        <span>เบอร์โทร 02-018-8688</span>
+        <span>https://www.jobsworkerservice.com</span>
+      </article>
+    </section>
+    <section class="detail-quotation-info">
+      <div>
+        <div>เลขที่ใบเสนอราคา</div>
+        <div>QT240120S0003</div>
+      </div>
+      <div>
+        <div>วันที่ใบเสนอราคา</div>
+        <div>20/01/2024 10:36</div>
+      </div>
+      <div>
+        <div>ผู้ขาย</div>
+        <div>นายสดใส ใจงาม 084-363-5222</div>
+      </div>
+      <div>
+        <div>เงื่อนไขการชำระ</div>
+        <div>เงินสด - เต็มจำนวน</div>
+      </div>
+      <div>
+        <div>ชื่องาน</div>
+        <div>MOU Myanmar (Re-turn)</div>
+      </div>
+      <div>
+        <div>ผู้ติดต่อ</div>
+        <div>สุนี เจริญงาม</div>
+      </div>
+      <div>
+        <div>วันครบกำหนดชำระ</div>
+        <div>27/01/2024</div>
+      </div>
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.detail-card {
+  display: flex;
+  gap: 16px;
+
+  & > * {
+    flex-grow: 1;
+  }
+
+  & > :first-child {
+    max-width: 57.5%;
+  }
+}
+
+.detail-customer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  & > * {
+    display: flex;
+    flex-direction: column;
+
+    & > :first-child {
+      color: var(--orange-5);
+    }
+  }
+}
+
+.detail-quotation-info {
+  & > * {
+    display: flex;
+
+    & > :first-child {
+      color: var(--orange-5);
+    }
+
+    & > * {
+      width: 50%;
+    }
+  }
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 1fdb55b2..23a93d45 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -92,6 +92,11 @@ const routes: RouteRecordRaw[] = [
     name: 'QuotationAdd',
     component: () => import('pages/05_quotation/QuotationForm.vue'),
   },
+  {
+    path: '/view',
+    name: 'view',
+    component: () => import('pages/05_quotation/peview/ViewForm.vue'),
+  },
 
   // Always leave this as last one,
   // but you can also remove it