@exxatdesignux/ui 0.2.9 → 0.2.11

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

@@ -5,8 +5,7 @@
  */
 
 import * as React from "react"
-import { Bar, BarChart, CartesianGrid, Cell, XAxis, YAxis } from "recharts"
-import { ChartCard, ChartDataTable, ChartFigure } from "@/components/charts-overview"
+import dynamic from "next/dynamic"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
@@ -14,15 +13,7 @@ import type { ColumnDef } from "@/components/data-table/types"
 import { useTableState } from "@/components/data-table/use-table-state"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import { Button } from "@/components/ui/button"
-import {
-  ChartContainer,
-  ChartTooltip,
-  chartTooltipKeyboardSyncProps,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/components/ui/chart"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,7 +21,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
-import { KeyMetrics } from "@/components/key-metrics"
+import { Skeleton } from "@/components/ui/skeleton"
 import {
   ResizableHandle,
   ResizablePanel,
@@ -50,32 +41,66 @@ import {
 import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
 import { QuestionBankBoardView, QUESTION_BANK_BOARD_GROUP_OPTIONS } from "@/components/question-bank-board-view"
 import { QuestionBankListView } from "@/components/question-bank-list-view"
+import {
+  QuestionBankFavoriteButton,
+  QUESTION_BANK_FAVORITE_HOVER_GROUP,
+} from "@/components/question-bank-favorite-button"
 import { QuestionBankOsFolderView } from "@/components/question-bank-os-folder-view"
 import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
 import { FolderDetailsShell } from "@/components/folder-details-shell"
 import { HubTreePanelView } from "@/components/hub-tree-panel-view"
-import { OsFolderGlyph } from "@/components/data-views/os-folder-glyph"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { initialsFromDisplayName } from "@/lib/initials-from-name"
+import { AvatarInitials } from "@/components/ui/avatar"
 import { cn } from "@/lib/utils"
-import { CHART_KBD_ACTIVE_BAR } from "@/lib/chart-keyboard-selection"
-import type { QuestionBankDifficulty, QuestionBankItem, QuestionBankType } from "@/lib/mock/question-bank"
-import { newFolderId, type QuestionBankFolder, QUESTION_BANK_FOLDER_COLOR_STYLES, QUESTION_BANK_FOLDER_ICON_COLORS } from "@/lib/mock/question-bank-folders"
-import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
+import { formatDateUS } from "@/lib/date-filter"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
 import {
-  filterQuestionBankItemsByNav,
+  newQuestionBankQuestionId,
+  type QuestionBankDifficulty,
+  type QuestionBankItem,
+  type QuestionBankType,
+} from "@/lib/mock/question-bank"
+import { type QuestionBankFolder, QUESTION_BANK_FOLDER_COLOR_STYLES, QUESTION_BANK_FOLDER_ICON_COLORS } from "@/lib/mock/question-bank-folders"
+import {
+  toggleQuestionBankItemFavorite,
+  applyQuestionBankHubDisplayFilters,
+  type QuestionBankLandingFilterState,
   type QuestionBankNavState,
 } from "@/lib/question-bank-nav"
-import {
-  QUESTION_BANK_STATUS_BADGE_CLASS,
-  QUESTION_BANK_STATUS_ICON,
-  QUESTION_BANK_STATUS_LABEL,
-} from "@/lib/list-status-badges"
 import {
   DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
   type DataListDisplayOptions,
 } from "@/lib/data-list-display-options"
 
+const QuestionBankDashboardChartsSection = dynamic(
+  () =>
+    import("@/components/question-bank-dashboard-charts").then(mod => ({
+      default: mod.QuestionBankDashboardChartsSection,
+    })),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex min-h-0 flex-1 flex-col gap-4 pb-6">
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <Skeleton className="h-20 w-full rounded-lg" />
+          <Skeleton className="h-20 w-full rounded-lg" />
+          <Skeleton className="h-20 w-full rounded-lg" />
+          <Skeleton className="h-20 w-full rounded-lg" />
+        </div>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <div className="flex flex-col gap-3 rounded-xl border border-border p-4">
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="min-h-[220px] w-full rounded-lg" />
+          </div>
+          <div className="flex flex-col gap-3 rounded-xl border border-border p-4">
+            <Skeleton className="h-5 w-28" />
+            <Skeleton className="min-h-[220px] w-full rounded-lg" />
+          </div>
+        </div>
+      </div>
+    ),
+  },
+)
+
 const TYPE_LABEL: Record<QuestionBankType, string> = {
   multiple_choice: "Multiple choice",
   true_false: "True / false",
@@ -88,10 +113,6 @@ const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
   hard: "Hard",
 }
 
-const BAR_CFG: ChartConfig = {
-  count: { label: "Questions", color: "var(--color-chart-2)" },
-}
-
 function newQuestionBankItemId() {
   return `q-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
 }
@@ -107,12 +128,6 @@ function uniqueTopics(items: QuestionBankItem[]) {
   return [...new Set(items.map(i => i.topic))].sort().map(t => ({ value: t, label: t }))
 }
 
-const STATUS_FILTER_OPTS = [
-  { value: "published", label: QUESTION_BANK_STATUS_LABEL.published },
-  { value: "draft", label: QUESTION_BANK_STATUS_LABEL.draft },
-  { value: "in_review", label: QUESTION_BANK_STATUS_LABEL.in_review },
-]
-
 const TYPE_FILTER_OPTS = (Object.keys(TYPE_LABEL) as QuestionBankType[]).map(k => ({
   value: k,
   label: TYPE_LABEL[k],
@@ -145,8 +160,12 @@ function columnsToFilterFields(cols: ColumnDef<QuestionBankItem>[]) {
   return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
 }
 
-function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<QuestionBankItem>[] {
+function buildQuestionBankColumns(
+  items: QuestionBankItem[],
+  opts: { onToggleFavorite: (row: QuestionBankItem) => void },
+): ColumnDef<QuestionBankItem>[] {
   const topicOpts = uniqueTopics(items)
+  const { onToggleFavorite } = opts
 
   const COLUMN_SELECT: ColumnDef<QuestionBankItem> = {
     key: "select",
@@ -157,8 +176,8 @@ function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<Question
     lockPin: true,
   }
 
-  const cols: ColumnDef<QuestionBankItem>[] = [
-    COLUMN_SELECT,
+  const cols: ColumnDef<QuestionBankItem>[] = [COLUMN_SELECT]
+  cols.push(
     {
       key: "stem",
       label: "Question",
@@ -173,7 +192,13 @@ function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<Question
         operators: ["contains", "not_contains"],
       },
       cell: row => (
-        <span className="line-clamp-2 text-sm font-medium text-foreground">{row.stem}</span>
+        <div className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "flex min-w-0 items-start gap-2")}>
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5 pr-1">
+            <span className="line-clamp-2 text-sm font-medium text-foreground">{row.stem}</span>
+            <span className="font-mono text-xs text-muted-foreground">{row.questionId}</span>
+          </div>
+          <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
+        </div>
       ),
     },
     {
@@ -223,27 +248,6 @@ function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<Question
         <span className="text-sm text-foreground/90">{DIFFICULTY_LABEL[row.difficulty]}</span>
       ),
     },
-    {
-      key: "status",
-      label: "Status",
-      width: 120,
-      minWidth: 100,
-      sortable: true,
-      sortKey: "status",
-      filter: {
-        type: "select",
-        icon: "fa-circle-dot",
-        operators: ["is", "is_not"],
-        options: STATUS_FILTER_OPTS,
-      },
-      cell: row => (
-        <ListHubStatusBadge
-          label={QUESTION_BANK_STATUS_LABEL[row.status]}
-          tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[row.status]}
-          icon={QUESTION_BANK_STATUS_ICON[row.status]}
-        />
-      ),
-    },
     {
       key: "updatedAt",
       label: "Updated",
@@ -253,14 +257,14 @@ function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<Question
       sortKey: "updatedAt",
       filter: { type: "date", icon: "fa-calendar-days", operators: ["is", "is_not"] },
       cell: row => (
-        <span className="text-sm tabular-nums text-foreground/90 whitespace-nowrap">{row.updatedAt}</span>
+        <span className="text-sm tabular-nums text-foreground/90 whitespace-nowrap">{formatDateUS(row.updatedAt)}</span>
       ),
     },
     {
       key: "author",
       label: "Author",
-      width: 140,
-      minWidth: 120,
+      width: 260,
+      minWidth: 200,
       sortable: true,
       sortKey: "author",
       filter: {
@@ -268,7 +272,26 @@ function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<Question
         icon: "fa-user",
         operators: ["contains", "not_contains"],
       },
-      cell: row => <span className="text-sm text-foreground/90">{row.author}</span>,
+      cell: row => {
+        const initials = initialsFromDisplayName(row.author)
+        return (
+          <div className="flex min-w-0 items-center gap-2.5">
+            <AvatarInitials initials={initials} className="size-8 shrink-0 text-xs" />
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <span className="truncate text-sm font-medium text-foreground">{row.author}</span>
+              {row.authorEmail ? (
+                <a
+                  href={`mailto:${row.authorEmail}`}
+                  className="truncate text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
+                  onClick={e => e.stopPropagation()}
+                >
+                  {row.authorEmail}
+                </a>
+              ) : null}
+            </div>
+          </div>
+        )
+      },
     },
     {
       key: "actions",
@@ -285,7 +308,7 @@ function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<Question
                 <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" />
                 Preview
@@ -299,257 +322,9 @@ function buildQuestionBankColumns(items: QuestionBankItem[]): ColumnDef<Question
         </div>
       ),
     },
-  ]
-
-  return cols
-}
-
-
-function aggregateByStatus(rows: QuestionBankItem[]) {
-  const c = { published: 0, draft: 0, in_review: 0 }
-  for (const r of rows) c[r.status]++
-  return [
-    { name: QUESTION_BANK_STATUS_LABEL.published, value: c.published, key: "published" },
-    { name: QUESTION_BANK_STATUS_LABEL.draft, value: c.draft, key: "draft" },
-    { name: QUESTION_BANK_STATUS_LABEL.in_review, value: c.in_review, key: "in_review" },
-  ]
-}
-
-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 QuestionsByStatusChart({ rows }: { rows: QuestionBankItem[] }) {
-  const data = React.useMemo(() => aggregateByStatus(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 = `Status breakdown: ${data.map(d => `${d.name} ${d.value}`).join(", ")}. Total ${rows.length}.`
-  return (
-    <ChartFigure label="Questions by status" 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 status"
-            headers={["Status", "Count"]}
-            rows={data.map(d => [d.name, d.value])}
-          />
-        </>
-      )}
-    </ChartFigure>
-  )
-}
-
-function QuestionBankFinderListRow({
-  row,
-  isSelected,
-  compact,
-}: {
-  row: QuestionBankItem
-  isSelected: boolean
-  compact?: boolean
-}) {
-  const initials = initialsFromDisplayName(row.author)
-  return (
-    <div
-      className={cn(
-        "flex w-full items-center px-3 py-2",
-        compact ? "gap-2 py-1.5 pl-2 pr-2.5" : "gap-3",
-      )}
-    >
-      <Avatar className={cn("shrink-0", compact ? "size-6" : "size-8")}>
-        <AvatarFallback
-          className={cn(
-            "font-semibold",
-            compact ? "text-[10px]" : "text-[11px]",
-            isSelected ? "bg-background/25 text-accent-foreground" : "bg-brand/15 text-brand",
-          )}
-        >
-          {initials}
-        </AvatarFallback>
-      </Avatar>
-      <div className="min-w-0 flex-1">
-        <p className={cn("line-clamp-2 font-medium leading-tight", compact ? "text-[11px]" : "text-xs")}>
-          {row.stem}
-        </p>
-        <p
-          className={cn(
-            "mt-0.5 truncate text-[11px] leading-tight",
-            isSelected ? "text-accent-foreground/85" : "text-muted-foreground",
-          )}
-        >
-          {row.topic} · {row.author}
-        </p>
-      </div>
-      {!isSelected && (
-        <ListHubStatusBadge
-          surface="board"
-          label={QUESTION_BANK_STATUS_LABEL[row.status]}
-          tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[row.status]}
-          icon={QUESTION_BANK_STATUS_ICON[row.status]}
-        />
-      )}
-    </div>
-  )
-}
-
-function QuestionBankFinderDetail({ row }: { row: QuestionBankItem }) {
-  return (
-    <div className="flex h-full min-h-0 flex-col">
-      <div className="flex shrink-0 flex-col gap-2 border-b border-border px-5 py-4">
-        <h2 className="line-clamp-4 text-base font-semibold leading-tight text-foreground">{row.stem}</h2>
-        <ListHubStatusBadge
-          surface="board"
-          label={QUESTION_BANK_STATUS_LABEL[row.status]}
-          tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[row.status]}
-          icon={QUESTION_BANK_STATUS_ICON[row.status]}
-        />
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-        <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div className="flex flex-col gap-0.5">
-            <dt className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-              <i className="fa-light fa-layer-group text-xs" aria-hidden="true" />
-              Topic
-            </dt>
-            <dd className="text-xs text-foreground">{row.topic}</dd>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            <dt className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-              <i className="fa-light fa-list-check text-xs" aria-hidden="true" />
-              Type
-            </dt>
-            <dd className="text-xs text-foreground">{TYPE_LABEL[row.type]}</dd>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            <dt className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-              <i className="fa-light fa-signal text-xs" aria-hidden="true" />
-              Difficulty
-            </dt>
-            <dd className="text-xs text-foreground">{DIFFICULTY_LABEL[row.difficulty]}</dd>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            <dt className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-              <i className="fa-light fa-user text-xs" aria-hidden="true" />
-              Author
-            </dt>
-            <dd className="text-xs text-foreground">{row.author}</dd>
-          </div>
-          <div className="flex flex-col gap-0.5 sm:col-span-2">
-            <dt className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-              <i className="fa-light fa-calendar-days text-xs" aria-hidden="true" />
-              Updated
-            </dt>
-            <dd className="text-xs tabular-nums text-foreground">{row.updatedAt}</dd>
-          </div>
-        </dl>
-      </div>
-    </div>
-  )
-}
-
-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>
-  )
-}
-
-function QuestionBankDashboardSimple({ 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 status" description="Filtered question set">
-          <QuestionsByStatusChart rows={rows} />
-        </ChartCard>
-        <ChartCard variant="normal" title="By topic" description="Up to eight topics">
-          <QuestionsByTopicChart rows={rows} />
-        </ChartCard>
-      </div>
-    </div>
-  )
+  return cols
 }
 
 interface HubFolderColumnsPanelProps {
@@ -813,7 +588,7 @@ function HubFolderColumnsPanel({
                             <i className="fa-light fa-ellipsis text-xs" aria-hidden="true" />
                           </Button>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" className="w-40">
+                        <DropdownMenuContent align="end">
                           <DropdownMenuItem onSelect={() => onCustomizeFolder?.(folder)}>
                             <i className="fa-light fa-wand-magic-sparkles text-xs" aria-hidden="true" />
                             Customize
@@ -865,6 +640,12 @@ export const QuestionBankTable = React.forwardRef<
     items: QuestionBankItem[]
     /** When set, table / board / tree rows are limited to this nav scope (secondary sidebar). */
     navState?: QuestionBankNavState
+    /** URL toolbar search binding (`?q=`) — omit on search landing so hub `q` does not pre-fill the grid search. */
+    urlListSearch?: string
+    /** When true, dedicated search shell: hub landing row filters; table toolbar search stays independent of URL `q`. */
+    searchLanding?: boolean
+    /** Applied with nav filters before `useTableState` when {@link searchLanding} is true. */
+    landingFilters?: QuestionBankLandingFilterState | null
     view?: DataListViewType
     onViewChange?: (v: DataListViewType) => void
     folders: QuestionBankFolder[]
@@ -872,20 +653,31 @@ export const QuestionBankTable = React.forwardRef<
     onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
   }
 >(function QuestionBankTable(
-  { items, navState, view = "table", onViewChange, folders, onFoldersChange, onItemsChange },
+  { items, navState, urlListSearch, searchLanding, landingFilters, view = "table", onViewChange, folders, onFoldersChange, onItemsChange },
   ref,
 ) {
   const tableSourceItems = React.useMemo(() => {
     const nav = navState ?? { scope: "all" as const, folderId: null }
-    return filterQuestionBankItemsByNav(items, folders, nav)
-  }, [items, folders, navState])
+    const landing = searchLanding ? (landingFilters ?? null) : null
+    return applyQuestionBankHubDisplayFilters(items, folders, nav, landing)
+  }, [items, folders, navState, searchLanding, landingFilters])
 
-  const columns = React.useMemo(() => buildQuestionBankColumns(tableSourceItems), [tableSourceItems])
+  const toggleFavorite = React.useCallback(
+    (row: QuestionBankItem) => {
+      onItemsChange(prev => prev.map(r => (r.id === row.id ? toggleQuestionBankItemFavorite(r) : r)))
+    },
+    [onItemsChange],
+  )
+
+  const columns = React.useMemo(
+    () => buildQuestionBankColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
+    [tableSourceItems, toggleFavorite],
+  )
   const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
   const fieldDefinitionsForDrawer = React.useMemo(
     () =>
       columns
-        .filter(c => c.key !== "select" && c.key !== "actions")
+        .filter(c => c.key !== "select" && c.key !== "favorite" && c.key !== "actions")
         .map(c => ({ key: c.key, label: c.label, sortable: !!(c.sortable && (c.sortKey ?? c.key)) })),
     [columns],
   )
@@ -915,7 +707,13 @@ export const QuestionBankTable = React.forwardRef<
     setConditionalRules(prev => prev.map(r => r.id === id ? { ...r, ...patch } : r))
   }, [])
 
-  const tableState = useTableState(tableSourceItems, columns, { key: "updatedAt", dir: "desc" })
+  const tableState = useTableState(
+    tableSourceItems,
+    columns,
+    { key: "updatedAt", dir: "desc" },
+    undefined,
+    searchLanding ? undefined : urlListSearch,
+  )
 
   const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
     setNewFolderParentId(parentId)
@@ -940,12 +738,13 @@ export const QuestionBankTable = React.forwardRef<
         ...prev,
         {
           id: newQuestionBankItemId(),
+          questionId: newQuestionBankQuestionId(),
           stem: "New question",
           topic: "General",
           type: "short_answer",
           difficulty: "medium",
-          status: "draft",
           author: "Demo user",
+          authorEmail: "demo.user@demo.exxat.io",
           updatedAt: `${y}-${m}-${d}`,
           folderId,
         },
@@ -956,19 +755,6 @@ export const QuestionBankTable = React.forwardRef<
 
   const renderFilterOptionValue = React.useCallback(
     (fieldKey: string, value: string): React.ReactNode => {
-      if (fieldKey === "status") {
-        if (value in QUESTION_BANK_STATUS_LABEL) {
-          const status = value as keyof typeof QUESTION_BANK_STATUS_LABEL
-          return (
-            <ListHubStatusBadge
-              label={QUESTION_BANK_STATUS_LABEL[status]}
-              tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[status]}
-              icon={QUESTION_BANK_STATUS_ICON[status]}
-            />
-          )
-        }
-        return <span className="text-foreground">{value}</span>
-      }
       const col = columns.find(c => c.key === fieldKey)
       const opt = col?.filter?.options?.find(o => o.value === value)
       return <span className="text-foreground">{opt?.label ?? value}</span>
@@ -986,13 +772,14 @@ export const QuestionBankTable = React.forwardRef<
     o => o.key === displayOptions.boardGroupByColumnKey,
   )
     ? displayOptions.boardGroupByColumnKey
-    : "status"
+    : "topic"
 
   const panelRenderDetail = (row: QuestionBankItem) => (
     <div className="flex min-w-0 flex-col gap-4">
       <div>
         <h3 className="text-sm font-semibold text-foreground mb-2">Question</h3>
         <p className="text-sm text-foreground">{row.stem}</p>
+        <p className="mt-1 font-mono text-xs text-muted-foreground">{row.questionId}</p>
       </div>
       <div className="flex gap-3 flex-wrap">
         <div className="flex flex-col gap-1">
@@ -1003,12 +790,6 @@ export const QuestionBankTable = React.forwardRef<
           <span className="text-xs font-medium text-muted-foreground">Difficulty</span>
           <span className="text-sm text-foreground">{DIFFICULTY_LABEL[row.difficulty]}</span>
         </div>
-        <div className="flex flex-col gap-1">
-          <span className="text-xs font-medium text-muted-foreground">Status</span>
-          <span className="text-sm text-foreground">
-            {QUESTION_BANK_STATUS_LABEL[row.status]}
-          </span>
-        </div>
       </div>
       {row.topic && (
         <div>
@@ -1117,7 +898,7 @@ export const QuestionBankTable = React.forwardRef<
     return (
       <div className="flex min-h-0 flex-1 flex-col">
         {sharedToolbar}
-        <QuestionBankListView rows={tableState.rows as QuestionBankItem[]} />
+        <QuestionBankListView rows={tableState.rows as QuestionBankItem[]} onToggleFavorite={toggleFavorite} />
       </div>
     )
   }
@@ -1129,6 +910,7 @@ export const QuestionBankTable = React.forwardRef<
         <QuestionBankBoardView
           rows={tableState.rows as QuestionBankItem[]}
           groupByColumnKey={questionBankBoardGroupKey}
+          onToggleFavorite={toggleFavorite}
         />
       </div>
     )
@@ -1263,7 +1045,7 @@ export const QuestionBankTable = React.forwardRef<
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       {sharedToolbar}
-      <QuestionBankDashboardSimple rows={tableState.rows as QuestionBankItem[]} />
+      <QuestionBankDashboardChartsSection rows={tableState.rows as QuestionBankItem[]} />
     </div>
   )
 })