shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table constant data is added and Compliance Safety completed

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-24 18:05:07 +05:30
parent 5a2ae769d8
commit a5394823f3
33 changed files with 3728 additions and 1629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
components/dashboard/operations/energy.tsx
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>