From 12192c536d0009c1bb643353eb50a3b970623cf3 Mon Sep 17 00:00:00 2001
From: Timoti313 <monti31232@gmail.com>
Date: Thu, 28 Aug 2025 14:07:56 +0700
Subject: [PATCH] [feat Kasir, KasirForm, KasirTransaksiList]

---
 resources/js/components/KasirForm.vue         | 83 +++++++++++++++++++
 .../js/components/KasirTransaksiList.vue      | 33 ++++++++
 resources/js/pages/Kasir.vue                  | 31 +++++++
 resources/js/router/index.js                  |  7 ++
 4 files changed, 154 insertions(+)
 create mode 100644 resources/js/components/KasirForm.vue
 create mode 100644 resources/js/components/KasirTransaksiList.vue
 create mode 100644 resources/js/pages/Kasir.vue

diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
new file mode 100644
index 0000000..066a5ca
--- /dev/null
+++ b/resources/js/components/KasirForm.vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+      <!-- Input Grid -->
+      <div class="grid grid-cols-2 gap-4 mb-4">
+        <div>
+          <label class="block text-sm font-medium text-gray-700">Kode Item *</label>
+          <input v-model="kodeItem" type="text"
+            class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
+        </div>
+    <br>
+        <div>
+            <!-- Total -->
+            <div class="flex justify-center items-baseline gap-2 mb-1 ml-130">
+              <span class="text-gray-600 font-medium">Total:</span>
+              <span class="text-3xl font-bold text-[#0f1d4a]">Rp{{ total.toLocaleString() }},-</span>
+            </div>
+          <label class="block text-sm font-medium text-gray-700">Harga Jual</label>
+          <input v-model="hargaJual" type="number"
+            class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
+        </div>
+      </div>
+
+
+      <!-- Buttons -->
+      <div class="flex gap-4 mb-6">
+        <button @click="tambahItem"
+          class="px-4 py-2 rounded-md bg-[#f1ede8] text-[#0f1d4a] font-medium hover:bg-[#e4dfd8] transition">
+          Tambah Item
+        </button>
+        <button
+          class="px-6 py-2 rounded-md bg-[#c6a77d] text-[#0f1d4a] font-semibold hover:bg-[#b09065] transition">
+          Lanjut
+        </button>
+      </div>
+
+      <!-- Table -->
+      <table class="w-full border-collapse border border-gray-200 text-sm rounded-lg overflow-hidden">
+        <thead class="bg-gray-100 text-[#0f1d4a]">
+          <tr>
+            <th class="border border-gray-200 p-2">No</th>
+            <th class="border border-gray-200 p-2">Item</th>
+            <th class="border border-gray-200 p-2">Jml</th>
+            <th class="border border-gray-200 p-2">Harga</th>
+            <th class="border border-gray-200 p-2">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50">
+            <td class="border border-gray-200 p-2 text-center">{{ index + 1 }}</td>
+            <td class="border border-gray-200 p-2">{{ item.kode }}</td>
+            <td class="border border-gray-200 p-2 text-center">{{ item.jumlah }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ item.harga.toLocaleString() }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ (item.harga * item.jumlah).toLocaleString() }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </template>
+
+
+
+  <script setup>
+  import { ref, computed } from 'vue'
+
+  const kodeItem = ref('')
+  const hargaJual = ref(0)
+  const pesanan = ref([])
+
+  const tambahItem = () => {
+    if (!kodeItem.value || !hargaJual.value) return
+    pesanan.value.push({
+      kode: kodeItem.value,
+      jumlah: 1,
+      harga: parseFloat(hargaJual.value),
+    })
+    kodeItem.value = ''
+    hargaJual.value = 0
+  }
+
+  const total = computed(() =>
+    pesanan.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
+  )
+  </script>
diff --git a/resources/js/components/KasirTransaksiList.vue b/resources/js/components/KasirTransaksiList.vue
new file mode 100644
index 0000000..0301fff
--- /dev/null
+++ b/resources/js/components/KasirTransaksiList.vue
@@ -0,0 +1,33 @@
+<template>
+      <h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
+      <table class="w-full border-collapse border border-gray-200 text-sm">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="border border-gray-200 p-2">Tanggal</th>
+            <th class="border border-gray-200 p-2">Kode Transaksi</th>
+            <th class="border border-gray-200 p-2">Pendapatan</th>
+            <th class="border border-gray-200 p-2">Detail Item</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="trx in transaksi" :key="trx.id">
+            <td class="border border-gray-200 p-2">{{ trx.tanggal }}</td>
+            <td class="border border-gray-200 p-2">{{ trx.kode }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ trx.pendapatan.toLocaleString() }}</td>
+            <td class="border border-gray-200 p-2 text-center">
+              <button @click="$emit('detail', trx)"
+                class="px-3 py-1 rounded-md bg-[#c6a77d] text-white hover:bg-[#b09065] transition">Detail</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+  </template>
+
+  <script setup>
+  const props = defineProps({
+    transaksi: {
+      type: Array,
+      default: () => []
+    }
+  })
+  </script>
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
new file mode 100644
index 0000000..0b27fe4
--- /dev/null
+++ b/resources/js/pages/Kasir.vue
@@ -0,0 +1,31 @@
+<template>
+    <mainLayout>
+      <div class="p-6 grid grid-cols-3 gap-6">
+        <!-- Left Section -->
+        <div class="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200 flex flex-col">
+          <KasirForm />
+        </div>
+
+        <!-- Right Section -->
+        <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
+          <KasirTransaksiList :transaksi="dummyTransaksi" @detail="lihatDetail" />
+        </div>
+      </div>
+    </mainLayout>
+  </template>
+
+  <script setup>
+  import mainLayout from '../layouts/mainLayout.vue'
+  import KasirForm from '../components/KasirForm.vue'
+  import KasirTransaksiList from '../components/KasirTransaksiList.vue'
+
+  const dummyTransaksi = [
+    { id: 1, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 21200000 },
+    { id: 2, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
+    { id: 3, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
+  ]
+
+  const lihatDetail = (trx) => {
+    alert(`Detail transaksi: ${trx.kode}`)
+  }
+  </script>
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index f7e4dec..f5eaa5d 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -3,6 +3,8 @@ import Home from '../pages/Home.vue'
 import Produk from '../pages/Produk.vue'
 import Brankas from '../pages/Brankas.vue'
 import Tray from '../pages/Tray.vue'
+import Kasir from '../pages/Kasir.vue'
+
 
 
 const routes = [
@@ -26,6 +28,11 @@ const routes = [
     name: 'Nampan',
     component: Tray
   },
+  {
+    path: '/kasir',
+    name: 'Kasir',
+    component: Kasir
+  },
 ]