From 9b02e00a7292dbd8b844e96c2675ffbab373ae5d Mon Sep 17 00:00:00 2001
From: dhilanradya <akundhilan@gmail.com>
Date: Mon, 8 Sep 2025 13:34:56 +0700
Subject: [PATCH] [feat] struk component

---
 resources/js/components/StrukOverlay.vue | 196 +++++++++++++++++++++++
 1 file changed, 196 insertions(+)
 create mode 100644 resources/js/components/StrukOverlay.vue

diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue
new file mode 100644
index 0000000..7dfe40d
--- /dev/null
+++ b/resources/js/components/StrukOverlay.vue
@@ -0,0 +1,196 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="text-D font-serif font-medium fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]"
+  >
+    <div
+      class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden"
+    >
+      <div class="bg-D h-8 w-full"></div>
+
+      <div class="p-6 text-sm flex flex-col h-full relative">
+        <!-- Header -->
+        <div class="relative flex items-center justify-between pb-2 mb-2">
+          <!-- Sosmed -->
+          <div class="flex flex-col gap-4">
+            <p class="flex items-center gap-2">
+              <i class="fab fa-instagram text-red-500 text-xl"></i> tokomas_Jakartacitayam
+            </p>
+            <p class="flex items-center gap-2">
+              <i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
+            </p>
+            <p class="flex items-center gap-2">
+              <i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
+            </p>
+          </div>
+
+          <!-- Logo & tanggal (absolute di tengah) -->
+          <div class="absolute inset-x-0 top-0 flex flex-col items-center">
+            <img :src="logo" alt="Logo" class="h-15" />
+            <p class="mt-1 text-center">Selasa/20-08-2025</p>
+          </div>
+
+          <!-- Data Pembeli -->
+          <div
+            class="grid grid-cols-[130px_1fr] gap-y-2 items-center relative z-10"
+          >
+            <div class="text-right font-semibold pr-3">Nama Pembeli</div>
+            <inputField
+              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
+            />
+            <div class="text-right font-semibold pr-3">Nomor Telepon</div>
+            <inputField
+              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
+            />
+            <div class="text-right font-semibold pr-3">Alamat</div>
+            <inputField
+              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
+            />
+          </div>
+        </div>
+
+        <!-- Nomor Transaksi -->
+        <p class="mt-1 text-sm">TRS-XXX-XXX</p>
+
+        <!-- Table Barang -->
+        <table class="w-full border-D mt-0 text-sm">
+          <thead>
+            <tr class="border-b border-D">
+              <th class="w-32 py-2 border-r border-D">Item</th>
+              <th class="w-32 py-2 border-r border-D">Posisi</th>
+              <th class="w-20 border-r border-D">Berat</th>
+              <th class="w-20 border-r border-D">Kadar</th>
+              <th class="w-32 border-r border-D">Harga Satuan</th>
+              <th class="w-20 border-r border-D">Jumlah</th>
+              <th class="w-32">Total Harga</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- Barang 1 -->
+            <tr class="text-center">
+              <td class="flex items-center gap-2 p-2 border-r border-D">
+                <img src="" class="w-12 h-12 object-cover" />
+                Ring XXX
+              </td>
+              <td class="border-r border-D">A1, Brankas</td>
+              <td class="border-r border-D">2,4 g</td>
+              <td class="border-r border-D">23 K</td>
+              <td class="border-r border-D">Rp9.000.000</td>
+              <td class="border-r border-D">2</td>
+              <td>Rp18.000.000</td>
+            </tr>
+
+            <!-- Barang 2 -->
+            <tr class="text-center border-b">
+              <td class="flex items-center gap-2 p-2 border-r border-D">
+                <img src="" class="w-12 h-12 object-cover" />
+                Necklace XXX
+              </td>
+              <td class="border-r border-D">A2</td>
+              <td class="border-r border-D">2,4 g</td>
+              <td class="border-r border-D">23 K</td>
+              <td class="border-r border-D">Rp3.000.000</td>
+              <td class="border-r border-D">1</td>
+              <td>Rp3.000.000</td>
+            </tr>
+
+            <tr class="align-top">
+              <td colspan="2" rowspan="2" class="p-2 text-left align-top">
+                <p class="font-semibold">PERHATIAN</p>
+                <ol class="list-decimal ml-4 text-xs space-y-1">
+                  <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
+                  <li>
+                    Barang yang dikembalikan menurut harga pasaran dan dipotong
+                    ongkos bikin, barang rusak lain harga.
+                  </li>
+                  <li>
+                    Barang yang sudah dibeli berarti sudah diperiksa dan
+                    disetujui.
+                  </li>
+                  <li>Surat ini harus dibawa pada saat menjual kembali.</li>
+                </ol>
+              </td>
+
+
+              <td colspan="3" rowspan="2" class="p-2 text-center align-top">
+                <div class="flex flex-col items-center justify-center h-full">
+                  <p><strong>Sales</strong></p>
+                  <inputSelect
+                    v-model="sales"
+                    :options="[
+                      { value: 'Timothy', label: 'Timothy' },
+                      { value: 'Iwan', label: 'Iwan' }
+                    ]"
+                    class="mt-16 text-sm rounded bg-B text-center cursor-pointer !w-[160px]"
+                  />
+                </div>
+              </td>
+
+
+              <td class="p-2 text-right text-sm font-semibold align-top border-r">
+                <div class="space-y-2">
+                  <p>Ongkos bikin</p>
+                  <p class="text-red-500 text-xs">diluar harga jual</p>
+                  <p>Total</p>
+                </div>
+              </td>
+
+
+              <td class="p-2 text-sm align-top">
+                <div class="space-y-2">
+                  <div class="flex items-center">
+                    <p>Rp</p>
+                    <inputField
+                      class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
+                    />
+                  </div>
+                  <div class="flex items-center">
+                    <p>Rp</p>
+                    <p class="px-3 py-1 text-left text-sm w-full">21.200.000</p>
+                  </div>
+                </div>
+              </td>
+            </tr>
+
+
+            <tr>
+              <td class="p-2 text-center">
+                <button class="bg-gray-400 text-white px-6 py-2 rounded w-full">
+                  Batal
+                </button>
+              </td>
+              <td class="p-2 text-center">
+                <button class="bg-C text-white px-6 py-2 rounded w-full">
+                  Simpan
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pesan bawah -->
+      <p
+        class="absolute bottom-0 left-0 text-xs bg-D text-white px-2 py-1 rounded-tr-md"
+      >
+        Terima kasih sudah berbelanja dengan kami
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import logo from '@/../images/logo.png'
+import inputField from '@/components/inputField.vue'
+import inputSelect from '@/components/inputSelect.vue'
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const sales = ref('Timothy')
+</script>