"use client"; import Link from "next/link"; import { useEffect, useMemo, useState } from "react"; import { motion } from "framer-motion"; import { Select3D } from "../components/Select3D"; import { formatWIB } from "../lib/formatWIB"; import { Search, Plus, RefreshCcw, Warehouse, Boxes, Layers3, MapPinned, Eye, Pencil, CheckCircle2, Ban, Filter, TrendingUp, Package2, Grid3X3, } from "lucide-react"; import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; import Loading from "../components/Loading"; type BinType = "RACK" | "BIN" | "AREA" | "SHELF" | "PALLET"; type LocationBin = { id: number; location_id: number; // tambahkan ini code: string; name: string; type: BinType; is_active: number | boolean; warehouse_name: string; created_at: string; }; export default function LocationBinsPage() { const [loading, setLoading] = useState(true); const [keyword, setKeyword] = useState(""); const [type, setType] = useState("ALL"); const [statuses, setStatus] = useState("ALL"); const [data, setData] = useState([]); const [warehouse, setWarehouse] = useState("ALL"); const [warehouses, setWarehouses] = useState([]); const { data: session, status } = useSession(); const router = useRouter(); const currentUser = session?.user as any; async function loadWarehouses() { try { const res = await fetch("/api/gudang?page=1&limit=999", { cache: "no-store", }); const json = await res.json(); setWarehouses(json.locations || []); } catch (error) { console.error(error); setWarehouses([]); } } 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("/"); return; } loadData(); loadWarehouses(); }, [status]); async function loadData() { try { setLoading(true); const res = await fetch("/api/location-bins", { cache: "no-store", }); const json = await res.json(); setData(json.data || []); } catch (err) { console.error(err); setData([]); } finally { setLoading(false); } } const filtered = useMemo(() => { return data.filter((row) => { const q = keyword.toLowerCase(); const matchKeyword = row.code.toLowerCase().includes(q) || row.name.toLowerCase().includes(q) || row.warehouse_name.toLowerCase().includes(q); const matchType = type === "ALL" ? true : row.type === type; const matchWarehouse = warehouse === "ALL" ? true : String(row.location_id) === warehouse; const active = row.is_active === true || row.is_active === 1; const matchStatus = statuses === "ALL" ? true : statuses === "ACTIVE" ? active : !active; return ( matchKeyword && matchType && matchWarehouse && matchStatus ); }); }, [data, keyword, type, warehouse, statuses]); const stats = useMemo(() => { const active = data.filter( (x) => x.is_active === true || x.is_active === 1 ).length; return { total: data.length, active, inactive: data.length - active, rack: data.filter((x) => x.type === "RACK").length, }; }, [data]); function badgeType(value: string) { const base = "px-3 py-1 rounded-full text-[11px] font-bold border inline-flex items-center gap-1"; switch (value) { case "RACK": return `${base} bg-blue-50 text-blue-700 border-blue-200`; case "BIN": return `${base} bg-emerald-50 text-emerald-700 border-emerald-200`; case "AREA": return `${base} bg-purple-50 text-purple-700 border-purple-200`; case "SHELF": return `${base} bg-amber-50 text-amber-700 border-amber-200`; case "PALLET": return `${base} bg-rose-50 text-rose-700 border-rose-200`; default: return `${base} bg-slate-50 text-slate-700 border-slate-200`; } } function badgeStatus(active: any) { const isActive = active === true || active === 1 || active === "1"; return isActive ? "px-3 py-1 rounded-full text-[11px] font-bold border bg-emerald-50 text-emerald-700 border-emerald-200" : "px-3 py-1 rounded-full text-[11px] font-bold border bg-red-50 text-red-700 border-red-200"; } return (
{/* HERO */} {/* background */}
{/* glow */}
{/* glass card */}
{/* left */}
Area Gudang

Manajemen Area

Kelola rak, bin, shelf, zona pallet dan Area Gudang DSR.

{/* right */}
Area Baru
{/* STATS */}
} gradient="from-sky-500 to-blue-600" /> } gradient="from-emerald-500 to-green-600" /> } gradient="from-rose-500 to-red-600" /> } gradient="from-violet-500 to-purple-600" />
{/* FILTER */} {/* background depth */}
{/*
*/}
{/* Search */}
} value={keyword} onChange={(e: any) => setKeyword(e.target.value)} placeholder="Cari kode, nama, gudang..." />
{/* tambahkan di FILTER SECTION (antara Type dan Status) */}
({ label: `${item.code} - ${item.name}`, value: String(item.id), })), ]} />
{/* Type */}
{/* Status */}
{/* Result */}

Hasil Filter

{filtered.length}

{/* TABLE */} {/* ambient glow */}
{/* main card */}
{/* glossy line */}
{/* header */}

Daftar Area Gudang

Area Gudang di Gudang DSR

Data Langsung
{/* ================= MOBILE CARD ================= */}
{loading ? (
Memuat data...
) : filtered.length === 0 ? (
Data tidak ditemukan
) : ( filtered.map((row, i) => ( {/* nomor row */}
#{i + 1}

Kode

{row.code}

{row.type}

Nama

{row.name}

Gudang

{row.warehouse_name}

Status

{row.is_active ? "AKTIF" : "NONAKTIF"}

Dibuat

{formatWIB(row.created_at)}

Detail Edit
)) )}
{/* ================= DESKTOP TABLE ================= */}
{loading ? ( ) : filtered.length === 0 ? ( ) : ( filtered.map((row, i) => ( {/* nomor row */} )) )}
No Kode Nama Gudang Tipe Status Dibuat Aksi
Memuat data...
Data tidak ditemukan
{i + 1} {row.code} {row.name}
{row.warehouse_name}
{row.type} {row.is_active ? "AKTIF" : "NONAKTIF"} {formatWIB(row.created_at)}
); } function GlassInput({ icon, ...props }: any) { return (
{icon}
); } function FilterSelect({ value, onChange, options }: any) { return (
); } function Card({ title, value, icon, gradient, }: { title: string; value: number; icon: React.ReactNode; gradient: string; }) { return (

{title}

{value}

{icon}
); }