305 lines
8.6 KiB
TypeScript
305 lines
8.6 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Plus,
|
|
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';
|
|
|
|
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('');
|
|
|
|
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">USERS</span>
|
|
</div>
|
|
<h1 className="text-3xl 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">
|
|
All platform user accounts. Create credentials, assign tenants, and manage passwords. This is the single account store — Operations role access reads from here.
|
|
</p>
|
|
</div>
|
|
|
|
{/* --- HEADER BUTTON --- */}
|
|
<div className="flex items-center gap-3 self-start md:mt-2">
|
|
<Button className="bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-xs px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors shadow-lg shadow-emerald-500/10">
|
|
<Plus className="w-4 h-4 text-slate-950 stroke-[3]" />
|
|
<span>Add user</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- TABLE CONTAINER WITH UPPER BAR --- */}
|
|
<div className="bg-slate-900/60 border border-slate-800/80 rounded-xl p-4 space-y-4">
|
|
{/* Table Upper UI (Full-width Search Bar matching screenshot) */}
|
|
<div className="flex items-center w-full">
|
|
<div className="relative w-full">
|
|
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Search users by name, email or ID..."
|
|
className="w-full pl-10 pr-4 py-2.5 bg-slate-950/80 border border-slate-800 rounded-lg text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-slate-700 transition"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- TABLE --- */}
|
|
<Table headers={userHeaders} rows={userRows} />
|
|
|
|
{/* Footer Record Count */}
|
|
<div className="text-xs text-slate-500 font-mono pt-1">
|
|
{userRows.length} records
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
} |