@exxatdesignux/ui 0.2.19 → 0.4.0

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

@@ -1,729 +0,0 @@
-"use client"
-
-/**
- * Question bank — DataTable + TablePropertiesDrawer + connected views via `ListPageConnectedViewBody`.
- */
-
-import * as React from "react"
-import dynamic from "next/dynamic"
-import { mailtoHref } from "@/lib/mailto"
-import { DataTable, DataTableToolbar } from "@/components/data-table"
-import type { DataListViewType } from "@/lib/data-list-view"
-import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
-import { QUESTION_BANK_SUPPORTED_VIEWS } from "@/lib/question-bank-supported-views"
-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 { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
-import { Skeleton } from "@/components/ui/skeleton"
-import { ListPageConnectedViewBody } from "@/components/data-views/list-page-connected-view-body"
-import { ListPageCalendarView } from "@/components/data-views/list-page-calendar-view"
-import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
-import { defineHubViewRenderers } from "@/lib/hub-connected-view-renderers"
-import { QuestionBankFolderColumnsPanel } from "@/components/question-bank-folder-columns-panel"
-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 { AvatarInitials } from "@/components/ui/avatar"
-import { cn } from "@/lib/utils"
-import { formatDateUS } from "@/lib/date-filter"
-import { initialsFromDisplayName } from "@/lib/initials-from-name"
-import {
-  newQuestionBankQuestionId,
-  type QuestionBankDifficulty,
-  type QuestionBankItem,
-  type QuestionBankType,
-} from "@/lib/mock/question-bank"
-import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
-import {
-  toggleQuestionBankItemFavorite,
-  applyQuestionBankHubDisplayFilters,
-  type QuestionBankLandingFilterState,
-  type QuestionBankNavState,
-} from "@/lib/question-bank-nav"
-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",
-  short_answer: "Short answer",
-}
-
-const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
-  easy: "Easy",
-  medium: "Medium",
-  hard: "Hard",
-}
-
-function newQuestionBankItemId() {
-  return `q-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
-}
-
-/** Folder id to use when adding a question from the root column (`parentId` null). */
-function defaultFolderIdForColumnParent(parentId: string | null, folders: QuestionBankFolder[]): string | null {
-  if (parentId !== null) return parentId
-  const roots = [...folders].filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name))
-  return roots[0]?.id ?? null
-}
-
-function uniqueTopics(items: QuestionBankItem[]) {
-  return [...new Set(items.map(i => i.topic))].sort().map(t => ({ value: t, label: t }))
-}
-
-const TYPE_FILTER_OPTS = (Object.keys(TYPE_LABEL) as QuestionBankType[]).map(k => ({
-  value: k,
-  label: TYPE_LABEL[k],
-}))
-
-const DIFFICULTY_FILTER_OPTS = (Object.keys(DIFFICULTY_LABEL) as QuestionBankDifficulty[]).map(k => ({
-  value: k,
-  label: DIFFICULTY_LABEL[k],
-}))
-
-function columnToFilterFieldDef(c: ColumnDef<QuestionBankItem>): FilterFieldDef | null {
-  if (!c.filter) return null
-  const f = c.filter
-  const defaultOps: FilterOperator[] =
-    f.type === "select" || f.type === "date"
-      ? ["is", "is_not"]
-      : ["contains", "not_contains"]
-  return {
-    key: c.key,
-    label: c.label,
-    icon: f.icon ?? "fa-filter",
-    type: f.type,
-    operators: (f.operators ?? defaultOps) as FilterOperator[],
-    options: f.options,
-    ...(f.textMask ? { textMask: f.textMask } : {}),
-  }
-}
-
-function columnsToFilterFields(cols: ColumnDef<QuestionBankItem>[]) {
-  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
-}
-
-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",
-    label: "",
-    width: 40,
-    minWidth: 40,
-    defaultPin: "left",
-    lockPin: true,
-  }
-
-  const cols: ColumnDef<QuestionBankItem>[] = [COLUMN_SELECT]
-  cols.push(
-    {
-      key: "stem",
-      label: "Question",
-      width: 300,
-      minWidth: 160,
-      sortable: true,
-      sortKey: "stem",
-      defaultPin: "left",
-      filter: {
-        type: "text",
-        icon: "fa-file-lines",
-        operators: ["contains", "not_contains"],
-      },
-      cell: row => (
-        <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>
-      ),
-    },
-    {
-      key: "topic",
-      label: "Topic",
-      width: 160,
-      minWidth: 120,
-      sortable: true,
-      sortKey: "topic",
-      filter: {
-        type: "select",
-        icon: "fa-layer-group",
-        operators: ["is", "is_not"],
-        options: topicOpts,
-      },
-      cell: row => <span className="text-sm text-foreground/90">{row.topic}</span>,
-    },
-    {
-      key: "type",
-      label: "Type",
-      width: 140,
-      minWidth: 120,
-      sortable: true,
-      sortKey: "type",
-      filter: {
-        type: "select",
-        icon: "fa-list-check",
-        operators: ["is", "is_not"],
-        options: TYPE_FILTER_OPTS,
-      },
-      cell: row => <span className="text-sm text-foreground/90">{TYPE_LABEL[row.type]}</span>,
-    },
-    {
-      key: "difficulty",
-      label: "Difficulty",
-      width: 110,
-      minWidth: 96,
-      sortable: true,
-      sortKey: "difficulty",
-      filter: {
-        type: "select",
-        icon: "fa-signal",
-        operators: ["is", "is_not"],
-        options: DIFFICULTY_FILTER_OPTS,
-      },
-      cell: row => (
-        <span className="text-sm text-foreground/90">{DIFFICULTY_LABEL[row.difficulty]}</span>
-      ),
-    },
-    {
-      key: "updatedAt",
-      label: "Updated",
-      width: 120,
-      minWidth: 100,
-      sortable: true,
-      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">{formatDateUS(row.updatedAt)}</span>
-      ),
-    },
-    {
-      key: "author",
-      label: "Author",
-      width: 260,
-      minWidth: 200,
-      sortable: true,
-      sortKey: "author",
-      filter: {
-        type: "text",
-        icon: "fa-user",
-        operators: ["contains", "not_contains"],
-      },
-      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={mailtoHref(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",
-      label: "",
-      width: 48,
-      minWidth: 48,
-      defaultPin: "right",
-      lockPin: true,
-      cell: row => (
-        <div className="flex items-center justify-center">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="icon-sm" variant="ghost" aria-label={`Actions for question ${row.id}`}>
-                <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem disabled>
-                <i className="fa-light fa-eye" aria-hidden="true" />
-                Preview
-              </DropdownMenuItem>
-              <DropdownMenuItem disabled>
-                <i className="fa-light fa-pen" aria-hidden="true" />
-                Edit
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      ),
-    },
-  )
-
-  return cols
-}
-
-export type QuestionBankTableHandle = OpenTablePropertiesHandle
-
-export const QuestionBankTable = React.forwardRef<
-  QuestionBankTableHandle,
-  {
-    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
-    /** Aligns Properties view tiles with `ListPageTemplate` `supportedViewTypes`. */
-    supportedViewTypes?: readonly DataListViewType[]
-    folders: QuestionBankFolder[]
-    onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
-    onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
-  }
->(function QuestionBankTable(
-  {
-    items,
-    navState,
-    urlListSearch,
-    searchLanding,
-    landingFilters,
-    view = "table",
-    onViewChange,
-    supportedViewTypes = QUESTION_BANK_SUPPORTED_VIEWS,
-    folders,
-    onFoldersChange,
-    onItemsChange,
-  },
-  ref,
-) {
-  const tableSourceItems = React.useMemo(() => {
-    const nav = navState ?? { scope: "all" as const, folderId: null }
-    const landing = searchLanding ? (landingFilters ?? null) : null
-    return applyQuestionBankHubDisplayFilters(items, folders, nav, landing)
-  }, [items, folders, navState, searchLanding, landingFilters])
-
-  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 !== "favorite" && c.key !== "actions")
-        .map(c => ({ key: c.key, label: c.label, sortable: !!(c.sortable && (c.sortKey ?? c.key)) })),
-    [columns],
-  )
-
-  const resolveColumnLabel = React.useCallback(
-    (key: string) => columns.find(c => c.key === key)?.label ?? key,
-    [columns],
-  )
-
-  const [displayOptions, setDisplayOptions] = React.useState<DataListDisplayOptions>(DEFAULT_DATA_LIST_DISPLAY_OPTIONS)
-  const patchDisplay = React.useCallback((patch: Partial<DataListDisplayOptions>) => {
-    setDisplayOptions(prev => ({ ...prev, ...patch }))
-  }, [])
-
-  const [newFolderOpen, setNewFolderOpen] = React.useState(false)
-  const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
-  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
-
-  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
-  const addConditionalRule = React.useCallback((rule: Omit<ConditionalRule, "id">) => {
-    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
-  }, [])
-  const removeConditionalRule = React.useCallback((id: string) => {
-    setConditionalRules(prev => prev.filter(r => r.id !== id))
-  }, [])
-  const updateConditionalRule = React.useCallback((id: string, patch: Partial<ConditionalRule>) => {
-    setConditionalRules(prev => prev.map(r => r.id === id ? { ...r, ...patch } : r))
-  }, [])
-
-  const tableState = useTableState(
-    tableSourceItems,
-    columns,
-    { key: "updatedAt", dir: "desc" },
-    undefined,
-    searchLanding ? undefined : urlListSearch,
-  )
-
-  const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
-    setNewFolderParentId(parentId)
-    setCustomizingFolder(null)
-    setNewFolderOpen(true)
-  }, [])
-
-  const openCustomizeFolderSheet = React.useCallback((folder: QuestionBankFolder) => {
-    setCustomizingFolder(folder)
-    setNewFolderOpen(true)
-  }, [])
-
-  const addQuestionInColumn = React.useCallback(
-    (parentId: string | null) => {
-      const folderId = defaultFolderIdForColumnParent(parentId, folders)
-      if (!folderId) return
-      const today = new Date()
-      const y = today.getFullYear()
-      const m = String(today.getMonth() + 1).padStart(2, "0")
-      const d = String(today.getDate()).padStart(2, "0")
-      onItemsChange(prev => [
-        ...prev,
-        {
-          id: newQuestionBankItemId(),
-          questionId: newQuestionBankQuestionId(),
-          stem: "New question",
-          topic: "General",
-          type: "short_answer",
-          difficulty: "medium",
-          author: "Demo user",
-          authorEmail: "demo.user@demo.exxat.io",
-          updatedAt: `${y}-${m}-${d}`,
-          folderId,
-        },
-      ])
-    },
-    [folders, onItemsChange],
-  )
-
-  const renderFilterOptionValue = React.useCallback(
-    (fieldKey: string, value: string): React.ReactNode => {
-      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>
-    },
-    [columns],
-  )
-
-  React.useImperativeHandle(ref, () => ({
-    openPropertiesDrawer: () => {
-      tableState.setSheetOpen(true)
-    },
-  }), [tableState])
-
-  const questionBankBoardGroupKey = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(
-    o => o.key === displayOptions.boardGroupByColumnKey,
-  )
-    ? displayOptions.boardGroupByColumnKey
-    : "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">
-          <span className="text-xs font-medium text-muted-foreground">Type</span>
-          <span className="text-sm text-foreground">{TYPE_LABEL[row.type]}</span>
-        </div>
-        <div className="flex flex-col gap-1">
-          <span className="text-xs font-medium text-muted-foreground">Difficulty</span>
-          <span className="text-sm text-foreground">{DIFFICULTY_LABEL[row.difficulty]}</span>
-        </div>
-      </div>
-      {row.topic && (
-        <div>
-          <span className="text-xs font-medium text-muted-foreground">Topic</span>
-          <p className="text-sm text-foreground mt-1">{row.topic}</p>
-        </div>
-      )}
-      {row.type === "multiple_choice" && row.options && row.options.length > 0 && (
-        <div>
-          <span className="text-xs font-medium text-muted-foreground block mb-2">Options</span>
-          <div className="flex flex-col gap-2">
-            {row.options.map((option, idx) => (
-              <div key={idx} className="flex items-start gap-2 p-2 rounded bg-muted/30">
-                <span className="text-xs font-medium text-muted-foreground mt-0.5 shrink-0">
-                  {String.fromCharCode(65 + idx)}.
-                </span>
-                <span className={cn(
-                  "text-sm",
-                  option.isCorrect ? "text-foreground font-medium" : "text-foreground/80"
-                )}>
-                  {option.text}
-                </span>
-                {option.isCorrect && (
-                  <i className="fa-light fa-check text-emerald-600 text-sm ml-auto shrink-0" aria-hidden="true" />
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-
-  const drawerToolbarProps = {
-    totalRows: tableSourceItems.length,
-    filterFields,
-    fieldDefinitions: fieldDefinitionsForDrawer,
-    resolveColumnLabel,
-    displayOptions,
-    onDisplayOptionsChange: patchDisplay,
-    conditionalRules,
-    onAddConditionalRule: addConditionalRule,
-    onRemoveConditionalRule: removeConditionalRule,
-    onUpdateConditionalRule: updateConditionalRule,
-    currentView: view,
-    onViewChange,
-    supportedViewTypes,
-    lifecycleTabLabel: "Question bank",
-    boardGroupByColumnOptions: [...QUESTION_BANK_BOARD_GROUP_OPTIONS],
-    renderFilterOptionValue,
-  }
-
-  const tableProps = {
-    data: tableSourceItems,
-    columns,
-    getRowId: (row: QuestionBankItem) => row.id,
-    getRowSelectionLabel: (row: QuestionBankItem) => row.stem,
-    selectable: true,
-    searchable: displayOptions.showToolbarSearch,
-    showColumnHeaders: displayOptions.showColumnLabels,
-    groupable: true,
-    defaultSort: { key: "updatedAt", dir: "desc" as const },
-    emptyState: <p className="text-sm text-muted-foreground">No questions in the bank.</p>,
-    conditionalRules,
-    state: tableState,
-    renderFilterOptionValue,
-    toolbarSlot: (s: ReturnType<typeof useTableState<QuestionBankItem>>) => (
-      <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />
-    ),
-    bulkActionsSlot: (selected: Set<string | number>) => {
-      const n = selected.size
-      if (n === 0) return null
-      return (
-        <>
-          <span className="sr-only">{n} selected</span>
-          <Tip label="Export selection (demo)">
-            <Button size="sm" variant="outline" type="button">
-              <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-              Export
-            </Button>
-          </Tip>
-        </>
-      )
-    },
-  }
-
-  const sharedToolbar = (
-    <DataTableToolbar
-      state={tableState}
-      columns={columns}
-      searchable={displayOptions.showToolbarSearch}
-      searchAriaLabel="Search questions"
-      renderFilterOptionValue={renderFilterOptionValue}
-      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
-    />
-  )
-
-  const toolbarShell = (body: React.ReactNode) => (
-    <div className="flex min-h-0 flex-1 flex-col">
-      {sharedToolbar}
-      {body}
-    </div>
-  )
-
-  const handleFolderSheetCreated = React.useCallback(
-    (newFolder: {
-      name: string
-      icon: string
-      colorKey: QuestionBankFolder["colorKey"]
-      parentId: string | null
-    }) => {
-      if (customizingFolder) {
-        onFoldersChange(prev =>
-          prev.map(f =>
-            f.id === customizingFolder.id
-              ? { ...f, name: newFolder.name, icon: newFolder.icon, colorKey: newFolder.colorKey }
-              : f,
-          ),
-        )
-        setCustomizingFolder(null)
-      } else {
-        onFoldersChange(prev => [
-          ...prev,
-          {
-            id: `fld-${Date.now()}`,
-            name: newFolder.name,
-            icon: newFolder.icon,
-            colorKey: newFolder.colorKey,
-            parentId: newFolder.parentId,
-          },
-        ])
-      }
-      setNewFolderOpen(false)
-    },
-    [customizingFolder, onFoldersChange],
-  )
-
-  const folderSheet = (
-    <QuestionBankNewFolderSheet
-      open={newFolderOpen}
-      onOpenChange={setNewFolderOpen}
-      parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
-      customizingFolder={customizingFolder}
-      onCreated={handleFolderSheetCreated}
-    />
-  )
-
-  const rows = tableState.rows as QuestionBankItem[]
-
-  return (
-    <ListPageConnectedViewBody
-      view={view}
-      hubLabel="Question bank"
-      renderers={defineHubViewRenderers(QUESTION_BANK_SUPPORTED_VIEWS, {
-        "data-table": (
-          <div className="pb-6">
-            <DataTable<QuestionBankItem> {...tableProps} />
-          </div>
-        ),
-        "list-with-toolbar": toolbarShell(
-          <QuestionBankListView
-            rows={rows}
-            onToggleFavorite={toggleFavorite}
-            onRowActivate={row => tableState.toggleRow(row.id)}
-          />,
-        ),
-        "board-with-toolbar": toolbarShell(
-          <QuestionBankBoardView
-            rows={rows}
-            groupByColumnKey={questionBankBoardGroupKey}
-            onToggleFavorite={toggleFavorite}
-            onRowActivate={row => tableState.toggleRow(row.id)}
-          />,
-        ),
-        "folder-with-toolbar": toolbarShell(
-          <QuestionBankOsFolderView
-            folders={folders}
-            onFoldersChange={onFoldersChange}
-            questions={rows}
-            onQuestionsChange={onItemsChange}
-          />,
-        ),
-        "panel-with-toolbar": (
-          <>
-            {toolbarShell(
-              <ListPageSplitHubChrome aria-label="Question bank folder columns">
-                <QuestionBankFolderColumnsPanel
-                  folders={folders}
-                  rows={rows}
-                  panelRenderDetail={panelRenderDetail}
-                  onAddFolder={openNewFolderForColumn}
-                  onAddQuestion={addQuestionInColumn}
-                  onCustomizeFolder={openCustomizeFolderSheet}
-                />
-              </ListPageSplitHubChrome>,
-            )}
-            {folderSheet}
-          </>
-        ),
-        "tree-panel-with-toolbar": (
-          <>
-            {toolbarShell(
-              <div className="flex min-h-0 flex-1 flex-col">
-                <HubTreePanelView
-                  items={rows}
-                  folders={folders}
-                  onItemsChange={onItemsChange}
-                  onFoldersChange={onFoldersChange}
-                />
-              </div>,
-            )}
-            {folderSheet}
-          </>
-        ),
-        "calendar-with-toolbar": toolbarShell(
-          <ListPageCalendarView
-            rows={rows}
-            getRowId={row => row.id}
-            getEventDate={row => row.updatedAt}
-            getEventLabel={row => row.stem}
-            getEventMeta={row => row.topic}
-            emptyMonthLabel="No questions on this day."
-            ariaLabel="Question bank calendar"
-            showSummaryPanel={displayOptions.showCalendarSummaryPanel}
-            calendarMainView={displayOptions.calendarMainView}
-            onCalendarMainViewChange={v => patchDisplay({ calendarMainView: v })}
-            onEventActivate={row => tableState.toggleRow(row.id)}
-          />,
-        ),
-        "dashboard-with-toolbar": toolbarShell(
-          <QuestionBankDashboardChartsSection rows={rows} />,
-        ),
-      })}
-    />
-  )
-})
-
-QuestionBankTable.displayName = "QuestionBankTable"