@open-mercato/core 0.10.1-develop.7874.1.67e097d23a → 0.10.1-develop.7883.1.44ac2125f5

package/src/modules/customers/backend/customers/deals/pipeline/components/ChipButton.tsx

@@ -28,16 +28,16 @@ export const ChipButton = React.forwardRef<HTMLButtonElement, ChipButtonProps>(
         onClick={onClick}
         aria-label={ariaLabel ?? (label ? `${label}: ${value}` : value)}
         aria-pressed={active}
-        className={`inline-flex items-center gap-1.5 rounded-sm border border-border bg-card px-2.5 py-1.5 text-xs leading-normal transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+        className={`inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-sm border border-border bg-card px-2.5 py-1.5 text-xs leading-normal transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
           active ? 'border-foreground/40 bg-muted text-foreground' : 'text-foreground'
         }`}
       >
-        {label ? <span className="font-normal text-muted-foreground">{label}:</span> : null}
-        <span className={label ? 'font-semibold text-foreground' : 'font-normal text-foreground'}>
+        {label ? <span className="shrink-0 font-normal text-muted-foreground">{label}:</span> : null}
+        <span className={`min-w-0 truncate ${label ? 'font-semibold text-foreground' : 'font-normal text-foreground'}`}>
           {value}
         </span>
         {withChevron ? (
-          <ChevronDown className="size-3 text-muted-foreground" aria-hidden="true" />
+          <ChevronDown className="size-3 shrink-0 text-muted-foreground" aria-hidden="true" />
         ) : null}
       </Button>
     )

package/src/modules/customers/backend/customers/deals/pipeline/components/Lane.tsx

@@ -36,6 +36,7 @@ type LaneProps = {
   deals: DealCardData[]
   /** Server-side aggregate for accurate counts/totals across all deals in this stage, not just loaded ones */
   aggregate?: LaneAggregateProp | null
+  paginationTotal?: number
   selectedDealIds: Set<string>
   buildMenuItems: (deal: DealCardData) => RowActionItem[]
   activeDragDealId?: string | null
@@ -176,6 +177,7 @@ function LaneImpl({
   stage,
   deals,
   aggregate,
+  paginationTotal,
   selectedDealIds,
   buildMenuItems,
   activeDragDealId,
@@ -212,7 +214,8 @@ function LaneImpl({
     : null
   const visibleCount = deals.length
   const totalCount = stats.count
-  const hasMoreDeals = totalCount > visibleCount
+  const remainingCount = (paginationTotal ?? totalCount) - visibleCount
+  const hasMoreDeals = remainingCount > 0
   const accentClass = getAccentClass(stage.tone)
   const countBadgeClass = getCountBadgeClass(stage.tone)
 
@@ -336,7 +339,7 @@ function LaneImpl({
                   t,
                   'customers.deals.kanban.lane.loadMore',
                   'Show more ({remaining})',
-                  { remaining: totalCount - visibleCount },
+                  { remaining: remainingCount },
                 )}
           </DashedTileButton>
         ) : null}
@@ -358,6 +361,7 @@ export const Lane = React.memo(LaneImpl, (prev, next) => {
   if (prev.stage !== next.stage) return false
   if (prev.deals !== next.deals) return false
   if (prev.aggregate !== next.aggregate) return false
+  if (prev.paginationTotal !== next.paginationTotal) return false
   if (prev.selectedDealIds !== next.selectedDealIds) return false
   if (prev.buildMenuItems !== next.buildMenuItems) return false
   if (prev.activeDragDealId !== next.activeDragDealId) return false

package/src/modules/customers/backend/customers/deals/pipeline/page.tsx

@@ -613,11 +613,6 @@ export default function DealsKanbanPage(): React.ReactElement {
   // fetched on demand and appended here, so the cached page-1 cards stay in place (no full lane refetch).
   const [extraCardsByStage, setExtraCardsByStage] = React.useState<Record<string, DealApiRecord[]>>({})
   const [loadingMoreByStage, setLoadingMoreByStage] = React.useState<Record<string, boolean>>({})
-  // Reset extra-cards + loading state when any filter changes
-  React.useEffect(() => {
-    setExtraCardsByStage({})
-    setLoadingMoreByStage({})
-  }, [selectedPipelineId, search, statusFilters, ownerFilters, peopleFilters, companyFilters, closeDateFilter, currencyFilter])
 
   // Filter signature shared by every per-lane query so all lanes invalidate together when filters change
   const filterSignature = React.useMemo(
@@ -636,7 +631,7 @@ export default function DealsKanbanPage(): React.ReactElement {
   )
 
   // Aggregate query — gives accurate per-stage counts + totals (in base currency) across the entire pipeline,
-  // not just the loaded slice. Drives both lane headers and pagination decisions.
+  // not just the loaded slice. Drives lane headers and currency breakdowns.
   const aggregateQuery = useQuery<StageAggregateResponse | null>({
     queryKey: [
       'customers',
@@ -711,28 +706,40 @@ export default function DealsKanbanPage(): React.ReactElement {
     return mapped ?? { sortField: 'updatedAt' as const, sortDir: 'desc' as const }
   }, [sortBy])
 
+  const laneQueryKey = React.useMemo(
+    () => [
+      'customers',
+      'deals',
+      'kanban-lane',
+      `scope:${scopeVersion}`,
+      `organization:${activeOrgId ?? 'none'}`,
+      `pipeline:${filterSignature.pipelineId ?? 'none'}`,
+      `search:${filterSignature.search}`,
+      `status:${filterSignature.status}`,
+      `owners:${filterSignature.owners}`,
+      `people:${filterSignature.people}`,
+      `companies:${filterSignature.companies}`,
+      `close:${filterSignature.closeFrom}-${filterSignature.closeTo}`,
+      `sort:${apiSort.sortField}:${apiSort.sortDir}`,
+      `currency:${filterSignature.currency}`,
+    ],
+    [scopeVersion, activeOrgId, filterSignature, apiSort],
+  )
+  const paginationGeneration = React.useRef(0)
+
+  React.useEffect(() => {
+    paginationGeneration.current += 1
+    setExtraCardsByStage({})
+    setLoadingMoreByStage({})
+    return () => {
+      paginationGeneration.current += 1
+    }
+  }, [laneQueryKey])
+
   const laneQueries = useQueries({
     queries: lanes.map((stage) => {
       return {
-        queryKey: [
-          'customers',
-          'deals',
-          'kanban-lane',
-          `scope:${scopeVersion}`,
-          `pipeline:${filterSignature.pipelineId ?? 'none'}`,
-          `search:${filterSignature.search}`,
-          `status:${filterSignature.status}`,
-          `owners:${filterSignature.owners}`,
-          `people:${filterSignature.people}`,
-          `companies:${filterSignature.companies}`,
-          `close:${filterSignature.closeFrom}-${filterSignature.closeTo}`,
-          // Sort affects which 25 deals come back on page 1, so it MUST be in the key —
-          // otherwise switching from "Value (high to low)" to "Close (soonest)" reuses
-          // the old (wrong-sort) cache and silently keeps the wrong slice on screen.
-          `sort:${apiSort.sortField}:${apiSort.sortDir}`,
-          `currency:${filterSignature.currency}`,
-          `stage:${stage.id}`,
-        ],
+        queryKey: [...laneQueryKey, `stage:${stage.id}`],
         enabled: !!selectedPipelineId,
         staleTime: 30_000,
         queryFn: async () => {
@@ -900,6 +907,7 @@ export default function DealsKanbanPage(): React.ReactElement {
       // Page 1 = first 25 (initial useQueries fetch). Subsequent pages come from extraCardsByStage.
       const already = extraCardsByStage[stageId]?.length ?? 0
       const nextPage = Math.floor((LANE_PAGE_SIZE + already) / LANE_PAGE_SIZE) + 1
+      const requestGeneration = paginationGeneration.current
       setLoadingMoreByStage((prev) => ({ ...prev, [stageId]: true }))
       try {
         const params = new URLSearchParams()
@@ -922,18 +930,20 @@ export default function DealsKanbanPage(): React.ReactElement {
         const call = await apiCall<{ items?: DealApiRecord[] }>(
           `/api/customers/deals?${params.toString()}`,
         )
-        if (!call.ok) return
+        if (requestGeneration !== paginationGeneration.current || !call.ok) return
         const items = Array.isArray(call.result?.items) ? (call.result!.items as DealApiRecord[]) : []
         setExtraCardsByStage((prev) => ({
           ...prev,
           [stageId]: [...(prev[stageId] ?? []), ...items],
         }))
       } finally {
-        setLoadingMoreByStage((prev) => {
-          const next = { ...prev }
-          delete next[stageId]
-          return next
-        })
+        if (requestGeneration === paginationGeneration.current) {
+          setLoadingMoreByStage((prev) => {
+            const next = { ...prev }
+            delete next[stageId]
+            return next
+          })
+        }
       }
     },
     [
@@ -947,7 +957,9 @@ export default function DealsKanbanPage(): React.ReactElement {
       companyFilters,
       closeDateFilter.from,
       closeDateFilter.to,
+      currencyFilter,
       apiSort,
+      laneQueryKey,
     ],
   )
 
@@ -2841,7 +2853,7 @@ export default function DealsKanbanPage(): React.ReactElement {
                 />
               ) : (
                 <>
-                  {lanes.map((stage) => {
+                  {lanes.map((stage, stageIndex) => {
                     const laneDeals = sortedDealsByStage.get(stage.id) ?? EMPTY_DEAL_ARRAY
                     return (
                       <Lane
@@ -2849,6 +2861,7 @@ export default function DealsKanbanPage(): React.ReactElement {
                         stage={stage}
                         deals={laneDeals}
                         aggregate={aggregateByStage.get(stage.id) ?? null}
+                        paginationTotal={laneQueries[stageIndex]?.data?.total ?? 0}
                         selectedDealIds={selectedDealIds}
                         buildMenuItems={buildMenuItems}
                         activeDragDealId={activeDragDealId}

package/src/modules/push_notifications/backend/push_notifications/page.tsx

@@ -8,7 +8,8 @@ import { StatusBadge, type StatusMap } from '@open-mercato/ui/primitives/status-
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
+import { formatDisplayDateTime } from '@open-mercato/ui/primitives/date-format'
 import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
 
 type PushDeliveryStatus = 'pending' | 'sending' | 'sent' | 'failed' | 'skipped' | 'expired'
@@ -44,15 +45,8 @@ const statusVariant: StatusMap<PushDeliveryStatus> = {
   expired: 'warning',
 }
 
-function formatDate(value: string | null, t: (key: string) => string) {
-  if (!value) return t('push_notifications.deliveries.noValue')
-  try {
-    const date = new Date(value)
-    if (Number.isNaN(date.getTime())) return t('push_notifications.deliveries.noValue')
-    return date.toLocaleString()
-  } catch {
-    return t('push_notifications.deliveries.noValue')
-  }
+function formatDate(value: string | null, locale: string | undefined, t: (key: string) => string) {
+  return formatDisplayDateTime(value, locale) ?? t('push_notifications.deliveries.noValue')
 }
 
 export default function PushDeliveriesListPage() {
@@ -64,6 +58,7 @@ export default function PushDeliveriesListPage() {
   const [isLoading, setIsLoading] = React.useState(true)
   const scopeVersion = useOrganizationScopeVersion()
   const t = useT()
+  const dateLocale = useLocale()
   const [filterValues, setFilterValues] = React.useState<FilterValues>({})
   const [userOptions, setUserOptions] = React.useState<{ value: string; label: string; description?: string | null }[]>([])
 
@@ -210,14 +205,14 @@ export default function PushDeliveriesListPage() {
     {
       accessorKey: 'created_at',
       header: t('push_notifications.deliveries.columns.created'),
-      cell: ({ row }) => formatDate(row.original.created_at, t),
+      cell: ({ row }) => formatDate(row.original.created_at, dateLocale, t),
     },
     {
       accessorKey: 'sent_at',
       header: t('push_notifications.deliveries.columns.sent'),
-      cell: ({ row }) => formatDate(row.original.sent_at, t),
+      cell: ({ row }) => formatDate(row.original.sent_at, dateLocale, t),
     },
-  ], [t, userLabelById])
+  ], [t, dateLocale, userLabelById])
 
   return (
     <Page>