Configure Completed is added
This commit is contained in:
265
components/dashboard/intelligence/connectedOps.tsx
Normal file
265
components/dashboard/intelligence/connectedOps.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
"use client";
|
||||
import {
|
||||
BarChart2,
|
||||
Globe
|
||||
} from "lucide-react";
|
||||
|
||||
import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
|
||||
import Button from "@/components/common/button";
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
|
||||
// Import your custom Card components
|
||||
import { Card } from "@/components/common/cardWrapper";
|
||||
import { CardHeader } from "@/components/common/cardHeader";
|
||||
import Table from "@/components/common/dataTable";
|
||||
import { connectedheaders, connectedrows } from "@/constants/tabledata";
|
||||
|
||||
// Custom Stat Card Data matching the UI image exactly
|
||||
const STAT_CARDS_DATA = [
|
||||
{
|
||||
title: "SLA ADHERENCE",
|
||||
value: "90%",
|
||||
subtext: "target 90% · automated tracking",
|
||||
progress: 90,
|
||||
color: "bg-[#00c985]", // Vibrant emerald green
|
||||
valueColor: "text-[#00c985]",
|
||||
},
|
||||
{
|
||||
title: "AVG WO RESOLUTION",
|
||||
value: "22.4 h",
|
||||
subtext: "target < 24 h · portfolio median",
|
||||
progress: 93,
|
||||
color: "bg-[#2dd4bf]", // Mint / Teal
|
||||
valueColor: "text-white",
|
||||
},
|
||||
{
|
||||
title: "MANUAL DATA ENTRY",
|
||||
value: "-80%",
|
||||
subtext: "agent-captured requests & readings",
|
||||
progress: 80,
|
||||
color: "bg-[#2dd4bf]", // Mint / Teal
|
||||
valueColor: "text-[#2dd4bf]",
|
||||
},
|
||||
{
|
||||
title: "REPORTING EFFORT",
|
||||
value: "-75%",
|
||||
subtext: "metrics ready for review — no compiling",
|
||||
progress: 75,
|
||||
color: "bg-[#2dd4bf]", // Mint / Teal
|
||||
valueColor: "text-[#2dd4bf]",
|
||||
},
|
||||
];
|
||||
|
||||
// Data for Risk Radar
|
||||
const RISK_RADAR_ITEMS = [
|
||||
{
|
||||
title: "Coastal One · vendor gap",
|
||||
desc: "HVAC vendor completion rate fell to 61% — 8 PPMs at risk of slipping this month. Backup vendor suggested.",
|
||||
tag: "Escalates in ~6 days",
|
||||
tagColor: "text-rose-400",
|
||||
dotColor: "bg-rose-500",
|
||||
action: "Assign backup",
|
||||
},
|
||||
{
|
||||
title: "Lakeside · SLA drift",
|
||||
desc: "P2 response times trending +18% over 3 weeks; correlated with night-shift staffing.",
|
||||
tag: "Breach risk · next week",
|
||||
tagColor: "text-amber-400",
|
||||
dotColor: "bg-amber-400",
|
||||
action: "Adjust roster",
|
||||
},
|
||||
{
|
||||
title: "Monsoon readiness",
|
||||
desc: "4 of 11 waterproofing checks pending across portfolio with rains forecast in 10 days.",
|
||||
tag: "Window closing",
|
||||
tagColor: "text-amber-400",
|
||||
dotColor: "bg-amber-400",
|
||||
action: "Schedule now",
|
||||
},
|
||||
{
|
||||
title: "Spares shortfall",
|
||||
desc: "AHU belt stock below reorder level at 2 sites; next PPM cycle consumes remaining stock.",
|
||||
tag: "3 weeks of stock left",
|
||||
tagColor: "text-sky-400",
|
||||
dotColor: "bg-sky-400",
|
||||
action: "Raise PO",
|
||||
},
|
||||
];
|
||||
|
||||
// Data for Vendor Performance
|
||||
const VENDOR_PERFORMANCE = [
|
||||
{ name: "CoolServ HVAC", score: 94, barColor: "bg-emerald-400" },
|
||||
{ name: "Apex Elevators", score: 91, barColor: "bg-emerald-400" },
|
||||
{ name: "SecureWatch", score: 86, barColor: "bg-emerald-400" },
|
||||
{ name: "AquaPure", score: 82, barColor: "bg-amber-400" },
|
||||
{ name: "GreenScape", score: 61, barColor: "bg-rose-400" },
|
||||
];
|
||||
|
||||
// Data for Live Context Feed
|
||||
const LIVE_FEED = [
|
||||
{ time: "now", text: "Vendor CoolServ acknowledged P1 · Chiller-02 — tenant portal updated" },
|
||||
{ time: "4 min", text: "Energy spike at Lakeside auto-linked to AHU-07 alert" },
|
||||
{ time: "11 min", text: "Coastal One WO-1221 completed · SLA met · invoice draft created" },
|
||||
{ time: "26 min", text: "Tenant satisfaction pulse: 4.4 ★ this week (+0.2)" },
|
||||
];
|
||||
|
||||
export default function ConnectedOpsPortal() {
|
||||
return (
|
||||
<div className="text-[#8e9bae] font-sans my-15">
|
||||
|
||||
{/* Page Header Section */}
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-[11px] font-medium tracking-wider text-[#3de0c4]">
|
||||
<span>APPLE ONE — HQ TOWER</span>
|
||||
<span className="text-[#3a495e]">•</span>
|
||||
<span className="text-[#596980]">INTELLIGENCE</span>
|
||||
<span className="text-[#3a495e]">•</span>
|
||||
<span className="text-[#596980]">CONNECTED OPS</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Connected operations</h1>
|
||||
<p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
|
||||
Every team, vendor and system on the same live context — portfolio-wide work orders, costs, SLAs and vendor performance in one place, with risks flagged before they escalate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
className="flex items-center gap-2 rounded-lg border border-[#1b2a3d] bg-[#0c1626] px-4 py-2 text-xs font-semibold text-white hover:bg-[#132238] transition">
|
||||
<BarChart2 size={14} className="text-[#3de0c4]" />
|
||||
Review pack
|
||||
</Button>
|
||||
<Button
|
||||
className="flex items-center gap-1.5 rounded-lg bg-[#3de0c4] hover:bg-[#34ceb3] px-4 py-2 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
|
||||
<Globe size={14} strokeWidth={2.5} />
|
||||
Share live board
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARD GRID (REPLACED WITH UI MATCHING CARDS) --- */}
|
||||
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{STAT_CARDS_DATA.map((card, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-[#0b1726] border border-[#16273b] rounded-xl p-5 flex flex-col justify-between h-[155px]"
|
||||
>
|
||||
<div>
|
||||
<p className="text-[10px] font-bold tracking-wider text-[#63758e] uppercase">
|
||||
{card.title}
|
||||
</p>
|
||||
<h2 className={`text-3xl font-bold mt-1.5 tracking-tight ${card.valueColor}`}>
|
||||
{card.value}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-[11px] text-[#63758e] mb-3">
|
||||
{card.subtext}
|
||||
</p>
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full bg-[#132338] h-[3px] rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${card.color}`}
|
||||
style={{ width: `${card.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* --- TABLE SECTION --- */}
|
||||
<div className="mt-6">
|
||||
<Card>
|
||||
<CardHeader title="Portfolio pulse" subtitle="live · all sites · one context" />
|
||||
<div className="mt-4">
|
||||
<Table headers={connectedheaders} rows={connectedrows} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* --- BELOW TABLE SECTION (RISK RADAR, VENDOR PERFORMANCE & LIVE FEED) --- */}
|
||||
<div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
{/* Left Column: Risk Radar (7 Cols) */}
|
||||
<div className="lg:col-span-7">
|
||||
<Card >
|
||||
<CardHeader title="Risk radar · before it escalates" subtitle="predictive · ops data" />
|
||||
<div className="mt-5 divide-y divide-[#132235]/60">
|
||||
{RISK_RADAR_ITEMS.map((item, index) => (
|
||||
<div key={index} className="py-3.5 first:pt-0 last:pb-0 flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${item.dotColor}`} />
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-white tracking-wide">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-[11px] text-[#7e8c9f] mt-1 leading-relaxed max-w-lg">
|
||||
{item.desc}
|
||||
</p>
|
||||
<p className={`text-[10px] font-mono mt-1.5 ${item.tagColor}`}>
|
||||
⏱ {item.tag}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="shrink-0 bg-[#0c1827] hover:bg-[#142337] border border-[#182a40] text-slate-200 text-[11px] px-3 py-1 rounded-md transition font-medium">
|
||||
{item.action}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Vendor Performance & Live Context Feed (5 Cols) */}
|
||||
<div className="lg:col-span-5 flex flex-col gap-6">
|
||||
{/* Top Right: Vendor Performance */}
|
||||
<Card >
|
||||
<CardHeader title="Vendor performance" subtitle="completion × SLA × rating" />
|
||||
<div className="mt-5 space-y-3.5">
|
||||
{VENDOR_PERFORMANCE.map((vendor, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-xs gap-3">
|
||||
<span className="text-[#8e9bae] w-28 truncate font-medium">{vendor.name}</span>
|
||||
<div className="flex-1 h-2 rounded-full bg-[#101e30] overflow-hidden">
|
||||
<div className={`h-2 rounded-full ${vendor.barColor}`} style={{ width: `${vendor.score}%` }} />
|
||||
</div>
|
||||
<span className="font-mono font-bold text-white w-6 text-right">{vendor.score}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-[#596980] mt-5 pt-3 border-t border-[#132235]/60">
|
||||
GreenScape flagged — also holds the disputed invoice in AI Helpdesk.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
{/* Bottom Right: Live Context Feed */}
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl flex-1">
|
||||
<CardHeader title="Live context feed" />
|
||||
<div className="mt-5 divide-y divide-[#132235]/60">
|
||||
{LIVE_FEED.map((feed, idx) => (
|
||||
<div key={idx} className="py-3 first:pt-0 last:pb-0 flex items-start gap-4">
|
||||
<span className="text-[10px] font-mono text-[#596980] w-10 shrink-0 pt-0.5">
|
||||
{feed.time}
|
||||
</span>
|
||||
<p className="text-xs text-slate-200 font-medium leading-snug">
|
||||
{feed.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- INFO BANNER --- */}
|
||||
<div className="mt-8 relative">
|
||||
<InfoBanner
|
||||
boldText="How it works:"
|
||||
normalText="connected ops unifies maintenance logs, invoice verification, and operational KPIs across sites to eliminate manual reporting and surface SLA risks early."
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user