@eztrak/shared 0.6.9 → 0.7.2

package/dist/components/index.js

@@ -30,12 +30,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
+  CustomCellEditor: () => CustomCellEditor,
   CustomPagination: () => CustomPagination,
   EztrakTabs: () => EztrakTabs,
   Loader: () => Loader,
   Modal: () => Modal,
   ResetColumnsButton: () => ResetColumnsButton,
   ResetFiltersButton: () => ResetFiltersButton,
+  SearchInput: () => SearchInput,
   TableLayoutToolbarControls: () => TableLayoutToolbarControls
 });
 module.exports = __toCommonJS(components_exports);
@@ -661,17 +663,132 @@ function ResetFiltersButton({
   );
 }
 
+// src/components/search-filters/SearchInput.tsx
+var import_react2 = require("react");
+var import_fi = require("react-icons/fi");
+var import_react_router_dom3 = require("react-router-dom");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SearchInput({
+  placeholder = "Search...",
+  searchBtn = "",
+  searchClassName = "",
+  searchWrapperClass = "",
+  searchIconClassName = "",
+  defaultParam = "query",
+  showIcon = true,
+  name = "search",
+  type = "search",
+  liveSearch = false,
+  debounceDelay = 500,
+  customIcon = null,
+  defaultValue,
+  ...props
+}) {
+  const [searchParams, setSearchParams] = (0, import_react_router_dom3.useSearchParams)();
+  const queryParam = searchParams.get(defaultParam) || defaultValue || "";
+  const [inputValue, setInputValue] = (0, import_react2.useState)(queryParam);
+  const debounceTimerRef = (0, import_react2.useRef)(null);
+  const updateSearchParams = (searchQuery) => {
+    if (searchQuery?.trim()) {
+      setSearchParams((prev) => {
+        prev.set(defaultParam, searchQuery.trim());
+        return prev;
+      });
+    } else {
+      setSearchParams((prev) => {
+        prev.delete(defaultParam);
+        return prev;
+      });
+    }
+  };
+  const handleSearch = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const searchQuery = formData.get(name);
+    updateSearchParams(String(searchQuery ?? ""));
+  };
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+    setInputValue(value);
+    if (liveSearch) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        updateSearchParams(value);
+      }, debounceDelay);
+    }
+    if (value === "") {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      setInputValue("");
+      updateSearchParams("");
+    }
+  };
+  (0, import_react2.useEffect)(() => {
+    setInputValue(queryParam);
+  }, [queryParam]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "form",
+    {
+      onSubmit: handleSearch,
+      className: cn(
+        "flex items-center justify-between bg-white rounded-xl px-2 h-11 border",
+        searchWrapperClass
+      ),
+      children: [
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "submit",
+            className: cn(
+              "bg-white text-secondary rounded-full flex items-center justify-center w-10 h-10",
+              searchBtn
+            ),
+            children: customIcon ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_fi.FiSearch,
+              {
+                className: cn("h-5 w-5 text-gray-400", searchIconClassName)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            value: inputValue,
+            onChange: handleInputChange,
+            name,
+            type,
+            className: cn("outline-none text-sm w-96", searchClassName),
+            placeholder,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/modal/Modal.tsx
 var import_framer_motion = require("framer-motion");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 var import_fa = require("react-icons/fa");
 var import_io5 = require("react-icons/io5");
 
 // src/components/Loader/Loader.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `loader`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `loader`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       className: `spinner ${className}`,
@@ -688,7 +805,7 @@ var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) =>
 };
 
 // src/components/modal/Modal.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Modal({
   isOpen,
   onClose,
@@ -708,13 +825,13 @@ function Modal({
   customLoader = null,
   footerClassName
 }) {
-  const modalRef = (0, import_react2.useRef)(null);
+  const modalRef = (0, import_react3.useRef)(null);
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget && closeOnBackdropClick) {
       onClose();
     }
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen && closeOnEscape) {
         onClose();
@@ -729,7 +846,7 @@ function Modal({
       document.body.style.overflow = "unset";
     };
   }, [isOpen, onClose, closeOnEscape]);
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-1000 p-4",
@@ -748,7 +865,7 @@ function Modal({
         zIndex
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           import_framer_motion.motion.div,
           {
             ref: modalRef,
@@ -769,7 +886,7 @@ function Modal({
               // Ensure modal doesn't exceed viewport height
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "div",
                 {
                   style: {
@@ -777,43 +894,43 @@ function Modal({
                   },
                   className: "sticky top-0 z-10 flex justify-between items-center bg-white text-2xl p-8 pb-4 rounded-t-3xl",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "font-semibold", children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center space-x-4", children: [
-                      onPrint && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "font-semibold", children: title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center space-x-4", children: [
+                      onPrint && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                         "button",
                         {
                           onClick: onPrint,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fa.FaPrint, { name: "FaPrint" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Print" })
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPrint, { name: "FaPrint" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Print" })
                           ]
                         }
                       ),
-                      onExport && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      onExport && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                         "button",
                         {
                           onClick: onExport,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fa.FaFileExport, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Export" })
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaFileExport, {}),
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Export" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "button",
                         {
                           onClick: onClose,
                           className: "px-2 hover:opacity-70 transition-opacity",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_io5.IoCloseCircleOutline, { color: "#8898AA", size: 25 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_io5.IoCloseCircleOutline, { color: "#8898AA", size: 25 })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "div",
                 {
                   className: cn(
@@ -823,7 +940,7 @@ function Modal({
                   children
                 }
               ),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "div",
                 {
                   className: cn("sticky bottom-0 flex justify-end p-4 space-x-4 border-t bg-white ", footerClassName),
@@ -837,7 +954,7 @@ function Modal({
             ]
           }
         ),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: "fixed inset-0 flex items-center justify-center bg-gray-200/60",
@@ -846,7 +963,7 @@ function Modal({
             "aria-live": "polite",
             role: "status",
             onClick: (e) => e.stopPropagation(),
-            children: customLoader ? customLoader : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader, { size: "48px" })
+            children: customLoader ? customLoader : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader, { size: "48px" })
           }
         )
       ]
@@ -860,14 +977,242 @@ function Modal({
   }
   return (0, import_react_dom.createPortal)(modalContent, modalRoot);
 }
+
+// src/components/cell-editor/CustomCellEditor.tsx
+var import_react4 = require("react");
+var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
+var import_fa2 = require("react-icons/fa");
+
+// src/utils/helpers.ts
+var toDateInputValue = (date) => {
+  if (!date) return "";
+  let d;
+  if (typeof date === "string") {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      return date;
+    }
+    d = new Date(date);
+  } else {
+    d = new Date(date);
+  }
+  if (isNaN(d.getTime())) return "";
+  const localDate = new Date(d.getTime() - d.getTimezoneOffset() * 6e4);
+  const year = localDate.getFullYear();
+  const month = (localDate.getMonth() + 1).toString().padStart(2, "0");
+  const day = localDate.getDate().toString().padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+// src/components/cell-editor/CustomCellEditor.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ButtonSpinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "svg",
+    {
+      className: "animate-spin",
+      width: 8,
+      height: 8,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "white",
+            strokeWidth: "4",
+            strokeOpacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M12 2a10 10 0 0 1 10 10",
+            stroke: "white",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function normalizeInitialValue(initialValue, inputType) {
+  if (inputType === "date" && initialValue != null && initialValue !== "") {
+    return toDateInputValue(String(initialValue));
+  }
+  if (initialValue == null) {
+    return "";
+  }
+  return initialValue;
+}
+var CustomCellEditor = (0, import_react4.forwardRef)(
+  ({
+    value: initialValue,
+    name,
+    inputType = "text",
+    stopEditing,
+    entityId,
+    entityName = "Record",
+    onSave,
+    dropdownOptions = []
+  }, ref) => {
+    const normalizedInitial = normalizeInitialValue(initialValue, inputType);
+    const [value, setValue] = (0, import_react4.useState)(normalizedInitial);
+    const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+    const inputRef = (0, import_react4.useRef)(null);
+    const selectRef = (0, import_react4.useRef)(null);
+    (0, import_react4.useImperativeHandle)(ref, () => ({
+      getValue: () => value,
+      isCancelBeforeStart: () => false,
+      isCancelAfterEnd: () => false
+    }));
+    (0, import_react4.useEffect)(() => {
+      if (inputType === "dropdown") {
+        const el2 = selectRef.current;
+        if (el2) {
+          el2.focus();
+        }
+        return;
+      }
+      const el = inputRef.current;
+      if (!el) {
+        return;
+      }
+      el.focus();
+      if (inputType !== "date") {
+        el.select();
+      }
+    }, [inputType]);
+    const handleSave = async () => {
+      if (isLoading) {
+        return;
+      }
+      if (String(value) === String(normalizedInitial)) {
+        stopEditing();
+        return;
+      }
+      if (!entityId) {
+        import_react_hot_toast2.default.error("Entity ID is required");
+        return;
+      }
+      if (!name) {
+        import_react_hot_toast2.default.error("Property name is required");
+        return;
+      }
+      setIsLoading(true);
+      const payloadValue = inputType === "number" && value !== "" ? parseFloat(String(value)) : value;
+      const payload = {
+        propertyName: name,
+        propertyValue: payloadValue,
+        entityId,
+        entityName
+      };
+      try {
+        await onSave(payload);
+        import_react_hot_toast2.default.success("Record updated successfully");
+        stopEditing();
+      } catch (error) {
+        console.error("Update error:", error);
+        const errorMessage = error instanceof Error ? error.message : "Failed to update record";
+        import_react_hot_toast2.default.error(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const handleCancel = () => {
+      setValue(normalizedInitial);
+      stopEditing();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleSave();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        handleCancel();
+      }
+    };
+    const handleInputChange = (event) => {
+      let newValue = event.target.value;
+      if (inputType === "number") {
+        newValue = newValue.replace(/[^0-9.-]/g, "");
+      }
+      setValue(newValue);
+    };
+    const handleDropdownChange = (event) => {
+      setValue(event.target.value);
+    };
+    const isSaveDisabled = isLoading || String(value) === String(normalizedInitial);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center w-full h-full min-h-0 overflow-hidden gap-0.5 min-w-[80px]", children: [
+      inputType === "dropdown" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "select",
+        {
+          ref: selectRef,
+          value: String(value),
+          onChange: handleDropdownChange,
+          onKeyDown: handleKeyDown,
+          className: "flex-1 h-full p-0 text-[10px] border border-gray-300 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-400 min-w-0 truncate",
+          disabled: isLoading,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
+            dropdownOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          type: inputType,
+          value: String(value),
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          className: "flex-1 h-full p-0 text-[10px] border border-gray-300 rounded-sm focus:outline-none focus:ring-1 focus:ring-blue-400 min-w-0 truncate",
+          placeholder: "...",
+          disabled: isLoading
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center shrink-0 gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleSave,
+            disabled: isSaveDisabled,
+            className: "flex items-center justify-center w-4 h-4 text-white bg-green-500 rounded-sm hover:bg-green-600 disabled:opacity-50",
+            title: "Save (Enter)",
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonSpinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa2.FaCheck, { size: 7, "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleCancel,
+            disabled: isLoading,
+            className: "flex items-center justify-center w-4 h-4 text-white bg-red-500 rounded-sm hover:bg-red-600 disabled:opacity-50",
+            title: "Cancel (Escape)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fa2.FaTimes, { size: 7, "aria-hidden": true })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+CustomCellEditor.displayName = "CustomCellEditor";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CustomCellEditor,
   CustomPagination,
   EztrakTabs,
   Loader,
   Modal,
   ResetColumnsButton,
   ResetFiltersButton,
+  SearchInput,
   TableLayoutToolbarControls
 });
 //# sourceMappingURL=index.js.map