Changes done in ui screens
This commit is contained in:
@@ -9,7 +9,8 @@ import {
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
import { consumptionLedger, stockItems } from "@/constants/constant";
|
||||
import Table from "@/components/common/dataTable";
|
||||
import { consumptionHeaders, consumptionRows, inventoryHeaders, inventoryRows, } from "@/constants/tabledata";
|
||||
|
||||
|
||||
|
||||
@@ -104,87 +105,19 @@ export default function InventoryPortal() {
|
||||
<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">
|
||||
<div className=" border border-slate-800/80 rounded-lg ">
|
||||
<div className="flex items-center justify-between px-4
|
||||
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>
|
||||
<Table headers={inventoryHeaders} rows={inventoryRows} />
|
||||
</div>
|
||||
|
||||
{/* RIGHT TABLE: CONSUMPTION LEDGER */}
|
||||
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
|
||||
<div className="h-full w-full 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">
|
||||
@@ -192,54 +125,7 @@ export default function InventoryPortal() {
|
||||
</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>
|
||||
<Table headers={consumptionHeaders} rows={consumptionRows} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user