@open-mercato/core 0.6.6 → 0.6.7-develop.6553.1.2ec7246e04

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

@@ -296,6 +296,13 @@ export function ShipmentDialog({
   const [addressOptions, setAddressOptions] = React.useState<ShipmentAddressOption[]>([])
   const [addressLoading, setAddressLoading] = React.useState(false)
   const [addressError, setAddressError] = React.useState<string | null>(null)
+  const addressLoadPromiseRef = React.useRef<{
+    orderId: string
+    promise: Promise<ShipmentAddressOption[]>
+  } | null>(null)
+  const currentAddressOrderIdRef = React.useRef(orderId)
+  currentAddressOrderIdRef.current = orderId
+  const initializedDialogKeyRef = React.useRef<string | null>(null)
   const [documentStatuses, setDocumentStatuses] = React.useState<StatusOption[]>([])
   const [lineStatuses, setLineStatuses] = React.useState<StatusOption[]>([])
   const [shipmentStatuses, setShipmentStatuses] = React.useState<StatusOption[]>([])
@@ -479,37 +486,52 @@ export function ShipmentDialog({
     [],
   )
 
-  const loadAddressOptions = React.useCallback(async () => {
+  const loadAddressOptions = React.useCallback((): Promise<ShipmentAddressOption[]> => {
+    const activeRequest = addressLoadPromiseRef.current
+    if (activeRequest?.orderId === orderId) return activeRequest.promise
+
     setAddressLoading(true)
-    try {
-      const params = new URLSearchParams({
-        page: '1',
-        pageSize: '100',
-        documentId: orderId,
-        documentKind: 'order',
-      })
-      const response = await apiCall<{ items?: Array<Record<string, unknown>> }>(
-        `/api/sales/document-addresses?${params.toString()}`,
-        undefined,
-        { fallback: { items: [] } },
-      )
-      const items = Array.isArray(response.result?.items) ? response.result.items : []
-      const mapped = items
-        .map((item) => mapDocumentAddressOption(item))
-        .filter((entry): entry is ShipmentAddressOption => Boolean(entry))
-      mergeAddressOptions(mapped)
-      setAddressError(null)
-      return mapped
-    } catch (err) {
-      logger.error('sales.shipments.addresses.load', { err })
-      setAddressError(
-        t('sales.documents.shipments.addressLoadError', 'Failed to load addresses.'),
-      )
-      return []
-    } finally {
-      setAddressLoading(false)
-    }
-  }, [mapDocumentAddressOption, mergeAddressOptions, orderId, t])
+    const request = (async () => {
+      try {
+        const params = new URLSearchParams({
+          page: '1',
+          pageSize: '100',
+          documentId: orderId,
+          documentKind: 'order',
+        })
+        const response = await apiCall<{ items?: Array<Record<string, unknown>> }>(
+          `/api/sales/document-addresses?${params.toString()}`,
+          undefined,
+          { fallback: { items: [] } },
+        )
+        const items = Array.isArray(response.result?.items) ? response.result.items : []
+        const mapped = items
+          .map((item) => mapDocumentAddressOption(item))
+          .filter((entry): entry is ShipmentAddressOption => Boolean(entry))
+        const loadedOptions = dedupeAddressOptions([...baseAddressOptions, ...mapped])
+        if (currentAddressOrderIdRef.current !== orderId) return baseAddressOptions
+        mergeAddressOptions(loadedOptions)
+        setAddressError(null)
+        return loadedOptions
+      } catch (err) {
+        logger.error('sales.shipments.addresses.load', { err })
+        if (currentAddressOrderIdRef.current === orderId) {
+          setAddressError(
+            t('sales.documents.shipments.addressLoadError', 'Failed to load addresses.'),
+          )
+        }
+        return baseAddressOptions
+      }
+    })()
+    addressLoadPromiseRef.current = { orderId, promise: request }
+    void request.then(() => {
+      if (addressLoadPromiseRef.current?.promise === request) {
+        addressLoadPromiseRef.current = null
+        setAddressLoading(false)
+      }
+    })
+    return request
+  }, [baseAddressOptions, mapDocumentAddressOption, mergeAddressOptions, orderId, t])
 
   const buildPriceSubtitle = React.useCallback(
     (option: ShippingMethodOption): string | undefined => {
@@ -851,16 +873,20 @@ export function ShipmentDialog({
   )
 
   React.useEffect(() => {
-    if (!open) return
+    if (!open) {
+      initializedDialogKeyRef.current = null
+      return
+    }
+    const dialogKey = `${orderId}:${mode}:${shipment?.id ?? 'new'}`
+    if (initializedDialogKeyRef.current === dialogKey) return
+    initializedDialogKeyRef.current = dialogKey
     setFormResetKey((prev) => prev + 1)
     if (!shippingMethods.length) {
       void loadShippingMethods()
     }
     setAddressOptions(baseAddressOptions)
     setAddressError(null)
-    if (!addressOptions.length) {
-      void loadAddressOptions()
-    }
+    void loadAddressOptions()
     if (!shipmentStatuses.length) {
       void loadShipmentStatuses()
     }
@@ -871,7 +897,6 @@ export function ShipmentDialog({
       void loadLineStatuses()
     }
   }, [
-    addressOptions.length,
     baseAddressOptions,
     documentStatuses.length,
     loadAddressOptions,
@@ -881,6 +906,8 @@ export function ShipmentDialog({
     loadShippingMethods,
     mode,
     open,
+    orderId,
+    shipment?.id,
     lineStatuses.length,
     shipmentStatuses.length,
     shippingMethods.length,
@@ -939,11 +966,9 @@ export function ShipmentDialog({
 
   const fetchAddressItems = React.useCallback(
     async (query?: string): Promise<LookupSelectItem[]> => {
-      if (!addressOptions.length && !addressLoading) {
-        await loadAddressOptions()
-      }
+      const options = addressOptions.length ? addressOptions : await loadAddressOptions()
       const needle = query?.trim().toLowerCase() ?? ''
-      return addressOptions
+      return options
         .filter((option) => {
           if (!needle) return true
           return (
@@ -962,7 +987,7 @@ export function ShipmentDialog({
           ),
         }))
     },
-    [addressLoading, addressOptions, loadAddressOptions],
+    [addressOptions, loadAddressOptions],
   )
 
   const validateItems = React.useCallback(

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",
@@ -638,8 +639,10 @@
   "sales.documents.detail.items.errorDelete": "Position konnte nicht gelöscht werden.",
   "sales.documents.detail.items.errorDeleteShipped": "Positionen mit versandten Artikeln können nicht gelöscht werden.",
   "sales.documents.detail.items.errorLoad": "Positionen konnten nicht geladen werden.",
+  "sales.documents.detail.items.errorPriceShipped": "Preis oder Einheit einer Position mit versandten Artikeln können nicht geändert werden.",
   "sales.documents.detail.items.errorProductRequired": "Wähle ein Produkt aus, um fortzufahren.",
   "sales.documents.detail.items.errorQuantity": "Die Menge muss größer als 0 sein.",
+  "sales.documents.detail.items.errorQuantityBelowShipped": "Die Menge kann nicht unter die bereits versandten {{shipped}} gesenkt werden.",
   "sales.documents.detail.items.errorSave": "Position konnte nicht gespeichert werden.",
   "sales.documents.detail.items.errorUnitPrice": "Der Stückpreis muss größer als 0 sein.",
   "sales.documents.detail.items.errorVariantRequired": "Wähle eine Variante aus, um fortzufahren.",
@@ -950,8 +953,10 @@
   "sales.documents.items.errorDeleteShipped": "Positionen mit versandten Artikeln können nicht gelöscht werden.",
   "sales.documents.items.errorLoad": "Positionen konnten nicht geladen werden.",
   "sales.documents.items.errorNameRequired": "Name ist für benutzerdefinierte Positionen erforderlich.",
+  "sales.documents.items.errorPriceShipped": "Preis oder Einheit einer Position mit versandten Artikeln können nicht geändert werden.",
   "sales.documents.items.errorProductRequired": "Wähle ein Produkt aus, um fortzufahren.",
   "sales.documents.items.errorQuantity": "Die Menge muss größer als 0 sein.",
+  "sales.documents.items.errorQuantityBelowShipped": "Die Menge kann nicht unter die bereits versandten {{shipped}} gesenkt werden.",
   "sales.documents.items.errorSave": "Position konnte nicht gespeichert werden.",
   "sales.documents.items.errorScope": "Organisation und Mandant sind erforderlich.",
   "sales.documents.items.errorUnitPrice": "Der Stückpreis muss größer als 0 sein.",

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",
@@ -638,8 +639,10 @@
   "sales.documents.detail.items.errorDelete": "Failed to delete line.",
   "sales.documents.detail.items.errorDeleteShipped": "You cannot delete a line that has shipped items.",
   "sales.documents.detail.items.errorLoad": "Failed to load items.",
+  "sales.documents.detail.items.errorPriceShipped": "You cannot change the price or unit of a line that has shipped items.",
   "sales.documents.detail.items.errorProductRequired": "Select a product to continue.",
   "sales.documents.detail.items.errorQuantity": "Quantity must be greater than 0.",
+  "sales.documents.detail.items.errorQuantityBelowShipped": "You cannot lower the quantity below the {{shipped}} already shipped.",
   "sales.documents.detail.items.errorSave": "Failed to save line.",
   "sales.documents.detail.items.errorUnitPrice": "Unit price must be greater than 0.",
   "sales.documents.detail.items.errorVariantRequired": "Select a variant to continue.",
@@ -950,8 +953,10 @@
   "sales.documents.items.errorDeleteShipped": "You cannot delete a line that has shipped items.",
   "sales.documents.items.errorLoad": "Failed to load items.",
   "sales.documents.items.errorNameRequired": "Name is required for custom lines.",
+  "sales.documents.items.errorPriceShipped": "You cannot change the price or unit of a line that has shipped items.",
   "sales.documents.items.errorProductRequired": "Select a product to continue.",
   "sales.documents.items.errorQuantity": "Quantity must be greater than 0.",
+  "sales.documents.items.errorQuantityBelowShipped": "You cannot lower the quantity below the {{shipped}} already shipped.",
   "sales.documents.items.errorSave": "Failed to save line.",
   "sales.documents.items.errorScope": "Organization and tenant are required.",
   "sales.documents.items.errorUnitPrice": "Unit price must be greater than 0.",

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",
@@ -638,8 +639,10 @@
   "sales.documents.detail.items.errorDelete": "No se pudo eliminar la línea.",
   "sales.documents.detail.items.errorDeleteShipped": "No puedes eliminar una línea que ya tiene envíos.",
   "sales.documents.detail.items.errorLoad": "No se pudieron cargar los artículos.",
+  "sales.documents.detail.items.errorPriceShipped": "No puedes cambiar el precio ni la unidad de una línea que ya tiene envíos.",
   "sales.documents.detail.items.errorProductRequired": "Selecciona un producto para continuar.",
   "sales.documents.detail.items.errorQuantity": "La cantidad debe ser mayor que 0.",
+  "sales.documents.detail.items.errorQuantityBelowShipped": "No puedes reducir la cantidad por debajo de las {{shipped}} ya enviadas.",
   "sales.documents.detail.items.errorSave": "No se pudo guardar la línea.",
   "sales.documents.detail.items.errorUnitPrice": "El precio unitario debe ser mayor que 0.",
   "sales.documents.detail.items.errorVariantRequired": "Selecciona una variante para continuar.",
@@ -950,8 +953,10 @@
   "sales.documents.items.errorDeleteShipped": "No puedes eliminar una línea que ya tiene envíos.",
   "sales.documents.items.errorLoad": "No se pudieron cargar los artículos.",
   "sales.documents.items.errorNameRequired": "El nombre es obligatorio para líneas personalizadas.",
+  "sales.documents.items.errorPriceShipped": "No puedes cambiar el precio ni la unidad de una línea que ya tiene envíos.",
   "sales.documents.items.errorProductRequired": "Selecciona un producto para continuar.",
   "sales.documents.items.errorQuantity": "La cantidad debe ser mayor que 0.",
+  "sales.documents.items.errorQuantityBelowShipped": "No puedes reducir la cantidad por debajo de las {{shipped}} ya enviadas.",
   "sales.documents.items.errorSave": "No se pudo guardar la línea.",
   "sales.documents.items.errorScope": "Se requieren organización e inquilino.",
   "sales.documents.items.errorUnitPrice": "El precio unitario debe ser mayor que 0.",

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",
@@ -638,8 +639,10 @@
   "sales.documents.detail.items.errorDelete": "Nie udało się usunąć pozycji.",
   "sales.documents.detail.items.errorDeleteShipped": "Nie można usunąć pozycji, która ma wysłane sztuki.",
   "sales.documents.detail.items.errorLoad": "Nie udało się wczytać pozycji.",
+  "sales.documents.detail.items.errorPriceShipped": "Nie można zmienić ceny ani jednostki pozycji, która ma wysłane sztuki.",
   "sales.documents.detail.items.errorProductRequired": "Wybierz produkt, aby kontynuować.",
   "sales.documents.detail.items.errorQuantity": "Ilość musi być większa niż 0.",
+  "sales.documents.detail.items.errorQuantityBelowShipped": "Nie można obniżyć ilości poniżej {{shipped}} już wysłanych.",
   "sales.documents.detail.items.errorSave": "Nie udało się zapisać pozycji.",
   "sales.documents.detail.items.errorUnitPrice": "Cena jednostkowa musi być większa niż 0.",
   "sales.documents.detail.items.errorVariantRequired": "Wybierz wariant, aby kontynuować.",
@@ -950,8 +953,10 @@
   "sales.documents.items.errorDeleteShipped": "Nie można usunąć pozycji, która ma wysłane sztuki.",
   "sales.documents.items.errorLoad": "Nie udało się załadować pozycji.",
   "sales.documents.items.errorNameRequired": "Nazwa jest wymagana dla niestandardowych pozycji.",
+  "sales.documents.items.errorPriceShipped": "Nie można zmienić ceny ani jednostki pozycji, która ma wysłane sztuki.",
   "sales.documents.items.errorProductRequired": "Wybierz produkt, aby kontynuować.",
   "sales.documents.items.errorQuantity": "Ilość musi być większa niż 0.",
+  "sales.documents.items.errorQuantityBelowShipped": "Nie można obniżyć ilości poniżej {{shipped}} już wysłanych.",
   "sales.documents.items.errorSave": "Nie udało się zapisać pozycji.",
   "sales.documents.items.errorScope": "Wymagane są organizacja i najemca.",
   "sales.documents.items.errorUnitPrice": "Cena jednostkowa musi być większa niż 0.",

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

@@ -208,6 +208,21 @@ function buildBaseDocumentResult(params: {
         }
         break
       default:
+        // `return` (credit) adjustments are handled by the dedicated loop below;
+        // skip them here so an order-scoped return is not counted twice.
+        if (adj.kind === 'return') break
+        // Custom / operator-defined kinds carry an operator-controlled sign
+        // (positive adds, negative credits). Fold the raw signed amount into the
+        // grand total so a persisted adjustment can never be silently dropped
+        // from the headline total while still appearing in the itemized
+        // breakdown (#4052). No abs()/clamp here: unlike the sign-constrained
+        // kinds above, custom kinds are intentionally unconstrained
+        // (see enforceAdjustmentSign).
+        subtotalNet += net
+        subtotalGross += gross
+        if (taxPortion) {
+          taxTotal += taxPortion
+        }
         break
     }
   }

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/sales/lib/shipments/snapshots.ts

@@ -136,4 +136,34 @@ export const refreshShipmentItemsSnapshot = async (
   return snapshot
 }
 
+export const loadShippedQuantityByLine = async (
+  em: EntityManager,
+  orderId: string,
+  scope: { tenantId: string; organizationId: string },
+): Promise<Map<string, number>> => {
+  const shipments = await findWithDecryption(
+    em,
+    SalesShipment,
+    { order: orderId, deletedAt: null },
+    {},
+    scope,
+  )
+  const shippedByLine = new Map<string, number>()
+  if (!shipments.length) return shippedByLine
+  const items = await findWithDecryption(
+    em,
+    SalesShipmentItem,
+    { shipment: { $in: shipments.map((shipment) => shipment.id) } },
+    {},
+    scope,
+  )
+  items.forEach((item) => {
+    const orderLineId = typeof item.orderLine === 'string' ? item.orderLine : (item.orderLine?.id ?? null)
+    if (!orderLineId) return
+    const next = (shippedByLine.get(orderLineId) ?? 0) + coerceShipmentQuantity(item.quantity)
+    shippedByLine.set(orderLineId, next)
+  })
+  return shippedByLine
+}
+
 export type { ShipmentItemSnapshot } from './types'

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>
   )
 }