76 lines
2.8 KiB
TypeScript
76 lines
2.8 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 my-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-[12px] font-bold tracking-widest text-slate-500 uppercase font-mono">
|
||
<span className="text-teal-400">Apple One — HQ Tower</span>
|
||
<span className='text-gray-600'>•</span>
|
||
<span className='text-gray-400'>Operations</span>
|
||
<span className='text-gray-600'>•</span>
|
||
<span className='text-gray-400'>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>
|
||
|
||
|
||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-start">
|
||
|
||
{/* LEFT TABLE: STOCK MASTER */}
|
||
<div className=" border border-slate-800/80 rounded-lg ">
|
||
<div className="flex items-center justify-between px-4
|
||
py-4 border-b border-slate-800/80">
|
||
<h2 className="text-base font-semibold text-white">Meter Master</h2>
|
||
|
||
</div>
|
||
|
||
{/* Corrected column layout and removed horizontal scrollbar to align with the right UI. */}
|
||
<Table headers={meterHeaders} rows={meterRows}/>
|
||
</div>
|
||
|
||
{/* RIGHT TABLE: CONSUMPTION LEDGER */}
|
||
<div className=" w-full 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>
|
||
|
||
</div>
|
||
|
||
<Table headers={readingHeaders} rows={readingRows}/>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|