@gnwebsoft/ui 2.18.29 → 2.18.31

package/dist/{chunk-QA44AL2X.js → chunk-7HKMAJKT.js}

@@ -1,8 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/ClearButton/ClearButton.tsx
 var _material = require('@mui/material');
 var _jsxruntime = require('react/jsx-runtime');
-var ClearButton = ({ isSubmitting, handleClear }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { variant: "outlined", onClick: handleClear, disabled: isSubmitting, children: "Clear" });
+var ClearButton = ({ isSubmitting, handleClear, sx }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Button,
+    {
+      variant: "outlined",
+      onClick: handleClear,
+      disabled: isSubmitting,
+      sx,
+      children: "Clear"
+    }
+  );
 };
 var ClearButton_default = ClearButton;
 
@@ -15,7 +24,8 @@ var FilterButton = ({
   isSubmitting,
   show,
   title,
-  icon
+  icon,
+  sx
 }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _lab.LoadingButton,
@@ -26,7 +36,8 @@ var FilterButton = ({
       disabled: !show,
       disableRipple: true,
       sx: {
-        bgcolor: "#3caed7 !important",
+        ...sx,
+        bgcolor: "primary",
         display: "flex",
         alignItems: "center"
       },
@@ -49,11 +60,18 @@ var FilterButton_default = FilterButton;
 
 var _ManageSearch = require('@mui/icons-material/ManageSearch'); var _ManageSearch2 = _interopRequireDefault(_ManageSearch);
 
-var FilterWrapper = ({ children, title }) => {
+var FilterWrapper = ({
+  children,
+  title,
+  cardSx,
+  textSx,
+  icon
+}) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Card,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px",
         mb: 2
@@ -73,12 +91,12 @@ var FilterWrapper = ({ children, title }) => {
               alignItems: "center"
             },
             title: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ManageSearch2.default, { sx: { color: "#4db3a2", height: "2.5rem" } }),
+              icon ? icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ManageSearch2.default, { sx: { color: "primary", height: "2.5rem" } }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _material.Typography,
                 {
                   variant: "h5",
-                  sx: { color: "#4db3a2", fontWeight: "bold" },
+                  sx: { ...textSx, color: "primary", fontWeight: "bold" },
                   children: title
                 }
               )
@@ -103,11 +121,21 @@ var FilterWrapper_default = FilterWrapper;
 
 
 
-var FormWrapper = ({ children, title, editMode }) => {
+
+var FormWrapper = ({
+  children,
+  title,
+  editMode,
+  cardSx,
+  textSx,
+  icon,
+  actionButton
+}) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Card,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px"
       },
@@ -124,7 +152,23 @@ var FormWrapper = ({ children, title, editMode }) => {
                 alignSelf: "center"
               }
             },
-            title: _nullishCoalesce(title, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h5", children: editMode ? `Edit ${title}` : `Create ${title}` })))
+            title: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _material.Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    _nullishCoalesce(icon, () => ( icon)),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })
+                  ] }),
+                  actionButton
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { sx: { mt: 0 } }),
@@ -142,7 +186,9 @@ var LabelText = ({
   label,
   value,
   gridSize,
-  containerSize
+  containerSize,
+  labelSx,
+  valueSx
 }) => {
   const defaultGridSize = {
     labelSize: { xs: 6, sm: 6, md: 6 },
@@ -166,6 +212,7 @@ var LabelText = ({
           {
             size: size.labelSize,
             sx: {
+              ...labelSx,
               padding: "5px",
               fontSize: "14px",
               textAlign: { xs: "left", sm: "right", md: "right" }
@@ -184,9 +231,9 @@ var LabelText = ({
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: value, arrow: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _material.Typography,
               {
-                color: "#3598dc",
-                fontSize: "14px",
                 sx: {
+                  ...valueSx,
+                  fontSize: "14px",
                   wordBreak: "break-word",
                   overflow: "hidden",
                   display: "-webkit-box",
@@ -222,13 +269,18 @@ var ListWrapper = ({
   title,
   count,
   show = true,
-  actionButton
+  actionButton,
+  cardSx,
+  textSx,
+  icon,
+  showCount = true
 }) => {
   if (!show) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _material.Card,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px"
       },
@@ -256,13 +308,17 @@ var ListWrapper = ({
                 },
                 children: [
                   /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ManageSearch2.default, { sx: { color: "#4db3a2", height: "2.5rem" } }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    icon ? icon : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ManageSearch2.default, { sx: { color: "primary", height: "2.5rem" } }),
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                       _material.Typography,
                       {
                         variant: "h5",
-                        sx: { color: "#4db3a2", fontWeight: "bold" },
-                        children: `${title} (${count ? count : 0})`
+                        sx: { ...textSx, color: "primary", fontWeight: "bold" },
+                        children: [
+                          title,
+                          " ",
+                          showCount ? `$(${count ? count : 0})` : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {})
+                        ]
                       }
                     )
                   ] }),
@@ -297,18 +353,13 @@ var SimpleToolbar = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xdatagr
       sx: {
         "& .MuiInputBase-root": {
           borderRadius: "8px",
-          padding: "6px 10px",
-          backgroundColor: "#f6f7f8"
+          padding: "6px 10px"
         },
         "& input": {
           fontSize: "14px",
           color: "#333"
         },
-        borderRadius: "8px",
-        ".css-hzgntl-MuiOutlinedInput-notchedOutline": {
-          borderRadius: "8px",
-          border: "1px solid #efefef !important"
-        }
+        borderRadius: "8px"
       }
     }
   ),

package/dist/{chunk-N3AI2OIO.mjs → chunk-M42TPRCN.mjs}

@@ -1,8 +1,17 @@
 // src/components/ClearButton/ClearButton.tsx
 import { Button } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
-var ClearButton = ({ isSubmitting, handleClear }) => {
-  return /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleClear, disabled: isSubmitting, children: "Clear" });
+var ClearButton = ({ isSubmitting, handleClear, sx }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outlined",
+      onClick: handleClear,
+      disabled: isSubmitting,
+      sx,
+      children: "Clear"
+    }
+  );
 };
 var ClearButton_default = ClearButton;
 
@@ -15,7 +24,8 @@ var FilterButton = ({
   isSubmitting,
   show,
   title,
-  icon
+  icon,
+  sx
 }) => {
   return /* @__PURE__ */ jsx2(
     LoadingButton,
@@ -26,7 +36,8 @@ var FilterButton = ({
       disabled: !show,
       disableRipple: true,
       sx: {
-        bgcolor: "#3caed7 !important",
+        ...sx,
+        bgcolor: "primary",
         display: "flex",
         alignItems: "center"
       },
@@ -49,11 +60,18 @@ import {
 } from "@mui/material";
 import ManageSearchIcon from "@mui/icons-material/ManageSearch";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var FilterWrapper = ({ children, title }) => {
+var FilterWrapper = ({
+  children,
+  title,
+  cardSx,
+  textSx,
+  icon
+}) => {
   return /* @__PURE__ */ jsxs(
     Card,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px",
         mb: 2
@@ -73,12 +91,12 @@ var FilterWrapper = ({ children, title }) => {
               alignItems: "center"
             },
             title: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-              /* @__PURE__ */ jsx3(ManageSearchIcon, { sx: { color: "#4db3a2", height: "2.5rem" } }),
+              icon ? icon : /* @__PURE__ */ jsx3(ManageSearchIcon, { sx: { color: "primary", height: "2.5rem" } }),
               /* @__PURE__ */ jsx3(
                 Typography,
                 {
                   variant: "h5",
-                  sx: { color: "#4db3a2", fontWeight: "bold" },
+                  sx: { ...textSx, color: "primary", fontWeight: "bold" },
                   children: title
                 }
               )
@@ -95,6 +113,7 @@ var FilterWrapper_default = FilterWrapper;
 
 // src/components/FormWrapper/FormWrapper.tsx
 import {
+  Box as Box2,
   Card as Card2,
   CardContent as CardContent2,
   CardHeader as CardHeader2,
@@ -103,11 +122,20 @@ import {
   Typography as Typography2
 } from "@mui/material";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var FormWrapper = ({ children, title, editMode }) => {
+var FormWrapper = ({
+  children,
+  title,
+  editMode,
+  cardSx,
+  textSx,
+  icon,
+  actionButton
+}) => {
   return /* @__PURE__ */ jsxs2(
     Card2,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px"
       },
@@ -124,7 +152,23 @@ var FormWrapper = ({ children, title, editMode }) => {
                 alignSelf: "center"
               }
             },
-            title: title ?? /* @__PURE__ */ jsx4(Typography2, { variant: "h5", children: editMode ? `Edit ${title}` : `Create ${title}` })
+            title: /* @__PURE__ */ jsxs2(
+              Box2,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    icon ?? icon,
+                    /* @__PURE__ */ jsx4(Typography2, { color: "primary", sx: textSx, children: editMode ? `Edit ${title}` : `Create ${title}` })
+                  ] }),
+                  actionButton
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx4(Divider2, { sx: { mt: 0 } }),
@@ -142,7 +186,9 @@ var LabelText = ({
   label,
   value,
   gridSize,
-  containerSize
+  containerSize,
+  labelSx,
+  valueSx
 }) => {
   const defaultGridSize = {
     labelSize: { xs: 6, sm: 6, md: 6 },
@@ -166,6 +212,7 @@ var LabelText = ({
           {
             size: size.labelSize,
             sx: {
+              ...labelSx,
               padding: "5px",
               fontSize: "14px",
               textAlign: { xs: "left", sm: "right", md: "right" }
@@ -184,9 +231,9 @@ var LabelText = ({
             children: /* @__PURE__ */ jsx5(Tooltip, { title: value, arrow: true, children: /* @__PURE__ */ jsx5(
               Typography3,
               {
-                color: "#3598dc",
-                fontSize: "14px",
                 sx: {
+                  ...valueSx,
+                  fontSize: "14px",
                   wordBreak: "break-word",
                   overflow: "hidden",
                   display: "-webkit-box",
@@ -207,7 +254,7 @@ var LabelText_default = LabelText;
 
 // src/components/ListWrapper/ListWrapper.tsx
 import {
-  Box as Box2,
+  Box as Box3,
   Card as Card3,
   CardContent as CardContent3,
   CardHeader as CardHeader3,
@@ -222,13 +269,18 @@ var ListWrapper = ({
   title,
   count,
   show = true,
-  actionButton
+  actionButton,
+  cardSx,
+  textSx,
+  icon,
+  showCount = true
 }) => {
   if (!show) return /* @__PURE__ */ jsx6(Fragment, {});
   return /* @__PURE__ */ jsxs4(
     Card3,
     {
       sx: {
+        ...cardSx,
         position: "relative",
         borderRadius: "0px"
       },
@@ -247,7 +299,7 @@ var ListWrapper = ({
               alignItems: "center"
             },
             title: /* @__PURE__ */ jsxs4(
-              Box2,
+              Box3,
               {
                 sx: {
                   display: "flex",
@@ -255,14 +307,18 @@ var ListWrapper = ({
                   justifyContent: "space-between"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    /* @__PURE__ */ jsx6(ManageSearchIcon2, { sx: { color: "#4db3a2", height: "2.5rem" } }),
-                    /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsxs4(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    icon ? icon : /* @__PURE__ */ jsx6(ManageSearchIcon2, { sx: { color: "primary", height: "2.5rem" } }),
+                    /* @__PURE__ */ jsxs4(
                       Typography4,
                       {
                         variant: "h5",
-                        sx: { color: "#4db3a2", fontWeight: "bold" },
-                        children: `${title} (${count ? count : 0})`
+                        sx: { ...textSx, color: "primary", fontWeight: "bold" },
+                        children: [
+                          title,
+                          " ",
+                          showCount ? `$(${count ? count : 0})` : /* @__PURE__ */ jsx6(Fragment, {})
+                        ]
                       }
                     )
                   ] }),
@@ -288,7 +344,7 @@ import {
   GridToolbarFilterButton,
   GridToolbarQuickFilter
 } from "@mui/x-data-grid";
-import { Box as Box3 } from "@mui/material";
+import { Box as Box4 } from "@mui/material";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SimpleToolbar = () => /* @__PURE__ */ jsxs5(GridToolbarContainer, { children: [
   /* @__PURE__ */ jsx7(
@@ -297,22 +353,17 @@ var SimpleToolbar = () => /* @__PURE__ */ jsxs5(GridToolbarContainer, { children
       sx: {
         "& .MuiInputBase-root": {
           borderRadius: "8px",
-          padding: "6px 10px",
-          backgroundColor: "#f6f7f8"
+          padding: "6px 10px"
         },
         "& input": {
           fontSize: "14px",
           color: "#333"
         },
-        borderRadius: "8px",
-        ".css-hzgntl-MuiOutlinedInput-notchedOutline": {
-          borderRadius: "8px",
-          border: "1px solid #efefef !important"
-        }
+        borderRadius: "8px"
       }
     }
   ),
-  /* @__PURE__ */ jsx7(Box3, { sx: { flexGrow: 1 } }),
+  /* @__PURE__ */ jsx7(Box4, { sx: { flexGrow: 1 } }),
   /* @__PURE__ */ jsx7(GridToolbarColumnsButton, {}),
   /* @__PURE__ */ jsx7(GridToolbarFilterButton, {}),
   /* @__PURE__ */ jsx7(GridToolbarExport, {})