210 lines
10 KiB
TypeScript
210 lines
10 KiB
TypeScript
|
|
import { Check } from 'lucide-react';
|
|
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 '@/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">
|
|
<div>
|
|
<div className="flex items-center gap-2
|
|
text-xs font-bold uppercase tracking-widest text-teal-500 mt-8">
|
|
<span>Apple One — HQ Tower</span>
|
|
<span className="text-gray-600">·</span>
|
|
<span className="text-gray-400">Tenant</span>
|
|
<span className="text-gray-600">·</span>
|
|
<span className="text-gray-400">Apple One</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white tracking-tight">Operations dashboard</h1>
|
|
<p className="mt-2 text-sm text-gray-400 max-w-xl leading-relaxed">
|
|
Live snapshot scoped to Apple One. The layout below is the dashboard published for this tenant in Administration.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-20 flex items-center gap-1 rounded-full border border-teal-500/30 bg-teal-500/10 px-2 py-1 text-xs font-medium text-teal-400">
|
|
<Check className="h-3.5 w-3.5 " />
|
|
<span>Published layout</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 4 Cards Grid */}
|
|
<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={3} subtitle="assets off-plan" progress={40} color="rose" />
|
|
<StatCard title="Assets Tracked" value={8} subtitle="across blocks" progress={65} color="emerald" />
|
|
</div>
|
|
|
|
|
|
<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>
|
|
|
|
{/* 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">
|
|
|
|
{/* Schedule Performance MMR */}
|
|
<div className="lg:col-span-7">
|
|
<Card>
|
|
<CardHeader title="Schedule performance • MMR" subtitle="ppm & amc" />
|
|
<div className="overflow-x-auto mt-2">
|
|
<table className=" text-left border-collapse">
|
|
<thead>
|
|
<tr className="text-[#4b5f7a] text-xs font-bold uppercase tracking-wider border-b border-[#1b2b41]/40 pb-3">
|
|
<th className="pb-3">Schedule</th>
|
|
<th className="pb-3 text-right">Total</th>
|
|
<th className="pb-3 text-right">Done</th>
|
|
<th className="pb-3 text-right">On Time</th>
|
|
<th className="pb-3 text-right">Delayed</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-[#1b2b41]/30 text-sm font-semibold">
|
|
<tr className="hover:bg-[#11233a]/25 transition-colors">
|
|
<td className="py-4 text-white">PPM</td>
|
|
<td className="py-4 text-right text-slate-300">24</td>
|
|
<td className="py-4 text-right text-slate-300">19</td>
|
|
<td className="py-4 text-right text-slate-300">17</td>
|
|
<td className="py-4 text-right text-red-500">2</td>
|
|
</tr>
|
|
<tr className="hover:bg-[#11233a]/25 transition-colors">
|
|
<td className="py-4 text-white">AMC</td>
|
|
<td className="py-4 text-right text-slate-300">8</td>
|
|
<td className="py-4 text-right text-slate-300">6</td>
|
|
<td className="py-4 text-right text-slate-300">6</td>
|
|
<td className="py-4 text-right text-slate-400">0</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Energy Today */}
|
|
<div className="lg:col-span-5 ">
|
|
<Card>
|
|
<CardHeader title="Energy • today"
|
|
subtitle="day-wise" />
|
|
<div className="space-y-2
|
|
text-sm mt-2 font-mono">
|
|
<div className="flex justify-between items-baseline">
|
|
<span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Electricity</span>
|
|
<span className="text-white text-base font-bold">1,284 <span className="text-xs font-normal text-slate-400 font-sans">kwh</span></span>
|
|
</div>
|
|
<div className="flex justify-between items-baseline">
|
|
<span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Water</span>
|
|
<span className="text-white text-base font-bold">312 <span className="text-xs font-normal text-slate-400 font-sans">kL</span></span>
|
|
</div>
|
|
<div className="flex justify-between items-baseline">
|
|
<span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Diesel</span>
|
|
<span className="text-white text-base font-bold">48 <span className="text-xs font-normal text-slate-400 font-sans">L</span></span>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center pt-4 border-t border-[#1b2b41]/40">
|
|
<span className="text-[#4b5f7a] font-semibold text-xs tracking-wider uppercase">Vs Avg</span>
|
|
<div className="flex items-center space-x-3">
|
|
<span className="bg-[#0b2723] text-[#17cbb5] border border-[#17cbb5]/20 text-[10px] font-bold px-3 py-1 rounded-full flex items-center gap-1.5 uppercase">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-[#17cbb5] inline-block animate-pulse"></span>
|
|
Completed
|
|
</span>
|
|
<span className="text-[#17cbb5] font-bold text-sm">-6%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* ROW 2: Sub-metrics and Tracking widgets */}
|
|
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
{/* Top 5 Requester */}
|
|
<Card>
|
|
<CardHeader title="Top 5 requester" subtitle="this month" />
|
|
<div className="space-y-3 mt-1">
|
|
<ProgressBarRow label="Academic Block" value={18} maxValue={18} />
|
|
<ProgressBarRow label="Hostel Block" value={13} maxValue={18} />
|
|
<ProgressBarRow label="HVAC Plant" value={9} maxValue={18} />
|
|
<ProgressBarRow label="Pump Room" value={6} maxValue={18} />
|
|
<ProgressBarRow label="Lobby" value={4} maxValue={18} />
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Asset Register */}
|
|
<Card>
|
|
<CardHeader title="Asset register" subtitle="live" />
|
|
<div className="flex items-baseline space-x-3 my-4">
|
|
<span className="text-5xl font-light text-[#17cbb5]">8</span>
|
|
<span className="text-[#5b7391] text-xs font-semibold uppercase tracking-wider">assets tracked</span>
|
|
</div>
|
|
<div className="space-y-3 text-sm font-semibold border-t border-[#1b2b41]/40 pt-4">
|
|
<div className="flex justify-between py-1">
|
|
<span className="text-[#4b5f7a] text-xs uppercase tracking-wider">On Plan</span>
|
|
<span className="text-white">3</span>
|
|
</div>
|
|
<div className="flex justify-between py-1">
|
|
<span className="text-[#4b5f7a] text-xs uppercase tracking-wider">Attention</span>
|
|
<span className="text-red-500">5</span>
|
|
</div>
|
|
<div className="flex justify-between py-1">
|
|
<span className="text-[#4b5f7a] text-xs uppercase tracking-wider">Groups</span>
|
|
<span className="text-white">4</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* PM Plan vs Started */}
|
|
<Card>
|
|
<CardHeader title="PM plan vs started" subtitle="this month" />
|
|
<div className="space-y-4 mt-1">
|
|
<StatusProgressRow label="Planned" value={24} total={24} barColor="bg-[#52647c]" />
|
|
<StatusProgressRow label="Started" value={19} total={24} barColor="bg-[#17cbb5]" />
|
|
<StatusProgressRow label="Completed" value={17} total={24} barColor="bg-[#10b981]" />
|
|
</div>
|
|
</Card>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
} |