@freighttech/shipment-tracking 0.6.0

package/src/modules/shipment_tracking/components/ShipsGoConfigSection.tsx

@@ -0,0 +1,266 @@
+'use client'
+
+import * as React from 'react'
+import { apiCallOrThrow } from '@freighttech/ui/backend/utils/apiCall'
+import { flash } from '@freighttech/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@freighttech/ui/primitives/button'
+import { Input } from '@freighttech/ui/primitives/input'
+import { Label } from '@freighttech/ui/primitives/label'
+import { Checkbox } from '@freighttech/ui/primitives/checkbox'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@freighttech/ui/primitives/card'
+import { Badge } from '@freighttech/ui/primitives/badge'
+import { Loader2, Ship } from 'lucide-react'
+
+const DEFAULT_BASE_URL = 'https://api.shipsgo.com/v2'
+
+type ShipsGoConfigData = {
+  id: string
+  organizationId: string
+  tenantId: string
+  isEnabled: boolean
+  baseUrl: string
+  oceanEnabled: boolean
+  airEnabled: boolean
+  rateLimitRequests: number
+  rateLimitWindowSeconds: number
+  createdAt: string
+  updatedAt: string
+} | null
+
+type ShipsGoFormState = {
+  isEnabled: boolean
+  apiToken: string
+  baseUrl: string
+  oceanEnabled: boolean
+  airEnabled: boolean
+}
+
+const emptyForm: ShipsGoFormState = {
+  isEnabled: false,
+  apiToken: '',
+  baseUrl: DEFAULT_BASE_URL,
+  oceanEnabled: true,
+  airEnabled: true,
+}
+
+/**
+ * ShipsGo aggregator credentials — the fallback tracking provider for
+ * unsupported ocean carriers and air. One config per organization/tenant; the
+ * API token is write-only (never returned) and encrypted at rest.
+ */
+export function ShipsGoConfigSection() {
+  const t = useT()
+  const [config, setConfig] = React.useState<ShipsGoConfigData>(null)
+  const [form, setForm] = React.useState<ShipsGoFormState>(emptyForm)
+  const [loading, setLoading] = React.useState(true)
+  const [saving, setSaving] = React.useState(false)
+
+  const fetchConfig = React.useCallback(async () => {
+    setLoading(true)
+    try {
+      const { result } = await apiCallOrThrow<{ config: ShipsGoConfigData }>(
+        '/api/shipment_tracking/shipsgo-configs',
+      )
+      setConfig(result?.config ?? null)
+      if (result?.config) {
+        setForm({
+          isEnabled: result.config.isEnabled,
+          apiToken: '', // token is never returned from the API
+          baseUrl: result.config.baseUrl,
+          oceanEnabled: result.config.oceanEnabled,
+          airEnabled: result.config.airEnabled,
+        })
+      } else {
+        setForm(emptyForm)
+      }
+    } catch {
+      setConfig(null)
+      setForm(emptyForm)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    fetchConfig()
+  }, [fetchConfig])
+
+  const handleSave = React.useCallback(async () => {
+    // Token required to create; on edit an empty field keeps the stored token.
+    if (!config && !form.apiToken) {
+      flash(
+        t('shipment_tracking.shipsgo_config.validation.tokenRequired', 'API token is required'),
+        'error',
+      )
+      return
+    }
+
+    setSaving(true)
+    try {
+      const body: Record<string, unknown> = {
+        isEnabled: form.isEnabled,
+        baseUrl: form.baseUrl || DEFAULT_BASE_URL,
+        oceanEnabled: form.oceanEnabled,
+        airEnabled: form.airEnabled,
+        apiToken: form.apiToken ? form.apiToken : '__UNCHANGED__',
+      }
+
+      await apiCallOrThrow('/api/shipment_tracking/shipsgo-configs', {
+        method: 'PUT',
+        body: JSON.stringify(body),
+      })
+
+      flash(t('shipment_tracking.shipsgo_config.flash.saved', 'ShipsGo configuration saved'), 'success')
+      fetchConfig()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to save'
+      flash(message, 'error')
+    } finally {
+      setSaving(false)
+    }
+  }, [form, config, t, fetchConfig])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        handleSave()
+      }
+    },
+    [handleSave],
+  )
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Ship className="h-5 w-5" />
+            {t('shipment_tracking.shipsgo_config.title', 'ShipsGo Aggregator')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Ship className="h-5 w-5" />
+            <CardTitle>{t('shipment_tracking.shipsgo_config.title', 'ShipsGo Aggregator')}</CardTitle>
+          </div>
+          <div className="flex items-center gap-2">
+            {config ? (
+              <>
+                <Badge variant="outline">
+                  {t('shipment_tracking.shipsgo_config.status.configured', 'Configured')}
+                </Badge>
+                <Badge variant={config.isEnabled ? 'default' : 'secondary'}>
+                  {config.isEnabled
+                    ? t('shipment_tracking.shipsgo_config.status.enabled', 'Enabled')
+                    : t('shipment_tracking.shipsgo_config.status.disabled', 'Disabled')}
+                </Badge>
+              </>
+            ) : (
+              <Badge variant="secondary">
+                {t('shipment_tracking.shipsgo_config.status.notConfigured', 'Not Configured')}
+              </Badge>
+            )}
+          </div>
+        </div>
+        <CardDescription>
+          {t(
+            'shipment_tracking.shipsgo_config.description',
+            'Configure the ShipsGo API token to enable fallback tracking for ocean carriers without a direct adapter and for air shipments. Registrations are billed per shipment by ShipsGo.',
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent onKeyDown={handleKeyDown}>
+        <div className="grid gap-4">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="shipsgoEnabled"
+              checked={form.isEnabled}
+              onCheckedChange={(checked) => setForm((prev) => ({ ...prev, isEnabled: checked === true }))}
+            />
+            <Label htmlFor="shipsgoEnabled" className="cursor-pointer font-medium">
+              {t('shipment_tracking.shipsgo_config.fields.isEnabled', 'Enable ShipsGo Fallback')}
+            </Label>
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="shipsgoToken">
+              {t('shipment_tracking.shipsgo_config.fields.apiToken', 'API Token')}
+            </Label>
+            <Input
+              id="shipsgoToken"
+              type="password"
+              value={form.apiToken}
+              onChange={(e) => setForm((prev) => ({ ...prev, apiToken: e.target.value }))}
+              placeholder={config ? '••••••••' : 'X-Shipsgo-User-Token'}
+            />
+            <p className="text-xs text-muted-foreground">
+              {t(
+                'shipment_tracking.shipsgo_config.hints.apiToken',
+                'Your token is encrypted and stored securely. Leave blank to keep the current token.',
+              )}
+            </p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="shipsgoOcean"
+                checked={form.oceanEnabled}
+                onCheckedChange={(checked) => setForm((prev) => ({ ...prev, oceanEnabled: checked === true }))}
+              />
+              <Label htmlFor="shipsgoOcean" className="cursor-pointer font-medium">
+                {t('shipment_tracking.shipsgo_config.fields.oceanEnabled', 'Ocean Fallback')}
+              </Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="shipsgoAir"
+                checked={form.airEnabled}
+                onCheckedChange={(checked) => setForm((prev) => ({ ...prev, airEnabled: checked === true }))}
+              />
+              <Label htmlFor="shipsgoAir" className="cursor-pointer font-medium">
+                {t('shipment_tracking.shipsgo_config.fields.airEnabled', 'Air Tracking')}
+              </Label>
+            </div>
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="shipsgoBaseUrl">
+              {t('shipment_tracking.shipsgo_config.fields.baseUrl', 'API Base URL')}
+            </Label>
+            <Input
+              id="shipsgoBaseUrl"
+              value={form.baseUrl}
+              onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+              placeholder={DEFAULT_BASE_URL}
+            />
+            <p className="text-xs text-muted-foreground">
+              {t('shipment_tracking.shipsgo_config.hints.baseUrl', `Default: ${DEFAULT_BASE_URL}`)}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2 pt-2">
+            <Button onClick={handleSave} disabled={saving}>
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {t('shipment_tracking.shipsgo_config.actions.save', 'Save Configuration')}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ShipsGoConfigSection

package/src/modules/shipment_tracking/components/TimestampCell.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@freighttech/ui/primitives/tooltip'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type TimestampEntry = {
+  value: string
+  offset: string | null
+  source: 'carrier_api' | 'manual' | 'ais' | 'port' | 'edi'
+  updatedAt: string
+  sourceEventId?: string | null
+}
+
+type TimestampCellProps = {
+  timestamps: TimestampEntry[] | null | undefined
+  type: 'ETD' | 'ETA' | 'ATD' | 'ATA'
+  format?: 'date' | 'datetime'
+}
+
+const SOURCE_LABELS: Record<string, string> = {
+  carrier_api: 'Carrier API',
+  manual: 'Manual',
+  ais: 'AIS',
+  port: 'Port',
+  edi: 'EDI',
+}
+
+const SOURCE_COLORS: Record<string, string> = {
+  carrier_api: 'bg-blue-100 text-blue-700',
+  manual: 'bg-purple-100 text-purple-700',
+  ais: 'bg-green-100 text-green-700',
+  port: 'bg-orange-100 text-orange-700',
+  edi: 'bg-gray-100 text-gray-700',
+}
+
+function formatTimestamp(value: string, offset: string | null, format: 'date' | 'datetime'): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+
+  if (format === 'date') {
+    return date.toLocaleDateString()
+  }
+
+  // Include time
+  const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+  const dateStr = date.toLocaleDateString()
+  const offsetStr = offset ? ` (${offset})` : ''
+  return `${dateStr} ${timeStr}${offsetStr}`
+}
+
+function formatUpdatedAt(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function getLatestTimestamp(timestamps: TimestampEntry[]): TimestampEntry | null {
+  if (timestamps.length === 0) return null
+  return timestamps.reduce((latest, entry) =>
+    entry.updatedAt > latest.updatedAt ? entry : latest
+  )
+}
+
+export function TimestampCell({ timestamps, type, format = 'date' }: TimestampCellProps) {
+  const t = useT()
+
+  if (!timestamps || timestamps.length === 0) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  const latest = getLatestTimestamp(timestamps)
+  if (!latest) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  const primaryValue = formatTimestamp(latest.value, latest.offset, format)
+  const hasHistory = timestamps.length > 1
+
+  // Sort by updatedAt descending (newest first)
+  const sortedHistory = [...timestamps].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={200}>
+        <TooltipTrigger asChild>
+          <span className={`cursor-help ${hasHistory ? 'border-b border-dashed border-muted-foreground/50' : ''}`}>
+            {primaryValue}
+            {hasHistory && (
+              <span className="ml-1 text-xs text-muted-foreground">
+                ({timestamps.length})
+              </span>
+            )}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" align="start" className="max-w-sm p-0">
+          <div className="p-2 space-y-2">
+            <div className="text-xs font-medium text-muted-foreground border-b pb-1 mb-2">
+              {t(`shipment_tracking.timestamps.${type.toLowerCase()}History`, `${type} History`)}
+            </div>
+            <div className="space-y-1.5 max-h-64 overflow-y-auto">
+              {sortedHistory.map((entry, index) => {
+                const isLatest = entry === latest
+                return (
+                  <div
+                    key={`${entry.value}-${entry.updatedAt}`}
+                    className={`text-xs rounded p-1.5 ${isLatest ? 'bg-accent' : 'bg-muted/50'}`}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className={`font-medium ${isLatest ? 'text-foreground' : 'text-muted-foreground'}`}>
+                        {formatTimestamp(entry.value, entry.offset, 'datetime')}
+                      </span>
+                      <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${SOURCE_COLORS[entry.source] || 'bg-gray-100 text-gray-700'}`}>
+                        {SOURCE_LABELS[entry.source] || entry.source}
+                      </span>
+                    </div>
+                    <div className="text-[10px] text-muted-foreground mt-0.5">
+                      {t('shipment_tracking.timestamps.updatedAt', 'Updated')}: {formatUpdatedAt(entry.updatedAt)}
+                      {isLatest && (
+                        <span className="ml-1 text-primary font-medium">
+                          ({t('shipment_tracking.timestamps.latest', 'latest')})
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+export default TimestampCell