291 lines
13 KiB
TypeScript
291 lines
13 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Leaf,
|
|
Activity,
|
|
ClipboardCheck,
|
|
Star,
|
|
BarChart2,
|
|
Plus,
|
|
ShieldCheck,
|
|
Clock
|
|
} from "lucide-react";
|
|
import Button from "@/components/common/button";
|
|
import StatCard from "@/components/common/dashStatCard";
|
|
import NavigationTabs from '@/components/common/tabs';
|
|
|
|
// Card Components
|
|
import { Card } from "@/components/common/cardWrapper";
|
|
import { CardHeader } from "@/components/common/cardHeader";
|
|
|
|
// Custom BarChart Import
|
|
import BarChart from "@/components/charts/barchart";
|
|
|
|
import InfoBanner from '@/components/common/infoBanner';
|
|
import { sustainabilitytabs } from '@/constants/constant';
|
|
|
|
// Sample Bar Chart Data for Carbon Emissions
|
|
const CARBON_EMISSIONS_DATA = [
|
|
{ month: 'Jan', height: 'h-32' },
|
|
{ month: 'Feb', height: 'h-32' },
|
|
{ month: 'Mar', height: 'h-32' },
|
|
{ month: 'Apr', height: 'h-32' },
|
|
{ month: 'May', height: 'h-32' },
|
|
{ month: 'Jun', height: 'h-28' },
|
|
];
|
|
|
|
// Emission Sources Progress Data
|
|
const EMISSION_SOURCES = [
|
|
{ name: "Purchased electricity", percentage: "58%", width: "w-[58%]", color: "bg-sky-400" },
|
|
{ name: "DG / fuel combustion", percentage: "21%", width: "w-[21%]", color: "bg-amber-400" },
|
|
{ name: "Refrigerants (fugitive)", percentage: "12%", width: "w-[12%]", color: "bg-rose-400" },
|
|
{ name: "Water & waste", percentage: "9%", width: "w-[9%]", color: "bg-slate-400" },
|
|
];
|
|
|
|
export default function SustainabilityPortal() {
|
|
const [activeTab, setActiveTab] = useState<string>('ESG Data Hub');
|
|
|
|
return (
|
|
<div className="my-15 text-slate-100 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 uppercase font-mono">
|
|
<span className="text-teal-400">Apple One — HQ Tower</span>
|
|
<span className="text-slate-500">•</span>
|
|
<span className="text-slate-500">INTELLIGENCE</span>
|
|
<span className="text-slate-500">•</span>
|
|
<span className="text-slate-500">SUSTAINABILITY</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
|
ESG One — sustainability platform
|
|
</h1>
|
|
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
|
Every environmental, social and governance metric — carbon, energy, water, waste, safety, DEI, compliance — consolidated on one live platform with framework-ready reporting.
|
|
</p>
|
|
</div>
|
|
|
|
{/* --- HEADER BUTTONS --- */}
|
|
<div className="flex items-center gap-3 self-start md:mt-10">
|
|
<Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
|
<BarChart2 className="w-4 h-4 text-slate-300" />
|
|
<span>Framework reports</span>
|
|
</Button>
|
|
|
|
<Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
|
|
<Plus className="w-4 h-4 stroke-[3]" />
|
|
<span>New target</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- STAT CARDS --- */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
{/* Card 1: 118 t */}
|
|
<StatCard
|
|
variant="icon"
|
|
title=""
|
|
value="118 t"
|
|
icon={Leaf}
|
|
badgeText="-6% vs avg"
|
|
badgeClassName="text-emerald-400 font-mono text-xs"
|
|
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
|
subtitle="CO₂e this month · Scope 1+2"
|
|
/>
|
|
|
|
{/* Card 2: 214 */}
|
|
<StatCard
|
|
variant="icon"
|
|
title=""
|
|
value="214"
|
|
icon={Activity}
|
|
badgeText="live"
|
|
badgeClassName="text-slate-400 lowercase font-mono text-xs"
|
|
iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
|
|
subtitle="Live data streams · meters + IoT"
|
|
/>
|
|
|
|
{/* Card 3: 5 */}
|
|
<StatCard
|
|
variant="icon"
|
|
title=""
|
|
value="5"
|
|
icon={ClipboardCheck}
|
|
badgeText="ready"
|
|
badgeClassName="text-teal-400 lowercase font-mono text-xs"
|
|
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
|
subtitle="Frameworks ready · GRI, BRSR, CSRD..."
|
|
/>
|
|
|
|
{/* Card 4: B+ */}
|
|
<StatCard
|
|
variant="icon"
|
|
title=""
|
|
value="B+"
|
|
icon={Star}
|
|
badgeText="improving"
|
|
badgeClassName="text-amber-400 lowercase font-mono text-xs"
|
|
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
|
subtitle="ESG rating · on track to A-"
|
|
/>
|
|
</div>
|
|
|
|
{/* --- NAVIGATION TABS --- */}
|
|
<NavigationTabs
|
|
tabs={sustainabilitytabs}
|
|
activeTab={activeTab}
|
|
onTabChange={setActiveTab}
|
|
className="mb-4"
|
|
/>
|
|
|
|
{/* --- ESG CARDS SECTION BELOW TABS --- */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
{/* Environmental Card */}
|
|
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
|
|
<CardHeader title="Environmental" subtitle="metered · live" />
|
|
<div className="mt-4 space-y-3.5 text-xs">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Energy</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">1.42 GWh</span>
|
|
<span className="text-emerald-400">-4.2%</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Water</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">18,400 kL</span>
|
|
<span className="text-emerald-400">-2.8%</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Waste diverted</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">61%</span>
|
|
<span className="text-emerald-400">+5.0%</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Refrigerant leaks</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">2 events</span>
|
|
<span className="text-amber-400">+1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Social Card */}
|
|
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
|
|
<CardHeader title="Social" subtitle="people & occupants" />
|
|
<div className="mt-4 space-y-3.5 text-xs">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Safety · LTIFR</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">0.42</span>
|
|
<span className="text-emerald-400">-0.11</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Training hours</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">1,240</span>
|
|
<span className="text-emerald-400">+180</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Tenant satisfaction</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">4.4 / 5</span>
|
|
<span className="text-emerald-400">+0.2</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Workforce diversity</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">34%</span>
|
|
<span className="text-emerald-400">+2%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Governance Card */}
|
|
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
|
|
<CardHeader title="Governance" subtitle="compliance & ethics" />
|
|
<div className="mt-4 space-y-3.5 text-xs">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Statutory compliance</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">98%</span>
|
|
<span className="text-teal-400">2 open</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Audit findings closed</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">91%</span>
|
|
<span className="text-teal-400">on time</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Vendor code-of-conduct</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">87%</span>
|
|
<span className="text-amber-400">signed</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300 font-medium">Data-privacy incidents</span>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-white font-bold">0</span>
|
|
<span className="text-emerald-400">90 days</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* --- CARBON EMISSIONS BAR CHART & EMISSION SOURCES SECTION --- */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
|
|
{/* Left: Carbon Emissions BarChart */}
|
|
<div className="lg:col-span-7">
|
|
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
|
|
<CardHeader title="Carbon emissions · tCO₂e" subtitle="2026 · trending down" />
|
|
<div className="mt-6">
|
|
<BarChart data={CARBON_EMISSIONS_DATA} />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right: Emission Sources */}
|
|
<div className="lg:col-span-5">
|
|
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
|
|
<CardHeader title="Emission sources" subtitle="drill down by site / meter" />
|
|
<div className="mt-5 space-y-4">
|
|
{EMISSION_SOURCES.map((source, idx) => (
|
|
<div key={idx} className="flex items-center justify-between text-xs gap-3">
|
|
<span className="text-slate-300 w-36 leading-snug font-medium">{source.name}</span>
|
|
<div className="flex-1 h-2 rounded-full bg-[#101e30] overflow-hidden">
|
|
<div className={`h-2 rounded-full ${source.color} ${source.width}`} />
|
|
</div>
|
|
<span className="font-mono font-bold text-white w-10 text-right">{source.percentage}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-[11px] text-[#596980] mt-6 pt-3 border-t border-[#132235]/60 leading-relaxed">
|
|
Every figure traces back to a meter, sensor or signed record — audit-ready by construction.
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<InfoBanner
|
|
boldText='One platform:'
|
|
normalText='E, S and G metrics share the same live data spine as operations — a chiller repair updates energy, refrigerant and compliance records in the same thread.'
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
} |