@open-mercato/ui 0.6.3-develop.3894.1.352abf4240 → 0.6.3

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()
+  })
 })

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/icons/lucideRegistry.generated.tsx

@@ -104,6 +104,7 @@ import {
   Send,
   Settings,
   Shapes,
+  Share2,
   Shield,
   ShieldAlert,
   ShieldCheck,
@@ -242,6 +243,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'send': Send,
   'settings': Settings,
   'shapes': Shapes,
+  'share-2': Share2,
   'shield': Shield,
   'shield-alert': ShieldAlert,
   'shield-check': ShieldCheck,

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 }
 }