From 7f4b41b90420bcf0196785cbc61378c1e6224fb4 Mon Sep 17 00:00:00 2001
From: dhilanradya <akundhilan@gmail.com>
Date: Mon, 8 Sep 2025 17:16:05 +0700
Subject: [PATCH 1/4] [fix] ui mobile produk

---
 resources/js/components/searchbar.vue |  2 +-
 resources/js/pages/Produk.vue         | 90 ++++++++++++++++++++-------
 2 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/resources/js/components/searchbar.vue b/resources/js/components/searchbar.vue
index 6c66972..236637d 100644
--- a/resources/js/components/searchbar.vue
+++ b/resources/js/components/searchbar.vue
@@ -14,4 +14,4 @@ import { ref } from "vue";
 
 const searchText = ref("");
 defineEmits(["update:search"]);
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index ddaae0a..e66bcf5 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -20,29 +20,65 @@
             <!-- Judul -->
             <p class="font-serif italic text-[25px] text-D">PRODUK</p>
 
-            <!-- Filter -->
-            <div
-                class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
-            >
-                <!-- Dropdown Kategori -->
-                <InputSelect
-                    v-model="selectedCategory"
-                    :options="kategori"
-                    class="w-full md:w-48"
-                />
+            <!-- Wrapper -->
+            <div class="mt-3">
+                <!-- Mobile Layout -->
+                <div class="flex flex-col gap-3 sm:hidden">
+                    <!-- Search -->
+                    <div class="w-full">
+                        <searchbar
+                            v-model:search="searchQuery"
+                            class="searchbar-mobile"
+                        />
+                    </div>
 
-                <!-- Search -->
-                <searchbar v-model:search="searchQuery" class="flex-1" />
-            </div>
+                    <!-- Filter + Tombol -->
+                    <div class="flex flex-row justify-between items-center">
+                        <!-- Filter Kategori -->
+                        <div class="w-40 shrink-0">
+                            <InputSelect
+                                v-model="selectedCategory"
+                                :options="kategori"
+                                class="w-full"
+                            />
+                        </div>
 
-            <!-- Tombol Tambah Produk -->
-            <div class="mt-3 flex justify-end">
-                <router-link
-                    to="/produk/baru"
-                    class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-                >
-                    Tambah Produk
-                </router-link>
+                        <!-- Tombol Tambah Produk -->
+                        <router-link
+                            to="/produk/baru"
+                            class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
+                        >
+                            Tambah Produk
+                        </router-link>
+                    </div>
+                </div>
+
+                <!-- Desktop Layout -->
+                <div class="hidden sm:flex flex-row gap-3 items-start">
+                    <!-- Filter -->
+                    <div class="w-40 sm:w-48 shrink-0">
+                        <InputSelect
+                            v-model="selectedCategory"
+                            :options="kategori"
+                            class="w-full"
+                        />
+                    </div>
+
+                    <!-- Search -->
+                    <div class="flex-1 mt-[2px]">
+                        <searchbar v-model:search="searchQuery" class="w-full" />
+                    </div>
+                </div>
+
+                <!-- Tombol Tambah Produk (desktop) -->
+                <div class="hidden sm:flex justify-end mt-3">
+                    <router-link
+                        to="/produk/baru"
+                        class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
+                    >
+                        Tambah Produk
+                    </router-link>
+                </div>
             </div>
 
             <!-- Grid Produk -->
@@ -296,3 +332,15 @@ async function deleteProduk() {
     }
 }
 </script>
+
+<style scoped>
+/* 🔥 Tambahan agar searchbar mobile full */
+.searchbar-mobile:deep(div) {
+  width: 100% !important;
+  justify-content: flex-start !important;
+}
+
+.searchbar-mobile:deep(input) {
+  width: 100% !important;
+}
+</style>

From 7b1fdc30f62099e1aa109c1a6682ffcd4e75d9a9 Mon Sep 17 00:00:00 2001
From: adityaalfarison <adityaalfarison33@gmail.com>
Date: Tue, 9 Sep 2025 11:16:56 +0700
Subject: [PATCH 2/4] modal, brankas, nampan

---
 resources/js/components/BrankasList.vue | 178 +++++++++++++++++++-----
 resources/js/components/TrayList.vue    | 155 +++++++++++----------
 2 files changed, 227 insertions(+), 106 deletions(-)

diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index 958635f..552c4c1 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -1,33 +1,94 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+  <div>
+    <!-- Daftar Item -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      <div
+        v-for="item in filteredItems"
+        :key="item.id"
+        class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition cursor-pointer"
+        @click="openMovePopup(item)"
+      >
+        <!-- Gambar & Info Produk -->
+        <div class="flex items-center gap-3">
+          <img
+            v-if="item.produk.foto?.length"
+            :src="item.produk.foto[0].url"
+            class="size-12 object-contain"
+          />
+          <div>
+            <p class="font-semibold">{{ item.produk.nama }}</p>
+            <p class="text-sm text-gray-500">ID: {{ item.produk.id }}</p>
+          </div>
+        </div>
+
+        <!-- Berat -->
+        <span class="font-medium">{{ item.produk.berat }}g</span>
+      </div>
+    </div>
+
+    <!-- Modal Pindah Nampan -->
     <div
-      v-for="item in filteredItems"
-      :key="item.id"
-      class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition"
+      v-if="isPopupVisible"
+      class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
     >
-      <!-- Gambar -->
-      <div class="flex items-center gap-3">
-        <img
-           v-if="item.produk.foto && item.produk.foto.length > 0"
-      :src="item.produk.foto[0].url"
-          class="w-12 h-12 object-contain"
-        />
-        <!-- Info produk -->
-        <div>
-          <p class="font-semibold">{{ item.produk.nama }}</p>
-          <p class="text-sm text-gray-500">{{ item.produk.id }}</p>
+      <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
+        <!-- QR Code -->
+        <div class="flex justify-center mb-4">
+          <div class="p-2 border rounded-lg">
+            <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
+          </div>
+        </div>
+
+        <!-- Info Produk -->
+        <div class="text-center text-gray-700 font-medium mb-1">
+          {{ selectedItem?.produk?.nama }}
+        </div>
+        <div class="text-center text-gray-500 text-sm mb-4">
+          {{ selectedItem?.produk?.kategori }}
+        </div>
+
+        <!-- Dropdown pilih nampan -->
+        <div class="mb-4">
+          <label for="tray-select" class="block text-sm font-medium mb-1">
+            Nama Nampan
+          </label>
+          <select
+            id="tray-select"
+            v-model="selectedTrayId"
+            class="w-full rounded-md border shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          >
+            
+            <option v-for="tray in trays" :key="tray.id" :value="tray.id">
+              {{ tray.nama }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Tombol -->
+        <div class="flex justify-end gap-2">
+          <button
+            @click="closePopup"
+            class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100 transition"
+          >
+            Batal
+          </button>
+          <button
+            @click="saveMove"
+            :disabled="!selectedTrayId"
+            class="px-4 py-2 rounded text-white transition"
+            :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
+          >
+            Simpan
+          </button>
         </div>
       </div>
-
-      <!-- Berat -->
-      <span class="font-medium">{{ item.produk.berat }}g</span>
     </div>
   </div>
 </template>
 
+
+
 <script setup>
-
-
 import { ref, computed, onMounted } from "vue";
 import axios from "axios";
 
@@ -39,26 +100,81 @@ const props = defineProps({
 });
 
 const items = ref([]);
-const produk = ref([])
+const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
 
-onMounted(async () => {
-  try {
-    const res = await axios.get("/api/item",{
-        headers:{
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-        }
-    }); // ganti sesuai URL backend
-    items.value = res.data; // pastikan backend return array of items
-    console.log(res.data);
+// --- state modal
+const isPopupVisible = ref(false);
+const selectedItem = ref(null);
+const selectedTrayId = ref("");
 
+// QR Code generator
+const qrCodeUrl = computed(() => {
+  if (selectedItem.value) {
+    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
+    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
+      data
+    )}`;
+  }
+  return "";
+});
+
+// --- fungsi modal
+const openMovePopup = (item) => {
+  selectedItem.value = item;
+  selectedTrayId.value = item.id_nampan;
+  isPopupVisible.value = true;
+};
+const closePopup = () => {
+  isPopupVisible.value = false;
+  selectedItem.value = null;
+  selectedTrayId.value = "";
+};
+
+const saveMove = async () => {
+  if (!selectedTrayId.value || !selectedItem.value) return;
+  try {
+    await axios.put(
+      `/api/item/${selectedItem.value.id}`,
+      {
+        id_nampan: selectedTrayId.value,
+        id_produk: selectedItem.value.id_produk,
+      },
+      {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }
+    );
+
+    await refreshData();
+    closePopup();
+  } catch (err) {
+    console.error("Gagal memindahkan item:", err.response?.data || err);
+    alert("Gagal memindahkan item. Silakan coba lagi.");
+  }
+};
+
+// --- ambil data
+const refreshData = async () => {
+  try {
+    const [itemRes, trayRes] = await Promise.all([
+      axios.get("/api/item", {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }),
+      axios.get("/api/nampan", {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }),
+    ]);
+    items.value = itemRes.data;
+    trays.value = trayRes.data;
   } catch (err) {
     error.value = err.message || "Gagal mengambil data";
   } finally {
     loading.value = false;
   }
-});
+};
+
+onMounted(refreshData);
 
 const filteredItems = computed(() => {
   if (!props.search) return items.value;
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index addc53e..bfb499f 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -4,36 +4,42 @@
 
     <div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
 
-    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-30">
+    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-[120px]">
       Nampan tidak ditemukan.
     </div>
 
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-      <div v-for="tray in filteredTrays" :key="tray.id"
-        class="border border-C rounded-lg p-4 shadow-sm hover:shadow-md transition">
+      <div
+        v-for="tray in filteredTrays"
+        :key="tray.id"
+        class="border rounded-xl p-4 shadow-sm hover:shadow-md transition"
+      >
         <div class="flex justify-between items-center mb-3">
-          <h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
+          <h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
           <div class="flex gap-2">
-            <button class="p-2 rounded bg-yellow-400 hover:bg-yellow-500" @click="emit('edit', tray)">
-              ✏️
-            </button>
-            <button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">
-              🗑️
-            </button>
+            <button class="p-2 rounded bg-yellow-400 hover:bg-yellow-500" @click="emit('edit', tray)">✏️</button>
+            <button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">🗑️</button>
           </div>
         </div>
 
-        <div v-if="tray.items && tray.items.length > 0" class="space-y-2 max-h-64 overflow-y-auto pr-2">
-          <div v-for="item in tray.items" :key="item.id" class="flex justify-between items-center border border-C rounded-lg p-2"
-            @click="openMovePopup(item)">
-
+        <div v-if="tray.items && tray.items.length" class="space-y-2 max-h-64 overflow-y-auto pr-2">
+          <div
+            v-for="item in tray.items"
+            :key="item.id"
+            class="flex justify-between items-center border rounded-lg p-2 cursor-pointer hover:bg-gray-50"
+            @click="openMovePopup(item)"
+          >
             <div class="flex items-center gap-3">
-              <img v-if="item.produk.foto && item.produk.foto.length > 0" :src="item.produk.foto[0].url"
-                alt="foto produk" class="w-12 h-12 object-cover rounded" />
-              <div>
-                <p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
-                <p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p>
-                <p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
+              <img
+                v-if="item.produk.foto && item.produk.foto.length > 0"
+                :src="item.produk.foto[0].url"
+                alt="foto produk"
+                class="size-12 object-cover rounded"
+              />
+              <div class="text-[#102C57]">
+                <p class="text-sm">{{ item.produk.nama }}</p>
+                <p class="text-sm">{{ item.produk.kategori }}</p>
+                <p class="text-sm">{{ item.produk.harga_jual.toLocaleString() }}</p>
               </div>
             </div>
             <div class="flex items-center gap-2">
@@ -55,37 +61,57 @@
   </div>
 
   <!-- Pop-up pindah item -->
-  <div v-if="isPopupVisible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-    <div class="bg-white rounded-lg shadow-lg max-w-sm w-full p-6 relative">
+  <div
+    v-if="isPopupVisible"
+    class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
+  >
+    <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
       <div class="flex justify-center mb-4">
-        <div class="p-2 border border-gray-300 rounded-lg">
-          <img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
+        <div class="p-2 border rounded-lg">
+          <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
         </div>
       </div>
+
       <div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div>
       <div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div>
+
       <div class="flex justify-center mb-4">
         <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
           Cetak
         </button>
       </div>
+
+      <!-- Dropdown: langsung pilih Nampan saat ini -->
       <div class="mb-4">
-        <label for="tray-select" class="block text-sm font-medium text-gray-700 mb-1">Nama Nampan</label>
-        <select id="tray-select" v-model="selectedTrayId"
-          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
-          <option value="" disabled>Pilih Nampan</option>
-          <option v-for="tray in availableTrays" :key="tray.id" :value="tray.id">
-            {{ tray.nama }}
+        <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
+        <select
+          id="tray-select"
+          v-model="selectedTrayId"
+          class="w-full rounded-md border shadow-sm focus:outline-none focus:ring focus:ring-indigo-200"
+        >
+          <option
+            v-for="tray in trays"
+            :key="tray.id"
+            :value="tray.id"
+          >
+            {{ tray.nama }}<span v-if="Number(tray.id) === Number(selectedItem?.id_nampan)"></span>
           </option>
         </select>
       </div>
+
       <div class="flex justify-end gap-2">
-        <button @click="closePopup"
-          class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition">
+        <button
+          @click="closePopup"
+          class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100 transition"
+        >
           Batal
         </button>
-        <button @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded text-white transition"
-          :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'">
+        <button
+          @click="saveMove"
+          :disabled="!selectedTrayId"
+          class="px-4 py-2 rounded text-white transition"
+          :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
+        >
           Simpan
         </button>
       </div>
@@ -98,10 +124,7 @@ import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 
 const props = defineProps({
-  search: {
-    type: String,
-    default: "",
-  },
+  search: { type: String, default: "" },
 });
 const emit = defineEmits(["edit", "delete"]);
 const trays = ref([]);
@@ -116,16 +139,16 @@ const selectedTrayId = ref("");
 // QR Code generator
 const qrCodeUrl = computed(() => {
   if (selectedItem.value) {
-    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, '')}`;
+    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
     return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
   }
-  return '';
+  return "";
 });
 
 // --- Fungsi Pop-up ---
 const openMovePopup = (item) => {
   selectedItem.value = item;
-  selectedTrayId.value = "";
+  selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
   isPopupVisible.value = true;
 };
 
@@ -138,18 +161,16 @@ const closePopup = () => {
 const saveMove = async () => {
   if (!selectedTrayId.value || !selectedItem.value) return;
   try {
-    await axios.put(`/api/item/${selectedItem.value.id}`,
-  {
-    id_nampan: selectedTrayId.value,
-    id_produk: selectedItem.value.id_produk,
-  },
-  {
-    headers: {
-      Authorization: `Bearer ${localStorage.getItem("token")}`,
-    },
-  }
-);
-
+    await axios.put(
+      `/api/item/${selectedItem.value.id}`,
+      {
+        id_nampan: selectedTrayId.value,
+        id_produk: selectedItem.value.id_produk,
+      },
+      {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }
+    );
 
     await refreshData();
     closePopup();
@@ -159,32 +180,24 @@ const saveMove = async () => {
   }
 };
 
-
 // --- Ambil data nampan + item ---
 const refreshData = async () => {
   try {
     const [nampanRes, itemRes] = await Promise.all([
       axios.get("/api/nampan", {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }),
       axios.get("/api/item", {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }),
     ]);
     const nampans = nampanRes.data;
     const items = itemRes.data;
 
-    trays.value = nampans.map((tray) => {
-      return {
-        ...tray,
-        // pastikan tipe sama (string/number)
-        items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
-      };
-    });
+    trays.value = nampans.map((tray) => ({
+      ...tray,
+      items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
+    }));
   } catch (err) {
     error.value = err.message || "Gagal mengambil data";
   } finally {
@@ -207,14 +220,6 @@ const filteredTrays = computed(() => {
   );
 });
 
-// Daftar nampan lain (selain tempat item saat ini)
-const availableTrays = computed(() => {
-  if (!selectedItem.value || !trays.value) return [];
-  return trays.value.filter(
-    (tray) => Number(tray.id) !== Number(selectedItem.value.id_nampan)
-  );
-});
-
 onMounted(() => {
   refreshData();
 });

From b9c562d0a28f9329fbfd70af557166e74e44e555 Mon Sep 17 00:00:00 2001
From: dhilanradya <akundhilan@gmail.com>
Date: Tue, 9 Sep 2025 11:24:13 +0700
Subject: [PATCH 3/4] [update] revisi struk

---
 resources/js/components/StrukOverlay.vue | 218 +++++++++++------------
 1 file changed, 109 insertions(+), 109 deletions(-)

diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue
index 7dfe40d..5f058cf 100644
--- a/resources/js/components/StrukOverlay.vue
+++ b/resources/js/components/StrukOverlay.vue
@@ -52,121 +52,119 @@
         <!-- 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>
+       <table class="w-full border-D mt-0 text-sm table-fixed">
+  <thead>
+    <tr class="border-b border-D">
+      <th class="w-[260px] py-2 border-r border-D">Item</th>
+      <th class="w-[70px] border-r border-D">Posisi</th>
+      <th class="w-[60px] border-r border-D">Berat</th>
+      <th class="w-[60px] border-r border-D">Kadar</th>
+      <th class="w-[140px] border-r border-D">Harga Satuan</th>
+      <th class="w-[60px] border-r border-D">Jumlah</th>
+      <th class="w-[140px]">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>
+    <!-- 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>
+    <!-- Baris Ongkos + Total -->
+    <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 <br> dipotong ongkos bikin, barang rusak lain harga.</li>
+          <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
+          <li>Surat ini harap dibawa pada saat menjual kembali.</li>
+        </ol>
+      </td>
+
+      <td colspan="2" 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 cursor-pointer !w-[160px] text-center [option]:text-left"
+            />
+
+        </div>
+      </td>
+
+      <td colspan="2"  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>
+
+    <!-- Baris Tombol -->
+    <tr>
+      <td></td>
+      <td></td>
+      <td class="p-2 text-center">
+        <div class="flex gap-2">
+          <button class="bg-gray-400 text-white px-6 py-2 rounded w-full">
+            Batal
+          </button>
+          <button class="bg-C text-white px-6 py-2 rounded w-full">
+            Simpan
+          </button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
 
 
-              <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 -->
@@ -179,6 +177,8 @@
   </div>
 </template>
 
+
+
 <script setup>
 import { ref } from 'vue'
 import logo from '@/../images/logo.png'

From 634c0683b5fc74f20cbd860d324f4009247a3d95 Mon Sep 17 00:00:00 2001
From: timotiabbauftech <timotiabbauftech@gmail.com>
Date: Tue, 9 Sep 2025 11:34:19 +0700
Subject: [PATCH 4/4] [update] Kasir, KasirForm, KasirTransaksiList Responsive
 Mobile Desktop

---
 ...42_create_personal_access_tokens_table.php |  33 +++
 resources/js/components/KasirForm.vue         | 272 +++++++++---------
 .../js/components/KasirTransaksiList.vue      |  49 ++--
 resources/js/pages/Kasir.vue                  | 156 +++++-----
 4 files changed, 291 insertions(+), 219 deletions(-)
 create mode 100644 database/migrations/2025_09_03_140242_create_personal_access_tokens_table.php

diff --git a/database/migrations/2025_09_03_140242_create_personal_access_tokens_table.php b/database/migrations/2025_09_03_140242_create_personal_access_tokens_table.php
new file mode 100644
index 0000000..40ff706
--- /dev/null
+++ b/database/migrations/2025_09_03_140242_create_personal_access_tokens_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('personal_access_tokens', function (Blueprint $table) {
+            $table->id();
+            $table->morphs('tokenable');
+            $table->text('name');
+            $table->string('token', 64)->unique();
+            $table->text('abilities')->nullable();
+            $table->timestamp('last_used_at')->nullable();
+            $table->timestamp('expires_at')->nullable()->index();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('personal_access_tokens');
+    }
+};
diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
index 567a23b..1e09dbe 100644
--- a/resources/js/components/KasirForm.vue
+++ b/resources/js/components/KasirForm.vue
@@ -1,143 +1,151 @@
 <template>
-<ConfirmDeleteModal
-  :isOpen="showDeleteModal"
-  title="Konfirmasi"
-  message="Yakin ingin menghapus item ini?"
-  @confirm="hapusPesanan"
-  @cancel="closeDeleteModal"
-/>
+  <ConfirmDeleteModal
+    v-if="showDeleteModal"
+    :isOpen="showDeleteModal"
+    title="Konfirmasi"
+    message="Yakin ingin menghapus item ini?"
+    @confirm="hapusPesanan"
+    @cancel="closeDeleteModal"
+  />
 
-    <div>
-        <div class="grid grid-cols-2 h-full gap-4 mb-4">
-            <div class="flex flex-col gap-4">
-                <div>
-                    <label class="block text-sm font-medium text-D"
-                        >Kode Item *</label
-                    >
-                    <div
-                        class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"
-                    >
-                        <input
-                            type="text"
-                            v-model="kodeItem"
-                            @keyup.enter="inputItem"
-                            placeholder="Scan atau masukkan kode item"
-                            class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md"
-                        />
-                        <button
-                            v-if="!loadingItem"
-                            @click="inputItem"
-                            class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"
-                        >
-                            <i class="fas fa-arrow-right"></i>
-                        </button>
-                        <div
-                            v-else
-                            class="flex items-center justify-center px-3"
-                        >
-                            <div
-                                class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"
-                            >
-                                <i class="fas fa-spinner"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-D"
-                        >Harga Jual</label
-                    >
-                    <InputField
-                        v-model="hargaJual"
-                        type="number"
-                        placeholder="Masukkan Harga Jual"
-                    />
-                </div>
-
-                <div class="flex justify-between gap-4">
-                    <button
-                        @click="tambahItem"
-                        class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
-                    >
-                        Tambah Item
-                    </button>
-                    <button
-                        @click="konfirmasiPenjualan"
-                        class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
-                    >
-                        Lanjut
-                    </button>
-                </div>
-            </div>
-            <div class="flex pt-10 justify-center">
-                <div class="text-start">
-                    <span class="block text-gray-600 font-medium">Total:</span>
-                    <span class="text-3xl font-bold text-D">
-                        Rp{{ total.toLocaleString() }},-
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="mb-4">
-            <p
-                v-if="error"
-                :class="{ 'animate-shake': error }"
-                class="text-sm text-red-600 mt-1"
+  <div class="p-2 sm:p-4">
+    <!-- Grid Form & Total -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+      <!-- Input Form -->
+      <div class="order-2 md:order-1 flex flex-col gap-4">
+        <!-- Input Kode Item -->
+        <div>
+          <label class="block text-sm font-medium text-D">Kode Item *</label>
+          <div
+            class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"
+          >
+            <input
+              type="text"
+              v-model="kodeItem"
+              @keyup.enter="inputItem"
+              placeholder="Scan atau masukkan kode item"
+              class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md"
+            />
+            <button
+              v-if="!loadingItem"
+              @click="inputItem"
+              class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"
             >
-                {{ error }}
-            </p>
-            <p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
+              <i class="fas fa-arrow-right"></i>
+            </button>
+            <div v-else class="flex items-center justify-center px-3">
+              <div
+                class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"
+              >
+                <i class="fas fa-spinner"></i>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <table
-            class="w-full border border-B text-sm rounded-lg overflow-hidden"
-        >
-            <thead class="bg-A text-D">
-                <tr>
-                    <th class="border border-B p-2">No</th>
-                    <th class="border border-B p-2">Nam Produk</th>
-                    <th class="border border-B p-2">Posisi</th>
-                    <th class="border border-B p-2">Harga</th>
-                    <th class="border border-B p-2"></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-if="pesanan.length == 0" class="text-center text-D/70">
-                    <td colspan="5" class="h-20 border border-B">
-                        Belum ada item dipesan
-                    </td>
-                </tr>
-                <tr
-                    v-else
-                    v-for="(item, index) in pesanan"
-                    :key="index"
-                    class="hover:bg-gray-50 text-center"
-                >
-                    <td class="border border-B p-2">{{ index + 1 }}</td>
-                    <td class="border border-B p-2 text-left">
-                        {{ item.produk.nama }}
-                    </td>
-                    <td class="border border-B p-2">
-                        {{ item.posisi ? item.posisi : "Brankas" }}
-                    </td>
-                    <td class="border border-B p-2">
-                        Rp{{ item.harga_deal.toLocaleString() }}
-                    </td>
-                    <td class="border border-B p-2 text-center">
-                        <button
-                            @click="openDeleteModal(index)"
-                            class="text-red-500 hover:text-red-700"
-                        >
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <!-- Input Harga Jual -->
+        <div>
+          <label class="block text-sm font-medium text-D">Harga Jual</label>
+          <InputField
+            v-model="hargaJual"
+            type="number"
+            placeholder="Masukkan Harga Jual"
+          />
+        </div>
+
+        <!-- Tombol Aksi -->
+        <div class="flex flex-col sm:flex-row justify-between gap-2">
+          <button
+            @click="tambahItem"
+            class="w-full sm:w-auto px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
+          >
+            Tambah Item
+          </button>
+          <button
+            @click="konfirmasiPenjualan"
+            class="w-full sm:w-auto px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
+          >
+            Lanjut
+          </button>
+        </div>
+      </div>
+
+      <!-- Total -->
+      <div class="order-1 md:order-2 flex flex-col md:flex-row md:items-center md:justify-center gap-1">
+        <div class="text-left md:text-start">
+          <span class="block text-gray-600 font-medium">Total:</span>
+          <span class="text-2xl sm:text-3xl font-bold text-D">
+            Rp{{ total.toLocaleString() }},-
+          </span>
+        </div>
+      </div>
     </div>
+
+    <!-- Error & Info -->
+    <div class="mb-4">
+      <p
+        v-if="error"
+        :class="{ 'animate-shake': error }"
+        class="text-sm text-red-600 mt-1"
+      >
+        {{ error }}
+      </p>
+      <p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
+    </div>
+
+    <!-- Table Responsive -->
+<div class="overflow-x-auto">
+  <table
+    class="w-full border border-B rounded-lg overflow-hidden text-xs sm:text-sm"
+  >
+    <thead class="bg-A text-D">
+      <tr>
+        <th class="border border-B p-2 w-8">No</th>
+        <th class="border border-B p-2">Nama Produk</th>
+        <th class="border border-B p-2">Posisi</th>
+        <th class="border border-B p-2">Harga</th>
+        <th class="border border-B p-2 w-10"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-if="pesanan.length == 0" class="text-center text-D/70">
+        <td colspan="5" class="h-16 border border-B text-xs sm:text-sm">
+          Belum ada item dipesan
+        </td>
+      </tr>
+      <tr
+        v-else
+        v-for="(item, index) in pesanan"
+        :key="index"
+        class="hover:bg-gray-50 text-center"
+      >
+        <td class="border border-B p-2">{{ index + 1 }}</td>
+        <td class="border border-B p-2 text-left truncate max-w-[120px] sm:max-w-none">
+          {{ item.produk.nama }}
+        </td>
+        <td class="border border-B p-2 truncate max-w-[80px]">
+          {{ item.posisi ? item.posisi : "Brankas" }}
+        </td>
+        <td class="border border-B p-2 whitespace-nowrap">
+          Rp{{ item.harga_deal.toLocaleString() }}
+        </td>
+        <td class="border border-B p-2 text-center">
+          <button
+            @click="openDeleteModal(index)"
+            class="text-red-500 hover:text-red-700"
+          >
+            <i class="fas fa-trash"></i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+  </div>
 </template>
 
+
 <script setup>
 import { ref, computed } from "vue";
 import InputField from "./InputField.vue";
diff --git a/resources/js/components/KasirTransaksiList.vue b/resources/js/components/KasirTransaksiList.vue
index 5944287..f5f0770 100644
--- a/resources/js/components/KasirTransaksiList.vue
+++ b/resources/js/components/KasirTransaksiList.vue
@@ -1,26 +1,31 @@
 <template>
-  <h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
-  <table class="w-full border border-B rounded-lg text-sm">
-    <thead class="bg-A text-D">
-      <tr>
-        <th class="border border-B p-2">Tanggal</th>
-        <th class="border border-B p-2">Kode Transaksi</th>
-        <th class="border border-B p-2">Pendapatan</th>
-        <th class="border border-B p-2">Detail Item</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A">
-        <td class="border border-B p-2">{{ trx.tanggal }}</td>
-        <td class="border border-B p-2">{{ trx.kode }}</td>
-        <td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
-        <td class="border border-B p-2 text-center">
-          <button @click="$emit('detail', trx)"
-            class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">Detail</button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="overflow-x-auto">
+    <h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
+    <table class="w-full min-w-[500px] border border-B rounded-lg text-sm">
+      <thead class="bg-A text-D">
+        <tr>
+          <th class="border border-B p-2 text-left">Tanggal</th>
+          <th class="border border-B p-2 text-left">Kode Transaksi</th>
+          <th class="border border-B p-2 text-left">Pendapatan</th>
+          <th class="border border-B p-2 text-center">Detail Item</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A">
+          <td class="border border-B p-2">{{ trx.tanggal }}</td>
+          <td class="border border-B p-2">{{ trx.kode }}</td>
+          <td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
+          <td class="border border-B p-2 text-center">
+            <button 
+              @click="$emit('detail', trx)"
+              class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">
+              Detail
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script setup>
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
index 55232a9..0020cd0 100644
--- a/resources/js/pages/Kasir.vue
+++ b/resources/js/pages/Kasir.vue
@@ -1,79 +1,105 @@
 <template>
-  <mainLayout>
-    <div class="lg:p-2 pt-6">
-      <div class="grid grid-cols-1 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]">
-        <!-- Left Section - Form Kasir -->
-        <div class="lg:col-span-3">
-          <div class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-full">
-            <div class="p-2 md:p-4 h-full">
-              <KasirForm />
-            </div>
-          </div>
-        </div>
+    <mainLayout>
+        <div class="lg:p-2 pt-6">
+            <div
+                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]"
+            >
+                <!-- Left Section - Form Kasir -->
+                <div class="lg:col-span-3">
+                    <div
+                        class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-auto lg:h-full"
+                    >
+                        <div class="p-2 sm:p-3 md:p-4 h-auto lg:h-full">
+                            <KasirForm />
+                        </div>
+                    </div>
+                </div>
 
-        <!-- Right Section - Transaction List -->
-        <div class="lg:col-span-2">
-          <div class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4">
-            <!-- Transaction List Content -->
-            <div class="p-4 sm:p-6 overflow-y-auto">
-              <!-- Loading State -->
-              <div v-if="loading" class="flex items-center justify-center py-8">
-                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
-                <span class="ml-3 text-D/70">Memuat transaksi...</span>
-              </div>
-              
-              <!-- Empty State -->
-              <div v-else-if="!transaksi.length" class="text-center py-8">
-                <svg class="w-16 h-16 mx-auto text-B mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 
-                        d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-                </svg>
-                <p class="text-[var(--color-D)]/60 text-sm">Belum ada transaksi</p>
-              </div>
-              
-              <!-- Transaction List -->
-              <KasirTransaksiList 
-                v-else
-                :transaksi="transaksi" 
-                @detail="lihatDetail" 
-              />
+                <!-- Right Section - Transaction List -->
+                <div class="lg:col-span-2">
+                    <div
+                        class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4 max-h-[70vh] overflow-y-auto"
+                    >
+                        <div class="p-3 sm:p-4 md:p-6">
+                            <!-- Loading -->
+                            <div
+                                v-if="loading"
+                                class="flex items-center justify-center py-8"
+                            >
+                                <div
+                                    class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"
+                                ></div>
+                                <span class="ml-3 text-D/70"
+                                    >Memuat transaksi...</span
+                                >
+                            </div>
+
+                            <!-- Empty -->
+                            <div
+                                v-else-if="!transaksi.length"
+                                class="text-center py-8"
+                            >
+                                <svg
+                                    class="w-16 h-16 mx-auto text-B mb-4"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="1"
+                                        d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                                    />
+                                </svg>
+                                <p class="text-[var(--color-D)]/60 text-sm">
+                                    Belum ada transaksi
+                                </p>
+                            </div>
+
+                            <!-- Transaction List -->
+                            <KasirTransaksiList
+                                v-else
+                                :transaksi="transaksi"
+                                @detail="lihatDetail"
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </mainLayout>
+    </mainLayout>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue"
-import axios from "axios"
+import { ref, onMounted } from "vue";
+import axios from "axios";
 
-import mainLayout from '../layouts/mainLayout.vue'
-import KasirForm from '../components/KasirForm.vue'
-import KasirTransaksiList from '../components/KasirTransaksiList.vue'
+import mainLayout from "../layouts/mainLayout.vue";
+import KasirForm from "../components/KasirForm.vue";
+import KasirTransaksiList from "../components/KasirTransaksiList.vue";
 
-const transaksi = ref([])
-const loading = ref(true)
+const transaksi = ref([]);
+const loading = ref(true);
 
 onMounted(async () => {
-  try {
-    loading.value = true
-    const res = await axios.get("/api/transaksi?limit=10", {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
-    })
-    
-    transaksi.value = res.data
-  } catch (err) {
-    console.error("Gagal fetch transaksi:", err)
-  } finally {
-    loading.value = false
-  }
-})
+    try {
+        loading.value = true;
+        const res = await axios.get("/api/transaksi?limit=10", {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });
+
+        transaksi.value = res.data;
+    } catch (err) {
+        console.error("Gagal fetch transaksi:", err);
+    } finally {
+        loading.value = false;
+    }
+});
 
 const lihatDetail = (trx) => {
-  alert(`Detail transaksi: ${trx.kode}`)
-}
+    alert(`Detail transaksi: ${trx.kode}`);
+};
 </script>