@trackany-device/components 1.0.0

package/src/components/cutout-image.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+type EdgeCutoutOptions = {
+    threshold?: number; // how white a pixel must be to count as bg
+    saturation?: number; // how colorless it must be
+    feather?: number; // soften cutout edges
+};
+
+type CutoutImageProps = Omit<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    'src'
+> & {
+    src: string;
+    enabled?: boolean;
+    options?: EdgeCutoutOptions;
+};
+
+const cache = new Map<string, Promise<string>>();
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+
+function isNearWhite(
+    r: number,
+    g: number,
+    b: number,
+    a: number,
+    threshold: number,
+    saturation: number,
+) {
+    if (a === 0) {
+        return true;
+    }
+
+    const brightness = (r + g + b) / 3;
+    const chroma = Math.max(r, g, b) - Math.min(r, g, b);
+
+    return brightness >= threshold && chroma <= saturation;
+}
+
+async function createEdgeCutout(
+    src: string,
+    options: EdgeCutoutOptions = {},
+): Promise<string> {
+    const {
+        threshold = 235, // important: lower than pure white so light-gray bg/shadows also get removed
+        saturation = 32,
+        feather = 24,
+    } = options;
+
+    const img = await loadImage(src);
+
+    const canvas = document.createElement('canvas');
+    canvas.width = img.naturalWidth || img.width;
+    canvas.height = img.naturalHeight || img.height;
+
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) {
+        return src;
+    }
+
+    ctx.drawImage(img, 0, 0);
+
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const { data } = imageData;
+    const w = canvas.width;
+    const h = canvas.height;
+
+    // Mark only background that is connected to the outer border
+    const visited = new Uint8Array(w * h);
+    const queueX = new Int32Array(w * h);
+    const queueY = new Int32Array(w * h);
+    let head = 0;
+    let tail = 0;
+
+    const tryPush = (x: number, y: number) => {
+        if (x < 0 || y < 0 || x >= w || y >= h) {
+            return;
+        }
+
+        const p = y * w + x;
+
+        if (visited[p]) {
+            return;
+        }
+
+        const i = p * 4;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+
+        if (!isNearWhite(r, g, b, a, threshold, saturation)) {
+            return;
+        }
+
+        visited[p] = 1;
+        queueX[tail] = x;
+        queueY[tail] = y;
+        tail++;
+    };
+
+    // Seed flood fill from all outer borders
+    for (let x = 0; x < w; x++) {
+        tryPush(x, 0);
+        tryPush(x, h - 1);
+    }
+
+    for (let y = 1; y < h - 1; y++) {
+        tryPush(0, y);
+        tryPush(w - 1, y);
+    }
+
+    while (head < tail) {
+        const x = queueX[head];
+        const y = queueY[head];
+        head++;
+
+        tryPush(x + 1, y);
+        tryPush(x - 1, y);
+        tryPush(x, y + 1);
+        tryPush(x, y - 1);
+    }
+
+    // Remove visited background pixels, feathering near edges
+    const fadeStart = threshold - feather;
+
+    for (let p = 0; p < visited.length; p++) {
+        if (!visited[p]) {
+            continue;
+        }
+
+        const i = p * 4;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+
+        const brightness = (r + g + b) / 3;
+
+        if (brightness >= threshold) {
+            data[i + 3] = 0;
+            continue;
+        }
+
+        if (brightness > fadeStart) {
+            const keep = (threshold - brightness) / feather; // 1 -> keep more, 0 -> remove
+            data[i + 3] = Math.round(a * Math.max(0, Math.min(1, keep)));
+            continue;
+        }
+
+        data[i + 3] = 0;
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+
+    return canvas.toDataURL('image/png');
+}
+
+function getCacheKey(src: string, options?: EdgeCutoutOptions) {
+    return JSON.stringify([
+        src,
+        options?.threshold ?? 235,
+        options?.saturation ?? 32,
+        options?.feather ?? 24,
+    ]);
+}
+
+function getProcessedSrc(src: string, options?: EdgeCutoutOptions) {
+    const key = getCacheKey(src, options);
+
+    if (!cache.has(key)) {
+        cache.set(key, createEdgeCutout(src, options));
+    }
+
+    return cache.get(key)!;
+}
+
+export default function CutoutImage({
+    src,
+    enabled = true,
+    options,
+    alt = '',
+    ...props
+}: CutoutImageProps) {
+    const [finalSrc, setFinalSrc] = useState(src);
+
+    const depsKey = useMemo(() => getCacheKey(src, options), [src, options]);
+
+    useEffect(() => {
+        let cancelled = false;
+
+        if (!enabled) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setFinalSrc(src);
+
+            return;
+        }
+
+        getProcessedSrc(src, options)
+            .then((result) => {
+                if (!cancelled) {
+                    setFinalSrc(result);
+                }
+            })
+            .catch(() => {
+                if (!cancelled) {
+                    setFinalSrc(src);
+                }
+            });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [src, enabled, depsKey]);
+
+    return <img src={finalSrc} alt={alt} {...props} />;
+}

package/src/components/devices/devices-mini-map.tsx

@@ -0,0 +1,275 @@
+'use client';
+
+/**
+ * Compact device map — "where are my devices" at a glance.
+ *
+ * Marker logic:
+ *   • Device has a heading  → rotated arrow image (CSS rotate)
+ *   • Device has no heading → static coloured pin circle
+ *
+ * Marker colour = network signal strength (0–100 %):
+ *   red (0–25) · purple (26–50) · blue (51–75) · green (76–100)
+ */
+import { MapPin } from 'lucide-react';
+import { useEffect, useMemo, useRef } from 'react';
+
+import { hasGoogleMapsKey, loadGoogleMaps } from '../../lib/google-maps-loader';
+import {
+    arrowRotation,
+    deviceArrowUrl,
+    devicePinColor,
+    useArrow,
+} from '../../lib/map-markers';
+import {
+    isDarkMode,
+    mapStyleForAppearance,
+    watchDarkMode,
+} from '../../lib/map-styles';
+import { cn } from '../../lib/utils';
+
+export type MiniMapDevice = {
+    id: number | string;
+    name: string | null;
+    imei: string | null;
+    last_lat: number | null;
+    last_lon: number | null;
+    /** 0–100 network signal percentage. Drives marker colour. */
+    signal?: number | null;
+    /** Heading in degrees clockwise from north (0–360). Present → arrow marker. */
+    heading?: number | null;
+};
+
+/** Incident flag placed at the location where the incident was last opened. */
+export type MiniMapIncident = {
+    id: number | string;
+    lat: number;
+    lon: number;
+    flagUrl: string;
+    title?: string;
+};
+
+type Props = {
+    devices: MiniMapDevice[];
+    incidents?: MiniMapIncident[];
+    height?: string;
+    className?: string;
+    title?: string;
+    fallbackCenter?: { lat: number; lng: number };
+};
+
+/** Size of the arrow image rendered inside AdvancedMarkerElement. */
+const ARROW_SIZE_PX = 32;
+/** Diameter of the static pin circle. */
+const PIN_SIZE_PX = 18;
+/** Size of incident flag images. */
+const FLAG_SIZE_PX = 28;
+
+function makeArrowElement(device: MiniMapDevice): HTMLElement {
+    const img = document.createElement('img');
+    img.src = deviceArrowUrl(device.signal);
+    img.width = ARROW_SIZE_PX;
+    img.height = ARROW_SIZE_PX;
+    img.title = device.name ?? device.imei ?? `Device ${device.id}`;
+    img.style.display = 'block';
+    img.style.transformOrigin = 'center center';
+    img.style.transform = arrowRotation(device.heading);
+    img.style.filter = 'drop-shadow(0 1px 2px rgba(0,0,0,.4))';
+    return img;
+}
+
+function makePinElement(device: MiniMapDevice): HTMLElement {
+    const div = document.createElement('div');
+    const color = devicePinColor(device.signal);
+    div.title = device.name ?? device.imei ?? `Device ${device.id}`;
+    div.style.cssText = [
+        `width:${PIN_SIZE_PX}px`,
+        `height:${PIN_SIZE_PX}px`,
+        `border-radius:50%`,
+        `background:${color}`,
+        `border:2.5px solid #fff`,
+        `box-shadow:0 1px 4px rgba(0,0,0,.35)`,
+        `cursor:pointer`,
+    ].join(';');
+    return div;
+}
+
+function makeFlagElement(incident: MiniMapIncident): HTMLElement {
+    const img = document.createElement('img');
+    img.src = incident.flagUrl;
+    img.width = FLAG_SIZE_PX;
+    img.height = FLAG_SIZE_PX;
+    if (incident.title) img.title = incident.title;
+    img.style.display = 'block';
+    img.style.filter = 'drop-shadow(0 1px 3px rgba(0,0,0,.4))';
+    return img;
+}
+
+export function DevicesMiniMap({
+    devices,
+    incidents = [],
+    height = '320px',
+    className,
+    title,
+    fallbackCenter = { lat: 31.5204, lng: 74.3587 },
+}: Props) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const mapRef      = useRef<google.maps.Map | null>(null);
+    // AdvancedMarkerElement has no common base type in older @types/google.maps;
+    // store as unknown and cast when calling setMap.
+    const markersRef  = useRef<unknown[]>([]);
+    const flagsRef    = useRef<unknown[]>([]);
+
+    const positioned = useMemo(
+        () => devices.filter(
+            (d): d is MiniMapDevice & { last_lat: number; last_lon: number } =>
+                d.last_lat !== null && d.last_lon !== null,
+        ),
+        [devices],
+    );
+
+    useEffect(() => {
+        if (!containerRef.current || !hasGoogleMapsKey()) return;
+
+        let cancelled = false;
+
+        loadGoogleMaps().then((maps) => {
+            if (cancelled || !containerRef.current) return;
+
+            // Initialise map once.
+            if (!mapRef.current) {
+                mapRef.current = new maps.Map(containerRef.current, {
+                    center: fallbackCenter,
+                    zoom: 6,
+                    disableDefaultUI: true,
+                    zoomControl: true,
+                    clickableIcons: false,
+                    backgroundColor: isDarkMode() ? '#212121' : '#f5f5f5',
+                    styles: mapStyleForAppearance(isDarkMode()),
+                    mapId: 'devices-mini-map',
+                });
+            }
+
+            // ── Device markers ──────────────────────────────────────────────
+            (markersRef.current as Array<{ setMap: (m: null) => void }>)
+                .forEach((m) => m.setMap(null));
+            markersRef.current = [];
+
+            const bounds = new maps.LatLngBounds();
+            const AdvancedMarkerElement =
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (maps as any).marker?.AdvancedMarkerElement as
+                    | (new (o: object) => { setMap: (m: null) => void })
+                    | undefined;
+
+            positioned.forEach((d) => {
+                const position = { lat: d.last_lat, lng: d.last_lon };
+                const content  = useArrow(d.heading)
+                    ? makeArrowElement(d)
+                    : makePinElement(d);
+
+                if (AdvancedMarkerElement) {
+                    const marker = new AdvancedMarkerElement({
+                        map: mapRef.current,
+                        position,
+                        content,
+                    });
+                    markersRef.current.push(marker);
+                } else {
+                    // Fallback: legacy Marker with SVG circle icon.
+                    const color = devicePinColor(d.signal);
+                    const marker = new maps.Marker({
+                        position,
+                        map: mapRef.current!,
+                        title: d.name ?? d.imei ?? `Device ${d.id}`,
+                        icon: {
+                            path: maps.SymbolPath.CIRCLE,
+                            scale: 7,
+                            fillColor: color,
+                            fillOpacity: 0.95,
+                            strokeColor: '#ffffff',
+                            strokeWeight: 2,
+                        },
+                    });
+                    markersRef.current.push(marker as unknown);
+                }
+
+                bounds.extend(position);
+            });
+
+            // ── Incident flags ──────────────────────────────────────────────
+            (flagsRef.current as Array<{ setMap: (m: null) => void }>)
+                .forEach((f) => f.setMap(null));
+            flagsRef.current = [];
+
+            incidents.forEach((inc) => {
+                const content = makeFlagElement(inc);
+                if (AdvancedMarkerElement) {
+                    const flag = new AdvancedMarkerElement({
+                        map: mapRef.current,
+                        position: { lat: inc.lat, lng: inc.lon },
+                        content,
+                    });
+                    flagsRef.current.push(flag);
+                }
+            });
+
+            // ── Fit bounds ──────────────────────────────────────────────────
+            if (positioned.length === 1) {
+                mapRef.current!.setCenter({ lat: positioned[0].last_lat, lng: positioned[0].last_lon });
+                mapRef.current!.setZoom(11);
+            } else if (positioned.length > 1) {
+                mapRef.current!.fitBounds(bounds, 40);
+            }
+        }).catch((e) => console.warn('Map load failed', e));
+
+        return () => { cancelled = true; };
+    }, [positioned, incidents, fallbackCenter]);
+
+    useEffect(() => {
+        return watchDarkMode((isDark) => {
+            mapRef.current?.setOptions({
+                styles: mapStyleForAppearance(isDark),
+                backgroundColor: isDark ? '#212121' : '#f5f5f5',
+            });
+        });
+    }, []);
+
+    if (!hasGoogleMapsKey()) {
+        return (
+            <div
+                className={cn(
+                    'relative flex items-center justify-center overflow-hidden rounded-xl border border-border bg-muted/40 text-muted-foreground',
+                    className,
+                )}
+                style={{ height }}
+            >
+                <div className="text-center">
+                    <MapPin className="mx-auto mb-2 h-6 w-6" />
+                    <p className="text-sm font-medium">Map preview unavailable</p>
+                    <p className="mt-1 text-xs">
+                        Configure VITE_GOOGLE_MAPS_API_KEY to render device positions here.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={cn('relative overflow-hidden rounded-xl border border-border', className)}
+            style={{ height }}
+        >
+            {title && (
+                <div className="pointer-events-none absolute top-3 left-3 z-10 rounded-md bg-background/95 px-2.5 py-1 text-xs font-semibold text-foreground shadow-sm">
+                    {title}
+                </div>
+            )}
+            <div ref={containerRef} className="absolute inset-0" />
+            {positioned.length === 0 && (
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background/40 text-sm text-muted-foreground">
+                    No device positions yet.
+                </div>
+            )}
+        </div>
+    );
+}