286 lines
12 KiB
TypeScript
286 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { apiClient } from "@/lib/api/client";
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Types */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
interface RecentItem {
|
|
id: string;
|
|
time: string;
|
|
direction: "입고" | "출고";
|
|
type: string;
|
|
itemName: string;
|
|
qty: string;
|
|
partnerName: string;
|
|
statusColor: string;
|
|
statusLabel: string;
|
|
}
|
|
|
|
interface KpiData {
|
|
todayInbound: number;
|
|
todayOutbound: number;
|
|
todayTotal: number;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Helpers */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
function getStatusStyle(status: string | null): { color: string; label: string } {
|
|
switch (status) {
|
|
case "완료":
|
|
case "입고완료":
|
|
case "출고완료":
|
|
return { color: "text-green-600 bg-green-50", label: "완료" };
|
|
case "대기":
|
|
return { color: "text-amber-600 bg-amber-50", label: "대기" };
|
|
case "진행중":
|
|
return { color: "text-blue-600 bg-blue-50", label: "진행중" };
|
|
default:
|
|
return { color: "text-gray-600 bg-gray-50", label: status || "대기" };
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Menu Items */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
const MENU_ITEMS = [
|
|
{
|
|
id: "history",
|
|
title: "입출고관리",
|
|
gradient: "linear-gradient(135deg,#3b82f6,#1d4ed8)",
|
|
shadowColor: "rgba(59,130,246,.3)",
|
|
icon: (
|
|
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-7.5a2.25 2.25 0 012.25-2.25H12" />
|
|
</svg>
|
|
),
|
|
href: "/pop/inventory/history",
|
|
},
|
|
{
|
|
id: "adjust",
|
|
title: "재고조정",
|
|
gradient: "linear-gradient(135deg,#f59e0b,#d97706)",
|
|
shadowColor: "rgba(245,158,11,.3)",
|
|
icon: (
|
|
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
|
|
</svg>
|
|
),
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Component */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
export function InventoryHome() {
|
|
const router = useRouter();
|
|
|
|
const [kpi, setKpi] = useState<KpiData>({ todayInbound: 0, todayOutbound: 0, todayTotal: 0 });
|
|
const [recentItems, setRecentItems] = useState<RecentItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
|
|
const [inRes, outRes] = await Promise.all([
|
|
apiClient.get("/receiving/list", { params: { date_from: today, date_to: today } }),
|
|
apiClient.get("/outbound/list", { params: { date_from: today, date_to: today } }),
|
|
]);
|
|
|
|
const inRows: any[] = inRes.data?.data ?? [];
|
|
const outRows: any[] = outRes.data?.data ?? [];
|
|
|
|
setKpi({
|
|
todayInbound: inRows.length,
|
|
todayOutbound: outRows.length,
|
|
todayTotal: inRows.length + outRows.length,
|
|
});
|
|
|
|
const combined: RecentItem[] = [
|
|
...inRows.map((r: any, idx: number) => {
|
|
const st = getStatusStyle(r.inbound_status);
|
|
return {
|
|
id: `in-${r.detail_id || r.id}-${idx}`,
|
|
time: r.created_date ? new Date(r.created_date).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" }) : "--:--",
|
|
direction: "입고" as const,
|
|
type: r.inbound_type || "입고",
|
|
itemName: r.item_name || r.item_number || "-",
|
|
qty: `${Number(r.inbound_qty || 0).toLocaleString()} ${r.unit || "EA"}`,
|
|
partnerName: r.supplier_name || "-",
|
|
statusColor: st.color,
|
|
statusLabel: st.label,
|
|
};
|
|
}),
|
|
...outRows.map((r: any, idx: number) => {
|
|
const st = getStatusStyle(r.outbound_status);
|
|
return {
|
|
id: `out-${r.id}-${idx}`,
|
|
time: r.created_date ? new Date(r.created_date).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" }) : "--:--",
|
|
direction: "출고" as const,
|
|
type: r.outbound_type || "출고",
|
|
itemName: r.item_name || r.item_code || "-",
|
|
qty: `${Number(r.outbound_qty || 0).toLocaleString()} ${r.unit || "EA"}`,
|
|
partnerName: r.customer_name || "-",
|
|
statusColor: st.color,
|
|
statusLabel: st.label,
|
|
};
|
|
}),
|
|
]
|
|
.sort((a, b) => b.time.localeCompare(a.time))
|
|
.slice(0, 5);
|
|
|
|
setRecentItems(combined);
|
|
} catch {
|
|
// keep empty
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const handleMenuClick = (item: (typeof MENU_ITEMS)[number]) => {
|
|
if (item.href === "#") {
|
|
alert(`${item.title} 화면은 준비 중입니다.`);
|
|
} else {
|
|
router.push(item.href);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-5">
|
|
{/* Back + Title */}
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => router.push("/pop/home")}
|
|
className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">재고</h1>
|
|
<p className="text-xs text-gray-400 mt-0.5">입출고 현황 및 재고 관리</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
|
|
<div className="grid grid-cols-3 gap-0">
|
|
<KpiCell value={loading ? "-" : kpi.todayInbound.toLocaleString()} label="금일 입고" color="text-blue-600" />
|
|
<KpiCell value={loading ? "-" : kpi.todayOutbound.toLocaleString()} label="금일 출고" color="text-green-600" />
|
|
<KpiCell value={loading ? "-" : kpi.todayTotal.toLocaleString()} label="전체" color="text-gray-900" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Menu Icons */}
|
|
<section>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className="w-1 h-5 rounded-full bg-cyan-500" />
|
|
<h2 className="text-base sm:text-lg font-bold text-gray-900">재고 관리</h2>
|
|
</div>
|
|
<div className="flex flex-wrap justify-start gap-x-5 gap-y-4 sm:gap-x-6 sm:gap-y-5">
|
|
{MENU_ITEMS.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="flex flex-col items-center gap-2 w-16 sm:w-[72px] cursor-pointer group"
|
|
style={{ WebkitTapHighlightColor: "transparent" }}
|
|
onClick={() => handleMenuClick(item)}
|
|
>
|
|
<div
|
|
className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center transition-transform duration-150 group-hover:scale-105 group-active:scale-[0.93]"
|
|
style={{ background: item.gradient, boxShadow: `0 4px 12px ${item.shadowColor}` }}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
<span className="text-[11px] sm:text-xs font-semibold text-gray-700 text-center leading-tight">
|
|
{item.title}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Recent Activity */}
|
|
<section>
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
|
|
<div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-100">
|
|
<h3 className="text-base sm:text-lg font-bold text-gray-900">최근 입출고</h3>
|
|
<span className="text-xs text-gray-400">최근 5건</span>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{loading ? (
|
|
<div className="flex flex-col gap-3 py-2">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex items-center gap-3 p-3">
|
|
<div className="w-[44px] h-4 bg-gray-100 rounded animate-pulse" />
|
|
<div className="flex-1 flex flex-col gap-1.5">
|
|
<div className="h-4 bg-gray-100 rounded w-3/4 animate-pulse" />
|
|
<div className="h-3 bg-gray-50 rounded w-1/2 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : recentItems.length === 0 ? (
|
|
<div className="text-center py-8 text-sm text-gray-400">금일 입출고 내역이 없습니다</div>
|
|
) : (
|
|
recentItems.map((item) => (
|
|
<div key={item.id} className="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors">
|
|
<span className="text-xs font-semibold text-gray-400 min-w-[44px] text-right" style={{ fontVariantNumeric: "tabular-nums" }}>
|
|
{item.time}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full shrink-0 ${item.direction === "입고" ? "text-blue-600 bg-blue-50" : "text-green-600 bg-green-50"}`}>
|
|
{item.direction}
|
|
</span>
|
|
<span className="text-sm font-semibold text-gray-900 truncate">{item.itemName}</span>
|
|
<span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-full shrink-0 ${item.statusColor}`}>
|
|
{item.statusLabel}
|
|
</span>
|
|
</div>
|
|
<div className="text-xs text-gray-400 mt-0.5 truncate">
|
|
{item.type} | {item.partnerName} | {item.qty}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Sub-components */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
function KpiCell({ value, label, color }: { value: string; label: string; color: string }) {
|
|
return (
|
|
<div className="flex flex-col items-center py-2">
|
|
<span
|
|
className={`text-2xl sm:text-3xl font-extrabold leading-none ${color}`}
|
|
style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }}
|
|
>
|
|
{value}
|
|
</span>
|
|
<span className="text-[11px] font-medium text-gray-400 mt-1">{label}</span>
|
|
</div>
|
|
);
|
|
}
|