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

resources/js/components/CreateAkun.vue

@@ -16,13 +16,13 @@
                 />
 
                 <div>
-                <label for="password">Password</label>
+                    <label for="password">Password</label>
-                <InputField
+                    <InputField
-                v-model="form.password"
+                        v-model="form.password"
-                id="password"
+                        id="password"
-                type="password"
+                        type="password"
-                :required="true"
+                        :required="true"
-                />
+                    />
                 </div>
 
                 <label for="peran">Peran</label>
@@ -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")}`,
+    id_nampan: selectedTrayId.value,
-        },
+    id_produk: selectedItem.value.id_produk,
-        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,112 +1,219 @@
 <template>
-  <mainLayout>
+    <mainLayout>
-    <!-- Modal Buat Item -->
+        <!-- Modal Buat Item -->
-    <CreateItemModal :isOpen="openItemModal" :product="editedProduct" @close="closeItemModal" />
+        <CreateItemModal
+            :isOpen="openItemModal"
+            :product="editedProduct"
+            @close="closeItemModal"
+        />
 
-    <div class="p-6">
+        <div class="p-6">
-      <p class="font-serif italic text-[25px] text-D">Edit Produk</p>
+            <p class="font-serif italic text-[25px] text-D">Edit Produk</p>
 
-      <div class="flex flex-col md:flex-row mt-5 gap-6">
+            <div class="flex flex-col md:flex-row mt-5 gap-6">
-        <!-- Form Section -->
+                <!-- Form Section -->
-        <div class="flex-1">
+                <div class="flex-1">
-          <div class="mb-3">
+                    <div class="mb-3">
-            <label class="block text-D mb-1">Nama Produk</label>
+                        <label class="block text-D mb-1">Nama Produk</label>
-            <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
+                        <InputField
-          </div>
+                            v-model="form.nama"
+                            type="text"
+                            placeholder="Masukkan nama produk"
+                        />
+                    </div>
 
-          <div class="mb-3">
+                    <div class="mb-3">
-            <label class="block text-D mb-1">Kategori</label>
+                        <label class="block text-D mb-1">Kategori</label>
-            <InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
+                        <InputSelect
-          </div>
+                            v-model="form.id_kategori"
+                            :options="category"
+                            placeholder="Pilih kategori"
+                        />
+                    </div>
 
-          <div class="mb-3 flex flex-row w-full gap-3">
+                    <div class="mb-3 flex flex-row w-full gap-3">
-            <div class="flex-1">
+                        <div class="flex-1">
-              <label class="block text-D mb-1">Berat (g)</label>
+                            <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"
+                            />
+                        </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
+                            >
+                            <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"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Image Upload Section -->
+                <div class="flex-1">
+                    <label class="block text-D mb-1">Foto</label>
+
+                    <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
+                                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
+                            @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,
+                            }"
+                        >
+                            <div class="text-center">
+                                <div
+                                    v-if="!uploadLoading"
+                                    class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors"
+                                >
+                                    <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"
+                                >
+                                    <svg
+                                        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"
+                                    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"
+                        class="hidden"
+                    />
+
+                    <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"
+                    >
+                        {{ uploadError }}
+                    </div>
+                </div>
             </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" />
-            </div>
-          </div>
 
-          <div class="mb-3 flex flex-row w-full gap-3">
+            <div class="mt-6 flex justify-end flex-row gap-3">
-            <div class="flex-1">
+                <button
-              <label class="block text-D mb-1">Harga per Gram</label>
+                    @click="back"
-              <InputField v-model="form.harga_per_gram" type="number" step="0.01" placeholder="Masukkan harga per gram"
+                    class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white"
-                @input="calculateHargaJual" />
+                >
-            </div>
+                    Batal
-            <div class="flex-1">
+                </button>
-              <label class="block text-D mb-1">Harga Jual</label>
+                <button
-              <InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
+                    @click="submitForm"
-            </div>
+                    :disabled="loading || !isFormValid"
-          </div>
+                    class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed"
-        </div>
+                >
-
+                    {{ loading ? "Menyimpan..." : "Simpan Perubahan" }}
-        <!-- Image Upload Section -->
-        <div class="flex-1">
-          <label class="block text-D mb-1">Foto</label>
-
-          <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 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
-              @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 }">
-              <div class="text-center">
-                <div v-if="!uploadLoading"
-                  class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
-                  <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">
-                  <svg 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"
-                  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"
-            class="hidden" />
-
-          <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">
-            {{ uploadError }}
-          </div>
         </div>
-      </div>
+    </mainLayout>
-
-      <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 @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>
-  </mainLayout>
 </template>
 
 <script setup>
@@ -124,12 +231,12 @@ const router = useRouter();
 const productId = route.params.id;
 
 const form = ref({
-  nama: "",
+    nama: "",
-  id_kategori: null,
+    id_kategori: null,
-  berat: 0,
+    berat: 0,
-  kadar: 0,
+    kadar: 0,
-  harga_per_gram: 0,
+    harga_per_gram: 0,
-  harga_jual: 0,
+    harga_jual: 0,
 });
 
 const category = ref([]);
@@ -145,137 +252,145 @@ const editedProduct = ref(null);
 const userId = ref(1); // TODO: ambil dari auth
 
 const isFormValid = computed(() => {
-  return (
+    return (
-    form.value.nama &&
+        form.value.nama &&
-    form.value.id_kategori &&
+        form.value.id_kategori &&
-    form.value.berat > 0 &&
+        form.value.berat > 0 &&
-    form.value.kadar > 0 &&
+        form.value.kadar > 0 &&
-    form.value.harga_per_gram > 0 &&
+        form.value.harga_per_gram > 0 &&
-    form.value.harga_jual > 0
+        form.value.harga_jual > 0
-  );
+    );
 });
 
 const calculateHargaJual = () => {
-  const berat = parseFloat(form.value.berat) || 0;
+    const berat = parseFloat(form.value.berat) || 0;
-  const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0;
+    const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0;
-  if (berat > 0 && hargaPerGram > 0) {
+    if (berat > 0 && hargaPerGram > 0) {
-    form.value.harga_jual = berat * hargaPerGram;
+        form.value.harga_jual = berat * hargaPerGram;
-  }
+    }
 };
 
 const loadKategori = async () => {
-  const response = await axios.get("/api/kategori", {
+    const response = await axios.get("/api/kategori", {
-    headers: {
+        headers: {
-      Authorization: `Bearer ${localStorage.getItem("token")}`,
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
-    },
+        },
-  });
+    });
-  category.value = response.data.map((c) => ({ value: c.id, label: c.nama }));
+    category.value = response.data.map((c) => ({ value: c.id, label: c.nama }));
 };
 
 const loadProduk = async () => {
-  const response = await axios.get(`/api/produk/${productId}`, {
+    const response = await axios.get(`/api/produk/${productId}`, {
-    headers: {
+        headers: {
-      Authorization: `Bearer ${localStorage.getItem("token")}`,
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
-    },
+        },
-  });
+    });
-  const produk = response.data;
+    const produk = response.data;
-  form.value = {
+    form.value = {
-    nama: produk.nama,
+        nama: produk.nama,
-    id_kategori: produk.id_kategori,
+        id_kategori: produk.id_kategori,
-    berat: produk.berat,
+        berat: produk.berat,
-    kadar: produk.kadar,
+        kadar: produk.kadar,
-    harga_per_gram: produk.harga_per_gram,
+        harga_per_gram: produk.harga_per_gram,
-    harga_jual: produk.harga_jual,
+        harga_jual: produk.harga_jual,
-  };
+    };
-  uploadedImages.value = produk.foto || [];
+    uploadedImages.value = produk.foto || [];
 };
 
 const triggerFileInput = () => {
-  if (!uploadLoading.value && uploadedImages.value.length < 6) {
+    if (!uploadLoading.value && uploadedImages.value.length < 6) {
-    fileInput.value?.click();
+        fileInput.value?.click();
-  }
+    }
 };
 
 const handleFileSelect = (e) => {
-  const files = Array.from(e.target.files);
+    const files = Array.from(e.target.files);
-  uploadFiles(files);
+    uploadFiles(files);
 };
 
 const handleDrop = (e) => {
-  e.preventDefault();
+    e.preventDefault();
-  isDragging.value = false;
+    isDragging.value = false;
-  if (uploadLoading.value || uploadedImages.value.length >= 6) return;
+    if (uploadLoading.value || uploadedImages.value.length >= 6) return;
-  const files = Array.from(e.dataTransfer.files);
+    const files = Array.from(e.dataTransfer.files);
-  uploadFiles(files);
+    uploadFiles(files);
 };
 
 const uploadFiles = async (files) => {
-  uploadError.value = "";
+    uploadError.value = "";
-  const validFiles = files.filter(
+    const validFiles = files.filter(
-    (file) =>
+        (file) =>
-      ["image/jpeg", "image/jpg", "image/png"].includes(file.type) &&
+            ["image/jpeg", "image/jpg", "image/png"].includes(file.type) &&
-      file.size <= 2 * 1024 * 1024
+            file.size <= 2 * 1024 * 1024
-  );
+    );
-  if (!validFiles.length) return;
+    if (!validFiles.length) return;
-  uploadLoading.value = true;
+    uploadLoading.value = true;
-  try {
+    try {
-    for (const file of validFiles) {
+        for (const file of validFiles) {
-      const formData = new FormData();
+            const formData = new FormData();
-      formData.append("foto", file);
+            formData.append("foto", file);
-      formData.append("id_user", userId.value);
+            formData.append("id_user", userId.value);
-      const res = await axios.post("/api/foto/upload", formData, {
+            const res = await axios.post("/api/foto/upload", formData, {
-        headers: {
+                headers: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
-          "Content-Type": "multipart/form-data"
+                    "Content-Type": "multipart/form-data",
-        },
+                },
-      });
+            });
-      uploadedImages.value.push(res.data);
+            uploadedImages.value.push(res.data);
+        }
+    } finally {
+        uploadLoading.value = false;
     }
-  } finally {
-    uploadLoading.value = false;
-  }
 };
 
 const removeImage = async (id) => {
-  try {
+    try {
-    await axios.delete(`/api/foto/hapus/${id}`, {
+        await axios.delete(`/api/foto/hapus/${id}`, {
-      headers: {
+            headers: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
+            },
-    });
+        });
-    uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
+        uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
-  } catch {
+    } catch {
-    uploadError.value = "Gagal menghapus foto";
+        uploadError.value = "Gagal menghapus foto";
-  }
+    }
 };
 
 const submitForm = async () => {
-  loading.value = true;
+    loading.value = true;
-  try {
+    try {
-    await axios.put(`/api/produk/${productId}`, {
+        await axios.put(
-      ...form.value,
+            `/api/produk/${productId}`,
-      id_user: userId.value,
+            {
-    });
+                ...form.value,
-    alert("Produk berhasil diupdate!");
+                id_user: userId.value,
-    router.push("/produk");
+            },
-  } catch (err) {
+            {
-    alert("Gagal update produk!");
+                headers: {
-    console.error(err);
+                    Authorization: `Bearer ${localStorage.getItem("token")}`,
-  } finally {
+                },
-    loading.value = false;
+            }
-  }
+        );
+        alert("Produk berhasil diupdate!");
+        router.push("/produk");
+    } catch (err) {
+        alert("Gagal update produk!");
+        console.error(err);
+    } finally {
+        loading.value = false;
+    }
 };
 
 const closeItemModal = () => {
-  openItemModal.value = false;
+    openItemModal.value = false;
 };
 
 const back = () => {
-  router.push("/produk");
+    router.push("/produk");
 };
 
 onMounted(() => {
-  loadKategori();
+    loadKategori();
-  loadProduk();
+    loadProduk();
 });
 </script>

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: {
-          'Content-Type': 'multipart/form-data',
+        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

@@ -1,150 +1,160 @@
 <template>
-  <mainLayout>
+    <mainLayout>
-    <!-- Modal Buat Item -->
+        <!-- Modal Buat Item -->
-    <CreateItemModal
+        <CreateItemModal
-      :isOpen="creatingItem"
+            :isOpen="creatingItem"
-      :product="detail"
+            :product="detail"
-      @close="closeItemModal"
+            @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?"
-    />
-
-    <div class="p-6">
-      <!-- Judul -->
-      <p class="font-serif italic text-[25px] text-D">PRODUK</p>
-
-      <!-- Filter -->
-      <div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
-        <!-- Dropdown Kategori -->
-        <InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
-
-        <!-- Search -->
-        <searchbar v-model:search="searchQuery" class="flex-1" />
-      </div>
-
-      <!-- Tombol Tambah Produk -->
-      <div class="mt-3 flex justify-end">
-        <router-link
-          to="/produk/baru"
-          class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-        >
-          Tambah Produk
-        </router-link>
-      </div>
-
-      <!-- Grid Produk -->
-      <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"
-          :product="item"
-          @click="openOverlay(item.id)"
         />
-      </div>
-    </div>
 
-    <!-- Overlay Detail Produk -->
+        <!-- Modal Konfirmasi Hapus Produk -->
-    <div
+        <ConfirmDeleteModal
-      v-if="showOverlay"
+            :isOpen="deleting"
-      class="fixed inset-0 bg-black/30 flex justify-center items-center"
+            @cancel="deleting = false"
-      @click.self="closeOverlay"
+            @confirm="deleteProduk"
-    >
+            title="Hapus Produk"
-      <div
+            message="Apakah Anda yakin ingin menghapus produk ini?"
-        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="p-6">
-          <div
+            <!-- Judul -->
-            class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
+            <p class="font-serif italic text-[25px] text-D">PRODUK</p>
-          >
-            {{ detail.items_count }} pcs
-          </div>
 
-          <!-- Tombol Prev -->
+            <!-- Filter -->
-          <button
+            <div
-            v-if="detail.foto && detail.foto.length > 1"
+                class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
-            @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
+                <!-- Dropdown Kategori -->
-            </button>
+                <InputSelect
+                    v-model="selectedCategory"
+                    :options="kategori"
+                    class="w-full md:w-48"
+                />
 
-          <button
+                <!-- Search -->
-            @click="openItemModal"
+                <searchbar v-model:search="searchQuery" class="flex-1" />
-            class="bg-green-400 text-black px-4 py-2 rounded font-bold"
+            </div>
-          >
+
-            Tambah
+            <!-- Tombol Tambah Produk -->
-          </button>
+            <div class="mt-3 flex justify-end">
-          <button
+                <router-link
-            @click="deleting = true"
+                    to="/produk/baru"
-            class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
+                    class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-          >
+                >
-            Hapus
+                    Tambah Produk
-          </button>
+                </router-link>
+            </div>
+
+            <!-- Grid Produk -->
+            <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"
+                    :product="item"
+                    @click="openOverlay(item.id)"
+                />
+            </div>
         </div>
-      </div>
+
-    </div>
+        <!-- Overlay Detail Produk -->
-  </mainLayout>
+        <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 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>
@@ -170,113 +180,119 @@ const currentFotoIndex = ref(0);
 const kategori = ref([]);
 
 const loadKategori = async () => {
-  try {
+    try {
-    const response = await axios.get('/api/kategori');
+        const response = await axios.get("/api/kategori", {
-    if (response.data && Array.isArray(response.data)) {
+            headers: {
-      kategori.value = [
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
-        { value: 0, label: "Semua" },
+            },
-        ...response.data.map(cat => ({
+        });
-          value: cat.id,
+        if (response.data && Array.isArray(response.data)) {
-          label: cat.nama
+            kategori.value = [
-        }))
+                { value: 0, label: "Semua" },
-      ];
+                ...response.data.map((cat) => ({
+                    value: cat.id,
+                    label: cat.nama,
+                })),
+            ];
+        }
+    } catch (error) {
+        console.error("Error loading categories:", error);
     }
-  } catch (error) {
-    console.error('Error loading categories:', error);
-  }
 };
 
 const loadProduk = async () => {
-  try {
+    try {
-    const response = await axios.get('/api/produk');
+        await axios.delete(`/api/produk/${detail.value.id}`, {
-    if (response.data && Array.isArray(response.data)) {
+            headers: {
-      products.value = response.data;
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+        });
+        if (response.data && Array.isArray(response.data)) {
+            products.value = response.data;
+        }
+    } catch (error) {
+        console.error("Error loading products:", error);
     }
-  } catch (error) {
-    console.error('Error loading products:', error);
-  }
 };
 
 // Buka modal item
 const openItemModal = () => {
-  creatingItem.value = true;
+    creatingItem.value = true;
 };
 const closeItemModal = () => {
-  creatingItem.value = false;
+    creatingItem.value = false;
 };
 
 // Fetch data awal
 onMounted(async () => {
-  loadKategori()
+    loadKategori();
-  loadProduk();
+    loadProduk();
 });
 
 // Filter produk (kategori + search)
 const filteredProducts = computed(() => {
-  let hasil = products.value;
+    let hasil = products.value;
 
-  if (selectedCategory.value != 0) {
+    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) {
+    if (searchQuery.value) {
-    hasil = hasil.filter((p) =>
+        hasil = hasil.filter((p) =>
-      p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
+            p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
-    );
+        );
-  }
+    }
 
-  return hasil;
+    return hasil;
 });
 
 // Buka overlay detail
 function openOverlay(id) {
-  const produk = products.value.find((p) => p.id === id);
+    const produk = products.value.find((p) => p.id === id);
-  if (produk) {
+    if (produk) {
-    detail.value = produk;
+        detail.value = produk;
-    currentFotoIndex.value = 0;
+        currentFotoIndex.value = 0;
-    showOverlay.value = true;
+        showOverlay.value = true;
-  }
+    }
 }
 
 // Tutup overlay detail
 function closeOverlay() {
-  showOverlay.value = false;
+    showOverlay.value = false;
-  currentFotoIndex.value = 0;
+    currentFotoIndex.value = 0;
 }
 
 // Navigasi foto
 function nextFoto() {
-  if (detail.value.foto && detail.value.foto.length > 0) {
+    if (detail.value.foto && detail.value.foto.length > 0) {
-    currentFotoIndex.value =
+        currentFotoIndex.value =
-      (currentFotoIndex.value + 1) % detail.value.foto.length;
+            (currentFotoIndex.value + 1) % detail.value.foto.length;
-  }
+    }
 }
 function prevFoto() {
-  if (detail.value.foto && detail.value.foto.length > 0) {
+    if (detail.value.foto && detail.value.foto.length > 0) {
-    currentFotoIndex.value =
+        currentFotoIndex.value =
-      (currentFotoIndex.value - 1 + detail.value.foto.length) %
+            (currentFotoIndex.value - 1 + detail.value.foto.length) %
-      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 {
+    try {
-    await axios.delete(`/api/produk/${detail.value.id}`);
+        await axios.delete(`/api/produk/${detail.value.id}`);
-    products.value = products.value.filter((p) => p.id !== detail.value.id);
+        products.value = products.value.filter((p) => p.id !== detail.value.id);
-    deleting.value = false;
+        deleting.value = false;
-    showOverlay.value = false;
+        showOverlay.value = false;
-    alert("Produk berhasil dihapus!");
+        alert("Produk berhasil dihapus!");
-  } catch (err) {
+    } catch (err) {
-    console.error("Gagal hapus produk:", err);
+        console.error("Gagal hapus produk:", err);
-    alert("Gagal menghapus produk!");
+        alert("Gagal menghapus produk!");
-  }
+    }
 }
 </script>

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,180 +1,230 @@
 <template>
-  <mainLayout>
+    <mainLayout>
+        <!-- Header -->
+        <div class="mb-4">
+            <!-- Judul -->
+            <p
+                style="
+                    font-family: 'IM FELL Great Primer', serif;
+                    font-style: italic;
+                    font-size: 25px;
+                "
+            >
+                NAMPAN
+            </p>
 
-    <!-- Header -->
+            <!-- Searchbar -->
-<div class="mb-4">
+            <div class="flex justify-end mt-2">
-  <!-- Judul -->
+                <div class="w-64">
-  <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
+                    <searchbar v-model:search="searchQuery" />
-    NAMPAN
+                </div>
-  </p>
+            </div>
 
-  <!-- Searchbar -->
+            <!-- Tombol -->
-  <div class="flex justify-end mt-2">
+            <div class="flex gap-2 mt-3 justify-end">
-    <div class="w-64">
+                <!-- Tambah Nampan -->
-      <searchbar v-model:search="searchQuery" />
+                <button
-    </div>
+                    @click="openModal"
-  </div>
+                    class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold"
+                >
+                    Tambah Nampan
+                </button>
 
-  <!-- Tombol -->
+                <!-- Kosongkan -->
-  <div class="flex gap-2 mt-3 justify-end">
+                <button
-    <!-- Tambah Nampan -->
+                    @click="openConfirmModal"
-    <button
+                    class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md"
-      @click="openModal"
+                >
-      class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
+                    Kosongkan
-      Tambah Nampan
+                </button>
-    </button>
+            </div>
-
-    <!-- Kosongkan -->
-    <button
-      @click="openConfirmModal"
-      class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
-      Kosongkan
-    </button>
-  </div>
-</div>
-
-
-
-    <!-- Search + List -->
-
-    <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
-
-    <!-- Modal Tambah/Edit Nampan -->
-    <div
-      v-if="showModal"
-      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>
-
-        <label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
-        <input
-          v-model="trayName"
-          type="text"
-          placeholder="Contoh: A4"
-          class="w-full border rounded-md p-2 mb-4"
-        />
-
-        <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">
-            Cancel
-          </button>
-
-          <button
-            @click="saveTray"
-            class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
-            style="color: #102C57;">
-            Save
-          </button>
         </div>
-      </div>
-    </div>
 
-    <!-- Modal Konfirmasi Kosongkan -->
+        <!-- Search + List -->
-    <div
+
-      v-if="showConfirmModal"
+        <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
-      class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
+
-    >
+        <!-- Modal Tambah/Edit Nampan -->
-      <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
+        <div
-        <h2 class="text-xl font-bold mb-3" style="color: #102C57;">Kosongkan semua nampan?</h2>
+            v-if="showModal"
-        <p class="text-gray-600 mb-6">
+            class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
-          Semua item akan dimasukkan ke brankas. <br/>
+        >
-          Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
+            <div class="bg-white rounded-lg shadow-lg p-6 w-96">
-        </p>
+                <h2 class="text-lg font-semibold mb-4" style="color: #102c57">
-        <div class="flex justify-center gap-4">
+                    Tambah Nampan
-          <button
+                </h2>
-            @click="closeConfirmModal"
+
-            class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
+                <label
-            Batal
+                    class="block mb-2 text-sm font-medium"
-          </button>
+                    style="color: #102c57"
-          <button
+                    >Nama Nampan</label
-            @click="confirmEmptyTray"
+                >
-            class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
+                <input
-            Ya
+                    v-model="trayName"
-          </button>
+                    type="text"
+                    placeholder="Contoh: A4"
+                    class="w-full border rounded-md p-2 mb-4"
+                />
+
+                <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"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        @click="saveTray"
+                        class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
+                        style="color: #102c57"
+                    >
+                        Save
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-  </mainLayout>
+        <!-- Modal Konfirmasi Kosongkan -->
+        <div
+            v-if="showConfirmModal"
+            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>
+                <p class="text-gray-600 mb-6">
+                    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"
+                    >
+                        Batal
+                    </button>
+                    <button
+                        @click="confirmEmptyTray"
+                        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()) {
+    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 })
-      alert("Nampan berhasil diupdate")
-    } else {
-      await axios.post("/api/nampan", { nama: trayName.value })
-      alert("Nampan berhasil ditambahkan")
     }
-    closeModal()
+    try {
-    location.reload()
+        if (editingTrayId.value) {
-  } catch (error) {
+            await axios.put(
-    console.error(error)
+                `/api/nampan/${editingTrayId.value}`,
-    alert("Gagal menyimpan nampan")
+                { nama: trayName.value },
-  }
+                {
-}
+                    headers: {
+                        Authorization: `Bearer ${localStorage.getItem(
+                            "token"
+                        )}`,
+                    },
+                }
+            );
+            alert("Nampan berhasil diupdate");
+        } else {
+            await axios.post(
+                "/api/nampan",
+                { nama: trayName.value },
+                {
+                    headers: {
+                        Authorization: `Bearer ${localStorage.getItem(
+                            "token"
+                        )}`,
+                    },
+                }
+            );
+            alert("Nampan berhasil ditambahkan");
+        }
+        closeModal();
+        location.reload();
+    } catch (error) {
+        console.error(error);
+        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 {
+    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()
+            },
-  } catch (error) {
+        });
-    console.error(error)
+        alert("Semua item berhasil dipindahkan ke Brankas");
-    alert("Gagal mengosongkan nampan")
+        closeConfirmModal();
-  }
+        location.reload();
-}
+    } catch (error) {
+        console.error(error);
+        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 {
+    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")}`,
-  } catch (error) {
+            },
-    console.error(error)
+        });
-    alert("Gagal menghapus nampan")
+        alert("Nampan berhasil dihapus");
-  }
+        location.reload();
-}
+    } catch (error) {
+        console.error(error);
+        alert("Gagal menghapus nampan");
+    }
+};
 </script>