feat: add MapWidget with theme-aware Leaflet styling and configuration support

Author: surajmaurya-git

package-lock.json

@@ -48,19 +48,22 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@supabase/supabase-js": "^2.90.1",
     "@tanstack/react-query": "^5.83.0",
+    "@types/leaflet": "^1.9.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-grid-layout": "^2.2.3",
     "react-hook-form": "^7.61.1",
+    "react-leaflet": "^4.2.1",
     "react-resizable-panels": "^2.1.9",
     "react-router-dom": "^6.30.1",
     "recharts": "^2.15.4",

package.json

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card, CardContent } from '@/components/ui/card';
-import { Gauge, LineChart, Hash, Settings, PieChart, ToggleRight, Battery, SlidersHorizontal, Cylinder, Activity } from 'lucide-react';
+import { Gauge, LineChart, Hash, Settings, PieChart, ToggleRight, Battery, SlidersHorizontal, Cylinder, Activity, Map as MapIcon } from 'lucide-react';
 import { useBuilderStore } from '../../store/useBuilderStore';
 import { WIDGET_SIZE_CONSTRAINTS } from './widgetConfig';
 
@@ -15,6 +15,7 @@ const WIDGET_TYPES = [
   { id: 'SliderWidget',       name: 'Slider',                icon: <SlidersHorizontal size={18} /> },
   { id: 'TankWidget',         name: 'Tank Level',            icon: <Cylinder size={18} /> },
   { id: 'SparklineWidget',    name: 'Sparkline Trend',       icon: <Activity size={18} /> },
+  { id: 'MapWidget',          name: 'Map',                   icon: <MapIcon size={18} /> },
 ];
 
 export default function ComponentSidebar() {

src/components/dashboard-builder/ComponentSidebar.tsx

@@ -4,6 +4,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
 import { Plus, X, Palette, ChevronDown, ChevronUp } from 'lucide-react';
 import type { ValueMapping } from './widgets/ValueDisplayWidget';
 import type { DonutSeries } from './widgets/DonutChartWidget';
@@ -70,14 +71,14 @@ export default function PropertiesPanel() {
             <div className="space-y-2">
               <Label>Data Source</Label>
               <Select
-                value={draftConfig.dataSource || (['HistoricalTrendWidget', 'SparklineWidget', 'GaugeWidget'].includes(widget.type) ? 'variable' : 'valuestore')}
+                value={draftConfig.dataSource || (['HistoricalTrendWidget', 'SparklineWidget', 'GaugeWidget', 'MapWidget'].includes(widget.type) ? 'variable' : 'valuestore')}
                 onValueChange={(val) => handleConfigChange({ dataSource: val })}
               >
                 <SelectTrigger>
                   <SelectValue placeholder="Select data source" />
                 </SelectTrigger>
                 <SelectContent>
-                  {!['HistoricalTrendWidget', 'SparklineWidget', 'GaugeWidget'].includes(widget.type) && (
+                  {!['HistoricalTrendWidget', 'SparklineWidget', 'GaugeWidget', 'MapWidget'].includes(widget.type) && (
                     <SelectItem value="valuestore">Valuestore</SelectItem>
                   )}
                   {!['ToggleSwitchWidget', 'SliderWidget'].includes(widget.type) && (
@@ -88,7 +89,7 @@ export default function PropertiesPanel() {
             </div>
             <div className="space-y-2">
               <Label>
-                { (draftConfig.dataSource === 'variable' || (['HistoricalTrendWidget', 'SparklineWidget', 'GaugeWidget'].includes(widget.type) && !draftConfig.dataSource)) 
+                { (draftConfig.dataSource === 'variable' || (['HistoricalTrendWidget', 'SparklineWidget', 'GaugeWidget', 'MapWidget'].includes(widget.type) && !draftConfig.dataSource)) 
                   ? 'Variable Identifier' : 'Key' }
               </Label>
               <Input
@@ -288,6 +289,59 @@ export default function PropertiesPanel() {
           </div>
         )}
 
+        {widget.type === 'MapWidget' && (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label title="Maximum number of points to fetch">Data Limit</Label>
+              <Input
+                type="number"
+                placeholder="1000"
+                className="h-8"
+                min={1}
+                max={10000}
+                value={draftConfig.limit || ''}
+                onChange={(e) => {
+                  const val = e.target.value ? Number(e.target.value) : undefined;
+                  handleConfigChange({ limit: val !== undefined ? Math.min(val, 10000) : undefined });
+                }}
+              />
+              <p className="text-[10px] text-muted-foreground italic">
+                Max: 10,000 points.
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label>Path Color</Label>
+              <div className="flex gap-2 items-center">
+                <Input
+                  type="color"
+                  value={draftConfig.pathColor || '#2563eb'}
+                  onChange={(e) => handleConfigChange({ pathColor: e.target.value })}
+                  className="w-12 h-8 p-1 cursor-pointer"
+                />
+                <Input
+                  type="text"
+                  placeholder="#2563eb"
+                  value={draftConfig.pathColor || '#2563eb'}
+                  onChange={(e) => handleConfigChange({ pathColor: e.target.value })}
+                  className="flex-1 h-8"
+                />
+              </div>
+            </div>
+            <div className="flex items-center justify-between py-2 border-t mt-2">
+              <div className="space-y-0.5">
+                <Label className="text-xs">Show History Table</Label>
+                <p className="text-[10px] text-muted-foreground">
+                  Display location history table next to map.
+                </p>
+              </div>
+              <Switch
+                checked={draftConfig.showTable || false}
+                onCheckedChange={(checked) => handleConfigChange({ showTable: checked })}
+              />
+            </div>
+          </div>
+        )}
+
         {widget.type === 'ValueDisplayWidget' && (
           <div className="space-y-4">
             <div className="space-y-2">

src/components/dashboard-builder/PropertiesPanel.tsx

@@ -22,6 +22,7 @@ export const WIDGET_SIZE_CONSTRAINTS: Record<string, WidgetSizeConfig> = {
   SliderWidget: { minW: 3, minH: 1, maxW: 12, maxH: 4, defaultW: 4, defaultH: 1 },
   TankWidget: { minW: 2, minH: 2, maxW: 8, maxH: 12, defaultW: 2.5, defaultH: 2 },
   SparklineWidget: { minW: 1, minH: 1, maxW: 12, maxH: 12, defaultW: 2.5, defaultH: 1.5 },
+  MapWidget: { minW: 4, minH: 3, maxW: 24, maxH: 24, defaultW: 6, defaultH: 4 },
 };
 
 /** Returns constraints for a widget type, with safe fallback */