shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table constant data is added and Compliance Safety completed

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-24 18:05:07 +05:30
parent 5a2ae769d8
commit a5394823f3
33 changed files with 3728 additions and 1629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
components/dashboard/compliance/wasteAndEsg.tsx Normal file
View File

@@ -0,0 +1,173 @@
import { useState } from 'react';
import {
Recycle,
Leaf,
Activity,
Check,
BarChart2,
Plus
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from '@/components/common/infoBanner';
import { scheduleItems, wasteStreams } from '@/constants/constant';
export default function WasteESGPortal() {
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">SUSTAINABILITY</span>
<span className="text-slate-500">•</span>
<span className="text-slate-500">WASTE</span>
</div>
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
Waste management
</h1>
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
Waste tracked by stream, recycling rates, collection scheduling and ESG reporting with vendor compliance.
</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>ESG report</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>Log entry</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: Total waste */}
<StatCard
variant="icon"
title="Total this month"
value="2824 kg"
icon={Recycle}
badgeText="5 streams"
badgeClassName="text-slate-400 lowercase font-mono"
iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
/>
{/* Card 2: Diverted rate */}
<StatCard
variant="icon"
title="Diverted from landfill"
value="54%"
icon={Leaf}
badgeText="recycled"
badgeClassName="text-emerald-400 lowercase font-mono"
iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
/>
{/* Card 3: Hazardous waste */}
<StatCard
variant="icon"
title="Hazardous"
value="64 kg"
icon={Activity}
badgeText="manifest"
badgeClassName="text-amber-400 lowercase font-mono"
iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
/>
{/* Card 4: Vendors compliant */}
<StatCard
variant="icon"
title="Vendors compliant"
value="4/4"
icon={Check}
badgeText="SLA met"
badgeClassName="text-emerald-400 lowercase font-mono"
iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
/>
</div>
{/* --- MAIN CONTENT SECTION BELOW STAT CARDS --- */}
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-6">
{/* Waste by Stream Progress Chart */}
<div className="lg:col-span-3 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5 flex flex-col justify-between">
<div className="flex items-center justify-between mb-6">
<h2 className="text-base font-bold text-slate-100">
Waste by stream · kg
</h2>
<span className="text-xs font-mono text-slate-500">
June 2026
</span>
</div>
<div className="space-y-4">
{wasteStreams.map((item, index) => (
<div key={index} className="flex items-center gap-4 text-sm">
<span className="w-44 text-xs font-medium text-slate-300 shrink-0 truncate">
{item.name}
</span>
<div className="relative flex-1 h-2 rounded-full bg-slate-800/60 overflow-hidden">
<div
className={`h-full rounded-full ${item.color}`}
style={{ width: `${item.percentage}%` }}
/>
</div>
<span className="w-12 text-right font-mono text-xs font-bold text-slate-100 shrink-0">
{item.amount}
</span>
</div>
))}
</div>
</div>
{/* Collection Schedule Table */}
<div className="lg:col-span-2 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
<h2 className="text-base font-bold text-slate-100 mb-6">
Collection schedule
</h2>
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<thead>
<tr className="border-b border-slate-800/80 text-[10px] font-bold tracking-wider uppercase font-mono text-slate-400">
<th className="pb-3 pr-2">FREQUENCY</th>
<th className="pb-3 px-2">STREAM</th>
<th className="pb-3 pl-2">VENDOR</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/50 text-xs">
{scheduleItems.map((row, idx) => (
<tr key={idx} className="hover:bg-slate-800/30 transition-colors">
<td className="py-3.5 pr-2 font-mono text-slate-300 font-medium whitespace-nowrap">
{row.frequency}
</td>
<td className="py-3.5 px-2 font-semibold text-slate-100 whitespace-nowrap">
{row.stream}
</td>
<td className="py-3.5 pl-2 text-slate-300 font-medium whitespace-nowrap">
{row.vendor}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
<InfoBanner
boldText='ESG:'
normalText='waste-reduction and recycling metrics feed the Sustainability dashboard and statutory pollution-board reporting — hazardous streams require manifest tracking to disposal.'
/>
</div>
);
}