@exxatdesignux/ui 0.2.9 → 0.2.10

package/template/components/charts-overview.tsx

@@ -108,10 +108,19 @@ import {
 import { isEditableTarget } from "@/lib/editable-target"
 import { chartLineStrokeDash } from "@/lib/chart-line-dash"
 import { cn } from "@/lib/utils"
+import { metricTrendTone, type MetricTrendPolarity } from "@/components/key-metrics"
 
 /** Recharts passes `index` into Line `dot` renderers; published `DotProps` omits it. */
 type LineDotRenderProps = DotProps & { index?: number }
 
+type MiniMetric = {
+  label: string
+  value: string
+  trend?: "up" | "down" | "neutral"
+  /** Same semantics as `MetricItem.trendPolarity` on `KeyMetrics`. */
+  trendPolarity?: MetricTrendPolarity
+}
+
 /* ── Colour tokens ────────────────────────────────────────────────────────── */
 const BRAND       = "var(--brand-color)"
 const CHART_1     = "var(--color-chart-1)"
@@ -712,8 +721,6 @@ function ChartCardHeader({
   )
 }
 
-type MiniMetric = { label: string; value: string; trend?: "up" | "down" | "neutral" }
-
 export function ChartCard({
   title,
   description,
@@ -856,6 +863,19 @@ export function ChartCard({
                 {metrics.map((m) => {
                   const isUp   = m.trend === "up"
                   const isDown = m.trend === "down"
+                  const tone = metricTrendTone(m.trend ?? "neutral", m.trendPolarity)
+                  const upClass =
+                    tone === "positive"
+                      ? "text-emerald-600"
+                      : tone === "negative"
+                        ? "text-destructive"
+                        : "text-muted-foreground"
+                  const downClass =
+                    tone === "positive"
+                      ? "text-emerald-600"
+                      : tone === "negative"
+                        ? "text-destructive"
+                        : "text-muted-foreground"
                   return (
                     <TabsTrigger
                       key={m.label}
@@ -865,8 +885,8 @@ export function ChartCard({
                       <span className="text-sm font-normal text-muted-foreground leading-none">{m.label}</span>
                       <div className="flex items-baseline gap-1.5">
                         <span className="text-xl font-bold tabular-nums leading-none text-foreground">{m.value}</span>
-                        {isUp   && <i className="fa-light fa-arrow-trend-up text-xs text-emerald-600"   aria-hidden="true" />}
-                        {isDown && <i className="fa-light fa-arrow-trend-down text-xs text-destructive" aria-hidden="true" />}
+                        {isUp   && <i className={cn("fa-light fa-arrow-trend-up text-xs", upClass)}   aria-hidden="true" />}
+                        {isDown && <i className={cn("fa-light fa-arrow-trend-down text-xs", downClass)} aria-hidden="true" />}
                       </div>
                     </TabsTrigger>
                   )
@@ -896,6 +916,13 @@ export function ChartCard({
     const kpi    = miniMetrics?.[0]
     const isUp   = kpi?.trend === "up"
     const isDown = kpi?.trend === "down"
+    const tone = metricTrendTone(kpi?.trend ?? "neutral", kpi?.trendPolarity)
+    const trendClass =
+      tone === "positive"
+        ? "text-emerald-600"
+        : tone === "negative"
+          ? "text-destructive"
+          : "text-muted-foreground"
 
     return (
       <Card className={`flex flex-col h-full ${className}`} role="figure" aria-label={title}>
@@ -908,13 +935,13 @@ export function ChartCard({
                 {kpi.value}
               </span>
               {isUp && (
-                <span className="flex items-center gap-1 text-sm font-medium text-emerald-600">
+                <span className={cn("flex items-center gap-1 text-sm font-medium", trendClass)}>
                   <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
                   <span className="sr-only">trending up</span>
                 </span>
               )}
               {isDown && (
-                <span className="flex items-center gap-1 text-sm font-medium text-destructive">
+                <span className={cn("flex items-center gap-1 text-sm font-medium", trendClass)}>
                   <i className="fa-light fa-arrow-trend-down" aria-hidden="true" />
                   <span className="sr-only">trending down</span>
                 </span>

package/template/components/collaboration-access-flow.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+
+import type { InviteCollaboratorFormValues } from "@/components/invite-collaborators-drawer"
+import { InviteCollaboratorsDrawer } from "@/components/invite-collaborators-drawer"
+import type { PageHeaderCollaborator } from "@/components/page-header"
+import {
+  canRemoveCollaboratorFromRoster,
+  canSetCollaboratorAccessRole,
+  displayNameFromInviteEmail,
+  type CollaboratorAccessRole,
+} from "@/lib/collaborator-access"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+
+export interface CollaborationAccessFlowRenderProps {
+  collaborators: PageHeaderCollaborator[]
+  openInvite: () => void
+}
+
+export interface CollaborationAccessFlowProps {
+  initialCollaborators: PageHeaderCollaborator[]
+  resourceLabel: string
+  onInvite?: (
+    values: InviteCollaboratorFormValues,
+    collaborators: PageHeaderCollaborator[],
+  ) => PageHeaderCollaborator[] | void
+  onCollaboratorAccessChange?: (
+    id: string,
+    access: CollaboratorAccessRole,
+    collaborators: PageHeaderCollaborator[],
+  ) => PageHeaderCollaborator[] | void
+  onCollaboratorRemove?: (
+    id: string,
+    collaborators: PageHeaderCollaborator[],
+  ) => PageHeaderCollaborator[] | void
+  children: (props: CollaborationAccessFlowRenderProps) => React.ReactNode
+}
+
+function appendInvitedCollaborator(
+  collaborators: PageHeaderCollaborator[],
+  values: InviteCollaboratorFormValues,
+): PageHeaderCollaborator[] {
+  const name = displayNameFromInviteEmail(values.email)
+  return [
+    ...collaborators,
+    {
+      id: `invite-${values.email}`,
+      name,
+      email: values.email,
+      access: values.access,
+      initials: initialsFromDisplayName(name),
+    },
+  ]
+}
+
+function updateCollaboratorAccess(
+  collaborators: PageHeaderCollaborator[],
+  id: string,
+  access: CollaboratorAccessRole,
+): PageHeaderCollaborator[] {
+  const person = collaborators.find(entry => entry.id === id)
+  if (!person || !canSetCollaboratorAccessRole(person, collaborators, access)) {
+    return collaborators
+  }
+  return collaborators.map(entry => (entry.id === id ? { ...entry, access } : entry))
+}
+
+function removeCollaboratorFromRoster(
+  collaborators: PageHeaderCollaborator[],
+  id: string,
+): PageHeaderCollaborator[] {
+  const person = collaborators.find(entry => entry.id === id)
+  if (!person || !canRemoveCollaboratorFromRoster(person, collaborators)) {
+    return collaborators
+  }
+  return collaborators.filter(entry => entry.id !== id)
+}
+
+export function CollaborationAccessFlow({
+  initialCollaborators,
+  resourceLabel,
+  onInvite,
+  onCollaboratorAccessChange,
+  onCollaboratorRemove,
+  children,
+}: CollaborationAccessFlowProps) {
+  const [collaborators, setCollaborators] = React.useState<PageHeaderCollaborator[]>(
+    () => initialCollaborators.map(person => ({ ...person })),
+  )
+  const [inviteOpen, setInviteOpen] = React.useState(false)
+
+  const openInvite = React.useCallback(() => {
+    setInviteOpen(true)
+  }, [])
+
+  const handleInvite = React.useCallback(
+    (values: InviteCollaboratorFormValues) => {
+      setCollaborators(current => {
+        const next = onInvite?.(values, current) ?? appendInvitedCollaborator(current, values)
+        return next
+      })
+    },
+    [onInvite],
+  )
+
+  const handleAccessChange = React.useCallback(
+    (id: string, access: CollaboratorAccessRole) => {
+      setCollaborators(current => {
+        const next =
+          onCollaboratorAccessChange?.(id, access, current)
+          ?? updateCollaboratorAccess(current, id, access)
+        return next
+      })
+    },
+    [onCollaboratorAccessChange],
+  )
+
+  const handleRemove = React.useCallback(
+    (id: string) => {
+      setCollaborators(current => {
+        const next =
+          onCollaboratorRemove?.(id, current) ?? removeCollaboratorFromRoster(current, id)
+        return next
+      })
+    },
+    [onCollaboratorRemove],
+  )
+
+  return (
+    <>
+      {children({ collaborators, openInvite })}
+      <InviteCollaboratorsDrawer
+        open={inviteOpen}
+        onOpenChange={setInviteOpen}
+        collaborators={collaborators}
+        resourceLabel={resourceLabel}
+        onInvite={handleInvite}
+        onCollaboratorAccessChange={handleAccessChange}
+        onCollaboratorRemove={handleRemove}
+      />
+    </>
+  )
+}

package/template/components/compliance-page-header.tsx

@@ -59,7 +59,7 @@ export function CompliancePageHeader({
                 </Button>
               </DropdownMenuTrigger>
             </Tip>
-            <DropdownMenuContent align="end" className="w-52">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem
                 onSelect={() => {
                   window.setTimeout(() => onExport(), 0)

package/template/components/compliance-table.tsx

@@ -22,7 +22,7 @@ import {
   saveComplianceDashboardLayout,
 } from "@/components/data-view-dashboard-charts-compliance"
 import { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
-import type { ChartType, DashboardLayout } from "@/components/data-view-dashboard-charts"
+import type { ChartType, DashboardLayout } from "@/lib/data-view-dashboard-placements-layout"
 import { ComplianceListView } from "@/components/compliance-list-view"
 import { ComplianceBoardView, COMPLIANCE_BOARD_GROUP_OPTIONS } from "@/components/compliance-board-view"
 import { complianceKpiInsight, complianceKpiMetrics } from "@/lib/mock/compliance-kpi"
@@ -204,7 +204,7 @@ function buildComplianceColumns(items: ComplianceItem[]): ColumnDef<ComplianceIt
                 <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem disabled>
                 <i className="fa-light fa-eye" aria-hidden="true" />
                 View details

package/template/components/dashboard-tabs.tsx

@@ -29,6 +29,7 @@ import {
 import { DashboardPromoBanner } from "@/components/dashboard-promo-banner"
 import { CoachMark } from "@/components/ui/coach-mark"
 import { useCoachMark } from "@/hooks/use-coach-mark"
+import { formatDateFromDate } from "@/lib/date-filter"
 
 /* ── Types passed from the page ─────────────────────────────────────────── */
 interface DashboardTabsProps {
@@ -59,7 +60,7 @@ function GreetingWidget({ compact = false }: { compact?: boolean }) {
         <div>
           {!compact ? (
             <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider" suppressHydrationWarning>
-              {now?.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }) ?? ""}
+              {now ? formatDateFromDate(now) : ""}
             </p>
           ) : null}
           {compact ? (
@@ -95,8 +96,8 @@ const TASK_ITEMS: TaskListItem[] = [
   { id: 1, label: "Review pending evaluations",   due: "Today",     priority: "high",   done: false },
   { id: 2, label: "Approve site contract — City Med", due: "Today",  priority: "high",   done: false },
   { id: 3, label: "Send onboarding docs to PT cohort", due: "Tomorrow", priority: "medium", done: false },
-  { id: 4, label: "Update compliance checklist",  due: "Mar 25",    priority: "medium", done: false },
-  { id: 5, label: "Schedule supervisor training", due: "Mar 28",    priority: "low",    done: true  },
+  { id: 4, label: "Update compliance checklist",  due: "03/25/2026", priority: "medium", done: false },
+  { id: 5, label: "Schedule supervisor training", due: "03/28/2026", priority: "low",    done: true  },
 ]
 
 /* ── Insights ─────────────────────────────────────────────────────────────── */

package/template/components/data-list-table-cells.tsx

@@ -154,7 +154,7 @@ export function RowActions({ row, actions }: { row: Placement; actions: RowActio
           </Button>
         </DropdownMenuTrigger>
       </Tip>
-      <DropdownMenuContent align="end" className="w-40">
+      <DropdownMenuContent align="end">
         {actions.map((a, i) => (
           <React.Fragment key={a.label}>
             {a.variant === "destructive" && i > 0 && <DropdownMenuSeparator />}

package/template/components/data-list-table.tsx

@@ -26,7 +26,7 @@ import {
   saveDashboardLayout,
   type ChartType,
   type DashboardLayout,
-} from "@/components/data-view-dashboard-charts"
+} from "@/lib/data-view-dashboard-placements-layout"
 import { CoachMark } from "@/components/ui/coach-mark"
 import { useCoachMark } from "@/hooks/use-coach-mark"
 import { DASHBOARD_CUSTOMIZE_COACH_STEPS } from "@/lib/dashboard-customize-coach-mark"

package/template/components/data-table/index.tsx

@@ -502,7 +502,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                 Add filter
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-48">
+            <DropdownMenuContent align="start">
               <DropdownMenuLabel className="text-xs">Filter by field</DropdownMenuLabel>
               <DropdownMenuSeparator />
               {filterableCols.map(c => (
@@ -615,7 +615,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                           <i className="fa-light fa-filter text-[13px]" aria-hidden="true" />
                         </button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end" className="w-48">
+                      <DropdownMenuContent align="end">
                         <DropdownMenuLabel className="text-xs">Filter by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {filterableCols.map(c => (
@@ -1173,7 +1173,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
                               </button>
                             </DropdownMenuTrigger>
                           </Tip>
-                          <DropdownMenuContent align="start" className="min-w-44">
+                          <DropdownMenuContent align="start">
 
                             {/* Column quick-search */}
                             <div className="px-2 pt-2 pb-1">
@@ -1234,14 +1234,14 @@ function DataTableInner<TData extends Record<string, unknown>>({
                                   const filtered = prev.filter(r => r.fieldKey !== col.key)
                                   return [{ id: `sort-${Date.now()}`, fieldKey: col.key, direction: "asc" as const }, ...filtered]
                                 })}>
-                                  <i className="fa-light fa-arrow-up-az" aria-hidden="true" />
+                                  <i className="fa-light fa-arrow-up-a-z text-xs shrink-0" aria-hidden="true" />
                                   Sort Ascending
                                 </DropdownMenuItem>
                                 <DropdownMenuItem onClick={() => setSortRules(prev => {
                                   const filtered = prev.filter(r => r.fieldKey !== col.key)
                                   return [{ id: `sort-${Date.now()}`, fieldKey: col.key, direction: "desc" as const }, ...filtered]
                                 })}>
-                                  <i className="fa-light fa-arrow-down-az" aria-hidden="true" />
+                                  <i className="fa-light fa-arrow-down-a-z text-xs shrink-0" aria-hidden="true" />
                                   Sort Descending
                                 </DropdownMenuItem>
                                 <DropdownMenuSeparator />

package/template/components/data-table/use-table-state.ts

@@ -91,6 +91,11 @@ export function useTableState<TData extends Record<string, unknown>>(
   columns: ColumnDef<TData>[],
   defaultSort?: { key: string; dir: SortDir },
   paginationOverride?: { page: number; pageSize: number },
+  /**
+   * When defined (including `""`), toolbar search is synced from the URL (`?q=`).
+   * Use `searchParams.get("q") ?? ""` on question bank list routes; omit for other hubs.
+   */
+  syncedSearchFromUrl?: string,
 ) {
   // ── Sort ──────────────────────────────────────────────────────────────────
   const [sortRules, setSortRules] = React.useState<SortRule[]>(() => {
@@ -133,8 +138,12 @@ export function useTableState<TData extends Record<string, unknown>>(
   }, [setSortRules])
 
   // ── Filters ───────────────────────────────────────────────────────────────
-  const [search, setSearch] = React.useState("")
-  const [searchOpen, setSearchOpen] = React.useState(false)
+  const [search, setSearch] = React.useState(() =>
+    syncedSearchFromUrl !== undefined ? syncedSearchFromUrl.trim() : "",
+  )
+  const [searchOpen, setSearchOpen] = React.useState(() =>
+    syncedSearchFromUrl !== undefined && Boolean(syncedSearchFromUrl.trim()),
+  )
   const searchRef = React.useRef<HTMLInputElement>(null)
   const [activeFilters, setActiveFilters] = React.useState<ActiveFilter[]>([])
   const [filterConnectors, setFilterConnectors] = React.useState<Record<string, "and" | "or">>({})
@@ -142,6 +151,13 @@ export function useTableState<TData extends Record<string, unknown>>(
   const [filterBarVisible, setFilterBarVisible] = React.useState(true)
   const [drawerExpandedFilters, setDrawerExpandedFilters] = React.useState<Set<string>>(new Set())
 
+  React.useEffect(() => {
+    if (syncedSearchFromUrl === undefined) return
+    const next = syncedSearchFromUrl.trim()
+    setSearch(next)
+    setSearchOpen(next.length > 0)
+  }, [syncedSearchFromUrl])
+
   const toggleConnector = React.useCallback((leftId: string) => {
     setFilterConnectors(prev => ({ ...prev, [leftId]: prev[leftId] === "or" ? "and" : "or" }))
   }, [setFilterConnectors])

package/template/components/data-view-dashboard-charts-compliance.tsx

@@ -56,7 +56,7 @@ import {
   applyVisibleReorder,
   type ChartType,
   type DashboardLayout,
-} from "@/components/data-view-dashboard-charts"
+} from "@/lib/data-view-dashboard-placements-layout"
 import {
   CHART_KBD_ACTIVE_BAR,
   CHART_KBD_ACTIVE_PIE_SHAPE,
@@ -74,6 +74,9 @@ const CAT_CFG: ChartConfig = {
   value: { label: "Items", color: "var(--primary)" },
 }
 
+const CHART_MARGIN = { top: 8, right: 8, left: 0, bottom: 0 } as const
+const CHART_MARGIN_HORIZONTAL = { top: 8, right: 8, left: 4, bottom: 0 } as const
+
 interface ComplianceDashboardCardDef {
   id: string
   title: string
@@ -254,7 +257,7 @@ function ComplianceByStatusChart({ rows, chartType }: { rows: ComplianceItem[];
         {(activeIndex) => (
           <>
             <ChartContainer config={STATUS_CFG} className="h-[220px] w-full">
-              <BarChart data={byStatus} layout="vertical" margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={byStatus} layout="vertical" margin={CHART_MARGIN}>
                 <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis type="category" dataKey="name" width={88} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -289,7 +292,7 @@ function ComplianceByStatusChart({ rows, chartType }: { rows: ComplianceItem[];
       {(activeIndex) => (
         <>
           <ChartContainer config={STATUS_CFG} className="h-[220px] w-full">
-            <BarChart data={byStatus} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+            <BarChart data={byStatus} margin={CHART_MARGIN}>
               <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
               <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
               <YAxis allowDecimals={false} width={32} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
@@ -374,7 +377,7 @@ function ComplianceByCategoryChart({ rows, chartType }: { rows: ComplianceItem[]
         {(activeIndex) => (
           <>
             <ChartContainer config={CAT_CFG} className="h-[220px] w-full">
-              <BarChart data={byCategory} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={byCategory} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
@@ -409,7 +412,7 @@ function ComplianceByCategoryChart({ rows, chartType }: { rows: ComplianceItem[]
       {(activeIndex) => (
         <>
           <ChartContainer config={CAT_CFG} className="h-[220px] w-full">
-            <BarChart data={byCategory} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+            <BarChart data={byCategory} layout="vertical" margin={CHART_MARGIN_HORIZONTAL}>
               <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
               <XAxis type="number" allowDecimals={false} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
               <YAxis type="category" dataKey="name" width={100} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />

package/template/components/data-view-dashboard-charts-team.tsx

@@ -57,7 +57,7 @@ import {
   applyVisibleReorder,
   type ChartType,
   type DashboardLayout,
-} from "@/components/data-view-dashboard-charts"
+} from "@/lib/data-view-dashboard-placements-layout"
 import {
   CHART_KBD_ACTIVE_BAR,
   CHART_KBD_ACTIVE_PIE_SHAPE,
@@ -75,6 +75,9 @@ const ROLE_CHART_CFG: ChartConfig = {
   value: { label: "Members", color: "var(--primary)" },
 }
 
+const CHART_MARGIN = { top: 8, right: 8, left: 0, bottom: 0 } as const
+const CHART_MARGIN_HORIZONTAL = { top: 8, right: 8, left: 4, bottom: 0 } as const
+
 interface TeamDashboardCardDef {
   id: string
   title: string
@@ -255,7 +258,7 @@ function TeamByStatusChart({ members, chartType }: { members: TeamMember[]; char
         {(activeIndex) => (
           <>
             <ChartContainer config={STATUS_CHART_CFG} className="h-[220px] w-full">
-              <BarChart data={byStatus} layout="vertical" margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={byStatus} layout="vertical" margin={CHART_MARGIN}>
                 <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis type="number" allowDecimals={false} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
                 <YAxis type="category" dataKey="name" width={72} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
@@ -290,7 +293,7 @@ function TeamByStatusChart({ members, chartType }: { members: TeamMember[]; char
       {(activeIndex) => (
         <>
           <ChartContainer config={STATUS_CHART_CFG} className="h-[220px] w-full">
-            <BarChart data={byStatus} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+            <BarChart data={byStatus} margin={CHART_MARGIN}>
               <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
               <XAxis dataKey="name" tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
               <YAxis allowDecimals={false} width={36} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
@@ -382,7 +385,7 @@ function TeamByRoleChart({ members, chartType }: { members: TeamMember[]; chartT
         {(activeIndex) => (
           <>
             <ChartContainer config={ROLE_CHART_CFG} className="h-[220px] w-full">
-              <BarChart data={byRole} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={byRole} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
@@ -417,7 +420,7 @@ function TeamByRoleChart({ members, chartType }: { members: TeamMember[]; chartT
       {(activeIndex) => (
         <>
           <ChartContainer config={ROLE_CHART_CFG} className="h-[220px] w-full">
-            <BarChart data={byRole} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+            <BarChart data={byRole} layout="vertical" margin={CHART_MARGIN_HORIZONTAL}>
               <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
               <XAxis type="number" allowDecimals={false} tick={{ fontSize: 12 }} tickLine={false} axisLine={false} />
               <YAxis type="category" dataKey="name" width={120} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />