Configure Completed is added
This commit is contained in:
250
components/dashboard/configure/masterData.tsx
Normal file
250
components/dashboard/configure/masterData.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Plus, QrCode, Sparkles } from "lucide-react";
|
||||
|
||||
export default function MasterDataPortal() {
|
||||
const [activeTab, setActiveTab] = useState("Block / Floor / Zone");
|
||||
|
||||
// Sample data for the hierarchy cards
|
||||
const blocks = ["Block 1", "Block 2", "Tower A"];
|
||||
const floors = ["Ground", "Floor 1", "Floor 2"];
|
||||
const zones = ["Zone N", "Zone Z1", "Zone Z2"];
|
||||
|
||||
return (
|
||||
<div className=" text-slate-100 font-sans my-15">
|
||||
{/* --- BREADCRUMB --- */}
|
||||
<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-600">•</span>
|
||||
<span className="text-slate-500">CONFIGURE</span>
|
||||
<span className="text-slate-600">•</span>
|
||||
<span className="text-slate-500">MASTER DATA</span>
|
||||
</div>
|
||||
|
||||
{/* --- PAGE HEADER --- */}
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
Master data
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-2xl leading-relaxed">
|
||||
Every transactional module reads from these masters — keep them complete and
|
||||
they cascade across equipment, requests, budgets, training and reports.
|
||||
</p>
|
||||
|
||||
{/* --- CATEGORY BUTTONS / TABS --- */}
|
||||
<div className="mt-6 space-y-4">
|
||||
{/* Row 1: Site & Location, Assets, Operations, Finance */}
|
||||
<div className="flex flex-wrap gap-6 items-start text-xs font-semibold">
|
||||
{/* SITE & LOCATION */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
|
||||
SITE & LOCATION
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setActiveTab("Block / Floor / Zone")}
|
||||
className={`px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all ${
|
||||
activeTab === "Block / Floor / Zone"
|
||||
? "bg-[#0b2926] text-emerald-400 border-emerald-500/80 shadow-[0_0_12px_rgba(16,185,129,0.15)]"
|
||||
: "bg-[#0c1622] text-slate-300 border-slate-800 hover:border-slate-700"
|
||||
}`}
|
||||
>
|
||||
Block / Floor / Zone
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ASSETS */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
|
||||
ASSETS
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Manufacturer", "Service Provider", "Criticality"].map((item) => (
|
||||
<button
|
||||
key={item}
|
||||
onClick={() => setActiveTab(item)}
|
||||
className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
|
||||
activeTab === item
|
||||
? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
|
||||
: "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
|
||||
}`}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OPERATIONS */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
|
||||
OPERATIONS
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Service Type", "Unit", "Store", "Partners"].map((item) => (
|
||||
<button
|
||||
key={item}
|
||||
onClick={() => setActiveTab(item)}
|
||||
className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
|
||||
activeTab === item
|
||||
? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
|
||||
: "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
|
||||
}`}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FINANCE */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
|
||||
FINANCE
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Budget Category", "Budget Type"].map((item) => (
|
||||
<button
|
||||
key={item}
|
||||
onClick={() => setActiveTab(item)}
|
||||
className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
|
||||
activeTab === item
|
||||
? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
|
||||
: "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
|
||||
}`}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: People */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
|
||||
PEOPLE
|
||||
</span>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setActiveTab("Course")}
|
||||
className={`px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all ${
|
||||
activeTab === "Course"
|
||||
? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
|
||||
: "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
|
||||
}`}
|
||||
>
|
||||
Course
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- INFO BANNER --- */}
|
||||
<div className="mt-6 bg-[#081524] border border-teal-800/50 rounded-xl p-4 text-xs text-slate-300 leading-relaxed">
|
||||
<span className="font-bold text-white">Within a site:</span> sites themselves are defined in{" "}
|
||||
<span className="font-semibold text-slate-100">Administration → Sites</span> (with geofence).
|
||||
Here you manage the Block / Floor / Zone hierarchy <em className="italic">inside</em> the active
|
||||
site — reused by Equipment, Desks, Requests and Floor plans.
|
||||
</div>
|
||||
|
||||
{/* --- ACTION BUTTON --- */}
|
||||
<div className="flex justify-end mt-6">
|
||||
<button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2.5 rounded-lg flex items-center gap-2 transition-all shadow-md">
|
||||
<span>Generate QR</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* --- HIERARCHY CARDS GRID --- */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-4">
|
||||
{/* Block Column */}
|
||||
<div className="bg-[#0b1623]/90 border border-slate-800/90 rounded-xl p-5 flex flex-col justify-between shadow-sm">
|
||||
<div>
|
||||
<div className="flex items-center justify-between border-b border-slate-800/60 pb-3 mb-3">
|
||||
<h3 className="text-sm font-bold text-white">Block</h3>
|
||||
<span className="text-xs font-mono text-slate-500">{blocks.length}</span>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{blocks.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-xs py-1">
|
||||
<span className="font-medium text-slate-200">{item}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
|
||||
</span>
|
||||
<button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
|
||||
<Plus className="w-3.5 h-3.5 stroke-[3]" />
|
||||
<span>Add block</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Floor Column */}
|
||||
<div className="bg-[#0b1623]/90 border border-slate-800/90 rounded-xl p-5 flex flex-col justify-between shadow-sm">
|
||||
<div>
|
||||
<div className="flex items-center justify-between border-b border-slate-800/60 pb-3 mb-3">
|
||||
<h3 className="text-sm font-bold text-white">Floor</h3>
|
||||
<span className="text-xs font-mono text-slate-500">{floors.length}</span>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{floors.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-xs py-1">
|
||||
<span className="font-medium text-slate-200">{item}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
|
||||
</span>
|
||||
<button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
|
||||
<Plus className="w-3.5 h-3.5 stroke-[3]" />
|
||||
<span>Add floor</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Zone Column */}
|
||||
<div className="bg-[#0b1623]/90 border border-slate-800/90 rounded-xl p-5 flex flex-col justify-between shadow-sm">
|
||||
<div>
|
||||
<div className="flex items-center justify-between border-b border-slate-800/60 pb-3 mb-3">
|
||||
<h3 className="text-sm font-bold text-white">Zone</h3>
|
||||
<span className="text-xs font-mono text-slate-500">{zones.length}</span>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{zones.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-xs py-1">
|
||||
<span className="font-medium text-slate-200">{item}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
|
||||
</span>
|
||||
<button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
|
||||
<Plus className="w-3.5 h-3.5 stroke-[3]" />
|
||||
<span>Add zone</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
209
components/dashboard/configure/rolesaccess.tsx
Normal file
209
components/dashboard/configure/rolesaccess.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
|
||||
// Initial roles state
|
||||
const rolesList = [
|
||||
{ id: "admin", label: "Admin", badge: "all" },
|
||||
{ id: "helpdesk", label: "Helpdesk", badge: "scoped" },
|
||||
{ id: "mne_supervisor", label: "M&E Supervisor", badge: "scoped" },
|
||||
{ id: "technician", label: "Technician", badge: "scoped" },
|
||||
{ id: "tenant", label: "Tenant", badge: "scoped" },
|
||||
];
|
||||
|
||||
// Initial permissions table data
|
||||
const initialPermissions = [
|
||||
{
|
||||
id: 1,
|
||||
module: "Help Desk",
|
||||
menu: "Daily Location Checklist",
|
||||
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
module: "Equipment",
|
||||
menu: "Site-Wise Equipment",
|
||||
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
module: "Equipment",
|
||||
menu: "AMC Schedule",
|
||||
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
module: "Request",
|
||||
menu: "TFM Request",
|
||||
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
module: "Energy",
|
||||
menu: "Meter Reading",
|
||||
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
module: "Master",
|
||||
menu: "Request Location",
|
||||
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
module: "Security",
|
||||
menu: "Users",
|
||||
permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
|
||||
},
|
||||
];
|
||||
|
||||
export default function RolesAccessPortal() {
|
||||
const [activeTopTab, setActiveTopTab] = useState("Roles & Permissions");
|
||||
const [selectedRole, setSelectedRole] = useState("mne_supervisor");
|
||||
const [permissions, setPermissions] = useState(initialPermissions);
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
{/* --- BREADCRUMB --- */}
|
||||
<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-600">•</span>
|
||||
<span className="text-slate-500">CONFIGURE</span>
|
||||
<span className="text-slate-600">•</span>
|
||||
<span className="text-slate-500">ROLES & ACCESS</span>
|
||||
</div>
|
||||
|
||||
{/* --- PAGE HEADER --- */}
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
Roles & access
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-2xl leading-relaxed">
|
||||
Per-tenant role permissions, which platform users can sign in here and with what
|
||||
role, and ticket escalation routing.
|
||||
</p>
|
||||
|
||||
{/* --- MAIN TABS --- */}
|
||||
<div className="flex items-center gap-8 border-b border-slate-800/80 mt-8 text-sm font-semibold">
|
||||
{["Roles & Permissions", "Tenant Access", "Escalation Matrix"].map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setActiveTopTab(tab)}
|
||||
className={`pb-3 relative transition-colors ${
|
||||
activeTopTab === tab
|
||||
? "text-emerald-400 font-bold"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
{tab}
|
||||
{activeTopTab === tab && (
|
||||
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-400 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* --- MATRIX CONTAINER --- */}
|
||||
<div className="mt-6 bg-[#091322]/80 border border-slate-800/80 rounded-xl overflow-hidden grid grid-cols-1 md:grid-cols-12">
|
||||
{/* --- LEFT ROLES SIDEBAR --- */}
|
||||
<div className="md:col-span-3 border-r border-slate-800/80 py-3 divide-y divide-slate-800/40">
|
||||
{rolesList.map((role) => {
|
||||
const isSelected = selectedRole === role.id;
|
||||
return (
|
||||
<button
|
||||
key={role.id}
|
||||
onClick={() => setSelectedRole(role.id)}
|
||||
className={`w-full flex items-center justify-between px-5 py-4 text-left transition-all relative ${
|
||||
isSelected
|
||||
? "bg-[#0c1c2e] text-emerald-400 font-bold"
|
||||
: "text-slate-300 hover:bg-slate-900/40 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{/* Active side indicator */}
|
||||
{isSelected && (
|
||||
<span className="absolute left-0 top-0 bottom-0 w-1 bg-emerald-400" />
|
||||
)}
|
||||
|
||||
<span className="text-sm">{role.label}</span>
|
||||
<span
|
||||
className={`text-[10px] font-mono px-2 py-0.5 rounded border ${
|
||||
role.badge === "all"
|
||||
? "bg-slate-800/80 text-slate-300 border-slate-700"
|
||||
: "bg-slate-900/80 text-slate-400 border-slate-800"
|
||||
}`}
|
||||
>
|
||||
{role.badge}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* --- RIGHT PERMISSIONS TABLE --- */}
|
||||
<div className="md:col-span-9 overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/80 text-[11px] font-bold text-slate-400 uppercase tracking-wider font-mono">
|
||||
<th className="py-4 px-6 font-medium">MODULE</th>
|
||||
<th className="py-4 px-6 font-medium">MENU</th>
|
||||
<th className="py-4 px-4 text-center font-medium">ALL</th>
|
||||
<th className="py-4 px-4 text-center font-medium">VIEW</th>
|
||||
<th className="py-4 px-4 text-center font-medium">ADD</th>
|
||||
<th className="py-4 px-4 text-center font-medium">EDIT</th>
|
||||
<th className="py-4 px-4 text-center font-medium">DELETE</th>
|
||||
<th className="py-4 px-4 text-center font-medium">CANCEL</th>
|
||||
<th className="py-4 px-4 text-center font-medium">PRINT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/50 text-xs">
|
||||
{permissions.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-900/30 transition-colors">
|
||||
{/* Module Name */}
|
||||
<td className="py-4 px-6 font-mono text-slate-400">
|
||||
{row.module}
|
||||
</td>
|
||||
|
||||
{/* Menu Item Name */}
|
||||
<td className="py-4 px-6 font-semibold text-slate-100 whitespace-nowrap">
|
||||
{row.menu}
|
||||
</td>
|
||||
|
||||
{/* Permission Checkboxes */}
|
||||
{(["all", "view", "add", "edit", "delete", "cancel", "print"] as const).map(
|
||||
(permKey) => {
|
||||
const isChecked = row.permissions[permKey];
|
||||
return (
|
||||
<td key={permKey} className="py-4 px-4 text-center">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
className={`w-5 h-5 rounded flex items-center justify-center transition-all border mx-auto ${
|
||||
isChecked
|
||||
? "bg-[#2dd4bf] border-[#2dd4bf] text-slate-950"
|
||||
: "bg-slate-900/60 border-slate-700/80 hover:border-slate-500"
|
||||
}`}
|
||||
>
|
||||
{isChecked && <Check className="w-3.5 h-3.5 stroke-[3]" />}
|
||||
</button>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- SAVE BUTTON --- */}
|
||||
<div className="flex justify-end mt-6">
|
||||
<Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-5 py-2.5 rounded-lg flex items-center gap-2 transition-all shadow-md">
|
||||
<span>Save permissions</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
360
components/dashboard/configure/settings.tsx
Normal file
360
components/dashboard/configure/settings.tsx
Normal file
@@ -0,0 +1,360 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function SettingsPortal() {
|
||||
// App Settings State
|
||||
const [appSettings, setAppSettings] = useState({
|
||||
defaultTenant: "Apple One",
|
||||
timeZone: "Asia/Kolkata (IST)",
|
||||
dateFormat: "dd-mm-yyyy",
|
||||
currency: "₹ INR",
|
||||
language: "English",
|
||||
appearance: "Light",
|
||||
});
|
||||
|
||||
// Notifications State
|
||||
const [notifications, setNotifications] = useState({
|
||||
emailAlerts: true,
|
||||
pushNotifications: true,
|
||||
slaBreachAlerts: true,
|
||||
workPermitAlerts: true,
|
||||
dailyDigest: false,
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-200 font-sans">
|
||||
{/* Top Header & Breadcrumb */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
|
||||
<span className="hover:text-slate-200 cursor-pointer">
|
||||
APPLE ONE — HQ TOWER
|
||||
</span>{" "}
|
||||
• <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
|
||||
• <span className="text-slate-300">SETTINGS</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white mb-1">Settings</h1>
|
||||
<p className="text-slate-400 text-sm">
|
||||
Personal and notification preferences for this tenant workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Save Changes Button */}
|
||||
<div>
|
||||
<button className="bg-[#2DD4BF] hover:bg-[#26b8a5] text-[#070D19] font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors shadow-sm">
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Grid Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
{/* Left Column: App Settings */}
|
||||
<div className="lg:col-span-7 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
|
||||
<h2 className="text-base font-semibold text-white">App settings</h2>
|
||||
<span className="text-xs text-slate-400">Apple One</span>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-800/50 px-6 text-sm">
|
||||
{/* Default Tenant */}
|
||||
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Default tenant</p>
|
||||
<p className="text-xs text-slate-400">Workspace loaded on sign-in</p>
|
||||
</div>
|
||||
<select
|
||||
value={appSettings.defaultTenant}
|
||||
|
||||
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
||||
>
|
||||
<option value="Apple One">Apple One</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Time Zone */}
|
||||
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Time zone</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Used for timestamps & SLA clocks
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={appSettings.timeZone}
|
||||
|
||||
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
||||
>
|
||||
<option value="Asia/Kolkata (IST)">Asia/Kolkata (IST)</option>
|
||||
<option value="UTC">UTC</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Date Format */}
|
||||
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Date format</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Display format across the app
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={appSettings.dateFormat}
|
||||
|
||||
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
||||
>
|
||||
<option value="dd-mm-yyyy">dd-mm-yyyy</option>
|
||||
<option value="mm-dd-yyyy">mm-dd-yyyy</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Currency */}
|
||||
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Currency</p>
|
||||
<p className="text-xs text-slate-400">Inventory, AMC & cost figures</p>
|
||||
</div>
|
||||
<select
|
||||
value={appSettings.currency}
|
||||
|
||||
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
||||
>
|
||||
<option value="₹ INR">₹ INR</option>
|
||||
<option value="$ USD">$ USD</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Language */}
|
||||
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Language</p>
|
||||
<p className="text-xs text-slate-400">Interface language</p>
|
||||
</div>
|
||||
<select
|
||||
value={appSettings.language}
|
||||
|
||||
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
||||
>
|
||||
<option value="English">English</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Appearance */}
|
||||
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Appearance</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Your personal light / dark preference
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
value={appSettings.appearance}
|
||||
|
||||
className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
|
||||
>
|
||||
<option value="Light">Light</option>
|
||||
<option value="Dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Brand Accent */}
|
||||
<div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Brand accent</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Set per tenant in Administration → Preferences
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-xs font-mono text-slate-400">
|
||||
<span className="w-5 h-5 rounded bg-[#2DD4BF] border border-slate-600 inline-block" />
|
||||
<span>#2DD4BF</span>
|
||||
<span>• inherited</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Notifications & Personal Settings */}
|
||||
<div className="lg:col-span-5 space-y-6">
|
||||
{/* Notifications Card */}
|
||||
<div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
||||
<div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
|
||||
<h2 className="text-base font-semibold text-white">Notifications</h2>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-800/50 px-6 text-sm">
|
||||
{/* Email Alerts */}
|
||||
<div className="py-3.5 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Email alerts</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Request, approval & escalation emails
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
notifications.emailAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
||||
notifications.emailAlerts ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Push Notifications */}
|
||||
<div className="py-3.5 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Push notifications</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Mobile app push for assignments
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
notifications.pushNotifications ? "bg-[#2DD4BF]" : "bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
||||
notifications.pushNotifications ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* SLA Breach Alerts */}
|
||||
<div className="py-3.5 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">SLA breach alerts</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Notify when a request goes overdue
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
notifications.slaBreachAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
||||
notifications.slaBreachAlerts ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Work-permit Alerts */}
|
||||
<div className="py-3.5 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Work-permit alerts</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Notify on permit raise & approval
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
notifications.workPermitAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
||||
notifications.workPermitAlerts ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Daily Digest */}
|
||||
<div className="py-3.5 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Daily digest</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Morning summary of open items
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
notifications.dailyDigest ? "bg-[#2DD4BF]" : "bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
|
||||
notifications.dailyDigest ? "translate-x-6" : "translate-x-1"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personal Settings Card */}
|
||||
<div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
||||
<div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
|
||||
<h2 className="text-base font-semibold text-white">Personal settings</h2>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-4 text-xs font-mono">
|
||||
<div className="flex items-center">
|
||||
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
||||
NAME
|
||||
</span>
|
||||
<span className="text-slate-100 font-sans text-sm font-semibold">
|
||||
Dhananjay T.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
||||
ROLE
|
||||
</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-slate-100 font-sans text-sm font-semibold">
|
||||
Admin
|
||||
</span>
|
||||
<span className="inline-flex items-center space-x-1 px-2 py-0.5 rounded-full text-[10px] font-sans font-semibold bg-emerald-950/80 border border-emerald-800 text-emerald-400">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
|
||||
<span>COMPLETED</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
||||
EMAIL
|
||||
</span>
|
||||
<span className="text-slate-200">dhananjay@kafm.io</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
|
||||
MOBILE
|
||||
</span>
|
||||
<span className="text-slate-200">98•••••012</span>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="pt-4 flex items-center space-x-4 font-sans">
|
||||
<button className="px-4 py-2 bg-[#080E21] hover:bg-slate-800 border border-slate-700/80 rounded-lg text-slate-200 text-xs font-medium transition-colors">
|
||||
Edit profile
|
||||
</button>
|
||||
<button className="text-slate-400 hover:text-slate-200 text-xs font-medium transition-colors">
|
||||
Change password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
211
components/dashboard/configure/userLocation.tsx
Normal file
211
components/dashboard/configure/userLocation.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
// Mock user location data matching the screenshot
|
||||
const userData = [
|
||||
{
|
||||
name: "Dhananjay T.",
|
||||
email: "dhananjay@kafm.io",
|
||||
mobile: "7489477369",
|
||||
latitude: "18.5450",
|
||||
longitude: "73.7935",
|
||||
site: "Apple One",
|
||||
// Relative coordinates for the map visual dots (X%, Y%)
|
||||
x: "19%",
|
||||
y: "38%",
|
||||
},
|
||||
{
|
||||
name: "ME Local",
|
||||
email: "me.local@kafm.io",
|
||||
mobile: "9876543210",
|
||||
latitude: "18.5469",
|
||||
longitude: "73.7945",
|
||||
site: "Apple One",
|
||||
x: "44%",
|
||||
y: "43%",
|
||||
},
|
||||
{
|
||||
name: "TECH Local",
|
||||
email: "tech.local@kafm.io",
|
||||
mobile: "9123456780",
|
||||
latitude: "18.5441",
|
||||
longitude: "73.7951",
|
||||
site: "Apple One",
|
||||
x: "69%",
|
||||
y: "48%",
|
||||
},
|
||||
];
|
||||
|
||||
export default function UserLocationPortal() {
|
||||
const [viewMode, setViewMode] = useState<"map" | "table">("table");
|
||||
const [mapType, setMapType] = useState<"MAP" | "SATELLITE">("MAP");
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-200 font-sans">
|
||||
{/* Top Breadcrumb & Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
{/* Breadcrumb */}
|
||||
<div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
|
||||
<span className="hover:text-slate-200 cursor-pointer">
|
||||
APPLE ONE — HQ TOWER
|
||||
</span>{" "}
|
||||
• <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
|
||||
• <span className="text-slate-300">USER LOCATION</span>
|
||||
</div>
|
||||
|
||||
{/* Main Title */}
|
||||
<h1 className="text-3xl font-bold text-white mb-2">User location</h1>
|
||||
<p className="text-slate-400 text-sm max-w-2xl leading-relaxed">
|
||||
Live position of active technicians, captured from the mobile app. Map
|
||||
and table views.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* View Switcher Buttons */}
|
||||
<div className="flex bg-[#0F172A] p-1 rounded-lg border border-slate-800 self-start md:self-auto">
|
||||
<button
|
||||
onClick={() => setViewMode("map")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
||||
viewMode === "map"
|
||||
? "bg-slate-800 text-white shadow-sm"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
Map view
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode("table")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
||||
viewMode === "table"
|
||||
? "bg-[#2DD4BF] text-[#070D19] font-semibold shadow-sm"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
Table view
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Container */}
|
||||
<div className="border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
||||
{/* Header Bar inside card */}
|
||||
<div className="flex items-center justify-between px-6 py-2.5 border-b border-slate-800/60">
|
||||
<span className="text-sm font-semibold text-slate-200">
|
||||
Active users • Apple One
|
||||
</span>
|
||||
<span className="text-xs font-mono tracking-widest text-slate-400">
|
||||
GPS • live
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Live Grid Map Visual Area (Height Reduced to h-36) */}
|
||||
<div className="relative h-36 bg-[#080E21] border-b border-slate-800/60">
|
||||
{/* Dark Grid Background Effect */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-20"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(to right, #334155 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #334155 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: "40px 20px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* User Map Markers */}
|
||||
{userData.map((user, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="absolute group transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
|
||||
style={{ left: user.x, top: user.y }}
|
||||
>
|
||||
{/* Pulsing Outer Glow Effect */}
|
||||
<div className="absolute -inset-1 bg-[#2DD4BF]/30 rounded-full blur-sm animate-pulse" />
|
||||
|
||||
{/* Dot Center */}
|
||||
<div className="relative h-3.5 w-3.5 bg-[#2DD4BF] rounded-full border-2 border-[#080E21] shadow-[0_0_12px_#2DD4BF]" />
|
||||
|
||||
{/* Tooltip on Hover */}
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity bg-slate-900 border border-slate-700 text-xs text-slate-200 rounded px-2.5 py-1.5 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 whitespace-nowrap z-20 pointer-events-none shadow-lg">
|
||||
<p className="font-semibold">{user.name}</p>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
{user.latitude}, {user.longitude}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Map Type Toggle (Bottom Right of Map Area) */}
|
||||
<div className="absolute bottom-2 right-4 flex items-center space-x-2 text-[10px] font-mono tracking-wider text-slate-500">
|
||||
<button
|
||||
onClick={() => setMapType("MAP")}
|
||||
className={`hover:text-slate-300 transition-colors ${
|
||||
mapType === "MAP" ? "text-slate-300 font-bold" : ""
|
||||
}`}
|
||||
>
|
||||
MAP
|
||||
</button>
|
||||
<span>•</span>
|
||||
<button
|
||||
onClick={() => setMapType("SATELLITE")}
|
||||
className={`hover:text-slate-300 transition-colors ${
|
||||
mapType === "SATELLITE" ? "text-slate-300 font-bold" : ""
|
||||
}`}
|
||||
>
|
||||
SATELLITE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Data Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm text-slate-300">
|
||||
<thead>
|
||||
<tr className="text-[11px] font-semibold tracking-wider text-slate-400 uppercase border-b border-slate-800/80 bg-[#0A1128]/40">
|
||||
<th scope="col" className="py-2 px-6">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" className="py-2 px-6">
|
||||
Email
|
||||
</th>
|
||||
<th scope="col" className="py-2 px-6">
|
||||
Mobile
|
||||
</th>
|
||||
<th scope="col" className="py-2 px-6">
|
||||
Latitude
|
||||
</th>
|
||||
<th scope="col" className="py-2 px-6">
|
||||
Longitude
|
||||
</th>
|
||||
<th scope="col" className="py-2 px-6">
|
||||
Site
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/50 font-mono text-xs">
|
||||
{userData.map((user, idx) => (
|
||||
<tr
|
||||
key={idx}
|
||||
className="hover:bg-slate-800/30 transition-colors duration-150"
|
||||
>
|
||||
<td className="py-2.5 px-6 font-sans font-semibold text-slate-100">
|
||||
{user.name}
|
||||
</td>
|
||||
<td className="py-2.5 px-6 text-slate-300">{user.email}</td>
|
||||
<td className="py-2.5 px-6 text-slate-300">{user.mobile}</td>
|
||||
<td className="py-2.5 px-6 text-slate-300">{user.latitude}</td>
|
||||
<td className="py-2.5 px-6 text-slate-300">{user.longitude}</td>
|
||||
<td className="py-2.5 px-6 font-sans text-slate-200">
|
||||
{user.site}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
326
components/dashboard/configure/workflowAutomation.tsx
Normal file
326
components/dashboard/configure/workflowAutomation.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Bot,
|
||||
Activity,
|
||||
Check,
|
||||
Clock,
|
||||
Plus,
|
||||
Sparkles
|
||||
} 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 WorkFlowAutomationPortal() {
|
||||
return (
|
||||
<div className="relative 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">CONFIGURE</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">AUTOMATION</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Workflow automation
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Build if-this-then-that rules for approvals, dispatch and escalation without code — the same engine competitors gate behind IT change requests.
|
||||
</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-teal-400" />
|
||||
<span>Run log</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
|
||||
<Plus className="w-4 h-4 stroke-[3]" />
|
||||
<span>New automation</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 automations */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Active automations"
|
||||
value="4/5"
|
||||
icon={Bot}
|
||||
badgeText="live"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Runs this month */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Runs this month"
|
||||
value="48"
|
||||
icon={Activity}
|
||||
badgeText="triggered"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Tasks auto-handled */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Tasks auto-handled"
|
||||
value="80%"
|
||||
icon={Check}
|
||||
badgeText="no touch"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Time saved */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Time saved"
|
||||
value="~34h"
|
||||
icon={Clock}
|
||||
badgeText="est. / month"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- RULE BUILDER HEADER SECTION --- */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-5 mb-4 shadow-xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-sm font-semibold text-white tracking-wide">
|
||||
Rule builder
|
||||
</h2>
|
||||
<span className="text-xs font-mono text-slate-500 tracking-wider">
|
||||
trigger → condition → action
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* WHEN Step */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
|
||||
WHEN
|
||||
</span>
|
||||
<button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/40 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
|
||||
Trigger event
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* IF Step */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
|
||||
IF
|
||||
</span>
|
||||
<button className="px-3.5 py-1.5 rounded-lg border border-slate-700 text-slate-300 text-xs font-mono font-medium transition-colors">
|
||||
Condition
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* THEN Step */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
|
||||
THEN
|
||||
</span>
|
||||
<button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/30 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
|
||||
Action
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Step Button */}
|
||||
<button className="bg-[#2DD4BF] hover:bg-teal-300 text-[#070D19] font-bold text-xs px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors self-end sm:self-center shadow-sm">
|
||||
<Plus className="w-4 h-4 stroke-[3]" />
|
||||
<span>Add step</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- AUTOMATION RULE CARDS LIST --- */}
|
||||
<div className="space-y-3">
|
||||
{/* Rule 1 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
Auto-dispatch critical breakdowns
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Request raised
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Criticality = Critical
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Assign to on-call M&E + notify supervisor
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">12 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 2 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
SLA breach escalation
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN SLA timer > 90%
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Status ≠ Completed
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Escalate to L2 + email FM lead
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">5 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 3 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
PPM from health alert
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Asset health < 58
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF No open PM
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Raise condition-based PM work order
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">8 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 4 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-slate-700">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-0 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
Low-stock reorder
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Stock ≤ minimum
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Item is consumable
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Draft purchase request to store
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-slate-400">Paused</p>
|
||||
<p className="text-[11px] text-slate-500">0 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 5 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
Visitor pre-approval
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Visitor invited
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Host confirmed
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Issue QR pass + notify security
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">23 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
boldText='No IT in the loop: '
|
||||
normalText='operations staff compose these rules directly. Every automation is versioned and reversible — pause any rule with the toggle and the workflow reverts to manual instantly.'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
228
components/dashboard/intelligence/aiHelpDesk.tsx
Normal file
228
components/dashboard/intelligence/aiHelpDesk.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
import {
|
||||
Clock,
|
||||
ShieldCheck,
|
||||
Bot,
|
||||
Settings,
|
||||
ReceiptIndianRupee,
|
||||
} from "lucide-react";
|
||||
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
import Button from "@/components/common/button";
|
||||
import NavigationTabs from "@/components/common/tabs";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import { Card } from "@/components/common/cardWrapper";
|
||||
import { CardHeader } from "@/components/common/cardHeader";
|
||||
import { aiHelpdeskTabs, HANDLES_DATA, LIVE_ACTIVITIES } from "@/constants/constant";
|
||||
|
||||
// Sample mock data for Agent Activity
|
||||
|
||||
export default function AiHelpdeskPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>("Desk Booking");
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
{/* --- HEADER SECTION WITH BUTTONS --- */}
|
||||
<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 className="text-slate-500">INTELLIGENCE</span>
|
||||
<span>•</span>
|
||||
<span className="text-slate-500">AI HELPDESK</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
AI Helpdesk & automation
|
||||
</h1>
|
||||
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
A 24/7 agent that triages service requests, resolves routine issues, verifies vendor invoices against work orders, and enforces SLAs — with every action auditable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- ACTION BUTTONS --- */}
|
||||
<div className="flex items-center gap-2.5 self-start mt-10">
|
||||
<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">
|
||||
<Settings className="w-4 h-4 text-slate-300" />
|
||||
<span>Agent settings</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">
|
||||
<Bot className="w-4 h-4 stroke-[3]" />
|
||||
<span>Ask AI</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Tabs (Not changed) */}
|
||||
<NavigationTabs
|
||||
tabs={aiHelpdeskTabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
className="mb-6"
|
||||
/>
|
||||
|
||||
{/* --- STAT CARDS --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
{/* Auto-resolved */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Auto-resolved"
|
||||
value="68%"
|
||||
icon={Bot}
|
||||
badgeText="routine requests"
|
||||
badgeClassName="text-emerald-400 font-mono"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
/>
|
||||
|
||||
{/* Median first response */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Median first response"
|
||||
value="41 s"
|
||||
icon={Clock}
|
||||
badgeText="24/7 coverage"
|
||||
badgeClassName="text-emerald-400 font-mono"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
/>
|
||||
|
||||
{/* Invoices auto-verified */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Invoices auto-verified"
|
||||
value="₹4.2 L"
|
||||
icon={ReceiptIndianRupee}
|
||||
badgeText="this month"
|
||||
badgeClassName="text-slate-400 font-mono"
|
||||
iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
|
||||
/>
|
||||
|
||||
{/* Breaches prevented */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Breaches prevented"
|
||||
value="12"
|
||||
icon={ShieldCheck}
|
||||
badgeText="SLA enforcement • 30 d"
|
||||
badgeClassName="text-emerald-400 font-mono"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- AGENT ACTIVITY & DEFLECTION / HANDLES SECTION --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-8">
|
||||
|
||||
{/* Left Column: Agent activity · live (8 Cols) */}
|
||||
<Card className="lg:col-span-7 justify-start">
|
||||
<CardHeader
|
||||
title="Agent activity · live"
|
||||
subtitle="auto · routed · escalated"
|
||||
/>
|
||||
|
||||
<div className="mt-4 divide-y divide-[#132235]/60">
|
||||
{LIVE_ACTIVITIES.map((act, index) => (
|
||||
<div key={index} className="py-3.5 first:pt-1 last:pb-1 flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<span className="text-[11px] font-mono text-slate-500 whitespace-nowrap mt-0.5">
|
||||
{act.time}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<h4 className="text-xs font-bold text-white truncate">
|
||||
{act.title}
|
||||
</h4>
|
||||
<p className="text-[11px] text-slate-400 mt-0.5 leading-snug">
|
||||
{act.detail}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-1 shrink-0">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold border ${act.statusColor}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${act.dotColor}`} />
|
||||
{act.status}
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-slate-500">
|
||||
{act.conf}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Right Column: Deflection & What the agent handles (5 Cols) */}
|
||||
<div className="lg:col-span-5 flex flex-col gap-6">
|
||||
|
||||
{/* Top Card: Deflection · last 7 days */}
|
||||
<Card className=" border-[#132235] p-5 rounded-xl">
|
||||
<CardHeader title="Deflection · last 7 days" />
|
||||
|
||||
<div className="mt-5 space-y-3.5">
|
||||
{/* Item 1 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-slate-400 w-28">Auto-resolved</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
|
||||
<div className="h-2 rounded-full bg-teal-400" style={{ width: "68%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">68%</span>
|
||||
</div>
|
||||
|
||||
{/* Item 2 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-slate-400 w-28">Routed to team</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
|
||||
<div className="h-2 rounded-full bg-blue-500" style={{ width: "24%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">24%</span>
|
||||
</div>
|
||||
|
||||
{/* Item 3 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-slate-400 w-28">Escalated to human</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#101e30]">
|
||||
<div className="h-2 rounded-full bg-rose-400" style={{ width: "8%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">8%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-slate-400 mt-5 pt-3 border-t border-[#132235]/60 leading-relaxed">
|
||||
80% less manual data entry — requests are captured, classified and logged by the agent.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
{/* Bottom Card: What the agent handles */}
|
||||
<Card className=" border-[#132235] p-5 rounded-xl flex-1 justify-between">
|
||||
<CardHeader title="What the agent handles" />
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
{HANDLES_DATA.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between">
|
||||
<div>
|
||||
<h5 className="text-xs font-bold text-white">
|
||||
{item.title}
|
||||
</h5>
|
||||
<p className="text-[11px] text-slate-400">
|
||||
{item.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
<span className="inline-flex items-center gap-1 bg-emerald-950/60 border border-emerald-800/40 text-emerald-400 text-[9px] font-bold px-2 py-0.5 rounded-full">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||
ACTIVE
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -13,8 +13,10 @@ import {
|
||||
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 { Card } from '@/components/common/cardWrapper'; // Assuming Card wrapper location
|
||||
import { CardHeader } from '@/components/common/cardHeader'; // Assuming CardHeader location
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { assetHealthheaders, assetHealthrows } from '@/constants/tabledata';
|
||||
|
||||
export default function AssetHealthPortal() {
|
||||
return (
|
||||
@@ -23,13 +25,13 @@ export default function AssetHealthPortal() {
|
||||
<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-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">
|
||||
<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">
|
||||
@@ -54,7 +56,7 @@ export default function AssetHealthPortal() {
|
||||
{/* --- 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
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Fleet health index"
|
||||
value="69"
|
||||
@@ -95,10 +97,84 @@ export default function AssetHealthPortal() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* --- MAIN CONTENT GRID (TABLE + RIGHT SIDE CARDS) --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
{/* Left Section: Asset Health Register Table Container */}
|
||||
<div className="lg:col-span-2 bg-[#0b1727] border
|
||||
border-slate-800/80 rounded-xl p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-base font-bold text-white tracking-tight">Asset health register</h2>
|
||||
<span className="text-xs font-mono text-slate-500 lowercase">condition-based</span>
|
||||
</div>
|
||||
<Table headers={assetHealthheaders} rows={assetHealthrows}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Section: Reliability & Condition Mix Side Panel */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Card 1: Reliability by group */}
|
||||
<div className="bg-[#0b1727] border border-slate-800/80 rounded-xl p-5">
|
||||
<h3 className="text-base font-bold text-white mb-6">Reliability by group</h3>
|
||||
<div className="space-y-4 text-sm font-medium">
|
||||
{/* Electrical */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-slate-300 w-24">Electrical</span>
|
||||
<div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-amber-400 h-full rounded-full" style={{ width: '75%' }}></div>
|
||||
</div>
|
||||
<span className="text-amber-400 font-bold font-mono text-xs w-6 text-right">75</span>
|
||||
</div>
|
||||
|
||||
{/* Plumbing */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-slate-300 w-24">Plumbing</span>
|
||||
<div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-emerald-400 h-full rounded-full" style={{ width: '86%' }}></div>
|
||||
</div>
|
||||
<span className="text-emerald-400 font-bold font-mono text-xs w-6 text-right">86</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Condition mix */}
|
||||
<div className="bg-[#0b1727] border border-slate-800/80 rounded-xl p-5 ">
|
||||
<h3 className="text-base font-bold text-white mb-6">Condition mix</h3>
|
||||
<div className="space-y-4 text-sm font-medium">
|
||||
{/* Healthy */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-slate-300 w-24">Healthy</span>
|
||||
<div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-emerald-400 h-full rounded-full" style={{ width: '50%' }}></div>
|
||||
</div>
|
||||
<span className="text-slate-300 font-bold font-mono text-xs w-6 text-right">4</span>
|
||||
</div>
|
||||
|
||||
{/* Watch */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-slate-300 w-24">Watch</span>
|
||||
<div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-amber-400 h-full rounded-full" style={{ width: '50%' }}></div>
|
||||
</div>
|
||||
<span className="text-slate-300 font-bold font-mono text-xs w-6 text-right">4</span>
|
||||
</div>
|
||||
|
||||
{/* At risk */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-slate-300 w-24">At risk</span>
|
||||
<div className="flex-1 bg-slate-800/80 h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-rose-500 h-full rounded-full" style={{ width: '0%' }}></div>
|
||||
</div>
|
||||
<span className="text-slate-300 font-bold font-mono text-xs w-6 text-right">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- INFO BANNER --- */}
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
<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."
|
||||
/>
|
||||
|
||||
115
components/dashboard/intelligence/connectedAssets.tsx
Normal file
115
components/dashboard/intelligence/connectedAssets.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Snowflake,
|
||||
AlertTriangle,
|
||||
Zap,
|
||||
Check,
|
||||
FileCheck2,
|
||||
Sparkles
|
||||
} 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 InfoBanner from '@/components/common/infoBanner';
|
||||
import { connectedassettabs } from '@/constants/constant';
|
||||
import { connectedassetheaders, connectedassetrows } from '@/constants/tabledata';
|
||||
|
||||
export default function ConnectedAssetPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>('Asset Fleet');
|
||||
|
||||
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">CONNECTED ASSETS</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Connected refrigeration & HVAC
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
A vertical solution for temperature-critical assets — live setpoint monitoring, excursion response and AI-driven energy optimisation across every store and plant room.
|
||||
</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">
|
||||
<FileCheck2 className="w-4 h-4 text-slate-300" />
|
||||
<span>HACCP log</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">
|
||||
<Sparkles className="w-4 h-4 fill-slate-950" />
|
||||
<span>Apply optimisation</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: Connected assets */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Connected assets"
|
||||
value="42"
|
||||
icon={Snowflake}
|
||||
badgeText="cases · chillers · AHUs"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-sky-950/60 border-sky-800/40 text-sky-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Open excursions */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Open excursions"
|
||||
value="2"
|
||||
icon={AlertTriangle}
|
||||
badgeText="auto-responded"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Energy saved */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Energy saved"
|
||||
value="₹2.1 L"
|
||||
icon={Zap}
|
||||
badgeText="this month · AI setpoints"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/60 border-teal-800/40 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Cold-chain uptime */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Cold-chain uptime"
|
||||
value="99.2%"
|
||||
icon={Check}
|
||||
badgeText="90-day rolling"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-emerald-950/50 border-emerald-800/30 text-emerald-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- NAVIGATION TABS (UNCHANGED) --- */}
|
||||
<NavigationTabs
|
||||
tabs={connectedassettabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
{/* --- TABLE (UNCHANGED) --- */}
|
||||
<Table headers={connectedassetheaders} rows={connectedassetrows} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
203
components/dashboard/intelligence/energybenchmarking.tsx
Normal file
203
components/dashboard/intelligence/energybenchmarking.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
import {
|
||||
Zap,
|
||||
Leaf,
|
||||
AlertTriangle,
|
||||
Database,
|
||||
Sliders,
|
||||
Download,
|
||||
Sparkles
|
||||
} from "lucide-react";
|
||||
|
||||
import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
|
||||
import StatCard from "../../common/dashStatCard";
|
||||
import Button from "@/components/common/button";
|
||||
import InfoBanner from "@/components/common/infoBanner";
|
||||
|
||||
// Import your custom Card components
|
||||
import { Card } from "@/components/common/cardWrapper";
|
||||
import { CardHeader } from "@/components/common/cardHeader";
|
||||
|
||||
export default function EnergyBenchmarkingPortal() {
|
||||
return (
|
||||
<div className="text-[#8e9bae] font-sans my-15">
|
||||
|
||||
|
||||
|
||||
{/* Page Header Section */}
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-[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]">BENCHMARKING</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Portfolio energy benchmarking</h1>
|
||||
<p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
|
||||
Rank every site against a common baseline (EUI, kWh/m²/yr), spotlight the best performer, and quantify the savings if the rest caught up.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
className="flex items-center gap-2 rounded-lg border border-[#1b2a3d] bg-[#0c1626] px-4 py-2 text-xs font-semibold text-white hover:bg-[#132238] transition">
|
||||
<Sliders size={14} className="text-[#3de0c4]" />
|
||||
Set baseline
|
||||
</Button>
|
||||
<Button
|
||||
className="flex items-center gap-1.5 rounded-lg bg-[#3de0c4] hover:bg-[#34ceb3] px-4 py-2 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
|
||||
<Download size={14} strokeWidth={2.5} />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARD GRID --- */}
|
||||
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
variant="icon" title="Portfolio EUI" value="144" icon={Zap}
|
||||
badgeText="kWh/m²/yr" badgeClassName="text-[#596980] lowercase text-[11px]"
|
||||
iconContainerClassName="bg-[#0d2136] border-[#183350] text-[#3b82f6]"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon" title="Best performer" value="Annexe" icon={Leaf}
|
||||
badgeText="124 EUI" badgeClassName="text-[#3de0c4] font-semibold text-[11px]"
|
||||
iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon" title="Highest intensity" value="HQ Tower" icon={AlertTriangle}
|
||||
badgeText="163 EUI" badgeClassName="text-[#f87171] font-semibold text-[11px]"
|
||||
iconContainerClassName="bg-[#2a1318] border-[#481c24] text-[#f87171]"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon" title="Savings if matched" value="₹125k" icon={Database}
|
||||
badgeText="best performer" badgeClassName="text-[#3de0c4] font-semibold text-[11px]"
|
||||
iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- TWO COLUMNS (SITE BENCHMARK & END-USE BREAKDOWN) --- */}
|
||||
<div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
{/* Left Column: Site Benchmark */}
|
||||
<div className="lg:col-span-7">
|
||||
<Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl">
|
||||
<CardHeader title="Site benchmark" subtitle="vs 150 baseline" />
|
||||
|
||||
<div className="mt-6 space-y-6">
|
||||
{/* Annexe Bar */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs font-semibold">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white">Annexe</span>
|
||||
<span className="bg-[#0b2823] text-[#3de0c4] text-[9px] font-bold px-1.5 py-0.5 rounded border border-[#13423a]">BEST</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-bold text-[#f59e0b]">124</span>
|
||||
<span className="text-[#3de0c4] text-[11px]">-17%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2.5 w-full rounded-full bg-[#111e30]">
|
||||
<div className="h-2.5 rounded-full bg-[#f59e0b] transition-all duration-500" style={{ width: "70%" }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* HQ Tower Bar */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs font-semibold">
|
||||
<span className="text-white">HQ Tower</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-bold text-[#f87171]">163</span>
|
||||
<span className="text-[#f87171] text-[11px]">+9%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2.5 w-full rounded-full bg-[#111e30]">
|
||||
<div className="h-2.5 rounded-full bg-[#f87171] transition-all duration-500" style={{ width: "90%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column: End-use Breakdown */}
|
||||
<div className="lg:col-span-5">
|
||||
<Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<CardHeader title="End-use breakdown" subtitle="portfolio" />
|
||||
|
||||
<div className="mt-4 space-y-3.5">
|
||||
{/* Item 1 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-[#8e9bae] w-24">HVAC</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
||||
<div className="h-2 rounded-full bg-[#3de0c4]" style={{ width: "52%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">52%</span>
|
||||
</div>
|
||||
|
||||
{/* Item 2 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-[#8e9bae] w-24">Lighting</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
||||
<div className="h-2 rounded-full bg-[#3b82f6]" style={{ width: "18%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">18%</span>
|
||||
</div>
|
||||
|
||||
{/* Item 3 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-[#8e9bae] w-24">Plug loads</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
||||
<div className="h-2 rounded-full bg-[#f59e0b]" style={{ width: "14%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">14%</span>
|
||||
</div>
|
||||
|
||||
{/* Item 4 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-[#8e9bae] w-24">Lifts & pumps</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
||||
<div className="h-2 rounded-full bg-[#10b981]" style={{ width: "11%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">11%</span>
|
||||
</div>
|
||||
|
||||
{/* Item 5 */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-[#8e9bae] w-24">Other</span>
|
||||
<div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
|
||||
<div className="h-2 rounded-full bg-[#475569]" style={{ width: "5%" }} />
|
||||
</div>
|
||||
<span className="font-bold text-white w-8 text-right">5%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-[#7e8c9f] mt-4 pt-3 border-t border-[#172538]/60 leading-relaxed">
|
||||
HVAC dominates intensity — the fastest lever for closing the gap to <span className="font-bold text-white">Annexe</span>.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Footer / Ask AI Floating Banner */}
|
||||
<div className="mt-8 relative">
|
||||
<InfoBanner
|
||||
boldText="How it works:"
|
||||
normalText="normalised EUI puts every site on one scale regardless of size. Deviation from baseline flags outliers; replicating the best performer's operating strategy across the portfolio is the quick win."
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
220
components/dashboard/intelligence/gpsTracking.tsx
Normal file
220
components/dashboard/intelligence/gpsTracking.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
ShieldCheck,
|
||||
MapPin,
|
||||
Check,
|
||||
Clock,
|
||||
BarChart2,
|
||||
Map
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import NavigationTabs from '@/components/common/tabs';
|
||||
|
||||
// Card Components
|
||||
import { Card } from "@/components/common/cardWrapper";
|
||||
import { CardHeader } from "@/components/common/cardHeader";
|
||||
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import { gpsTrackingtabs } from '@/constants/constant';
|
||||
|
||||
// Staff Table Data
|
||||
const STAFF_DATA = [
|
||||
{ name: "Ravi Kumar", role: "M&E Technician", zone: "Chiller plant", inTime: "08:02", hrs: "6.4", status: "ON-SITE", statusType: "success" },
|
||||
{ name: "Sana Iqbal", role: "HVAC Engineer", zone: "AHU room L7", inTime: "08:15", hrs: "6.1", status: "ON-SITE", statusType: "success" },
|
||||
{ name: "Mohan D.", role: "Electrician", zone: "En route", inTime: "—", hrs: "0", status: "EN-ROUTE", statusType: "warning" },
|
||||
{ name: "Lakshmi N.", role: "Housekeeping Lead", zone: "Lobby + L2", inTime: "07:48", hrs: "6.7", status: "ON-SITE", statusType: "success" },
|
||||
{ name: "Arjun P.", role: "Plumber", zone: "Off-site", inTime: "—", hrs: "0", status: "OFF-SITE", statusType: "neutral" },
|
||||
{ name: "Fatima R.", role: "BMS Operator", zone: "Control room", inTime: "06:55", hrs: "7.6", status: "ON-SITE", statusType: "success" },
|
||||
];
|
||||
|
||||
export default function GpsTrackingPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>('Live tracking');
|
||||
|
||||
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">GPS TRACKING</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
GPS staff tracking & geo-fencing
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Live geo-tagged locations, geo-fence attendance validation, route history and site entry / exit logs — battery-optimised with cell-tower fallback and mobile-app capture.
|
||||
</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">
|
||||
<Map className="w-4 h-4 text-slate-300" />
|
||||
<span>Geo-fences</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">
|
||||
<BarChart2 className="w-4 h-4 stroke-[2.5]" />
|
||||
<span>Export</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARDS --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="On-site now"
|
||||
value="4"
|
||||
icon={ShieldCheck}
|
||||
badgeText=""
|
||||
badgeClassName="text-emerald-400 lowercase font-mono text-xs"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
subtitle=""
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="En route"
|
||||
value="1"
|
||||
icon={MapPin}
|
||||
badgeText=""
|
||||
badgeClassName="text-slate-400 lowercase font-mono text-xs"
|
||||
iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
|
||||
subtitle=""
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Auto check-ins"
|
||||
value="4"
|
||||
icon={Check}
|
||||
badgeText=""
|
||||
badgeClassName="text-teal-400 lowercase font-mono text-xs"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
subtitle=""
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Avg on-site"
|
||||
value="6.7 h"
|
||||
icon={Clock}
|
||||
badgeText=""
|
||||
badgeClassName="text-slate-400 lowercase font-mono text-xs"
|
||||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||||
subtitle=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- NAVIGATION TABS --- */}
|
||||
<NavigationTabs
|
||||
tabs={gpsTrackingtabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
{/* --- MAP & STAFF STATUS SECTION BELOW TABS --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
|
||||
{/* Left: Live Staff Map */}
|
||||
<div className="lg:col-span-7">
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between min-h-[380px]">
|
||||
<CardHeader title="Live staff map · Apple One — HQ Tower" subtitle="GPS · 1s refresh" />
|
||||
|
||||
{/* Map Canvas Visual */}
|
||||
<div className="relative flex-1 mt-4 rounded-lg border border-teal-500/20 bg-[#060e17] overflow-hidden p-4 flex items-center justify-center">
|
||||
{/* Grid Background Lines */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-15"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(#2dd4bf 1px, transparent 1px)`,
|
||||
backgroundSize: '20px 20px'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Geo-Fence Boundary Box */}
|
||||
<div className="relative w-[85%] h-[70%] border-2 border-dashed border-teal-400/60 rounded-xl p-2">
|
||||
<span className="absolute -top-3 left-4 bg-[#060e17] px-2 text-[10px] font-mono text-teal-400 tracking-wider">
|
||||
GEO-FENCE · SITE BOUNDARY
|
||||
</span>
|
||||
|
||||
{/* On-Site Staff Dots */}
|
||||
<div className="absolute top-[35%] left-[25%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
|
||||
<div className="absolute top-[50%] left-[45%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
|
||||
<div className="absolute top-[70%] left-[65%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
|
||||
<div className="absolute top-[30%] left-[80%] w-3 h-3 bg-teal-400 rounded-full shadow-[0_0_10px_#2dd4bf]" />
|
||||
</div>
|
||||
|
||||
{/* En-Route Staff Dot (Outside Fence) */}
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2 w-3.5 h-3.5 bg-amber-400 rounded-full shadow-[0_0_10px_#fbbf24]" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right: Staff Status Table */}
|
||||
<div className="lg:col-span-5">
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
|
||||
<CardHeader title="Staff status" subtitle="6 tracked" />
|
||||
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<table className="w-full text-left text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-[#132235] text-[10px] font-mono text-slate-500 uppercase tracking-wider">
|
||||
<th className="pb-2 font-medium">NAME</th>
|
||||
<th className="pb-2 font-medium">ROLE</th>
|
||||
<th className="pb-2 font-medium">ZONE</th>
|
||||
<th className="pb-2 font-medium">IN</th>
|
||||
<th className="pb-2 font-medium">HRS</th>
|
||||
<th className="pb-2 font-medium text-right">STATUS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#132235]/60">
|
||||
{STAFF_DATA.map((staff, idx) => (
|
||||
<tr key={idx} className="hover:bg-slate-800/20 transition-colors">
|
||||
<td className="py-2.5 font-semibold text-slate-200 pr-2">{staff.name}</td>
|
||||
<td className="py-2.5 text-slate-400 max-w-[90px] truncate pr-2">{staff.role}</td>
|
||||
<td className="py-2.5 text-slate-300 pr-2">{staff.zone}</td>
|
||||
<td className="py-2.5 font-mono text-slate-400">{staff.inTime}</td>
|
||||
<td className="py-2.5 font-mono text-slate-300">{staff.hrs}</td>
|
||||
<td className="py-2.5 text-right">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-mono font-semibold uppercase ${
|
||||
staff.statusType === 'success'
|
||||
? 'bg-emerald-950/80 text-emerald-400 border border-emerald-800/50'
|
||||
: staff.statusType === 'warning'
|
||||
? 'bg-amber-950/80 text-amber-400 border border-amber-800/50'
|
||||
: 'bg-slate-800/80 text-slate-400 border border-slate-700/50'
|
||||
}`}
|
||||
>
|
||||
<span className={`w-1 h-1 rounded-full ${
|
||||
staff.statusType === 'success' ? 'bg-emerald-400' :
|
||||
staff.statusType === 'warning' ? 'bg-amber-400' : 'bg-slate-400'
|
||||
}`} />
|
||||
{staff.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
boldText='Geo-fencing:'
|
||||
normalText='crossing a site boundary auto-marks check-in / check-out; GPS sampling adapts to battery and signal, with a cell-tower fallback when satellite accuracy drops. Click a technician to view their route.'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
291
components/dashboard/intelligence/sustainability.tsx
Normal file
291
components/dashboard/intelligence/sustainability.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Leaf,
|
||||
Activity,
|
||||
ClipboardCheck,
|
||||
Star,
|
||||
BarChart2,
|
||||
Plus,
|
||||
ShieldCheck,
|
||||
Clock
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import NavigationTabs from '@/components/common/tabs';
|
||||
|
||||
// Card Components
|
||||
import { Card } from "@/components/common/cardWrapper";
|
||||
import { CardHeader } from "@/components/common/cardHeader";
|
||||
|
||||
// Custom BarChart Import
|
||||
import BarChart from "@/components/charts/barchart";
|
||||
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import { sustainabilitytabs } from '@/constants/constant';
|
||||
|
||||
// Sample Bar Chart Data for Carbon Emissions
|
||||
const CARBON_EMISSIONS_DATA = [
|
||||
{ month: 'Jan', height: 'h-32' },
|
||||
{ month: 'Feb', height: 'h-32' },
|
||||
{ month: 'Mar', height: 'h-32' },
|
||||
{ month: 'Apr', height: 'h-32' },
|
||||
{ month: 'May', height: 'h-32' },
|
||||
{ month: 'Jun', height: 'h-28' },
|
||||
];
|
||||
|
||||
// Emission Sources Progress Data
|
||||
const EMISSION_SOURCES = [
|
||||
{ name: "Purchased electricity", percentage: "58%", width: "w-[58%]", color: "bg-sky-400" },
|
||||
{ name: "DG / fuel combustion", percentage: "21%", width: "w-[21%]", color: "bg-amber-400" },
|
||||
{ name: "Refrigerants (fugitive)", percentage: "12%", width: "w-[12%]", color: "bg-rose-400" },
|
||||
{ name: "Water & waste", percentage: "9%", width: "w-[9%]", color: "bg-slate-400" },
|
||||
];
|
||||
|
||||
export default function SustainabilityPortal() {
|
||||
const [activeTab, setActiveTab] = useState<string>('ESG Data Hub');
|
||||
|
||||
return (
|
||||
<div className="my-15 text-slate-100 font-sans">
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
|
||||
<span className="text-teal-400">Apple One — HQ Tower</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">INTELLIGENCE</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">SUSTAINABILITY</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
ESG One — sustainability platform
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Every environmental, social and governance metric — carbon, energy, water, waste, safety, DEI, compliance — consolidated on one live platform with framework-ready reporting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-10">
|
||||
<Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
||||
<BarChart2 className="w-4 h-4 text-slate-300" />
|
||||
<span>Framework reports</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
|
||||
<Plus className="w-4 h-4 stroke-[3]" />
|
||||
<span>New target</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARDS --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
{/* Card 1: 118 t */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title=""
|
||||
value="118 t"
|
||||
icon={Leaf}
|
||||
badgeText="-6% vs avg"
|
||||
badgeClassName="text-emerald-400 font-mono text-xs"
|
||||
iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
|
||||
subtitle="CO₂e this month · Scope 1+2"
|
||||
/>
|
||||
|
||||
{/* Card 2: 214 */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title=""
|
||||
value="214"
|
||||
icon={Activity}
|
||||
badgeText="live"
|
||||
badgeClassName="text-slate-400 lowercase font-mono text-xs"
|
||||
iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
|
||||
subtitle="Live data streams · meters + IoT"
|
||||
/>
|
||||
|
||||
{/* Card 3: 5 */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title=""
|
||||
value="5"
|
||||
icon={ClipboardCheck}
|
||||
badgeText="ready"
|
||||
badgeClassName="text-teal-400 lowercase font-mono text-xs"
|
||||
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
||||
subtitle="Frameworks ready · GRI, BRSR, CSRD..."
|
||||
/>
|
||||
|
||||
{/* Card 4: B+ */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title=""
|
||||
value="B+"
|
||||
icon={Star}
|
||||
badgeText="improving"
|
||||
badgeClassName="text-amber-400 lowercase font-mono text-xs"
|
||||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||||
subtitle="ESG rating · on track to A-"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- NAVIGATION TABS --- */}
|
||||
<NavigationTabs
|
||||
tabs={sustainabilitytabs}
|
||||
activeTab={activeTab}
|
||||
onTabChange={setActiveTab}
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
{/* --- ESG CARDS SECTION BELOW TABS --- */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
{/* Environmental Card */}
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
|
||||
<CardHeader title="Environmental" subtitle="metered · live" />
|
||||
<div className="mt-4 space-y-3.5 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Energy</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">1.42 GWh</span>
|
||||
<span className="text-emerald-400">-4.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Water</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">18,400 kL</span>
|
||||
<span className="text-emerald-400">-2.8%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Waste diverted</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">61%</span>
|
||||
<span className="text-emerald-400">+5.0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Refrigerant leaks</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">2 events</span>
|
||||
<span className="text-amber-400">+1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Social Card */}
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
|
||||
<CardHeader title="Social" subtitle="people & occupants" />
|
||||
<div className="mt-4 space-y-3.5 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Safety · LTIFR</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">0.42</span>
|
||||
<span className="text-emerald-400">-0.11</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Training hours</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">1,240</span>
|
||||
<span className="text-emerald-400">+180</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Tenant satisfaction</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">4.4 / 5</span>
|
||||
<span className="text-emerald-400">+0.2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Workforce diversity</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">34%</span>
|
||||
<span className="text-emerald-400">+2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Governance Card */}
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl">
|
||||
<CardHeader title="Governance" subtitle="compliance & ethics" />
|
||||
<div className="mt-4 space-y-3.5 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Statutory compliance</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">98%</span>
|
||||
<span className="text-teal-400">2 open</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Audit findings closed</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">91%</span>
|
||||
<span className="text-teal-400">on time</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Vendor code-of-conduct</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">87%</span>
|
||||
<span className="text-amber-400">signed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-300 font-medium">Data-privacy incidents</span>
|
||||
<div className="flex items-center gap-3 font-mono">
|
||||
<span className="text-white font-bold">0</span>
|
||||
<span className="text-emerald-400">90 days</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* --- CARBON EMISSIONS BAR CHART & EMISSION SOURCES SECTION --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
|
||||
{/* Left: Carbon Emissions BarChart */}
|
||||
<div className="lg:col-span-7">
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
|
||||
<CardHeader title="Carbon emissions · tCO₂e" subtitle="2026 · trending down" />
|
||||
<div className="mt-6">
|
||||
<BarChart data={CARBON_EMISSIONS_DATA} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right: Emission Sources */}
|
||||
<div className="lg:col-span-5">
|
||||
<Card className="bg-[#08121e] border-[#132235] p-5 rounded-xl h-full flex flex-col justify-between">
|
||||
<CardHeader title="Emission sources" subtitle="drill down by site / meter" />
|
||||
<div className="mt-5 space-y-4">
|
||||
{EMISSION_SOURCES.map((source, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-xs gap-3">
|
||||
<span className="text-slate-300 w-36 leading-snug font-medium">{source.name}</span>
|
||||
<div className="flex-1 h-2 rounded-full bg-[#101e30] overflow-hidden">
|
||||
<div className={`h-2 rounded-full ${source.color} ${source.width}`} />
|
||||
</div>
|
||||
<span className="font-mono font-bold text-white w-10 text-right">{source.percentage}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-[#596980] mt-6 pt-3 border-t border-[#132235]/60 leading-relaxed">
|
||||
Every figure traces back to a meter, sensor or signed record — audit-ready by construction.
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
boldText='One platform:'
|
||||
normalText='E, S and G metrics share the same live data spine as operations — a chiller repair updates energy, refrigerant and compliance records in the same thread.'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
334
components/dashboard/iotapplication/alarmsRules.tsx
Normal file
334
components/dashboard/iotapplication/alarmsRules.tsx
Normal file
@@ -0,0 +1,334 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
BarChart2,
|
||||
Check,
|
||||
AlertTriangle,
|
||||
Clock,
|
||||
CheckCircle2,
|
||||
Cpu
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
|
||||
export default function AlarmRulesPortal() {
|
||||
// State for automation rules toggles
|
||||
const [autoWorkOrder, setAutoWorkOrder] = useState(true);
|
||||
const [escalateCriticals, setEscalateCriticals] = useState(true);
|
||||
const [offHoursSetpoint, setOffHoursSetpoint] = useState(true);
|
||||
const [filterPpmTask, setFilterPpmTask] = useState(false);
|
||||
|
||||
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">IOT</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">ALARMS & RULES</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Alarms & automation rules
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Acknowledge live alarms, raise work orders in one click, and manage the automation rules that act on telemetry.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-4">
|
||||
<Button className="bg-[#0e1c2e] hover:bg-slate-800 text-slate-200 border border-[#162942] 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-400" />
|
||||
<span>History</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#10b981] hover:bg-emerald-400 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-lg">
|
||||
<Check className="w-4 h-4 text-slate-950 stroke-[3]" />
|
||||
<span>Acknowledge all (3)</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: Critical open */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Critical open"
|
||||
value="2"
|
||||
icon={AlertTriangle}
|
||||
badgeText="act now"
|
||||
badgeClassName="text-rose-400 lowercase font-mono font-medium"
|
||||
iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Warnings open */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Warnings open"
|
||||
value="1"
|
||||
icon={Clock}
|
||||
badgeText="review"
|
||||
badgeClassName="text-amber-400 lowercase font-mono font-medium"
|
||||
iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Acknowledged */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Acknowledged"
|
||||
value="2"
|
||||
icon={CheckCircle2}
|
||||
badgeText="today"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono font-medium"
|
||||
iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Rules active */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Rules active"
|
||||
value="3 / 4"
|
||||
icon={Cpu}
|
||||
badgeText="automation"
|
||||
badgeClassName="text-slate-400 lowercase font-mono font-medium"
|
||||
iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- MAIN CONTENT GRID --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
{/* --- LEFT SECTION: ALARMS LIST --- */}
|
||||
<div className="lg:col-span-7 bg-[#091322]/80 border border-slate-800/80 rounded-xl p-5 shadow-sm">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-base font-bold text-white">Alarms</h2>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">live · newest first</p>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-800/60">
|
||||
{/* Alarm Item 1 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-3">
|
||||
<div className="flex items-start gap-2.5 min-w-0">
|
||||
<span className="w-2 h-2 rounded-full bg-rose-500 shrink-0 mt-1.5" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-slate-100 truncate">
|
||||
<span className="text-teal-400 font-mono">CH-02</span>
|
||||
{" · "}
|
||||
<span>Condenser approach high — 4.2 K above design</span>
|
||||
</p>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">08:41 · open</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Ack
|
||||
</Button>
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Work order
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alarm Item 2 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-3">
|
||||
<div className="flex items-start gap-2.5 min-w-0">
|
||||
<span className="w-2 h-2 rounded-full bg-amber-500 shrink-0 mt-1.5" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-slate-100 truncate">
|
||||
<span className="text-teal-400 font-mono">AHU-07</span>
|
||||
{" · "}
|
||||
<span>Filter ΔP beyond limit — replacement due</span>
|
||||
</p>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">08:12 · open</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Ack
|
||||
</Button>
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Work order
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alarm Item 3 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-3">
|
||||
<div className="flex items-start gap-2.5 min-w-0">
|
||||
<span className="w-2 h-2 rounded-full bg-rose-500 shrink-0 mt-1.5" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-slate-100 truncate">
|
||||
<span className="text-teal-400 font-mono">CTL-14</span>
|
||||
{" · "}
|
||||
<span>Controller offline — no heartbeat for 30 min</span>
|
||||
</p>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">07:56 · open</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Ack
|
||||
</Button>
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Work order
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alarm Item 4 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-3">
|
||||
<div className="flex items-start gap-2.5 min-w-0">
|
||||
<span className="w-2 h-2 rounded-full bg-amber-500 shrink-0 mt-1.5" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-slate-100 truncate">
|
||||
<span className="text-teal-400 font-mono">SNS-208</span>
|
||||
{" · "}
|
||||
<span>CO₂ trending up in open office L3 — 1,080 ppm</span>
|
||||
</p>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">07:30 · acknowledged</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Work order
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alarm Item 5 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-3">
|
||||
<div className="flex items-start gap-2.5 min-w-0">
|
||||
<span className="w-2 h-2 rounded-full bg-blue-500 shrink-0 mt-1.5" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-slate-100 truncate">
|
||||
<span className="text-teal-400 font-mono">GW-01</span>
|
||||
{" · "}
|
||||
<span>Gateway reconnected after 90 s network drop</span>
|
||||
</p>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">06:58 · acknowledged</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button className="rounded-md border border-slate-700/60 bg-slate-900/40 px-3 py-1 text-xs font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition">
|
||||
Work order
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- RIGHT SECTION: AUTOMATION RULES --- */}
|
||||
<div className="lg:col-span-5 bg-[#091322]/80 border border-slate-800/80 rounded-xl p-5 shadow-sm h-fit">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-base font-bold text-white">Automation rules</h2>
|
||||
<p className="text-xs font-mono text-slate-400 mt-0.5">telemetry → action</p>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-slate-800/60">
|
||||
{/* Rule 1 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-100">
|
||||
Auto work order on critical alarm
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Raises a Help Desk request with the asset and fault pre-filled
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAutoWorkOrder(!autoWorkOrder)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
autoWorkOrder ? 'bg-[#2dd4bf]' : 'bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
autoWorkOrder ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Rule 2 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-100">
|
||||
Escalate unacknowledged criticals
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Notifies the escalation matrix after 15 minutes
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEscalateCriticals(!escalateCriticals)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
escalateCriticals ? 'bg-[#2dd4bf]' : 'bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
escalateCriticals ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Rule 3 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-100">
|
||||
Off-hours setpoint relaxation
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Widens comfort bands 22:00–06:00 to save energy
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOffHoursSetpoint(!offHoursSetpoint)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
offHoursSetpoint ? 'bg-[#2dd4bf]' : 'bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
offHoursSetpoint ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Rule 4 */}
|
||||
<div className="py-3.5 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-100">
|
||||
Filter ΔP → PPM task
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Adds a filter change to the next PPM visit automatically
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFilterPpmTask(!filterPpmTask)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
filterPpmTask ? 'bg-[#2dd4bf]' : 'bg-slate-800'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-300 shadow ring-0 transition duration-200 ease-in-out ${
|
||||
filterPpmTask ? 'translate-x-5 bg-slate-950' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
258
components/dashboard/iotapplication/commandCenter.tsx
Normal file
258
components/dashboard/iotapplication/commandCenter.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import React from 'react';
|
||||
import { BarChart2, AlertTriangle, Sparkles } from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import { Card } from '@/components/common/cardWrapper';
|
||||
import { CardHeader } from '@/components/common/cardHeader';
|
||||
|
||||
|
||||
|
||||
// --- MAIN COMMAND CENTER PORTAL ---
|
||||
export default function CommandCenterPortal() {
|
||||
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-[11px] font-semibold tracking-widest text-[#4e6178] uppercase font-mono">
|
||||
<span className="text-emerald-400 font-bold">APPLE ONE — HQ TOWER</span>
|
||||
<span>•</span>
|
||||
<span>IOT</span>
|
||||
<span>•</span>
|
||||
<span>COMMAND CENTER</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
IoT command center
|
||||
</h1>
|
||||
<p className="text-sm text-[#7f93ac] mt-2 max-w-xl leading-relaxed">
|
||||
Every gateway, controller and sensor across the portfolio on one live board — scoped to Apple One.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-2">
|
||||
<Button className="bg-[#0e1c2e] hover:bg-slate-800 text-slate-200 border border-[#162942] 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-400" />
|
||||
<span>Snapshot</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#10b981] hover:bg-emerald-400 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-lg">
|
||||
<AlertTriangle className="w-4 h-4 fill-slate-950 stroke-[#10b981]" />
|
||||
<span>3 open alarms</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARDS (WITH PROGRESS LINES) --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
{/* Card 1: SITES ONLINE */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
SITES ONLINE
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">2 / 2</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">all streaming</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-[#10b981] h-full rounded-full" style={{ width: '100%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 2: DEVICES */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
DEVICES
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">93</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">5 gateways</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-emerald-400 h-full rounded-full" style={{ width: '80%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 3: LIVE LOAD */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
LIVE LOAD
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">0.46 MW</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">portfolio now</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-sky-500 h-full rounded-full" style={{ width: '60%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 4: OPEN ALARMS */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
OPEN ALARMS
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">3</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">needs attention</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-rose-500 h-full rounded-full" style={{ width: '35%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* --- LOWER SECTION --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{/* Left Column (2 Cards) */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
|
||||
{/* Site Cards Container */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Site 1 */}
|
||||
<Card className="p-4">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-[#10b981]"></span>
|
||||
<h3 className="font-bold text-white text-sm">Apple One — HQ Tower</h3>
|
||||
</div>
|
||||
<span className="text-xs text-[#4e6178] font-mono">2 GW</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-[#8297b0] mt-2">
|
||||
<span><strong className="text-white">38</strong> devices</span>
|
||||
<span><strong className="text-white">200</strong> kW</span>
|
||||
<span className="bg-[#381a24] text-rose-400 font-bold px-2 py-0.5 rounded-full text-[11px] border border-rose-900/50">
|
||||
• 2
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Site 2 */}
|
||||
<Card className="p-4">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-[#10b981]"></span>
|
||||
<h3 className="font-bold text-white text-sm">Apple One — Annexe</h3>
|
||||
</div>
|
||||
<span className="text-xs text-[#4e6178] font-mono">3 GW</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-[#8297b0] mt-2">
|
||||
<span><strong className="text-white">55</strong> devices</span>
|
||||
<span><strong className="text-white">263</strong> kW</span>
|
||||
<span className="bg-[#381a24] text-rose-400 font-bold px-2 py-0.5 rounded-full text-[11px] border border-rose-900/50">
|
||||
• 1
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Protocol Mix Card */}
|
||||
<Card className="p-5">
|
||||
<CardHeader title="Protocol mix" subtitle="by device count" />
|
||||
<div className="space-y-4 text-xs font-medium mt-2">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="w-24 text-[#8297b0]">BACnet</span>
|
||||
<div className="flex-1 bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-[#10b981] h-full rounded-full" style={{ width: '46%' }}></div>
|
||||
</div>
|
||||
<span className="w-8 text-right font-bold text-white">46%</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="w-24 text-[#8297b0]">Modbus</span>
|
||||
<div className="flex-1 bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-[#10b981] h-full rounded-full" style={{ width: '31%' }}></div>
|
||||
</div>
|
||||
<span className="w-8 text-right font-bold text-white">31%</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="w-24 text-[#8297b0]">MQTT / LoRa</span>
|
||||
<div className="flex-1 bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-[#10b981] h-full rounded-full" style={{ width: '18%' }}></div>
|
||||
</div>
|
||||
<span className="w-8 text-right font-bold text-white">18%</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="w-24 text-[#8297b0]">NB-IoT</span>
|
||||
<div className="flex-1 bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-[#10b981] h-full rounded-full" style={{ width: '5%' }}></div>
|
||||
</div>
|
||||
<span className="w-8 text-right font-bold text-white">5%</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Column (Live Alarm Feed) */}
|
||||
<Card className="p-5 flex flex-col justify-between relative">
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<h3 className="font-semibold text-white text-base">Live alarm feed</h3>
|
||||
<button className="text-xs text-[#10b981] font-semibold hover:underline">
|
||||
All alarms
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-[#4e6178] font-mono mb-4">streaming</p>
|
||||
|
||||
<div className="space-y-4 divide-y divide-[#162942]/60">
|
||||
<div className="pt-2">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<span className="w-2 h-2 rounded-full bg-rose-500 mt-1.5 shrink-0"></span>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-slate-200 leading-snug">
|
||||
CH-02 • Condenser approach high — 4.2 K above design
|
||||
</p>
|
||||
<p className="text-[10px] text-[#4e6178] font-mono mt-0.5">08:41 • open</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<span className="w-2 h-2 rounded-full bg-amber-400 mt-1.5 shrink-0"></span>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-slate-200 leading-snug">
|
||||
AHU-07 • Filter ΔP beyond limit — replacement due
|
||||
</p>
|
||||
<p className="text-[10px] text-[#4e6178] font-mono mt-0.5">08:12 • open</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<span className="w-2 h-2 rounded-full bg-rose-500 mt-1.5 shrink-0"></span>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-slate-200 leading-snug">
|
||||
CTL-14 • Controller offline — no heartbeat for 30 min
|
||||
</p>
|
||||
<p className="text-[10px] text-[#4e6178] font-mono mt-0.5">07:56 • open</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<span className="w-2 h-2 rounded-full bg-amber-400 mt-1.5 shrink-0"></span>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-slate-200 leading-snug">
|
||||
SNS-208 • CO₂ trending up in open office L3 — 1,080 ppm
|
||||
</p>
|
||||
<p className="text-[10px] text-[#4e6178] font-mono mt-0.5">07:30 • acknowledged</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
components/dashboard/iotapplication/deviceFleet.tsx
Normal file
108
components/dashboard/iotapplication/deviceFleet.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Grid2X2,
|
||||
AlertTriangle,
|
||||
Sun,
|
||||
Disc,
|
||||
Smartphone,
|
||||
FileText
|
||||
} 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, devicefleetheaders, devicefleetrows } from '@/constants/tabledata';
|
||||
|
||||
export default function DeviceFleetPortal() {
|
||||
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">IOT</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">DEVICE FLEET</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Gateways, controllers & sensors
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
The connected-device registry for Apple One — protocol, firmware and heartbeat for every device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-4">
|
||||
<Button className="bg-[#0e1c2e] hover:bg-slate-800 text-slate-200 border border-[#162942] text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
||||
<Smartphone className="w-4 h-4 text-slate-400" />
|
||||
<span>Pair device</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#10b981] hover:bg-emerald-400 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-lg">
|
||||
<Sun className="w-4 h-4 text-slate-950 stroke-[2.5]" />
|
||||
<span>Update firmware (1)</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: Online */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Online"
|
||||
value="5"
|
||||
icon={Grid2X2}
|
||||
badgeText="heartbeat < 60 s"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Offline */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Offline"
|
||||
value="1"
|
||||
icon={AlertTriangle}
|
||||
badgeText="investigate"
|
||||
badgeClassName="text-rose-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-rose-950/50 border-rose-800/30 text-rose-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Firmware pending */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Firmware pending"
|
||||
value="1"
|
||||
icon={Sun}
|
||||
badgeText="staged rollout"
|
||||
badgeClassName="text-amber-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Protocols */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Protocols"
|
||||
value="4"
|
||||
icon={Disc}
|
||||
badgeText="BACnet • Modbus • MQTT • NB-IoT"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table headers={devicefleetheaders} rows={devicefleetrows}/>
|
||||
|
||||
<div className="mb-10 mt-10">
|
||||
<InfoBanner
|
||||
boldText="Device security is centrally managed: "
|
||||
normalText="registration, trust and firmware policy live in Administration → Security — end users cannot change them."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
198
components/dashboard/iotapplication/energyUtility.tsx
Normal file
198
components/dashboard/iotapplication/energyUtility.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import React from 'react';
|
||||
import { BarChart2, Zap } from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import { Card } from '@/components/common/cardWrapper';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { energyUtilityHeaders, energyUtilityRows } from '@/constants/tabledata';
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
|
||||
export default function EnergyUtilityPortal() {
|
||||
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-[11px] font-semibold tracking-widest text-[#4e6178] uppercase font-mono">
|
||||
<span className="text-emerald-400 font-bold">APPLE ONE — HQ TOWER</span>
|
||||
<span>•</span>
|
||||
<span>IOT</span>
|
||||
<span>•</span>
|
||||
<span>ENERGY & UTILITIES</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Energy & utilities telemetry
|
||||
</h1>
|
||||
<p className="text-sm text-[#7f93ac] mt-2 max-w-xl leading-relaxed">
|
||||
Live smart-meter streams for power, water and gas — the same spine that feeds the Energy module and ESG reporting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-2">
|
||||
<Button className="bg-[#0e1c2e] hover:bg-slate-800 text-slate-200 border border-[#162942] 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-400" />
|
||||
<span>Export readings</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#10b981] hover:bg-emerald-400 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-lg">
|
||||
<Zap className="w-4 h-4 fill-slate-950 text-slate-950" />
|
||||
<span>Open Energy module</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARDS (WITH PROGRESS LINES) --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
|
||||
{/* Card 1: LIVE BUILDING LOAD */}
|
||||
<Card className="p-4 min-h-[120px] flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
LIVE BUILDING LOAD
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">386 kW</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">peak today 512 kW</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-emerald-400 rounded-full" style={{ width: '70%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 2: ENERGY TODAY (Active highlighted border) */}
|
||||
<Card className="p-4 min-h-[120px] flex flex-col justify-between border-2 border-emerald-500/80 bg-emerald-950/10">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
ENERGY TODAY
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">3,120 kWh</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">-4% vs yesterday</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-emerald-400 rounded-full" style={{ width: '65%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 3: WATER TODAY */}
|
||||
<Card className="p-4 min-h-[120px] flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
WATER TODAY
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">38.4 kL</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">municipal + borewell</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-blue-500 h-full rounded-full" style={{ width: '50%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 4: METERS ONLINE */}
|
||||
<Card className="p-4 min-h-[120px] flex flex-col justify-between">
|
||||
<div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
METERS ONLINE
|
||||
</span>
|
||||
<div className="text-3xl font-extrabold text-white mt-1">4 / 6</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">1 gas meter offline</p>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-1 rounded-full mt-4 overflow-hidden">
|
||||
<div className="bg-amber-400 h-full rounded-full" style={{ width: '67%' }}></div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
{/* --- TELEMETRY & BREAKDOWN SECTION --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
{/* Left Side: Smart Meters Table */}
|
||||
<Card className="lg:col-span-7 p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-bold text-white">Smart meters</h2>
|
||||
<p className="text-xs text-[#5c738e] font-mono mt-0.5">auto-polled</p>
|
||||
</div>
|
||||
|
||||
<Table headers={energyUtilityHeaders} rows={energyUtilityRows} />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Right Side: Load by end use — live */}
|
||||
<Card className="lg:col-span-5 p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-bold text-white">Load by end use — live</h2>
|
||||
<p className="text-xs text-[#5c738e] font-mono mt-0.5">% of 386 kW</p>
|
||||
</div>
|
||||
|
||||
{/* Load Breakdown Bars */}
|
||||
<div className="space-y-5">
|
||||
|
||||
{/* HVAC Plant */}
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-bold mb-1.5">
|
||||
<span className="text-slate-100">HVAC plant</span>
|
||||
<span className="text-[#5c738e] font-mono">44%</span>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-blue-500 h-full rounded-full" style={{ width: '44%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lighting & small power */}
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-bold mb-1.5">
|
||||
<span className="text-slate-100">Lighting & small power</span>
|
||||
<span className="text-[#5c738e] font-mono">23%</span>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-emerald-400 rounded-full" style={{ width: '23%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lifts & pumps */}
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-bold mb-1.5">
|
||||
<span className="text-slate-100">Lifts & pumps</span>
|
||||
<span className="text-[#5c738e] font-mono">12%</span>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-amber-400 h-full rounded-full" style={{ width: '12%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data / UPS */}
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-bold mb-1.5">
|
||||
<span className="text-slate-100">Data / UPS</span>
|
||||
<span className="text-[#5c738e] font-mono">11%</span>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-emerald-400 rounded-full" style={{ width: '11%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Others */}
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-bold mb-1.5">
|
||||
<span className="text-slate-100">Others</span>
|
||||
<span className="text-[#5c738e] font-mono">10%</span>
|
||||
</div>
|
||||
<div className="w-full bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-slate-500 rounded-full" style={{ width: '10%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<InfoBanner boldText='Anomaly watch:' normalText='lighting load after 22:00 is 9% above baseline on Block 1 · L3 — an automation rule can raise a Help Desk ticket automatically (see Alarms & Rules).
|
||||
'/>
|
||||
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
355
components/dashboard/iotapplication/hvacPlant.tsx
Normal file
355
components/dashboard/iotapplication/hvacPlant.tsx
Normal file
@@ -0,0 +1,355 @@
|
||||
import React from 'react';
|
||||
import { BarChart2, Zap, Snowflake, Activity, Target } from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import { Card } from '@/components/common/cardWrapper';
|
||||
|
||||
import BarChart from "@/components/charts/barchart"; // Replace path with your actual BarChart component import path
|
||||
|
||||
const plantLoadData = [
|
||||
{ month: '08', height: 'h-[35%]' },
|
||||
{ month: '09', height: 'h-[38%]' },
|
||||
{ month: '10', height: 'h-[32%]' },
|
||||
{ month: '11', height: 'h-[40%]' },
|
||||
{ month: '12', height: 'h-[52%]' },
|
||||
{ month: '13', height: 'h-[68%]' },
|
||||
{ month: '14', height: 'h-[78%]' },
|
||||
{ month: '15', height: 'h-[78%]' },
|
||||
{ month: '16', height: 'h-[78%]' },
|
||||
{ month: '17', height: 'h-[78%]' },
|
||||
{ month: '18', height: 'h-[78%]' },
|
||||
{ month: '19', height: 'h-[78%]' }
|
||||
];
|
||||
|
||||
export default function HVACPlantPortal() {
|
||||
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-[11px] font-semibold tracking-widest text-[#4e6178] uppercase font-mono">
|
||||
<span className="text-emerald-400 font-bold">APPLE ONE — HQ TOWER</span>
|
||||
<span>•</span>
|
||||
<span>IOT</span>
|
||||
<span>•</span>
|
||||
<span>HVAC PLANT</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
Chiller plant & air side
|
||||
</h1>
|
||||
<p className="text-sm text-[#7f93ac] mt-2 max-w-xl leading-relaxed">
|
||||
Live chiller, AHU and plant telemetry with start/stop control — commands are audit-logged.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-2">
|
||||
<Button className="bg-[#0e1c2e] hover:bg-slate-800 text-slate-200 border border-[#162942] 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-400" />
|
||||
<span>Plant report</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#10b981] hover:bg-emerald-400 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-lg">
|
||||
<Activity className="w-4 h-4 text-slate-950" />
|
||||
<span>Optimise staging</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARDS (WITH ICON BADGES) --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
|
||||
{/* Card 1: Chillers running */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="p-2.5 rounded-lg bg-blue-950/60 border border-blue-800/40 text-blue-400">
|
||||
<Snowflake className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
staged
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="text-3xl font-extrabold text-white">2 / 3</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">Chillers running</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 2: Avg COP */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800/40 text-emerald-400">
|
||||
<Activity className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-emerald-400 tracking-wider uppercase font-mono">
|
||||
plant efficiency
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="text-3xl font-extrabold text-white">5.60</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">Avg COP</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 3: Plant load */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="p-2.5 rounded-lg bg-amber-950/50 border border-amber-800/40 text-amber-400">
|
||||
<Zap className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
now
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="text-3xl font-extrabold text-white">401 kW</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">Plant load</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Card 4: AHUs running */}
|
||||
<Card className="p-4 min-h-[120px]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="p-2.5 rounded-lg bg-teal-950/60 border border-teal-800/40 text-teal-400">
|
||||
<Target className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-[#5c738e] tracking-wider uppercase font-mono">
|
||||
air side
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="text-3xl font-extrabold text-white">3 / 4</div>
|
||||
<p className="text-xs text-[#5c738e] mt-1">AHUs running</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* --- TELEMETRY SECTION --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
{/* Left Card: Chillers & Plant Load Chart */}
|
||||
<Card className="lg:col-span-7 p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-bold text-white">Chillers</h2>
|
||||
<p className="text-xs text-[#5c738e] font-mono mt-0.5">live • 5 s refresh</p>
|
||||
</div>
|
||||
|
||||
{/* Chillers Table */}
|
||||
<div className="overflow-x-auto mb-8">
|
||||
<table className="w-full text-left text-xs">
|
||||
<thead>
|
||||
<tr className="text-[#5c738e] font-mono uppercase text-[10px] border-b border-[#162942]/60">
|
||||
<th className="pb-3 font-normal">UNIT</th>
|
||||
<th className="pb-3 font-normal">STATUS</th>
|
||||
<th className="pb-3 font-normal">LOAD</th>
|
||||
<th className="pb-3 font-normal">COP</th>
|
||||
<th className="pb-3 font-normal">CHW SUPPLY / RETURN</th>
|
||||
<th className="pb-3 font-normal">KW</th>
|
||||
<th className="pb-3 font-normal text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#162942]/40 font-mono">
|
||||
{/* CH-01 */}
|
||||
<tr>
|
||||
<td className="py-3.5 font-bold text-teal-400">CH-01</td>
|
||||
<td className="py-3.5">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• RUNNING
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-16 bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-emerald-400 h-full rounded-full" style={{ width: '72%' }}></div>
|
||||
</div>
|
||||
<span className="text-slate-300">72%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3.5 font-bold text-emerald-400">5.8</td>
|
||||
<td className="py-3.5 text-slate-300">6.2 °C / 11.8 °C</td>
|
||||
<td className="py-3.5 text-slate-300">212</td>
|
||||
<td className="py-3.5 text-right">
|
||||
<button className="px-3 py-1 rounded border border-[#162942] text-slate-300 bg-[#0e1c2e] hover:bg-slate-800 text-[11px] font-semibold transition-colors">
|
||||
Stop
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* CH-02 */}
|
||||
<tr>
|
||||
<td className="py-3.5 font-bold text-teal-400">CH-02</td>
|
||||
<td className="py-3.5">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• RUNNING
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-16 bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-emerald-400 h-full rounded-full" style={{ width: '64%' }}></div>
|
||||
</div>
|
||||
<span className="text-slate-300">64%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3.5 font-bold text-amber-400">5.4</td>
|
||||
<td className="py-3.5 text-slate-300">6.5 °C / 12.1 °C</td>
|
||||
<td className="py-3.5 text-slate-300">189</td>
|
||||
<td className="py-3.5 text-right">
|
||||
<button className="px-3 py-1 rounded border border-[#162942] text-slate-300 bg-[#0e1c2e] hover:bg-slate-800 text-[11px] font-semibold transition-colors">
|
||||
Stop
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* CH-03 */}
|
||||
<tr>
|
||||
<td className="py-3.5 font-bold text-teal-400">CH-03</td>
|
||||
<td className="py-3.5">
|
||||
<span className="px-2 py-0.5 rounded-full bg-slate-800/60 border border-slate-700/50 text-slate-400 text-[10px] font-bold">
|
||||
• STANDBY
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-16 bg-[#122339] h-2 rounded-full overflow-hidden">
|
||||
<div className="bg-slate-700 h-full rounded-full" style={{ width: '0%' }}></div>
|
||||
</div>
|
||||
<span className="text-slate-400">0%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3.5 text-slate-500">—</td>
|
||||
<td className="py-3.5 text-slate-500">— / —</td>
|
||||
<td className="py-3.5 text-slate-400">0</td>
|
||||
<td className="py-3.5 text-right">
|
||||
<button className="px-3 py-1 rounded border border-[#162942] text-slate-300 bg-[#0e1c2e] hover:bg-slate-800 text-[11px] font-semibold transition-colors">
|
||||
Start
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Plant Load Reusable Bar Chart Component */}
|
||||
<div>
|
||||
<h3 className="text-[10px] font-bold
|
||||
tracking-wider uppercase font-mono mb-4">
|
||||
PLANT LOAD • TODAY
|
||||
</h3>
|
||||
<div className="flex-grow flex flex-col justify-end">
|
||||
<BarChart data={plantLoadData} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Right Card: Air Handling Units */}
|
||||
<Card className="lg:col-span-5 p-6 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-bold text-white">Air handling units</h2>
|
||||
<p className="text-xs text-[#5c738e] font-mono mt-0.5">supply air • fan speed</p>
|
||||
</div>
|
||||
|
||||
{/* AHUs Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-xs">
|
||||
<thead>
|
||||
<tr className="text-[#5c738e] font-mono uppercase text-[10px] border-b border-[#162942]/60">
|
||||
<th className="pb-3 font-normal">UNIT</th>
|
||||
<th className="pb-3 font-normal">ZONE</th>
|
||||
<th className="pb-3 font-normal">STATUS</th>
|
||||
<th className="pb-3 font-normal">SAT</th>
|
||||
<th className="pb-3 font-normal">FAN</th>
|
||||
<th className="pb-3 font-normal">FILTER</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#162942]/40 font-mono">
|
||||
{/* AHU-01 */}
|
||||
<tr>
|
||||
<td className="py-4 font-bold text-teal-400 leading-tight">AHU-01</td>
|
||||
<td className="py-4 text-slate-200 font-sans font-medium leading-tight">Lobby & atrium</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• ON
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-slate-200">14.2 °C</td>
|
||||
<td className="py-4 text-slate-200">62%</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* AHU-04 */}
|
||||
<tr>
|
||||
<td className="py-4 font-bold text-teal-400 leading-tight">AHU-04</td>
|
||||
<td className="py-4 text-slate-200 font-sans font-medium leading-tight">Floors 2–4</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• ON
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-slate-200">13.8 °C</td>
|
||||
<td className="py-4 text-slate-200">71%</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* AHU-07 */}
|
||||
<tr>
|
||||
<td className="py-4 font-bold text-teal-400 leading-tight">AHU-07</td>
|
||||
<td className="py-4 text-slate-200 font-sans font-medium leading-tight">Floors 5–7</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• ON
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-slate-200">15.1 °C</td>
|
||||
<td className="py-4 text-slate-200">84%</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-amber-950/80 border border-amber-800/50 text-amber-400 text-[10px] font-bold">
|
||||
• REPLACE
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* AHU-09 */}
|
||||
<tr>
|
||||
<td className="py-4 font-bold text-teal-400 leading-tight">AHU-09</td>
|
||||
<td className="py-4 text-slate-200 font-sans font-medium leading-tight">
|
||||
Basement · parking
|
||||
</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-slate-800/60 border border-slate-700/50 text-slate-400 text-[10px] font-bold">
|
||||
• OFF
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-slate-500">—</td>
|
||||
<td className="py-4 text-slate-400">0%</td>
|
||||
<td className="py-4">
|
||||
<span className="px-2 py-0.5 rounded-full bg-emerald-950/80 border border-emerald-800/50 text-emerald-400 text-[10px] font-bold">
|
||||
• OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Warning Notice */}
|
||||
<div className="pt-6 border-t border-[#162942]/60 mt-6 text-xs text-[#7f93ac] leading-relaxed">
|
||||
AHU-07 filter ΔP is beyond limit — a PPM task can be raised automatically from{' '}
|
||||
<strong className="text-slate-200 hover:underline cursor-pointer">Alarms & Rules</strong>.
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user