From 9ccc26455ebbc0c6c22b15af23bdfb7e971a46f3 Mon Sep 17 00:00:00 2001
From: Baghaztra <baghaztra21@gmail.com>
Date: Fri, 24 Oct 2025 05:16:15 +0700
Subject: [PATCH] Penyesuaian tabel dan SEO

---
 resources/js/components/BrankasTabel.vue | 85 +++++++++++++-----------
 resources/js/components/TrayList.vue     | 10 +--
 resources/views/app.blade.php            | 18 ++---
 3 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/resources/js/components/BrankasTabel.vue b/resources/js/components/BrankasTabel.vue
index eae6f26..d468d54 100644
--- a/resources/js/components/BrankasTabel.vue
+++ b/resources/js/components/BrankasTabel.vue
@@ -52,45 +52,52 @@
       {{ props.search ? 'Item tidak ditemukan.' : 'Brankas kosong.' }}
     </div>
 
-    <div v-else class="overflow-x-auto border border-C rounded-lg shadow-sm">
-      <table class="min-w-full divide-y divide-C">
-        <thead class="bg-A">
-          <tr>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
-              Gambar
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
-              Nama Produk
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
-              Kode Item
-            </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
-              Berat
-            </th>
+    <div class="bg-white rounded-lg shadow-md overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="bg-C text-white border-D border">
+            <th class="px-6 py-4 text-center border-r border-D text-D">No</th>
+            <th class="px-6 py-4 text-center border-r border-D text-D">Nama Produk</th>
+            <th class="px-6 py-4 text-center border-r border-D text-D">Kode Item</th>
+            <th class="px-6 py-4 text-center border-r border-D text-D">Berat</th>
+            <th class="px-6 py-4 text-center text-D">Aksi</th>
           </tr>
         </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
-          <tr v-for="item in filteredItems" :key="item.id"
-            class="hover:bg-gray-50 transition cursor-pointer"
-            @click="openMovePopup(item)">
-            <td class="px-6 py-4 whitespace-nowrap">
-              <img v-if="item.produk?.foto?.length" :src="item.produk?.foto[0].url" 
-                class="size-12 object-cover rounded"
-                @error="handleImageError" />
-              <div class="size-12 bg-gray-200 rounded flex items-center justify-center" v-else>
-                <i class="fas fa-image text-gray-400"></i>
+        <tbody>
+          <tr v-for="(item, index) in filteredItems" :key="item.id"
+            class="border-b border-C border-t-0 border-x hover:bg-gray-50 transition duration-150"
+            :class="{ 'bg-gray-50': index % 2 === 1 }">
+            <td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
+              {{ index + 1 }}
+            </td>
+            <td class="px-6 py-4 border-r border-C text-D font-semibold">
+              {{ item.produk?.nama }}
+            </td>
+            <td class="px-6 py-4 border-r border-C text-gray-800 font-semibold">
+              {{ item.kode_item }}
+            </td>
+            <td class="px-6 py-4 border-r border-C text-D font-medium">
+              {{ item.produk?.berat }}g
+            </td>
+            <td class="px-6 py-4 text-center">
+              <button @click="openMovePopup(item)"
+                class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-200">
+                Detail
+              </button>
+            </td>
+          </tr>
+
+          <!-- Empty State -->
+          <tr v-if="filteredItems.length === 0">
+            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+              <div class="flex flex-col items-center">
+                <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13h2" />
+                </svg>
+                <p>Tidak ada data item di brankas</p>
               </div>
             </td>
-            <td class="px-6 py-4 whitespace-nowrap">
-              <p class="font-semibold text-D">{{ item.produk?.nama }}</p>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap">
-              <p class="text-sm text-gray-500 font-semibold">{{ item.kode_item }}</p>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap">
-              <span class="font-medium text-D">{{ item.produk?.berat }}g</span>
-            </td>
           </tr>
         </tbody>
       </table>
@@ -202,7 +209,7 @@ const selectedItem = ref(null);
 const selectedTrayId = ref("");
 const errorMove = ref("");
 const isMoving = ref(false);
-const isAdmin = localStorage.getItem('role') == 'admin'
+const isAdmin = localStorage.getItem('role') == 'owner'
 
 const showDeleteConfirm = ref(false);
 
@@ -223,19 +230,19 @@ const totalWeight = computed(() => {
 
 const filteredItems = computed(() => {
   let filtered = items.value;
-  
+
   if (props.search) {
     filtered = filtered.filter((item) =>
       item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase()) ||
       item.kode_item?.toLowerCase().includes(props.search.toLowerCase())
     );
   }
-  
+
   // Sorting berdasarkan nama produk
   return filtered.sort((a, b) => {
     const nameA = (a.produk?.nama || "").toLowerCase();
     const nameB = (b.produk?.nama || "").toLowerCase();
-    
+
     if (sortOrder.value === "asc") {
       return nameA.localeCompare(nameB);
     } else {
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index aa66c69..4bbbc75 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -91,17 +91,17 @@
         <!-- Dropdown -->
         <div class="mb-4">
           <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
-          <InputSelect v-if="isAdmin" v-model="selectedTrayId"
+          <InputSelect v-model="selectedTrayId"
             :options="[ { label: 'Brankas', value: 0 }, ...trays.map(tray => ({ label: tray.nama, value: tray.id })) ]" placeholder="Pilih Nampan"
             class="mt-2" />
-          <div class="bg-A px-3 py-2 rounded text-D font-medium" v-else>
+          <!-- <div class="bg-A px-3 py-2 rounded text-D font-medium" v-else>
             {{trays.find(tray => tray.id === selectedTrayId)?.nama}}
-          </div>
+          </div> -->
         </div>
 
         <div class="flex justify-end gap-2">
             <button @click="closePopup" class="px-4 py-2 rounded bg-gray-400 hover:bg-gray-500 text-white transition">
-                {{ isAdmin ? 'Batal' : 'Tutup' }}
+                Batal
             </button>
 
             <!-- Tombol Hapus hanya muncul kalau Admin -->
@@ -110,7 +110,7 @@
                 <i class="fas fa-trash mr-2"></i>Hapus
             </button>
 
-            <button v-if="isAdmin" @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
+            <button @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
                 :class="selectedTrayId ? 'bg-C hover:bg-C/80 text-D' : 'bg-gray-400 cursor-not-allowed'">
                 Simpan
             </button>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 37f960c..7dd086e 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -5,21 +5,21 @@
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>@yield('title', config('app.name', 'Abbauf App'))</title>
+    <title>@yield('title', 'Kasir Toko Mas Jakarta Citayam')</title>
 
-    <meta name="description" content="@yield('description', 'Deskripsi default untuk aplikasi Abbauf.')">
-    <meta name="author" content="Nama Anda atau Perusahaan Anda">
+    <meta name="description" content="@yield('description', 'Aplikasi kasir internal untuk pengelolaan transaksi dan stok emas di Toko Mas Jakarta Citayam.')">
+    <meta name="author" content="Abbauf Tech">
 
-    <meta property="og:title" content="@yield('title', config('app.name', 'Abbauf App'))" />
-    <meta property="og:description" content="@yield('description', 'Deskripsi default untuk aplikasi Abbauf.')" />
+    <meta property="og:title" content="@yield('title', 'Kasir Toko Mas Jakarta Citayam')" />
+    <meta property="og:description" content="@yield('description', 'Aplikasi kasir internal untuk pengelolaan transaksi dan stok emas di Toko Mas Jakarta Citayam.')" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="{{ url()->current() }}" />
-    <meta property="og:image" content="@yield('og_image', asset('images/default-social-image.jpg'))" />
+    <meta property="og:image" content="@yield('og_image', asset('build/assets/logo-BATkcDH-.png'))" />
     
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="@yield('title', config('app.name', 'Abbauf App'))">
-    <meta name="twitter:description" content="@yield('description', 'Deskripsi default untuk aplikasi Abbauf.')">
-    <meta name="twitter:image" content="@yield('og_image', asset('images/default-social-image.jpg'))">
+    <meta name="twitter:title" content="@yield('title', 'Kasir Toko Mas Jakarta Citayam')">
+    <meta name="twitter:description" content="@yield('description', 'Aplikasi kasir internal untuk pengelolaan transaksi dan stok emas di Toko Mas Jakarta Citayam.')">
+    <meta name="twitter:image" content="@yield('og_image', asset('build/assets/logo-BATkcDH-.png'))">
 
     <link rel="icon" href="{{ asset('logo.ico') }}" type="image/x-icon">
     <link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">