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

2
app/dashboard/layout.tsx
View File

@@ -17,7 +17,7 @@ export default function DashboardLayout({
{/* Shared Navbar */}
<Navbar />
{/* The active page content renders here */}
<main className="flex-1 pl-68 bg-[#071321]">
{children}
</main>

18
app/dashboard/overview/buildingOwner/page.tsx
View File

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

2
app/dashboard/overview/dashboard/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import Sidebar from "@/components/dashboard/sidebar";
import OperationsDashboard from "@/components/dashboard/dashboard";

4
app/dashboard/overview/engagement/page.tsx
View File

@@ -2,10 +2,6 @@
import EngagementPage from "@/components/dashboard/engagement";
export default function EngagementDashboard() {
return (

14
app/dashboard/overview/propertyManager/page.tsx
View File

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

5
app/page.tsx
View File

@@ -1,7 +1,10 @@
import Image from "next/image";
import OverViewDashboardPage from "./dashboard/overview/buildingOwner/page";
export default function Home() {
return (
<div>heelo</div>
<div>
<OverViewDashboardPage/>
</div>
);
}

6
components/auth/loginForm.tsx
View File

@@ -38,13 +38,13 @@ export default function LoginForm({ onSuccess,onForgotPassword }: Props) {
/>
<button
type="button"
<Button
onClick={() => setShowPassword(!showPassword)}
className="absolute right-4 top-[40px] text-slate-500 hover:text-slate-300"
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
</button>
</Button>
</div>
</div>

112
components/dashboard/buildingOwner.tsx Normal file
View File

@@ -0,0 +1,112 @@
import { Building2, ShieldCheck, Database, Leaf, FileSpreadsheet, Sparkles } from "lucide-react";
import StatCard from "@/utils/dashStatCard";
import { energyData } from "@/constants/constant";
import BarChart from "@/utils/barchart";
import InfoBanner from "@/utils/infoBanner";
import Button from "@/utils/button";
import { ProgressBarRow } from "@/utils/progressBarRow";
export default function BuildingOwnerPortal() {
// Mock data matching the screenshot chart (Jan - Jun)
return (
<div className="min-h-screen bg-[#060d18] text-slate-100 p-6 lg:p-10 font-sans antialiased selection:bg-teal-500/30">
{/* --- HEADER SECTION --- */}
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
<div>
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
<span className="text-teal-400">Apple One — HQ Tower</span>
<span>•</span>
<span>Portal</span>
<span>•</span>
<span>Building Owner</span>
</div>
<h1 className="text-3xl font-extrabold text-white tracking-tight mt-2">
Building owner portal
</h1>
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
Portfolio-level benchmarking, property performance, energy-cost outlook and ESG standing for asset owners and investors.
</p>
</div>
{/* Action Button */}
<Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm self-start md:mt-6">
<FileSpreadsheet size={14} className="text-slate-400" />
Portfolio report
</Button>
</div>
{/* --- ROW 1: STATS GRID --- */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<StatCard
variant="icon" title="Managed assets" value="8" icon={Building2}
badgeText="2 sites" badgeClassName="text-slate-500 lowercase font-mono"
iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
/>
<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]"
/>
<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 font-sans normal-case"
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
/>
</div>
{/* --- ROW 2: CHARTS & METRICS SPLIT GRID --- */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6 items-stretch">
{/* Left Box: Site Benchmarking Progress Lists (7 Columns) */}
<div className="lg:col-span-7 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
<div>
<div className="flex items-center justify-between mb-8">
<h3 className="text-sm font-semibold text-white tracking-wide">Site benchmarking</h3>
<span className="text-[10px] font-mono text-slate-500 uppercase tracking-wider">performance index</span>
</div>
<div className="space-y-6 my-2">
{/* Progress Item 1 */}
<ProgressBarRow label="HQ Tower" value={18} maxValue={18} />
<ProgressBarRow label="Annexe" value={13} maxValue={18} />
</div>
</div>
</div>
{/* Right Box: Energy Cost Bar Chart integration (5 Columns) */}
<div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
<div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-semibold text-white tracking-wide">
Energy cost outlook · ₹L
</h3>
<span className="text-[10px] font-mono text-slate-500 tracking-wider lowercase">
forecast ↓
</span>
</div>
<hr className="border-[#142538] mb-6" />
<div className="flex-grow flex flex-col justify-end">
<BarChart data={energyData} />
</div>
</div>
</div>
{/* --- BOTTOM INFORMATION VIEW BANNER --- */}
<div className="mb-20">
<InfoBanner
boldText="Owner view:"
normalText="asset-level benchmarks, property metrics, team performance and predicted energy costs — a remote, read-only window across the whole portfolio."
/>
</div>
</div>
);
}

46
components/dashboard/dashboard.tsx
View File

@@ -1,23 +1,20 @@
import { Check } from 'lucide-react';
import Navbar from "@/components/dashboard/navbar";
import BarChart from "@/components/dashboard/barchart";
import StatCard from "@/components/dashboard/statCard";
import BarChart from "@/utils/barchart";
import StatCard from "@/utils/dashStatCard";
import ActivityFeed from "@/components/dashboard/activityFeed";
import {activities, chartData} from "@/constants/constant"
import { Card } from '@/components/dashboard/cardWrapper';
import {CardHeader} from '@/components/dashboard/cardHeader';
import {ProgressBarRow }from '@/components/dashboard/progressBarRow';
import {StatusProgressRow} from '@/components/dashboard/statusProgressRow';
import { Card } from '@/utils/cardWrapper';
import {CardHeader} from '@/utils/cardHeader';
import {ProgressBarRow }from '@/utils/progressBarRow';
import {StatusProgressRow} from '@/utils/statusProgressRow';
export default function Dashboard() {
return (
<div >
<hr className="border-[#142538]" />
<main className=" pt-8 bg-[#071321] text-[#93a3b8] font-sans antialiased" >
{/* Title Section */}
<div className="flex items-start justify-between">
@@ -46,19 +43,42 @@ export default function Dashboard() {
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
<StatCard title="Open Requests" value={14} subtitle="+4 overdue" progress={70} color="teal" />
<StatCard title="Checklists Due" value={6} subtitle="of 10 scheduled" progress={60} color="amber" />
<StatCard title="PPM Attention" value={4} subtitle="assets off-plan" progress={40} color="rose" />
<StatCard title="PPM Attention" value={3} subtitle="assets off-plan" progress={40} color="rose" />
<StatCard title="Assets Tracked" value={8} subtitle="across blocks" progress={65} color="emerald" />
</div>
{/* Lower Row Grid */}
<div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-4">
<div className="lg:col-span-7">
{/* Left Side: TFM Requests Bar Chart (7-Columns Wide) */}
<div className="lg:col-span-7 flex flex-col">
<div className="rounded-xl border
border-[#14253d] bg-[#0c1a2c] p-2 flex flex-col justify-between h-full">
<div className="flex items-center justify-between mb-4">
<h3 className="text-sm font-semibold text-white tracking-wide">TFM requests · monthly</h3>
<span className="text-xs font-mono text-gray-500 tracking-wider">2026 · auto-refresh 60s</span>
</div>
<hr className="border-[#14253d] mb-6" />
<div className="flex-grow flex flex-col justify-end">
<BarChart data={chartData} />
</div>
<div className="lg:col-span-5">
</div>
</div>
{/* Right Side: Recent Activity Feed (5-Columns Wide) */}
<div className="lg:col-span-5 flex flex-col">
<div className="rounded-xl border border-[#14253d] bg-[#0c1a2c] p-5 flex flex-col h-full">
<div className="mb-4">
<h3 className="text-sm font-semibold text-white tracking-wide">Recent activity</h3>
</div>
<hr className="border-[#14253d] mb-2" />
<div className="flex-grow overflow-y-auto">
<ActivityFeed activities={activities} />
</div>
</div>
</div>
</div>
<div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">

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">
{/* Column of StatCard */}
{/* 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 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]"
/>
<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>
{/* 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) */}
{/* (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>

157
components/dashboard/propertyManager.tsx Normal file
View File

@@ -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 (
<div className="min-h-screen
text-slate-100 mt-15
font-sans antialiased selection:bg-teal-500/30 relative">
{/* --- HEADER SECTION --- */}
<div className="flex flex-col
md:flex-row md:items-start md:justify-between
gap-4 mb-8">
<div>
<div className="flex items-center gap-2 text-[10px]
font-bold tracking-widest text-slate-500 uppercase font-mono">
<span className="text-teal-400">Apple One — HQ Tower</span>
<span>•</span>
<span>Portal</span>
<span>•</span>
<span>Property Manager</span>
</div>
<h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
Property manager portal
</h1>
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
Day-to-day operations cockpit — work orders, SLA, budget, automated billing and occupant comfort in one remote view.
</p>
</div>
{/* Action Buttons */}
<div className="flex items-center gap-3 self-start md:mt-6">
<Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
<FileText size={14} className="text-slate-400" />
Documents
</Button>
<Button className="flex items-center gap-2 px-4 py-2 bg-[#14b8a6]/10 hover:bg-[#14b8a6]/20 border border-[#14b8a6]/30 rounded-xl text-xs font-bold text-[#2dd4bf] transition-colors duration-200 shadow-sm">
<Wrench size={14} />
Work orders
</Button>
</div>
</div>
{/* --- ROW 1: STATS GRID --- */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
<StatCard
title="Open work orders" value="15" icon={FileText}
badgeText="active" badgeClassName="text-slate-500 lowercase font-mono"
iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
/>
<StatCard
title="SLA compliance" value="17%" icon={ShieldCheck}
badgeText="this month" badgeClassName="text-emerald-400 lowercase font-mono"
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
/>
<StatCard
title="Budget used" value="74%" icon={Coins}
badgeText="FY 2026" badgeClassName="text-slate-500 font-mono"
iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
/>
<StatCard
title="Occupant comfort" value="82%" icon={Smile}
badgeText="CSAT" badgeClassName="text-emerald-400 font-mono"
iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
/>
</div>
{/* --- ROW 2: SPLIT GRID --- */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4">
{/* Left Box: Work Order Status Tracking (7 Columns wide) */}
<div className="lg:col-span-7 rounded-xl border
border-[#142538] bg-[#091624] p-4 flex flex-col justify-between">
<div>
<div className="mb-8">
<h3 className="text-sm font-semibold text-white tracking-wide">Work order status</h3>
</div>
<div className="space-y-4 my-2">
<ProgressBarRow label="Open" value={18} maxValue={18} />
<ProgressBarRow label="In Progress" value={13} maxValue={18} />
<ProgressBarRow label="Completed" value={9} maxValue={18} />
</div>
</div>
{/* Inline Sub-metrics Row split container inside the card */}
<div className="grid grid-cols-2 border border-[#142538] rounded-xl bg-[#060d18]/40 mt-6 overflow-hidden">
<div className="p-4 border-r border-[#142538]">
<div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">BILLED MTD</div>
<div className="text-base font-bold text-white mt-1">₹99.4 L</div>
</div>
<div className="p-4">
<div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">ENERGY SAVED</div>
<div className="text-base font-bold text-emerald-400 mt-1">₹3.5 L/mo</div>
</div>
</div>
</div>
{/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
<div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
<div>
<h3 className="text-sm font-semibold text-white tracking-wide mb-6">Quick actions</h3>
<div className="space-y-2">
{[
"Track work orders",
"Energy optimization",
"Automated billing",
"Budget & approvals",
"Contracts & SLA",
].map((action, idx) => (
<button
key={idx}
className="w-full flex items-center justify-between p-3.5 bg-[#060d18]/40 hover:bg-[#11233a]/40 border border-[#142538] hover:border-[#1b3454] rounded-xl text-xs font-bold text-white text-left transition-all duration-150 group"
>
<span className="flex items-center gap-3">
<ChevronRight size={14} className="text-slate-500 group-hover:text-teal-400 transition-colors" />
{action}
</span>
</button>
))}
</div>
</div>
</div>
</div>
{/* --- BOTTOM INFO BANNER --- */}
<div className="mb-20 rounded-xl border border-[#142538]/80 bg-[#091624]/60 p-4 border-l-2 border-l-teal-400">
<p className="text-xs text-slate-400 font-medium">
<span className="text-white font-bold">Manager view: </span>
remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring.
</p>
</div>
{/* Floating Ask AI Button */}
<button className="fixed bottom-6 right-6 flex items-center gap-2 px-4 py-2.5 bg-[#14b8a6] hover:bg-[#0d9488] text-slate-900 rounded-full text-xs font-bold transition-all shadow-lg hover:scale-105 active:scale-95 z-50">
<Sparkles size={14} fill="currentColor" />
Ask AI
</button>
</div>
);
}

24
components/dashboard/statCard.tsx
View File

@@ -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 (
<div className="rounded-xl border border-[#14253d] bg-[#0c1a2c] p-4 flex flex-col justify-between ">
<div>
<span className="text-xs font-bold uppercase tracking-wider text-gray-400">{title}</span>
<div className="text-4xl font-bold text-white mt-1">{value}</div>
</div>
<div >
<span className="text-xs text-gray-400">{subtitle}</span>
<div className="w-full bg-[#162a45] h-1.5 rounded-full mt-2 overflow-hidden">
<div
className={`h-1.5 rounded-full ${colorMap[color]} transition-all duration-500`}
style={{ width: `${progress}%` }}
/>
</div>
</div>
</div>
);
}

15
constants/constant.ts
View File

@@ -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 },
],
},
@@ -140,6 +139,14 @@ export const chartData = [
{ month: 'O', height: 'h-20' },
{ 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 = [

28
constants/types.ts
View File

@@ -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<LucideProps>;
badgeText?: string;
badgeClassName?: string;
iconContainerClassName?: string;
isActiveCard?: boolean;
}
export interface ProgressBarProps {
label: string;
@@ -42,3 +53,8 @@ export interface StatusProgressProps {
total: number;
barColor?: string;
}
export interface InfoBannerProps {
boldText?: string;
normalText?: string;
}

11
components/dashboard/barchart.tsx → utils/barchart.tsx
View File

@@ -4,13 +4,8 @@ import {BarChartProps} from "@/constants/types";
export default function BarChart({ data }: BarChartProps) {
return (
<div className="rounded-xl border border-[#14253d] bg-[#0c1a2c]
p-4 flex flex-col justify-between">
<div className="flex items-center justify-between mb-4 ">
<h3 className="text-base font-semibold text-white">TFM requests · monthly</h3>
<span className="text-xs text-gray-500">2026 · auto-refresh 60s</span>
</div>
<hr className="border-[#14253d] mb-6" />
<div>
{/* Bars */}
@@ -29,6 +24,6 @@ export default function BarChart({ data }: BarChartProps) {
))}
</div>
</div>
</div>
);
}

0
components/dashboard/cardHeader.tsx → utils/cardHeader.tsx
View File

3
components/dashboard/cardWrapper.tsx → utils/cardWrapper.tsx
View File

@@ -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 (
<div className={`bg-[#0a1526] border border-[#162942] rounded-xl p-3
shadow-xl flex flex-col justify-between ${className}`}>

66
utils/dashStatCard.tsx Normal file
View File

@@ -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 (
<div className={`relative rounded-2xl border ${cardBorder} bg-[#091624] p-5 flex flex-col justify-between min-h-[142px] w-full transition-all duration-300`}>
{/* --- TOP HEADER SECTION --- */}
<div className="flex items-center justify-between w-full">
{variant === "icon" && Icon ? (
<div className={`flex h-9 w-9 items-center justify-center rounded-lg border ${iconContainerClassName}`}>
<Icon size={18} />
</div>
) : (
<span className="text-xs font-bold uppercase tracking-wider text-slate-400/80">
{title}
</span>
)}
{badgeText && (
<span className={`text-[10px] font-semibold tracking-wider ${badgeClassName}`}>
{badgeText}
</span>
)}
</div>
{/* --- BODY STATS SECTION --- */}
<div className="mt-4 flex-grow flex flex-col justify-end">
<div className="text-3xl font-extrabold text-white tracking-tight leading-none">
{value}
</div>
{/* Subtitle / Bottom Label text arrangement layout swap */}
<p className="text-xs font-semibold text-slate-400/70 mt-2">
{variant === "icon" ? title : subtitle}
</p>
</div>
{/* --- PROGRESS LAYER (Only renders if variant="progress") --- */}
{variant === "progress" && progress !== undefined && (
<div className="w-full bg-[#162a45] h-1.5 rounded-full mt-3 overflow-hidden">
<div
className={`h-1.5 rounded-full ${colorMap[color] || 'bg-teal-500'} transition-all duration-500`}
style={{ width: `${progress}%` }}
/>
</div>
)}
</div>
);
}

22
utils/infoBanner.tsx Normal file
View File

@@ -0,0 +1,22 @@
import {InfoBannerProps} from "@/constants/types";
export default function InfoBanner({
boldText,
normalText,
}: InfoBannerProps) {
return (
<div className="w-full
rounded-xl border border-l-4 border-[#142538]
border-l-[#10b981] bg-[#091624]
p-4 flex items-center shadow-sm">
<p className="text-sm font-medium text-slate-300 tracking-wide leading-relaxed">
{boldText && <strong className="text-white font-bold mr-1.5">{boldText}</strong>}
{normalText}
</p>
</div>
);
}

0
components/dashboard/progressBarRow.tsx → utils/progressBarRow.tsx
View File

0
components/dashboard/statusProgressRow.tsx → utils/statusProgressRow.tsx
View File