@solidstarters/solid-core-ui 1.1.11 → 1.1.13

package/src/components/core/module/CreateModule.tsx

@@ -375,7 +375,7 @@ const CreateModule = ({ data }: any) => {
   return (
     <div className="solid-form-wrapper">
       <Toast ref={toast} />
-      <form onSubmit={formik.handleSubmit}>
+      <form style={{ width: '77.5%', borderRight: '1px solid var(--primary-light-color' }} onSubmit={formik.handleSubmit}>
         <div className="solid-form-header">
           {pathname.includes('new') ?
             <>
@@ -410,197 +410,195 @@ const CreateModule = ({ data }: any) => {
           <SolidFormStepper />
         </div>
         <div className="p-4 solid-form-content">
-          <div className="grid">
-            <div className="col-8 mx-auto">
-              <p className="form-wrapper-heading text-base">Basic Info</p>
-              <div className="formgrid grid">
-                <div className="field col-6 flex flex-column gap-2">
-                  <label htmlFor="displayName" className="form-field-label">
-                    Display Name <span style={{ color: 'red' }}>*</span>
-                  </label>
-                  <InputText
-                    disabled={data ? true : false}
-                    type="text"
-                    id="displayName"
-                    name="displayName"
-                    // onChange={formik.handleChange}
-                    onChange={(e) => {
-                      formik.handleChange(e);
-                      const { toKebabCase, toSnakeCase, toPluralCamelCase } = getSingularAndPlural(e.target.value);
-                      if (pathname.includes('new')) {
-                        formik.setFieldValue("name", toKebabCase);
-                      }
-
-                    }}
-                    value={formik.values.displayName}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "displayName"),
-                    })}
-                  />
-                  {isFormFieldValid(formik, "displayName") && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.displayName?.toString()}
-                    />
-                  )}
-                </div>
-                <div className="field col-6 flex flex-column gap-2">
-                  <label htmlFor="name" className="form-field-label">
-                    Name <span style={{ color: 'red' }}>*</span>
-                  </label>
-                  <InputText
-                    disabled
-                    type="text"
-                    id="name"
-                    name="name"
-                    onChange={formik.handleChange}
-                    value={formik.values.name}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "name"),
-                    })}
-                  />
-                  {isFormFieldValid(formik, "name") && (
-                    <Message severity="error" text={formik?.errors?.name?.toString()} />
-                  )}
-                </div>
-              </div>
-              <div className="formgrid grid mt-4">
-                <div className="field col-6 flex flex-column gap-2">
-                  <label htmlFor="description" className="form-field-label">
-                    Menu Sequence Number
-                  </label>
-                  <InputText
-                    id="menuSequenceNumber"
-                    type="number"
-                    onChange={formik.handleChange}
-                    min={0}
-                    value={formik.values.menuSequenceNumber}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "menuSequenceNumber"),
-                    })}
-                  />
-                  {isFormFieldValid(formik, "menuSequenceNumber") && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.menuSequenceNumber?.toString()}
-                    />
-                  )}
-                </div>
-                <div className="field col-6 flex flex-column gap-2">
-                  <label htmlFor="description" className="form-field-label">
-                    Description <span style={{ color: 'red' }}>*</span>
-                  </label>
-                  <InputTextarea
-                    id="description"
-                    name="description"
-                    onChange={formik.handleChange}
-                    value={formik.values.description}
-                    className={classNames("", {
-                      "p-invalid": isFormFieldValid(formik, "description"),
-                    })}
-                    rows={5}
-                    cols={30}
-                  />
-                  {isFormFieldValid(formik, "description") && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.description?.toString()}
-                    />
-                  )}
-                </div>
+          <p className="form-wrapper-heading text-base">Basic Info</p>
+          <div className="formgrid grid">
+            <div className="field col-6 flex flex-column gap-2">
+              <label htmlFor="displayName" className="form-field-label">
+                Display Name <span style={{ color: 'red' }}>*</span>
+              </label>
+              <InputText
+                disabled={data ? true : false}
+                type="text"
+                id="displayName"
+                name="displayName"
+                // onChange={formik.handleChange}
+                onChange={(e) => {
+                  formik.handleChange(e);
+                  const { toKebabCase, toSnakeCase, toPluralCamelCase } = getSingularAndPlural(e.target.value);
+                  if (pathname.includes('new')) {
+                    formik.setFieldValue("name", toKebabCase);
+                  }
+
+                }}
+                value={formik.values.displayName}
+                className={classNames("", {
+                  "p-invalid": isFormFieldValid(formik, "displayName"),
+                })}
+              />
+              {isFormFieldValid(formik, "displayName") && (
+                <Message
+                  severity="error"
+                  text={formik?.errors?.displayName?.toString()}
+                />
+              )}
+            </div>
+            <div className="field col-6 flex flex-column gap-2">
+              <label htmlFor="name" className="form-field-label">
+                Name <span style={{ color: 'red' }}>*</span>
+              </label>
+              <InputText
+                disabled
+                type="text"
+                id="name"
+                name="name"
+                onChange={formik.handleChange}
+                value={formik.values.name}
+                className={classNames("", {
+                  "p-invalid": isFormFieldValid(formik, "name"),
+                })}
+              />
+              {isFormFieldValid(formik, "name") && (
+                <Message severity="error" text={formik?.errors?.name?.toString()} />
+              )}
+            </div>
+          </div>
+          <div className="formgrid grid mt-4">
+            <div className="field col-6 flex flex-column gap-2">
+              <label htmlFor="description" className="form-field-label">
+                Menu Sequence Number
+              </label>
+              <InputText
+                id="menuSequenceNumber"
+                type="number"
+                onChange={formik.handleChange}
+                min={0}
+                value={formik.values.menuSequenceNumber}
+                className={classNames("", {
+                  "p-invalid": isFormFieldValid(formik, "menuSequenceNumber"),
+                })}
+              />
+              {isFormFieldValid(formik, "menuSequenceNumber") && (
+                <Message
+                  severity="error"
+                  text={formik?.errors?.menuSequenceNumber?.toString()}
+                />
+              )}
+            </div>
+            <div className="field col-6 flex flex-column gap-2">
+              <label htmlFor="description" className="form-field-label">
+                Description <span style={{ color: 'red' }}>*</span>
+              </label>
+              <InputTextarea
+                id="description"
+                name="description"
+                onChange={formik.handleChange}
+                value={formik.values.description}
+                className={classNames("", {
+                  "p-invalid": isFormFieldValid(formik, "description"),
+                })}
+                rows={5}
+                cols={30}
+              />
+              {isFormFieldValid(formik, "description") && (
+                <Message
+                  severity="error"
+                  text={formik?.errors?.description?.toString()}
+                />
+              )}
+            </div>
+          </div>
+          <Divider />
+          <p className="form-wrapper-heading text-base" style={{ fontSize: 16 }}>Configurations</p>
+          <div className="formgrid grid">
+            <div className="field col-6 flex flex-column gap-2">
+              <label htmlFor="defaultDataSource" className="form-field-label">
+                Default Data Source
+              </label>
+              <SingleSelectAutoCompleteField
+                disabled={data ? true : false}
+                key="defaultDataSource"
+                formik={formik}
+                isFormFieldValid={isFormFieldValid}
+                // relationField={false}
+                fieldName="defaultDataSource"
+                fieldNameId={null}
+                labelKey="label"
+                valueKey="value"
+                searchData={serachDDefaultDataSource}
+                existingData={formik.values.defaultDataSource}
+              />
+              {isFormFieldValid(formik, "defaultDataSource") && (
+                <Message
+                  severity="error"
+                  text={formik?.errors?.defaultDataSource?.toString()}
+                />
+              )}
+            </div>
+            <div className="field col-6 flex flex-column gap-2">
+              <label htmlFor="menuIconUrl" className="form-label form-field-label">
+                Menu Icon <small className="text-red-500 helper-text">(only svg, png and jpeg are allowed)</small>
+              </label>
+              <div {...getRootPropsmenuIcon()} className="solid-dropzone-wrapper">
+                <input {...getInputPropsmenuIcon()} />
+                <DropzonePlaceholder />
               </div>
-              <Divider />
-              <p className="form-wrapper-heading text-base" style={{ fontSize: 16 }}>Configurations</p>
-              <div className="formgrid grid">
-                <div className="field col-6 flex flex-column gap-2">
-                  <label htmlFor="defaultDataSource" className="form-field-label">
-                    Default Data Source
-                  </label>
-                  <SingleSelectAutoCompleteField
-                    disabled={data ? true : false}
-                    key="defaultDataSource"
-                    formik={formik}
-                    isFormFieldValid={isFormFieldValid}
-                    // relationField={false}
-                    fieldName="defaultDataSource"
-                    fieldNameId={null}
-                    labelKey="label"
-                    valueKey="value"
-                    searchData={serachDDefaultDataSource}
-                    existingData={formik.values.defaultDataSource}
-                  />
-                  {isFormFieldValid(formik, "defaultDataSource") && (
-                    <Message
-                      severity="error"
-                      text={formik?.errors?.defaultDataSource?.toString()}
-                    />
-                  )}
-                </div>
-                <div className="field col-6 flex flex-column gap-2">
-                  <label htmlFor="menuIconUrl" className="form-label form-field-label">
-                    Menu Icon <small className="text-red-500 helper-text">(only svg, png and jpeg are allowed)</small>
-                  </label>
-                  <div {...getRootPropsmenuIcon()} className="solid-dropzone-wrapper">
-                    <input {...getInputPropsmenuIcon()} />
-                    <DropzonePlaceholder />
-                  </div>
-                  {isFormFieldValid(formik, "menuIconUrl") && (
-                    <Message severity="error" text={formik?.errors?.menuIconUrl?.toString()} />
-                  )}
-
-                  {fileDetails && (
-                    <div className="solid-file-upload-wrapper">
-                      <div className="flex align-items-center gap-2">
-                        <FileReaderExt fileDetails={fileDetails} />
-                        <div className="w-full flex flex-column gap-1">
-                          <div className="flex align-items-center justify-content-between">
-                            <div className="font-bold">{fileDetails.name}</div>
-                            <div className="cancel-upload-button" onClick={handleCancelUpload}>
-                              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
-                                <path d="M0.6 6L0 5.4L2.4 3L0 0.6L0.6 0L3 2.4L5.4 0L6 0.6L3.6 3L6 5.4L5.4 6L3 3.6L0.6 6Z" fill="#4B4D52" />
-                              </svg>
-                            </div>
-                          </div>
-                          {
-                            uploadCompleted ?
-                              <div className="flex align-items-center gap-2 text-sm">
-                                {totalSize} of {totalSize}
-                                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
-                                  <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
-                                </svg>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                                  <mask id="mask0_2480_8635" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
-                                    <rect width="20" height="20" fill="#D9D9D9" />
-                                  </mask>
-                                  <g mask="url(#mask0_2480_8635)">
-                                    <path d="M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 6.295 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z" fill="#722ED1" />
-                                  </g>
-                                </svg>
-                                Completed
-                              </div>
-                              :
-                              <div className="flex align-items-center gap-2 text-sm">
-                                {uploadedSize} of {totalSize}
-                                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
-                                  <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
-                                </svg>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                  <path d="M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z" fill="black" />
-                                </svg>
-                                Uploading ${uploadProgress}% Completed
-                              </div>
-                          }
+              {isFormFieldValid(formik, "menuIconUrl") && (
+                <Message severity="error" text={formik?.errors?.menuIconUrl?.toString()} />
+              )}
+
+              {fileDetails && (
+                <div className="solid-file-upload-wrapper">
+                  <div className="flex align-items-center gap-2">
+                    <FileReaderExt fileDetails={fileDetails} />
+                    <div className="w-full flex flex-column gap-1">
+                      <div className="flex align-items-center justify-content-between">
+                        <div className="font-bold">{fileDetails.name}</div>
+                        <div className="cancel-upload-button" onClick={handleCancelUpload}>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
+                            <path d="M0.6 6L0 5.4L2.4 3L0 0.6L0.6 0L3 2.4L5.4 0L6 0.6L3.6 3L6 5.4L5.4 6L3 3.6L0.6 6Z" fill="#4B4D52" />
+                          </svg>
                         </div>
                       </div>
-                      <ProgressBar value={uploadProgress} showValue={false} style={{ height: 4 }} className="mt-2" />
+                      {
+                        uploadCompleted ?
+                          <div className="flex align-items-center gap-2 text-sm">
+                            {totalSize} of {totalSize}
+                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                              <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                              <mask id="mask0_2480_8635" style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+                                <rect width="20" height="20" fill="#D9D9D9" />
+                              </mask>
+                              <g mask="url(#mask0_2480_8635)">
+                                <path d="M9.16 12.76L13.39 8.53L12.55 7.69L9.16 11.08L7.45 9.37L6.61 10.21L9.16 12.76ZM10 16C9.17 16 8.39 15.8424 7.66 15.5272C6.93 15.2124 6.295 14.785 5.755 14.245C5.215 13.705 4.7876 13.07 4.4728 12.34C4.1576 11.61 4 10.83 4 10C4 9.17 4.1576 8.39 4.4728 7.66C4.7876 6.93 5.215 6.295 5.755 5.755C6.295 5.215 6.93 4.7874 7.66 4.4722C8.39 4.1574 9.17 4 10 4C10.83 4 11.61 4.1574 12.34 4.4722C13.07 4.7874 13.705 5.215 14.245 5.755C14.785 6.295 15.2124 6.93 15.5272 7.66C15.8424 8.39 16 9.17 16 10C16 10.83 15.8424 11.61 15.5272 12.34C15.2124 13.07 14.785 13.705 14.245 14.245C13.705 14.785 13.07 15.2124 12.34 15.5272C11.61 15.8424 10.83 16 10 16Z" fill="#722ED1" />
+                              </g>
+                            </svg>
+                            Completed
+                          </div>
+                          :
+                          <div className="flex align-items-center gap-2 text-sm">
+                            {uploadedSize} of {totalSize}
+                            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                              <circle cx="2" cy="2" r="2" fill="#C1C1C1" />
+                            </svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                              <path d="M7.375 10.5V5.40625L5.75 7.03125L4.875 6.125L8 3L11.125 6.125L10.25 7.03125L8.625 5.40625V10.5H7.375ZM4.25 13C3.90625 13 3.61198 12.8776 3.36719 12.6328C3.1224 12.388 3 12.0938 3 11.75V9.875H4.25V11.75H11.75V9.875H13V11.75C13 12.0938 12.8776 12.388 12.6328 12.6328C12.388 12.8776 12.0938 13 11.75 13H4.25Z" fill="black" />
+                            </svg>
+                            Uploading ${uploadProgress}% Completed
+                          </div>
+                      }
                     </div>
-                  )}
+                  </div>
+                  <ProgressBar value={uploadProgress} showValue={false} style={{ height: 4 }} className="mt-2" />
                 </div>
-              </div>
+              )}
             </div>
           </div>
         </div>
       </form>
+      <div style={{ width: '22.5%' }}>
+      </div>
     </div>
   );
 };

package/src/components/layout/AppSidebar.tsx

@@ -80,6 +80,36 @@ const AppSidebar = () => {
         };
     }, [isSearchShow]);
 
+    const additionalMenu = {
+        title: "General Settings",
+        key: "general-settings",
+        children: [
+            {
+                title: "Settings",
+                path: "",
+                key: "settings-menu-item",
+                children: [
+                    {
+                        title: "App Settings",
+                        path: "/admin/settings/app-settings",
+                        key: "app-setting"
+                    },
+                    {
+                        title: "Authentication Settings",
+                        path: "/admin/settings/authentication-settings",
+                        key: "auth-setting"
+                    },
+                    {
+                        title: "Misc",
+                        path: "/admin/settings/misc-settings",
+                        key: "misc-setting"
+                    }
+                ]
+            }
+        ],
+        icon: "/images/Navigation/settings.png" // Default icon (optional)
+    };
+    const updatedMenuData = menu?.data ? [...menu.data, additionalMenu] : [additionalMenu];
 
 
     return (
@@ -91,7 +121,7 @@ const AppSidebar = () => {
                 <div
                     className={`sidebar-toggle-button ${!visibleNavbar ? "s-collapsed" : ""}`}
                     onClick={handleToggle}
-                    // severity="secondary"
+                // severity="secondary"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                         <rect x="0.3" y="0.3" width="23.4" height="23.4" rx="2.1" fill="white" />
@@ -104,7 +134,7 @@ const AppSidebar = () => {
 
             <div className="sidebar-left">
                 <div className="navbar-menu">
-                    {menu && menu.data.length > 0 && menu.data.map((m: any) => (
+                    {updatedMenuData.length > 0 && updatedMenuData.map((m: any) => (
                         <div
                             key={m.title}
                             className={`menu-item ${currentMainMenu === m.title ? "active-menu-image" : ""}`}
@@ -112,20 +142,15 @@ const AppSidebar = () => {
                             <a onClick={() => handleMenu(m)}>
                                 {m.icon ?
                                     <img
-                                        style={{ cursor: "pointer", width: '30px' , mixBlendMode: "multiply"}}
-                                        // src={currentMainMenu === m.title ? `/images/${m.title.toLocaleLowerCase()}-active.svg` : `/images/${m.title.toLocaleLowerCase()}.svg`}
-                                        // src={`/images/menu/${m.title}.svg`}
+                                        style={{ cursor: "pointer", width: '30px', mixBlendMode: "multiply" }}
                                         src={(m.icon && m.icon.startsWith("/")) ? m.icon : `${process.env.API_URL}/${m.icon}`}
-                                        // src={`/images/menu/app-builder.svg`}
-                                        alt="Solid"
+                                        alt={m.title}
                                     />
                                     :
                                     <img
                                         style={{ cursor: "pointer", width: '30px' }}
-                                        // src={currentMainMenu === m.title ? `/images/${m.title.toLocaleLowerCase()}-active.svg` : `/images/${m.title.toLocaleLowerCase()}.svg`}
-                                        // src={`/images/menu/${m.title}.svg`}
                                         src={`/images/menu/app-builder.svg`}
-                                        alt="Solid"
+                                        alt={m.title}
                                     />
                                 }
                             </a>

package/src/components/layout/navbar-two-menu.tsx

@@ -11,8 +11,13 @@ const NavbarTwoMenu = ({ menuItems }: any) => {
     const [expandedKeys, setExpandedKeys] = useState<any>({});
     const itemRenderer = (item: any, options: any) => {
         const currentItem = item?.url?.split('/').slice(-2, -1)[0];
+        const isSettingsPage = pathname.includes('/settings/') && item?.url?.includes('/settings/')
+        ? pathname === item?.url // Exact match check for settings pages
+        : currentItem === activeParentPath
+
+    // currentItem === activeParentPath ?' p-highlight' : ''
         return (
-            <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-3 ${currentItem === activeParentPath ? ' p-highlight' : ''}`} onClick={options.onClick}>
+            <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-3 ${isSettingsPage ? ' p-highlight' : ''}`} onClick={options.onClick}>
                 <Link href={item?.url ? item?.url : '#'} className="w-full flex justify-content-between font-medium">
                     <div className="flex align-items-center gap-3">
                         <span className={item.icon} />

package/src/components/layout/user-profile-menu.tsx

@@ -11,6 +11,8 @@ import { toggleTheme } from "@/redux/features/themeSlice";
 import { InputSwitch } from "primereact/inputswitch";
 import { Button } from "primereact/button";
 import { useRouter } from "next/navigation";
+import { Dialog } from "primereact/dialog";
+import { Divider } from "primereact/divider";
 
 const UserProfileMenu = () => {
   const router = useRouter();
@@ -18,9 +20,10 @@ const UserProfileMenu = () => {
   // const { user } = useAppSelector((state) => state.auth);
   const { changeTheme } = useContext(PrimeReactContext);
   const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
-  const { theme } = useSelector((state:any) => state.theme); // Get current theme from Redux
-  const { user } = useSelector((state:any) => state.auth);
+  const { theme } = useSelector((state: any) => state.theme); // Get current theme from Redux
+  const { user } = useSelector((state: any) => state.auth);
   const [checked, setChecked] = useState(theme === "dark");
+  const [confirmLogout, setConfirmLogout] = useState(false);
   const dispatch = useDispatch();
   const op = useRef(null);
   const logoutHandler = () => {
@@ -79,9 +82,6 @@ const UserProfileMenu = () => {
             </div>
             <InputSwitch checked={checked} onChange={handleThemeToggle} />
           </div>
-          <div className="p-2">
-            <Button icon="pi pi-cog" label="General Settings" size="small" text severity="secondary" className="w-full text-left gap-2" onClick={()=>router.push("/admin/settings") }/>
-          </div>
           <div className="user-profile-body p-3">
             <Button
               text
@@ -92,13 +92,25 @@ const UserProfileMenu = () => {
                   <path d="M3.75 15.75C3.3375 15.75 2.98438 15.6031 2.69063 15.3094C2.39687 15.0156 2.25 14.6625 2.25 14.25V3.75C2.25 3.3375 2.39687 2.98438 2.69063 2.69063C2.98438 2.39687 3.3375 2.25 3.75 2.25H9V3.75H3.75V14.25H9V15.75H3.75ZM12 12.75L10.9688 11.6625L12.8813 9.75H6.75V8.25H12.8813L10.9688 6.3375L12 5.25L15.75 9L12 12.75Z" fill="#F04A4A" />
                 </svg>
               }
-              onClick={e => logoutHandler()}
+              onClick={() => setConfirmLogout(true)}
               label="Logout"
             />
           </div>
         </OverlayPanel>
-      </div >
-    </div >
+      </div>
+      <Dialog header="Logout" headerClassName="py-2" contentClassName="px-0 pb-0" visible={confirmLogout} style={{ width: '20vw' }} onHide={() => { if (!confirmLogout) return; setConfirmLogout(false); }}>
+        <Divider className="m-0" />
+        <div className="p-4">
+          <p className="m-0 solid-primary-title" style={{ fontSize: 16 }}>
+            Are you sure you want to log out?
+          </p>
+          <div className="flex align-items-center gap-2 mt-3">
+            <Button label="Logout" size="small" onClick={e => logoutHandler()} />
+            <Button label="Cancel" size="small" onClick={() => setConfirmLogout(false)} outlined />
+          </div>
+        </div>
+      </Dialog>
+    </div>
   );
 };
 

package/src/helpers/AppTitle.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const AppTitle = ({ title }: { title: any }) => {
+    const appTitle = title ? title?.data?.appTitle : "Solid Starters";
+    return (
+        <div>
+            <p className="solid-logo-title">
+                {appTitle?.split(" ").map((word: string, index: number) => (
+                    <div key={index}>{word}</div>
+                ))}
+            </p>
+        </div>
+    )
+}

package/src/index.ts

@@ -366,6 +366,7 @@ export type { Product } from '@/components/tables/ListViewTable';
 
 export { ToastContainer, handleError, handleSuccess } from '@/helpers/ToastContainer';
 export { getAuthCookieName, getAuthHeader } from '@/helpers/authHeader';
+export { AppTitle } from '@/helpers/AppTitle'
 // export * from '@/helpers/countries';
 export { addCommasToAmount, calculateDaysOfStay, getSingularAndPlural } from '@/helpers/helpers';
 // export * from '@/helpers/menu';
@@ -417,7 +418,7 @@ export { revalidateTag } from '@/helpers/revalidate';
 // │   └── userSlice.ts
 // ├── hooks.ts
 // export * from '@/redux/api/articleApi';
-export { authApi, useForgotPasswordMutation, useRegisterMutation, useRegisterPrivateMutation, useResetPasswordMutation, useUpdateUserMutation ,useInitateLoginMutation, useConfirmOtpLoginMutation, useInitateRegisterMutation, useConfirmOtpRegisterMutation,} from '@/redux/api/authApi';
+export { authApi, useForgotPasswordMutation, useRegisterMutation, useRegisterPrivateMutation, useResetPasswordMutation, useUpdateUserMutation, useInitateLoginMutation, useConfirmOtpLoginMutation, useInitateRegisterMutation, useConfirmOtpRegisterMutation, } from '@/redux/api/authApi';
 // export * from '@/redux/api/automationApi';
 // export * from '@/redux/api/categoryApi';
 // export * from '@/redux/api/cityApi';

package/dist/components/common/FilterComponent.d.ts

@@ -1,3 +0,0 @@
-declare const FilterComponent: () => import("react/jsx-runtime").JSX.Element;
-export default FilterComponent;
-//# sourceMappingURL=FilterComponent.d.ts.map

package/dist/components/common/FilterComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FilterComponent.d.ts","sourceRoot":"","sources":["../../../src/components/common/FilterComponent.tsx"],"names":[],"mappings":"AAuRA,QAAA,MAAM,eAAe,+CAkJpB,CAAC;AAEF,eAAe,eAAe,CAAC"}