@open-mercato/core 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2954.610bab2d08

package/dist/modules/dashboards/widgets/dashboard/orders-by-status/widget.client.js

@@ -8,6 +8,13 @@ import {
   DateRangeSelect,
   InlineDateRangeSelect
 } from "@open-mercato/ui/backend/date-range";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
 import { DEFAULT_SETTINGS, hydrateSettings } from "./config.js";
 async function fetchOrdersByStatusData(settings) {
   const body = {
@@ -108,15 +115,16 @@ const OrdersByStatusWidget = ({
           }
         ),
         /* @__PURE__ */ jsxs(
-          "select",
+          Select,
           {
-            id: "orders-by-status-variant",
-            className: "w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             value: hydrated.variant,
-            onChange: (e) => onSettingsChange({ ...hydrated, variant: e.target.value }),
+            onValueChange: (value) => onSettingsChange({ ...hydrated, variant: value }),
             children: [
-              /* @__PURE__ */ jsx("option", { value: "donut", children: t("dashboards.analytics.chartVariant.donut", "Donut") }),
-              /* @__PURE__ */ jsx("option", { value: "pie", children: t("dashboards.analytics.chartVariant.pie", "Pie") })
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "orders-by-status-variant", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "donut", children: t("dashboards.analytics.chartVariant.donut", "Donut") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "pie", children: t("dashboards.analytics.chartVariant.pie", "Pie") })
+              ] })
             ]
           }
         )

package/dist/modules/dashboards/widgets/dashboard/orders-by-status/widget.client.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/modules/dashboards/widgets/dashboard/orders-by-status/widget.client.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { PieChart, type PieChartDataItem } from '@open-mercato/ui/backend/charts'\nimport {\n  DateRangeSelect,\n  InlineDateRangeSelect,\n  type DateRangePreset,\n} from '@open-mercato/ui/backend/date-range'\nimport { DEFAULT_SETTINGS, hydrateSettings, type OrdersByStatusSettings } from './config'\nimport type { WidgetDataResponse } from '../../../services/widgetDataService'\n\nasync function fetchOrdersByStatusData(settings: OrdersByStatusSettings): Promise<WidgetDataResponse> {\n  const body = {\n    entityType: 'sales:orders',\n    metric: {\n      field: 'id',\n      aggregate: 'count',\n    },\n    groupBy: {\n      field: 'status',\n    },\n    dateRange: {\n      field: 'placedAt',\n      preset: settings.dateRange,\n    },\n  }\n\n  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify(body),\n  })\n\n  if (!call.ok) {\n    const errorMsg = (call.result as Record<string, unknown>)?.error\n    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch orders by status data')\n  }\n\n  return call.result as WidgetDataResponse\n}\n\nconst ORDER_STATUS_KEYS: Record<string, string> = {\n  draft: 'dashboards.analytics.orderStatus.draft',\n  pending: 'dashboards.analytics.orderStatus.pending',\n  confirmed: 'dashboards.analytics.orderStatus.confirmed',\n  processing: 'dashboards.analytics.orderStatus.processing',\n  shipped: 'dashboards.analytics.orderStatus.shipped',\n  delivered: 'dashboards.analytics.orderStatus.delivered',\n  cancelled: 'dashboards.analytics.orderStatus.cancelled',\n}\n\nfunction formatStatusLabel(status: string | null, t: (key: string, fallback: string) => string): string {\n  if (!status) return t('dashboards.analytics.labels.unknown', 'Unknown')\n  const key = ORDER_STATUS_KEYS[status.toLowerCase()]\n  if (key) {\n    return t(key, status.replace(/_/g, ' ').replace(/\\b\\w/g, (l) => l.toUpperCase()))\n  }\n  return status.replace(/_/g, ' ').replace(/\\b\\w/g, (l) => l.toUpperCase())\n}\n\nconst OrdersByStatusWidget: React.FC<DashboardWidgetComponentProps<OrdersByStatusSettings>> = ({\n  mode,\n  settings = DEFAULT_SETTINGS,\n  onSettingsChange,\n  refreshToken,\n  onRefreshStateChange,\n}) => {\n  const t = useT()\n  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])\n  const [data, setData] = React.useState<PieChartDataItem[]>([])\n  const [loading, setLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n\n  const refresh = React.useCallback(async () => {\n    onRefreshStateChange?.(true)\n    setLoading(true)\n    setError(null)\n    try {\n      const result = await fetchOrdersByStatusData(hydrated)\n      const chartData = result.data.map((item) => ({\n        name: formatStatusLabel(item.groupKey as string | null, t),\n        value: item.value ?? 0,\n      }))\n      setData(chartData)\n    } catch (err) {\n      console.error('Failed to load orders by status data', err)\n      setError(t('dashboards.analytics.widgets.ordersByStatus.error', 'Failed to load data'))\n    } finally {\n      setLoading(false)\n      onRefreshStateChange?.(false)\n    }\n  }, [hydrated, onRefreshStateChange, t])\n\n  React.useEffect(() => {\n    refresh().catch(() => {})\n  }, [refresh, refreshToken])\n\n  if (mode === 'settings') {\n    return (\n      <div className=\"space-y-4 text-sm\">\n        <DateRangeSelect\n          id=\"orders-by-status-date-range\"\n          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}\n          value={hydrated.dateRange}\n          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"orders-by-status-variant\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.chartVariant', 'Chart Style')}\n          </label>\n          <select\n            id=\"orders-by-status-variant\"\n            className=\"w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            value={hydrated.variant}\n            onChange={(e) => onSettingsChange({ ...hydrated, variant: e.target.value as 'pie' | 'donut' })}\n          >\n            <option value=\"donut\">{t('dashboards.analytics.chartVariant.donut', 'Donut')}</option>\n            <option value=\"pie\">{t('dashboards.analytics.chartVariant.pie', 'Pie')}</option>\n          </select>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex justify-end mb-2\">\n        <InlineDateRangeSelect\n          value={hydrated.dateRange}\n          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n      </div>\n      <div className=\"flex-1 min-h-0\">\n        <PieChart\n          data={data}\n          loading={loading}\n          error={error}\n          variant={hydrated.variant}\n          colors={['blue', 'emerald', 'amber', 'rose', 'violet', 'cyan']}\n          emptyMessage={t('dashboards.analytics.widgets.ordersByStatus.empty', 'No orders for this period')}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default OrdersByStatusWidget\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { PieChart, type PieChartDataItem } from '@open-mercato/ui/backend/charts'\nimport {\n  DateRangeSelect,\n  InlineDateRangeSelect,\n  type DateRangePreset,\n} from '@open-mercato/ui/backend/date-range'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@open-mercato/ui/primitives/select'\nimport { DEFAULT_SETTINGS, hydrateSettings, type OrdersByStatusSettings } from './config'\nimport type { WidgetDataResponse } from '../../../services/widgetDataService'\n\nasync function fetchOrdersByStatusData(settings: OrdersByStatusSettings): Promise<WidgetDataResponse> {\n  const body = {\n    entityType: 'sales:orders',\n    metric: {\n      field: 'id',\n      aggregate: 'count',\n    },\n    groupBy: {\n      field: 'status',\n    },\n    dateRange: {\n      field: 'placedAt',\n      preset: settings.dateRange,\n    },\n  }\n\n  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify(body),\n  })\n\n  if (!call.ok) {\n    const errorMsg = (call.result as Record<string, unknown>)?.error\n    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch orders by status data')\n  }\n\n  return call.result as WidgetDataResponse\n}\n\nconst ORDER_STATUS_KEYS: Record<string, string> = {\n  draft: 'dashboards.analytics.orderStatus.draft',\n  pending: 'dashboards.analytics.orderStatus.pending',\n  confirmed: 'dashboards.analytics.orderStatus.confirmed',\n  processing: 'dashboards.analytics.orderStatus.processing',\n  shipped: 'dashboards.analytics.orderStatus.shipped',\n  delivered: 'dashboards.analytics.orderStatus.delivered',\n  cancelled: 'dashboards.analytics.orderStatus.cancelled',\n}\n\nfunction formatStatusLabel(status: string | null, t: (key: string, fallback: string) => string): string {\n  if (!status) return t('dashboards.analytics.labels.unknown', 'Unknown')\n  const key = ORDER_STATUS_KEYS[status.toLowerCase()]\n  if (key) {\n    return t(key, status.replace(/_/g, ' ').replace(/\\b\\w/g, (l) => l.toUpperCase()))\n  }\n  return status.replace(/_/g, ' ').replace(/\\b\\w/g, (l) => l.toUpperCase())\n}\n\nconst OrdersByStatusWidget: React.FC<DashboardWidgetComponentProps<OrdersByStatusSettings>> = ({\n  mode,\n  settings = DEFAULT_SETTINGS,\n  onSettingsChange,\n  refreshToken,\n  onRefreshStateChange,\n}) => {\n  const t = useT()\n  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])\n  const [data, setData] = React.useState<PieChartDataItem[]>([])\n  const [loading, setLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n\n  const refresh = React.useCallback(async () => {\n    onRefreshStateChange?.(true)\n    setLoading(true)\n    setError(null)\n    try {\n      const result = await fetchOrdersByStatusData(hydrated)\n      const chartData = result.data.map((item) => ({\n        name: formatStatusLabel(item.groupKey as string | null, t),\n        value: item.value ?? 0,\n      }))\n      setData(chartData)\n    } catch (err) {\n      console.error('Failed to load orders by status data', err)\n      setError(t('dashboards.analytics.widgets.ordersByStatus.error', 'Failed to load data'))\n    } finally {\n      setLoading(false)\n      onRefreshStateChange?.(false)\n    }\n  }, [hydrated, onRefreshStateChange, t])\n\n  React.useEffect(() => {\n    refresh().catch(() => {})\n  }, [refresh, refreshToken])\n\n  if (mode === 'settings') {\n    return (\n      <div className=\"space-y-4 text-sm\">\n        <DateRangeSelect\n          id=\"orders-by-status-date-range\"\n          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}\n          value={hydrated.dateRange}\n          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"orders-by-status-variant\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.chartVariant', 'Chart Style')}\n          </label>\n          <Select\n            value={hydrated.variant}\n            onValueChange={(value) => onSettingsChange({ ...hydrated, variant: value as 'pie' | 'donut' })}\n          >\n            <SelectTrigger id=\"orders-by-status-variant\" size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"donut\">{t('dashboards.analytics.chartVariant.donut', 'Donut')}</SelectItem>\n              <SelectItem value=\"pie\">{t('dashboards.analytics.chartVariant.pie', 'Pie')}</SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex justify-end mb-2\">\n        <InlineDateRangeSelect\n          value={hydrated.dateRange}\n          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n      </div>\n      <div className=\"flex-1 min-h-0\">\n        <PieChart\n          data={data}\n          loading={loading}\n          error={error}\n          variant={hydrated.variant}\n          colors={['blue', 'emerald', 'amber', 'rose', 'violet', 'cyan']}\n          emptyMessage={t('dashboards.analytics.widgets.ordersByStatus.empty', 'No orders for this period')}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default OrdersByStatusWidget\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/dashboards/widgets/dashboard/revenue-trend/widget.client.js

@@ -8,6 +8,13 @@ import {
   DateRangeSelect,
   InlineDateRangeSelect
 } from "@open-mercato/ui/backend/date-range";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
 import { DEFAULT_SETTINGS, hydrateSettings } from "./config.js";
 import { formatCurrencyCompact } from "../../../lib/formatters.js";
 async function fetchRevenueTrendData(settings) {
@@ -153,14 +160,15 @@ const RevenueTrendWidget = ({
             children: t("dashboards.analytics.settings.granularity", "Granularity")
           }
         ),
-        /* @__PURE__ */ jsx(
-          "select",
+        /* @__PURE__ */ jsxs(
+          Select,
           {
-            id: "revenue-trend-granularity",
-            className: "w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             value: hydrated.granularity,
-            onChange: (e) => onSettingsChange({ ...hydrated, granularity: e.target.value }),
-            children: GRANULARITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: t(opt.labelKey, opt.value) }, opt.value))
+            onValueChange: (value) => onSettingsChange({ ...hydrated, granularity: value }),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "revenue-trend-granularity", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: GRANULARITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: t(opt.labelKey, opt.value) }, opt.value)) })
+            ]
           }
         )
       ] }),

package/dist/modules/dashboards/widgets/dashboard/revenue-trend/widget.client.js.map

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

package/dist/modules/dashboards/widgets/dashboard/sales-by-region/widget.client.js

@@ -5,6 +5,7 @@ import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { BarChart } from "@open-mercato/ui/backend/charts";
 import { DateRangeSelect } from "@open-mercato/ui/backend/date-range";
+import { Input } from "@open-mercato/ui/primitives/input";
 import { DEFAULT_SETTINGS, hydrateSettings } from "./config.js";
 import { formatCurrencyCompact } from "../../../lib/formatters.js";
 async function fetchSalesByRegionData(settings) {
@@ -90,13 +91,13 @@ const SalesByRegionWidget = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          "input",
+          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-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            className: "w-24",
             value: hydrated.limit,
             onChange: (e) => {
               const next = Number(e.target.value);

package/dist/modules/dashboards/widgets/dashboard/sales-by-region/widget.client.js.map

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

package/dist/modules/dashboards/widgets/dashboard/top-customers/widget.client.js

@@ -5,6 +5,7 @@ import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { TopNTable } from "@open-mercato/ui/backend/charts";
 import { DateRangeSelect } from "@open-mercato/ui/backend/date-range";
+import { Input } from "@open-mercato/ui/primitives/input";
 import { DEFAULT_SETTINGS, hydrateSettings } from "./config.js";
 import { formatCurrencySafe } from "../../../lib/formatters.js";
 async function fetchTopCustomersData(settings) {
@@ -118,13 +119,13 @@ const TopCustomersWidget = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          "input",
+          Input,
           {
             id: "top-customers-limit",
             type: "number",
             min: 1,
             max: 20,
-            className: "w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            className: "w-24",
             value: hydrated.limit,
             onChange: (e) => {
               const next = Number(e.target.value);

package/dist/modules/dashboards/widgets/dashboard/top-customers/widget.client.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/modules/dashboards/widgets/dashboard/top-customers/widget.client.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { TopNTable, type TopNTableColumn } from '@open-mercato/ui/backend/charts'\nimport { DateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'\nimport { DEFAULT_SETTINGS, hydrateSettings, type TopCustomersSettings } from './config'\nimport type { WidgetDataResponse } from '../../../services/widgetDataService'\nimport { formatCurrencySafe } from '../../../lib/formatters'\n\ntype CustomerRow = {\n  rank: number\n  customerId: string\n  revenue: number\n}\n\nasync function fetchTopCustomersData(settings: TopCustomersSettings): Promise<WidgetDataResponse> {\n  const body = {\n    entityType: 'sales:orders',\n    metric: {\n      field: 'grandTotalGrossAmount',\n      aggregate: 'sum',\n    },\n    groupBy: {\n      field: 'customerEntityId',\n      limit: settings.limit,\n      resolveLabels: true,\n    },\n    dateRange: {\n      field: 'placedAt',\n      preset: settings.dateRange,\n    },\n  }\n\n  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify(body),\n  })\n\n  if (!call.ok) {\n    const errorMsg = (call.result as Record<string, unknown>)?.error\n    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch top customers data')\n  }\n\n  return call.result as WidgetDataResponse\n}\n\nfunction formatCustomerName(name: string | null, unknownLabel: string): string {\n  if (!name) return unknownLabel\n  return name\n}\n\nconst TopCustomersWidget: React.FC<DashboardWidgetComponentProps<TopCustomersSettings>> = ({\n  mode,\n  settings = DEFAULT_SETTINGS,\n  onSettingsChange,\n  refreshToken,\n  onRefreshStateChange,\n}) => {\n  const t = useT()\n  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])\n  const [data, setData] = React.useState<CustomerRow[]>([])\n  const [loading, setLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n\n  const unknownLabel = t('dashboards.analytics.labels.unknown', 'Unknown')\n  const columns: TopNTableColumn<CustomerRow>[] = React.useMemo(\n    () => [\n      {\n        key: 'rank',\n        header: '#',\n        width: '40px',\n      },\n      {\n        key: 'customerId',\n        header: t('dashboards.analytics.widgets.topCustomers.column.customer', 'Customer'),\n        formatter: (value) => formatCustomerName(String(value || ''), unknownLabel),\n      },\n      {\n        key: 'revenue',\n        header: t('dashboards.analytics.widgets.topCustomers.column.revenue', 'Revenue'),\n        align: 'right',\n        formatter: (value: unknown) => formatCurrencySafe(value),\n      },\n    ],\n    [t, unknownLabel],\n  )\n\n  const refresh = React.useCallback(async () => {\n    onRefreshStateChange?.(true)\n    setLoading(true)\n    setError(null)\n    try {\n      const result = await fetchTopCustomersData(hydrated)\n      const tableData: CustomerRow[] = result.data.map((item, index) => ({\n        rank: index + 1,\n        customerId: item.groupLabel || String(item.groupKey || t('dashboards.analytics.labels.unknown', 'Unknown')),\n        revenue: item.value ?? 0,\n      }))\n      setData(tableData)\n    } catch (err) {\n      console.error('Failed to load top customers data', err)\n      setError(t('dashboards.analytics.widgets.topCustomers.error', 'Failed to load data'))\n    } finally {\n      setLoading(false)\n      onRefreshStateChange?.(false)\n    }\n  }, [hydrated, onRefreshStateChange, t])\n\n  React.useEffect(() => {\n    refresh().catch(() => {})\n  }, [refresh, refreshToken])\n\n  if (mode === 'settings') {\n    return (\n      <div className=\"space-y-4 text-sm\">\n        <DateRangeSelect\n          id=\"top-customers-date-range\"\n          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}\n          value={hydrated.dateRange}\n          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"top-customers-limit\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.limit', 'Number of items')}\n          </label>\n          <input\n            id=\"top-customers-limit\"\n            type=\"number\"\n            min={1}\n            max={20}\n            className=\"w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            value={hydrated.limit}\n            onChange={(e) => {\n              const next = Number(e.target.value)\n              onSettingsChange({ ...hydrated, limit: Number.isFinite(next) ? next : hydrated.limit })\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <TopNTable\n      data={data}\n      columns={columns}\n      loading={loading}\n      error={error}\n      emptyMessage={t('dashboards.analytics.widgets.topCustomers.empty', 'No customer data for this period')}\n    />\n  )\n}\n\nexport default TopCustomersWidget\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { TopNTable, type TopNTableColumn } from '@open-mercato/ui/backend/charts'\nimport { DateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { DEFAULT_SETTINGS, hydrateSettings, type TopCustomersSettings } from './config'\nimport type { WidgetDataResponse } from '../../../services/widgetDataService'\nimport { formatCurrencySafe } from '../../../lib/formatters'\n\ntype CustomerRow = {\n  rank: number\n  customerId: string\n  revenue: number\n}\n\nasync function fetchTopCustomersData(settings: TopCustomersSettings): Promise<WidgetDataResponse> {\n  const body = {\n    entityType: 'sales:orders',\n    metric: {\n      field: 'grandTotalGrossAmount',\n      aggregate: 'sum',\n    },\n    groupBy: {\n      field: 'customerEntityId',\n      limit: settings.limit,\n      resolveLabels: true,\n    },\n    dateRange: {\n      field: 'placedAt',\n      preset: settings.dateRange,\n    },\n  }\n\n  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify(body),\n  })\n\n  if (!call.ok) {\n    const errorMsg = (call.result as Record<string, unknown>)?.error\n    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch top customers data')\n  }\n\n  return call.result as WidgetDataResponse\n}\n\nfunction formatCustomerName(name: string | null, unknownLabel: string): string {\n  if (!name) return unknownLabel\n  return name\n}\n\nconst TopCustomersWidget: React.FC<DashboardWidgetComponentProps<TopCustomersSettings>> = ({\n  mode,\n  settings = DEFAULT_SETTINGS,\n  onSettingsChange,\n  refreshToken,\n  onRefreshStateChange,\n}) => {\n  const t = useT()\n  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])\n  const [data, setData] = React.useState<CustomerRow[]>([])\n  const [loading, setLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n\n  const unknownLabel = t('dashboards.analytics.labels.unknown', 'Unknown')\n  const columns: TopNTableColumn<CustomerRow>[] = React.useMemo(\n    () => [\n      {\n        key: 'rank',\n        header: '#',\n        width: '40px',\n      },\n      {\n        key: 'customerId',\n        header: t('dashboards.analytics.widgets.topCustomers.column.customer', 'Customer'),\n        formatter: (value) => formatCustomerName(String(value || ''), unknownLabel),\n      },\n      {\n        key: 'revenue',\n        header: t('dashboards.analytics.widgets.topCustomers.column.revenue', 'Revenue'),\n        align: 'right',\n        formatter: (value: unknown) => formatCurrencySafe(value),\n      },\n    ],\n    [t, unknownLabel],\n  )\n\n  const refresh = React.useCallback(async () => {\n    onRefreshStateChange?.(true)\n    setLoading(true)\n    setError(null)\n    try {\n      const result = await fetchTopCustomersData(hydrated)\n      const tableData: CustomerRow[] = result.data.map((item, index) => ({\n        rank: index + 1,\n        customerId: item.groupLabel || String(item.groupKey || t('dashboards.analytics.labels.unknown', 'Unknown')),\n        revenue: item.value ?? 0,\n      }))\n      setData(tableData)\n    } catch (err) {\n      console.error('Failed to load top customers data', err)\n      setError(t('dashboards.analytics.widgets.topCustomers.error', 'Failed to load data'))\n    } finally {\n      setLoading(false)\n      onRefreshStateChange?.(false)\n    }\n  }, [hydrated, onRefreshStateChange, t])\n\n  React.useEffect(() => {\n    refresh().catch(() => {})\n  }, [refresh, refreshToken])\n\n  if (mode === 'settings') {\n    return (\n      <div className=\"space-y-4 text-sm\">\n        <DateRangeSelect\n          id=\"top-customers-date-range\"\n          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}\n          value={hydrated.dateRange}\n          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"top-customers-limit\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.limit', 'Number of items')}\n          </label>\n          <Input\n            id=\"top-customers-limit\"\n            type=\"number\"\n            min={1}\n            max={20}\n            className=\"w-24\"\n            value={hydrated.limit}\n            onChange={(e) => {\n              const next = Number(e.target.value)\n              onSettingsChange({ ...hydrated, limit: Number.isFinite(next) ? next : hydrated.limit })\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <TopNTable\n      data={data}\n      columns={columns}\n      loading={loading}\n      error={error}\n      emptyMessage={t('dashboards.analytics.widgets.topCustomers.empty', 'No customer data for this period')}\n    />\n  )\n}\n\nexport default TopCustomersWidget\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/dashboards/widgets/dashboard/top-products/widget.client.js

@@ -5,6 +5,14 @@ import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { BarChart } from "@open-mercato/ui/backend/charts";
 import { DateRangeSelect, InlineDateRangeSelect } from "@open-mercato/ui/backend/date-range";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
 import { DEFAULT_SETTINGS, hydrateSettings } from "./config.js";
 import { formatCurrencyCompact } from "../../../lib/formatters.js";
 async function fetchTopProductsData(settings) {
@@ -107,13 +115,13 @@ const TopProductsWidget = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          "input",
+          Input,
           {
             id: "top-products-limit",
             type: "number",
             min: 1,
             max: 20,
-            className: "w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            className: "w-24",
             value: hydrated.limit,
             onChange: (e) => {
               const next = Number(e.target.value);
@@ -132,15 +140,16 @@ const TopProductsWidget = ({
           }
         ),
         /* @__PURE__ */ jsxs(
-          "select",
+          Select,
           {
-            id: "top-products-layout",
-            className: "w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
             value: hydrated.layout,
-            onChange: (e) => onSettingsChange({ ...hydrated, layout: e.target.value }),
+            onValueChange: (value) => onSettingsChange({ ...hydrated, layout: value }),
             children: [
-              /* @__PURE__ */ jsx("option", { value: "horizontal", children: t("dashboards.analytics.settings.horizontal", "Horizontal") }),
-              /* @__PURE__ */ jsx("option", { value: "vertical", children: t("dashboards.analytics.settings.vertical", "Vertical") })
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "top-products-layout", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "horizontal", children: t("dashboards.analytics.settings.horizontal", "Horizontal") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "vertical", children: t("dashboards.analytics.settings.vertical", "Vertical") })
+              ] })
             ]
           }
         )

package/dist/modules/dashboards/widgets/dashboard/top-products/widget.client.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/modules/dashboards/widgets/dashboard/top-products/widget.client.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { BarChart, type BarChartDataItem } from '@open-mercato/ui/backend/charts'\nimport { DateRangeSelect, InlineDateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'\nimport { DEFAULT_SETTINGS, hydrateSettings, type TopProductsSettings } from './config'\nimport type { WidgetDataResponse } from '../../../services/widgetDataService'\nimport { formatCurrencyCompact } from '../../../lib/formatters'\n\nasync function fetchTopProductsData(settings: TopProductsSettings): Promise<WidgetDataResponse> {\n  const body = {\n    entityType: 'sales:order_lines',\n    metric: {\n      field: 'totalGrossAmount',\n      aggregate: 'sum',\n    },\n    groupBy: {\n      field: 'productId',\n      limit: settings.limit,\n      resolveLabels: true,\n    },\n    dateRange: {\n      field: 'createdAt',\n      preset: settings.dateRange,\n    },\n  }\n\n  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify(body),\n  })\n\n  if (!call.ok) {\n    const errorMsg = (call.result as Record<string, unknown>)?.error\n    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch top products data')\n  }\n\n  return call.result as WidgetDataResponse\n}\n\nfunction truncateLabel(\n  label: unknown,\n  t: (key: string, fallback: string) => string,\n  maxLength: number = 20\n): string {\n  if (label == null || label === '') return t('dashboards.analytics.labels.unknownProduct', 'Unknown Product')\n  const labelStr = String(label)\n  // Check for UUID-like strings or meaningless values\n  if (labelStr === '0' || labelStr === 'null' || labelStr === 'undefined') {\n    return t('dashboards.analytics.labels.unknownProduct', 'Unknown Product')\n  }\n  if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(labelStr)) {\n    return t('dashboards.analytics.labels.unnamedProduct', 'Unnamed Product')\n  }\n  if (labelStr.length <= maxLength) return labelStr\n  return labelStr.slice(0, maxLength - 3) + '...'\n}\n\nconst TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSettings>> = ({\n  mode,\n  settings = DEFAULT_SETTINGS,\n  onSettingsChange,\n  refreshToken,\n  onRefreshStateChange,\n}) => {\n  const t = useT()\n  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])\n  const [data, setData] = React.useState<BarChartDataItem[]>([])\n  const [loading, setLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n  const fetchingRef = React.useRef(false)\n\n  const refresh = React.useCallback(async () => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    onRefreshStateChange?.(true)\n    setLoading(true)\n    setError(null)\n    try {\n      const result = await fetchTopProductsData(hydrated)\n      const chartData = result.data.map((item, index) => ({\n        name: truncateLabel(item.groupLabel ?? item.groupKey ?? `Product ${index + 1}`, t),\n        Revenue: item.value ?? 0,\n      }))\n      setData(chartData)\n    } catch (err) {\n      console.error('Failed to load top products data', err)\n      setError(t('dashboards.analytics.widgets.topProducts.error', 'Failed to load data'))\n    } finally {\n      setLoading(false)\n      onRefreshStateChange?.(false)\n      fetchingRef.current = false\n    }\n  }, [hydrated, onRefreshStateChange, t])\n\n  React.useEffect(() => {\n    refresh().catch(() => {})\n  }, [refresh, refreshToken])\n\n  if (mode === 'settings') {\n    return (\n      <div className=\"space-y-4 text-sm\">\n        <DateRangeSelect\n          id=\"top-products-date-range\"\n          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}\n          value={hydrated.dateRange}\n          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"top-products-limit\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.limit', 'Number of items')}\n          </label>\n          <input\n            id=\"top-products-limit\"\n            type=\"number\"\n            min={1}\n            max={20}\n            className=\"w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            value={hydrated.limit}\n            onChange={(e) => {\n              const next = Number(e.target.value)\n              onSettingsChange({ ...hydrated, limit: Number.isFinite(next) ? next : hydrated.limit })\n            }}\n          />\n        </div>\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"top-products-layout\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.chartLayout', 'Chart Layout')}\n          </label>\n          <select\n            id=\"top-products-layout\"\n            className=\"w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            value={hydrated.layout}\n            onChange={(e) => onSettingsChange({ ...hydrated, layout: e.target.value as 'horizontal' | 'vertical' })}\n          >\n            <option value=\"horizontal\">{t('dashboards.analytics.settings.horizontal', 'Horizontal')}</option>\n            <option value=\"vertical\">{t('dashboards.analytics.settings.vertical', 'Vertical')}</option>\n          </select>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex justify-end mb-2\">\n        <InlineDateRangeSelect\n          value={hydrated.dateRange}\n          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n      </div>\n      <div className=\"flex-1 min-h-0\">\n        <BarChart\n          data={data}\n          index=\"name\"\n          categories={['Revenue']}\n          categoryLabels={{ Revenue: t('dashboards.analytics.widgets.topCustomers.column.revenue', 'Revenue') }}\n          loading={loading}\n          error={error}\n          layout={hydrated.layout}\n          valueFormatter={formatCurrencyCompact}\n          colors={['emerald']}\n          showLegend={false}\n          emptyMessage={t('dashboards.analytics.widgets.topProducts.empty', 'No product sales data for this period')}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default TopProductsWidget\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { BarChart, type BarChartDataItem } from '@open-mercato/ui/backend/charts'\nimport { DateRangeSelect, InlineDateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@open-mercato/ui/primitives/select'\nimport { DEFAULT_SETTINGS, hydrateSettings, type TopProductsSettings } from './config'\nimport type { WidgetDataResponse } from '../../../services/widgetDataService'\nimport { formatCurrencyCompact } from '../../../lib/formatters'\n\nasync function fetchTopProductsData(settings: TopProductsSettings): Promise<WidgetDataResponse> {\n  const body = {\n    entityType: 'sales:order_lines',\n    metric: {\n      field: 'totalGrossAmount',\n      aggregate: 'sum',\n    },\n    groupBy: {\n      field: 'productId',\n      limit: settings.limit,\n      resolveLabels: true,\n    },\n    dateRange: {\n      field: 'createdAt',\n      preset: settings.dateRange,\n    },\n  }\n\n  const call = await apiCall<WidgetDataResponse>('/api/dashboards/widgets/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify(body),\n  })\n\n  if (!call.ok) {\n    const errorMsg = (call.result as Record<string, unknown>)?.error\n    throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Failed to fetch top products data')\n  }\n\n  return call.result as WidgetDataResponse\n}\n\nfunction truncateLabel(\n  label: unknown,\n  t: (key: string, fallback: string) => string,\n  maxLength: number = 20\n): string {\n  if (label == null || label === '') return t('dashboards.analytics.labels.unknownProduct', 'Unknown Product')\n  const labelStr = String(label)\n  // Check for UUID-like strings or meaningless values\n  if (labelStr === '0' || labelStr === 'null' || labelStr === 'undefined') {\n    return t('dashboards.analytics.labels.unknownProduct', 'Unknown Product')\n  }\n  if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(labelStr)) {\n    return t('dashboards.analytics.labels.unnamedProduct', 'Unnamed Product')\n  }\n  if (labelStr.length <= maxLength) return labelStr\n  return labelStr.slice(0, maxLength - 3) + '...'\n}\n\nconst TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSettings>> = ({\n  mode,\n  settings = DEFAULT_SETTINGS,\n  onSettingsChange,\n  refreshToken,\n  onRefreshStateChange,\n}) => {\n  const t = useT()\n  const hydrated = React.useMemo(() => hydrateSettings(settings), [settings])\n  const [data, setData] = React.useState<BarChartDataItem[]>([])\n  const [loading, setLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n  const fetchingRef = React.useRef(false)\n\n  const refresh = React.useCallback(async () => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    onRefreshStateChange?.(true)\n    setLoading(true)\n    setError(null)\n    try {\n      const result = await fetchTopProductsData(hydrated)\n      const chartData = result.data.map((item, index) => ({\n        name: truncateLabel(item.groupLabel ?? item.groupKey ?? `Product ${index + 1}`, t),\n        Revenue: item.value ?? 0,\n      }))\n      setData(chartData)\n    } catch (err) {\n      console.error('Failed to load top products data', err)\n      setError(t('dashboards.analytics.widgets.topProducts.error', 'Failed to load data'))\n    } finally {\n      setLoading(false)\n      onRefreshStateChange?.(false)\n      fetchingRef.current = false\n    }\n  }, [hydrated, onRefreshStateChange, t])\n\n  React.useEffect(() => {\n    refresh().catch(() => {})\n  }, [refresh, refreshToken])\n\n  if (mode === 'settings') {\n    return (\n      <div className=\"space-y-4 text-sm\">\n        <DateRangeSelect\n          id=\"top-products-date-range\"\n          label={t('dashboards.analytics.settings.dateRange', 'Date Range')}\n          value={hydrated.dateRange}\n          onChange={(dateRange: DateRangePreset) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"top-products-limit\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.limit', 'Number of items')}\n          </label>\n          <Input\n            id=\"top-products-limit\"\n            type=\"number\"\n            min={1}\n            max={20}\n            className=\"w-24\"\n            value={hydrated.limit}\n            onChange={(e) => {\n              const next = Number(e.target.value)\n              onSettingsChange({ ...hydrated, limit: Number.isFinite(next) ? next : hydrated.limit })\n            }}\n          />\n        </div>\n        <div className=\"space-y-1.5\">\n          <label\n            htmlFor=\"top-products-layout\"\n            className=\"text-xs font-semibold uppercase text-muted-foreground\"\n          >\n            {t('dashboards.analytics.settings.chartLayout', 'Chart Layout')}\n          </label>\n          <Select\n            value={hydrated.layout}\n            onValueChange={(value) => onSettingsChange({ ...hydrated, layout: value as 'horizontal' | 'vertical' })}\n          >\n            <SelectTrigger id=\"top-products-layout\" size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"horizontal\">{t('dashboards.analytics.settings.horizontal', 'Horizontal')}</SelectItem>\n              <SelectItem value=\"vertical\">{t('dashboards.analytics.settings.vertical', 'Vertical')}</SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex justify-end mb-2\">\n        <InlineDateRangeSelect\n          value={hydrated.dateRange}\n          onChange={(dateRange) => onSettingsChange({ ...hydrated, dateRange })}\n        />\n      </div>\n      <div className=\"flex-1 min-h-0\">\n        <BarChart\n          data={data}\n          index=\"name\"\n          categories={['Revenue']}\n          categoryLabels={{ Revenue: t('dashboards.analytics.widgets.topCustomers.column.revenue', 'Revenue') }}\n          loading={loading}\n          error={error}\n          layout={hydrated.layout}\n          valueFormatter={formatCurrencyCompact}\n          colors={['emerald']}\n          showLegend={false}\n          emptyMessage={t('dashboards.analytics.widgets.topProducts.empty', 'No product sales data for this period')}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default TopProductsWidget\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/data_sync/backend/data-sync/page.js

@@ -12,6 +12,13 @@ import { Button } from "@open-mercato/ui/primitives/button";
 import { Input } from "@open-mercato/ui/primitives/input";
 import { Label } from "@open-mercato/ui/primitives/label";
 import { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
 import { Separator } from "@open-mercato/ui/primitives/separator";
 import { Switch } from "@open-mercato/ui/primitives/switch";
 import { RowActions } from "@open-mercato/ui/backend/RowActions";
@@ -531,15 +538,19 @@ function SyncRunsDashboardPage() {
               /* @__PURE__ */ jsx("span", { children: t("data_sync.dashboard.columns.integration") })
             ] }),
             /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
-                className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-                value: selectedIntegrationId,
-                onChange: (event) => setSelectedIntegrationId(event.target.value),
+                value: selectedIntegrationId || void 0,
+                onValueChange: (value) => setSelectedIntegrationId(value ?? ""),
                 disabled: isLoadingOptions || options.length === 0,
                 children: [
-                  options.length === 0 ? /* @__PURE__ */ jsx("option", { value: "", children: t("integrations.marketplace.noResults", "No integrations found") }) : null,
-                  options.map((item) => /* @__PURE__ */ jsx("option", { value: item.integrationId, children: item.title }, item.integrationId))
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "lg", children: /* @__PURE__ */ jsx(
+                    SelectValue,
+                    {
+                      placeholder: options.length === 0 ? t("integrations.marketplace.noResults", "No integrations found") : void 0
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: options.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.integrationId, children: item.title }, item.integrationId)) })
                 ]
               }
             )
@@ -549,14 +560,16 @@ function SyncRunsDashboardPage() {
               /* @__PURE__ */ jsx(Boxes, { className: "size-4 text-muted-foreground" }),
               /* @__PURE__ */ jsx("span", { children: t("data_sync.dashboard.columns.entityType") })
             ] }),
-            /* @__PURE__ */ jsx(
-              "select",
+            /* @__PURE__ */ jsxs(
+              Select,
               {
-                className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-                value: selectedEntityType,
-                onChange: (event) => setSelectedEntityType(event.target.value),
+                value: selectedEntityType || void 0,
+                onValueChange: (value) => setSelectedEntityType(value ?? ""),
                 disabled: entityOptions.length === 0,
-                children: entityOptions.map((entityType) => /* @__PURE__ */ jsx("option", { value: entityType, children: formatEntityTypeLabel(entityType) }, entityType))
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "lg", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: entityOptions.map((entityType) => /* @__PURE__ */ jsx(SelectItem, { value: entityType, children: formatEntityTypeLabel(entityType) }, entityType)) })
+                ]
               }
             )
           ] }),
@@ -566,15 +579,17 @@ function SyncRunsDashboardPage() {
               /* @__PURE__ */ jsx("span", { children: t("data_sync.dashboard.columns.direction") })
             ] }),
             /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
-                className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
                 value: selectedDirection,
-                onChange: (event) => setSelectedDirection(event.target.value === "export" ? "export" : "import"),
+                onValueChange: (value) => setSelectedDirection(value === "export" ? "export" : "import"),
                 disabled: selectedIntegration?.direction !== "bidirectional",
                 children: [
-                  /* @__PURE__ */ jsx("option", { value: "import", children: t("data_sync.dashboard.direction.import") }),
-                  selectedIntegration?.direction === "bidirectional" || selectedIntegration?.direction === "export" ? /* @__PURE__ */ jsx("option", { value: "export", children: t("data_sync.dashboard.direction.export") }) : null
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "lg", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsx(SelectItem, { value: "import", children: t("data_sync.dashboard.direction.import") }),
+                    selectedIntegration?.direction === "bidirectional" || selectedIntegration?.direction === "export" ? /* @__PURE__ */ jsx(SelectItem, { value: "export", children: t("data_sync.dashboard.direction.export") }) : null
+                  ] })
                 ]
               }
             )
@@ -652,17 +667,19 @@ function SyncRunsDashboardPage() {
                   /* @__PURE__ */ jsx("span", { children: t("data_sync.dashboard.schedule.type", "Schedule type") })
                 ] }),
                 /* @__PURE__ */ jsxs(
-                  "select",
+                  Select,
                   {
-                    className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
                     value: scheduleEditor.scheduleType,
-                    onChange: (event) => updateScheduleEditor({
-                      scheduleType: event.target.value === "cron" ? "cron" : "interval"
+                    onValueChange: (value) => updateScheduleEditor({
+                      scheduleType: value === "cron" ? "cron" : "interval"
                     }),
                     disabled: isLoadingSchedule || isSavingSchedule || isDeletingSchedule || !selectedIntegration || !selectedEntityType,
                     children: [
-                      /* @__PURE__ */ jsx("option", { value: "interval", children: t("data_sync.dashboard.schedule.interval", "Interval") }),
-                      /* @__PURE__ */ jsx("option", { value: "cron", children: t("data_sync.dashboard.schedule.cron", "Cron") })
+                      /* @__PURE__ */ jsx(SelectTrigger, { size: "lg", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                      /* @__PURE__ */ jsxs(SelectContent, { children: [
+                        /* @__PURE__ */ jsx(SelectItem, { value: "interval", children: t("data_sync.dashboard.schedule.interval", "Interval") }),
+                        /* @__PURE__ */ jsx(SelectItem, { value: "cron", children: t("data_sync.dashboard.schedule.cron", "Cron") })
+                      ] })
                     ]
                   }
                 )