@sensolus/create-snt-agent-app 0.1.0 → 0.2.0

package/template/src/pages/Home.jsx

@@ -0,0 +1,170 @@
+import { useState, useEffect, useRef } from 'react'
+import { SntTabs, SntTabPanel, SntDialog, SntButton, SntInput, SntPageHeader } from '@sensolus/snt-agent-kit'
+import { useLocale } from '../i18n'
+import { Overview } from './Overview'
+import { OrganisationList } from './OrganisationList'
+import { WidgetShowcase } from './WidgetShowcase'
+
+export function Home() {
+  const { t } = useLocale()
+  const [activeTab, setActiveTab] = useState('explore')
+  const [authReady, setAuthReady] = useState(false)
+  const [hasCookieToken, setHasCookieToken] = useState(false)
+  const [showApiKeyDialog, setShowApiKeyDialog] = useState(false)
+  const [apiKeyInput, setApiKeyInput] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState('')
+  const orgListReloadRef = useRef(null)
+  const [orgListLoading, setOrgListLoading] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/auth/check')
+      .then((r) => r.json())
+      .then((data) => {
+        if (cancelled) return
+        if (data.hasSessionToken) {
+          setHasCookieToken(true)
+          setAuthReady(true)
+        } else if (data.hasStoredApiKey) {
+          setAuthReady(true)
+        } else {
+          setShowApiKeyDialog(true)
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setShowApiKeyDialog(true)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const submitApiKey = async () => {
+    const key = apiKeyInput.trim()
+    if (!key) return
+    setSubmitting(true)
+    setSubmitError('')
+    try {
+      const r = await fetch('/api/auth/api-key', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKey: key }),
+      })
+      const data = await r.json()
+      if (!r.ok) {
+        setSubmitError(data.error || t('auth.dialog.failed'))
+        return
+      }
+      setAuthReady(true)
+      setShowApiKeyDialog(false)
+      setApiKeyInput('')
+    } catch (err) {
+      setSubmitError(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const openApiKeyDialog = () => {
+    setSubmitError('')
+    setApiKeyInput('')
+    setShowApiKeyDialog(true)
+  }
+
+  const tabs = [
+    { key: 'explore', label: t('home.tab.explore') },
+    { key: 'overview', label: t('home.tab.overview') },
+    { key: 'showcase', label: t('home.tab.showcase') },
+  ]
+
+  const headerActions = (
+    <div className="header-actions">
+      {!hasCookieToken && (
+        <SntButton variant="secondary" onClick={openApiKeyDialog}>
+          {t('orgList.changeApiKey')}
+        </SntButton>
+      )}
+      {activeTab === 'explore' && (
+        <SntButton
+          variant="primary"
+          onClick={() => orgListReloadRef.current?.()}
+          disabled={orgListLoading || !authReady}
+        >
+          {orgListLoading ? t('common.loading') : t('common.reload')}
+        </SntButton>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="home-page">
+      <SntPageHeader title="Sample app" actions={headerActions} />
+      <SntTabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab}>
+        <SntTabPanel tabKey="overview" activeTab={activeTab}>
+          <Overview authReady={authReady} />
+        </SntTabPanel>
+        <SntTabPanel tabKey="explore" activeTab={activeTab}>
+          <OrganisationList
+            authReady={authReady}
+            reloadRef={orgListReloadRef}
+            onLoadingChange={setOrgListLoading}
+          />
+        </SntTabPanel>
+        <SntTabPanel tabKey="showcase" activeTab={activeTab}>
+          <WidgetShowcase />
+        </SntTabPanel>
+      </SntTabs>
+
+      <SntDialog
+        open={showApiKeyDialog}
+        onClose={() => {
+          if (authReady) setShowApiKeyDialog(false)
+        }}
+        title={t('auth.dialog.title')}
+        size="small"
+      >
+        <p>{t('auth.dialog.description')}</p>
+        <SntInput
+          type="password"
+          placeholder={t('orgList.apiKeyPlaceholder')}
+          value={apiKeyInput}
+          onChange={setApiKeyInput}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') submitApiKey()
+          }}
+        />
+        {submitError && (
+          <div className="error" style={{ marginTop: 8 }}>
+            {submitError}
+          </div>
+        )}
+        <div
+          style={{
+            marginTop: 16,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 8,
+          }}
+        >
+          {authReady && (
+            <SntButton
+              variant="secondary"
+              onClick={() => setShowApiKeyDialog(false)}
+              disabled={submitting}
+            >
+              {t('common.cancel')}
+            </SntButton>
+          )}
+          <SntButton
+            variant="primary"
+            onClick={submitApiKey}
+            disabled={submitting || !apiKeyInput.trim()}
+          >
+            {submitting ? t('common.loading') : t('common.save')}
+          </SntButton>
+        </div>
+      </SntDialog>
+    </div>
+  )
+}

package/template/src/pages/OrganisationDetail.jsx

@@ -0,0 +1,263 @@
+import { useParams } from 'react-router-dom'
+import { useMemo, useState, useEffect } from 'react'
+import {
+  SntPageHeader,
+  SntBadge,
+  SntProgressBar,
+  SntCard,
+  SntMap,
+  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(() => {
+    const cached = sessionStorage.getItem(`org_${id}`)
+    if (cached) {
+      try {
+        return JSON.parse(cached)
+      } catch (e) {
+        return null
+      }
+    }
+    return null
+  }, [id])
+
+  const [devices, setDevices] = useState([])
+  const [mapLoading, setMapLoading] = useState(true)
+
+  useEffect(() => {
+    if (!organisation) return
+    setMapLoading(true)
+
+    fetch(`/api/devices/byFilter?fields=serial,name,lastLat,lastLng,lastAddress,lastLocationUpdate,deviceCategory`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        maxResults: 1000,
+        startIndex: 0,
+        filter: {
+          type: 'ORGANISATION',
+          ids: [String(id)],
+          includedNull: false,
+          includedNotNull: false
+        }
+      })
+    })
+      .then(r => r.ok ? r.json() : { data: [] })
+      .then(result => {
+        const items = Array.isArray(result) ? result : (result.data || [])
+        setDevices(items.filter(d => d.deviceCategory === 'TRACKER' && !(d.lastLat === 0 && d.lastLng === 0)))
+        setMapLoading(false)
+      })
+      .catch(() => {
+        setDevices([])
+        setMapLoading(false)
+      })
+  }, [organisation, id])
+
+  const getTypeBadgeVariant = (type) => {
+    switch (type?.toUpperCase()) {
+      case 'PARTNER': return 'success'
+      case 'SYSTEM': return 'warning'
+      default: return 'info'
+    }
+  }
+
+  // Format a value for display
+  const formatValue = (value) => {
+    if (value === null || value === undefined) return '-'
+    if (typeof value === 'boolean') return value ? t('common.yes') : t('common.no')
+    if (typeof value === 'number') return formatNumber(value, intlLocale)
+    if (typeof value === 'object') return JSON.stringify(value, null, 2)
+    return String(value)
+  }
+
+  // Flatten an object into key-value pairs
+  const flattenObject = (obj, prefix = '') => {
+    const result = []
+    for (const [key, value] of Object.entries(obj)) {
+      const fullKey = prefix ? `${prefix}.${key}` : key
+      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        result.push(...flattenObject(value, fullKey))
+      } else {
+        result.push({ key: fullKey, value })
+      }
+    }
+    return result
+  }
+
+  // Group fields by category
+  const categorizeFields = (org) => {
+    const basicInfo = []
+    const statistics = []
+    const metrics = []
+    const other = []
+
+    const allFields = flattenObject(org)
+
+    for (const field of allFields) {
+      const key = field.key.toLowerCase()
+      if (key.startsWith('statistics.metrics.')) {
+        metrics.push({
+          ...field,
+          label: field.key.replace('statistics.metrics.', '').replace(/_/g, ' ')
+        })
+      } else if (key.startsWith('statistics.')) {
+        statistics.push({
+          ...field,
+          label: field.key.replace('statistics.', '').replace(/([A-Z])/g, ' $1').trim()
+        })
+      } else if (['id', 'name', 'organisationtype', 'locked', 'platformplan', 'region', 'segment'].includes(key)) {
+        basicInfo.push({
+          ...field,
+          label: field.key.replace(/([A-Z])/g, ' $1').trim()
+        })
+      } else {
+        other.push({
+          ...field,
+          label: field.key.replace(/([A-Z])/g, ' $1').trim()
+        })
+      }
+    }
+
+    return { basicInfo, statistics, metrics, other }
+  }
+
+  if (!organisation) {
+    return (
+      <div className="page-container">
+        <SntPageHeader title={t('orgDetail.notFound')} backTo="/" />
+        <div className="empty-state">
+          <h3>{t('orgDetail.notAvailable')}</h3>
+          <p>{t('orgDetail.goBackPrompt')}</p>
+        </div>
+      </div>
+    )
+  }
+
+  const { basicInfo, statistics, metrics, other } = categorizeFields(organisation)
+
+  const renderField = (field) => {
+    const { key, value, label } = field
+    const lowerKey = key.toLowerCase()
+
+    // Special rendering for specific fields
+    if (lowerKey === 'organisationtype') {
+      return (
+        <div key={key} className="org-detail-field">
+          <span className="org-detail-label">{label}</span>
+          <span className="org-detail-value">
+            <SntBadge
+              variant={getTypeBadgeVariant(value)}
+              text={value || 'NORMAL'}
+            />
+          </span>
+        </div>
+      )
+    }
+
+    if (lowerKey.includes('online_ratio') || lowerKey.includes('onlineratio')) {
+      return (
+        <div key={key} className="org-detail-field">
+          <span className="org-detail-label">{label}</span>
+          <span className="org-detail-value">
+            <SntProgressBar value={value} variant="auto" showLabel />
+          </span>
+        </div>
+      )
+    }
+
+    if (lowerKey === 'locked') {
+      return (
+        <div key={key} className="org-detail-field">
+          <span className="org-detail-label">{label}</span>
+          <span className="org-detail-value">
+            <SntBadge
+              variant={value ? 'danger' : 'success'}
+              text={value ? t('orgDetail.locked') : t('orgDetail.active')}
+            />
+          </span>
+        </div>
+      )
+    }
+
+    return (
+      <div key={key} className="org-detail-field">
+        <span className="org-detail-label">{label}</span>
+        <span className="org-detail-value">{formatValue(value)}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="page-container">
+      <SntPageHeader
+        title={organisation.name}
+        backTo="/"
+      >
+        <SntBadge
+          variant={getTypeBadgeVariant(organisation.organisationType)}
+          text={organisation.organisationType || 'NORMAL'}
+        />
+      </SntPageHeader>
+
+      <SntCard title={`Trackers (${mapLoading ? '...' : devices.filter(d => d.lastLat != null).length})`}>
+        {mapLoading ? (
+          <div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}>
+            <SntSpinner size="medium" />
+          </div>
+        ) : (
+          <SntMap
+            mapboxKey={config.mapboxKey}
+            locationiqKey={config.locationiqKey}
+            height="500px"
+            devices={devices}
+            orgId={id}
+            showGeozones={true}
+            center={[50.85, 4.35]}
+            zoom={6}
+          />
+        )}
+      </SntCard>
+
+      {basicInfo.length > 0 && (
+        <SntCard title={t('orgDetail.basicInfo')}>
+          <div className="org-detail-grid">
+            {basicInfo.map(renderField)}
+          </div>
+        </SntCard>
+      )}
+
+      {metrics.length > 0 && (
+        <SntCard title={t('orgDetail.metrics')} style={{ marginTop: 24 }}>
+          <div className="org-detail-grid">
+            {metrics.map(renderField)}
+          </div>
+        </SntCard>
+      )}
+
+      {statistics.length > 0 && (
+        <SntCard title={t('orgDetail.statistics')} style={{ marginTop: 24 }}>
+          <div className="org-detail-grid">
+            {statistics.map(renderField)}
+          </div>
+        </SntCard>
+      )}
+
+      {other.length > 0 && (
+        <SntCard title={t('orgDetail.otherDetails')} style={{ marginTop: 24 }}>
+          <div className="org-detail-grid">
+            {other.map(renderField)}
+          </div>
+        </SntCard>
+      )}
+    </div>
+  )
+}