@open-mercato/ui 0.6.4-develop.3944.1.4100aa7fbe → 0.6.4-develop.3949.1.adc3d0b3b1

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

@@ -560,6 +560,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

@@ -32,6 +32,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',
@@ -134,4 +135,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()
+  })
 })

package/src/backend/dashboard/__tests__/widgetRegistry.test.ts

@@ -0,0 +1,60 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import type { ModuleDashboardWidgetEntry } from '@open-mercato/shared/modules/registry'
+
+function createEntry(loader = jest.fn().mockResolvedValue({ Widget: () => null })): ModuleDashboardWidgetEntry {
+  return {
+    moduleId: 'example',
+    key: 'example.dashboard.widget',
+    source: 'app',
+    loader,
+  }
+}
+
+describe('dashboard widget registry', () => {
+  beforeEach(() => {
+    jest.resetModules()
+  })
+
+  it('waits for client bootstrap registration before resolving widget modules', async () => {
+    const { loadDashboardWidgetModule, registerDashboardWidgets } = await import('../widgetRegistry')
+    const loader = jest.fn().mockResolvedValue({ Widget: () => null })
+    const pending = loadDashboardWidgetModule('example.dashboard.widget')
+    let resolved = false
+    pending.then(() => {
+      resolved = true
+    })
+
+    await Promise.resolve()
+    expect(resolved).toBe(false)
+    expect(loader).not.toHaveBeenCalled()
+
+    registerDashboardWidgets([createEntry(loader)])
+
+    await expect(pending).resolves.toEqual({ Widget: expect.any(Function) })
+    expect(loader).toHaveBeenCalledTimes(1)
+  })
+
+  it('uses the latest entries after dashboard widgets are re-registered', async () => {
+    const { loadDashboardWidgetModule, registerDashboardWidgets } = await import('../widgetRegistry')
+    const firstLoader = jest.fn().mockResolvedValue({ Widget: () => null })
+    const secondLoader = jest.fn().mockResolvedValue({ Widget: () => null })
+
+    registerDashboardWidgets([createEntry(firstLoader)])
+    await loadDashboardWidgetModule('example.dashboard.widget')
+
+    registerDashboardWidgets([
+      {
+        ...createEntry(secondLoader),
+        key: 'example.dashboard.other',
+      },
+    ])
+
+    await loadDashboardWidgetModule('example.dashboard.other')
+
+    expect(firstLoader).toHaveBeenCalledTimes(1)
+    expect(secondLoader).toHaveBeenCalledTimes(1)
+  })
+})

package/src/backend/dashboard/widgetRegistry.ts

@@ -3,15 +3,30 @@ import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboa
 import { applyDashboardWidgetOverridesToEntries } from '@open-mercato/shared/modules/overrides'
 
 type Entry = ModuleDashboardWidgetEntry
+type LoadedWidgetModule = DashboardWidgetModule<any>
+
+const cache = new Map<string, Promise<LoadedWidgetModule>>()
 
 // Registration pattern for publishable packages
 let _dashboardWidgetEntries: Entry[] | null = null
+let registrationWaiters: Array<(entries: Entry[]) => void> = []
+
+function resolveRegistrationWaiters(entries: Entry[]) {
+  const waiters = registrationWaiters
+  registrationWaiters = []
+  for (const resolve of waiters) {
+    resolve(entries)
+  }
+}
 
 export function registerDashboardWidgets(entries: Entry[]) {
   if (_dashboardWidgetEntries !== null && process.env.NODE_ENV === 'development') {
     console.debug('[Bootstrap] Dashboard widgets re-registered (this may occur during HMR)')
   }
   _dashboardWidgetEntries = applyDashboardWidgetOverridesToEntries(entries)
+  entriesPromise = Promise.resolve(_dashboardWidgetEntries)
+  cache.clear()
+  resolveRegistrationWaiters(_dashboardWidgetEntries)
 }
 
 export function getDashboardWidgets(): Entry[] {
@@ -28,8 +43,15 @@ export function getDashboardWidgets(): Entry[] {
 let entriesPromise: Promise<Entry[]> | null = null
 
 async function getEntries(): Promise<Entry[]> {
+  if (_dashboardWidgetEntries) {
+    return _dashboardWidgetEntries
+  }
   if (!entriesPromise) {
-    const promise = Promise.resolve().then(() => getDashboardWidgets())
+    const promise = typeof window !== 'undefined'
+      ? new Promise<Entry[]>((resolve) => {
+        registrationWaiters.push(resolve)
+      })
+      : Promise.resolve().then(() => getDashboardWidgets())
     entriesPromise = promise.catch((err) => {
       // Clear cache on error so next call can retry after registration
       if (entriesPromise === promise) {
@@ -41,10 +63,6 @@ async function getEntries(): Promise<Entry[]> {
   return entriesPromise
 }
 
-type LoadedWidgetModule = DashboardWidgetModule<any>
-
-const cache = new Map<string, Promise<LoadedWidgetModule>>()
-
 async function findEntry(loaderKey: string): Promise<Entry | undefined> {
   const entries = await getEntries()
   return entries.find((entry) => entry.key === loaderKey)

package/src/backend/injection/useInjectionDataWidgets.ts

@@ -2,7 +2,12 @@
 
 import * as React from 'react'
 import type { InjectionSpotId } from '@open-mercato/shared/modules/widgets/injection'
-import { loadInjectionDataWidgetsForSpot, type LoadedInjectionDataWidget } from '@open-mercato/shared/modules/widgets/injection-loader'
+import {
+  loadInjectionDataWidgetsForSpot,
+  getInjectionRegistryVersion,
+  subscribeToInjectionRegistryChanges,
+  type LoadedInjectionDataWidget,
+} from '@open-mercato/shared/modules/widgets/injection-loader'
 
 export function useInjectionDataWidgets(spotId: InjectionSpotId): {
   widgets: LoadedInjectionDataWidget[]
@@ -12,6 +17,17 @@ export function useInjectionDataWidgets(spotId: InjectionSpotId): {
   const [widgets, setWidgets] = React.useState<LoadedInjectionDataWidget[]>([])
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
+  // Re-load when the injection registry is (re-)populated. With the async
+  // ClientBootstrap, registration can land after this hook first runs; the
+  // version bump triggers a reload so injected menus/columns/fields appear
+  // without requiring an unrelated re-render.
+  const [registryVersion, setRegistryVersion] = React.useState(() => getInjectionRegistryVersion())
+
+  React.useEffect(() => {
+    return subscribeToInjectionRegistryChanges(() => {
+      setRegistryVersion(getInjectionRegistryVersion())
+    })
+  }, [])
 
   React.useEffect(() => {
     let mounted = true
@@ -35,7 +51,7 @@ export function useInjectionDataWidgets(spotId: InjectionSpotId): {
     return () => {
       mounted = false
     }
-  }, [spotId])
+  }, [spotId, registryVersion])
 
   return { widgets, isLoading, error }
 }