Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Baghaztra 2025-09-09 11:59:03 +07:00
commit 8e6aa4242b
9 changed files with 697 additions and 456 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
database/migrations/2025_09_03_140242_create_personal_access_tokens_table.php Normal file
View File

@ -0,0 +1,33 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('personal_access_tokens', function (Blueprint $table) {
$table->id();
$table->morphs('tokenable');
$table->text('name');
$table->string('token', 64)->unique();
$table->text('abilities')->nullable();
$table->timestamp('last_used_at')->nullable();
$table->timestamp('expires_at')->nullable()->index();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('personal_access_tokens');
}
};

178
resources/js/components/BrankasList.vue
View File

@ -1,33 +1,94 @@
<template> <template>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div>
<!-- Daftar Item -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div
v-for="item in filteredItems"
:key="item.id"
class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition cursor-pointer"
@click="openMovePopup(item)"
>
<!-- Gambar & Info Produk -->
<div class="flex items-center gap-3">
<img
v-if="item.produk.foto?.length"
:src="item.produk.foto[0].url"
class="size-12 object-contain"
/>
<div>
<p class="font-semibold">{{ item.produk.nama }}</p>
<p class="text-sm text-gray-500">ID: {{ item.produk.id }}</p>
</div>
</div>
<!-- Berat -->
<span class="font-medium">{{ item.produk.berat }}g</span>
</div>
</div>
<!-- Modal Pindah Nampan -->
<div <div
v-for="item in filteredItems" v-if="isPopupVisible"
:key="item.id" class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition"
> >
<!-- Gambar --> <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
<div class="flex items-center gap-3"> <!-- QR Code -->
<img <div class="flex justify-center mb-4">
v-if="item.produk.foto && item.produk.foto.length > 0" <div class="p-2 border rounded-lg">
:src="item.produk.foto[0].url" <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
class="w-12 h-12 object-contain" </div>
/> </div>
<!-- Info produk -->
<div> <!-- Info Produk -->
<p class="font-semibold">{{ item.produk.nama }}</p> <div class="text-center text-gray-700 font-medium mb-1">
<p class="text-sm text-gray-500">{{ item.produk.id }}</p> {{ selectedItem?.produk?.nama }}
</div>
<div class="text-center text-gray-500 text-sm mb-4">
{{ selectedItem?.produk?.kategori }}
</div>
<!-- Dropdown pilih nampan -->
<div class="mb-4">
<label for="tray-select" class="block text-sm font-medium mb-1">
Nama Nampan
</label>
<select
id="tray-select"
v-model="selectedTrayId"
class="w-full rounded-md border shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
>
<option v-for="tray in trays" :key="tray.id" :value="tray.id">
{{ tray.nama }}
</option>
</select>
</div>
<!-- Tombol -->
<div class="flex justify-end gap-2">
<button
@click="closePopup"
class="px-4 py-2 rounded border 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'"
>
Simpan
</button>
</div> </div>
</div> </div>
<!-- Berat -->
<span class="font-medium">{{ item.produk.berat }}g</span>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted } from "vue"; import { ref, computed, onMounted } from "vue";
import axios from "axios"; import axios from "axios";
@ -39,26 +100,81 @@ const props = defineProps({
}); });
const items = ref([]); const items = ref([]);
const produk = ref([]) const trays = ref([]);
const loading = ref(true); const loading = ref(true);
const error = ref(null); const error = ref(null);
onMounted(async () => { // --- state modal
try { const isPopupVisible = ref(false);
const res = await axios.get("/api/item",{ const selectedItem = ref(null);
headers:{ const selectedTrayId = ref("");
Authorization: `Bearer ${localStorage.getItem("token")}`,
}
}); // ganti sesuai URL backend
items.value = res.data; // pastikan backend return array of items
console.log(res.data);
// QR Code generator
const qrCodeUrl = computed(() => {
if (selectedItem.value) {
const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
data
)}`;
}
return "";
});
// --- fungsi modal
const openMovePopup = (item) => {
selectedItem.value = item;
selectedTrayId.value = item.id_nampan;
isPopupVisible.value = true;
};
const closePopup = () => {
isPopupVisible.value = false;
selectedItem.value = null;
selectedTrayId.value = "";
};
const saveMove = async () => {
if (!selectedTrayId.value || !selectedItem.value) return;
try {
await axios.put(
`/api/item/${selectedItem.value.id}`,
{
id_nampan: selectedTrayId.value,
id_produk: selectedItem.value.id_produk,
},
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}
);
await refreshData();
closePopup();
} catch (err) {
console.error("Gagal memindahkan item:", err.response?.data || err);
alert("Gagal memindahkan item. Silakan coba lagi.");
}
};
// --- ambil data
const refreshData = async () => {
try {
const [itemRes, trayRes] = await Promise.all([
axios.get("/api/item", {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}),
axios.get("/api/nampan", {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}),
]);
items.value = itemRes.data;
trays.value = trayRes.data;
} catch (err) { } catch (err) {
error.value = err.message || "Gagal mengambil data"; error.value = err.message || "Gagal mengambil data";
} finally { } finally {
loading.value = false; loading.value = false;
} }
}); };
onMounted(refreshData);
const filteredItems = computed(() => { const filteredItems = computed(() => {
if (!props.search) return items.value; if (!props.search) return items.value;

272
resources/js/components/KasirForm.vue
View File

@ -1,143 +1,151 @@
<template> <template>
<ConfirmDeleteModal <ConfirmDeleteModal
:isOpen="showDeleteModal" v-if="showDeleteModal"
title="Konfirmasi" :isOpen="showDeleteModal"
message="Yakin ingin menghapus item ini?" title="Konfirmasi"
@confirm="hapusPesanan" message="Yakin ingin menghapus item ini?"
@cancel="closeDeleteModal" @confirm="hapusPesanan"
/> @cancel="closeDeleteModal"
/>
<div> <div class="p-2 sm:p-4">
<div class="grid grid-cols-2 h-full gap-4 mb-4"> <!-- Grid Form & Total -->
<div class="flex flex-col gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div> <!-- Input Form -->
<label class="block text-sm font-medium text-D" <div class="order-2 md:order-1 flex flex-col gap-4">
>Kode Item *</label <!-- Input Kode Item -->
> <div>
<div <label class="block text-sm font-medium text-D">Kode Item *</label>
class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B" <div
> class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"
<input >
type="text" <input
v-model="kodeItem" type="text"
@keyup.enter="inputItem" v-model="kodeItem"
placeholder="Scan atau masukkan kode item" @keyup.enter="inputItem"
class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md" placeholder="Scan atau masukkan kode item"
/> class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md"
<button />
v-if="!loadingItem" <button
@click="inputItem" v-if="!loadingItem"
class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md" @click="inputItem"
> class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"
<i class="fas fa-arrow-right"></i>
</button>
<div
v-else
class="flex items-center justify-center px-3"
>
<div
class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"
>
<i class="fas fa-spinner"></i>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-D"
>Harga Jual</label
>
<InputField
v-model="hargaJual"
type="number"
placeholder="Masukkan Harga Jual"
/>
</div>
<div class="flex justify-between gap-4">
<button
@click="tambahItem"
class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
>
Tambah Item
</button>
<button
@click="konfirmasiPenjualan"
class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
>
Lanjut
</button>
</div>
</div>
<div class="flex pt-10 justify-center">
<div class="text-start">
<span class="block text-gray-600 font-medium">Total:</span>
<span class="text-3xl font-bold text-D">
Rp{{ total.toLocaleString() }},-
</span>
</div>
</div>
</div>
<div class="mb-4">
<p
v-if="error"
:class="{ 'animate-shake': error }"
class="text-sm text-red-600 mt-1"
> >
{{ error }} <i class="fas fa-arrow-right"></i>
</p> </button>
<p v-if="info" class="text-sm text-C mt-1">{{ info }}</p> <div v-else class="flex items-center justify-center px-3">
<div
class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"
>
<i class="fas fa-spinner"></i>
</div>
</div>
</div>
</div> </div>
<table <!-- Input Harga Jual -->
class="w-full border border-B text-sm rounded-lg overflow-hidden" <div>
> <label class="block text-sm font-medium text-D">Harga Jual</label>
<thead class="bg-A text-D"> <InputField
<tr> v-model="hargaJual"
<th class="border border-B p-2">No</th> type="number"
<th class="border border-B p-2">Nam Produk</th> placeholder="Masukkan Harga Jual"
<th class="border border-B p-2">Posisi</th> />
<th class="border border-B p-2">Harga</th> </div>
<th class="border border-B p-2"></th>
</tr> <!-- Tombol Aksi -->
</thead> <div class="flex flex-col sm:flex-row justify-between gap-2">
<tbody> <button
<tr v-if="pesanan.length == 0" class="text-center text-D/70"> @click="tambahItem"
<td colspan="5" class="h-20 border border-B"> class="w-full sm:w-auto px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
Belum ada item dipesan >
</td> Tambah Item
</tr> </button>
<tr <button
v-else @click="konfirmasiPenjualan"
v-for="(item, index) in pesanan" class="w-full sm:w-auto px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
:key="index" >
class="hover:bg-gray-50 text-center" Lanjut
> </button>
<td class="border border-B p-2">{{ index + 1 }}</td> </div>
<td class="border border-B p-2 text-left"> </div>
{{ item.produk.nama }}
</td> <!-- Total -->
<td class="border border-B p-2"> <div class="order-1 md:order-2 flex flex-col md:flex-row md:items-center md:justify-center gap-1">
{{ item.posisi ? item.posisi : "Brankas" }} <div class="text-left md:text-start">
</td> <span class="block text-gray-600 font-medium">Total:</span>
<td class="border border-B p-2"> <span class="text-2xl sm:text-3xl font-bold text-D">
Rp{{ item.harga_deal.toLocaleString() }} Rp{{ total.toLocaleString() }},-
</td> </span>
<td class="border border-B p-2 text-center"> </div>
<button </div>
@click="openDeleteModal(index)"
class="text-red-500 hover:text-red-700"
>
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div> </div>
<!-- Error & Info -->
<div class="mb-4">
<p
v-if="error"
:class="{ 'animate-shake': error }"
class="text-sm text-red-600 mt-1"
>
{{ error }}
</p>
<p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
</div>
<!-- Table Responsive -->
<div class="overflow-x-auto">
<table
class="w-full border border-B rounded-lg overflow-hidden text-xs sm:text-sm"
>
<thead class="bg-A text-D">
<tr>
<th class="border border-B p-2 w-8">No</th>
<th class="border border-B p-2">Nama Produk</th>
<th class="border border-B p-2">Posisi</th>
<th class="border border-B p-2">Harga</th>
<th class="border border-B p-2 w-10"></th>
</tr>
</thead>
<tbody>
<tr v-if="pesanan.length == 0" class="text-center text-D/70">
<td colspan="5" class="h-16 border border-B text-xs sm:text-sm">
Belum ada item dipesan
</td>
</tr>
<tr
v-else
v-for="(item, index) in pesanan"
:key="index"
class="hover:bg-gray-50 text-center"
>
<td class="border border-B p-2">{{ index + 1 }}</td>
<td class="border border-B p-2 text-left truncate max-w-[120px] sm:max-w-none">
{{ item.produk.nama }}
</td>
<td class="border border-B p-2 truncate max-w-[80px]">
{{ item.posisi ? item.posisi : "Brankas" }}
</td>
<td class="border border-B p-2 whitespace-nowrap">
Rp{{ item.harga_deal.toLocaleString() }}
</td>
<td class="border border-B p-2 text-center">
<button
@click="openDeleteModal(index)"
class="text-red-500 hover:text-red-700"
>
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import InputField from "./InputField.vue"; import InputField from "./InputField.vue";

49
resources/js/components/KasirTransaksiList.vue
View File

@ -1,26 +1,31 @@
<template> <template>
<h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3> <div class="overflow-x-auto">
<table class="w-full border border-B rounded-lg text-sm"> <h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
<thead class="bg-A text-D"> <table class="w-full min-w-[500px] border border-B rounded-lg text-sm">
<tr> <thead class="bg-A text-D">
<th class="border border-B p-2">Tanggal</th> <tr>
<th class="border border-B p-2">Kode Transaksi</th> <th class="border border-B p-2 text-left">Tanggal</th>
<th class="border border-B p-2">Pendapatan</th> <th class="border border-B p-2 text-left">Kode Transaksi</th>
<th class="border border-B p-2">Detail Item</th> <th class="border border-B p-2 text-left">Pendapatan</th>
</tr> <th class="border border-B p-2 text-center">Detail Item</th>
</thead> </tr>
<tbody> </thead>
<tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A"> <tbody>
<td class="border border-B p-2">{{ trx.tanggal }}</td> <tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A">
<td class="border border-B p-2">{{ trx.kode }}</td> <td class="border border-B p-2">{{ trx.tanggal }}</td>
<td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td> <td class="border border-B p-2">{{ trx.kode }}</td>
<td class="border border-B p-2 text-center"> <td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
<button @click="$emit('detail', trx)" <td class="border border-B p-2 text-center">
class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">Detail</button> <button
</td> @click="$emit('detail', trx)"
</tr> class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">
</tbody> Detail
</table> </button>
</td>
</tr>
</tbody>
</table>
</div>
</template> </template>
<script setup> <script setup>

218
resources/js/components/StrukOverlay.vue
View File

@ -52,121 +52,119 @@
<!-- Nomor Transaksi --> <!-- Nomor Transaksi -->
<p class="mt-1 text-sm">TRS-XXX-XXX</p> <p class="mt-1 text-sm">TRS-XXX-XXX</p>
<!-- Table Barang --> <table class="w-full border-D mt-0 text-sm table-fixed">
<table class="w-full border-D mt-0 text-sm"> <thead>
<thead> <tr class="border-b border-D">
<tr class="border-b border-D"> <th class="w-[260px] py-2 border-r border-D">Item</th>
<th class="w-32 py-2 border-r border-D">Item</th> <th class="w-[70px] border-r border-D">Posisi</th>
<th class="w-32 py-2 border-r border-D">Posisi</th> <th class="w-[60px] border-r border-D">Berat</th>
<th class="w-20 border-r border-D">Berat</th> <th class="w-[60px] border-r border-D">Kadar</th>
<th class="w-20 border-r border-D">Kadar</th> <th class="w-[140px] border-r border-D">Harga Satuan</th>
<th class="w-32 border-r border-D">Harga Satuan</th> <th class="w-[60px] border-r border-D">Jumlah</th>
<th class="w-20 border-r border-D">Jumlah</th> <th class="w-[140px]">Total Harga</th>
<th class="w-32">Total Harga</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <!-- Barang 1 -->
<!-- Barang 1 --> <tr class="text-center">
<tr class="text-center"> <td class="flex items-center gap-2 p-2 border-r border-D">
<td class="flex items-center gap-2 p-2 border-r border-D"> <img src="" class="w-12 h-12 object-cover" />
<img src="" class="w-12 h-12 object-cover" /> Ring XXX
Ring XXX </td>
</td> <td class="border-r border-D">A1, Brankas</td>
<td class="border-r border-D">A1, Brankas</td> <td class="border-r border-D">2,4 g</td>
<td class="border-r border-D">2,4 g</td> <td class="border-r border-D">23 K</td>
<td class="border-r border-D">23 K</td> <td class="border-r border-D">Rp9.000.000</td>
<td class="border-r border-D">Rp9.000.000</td> <td class="border-r border-D">2</td>
<td class="border-r border-D">2</td> <td>Rp18.000.000</td>
<td>Rp18.000.000</td> </tr>
</tr>
<!-- Barang 2 --> <!-- Barang 2 -->
<tr class="text-center border-b"> <tr class="text-center border-b">
<td class="flex items-center gap-2 p-2 border-r border-D"> <td class="flex items-center gap-2 p-2 border-r border-D">
<img src="" class="w-12 h-12 object-cover" /> <img src="" class="w-12 h-12 object-cover" />
Necklace XXX Necklace XXX
</td> </td>
<td class="border-r border-D">A2</td> <td class="border-r border-D">A2</td>
<td class="border-r border-D">2,4 g</td> <td class="border-r border-D">2,4 g</td>
<td class="border-r border-D">23 K</td> <td class="border-r border-D">23 K</td>
<td class="border-r border-D">Rp3.000.000</td> <td class="border-r border-D">Rp3.000.000</td>
<td class="border-r border-D">1</td> <td class="border-r border-D">1</td>
<td>Rp3.000.000</td> <td>Rp3.000.000</td>
</tr> </tr>
<tr class="align-top"> <!-- Baris Ongkos + Total -->
<td colspan="2" rowspan="2" class="p-2 text-left align-top"> <tr class="align-top">
<p class="font-semibold">PERHATIAN</p> <td colspan="2" rowspan="2" class="p-2 text-left align-top">
<ol class="list-decimal ml-4 text-xs space-y-1"> <p class="font-semibold">PERHATIAN</p>
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li> <ol class="list-decimal ml-4 text-xs space-y-1">
<li> <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
Barang yang dikembalikan menurut harga pasaran dan dipotong <li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin, barang rusak lain harga.</li>
ongkos bikin, barang rusak lain harga. <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
</li> <li>Surat ini harap dibawa pada saat menjual kembali.</li>
<li> </ol>
Barang yang sudah dibeli berarti sudah diperiksa dan </td>
disetujui.
</li> <td colspan="2" rowspan="2" class="p-2 text-center align-top">
<li>Surat ini harus dibawa pada saat menjual kembali.</li> <div class="flex flex-col items-center justify-center h-full">
</ol> <p><strong>Sales</strong></p>
</td> <inputSelect
v-model="sales"
:options="[
{ value: 'Timothy', label: 'Timothy' },
{ value: 'Iwan', label: 'Iwan' }
]"
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
/>
</div>
</td>
<td colspan="2" class="p-2 text-right text-sm font-semibold align-top border-r">
<div class="space-y-2">
<p>Ongkos bikin</p>
<p class="text-red-500 text-xs">diluar harga jual</p>
<p>Total</p>
</div>
</td>
<td class="p-2 text-sm align-top">
<div class="space-y-2">
<div class="flex items-center">
<p>Rp</p>
<inputField
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
/>
</div>
<div class="flex items-center">
<p>Rp</p>
<p class="px-3 py-1 text-left text-sm w-full">21.200.000</p>
</div>
</div>
</td>
</tr>
<!-- Baris Tombol -->
<tr>
<td></td>
<td></td>
<td class="p-2 text-center">
<div class="flex gap-2">
<button class="bg-gray-400 text-white px-6 py-2 rounded w-full">
Batal
</button>
<button class="bg-C text-white px-6 py-2 rounded w-full">
Simpan
</button>
</div>
</td>
</tr>
</tbody>
</table>
<td colspan="3" rowspan="2" class="p-2 text-center align-top">
<div class="flex flex-col items-center justify-center h-full">
<p><strong>Sales</strong></p>
<inputSelect
v-model="sales"
:options="[
{ value: 'Timothy', label: 'Timothy' },
{ value: 'Iwan', label: 'Iwan' }
]"
class="mt-16 text-sm rounded bg-B text-center cursor-pointer !w-[160px]"
/>
</div>
</td>
<td class="p-2 text-right text-sm font-semibold align-top border-r">
<div class="space-y-2">
<p>Ongkos bikin</p>
<p class="text-red-500 text-xs">diluar harga jual</p>
<p>Total</p>
</div>
</td>
<td class="p-2 text-sm align-top">
<div class="space-y-2">
<div class="flex items-center">
<p>Rp</p>
<inputField
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
/>
</div>
<div class="flex items-center">
<p>Rp</p>
<p class="px-3 py-1 text-left text-sm w-full">21.200.000</p>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-2 text-center">
<button class="bg-gray-400 text-white px-6 py-2 rounded w-full">
Batal
</button>
</td>
<td class="p-2 text-center">
<button class="bg-C text-white px-6 py-2 rounded w-full">
Simpan
</button>
</td>
</tr>
</tbody>
</table>
</div> </div>
<!-- Pesan bawah --> <!-- Pesan bawah -->
@ -179,6 +177,8 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import logo from '@/../images/logo.png' import logo from '@/../images/logo.png'

155
resources/js/components/TrayList.vue
View File

@ -4,36 +4,42 @@
<div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div> <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-30"> <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-[120px]">
Nampan tidak ditemukan. Nampan tidak ditemukan.
</div> </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-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" <div
class="border border-C rounded-lg p-4 shadow-sm hover:shadow-md transition"> v-for="tray in filteredTrays"
:key="tray.id"
class="border rounded-xl p-4 shadow-sm hover:shadow-md transition"
>
<div class="flex justify-between items-center mb-3"> <div class="flex justify-between items-center mb-3">
<h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2> <h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
<div class="flex gap-2"> <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>
</button>
<button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">
🗑️
</button>
</div> </div>
</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-if="tray.items && tray.items.length" 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 border-C rounded-lg p-2" <div
@click="openMovePopup(item)"> v-for="item in tray.items"
:key="item.id"
class="flex justify-between items-center border rounded-lg p-2 cursor-pointer hover:bg-gray-50"
@click="openMovePopup(item)"
>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img v-if="item.produk.foto && item.produk.foto.length > 0" :src="item.produk.foto[0].url" <img
alt="foto produk" class="w-12 h-12 object-cover rounded" /> v-if="item.produk.foto && item.produk.foto.length > 0"
<div> :src="item.produk.foto[0].url"
<p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p> alt="foto produk"
<p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p> class="size-12 object-cover rounded"
<p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p> />
<div class="text-[#102C57]">
<p class="text-sm">{{ item.produk.nama }}</p>
<p class="text-sm">{{ item.produk.kategori }}</p>
<p class="text-sm">{{ item.produk.harga_jual.toLocaleString() }}</p>
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -55,37 +61,57 @@
</div> </div>
<!-- Pop-up pindah item --> <!-- Pop-up pindah item -->
<div v-if="isPopupVisible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> <div
<div class="bg-white rounded-lg shadow-lg max-w-sm w-full p-6 relative"> v-if="isPopupVisible"
class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
>
<div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">
<div class="p-2 border border-gray-300 rounded-lg"> <div class="p-2 border rounded-lg">
<img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" /> <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
</div> </div>
</div> </div>
<div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div> <div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div>
<div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div> <div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div>
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"> <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
Cetak Cetak
</button> </button>
</div> </div>
<!-- Dropdown: langsung pilih Nampan saat ini -->
<div class="mb-4"> <div class="mb-4">
<label for="tray-select" class="block text-sm font-medium text-gray-700 mb-1">Nama Nampan</label> <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
<select id="tray-select" v-model="selectedTrayId" <select
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"> id="tray-select"
<option value="" disabled>Pilih Nampan</option> v-model="selectedTrayId"
<option v-for="tray in availableTrays" :key="tray.id" :value="tray.id"> class="w-full rounded-md border shadow-sm focus:outline-none focus:ring focus:ring-indigo-200"
{{ tray.nama }} >
<option
v-for="tray in trays"
:key="tray.id"
:value="tray.id"
>
{{ tray.nama }}<span v-if="Number(tray.id) === Number(selectedItem?.id_nampan)"></span>
</option> </option>
</select> </select>
</div> </div>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<button @click="closePopup" <button
class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition"> @click="closePopup"
class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100 transition"
>
Batal Batal
</button> </button>
<button @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded text-white transition" <button
:class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"> @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 Simpan
</button> </button>
</div> </div>
@ -98,10 +124,7 @@ import { ref, onMounted, computed } from "vue";
import axios from "axios"; import axios from "axios";
const props = defineProps({ const props = defineProps({
search: { search: { type: String, default: "" },
type: String,
default: "",
},
}); });
const emit = defineEmits(["edit", "delete"]); const emit = defineEmits(["edit", "delete"]);
const trays = ref([]); const trays = ref([]);
@ -116,16 +139,16 @@ const selectedTrayId = ref("");
// QR Code generator // QR Code generator
const qrCodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, '')}`; const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`; return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
} }
return ''; return "";
}); });
// --- Fungsi Pop-up --- // --- Fungsi Pop-up ---
const openMovePopup = (item) => { const openMovePopup = (item) => {
selectedItem.value = item; selectedItem.value = item;
selectedTrayId.value = ""; selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
isPopupVisible.value = true; isPopupVisible.value = true;
}; };
@ -138,18 +161,16 @@ const closePopup = () => {
const saveMove = async () => { const saveMove = async () => {
if (!selectedTrayId.value || !selectedItem.value) return; if (!selectedTrayId.value || !selectedItem.value) return;
try { try {
await axios.put(`/api/item/${selectedItem.value.id}`, await axios.put(
{ `/api/item/${selectedItem.value.id}`,
id_nampan: selectedTrayId.value, {
id_produk: selectedItem.value.id_produk, id_nampan: selectedTrayId.value,
}, id_produk: selectedItem.value.id_produk,
{ },
headers: { {
Authorization: `Bearer ${localStorage.getItem("token")}`, headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}, }
} );
);
await refreshData(); await refreshData();
closePopup(); closePopup();
@ -159,32 +180,24 @@ const saveMove = async () => {
} }
}; };
// --- Ambil data nampan + item --- // --- Ambil data nampan + item ---
const refreshData = async () => { const refreshData = async () => {
try { try {
const [nampanRes, itemRes] = await Promise.all([ const [nampanRes, itemRes] = await Promise.all([
axios.get("/api/nampan", { axios.get("/api/nampan", {
headers: { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}), }),
axios.get("/api/item", { axios.get("/api/item", {
headers: { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}), }),
]); ]);
const nampans = nampanRes.data; const nampans = nampanRes.data;
const items = itemRes.data; const items = itemRes.data;
trays.value = nampans.map((tray) => { trays.value = nampans.map((tray) => ({
return { ...tray,
...tray, items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
// pastikan tipe sama (string/number) }));
items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
};
});
} catch (err) { } catch (err) {
error.value = err.message || "Gagal mengambil data"; error.value = err.message || "Gagal mengambil data";
} finally { } finally {
@ -207,14 +220,6 @@ const filteredTrays = computed(() => {
); );
}); });
// Daftar nampan lain (selain tempat item saat ini)
const availableTrays = computed(() => {
if (!selectedItem.value || !trays.value) return [];
return trays.value.filter(
(tray) => Number(tray.id) !== Number(selectedItem.value.id_nampan)
);
});
onMounted(() => { onMounted(() => {
refreshData(); refreshData();
}); });

2
resources/js/components/searchbar.vue
View File

@ -14,4 +14,4 @@ import { ref } from "vue";
const searchText = ref(""); const searchText = ref("");
defineEmits(["update:search"]); defineEmits(["update:search"]);
</script> </script>

156
resources/js/pages/Kasir.vue
View File

@ -1,79 +1,105 @@
<template> <template>
<mainLayout> <mainLayout>
<div class="lg:p-2 pt-6"> <div class="lg:p-2 pt-6">
<div class="grid grid-cols-1 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]"> <div
<!-- Left Section - Form Kasir --> class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]"
<div class="lg:col-span-3"> >
<div class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-full"> <!-- Left Section - Form Kasir -->
<div class="p-2 md:p-4 h-full"> <div class="lg:col-span-3">
<KasirForm /> <div
</div> class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-auto lg:h-full"
</div> >
</div> <div class="p-2 sm:p-3 md:p-4 h-auto lg:h-full">
<KasirForm />
</div>
</div>
</div>
<!-- Right Section - Transaction List --> <!-- Right Section - Transaction List -->
<div class="lg:col-span-2"> <div class="lg:col-span-2">
<div class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4"> <div
<!-- Transaction List Content --> class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4 max-h-[70vh] overflow-y-auto"
<div class="p-4 sm:p-6 overflow-y-auto"> >
<!-- Loading State --> <div class="p-3 sm:p-4 md:p-6">
<div v-if="loading" class="flex items-center justify-center py-8"> <!-- Loading -->
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div> <div
<span class="ml-3 text-D/70">Memuat transaksi...</span> v-if="loading"
</div> class="flex items-center justify-center py-8"
>
<!-- Empty State --> <div
<div v-else-if="!transaksi.length" class="text-center py-8"> class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"
<svg class="w-16 h-16 mx-auto text-B mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> ></div>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" <span class="ml-3 text-D/70"
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> >Memuat transaksi...</span
</svg> >
<p class="text-[var(--color-D)]/60 text-sm">Belum ada transaksi</p> </div>
</div>
<!-- Empty -->
<!-- Transaction List --> <div
<KasirTransaksiList v-else-if="!transaksi.length"
v-else class="text-center py-8"
:transaksi="transaksi" >
@detail="lihatDetail" <svg
/> class="w-16 h-16 mx-auto text-B mb-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1"
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg>
<p class="text-[var(--color-D)]/60 text-sm">
Belum ada transaksi
</p>
</div>
<!-- Transaction List -->
<KasirTransaksiList
v-else
:transaksi="transaksi"
@detail="lihatDetail"
/>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </mainLayout>
</div>
</mainLayout>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue" import { ref, onMounted } from "vue";
import axios from "axios" import axios from "axios";
import mainLayout from '../layouts/mainLayout.vue' import mainLayout from "../layouts/mainLayout.vue";
import KasirForm from '../components/KasirForm.vue' import KasirForm from "../components/KasirForm.vue";
import KasirTransaksiList from '../components/KasirTransaksiList.vue' import KasirTransaksiList from "../components/KasirTransaksiList.vue";
const transaksi = ref([]) const transaksi = ref([]);
const loading = ref(true) const loading = ref(true);
onMounted(async () => { onMounted(async () => {
try { try {
loading.value = true loading.value = true;
const res = await axios.get("/api/transaksi?limit=10", { const res = await axios.get("/api/transaksi?limit=10", {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
}, },
}) });
transaksi.value = res.data transaksi.value = res.data;
} catch (err) { } catch (err) {
console.error("Gagal fetch transaksi:", err) console.error("Gagal fetch transaksi:", err);
} finally { } finally {
loading.value = false loading.value = false;
} }
}) });
const lihatDetail = (trx) => { const lihatDetail = (trx) => {
alert(`Detail transaksi: ${trx.kode}`) alert(`Detail transaksi: ${trx.kode}`);
} };
</script> </script>

90
resources/js/pages/Produk.vue
View File

@ -20,29 +20,65 @@
<!-- Judul --> <!-- Judul -->
<p class="font-serif italic text-[25px] text-D">PRODUK</p> <p class="font-serif italic text-[25px] text-D">PRODUK</p>
<!-- Filter --> <!-- Wrapper -->
<div <div class="mt-3">
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3" <!-- Mobile Layout -->
> <div class="flex flex-col gap-3 sm:hidden">
<!-- Dropdown Kategori --> <!-- Search -->
<InputSelect <div class="w-full">
v-model="selectedCategory" <searchbar
:options="kategori" v-model:search="searchQuery"
class="w-full md:w-48" class="searchbar-mobile"
/> />
</div>
<!-- Search --> <!-- Filter + Tombol -->
<searchbar v-model:search="searchQuery" class="flex-1" /> <div class="flex flex-row justify-between items-center">
</div> <!-- Filter Kategori -->
<div class="w-40 shrink-0">
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full"
/>
</div>
<!-- Tombol Tambah Produk --> <!-- Tombol Tambah Produk -->
<div class="mt-3 flex justify-end"> <router-link
<router-link to="/produk/baru"
to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition" >
> Tambah Produk
Tambah Produk </router-link>
</router-link> </div>
</div>
<!-- Desktop Layout -->
<div class="hidden sm:flex flex-row gap-3 items-start">
<!-- Filter -->
<div class="w-40 sm:w-48 shrink-0">
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full"
/>
</div>
<!-- Search -->
<div class="flex-1 mt-[2px]">
<searchbar v-model:search="searchQuery" class="w-full" />
</div>
</div>
<!-- Tombol Tambah Produk (desktop) -->
<div class="hidden sm:flex justify-end mt-3">
<router-link
to="/produk/baru"
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
>
Tambah Produk
</router-link>
</div>
</div> </div>
<!-- Grid Produk --> <!-- Grid Produk -->
@ -297,3 +333,15 @@ async function deleteProduk() {
} }
} }
</script> </script>
<style scoped>
/* 🔥 Tambahan agar searchbar mobile full */
.searchbar-mobile:deep(div) {
width: 100% !important;
justify-content: flex-start !important;
}
.searchbar-mobile:deep(input) {
width: 100% !important;
}
</style>