228 lines
8.1 KiB
TypeScript
228 lines
8.1 KiB
TypeScript
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",
|
|
];
|
|
|
|
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('');
|
|
|
|
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">SITES</span>
|
|
</div>
|
|
<h1 className="text-3xl 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">
|
|
Physical locations under each tenant. Define geofences with map coordinates and a working radius. Operations site pickers read 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 site</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- TABLE CONTAINER WITH UPPER BAR --- */}
|
|
<div className="bg-slate-900/60 border border-slate-800 rounded-xl 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"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Search sites..."
|
|
className="w-full pl-10 pr-4 py-2 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>
|
|
|
|
{/* All Tenants 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 tenants</option>
|
|
<option value="apple-one">Apple One</option>
|
|
<option value="novotel">Novotel Pune</option>
|
|
<option value="srm">SRM Campus</option>
|
|
<option value="local1">Local 1</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={siteHeaders} rows={siteRows} />
|
|
|
|
{/* Footer Record Count */}
|
|
<div className="text-xs text-slate-500 font-mono pt-1">
|
|
{siteRows.length} records
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
} |