shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Configure Completed is added

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-25 18:56:15 +05:30
parent a5394823f3
commit cdb52e717e
38 changed files with 5170 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
components/dashboard/configure/userLocation.tsx Normal file
View File

@@ -0,0 +1,211 @@
"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>
);
}