@exxatdesignux/ui 0.1.0 → 0.2.7

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

@@ -31,11 +31,41 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
 import { KeyMetrics } from "@/components/key-metrics"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
+import {
+  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,
+  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,
+  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
+} from "@/components/data-views/list-page-split-hub-tokens"
+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 { 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 { 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 {
+  filterQuestionBankItemsByNav,
+  type QuestionBankNavState,
+} from "@/lib/question-bank-nav"
 import {
   QUESTION_BANK_STATUS_BADGE_CLASS,
   QUESTION_BANK_STATUS_ICON,
@@ -62,6 +92,17 @@ 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)}`
+}
+
+/** 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 }))
 }
@@ -328,6 +369,114 @@ function QuestionsByStatusChart({ rows }: { rows: QuestionBankItem[] }) {
   )
 }
 
+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) {
@@ -403,13 +552,335 @@ function QuestionBankDashboardSimple({ rows }: { rows: QuestionBankItem[] }) {
   )
 }
 
+interface HubFolderColumnsPanelProps {
+  folders: QuestionBankFolder[]
+  rows: QuestionBankItem[]
+  panelRenderDetail: (row: QuestionBankItem) => React.ReactNode
+  onAddFolder: (parentId: string | null) => void
+  onAddQuestion: (parentId: string | null) => void
+  onCustomizeFolder?: (folder: QuestionBankFolder) => void
+}
+
+type HierarchyItem = QuestionBankFolder | QuestionBankItem
+
+function isFolder(item: HierarchyItem): item is QuestionBankFolder {
+  return 'parentId' in item
+}
+
+function isQuestion(item: HierarchyItem): item is QuestionBankItem {
+  return 'stem' in item
+}
+
+/** **Panel view** — multi-column folder explorer + optional detail column (Finder-style). */
+function HubFolderColumnsPanel({
+  folders,
+  rows,
+  panelRenderDetail,
+  onAddFolder,
+  onAddQuestion,
+  onCustomizeFolder,
+}: HubFolderColumnsPanelProps) {
+  // Track the selected path through the hierarchy
+  // Initialize with first folder selected by default
+  const [selectedPath, setSelectedPath] = React.useState<HierarchyItem[]>(() => {
+    const rootFolders = folders
+      .filter(f => f.parentId === null)
+      .sort((a, b) => a.name.localeCompare(b.name))
+    if (rootFolders.length > 0) {
+      return [rootFolders[0]]
+    }
+    return []
+  })
+
+  // Track if this is the first render for auto-selection
+  const isFirstRenderRef = React.useRef(true)
+
+  // Get root items (top-level folders)
+  const rootFolders = React.useMemo(() => {
+    return folders
+      .filter(f => f.parentId === null)
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [folders])
+
+  // Handle selection at any depth
+  const handleSelect = (item: HierarchyItem, depth: number) => {
+    setSelectedPath(prev => [...prev.slice(0, depth), item])
+  }
+
+  // Auto-select first item at each level (only on first render)
+  React.useEffect(() => {
+    // Only auto-select if we're at a folder in the path and this is the first render
+    if (isFirstRenderRef.current && selectedPath.length > 0) {
+      const lastItem = selectedPath[selectedPath.length - 1]
+      if (isFolder(lastItem)) {
+        const folder = lastItem as QuestionBankFolder
+        // Get the items in this folder
+        const subfolders = folders.filter(f => f.parentId === folder.id).sort((a, b) => a.name.localeCompare(b.name))
+        const questionsInFolder = rows.filter(r => r.folderId === folder.id)
+        const items: HierarchyItem[] = [...subfolders, ...questionsInFolder]
+
+        // If there are items and nothing is selected at the next level, select the first item
+        if (items.length > 0 && !selectedPath[selectedPath.length + 1]) {
+          setSelectedPath(prev => [...prev, items[0]])
+          isFirstRenderRef.current = false
+        }
+      }
+    }
+  }, [])
+
+  // Build columns dynamically based on selected path
+  const columns: Array<{ items: HierarchyItem[]; depth: number; parentId?: string | null }> = React.useMemo(() => {
+    const cols: Array<{ items: HierarchyItem[]; depth: number; parentId?: string | null }> = [
+      { items: rootFolders, depth: 0, parentId: null },
+    ]
+
+    // For each selected folder in the path, add a column with its children
+    for (let i = 0; i < selectedPath.length; i++) {
+      const item = selectedPath[i]
+      if (isFolder(item)) {
+        // Get subfolders
+        const subfolders = folders
+          .filter(f => f.parentId === item.id)
+          .sort((a, b) => a.name.localeCompare(b.name))
+
+        // Get questions in this folder
+        const questionsInFolder = rows.filter(r => r.folderId === item.id)
+
+        // Combine folders and questions
+        const items: HierarchyItem[] = [...subfolders, ...questionsInFolder]
+
+        if (items.length > 0) {
+          cols.push({ items, depth: i + 1, parentId: item.id })
+        }
+      }
+    }
+
+    return cols
+  }, [selectedPath, rootFolders, folders, rows])
+
+  const selectedLeaf = selectedPath.length > 0 ? selectedPath.at(-1)! : null
+  const selectedQuestion =
+    selectedLeaf && isQuestion(selectedLeaf) ? (selectedLeaf as QuestionBankItem) : null
+  const selectedFolderLeaf =
+    selectedLeaf && isFolder(selectedLeaf) ? (selectedLeaf as QuestionBankFolder) : null
+
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="flex h-full min-h-0 w-full flex-1 overflow-hidden"
+    >
+      {/* Render all columns with handles between them */}
+      {columns.map(({ items, depth, parentId }, columnIdx) => (
+        <React.Fragment key={`col-${depth}`}>
+          {columnIdx > 0 && (
+            <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
+          )}
+          <ResizablePanel
+            id={`col-${depth}`}
+            defaultSize={columnIdx === 0 ? 35 : columnIdx === 1 ? 35 : 30}
+            minSize={15}
+            className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}
+          >
+            <ListPageTreeColumnHeader
+              title={
+                depth === 0
+                  ? "Categories"
+                  : selectedPath[depth - 1] && isFolder(selectedPath[depth - 1])
+                    ? (selectedPath[depth - 1] as QuestionBankFolder).name
+                    : "Items"
+              }
+              trailing={
+                <>
+                  <span className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums">
+                    {items.length}
+                  </span>
+                  {depth < columns.length - 1 && items.length > 0 ? (
+                    <div className="flex shrink-0 items-center gap-0.5">
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            size="icon-sm"
+                            variant="ghost"
+                            onClick={() => onAddFolder(parentId ?? null)}
+                            aria-label="Add folder"
+                          >
+                            <i className="fa-light fa-folder-plus text-xs" aria-hidden="true" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" sideOffset={4}>
+                          Add folder
+                        </TooltipContent>
+                      </Tooltip>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            size="icon-sm"
+                            variant="ghost"
+                            onClick={() => onAddQuestion(parentId ?? null)}
+                            aria-label="Add question"
+                          >
+                            <i className="fa-light fa-plus text-xs" aria-hidden="true" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" sideOffset={4}>
+                          Add question
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
+                  ) : null}
+                </>
+              }
+            />
+
+            {/* Scrollable Items List */}
+            <div className="min-h-0 flex-1 overflow-y-auto py-1">
+              {items.map(item => {
+                const isSelected = selectedPath[depth]?.id === item.id
+                const isFolder_ = isFolder(item)
+                const folder = isFolder_ ? item : null
+                const question = isQuestion(item) ? item : null
+
+                // Get count for folders
+                const subfolderCount = isFolder_
+                  ? folders.filter(f => f.parentId === item.id).length
+                  : 0
+                const questionCount = isFolder_
+                  ? rows.filter(r => r.folderId === item.id).length
+                  : 0
+                const itemCount = subfolderCount + questionCount
+
+                return (
+                  <div
+                    key={item.id}
+                    className="group flex items-center hover:bg-muted/50"
+                  >
+                    <button
+                      onClick={() => handleSelect(item, depth)}
+                      className={cn(
+                        "flex flex-1 items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-75",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                        isSelected
+                          ? "bg-accent text-accent-foreground"
+                          : "text-foreground",
+                        // Apply folder background color if it's a folder and not selected, but NOT in the first column
+                        isFolder_ && !isSelected && folder?.colorKey && depth > 0
+                          ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
+                          : "",
+                      )}
+                      aria-selected={isSelected}
+                      role="option"
+                    >
+                      {/* Icon - show for folders and questions */}
+                      {isFolder_ ? (
+                        <i className={cn(
+                          "fa-folder text-sm shrink-0",
+                          isSelected ? "fa-solid" : "fa-light",
+                          // Apply folder color from customization (for both selected and unselected)
+                          folder?.colorKey && QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey]
+                        )} aria-hidden="true" />
+                      ) : (
+                        <i className={cn("fa-file text-sm shrink-0", isSelected ? "fa-solid" : "fa-light")} aria-hidden="true" />
+                      )}
+
+                      {/* Name */}
+                      <span className={cn(
+                        "min-w-0 flex-1 truncate leading-tight",
+                        isSelected && "font-medium"
+                      )}>
+                        {isFolder_ ? folder?.name : question?.stem}
+                      </span>
+
+                      {/* Count or metadata */}
+                      <span className={cn(
+                        "shrink-0 tabular-nums text-xs ml-auto",
+                        isSelected ? "text-accent-foreground/70" : "text-muted-foreground",
+                      )}>
+                        {isFolder_ ? itemCount : (question?.type === 'multiple_choice' ? 'MCQ' : question?.difficulty?.charAt(0).toUpperCase())}
+                      </span>
+                    </button>
+
+                    {/* Folder actions menu - only for folders */}
+                    {isFolder_ && folder && (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            type="button"
+                            size="icon-xs"
+                            variant="ghost"
+                            aria-label={`Actions for folder ${folder.name}`}
+                            className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                          >
+                            <i className="fa-light fa-ellipsis text-xs" aria-hidden="true" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-40">
+                          <DropdownMenuItem onSelect={() => onCustomizeFolder?.(folder)}>
+                            <i className="fa-light fa-wand-magic-sparkles text-xs" aria-hidden="true" />
+                            Customize
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </ResizablePanel>
+        </React.Fragment>
+      ))}
+
+      {/* Details panel — question (summary) or folder (aggregates) */}
+      {(selectedQuestion || selectedFolderLeaf) && (
+        <>
+          <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
+          <ResizablePanel id="col-detail" defaultSize={30} minSize={20} className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}>
+            {selectedQuestion ? (
+              <>
+                <ListPageTreeColumnHeader title="Details" className="px-4" />
+                <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+                  {panelRenderDetail(selectedQuestion)}
+                </div>
+              </>
+            ) : selectedFolderLeaf ? (
+              <div className="min-h-0 flex-1 overflow-hidden">
+                <FolderDetailsShell
+                  folder={selectedFolderLeaf}
+                  folders={folders}
+                  questions={rows}
+                />
+              </div>
+            ) : null}
+          </ResizablePanel>
+        </>
+      )}
+    </ResizablePanelGroup>
+  )
+}
+
 export type QuestionBankTableHandle = OpenTablePropertiesHandle
 
 export const QuestionBankTable = React.forwardRef<
   QuestionBankTableHandle,
-  { items: QuestionBankItem[]; view?: DataListViewType; onViewChange?: (v: DataListViewType) => void }
->(function QuestionBankTable({ items, view = "table", onViewChange }, ref) {
-  const columns = React.useMemo(() => buildQuestionBankColumns(items), [items])
+  {
+    items: QuestionBankItem[]
+    /** When set, table / board / tree rows are limited to this nav scope (secondary sidebar). */
+    navState?: QuestionBankNavState
+    view?: DataListViewType
+    onViewChange?: (v: DataListViewType) => void
+    folders: QuestionBankFolder[]
+    onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
+    onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
+  }
+>(function QuestionBankTable(
+  { items, navState, 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 columns = React.useMemo(() => buildQuestionBankColumns(tableSourceItems), [tableSourceItems])
   const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
   const fieldDefinitionsForDrawer = React.useMemo(
     () =>
@@ -429,6 +900,10 @@ export const QuestionBankTable = React.forwardRef<
     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()}` }])
@@ -440,7 +915,44 @@ export const QuestionBankTable = React.forwardRef<
     setConditionalRules(prev => prev.map(r => r.id === id ? { ...r, ...patch } : r))
   }, [])
 
-  const tableState = useTableState(items, columns, { key: "updatedAt", dir: "desc" })
+  const tableState = useTableState(tableSourceItems, columns, { key: "updatedAt", dir: "desc" })
+
+  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(),
+          stem: "New question",
+          topic: "General",
+          type: "short_answer",
+          difficulty: "medium",
+          status: "draft",
+          author: "Demo user",
+          updatedAt: `${y}-${m}-${d}`,
+          folderId,
+        },
+      ])
+    },
+    [folders, onItemsChange],
+  )
 
   const renderFilterOptionValue = React.useCallback(
     (fieldKey: string, value: string): React.ReactNode => {
@@ -476,8 +988,62 @@ export const QuestionBankTable = React.forwardRef<
     ? displayOptions.boardGroupByColumnKey
     : "status"
 
+  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>
+      </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 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>
+          <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: items.length,
+    totalRows: tableSourceItems.length,
     filterFields,
     fieldDefinitions: fieldDefinitionsForDrawer,
     resolveColumnLabel,
@@ -495,7 +1061,7 @@ export const QuestionBankTable = React.forwardRef<
   }
 
   const tableProps = {
-    data: items,
+    data: tableSourceItems,
     columns,
     getRowId: (row: QuestionBankItem) => row.id,
     getRowSelectionLabel: (row: QuestionBankItem) => row.stem,
@@ -528,14 +1094,6 @@ export const QuestionBankTable = React.forwardRef<
     },
   }
 
-  if (view === "table") {
-    return (
-      <div className="pb-6">
-        <DataTable<QuestionBankItem> {...tableProps} />
-      </div>
-    )
-  }
-
   const sharedToolbar = (
     <DataTableToolbar
       state={tableState}
@@ -547,6 +1105,14 @@ export const QuestionBankTable = React.forwardRef<
     />
   )
 
+  if (view === "table") {
+    return (
+      <div className="pb-6">
+        <DataTable<QuestionBankItem> {...tableProps} />
+      </div>
+    )
+  }
+
   if (view === "list") {
     return (
       <div className="flex min-h-0 flex-1 flex-col">
@@ -568,16 +1134,135 @@ export const QuestionBankTable = React.forwardRef<
     )
   }
 
+  if (view === "folder") {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col">
+        {sharedToolbar}
+        <QuestionBankOsFolderView
+          folders={folders}
+          onFoldersChange={onFoldersChange}
+          questions={tableState.rows as QuestionBankItem[]}
+          onQuestionsChange={onItemsChange}
+        />
+      </div>
+    )
+  }
+
+  if (view === "panel") {
+    return (
+      <>
+        <div className="flex min-h-0 flex-1 flex-col">
+          {sharedToolbar}
+          <ListPageSplitHubChrome aria-label="Question bank folder columns">
+            <HubFolderColumnsPanel
+              folders={folders}
+              rows={tableState.rows as QuestionBankItem[]}
+              panelRenderDetail={panelRenderDetail}
+              onAddFolder={openNewFolderForColumn}
+              onAddQuestion={addQuestionInColumn}
+              onCustomizeFolder={openCustomizeFolderSheet}
+            />
+          </ListPageSplitHubChrome>
+        </div>
+        <QuestionBankNewFolderSheet
+          open={newFolderOpen}
+          onOpenChange={setNewFolderOpen}
+          parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
+          customizingFolder={customizingFolder}
+          onCreated={(newFolder) => {
+            if (customizingFolder) {
+              // Update existing folder
+              onFoldersChange(prev =>
+                prev.map(f =>
+                  f.id === customizingFolder.id
+                    ? {
+                        ...f,
+                        name: newFolder.name,
+                        icon: newFolder.icon,
+                        colorKey: newFolder.colorKey,
+                      }
+                    : f,
+                ),
+              )
+              setCustomizingFolder(null)
+            } else {
+              // Create new folder
+              onFoldersChange(prev => [
+                ...prev,
+                {
+                  id: `fld-${Date.now()}`,
+                  name: newFolder.name,
+                  icon: newFolder.icon,
+                  colorKey: newFolder.colorKey,
+                  parentId: newFolder.parentId,
+                },
+              ])
+            }
+            setNewFolderOpen(false)
+          }}
+        />
+      </>
+    )
+  }
+
+  if (view === "tree-panel") {
+    return (
+      <>
+        <div className="flex min-h-0 flex-1 flex-col">
+          {sharedToolbar}
+          <div className="flex min-h-0 flex-1 flex-col">
+            <HubTreePanelView
+              items={tableState.rows as QuestionBankItem[]}
+              folders={folders}
+              onItemsChange={onItemsChange}
+              onFoldersChange={onFoldersChange}
+            />
+          </div>
+        </div>
+        <QuestionBankNewFolderSheet
+          open={newFolderOpen}
+          onOpenChange={setNewFolderOpen}
+          parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
+          customizingFolder={customizingFolder}
+          onCreated={(newFolder) => {
+            if (customizingFolder) {
+              // Update existing folder
+              onFoldersChange(prev =>
+                prev.map(f =>
+                  f.id === customizingFolder.id
+                    ? {
+                        ...f,
+                        name: newFolder.name,
+                        icon: newFolder.icon,
+                        colorKey: newFolder.colorKey,
+                      }
+                    : f,
+                ),
+              )
+              setCustomizingFolder(null)
+            } else {
+              // Create new folder
+              onFoldersChange(prev => [
+                ...prev,
+                {
+                  id: `fld-${Date.now()}`,
+                  name: newFolder.name,
+                  icon: newFolder.icon,
+                  colorKey: newFolder.colorKey,
+                  parentId: newFolder.parentId,
+                },
+              ])
+            }
+            setNewFolderOpen(false)
+          }}
+        />
+      </>
+    )
+  }
+
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <DataTableToolbar
-        state={tableState}
-        columns={columns}
-        searchable={displayOptions.showToolbarSearch}
-        searchAriaLabel="Search questions"
-        renderFilterOptionValue={renderFilterOptionValue}
-        toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
-      />
+      {sharedToolbar}
       <QuestionBankDashboardSimple rows={tableState.rows as QuestionBankItem[]} />
     </div>
   )