58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
|
||
import Button from "@/components/common/button";
|
||
|
||
import Table from "@/components/common/dataTable";
|
||
import { meterHeaders, meterRows, readingHeaders, readingRows } from "@/constants/tabledata";
|
||
|
||
|
||
|
||
export default function EnergyPortal() {
|
||
|
||
|
||
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 */}
|
||
<Table headers={meterHeaders} rows={meterRows}/>
|
||
{/* Right table */}
|
||
<Table headers={readingHeaders} rows={readingRows}/>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
);
|
||
} |