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

Project structure changes ad new files added in dashboard folders

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-23 18:32:07 +05:30
parent 1993d91319
commit 5a2ae769d8
63 changed files with 1550 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/dashboard/overview/propertyManager.tsx Normal file
View File

@@ -0,0 +1,168 @@
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from "@/components/common/infoBanner";
import { ProgressBarRow } from "@/components/charts/progressBarRow";
import {
FileText,
Wrench,
ShieldCheck,
Smile,
ChevronRight,
Database,
} from "lucide-react";
// Import your custom Card components
import { Card } from "@/components/common/cardWrapper";
import { CardHeader } from "@/components/common/cardHeader";
export default function PropertyManagerPortal() {
return (
<div className=" text-slate-100 mt-15
">
{/* --- HEADER SECTION --- */}
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4">
<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-bold 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-15">
<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">
<StatCard
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
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
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
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 mt-5 items-stretch">
{/* Left Box: Work Order Status Tracking (7 Columns wide) */}
<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>
{/* 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>
</Card>
</div>
{/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
<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>
</Card>
</div>
</div>
{/* --- BOTTOM INFO BANNER --- */}
<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>
</div>
);
}