From 373cfc5ae0eb04bf27b672dc8adda3f72402b3ff Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Mon, 28 Oct 2024 22:26:03 -0700
Subject: [PATCH 1/4] FWF:3728-Added styles for dmn list

---
 .../CustomComponents/FormBuilderModal.tsx        | 15 +++++++--------
 forms-flow-nav/src/sidenav/Sidebar.jsx           |  9 ++++++++-
 forms-flow-theme/scss/_forms.scss                |  1 +
 forms-flow-theme/scss/_table.scss                | 16 +++++++++++++++-
 forms-flow-theme/scss/inputBox.scss              |  2 +-
 5 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
index 2557daa8..0cce2717 100644
--- a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
@@ -91,12 +91,10 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             </div>
           </Modal.Header>
           <Modal.Body className="p-5">
-            <label className="form-label">{nameLabel}</label>
-            <span className="validation-astrisk">*</span>
             <FormInput
               type="text"
               placeholder={placeholderForForm}
-              className={`form-input ${nameError ? "input-error" : ""}`}
+              label={nameLabel}
               aria-label={t("Name of the form")}
               data-testid={nameInputDataTestid}
               onBlur={nameValidationOnBlur}
@@ -106,14 +104,14 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
                 handleChange("title", event);
               }}
               required
+              isInvalid={nameError ? true :false}
+              feedback={nameError}
             />
-            {nameError && (
-              <div className="validation-text mb-4">{nameError}</div>
-            )}
 
-            <label className="form-label">{descriptionLabel}</label>
-            <FormTextArea
+           <div className="mt-2">
+           <FormTextArea
               placeholder={placeholderForDescription}
+              label={descriptionLabel}
               className="form-input"
               aria-label={t("Description of the new form")}
               data-testid={descriptionDataTestid}
@@ -123,6 +121,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
               }}
               minRows={1}
             />
+           </div>
           </Modal.Body>
           <Modal.Footer className="d-flex justify-content-start">
             <CustomButton
diff --git a/forms-flow-nav/src/sidenav/Sidebar.jsx b/forms-flow-nav/src/sidenav/Sidebar.jsx
index 05f89106..e918cad1 100644
--- a/forms-flow-nav/src/sidenav/Sidebar.jsx
+++ b/forms-flow-nav/src/sidenav/Sidebar.jsx
@@ -208,7 +208,14 @@ const Sidebar = React.memo(({ props }) => {
                           },
                         ]
                       : []),
-                      { name: "Decision Tables", path: "forms-decision-tables" },
+                      ...(isCreateDesigns && ENABLE_PROCESSES_MODULE ? 
+                        [{
+                           name: "Decision Tables",
+                           path: "descision-table", 
+                           matchExps: [ 
+                            createURLPathMatchExp("descision-table" ,baseUrl)
+                           ]
+                          }]:[]),
                   ]}
                 />
               )}
diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss
index aad12361..87bd36f4 100644
--- a/forms-flow-theme/scss/_forms.scss
+++ b/forms-flow-theme/scss/_forms.scss
@@ -330,6 +330,7 @@ select option:hover {
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-sm);
     line-height: var(--text-line-height);
+    margin: var(--spacer-050) 0px;
   }
 }
 
diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss
index 193610b3..6abd1e1f 100644
--- a/forms-flow-theme/scss/_table.scss
+++ b/forms-flow-theme/scss/_table.scss
@@ -167,4 +167,18 @@ $status-radius: 50%;
 
 .w-12 {
   width: 12% !important;
-}
\ No newline at end of file
+}
+
+.button-as-div {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
diff --git a/forms-flow-theme/scss/inputBox.scss b/forms-flow-theme/scss/inputBox.scss
index 0b23be54..f45795a3 100644
--- a/forms-flow-theme/scss/inputBox.scss
+++ b/forms-flow-theme/scss/inputBox.scss
@@ -34,7 +34,7 @@ $input-error-box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
 }
 
 .input-error {
-  border-color: $red-000;
+  border-color: $red-000 !important;
   outline: none;
   box-shadow: $input-error-box-shadow;
 }

From 256e0d6b2294b6cd65d07271e39fc7e5e4613cd8 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Tue, 29 Oct 2024 13:19:11 -0700
Subject: [PATCH 2/4] updated

---
 .../src/components/CustomComponents/FormBuilderModal.tsx      | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
index 0cce2717..f45ad81e 100644
--- a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
@@ -75,7 +75,6 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
     };
 
     return (
-      <>
         <Modal
           show={showBuildForm}
           onHide={onClose}
@@ -104,7 +103,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
                 handleChange("title", event);
               }}
               required
-              isInvalid={nameError ? true :false}
+              isInvalid={!!nameError}
               feedback={nameError}
             />
 
@@ -145,7 +144,6 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             />
           </Modal.Footer>
         </Modal>
-      </>
     );
   }
 );

From 783604baac25e5dd95b24954680bb1eff08b6940 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Wed, 30 Oct 2024 04:50:05 -0700
Subject: [PATCH 3/4] Added table custom components

---
 .../ReusableProcessTableRow.tsx               | 51 +++++++++++
 .../CustomComponents/TableFooter.tsx          | 87 +++++++++++++++++++
 forms-flow-components/src/components/index.ts |  2 +
 forms-flow-components/src/declarations.d.ts   |  3 +
 forms-flow-components/webpack.config.js       |  7 +-
 5 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx
 create mode 100644 forms-flow-components/src/components/CustomComponents/TableFooter.tsx

diff --git a/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx b/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx
new file mode 100644
index 00000000..fb2e2dc0
--- /dev/null
+++ b/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {CustomButton} from '../CustomComponents/Button';
+import { HelperServices } from "@formsflow/service";
+
+
+interface ProcessTableRowProps {
+  item: {
+    name: string;
+    parentProcessKey?: string;
+    modified?: string;
+    status?: string;
+    _id: string;
+  };
+  gotoEdit: (item: any) => void;
+  buttonLabel: string;
+}
+
+export const ReusableProcessTableRow: React.FC<ProcessTableRowProps> = ({ item, gotoEdit, buttonLabel }) => {
+  const { t } = useTranslation();
+
+  return (
+    <tr>
+      <td className="w-25">
+        <span className="ms-4">{item.name}</span>
+      </td>
+      <td className="w-20">
+        <span>{item.parentProcessKey}</span>
+      </td>
+      <td className="w-15">{HelperServices?.getLocaldate(item.modified)}</td>
+      <td className="w-15">
+        <span data-testid={`sub-flow-status-${item._id}`} className="d-flex align-items-center">
+          <span className={item.status === 'active' ? 'status-live' : 'status-draft'}></span>
+          {item.status === 'active' ? t('Live') : t('Draft')}
+        </span>
+      </td>
+      <td className="w-25">
+        <span className="d-flex justify-content-end">
+          <CustomButton
+            variant="secondary"
+            size="sm"
+            label={t('Edit')}
+            ariaLabel={`Edit ${buttonLabel} Button`}
+            onClick={() => gotoEdit(item)}
+            dataTestid={`Edit ${buttonLabel} Button`}
+          />
+        </span>
+      </td>
+    </tr>
+  );
+};
diff --git a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx
new file mode 100644
index 00000000..b51e99b0
--- /dev/null
+++ b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Pagination from 'react-js-pagination';
+import { Dropdown } from 'react-bootstrap';
+import { DownArrowIcon } from '../SvgIcons/index';
+
+
+interface PageOption {
+  value: number;
+  text: string;
+}
+
+interface TableFooterProps {
+  limit: number;
+  activePage: number;
+  totalCount: number;
+  handlePageChange: (page: number) => void;
+  onLimitChange: (newLimit: number) => void;
+  pageOptions: PageOption[];
+}
+
+export const TableFooter: React.FC<TableFooterProps> = ({
+  limit,
+  activePage,
+  totalCount,
+  handlePageChange,
+  onLimitChange,
+  pageOptions,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <tr>
+      <td colSpan={3}>
+        <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
+          <span className="ms-2">
+            {t("Showing")} {(limit * activePage) - (limit - 1)} {t("to")}&nbsp;
+            {Math.min(limit * activePage, totalCount)} {t("of")}&nbsp;
+            {totalCount} {t("results")}
+          </span>
+        </div>
+      </td>
+      <td colSpan={3}>
+        <div className="d-flex align-items-center justify-content-around">
+          <Pagination
+            activePage={activePage}
+            itemsCountPerPage={limit}
+            totalItemsCount={totalCount}
+            pageRangeDisplayed={5}
+            itemClass="page-item"
+            linkClass="page-link"
+            onChange={handlePageChange}
+          />
+        </div>
+      </td>
+      <td colSpan={3}>
+        <div className="d-flex align-items-center justify-content-end">
+          <span className="pagination-text">{t("Rows per page")}</span>
+          <div className="pagination-dropdown">
+            <Dropdown data-testid="page-limit-dropdown">
+              <Dropdown.Toggle
+                variant="light"
+                id="dropdown-basic"
+                data-testid="page-limit-dropdown-toggle"
+              >
+                {limit}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                {pageOptions.map((option) => (
+                  <Dropdown.Item
+                    key={option.value}
+                    type="button"
+                    data-testid={`page-limit-dropdown-item-${option.value}`}
+                    onClick={() => onLimitChange(option.value)}
+                  >
+                    {option.text}
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+            <DownArrowIcon />
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+};
\ No newline at end of file
diff --git a/forms-flow-components/src/components/index.ts b/forms-flow-components/src/components/index.ts
index 8486a452..8fd09aa0 100644
--- a/forms-flow-components/src/components/index.ts
+++ b/forms-flow-components/src/components/index.ts
@@ -11,3 +11,5 @@ export * from "./CustomComponents/Search";
 export * from "./CustomComponents/ProgressBar";
 export * from "./CustomComponents/FormBuilderModal";
 export * from "./CustomComponents/InputDropdown";
+export * from './CustomComponents/ReusableProcessTableRow';
+export * from "./CustomComponents/TableFooter";
diff --git a/forms-flow-components/src/declarations.d.ts b/forms-flow-components/src/declarations.d.ts
index 1e2b6f73..bbb64dbe 100644
--- a/forms-flow-components/src/declarations.d.ts
+++ b/forms-flow-components/src/declarations.d.ts
@@ -38,3 +38,6 @@ declare module "*.svg" {
   export default src;
 }
 
+declare module "@formsflow/service" {
+	export const { HelperServices }: any;
+}
\ No newline at end of file
diff --git a/forms-flow-components/webpack.config.js b/forms-flow-components/webpack.config.js
index ce9e532e..fa563f13 100644
--- a/forms-flow-components/webpack.config.js
+++ b/forms-flow-components/webpack.config.js
@@ -18,10 +18,7 @@ module.exports = (webpackConfigEnv, argv) => {
     },
     output:{
       filename:"forms-flow-components.js"
-    },
-    externals: {
-      react: 'react',
-      'react-dom': 'react-dom',
-    }
+    },  
+    externals: ["@formsflow/*","react","react-dom"]
   });
 };

From 9974ea76c0a7bc35ec632b90bba61bbaf633a515 Mon Sep 17 00:00:00 2001
From: fahad-aot <fahad.k@aot-technologies.com>
Date: Wed, 30 Oct 2024 05:13:05 -0700
Subject: [PATCH 4/4] package.json updated

---
 forms-flow-components/package-lock.json | 212 ++++++++++++++++++++++--
 forms-flow-components/package.json      |   6 +-
 forms-flow-nav/src/sidenav/Sidebar.jsx  |  31 ++--
 3 files changed, 212 insertions(+), 37 deletions(-)

diff --git a/forms-flow-components/package-lock.json b/forms-flow-components/package-lock.json
index 3ccab2e0..693e8c62 100644
--- a/forms-flow-components/package-lock.json
+++ b/forms-flow-components/package-lock.json
@@ -44,6 +44,7 @@
         "react-bootstrap": "^1.6.0",
         "react-dom": "^17.0.2",
         "react-i18next": "^12.1.4",
+        "react-js-pagination": "^3.0.3",
         "sass": "^1.57.1",
         "sass-loader": "^13.2.0",
         "ts-config-single-spa": "^3.0.0",
@@ -59,7 +60,8 @@
       "peerDependencies": {
         "react": "^17.0.2",
         "react-bootstrap": "^1.6.0",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-js-pagination": "^3.0.3"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -4576,6 +4578,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "~2.0.0"
+      },
+      "engines": {
+        "node": "0.4 || >=0.5.8"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -7265,18 +7279,33 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+    "node_modules/fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "deprecated": "This package is no longer supported.",
       "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
       "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/fstream/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
       }
     },
     "node_modules/function-bind": {
@@ -11295,6 +11324,27 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -11688,6 +11738,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/paginator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/paginator/-/paginator-1.0.0.tgz",
+      "integrity": "sha512-j2Y5AtF/NrXOEU9VVOQBGHnj81NveRQ/cDzySywqsWrAj+cxivMpMCkYJOds3ulQiDU4rQBWc0WoyyXMXOmuMA==",
+      "dev": true
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -12376,6 +12432,34 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-js-pagination": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-js-pagination/-/react-js-pagination-3.0.3.tgz",
+      "integrity": "sha512-podyA6Rd0uxc8uQakXWXxnonoOPI6NnFOROXfc6qPKNYm44s+Bgpn0JkyflcfbHf/GFKahnL8JN8rxBHZiBskg==",
+      "dev": true,
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "fstream": "1.0.12",
+        "paginator": "^1.0.0",
+        "prop-types": "15.x.x - 16.x.x",
+        "react": "15.x.x - 16.x.x",
+        "tar": "2.2.2"
+      }
+    },
+    "node_modules/react-js-pagination/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -13686,6 +13770,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "deprecated": "This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.",
+      "dev": true,
+      "dependencies": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
     "node_modules/terminal-link": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
@@ -18561,6 +18657,15 @@
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "dev": true
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -20605,12 +20710,28 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+    "fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
       "dev": true,
-      "optional": true
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
     },
     "function-bind": {
       "version": "1.1.2",
@@ -23566,6 +23687,21 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.6"
+      }
+    },
     "mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -23848,6 +23984,12 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "paginator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/paginator/-/paginator-1.0.0.tgz",
+      "integrity": "sha512-j2Y5AtF/NrXOEU9VVOQBGHnj81NveRQ/cDzySywqsWrAj+cxivMpMCkYJOds3ulQiDU4rQBWc0WoyyXMXOmuMA==",
+      "dev": true
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -24354,6 +24496,33 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "react-js-pagination": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-js-pagination/-/react-js-pagination-3.0.3.tgz",
+      "integrity": "sha512-podyA6Rd0uxc8uQakXWXxnonoOPI6NnFOROXfc6qPKNYm44s+Bgpn0JkyflcfbHf/GFKahnL8JN8rxBHZiBskg==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.5",
+        "fstream": "1.0.12",
+        "paginator": "^1.0.0",
+        "prop-types": "15.x.x - 16.x.x",
+        "react": "15.x.x - 16.x.x",
+        "tar": "2.2.2"
+      },
+      "dependencies": {
+        "react": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -25342,6 +25511,17 @@
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "dev": true
     },
+    "tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "dev": true,
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
     "terminal-link": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
diff --git a/forms-flow-components/package.json b/forms-flow-components/package.json
index 7526cbd7..e68f6081 100644
--- a/forms-flow-components/package.json
+++ b/forms-flow-components/package.json
@@ -54,7 +54,8 @@
     "react-bootstrap": "^1.6.0",
     "react-dom": "^17.0.2",
     "i18next-browser-languagedetector": "^7.0.1",
-    "react-i18next": "^12.1.4"
+    "react-i18next": "^12.1.4",
+    "react-js-pagination": "^3.0.3"
   },
   "dependencies": {
     "@types/react": "^17.0.19",
@@ -67,7 +68,8 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-js-pagination": "^3.0.3"
   },
   "types": "dist/formsflow-components.d.ts"
 }
diff --git a/forms-flow-nav/src/sidenav/Sidebar.jsx b/forms-flow-nav/src/sidenav/Sidebar.jsx
index e918cad1..025ed834 100644
--- a/forms-flow-nav/src/sidenav/Sidebar.jsx
+++ b/forms-flow-nav/src/sidenav/Sidebar.jsx
@@ -197,25 +197,18 @@ const Sidebar = React.memo(({ props }) => {
                           },
                         ]
                       : []),
-                    ...(isCreateDesigns && ENABLE_PROCESSES_MODULE
-                      ? [
-                          {
-                            name: "Sub - flows",
-                            path: "subflow",
-                            matchExps: [
-                              createURLPathMatchExp("subflow", baseUrl),
-                            ],
-                          },
-                        ]
-                      : []),
-                      ...(isCreateDesigns && ENABLE_PROCESSES_MODULE ? 
-                        [{
-                           name: "Decision Tables",
-                           path: "descision-table", 
-                           matchExps: [ 
-                            createURLPathMatchExp("descision-table" ,baseUrl)
-                           ]
-                          }]:[]),
+                    ...(isCreateDesigns && ENABLE_PROCESSES_MODULE) ? [
+                      {
+                        name: "Sub - flows",
+                        path: "subflow",
+                        matchExps: [createURLPathMatchExp("subflow", baseUrl)],
+                      },
+                      {
+                        name: "Decision Tables",
+                        path: "descision-table",
+                        matchExps: [createURLPathMatchExp("descision-table", baseUrl)],
+                      },
+                    ] : [],
                   ]}
                 />
               )}