Kasir/resources/js/pages/Kategori.vue

<template>
	<mainLayout>
		<CreateKategori :isOpen="creatingKategori" :product="detail" @close="closeKategori" />

		<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
			message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
		<div class="p-6 min-h-[75vh]" >
			<!-- Header Section -->
			<div class="flex justify-between items-center mb-6">
				<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
				<button @click="tambahKategori"
					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" />
					</svg>
					Tambah Kategori
				</button>
			</div>

			<!-- Table Section -->
			<div class="bg-white rounded-lg shadow-md border border-C overflow-hidden">
				<table class="w-full">
					<thead>
						<tr class="bg-C text-black">
							<th class="px-6 py-4 text-center font-semibold border-r border-C">
								No
							</th>
							<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">
								Aksi
							</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in kategori" :key="item.id"
							class="border-b border-C hover:bg-A transition duration-150"
							:class="{ 'bg-gray-50': index % 2 === 1 }">
							<td class="px-6 py-4 border-r border-C font-medium text-center text-gray-900">
								{{ index + 1 }}
							</td>
							<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">
								<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">
										Ubah
									</button>
									<button @click="hapusKategori(item)"
										class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
										Hapus
									</button>
								</div>
							</td>
						</tr>

						<!-- Empty State -->
						<tr v-if="kategori.length === 0 && !loading">
							<td colspan="3" 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>
									<p>Tidak ada data kategori</p>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<!-- Loading State -->
			<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>
	</mainLayout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import CreateKategori from "../components/CreateKategori.vue";
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";

// Reactive data
const kategori = ref([]);
const loading = ref(false);
const creatingKategori = ref(false);
const detail = ref(null);
const confirmDeleteOpen = ref(false);
const kategoriToDelete = ref(null);

// Fetch data kategori dari API
const fetchKategoris = async () => {
	loading.value = true;
	try {
		const response = await axios.get("/api/kategori", {
			headers: {
				Authorization: `Bearer ${localStorage.getItem("token")}`,
			},
		});
		kategori.value = response.data;
		console.log("Data kategori:", response.data);
	} catch (error) {
		console.error("Error fetching kategori:", error);
	} finally {
		loading.value = false;
	}
};

// Tambah kategori - open modal
const tambahKategori = () => {
	detail.value = null; // Reset detail untuk mode create
	creatingKategori.value = true;
};

// Close modal
const closeKategori = () => {
	creatingKategori.value = false;
	fetchKategoris(); // Refresh data setelah modal ditutup
};

// Ubah kategori
const ubahKategori = (item) => {
	detail.value = item; // Set detail untuk mode edit
	creatingKategori.value = true;
};

// Hapus kategori
const hapusKategori = (item) => {
	kategoriToDelete.value = item;
	confirmDeleteOpen.value = true;
};

// 🔵 Ditambahkan: aksi konfirmasi hapus
const confirmDelete = async () => {
	try {
		await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`, {
			headers: {
				Authorization: `Bearer ${localStorage.getItem("token")}`,
			},
		});
		console.log("Kategori berhasil dihapus");
		fetchKategoris();
	} catch (error) {
		console.error("Error deleting kategori:", error);
	} finally {
		closeDeleteModal();
	}
};

// 🔵 Ditambahkan: tutup modal hapus
const closeDeleteModal = () => {
	confirmDeleteOpen.value = false;
	kategoriToDelete.value = null;
};

// Lifecycle
onMounted(() => {
	fetchKategoris();
});
</script>