Building Owner and Property Manager Screens are added
This commit is contained in:
@@ -1,34 +0,0 @@
|
||||
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 */}
|
||||
<div className="flex items-end justify-between h-40 px-2 border-b border-[#1b3454] pb-2">
|
||||
{data.map((item, idx) => (
|
||||
<div key={idx} className="flex flex-col items-center flex-1 group">
|
||||
<div className={`w-5 ${item.height} bg-teal-400 rounded-t transition-all duration-300 group-hover:bg-teal-300`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* X-Axis */}
|
||||
<div className="flex justify-between pt-3 px-2 text-xs font-medium text-gray-500">
|
||||
{data.map((item, idx) => (
|
||||
<span key={idx} className="w-5 text-center">{item.month}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
components/dashboard/buildingOwner.tsx
Normal file
112
components/dashboard/buildingOwner.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
|
||||
|
||||
export function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) {
|
||||
return (
|
||||
<div className="flex justify-between items-baseline mb-2 border-b border-[#162942]/50 pb-3">
|
||||
<h3 className="text-white text-base font-semibold tracking-wide">{title}</h3>
|
||||
{subtitle && (
|
||||
<span className="text-[#4e6178] text-xs font-medium uppercase tracking-wider">
|
||||
{subtitle}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
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}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
@@ -43,21 +40,44 @@ export default function Dashboard() {
|
||||
</div>
|
||||
|
||||
{/* 4 Cards Grid */}
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<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">
|
||||
<BarChart data={chartData} />
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-4">
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
<div className="lg:col-span-5">
|
||||
<ActivityFeed activities={activities} />
|
||||
|
||||
{/* 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>
|
||||
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
{/* 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>
|
||||
{/* Column of StatCard */}
|
||||
|
||||
{/* 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>
|
||||
<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]"
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
</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>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
|
||||
import { ProgressBarProps } from "@/constants/types";
|
||||
export function ProgressBarRow({ label, value, maxValue }: ProgressBarProps) {
|
||||
const percentage = (value / maxValue) * 100;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between py-1.5 text-sm">
|
||||
<span className="text-[#899db7] w-32 truncate">{label}</span>
|
||||
<div className="flex-1 mx-4 bg-[#122238] h-2.5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="bg-[#17cbb5] h-full rounded-full transition-all duration-500"
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-white font-bold w-6 text-right">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
components/dashboard/propertyManager.tsx
Normal file
157
components/dashboard/propertyManager.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
|
||||
import { StatusProgressProps } from "@/constants/types";
|
||||
|
||||
export function StatusProgressRow({ label, value, total, barColor = "bg-[#17cbb5]" }: StatusProgressProps) {
|
||||
const percentage = (value / total) * 100;
|
||||
|
||||
return (
|
||||
<div className="space-y-2 py-1.5">
|
||||
<div className="flex justify-between text-xs font-semibold">
|
||||
<span className="text-white">{label}</span>
|
||||
<span className="text-[#5b7391]">{value}/{total}</span>
|
||||
</div>
|
||||
<div className="bg-[#122238] h-3 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`${barColor} h-full rounded-full transition-all duration-500`}
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user