@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/DataTable.tsx

@@ -1,881 +0,0 @@
-"use client";
-import React, {
-  createContext,
-  CSSProperties,
-  PropsWithChildren,
-  ReactNode,
-  useContext,
-  useState,
-} from "react";
-
-import {
-  Cell,
-  Column,
-  ColumnDef,
-  ColumnFiltersState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  Header,
-  PaginationState,
-  // RowData,
-  SortingState,
-  useReactTable,
-} from "@tanstack/react-table";
-import clsx from "clsx";
-
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import {
-  arrayMove,
-  horizontalListSortingStrategy,
-  SortableContext,
-} from "@dnd-kit/sortable";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Switch } from "@headlessui/react";
-
-export interface DataTableProps {
-  id?: string;
-  data: OrderRow[];
-}
-
-export type OrderRow = {
-  orderId: string;
-  poId: string;
-  jobId: string;
-  reference: string;
-  reference1: string;
-  reference12: string;
-  reference13: string;
-  reference14: string;
-  reference15: string;
-  reference16: string;
-  reference17: string;
-  reference18: string;
-  reference19: string;
-  reference10: string;
-  reference11: string;
-  shipToStatus: string;
-  orderedDate: string;
-};
-
-const columns: ColumnDef<OrderRow>[] = [
-  {
-    header: "Order ID",
-    accessorKey: "orderId",
-    id: "orderId",
-    meta: {
-      sticky: true,
-    },
-  },
-  {
-    header: "Actions",
-    id: "actions",
-    cell: () => {
-      const items = [
-        {
-          label: "Release",
-          icon: <i className="w-3 h-3" />,
-        },
-        { label: "XML", icon: <i className="w-3 h-3" /> },
-        { label: "Copy", icon: <i className="w-3 h-3" /> },
-        { label: "Quote", icon: <i className="w-3 h-3" /> },
-        { label: "Retail", icon: <i className="w-3 h-3" /> },
-      ];
-      return (
-        <div className="flex flex-row gap-3">
-          {items.map((item, index) => (
-            <div
-              className="flex flex-col items-center justify-center gap-1"
-              key={index}
-            >
-              {item.icon}
-              <span className="text-[0.6rem] block text-neutral-500 font-semibold">
-                {item.label}
-              </span>
-            </div>
-          ))}
-        </div>
-      );
-    },
-  },
-  {
-    header: "PO ID",
-    accessorKey: "poId",
-    id: "poId",
-  },
-  {
-    header: "Job ID",
-    accessorKey: "jobId",
-    id: "jobId",
-  },
-  {
-    header: "Reference",
-    accessorKey: "reference",
-    id: "reference",
-    meta: {
-      className: "hidden md:table-cell",
-    },
-  },
-  {
-    header: "Status",
-    accessorKey: "shipToStatus",
-    id: "shipToStatus",
-    meta: {
-      filterVariant: "select",
-    },
-  },
-  {
-    header: "Ordered date",
-    accessorKey: "orderedDate",
-    id: "orderedDate",
-  },
-  {
-    header: "Reference 1",
-    accessorKey: "reference1",
-    id: "reference1",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 12",
-    accessorKey: "reference12",
-    id: "reference12",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 13",
-    accessorKey: "reference13",
-    id: "reference13",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 14",
-    accessorKey: "reference14",
-    id: "reference14",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 15",
-    accessorKey: "reference15",
-    id: "reference15",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 16",
-    accessorKey: "reference16",
-    id: "reference16",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 17",
-    accessorKey: "reference17",
-    id: "reference17",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 18",
-    accessorKey: "reference18",
-    id: "reference18",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 19",
-    accessorKey: "reference19",
-    id: "reference19",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 10",
-    accessorKey: "reference10",
-    id: "reference10",
-    meta: { className: "hidden md:table-cell" },
-  },
-  {
-    header: "Reference 11",
-    accessorKey: "reference11",
-    id: "reference11",
-    meta: { className: "hidden md:table-cell" },
-  },
-];
-
-const EditingContext = createContext<{
-  data: OrderRow[];
-  setValue: (row: number, key: string, value: string) => void;
-}>({
-  data: [],
-  setValue: (row: number, key: string, value: string) => {},
-});
-
-type EditingProviderProps = PropsWithChildren<{ data: OrderRow[] }>;
-
-export const EditingProvider = ({ data, children }: EditingProviderProps) => {
-  const [actual, setData] = useState(data);
-  const context = {
-    data: actual,
-    setValue: (row: number, key: string, value: string) => {
-      setData((prev) => {
-        const newData = [...prev];
-        newData[row] = {
-          ...newData[row],
-          [key]: value,
-        };
-        return newData;
-      });
-    },
-  };
-  return (
-    <EditingContext.Provider value={context}>
-      {children}
-    </EditingContext.Provider>
-  );
-};
-export const DataTable = ({ id, data }: DataTableProps) => {
-  return (
-    <EditingProvider data={data}>
-      <DataTableInternals id={id} />
-    </EditingProvider>
-  );
-};
-
-const DraggableTableHeader = ({
-  header,
-  id,
-}: {
-  header: Header<OrderRow, unknown>;
-  id?: string;
-}) => {
-  const { attributes, isDragging, listeners, setNodeRef, transform } =
-    useSortable({
-      id: header.column.id,
-    });
-
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    whiteSpace: "nowrap",
-    width: header.column.getSize(),
-    zIndex: isDragging ? 1 : 0,
-  };
-
-  return (
-    <th
-      id={id}
-      colSpan={header.colSpan}
-      ref={setNodeRef}
-      style={style}
-      className={clsx(
-        header.column.columnDef.meta?.className,
-        "px-3 py-3.5 text-left text-sm font-semibold text-dmsi-white bg-dmsi-red ",
-        {
-          "sticky left-0": header.column.columnDef.meta?.sticky ?? false,
-        },
-      )}
-    >
-      {header.isPlaceholder ? null : (
-        <div className="flex space-x-1 justify-start items-center">
-          <button
-            id={id ? `${id}-drag-handle` : undefined}
-            className="cursor-grab shrink-0"
-            {...attributes}
-            {...listeners}
-          >
-            <i className="w-3 h-3" />
-          </button>
-
-          <div
-            className={clsx(
-              "grow",
-              header.column.getCanSort() ? "cursor-pointer select-none" : "",
-              "flex flex-col gap-1 justify-between items-start",
-            )}
-            title={
-              header.column.getCanSort()
-                ? header.column.getNextSortingOrder() === "asc"
-                  ? "Sort ascending"
-                  : header.column.getNextSortingOrder() === "desc"
-                    ? "Sort descending"
-                    : "Clear sort"
-                : undefined
-            }
-          >
-            <div>
-              {flexRender(header.column.columnDef.header, header.getContext())}
-            </div>
-            <div>
-              {header.column.getCanFilter() ? (
-                <Filter
-                  id={id ? `${id}-filter` : undefined}
-                  column={header.column}
-                />
-              ) : (
-                <div className="invisible">
-                  <Filter
-                    id={id ? `${id}-filter` : undefined}
-                    column={header.column}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-          <div
-            id={id ? `${id}-sort-button` : undefined}
-            className="shrink-0 cursor-pointer"
-            onClick={header.column.getToggleSortingHandler()}
-          >
-            {{
-              asc: <i className="w-3 h-3" />,
-              desc: <i className="w-3 h-3" />,
-            }[header.column.getIsSorted() as string] ?? (
-              <i className="w-3 h-3" />
-            )}
-          </div>
-        </div>
-      )}
-    </th>
-  );
-};
-
-const DragAlongCell = ({
-  cell,
-  setValue,
-  id,
-}: {
-  cell: Cell<OrderRow, unknown>;
-  setValue: (row: number, key: string, value: string) => void;
-  id?: string;
-}) => {
-  const { isDragging, setNodeRef, transform } = useSortable({
-    id: cell.column.id,
-  });
-
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    width: cell.column.getSize(),
-    zIndex: isDragging ? 1 : 0,
-  };
-
-  return (
-    <EditCell
-      id={id}
-      ref={setNodeRef}
-      style={style}
-      cell={cell}
-      className={clsx(
-        cell.column.columnDef.meta?.className ?? "",
-        "text-sm whitespace-nowrap text-gray-900  bg-neutral-100",
-        {
-          "sticky left-0": cell.column.columnDef.meta?.sticky ?? false,
-        },
-      )}
-      setValue={setValue}
-    />
-  );
-};
-
-const DataTableInternals = ({ id }: { id?: string }) => {
-  // use state client bullshit
-
-  const { data, setValue } = useContext(EditingContext);
-  const [columnOrder, setColumnOrder] = React.useState<string[]>(() =>
-    columns.map((c) => c.id!),
-  );
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-  const [columnVisibility, setColumnVisibility] = useState(
-    columns.reduce(
-      (acc, column) => {
-        if ("accessorKey" in column) {
-          acc[column.accessorKey as string] = true;
-        }
-        return acc;
-      },
-      {} as Record<string, boolean>,
-    ),
-  );
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); // can set initial column filter state here
-  const table = useReactTable<OrderRow>({
-    columns,
-    data,
-    debugAll: true,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onPaginationChange: setPagination,
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnOrderChange: setColumnOrder,
-    state: {
-      sorting,
-      columnFilters,
-      pagination,
-      columnVisibility,
-      columnOrder,
-    },
-  });
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (active && over && active.id !== over.id) {
-      setColumnOrder((columnOrder) => {
-        const oldIndex = columnOrder.indexOf(active.id as string);
-        const newIndex = columnOrder.indexOf(over.id as string);
-        return arrayMove(columnOrder, oldIndex, newIndex);
-      });
-    }
-  }
-
-  const sensors = useSensors(
-    useSensor(MouseSensor, {}),
-    useSensor(TouchSensor, {}),
-    useSensor(KeyboardSensor, {}),
-  );
-
-  return (
-    <DndContext
-      collisionDetection={closestCenter}
-      modifiers={[restrictToHorizontalAxis]}
-      onDragEnd={handleDragEnd}
-      sensors={sensors}
-    >
-      <div id={id}>
-        <div
-          id={id ? `${id}-column-visibility` : undefined}
-          className="border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0"
-        >
-          <p className="mb-3 font-semibold">Show/Hide Columns</p>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
-            {table.getAllColumns().map((column) => (
-              <label
-                className="cursor-pointer flex flex-row items-center space-x-1"
-                key={column.id}
-              >
-                <Toggle
-                  id={id ? `${id}-toggle-${column.id}` : undefined}
-                  enabled={column.getIsVisible()}
-                  onToggle={(checked) =>
-                    column.getToggleVisibilityHandler()({
-                      target: { checked },
-                    })
-                  }
-                />
-
-                <span className="block">
-                  {column.columnDef.header as ReactNode}
-                </span>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        <div className="overflow-x-scroll scrollbar-thin">
-          <table className="min-w-full divide-x divide-neutral-500">
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  <SortableContext
-                    items={columnOrder}
-                    strategy={horizontalListSortingStrategy}
-                  >
-                    {headerGroup.headers.map((header) => (
-                      <DraggableTableHeader
-                        key={header.id}
-                        id={id ? `${id}-header-${header.id}` : undefined}
-                        header={header}
-                      />
-                    ))}
-                  </SortableContext>
-                </tr>
-              ))}
-            </thead>
-            <tbody>
-              {table.getRowModel().rows.map((row) => (
-                <tr
-                  key={row.id}
-                  className="bg-neutral-100 divide-y divide-neutral-200"
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <SortableContext
-                      key={cell.id}
-                      items={columnOrder}
-                      strategy={horizontalListSortingStrategy}
-                    >
-                      <DragAlongCell
-                        key={cell.id}
-                        id={id ? `${id}-cell-${cell.id}` : undefined}
-                        cell={cell}
-                        setValue={setValue}
-                      />
-                    </SortableContext>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        <div
-          id={id ? `${id}-pagination` : undefined}
-          className="flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2"
-        >
-          <div className="flex flex-row items-center">
-            <button
-              id={id ? `${id}-first-page` : undefined}
-              className={clsx(
-                "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 rounded-r-none",
-                {
-                  "pointer-events-none": !table.getCanPreviousPage(),
-                },
-              )}
-              onClick={() => table.setPageIndex(0)}
-              disabled={!table.getCanPreviousPage()}
-            >
-              <i className="w-4 h-4 group-disabled:stroke-gray-400" />
-            </button>
-            <button
-              id={id ? `${id}-prev-page` : undefined}
-              className={clsx(
-                "-mr-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
-                {
-                  "pointer-events-none": !table.getCanPreviousPage(),
-                },
-              )}
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-            >
-              <i className="w-4 h-4 group-disabled:stroke-gray-400" />
-            </button>
-            {Array.from({ length: Math.min(5, table.getPageCount()) }).map(
-              (_, i) => {
-                const current = table.getState().pagination.pageIndex;
-                const index = current - 2 + i;
-                const active = index === current;
-                if (index < 0) return null;
-                if (index > table.getPageCount() - 1) return null;
-                return (
-                  <button
-                    key={i}
-                    id={id ? `${id}-page-${index + 1}` : undefined}
-                    className={clsx(
-                      "group h-8 w-8 border-y border-gray-500/50 text-gray-700 p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer  flex items-center justify-center",
-                      {
-                        "bg-neutral-200 border-x": active,
-                        "border-r-0": !active,
-                      },
-                    )}
-                    onClick={() => table.setPageIndex(index)}
-                  >
-                    <span className={clsx({})}>{index + 1}</span>
-                  </button>
-                );
-              },
-            )}
-            <button
-              id={id ? `${id}-next-page` : undefined}
-              className={clsx(
-                "-ml-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 group",
-                {
-                  "pointer-events-none": !table.getCanNextPage(),
-                },
-              )}
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-            >
-              <i className="w-4 h-4 group-disabled:stroke-gray-400 " />
-            </button>
-            <button
-              id={id ? `${id}-last-page` : undefined}
-              className={clsx(
-                "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded rounded-l-none p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
-                {
-                  "pointer-events-none": !table.getCanNextPage(),
-                },
-              )}
-              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-              disabled={!table.getCanNextPage()}
-            >
-              <i className="w-4 h-4  group-disabled:stroke-gray-400" />
-            </button>
-          </div>
-          <div className="flex flex-row items-center gap-6">
-            <span className="flex items-center gap-1">
-              <div>Page</div>
-              <strong>
-                {table.getState().pagination.pageIndex + 1} of{" "}
-                {table.getPageCount()}
-              </strong>
-            </span>
-            <span className="flex items-center gap-2">
-              Page:
-              <input
-                id={id ? `${id}-page-input` : undefined}
-                type="number"
-                min="1"
-                max={table.getPageCount()}
-                defaultValue={table.getState().pagination.pageIndex + 1}
-                onChange={(e) => {
-                  const page = e.target.value ? Number(e.target.value) - 1 : 0;
-                  table.setPageIndex(page);
-                }}
-                className="border border-gray-500 px-2 py-1 rounded w-16"
-              />
-            </span>
-          </div>
-          <select
-            id={id ? `${id}-pagesize-select` : undefined}
-            className="border border-gray-500 px-2 py-1 rounded"
-            value={table.getState().pagination.pageSize}
-            onChange={(e) => {
-              table.setPageSize(Number(e.target.value));
-            }}
-          >
-            {[10, 20, 30, 40, 50].map((pageSize) => (
-              <option key={pageSize} value={pageSize}>
-                Show {pageSize}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-    </DndContext>
-  );
-};
-
-function EditCell({
-  className,
-  cell,
-  setValue,
-  style,
-  ref,
-  id,
-}: {
-  className?: string;
-  cell: Cell<OrderRow, unknown>;
-  setValue: (row: number, key: string, value: string) => void;
-  style: CSSProperties;
-  ref: (node: HTMLElement | null) => void;
-  id?: string;
-}) {
-  const [editing, setEditing] = useState(false);
-  const value = cell.getValue();
-  const isString = typeof value === "string";
-  const [editedValue, setEditedValue] = useState<string>(isString ? value : "");
-  const onStartEdit = () => {
-    if (isString) {
-      setEditing(true);
-    }
-  };
-  const onEditValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEditedValue(e.target.value);
-  };
-  const onStopEdit = () => {
-    setValue(cell.row.index, cell.column.id, editedValue);
-    setEditing(false);
-  };
-  const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      onStopEdit();
-    }
-  };
-
-  return (
-    <td
-      id={id}
-      key={cell.id}
-      className={clsx(
-        className,
-        cell.column.columnDef.meta?.className ?? "",
-        "px-2 py-3 text-sm whitespace-nowrap text-gray-500",
-      )}
-      style={style}
-      ref={ref}
-    >
-      {isString && editing && (
-        <div className="flex flex-row gap-1">
-          <input
-            id={id ? `${id}-input` : undefined}
-            type="text"
-            value={editedValue}
-            onChange={onEditValue}
-            onKeyUp={onKeyUp}
-            onBlur={onStopEdit}
-            className="border px-2 py-0.5 rounded inline min-w-0 shrink border-neutral-400 focus:outline-neutral-300 bg-white"
-          />
-          <button
-            id={id ? `${id}-save-button` : undefined}
-            onClick={onStopEdit}
-            className="border cursor-pointer px-2 py-0.5 rounded flex items-center justify-center w-12 border-dmsi-blue text-dmsi-blue bg-white"
-          >
-            Save
-          </button>
-        </div>
-      )}
-      {!editing && (
-        <div
-          onClick={onStartEdit}
-          className="px-2 py-1 flex flex-row items-center"
-        >
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-          <div className="w-16"></div>
-        </div>
-      )}
-    </td>
-  );
-}
-
-function Filter({ column, id }: { column: Column<OrderRow>; id?: string }) {
-  const columnFilterValue = column.getFilterValue();
-
-  const { filterVariant } = column.columnDef.meta ?? {};
-
-  return filterVariant === "range" ? (
-    <div id={id}>
-      <div className="flex space-x-2">
-        {/* See faceted column filters example for min max values functionality */}
-        <input
-          id={id ? `${id}-min` : undefined}
-          className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
-          type="number"
-          value={(columnFilterValue as [number, number])?.[0] ?? ""}
-          onChange={(e) =>
-            column.setFilterValue((old: [number, number]) => [
-              e.target.value,
-              old?.[1],
-            ])
-          }
-          autoComplete="off"
-          placeholder={`Min`}
-        />
-        <input
-          id={id ? `${id}-max` : undefined}
-          className="block  w-full rounded-md bg-white px-3 py-0.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
-          type="number"
-          value={(columnFilterValue as [number, number])?.[1] ?? ""}
-          onChange={(e) =>
-            column.setFilterValue((old: [number, number]) => [
-              old?.[0],
-              e.target.value,
-            ])
-          }
-          autoComplete="off"
-          placeholder={`Max`}
-        />
-      </div>
-      <div className="h-1" />
-    </div>
-  ) : filterVariant === "select" ? (
-    <select
-      id={id}
-      className="block min-w-36 w-full rounded-md bg-white px-2 py-2 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
-      onChange={(e) => column.setFilterValue(e.target.value)}
-      value={columnFilterValue?.toString()}
-    >
-      {/* See faceted column filters example for dynamic select options */}
-      <option value="">Status: All</option>
-      <option value="cancelled">Status: Cancelled</option>
-      <option value="pending">Status: Pending</option>
-      <option value="shipped">Status: Shipped</option>
-    </select>
-  ) : (
-    <input
-      id={id}
-      className="block min-w-36 w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
-      onChange={(e) => column.setFilterValue(e.target.value)}
-      placeholder={column.columnDef.header?.toString() ?? "..."}
-      type="text"
-      autoComplete="off"
-      value={(columnFilterValue ?? "") as string}
-    />
-    // See faceted column filters example for datalist search suggestions
-  );
-}
-
-// // A typical debounced input react component
-// // This debounce is not working correctly?
-// function DebouncedInput({
-//   value: initialValue,
-//   onChange,
-//   debounce = 500,
-//   ...props
-// }: {
-//   value: string | number;
-//   onChange: (value: string | number) => void;
-//   debounce?: number;
-// } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
-//   const [value, setValue] = React.useState(initialValue);
-
-//   React.useEffect(() => {
-//     if (value !== initialValue) {
-//       setValue(initialValue);
-//     }
-//   }, [initialValue, setValue, value]);
-
-//   React.useEffect(() => {
-//     if (value === initialValue) {
-//       return;
-//     }
-
-//     const timeout = setTimeout(() => {
-//       onChange(value);
-//     }, debounce);
-
-//     return () => clearTimeout(timeout);
-//   }, [value, debounce, onChange, initialValue]);
-
-//   return (
-//     <input
-//       {...props}
-//       value={value}
-//       onChange={(e) => setValue(e.target.value)}
-//     />
-//   );
-// }
-
-Switch.displayName = "Switch";
-
-export default function Toggle({
-  enabled,
-  onToggle,
-  id,
-}: {
-  enabled: boolean;
-  onToggle: (enabled: boolean) => void;
-  id?: string;
-}) {
-  return (
-    <Switch
-      id={id}
-      checked={enabled}
-      onChange={onToggle}
-      className="group relative flex h-4 w-7 cursor-pointer rounded-full   p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white bg-neutral-900/10 data-[checked]:bg-dmsi-blue"
-    >
-      <span
-        aria-hidden="true"
-        className="pointer-events-none inline-block size-3 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-3  group-data-[checked]:shadow-lg"
-      />
-    </Switch>
-  );
-}
-
-Toggle.displayName = "Toggle";