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

111
components/dashboard/engagement.tsx
View File

@@ -1,19 +1,19 @@
"use client";
import {
Smile,
Activity,
AlertTriangle,
Star,
ShieldCheck, Database, Leaf,
Plus,
Sparkles
} from "lucide-react";
import {SATISFACTION_DRIVERS,TICKETS_DATA} from "@/constants/constant";
import StatCard from "../../utils/dashStatCard";
import Button from "@/utils/button";
import InfoBanner from "@/utils/infoBanner";
export default function EngagementPage() {
return (
<div className="bg-[#071321] text-[#93a3b8] font-sans antialiased min-h-screen">
<main className="pt-20 px-8 pb-12">
<main className="pt-10 pb-10">
{/* Page Header Section */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
@@ -33,79 +33,49 @@ export default function EngagementPage() {
{/* Action Buttons */}
<div className="flex items-center gap-3">
<button className="flex items-center gap-2 rounded-xl border border-[#142538] bg-[#091624] px-4 py-2.5 text-xs font-bold text-white hover:bg-[#11233a] transition">
<Button
className="flex items-center gap-2 rounded-xl border border-[#142538] bg-[#091624] px-4 py-2.5 text-xs font-bold text-white hover:bg-[#11233a] transition">
<Smile size={15} className="text-slate-400" />
Pulse survey
</button>
<button className="flex items-center gap-1.5 rounded-xl bg-[#3de0c4] hover:bg-[#32cbb0] px-4 py-2.5 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
</Button>
<Button
className="flex items-center gap-1.5 rounded-xl bg-[#3de0c4] hover:bg-[#32cbb0] px-4 py-2.5 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
<Plus size={15} strokeWidth={2.5} />
New ticket
</button>
</Button>
</div>
</div>
{/* 3. Metrics Cards Grid (4 Columns) */}
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{/* Card 1: Engagement Score */}
<div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
<div className="flex items-center justify-between">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#0e2726] border border-[#10b981]/15 text-[#10b981]">
<Smile size={18} />
</div>
<span className="text-[10px] font-bold text-emerald-400 tracking-wider">+4 vs Q1</span>
</div>
<div className="mt-4">
<span className="text-3xl font-extrabold text-white tracking-tight">82%</span>
<p className="text-xs font-semibold text-slate-400 mt-1">Engagement score</p>
</div>
</div>
{/* Column of StatCard */}
{/* Card 2: Survey Response */}
<div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
<div className="flex items-center justify-between">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#11233a] border border-[#1b2c3f]/50 text-cyan-400">
<Activity size={18} />
</div>
<span className="text-[10px] font-semibold text-slate-500 tracking-wider uppercase font-mono">this pulse</span>
</div>
<div className="mt-4">
<span className="text-3xl font-extrabold text-white tracking-tight">71%</span>
<p className="text-xs font-semibold text-slate-400 mt-1">Survey response</p>
</div>
</div>
{/* Card 3: Open Tickets */}
<div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
<div className="flex items-center justify-between">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#271d15] border border-amber-500/10 text-amber-500">
<AlertTriangle size={18} />
</div>
<span className="text-[10px] font-bold text-amber-500 tracking-wider uppercase font-mono">to resolve</span>
</div>
<div className="mt-4">
<span className="text-3xl font-extrabold text-white tracking-tight">2</span>
<p className="text-xs font-semibold text-slate-400 mt-1">Open tickets</p>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<StatCard
variant="icon" title="Engagement score" value="82%" icon={Smile}
badgeText="+4 vs Q1" badgeClassName="text-emerald-400"
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
/>
<StatCard
variant="icon" title="Asset availability" value="38%" icon={ShieldCheck}
badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case"
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
/>
{/* Card 4: CSAT */}
<div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
<div className="flex items-center justify-between">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#11233a] border border-[#1b2c3f]/50 text-blue-400">
<Star size={18} />
</div>
<span className="text-[10px] font-semibold text-slate-500 tracking-wider uppercase font-mono">of 5.0</span>
</div>
<div className="mt-4">
<span className="text-3xl font-extrabold text-white tracking-tight">4.2</span>
<p className="text-xs font-semibold text-slate-400 mt-1">CSAT</p>
</div>
</div>
<StatCard
variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database}
badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold"
iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
/>
<StatCard
variant="icon" title="ESG rating" value="B+" icon={Leaf}
badgeText="improving" badgeClassName="text-emerald-400 lowercase font-sans font-medium"
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
/>
</div>
</div>
{/* 4. Double Columns layout (Drivers & Tickets lists) */}
{/* (Drivers & Tickets lists columns) */}
<div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
{/* Left Column: Satisfaction Drivers */}
@@ -174,7 +144,10 @@ export default function EngagementPage() {
</div>
</main>
<InfoBanner
boldText="Closing the loop:"
normalText="complaints become tracked FM tickets, suggestions are triaged and voted on, and declining pulse trends flag retention risk early."
/>
</div>