@sensolus/create-snt-agent-app 0.1.1 → 0.2.1

package/README.md

@@ -0,0 +1,153 @@
+# @sensolus/create-snt-agent-app
+
+Scaffold a new Sensolus agent app: a React (Vite) frontend wired to
+[`@sensolus/snt-agent-kit`](https://www.npmjs.com/package/@sensolus/snt-agent-kit)
+plus a Flask backend that proxies the Sensolus public API, with PostgreSQL,
+migrations, Docker, and Jenkins CI included.
+
+## Quick start — create an agent app
+
+```bash
+npm create @sensolus/snt-agent-app my-app
+cd my-app
+cp .env.example .env        # fill in MAPBOX_KEY + LOCATIONIQ_KEY (required for SntMap)
+npm install
+pip install -r backend/requirements.txt
+npm run dev                 # frontend on :3000
+python backend/app.py       # backend on :5000 (separate terminal)
+```
+
+Open http://localhost:3000. The Vite dev server proxies `/api/*` to Flask;
+Flask serves runtime config (map keys) at `/api/config` and proxies the
+Sensolus API with your session cookie or an API key entered in the app.
+
+The generated README covers the rest: PostgreSQL setup, Docker build,
+deployment, and environment variables.
+
+### Rules of the road
+
+Widgets, theme, and the i18n framework come from `@sensolus/snt-agent-kit` —
+**import them, don't copy them**. ESLint in the generated app enforces no deep
+imports and no `Snt*` re-declarations. App-specific translation keys live in
+your app (`src/i18n/messages.js`) and are merged via
+`<LocaleProvider messages={...}>`.
+
+## The widget kit
+
+The generated app comes pre-wired, but everything below is plain
+`@sensolus/snt-agent-kit` API — useful when extending the app.
+
+### Default wiring (generated-app convention)
+
+The app proxies the Sensolus backend at `/api/*`, so the kit's defaults just
+work:
+
+```jsx
+import { SntUiProvider, LocaleProvider, SntButton, SntCard } from '@sensolus/snt-agent-kit'
+import '@sensolus/snt-agent-kit/theme.css'
+import { messages } from './i18n'   // your app's translation keys
+
+function App() {
+  return (
+    <SntUiProvider>
+      <LocaleProvider messages={messages}>
+        <SntCard title="Hello">
+          <SntButton variant="primary">Click me</SntButton>
+        </SntCard>
+      </LocaleProvider>
+    </SntUiProvider>
+  )
+}
+```
+
+### Custom wiring (non-`/api/*` backends)
+
+`SntUiProvider` accepts overrides for any of the four backend calls and for
+navigation. Anything you omit falls back to the same-origin `/api/*` default.
+
+```jsx
+import { useNavigate } from 'react-router-dom'
+import { SntUiProvider } from '@sensolus/snt-agent-kit'
+
+function Shell({ children }) {
+  const navigate = useNavigate()
+  return (
+    <SntUiProvider
+      api={{
+        // Call the Sensolus public API directly with your own API key
+        fetchLoginInfo:  ()         => mySensolus.getLoginInfo(),
+        fetchGeozones:   (orgId)    => mySensolus.getGeozones(orgId),
+        geocode:         (q)        => mySensolus.geocode(q),
+        reverseGeocode:  (lat, lng) => mySensolus.reverseGeocode(lat, lng),
+      }}
+      navigate={navigate}  // optional: wire to react-router, Next, etc.
+    >
+      {children}
+    </SntUiProvider>
+  )
+}
+```
+
+#### `api` contract
+
+| Method | Signature | Used by |
+|--------|-----------|---------|
+| `fetchLoginInfo()` | `() => Promise<{ language, timezone, firstDayOfWeek, unitDistance, unitTemperature } \| null>` | `LocaleProvider` |
+| `fetchGeozones(orgId)` | `(string) => Promise<Geozone[]>` | `SntMap` (when `orgId` prop set) |
+| `geocode(query)` | `(string) => Promise<Array<{ name, lat, lng, boundingbox }>>` | `SntMap` (search box) |
+| `reverseGeocode(lat, lng)` | `(number, number) => Promise<{ displayName, address, lat, lng } \| null>` | reserved for future widgets |
+
+#### `navigate` contract
+
+`(to: string \| number) => void` — strings are routes (`'/orgs/123'`), `-1`
+means "back". Wire to `useNavigate()` from react-router-dom, the Next.js
+router, or omit to fall back to `window.history`.
+
+### SntMap
+
+Tile-provider keys are **required props** — the kit ships no keys. In a
+generated app they come from the backend's `/api/config` at runtime (via
+`AppConfigContext`), so one Docker image deploys across environments:
+
+```jsx
+const config = useAppConfig()
+
+<SntMap
+  mapboxKey={config.mapboxKey}
+  locationiqKey={config.locationiqKey}
+  devices={devices}
+  orgId={id}            // triggers api.fetchGeozones(orgId)
+/>
+```
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `SntUiProvider`, `useSntUi` | Inject backend `api` + `navigate` adapters |
+| `LocaleProvider`, `useLocale` | i18n / locale context (reads `api.fetchLoginInfo`, merges app `messages`) |
+| `formatShortDate`, `formatDateTime`, `formatNumber` | Locale-aware formatters |
+| `SntButton` | Primary button with variants |
+| `SntInput` | Text input (onChange receives value directly) |
+| `SntBadge` | Status badge with color variants |
+| `SntCard` | Card container |
+| `SntTable` | Sortable, paginated data table |
+| `SntSpinner`, `SntLoadingOverlay` | Loading indicators |
+| `SntToolbar`, `SntToolbarSpacer` | Toolbar layout |
+| `SntButtonGroup` | Segmented control |
+| `SntSelect` | Native select with Sensolus styling |
+| `SntPageHeader` | Page header (uses `navigate` from `SntUiProvider`) |
+| `SntTabs`, `SntTabPanel` | Tabbed views |
+| `SntDialog` | Modal dialog |
+| `SntSidepanel`, `SntFilterSection` | Slide-out side panel |
+| `SntSwitch` | Toggle switch |
+| `SntGrid`, `SntGridItem` | Responsive grid |
+| `SntSummaryStat` | Big-number summary tile |
+| `SntHistogram` | Time-bucketed histogram |
+| `SntCheckboxList` | Multi-select checkbox list |
+| `SntDateRangePicker` | Date range picker (locale-aware) |
+| `SntMap` | Leaflet map (Street/Satellite, geozones, device markers) |
+| `SntColors` | JavaScript color constants |
+
+The generated app includes a **Widgets** tab (`WidgetShowcase`) demonstrating
+every component live.

package/index.js

@@ -39,7 +39,7 @@ async function substitute(dir) {
   for (const entry of await readdir(dir)) {
     const p = path.join(dir, entry)
     if ((await stat(p)).isDirectory()) { await substitute(p); continue }
-    if (!/\.(json|js|jsx|html|md|py|txt|sh|css)$|^\.[a-z]+$/i.test(entry)) continue
+    if (!/\.(json|js|jsx|html|md|py|txt|sh|css|yml|yaml|ini|mako)$|^\.[a-z][a-z.]*$|^(Jenkinsfile|Dockerfile|Makefile)$/i.test(entry)) continue
     const content = await readFile(p, 'utf8')
     if (content.includes('{{APP_NAME}}')) {
       await writeFile(p, content.replaceAll('{{APP_NAME}}', appName))
@@ -53,6 +53,7 @@ Created ${appName}/
 
 Next steps:
   cd ${appName}
+  cp .env.example .env        # then fill in MAPBOX_KEY + LOCATIONIQ_KEY (required for SntMap)
   npm install
   pip install -r backend/requirements.txt
   npm run dev                 # frontend on :3000

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensolus/create-snt-agent-app",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Scaffold a new Sensolus agent app: React frontend wired to @sensolus/snt-agent-kit + Flask API proxy backend.",
   "type": "module",
   "bin": {

package/template/README.md

@@ -11,6 +11,22 @@ A modern React + Flask dashboard for querying the Sensolus public API. This appl
 
 ## Quick Start
 
+### Environment Variables (.env)
+
+Copy `.env.example` to `.env` and fill in the map provider keys (ask your team
+or check the vault). They are **required** for the map pages (`SntMap`):
+
+```env
+MAPBOX_KEY=pk....
+LOCATIONIQ_KEY=pk....
+```
+
+The Flask backend loads `.env` at startup and serves the keys to the frontend
+at runtime via `/api/config` (so they are not baked into the build, and one
+Docker image can deploy across environments — in Docker, pass them with
+`-e MAPBOX_KEY=... -e LOCATIONIQ_KEY=...`). The real `.env` is gitignored;
+never commit keys.
+
 ### Local Development (Recommended)
 
 Run both the frontend dev server and Flask backend in separate terminals:

package/template/_env.example

@@ -1,4 +1,14 @@
-# Copy to .env — required for SntMap tile layers (get keys from your team vault).
-# Keys are loaded at app build time; never commit the real .env.
-VITE_LOCATIONIQ_KEY=
-VITE_MAPBOX_KEY=
+# Copy to .env and fill in — never commit the real .env (it is gitignored).
+#
+# Map provider keys (get them from your team vault). Required for SntMap:
+# the Flask backend reads them at request time and serves them to the
+# frontend via /api/config, so one Docker image works across environments.
+MAPBOX_KEY=
+LOCATIONIQ_KEY=
+
+# PostgreSQL connection (defaults shown; see README "Database Configuration")
+#DB_HOST=localhost
+#DB_PORT=5432
+#DB_NAME={{APP_NAME}}
+#DB_USER=snt
+#DB_PASSWORD=snt

package/template/backend/app.py

@@ -401,6 +401,18 @@ def get_devices_by_filter():
 
 
 LOCATIONIQ_KEY = os.environ.get('LOCATIONIQ_KEY', '')
+MAPBOX_KEY = os.environ.get('MAPBOX_KEY', '')
+
+
+@app.route('/api/config')
+def app_config():
+    """Runtime config served to the frontend. Lets one Docker image deploy
+    across dev/demo/prod by reading keys from the container's env at request
+    time instead of baking them into the bundle at build time."""
+    return jsonify({
+        'mapboxKey': MAPBOX_KEY,
+        'locationiqKey': LOCATIONIQ_KEY,
+    }), 200
 
 
 @app.route('/api/geocode')

package/template/package.json

@@ -15,7 +15,7 @@
     "url": "git+ssh://git@bitbucket.org/sensolus/{{APP_NAME}}.git"
   },
   "dependencies": {
-    "@sensolus/snt-agent-kit": "^0.1.1",
+    "@sensolus/snt-agent-kit": "^0.2.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-router-dom": "^7.1.1"

package/template/src/App.jsx

@@ -1,14 +1,33 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'
+import { SntUiProvider } from '@sensolus/snt-agent-kit'
+import { LocaleProvider, messages } from './i18n'
+import { AppConfigProvider } from './AppConfigContext'
 import { Home } from './pages/Home'
 import { OrganisationDetail } from './pages/OrganisationDetail'
 
+// SntUiProvider decouples kit widgets from the router and backend:
+// pass `navigate` (and optionally `api`) so widgets like SntPageHeader work.
+// LocaleProvider sits inside it so it fetches login info via the api adapter.
+function AppShell() {
+  const navigate = useNavigate()
+  return (
+    <SntUiProvider navigate={navigate}>
+      <LocaleProvider messages={messages}>
+        <AppConfigProvider>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/organisation/:id" element={<OrganisationDetail />} />
+          </Routes>
+        </AppConfigProvider>
+      </LocaleProvider>
+    </SntUiProvider>
+  )
+}
+
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/organisation/:id" element={<OrganisationDetail />} />
-      </Routes>
+      <AppShell />
     </BrowserRouter>
   )
 }

package/template/src/AppConfigContext.jsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { SntLoadingOverlay } from '@sensolus/snt-agent-kit'
+
+/**
+ * Fetches runtime config (map tile keys, etc.) from the Flask backend's
+ * /api/config endpoint and gates the app on it. Lets one Docker image
+ * deploy across environments — keys come from the container's env vars
+ * at runtime instead of being baked into the bundle at `vite build` time.
+ */
+const AppConfigContext = createContext(null)
+
+export function AppConfigProvider({ children }) {
+  const [config, setConfig] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/config')
+      .then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)))
+      .then(data => { if (!cancelled) setConfig(data) })
+      .catch(err => { if (!cancelled) setError(err) })
+    return () => { cancelled = true }
+  }, [])
+
+  if (error) {
+    return (
+      <div style={{ padding: 40, color: 'var(--snt-red)' }}>
+        Failed to load app config from /api/config: {error.message}
+      </div>
+    )
+  }
+  if (!config) return <SntLoadingOverlay message="Loading config..." />
+
+  return (
+    <AppConfigContext.Provider value={config}>
+      {children}
+    </AppConfigContext.Provider>
+  )
+}
+
+export function useAppConfig() {
+  const ctx = useContext(AppConfigContext)
+  if (!ctx) throw new Error('useAppConfig must be used inside AppConfigProvider')
+  return ctx
+}

package/template/src/i18n/translations/de.js

@@ -17,34 +17,10 @@ export default {
   // Table widget
 
   // CheckboxList widget
-  'checkboxList.selectAll': 'Alle auswählen',
-  'checkboxList.deselectAll': 'Alle abwählen',
 
   // Sidepanel
-  'sidepanel.collapse': 'Panel einklappen',
-  'sidepanel.expand': 'Panel ausklappen',
 
   // DateRangePicker presets
-  'dateRange.period': 'Zeitraum:',
-  'dateRange.from': 'Von',
-  'dateRange.to': 'Bis',
-  'dateRange.preset.this_month': 'Dieser Monat',
-  'dateRange.preset.last_month': 'Letzter Monat',
-  'dateRange.preset.last_3_months': 'Letzte 3 Monate',
-  'dateRange.preset.last_6_months': 'Letzte 6 Monate',
-  'dateRange.preset.last_12_months': 'Letzte 12 Monate',
-  'dateRange.preset.last_24_months': 'Letzte 24 Monate',
-  'dateRange.preset.last_36_months': 'Letzte 36 Monate',
-  'dateRange.preset.this_year': 'Dieses Jahr',
-  'dateRange.preset.last_year': 'Letztes Jahr',
-  'dateRange.preset.all_time': 'Gesamter Zeitraum',
-  'dateRange.preset.custom': 'Benutzerdefiniert',
-  'dateRange.preset.next_3_months': 'Nächste 3 Monate',
-  'dateRange.preset.next_6_months': 'Nächste 6 Monate',
-  'dateRange.preset.next_12_months': 'Nächste 12 Monate',
-  'dateRange.preset.this_quarter': 'Dieses Quartal',
-  'dateRange.preset.next_quarter': 'Nächstes Quartal',
-  'dateRange.preset.rolling_12_months': 'Rollende 12 Monate',
 
   // OrganisationList page
   'orgList.title': 'Organisationen',

package/template/src/i18n/translations/en.js

@@ -17,34 +17,10 @@ export default {
   // Table widget
 
   // CheckboxList widget
-  'checkboxList.selectAll': 'Select all',
-  'checkboxList.deselectAll': 'Deselect all',
 
   // Sidepanel
-  'sidepanel.collapse': 'Collapse panel',
-  'sidepanel.expand': 'Expand panel',
 
   // DateRangePicker presets
-  'dateRange.period': 'Period:',
-  'dateRange.from': 'From',
-  'dateRange.to': 'To',
-  'dateRange.preset.this_month': 'This month',
-  'dateRange.preset.last_month': 'Last month',
-  'dateRange.preset.last_3_months': 'Last 3 months',
-  'dateRange.preset.last_6_months': 'Last 6 months',
-  'dateRange.preset.last_12_months': 'Last 12 months',
-  'dateRange.preset.last_24_months': 'Last 24 months',
-  'dateRange.preset.last_36_months': 'Last 36 months',
-  'dateRange.preset.this_year': 'This year',
-  'dateRange.preset.last_year': 'Last year',
-  'dateRange.preset.all_time': 'All time',
-  'dateRange.preset.custom': 'Custom',
-  'dateRange.preset.next_3_months': 'Next 3 months',
-  'dateRange.preset.next_6_months': 'Next 6 months',
-  'dateRange.preset.next_12_months': 'Next 12 months',
-  'dateRange.preset.this_quarter': 'This quarter',
-  'dateRange.preset.next_quarter': 'Next quarter',
-  'dateRange.preset.rolling_12_months': 'Rolling 12 months',
 
   // Auth dialog
   'auth.dialog.title': 'Sensolus API key required',

package/template/src/i18n/translations/es.js

@@ -17,34 +17,10 @@ export default {
   // Table widget
 
   // CheckboxList widget
-  'checkboxList.selectAll': 'Seleccionar todo',
-  'checkboxList.deselectAll': 'Deseleccionar todo',
 
   // Sidepanel
-  'sidepanel.collapse': 'Contraer panel',
-  'sidepanel.expand': 'Expandir panel',
 
   // DateRangePicker presets
-  'dateRange.period': 'Período:',
-  'dateRange.from': 'Desde',
-  'dateRange.to': 'Hasta',
-  'dateRange.preset.this_month': 'Este mes',
-  'dateRange.preset.last_month': 'Mes pasado',
-  'dateRange.preset.last_3_months': 'Últimos 3 meses',
-  'dateRange.preset.last_6_months': 'Últimos 6 meses',
-  'dateRange.preset.last_12_months': 'Últimos 12 meses',
-  'dateRange.preset.last_24_months': 'Últimos 24 meses',
-  'dateRange.preset.last_36_months': 'Últimos 36 meses',
-  'dateRange.preset.this_year': 'Este año',
-  'dateRange.preset.last_year': 'Año pasado',
-  'dateRange.preset.all_time': 'Todo el período',
-  'dateRange.preset.custom': 'Personalizado',
-  'dateRange.preset.next_3_months': 'Próximos 3 meses',
-  'dateRange.preset.next_6_months': 'Próximos 6 meses',
-  'dateRange.preset.next_12_months': 'Próximos 12 meses',
-  'dateRange.preset.this_quarter': 'Este trimestre',
-  'dateRange.preset.next_quarter': 'Próximo trimestre',
-  'dateRange.preset.rolling_12_months': '12 meses continuos',
 
   // OrganisationList page
   'orgList.title': 'Organizaciones',

package/template/src/i18n/translations/fr.js

@@ -17,34 +17,10 @@ export default {
   // Table widget
 
   // CheckboxList widget
-  'checkboxList.selectAll': 'Tout sélectionner',
-  'checkboxList.deselectAll': 'Tout désélectionner',
 
   // Sidepanel
-  'sidepanel.collapse': 'Réduire le panneau',
-  'sidepanel.expand': 'Développer le panneau',
 
   // DateRangePicker presets
-  'dateRange.period': 'Période :',
-  'dateRange.from': 'Du',
-  'dateRange.to': 'Au',
-  'dateRange.preset.this_month': 'Ce mois-ci',
-  'dateRange.preset.last_month': 'Le mois dernier',
-  'dateRange.preset.last_3_months': '3 derniers mois',
-  'dateRange.preset.last_6_months': '6 derniers mois',
-  'dateRange.preset.last_12_months': '12 derniers mois',
-  'dateRange.preset.last_24_months': '24 derniers mois',
-  'dateRange.preset.last_36_months': '36 derniers mois',
-  'dateRange.preset.this_year': 'Cette année',
-  'dateRange.preset.last_year': 'L\'année dernière',
-  'dateRange.preset.all_time': 'Tout',
-  'dateRange.preset.custom': 'Personnalisé',
-  'dateRange.preset.next_3_months': '3 prochains mois',
-  'dateRange.preset.next_6_months': '6 prochains mois',
-  'dateRange.preset.next_12_months': '12 prochains mois',
-  'dateRange.preset.this_quarter': 'Ce trimestre',
-  'dateRange.preset.next_quarter': 'Trimestre prochain',
-  'dateRange.preset.rolling_12_months': '12 mois glissants',
 
   // OrganisationList page
   'orgList.title': 'Organisations',

package/template/src/i18n/translations/nl.js

@@ -17,34 +17,10 @@ export default {
   // Table widget
 
   // CheckboxList widget
-  'checkboxList.selectAll': 'Alles selecteren',
-  'checkboxList.deselectAll': 'Alles deselecteren',
 
   // Sidepanel
-  'sidepanel.collapse': 'Paneel inklappen',
-  'sidepanel.expand': 'Paneel uitklappen',
 
   // DateRangePicker presets
-  'dateRange.period': 'Periode:',
-  'dateRange.from': 'Van',
-  'dateRange.to': 'Tot',
-  'dateRange.preset.this_month': 'Deze maand',
-  'dateRange.preset.last_month': 'Vorige maand',
-  'dateRange.preset.last_3_months': 'Laatste 3 maanden',
-  'dateRange.preset.last_6_months': 'Laatste 6 maanden',
-  'dateRange.preset.last_12_months': 'Laatste 12 maanden',
-  'dateRange.preset.last_24_months': 'Laatste 24 maanden',
-  'dateRange.preset.last_36_months': 'Laatste 36 maanden',
-  'dateRange.preset.this_year': 'Dit jaar',
-  'dateRange.preset.last_year': 'Vorig jaar',
-  'dateRange.preset.all_time': 'Alles',
-  'dateRange.preset.custom': 'Aangepast',
-  'dateRange.preset.next_3_months': 'Volgende 3 maanden',
-  'dateRange.preset.next_6_months': 'Volgende 6 maanden',
-  'dateRange.preset.next_12_months': 'Volgende 12 maanden',
-  'dateRange.preset.this_quarter': 'Dit kwartaal',
-  'dateRange.preset.next_quarter': 'Volgend kwartaal',
-  'dateRange.preset.rolling_12_months': 'Rollende 12 maanden',
 
   // OrganisationList page
   'orgList.title': 'Organisaties',

package/template/src/main.jsx

@@ -1,14 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import { LocaleProvider, messages } from './i18n'
 import '@sensolus/snt-agent-kit/theme.css'
 import './styles/app.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <LocaleProvider messages={messages}>
-      <App />
-    </LocaleProvider>
+    <App />
   </React.StrictMode>
 )

package/template/src/pages/OrganisationDetail.jsx

@@ -9,10 +9,12 @@ import {
   SntSpinner,
 } from '@sensolus/snt-agent-kit'
 import { useLocale, formatNumber } from '../i18n'
+import { useAppConfig } from '../AppConfigContext'
 
 export function OrganisationDetail() {
   const { id } = useParams()
   const { t, intlLocale } = useLocale()
+  const config = useAppConfig()
 
   // Try to get org data from sessionStorage
   const organisation = useMemo(() => {
@@ -213,6 +215,8 @@ export function OrganisationDetail() {
           </div>
         ) : (
           <SntMap
+            mapboxKey={config.mapboxKey}
+            locationiqKey={config.locationiqKey}
             height="500px"
             devices={devices}
             orgId={id}

package/template/src/pages/WidgetShowcase.jsx

@@ -28,6 +28,7 @@ import {
   SntToolbarSpacer,
   getDefaultDateRange,
 } from '@sensolus/snt-agent-kit'
+import { useAppConfig } from '../AppConfigContext'
 
 function Section({ title, description, children }) {
   return (
@@ -88,12 +89,13 @@ const TAB_DEFS = [
 ]
 
 export function WidgetShowcase() {
+  const config = useAppConfig()
   const [inputValue, setInputValue] = useState('Hello world')
   const [selectValue, setSelectValue] = useState('eu')
   const [groupValue, setGroupValue] = useState('cards')
   const [switchOn, setSwitchOn] = useState(true)
   const [checkboxSelected, setCheckboxSelected] = useState(['Trackers', 'Geozones'])
-  const [dateRange, setDateRange] = useState(() => getDefaultDateRange('last_3_months'))
+  const [dateRange, setDateRange] = useState(() => getDefaultDateRange('week'))
   const [dialogOpen, setDialogOpen] = useState(false)
   const [showOverlay, setShowOverlay] = useState(false)
   const [sidepanelOpen, setSidepanelOpen] = useState(true)
@@ -245,14 +247,10 @@ export function WidgetShowcase() {
       {/* ------------------------------------------------------------------ */}
       <Section
         title="SntDateRangePicker"
-        description="Range selection with locale-aware presets. Receives ISO yyyy-MM-dd."
+        description="Range selection with day / week / month / custom modes. Value is { viewMode, start, end } as JS Dates."
       >
-        <Example label={`Current: ${dateRange.from} → ${dateRange.to}`}>
-          <SntDateRangePicker
-            from={dateRange.from}
-            to={dateRange.to}
-            onChange={setDateRange}
-          />
+        <Example label={`Current: ${dateRange.start.toDateString()} → ${dateRange.end.toDateString()} (${dateRange.viewMode})`}>
+          <SntDateRangePicker value={dateRange} onChange={setDateRange} />
         </Example>
       </Section>
 
@@ -487,6 +485,8 @@ export function WidgetShowcase() {
         description="Leaflet map with Street/Satellite layer toggle. Optionally renders geozones (by orgId or array) and device markers."
       >
         <SntMap
+          mapboxKey={config.mapboxKey}
+          locationiqKey={config.locationiqKey}
           height="320px"
           center={[50.85, 4.35]}
           zoom={6}

package/template/src/styles/app.css

@@ -283,7 +283,7 @@ body {
 }
 
 .summary-stats-row .summary-stat-info .summary-value {
-  color: var(--snt-infra);
+  color: var(--snt-ui-selected);
 }
 
 .summary-stats-row .summary-stat-success .summary-value {