diff --git a/resources/js/components/searchbar.vue b/resources/js/components/searchbar.vue
index 236637d..398f829 100644
--- a/resources/js/components/searchbar.vue
+++ b/resources/js/components/searchbar.vue
@@ -1,13 +1,14 @@
 <template>
-<div class="flex justify-end mb-4">
-      <input
-        v-model="searchText"
-        type="text"
-        placeholder="Cari ..."
-        class="border border-C bg-A rounded-md px-3 py-2 w-64 focus:outline-none focus:ring-2 focus:ring-blue-400"
-        @input="$emit('update:search', searchText)"
-      />
+  <div class="flex justify-end mb-3">
+    <div class="border border-C bg-A rounded-md w-full sm:w-64 relative items-center">
+      <input v-model="searchText" type="text" placeholder="Cari ..."
+        class="focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md w-full px-3 py-2 "
+        @input="$emit('update:search', searchText)" />
+      <div class="absolute right-3 top-1/2 -translate-y-1/2 text-C">
+       <i class="fas fa-search"></i>
+      </div>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref } from "vue";
diff --git a/resources/js/pages/Brankas.vue b/resources/js/pages/Brankas.vue
index a0e7f2e..180d57c 100644
--- a/resources/js/pages/Brankas.vue
+++ b/resources/js/pages/Brankas.vue
@@ -1,18 +1,17 @@
 <template>
-    <mainLayout>
-        <div class="p-6">
-            <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
-            <searchbar v-model:search="searchQuery" />
-            <BrankasList :search="searchQuery" />
-        </div>
-    </mainLayout>
-
-
+  <mainLayout>
+    <div class="p-6">
+      <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
+      <searchbar v-model:search="searchQuery" />
+      <BrankasList :search="searchQuery" />
+    </div>
+  </mainLayout>
 </template>
+
 <script setup>
 import { ref } from 'vue';
 import mainLayout from '../layouts/mainLayout.vue'
-import searchbar from '../components/searchbar.vue';
+import searchbar from '../components/Searchbar.vue';
 import BrankasList from '../components/BrankasList.vue';
 const searchQuery = ref("");
 </script>
diff --git a/resources/js/pages/Kategori.vue b/resources/js/pages/Kategori.vue
index 1cb505f..b491b35 100644
--- a/resources/js/pages/Kategori.vue
+++ b/resources/js/pages/Kategori.vue
@@ -9,6 +9,7 @@
 			<div class="flex justify-between items-center mb-6">
 
 				<button @click="tambahKategori"
+          v-if="isAdmin"
 					class="px-4 py-2 bg-C text-black rounded-md hover:bg-B transition duration-200 flex items-center gap-2">
 					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
@@ -28,7 +29,7 @@
 							<th class="px-6 py-4 text-center font-semibold border-r border-C">
 								Nama Kategori
 							</th>
-							<th class="px-6 py-4 text-center font-semibold">
+							<th v-if="isAdmin" class="px-6 py-4 text-center font-semibold">
 								Aksi
 							</th>
 						</tr>
@@ -43,7 +44,7 @@
 							<td class="px-6 py-4 border-r border-C text-center text-gray-800">
 								{{ item.nama }}
 							</td>
-							<td class="px-6 py-4 text-center">
+							<td class="px-6 py-4 text-center" v-if="isAdmin">
 								<div class="flex justify-center gap-2">
 									<button @click="ubahKategori(item)"
 										class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
@@ -97,6 +98,8 @@ const detail = ref(null);
 const confirmDeleteOpen = ref(false);
 const kategoriToDelete = ref(null);
 
+const isAdmin = localStorage.getItem("role") === "owner";
+
 // Fetch data kategori dari API
 const fetchKategoris = async () => {
 	loading.value = true;
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 0886dbb..166ac96 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -1,224 +1,139 @@
 <template>
-    <mainLayout>
-        <!-- Modal Buat Item -->
-        <CreateItemModal
-            :isOpen="creatingItem"
-            :product="detail"
-            @close="closeItemModal"
-        />
+  <mainLayout>
+    <!-- Modal Buat Item -->
+    <CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" />
 
-        <!-- Modal Konfirmasi Hapus Produk -->
-        <ConfirmDeleteModal
-            :isOpen="deleting"
-            @cancel="deleting = false"
-            @confirm="deleteProduk"
-            title="Hapus Produk"
-            message="Apakah Anda yakin ingin menghapus produk ini?"
-        />
+    <!-- Modal Konfirmasi Hapus Produk -->
+    <ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
+      message="Apakah Anda yakin ingin menghapus produk ini?" />
 
-        <div class="p-6 min-h-[75vh]">
-            <!-- Judul -->
-            <p class="font-serif italic text-[25px] text-D">PRODUK</p>
+    <div class="p-6 min-h-[75vh]">
+      <!-- Judul -->
+      <p class="font-serif italic text-[25px] text-D">PRODUK</p>
 
-            <!-- 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>
-
-                    <!-- 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 -->
-                        <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>
-
-            <!-- 🔵 Loading State (sama persis dengan kategori) -->
-            <div v-if="loading" class="flex justify-center items-center h-screen">
-                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
-                <span class="ml-2 text-gray-600">Memuat data...</span>
-            </div>
-
-            <!-- 🔵 Grid Produk -->
-            <div
-                v-else
-                class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0"
-            >
-                <ProductCard
-                    v-for="item in filteredProducts"
-                    :key="item.id"
-                    :product="item"
-                    @click="openOverlay(item.id)"
-                />
-
-                <!-- 🔵 Empty State (sama kayak kategori) -->
-                <div
-                    v-if="filteredProducts.length === 0"
-                    class="col-span-full flex flex-col items-center py-10 text-gray-500"
-                >
-                    <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 produk</p>
-                </div>
+      <!-- Wrapper -->
+      <div class="mt-3">
+        <!-- Mobile Layout -->
+        <div class="flex flex-col gap-3 sm:hidden">
+          <searchbar v-model:search="searchQuery" class="w-full" />
+          <div class="flex flex-row justify-between items-center gap-3">
+            <div class="shrink-0">
+              <InputSelect v-model="selectedCategory" :options="kategori" />
             </div>
+            <router-link v-if="isAdmin" to="/produk/baru"
+              class="bg-C text-D px-4 py-2 rounded-md shadow hover:bg-C transition">
+              Tambah Produk
+            </router-link>
+          </div>
         </div>
 
-        <!-- Overlay Detail Produk -->
-        <div
-            v-if="showOverlay"
-            class="fixed inset-0 bg-black/30 flex justify-center items-center"
-            @click.self="closeOverlay"
-        >
-            <div
-                class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center"
-            >
-                <!-- Foto Produk -->
-                <div
-                    class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
-                >
-                    <img
-                        v-if="detail.foto && detail.foto.length > 0"
-                        :src="detail.foto[currentFotoIndex].url"
-                        :alt="detail.nama"
-                        class="w-full h-full object-contain"
-                    />
-                    <span v-else class="text-gray-400 text-sm">[gambar]</span>
+        <!-- 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>
 
-                    <!-- Stok (pcs) pojok kiri atas -->
-                    <div
-                        class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
-                    >
-                        {{ detail.items_count }} pcs
-                    </div>
-
-                    <!-- Tombol Prev -->
-                    <button
-                        v-if="detail.foto && detail.foto.length > 1"
-                        @click.stop="prevFoto"
-                        class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
-                    >
-                        ‹
-                    </button>
-                    <!-- Tombol Next -->
-                    <button
-                        v-if="detail.foto && detail.foto.length > 1"
-                        @click.stop="nextFoto"
-                        class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
-                    >
-                        ›
-                    </button>
-                </div>
-
-                <!-- Nama Produk -->
-                <p class="text-lg font-semibold text-center mb-4">
-                    {{ detail.nama }}
-                </p>
-
-                <!-- Detail Harga & Info -->
-                <div
-                    class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6"
-                >
-                    <p class="col-span-1">Harga Jual :</p>
-                    <p class="col-span-1 text-right">
-                        Rp. {{ formatNumber(detail.harga_jual) }}
-                    </p>
-
-                    <p class="col-span-1">Kadar :</p>
-                    <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
-
-                    <p class="col-span-1">Berat :</p>
-                    <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
-
-                    <p class="col-span-1">Harga/gram :</p>
-                    <p class="col-span-1 text-right">
-                        Rp. {{ formatNumber(detail.harga_per_gram) }}
-                    </p>
-                </div>
-
-                <!-- Tombol Aksi -->
-                <div class="flex w-full gap-3">
-                    <button
-                        @click="$router.push(`/produk/${detail.id}/edit`)"
-                        class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
-                    >
-                        Ubah
-                    </button>
-
-                    <button
-                        @click="openItemModal"
-                        class="bg-green-400 text-black px-4 py-2 rounded font-bold"
-                    >
-                        Tambah
-                    </button>
-                    <button
-                        @click="deleting = true"
-                        class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
-                    >
-                        Hapus
-                    </button>
-                </div>
-            </div>
+          <!-- Search -->
+          <div class="flex-1">
+            <searchbar v-model:search="searchQuery" class="w-full" />
+          </div>
+          <router-link v-if="isAdmin" to="/produk/baru"
+            class="bg-C text-D px-4 py-2 rounded-md shadow hover:bg-C transition">
+            Tambah Produk
+          </router-link>
         </div>
-    </mainLayout>
+      </div>
+
+      <!-- 🔵 Loading State (sama persis dengan kategori) -->
+      <div v-if="loading" class="flex justify-center items-center h-screen">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
+        <span class="ml-2 text-gray-600">Memuat data...</span>
+      </div>
+
+      <!-- 🔵 Grid Produk -->
+      <div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0">
+        <ProductCard v-for="item in filteredProducts" :key="item.id" :product="item" @click="openOverlay(item.id)" />
+
+        <!-- 🔵 Empty State (sama kayak kategori) -->
+        <div v-if="filteredProducts.length === 0" class="col-span-full flex flex-col items-center py-10 text-gray-500">
+          <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 produk</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Overlay Detail Produk -->
+    <div v-if="showOverlay" class="fixed inset-0 bg-black/30 flex justify-center items-center"
+      @click.self="closeOverlay">
+      <div class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center">
+        <!-- Foto Produk -->
+        <div class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded">
+          <img v-if="detail.foto && detail.foto.length > 0" :src="detail.foto[currentFotoIndex].url" :alt="detail.nama"
+            class="w-full h-full object-contain" />
+          <span v-else class="text-gray-400 text-sm">[gambar]</span>
+
+          <!-- Stok (pcs) pojok kiri atas -->
+          <div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
+            {{ detail.items_count }} pcs
+          </div>
+
+          <!-- Tombol Prev -->
+          <button v-if="detail.foto && detail.foto.length > 1" @click.stop="prevFoto"
+            class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
+            ‹
+          </button>
+          <!-- Tombol Next -->
+          <button v-if="detail.foto && detail.foto.length > 1" @click.stop="nextFoto"
+            class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
+            ›
+          </button>
+        </div>
+
+        <!-- Nama Produk -->
+        <p class="text-lg font-semibold text-center mb-4">
+          {{ detail.nama }}
+        </p>
+
+        <!-- Detail Harga & Info -->
+        <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
+          <p class="col-span-1">Harga Jual :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_jual) }}
+          </p>
+
+          <p class="col-span-1">Kadar :</p>
+          <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
+
+          <p class="col-span-1">Berat :</p>
+          <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
+
+          <p class="col-span-1">Harga/gram :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_per_gram) }}
+          </p>
+        </div>
+
+        <!-- Tombol Aksi -->
+        <div v-if="isAdmin" class="flex w-full gap-3">
+          <button @click="$router.push(`/produk/${detail.id}/edit`)"
+            class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
+            Ubah
+          </button>
+
+          <button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
+            Tambah
+          </button>
+          <button @click="deleting = true" class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
+            Hapus
+          </button>
+        </div>
+      </div>
+    </div>
+  </mainLayout>
 </template>
 
 <script setup>
@@ -226,11 +141,13 @@ import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 import mainLayout from "../layouts/mainLayout.vue";
 import ProductCard from "../components/ProductCard.vue";
-import searchbar from "../components/searchbar.vue";
+import searchbar from "../components/Searchbar.vue";
 import CreateItemModal from "../components/CreateItemModal.vue";
 import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
 import InputSelect from "../components/InputSelect.vue";
 
+const isAdmin = localStorage.getItem("role") == "owner";
+
 const products = ref([]);
 const searchQuery = ref("");
 const selectedCategory = ref(0);
@@ -246,137 +163,126 @@ const loading = ref(false); // 🔥 Loading persis kategori
 
 // Load kategori
 const loadKategori = async () => {
-    try {
-        const response = await axios.get("/api/kategori", {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        if (response.data && Array.isArray(response.data)) {
-            kategori.value = [
-                { value: 0, label: "Semua" },
-                ...response.data.map((cat) => ({
-                    value: cat.id,
-                    label: cat.nama,
-                })),
-            ];
-        }
-    } catch (error) {
-        console.error("Error loading categories:", error);
+  try {
+    const response = await axios.get("/api/kategori", {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    if (response.data && Array.isArray(response.data)) {
+      kategori.value = [
+        { value: 0, label: "Semua" },
+        ...response.data.map((cat) => ({
+          value: cat.id,
+          label: cat.nama,
+        })),
+      ];
     }
+  } catch (error) {
+    console.error("Error loading categories:", error);
+  }
 };
 
 // Load produk
 const loadProduk = async () => {
-    loading.value = true; // 🔵 start loading
-    try {
-        const response = await axios.get(`/api/produk`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
+  loading.value = true; // 🔵 start loading
+  try {
+    const response = await axios.get(`/api/produk`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
 
-        if (response.data && Array.isArray(response.data)) {
-            products.value = response.data;
-        }
-    } catch (error) {
-        console.error("Error loading products:", error);
-    } finally {
-        loading.value = false; // 🔵 stop loading
+    if (response.data && Array.isArray(response.data)) {
+      products.value = response.data;
     }
+  } catch (error) {
+    console.error("Error loading products:", error);
+  } finally {
+    loading.value = false; // 🔵 stop loading
+  }
 };
 
 // Modal item
 const openItemModal = () => {
-    creatingItem.value = true;
+  creatingItem.value = true;
 };
 const closeItemModal = () => {
-    creatingItem.value = false;
+  creatingItem.value = false;
 };
 
 // Fetch awal
 onMounted(async () => {
-    await loadKategori();
-    await loadProduk();
+  await loadKategori();
+  await loadProduk();
 });
 
 // Filter produk
 const filteredProducts = computed(() => {
-    let hasil = products.value;
+  let hasil = products.value;
 
-    if (selectedCategory.value != 0) {
-        hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
-    }
+  if (selectedCategory.value != 0) {
+    hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
+  }
 
-    if (searchQuery.value) {
-        hasil = hasil.filter((p) =>
-            p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
-        );
-    }
+  if (searchQuery.value) {
+    hasil = hasil.filter((p) =>
+      p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
+    );
+  }
 
-    return hasil;
+  return hasil;
 });
 
 // Overlay detail
 function openOverlay(id) {
-    const produk = products.value.find((p) => p.id === id);
-    if (produk) {
-        detail.value = produk;
-        currentFotoIndex.value = 0;
-        showOverlay.value = true;
-    }
+  const produk = products.value.find((p) => p.id === id);
+  if (produk) {
+    detail.value = produk;
+    currentFotoIndex.value = 0;
+    showOverlay.value = true;
+  }
 }
 function closeOverlay() {
-    showOverlay.value = false;
-    currentFotoIndex.value = 0;
+  showOverlay.value = false;
+  currentFotoIndex.value = 0;
 }
 
 // Navigasi foto
 function nextFoto() {
-    if (detail.value.foto && detail.value.foto.length > 0) {
-        currentFotoIndex.value =
-            (currentFotoIndex.value + 1) % detail.value.foto.length;
-    }
+  if (detail.value.foto && detail.value.foto.length > 0) {
+    currentFotoIndex.value =
+      (currentFotoIndex.value + 1) % detail.value.foto.length;
+  }
 }
 function prevFoto() {
-    if (detail.value.foto && detail.value.foto.length > 0) {
-        currentFotoIndex.value =
-            (currentFotoIndex.value - 1 + detail.value.foto.length) %
-            detail.value.foto.length;
-    }
+  if (detail.value.foto && detail.value.foto.length > 0) {
+    currentFotoIndex.value =
+      (currentFotoIndex.value - 1 + detail.value.foto.length) %
+      detail.value.foto.length;
+  }
 }
 
 // Format angka
 function formatNumber(num) {
-    return new Intl.NumberFormat().format(num || 0);
+  return new Intl.NumberFormat().format(num || 0);
 }
 
 // Hapus produk
 async function deleteProduk() {
-    try {
-        await axios.delete(`/api/produk/${detail.value.id}`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        products.value = products.value.filter((p) => p.id !== detail.value.id);
-        deleting.value = false;
-        showOverlay.value = false;
-        alert("Produk berhasil dihapus!");
-    } catch (err) {
-        console.error("Gagal hapus produk:", err);
-        alert("Gagal menghapus produk!");
-    }
+  try {
+    await axios.delete(`/api/produk/${detail.value.id}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    products.value = products.value.filter((p) => p.id !== detail.value.id);
+    deleting.value = false;
+    showOverlay.value = false;
+    alert("Produk berhasil dihapus!");
+  } catch (err) {
+    console.error("Gagal hapus produk:", err);
+    alert("Gagal menghapus produk!");
+  }
 }
 </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>
diff --git a/resources/js/pages/Sales.vue b/resources/js/pages/Sales.vue
index d93b08c..db46f82 100644
--- a/resources/js/pages/Sales.vue
+++ b/resources/js/pages/Sales.vue
@@ -1,166 +1,103 @@
 <template>
-    <mainLayout>
-        <!-- Modal Create/Edit Sales -->
-        <CreateSales
-            v-if="creatingSales"
-            :isOpen="creatingSales"
-            :sales="detail"
-            @close="closeSales"
-        />
+  <mainLayout>
+    <!-- Modal Create/Edit Sales -->
+    <CreateSales v-if="creatingSales" :isOpen="creatingSales" :sales="detail" @close="closeSales" />
 
-        <EditSales
-            v-if="editingSales"
-            :isOpen="editingSales"
-            :sales="detail"
-            @close="closeEditSales"
-        />
+    <EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
 
-        <!-- Modal Delete -->
-        <ConfirmDeleteModal
-            :isOpen="confirmDeleteOpen"
-            title="Hapus Sales"
-            message="Apakah Anda yakin ingin menghapus sales ini?"
-            @confirm="confirmDelete"
-            @cancel="closeDeleteModal"
-        />
+    <!-- Modal Delete -->
+    <ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
+      message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
 
-        <div class="p-6 min-h-[75vh]">
-             <p class="font-serif italic text-[25px] text-D">SALES</p>
-            <div class="flex justify-between items-center mb-6">
+    <div class="p-6 min-h-[75vh]">
+      <p class="font-serif italic text-[25px] text-D">SALES</p>
+      <div class="flex justify-between items-center mb-6">
 
-                <button
-                    @click="tambahSales"
-                    class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
-                >
-                    <svg
-                        class="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M12 4v16m8-8H4"
-                        />
-                    </svg>
-                    Tambah Sales
-                </button>
-            </div>
+        <button @click="tambahSales"
+          v-if="isAdmin"
+          class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          Tambah Sales
+        </button>
+      </div>
 
-            <!-- Table Section -->
-            <div
-                class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden"
-            >
-                <table class="w-full">
-                    <thead class="">
-                        <tr class="bg-C text-white">
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                No
-                            </th>
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                Nama Sales
-                            </th>
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                No HP
-                            </th>
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                Alamat
-                            </th>
-                            <th class="px-6 py-4 text-center text-D">Aksi</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr
-                            v-for="(item, index) in sales"
-                            :key="item.id"
-                            class="border-b border-gray-200\ hover:bg-gray-50 transition duration-150"
-                            :class="{ 'bg-gray-50': index % 2 === 1 }"
-                        >
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-center font-medium text-gray-900"
-                            >
-                                {{ index + 1 }}
-                            </td>
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-D"
-                            >
-                                {{ item.nama }}
-                            </td>
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-gray-800"
-                            >
-                                {{ item.no_hp }}
-                            </td>
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-gray-800"
-                            >
-                                {{ item.alamat }}
-                            </td>
-                            <td class="px-6 py-4 text-center">
-                                <div class="flex justify-center gap-2">
-                                    <button
-                                        @click="ubahSales(item)"
-                                        class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
-                                    >
-                                        Ubah
-                                    </button>
-                                    <button
-                                        @click="hapusSales(item)"
-                                        class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
-                                    >
-                                        Hapus
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
+      <!-- Table Section -->
+      <div class="bg-white rounded-lg shadow-md border border-C overflow-x-auto">
+        <table class="w-full ">
+          <thead class="">
+            <tr class="bg-C text-white">
+              <th class="px-6 py-4 text-center text-D">
+                No
+              </th>
+              <th class="px-6 py-4 text-center text-D">
+                Nama Sales
+              </th>
+              <th class="px-6 py-4 text-center text-D">
+                No HP
+              </th>
+              <th class="px-6 py-4 text-center text-D">
+                Alamat
+              </th>
+              <th v-if="isAdmin" class="px-6 py-4 text-center text-D">
+                Aksi
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in sales" :key="item.id"
+              class="border-b border-C 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">
+                {{ item.nama }}
+              </td>
+              <td class="px-6 py-4 border-r border-C text-gray-800">
+                {{ item.no_hp }}
+              </td>
+              <td class="px-6 py-4 border-r border-C text-gray-800">
+                {{ item.alamat }}
+              </td>
+              <td class="px-6 py-4 text-center" v-if="isAdmin">
+                <div class="flex justify-center gap-2">
+                  <button @click="ubahSales(item)"
+                    class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
+                    Ubah
+                  </button>
+                  <button @click="hapusSales(item)"
+                    class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
+                    Hapus
+                  </button>
+                </div>
+              </td>
+            </tr>
 
-                        <!-- Empty State -->
-                        <tr v-if="sales.length === 0 && !loading">
-                            <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 sales</p>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            <!-- Empty State -->
+            <tr v-if="sales.length === 0 && !loading">
+              <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 sales</p>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
-            <!-- Loading State -->
-            <div v-if="loading" class="flex justify-center items-center py-8">
-                <div
-                    class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"
-                ></div>
-                <span class="ml-2 text-gray-600">Memuat data...</span>
-            </div>
-        </div>
-    </mainLayout>
+      <!-- Loading State -->
+      <div v-if="loading" class="flex justify-center items-center py-8">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
+        <span class="ml-2 text-gray-600">Memuat data...</span>
+      </div>
+    </div>
+  </mainLayout>
 </template>
 
 <script setup>
@@ -171,6 +108,8 @@ import CreateSales from "../components/CreateSales.vue";
 import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
 import EditSales from "../components/EditSales.vue";
 
+const isAdmin = localStorage.getItem("role") === "owner";
+
 // State
 const sales = ref([]);
 const loading = ref(false);
@@ -182,71 +121,71 @@ const salesToDelete = ref(null);
 
 // Fetch data dari API
 const fetchSales = async () => {
-    loading.value = true;
-    try {
-        const response = await axios.get("/api/sales", {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        sales.value = response.data;
-    } catch (error) {
-        console.error("Error fetching sales:", error);
-    } finally {
-        loading.value = false;
-    }
+  loading.value = true;
+  try {
+    const response = await axios.get("/api/sales", {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    sales.value = response.data;
+  } catch (error) {
+    console.error("Error fetching sales:", error);
+  } finally {
+    loading.value = false;
+  }
 };
 
 // Tambah
 const tambahSales = () => {
-    detail.value = null;
-    creatingSales.value = true;
+  detail.value = null;
+  creatingSales.value = true;
 };
 
 // Ubah
 const ubahSales = (item) => {
-    detail.value = item;
-    editingSales.value = true;
+  detail.value = item;
+  editingSales.value = true;
 };
 
 // Hapus
 const hapusSales = (item) => {
-    salesToDelete.value = item;
-    confirmDeleteOpen.value = true;
+  salesToDelete.value = item;
+  confirmDeleteOpen.value = true;
 };
 
 const confirmDelete = async () => {
-    try {
-        await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        fetchSales();
-        confirmDeleteOpen.value = false;
-    } catch (error) {
-        console.error("Error deleting sales:", error);
-    }
+  try {
+    await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    fetchSales();
+    confirmDeleteOpen.value = false;
+  } catch (error) {
+    console.error("Error deleting sales:", error);
+  }
 };
 
 const closeDeleteModal = () => {
-    confirmDeleteOpen.value = false;
-    salesToDelete.value = null;
+  confirmDeleteOpen.value = false;
+  salesToDelete.value = null;
 };
 
 // Tutup modal Create/Edit
 const closeSales = () => {
-    creatingSales.value = false;
-    fetchSales();
+  creatingSales.value = false;
+  fetchSales();
 };
 
 const closeEditSales = () => {
-    editingSales.value = false;
-    fetchSales();
+  editingSales.value = false;
+  fetchSales();
 };
 
 // Lifecycle
 onMounted(() => {
-    fetchSales();
+  fetchSales();
 });
 </script>
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index fdc9932..e86d519 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -113,7 +113,7 @@
 import { ref } from "vue";
 import axios from "axios";
 import mainLayout from "../layouts/mainLayout.vue";
-import searchbar from "../components/searchbar.vue";
+import searchbar from "../components/Searchbar.vue";
 import TrayList from "../components/TrayList.vue";
 
 const searchQuery = ref("");