Kasir/resources/js/pages/Tray.vue

<template>
    <mainLayout>
        <!-- Header -->
        <div class="mb-4">
            <!-- Judul -->
            <p
                style="
                    font-family: 'IM FELL Great Primer', serif;
                    font-style: italic;
                    font-size: 25px;
                "
            >
                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"
                >
                    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>
            </div>
        </div>

        <!-- Search + List -->

        <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />

        <!-- 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
                </h2>

                <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"
                />

                <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>

<script setup>
import { ref } from "vue";
import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import searchbar from "../components/searchbar.vue";
import TrayList from "../components/TrayList.vue";

const searchQuery = ref("");
const showModal = ref(false);
const showConfirmModal = ref(false);
const trayName = ref("");
const editingTrayId = ref(null);

// buka modal tambah/edit
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");
        return;
    }
    try {
        if (editingTrayId.value) {
            await axios.put(
                `/api/nampan/${editingTrayId.value}`,
                { nama: trayName.value },
                {
                    headers: {
                        Authorization: `Bearer ${localStorage.getItem(
                            "token"
                        )}`,
                    },
                }
            );
            alert("Nampan berhasil diupdate");
        } else {
            await axios.post(
                "/api/nampan",
                { nama: trayName.value },
                {
                    headers: {
                        Authorization: `Bearer ${localStorage.getItem(
                            "token"
                        )}`,
                    },
                }
            );
            alert("Nampan berhasil ditambahkan");
        }
        closeModal();
        location.reload();
    } catch (error) {
        console.error(error);
        alert("Gagal menyimpan nampan");
    }
};

// === Konfirmasi kosongkan nampan ===
const openConfirmModal = () => {
    showConfirmModal.value = true;
};
const closeConfirmModal = () => {
    showConfirmModal.value = false;
};

const confirmEmptyTray = async () => {
    try {
        await axios.delete("/api/kosongkan-nampan", {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
        });
        alert("Semua item berhasil dipindahkan ke Brankas");
        closeConfirmModal();
        location.reload();
    } catch (error) {
        console.error(error);
        alert("Gagal mengosongkan 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>