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

.env.example

@@ -1,8 +1,8 @@
-APP_NAME=Laravel
+APP_NAME=Abbauf-Kasir
 APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
-APP_URL=http://localhost
+APP_URL=http://localhost:8000
 
 APP_LOCALE=en
 APP_FALLBACK_LOCALE=en

app/Http/Controllers/ProdukController.php

@@ -28,7 +28,7 @@ class ProdukController extends Controller
     {
         $validated = $request->validate([
             'nama' => 'required|string|max:100',
-            'id_kategori' => 'required|exists:users,id',
+            'id_kategori' => 'required|exists:kategoris,id',
             'berat' => 'required|numeric',
             'kadar' => 'required|integer',
             'harga_per_gram' => 'required|numeric',
@@ -127,7 +127,7 @@ class ProdukController extends Controller
             // Update data produk
             $produk->update([
                 'nama' => $validated['nama'],
-                'kategori' => $validated['kategori'],
+                'id_kategori' => $validated['id_kategori'],
                 'berat' => $validated['berat'],
                 'kadar' => $validated['kadar'],
                 'harga_per_gram' => $validated['harga_per_gram'],

app/Models/Kategori.php

@@ -15,7 +15,7 @@ class Kategori extends Model
 
     protected $hidden = ['created_at', 'updated_at', 'deleted_at'];
 
-    public function produks()
+    public function produk()
     {
         return $this->hasMany(Produk::class, 'id_kategori');
     }

database/seeders/DatabaseSeeder.php

@@ -37,7 +37,7 @@ class DatabaseSeeder extends Seeder
             }
         }
 
-        $kategoriList = ['cincin', 'gelang', 'kalung', 'anting'];
+        $kategoriList = ['Cincin', 'Gelang Rantai', 'Gelang Bulat', 'Kalung', 'Liontin', 'Anting', 'Giwang'];
         foreach ($kategoriList as $kategori) {
             Kategori::factory()->create([
                 'nama' => $kategori
@@ -50,7 +50,8 @@ class DatabaseSeeder extends Seeder
             $fotoData = [];
             for ($i = 0; $i < $jumlah_foto; $i++) {
                 $fotoData[] = [
-                    'url' => 'https://random-image-pepebigotes.vercel.app/api/random-image'
+                    // 'url' => 'https://random-image-pepebigotes.vercel.app/api/random-image'
+                    'url' => 'https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/p2/255/2024/12/10/Screenshot_2024-12-10-11-50-18-88_1c337646f29875672b5a61192b9010f9-1-1282380831.jpg'
                 ];
             }
             $produk->foto()->createMany($fotoData);

package.json

@@ -4,16 +4,17 @@
     "type": "module",
     "scripts": {
         "build": "vite build",
-        "dev": "vite"
+        "dev": "concurrently \"php artisan serve\" \"vite\""
     },
     "devDependencies": {
         "@tailwindcss/vite": "^4.0.0",
         "@vitejs/plugin-vue": "^6.0.1",
         "axios": "^1.11.0",
-        "concurrently": "^9.0.1",
+        "concurrently": "^9.2.1",
         "laravel-vite-plugin": "^2.0.0",
         "tailwindcss": "^4.0.0",
-        "vite": "^7.0.4"
+        "vite": "^7.0.4",
+        "vite-plugin-vue-devtools": "^8.0.1"
     },
     "dependencies": {
         "vue": "^3.5.19",

resources/css/app.css

@@ -10,9 +10,16 @@
         'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
-@theme {
+/* @theme {
   --color-A: #F8F0E5;
   --color-B: #EADBC8;
   --color-C: #DAC0A3;
   --color-D: #024768;
+} */
+
+@theme {
+  --color-A: #EBF1F5;
+  --color-B: #AFE5FF;
+  --color-C: #77C7EE;
+  --color-D: #024768;
 }

resources/js/components/ConfirmDeleteModal.vue

@@ -7,11 +7,11 @@
       class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
     >
       <!-- Judul -->
-      <p class="text-lg font-semibold mb-2">Yakin hapus produk ini?</p>
+      <p class="text-lg font-semibold mb-2">{{ props.title }}?</p>
 
       <!-- Deskripsi tambahan -->
       <p class="text-sm text-gray-600 mb-4">
-        Produk yang sudah dihapus tidak akan bisa dikembalikan.
+        {{ props.message }}
       </p>
 
       <!-- Tombol aksi -->
@@ -34,7 +34,9 @@
 </template>
 
 <script setup>
-defineProps({
+const props = defineProps({
   isOpen: Boolean,
+  title:String,
+  message:String
 });
 </script>

resources/js/components/CreateKategori.vue

@@ -0,0 +1,73 @@
+<template>
+    <div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black/75 z-50">
+      <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
+        <!-- Header -->
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-lg font-bold text-gray-800">
+            {{ product ? 'Edit Kategori' : 'Tambah Kategori Baru' }}
+          </h2>
+          <button @click="emit('close')" class="text-gray-400 hover:text-gray-600">✕</button>
+        </div>
+
+        <!-- Form -->
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-gray-700">Nama Kategori</label>
+          <input
+            v-model="form.nama"
+            type="text"
+            placeholder="Masukkan nama kategori"
+            class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-C"
+          />
+        </div>
+
+        <!-- Buttons -->
+        <div class="flex justify-end gap-2">
+          <button
+            @click="emit('close')"
+            class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
+          >
+            Batal
+          </button>
+          <button
+            @click="saveKategori"
+            :disabled="!form.nama"
+            class="px-4 py-2 bg-C text-white rounded hover:bg-B disabled:opacity-50"
+          >
+            Simpan
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref, watch } from 'vue'
+  import axios from 'axios'
+
+  const props = defineProps({
+    isOpen: Boolean,
+    product: Object
+  })
+  const emit = defineEmits(['close'])
+
+  const form = ref({ nama: '' })
+
+  // Sync kalau ubah kategori
+  watch(() => props.product, (val) => {
+    form.value.nama = val ? val.nama : ''
+  }, { immediate: true })
+
+  const saveKategori = async () => {
+    try {
+      if (props.product) {
+        await axios.put(`/api/kategori/${props.product.id}`, form.value)
+      } else {
+        await axios.post('/api/kategori', form.value)
+      }
+      emit('close') // tutup modal
+    } catch (err) {
+      console.error(err)
+      alert('Gagal menyimpan kategori')
+    }
+  }
+  </script>

resources/js/components/CreateSales.vue

@@ -0,0 +1,58 @@
+<template>
+    <div
+      v-if="isOpen"
+      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-full max-w-lg p-6 relative">
+        <h2 class="text-xl font-bold mb-4">Tambah Sales</h2>
+
+        <form @submit.prevent="handleSubmit" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Nama Sales</label>
+            <input v-model="form.nama" type="text" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">No HP</label>
+            <input v-model="form.no_hp" type="text" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Alamat</label>
+            <textarea v-model="form.alamat" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required></textarea>
+          </div>
+
+          <div class="flex justify-end gap-2 mt-6">
+            <button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
+            <button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Simpan</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref } from "vue";
+  import axios from "axios";
+
+  const props = defineProps({
+    isOpen: Boolean,
+  });
+
+  const emit = defineEmits(["close"]);
+
+  const form = ref({
+    nama: "",
+    no_hp: "",
+    alamat: "",
+  });
+
+  const handleSubmit = async () => {
+    try {
+      await axios.post("/api/sales", form.value);
+      emit("close");
+    } catch (error) {
+      console.error("Error creating sales:", error);
+    }
+  };
+  </script>

resources/js/components/EditKategori.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50">
+      <div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">
+
+        <!-- Tombol close -->
+        <button @click="$emit('close')" class="absolute top-3 right-3 text-gray-600 hover:text-black">
+          ✕
+        </button>
+
+        <!-- Judul -->
+        <h2 class="text-xl font-bold text-center text-D mb-4">Edit Kategori</h2>
+
+        <!-- Input Nama Kategori -->
+        <div class="mb-4">
+          <label for="editKategori" class="block text-sm font-medium text-D mb-1">Nama Kategori</label>
+          <input
+            v-model="editNamaKategori"
+            type="text"
+            id="editKategori"
+            placeholder="Masukkan nama kategori"
+            class="w-full p-2 border rounded-md bg-Focus outline-none"
+          />
+        </div>
+
+        <!-- Tombol Aksi -->
+        <div class="flex justify-end gap-3">
+          <button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
+            Batal
+          </button>
+          <button @click="updateKategori" class="px-4 py-2 bg-B text-white rounded-md hover:bg-A">
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref, watch } from "vue";
+
+  const props = defineProps({
+    kategori: { type: Object, required: true },
+  });
+
+  const editNamaKategori = ref("");
+
+  watch(
+    () => props.kategori,
+    (newVal) => {
+      if (newVal) {
+        editNamaKategori.value = newVal.nama;
+      }
+    },
+    { immediate: true }
+  );
+
+  const updateKategori = () => {
+    if (editNamaKategori.value.trim() === "") {
+      alert("Nama kategori tidak boleh kosong!");
+      return;
+    }
+
+    // Emit hasil update ke parent
+    emit("update", { ...props.kategori, nama: editNamaKategori.value });
+  };
+  </script>

resources/js/components/EditSales.vue

@@ -0,0 +1,72 @@
+<template>
+    <div
+      v-if="isOpen"
+      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-full max-w-lg p-6 relative">
+        <h2 class="text-xl font-bold mb-4">Ubah Sales</h2>
+
+        <form @submit.prevent="handleSubmit" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Nama Sales</label>
+            <input v-model="form.nama" type="text" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">No HP</label>
+            <input v-model="form.no_hp" type="text" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Alamat</label>
+            <textarea v-model="form.alamat" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required></textarea>
+          </div>
+
+          <div class="flex justify-end gap-2 mt-6">
+            <button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
+            <button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Update</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </template>
+
+  <script setup>
+  import { ref, watch } from "vue";
+  import axios from "axios";
+
+  const props = defineProps({
+    isOpen: Boolean,
+    sales: Object, // data sales yang akan di-edit
+  });
+
+  const emit = defineEmits(["close"]);
+
+  const form = ref({
+    nama: "",
+    no_hp: "",
+    alamat: "",
+  });
+
+  // isi form dengan data props.sales
+  watch(
+    () => props.sales,
+    (val) => {
+      if (val) {
+        form.value = { ...val };
+      }
+    },
+    { immediate: true }
+  );
+
+  const handleSubmit = async () => {
+    try {
+      await axios.put(`/api/sales/${props.sales.id}`, form.value);
+      alert("Sales berhasil diubah!");
+      emit("close");
+    } catch (error) {
+      console.error("Error updating sales:", error);
+      alert("Gagal mengubah sales");
+    }
+  };
+  </script>

resources/js/components/Footer.vue

@@ -0,0 +1,31 @@
+<template>
+    <footer class="bg-B border-t border-D py-4 px-6 flex flex-col md:flex-row items-center justify-between">
+      <!-- Left: Logo -->
+      <div class="flex items-center gap-2">
+        <img :src="logo" alt="Logo" class="h-10">
+      </div>
+
+      <!-- Center: Copyright -->
+      <div class="text-sm text-[#0f1d4a] font-medium text-center">
+        Abbauf Tech © 2025 Semua hak dilindungi
+      </div>
+
+      <!-- Right: Social Icons -->
+      <div class="flex items-center gap-4 text-[#0f1d4a] mt-2 md:mt-0">
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-facebook"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-twitter"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-instagram"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-youtube"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-vk"></i></a>
+      </div>
+    </footer>
+  </template>
+
+  <script setup>
+  import logo from '@/../images/logo.png'
+  </script>
+
+  <style>
+  /* Pakai Font Awesome untuk ikon */
+  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+  </style>

resources/js/components/Header.vue

@@ -1,70 +0,0 @@
-<script setup>
-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="bg-D h-5 rounded-b-md shadow-lg">
-      <div class="h-15"></div>
-      <div class="w-full px-50 flex justify-between items-center h-5 relative">
-        
-        <!-- Dropdown khusus "Manajemen Produk" -->
-        <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-A cursor-pointer"
-              >
-                <router-link :to="sub.route" class="block w-full h-full">
-                  {{ sub.label }}
-                </router-link>
-              </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>
-  </div>
-</template>

resources/js/components/NavDesktop.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { inject } from "vue";
+
+const {
+  logo,
+  items,
+  openDropdownIndex,
+  toggleDropdown,
+  logout
+} = inject('navigationData');
+</script>
+
+<template>
+  <!-- Desktop Navbar -->
+  <div class="hidden md:block shadow-lg shadow-D rounded-b-md">
+    <div class="bg-D h-5 rounded-b-md shadow-lg"></div>
+    <div class="relative rounded-b-md shadow-lg">
+      <!-- Logo Row -->
+      <div class="flex justify-center items-center">
+        <img :src="logo" alt="Logo" class="h-12 w-auto" />
+      </div>
+
+      <!-- Menu Row -->
+      <div class="px-8 pb-4">
+        <div class="flex justify-around items-center gap-4">
+          <template v-for="(item, index) in items" :key="index">
+
+            <div v-if="item.subItems" class="relative flex-1">
+              <button @click="toggleDropdown(index)"
+                class="w-full text-center text-lg text-D hover:underline cursor-pointer flex items-center justify-center gap-2 transition-colors duration-200 py-2">
+                {{ item.label }}
+                <svg :class="{ 'rotate-180': openDropdownIndex === index }"
+                  class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor"
+                  viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+
+              <div v-if="openDropdownIndex === index"
+                class="absolute mt-2 w-full mx-4 bg-white border rounded-md shadow-lg z-50">
+                <ul>
+                  <li v-for="(sub, subIndex) in item.subItems" :key="subIndex"
+                    class="hover:bg-A transition-colors duration-200">
+                    <router-link :to="sub.route" 
+                      @click="openDropdownIndex = null"
+                      class="block w-full h-full px-4 py-2 text-D">
+                      {{ sub.label }}
+                    </router-link>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <router-link v-else :to="item.route"
+              class="flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2">
+              {{ item.label }}
+            </router-link>
+          </template>
+        </div>
+      </div>
+
+      <div class="absolute top-4 right-8">
+        <button @click="logout"
+          class="text-center font-bold text-lg text-red-400 hover:underline hover:text-red-600 cursor-pointer transition-colors duration-200">
+          Logout
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

resources/js/components/NavMobile.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { inject } from "vue";
+
+// Mengambil data dan fungsi yang disediakan dari komponen induk
+const {
+  logo,
+  items,
+  isMobileMenuOpen,
+  openDropdownIndex,
+  toggleDropdown,
+  toggleMobileMenu,
+  closeMobileMenu,
+  logout
+} = inject('navigationData');
+</script>
+
+<template>
+  <div class="md:hidden">
+    <div class="bg-D h-5 shadow-lg"></div>
+    <div class="px-4 fixed flex items-center mt-2">
+      <button @click="toggleMobileMenu"
+        class="text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-50">
+        <svg :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="w-7 h-7" fill="none"
+          stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+        <svg :class="{ 'block': isMobileMenuOpen, 'hidden': !isMobileMenuOpen }" class="w-6 h-6" fill="none"
+          stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
+      class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">
+      <div class="px-4 py-3 flex justify-between items-center border-b border-B">
+        <img :src="logo" alt="Logo" class="h-8 w-auto" />
+        <button @click="closeMobileMenu" class="text-D hover:text-red-500 transition-colors duration-200">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <nav class="py-4">
+        <template v-for="(item, index) in items" :key="index">
+          <div v-if="item.subItems" class="px-4 py-2">
+            <button @click="toggleDropdown(index)"
+              class="w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200">
+              <span>{{ item.label }}</span>
+              <svg :class="{ 'rotate-180': openDropdownIndex === index }" class="w-4 h-4 transition-transform duration-200"
+                fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+            
+            <transition
+              enter-active-class="transition-all ease-in-out duration-300"
+              enter-from-class="transform opacity-0 max-h-0"
+              enter-to-class="transform opacity-100 max-h-96"
+              leave-active-class="transition-all ease-in-out duration-200"
+              leave-from-class="transform opacity-100 max-h-96"
+              leave-to-class="transform opacity-0 max-h-0"
+            >
+              <div v-if="openDropdownIndex === index" class="mt-2 ml-4 space-y-1 overflow-hidden">
+                <router-link v-for="(sub, subIndex) in item.subItems" :key="subIndex" :to="sub.route"
+                  @click="closeMobileMenu"
+                  class="block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200">
+                  {{ sub.label }}
+                </router-link>
+              </div>
+            </transition>
+            </div>
+
+          <div v-else class="px-4">
+            <router-link :to="item.route" @click="closeMobileMenu"
+              class="block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200">
+              {{ item.label }}
+            </router-link>
+          </div>
+        </template>
+      </nav>
+
+      <div class="absolute bottom-0 w-full px-4 py-3 bg-A border-t border-B">
+        <button @click="logout"
+          class="block w-full text-left px-3 py-2 text-lg font-bold text-red-400 hover:text-white hover:bg-red-400 rounded-md transition-colors duration-200">
+          Logout
+        </button>
+      </div>
+    </div>
+
+    <div v-if="isMobileMenuOpen" @click="closeMobileMenu" class="fixed inset-0 bg-black/75 z-40"></div>
+  </div>
+</template>

resources/js/components/NavigationComponent.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { ref, provide } from "vue";
+import NavDesktop from "./NavDesktop.vue";
+import NavMobile from "./NavMobile.vue";
+import logo from "../../images/logo.png";
+
+const isOpen = ref(false);
+const isMobileMenuOpen = ref(false);
+const openDropdownIndex = ref(null);
+
+const items = [
+  { label: "Manajemen Produk", subItems: [
+    { label: "Brankas", route: "/brankas" },
+    { label: "Nampan", route: "/nampan" },
+    { label: "Produk", route: "/produk" },
+    { label: "Kategori", route: "/kategori" },
+    { label: "Sales", route: "/sales" },
+  ] },
+  { label: "Kasir", route: "/kasir" },
+  { label: "Laporan", route: "/laporan" },
+  { label: "Akun", route: "/akun" },
+];
+
+const toggleDropdown = (index = null) => {
+  if (index !== null) {
+    openDropdownIndex.value = openDropdownIndex.value === index ? null : index;
+  } else {
+    isOpen.value = !isOpen.value;
+  }
+};
+
+const toggleMobileMenu = () => {
+  isMobileMenuOpen.value = !isMobileMenuOpen.value;
+  isOpen.value = false;
+  openDropdownIndex.value = null;
+};
+
+const closeMobileMenu = () => {
+  isMobileMenuOpen.value = false;
+  isOpen.value = false;
+  openDropdownIndex.value = null;
+};
+
+const logout = () => {
+  console.log("Logout clicked");
+  closeMobileMenu();
+};
+
+// Provide shared data to child components
+provide('navigationData', {
+  logo,
+  items,
+  isOpen,
+  isMobileMenuOpen,
+  openDropdownIndex,
+  toggleDropdown,
+  toggleMobileMenu,
+  closeMobileMenu,
+  logout
+});
+</script>
+
+<template>
+  <div class="relative">
+    <!-- Desktop Navigation -->
+    <NavDesktop />
+    
+    <!-- Mobile Navigation -->
+    <NavMobile />
+    
+    <!-- Click Outside Handler for Desktop Dropdown -->
+    <div 
+      v-if="openDropdownIndex !== null && !isMobileMenuOpen"
+      @click="openDropdownIndex = null"
+      class="fixed inset-0 z-10"
+    ></div>
+  </div>
+</template>

resources/js/components/TrayList.vue

@@ -4,7 +4,7 @@
 
     <div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
 
-    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-6">
+    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-30">
       Nampan tidak ditemukan.
     </div>
 

resources/js/layouts/mainLayout.vue

@@ -1,10 +1,14 @@
 <template>
-    <Header />
+  <div class="min-h-screen max-w-screen">
+    <NavigationComponent />
     <div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
       <slot />
     </div>
+    <Footer class="bottom-0 w-full" />
+  </div>
 </template>
 
 <script setup>
-import Header from '../components/Header.vue'
+import Footer from '../components/Footer.vue'
+import NavigationComponent from '../components/NavigationComponent.vue';
 </script>

resources/js/pages/EditProduk.vue

@@ -0,0 +1,266 @@
+<template>
+  <mainLayout>
+    <!-- Modal Buat Item -->
+    <CreateItemModal
+      :isOpen="openItemModal"
+      :product="editedProduct"
+      @close="closeItemModal"
+    />
+
+    <div class="p-6">
+      <p class="font-serif italic text-[25px] text-D">Edit Produk</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.id_kategori" :options="category" placeholder="Pilih kategori" />
+          </div>
+
+          <div class="mb-3 flex flex-row w-full gap-3">
+            <div class="flex-1">
+              <label class="block text-D mb-1">Berat (g)</label>
+              <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat" @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="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>
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import axios from "axios";
+import mainLayout from "../layouts/mainLayout.vue";
+import InputField from "../components/InputField.vue";
+import InputSelect from "../components/InputSelect.vue";
+import CreateItemModal from "../components/CreateItemModal.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+const productId = route.params.id;
+
+const form = ref({
+  nama: "",
+  id_kategori: null,
+  berat: 0,
+  kadar: 0,
+  harga_per_gram: 0,
+  harga_jual: 0,
+});
+
+const category = ref([]);
+const uploadedImages = ref([]);
+const loading = ref(false);
+const uploadLoading = ref(false);
+const uploadError = ref("");
+const isDragging = ref(false);
+const fileInput = ref(null);
+
+const openItemModal = ref(false);
+const editedProduct = ref(null);
+const userId = ref(1); // TODO: ambil dari auth
+
+const isFormValid = computed(() => {
+  return (
+    form.value.nama &&
+    form.value.id_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 loadKategori = async () => {
+  const response = await axios.get("/api/kategori");
+  category.value = response.data.map((c) => ({ value: c.id, label: c.nama }));
+};
+
+const loadProduk = async () => {
+  const response = await axios.get(`/api/produk/${productId}`);
+  const produk = response.data;
+  form.value = {
+    nama: produk.nama,
+    id_kategori: produk.id_kategori,
+    berat: produk.berat,
+    kadar: produk.kadar,
+    harga_per_gram: produk.harga_per_gram,
+    harga_jual: produk.harga_jual,
+  };
+  uploadedImages.value = produk.foto || [];
+};
+
+const triggerFileInput = () => {
+  if (!uploadLoading.value && uploadedImages.value.length < 6) {
+    fileInput.value?.click();
+  }
+};
+
+const handleFileSelect = (e) => {
+  const files = Array.from(e.target.files);
+  uploadFiles(files);
+};
+
+const handleDrop = (e) => {
+  e.preventDefault();
+  isDragging.value = false;
+  if (uploadLoading.value || uploadedImages.value.length >= 6) return;
+  const files = Array.from(e.dataTransfer.files);
+  uploadFiles(files);
+};
+
+const uploadFiles = async (files) => {
+  uploadError.value = "";
+  const validFiles = files.filter(
+    (file) =>
+      ["image/jpeg", "image/jpg", "image/png"].includes(file.type) &&
+      file.size <= 2 * 1024 * 1024
+  );
+  if (!validFiles.length) 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 res = await axios.post("/api/foto/upload", formData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+      uploadedImages.value.push(res.data);
+    }
+  } finally {
+    uploadLoading.value = false;
+  }
+};
+
+const removeImage = async (id) => {
+  try {
+    await axios.delete(`/api/foto/hapus/${id}`);
+    uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
+  } catch {
+    uploadError.value = "Gagal menghapus foto";
+  }
+};
+
+const submitForm = async () => {
+  loading.value = true;
+  try {
+    await axios.put(`/api/produk/${productId}`, {
+      ...form.value,
+      id_user: userId.value,
+    });
+    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;
+};
+
+const back = () => {
+  router.push("/produk");
+};
+
+onMounted(() => {
+  loadKategori();
+  loadProduk();
+});
+</script>

resources/js/pages/InputProduk.vue

@@ -20,7 +20,7 @@
 
           <div class="mb-3">
             <label class="block text-D mb-1">Kategori</label>
-            <InputSelect v-model="form.kategori" :options="category" placeholder="Pilih kategori" />
+            <InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
           </div>
 
           <div class="mb-3 flex flex-row w-full gap-3">
@@ -69,20 +69,20 @@
             <!-- 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="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-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-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-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2">
+                <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"
@@ -135,19 +135,28 @@ const router = useRouter();
 
 const form = ref({
   nama: '',
-  kategori: '',
+  id_kategori: null,
   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 category = ref([]);
+
+const loadKategori = async () => {
+  try {
+    const response = await axios.get('/api/kategori');
+    if (response.data && Array.isArray(response.data)) {
+      category.value = response.data.map(cat => ({
+        value: cat.id,
+        label: cat.nama
+      }));
+    }
+  } catch (error) {
+    console.error('Error loading categories:', error);
+  }
+};
 
 const loading = ref(false);
 const uploadLoading = ref(false);
@@ -163,7 +172,7 @@ const createdProduct = ref(null);
 
 const isFormValid = computed(() => {
   return form.value.nama &&
-    form.value.kategori &&
+    form.value.id_kategori &&
     form.value.berat > 0 &&
     form.value.kadar > 0 &&
     form.value.harga_per_gram > 0 &&
@@ -311,7 +320,7 @@ const submitForm = async (addItem) => {
     // Reset form
     form.value = {
       nama: '',
-      kategori: '',
+      id_kategori: '',
       berat: 0,
       kadar: 0,
       harga_per_gram: 0,
@@ -347,7 +356,7 @@ const submitForm = async (addItem) => {
 const resetForm = async () => {
   form.value = {
     nama: '',
-    kategori: '',
+    id_kategori: '',
     berat: 0,
     kadar: 0,
     harga_per_gram: 0,
@@ -372,5 +381,6 @@ const back = () => {
 
 onMounted(() => {
   loadExistingPhotos();
+  loadKategori();
 });
 </script>

resources/js/pages/Kategori.vue

@@ -0,0 +1,161 @@
+<template>
+	<mainLayout>
+		<CreateKategori :isOpen="creatingKategori" :product="detail" @close="closeKategori" />
+
+		<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
+			message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
+		<div class="p-6">
+			<!-- Header Section -->
+			<div class="flex justify-between items-center mb-6">
+				<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
+				<button @click="tambahKategori"
+					class="px-4 py-2 bg-C text-black rounded-md hover:bg-B transition duration-200 flex items-center gap-2">
+					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+					</svg>
+					Tambah Kategori
+				</button>
+			</div>
+
+			<!-- Table Section -->
+			<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
+				<table class="w-full">
+					<thead>
+						<tr class="bg-C text-black">
+							<th class="px-6 py-4 text-left font-semibold border-r border-C">
+								No
+							</th>
+							<th class="px-6 py-4 text-left font-semibold border-r border-C">
+								Nama Kategori
+							</th>
+							<th class="px-6 py-4 text-center font-semibold">
+								Aksi
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="(item, index) in kategori" :key="item.id"
+							class="border-b border-gray-200 hover:bg-A transition duration-150"
+							:class="{ 'bg-gray-50': index % 2 === 1 }">
+							<td class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900">
+								{{ index + 1 }}
+							</td>
+							<td class="px-6 py-4 border-r border-gray-200 text-gray-800">
+								{{ item.nama }}
+							</td>
+							<td class="px-6 py-4 text-center">
+								<div class="flex justify-center gap-2">
+									<button @click="ubahKategori(item)"
+										class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
+										Ubah
+									</button>
+									<button @click="hapusKategori(item)"
+										class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
+										Hapus
+									</button>
+								</div>
+							</td>
+						</tr>
+
+						<!-- Empty State -->
+						<tr v-if="kategori.length === 0 && !loading">
+							<td colspan="3" class="px-6 py-8 text-center text-gray-500">
+								<div class="flex flex-col items-center">
+									<svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+											d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
+									</svg>
+									<p>Tidak ada data kategori</p>
+								</div>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<!-- Loading State -->
+			<div v-if="loading" class="flex justify-center items-center h-screen">
+				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
+				<span class="ml-2 text-gray-600">Memuat data...</span>
+			</div>
+		</div>
+	</mainLayout>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import mainLayout from "../layouts/mainLayout.vue";
+import CreateKategori from "../components/CreateKategori.vue";
+import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
+
+// Reactive data
+const kategori = ref([]);
+const loading = ref(false);
+const creatingKategori = ref(false);
+const detail = ref(null);
+const confirmDeleteOpen = ref(false);
+const kategoriToDelete = ref(null);
+
+// Fetch data kategori dari API
+const fetchKategoris = async () => {
+	loading.value = true;
+	try {
+		const response = await axios.get("/api/kategori");
+		kategori.value = response.data;
+		console.log("Data kategori:", response.data);
+	} catch (error) {
+		console.error("Error fetching kategori:", error);
+	} finally {
+		loading.value = false;
+	}
+};
+
+// Tambah kategori - open modal
+const tambahKategori = () => {
+	detail.value = null; // Reset detail untuk mode create
+	creatingKategori.value = true;
+};
+
+// Close modal
+const closeKategori = () => {
+	creatingKategori.value = false;
+	fetchKategoris(); // Refresh data setelah modal ditutup
+};
+
+// Ubah kategori
+const ubahKategori = (item) => {
+	detail.value = item; // Set detail untuk mode edit
+	creatingKategori.value = true;
+};
+
+// Hapus kategori
+const hapusKategori = (item) => {
+	kategoriToDelete.value = item;
+	confirmDeleteOpen.value = true;
+};
+
+// 🔵 Ditambahkan: aksi konfirmasi hapus
+const confirmDelete = async () => {
+	try {
+		await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
+		console.log("Kategori berhasil dihapus");
+		fetchKategoris();
+	} catch (error) {
+		console.error("Error deleting kategori:", error);
+	} finally {
+		closeDeleteModal();
+	}
+};
+
+// 🔵 Ditambahkan: tutup modal hapus
+const closeDeleteModal = () => {
+	confirmDeleteOpen.value = false;
+	kategoriToDelete.value = null;
+};
+
+// Lifecycle
+onMounted(() => {
+	fetchKategoris();
+});
+</script>

resources/js/pages/Produk.vue

@@ -12,6 +12,8 @@
       :isOpen="deleting"
       @cancel="deleting = false"
       @confirm="deleteProduk"
+      title="Hapus Produk"
+      message="Apakah Anda yakin ingin menghapus produk ini?"
     />
 
     <div class="p-6">
@@ -21,16 +23,7 @@
       <!-- Filter -->
       <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>
+        <InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
 
         <!-- Search -->
         <searchbar v-model:search="searchQuery" class="flex-1" />
@@ -60,7 +53,7 @@
     <!-- Overlay Detail Produk -->
     <div
       v-if="showOverlay"
-      class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
+      class="fixed inset-0 bg-black/30 flex justify-center items-center"
       @click.self="closeOverlay"
     >
       <div
@@ -130,10 +123,12 @@
         <!-- 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"
@@ -160,10 +155,11 @@ import ProductCard from "../components/ProductCard.vue";
 import searchbar from "../components/searchbar.vue";
 import CreateItemModal from "../components/CreateItemModal.vue";
 import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
+import InputSelect from "../components/InputSelect.vue";
 
 const products = ref([]);
 const searchQuery = ref("");
-const selectedCategory = ref("semua");
+const selectedCategory = ref(0);
 const creatingItem = ref(false);
 const deleting = ref(false);
 
@@ -171,6 +167,36 @@ const detail = ref({});
 const showOverlay = ref(false);
 const currentFotoIndex = ref(0);
 
+const kategori = ref([]);
+
+const loadKategori = async () => {
+  try {
+    const response = await axios.get('/api/kategori');
+    if (response.data && Array.isArray(response.data)) {
+      kategori.value = [
+        { value: 0, label: "Semua" },
+        ...response.data.map(cat => ({
+          value: cat.id,
+          label: cat.nama
+        }))
+      ];
+    }
+  } catch (error) {
+    console.error('Error loading categories:', error);
+  }
+};
+
+const loadProduk = async () => {
+  try {
+    const response = await axios.get('/api/produk');
+    if (response.data && Array.isArray(response.data)) {
+      products.value = response.data;
+    }
+  } catch (error) {
+    console.error('Error loading products:', error);
+  }
+};
+
 // Buka modal item
 const openItemModal = () => {
   creatingItem.value = true;
@@ -181,21 +207,17 @@ const closeItemModal = () => {
 
 // Fetch data awal
 onMounted(async () => {
-  try {
-    const res = await axios.get("/api/produk");
-    products.value = res.data;
-  } catch (error) {
-    console.error("Gagal ambil data produk:", error);
-  }
+  loadKategori()
+  loadProduk();
 });
 
 // Filter produk (kategori + search)
 const filteredProducts = computed(() => {
   let hasil = products.value;
 
-  if (selectedCategory.value !== "semua") {
+  if (selectedCategory.value != 0) {
     hasil = hasil.filter(
-      (p) => p.kategori.toLowerCase() === selectedCategory.value
+      (p) => p.id_kategori == selectedCategory.value
     );
   }
 

resources/js/pages/Sales.vue

@@ -0,0 +1,241 @@
+<template>
+    <mainLayout>
+        <!-- Modal Create/Edit Sales -->
+        <CreateSales
+            v-if="creatingSales"
+            :isOpen="creatingSales"
+            :sales="detail"
+            @close="closeSales"
+        />
+
+        <EditSales
+            v-if="editingSales"
+            :isOpen="editingSales"
+            :sales="detail"
+            @close="closeSales"
+        />
+
+        <!-- Modal Delete -->
+        <ConfirmDeleteModal
+            :isOpen="confirmDeleteOpen"
+            title="Hapus Sales"
+            message="Apakah Anda yakin ingin menghapus sales ini?"
+            @confirm="confirmDelete"
+            @close="closeDeleteModal"
+        />
+
+        <div class="p-6">
+            <!-- Header Section -->
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-bold text-gray-800">Sales</h1>
+                <button
+                    @click="tambahSales"
+                    class="px-4 py-2 bg-[#c6a77d] text-white rounded-md hover:bg-[#b09065] transition duration-200 flex items-center gap-2"
+                >
+                    <svg
+                        class="w-4 h-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 4v16m8-8H4"
+                        />
+                    </svg>
+                    Tambah Sales
+                </button>
+            </div>
+
+            <!-- Table Section -->
+            <div
+                class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
+            >
+                <table class="w-full">
+                    <thead>
+                        <tr class="bg-[#c6a77d] text-white">
+                            <th
+                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                            >
+                                No
+                            </th>
+                            <th
+                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                            >
+                                Nama Sales
+                            </th>
+                            <th
+                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                            >
+                                No HP
+                            </th>
+                            <th
+                                class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
+                            >
+                                Alamat
+                            </th>
+                            <th class="px-6 py-4 text-center font-semibold">
+                                Aksi
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for="(item, index) in sales"
+                            :key="item.id"
+                            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-gray-200 font-medium text-gray-900"
+                            >
+                                {{ index + 1 }}
+                            </td>
+                            <td
+                                class="px-6 py-4 border-r border-gray-200 text-gray-800"
+                            >
+                                {{ item.nama }}
+                            </td>
+                            <td
+                                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-gray-200 text-gray-800"
+                            >
+                                {{ item.alamat }}
+                            </td>
+                            <td class="px-6 py-4 text-center">
+                                <div class="flex justify-center gap-2">
+                                    <button
+                                        @click="ubahSales(item)"
+                                        class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
+                                    >
+                                        Ubah
+                                    </button>
+                                    <button
+                                        @click="hapusSales(item)"
+                                        class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
+                                    >
+                                        Hapus
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+
+                        <!-- Empty State -->
+                        <tr v-if="sales.length === 0 && !loading">
+                            <td
+                                colspan="5"
+                                class="px-6 py-8 text-center text-gray-500"
+                            >
+                                <div class="flex flex-col items-center">
+                                    <svg
+                                        class="w-12 h-12 text-gray-400 mb-2"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
+                                        />
+                                    </svg>
+                                    <p>Tidak ada data sales</p>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Loading State -->
+            <div v-if="loading" class="flex justify-center items-center py-8">
+                <div
+                    class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"
+                ></div>
+                <span class="ml-2 text-gray-600">Memuat data...</span>
+            </div>
+        </div>
+    </mainLayout>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import mainLayout from "../layouts/mainLayout.vue";
+import CreateSales from "../components/CreateSales.vue";
+import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
+import EditSales from "../components/EditSales.vue";
+
+// State
+const sales = ref([]);
+const loading = ref(false);
+const creatingSales = ref(false);
+const detail = ref(null);
+
+const confirmDeleteOpen = ref(false);
+const salesToDelete = ref(null);
+
+// Fetch data dari API
+const fetchSales = async () => {
+    loading.value = true;
+    try {
+        const response = await axios.get("/api/sales");
+        sales.value = response.data;
+    } catch (error) {
+        console.error("Error fetching sales:", error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Tambah
+const tambahSales = () => {
+    detail.value = null;
+    creatingSales.value = true;
+};
+
+// Ubah
+const ubahSales = (item) => {
+    detail.value = item;
+    creatingSales.value = true;
+};
+
+// Hapus
+const hapusSales = (item) => {
+    salesToDelete.value = item;
+    confirmDeleteOpen.value = true;
+};
+
+const confirmDelete = async () => {
+    try {
+        await axios.delete(`/api/sales/${salesToDelete.value.id}`);
+        fetchSales();
+        confirmDeleteOpen.value = false;
+    } catch (error) {
+        console.error("Error deleting sales:", error);
+    }
+};
+
+const closeDeleteModal = () => {
+    confirmDeleteOpen.value = false;
+    salesToDelete.value = null;
+};
+
+// Tutup modal Create/Edit
+const closeSales = () => {
+    creatingSales.value = false;
+    fetchSales();
+};
+
+// Lifecycle
+onMounted(() => {
+    fetchSales();
+});
+</script>

resources/js/pages/Tray.vue

@@ -20,8 +20,7 @@
     <!-- 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;">
+      class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
       Tambah Nampan
     </button>
 

resources/js/router/index.js

@@ -5,6 +5,9 @@ import Brankas from '../pages/Brankas.vue'
 import Tray from '../pages/Tray.vue'
 import Kasir from '../pages/Kasir.vue'
 import InputProduk from '../pages/InputProduk.vue'
+import Kategori from '../pages/Kategori.vue'
+import Sales from '../pages/Sales.vue'
+import EditProduk from '../pages/EditProduk.vue'
 
 
 const routes = [
@@ -38,6 +41,22 @@ const routes = [
     name: 'Kasir',
     component: Kasir
   },
+  {
+    path: '/kategori',
+    name: 'Kategori',
+    component: Kategori
+  },
+  {
+    path: '/sales',
+    name: 'Sales',
+    component: Sales
+  },
+  {
+    path: '/produk/:id/edit',   // :id = parameter dinamis
+    name: 'EditProduk',
+    component: EditProduk,
+    props: true                 // biar id bisa langsung jadi props di komponen
+  }
 ]
 
 

resources/views/app.blade.php

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable-no" />
         <title>Abbauf App</title>
     </head>
     <body>

routes/web.php

@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\FotoSementaraController;
 use App\Http\Controllers\ItemController;
+use App\Http\Controllers\KategoriController;
 use App\Http\Controllers\NampanController;
 use App\Http\Controllers\ProdukController;
 use App\Http\Controllers\SalesController;
@@ -17,6 +18,7 @@ Route::prefix('api')->group(function () {
     Route::apiResource('sales', SalesController::class);
     Route::apiResource('user', UserController::class);
     Route::apiResource('transaksi', TransaksiController::class);
+    Route::apiResource('kategori', KategoriController::class);
     
     Route::get('brankas', [ItemController::class, 'brankasItem']);
     Route::delete('kosongkan-nampan', [NampanController::class, 'kosongkan']);

vite.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 export default defineConfig({
     plugins: [
@@ -10,7 +11,8 @@ export default defineConfig({
             refresh: true,
         }),
         tailwindcss(),
-        vue()
+        vue(),
+        vueDevTools(),
     ],
     resolve: {
         alias: {