211 lines
7.7 KiB
TypeScript
211 lines
7.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
|
|
// Mock user location data matching the screenshot
|
|
const userData = [
|
|
{
|
|
name: "Dhananjay T.",
|
|
email: "dhananjay@kafm.io",
|
|
mobile: "7489477369",
|
|
latitude: "18.5450",
|
|
longitude: "73.7935",
|
|
site: "Apple One",
|
|
// Relative coordinates for the map visual dots (X%, Y%)
|
|
x: "19%",
|
|
y: "38%",
|
|
},
|
|
{
|
|
name: "ME Local",
|
|
email: "me.local@kafm.io",
|
|
mobile: "9876543210",
|
|
latitude: "18.5469",
|
|
longitude: "73.7945",
|
|
site: "Apple One",
|
|
x: "44%",
|
|
y: "43%",
|
|
},
|
|
{
|
|
name: "TECH Local",
|
|
email: "tech.local@kafm.io",
|
|
mobile: "9123456780",
|
|
latitude: "18.5441",
|
|
longitude: "73.7951",
|
|
site: "Apple One",
|
|
x: "69%",
|
|
y: "48%",
|
|
},
|
|
];
|
|
|
|
export default function UserLocationPortal() {
|
|
const [viewMode, setViewMode] = useState<"map" | "table">("table");
|
|
const [mapType, setMapType] = useState<"MAP" | "SATELLITE">("MAP");
|
|
|
|
return (
|
|
<div className="my-15 text-slate-200 font-sans">
|
|
{/* Top Breadcrumb & Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
|
<div>
|
|
{/* Breadcrumb */}
|
|
<div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
|
|
<span className="hover:text-slate-200 cursor-pointer">
|
|
APPLE ONE — HQ TOWER
|
|
</span>{" "}
|
|
• <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
|
|
• <span className="text-slate-300">USER LOCATION</span>
|
|
</div>
|
|
|
|
{/* Main Title */}
|
|
<h1 className="text-3xl font-bold text-white mb-2">User location</h1>
|
|
<p className="text-slate-400 text-sm max-w-2xl leading-relaxed">
|
|
Live position of active technicians, captured from the mobile app. Map
|
|
and table views.
|
|
</p>
|
|
</div>
|
|
|
|
{/* View Switcher Buttons */}
|
|
<div className="flex bg-[#0F172A] p-1 rounded-lg border border-slate-800 self-start md:self-auto">
|
|
<button
|
|
onClick={() => setViewMode("map")}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
|
viewMode === "map"
|
|
? "bg-slate-800 text-white shadow-sm"
|
|
: "text-slate-400 hover:text-slate-200"
|
|
}`}
|
|
>
|
|
Map view
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode("table")}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
|
viewMode === "table"
|
|
? "bg-[#2DD4BF] text-[#070D19] font-semibold shadow-sm"
|
|
: "text-slate-400 hover:text-slate-200"
|
|
}`}
|
|
>
|
|
Table view
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Container */}
|
|
<div className="border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
|
|
{/* Header Bar inside card */}
|
|
<div className="flex items-center justify-between px-6 py-2.5 border-b border-slate-800/60">
|
|
<span className="text-sm font-semibold text-slate-200">
|
|
Active users • Apple One
|
|
</span>
|
|
<span className="text-xs font-mono tracking-widest text-slate-400">
|
|
GPS • live
|
|
</span>
|
|
</div>
|
|
|
|
{/* Live Grid Map Visual Area (Height Reduced to h-36) */}
|
|
<div className="relative h-36 bg-[#080E21] border-b border-slate-800/60">
|
|
{/* Dark Grid Background Effect */}
|
|
<div
|
|
className="absolute inset-0 opacity-20"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(to right, #334155 1px, transparent 1px),
|
|
linear-gradient(to bottom, #334155 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "40px 20px",
|
|
}}
|
|
/>
|
|
|
|
{/* User Map Markers */}
|
|
{userData.map((user, index) => (
|
|
<div
|
|
key={index}
|
|
className="absolute group transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
|
|
style={{ left: user.x, top: user.y }}
|
|
>
|
|
{/* Pulsing Outer Glow Effect */}
|
|
<div className="absolute -inset-1 bg-[#2DD4BF]/30 rounded-full blur-sm animate-pulse" />
|
|
|
|
{/* Dot Center */}
|
|
<div className="relative h-3.5 w-3.5 bg-[#2DD4BF] rounded-full border-2 border-[#080E21] shadow-[0_0_12px_#2DD4BF]" />
|
|
|
|
{/* Tooltip on Hover */}
|
|
<div className="opacity-0 group-hover:opacity-100 transition-opacity bg-slate-900 border border-slate-700 text-xs text-slate-200 rounded px-2.5 py-1.5 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 whitespace-nowrap z-20 pointer-events-none shadow-lg">
|
|
<p className="font-semibold">{user.name}</p>
|
|
<p className="text-[10px] text-slate-400">
|
|
{user.latitude}, {user.longitude}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Map Type Toggle (Bottom Right of Map Area) */}
|
|
<div className="absolute bottom-2 right-4 flex items-center space-x-2 text-[10px] font-mono tracking-wider text-slate-500">
|
|
<button
|
|
onClick={() => setMapType("MAP")}
|
|
className={`hover:text-slate-300 transition-colors ${
|
|
mapType === "MAP" ? "text-slate-300 font-bold" : ""
|
|
}`}
|
|
>
|
|
MAP
|
|
</button>
|
|
<span>•</span>
|
|
<button
|
|
onClick={() => setMapType("SATELLITE")}
|
|
className={`hover:text-slate-300 transition-colors ${
|
|
mapType === "SATELLITE" ? "text-slate-300 font-bold" : ""
|
|
}`}
|
|
>
|
|
SATELLITE
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User Data Table */}
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm text-slate-300">
|
|
<thead>
|
|
<tr className="text-[11px] font-semibold tracking-wider text-slate-400 uppercase border-b border-slate-800/80 bg-[#0A1128]/40">
|
|
<th scope="col" className="py-2 px-6">
|
|
Name
|
|
</th>
|
|
<th scope="col" className="py-2 px-6">
|
|
Email
|
|
</th>
|
|
<th scope="col" className="py-2 px-6">
|
|
Mobile
|
|
</th>
|
|
<th scope="col" className="py-2 px-6">
|
|
Latitude
|
|
</th>
|
|
<th scope="col" className="py-2 px-6">
|
|
Longitude
|
|
</th>
|
|
<th scope="col" className="py-2 px-6">
|
|
Site
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800/50 font-mono text-xs">
|
|
{userData.map((user, idx) => (
|
|
<tr
|
|
key={idx}
|
|
className="hover:bg-slate-800/30 transition-colors duration-150"
|
|
>
|
|
<td className="py-2.5 px-6 font-sans font-semibold text-slate-100">
|
|
{user.name}
|
|
</td>
|
|
<td className="py-2.5 px-6 text-slate-300">{user.email}</td>
|
|
<td className="py-2.5 px-6 text-slate-300">{user.mobile}</td>
|
|
<td className="py-2.5 px-6 text-slate-300">{user.latitude}</td>
|
|
<td className="py-2.5 px-6 text-slate-300">{user.longitude}</td>
|
|
<td className="py-2.5 px-6 font-sans text-slate-200">
|
|
{user.site}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |