@open-mercato/ui 0.6.1-develop.3291.1.6fad645fd0 → 0.6.1

package/src/backend/inputs/__tests__/ComboboxInput.test.tsx

@@ -38,9 +38,10 @@ describe('ComboboxInput — eager label resolution', () => {
     expect(getInput(container).value).toBe('uuid-123')
     await waitFor(() => expect(getInput(container).value).toBe('Resolved uuid-123'))
     expect(resolveLabel).toHaveBeenCalledWith('uuid-123')
+    expect(resolveLabel).toHaveBeenCalledTimes(1)
   })
 
-  it('resolves the label via a synchronous resolveLabel', () => {
+  it('resolves the label via a synchronous resolveLabel', async () => {
     const { container } = render(
       <ComboboxInput
         value="uuid-123"
@@ -48,7 +49,7 @@ describe('ComboboxInput — eager label resolution', () => {
         resolveLabel={(value) => (value === 'uuid-123' ? 'Sync Label' : value)}
       />,
     )
-    expect(getInput(container).value).toBe('Sync Label')
+    await waitFor(() => expect(getInput(container).value).toBe('Sync Label'))
   })
 
   it('does not call resolveLabel when the value is already covered by suggestions', () => {
@@ -73,6 +74,36 @@ describe('ComboboxInput — eager label resolution', () => {
     expect(loadSuggestions).toHaveBeenCalledWith()
   })
 
+  it('does not reload suggestions after a self-labeled value is covered', async () => {
+    const loadSuggestions = jest.fn(async () => [{ value: 'UTC', label: 'UTC' }])
+    const { container } = render(
+      <ComboboxInput value="UTC" onChange={() => {}} loadSuggestions={loadSuggestions} />,
+    )
+
+    await waitFor(() => expect(loadSuggestions).toHaveBeenCalledTimes(1))
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 25))
+    })
+
+    expect(loadSuggestions).toHaveBeenCalledTimes(1)
+    expect(getInput(container).value).toBe('UTC')
+  })
+
+  it('does not loop when the first suggestions page cannot resolve the value', async () => {
+    const loadSuggestions = jest.fn(async () => [{ value: 'Europe/Warsaw', label: 'Europe/Warsaw' }])
+    const { container } = render(
+      <ComboboxInput value="UTC" onChange={() => {}} loadSuggestions={loadSuggestions} />,
+    )
+
+    await waitFor(() => expect(loadSuggestions).toHaveBeenCalledTimes(1))
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 25))
+    })
+
+    expect(loadSuggestions).toHaveBeenCalledTimes(1)
+    expect(getInput(container).value).toBe('UTC')
+  })
+
   it('keeps the resolved label after a blur revert when custom values are disallowed', async () => {
     const onChange = jest.fn()
     const { container } = render(

package/src/backend/progress/useProgressPoll.ts

@@ -4,6 +4,7 @@ import { apiCall } from '../utils/apiCall'
 import {
   subscribeProgressUpdate,
   subscribeProgressComplete,
+  type ProgressUpdateDetail,
 } from '@open-mercato/shared/lib/frontend/progressEvents'
 
 export type ProgressJobDto = {
@@ -37,6 +38,62 @@ function isVisibleProgressJob(job: ProgressJobDto): boolean {
   return job.meta?.hiddenFromTopBar !== true
 }
 
+export function isLocalProgressJob(job: ProgressJobDto): boolean {
+  return job.id.startsWith('client:')
+}
+
+function isTerminalStatus(status: ProgressJobDto['status']): boolean {
+  return status === 'completed' || status === 'failed' || status === 'cancelled'
+}
+
+function localJobFromProgressDetail(detail: ProgressUpdateDetail): ProgressJobDto {
+  const now = new Date().toISOString()
+  const status = detail.status
+  return {
+    id: detail.jobId,
+    jobType: detail.jobType,
+    name: detail.name,
+    description: detail.description ?? null,
+    meta: detail.meta ?? null,
+    status,
+    progressPercent: detail.progressPercent,
+    processedCount: detail.processedCount,
+    totalCount: detail.totalCount ?? null,
+    etaSeconds: detail.etaSeconds ?? null,
+    cancellable: detail.cancellable ?? false,
+    startedAt: detail.startedAt ?? now,
+    finishedAt: detail.finishedAt ?? (isTerminalStatus(status) ? now : null),
+    errorMessage: detail.errorMessage ?? null,
+  }
+}
+
+function upsertLocalJob(list: ProgressJobDto[], job: ProgressJobDto): ProgressJobDto[] {
+  if (!isVisibleProgressJob(job)) {
+    return list.filter((item) => item.id !== job.id)
+  }
+  const next = [job, ...list.filter((item) => item.id !== job.id)]
+  return next.sort(
+    (a, b) =>
+      new Date(b.startedAt ?? b.finishedAt ?? 0).getTime()
+      - new Date(a.startedAt ?? a.finishedAt ?? 0).getTime(),
+  )
+}
+
+export function applyLocalProgressUpdate(
+  detail: ProgressUpdateDetail,
+  setActiveJobs: React.Dispatch<React.SetStateAction<ProgressJobDto[]>>,
+  setRecentlyCompleted: React.Dispatch<React.SetStateAction<ProgressJobDto[]>>,
+): void {
+  const job = localJobFromProgressDetail(detail)
+  if (isTerminalStatus(job.status)) {
+    setActiveJobs((prev) => prev.filter((item) => item.id !== job.id))
+    setRecentlyCompleted((prev) => upsertLocalJob(prev, job).slice(0, 10))
+    return
+  }
+  setRecentlyCompleted((prev) => prev.filter((item) => item.id !== job.id))
+  setActiveJobs((prev) => upsertLocalJob(prev, job).slice(0, 50))
+}
+
 export function useProgressPoll(): UseProgressPollResult {
   const [activeJobs, setActiveJobs] = React.useState<ProgressJobDto[]>([])
   const [recentlyCompleted, setRecentlyCompleted] = React.useState<ProgressJobDto[]>([])
@@ -49,8 +106,14 @@ export function useProgressPoll(): UseProgressPollResult {
         '/api/progress/active'
       )
       if (result.ok && result.result) {
-        setActiveJobs(result.result.active.filter(isVisibleProgressJob))
-        setRecentlyCompleted(result.result.recentlyCompleted.filter(isVisibleProgressJob))
+        setActiveJobs((prev) => [
+          ...prev.filter((job) => isLocalProgressJob(job) && !isTerminalStatus(job.status)),
+          ...result.result!.active.filter(isVisibleProgressJob),
+        ])
+        setRecentlyCompleted((prev) => [
+          ...prev.filter((job) => isLocalProgressJob(job) && isTerminalStatus(job.status)),
+          ...result.result!.recentlyCompleted.filter(isVisibleProgressJob),
+        ].slice(0, 10))
         setError(null)
       }
     } catch (err) {
@@ -88,7 +151,9 @@ export function useProgressPoll(): UseProgressPollResult {
   }, [fetchJobs])
 
   React.useEffect(() => {
-    const unsubUpdate = subscribeProgressUpdate(() => refresh())
+    const unsubUpdate = subscribeProgressUpdate((detail) => {
+      applyLocalProgressUpdate(detail, setActiveJobs, setRecentlyCompleted)
+    })
     const unsubComplete = subscribeProgressComplete(() => refresh())
     return () => {
       unsubUpdate()

package/src/backend/progress/useProgressSse.ts

@@ -2,7 +2,9 @@
 import * as React from 'react'
 import { apiCall } from '../utils/apiCall'
 import { useAppEvent } from '../injection/useAppEvent'
+import { subscribeProgressUpdate } from '@open-mercato/shared/lib/frontend/progressEvents'
 import type { ProgressJobDto, UseProgressPollResult } from './useProgressPoll'
+import { applyLocalProgressUpdate, isLocalProgressJob } from './useProgressPoll'
 
 function isVisibleProgressJob(job: ProgressJobDto): boolean {
   return job.meta?.hiddenFromTopBar !== true
@@ -32,8 +34,14 @@ export function useProgressSse(): UseProgressPollResult {
         '/api/progress/active',
       )
       if (result.ok && result.result) {
-        setActiveJobs(result.result.active.filter(isVisibleProgressJob))
-        setRecentlyCompleted(result.result.recentlyCompleted.filter(isVisibleProgressJob))
+        setActiveJobs((prev) => [
+          ...prev.filter((job) => isLocalProgressJob(job) && (job.status === 'pending' || job.status === 'running')),
+          ...result.result!.active.filter(isVisibleProgressJob),
+        ])
+        setRecentlyCompleted((prev) => [
+          ...prev.filter((job) => isLocalProgressJob(job) && (job.status === 'completed' || job.status === 'failed')),
+          ...result.result!.recentlyCompleted.filter(isVisibleProgressJob),
+        ].slice(0, 10))
         setError(null)
       }
     } catch (err) {
@@ -51,6 +59,12 @@ export function useProgressSse(): UseProgressPollResult {
     void fetchJobs()
   }, [fetchJobs])
 
+  React.useEffect(() => {
+    return subscribeProgressUpdate((detail) => {
+      applyLocalProgressUpdate(detail, setActiveJobs, setRecentlyCompleted)
+    })
+  }, [])
+
   useAppEvent(
     'progress.job.updated',
     (event) => {

package/src/backend/utils/__tests__/bulkDelete.test.ts

@@ -1,6 +1,15 @@
 import { groupBulkDeleteFailures, runBulkDelete, type BulkDeleteFailure } from '../bulkDelete'
+import { emitProgressUpdate } from '@open-mercato/shared/lib/frontend/progressEvents'
+
+jest.mock('@open-mercato/shared/lib/frontend/progressEvents', () => ({
+  emitProgressUpdate: jest.fn(),
+}))
 
 describe('runBulkDelete', () => {
+  beforeEach(() => {
+    jest.mocked(emitProgressUpdate).mockClear()
+  })
+
   it('captures error message and code from thrown error', async () => {
     const dependencyErr = Object.assign(new Error('Cannot delete company: linked deals (2).'), {
       code: 'COMPANY_HAS_DEPENDENTS',
@@ -66,6 +75,39 @@ describe('runBulkDelete', () => {
       warnSpy.mockRestore()
     }
   })
+
+  it('emits client progress events when progress metadata is provided', async () => {
+    const rows = [{ id: 'a' }, { id: 'b' }]
+    const deleteOne = jest.fn().mockResolvedValue(undefined)
+
+    await runBulkDelete(rows, deleteOne, {
+      progress: {
+        jobId: 'client:test',
+        jobType: 'customers.people.bulk_delete',
+        name: 'Delete selected people',
+      },
+    })
+
+    const calls = jest.mocked(emitProgressUpdate).mock.calls.map(([detail]) => detail)
+    expect(calls).toHaveLength(4)
+    expect(calls[0]).toMatchObject({
+      jobId: 'client:test',
+      status: 'running',
+      processedCount: 0,
+      totalCount: 2,
+      progressPercent: 0,
+    })
+    expect(calls[2]).toMatchObject({
+      status: 'running',
+      processedCount: 2,
+      progressPercent: 100,
+    })
+    expect(calls[3]).toMatchObject({
+      status: 'completed',
+      processedCount: 2,
+      progressPercent: 100,
+    })
+  })
 })
 
 describe('groupBulkDeleteFailures', () => {

package/src/backend/utils/bulkDelete.ts

@@ -1,5 +1,7 @@
 "use client"
 
+import { emitProgressUpdate } from '@open-mercato/shared/lib/frontend/progressEvents'
+
 export type BulkDeleteFailure = {
   id: string
   code: string | null
@@ -14,6 +16,35 @@ export type BulkDeleteOutcome<T extends { id: string }> = {
 export type BulkDeleteOptions = {
   fallbackErrorMessage?: string
   logTag?: string
+  progress?: {
+    jobId?: string
+    jobType: string
+    name: string
+    description?: string | null
+    meta?: Record<string, unknown> | null
+  }
+}
+
+function createClientProgressJobId(jobType: string): string {
+  const cryptoRef =
+    typeof globalThis !== 'undefined'
+      ? (globalThis as { crypto?: { randomUUID?: () => string } }).crypto
+      : undefined
+  if (cryptoRef && typeof cryptoRef.randomUUID === 'function') {
+    return `client:${cryptoRef.randomUUID()}`
+  }
+  return `client:${jobType}:${Date.now()}:${Math.random().toString(36).slice(2)}`
+}
+
+function calculateProgress(processed: number, total: number): number {
+  if (total <= 0) return 100
+  return Math.max(0, Math.min(100, Math.round((processed / total) * 100)))
+}
+
+function calculateEtaSeconds(startedAtMs: number, processed: number, total: number): number | null {
+  if (processed <= 0 || processed >= total) return null
+  const elapsedSeconds = Math.max(1, Math.round((Date.now() - startedAtMs) / 1000))
+  return Math.ceil((elapsedSeconds / processed) * (total - processed))
 }
 
 export async function runBulkDelete<T extends { id: string }>(
@@ -25,6 +56,26 @@ export async function runBulkDelete<T extends { id: string }>(
   const logTag = options?.logTag
   const succeeded: T[] = []
   const failures: BulkDeleteFailure[] = []
+  const progress = options?.progress
+  const progressJobId = progress && rows.length > 0 ? progress.jobId ?? createClientProgressJobId(progress.jobType) : null
+  const startedAtMs = Date.now()
+  const startedAt = new Date(startedAtMs).toISOString()
+  if (progress && progressJobId) {
+    emitProgressUpdate({
+      jobId: progressJobId,
+      jobType: progress.jobType,
+      name: progress.name,
+      description: progress.description ?? null,
+      meta: progress.meta ?? null,
+      status: 'running',
+      progressPercent: 0,
+      processedCount: 0,
+      totalCount: rows.length,
+      etaSeconds: null,
+      cancellable: false,
+      startedAt,
+    })
+  }
   for (const row of rows) {
     try {
       await deleteOne(row)
@@ -40,6 +91,48 @@ export async function runBulkDelete<T extends { id: string }>(
         console.warn(`[${logTag}] bulk delete failed`, { id: row.id, code, message, err })
       }
     }
+    if (progress && progressJobId) {
+      const processed = succeeded.length + failures.length
+      emitProgressUpdate({
+        jobId: progressJobId,
+        jobType: progress.jobType,
+        name: progress.name,
+        description: progress.description ?? null,
+        meta: progress.meta ?? null,
+        status: 'running',
+        progressPercent: calculateProgress(processed, rows.length),
+        processedCount: processed,
+        totalCount: rows.length,
+        etaSeconds: calculateEtaSeconds(startedAtMs, processed, rows.length),
+        cancellable: false,
+        startedAt,
+      })
+    }
+  }
+  if (progress && progressJobId) {
+    emitProgressUpdate({
+      jobId: progressJobId,
+      jobType: progress.jobType,
+      name: progress.name,
+      description: progress.description ?? null,
+      meta: {
+        ...(progress.meta ?? {}),
+        succeededCount: succeeded.length,
+        failedCount: failures.length,
+      },
+      status: failures.length === rows.length && rows.length > 0 ? 'failed' : 'completed',
+      progressPercent: 100,
+      processedCount: rows.length,
+      totalCount: rows.length,
+      etaSeconds: 0,
+      cancellable: false,
+      startedAt,
+      finishedAt: new Date().toISOString(),
+      errorMessage:
+        failures.length === rows.length && failures[0]?.message
+          ? failures[0].message
+          : null,
+    })
   }
   return { succeeded, failures }
 }