@apexcura/ui-components 0.0.11-Beta22 → 0.0.11-Beta220

package/dist/index.js

@@ -34,12 +34,16 @@ __export(src_exports, {
   ButtonElement: () => ButtonElement,
   CheckboxElement: () => CheckboxElement,
   CkEditor: () => CkEditor,
+  DatePickerElement: () => DatePickerElement,
   MultipleSelectElement: () => MultipleSelectElement,
+  Navbar: () => Navbar,
   NumberElement: () => NumberElement,
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
+  Sidebar: () => Sidebar,
   SingleSelectElement: () => SingleSelectElement,
+  TableElement: () => TableElement,
   TextElement: () => TextElement,
   TextareaElement: () => TextareaElement
 });
@@ -49,7 +53,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var TextElement = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
       placeholder: props.placeholder,
@@ -62,7 +66,7 @@ var TextElement = (props) => {
       type: props.type,
       status: props.status,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       name: props.name,
       onChange: (e) => props.onChange(e.target.value)
@@ -103,7 +107,7 @@ var NumberElement = (props) => {
     const newValue = e.target.value.replace(/[^0-9]/g, "");
     props.onChange(newValue);
   };
-  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     import_antd3.Input,
     {
       placeholder: props.placeholder,
@@ -115,13 +119,12 @@ var NumberElement = (props) => {
       prefix: props.prefix,
       type: props.type,
       status: props.status,
-      style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       name: props.name,
       onChange: handleInputChange
     }
-  ));
+  );
 };
 
 // src/Components/TextareaElement.tsx
@@ -129,7 +132,7 @@ var import_react4 = __toESM(require("react"));
 var import_antd4 = require("antd");
 var { TextArea } = import_antd4.Input;
 var TextareaElement = (props) => {
-  return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
     TextArea,
     {
       placeholder: props.placeholder,
@@ -138,8 +141,7 @@ var TextareaElement = (props) => {
       disabled: props.disabled,
       id: props.name,
       status: props.status,
-      style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       name: props.name,
       showCount: true,
@@ -177,7 +179,7 @@ var SelectElement = (props) => {
       id: props.name,
       status: props.status,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       variant: props.variant,
       onChange: handleChange
     }
@@ -187,15 +189,46 @@ var SelectElement = (props) => {
 // src/Components/RadioElement.tsx
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
+var radioDefaultStyle = "bg-[#F2F2F2] border border-[#919191] rounded-[8px] m-[10px] hover:bg-[#F2F2F2] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
+var radioSelectedDefaultStyle = "bg-[#E2D6F8] border border-[#B8A4DE] rounded-[8px] p-[6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center text-black shadow-[0px_0px_1px_1px_#919191]";
 var RadioElement = (props) => {
+  const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
+  const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
+  const optionType = props.optionType === "button" ? "button" : void 0;
   const handleChange = (e) => {
+    console.log(e);
+    const selectedVal = e.target.value;
+    const selectedLabel = props.options ? props.options.find((f) => f.value === selectedVal)?.label : "";
+    const selectedOptions = { label: selectedLabel, value: selectedVal };
+    setSelectedValue(selectedVal);
+    setIsDisabled(true);
     if (props.onChange) {
-      const selectedVal = e.target.value;
-      const selectedOptions = [{ id: selectedVal, value: selectedVal }];
       props.onChange(selectedOptions);
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange }, "D"));
+  const getButtonStyle = (option) => {
+    return selectedValue === option.value ? `${radioSelectedDefaultStyle} ${props.activeClassName}` : `${radioDefaultStyle} ${props.className}`;
+  };
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react6.default.createElement("p", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react6.default.createElement(
+    import_antd6.Radio.Group,
+    {
+      onChange: handleChange,
+      optionType,
+      className: props.radioGroupClassName,
+      value: selectedValue
+    },
+    props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
+      import_antd6.Radio,
+      {
+        key: option.value,
+        value: option.value,
+        disabled: isDisabled && selectedValue !== option.value,
+        className: getButtonStyle(option),
+        style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
+      },
+      option.label
+    ))
+  ));
 };
 
 // src/Components/Checkbox.tsx
@@ -229,7 +262,7 @@ var CheckboxElement = (props) => {
       disabled: props.disabled,
       id: props.name,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       onChange: onHandleAllChanges,
       checked: checkAll
     },
@@ -239,7 +272,7 @@ var CheckboxElement = (props) => {
     {
       disabled: props.disabled,
       style: props.styles,
-      className: props.classNames,
+      className: props.className,
       options: plainOptions,
       value: checkedList,
       onChange: handleChange
@@ -266,8 +299,7 @@ var CkEditor = (props) => {
     {
       apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
-        if (editor)
-          editorRef.current = editor;
+        if (editor) editorRef.current = editor;
       },
       initialValue: "<p>This is the initial content of the editor.</p>",
       init: {
@@ -355,127 +387,380 @@ var MultipleSelectElement = (props) => {
 
 // src/Components/Button.tsx
 var import_react12 = __toESM(require("react"));
-var import_antd10 = require("antd");
-var ButtonElement = () => /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, { gap: "small" }, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { type: "primary" }, "Primary Button"));
+var ButtonElement = (props) => {
+  const handleClick = typeof props.action === "string" ? () => {
+    console.log("Performing action:", props.action);
+  } : props.action;
+  return /* @__PURE__ */ import_react12.default.createElement(
+    "button",
+    {
+      onClick: handleClick,
+      className: `${props.className ? props.className : ""}`
+    },
+    props.icon && /* @__PURE__ */ import_react12.default.createElement("img", { src: props.icon }),
+    props.label
+  );
+};
 
 // src/Components/AddMoreTable.tsx
 var import_react13 = __toESM(require("react"));
-var import_antd11 = require("antd");
+var import_antd10 = require("antd");
 var import_icons2 = require("@ant-design/icons");
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
-  const [tableData, setTableData] = (0, import_react13.useState)({});
   const [rows, setRows] = (0, import_react13.useState)(tbody || []);
-  function isColumnType(column) {
-    return column.dataIndex !== void 0;
-  }
-  const onHandleChange = (name, value) => {
-    setTableData((prev) => ({ ...prev, [name]: value }));
-    console.log(tableData);
-  };
   const onHandleRows = () => {
-    const lastRow = rows[rows.length - 1];
-    const newId = lastRow ? lastRow.id + 1 : 1;
-    let newRow;
-    if (lastRow && lastRow.variable_data && lastRow.variable_data.length > 0) {
-      const lastVariable = lastRow.variable_data[lastRow.variable_data.length - 1];
-      const newVariableId = lastVariable.id + 1;
-      newRow = {
-        ...lastRow,
-        id: newId,
-        variable_data: [
-          ...lastRow.variable_data,
-          {
-            id: newVariableId,
-            icon: {}
-          }
-        ]
-      };
-    } else {
-      newRow = {
-        ...lastRow,
-        id: newId
-      };
-    }
+    const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
+    let newRow = {
+      id: newId,
+      label: "Medicine",
+      name: "Medicine",
+      type: "text",
+      element: "single-select",
+      variable_data: [
+        {
+          id: 1,
+          Route: { label: "Route", element: "single-select", type: "text" },
+          Dose: { label: "Dose", element: "single-select", type: "text" },
+          Frequency: { label: "Frequency", element: "single-select", type: "text" },
+          When: { label: "When", element: "textarea", type: "text" },
+          Duration: { label: "Duration", element: "textarea", type: "text" },
+          Instructions: { label: "Instructions", element: "textarea", type: "text" },
+          SubRows: { delete: "delete", add: "plus" }
+        }
+      ]
+    };
     setRows((prevData) => [...prevData, newRow]);
   };
-  const onHandleDelete = (index) => {
-    const remainingRows = rows.filter((eachRow) => eachRow.id !== index);
-    setRows(remainingRows);
+  const onHandleDelete = (id) => {
+    setRows((prevRows) => prevRows.filter((row) => row.id !== id));
   };
-  const onAddVariableData = (rowIndex) => {
+  const onHandleSubRowsAdd = (rowIndex) => {
     setRows((prevRows) => {
       return prevRows.map((row, index) => {
-        if (index === rowIndex && row.variable_data && row.variable_data.length > 0) {
-          const lastVariable = row.variable_data[row.variable_data.length - 1];
-          const newVariableId = lastVariable.id + 1;
+        if (index === rowIndex) {
+          const newSubRow = {
+            id: row.variable_data.length + 1,
+            Route: { label: "Route", element: "single-select", type: "text" },
+            Dose: { label: "Dose", element: "single-select", type: "text" },
+            Frequency: { label: "Frequency", element: "single-select", type: "text" },
+            When: { label: "When", element: "textarea", type: "text" },
+            Duration: { label: "Duration", element: "textarea", type: "text" },
+            Instructions: { label: "Instructions", element: "textarea", type: "text" },
+            SubRows: { delete: "delete", add: "plus" }
+          };
+          const updatedVariableData = [...row.variable_data, newSubRow];
           return {
             ...row,
-            variable_data: [
-              ...row.variable_data,
-              {
-                id: newVariableId,
-                icon: {}
-              }
-            ]
+            variable_data: updatedVariableData
           };
         }
         return row;
       });
     });
   };
-  const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
-    title: eachHeadEl.label,
-    dataIndex: eachHeadEl.name,
-    key: eachHeadEl.id
-  })) : [];
-  const renderInputElement = (element) => {
+  const onHandleSubRowsDelete = (rowIndex, subIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  (0, import_react13.useEffect)(() => {
+    console.log(rows);
+  }, [rows]);
+  const renderInputElement = (element, value) => {
+    if (!element) return null;
     const { element: type, label } = element;
     if (type === "single-select") {
-      return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
+      return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
     } else if (type === "textarea") {
-      return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value) => onHandleChange(label, value) });
+      return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
     } else {
       return null;
     }
   };
-  const dataSource = rows.map((eachRow, index) => {
-    const rowElements = {};
-    if (eachRow.element && eachRow.label) {
-      rowElements[eachRow.label] = renderInputElement(eachRow);
-    }
-    if (eachRow.variable_data && Array.isArray(eachRow.variable_data)) {
-      eachRow.variable_data.forEach((variable) => {
-        Object.entries(variable).forEach(([key, value]) => {
-          if (value && value.element && value.label) {
-            rowElements[value.label] = renderInputElement(value);
-          }
-        });
-      });
-    }
-    return {
-      key: index.toString(),
-      "#": index + 1,
-      ...eachRow,
-      ...rowElements,
-      actions: /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onAddVariableData(index) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)))
+  const dataSource = rows.map((eachRow, rowIndex) => {
+    const rowData = {
+      key: eachRow.id,
+      "#": rowIndex + 1,
+      "Medicine": renderInputElement({
+        element: eachRow.element,
+        label: eachRow.label
+      })
     };
+    eachRow.variable_data.forEach((variable, subIndex) => {
+      Object.keys(variable).forEach((key) => {
+        if (key === "SubRows") {
+          rowData[`${key}`] = /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
+        } else {
+          rowData[`${key}`] = renderInputElement(variable[key]);
+        }
+      });
+    });
+    rowData.actions = /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd10.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
+    console.log("=====rowdata", rowData);
+    return rowData;
   });
-  if (!columns.some((col) => isColumnType(col) && col.dataIndex === "actions")) {
+  const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
+    title: eachHeadEl.label,
+    dataIndex: eachHeadEl.name,
+    key: eachHeadEl.id
+  })) : [];
+  if (!columns.some((col) => col.dataIndex === "actions")) {
     columns.push({
       title: "Actions",
       dataIndex: "actions",
       key: "actions"
     });
   }
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
-    import_antd11.Table,
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_antd10.Table,
     {
       columns,
-      expandable: { defaultExpandedRowKeys: ["0"] },
-      dataSource
+      dataSource,
+      pagination: false,
+      bordered: true
     }
-  ));
+  );
+};
+
+// src/Components/Sidebar.tsx
+var import_react14 = __toESM(require("react"));
+var Sidebar = (props) => {
+  const handleChange = (item) => {
+    if (props.onChange) {
+      props.onChange(item);
+    }
+  };
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react14.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ import_react14.default.createElement("li", { onClick: () => {
+      handleChange(item);
+    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react14.default.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ import_react14.default.createElement("p", null, item.label));
+  })));
+};
+
+// src/Components/Navbar.tsx
+var import_react18 = __toESM(require("react"));
+
+// src/Components/Notification.tsx
+var import_react15 = __toESM(require("react"));
+var import_antd11 = require("antd");
+var import_io = require("react-icons/io");
+var popoverContentStyle = {
+  minWidth: "300px",
+  maxWidth: "100%"
+};
+var Notification = (props) => /* @__PURE__ */ import_react15.default.createElement(
+  import_antd11.Popover,
+  {
+    className: props.className,
+    content: /* @__PURE__ */ import_react15.default.createElement("div", { style: popoverContentStyle }, " ", /* @__PURE__ */ import_react15.default.createElement(
+      import_antd11.List,
+      {
+        itemLayout: "horizontal",
+        dataSource: props.items,
+        renderItem: (item, index) => /* @__PURE__ */ import_react15.default.createElement(import_antd11.List.Item, { key: item.text }, /* @__PURE__ */ import_react15.default.createElement(
+          import_antd11.List.Item.Meta,
+          {
+            avatar: /* @__PURE__ */ import_react15.default.createElement(import_antd11.Avatar, { src: `https://api.dicebear.com/7.x/miniavs/svg?seed=${index}` }),
+            title: item.text,
+            description: item.time
+          }
+        ))
+      }
+    )),
+    trigger: "focus",
+    placement: "bottomRight"
+  },
+  /* @__PURE__ */ import_react15.default.createElement(import_antd11.Button, { className: props.buttonClassName }, /* @__PURE__ */ import_react15.default.createElement(import_antd11.Badge, { size: "small", count: props.count }, /* @__PURE__ */ import_react15.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react15.default.createElement(import_io.IoIosNotifications, null))))
+);
+
+// src/Components/SpanElement.tsx
+var import_react16 = __toESM(require("react"));
+var SpanElement = (props) => /* @__PURE__ */ import_react16.default.createElement("span", { className: props.className }, props.label);
+
+// src/Components/Profile.tsx
+var import_react17 = __toESM(require("react"));
+var import_antd12 = require("antd");
+var import_icons3 = require("@ant-design/icons");
+var Profile = (props) => /* @__PURE__ */ import_react17.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react17.default.createElement(import_antd12.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react17.default.createElement(import_icons3.UserOutlined, null) }), /* @__PURE__ */ import_react17.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react17.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react17.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
+
+// src/Components/Navbar.tsx
+var Navbar = (props) => {
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: `${props.className}`, key: props.name }, props.items && props.items.map((item) => {
+    if (item.element === "span") {
+      return /* @__PURE__ */ import_react18.default.createElement(SpanElement, { ...item });
+    } else if (item.element === "notifications") {
+      return /* @__PURE__ */ import_react18.default.createElement(Notification, { ...item });
+    } else if (item.name === "profile") {
+      return /* @__PURE__ */ import_react18.default.createElement(Profile, { ...item });
+    }
+    return null;
+  }));
+};
+
+// src/Components/TableElement.tsx
+var import_react21 = __toESM(require("react"));
+var import_antd14 = require("antd");
+
+// src/Components/Model.tsx
+var import_react20 = __toESM(require("react"));
+var import_antd13 = require("antd");
+
+// src/Components/ModelBody.tsx
+var import_react19 = __toESM(require("react"));
+var ModelBody = (props) => {
+  return /* @__PURE__ */ import_react19.default.createElement("div", null, props.modalContent && props.modalContent.fields.map((eachField) => {
+    console.log("eachField==========", eachField);
+    if (eachField.element === "div") {
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, eachField.label);
+    } else if (eachField.element === "input-radio") {
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(RadioElement, { ...eachField }));
+    } else if (eachField.element === "button") {
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react19.default.createElement(ButtonElement, { ...eachField }));
+    }
+  }));
+};
+
+// src/Components/Model.tsx
+var ModelElement = (props) => {
+  const { onCancel, model, selectedRecord } = props;
+  return /* @__PURE__ */ import_react20.default.createElement(
+    import_antd13.Modal,
+    {
+      open: model,
+      onCancel,
+      footer: null,
+      width: 700,
+      title: /* @__PURE__ */ import_react20.default.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            padding: "20px",
+            width: "full",
+            margin: "-10px"
+          }
+        },
+        Object.entries(selectedRecord).map(([key, value]) => /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontWeight: "200", padding: "10px" }, key }, /* @__PURE__ */ import_react20.default.createElement("span", { style: { color: "gray", paddingRight: "10px" } }, key), String(value)))
+      )
+    },
+    /* @__PURE__ */ import_react20.default.createElement("p", null, "hkfgbjnkmln "),
+    /* @__PURE__ */ import_react20.default.createElement(ModelBody, { ...props })
+  );
+};
+
+// src/Components/TableElement.tsx
+var TableElement = (props) => {
+  const { thead, tbody } = props;
+  const [selectedRecord, setSelectedRecord] = (0, import_react21.useState)({});
+  const [model, setModel] = (0, import_react21.useState)(false);
+  let columns = [];
+  if (thead) {
+    columns = [
+      {
+        title: "#",
+        dataIndex: "#",
+        key: "#"
+      },
+      ...thead.map((col, ind) => ({
+        title: col.label,
+        dataIndex: col.name,
+        key: col.key,
+        sorter: {
+          compare: (a, b) => {
+            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
+              return a[col.key] - b[col.key];
+            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
+              return a[col.key].localeCompare(b[col.key]);
+            }
+          }
+        }
+      }))
+    ];
+  }
+  const dataSource = tbody && tbody.map((row, index) => ({
+    ...row,
+    [columns[0].key]: index + 1
+  }));
+  return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
+    import_antd14.Table,
+    {
+      dataSource,
+      columns,
+      bordered: true,
+      size: props.size && props.size,
+      onRow: (record) => {
+        return {
+          onClick: () => {
+            setSelectedRecord(record);
+            setModel(true);
+          }
+        };
+      }
+    }
+  ), model && /* @__PURE__ */ import_react21.default.createElement(ModelElement, { selectedStyle: false, style: false, className: void 0, selectedRecord, model, onCancel: () => setModel(false) }));
+};
+
+// src/Components/DatePicker.tsx
+var import_react22 = __toESM(require("react"));
+var import_antd15 = require("antd");
+var import_icons4 = require("@ant-design/icons");
+var import_moment = __toESM(require("moment"));
+var DatePickerElement = (props) => {
+  const [date, setDate] = (0, import_react22.useState)(null);
+  const handleChange = (date2, dateString) => {
+    console.log("date---------", date2);
+    console.log("datestring", dateString);
+    if (date2) {
+      const formattedDate = dateString;
+      console.log("formattedDate-----------------", formattedDate);
+      setDate(date2);
+      console.log("changedDate------------", date2);
+      if (props.onChange) {
+        props.onChange(formattedDate);
+      }
+    } else {
+      setDate(null);
+      if (props.onChange) {
+        props.onChange("");
+      }
+    }
+  };
+  const onHandleDecrement = () => {
+    const currentDate = date || (0, import_moment.default)();
+    const newDate = (0, import_moment.default)(currentDate).subtract(1, "days");
+    setDate(newDate);
+    if (props.onChange) {
+      props.onChange(newDate.format("lll"));
+    }
+  };
+  const onHandleIncrement = () => {
+    const currentDate = date || (0, import_moment.default)();
+    const newDate = (0, import_moment.default)(currentDate).add(1, "days");
+    setDate(newDate);
+    if (props.onChange) {
+      props.onChange(newDate.format("lll"));
+    }
+  };
+  return /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleDecrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.LeftOutlined, null)), /* @__PURE__ */ import_react22.default.createElement(
+    import_antd15.DatePicker,
+    {
+      placeholder: props.placeholder,
+      value: date,
+      variant: "borderless",
+      onChange: handleChange
+    }
+  ), /* @__PURE__ */ import_react22.default.createElement("button", { onClick: onHandleIncrement }, /* @__PURE__ */ import_react22.default.createElement(import_icons4.RightOutlined, null)));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -483,12 +768,16 @@ var AddMoreTable = (props) => {
   ButtonElement,
   CheckboxElement,
   CkEditor,
+  DatePickerElement,
   MultipleSelectElement,
+  Navbar,
   NumberElement,
   PasswordElement,
   RadioElement,
   SelectElement,
+  Sidebar,
   SingleSelectElement,
+  TableElement,
   TextElement,
   TextareaElement
 });