@exxatdesignux/ui 0.2.8 → 0.2.10

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