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

.env.example

@@ -1,65 +0,0 @@
-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}"

app/Http/Controllers/FotoSementaraController.php

@@ -11,7 +11,7 @@ class FotoSementaraController extends Controller
     public function upload(Request $request)
     {
         $request->validate([
-            'id_produk' => 'required|exists:produk,id',
+            'id_user' => 'required|exists:users,id',
             'foto'      => 'required|image|mimes:jpg,jpeg,png|max:2048',
         ]);
 
@@ -19,11 +19,11 @@ class FotoSementaraController extends Controller
         $url = asset('storage/' . $path);
 
         $foto = FotoSementara::create([
-            'id_produk' => $request->id_produk,
+            'id_user' => $request->id_user,
             'url'       => $url,
         ]);
 
-        return response()->json(['message' => 'Foto berhasil disimpan'], 201);
+        return response()->json($foto, 201);
     }
 
     public function hapus($id)
@@ -45,6 +45,9 @@ class FotoSementaraController extends Controller
     public function getAll($user_id)
     {
         $data = FotoSementara::where('id_user', $user_id);
+        if (!$data->exists()) {
+            return response()->json(['message' => 'Tidak ada foto ditemukan'], 404);
+        }
         return response()->json($data);
     }
     

app/Http/Controllers/NampanController.php

@@ -13,7 +13,7 @@ class NampanController extends Controller
     public function index()
     {
         return response()->json(
-            Nampan::withCount('items')->get()
+            Nampan::with('items.produk.foto')->withCount('items')->get()
         );
     }
 
@@ -43,7 +43,7 @@ class NampanController extends Controller
     public function show(int $id)
     {
         return response()->json(
-            Nampan::with('items')->find($id)
+            Nampan::with('items.produk.foto')->find($id)
         );
     }
 

app/Http/Controllers/TransaksiController.php

@@ -13,14 +13,20 @@ class TransaksiController extends Controller
     // List semua transaksi
     public function index()
     {
-        $transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->get();
+        $limit = request()->query('limit', null);
+        $query = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->latest();
+        if ($limit) {
+            $query->limit((int)$limit);
+        }
+        $transaksi = $query->get();
+        $transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->latest()->limit(100)->get();
         return response()->json($transaksi);
     }
 
     // Detail transaksi by ID
     public function show($id)
     {
-        $transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->findOrFail($id);
+        $transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk.foto'])->findOrFail($id);
         return response()->json($transaksi);
     }
 

app/Models/Nampan.php

@@ -13,9 +13,18 @@ class Nampan extends Model
     protected $fillable = [
         'nama'
     ];
+    protected $appends = ['berat_total'];
+
 
     public function items()
     {
         return $this->hasMany(Item::class, 'id_nampan');
     }
+
+    public function getBeratTotalAttribute()
+    {
+        return $this->items()
+            ->join('produks', 'items.id_produk', '=', 'produks.id')
+            ->sum('produks.berat');
+    }
 }

resources/js/components/BrankasList.vue

@@ -8,8 +8,8 @@
       <!-- Gambar -->
       <div class="flex items-center gap-3">
         <img
-          :src="item.image"
+           v-if="item.produk.foto && item.produk.foto.length > 0"
-          alt="Product Image"
+      :src="item.produk.foto[0].url"
           class="w-12 h-12 object-contain"
         />
         <!-- Info produk -->

resources/js/components/DropdownNav.vue

@@ -0,0 +1,48 @@
+<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

@@ -1,17 +1,70 @@
 <script setup>
-const items = ['Manajemen Produk', 'Kasir', 'Laporan', 'Akun'];
+import { ref } from "vue";
+
+const isOpen = ref(false);
+
+const items = [
+  { label: "Kasir", route: "/kasir" },
+  { label: "Laporan", route: "/laporan" },
+  { label: "Akun", route: "/akun" },
+];
+
+const subItems = [
+  { label: "Brankas", route: "/brankas" },
+  { label: "Nampan", route: "/nampan" },
+  { label: "Produk", route: "/produk" },
+  { label: "Sales", route: "/sales" },
+];
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
 </script>
 
 <template>
-    <div class="h-25 shadow-lg  shadow-D rounded-b-md">
+  <div class="h-25 shadow-lg shadow-D rounded-b-md">
-        <div class="bg-D h-5 rounded-b-md shadow-lg">
+    <div class="bg-D h-5 rounded-b-md shadow-lg">
-            <div class="h-15"></div>
+      <div class="h-15"></div>
-            <div class="w-full px-50 flex justify-between items-center h-5">
+      <div class="w-full px-50 flex justify-between items-center h-5 relative">
-                <router-link to="/" v-for="item in items"
+        
-                    class="text-center text-lg text-D hover:underline cursor-pointer">
+        <!-- Dropdown khusus "Manajemen Produk" -->
-                    {{ item }}
+        <div class="relative">
+          <button
+            @click="toggleDropdown"
+            class="text-center text-lg text-D hover:underline cursor-pointer"
+          >
+            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="(sub, index) in subItems"
+                :key="index"
+                class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
+              >
+                <router-link :to="sub.route" class="block w-full h-full">
+                  {{ sub.label }}
                 </router-link>
-            </div>
+              </li>
+            </ul>
+          </div>
         </div>
+
+        <!-- menu lain -->
+        <router-link
+          v-for="item in items"
+          :key="item.label"
+          :to="item.route"
+          class="text-center text-lg text-D hover:underline cursor-pointer"
+        >
+          {{ item.label }}
+        </router-link>
+      </div>
     </div>
-</template>
+  </div>
+</template>

resources/js/components/InputField.vue

@@ -0,0 +1,28 @@
+<template>
+    <input
+      :type="type"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :placeholder="placeholder"
+      class="mt-1 block w-full rounded-md shadow-sm sm:text-sm bg-A text-D border-B focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2"
+    />
+</template>
+
+<script setup>
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'text',
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>

resources/js/components/InputSelect.vue

@@ -0,0 +1,31 @@
+<template>
+    <select
+      :value="modelValue"
+      @change="$emit('update:modelValue', $event.target.value)"
+      class="mt-1 block w-full rounded-md shadow-sm sm:text-sm bg-A text-D border-B focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2"
+    >
+      <option value="" :disabled="!modelValue && placeholder" v-if="placeholder" class="hover:bg-C text-D">{{ placeholder }}</option>
+      <option v-for="option in options" :key="option.value" :selected="option.selected" :value="option.value" class="hover:bg-C text-D">
+        {{ option.label }}
+      </option>
+    </select>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>

resources/js/components/ProductCard.vue

@@ -1,65 +1,31 @@
 <template>
-  <div>
+  <div
-    <!-- Card Produk -->
+    class="relative border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
+    @click="$emit('click', product.id)"
+  >
+    <!-- Foto Produk -->
+    <img
+      v-if="product.foto && product.foto.length > 0"
+      :src="product.foto[0].url"
+      :alt="product.nama"
+      class="w-full h-full object-cover"
+    />
+    <span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
+
+    <!-- Nama Produk di bawah -->
     <div
-      class="border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer"
+      class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
-      @click="showDetail = true"
     >
-      <span class="text-gray-700 font-medium text-center px-2">
+      {{ product.nama }}
-        {{ product.nama }}
-      </span>
-    </div>
-
-    <!-- Overlay Detail -->
-    <div
-      v-if="showDetail"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-    >
-      <div
-        class="bg-white rounded-lg shadow-lg w-[90%] max-w-md p-6 relative"
-      >
-        <!-- Tombol Close -->
-        <button
-          class="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
-          @click="showDetail = false"
-        >
-          ✕
-        </button>
-
-        <!-- Judul -->
-        <h2 class="text-xl font-semibold text-D mb-4 text-center">
-          Detail Produk
-        </h2>
-
-        <!-- Data Produk -->
-        <div class="space-y-2 text-gray-700">
-          <p><span class="font-semibold">Nama:</span> {{ product.nama }}</p>
-          <p><span class="font-semibold">Kategori:</span> {{ product.kategori }}</p>
-          <p><span class="font-semibold">Berat:</span> {{ product.berat }} gram</p>
-          <p><span class="font-semibold">Kadar:</span> {{ product.kadar }}%</p>
-          <p><span class="font-semibold">Harga/gram:</span> Rp {{ formatHarga(product.harga_per_gram) }}</p>
-          <p><span class="font-semibold">Harga Jual:</span> Rp {{ formatHarga(product.harga_jual) }}</p>
-          <p><span class="font-semibold">Stok:</span> {{ product.items_count }} pcs</p>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+defineProps({
-
-const props = defineProps({
   product: {
     type: Object,
     required: true,
   },
 });
-
-const showDetail = ref(false);
-
-// Format rupiah
-function formatHarga(value) {
-  return new Intl.NumberFormat("id-ID").format(value);
-}
 </script>

resources/js/components/TrayList.vue

@@ -26,34 +26,50 @@
       >
         <!-- Header Nampan -->
         <div class="flex justify-between items-center mb-3">
-          <h2 class="font-bold text-lg">{{ tray.nama }}</h2>
+          <h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
           <div class="flex gap-2">
-            <button class="bg-yellow-300 p-1 rounded">✏️</button>
+            <button 
-            <button class="bg-red-500 text-white p-1 rounded">🗑️</button>
+  class="p-2 rounded bg-yellow-400 hover:bg-yellow-500"
+  @click="emit('edit', tray)"
+>
+  ✏️
+</button>
+            <button 
+  class="bg-red-500 text-white p-1 rounded"
+  @click="emit('delete', tray.id)"
+>
+  🗑️
+</button>
           </div>
         </div>
 
         <!-- Isi Nampan -->
-        <div v-if="tray.items && tray.items.length > 0" class="space-y-2">
+        <div 
-          <div
+  v-if="tray.items && tray.items.length > 0" 
-            v-for="item in tray.items"
+  class="space-y-2 max-h-64 overflow-y-auto pr-2"
-            :key="item.id"
+>
-            class="flex justify-between items-center border rounded-lg p-2"
+  <div
-          >
+    v-for="item in tray.items"
+    :key="item.id"
+    class="flex justify-between items-center border rounded-lg p-2"
+  >
+          
             <!-- Gambar + Info -->
             <div class="flex items-center gap-3">
               <img
-                :src="item.image"
+                 v-if="item.produk.foto && item.produk.foto.length > 0"
-                alt="Product Image"
+      :src="item.produk.foto[0].url"
-                class="w-12 h-12 object-contain"
+      alt="foto produk"
+      class="w-12 h-12 object-cover rounded"
               />
               <div>
-                <p class="font-semibold">{{ item.produk.nama }}</p>
+                <p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
-                <p class="text-sm text-gray-500">{{ item.produk.id }}</p>
+                <p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p>
+                <p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
               </div>
             </div>
             <!-- Berat -->
-            <span class="font-medium">{{ item.berat }}g</span>
+            <span class="font-medium">{{ item.produk.berat }}g</span>
           </div>
         </div>
 
@@ -85,6 +101,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["edit", "delete"])
+
 const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
@@ -92,15 +110,34 @@ const error = ref(null);
 // hitung total berat
 const totalWeight = (tray) => {
   if (!tray.items) return 0;
-  return tray.items.reduce((sum, item) => sum + (item.berat || 0), 0);
+  return tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
 };
+// const totalWeight = (tray) => {
+//   if (!tray.items) return 0;
+//   const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
+//   return total.toFixed(2); // hasil string "12.34"
+// };
 
 // ambil data dari backend
 onMounted(async () => {
   try {
-    const res = await axios.get("/api/nampan");
+    const [nampanRes, itemRes] = await Promise.all([
-    trays.value = res.data; // harus array tray dengan items
+      axios.get("/api/nampan"),
-    console.log("Data nampan:", res.data);
+      axios.get("/api/item")
+    ]);
+
+    const nampans = nampanRes.data;
+    const items = itemRes.data;
+
+    // mapping items ke nampan
+    trays.value = nampans.map(tray => {
+      return {
+        ...tray,
+        items: items.filter(item => item.id_nampan === tray.id)
+      };
+    });
+
+    console.log("Nampan dengan items:", trays.value);
   } catch (err) {
     error.value = err.message || "Gagal mengambil data";
   } finally {

resources/js/pages/InputProduk.vue

@@ -0,0 +1,384 @@
+<template>
+  <mainLayout>
+    <div class="p-6">
+      <p class="font-serif italic text-[25px] text-D">Produk Baru</p>
+    
+      <div class="flex flex-col md:flex-row mt-5 gap-6">
+        <!-- Form Section -->
+        <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" 
+            />
+          </div>
+          
+          <div class="mb-3">
+            <label class="block text-D mb-1">Kategori</label>
+            <InputSelect 
+              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
+                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 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 -->
+        <div class="flex-1">
+          <label class="block text-D mb-1">Foto</label>
+          
+          <!-- Image Grid -->
+          <div class="grid grid-cols-3 gap-3">
+            <!-- Uploaded 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"
+                />
+                <!-- Delete Button -->
+                <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-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" 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>
+                  </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>
+                  </svg>
+                </div>
+                <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"
+            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>
+  </mainLayout>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import axios from "axios";
+import mainLayout from "../layouts/mainLayout.vue";
+import InputField from "../components/InputField.vue";
+import InputSelect from "../components/InputSelect.vue";
+
+const form = ref({
+  nama: '',
+  kategori: '',
+  berat: 0,
+  kadar: 0,
+  harga_per_gram: 0,
+  harga_jual: 0,
+});
+
+const category = ref([
+  { value: "cincin", label: "Cincin" },
+  { value: "gelang", label: "Gelang" },
+  { value: "kalung", label: "Kalung" },
+  { value: "anting", label: "Anting" },
+]);
+
+const loading = ref(false);
+const uploadLoading = ref(false);
+const uploadedImages = ref([]);
+const isDragging = ref(false);
+const uploadError = ref('');
+const fileInput = ref(null);
+const userId = ref(1); // Sesuaikan dengan user yang login
+
+const isFormValid = computed(() => {
+  return form.value.nama && 
+         form.value.kategori && 
+         form.value.berat > 0 && 
+         form.value.kadar > 0 && 
+         form.value.harga_per_gram > 0 &&
+         form.value.harga_jual > 0;
+});
+
+const calculateHargaJual = () => {
+  const berat = parseFloat(form.value.berat) || 0;
+  const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0;
+  if (berat > 0 && hargaPerGram > 0) {
+    form.value.harga_jual = berat * hargaPerGram;
+  }
+};
+
+const loadExistingPhotos = async () => {
+  try {
+    const response = await axios.get(`/api/foto/${userId.value}`);
+    if (response.data && Array.isArray(response.data)) {
+      uploadedImages.value = response.data;
+    }
+  } catch (error) {
+    if (error.response?.status !== 404) {
+      console.error('Error loading existing photos:', error);
+    }
+    // 404 is expected when no photos exist yet
+  }
+};
+
+const triggerFileInput = () => {
+  if (!uploadLoading.value && uploadedImages.value.length < 6) {
+    fileInput.value?.click();
+  }
+};
+
+const handleFileSelect = (event) => {
+  const files = Array.from(event.target.files);
+  uploadFiles(files);
+};
+
+const handleDrop = (event) => {
+  event.preventDefault();
+  isDragging.value = false;
+  
+  if (uploadLoading.value || uploadedImages.value.length >= 6) return;
+  
+  const files = Array.from(event.dataTransfer.files);
+  uploadFiles(files);
+};
+
+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
+    
+    if (!isValidType) {
+      uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
+      return false;
+    }
+    
+    if (!isValidSize) {
+      uploadError.value = 'Ukuran file maksimal 2MB';
+      return false;
+    }
+    
+    return true;
+  });
+  
+  if (validFiles.length === 0) return;
+  
+  uploadLoading.value = true;
+  
+  try {
+    for (const file of validFiles) {
+      const formData = new FormData();
+      formData.append('foto', file);
+      formData.append('id_user', userId.value);
+      
+      const response = await axios.post('/api/foto/upload', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      
+      uploadedImages.value.push(response.data);
+    }
+    
+    // Clear file input
+    if (fileInput.value) {
+      fileInput.value.value = '';
+    }
+    
+  } catch (error) {
+    console.error('Upload error:', error);
+    uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
+  } finally {
+    uploadLoading.value = false;
+  }
+};
+
+const removeImage = async (imageId) => {
+  try {
+    await axios.delete(`/api/foto/hapus/${imageId}`);
+    uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId);
+    uploadError.value = '';
+  } catch (error) {
+    console.error('Delete error:', error);
+    uploadError.value = 'Gagal menghapus foto';
+  }
+};
+
+const submitForm = async () => {
+  if (!isFormValid.value) {
+    alert('Mohon lengkapi semua field yang diperlukan');
+    return;
+  }
+  
+  loading.value = true;
+  
+  try {
+    const response = await axios.post('/api/produk', {
+      ...form.value,
+      id_user: userId.value
+    });
+    
+    // Reset form
+    form.value = {
+      nama: '',
+      kategori: '',
+      berat: 0,
+      kadar: 0,
+      harga_per_gram: 0,
+      harga_jual: 0,
+    };
+    
+    uploadedImages.value = [];
+    uploadError.value = '';
+    
+    if (fileInput.value) {
+      fileInput.value.value = '';
+    }
+    
+    alert('Produk berhasil disimpan!');
+    
+  } catch (error) {
+    console.error('Submit error:', error);
+    
+    if (error.response?.data?.errors) {
+      const errors = Object.values(error.response.data.errors).flat();
+      alert('Error: ' + errors.join(', '));
+    } else {
+      alert('Gagal menyimpan produk: ' + (error.response?.data?.message || error.message));
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetPhotos = async () => {
+  try {
+    await axios.delete(`/api/foto/reset/${userId.value}`);
+    uploadedImages.value = [];
+  } catch (error) {
+    console.error('Error resetting photos:', error);
+  }
+};
+
+// Load existing photos on component mount
+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

@@ -4,14 +4,27 @@
       <!-- Judul -->
       <p class="font-serif italic text-[25px] text-D">PRODUK</p>
 
-      <!-- Search -->
+      <!-- Filter -->
-      <searchbar v-model:search="searchQuery" />
+      <div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+        <!-- Dropdown Kategori -->
+        <select
+          v-model="selectedCategory"
+          class="border border-gray-300 rounded-md px-3 py-2 bg-B focus:outline-none focus:ring-2 focus:ring-B w-full md:w-48"
+        >
+          <option value="semua">Semua</option>
+          <option value="cincin">Cincin</option>
+          <option value="gelang">Gelang</option>
+          <option value="kalung">Kalung</option>
+          <option value="anting">Anting</option>
+        </select>
+
+        <!-- Search -->
+        <searchbar v-model:search="searchQuery" class="flex-1" />
+      </div>
 
       <!-- Tombol Tambah Produk -->
       <div class="mt-3 flex justify-end">
-        <button
+        <button class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
-          class="bg-B text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-        >
           Tambah Produk
         </button>
       </div>
@@ -22,78 +35,90 @@
           v-for="item in filteredProducts"
           :key="item.id"
           :product="item"
-          @showDetail="openOverlay"
+          @click="openOverlay(item.id)"
         />
       </div>
     </div>
 
     <!-- Overlay Detail Produk -->
-    <div
+    <!-- Overlay Detail Produk -->
-      v-if="showOverlay"
+<div
-      class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+  v-if="showOverlay"
-      @click.self="closeOverlay"
+  class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
-    >
+  @click.self="closeOverlay"
-      <div
+>
-        class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative"
+  <div
-      >
+    class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
-        <!-- Tombol Close -->
+    @mouseleave="closeOverlay"
-        <button
+  >
-          @click="closeOverlay"
+    <!-- Foto Produk dengan Slider -->
-          class="absolute top-2 right-2 text-gray-500 hover:text-black"
+    <div class="relative w-60 h-60 border border-[#e6d3b3] flex items-center justify-center mb-4 overflow-hidden rounded">
-        >
+      <img
-          ✕
+        v-if="detail.foto && detail.foto.length > 0"
-        </button>
+        :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>
 
-        <!-- Foto Produk -->
+      <!-- Stok (pcs) pojok kiri atas -->
-        <div class="border border-[#e6d3b3] p-2 mb-4 flex justify-center">
+      <div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
-          <img
+        {{ detail.item_count }} pcs
-            v-if="detail.gambar"
-            :src="`http://127.0.0.1:8000/storage/${detail.gambar}`"
-            :alt="detail.nama"
-            class="w-40 h-40 object-contain"
-          />
-          <span v-else class="text-gray-400 text-sm">[gambar]</span>
-        </div>
-
-        <!-- Stok -->
-        <p class="text-sm mb-1">{{ detail.item_count }} pcs</p>
-
-        <!-- Nama Produk -->
-        <h2 class="text-xl font-semibold text-center mb-3">
-          {{ detail.nama }}
-        </h2>
-
-        <!-- Detail Harga & Info -->
-        <div class="grid grid-cols-2 gap-2 text-sm mb-4">
-          <p>Harga Beli : Rp. {{ formatNumber(detail.harga_beli) }}</p>
-          <p class="text-right">{{ detail.kadar }} K</p>
-          <p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
-          <p class="text-right">{{ detail.berat }} gram</p>
-          <p class="col-span-2">
-            Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
-          </p>
-        </div>
-
-        <!-- Tombol Aksi -->
-        <div class="flex justify-between">
-          <button
-            class="bg-yellow-400 text-black px-4 py-2 rounded font-bold"
-          >
-            Ubah
-          </button>
-          <button
-            class="bg-green-400 text-black px-4 py-2 rounded font-bold"
-          >
-            Tambah
-          </button>
-          <button
-            class="bg-red-500 text-white px-4 py-2 rounded font-bold"
-          >
-            Hapus
-          </button>
-        </div>
       </div>
+
+      <!-- Nama Produk di bawah -->
+      <div
+        class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
+      >
+        {{ detail.nama }}
+      </div>
+
+      <!-- Tombol Prev -->
+      <button
+        v-if="detail.foto && detail.foto.length > 1"
+        @click.stop="prevFoto"
+        class="absolute left-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
+      >
+        ‹
+      </button>
+      <!-- Tombol Next -->
+      <button
+        v-if="detail.foto && detail.foto.length > 1"
+        @click.stop="nextFoto"
+        class="absolute right-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
+      >
+        ›
+      </button>
     </div>
+
+    <!-- Detail Harga & Info -->
+    <div class="grid grid-cols-2 gap-2 text-sm mb-4 w-full">
+      <!-- harga beli dihapus -->
+      <p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
+      <p class="text-right">{{ detail.kadar }} K</p>
+      <p class="col-span-2 text-center">
+        Berat : {{ detail.berat }} gram
+      </p>
+      <p class="col-span-2">
+        Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
+      </p>
+    </div>
+
+    <!-- Tombol Aksi -->
+    <div class="flex justify-between w-full">
+      <button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
+        Ubah
+      </button>
+      <button class="bg-green-400 text-black px-4 py-2 rounded font-bold">
+        Tambah
+      </button>
+      <button class="bg-red-500 text-white px-4 py-2 rounded font-bold">
+        Hapus
+      </button>
+    </div>
+  </div>
+</div>
+
   </mainLayout>
 </template>
 
@@ -106,10 +131,12 @@ import searchbar from "../components/searchbar.vue";
 
 const products = ref([]);
 const searchQuery = ref("");
+const selectedCategory = ref("semua");
 
 // overlay state
 const showOverlay = ref(false);
 const detail = ref({});
+const currentFotoIndex = ref(0);
 
 // Fetch data awal
 onMounted(async () => {
@@ -121,29 +148,60 @@ onMounted(async () => {
   }
 });
 
-// Filter
+// Filter gabungan (kategori + search)
 const filteredProducts = computed(() => {
-  if (!searchQuery.value) return products.value;
+  let hasil = products.value;
-  return products.value.filter((p) =>
+
-    p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
+  // filter kategori
-  );
+  if (selectedCategory.value !== "semua") {
+    hasil = hasil.filter(
+      (p) => p.kategori.toLowerCase() === selectedCategory.value
+    );
+  }
+
+  // filter search
+  if (searchQuery.value) {
+    hasil = hasil.filter((p) =>
+      p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
+    );
+  }
+
+  return hasil;
 });
 
-// Fungsi buka overlay
+// buka overlay
 async function openOverlay(id) {
   try {
     const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`);
     detail.value = res.data;
+    currentFotoIndex.value = 0; // reset ke foto pertama
     showOverlay.value = true;
   } catch (error) {
     console.error("Gagal fetch detail produk:", error);
   }
 }
 
-// Fungsi tutup overlay
+// tutup overlay
 function closeOverlay() {
   showOverlay.value = false;
   detail.value = {};
+  currentFotoIndex.value = 0;
+}
+
+// foto navigation
+function nextFoto() {
+  if (detail.value.foto && detail.value.foto.length > 0) {
+    currentFotoIndex.value =
+      (currentFotoIndex.value + 1) % detail.value.foto.length;
+  }
+}
+
+function prevFoto() {
+  if (detail.value.foto && detail.value.foto.length > 0) {
+    currentFotoIndex.value =
+      (currentFotoIndex.value - 1 + detail.value.foto.length) %
+      detail.value.foto.length;
+  }
 }
 
 // Format angka

resources/js/pages/Tray.vue

@@ -1,16 +1,181 @@
 <template>
-    <mainLayout>
+  <mainLayout>
-        <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic;font-size: 25px;">NAMPAN</p>
-        <searchbar v-model:search="searchQuery" />
-        <TrayList :search="searchQuery" />
-    </mainLayout>
-
     
+    <!-- Header -->
+<div class="mb-4">
+  <!-- Judul -->
+  <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
+    NAMPAN
+  </p>
+
+  <!-- Searchbar -->
+  <div class="flex justify-end mt-2">
+    <div class="w-64">
+      <searchbar v-model:search="searchQuery" />
+    </div>
+  </div>
+
+  <!-- Tombol -->
+  <div class="flex gap-2 mt-3 justify-end">
+    <!-- Tambah Nampan -->
+    <button 
+      @click="openModal" 
+      class="px-4 py-2 hover:bg-green-700 rounded-md shadow font-semibold"
+      style="background-color: #DAC0A3; color: #102C57;">
+      Tambah Nampan
+    </button>
+
+    <!-- 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 bg-opacity-40 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 -->
+    <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 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("");
+
-</script>
+const searchQuery = ref("")
+const showModal = ref(false)
+const showConfirmModal = ref(false)
+const trayName = ref("")
+const editingTrayId = ref(null)
+
+// buka modal tambah/edit
+const openModal = () => { showModal.value = true }
+const closeModal = () => {
+  trayName.value = ""
+  editingTrayId.value = null
+  showModal.value = false
+}
+
+// simpan nampan
+const saveTray = async () => {
+  if (!trayName.value.trim()) {
+    alert("Nama Nampan tidak boleh kosong")
+    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()
+    location.reload()
+  } catch (error) {
+    console.error(error)
+    alert("Gagal menyimpan nampan")
+  }
+}
+
+// === Konfirmasi kosongkan nampan ===
+const openConfirmModal = () => { showConfirmModal.value = true }
+const closeConfirmModal = () => { showConfirmModal.value = false }
+
+const confirmEmptyTray = async () => {
+  try {
+    await axios.post("/api/brankas", { action: "move_all_from_tray" })
+    alert("Semua item berhasil dipindahkan ke Brankas")
+    closeConfirmModal()
+    location.reload()
+  } catch (error) {
+    console.error(error)
+    alert("Gagal mengosongkan nampan")
+  }
+}
+
+const editTray = (tray) => {
+  trayName.value = tray.nama
+  editingTrayId.value = tray.id
+  showModal.value = true
+}
+
+const deleteTray = async (id) => {
+  if (!confirm("Yakin ingin menghapus nampan ini?")) return
+  try {
+    await axios.delete(`/api/nampan/${id}`)
+    alert("Nampan berhasil dihapus")
+    location.reload()
+  } catch (error) {
+    console.error(error)
+    alert("Gagal menghapus nampan")
+  }
+}
+</script>

resources/js/router/index.js

@@ -4,7 +4,7 @@ import Produk from '../pages/Produk.vue'
 import Brankas from '../pages/Brankas.vue'
 import Tray from '../pages/Tray.vue'
 import Kasir from '../pages/Kasir.vue'
-
+import InputProduk from '../pages/InputProduk.vue'
 
 
 const routes = [
@@ -18,6 +18,11 @@ const routes = [
     name: 'Produk',
     component: Produk
   },
+  {
+    path: '/produk/baru',
+    name: 'ProdukBaru',
+    component: InputProduk
+  },
   {
     path: '/brankas',
     name: 'Brankas',

routes/web.php

@@ -19,10 +19,12 @@ Route::prefix('api')->group(function () {
     Route::apiResource('transaksi', TransaksiController::class);
     
     Route::get('brankas', [ItemController::class, 'brankasItem']);
+    
+    // Foto Sementara
     Route::post('foto/upload', [FotoSementaraController::class, 'upload']);
-    Route::delete('foto/hapus/<id>', [FotoSementaraController::class, 'hapus']);
+    Route::delete('foto/hapus/{id}', [FotoSementaraController::class, 'hapus']);
-    Route::get('foto/<user_id>', [FotoSementaraController::class, 'getAll']);
+    Route::get('foto/{user_id}', [FotoSementaraController::class, 'getAll']);
-    Route::delete('foto/reset/<user_id>', [FotoSementaraController::class, 'reset']);
+    Route::delete('foto/reset/{user_id}', [FotoSementaraController::class, 'reset']);
 });
 
 // Frontend SPA