Overview dashboard and Employee Engagement is added

2026-07-15 18:11:25 +05:30
parent 4c8c537f9c
commit 104f8f7abf
13 changed files with 314 additions and 50 deletions
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -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>
+  );
+}
--- a/app/dashboard/overview/buildingOwner/page.tsx
+++ b/app/dashboard/overview/buildingOwner/page.tsx
--- a/app/dashboard/overview/dashboard/page.tsx
+++ b/app/dashboard/overview/dashboard/page.tsx
@@ -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>
+   
+  );
+}
--- a/app/dashboard/overview/engagement/page.tsx
+++ b/app/dashboard/overview/engagement/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import EngagementPage from "@/components/dashboard/engagement";
+
+
+
+
+
+export default function EngagementDashboard() {
+  return (
+    
+
+        <div className="p-6">
+       <EngagementPage/>
+        
+        </div>
+   
+  );
+}
--- a/app/dashboard/overview/propertyManager/page.tsx
+++ b/app/dashboard/overview/propertyManager/page.tsx
--- a/app/dashboard/overview/serviceEngineer/page.tsx
+++ b/app/dashboard/overview/serviceEngineer/page.tsx
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -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");
 }
--- a/components/dashboard/dashboard.tsx
+++ b/components/dashboard/dashboard.tsx
@@ -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>
--- a/components/dashboard/engagement.tsx
+++ b/components/dashboard/engagement.tsx
@@ -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>
+  );
+}
--- a/components/dashboard/navbar.tsx
+++ b/components/dashboard/navbar.tsx
@@ -2,36 +2,39 @@ 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">
-  <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]" />
-</div>
+        <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]" />
+        </div>

        {/* Location Selector */}
-      <div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-4 py-2 text-sm font-medium text-[#cbd5e1] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
-  <MapPin className="h-4 w-4 text-gray-500 shrink-0" />
-  <span className="whitespace-nowrap">
-    Apple One — <span className="text-[#cbd5e1] font-semibold">HQ Tower</span>
-  </span>
-  <ChevronDown className="h-4 w-4 text-gray-500 shrink-0" />
-</div>
+        <div className="flex items-center gap-2 rounded-full bg-[#0a1826] px-4 py-2 text-sm font-medium text-[#cbd5e1] border border-[#132338] cursor-pointer hover:bg-[#0f2338] transition whitespace-nowrap">
+          <MapPin className="h-4 w-4 text-gray-500 shrink-0" />
+          <span className="whitespace-nowrap">
+            Apple One — <span className="text-[#cbd5e1] font-semibold">HQ Tower</span>
+          </span>
+          <ChevronDown className="h-4 w-4 text-gray-500 shrink-0" />
+        </div>

        {/* 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>
--- a/components/dashboard/sideBarItem.tsx
+++ b/components/dashboard/sideBarItem.tsx
@@ -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
+    <div className=" border-b border-slate-800 ">
+      <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}
--- a/components/dashboard/sidebar.tsx
+++ b/components/dashboard/sidebar.tsx
@@ -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
--- a/constants/constant.ts
+++ b/constants/constant.ts
@@ -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" },
+];
+