Authentication And Serive Engineer Portal is added
This commit is contained in:
243
components/dashboard/serviceEngineer.tsx
Normal file
243
components/dashboard/serviceEngineer.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import Button from "@/utils/button";
|
||||
import StatCard from "@/utils/dashStatCard";
|
||||
import InfoBanner from "@/utils/infoBanner";
|
||||
import {
|
||||
FileText,
|
||||
Wrench,
|
||||
Target,
|
||||
Calendar,
|
||||
Brain,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
|
||||
// Import your custom Card components
|
||||
import { Card } from "@/utils/cardWrapper";
|
||||
import { CardHeader } from "@/utils/cardHeader";
|
||||
|
||||
export default function ServiceEngineerPortal() {
|
||||
return (
|
||||
<div className="text-slate-100 font-sans antialiased">
|
||||
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="pt-20 flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
|
||||
<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>Portal</span>
|
||||
<span>•</span>
|
||||
<span>Service Engineer</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
|
||||
Service engineer portal
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Field cockpit — real-time asset metrics, actionable alerts, the PM schedule for today and verified task completion.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-6">
|
||||
<Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
|
||||
<FileText size={14} className="text-slate-400" />
|
||||
Scan Qr
|
||||
</Button>
|
||||
<Button className="flex items-center gap-2 px-4 py-2 bg-[#14b8a6]/10 hover:bg-[#14b8a6]/20 border border-[#14b8a6]/30 rounded-xl text-xs font-bold text-[#2dd4bf] transition-colors duration-200 shadow-sm">
|
||||
<Wrench size={14} />
|
||||
My Jobs
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- ROW 1: STATS GRID --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="My Assigned Jobs"
|
||||
value="6"
|
||||
icon={Target}
|
||||
badgeText="active"
|
||||
badgeClassName="text-slate-500 lowercase font-mono"
|
||||
iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Predictive Alerts"
|
||||
value="2"
|
||||
icon={Brain}
|
||||
badgeText="action"
|
||||
badgeClassName="text-red-400/90 lowercase font-mono"
|
||||
iconContainerClassName="bg-[#2a171c] border-red-500/10 text-red-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="PM due today"
|
||||
value="3"
|
||||
icon={Calendar}
|
||||
badgeText="scheduled"
|
||||
badgeClassName="text-slate-500 lowercase font-mono"
|
||||
iconContainerClassName="bg-[#272115] border-amber-500/10 text-amber-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Verifies this WK"
|
||||
value="12"
|
||||
icon={Check}
|
||||
badgeText="closed"
|
||||
badgeClassName="text-emerald-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-emerald-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- ROW 2: SPLIT GRID (METRICS & TIMELINE) --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 items-stretch">
|
||||
|
||||
{/* Left Section (8 Columns): Real-time Asset Metrics */}
|
||||
<div className="lg:col-span-8">
|
||||
<Card className="p-5 ">
|
||||
<CardHeader title="Real-time asset metrics" subtitle="IoT / BMS" />
|
||||
|
||||
<div className="overflow-x-auto mt-4">
|
||||
<table className=" text-left text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-[#142538] text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">
|
||||
<th className="pb-3">Asset · Parameter</th>
|
||||
<th className="pb-3">Reading</th>
|
||||
<th className="pb-3">State</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#142538]/50">
|
||||
<tr className="hover:bg-[#0d1f33]/30">
|
||||
<td className="py-3.5 font-semibold text-slate-200">Chiller-02 · supply temp</td>
|
||||
<td className="py-3.5 font-mono text-slate-300">6.8 °C</td>
|
||||
<td className="py-3.5">
|
||||
<span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-[#0d1f33]/30">
|
||||
<td className="py-3.5 font-semibold text-slate-200">AHU-07 · vibration</td>
|
||||
<td className="py-3.5 font-mono text-slate-300">4.1 mm/s</td>
|
||||
<td className="py-3.5">
|
||||
<span className="inline-flex items-center gap-2 text-amber-500 font-semibold">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span> Watch
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-[#0d1f33]/30">
|
||||
<td className="py-3.5 font-semibold text-slate-200">DG-01 · fuel level</td>
|
||||
<td className="py-3.5 font-mono text-slate-300">62%</td>
|
||||
<td className="py-3.5">
|
||||
<span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-[#0d1f33]/30">
|
||||
<td className="py-3.5 font-semibold text-slate-200">Pump-03 · pressure</td>
|
||||
<td className="py-3.5 font-mono text-slate-300">3.2 bar</td>
|
||||
<td className="py-3.5">
|
||||
<span className="inline-flex items-center gap-2 text-[#2dd4bf] font-semibold">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-[#14b8a6]"></span> Normal
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Section (4 Columns): Today's Schedule Timeline */}
|
||||
<div className="lg:col-span-4">
|
||||
<Card className="p-5 h-full">
|
||||
<CardHeader title="Today’s schedule" subtitle="runtime + condition based" />
|
||||
|
||||
{/* Timeline Node Flow */}
|
||||
<div className="relative pl-6 space-y-8 mt-6 before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-[#142538]">
|
||||
|
||||
{/* Timeline Task 1 */}
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-slate-200">Cooling tower cleaning</h4>
|
||||
<p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">09:00 · PPM</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline Task 2 */}
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-slate-200">AHU filter check</h4>
|
||||
<p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">11:30 · PPM</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline Task 3 */}
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[25px] top-1 h-3.5 w-3.5 rounded-full border-2 border-[#14b8a6] bg-[#091624]" />
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-slate-200">Lift quarterly service</h4>
|
||||
<p className="text-[10px] font-medium text-slate-500 font-mono mt-0.5">14:00 · AMC</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* --- ROW 3: FULL WIDTH ACTIONABLE ALERTS --- */}
|
||||
<div className="mb-6">
|
||||
<Card className="p-5">
|
||||
<CardHeader title="Actionable alerts" />
|
||||
|
||||
<div className="divide-y divide-[#142538]/60 mt-4">
|
||||
{/* Alert 1 */}
|
||||
<div className="flex items-center justify-between py-3.5">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-red-400 mt-1.5 shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-slate-200">Chiller-02 bearing wear</h4>
|
||||
<p className="text-[11px] text-slate-400 mt-0.5">Raise condition-based PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
|
||||
Act
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Alert 2 */}
|
||||
<div className="flex items-center justify-between py-3.5">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="h-2 w-2 rounded-full bg-amber-400 mt-1.5 shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-xs font-bold text-slate-200">AHU-07 belt vibration</h4>
|
||||
<p className="text-[11px] text-slate-400 mt-0.5">Inspect within 10 days</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="px-3.5 py-1 bg-[#11233a] hover:bg-[#1b3454] border border-[#1b3454] rounded-lg text-[11px] font-bold text-slate-200 transition-colors">
|
||||
Act
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* --- BOTTOM INFO BANNER --- */}
|
||||
<div className="mb-20">
|
||||
<InfoBanner
|
||||
boldText="Engineer view:"
|
||||
normalText="real-time asset metrics, actionable alerts from fault detection, runtime- and condition-based preventive maintenance, and verified task completion from the field."
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user