@dmsi/wedgekit-react 0.0.1277 → 1.0.1

package/dist/components/DataTable.cjs

@@ -1,847 +0,0 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/DataTable.tsx
-var DataTable_exports = {};
-__export(DataTable_exports, {
-  DataTable: () => DataTable,
-  EditingProvider: () => EditingProvider,
-  default: () => Toggle
-});
-module.exports = __toCommonJS(DataTable_exports);
-var import_react2 = __toESM(require("react"), 1);
-var import_react_table = require("@tanstack/react-table");
-var import_clsx = __toESM(require("clsx"), 1);
-var import_core = require("@dnd-kit/core");
-var import_modifiers = require("@dnd-kit/modifiers");
-var import_sortable = require("@dnd-kit/sortable");
-var import_sortable2 = require("@dnd-kit/sortable");
-
-// ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
-var import_react = require("react");
-var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-var CSS = /* @__PURE__ */ Object.freeze({
-  Translate: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      const {
-        x,
-        y
-      } = transform;
-      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
-    }
-  },
-  Scale: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      const {
-        scaleX,
-        scaleY
-      } = transform;
-      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
-    }
-  },
-  Transform: {
-    toString(transform) {
-      if (!transform) {
-        return;
-      }
-      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
-    }
-  },
-  Transition: {
-    toString(_ref) {
-      let {
-        property,
-        duration,
-        easing
-      } = _ref;
-      return property + " " + duration + "ms " + easing;
-    }
-  }
-});
-
-// src/components/DataTable.tsx
-var import_react3 = require("@headlessui/react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var columns = [
-  {
-    header: "Order ID",
-    accessorKey: "orderId",
-    id: "orderId",
-    meta: {
-      sticky: true
-    }
-  },
-  {
-    header: "Actions",
-    id: "actions",
-    cell: () => {
-      const items = [
-        {
-          label: "Release",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
-        },
-        { label: "XML", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) },
-        { label: "Copy", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) },
-        { label: "Quote", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) },
-        { label: "Retail", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }) }
-      ];
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-row gap-3", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: "flex flex-col items-center justify-center gap-1",
-          children: [
-            item.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[0.6rem] block text-neutral-500 font-semibold", children: item.label })
-          ]
-        },
-        index
-      )) });
-    }
-  },
-  {
-    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" }
-  }
-];
-var EditingContext = (0, import_react2.createContext)({
-  data: [],
-  setValue: (row, key, value) => {
-  }
-});
-var EditingProvider = ({ data, children }) => {
-  const [actual, setData] = (0, import_react2.useState)(data);
-  const context = {
-    data: actual,
-    setValue: (row, key, value) => {
-      setData((prev) => {
-        const newData = [...prev];
-        newData[row] = __spreadProps(__spreadValues({}, newData[row]), {
-          [key]: value
-        });
-        return newData;
-      });
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditingContext.Provider, { value: context, children });
-};
-var DataTable = ({ id, data }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditingProvider, { data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableInternals, { id }) });
-};
-var DraggableTableHeader = ({
-  header,
-  id
-}) => {
-  var _a, _b, _c, _d;
-  const { attributes, isDragging, listeners, setNodeRef, transform } = (0, import_sortable2.useSortable)({
-    id: header.column.id
-  });
-  const style = {
-    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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "th",
-    {
-      id,
-      colSpan: header.colSpan,
-      ref: setNodeRef,
-      style,
-      className: (0, import_clsx.default)(
-        (_a = header.column.columnDef.meta) == null ? void 0 : _a.className,
-        "px-3 py-3.5 text-left text-sm font-semibold text-dmsi-white bg-dmsi-red ",
-        {
-          "sticky left-0": (_c = (_b = header.column.columnDef.meta) == null ? void 0 : _b.sticky) != null ? _c : false
-        }
-      ),
-      children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex space-x-1 justify-start items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          __spreadProps(__spreadValues(__spreadValues({
-            id: id ? `${id}-drag-handle` : void 0,
-            className: "cursor-grab shrink-0"
-          }, attributes), listeners), {
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
-          })
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            className: (0, import_clsx.default)(
-              "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" : void 0,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: header.column.getCanFilter() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Filter,
-                {
-                  id: id ? `${id}-filter` : void 0,
-                  column: header.column
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "invisible", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Filter,
-                {
-                  id: id ? `${id}-filter` : void 0,
-                  column: header.column
-                }
-              ) }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            id: id ? `${id}-sort-button` : void 0,
-            className: "shrink-0 cursor-pointer",
-            onClick: header.column.getToggleSortingHandler(),
-            children: (_d = {
-              asc: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" }),
-              desc: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
-            }[header.column.getIsSorted()]) != null ? _d : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-3 h-3" })
-          }
-        )
-      ] })
-    }
-  );
-};
-var DragAlongCell = ({
-  cell,
-  setValue,
-  id
-}) => {
-  var _a, _b, _c, _d;
-  const { isDragging, setNodeRef, transform } = (0, import_sortable2.useSortable)({
-    id: cell.column.id
-  });
-  const style = {
-    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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    EditCell,
-    {
-      id,
-      ref: setNodeRef,
-      style,
-      cell,
-      className: (0, import_clsx.default)(
-        (_b = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className) != null ? _b : "",
-        "text-sm whitespace-nowrap text-gray-900  bg-neutral-100",
-        {
-          "sticky left-0": (_d = (_c = cell.column.columnDef.meta) == null ? void 0 : _c.sticky) != null ? _d : false
-        }
-      ),
-      setValue
-    }
-  );
-};
-var DataTableInternals = ({ id }) => {
-  const { data, setValue } = (0, import_react2.useContext)(EditingContext);
-  const [columnOrder, setColumnOrder] = import_react2.default.useState(
-    () => columns.map((c) => c.id)
-  );
-  const [pagination, setPagination] = (0, import_react2.useState)({
-    pageIndex: 0,
-    pageSize: 10
-  });
-  const [columnVisibility, setColumnVisibility] = (0, import_react2.useState)(
-    columns.reduce(
-      (acc, column) => {
-        if ("accessorKey" in column) {
-          acc[column.accessorKey] = true;
-        }
-        return acc;
-      },
-      {}
-    )
-  );
-  const [sorting, setSorting] = (0, import_react2.useState)([]);
-  const [columnFilters, setColumnFilters] = (0, import_react2.useState)([]);
-  const table = (0, import_react_table.useReactTable)({
-    columns,
-    data,
-    debugAll: true,
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
-    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
-    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
-    getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onPaginationChange: setPagination,
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnOrderChange: setColumnOrder,
-    state: {
-      sorting,
-      columnFilters,
-      pagination,
-      columnVisibility,
-      columnOrder
-    }
-  });
-  function handleDragEnd(event) {
-    const { active, over } = event;
-    if (active && over && active.id !== over.id) {
-      setColumnOrder((columnOrder2) => {
-        const oldIndex = columnOrder2.indexOf(active.id);
-        const newIndex = columnOrder2.indexOf(over.id);
-        return (0, import_sortable.arrayMove)(columnOrder2, oldIndex, newIndex);
-      });
-    }
-  }
-  const sensors = (0, import_core.useSensors)(
-    (0, import_core.useSensor)(import_core.MouseSensor, {}),
-    (0, import_core.useSensor)(import_core.TouchSensor, {}),
-    (0, import_core.useSensor)(import_core.KeyboardSensor, {})
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_core.DndContext,
-    {
-      collisionDetection: import_core.closestCenter,
-      modifiers: [import_modifiers.restrictToHorizontalAxis],
-      onDragEnd: handleDragEnd,
-      sensors,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            id: id ? `${id}-column-visibility` : void 0,
-            className: "border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-3 font-semibold", children: "Show/Hide Columns" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-2", children: table.getAllColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "label",
-                {
-                  className: "cursor-pointer flex flex-row items-center space-x-1",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      Toggle,
-                      {
-                        id: id ? `${id}-toggle-${column.id}` : void 0,
-                        enabled: column.getIsVisible(),
-                        onToggle: (checked) => column.getToggleVisibilityHandler()({
-                          target: { checked }
-                        })
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block", children: column.columnDef.header })
-                  ]
-                },
-                column.id
-              )) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-scroll scrollbar-thin", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "min-w-full divide-x divide-neutral-500", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_sortable.SortableContext,
-            {
-              items: columnOrder,
-              strategy: import_sortable.horizontalListSortingStrategy,
-              children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                DraggableTableHeader,
-                {
-                  id: id ? `${id}-header-${header.id}` : void 0,
-                  header
-                },
-                header.id
-              ))
-            }
-          ) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "tr",
-            {
-              className: "bg-neutral-100 divide-y divide-neutral-200",
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_sortable.SortableContext,
-                {
-                  items: columnOrder,
-                  strategy: import_sortable.horizontalListSortingStrategy,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    DragAlongCell,
-                    {
-                      id: id ? `${id}-cell-${cell.id}` : void 0,
-                      cell,
-                      setValue
-                    },
-                    cell.id
-                  )
-                },
-                cell.id
-              ))
-            },
-            row.id
-          )) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            id: id ? `${id}-pagination` : void 0,
-            className: "flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "button",
-                  {
-                    id: id ? `${id}-first-page` : void 0,
-                    className: (0, import_clsx.default)(
-                      "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(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "button",
-                  {
-                    id: id ? `${id}-prev-page` : void 0,
-                    className: (0, import_clsx.default)(
-                      "-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(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4 group-disabled:stroke-gray-400" })
-                  }
-                ),
-                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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
-                      {
-                        id: id ? `${id}-page-${index + 1}` : void 0,
-                        className: (0, import_clsx.default)(
-                          "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),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)({}), children: index + 1 })
-                      },
-                      i
-                    );
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "button",
-                  {
-                    id: id ? `${id}-next-page` : void 0,
-                    className: (0, import_clsx.default)(
-                      "-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(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4 group-disabled:stroke-gray-400 " })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "button",
-                  {
-                    id: id ? `${id}-last-page` : void 0,
-                    className: (0, import_clsx.default)(
-                      "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(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "w-4 h-4  group-disabled:stroke-gray-400" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row items-center gap-6", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Page" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
-                    table.getState().pagination.pageIndex + 1,
-                    " of",
-                    " ",
-                    table.getPageCount()
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
-                  "Page:",
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "input",
-                    {
-                      id: id ? `${id}-page-input` : void 0,
-                      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"
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "select",
-                {
-                  id: id ? `${id}-pagesize-select` : void 0,
-                  className: "border border-gray-500 px-2 py-1 rounded",
-                  value: table.getState().pagination.pageSize,
-                  onChange: (e) => {
-                    table.setPageSize(Number(e.target.value));
-                  },
-                  children: [10, 20, 30, 40, 50].map((pageSize) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", { value: pageSize, children: [
-                    "Show ",
-                    pageSize
-                  ] }, pageSize))
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    }
-  );
-};
-function EditCell({
-  className,
-  cell,
-  setValue,
-  style,
-  ref,
-  id
-}) {
-  var _a, _b;
-  const [editing, setEditing] = (0, import_react2.useState)(false);
-  const value = cell.getValue();
-  const isString = typeof value === "string";
-  const [editedValue, setEditedValue] = (0, import_react2.useState)(isString ? value : "");
-  const onStartEdit = () => {
-    if (isString) {
-      setEditing(true);
-    }
-  };
-  const onEditValue = (e) => {
-    setEditedValue(e.target.value);
-  };
-  const onStopEdit = () => {
-    setValue(cell.row.index, cell.column.id, editedValue);
-    setEditing(false);
-  };
-  const onKeyUp = (e) => {
-    if (e.key === "Enter") {
-      onStopEdit();
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "td",
-    {
-      id,
-      className: (0, import_clsx.default)(
-        className,
-        (_b = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className) != null ? _b : "",
-        "px-2 py-3 text-sm whitespace-nowrap text-gray-500"
-      ),
-      style,
-      ref,
-      children: [
-        isString && editing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              id: id ? `${id}-input` : void 0,
-              type: "text",
-              value: editedValue,
-              onChange: onEditValue,
-              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"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              id: id ? `${id}-save-button` : void 0,
-              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",
-              children: "Save"
-            }
-          )
-        ] }),
-        !editing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
-          {
-            onClick: onStartEdit,
-            className: "px-2 py-1 flex flex-row items-center",
-            children: [
-              (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-16" })
-            ]
-          }
-        )
-      ]
-    },
-    cell.id
-  );
-}
-function Filter({ column, id }) {
-  var _a, _b, _c, _d, _e;
-  const columnFilterValue = column.getFilterValue();
-  const { filterVariant } = (_a = column.columnDef.meta) != null ? _a : {};
-  return filterVariant === "range" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
-        {
-          id: id ? `${id}-min` : void 0,
-          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: (_b = columnFilterValue == null ? void 0 : columnFilterValue[0]) != null ? _b : "",
-          onChange: (e) => column.setFilterValue((old) => [
-            e.target.value,
-            old == null ? void 0 : old[1]
-          ]),
-          autoComplete: "off",
-          placeholder: `Min`
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
-        {
-          id: id ? `${id}-max` : void 0,
-          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: (_c = columnFilterValue == null ? void 0 : columnFilterValue[1]) != null ? _c : "",
-          onChange: (e) => column.setFilterValue((old) => [
-            old == null ? void 0 : old[0],
-            e.target.value
-          ]),
-          autoComplete: "off",
-          placeholder: `Max`
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1" })
-  ] }) : filterVariant === "select" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "select",
-    {
-      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 == null ? void 0 : columnFilterValue.toString(),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "Status: All" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "cancelled", children: "Status: Cancelled" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "pending", children: "Status: Pending" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "shipped", children: "Status: Shipped" })
-      ]
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "input",
-    {
-      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: (_e = (_d = column.columnDef.header) == null ? void 0 : _d.toString()) != null ? _e : "...",
-      type: "text",
-      autoComplete: "off",
-      value: columnFilterValue != null ? columnFilterValue : ""
-    }
-  );
-}
-import_react3.Switch.displayName = "Switch";
-function Toggle({
-  enabled,
-  onToggle,
-  id
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react3.Switch,
-    {
-      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",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "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"
-        }
-      )
-    }
-  );
-}
-Toggle.displayName = "Toggle";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DataTable,
-  EditingProvider
-});