@open-mercato/core 0.6.6-develop.6543.1.49fadb4c31 → 0.6.6-develop.6551.1.1511bfa890

package/src/modules/customers/components/detail/CompanyDetailTabs.tsx

@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from 'react'
-import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
-import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import {
   Users,
   Handshake,
@@ -28,7 +27,7 @@ type TabDef = {
   id: CompanyTabId
   label: string
   icon?: React.ReactNode
-  badge?: React.ReactNode
+  count?: React.ReactNode
 }
 
 type CompanyDetailTabsProps = {
@@ -59,21 +58,9 @@ export function resolveLegacyTab(tab: string | null | undefined): CompanyTabId {
   return tab as CompanyTabId
 }
 
-function NewBadge() {
-  return (
-    <span className="ml-1.5 rounded bg-foreground px-1.5 py-0.5 text-overline font-semibold leading-none text-background">
-      NEW
-    </span>
-  )
-}
-
-function CountBadge({ count }: { count: number }) {
-  if (count <= 0) return null
-  return (
-    <span className="ml-1.5 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium leading-none text-muted-foreground">
-      {count > 999 ? '999+' : count}
-    </span>
-  )
+function formatTabCount(count: number): string | number | undefined {
+  if (count <= 0) return undefined
+  return count > 999 ? '999+' : count
 }
 
 export function CompanyDetailTabs({
@@ -96,7 +83,7 @@ export function CompanyDetailTabs({
         id: 'people',
         label: t('customers.companies.detail.tabs.people', 'People'),
         icon: <Users className="size-4" />,
-        badge: <CountBadge count={peopleCount} />,
+        count: formatTabCount(peopleCount),
       },
       ...(canViewDeals
         ? [
@@ -104,7 +91,7 @@ export function CompanyDetailTabs({
               id: 'deals' as CompanyTabId,
               label: t('customers.companies.detail.tabs.deals', 'Deals'),
               icon: <Handshake className="size-4" />,
-              badge: <CountBadge count={dealsCount} />,
+              count: formatTabCount(dealsCount),
             },
           ]
         : []),
@@ -112,19 +99,19 @@ export function CompanyDetailTabs({
         id: 'activity-log',
         label: t('customers.companies.detail.tabs.activityLog', 'Activity log'),
         icon: <Clock className="size-4" />,
-        badge: <CountBadge count={activitiesCount} />,
+        count: formatTabCount(activitiesCount),
       },
       {
         id: 'changelog',
         label: t('customers.companies.detail.tabs.changelog', 'Changelog'),
         icon: <History className="size-4" />,
-        badge: <NewBadge />,
+        count: 'NEW',
       },
       {
         id: 'files',
         label: t('customers.companies.detail.tabs.files', 'Files'),
         icon: <Paperclip className="size-4" />,
-        badge: <CountBadge count={filesCount} />,
+        count: formatTabCount(filesCount),
       },
     ],
     [t, canViewDeals, peopleCount, dealsCount, activitiesCount, filesCount],
@@ -144,33 +131,24 @@ export function CompanyDetailTabs({
   return (
     <div>
       {/* Tab navigation */}
-      <div className="flex items-end justify-between gap-2 border-b" role="tablist" aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}>
-        <nav className="-mb-px flex flex-1 gap-1 overflow-x-auto px-1">
-          {allTabs.map((tab) => {
-            const isActive = activeTab === tab.id
-            return (
-              <Button
-                key={tab.id}
-                type="button"
-                variant="ghost"
-                size="sm"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => onTabChange(tab.id)}
-                className={cn(
-                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',
-                  isActive
-                    ? 'border-foreground text-foreground font-semibold'
-                    : 'border-transparent text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {tab.icon && <span className="mr-1.5">{tab.icon}</span>}
+      <div className="flex items-end justify-between gap-2 border-b">
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => onTabChange(value as CompanyTabId)}
+          variant="underline"
+          className="min-w-0 flex-1"
+        >
+          <TabsList
+            aria-label={t('customers.companies.detail.tabs.label', 'Company detail sections')}
+            className="-mb-px w-full overflow-x-auto border-b-0 px-1"
+          >
+            {allTabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id} leading={tab.icon} count={tab.count}>
                 {tab.label}
-                {tab.badge}
-              </Button>
-            )
-          })}
-        </nav>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
         {sectionAction ? (
           <Button
             type="button"

package/src/modules/customers/components/detail/DealDetailTabs.tsx

@@ -2,9 +2,8 @@
 
 import * as React from 'react'
 import { Activity, Building2, History, NotebookPen, Paperclip, Users } from 'lucide-react'
-import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 
 export type DealTabId =
   | 'activities'
@@ -19,7 +18,7 @@ type TabDef = {
   id: DealTabId
   label: string
   icon?: React.ReactNode
-  badge?: React.ReactNode
+  count?: React.ReactNode
 }
 
 type DealDetailTabsProps = {
@@ -38,21 +37,9 @@ export function resolveLegacyTab(tab: string | null | undefined): DealTabId {
   return SUPPORTED_TAB_IDS.has(tab as DealTabId) ? (tab as DealTabId) : 'activities'
 }
 
-function CountBadge({ count }: { count: number }) {
-  if (count <= 0) return null
-  return (
-    <span className="ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground">
-      {count > 999 ? '999+' : count}
-    </span>
-  )
-}
-
-function NewBadge() {
-  return (
-    <span className="ml-1.5 rounded-sm bg-muted px-1.5 py-px text-xs font-semibold leading-none text-muted-foreground">
-      NEW
-    </span>
-  )
+function formatTabCount(count: number): string | number | undefined {
+  if (count <= 0) return undefined
+  return count > 999 ? '999+' : count
 }
 
 export function DealDetailTabs({
@@ -76,13 +63,13 @@ export function DealDetailTabs({
         id: 'people',
         label: t('customers.deals.detail.tabs.people', 'People'),
         icon: <Users className="size-4" />,
-        badge: <CountBadge count={peopleCount} />,
+        count: formatTabCount(peopleCount),
       },
       {
         id: 'companies',
         label: t('customers.deals.detail.tabs.companies', 'Companies'),
         icon: <Building2 className="size-4" />,
-        badge: <CountBadge count={companiesCount} />,
+        count: formatTabCount(companiesCount),
       },
       {
         id: 'notes',
@@ -98,7 +85,7 @@ export function DealDetailTabs({
         id: 'changelog',
         label: t('customers.deals.detail.tabs.changelog', 'Changelog'),
         icon: <History className="size-4" />,
-        badge: <NewBadge />,
+        count: 'NEW',
       },
     ],
     [companiesCount, peopleCount, t],
@@ -117,34 +104,22 @@ export function DealDetailTabs({
 
   return (
     <div>
-      <div className="border-b border-border" role="tablist" aria-label={t('customers.deals.detail.tabs.label', 'Deal detail sections')}>
-        <nav className="-mb-px flex gap-7 overflow-x-auto" role="presentation">
-          {allTabs.map((tab) => {
-            const isActive = activeTab === tab.id
-            return (
-              <Button
-                key={tab.id}
-                type="button"
-                variant="ghost"
-                size="sm"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => onTabChange(tab.id)}
-                className={cn(
-                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',
-                  isActive
-                    ? 'border-foreground text-foreground font-semibold'
-                    : 'border-transparent text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {tab.icon ? <span className="mr-1.5">{tab.icon}</span> : null}
-                {tab.label}
-                {tab.badge}
-              </Button>
-            )
-          })}
-        </nav>
-      </div>
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => onTabChange(value as DealTabId)}
+        variant="underline"
+      >
+        <TabsList
+          aria-label={t('customers.deals.detail.tabs.label', 'Deal detail sections')}
+          className="w-full overflow-x-auto"
+        >
+          {allTabs.map((tab) => (
+            <TabsTrigger key={tab.id} value={tab.id} leading={tab.icon} count={tab.count}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
 
       <div className="pt-5" role="tabpanel">
         {children}

package/src/modules/customers/components/detail/DetailTabsLayout.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import type { SectionAction } from '@open-mercato/ui/backend/detail'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Plus } from 'lucide-react'
 
@@ -46,31 +47,19 @@ export function DetailTabsLayout<TId extends string = string>({
   return (
     <div className={cn('space-y-4', className)}>
       <div className={cn('flex flex-wrap items-center justify-between gap-3', headerClassName)}>
-        <nav
-          className={cn('flex flex-wrap items-center gap-3 text-sm', navClassName)}
-          role="tablist"
-          aria-label={navAriaLabel}
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => handleTabChange(value as TId)}
+          variant="underline"
         >
-          {tabs.map((tab) => (
-            <Button
-              key={tab.id}
-              type="button"
-              variant="ghost"
-              size="sm"
-              role="tab"
-              aria-selected={activeTab === tab.id}
-              onClick={() => handleTabChange(tab.id)}
-              className={cn(
-                'h-auto rounded-none border-b-2 px-0 py-1',
-                activeTab === tab.id
-                  ? 'border-accent-indigo text-foreground hover:bg-transparent'
-                  : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-transparent'
-              )}
-            >
-              {tab.label}
-            </Button>
-          ))}
-        </nav>
+          <TabsList className={cn('h-auto flex-wrap border-b-0', navClassName)} aria-label={navAriaLabel}>
+            {tabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id}>
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
         {sectionAction ? (
           <Button
             type="button"

package/src/modules/customers/components/detail/MobilePersonDetail.tsx

@@ -3,8 +3,7 @@
 import * as React from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { cn } from '@open-mercato/shared/lib/utils'
-import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 
 export type MobilePersonZone = 'details' | 'activity'
 
@@ -80,35 +79,30 @@ export function MobilePersonDetail({
 
   return (
     <div className="space-y-4">
-      <div
-        role="tablist"
-        aria-label={t(
-          'customers.people.mobile.zoneSwitcher.ariaLabel',
-          'Zone selector',
-        )}
-        className="grid grid-cols-2 gap-1 rounded-lg border border-border/70 bg-muted/20 p-1"
-        onKeyDown={handleKeyDown}
-      >
-        {ZONES.map((entry) => {
-          const isActive = zone === entry.id
-          return (
-            <Button
-              key={entry.id}
-              type="button"
-              role="tab"
-              aria-selected={isActive}
-              aria-controls={`mobile-person-zone-${entry.id}`}
-              variant={isActive ? 'default' : 'ghost'}
-              className={cn(
-                'h-11 rounded-lg text-sm font-semibold',
-                isActive ? '' : 'text-muted-foreground',
-              )}
-              onClick={() => handleZoneChange(entry.id)}
-            >
-              {t(entry.labelKey, entry.fallback)}
-            </Button>
-          )
-        })}
+      <div onKeyDown={handleKeyDown}>
+        <Tabs
+          value={zone}
+          onValueChange={(value) => handleZoneChange(value as MobilePersonZone)}
+          variant="underline"
+        >
+          <TabsList
+            aria-label={t(
+              'customers.people.mobile.zoneSwitcher.ariaLabel',
+              'Zone selector',
+            )}
+            className="w-full"
+          >
+            {ZONES.map((entry) => (
+              <TabsTrigger
+                key={entry.id}
+                value={entry.id}
+                className="flex-1 justify-center"
+              >
+                {t(entry.labelKey, entry.fallback)}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
       </div>
       <div
         id={`mobile-person-zone-${zone}`}

package/src/modules/customers/components/detail/PersonDetailTabs.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import * as React from 'react'
-import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import {
   SquareCheckBig,
   Mail,
@@ -32,7 +32,7 @@ type TabDef = {
   id: PersonTabId
   label: string
   icon?: React.ReactNode
-  badge?: React.ReactNode
+  count?: React.ReactNode
 }
 
 type PersonDetailTabsProps = {
@@ -56,21 +56,9 @@ export function resolveLegacyTab(tab: string | null | undefined): PersonTabId {
   return SUPPORTED_TAB_IDS.has(tab as PersonTabId) ? (tab as PersonTabId) : 'activities'
 }
 
-function CountBadge({ count }: { count: number }) {
-  if (count <= 0) return null
-  return (
-    <span className="ml-1 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium leading-none text-muted-foreground">
-      {count > 999 ? '999+' : count}
-    </span>
-  )
-}
-
-function NewBadge() {
-  return (
-    <span className="ml-1.5 rounded bg-foreground px-1.5 py-0.5 text-overline font-semibold leading-none text-background">
-      NEW
-    </span>
-  )
+function formatTabCount(count: number): string | number | undefined {
+  if (count <= 0) return undefined
+  return count > 999 ? '999+' : count
 }
 
 export function PersonDetailTabs({
@@ -94,7 +82,7 @@ export function PersonDetailTabs({
         id: 'activities',
         label: t('customers.people.detail.tabs.activities', 'Activities'),
         icon: <SquareCheckBig className="size-4" />,
-        badge: <CountBadge count={activitiesCount} />,
+        count: formatTabCount(activitiesCount),
       },
       {
         id: 'emails',
@@ -105,37 +93,37 @@ export function PersonDetailTabs({
         id: 'deals',
         label: t('customers.people.detail.tabs.deals', 'Deals'),
         icon: <Briefcase className="size-4" />,
-        badge: <CountBadge count={dealsCount} />,
+        count: formatTabCount(dealsCount),
       },
       {
         id: 'companies',
         label: t('customers.people.detail.tabs.companies', 'Companies'),
         icon: <Building2 className="size-4" />,
-        badge: <CountBadge count={companiesCount} />,
+        count: formatTabCount(companiesCount),
       },
       {
         id: 'addresses',
         label: t('customers.people.detail.tabs.addresses', 'Addresses'),
         icon: <MapPin className="size-4" />,
-        badge: <CountBadge count={addressesCount} />,
+        count: formatTabCount(addressesCount),
       },
       {
         id: 'tasks',
         label: t('customers.people.detail.tabs.tasks', 'Tasks'),
         icon: <Check className="size-4" />,
-        badge: <CountBadge count={tasksCount} />,
+        count: formatTabCount(tasksCount),
       },
       {
         id: 'changelog',
         label: t('customers.people.detail.tabs.changelog', 'Change log'),
         icon: <History className="size-4" />,
-        badge: <NewBadge />,
+        count: 'NEW',
       },
       {
         id: 'files',
         label: t('customers.people.detail.tabs.files', 'Files'),
         icon: <Paperclip className="size-4" />,
-        badge: <CountBadge count={filesCount} />,
+        count: formatTabCount(filesCount),
       },
     ],
     [t, activitiesCount, dealsCount, companiesCount, addressesCount, tasksCount, filesCount],
@@ -155,33 +143,24 @@ export function PersonDetailTabs({
   return (
     <div>
       {/* Tab navigation — full width above both zones */}
-      <div className="flex items-end justify-between gap-2 border-b" role="tablist" aria-label={t('customers.people.detail.tabs.label', 'Person detail sections')}>
-        <nav className="-mb-px flex flex-1 gap-1 overflow-x-auto px-1">
-          {allTabs.map((tab) => {
-            const isActive = activeTab === tab.id
-            return (
-              <Button
-                key={tab.id}
-                type="button"
-                variant="ghost"
-                size="sm"
-                role="tab"
-                aria-selected={isActive}
-                onClick={() => onTabChange(tab.id)}
-                className={cn(
-                  'h-auto shrink-0 rounded-none border-b-2 px-3 py-2.5 hover:bg-transparent',
-                  isActive
-                    ? 'border-foreground text-foreground font-semibold'
-                    : 'border-transparent text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {tab.icon && <span className="mr-1.5">{tab.icon}</span>}
+      <div className="flex items-end justify-between gap-2 border-b">
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => onTabChange(value as PersonTabId)}
+          variant="underline"
+          className="min-w-0 flex-1"
+        >
+          <TabsList
+            aria-label={t('customers.people.detail.tabs.label', 'Person detail sections')}
+            className="-mb-px w-full overflow-x-auto border-b-0 px-1"
+          >
+            {allTabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id} leading={tab.icon} count={tab.count}>
                 {tab.label}
-                {tab.badge}
-              </Button>
-            )
-          })}
-        </nav>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
         {sectionAction ? (
           <Button
             type="button"

package/src/modules/feature_toggles/api/check/boolean/route.ts

@@ -18,21 +18,6 @@ export async function GET(req: Request) {
         return NextResponse.json({ error: 'Missing required parameter: identifier' }, { status: 400 })
     }
 
-    if (auth.isSuperAdmin === true) {
-        return NextResponse.json({
-            ok: true,
-            value: true,
-            resolution: {
-                valueType: "boolean",
-                value: true,
-                source: "override",
-                toggleId: "superadmin",
-                identifier,
-                tenantId: "superadmin"
-            }
-        })
-    }
-
     const container = await createRequestContainer()
     const { scope } = await resolveFeatureCheckContext({
         container,

package/src/modules/feature_toggles/defaults.json

@@ -16,6 +16,14 @@
       "type": "string",
       "defaultValue": "Free shipping on orders over $50"
     },
+    {
+      "identifier": "sales_channels_enabled",
+      "name": "Sales Channels",
+      "description": "Show sales channel pickers, filters, and management UI. Disable for tenants that do not use sales channels.",
+      "category": "sales",
+      "type": "boolean",
+      "defaultValue": true
+    },
     {
       "identifier": "order_review_threshold",
       "name": "Order Review Threshold",