typescript

frontend/src/documents/panel/DocumentsPanel.tsx

@@ -15,7 +15,11 @@ const EntryType = {
   document: 'document',
 };
 
-const DocumentsPanel = ({
+interface DocumentsPanelProps {
+  [key: string]: any;
+}
+
+const DocumentsPanel: React.FC<DocumentsPanelProps> = ({
   currentFolderName,
   breadcrumbs,
   onRefresh,

frontend/src/documents/panel/DocumentsToolbar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { JSX } from 'react';
 import {
   ViewListIcon,
   ViewGridIcon,
@@ -12,18 +12,34 @@ import {
 } from '../../ui/icons';
 import SortFieldQuickMenu from './SortFieldQuickMenu';
 
+type ViewMode = 'list' | 'grid' | 'desk' | (string & {});
+type SortDirection = 'asc' | 'desc' | (string & {});
+
+interface DocumentsTableHeaderActionOptions {
+  viewMode?: ViewMode;
+  onViewModeChange?: (mode: ViewMode) => void;
+  onRefresh: () => void;
+  sortField?: string;
+  onSortFieldChange?: (field: string) => void;
+  sortDirection?: SortDirection;
+  onSortDirectionToggle?: () => void;
+  isFilterActive?: boolean;
+  includeDescendants?: boolean;
+  onToggleIncludeDescendants?: () => void;
+}
+
 export const createDocumentsTableHeaderActions = ({
-  viewMode,
+  viewMode = 'list',
   onViewModeChange,
   onRefresh,
   sortField = 'title',
-  onSortFieldChange = null,
+  onSortFieldChange,
   sortDirection = 'asc',
-  onSortDirectionToggle = null,
+  onSortDirectionToggle,
   isFilterActive = false,
   includeDescendants = true,
-  onToggleIncludeDescendants = null,
-}) => {
+  onToggleIncludeDescendants,
+}: DocumentsTableHeaderActionOptions): JSX.Element => {
   const isListView = viewMode === 'list';
   const isGridView = viewMode === 'grid';
   const isDeskView = viewMode === 'desk';

frontend/src/documents/panel/SortFieldQuickMenu.tsx

@@ -14,7 +14,12 @@ const SORT_LABEL_LOOKUP = SORT_OPTIONS.reduce((acc, option) => {
   return next;
 }, {});
 
-const SortFieldQuickMenu = ({ sortField, onChange }) => {
+interface SortFieldQuickMenuProps {
+  sortField: string;
+  onChange?: (value: string) => void;
+}
+
+const SortFieldQuickMenu: React.FC<SortFieldQuickMenuProps> = ({ sortField, onChange }) => {
   const currentOption = useMemo(
     () => SORT_OPTIONS.find((option) => option.value === sortField) || SORT_OPTIONS[0],
     [sortField],
@@ -26,8 +31,8 @@ const SortFieldQuickMenu = ({ sortField, onChange }) => {
   );
 
   const handleSelect = useCallback(
-    (value, option) => {
-      if (typeof onChange !== 'function') {
+    (value: string, option?: { id?: string; original?: { id?: string } }) => {
+      if (!onChange) {
         return;
       }
       const nextValue = option?.id || option?.original?.id || value;

frontend/src/documents/panel/createDocumentsSurface.tsx

@@ -1,10 +1,26 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import DocumentViewerPanel from '../../preview/DocumentViewerPanel';
 import SelectionFloatingActions from '../SelectionFloatingActions';
 import createWorkspaceSurfaceConfig from '../workspaceHeader';
 import DocumentsPanel from './DocumentsPanel';
 import { createDocumentsTableHeaderActions } from './DocumentsToolbar';
 
+interface Breadcrumb {
+  id?: string | number;
+  name?: string;
+  label?: string;
+  title?: string;
+}
+
+interface CreateDocumentsSurfaceArgs {
+  tableProps: Record<string, any>;
+  parentBreadcrumb?: Breadcrumb | null;
+  onNavigateParent?: () => void;
+  renderSidebarToggle?: () => ReactNode;
+  detailProps?: Record<string, any> | null;
+  detailOpen?: boolean;
+}
+
 const createDocumentsSurface = ({
   tableProps,
   parentBreadcrumb,
@@ -12,7 +28,7 @@ const createDocumentsSurface = ({
   renderSidebarToggle,
   detailProps,
   detailOpen = false,
-}) => {
+}: CreateDocumentsSurfaceArgs) => {
   const {
     currentFolderName,
     breadcrumbs,