@trackany-device/components 1.0.0 → 1.2.0

package/src/pages/my/TenantsPage.tsx

@@ -0,0 +1,37 @@
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import { Building2, ChevronRight } from 'lucide-react';
+
+export interface Tenant {
+    id: number;
+    slug: string;
+    display_name: string;
+    sub_brand: string | null;
+    devices: number;
+    role: string;
+}
+
+export function TenantsList({ layout, tenants }: { layout: LayoutName; tenants: Tenant[] }) {
+    return (
+        <LayoutResolved layout={layout} title="My Tenants" currentUrl="/my-tenants">
+            <div className="p-6">
+                <h1 className="text-2xl font-semibold mb-6">My Tenants</h1>
+                <div className="space-y-3">
+                    {tenants.map((tenant) => (
+                        <a key={tenant.id} href={`https://${tenant.slug}.track-any-device.com`} className="flex items-center justify-between rounded-xl border border-border bg-card p-4 shadow-sm hover:border-primary/50 transition-colors">
+                            <div className="flex items-center gap-3">
+                                <div className="rounded-lg bg-primary/10 p-2.5"><Building2 className="h-5 w-5 text-primary" /></div>
+                                <div>
+                                    <p className="font-medium">{tenant.display_name}</p>
+                                    {tenant.sub_brand && <p className="text-xs text-muted-foreground">{tenant.sub_brand}</p>}
+                                    <p className="text-xs text-muted-foreground mt-0.5">{tenant.devices} devices · {tenant.role}</p>
+                                </div>
+                            </div>
+                            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}

package/src/pages/tenant/AssigneesPage.tsx

@@ -0,0 +1,155 @@
+import {
+    Badge, StatCard, Avatar, AvatarFallback,
+    Card, CardContent, CardHeader, CardTitle, CardDescription,
+    Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+    Button,
+} from '@trackany-device/components';
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import { Users, Wifi, WifiOff } from 'lucide-react';
+import { DevicesMiniMap } from '../../components/devices/devices-mini-map';
+import type { MiniMapDevice } from '../../components/devices/devices-mini-map';
+
+export type { MiniMapDevice };
+
+export type AssigneeStatus = 'inside' | 'outside' | 'offline';
+export type AssigneeType   = 'Worker' | 'Vehicle';
+
+export interface Assignee {
+    id: number;
+    name: string;
+    initials: string;
+    type: AssigneeType;
+    beat: string;
+    status: AssigneeStatus;
+    device: string;
+    signal: number;
+}
+
+const statusMeta: Record<AssigneeStatus, { label: string; style: string }> = {
+    inside:  { label: 'Inside Beat', style: 'text-green-600 border-green-200 bg-green-50' },
+    outside: { label: 'Out of Beat', style: 'text-red-600 border-red-200 bg-red-50'       },
+    offline: { label: 'Offline',     style: 'text-gray-500 border-gray-200 bg-gray-50'    },
+};
+
+export function AssigneesTablePage({ layout, assignees }: { layout: LayoutName; assignees: Assignee[] }) {
+    const online  = assignees.filter((a) => a.status !== 'offline').length;
+    const offline = assignees.filter((a) => a.status === 'offline').length;
+    return (
+        <LayoutResolved layout={layout} title="Assignees" currentUrl="/assignees">
+            <div className="p-6 space-y-6">
+                <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
+                    <StatCard icon={Users}   label="Total Assignees" value={String(assignees.length)} description="12 divisions" />
+                    <StatCard icon={Wifi}    label="Online"          value={String(online)}           description={`${Math.round((online / assignees.length) * 100)}% of total`} />
+                    <StatCard icon={WifiOff} label="Offline"         value={String(offline)}          description={`${Math.round((offline / assignees.length) * 100)}% of total`} />
+                </div>
+                <Card>
+                    <CardHeader className="flex flex-row items-center justify-between">
+                        <div>
+                            <CardTitle>Assignees</CardTitle>
+                            <CardDescription>{assignees.length} of 248 shown</CardDescription>
+                        </div>
+                        <Button size="sm">Add assignee</Button>
+                    </CardHeader>
+                    <CardContent className="p-0">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>Assignee</TableHead>
+                                    <TableHead>Type</TableHead>
+                                    <TableHead>Beat</TableHead>
+                                    <TableHead>Device</TableHead>
+                                    <TableHead>Signal</TableHead>
+                                    <TableHead>Status</TableHead>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {assignees.map((a) => (
+                                    <TableRow key={a.id}>
+                                        <TableCell>
+                                            <div className="flex items-center gap-2">
+                                                <Avatar className="h-7 w-7">
+                                                    <AvatarFallback className="text-xs">{a.initials}</AvatarFallback>
+                                                </Avatar>
+                                                <span className="font-medium text-sm">{a.name}</span>
+                                            </div>
+                                        </TableCell>
+                                        <TableCell className="text-muted-foreground text-sm">{a.type}</TableCell>
+                                        <TableCell className="text-sm">{a.beat}</TableCell>
+                                        <TableCell className="font-mono text-xs text-muted-foreground">{a.device}</TableCell>
+                                        <TableCell>
+                                            <div className="flex items-center gap-1.5">
+                                                <div className="h-1.5 w-16 rounded-full bg-muted overflow-hidden">
+                                                    <div
+                                                        className={`h-full rounded-full ${a.signal > 60 ? 'bg-green-500' : a.signal > 30 ? 'bg-amber-500' : 'bg-red-500'}`}
+                                                        style={{ width: `${a.signal}%` }}
+                                                    />
+                                                </div>
+                                                <span className="text-xs text-muted-foreground">{a.signal}%</span>
+                                            </div>
+                                        </TableCell>
+                                        <TableCell>
+                                            <Badge variant="outline" className={statusMeta[a.status].style}>
+                                                {statusMeta[a.status].label}
+                                            </Badge>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </CardContent>
+                </Card>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+export function AssigneesMapPage({
+    layout,
+    assignees,
+    devices = [],
+}: {
+    layout: LayoutName;
+    assignees: Assignee[];
+    devices?: MiniMapDevice[];
+}) {
+    const online  = assignees.filter((a) => a.status !== 'offline').length;
+    const offline = assignees.filter((a) => a.status === 'offline').length;
+    return (
+        <LayoutResolved layout={layout} title="Assignees — Map" currentUrl="/assignees/map">
+            <div className="flex h-[calc(100vh-3.5rem)]">
+                <div className="flex-1 relative">
+                    <DevicesMiniMap
+                        devices={devices}
+                        height="100%"
+                        className="rounded-none border-0"
+                    />
+                </div>
+                <div className="w-72 border-l border-border bg-background overflow-y-auto">
+                    <div className="p-4 border-b border-border">
+                        <p className="text-sm font-semibold">Assignees</p>
+                        <p className="text-xs text-muted-foreground">{online} online · {offline} offline</p>
+                    </div>
+                    <div className="divide-y divide-border">
+                        {assignees.map((a) => (
+                            <div key={a.id} className="p-3 hover:bg-muted/30 cursor-pointer">
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center gap-2">
+                                        <Avatar className="h-6 w-6">
+                                            <AvatarFallback className="text-xs">{a.initials}</AvatarFallback>
+                                        </Avatar>
+                                        <span className="text-sm font-medium">{a.name}</span>
+                                    </div>
+                                    <Badge variant="outline" className={`text-xs ${statusMeta[a.status].style}`}>
+                                        {statusMeta[a.status].label}
+                                    </Badge>
+                                </div>
+                                <p className="text-xs text-muted-foreground mt-1 ml-8">{a.beat}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}

package/src/pages/tenant/BeatsPage.tsx

@@ -0,0 +1,403 @@
+import { useEffect, useRef, useState } from 'react';
+import { Badge, Button, Card, CardContent, Input, Label } from '@trackany-device/components';
+import { LayoutResolved } from '../../layouts/LayoutSwitcher';
+import type { LayoutName } from '../../layouts/LayoutSwitcher';
+import { MapPin, Plus, Users } from 'lucide-react';
+import { loadGoogleMaps, hasGoogleMapsKey } from '../../lib/google-maps-loader';
+
+export type LatLng = { lat: number; lng: number };
+export type BeatStatus = 'active' | 'inactive';
+
+export interface Beat {
+    id: number;
+    name: string;
+    zone: string;
+    description: string;
+    status: BeatStatus;
+    assignees: number;
+    color: string;
+    polygon: LatLng[];
+}
+
+const STATUS_STYLE: Record<BeatStatus, string> = {
+    active:   'text-green-600 border-green-200 bg-green-50',
+    inactive: 'text-muted-foreground border-border bg-muted',
+};
+
+function hexToRgba(hex: string, alpha: number): string {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function polygonBounds(maps: typeof google.maps, polygon: LatLng[]): google.maps.LatLngBounds {
+    const bounds = new maps.LatLngBounds();
+    polygon.forEach((p) => bounds.extend(new maps.LatLng(p.lat, p.lng)));
+    return bounds;
+}
+
+export function BeatsListPage({ layout, beats }: { layout: LayoutName; beats: Beat[] }) {
+    const [selectedId, setSelectedId] = useState<number | null>(beats[0]?.id ?? null);
+    const [mapReady, setMapReady] = useState(false);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const mapRef = useRef<google.maps.Map | null>(null);
+    const mapsApiRef = useRef<typeof google.maps | null>(null);
+    const polysRef = useRef<Map<number, google.maps.Polygon>>(new Map());
+
+    const active   = beats.filter((b) => b.status === 'active').length;
+    const inactive = beats.filter((b) => b.status === 'inactive').length;
+
+    useEffect(() => {
+        if (!hasGoogleMapsKey() || !containerRef.current) return;
+
+        loadGoogleMaps().then((maps) => {
+            mapsApiRef.current = maps;
+            mapRef.current = new maps.Map(containerRef.current!, {
+                center: { lat: 31.5204, lng: 74.3587 },
+                zoom: 11,
+                disableDefaultUI: true,
+                zoomControl: true,
+            });
+            setMapReady(true);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (!mapReady || !mapsApiRef.current || !mapRef.current) return;
+        const maps = mapsApiRef.current;
+
+        polysRef.current.forEach((poly) => poly.setMap(null));
+        polysRef.current.clear();
+
+        beats.forEach((beat) => {
+            const isSelected = beat.id === selectedId;
+            const poly = new maps.Polygon({
+                paths: beat.polygon.map((p) => ({ lat: p.lat, lng: p.lng })),
+                strokeColor: beat.color,
+                strokeWeight: isSelected ? 3 : 1.5,
+                fillColor: beat.color,
+                fillOpacity: isSelected ? 0.3 : 0.15,
+                map: mapRef.current!,
+            });
+            poly.addListener('click', () => setSelectedId(beat.id));
+            polysRef.current.set(beat.id, poly);
+        });
+    }, [mapReady, beats, selectedId]);
+
+    useEffect(() => {
+        if (!mapReady || !mapsApiRef.current || !mapRef.current || selectedId === null) return;
+        const beat = beats.find((b) => b.id === selectedId);
+        if (!beat || beat.polygon.length === 0) return;
+        const bounds = polygonBounds(mapsApiRef.current, beat.polygon);
+        mapRef.current.fitBounds(bounds, 60);
+    }, [mapReady, selectedId, beats]);
+
+    return (
+        <LayoutResolved layout={layout} title="Beats" currentUrl="/beats">
+            <div className="flex h-[calc(100vh-3.5rem)]">
+                <div className="flex w-1/3 min-w-[260px] flex-col border-r border-border bg-background overflow-hidden">
+                    <div className="flex items-center justify-between border-b border-border px-4 py-3 shrink-0">
+                        <div>
+                            <h1 className="text-base font-semibold">Beats</h1>
+                            <p className="text-xs text-muted-foreground">{beats.length} total</p>
+                        </div>
+                        <Button size="sm">
+                            <Plus className="h-3.5 w-3.5 mr-1" />Add beat
+                        </Button>
+                    </div>
+
+                    <div className="grid grid-cols-3 divide-x divide-border border-b border-border shrink-0">
+                        {[
+                            { label: 'Total',    value: beats.length },
+                            { label: 'Active',   value: active },
+                            { label: 'Inactive', value: inactive },
+                        ].map(({ label, value }) => (
+                            <div key={label} className="px-3 py-2 text-center">
+                                <p className="text-lg font-bold text-primary">{value}</p>
+                                <p className="text-xs text-muted-foreground">{label}</p>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="flex-1 overflow-y-auto divide-y divide-border">
+                        {beats.map((beat) => {
+                            const isSelected = beat.id === selectedId;
+                            return (
+                                <button
+                                    key={beat.id}
+                                    onClick={() => setSelectedId(beat.id)}
+                                    className={`w-full text-left px-4 py-3 hover:bg-muted/40 transition-colors ${isSelected ? 'bg-muted/60' : ''}`}
+                                    style={isSelected ? { boxShadow: `inset 3px 0 0 ${beat.color}` } : undefined}
+                                >
+                                    <div className="flex items-start gap-2.5">
+                                        <span
+                                            className="mt-0.5 h-3 w-3 rounded-sm shrink-0"
+                                            style={{ backgroundColor: beat.color }}
+                                        />
+                                        <div className="flex-1 min-w-0">
+                                            <div className="flex items-center justify-between gap-1.5">
+                                                <p className="text-sm font-medium truncate">{beat.name}</p>
+                                                <Badge variant="outline" className={`text-xs shrink-0 ${STATUS_STYLE[beat.status]}`}>
+                                                    {beat.status}
+                                                </Badge>
+                                            </div>
+                                            <p className="text-xs text-muted-foreground mt-0.5">{beat.zone}</p>
+                                            <div className="flex items-center gap-1 mt-1.5 text-xs text-muted-foreground">
+                                                <Users className="h-3 w-3" />
+                                                <span>{beat.assignees} assignee{beat.assignees !== 1 ? 's' : ''}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </button>
+                            );
+                        })}
+                    </div>
+                </div>
+
+                <div className="flex-1 relative bg-muted/20">
+                    {hasGoogleMapsKey() ? (
+                        <div ref={containerRef} className="absolute inset-0" />
+                    ) : (
+                        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+                            <MapPin className="h-10 w-10" />
+                            <p className="text-sm font-medium">Map preview unavailable</p>
+                            <p className="text-xs">Set VITE_GOOGLE_MAPS_API_KEY to enable the map</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}
+
+const PRESET_COLORS = [
+    { label: 'Green',  value: '#22c55e' },
+    { label: 'Blue',   value: '#3b82f6' },
+    { label: 'Purple', value: '#a855f7' },
+    { label: 'Red',    value: '#ef4444' },
+    { label: 'Orange', value: '#f97316' },
+];
+
+export function BeatEditorPage({ layout, beat }: { layout: LayoutName; beat?: Partial<Beat> }) {
+    const isNew = !beat?.id;
+
+    const [name, setName]             = useState(beat?.name ?? '');
+    const [zone, setZone]             = useState(beat?.zone ?? '');
+    const [description, setDescription] = useState(beat?.description ?? '');
+    const [status, setStatus]         = useState<BeatStatus>(beat?.status ?? 'active');
+    const [color, setColor]           = useState(beat?.color ?? '#22c55e');
+    const [vertexCount, setVertexCount] = useState(beat?.polygon?.length ?? 0);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const mapRef       = useRef<google.maps.Map | null>(null);
+    const mapsApiRef   = useRef<typeof google.maps | null>(null);
+    const polygonRef   = useRef<google.maps.Polygon | null>(null);
+    const drawingRef   = useRef<google.maps.drawing.DrawingManager | null>(null);
+    const [mapReady, setMapReady]         = useState(false);
+    const [isDrawing, setIsDrawing]       = useState(!beat?.polygon?.length);
+
+    useEffect(() => {
+        if (!hasGoogleMapsKey() || !containerRef.current) return;
+
+        loadGoogleMaps().then((maps) => {
+            mapsApiRef.current = maps;
+            mapRef.current = new maps.Map(containerRef.current!, {
+                center: { lat: 31.5204, lng: 74.3587 },
+                zoom: 11,
+                disableDefaultUI: true,
+                zoomControl: true,
+            });
+            setMapReady(true);
+        });
+    }, []);
+
+    useEffect(() => {
+        if (!mapReady || !mapsApiRef.current || !mapRef.current) return;
+        const maps = mapsApiRef.current;
+
+        if (beat?.polygon && beat.polygon.length > 0 && !isDrawing) {
+            if (polygonRef.current) polygonRef.current.setMap(null);
+            polygonRef.current = new maps.Polygon({
+                paths: beat.polygon.map((p) => ({ lat: p.lat, lng: p.lng })),
+                strokeColor: color,
+                strokeWeight: 2,
+                fillColor: color,
+                fillOpacity: 0.2,
+                editable: true,
+                draggable: false,
+                map: mapRef.current,
+            });
+            setVertexCount(beat.polygon.length);
+            const bounds = polygonBounds(maps, beat.polygon);
+            mapRef.current.fitBounds(bounds, 60);
+        }
+    }, [mapReady]);
+
+    function activateDrawing() {
+        if (!mapsApiRef.current || !mapRef.current) return;
+        const maps = mapsApiRef.current;
+
+        if (polygonRef.current) {
+            polygonRef.current.setMap(null);
+            polygonRef.current = null;
+        }
+        if (drawingRef.current) {
+            drawingRef.current.setMap(null);
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const dm = new (maps as any).drawing.DrawingManager({
+            drawingMode: (maps as any).drawing.OverlayType.POLYGON,
+            drawingControl: false,
+            polygonOptions: {
+                strokeColor: color,
+                strokeWeight: 2,
+                fillColor: color,
+                fillOpacity: 0.2,
+                editable: true,
+                draggable: false,
+            },
+            map: mapRef.current,
+        });
+
+        maps.event.addListener(dm, 'polygoncomplete', (poly: google.maps.Polygon) => {
+            dm.setDrawingMode(null);
+            setIsDrawing(false);
+            polygonRef.current = poly;
+            const path = poly.getPath();
+            setVertexCount(path.getLength());
+            path.addListener('insert_at', () => setVertexCount(poly.getPath().getLength()));
+            path.addListener('remove_at', () => setVertexCount(poly.getPath().getLength()));
+            path.addListener('set_at',    () => setVertexCount(poly.getPath().getLength()));
+        });
+
+        drawingRef.current = dm;
+        setIsDrawing(true);
+        setVertexCount(0);
+    }
+
+    useEffect(() => {
+        if (mapReady && isDrawing && !beat?.polygon?.length) {
+            activateDrawing();
+        }
+    }, [mapReady]);
+
+    useEffect(() => {
+        if (!polygonRef.current) return;
+        polygonRef.current.setOptions({ strokeColor: color, fillColor: color });
+    }, [color]);
+
+    return (
+        <LayoutResolved layout={layout} title={isNew ? 'New Beat' : 'Edit Beat'} currentUrl="/beats/edit">
+            <div className="flex h-[calc(100vh-3.5rem)]">
+                <div className="flex w-[300px] shrink-0 flex-col border-r border-border bg-background overflow-y-auto">
+                    <div className="border-b border-border px-4 py-3">
+                        <h1 className="text-base font-semibold">{isNew ? 'New Beat' : 'Edit Beat'}</h1>
+                    </div>
+
+                    <div className="flex-1 px-4 py-4 space-y-4">
+                        <div className="space-y-1.5">
+                            <Label className="text-xs">Name</Label>
+                            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Beat name" />
+                        </div>
+
+                        <div className="space-y-1.5">
+                            <Label className="text-xs">Zone</Label>
+                            <Input value={zone} onChange={(e) => setZone(e.target.value)} placeholder="Zone or district" />
+                        </div>
+
+                        <div className="space-y-1.5">
+                            <Label className="text-xs">Description</Label>
+                            <textarea
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                                placeholder="Brief description…"
+                                rows={3}
+                                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none"
+                            />
+                        </div>
+
+                        <div className="space-y-1.5">
+                            <Label className="text-xs">Status</Label>
+                            <select
+                                value={status}
+                                onChange={(e) => setStatus(e.target.value as BeatStatus)}
+                                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                            >
+                                <option value="active">Active</option>
+                                <option value="inactive">Inactive</option>
+                            </select>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label className="text-xs">Color</Label>
+                            <div className="flex gap-2 flex-wrap">
+                                {PRESET_COLORS.map((c) => (
+                                    <label key={c.value} className="cursor-pointer">
+                                        <input
+                                            type="radio"
+                                            name="beat-color"
+                                            value={c.value}
+                                            checked={color === c.value}
+                                            onChange={() => setColor(c.value)}
+                                            className="sr-only"
+                                        />
+                                        <span
+                                            className={`block h-6 w-6 rounded-full border-2 transition-all ${color === c.value ? 'border-foreground scale-110' : 'border-transparent'}`}
+                                            style={{ backgroundColor: c.value }}
+                                            title={c.label}
+                                        />
+                                    </label>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="rounded-md border border-border bg-muted/30 px-3 py-2.5 text-xs text-muted-foreground">
+                            Click on the map to draw the beat polygon. Click the first point to close it.
+                        </div>
+
+                        <p className="text-xs text-muted-foreground">{vertexCount} {vertexCount === 1 ? 'vertex' : 'vertices'} defined</p>
+                    </div>
+
+                    <div className="border-t border-border px-4 py-3 flex gap-2">
+                        <Button size="sm" className="flex-1">Save Beat</Button>
+                        <Button variant="outline" size="sm">Discard</Button>
+                    </div>
+                </div>
+
+                <div className="flex-1 relative bg-muted/20">
+                    {hasGoogleMapsKey() ? (
+                        <>
+                            <div ref={containerRef} className="absolute inset-0" />
+                            <div className="absolute bottom-4 right-4 z-10">
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    className="bg-background shadow-md"
+                                    onClick={activateDrawing}
+                                >
+                                    Redraw polygon
+                                </Button>
+                            </div>
+                            {isDrawing && (
+                                <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10">
+                                    <div className="rounded-md border border-border bg-background/95 px-3 py-1.5 text-xs shadow-md backdrop-blur-sm">
+                                        Click to add points · Click the first point to close
+                                    </div>
+                                </div>
+                            )}
+                        </>
+                    ) : (
+                        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+                            <MapPin className="h-10 w-10" />
+                            <p className="text-sm font-medium">Map preview unavailable</p>
+                            <p className="text-xs">Set VITE_GOOGLE_MAPS_API_KEY to enable the map</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </LayoutResolved>
+    );
+}