@algorithm-shift/design-system 1.2.62 → 1.2.63

package/dist/index.mjs

@@ -28237,13 +28237,16 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 };
 var TextInputGroup_default = TextInputGroup;
 
-// src/components/DataDisplay/Table/Table.tsx
-import { useState as useState3, useEffect as useEffect21 } from "react";
-
 // src/components/ui/data-table.tsx
+import * as React6 from "react";
+import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
 import {
   flexRender,
   getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
   useReactTable
 } from "@tanstack/react-table";
 
@@ -28336,72 +28339,277 @@ function TableCell({ className, ...props }) {
 import { Fragment as Fragment17, jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 function DataTable({
   columns,
-  rowActions,
   data,
   loading,
-  getRowSelection,
-  onCellClick,
-  cellClickEnabled = () => false
+  pagination = false,
+  controlledPageIndex,
+  onPageChange,
+  pageSize = 10,
+  paginationMode = "client",
+  totalRecords = 0
 }) {
+  const [sorting, setSorting] = React6.useState([]);
+  const [columnFilters, setColumnFilters] = React6.useState([]);
+  const [columnVisibility, setColumnVisibility] = React6.useState({});
   const table = useReactTable({
     data,
     columns,
-    enableRowSelection: true,
-    onRowSelectionChange: getRowSelection ? (updaterOrValue) => {
-      const value = typeof updaterOrValue === "function" ? updaterOrValue(table.getState().rowSelection) : updaterOrValue;
-      getRowSelection(value);
-    } : void 0,
-    getCoreRowModel: getCoreRowModel()
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      pagination: {
+        pageIndex: controlledPageIndex ?? 0,
+        pageSize
+      }
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: pagination && paginationMode === "client" ? getPaginationRowModel() : void 0,
+    manualPagination: paginationMode === "server",
+    pageCount: paginationMode === "server" ? Math.ceil(totalRecords / pageSize) : void 0,
+    onPaginationChange: (updater) => {
+      const prev = table.getState().pagination;
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      onPageChange?.(next.pageIndex, next.pageSize);
+    }
   });
-  const handleCellClick = (rowData, columnId) => {
-    if (onCellClick) {
-      onCellClick(rowData, columnId);
+  const getPageNumbers = (currentPage, totalPages, maxVisiblePages = 5) => {
+    if (totalPages <= maxVisiblePages) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const leftSiblingIndex = Math.max(currentPage - 1, 1);
+    const rightSiblingIndex = Math.min(currentPage + 1, totalPages);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      return [1, 2, 3, "...", totalPages];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      return [1, "...", totalPages - 2, totalPages - 1, totalPages];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages];
     }
+    return [];
   };
-  return /* @__PURE__ */ jsx47("div", { className: "overflow-hidden rounded-md border w-full", children: /* @__PURE__ */ jsxs26(Table3, { children: [
-    /* @__PURE__ */ jsx47(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx47(TableRow, { children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ jsx47(TableHead, { children: header.isPlaceholder ? null : flexRender(
-        header.column.columnDef.header,
-        header.getContext()
-      ) }, header.id);
-    }) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx47(TableBody, { children: loading ? /* @__PURE__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : /* @__PURE__ */ jsx47(Fragment17, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs26(
-      TableRow,
-      {
-        "data-state": row.getIsSelected() && "selected",
-        className: "relative group",
-        children: [
-          row.getVisibleCells().map((cell) => {
-            const isCellClickable = cellClickEnabled(row.original, cell.column.id);
-            const dynamicClass = cell.column.columnDef.meta?.cellClass || "";
-            const dynamicStyle = cell.column.columnDef.meta?.cellStyle || {};
-            return /* @__PURE__ */ jsx47(
-              TableCell,
+  return /* @__PURE__ */ jsxs26("div", { className: "overflow-hidden rounded-md border w-full", children: [
+    /* @__PURE__ */ jsx47("div", { className: "flex justify-end p-2", children: /* @__PURE__ */ jsxs26(Popover, { children: [
+      /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "px-3 py-1 text-xs cursor-pointer",
+          children: "Manage Columns"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs26(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+        /* @__PURE__ */ jsx47("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+        /* @__PURE__ */ jsxs26("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+          /* @__PURE__ */ jsx47(
+            "input",
+            {
+              type: "checkbox",
+              checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
+              ref: (input) => {
+                if (input) {
+                  input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+                }
+              },
+              onChange: (e) => {
+                table.getAllLeafColumns().forEach(
+                  (col) => col.toggleVisibility(e.target.checked)
+                );
+              }
+            }
+          ),
+          "Toggle All"
+        ] }),
+        table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs26("label", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx47(
+            "input",
+            {
+              type: "checkbox",
+              checked: column.getIsVisible(),
+              onChange: (e) => column.toggleVisibility(e.target.checked)
+            }
+          ),
+          column.columnDef.header?.toString() ?? column.id
+        ] }, column.id))
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs26(Table3, { children: [
+      /* @__PURE__ */ jsx47(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx47(TableRow, { children: hg.headers.map((header) => {
+        const canSort = header.column.getCanSort();
+        const canFilter = header.column.getCanFilter();
+        return /* @__PURE__ */ jsx47(TableHead, { className: "relative select-none", children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs26(
+            "span",
+            {
+              className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
+              onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+              children: [
+                flexRender(header.column.columnDef.header, header.getContext()),
+                canSort && /* @__PURE__ */ jsxs26(Fragment17, { children: [
+                  header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx47(ArrowUp, { size: 14, className: "text-gray-500" }),
+                  header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx47(ArrowDown, { size: 14, className: "text-gray-500" }),
+                  !header.column.getIsSorted() && /* @__PURE__ */ jsx47(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                ] })
+              ]
+            }
+          ),
+          canFilter && /* @__PURE__ */ jsxs26(Popover, { children: [
+            /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+              "span",
+              {
+                role: "presentation",
+                className: "pl-5 cursor-pointer",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsx47(FontAwesomeIcon2, { icon: faEllipsisH, className: "w-5 h-5 text-gray-500" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx47(
+              PopoverContent,
               {
-                className: `${dynamicClass} ${isCellClickable ? "underline cursor-pointer" : ""}`,
-                style: dynamicStyle,
-                onClick: () => {
-                  if (isCellClickable) {
-                    handleCellClick(row.original, cell.column.id);
+                align: "start",
+                sideOffset: 4,
+                className: "w-50 p-3 z-[200] border-gray-300",
+                avoidCollisions: true,
+                children: /* @__PURE__ */ jsxs26(
+                  "form",
+                  {
+                    onSubmit: (e) => {
+                      e.preventDefault();
+                      const formData = new FormData(e.currentTarget);
+                      const value = formData.get("filter");
+                      header.column.setFilterValue(value || void 0);
+                    },
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsx47("label", { htmlFor: "filter", className: "text-xs text-gray-500 font-normal", children: "Filter by value:" }),
+                      /* @__PURE__ */ jsx47(
+                        "input",
+                        {
+                          name: "filter",
+                          placeholder: "Search",
+                          defaultValue: header.column.getFilterValue() ?? "",
+                          className: "border-gray-300 border-1 block p-3 rounded-md text-xs w-full h-9 focus:ring-0 focus:border-gray-300 focus-visible:ring-0 focus-visible:border-gray-300 focus-visible:outline-none mt-2 font-normal",
+                          autoComplete: "off"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx47("div", { className: "justify-end flex", children: /* @__PURE__ */ jsx47(
+                        Button,
+                        {
+                          type: "submit",
+                          className: "py-2 px-3 bg-[#12715B] text-white text-xs h-auto cursor-pointer",
+                          children: "Apply"
+                        }
+                      ) })
+                    ]
                   }
-                },
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
-              },
-              cell.id
-            );
-          }),
-          rowActions.length > 0 && /* @__PURE__ */ jsx47("div", { className: "absolute top-0 right-0 bg-white py-3 min-w-[100px] z-50 shadow-md flex items-center justify-center gap-3 p-2 opacity-0 group-hover:opacity-100 duration-300 h-full", children: rowActions.map((action, index) => /* @__PURE__ */ jsx47("p", { className: "text-[#383838] text-[12px] cursor-pointer font-[400]", children: action.header }, index)) })
-        ]
-      },
-      row.id
-    )) : /* @__PURE__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) }) })
-  ] }) });
+                )
+              }
+            )
+          ] })
+        ] }) }, header.id);
+      }) }, hg.id)) }),
+      /* @__PURE__ */ jsx47(TableBody, { children: loading ? /* @__PURE__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "Loading..." }) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx47(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx47(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx47(TableRow, { children: /* @__PURE__ */ jsx47(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+    ] }),
+    pagination && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
+      /* @__PURE__ */ jsxs26("div", { children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx47(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage?.(),
+            className: "px-2 py-1 border rounded disabled:opacity-50 cursor-pointer",
+            children: "Prev"
+          }
+        ),
+        getPageNumbers(
+          table.getState().pagination.pageIndex + 1,
+          table.getPageCount(),
+          5
+        ).map((pageNum, index) => /* @__PURE__ */ jsx47(
+          "button",
+          {
+            disabled: pageNum === "...",
+            onClick: () => typeof pageNum === "number" && table.setPageIndex(pageNum - 1),
+            className: `px-2 py-1 border rounded ${table.getState().pagination.pageIndex + 1 === pageNum ? "bg-[#12715B] text-white" : "bg-white"} ${pageNum === "..." ? "cursor-default" : "cursor-pointer"}`,
+            children: pageNum
+          },
+          index
+        )),
+        /* @__PURE__ */ jsx47(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage?.(),
+            className: "px-2 py-1 border rounded disabled:opacity-50 cursor-pointer",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 
+// src/components/DataDisplay/Table/Table.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+var Table4 = ({
+  columns,
+  data,
+  rowActions,
+  className,
+  style,
+  pagination = false,
+  paginationMode = "client",
+  itemsPerPage = 10,
+  onPageChange,
+  page,
+  loading = false,
+  totalRecords = 0,
+  ...props
+}) => {
+  const rawColumns = Array.isArray(columns) ? columns : [];
+  const rawData = Array.isArray(data) ? data : [];
+  const isControlled = typeof page === "number";
+  return /* @__PURE__ */ jsx48("div", { className: `${className || ""} space-y-3`, style, children: /* @__PURE__ */ jsx48(
+    DataTable,
+    {
+      ...props,
+      columns: rawColumns,
+      data: rawData,
+      rowActions,
+      loading,
+      pagination,
+      pageSize: itemsPerPage,
+      controlledPageIndex: isControlled ? page - 1 : void 0,
+      onPageChange: (pageIndex, pageSize) => {
+        onPageChange?.({ page: pageIndex + 1, itemsPerPage: pageSize });
+      },
+      paginationMode,
+      totalRecords
+    }
+  ) });
+};
+var Table_default = Table4;
+
 // src/components/ui/pagination.tsx
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "nav",
     {
       role: "navigation",
@@ -28416,7 +28624,7 @@ function PaginationContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -28426,7 +28634,7 @@ function PaginationContent({
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ jsx48("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ jsx49("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -28434,7 +28642,7 @@ function PaginationLink({
   size = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -28463,8 +28671,8 @@ function PaginationPrevious({
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx48(ChevronLeft, {}),
-        /* @__PURE__ */ jsx48("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ jsx49(ChevronLeft, {}),
+        /* @__PURE__ */ jsx49("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -28481,8 +28689,8 @@ function PaginationNext({
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx48("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ jsx48(ChevronRight, {})
+        /* @__PURE__ */ jsx49("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx49(ChevronRight, {})
       ]
     }
   );
@@ -28499,15 +28707,15 @@ function PaginationEllipsis({
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx48(Ellipsis, { className: "size-4" }),
-        /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ jsx49(Ellipsis, { className: "size-4" }),
+        /* @__PURE__ */ jsx49("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
 }
 
 // src/components/DataDisplay/Pagination/Pagination.tsx
-import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 var CustomPagination = ({
   totalPages,
   currentPage,
@@ -28555,7 +28763,7 @@ var CustomPagination = ({
   const pageNumbers = getPageNumbers();
   return /* @__PURE__ */ jsxs28("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
     /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
+      /* @__PURE__ */ jsx50("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
       /* @__PURE__ */ jsxs28(
         Select,
         {
@@ -28564,26 +28772,26 @@ var CustomPagination = ({
             onPageChange({ page: 1, itemsPerPage: Number(value) });
           },
           children: [
-            /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ jsx50(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ jsx50(SelectValue, { placeholder: "Select" }) }),
             /* @__PURE__ */ jsxs28(SelectContent, { children: [
-              /* @__PURE__ */ jsx49(SelectItem, { value: "5", children: "5" }),
-              /* @__PURE__ */ jsx49(SelectItem, { value: "10", children: "10" }),
-              /* @__PURE__ */ jsx49(SelectItem, { value: "20", children: "20" }),
-              /* @__PURE__ */ jsx49(SelectItem, { value: "50", children: "50" })
+              /* @__PURE__ */ jsx50(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ jsx50(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ jsx50(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ jsx50(SelectItem, { value: "50", children: "50" })
             ] })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx49(Pagination, { className: "justify-end", children: /* @__PURE__ */ jsxs28(PaginationContent, { children: [
-      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(Pagination, { className: "justify-end", children: /* @__PURE__ */ jsxs28(PaginationContent, { children: [
+      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(
         PaginationPrevious,
         {
           onClick: () => handlePageChange(currentPage - 1),
           className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
         }
       ) }),
-      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx49(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx49(PaginationEllipsis, {}) : /* @__PURE__ */ jsx49(
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx50(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx50(PaginationEllipsis, {}) : /* @__PURE__ */ jsx50(
         PaginationLink,
         {
           onClick: () => handlePageChange(pageNumber),
@@ -28592,7 +28800,7 @@ var CustomPagination = ({
           children: pageNumber
         }
       ) }, index)),
-      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(
         PaginationNext,
         {
           onClick: () => handlePageChange(currentPage + 1),
@@ -28604,81 +28812,9 @@ var CustomPagination = ({
 };
 var Pagination_default = CustomPagination;
 
-// src/components/DataDisplay/Table/Table.tsx
-import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
-var Table4 = ({
-  columns,
-  data,
-  rowActions,
-  className,
-  style,
-  pagination = false,
-  paginationMode = "client",
-  itemsPerPage = 10,
-  onPageChange,
-  page,
-  loading = false,
-  totalRecords = 0,
-  ...props
-}) => {
-  const rawColumns = Array.isArray(columns) ? columns : [];
-  const rawData = Array.isArray(data) ? data : [];
-  const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const isControlled = typeof page === "number";
-  const [internalPage, setInternalPage] = useState3(1);
-  const currentPage = isControlled ? page : internalPage;
-  useEffect21(() => {
-    if (isControlled) return;
-    if (currentPage > 1 && !pagination) setInternalPage(1);
-  }, [pagination, isControlled]);
-  const enablePagination = pagination && (paginationMode === "server" ? totalRecords > itemsPerPage : rawData.length > itemsPerPage);
-  const handlePageChange = (options) => {
-    if (!isControlled) setInternalPage(options.page);
-    onPageChange?.(options);
-  };
-  const paginatedData = !enablePagination ? rawData : paginationMode === "server" ? rawData : rawData.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
-  const totalPages = enablePagination ? Math.max(
-    1,
-    Math.ceil(
-      (paginationMode === "server" ? totalRecords : rawData.length) / itemsPerPage
-    )
-  ) : 1;
-  const isCellClickEnabled = (row, id) => {
-    const selectedColumn = (columns || [])?.find((col) => col.accessorKey === id);
-    if (!selectedColumn) return false;
-    return selectedColumn.isClickable ?? false;
-  };
-  return /* @__PURE__ */ jsxs29("div", { className: `${className || ""} space-y-3`, style, children: [
-    /* @__PURE__ */ jsx50(
-      DataTable,
-      {
-        ...props,
-        columns: rawColumns,
-        data: paginatedData,
-        rowActions: rawRowActions,
-        loading,
-        cellClickEnabled: isCellClickEnabled
-      }
-    ),
-    enablePagination && /* @__PURE__ */ jsx50(
-      Pagination_default,
-      {
-        perPage: itemsPerPage,
-        totalPages,
-        currentPage,
-        onPageChange: handlePageChange
-      }
-    )
-  ] });
-};
-var Table_default = Table4;
-
 // src/components/Navigation/Tabs/Tabs.tsx
 import Link5 from "next/link";
-import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
   const rawTabs = Array.isArray(tabs) ? tabs : [];
   const baseClasses = "text-[12px] text-foreground p-2 text-center rounded-md transition-colors";
@@ -28691,8 +28827,8 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
   const renderDesktopTab = (tab, index) => {
     const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
-      return /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxs30(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
+      return /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxs29(DropdownMenuTrigger, { className: `${finalClasses} inline-flex items-center gap-1`, children: [
           tab.header,
           /* @__PURE__ */ jsx51(ChevronDown, { className: "h-4 w-4 opacity-80" })
         ] }),
@@ -28717,8 +28853,8 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
     }
     return tab.url ? /* @__PURE__ */ jsx51(Link5, { href: tab.url, className: finalClasses, style: tab.style, children: tab.header }, index) : /* @__PURE__ */ jsx51("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
   };
-  const renderMobileMenu = () => /* @__PURE__ */ jsxs30(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs30(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
+  const renderMobileMenu = () => /* @__PURE__ */ jsxs29(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs29(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
       /* @__PURE__ */ jsx51(Menu, { className: "h-4 w-4" }),
       "Menu"
     ] }),
@@ -28731,7 +28867,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
         children: rawTabs.map((tab, i) => {
           const hasChildren = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
           if (hasChildren) {
-            return /* @__PURE__ */ jsxs30(DropdownMenuSub, { children: [
+            return /* @__PURE__ */ jsxs29(DropdownMenuSub, { children: [
               /* @__PURE__ */ jsx51(DropdownMenuSubTrigger, { className: "flex items-center justify-between cursor-pointer rounded-sm px-3 py-2 text-[13px] text-foreground hover:text-foreground", children: tab.header }),
               /* @__PURE__ */ jsx51(DropdownMenuSubContent, { className: "bg-white border shadow-lg rounded-md p-1", children: tab.children.map((item) => /* @__PURE__ */ jsx51(
                 DropdownMenuItem,
@@ -28759,7 +28895,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
   ] });
   const forceMobile = canvasMode ? canvasMode === "mobile" || canvasMode === "tablet" : void 0;
   const forceDesktop = canvasMode ? canvasMode === "desktop" : void 0;
-  return /* @__PURE__ */ jsxs30("div", { className, style, children: [
+  return /* @__PURE__ */ jsxs29("div", { className, style, children: [
     forceDesktop !== void 0 ? forceDesktop && /* @__PURE__ */ jsx51("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx51("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }) : /* @__PURE__ */ jsx51("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx51("div", { className: `flex gap-2 ${verticalMenu ? "flex-col items-start" : "flex-row"}`, children: rawTabs.map(renderDesktopTab) }) }),
     forceMobile !== void 0 ? forceMobile && /* @__PURE__ */ jsx51("div", { children: renderMobileMenu() }) : /* @__PURE__ */ jsx51("div", { className: "flex md:hidden", children: renderMobileMenu() })
   ] });
@@ -28767,12 +28903,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React6 from "react";
-import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import React7 from "react";
+import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
-  return /* @__PURE__ */ jsx52("div", { className, style, children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
+  return /* @__PURE__ */ jsx52("div", { className, style, children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ jsx52("div", { className: "flex items-center", children: /* @__PURE__ */ jsx52("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx52("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx52("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs31(React6.Fragment, { children: [
+    /* @__PURE__ */ jsx52("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs30(React7.Fragment, { children: [
       /* @__PURE__ */ jsx52(
         "button",
         {
@@ -28795,19 +28931,19 @@ var Spacer = ({ className, style }) => {
 var Spacer_default = Spacer;
 
 // src/components/Navigation/Profile/Profile.tsx
-import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
 
 // src/components/Navigation/Notification/Notification.tsx
-import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
 
 // src/components/Navigation/Logo/Logo.tsx
 import { jsx as jsx56 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx57 } from "react/jsx-runtime";
-var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Root,
   {
     ref,
@@ -28819,7 +28955,7 @@ var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Image,
   {
     ref,
@@ -28828,7 +28964,7 @@ var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -28845,7 +28981,7 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 import Link6 from "next/link";
 import Image3 from "next/image";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { Fragment as Fragment18, jsx as jsx58, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 function Navbar({
   style,
   badgeType,
@@ -28861,7 +28997,7 @@ function Navbar({
   userName = "Guest User"
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
-  return /* @__PURE__ */ jsx58("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ jsxs34("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4", children: [
+  return /* @__PURE__ */ jsx58("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ jsxs33("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4", children: [
     /* @__PURE__ */ jsx58(Link6, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ jsx58(Image3, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx58("span", { className: "font-semibold text-blue-700", children: "Logo" }) }),
     !isMobileView && /* @__PURE__ */ jsx58("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: list.map((item) => /* @__PURE__ */ jsx58(
       Link6,
@@ -28872,8 +29008,8 @@ function Navbar({
       },
       item.id
     )) }),
-    /* @__PURE__ */ jsxs34("div", { className: "flex items-center space-x-3", children: [
-      !isMobileView ? /* @__PURE__ */ jsx58("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs34("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center space-x-3", children: [
+      !isMobileView ? /* @__PURE__ */ jsx58("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs33("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
         /* @__PURE__ */ jsx58(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
         /* @__PURE__ */ jsx58(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
       ] }) }) : /* @__PURE__ */ jsx58(
@@ -28885,14 +29021,14 @@ function Navbar({
           children: /* @__PURE__ */ jsx58(Search, { className: "h-5 w-5 text-gray-400" })
         }
       ),
-      /* @__PURE__ */ jsxs34("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
         /* @__PURE__ */ jsx58(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx58(Bell, { className: "h-5 w-5 text-[#1C1B1F]" }) }),
         badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx58("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ jsx58("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
       ] }),
-      /* @__PURE__ */ jsxs34(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx58(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs34("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxs33(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx58(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center space-x-2", children: [
           !isMobileView && showName && /* @__PURE__ */ jsx58("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: userName }),
-          !isMobileView ? /* @__PURE__ */ jsxs34(Fragment18, { children: [
+          !isMobileView ? /* @__PURE__ */ jsxs33(Fragment18, { children: [
             /* @__PURE__ */ jsx58(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx58(
               AvatarImage,
               {
@@ -28919,9 +29055,9 @@ function Navbar({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs34(DropdownMenuContent, { align: "end", className: "bg-white", children: [
+        /* @__PURE__ */ jsxs33(DropdownMenuContent, { align: "end", className: "bg-white", children: [
           profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: profileMenu.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) }),
-          /* @__PURE__ */ jsxs34("div", { className: "md:hidden", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "md:hidden", children: [
             /* @__PURE__ */ jsx58(DropdownMenuSeparator, {}),
             list && list.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: list.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) })
           ] })
@@ -28933,20 +29069,20 @@ function Navbar({
 
 // src/components/Chart/BarChart.tsx
 import { BarChart, Bar, Area, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
-import { jsx as jsx59, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 var ChartComponent = ({ className, style, ...props }) => {
   const data = Array.isArray(props?.data) ? props.data : [];
   const chartType = props.chartType || "bar";
   const legendsPosition = props.legendsPosition === "middle" || props.legendsPosition === "bottom" ? props.legendsPosition : "top";
-  return /* @__PURE__ */ jsx59("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ jsx59(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs35(BarChart, { data, children: [
+  return /* @__PURE__ */ jsx59("div", { className: `${className} h-[400px]`, style, children: data.length > 0 && /* @__PURE__ */ jsx59(ResponsiveContainer, { width: "100%", height: "100%", children: chartType === "bar" ? /* @__PURE__ */ jsxs34(BarChart, { data, children: [
     /* @__PURE__ */ jsx59(CartesianGrid, { strokeDasharray: "3 3" }),
     /* @__PURE__ */ jsx59(XAxis, { dataKey: "name" }),
     /* @__PURE__ */ jsx59(YAxis, {}),
     /* @__PURE__ */ jsx59(Tooltip, {}),
     /* @__PURE__ */ jsx59(Legend, { verticalAlign: legendsPosition, align: "center" }),
     /* @__PURE__ */ jsx59(Bar, { dataKey: "value", fill: "#00695C" })
-  ] }) : /* @__PURE__ */ jsxs35(AreaChart, { data, children: [
-    /* @__PURE__ */ jsx59("defs", { children: /* @__PURE__ */ jsxs35("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+  ] }) : /* @__PURE__ */ jsxs34(AreaChart, { data, children: [
+    /* @__PURE__ */ jsx59("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id: "colorCount", x1: "0", y1: "0", x2: "0", y2: "1", children: [
       /* @__PURE__ */ jsx59("stop", { offset: "5%", stopColor: "#00695C", stopOpacity: 0.8 }),
       /* @__PURE__ */ jsx59("stop", { offset: "95%", stopColor: "#00695C", stopOpacity: 0 })
     ] }) }),
@@ -28970,7 +29106,7 @@ var BarChart_default = ChartComponent;
 
 // src/components/Chart/PieChart.tsx
 import { PieChart, Pie, Cell, ResponsiveContainer as ResponsiveContainer2, Tooltip as Tooltip2, LabelList } from "recharts";
-import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 var DonutChart = ({ className, style, ...props }) => {
   const data = Array.isArray(props?.data) ? props.data : [];
   const total = data.reduce((sum, d) => sum + d.value, 0);
@@ -28981,7 +29117,7 @@ var DonutChart = ({ className, style, ...props }) => {
   const renderLabel = ({ value, x, y }) => {
     if (value == null) return null;
     const percentage = (Number(value) / total * 100).toFixed(0);
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs35(
       "text",
       {
         x,
@@ -29003,7 +29139,7 @@ var DonutChart = ({ className, style, ...props }) => {
   const wrapperClass = canvasMode ? forceDesktop ? "flex-row" : "flex-col" : "flex-col md:flex-row";
   const renderLegends = () => {
     if (!showLegends) return null;
-    return /* @__PURE__ */ jsx60(Fragment19, { children: data.map((d) => /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsx60(Fragment19, { children: data.map((d) => /* @__PURE__ */ jsxs35(
       "div",
       {
         className: "flex items-center space-x-2 rounded-md border border-gray-200 px-3 py-2 w-[48%] md:w-auto",
@@ -29021,15 +29157,15 @@ var DonutChart = ({ className, style, ...props }) => {
       d.name
     )) });
   };
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: `relative flex items-center ${wrapperClass} ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsxs36("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
-          data.length > 0 && /* @__PURE__ */ jsx60(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs36(PieChart, { children: [
-            /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsxs35("div", { className: "relative w-full md:w-[70%] h-[300px] md:h-[400px] flex items-center justify-center", children: [
+          data.length > 0 && /* @__PURE__ */ jsx60(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs35(PieChart, { children: [
+            /* @__PURE__ */ jsxs35(
               Pie,
               {
                 data,
@@ -29055,7 +29191,7 @@ var DonutChart = ({ className, style, ...props }) => {
             ),
             /* @__PURE__ */ jsx60(Tooltip2, { formatter: (value, name) => [`${value}k`, name] })
           ] }) }),
-          /* @__PURE__ */ jsxs36("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl md:text-4xl font-bold text-[#000]", children: [
             total,
             "k"
           ] })
@@ -29069,9 +29205,9 @@ var DonutChart = ({ className, style, ...props }) => {
 var PieChart_default = DonutChart;
 
 // src/components/Blocks/EmailComposer.tsx
-import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
 function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc, setShowBcc, cc, setCc, bcc, setBcc, subject, setSubject, body, setBody }) {
-  return /* @__PURE__ */ jsx61("div", { className, style, children: /* @__PURE__ */ jsxs37("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
+  return /* @__PURE__ */ jsx61("div", { className, style, children: /* @__PURE__ */ jsxs36("div", { className: "border rounded-md shadow bg-[#fff] p-4 mx-auto z-[50] relative", children: [
     /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsx61(
       "input",
       {
@@ -29081,7 +29217,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
         required: true
       }
     ) }),
-    /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx61("div", { className: "mb-3", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx61(
         "input",
         {
@@ -29141,7 +29277,7 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
       }
     ) }),
     /* @__PURE__ */ jsx61("div", { className: "mb-4", children: /* @__PURE__ */ jsx61(MyEditor, { value: body, onChange: setBody }) }),
-    /* @__PURE__ */ jsxs37("div", { className: "flex justify-end gap-2", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex justify-end gap-2", children: [
       /* @__PURE__ */ jsx61("button", { className: "px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100", children: "Discard" }),
       /* @__PURE__ */ jsx61("button", { className: "px-4 py-2 rounded-md border text-[#12715B] border-[#12715B]", children: "Reset" }),
       /* @__PURE__ */ jsx61("button", { className: "px-4 py-2 rounded-md bg-[#12715B] text-white", children: "Send" })