@open-mercato/core 0.4.2-canary-e6bf6a353e → 0.4.2-canary-49d47ff90e

package/src/modules/sales/notifications.client.ts

@@ -0,0 +1,65 @@
+'use client'
+
+import type { NotificationTypeDefinition } from '@open-mercato/shared/modules/notifications/types'
+import { SalesOrderCreatedRenderer } from './widgets/notifications/SalesOrderCreatedRenderer'
+import { SalesQuoteCreatedRenderer } from './widgets/notifications/SalesQuoteCreatedRenderer'
+
+/**
+ * Client-side notification type definitions with custom renderers.
+ * These should be used in client components where custom rendering is needed.
+ *
+ * Example usage:
+ * ```tsx
+ * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'
+ *
+ * // Use in NotificationPanel or NotificationItem
+ * const renderer = salesNotificationTypes.find(t => t.type === notification.type)?.Renderer
+ * if (renderer) {
+ *   return <renderer notification={notification} onAction={...} onDismiss={...} actions={...} />
+ * }
+ * ```
+ */
+export const salesNotificationTypes: NotificationTypeDefinition[] = [
+  {
+    type: 'sales.order.created',
+    module: 'sales',
+    titleKey: 'sales.notifications.order.created.title',
+    bodyKey: 'sales.notifications.order.created.body',
+    icon: 'shopping-cart',
+    severity: 'info',
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/orders/{sourceEntityId}',
+        icon: 'external-link',
+      },
+    ],
+    linkHref: '/backend/sales/orders/{sourceEntityId}',
+    Renderer: SalesOrderCreatedRenderer,
+    expiresAfterHours: 168,
+  },
+  {
+    type: 'sales.quote.created',
+    module: 'sales',
+    titleKey: 'sales.notifications.quote.created.title',
+    bodyKey: 'sales.notifications.quote.created.body',
+    icon: 'file-text',
+    severity: 'info',
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/quotes/{sourceEntityId}',
+        icon: 'external-link',
+      },
+    ],
+    linkHref: '/backend/sales/quotes/{sourceEntityId}',
+    Renderer: SalesQuoteCreatedRenderer,
+    expiresAfterHours: 168,
+  },
+]
+
+export default salesNotificationTypes

package/src/modules/sales/notifications.ts

@@ -0,0 +1,82 @@
+import type { NotificationTypeDefinition } from '@open-mercato/shared/modules/notifications/types'
+
+export const notificationTypes: NotificationTypeDefinition[] = [
+  {
+    type: 'sales.order.created',
+    module: 'sales',
+    titleKey: 'sales.notifications.order.created.title',
+    bodyKey: 'sales.notifications.order.created.body',
+    icon: 'shopping-cart',
+    severity: 'info',
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/orders/{sourceEntityId}',
+        icon: 'external-link',
+      },
+    ],
+    linkHref: '/backend/sales/orders/{sourceEntityId}',
+    expiresAfterHours: 168, // 7 days
+  },
+  {
+    type: 'sales.quote.created',
+    module: 'sales',
+    titleKey: 'sales.notifications.quote.created.title',
+    bodyKey: 'sales.notifications.quote.created.body',
+    icon: 'file-text',
+    severity: 'info',
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/quotes/{sourceEntityId}',
+        icon: 'external-link',
+      },
+    ],
+    linkHref: '/backend/sales/quotes/{sourceEntityId}',
+    expiresAfterHours: 168, // 7 days
+  },
+  {
+    type: 'sales.payment.received',
+    module: 'sales',
+    titleKey: 'sales.notifications.payment.received.title',
+    bodyKey: 'sales.notifications.payment.received.body',
+    icon: 'credit-card',
+    severity: 'success',
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/orders/{sourceEntityId}',
+        icon: 'external-link',
+      },
+    ],
+    linkHref: '/backend/sales/orders/{sourceEntityId}',
+    expiresAfterHours: 168, // 7 days
+  },
+  {
+    type: 'sales.quote.expiring',
+    module: 'sales',
+    titleKey: 'sales.notifications.quote.expiring.title',
+    bodyKey: 'sales.notifications.quote.expiring.body',
+    icon: 'clock',
+    severity: 'warning',
+    actions: [
+      {
+        id: 'view',
+        labelKey: 'common.view',
+        variant: 'outline',
+        href: '/backend/sales/quotes/{sourceEntityId}',
+        icon: 'external-link',
+      },
+    ],
+    linkHref: '/backend/sales/quotes/{sourceEntityId}',
+    expiresAfterHours: 72, // 3 days
+  },
+]
+
+export default notificationTypes

package/src/modules/sales/subscribers/quote-expiring-notification.ts

@@ -0,0 +1,53 @@
+import type { EntityManager } from '@mikro-orm/postgresql'
+import { resolveNotificationService } from '../../notifications/lib/notificationService'
+import { buildFeatureNotificationFromType } from '../../notifications/lib/notificationBuilder'
+import { notificationTypes } from '../notifications'
+
+export const metadata = {
+  event: 'sales.quote.expiring',
+  persistent: true,
+  id: 'sales:quote-expiring-notification',
+}
+
+type QuoteExpiringPayload = {
+  quoteId: string
+  quoteNumber: string
+  expiresAt: string
+  daysUntilExpiry: number
+  customerName?: string | null
+  totalAmount?: string | null
+  tenantId: string
+  organizationId?: string | null
+}
+
+type ResolverContext = {
+  resolve: <T = unknown>(name: string) => T
+}
+
+export default async function handle(payload: QuoteExpiringPayload, ctx: ResolverContext) {
+  try {
+    const notificationService = resolveNotificationService(ctx)
+    const typeDef = notificationTypes.find((type) => type.type === 'sales.quote.expiring')
+    if (!typeDef) return
+
+    const notificationInput = buildFeatureNotificationFromType(typeDef, {
+      requiredFeature: 'sales.quotes.manage',
+      bodyVariables: {
+        quoteNumber: payload.quoteNumber,
+        expiresAt: payload.expiresAt,
+        daysUntilExpiry: String(payload.daysUntilExpiry),
+        customerName: payload.customerName ?? '',
+      },
+      sourceEntityType: 'sales:quote',
+      sourceEntityId: payload.quoteId,
+      linkHref: `/backend/sales/quotes/${payload.quoteId}`,
+    })
+
+    await notificationService.createForFeature(notificationInput, {
+      tenantId: payload.tenantId,
+      organizationId: payload.organizationId ?? null,
+    })
+  } catch (err) {
+    console.error('[sales:quote-expiring-notification] Failed to create notification:', err)
+  }
+}

package/src/modules/sales/widgets/notifications/SalesOrderCreatedRenderer.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import * as React from 'react'
+import { ShoppingCart, ExternalLink, DollarSign, User, Calendar } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'
+import { formatMoney } from '../../components/documents/lineItemUtils'
+import { useSalesDocumentTotals } from './useSalesDocumentTotals'
+
+function formatTimeAgo(dateString: string, t: (key: string, fallback?: string) => string): string {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return t('common.time.justNow', 'just now')
+  if (diffMins < 60) return t('common.time.minutesAgo', '{count}m ago').replace('{count}', String(diffMins))
+  if (diffHours < 24) return t('common.time.hoursAgo', '{count}h ago').replace('{count}', String(diffHours))
+  if (diffDays < 7) return t('common.time.daysAgo', '{count}d ago').replace('{count}', String(diffDays))
+  return date.toLocaleDateString()
+}
+
+function normalizeTotal(value?: string | null): string | null {
+  if (!value) return null
+  let trimmed = value.trim()
+  if (trimmed.startsWith('(') && trimmed.endsWith(')')) {
+    trimmed = trimmed.slice(1, -1).trim()
+  }
+  return trimmed.length ? trimmed : null
+}
+
+export function SalesOrderCreatedRenderer({
+  notification,
+  onAction,
+  onDismiss,
+  actions = [],
+}: NotificationRendererProps) {
+  const t = useT()
+  const router = useRouter()
+  const [executing, setExecuting] = React.useState(false)
+  const isUnread = notification.status === 'unread'
+  const orderNumber = notification.bodyVariables?.orderNumber ?? notification.titleVariables?.orderNumber
+  const fallbackTotal =
+    normalizeTotal(notification.bodyVariables?.totalAmount ?? null) ??
+    normalizeTotal(notification.bodyVariables?.total ?? null)
+  const { totals } = useSalesDocumentTotals('order', notification.sourceEntityId)
+
+  const currentTotal =
+    totals && typeof totals.grandTotalGrossAmount === 'number'
+      ? formatMoney(totals.grandTotalGrossAmount, totals.currencyCode)
+      : fallbackTotal
+
+  const viewAction = actions.find((action) => action.id === 'view') ?? actions[0] ?? null
+
+  const handleView = async () => {
+    if (!viewAction) {
+      if (notification.linkHref) router.push(notification.linkHref)
+      return
+    }
+    setExecuting(true)
+    try {
+      await onAction(viewAction.id)
+    } finally {
+      setExecuting(false)
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors border-l-4 border-l-blue-500',
+        isUnread && 'bg-blue-50/50 dark:bg-blue-950/20'
+      )}
+      onClick={handleView}
+    >
+      {isUnread && (
+        <div className="absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary" />
+      )}
+
+      <div className="flex gap-3">
+        <div className="flex-shrink-0 mt-0.5">
+          <div className="h-10 w-10 rounded-lg bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center">
+            <ShoppingCart className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+          </div>
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div>
+              <h4 className={cn('text-sm font-medium', isUnread && 'font-semibold')}>
+                {notification.title}
+              </h4>
+              {orderNumber && (
+                <div className="flex items-center gap-1 mt-0.5">
+                  <span className="text-xs font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                    #{orderNumber}
+                  </span>
+                </div>
+              )}
+            </div>
+            <span className="flex-shrink-0 text-xs text-muted-foreground flex items-center gap-1">
+              <Calendar className="h-3 w-3" />
+              {formatTimeAgo(notification.createdAt, t)}
+            </span>
+          </div>
+
+          <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
+            {currentTotal && (
+              <div className="flex items-center gap-1">
+                <DollarSign className="h-3 w-3" />
+                <span className="font-medium text-foreground">{currentTotal}</span>
+              </div>
+            )}
+            <div className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              <span>{t('sales.notifications.renderer.assignedToYou', 'Assigned to you')}</span>
+            </div>
+          </div>
+
+          <div className="mt-3 flex gap-2">
+            <Button
+              variant="default"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleView()
+              }}
+              disabled={executing || (!viewAction && !notification.linkHref)}
+              className="gap-1"
+            >
+              <ExternalLink className="h-3 w-3" />
+              {t('sales.notifications.renderer.viewOrder', 'View Order')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation()
+                onDismiss()
+              }}
+            >
+              {t('notifications.actions.dismiss', 'Dismiss')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SalesOrderCreatedRenderer

package/src/modules/sales/widgets/notifications/SalesQuoteCreatedRenderer.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import * as React from 'react'
+import { FileText, ExternalLink, DollarSign, User, Calendar } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'
+import { formatMoney } from '../../components/documents/lineItemUtils'
+import { useSalesDocumentTotals } from './useSalesDocumentTotals'
+
+function formatTimeAgo(dateString: string, t: (key: string, fallback?: string) => string): string {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return t('common.time.justNow', 'just now')
+  if (diffMins < 60) return t('common.time.minutesAgo', '{count}m ago').replace('{count}', String(diffMins))
+  if (diffHours < 24) return t('common.time.hoursAgo', '{count}h ago').replace('{count}', String(diffHours))
+  if (diffDays < 7) return t('common.time.daysAgo', '{count}d ago').replace('{count}', String(diffDays))
+  return date.toLocaleDateString()
+}
+
+function normalizeTotal(value?: string | null): string | null {
+  if (!value) return null
+  let trimmed = value.trim()
+  if (trimmed.startsWith('(') && trimmed.endsWith(')')) {
+    trimmed = trimmed.slice(1, -1).trim()
+  }
+  return trimmed.length ? trimmed : null
+}
+
+export function SalesQuoteCreatedRenderer({
+  notification,
+  onAction,
+  onDismiss,
+  actions = [],
+}: NotificationRendererProps) {
+  const t = useT()
+  const router = useRouter()
+  const [executing, setExecuting] = React.useState(false)
+  const isUnread = notification.status === 'unread'
+  const quoteNumber = notification.bodyVariables?.quoteNumber ?? notification.titleVariables?.quoteNumber
+  const fallbackTotal =
+    normalizeTotal(notification.bodyVariables?.totalAmount ?? null) ??
+    normalizeTotal(notification.bodyVariables?.total ?? null)
+  const { totals } = useSalesDocumentTotals('quote', notification.sourceEntityId)
+
+  const currentTotal =
+    totals && typeof totals.grandTotalGrossAmount === 'number'
+      ? formatMoney(totals.grandTotalGrossAmount, totals.currencyCode)
+      : fallbackTotal
+
+  const viewAction = actions.find((action) => action.id === 'view') ?? actions[0] ?? null
+
+  const handleView = async () => {
+    if (!viewAction) {
+      if (notification.linkHref) router.push(notification.linkHref)
+      return
+    }
+    setExecuting(true)
+    try {
+      await onAction(viewAction.id)
+    } finally {
+      setExecuting(false)
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors border-l-4 border-l-amber-500',
+        isUnread && 'bg-amber-50/50 dark:bg-amber-950/20'
+      )}
+      onClick={handleView}
+    >
+      {isUnread && (
+        <div className="absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary" />
+      )}
+
+      <div className="flex gap-3">
+        <div className="flex-shrink-0 mt-0.5">
+          <div className="h-10 w-10 rounded-lg bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
+            <FileText className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+          </div>
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div>
+              <h4 className={cn('text-sm font-medium', isUnread && 'font-semibold')}>
+                {notification.title}
+              </h4>
+              {quoteNumber && (
+                <div className="flex items-center gap-1 mt-0.5">
+                  <span className="text-xs font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                    #{quoteNumber}
+                  </span>
+                </div>
+              )}
+            </div>
+            <span className="flex-shrink-0 text-xs text-muted-foreground flex items-center gap-1">
+              <Calendar className="h-3 w-3" />
+              {formatTimeAgo(notification.createdAt, t)}
+            </span>
+          </div>
+
+          <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
+            {currentTotal && (
+              <div className="flex items-center gap-1">
+                <DollarSign className="h-3 w-3" />
+                <span className="font-medium text-foreground">{currentTotal}</span>
+              </div>
+            )}
+            <div className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              <span>{t('sales.notifications.renderer.pendingReview', 'Pending review')}</span>
+            </div>
+          </div>
+
+          <div className="mt-3 flex gap-2">
+            <Button
+              variant="default"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleView()
+              }}
+              disabled={executing || (!viewAction && !notification.linkHref)}
+              className="gap-1"
+            >
+              <ExternalLink className="h-3 w-3" />
+              {t('sales.notifications.renderer.viewQuote', 'View Quote')}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation()
+                onDismiss()
+              }}
+            >
+              {t('notifications.actions.dismiss', 'Dismiss')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SalesQuoteCreatedRenderer

package/src/modules/sales/widgets/notifications/index.ts

@@ -0,0 +1,2 @@
+export { SalesOrderCreatedRenderer } from './SalesOrderCreatedRenderer'
+export { SalesQuoteCreatedRenderer } from './SalesQuoteCreatedRenderer'

package/src/modules/sales/widgets/notifications/useSalesDocumentTotals.ts

@@ -0,0 +1,81 @@
+'use client'
+
+import * as React from 'react'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+
+type DocumentKind = 'order' | 'quote'
+
+type DocumentTotals = {
+  grandTotalGrossAmount: number | null
+  currencyCode: string | null
+}
+
+type DocumentListResponse = {
+  items?: Array<{
+    grandTotalGrossAmount?: number | string | null
+    currencyCode?: string | null
+  }>
+}
+
+const REFRESH_INTERVAL_MS = 30000
+
+function buildDocumentTotalsUrl(kind: DocumentKind, documentId: string) {
+  const params = new URLSearchParams({ id: documentId, page: '1', pageSize: '1' })
+  const collection = kind === 'order' ? 'orders' : 'quotes'
+  return `/api/sales/${collection}?${params.toString()}`
+}
+
+function extractTotals(payload: DocumentListResponse | null): DocumentTotals | null {
+  const item = payload?.items?.[0]
+  if (!item) return null
+  const rawAmount = item.grandTotalGrossAmount
+  let grandTotalGrossAmount: number | null = null
+  if (typeof rawAmount === 'number') {
+    grandTotalGrossAmount = Number.isNaN(rawAmount) ? null : rawAmount
+  } else if (typeof rawAmount === 'string' && rawAmount.trim().length) {
+    const parsed = Number(rawAmount)
+    grandTotalGrossAmount = Number.isNaN(parsed) ? null : parsed
+  }
+  return {
+    grandTotalGrossAmount,
+    currencyCode: typeof item.currencyCode === 'string' ? item.currencyCode : null,
+  }
+}
+
+export function useSalesDocumentTotals(kind: DocumentKind, documentId?: string | null) {
+  const [totals, setTotals] = React.useState<DocumentTotals | null>(null)
+
+  React.useEffect(() => {
+    if (!documentId) {
+      setTotals(null)
+      return
+    }
+
+    let active = true
+
+    const loadTotals = async () => {
+      try {
+        const call = await apiCall<DocumentListResponse>(buildDocumentTotalsUrl(kind, documentId))
+        if (!active) return
+        if (call.ok) {
+          const nextTotals = extractTotals(call.result ?? null)
+          setTotals(nextTotals)
+        }
+      } catch {
+        if (active) {
+          setTotals(null)
+        }
+      }
+    }
+
+    loadTotals()
+    const interval = setInterval(loadTotals, REFRESH_INTERVAL_MS)
+
+    return () => {
+      active = false
+      clearInterval(interval)
+    }
+  }, [kind, documentId])
+
+  return { totals }
+}

package/src/modules/staff/backend/staff/team-members/page.tsx

@@ -434,7 +434,7 @@ export default function StaffTeamMembersPage() {
             <RowActions
               items={[
                 { id: 'edit', label: labels.actions.edit, onSelect: () => { router.push(`/backend/staff/team-members/${row.id}`) } },
-                { label: labels.actions.delete, destructive: true, onSelect: () => { void handleDelete(row) } },
+                { id: 'delete', label: labels.actions.delete, destructive: true, onSelect: () => { void handleDelete(row) } },
               ]}
             />
           ) : null}

package/src/modules/staff/backend/staff/team-roles/page.tsx

@@ -345,8 +345,8 @@ export default function StaffTeamRolesPage() {
           rowActions={(row) => row.kind === 'role' ? (
             <RowActions
               items={[
-                { label: labels.actions.edit, onSelect: () => { router.push(`/backend/staff/team-roles/${row.id}/edit`) } },
-                { label: labels.actions.delete, destructive: true, onSelect: () => { void handleDelete(row) } },
+                { id: 'edit', label: labels.actions.edit, onSelect: () => { router.push(`/backend/staff/team-roles/${row.id}/edit`) } },
+                { id: 'delete', label: labels.actions.delete, destructive: true, onSelect: () => { void handleDelete(row) } },
               ]}
             />
           ) : null}

package/src/modules/staff/backend/staff/teams/[id]/edit/page.tsx

@@ -369,8 +369,8 @@ export default function StaffTeamEditPage({ params }: { params?: { id?: string }
               rowActions={(row) => (
                 <RowActions
                   items={[
-                    { label: memberLabels.actions.edit, onSelect: () => { router.push(`/backend/staff/team-members/${row.id}`) } },
-                    { label: memberLabels.actions.unassign, onSelect: () => { void handleUnassignMember(row) } },
+                    { id: 'edit', label: memberLabels.actions.edit, onSelect: () => { router.push(`/backend/staff/team-members/${row.id}`) } },
+                    { id: 'unassign', label: memberLabels.actions.unassign, onSelect: () => { void handleUnassignMember(row) } },
                   ]}
                 />
               )}

package/src/modules/staff/backend/staff/teams/page.tsx

@@ -275,10 +275,10 @@ export default function StaffTeamsPage() {
           rowActions={(row) => (
             <RowActions
               items={[
-                { label: labels.actions.edit, href: `/backend/staff/teams/${row.id}/edit` },
+                { id: 'edit', label: labels.actions.edit, href: `/backend/staff/teams/${row.id}/edit` },
                 ...(row.memberCount > 0
                   ? []
-                  : [{ label: labels.actions.delete, destructive: true, onSelect: () => { void handleDelete(row) } }]),
+                  : [{ id: 'delete', label: labels.actions.delete, destructive: true, onSelect: () => { void handleDelete(row) } }]),
               ]}
             />
           )}