Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

resources/js/components/CreateAkun.vue

@@ -78,7 +78,13 @@ export default {
     methods: {
         async createAkun() {
             try {
-                await axios.post("api/user", this.form);
+                await axios.post("api/user", this.form, {
+                    headers: {
+                        Authorization: `Bearer ${localStorage.getItem(
+                            "token"
+                        )}`,
+                    },
+                });
                 this.form = { nama: "", password: "", role: "" };
                 this.$emit("refresh");
                 this.$emit("close");

resources/js/components/CreateItemModal.vue

@@ -113,7 +113,11 @@ const selectedNampanName = computed(() => {
 // Methods
 const loadNampanList = async () => {
   try {
-    const response = await axios.get('/api/nampan');
+    const response = await axios.get('/api/nampan', {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });;
     nampanList.value = response.data;
     positionListOptions.value = [
       { value: '', label: 'Brankas', selected: !selectedNampan.value },
@@ -142,7 +146,11 @@ const createItem = async () => {
       payload.id_nampan = selectedNampan.value;
     }
 
-    const response = await axios.post('/api/item', payload);
+    const response = await axios.post('/api/item', payload, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });;
 
     success.value = true;
     createdItem.value = response.data.data

resources/js/components/CreateKategori.vue

@@ -61,9 +61,17 @@ import InputField from './InputField.vue'
   const saveKategori = async () => {
     try {
       if (props.product) {
-        await axios.put(`/api/kategori/${props.product.id}`, form.value)
+        await axios.put(`/api/kategori/${props.product.id}`, form.value, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });
       } else {
-        await axios.post('/api/kategori', form.value)
+        await axios.post('/api/kategori', form.value, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });
       }
       emit('close') // tutup modal
     } catch (err) {

resources/js/components/CreateSales.vue

@@ -71,7 +71,11 @@
 
   const handleSubmit = async () => {
     try {
-      await axios.post("/api/sales", form.value)
+      await axios.post("/api/sales", form.value, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });
       resetForm()
       emit("saved")
       emit("close")

resources/js/components/EditAkun.vue

@@ -101,7 +101,11 @@
           const payload = { ...this.form };
           if (!payload.password) delete payload.password;
 
-          await axios.put(`/api/user/${this.akun.id}`, payload);
+          await axios.put(`/api/user/${this.akun.id}`, payload, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });;
 
           this.$emit("refresh");
           this.$emit("close");

resources/js/components/EditSales.vue

@@ -65,7 +65,11 @@ import InputField from "./InputField.vue";
 
   const handleSubmit = async () => {
     try {
-      await axios.put(`/api/sales/${props.sales.id}`, form.value);
+      await axios.put(`/api/sales/${props.sales.id}`, form.value, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });;
       emit("close");
     } catch (error) {
       console.error("Error updating sales:", error);

resources/js/components/KasirForm.vue

@@ -97,7 +97,11 @@ const inputItem = async () => {
   loadingItem.value = true
 
   try {
-    const response = await axios.get(`/api/item/${kodeItem.value}`);
+    const response = await axios.get(`/api/item/${kodeItem.value}`, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });;
     item.value = response.data;
     hargaJual.value = item.value.produk.harga_jual
 

resources/js/components/RingkasanLaporanA.vue

@@ -187,7 +187,11 @@ const fetchRingkasan = async (page = 1) => {
     loading.value = true;
     pendapatanElements.value = [];
     try {
-        const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
+        const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });;
         ringkasanLaporan.value = response.data.data;
         pagination.value = {
             current_page: response.data.current_page,

resources/js/components/RingkasanLaporanB.vue

@@ -185,7 +185,11 @@ const fetchRingkasan = async (page = 1) => {
     loading.value = true;
     pendapatanElements.value = [];
     try {
-        const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
+        const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });;
         ringkasanLaporan.value = response.data.data;
         pagination.value = {
             current_page: response.data.current_page,

resources/js/components/TrayList.vue

@@ -138,16 +138,18 @@ const closePopup = () => {
 const saveMove = async () => {
   if (!selectedTrayId.value || !selectedItem.value) return;
   try {
-    await axios.put(`/api/item/${selectedItem.value.id}`, {
+    await axios.put(`/api/item/${selectedItem.value.id}`,
-        header:{
+  {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
-        body:{
     id_nampan: selectedTrayId.value,
     id_produk: selectedItem.value.id_produk,
-
   },
-    });
+  {
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+    },
+  }
+);
+
 
     await refreshData();
     closePopup();

resources/js/pages/EditProduk.vue

@@ -1,7 +1,11 @@
 <template>
     <mainLayout>
         <!-- Modal Buat Item -->
-    <CreateItemModal :isOpen="openItemModal" :product="editedProduct" @close="closeItemModal" />
+        <CreateItemModal
+            :isOpen="openItemModal"
+            :product="editedProduct"
+            @close="closeItemModal"
+        />
 
         <div class="p-6">
             <p class="font-serif italic text-[25px] text-D">Edit Produk</p>
@@ -11,35 +15,64 @@
                 <div class="flex-1">
                     <div class="mb-3">
                         <label class="block text-D mb-1">Nama Produk</label>
-            <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
+                        <InputField
+                            v-model="form.nama"
+                            type="text"
+                            placeholder="Masukkan nama produk"
+                        />
                     </div>
 
                     <div class="mb-3">
                         <label class="block text-D mb-1">Kategori</label>
-            <InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
+                        <InputSelect
+                            v-model="form.id_kategori"
+                            :options="category"
+                            placeholder="Pilih kategori"
+                        />
                     </div>
 
                     <div class="mb-3 flex flex-row w-full gap-3">
                         <div class="flex-1">
                             <label class="block text-D mb-1">Berat (g)</label>
-              <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
+                            <InputField
-                @input="calculateHargaJual" />
+                                v-model="form.berat"
+                                type="number"
+                                step="0.01"
+                                placeholder="Masukkan berat"
+                                @input="calculateHargaJual"
+                            />
                         </div>
                         <div class="flex-1">
                             <label class="block text-D mb-1">Kadar (K)</label>
-              <InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
+                            <InputField
+                                v-model="form.kadar"
+                                type="number"
+                                placeholder="Masukkan kadar"
+                            />
                         </div>
                     </div>
 
                     <div class="mb-3 flex flex-row w-full gap-3">
                         <div class="flex-1">
-              <label class="block text-D mb-1">Harga per Gram</label>
+                            <label class="block text-D mb-1"
-              <InputField v-model="form.harga_per_gram" type="number" step="0.01" placeholder="Masukkan harga per gram"
+                                >Harga per Gram</label
-                @input="calculateHargaJual" />
+                            >
+                            <InputField
+                                v-model="form.harga_per_gram"
+                                type="number"
+                                step="0.01"
+                                placeholder="Masukkan harga per gram"
+                                @input="calculateHargaJual"
+                            />
                         </div>
                         <div class="flex-1">
                             <label class="block text-D mb-1">Harga Jual</label>
-              <InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
+                            <InputField
+                                v-model="form.harga_jual"
+                                type="number"
+                                step="0.01"
+                                placeholder="Masukkan harga jual"
+                            />
                         </div>
                     </div>
                 </div>
@@ -50,59 +83,133 @@
 
                     <div class="grid grid-cols-3 gap-3">
                         <!-- Existing Images -->
-            <div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square">
+                        <div
-              <div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
+                            v-for="(image, index) in uploadedImages"
-                <img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
+                            :key="`img-${image.id}`"
-                <button @click="removeImage(image.id)" :disabled="uploadLoading"
+                            class="relative group aspect-square"
-                  class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400">
+                        >
+                            <div
+                                class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden"
+                            >
+                                <img
+                                    :src="image.url"
+                                    :alt="`Foto ${index + 1}`"
+                                    class="w-full h-full object-cover"
+                                />
+                                <button
+                                    @click="removeImage(image.id)"
+                                    :disabled="uploadLoading"
+                                    class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400"
+                                >
                                     ×
                                 </button>
                             </div>
                         </div>
 
                         <!-- Upload Button -->
-            <div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
+                        <div
-              @dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
+                            v-if="uploadedImages.length < 6"
+                            @drop="handleDrop"
+                            @dragover.prevent
+                            @dragenter.prevent="isDragging = true"
+                            @dragleave.prevent="isDragging = false"
+                            @click="triggerFileInput"
                             class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
-              :class="{ 'border-blue-400 bg-blue-50': isDragging, 'cursor-not-allowed opacity-50': uploadLoading }">
+                            :class="{
+                                'border-blue-400 bg-blue-50': isDragging,
+                                'cursor-not-allowed opacity-50': uploadLoading,
+                            }"
+                        >
                             <div class="text-center">
-                <div v-if="!uploadLoading"
+                                <div
-                  class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
+                                    v-if="!uploadLoading"
-                  <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors"
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                >
-                      d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                                    <svg
+                                        class="w-6 h-6 text-white"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                                        ></path>
                                     </svg>
                                 </div>
-                <div v-else class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2">
+                                <div
-                  <svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
+                                    v-else
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2"
-                    <path class="opacity-75" fill="currentColor"
+                                >
-                      d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                                    <svg
-                    </path>
+                                        class="animate-spin w-6 h-6 text-white"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <circle
+                                            class="opacity-25"
+                                            cx="12"
+                                            cy="12"
+                                            r="10"
+                                            stroke="currentColor"
+                                            stroke-width="4"
+                                        ></circle>
+                                        <path
+                                            class="opacity-75"
+                                            fill="currentColor"
+                                            d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                        ></path>
                                     </svg>
                                 </div>
-                <p class="text-xs text-gray-600 font-medium"
+                                <p
-                  v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
+                                    class="text-xs text-gray-600 font-medium"
+                                    v-html="
+                                        uploadLoading
+                                            ? 'Uploading...'
+                                            : 'Unggah<br/>Foto'
+                                    "
+                                ></p>
                             </div>
                         </div>
                     </div>
 
-          <input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
+                    <input
-            class="hidden" />
+                        ref="fileInput"
+                        type="file"
+                        multiple
+                        accept="image/jpeg,image/jpg,image/png"
+                        @change="handleFileSelect"
+                        class="hidden"
+                    />
 
-          <p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
+                    <p class="text-xs text-gray-500 mt-2">
+                        Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)
+                    </p>
 
-          <div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
+                    <div
+                        v-if="uploadError"
+                        class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600"
+                    >
                         {{ uploadError }}
                     </div>
                 </div>
             </div>
 
             <div class="mt-6 flex justify-end flex-row gap-3">
-        <button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
+                <button
-        <button @click="submitForm" :disabled="loading || !isFormValid"
+                    @click="back"
-          class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
+                    class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white"
-          {{ loading ? 'Menyimpan...' : 'Simpan Perubahan' }}
+                >
+                    Batal
+                </button>
+                <button
+                    @click="submitForm"
+                    :disabled="loading || !isFormValid"
+                    class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed"
+                >
+                    {{ loading ? "Menyimpan..." : "Simpan Perubahan" }}
                 </button>
             </div>
         </div>
@@ -226,7 +333,7 @@ const uploadFiles = async (files) => {
             const res = await axios.post("/api/foto/upload", formData, {
                 headers: {
                     Authorization: `Bearer ${localStorage.getItem("token")}`,
-          "Content-Type": "multipart/form-data"
+                    "Content-Type": "multipart/form-data",
                 },
             });
             uploadedImages.value.push(res.data);
@@ -252,10 +359,18 @@ const removeImage = async (id) => {
 const submitForm = async () => {
     loading.value = true;
     try {
-    await axios.put(`/api/produk/${productId}`, {
+        await axios.put(
+            `/api/produk/${productId}`,
+            {
                 ...form.value,
                 id_user: userId.value,
-    });
+            },
+            {
+                headers: {
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
+                },
+            }
+        );
         alert("Produk berhasil diupdate!");
         router.push("/produk");
     } catch (err) {

resources/js/pages/InputProduk.vue

@@ -146,7 +146,11 @@ const category = ref([]);
 
 const loadKategori = async () => {
   try {
-    const response = await axios.get('/api/kategori');
+    const response = await axios.get('/api/kategori', {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
     if (response.data && Array.isArray(response.data)) {
       category.value = response.data.map(cat => ({
         value: cat.id,
@@ -190,7 +194,11 @@ const calculateHargaJual = () => {
 
 const loadExistingPhotos = async () => {
   try {
-    const response = await axios.get(`/api/foto/${userId.value}`);
+    const response = await axios.get(`/api/foto/${userId.value}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
     if (response.data && Array.isArray(response.data)) {
       uploadedImages.value = response.data;
     }
@@ -271,7 +279,9 @@ const uploadFiles = async (files) => {
 
       const response = await axios.post('/api/foto/upload', formData, {
         headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
         'Content-Type': 'multipart/form-data',
+
         },
       });
 
@@ -292,7 +302,12 @@ const uploadFiles = async (files) => {
 
 const removeImage = async (imageId) => {
   try {
-    await axios.delete(`/api/foto/hapus/${imageId}`);
+    await axios.delete(`/api/foto/hapus/${imageId}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    })
+;
     uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId);
     uploadError.value = '';
   } catch (error) {
@@ -312,7 +327,10 @@ const submitForm = async (addItem) => {
   try {
     const response = await axios.post('/api/produk', {
       ...form.value,
-      id_user: userId.value
+      id_user: userId.value,
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
     });
 
     const createdProductData = response.data.data;
@@ -363,7 +381,11 @@ const resetForm = async () => {
     harga_jual: 0,
   };
   try { 
-    await axios.delete(`/api/foto/reset/${userId.value}`);
+    await axios.delete(`/api/foto/reset/${userId.value}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
     uploadedImages.value = [];
   } catch (error) {
     console.error('Error resetting photos:', error);

resources/js/pages/Kasir.vue

@@ -59,7 +59,11 @@ const loading = ref(true)
 onMounted(async () => {
   try {
     loading.value = true
-    const res = await axios.get("/api/transaksi?limit=10")
+    const res = await axios.get("/api/transaksi?limit=10", {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    })
     
     transaksi.value = res.data
   } catch (err) {

resources/js/pages/Kategori.vue

@@ -101,7 +101,11 @@ const kategoriToDelete = ref(null);
 const fetchKategoris = async () => {
 	loading.value = true;
 	try {
-		const response = await axios.get("/api/kategori");
+		const response = await axios.get("/api/kategori", {
+			headers: {
+				Authorization: `Bearer ${localStorage.getItem("token")}`,
+			},
+		});
 		kategori.value = response.data;
 		console.log("Data kategori:", response.data);
 	} catch (error) {
@@ -138,7 +142,11 @@ const hapusKategori = (item) => {
 // 🔵 Ditambahkan: aksi konfirmasi hapus
 const confirmDelete = async () => {
 	try {
-		await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
+		await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`, {
+			headers: {
+				Authorization: `Bearer ${localStorage.getItem("token")}`,
+			},
+		});
 		console.log("Kategori berhasil dihapus");
 		fetchKategoris();
 	} catch (error) {

resources/js/pages/Produk.vue

@@ -21,9 +21,15 @@
             <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">
+            <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" />
+                <InputSelect
+                    v-model="selectedCategory"
+                    :options="kategori"
+                    class="w-full md:w-48"
+                />
 
                 <!-- Search -->
                 <searchbar v-model:search="searchQuery" class="flex-1" />
@@ -40,7 +46,9 @@
             </div>
 
             <!-- Grid Produk -->
-      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
+            <div
+                class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
+            >
                 <ProductCard
                     v-for="item in filteredProducts"
                     :key="item.id"
@@ -102,7 +110,9 @@
                 </p>
 
                 <!-- Detail Harga & Info -->
-        <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
+                <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) }}
@@ -171,29 +181,37 @@ const kategori = ref([]);
 
 const loadKategori = async () => {
     try {
-    const response = await axios.get('/api/kategori');
+        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 => ({
+                ...response.data.map((cat) => ({
                     value: cat.id,
-          label: cat.nama
+                    label: cat.nama,
-        }))
+                })),
             ];
         }
     } catch (error) {
-    console.error('Error loading categories:', error);
+        console.error("Error loading categories:", error);
     }
 };
 
 const loadProduk = async () => {
     try {
-    const response = await axios.get('/api/produk');
+        await axios.delete(`/api/produk/${detail.value.id}`, {
+            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);
+        console.error("Error loading products:", error);
     }
 };
 
@@ -207,7 +225,7 @@ const closeItemModal = () => {
 
 // Fetch data awal
 onMounted(async () => {
-  loadKategori()
+    loadKategori();
     loadProduk();
 });
 
@@ -216,9 +234,7 @@ const filteredProducts = computed(() => {
     let hasil = products.value;
 
     if (selectedCategory.value != 0) {
-    hasil = hasil.filter(
+        hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
-      (p) => p.id_kategori == selectedCategory.value
-    );
     }
 
     if (searchQuery.value) {

resources/js/pages/Sales.vue

@@ -51,7 +51,7 @@
 
             <!-- Table Section -->
             <div
-                class="bg-white rounded-lg shadow-md border border-C overflow-hidden"
+                class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden"
             >
                 <table class="w-full">
                     <thead class="">
@@ -76,35 +76,33 @@
                             >
                                 Alamat
                             </th>
-                            <th class="px-6 py-4 text-center text-D">
+                            <th class="px-6 py-4 text-center text-D">Aksi</th>
-                                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="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-C text-center font-medium text-gray-900"
+                                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-C text-D"
+                                class="px-6 py-4 border-r border-gray-200\ text-D"
                             >
                                 {{ item.nama }}
                             </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
-                                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>
@@ -186,7 +184,11 @@ const salesToDelete = ref(null);
 const fetchSales = async () => {
     loading.value = true;
     try {
-        const response = await axios.get("/api/sales");
+        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);
@@ -215,7 +217,11 @@ const hapusSales = (item) => {
 
 const confirmDelete = async () => {
     try {
-        await axios.delete(`/api/sales/${salesToDelete.value.id}`);
+        await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
+            headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });
         fetchSales();
         confirmDeleteOpen.value = false;
     } catch (error) {

resources/js/pages/Tray.vue

@@ -1,10 +1,15 @@
 <template>
     <mainLayout>
-
         <!-- Header -->
-<div class="mb-4">
+        <div class="mb-4">
             <!-- Judul -->
-  <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
+            <p
+                style="
+                    font-family: 'IM FELL Great Primer', serif;
+                    font-style: italic;
+                    font-size: 25px;
+                "
+            >
                 NAMPAN
             </p>
 
@@ -20,24 +25,24 @@
                 <!-- Tambah Nampan -->
                 <button
                     @click="openModal"
-      class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
+                    class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold"
+                >
                     Tambah Nampan
                 </button>
 
                 <!-- Kosongkan -->
                 <button
                     @click="openConfirmModal"
-      class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
+                    class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md"
+                >
                     Kosongkan
                 </button>
             </div>
-</div>
+        </div>
-
-
 
         <!-- Search + List -->
 
-    <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
+        <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
 
         <!-- Modal Tambah/Edit Nampan -->
         <div
@@ -45,9 +50,15 @@
             class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
         >
             <div class="bg-white rounded-lg shadow-lg p-6 w-96">
-        <h2 class="text-lg font-semibold mb-4" style="color: #102C57;">Tambah Nampan</h2>
+                <h2 class="text-lg font-semibold mb-4" style="color: #102c57">
+                    Tambah Nampan
+                </h2>
 
-        <label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
+                <label
+                    class="block mb-2 text-sm font-medium"
+                    style="color: #102c57"
+                    >Nama Nampan</label
+                >
                 <input
                     v-model="trayName"
                     type="text"
@@ -58,14 +69,16 @@
                 <div class="flex justify-end gap-2">
                     <button
                         @click="closeModal"
-            class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
+                        class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
+                    >
                         Cancel
                     </button>
 
                     <button
                         @click="saveTray"
                         class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
-            style="color: #102C57;">
+                        style="color: #102c57"
+                    >
                         Save
                     </button>
                 </div>
@@ -78,103 +91,140 @@
             class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
         >
             <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
-        <h2 class="text-xl font-bold mb-3" style="color: #102C57;">Kosongkan semua nampan?</h2>
+                <h2 class="text-xl font-bold mb-3" style="color: #102c57">
+                    Kosongkan semua nampan?
+                </h2>
                 <p class="text-gray-600 mb-6">
-          Semua item akan dimasukkan ke brankas. <br/>
+                    Semua item akan dimasukkan ke brankas. <br />
                     Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
                 </p>
                 <div class="flex justify-center gap-4">
                     <button
                         @click="closeConfirmModal"
-            class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
+                        class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
+                    >
                         Batal
                     </button>
                     <button
                         @click="confirmEmptyTray"
-            class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
+                        class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
+                    >
                         Ya
                     </button>
                 </div>
             </div>
         </div>
-
     </mainLayout>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
-import axios from 'axios'
+import axios from "axios";
-import mainLayout from '../layouts/mainLayout.vue'
+import mainLayout from "../layouts/mainLayout.vue";
-import searchbar from '../components/searchbar.vue'
+import searchbar from "../components/searchbar.vue";
-import TrayList from '../components/TrayList.vue'
+import TrayList from "../components/TrayList.vue";
 
-const searchQuery = ref("")
+const searchQuery = ref("");
-const showModal = ref(false)
+const showModal = ref(false);
-const showConfirmModal = ref(false)
+const showConfirmModal = ref(false);
-const trayName = ref("")
+const trayName = ref("");
-const editingTrayId = ref(null)
+const editingTrayId = ref(null);
 
 // buka modal tambah/edit
-const openModal = () => { showModal.value = true }
+const openModal = () => {
+    showModal.value = true;
+};
 const closeModal = () => {
-  trayName.value = ""
+    trayName.value = "";
-  editingTrayId.value = null
+    editingTrayId.value = null;
-  showModal.value = false
+    showModal.value = false;
-}
+};
 
 // simpan nampan
 const saveTray = async () => {
     if (!trayName.value.trim()) {
-    alert("Nama Nampan tidak boleh kosong")
+        alert("Nama Nampan tidak boleh kosong");
-    return
+        return;
     }
     try {
         if (editingTrayId.value) {
-      await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
+            await axios.put(
-      alert("Nampan berhasil diupdate")
+                `/api/nampan/${editingTrayId.value}`,
+                { nama: trayName.value },
+                {
+                    headers: {
+                        Authorization: `Bearer ${localStorage.getItem(
+                            "token"
+                        )}`,
+                    },
+                }
+            );
+            alert("Nampan berhasil diupdate");
         } else {
-      await axios.post("/api/nampan", { nama: trayName.value })
+            await axios.post(
-      alert("Nampan berhasil ditambahkan")
+                "/api/nampan",
+                { nama: trayName.value },
+                {
+                    headers: {
+                        Authorization: `Bearer ${localStorage.getItem(
+                            "token"
+                        )}`,
+                    },
                 }
-    closeModal()
+            );
-    location.reload()
+            alert("Nampan berhasil ditambahkan");
+        }
+        closeModal();
+        location.reload();
     } catch (error) {
-    console.error(error)
+        console.error(error);
-    alert("Gagal menyimpan nampan")
+        alert("Gagal menyimpan nampan");
     }
-}
+};
 
 // === Konfirmasi kosongkan nampan ===
-const openConfirmModal = () => { showConfirmModal.value = true }
+const openConfirmModal = () => {
-const closeConfirmModal = () => { showConfirmModal.value = false }
+    showConfirmModal.value = true;
+};
+const closeConfirmModal = () => {
+    showConfirmModal.value = false;
+};
 
 const confirmEmptyTray = async () => {
     try {
-    await axios.delete("/api/kosongkan-nampan",)
+        await axios.delete("/api/kosongkan-nampan", {
-    alert("Semua item berhasil dipindahkan ke Brankas")
+            headers: {
-    closeConfirmModal()
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
-    location.reload()
+            },
+        });
+        alert("Semua item berhasil dipindahkan ke Brankas");
+        closeConfirmModal();
+        location.reload();
     } catch (error) {
-    console.error(error)
+        console.error(error);
-    alert("Gagal mengosongkan nampan")
+        alert("Gagal mengosongkan nampan");
     }
-}
+};
 
 const editTray = (tray) => {
-  trayName.value = tray.nama
+    trayName.value = tray.nama;
-  editingTrayId.value = tray.id
+    editingTrayId.value = tray.id;
-  showModal.value = true
+    showModal.value = true;
-}
+};
 
 const deleteTray = async (id) => {
-  if (!confirm("Yakin ingin menghapus nampan ini?")) return
+    if (!confirm("Yakin ingin menghapus nampan ini?")) return;
     try {
-    await axios.delete(`/api/nampan/${id}`)
+        await axios.delete(`/api/nampan/${id}`, {
-    alert("Nampan berhasil dihapus")
+            headers: {
-    location.reload()
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });
+        alert("Nampan berhasil dihapus");
+        location.reload();
     } catch (error) {
-    console.error(error)
+        console.error(error);
-    alert("Gagal menghapus nampan")
+        alert("Gagal menghapus nampan");
     }
-}
+};
 </script>