Project structure changes ad new files added in dashboard folders
This commit is contained in:
237
components/dashboard/operations/energy.tsx
Normal file
237
components/dashboard/operations/energy.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import {
|
||||
Package,
|
||||
AlertTriangle,
|
||||
Activity,
|
||||
FileText,
|
||||
LayoutGrid,
|
||||
Plus
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
|
||||
|
||||
|
||||
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">
|
||||
{/* --- 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>Energy</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Meters & readings
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Meter master with QR identification and reading capture. Consumption is reading
|
||||
× multiplication factor.
|
||||
</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">
|
||||
Print QR
|
||||
</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">
|
||||
Add reading
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* --- TABLES GRID (SIDE-BY-SIDE) --- */}
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user