diff --git a/app/Http/Controllers/NampanController.php b/app/Http/Controllers/NampanController.php
index 7bf5049..f1e251f 100644
--- a/app/Http/Controllers/NampanController.php
+++ b/app/Http/Controllers/NampanController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Models\Nampan;
+use App\Models\Item;
 use Illuminate\Http\Request;
 
 class NampanController extends Controller
@@ -85,4 +86,14 @@ class NampanController extends Controller
             'message' => 'Nampan berhasil dihapus'
         ], 204);
     }
+
+    public function kosongkan()
+    {
+        Item::query()->update(['id_nampan' => null]);
+
+        return response()->json([
+            'message' => 'Semua nampan berhasil dikosongkan'
+        ], 200);
+    }
+
 }
diff --git a/app/Http/Controllers/ProdukController.php b/app/Http/Controllers/ProdukController.php
index d91f2a8..7100b10 100644
--- a/app/Http/Controllers/ProdukController.php
+++ b/app/Http/Controllers/ProdukController.php
@@ -34,7 +34,7 @@ class ProdukController extends Controller
             'harga_per_gram' => 'required|numeric',
             'harga_jual' => 'required|numeric',
             'id_user' => 'nullable|exists:users,id',
-        ], 
+        ],
         [
             'nama.required' => 'Nama produk harus diisi.',
             'id_kategori' => 'Kategori tidak valid.',
@@ -59,13 +59,13 @@ class ProdukController extends Controller
             // Pindahkan foto sementara ke foto permanen jika ada
             if (isset($validated['id_user'])) {
                 $fotoSementara = FotoSementara::where('id_user', $validated['id_user'])->get();
-                
+
                 foreach ($fotoSementara as $fs) {
                     Foto::create([
                         'id_produk' => $produk->id,
                         'url' => $fs->url
                     ]);
-                    
+
                     // Hapus foto sementara setelah dipindah
                     $fs->delete();
                 }
@@ -110,7 +110,7 @@ class ProdukController extends Controller
             'harga_jual' => 'required|numeric',
             'id_user' => 'nullable|exists:users,id', // untuk mengambil foto sementara baru
             'hapus_foto_lama' => 'nullable|boolean', // flag untuk menghapus foto lama
-        ], 
+        ],
         [
             'nama.required' => 'Nama produk harus diisi.',
             'id_kategori' => 'Kategori tidak valid.',
@@ -123,11 +123,11 @@ class ProdukController extends Controller
         DB::beginTransaction();
         try {
             $produk = Produk::findOrFail($id);
-            
+
             // 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'],
@@ -149,13 +149,13 @@ class ProdukController extends Controller
             // Tambahkan foto baru dari foto sementara jika ada
             if (isset($validated['id_user'])) {
                 $fotoSementara = FotoSementara::where('id_user', $validated['id_user'])->get();
-                
+
                 foreach ($fotoSementara as $fs) {
                     Foto::create([
                         'id_produk' => $produk->id,
                         'url' => $fs->url
                     ]);
-                    
+
                     // Hapus foto sementara setelah dipindah
                     $fs->delete();
                 }
diff --git a/resources/js/components/CreateItemModal.vue b/resources/js/components/CreateItemModal.vue
index f2b2983..ee35328 100644
--- a/resources/js/components/CreateItemModal.vue
+++ b/resources/js/components/CreateItemModal.vue
@@ -102,7 +102,7 @@ const createdItem = ref(null);
 // Computed
 const selectedNampanName = computed(() => {
   if (!selectedNampan.value) return 'Brankas';
-  
+
   console.log("Selected nampan ID:", selectedNampan.value);
   const nampan = nampanList.value.find(n => n.id === Number(selectedNampan.value));
   console.log("All nampan:", nampanList.value);
@@ -147,7 +147,7 @@ const createItem = async () => {
     success.value = true;
     createdItem.value = response.data.data
     console.log('Item created:', createdItem);
-    
+
   } catch (error) {
     console.error('Error creating item:', error);
     alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
diff --git a/resources/js/components/CreateSales.vue b/resources/js/components/CreateSales.vue
new file mode 100644
index 0000000..d60ba81
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/EditSales.vue b/resources/js/components/EditSales.vue
new file mode 100644
index 0000000..f1c7a8b
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index 5126730..df7eca6 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -9,44 +9,27 @@
     </div>
 
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-      <div
-        v-for="tray in filteredTrays"
-        :key="tray.id"
-        class="border rounded-lg p-4 shadow-sm hover:shadow-md transition"
-      >
+      <div v-for="tray in filteredTrays" :key="tray.id"
+        class="border rounded-lg p-4 shadow-sm hover:shadow-md transition">
         <div class="flex justify-between items-center mb-3">
           <h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
           <div class="flex gap-2">
-            <button
-              class="p-2 rounded bg-yellow-400 hover:bg-yellow-500"
-              @click="emit('edit', tray)"
-            >
+            <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 class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">
               🗑️
             </button>
           </div>
         </div>
 
         <div v-if="tray.items && tray.items.length > 0" class="space-y-2 max-h-64 overflow-y-auto pr-2">
-          <div
-  v-for="item in tray.items"
-  :key="item.id"
-  class="flex justify-between items-center border rounded-lg p-2"
-  @click="openMovePopup(item)"
->
+          <div v-for="item in tray.items" :key="item.id" class="flex justify-between items-center border rounded-lg p-2"
+            @click="openMovePopup(item)">
 
             <div class="flex items-center gap-3">
-              <img
-                v-if="item.produk.foto && item.produk.foto.length > 0"
-                :src="item.produk.foto[0].url"
-                alt="foto produk"
-                class="w-12 h-12 object-cover rounded"
-              />
+              <img v-if="item.produk.foto && item.produk.foto.length > 0" :src="item.produk.foto[0].url"
+                alt="foto produk" class="w-12 h-12 object-cover rounded" />
               <div>
                 <p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
                 <p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p>
@@ -88,11 +71,8 @@
       </div>
       <div class="mb-4">
         <label for="tray-select" class="block text-sm font-medium text-gray-700 mb-1">Nama Nampan</label>
-        <select
-          id="tray-select"
-          v-model="selectedTrayId"
-          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        >
+        <select id="tray-select" v-model="selectedTrayId"
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
           <option value="" disabled>Pilih Nampan</option>
           <option v-for="tray in availableTrays" :key="tray.id" :value="tray.id">
             {{ tray.nama }}
@@ -100,18 +80,12 @@
         </select>
       </div>
       <div class="flex justify-end gap-2">
-        <button
-          @click="closePopup"
-          class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition"
-        >
+        <button @click="closePopup"
+          class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition">
           Batal
         </button>
-        <button
-          @click="saveMove"
-          :disabled="!selectedTrayId"
-          class="px-4 py-2 rounded text-white transition"
-          :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
-        >
+        <button @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded text-white transition"
+          :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'">
           Simpan
         </button>
       </div>
diff --git a/resources/js/pages/EditProduk.vue b/resources/js/pages/EditProduk.vue
new file mode 100644
index 0000000..9a1be17
--- /dev/null
+++ b/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>
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index a04daa8..0a9400e 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -123,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>
+
           <button
             @click="openItemModal"
             class="bg-green-400 text-black px-4 py-2 rounded font-bold"
diff --git a/resources/js/pages/Sales.vue b/resources/js/pages/Sales.vue
new file mode 100644
index 0000000..f2bebae
--- /dev/null
+++ b/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>
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index 08d7729..360b29a 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -150,7 +150,7 @@ const closeConfirmModal = () => { showConfirmModal.value = false }
 
 const confirmEmptyTray = async () => {
   try {
-    await axios.post("/api/brankas", { action: "move_all_from_tray" })
+    await axios.delete("/api/kosongkan-nampan",)
     alert("Semua item berhasil dipindahkan ke Brankas")
     closeConfirmModal()
     location.reload()
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 5e22da1..390618f 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -6,6 +6,8 @@ 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 = [
@@ -44,6 +46,17 @@ const routes = [
     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
+  }
 ]
 
 
diff --git a/routes/web.php b/routes/web.php
index e4d9f5a..59fe37f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -21,6 +21,7 @@ Route::prefix('api')->group(function () {
     Route::apiResource('kategori', KategoriController::class);
     
     Route::get('brankas', [ItemController::class, 'brankasItem']);
+    Route::delete('kosongkan-nampan', [NampanController::class, 'kosongkan']);
     
     // Foto Sementara
     Route::post('foto/upload', [FotoSementaraController::class, 'upload']);