Tab Constant is added
This commit is contained in:
@@ -1,32 +1,8 @@
|
||||
import { ChevronDown, Trash2, X, Plus, Sparkles } from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import { initialRows } from "@/constants/constant";
|
||||
import { ChevronDown, Trash2, X, Plus, } from "lucide-react";
|
||||
|
||||
|
||||
const initialRows = [
|
||||
// Row 1 (2 cards)
|
||||
{
|
||||
id: "row-1",
|
||||
widgets: [
|
||||
{ id: "w1", title: "TFM Requests · Monthly", type: "report.widget" },
|
||||
{ id: "w2", title: "Recent Activity", type: "report.widget" },
|
||||
],
|
||||
},
|
||||
// Row 2 (2 cards)
|
||||
{
|
||||
id: "row-2",
|
||||
widgets: [
|
||||
{ id: "w3", title: "Schedule Performance", type: "report.widget" },
|
||||
{ id: "w4", title: "Energy · Today", type: "report.widget" },
|
||||
],
|
||||
},
|
||||
// Row 3 (3 cards)
|
||||
{
|
||||
id: "row-3",
|
||||
widgets: [
|
||||
{ id: "w5", title: "Top 5 Requester", type: "report.widget" },
|
||||
{ id: "w6", title: "Asset Register", type: "report.widget" },
|
||||
{ id: "w7", title: "PM Plan vs Started", type: "report.widget" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Note the 'export default' keyword here:
|
||||
export default function DynamicDashboardPortal() {
|
||||
@@ -35,10 +11,10 @@ export default function DynamicDashboardPortal() {
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
||||
<span>PLATFORM</span>
|
||||
<span>•</span>
|
||||
<span>DYNAMIC DASHBOARD</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">DYNAMIC DASHBOARD</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight">
|
||||
Dynamic dashboard
|
||||
@@ -55,12 +31,12 @@ export default function DynamicDashboardPortal() {
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
|
||||
PUBLISHED
|
||||
</span>
|
||||
<button className="bg-[#0E1A2B] hover:bg-slate-800 text-slate-200 border border-slate-800 px-4 py-2 rounded-lg text-xs font-semibold transition-colors">
|
||||
<Button className="bg-[#0E1A2B] hover:bg-slate-800 text-slate-200 border border-slate-800 px-4 py-2 rounded-lg text-xs font-semibold transition-colors">
|
||||
Save draft
|
||||
</button>
|
||||
<button className="bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-xs px-4 py-2 rounded-lg transition-colors shadow-lg shadow-teal-500/10">
|
||||
</Button>
|
||||
<Button className="bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-xs px-4 py-2 rounded-lg transition-colors shadow-lg shadow-teal-500/10">
|
||||
Publish
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -152,18 +128,18 @@ export default function DynamicDashboardPortal() {
|
||||
<span className="text-xs font-mono text-slate-400 uppercase tracking-wider">
|
||||
Add row:
|
||||
</span>
|
||||
<button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
|
||||
<Button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
|
||||
<Plus className="w-3.5 h-3.5 text-teal-400" />
|
||||
<span>1 card</span>
|
||||
</button>
|
||||
<button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
|
||||
</Button>
|
||||
<Button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
|
||||
<Plus className="w-3.5 h-3.5 text-teal-400" />
|
||||
<span>2 cards</span>
|
||||
</button>
|
||||
<button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
|
||||
</Button>
|
||||
<Button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
|
||||
<Plus className="w-3.5 h-3.5 text-teal-400" />
|
||||
<span>3 cards</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -2,36 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, ChevronDown } from "lucide-react";
|
||||
|
||||
const initialLanguageValues = [
|
||||
{
|
||||
id: 1,
|
||||
app: "Web Console",
|
||||
menu: "Tenant",
|
||||
screen: "Tenant List",
|
||||
uiKey: "btn.add_tenant",
|
||||
code: "EN",
|
||||
value: "Add Tenant",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
app: "Web Console",
|
||||
menu: "Site",
|
||||
screen: "Site List",
|
||||
uiKey: "btn.add_site",
|
||||
code: "EN",
|
||||
value: "Add Site",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
app: "Mobile App",
|
||||
menu: "Inspections",
|
||||
screen: "QR Round",
|
||||
uiKey: "lbl.scan_qr",
|
||||
code: "EN",
|
||||
value: "Scan QR to begin round",
|
||||
},
|
||||
];
|
||||
import { initialLanguageValues } from "@/constants/constant";
|
||||
|
||||
export default function LanguagePortal() {
|
||||
|
||||
@@ -43,12 +14,12 @@ export default function LanguagePortal() {
|
||||
<div className="my-15 text-slate-100 font-sans ">
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
||||
<span>PLATFORM</span>
|
||||
<span>•</span>
|
||||
<span>LANGUAGE</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600" >•</span>
|
||||
<span className="text-gray-400">LANGUAGE</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight">Language</h1>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight">Language</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-3xl leading-relaxed">
|
||||
Manage translation keys across apps, menus and screens — then resolve their values per tenant.
|
||||
</p>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import Button from "@/components/common/button";
|
||||
import { Smartphone } from "lucide-react";
|
||||
|
||||
export default function MobileFlowsPortal() {
|
||||
@@ -7,10 +8,10 @@ export default function MobileFlowsPortal() {
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-6">
|
||||
<div>
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
||||
<span>PLATFORM</span>
|
||||
<span>•</span>
|
||||
<span>MOBILE</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">MOBILE</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
@@ -26,10 +27,10 @@ export default function MobileFlowsPortal() {
|
||||
|
||||
{/* Action Button */}
|
||||
<div className="self-start md:self-auto shrink-0">
|
||||
<button className="flex items-center gap-2 bg-[#0A1628] hover:bg-slate-800 text-slate-200 border border-slate-700/80 px-4 py-2 rounded-lg text-xs font-semibold transition-colors shadow-sm cursor-pointer">
|
||||
<Button className="flex items-center gap-2 bg-[#0A1628] hover:bg-slate-800 text-slate-200 border border-slate-700/80 px-4 py-2 rounded-lg text-xs font-semibold transition-colors shadow-sm cursor-pointer">
|
||||
<Smartphone className="w-4 h-4 text-slate-300" />
|
||||
<span>Open full screen</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,78 +2,14 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
LayoutGrid,
|
||||
CheckSquare,
|
||||
Crosshair,
|
||||
FileText,
|
||||
Box,
|
||||
Zap,
|
||||
ClipboardCheck,
|
||||
BarChart2,
|
||||
|
||||
Pencil,
|
||||
Plus,
|
||||
Sparkles,
|
||||
|
||||
} from "lucide-react";
|
||||
import { initialModules } from "@/constants/constant";
|
||||
import Button from "@/components/common/button";
|
||||
|
||||
// Mock Data matching the design
|
||||
const initialModules = [
|
||||
{
|
||||
id: "MOD-01",
|
||||
title: "Dashboard",
|
||||
description: "Operational overview & live KPIs",
|
||||
icon: LayoutGrid,
|
||||
menus: [], // Currently empty as per screenshot
|
||||
},
|
||||
{
|
||||
id: "MOD-02",
|
||||
title: "Helpdesk",
|
||||
description: "Tickets, requests & SLA tracking",
|
||||
icon: CheckSquare,
|
||||
menus: ["Tickets", "SLA Settings", "Queues"],
|
||||
},
|
||||
{
|
||||
id: "MOD-03",
|
||||
title: "Equipment",
|
||||
description: "Asset register & equipment groups",
|
||||
icon: Crosshair,
|
||||
menus: ["Asset Register", "Categories"],
|
||||
},
|
||||
{
|
||||
id: "MOD-04",
|
||||
title: "Request",
|
||||
description: "Service requests & approvals",
|
||||
icon: FileText,
|
||||
menus: ["My Requests", "Approvals"],
|
||||
},
|
||||
{
|
||||
id: "MOD-05",
|
||||
title: "Inventory",
|
||||
description: "Stock, spares & consumables",
|
||||
icon: Box,
|
||||
menus: ["Stock Levels", "Suppliers"],
|
||||
},
|
||||
{
|
||||
id: "MOD-06",
|
||||
title: "Energy",
|
||||
description: "Meters, consumption & analytics",
|
||||
icon: Zap,
|
||||
menus: ["Meters", "Analytics"],
|
||||
},
|
||||
{
|
||||
id: "MOD-07",
|
||||
title: "Inspections",
|
||||
description: "QR rounds & checklists",
|
||||
icon: ClipboardCheck,
|
||||
menus: ["Rounds", "Checklists"],
|
||||
},
|
||||
{
|
||||
id: "MOD-08",
|
||||
title: "Reports",
|
||||
description: "Analytics & export tools",
|
||||
icon: BarChart2,
|
||||
menus: ["Scheduled Reports", "Custom Builder"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ModulesPortal() {
|
||||
const [selectedModuleId, setSelectedModuleId] = useState("MOD-01");
|
||||
@@ -84,12 +20,12 @@ export default function ModulesPortal() {
|
||||
<div className="my-15 text-slate-100 font-saas">
|
||||
{/* Header Section */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 text-[10px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
|
||||
<span>PLATFORM</span>
|
||||
<span>•</span>
|
||||
<span>MODULES</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">MODULES</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight">Modules</h1>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight">Modules</h1>
|
||||
<p className="text-sm text-slate-400 mt-1 max-w-2xl">
|
||||
The catalog of system modules and their menus. These are what you switch on per tenant under feature access.
|
||||
</p>
|
||||
@@ -107,10 +43,10 @@ export default function ModulesPortal() {
|
||||
{initialModules.length} available
|
||||
</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 text-xs font-semibold transition-colors">
|
||||
<Button className="flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 text-xs font-semibold transition-colors">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add module</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Module Items */}
|
||||
@@ -181,10 +117,10 @@ export default function ModulesPortal() {
|
||||
Under {activeModule?.title || "Module"}
|
||||
</span>
|
||||
</div>
|
||||
<button className="flex items-center gap-1.5 text-teal-400 hover:text-teal-300 text-xs font-semibold transition-colors">
|
||||
<Button className="flex items-center gap-1.5 text-teal-400 hover:text-teal-300 text-xs font-semibold transition-colors">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add menu</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Empty State / Menus List */}
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import {
|
||||
ClipboardCheck,
|
||||
Clock,
|
||||
AlertTriangle,
|
||||
Activity,
|
||||
Building2,
|
||||
Users,
|
||||
MapPin,
|
||||
Grid,
|
||||
ArrowRight,
|
||||
Sparkles
|
||||
|
||||
} from "lucide-react";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import Button from "@/components/common/button";
|
||||
|
||||
export default function AdminOverviewPortal() {
|
||||
// Sample data for the recent audits table below
|
||||
@@ -37,10 +34,11 @@ export default function AdminOverviewPortal() {
|
||||
{/* --- 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 className="flex items-center gap-2 text-[12px]
|
||||
font-bold tracking-widest uppercase font-mono">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">KAFM</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Platform overview
|
||||
@@ -52,7 +50,7 @@ export default function AdminOverviewPortal() {
|
||||
|
||||
{/* 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 className="h-2 w-2 text-teal-400 rounded-full animate-pulse" />
|
||||
<span>PRODUCTION</span>
|
||||
<span className="text-slate-600">•</span>
|
||||
<span className="text-teal-300/80">region us-east-1</span>
|
||||
@@ -117,9 +115,9 @@ export default function AdminOverviewPortal() {
|
||||
<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">
|
||||
<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>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Table Header */}
|
||||
|
||||
@@ -5,183 +5,14 @@ import {
|
||||
AlertTriangle,
|
||||
ShieldCheck,
|
||||
BarChart3,
|
||||
Sparkles,
|
||||
ChevronDown
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { StatusBadge } from "@/components/common/statusBadge";
|
||||
import { auditLogHeaders, auditLogRows, trustedDeviceHeaders, trustedDeviceRows } from "@/constants/tabledata";
|
||||
|
||||
export const trustedDeviceHeaders = [
|
||||
"USER",
|
||||
"DEVICE",
|
||||
"IP",
|
||||
"LAST SEEN",
|
||||
"EXPIRES",
|
||||
"STATUS",
|
||||
"ACTIONS",
|
||||
];
|
||||
|
||||
export const trustedDeviceRows = [
|
||||
[
|
||||
<span className="font-semibold text-white">Dhananjay T.</span>,
|
||||
"Chrome 126 · Windows 11",
|
||||
<span className="font-mono">103.212.14.8</span>,
|
||||
<span className="font-mono">Today, 08:12</span>,
|
||||
<span className="font-mono">Jul 30, 2026</span>,
|
||||
<StatusBadge
|
||||
text="TRUSTED"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
|
||||
Revoke
|
||||
</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-white">Kavya Raghunathan</span>,
|
||||
"Safari 18 · macOS",
|
||||
<span className="font-mono">49.37.201.55</span>,
|
||||
<span className="font-mono">Yesterday, 17:40</span>,
|
||||
<span className="font-mono">Jul 21, 2026</span>,
|
||||
<StatusBadge
|
||||
text="TRUSTED"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
|
||||
Revoke
|
||||
</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-white">Rahul Iyer</span>,
|
||||
"KAFM Mobile · Android 15",
|
||||
<span className="font-mono">152.58.33.104</span>,
|
||||
<span className="font-mono">Today, 06:58</span>,
|
||||
<span className="font-mono">Jul 12, 2026</span>,
|
||||
<StatusBadge
|
||||
text="TRUSTED"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
<Button className="rounded-md border border-slate-700/80 bg-slate-800/40 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 transition-colors">
|
||||
Revoke
|
||||
</Button>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-semibold text-white">Meera Pillai</span>,
|
||||
"Edge 126 · Windows 10",
|
||||
<span className="font-mono">103.212.14.31</span>,
|
||||
<span className="font-mono">Jun 18, 2026</span>,
|
||||
<span className="font-mono text-slate-400">Expired</span>,
|
||||
<StatusBadge
|
||||
text="REVOKED"
|
||||
color="bg-slate-700/50 text-slate-400"
|
||||
/>,
|
||||
<span className="text-slate-500 text-center">—</span>,
|
||||
],
|
||||
];
|
||||
|
||||
export const auditLogHeaders = [
|
||||
"WHEN",
|
||||
"USER",
|
||||
"EVENT",
|
||||
"IP",
|
||||
"RESULT",
|
||||
];
|
||||
|
||||
export const auditLogRows = [
|
||||
[
|
||||
<span className="font-mono text-slate-300">Today 08:12</span>,
|
||||
<span className="font-mono text-slate-300">dhananjay@kafm.io</span>,
|
||||
<span className="text-slate-200">Sign-in · password + MFA</span>,
|
||||
<span className="font-mono text-slate-300">103.212.14.8</span>,
|
||||
<StatusBadge
|
||||
text="OK"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-mono text-slate-300">Today 07:56</span>,
|
||||
<span className="font-mono text-slate-300">kavya@kafm.io</span>,
|
||||
<span className="text-slate-200">
|
||||
Role changed · Technician → M&E Supervisor
|
||||
</span>,
|
||||
<span className="font-mono text-slate-300">49.37.201.55</span>,
|
||||
<StatusBadge
|
||||
text="OK"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-mono text-slate-300">Today 07:31</span>,
|
||||
<span className="font-mono text-slate-300">unknown@ext.net</span>,
|
||||
<span className="text-slate-200">
|
||||
Sign-in · wrong password (3rd attempt)
|
||||
</span>,
|
||||
<span className="font-mono text-slate-300">91.240.118.7</span>,
|
||||
<StatusBadge
|
||||
text="FAILED"
|
||||
color="bg-rose-500/15 text-rose-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-mono text-slate-300">Today 06:58</span>,
|
||||
<span className="font-mono text-slate-300">rahul@kafm.io</span>,
|
||||
<span className="text-slate-200">
|
||||
Device trusted · KAFM Mobile (30 days)
|
||||
</span>,
|
||||
<span className="font-mono text-slate-300">152.58.33.104</span>,
|
||||
<StatusBadge
|
||||
text="OK"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-mono text-slate-300">Yesterday 17:40</span>,
|
||||
<span className="font-mono text-slate-300">kavya@kafm.io</span>,
|
||||
<span className="text-slate-200">
|
||||
Password reset · self-service link
|
||||
</span>,
|
||||
<span className="font-mono text-slate-300">49.37.201.55</span>,
|
||||
<StatusBadge
|
||||
text="OK"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-mono text-slate-300">Yesterday 14:05</span>,
|
||||
<span className="font-mono text-slate-300">meera@kafm.io</span>,
|
||||
<span className="text-slate-200">
|
||||
MFA reset by admin · device revoked
|
||||
</span>,
|
||||
<span className="font-mono text-slate-300">103.212.14.31</span>,
|
||||
<StatusBadge
|
||||
text="PENDING"
|
||||
color="bg-amber-500/15 text-amber-400"
|
||||
/>,
|
||||
],
|
||||
|
||||
[
|
||||
<span className="font-mono text-slate-300">Jun 30 09:12</span>,
|
||||
<span className="font-mono text-slate-300">admin@kafm.io</span>,
|
||||
<span className="text-slate-200">
|
||||
Sign-in policy updated · idle timeout 30 min
|
||||
</span>,
|
||||
<span className="font-mono text-slate-300">103.212.14.8</span>,
|
||||
<StatusBadge
|
||||
text="OK"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
],
|
||||
];
|
||||
|
||||
export default function SecurityPortal() {
|
||||
const [enforceMfa, setEnforceMfa] = useState(true);
|
||||
@@ -193,12 +24,12 @@ export default function SecurityPortal() {
|
||||
{/* --- 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">SECURITY</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">SECURITY</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Security & sessions
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
|
||||
@@ -299,12 +130,12 @@ export default function SecurityPortal() {
|
||||
6-digit code required on every untrusted device
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
onClick={() => setEnforceMfa(!enforceMfa)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${enforceMfa ? 'bg-teal-400' : 'bg-slate-800'}`}
|
||||
>
|
||||
<span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${enforceMfa ? 'translate-x-5' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Select 1: Idle Session Timeout */}
|
||||
@@ -333,12 +164,12 @@ export default function SecurityPortal() {
|
||||
Pre-checks the persistent-session option at sign-in
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
onClick={() => setKeepMeSignedIn(!keepMeSignedIn)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${keepMeSignedIn ? 'bg-teal-400' : 'bg-slate-800'}`}
|
||||
>
|
||||
<span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${keepMeSignedIn ? 'translate-x-5' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Toggle 3: Re-authenticate */}
|
||||
@@ -349,12 +180,12 @@ export default function SecurityPortal() {
|
||||
Password prompt before user, role or policy changes
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
onClick={() => setReAuthenticate(!reAuthenticate)}
|
||||
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${reAuthenticate ? 'bg-teal-400' : 'bg-slate-800'}`}
|
||||
>
|
||||
<span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow ring-0 transition duration-200 ease-in-out ${reAuthenticate ? 'translate-x-5' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Select 2: Trusted device window */}
|
||||
|
||||
@@ -1,158 +1,18 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Building2,
|
||||
Users,
|
||||
MapPin,
|
||||
Grid,
|
||||
|
||||
Plus,
|
||||
Eye,
|
||||
Settings,
|
||||
Pencil,
|
||||
GitBranch,
|
||||
|
||||
Search,
|
||||
ChevronDown,
|
||||
Sparkles
|
||||
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { StatusBadge } from '@/components/common/statusBadge';
|
||||
import ActionButtons from '@/components/common/actionButton';
|
||||
|
||||
export const siteHeaders = [
|
||||
"Site",
|
||||
"Tenant",
|
||||
"Coordinates",
|
||||
"Radius",
|
||||
"Status",
|
||||
"Actions",
|
||||
];
|
||||
import { siteHeaders, siteRows } from "@/constants/adminTableDatat";
|
||||
|
||||
export const siteRows = [
|
||||
[
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Apple One — HQ Tower</p>
|
||||
<p className="font-mono text-xs text-slate-400">AO-HQ · SIT-3001</p>
|
||||
</div>,
|
||||
"Apple One",
|
||||
<span className="font-mono whitespace-nowrap">19.0760, 72.8777</span>,
|
||||
<span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">200 m</span>,
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-12 rounded-full bg-teal-400 relative">
|
||||
<div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>
|
||||
</div>,
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Apple One — Annexe</p>
|
||||
<p className="font-mono text-xs text-slate-400">AO-AX · SIT-3002</p>
|
||||
</div>,
|
||||
"Apple One",
|
||||
<span className="font-mono whitespace-nowrap">19.1020, 72.8895</span>,
|
||||
<span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">150 m</span>,
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-12 rounded-full bg-teal-400 relative">
|
||||
<div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>
|
||||
</div>,
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Novotel Pune — Main</p>
|
||||
<p className="font-mono text-xs text-slate-400">NP-M · SIT-3003</p>
|
||||
</div>,
|
||||
"Novotel Pune",
|
||||
<span className="font-mono whitespace-nowrap">18.5604, 73.9090</span>,
|
||||
<span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">180 m</span>,
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-12 rounded-full bg-teal-400 relative">
|
||||
<div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>
|
||||
</div>,
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">
|
||||
SRM Campus — Academic Block
|
||||
</p>
|
||||
<p className="font-mono text-xs text-slate-400">SRM-AB · SIT-3004</p>
|
||||
</div>,
|
||||
"SRM Campus",
|
||||
<span className="font-mono whitespace-nowrap">12.8230, 80.0444</span>,
|
||||
<span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">400 m</span>,
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-12 rounded-full bg-teal-400 relative">
|
||||
<div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>
|
||||
</div>,
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">
|
||||
SRM Campus — Hostel Block
|
||||
</p>
|
||||
<p className="font-mono text-xs text-slate-400">SRM-HB · SIT-3005</p>
|
||||
</div>,
|
||||
"SRM Campus",
|
||||
<span className="font-mono whitespace-nowrap">12.8255, 80.0478</span>,
|
||||
<span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">350 m</span>,
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-12 rounded-full bg-teal-400 relative">
|
||||
<div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>
|
||||
</div>,
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div>
|
||||
<p className="font-semibold text-slate-100">Local 1 — Site</p>
|
||||
<p className="font-mono text-xs text-slate-400">L1-S · SIT-3006</p>
|
||||
</div>,
|
||||
"Local 1",
|
||||
<span className="font-mono whitespace-nowrap">19.2183, 72.9781</span>,
|
||||
<span className="rounded-md bg-slate-900 px-2 py-1 font-mono text-xs">120 m</span>,
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-7 w-12 rounded-full bg-teal-400 relative">
|
||||
<div className="absolute right-1 top-1 h-5 w-5 rounded-full bg-slate-950" />
|
||||
</div>
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>
|
||||
</div>,
|
||||
<ActionButtons />,
|
||||
],
|
||||
];
|
||||
|
||||
export default function SitePortal() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -162,12 +22,12 @@ export default function SitePortal() {
|
||||
{/* --- 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">SITES</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">SITES</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Sites
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import {
|
||||
Building2,
|
||||
Users,
|
||||
MapPin,
|
||||
Grid,
|
||||
|
||||
Plus,
|
||||
Eye,
|
||||
Settings,
|
||||
@@ -13,164 +10,12 @@ import {
|
||||
ChevronDown
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { StatusBadge } from '@/components/common/statusBadge';
|
||||
import { organizationHeaders, organizationRows } from "@/constants/adminTableDatat";
|
||||
|
||||
export const organizationHeaders = [
|
||||
"Organization",
|
||||
"Tenant ID",
|
||||
"Contact",
|
||||
"Time Zone",
|
||||
"Status",
|
||||
"Actions",
|
||||
];
|
||||
|
||||
const ActionButtons = () => (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<Eye size={15} />
|
||||
</Button>
|
||||
|
||||
<Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<Settings size={15} />
|
||||
</Button>
|
||||
|
||||
<Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<GitBranch size={15} />
|
||||
</Button>
|
||||
|
||||
<Button className="flex h-8 w-8 items-center justify-center rounded-md border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<Pencil size={15} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const organizationRows = [
|
||||
[
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/15 font-semibold text-emerald-400">
|
||||
AO
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">Apple One</div>
|
||||
<div className="text-slate-400">ops@appleone.com</div>
|
||||
</div>
|
||||
</div>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
TNT-1001
|
||||
</span>,
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">Dhananjay T.</div>
|
||||
<div className="text-sky-300">+91 98200 10001</div>
|
||||
</div>,
|
||||
|
||||
<span className="font-mono">Asia/Kolkata</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 font-semibold text-blue-400">
|
||||
NP
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">Novotel Pune</div>
|
||||
<div className="text-slate-400">fm@novotelpune.com</div>
|
||||
</div>
|
||||
</div>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
TNT-1002
|
||||
</span>,
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">Site FM Lead</div>
|
||||
<div className="text-sky-300">+91 98220 20002</div>
|
||||
</div>,
|
||||
|
||||
<span className="font-mono">Asia/Kolkata</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 font-semibold text-blue-400">
|
||||
SC
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">SRM Campus</div>
|
||||
<div className="text-slate-400">estates@srm.edu</div>
|
||||
</div>
|
||||
</div>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
TNT-1003
|
||||
</span>,
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">Estates Office</div>
|
||||
<div className="text-sky-300">+91 98430 30003</div>
|
||||
</div>,
|
||||
|
||||
<span className="font-mono">Asia/Kolkata</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<ActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 font-semibold text-blue-400">
|
||||
L1
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">Local 1</div>
|
||||
<div className="text-slate-400">admin@local1.com</div>
|
||||
</div>
|
||||
</div>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
TNT-1004
|
||||
</span>,
|
||||
|
||||
<div>
|
||||
<div className="font-semibold text-slate-100">Local Admin</div>
|
||||
<div className="text-sky-300">+91 98000 40004</div>
|
||||
</div>,
|
||||
|
||||
<span className="font-mono">Asia/Kolkata</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="Active"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<ActionButtons />,
|
||||
],
|
||||
];
|
||||
|
||||
export default function TenantsPortal() {
|
||||
|
||||
@@ -180,12 +25,12 @@ export default function TenantsPortal() {
|
||||
{/* --- 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">TENANTS</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">TENANTS</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Tenants
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-xl leading-relaxed">
|
||||
|
||||
@@ -4,245 +4,14 @@ import {
|
||||
Eye,
|
||||
KeyRound,
|
||||
Search,
|
||||
Sparkles
|
||||
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { StatusBadge } from '@/components/common/statusBadge';
|
||||
import { userHeaders, userRows } from '@/constants/adminTableDatat';
|
||||
|
||||
export const userHeaders = [
|
||||
"Name",
|
||||
"Email",
|
||||
"Phone",
|
||||
"Tenants",
|
||||
"MFA",
|
||||
"User ID",
|
||||
"Actions",
|
||||
];
|
||||
|
||||
const UserActionButtons = () => (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Button className="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<Eye size={16} />
|
||||
</Button>
|
||||
|
||||
<Button className="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
|
||||
<KeyRound size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const userRows = [
|
||||
[
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/15 font-semibold text-amber-400">
|
||||
DT
|
||||
</div>
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
Dhananjay T.
|
||||
</span>
|
||||
</div>,
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
dhananjay@kafm.io
|
||||
</span>,
|
||||
|
||||
<span className="font-mono text-sky-300">
|
||||
+91 98200 10001
|
||||
</span>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
4 assigned
|
||||
</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="On"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
USR-5001
|
||||
</span>,
|
||||
|
||||
<UserActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-500/15 font-semibold text-cyan-400">
|
||||
MS
|
||||
</div>
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
ME Supervisor
|
||||
</span>
|
||||
</div>,
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
me.local@kafm.io
|
||||
</span>,
|
||||
|
||||
<span className="font-mono text-sky-300">
|
||||
+91 98201 10010
|
||||
</span>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
1 assigned
|
||||
</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="On"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
USR-5002
|
||||
</span>,
|
||||
|
||||
<UserActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/15 font-semibold text-amber-400">
|
||||
T
|
||||
</div>
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
Technician
|
||||
</span>
|
||||
</div>,
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
tech.local@kafm.io
|
||||
</span>,
|
||||
|
||||
<span className="font-mono text-sky-300">
|
||||
+91 98202 10011
|
||||
</span>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
2 assigned
|
||||
</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="Off"
|
||||
color="bg-slate-700/50 text-slate-400"
|
||||
/>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
USR-5003
|
||||
</span>,
|
||||
|
||||
<UserActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-500/15 font-semibold text-rose-400">
|
||||
TC
|
||||
</div>
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
Tenant Customer
|
||||
</span>
|
||||
</div>,
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
tenant@kafm.io
|
||||
</span>,
|
||||
|
||||
<span className="font-mono text-sky-300">
|
||||
+91 98203 10012
|
||||
</span>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
1 assigned
|
||||
</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="On"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
USR-5004
|
||||
</span>,
|
||||
|
||||
<UserActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-500/15 font-semibold text-violet-400">
|
||||
HA
|
||||
</div>
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
Helpdesk Agent
|
||||
</span>
|
||||
</div>,
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
help@kafm.io
|
||||
</span>,
|
||||
|
||||
<span className="font-mono text-sky-300">
|
||||
+91 98204 10013
|
||||
</span>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
2 assigned
|
||||
</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="On"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
USR-5005
|
||||
</span>,
|
||||
|
||||
<UserActionButtons />,
|
||||
],
|
||||
|
||||
[
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500/15 font-semibold text-orange-400">
|
||||
EA
|
||||
</div>
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
Energy Analyst
|
||||
</span>
|
||||
</div>,
|
||||
|
||||
<span className="font-semibold text-slate-100">
|
||||
energy@kafm.io
|
||||
</span>,
|
||||
|
||||
<span className="font-mono text-sky-300">
|
||||
+91 98430 30030
|
||||
</span>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
1 assigned
|
||||
</span>,
|
||||
|
||||
<StatusBadge
|
||||
text="On"
|
||||
color="bg-emerald-500/15 text-emerald-400"
|
||||
/>,
|
||||
|
||||
<span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
|
||||
USR-5006
|
||||
</span>,
|
||||
|
||||
<UserActionButtons />,
|
||||
],
|
||||
];
|
||||
|
||||
export default function UserPortal() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -252,12 +21,12 @@ export default function UserPortal() {
|
||||
{/* --- 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">USERS</span>
|
||||
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
|
||||
<span className="text-gray-400">PLATFORM</span>
|
||||
<span className="text-gray-600">•</span>
|
||||
<span className="text-gray-400">USERS</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white tracking-tight mt-1">
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-1">
|
||||
Users
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
|
||||
|
||||
Reference in New Issue
Block a user