[update] Input produk

.env.example

@@ -0,0 +1,65 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+# APP_MAINTENANCE_STORE=database
+
+PHP_CLI_SERVER_WORKERS=4
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+# DB_HOST=127.0.0.1
+# DB_PORT=3306
+# DB_DATABASE=laravel
+# DB_USERNAME=root
+# DB_PASSWORD=
+
+SESSION_DRIVER=database
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=database
+
+CACHE_STORE=database
+# CACHE_PREFIX=
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_CLIENT=phpredis
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=log
+MAIL_SCHEME=null
+MAIL_HOST=127.0.0.1
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+VITE_APP_NAME="${APP_NAME}"

resources/js/components/DropdownNav.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="relative inline-block text-left">
-    <!-- Tombol Dropdown -->
-    <button 
-      @click="isOpen = !isOpen"
-      class="px-4 py-2 bg-white border rounded-md shadow-sm hover:bg-gray-100"
-    >
-      Manajemen Produk
-    </button>
-
-    <!-- Isi Dropdown -->
-    <div
-      v-if="isOpen"
-      class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
-    >
-      <ul>
-        <li
-          v-for="(item, index) in items"
-          :key="index"
-          @click="goTo(item.route)"
-          class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
-        >
-          {{ item.label }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-
-const isOpen = ref(false);
-const router = useRouter();
-
-const items = [
-  { label: "Brankas", route: "/brankas" },
-  { label: "Nampan", route: "/nampan" },
-  { label: "Produk", route: "/produk" },
-  { label: "Sales", route: "/sales" },
-];
-
-const goTo = (route) => {
-  isOpen.value = false;
-  router.push(route);
-};
-</script>

resources/js/components/Header.vue

@@ -45,7 +45,7 @@ const toggleDropdown = () => {
               <li
                 v-for="(sub, index) in subItems"
                 :key="index"
-                class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
+                class="px-4 py-2 hover:bg-A cursor-pointer"
               >
                 <router-link :to="sub.route" class="block w-full h-full">
                   {{ sub.label }}

resources/js/pages/InputProduk.vue

@@ -8,74 +8,37 @@
         <div class="flex-1">
           <div class="mb-3">
             <label class="block text-D mb-1">Nama Produk</label>
-            <InputField 
+            <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
-              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 
+            <InputSelect v-model="form.kategori" :options="category" placeholder="Pilih kategori" />
-              v-model="form.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
+              <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
-                v-model="form.berat"
+                @input="calculateHargaJual" />
-                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 
+              <InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
-                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
+              <InputField v-model="form.harga_per_gram" type="number" step="0.01" placeholder="Masukkan harga per gram"
-                v-model="form.harga_per_gram"
+                @input="calculateHargaJual" />
-                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
+              <InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
-                v-model="form.harga_jual"
-                type="number"
-                step="0.01"
-                placeholder="Masukkan harga jual"
-              />
             </div>
           </div>
-
-          <div class="mt-6">
-            <button 
-              @click="submitForm"
-              :disabled="loading || !isFormValid"
-              class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-            >
-              {{ loading ? 'Menyimpan...' : 'Simpan Produk' }}
-            </button>
-          </div>
         </div>
 
         <!-- Image Upload Section -->
@@ -85,79 +48,69 @@
           <!-- Image Grid -->
           <div class="grid grid-cols-3 gap-3">
             <!-- Uploaded Images -->
-            <div 
+            <div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square">
-              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 
+                <img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
-                  :src="image.url" 
-                  :alt="`Foto ${index + 1}`"
-                  class="w-full h-full object-cover"
-                />
                 <!-- Delete Button -->
-                <button 
+                <button @click="removeImage(image.id)" :disabled="uploadLoading"
-                  @click="removeImage(image.id)"
+                  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">
-                  :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 
+            <div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
-              v-if="uploadedImages.length < 6"
+              @dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
-              @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-blue-400 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">
-                <!-- Upload Icon or Loading -->
+                <div v-if="!uploadLoading"
-                <div v-if="!uploadLoading" class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
+                  class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 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>
+                    <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-blue-600 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>
+                    <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>
+                <p class="text-xs text-gray-600 font-medium"
+                  v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
               </div>
             </div>
           </div>
 
-          <!-- Hidden File Input -->
+          <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"
-          />
 
-          <!-- Upload Info -->
           <p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
 
-          <!-- Error Message -->
           <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 @click="submitForm(true)" :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...' : 'Tambah Item' }}
+        </button>
+        <button @click="submitForm(false)" :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' }}
+        </button>
+      </div>
     </div>
   </mainLayout>
 </template>
@@ -191,7 +144,8 @@ const uploadedImages = ref([]);
 const isDragging = ref(false);
 const uploadError = ref('');
 const fileInput = ref(null);
-const userId = ref(1); // Sesuaikan dengan user yang login
+// TODO: Logika autentikasi user
+const userId = ref(1);
 
 const isFormValid = computed(() => {
   return form.value.nama &&
@@ -199,7 +153,8 @@ const isFormValid = computed(() => {
     form.value.berat > 0 &&
     form.value.kadar > 0 &&
     form.value.harga_per_gram > 0 &&
-         form.value.harga_jual > 0;
+    form.value.harga_jual > 0 &&
+    uploadedImages.value.length > 0;
 });
 
 const calculateHargaJual = () => {
@@ -220,7 +175,6 @@ const loadExistingPhotos = async () => {
     if (error.response?.status !== 404) {
       console.error('Error loading existing photos:', error);
     }
-    // 404 is expected when no photos exist yet
   }
 };
 
@@ -248,16 +202,14 @@ const handleDrop = (event) => {
 const uploadFiles = async (files) => {
   uploadError.value = '';
 
-  // Validate file count
   if (uploadedImages.value.length + files.length > 6) {
     uploadError.value = 'Maksimal 6 foto yang dapat diupload';
     return;
   }
 
-  // Validate file types and sizes
   const validFiles = files.filter(file => {
     const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
-    const isValidSize = file.size <= 2 * 1024 * 1024; // 2MB
+    const isValidSize = file.size <= 2 * 1024 * 1024;
 
     if (!isValidType) {
       uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
@@ -291,7 +243,6 @@ const uploadFiles = async (files) => {
       uploadedImages.value.push(response.data);
     }
 
-    // Clear file input
     if (fileInput.value) {
       fileInput.value.value = '';
     }
@@ -315,7 +266,7 @@ const removeImage = async (imageId) => {
   }
 };
 
-const submitForm = async () => {
+const submitForm = async (addItem) => {
   if (!isFormValid.value) {
     alert('Mohon lengkapi semua field yang diperlukan');
     return;
@@ -329,7 +280,6 @@ const submitForm = async () => {
       id_user: userId.value
     });
 
-    // Reset form
     form.value = {
       nama: '',
       kategori: '',
@@ -346,8 +296,11 @@ const submitForm = async () => {
       fileInput.value.value = '';
     }
 
-    alert('Produk berhasil disimpan!');
+    if (addItem) {
-    
+      alert('Produk berhasil ditambahkan. Silakan tambahkan produk lainnya.');
+    } else {
+      window.location.href = '/produk?message=Produk berhasil disimpan';
+    }
   } catch (error) {
     console.error('Submit error:', error);
 
@@ -371,14 +324,12 @@ const resetPhotos = async () => {
   }
 };
 
-// Load existing photos on component mount
+const back = () => {
+  resetPhotos();
+  window.history.back();
+};
+
 onMounted(() => {
   loadExistingPhotos();
 });
-
-// Clean up photos if user leaves without saving
-onUnmounted(() => {
-  // Optional: You might want to clean up temporary photos here
-  // resetPhotos();
-});
 </script>

resources/js/pages/Produk.vue

@@ -24,9 +24,9 @@
 
       <!-- Tombol Tambah Produk -->
       <div class="mt-3 flex justify-end">
-        <button class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
+        <router-link to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
           Tambah Produk
-        </button>
+        </router-link>
       </div>
 
       <!-- Grid Produk -->
@@ -141,7 +141,7 @@ const currentFotoIndex = ref(0);
 // Fetch data awal
 onMounted(async () => {
   try {
-    const res = await axios.get("http://127.0.0.1:8000/api/produk");
+    const res = await axios.get("/api/produk");
     products.value = res.data;
   } catch (error) {
     console.error("Gagal ambil data produk:", error);
@@ -172,7 +172,7 @@ const filteredProducts = computed(() => {
 // buka overlay
 async function openOverlay(id) {
   try {
-    const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`);
+    const res = await axios.get(`/api/produk/${id}`);
     detail.value = res.data;
     currentFotoIndex.value = 0; // reset ke foto pertama
     showOverlay.value = true;

routes/web.php

@@ -30,4 +30,4 @@ Route::prefix('api')->group(function () {
 // Frontend SPA
 Route::get('/{any}', function () {
     return view('app');
-})->where('any', '.*');
+})->where('any', '^(?!storage|api).*$');