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

Overview dashboard and Employee Engagement is added

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-15 18:11:25 +05:30
parent 4c8c537f9c
commit 104f8f7abf
13 changed files with 314 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/dashboard/layout.tsx Normal file
View File

@@ -0,0 +1,35 @@
"use client"// app/dashboard/layout.tsx
import Sidebar from "@/components/dashboard/sidebar";
import Navbar from "@/components/dashboard/navbar";
import { Sparkles } from "lucide-react";
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="min-h-screen bg-[#071321] text-white flex">
{/* Shared Sidebar */}
<Sidebar />
<div className="flex-1 flex flex-col min-h-screen">
{/* Shared Navbar */}
<Navbar />
{/* The active page content renders here */}
<main className="flex-1 pl-68 bg-[#071321]">
{children}
</main>
</div>
{/* Shared Ask AI Floating Button */}
<button className="fixed bottom-4 right-4 z-40 flex items-center gap-2
rounded-full bg-[#17d4bd] hover:bg-[#13b19e] px-4 py-2.5 text-xs
font-bold text-[#05111d] transition shadow-lg shadow-[#17d4bd]/20">
<Sparkles size={14} className="animate-pulse" />
<span>Ask AI</span>
</button>
</div>
);
}

0
app/dashboard/overview/buildingOwner/page.tsx Normal file
View File

18
app/dashboard/overview/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,18 @@
"use client";
import Sidebar from "@/components/dashboard/sidebar";
import OperationsDashboard from "@/components/dashboard/dashboard";
export default function OverViewDashboardPage() {
return (
<div className="p-6">
<OperationsDashboard />
</div>
);
}

19
app/dashboard/overview/engagement/page.tsx Normal file
View File

@@ -0,0 +1,19 @@
"use client";
import EngagementPage from "@/components/dashboard/engagement";
export default function EngagementDashboard() {
return (
<div className="p-6">
<EngagementPage/>
</div>
);
}

0
app/dashboard/overview/propertyManager/page.tsx Normal file
View File

0
app/dashboard/overview/serviceEngineer/page.tsx Normal file
View File

24
app/dashboard/page.tsx
View File

@@ -1,21 +1,7 @@
"use client";
// app/dashboard/page.tsx
import { redirect } from "next/navigation";
import Sidebar from "@/components/dashboard/sidebar";
import OperationsDashboard from "@/components/dashboard/dashboard";
export default function DashboardPage() {
return (
<main className="flex bg-[#091522]">
<Sidebar />
<div className="flex-1 p-6 text-white">
<OperationsDashboard/>
</div>
</main>
);
export default function DashboardBasePage() {
// Automatically redirect the user to the actual overview dashboard page
redirect("/dashboard/overview/dashboard");
}

7
components/dashboard/dashboard.tsx
View File

@@ -14,10 +14,11 @@ export default function Dashboard() {
return (
<div className=" bg-[#071321] text-[#93a3b8] font-sans antialiased">
<Navbar />
<div >
<main >
<hr className="border-[#142538]" />
<main className=" pt-8 bg-[#071321] text-[#93a3b8] font-sans antialiased" >
{/* Title Section */}
<div className="flex items-start justify-between">
<div>

182
components/dashboard/engagement.tsx Normal file
View File

@@ -0,0 +1,182 @@
"use client";
import {
Smile,
Activity,
AlertTriangle,
Star,
Plus,
Sparkles
} from "lucide-react";
import {SATISFACTION_DRIVERS,TICKETS_DATA} from "@/constants/constant";
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">
{/* 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-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">
<Plus size={15} strokeWidth={2.5} />
New ticket
</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>
{/* 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>
{/* 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>
</div>
{/* 4. Double Columns layout (Drivers & Tickets lists) */}
<div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
{/* Left Column: Satisfaction Drivers */}
<div className="lg:col-span-7 rounded-2xl border border-[#142538] bg-[#091624] p-6">
<div className="flex items-center justify-between border-b border-[#142538]/40 pb-4">
<h3 className="font-bold text-sm text-white tracking-tight">Satisfaction drivers</h3>
<span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider font-mono">latest pulse</span>
</div>
<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>
</div>
{/* Right Column: Tickets & Suggestions */}
<div className="lg:col-span-5 rounded-2xl border border-[#142538] bg-[#091624] p-6">
<div className="border-b border-[#142538]/40 pb-4">
<h3 className="font-bold text-sm text-white tracking-tight">Tickets & suggestions</h3>
</div>
<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>
</div>
</div>
</main>
</div>
);
}

17
components/dashboard/navbar.tsx
View File

@@ -2,15 +2,18 @@ import { Search, HelpCircle, Globe, Sun, Bell, ChevronDown, MapPin } from 'lucid
export default function Navbar() {
return (
<header className="flex items-center justify-between
bg-[#071321] ">
/*
- 'fixed top-0 right-0 left-64' anchors the navbar to the top of the screen,
leaving room exactly for your 64-width sidebar.
- 'bg-[#071321]' matches your master UI background.
- 'h-16' gives it a consistent height.
*/
<header className="fixed top-0 right-0 left-64 z-30 flex h-16 items-center justify-between border-b border-[#142538]/50 bg-[#071321] px-8">
{/* Left Group */}
<div className="flex items-center gap-2">
{/* Company Selector */}
<div className="flex items-center gap-2 rounded-full bg-[#0a1826]
px-3 py-1.5 text-sm font-semibold text-[#10b981]
border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
<div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-3 py-1.5 text-sm font-semibold text-[#10b981] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
<span className="h-2 w-2 rounded-full bg-[#10b981] shrink-0"></span>
<span className="font-semibold">Apple One</span>
<ChevronDown className="h-3.5 w-3.5 text-[#10b981]" />
@@ -27,11 +30,11 @@ export default function Navbar() {
{/* Search Bar */}
<div className="relative w-60">
<Search className="absolute left-4 top-3 h-4 w-4 text-gray-500" />
<Search className="absolute left-4 top-2.5 h-4 w-4 text-gray-500" />
<input
type="text"
placeholder="Search requests, equipment, met"
className="w-full rounded-xl bg-[#0a1826] pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 border border-[#132338] focus:outline-none focus:border-teal-500"
className="w-full rounded-xl bg-[#0a1826] pl-10 pr-4 py-2 text-sm text-white placeholder-gray-500 border border-[#132338] focus:outline-none focus:border-[#3de0c4]/50"
/>
</div>
</div>

9
components/dashboard/sideBarItem.tsx
View File

@@ -4,15 +4,14 @@ import Link from "next/link";
import { useState } from "react";
import { ChevronDown } from "lucide-react";
import {Props} from "@/constants/types";
import Button from "@/utils/button";
export default function SidebarItem({ item }: Props) {
const [open, setOpen] = useState(item.title === "Overview");
return (
<div className=" border-b border-slate-800 ">
<button
<Button
onClick={() => setOpen(!open)}
className="flex w-full items-center justify-between px-5 py-4 hover:bg-slate-900"
>
@@ -28,10 +27,10 @@ export default function SidebarItem({ item }: Props) {
open ? "rotate-180" : ""
}`}
/>
</button>
</Button>
{open && item.children.length > 0 && (
<div className="ml-8 border-l border-slate-700 pl-5 pb-3">
<div className="ml-6 border-l border-slate-700 pl-4 pb-2">
{item.children.map((child: any) => (
<Link
key={child.title}

9
components/dashboard/sidebar.tsx
View File

@@ -9,7 +9,7 @@ import {
export default function Sidebar() {
return (
<aside className=" bg-[#071321] text-white h-screen overflow-y-auto">
<aside className="fixed bg-[#071321] text-white h-screen overflow-y-auto">
<div className="flex items-center gap-2 px-2 pt-2 pb-3">
<div className="flex h-9 w-9 items-center justify-center rounded-lg
bg-[#3de0c4] font-bold text-[#05111d] text-sm">
@@ -19,7 +19,8 @@ export default function Sidebar() {
KA<span className="text-[#3de0c4]">FM</span>
</span>
</div>
<div className="mx-4 my-2 flex rounded-xl
<hr className="border-[#142538]" />
<div className="mx-4 my-4 flex rounded-xl
bg-[#091624] p-2 border border-[#142538]">
<button className="flex flex-1
items-center justify-center gap-1 rounded-lg bg-[#3de0c4] py-1.5 text-xs
@@ -43,10 +44,12 @@ export default function Sidebar() {
<SidebarItem
key={item.title}
item={item}
/>
))}
</div>
<div className="px-3 pb-2 pt-1 border-t border-[#0f1f30]">
<div className="px-3 pb-2 pt-1
border-t border-[#0f1f30]">
<button className="flex w-full items-center gap-2 rounded-xl py-2 px-3 text-xs text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
<ChevronsLeft size={16} />
Minimise menu

20
constants/constant.ts
View File

@@ -43,7 +43,7 @@ export const SIDEBAR_ITEMS = [
icon: LayoutGrid,
children: [
{ title: "Dashboard", href: "/overview/dashboard", icon: LayoutGrid },
{ title: "Engagement", href: "/overview/engagement", icon: Smile },
{ title: "Engagement", href: "/dashboard/overview/engagement", icon: Smile },
{ title: "Building Owner", href: "/overview/building-owner", icon: Building2 },
{ title: "Property Manager", href: "/overview/property-manager", icon: User },
{ title: "Service Engineer", href: "/overview/service-engineer", icon: Target },
@@ -154,3 +154,21 @@ export const chartData = [
rose: 'bg-rose-500',
emerald: 'bg-emerald-500',
};
export const SATISFACTION_DRIVERS = [
{ label: "Workplace cleanliness", score: 88, color: "bg-[#10b981]" },
{ label: "Response to requests", score: 82, color: "bg-[#10b981]" },
{ label: "Amenities & facilities", score: 79, color: "bg-[#06b6d4]" },
{ label: "Communication", score: 71, color: "bg-[#f59e0b]" },
{ label: "Comfort (HVAC / light)", score: 84, color: "bg-[#06b6d4]" },
];
// Mock Data for Tickets & Suggestions
export const TICKETS_DATA = [
{ title: "Pantry coffee machine down", type: "Complaint", status: "OPEN" },
{ title: "Add covered parking", type: "Suggestion", status: "CLOSED" },
{ title: "Lift slow on L4", type: "Complaint", status: "OPEN" },
{ title: "Lift slow on L4", type: "Complaint", status: "CLOSED" },
{ title: "More water dispensers", type: "Complaint", status: "CLOSED" },
];