shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Building Owner and Property Manager Screens are added

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-16 18:09:03 +05:30
parent 104f8f7abf
commit 3222da96ab
22 changed files with 516 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
components/dashboard/propertyManager.tsx Normal file
View File

@@ -0,0 +1,157 @@
import Button from "@/utils/button";
import StatCard from "@/utils/dashStatCard";
import { ProgressBarRow } from "@/utils/progressBarRow";
import {
FileText,
Wrench,
ShieldCheck,
Coins,
Smile,
ChevronRight,
Sparkles
} from "lucide-react";
export default function PropertyManagerPortal() {
return (
<div className="min-h-screen
text-slate-100 mt-15
font-sans antialiased selection:bg-teal-500/30 relative">
{/* --- HEADER SECTION --- */}
<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">
<span className="text-teal-400">Apple One — HQ Tower</span>
<span>•</span>
<span>Portal</span>
<span>•</span>
<span>Property Manager</span>
</div>
<h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
Property manager portal
</h1>
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
Day-to-day operations cockpit — work orders, SLA, budget, automated billing and occupant comfort in one remote view.
</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" />
Documents
</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} />
Work orders
</Button>
</div>
</div>
{/* --- ROW 1: STATS GRID --- */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
<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"
/>
<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]"
/>
<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"
/>
<StatCard
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">
{/* 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>
</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>
{/* 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>
</div>
</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>
{/* 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>
);
}