@exxatdesignux/ui 0.2.9 → 0.2.11

package/template/components/question-bank-client.tsx

@@ -6,27 +6,51 @@
  */
 
 import * as React from "react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import {
   ListPageTemplate,
   type ViewTab,
   dataListViewIcon,
   type DataListViewType,
 } from "@/components/data-views"
-import { QuestionBankPanelActivator } from "@/components/question-bank-panel-activator"
 import { QuestionBankPageHeader } from "@/components/question-bank-page-header"
+import { CollaborationAccessFlow } from "@/components/collaboration-access-flow"
 import { QuestionBankTable, type QuestionBankTableHandle } from "@/components/question-bank-table"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-import { useSecondaryPanel } from "@/components/secondary-panel"
+import { SecondaryPanelHubTemplate } from "@/components/templates/secondary-panel-hub-template"
+import { QuestionBankAccessBridge, QuestionBankFolderBridge } from "@/components/secondary-panel"
 import { KeyMetrics } from "@/components/key-metrics"
+import { useSecondaryPanelHubNav } from "@/hooks/use-secondary-panel-hub-nav"
 import { QUESTION_BANK_ITEMS } from "@/lib/mock/question-bank"
+import { QUESTION_BANK_HEADER_COLLABORATORS } from "@/lib/mock/question-bank-header-collaborators"
 import { DEFAULT_QUESTION_BANK_FOLDERS } from "@/lib/mock/question-bank-folders"
 import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
 import {
-  filterQuestionBankItemsByNav,
+  applyQuestionBankHubDisplayFilters,
+  isQuestionBankDefaultNav,
+  isQuestionBankDedicatedSearchPathname,
   parseQuestionBankNav,
+  QUESTION_BANK_HUB_BREADCRUMB,
+  QUESTION_BANK_HUB_FIND_PATH,
+  QUESTION_BANK_LIBRARY_PATH,
+  QUESTION_BANK_LIBRARY_HUB_PATHS,
+  QUESTION_BANK_LIST_PATH,
+  questionBankCanonicalNavHref,
   questionBankHubHeaderModel,
+  questionBankHubTextMatchesNothing,
+  type QuestionBankLandingFilterState,
 } from "@/lib/question-bank-nav"
+import {
+  patchQuestionBankDedicatedSearchParams,
+  QUESTION_BANK_DEDICATED_SEARCH_PLACEHOLDERS,
+} from "@/lib/question-bank-dedicated-search"
+import { recordQuestionBankRecentSearch, questionBankDedicatedSearchRecents } from "@/lib/question-bank-recent-searches"
+import { DedicatedSearchRecents } from "@/components/dedicated-search-recents"
+import { DedicatedSearchUrlComposer } from "@/components/dedicated-search-url-composer"
+import { DedicatedSearchLandingTemplate } from "@/components/templates/dedicated-search-landing-template"
+import {
+  DedicatedSearchResultsHeaderChrome,
+  DEDICATED_SEARCH_RESULTS_OUTER_CONTENT_CLASSNAME,
+} from "@/components/templates/dedicated-search-results-template"
 
 const DEFAULT_TABS: ViewTab[] = [
   {
@@ -52,78 +76,106 @@ const DEFAULT_TABS: ViewTab[] = [
   },
 ]
 
+const SEARCH_LANDING_TABS: ViewTab[] = [DEFAULT_TABS[0]]
+
+function ignoreQuestionBankTabsUpdate(_next: ViewTab[]) {}
+function ignoreQuestionBankTabActivation(_id: string) {}
+/** Stable no-op for search-landing branch where manage-access is not available. */
+function noopManageAccess() {}
+
 function questionBankQueryPrefixFromSearchString(qs: string) {
   return qs ? `?${qs}` : ""
 }
 
 export function QuestionBankClient() {
-  const pathname = usePathname()
   const router = useRouter()
   const searchParams = useSearchParams()
-  const { openPanel } = useSecondaryPanel()
+  const { navState, searchParamsKey, pathname, isHubPath, hubBasePath } = useSecondaryPanelHubNav({
+    hubPathname: QUESTION_BANK_LIBRARY_PATH,
+    hubPathnames: QUESTION_BANK_LIBRARY_HUB_PATHS,
+    panelId: "question-bank",
+    parseNav: parseQuestionBankNav,
+    canonicalHref: questionBankCanonicalNavHref,
+    shouldReopenPanel: isQuestionBankDefaultNav,
+  })
+  const isDedicatedSearch = isQuestionBankDedicatedSearchPathname(pathname)
+  const isHubFindSurface = pathname === QUESTION_BANK_HUB_FIND_PATH
+  const dedicatedSearchTitle = isHubFindSurface ? "Discovery search" : "Search Questions"
+  const landingFilters = React.useMemo((): QuestionBankLandingFilterState | null => {
+    if (!isDedicatedSearch) return null
+    const sp = new URLSearchParams(searchParamsKey)
+    return {
+      hubFreeText: sp.get("q") ?? "",
+      favOnly: sp.get("fav") === "1",
+      clinicalDeck: sp.get("deck") === "clinical",
+    }
+  }, [isDedicatedSearch, searchParamsKey])
+  const urlToolbarSearchSync = searchParams.get("q") ?? ""
+  const hasUrlSearch = Boolean((isDedicatedSearch ? landingFilters?.hubFreeText : urlToolbarSearchSync)?.trim())
   const [tabs, setTabs] = React.useState<ViewTab[]>(DEFAULT_TABS)
   const [activeTabId, setActiveTabId] = React.useState(DEFAULT_TABS[0].id)
 
+  // Stable Set of tab ids — defaults are constant so this only updates if tabs change.
   const tabIds = React.useMemo(() => new Set(tabs.map(t => t.id)), [tabs])
 
-  /** String key — `useSearchParams()` identity can stay stable when only the query changes. */
-  const searchParamsKey = searchParams.toString()
-  const navState = React.useMemo(
-    () => parseQuestionBankNav(new URLSearchParams(searchParamsKey)),
-    [searchParamsKey],
-  )
-
-  /** “All questions” hub — keep secondary nav open when scope clears (breadcrumb, All questions link). */
+  // Keep the latest pathname / searchParamsKey / tabIds available to the (stable) hashchange
+  // listener via refs, so we don't re-subscribe a window listener on every URL change.
+  const navRef = React.useRef({ pathname, searchParamsKey, tabIds, hubBasePath })
   React.useEffect(() => {
-    if (pathname !== "/question-bank") return
-    if (navState.scope !== "all") return
-    openPanel("question-bank")
-  }, [pathname, navState.scope, openPanel])
+    navRef.current = { pathname, searchParamsKey, tabIds, hubBasePath }
+  }, [pathname, searchParamsKey, tabIds, hubBasePath])
 
   React.useEffect(() => {
-    if (pathname !== "/question-bank") return
-    const prefix = questionBankQueryPrefixFromSearchString(searchParamsKey)
+    if (!isHubPath || isDedicatedSearch) return
     const apply = () => {
+      const current = navRef.current
+      if (!QUESTION_BANK_LIBRARY_HUB_PATHS.includes(current.pathname)) return
       const raw = typeof window !== "undefined" ? window.location.hash.slice(1) : ""
       let nextId = "questions"
       if (raw === "panel-view" || raw === "tree-panel") {
         nextId = raw
-      } else if (raw && tabIds.has(raw)) {
+      } else if (raw && current.tabIds.has(raw)) {
         nextId = raw
       }
       setActiveTabId(nextId)
       if (nextId === "questions" && raw && raw !== "questions") {
-        router.replace(`/question-bank${prefix}`, { scroll: false })
+        const prefix = questionBankQueryPrefixFromSearchString(current.searchParamsKey)
+        router.replace(`${current.hubBasePath}${prefix}`, { scroll: false })
       }
     }
     apply()
     window.addEventListener("hashchange", apply)
     return () => window.removeEventListener("hashchange", apply)
-  }, [pathname, router, tabIds, searchParamsKey])
+    // Re-run on pathname changes (mount/unmount); URL search-param changes are read from the ref.
+  }, [isHubPath, isDedicatedSearch, router])
 
   const onActiveTabChange = React.useCallback(
     (id: string) => {
+      if (isDedicatedSearch) return
       setActiveTabId(id)
-      if (pathname !== "/question-bank") return
+      if (!isHubPath) return
       const prefix = questionBankQueryPrefixFromSearchString(searchParamsKey)
       if (id === "questions") {
-        router.replace(`/question-bank${prefix}`, { scroll: false })
+        router.replace(`${hubBasePath}${prefix}`, { scroll: false })
       } else {
-        router.replace(`/question-bank${prefix}#${id}`, { scroll: false })
+        router.replace(`${hubBasePath}${prefix}#${id}`, { scroll: false })
       }
     },
-    [pathname, router, searchParamsKey],
+    [hubBasePath, isHubPath, isDedicatedSearch, router, searchParamsKey],
   )
 
   const [exportOpen, setExportOpen] = React.useState(false)
   const [showMetrics, setShowMetrics] = React.useState(true)
+  React.useLayoutEffect(() => {
+    if (hasUrlSearch) setShowMetrics(false)
+  }, [hasUrlSearch])
   const tableRef = React.useRef<QuestionBankTableHandle>(null)
   const [items, setItems] = React.useState(() => QUESTION_BANK_ITEMS.map(q => ({ ...q })))
   const [folders, setFolders] = React.useState(() => DEFAULT_QUESTION_BANK_FOLDERS.map(f => ({ ...f })))
 
   const filteredItems = React.useMemo(
-    () => filterQuestionBankItemsByNav(items, folders, navState),
-    [items, folders, navState],
+    () => applyQuestionBankHubDisplayFilters(items, folders, navState, landingFilters),
+    [items, folders, landingFilters, navState],
   )
 
   const count = filteredItems.length
@@ -136,60 +188,220 @@ export function QuestionBankClient() {
     [folders, navState],
   )
 
+  const hubTextHadNoMatches = React.useMemo(
+    () =>
+      isDedicatedSearch &&
+      landingFilters != null &&
+      questionBankHubTextMatchesNothing(items, folders, navState, landingFilters),
+    [folders, isDedicatedSearch, items, landingFilters, navState],
+  )
+
+  if (isDedicatedSearch) {
+    const dedicatedReplacePath = isHubFindSurface ? QUESTION_BANK_HUB_FIND_PATH : QUESTION_BANK_LIST_PATH
+    const showDedicatedSearchResults = hasUrlSearch
+
+    return (
+      <>
+        <QuestionBankFolderBridge
+          folders={folders}
+          onFoldersChange={setFolders}
+          items={items}
+          onItemsChange={setItems}
+        />
+        <QuestionBankAccessBridge openManageAccess={noopManageAccess} />
+        <SecondaryPanelHubTemplate
+          siteHeader={{
+            title: dedicatedSearchTitle,
+            breadcrumbs: [{ label: QUESTION_BANK_HUB_BREADCRUMB.label, href: QUESTION_BANK_HUB_BREADCRUMB.href }],
+          }}
+          contentClassName={
+            showDedicatedSearchResults ? DEDICATED_SEARCH_RESULTS_OUTER_CONTENT_CLASSNAME : undefined
+          }
+        >
+          {showDedicatedSearchResults ? (
+            <ListPageTemplate
+              defaultTabs={DEFAULT_TABS}
+              tabs={SEARCH_LANDING_TABS}
+              onTabsChange={ignoreQuestionBankTabsUpdate}
+              activeTabId={SEARCH_LANDING_TABS[0]!.id}
+              onActiveTabChange={ignoreQuestionBankTabActivation}
+              hideViewsToolbar
+              getTabCount={() => count}
+              tablePropertiesRef={tableRef}
+              header={(
+                <DedicatedSearchResultsHeaderChrome>
+                  <QuestionBankPageHeader
+                    variant="default"
+                    title={dedicatedSearchTitle}
+                    questionCount={count}
+                    hideNewQuestion
+                    onNewQuestion={() => {}}
+                    onExport={() => setExportOpen(true)}
+                  />
+                  <DedicatedSearchUrlComposer
+                    searchParamsKey={searchParamsKey}
+                    replacePath={dedicatedReplacePath}
+                    patchSearchParams={patchQuestionBankDedicatedSearchParams}
+                    onRecordSubmission={recordQuestionBankRecentSearch}
+                    layout="default"
+                    animatedPlaceholders={QUESTION_BANK_DEDICATED_SEARCH_PLACEHOLDERS}
+                    animatedPlaceholderIntervalMs={4800}
+                    animatedPlaceholderMaxLines={2}
+                    placeholder="Search the bank…"
+                    inputLabel="AI search"
+                    submitAppearance="search"
+                    submitButtonAriaLabel="Run AI search"
+                    srOnlyDescription={
+                      <>
+                        Type a plain-language request, then press Enter to filter the question list. This control
+                        does not open Ask Leo.
+                      </>
+                    }
+                  />
+                  {hubTextHadNoMatches ? (
+                    <p className="px-4 pb-3 text-sm text-muted-foreground lg:px-6">
+                      No questions matched that wording for this scope — showing the list without that text filter.
+                    </p>
+                  ) : null}
+                </DedicatedSearchResultsHeaderChrome>
+              )}
+              exportOpen={exportOpen}
+              onExportOpenChange={setExportOpen}
+              exportTotalRows={count}
+              renderContent={(tab, updateTab) => (
+                <QuestionBankTable
+                  key={tab.id}
+                  ref={tableRef}
+                  items={items}
+                  navState={navState}
+                  urlListSearch={undefined}
+                  landingFilters={landingFilters}
+                  searchLanding
+                  folders={folders}
+                  onFoldersChange={setFolders}
+                  onItemsChange={setItems}
+                  view={tab.viewType}
+                  onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+                />
+              )}
+            />
+          ) : (
+            <DedicatedSearchLandingTemplate
+              title={isHubFindSurface ? "Discovery search" : "Search your question bank"}
+              composer={(
+                <DedicatedSearchUrlComposer
+                  searchParamsKey={searchParamsKey}
+                  replacePath={dedicatedReplacePath}
+                  patchSearchParams={patchQuestionBankDedicatedSearchParams}
+                  onRecordSubmission={recordQuestionBankRecentSearch}
+                  layout="hero"
+                  animatedPlaceholders={QUESTION_BANK_DEDICATED_SEARCH_PLACEHOLDERS}
+                  animatedPlaceholderIntervalMs={4800}
+                  animatedPlaceholderMaxLines={2}
+                  placeholder="Search the bank…"
+                  inputLabel="AI search"
+                  submitAppearance="search"
+                  submitButtonAriaLabel="Run AI search"
+                  srOnlyDescription={
+                    <>
+                      Type a plain-language request, then press Enter to filter the question list. This control does
+                      not open Ask Leo.
+                    </>
+                  }
+                />
+              )}
+              trailing={(
+                <DedicatedSearchRecents
+                  recents={questionBankDedicatedSearchRecents}
+                  searchParamsKey={searchParamsKey}
+                  replacePath={dedicatedReplacePath}
+                  patchSearchParams={patchQuestionBankDedicatedSearchParams}
+                />
+              )}
+            />
+          )}
+        </SecondaryPanelHubTemplate>
+      </>
+    )
+  }
+
   return (
-    <PrimaryPageTemplate
-      beforeSiteHeader={<QuestionBankPanelActivator />}
-      siteHeader={{
-        title: hubHeader.title,
-        breadcrumbs: hubHeader.breadcrumbs,
-      }}
+    <CollaborationAccessFlow
+      initialCollaborators={QUESTION_BANK_HEADER_COLLABORATORS}
+      resourceLabel={hubHeader.title}
     >
-      <ListPageTemplate
-        defaultTabs={DEFAULT_TABS}
-        tabs={tabs}
-        onTabsChange={setTabs}
-        activeTabId={activeTabId}
-        onActiveTabChange={onActiveTabChange}
-        getTabCount={() => count}
-        tablePropertiesRef={tableRef}
-        header={(
-          <QuestionBankPageHeader
-            variant="collaboration"
-            title={hubHeader.title}
-            questionCount={count}
-            onNewQuestion={() => {}}
-            onExport={() => setExportOpen(true)}
+      {({ collaborators, openInvite }) => (
+        <SecondaryPanelHubTemplate
+          bridges={(
+            <>
+              <QuestionBankFolderBridge
+                folders={folders}
+                onFoldersChange={setFolders}
+                items={items}
+                onItemsChange={setItems}
+              />
+              <QuestionBankAccessBridge openManageAccess={openInvite} />
+            </>
+          )}
+          siteHeader={{
+            title: hubHeader.title,
+            breadcrumbs: hubHeader.breadcrumbs,
+          }}
+        >
+          <ListPageTemplate
+            defaultTabs={DEFAULT_TABS}
+            tabs={tabs}
+            onTabsChange={setTabs}
+            activeTabId={activeTabId}
+            onActiveTabChange={onActiveTabChange}
+            getTabCount={() => count}
+            tablePropertiesRef={tableRef}
+            header={(
+              <QuestionBankPageHeader
+                variant="collaboration"
+                title={hubHeader.title}
+                questionCount={count}
+                collaborators={collaborators}
+                onNewQuestion={() => {}}
+                onExport={() => setExportOpen(true)}
+                onAddCollaborator={openInvite}
+                onCollaboratorsOpen={openInvite}
+                showMetrics={showMetrics}
+                onToggleMetrics={() => setShowMetrics(v => !v)}
+              />
+            )}
+            metrics={(
+              <KeyMetrics
+                variant="flat"
+                metrics={metrics}
+                insight={insight}
+                showHeader={false}
+                metricsSingleRow
+              />
+            )}
             showMetrics={showMetrics}
-            onToggleMetrics={() => setShowMetrics(v => !v)}
-          />
-        )}
-        metrics={(
-          <KeyMetrics
-            variant="flat"
-            metrics={metrics}
-            insight={insight}
-            showHeader={false}
-            metricsSingleRow
-          />
-        )}
-        showMetrics={showMetrics}
-        exportOpen={exportOpen}
-        onExportOpenChange={setExportOpen}
-        exportTotalRows={count}
-        renderContent={(tab, updateTab) => (
-          <QuestionBankTable
-            key={tab.id}
-            ref={tableRef}
-            items={items}
-            navState={navState}
-            folders={folders}
-            onFoldersChange={setFolders}
-            onItemsChange={setItems}
-            view={tab.viewType}
-            onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+            exportOpen={exportOpen}
+            onExportOpenChange={setExportOpen}
+            exportTotalRows={count}
+            renderContent={(tab, updateTab) => (
+              <QuestionBankTable
+                key={tab.id}
+                ref={tableRef}
+                items={items}
+                navState={navState}
+                urlListSearch={urlToolbarSearchSync}
+                landingFilters={null}
+                searchLanding={false}
+                folders={folders}
+                onFoldersChange={setFolders}
+                onItemsChange={setItems}
+                view={tab.viewType}
+                onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+              />
+            )}
           />
-        )}
-      />
-    </PrimaryPageTemplate>
+        </SecondaryPanelHubTemplate>
+      )}
+    </CollaborationAccessFlow>
   )
 }

package/template/components/question-bank-dashboard-charts.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+/**
+ * Question bank **Data** view — KPI strip + Recharts cards. Loaded via `next/dynamic`
+ * from `question-bank-table` so table/list/board/folder routes do not eagerly bundle Recharts.
+ */
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, Cell, XAxis, YAxis } from "recharts"
+import { ChartCard, ChartDataTable, ChartFigure } from "@/components/charts-overview"
+import { KeyMetrics } from "@/components/key-metrics"
+import {
+  ChartContainer,
+  ChartTooltip,
+  chartTooltipKeyboardSyncProps,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart"
+import { CHART_KBD_ACTIVE_BAR } from "@/lib/chart-keyboard-selection"
+import type { QuestionBankItem, QuestionBankType } from "@/lib/mock/question-bank"
+import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
+
+const BAR_CFG: ChartConfig = {
+  count: { label: "Questions", color: "var(--color-chart-2)" },
+}
+
+const TYPE_LABEL: Record<QuestionBankType, string> = {
+  multiple_choice: "Multiple choice",
+  true_false: "True / false",
+  short_answer: "Short answer",
+}
+
+function aggregateByType(rows: QuestionBankItem[]) {
+  const c: Record<QuestionBankType, number> = {
+    multiple_choice: 0,
+    true_false: 0,
+    short_answer: 0,
+  }
+  for (const r of rows) c[r.type]++
+  return (Object.keys(c) as QuestionBankType[]).map(key => ({
+    name: TYPE_LABEL[key],
+    value: c[key],
+    key,
+  }))
+}
+
+function aggregateByTopic(rows: QuestionBankItem[]) {
+  const map = new Map<string, number>()
+  for (const r of rows) map.set(r.topic, (map.get(r.topic) ?? 0) + 1)
+  return [...map.entries()]
+    .map(([name, value]) => ({ name: name.length > 20 ? `${name.slice(0, 18)}…` : name, value }))
+    .sort((a, b) => b.value - a.value)
+    .slice(0, 8)
+}
+
+function QuestionsByTypeChart({ rows }: { rows: QuestionBankItem[] }) {
+  const data = React.useMemo(() => aggregateByType(rows), [rows])
+  if (rows.length === 0) {
+    return (
+      <div className="flex h-[200px] items-center justify-center text-sm text-muted-foreground" role="status">
+        No questions in this view.
+      </div>
+    )
+  }
+  const summary = `Item types: ${data.map(d => `${d.name} ${d.value}`).join(", ")}. Total ${rows.length}.`
+  return (
+    <ChartFigure label="Questions by item type" summary={summary} dataLength={data.length}>
+      {(activeIndex) => (
+        <>
+          <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
+            <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <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} />
+              <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+              <Bar
+                dataKey="value"
+                fill="var(--color-chart-2)"
+                radius={[4, 4, 0, 0]}
+                maxBarSize={40}
+                activeBar={CHART_KBD_ACTIVE_BAR}
+                activeIndex={activeIndex ?? undefined}
+              >
+                {data.map((_, i) => (
+                  <Cell key={i} fill="var(--color-chart-2)" />
+                ))}
+              </Bar>
+            </BarChart>
+          </ChartContainer>
+          <ChartDataTable
+            caption="Questions by item type"
+            headers={["Type", "Count"]}
+            rows={data.map(d => [d.name, d.value])}
+          />
+        </>
+      )}
+    </ChartFigure>
+  )
+}
+
+function QuestionsByTopicChart({ rows }: { rows: QuestionBankItem[] }) {
+  const data = React.useMemo(() => aggregateByTopic(rows), [rows])
+  if (rows.length === 0) {
+    return (
+      <div className="flex h-[200px] items-center justify-center text-sm text-muted-foreground" role="status">
+        No questions in this view.
+      </div>
+    )
+  }
+  const summary = `${data.length} topics shown. Total ${rows.length} questions.`
+  return (
+    <ChartFigure label="Questions by topic" summary={summary} dataLength={data.length}>
+      {(activeIndex) => (
+        <>
+          <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
+            <BarChart data={data} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+              <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} />
+              <ChartTooltip key={chartTooltipKeyboardSyncProps(activeIndex).key} {...chartTooltipKeyboardSyncProps(activeIndex).props} content={<ChartTooltipContent />} />
+              <Bar
+                dataKey="value"
+                fill="var(--color-chart-4)"
+                radius={[0, 4, 4, 0]}
+                maxBarSize={22}
+                activeBar={CHART_KBD_ACTIVE_BAR}
+                activeIndex={activeIndex ?? undefined}
+              >
+                {data.map((_, i) => (
+                  <Cell key={i} fill="var(--color-chart-4)" />
+                ))}
+              </Bar>
+            </BarChart>
+          </ChartContainer>
+          <ChartDataTable
+            caption="Questions by topic"
+            headers={["Topic", "Count"]}
+            rows={data.map(d => [d.name, d.value])}
+          />
+        </>
+      )}
+    </ChartFigure>
+  )
+}
+
+export function QuestionBankDashboardChartsSection({ rows }: { rows: QuestionBankItem[] }) {
+  const kpi = React.useMemo(
+    () => ({
+      metrics: questionBankKpiMetrics(rows),
+      insight: questionBankKpiInsight(rows),
+    }),
+    [rows],
+  )
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-4 pb-6">
+      <KeyMetrics
+        variant="flat"
+        metrics={kpi.metrics}
+        insight={kpi.insight}
+        showHeader={false}
+        metricsSingleRow
+      />
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <ChartCard variant="normal" title="By item type" description="Filtered question set">
+          <QuestionsByTypeChart rows={rows} />
+        </ChartCard>
+        <ChartCard variant="normal" title="By topic" description="Up to eight topics">
+          <QuestionsByTopicChart rows={rows} />
+        </ChartCard>
+      </div>
+    </div>
+  )
+}

package/template/components/question-bank-favorite-button.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import type { QuestionBankItem } from "@/lib/mock/question-bank"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import { cn } from "@/lib/utils"
+import { isQuestionBankItemFavorite } from "@/lib/question-bank-nav"
+
+/** Parent must use this class so non-favorited stars show on row/cell hover (`group-hover/favcell`). */
+export const QUESTION_BANK_FAVORITE_HOVER_GROUP = "group/favcell"
+
+export function QuestionBankFavoriteButton({
+  row,
+  onToggleFavorite,
+  stopPropagation = true,
+}: {
+  row: QuestionBankItem
+  onToggleFavorite: (row: QuestionBankItem) => void
+  stopPropagation?: boolean
+}) {
+  const fav = isQuestionBankItemFavorite(row)
+  const label = fav ? "Remove from favorites" : "Add to favorites"
+  return (
+    <Tip side="top" label={label}>
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        aria-pressed={fav}
+        aria-label={label}
+        className={cn(
+          "shrink-0 rounded-md transition-opacity duration-150",
+          fav
+            ? "text-amber-600 opacity-100 hover:bg-amber-500/15 hover:text-amber-700"
+            : "text-muted-foreground opacity-0 hover:bg-muted hover:text-amber-600 group-hover/favcell:opacity-100 focus-visible:opacity-100",
+        )}
+        onClick={e => {
+          if (stopPropagation) e.stopPropagation()
+          onToggleFavorite(row)
+        }}
+      >
+        <i className={cn("text-sm", fav ? "fa-solid fa-star" : "fa-light fa-star")} aria-hidden />
+      </Button>
+    </Tip>
+  )
+}