Project structure changes ad new files added in dashboard folders

components/dashboard/operations/inventory.tsx

@@ -0,0 +1,456 @@
+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>
+  );
+}