[feat] authorisasi frontend

resources/js/components/searchbar.vue

@@ -1,12 +1,13 @@
 <template>
-<div class="flex justify-end mb-4">
+  <div class="flex justify-end mb-3">
-      <input
+    <div class="border border-C bg-A rounded-md w-full sm:w-64 relative items-center">
-        v-model="searchText"
+      <input v-model="searchText" type="text" placeholder="Cari ..."
-        type="text"
+        class="focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md w-full px-3 py-2 "
-        placeholder="Cari ..."
+        @input="$emit('update:search', searchText)" />
-        class="border border-C bg-A rounded-md px-3 py-2 w-64 focus:outline-none focus:ring-2 focus:ring-blue-400"
+      <div class="absolute right-3 top-1/2 -translate-y-1/2 text-C">
-        @input="$emit('update:search', searchText)"
+       <i class="fas fa-search"></i>
-      />
+      </div>
+    </div>
   </div>
 </template>
 <script setup>

resources/js/pages/Brankas.vue

@@ -6,13 +6,12 @@
       <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>

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;

resources/js/pages/Produk.vue

@@ -1,20 +1,11 @@
 <template>
   <mainLayout>
     <!-- Modal Buat Item -->
-        <CreateItemModal
+    <CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" />
-            :isOpen="creatingItem"
-            :product="detail"
-            @close="closeItemModal"
-        />
 
     <!-- Modal Konfirmasi Hapus Produk -->
-        <ConfirmDeleteModal
+    <ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
-            :isOpen="deleting"
+      message="Apakah Anda yakin ingin menghapus produk ini?" />
-            @cancel="deleting = false"
-            @confirm="deleteProduk"
-            title="Hapus Produk"
-            message="Apakah Anda yakin ingin menghapus produk ini?"
-        />
 
     <div class="p-6 min-h-[75vh]">
       <!-- Judul -->
@@ -24,30 +15,13 @@
       <div class="mt-3">
         <!-- Mobile Layout -->
         <div class="flex flex-col gap-3 sm:hidden">
-                    <!-- Search -->
+          <searchbar v-model:search="searchQuery" class="w-full" />
-                    <div class="w-full">
+          <div class="flex flex-row justify-between items-center gap-3">
-                        <searchbar
+            <div class="shrink-0">
-                            v-model:search="searchQuery"
+              <InputSelect v-model="selectedCategory" :options="kategori" />
-                            class="searchbar-mobile"
-                        />
             </div>
-
+            <router-link v-if="isAdmin" to="/produk/baru"
-                    <!-- Filter + Tombol -->
+              class="bg-C text-D px-4 py-2 rounded-md shadow hover:bg-C transition">
-                    <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>
@@ -57,25 +31,15 @@
         <div class="hidden sm:flex flex-row gap-3 items-start">
           <!-- Filter -->
           <div class="w-40 sm:w-48 shrink-0">
-                        <InputSelect
+            <InputSelect v-model="selectedCategory" :options="kategori" class="w-full" />
-                            v-model="selectedCategory"
-                            :options="kategori"
-                            class="w-full"
-                        />
           </div>
 
           <!-- Search -->
-                    <div class="flex-1 mt-[2px]">
+          <div class="flex-1">
             <searchbar v-model:search="searchQuery" class="w-full" />
           </div>
-                </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">
-                <!-- 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>
@@ -88,34 +52,14 @@
       </div>
 
       <!-- 🔵 Grid Produk -->
-            <div
+      <div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0">
-                v-else
+        <ProductCard v-for="item in filteredProducts" :key="item.id" :product="item" @click="openOverlay(item.id)" />
-                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
+        <div v-if="filteredProducts.length === 0" class="col-span-full flex flex-col items-center py-10 text-gray-500">
-                    v-if="filteredProducts.length === 0"
+          <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    class="col-span-full flex flex-col items-center py-10 text-gray-500"
+            <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
-                        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>
@@ -123,47 +67,28 @@
     </div>
 
     <!-- Overlay Detail Produk -->
-        <div
+    <div v-if="showOverlay" class="fixed inset-0 bg-black/30 flex justify-center items-center"
-            v-if="showOverlay"
+      @click.self="closeOverlay">
-            class="fixed inset-0 bg-black/30 flex justify-center items-center"
+      <div class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col 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
+        <div class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded">
-                    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" />
-                    <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
+          <div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
-                        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
+          <button v-if="detail.foto && detail.foto.length > 1" @click.stop="prevFoto"
-                        v-if="detail.foto && detail.foto.length > 1"
+            class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
-                        @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
+          <button v-if="detail.foto && detail.foto.length > 1" @click.stop="nextFoto"
-                        v-if="detail.foto && detail.foto.length > 1"
+            class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
-                        @click.stop="nextFoto"
-                        class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
-                    >
             ›
           </button>
         </div>
@@ -174,9 +99,7 @@
         </p>
 
         <!-- Detail Harga & Info -->
-                <div
+        <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
-                    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) }}
@@ -195,24 +118,16 @@
         </div>
 
         <!-- Tombol Aksi -->
-                <div class="flex w-full gap-3">
+        <div v-if="isAdmin" class="flex w-full gap-3">
-                    <button
+          <button @click="$router.push(`/produk/${detail.id}/edit`)"
-                        @click="$router.push(`/produk/${detail.id}/edit`)"
+            class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
-                        class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
-                    >
             Ubah
           </button>
 
-                    <button
+          <button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
-                        @click="openItemModal"
-                        class="bg-green-400 text-black px-4 py-2 rounded font-bold"
-                    >
             Tambah
           </button>
-                    <button
+          <button @click="deleting = true" class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
-                        @click="deleting = true"
-                        class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
-                    >
             Hapus
           </button>
         </div>
@@ -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);
@@ -369,14 +286,3 @@ 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>

resources/js/pages/Sales.vue

@@ -1,123 +1,74 @@
 <template>
   <mainLayout>
     <!-- Modal Create/Edit Sales -->
-        <CreateSales
+    <CreateSales v-if="creatingSales" :isOpen="creatingSales" :sales="detail" @close="closeSales" />
-            v-if="creatingSales"
-            :isOpen="creatingSales"
-            :sales="detail"
-            @close="closeSales"
-        />
 
-        <EditSales
+    <EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
-            v-if="editingSales"
-            :isOpen="editingSales"
-            :sales="detail"
-            @close="closeEditSales"
-        />
 
     <!-- Modal Delete -->
-        <ConfirmDeleteModal
+    <ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
-            :isOpen="confirmDeleteOpen"
+      message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
-            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">
 
-                <button
+        <button @click="tambahSales"
-                    @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"
+          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">
-                    <svg
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                        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
+      <div class="bg-white rounded-lg shadow-md border border-C overflow-x-auto">
-                class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden"
+        <table class="w-full ">
-            >
-                <table class="w-full">
           <thead class="">
             <tr class="bg-C text-white">
-                            <th
+              <th class="px-6 py-4 text-center text-D">
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
                 No
               </th>
-                            <th
+              <th class="px-6 py-4 text-center text-D">
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
                 Nama Sales
               </th>
-                            <th
+              <th class="px-6 py-4 text-center text-D">
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
                 No HP
               </th>
-                            <th
+              <th class="px-6 py-4 text-center text-D">
-                                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>
+              <th v-if="isAdmin" class="px-6 py-4 text-center text-D">
+                Aksi
+              </th>
             </tr>
           </thead>
           <tbody>
-                        <tr
+            <tr v-for="(item, index) in sales" :key="item.id"
-                            v-for="(item, index) in sales"
+              class="border-b border-C hover:bg-gray-50 transition duration-150"
-                            :key="item.id"
+              :class="{ 'bg-gray-50': index % 2 === 1 }">
-                            class="border-b border-gray-200\ hover:bg-gray-50 transition duration-150"
+              <td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
-                            :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
+              <td class="px-6 py-4 border-r border-C text-D">
-                                class="px-6 py-4 border-r border-gray-200\ text-D"
-                            >
                 {{ item.nama }}
               </td>
-                            <td
+              <td class="px-6 py-4 border-r border-C text-gray-800">
-                                class="px-6 py-4 border-r border-gray-200\ text-gray-800"
-                            >
                 {{ item.no_hp }}
               </td>
-                            <td
+              <td class="px-6 py-4 border-r border-C text-gray-800">
-                                class="px-6 py-4 border-r border-gray-200\ text-gray-800"
-                            >
                 {{ item.alamat }}
               </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
+                  <button @click="ubahSales(item)"
-                                        @click="ubahSales(item)"
+                    class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
-                                        class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
-                                    >
                     Ubah
                   </button>
-                                    <button
+                  <button @click="hapusSales(item)"
-                                        @click="hapusSales(item)"
+                    class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
-                                        class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
-                                    >
                     Hapus
                   </button>
                 </div>
@@ -126,23 +77,11 @@
 
             <!-- Empty State -->
             <tr v-if="sales.length === 0 && !loading">
-                            <td
+              <td colspan="5" class="px-6 py-8 text-center text-gray-500">
-                                colspan="5"
-                                class="px-6 py-8 text-center text-gray-500"
-                            >
                 <div class="flex flex-col items-center">
-                                    <svg
+                  <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        class="w-12 h-12 text-gray-400 mb-2"
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        fill="none"
+                      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" />
-                                        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>
@@ -154,9 +93,7 @@
 
       <!-- Loading State -->
       <div v-if="loading" class="flex justify-center items-center py-8">
-                <div
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></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>
@@ -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);

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("");