Changes done in ui screens
This commit is contained in:
@@ -22,12 +22,12 @@ export default function AlarmRulesPortal() {
|
||||
{/* --- 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">
|
||||
<div className="flex items-center gap-2 text-[12px] 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>
|
||||
<span className="text-slate-600">•</span>
|
||||
<span className="text-slate-400">IOT</span>
|
||||
<span className="text-slate-600">•</span>
|
||||
<span className="text-slate-400">ALARMS & RULES</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Alarms & automation rules
|
||||
@@ -237,8 +237,8 @@ export default function AlarmRulesPortal() {
|
||||
Raises a Help Desk request with the asset and fault pre-filled
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
<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'
|
||||
@@ -249,7 +249,7 @@ export default function AlarmRulesPortal() {
|
||||
autoWorkOrder ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Rule 2 */}
|
||||
@@ -262,8 +262,8 @@ export default function AlarmRulesPortal() {
|
||||
Notifies the escalation matrix after 15 minutes
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
<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'
|
||||
@@ -274,7 +274,7 @@ export default function AlarmRulesPortal() {
|
||||
escalateCriticals ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Rule 3 */}
|
||||
@@ -287,8 +287,8 @@ export default function AlarmRulesPortal() {
|
||||
Widens comfort bands 22:00–06:00 to save energy
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
<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'
|
||||
@@ -299,7 +299,7 @@ export default function AlarmRulesPortal() {
|
||||
offHoursSetpoint ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Rule 4 */}
|
||||
@@ -312,8 +312,8 @@ export default function AlarmRulesPortal() {
|
||||
Adds a filter change to the next PPM visit automatically
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
<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'
|
||||
@@ -324,7 +324,7 @@ export default function AlarmRulesPortal() {
|
||||
filterPpmTask ? 'translate-x-5 bg-slate-950' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,17 +14,17 @@ export default function CommandCenterPortal() {
|
||||
{/* --- 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">
|
||||
<div className="flex items-center gap-2 text-[12px] 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>
|
||||
<span className='text-gray-600'>•</span>
|
||||
<span className='text-gray-400'>IOT</span>
|
||||
<span className='text-gray-600'>•</span>
|
||||
<span className='text-gray-400'>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">
|
||||
<p className="text-sm text-[#7f93ac] font-medium 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>
|
||||
@@ -192,9 +192,9 @@ export default function CommandCenterPortal() {
|
||||
<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">
|
||||
<Button className="text-xs text-[#10b981] font-semibold hover:underline">
|
||||
All alarms
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-[11px] text-[#4e6178] font-mono mb-4">streaming</p>
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
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';
|
||||
import { devicefleetheaders, devicefleetrows } from '@/constants/tabledata';
|
||||
|
||||
export default function DeviceFleetPortal() {
|
||||
return (
|
||||
@@ -19,12 +19,12 @@ export default function DeviceFleetPortal() {
|
||||
{/* --- 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">
|
||||
<div className="flex items-center gap-2 text-[12px] 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>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">IOT</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">DEVICE FLEET</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Gateways, controllers & sensors
|
||||
|
||||
@@ -13,17 +13,17 @@ export default function EnergyUtilityPortal() {
|
||||
{/* --- 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">
|
||||
<div className="flex items-center gap-2 text-[12px] 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>
|
||||
<span className='text-gray-600'>•</span>
|
||||
<span className='text-gray-400'>IOT</span>
|
||||
<span className='text-gray-600'>•</span>
|
||||
<span className='text-gray-400'>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">
|
||||
<p className="text-sm text-[#7f93ac] font-medium 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>
|
||||
|
||||
@@ -4,22 +4,9 @@ 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
|
||||
import { plantLoadData } from '@/constants/constant';
|
||||
|
||||
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">
|
||||
@@ -27,17 +14,17 @@ export default function HVACPlantPortal() {
|
||||
{/* --- 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">
|
||||
<div className="flex items-center gap-2 text-[12px] 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>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">IOT</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">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">
|
||||
<p className="text-sm text-[#7f93ac] font-medium mt-2 max-w-xl leading-relaxed">
|
||||
Live chiller, AHU and plant telemetry with start/stop control — commands are audit-logged.
|
||||
</p>
|
||||
</div>
|
||||
@@ -221,9 +208,9 @@ export default function HVACPlantPortal() {
|
||||
<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">
|
||||
<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>
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user