+
+ {/* Left Side: TFM Requests Bar Chart (7-Columns Wide) */}
+
+
+
+
TFM requests · monthly
+ 2026 · auto-refresh 60s
+
+
+
+
+
-
-
+
+ {/* Right Side: Recent Activity Feed (5-Columns Wide) */}
+
+
+
+
Recent activity
+
+
+
+
+
diff --git a/components/dashboard/engagement.tsx b/components/dashboard/engagement.tsx
index ffc7907..6bbad37 100644
--- a/components/dashboard/engagement.tsx
+++ b/components/dashboard/engagement.tsx
@@ -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 (
-
+
{/* Page Header Section */}
@@ -33,79 +33,49 @@ export default function EngagementPage() {
{/* Action Buttons */}
-
+
-
+
+
+
-
- {/* Card 1: Engagement Score */}
-
-
-
-
82%
-
Engagement score
-
-
+ {/* Column of StatCard */}
- {/* Card 2: Survey Response */}
-
-
-
-
71%
-
Survey response
-
-
- {/* Card 3: Open Tickets */}
-
+
+
+
+
- {/* Card 4: CSAT */}
-
+
+
+
+
-
{/* Left Column: Satisfaction Drivers */}
@@ -174,7 +144,10 @@ export default function EngagementPage() {
-
+
diff --git a/components/dashboard/propertyManager.tsx b/components/dashboard/propertyManager.tsx
new file mode 100644
index 0000000..ed5da83
--- /dev/null
+++ b/components/dashboard/propertyManager.tsx
@@ -0,0 +1,157 @@
+
+import Button from "@/utils/button";
+import StatCard from "@/utils/dashStatCard";
+import { ProgressBarRow } from "@/utils/progressBarRow";
+import {
+ FileText,
+ Wrench,
+ ShieldCheck,
+ Coins,
+ Smile,
+ ChevronRight,
+ Sparkles
+} from "lucide-react";
+
+export default function PropertyManagerPortal() {
+ return (
+
+
+ {/* --- HEADER SECTION --- */}
+
+
+
+ Apple One — HQ Tower
+ •
+ Portal
+ •
+ Property Manager
+
+
+ Property manager portal
+
+
+ Day-to-day operations cockpit — work orders, SLA, budget, automated billing and occupant comfort in one remote view.
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
+
+ {/* --- ROW 1: STATS GRID --- */}
+
+
+
+ {/* --- ROW 2: SPLIT GRID --- */}
+
+
+ {/* Left Box: Work Order Status Tracking (7 Columns wide) */}
+
+
+
+
Work order status
+
+
+
+
+
+ {/* Inline Sub-metrics Row split container inside the card */}
+
+
+
+
ENERGY SAVED
+
₹3.5 L/mo
+
+
+
+
+ {/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
+
+
+
Quick actions
+
+
+ {[
+ "Track work orders",
+ "Energy optimization",
+ "Automated billing",
+ "Budget & approvals",
+ "Contracts & SLA",
+ ].map((action, idx) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {/* --- BOTTOM INFO BANNER --- */}
+
+
+ Manager view:
+ remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring.
+
+
+
+ {/* Floating Ask AI Button */}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/components/dashboard/statCard.tsx b/components/dashboard/statCard.tsx
deleted file mode 100644
index b2f74b0..0000000
--- a/components/dashboard/statCard.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { StatCardProps } from "@/constants/types";
-import { colorMap } from "@/constants/constant";
-
-
-
-export default function StatCard({ title, value, subtitle, progress, color }: StatCardProps) {
- return (
-
- );
-}
\ No newline at end of file
diff --git a/constants/constant.ts b/constants/constant.ts
index 7c9954b..58ede22 100644
--- a/constants/constant.ts
+++ b/constants/constant.ts
@@ -21,7 +21,6 @@ import {
Recycle,
GraduationCap,
Brain,
-
Activity,
Bot,
Gauge,
@@ -42,10 +41,10 @@ export const SIDEBAR_ITEMS = [
title: "Overview",
icon: LayoutGrid,
children: [
- { title: "Dashboard", href: "/overview/dashboard", icon: LayoutGrid },
+ { title: "Dashboard", href: "/dashboard/overview/dashboard", icon: LayoutGrid },
{ 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: "Building Owner", href: "/dashboard/overview/buildingOwner", icon: Building2 },
+ { title: "Property Manager", href: "/dashboard/overview/propertyManager", icon: User },
{ title: "Service Engineer", href: "/overview/service-engineer", icon: Target },
],
},
@@ -141,6 +140,14 @@ export const chartData = [
{ month: 'N', height: 'h-26' },
{ month: 'D', height: 'h-24' },
];
+ export const energyData = [
+ { month: "Jan", height: 'h-20' },
+ { month: "Feb", height: 'h-12' },
+ { month: "Mar", height: 'h-24' },
+ { month: "Apr", height: 'h-26' },
+ { month: "May", height: 'h-18' },
+ { month: "Jun", height: 'h-20' },
+];
export const activities = [
{ time: '09:42', text: '6/1009 assigned to ME Local', boldText: '6/1009' },
diff --git a/constants/types.ts b/constants/types.ts
index 43f0d22..a42e2f8 100644
--- a/constants/types.ts
+++ b/constants/types.ts
@@ -1,3 +1,7 @@
+import { LucideProps } from "lucide-react";
+import { ComponentType } from "react";
+import { colorMap } from "./constant";
+
export type Step = "login" | "verify" | "forgot";
@@ -16,20 +20,27 @@ export type Step = "login" | "verify" | "forgot";
export interface ActivityFeedProps {
activities: Activity[];
}
-interface ChartItem {
+ export interface ChartItem {
month: string;
- height: string; // Tailwind h-class like 'h-24'
+ height: string;
}
export interface BarChartProps {
data: ChartItem[];
}
export interface StatCardProps {
+ // Common Fields
title: string;
- value: number | string;
- subtitle: string;
- progress: number;
- color: 'teal' | 'amber' | 'rose' | 'emerald';
+ value: string | number;
+ variant?: "progress" | "icon";
+ subtitle?: string;
+ progress?: number;
+color?: keyof typeof colorMap;
+ icon?: ComponentType
;
+ badgeText?: string;
+ badgeClassName?: string;
+ iconContainerClassName?: string;
+ isActiveCard?: boolean;
}
export interface ProgressBarProps {
label: string;
@@ -41,4 +52,9 @@ export interface StatusProgressProps {
value: number;
total: number;
barColor?: string;
+}
+
+export interface InfoBannerProps {
+ boldText?: string;
+ normalText?: string;
}
\ No newline at end of file
diff --git a/components/dashboard/barchart.tsx b/utils/barchart.tsx
similarity index 66%
rename from components/dashboard/barchart.tsx
rename to utils/barchart.tsx
index e5b2083..e2109fd 100644
--- a/components/dashboard/barchart.tsx
+++ b/utils/barchart.tsx
@@ -4,13 +4,8 @@ import {BarChartProps} from "@/constants/types";
export default function BarChart({ data }: BarChartProps) {
return (
-
-
-
TFM requests · monthly
- 2026 · auto-refresh 60s
-
-
+
+
{/* Bars */}
@@ -29,6 +24,6 @@ export default function BarChart({ data }: BarChartProps) {
))}
+
);
}
\ No newline at end of file
diff --git a/components/dashboard/cardHeader.tsx b/utils/cardHeader.tsx
similarity index 100%
rename from components/dashboard/cardHeader.tsx
rename to utils/cardHeader.tsx
diff --git a/components/dashboard/cardWrapper.tsx b/utils/cardWrapper.tsx
similarity index 62%
rename from components/dashboard/cardWrapper.tsx
rename to utils/cardWrapper.tsx
index 897db28..a2cd9b4 100644
--- a/components/dashboard/cardWrapper.tsx
+++ b/utils/cardWrapper.tsx
@@ -1,4 +1,5 @@
-export function Card({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+export function Card({ children, className = "" }:
+ { children: React.ReactNode; className?: string }) {
return (
diff --git a/utils/dashStatCard.tsx b/utils/dashStatCard.tsx
new file mode 100644
index 0000000..7c42d35
--- /dev/null
+++ b/utils/dashStatCard.tsx
@@ -0,0 +1,66 @@
+import { StatCardProps } from "@/constants/types";
+import { colorMap } from "@/constants/constant";
+
+export default function StatCard({
+ title,
+ value,
+ variant = "progress",
+ subtitle,
+ progress,
+ color = "teal",
+ icon: Icon,
+ badgeText,
+ badgeClassName = "text-slate-500 font-mono uppercase",
+ iconContainerClassName = "bg-[#11233a] border-[#1b2c3f]/50 text-cyan-400",
+ isActiveCard = false,
+}: StatCardProps) {
+
+ // Base structural classes matched exactly to your dark UI design
+ const cardBorder = isActiveCard ? "border-[#0d9488]" : "border-[#142538]";
+
+ return (
+
+
+ {/* --- TOP HEADER SECTION --- */}
+
+ {variant === "icon" && Icon ? (
+
+
+ ) : (
+
+ {title}
+
+ )}
+
+ {badgeText && (
+
+ {badgeText}
+
+ )}
+
+
+ {/* --- BODY STATS SECTION --- */}
+
+
+ {value}
+
+
+ {/* Subtitle / Bottom Label text arrangement layout swap */}
+
+ {variant === "icon" ? title : subtitle}
+
+
+
+ {/* --- PROGRESS LAYER (Only renders if variant="progress") --- */}
+ {variant === "progress" && progress !== undefined && (
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/utils/infoBanner.tsx b/utils/infoBanner.tsx
new file mode 100644
index 0000000..64e4fa7
--- /dev/null
+++ b/utils/infoBanner.tsx
@@ -0,0 +1,22 @@
+
+
+import {InfoBannerProps} from "@/constants/types";
+
+export default function InfoBanner({
+ boldText,
+ normalText,
+}: InfoBannerProps) {
+ return (
+
+
+
+ {boldText && {boldText} }
+ {normalText}
+
+
+
+ );
+}
diff --git a/components/dashboard/progressBarRow.tsx b/utils/progressBarRow.tsx
similarity index 100%
rename from components/dashboard/progressBarRow.tsx
rename to utils/progressBarRow.tsx
diff --git a/utils/statCard.tsx b/utils/statCard.tsx
index 4ed1931..5b9044a 100644
--- a/utils/statCard.tsx
+++ b/utils/statCard.tsx
@@ -13,4 +13,4 @@ export default function Stat({
);
-}
\ No newline at end of file
+}
diff --git a/components/dashboard/statusProgressRow.tsx b/utils/statusProgressRow.tsx
similarity index 100%
rename from components/dashboard/statusProgressRow.tsx
rename to utils/statusProgressRow.tsx