table constant data is added and Compliance Safety completed
This commit is contained in:
111
components/dashboard/compliance/auditAndSurvey.tsx
Normal file
111
components/dashboard/compliance/auditAndSurvey.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
ClipboardCheck,
|
||||
Clock,
|
||||
AlertTriangle,
|
||||
Activity,
|
||||
CheckSquare,
|
||||
Plus
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { auditheaders, auditrows } from '@/constants/tabledata';
|
||||
|
||||
|
||||
|
||||
|
||||
export default function AuditSurveyPortal() {
|
||||
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">COMPLIANCE</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">AUDIT & SURVEY</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Audit & survey management
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Mobile-based paperless audits and surveys with real-time scoring, findings tracking and a corrective-action workflow.
|
||||
</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">
|
||||
<CheckSquare className="w-4 h-4 text-slate-300" />
|
||||
<span>New survey</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>Start audit</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: Audits closed (Emerald/Green Icon) */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Audits closed"
|
||||
value="4"
|
||||
icon={ClipboardCheck}
|
||||
badgeText="this quarter"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: In progress (Amber/Yellow Icon) */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="In progress"
|
||||
value="5"
|
||||
icon={Clock}
|
||||
badgeText="open"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Total findings (Rose/Red Icon) */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Total findings"
|
||||
value="29"
|
||||
icon={AlertTriangle}
|
||||
badgeText="to action"
|
||||
badgeClassName="text-rose-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Avg audit score (Blue Icon) */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Avg audit score"
|
||||
value="86%"
|
||||
icon={Activity}
|
||||
badgeText="portfolio"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/50 border-blue-800/30 text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
<Table headers={auditheaders} rows={auditrows}/>
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
boldText='Paperless:'
|
||||
normalText='auditors capture findings on mobile (photo + geo-tag), scores compute in real time, and each finding spawns a tracked corrective action with an owner and due date.'
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
110
components/dashboard/compliance/contracts.tsx
Normal file
110
components/dashboard/compliance/contracts.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
FileText,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
Star,
|
||||
BarChart2,
|
||||
Plus
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { contractheaders, contractrows } from '@/constants/tabledata';
|
||||
|
||||
|
||||
|
||||
export default function ContractsPortal() {
|
||||
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 text-emerald-400 uppercase font-mono">
|
||||
<span>Apple One — HQ Tower</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">COMPLIANCE</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500"> Contracts</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Contract management
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Central vendor-contract repository with SLA tracking, renewal alerts, performance scorecards, e-signature and a full audit trail.
|
||||
</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>SLA 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>Dispatch job</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: Active vendors */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Active vendors"
|
||||
value="6"
|
||||
icon={FileText}
|
||||
badgeText="in force"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Avg SLA adherence */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Avg SLA adherence"
|
||||
value="93%"
|
||||
icon={AlertTriangle}
|
||||
badgeText="this month"
|
||||
badgeClassName="text-rose-400 lowercase font-mono font-medium"
|
||||
iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Open field jobs */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Open field jobs"
|
||||
value="12"
|
||||
icon={Clock}
|
||||
badgeText="renew"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Avg response time */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Avg response time"
|
||||
value="2.7h"
|
||||
icon={Star}
|
||||
badgeText="of 5.0"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table headers={contractheaders} rows={contractrows}/>
|
||||
|
||||
<div className="mb-10 mt-10">
|
||||
<InfoBanner
|
||||
boldText="Lifecycle: "
|
||||
normalText="repository → SLA monitoring with breach alerts → vendor scorecards → renewal reminders at 90 / 30 days → e-signature → immutable audit trail of every change."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
205
components/dashboard/compliance/fireAndSafety.tsx
Normal file
205
components/dashboard/compliance/fireAndSafety.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
ShieldCheck,
|
||||
Clock,
|
||||
AlertTriangle,
|
||||
Calendar,
|
||||
Layers,
|
||||
Plus
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { firesafetyheaders, firesafetyrows } from '@/constants/tabledata';
|
||||
import { StatusBadge } from '@/components/common/statusBadge';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default function FireSafetyPortal() {
|
||||
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">COMPLIANCE</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500"> FIRE & SAFETY</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Fire & safety management
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Safety-equipment inspections, drill scheduling, evacuation plans and incident reporting with regulatory compliance tracking.
|
||||
</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">
|
||||
<Layers className="w-4 h-4 text-slate-300" />
|
||||
<span>Evac plans</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>Schedule drill</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: Equipment compliant */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Equipment compliant"
|
||||
value="4/6"
|
||||
icon={ShieldCheck}
|
||||
badgeText="inspected"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono font-medium"
|
||||
iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Inspections due */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Inspections due"
|
||||
value="2"
|
||||
icon={Clock}
|
||||
badgeText="this week"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Open incidents */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Open incidents"
|
||||
value="1"
|
||||
icon={AlertTriangle}
|
||||
badgeText="action"
|
||||
badgeClassName="text-rose-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Next drill */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Next drill"
|
||||
value="Jul 12"
|
||||
icon={Calendar}
|
||||
badgeText="Q3 evacuation"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- MAIN CONTENT LAYOUT --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
{/* Left Column: Safety equipment inspection Table */}
|
||||
<div className="lg:col-span-2 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-base font-bold text-slate-100">
|
||||
Safety equipment inspection
|
||||
</h2>
|
||||
<span className="text-xs font-mono text-slate-500">
|
||||
6 asset classes
|
||||
</span>
|
||||
</div>
|
||||
<Table headers={firesafetyheaders} rows={firesafetyrows} />
|
||||
</div>
|
||||
|
||||
{/* Right Column: Drill schedule & Incidents */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Drill schedule Card */}
|
||||
<div className="rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
|
||||
<h2 className="text-base font-bold text-slate-100 mb-6">
|
||||
Drill schedule
|
||||
</h2>
|
||||
|
||||
<div className="relative pl-6 space-y-6 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-[1px] before:bg-slate-800">
|
||||
{/* Timeline Item 1 */}
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[23px] top-1.5 h-3 w-3 rounded-full border-2 border-teal-400 bg-[#071321]" />
|
||||
<h3 className="text-sm font-bold text-slate-100">
|
||||
Q3 full evacuation drill
|
||||
</h3>
|
||||
<p className="text-xs font-mono text-slate-500 mt-1">
|
||||
Jul 12, 2026 <span className="mx-1">•</span> reserved
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timeline Item 2 */}
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[23px] top-1.5 h-3 w-3 rounded-full border-2 border-teal-400 bg-[#071321]" />
|
||||
<h3 className="text-sm font-bold text-slate-100">
|
||||
Wardens refresher
|
||||
</h3>
|
||||
<p className="text-xs font-mono text-slate-500 mt-1">
|
||||
Jun 30, 2026 <span className="mx-1">•</span> reserved
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timeline Item 3 */}
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[23px] top-1.5 h-3 w-3 rounded-full border-2 border-teal-400 bg-[#071321]" />
|
||||
<h3 className="text-sm font-bold text-slate-100">
|
||||
Q2 drill · 92% turnout
|
||||
</h3>
|
||||
<p className="text-xs font-mono text-slate-500 mt-1">
|
||||
Apr 14, 2026 <span className="mx-1">•</span> completed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Incidents Card */}
|
||||
<div className="rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
|
||||
<h2 className="text-base font-bold text-slate-100 mb-4">
|
||||
Incidents
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Incident 1 */}
|
||||
<div className="flex items-center justify-between py-2 border-b border-slate-800/60 last:border-0">
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-slate-100">
|
||||
Minor smoke · pantry
|
||||
</h3>
|
||||
<p className="text-xs font-mono text-slate-500 mt-1">
|
||||
INC-21 <span className="mx-1">•</span> Jun 18
|
||||
</p>
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="CLOSED"
|
||||
color="bg-slate-800/80 text-slate-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Incident 2 */}
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-slate-100">
|
||||
Extinguisher low pressure
|
||||
</h3>
|
||||
<p className="text-xs font-mono text-slate-500 mt-1">
|
||||
INC-22 <span className="mx-1">•</span> Jun 24
|
||||
</p>
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="OPEN"
|
||||
color="bg-amber-500/15 text-amber-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
166
components/dashboard/compliance/statutoryCompliance.tsx
Normal file
166
components/dashboard/compliance/statutoryCompliance.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Layers,
|
||||
ShieldCheck,
|
||||
CheckSquare,
|
||||
Clock,
|
||||
Search,
|
||||
QrCode,
|
||||
Power,
|
||||
Sparkles,
|
||||
List,
|
||||
Pencil,
|
||||
Plus,
|
||||
} from 'lucide-react';
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import Table from "@/components/common/dataTable";
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import { statutoryheaders, statutoryrows } from '@/constants/tabledata';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default function StatutoryCompliancePortal() {
|
||||
return (
|
||||
/* Increased container padding and max-width auto alignment */
|
||||
<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 text-slate-500 uppercase font-mono">
|
||||
<span className="text-teal-400">Apple One — HQ Tower</span>
|
||||
<span>•</span>
|
||||
<span>Compliance</span>
|
||||
<span>•</span>
|
||||
<span>Statutory</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-extrabold text-white tracking-tight mt-1.5">
|
||||
Statutory compliance tracker
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
|
||||
Centralized register of statutory, regulatory, legal, safety and environmental obligations — with expiry tracking, reminders, document vault and audit trail.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-2.5 self-start md:mt-6">
|
||||
<Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-3.5 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
||||
<Sparkles className="w-4 h-4 text-slate-300" />
|
||||
<span>Reminders</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-1.5 transition-colors">
|
||||
<Plus className="w-4 h-4 stroke-[3]" />
|
||||
<span>New Obligation</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARDS GRID --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Total checklists"
|
||||
value="10"
|
||||
icon={Layers}
|
||||
badgeText="Location set"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/60 border border-blue-800/40 text-blue-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Active"
|
||||
value="7"
|
||||
icon={ShieldCheck}
|
||||
badgeText="of 10"
|
||||
badgeClassName="text-emerald-400 font-mono font-medium"
|
||||
iconContainerClassName="bg-emerald-950/60 border border-emerald-800/40 text-emerald-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Approval set"
|
||||
value="5"
|
||||
icon={CheckSquare}
|
||||
badgeText="workflow"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/50 border border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Avg TAT"
|
||||
value="40m"
|
||||
icon={Clock}
|
||||
badgeText="target"
|
||||
badgeClassName="text-rose-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-rose-950/50 border border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- SEARCH, FILTERS & ACTION BUTTONS --- */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-3 mb-6">
|
||||
{/* Search & Select Filters */}
|
||||
<div className="flex flex-1 flex-wrap items-center gap-2.5 w-full md:w-auto">
|
||||
{/* Search Bar */}
|
||||
<div className="relative flex-1 min-w-[220px] max-w-md">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search obligation, authority, site..."
|
||||
className="w-full bg-[#0b1727] border border-slate-800 rounded-lg pl-9 pr-3 py-2 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-teal-500/50 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category Dropdown */}
|
||||
<select className="bg-[#081321] border border-slate-800/80 rounded-lg px-3 py-2 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#2dd4bf] transition-all">
|
||||
<option value="all">All Categories</option>
|
||||
<option value="fire">Statutory · Fire</option>
|
||||
<option value="lifts">Statutory · Lifts</option>
|
||||
<option value="pressure">Statutory · Pressure</option>
|
||||
<option value="environmental">Environmental</option>
|
||||
<option value="electrical">Statutory · Electrical Legal</option>
|
||||
<option value="health">Health & Safety</option>
|
||||
</select>
|
||||
|
||||
{/* Status Dropdown */}
|
||||
<select className="bg-[#081321] border border-slate-800/80 rounded-lg px-3 py-2 text-xs font-semibold text-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#2dd4bf] transition-all">
|
||||
<option value="all">All status</option>
|
||||
<option value="valid">Valid</option>
|
||||
<option value="due">Due</option>
|
||||
<option value="expired">Expired</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-2 w-full md:w-auto justify-end">
|
||||
<Button className="flex items-center gap-1.5 bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors">
|
||||
<span>Download</span>
|
||||
</Button>
|
||||
|
||||
<Button className="flex items-center gap-1.5 bg-teal-400 hover:bg-teal-300 text-slate-950 font-bold rounded-lg px-3.5 py-2 text-xs transition-colors">
|
||||
<Plus size={15} className="stroke-[3]" />
|
||||
<span>New Obligation</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- TABLE CONTAINER --- */}
|
||||
<div className="mt-5">
|
||||
<Table headers={statutoryheaders} rows={statutoryrows} />
|
||||
</div>
|
||||
<div className="mb-10 mt-5">
|
||||
<InfoBanner
|
||||
boldText="Automated governance: "
|
||||
normalText="each obligation carries a hard expiry; reminders fire at 90 / 30 / 7 days and escalate on breach. Click any row to view its audit history; attach certificates in the document vault; renewals reset the cycle and log to the trail."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
123
components/dashboard/compliance/training.tsx
Normal file
123
components/dashboard/compliance/training.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
ShieldCheck,
|
||||
Clock,
|
||||
AlertTriangle,
|
||||
Calendar,
|
||||
Layers,
|
||||
Plus,
|
||||
GraduationCap,
|
||||
Star,
|
||||
Activity,
|
||||
LayoutGrid
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import Table from '@/components/common/dataTable';
|
||||
import NavigationTabs from '@/components/common/tabs';
|
||||
import { trainingtabs } from '@/constants/constant';
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import { trainingheaders, trainingrows } from '@/constants/tabledata';
|
||||
|
||||
|
||||
|
||||
export default function TrainingPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>('Courses');
|
||||
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">COMPLIANCE</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">TRAINING</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Training & onboarding
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Onboarding checklists, course management, mandatory compliance training and certification tracking with expiry alerts.
|
||||
</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">
|
||||
<LayoutGrid className="w-4 h-4 text-slate-300" />
|
||||
<span>LMS sync</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>Assign course</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: Active courses */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Active courses"
|
||||
value="6"
|
||||
icon={GraduationCap}
|
||||
badgeText="132 enrolments"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Completion rate */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Completion rate"
|
||||
value="78%"
|
||||
icon={Activity}
|
||||
badgeText="overall"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/60 border-teal-800/40 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Mandatory pending */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Mandatory pending"
|
||||
value="2"
|
||||
icon={AlertTriangle}
|
||||
badgeText="chase up"
|
||||
badgeClassName="text-rose-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Certs expiring */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Certs expiring"
|
||||
value="3"
|
||||
icon={Star}
|
||||
badgeText="≤ 60 days"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
</div>
|
||||
<NavigationTabs
|
||||
tabs={trainingtabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
className="mb-4"
|
||||
/>
|
||||
<Table headers={trainingheaders} rows={trainingrows}/>
|
||||
<div className="mb-5 mt-5">
|
||||
<InfoBanner
|
||||
boldText="Compliance: "
|
||||
normalText="mandatory safety courses (fire, height, LOTO) carry renewal cycles — the platform auto-reminds before certification lapses and blocks permit issuance for un-certified staff."
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
173
components/dashboard/compliance/wasteAndEsg.tsx
Normal file
173
components/dashboard/compliance/wasteAndEsg.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -11,193 +11,11 @@ import InfoBanner from "@/components/common/infoBanner";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import Table from "@/components/common/dataTable";
|
||||
import { costInvoiceheaders, costInvoicerows } from "@/constants/tabledata";
|
||||
|
||||
const StatusBadge = ({
|
||||
text,
|
||||
color,
|
||||
}: {
|
||||
text: string;
|
||||
color: string;
|
||||
}) => (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
|
||||
>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-current" />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
const ActionButton = ({ text }: { text: string }) => (
|
||||
<Button className="rounded-lg border border-slate-700/60 bg-[#16243a] px-3 py-1.5 text-sm font-semibold text-slate-300 hover:bg-slate-700 transition">
|
||||
{text}
|
||||
</Button>
|
||||
);
|
||||
|
||||
const headers = [
|
||||
"Invoice",
|
||||
"Client",
|
||||
"Period",
|
||||
"Amount",
|
||||
"Raised",
|
||||
"Due",
|
||||
"Status",
|
||||
"",
|
||||
];
|
||||
|
||||
const rows = [
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9040</span>,
|
||||
<span className="font-semibold text-slate-100">Apple One Corp</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹12.4 L</span>,
|
||||
<span className="font-mono">Jun 5, 2026</span>,
|
||||
<span className="font-mono">Jul 5, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Paid"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<span className="text-slate-500">—</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9041</span>,
|
||||
<span className="font-semibold text-slate-100">Novotel F&B</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹8.6 L</span>,
|
||||
<span className="font-mono">Jun 9, 2026</span>,
|
||||
<span className="font-mono">Jul 9, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Sent"
|
||||
color="bg-amber-500/15 text-amber-400"
|
||||
/>,
|
||||
<ActionButton text="Mark paid" />,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9042</span>,
|
||||
<span className="font-semibold text-slate-100">SRM Estates</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹4.3 L</span>,
|
||||
<span className="font-mono">Jun 13, 2026</span>,
|
||||
<span className="font-mono">Jul 13, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Overdue"
|
||||
color="bg-red-500/15 text-red-400"
|
||||
/>,
|
||||
<ActionButton text="Mark paid" />,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9043</span>,
|
||||
<span className="font-semibold text-slate-100">Local Mart</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹21.0 L</span>,
|
||||
<span className="font-mono">Jun 17, 2026</span>,
|
||||
<span className="font-mono">Jul 17, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Paid"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<span className="text-slate-500">—</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9044</span>,
|
||||
<span className="font-semibold text-slate-100">Regus Spaces</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹6.8 L</span>,
|
||||
<span className="font-mono">Jun 21, 2026</span>,
|
||||
<span className="font-mono">Jul 21, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Draft"
|
||||
color="bg-slate-700/60 text-slate-400"
|
||||
/>,
|
||||
<ActionButton text="Send" />,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9105</span>,
|
||||
<span className="font-semibold text-slate-100">Apple One Corp</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹12.4 L</span>,
|
||||
<span className="font-mono">Jun 5, 2026</span>,
|
||||
<span className="font-mono">Jul 5, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Sent"
|
||||
color="bg-amber-500/15 text-amber-400"
|
||||
/>,
|
||||
<ActionButton text="Mark paid" />,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9106</span>,
|
||||
<span className="font-semibold text-slate-100">Novotel F&B</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹8.6 L</span>,
|
||||
<span className="font-mono">Jun 9, 2026</span>,
|
||||
<span className="font-mono">Jul 9, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Draft"
|
||||
color="bg-slate-700/60 text-slate-400"
|
||||
/>,
|
||||
<ActionButton text="Send" />,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9107</span>,
|
||||
<span className="font-semibold text-slate-100">SRM Estates</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹4.3 L</span>,
|
||||
<span className="font-mono">Jun 13, 2026</span>,
|
||||
<span className="font-mono">Jul 13, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Draft"
|
||||
color="bg-slate-700/60 text-slate-400"
|
||||
/>,
|
||||
<ActionButton text="Send" />,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9108</span>,
|
||||
<span className="font-semibold text-slate-100">Local Mart</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹21.0 L</span>,
|
||||
<span className="font-mono">Jun 17, 2026</span>,
|
||||
<span className="font-mono">Jul 17, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Paid"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<span className="text-slate-500">—</span>,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9107</span>,
|
||||
<span className="font-semibold text-slate-100">SRM Estates</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹4.3 L</span>,
|
||||
<span className="font-mono">Jun 13, 2026</span>,
|
||||
<span className="font-mono">Jul 13, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Draft"
|
||||
color="bg-slate-700/60 text-slate-400"
|
||||
/>,
|
||||
<ActionButton text="Send" />,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">INV-9108</span>,
|
||||
<span className="font-semibold text-slate-100">Local Mart</span>,
|
||||
"Jun 2026",
|
||||
<span className="font-semibold">₹21.0 L</span>,
|
||||
<span className="font-mono">Jun 17, 2026</span>,
|
||||
<span className="font-mono">Jul 17, 2026</span>,
|
||||
<StatusBadge
|
||||
text="Paid"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<span className="text-slate-500">—</span>,
|
||||
],
|
||||
];
|
||||
export default function CostInvoicePortal() {
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
@@ -284,7 +102,7 @@ export default function CostInvoicePortal() {
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<Table headers={headers} rows={rows}/>
|
||||
<Table headers={costInvoiceheaders} rows={costInvoicerows}/>
|
||||
</div>
|
||||
{/* Info Banner */}
|
||||
<div className="my-8">
|
||||
|
||||
@@ -5,123 +5,17 @@ import NavigationTabs from '@/components/common/tabs';
|
||||
import { reportFilters, reporttabs, Reqeusttabs, statusFilters } from '@/constants/constant';
|
||||
import FilterTabs from '@/components/common/roundedFilters';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { reportheaders, reportrows } from '@/constants/tabledata';
|
||||
|
||||
|
||||
const StatusBadge = ({
|
||||
text,
|
||||
color,
|
||||
}: {
|
||||
text: string;
|
||||
color: string;
|
||||
}) => (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
|
||||
>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-current" />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
const headers = [
|
||||
"Code",
|
||||
"Equipment",
|
||||
"Group",
|
||||
"Block · Floor",
|
||||
"Service Provider",
|
||||
"Manufacturer",
|
||||
"Model",
|
||||
];
|
||||
|
||||
const rows = [
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1100</span>,
|
||||
<span className="font-semibold whitespace-nowrap">Cooling Tower</span>,
|
||||
"Electrical",
|
||||
"Block 1 · 2",
|
||||
"Blue Star",
|
||||
"Kirloskar",
|
||||
<span className="font-mono text-slate-400">M-550</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1103</span>,
|
||||
<span className="font-semibold whitespace-nowrap">Air Handling Unit</span>,
|
||||
"Plumbing",
|
||||
"Tower A · 1",
|
||||
"Blue Star",
|
||||
"Voltas",
|
||||
<span className="font-mono text-slate-400">M-550</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1106</span>,
|
||||
<span className="font-semibold whitespace-nowrap">VRV Outdoor</span>,
|
||||
"Electrical",
|
||||
"Tower A · G",
|
||||
"Voltas",
|
||||
"Daikin",
|
||||
<span className="font-mono text-slate-400">M-320</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1109</span>,
|
||||
<span className="font-semibold whitespace-nowrap">VRV Outdoor</span>,
|
||||
"HVAC",
|
||||
"Tower A · 1",
|
||||
"Voltas",
|
||||
"Blue Star",
|
||||
<span className="font-mono text-slate-400">M-320</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1112</span>,
|
||||
<span className="font-semibold whitespace-nowrap">Air Handling Unit</span>,
|
||||
"HVAC",
|
||||
"Tower A · G",
|
||||
"In-house",
|
||||
"Voltas",
|
||||
<span className="font-mono text-slate-400">M-550</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1115</span>,
|
||||
<span className="font-semibold whitespace-nowrap">Air Handling Unit</span>,
|
||||
"Electrical",
|
||||
"Tower A · 2",
|
||||
"Voltas",
|
||||
"Daikin",
|
||||
<span className="font-mono text-slate-400">M-XR9</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1118</span>,
|
||||
<span className="font-semibold whitespace-nowrap">Chiller</span>,
|
||||
"Electrical",
|
||||
"Block 1 · 1",
|
||||
"In-house",
|
||||
"Blue Star",
|
||||
<span className="font-mono text-slate-400">M-XR9</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-teal-400 whitespace-nowrap">APP-1121</span>,
|
||||
<span className="font-semibold whitespace-nowrap">Cooling Tower</span>,
|
||||
"Plumbing",
|
||||
"Tower A · 1",
|
||||
"Blue Star",
|
||||
"Daikin",
|
||||
<span className="font-mono text-slate-400">M-550</span>,
|
||||
],
|
||||
];
|
||||
|
||||
export default function ReportPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>('Equipment');
|
||||
const [activeFilter, setActiveFilter] = useState<string>('Site All');
|
||||
|
||||
const handleDownload = () => {
|
||||
// Add your export/download logic here
|
||||
console.log("Downloading report...");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
@@ -166,7 +60,6 @@ export default function ReportPortal() {
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="inline-flex items-center gap-2 rounded-xl bg-teal-400 px-5 py-2.5 text-sm font-semibold text-slate-950 hover:bg-teal-300 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-400/50 shrink-0"
|
||||
>
|
||||
Download
|
||||
@@ -174,7 +67,7 @@ export default function ReportPortal() {
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Table headers={headers} rows={rows}/>
|
||||
<Table headers={reportheaders} rows={reportrows}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
210
components/dashboard/intelligence/aiAndPredictive.tsx
Normal file
210
components/dashboard/intelligence/aiAndPredictive.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Zap,
|
||||
AlertTriangle,
|
||||
Activity,
|
||||
Plus,
|
||||
Sparkles,
|
||||
ShieldAlert,
|
||||
IndianRupee
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import {Card} from '@/components/common/cardWrapper'; // Assuming Card wrapper location
|
||||
import { CardHeader } from '@/components/common/cardHeader'; // Assuming CardHeader location
|
||||
|
||||
export default function AiPredictivePortal() {
|
||||
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">AI</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
AI & predictive intelligence
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Real-time asset metrics, fault detection & diagnosis, predictive maintenance alerts and energy-saving intelligence — continuously learning.
|
||||
</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">
|
||||
<Sparkles className="w-4 h-4 text-slate-300" />
|
||||
<span>Model insights</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>Action alert</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: Predicted failures */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Predicted failures"
|
||||
value="1"
|
||||
icon={ShieldAlert}
|
||||
badgeText="≤ 30 days"
|
||||
badgeClassName="text-rose-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Savings opportunity */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Savings opportunity"
|
||||
value="₹3.5 L"
|
||||
icon={Zap}
|
||||
badgeText="per month"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Active anomalies */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Active anomalies"
|
||||
value="4"
|
||||
icon={AlertTriangle}
|
||||
badgeText="flagged"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Model confidence */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Model confidence"
|
||||
value="87%"
|
||||
icon={Activity}
|
||||
badgeText="average"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/50 border-blue-800/30 text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- CARDS SECTION BELOW STATCARDS --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-6">
|
||||
{/* Left Card: Predictive maintenance alerts */}
|
||||
<Card className="lg:col-span-7 bg-[#0b1727] border border-slate-800/80 p-5 rounded-xl">
|
||||
<CardHeader
|
||||
title="Predictive maintenance alerts"
|
||||
subtitle="ML · condition-based"
|
||||
/>
|
||||
<div className="divide-y divide-slate-800/60 mt-4">
|
||||
<div className="py-3 flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-rose-500 mt-2 shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-slate-100">Chiller-02 compressor</h4>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Bearing wear — likely failure in ~18 days</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs font-semibold text-rose-400">91%</span>
|
||||
<p className="text-[10px] text-slate-500">confidence</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3 flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-amber-400 mt-2 shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-slate-100">AHU-07 drive belt</h4>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Vibration trend rising — inspect within 10 days</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs font-semibold text-amber-400">78%</span>
|
||||
<p className="text-[10px] text-slate-500">confidence</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3 flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-amber-400 mt-2 shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-slate-100">DG-01 fuel system</h4>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Efficiency drop 6% — filter service due</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs font-semibold text-amber-400">84%</span>
|
||||
<p className="text-[10px] text-slate-500">confidence</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-3 flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-blue-400 mt-2 shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-slate-100">Lift-03 door motor</h4>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Cycle-time anomaly — monitor</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-xs font-semibold text-blue-400">64%</span>
|
||||
<p className="text-[10px] text-slate-500">confidence</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Right Card: Energy intelligence */}
|
||||
<Card className="lg:col-span-5 bg-[#0b1727] border border-slate-800/80 p-5 rounded-xl">
|
||||
<CardHeader
|
||||
title="Energy intelligence"
|
||||
subtitle="forecast savings"
|
||||
/>
|
||||
<div className="mt-4">
|
||||
<div className="grid grid-cols-12 text-[11px] font-semibold text-slate-400 uppercase tracking-wider pb-2 border-b border-slate-800/60">
|
||||
<div className="col-span-4">Area</div>
|
||||
<div className="col-span-5">Recommendation</div>
|
||||
<div className="col-span-3 text-right">Saving</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-800/60 text-xs">
|
||||
<div className="grid grid-cols-12 py-3.5 items-center">
|
||||
<div className="col-span-4 font-semibold text-slate-200">HVAC scheduling</div>
|
||||
<div className="col-span-5 text-slate-400">Shift pre-cooling to off-peak</div>
|
||||
<div className="col-span-3 text-right font-medium text-emerald-400">₹1.8 L/mo</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 py-3.5 items-center">
|
||||
<div className="col-span-4 font-semibold text-slate-200">Lighting</div>
|
||||
<div className="col-span-5 text-slate-400">Daylight dimming zones L2–L5</div>
|
||||
<div className="col-span-3 text-right font-medium text-emerald-400">₹0.6 L/mo</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 py-3.5 items-center">
|
||||
<div className="col-span-4 font-semibold text-slate-200">Chiller staging</div>
|
||||
<div className="col-span-5 text-slate-400">Optimise sequencing logic</div>
|
||||
<div className="col-span-3 text-right font-medium text-emerald-400">₹1.1 L/mo</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
boldText='How it works:'
|
||||
normalText='IoT/BMS sensor streams feed fault-detection models → predictions surface as alerts → one click raises a condition-based PM work order → verified completion feeds back to improve the model.'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
components/dashboard/intelligence/assetHealth.tsx
Normal file
108
components/dashboard/intelligence/assetHealth.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Zap,
|
||||
AlertTriangle,
|
||||
Activity,
|
||||
Plus,
|
||||
Sparkles,
|
||||
ShieldAlert,
|
||||
IndianRupee,
|
||||
Clock,
|
||||
ShieldCheck
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import {Card} from '@/components/common/cardWrapper'; // Assuming Card wrapper location
|
||||
import { CardHeader } from '@/components/common/cardHeader'; // Assuming CardHeader location
|
||||
|
||||
export default function AssetHealthPortal() {
|
||||
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">ASSET HEALTH</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Asset health & reliability
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
A live health index per asset from reliability signals — MTBF, MTTR and criticality drive condition-based PM instead of fixed calendars.
|
||||
</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">
|
||||
<Activity className="w-4 h-4 text-slate-300" />
|
||||
<span>Model insights</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>Raise PM</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: Predicted failures */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Fleet health index"
|
||||
value="69"
|
||||
icon={ShieldCheck}
|
||||
badgeText="weighted"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Assets at risk"
|
||||
value="1"
|
||||
icon={AlertTriangle}
|
||||
badgeText="health < 58"
|
||||
badgeClassName="text-rose-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Mean time between failures"
|
||||
value="204d"
|
||||
icon={Clock}
|
||||
badgeText="avg"
|
||||
badgeClassName="text-blue-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/50 border-blue-800/30 text-blue-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Mean time to repair"
|
||||
value="6.3h"
|
||||
icon={Activity}
|
||||
badgeText="avg"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
boldText="How it works:"
|
||||
normalText="reliability signals (runtime, faults, vibration, PPM history) roll into a 0–100 health index. Assets that drop below threshold auto-surface here and can raise a condition-based PM in one click — replacing fixed-calendar servicing on healthy assets."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,92 +1,13 @@
|
||||
import {
|
||||
Package,
|
||||
AlertTriangle,
|
||||
Activity,
|
||||
FileText,
|
||||
LayoutGrid,
|
||||
Plus
|
||||
} from "lucide-react";
|
||||
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
|
||||
import Table from "@/components/common/dataTable";
|
||||
import { meterHeaders, meterRows, readingHeaders, readingRows } from "@/constants/tabledata";
|
||||
|
||||
|
||||
|
||||
export default function EnergyPortal() {
|
||||
const metersList = [
|
||||
{
|
||||
meter: "MTR-1",
|
||||
name: "Electricity main 1",
|
||||
location: "Pump room",
|
||||
type: "Electricity",
|
||||
mf: "1",
|
||||
},
|
||||
{
|
||||
meter: "MTR-2",
|
||||
name: "Water main 2",
|
||||
location: "Main LT panel",
|
||||
type: "Water",
|
||||
mf: "10",
|
||||
},
|
||||
{
|
||||
meter: "MTR-3",
|
||||
name: "Diesel main 3",
|
||||
location: "DG room",
|
||||
type: "Diesel",
|
||||
mf: "100",
|
||||
},
|
||||
{
|
||||
meter: "MTR-4",
|
||||
name: "Electricity main 4",
|
||||
location: "Block riser",
|
||||
type: "Electricity",
|
||||
mf: "1",
|
||||
},
|
||||
{
|
||||
meter: "MTR-5",
|
||||
name: "Water main 5",
|
||||
location: "DG room",
|
||||
type: "Water",
|
||||
mf: "1",
|
||||
},
|
||||
];
|
||||
|
||||
const latestReadings = [
|
||||
{
|
||||
meter: "MTR-1",
|
||||
prev: "40.00",
|
||||
current: "58.00",
|
||||
cons: "18.0",
|
||||
uom: "kWh",
|
||||
},
|
||||
{
|
||||
meter: "MTR-2",
|
||||
prev: "49.00",
|
||||
current: "69.00",
|
||||
cons: "200.0",
|
||||
uom: "kL",
|
||||
},
|
||||
{
|
||||
meter: "MTR-3",
|
||||
prev: "58.00",
|
||||
current: "80.00",
|
||||
cons: "2200.0",
|
||||
uom: "L",
|
||||
},
|
||||
{
|
||||
meter: "MTR-4",
|
||||
prev: "67.00",
|
||||
current: "91.00",
|
||||
cons: "24.0",
|
||||
uom: "kWh",
|
||||
},
|
||||
{
|
||||
meter: "MTR-5",
|
||||
prev: "76.00",
|
||||
current: "102.00",
|
||||
cons: "26.0",
|
||||
uom: "kL",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="text-slate-100 mt-15 font-sans">
|
||||
@@ -126,109 +47,9 @@ export default function EnergyPortal() {
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-start">
|
||||
|
||||
{/* LEFT TABLE: METER MASTER */}
|
||||
<div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-slate-800/80">
|
||||
<h2 className="text-base font-semibold text-white">Meter master</h2>
|
||||
<span className="text-xs font-mono text-slate-500">5 meters</span>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<table className="w-full h-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
|
||||
<th className="py-3 px-4">Meter</th>
|
||||
<th className="py-3 px-4">Name</th>
|
||||
<th className="py-3 px-4">Location</th>
|
||||
<th className="py-3 px-4">Type</th>
|
||||
<th className="py-3 px-4">MF</th>
|
||||
<th className="py-3 px-4 text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/40">
|
||||
{metersList.map((row, index) => {
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className="transition-colors hover:bg-slate-800/30"
|
||||
>
|
||||
<td className="py-3 px-4 font-mono text-teal-400 font-semibold text-xs whitespace-nowrap">
|
||||
{row.meter}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-semibold text-slate-100 whitespace-nowrap">
|
||||
{row.name}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.location}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
|
||||
{row.type}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-semibold text-slate-200 whitespace-nowrap">
|
||||
{row.mf}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right">
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
|
||||
Reading
|
||||
</button>
|
||||
<button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
|
||||
QR
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT TABLE: LATEST READINGS */}
|
||||
<div className="bg-[#0b1329] 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>
|
||||
<span className="text-xs font-mono text-slate-500 lowercase">
|
||||
tap a meter for history
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<table className="w-full h-full text-left text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
|
||||
<th className="py-3 px-4">Meter</th>
|
||||
<th className="py-3 px-4">Prev</th>
|
||||
<th className="py-3 px-4">Current</th>
|
||||
<th className="py-3 px-4">Cons.</th>
|
||||
<th className="py-3 px-4">UOM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/40">
|
||||
{latestReadings.map((row, index) => (
|
||||
<tr key={index} className="hover:bg-slate-800/30 transition-colors">
|
||||
<td className="py-3 px-4 font-mono text-teal-400 font-medium text-xs whitespace-nowrap">
|
||||
{row.meter}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
|
||||
{row.prev}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
|
||||
{row.current}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-semibold text-teal-400 text-xs whitespace-nowrap">
|
||||
{row.cons}
|
||||
</td>
|
||||
<td className="py-3 px-4 font-semibold text-slate-100 text-xs whitespace-nowrap">
|
||||
{row.uom}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table headers={meterHeaders} rows={meterRows}/>
|
||||
{/* Right table */}
|
||||
<Table headers={readingHeaders} rows={readingRows}/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -19,134 +19,14 @@ import NavigationTabs from "@/components/common/tabs";
|
||||
import { equipmentTabs } from "@/constants/constant";
|
||||
import { useState } from "react";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import { equipmentheaders, equipmentrows } from "@/constants/tabledata";
|
||||
|
||||
const headers = [
|
||||
"Code",
|
||||
"Equipment",
|
||||
"Group",
|
||||
"Block · Floor",
|
||||
"Service Provider",
|
||||
"Criticality",
|
||||
"PPM Status",
|
||||
"Actions",
|
||||
];
|
||||
|
||||
const Badge = ({
|
||||
text,
|
||||
color,
|
||||
}: {
|
||||
text: string;
|
||||
color: string;
|
||||
}) => (
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${color}`}
|
||||
>
|
||||
<span className="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
const ActionButtons = () => (
|
||||
<div className="flex justify-center gap-1.5">
|
||||
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
|
||||
<FileText size={14} />
|
||||
</button>
|
||||
|
||||
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
|
||||
<button className="rounded-md border border-slate-700/60 p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 transition">
|
||||
<LayoutGrid size={14} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function EquipmentPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>("Site-Wise Equipment");
|
||||
|
||||
const rows = [
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1100</span>,
|
||||
<span className="font-bold text-slate-100">Cooling Tower</span>,
|
||||
"Electrical",
|
||||
"Block 1 · 2",
|
||||
"Blue Star",
|
||||
"Important",
|
||||
<Badge text="Working" color="bg-amber-950/60 text-amber-400 border border-amber-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1103</span>,
|
||||
<span className="font-bold text-slate-100">Air Handling Unit</span>,
|
||||
"Plumbing",
|
||||
"Tower A · 1",
|
||||
"Blue Star",
|
||||
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
|
||||
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1106</span>,
|
||||
<span className="font-bold text-slate-100">VRV Outdoor</span>,
|
||||
"Electrical",
|
||||
"Tower A · G",
|
||||
"Voltas",
|
||||
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
|
||||
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1109</span>,
|
||||
<span className="font-bold text-slate-100">VRV Outdoor</span>,
|
||||
"HVAC",
|
||||
"Tower A · 1",
|
||||
"Voltas",
|
||||
"Normal",
|
||||
<Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1112</span>,
|
||||
<span className="font-bold text-slate-100">Air Handling Unit</span>,
|
||||
"HVAC",
|
||||
"Tower A · G",
|
||||
"In-house",
|
||||
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
|
||||
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1115</span>,
|
||||
<span className="font-bold text-slate-100">Air Handling Unit</span>,
|
||||
"Electrical",
|
||||
"Tower A · 2",
|
||||
"Voltas",
|
||||
<Badge text="Critical" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
|
||||
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1118</span>,
|
||||
<span className="font-bold text-slate-100">Chiller</span>,
|
||||
"Electrical",
|
||||
"Block 1 · 1",
|
||||
"In-house",
|
||||
"Important",
|
||||
<Badge text="Overdue" color="bg-rose-950/60 text-rose-400 border border-rose-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-teal-400">APP-1121</span>,
|
||||
<span className="font-bold text-slate-100">Cooling Tower</span>,
|
||||
"Plumbing",
|
||||
"Tower A · 1",
|
||||
"Blue Star",
|
||||
"Normal",
|
||||
<Badge text="Completed" color="bg-emerald-950/60 text-emerald-400 border border-emerald-800/30" />,
|
||||
<ActionButtons />,
|
||||
],
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans ">
|
||||
@@ -290,7 +170,7 @@ export default function EquipmentPortal() {
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="mt-4">
|
||||
<Table headers={headers} rows={rows} />
|
||||
<Table headers={equipmentheaders} rows={equipmentrows} />
|
||||
</div>
|
||||
|
||||
{/* Info Banner */}
|
||||
|
||||
@@ -16,289 +16,13 @@ import StatCard from "@/components/common/dashStatCard";
|
||||
import Table from "@/components/common/dataTable";
|
||||
import NavigationTabs from '@/components/common/tabs';
|
||||
import { helpdeskTtabs } from '@/constants/constant';
|
||||
import { helpdeskheaders, helpdeskrows } from '@/constants/tabledata';
|
||||
|
||||
const StatusBadge = ({
|
||||
text,
|
||||
color,
|
||||
}: {
|
||||
text: string;
|
||||
color: string;
|
||||
}) => (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
|
||||
>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-current" />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
const ActionButtons = ({ active }: { active: boolean }) => (
|
||||
<div className="flex justify-center items-center gap-1">
|
||||
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<Pencil size={13} />
|
||||
</Button>
|
||||
|
||||
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<List size={13} />
|
||||
</Button>
|
||||
|
||||
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<ShieldCheck size={13} />
|
||||
</Button>
|
||||
|
||||
<Button className="flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<QrCode size={13} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={`flex h-7 w-7 items-center justify-center rounded-md border border-slate-700/60 hover:bg-slate-800 transition ${
|
||||
active ? "text-red-400" : "text-emerald-400"
|
||||
}`}
|
||||
>
|
||||
<Power size={13} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const headers = [
|
||||
"",
|
||||
"Block",
|
||||
"Floor",
|
||||
"Zone",
|
||||
"Department",
|
||||
"Location",
|
||||
"Window",
|
||||
"TAT",
|
||||
"Sched.",
|
||||
"Approval",
|
||||
"Status",
|
||||
"Actions",
|
||||
];
|
||||
|
||||
const checkbox = (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 appearance-none rounded border border-slate-600 bg-slate-700 checked:bg-slate-500 checked:border-slate-500 cursor-pointer"
|
||||
/>
|
||||
);
|
||||
|
||||
const rows = [
|
||||
[
|
||||
checkbox,
|
||||
"Block 2",
|
||||
"1",
|
||||
"Z2",
|
||||
"HVAC",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">01:56–18:00</span>,
|
||||
"60m",
|
||||
"4",
|
||||
<span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
|
||||
<StatusBadge
|
||||
text="Inactive"
|
||||
color="bg-slate-700/50 text-slate-400"
|
||||
/>,
|
||||
<ActionButtons active={false} />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 1",
|
||||
"2",
|
||||
"Z1",
|
||||
"Inspection work",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">01:56–23:59</span>,
|
||||
"360m",
|
||||
"6",
|
||||
<span className="text-slate-500">—</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 2",
|
||||
"G",
|
||||
"N",
|
||||
"Inspection work",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–23:59</span>,
|
||||
"360m",
|
||||
"4",
|
||||
<span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 1",
|
||||
"2",
|
||||
"Z2",
|
||||
"Electrical",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
|
||||
"360m",
|
||||
"4",
|
||||
<span className="text-slate-500">—</span>,
|
||||
<StatusBadge
|
||||
text="Inactive"
|
||||
color="bg-slate-700/50 text-slate-400"
|
||||
/>,
|
||||
<ActionButtons active={false} />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 2",
|
||||
"3",
|
||||
"Z1",
|
||||
"Housekeeping",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
|
||||
"20m",
|
||||
"8",
|
||||
<span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 1",
|
||||
"3",
|
||||
"Z1",
|
||||
"Electrical",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–17:30</span>,
|
||||
"20m",
|
||||
"8",
|
||||
<span className="text-slate-500">—</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 2",
|
||||
"1",
|
||||
"Z2",
|
||||
"HVAC",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Parking P1</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">01:56–18:00</span>,
|
||||
"60m",
|
||||
"4",
|
||||
<span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
|
||||
<StatusBadge
|
||||
text="Inactive"
|
||||
color="bg-slate-700/50 text-slate-400"
|
||||
/>,
|
||||
<ActionButtons active={false} />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 1",
|
||||
"2",
|
||||
"Z1",
|
||||
"Inspection work",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">01:56–23:59</span>,
|
||||
"360m",
|
||||
"6",
|
||||
<span className="text-slate-500">—</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 2",
|
||||
"G",
|
||||
"N",
|
||||
"Inspection work",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Main lobby</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–23:59</span>,
|
||||
"360m",
|
||||
"4",
|
||||
<span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 1",
|
||||
"2",
|
||||
"Z2",
|
||||
"Electrical",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Reception</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
|
||||
"360m",
|
||||
"4",
|
||||
<span className="text-slate-500">—</span>,
|
||||
<StatusBadge
|
||||
text="Inactive"
|
||||
color="bg-slate-700/50 text-slate-400"
|
||||
/>,
|
||||
<ActionButtons active={false} />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 2",
|
||||
"3",
|
||||
"Z1",
|
||||
"Housekeeping",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Cafeteria</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–18:00</span>,
|
||||
"20m",
|
||||
"8",
|
||||
<span className="text-emerald-400 font-semibold whitespace-nowrap">✓ Yes</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
|
||||
[
|
||||
checkbox,
|
||||
"Block 1",
|
||||
"3",
|
||||
"Z1",
|
||||
"Electrical",
|
||||
<span className="font-semibold text-slate-100 whitespace-nowrap">Food court</span>,
|
||||
<span className="font-mono text-xs whitespace-nowrap">08:00–17:30</span>,
|
||||
"20m",
|
||||
"8",
|
||||
<span className="text-slate-500">—</span>,
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<ActionButtons active />,
|
||||
],
|
||||
];
|
||||
|
||||
export default function HelpDeskPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>('Location');
|
||||
@@ -425,7 +149,7 @@ export default function HelpDeskPortal() {
|
||||
|
||||
{/* --- TABLE CONTAINER --- */}
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<Table headers={headers} rows={rows} />
|
||||
<Table headers={helpdeskheaders} rows={helpdeskrows} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,215 +9,13 @@ import {
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
import { consumptionLedger, stockItems } from "@/constants/constant";
|
||||
|
||||
|
||||
|
||||
|
||||
export default function InventoryPortal() {
|
||||
const stockItems = [
|
||||
{
|
||||
item: "Cooling tower fan belt",
|
||||
group: "HVAC",
|
||||
store: "Block Store",
|
||||
min: 5,
|
||||
presentValue: 8,
|
||||
unit: "Gallon",
|
||||
status: "COMPLETED",
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
item: "Air filter 24×24",
|
||||
group: "HVAC",
|
||||
store: "Block Store",
|
||||
min: 5,
|
||||
presentValue: 2,
|
||||
unit: "Nos",
|
||||
status: "OVERDUE",
|
||||
isHighlighted: true,
|
||||
},
|
||||
{
|
||||
item: "MCB 32A",
|
||||
group: "Electrical",
|
||||
store: "Block Store",
|
||||
min: 5,
|
||||
presentValue: 8,
|
||||
unit: "Nos",
|
||||
status: "COMPLETED",
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
item: "Contactor 40A",
|
||||
group: "Electrical",
|
||||
store: "Block Store",
|
||||
min: 2,
|
||||
presentValue: 2,
|
||||
unit: "Nos",
|
||||
status: "OVERDUE",
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
item: "PVC pipe 1\"",
|
||||
group: "Plumbing",
|
||||
store: "Main Store",
|
||||
min: 3,
|
||||
presentValue: 0,
|
||||
unit: "Mtr",
|
||||
status: "OVERDUE",
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
item: "Submersible pump seal",
|
||||
group: "Plumbing",
|
||||
store: "Main Store",
|
||||
min: 3,
|
||||
presentValue: 2,
|
||||
unit: "Nos",
|
||||
status: "OVERDUE",
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
item: "Refrigerant R410a",
|
||||
group: "HVAC",
|
||||
store: "Block Store",
|
||||
min: 5,
|
||||
presentValue: 0,
|
||||
unit: "Kg",
|
||||
status: "OVERDUE",
|
||||
isHighlighted: false,
|
||||
},
|
||||
];
|
||||
|
||||
const consumptionLedger = [
|
||||
{
|
||||
txn: "TXN-5200",
|
||||
item: "Cooling tower fan belt",
|
||||
type: "Consume",
|
||||
qty: "2 Gallon",
|
||||
jobCard: "026/1009",
|
||||
date: "Jun 20, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5201",
|
||||
item: "MCB 32A",
|
||||
type: "Consume",
|
||||
qty: "1 Nos",
|
||||
jobCard: "026/1016",
|
||||
date: "Jun 21, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5202",
|
||||
item: "Air filter 24×24",
|
||||
type: "Receipt",
|
||||
qty: "10 Nos",
|
||||
jobCard: "—",
|
||||
date: "Jun 22, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5203",
|
||||
item: "Submersible pump seal",
|
||||
type: "Consume",
|
||||
qty: "1 Nos",
|
||||
jobCard: "026/1023",
|
||||
date: "Jun 23, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5204",
|
||||
item: "Air filter 24×24",
|
||||
type: "Consume",
|
||||
qty: "3 Nos",
|
||||
jobCard: "026/1030",
|
||||
date: "Jun 24, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5205",
|
||||
item: "PVC pipe 1\"",
|
||||
type: "Receipt",
|
||||
qty: "20 Mtr",
|
||||
jobCard: "—",
|
||||
date: "Jun 25, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5406",
|
||||
item: "Cooling tower fan belt",
|
||||
type: "Consume",
|
||||
qty: "2 Gallon",
|
||||
jobCard: "026/1009",
|
||||
date: "Jun 7, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5407",
|
||||
item: "MCB 32A",
|
||||
type: "Consume",
|
||||
qty: "1 Nos",
|
||||
jobCard: "026/1016",
|
||||
date: "Jun 7, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5200",
|
||||
item: "Cooling tower fan belt",
|
||||
type: "Consume",
|
||||
qty: "2 Gallon",
|
||||
jobCard: "026/1009",
|
||||
date: "Jun 20, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5201",
|
||||
item: "MCB 32A",
|
||||
type: "Consume",
|
||||
qty: "1 Nos",
|
||||
jobCard: "026/1016",
|
||||
date: "Jun 21, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5202",
|
||||
item: "Air filter 24×24",
|
||||
type: "Receipt",
|
||||
qty: "10 Nos",
|
||||
jobCard: "—",
|
||||
date: "Jun 22, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5203",
|
||||
item: "Submersible pump seal",
|
||||
type: "Consume",
|
||||
qty: "1 Nos",
|
||||
jobCard: "026/1023",
|
||||
date: "Jun 23, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5204",
|
||||
item: "Air filter 24×24",
|
||||
type: "Consume",
|
||||
qty: "3 Nos",
|
||||
jobCard: "026/1030",
|
||||
date: "Jun 24, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5205",
|
||||
item: "PVC pipe 1\"",
|
||||
type: "Receipt",
|
||||
qty: "20 Mtr",
|
||||
jobCard: "—",
|
||||
date: "Jun 25, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5406",
|
||||
item: "Cooling tower fan belt",
|
||||
type: "Consume",
|
||||
qty: "2 Gallon",
|
||||
jobCard: "026/1009",
|
||||
date: "Jun 7, 2026",
|
||||
},
|
||||
{
|
||||
txn: "TXN-5407",
|
||||
item: "MCB 32A",
|
||||
type: "Consume",
|
||||
qty: "1 Nos",
|
||||
jobCard: "026/1016",
|
||||
date: "Jun 7, 2026",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
{/* --- HEADER SECTION --- */}
|
||||
|
||||
@@ -6,189 +6,12 @@ import NavigationTabs from '@/components/common/tabs';
|
||||
import { Reqeusttabs,statusFilters } from '@/constants/constant';
|
||||
import FilterTabs from '@/components/common/roundedFilters';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { requestheaders, requestrows } from '@/constants/tabledata';
|
||||
|
||||
|
||||
const StatusBadge = ({
|
||||
text,
|
||||
color,
|
||||
}: {
|
||||
text: string;
|
||||
color: string;
|
||||
}) => (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-wider whitespace-nowrap ${color}`}
|
||||
>
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-current" />
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
const headers = [
|
||||
"Request No.",
|
||||
"Department",
|
||||
"Issue",
|
||||
"Location",
|
||||
"Assignee",
|
||||
"Source",
|
||||
"Status",
|
||||
];
|
||||
const rows = [
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1009</span>,
|
||||
"Electrical",
|
||||
"Lighting out",
|
||||
"Block 1 · G",
|
||||
"ME Local",
|
||||
<span className="font-mono">Line</span>,
|
||||
<StatusBadge
|
||||
text="Overdue"
|
||||
color="bg-red-500/15 text-red-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1016</span>,
|
||||
"HVAC",
|
||||
"AHU not cooling",
|
||||
"Lobby · 1",
|
||||
"Dhananjay T.",
|
||||
<span className="font-mono">Walk-in</span>,
|
||||
<StatusBadge
|
||||
text="Registered"
|
||||
color="bg-blue-500/15 text-blue-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1023</span>,
|
||||
"HVAC",
|
||||
"Thermostat fault",
|
||||
"Block 1 · 1",
|
||||
"ME Local",
|
||||
<span className="font-mono">Mobile app</span>,
|
||||
<StatusBadge
|
||||
text="Assigned"
|
||||
color="bg-blue-500/15 text-blue-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1030</span>,
|
||||
"HVAC",
|
||||
"Thermostat fault",
|
||||
"Block 1 · 1",
|
||||
"Dhananjay T.",
|
||||
<span className="font-mono">Mobile app</span>,
|
||||
<StatusBadge
|
||||
text="Working"
|
||||
color="bg-amber-500/15 text-amber-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1037</span>,
|
||||
"Civil",
|
||||
"Glass break",
|
||||
"Block 1 · 1",
|
||||
"Local Helpdesk",
|
||||
<span className="font-mono">Walk-in</span>,
|
||||
<StatusBadge
|
||||
text="Completed"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1044</span>,
|
||||
"HVAC",
|
||||
"Chiller alarm",
|
||||
"Block 1 · 1",
|
||||
"Dhananjay T.",
|
||||
<span className="font-mono">Mobile app</span>,
|
||||
<StatusBadge
|
||||
text="Overdue"
|
||||
color="bg-red-500/15 text-red-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1051</span>,
|
||||
"Plumbing",
|
||||
"Water leakage",
|
||||
"Lobby · 1",
|
||||
"Local Helpdesk",
|
||||
<span className="font-mono">Walk-in</span>,
|
||||
<StatusBadge
|
||||
text="Registered"
|
||||
color="bg-blue-500/15 text-blue-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1058</span>,
|
||||
"Civil",
|
||||
"Glass break",
|
||||
"Block 2 · 2",
|
||||
"Dhananjay T.",
|
||||
<span className="font-mono">Walk-in</span>,
|
||||
<StatusBadge
|
||||
text="Assigned"
|
||||
color="bg-blue-500/15 text-blue-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1065</span>,
|
||||
"Civil",
|
||||
"Ceiling crack",
|
||||
"Lobby · G",
|
||||
"ME Local",
|
||||
<span className="font-mono">Line</span>,
|
||||
<StatusBadge
|
||||
text="Working"
|
||||
color="bg-amber-500/15 text-amber-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1072</span>,
|
||||
"Plumbing",
|
||||
"Water leakage",
|
||||
"Block 2 · G",
|
||||
"TECH Local",
|
||||
<span className="font-mono">Line</span>,
|
||||
<StatusBadge
|
||||
text="Completed"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1079</span>,
|
||||
"Electrical",
|
||||
"DB switch fault",
|
||||
"Tower A · 1",
|
||||
"TECH Local",
|
||||
<span className="font-mono">Mobile app</span>,
|
||||
<StatusBadge
|
||||
text="Overdue"
|
||||
color="bg-red-500/15 text-red-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">TFM/AP/2026/1086</span>,
|
||||
"HVAC",
|
||||
"AHU not cooling",
|
||||
"Lobby · 3",
|
||||
"TECH Local",
|
||||
<span className="font-mono">Walk-in</span>,
|
||||
<StatusBadge
|
||||
text="Registered"
|
||||
color="bg-blue-500/15 text-blue-400"
|
||||
/>,
|
||||
],
|
||||
];
|
||||
|
||||
export default function ServiceRequestsPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>('TFM Requests');
|
||||
@@ -251,7 +74,7 @@ export default function ServiceRequestsPortal() {
|
||||
onChange={setActiveFilter}
|
||||
/>
|
||||
<div className='mt-5'>
|
||||
<Table headers={headers} rows={rows}/>
|
||||
<Table headers={requestheaders} rows={requestrows}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -10,121 +10,9 @@ import {
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
import { fieldCrewData, vendorData } from '@/constants/constant';
|
||||
|
||||
export default function VendorServicePortal() {
|
||||
const vendorData = [
|
||||
{
|
||||
name: "Voltas Ltd",
|
||||
id: "CTR-700",
|
||||
scope: "HVAC AMC & breakdown",
|
||||
rating: "4.6",
|
||||
sla: "95%",
|
||||
slaColor: "text-emerald-400",
|
||||
response: "4.0h",
|
||||
openJobs: "2",
|
||||
},
|
||||
{
|
||||
name: "Blue Star",
|
||||
id: "CTR-701",
|
||||
scope: "Chiller & VRV service",
|
||||
rating: "4.1",
|
||||
sla: "88%",
|
||||
slaColor: "text-amber-400",
|
||||
response: "1.2h",
|
||||
openJobs: "2",
|
||||
},
|
||||
{
|
||||
name: "Sterling FM",
|
||||
id: "CTR-702",
|
||||
scope: "Integrated FM / soft services",
|
||||
rating: "3.4",
|
||||
sla: "94%",
|
||||
slaColor: "text-emerald-400",
|
||||
response: "2.4h",
|
||||
openJobs: "4",
|
||||
},
|
||||
{
|
||||
name: "OTIS Elevators",
|
||||
id: "CTR-704",
|
||||
scope: "Elevator AMC",
|
||||
rating: "4.8",
|
||||
sla: "95%",
|
||||
slaColor: "text-emerald-400",
|
||||
response: "2.8h",
|
||||
openJobs: "—",
|
||||
},
|
||||
{
|
||||
name: "Sodexo",
|
||||
id: "CTR-705",
|
||||
scope: "Soft services & cafeteria",
|
||||
rating: "4.3",
|
||||
sla: "90%",
|
||||
slaColor: "text-amber-400",
|
||||
response: "2.8h",
|
||||
openJobs: "1",
|
||||
},
|
||||
{
|
||||
name: "In-house team",
|
||||
id: "—",
|
||||
scope: "Day-to-day maintenance",
|
||||
rating: "4.0",
|
||||
sla: "93%",
|
||||
slaColor: "text-amber-400",
|
||||
response: "3.2h",
|
||||
openJobs: "3",
|
||||
},
|
||||
];
|
||||
|
||||
const fieldCrewData = [
|
||||
{
|
||||
initials: "RK",
|
||||
name: "Ravi Kumar",
|
||||
role: "M&E Technician • Chiller plant",
|
||||
status: "ON-SITE",
|
||||
statusType: "onsite",
|
||||
time: "6.4h today",
|
||||
},
|
||||
{
|
||||
initials: "SI",
|
||||
name: "Sana Iqbal",
|
||||
role: "HVAC Engineer • AHU room L7",
|
||||
status: "ON-SITE",
|
||||
statusType: "onsite",
|
||||
time: "6.1h today",
|
||||
},
|
||||
{
|
||||
initials: "MD",
|
||||
name: "Mohan D.",
|
||||
role: "Electrician • En route",
|
||||
status: "EN-ROUTE",
|
||||
statusType: "enroute",
|
||||
time: "—",
|
||||
},
|
||||
{
|
||||
initials: "LN",
|
||||
name: "Lakshmi N.",
|
||||
role: "Housekeeping Lead • Lobby + L2",
|
||||
status: "ON-SITE",
|
||||
statusType: "onsite",
|
||||
time: "6.7h today",
|
||||
},
|
||||
{
|
||||
initials: "AP",
|
||||
name: "Arjun P.",
|
||||
role: "Plumber • Off-site",
|
||||
status: "OFF-SITE",
|
||||
statusType: "offsite",
|
||||
time: "—",
|
||||
},
|
||||
{
|
||||
initials: "FR",
|
||||
name: "Fatima R.",
|
||||
role: "BMS Operator • Control room",
|
||||
status: "ON-SITE",
|
||||
statusType: "onsite",
|
||||
time: "7.6h today",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { Plus, ShieldCheck, Clock, Check, AlertTriangle, QrCode, FileText, Eye } from 'lucide-react';
|
||||
import Button from "@/components/common/button";
|
||||
import { workPermitFilters } from '@/constants/constant';
|
||||
import { permitsData, workPermitFilters } from '@/constants/constant';
|
||||
import FilterTabs from '@/components/common/roundedFilters';
|
||||
import StatCard from '@/components/common/dashStatCard';
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
@@ -11,94 +11,9 @@ export default function WorkPermitPortal() {
|
||||
const [activeFilter, setActiveFilter] = useState<string>('All');
|
||||
|
||||
// Permit Data matching the UI
|
||||
const permitsData = [
|
||||
{
|
||||
permit: "PTW-2663",
|
||||
workingType: "Work at Height",
|
||||
location: "Atrium void",
|
||||
contractor: "Blue Star",
|
||||
validityDate: "Jun 26, 2026",
|
||||
validityTime: "08:30–17:00",
|
||||
crew: 2,
|
||||
status: "ACTIVE",
|
||||
actionText: "Close out",
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
permit: "PTW-2664",
|
||||
workingType: "Electrical Isolation",
|
||||
location: "STP wet well",
|
||||
contractor: "Sterling FM",
|
||||
validityDate: "Jun 26, 2026",
|
||||
validityTime: "09:00–13:00",
|
||||
crew: 3,
|
||||
status: "SUBMITTED",
|
||||
actionText: "Approve",
|
||||
isHighlighted: true, // Row with highlight bar
|
||||
},
|
||||
{
|
||||
permit: "PTW-2665",
|
||||
workingType: "Confined Space",
|
||||
location: "DG yard",
|
||||
contractor: "In-house team",
|
||||
validityDate: "Jun 26, 2026",
|
||||
validityTime: "14:00–18:00",
|
||||
crew: 4,
|
||||
status: "APPROVED",
|
||||
actionText: "Activate",
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
permit: "PTW-2666",
|
||||
workingType: "Hot Work",
|
||||
location: "Roof terrace",
|
||||
contractor: "Voltas Ltd",
|
||||
validityDate: "Jun 25, 2026",
|
||||
validityTime: "08:00–12:00",
|
||||
crew: 5,
|
||||
status: "EXPIRED",
|
||||
hasViewIconOnly: true,
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
permit: "PTW-2667",
|
||||
workingType: "Work at Height",
|
||||
location: "LT panel room",
|
||||
contractor: "Blue Star",
|
||||
validityDate: "Jun 25, 2026",
|
||||
validityTime: "10:00–16:00",
|
||||
crew: 2,
|
||||
status: "CLOSED",
|
||||
hasViewIconOnly: true,
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
permit: "PTW-2668",
|
||||
workingType: "Electrical Isolation",
|
||||
location: "Chiller plant",
|
||||
contractor: "Sterling FM",
|
||||
validityDate: "Jun 26, 2026",
|
||||
validityTime: "11:00–15:00",
|
||||
crew: 3,
|
||||
status: "REJECTED",
|
||||
hasViewIconOnly: true,
|
||||
isHighlighted: false,
|
||||
},
|
||||
{
|
||||
permit: "PTW-2726",
|
||||
workingType: "Work at Height",
|
||||
location: "Atrium void",
|
||||
contractor: "Blue Star",
|
||||
validityDate: "Jun 26, 2026",
|
||||
validityTime: "08:30–17:00",
|
||||
crew: 2,
|
||||
status: "DRAFT",
|
||||
actionText: "Submit",
|
||||
isHighlighted: false,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const renderStatusBadge = (status: string) => {
|
||||
const renderStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "ACTIVE":
|
||||
return (
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function BuildingOwnerPortal() {
|
||||
<span>•</span>
|
||||
<span>Building Owner</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-extrabold text-white tracking-tight mt-2">
|
||||
<h1 className="text-2xl font-bold 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">
|
||||
|
||||
@@ -13,165 +13,9 @@ import InfoBanner from "@/components/common/infoBanner";
|
||||
import FilterTabs from '@/components/common/roundedFilters';
|
||||
import { visitorFilters } from '@/constants/constant';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { visitorheaders, visitorrows } from '@/constants/tabledata';
|
||||
|
||||
export default function VistiorManagementPortal() {
|
||||
const headers = [
|
||||
"Pass",
|
||||
"Visitor",
|
||||
"Company",
|
||||
"Host",
|
||||
"Purpose",
|
||||
"Type",
|
||||
"In",
|
||||
"Out",
|
||||
"Status",
|
||||
"",
|
||||
];
|
||||
const Badge = ({
|
||||
text,
|
||||
color,
|
||||
}: {
|
||||
text: string;
|
||||
color: string;
|
||||
}) => (
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-wider ${color}`}
|
||||
>
|
||||
<span className="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
const rows = [
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4145</span>,
|
||||
<span className="font-semibold text-slate-100">Rahul Mehta</span>,
|
||||
"Voltas Ltd",
|
||||
"Dhananjay T.",
|
||||
"Maintenance visit",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
|
||||
"09:12",
|
||||
"—",
|
||||
<Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
|
||||
<Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4146</span>,
|
||||
<span className="font-semibold text-slate-100">Anita Desai</span>,
|
||||
"Siemens",
|
||||
"ME Local",
|
||||
"Interview",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Interview</span>,
|
||||
"—",
|
||||
"—",
|
||||
<Badge text="Expected" color="bg-blue-500/15 text-blue-400" />,
|
||||
<Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4147</span>,
|
||||
<span className="font-semibold text-slate-100">Karthik R.</span>,
|
||||
"Schindler",
|
||||
"Site FM Lead",
|
||||
"Client meeting",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Guest</span>,
|
||||
"08:05",
|
||||
"10:40",
|
||||
<Badge text="Checked-Out" color="bg-slate-700 text-slate-400" />,
|
||||
<span className="text-slate-500">—</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4148</span>,
|
||||
<span className="font-semibold text-slate-100">Priya Nair</span>,
|
||||
"Amazon Logistics",
|
||||
"Estates Office",
|
||||
"Material delivery",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Delivery</span>,
|
||||
"—",
|
||||
"—",
|
||||
<Badge text="Pre-Reg" color="bg-yellow-500/15 text-yellow-400" />,
|
||||
<Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4149</span>,
|
||||
<span className="font-semibold text-slate-100">Imran Q.</span>,
|
||||
"FreshMenu",
|
||||
"TECH Local",
|
||||
"AMC service",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
|
||||
"10:30",
|
||||
"—",
|
||||
<Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
|
||||
<Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
|
||||
],
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4145</span>,
|
||||
<span className="font-semibold text-slate-100">Rahul Mehta</span>,
|
||||
"Voltas Ltd",
|
||||
"Dhananjay T.",
|
||||
"Maintenance visit",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
|
||||
"09:12",
|
||||
"—",
|
||||
<Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
|
||||
<Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4146</span>,
|
||||
<span className="font-semibold text-slate-100">Anita Desai</span>,
|
||||
"Siemens",
|
||||
"ME Local",
|
||||
"Interview",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Interview</span>,
|
||||
"—",
|
||||
"—",
|
||||
<Badge text="Expected" color="bg-blue-500/15 text-blue-400" />,
|
||||
<Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4147</span>,
|
||||
<span className="font-semibold text-slate-100">Karthik R.</span>,
|
||||
"Schindler",
|
||||
"Site FM Lead",
|
||||
"Client meeting",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Guest</span>,
|
||||
"08:05",
|
||||
"10:40",
|
||||
<Badge text="Checked-Out" color="bg-slate-700 text-slate-400" />,
|
||||
<span className="text-slate-500">—</span>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4148</span>,
|
||||
<span className="font-semibold text-slate-100">Priya Nair</span>,
|
||||
"Amazon Logistics",
|
||||
"Estates Office",
|
||||
"Material delivery",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Delivery</span>,
|
||||
"—",
|
||||
"—",
|
||||
<Badge text="Pre-Reg" color="bg-yellow-500/15 text-yellow-400" />,
|
||||
<Button className="text-emerald-400 font-semibold hover:text-emerald-300">Check in</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-[#2EE6C5]">VIS-4149</span>,
|
||||
<span className="font-semibold text-slate-100">Imran Q.</span>,
|
||||
"FreshMenu",
|
||||
"TECH Local",
|
||||
"AMC service",
|
||||
<span className="px-3 py-1 rounded-lg bg-slate-900 border border-slate-700 text-xs">Contractor</span>,
|
||||
"10:30",
|
||||
"—",
|
||||
<Badge text="Checked-In" color="bg-emerald-500/15 text-emerald-400" />,
|
||||
<Button className="text-teal-400 font-semibold hover:text-teal-300">Check out</Button>,
|
||||
],
|
||||
];
|
||||
|
||||
const [activeFilter, setActiveFilter] = useState<string>('All');
|
||||
return (
|
||||
@@ -263,7 +107,7 @@ const [activeFilter, setActiveFilter] = useState<string>('All');
|
||||
onChange={setActiveFilter}
|
||||
/>
|
||||
</div>
|
||||
<Table headers={headers} rows={rows}/>
|
||||
<Table headers={visitorheaders} rows={visitorrows}/>
|
||||
|
||||
<div className="mb-10 mt-10">
|
||||
<InfoBanner
|
||||
|
||||
Reference in New Issue
Block a user