109 lines
4.6 KiB
TypeScript
109 lines
4.6 KiB
TypeScript
import { Building2, ShieldCheck, Database, Leaf, FileSpreadsheet } from "lucide-react";
|
|
import StatCard from "@/utils/dashStatCard";
|
|
import { energyData } from "@/constants/constant";
|
|
import BarChart from "@/utils/barchart";
|
|
import InfoBanner from "@/utils/infoBanner";
|
|
import Button from "@/utils/button";
|
|
import { ProgressBarRow } from "@/utils/progressBarRow";
|
|
|
|
// Import your custom Card components
|
|
import { Card } from "@/utils/cardWrapper";
|
|
import { CardHeader } from "@/utils/cardHeader";
|
|
|
|
export default function BuildingOwnerPortal() {
|
|
return (
|
|
<div className="mt-20 font-sans antialiased">
|
|
|
|
{/* --- HEADER SECTION --- */}
|
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
|
|
<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>Portal</span>
|
|
<span>•</span>
|
|
<span>Building Owner</span>
|
|
</div>
|
|
<h1 className="text-3xl font-extrabold text-white tracking-tight mt-2">
|
|
Building owner portal
|
|
</h1>
|
|
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
|
Portfolio-level benchmarking, property performance, energy-cost outlook and ESG standing for asset owners and investors.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
<Button className="flex items-center
|
|
gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538]
|
|
rounded-xl text-xs font-semibold text-slate-200 transition-colors
|
|
duration-200 shadow-sm self-start md:mt-15">
|
|
<FileSpreadsheet size={14} className="text-slate-400" />
|
|
Portfolio report
|
|
</Button>
|
|
</div>
|
|
|
|
{/* --- ROW 1: STATS GRID --- */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<StatCard
|
|
variant="icon" title="Managed assets" value="8" icon={Building2}
|
|
badgeText="2 sites" badgeClassName="text-slate-500 lowercase font-mono"
|
|
iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
|
|
/>
|
|
<StatCard
|
|
variant="icon" title="Asset availability" value="50%" icon={ShieldCheck}
|
|
badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case"
|
|
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
|
|
/>
|
|
<StatCard
|
|
variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database}
|
|
badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold"
|
|
iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
|
|
/>
|
|
<StatCard
|
|
variant="icon" title="ESG rating" value="B+" icon={Leaf}
|
|
badgeText="improving" badgeClassName="text-emerald-400 font-sans normal-case"
|
|
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
|
|
/>
|
|
</div>
|
|
|
|
{/* --- ROW 2: CHARTS & METRICS SPLIT GRID --- */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6 items-stretch">
|
|
|
|
{/* Left Box: Site Benchmarking Progress Lists (7 Columns) */}
|
|
<div className="lg:col-span-7">
|
|
<Card className="p-5">
|
|
<CardHeader title="Site benchmarking" subtitle="performance index" />
|
|
|
|
<div className="space-y-6 my-4">
|
|
{/* Progress Item 1 */}
|
|
<ProgressBarRow label="HQ Tower" value={18} maxValue={18} />
|
|
{/* Progress Item 2 */}
|
|
<ProgressBarRow label="Annexe" value={13} maxValue={18} />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right Box: Energy Cost Bar Chart integration (5 Columns) */}
|
|
<div className="lg:col-span-5">
|
|
<Card className="p-5 h-full">
|
|
<CardHeader title="Energy cost outlook · ₹L" subtitle="forecast ↓" />
|
|
<hr className="border-[#142538] mb-6" />
|
|
<div className="flex-grow flex flex-col justify-end">
|
|
<BarChart data={energyData} />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* --- BOTTOM INFORMATION VIEW BANNER --- */}
|
|
<div className="mb-20">
|
|
<InfoBanner
|
|
boldText="Owner view:"
|
|
normalText="asset-level benchmarks, property metrics, team performance and predicted energy costs — a remote, read-only window across the whole portfolio."
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
} |