@open-mercato/ui 0.6.4-develop.3944.1.4100aa7fbe → 0.6.4-develop.3962.1.70f30e284c

package/src/backend/charts/BarChartImpl.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from 'react'
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
+import type { BarChartDataItem, BarChartProps } from './BarChart'
+
+type ImplProps = Pick<
+  BarChartProps,
+  | 'data'
+  | 'index'
+  | 'categories'
+  | 'colors'
+  | 'layout'
+  | 'valueFormatter'
+  | 'showLegend'
+  | 'showGridLines'
+  | 'categoryLabels'
+> & {
+  valueFormatter: (value: number) => string
+}
+
+export default function BarChartImpl({
+  data,
+  index,
+  categories,
+  colors,
+  layout = 'vertical',
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  categoryLabels,
+}: ImplProps) {
+  const isHorizontal = layout === 'horizontal'
+  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200
+  const getBarColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)
+
+  return (
+    <ResponsiveContainer width="100%" height={chartHeight}>
+      <RechartsBarChart
+        data={data}
+        layout={isHorizontal ? 'vertical' : 'horizontal'}
+        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+      >
+        {showGridLines && (
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+        )}
+        <XAxis
+          type={isHorizontal ? 'number' : 'category'}
+          dataKey={isHorizontal ? undefined : index}
+          tickFormatter={isHorizontal ? valueFormatter : undefined}
+          tick={{ fontSize: 11 }}
+        />
+        <YAxis
+          type={isHorizontal ? 'category' : 'number'}
+          dataKey={isHorizontal ? index : undefined}
+          tickFormatter={isHorizontal ? undefined : valueFormatter}
+          width={isHorizontal ? 90 : 50}
+          interval={0}
+          tick={{ fontSize: 10 }}
+        />
+        <Tooltip
+          content={
+            <ChartTooltipContent
+              valueFormatter={valueFormatter}
+              categoryLabels={categoryLabels}
+              labelFormatter={(label, payload) => {
+                const entry = payload?.[0] as { payload?: BarChartDataItem } | undefined
+                const item = entry?.payload
+                return item?.[index] ? String(item[index]) : label
+              }}
+            />
+          }
+          cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}
+        />
+        {showLegend && categories.length > 1 && (
+          <Legend verticalAlign="top" height={36} />
+        )}
+        {categories.map((category, idx) => (
+          <Bar
+            key={category}
+            dataKey={category}
+            fill={getBarColor(idx)}
+            radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}
+          />
+        ))}
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}

package/src/backend/charts/LineChart.tsx

@@ -1,20 +1,8 @@
 "use client"
 
 import * as React from 'react'
-import {
-  LineChart as RechartsLineChart,
-  AreaChart as RechartsAreaChart,
-  Line,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from 'recharts'
+import dynamic from 'next/dynamic'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
 
 export type LineChartDataItem = Record<string, string | number | null | undefined>
 
@@ -47,6 +35,15 @@ function defaultValueFormatter(value: number): string {
   return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
 }
 
+const LineChartImpl = dynamic(() => import('./LineChartImpl'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-48 items-center justify-center">
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  ),
+})
+
 export function LineChart({
   title,
   data,
@@ -65,10 +62,6 @@ export function LineChart({
   emptyMessage = 'No data available',
   categoryLabels,
 }: LineChartProps) {
-  const getLineColor = (idx: number): string => {
-    return resolveChartColor(colors?.[idx], idx)
-  }
-
   if (error) {
     return (
       <div className={`rounded-lg border bg-card p-4 ${className}`}>
@@ -102,78 +95,23 @@ export function LineChart({
     )
   }
 
-  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart
-
   return (
     <div className={`rounded-lg border bg-card p-4 ${className}`}>
       {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
       <div className="h-52 w-full">
-        <ResponsiveContainer width="100%" height="100%">
-          <ChartComponent
-            data={data}
-            margin={{ top: 5, right: 10, left: 10, bottom: 5 }}
-          >
-            {showGridLines && (
-              <CartesianGrid
-                strokeDasharray="3 3"
-                stroke="hsl(var(--border))"
-              />
-            )}
-            <XAxis
-              dataKey={index}
-              tick={{ fontSize: 12 }}
-              tickLine={false}
-              axisLine={false}
-            />
-            <YAxis
-              tickFormatter={valueFormatter}
-              tick={{ fontSize: 12 }}
-              tickLine={false}
-              axisLine={false}
-              width={56}
-            />
-            <Tooltip
-              content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}
-              cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}
-            />
-            {showLegend && categories.length > 1 && (
-              <Legend
-                verticalAlign="top"
-                height={36}
-                formatter={(value) => (
-                  <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
-                )}
-              />
-            )}
-            {showArea
-              ? categories.map((category, idx) => (
-                  <Area
-                    key={category}
-                    type={curveType}
-                    dataKey={category}
-                    stroke={getLineColor(idx)}
-                    fill={getLineColor(idx)}
-                    fillOpacity={0.2}
-                    strokeWidth={2}
-                    connectNulls={connectNulls}
-                    dot={false}
-                    activeDot={{ r: 4, strokeWidth: 0 }}
-                  />
-                ))
-              : categories.map((category, idx) => (
-                  <Line
-                    key={category}
-                    type={curveType}
-                    dataKey={category}
-                    stroke={getLineColor(idx)}
-                    strokeWidth={2}
-                    connectNulls={connectNulls}
-                    dot={false}
-                    activeDot={{ r: 4, strokeWidth: 0 }}
-                  />
-                ))}
-          </ChartComponent>
-        </ResponsiveContainer>
+        <LineChartImpl
+          data={data}
+          index={index}
+          categories={categories}
+          colors={colors}
+          showArea={showArea}
+          valueFormatter={valueFormatter}
+          showLegend={showLegend}
+          showGridLines={showGridLines}
+          curveType={curveType}
+          connectNulls={connectNulls}
+          categoryLabels={categoryLabels}
+        />
       </div>
     </div>
   )

package/src/backend/charts/LineChartImpl.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from 'react'
+import {
+  LineChart as RechartsLineChart,
+  AreaChart as RechartsAreaChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts'
+import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
+import type { LineChartProps } from './LineChart'
+
+type ImplProps = Pick<
+  LineChartProps,
+  | 'data'
+  | 'index'
+  | 'categories'
+  | 'colors'
+  | 'showArea'
+  | 'valueFormatter'
+  | 'showLegend'
+  | 'showGridLines'
+  | 'curveType'
+  | 'connectNulls'
+  | 'categoryLabels'
+> & {
+  valueFormatter: (value: number) => string
+}
+
+export default function LineChartImpl({
+  data,
+  index,
+  categories,
+  colors,
+  showArea = false,
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  curveType = 'monotone',
+  connectNulls = true,
+  categoryLabels,
+}: ImplProps) {
+  const getLineColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)
+  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <ChartComponent
+        data={data}
+        margin={{ top: 5, right: 10, left: 10, bottom: 5 }}
+      >
+        {showGridLines && (
+          <CartesianGrid
+            strokeDasharray="3 3"
+            stroke="hsl(var(--border))"
+          />
+        )}
+        <XAxis
+          dataKey={index}
+          tick={{ fontSize: 12 }}
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          tickFormatter={valueFormatter}
+          tick={{ fontSize: 12 }}
+          tickLine={false}
+          axisLine={false}
+          width={56}
+        />
+        <Tooltip
+          content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}
+          cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}
+        />
+        {showLegend && categories.length > 1 && (
+          <Legend
+            verticalAlign="top"
+            height={36}
+            formatter={(value) => (
+              <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
+            )}
+          />
+        )}
+        {showArea
+          ? categories.map((category, idx) => (
+              <Area
+                key={category}
+                type={curveType}
+                dataKey={category}
+                stroke={getLineColor(idx)}
+                fill={getLineColor(idx)}
+                fillOpacity={0.2}
+                strokeWidth={2}
+                connectNulls={connectNulls}
+                dot={false}
+                activeDot={{ r: 4, strokeWidth: 0 }}
+              />
+            ))
+          : categories.map((category, idx) => (
+              <Line
+                key={category}
+                type={curveType}
+                dataKey={category}
+                stroke={getLineColor(idx)}
+                strokeWidth={2}
+                connectNulls={connectNulls}
+                dot={false}
+                activeDot={{ r: 4, strokeWidth: 0 }}
+              />
+            ))}
+      </ChartComponent>
+    </ResponsiveContainer>
+  )
+}

package/src/backend/charts/PieChart.tsx

@@ -1,17 +1,8 @@
 "use client"
 
 import * as React from 'react'
-import {
-  PieChart as RechartsPieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-  Label,
-} from 'recharts'
+import dynamic from 'next/dynamic'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
 
 export type PieChartDataItem = {
   name: string
@@ -42,6 +33,15 @@ function defaultValueFormatter(value: number): string {
   return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
 }
 
+const PieChartImpl = dynamic(() => import('./PieChartImpl'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-48 items-center justify-center">
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  ),
+})
+
 export function PieChart({
   title,
   data,
@@ -55,10 +55,6 @@ export function PieChart({
   className = '',
   emptyMessage = 'No data available',
 }: PieChartProps) {
-  const getSliceColor = (idx: number): string => {
-    return resolveChartColor(colors?.[idx], idx)
-  }
-
   const total = React.useMemo(() => {
     return data.reduce((sum, item) => sum + item.value, 0)
   }, [data])
@@ -99,56 +95,19 @@ export function PieChart({
     )
   }
 
-  const innerRadius = variant === 'donut' ? '60%' : 0
-  const outerRadius = '80%'
-
   return (
     <div className={wrapperClass}>
       {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
       <div className="h-52 w-full">
-        <ResponsiveContainer width="100%" height="100%">
-          <RechartsPieChart>
-            <Pie
-              data={data}
-              dataKey="value"
-              nameKey="name"
-              cx="50%"
-              cy="40%"
-              innerRadius={innerRadius}
-              outerRadius={outerRadius}
-              paddingAngle={2}
-              strokeWidth={0}
-            >
-              {data.map((_, idx) => (
-                <Cell key={`cell-${idx}`} fill={getSliceColor(idx)} />
-              ))}
-              {showLabel && variant === 'donut' && (
-                <Label
-                  value={valueFormatter(total)}
-                  position="center"
-                  className="fill-foreground text-2xl font-bold"
-                />
-              )}
-            </Pie>
-            {showTooltip && (
-              <Tooltip
-                content={
-                  <ChartTooltipContent
-                    valueFormatter={valueFormatter}
-                    hideLabel
-                  />
-                }
-              />
-            )}
-            <Legend
-              verticalAlign="bottom"
-              height={36}
-              formatter={(value) => (
-                <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
-              )}
-            />
-          </RechartsPieChart>
-        </ResponsiveContainer>
+        <PieChartImpl
+          data={data}
+          colors={colors}
+          variant={variant}
+          valueFormatter={valueFormatter}
+          showLabel={showLabel}
+          showTooltip={showTooltip}
+          total={total}
+        />
       </div>
     </div>
   )

package/src/backend/charts/PieChartImpl.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import * as React from 'react'
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Label,
+} from 'recharts'
+import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
+import type { PieChartProps } from './PieChart'
+
+type ImplProps = Pick<
+  PieChartProps,
+  'data' | 'colors' | 'variant' | 'valueFormatter' | 'showLabel' | 'showTooltip'
+> & {
+  valueFormatter: (value: number) => string
+  total: number
+}
+
+export default function PieChartImpl({
+  data,
+  colors,
+  variant = 'donut',
+  valueFormatter,
+  showLabel = true,
+  showTooltip = true,
+  total,
+}: ImplProps) {
+  const getSliceColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)
+  const innerRadius = variant === 'donut' ? '60%' : 0
+  const outerRadius = '80%'
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <RechartsPieChart>
+        <Pie
+          data={data}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="40%"
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          paddingAngle={2}
+          strokeWidth={0}
+        >
+          {data.map((_, idx) => (
+            <Cell key={`cell-${idx}`} fill={getSliceColor(idx)} />
+          ))}
+          {showLabel && variant === 'donut' && (
+            <Label
+              value={valueFormatter(total)}
+              position="center"
+              className="fill-foreground text-2xl font-bold"
+            />
+          )}
+        </Pie>
+        {showTooltip && (
+          <Tooltip
+            content={
+              <ChartTooltipContent
+                valueFormatter={valueFormatter}
+                hideLabel
+              />
+            }
+          />
+        )}
+        <Legend
+          verticalAlign="bottom"
+          height={36}
+          formatter={(value) => (
+            <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
+          )}
+        />
+      </RechartsPieChart>
+    </ResponsiveContainer>
+  )
+}

package/src/backend/dashboard/DashboardScreen.tsx

@@ -12,6 +12,7 @@ import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboa
 import { cn } from '@open-mercato/shared/lib/utils'
 import { GripVertical, Info, Plus, RefreshCw, Settings2, Trash2, X, Loader2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { InjectionSpot } from '../injection/InjectionSpot'
 
 type DashboardWidgetSize = 'sm' | 'md' | 'lg'
@@ -92,6 +93,7 @@ function generateId(): string {
 
 export function DashboardScreen() {
   const t = useT()
+  const organizationScopeVersion = useOrganizationScopeVersion()
   const [loading, setLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
   const [hasRegisteredWidgets, setHasRegisteredWidgets] = React.useState(true)
@@ -165,7 +167,7 @@ export function DashboardScreen() {
 
   React.useEffect(() => {
     load()
-  }, [load])
+  }, [load, organizationScopeVersion])
 
   const metaById = React.useMemo(() => {
     const map = new Map<string, WidgetMeta>()
@@ -560,6 +562,12 @@ function DashboardWidgetCard({
     loadDashboardWidgetModule(meta.loaderKey)
       .then((loaded) => {
         if (cancelled) return
+        if (!loaded) {
+          setModule(null)
+          setLoadError(t('dashboard.widget.loadError'))
+          setLoading(false)
+          return
+        }
         setModule(loaded)
         setLoading(false)
       })

package/src/backend/dashboard/__tests__/DashboardScreen.test.tsx

@@ -20,6 +20,12 @@ jest.mock('../widgetRegistry', () => ({
   loadDashboardWidgetModule: jest.fn(),
 }))
 
+let mockOrganizationScopeVersion = 0
+
+jest.mock('@open-mercato/shared/lib/frontend/useOrganizationScope', () => ({
+  useOrganizationScopeVersion: () => mockOrganizationScopeVersion,
+}))
+
 jest.mock('next/navigation', () => ({
   useRouter: () => ({
     refresh: jest.fn(),
@@ -32,6 +38,7 @@ const createMockResponse = (status: number): Response => ({ status } as Response
 
 const dict = {
   'dashboard.loadError': 'Failed to load dashboard',
+  'dashboard.widget.loadError': 'Unable to load widget.',
   'dashboard.empty.noWidgets.title': 'No dashboard widgets yet',
   'dashboard.empty.noWidgets.description': 'Dashboard widgets will appear here after you add a module.',
   'dashboard.widgets.foo.title': 'Widget Foo',
@@ -74,6 +81,7 @@ function MockWidget() {
 describe('DashboardScreen', () => {
   beforeEach(() => {
     jest.resetAllMocks()
+    mockOrganizationScopeVersion = 0
     ;(getDashboardWidgets as jest.Mock).mockReturnValue([{ key: 'foo.loader', loader: jest.fn() }])
     ;(loadDashboardWidgetModule as jest.Mock).mockResolvedValue({
       Widget: MockWidget,
@@ -98,6 +106,27 @@ describe('DashboardScreen', () => {
     expect(await screen.findByText('Widget body')).toBeInTheDocument()
   })
 
+  it('reloads the dashboard when the organization scope changes', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: true,
+      status: 200,
+      result: widgetResponse,
+      response: createMockResponse(200),
+    })
+
+    const { rerender } = renderWithProviders(<DashboardScreen />, { dict })
+
+    expect(await screen.findByText('Widget body')).toBeInTheDocument()
+    expect(apiCall).toHaveBeenCalledTimes(1)
+
+    mockOrganizationScopeVersion = 1
+    rerender(<DashboardScreen />)
+
+    await waitFor(() => {
+      expect(apiCall).toHaveBeenCalledTimes(2)
+    })
+  })
+
   it('shows an error when the layout request fails', async () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
     ;(apiCall as jest.Mock).mockResolvedValue({
@@ -134,4 +163,20 @@ describe('DashboardScreen', () => {
 
     errorSpy.mockRestore()
   })
+
+  it('shows a widget load error when the registered module cannot be found', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: true,
+      status: 200,
+      result: widgetResponse,
+      response: createMockResponse(200),
+    })
+    ;(loadDashboardWidgetModule as jest.Mock).mockResolvedValue(null)
+
+    renderWithProviders(<DashboardScreen />, { dict })
+
+    expect(await screen.findByText('Widget Foo')).toBeInTheDocument()
+    expect(await screen.findByText('Unable to load widget.')).toBeInTheDocument()
+    expect(screen.queryByText('Widget body')).not.toBeInTheDocument()
+  })
 })