190 lines
8.0 KiB
TypeScript
190 lines
8.0 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
ClipboardCheck,
|
|
Clock,
|
|
AlertTriangle,
|
|
Activity,
|
|
Building2,
|
|
Users,
|
|
MapPin,
|
|
Grid,
|
|
ArrowRight,
|
|
Sparkles
|
|
} from "lucide-react";
|
|
import StatCard from "@/components/common/dashStatCard";
|
|
|
|
export default function AdminOverviewPortal() {
|
|
// Sample data for the recent audits table below
|
|
const recentAudits = [
|
|
{ id: 'AUD-1004', location: 'Local 1', lead: 'Local Admin', date: '2026-02-02', status: 'ACTIVE' },
|
|
{ id: 'AUD-1003', location: 'SRM Campus', lead: 'Estates Office', date: '2026-01-08', status: 'ACTIVE' },
|
|
{ id: 'AUD-1002', location: 'Novotel Pune', lead: 'Site FM Lead', date: '2025-12-12', status: 'ACTIVE' },
|
|
{ id: 'AUD-1001', location: 'Apple One', lead: 'Dhananjay T.', date: '2025-11-04', status: 'ACTIVE' },
|
|
];
|
|
|
|
// Sample data for module/checklist adoption progress bars
|
|
const adoptionModules = [
|
|
{ name: 'Dashboard', score: 100, count: '4/4' },
|
|
{ name: 'Helpdesk', score: 75, count: '3/4' },
|
|
{ name: 'Equipment', score: 75, count: '3/4' },
|
|
{ name: 'Request', score: 75, count: '3/4' },
|
|
{ name: 'Inventory', score: 50, count: '2/4' },
|
|
{ name: 'Energy', score: 75, count: '3/4' },
|
|
];
|
|
|
|
return (
|
|
<div className="my-15 text-slate-100 font-sans ">
|
|
{/* --- HEADER SECTION --- */}
|
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
|
<div>
|
|
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
|
|
<span className="text-teal-400">PLATFORM</span>
|
|
<span className="text-slate-500">•</span>
|
|
<span className="text-slate-500">KAFM</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
|
Platform overview
|
|
</h1>
|
|
<p className="text-sm font-medium text-slate-400 mt-1 max-w-xl leading-relaxed">
|
|
Live snapshot of every organization, user, and site managed across the KAFM facility platform.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Top Right Status Badge */}
|
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900/80 border border-teal-500/30 text-teal-400 text-xs font-mono w-fit">
|
|
<span className="h-2 w-2 rounded-full bg-teal-400 animate-pulse" />
|
|
<span>PRODUCTION</span>
|
|
<span className="text-slate-600">•</span>
|
|
<span className="text-teal-300/80">region us-east-1</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- STAT CARDS --- */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
{/* Card 1: Total Tenants */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="Total tenants"
|
|
value="4"
|
|
icon={Building2}
|
|
badgeText="4 active"
|
|
badgeClassName="text-teal-400 font-mono text-xs"
|
|
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
|
/>
|
|
|
|
{/* Card 2: Platform users */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="Platform users"
|
|
value="6"
|
|
icon={Users}
|
|
badgeText="+2 this wk"
|
|
badgeClassName="text-teal-400 font-mono text-xs"
|
|
iconContainerClassName="bg-slate-800/50 border-slate-700/50 text-blue-400"
|
|
/>
|
|
|
|
{/* Card 3: Managed sites */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="Managed sites"
|
|
value="6"
|
|
icon={MapPin}
|
|
badgeText="6 live"
|
|
badgeClassName="text-teal-400 font-mono text-xs"
|
|
iconContainerClassName="bg-amber-950/30 border-amber-800/30 text-amber-400"
|
|
/>
|
|
|
|
{/* Card 4: System modules */}
|
|
<StatCard
|
|
variant="icon"
|
|
title="System modules"
|
|
value="13"
|
|
icon={Grid}
|
|
badgeText="all enabled"
|
|
badgeClassName="text-slate-400 font-mono text-xs"
|
|
iconContainerClassName="bg-purple-950/40 border-purple-800/30 text-purple-400"
|
|
/>
|
|
</div>
|
|
|
|
{/* --- LOWER SECTION (ADDITION FROM SCREENSHOT) --- */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
{/* Left 2-Columns: Recently Onboarded Tenants Table */}
|
|
<div className="lg:col-span-2 bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-white">Recently onboarded tenants</h2>
|
|
<p className="text-xs text-slate-400 font-mono mt-0.5">Newest organizations on the platform</p>
|
|
</div>
|
|
<button className="text-teal-400 hover:text-teal-300 text-xs font-semibold flex items-center gap-1 transition-colors">
|
|
View all <ArrowRight className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Table Header */}
|
|
<div className="grid grid-cols-12 text-[11px] font-mono text-slate-500 uppercase tracking-wider py-2 border-b border-slate-800/80">
|
|
<span className="col-span-4">Organization</span>
|
|
<span className="col-span-3">Tenant ID</span>
|
|
<span className="col-span-3">Created</span>
|
|
<span className="col-span-2 text-right">Status</span>
|
|
</div>
|
|
|
|
{/* Table Rows */}
|
|
<div className="divide-y divide-slate-800/40">
|
|
{recentAudits.map((item, index) => (
|
|
<div key={index} className="grid grid-cols-12 items-center py-3 text-xs">
|
|
<div className="col-span-4 flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-lg bg-slate-800 border border-slate-700/60 flex items-center justify-center font-bold text-slate-300 text-xs">
|
|
{item.location.substring(0, 2).toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-slate-200">{item.location}</div>
|
|
<div className="text-[11px] text-slate-400">{item.lead}</div>
|
|
</div>
|
|
</div>
|
|
<span className="col-span-3 font-mono text-slate-400 text-xs">{item.id}</span>
|
|
<span className="col-span-3 font-mono text-slate-400 text-xs">{item.date}</span>
|
|
<div className="col-span-2 flex justify-end">
|
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-teal-950/80 text-teal-400 border border-teal-800/50">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-teal-400"></span>
|
|
{item.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right 1-Column: Module Adoption */}
|
|
<div className="bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 flex flex-col justify-between">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-white mb-5">Module adoption</h2>
|
|
|
|
<div className="space-y-4">
|
|
{adoptionModules.map((module, idx) => (
|
|
<div key={idx} className="space-y-1.5">
|
|
<div className="flex justify-between items-center text-xs">
|
|
<span className="font-semibold text-slate-200">{module.name}</span>
|
|
<span className="font-mono text-slate-400 text-[11px]">{module.count}</span>
|
|
</div>
|
|
{/* Progress Bar Container */}
|
|
<div className="w-full bg-slate-800/80 h-2 rounded-full overflow-hidden">
|
|
<div
|
|
className="bg-teal-400 h-full rounded-full transition-all duration-500"
|
|
style={{ width: `${module.score}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
} |