table constant data is added and Compliance Safety completed

This commit is contained in:
2026-07-24 18:05:07 +05:30
parent 5a2ae769d8
commit a5394823f3
33 changed files with 3728 additions and 1629 deletions

View File

@@ -1,92 +1,13 @@
import {
Package,
AlertTriangle,
Activity,
FileText,
LayoutGrid,
Plus
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import Table from "@/components/common/dataTable";
import { meterHeaders, meterRows, readingHeaders, readingRows } from "@/constants/tabledata";
export default function EnergyPortal() {
const metersList = [
{
meter: "MTR-1",
name: "Electricity main 1",
location: "Pump room",
type: "Electricity",
mf: "1",
},
{
meter: "MTR-2",
name: "Water main 2",
location: "Main LT panel",
type: "Water",
mf: "10",
},
{
meter: "MTR-3",
name: "Diesel main 3",
location: "DG room",
type: "Diesel",
mf: "100",
},
{
meter: "MTR-4",
name: "Electricity main 4",
location: "Block riser",
type: "Electricity",
mf: "1",
},
{
meter: "MTR-5",
name: "Water main 5",
location: "DG room",
type: "Water",
mf: "1",
},
];
const latestReadings = [
{
meter: "MTR-1",
prev: "40.00",
current: "58.00",
cons: "18.0",
uom: "kWh",
},
{
meter: "MTR-2",
prev: "49.00",
current: "69.00",
cons: "200.0",
uom: "kL",
},
{
meter: "MTR-3",
prev: "58.00",
current: "80.00",
cons: "2200.0",
uom: "L",
},
{
meter: "MTR-4",
prev: "67.00",
current: "91.00",
cons: "24.0",
uom: "kWh",
},
{
meter: "MTR-5",
prev: "76.00",
current: "102.00",
cons: "26.0",
uom: "kL",
},
];
return (
<div className="text-slate-100 mt-15 font-sans">
@@ -126,109 +47,9 @@ export default function EnergyPortal() {
<div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-start">
{/* LEFT TABLE: METER MASTER */}
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
<div className="flex items-center justify-between px-3 py-2 border-b border-slate-800/80">
<h2 className="text-base font-semibold text-white">Meter master</h2>
<span className="text-xs font-mono text-slate-500">5 meters</span>
</div>
<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">Meter</th>
<th className="py-3 px-4">Name</th>
<th className="py-3 px-4">Location</th>
<th className="py-3 px-4">Type</th>
<th className="py-3 px-4">MF</th>
<th className="py-3 px-4 text-right"></th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/40">
{metersList.map((row, index) => {
return (
<tr
key={index}
className="transition-colors hover:bg-slate-800/30"
>
<td className="py-3 px-4 font-mono text-teal-400 font-semibold text-xs whitespace-nowrap">
{row.meter}
</td>
<td className="py-3 px-4 font-semibold text-slate-100 whitespace-nowrap">
{row.name}
</td>
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
{row.location}
</td>
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
{row.type}
</td>
<td className="py-3 px-4 font-semibold text-slate-200 whitespace-nowrap">
{row.mf}
</td>
<td className="py-3 px-4 text-right">
<div className="flex items-center justify-end gap-1.5">
<button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
Reading
</button>
<button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
QR
</button>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
{/* RIGHT TABLE: LATEST READINGS */}
<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">Latest readings</h2>
<span className="text-xs font-mono text-slate-500 lowercase">
tap a meter for history
</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">Meter</th>
<th className="py-3 px-4">Prev</th>
<th className="py-3 px-4">Current</th>
<th className="py-3 px-4">Cons.</th>
<th className="py-3 px-4">UOM</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/40">
{latestReadings.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.meter}
</td>
<td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
{row.prev}
</td>
<td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
{row.current}
</td>
<td className="py-3 px-4 font-semibold text-teal-400 text-xs whitespace-nowrap">
{row.cons}
</td>
<td className="py-3 px-4 font-semibold text-slate-100 text-xs whitespace-nowrap">
{row.uom}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<Table headers={meterHeaders} rows={meterRows}/>
{/* Right table */}
<Table headers={readingHeaders} rows={readingRows}/>
</div>

View File

@@ -19,134 +19,14 @@ import NavigationTabs from "@/components/common/tabs";
import { equipmentTabs } from "@/constants/constant";
import { useState } from "react";
import StatCard from "@/components/common/dashStatCard";
import { equipmentheaders, equipmentrows } from "@/constants/tabledata";
const headers = [
"Code",
"Equipment",
"Group",
"Block · Floor",
"Service Provider",
"Criticality",
"PPM Status",
"Actions",
];
const Badge = ({
text,
color,
}: {
text: string;
color: string;
}) => (
<span
className={`inline-flex items-center rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${color}`}
>
<span className="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
{text}
</span>
);
const ActionButtons = () => (
<div className="flex justify-center gap-1.5">
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
<FileText size={14} />
</button>
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
<Pencil size={14} />
</button>
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
<LayoutGrid size={14} />
</button>
</div>
);
export default function EquipmentPortal() {
const [activeTab, setActiveTab] = useState<string>("Site-Wise Equipment");
const rows = [
[
<span className="font-semibold text-teal-400">APP-1100</span>,
<span className="font-bold text-slate-100">Cooling Tower</span>,
"Electrical",
"Block 1 · 2",
"Blue Star",
"Important",
<Badge text="Working" color="bg-amber-950/60 text-amber-400 border border-amber-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1103</span>,
<span className="font-bold text-slate-100">Air Handling Unit</span>,
"Plumbing",
"Tower A · 1",
"Blue Star",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1106</span>,
<span className="font-bold text-slate-100">VRV Outdoor</span>,
"Electrical",
"Tower A · G",
"Voltas",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1109</span>,
<span className="font-bold text-slate-100">VRV Outdoor</span>,
"HVAC",
"Tower A · 1",
"Voltas",
"Normal",
<Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1112</span>,
<span className="font-bold text-slate-100">Air Handling Unit</span>,
"HVAC",
"Tower A · G",
"In-house",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1115</span>,
<span className="font-bold text-slate-100">Air Handling Unit</span>,
"Electrical",
"Tower A · 2",
"Voltas",
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1118</span>,
<span className="font-bold text-slate-100">Chiller</span>,
"Electrical",
"Block 1 · 1",
"In-house",
"Important",
<Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
<ActionButtons />,
],
[
<span className="font-semibold text-teal-400">APP-1121</span>,
<span className="font-bold text-slate-100">Cooling Tower</span>,
"Plumbing",
"Tower A · 1",
"Blue Star",
"Normal",
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
<ActionButtons />,
],
];
return (
<div className="my-15 text-slate-100 font-sans ">
@@ -290,7 +170,7 @@ export default function EquipmentPortal() {
{/* Data Table */}
<div className="mt-4">
<Table headers={headers} rows={rows} />
<Table headers={equipmentheaders} rows={equipmentrows} />
</div>
{/* Info Banner */}

View File

@@ -16,289 +16,13 @@ import StatCard from "@/components/common/dashStatCard";
import Table from "@/components/common/dataTable";
import NavigationTabs from '@/components/common/tabs';
import { helpdeskTtabs } from '@/constants/constant';
import { helpdeskheaders, helpdeskrows } from '@/constants/tabledata';
const StatusBadge = ({
text,
color,
}: {
text: string;
color: string;
}) => (
<span
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
>
<span className="h-1.5 w-1.5 rounded-full bg-current" />
{text}
</span>
);
const ActionButtons = ({ active }: { active: boolean }) => (
<div className="flex justify-center items-center gap-1">
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
<Pencil size={13} />
</Button>
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
<List size={13} />
</Button>
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
<ShieldCheck size={13} />
</Button>
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
<QrCode size={13} />
</Button>
<Button
className={`flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 hover:bg-slate-800 transition ${
active ? "text-red-400" : "text-emerald-400"
}`}
>
<Power size={13} />
</Button>
</div>
);
const headers = [
"",
"Block",
"Floor",
"Zone",
"Department",
"Location",
"Window",
"TAT",
"Sched.",
"Approval",
"Status",
"Actions",
];
const checkbox = (
<input
type="checkbox"
className="h-4 w-4 appearance-none rounded border border-slate-600 bg-slate-700 checked:bg-slate-500 checked:border-slate-500 cursor-pointer"
/>
);
const rows = [
[
checkbox,
"Block 2",
"1",
"Z2",
"HVAC",
<span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
<span className="font-mono text-xs whitespace-nowrap">01:5618:00</span>,
"60m",
"4",
<span className="text-emerald-400 font-semibold whitespace-nowrap"> Yes</span>,
<StatusBadge
text="Inactive"
color="bg-slate-700/50 text-slate-400"
/>,
<ActionButtons active={false} />,
],
[
checkbox,
"Block 1",
"2",
"Z1",
"Inspection work",
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
<span className="font-mono text-xs whitespace-nowrap">01:5623:59</span>,
"360m",
"6",
<span className="text-slate-500"></span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
[
checkbox,
"Block 2",
"G",
"N",
"Inspection work",
<span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0023:59</span>,
"360m",
"4",
<span className="text-emerald-400 font-semibold whitespace-nowrap"> Yes</span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
[
checkbox,
"Block 1",
"2",
"Z2",
"Electrical",
<span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0018:00</span>,
"360m",
"4",
<span className="text-slate-500"></span>,
<StatusBadge
text="Inactive"
color="bg-slate-700/50 text-slate-400"
/>,
<ActionButtons active={false} />,
],
[
checkbox,
"Block 2",
"3",
"Z1",
"Housekeeping",
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0018:00</span>,
"20m",
"8",
<span className="text-emerald-400 font-semibold whitespace-nowrap"> Yes</span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
[
checkbox,
"Block 1",
"3",
"Z1",
"Electrical",
<span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0017:30</span>,
"20m",
"8",
<span className="text-slate-500"></span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
[
checkbox,
"Block 2",
"1",
"Z2",
"HVAC",
<span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
<span className="font-mono text-xs whitespace-nowrap">01:5618:00</span>,
"60m",
"4",
<span className="text-emerald-400 font-semibold whitespace-nowrap"> Yes</span>,
<StatusBadge
text="Inactive"
color="bg-slate-700/50 text-slate-400"
/>,
<ActionButtons active={false} />,
],
[
checkbox,
"Block 1",
"2",
"Z1",
"Inspection work",
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
<span className="font-mono text-xs whitespace-nowrap">01:5623:59</span>,
"360m",
"6",
<span className="text-slate-500"></span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
[
checkbox,
"Block 2",
"G",
"N",
"Inspection work",
<span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0023:59</span>,
"360m",
"4",
<span className="text-emerald-400 font-semibold whitespace-nowrap"> Yes</span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
[
checkbox,
"Block 1",
"2",
"Z2",
"Electrical",
<span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0018:00</span>,
"360m",
"4",
<span className="text-slate-500"></span>,
<StatusBadge
text="Inactive"
color="bg-slate-700/50 text-slate-400"
/>,
<ActionButtons active={false} />,
],
[
checkbox,
"Block 2",
"3",
"Z1",
"Housekeeping",
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0018:00</span>,
"20m",
"8",
<span className="text-emerald-400 font-semibold whitespace-nowrap"> Yes</span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
[
checkbox,
"Block 1",
"3",
"Z1",
"Electrical",
<span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
<span className="font-mono text-xs whitespace-nowrap">08:0017:30</span>,
"20m",
"8",
<span className="text-slate-500"></span>,
<StatusBadge
text="Active"
color="bg-emerald-500/15 text-emerald-400"
/>,
<ActionButtons active />,
],
];
export default function HelpDeskPortal() {
const [activeTab, setActiveTab] = useState<string>('Location');
@@ -425,7 +149,7 @@ export default function HelpDeskPortal() {
{/* --- TABLE CONTAINER --- */}
<div className="mt-4 overflow-x-auto">
<Table headers={headers} rows={rows} />
<Table headers={helpdeskheaders} rows={helpdeskrows} />
</div>
</div>
);

View File

@@ -9,215 +9,13 @@ 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";
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 --- */}

View File

@@ -6,189 +6,12 @@ import NavigationTabs from '@/components/common/tabs';
import { Reqeusttabs,statusFilters } from '@/constants/constant';
import FilterTabs from '@/components/common/roundedFilters';
import Table from '@/components/common/dataTable';
import { requestheaders, requestrows } from '@/constants/tabledata';
const StatusBadge = ({
text,
color,
}: {
text: string;
color: string;
}) => (
<span
className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
>
<span className="h-1.5 w-1.5 rounded-full bg-current" />
{text}
</span>
);
const headers = [
"Request No.",
"Department",
"Issue",
"Location",
"Assignee",
"Source",
"Status",
];
const rows = [
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1009</span>,
"Electrical",
"Lighting out",
"Block 1 · G",
"ME Local",
<span className="font-mono">Line</span>,
<StatusBadge
text="Overdue"
color="bg-red-500/15 text-red-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1016</span>,
"HVAC",
"AHU not cooling",
"Lobby · 1",
"Dhananjay T.",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Registered"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1023</span>,
"HVAC",
"Thermostat fault",
"Block 1 · 1",
"ME Local",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Assigned"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1030</span>,
"HVAC",
"Thermostat fault",
"Block 1 · 1",
"Dhananjay T.",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Working"
color="bg-amber-500/15 text-amber-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1037</span>,
"Civil",
"Glass break",
"Block 1 · 1",
"Local Helpdesk",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Completed"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1044</span>,
"HVAC",
"Chiller alarm",
"Block 1 · 1",
"Dhananjay T.",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Overdue"
color="bg-red-500/15 text-red-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1051</span>,
"Plumbing",
"Water leakage",
"Lobby · 1",
"Local Helpdesk",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Registered"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1058</span>,
"Civil",
"Glass break",
"Block 2 · 2",
"Dhananjay T.",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Assigned"
color="bg-blue-500/15 text-blue-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1065</span>,
"Civil",
"Ceiling crack",
"Lobby · G",
"ME Local",
<span className="font-mono">Line</span>,
<StatusBadge
text="Working"
color="bg-amber-500/15 text-amber-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1072</span>,
"Plumbing",
"Water leakage",
"Block 2 · G",
"TECH Local",
<span className="font-mono">Line</span>,
<StatusBadge
text="Completed"
color="bg-emerald-500/15 text-emerald-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1079</span>,
"Electrical",
"DB switch fault",
"Tower A · 1",
"TECH Local",
<span className="font-mono">Mobile app</span>,
<StatusBadge
text="Overdue"
color="bg-red-500/15 text-red-400"
/>,
],
[
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1086</span>,
"HVAC",
"AHU not cooling",
"Lobby · 3",
"TECH Local",
<span className="font-mono">Walk-in</span>,
<StatusBadge
text="Registered"
color="bg-blue-500/15 text-blue-400"
/>,
],
];
export default function ServiceRequestsPortal() {
const [activeTab, setActiveTab] = useState<string>('TFM Requests');
@@ -251,7 +74,7 @@ export default function ServiceRequestsPortal() {
onChange={setActiveFilter}
/>
<div className='mt-5'>
<Table headers={headers} rows={rows}/>
<Table headers={requestheaders} rows={requestrows}/>
</div>
</div>

View File

@@ -10,121 +10,9 @@ import {
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from "@/components/common/infoBanner";
import { fieldCrewData, vendorData } from '@/constants/constant';
export default function VendorServicePortal() {
const vendorData = [
{
name: "Voltas Ltd",
id: "CTR-700",
scope: "HVAC AMC & breakdown",
rating: "4.6",
sla: "95%",
slaColor: "text-emerald-400",
response: "4.0h",
openJobs: "2",
},
{
name: "Blue Star",
id: "CTR-701",
scope: "Chiller & VRV service",
rating: "4.1",
sla: "88%",
slaColor: "text-amber-400",
response: "1.2h",
openJobs: "2",
},
{
name: "Sterling FM",
id: "CTR-702",
scope: "Integrated FM / soft services",
rating: "3.4",
sla: "94%",
slaColor: "text-emerald-400",
response: "2.4h",
openJobs: "4",
},
{
name: "OTIS Elevators",
id: "CTR-704",
scope: "Elevator AMC",
rating: "4.8",
sla: "95%",
slaColor: "text-emerald-400",
response: "2.8h",
openJobs: "—",
},
{
name: "Sodexo",
id: "CTR-705",
scope: "Soft services & cafeteria",
rating: "4.3",
sla: "90%",
slaColor: "text-amber-400",
response: "2.8h",
openJobs: "1",
},
{
name: "In-house team",
id: "—",
scope: "Day-to-day maintenance",
rating: "4.0",
sla: "93%",
slaColor: "text-amber-400",
response: "3.2h",
openJobs: "3",
},
];
const fieldCrewData = [
{
initials: "RK",
name: "Ravi Kumar",
role: "M&E Technician • Chiller plant",
status: "ON-SITE",
statusType: "onsite",
time: "6.4h today",
},
{
initials: "SI",
name: "Sana Iqbal",
role: "HVAC Engineer • AHU room L7",
status: "ON-SITE",
statusType: "onsite",
time: "6.1h today",
},
{
initials: "MD",
name: "Mohan D.",
role: "Electrician • En route",
status: "EN-ROUTE",
statusType: "enroute",
time: "—",
},
{
initials: "LN",
name: "Lakshmi N.",
role: "Housekeeping Lead • Lobby + L2",
status: "ON-SITE",
statusType: "onsite",
time: "6.7h today",
},
{
initials: "AP",
name: "Arjun P.",
role: "Plumber • Off-site",
status: "OFF-SITE",
statusType: "offsite",
time: "—",
},
{
initials: "FR",
name: "Fatima R.",
role: "BMS Operator • Control room",
status: "ON-SITE",
statusType: "onsite",
time: "7.6h today",
},
];
return (
<div className="my-15 text-slate-100 font-sans">

View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Plus, ShieldCheck, Clock, Check, AlertTriangle, QrCode, FileText, Eye } from 'lucide-react';
import Button from "@/components/common/button";
import { workPermitFilters } from '@/constants/constant';
import { permitsData, workPermitFilters } from '@/constants/constant';
import FilterTabs from '@/components/common/roundedFilters';
import StatCard from '@/components/common/dashStatCard';
import InfoBanner from '@/components/common/infoBanner';
@@ -11,94 +11,9 @@ export default function WorkPermitPortal() {
const [activeFilter, setActiveFilter] = useState<string>('All');
// Permit Data matching the UI
const permitsData = [
{
permit: "PTW-2663",
workingType: "Work at Height",
location: "Atrium void",
contractor: "Blue Star",
validityDate: "Jun 26, 2026",
validityTime: "08:3017:00",
crew: 2,
status: "ACTIVE",
actionText: "Close out",
isHighlighted: false,
},
{
permit: "PTW-2664",
workingType: "Electrical Isolation",
location: "STP wet well",
contractor: "Sterling FM",
validityDate: "Jun 26, 2026",
validityTime: "09:0013:00",
crew: 3,
status: "SUBMITTED",
actionText: "Approve",
isHighlighted: true, // Row with highlight bar
},
{
permit: "PTW-2665",
workingType: "Confined Space",
location: "DG yard",
contractor: "In-house team",
validityDate: "Jun 26, 2026",
validityTime: "14:0018:00",
crew: 4,
status: "APPROVED",
actionText: "Activate",
isHighlighted: false,
},
{
permit: "PTW-2666",
workingType: "Hot Work",
location: "Roof terrace",
contractor: "Voltas Ltd",
validityDate: "Jun 25, 2026",
validityTime: "08:0012:00",
crew: 5,
status: "EXPIRED",
hasViewIconOnly: true,
isHighlighted: false,
},
{
permit: "PTW-2667",
workingType: "Work at Height",
location: "LT panel room",
contractor: "Blue Star",
validityDate: "Jun 25, 2026",
validityTime: "10:0016:00",
crew: 2,
status: "CLOSED",
hasViewIconOnly: true,
isHighlighted: false,
},
{
permit: "PTW-2668",
workingType: "Electrical Isolation",
location: "Chiller plant",
contractor: "Sterling FM",
validityDate: "Jun 26, 2026",
validityTime: "11:0015:00",
crew: 3,
status: "REJECTED",
hasViewIconOnly: true,
isHighlighted: false,
},
{
permit: "PTW-2726",
workingType: "Work at Height",
location: "Atrium void",
contractor: "Blue Star",
validityDate: "Jun 26, 2026",
validityTime: "08:3017:00",
crew: 2,
status: "DRAFT",
actionText: "Submit",
isHighlighted: false,
},
];
const renderStatusBadge = (status: string) => {
const renderStatusBadge = (status: string) => {
switch (status) {
case "ACTIVE":
return (