@open-mercato/core 0.4.2-canary-10c7a8bf2a → 0.4.2-canary-e6bf6a353e

package/src/modules/dashboards/widgets/dashboard/orders-by-status/config.ts

@@ -0,0 +1,20 @@
+import { type DateRangePreset, isValidDateRangePreset } from '@open-mercato/ui/backend/date-range'
+
+export type OrdersByStatusSettings = {
+  dateRange: DateRangePreset
+  variant: 'pie' | 'donut'
+}
+
+export const DEFAULT_SETTINGS: OrdersByStatusSettings = {
+  dateRange: 'this_month',
+  variant: 'donut',
+}
+
+export function hydrateSettings(raw: unknown): OrdersByStatusSettings {
+  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,
+    variant: obj.variant === 'pie' || obj.variant === 'donut' ? obj.variant : DEFAULT_SETTINGS.variant,
+  }
+}

package/src/modules/dashboards/widgets/dashboard/orders-by-status/widget.client.tsx

@@ -0,0 +1,154 @@
+"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 { PieChart, type PieChartDataItem } from '@open-mercato/ui/backend/charts'
+import {
+  DateRangeSelect,
+  InlineDateRangeSelect,
+  type DateRangePreset,
+} from '@open-mercato/ui/backend/date-range'
+import { DEFAULT_SETTINGS, hydrateSettings, type OrdersByStatusSettings } from './config'
+import type { WidgetDataResponse } from '../../../services/widgetDataService'
+
+async function fetchOrdersByStatusData(settings: OrdersByStatusSettings): Promise<WidgetDataResponse> {
+  const body = {
+    entityType: 'sales:orders',
+    metric: {
+      field: 'id',
+      aggregate: 'count',
+    },
+    groupBy: {
+      field: 'status',
+    },
+    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 orders by status data')
+  }
+
+  return call.result as WidgetDataResponse
+}
+
+const ORDER_STATUS_KEYS: Record<string, string> = {
+  draft: 'dashboards.analytics.orderStatus.draft',
+  pending: 'dashboards.analytics.orderStatus.pending',
+  confirmed: 'dashboards.analytics.orderStatus.confirmed',
+  processing: 'dashboards.analytics.orderStatus.processing',
+  shipped: 'dashboards.analytics.orderStatus.shipped',
+  delivered: 'dashboards.analytics.orderStatus.delivered',
+  cancelled: 'dashboards.analytics.orderStatus.cancelled',
+}
+
+function formatStatusLabel(status: string | null, t: (key: string, fallback: string) => string): string {
+  if (!status) return t('dashboards.analytics.labels.unknown', 'Unknown')
+  const key = ORDER_STATUS_KEYS[status.toLowerCase()]
+  if (key) {
+    return t(key, status.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()))
+  }
+  return status.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
+}
+
+const OrdersByStatusWidget: React.FC<DashboardWidgetComponentProps<OrdersByStatusSettings>> = ({
+  mode,
+  settings = DEFAULT_SETTINGS,
+  onSettingsChange,
+  refreshToken,
+  onRefreshStateChange,
+}) => {
+  const t = useT()
+  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])
+  const [data, setData] = React.useState<PieChartDataItem[]>([])
+  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 fetchOrdersByStatusData(hydrated)
+      const chartData = result.data.map((item) => ({
+        name: formatStatusLabel(item.groupKey as string | null, t),
+        value: item.value ?? 0,
+      }))
+      setData(chartData)
+    } catch (err) {
+      console.error('Failed to load orders by status data', err)
+      setError(t('dashboards.analytics.widgets.ordersByStatus.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="orders-by-status-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="orders-by-status-variant"
+            className="text-xs font-semibold uppercase text-muted-foreground"
+          >
+            {t('dashboards.analytics.settings.chartVariant', 'Chart Style')}
+          </label>
+          <select
+            id="orders-by-status-variant"
+            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.variant}
+            onChange={(e) => onSettingsChange({ ...hydrated, variant: e.target.value as 'pie' | 'donut' })}
+          >
+            <option value="donut">{t('dashboards.analytics.chartVariant.donut', 'Donut')}</option>
+            <option value="pie">{t('dashboards.analytics.chartVariant.pie', 'Pie')}</option>
+          </select>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex justify-end mb-2">
+        <InlineDateRangeSelect
+          value={hydrated.dateRange}
+          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+      </div>
+      <div className="flex-1 min-h-0">
+        <PieChart
+          data={data}
+          loading={loading}
+          error={error}
+          variant={hydrated.variant}
+          colors={['blue', 'emerald', 'amber', 'rose', 'violet', 'cyan']}
+          emptyMessage={t('dashboards.analytics.widgets.ordersByStatus.empty', 'No orders for this period')}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default OrdersByStatusWidget

package/src/modules/dashboards/widgets/dashboard/orders-by-status/widget.ts

@@ -0,0 +1,24 @@
+import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
+import OrdersByStatusWidget from './widget.client'
+import { DEFAULT_SETTINGS, hydrateSettings, type OrdersByStatusSettings } from './config'
+
+const widget: DashboardWidgetModule<OrdersByStatusSettings> = {
+  metadata: {
+    id: 'dashboards.analytics.ordersByStatus',
+    title: 'Orders by Status',
+    description: 'Distribution of orders by status',
+    features: ['analytics.view', 'sales.orders.view'],
+    defaultSize: 'sm',
+    defaultEnabled: false,
+    defaultSettings: DEFAULT_SETTINGS,
+    tags: ['analytics', 'sales', 'chart'],
+    category: 'analytics',
+    icon: 'pie-chart',
+    supportsRefresh: true,
+  },
+  Widget: OrdersByStatusWidget,
+  hydrateSettings,
+  dehydrateSettings: (s) => ({ dateRange: s.dateRange, variant: s.variant }),
+}
+
+export default widget

package/src/modules/dashboards/widgets/dashboard/orders-kpi/config.ts

@@ -0,0 +1,20 @@
+import { type DateRangePreset, isValidDateRangePreset } from '@open-mercato/ui/backend/date-range'
+
+export type OrdersKpiSettings = {
+  dateRange: DateRangePreset
+  showComparison: boolean
+}
+
+export const DEFAULT_SETTINGS: OrdersKpiSettings = {
+  dateRange: 'this_month',
+  showComparison: true,
+}
+
+export function hydrateSettings(raw: unknown): OrdersKpiSettings {
+  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,
+    showComparison: typeof obj.showComparison === 'boolean' ? obj.showComparison : DEFAULT_SETTINGS.showComparison,
+  }
+}

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

@@ -0,0 +1,133 @@
+"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 OrdersKpiSettings } from './config'
+import type { WidgetDataResponse } from '../../../services/widgetDataService'
+
+async function fetchOrdersData(settings: OrdersKpiSettings): Promise<WidgetDataResponse> {
+  const body = {
+    entityType: 'sales:orders',
+    metric: {
+      field: 'id',
+      aggregate: 'count',
+    },
+    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 orders data')
+  }
+
+  return call.result as WidgetDataResponse
+}
+
+const OrdersKpiWidget: React.FC<DashboardWidgetComponentProps<OrdersKpiSettings>> = ({
+  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 fetchOrdersData(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 orders KPI data', err)
+      setError(t('dashboards.analytics.widgets.ordersKpi.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="orders-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}
+      headerAction={
+        <InlineDateRangeSelect
+          value={hydrated.dateRange}
+          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+      }
+    />
+  )
+}
+
+export default OrdersKpiWidget

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

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

package/src/modules/dashboards/widgets/dashboard/pipeline-summary/config.ts

@@ -0,0 +1,17 @@
+import { type DateRangePreset, isValidDateRangePreset } from '@open-mercato/ui/backend/date-range'
+
+export type PipelineSummarySettings = {
+  dateRange: DateRangePreset
+}
+
+export const DEFAULT_SETTINGS: PipelineSummarySettings = {
+  dateRange: 'this_month',
+}
+
+export function hydrateSettings(raw: unknown): PipelineSummarySettings {
+  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,
+  }
+}

package/src/modules/dashboards/widgets/dashboard/pipeline-summary/widget.client.tsx

@@ -0,0 +1,137 @@
+"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,
+  InlineDateRangeSelect,
+  type DateRangePreset,
+} from '@open-mercato/ui/backend/date-range'
+import { DEFAULT_SETTINGS, hydrateSettings, type PipelineSummarySettings } from './config'
+import type { WidgetDataResponse } from '../../../services/widgetDataService'
+import { formatCurrencyCompact } from '../../../lib/formatters'
+
+async function fetchPipelineData(settings: PipelineSummarySettings): Promise<WidgetDataResponse> {
+  const body = {
+    entityType: 'customers:deals',
+    metric: {
+      field: 'valueAmount',
+      aggregate: 'sum',
+    },
+    groupBy: {
+      field: 'pipelineStage',
+      resolveLabels: true,
+    },
+    dateRange: {
+      field: 'createdAt',
+      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 pipeline data')
+  }
+
+  return call.result as WidgetDataResponse
+}
+
+function formatStageLabel(stage: unknown, t: (key: string, fallback: string) => string): string {
+  if (stage == null || stage === '') return t('dashboards.analytics.labels.unknown', 'Unknown')
+  const stageStr = String(stage)
+  if (stageStr === '0' || stageStr === 'null' || stageStr === 'undefined') {
+    return t('dashboards.analytics.labels.unknown', 'Unknown')
+  }
+  return stageStr
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (l) => l.toUpperCase())
+}
+
+const PipelineSummaryWidget: React.FC<DashboardWidgetComponentProps<PipelineSummarySettings>> = ({
+  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 fetchPipelineData(hydrated)
+      const chartData = result.data
+        .filter((item) => item.groupKey != null && item.groupKey !== '' && String(item.groupKey) !== '0')
+        .map((item) => ({
+          stage: formatStageLabel(item.groupLabel ?? item.groupKey, t),
+          Value: item.value ?? 0,
+        }))
+      setData(chartData)
+    } catch (err) {
+      console.error('Failed to load pipeline data', err)
+      setError(t('dashboards.analytics.widgets.pipelineSummary.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="pipeline-summary-date-range"
+          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}
+          value={hydrated.dateRange}
+          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex justify-end mb-2">
+        <InlineDateRangeSelect
+          value={hydrated.dateRange}
+          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}
+        />
+      </div>
+      <div className="flex-1 min-h-0">
+        <BarChart
+          data={data}
+          index="stage"
+          categories={['Value']}
+          categoryLabels={{ Value: t('dashboards.analytics.labels.value', 'Value') }}
+          loading={loading}
+          error={error}
+          valueFormatter={formatCurrencyCompact}
+          colors={['violet']}
+          showLegend={false}
+          emptyMessage={t('dashboards.analytics.widgets.pipelineSummary.empty', 'No deal data for this period')}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PipelineSummaryWidget

package/src/modules/dashboards/widgets/dashboard/pipeline-summary/widget.ts

@@ -0,0 +1,24 @@
+import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
+import PipelineSummaryWidget from './widget.client'
+import { DEFAULT_SETTINGS, hydrateSettings, type PipelineSummarySettings } from './config'
+
+const widget: DashboardWidgetModule<PipelineSummarySettings> = {
+  metadata: {
+    id: 'dashboards.analytics.pipelineSummary',
+    title: 'Pipeline Summary',
+    description: 'Deal value by pipeline stage',
+    features: ['analytics.view', 'customers.deals.view'],
+    defaultSize: 'md',
+    defaultEnabled: false,
+    defaultSettings: DEFAULT_SETTINGS,
+    tags: ['analytics', 'customers', 'deals', 'chart'],
+    category: 'analytics',
+    icon: 'git-branch',
+    supportsRefresh: true,
+  },
+  Widget: PipelineSummaryWidget,
+  hydrateSettings,
+  dehydrateSettings: (s) => ({ dateRange: s.dateRange }),
+}
+
+export default widget

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

@@ -0,0 +1,20 @@
+import { type DateRangePreset, isValidDateRangePreset } from '@open-mercato/ui/backend/date-range'
+
+export type RevenueKpiSettings = {
+  dateRange: DateRangePreset
+  showComparison: boolean
+}
+
+export const DEFAULT_SETTINGS: RevenueKpiSettings = {
+  dateRange: 'this_month',
+  showComparison: true,
+}
+
+export function hydrateSettings(raw: unknown): RevenueKpiSettings {
+  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,
+    showComparison: typeof obj.showComparison === 'boolean' ? obj.showComparison : DEFAULT_SETTINGS.showComparison,
+  }
+}