@open-mercato/core 0.8.1-develop.7254.1.ab24f26208 → 0.8.1-develop.7263.1.bbc6db3437

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

@@ -14,11 +14,22 @@ import {
 import { SearchInput } from '@open-mercato/ui/primitives/search-input'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
-import { ViewTabsRow } from '../pipeline/components/ViewTabsRow'
+import { useRegisteredComponent } from '@open-mercato/ui/backend/injection/useRegisteredComponent'
+import {
+  ViewTabsRow,
+  VIEW_TABS_ROW_COMPONENT_ID,
+  type ViewTabsRowProps,
+} from '../pipeline/components/ViewTabsRow'
 import { DealsMapView } from './components/DealsMapView'
 
 export default function DealsMapPage(): React.ReactElement {
   const t = useT()
+  // Resolved through the component registry so downstream apps can hide a view
+  // (or replace the whole switcher) without forking this page.
+  const DealsViewTabsRow = useRegisteredComponent<ViewTabsRowProps>(
+    VIEW_TABS_ROW_COMPONENT_ID,
+    ViewTabsRow,
+  )
   const [search, setSearch] = React.useState('')
 
   return (
@@ -68,7 +79,7 @@ export default function DealsMapPage(): React.ReactElement {
           </div>
         </div>
 
-        <ViewTabsRow active="map" className="mt-4" />
+        <DealsViewTabsRow active="map" className="mt-4" />
 
         <DealsMapView search={search} />
       </PageBody>

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

@@ -30,7 +30,12 @@ import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
 import { Briefcase, AlertTriangle, X } from 'lucide-react'
 import { isLostDealStatus, isWonDealStatus } from '../../../lib/dealStatus'
 import { formatRelativeTime } from '@open-mercato/shared/lib/time'
-import { ViewTabsRow } from './pipeline/components/ViewTabsRow'
+import { useRegisteredComponent } from '@open-mercato/ui/backend/injection/useRegisteredComponent'
+import {
+  ViewTabsRow,
+  VIEW_TABS_ROW_COMPONENT_ID,
+  type ViewTabsRowProps,
+} from './pipeline/components/ViewTabsRow'
 import { DealsKpiStrip } from '../../../components/DealsKpiStrip'
 import { E } from '#generated/entities.ids.generated'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
@@ -195,6 +200,12 @@ function formatGroupedAmount(amount: number | null | undefined): string | null {
 
 export default function CustomersDealsPage() {
   const t = useT()
+  // Resolved through the component registry so downstream apps can hide a view
+  // (or replace the whole switcher) without forking this page.
+  const DealsViewTabsRow = useRegisteredComponent<ViewTabsRowProps>(
+    VIEW_TABS_ROW_COMPONENT_ID,
+    ViewTabsRow,
+  )
   const locale = useLocale()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const router = useRouter()
@@ -1064,7 +1075,7 @@ export default function CustomersDealsPage() {
   return (
     <Page>
       <PageBody>
-        <ViewTabsRow active="list" className="mb-4" />
+        <DealsViewTabsRow active="list" className="mb-4" />
         <DealsKpiStrip
           ownerNames={ownerNames}
           stageDictionary={dictionaryMaps['pipeline-stages'] ?? {}}

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

@@ -7,24 +7,76 @@ import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 
 export type KanbanView = 'kanban' | 'list' | 'map'
 
-type ViewTabsRowProps = {
+/**
+ * Canonical left-to-right order of the deals views. `visibleViews` selects a
+ * subset of these; it never reorders them, so a host that hides one view keeps
+ * the same tab order as every other deployment.
+ */
+export const DEALS_VIEWS: readonly KanbanView[] = ['kanban', 'list', 'map']
+
+export type ViewTabsRowProps = {
   active: KanbanView
   className?: string
+  /**
+   * Views exposed in the tab row. Defaults to all of `DEALS_VIEWS`; pass a
+   * subset to hide a view a deployment has no use for (e.g. omit `'map'` when
+   * deal addresses are never geocoded). Unknown and duplicated entries are
+   * ignored, and `active` is always rendered — a tab row that omits the page it
+   * is sitting on would show no selected tab at all.
+   */
+  visibleViews?: readonly KanbanView[]
+}
+
+/**
+ * Registered component id for the deals view switcher. Downstream apps can
+ * target it from `widgets/components.ts` to replace or wrap the row, or — the
+ * reason it is resolved through the registry at all — to transform its props
+ * from one place instead of forking each of the three pages that render it:
+ *
+ * ```ts
+ * export const componentOverrides: ComponentOverride[] = [{
+ *   target: { componentId: 'section:customers.deals.viewTabs' },
+ *   priority: 50,
+ *   metadata: { module: 'my_module' },
+ *   propsTransform: (props) => ({ ...props, visibleViews: ['kanban', 'list'] }),
+ * }]
+ * ```
+ *
+ * Hiding a tab does not unpublish its route; an app that also wants the page
+ * gone disables it through `entry.overrides.pages` (#5923).
+ */
+export const VIEW_TABS_ROW_COMPONENT_ID = 'section:customers.deals.viewTabs'
+
+const VIEW_HREFS: Record<KanbanView, string> = {
+  kanban: '/backend/customers/deals/pipeline',
+  list: '/backend/customers/deals',
+  map: '/backend/customers/deals/map',
 }
 
-const VIEW_KANBAN_HREF = '/backend/customers/deals/pipeline'
-const VIEW_LIST_HREF = '/backend/customers/deals'
-const VIEW_MAP_HREF = '/backend/customers/deals/map'
+/**
+ * Narrows `visibleViews` to the tabs this row renders, in canonical order.
+ * Exported so the contract — canonical order, deduplication, unknown entries
+ * dropped, `active` always kept — is testable without rendering.
+ */
+export function resolveVisibleViews(
+  active: KanbanView,
+  visibleViews?: readonly KanbanView[],
+): KanbanView[] {
+  if (!visibleViews) return [...DEALS_VIEWS]
+  const requested = new Set<KanbanView>(visibleViews.filter((view) => DEALS_VIEWS.includes(view)))
+  requested.add(active)
+  return DEALS_VIEWS.filter((view) => requested.has(view))
+}
 
-export function ViewTabsRow({ active, className }: ViewTabsRowProps): React.ReactElement {
+export function ViewTabsRow({ active, className, visibleViews }: ViewTabsRowProps): React.ReactElement {
   const t = useT()
-  const labels = {
+  const labels: Record<KanbanView, string> = {
     kanban: translateWithFallback(t, 'customers.deals.kanban.view.kanban', 'Kanban'),
     list: translateWithFallback(t, 'customers.deals.kanban.view.list', 'List'),
     map: translateWithFallback(t, 'customers.deals.kanban.view.map', 'Map'),
   }
 
-  // Link-based tab row (two routes), so the Tabs primitive (state-driven,
+  // Link-based tab row (three routes), so the Tabs primitive (state-driven,
   // onValueChange) does not fit — real <Link> semantics must stay. Classes
   // mirror the Tabs underline variant: accent-indigo active border,
   // shadow-focus halo.
@@ -33,14 +85,9 @@ export function ViewTabsRow({ active, className }: ViewTabsRowProps): React.Reac
   const activeTab = 'border-b-2 border-accent-indigo font-semibold text-foreground'
   const inactiveTab = 'border-b-2 border-transparent font-normal text-muted-foreground hover:text-foreground'
 
-  // Renders the active tab as a non-navigating `<span>` and the inactive tab as a `<Link>`,
-  // so the user can always round-trip between kanban and list from either page. Previously
-  // the kanban tab was a hardcoded `<span>` because the row was only rendered on the kanban
-  // page — adding it to the list page (item 7 of the SPEC-048 UX review) requires it to
-  // navigate back to /pipeline.
-  const isKanbanActive = active === 'kanban'
-  const isListActive = active === 'list'
-  const isMapActive = active === 'map'
+  // The active tab renders as a non-navigating `<span>` and every other tab as a
+  // `<Link>`, so the user can always round-trip between the views from any page.
+  const views = resolveVisibleViews(active, visibleViews)
 
   return (
     <div
@@ -48,60 +95,26 @@ export function ViewTabsRow({ active, className }: ViewTabsRowProps): React.Reac
       aria-label={translateWithFallback(t, 'customers.deals.kanban.view.tablistLabel', 'Deals views')}
       className={`flex items-end gap-1 border-b border-border ${className ?? ''}`.trim()}
     >
-      {isKanbanActive ? (
-        <span
-          role="tab"
-          aria-selected={true}
-          className={`${baseTab} ${activeTab}`}
-        >
-          {labels.kanban}
-        </span>
-      ) : (
-        <Link
-          href={VIEW_KANBAN_HREF}
-          role="tab"
-          aria-selected={false}
-          className={`${baseTab} ${inactiveTab}`}
-        >
-          {labels.kanban}
-        </Link>
-      )}
-      {isListActive ? (
-        <span
-          role="tab"
-          aria-selected={true}
-          className={`${baseTab} ${activeTab}`}
-        >
-          {labels.list}
-        </span>
-      ) : (
-        <Link
-          href={VIEW_LIST_HREF}
-          role="tab"
-          aria-selected={false}
-          className={`${baseTab} ${inactiveTab}`}
-        >
-          {labels.list}
-        </Link>
-      )}
-      {isMapActive ? (
+      {views.map((view) => (view === active ? (
         <span
+          key={view}
           role="tab"
           aria-selected={true}
           className={`${baseTab} ${activeTab}`}
         >
-          {labels.map}
+          {labels[view]}
         </span>
       ) : (
         <Link
-          href={VIEW_MAP_HREF}
+          key={view}
+          href={VIEW_HREFS[view]}
           role="tab"
           aria-selected={false}
           className={`${baseTab} ${inactiveTab}`}
         >
-          {labels.map}
+          {labels[view]}
         </Link>
-      )}
+      )))}
     </div>
   )
 }

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

@@ -54,7 +54,7 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import type { FilterOptionTone } from '@open-mercato/shared/lib/query/advanced-filter'
-import { ViewTabsRow } from './components/ViewTabsRow'
+import { ViewTabsRow, VIEW_TABS_ROW_COMPONENT_ID, type ViewTabsRowProps } from './components/ViewTabsRow'
 import { LANE_WIDTH_CLASS } from './components/constants'
 import { useCurrencyDictionary } from '../../../../components/detail/hooks/useCurrencyDictionary'
 import { FilterBarRow, type KanbanFilterChip } from './components/FilterBarRow'
@@ -419,6 +419,12 @@ export default function DealsKanbanPage(): React.ReactElement {
     QUICK_DEAL_DIALOG_COMPONENT_ID,
     DefaultQuickDealDialog,
   )
+  // Same reason: an app that does not use one of the three views hides it with a
+  // props override on this handle instead of forking all three deals pages.
+  const DealsViewTabsRow = useRegisteredComponent<ViewTabsRowProps>(
+    VIEW_TABS_ROW_COMPONENT_ID,
+    ViewTabsRow,
+  )
   const router = useRouter()
   const scopeVersion = useOrganizationScopeVersion()
   const queryClient = useQueryClient()
@@ -2558,7 +2564,7 @@ export default function DealsKanbanPage(): React.ReactElement {
   return (
     <Page>
       <PageBody>
-        <ViewTabsRow active="kanban" className="mb-4" />
+        <DealsViewTabsRow active="kanban" className="mb-4" />
         <div className="flex flex-col gap-2">
           <Breadcrumb>
             <BreadcrumbList>

package/src/modules/customers/components/formConfig.tsx

@@ -59,7 +59,7 @@ import {
   type CustomerDictionaryKind,
 } from '../lib/dictionaries'
 import { normalizeCustomFieldSubmitValue } from './detail/customFieldUtils'
-import { CUSTOMER_PHONE_INVALID_MESSAGE_KEY } from '../data/validators'
+import { CUSTOMER_PHONE_INVALID_MESSAGE_KEY, CUSTOMER_URL_INVALID_MESSAGE_KEY } from '../data/validators'
 
 export const metadata = {
   navHidden: true,
@@ -1199,7 +1199,7 @@ export const createCompanyFormSchema = () =>
       websiteUrl: z
         .string()
         .trim()
-        .url()
+        .url(CUSTOMER_URL_INVALID_MESSAGE_KEY)
         .optional()
         .or(z.literal(''))
         .transform((val) => (val === '' ? undefined : val))
@@ -1559,7 +1559,7 @@ const clearableUrlField = () =>
   z
     .string()
     .trim()
-    .url()
+    .url(CUSTOMER_URL_INVALID_MESSAGE_KEY)
     .optional()
     .or(z.literal(''))
     .transform((val) => (val === '' ? null : val))

package/src/modules/customers/data/validators.ts

@@ -6,6 +6,7 @@ import { dictionaryEntrySortModeSchema } from '@open-mercato/core/modules/dictio
 const uuid = () => z.string().uuid()
 
 export const CUSTOMER_PHONE_INVALID_MESSAGE_KEY = 'customers.people.form.primaryPhone.invalid'
+export const CUSTOMER_URL_INVALID_MESSAGE_KEY = 'customers.people.form.websiteUrl.invalid'
 export const ACTIVITY_DATE_REQUIRED_MESSAGE_KEY = 'customers.activities.errors.dateRequired'
 export const ACTIVITY_TIME_REQUIRED_MESSAGE_KEY = 'customers.activities.errors.timeRequired'
 export const ACTIVITY_PHONE_REQUIRED_MESSAGE_KEY = 'customers.activities.errors.phoneRequired'
@@ -41,7 +42,7 @@ const clearableEmailSchema = z.preprocess(
 
 const clearableUrlSchema = z.preprocess(
   emptyStringToNull,
-  z.string().url().max(300).nullable().optional(),
+  z.string().url(CUSTOMER_URL_INVALID_MESSAGE_KEY).max(300).nullable().optional(),
 )
 
 // Domain is a plain (non-URL) string that maps to a nullable column, so blanking

package/src/modules/customers/i18n/de.json

@@ -2352,6 +2352,7 @@
   "customers.people.form.twitterUrl": "X / Twitter",
   "customers.people.form.twitterUrl.placeholder": "https://x.com/beispiel",
   "customers.people.form.updateSuccess": "Person aktualisiert.",
+  "customers.people.form.websiteUrl.invalid": "Geben Sie eine gültige URL ein (z. B. https://example.com)",
   "customers.people.list.actions.delete": "Löschen",
   "customers.people.list.actions.new": "Neue Person",
   "customers.people.list.actions.openInNewTab": "In neuem Tab öffnen",

package/src/modules/customers/i18n/en.json

@@ -2352,6 +2352,7 @@
   "customers.people.form.twitterUrl": "X / Twitter",
   "customers.people.form.twitterUrl.placeholder": "https://x.com/example",
   "customers.people.form.updateSuccess": "Person updated.",
+  "customers.people.form.websiteUrl.invalid": "Enter a valid URL (e.g. https://example.com)",
   "customers.people.list.actions.delete": "Delete",
   "customers.people.list.actions.new": "New Person",
   "customers.people.list.actions.openInNewTab": "Open in new tab",

package/src/modules/customers/i18n/es.json

@@ -2352,6 +2352,7 @@
   "customers.people.form.twitterUrl": "X / Twitter",
   "customers.people.form.twitterUrl.placeholder": "https://x.com/ejemplo",
   "customers.people.form.updateSuccess": "Persona actualizada.",
+  "customers.people.form.websiteUrl.invalid": "Introduce una URL válida (p. ej., https://example.com)",
   "customers.people.list.actions.delete": "Eliminar",
   "customers.people.list.actions.new": "Nueva persona",
   "customers.people.list.actions.openInNewTab": "Abrir en nueva pestaña",

package/src/modules/customers/i18n/ko.json

@@ -2352,6 +2352,7 @@
   "customers.people.form.twitterUrl": "X / Twitter",
   "customers.people.form.twitterUrl.placeholder": "https://x.com/example",
   "customers.people.form.updateSuccess": "연락처가 업데이트되었습니다.",
+  "customers.people.form.websiteUrl.invalid": "올바른 URL을 입력하세요 (예: https://example.com)",
   "customers.people.list.actions.delete": "삭제",
   "customers.people.list.actions.new": "새 연락처",
   "customers.people.list.actions.openInNewTab": "새 탭에서 열기",

package/src/modules/customers/i18n/pl.json

@@ -2352,6 +2352,7 @@
   "customers.people.form.twitterUrl": "X / Twitter",
   "customers.people.form.twitterUrl.placeholder": "https://x.com/przyklad",
   "customers.people.form.updateSuccess": "Osoba została zaktualizowana.",
+  "customers.people.form.websiteUrl.invalid": "Podaj prawidłowy adres URL (np. https://example.com)",
   "customers.people.list.actions.delete": "Usuń",
   "customers.people.list.actions.new": "Nowa osoba",
   "customers.people.list.actions.openInNewTab": "Otwórz w nowej karcie",