456 lines
15 KiB
TypeScript
456 lines
15 KiB
TypeScript
import {
|
||
Package,
|
||
AlertTriangle,
|
||
Activity,
|
||
FileText,
|
||
LayoutGrid,
|
||
Plus
|
||
} from "lucide-react";
|
||
import Button from "@/components/common/button";
|
||
import StatCard from "@/components/common/dashStatCard";
|
||
import InfoBanner from "@/components/common/infoBanner";
|
||
|
||
|
||
|
||
|
||
export default function InventoryPortal() {
|
||
const stockItems = [
|
||
{
|
||
item: "Cooling tower fan belt",
|
||
group: "HVAC",
|
||
store: "Block Store",
|
||
min: 5,
|
||
presentValue: 8,
|
||
unit: "Gallon",
|
||
status: "COMPLETED",
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
item: "Air filter 24×24",
|
||
group: "HVAC",
|
||
store: "Block Store",
|
||
min: 5,
|
||
presentValue: 2,
|
||
unit: "Nos",
|
||
status: "OVERDUE",
|
||
isHighlighted: true,
|
||
},
|
||
{
|
||
item: "MCB 32A",
|
||
group: "Electrical",
|
||
store: "Block Store",
|
||
min: 5,
|
||
presentValue: 8,
|
||
unit: "Nos",
|
||
status: "COMPLETED",
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
item: "Contactor 40A",
|
||
group: "Electrical",
|
||
store: "Block Store",
|
||
min: 2,
|
||
presentValue: 2,
|
||
unit: "Nos",
|
||
status: "OVERDUE",
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
item: "PVC pipe 1\"",
|
||
group: "Plumbing",
|
||
store: "Main Store",
|
||
min: 3,
|
||
presentValue: 0,
|
||
unit: "Mtr",
|
||
status: "OVERDUE",
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
item: "Submersible pump seal",
|
||
group: "Plumbing",
|
||
store: "Main Store",
|
||
min: 3,
|
||
presentValue: 2,
|
||
unit: "Nos",
|
||
status: "OVERDUE",
|
||
isHighlighted: false,
|
||
},
|
||
{
|
||
item: "Refrigerant R410a",
|
||
group: "HVAC",
|
||
store: "Block Store",
|
||
min: 5,
|
||
presentValue: 0,
|
||
unit: "Kg",
|
||
status: "OVERDUE",
|
||
isHighlighted: false,
|
||
},
|
||
];
|
||
|
||
const consumptionLedger = [
|
||
{
|
||
txn: "TXN-5200",
|
||
item: "Cooling tower fan belt",
|
||
type: "Consume",
|
||
qty: "2 Gallon",
|
||
jobCard: "026/1009",
|
||
date: "Jun 20, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5201",
|
||
item: "MCB 32A",
|
||
type: "Consume",
|
||
qty: "1 Nos",
|
||
jobCard: "026/1016",
|
||
date: "Jun 21, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5202",
|
||
item: "Air filter 24×24",
|
||
type: "Receipt",
|
||
qty: "10 Nos",
|
||
jobCard: "—",
|
||
date: "Jun 22, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5203",
|
||
item: "Submersible pump seal",
|
||
type: "Consume",
|
||
qty: "1 Nos",
|
||
jobCard: "026/1023",
|
||
date: "Jun 23, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5204",
|
||
item: "Air filter 24×24",
|
||
type: "Consume",
|
||
qty: "3 Nos",
|
||
jobCard: "026/1030",
|
||
date: "Jun 24, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5205",
|
||
item: "PVC pipe 1\"",
|
||
type: "Receipt",
|
||
qty: "20 Mtr",
|
||
jobCard: "—",
|
||
date: "Jun 25, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5406",
|
||
item: "Cooling tower fan belt",
|
||
type: "Consume",
|
||
qty: "2 Gallon",
|
||
jobCard: "026/1009",
|
||
date: "Jun 7, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5407",
|
||
item: "MCB 32A",
|
||
type: "Consume",
|
||
qty: "1 Nos",
|
||
jobCard: "026/1016",
|
||
date: "Jun 7, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5200",
|
||
item: "Cooling tower fan belt",
|
||
type: "Consume",
|
||
qty: "2 Gallon",
|
||
jobCard: "026/1009",
|
||
date: "Jun 20, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5201",
|
||
item: "MCB 32A",
|
||
type: "Consume",
|
||
qty: "1 Nos",
|
||
jobCard: "026/1016",
|
||
date: "Jun 21, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5202",
|
||
item: "Air filter 24×24",
|
||
type: "Receipt",
|
||
qty: "10 Nos",
|
||
jobCard: "—",
|
||
date: "Jun 22, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5203",
|
||
item: "Submersible pump seal",
|
||
type: "Consume",
|
||
qty: "1 Nos",
|
||
jobCard: "026/1023",
|
||
date: "Jun 23, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5204",
|
||
item: "Air filter 24×24",
|
||
type: "Consume",
|
||
qty: "3 Nos",
|
||
jobCard: "026/1030",
|
||
date: "Jun 24, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5205",
|
||
item: "PVC pipe 1\"",
|
||
type: "Receipt",
|
||
qty: "20 Mtr",
|
||
jobCard: "—",
|
||
date: "Jun 25, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5406",
|
||
item: "Cooling tower fan belt",
|
||
type: "Consume",
|
||
qty: "2 Gallon",
|
||
jobCard: "026/1009",
|
||
date: "Jun 7, 2026",
|
||
},
|
||
{
|
||
txn: "TXN-5407",
|
||
item: "MCB 32A",
|
||
type: "Consume",
|
||
qty: "1 Nos",
|
||
jobCard: "026/1016",
|
||
date: "Jun 7, 2026",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="my-15 text-slate-100 font-sans">
|
||
{/* --- HEADER SECTION --- */}
|
||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
||
<div>
|
||
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
|
||
<span className="text-teal-400">Apple One — HQ Tower</span>
|
||
<span>•</span>
|
||
<span>Operations</span>
|
||
<span>•</span>
|
||
<span>Inventory</span>
|
||
</div>
|
||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||
Inventory & stock
|
||
</h1>
|
||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||
Stock master with receipt / consume transactions. Consumption posts back to the
|
||
originating request job card; items at or below minimum are flagged for reorder.
|
||
</p>
|
||
</div>
|
||
|
||
{/* --- HEADER BUTTONS --- */}
|
||
<div className="flex items-center gap-2 self-start md:mt-10">
|
||
<Button className="bg-slate-800/80 hover:bg-slate-800 text-white border border-slate-700/60 text-xs px-3 py-2 rounded-md flex items-center gap-2 font-medium">
|
||
<LayoutGrid className="w-4 h-4 text-slate-400" />
|
||
Bulk upload
|
||
</Button>
|
||
<Button className="bg-slate-800/80 hover:bg-slate-800 text-white border border-slate-700/60 text-xs px-3 py-2 rounded-md flex items-center gap-2 font-medium">
|
||
<Plus className="w-4 h-4 text-slate-400" />
|
||
Add item
|
||
</Button>
|
||
<Button className="bg-teal-400 hover:bg-teal-500 text-slate-950 font-semibold text-xs px-3 py-2 rounded-md transition-colors">
|
||
Receive stock
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* --- STAT CARDS --- */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||
{/* Stock items */}
|
||
<StatCard
|
||
variant="icon"
|
||
title="Stock items"
|
||
value="7"
|
||
icon={Package}
|
||
badgeText="tracked"
|
||
badgeClassName="text-slate-400 lowercase font-mono"
|
||
iconContainerClassName="bg-blue-950/40 border-blue-800/30 text-blue-400"
|
||
/>
|
||
|
||
{/* Below minimum */}
|
||
<StatCard
|
||
variant="icon"
|
||
title="Below minimum"
|
||
value="5"
|
||
icon={AlertTriangle}
|
||
badgeText="reorder"
|
||
badgeClassName="text-rose-400 lowercase font-mono"
|
||
iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
|
||
/>
|
||
|
||
{/* Units consumed */}
|
||
<StatCard
|
||
variant="icon"
|
||
title="Units consumed"
|
||
value="17"
|
||
icon={Activity}
|
||
badgeText="this month"
|
||
badgeClassName="text-slate-400 lowercase font-mono"
|
||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||
/>
|
||
|
||
{/* Posted to requests */}
|
||
<StatCard
|
||
variant="icon"
|
||
title="Posted to requests"
|
||
value="10"
|
||
icon={FileText}
|
||
badgeText="linked"
|
||
badgeClassName="text-emerald-400 lowercase font-mono"
|
||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||
/>
|
||
</div>
|
||
|
||
{/* --- TABLES GRID (SIDE-BY-SIDE) --- */}
|
||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-start">
|
||
|
||
{/* LEFT TABLE: STOCK MASTER */}
|
||
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
|
||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/80">
|
||
<h2 className="text-base font-semibold text-white">Stock master</h2>
|
||
<span className="text-xs font-mono text-slate-500">7 items</span>
|
||
</div>
|
||
|
||
{/* Corrected column layout and removed horizontal scrollbar to align with the right UI. */}
|
||
<div className="">
|
||
<table className="w-full h-full text-left text-sm">
|
||
<thead>
|
||
<tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
|
||
<th className="py-3 px-4">Item</th>
|
||
<th className="py-3 px-4">Group</th>
|
||
<th className="py-3 px-4">Store</th>
|
||
<th className="py-3 px-4">Min</th>
|
||
<th className="py-3 px-4">Present</th>
|
||
<th className="py-3 px-4">Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-800/40">
|
||
{stockItems.map((row, index) => {
|
||
const isOverdue = row.status === "OVERDUE";
|
||
return (
|
||
<tr
|
||
key={index}
|
||
className={`transition-colors relative ${
|
||
row.isHighlighted
|
||
? "bg-[#0e2238]"
|
||
: "hover:bg-slate-800/30"
|
||
}`}
|
||
>
|
||
<td className="py-3 px-4 font-semibold text-slate-100 relative">
|
||
{row.isHighlighted && (
|
||
<div className="absolute left-0 top-0 bottom-0 w-[3px] bg-teal-400" />
|
||
)}
|
||
{row.item}
|
||
</td>
|
||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||
{row.group}
|
||
</td>
|
||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||
{row.store}
|
||
</td>
|
||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||
{row.min}
|
||
</td>
|
||
<td className="py-3 px-4 font-semibold whitespace-nowrap">
|
||
<span className={isOverdue ? "text-rose-400" : "text-white"}>
|
||
{row.presentValue}{" "}
|
||
</span>
|
||
<span
|
||
className={`font-mono text-xs ${
|
||
isOverdue ? "text-rose-400" : "text-slate-300"
|
||
}`}
|
||
>
|
||
{row.unit}
|
||
</span>
|
||
</td>
|
||
<td className="py-3 px-4">
|
||
{row.status === "COMPLETED" ? (
|
||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold tracking-wider bg-emerald-950/60 text-emerald-400 border border-emerald-800/30">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
|
||
COMPLETED
|
||
</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold tracking-wider bg-rose-950/40 text-rose-400 border border-rose-900/30">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
|
||
OVERDUE
|
||
</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT TABLE: CONSUMPTION LEDGER */}
|
||
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
|
||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/80">
|
||
<h2 className="text-base font-semibold text-white">Consumption ledger</h2>
|
||
<span className="text-xs font-mono text-slate-500 lowercase">
|
||
posts back to job card
|
||
</span>
|
||
</div>
|
||
|
||
<div>
|
||
<table className="w-full h-full text-left text-sm">
|
||
<thead>
|
||
<tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
|
||
<th className="py-3 px-4">Txn</th>
|
||
<th className="py-3 px-4">Item</th>
|
||
<th className="py-3 px-4">Type</th>
|
||
<th className="py-3 px-4">Qty</th>
|
||
<th className="py-3 px-4">Job Card</th>
|
||
<th className="py-3 px-4">Date</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-slate-800/40">
|
||
{consumptionLedger.map((row, index) => (
|
||
<tr key={index} className="hover:bg-slate-800/30 transition-colors">
|
||
<td className="py-3 px-4 font-mono text-teal-400 font-medium text-xs whitespace-nowrap">
|
||
{row.txn}
|
||
</td>
|
||
<td className="py-3 px-4 font-semibold text-slate-100 max-w-[140px]">
|
||
{row.item}
|
||
</td>
|
||
<td className="py-3 px-4 whitespace-nowrap">
|
||
{row.type === "Consume" ? (
|
||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-950/40 text-amber-300 border border-amber-800/30">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
|
||
Consume
|
||
</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-950/40 text-blue-300 border border-blue-800/30">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
|
||
Receipt
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="py-3 px-4 font-medium text-slate-200 whitespace-nowrap">
|
||
{row.qty}
|
||
</td>
|
||
<td className="py-3 px-4 font-mono text-teal-400 text-xs whitespace-nowrap">
|
||
{row.jobCard}
|
||
</td>
|
||
<td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
|
||
{row.date}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div className="mb-10 mt-10">
|
||
<InfoBanner
|
||
boldText="Post back:"
|
||
normalText="consuming a spare against a TFM request decrements stock and writes a transaction onto that request's job card (shared item, UOM and store masters) — visible in Reports → Stock Consumption and on the request history."
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |