Admin part is added and navbar context file is added
This commit is contained in:
244
components/dashboard/admin/Platform/tenants.tsx
Normal file
244
components/dashboard/admin/Platform/tenants.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Building2,
|
||||
Users,
|
||||
MapPin,
|
||||
Grid,
|
||||
Plus,
|
||||
Eye,
|
||||
Settings,
|
||||
Pencil,
|
||||
GitBranch,
|
||||
Search,
|
||||
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';
|
||||
|
||||
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() {
|
||||
|
||||
|
||||
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">TENANTS</span>
|
||||
</div>
|
||||
<h1 className="text-3xl 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">
|
||||
Every organization provisioned on the platform. Manage onboarding, feature access, branding, and status.
|
||||
</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 tenant</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* --- TABLE CONTAINER WITH UPPER BAR --- */}
|
||||
<div className="bg-slate-900/60 border border-slate-800 p-4 space-y-4">
|
||||
{/* Table Upper UI (Search Bar & Filter Dropdown) */}
|
||||
<div className="flex flex-col sm:flex-row items-center gap-3">
|
||||
{/* Search Bar Input */}
|
||||
<div className="relative flex-1 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"
|
||||
|
||||
|
||||
placeholder="Search by name, ID or contact..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-800 rounded-lg text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-slate-700 transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* All Statuses Filter Select Dropdown */}
|
||||
<div className="relative w-full sm:w-44">
|
||||
<select className="w-full appearance-none bg-slate-950/80 border border-slate-800 rounded-lg px-3.5 py-2 pr-8 text-sm text-slate-300 font-medium focus:outline-none focus:border-slate-700 cursor-pointer">
|
||||
<option value="all">All statuses</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- TABLE --- */}
|
||||
<Table headers={organizationHeaders} rows={organizationRows} />
|
||||
|
||||
{/* Footer Record Count */}
|
||||
<div className="text-xs text-slate-500 font-mono pt-1">
|
||||
{organizationRows.length} records
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user