diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..b7edfb1
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,65 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+# APP_MAINTENANCE_STORE=database
+
+PHP_CLI_SERVER_WORKERS=4
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+# DB_HOST=127.0.0.1
+# DB_PORT=3306
+# DB_DATABASE=laravel
+# DB_USERNAME=root
+# DB_PASSWORD=
+
+SESSION_DRIVER=database
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=database
+
+CACHE_STORE=database
+# CACHE_PREFIX=
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_CLIENT=phpredis
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=log
+MAIL_SCHEME=null
+MAIL_HOST=127.0.0.1
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+VITE_APP_NAME="${APP_NAME}"
\ No newline at end of file
diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php
index 652d867..399e5e0 100644
--- a/app/Http/Controllers/ItemController.php
+++ b/app/Http/Controllers/ItemController.php
@@ -23,11 +23,10 @@ class ItemController extends Controller
     public function store(Request $request)
     {
         $validated = $request->validate([
-            'id_produk' => 'required|in:produks.id',
-            'id_nampan' => 'nullable|in:nampans.id'
+            'id_produk' => 'required',
+            'id_nampan' => 'nullable'
         ],[
             'id_produk' => 'Id produk tidak valid.',
-            'id_nampan' => 'Id nampan tidak valid'
         ]);
 
         $item = Item::create($validated);
diff --git a/resources/css/app.css b/resources/css/app.css
index 56784c1..513731f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -5,12 +5,6 @@
 @source '../**/*.blade.php';
 @source '../**/*.js';
 
-@import url('https://fonts.googleapis.com/css2?family=Platypi:wght@400;500;600;700&display=swap');
-
-html, body {
-  font-family: "Platypi", sans-serif;
-}
-
 @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji';
@@ -20,5 +14,5 @@ html, body {
   --color-A: #F8F0E5;
   --color-B: #EADBC8;
   --color-C: #DAC0A3;
-  --color-D: #0F2C59;
+  --color-D: #024768;
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 2631a6c..2271c86 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div>
     <router-view />
   </div>
 </template>
\ No newline at end of file
diff --git a/resources/js/components/CreateItemModal.vue b/resources/js/components/CreateItemModal.vue
new file mode 100644
index 0000000..f2b2983
--- /dev/null
+++ b/resources/js/components/CreateItemModal.vue
@@ -0,0 +1,187 @@
+<template>
+  <Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
+    <div class="p-6">
+      <h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
+
+      <div v-if="!success">
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2">Pilih Nampan</label>
+          <InputSelect v-model="selectedNampan" :options="positionListOptions" :disabled="loading" />
+        </div>
+
+        <div class="flex justify-end gap-3">
+          <button @click="handleClose" :disabled="loading"
+            class="px-4 py-2 text-white bg-gray-400 hover:bg-gray-500 rounded-lg transition-colors disabled:opacity-50">
+            Batal
+          </button>
+          <button @click="createItem" :disabled="loading"
+            class="px-4 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors disabled:bg-A disabled:cursor-not-allowed flex items-center gap-2">
+            <svg v-if="loading" class="animate-spin w-4 h-4" 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>
+            {{ loading ? 'Membuat...' : 'Buat Item' }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Success State -->
+      <div v-else>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
+              </path>
+            </svg>
+          </div>
+
+          <h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
+          <p class="text-gray-600 mb-2">
+            Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{
+              selectedNampanName }}.
+          </p>
+          <p class="text-sm text-gray-500 mb-6">
+            ID Item: <strong>{{ createdItem.id }}</strong>
+          </p>
+
+          <div class="flex flex-row justify-between gap-3">
+            <button @click="handleClose"
+              class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors">
+              Selesai
+            </button>
+            <button @click="printItem"
+              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
+              disabled>
+              Print
+            </button>
+            <button @click="addNewItem"
+              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
+              Buat Lagi
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import axios from 'axios';
+import Modal from './Modal.vue';
+import InputSelect from './InputSelect.vue';
+
+// Props
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  product: {
+    type: Object,
+    default: null
+  }
+});
+
+// Emits
+const emit = defineEmits(['close']);
+
+// State
+const selectedNampan = ref('');
+const nampanList = ref([]);
+const positionListOptions = ref([
+  { value: '', label: 'Brankas', selected: true },
+])
+const success = ref(false);
+const loading = ref(false);
+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);
+  console.log("Selected nampan:", nampan);
+  return nampan ? nampan.nama : 'Brankas';
+});
+
+// Methods
+const loadNampanList = async () => {
+  try {
+    const response = await axios.get('/api/nampan');
+    nampanList.value = response.data;
+    positionListOptions.value = [
+      { value: '', label: 'Brankas', selected: !selectedNampan.value },
+      ...nampanList.value.map(n => ({
+        value: n.id,
+        label: `${n.nama} (${n.items_count} items)`,
+        selected: n.id === selectedNampan.value
+      }))
+    ];
+  } catch (error) {
+    console.error('Error loading nampan list:', error);
+  }
+};
+
+const createItem = async () => {
+  if (!props.product) return;
+
+  loading.value = true;
+
+  try {
+    const payload = {
+      id_produk: props.product.id
+    };
+
+    if (selectedNampan.value) {
+      payload.id_nampan = selectedNampan.value;
+    }
+
+    const response = await axios.post('/api/item', payload);
+
+    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));
+  } finally {
+    loading.value = false;
+  }
+};
+
+const addNewItem = () => {
+  success.value = false;
+  selectedNampan.value = '';
+};
+
+const printItem = () => {
+  alert('Wak waw');
+};
+
+const handleClose = () => {
+  // Reset state
+  selectedNampan.value = '';
+  success.value = false;
+  loading.value = false;
+
+  emit('close');
+};
+
+// Watchers
+watch(() => props.isOpen, (newValue) => {
+  if (newValue) {
+    selectedNampan.value = '';
+    success.value = false;
+    loading.value = false;
+
+    loadNampanList();
+  }
+});
+</script>
\ No newline at end of file
diff --git a/resources/js/components/DropdownNav.vue b/resources/js/components/DropdownNav.vue
deleted file mode 100644
index 629ff4a..0000000
--- a/resources/js/components/DropdownNav.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div class="relative inline-block text-left">
-    <!-- Tombol Dropdown -->
-    <button 
-      @click="isOpen = !isOpen"
-      class="px-4 py-2 bg-white border rounded-md shadow-sm hover:bg-gray-100"
-    >
-      Manajemen Produk
-    </button>
-
-    <!-- Isi Dropdown -->
-    <div
-      v-if="isOpen"
-      class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
-    >
-      <ul>
-        <li
-          v-for="(item, index) in items"
-          :key="index"
-          @click="goTo(item.route)"
-          class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
-        >
-          {{ item.label }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-
-const isOpen = ref(false);
-const router = useRouter();
-
-const items = [
-  { label: "Brankas", route: "/brankas" },
-  { label: "Nampan", route: "/nampan" },
-  { label: "Produk", route: "/produk" },
-  { label: "Sales", route: "/sales" },
-];
-
-const goTo = (route) => {
-  isOpen.value = false;
-  router.push(route);
-};
-</script>
diff --git a/resources/js/components/Header.vue b/resources/js/components/Header.vue
index 174bc14..d8b59ae 100644
--- a/resources/js/components/Header.vue
+++ b/resources/js/components/Header.vue
@@ -45,7 +45,7 @@ const toggleDropdown = () => {
               <li
                 v-for="(sub, index) in subItems"
                 :key="index"
-                class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
+                class="px-4 py-2 hover:bg-A cursor-pointer"
               >
                 <router-link :to="sub.route" class="block w-full h-full">
                   {{ sub.label }}
diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
new file mode 100644
index 0000000..97aefbe
--- /dev/null
+++ b/resources/js/components/KasirForm.vue
@@ -0,0 +1,93 @@
+<template>
+    <div>
+      <!-- Input Grid -->
+      <div class="grid grid-cols-2 gap-4 mb-4">
+        <div class="flex flex-col gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Kode Item *</label>
+            <InputField
+              v-model="kodeItem"
+              type="text"
+              placeholder="Masukkan kode item"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Harga Jual</label>
+            <InputField
+              v-model="hargaJual"
+              type="number"
+            />
+          </div>
+        </div>
+        <div class="flex items-center justify-center">
+          <div class="text-center">
+            <span class="block text-gray-600 font-medium">Total:</span>
+            <span class="text-3xl font-bold text-[#0f1d4a]">
+              Rp{{ total.toLocaleString() }},-
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Buttons -->
+      <div class="flex gap-4 mb-6">
+        <button @click="tambahItem"
+          class="px-4 py-2 rounded-md bg-[#f1ede8] text-[#0f1d4a] font-medium hover:bg-[#e4dfd8] transition">
+          Tambah Item
+        </button>
+        <button
+          class="px-6 py-2 rounded-md bg-[#c6a77d] text-[#0f1d4a] font-semibold hover:bg-[#b09065] transition">
+          Lanjut
+        </button>
+      </div>
+
+      <!-- Table -->
+      <table class="w-full border-collapse border border-gray-200 text-sm rounded-lg overflow-hidden">
+        <thead class="bg-gray-100 text-[#0f1d4a]">
+          <tr>
+            <th class="border border-gray-200 p-2">No</th>
+            <th class="border border-gray-200 p-2">Item</th>
+            <th class="border border-gray-200 p-2">Jml</th>
+            <th class="border border-gray-200 p-2">Harga</th>
+            <th class="border border-gray-200 p-2">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50">
+            <td class="border border-gray-200 p-2 text-center">{{ index + 1 }}</td>
+            <td class="border border-gray-200 p-2">{{ item.kode }}</td>
+            <td class="border border-gray-200 p-2 text-center">{{ item.jumlah }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ item.harga.toLocaleString() }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ (item.harga * item.jumlah).toLocaleString() }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </template>
+
+
+
+
+  <script setup>
+  import { ref, computed } from 'vue'
+import InputField from './InputField.vue'
+
+  const kodeItem = ref('')
+  const hargaJual = ref(0)
+  const pesanan = ref([])
+
+  const tambahItem = () => {
+    if (!kodeItem.value || !hargaJual.value) return
+    pesanan.value.push({
+      kode: kodeItem.value,
+      jumlah: 1,
+      harga: parseFloat(hargaJual.value),
+    })
+    kodeItem.value = ''
+    hargaJual.value = 0
+  }
+
+  const total = computed(() =>
+    pesanan.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
+  )
+  </script>
diff --git a/resources/js/components/KasirTransaksiList.vue b/resources/js/components/KasirTransaksiList.vue
new file mode 100644
index 0000000..012b413
--- /dev/null
+++ b/resources/js/components/KasirTransaksiList.vue
@@ -0,0 +1,42 @@
+<template>
+      <h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
+      <table class="w-full border-collapse border border-gray-200 text-sm">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="border border-gray-200 p-2">Tanggal</th>
+            <th class="border border-gray-200 p-2">Kode Transaksi</th>
+            <th class="border border-gray-200 p-2">Pendapatan</th>
+            <th class="border border-gray-200 p-2">Detail Item</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="trx in props.transaksi" :key="trx.id">
+            <td class="border border-gray-200 p-2">{{ trx.tanggal }}</td>
+            <td class="border border-gray-200 p-2">{{ trx.kode }}</td>
+            <td class="border border-gray-200 p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
+            <td class="border border-gray-200 p-2 text-center">
+              <button @click="$emit('detail', trx)"
+                class="px-3 py-1 rounded-md bg-[#c6a77d] text-white hover:bg-[#b09065] transition">Detail</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+  </template>
+
+  <script setup>
+  import { ref, onMounted } from "vue"
+
+  const props = defineProps({
+    transaksi: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  defineEmits(['detail'])
+
+  onMounted(() => {
+    console.log(props.transaksi);
+
+  })
+  </script>
diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
new file mode 100644
index 0000000..de1fa83
--- /dev/null
+++ b/resources/js/components/Modal.vue
@@ -0,0 +1,96 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="active"
+        class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
+        @click="handleOverlayClick"
+      >
+        <div
+          class="bg-white rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto relative"
+          :class="sizeClass"
+          @click.stop
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, watch, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'].includes(value)
+  },
+  clickOutside: {
+    type: [Boolean, String],
+    default: true
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const sizeClass = computed(() => {
+  const sizes = {
+    xs: 'w-full max-w-xs',
+    sm: 'w-full max-w-sm', 
+    md: 'w-full max-w-md',
+    lg: 'w-full max-w-lg',
+    xl: 'w-full max-w-xl',
+    '2xl': 'w-full max-w-2xl',
+    '3xl': 'w-full max-w-3xl',
+    '4xl': 'w-full max-w-4xl',
+    full: 'w-[95vw] h-[95vh] max-w-none max-h-none'
+  }
+  return sizes[props.size] || sizes.md
+})
+
+const handleOverlayClick = () => {
+  if (clickOutside.value) {
+    emit('close')
+  }
+}
+
+watch(() => props.active, (newVal) => {
+  if (newVal) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<style>
+.modal-enter-active,
+.modal-leave-active {
+  transition: all 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .bg-white,
+.modal-leave-to .bg-white {
+  transform: scale(0.95) translateY(-20px);
+}
+
+.modal-enter-active .bg-white,
+.modal-leave-active .bg-white {
+  transition: transform 0.3s ease;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/pages/InputProduk.vue b/resources/js/pages/InputProduk.vue
index 8ecfacd..5f4a1ae 100644
--- a/resources/js/pages/InputProduk.vue
+++ b/resources/js/pages/InputProduk.vue
@@ -1,173 +1,137 @@
 <template>
   <mainLayout>
+    <!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
+    <CreateItemModal 
+      :isOpen="openItemModal"
+      :product="createdProduct"
+      @close="closeItemModal"
+    />
+
     <div class="p-6">
       <p class="font-serif italic text-[25px] text-D">Produk Baru</p>
-    
+
       <div class="flex flex-col md:flex-row mt-5 gap-6">
         <!-- Form Section -->
         <div class="flex-1">
           <div class="mb-3">
             <label class="block text-D mb-1">Nama Produk</label>
-            <InputField 
-              v-model="form.nama"
-              type="text" 
-              placeholder="Masukkan nama produk" 
-            />
+            <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
           </div>
-          
+
           <div class="mb-3">
             <label class="block text-D mb-1">Kategori</label>
-            <InputSelect 
-              v-model="form.kategori"
-              :options="category" 
-              placeholder="Pilih kategori" 
-            />
+            <InputSelect v-model="form.kategori" :options="category" placeholder="Pilih kategori" />
           </div>
-          
+
           <div class="mb-3 flex flex-row w-full gap-3">
             <div class="flex-1">
               <label class="block text-D mb-1">Berat (g)</label>
-              <InputField
-                v-model="form.berat"
-                type="number"
-                step="0.01"
-                placeholder="Masukkan berat"
-                @input="calculateHargaJual"
-              />
+              <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"
-              />
+              <InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
             </div>
           </div>
 
-          <div class="mt-6">
-            <button 
-              @click="submitForm"
-              :disabled="loading || !isFormValid"
-              class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
-            >
-              {{ loading ? 'Menyimpan...' : 'Simpan Produk' }}
-            </button>
+          <div 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>
-          
+
           <!-- Image Grid -->
           <div class="grid grid-cols-3 gap-3">
             <!-- Uploaded Images -->
-            <div 
-              v-for="(image, index) in uploadedImages" 
-              :key="`img-${image.id}`"
-              class="relative group aspect-square"
-            >
+            <div 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"
-                />
+                <img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
                 <!-- Delete Button -->
-                <button 
-                  @click="removeImage(image.id)"
-                  :disabled="uploadLoading"
-                  class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400"
-                >
+                <button @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"
+            <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="{ 
+              :class="{
                 'border-blue-400 bg-blue-50': isDragging,
-                'cursor-not-allowed opacity-50': uploadLoading 
-              }"
-            >
+                'cursor-not-allowed opacity-50': uploadLoading
+              }">
               <div class="text-center">
-                <!-- Upload Icon or Loading -->
-                <div v-if="!uploadLoading" class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
+                <div v-if="!uploadLoading"
+                  class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
                   <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                   </svg>
                 </div>
                 <div v-else class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2">
                   <svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    <path class="opacity-75" fill="currentColor"
+                      d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                    </path>
                   </svg>
                 </div>
-                <p class="text-xs text-gray-600 font-medium" v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
+                <p class="text-xs text-gray-600 font-medium"
+                  v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
               </div>
             </div>
           </div>
-          
-          <!-- Hidden File Input -->
-          <input
-            ref="fileInput"
-            type="file"
-            multiple
-            accept="image/jpeg,image/jpg,image/png"
-            @change="handleFileSelect"
-            class="hidden"
-          />
-          
-          <!-- Upload Info -->
+
+          <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>
-          
-          <!-- Error Message -->
+
           <div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
             {{ uploadError }}
           </div>
         </div>
       </div>
+
+      <div class="mt-6 flex justify-end flex-row gap-3">
+        <button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
+        <button @click="submitForm(true)" :disabled="loading || !isFormValid"
+          class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
+          {{ loading ? 'Menyimpan...' : 'Tambah Item' }}
+        </button>
+        <button @click="submitForm(false)" :disabled="loading || !isFormValid"
+          class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
+          {{ loading ? 'Menyimpan...' : 'Simpan' }}
+        </button>
+      </div>
     </div>
   </mainLayout>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted } from "vue";
+import { 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 router = useRouter();
 
 const form = ref({
   nama: '',
@@ -191,15 +155,20 @@ const uploadedImages = ref([]);
 const isDragging = ref(false);
 const uploadError = ref('');
 const fileInput = ref(null);
-const userId = ref(1); // Sesuaikan dengan user yang login
+// TODO: Logika autentikasi user
+const userId = ref(1);
+
+const openItemModal = ref(false);
+const createdProduct = ref(null);
 
 const isFormValid = computed(() => {
-  return form.value.nama && 
-         form.value.kategori && 
-         form.value.berat > 0 && 
-         form.value.kadar > 0 && 
-         form.value.harga_per_gram > 0 &&
-         form.value.harga_jual > 0;
+  return form.value.nama &&
+    form.value.kategori &&
+    form.value.berat > 0 &&
+    form.value.kadar > 0 &&
+    form.value.harga_per_gram > 0 &&
+    form.value.harga_jual > 0 &&
+    uploadedImages.value.length > 0;
 });
 
 const calculateHargaJual = () => {
@@ -220,10 +189,21 @@ const loadExistingPhotos = async () => {
     if (error.response?.status !== 404) {
       console.error('Error loading existing photos:', error);
     }
-    // 404 is expected when no photos exist yet
   }
 };
 
+const openCreateItemModal = (product) => {
+  createdProduct.value = product;
+  openItemModal.value = true;
+};
+
+const closeItemModal = () => {
+  openItemModal.value = false;
+  createdProduct.value = null;
+  resetForm();
+  router.replace('/produk');
+};
+
 const triggerFileInput = () => {
   if (!uploadLoading.value && uploadedImages.value.length < 6) {
     fileInput.value?.click();
@@ -238,64 +218,61 @@ const handleFileSelect = (event) => {
 const handleDrop = (event) => {
   event.preventDefault();
   isDragging.value = false;
-  
+
   if (uploadLoading.value || uploadedImages.value.length >= 6) return;
-  
+
   const files = Array.from(event.dataTransfer.files);
   uploadFiles(files);
 };
 
 const uploadFiles = async (files) => {
   uploadError.value = '';
-  
-  // Validate file count
+
   if (uploadedImages.value.length + files.length > 6) {
     uploadError.value = 'Maksimal 6 foto yang dapat diupload';
     return;
   }
-  
-  // Validate file types and sizes
+
   const validFiles = files.filter(file => {
     const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
-    const isValidSize = file.size <= 2 * 1024 * 1024; // 2MB
-    
+    const isValidSize = file.size <= 2 * 1024 * 1024;
+
     if (!isValidType) {
       uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
       return false;
     }
-    
+
     if (!isValidSize) {
       uploadError.value = 'Ukuran file maksimal 2MB';
       return false;
     }
-    
+
     return true;
   });
-  
+
   if (validFiles.length === 0) return;
-  
+
   uploadLoading.value = true;
-  
+
   try {
     for (const file of validFiles) {
       const formData = new FormData();
       formData.append('foto', file);
       formData.append('id_user', userId.value);
-      
+
       const response = await axios.post('/api/foto/upload', formData, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },
       });
-      
+
       uploadedImages.value.push(response.data);
     }
-    
-    // Clear file input
+
     if (fileInput.value) {
       fileInput.value.value = '';
     }
-    
+
   } catch (error) {
     console.error('Upload error:', error);
     uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
@@ -315,20 +292,22 @@ const removeImage = async (imageId) => {
   }
 };
 
-const submitForm = async () => {
+const submitForm = async (addItem) => {
   if (!isFormValid.value) {
     alert('Mohon lengkapi semua field yang diperlukan');
     return;
   }
-  
+
   loading.value = true;
-  
+
   try {
     const response = await axios.post('/api/produk', {
       ...form.value,
       id_user: userId.value
     });
-    
+
+    const createdProductData = response.data.data;
+
     // Reset form
     form.value = {
       nama: '',
@@ -338,19 +317,22 @@ const submitForm = async () => {
       harga_per_gram: 0,
       harga_jual: 0,
     };
-    
+
     uploadedImages.value = [];
     uploadError.value = '';
-    
+
     if (fileInput.value) {
       fileInput.value.value = '';
     }
-    
-    alert('Produk berhasil disimpan!');
-    
+
+    if (addItem) {
+      openCreateItemModal(createdProductData);
+    } else {
+      window.location.href = '/produk?message=Produk berhasil disimpan';
+    }
   } catch (error) {
     console.error('Submit error:', error);
-    
+
     if (error.response?.data?.errors) {
       const errors = Object.values(error.response.data.errors).flat();
       alert('Error: ' + errors.join(', '));
@@ -362,23 +344,33 @@ const submitForm = async () => {
   }
 };
 
-const resetPhotos = async () => {
-  try {
+const resetForm = async () => {
+  form.value = {
+    nama: '',
+    kategori: '',
+    berat: 0,
+    kadar: 0,
+    harga_per_gram: 0,
+    harga_jual: 0,
+  };
+  try { 
     await axios.delete(`/api/foto/reset/${userId.value}`);
     uploadedImages.value = [];
   } catch (error) {
     console.error('Error resetting photos:', error);
   }
+  uploadError.value = '';
+  if (fileInput.value) {
+    fileInput.value.value = '';
+  }
+};
+
+const back = () => {
+  resetForm();
+  window.history.back();
 };
 
-// Load existing photos on component mount
 onMounted(() => {
   loadExistingPhotos();
 });
-
-// Clean up photos if user leaves without saving
-onUnmounted(() => {
-  // Optional: You might want to clean up temporary photos here
-  // resetPhotos();
-});
 </script>
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
new file mode 100644
index 0000000..5aa9b2d
--- /dev/null
+++ b/resources/js/pages/Kasir.vue
@@ -0,0 +1,40 @@
+<template>
+    <mainLayout>
+      <div class="p-6 grid grid-cols-3 gap-6">
+        <!-- Left Section -->
+        <div class="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200 flex flex-col">
+          <KasirForm />
+        </div>
+
+        <!-- Right Section -->
+        <div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
+          <KasirTransaksiList :transaksi="transaksi" @detail="lihatDetail" />
+        </div>
+      </div>
+    </mainLayout>
+  </template>
+
+  <script setup>
+  import { ref, onMounted } from "vue"
+    import axios from "axios"
+
+  import mainLayout from '../layouts/mainLayout.vue'
+  import KasirForm from '../components/KasirForm.vue'
+  import KasirTransaksiList from '../components/KasirTransaksiList.vue'
+
+  const transaksi = ref([])
+
+  onMounted(async () => {
+  try {
+    const res = await axios.get("/api/transaksi") // GANTI URL SESUAI API
+    
+    transaksi.value = res.data
+  } catch (err) {
+    console.error("Gagal fetch transaksi:", err)
+  }
+})
+
+const lihatDetail = (trx) => {
+  alert(`Detail transaksi: ${trx.kode}`)
+}
+</script>
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 40c66dd..d6219d0 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -1,5 +1,12 @@
 <template>
   <mainLayout>
+    <!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
+    <CreateItemModal
+      :isOpen="creatingItem"
+      :product="detail"
+      @close="closeItemModal"
+    />
+
     <div class="p-6">
       <!-- Judul -->
       <p class="font-serif italic text-[25px] text-D">PRODUK</p>
@@ -24,9 +31,9 @@
 
       <!-- Tombol Tambah Produk -->
       <div class="mt-3 flex justify-end">
-        <button class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
+        <router-link to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
           Tambah Produk
-        </button>
+        </router-link>
       </div>
 
       <!-- Grid Produk -->
@@ -41,8 +48,6 @@
     </div>
 
     <!-- Overlay Detail Produk -->
-    <!-- Overlay Detail Produk -->
-<!-- Overlay Detail Produk -->
 <div
   v-if="showOverlay"
   class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
@@ -67,6 +72,13 @@
         {{ detail.items_count }} pcs
       </div>
 
+      <!-- Nama Produk di bawah -->
+      <div
+        class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
+      >
+        {{ detail.nama }}
+      </div>
+
       <!-- Tombol Prev -->
       <button
         v-if="detail.foto && detail.foto.length > 1"
@@ -108,7 +120,8 @@
       <button class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
         Ubah
       </button>
-      <button class="flex-1 bg-green-400 text-black py-2 rounded font-bold">
+      <button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
+
         Tambah
       </button>
       <button class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
@@ -128,10 +141,21 @@ import axios from "axios";
 import mainLayout from "../layouts/mainLayout.vue";
 import ProductCard from "../components/ProductCard.vue";
 import searchbar from "../components/searchbar.vue";
+import CreateItemModal from "../components/CreateItemModal.vue";
 
 const products = ref([]);
 const searchQuery = ref("");
 const selectedCategory = ref("semua");
+const creatingItem = ref(false);
+
+const openItemModal = () => {
+  console.log("open item modal", detail.value);
+
+  creatingItem.value = true;
+};
+const closeItemModal = () => {
+  creatingItem.value = false;
+};
 
 // overlay state
 const showOverlay = ref(false);
@@ -182,7 +206,6 @@ function openOverlay(id) {
 // tutup overlay
 function closeOverlay() {
   showOverlay.value = false;
-  detail.value = {};
   currentFotoIndex.value = 0;
 }
 
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 8c4f90c..1856f73 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -3,6 +3,7 @@ import Home from '../pages/Home.vue'
 import Produk from '../pages/Produk.vue'
 import Brankas from '../pages/Brankas.vue'
 import Tray from '../pages/Tray.vue'
+import Kasir from '../pages/Kasir.vue'
 import InputProduk from '../pages/InputProduk.vue'
 
 
@@ -32,6 +33,11 @@ const routes = [
     name: 'Nampan',
     component: Tray
   },
+  {
+    path: '/kasir',
+    name: 'Kasir',
+    component: Kasir
+  },
 ]
 
 
diff --git a/routes/web.php b/routes/web.php
index fcdea34..ac3aef3 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -30,4 +30,4 @@ Route::prefix('api')->group(function () {
 // Frontend SPA
 Route::get('/{any}', function () {
     return view('app');
-})->where('any', '.*');
+})->where('any', '^(?!storage|api).*$');
\ No newline at end of file