Changes done in ui screens

This commit is contained in:
2026-07-28 19:11:10 +05:30
parent b8e833dbb9
commit 7ce1f2705e
33 changed files with 1944 additions and 1248 deletions

View File

@@ -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:0006: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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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>

View File

@@ -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>