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

Changes done in ui screens

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-28 19:11:10 +05:30
parent b8e833dbb9
commit 7ce1f2705e
33 changed files with 1944 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
components/dashboard/configure/userLocation.tsx
View File

@@ -1,71 +1,38 @@
"use client";
import Button from "@/components/common/button";
import { userData } from "@/constants/constant";
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">
<div className="my-15 min-h-screen h-full 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 className="flex flex-col md:flex-row md:items-start 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 className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono">
<span className="text-teal-400">APPLE ONE — HQ TOWER</span>
<span className="text-slate-600">•</span>
<span className="text-slate-400">CONFIGURE</span>
<span className="text-slate-600">•</span>
<span className="text-slate-400">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.
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
User location
</h1>
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl 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
<Button
onClick={() => setViewMode("map")}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
viewMode === "map"
@@ -74,8 +41,8 @@ export default function UserLocationPortal() {
}`}
>
Map view
</button>
<button
</Button>
<Button
onClick={() => setViewMode("table")}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
viewMode === "table"
@@ -84,7 +51,7 @@ export default function UserLocationPortal() {
}`}
>
Table view
</button>
</Button>
</div>
</div>
@@ -139,23 +106,23 @@ export default function UserLocationPortal() {
{/* 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
<Button
onClick={() => setMapType("MAP")}
className={`hover:text-slate-300 transition-colors ${
mapType === "MAP" ? "text-slate-300 font-bold" : ""
}`}
>
MAP
</button>
</Button>
<span>•</span>
<button
<Button
onClick={() => setMapType("SATELLITE")}
className={`hover:text-slate-300 transition-colors ${
mapType === "SATELLITE" ? "text-slate-300 font-bold" : ""
}`}
>
SATELLITE
</button>
</Button>
</div>
</div>