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

165
components/dashboard/overview/engagement.tsx Normal file
View File

@@ -0,0 +1,165 @@
"use client";
import {
Smile,
ShieldCheck,
Database,
Leaf,
Plus,
} from "lucide-react";
import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
import StatCard from "../../common/dashStatCard";
import Button from "@/components/common/button";
import InfoBanner from "@/components/common/infoBanner";
// Import your custom Card components
import { Card } from "@/components/common/cardWrapper";
import { CardHeader } from "@/components/common/cardHeader";
export default function EngagementPage() {
return (
<div className=" text-[#93a3b8] font-sans ">
<main className="mt-20">
{/* Page Header Section */}
<div className="flex flex-col md:flex-row md:items-center
justify-between gap-4 mt-4">
<div>
<div className="flex items-center gap-2 text-xs
font-bold uppercase tracking-widest text-teal-500">
<span>Apple One — HQ Tower</span>
<span className="text-gray-600">·</span>
<span className="text-gray-400">Intelligence</span>
<span className="text-gray-600">·</span>
<span className="text-gray-400">Engagement</span>
</div>
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">Employee engagement</h1>
<p className="mt-2 text-sm text-gray-400 max-w-2xl leading-relaxed">
Pulse satisfaction surveys, complaint tickets and a suggestion system — boosting morale, transparency and retention.
</p>
</div>
{/* 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-4 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">
<Plus size={15} strokeWidth={2.5} />
New ticket
</Button>
</div>
</div>
{/* --- STAT CARD GRID --- */}
<div className="mt-6 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="50%" icon={ShieldCheck}
badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case"
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
/>
<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>
{/* --- TWO COLUMNS (DRIVERS & TICKETS LISTS) --- */}
<div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
{/* Left Column: Satisfaction Drivers */}
<div className="lg:col-span-7">
<Card className="p-4">
<CardHeader title="Satisfaction drivers" subtitle="latest pulse" />
<div className="mt-6 space-y-5">
{SATISFACTION_DRIVERS.map((driver) => (
<div key={driver.label} className="space-y-2">
<div className="flex items-center justify-between text-xs font-medium">
<span className="text-slate-300">{driver.label}</span>
<span className="font-bold text-white">{driver.score}</span>
</div>
{/* Track line background */}
<div className="h-2 w-full rounded-full bg-[#101c2a]">
{/* Filled bar width */}
<div
className={`h-2 rounded-full ${driver.color} transition-all duration-500`}
style={{ width: `${driver.score}%` }}
/>
</div>
</div>
))}
</div>
</Card>
</div>
{/* Right Column: Tickets & Suggestions */}
<div className="lg:col-span-5">
<Card className="p-6 h-full">
<CardHeader title="Tickets & suggestions" />
<div className="mt-2 divide-y divide-[#142538]/30">
{TICKETS_DATA.map((ticket, index) => (
<div key={index} className="flex items-center justify-between py-4 first:pt-2 last:pb-2">
<div className="min-w-0">
<h4 className="font-bold text-xs text-white truncate pr-2">{ticket.title}</h4>
<span className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider block mt-0.5">
{ticket.type}
</span>
</div>
{/* Status Indicator Badges */}
<div>
{ticket.status === "OPEN" ? (
<span className="inline-flex items-center gap-1.5 rounded-full bg-[#3b2a1a] border border-amber-500/25 px-2.5 py-0.5 text-[9px] font-bold text-amber-500">
<span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
OPEN
</span>
) : (
<span className="inline-flex items-center gap-1.5 rounded-full bg-[#152332] border border-[#1e344e]/50 px-2.5 py-0.5 text-[9px] font-bold text-slate-400">
<span className="h-1.5 w-1.5 rounded-full bg-slate-500"></span>
CLOSED
</span>
)}
</div>
</div>
))}
</div>
</Card>
</div>
</div>
</main>
<div className="mb-10 mt-10">
<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>
</div>
);
}