@ramesesinc/platform-core 0.1.6 → 0.1.8

package/dist/components/table/DataList.tsx

@@ -1,820 +0,0 @@
-import { Columns, Eye, RefreshCcw, Search, Trash } from "lucide-react";
-import React, { useCallback, useRef, useState } from "react";
-import { useApp } from "../../core/AppContext";
-import { useDataContext } from "../../core/DataContext";
-import { DynamicComponent } from "../../core/DynamicComponent";
-import { usePageContext } from "../../core/PageContext";
-import Panel from "../../core/Panel";
-import useDependHandler from "../../core/UIDependHandler";
-import { replaceValues } from "../../lib/utils/BeanUtils";
-import { getUrlPageParams } from "../../lib/utils/PageUtils";
-import { ColumnDefinition, DataTable } from "./DataTable";
-import ListHandler, { ListActionHandler, ListHandlerConfig } from "./ListHandler";
-import { DataConfig, TableProvider, useTableContext } from "./TableContext";
-// import "./DataList.css";
-
-// ============================================================================
-// TYPE DEFINITIONS
-// ============================================================================
-
-export interface FilterDefinition {
-  name: string;
-  component: string;
-  attr?: Record<string, any>;
-}
-
-export interface ActionDefinition {
-  label?: string;
-  icon?: string | React.ReactNode;
-  component: string;
-  attr: Record<string, any>;
-  variant?: "default" | "primary" | "danger";
-  show?: (row: any) => boolean;
-}
-
-export interface BulkActionDefinition {
-  label: string;
-  icon?: string;
-  onClick: (selectedRows: any[]) => void;
-  variant?: "default" | "primary" | "danger";
-}
-
-export interface ToolbarActionDefinition {
-  label: string;
-  icon?: string;
-  component: string;
-  attr: Record<string, any>;
-  variant?: "default" | "primary";
-}
-
-// ============================================================================
-// ATTR — the only prop DataList accepts
-// ============================================================================
-
-export interface DataListAttr {
-  // Required
-  cols: ColumnDefinition[];
-  data: DataConfig;
-
-  // Pagination / fetch config
-  rowsPerPage?: number;
-  disableTotalCount?: boolean;
-
-  // Display
-  title?: string;
-  emptyMessage?: string;
-  errorMessage?: string;
-  striped?: boolean;
-  bordered?: boolean;
-  hover?: boolean;
-  dense?: boolean;
-
-  showPagination?: boolean;
-  paginationPosition?: "top" | "bottom" | "both";
-  showPageInfo?: boolean;
-  showTotalCount?: boolean;
-  showRowsPerPage?: boolean;
-  rowsPerPageOptions?: number[];
-
-  // Search
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  searchDebounce?: number;
-  onSearchChange?: (text: string) => void;
-
-  // Filters
-  filters?: FilterDefinition[] | FilterDefinition[][];
-  showFilterPanel?: boolean;
-  onFilterChange?: (filters: Record<string, any>) => void;
-
-  // Sorting
-  sortable?: boolean;
-  defaultSort?: { column: string; direction: "asc" | "desc" };
-  showSortIndicator?: boolean;
-
-  // Selection
-  selectable?: boolean;
-  selectionMode?: "single" | "multiple";
-  onSelectionChange?: (selectedRows: any[]) => void;
-  selectOnRowClick?: boolean;
-
-  // Row / action callbacks
-  onRowClick?: (row: any, rowIndex: number) => void;
-  onRowDoubleClick?: (row: any, rowIndex: number) => void;
-  rowActions?: ActionDefinition[];
-  bulkActions?: BulkActionDefinition[];
-  showBulkActions?: boolean;
-  toolbarActions?: ToolbarActionDefinition[];
-  commonActions?: Record<string, any>;
-
-  // Toolbar
-  showToolbar?: boolean;
-  toolbarTitle?: string;
-  showRefreshButton?: boolean;
-  showExportButton?: boolean;
-
-  // Lifecycle callbacks
-  onLoad?: () => void;
-  onError?: (error: any) => void;
-  onRefresh?: () => void;
-  onExport?: () => void;
-
-  // Styling
-  className?: string;
-  rowClassName?: (row: any, rowIndex: number) => string;
-
-  depends?: string;
-  handle?: InnerDataListHandle;
-}
-
-// ============================================================================
-// PUBLIC DATALIST PROPS — only attr, nothing else
-// ============================================================================
-
-export interface DataListProps {
-  attr: DataListAttr;
-}
-
-// ============================================================================
-// INNER DATALIST — lives inside TableProvider, consumes context
-// ============================================================================
-
-type InnerProps = Omit<DataListAttr, "data" | "rowsPerPage" | "disableTotalCount">;
-
-const InnerDataList: React.FC<InnerProps> = ({
-  cols,
-  emptyMessage = "No data available",
-  errorMessage,
-  striped = false,
-  bordered = false,
-  hover = true,
-  dense = false,
-
-  showPagination = true,
-  paginationPosition = "bottom",
-  showPageInfo = true,
-  showTotalCount = true,
-  showRowsPerPage = true,
-  rowsPerPageOptions = [5, 10, 20, 50, 100],
-
-  searchable = false,
-  searchPlaceholder = "Search...",
-  searchDebounce = 300,
-  onSearchChange,
-
-  filters = [],
-  showFilterPanel = false,
-  onFilterChange,
-
-  sortable = true,
-  showSortIndicator = true,
-
-  selectable = false,
-  selectionMode = "multiple",
-  onSelectionChange,
-  selectOnRowClick = false,
-
-  onRowClick,
-  rowActions = [],
-  bulkActions = [],
-  showBulkActions = true,
-  toolbarActions = [],
-
-  showToolbar = true,
-  toolbarTitle,
-  showRefreshButton = true,
-  showExportButton = false,
-
-  onLoad,
-  onError,
-  onRefresh,
-  onExport,
-
-  className = "",
-  rowClassName,
-  depends,
-
-  handle,
-}) => {
-  const { listHandler, columns, rows, setRows, loading: ctxLoading, setLoading } = useTableContext();
-
-  // ============================================================================
-  // STATE
-  // ============================================================================
-
-  const [internalLoading, setInternalLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedRows, setSelectedRows] = useState<string[]>([]);
-  const [searchText, setSearchText] = useState("");
-  const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);
-  const [activeFilters, setActiveFilters] = useState<Record<string, any>>({});
-  const [showColumnToggle, setShowColumnToggle] = useState(false);
-  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
-
-  const isLoading = ctxLoading || internalLoading;
-
-  const pageContext = usePageContext();
-
-  const handleRef = {
-    setFilter: async (filter: Record<string, any>): Promise<void> => {
-      if (filter == null || listHandler == null) return;
-
-      await listHandler.setFilter(filter);
-      await loadData();
-    },
-  };
-
-  if (handle != null) {
-    handle.init(handleRef);
-  }
-
-  const refreshHandler = async () => {
-    // console.log("refresh via notify depends", pageContext?.uuid);
-    await handleRefresh();
-  };
-
-  useDependHandler({
-    name: depends ?? "datalist",
-    onRefresh: refreshHandler,
-  });
-
-  // ============================================================================
-  // LOAD DATA
-  // ============================================================================
-
-  const loadData = useCallback(async () => {
-    if (!listHandler) return;
-    setInternalLoading(true);
-    setLoading(true);
-    setError(null);
-    try {
-      await listHandler.load();
-      setRows([...listHandler.getData()]);
-      onLoad?.();
-    } catch (err: any) {
-      setError(err?.message || "Failed to load data");
-      onError?.(err);
-    } finally {
-      setInternalLoading(false);
-      setLoading(false);
-    }
-  }, [listHandler, onLoad, onError, setRows, setLoading]);
-
-  // NOTE: TableProvider already fires the initial load — no double-fetch here.
-
-  // ============================================================================
-  // SEARCH
-  // ============================================================================
-
-  const handleSearch = (text: string) => {
-    setSearchText(text);
-    if (searchTimeout) clearTimeout(searchTimeout);
-    const timeout = setTimeout(async () => {
-      if (!listHandler) return;
-      await listHandler.doSearch(text);
-      await loadData();
-      onSearchChange?.(text);
-    }, searchDebounce);
-    setSearchTimeout(timeout);
-  };
-
-  // ============================================================================
-  // FILTER
-  // ============================================================================
-
-  const handleFilterChange = async (field: string, value: any) => {
-    if (!listHandler) return;
-    const newFilters = { ...activeFilters, [field]: value };
-    setActiveFilters(newFilters);
-    await listHandler.setFilter(newFilters);
-    await loadData();
-    onFilterChange?.(newFilters);
-  };
-
-  const handleResetFilters = async () => {
-    if (!listHandler) return;
-    setActiveFilters({});
-    await listHandler.resetFilter();
-    await loadData();
-    onFilterChange?.({});
-  };
-
-  // ============================================================================
-  // SORT
-  // ============================================================================
-
-  const handleSort = async (columnId: string) => {
-    if (!sortable || !listHandler) return;
-    const currentSort = listHandler.getCurrentSortedColumn();
-    const currentDirection = listHandler.getCurrentSortDirection();
-    if (currentSort === columnId && currentDirection === "asc") {
-      await listHandler.sortDesc(columnId);
-    } else {
-      await listHandler.sortAsc(columnId);
-    }
-    await loadData();
-  };
-
-  // ============================================================================
-  // PAGINATION
-  // ============================================================================
-
-  const handlePageChange = async (page: number) => {
-    if (!listHandler) return;
-    await listHandler.moveToPage(page);
-    await loadData();
-  };
-  const handleNextPage = async () => {
-    if (!listHandler) return;
-    await listHandler.moveNextPage();
-    await loadData();
-  };
-  const handlePrevPage = async () => {
-    if (!listHandler) return;
-    await listHandler.movePrevPage();
-    await loadData();
-  };
-  const handleFirstPage = async () => {
-    if (!listHandler) return;
-    await listHandler.moveFirstPage();
-    await loadData();
-  };
-  const handleLastPage = async () => {
-    if (!listHandler) return;
-    await listHandler.moveLastPage();
-    await loadData();
-  };
-  const handleRowsPerPage = async (n: number) => {
-    if (!listHandler) return;
-    await listHandler.setRowsPerPage(n);
-    await loadData();
-  };
-
-  // ============================================================================
-  // SELECTION
-  // ============================================================================
-
-  const handleSelectionChange = (keys: string[]) => {
-    setSelectedRows(keys);
-    if (onSelectionChange) {
-      const selectedData = rows.filter((row) => keys.includes(row.id || JSON.stringify(row)));
-      onSelectionChange(selectedData);
-    }
-  };
-
-  // ============================================================================
-  // ROW CLICK
-  // ============================================================================
-
-  const handleRowClick = (row: any, rowIndex: number) => {
-    if (selectOnRowClick && selectable) {
-      const key = row.id || JSON.stringify(row);
-      if (selectionMode === "single") {
-        handleSelectionChange([key]);
-      } else {
-        const newSelection = selectedRows.includes(key) ? selectedRows.filter((k) => k !== key) : [...selectedRows, key];
-        handleSelectionChange(newSelection);
-      }
-    }
-    onRowClick?.(row, rowIndex);
-  };
-
-  // ============================================================================
-  // REFRESH
-  // ============================================================================
-
-  const handleRefresh = async () => {
-    await loadData();
-    onRefresh?.();
-  };
-
-  // ============================================================================
-  // COLUMN VISIBILITY
-  // ============================================================================
-
-  const visibleUserColumns = columns.filter((col) => {
-    const colId = col.id || String(col.title);
-    return !hiddenColumns.includes(colId);
-  });
-
-  // ============================================================================
-  // DISPLAY COLUMNS — actions + sort indicators
-  // ============================================================================
-
-  const renderActionCell = (row: any, rowIndex: number) => {
-    const visible = rowActions.filter((a) => !a.show || a.show(row));
-    if (visible.length === 0) return null;
-    const uuid = Math.random().toString(36).slice(2);
-    return (
-      <div className="dl-actions flex justify-center items-center">
-        {visible.map((action, i) => (
-          <div key={`${uuid}-${i}`}>
-            <DynamicComponent
-              config={{
-                component: action.component,
-                attr: { ...action.attr, opt: { data: row } },
-              }}
-            />
-          </div>
-        ))}
-      </div>
-    );
-  };
-
-  const displayColumns: ColumnDefinition[] =
-    rowActions.length > 0 && visibleUserColumns.length > 0
-      ? [
-          ...visibleUserColumns,
-          {
-            id: "_actions",
-            title: <div className="text-center w-full">Actions</div>,
-            align: "center",
-            render: (_, row, rowIndex) => renderActionCell(row, rowIndex),
-          },
-        ]
-      : visibleUserColumns;
-
-  const sortableColumns = displayColumns.map((col) => {
-    if (!sortable || !showSortIndicator || !listHandler) return col;
-    const currentSort = listHandler.getCurrentSortedColumn();
-    const currentDirection = listHandler.getCurrentSortDirection();
-    return {
-      ...col,
-      title: (
-        <div
-          className="dl-sortable-header"
-          onClick={() => col.id && col.id !== "_actions" && handleSort(col.id)}
-          style={{ cursor: col.id !== "_actions" ? "pointer" : "default" }}
-        >
-          {col.title}
-          {currentSort === col.id && <span className={`dl-sort-icon dl-sort-${currentDirection}`}>{currentDirection === "asc" ? "▲" : "▼"}</span>}
-        </div>
-      ),
-    };
-  });
-
-  // ============================================================================
-  // RENDER TOOLBAR
-  // ============================================================================
-
-  const renderToolbar = () => {
-    if (!showToolbar) return null;
-    const uuid = Math.random().toString(36).slice(2);
-    return (
-      <div className="dl-toolbar">
-        <div className="dl-toolbar-left">
-          {toolbarTitle && <h3 className="dl-toolbar-title">{toolbarTitle}</h3>}
-          <div className="dl-toolbar-right">
-            {showBulkActions &&
-              selectedRows.length > 0 &&
-              bulkActions.map((action, i) => (
-                <button
-                  key={action.label || i}
-                  className={`dl-btn dl-btn-${action.variant || "default"}`}
-                  onClick={() => {
-                    const selectedData = rows.filter((row) => selectedRows.includes(row.id || JSON.stringify(row)));
-                    action.onClick(selectedData);
-                  }}
-                >
-                  {action.icon && <span>{action.icon}</span>}
-                  {action.label}
-                </button>
-              ))}
-            {toolbarActions.map((action, i) => (
-              <div key={`${uuid}-${i}`}>
-                <DynamicComponent config={{ component: action.component, attr: action.attr || {} }} />
-              </div>
-            ))}
-            {showExportButton && (
-              <button className="dl-btn" onClick={onExport}>
-                <span>📥</span> Export
-              </button>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center">
-          <RefreshButton show={showRefreshButton} onClick={handleRefresh} />
-
-          <ColumnToggle columns={columns} hiddenColumns={hiddenColumns} setHiddenColumns={setHiddenColumns} />
-
-          <SearchBox searchable={searchable} searchPlaceholder={searchPlaceholder} searchText={searchText} onSearch={handleSearch} />
-        </div>
-      </div>
-    );
-  };
-
-  // ============================================================================
-  // RENDER FILTER PANEL
-  // ============================================================================
-
-  const renderFilterPanel = () => {
-    if (!filters) return null;
-    return <Panel content={filters} />;
-  };
-
-  // ============================================================================
-  // RENDER PAGINATION
-  // ============================================================================
-
-  const renderPagination = () => {
-    if (!showPagination || !listHandler) return null;
-    const currentPage = listHandler.getCurrentPage();
-    const totalPages = listHandler.getTotalPageCount();
-    const totalRecords = listHandler.getTotalRecordCount();
-    const rowsPerPage = listHandler.getRowsPerPage();
-    const hasNext = listHandler.hasNextPage();
-    const hasPrev = listHandler.hasPrevPage();
-    const startRecord = (currentPage - 1) * rowsPerPage + 1;
-    const endRecord = Math.min(currentPage * rowsPerPage, totalRecords);
-
-    return (
-      <div className="dl-pagination">
-        <div className="dl-pagination-info">
-          {showPageInfo && showTotalCount && (
-            <span>
-              Showing {startRecord}-{endRecord} of {totalRecords} records
-            </span>
-          )}
-          {showPageInfo && !showTotalCount && <span>Page {currentPage}</span>}
-        </div>
-        <div className="dl-pagination-controls">
-          {showRowsPerPage && (
-            <div className="dl-rows-per-page">
-              <span>Rows per page:</span>
-              <select value={rowsPerPage} onChange={(e) => handleRowsPerPage(Number(e.target.value))}>
-                {rowsPerPageOptions.map((o) => (
-                  <option key={o} value={o}>
-                    {o}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-          <button className="dl-page-btn" disabled={!hasPrev} onClick={handleFirstPage}>
-            First
-          </button>
-          <button className="dl-page-btn" disabled={!hasPrev} onClick={handlePrevPage}>
-            ← Prev
-          </button>
-          {totalPages > 0 &&
-            [...Array(Math.min(totalPages, 5))].map((_, i) => {
-              const page = i + 1;
-              return (
-                <button key={page} className={`dl-page-btn ${currentPage === page ? "active" : ""}`} onClick={() => handlePageChange(page)}>
-                  {page}
-                </button>
-              );
-            })}
-          <button className="dl-page-btn" disabled={!hasNext} onClick={handleNextPage}>
-            Next →
-          </button>
-          <button className="dl-page-btn" disabled={!hasNext} onClick={handleLastPage}>
-            Last
-          </button>
-        </div>
-      </div>
-    );
-  };
-
-  // ============================================================================
-  // ERROR STATE
-  // ============================================================================
-
-  if (error && errorMessage) {
-    return (
-      <div className="dl-error">
-        <p>{errorMessage}</p>
-        <button onClick={handleRefresh}>Retry</button>
-      </div>
-    );
-  }
-
-  // ============================================================================
-  // MAIN RENDER
-  // ============================================================================
-
-  return (
-    <div className={`data-list ${className}`}>
-      {renderToolbar()}
-      {renderFilterPanel()}
-      {(paginationPosition === "both" || paginationPosition === "top") && renderPagination()}
-      <DataTable
-        data={rows}
-        columns={sortableColumns}
-        loading={isLoading}
-        emptyMessage={emptyMessage}
-        striped={striped}
-        bordered={bordered}
-        hover={hover}
-        dense={dense}
-        rowKey="id"
-        onRowClick={handleRowClick}
-        selectedRows={selectedRows}
-        onSelectionChange={handleSelectionChange}
-        selectable={selectable}
-        rowClassName={rowClassName}
-      />
-      {(paginationPosition === "both" || paginationPosition === "bottom") && rows.length > 0 && renderPagination()}
-    </div>
-  );
-};
-
-// ============================================================================
-// PUBLIC DATALIST
-// - Only accepts attr
-// - All hooks (useApp, usePageContext) called here
-// - factory defined here
-// - resolves dynamic filter params before passing to TableProvider
-// ============================================================================
-
-type InnerDataListHandle = {
-  init: (ref: any) => void;
-};
-
-export const DataList: React.FC<DataListProps> = ({ attr }) => {
-  const { depends, cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions, ...rest } = attr;
-
-  // All hooks called here — this is a React component so hooks are valid
-  const { tenant, module } = useApp();
-  const pageContext = usePageContext();
-  const dataContext = useDataContext();
-
-  // Factory defined here — ListHandler is a local import, no prop needed
-  const listHandlerFactory = (config: ListHandlerConfig): ListActionHandler => ListHandler(config);
-
-  // Resolve dynamic placeholders in filter before ListHandler is constructed.
-  // Merges pageContext.getAllData() (page state) and pageContext.getUrlParams()
-  // (URL/route params) as the source so both {pageParams.x} and {urlParams.x}
-  // style tokens are resolved.
-  const resolveParams = (): Record<string, any> | undefined => {
-    if (!data?.params) return undefined;
-    //clone the filter
-    const cloned = JSON.parse(JSON.stringify(data.params));
-    const { params } = getUrlPageParams();
-    return replaceValues(cloned, params);
-  };
-
-  const newRowActions = [...(rowActions || [])];
-  if (commonActions?.viewPage) {
-    newRowActions.unshift({
-      component: "ViewPage",
-      attr: {
-        ...commonActions.viewPage,
-        title: "View",
-        icon: <Eye size={20} />,
-        iconOnly: true,
-      },
-    });
-  }
-
-  if (commonActions?.deleteData) {
-    newRowActions.push({
-      component: "DeleteData",
-      attr: {
-        ...commonActions.deleteData,
-        title: "Delete",
-        icon: <Trash size={20} />,
-        iconOnly: true,
-      },
-    });
-  }
-
-  const newToolbarActions = [...(toolbarActions || [])];
-  if (commonActions?.newPage) {
-    newToolbarActions.unshift({
-      label: "New",
-      component: "ViewPage",
-      attr: {
-        ...commonActions.newPage,
-        title: "New",
-      },
-    });
-  }
-
-  if (commonActions?.filterPage) {
-    newToolbarActions.push({
-      label: "Filter",
-      component: "LookupPage",
-      attr: {
-        ...commonActions.filterPage,
-        name: "customFilter",
-        title: "Filter",
-      },
-    });
-  }
-
-  const handleRef = useRef<any>(null);
-
-  const onRefresh = () => {
-    const filter = dataContext?.get("customFilter");
-    handleRef.current?.setFilter(filter ?? {});
-  };
-
-  useDependHandler({ name: "customFilter", onRefresh });
-
-  const innerHandle = {
-    init: (ref: any) => {
-      handleRef.current = ref;
-    },
-  } as InnerDataListHandle;
-
-  return (
-    <TableProvider
-      data={data}
-      columns={cols}
-      rowsPerPage={rowsPerPage}
-      disableTotalCount={disableTotalCount}
-      listHandlerFactory={listHandlerFactory}
-      tenant={tenant ?? ""}
-      module={module ?? ""}
-      resolvedParams={resolveParams()}
-    >
-      <InnerDataList {...rest} cols={cols} rowActions={newRowActions} toolbarActions={newToolbarActions} depends={depends} handle={innerHandle} />
-    </TableProvider>
-  );
-};
-
-export default DataList;
-
-interface RefreshButtonProps {
-  show: boolean;
-  onClick: () => void;
-  size?: number;
-}
-
-const RefreshButton = ({ show, onClick, size = 18 }: RefreshButtonProps) => {
-  if (!show) return null;
-
-  return (
-    <span className="text-gray-600 hover:bg-gray-200 rounded p-2">
-      <RefreshCcw size={size} onClick={onClick} className="cursor-pointer" />
-    </span>
-  );
-};
-
-interface ColumnToggleProps {
-  columns: ColumnDefinition[];
-  hiddenColumns: string[];
-  setHiddenColumns: (fn: (prev: string[]) => string[]) => void;
-}
-
-const ColumnToggle = ({ columns, hiddenColumns, setHiddenColumns }: ColumnToggleProps) => {
-  const [showColumnToggle, setShowColumnToggle] = useState(false);
-
-  return (
-    <div className="relative">
-      <span
-        className="text-gray-600 hover:bg-gray-200 rounded p-2 cursor-pointer flex items-center"
-        onClick={() => setShowColumnToggle(!showColumnToggle)}
-      >
-        <Columns size={18} />
-      </span>
-      {showColumnToggle && (
-        <div className="absolute right-0 top-8 z-50 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[180px]">
-          <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Columns</p>
-          {columns.map((col) => {
-            const colId = col.id || String(col.title);
-            const isHidden = hiddenColumns.includes(colId);
-            return (
-              <label key={colId} className="flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 px-1 rounded">
-                <input
-                  type="checkbox"
-                  checked={!isHidden}
-                  onChange={() => setHiddenColumns((prev) => (isHidden ? prev.filter((id) => id !== colId) : [...prev, colId]))}
-                />
-                <span className="text-sm text-gray-700">{String(col.title || col.id)}</span>
-              </label>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-interface SearchBoxProps {
-  searchable: boolean;
-  searchPlaceholder?: string;
-  searchText: string;
-  onSearch: (value: string) => void;
-}
-
-const SearchBox = ({ searchable, searchPlaceholder, searchText, onSearch }: SearchBoxProps) => {
-  if (!searchable) return null;
-
-  return (
-    <div className="dl-search-box ml-2">
-      <span>
-        <Search size={16} />
-      </span>
-      <input
-        type="text"
-        placeholder={searchPlaceholder}
-        value={searchText}
-        onChange={(e) => onSearch(e.target.value)}
-        className="focus:outline-none focus:ring-0 focus:shadow-none focus:bg-white"
-      />
-    </div>
-  );
-};