@open-mercato/core 0.6.6-develop.6542.1.fee3e68aa6 → 0.6.6-develop.6551.1.1511bfa890

package/src/modules/sales/backend/sales/channels/create/page.tsx

@@ -9,13 +9,20 @@ import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customF
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useChannelFields, buildChannelPayload, type ChannelFormValues } from '@open-mercato/core/modules/sales/components/channels/channelFormFields'
+import { useSalesChannelsEnabled } from '@open-mercato/core/modules/sales/components/useSalesChannelsEnabled'
+import { SalesChannelsDisabledNotice } from '@open-mercato/core/modules/sales/components/SalesChannelsDisabledNotice'
 import { E } from '#generated/entities.ids.generated'
 
 export default function CreateChannelPage() {
   const t = useT()
   const { fields, groups } = useChannelFields()
+  const { enabled: channelsEnabled, isLoading: channelsEnabledLoading } = useSalesChannelsEnabled()
   const router = useRouter()
 
+  if (!channelsEnabled && !channelsEnabledLoading) {
+    return <SalesChannelsDisabledNotice />
+  }
+
   return (
     <Page>
       <PageBody>

package/src/modules/sales/backend/sales/channels/offers/page.meta.ts

@@ -1,4 +1,6 @@
 import React from 'react'
+import type { RouteVisibilityContext } from '@open-mercato/shared/modules/registry'
+import { isSalesChannelsEnabledForTenant } from '../../../../lib/salesChannelsToggle'
 
 const globeIcon = React.createElement(
   'svg',
@@ -12,6 +14,7 @@ const globeIcon = React.createElement(
 export const metadata = {
   requireAuth: true,
   requireFeatures: ['sales.channels.manage'],
+  visible: (ctx: RouteVisibilityContext) => isSalesChannelsEnabledForTenant(ctx.auth?.tenantId ?? null),
   pageTitle: 'Sales channel offers',
   pageTitleKey: 'sales.channels.offers.listTitle',
   pageGroup: 'Sales',

package/src/modules/sales/backend/sales/channels/offers/page.tsx

@@ -18,6 +18,8 @@ import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuarde
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { mapOfferRow, renderOfferPriceSummary, type OfferRow } from '@open-mercato/core/modules/sales/components/channels/offerTableUtils'
+import { useSalesChannelsEnabled } from '@open-mercato/core/modules/sales/components/useSalesChannelsEnabled'
+import { SalesChannelsDisabledNotice } from '@open-mercato/core/modules/sales/components/SalesChannelsDisabledNotice'
 import { createLogger } from '@open-mercato/shared/lib/logger'
 
 const logger = createLogger('sales')
@@ -34,6 +36,7 @@ const SAVE_CONTEXT_ID = 'sales-channel-offers-list'
 
 export default function SalesChannelOffersListPage() {
   const t = useT()
+  const { enabled: channelsEnabled, isLoading: channelsEnabledLoading } = useSalesChannelsEnabled()
   const router = useRouter()
   const { runMutation, retryLastMutation } = useGuardedMutation<{
     formId: string
@@ -332,6 +335,10 @@ export default function SalesChannelOffersListPage() {
     </div>
   )
 
+  if (!channelsEnabled && !channelsEnabledLoading) {
+    return <SalesChannelsDisabledNotice />
+  }
+
   return (
     <Page>
       <PageBody>

package/src/modules/sales/backend/sales/channels/page.meta.ts

@@ -1,6 +1,10 @@
+import type { RouteVisibilityContext } from '@open-mercato/shared/modules/registry'
+import { isSalesChannelsEnabledForTenant } from '../../../lib/salesChannelsToggle'
+
 export const metadata = {
   requireAuth: true,
   requireFeatures: ['sales.channels.manage'],
+  visible: (ctx: RouteVisibilityContext) => isSalesChannelsEnabledForTenant(ctx.auth?.tenantId ?? null),
   pageTitle: 'Sales channels',
   pageTitleKey: 'sales.channels.nav.title',
   pageGroup: 'Sales',

package/src/modules/sales/backend/sales/channels/page.tsx

@@ -16,6 +16,8 @@ import { buildOptimisticLockHeader, extractOptimisticLockConflict } from '@open-
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useSalesChannelsEnabled } from '../../../components/useSalesChannelsEnabled'
+import { SalesChannelsDisabledNotice } from '../../../components/SalesChannelsDisabledNotice'
 import { createLogger } from '@open-mercato/shared/lib/logger'
 
 const logger = createLogger('sales')
@@ -42,6 +44,7 @@ const SAVE_CONTEXT_ID = 'sales-channels-list'
 
 export default function SalesChannelsPage() {
   const t = useT()
+  const { enabled: channelsEnabled, isLoading: channelsEnabledLoading } = useSalesChannelsEnabled()
   const router = useRouter()
   const { runMutation, retryLastMutation } = useGuardedMutation<{
     formId: string
@@ -190,6 +193,10 @@ export default function SalesChannelsPage() {
     }
   }, [handleRefresh, mutationContext, runMutation, t])
 
+  if (!channelsEnabled && !channelsEnabledLoading) {
+    return <SalesChannelsDisabledNotice />
+  }
+
   return (
     <Page>
       <PageBody>

package/src/modules/sales/backend/sales/documents/[id]/page.tsx

@@ -69,6 +69,7 @@ import { readMarkdownPreferenceCookie, writeMarkdownPreferenceCookie } from '@op
 import { InjectionSpot, useInjectionWidgets } from '@open-mercato/ui/backend/injection/InjectionSpot'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { buildRecordInjectionContext, useSetCurrentRecordInjectionContext } from '@open-mercato/ui/backend/injection/recordContext'
+import { useSalesChannelsEnabled } from '@open-mercato/core/modules/sales/components/useSalesChannelsEnabled'
 import { createLogger } from '@open-mercato/shared/lib/logger'
 
 const logger = createLogger('sales')
@@ -1894,6 +1895,7 @@ export default function SalesDocumentDetailPage({
   includeAmountInMessageMetadata?: boolean
 }) {
   const t = useT()
+  const { enabled: channelsEnabled } = useSalesChannelsEnabled()
   const router = useRouter()
   const searchParams = useSearchParams()
   const pathname = usePathname()
@@ -2578,11 +2580,11 @@ export default function SalesDocumentDetailPage({
   }, [record])
 
   React.useEffect(() => {
-    loadChannels().catch(() => {})
+    if (channelsEnabled) loadChannels().catch(() => {})
     loadStatuses().catch(() => {})
     loadShippingMethods().catch(() => {})
     loadPaymentMethods().catch(() => {})
-  }, [loadChannels, loadPaymentMethods, loadShippingMethods, loadStatuses, scopeVersion])
+  }, [channelsEnabled, loadChannels, loadPaymentMethods, loadShippingMethods, loadStatuses, scopeVersion])
 
   React.useEffect(() => {
     void refreshPaymentPresence()
@@ -3955,11 +3957,11 @@ export default function SalesDocumentDetailPage({
       emptyLabel: t('sales.documents.detail.empty', 'Not set'),
       type: 'email' as const,
     },
-    {
-      key: 'channel',
+    ...(channelsEnabled ? [{
+      key: 'channel' as const,
       title: t('sales.documents.detail.channel', 'Channel'),
       value: record?.channelId ?? null,
-    },
+    }] : []),
     {
       key: 'status',
       title: t('sales.documents.detail.status', 'Status'),

package/src/modules/sales/components/SalesChannelsDisabledNotice.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from 'react'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export function SalesChannelsDisabledNotice() {
+  const t = useT()
+  return (
+    <Page>
+      <PageBody>
+        <div className="rounded-lg border bg-muted/50 p-6 text-sm text-muted-foreground">
+          {t(
+            'sales.channels.disabledNotice',
+            'Sales channels are disabled for this tenant. Enable the "Sales Channels" feature toggle to manage them.',
+          )}
+        </div>
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/sales/components/documents/SalesDocumentForm.tsx

@@ -57,6 +57,7 @@ import {
   type AddressValue,
 } from '@open-mercato/core/modules/customers/utils/addressFormat'
 import { AddressEditor, type AddressEditorDraft } from '@open-mercato/core/modules/customers/components/AddressEditor'
+import { useSalesChannelsEnabled } from '../useSalesChannelsEnabled'
 import { createLogger } from '@open-mercato/shared/lib/logger'
 
 const logger = createLogger('sales')
@@ -804,6 +805,7 @@ function CustomerGroupComponent({ values, setValue, t, customers, setCustomers,
 
 export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind, inboxPreFill }: SalesDocumentFormProps) {
   const t = useT()
+  const { enabled: channelsEnabled } = useSalesChannelsEnabled()
   const [customers, setCustomers] = React.useState<CustomerOption[]>([])
   const [customerLoading, setCustomerLoading] = React.useState(false)
   const [channels, setChannels] = React.useState<ChannelOption[]>([])
@@ -1174,7 +1176,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
         />
       ),
     },
-    {
+    ...(channelsEnabled ? [{
       id: 'channelId',
       label: t('sales.documents.form.channel', 'Sales channel'),
       type: 'custom',
@@ -1196,7 +1198,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
           selectedHintLabel={(id) => t('sales.documents.form.channel.selected', 'Selected channel: {{id}}', { id })}
         />
       ),
-    },
+    } satisfies CrudField] : []),
     {
       id: 'shippingAddressSection',
       label: '',
@@ -1317,6 +1319,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
     addressOptions,
     addressesError,
     addressesLoading,
+    channelsEnabled,
     currencyLabels,
     fetchCurrencyOptions,
     loadAddresses,
@@ -1335,12 +1338,13 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
       fields: [],
       component: (ctx) => <CustomerGroupComponent {...ctx} t={t} customers={customers} setCustomers={setCustomers} customerQuerySetter={customerQuerySetter} loadAddresses={loadAddresses} loadCustomers={loadCustomers} fetchCustomerEmail={fetchCustomerEmail} resetAddressFormState={resetAddressFormState} />,
     },
-    { id: 'channels-comments', title: '', column: 1, fields: ['channelId', 'comments'] },
+    { id: 'channels-comments', title: '', column: 1, fields: channelsEnabled ? ['channelId', 'comments'] : ['comments'] },
     { id: 'currency', title: '', column: 2, fields: ['currencyCode'] },
     { id: 'shipping', title: '', column: 2, fields: ['shippingAddressSection'] },
     { id: 'billing', title: '', column: 2, fields: ['billingAddressSection'] },
     { id: 'custom', title: t('sales.documents.form.customFields', 'Custom fields'), column: 2, kind: 'customFields' },
   ], [
+    channelsEnabled,
     customers,
     fetchCustomerEmail,
     loadAddresses,

package/src/modules/sales/components/documents/SalesDocumentsTable.tsx

@@ -24,6 +24,7 @@ import {
   normalizeDictionaryEntries,
 } from '@open-mercato/core/modules/dictionaries/components/dictionaryAppearance'
 import { SALES_DOCUMENT_NUMBER_COLUMN_META } from './salesDocumentsColumns'
+import { useSalesChannelsEnabled } from '../useSalesChannelsEnabled'
 import { createLogger } from '@open-mercato/shared/lib/logger'
 
 const logger = createLogger('sales')
@@ -146,6 +147,7 @@ function normalizeNumberInput(value: unknown): number | null {
 
 export function SalesDocumentsTable({ kind }: { kind: SalesDocumentKind }) {
   const t = useT()
+  const { enabled: channelsEnabled } = useSalesChannelsEnabled()
   const router = useRouter()
   const scopeVersion = useOrganizationScopeVersion()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
@@ -293,20 +295,20 @@ export function SalesDocumentsTable({ kind }: { kind: SalesDocumentKind }) {
   )
 
   React.useEffect(() => {
-    loadChannelOptions().catch(() => {})
+    if (channelsEnabled) loadChannelOptions().catch(() => {})
     loadTagOptions().catch(() => {})
     loadCustomerOptions().catch(() => {})
     loadStatusMap().catch(() => setStatusMap({}))
-  }, [loadChannelOptions, loadCustomerOptions, loadStatusMap, loadTagOptions, scopeVersion])
+  }, [channelsEnabled, loadChannelOptions, loadCustomerOptions, loadStatusMap, loadTagOptions, scopeVersion])
 
   const filters = React.useMemo<FilterDef[]>(() => [
-    {
+    ...(channelsEnabled ? [{
       id: 'channelId',
       label: t('sales.documents.list.filters.channel', 'Channel'),
       type: 'select',
       options: channelOptions,
       loadOptions: loadChannelOptions,
-    },
+    } satisfies FilterDef] : []),
     {
       id: 'date',
       label: t('sales.documents.list.filters.date', 'Date'),
@@ -363,7 +365,7 @@ export function SalesDocumentsTable({ kind }: { kind: SalesDocumentKind }) {
       formatValue: (val: string) => tagOptions.find((o) => o.value === val)?.label ?? val,
       formatDescription: (val: string) => tagOptions.find((o) => o.value === val)?.description ?? null,
     },
-  ], [channelOptions, loadChannelOptions, customerOptions, loadCustomerOptions, loadTagOptions, tagOptions, t])
+  ], [channelsEnabled, channelOptions, loadChannelOptions, customerOptions, loadCustomerOptions, loadTagOptions, tagOptions, t])
 
   const queryParams = React.useMemo(() => {
     const params = new URLSearchParams()
@@ -615,7 +617,7 @@ export function SalesDocumentsTable({ kind }: { kind: SalesDocumentKind }) {
       ),
       enableSorting: false,
     },
-    {
+    ...(channelsEnabled ? [{
       accessorKey: 'channelId',
       header: t('sales.documents.list.table.channel', 'Channel'),
       cell: ({ row }) => {
@@ -627,7 +629,7 @@ export function SalesDocumentsTable({ kind }: { kind: SalesDocumentKind }) {
         )
       },
       enableSorting: false,
-    },
+    } satisfies ColumnDef<SalesDocumentRow>] : []),
     {
       id: 'lineItemCount',
       accessorKey: 'lineItemCount',
@@ -661,7 +663,7 @@ export function SalesDocumentsTable({ kind }: { kind: SalesDocumentKind }) {
           ? <span className="text-xs text-muted-foreground">{new Date(row.original.date).toLocaleString()}</span>
           : <span className="text-xs text-muted-foreground">—</span>,
     },
-  ], [channelOptions, kind, statusMap, t])
+  ], [channelsEnabled, channelOptions, kind, statusMap, t])
 
   const emptyLabel = kind === 'order'
     ? t('sales.documents.list.table.emptyOrders', 'No orders yet.')

package/src/modules/sales/components/useSalesChannelsEnabled.ts

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from 'react'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { SALES_CHANNELS_TOGGLE_ID } from '../lib/salesChannelsToggleId'
+
+export { SALES_CHANNELS_TOGGLE_ID }
+
+const CACHE_TTL_MS = 60_000
+
+type FeatureToggleCheckResponse = {
+  ok?: boolean
+  value?: unknown
+}
+
+// Fails open: channels stay visible unless the toggle explicitly resolves to
+// false. A missing toggle definition (404) or an absent feature_toggles module
+// must not hide sales channel UI.
+async function fetchSalesChannelsEnabled(): Promise<boolean> {
+  try {
+    const call = await apiCall<FeatureToggleCheckResponse>(
+      `/api/feature_toggles/check/boolean?identifier=${SALES_CHANNELS_TOGGLE_ID}`,
+    )
+    if (!call.ok) return true
+    return !(call.result?.ok === true && call.result.value === false)
+  } catch {
+    return true
+  }
+}
+
+let cache: { value: Promise<boolean>; at: number } | null = null
+
+function getSalesChannelsEnabled(): Promise<boolean> {
+  const now = Date.now()
+  if (!cache || now - cache.at > CACHE_TTL_MS) {
+    cache = { value: fetchSalesChannelsEnabled(), at: now }
+  }
+  return cache.value
+}
+
+export function useSalesChannelsEnabled(): { enabled: boolean; isLoading: boolean } {
+  const [resolved, setResolved] = React.useState<boolean | null>(null)
+
+  React.useEffect(() => {
+    let active = true
+    getSalesChannelsEnabled()
+      .then((value) => {
+        if (active) setResolved(value)
+      })
+      .catch(() => {
+        if (active) setResolved(true)
+      })
+    return () => {
+      active = false
+    }
+  }, [])
+
+  return { enabled: resolved !== false, isLoading: resolved === null }
+}

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

@@ -60,6 +60,7 @@
   "sales.channels.actions.backToList": "Zurück zu Kanälen",
   "sales.channels.actions.create": "Kanal hinzufügen",
   "sales.channels.create": "Vertriebskanal erstellen",
+  "sales.channels.disabledNotice": "Vertriebskanäle sind für diesen Mandanten deaktiviert. Aktivieren Sie das Feature-Toggle \"Sales Channels\", um sie zu verwalten.",
   "sales.channels.form.address1": "Adresszeile 1",
   "sales.channels.form.address2": "Adresszeile 2",
   "sales.channels.form.city": "Stadt",

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

@@ -60,6 +60,7 @@
   "sales.channels.actions.backToList": "Back to channels",
   "sales.channels.actions.create": "Add channel",
   "sales.channels.create": "Create sales channel",
+  "sales.channels.disabledNotice": "Sales channels are disabled for this tenant. Enable the \"Sales Channels\" feature toggle to manage them.",
   "sales.channels.form.address1": "Address line 1",
   "sales.channels.form.address2": "Address line 2",
   "sales.channels.form.city": "City",

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

@@ -60,6 +60,7 @@
   "sales.channels.actions.backToList": "Volver a canales",
   "sales.channels.actions.create": "Añadir canal",
   "sales.channels.create": "Crear canal de ventas",
+  "sales.channels.disabledNotice": "Los canales de venta están desactivados para este inquilino. Active el conmutador de función \"Sales Channels\" para gestionarlos.",
   "sales.channels.form.address1": "Línea de dirección 1",
   "sales.channels.form.address2": "Línea de dirección 2",
   "sales.channels.form.city": "Ciudad",

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

@@ -60,6 +60,7 @@
   "sales.channels.actions.backToList": "Powrót do kanałów",
   "sales.channels.actions.create": "Dodaj kanał",
   "sales.channels.create": "Utwórz kanał sprzedaży",
+  "sales.channels.disabledNotice": "Kanały sprzedaży są wyłączone dla tego najemcy. Włącz przełącznik funkcji \"Sales Channels\", aby nimi zarządzać.",
   "sales.channels.form.address1": "Adres linia 1",
   "sales.channels.form.address2": "Adres linia 2",
   "sales.channels.form.city": "Miasto",

package/src/modules/sales/lib/salesChannelsToggle.ts

@@ -0,0 +1,26 @@
+import { SALES_CHANNELS_TOGGLE_ID } from './salesChannelsToggleId'
+
+export { SALES_CHANNELS_TOGGLE_ID }
+
+type BoolConfigResult = { ok: boolean; value?: unknown }
+
+type FeatureTogglesServiceLike = {
+  getBoolConfig: (identifier: string, tenantId: string) => Promise<BoolConfigResult>
+}
+
+// Server-side counterpart of useSalesChannelsEnabled with the same fail-open
+// contract: channels stay enabled unless the toggle explicitly resolves to
+// false. The DI container and feature_toggles service are optional peers, so
+// they are loaded lazily and any failure keeps channels visible.
+export async function isSalesChannelsEnabledForTenant(tenantId: string | null | undefined): Promise<boolean> {
+  if (!tenantId) return true
+  try {
+    const { createRequestContainer } = await import('@open-mercato/shared/lib/di/container')
+    const container = await createRequestContainer()
+    const service = container.resolve('featureTogglesService') as FeatureTogglesServiceLike
+    const result = await service.getBoolConfig(SALES_CHANNELS_TOGGLE_ID, tenantId)
+    return !(result.ok === true && result.value === false)
+  } catch {
+    return true
+  }
+}

package/src/modules/sales/lib/salesChannelsToggleId.ts

@@ -0,0 +1 @@
+export const SALES_CHANNELS_TOGGLE_ID = 'sales_channels_enabled'

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

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { extractCustomFieldEntries } from '@open-mercato/shared/lib/crud/custom-fields-client'
 import { updateCrud, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
@@ -432,29 +433,22 @@ export default function StaffTeamMemberDetailPage({ params }: { params?: { id?:
             </div>
           </div>
 
-          <div className="border-b">
-            <nav
-              className="flex flex-wrap items-center gap-5 text-sm"
+          <Tabs
+            value={activePanel}
+            onValueChange={(value) => setActivePanel(value as 'details' | 'availability' | 'jobHistory')}
+            variant="underline"
+          >
+            <TabsList
+              className="w-full flex-wrap"
               aria-label={t('staff.teamMembers.detail.tabs.label', 'Team member sections')}
             >
               {panelTabs.map((tab) => (
-                <button
-                  key={tab.id}
-                  type="button"
-                  role="tab"
-                  aria-selected={activePanel === tab.id}
-                  onClick={() => setActivePanel(tab.id)}
-                  className={`relative -mb-px border-b-2 px-0 py-2 text-sm font-medium transition-colors ${
-                    activePanel === tab.id
-                      ? 'border-accent-indigo text-foreground'
-                      : 'border-transparent text-muted-foreground hover:text-foreground'
-                  }`}
-                >
+                <TabsTrigger key={tab.id} value={tab.id}>
                   {tab.label}
-                </button>
+                </TabsTrigger>
               ))}
-            </nav>
-          </div>
+            </TabsList>
+          </Tabs>
 
           {activePanel === 'details' ? (
             <>
@@ -500,22 +494,19 @@ export default function StaffTeamMemberDetailPage({ params }: { params?: { id?:
 
                   <div className="rounded-lg border bg-card p-4">
                     <div className="flex flex-wrap items-center justify-between gap-3">
-                      <div className="flex gap-2">
-                        {tabs.map((tab) => (
-                          <button
-                            key={tab.id}
-                            type="button"
-                            onClick={() => setActiveTab(tab.id)}
-                            className={`relative -mb-px border-b-2 px-0 py-1 text-sm font-medium transition-colors ${
-                              activeTab === tab.id
-                                ? 'border-accent-indigo text-foreground'
-                                : 'border-transparent text-muted-foreground hover:text-foreground'
-                            }`}
-                          >
-                            {tab.label}
-                          </button>
-                        ))}
-                      </div>
+                      <Tabs
+                        value={activeTab}
+                        onValueChange={(value) => setActiveTab(value as 'notes' | 'activities' | 'addresses')}
+                        variant="underline"
+                      >
+                        <TabsList className="h-auto flex-wrap border-b-0">
+                          {tabs.map((tab) => (
+                            <TabsTrigger key={tab.id} value={tab.id}>
+                              {tab.label}
+                            </TabsTrigger>
+                          ))}
+                        </TabsList>
+                      </Tabs>
                       {sectionAction ? (
                         <Button
                           type="button"

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

@@ -12,6 +12,7 @@ import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimi
 import { DataTable, withDataTableNamespaces } from '@open-mercato/ui/backend/DataTable'
 import { RowActions } from '@open-mercato/ui/backend/RowActions'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { BooleanIcon } from '@open-mercato/ui/backend/ValueIcons'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -362,29 +363,22 @@ export default function StaffTeamEditPage({ params }: { params?: { id?: string }
     <Page>
       <PageBody>
         <div className="space-y-6">
-          <div className="border-b">
-            <nav className="flex flex-wrap items-center gap-5 text-sm" aria-label={memberLabels.tabs.label}>
+          <Tabs
+            value={activeTab}
+            onValueChange={(value) => setActiveTab(value as 'details' | 'members')}
+            variant="underline"
+          >
+            <TabsList className="w-full flex-wrap" aria-label={memberLabels.tabs.label}>
               {[
                 { id: 'details', label: memberLabels.tabs.details },
                 { id: 'members', label: memberLabels.tabs.members },
               ].map((tab) => (
-                <button
-                  key={tab.id}
-                  type="button"
-                  role="tab"
-                  aria-selected={activeTab === tab.id}
-                  onClick={() => setActiveTab(tab.id as 'details' | 'members')}
-                  className={`relative -mb-px border-b-2 px-0 py-2 text-sm font-medium transition-colors ${
-                    activeTab === tab.id
-                      ? 'border-accent-indigo text-foreground'
-                      : 'border-transparent text-muted-foreground hover:text-foreground'
-                  }`}
-                >
+                <TabsTrigger key={tab.id} value={tab.id}>
                   {tab.label}
-                </button>
+                </TabsTrigger>
               ))}
-            </nav>
-          </div>
+            </TabsList>
+          </Tabs>
 
           {activeTab === 'details' ? (
             <TeamForm

package/src/modules/staff/lib/timesheets-projects-ui/SavedViewTabs.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react'
-import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 
 export type SavedViewTab = {
   id: string
@@ -19,35 +19,18 @@ export type SavedViewTabsProps = {
 
 export function SavedViewTabs({ tabs, activeId, onSelect, className, ariaLabel }: SavedViewTabsProps) {
   return (
-    <div
-      role="tablist"
-      aria-label={ariaLabel ?? 'Saved views'}
-      className={`flex items-center gap-1 border-b border-border ${className ?? ''}`}
-    >
-      {tabs.map((tab) => {
-        const isActive = tab.id === activeId
-        return (
-          <Button
+    <Tabs value={activeId} onValueChange={onSelect} variant="underline" className={className}>
+      <TabsList className="w-full flex-wrap" aria-label={ariaLabel ?? 'Saved views'}>
+        {tabs.map((tab) => (
+          <TabsTrigger
             key={tab.id}
-            type="button"
-            variant="ghost"
-            size="sm"
-            role="tab"
-            aria-selected={isActive}
-            className={`h-auto rounded-none px-3 py-2 text-sm hover:bg-transparent ${
-              isActive
-                ? 'border-b-2 border-foreground font-medium text-foreground'
-                : 'border-b-2 border-transparent text-muted-foreground hover:text-foreground'
-            }`}
-            onClick={() => onSelect(tab.id)}
+            value={tab.id}
+            count={typeof tab.count === 'number' ? tab.count : undefined}
           >
             {tab.label}
-            {typeof tab.count === 'number' ? (
-              <span className="ml-1.5 text-xs text-muted-foreground/70 tabular-nums">{tab.count}</span>
-            ) : null}
-          </Button>
-        )
-      })}
-    </div>
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
   )
 }