Authentication And Serive Engineer Portal is added
This commit is contained in:
@@ -1,30 +1,28 @@
|
||||
|
||||
import Button from "@/utils/button";
|
||||
import StatCard from "@/utils/dashStatCard";
|
||||
import InfoBanner from "@/utils/infoBanner";
|
||||
import { ProgressBarRow } from "@/utils/progressBarRow";
|
||||
import {
|
||||
FileText,
|
||||
Wrench,
|
||||
ShieldCheck,
|
||||
Coins,
|
||||
ShieldCheck,
|
||||
Smile,
|
||||
ChevronRight,
|
||||
Sparkles
|
||||
Database,
|
||||
} from "lucide-react";
|
||||
|
||||
// Import your custom Card components
|
||||
import { Card } from "@/utils/cardWrapper";
|
||||
import { CardHeader } from "@/utils/cardHeader";
|
||||
export default function PropertyManagerPortal() {
|
||||
return (
|
||||
<div className="min-h-screen
|
||||
text-slate-100 mt-15
|
||||
font-sans antialiased selection:bg-teal-500/30 relative">
|
||||
<div className=" text-slate-100 mt-15 font-sans antialiased
|
||||
">
|
||||
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="flex flex-col
|
||||
md:flex-row md:items-start md:justify-between
|
||||
gap-4 mb-8">
|
||||
<div className="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">
|
||||
<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>
|
||||
@@ -53,105 +51,116 @@ export default function PropertyManagerPortal() {
|
||||
</div>
|
||||
|
||||
{/* --- ROW 1: STATS GRID --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
title="Open work orders" value="15" icon={FileText}
|
||||
badgeText="active" badgeClassName="text-slate-500 lowercase font-mono"
|
||||
iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
|
||||
variant="icon"
|
||||
title="Open work orders"
|
||||
value="16"
|
||||
icon={FileText}
|
||||
badgeText="active"
|
||||
badgeClassName="text-slate-500 lowercase font-mono"
|
||||
iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="SLA compliance" value="17%" icon={ShieldCheck}
|
||||
badgeText="this month" badgeClassName="text-emerald-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
|
||||
variant="icon"
|
||||
title="SLA compliance"
|
||||
value="11%"
|
||||
icon={ShieldCheck}
|
||||
badgeText="this month"
|
||||
badgeClassName="text-emerald-400 font-mono lowercase"
|
||||
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Budget used" value="74%" icon={Coins}
|
||||
badgeText="FY 2026" badgeClassName="text-slate-500 font-mono"
|
||||
iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
|
||||
variant="icon"
|
||||
title="Budget used"
|
||||
value="74%"
|
||||
icon={Database}
|
||||
badgeText="FY 2026"
|
||||
badgeClassName="text-slate-500 font-mono"
|
||||
iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
title="Occupant comfort" value="82%" icon={Smile}
|
||||
badgeText="CSAT" badgeClassName="text-emerald-400 font-mono"
|
||||
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
|
||||
variant="icon"
|
||||
title="Occupant comfort"
|
||||
value="82%"
|
||||
icon={Smile}
|
||||
badgeText="CSAT"
|
||||
badgeClassName="text-emerald-400 font-mono"
|
||||
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- ROW 2: SPLIT GRID --- */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 mt-5 items-stretch">
|
||||
|
||||
{/* Left Box: Work Order Status Tracking (7 Columns wide) */}
|
||||
<div className="lg:col-span-7 rounded-xl border
|
||||
border-[#142538] bg-[#091624] p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<h3 className="text-sm font-semibold text-white tracking-wide">Work order status</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 my-2">
|
||||
|
||||
<ProgressBarRow label="Open" value={18} maxValue={18} />
|
||||
<ProgressBarRow label="In Progress" value={13} maxValue={18} />
|
||||
<ProgressBarRow label="Completed" value={9} maxValue={18} />
|
||||
|
||||
<div className="lg:col-span-7">
|
||||
<Card className="p-4 h-full">
|
||||
<div>
|
||||
<CardHeader title="Work order status" />
|
||||
|
||||
<div className="space-y-4 my-4">
|
||||
<ProgressBarRow label="Open" value={18} maxValue={18} />
|
||||
<ProgressBarRow label="In Progress" value={13} maxValue={18} />
|
||||
<ProgressBarRow label="Completed" value={9} maxValue={18} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inline Sub-metrics Row split container inside the card */}
|
||||
<div className="grid grid-cols-2 border border-[#142538] rounded-xl bg-[#060d18]/40 mt-6 overflow-hidden">
|
||||
<div className="p-4 border-r border-[#142538]">
|
||||
<div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">BILLED MTD</div>
|
||||
<div className="text-base font-bold text-white mt-1">₹99.4 L</div>
|
||||
{/* Inline Sub-metrics Row split container inside the card */}
|
||||
<div className="grid grid-cols-2 border border-[#142538] rounded-xl bg-[#060d18]/40 mt-6 overflow-hidden">
|
||||
<div className="p-4 border-r border-[#142538]">
|
||||
<div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">BILLED MTD</div>
|
||||
<div className="text-base font-bold text-white mt-1">₹99.4 L</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">ENERGY SAVED</div>
|
||||
<div className="text-base font-bold text-emerald-400 mt-1">₹3.5 L/mo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">ENERGY SAVED</div>
|
||||
<div className="text-base font-bold text-emerald-400 mt-1">₹3.5 L/mo</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
|
||||
<div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white tracking-wide mb-6">Quick actions</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
"Track work orders",
|
||||
"Energy optimization",
|
||||
"Automated billing",
|
||||
"Budget & approvals",
|
||||
"Contracts & SLA",
|
||||
].map((action, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className="w-full flex items-center justify-between p-3.5 bg-[#060d18]/40 hover:bg-[#11233a]/40 border border-[#142538] hover:border-[#1b3454] rounded-xl text-xs font-bold text-white text-left transition-all duration-150 group"
|
||||
>
|
||||
<span className="flex items-center gap-3">
|
||||
<ChevronRight size={14} className="text-slate-500 group-hover:text-teal-400 transition-colors" />
|
||||
{action}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
<div className="lg:col-span-5">
|
||||
<Card className="p-5 ">
|
||||
<div>
|
||||
<CardHeader title="Quick actions" />
|
||||
|
||||
<div className="space-y-2 mt-4">
|
||||
{[
|
||||
"Track work orders",
|
||||
"Energy optimization",
|
||||
"Automated billing",
|
||||
"Budget & approvals",
|
||||
"Contracts & SLA",
|
||||
].map((action, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className="w-full flex items-center justify-between p-3.5 bg-[#060d18]/40 hover:bg-[#11233a]/40 border border-[#142538] hover:border-[#1b3454] rounded-xl text-xs font-bold text-white text-left transition-all duration-150 group"
|
||||
>
|
||||
<span className="flex items-center gap-3">
|
||||
<ChevronRight size={14} className="text-slate-500 group-hover:text-teal-400 transition-colors" />
|
||||
{action}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- BOTTOM INFO BANNER --- */}
|
||||
<div className="mb-20 rounded-xl border border-[#142538]/80 bg-[#091624]/60 p-4 border-l-2 border-l-teal-400">
|
||||
<p className="text-xs text-slate-400 font-medium">
|
||||
<span className="text-white font-bold">Manager view: </span>
|
||||
remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring.
|
||||
</p>
|
||||
<div className="mb-20">
|
||||
<InfoBanner
|
||||
boldText="Manager view:"
|
||||
normalText="remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Ask AI Button */}
|
||||
<button className="fixed bottom-6 right-6 flex items-center gap-2 px-4 py-2.5 bg-[#14b8a6] hover:bg-[#0d9488] text-slate-900 rounded-full text-xs font-bold transition-all shadow-lg hover:scale-105 active:scale-95 z-50">
|
||||
<Sparkles size={14} fill="currentColor" />
|
||||
Ask AI
|
||||
</button>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user