Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
Baghaztra
commit
8e6aa4242b
@ -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');
|
||||
}
|
||||
};
|
||||
@ -1,21 +1,23 @@
|
||||
<template>
|
||||
<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"
|
||||
class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition cursor-pointer"
|
||||
@click="openMovePopup(item)"
|
||||
>
|
||||
<!-- Gambar -->
|
||||
<!-- Gambar & Info Produk -->
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
v-if="item.produk.foto && item.produk.foto.length > 0"
|
||||
v-if="item.produk.foto?.length"
|
||||
:src="item.produk.foto[0].url"
|
||||
class="w-12 h-12 object-contain"
|
||||
class="size-12 object-contain"
|
||||
/>
|
||||
<!-- Info produk -->
|
||||
<div>
|
||||
<p class="font-semibold">{{ item.produk.nama }}</p>
|
||||
<p class="text-sm text-gray-500">{{ item.produk.id }}</p>
|
||||
<p class="text-sm text-gray-500">ID: {{ item.produk.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,11 +25,70 @@
|
||||
<span class="font-medium">{{ item.produk.berat }}g</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Pindah Nampan -->
|
||||
<div
|
||||
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">
|
||||
<!-- QR Code -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="p-2 border rounded-lg">
|
||||
<img :src="qrCodeUrl" alt="QR Code" class="size-36" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Produk -->
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
|
||||
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
@ -39,26 +100,81 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const items = ref([]);
|
||||
const produk = ref([])
|
||||
const trays = ref([]);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await axios.get("/api/item",{
|
||||
headers:{
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
}
|
||||
}); // ganti sesuai URL backend
|
||||
items.value = res.data; // pastikan backend return array of items
|
||||
console.log(res.data);
|
||||
// --- state modal
|
||||
const isPopupVisible = ref(false);
|
||||
const selectedItem = ref(null);
|
||||
const selectedTrayId = ref("");
|
||||
|
||||
// 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) {
|
||||
error.value = err.message || "Gagal mengambil data";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(refreshData);
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.search) return items.value;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<ConfirmDeleteModal
|
||||
v-if="showDeleteModal"
|
||||
:isOpen="showDeleteModal"
|
||||
title="Konfirmasi"
|
||||
message="Yakin ingin menghapus item ini?"
|
||||
@ -7,13 +8,14 @@
|
||||
@cancel="closeDeleteModal"
|
||||
/>
|
||||
|
||||
<div class="p-2 sm:p-4">
|
||||
<!-- Grid Form & Total -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<!-- Input Form -->
|
||||
<div class="order-2 md:order-1 flex flex-col gap-4">
|
||||
<!-- Input Kode Item -->
|
||||
<div>
|
||||
<div class="grid grid-cols-2 h-full gap-4 mb-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-D"
|
||||
>Kode Item *</label
|
||||
>
|
||||
<label class="block text-sm font-medium text-D">Kode Item *</label>
|
||||
<div
|
||||
class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"
|
||||
>
|
||||
@ -31,10 +33,7 @@
|
||||
>
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center justify-center px-3"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
@ -43,10 +42,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input Harga Jual -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-D"
|
||||
>Harga Jual</label
|
||||
>
|
||||
<label class="block text-sm font-medium text-D">Harga Jual</label>
|
||||
<InputField
|
||||
v-model="hargaJual"
|
||||
type="number"
|
||||
@ -54,31 +53,35 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-4">
|
||||
<!-- Tombol Aksi -->
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-2">
|
||||
<button
|
||||
@click="tambahItem"
|
||||
class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
|
||||
class="w-full sm:w-auto 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"
|
||||
class="w-full sm:w-auto 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">
|
||||
|
||||
<!-- Total -->
|
||||
<div class="order-1 md:order-2 flex flex-col md:flex-row md:items-center md:justify-center gap-1">
|
||||
<div class="text-left md:text-start">
|
||||
<span class="block text-gray-600 font-medium">Total:</span>
|
||||
<span class="text-3xl font-bold text-D">
|
||||
<span class="text-2xl sm:text-3xl font-bold text-D">
|
||||
Rp{{ total.toLocaleString() }},-
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error & Info -->
|
||||
<div class="mb-4">
|
||||
<p
|
||||
v-if="error"
|
||||
@ -90,21 +93,23 @@
|
||||
<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 text-sm rounded-lg overflow-hidden"
|
||||
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">No</th>
|
||||
<th class="border border-B p-2">Nam Produk</th>
|
||||
<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"></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-20 border border-B">
|
||||
<td colspan="5" class="h-16 border border-B text-xs sm:text-sm">
|
||||
Belum ada item dipesan
|
||||
</td>
|
||||
</tr>
|
||||
@ -115,13 +120,13 @@
|
||||
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">
|
||||
<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">
|
||||
<td class="border border-B p-2 truncate max-w-[80px]">
|
||||
{{ item.posisi ? item.posisi : "Brankas" }}
|
||||
</td>
|
||||
<td class="border border-B p-2">
|
||||
<td class="border border-B p-2 whitespace-nowrap">
|
||||
Rp{{ item.harga_deal.toLocaleString() }}
|
||||
</td>
|
||||
<td class="border border-B p-2 text-center">
|
||||
@ -135,9 +140,12 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import InputField from "./InputField.vue";
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="overflow-x-auto">
|
||||
<h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
|
||||
<table class="w-full border border-B rounded-lg text-sm">
|
||||
<table class="w-full min-w-[500px] border border-B rounded-lg text-sm">
|
||||
<thead class="bg-A text-D">
|
||||
<tr>
|
||||
<th class="border border-B p-2">Tanggal</th>
|
||||
<th class="border border-B p-2">Kode Transaksi</th>
|
||||
<th class="border border-B p-2">Pendapatan</th>
|
||||
<th class="border border-B p-2">Detail Item</th>
|
||||
<th class="border border-B p-2 text-left">Tanggal</th>
|
||||
<th class="border border-B p-2 text-left">Kode Transaksi</th>
|
||||
<th class="border border-B p-2 text-left">Pendapatan</th>
|
||||
<th class="border border-B p-2 text-center">Detail Item</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -15,12 +16,16 @@
|
||||
<td class="border border-B p-2">{{ trx.kode }}</td>
|
||||
<td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
|
||||
<td class="border border-B p-2 text-center">
|
||||
<button @click="$emit('detail', trx)"
|
||||
class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">Detail</button>
|
||||
<button
|
||||
@click="$emit('detail', trx)"
|
||||
class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">
|
||||
Detail
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@ -52,17 +52,16 @@
|
||||
<!-- Nomor Transaksi -->
|
||||
<p class="mt-1 text-sm">TRS-XXX-XXX</p>
|
||||
|
||||
<!-- Table Barang -->
|
||||
<table class="w-full border-D mt-0 text-sm">
|
||||
<table class="w-full border-D mt-0 text-sm table-fixed">
|
||||
<thead>
|
||||
<tr class="border-b border-D">
|
||||
<th class="w-32 py-2 border-r border-D">Item</th>
|
||||
<th class="w-32 py-2 border-r border-D">Posisi</th>
|
||||
<th class="w-20 border-r border-D">Berat</th>
|
||||
<th class="w-20 border-r border-D">Kadar</th>
|
||||
<th class="w-32 border-r border-D">Harga Satuan</th>
|
||||
<th class="w-20 border-r border-D">Jumlah</th>
|
||||
<th class="w-32">Total Harga</th>
|
||||
<th class="w-[260px] py-2 border-r border-D">Item</th>
|
||||
<th class="w-[70px] border-r border-D">Posisi</th>
|
||||
<th class="w-[60px] border-r border-D">Berat</th>
|
||||
<th class="w-[60px] border-r border-D">Kadar</th>
|
||||
<th class="w-[140px] border-r border-D">Harga Satuan</th>
|
||||
<th class="w-[60px] border-r border-D">Jumlah</th>
|
||||
<th class="w-[140px]">Total Harga</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -94,25 +93,19 @@
|
||||
<td>Rp3.000.000</td>
|
||||
</tr>
|
||||
|
||||
<!-- Baris Ongkos + Total -->
|
||||
<tr class="align-top">
|
||||
<td colspan="2" rowspan="2" class="p-2 text-left align-top">
|
||||
<p class="font-semibold">PERHATIAN</p>
|
||||
<ol class="list-decimal ml-4 text-xs space-y-1">
|
||||
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
||||
<li>
|
||||
Barang yang dikembalikan menurut harga pasaran dan dipotong
|
||||
ongkos bikin, barang rusak lain harga.
|
||||
</li>
|
||||
<li>
|
||||
Barang yang sudah dibeli berarti sudah diperiksa dan
|
||||
disetujui.
|
||||
</li>
|
||||
<li>Surat ini harus dibawa pada saat menjual kembali.</li>
|
||||
<li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin, barang rusak lain harga.</li>
|
||||
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||
<li>Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||
</ol>
|
||||
</td>
|
||||
|
||||
|
||||
<td colspan="3" rowspan="2" class="p-2 text-center align-top">
|
||||
<td colspan="2" 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
|
||||
@ -121,13 +114,13 @@
|
||||
{ value: 'Timothy', label: 'Timothy' },
|
||||
{ value: 'Iwan', label: 'Iwan' }
|
||||
]"
|
||||
class="mt-16 text-sm rounded bg-B text-center cursor-pointer !w-[160px]"
|
||||
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="p-2 text-right text-sm font-semibold align-top border-r">
|
||||
<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>
|
||||
@ -135,7 +128,6 @@
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="p-2 text-sm align-top">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center">
|
||||
@ -152,21 +144,27 @@
|
||||
</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>
|
||||
</td>
|
||||
<td class="p-2 text-center">
|
||||
<button class="bg-C text-white px-6 py-2 rounded w-full">
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pesan bawah -->
|
||||
@ -179,6 +177,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import logo from '@/../images/logo.png'
|
||||
|
||||
@ -4,36 +4,42 @@
|
||||
|
||||
<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.
|
||||
</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 border-C rounded-lg p-4 shadow-sm hover:shadow-md transition">
|
||||
<div
|
||||
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">
|
||||
<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">
|
||||
<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 class="p-2 rounded bg-yellow-400 hover:bg-yellow-500" @click="emit('edit', tray)">✏️</button>
|
||||
<button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 border-C rounded-lg p-2"
|
||||
@click="openMovePopup(item)">
|
||||
|
||||
<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 rounded-lg p-2 cursor-pointer hover:bg-gray-50"
|
||||
@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" />
|
||||
<div>
|
||||
<p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
|
||||
<p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p>
|
||||
<p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
|
||||
<img
|
||||
v-if="item.produk.foto && item.produk.foto.length > 0"
|
||||
:src="item.produk.foto[0].url"
|
||||
alt="foto produk"
|
||||
class="size-12 object-cover rounded"
|
||||
/>
|
||||
<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 class="flex items-center gap-2">
|
||||
@ -55,37 +61,57 @@
|
||||
</div>
|
||||
|
||||
<!-- 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 class="bg-white rounded-lg shadow-lg max-w-sm w-full p-6 relative">
|
||||
<div
|
||||
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="p-2 border border-gray-300 rounded-lg">
|
||||
<img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
|
||||
<div class="p-2 border rounded-lg">
|
||||
<img :src="qrCodeUrl" alt="QR Code" class="size-36" />
|
||||
</div>
|
||||
</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="flex justify-center mb-4">
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
|
||||
Cetak
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown: langsung pilih Nampan saat ini -->
|
||||
<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">
|
||||
<option value="" disabled>Pilih Nampan</option>
|
||||
<option v-for="tray in availableTrays" :key="tray.id" :value="tray.id">
|
||||
{{ tray.nama }}
|
||||
<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:outline-none focus:ring focus:ring-indigo-200"
|
||||
>
|
||||
<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>
|
||||
</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 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>
|
||||
@ -98,10 +124,7 @@ import { ref, onMounted, computed } from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
const props = defineProps({
|
||||
search: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
search: { type: String, default: "" },
|
||||
});
|
||||
const emit = defineEmits(["edit", "delete"]);
|
||||
const trays = ref([]);
|
||||
@ -116,16 +139,16 @@ const selectedTrayId = ref("");
|
||||
// QR Code generator
|
||||
const qrCodeUrl = computed(() => {
|
||||
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 '';
|
||||
return "";
|
||||
});
|
||||
|
||||
// --- Fungsi Pop-up ---
|
||||
const openMovePopup = (item) => {
|
||||
selectedItem.value = item;
|
||||
selectedTrayId.value = "";
|
||||
selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
|
||||
isPopupVisible.value = true;
|
||||
};
|
||||
|
||||
@ -138,19 +161,17 @@ const closePopup = () => {
|
||||
const saveMove = async () => {
|
||||
if (!selectedTrayId.value || !selectedItem.value) return;
|
||||
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,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
await refreshData();
|
||||
closePopup();
|
||||
} catch (err) {
|
||||
@ -159,32 +180,24 @@ const saveMove = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// --- Ambil data nampan + item ---
|
||||
const refreshData = async () => {
|
||||
try {
|
||||
const [nampanRes, itemRes] = await Promise.all([
|
||||
axios.get("/api/nampan", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}),
|
||||
axios.get("/api/item", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}),
|
||||
]);
|
||||
const nampans = nampanRes.data;
|
||||
const items = itemRes.data;
|
||||
|
||||
trays.value = nampans.map((tray) => {
|
||||
return {
|
||||
trays.value = nampans.map((tray) => ({
|
||||
...tray,
|
||||
// pastikan tipe sama (string/number)
|
||||
items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
|
||||
};
|
||||
});
|
||||
}));
|
||||
} catch (err) {
|
||||
error.value = err.message || "Gagal mengambil data";
|
||||
} 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(() => {
|
||||
refreshData();
|
||||
});
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<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
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]"
|
||||
>
|
||||
<!-- Left Section - Form Kasir -->
|
||||
<div class="lg:col-span-3">
|
||||
<div class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-full">
|
||||
<div class="p-2 md:p-4 h-full">
|
||||
<div
|
||||
class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-auto lg:h-full"
|
||||
>
|
||||
<div class="p-2 sm:p-3 md:p-4 h-auto lg:h-full">
|
||||
<KasirForm />
|
||||
</div>
|
||||
</div>
|
||||
@ -13,22 +17,44 @@
|
||||
|
||||
<!-- Right Section - Transaction List -->
|
||||
<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">
|
||||
<!-- Transaction List Content -->
|
||||
<div class="p-4 sm:p-6 overflow-y-auto">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-8">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
|
||||
<span class="ml-3 text-D/70">Memuat transaksi...</span>
|
||||
<div
|
||||
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-3 sm:p-4 md:p-6">
|
||||
<!-- Loading -->
|
||||
<div
|
||||
v-if="loading"
|
||||
class="flex items-center justify-center py-8"
|
||||
>
|
||||
<div
|
||||
class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"
|
||||
></div>
|
||||
<span class="ml-3 text-D/70"
|
||||
>Memuat transaksi...</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="!transaksi.length" class="text-center py-8">
|
||||
<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" />
|
||||
<!-- Empty -->
|
||||
<div
|
||||
v-else-if="!transaksi.length"
|
||||
class="text-center py-8"
|
||||
>
|
||||
<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>
|
||||
<p class="text-[var(--color-D)]/60 text-sm">
|
||||
Belum ada transaksi
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Transaction List -->
|
||||
@ -46,34 +72,34 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
import axios from "axios"
|
||||
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'
|
||||
import mainLayout from "../layouts/mainLayout.vue";
|
||||
import KasirForm from "../components/KasirForm.vue";
|
||||
import KasirTransaksiList from "../components/KasirTransaksiList.vue";
|
||||
|
||||
const transaksi = ref([])
|
||||
const loading = ref(true)
|
||||
const transaksi = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
loading.value = true;
|
||||
const res = await axios.get("/api/transaksi?limit=10", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
transaksi.value = res.data
|
||||
transaksi.value = res.data;
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch transaksi:", err)
|
||||
console.error("Gagal fetch transaksi:", err);
|
||||
} finally {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const lihatDetail = (trx) => {
|
||||
alert(`Detail transaksi: ${trx.kode}`)
|
||||
}
|
||||
alert(`Detail transaksi: ${trx.kode}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -20,23 +20,30 @@
|
||||
<!-- Judul -->
|
||||
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
|
||||
|
||||
<!-- Filter -->
|
||||
<div
|
||||
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
|
||||
>
|
||||
<!-- Dropdown Kategori -->
|
||||
<!-- Wrapper -->
|
||||
<div class="mt-3">
|
||||
<!-- Mobile Layout -->
|
||||
<div class="flex flex-col gap-3 sm:hidden">
|
||||
<!-- Search -->
|
||||
<div class="w-full">
|
||||
<searchbar
|
||||
v-model:search="searchQuery"
|
||||
class="searchbar-mobile"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filter + Tombol -->
|
||||
<div class="flex flex-row justify-between items-center">
|
||||
<!-- Filter Kategori -->
|
||||
<div class="w-40 shrink-0">
|
||||
<InputSelect
|
||||
v-model="selectedCategory"
|
||||
:options="kategori"
|
||||
class="w-full md:w-48"
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
<!-- Search -->
|
||||
<searchbar v-model:search="searchQuery" class="flex-1" />
|
||||
</div>
|
||||
|
||||
<!-- Tombol Tambah Produk -->
|
||||
<div class="mt-3 flex justify-end">
|
||||
<router-link
|
||||
to="/produk/baru"
|
||||
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
|
||||
@ -44,6 +51,35 @@
|
||||
Tambah Produk
|
||||
</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>
|
||||
|
||||
<!-- Grid Produk -->
|
||||
<div
|
||||
@ -297,3 +333,15 @@ async function deleteProduk() {
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user