Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
dhilanradya
commit
be90b771ba
@ -23,7 +23,7 @@ class KategoriController extends Controller
|
||||
public function store(Request $request)
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'nama' => 'required|string|max:100',
|
||||
'nama' => 'required|string|max:50',
|
||||
],
|
||||
[
|
||||
'nama' => 'Nama kategori harus diisi.'
|
||||
@ -53,7 +53,7 @@ class KategoriController extends Controller
|
||||
public function update(Request $request, int $id)
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'nama' => 'required|string|max:100',
|
||||
'nama' => 'required|string|max:50',
|
||||
],
|
||||
[
|
||||
'nama' => 'Nama Kategori harus diisi.'
|
||||
@ -77,6 +77,6 @@ class KategoriController extends Controller
|
||||
|
||||
return response()->json([
|
||||
'message' => 'Kategori berhasil dihapus'
|
||||
], 204);
|
||||
], 200);
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,12 +89,12 @@ class LaporanController extends Controller
|
||||
{
|
||||
try {
|
||||
return $this->laporanService->exportPerNampan($request->validate([
|
||||
'tanggal' => 'nullable|string',
|
||||
'sales_id' => 'nullable|integer|exists:sales,id',
|
||||
'produk_id' => 'nullable|integer|exists:produk,id',
|
||||
'nama_pembeli' => 'nullable|string|max:255',
|
||||
'tanggal' => 'required|string',
|
||||
'format' => 'required|string|in:pdf,xlsx,csv',
|
||||
'page' => 'nullable|integer|min:1',
|
||||
'page' => 'required|integer|min:1',
|
||||
'sales_id' => 'nullable|integer|exists:sales,id',
|
||||
'produk_id' => 'nullable|integer|exists:produks,id',
|
||||
'nama_pembeli' => 'nullable|string|max:255',
|
||||
]));
|
||||
|
||||
} catch (\Exception $e) {
|
||||
@ -107,12 +107,12 @@ class LaporanController extends Controller
|
||||
{
|
||||
try {
|
||||
return $this->laporanService->exportPerProduk($request->validate([
|
||||
'tanggal' => 'nullable|string',
|
||||
'sales_id' => 'nullable|integer|exists:sales,id',
|
||||
'nampan_id' => 'nullable|integer|exists:nampan,id',
|
||||
'nama_pembeli' => 'nullable|string|max:255',
|
||||
'tanggal' => 'required|string',
|
||||
'format' => 'required|string|in:pdf,xlsx,csv',
|
||||
'page' => 'nullable|integer|min:1',
|
||||
'page' => 'required|integer|min:1',
|
||||
'sales_id' => 'nullable|integer|exists:sales,id',
|
||||
'nampan_id' => 'nullable|integer|exists:nampans,id',
|
||||
'nama_pembeli' => 'nullable|string|max:255',
|
||||
]));
|
||||
|
||||
} catch (\Exception $e) {
|
||||
|
||||
@ -14,7 +14,7 @@ class NampanController extends Controller
|
||||
public function index()
|
||||
{
|
||||
return response()->json(
|
||||
Nampan::with('items.produk.foto')->withCount('items')->get()
|
||||
Nampan::with('items.produk.foto', 'items.produk.kategori')->withCount('items')->get()
|
||||
);
|
||||
}
|
||||
|
||||
@ -24,10 +24,12 @@ class NampanController extends Controller
|
||||
public function store(Request $request)
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'nama' => 'required|string|max:100',
|
||||
'nama' => 'required|string|max:10|unique:nampans,nama',
|
||||
],
|
||||
[
|
||||
'nama' => 'Nama nampan harus diisi.'
|
||||
'nama.required' => 'Nama nampan harus diisi.',
|
||||
'nama.unique' => 'Nampan dengan nama yang sama sudah ada.',
|
||||
'nama.max' => 'Nama nampan maksimal 10 karakter.'
|
||||
]);
|
||||
|
||||
Nampan::create($validated);
|
||||
@ -54,7 +56,7 @@ class NampanController extends Controller
|
||||
public function update(Request $request, int $id)
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'nama' => 'required|string|max:100',
|
||||
'nama' => 'required|string|max:10|unique:nampans,nama,'.$id,
|
||||
],
|
||||
[
|
||||
'nama' => 'Nama nampan harus diisi.'
|
||||
|
||||
@ -22,6 +22,13 @@ class UserController extends Controller
|
||||
'nama' => 'required|string|unique:users',
|
||||
'password' => 'required|min:6',
|
||||
'role' => 'required|in:owner,kasir',
|
||||
], [
|
||||
'nama.require' => 'Nama wajib diisi',
|
||||
'nama.unique' => 'Nama sudah digunakan',
|
||||
'password.require' => 'Password wajib diisi',
|
||||
'password.min' => 'Password minimal 6 karakter',
|
||||
'role.require' => 'Role wajib diisi',
|
||||
'role.in' => 'Role harus owner atau kasir',
|
||||
]);
|
||||
|
||||
User::create([
|
||||
@ -44,6 +51,12 @@ class UserController extends Controller
|
||||
'nama' => 'required|string|unique:users,nama,' . $id,
|
||||
'password' => 'nullable|min:6',
|
||||
'role' => 'required|in:owner,kasir',
|
||||
], [
|
||||
'nama.require' => 'Nama wajib diisi',
|
||||
'nama.unique' => 'Nama sudah digunakan',
|
||||
'password.min' => 'Password minimal 6 karakter',
|
||||
'role.require' => 'Role wajib diisi',
|
||||
'role.in' => 'Role harus owner atau kasir',
|
||||
]);
|
||||
|
||||
$data = [
|
||||
|
||||
@ -1,45 +1,83 @@
|
||||
// brankas list
|
||||
<template>
|
||||
<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>
|
||||
<!-- Alert Section -->
|
||||
<div class="mb-4" v-if="alert">
|
||||
<div v-if="alert.error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
|
||||
<strong class="font-bold">Error!</strong>
|
||||
<span class="block sm:inline">{{ alert.error }}</span>
|
||||
</div>
|
||||
<div v-if="alert.success" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
|
||||
<strong class="font-bold">Success!</strong>
|
||||
<span class="block sm:inline">{{ alert.success }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistik Brankas -->
|
||||
<div class="bg-A border border-C rounded-xl p-4 mb-6">
|
||||
<div class="flex flex-row sm:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-A rounded-lg">
|
||||
<i class="fas fa-archive text-D"></i>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:gap-6 text-sm text-gray-600">
|
||||
<span>Total Item di brankas: {{ filteredItems.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold text-D">{{ totalWeight }}g</div>
|
||||
<div class="text-sm text-gray-500">Total Berat</div>
|
||||
</div>
|
||||
</div>
|
||||
</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)"
|
||||
>
|
||||
<div v-if="filteredItems.length === 0" class="text-center text-gray-500 py-[120px]">
|
||||
{{ props.search ? 'Item tidak ditemukan.' : 'Brankas kosong.' }}
|
||||
</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="item in filteredItems" :key="item.id"
|
||||
class="flex justify-between items-center border border-C 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"
|
||||
/>
|
||||
<img v-if="item.produk.foto?.length" :src="item.produk.foto[0].url"
|
||||
class="size-12 object-cover rounded"
|
||||
@error="handleImageError" />
|
||||
<div class="size-12 bg-gray-200 rounded flex items-center justify-center" v-else>
|
||||
<i class="fas fa-image text-gray-400"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">{{ item.produk.nama }}</p>
|
||||
<p class="text-sm text-gray-500">ID: {{ item.id }}</p>
|
||||
<p class="font-semibold text-D">{{ item.produk.nama }}</p>
|
||||
<p class="text-sm text-gray-500 font-semibold">{{ item.kode_item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Berat -->
|
||||
<span class="font-medium">{{ item.produk.berat }}g</span>
|
||||
<span class="font-medium text-D">{{ 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">
|
||||
<div v-if="isPopupVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
|
||||
<div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
|
||||
<!-- QR Code -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="p-2 border rounded-lg">
|
||||
<div class="p-2 border border-C rounded-lg">
|
||||
<img :src="qrCodeUrl" alt="QR Code" class="size-36" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Produk -->
|
||||
<div class="text-center text-D font-bold text-lg mb-1">
|
||||
{{ selectedItem?.kode_item }}
|
||||
</div>
|
||||
<div class="text-center text-gray-700 font-medium mb-1">
|
||||
{{ selectedItem?.produk?.nama }}
|
||||
</div>
|
||||
@ -47,38 +85,63 @@
|
||||
{{ selectedItem?.produk?.kategori }}
|
||||
</div>
|
||||
|
||||
<!-- Tombol Cetak -->
|
||||
<div class="flex justify-center mb-4">
|
||||
<button @click="printQR" class="bg-D text-A px-4 py-2 rounded hover:bg-D/80 transition">
|
||||
<i class="fas fa-print mr-2"></i>Cetak
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown pilih nampan -->
|
||||
<div class="mb-4">
|
||||
<label for="tray-select" class="block text-sm font-medium mb-1">
|
||||
Nama Nampan
|
||||
<label for="tray-select" class="block text-sm font-medium text-D mb-2">
|
||||
Pindah ke 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 value="" disabled>Brankas</option>
|
||||
<select id="tray-select" v-model="selectedTrayId"
|
||||
class="w-full px-3 py-2 border border-C rounded-md shadow-sm focus:border-D focus:ring focus:ring-D/20 focus:ring-opacity-50">
|
||||
<option value="" disabled>Pilih Nampan</option>
|
||||
<option v-for="tray in trays" :key="tray.id" :value="tray.id">
|
||||
{{ tray.nama }}
|
||||
</option>
|
||||
</select>
|
||||
<p v-if="errorMove" class="text-red-500 text-sm mt-1">{{ errorMove }}</p>
|
||||
</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"
|
||||
>
|
||||
<button @click="closePopup" class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-50 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 @click="saveMove" :disabled="!selectedTrayId || isMoving"
|
||||
class="px-4 py-2 rounded text-D transition flex items-center"
|
||||
:class="(selectedTrayId && !isMoving) ? 'bg-C hover:bg-C/80' : 'bg-gray-400 cursor-not-allowed'">
|
||||
<div v-if="isMoving" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
{{ isMoving ? 'Memindahkan...' : 'Pindahkan' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Modal untuk aksi berbahaya (jika diperlukan di masa depan) -->
|
||||
<div v-if="isConfirmModalVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
|
||||
<div class="bg-white rounded-xl shadow-lg max-w-md w-full p-6 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="flex-shrink-0 w-10 h-10 mx-auto bg-red-100 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-exclamation-triangle text-red-600"></i>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-lg font-medium text-D">{{ confirmModalTitle }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<p class="text-sm text-gray-500" v-html="confirmModalMessage"></p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button @click="closeConfirmModal" class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
<button @click="handleConfirmAction" class="px-4 py-2 rounded bg-red-500 hover:bg-red-600 text-white transition">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,8 +149,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
@ -103,44 +164,68 @@ const items = ref([]);
|
||||
const trays = ref([]);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
const alert = ref(null);
|
||||
const timer = ref(null);
|
||||
|
||||
// --- state modal
|
||||
// State modal pindah
|
||||
const isPopupVisible = ref(false);
|
||||
const selectedItem = ref(null);
|
||||
const selectedTrayId = ref("");
|
||||
const errorMove = ref("");
|
||||
const isMoving = ref(false);
|
||||
|
||||
// State modal konfirmasi
|
||||
const isConfirmModalVisible = ref(false);
|
||||
const confirmModalTitle = ref("");
|
||||
const confirmModalMessage = ref("");
|
||||
const confirmText = ref("Ya, Konfirmasi");
|
||||
const cancelText = ref("Batal");
|
||||
|
||||
// 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 `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
|
||||
}
|
||||
return "";
|
||||
});
|
||||
|
||||
// --- fungsi modal
|
||||
// Computed untuk statistik
|
||||
const totalWeight = computed(() => {
|
||||
const total = filteredItems.value.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
|
||||
return total.toFixed(2);
|
||||
});
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.search) return items.value;
|
||||
return items.value.filter((item) =>
|
||||
item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase()) ||
|
||||
item.kode_item?.toLowerCase().includes(props.search.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
// Fungsi modal pindah
|
||||
const openMovePopup = (item) => {
|
||||
selectedItem.value = item;
|
||||
if (item.id_nampan) {
|
||||
// ✅ sudah ada di nampan tertentu
|
||||
selectedTrayId.value = item.id_nampan;
|
||||
} else {
|
||||
// 🗄️ kalau belum ada, default ke "Brankas"
|
||||
const brankas = trays.value.find(t => t.nama.toLowerCase() === "brankas");
|
||||
selectedTrayId.value = brankas ? brankas.id : "";
|
||||
}
|
||||
selectedTrayId.value = "";
|
||||
errorMove.value = "";
|
||||
isPopupVisible.value = true;
|
||||
};
|
||||
|
||||
const closePopup = () => {
|
||||
isPopupVisible.value = false;
|
||||
selectedItem.value = null;
|
||||
selectedTrayId.value = "";
|
||||
errorMove.value = "";
|
||||
isMoving.value = false;
|
||||
};
|
||||
|
||||
const saveMove = async () => {
|
||||
if (!selectedTrayId.value || !selectedItem.value) return;
|
||||
if (!selectedTrayId.value || !selectedItem.value || isMoving.value) return;
|
||||
|
||||
errorMove.value = "";
|
||||
isMoving.value = true;
|
||||
|
||||
try {
|
||||
await axios.put(
|
||||
`/api/item/${selectedItem.value.id}`,
|
||||
@ -153,15 +238,87 @@ const saveMove = async () => {
|
||||
}
|
||||
);
|
||||
|
||||
// Tampilkan alert sukses
|
||||
const trayName = trays.value.find(t => t.id === selectedTrayId.value)?.nama;
|
||||
alert.value = { success: `Item berhasil dipindahkan ke nampan "${trayName}"` };
|
||||
|
||||
await refreshData();
|
||||
closePopup();
|
||||
|
||||
// Auto hide alert
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { alert.value = null; }, 3000);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Gagal memindahkan item:", err.response?.data || err);
|
||||
alert("Gagal memindahkan item. Silakan coba lagi.");
|
||||
errorMove.value = err.response?.data?.message || "Gagal memindahkan item. Silakan coba lagi.";
|
||||
} finally {
|
||||
isMoving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// --- ambil data
|
||||
// Fungsi modal konfirmasi
|
||||
const closeConfirmModal = () => {
|
||||
isConfirmModalVisible.value = false;
|
||||
confirmModalTitle.value = "";
|
||||
confirmModalMessage.value = "";
|
||||
confirmText.value = "Ya, Konfirmasi";
|
||||
cancelText.value = "Batal";
|
||||
};
|
||||
|
||||
const handleConfirmAction = async () => {
|
||||
// Implementasi aksi konfirmasi jika diperlukan
|
||||
closeConfirmModal();
|
||||
};
|
||||
|
||||
// Fungsi utilitas
|
||||
const printQR = () => {
|
||||
if (qrCodeUrl.value) {
|
||||
const printWindow = window.open('', '_blank');
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.qr-container {
|
||||
border: 2px solid #ccc;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
}
|
||||
.item-info {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="qr-container">
|
||||
<img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
|
||||
<div class="item-info">
|
||||
<div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div>
|
||||
<div>${selectedItem.value.produk.nama}</div>
|
||||
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
printWindow.document.close();
|
||||
printWindow.print();
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageError = (event) => {
|
||||
event.target.style.display = 'none';
|
||||
};
|
||||
|
||||
// Ambil data
|
||||
const refreshData = async () => {
|
||||
try {
|
||||
const [itemRes, trayRes] = await Promise.all([
|
||||
@ -172,21 +329,30 @@ const refreshData = async () => {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}),
|
||||
]);
|
||||
items.value = itemRes.data;
|
||||
|
||||
// Filter hanya item yang ada di brankas (id_nampan = null atau tidak ada)
|
||||
items.value = itemRes.data.filter(item => !item.id_nampan);
|
||||
trays.value = trayRes.data;
|
||||
|
||||
} catch (err) {
|
||||
error.value = err.message || "Gagal mengambil data";
|
||||
console.error("Error fetching data:", err);
|
||||
alert.value = { error: err.response?.data?.message || "Gagal mengambil data" };
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { alert.value = null; }, 5000);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(refreshData);
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!props.search) return items.value;
|
||||
return items.value.filter((item) =>
|
||||
item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase())
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@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,32 +1,20 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
|
||||
>
|
||||
<!-- Judul -->
|
||||
<p class="text-lg font-semibold mb-2">{{ props.title }}?</p>
|
||||
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 transform transition-all">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-3 text-center">
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
||||
<!-- Deskripsi tambahan -->
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
{{ props.message }}
|
||||
</p>
|
||||
<p class="text-gray-600 text-sm mb-6 text-center leading-relaxed" v-html="message"></p>
|
||||
|
||||
<!-- Tombol aksi -->
|
||||
<div class="flex justify-center gap-3">
|
||||
<button
|
||||
@click="$emit('cancel')"
|
||||
class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
|
||||
>
|
||||
Batal
|
||||
<button @click="$emit('cancel')"
|
||||
class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition">
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('confirm')"
|
||||
class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
|
||||
>
|
||||
Hapus
|
||||
<button @click="$emit('confirm')"
|
||||
class="px-5 py-2 rounded-lg font-semibold bg-red-500 text-white hover:bg-red-600 transition">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,8 +23,38 @@
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
isOpen: Boolean,
|
||||
title:String,
|
||||
message:String
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: 'Ya, Konfirmasi',
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: 'Batal',
|
||||
},
|
||||
});
|
||||
|
||||
// Mendefinisikan events yang dapat di-emit oleh komponen
|
||||
defineEmits(['confirm', 'cancel']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@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>
|
||||
|
||||
@ -7,25 +7,34 @@
|
||||
|
||||
<form @submit.prevent="createAkun" class="space-y-3">
|
||||
<!-- Nama -->
|
||||
<label for="nama">Nama</label>
|
||||
<div>
|
||||
<label for="nama" class="block text-sm font-medium">Nama</label>
|
||||
<InputField
|
||||
v-model="form.nama"
|
||||
id="nama"
|
||||
type="text"
|
||||
:required="true"
|
||||
@input="clearError('nama')"
|
||||
/>
|
||||
<p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<label for="password" class="block text-sm font-medium">Password</label>
|
||||
<InputField
|
||||
v-model="form.password"
|
||||
id="password"
|
||||
type="password"
|
||||
:required="true"
|
||||
@input="clearError('password')"
|
||||
/>
|
||||
<p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
|
||||
</div>
|
||||
|
||||
<label for="peran">Peran</label>
|
||||
<!-- Role -->
|
||||
<div>
|
||||
<label for="peran" class="block text-sm font-medium">Peran</label>
|
||||
<InputSelect
|
||||
v-model="form.role"
|
||||
:options="[
|
||||
@ -33,7 +42,10 @@
|
||||
{ value: 'kasir', label: 'Kasir' },
|
||||
]"
|
||||
placeholder="-- Pilih Peran --"
|
||||
@change="clearError('role')"
|
||||
/>
|
||||
<p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
@ -53,7 +65,7 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Error -->
|
||||
<!-- Error global -->
|
||||
<p v-if="errorMessage" class="text-red-500 text-sm mt-3">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
@ -72,25 +84,65 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
form: { nama: "", password: "", role: "" },
|
||||
errors: { nama: "", password: "", role: "" },
|
||||
errorMessage: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clearError(field) {
|
||||
this.errors[field] = "";
|
||||
this.errorMessage = "";
|
||||
},
|
||||
validateForm() {
|
||||
let valid = true;
|
||||
this.errors = { nama: "", password: "", role: "" };
|
||||
|
||||
if (!this.form.nama) {
|
||||
this.errors.nama = "Nama wajib diisi";
|
||||
valid = false;
|
||||
}
|
||||
if (!this.form.password) {
|
||||
this.errors.password = "Password wajib diisi";
|
||||
valid = false;
|
||||
} else if (this.form.password.length < 6) {
|
||||
this.errors.password = "Password minimal 6 karakter";
|
||||
valid = false;
|
||||
}
|
||||
if (!this.form.role) {
|
||||
this.errors.role = "Role wajib dipilih";
|
||||
valid = false;
|
||||
} else if (!["owner", "kasir"].includes(this.form.role)) {
|
||||
this.errors.role = "Role harus owner atau kasir";
|
||||
valid = false;
|
||||
}
|
||||
|
||||
return valid;
|
||||
},
|
||||
async createAkun() {
|
||||
if (!this.validateForm()) return;
|
||||
|
||||
try {
|
||||
await axios.post("api/user", this.form, {
|
||||
await axios.post("/api/user", this.form, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem(
|
||||
"token"
|
||||
)}`,
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
|
||||
// reset form
|
||||
this.form = { nama: "", password: "", role: "" };
|
||||
this.$emit("refresh");
|
||||
this.$emit("close");
|
||||
} catch (err) {
|
||||
if (err.response?.status === 422 && err.response.data.errors) {
|
||||
// tampilkan error validasi backend
|
||||
const backendErrors = err.response.data.errors;
|
||||
Object.keys(backendErrors).forEach((key) => {
|
||||
this.errors[key] = backendErrors[key][0];
|
||||
});
|
||||
} else {
|
||||
this.errorMessage =
|
||||
err.response?.data?.message || "Gagal menambah akun.";
|
||||
}
|
||||
console.error("Gagal tambah akun:", err);
|
||||
}
|
||||
},
|
||||
|
||||
@ -175,9 +175,8 @@ const data = ref(null);
|
||||
const loading = ref(false);
|
||||
const loadingExport = ref(false);
|
||||
|
||||
// Sorting state
|
||||
const sortBy = ref(null);
|
||||
const sortOrder = ref('asc'); // 'asc' or 'desc'
|
||||
const sortOrder = ref('asc');
|
||||
|
||||
const pagination = ref({
|
||||
current_page: 1,
|
||||
@ -188,14 +187,14 @@ const pagination = ref({
|
||||
const pendapatanWidth = ref(0);
|
||||
const pendapatanElements = ref([]);
|
||||
|
||||
const salesDipilih = ref(null);
|
||||
const salesDipilih = ref(0);
|
||||
const opsiSales = ref([
|
||||
{ label: 'Semua Sales', value: null, selected: true },
|
||||
{ label: 'Semua Sales', value: 0 },
|
||||
]);
|
||||
|
||||
const produkDipilih = ref(null);
|
||||
const produkDipilih = ref(0);
|
||||
const opsiProduk = ref([
|
||||
{ label: 'Semua Produk', value: null, selected: true },
|
||||
{ label: 'Semua Produk', value: 0 },
|
||||
]);
|
||||
|
||||
const namaPembeli = ref(null);
|
||||
@ -278,10 +277,8 @@ watch(nampan, async (newValue) => {
|
||||
// --- Methods ---
|
||||
const handleSort = (column) => {
|
||||
if (sortBy.value === column) {
|
||||
// If same column, toggle sort order
|
||||
sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
// If different column, set new column and default to ascending
|
||||
sortBy.value = column;
|
||||
sortOrder.value = 'asc';
|
||||
}
|
||||
@ -308,7 +305,7 @@ const fetchSales = async () => {
|
||||
});
|
||||
const salesData = response.data;
|
||||
opsiSales.value = [
|
||||
{ label: 'Semua Sales', value: null },
|
||||
{ label: 'Semua Sales', value: 0 },
|
||||
...salesData.map(sales => ({
|
||||
label: sales.nama,
|
||||
value: sales.id,
|
||||
@ -328,7 +325,7 @@ const fetchProduk = async () => {
|
||||
});
|
||||
const produkData = response.data;
|
||||
opsiProduk.value = [
|
||||
{ label: 'Semua Produk', value: null },
|
||||
{ label: 'Semua Produk', value: 0 },
|
||||
...produkData.map(produk => ({
|
||||
label: produk.nama,
|
||||
value: produk.id,
|
||||
@ -346,8 +343,8 @@ const fetchData = async (page = 1) => {
|
||||
pendapatanElements.value = [];
|
||||
|
||||
let queryParams = `tanggal=${tanggalDipilih.value}&page=${page}`;
|
||||
if (salesDipilih.value) queryParams += `&sales_id=${salesDipilih.value}`;
|
||||
if (produkDipilih.value) queryParams += `&produk_id=${produkDipilih.value}`;
|
||||
if (salesDipilih.value != 0 ) queryParams += `&sales_id=${salesDipilih.value}`;
|
||||
if (produkDipilih.value != 0) queryParams += `&produk_id=${produkDipilih.value}`;
|
||||
if (namaPembeli.value) queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
|
||||
|
||||
try {
|
||||
@ -400,14 +397,14 @@ const selectExport = async (option) => {
|
||||
loadingExport.value = true;
|
||||
|
||||
try {
|
||||
const response = await axios.get('/api/laporan/export/detail-pernampan', {
|
||||
const response = await axios.get(`/api/laporan/export/detail-pernampan`, {
|
||||
params: {
|
||||
tanggal: tanggalDipilih.value,
|
||||
sales_id: salesDipilih.value,
|
||||
produk_id: produkDipilih.value,
|
||||
nama_pembeli: namaPembeli.value,
|
||||
format: exportFormat.value,
|
||||
page: pagination.value.current_page,
|
||||
sales_id: salesDipilih.value != 0 ? salesDipilih.value : null,
|
||||
produk_id: produkDipilih.value != 0 ? produkDipilih.value : null,
|
||||
nama_pembeli: namaPembeli.value || null,
|
||||
},
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
|
||||
@ -183,14 +183,14 @@ const pagination = ref({
|
||||
const pendapatanWidth = ref(0);
|
||||
const pendapatanElements = ref([]);
|
||||
|
||||
const salesDipilih = ref(null);
|
||||
const salesDipilih = ref(0);
|
||||
const opsiSales = ref([
|
||||
{ label: 'Semua Sales', value: null, selected: true },
|
||||
{ label: 'Semua Sales', value: 0, selected: true },
|
||||
]);
|
||||
|
||||
const nampanDipilih = ref(null);
|
||||
const nampanDipilih = ref(0);
|
||||
const opsiNampan = ref([
|
||||
{ label: 'Semua Nampan', value: null, selected: true },
|
||||
{ label: 'Semua Nampan', value: 0, selected: true },
|
||||
]);
|
||||
|
||||
const namaPembeli = ref(null);
|
||||
@ -301,7 +301,7 @@ const fetchSales = async () => {
|
||||
});
|
||||
const salesData = response.data;
|
||||
opsiSales.value = [
|
||||
{ label: 'Semua Sales', value: null },
|
||||
{ label: 'Semua Sales', value: 0 },
|
||||
...salesData.map(sales => ({
|
||||
label: sales.nama,
|
||||
value: sales.id,
|
||||
@ -321,7 +321,7 @@ const fetchNampan = async () => {
|
||||
});
|
||||
const nampanData = response.data;
|
||||
opsiNampan.value = [
|
||||
{ label: 'Semua Nampan', value: null },
|
||||
{ label: 'Semua Nampan', value: 0 },
|
||||
{ label: 'Brankas', value: 0 },
|
||||
...nampanData.map(nampan => ({
|
||||
label: nampan.nama,
|
||||
@ -340,9 +340,9 @@ const fetchData = async (page = 1) => {
|
||||
pendapatanElements.value = [];
|
||||
|
||||
let queryParams = `tanggal=${tanggalDipilih.value}&page=${page}`;
|
||||
if (salesDipilih.value != null) queryParams += `&sales_id=${salesDipilih.value}`;
|
||||
if (nampanDipilih.value != null) queryParams += `&nampan_id=${nampanDipilih.value}`;
|
||||
if (namaPembeli.value != null || namaPembeli.value != '') queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
|
||||
if (salesDipilih.value != 0 ) queryParams += `&sales_id=${salesDipilih.value}`;
|
||||
if (nampanDipilih.value != 0) queryParams += `&produk_id=${produkDipilih.value}`;
|
||||
if (namaPembeli.value) queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
|
||||
|
||||
try {
|
||||
const response = await axios.get(`/api/laporan/detail-per-produk?${queryParams}`, {
|
||||
@ -395,10 +395,11 @@ const selectExport = async (option) => {
|
||||
const response = await axios.get('/api/laporan/export/detail-perproduk', {
|
||||
params: {
|
||||
tanggal: tanggalDipilih.value,
|
||||
sales_id: salesDipilih.value,
|
||||
nampan_id: nampanDipilih.value,
|
||||
nama_pembeli: namaPembeli.value,
|
||||
format: exportFormat.value,
|
||||
page: pagination.value.current_page,
|
||||
sales_id: salesDipilih.value != 0 ? salesDipilih.value : null,
|
||||
nampan_id: nampanDipilih.value != 0 ? nampanDipilih.value : null,
|
||||
nama_pembeli: namaPembeli.value || null,
|
||||
},
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
|
||||
@ -1,68 +1,84 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 flex items-center justify-center bg-black/65">
|
||||
<div class="bg-white rounded-lg p-6 w-96">
|
||||
<div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
|
||||
<div class="bg-white rounded-lg p-6 w-96 shadow-lg">
|
||||
<h2 class="text-lg font-bold mb-4">Edit Akun</h2>
|
||||
|
||||
<form @submit.prevent="updateAkun" class="space-y-3">
|
||||
<label for="nama">Nama</label>
|
||||
<!-- Nama -->
|
||||
<div>
|
||||
<label for="nama" class="block text-sm font-medium">Nama</label>
|
||||
<InputField
|
||||
v-model="form.nama"
|
||||
label="nama"
|
||||
id="nama"
|
||||
type="text"
|
||||
:required="true"
|
||||
class="mb-3"
|
||||
@input="clearError('nama')"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<InputField
|
||||
v-model="form.password"
|
||||
label="password"
|
||||
type="password"
|
||||
:required="false"
|
||||
class="mb-1"
|
||||
/>
|
||||
<p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
|
||||
<p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
|
||||
</div>
|
||||
|
||||
<label for="peran">Peran</label>
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium">Password</label>
|
||||
<InputField
|
||||
v-model="form.password"
|
||||
id="password"
|
||||
type="password"
|
||||
:required="false"
|
||||
@input="clearError('password')"
|
||||
/>
|
||||
<p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
|
||||
<p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Role -->
|
||||
<div>
|
||||
<label for="role" class="block text-sm font-medium">Peran</label>
|
||||
<InputSelect
|
||||
v-model="form.role"
|
||||
label="peran"
|
||||
:options="[
|
||||
{ value: 'owner', label: 'Owner' },
|
||||
{ value: 'kasir', label: 'Kasir' }
|
||||
]"
|
||||
:required="true"
|
||||
class="mb-3"
|
||||
placeholder="-- Pilih Peran --"
|
||||
@change="clearError('role')"
|
||||
/>
|
||||
<p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="$emit('close')"
|
||||
class="bg-gray-300 px-4 py-2 rounded"
|
||||
class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-blue-500 text-white px-4 py-2 rounded"
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
Ubah
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Error global -->
|
||||
<p v-if="errorMessage" class="text-red-500 text-sm mt-3">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import InputField from "@/components/InputField.vue";
|
||||
import InputSelect from "@/components/InputSelect.vue";
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import InputField from "@/components/InputField.vue";
|
||||
import InputSelect from "@/components/InputSelect.vue";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: "EditAkun",
|
||||
props: {
|
||||
akun: {
|
||||
type: Object,
|
||||
@ -70,14 +86,15 @@
|
||||
},
|
||||
},
|
||||
components: { InputField, InputSelect },
|
||||
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
nama: this.akun.nama || "",
|
||||
nama: this.akun?.nama || "",
|
||||
password: "",
|
||||
role: this.akun.role || "",
|
||||
role: this.akun?.role || "",
|
||||
},
|
||||
errors: { nama: "", password: "", role: "" },
|
||||
errorMessage: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -89,6 +106,8 @@
|
||||
password: "",
|
||||
role: newVal.role || "",
|
||||
};
|
||||
this.errors = { nama: "", password: "", role: "" };
|
||||
this.errorMessage = "";
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
@ -96,7 +115,35 @@
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clearError(field) {
|
||||
this.errors[field] = "";
|
||||
this.errorMessage = "";
|
||||
},
|
||||
validateForm() {
|
||||
let valid = true;
|
||||
this.errors = { nama: "", password: "", role: "" };
|
||||
|
||||
if (!this.form.nama) {
|
||||
this.errors.nama = "Nama wajib diisi";
|
||||
valid = false;
|
||||
}
|
||||
if (this.form.password && this.form.password.length < 6) {
|
||||
this.errors.password = "Password minimal 6 karakter";
|
||||
valid = false;
|
||||
}
|
||||
if (!this.form.role) {
|
||||
this.errors.role = "Role wajib dipilih";
|
||||
valid = false;
|
||||
} else if (!["owner", "kasir"].includes(this.form.role)) {
|
||||
this.errors.role = "Role harus owner atau kasir";
|
||||
valid = false;
|
||||
}
|
||||
|
||||
return valid;
|
||||
},
|
||||
async updateAkun() {
|
||||
if (!this.validateForm()) return;
|
||||
|
||||
try {
|
||||
const payload = { ...this.form };
|
||||
if (!payload.password) delete payload.password;
|
||||
@ -105,14 +152,23 @@
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
});
|
||||
|
||||
this.$emit("refresh");
|
||||
this.$emit("close");
|
||||
} catch (err) {
|
||||
console.error("Gagal update akun:", err.response?.data || err.message);
|
||||
if (err.response?.status === 422 && err.response.data.errors) {
|
||||
const backendErrors = err.response.data.errors;
|
||||
Object.keys(backendErrors).forEach((key) => {
|
||||
this.errors[key] = backendErrors[key][0];
|
||||
});
|
||||
} else {
|
||||
this.errorMessage =
|
||||
err.response?.data?.message || "Gagal update akun.";
|
||||
}
|
||||
console.error("Gagal update akun:", err);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="loading" class="text-center py-6">Loading...</div>
|
||||
<!-- Tampilkan berat rata-rata -->
|
||||
<div class="bg-A border border-C rounded-xl p-4 mx-6 mb-6">
|
||||
<div class="flex flex-row sm:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-A rounded-lg">
|
||||
<i class="fas fa-weight text-D"></i>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:gap-6 text-sm text-gray-600">
|
||||
<span>Total: {{ totalTrays }}</span>
|
||||
<span>Berisi: {{ nonEmptyTrays }}</span>
|
||||
<span>Kosong: {{ emptyTrays }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold text-D">{{ averageWeight }}g</div>
|
||||
<div class="text-sm text-gray-500">Rata-rata</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@ -8,38 +31,34 @@
|
||||
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-xl p-4 shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<!-- Grid Card -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch px-6">
|
||||
<div v-for="tray in filteredTrays" :key="tray.id"
|
||||
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">
|
||||
<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>
|
||||
<div class="flex gap-2" v-if="isAdmin">
|
||||
<button class="p-1 rounded" @click="emit('edit', tray)">
|
||||
<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 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"
|
||||
<!-- 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 h-[160px] pr-1">
|
||||
<div v-for="item in tray.items" :key="item.id"
|
||||
class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
|
||||
@click="openMovePopup(item)"
|
||||
>
|
||||
@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="size-12 object-cover rounded"
|
||||
/>
|
||||
<div class="text-[#102C57]">
|
||||
<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-D">
|
||||
<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>
|
||||
<p class="text-sm font-medium">{{ item.kode_item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
@ -48,70 +67,62 @@
|
||||
</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 />
|
||||
Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
|
||||
</div>
|
||||
|
||||
<!-- Footer Card -->
|
||||
<div class="border-t border-C mt-3 pt-2 text-right font-semibold">
|
||||
Berat Total: {{ totalWeight(tray) }}g
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-500">{{ tray.items?.length || 0 }} item</span>
|
||||
<span class="text-lg">Berat Total: {{ totalWeight(tray) }}g</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pop-up pindah item -->
|
||||
<div
|
||||
v-if="isPopupVisible"
|
||||
class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
|
||||
>
|
||||
<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="flex justify-center mb-2">
|
||||
<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="text-center text-D font-bold text-lg">
|
||||
{{ selectedItem.kode_item }}
|
||||
</div>
|
||||
<div class="text-center text-gray-700 font-medium mb-3">
|
||||
{{ selectedItem.produk.nama }}
|
||||
</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 @click="printQR" class="bg-D text-A px-4 py-2 rounded hover:bg-D/80 transition">
|
||||
<i class="fas fa-print mr-2"></i>Cetak
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown: langsung pilih Nampan saat ini -->
|
||||
<!-- Dropdown -->
|
||||
<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: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>
|
||||
<InputSelect v-if="isAdmin" v-model="selectedTrayId"
|
||||
:options="trays.map(tray => ({ label: tray.nama, value: tray.id }))" placeholder="Pilih Nampan"
|
||||
class="mt-2" />
|
||||
<div class="bg-A px-3 py-2 rounded text-D font-medium" v-else>
|
||||
{{trays.find(tray => tray.id === selectedTrayId)?.nama}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 @click="closePopup" class="px-4 py-2 rounded bg-gray-400 hover:bg-gray-500 text-white transition">
|
||||
{{ isAdmin ? 'Batal' : 'Tutup' }}
|
||||
</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 v-if="isAdmin" @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
|
||||
:class="selectedTrayId ? 'bg-C hover:bg-C/80 text-D' : 'bg-gray-400 cursor-not-allowed'">
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
@ -122,16 +133,20 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import InputSelect from "./InputSelect.vue";
|
||||
|
||||
const isAdmin = localStorage.getItem("role") === "owner";
|
||||
|
||||
const props = defineProps({
|
||||
search: { type: String, default: "" },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["edit", "delete"]);
|
||||
const trays = ref([]);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
// --- State untuk Pop-up ---
|
||||
// --- State Pop-up ---
|
||||
const isPopupVisible = ref(false);
|
||||
const selectedItem = ref(null);
|
||||
const selectedTrayId = ref("");
|
||||
@ -145,10 +160,52 @@ const qrCodeUrl = computed(() => {
|
||||
return "";
|
||||
});
|
||||
|
||||
const printQR = () => {
|
||||
if (qrCodeUrl.value) {
|
||||
const printWindow = window.open('', '_blank');
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Print QR Code - ${selectedItem.value.kode_item}</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.qr-container {
|
||||
border: 2px solid #ccc;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
}
|
||||
.item-info {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="qr-container">
|
||||
<img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
|
||||
<div class="item-info">
|
||||
<div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div>
|
||||
<div>${selectedItem.value.produk.nama}</div>
|
||||
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
printWindow.document.close();
|
||||
printWindow.print();
|
||||
}
|
||||
};
|
||||
|
||||
// --- Fungsi Pop-up ---
|
||||
const openMovePopup = (item) => {
|
||||
selectedItem.value = item;
|
||||
selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
|
||||
selectedTrayId.value = item.id_nampan;
|
||||
isPopupVisible.value = true;
|
||||
};
|
||||
|
||||
@ -171,37 +228,10 @@ const saveMove = async () => {
|
||||
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 nampan + item ---
|
||||
const refreshData = async () => {
|
||||
try {
|
||||
const [nampanRes, itemRes] = await Promise.all([
|
||||
axios.get("/api/nampan", {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}),
|
||||
axios.get("/api/item", {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}),
|
||||
]);
|
||||
const nampans = nampanRes.data;
|
||||
const items = itemRes.data;
|
||||
|
||||
trays.value = nampans.map((tray) => ({
|
||||
...tray,
|
||||
items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
|
||||
}));
|
||||
} catch (err) {
|
||||
error.value = err.message || "Gagal mengambil data";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
@ -212,7 +242,49 @@ const totalWeight = (tray) => {
|
||||
return total.toFixed(2);
|
||||
};
|
||||
|
||||
// Filter nampan berdasarkan pencarian
|
||||
// Computed untuk statistik berat rata-rata
|
||||
const averageWeight = computed(() => {
|
||||
const nonEmptyTraysData = trays.value.filter(tray => {
|
||||
const weight = parseFloat(totalWeight(tray));
|
||||
return weight > 0;
|
||||
});
|
||||
|
||||
if (nonEmptyTraysData.length === 0) return "0.00";
|
||||
|
||||
const totalWeightSum = nonEmptyTraysData.reduce((sum, tray) => {
|
||||
return sum + parseFloat(totalWeight(tray));
|
||||
}, 0);
|
||||
|
||||
const average = totalWeightSum / nonEmptyTraysData.length;
|
||||
return average.toFixed(2);
|
||||
});
|
||||
|
||||
// Computed untuk statistik tambahan
|
||||
const totalTrays = computed(() => trays.value.length);
|
||||
|
||||
const nonEmptyTrays = computed(() => {
|
||||
return trays.value.filter(tray => parseFloat(totalWeight(tray)) > 0).length;
|
||||
});
|
||||
|
||||
const emptyTrays = computed(() => {
|
||||
return trays.value.filter(tray => parseFloat(totalWeight(tray)) === 0).length;
|
||||
});
|
||||
|
||||
// --- Ambil data nampan + item ---
|
||||
const refreshData = async () => {
|
||||
try {
|
||||
const nampanRes = await axios.get("/api/nampan", {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
trays.value = nampanRes.data;
|
||||
} catch (err) {
|
||||
error.value = err.message || "Gagal mengambil data";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Filter nampan
|
||||
const filteredTrays = computed(() => {
|
||||
if (!props.search) return trays.value;
|
||||
return trays.value.filter((tray) =>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<div class="flex justify-end mb-4">
|
||||
<input
|
||||
v-model="searchText"
|
||||
type="text"
|
||||
placeholder="Cari ..."
|
||||
class="border border-C bg-A rounded-md px-3 py-2 w-64 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||
@input="$emit('update:search', searchText)"
|
||||
/>
|
||||
<div class="border border-C bg-A rounded-md w-full relative items-center">
|
||||
<input v-model="searchText" type="text" placeholder="Cari ..."
|
||||
class="focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md w-full px-3 py-2 "
|
||||
@input="$emit('update:search', searchText)" />
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 text-C">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
@ -2,17 +2,20 @@
|
||||
<mainLayout>
|
||||
<div class="p-6">
|
||||
<p class="font-serif italic text-[25px] text-D">BRANKAS</p>
|
||||
<searchbar v-model:search="searchQuery" />
|
||||
<div class="flex justify-end">
|
||||
<div class="w-full sm:w-64 my-3">
|
||||
<searchbar v-model:search="searchQuery"/>
|
||||
</div>
|
||||
</div>
|
||||
<BrankasList :search="searchQuery" />
|
||||
</div>
|
||||
</mainLayout>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import mainLayout from '../layouts/mainLayout.vue'
|
||||
import searchbar from '../components/searchbar.vue';
|
||||
import searchbar from '../components/Searchbar.vue';
|
||||
import BrankasList from '../components/BrankasList.vue';
|
||||
const searchQuery = ref("");
|
||||
</script>
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
|
||||
<button @click="tambahKategori"
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-2 bg-C text-black rounded-md hover:bg-B transition duration-200 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
@ -28,7 +29,7 @@
|
||||
<th class="px-6 py-4 text-center font-semibold border-r border-C">
|
||||
Nama Kategori
|
||||
</th>
|
||||
<th class="px-6 py-4 text-center font-semibold">
|
||||
<th v-if="isAdmin" class="px-6 py-4 text-center font-semibold">
|
||||
Aksi
|
||||
</th>
|
||||
</tr>
|
||||
@ -43,7 +44,7 @@
|
||||
<td class="px-6 py-4 border-r border-C text-center text-gray-800">
|
||||
{{ item.nama }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<td class="px-6 py-4 text-center" v-if="isAdmin">
|
||||
<div class="flex justify-center gap-2">
|
||||
<button @click="ubahKategori(item)"
|
||||
class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
|
||||
@ -97,6 +98,8 @@ const detail = ref(null);
|
||||
const confirmDeleteOpen = ref(false);
|
||||
const kategoriToDelete = ref(null);
|
||||
|
||||
const isAdmin = localStorage.getItem("role") === "owner";
|
||||
|
||||
// Fetch data kategori dari API
|
||||
const fetchKategoris = async () => {
|
||||
loading.value = true;
|
||||
|
||||
@ -1,20 +1,11 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Buat Item -->
|
||||
<CreateItemModal
|
||||
:isOpen="creatingItem"
|
||||
:product="detail"
|
||||
@close="closeItemModal"
|
||||
/>
|
||||
<CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" />
|
||||
|
||||
<!-- Modal Konfirmasi Hapus Produk -->
|
||||
<ConfirmDeleteModal
|
||||
:isOpen="deleting"
|
||||
@cancel="deleting = false"
|
||||
@confirm="deleteProduk"
|
||||
title="Hapus Produk"
|
||||
message="Apakah Anda yakin ingin menghapus produk ini?"
|
||||
/>
|
||||
<ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
|
||||
message="Apakah Anda yakin ingin menghapus produk ini?" />
|
||||
|
||||
<div class="p-6 min-h-[75vh]">
|
||||
<!-- Judul -->
|
||||
@ -24,30 +15,13 @@
|
||||
<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"
|
||||
/>
|
||||
<searchbar v-model:search="searchQuery" class="w-full" />
|
||||
<div class="flex flex-row justify-between items-center gap-3">
|
||||
<div class="shrink-0">
|
||||
<InputSelect v-model="selectedCategory" :options="kategori" />
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Tombol Tambah Produk -->
|
||||
<router-link
|
||||
to="/produk/baru"
|
||||
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
|
||||
>
|
||||
<router-link v-if="isAdmin" to="/produk/baru"
|
||||
class="bg-C text-D px-4 py-2 rounded-md shadow hover:bg-C transition">
|
||||
Tambah Produk
|
||||
</router-link>
|
||||
</div>
|
||||
@ -57,25 +31,15 @@
|
||||
<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"
|
||||
/>
|
||||
<InputSelect v-model="selectedCategory" :options="kategori" class="w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="flex-1 mt-[2px]">
|
||||
<div class="flex-1">
|
||||
<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"
|
||||
>
|
||||
<router-link v-if="isAdmin" to="/produk/baru"
|
||||
class="bg-C text-D px-4 py-2 rounded-md shadow hover:bg-C transition">
|
||||
Tambah Produk
|
||||
</router-link>
|
||||
</div>
|
||||
@ -88,34 +52,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 🔵 Grid Produk -->
|
||||
<div
|
||||
v-else
|
||||
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0"
|
||||
>
|
||||
<ProductCard
|
||||
v-for="item in filteredProducts"
|
||||
:key="item.id"
|
||||
:product="item"
|
||||
@click="openOverlay(item.id)"
|
||||
/>
|
||||
<div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0">
|
||||
<ProductCard v-for="item in filteredProducts" :key="item.id" :product="item" @click="openOverlay(item.id)" />
|
||||
|
||||
<!-- 🔵 Empty State (sama kayak kategori) -->
|
||||
<div
|
||||
v-if="filteredProducts.length === 0"
|
||||
class="col-span-full flex flex-col items-center py-10 text-gray-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 text-gray-400 mb-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
|
||||
/>
|
||||
<div v-if="filteredProducts.length === 0" class="col-span-full flex flex-col items-center py-10 text-gray-500">
|
||||
<svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
|
||||
</svg>
|
||||
<p>Tidak ada data produk</p>
|
||||
</div>
|
||||
@ -123,47 +67,28 @@
|
||||
</div>
|
||||
|
||||
<!-- Overlay Detail Produk -->
|
||||
<div
|
||||
v-if="showOverlay"
|
||||
class="fixed inset-0 bg-black/30 flex justify-center items-center"
|
||||
@click.self="closeOverlay"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center"
|
||||
>
|
||||
<div v-if="showOverlay" class="fixed inset-0 bg-black/30 flex justify-center items-center"
|
||||
@click.self="closeOverlay">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center">
|
||||
<!-- Foto Produk -->
|
||||
<div
|
||||
class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
|
||||
>
|
||||
<img
|
||||
v-if="detail.foto && detail.foto.length > 0"
|
||||
:src="detail.foto[currentFotoIndex].url"
|
||||
:alt="detail.nama"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
<div class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded">
|
||||
<img v-if="detail.foto && detail.foto.length > 0" :src="detail.foto[currentFotoIndex].url" :alt="detail.nama"
|
||||
class="w-full h-full object-contain" />
|
||||
<span v-else class="text-gray-400 text-sm">[gambar]</span>
|
||||
|
||||
<!-- Stok (pcs) pojok kiri atas -->
|
||||
<div
|
||||
class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
|
||||
>
|
||||
<div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
|
||||
{{ detail.items_count }} pcs
|
||||
</div>
|
||||
|
||||
<!-- Tombol Prev -->
|
||||
<button
|
||||
v-if="detail.foto && detail.foto.length > 1"
|
||||
@click.stop="prevFoto"
|
||||
class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
|
||||
>
|
||||
<button v-if="detail.foto && detail.foto.length > 1" @click.stop="prevFoto"
|
||||
class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
|
||||
‹
|
||||
</button>
|
||||
<!-- Tombol Next -->
|
||||
<button
|
||||
v-if="detail.foto && detail.foto.length > 1"
|
||||
@click.stop="nextFoto"
|
||||
class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
|
||||
>
|
||||
<button v-if="detail.foto && detail.foto.length > 1" @click.stop="nextFoto"
|
||||
class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
@ -174,9 +99,7 @@
|
||||
</p>
|
||||
|
||||
<!-- Detail Harga & Info -->
|
||||
<div
|
||||
class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6"
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
|
||||
<p class="col-span-1">Harga Jual :</p>
|
||||
<p class="col-span-1 text-right">
|
||||
Rp. {{ formatNumber(detail.harga_jual) }}
|
||||
@ -195,24 +118,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Tombol Aksi -->
|
||||
<div class="flex w-full gap-3">
|
||||
<button
|
||||
@click="$router.push(`/produk/${detail.id}/edit`)"
|
||||
class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
|
||||
>
|
||||
<div v-if="isAdmin" class="flex w-full gap-3">
|
||||
<button @click="$router.push(`/produk/${detail.id}/edit`)"
|
||||
class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
|
||||
Ubah
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openItemModal"
|
||||
class="bg-green-400 text-black px-4 py-2 rounded font-bold"
|
||||
>
|
||||
<button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
|
||||
Tambah
|
||||
</button>
|
||||
<button
|
||||
@click="deleting = true"
|
||||
class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
|
||||
>
|
||||
<button @click="deleting = true" class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
@ -226,11 +141,13 @@ import { ref, onMounted, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import mainLayout from "../layouts/mainLayout.vue";
|
||||
import ProductCard from "../components/ProductCard.vue";
|
||||
import searchbar from "../components/searchbar.vue";
|
||||
import searchbar from "../components/Searchbar.vue";
|
||||
import CreateItemModal from "../components/CreateItemModal.vue";
|
||||
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
||||
import InputSelect from "../components/InputSelect.vue";
|
||||
|
||||
const isAdmin = localStorage.getItem("role") == "owner";
|
||||
|
||||
const products = ref([]);
|
||||
const searchQuery = ref("");
|
||||
const selectedCategory = ref(0);
|
||||
@ -369,14 +286,3 @@ 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>
|
||||
|
||||
@ -1,123 +1,74 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Create/Edit Sales -->
|
||||
<CreateSales
|
||||
v-if="creatingSales"
|
||||
:isOpen="creatingSales"
|
||||
:sales="detail"
|
||||
@close="closeSales"
|
||||
/>
|
||||
<CreateSales v-if="creatingSales" :isOpen="creatingSales" :sales="detail" @close="closeSales" />
|
||||
|
||||
<EditSales
|
||||
v-if="editingSales"
|
||||
:isOpen="editingSales"
|
||||
:sales="detail"
|
||||
@close="closeEditSales"
|
||||
/>
|
||||
<EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
|
||||
|
||||
<!-- Modal Delete -->
|
||||
<ConfirmDeleteModal
|
||||
:isOpen="confirmDeleteOpen"
|
||||
title="Hapus Sales"
|
||||
message="Apakah Anda yakin ingin menghapus sales ini?"
|
||||
@confirm="confirmDelete"
|
||||
@cancel="closeDeleteModal"
|
||||
/>
|
||||
<ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
|
||||
message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
|
||||
|
||||
<div class="p-6 min-h-[75vh]">
|
||||
<p class="font-serif italic text-[25px] text-D">SALES</p>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
|
||||
<button
|
||||
@click="tambahSales"
|
||||
class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
<button @click="tambahSales"
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Tambah Sales
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden"
|
||||
>
|
||||
<table class="w-full">
|
||||
<div class="bg-white rounded-lg shadow-md border border-C overflow-x-auto">
|
||||
<table class="w-full ">
|
||||
<thead class="">
|
||||
<tr class="bg-C text-white">
|
||||
<th
|
||||
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||
>
|
||||
<th class="px-6 py-4 text-center text-D">
|
||||
No
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||
>
|
||||
<th class="px-6 py-4 text-center text-D">
|
||||
Nama Sales
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||
>
|
||||
<th class="px-6 py-4 text-center text-D">
|
||||
No HP
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||
>
|
||||
<th class="px-6 py-4 text-center text-D">
|
||||
Alamat
|
||||
</th>
|
||||
<th class="px-6 py-4 text-center text-D">Aksi</th>
|
||||
<th v-if="isAdmin" class="px-6 py-4 text-center text-D">
|
||||
Aksi
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in sales"
|
||||
:key="item.id"
|
||||
class="border-b border-gray-200\ hover:bg-gray-50 transition duration-150"
|
||||
:class="{ 'bg-gray-50': index % 2 === 1 }"
|
||||
>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-center font-medium text-gray-900"
|
||||
>
|
||||
<tr v-for="(item, index) in sales" :key="item.id"
|
||||
class="border-b border-C hover:bg-gray-50 transition duration-150"
|
||||
:class="{ 'bg-gray-50': index % 2 === 1 }">
|
||||
<td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-D"
|
||||
>
|
||||
<td class="px-6 py-4 border-r border-C text-D">
|
||||
{{ item.nama }}
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-gray-800"
|
||||
>
|
||||
<td class="px-6 py-4 border-r border-C text-gray-800">
|
||||
{{ item.no_hp }}
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-gray-800"
|
||||
>
|
||||
<td class="px-6 py-4 border-r border-C text-gray-800">
|
||||
{{ item.alamat }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<td class="px-6 py-4 text-center" v-if="isAdmin">
|
||||
<div class="flex justify-center gap-2">
|
||||
<button
|
||||
@click="ubahSales(item)"
|
||||
class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
|
||||
>
|
||||
<button @click="ubahSales(item)"
|
||||
class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
|
||||
Ubah
|
||||
</button>
|
||||
<button
|
||||
@click="hapusSales(item)"
|
||||
class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
|
||||
>
|
||||
<button @click="hapusSales(item)"
|
||||
class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
@ -126,23 +77,11 @@
|
||||
|
||||
<!-- Empty State -->
|
||||
<tr v-if="sales.length === 0 && !loading">
|
||||
<td
|
||||
colspan="5"
|
||||
class="px-6 py-8 text-center text-gray-500"
|
||||
>
|
||||
<td colspan="5" class="px-6 py-8 text-center text-gray-500">
|
||||
<div class="flex flex-col items-center">
|
||||
<svg
|
||||
class="w-12 h-12 text-gray-400 mb-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
|
||||
/>
|
||||
<svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
|
||||
</svg>
|
||||
<p>Tidak ada data sales</p>
|
||||
</div>
|
||||
@ -154,9 +93,7 @@
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex justify-center items-center py-8">
|
||||
<div
|
||||
class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"
|
||||
></div>
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
|
||||
<span class="ml-2 text-gray-600">Memuat data...</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -171,6 +108,8 @@ import CreateSales from "../components/CreateSales.vue";
|
||||
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
||||
import EditSales from "../components/EditSales.vue";
|
||||
|
||||
const isAdmin = localStorage.getItem("role") === "owner";
|
||||
|
||||
// State
|
||||
const sales = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
@ -1,111 +1,60 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Header -->
|
||||
<div class="p-6">
|
||||
<!-- Judul -->
|
||||
<div class="p-6 flex flex-col sm:flex-row justify-between items-start gap-3">
|
||||
<p class="font-serif italic text-[25px] text-D">NAMPAN</p>
|
||||
|
||||
<!-- Searchbar -->
|
||||
<div class="flex justify-end mt-2">
|
||||
<div class="w-64">
|
||||
<searchbar v-model:search="searchQuery" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex gap-2 mt-3 justify-end">
|
||||
<!-- Tambah Nampan -->
|
||||
<button
|
||||
@click="openModal"
|
||||
class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold"
|
||||
>
|
||||
<div class="flex flex-col gap-3 justify-end w-full sm:w-auto">
|
||||
<Searchbar v-model:search="searchQuery" />
|
||||
<div class="flex w-full gap-2" v-if="isAdmin">
|
||||
<button @click="openModal" class="px-4 py-2 sm:px-2 sm:py-1 hover:bg-B bg-C rounded-md shadow w-full">
|
||||
Tambah Nampan
|
||||
</button>
|
||||
|
||||
<!-- Kosongkan -->
|
||||
<button
|
||||
@click="openConfirmModal"
|
||||
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md"
|
||||
>
|
||||
Kosongkan
|
||||
<button @click="promptEmptyAllTrays" class="px-4 py-2 sm:px-2 sm:py-1 bg-red-500 hover:bg-red-600 text-white rounded-md w-full">
|
||||
Kosongkan Semua Nampan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search + List -->
|
||||
<div class="px-6" v-if="alert">
|
||||
<div v-if="alert.error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
|
||||
<strong class="font-bold">Error!</strong>
|
||||
<span class="block sm:inline">{{ alert.error }}</span>
|
||||
</div>
|
||||
<div v-if="alert.success" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
|
||||
<strong class="font-bold">Success!</strong>
|
||||
<span class="block sm:inline">{{ alert.success }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
|
||||
<TrayList :search="searchQuery" @edit="editTray" @delete="promptDeleteTray" />
|
||||
|
||||
<!-- Modal Tambah/Edit Nampan -->
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-96">
|
||||
<h2 class="text-lg font-semibold mb-4" style="color: #102c57">
|
||||
Tambah Nampan
|
||||
<!-- Modal untuk tambah/edit nampan -->
|
||||
<div v-if="showModal" 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 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
|
||||
<h2 class="text-lg font-semibold mb-4 text-D">
|
||||
{{ editingTrayId ? "Edit Nampan" : "Tambah Nampan" }}
|
||||
</h2>
|
||||
<label class="block mb-2 text-sm font-medium text-D" for="tray-name">Nama Nampan</label>
|
||||
<InputField id="tray-name" v-model="trayName" type="text" placeholder="Contoh: A1" class="mb-1" />
|
||||
<p v-if="errorCreate" class="text-red-500 text-sm mb-4">{{ errorCreate }}</p>
|
||||
<div class="flex justify-end mt-3 gap-2">
|
||||
<button @click="closeModal" class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">Batal</button>
|
||||
<button @click="saveTray" class="px-4 py-2 bg-C hover:bg-C/80 rounded-md text-D">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label
|
||||
class="block mb-2 text-sm font-medium"
|
||||
style="color: #102c57"
|
||||
>Nama Nampan</label
|
||||
>
|
||||
<input
|
||||
v-model="trayName"
|
||||
type="text"
|
||||
placeholder="Contoh: A4"
|
||||
class="w-full border rounded-md p-2 mb-4"
|
||||
<!-- Komponen ConfirmDeleteModal yang diperbaiki -->
|
||||
<ConfirmDeleteModal
|
||||
:isOpen="isConfirmModalVisible"
|
||||
:title="confirmModalTitle"
|
||||
:message="confirmModalMessage"
|
||||
:confirmText="confirmText"
|
||||
:cancelText="cancelText"
|
||||
@confirm="handleConfirmAction"
|
||||
@cancel="closeConfirmModal"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="saveTray"
|
||||
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
|
||||
style="color: #102c57"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Konfirmasi Kosongkan -->
|
||||
<div
|
||||
v-if="showConfirmModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
|
||||
<h2 class="text-xl font-bold mb-3" style="color: #102c57">
|
||||
Kosongkan semua nampan?
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Semua item akan dimasukkan ke brankas. <br />
|
||||
Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
|
||||
</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<button
|
||||
@click="closeConfirmModal"
|
||||
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="confirmEmptyTray"
|
||||
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
|
||||
>
|
||||
Ya
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
@ -113,110 +62,135 @@
|
||||
import { ref } from "vue";
|
||||
import axios from "axios";
|
||||
import mainLayout from "../layouts/mainLayout.vue";
|
||||
import searchbar from "../components/searchbar.vue";
|
||||
import Searchbar from "../components/Searchbar.vue";
|
||||
import TrayList from "../components/TrayList.vue";
|
||||
import InputField from "../components/InputField.vue";
|
||||
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
||||
|
||||
const isAdmin = localStorage.getItem("role") === "owner";
|
||||
const searchQuery = ref("");
|
||||
const showModal = ref(false);
|
||||
const showConfirmModal = ref(false);
|
||||
const trayName = ref("");
|
||||
const editingTrayId = ref(null);
|
||||
const errorCreate = ref("");
|
||||
const timer = ref(null);
|
||||
const alert = ref(null);
|
||||
|
||||
// buka modal tambah/edit
|
||||
const openModal = () => {
|
||||
showModal.value = true;
|
||||
};
|
||||
// State untuk modal konfirmasi
|
||||
const isConfirmModalVisible = ref(false);
|
||||
const confirmModalTitle = ref("");
|
||||
const confirmModalMessage = ref("");
|
||||
const confirmText = ref("Ya, Konfirmasi");
|
||||
const cancelText = ref("Batal");
|
||||
const trayToDeleteId = ref(null);
|
||||
|
||||
const openModal = () => { showModal.value = true; };
|
||||
const closeModal = () => {
|
||||
trayName.value = "";
|
||||
editingTrayId.value = null;
|
||||
showModal.value = false;
|
||||
};
|
||||
|
||||
// simpan nampan
|
||||
const saveTray = async () => {
|
||||
if (!trayName.value.trim()) {
|
||||
alert("Nama Nampan tidak boleh kosong");
|
||||
errorCreate.value = "Nama nampan tidak boleh kosong.";
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { errorCreate.value = ""; }, 3000);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
if (editingTrayId.value) {
|
||||
await axios.put(
|
||||
`/api/nampan/${editingTrayId.value}`,
|
||||
{ nama: trayName.value },
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem(
|
||||
"token"
|
||||
)}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
alert("Nampan berhasil diupdate");
|
||||
await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value }, { headers });
|
||||
alert.value = { success: "Nampan berhasil diperbarui" };
|
||||
} else {
|
||||
await axios.post(
|
||||
"/api/nampan",
|
||||
{ nama: trayName.value },
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem(
|
||||
"token"
|
||||
)}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
alert("Nampan berhasil ditambahkan");
|
||||
await axios.post("/api/nampan", { nama: trayName.value }, { headers });
|
||||
alert.value = { success: "Nampan berhasil ditambahkan" };
|
||||
}
|
||||
closeModal();
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Gagal menyimpan nampan");
|
||||
errorCreate.value = error.response?.data?.message || "Gagal menyimpan nampan.";
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { errorCreate.value = ""; }, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
// === Konfirmasi kosongkan nampan ===
|
||||
const openConfirmModal = () => {
|
||||
showConfirmModal.value = true;
|
||||
};
|
||||
const closeConfirmModal = () => {
|
||||
showConfirmModal.value = false;
|
||||
isConfirmModalVisible.value = false;
|
||||
trayToDeleteId.value = null;
|
||||
confirmModalTitle.value = "";
|
||||
confirmModalMessage.value = "";
|
||||
confirmText.value = "Ya, Konfirmasi";
|
||||
cancelText.value = "Batal";
|
||||
};
|
||||
|
||||
const confirmEmptyTray = async () => {
|
||||
const promptEmptyAllTrays = () => {
|
||||
confirmModalTitle.value = "Kosongkan semua nampan?";
|
||||
confirmModalMessage.value = `Semua item akan dimasukkan ke <span class="font-semibold">Brankas</span>.<br />Masuk ke menu <b>Brankas</b> untuk mengembalikan item ke nampan.`;
|
||||
confirmText.value = "Ya, Kosongkan";
|
||||
cancelText.value = "Batal";
|
||||
trayToDeleteId.value = null;
|
||||
isConfirmModalVisible.value = true;
|
||||
};
|
||||
|
||||
const promptDeleteTray = (tray) => {
|
||||
confirmModalTitle.value = `Hapus Nampan "${tray.nama}"?`;
|
||||
confirmModalMessage.value = "Semua item di dalam nampan ini juga akan dipindahkan ke Brankas. Aksi ini tidak dapat dibatalkan.";
|
||||
confirmText.value = "Ya, Hapus";
|
||||
cancelText.value = "Batal";
|
||||
trayToDeleteId.value = tray.id;
|
||||
isConfirmModalVisible.value = true;
|
||||
};
|
||||
|
||||
const handleConfirmAction = async () => {
|
||||
if (trayToDeleteId.value) {
|
||||
// Hapus nampan spesifik
|
||||
try {
|
||||
await axios.delete("/api/kosongkan-nampan", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
await axios.delete(`/api/nampan/${trayToDeleteId.value}`, {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
alert("Semua item berhasil dipindahkan ke Brankas");
|
||||
closeConfirmModal();
|
||||
alert.value = { success: "Nampan berhasil dihapus" };
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Gagal mengosongkan nampan");
|
||||
alert.value = { error: "Gagal menghapus nampan. Silakan coba lagi." };
|
||||
}
|
||||
} else {
|
||||
// Kosongkan semua nampan
|
||||
try {
|
||||
await axios.delete("/api/kosongkan-nampan", {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
alert.value = { success: "Semua nampan berhasil dikosongkan" };
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert.value = { error: "Gagal mengosongkan nampan. Silakan coba lagi." };
|
||||
}
|
||||
}
|
||||
|
||||
closeConfirmModal();
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { alert.value = null }, 3000);
|
||||
};
|
||||
|
||||
// Fungsi untuk edit nampan
|
||||
const editTray = (tray) => {
|
||||
trayName.value = tray.nama;
|
||||
editingTrayId.value = tray.id;
|
||||
showModal.value = true;
|
||||
};
|
||||
|
||||
const deleteTray = async (id) => {
|
||||
if (!confirm("Yakin ingin menghapus nampan ini?")) return;
|
||||
try {
|
||||
await axios.delete(`/api/nampan/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
alert("Nampan berhasil dihapus");
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Gagal menghapus nampan");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@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>
|
||||
|
||||
@ -10,7 +10,6 @@ use App\Http\Controllers\SalesController;
|
||||
use App\Http\Controllers\UserController;
|
||||
use App\Http\Controllers\TransaksiController;
|
||||
use App\Http\Controllers\LaporanController;
|
||||
use App\Models\Kategori;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user