108 lines
4.1 KiB
TypeScript
108 lines
4.1 KiB
TypeScript
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>
|
|
);
|
|
} |