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-11 11:45:24 +07:00
commit 679ffc504c
6 changed files with 135 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/Http/Controllers/KategoriController.php
View File

@ -23,7 +23,7 @@ class KategoriController extends Controller
public function store(Request $request) public function store(Request $request)
{ {
$validated = $request->validate([ $validated = $request->validate([
'nama' => 'required|string|max:100', 'nama' => 'required|string|max:50',
], ],
[ [
'nama' => 'Nama kategori harus diisi.' 'nama' => 'Nama kategori harus diisi.'
@ -53,7 +53,7 @@ class KategoriController extends Controller
public function update(Request $request, int $id) public function update(Request $request, int $id)
{ {
$validated = $request->validate([ $validated = $request->validate([
'nama' => 'required|string|max:100', 'nama' => 'required|string|max:50',
], ],
[ [
'nama' => 'Nama Kategori harus diisi.' 'nama' => 'Nama Kategori harus diisi.'
@ -77,6 +77,6 @@ class KategoriController extends Controller
return response()->json([ return response()->json([
'message' => 'Kategori berhasil dihapus' 'message' => 'Kategori berhasil dihapus'
], 204); ], 200);
} }
} }

4
app/Http/Controllers/NampanController.php
View File

@ -24,7 +24,7 @@ class NampanController extends Controller
public function store(Request $request) public function store(Request $request)
{ {
$validated = $request->validate([ $validated = $request->validate([
'nama' => 'required|string|max:100', 'nama' => 'required|string|max:10',
], ],
[ [
'nama' => 'Nama nampan harus diisi.' 'nama' => 'Nama nampan harus diisi.'
@ -54,7 +54,7 @@ class NampanController extends Controller
public function update(Request $request, int $id) public function update(Request $request, int $id)
{ {
$validated = $request->validate([ $validated = $request->validate([
'nama' => 'required|string|max:100', 'nama' => 'required|string|max:10',
], ],
[ [
'nama' => 'Nama nampan harus diisi.' 'nama' => 'Nama nampan harus diisi.'

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

@ -1,4 +1,8 @@
<template> <template>
<div v-if="loading" class="flex justify-center items-center h-screen">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
<span class="ml-2 text-gray-600">Memuat data...</span>
</div>
<div> <div>
<!-- Daftar Item --> <!-- Daftar Item -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">

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

@ -1,6 +1,9 @@
<template> <template>
<div> <div>
<div v-if="loading" class="text-center py-6">Loading...</div> <div v-if="loading" class="flex justify-center items-center h-screen">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
<span class="ml-2 text-gray-600">Memuat data...</span>
</div>
<div 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>
@ -8,21 +11,31 @@
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 "> <!-- Grid Card -->
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
<div <div
v-for="tray in filteredTrays" v-for="tray in filteredTrays"
:key="tray.id" :key="tray.id"
class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition" class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition flex flex-col h-full"
> >
<!-- Header Card -->
<div class="flex justify-between items-center mb-3"> <div class="flex justify-between items-center mb-3">
<h2 class="font-bold text-lg text-[#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> <button class="p-1 rounded" @click="emit('edit', tray)">
<button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">🗑️</button> <i class="fa fa-pen fa-sm text-yellow-500 hover:text-yellow-600"></i>
</button>
<button class="p-1 rounded" @click="emit('delete', tray.id)">
<i class="fa fa-trash fa-sm text-red-500 hover:text-red-600"></i>
</button>
</div> </div>
</div> </div>
<div v-if="tray.items && tray.items.length" class="space-y-2 max-h-64 overflow-y-auto pr-2"> <!-- Isi Card (Max tinggi 3 item + scroll kalau lebih) -->
<div
v-if="tray.items && tray.items.length"
class="space-y-2 flex-1 overflow-y-auto max-h-[160px] pr-1"
>
<div <div
v-for="item in tray.items" v-for="item in tray.items"
:key="item.id" :key="item.id"
@ -48,11 +61,13 @@
</div> </div>
</div> </div>
<div v-else class="text-gray-400 text-center py-4"> <!-- Kalau kosong -->
<div v-else class="text-gray-400 text-center py-4 flex-1">
Nampan kosong.<br /> Nampan kosong.<br />
Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan. Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
</div> </div>
<!-- Footer Card -->
<div class="border-t border-C mt-3 pt-2 text-right font-semibold"> <div class="border-t border-C mt-3 pt-2 text-right font-semibold">
Berat Total: {{ totalWeight(tray) }}g Berat Total: {{ totalWeight(tray) }}g
</div> </div>
@ -72,8 +87,12 @@
</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">
<div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div> {{ 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"> <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">
@ -81,7 +100,7 @@
</button> </button>
</div> </div>
<!-- Dropdown: langsung pilih Nampan saat ini --> <!-- Dropdown -->
<div class="mb-4"> <div class="mb-4">
<label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label> <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
<select <select
@ -89,12 +108,8 @@
v-model="selectedTrayId" v-model="selectedTrayId"
class="w-full rounded-md border shadow-sm focus:outline-none focus:ring focus:ring-indigo-200" class="w-full rounded-md border shadow-sm focus:outline-none focus:ring focus:ring-indigo-200"
> >
<option <option v-for="tray in trays" :key="tray.id" :value="tray.id">
v-for="tray in trays" {{ tray.nama }}
: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>
@ -131,7 +146,7 @@ const trays = ref([]);
const loading = ref(true); const loading = ref(true);
const error = ref(null); const error = ref(null);
// --- State untuk Pop-up --- // --- State Pop-up ---
const isPopupVisible = ref(false); const isPopupVisible = ref(false);
const selectedItem = ref(null); const selectedItem = ref(null);
const selectedTrayId = ref(""); const selectedTrayId = ref("");
@ -148,7 +163,7 @@ const qrCodeUrl = computed(() => {
// --- Fungsi Pop-up --- // --- Fungsi Pop-up ---
const openMovePopup = (item) => { const openMovePopup = (item) => {
selectedItem.value = item; selectedItem.value = item;
selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4) selectedTrayId.value = item.id_nampan;
isPopupVisible.value = true; isPopupVisible.value = true;
}; };
@ -171,7 +186,6 @@ const saveMove = async () => {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }, headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
} }
); );
await refreshData(); await refreshData();
closePopup(); closePopup();
} catch (err) { } catch (err) {
@ -212,7 +226,7 @@ const totalWeight = (tray) => {
return total.toFixed(2); return total.toFixed(2);
}; };
// Filter nampan berdasarkan pencarian // Filter nampan
const filteredTrays = computed(() => { const filteredTrays = computed(() => {
if (!props.search) return trays.value; if (!props.search) return trays.value;
return trays.value.filter((tray) => return trays.value.filter((tray) =>

154
resources/js/pages/Tray.vue
View File

@ -3,7 +3,7 @@
<!-- Header --> <!-- Header -->
<div class="p-6"> <div class="p-6">
<!-- Judul --> <!-- Judul -->
<p class="font-serif italic text-[25px] text-D">NAMPAN</p> <p class="font-serif italic text-[25px] text-D">NAMPAN</p>
<!-- Searchbar --> <!-- Searchbar -->
<div class="flex justify-end mt-2"> <div class="flex justify-end mt-2">
@ -33,78 +33,82 @@
</div> </div>
<!-- Search + List --> <!-- Search + List -->
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" /> <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
<!-- Modal Tambah/Edit Nampan --> <!-- Modal Tambah/Edit Nampan -->
<div <div
v-if="showModal" v-if="showModal"
class="fixed inset-0 bg-black/75 flex justify-center items-center z-50" class="fixed inset-0 bg-black/75 flex justify-center items-center z-50 backdrop-blur-sm"
> >
<div class="bg-white rounded-lg shadow-lg p-6 w-96"> <div
<h2 class="text-lg font-semibold mb-4" style="color: #102c57"> class="bg-white rounded-lg shadow-lg p-6 w-96 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn"
Tambah Nampan >
</h2> <h2 class="text-lg font-semibold mb-4 text-[#102c57]">
{{ editingTrayId ? "Edit Nampan" : "Tambah Nampan" }}
</h2>
<label <label class="block mb-2 text-sm font-medium text-[#102c57]">
class="block mb-2 text-sm font-medium" Nama Nampan
style="color: #102c57" </label>
>Nama Nampan</label <input
> v-model="trayName"
<input type="text"
v-model="trayName" placeholder="Contoh: A4"
type="text" class="w-full border rounded-md p-2 mb-4"
placeholder="Contoh: A4" />
class="w-full border rounded-md p-2 mb-4"
/>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<button <button
@click="closeModal" @click="closeModal"
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md" class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
> >
Cancel Cancel
</button> </button>
<button
<button @click="saveTray"
@click="saveTray" class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md text-[#102c57]"
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md" >
style="color: #102c57" Save
> </button>
Save </div>
</button> </div>
</div> </div>
</div>
</div>
<!-- Modal Konfirmasi Kosongkan --> <!-- Modal Konfirmasi Kosongkan -->
<div <div
v-if="showConfirmModal" v-if="showConfirmModal"
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
> >
<div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center"> <div
<h2 class="text-xl font-bold mb-3" style="color: #102c57"> class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn"
Kosongkan semua nampan? >
</h2> <!-- Judul -->
<p class="text-gray-600 mb-6"> <h2 class="text-xl font-bold text-[#102c57] mb-3 text-center">
Semua item akan dimasukkan ke brankas. <br /> Kosongkan semua nampan?
Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan. </h2>
</p>
<div class="flex justify-center gap-4"> <!-- Deskripsi -->
<button <p class="text-gray-600 text-sm mb-6 text-center leading-relaxed">
@click="closeConfirmModal" Semua item akan dimasukkan ke <span class="font-semibold">Brankas</span>.<br />
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold" Masuk ke menu <b>Brankas</b> untuk mengembalikan item ke nampan.
> </p>
Batal
</button> <!-- Tombol -->
<button <div class="flex justify-center gap-3">
@click="confirmEmptyTray" <button
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold" @click="closeConfirmModal"
> class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition"
Ya >
</button> Batal
</div> </button>
<button
@click="confirmEmptyTray"
class="px-5 py-2 rounded-lg font-semibold bg-red-500 text-white hover:bg-red-600 transition"
>
Ya, Kosongkan
</button>
</div> </div>
</div>
</div> </div>
</mainLayout> </mainLayout>
</template> </template>
@ -122,6 +126,7 @@ const showConfirmModal = ref(false);
const trayName = ref(""); const trayName = ref("");
const editingTrayId = ref(null); const editingTrayId = ref(null);
// buka modal tambah/edit // buka modal tambah/edit
const openModal = () => { const openModal = () => {
showModal.value = true; showModal.value = true;
@ -145,9 +150,7 @@ const saveTray = async () => {
{ nama: trayName.value }, { nama: trayName.value },
{ {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem( Authorization: `Bearer ${localStorage.getItem("token")}`,
"token"
)}`,
}, },
} }
); );
@ -158,9 +161,7 @@ const saveTray = async () => {
{ nama: trayName.value }, { nama: trayName.value },
{ {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem( Authorization: `Bearer ${localStorage.getItem("token")}`,
"token"
)}`,
}, },
} }
); );
@ -220,3 +221,20 @@ const deleteTray = async (id) => {
} }
}; };
</script> </script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-fadeIn {
animation: fadeIn 0.25s ease-out forwards;
}
</style>

1
routes/web.php
View File

@ -10,7 +10,6 @@ use App\Http\Controllers\SalesController;
use App\Http\Controllers\UserController; use App\Http\Controllers\UserController;
use App\Http\Controllers\TransaksiController; use App\Http\Controllers\TransaksiController;
use App\Http\Controllers\LaporanController; use App\Http\Controllers\LaporanController;
use App\Models\Kategori;
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;