"use client"; import { useEffect, useState } from "react"; import { motion } from "framer-motion"; import Link from "next/link"; import { Plus } from "lucide-react"; import { ItemsTable } from "./ItemTable"; import { Select3D } from "../components/Select3D"; import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; import Loading from "../components/Loading"; import { Printer, CheckSquare } from "lucide-react"; /* ================= TYPES ================= */ type Item = { id: number; sku: string; name: string; category: string; unit: string; is_active: boolean; description: string; barcode: string | null; }; export default function ItemsPage() { const { data: session, status } = useSession(); const router = useRouter(); const currentUser = session?.user as any; const [selectedItems, setSelectedItems] = useState([]); const [data, setData] = useState([]); const [categories, setCategories] = useState([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(true); const [search, setSearch] = useState(""); const [category, setCategory] = useState("ALL"); const [page, setPage] = useState(1); const [limit, setLimit] = useState(10); /* ================= FETCH ================= */ const fetchData = async () => { setLoading(true); const res = await fetch( `/api/items?search=${search}&category=${category}&page=${page}&limit=${limit}`, { cache: "no-store", } ); const json = await res.json(); setData(json.items); setCategories(json.categories); setTotal(json.total); setLoading(false); }; useEffect(() => { // 1. tunggu session selesai load if (status === "loading") return; // 2. kalau belum login if (status === "unauthenticated") { router.replace("/login"); return; } const allowedRoles = ["ADMIN", "OPERATOR", "SUPERVISOR"]; if (!allowedRoles.includes(currentUser?.role)) { router.replace("/satuan"); return; } fetchData(); }, [search, category, page, limit, status, router]); const totalPage = Math.ceil(total / limit); const toggleSelectItem = (id: number) => { setSelectedItems((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id] ); }; const selectAllCurrentPage = () => { setSelectedItems(data.map((x) => x.id)); }; const clearSelection = () => { setSelectedItems([]); }; const handlePrintMultipleQr = (type: "selected" | "all") => { const items = type === "all" ? data : data.filter((x) => selectedItems.includes(x.id)); if (items.length === 0) { alert("Pilih item dulu"); return; } const win = window.open("", "_blank", "width=1000,height=800"); if (!win) return; const html = items .filter((x) => x.barcode) .map( (item) => `

${item.name}

${item.barcode}

` ) .join(""); win.document.write(` Print Multi QR Code

${html}

`); win.document.close(); }; // optional safety (biar tidak flash UI) if (!session) return null; return (

{/* ================= HEADER ================= */} {/* BACKGROUND */}

{/* LIGHT EFFECT */}

{/* CARD */}

{/* LEFT */}

🌾 Master Items

Total Data :{" "} {new Intl.NumberFormat("id-ID").format(total)}

{/* RIGHT */}

{/* FILTER */}

{ setPage(1); setSearch(v); }} placeholder="Cari Nama/SKU item..." /> { setPage(1); setCategory(v); }} options={[ { label: "Semua Kategori", value: "ALL" }, ...categories.map((c) => ({ label: c, value: c, })), ]} placeholder="Kategori" /> { setPage(1); setLimit(Number(v)); }} options={[ { label: "10", value: 10 }, { label: "20", value: 20 }, { label: "50", value: 50 }, { label: "100", value: 100 }, ]} placeholder="Limit" />

{/* ACTION BUTTONS */}

Tambah

{/* ================= TABLE ================= */} {loading ? ( ) : ( // )} {/* ================= PAGINATION ================= */}

Page {page} / {totalPage || 1}

); } /* ================= INPUT (GREEN GLOW) ================= */ function Input({ value, onChange, placeholder }: any) { return (

{/* glow */}

onChange(e.target.value)} placeholder={placeholder} className="relative px-4 py-2 rounded-xl bg-white/80 backdrop-blur-xl border border-green-200 text-sm shadow-md focus:outline-none focus:ring-2 focus:ring-green-400 transition" />

); } /* ================= SELECT (GREEN OUTLINE FIX) ================= */ function Select({ value, onChange, children }: any) { return (

{/* glow */}

); }