"use client"; import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Select3D } from "../components/Select3D"; import { InventoryTable } from "./InventoryTable"; import { useSession } from "next-auth/react"; import Loading from "../components/Loading"; import { useRouter } from "next/navigation"; import { Printer, QrCode } from "lucide-react"; import { formatNumber } from "../components/formatNumber"; /* ================= TYPES ================= */ type Inventory = { item_id: number; sku: string; name: string; category: string; unit: string; location_id: number; location_name: string; quantity: number; reserved_quantity: number; barcode?: string | null; // tambah ini }; type LocationOption = { id: number; name: string; }; /* ================= PAGE ================= */ export default function InventoryPage() { const [datas, setDatas] = useState([]); const [locations, setLocations] = useState([]); const [loading, setLoading] = useState(false); const [selectedItems, setSelectedItems] = useState([]); const { data: session, status } = useSession(); const router = useRouter(); const currentUser = session?.user as any; const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); const [locationId, setLocationId] = useState(""); const [page, setPage] = useState(1); const [limit, setLimit] = useState(10); const [total, setTotal] = useState(0); const [totalQty, setTotalQty] = useState(0); // 🔥 MODAL STATE const [showAddOption, setShowAddOption] = useState(false); // 🔥 NEW: SELECT LOCATION BEFORE SCAN const [showSelectLocation, setShowSelectLocation] = useState(false); const [selectedScanLocation, setSelectedScanLocation] = useState(""); const toggleSelectItem = (key: string) => { setSelectedItems((prev) => prev.includes(key) ? prev.filter((x) => x !== key) : [...prev, key] ); }; const selectAllCurrentPage = () => { setSelectedItems( datas.map((x) => `${x.item_id}-${x.location_id}`) ); }; const clearSelection = () => { setSelectedItems([]); }; // 5. FUNCTION PRINT QR, single / selected / all const handlePrintQr = ( type: "single" | "selected" | "all", row?: Inventory ): void => { let items: Inventory[] = []; if (type === "single" && row) { items = [row]; } if (type === "selected") { items = datas.filter((x) => selectedItems.includes(`${x.item_id}-${x.location_id}`) ); } if (type === "all") { items = datas; } items = items.filter((x) => x.barcode); if (items.length === 0) { alert("Tidak ada barcode untuk diprint"); return; } const win = window.open("", "_blank", "width=1000,height=800"); if (!win) return; const html = items .map( (item) => `

${item.name}

${item.sku}

${item.barcode}

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

${html}

`); win.document.close(); }; /* ================= DEBOUNCE ================= */ useEffect(() => { const timer = setTimeout(() => { setDebouncedSearch(search.trim()); }, 400); return () => clearTimeout(timer); }, [search]); /* ================= RESET PAGE ================= */ useEffect(() => { setPage(1); }, [debouncedSearch, locationId, limit]); /* ================= FETCH ================= */ 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("/inventory"); return; } const fetchData = async () => { setLoading(true); const res = await fetch( `/api/inventory?search=${encodeURIComponent( debouncedSearch )}&location_id=${locationId}&page=${page}&limit=${limit}`, { cache: "no-store" } ); const json = await res.json(); setDatas(json.data || []); setTotal(json.total || 0); setTotalQty(Number(json.total_quantity || 0)); setLoading(false); }; fetchData(); }, [debouncedSearch, locationId, page, limit, status]); /* ================= FETCH LOCATIONS ================= */ useEffect(() => { const fetchLocations = async () => { const res = await fetch("/api/gudang"); const json = await res.json(); setLocations(json.locations || []); }; fetchLocations(); }, []); const totalPage = Math.max(1, Math.ceil(total / limit)); // optional safety (biar tidak flash UI) // if (!session) return null; if (status === "loading") { return ; } if (status === "unauthenticated") { return null; } return (

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

{/* CONTENT */}

{/* LEFT */}

🌾 Stok Pergudang

Total Data

{formatNumber(total)}

Total Stock

{formatNumber(totalQty)}

{/* RIGHT */}

{/* FILTER */}

({ label: l.name, value: l.id, })), ]} />

setLimit(Number(val))} options={[ { label: "10", value: "10" }, { label: "20", value: "20" }, { label: "50", value: "50" }, { label: "100", value: "100" }, ]} />

{/* ACTION BUTTONS */}

{/* Tambah */} {/* Pilih Semua */} {/* Clear */} {/* Print Pilihan */} {/* Print Semua */}

{/* ================= MODAL PILIH METODE ================= */} {showAddOption && (

🌾 Pilih Metode Input

{/* MANUAL */} {/* QR */}

)} {/* ================= MODAL PILIH GUDANG ================= */} {showSelectLocation && (

🏬 Pilih Gudang

({ label: l.name, value: l.id, }))} />

)} {/* ================= LOADING ================= */} {loading && (

🌱 Loading stok...

)} {/* */} {/* ================= PAGINATION ================= */}

Page {page} / {totalPage}

); } /* ================= INPUT ================= */ function Input({ value, onChange, placeholder }: any) { return ( onChange(e.target.value)} placeholder={placeholder} className="px-3 py-2 rounded-xl border border-green-200 text-sm focus:outline-none focus:ring-2 focus:ring-green-400 bg-white/80 shadow-inner backdrop-blur-md" /> ); }