@open-mercato/core 0.4.2-canary-cf7d9b4116 → 0.4.2-canary-e6bf6a353e

package/src/modules/dashboards/widgets/dashboard/revenue-kpi/widget.client.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from 'react'
+import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { KpiCard, type KpiTrend } from '@open-mercato/ui/backend/charts'
+import {
+  DateRangeSelect,
+  InlineDateRangeSelect,
+  type DateRangePreset,
+  getComparisonLabelKey,
+} from '@open-mercato/ui/backend/date-range'
+import { DEFAULT_SETTINGS, hydrateSettings, type RevenueKpiSettings } from './config'
+import type { WidgetDataResponse } from '../../../services/widgetDataService'
+import { formatCurrency } from '../../../lib/formatters'
+
+async function fetchRevenueData(settings: RevenueKpiSettings): Promise<WidgetDataResponse> {
+  const body = {
+    entityType: 'sales:orders',
+    metric: {
+      field: 'grandTotalGrossAmount',
+      aggregate: 'sum',
+    },
+    dateRange: {
+      field: 'placedAt',
+      preset: settings.dateRange,
+    },
+    comparison: settings.showComparison ? { type: 'previous_period' } : undefined,
+  }
+
+  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+
+  if (!call.ok) {
+    const errorMsg = (call.result as Record<string, unknown>)?.error
+    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch revenue data')
+  }
+
+  return call.result as WidgetDataResponse
+}
+
+const RevenueKpiWidget: React.FC<DashboardWidgetComponentProps<RevenueKpiSettings>> = ({
+  mode,
+  settings = DEFAULT_SETTINGS,
+  onSettingsChange,
+  refreshToken,
+  onRefreshStateChange,
+}) => {
+  const t = useT()
+  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])
+  const [value, setValue] = React.useState<number | null>(null)
+  const [trend, setTrend] = React.useState<KpiTrend | undefined>(undefined)
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const refresh = React.useCallback(async () => {
+    onRefreshStateChange?.(true)
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await fetchRevenueData(hydrated)
+      setValue(data.value)
+      if (data.comparison) {
+        setTrend({
+          value: data.comparison.change,
+          direction: data.comparison.direction,
+        })
+      } else {
+        setTrend(undefined)
+      }
+    } catch (err) {
+      console.error('Failed to load revenue KPI data', err)
+      setError(t('dashboards.analytics.widgets.revenueKpi.error', 'Failed to load data'))
+    } finally {
+      setLoading(false)
+      onRefreshStateChange?.(false)
+    }
+  }, [hydrated, onRefreshStateChange, t])
+
+  React.useEffect(() => {
+    refresh().catch(() => {})
+  }, [refresh, refreshToken])
+
+  if (mode === 'settings') {
+    return (
+      <div className="space-y-4 text-sm">
+        <DateRangeSelect
+          id="revenue-kpi-date-range"
+          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}
+          value={hydrated.dateRange}
+          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+        <div className="space-y-1.5">
+          <label className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={hydrated.showComparison}
+              onChange={(e) => onSettingsChange({ ...hydrated, showComparison: e.target.checked })}
+              className="h-4 w-4 rounded border focus:ring-primary"
+            />
+            {t('dashboards.analytics.settings.showComparison', 'Show comparison')}
+          </label>
+        </div>
+      </div>
+    )
+  }
+
+  const comparisonLabelInfo = getComparisonLabelKey(hydrated.dateRange)
+  const comparisonLabel = hydrated.showComparison
+    ? t(comparisonLabelInfo.key, comparisonLabelInfo.fallback)
+    : undefined
+
+  return (
+    <KpiCard
+      value={value}
+      trend={trend}
+      comparisonLabel={comparisonLabel}
+      loading={loading}
+      error={error}
+      formatValue={formatCurrency}
+      headerAction={
+        <InlineDateRangeSelect
+          value={hydrated.dateRange}
+          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+      }
+    />
+  )
+}
+
+export default RevenueKpiWidget

package/src/modules/dashboards/widgets/dashboard/revenue-kpi/widget.ts

@@ -0,0 +1,24 @@
+import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
+import RevenueKpiWidget from './widget.client'
+import { DEFAULT_SETTINGS, hydrateSettings, type RevenueKpiSettings } from './config'
+
+const widget: DashboardWidgetModule<RevenueKpiSettings> = {
+  metadata: {
+    id: 'dashboards.analytics.revenueKpi',
+    title: 'Revenue',
+    description: 'Total revenue with period comparison',
+    features: ['analytics.view', 'sales.orders.view'],
+    defaultSize: 'sm',
+    defaultEnabled: false,
+    defaultSettings: DEFAULT_SETTINGS,
+    tags: ['analytics', 'sales', 'kpi'],
+    category: 'analytics',
+    icon: 'dollar-sign',
+    supportsRefresh: true,
+  },
+  Widget: RevenueKpiWidget,
+  hydrateSettings,
+  dehydrateSettings: (s) => ({ dateRange: s.dateRange, showComparison: s.showComparison }),
+}
+
+export default widget

package/src/modules/dashboards/widgets/dashboard/revenue-trend/config.ts

@@ -0,0 +1,24 @@
+import { type DateRangePreset, isValidDateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { type DateGranularity, isValidGranularity } from '../../../lib/aggregations'
+
+export type RevenueTrendSettings = {
+  dateRange: DateRangePreset
+  granularity: DateGranularity
+  showArea: boolean
+}
+
+export const DEFAULT_SETTINGS: RevenueTrendSettings = {
+  dateRange: 'last_30_days',
+  granularity: 'day',
+  showArea: true,
+}
+
+export function hydrateSettings(raw: unknown): RevenueTrendSettings {
+  if (!raw || typeof raw !== 'object') return { ...DEFAULT_SETTINGS }
+  const obj = raw as Record<string, unknown>
+  return {
+    dateRange: isValidDateRangePreset(obj.dateRange) ? obj.dateRange : DEFAULT_SETTINGS.dateRange,
+    granularity: isValidGranularity(obj.granularity) ? obj.granularity : DEFAULT_SETTINGS.granularity,
+    showArea: typeof obj.showArea === 'boolean' ? obj.showArea : DEFAULT_SETTINGS.showArea,
+  }
+}

package/src/modules/dashboards/widgets/dashboard/revenue-trend/widget.client.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from 'react'
+import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
+import { LineChart, type LineChartDataItem } from '@open-mercato/ui/backend/charts'
+import {
+  DateRangeSelect,
+  InlineDateRangeSelect,
+  type DateRangePreset,
+} from '@open-mercato/ui/backend/date-range'
+import type { DateGranularity } from '@open-mercato/shared/modules/analytics'
+import { DEFAULT_SETTINGS, hydrateSettings, type RevenueTrendSettings } from './config'
+import type { WidgetDataResponse } from '../../../services/widgetDataService'
+import { formatCurrencyCompact } from '../../../lib/formatters'
+
+async function fetchRevenueTrendData(settings: RevenueTrendSettings): Promise<WidgetDataResponse> {
+  const body = {
+    entityType: 'sales:orders',
+    metric: {
+      field: 'grandTotalGrossAmount',
+      aggregate: 'sum',
+    },
+    groupBy: {
+      field: 'placedAt',
+      granularity: settings.granularity,
+    },
+    dateRange: {
+      field: 'placedAt',
+      preset: settings.dateRange,
+    },
+  }
+
+  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+
+  if (!call.ok) {
+    const errorMsg = (call.result as Record<string, unknown>)?.error
+    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch revenue trend data')
+  }
+
+  return call.result as WidgetDataResponse
+}
+
+function formatDate(dateStr: string | null, granularity: DateGranularity, locale?: string): string {
+  if (!dateStr) return '--'
+  try {
+    const date = new Date(dateStr)
+    const localeStr = locale ?? undefined
+    switch (granularity) {
+      case 'day':
+      case 'week':
+        return date.toLocaleDateString(localeStr, { month: 'short', day: 'numeric' })
+      case 'month':
+        return date.toLocaleDateString(localeStr, { month: 'short', year: 'numeric' })
+      case 'quarter': {
+        const quarter = Math.floor(date.getMonth() / 3) + 1
+        return `Q${quarter} ${date.getFullYear()}`
+      }
+      case 'year':
+        return date.toLocaleDateString(localeStr, { year: 'numeric' })
+      default:
+        return date.toLocaleDateString(localeStr, { month: 'short', day: 'numeric' })
+    }
+  } catch {
+    return String(dateStr)
+  }
+}
+
+const GRANULARITY_OPTIONS: { value: DateGranularity; labelKey: string }[] = [
+  { value: 'day', labelKey: 'dashboards.analytics.granularity.day' },
+  { value: 'week', labelKey: 'dashboards.analytics.granularity.week' },
+  { value: 'month', labelKey: 'dashboards.analytics.granularity.month' },
+  { value: 'quarter', labelKey: 'dashboards.analytics.granularity.quarter' },
+  { value: 'year', labelKey: 'dashboards.analytics.granularity.year' },
+]
+
+function getAutoGranularity(dateRange: DateRangePreset): DateGranularity {
+  switch (dateRange) {
+    case 'today':
+    case 'yesterday':
+    case 'last_7_days':
+      return 'day'
+    case 'this_week':
+    case 'last_week':
+    case 'last_30_days':
+      return 'day'
+    case 'this_month':
+    case 'last_month':
+    case 'last_90_days':
+      return 'week'
+    case 'this_quarter':
+    case 'last_quarter':
+      return 'week'
+    case 'this_year':
+    case 'last_year':
+      return 'month'
+    default:
+      return 'day'
+  }
+}
+
+const RevenueTrendWidget: React.FC<DashboardWidgetComponentProps<RevenueTrendSettings>> = ({
+  mode,
+  settings = DEFAULT_SETTINGS,
+  onSettingsChange,
+  refreshToken,
+  onRefreshStateChange,
+}) => {
+  const t = useT()
+  const locale = useLocale()
+  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])
+  const [data, setData] = React.useState<LineChartDataItem[]>([])
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const refresh = React.useCallback(async () => {
+    onRefreshStateChange?.(true)
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchRevenueTrendData(hydrated)
+      const sortedData = [...result.data].sort((a, b) => {
+        const aTime = new Date(a.groupKey as string || 0).getTime()
+        const bTime = new Date(b.groupKey as string || 0).getTime()
+        return aTime - bTime
+      })
+      const chartData = sortedData.map((item) => ({
+        date: formatDate(item.groupKey as string | null, hydrated.granularity, locale),
+        Revenue: item.value ?? 0,
+      }))
+      setData(chartData)
+    } catch (err) {
+      console.error('Failed to load revenue trend data', err)
+      setError(t('dashboards.analytics.widgets.revenueTrend.error', 'Failed to load data'))
+    } finally {
+      setLoading(false)
+      onRefreshStateChange?.(false)
+    }
+  }, [hydrated, locale, onRefreshStateChange, t])
+
+  React.useEffect(() => {
+    refresh().catch(() => {})
+  }, [refresh, refreshToken])
+
+  if (mode === 'settings') {
+    return (
+      <div className="space-y-4 text-sm">
+        <DateRangeSelect
+          id="revenue-trend-date-range"
+          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}
+          value={hydrated.dateRange}
+          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+        <div className="space-y-1.5">
+          <label
+            htmlFor="revenue-trend-granularity"
+            className="text-xs font-semibold uppercase text-muted-foreground"
+          >
+            {t('dashboards.analytics.settings.granularity', 'Granularity')}
+          </label>
+          <select
+            id="revenue-trend-granularity"
+            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            value={hydrated.granularity}
+            onChange={(e) => onSettingsChange({ ...hydrated, granularity: e.target.value as DateGranularity })}
+          >
+            {GRANULARITY_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {t(opt.labelKey, opt.value)}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="space-y-1.5">
+          <label className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={hydrated.showArea}
+              onChange={(e) => onSettingsChange({ ...hydrated, showArea: e.target.checked })}
+              className="h-4 w-4 rounded border focus:ring-primary"
+            />
+            {t('dashboards.analytics.settings.showArea', 'Show area fill')}
+          </label>
+        </div>
+      </div>
+    )
+  }
+
+  const effectiveGranularity = hydrated.granularity === 'day' ? getAutoGranularity(hydrated.dateRange) : hydrated.granularity
+
+  return (
+    <div>
+      <div className="mb-2 flex justify-end">
+        <InlineDateRangeSelect
+          value={hydrated.dateRange}
+          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange, granularity: getAutoGranularity(dateRange) })}
+        />
+      </div>
+      <LineChart
+        data={data}
+        index="date"
+        categories={['Revenue']}
+        categoryLabels={{ Revenue: t('dashboards.analytics.widgets.topCustomers.column.revenue', 'Revenue') }}
+        loading={loading}
+        error={error}
+        showArea={hydrated.showArea}
+        valueFormatter={formatCurrencyCompact}
+        colors={['blue']}
+        emptyMessage={t('dashboards.analytics.widgets.revenueTrend.empty', 'No revenue data for this period')}
+      />
+    </div>
+  )
+}
+
+export default RevenueTrendWidget

package/src/modules/dashboards/widgets/dashboard/revenue-trend/widget.ts

@@ -0,0 +1,24 @@
+import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
+import RevenueTrendWidget from './widget.client'
+import { DEFAULT_SETTINGS, hydrateSettings, type RevenueTrendSettings } from './config'
+
+const widget: DashboardWidgetModule<RevenueTrendSettings> = {
+  metadata: {
+    id: 'dashboards.analytics.revenueTrend',
+    title: 'Revenue Trend',
+    description: 'Revenue over time with customizable granularity',
+    features: ['analytics.view', 'sales.orders.view'],
+    defaultSize: 'lg',
+    defaultEnabled: false,
+    defaultSettings: DEFAULT_SETTINGS,
+    tags: ['analytics', 'sales', 'chart'],
+    category: 'analytics',
+    icon: 'line-chart',
+    supportsRefresh: true,
+  },
+  Widget: RevenueTrendWidget,
+  hydrateSettings,
+  dehydrateSettings: (s) => ({ dateRange: s.dateRange, granularity: s.granularity, showArea: s.showArea }),
+}
+
+export default widget

package/src/modules/dashboards/widgets/dashboard/sales-by-region/config.ts

@@ -0,0 +1,21 @@
+import { type DateRangePreset, isValidDateRangePreset } from '@open-mercato/ui/backend/date-range'
+
+export type SalesByRegionSettings = {
+  dateRange: DateRangePreset
+  limit: number
+}
+
+export const DEFAULT_SETTINGS: SalesByRegionSettings = {
+  dateRange: 'this_month',
+  limit: 10,
+}
+
+export function hydrateSettings(raw: unknown): SalesByRegionSettings {
+  if (!raw || typeof raw !== 'object') return { ...DEFAULT_SETTINGS }
+  const obj = raw as Record<string, unknown>
+  const parsedLimit = Number(obj.limit)
+  return {
+    dateRange: isValidDateRangePreset(obj.dateRange) ? obj.dateRange : DEFAULT_SETTINGS.dateRange,
+    limit: Number.isFinite(parsedLimit) && parsedLimit >= 1 && parsedLimit <= 20 ? Math.floor(parsedLimit) : DEFAULT_SETTINGS.limit,
+  }
+}

package/src/modules/dashboards/widgets/dashboard/sales-by-region/widget.client.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import * as React from 'react'
+import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { BarChart, type BarChartDataItem } from '@open-mercato/ui/backend/charts'
+import { DateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { DEFAULT_SETTINGS, hydrateSettings, type SalesByRegionSettings } from './config'
+import type { WidgetDataResponse } from '../../../services/widgetDataService'
+import { formatCurrencyCompact } from '../../../lib/formatters'
+
+async function fetchSalesByRegionData(settings: SalesByRegionSettings): Promise<WidgetDataResponse> {
+  const body = {
+    entityType: 'sales:orders',
+    metric: {
+      field: 'grandTotalGrossAmount',
+      aggregate: 'sum',
+    },
+    groupBy: {
+      field: 'shippingAddressSnapshot.region',
+      limit: settings.limit,
+    },
+    dateRange: {
+      field: 'placedAt',
+      preset: settings.dateRange,
+    },
+  }
+
+  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+
+  if (!call.ok) {
+    const errorMsg = (call.result as Record<string, unknown>)?.error
+    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch sales by region data')
+  }
+
+  return call.result as WidgetDataResponse
+}
+
+const SalesByRegionWidget: React.FC<DashboardWidgetComponentProps<SalesByRegionSettings>> = ({
+  mode,
+  settings = DEFAULT_SETTINGS,
+  onSettingsChange,
+  refreshToken,
+  onRefreshStateChange,
+}) => {
+  const t = useT()
+  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])
+  const [data, setData] = React.useState<BarChartDataItem[]>([])
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const refresh = React.useCallback(async () => {
+    onRefreshStateChange?.(true)
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchSalesByRegionData(hydrated)
+      const chartData = result.data.map((item) => ({
+        region: String(item.groupKey || t('dashboards.analytics.labels.unknown', 'Unknown')),
+        Revenue: item.value ?? 0,
+      }))
+      setData(chartData)
+    } catch (err) {
+      console.error('Failed to load sales by region data', err)
+      setError(t('dashboards.analytics.widgets.salesByRegion.error', 'Failed to load data'))
+    } finally {
+      setLoading(false)
+      onRefreshStateChange?.(false)
+    }
+  }, [hydrated, onRefreshStateChange, t])
+
+  React.useEffect(() => {
+    refresh().catch(() => {})
+  }, [refresh, refreshToken])
+
+  if (mode === 'settings') {
+    return (
+      <div className="space-y-4 text-sm">
+        <DateRangeSelect
+          id="sales-by-region-date-range"
+          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}
+          value={hydrated.dateRange}
+          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+        <div className="space-y-1.5">
+          <label
+            htmlFor="sales-by-region-limit"
+            className="text-xs font-semibold uppercase text-muted-foreground"
+          >
+            {t('dashboards.analytics.settings.limit', 'Number of items')}
+          </label>
+          <input
+            id="sales-by-region-limit"
+            type="number"
+            min={1}
+            max={20}
+            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            value={hydrated.limit}
+            onChange={(e) => {
+              const next = Number(e.target.value)
+              onSettingsChange({ ...hydrated, limit: Number.isFinite(next) ? next : hydrated.limit })
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <BarChart
+      data={data}
+      index="region"
+      categories={['Revenue']}
+      categoryLabels={{ Revenue: t('dashboards.analytics.widgets.topCustomers.column.revenue', 'Revenue') }}
+      loading={loading}
+      error={error}
+      layout="horizontal"
+      valueFormatter={formatCurrencyCompact}
+      colors={['cyan']}
+      showLegend={false}
+      emptyMessage={t('dashboards.analytics.widgets.salesByRegion.empty', 'No regional sales data for this period')}
+    />
+  )
+}
+
+export default SalesByRegionWidget

package/src/modules/dashboards/widgets/dashboard/sales-by-region/widget.ts

@@ -0,0 +1,24 @@
+import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
+import SalesByRegionWidget from './widget.client'
+import { DEFAULT_SETTINGS, hydrateSettings, type SalesByRegionSettings } from './config'
+
+const widget: DashboardWidgetModule<SalesByRegionSettings> = {
+  metadata: {
+    id: 'dashboards.analytics.salesByRegion',
+    title: 'Sales by Region',
+    description: 'Revenue distribution by shipping region',
+    features: ['analytics.view', 'sales.orders.view'],
+    defaultSize: 'md',
+    defaultEnabled: false,
+    defaultSettings: DEFAULT_SETTINGS,
+    tags: ['analytics', 'sales', 'geography', 'chart'],
+    category: 'analytics',
+    icon: 'map-pin',
+    supportsRefresh: true,
+  },
+  Widget: SalesByRegionWidget,
+  hydrateSettings,
+  dehydrateSettings: (s) => ({ dateRange: s.dateRange, limit: s.limit }),
+}
+
+export default widget

package/src/modules/dashboards/widgets/dashboard/top-customers/config.ts

@@ -0,0 +1,21 @@
+import { type DateRangePreset, isValidDateRangePreset } from '@open-mercato/ui/backend/date-range'
+
+export type TopCustomersSettings = {
+  dateRange: DateRangePreset
+  limit: number
+}
+
+export const DEFAULT_SETTINGS: TopCustomersSettings = {
+  dateRange: 'this_month',
+  limit: 10,
+}
+
+export function hydrateSettings(raw: unknown): TopCustomersSettings {
+  if (!raw || typeof raw !== 'object') return { ...DEFAULT_SETTINGS }
+  const obj = raw as Record<string, unknown>
+  const parsedLimit = Number(obj.limit)
+  return {
+    dateRange: isValidDateRangePreset(obj.dateRange) ? obj.dateRange : DEFAULT_SETTINGS.dateRange,
+    limit: Number.isFinite(parsedLimit) && parsedLimit >= 1 && parsedLimit <= 20 ? Math.floor(parsedLimit) : DEFAULT_SETTINGS.limit,
+  }
+}