201 lines
9.2 KiB
TypeScript
201 lines
9.2 KiB
TypeScript
"use client";
|
|
import {
|
|
Zap,
|
|
Leaf,
|
|
AlertTriangle,
|
|
Database,
|
|
Sliders,
|
|
Download,
|
|
} from "lucide-react";
|
|
|
|
import StatCard from "../../common/dashStatCard";
|
|
import Button from "@/components/common/button";
|
|
import InfoBanner from "@/components/common/infoBanner";
|
|
|
|
// Import your custom Card components
|
|
import { Card } from "@/components/common/cardWrapper";
|
|
import { CardHeader } from "@/components/common/cardHeader";
|
|
|
|
export default function EnergyBenchmarkingPortal() {
|
|
return (
|
|
<div className="text-[#8e9bae] font-sans my-15">
|
|
|
|
|
|
|
|
{/* Page Header Section */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<div className="flex items-center gap-2 text-[12px] font-medium tracking-wider text-[#3de0c4]">
|
|
<span>APPLE ONE — HQ TOWER</span>
|
|
<span className="text-gray-600">•</span>
|
|
<span className="text-gray-400">INTELLIGENCE</span>
|
|
<span className="text-gray-600">•</span>
|
|
<span className="text-gray-400">BENCHMARKING</span>
|
|
</div>
|
|
<h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Portfolio energy benchmarking</h1>
|
|
<p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
|
|
Rank every site against a common baseline (EUI, kWh/m²/yr), spotlight the best performer, and quantify the savings if the rest caught up.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
className="flex items-center gap-2 rounded-lg border border-[#1b2a3d] bg-[#0c1626] px-4 py-2 text-xs font-semibold text-white hover:bg-[#132238] transition">
|
|
<Sliders size={14} className="text-[#3de0c4]" />
|
|
Set baseline
|
|
</Button>
|
|
<Button
|
|
className="flex items-center gap-1.5 rounded-lg bg-[#3de0c4] hover:bg-[#34ceb3] px-4 py-2 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
|
|
<Download size={14} strokeWidth={2.5} />
|
|
Export
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- STAT CARD GRID --- */}
|
|
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<StatCard
|
|
variant="icon" title="Portfolio EUI" value="144" icon={Zap}
|
|
badgeText="kWh/m²/yr" badgeClassName="text-[#596980] lowercase text-[11px]"
|
|
iconContainerClassName="bg-[#0d2136] border-[#183350] text-[#3b82f6]"
|
|
/>
|
|
|
|
<StatCard
|
|
variant="icon" title="Best performer" value="Annexe" icon={Leaf}
|
|
badgeText="124 EUI" badgeClassName="text-[#3de0c4] font-semibold text-[11px]"
|
|
iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]"
|
|
/>
|
|
|
|
<StatCard
|
|
variant="icon" title="Highest intensity" value="HQ Tower" icon={AlertTriangle}
|
|
badgeText="163 EUI" badgeClassName="text-[#f87171] font-semibold text-[11px]"
|
|
iconContainerClassName="bg-[#2a1318] border-[#481c24] text-[#f87171]"
|
|
/>
|
|
|
|
<StatCard
|
|
variant="icon" title="Savings if matched" value="₹125k" icon={Database}
|
|
badgeText="best performer" badgeClassName="text-[#3de0c4] font-semibold text-[11px]"
|
|
iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]"
|
|
/>
|
|
</div>
|
|
|
|
{/* --- TWO COLUMNS (SITE BENCHMARK & END-USE BREAKDOWN) --- */}
|
|
<div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
|
|
{/* Left Column: Site Benchmark */}
|
|
<div className="lg:col-span-7">
|
|
<Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl">
|
|
<CardHeader title="Site benchmark" subtitle="vs 150 baseline" />
|
|
|
|
<div className="mt-6 space-y-6">
|
|
{/* Annexe Bar */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-xs font-semibold">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-white">Annexe</span>
|
|
<span className="bg-[#0b2823] text-[#3de0c4] text-[9px] font-bold px-1.5 py-0.5 rounded border border-[#13423a]">BEST</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="font-bold text-[#f59e0b]">124</span>
|
|
<span className="text-[#3de0c4] text-[11px]">-17%</span>
|
|
</div>
|
|
</div>
|
|
<div className="h-2.5 w-full rounded-full bg-[#111e30]">
|
|
<div className="h-2.5 rounded-full bg-[#f59e0b] transition-all duration-500" style={{ width: "70%" }} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* HQ Tower Bar */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-xs font-semibold">
|
|
<span className="text-white">HQ Tower</span>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="font-bold text-[#f87171]">163</span>
|
|
<span className="text-[#f87171] text-[11px]">+9%</span>
|
|
</div>
|
|
</div>
|
|
<div className="h-2.5 w-full rounded-full bg-[#111e30]">
|
|
<div className="h-2.5 rounded-full bg-[#f87171] transition-all duration-500" style={{ width: "90%" }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right Column: End-use Breakdown */}
|
|
<div className="lg:col-span-5">
|
|
<Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl h-full flex flex-col justify-between">
|
|
<div>
|
|
<CardHeader title="End-use breakdown" subtitle="portfolio" />
|
|
|
|
<div className="mt-4 space-y-3.5">
|
|
{/* Item 1 */}
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-[#8e9bae] w-24">HVAC</span>
|
|
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
|
<div className="h-2 rounded-full bg-[#3de0c4]" style={{ width: "52%" }} />
|
|
</div>
|
|
<span className="font-bold text-white w-8 text-right">52%</span>
|
|
</div>
|
|
|
|
{/* Item 2 */}
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-[#8e9bae] w-24">Lighting</span>
|
|
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
|
<div className="h-2 rounded-full bg-[#3b82f6]" style={{ width: "18%" }} />
|
|
</div>
|
|
<span className="font-bold text-white w-8 text-right">18%</span>
|
|
</div>
|
|
|
|
{/* Item 3 */}
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-[#8e9bae] w-24">Plug loads</span>
|
|
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
|
<div className="h-2 rounded-full bg-[#f59e0b]" style={{ width: "14%" }} />
|
|
</div>
|
|
<span className="font-bold text-white w-8 text-right">14%</span>
|
|
</div>
|
|
|
|
{/* Item 4 */}
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-[#8e9bae] w-24">Lifts & pumps</span>
|
|
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
|
<div className="h-2 rounded-full bg-[#10b981]" style={{ width: "11%" }} />
|
|
</div>
|
|
<span className="font-bold text-white w-8 text-right">11%</span>
|
|
</div>
|
|
|
|
{/* Item 5 */}
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-[#8e9bae] w-24">Other</span>
|
|
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
|
<div className="h-2 rounded-full bg-[#475569]" style={{ width: "5%" }} />
|
|
</div>
|
|
<span className="font-bold text-white w-8 text-right">5%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-[11px] text-[#7e8c9f] mt-4 pt-3 border-t border-[#172538]/60 leading-relaxed">
|
|
HVAC dominates intensity — the fastest lever for closing the gap to <span className="font-bold text-white">Annexe</span>.
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/* Footer / Ask AI Floating Banner */}
|
|
<div className="mt-8 relative">
|
|
<InfoBanner
|
|
boldText="How it works:"
|
|
normalText="normalised EUI puts every site on one scale regardless of size. Deviation from baseline flags outliers; replicating the best performer's operating strategy across the portfolio is the quick win."
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
} |