@freighttech/shipment-tracking 0.6.0

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

@@ -0,0 +1,236 @@
+"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 CombinedEntry = TimestampEntry & {
+  isActual: boolean
+}
+
+type CombinedTimestampCellProps = {
+  estimatedTimestamps: TimestampEntry[] | null | undefined
+  actualTimestamps: TimestampEntry[] | null | undefined
+  label: 'ETD/ATD' | 'ETA/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 formatDate(date: Date): string {
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  return `${day}/${month}/${year}`
+}
+
+function FormattedDate({ date }: { date: Date }) {
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  return (
+    <>
+      {day}<span className="opacity-50">/</span>{month}<span className="opacity-50">/</span>{year}
+    </>
+  )
+}
+
+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 formatDate(date)
+  }
+
+  // Include time
+  const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+  const dateStr = formatDate(date)
+  const offsetStr = offset ? ` (${offset})` : ''
+  return `${dateStr} ${timeStr}${offsetStr}`
+}
+
+function FormattedTimestamp({ value, offset, format }: { value: string; offset: string | null; format: 'date' | 'datetime' }) {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return <>-</>
+
+  if (format === 'date') {
+    return <FormattedDate date={date} />
+  }
+
+  const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+  const offsetStr = offset ? ` (${offset})` : ''
+  return (
+    <>
+      <FormattedDate date={date} /> {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 combineTimestamps(
+  estimatedTimestamps: TimestampEntry[] | null | undefined,
+  actualTimestamps: TimestampEntry[] | null | undefined
+): CombinedEntry[] {
+  const combined: CombinedEntry[] = []
+
+  if (estimatedTimestamps) {
+    for (const entry of estimatedTimestamps) {
+      combined.push({ ...entry, isActual: false })
+    }
+  }
+
+  if (actualTimestamps) {
+    for (const entry of actualTimestamps) {
+      combined.push({ ...entry, isActual: true })
+    }
+  }
+
+  return combined
+}
+
+function getLatestEntry(entries: CombinedEntry[]): CombinedEntry | null {
+  if (entries.length === 0) return null
+  return entries.reduce((latest, entry) =>
+    entry.updatedAt > latest.updatedAt ? entry : latest
+  )
+}
+
+export function CombinedTimestampCell({
+  estimatedTimestamps,
+  actualTimestamps,
+  label,
+  format = 'date',
+}: CombinedTimestampCellProps) {
+  const t = useT()
+
+  const combined = combineTimestamps(estimatedTimestamps, actualTimestamps)
+
+  if (combined.length === 0) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  const latest = getLatestEntry(combined)
+  if (!latest) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  const hasHistory = combined.length > 1
+
+  // Sort by updatedAt descending (newest first)
+  const sortedHistory = [...combined].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+
+  // Badge for estimated vs actual
+  const typeBadgeClass = latest.isActual
+    ? 'bg-green-100 text-green-700'
+    : 'bg-gray-100 text-gray-600'
+  const typeBadgeLabel = latest.isActual
+    ? t('shipment_tracking.timestamps.actual', 'Actual')
+    : t('shipment_tracking.timestamps.estimated', 'Est.')
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={200}>
+        <TooltipTrigger asChild>
+          <span className={`inline-flex items-center gap-1.5 cursor-help ${hasHistory ? 'border-b border-dashed border-muted-foreground/50' : ''}`}>
+            <span><FormattedTimestamp value={latest.value} offset={latest.offset} format={format} /></span>
+            <span className={`inline-flex items-center rounded px-1 py-0.5 text-[10px] font-medium ${typeBadgeClass}`}>
+              {typeBadgeLabel}
+            </span>
+            {hasHistory && (
+              <span className="text-[10px] text-muted-foreground">
+                ({combined.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.${label.replace('/', '_').toLowerCase()}History`, `${label} History`)}
+            </div>
+            <div className="space-y-1.5 max-h-64 overflow-y-auto">
+              {sortedHistory.map((entry, index) => {
+                const isLatest = entry === latest
+                const entryTypeBadgeClass = entry.isActual
+                  ? 'bg-green-100 text-green-700'
+                  : 'bg-slate-200 text-slate-700'
+                const entryTypeBadgeLabel = entry.isActual
+                  ? t('shipment_tracking.timestamps.actual', 'Actual')
+                  : t('shipment_tracking.timestamps.estimated', 'Est.')
+
+                return (
+                  <div
+                    key={`${entry.value}-${entry.updatedAt}-${index}`}
+                    className={`text-xs rounded p-1.5 ${isLatest ? 'bg-accent' : 'bg-muted'}`}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="font-medium text-foreground">
+                        {formatTimestamp(entry.value, entry.offset, 'datetime')}
+                      </span>
+                      <div className="flex items-center gap-1">
+                        <span className={`inline-flex items-center rounded px-1 py-0.5 text-[10px] font-medium ${entryTypeBadgeClass}`}>
+                          {entryTypeBadgeLabel}
+                        </span>
+                        <span className={`inline-flex items-center rounded px-1 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>
+                    <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 CombinedTimestampCell

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

@@ -0,0 +1,235 @@
+'use client'
+
+import * as React from 'react'
+import { useState, useCallback } from 'react'
+import { MapPin, Building2, Navigation, ChevronDown, ChevronUp } from 'lucide-react'
+import { Input } from '@freighttech/ui/primitives/input'
+import { Label } from '@freighttech/ui/primitives/label'
+import { Button } from '@freighttech/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { FacilityLocation } from '../lib/location-types'
+
+/**
+ * Partial FacilityLocation for form input - all fields optional
+ */
+export type FacilityLocationInputValue = Partial<FacilityLocation>
+
+interface FacilityLocationInputProps {
+  value: FacilityLocationInputValue | null
+  onChange: (value: FacilityLocationInputValue | null) => void
+  label?: string
+  disabled?: boolean
+  /** Show facility code and coordinates by default (not collapsed) */
+  showAdvanced?: boolean
+}
+
+/**
+ * A form component for editing FacilityLocation data.
+ * 
+ * Primary fields (always visible):
+ * - Port/Terminal Name
+ * - UN/LOCODE
+ * - Country Code
+ * 
+ * Advanced fields (collapsible):
+ * - Facility Code + Provider (SMDG/BIC)
+ * - Address
+ * - Coordinates (lat/lng)
+ */
+export function FacilityLocationInput({
+  value,
+  onChange,
+  label,
+  disabled = false,
+  showAdvanced = false,
+}: FacilityLocationInputProps) {
+  const t = useT()
+  const [advancedOpen, setAdvancedOpen] = useState(showAdvanced)
+
+  const updateField = useCallback(
+    <K extends keyof FacilityLocation>(field: K, fieldValue: FacilityLocation[K]) => {
+      onChange({
+        ...value,
+        [field]: fieldValue,
+        source: 'manual',
+      })
+    },
+    [value, onChange]
+  )
+
+  const updateCoord = useCallback(
+    (coord: 'latitude' | 'longitude', numValue: number | null) => {
+      const currentCoords = value?.coords
+      const otherCoord = coord === 'latitude' ? currentCoords?.longitude : currentCoords?.latitude
+
+      // If both are null/undefined, set coords to null
+      if (numValue === null && (otherCoord === null || otherCoord === undefined)) {
+        onChange({
+          ...value,
+          coords: null,
+          source: 'manual',
+        })
+        return
+      }
+
+      onChange({
+        ...value,
+        coords: {
+          latitude: coord === 'latitude' ? (numValue ?? 0) : (currentCoords?.latitude ?? 0),
+          longitude: coord === 'longitude' ? (numValue ?? 0) : (currentCoords?.longitude ?? 0),
+        },
+        source: 'manual',
+      })
+    },
+    [value, onChange]
+  )
+
+  return (
+    <div className="space-y-4">
+      {label && (
+        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+          <MapPin className="h-4 w-4" />
+          {label}
+        </div>
+      )}
+
+      {/* Primary fields: Name, UN/LOCODE, Country */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label>{t('shipment_tracking.location.name', 'Port/Terminal Name')}</Label>
+          <Input
+            placeholder="Shanghai Port"
+            value={value?.name || ''}
+            onChange={(e) => updateField('name', e.target.value || '')}
+            disabled={disabled}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>{t('shipment_tracking.location.unlocode', 'UN/LOCODE')}</Label>
+          <Input
+            placeholder="CNSHA"
+            value={value?.unlocode || ''}
+            onChange={(e) => updateField('unlocode', e.target.value.toUpperCase() || null)}
+            disabled={disabled}
+            maxLength={5}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label>{t('shipment_tracking.location.country', 'Country Code')}</Label>
+        <Input
+          placeholder="CN"
+          value={value?.countryCode || ''}
+          onChange={(e) => updateField('countryCode', e.target.value.toUpperCase() || null)}
+          disabled={disabled}
+          maxLength={2}
+        />
+      </div>
+
+      {/* Advanced fields toggle */}
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="w-full justify-between"
+        onClick={() => setAdvancedOpen(!advancedOpen)}
+      >
+        <span className="flex items-center gap-2">
+          <Building2 className="h-4 w-4" />
+          {t('shipment_tracking.location.advancedDetails', 'Facility & Coordinates')}
+        </span>
+        {advancedOpen ? (
+          <ChevronUp className="h-4 w-4" />
+        ) : (
+          <ChevronDown className="h-4 w-4" />
+        )}
+      </Button>
+
+      {/* Advanced fields: Facility, Address, Coordinates */}
+      {advancedOpen && (
+        <div className="space-y-4 pt-2">
+          {/* Facility Code */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>{t('shipment_tracking.location.facilityCode', 'Facility Code')}</Label>
+              <Input
+                placeholder="DCT"
+                value={value?.facilityCode || ''}
+                onChange={(e) =>
+                  updateField('facilityCode', e.target.value.toUpperCase() || null)
+                }
+                disabled={disabled}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>{t('shipment_tracking.location.facilityProvider', 'Provider')}</Label>
+              <select
+                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                value={value?.facilityCodeListProvider || ''}
+                onChange={(e) =>
+                  updateField(
+                    'facilityCodeListProvider',
+                    (e.target.value as 'SMDG' | 'BIC') || null
+                  )
+                }
+                disabled={disabled}
+              >
+                <option value="">-</option>
+                <option value="SMDG">SMDG</option>
+                <option value="BIC">BIC</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Address */}
+          <div className="space-y-2">
+            <Label>{t('shipment_tracking.location.address', 'Address')}</Label>
+            <Input
+              placeholder="Terminal Road 123, Shanghai, China"
+              value={value?.address || ''}
+              onChange={(e) => updateField('address', e.target.value || null)}
+              disabled={disabled}
+            />
+          </div>
+
+          {/* Coordinates */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label className="flex items-center gap-1">
+                <Navigation className="h-3 w-3" />
+                {t('shipment_tracking.location.latitude', 'Latitude')}
+              </Label>
+              <Input
+                type="number"
+                step="0.000001"
+                placeholder="31.2304"
+                value={value?.coords?.latitude ?? ''}
+                onChange={(e) =>
+                  updateCoord('latitude', e.target.value ? parseFloat(e.target.value) : null)
+                }
+                disabled={disabled}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="flex items-center gap-1">
+                <Navigation className="h-3 w-3" />
+                {t('shipment_tracking.location.longitude', 'Longitude')}
+              </Label>
+              <Input
+                type="number"
+                step="0.000001"
+                placeholder="121.4737"
+                value={value?.coords?.longitude ?? ''}
+                onChange={(e) =>
+                  updateCoord('longitude', e.target.value ? parseFloat(e.target.value) : null)
+                }
+                disabled={disabled}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}