Autogenerate API sidebar

Merge pull request #1797 from OpenSignLabs/feature/correct-spelling-mistakes-in-documentation
Fix docs typos
2026-09-03 16:28:56 +02:00 · 2025-07-04 13:24:20 +05:30 · 2025-06-16 03:09:19 +05:30 · 2025-06-16 02:34:45 +05:30 · 2025-06-06 10:57:05 +05:30 · 2025-06-04 21:21:27 +05:30
170 changed files with 36154 additions and 2855 deletions
@@ -178,6 +178,33 @@
      "contributions": [
        "a11y"
      ]
+    },
+    {
+      "login": "Govinda04",
+      "name": "Govinda Kocharekar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/50038172?v=4",
+      "profile": "https://github.com/Govinda04",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "crediblebilal",
+      "name": "Bilal Ahmad Bhat",
+      "avatar_url": "https://avatars.githubusercontent.com/u/55330484?v=4",
+      "profile": "https://bilal.cc",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "VikramNagwal",
+      "name": "Vikram",
+      "avatar_url": "https://avatars.githubusercontent.com/u/123088024?v=4",
+      "profile": "https://github.com/VikramNagwal",
+      "contributions": [
+        "code"
+      ]
    }
  ]
 }
@@ -39,11 +39,18 @@ DO_ACCESS_KEY_ID=
 DO_SECRET_ACCESS_KEY=
 # Digital ocean spaces region or AWS s3 region
 DO_REGION=us-west
+# Set this to true id you are using local storage instead of s3 compatible storage
+# USE_LOCAL=TRUE

-# Email mailgun config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
-MAILGUN_API_KEY=
+# Email mailgun or set SMTP_ENABLE true to use SMTP config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
+MAILGUN_API_KEY=XXXXX
 MAILGUN_DOMAIN=mail.yourdomain.com
 MAILGUN_SENDER=postmaster@mail.yourdomain.com
+SMTP_ENABLE=
+SMTP_HOST=
+SMTP_PORT=
+SMTP_USER_EMAIL=
+SMTP_PASS=

 # Base64 encoded PFX or p12 document signing certificate file *********************************************************************************************************************
 PFX_BASE64=
@@ -44,10 +44,16 @@ DO_REGION=us-west
 # local storage
 USE_LOCAL=TRUE

-# Email mailgun config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
+# Email mailgun or set SMTP_ENABLE true to use SMTP config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
 MAILGUN_API_KEY=XXXXX
 MAILGUN_DOMAIN=mail.yourdomain.com
 MAILGUN_SENDER=postmaster@mail.yourdomain.com
+SMTP_ENABLE=
+SMTP_HOST=
+SMTP_PORT=
+SMTP_USER_EMAIL=
+SMTP_PASS=
+

 # Base64 encoded PFX or p12 document signing certificate file *********************************************************************************************************************
 PFX_BASE64='MIIKCQIBAzCCCc8GCSqGSIb3DQEHAaCCCcAEggm8MIIJuDCCBG8GCSqGSIb3DQEH
@@ -0,0 +1,73 @@
+name: "Bug Report"
+labels: ["bug","up-for-grabs"]
+title: "[Bug]: "
+assignees:
+  - andrew-opensignlabs
+description: Create a bug report to help us make OpenSign™ the world's best document e-signature platform
+body:
+  - type: textarea
+    attributes:
+      label: Issue Description
+      description: Please provide a clear & concise description of the problem. 
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: Describe what you expected to happen.
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: Describe what is happening instead.
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Please provide step-by-step instructions to reproduce the issue. Include code snippets, URLs, error messages and any other relevant information.
+  - type: textarea
+    attributes:
+      label: Screenshots of the issue(optional)
+      description: Add screenshots to better explain the issue.
+  - type: input
+    attributes:
+      label: Operating System [e.g. MacOS Sonoma 14.1, Windows 11]
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Microsoft Edge
+      default: 0
+  - type: input
+    attributes:
+      label: What version of OpenSign™ are you seeing this issue on? [e.g. 1.0.6]
+    validations:
+      required: true
+  - type: dropdown
+    id: environment
+    attributes:
+      label: What environment are you seeing the problem on?
+      multiple: true
+      options:
+        - Production (app.opensignlabs.com)
+        - Staging (staging-app.opensignlabs.com)
+        - Hosted (app.yourdomain.com)
+        - Dev (localhost or vercel)
+  - type: checkboxes
+    attributes:
+      label: Please check the boxes that apply to this issue report.
+      options:
+        - label: I have searched the existing issues & discussions to make sure that this is not a duplicate.
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our [Code of Conduct](https://www.opensignlabs.com)
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
+        - label: I have searched the existing issues & discussions to make sure that this is not a duplicate.
+          required: true
@@ -0,0 +1,70 @@
+name: Feature Request
+description: Suggest an idea for OpenSign™
+title: "Feature Request: [Short Description]"
+labels: [feature request, needs triage]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## Thanks for taking the time to fill out this feature request!
+
+  - type: input
+    id: title
+    attributes:
+      label: Feature Title
+      description: What would you call this feature?
+      placeholder: e.g., Advanced Signature Verification
+    validations:
+      required: true
+
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Feature Description
+      description: |
+        Please provide a detailed description of the feature you're proposing.
+      placeholder: |
+        e.g., I'm proposing an advanced signature verification feature that...
+    validations:
+      required: true  
+  - type: dropdown
+    id: featuretype
+    attributes:
+      label: What type of feature are you requesting?
+      multiple: true
+      options:
+        - UI/UX Improvement
+        - Security / Compliance
+        - Performance / Optimization
+        - 3rd party integration
+        - Other
+  - type: dropdown
+    id: importance
+    attributes:
+      label: Importance
+      description: How important is this feature to you?
+      options:
+        - Critical
+        - High
+        - Medium
+        - Low
+    validations:
+      required: true
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      description: Any other context or screenshots about the feature request here.
+      placeholder: Additional details, examples, or screenshots...
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our [Code of Conduct](https://www.opensignlabs.com)
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
+        - label: I have searched the existing issues & discussions to make sure that this is not a duplicate.
+          required: true
@@ -0,0 +1,22 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # maintain dependencies for frontend
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/apps/OpenSign" # Location of package manifests
+    schedule:
+      interval: "weekly"
+  # maintain dependencies for server
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/apps/OpenSignServer" # Location of package manifests
+    schedule:
+      interval: "weekly"
+  # maintain dependencies for microfrontends
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "microfrontends/SignDocuments" # Location of package manifests
+    schedule:
+      interval: "weekly"
@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - feat-docs
+    # Review gh actions docs if you want to further define triggers, paths, etc
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        working-directory: ./docs
+        run: npm ci
+      - name: Clean api-docs
+        working-directory: ./docs
+        run: npm run docusaurus clean-api-docs all
+      - name: Build api-docs
+        working-directory: ./docs
+        run: npm run docusaurus gen-api-docs all
+      - name: Build website
+        working-directory: ./docs
+        run: npm run build
+
+      # Popular action to deploy to GitHub Pages:
+      # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          # Build output to publish to the `gh-pages` branch:
+          publish_dir: ./docs/build
+          # The following lines assign commit authorship to the official
+          # GH-Actions bot for deploys to `gh-pages` branch:
+          # https://github.com/actions/checkout/issues/13#issuecomment-724415212
+          # The GH actions bot is used by default if you didn't specify the two fields.
+          # You can swap them out with your own user credentials.
+          user_name: github-actions[bot]
+          user_email: 41898282+github-actions[bot]@users.noreply.github.com
@@ -24,4 +24,9 @@ yarn-debug.log*
 yarn-error.log*
 apps/OpenSign/public/mfbuild/*
 microfrontends/SignDocuments/build/*
-apps/OpenSignServer/files/files/*
+apps/OpenSignServer/files/files/*
+# ignore generated API documentation
+/docs/docs/API-docs/*
+!/docs/docs/API-docs/opensign.yaml
+!/docs/docs/API-docs/intro.md
+/docs/docs/API-docs-1.1/
@@ -98,8 +98,7 @@ Environment Varaibles:
 | PUBLIC_URL  | http://localhost:3000  | Set it to the URL form where the app home page will be accessed |
 | GENERATE_SOURCEMAP  | false | Set it to true if you want to generate the Sourcemap for debugging |
 | REACT_APP_SERVERURL  | http://localhost:8080/app  | Set it to the URL from where APIs will be accessible, for local development it should be localhost:3000/api/app (use your local port number instead) |
-| REACT_APP_APPID  | http://localhost:3000  | Set it to the URL form where the app home page will be accessed |
-| PUBLIC_URL  | opensignstgn  | A 12 character long random app identifier. The value of this should be same as APP_ID which is a variable used by backend API. |
+| REACT_APP_APPID  | opensignstgn  | A 12 character long random app identifier. The value of this should be same as APP_ID which is a variable used by backend API. |
 | APP_ID  | opensignstgn  | A 12 character long random app identifier. The value of this should be same as REACT_APP_APPID which is a variable used by Frontend React App. |
 | appName  | open_sign_server  | Name of the app. It will be visible in the verification emails sent out. |
 | MASTER_KEY  | XnAadwKxxByMr  | A 12 character long random secret key that allows access to all the data. It is used in Parse dashboard config to view all the data in the database. |
@@ -128,6 +128,11 @@ We would like to thank all our contributors and users for their support and feed
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rishabjasrotia"><img src="https://avatars.githubusercontent.com/u/33950743?v=4?s=100" width="100px;" alt="Rishab"/><br /><sub><b>Rishab</b></sub></a><br /><a href="#code-rishabjasrotia" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://session.it"><img src="https://avatars.githubusercontent.com/u/327285?v=4?s=100" width="100px;" alt="Maurizio Pillitu"/><br /><sub><b>Maurizio Pillitu</b></sub></a><br /><a href="#bug-maoo" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://luisparra.dev"><img src="https://avatars.githubusercontent.com/u/16653744?v=4?s=100" width="100px;" alt="Luis Parra"/><br /><sub><b>Luis Parra</b></sub></a><br /><a href="#a11y-lsprr" title="Accessibility">️️️️♿️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Govinda04"><img src="https://avatars.githubusercontent.com/u/50038172?v=4?s=100" width="100px;" alt="Govinda Kocharekar"/><br /><sub><b>Govinda Kocharekar</b></sub></a><br /><a href="#code-Govinda04" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://bilal.cc"><img src="https://avatars.githubusercontent.com/u/55330484?v=4?s=100" width="100px;" alt="Bilal Ahmad Bhat"/><br /><sub><b>Bilal Ahmad Bhat</b></sub></a><br /><a href="#code-crediblebilal" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VikramNagwal"><img src="https://avatars.githubusercontent.com/u/123088024?v=4?s=100" width="100px;" alt="Vikram"/><br /><sub><b>Vikram</b></sub></a><br /><a href="#code-VikramNagwal" title="Code">💻</a></td>
    </tr>
  </tbody>
 </table>
@@ -42,7 +42,8 @@
  "scripts": {
    "start": "serve -s build",
    "start-dev": "mf-cra start",
-    "build": "rm -rf public/mfbuild && npm run micro && CI=false && mf-cra build",
+    "version": "curl -s https://api.github.com/repos/opensignlabs/opensign/releases/latest | grep '\"tag_name\":' | awk -F '\"' '{print $4}' > ./public/version.txt",
+    "build": "npm run version && rm -rf public/mfbuild && npm run micro && CI=false && mf-cra build",
    "micro": "cd ../../microfrontends/SignDocuments && npm install && npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
@@ -85,4 +86,4 @@
    "pretty-quick": "^3.1.3",
    "tailwindcss": "^3.3.3"
  }
-}
+}
@@ -31,7 +31,7 @@
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

-  <title>Open sign</title>
+  <title>OpenSign™</title>
 </head>

 <body>
@@ -50,4 +50,4 @@
    -->
 </body>

-</html>
+</html>
@@ -0,0 +1 @@
+v1.0.5-beta
@@ -32,6 +32,7 @@ const AppendFormInForm = (props) => {
    try {
      const query = new Parse.Query("contracts_Contactbook");
      query.equalTo("CreatedBy", user);
+      query.notEqualTo("IsDeleted", true);
      query.equalTo("Email", user.getEmail());
      const res = await query.first();
      // console.log(res);
@@ -1,8 +1,20 @@
 import React, { useEffect, useState } from "react";
 import Package from "../../package.json";
-
+import axios from "axios";
 const Footer = () => {
  const [showButton, setShowButton] = useState(false);
+  const [version, setVersion] = useState("");
+  useEffect(() => {
+    axios
+      .get("/version.txt")
+      .then((response) => {
+        setVersion(response.data); // Set the retrieved data to the state variable
+      })
+      .catch((error) => {
+        console.error("Error reading the file:", error);
+      });
+  }, []);
+
  const handleScroll = () => {
    if (window.pageYOffset >= 50) {
      setShowButton(true);
@@ -25,16 +37,12 @@ const Footer = () => {
  }, []);

  const appName = "OpenSign™";
-  
+
  return (
    <>
      <div className="bg-[#222c3c] text-[#98a6ba] text-center text-[13px] py-3">
        All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
-        {appName}{" "}
-        (version:{" "}
-        {localStorage.getItem("appVersion") &&
-          `${Package.version}.${localStorage.getItem("appVersion")}`}
-        )
+        {appName} ( version: {version ? version : `${Package.version} `})
      </div>
      <button
        className={`${
@@ -43,8 +43,9 @@ const GoogleSignInBtn = ({
    });
  });
  const clearStorage = async () => {
-    await Parse.User.logOut();
-
+    if (Parse.User.current()) {
+      await Parse.User.logOut();
+    }
    let baseUrl = localStorage.getItem("BaseUrl12");
    let appid = localStorage.getItem("AppID12");
    let applogo = localStorage.getItem("appLogo");
@@ -74,7 +75,6 @@ const GoogleSignInBtn = ({
    localStorage.setItem("userSettings", userSettings);
    localStorage.setItem("baseUrl", baseUrl);
    localStorage.setItem("parseAppId", appid);
-
  };
  const responseGoogle = async (response) => {
    clearStorage();
@@ -472,6 +472,8 @@ const TreeWidget = (props) => {
        props.schema.data.FolderTypeField,
        props.schema.data.FolderTypeValue
      );
+      const currentUser = Parse.User.current();
+      folder.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
      if (tabList.length > 0) {
        let len = tabList.length - 1;
        folder.set(props.schema.data.ParentFolderField, {
@@ -698,7 +700,7 @@ const TreeWidget = (props) => {
                ))}
              <hr />
            </div>
-            {editable && (
+            {/* {editable && (
              <TreeEditForm
                FormId={props.schema.data.FormId}
                objectId={editId}
@@ -707,7 +709,7 @@ const TreeWidget = (props) => {
                  selectFolderHandle();
                }}
              />
-            )}
+            )} */}
            {isAddField && !loader && !editable && (
              <TreeFormComponent
                Id={props.schema.data.FormId}
@@ -795,7 +797,7 @@ const TreeWidget = (props) => {
                              </a>
                            </div>

-                            {fldr[props.schema.data.FolderTypeField] ===
+                            {/* {fldr[props.schema.data.FolderTypeField] ===
                              props.schema.data.FolderTypeValue && (
                              <a
                                className="float-right"
@@ -815,7 +817,7 @@ const TreeWidget = (props) => {
                                  aria-hidden="true"
                                ></i>
                              </a>
-                            )}
+                            )} */}
                          </li>
                        )
                    )}
@@ -9,6 +9,7 @@ function DashboardReport(props) {
  const [isLoader, setIsLoader] = useState(true);
  const [reportName, setReportName] = useState("");
  const [actions, setActions] = useState([]);
+  const [heading, setHeading] = useState([]);
  const [isNextRecord, setIsNextRecord] = useState(false);
  const [isMoreDocs, setIsMoreDocs] = useState(true);
  const abortController = new AbortController();
@@ -43,6 +44,7 @@ function DashboardReport(props) {
    if (json) {
      setActions(json.actions);
      setReportName(json.reportName);
+      setHeading(json.heading);
      Parse.serverURL = localStorage.getItem("BaseUrl12");
      Parse.initialize(localStorage.getItem("AppID12"));
      const currentUser = Parse.User.current().id;
@@ -140,7 +142,9 @@ function DashboardReport(props) {
            <ReportTable
              ReportName={reportName}
              List={List}
+              setList={setList}
              actions={actions}
+              heading={heading}
              setIsNextRecord={setIsNextRecord}
              isMoreDocs={isMoreDocs}
              docPerPage={docPerPage}
@@ -0,0 +1,59 @@
+import React, { useCallback, useMemo } from "react";
+import { useDropScript } from "../../hook/useScript";
+
+const DROPBOX_APP_KEY = process.env.REACT_APP_DROPBOX_API_KEY; // App key
+const DROPBOX_SDK_URL = "https://www.dropbox.com/static/api/2/dropins.js";
+const DROPBOX_SCRIPT_ID = "dropboxjs";
+
+export default function DropboxChooser({ children, onSuccess, onCancel }) {
+  useDropScript(DROPBOX_SDK_URL, {
+    attrs: {
+      id: DROPBOX_SCRIPT_ID,
+      "data-app-key": DROPBOX_APP_KEY
+    }
+  });
+
+  const options = useMemo(
+    () => ({
+      // Required. Called when a user selects an item in the Chooser.
+      success: (files) => {
+        // console.log("success", files);
+        onSuccess && onSuccess(files);
+      },
+      // Optional. Called when the user closes the dialog without selecting a file
+      // and does not include any parameters.
+      cancel: () => {
+        console.log("cancel");
+        onCancel && onCancel();
+      },
+
+      // Optional. "preview" (default) is a preview link to the document for sharing,
+      // "direct" is an expiring link to download the contents of the file. For more
+      linkType: "direct", // or "preview"
+      multiselect: false, // 是否支持多选
+      extensions: [".pdf"],
+
+      // Optional. A value of false (default) limits selection to files,
+      // while true allows the user to select both folders and files.
+      // You cannot specify `linkType: "direct"` when using `folderselect: true`.
+      folderselect: false // or true
+    }),
+    [onSuccess, onCancel]
+  );
+
+  const handleChoose = useCallback(() => {
+    if (window.Dropbox) {
+      window.Dropbox.choose(options);
+    }
+  }, [options]);
+
+  return (
+    <div onClick={handleChoose}>
+      {children || (
+        <button className="px-2 py-[2px] text-2xl rounded border-[1px] text-blue-400 border-gray-300 w-full">
+          <i className="fa-brands fa-dropbox"></i>
+        </button>
+      )}
+    </div>
+  );
+}
@@ -2,14 +2,12 @@ import React, { useState, useEffect } from "react";
 import { SaveFileSize } from "../../constant/saveFileSize";
 import Parse from "parse";
 import sanitizeFileName from "../../primitives/sanitizeFileName";
-
+import DropboxChooser from "./DropboxChoose";
 const FileUpload = (props) => {
  const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
  const [parseAppId] = useState(localStorage.getItem("parseAppId"));
  const [_fileupload, setFileUpload] = useState("");
  const [fileload, setfileload] = useState(false);
-
-  const [localValue, setLocalValue] = useState("");
  const [Message] = useState(false);
  const [percentage, setpercentage] = useState(0);

@@ -25,7 +23,6 @@ const FileUpload = (props) => {
  const onChange = (e) => {
    try {
      let files = e.target.files;
-      setLocalValue(e.target.files);
      if (typeof files[0] !== "undefined") {
        if (props.schema.filetypes && props.schema.filetypes.length > 0) {
          var fileName = files[0].name;
@@ -106,6 +103,56 @@ const FileUpload = (props) => {
      console.error("Error uploading file:", error);
    }
  };
+
+  const dropboxSuccess = async (files) => {
+    // console.log("file ", files);
+    setfileload(true);
+    const file = files[0];
+    const url = file.link;
+    const size = file.bytes;
+    const mb = Math.round(file.bytes / Math.pow(1024, 2));
+
+    if (mb > 10) {
+      setTimeout(() => {
+        alert(
+          `The selected file size is too large. Please select a file less than 10 MB`
+        );
+      }, 500);
+      return;
+    } else {
+      const name = sanitizeFileName(file.name);
+
+      const parseFile = new Parse.File(name, { uri: url });
+
+      try {
+        const response = await parseFile.save({
+          progress: (progressValue, loaded, total, { type }) => {
+            if (type === "upload" && progressValue !== null) {
+              const percentCompleted = Math.round((loaded * 100) / total);
+              // console.log("percentCompleted ", percentCompleted);
+              setpercentage(percentCompleted);
+            }
+          }
+        });
+        // console.log("response.url() ", response.url());
+        setFileUpload(response.url());
+        props.onChange(response.url());
+        setfileload(false);
+
+        if (response.url()) {
+          SaveFileSize(size, response.url());
+          return response.url();
+        }
+      } catch (error) {
+        setfileload(false);
+        setpercentage(0);
+        console.error("Error uploading file:", error);
+      }
+    }
+  };
+  const dropboxCancel = async () => {
+    console.log("cancel clicked ");
+  };
  let fileView =
    props.formData &&
    props.schema.uploadtype === "s3viajw" ? null : props.formData &&
@@ -207,55 +254,51 @@ const FileUpload = (props) => {
      </div>

      <>
-        {localValue ? (
-          <input
-            type="file"
-            id="hashfile"
-            style={{
-              border: "1px solid #ccc",
-              color: "gray",
-              backgroundColor: "white",
-              padding: "5px 10px",
-              borderRadius: "4px",
-              fontSize: "13px",
-              width: "100%",
-              fontWeight: "bold"
-            }}
-            accept="application/pdf,application/vnd.ms-excel"
-            onChange={onChange}
-          />
-        ) : props.formData ? (
-          <div
-            style={{
-              border: "1px solid #ccc",
-              color: "gray",
-              backgroundColor: "white",
-              padding: "5px 10px",
-              borderRadius: "4px",
-              fontSize: "13px",
-              width: "100%",
-              fontWeight: "bold"
-            }}
-          >
-            file selected : {props.formData.split("/")[3]}
+        {props.formData ? (
+          <div className="flex gap-2 justify-center items-center">
+            <div className="flex justify-between items-center px-2 py-[3px] w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
+              <div className="break-all">
+                file selected : {props.formData.split("/")[3]}
+              </div>
+              <div
+                onClick={() => {
+                  console.log("clicked");
+                  setFileUpload([]);
+                  props.onChange(undefined);
+                }}
+                className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
+              >
+                <i className="fa-solid fa-xmark"></i>
+              </div>
+            </div>
+            <DropboxChooser
+              onSuccess={dropboxSuccess}
+              onCancel={dropboxCancel}
+            />
          </div>
        ) : (
-          <input
-            type="file"
-            id="hashfile"
-            style={{
-              border: "1px solid #ccc",
-              color: "gray",
-              backgroundColor: "white",
-              padding: "5px 10px",
-              borderRadius: "4px",
-              fontSize: "13px",
-              width: "100%",
-              fontWeight: "bold"
-            }}
-            accept="application/pdf,application/vnd.ms-excel"
-            onChange={onChange}
-          />
+          <div className="flex gap-2 justify-center items-center">
+            <input
+              type="file"
+              id="hashfile"
+              style={{
+                border: "1px solid #ccc",
+                color: "gray",
+                backgroundColor: "white",
+                padding: "5px 10px",
+                borderRadius: "4px",
+                fontSize: "13px",
+                width: "100%",
+                fontWeight: "bold"
+              }}
+              accept="application/pdf,application/vnd.ms-excel"
+              onChange={onChange}
+            />
+            <DropboxChooser
+              onSuccess={dropboxSuccess}
+              onCancel={dropboxCancel}
+            />
+          </div>
        )}
      </>
    </React.Fragment>
@@ -42,9 +42,8 @@ const Sidebar = ({ isOpen, closeSidebar }) => {

  return (
    <aside
-      className={`${isOpen ? "block" : "hidden"
-        } bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 ${isOpen ? "translate-x-0" : "-translate-x-full"
-        }`}
+      className={`bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 md:translate-x-0
+      ${isOpen ? "translate-x-0 block" : "-translate-x-full hidden"}`}
    >
      <div className="flex px-2 py-3 gap-2 items-center shadow-md">
        <div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden">
@@ -15,3 +15,20 @@ export const useScript = (url, onload) => {
    };
  }, [url, onload]);
 };
+
+/**`useScript` hook is generated scripte for google sign in button */
+export const useDropScript = (url, onload) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    //add url parameter to the script src, for load and it will remove after load in return
+    script.src = url;
+    script.async = true;
+    script.defer = true;
+    script.id = "dropboxjs";
+    script.setAttribute("data-app-key", "8k0thg9r1t7asqg");
+    document.head.appendChild(script);
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, [url, onload]);
+};
@@ -14,7 +14,7 @@ export const formJson = (id) => {
            type: "string",
            title: "Select Document",
            filetypes: [],
-            maxfilesizeKB: "5000",
+            maxfilesizeKB: "10000",
            uploadtype: "regular",
            helpbody: "",
            helplink: ""
@@ -147,7 +147,7 @@ export const formJson = (id) => {
              class: "contracts_Contactbook",
              displayKey: "Name",
              valueKey: "objectId",
-              query: `where={"CreatedBy":${userPtr}}&keys=Name`,
+              query: `where={"CreatedBy":${userPtr},"IsDeleted":{"$ne":true}}&keys=Name`,
              isPointer: true,
              helpbody: "",
              helplink: "",
@@ -582,4 +582,3 @@ export const formJson = (id) => {
    return formData;
  }
 };
-
@@ -1,11 +1,13 @@
 export default function reportJson(id) {
  // console.log("json ", json);
-
+  const head = ["Sr.No", "Name", "Note", "Folder", "File", "Owner", "Signers"];
+  const contactbook = ["Sr.No", "Name", "Email", "Phone"];
  switch (id) {
    // draft documents report
    case "ByHuevtCFY":
      return {
        reportName: "Draft Documents",
+        heading: head,
        actions: [
          {
            btnLabel: "sign",
@@ -21,6 +23,7 @@ export default function reportJson(id) {
    case "4Hhwbp482K":
      return {
        reportName: "Need your sign",
+        heading: head,
        actions: [
          {
            btnLabel: "sign",
@@ -36,6 +39,7 @@ export default function reportJson(id) {
    case "1MwEuxLEkF":
      return {
        reportName: "In-progress documents",
+        heading: head,
        actions: [
          {
            btnLabel: "View",
@@ -51,6 +55,7 @@ export default function reportJson(id) {
    case "kQUoW4hUXz":
      return {
        reportName: "Completed Documents",
+        heading: head,
        actions: [
          {
            btnLabel: "View",
@@ -66,6 +71,7 @@ export default function reportJson(id) {
    case "UPr2Fm5WY3":
      return {
        reportName: "Declined Documents",
+        heading: head,
        actions: [
          {
            btnLabel: "View",
@@ -81,6 +87,7 @@ export default function reportJson(id) {
    case "zNqBHXHsYH":
      return {
        reportName: "Expired Documents",
+        heading: head,
        actions: [
          {
            btnLabel: "View",
@@ -96,6 +103,7 @@ export default function reportJson(id) {
    case "d9k3UfYHBc":
      return {
        reportName: "Recently sent for signatures",
+        heading: head,
        actions: [
          {
            btnLabel: "View",
@@ -111,6 +119,7 @@ export default function reportJson(id) {
    case "5Go51Q7T8r":
      return {
        reportName: "Recent signature requests",
+        heading: head,
        actions: [
          {
            btnLabel: "Sign",
@@ -126,6 +135,7 @@ export default function reportJson(id) {
    case "kC5mfynCi4":
      return {
        reportName: "Drafts",
+        heading: head,
        actions: [
          {
            btnLabel: "sign",
@@ -137,6 +147,20 @@ export default function reportJson(id) {
          }
        ]
      };
+    // contactbook report
+    case "5KhaPr482K":
+      return {
+        reportName: "Contactbook",
+        heading: contactbook,
+        actions: [
+          {
+            btnLabel: "",
+            btnColor: "#f55a42",
+            textColor: "white",
+            btnIcon: "fa-solid fa-trash"
+          }
+        ]
+      };
    default:
      return null;
  }
@@ -52,7 +52,7 @@
        "subtitle": "Customization available Priority support.",
        "btnText": "Contact us",
        "url": "https://www.opensignlabs.com/contact-us",
-        "target": "_self",
+        "target": "_blank",
        "benefits": [
            "All features",
            "Custom domain",
@@ -9,7 +9,7 @@ import { useSelector } from "react-redux";
 import Parse from "parse";
 const HomeLayout = ({ children }) => {
  const { width } = useWindowSize();
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
  const arr = useSelector((state) => state.TourSteps);

  // reactour state
@@ -19,13 +19,11 @@ const HomeLayout = ({ children }) => {
  const [tourConfigs, setTourConfigs] = useState([]);

  const showSidebar = () => {
-    setIsOpen(!isOpen);
+    setIsOpen(value => !value);
  };
  useEffect(() => {
    if (width && width <= 768) {
      setIsOpen(false);
-    } else {
-      setIsOpen(true);
    }
  }, [width]);

@@ -1,19 +1,23 @@
 import React, { useState, useEffect, useMemo } from "react";
 import pad from "../assets/images/pad.svg";
 import { useNavigate } from "react-router-dom";
-
+import axios from "axios";
+import "../styles/report.css";
 const ReportTable = ({
  ReportName,
  List,
+  setList,
  actions,
+  heading,
  setIsNextRecord,
  isMoreDocs,
  docPerPage
 }) => {
  const navigate = useNavigate();
  const [currentPage, setCurrentPage] = useState(1);
-  // const pageNumbers = [];
-
+  const [actLoader, setActLoader] = useState({});
+  const [isAlert, setIsAlert] = useState(false);
+  const [isErr, setIsErr] = useState(false);
  // For loop is used to calculate page numbers visible below table
  // Initialize pageNumbers using useMemo to avoid unnecessary re-creation
  const pageNumbers = useMemo(() => {
@@ -57,8 +61,34 @@ const ReportTable = ({
    localStorage.setItem("rowlevel", JSON.stringify(item));
    // localStorage.setItem("rowlevelMicro");
  };
-  const handlebtn = () => {
-    console.log("clicked");
+  const handlebtn = async (item) => {
+    if (ReportName === "Contactbook") {
+      setActLoader({ [item.objectId]: true });
+      try {
+        const url =
+          process.env.REACT_APP_SERVERURL + "/classes/contracts_Contactbook/";
+        const body = { IsDeleted: true };
+        const res = await axios.put(url + item.objectId, body, {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": localStorage.getItem("AppID12"),
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
+        });
+        // console.log("Res ", res.data);
+        if (res.data && res.data.updatedAt) {
+          setActLoader({});
+          setIsAlert(true);
+          const upldatedList = List.filter((x) => x.objectId !== item.objectId);
+          setList(upldatedList);
+        }
+      } catch (err) {
+        console.log("err", err);
+        setIsAlert(true);
+        setIsErr(true);
+        setActLoader({});
+      }
+    }
  };

  // Get current list
@@ -73,17 +103,27 @@ const ReportTable = ({

  return (
    <div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
+      {isAlert && (
+        <div
+          className={`alert alert-${isErr ? "danger" : "success"} alertBox`}
+          role="alert"
+          onAnimationEnd={() => setIsAlert(false)}
+        >
+          {isErr
+            ? "Something went wrong, Please try again later!"
+            : "Record deleted successfully!"}
+        </div>
+      )}
+
      <h2 className="text-[23px] font-light my-2">{ReportName}</h2>
      <table className="table-auto w-full border-collapse">
        <thead className="text-[14px]">
          <tr className="border-y-[1px]">
-            <th className="px-4 py-2 font-thin">Sr.No</th>
-            <th className="px-4 py-2 font-thin">Name</th>
-            <th className="px-4 py-2 font-thin">Note</th>
-            <th className="px-4 py-2 font-thin">Folder</th>
-            <th className="px-4 py-2 font-thin">File</th>
-            <th className="px-4 py-2 font-thin">Owner</th>
-            <th className="px-4 py-2 font-thin">Signers</th>
+            {heading?.map((item, index) => (
+              <React.Fragment key={index}>
+                <th className="px-4 py-2 font-thin">{item}</th>
+              </React.Fragment>
+            ))}
            {actions?.length > 0 && (
              <th className="px-4 py-2 font-thin">Action</th>
            )}
@@ -92,61 +132,115 @@ const ReportTable = ({
        <tbody className="text-[12px]">
          {List?.length > 0 ? (
            <>
-              {currentLists.map((item, index) => (
-                <tr className="border-y-[1px]" key={index}>
-                  <td className="px-4 py-2">{index + 1}</td>
-                  <td className="px-4 py-2 font-semibold">{item?.Name} </td>
-                  <td className="px-4 py-2">{item?.Note || "-"}</td>
-                  <td className="px-4 py-2">
-                    {item?.Folder?.Name || "OpenSignDrive"}
-                  </td>
-                  <td className="px-4 py-2">
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      title={item?.URL}
-                      href={item?.URL}
-                      download={item?.URL}
-                      className="text-[blue] hover:text-[blue] hover:underline"
-                    >
-                      {item?.URL ? "Download" : "-"}
-                    </a>
-                  </td>
+              {currentLists.map((item, index) =>
+                ReportName === "Contactbook" ? (
+                  <tr className="border-y-[1px]" key={index}>
+                    <td className="px-4 py-2">{index + 1}</td>
+                    <td className="px-4 py-2 font-semibold">{item?.Name} </td>
+                    <td className="px-4 py-2">{item?.Email || "-"}</td>
+                    <td className="px-4 py-2">{item?.Phone || "-"}</td>
+                    <td className="px-4 py-2 flex flex-col justify-center items-center gap-2 text-white">
+                      {actions?.length > 0 &&
+                        actions.map((act, index) => (
+                          <button
+                            key={index}
+                            onClick={() =>
+                              act?.redirectUrl
+                                ? handlemicroapp(item, act.redirectUrl)
+                                : handlebtn(item)
+                            }
+                            className={`flex justify-center items-center gap-1 px-2 py-1 rounded shadow`}
+                            style={{
+                              backgroundColor: act.btnColor
+                                ? act.btnColor
+                                : "#3ac9d6",
+                              color: act?.textColor ? act?.textColor : "white"
+                            }}
+                          >
+                            <span>
+                              {act?.btnIcon && (
+                                <i
+                                  className={
+                                    actLoader[item.objectId]
+                                      ? "fa-solid fa-spinner fa-spin-pulse"
+                                      : act.btnIcon
+                                  }
+                                ></i>
+                              )}
+                            </span>
+                            {act?.btnLabel && (
+                              <span className="uppercase">
+                                {act?.btnLabel ? act.btnLabel : "View"}
+                              </span>
+                            )}
+                          </button>
+                        ))}
+                    </td>
+                  </tr>
+                ) : (
+                  <tr className="border-y-[1px]" key={index}>
+                    <td className="px-4 py-2">{index + 1}</td>
+                    <td className="px-4 py-2 font-semibold">{item?.Name} </td>
+                    <td className="px-4 py-2">{item?.Note || "-"}</td>
+                    <td className="px-4 py-2">
+                      {item?.Folder?.Name || "OpenSignDrive"}
+                    </td>
+                    <td className="px-4 py-2">
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title={item?.URL}
+                        href={item?.URL}
+                        download={item?.URL}
+                        className="text-[blue] hover:text-[blue] hover:underline"
+                      >
+                        {item?.URL ? "Download" : "-"}
+                      </a>
+                    </td>

-                  <td className="px-4 py-2">{formatRow(item?.ExtUserPtr)}</td>
-                  <td className="px-4 py-2">
-                    {item?.Signers ? formatRow(item?.Signers) : "-"}
-                  </td>
-                  <td className="px-4 py-2 flex flex-col justify-center items-center gap-2 text-white">
-                    {actions?.length > 0 &&
-                      actions.map((act, index) => (
-                        <button
-                          key={index}
-                          onClick={() =>
-                            act?.redirectUrl
-                              ? handlemicroapp(item, act.redirectUrl)
-                              : handlebtn(item)
-                          }
-                          className={`flex justify-center items-center w-full gap-1 px-2 py-1 rounded shadow`}
-                          style={{
-                            backgroundColor: act.btnColor
-                              ? act.btnColor
-                              : "#3ac9d6",
-                            color: act?.textColor ? act?.textColor : "white"
-                          }}
-                        >
-                          <span>
-                            {act?.btnIcon && <i className={act.btnIcon}></i>}
-                          </span>
-                          <span className="uppercase">
-                            {act?.btnLabel ? act.btnLabel : "view"}
-                          </span>
-                        </button>
-                        // )
-                      ))}
-                  </td>
-                </tr>
-              ))}
+                    <td className="px-4 py-2">{formatRow(item?.ExtUserPtr)}</td>
+                    <td className="px-4 py-2">
+                      {item?.Signers ? formatRow(item?.Signers) : "-"}
+                    </td>
+                    <td className="px-4 py-2 flex flex-col justify-center items-center gap-2 text-white">
+                      {actions?.length > 0 &&
+                        actions.map((act, index) => (
+                          <button
+                            key={index}
+                            onClick={() =>
+                              act?.redirectUrl
+                                ? handlemicroapp(item, act.redirectUrl)
+                                : handlebtn(item)
+                            }
+                            className={`flex justify-center items-center w-full gap-1 px-2 py-1 rounded shadow`}
+                            style={{
+                              backgroundColor: act.btnColor
+                                ? act.btnColor
+                                : "#3ac9d6",
+                              color: act?.textColor ? act?.textColor : "white"
+                            }}
+                          >
+                            <span>
+                              {act?.btnIcon && (
+                                <i
+                                  className={
+                                    actLoader[item.objectId]
+                                      ? "fa-solid fa-spinner fa-spin-pulse"
+                                      : act.btnIcon
+                                  }
+                                ></i>
+                              )}
+                            </span>
+                            <span className="uppercase">
+                              {act?.btnLabel ? act.btnLabel : "view"}
+                            </span>
+                          </button>
+                          // )
+                        ))}
+                    </td>
+                  </tr>
+                )
+              )}
            </>
          ) : (
            <></>
@@ -2,11 +2,12 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import "../styles/loader.css";
 import GetDashboard from "../components/dashboard/GetDashboard";
-import { Navigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import Title from "../components/Title";
 import { save_tourSteps } from "../redux/actions";
 import { connect } from "react-redux";
 const Dashboard = (props) => {
+  const navigate = useNavigate();
  const { id } = useParams();
  const [dashboard, setdashboard] = useState([]);
  const [classnameArray, setclassnameArray] = useState([]);
@@ -15,6 +16,19 @@ const Dashboard = (props) => {
  const [parseAppId] = useState(localStorage.getItem("parseAppId"));
  const [defaultQuery, setDefaultQuery] = useState("");

+  useEffect(() => {
+    if (localStorage.getItem("accesstoken")) {
+      if (id !== undefined) {
+        getDashboard(id);
+      } else {
+        getDashboard(localStorage.getItem("PageLanding"));
+      }
+    } else {
+      navigate("/", { replace: true });
+    }
+    // eslint-disable-next-line
+  }, [id]);
+
  const getDashboard = async (id) => {
    setloading(true);
    try {
@@ -93,20 +107,6 @@ const Dashboard = (props) => {
    }
  };

-  useEffect(() => {
-    if (id !== undefined) {
-      getDashboard(id);
-    } else {
-      getDashboard(localStorage.getItem("PageLanding"));
-    }
-
-    // eslint-disable-next-line
-  }, [id]);
-
-  if (localStorage.getItem("accesstoken") === "" || null) {
-    return <Navigate to="/" />;
-  }
-
  let _dash = (
    <GetDashboard
      dashboard={dashboard}
@@ -1183,17 +1183,17 @@ function Login(props) {
                      </div>
                      <div className="form-group">
                        <label
-                          htmlFor="Destination"
+                          htmlFor="JobTitle"
                          style={{ display: "flex" }}
                          className="col-form-label"
                        >
-                          Destination{" "}
+                          Job Title
                          <span style={{ fontSize: 13, color: "red" }}>*</span>
                        </label>
                        <input
                          type="text"
                          className="form-control"
-                          id="Destination"
+                          id="JobTitle"
                          value={userDetails.Destination}
                          onChange={(e) =>
                            setUserDetails({
@@ -21,6 +21,9 @@ const PgSignUp = (props) => {
  });
  const [validationMessage, setValidationMessage] = useState("");
  const [isLoader, setIsLoader] = useState(true);
+  const [lengthValid, setLengthValid] = useState(false);
+  const [caseDigitValid, setCaseDigitValid] = useState(false);
+  const [specialCharValid, setSpecialCharValid] = useState(false);

  // below useEffect is used to fetch App data and save to redux state
  useEffect(() => {
@@ -104,21 +107,23 @@ const PgSignUp = (props) => {
  // "handleSubmit" is used to save user details signup him/her who come from plan-pricing page
  const handleSubmit = (e) => {
    e.preventDefault();
-    setIsLoader(true);
-    if (formData.password === formData.confirmPassword) {
-      const url = window.location.href;
-      let paramString = url.split("?")[1];
-      let queryString = new URLSearchParams(paramString);
-      // console.log("url ", queryString);
+    if (lengthValid && caseDigitValid && specialCharValid) {
+      setIsLoader(true);
+      if (formData.password === formData.confirmPassword) {
+        const url = window.location.href;
+        let paramString = url.split("?")[1];
+        let queryString = new URLSearchParams(paramString);
+        // console.log("url ", queryString);

-      let obj = { ...formData };
-      for (let pair of queryString.entries()) {
-        // console.log("Key is: " + pair[0]);
-        // console.log("Value is: " + pair[1]);
-        obj = { ...obj, [pair[0]]: pair[1] };
+        let obj = { ...formData };
+        for (let pair of queryString.entries()) {
+          // console.log("Key is: " + pair[0]);
+          // console.log("Value is: " + pair[1]);
+          obj = { ...obj, [pair[0]]: pair[1] };
+        }
+        saveUser(obj);
+        // console.log("obj ", obj);}
      }
-      saveUser(obj);
-      // console.log("obj ", obj);}
    }
  };
  const saveUser = async (obj) => {
@@ -194,6 +199,15 @@ const PgSignUp = (props) => {
    const newPassword = e.target.value;
    setFormData({ ...formData, [e.target.name]: e.target.value });
    validatePasswords(newPassword, formData.confirmPassword);
+
+    // Check conditions separately
+    setLengthValid(newPassword.length >= 8);
+    setCaseDigitValid(
+      /[a-z]/.test(newPassword) &&
+        /[A-Z]/.test(newPassword) &&
+        /\d/.test(newPassword)
+    );
+    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
  };
  const handleConFirmPassowordChange = (e) => {
    const newConfirmPassword = e.target.value;
@@ -485,6 +499,33 @@ const PgSignUp = (props) => {
            >
              {validationMessage}
            </div>
+            {formData.password.length > 0 && (
+              <div className="mt-1 text-[11px]">
+                <p
+                  className={`${
+                    lengthValid ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {lengthValid ? "✓" : "✗"} Password should be 8 characters long
+                </p>
+                <p
+                  className={`${
+                    caseDigitValid ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {caseDigitValid ? "✓" : "✗"} Password should contain uppercase
+                  letter, lowercase letter, digit
+                </p>
+                <p
+                  className={`${
+                    specialCharValid ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {specialCharValid ? "✓" : "✗"} Password should contain special
+                  character
+                </p>
+              </div>
+            )}
            <div className="clearfix">
              <button type="submit" className="signupbtn">
                Submit
@@ -136,8 +136,13 @@ const PlanSubscriptions = () => {
                          <p>{item.subtitle}</p>
                        </div>
                      </div>
+
                      <NavLink
-                        to={item.url + details}
+                        to={
+                          item.btnText === "Subscribe"
+                            ? item.url + details
+                            : item.url
+                        }
                        className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white"
                        target={item.target}
                      >
@@ -12,6 +12,7 @@ const Report = () => {
  const [isLoader, setIsLoader] = useState(true);
  const [reportName, setReportName] = useState("");
  const [actions, setActions] = useState([]);
+  const [heading, setHeading] = useState([]);
  const [isNextRecord, setIsNextRecord] = useState(false);
  const [isMoreDocs, setIsMoreDocs] = useState(true);
  const abortController = new AbortController();
@@ -47,6 +48,7 @@ const Report = () => {
    const json = reportJson(id);
    if (json) {
      setActions(json.actions);
+      setHeading(json.heading);
      setReportName(json.reportName);
      Parse.serverURL = localStorage.getItem("BaseUrl12");
      Parse.initialize(localStorage.getItem("AppID12"));
@@ -146,7 +148,9 @@ const Report = () => {
            <ReportTable
              ReportName={reportName}
              List={List}
+              setList={setList}
              actions={actions}
+              heading={heading}
              setIsNextRecord={setIsNextRecord}
              isMoreDocs={isMoreDocs}
              docPerPage={docPerPage}
@@ -25,92 +25,138 @@ const Signup = (props) => {
    toastDescription: ""
  });
  const [showPassword, setShowPassword] = useState(false);
+  const [lengthValid, setLengthValid] = useState(false);
+  const [caseDigitValid, setCaseDigitValid] = useState(false);
+  const [specialCharValid, setSpecialCharValid] = useState(false);
+
  const togglePasswordVisibility = () => setShowPassword(!showPassword);
  const image = props.appInfo.applogo;

+  const clearStorage = async () => {
+    if (Parse.User.current()) {
+      await Parse.User.logOut();
+    }
+    let baseUrl = localStorage.getItem("BaseUrl12");
+    let appid = localStorage.getItem("AppID12");
+    let applogo = localStorage.getItem("appLogo");
+    let domain = localStorage.getItem("domain");
+    let appversion = localStorage.getItem("appVersion");
+    let appTitle = localStorage.getItem("appTitle");
+    let defaultmenuid = localStorage.getItem("defaultmenuid");
+    let PageLanding = localStorage.getItem("PageLanding");
+    let _appName = localStorage.getItem("_appName");
+    let _app_objectId = localStorage.getItem("_app_objectId");
+    let appName = localStorage.getItem("appName");
+    let userSettings = localStorage.getItem("userSettings");
+
+    localStorage.clear();
+
+    localStorage.setItem("BaseUrl12", baseUrl);
+    localStorage.setItem("AppID12", appid);
+    localStorage.setItem("appLogo", applogo);
+    localStorage.setItem("domain", domain);
+    localStorage.setItem("appversion", appversion);
+    localStorage.setItem("appTitle", appTitle);
+    localStorage.setItem("defaultmenuid", defaultmenuid);
+    localStorage.setItem("PageLanding", PageLanding);
+    localStorage.setItem("_appName", _appName);
+    localStorage.setItem("_app_objectId", _app_objectId);
+    localStorage.setItem("appName", appName);
+    localStorage.setItem("userSettings", userSettings);
+    localStorage.setItem("baseUrl", baseUrl);
+    localStorage.setItem("parseAppId", appid);
+  };
  const handleSubmit = (event) => {
-    setState({ loading: true });
-    const userDetails = {
-      name: name,
-      email: email,
-      phone: phone,
-      company: company,
-      jobTitle: jobTitle
-    };
-    localStorage.setItem("userDetails", JSON.stringify(userDetails));
-    try {
-      event.preventDefault();
-      Parse.serverURL = parseBaseUrl;
-      Parse.initialize(parseAppId);
-      event.preventDefault();
-      var user = new Parse.User();
-      user.set("name", name);
-      user.set("email", email);
-      user.set("password", password);
-      user.set("phone", phone);
-      user.set("username", email);
-      let res = user.save();
-      res
-        .then(async (r) => {
-          if (r) {
-            let roleData = props.appInfo.settings;
-            if (roleData && roleData.length > 0) {
-              const params = {
-                userDetails: {
-                  jobTitle: jobTitle,
-                  company: company,
-                  name: name,
-                  email: email,
-                  phone: phone,
-                  role: props.appInfo.defaultRole
+    event.preventDefault();
+    if (lengthValid && caseDigitValid && specialCharValid) {
+      clearStorage();
+      setState({ loading: true });
+      const userDetails = {
+        name: name,
+        email: email,
+        phone: phone,
+        company: company,
+        jobTitle: jobTitle
+      };
+      localStorage.setItem("userDetails", JSON.stringify(userDetails));
+      try {
+        Parse.serverURL = parseBaseUrl;
+        Parse.initialize(parseAppId);
+        event.preventDefault();
+        var user = new Parse.User();
+        user.set("name", name);
+        user.set("email", email);
+        user.set("password", password);
+        user.set("phone", phone);
+        user.set("username", email);
+        let res = user.save();
+        res
+          .then(async (r) => {
+            if (r) {
+              let roleData = props.appInfo.settings;
+              if (roleData && roleData.length > 0) {
+                const params = {
+                  userDetails: {
+                    jobTitle: jobTitle,
+                    company: company,
+                    name: name,
+                    email: email,
+                    phone: phone,
+                    role: props.appInfo.defaultRole
+                  }
+                };
+                try {
+                  const usersignup = await Parse.Cloud.run(
+                    "usersignup",
+                    params
+                  );
+                  if (usersignup) {
+                    handleNavigation(r.getSessionToken());
+                  }
+                } catch (err) {
+                  alert(err.message);
+                  setState({ loading: false });
                }
-              };
-              try {
-                const usersignup = await Parse.Cloud.run("usersignup", params);
-                if (usersignup) {
-                  handleNavigation(r.getSessionToken());
+              }
+            }
+          })
+          .catch(async (err) => {
+            if (err.code === 202) {
+              const params = { email: email };
+              const res = await Parse.Cloud.run("getUserDetails", params);
+              // console.log("Res ", res);
+              if (res) {
+                alert("User already exists with this username!");
+                setState({ loading: false });
+              } else {
+                let baseUrl = localStorage.getItem("BaseUrl12");
+                let parseAppId = localStorage.getItem("AppID12");
+                // console.log("state.email ", email);
+                try {
+                  Parse.serverURL = baseUrl;
+                  Parse.initialize(parseAppId);
+                  await Parse.User.requestPasswordReset(email).then(
+                    async function (res1) {
+                      if (res1.data === undefined) {
+                        alert(
+                          "Verification mail has been sent to your E-mail!"
+                        );
+                      }
+                    }
+                  );
+                } catch (err) {
+                  console.log(err);
                }
-              } catch (err) {
-                alert(err.message);
                setState({ loading: false });
              }
-            }
-          }
-        })
-        .catch(async (err) => {
-          if (err.code === 202) {
-            const params = { email: email };
-            const res = await Parse.Cloud.run("getUserDetails", params);
-            // console.log("Res ", res);
-            if (res) {
-              alert("User already exists with this username!");
-              setState({ loading: false });
            } else {
-              let baseUrl = localStorage.getItem("BaseUrl12");
-              let parseAppId = localStorage.getItem("AppID12");
-              // console.log("state.email ", email);
-              try {
-                Parse.serverURL = baseUrl;
-                Parse.initialize(parseAppId);
-                await Parse.User.requestPasswordReset(email).then(
-                  async function (res1) {
-                    if (res1.data === undefined) {
-                      alert("Verification mail has been sent to your E-mail!");
-                    }
-                  }
-                );
-              } catch (err) {
-                console.log(err);
-              }
+              alert(err.message);
              setState({ loading: false });
            }
-          } else {
-            alert(err.message);
-            setState({ loading: false });
-          }
-        });
-    } catch (error) {
-      console.log("err ", error);
+          });
+      } catch (error) {
+        console.log("err ", error);
+      }
    }
  };

@@ -396,6 +442,19 @@ const Signup = (props) => {
    // eslint-disable-next-line
  }, []);

+  const handlePasswordChange = (e) => {
+    const newPassword = e.target.value;
+    setPassword(newPassword);
+
+    // Check conditions separately
+    setLengthValid(newPassword.length >= 8);
+    setCaseDigitValid(
+      /[a-z]/.test(newPassword) &&
+        /[A-Z]/.test(newPassword) &&
+        /\d/.test(newPassword)
+    );
+    setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
+  };
  return (
    <div className="bg-white">
      {state.loading && (
@@ -508,7 +567,7 @@ const Signup = (props) => {
                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                          name="password"
                          value={password}
-                          onChange={(e) => setPassword(e.target.value)}
+                          onChange={(e) => handlePasswordChange(e)}
                          required
                        />
                        <span
@@ -524,6 +583,38 @@ const Signup = (props) => {
                          )}
                        </span>
                      </div>
+                      {password.length > 0 && (
+                        <div className="mt-1 text-[11px]">
+                          <p
+                            className={`${
+                              lengthValid ? "text-green-600" : "text-red-600"
+                            }`}
+                          >
+                            {lengthValid ? "✓" : "✗"} Password should be 8
+                            characters long
+                          </p>
+                          <p
+                            className={`${
+                              caseDigitValid ? "text-green-600" : "text-red-600"
+                            }`}
+                          >
+                            {caseDigitValid ? "✓" : "✗"} Password should contain
+                            uppercase letter, lowercase letter, digit
+                          </p>
+                          <p
+                            className={`${
+                              specialCharValid
+                                ? "text-green-600"
+                                : "text-red-600"
+                            }`}
+                          >
+                            {specialCharValid ? "✓" : "✗"} Password should
+                            contain special character
+                          </p>
+                          {/* </>
+                          )} */}
+                        </div>
+                      )}
                    </div>
                  </div>
                  <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
@@ -158,124 +158,126 @@ function UserProfile() {
          ></div>
        </div>
      ) : (
-        <div className="bg-white flex flex-col justify-center shadow rounded">
-          <div className="flex flex-col justify-center items-center my-4">
-            <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
-              <img
-                className="object-contain w-full h-full"
-                src={Image === "" ? dp : Image}
-                alt="dp"
-              />
-            </div>
-            {editmode && (
-              <input
-                type="file"
-                className="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] text-black rounded"
-                accept="image/png, image/gif, image/jpeg"
-                onChange={(e) => {
-                  let files = e.target.files;
-                  fileUpload(files[0]);
-                }}
-              />
-            )}
-            {percentage !== 0 && (
-              <div className="flex items-center gap-x-2">
-                <div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
-                  <div
-                    className="h-2 rounded-full bg-blue-500"
-                    style={{ width: `${percentage}%` }}
-                  ></div>
-                </div>
-                <span className="text-black text-sm">{percentage}%</span>
+        <div className="flex justify-center items-center w-full">
+          <div className="bg-white flex flex-col justify-center shadow rounded w-[450px]">
+            <div className="flex flex-col justify-center items-center my-4">
+              <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
+                <img
+                  className="object-contain w-full h-full"
+                  src={Image === "" ? dp : Image}
+                  alt="dp"
+                />
+              </div>
+              {editmode && (
+                <input
+                  type="file"
+                  className="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] text-black rounded"
+                  accept="image/png, image/gif, image/jpeg"
+                  onChange={(e) => {
+                    let files = e.target.files;
+                    fileUpload(files[0]);
+                  }}
+                />
+              )}
+              {percentage !== 0 && (
+                <div className="flex items-center gap-x-2">
+                  <div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
+                    <div
+                      className="h-2 rounded-full bg-blue-500"
+                      style={{ width: `${percentage}%` }}
+                    ></div>
+                  </div>
+                  <span className="text-black text-sm">{percentage}%</span>
+                </div>
+              )}
+              <div className="text-base font-semibold pt-4">
+                {localStorage.getItem("_user_role")}
              </div>
-            )}
-            <div className="text-base font-semibold pt-4">
-              {localStorage.getItem("_user_role")}
            </div>
-          </div>
-          <ul className="w-full flex flex-col p-2 text-sm">
-            <li
-              className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                editmode ? "py-1" : "py-2"
-              }`}
-            >
-              <span>Name:</span>{" "}
-              {editmode ? (
-                <input
-                  type="text"
-                  value={name}
-                  className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
-                  onChange={(e) => SetName(e.target.value)}
-                />
-              ) : (
-                <span>{localStorage.getItem("username")}</span>
-              )}
-            </li>
-            <li
-              className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                editmode ? "py-1" : "py-2"
-              }`}
-            >
-              <span>Phone:</span>{" "}
-              {editmode ? (
-                <input
-                  type="text"
-                  className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
-                  onChange={(e) => SetPhone(e.target.value)}
-                  value={Phone}
-                />
-              ) : (
-                <span>{UserProfile && UserProfile.phone}</span>
-              )}
-            </li>
-            <li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
-              <span>Email:</span>{" "}
-              <span>{UserProfile && UserProfile.email}</span>
-            </li>
-            <li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
-              <span>Is Email verified:</span>{" "}
-              <span>
-                {UserProfile && UserProfile.emailVerified
-                  ? "Verified"
-                  : "Not verified"}
-              </span>
-            </li>
-          </ul>
-          <div className="flex justify-center pb-4">
-            {editmode ? (
-              <button
-                type="button"
-                onClick={handleSubmit}
-                className="rounded  bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-2 mr-4"
+            <ul className="w-full flex flex-col p-2 text-sm">
+              <li
+                className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
+                  editmode ? "py-1" : "py-2"
+                }`}
              >
-                Save
-              </button>
-            ) : (
+                <span className="font-semibold">Name:</span>{" "}
+                {editmode ? (
+                  <input
+                    type="text"
+                    value={name}
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    onChange={(e) => SetName(e.target.value)}
+                  />
+                ) : (
+                  <span>{localStorage.getItem("username")}</span>
+                )}
+              </li>
+              <li
+                className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
+                  editmode ? "py-1" : "py-2"
+                }`}
+              >
+                <span className="font-semibold">Phone:</span>{" "}
+                {editmode ? (
+                  <input
+                    type="text"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    onChange={(e) => SetPhone(e.target.value)}
+                    value={Phone}
+                  />
+                ) : (
+                  <span>{UserProfile && UserProfile.phone}</span>
+                )}
+              </li>
+              <li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
+                <span className="font-semibold">Email:</span>{" "}
+                <span>{UserProfile && UserProfile.email}</span>
+              </li>
+              <li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
+                <span className="font-semibold">Is Email verified:</span>{" "}
+                <span>
+                  {UserProfile && UserProfile.emailVerified
+                    ? "Verified"
+                    : "Not verified"}
+                </span>
+              </li>
+            </ul>
+            <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">
+              {editmode ? (
+                <button
+                  type="button"
+                  onClick={handleSubmit}
+                  className="rounded shadow focus:outline-none border-[2px] border-[#15b4e9] bg-white text-[#15b4e9] px-4 py-2 mr-4"
+                >
+                  Save
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setEditMode(true);
+                  }}
+                  className="rounded shadow focus:outline-none text-white bg-[#e7505a] px-4 py-2 mr-4"
+                >
+                  Edit
+                </button>
+              )}
              <button
                type="button"
                onClick={() => {
-                  setEditMode(true);
+                  if (editmode) {
+                    setEditMode(false);
+                  } else {
+                    navigate("/changepassword");
+                  }
                }}
-                className="rounded shadow text-white bg-[#e7505a] px-4 py-2 mr-4"
+                className={`rounded shadow focus:outline-none text-white bg-[#3598dc]  ${
+                  editmode ? "px-4 py-2 " : "p-2"
+                }`}
              >
-                Edit
+                {editmode ? "Cancel" : "Change Password"}
              </button>
-            )}
-            <button
-              type="button"
-              onClick={() => {
-                if (editmode) {
-                  setEditMode(false);
-                } else {
-                  navigate("/changepassword");
-                }
-              }}
-              className={`rounded shadow text-white bg-[#3598dc]  ${
-                editmode ? "px-4 py-2 " : "p-2"
-              }`}
-            >
-              {editmode ? "Cancel" : "Change Password"}
-            </button>
+            </div>
          </div>
        </div>
      )}
@@ -0,0 +1,36 @@
+.alertBox {
+    z-index: 1;
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 13px;
+    animation: inAnimation 2s ease-in-out;
+}
+
+@keyframes inAnimation {
+    0% {
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    25% {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    50% {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    75% {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    100% {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
@@ -16,6 +16,7 @@ async function ContactbookAftersave(request) {
      acl.setWriteAccess(object.get('UserId'), true);

      object.setACL(acl);
+      object.set('IsDeleted', false)
      // Continue saving the object
      return object.save(null, { useMasterKey: true });
    }
@@ -16,9 +16,9 @@ export default async function getDrive(request) {
    if (userId) {
      let url;
      if (docId) {
-        url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"$or":[{"CreatedBy":{"$exists":false}},{"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}]}&include=ExtUserPtr,Signers,Folder`;
+        url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}&include=ExtUserPtr,Signers,Folder`;
      } else {
-        url = `${classUrl}?where={"Folder":{"$exists":false},"$or":[{"CreatedBy":{"$exists":false}},{"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}]}&include=ExtUserPtr,Signers`;
+        url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}&include=ExtUserPtr,Signers`;
      }
      try {
        const res = await axios.get(url, {
@@ -1,5 +1,5 @@
 import reportJson from './reportsJson.js';
-import axios from 'axios'
+import axios from 'axios';

 export default async function getReport(request) {
  const reportId = request.params.reportId;
@@ -19,6 +19,7 @@ export default async function getReport(request) {
    const userId = userRes.data && userRes.data.objectId;
    if (userId) {
      const json = reportId && reportJson(reportId, userId);
+      const clsName = reportId === '5KhaPr482K' ? 'contracts_Contactbook' : 'contracts_Document';
      if (json) {
        const { params, keys } = json;
        const orderBy = '-updatedAt';
@@ -29,7 +30,7 @@ export default async function getReport(request) {
          'X-Parse-Application-Id': appId,
          'X-Parse-Master-Key': process.env.MASTER_KEY,
        };
-        const url = `${serverUrl}/classes/contracts_Document?where=${strParams}&keys=${strKeys}&order=${orderBy}&skip=${skip}&limit=${limit}&include=AuditTrail.UserPtr`;
+        const url = `${serverUrl}/classes/${clsName}?where=${strParams}&keys=${strKeys}&order=${orderBy}&skip=${skip}&limit=${limit}&include=AuditTrail.UserPtr`;
        const res = await axios.get(url, { headers: headers });
        if (res.data && res.data.results) {
          return res.data.results;
@@ -198,6 +198,20 @@ export default function reportJson(id, userId) {
        },
        keys: ['Name', 'Note', 'Folder.Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name'],
      };
+    // contact book report
+    case '5KhaPr482K':
+      return {
+        reportName: 'Contactbook',
+        params: {
+          CreatedBy: {
+            __type: 'Pointer',
+            className: '_User',
+            objectId: currentUserId,
+          },
+          IsDeleted: { $ne: true },
+        },
+        keys: ['Name', 'Email', 'Phone'],
+      };
    default:
      return null;
  }
@@ -0,0 +1,556 @@
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.up = async Parse => {
+  const className = 'w_menu';
+  const userMenu = new Parse.Query(className);
+  const updateUserMenu = await userMenu.get('H9vRfEYKhT');
+  updateUserMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+        {
+          icon: 'fa-solid fa-address-book',
+          title: 'Contactbook',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '5KhaPr482K',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+      ],
+    },
+  ]);
+
+  const AdminMenu = new Parse.Query(className);
+  const updateAdminMenu = await AdminMenu.get('VPh91h0ZHk');
+  updateAdminMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+        {
+          icon: 'fa-solid fa-address-book',
+          title: 'Contactbook',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '5KhaPr482K',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+        {
+          icon: 'far fa-user',
+          title: 'Add User',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'lM0xRnM3iE',
+        },
+      ],
+    },
+  ]);
+  // TODO: Set the schema here
+  // Example:
+  // schema.addString('name').addNumber('cash');
+  const batch = [updateUserMenu, updateAdminMenu];
+  return Parse.Object.saveAll(batch, { useMasterKey: true });
+};
+
+/**
+ *
+ * @param {Parse} Parse
+ */
+exports.down = async Parse => {
+  // TODO: set className here
+  const className = 'w_menu';
+  const userMenu = new Parse.Query(className);
+  const revertUserMenu = await userMenu.get('H9vRfEYKhT');
+  revertUserMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+      ],
+    },
+  ]);
+
+  const adminMenu = new Parse.Query(className);
+  const revertAdminMenu = await adminMenu.get('VPh91h0ZHk');
+  revertAdminMenu.set('menuItems', [
+    {
+      icon: 'fas fa-tachometer-alt',
+      title: 'Dashboard',
+      target: '',
+      pageType: 'dashboard',
+      description: '',
+      objectId: '35KBoSgoAK',
+    },
+    {
+      icon: 'far fa-newspaper',
+      title: 'New Document',
+      target: '_self',
+      pageType: null,
+      description: null,
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-nib',
+          title: 'Sign yourself',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'sHAnZphf69',
+        },
+        {
+          icon: 'fas fa-file-signature',
+          title: 'Request signatures',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: '8mZzFxbG1z',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-folder',
+      title: 'OpenSignDrive™',
+      target: '_self',
+      pageType: 'mf',
+      description: '',
+      objectId:
+        'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive',
+    },
+    {
+      icon: 'fas fa-address-card',
+      title: 'Reports',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-signature',
+          title: 'Need your sign',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '4Hhwbp482K',
+        },
+        {
+          icon: 'fas fa-tasks',
+          title: 'In Progress',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: '1MwEuxLEkF',
+        },
+        {
+          icon: 'fas fa-check-circle',
+          title: 'Completed',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'kQUoW4hUXz',
+        },
+        {
+          icon: 'fas fa-edit',
+          title: 'Drafts',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'ByHuevtCFY',
+        },
+        {
+          icon: 'fas fa-times-circle',
+          title: 'Declined',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'UPr2Fm5WY3',
+        },
+        {
+          icon: 'fas fa-hourglass-end',
+          title: 'Expired',
+          target: '_self',
+          pageType: 'report',
+          description: '',
+          objectId: 'zNqBHXHsYH',
+        },
+      ],
+    },
+    {
+      icon: 'fas fa-cog',
+      title: 'Settings',
+      target: '_self',
+      pageType: null,
+      description: '',
+      objectId: null,
+      children: [
+        {
+          icon: 'fas fa-pen-fancy',
+          title: 'My Signature',
+          target: '_self',
+          pageType: 'mf',
+          description: '',
+          objectId:
+            'remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/managesign',
+        },
+        {
+          icon: 'far fa-user',
+          title: 'Add User',
+          target: '_self',
+          pageType: 'form',
+          description: '',
+          objectId: 'lM0xRnM3iE',
+        },
+      ],
+    },
+  ]);
+  // TODO: Set the schema here
+  // Example:
+  // schema.addString('name').addNumber('cash');
+  const batch = [revertUserMenu, revertAdminMenu];
+  return Parse.Object.saveAll(batch, { useMasterKey: true });
+};
@@ -18,6 +18,7 @@ import FSFilesAdapter from 'parse-server-fs-adapter';
 import AWS from 'aws-sdk';
 import { app as customRoute } from './cloud/customRoute/customApp.js';
 import { exec } from 'child_process';
+import { createTransport } from 'nodemailer';

 const spacesEndpoint = new AWS.Endpoint(process.env.DO_ENDPOINT);
 // console.log("configuration ", configuration);
@@ -169,12 +170,6 @@ app.get('/', function (req, res) {
  res.status(200).send('open-sign-server is running !!!');
 });

-// There will be a test page available on the /test path of your server url
-// Remove this before launching your app
-app.get('/test', function (req, res) {
-  res.sendFile(path.join(__dirname, '/public/test.html'));
-});
-
 if (!process.env.TESTING) {
  const port = process.env.PORT || 8080;
  const httpServer = http.createServer(app);
@@ -1,4 +1,5 @@
-[{
+[
+  {
    "_id": "H9vRfEYKhT",
    "_created_at": {
      "$date": "2023-09-04T14:04:00.669Z"
@@ -105,6 +106,14 @@
            "pageType": "report",
            "description": "",
            "objectId": "zNqBHXHsYH"
+          },
+          {
+            "icon": "fa-solid fa-address-book",
+            "title": "Contactbook",
+            "target": "_self",
+            "pageType": "report",
+            "description": "",
+            "objectId": "5KhaPr482K"
          }
        ]
      },
@@ -237,6 +246,14 @@
            "pageType": "report",
            "description": "",
            "objectId": "zNqBHXHsYH"
+          },
+          {
+            "icon": "fa-solid fa-address-book",
+            "title": "Contactbook",
+            "target": "_self",
+            "pageType": "report",
+            "description": "",
+            "objectId": "5KhaPr482K"
          }
        ]
      },
@@ -269,4 +286,5 @@
    ],
    "menuTitle": "Admin Menu",
    "menuType": "Side Menu"
-  }]
+  }
+]
@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::
@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
@@ -0,0 +1,17 @@
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png
@@ -0,0 +1,26 @@
+# Overview
+
+OpenSign™ API offers a robust suite of functionalities for digital document management and electronic signatures. Designed to cater to a wide array of business needs, the API facilitates the creation, signing, and management of digital documents. It ensures secure and efficient processes, complying with international legal standards for electronic signatures.
+
+# Key Features
+
+- **Document Creation**: Allows for the generation of digital documents directly through the API.
+- **Template Creation**: Supports the creation and management of document templates for consistent use across various applications.
+- **Electronic Signature Integration**: Provides capabilities for incorporating electronic signatures into documents.
+- **User Management**: Facilitates the management of user accounts, permissions, and roles within an application.
+- **Contacts Management**: Enables efficient handling of contact information and integration with document processes.
+- **Compliance and Security**: Ensures all operations adhere to global legal standards for electronic signatures and data security.
+- **Customization and Flexibility**: Offers highly customizable workflows, tailored to meet diverse organizational requirements.
+- **Cross-Platform Compatibility**: Assures seamless functionality across various platforms and devices.
+
+# Target Audience
+
+- **Developers and IT Professionals**: Implementing digital document management and electronic signature solutions.
+- **Businesses and Enterprises**: Seeking efficient and secure digital document workflows.
+- **Legal and Compliance Teams**: Requiring digital solutions compliant with legal standards for signatures and document management.
+
+# Usage Scenarios
+
+- Streamlining contract creation and signing processes in corporate environments.
+- Managing user permissions and contacts for large-scale document workflows.
+- Utilizing templates for standardized document processes in legal, financial, and governmental sectors.
@@ -0,0 +1,71 @@
+---
+sidebar_position: 1
+title: Code of conduct
+---
+
+# Code of Conduct for OpenSign
+
+## 1. Introduction
+
+A primary goal of OpenSign is to be inclusive to the largest number of contributors, with the most varied and diverse backgrounds possible. As such, we are committed to providing a friendly, safe, and welcoming environment for all, regardless of gender, sexual orientation, ability, ethnicity, socioeconomic status, and religion (or lack thereof).
+
+This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior.
+
+We invite all those who participate in OpenSign to help us create safe and positive experiences for everyone.
+
+## 2. Open Source Citizenship
+
+A supplemental goal of this Code of Conduct is to increase open source citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community.
+
+Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society.
+
+## 3. Expected Behavior
+
+The following behaviors are expected and requested of all community members:
+
+- Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.
+- Exercise consideration and respect in your speech and actions.
+- Attempt collaboration before conflict.
+- Refrain from demeaning, discriminatory, or harassing behavior and speech.
+- Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
+
+## 4. Unacceptable Behavior
+
+The following behaviors are considered harassment and are unacceptable within our community:
+
+- Violence, threats of violence, or violent language directed against another person.
+- Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.
+- Posting or displaying sexually explicit or violent material.
+- Posting or threatening to post other people’s personally identifying information ("doxing").
+- Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.
+- Inappropriate photography or recording.
+- Inappropriate physical contact. You should have someone’s consent before touching them.
+- Unwelcome sexual attention. This includes sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.
+- Deliberate intimidation, stalking or following (online or in person).
+- Advocating for, or encouraging, any of the above behavior.
+
+## 5. Consequences of Unacceptable Behavior
+
+Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated.
+
+Anyone asked to stop unacceptable behavior is expected to comply immediately.
+
+If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event).
+
+## 6. Reporting Guidelines
+
+If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible by emailing [contact@opensignlabs.com](mailto:contact@opensignlabs.com).
+
+[Reporting guidelines](REPORTING_GUIDELINES.md)
+
+## 7. Addressing Grievances
+
+If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify the OpenSign administration with a concise description of your grievance. Your grievance will be handled in accordance with our existing governing policies.
+
+## 8. Scope
+
+We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues—online and in-person—as well as in all one-on-one communications pertaining to community business.
+
+## 9. Contact info
+
+[contact@opensignlabs.com](mailto:contact@opensignlabs.com)
@@ -0,0 +1,8 @@
+# Community at OpenSign™
+
+Welcome to the OpenSign™ Community page! OpenSign™ is dedicated to fostering a vibrant and engaging community where members can connect, share ideas and collaborate on the OpenSign™ project. This page provides links to our active social media platforms and community channels, offering various ways for you to join and participate in the OpenSign™ community. Whether you're looking for support, eager to contribute or just want to stay updated, you'll find a platform that suits your preference. Connect with us on Discord for real-time discussions, follow us on Twitter for the latest updates, engage with our professional network on LinkedIn or join our Facebook group for a broader community experience. Join us in our mission to develop OpenSign™ as the premier open-source [alternative to DocuSign](https://www.opensignlabs.com).
+
+- [Discord](https://discord.com/invite/xe9TDuyAyj)
+- [Twitter](https://www.twitter.com/opensignhq)
+- [LinkedIn](https://www.linkedin.com/company/opensign™/)
+- [Facebook](https://www.facebook.com/profile.php?id=61551030403669)
@@ -0,0 +1,50 @@
+---
+sidebar_position: 4
+title: Installation instructions
+---
+
+# INSTALLATION INSTRUCTIONS
+
+You can use our app as a cloud version from [OpenSignLabs](https://www.opensignlabs.com)
+
+or follow below instructions to install it on your own infrastructure.
+
+- Localhost(Frontend only)
+- Localhost(Docker)
+
+## Localhost(Frontend only)
+
+This is the easiest way to run the frontend application for development or testing purpose without the hassle of installing backend & DB. All the features including document upload, signing, email notifications will work seamlessly from staging backend.
+
+**Warning:** All data, including user accounts and documents, is stored in the staging backend. This data will be erased every time there is a merge to the main branch. As a result, you may need to recreate user accounts repeatedly. If you find that login attempts are failing, it is likely because the data has been cleared due to a recent merge.
+
+Below are the steps to follow -
+- [Clone the repository](https://help.github.com/articles/cloning-a-repository/) to your local machine using below command -
+  ```
+  git clone https://github.com/OpenSignLabs/OpenSign.git
+  ```
+- Switch to the newly created OpenSign directory.
+  ```
+  cd OpenSign
+  ```  
+- Copy the .env.frontend_dev file to  apps/OpenSign/.env using below command(on mac & linux). For windows use COPY command instead.
+  ```
+  cp .env.frontend_dev apps/OpenSign/.env
+  ```
+- Switch to apps/OpenSign directory.
+  ```
+  cd apps/OpenSign
+  ```  
+- Install NPM packages using
+  ```
+  npm install
+  ```
+- Run the project locally using
+  ```
+  npm run start-dev
+  ```
+You should be able to access the application from http://localhost:3000 after this.
+Create an account by signing-up and start contributing.
+
+## Localhost(Docker)
+- Please refer this documentation => [click here](https://docs.opensignlabs.com/docs/self-host/docker/run-locally) 
@@ -0,0 +1,59 @@
+
+# OpenSign™ Reporting Guidelines
+
+This document provides guidelines for reporting issues, suggesting enhancements, and submitting pull requests to the [OpenSign™ GitHub repository](https://github.com/OpenSignLabs/OpenSign). Adhering to these guidelines helps maintain the project's quality and efficiency.
+
+## Issues
+
+When creating an issue, include the following:
+
+### Bug Reports
+
+- **Title**: Concise and informative.
+- **Description**: Detailed description of the issue.
+- **Steps to Reproduce**: Clear steps to reproduce the bug.
+- **Expected Behavior**: Describe what you expected to happen.
+- **Actual Behavior**: Describe what actually happened.
+- **Screenshots**: If applicable, add screenshots to help explain your issue.
+- **Environment**: Include details like OS, browser version, and OpenSign™ version.
+- **Logs**: Attach relevant logs or error messages.
+
+### Feature Requests
+
+- **Title**: Short and descriptive.
+- **Description**: Detailed explanation of the feature and its benefits.
+- **Use Case**: Describe a specific use case or problem this feature addresses.
+- **Proposed Solution**: If possible, suggest an implementation idea.
+- **Additional Context**: Any other information or screenshots.
+
+## Pull Requests
+
+For submitting pull requests, follow these steps:
+
+- **Branch Naming**: Use a short, descriptive name for your branch.
+- **Commit Messages**: Write clear, concise commit messages.
+- **Description**: Provide a detailed description of changes.
+- **Testing**: Describe testing done to validate the changes.
+- **Documentation**: Update relevant documentation.
+- **Screenshots**: Include before and after screenshots for UI changes.
+
+## Code of Conduct
+
+All contributors are expected to follow the project's [Code of Conduct](https://docs.opensignlabs.com/docs/contribute/CODE_OF_CONDUCT).
+
+## Getting Help
+
+If you need help or have questions:
+
+- Visit our [GitHub Discussions](https://github.com/OpenSignLabs/OpenSign/discussions) page.
+- Contact us through our [Discord community](https://discord.com/invite/xe9TDuyAyj).
+
+## Stay Connected
+
+- [Twitter](https://twitter.com/OpenSignHQ)
+- [Facebook](https://www.facebook.com/profile.php?id=61551030403669)
+- [LinkedIn](https://www.linkedin.com/company/opensign%E2%84%A2/)
+- [YouTube](https://www.youtube.com/@opensignhq)
+- [Website](http://www.opensignlabs.com)
+
+Thank you for contributing to OpenSign™!
@@ -0,0 +1,74 @@
+---
+sidebar_position: 1
+---
+
+# Contributing to OpenSign
+
+Hello there! Thank you for considering contributing to OpenSign, the open-source alternative to DocuSign. OpenSign is not just a project, but a community endeavor that aims to create a robust, user-friendly, and secure electronic signature solution. Your contributions, irrespective of their size, are valuable in making this vision a reality.
+
+## Table of Contents
+
+1. [Getting Started](#getting-started)
+2. [Code of Conduct](#code-of-conduct)
+3. [How Can I Contribute?](#how-can-i-contribute)
+    - [Reporting Bugs](#reporting-bugs)
+    - [Suggesting Enhancements](#suggesting-enhancements)
+    - [Pull Requests](#pull-requests)
+4. [Style Guidelines](#style-guidelines)
+    - [Git Commit Messages](#git-commit-messages)
+    - [JavaScript Style Guide](#javascript-style-guide)
+5. [Community](#community)
+6. [License](#license)
+
+## Getting Started
+
+- Fork the [OpenSign repository](https://github.com/OpenSignLabs/OpenSign) to your GitHub account.
+- Clone your fork locally: `git clone https://github.com/your-username/OpenSign.git`
+- Create a new branch for your contribution: `git checkout -b feature/your-feature-name`
+- Make your contributions.
+- Push your branch to your fork: `git push origin feature/your-feature-name`
+- Create a Pull Request from your fork to the OpenSign repository.
+
+## Code of Conduct
+
+We expect all our contributors to adhere to the [Code of Conduct](CODE_OF_CONDUCT.md). Please read it thoroughly before contributing.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+- Check the [Issues](https://github.com/OpenSignLabs/OpenSign/issues) to see if the bug has already been reported. If it has, add any additional information in the comments.
+- If the bug hasn’t been reported, create a new issue. Please provide as much information as possible to help maintainers reproduce the bug.
+
+### Suggesting Enhancements
+
+- Use the [Issues](https://github.com/OpenSignLabs/OpenSign/issues) section to suggest any enhancements or new features.
+- Clearly describe your suggestion, explaining the problem it solves or the functionality it adds.
+
+### Pull Requests
+
+- Ensure any install or build dependencies are removed before the end of the layer when doing a build.
+- Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations, and container parameters.
+- You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.
+
+## Style Guidelines
+
+### Git Commit Messages
+
+- Use the present tense ("Add feature" not "Added feature")
+- Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
+- Limit the first line to 72 characters or less
+
+### JavaScript Style Guide
+
+Adhere to the [Standard JavaScript Style Guide](https://standardjs.com).
+
+## Community
+
+Engage with the community on our [Gitter Channel](https://gitter.im/OpenSignLabs/community) or join our monthly community calls. Details can be found on our [Community Page](COMMUNITY.md).
+
+## License
+
+By contributing, you agree that your contributions will be licensed under its [AGPL v3 License](https://github.com/OpenSignLabs/OpenSign/LICENSE).
+
+---
@@ -0,0 +1,10 @@
+---
+sidebar_position: 2
+title: Why am I getting 'Ensure this field is accurately filled and meets all requirements'?
+---
+
+# Why am I getting 'Ensure this field is accurately filled and meets all requirements'?
+This happens when you leave a field blank or when you don’t enter correct values in the field, for example not entering email address in correct format. 
+At OpenSign we constantly try to improve the user experience our platform offers, in the latest version of OpenSign the field for which the validation has failed is automatically highlighted making it easy to identify & fix the incorrect values being entered.
+You can check the bookmark icons on the page previews on the left hand side to quickly find all the pages that have fields meant to be filled by you.
+<img width="362" alt="image" src="https://github.com/OpenSignLabs/OpenSign/assets/5486116/0e9458d1-3013-4af8-a98f-c7ff01d5d4f2" />
@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+title: Why is there no dropdown list when I sign a document myself?
+---
+
+# Why is there no dropdown list when I sign a document myself?
+The dropdown list field is available only when you request a signature from others or when you create a template. This is because dropdown lists function as temporary widgets, allowing the user to select one of multiple values. Once a signer selects a value from the dropdown, it is embedded into the document as text. When you sign a document yourself, OpenSign digitally signs it immediately upon clicking the finish button. Therefore, you can use the text widget to add the necessary text to the document.
@@ -0,0 +1,8 @@
+{
+  "label": "FAQs",
+  "position": 6,
+  "link": {
+    "type": "generated-index",
+    "description": "FAQs on Utilizing Various Features of OpenSign™ - The World's Leading Free & Open Source Document Signing Platform."
+  }
+}
@@ -0,0 +1,8 @@
+{
+  "label": "Create New OpenSign Document",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn how to create Document in OpenSign."
+  }
+}
@@ -0,0 +1,27 @@
+---
+sidebar_position: 4
+title: Editing Your Document Before Sending
+---
+
+# How to edit a document before sending in OpenSign™?
+
+OpenSign™ lets you polish your PDF before you send it out—whether you’re signing it yourself, requesting signatures, or saving it as a template. You get three core editing controls right in the preview:
+
+1. **Add Pages**
+
+   * Click the **“+”** icon.
+   * Upload one or more PDF files.
+   * New pages are appended to the end of your current document.
+
+2. **Rotate Pages**
+
+   * Use the **left-rotate** or **right-rotate** icons on any page.
+   * See the orientation update instantly in the real-time preview.
+
+3. **Delete Pages**
+
+   * Click the **trash bin** icon on the page you want to remove.
+   * Confirm the deletion when prompted.
+   * **Warning:** This action is permanent and cannot be undone.
+
+![image](https://github.com/user-attachments/assets/1fd6aad2-3749-4148-ba01-eae8e5cc6a94)
@@ -0,0 +1,87 @@
+---
+sidebar_position: 4
+title: Enforce email OTP verification
+---
+
+# How to Use the "Enable OTP Verification" Feature in OpenSign
+
+The "Enable OTP Verification" feature in OpenSign is designed to add an extra layer of security to the document-signing process by verifying the signer’s email address. Here’s an in-depth look at how it works, when to use it, and its impact on the signing process.
+
+## What is OTP Verification?
+
+**OTP (One-Time Password) Verification** is a security feature that requires each signer to enter a unique code sent to their email address before they can sign the document. This ensures that only individuals with access to the specified email address can complete the signing process, adding an extra level of authenticity to each signature.
+
+## How to Enable OTP Verification
+
+1. **Prepare the Document**: 
+   - Navigate to "Main Menu" -> "Request Signatures" & start by uploading the document you want to send for signatures in OpenSign.
+   
+2. **Add Signers**:
+   - Specify the individuals who need to sign the document by entering their email addresses.
+
+3. **Configure Security Settings**:
+   - Click the "Advanced Options"
+   - <img width="499" alt="image" src="https://github.com/user-attachments/assets/2f099abb-9421-49fb-b53a-7d9a610a8cfe"/>
+
+   - Under **Security Settings**, find the option labeled "Enable OTP Verification."
+   - Select **Yes** to activate OTP verification for this document.
+   - <img width="1125" alt="image" src="https://github.com/user-attachments/assets/48d15c53-5eba-407c-8f81-1b17a47f32cb"/>
+
+  
+
+
+4. **Send the Document**:
+   - Once all settings are configured, proceed to send the document to the signers.
+
+## How OTP Verification Works for Signers
+
+When OTP verification is enabled, here’s what the signing experience looks like for recipients:
+
+1. **Email Notification**:
+   - The signer receives an email notification prompting them to review and sign the document.
+   
+2. **OTP Verification Prompt**:
+   - When the signer clicks the link to sign the document, they are required to enter a one-time password (OTP).
+   - An OTP is sent to the signer’s email address. They must enter this code on the signing page to proceed.
+
+3. **Document Signing**:
+   - After entering the correct OTP, the signer gains access to the document and can proceed with adding their signature.
+
+## Benefits of Using OTP Verification
+
+- **Enhanced Security**: Only users with access to the designated email account can sign, reducing the risk of unauthorized access.
+- **Reliable Authentication**: Verifying the signer’s email adds an additional level of validation, helping to ensure the authenticity of each signature.
+
+## Impact on the Completion Certificate
+
+Once the document is fully signed by all parties, OpenSign generates a **Completion Certificate**. This certificate contains detailed information about the signing process, including:
+
+- **Signer’s Identity**: Each signer’s name and email address.
+- **OTP Verification Status**: If OTP verification was enabled for the document, this is noted in the completion certificate. This notation serves as proof that the signer’s email address was verified before the document was signed.
+
+This feature makes it clear that the signing process involved OTP verification, adding credibility to the document’s legal standing.
+
+## When to Use OTP Verification
+
+Consider enabling OTP verification in scenarios where:
+
+- **Confidentiality** is critical: You want to ensure that only authorized individuals with access to the signer’s email can view and sign the document.
+- **Authentication** is a priority: OTP adds an extra layer of verification, enhancing the document’s validity and security.
+- **Compliance** is required: Certain regulations or standards may necessitate an additional verification step for document signing.
+
+## Disabling OTP Verification
+
+If OTP verification is unnecessary for a particular document:
+
+1. Under the **Security Settings**, select **No** for the "Enable OTP Verification" option.
+2. By disabling OTP verification, recipients can directly access and sign the document without needing to enter an OTP.
+
+## Summary
+
+The "Enable OTP Verification" feature in OpenSign is a powerful tool for ensuring that only verified individuals can sign documents. By sending a unique code to each signer’s email and requiring it before signing, this feature strengthens security and authenticity. The use of OTP verification is also recorded in the completion certificate, providing a clear record of email verification.
+
+Use OTP verification whenever you need an added layer of email-based security and authenticity in your document signing workflows.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,9 @@
+---
+sidebar_position: 3
+title: Navigate between pages of a document
+---
+
+# How to navigate between pages of a document in OpenSign™?
+
+To navigate between pages of a document that you have uploaded either click on the previous page `<<` & next page `>>` buttons at the top or click on any of the page previews loaded on the left side -
+![image](https://github.com/user-attachments/assets/4d4d8dc1-1197-4b29-90ea-3537389bd1d8)
@@ -0,0 +1,166 @@
+---
+sidebar_position: 2
+title: Request signatures
+---
+
+# Request signatures using OpenSign™
+
+## Interface Overview
+
+The OpenSign™ Request signatures interface is designed to streamline the process of creating, preparing, and sending documents for electronic signature.
+
+# How to Create and Send a Document for Signature with OpenSign™
+
+### Step 1: Begin New Document Creation
+
+- **Navigate to Request Signatures form**: Start by navigating to 'Request Signatures' from the main menu to initiate the creation of a document for signatures.
+  
+<img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/94112aec-4581-46a5-8e09-b6fc42e9e72a" />
+
+### Step 2: Uploading Your Document
+
+- **[2] Choose File**: Once the "Request signature" form opens, click "Choose file" button to select and upload the document file from your computer that needs to be signed. Currently you can upload only 1 file at a time but you can add additional documents by clicking "Add pages" in the next step.
+- **[3] Choose File from Dropbox**: Click the dropbox icon to select the document file from your dropbox account.
+
+### Step 3: Entering Document Details And Signers
+
+- **[4] Title** *(Required)*: Input the title of your document. This identifier will be visible to signers and in your document management.
+- **[5] Signers**: Use the dropdown to select existing signers or use the addition button to add a new signer who needs to sign the document. (Here, add the signer's details such as name, email, and phone number). 
+- **[6] Note**: Optionally add a note to give context or instructions regarding the document.
+
+### Step 4: Organizing Your Document
+
+- **[7] Folder**: Select a folder where you want the document to be stored, or leave it to default to the 'Root' folder. You can browse your documents in a beautiful explorer view by navigating to "OpenSign™ Drive".
+
+### Step 5: Setting the Time Frame
+
+- **[8] Time To Complete (Days)** *(Required)*: Specify the number of days the signers have to complete the signatures. After that, the document will no longer be available for signing.
+
+### Step 6: Set the sending order
+- **[9] Send in Order**
+  - **If you choose:**
+  - **Yes**: Selecting this option will send the signing request to the first signer initially. Once the first signer completes their part, the next signer in the sequence will receive the request. This process continues until all signers have signed the document. This method ensures that the document is signed in a specific order.
+  - **No**: Selecting this option will send the signing links to all signers simultaneously. Every signer can sign the document at their convenience, regardless of whether other signers have completed their signatures. This method is faster but does not enforce any signing order among the participants.
+Select the option that best suits the needs of your document processing.
+### Step 7: Auto reminder (feature only available for the subscribed user)
+- **[10]** Once you enable the auto reminder, a text field will appear allowing you to set the reminder for a specific number of days.
+- **Remind once in every (Days)**: Here, you can set the number of days for the reminder.
+  
+### Step 8: Proceed to Document Creation Panel
+- **Next**: Once all the necessary fields are filled, click this button to proceed to create the document for signing.
+- **Cancel**: If you need to start over or make changes, click this button to clear the form.
+### Step 9: Document creation 
+
+<img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/b4e6f257-e362-46a7-b809-546f0e5999fc" />
+
+- **[1] Add signature widget**: Once your document is loaded in the document creation panel, you'll need to add a signature widget for each signer. OpenSign provides an intuitive interface for this task. Select the signer from the right side panel, click on the signature widget, and position it where the signature is required.
+Use the option on the right side to add recipients if you need to include additional signers. You can place multiple signature widgets for each signer, as required.
+
+  After placing the Signature widget, you will see the options on the widget such as:
+  - **Add Signer/Change Signer**: Clicking the first icon on the signature widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+  - **Copy Signature**: Clicking on this option reveals the following choices.
+    -  All pages: It will copy the signature widget to all pages.
+    -  All pages but last: It will copy the signature widget to all pages except the last page.
+    -  All pages but first: It will copy the signature widget to all pages except the first page.
+ 
+- **[2] Add other widgets**: Depending on your needs, you can include additional widgets such as:
+ - **Stamp**: After placing the Stamp widget, you will see the options on the widget such as:
+      - Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
+      - Add Signer/Change Signer: Clicking the second option on the stamp widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+      - Copy Stamp: Clicking on this option reveals the following choices.
+        -  All pages : It will copy the stamp widget to all pages.
+        -  All pages but last: It will copy the stamp widget to all pages except the last page.
+        -  All pages but first: It will copy the stamp widget to all pages except the first page.
+ - **Initials**: After placing the Initials widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
+    - Add Signer/Change Signer: Clicking the first icon on the Initials widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy Initials: Clicking on this option reveals the following choices.
+      -  All pages : It will copy the stamp widget to all pages.
+      -  All pages but last: It will copy the stamp widget to all pages except the last page.
+      -  All pages but first: It will copy the stamp widget to all pages except the first page.
+ - **Name**: After placing the name widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Name widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the name widget.
+ - **Job title**: After placing the job title widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Job title widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the job title widget.
+  
+ - **Company**: After placing the company widget, you will see the options on the widget such as:
+     - Setting icon: By clicking on the option, you can set the color and font.
+     - Add Signer/Change Signer: Clicking the first icon on the Company widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the Company widget.
+ - **Date**: After placing the date widget, you will see the options on the widget such as:
+     - Setting icon: By clicking on the option, you can choose from various date formats.
+     - Add Signer/Change Signer: Clicking the first icon on the Date widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the date widget. 
+ - **Text**: After placing the Text widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Copy : Clicking on this you can duplicate the Text widget.
+  
+ - **Text Input**: After placing the Text Input widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Text Input widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the Text Input widget.
+ - **Checkbox**: Once you drop the checkbox widget, a popup will open where you can set the checkbox name and options. Additionally, there are a few options available such as setting the minimum and maximum checks, making the checkbox read-only, and hiding the label.
+     - Add Signer/Change Signer: Clicking the first icon on the CheckBox widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the image widget.
+- **Dropdown**: Once you drop the dropdown widget, a popup will open where you can set the dropdown name and options. Additionally, there are a few options available such as setting a default value and marking the dropdown as required or optional.
+     - Add Signer/Change Signer: Clicking the first icon on the Dropdown widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the image widget.
+ - **Radio button**: Once you drop the radio button widget, a popup will open where you can set the radio button name and options. Additionally, there are a few options available such as setting a default value, making the radio button read-only, and hiding the label.
+     - Add Signer/Change Signer: Clicking the first icon on the Radio button widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the image widget.
+ - **Image**: After placing the Image widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
+    - Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the image widget.
+ - **Email**: After placing the email widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Email widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the email widget.
+### Step 10: Next:
+- **Next**: After adding the widgets and signatures, click the 'Next' button. The document will then be created.
+
+### Step 11: Send Mail
+After finishing the document creation, a 'Send Mail' popup will appear, offering options to Send Email, Customize Email, Copy Link, or Share the document.
+  - Send Email: Click the 'Send' button to send the document for signing to all signers. If the sending order is set to 'Yes', it will send the document to the first signer.
+
+  - Customize Email: Click the 'Customize Email' button to open the email editor. Here, you can set variables and customize the content. After clicking 'Send', the document will be sent for signing to all signers, or if the sending order is set to 'Yes', it will be sent to the first signer with the customized email.
+
+  - Copy Link: You can copy the link to sign the document.
+  
+  - Share: Use this option to share the document via email, WhatsApp and other Windows apps
+    
+  <img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/e2344479-daae-43ff-a61a-14ea98b237d6" />   
+                                                                                                                             
+## Signers Signing Process
+### Step 12: Email OTP verification
+Once the email is received, the signer can click the 'Sign Here' button. This will open the email verification page. After clicking the 'Get Verification Code' button, an OTP (one-time password) will be sent to the signer’s email address. Enter the received OTP into the verification textbox and click the 'Verify' button.
+
+<div>
+  <img width="800" alt="OpenSign send OTP" src="https://github.com/user-attachments/assets/b82c796a-98e3-4296-bde1-fe86b1b993ad" />
+</div>
+<div>
+  <img width="800" alt="OpenSign verify otp" src="https://github.com/user-attachments/assets/63cf4b75-9d47-4630-a83c-e916a5c13b3c" />
+</div>
+
+### Step 13: Finalizing the Process:
+
+After verification, the signer will be redirected to the document signing page, where he can view the document received for signing. To sign, the signer simply clicks on the signature widget, which allows them to draw, upload a digitally scanned signature, or type the signature. 
+
+After filling out all assigned widgets, click the 'Finish' button. Once the document is finished,.
+   - The signer has the option of downloading or printing the signed document. He will also obtain the completion certificate if he is the final signer.  
+
+   - If there are more than one signer, the document will be immediately sent to the next signer. Once all signers have finished their signatures, they can download and print the signed document as well as the completion certificate.
+<img width="800" alt="OpenSignFinalStep" src="https://github.com/user-attachments/assets/f4783aa0-2879-4ec2-9ddc-16d59f3a1fc0" />
+
+## Additional Information
+- All fields marked with an asterisk (*) must be completed before the document can be submitted.
+- Ensure that the document format is supported by OpenSign before uploading.
+- Signed documents can be accessed in the designated 'Root' folder or the one you have specified.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,86 @@
+---
+sidebar_position: 1
+title: Sign your-self
+---
+
+# Sign your-self using OpenSign™
+
+## Interface Overview
+
+# How to digitally sign a document using OpenSign™ for free?
+
+OpenSign lets you digitally sign documents that don't need to be sent to anybody with ease. This feature is available in all the plans including **OpenSign free**. 
+After login, you will be directed to the OpenSign dashboard. From the left-side menu, click on "Sign yourself" or by clicking the button on the Dashboard.
+
+### Step 1: Uploading Your Document
+
+- **[1] Choose File**: Once the "Sign Yourself" page opens, click here to upload the document you want to sign from your computer.
+- **[2] Upload from Dropbox**: To upload a document directly from your Dropbox account, click the Dropbox icon. You may need to provide permissions to access the file when you do it for the first time.
+  
+```The maximum document size allowed is 10MB.```
+
+### Step 2: Document Information
+
+- **[1] Title** *(Required)*: Enter a title for your document. This will help you identify it later in OpenSign™.
+- **[2] Note**: Provide an optional note for further context about the document.
+
+<img width="918" alt="OpenSign_Signyourself" src="https://github.com/user-attachments/assets/41c0f460-23b6-4ab0-befd-7fba8e845c23" />
+
+### Step 3: Document Organization
+
+- **[1] Folder**: Select a folder where you want the document to be stored, or leave it to default to the 'Root' folder. You can browse your documents in a beautiful explorer view by navigating to "OpenSign™ Drive".
+- **[2] Root**: This is your default directory. Click the pencil icon to create or choose a different folder.
+- **[3] Next**: After filling in all the required fields, click the "Next" button to proceed to the document creation panel.
+  
+### Step 4: Document creation and Signing
+- **[1] Add signature widget**: Once your document is loaded in the document creation panel, you will need to add a signature widget. OpenSign provides an intuitive interface for this task. Click on the signature widget and position it where the signature is required. You can add multiple signature widgets if needed.
+After placing the Signature widget, a popup will appear for drawing the signature.
+In the "Draw Signature" popup, you have three options available:
+     -   Draw the signature using your mouse cursor.
+
+     -   Upload a digitally scanned signature.
+
+     -   Type the signature using text input.
+        
+     -   Select your signature from "My Signature." (This option is available only if you have uploaded a signature under "My Signature" in Settings.)
+
+- **[2] Add other widgets**: Depending on your needs, you can include additional widgets such as:
+     - **Stamp**: After dragging and dropping the stamp widget, the "Upload Stamp Image" popup will appear, allowing you to upload an image from your file explorer. Once the stamp is uploaded, you will see the stamp image on the document. Additionally, alongside your stamp image, there is an option to copy the image. Clicking on the copy option presents three choices:
+        - All pages : It will copy the stamp to all pages.
+        - All pages but last: It will copy the stamp to all pages except the last page.
+        - All pages but first: It will copy the stamp to all pages except the first page.
+
+     - **Initials**: Click on the initials widget and position it where the initials are required. After placing the Initials widget, a popup will appear for drawing the initials. In the "Draw Initials" popup, you have three options available:
+       -  Draw the initials using your mouse cursor.
+       -  Upload the digitally scanned initials.
+       -  Type the initials using text input.
+     - **Name**: Once you drop the name widget, you can edit the name. We also provide customization options such as setting the color or font. Additionally, there is a copy option available to duplicate the widget.
+     - **Job Title**: Once you drop the job title widget, you can edit the job title. Customization options such as setting the color or font are also provided. Additionally, there is a copy option available to copy the widget.
+     - **Company**: Once you drop the company widget, you can edit the company name. Customization options such as setting the color or font are also provided. Additionally, there is a copy option available to duplicate the widget.
+     - **Date** :  Once you drop the date widget, you can choose from various date formats.
+     - **Text**: Once you drop the text widget, you can write the text. Customization options such as setting the color or font are also provided. Additionally, there is a copy option available to duplicate the widget.
+     - **Checkbox**: After dropping the checkbox widget, a popup will open allowing you to set the checkbox name and options. Once you click save, the checkbox will be created on the document. Additionally, a copy option will be available to duplicate the widget.
+     - **Image** : After dragging and dropping the image widget, the "Upload Image" popup will appear, allowing you to upload an image from your file explorer. Once the image is uploaded, it will be displayed on the document. Additionally, there is an option to duplicate the image.
+     - **Email**: Once you drop the email widget, you can edit the email. Customization options such as setting the color or font are also provided. Additionally, there is a copy option available to duplicate the widget.
+
+<img width="918" alt="OpenSign_Widgets" src="https://github.com/user-attachments/assets/b73ef535-245c-43c8-98eb-cb43e4720bc5" />
+
+### Step 5: Finalizing the Process:
+- **Finish**: After adding the widgets and signatures, click the "Finish" button. This will create a digitally signed document.
+
+### Step 6: Print, download or send the document copy via email
+After finishing the document, a "Successfully Signed!" popup will appear, offering options to print, download, or send the document via email. 
+In the "Add Email Address" text field, enter the email address you want to send the document to, then click the "Send" button to receive a copy of the signed document.
+
+<img width="918" alt="OpenSign_sendEmail" src="https://github.com/user-attachments/assets/7ec61f70-3ffe-4c7e-b911-843919c6d25d" />
+
+## Additional Information
+
+
+- The fields with an asterisk (*) are mandatory.
+- Make sure your document is in PDF, PNG, JPG, JPEG, or DOCX format.
+- You can access your signed documents in the folder you've selected by visiting OpenSign™ Drive anytime. You can also access the documents from reports section.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,8 @@
+{
+  "label": "Manage Docs using OpenSign™ Drive",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn everything about OpenSign™ Drive."
+  }
+}
@@ -0,0 +1,92 @@
+---
+sidebar_position: 2
+title: Create Docs & Folders
+---
+
+# Organize Documents using OpenSign™ Drive
+
+OpenSign Drive offers a streamlined way to manage, sign, and request signatures on your important documents. Whether you're drafting an offer letter or storing signed agreements, organizing your documents effectively is crucial. Here’s a step-by-step guide on how to create documents and folders in OpenSign Drive.
+
+### 1. Accessing OpenSign Drive
+After logging into OpenSign, navigate to the left-hand sidebar and click on "OpenSign Drive." This will open the OpenSign Drive page where you can see all your stored files.
+
+<img width="828" alt="OpenSign drive" src="https://github.com/user-attachments/assets/1159afaa-e7e4-4f6d-9087-e22ea7a0c840" />
+
+### 2. Creating a New Folder
+Organizing your documents into folders helps you keep track of different categories of files.
+
+**Step 1:** In the OpenSign Drive window, look for the "+" icon at the top-right of the screen.  
+**Step 2:** Click the "+" icon and select "Create Folder" from the dropdown menu.  
+**Step 3:** A dialog box will prompt you to name your new folder. Enter a descriptive name and hit "Add."  
+**Step 4:** Your new folder will appear in the main area of OpenSign Drive, ready to store your documents.
+
+<img width="828" alt="Create new folder" src="https://github.com/user-attachments/assets/f0260329-d3b0-4c03-af1b-7231b4f2c6a4" />
+
+### 3. Creating a New Document
+To create a document for self-signing or by requesting a signature, you can do so by selecting the appropriate option from OpenSign Drive.
+
+**Step 1:** Click the "+" icon in the top-right corner of OpenSign Drive.  
+**Step 2:** This time, choose "Sign Yourself" or "Request Signatures" depending on whether you want to sign the document yourself or send it to others for their signatures.  
+**Step 3:** When you select the "Sign Yourself" or "Request Signature" option, the document creation page will open, allowing you to enter details such as the document title, description, notes, and other necessary information. You can also choose an OpenSign Drive folder to store your document. Once you’ve selected the folder and created the document, it will be saved in that folder, making it easily accessible from your OpenSign Drive.
+
+<img width="828" alt="Create new document" src="https://github.com/user-attachments/assets/97bd75ec-ea9d-4f1d-b514-b9e04ce856aa" />
+
+### 4. Organizing Documents
+After creating or uploading documents, it's crucial to organize them effectively. Here are some options available in OpenSign Drive for managing your documents:
+
+<img width="828" alt="OpenSign Drive Options" src="https://github.com/user-attachments/assets/350c7f0b-7751-419d-85bd-3d4ca68c1485" />
+
+- **Download:** To download a document, right-click on it and select the "Download" option. This will save a copy of the document to your device.
+
+- **Rename:** If you need to rename a document, right-click on it and choose the "Rename" option. This will allow you to edit the document's name.
+
+- **Move:** To move a document to a different folder, right-click on the document and select the "Move" option. You'll see a list of existing folders, along with the option to create a new folder. Select the desired folder or create a new one, then move the document to that location.
+
+- **Delete:** If you wish to delete a document, simply right-click on it and choose the "Delete" option. This will remove the document from your OpenSign Drive.
+
+Organizing your documents properly ensures that you can easily find and manage them whenever needed.
+
+### 5. Managing Documents
+
+OpenSign Drive offers a variety of tools to help you manage your documents efficiently, one of the most useful being the Status Indicators system.
+
+**Status Indicators** 
+
+These indicators are represented by different icons on your documents, allowing you to instantly recognize their current status:
+
+- **Signed (Green Check Mark):** This icon signifies that the document has been fully signed and is complete.
+- **Pending Signature (Yellow Paper Airplane):** Documents with this icon are awaiting signatures from one or more parties.
+- **Draft (Blue Paper Clip):** A Blue Paper Clip indicates that the document is in draft form and has not yet been sent out for signatures.
+- **Declined document (Red Exclamation Mark):** This icon highlights documents that require immediate action, indicating that the document has been declined.
+- **Expired (Gray Hourglass):** A gray hourglass indicates that the document is expired.
+
+  <img width="828" alt="Create new folder" src="https://github.com/user-attachments/assets/b488ef24-3db5-4323-a3b3-ed3c12a04291" />
+
+### 6. Filter and Sort Documents in OpenSign Drive
+OpenSign Drive provides a powerful and easy-to-use interface for managing your documents. To help you quickly find and organize your files, OpenSign Drive offers several sorting and filtering options, allowing you to arrange your documents by name or date, in either ascending or descending order.
+
+<img width="861" alt="OpenSign filters" src="https://github.com/user-attachments/assets/af51e68a-730c-4203-8015-54b30da572f6" />
+
+- **Sorting Documents by Name:**
+To sort your documents alphabetically:
+
+1. Click on the Sort dropdown menu in the upper right corner of the OpenSign Drive interface.
+2. Select "Name" from the dropdown list. This will arrange your documents alphabetically by their titles.
+3. You can then choose to order them in ascending (A-Z) or descending (Z-A) order by toggling the "Ascending" or "Descending" option.
+
+- **Sorting Documents by Date:**
+If you prefer to sort your documents based on when they were created or modified:
+
+1. Click the Sort dropdown menu in the top right corner.
+2. Ensure that "Date" is selected. This will organize your documents based on their creation or modification date.
+3. Select "Ascending" to arrange documents from the oldest to the newest, or choose "Descending" to list them from the newest to the oldest.
+
+- **Ascending vs. Descending Order**
+- **Ascending Order:** Whether sorting by name or date, selecting "Ascending" will arrange your documents from A to Z (if sorting by name) or from oldest to newest (if sorting by date).
+- **Descending Order:** Choosing "Descending" will reverse the order, arranging documents from Z to A (by name) or from newest to oldest (by date).
+
+These sorting features help you keep your documents organized, making it easier to locate specific files quickly, especially when you have a large number of documents stored in your OpenSign Drive.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,18 @@
+---
+sidebar_position: 3
+title: Grid vs List view
+---
+
+# How to switch between grid view and list view in OpenSign drive
+
+- Navigate to OpenSign drive using the main menu or clicking [this](https://app.opensignlabs.com/opensigndrive) link.
+- Click the list view icon on the upper right corner of the screen(marked in green) to switch to list view from gride view -
+
+   <img width="1159" alt="OpenSign gridview icon" src="https://github.com/user-attachments/assets/0c03980e-6c28-4ac4-ace2-214d66858d84"></img>
+
+- In case you are already in list view, you will find a button to swith to grid view at the same location(marked in green)
+  
+  <img width="1164" alt="image" src="https://github.com/user-attachments/assets/566845ac-de2e-4f0a-b758-77833fb6e829"></img>
+  
+
+
@@ -0,0 +1,49 @@
+# OpenSign™ Drive Interface Documentation
+
+## Overview
+
+This documentation provides an overview of the OpenSign™ Drive interface, detailing its key features, user interface elements and functionality.
+![OSD](https://github.com/OpenSignLabs/OpenSign/assets/5486116/e11c7060-15ab-4062-915e-2f47e832f023)
+
+### Interface Elements
+
+- **Navigation Bar**: At the top, displaying the current directory ("OpenSign™ Drive >").
+- **Toolbar**:
+  - `+`: Button to add new documents.
+  - `Sort Options`: Dropdown to sort files by criteria such as date.
+  - `View Options`: Toggle between list and grid views.
+
+### File Organization
+
+- **Documents**: Represented by icons with a red PDF symbol.
+  - `Status Indicator`: Colored dots on the PDF icons represent the document status (e.g., green for 'complete').
+- **Folders**: Represented by yellow folder icons.
+
+### Document Information Popup
+
+- Activated by hovering on a document, displaying the following details:
+  - **Title**: The name of the document.
+  - **Status**: Current status of the document (e.g., "Draft", "In-progress", "Completed", "Rejected" & "Expired").
+  - **Created Date**: The date the document was created or uploaded.
+  - **Additional Notes**: Any pertinent notes or descriptions.
+
+### File and Folder Labels
+
+- **Labels**: Below each icon, providing the name of the file or folder.
+- **Status Labels**: Next to file labels, indicating additional status information.
+
+## Interaction Patterns
+
+- **Click**: Select files or folders.
+- **Right-click**: Access context-specific actions.
+
+## Accessibility Features
+
+- **Status Colors**: Visually distinct colors for quick status recognition.
+- **File Icons**: Large and clear with significant visual cues (PDF symbol).
+
+### Version Information
+
+This interface is current as of 15/01/2024. It is subject to change with future updates to the OpenSign™ Drive.
+
+For further assistance or to report issues, please contact us on hello@opensignlabs.com
@@ -0,0 +1,21 @@
+# Rename documents from OpenSign™ Drive
+
+The OpenSign™ Drive interface allows users to rename their documents efficiently.
+
+![rename](https://github.com/OpenSignLabs/OpenSign/assets/5486116/ea3df671-07a8-423d-916b-eb22aa4a1f50)
+
+## Overview of User Interface
+
+- **Toolbar at the top**: Includes options to add a new document (`+` icon), sort documents by date, and change the view layout (grid or list view).
+- **Document and Folder Grid**: Displays documents and folders as icons with titles. PDF documents are clearly indicated with a red PDF logo.
+- **Status Indicators**: Some documents have colored status labels such as blue (with a lock icon) indicating a secure document, and green (with a checkmark) suggesting completed or signed documents.
+- **Selected Document Preview**: When a document is selected, a preview pane appears at the bottom, showing details like Title, Status, Created Date, and Signers involved.
+
+## Renaming a Document
+
+To rename a document in OpenSign™ Drive, follow these steps:
+
+1. **Select the Document**: Hover on the document you wish to rename. The document will be highlighted and its details will be displayed in the preview pane.
+2. **Access Rename Option**: Right-click on the selected document to open the context menu and select the 'Rename' option.
+3. **Edit the Title**: Enter the new name for the document in the provided field.
+4. **Save Changes**: Press 'Enter' to apply the new name to the document.
@@ -0,0 +1,8 @@
+{
+  "label": "Documents",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Navigate seamlessly through OpenSign™ reports."
+  }
+}
@@ -0,0 +1,48 @@
+---
+sidebar_position: 3
+title: Completed
+---
+# Completed documents report
+---
+
+The "Completed documents" report within OpenSign serves as a vital tool for managing and reviewing all finalized documents that have been processed through the platform. This guide will walk you through the key features and functionalities of the "Completed documents" report, enabling you to efficiently navigate and manage your signed documents.
+
+```note: In this report, you can only see documents that you own.```
+
+### Navigating to the Completed documents report
+
+1. Once logged into OpenSign, you'll see a navigation panel on the left side of your screen.
+2. Click on **"Documents"** to expand the available options.
+3. Select **"Completed"** to view the list of documents that have been fully signed and processed.
+
+### Understanding the Completed documents report
+
+The "Completed documents" report is displayed in a tabular format, presenting key information about each finalized document. Below is a breakdown of each column and its purpose:
+
+<img width="816" alt="OpenSign_Signyourself" src="https://github.com/user-attachments/assets/4694c9b3-ca2c-4f27-a9d9-8dca220a4124" />
+
+- **Sr.No:** This column displays the serial number for each document in the list, helping you quickly identify and reference documents.
+
+- **Title:** The "Title" column displays the name of the document.
+  
+- **Note:** This section contains any notes that were added during the document's creation process.
+
+- **Folder:** The "Folder" column indicates the location where the document is stored within OpenSign Drive, ensuring you can easily locate the document later.
+
+- **File:** Here, you will find a **"Download"** link that allows you to directly download the completed document to your local device for review or archiving.
+
+- **Owner:** This column shows the name of the person who created the document.
+
+- **Signers:** The "Signers" column displays the names and email addresses of the signers assigned to that document for signature. Click the "View" button to see the signers.
+
+### Action buttons
+
+The "Completed documents" report also includes several actions icons for each document:
+
+- **View Document:** The eye icon allows you to preview the document directly within OpenSign without needing to download it.
+
+- **Delete Document:** The trash bin icon enables you to permanently delete a document from your completed list. Be cautious, as this action cannot be undone.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,38 @@
+---
+sidebar_position: 7
+title: Contactbook
+---
+
+# Contactbook
+
+The **Contactbook** report in OpenSign enables you to add and manage contacts.
+
+## Accessing Contactbook
+
+To view your Contactbook:
+
+1. Log in to your OpenSign account.
+2. Navigate to the left sidebar.
+3. Click on the `Contactbook` link under the Documents section.
+ 
+<img width="828" alt="Add contact" src="https://github.com/user-attachments/assets/80308df4-33a8-41ee-a240-801f775dcec0" />
+
+## Understanding the Contactbook report
+### Adding a New Contact:
+
+To add a new contact, click the red plus (+) button located at the top-right corner of the Contactbook page. 
+This will open a pop-up where you can enter the contact’s name, email, and phone number.
+
+The Contactbook page displays a list of contacts with the following columns:
+
+- **Sr.No**: A sequential number for each contact.
+- **Name**: The contact's name.
+- **Email**: The contact’s email address.
+- **Phone**: The contact’s phone number (if available).
+ 
+  <img width="828" alt="contactbook" src="https://github.com/user-attachments/assets/524a7aa7-594e-412a-ad50-caebc125c1db" />
+
+### Action buttons
+
+- **Delete**: To delete a contact, click on the trash icon located next to the contact’s details. This will remove the contact from your Contactbook. A confirmation prompt may appear to prevent accidental deletions.
+
@@ -0,0 +1,44 @@
+---
+sidebar_position: 5
+title: Declined 
+---
+# The Declined documents report
+
+The "Declined documents" report within OpenSign serves as a vital tool for managing and reviewing all declined documents that have been processed through the platform. This guide will walk you through the key features and functionalities of the "Declined documents" report, enabling you to efficiently navigate and manage your signed documents.
+
+### Navigating to the Declined documents report
+
+1. Once logged into OpenSign, you'll see a navigation panel on the left side of your screen.
+2. Click on **"Documents"** to expand the available options.
+3. Select **"Declined"** to view the list of documents that have been fully signed and processed.
+
+### Understanding the Declined documents report
+
+The "Declined documents" report is displayed in a tabular format, presenting key information about each finalized document. Below is a breakdown of each column and its purpose:
+
+<img width="816" alt="OpenSign_Signyourself" src="https://github.com/user-attachments/assets/dc55e678-52c0-4e75-a1d5-b5a94690bc33" />
+
+- **Sr.No:** This column displays the serial number for each document in the list, helping you quickly identify and reference documents.
+
+- **Title:** The "Title" column displays the name of the document.
+  
+- **Reason:** This section contains the reasons for declining the document.
+
+- **Folder:** The "Folder" column indicates the location where the document is stored within OpenSign Drive, ensuring you can easily locate the document later.
+
+- **File:** Here, you will find a **"Download"** link that allows you to directly download the completed document to your local device for review or archiving.
+
+- **Owner:** This column shows the name of the person who created the document.
+
+- **Signers:** The "Signers" column displays the names and email addresses of the signers assigned to that document for signature. Click the "View" button to see the signers
+
+### Action buttons
+
+The "Declined documents" report also includes several action icons for each document:
+
+- **View Document:** The eye icon allows you to preview the document directly within OpenSign without needing to download it.
+- **Delete Document:** The trash bin icon enables you to permanently delete a document from your declined list. Be cautious, as this action cannot be undone.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,45 @@
+---
+sidebar_position: 4
+title: Drafts
+---
+# The Draft documents report
+
+The Draft documents section in OpenSign helps you manage all your in-progress documents easily. This feature allows you to save, review, and edit documents before sending them for signature. Here's a detailed overview of how to navigate and use the Draft Documents report effectively.
+
+### Navigating to the Draft documents report
+
+1. Once logged into OpenSign, you'll see a navigation panel on the left side of your screen.
+2. Click on **"Documents"** to expand the available options.
+3. Select **"Drafts"** under the Reports section. This will display all your saved draft documents.
+
+### Understanding the Draft documents report
+
+The Draft documents section provides an organized list of all documents that are saved as drafts. Each draft entry contains key details that help you quickly identify and manage your documents. Here’s a breakdown of the information available:
+
+<img width="816" alt="Draft documents" src="https://github.com/user-attachments/assets/6f743287-6459-4e93-ad7d-064c1ed68da0" />
+
+- **Sr.No:** This column displays the serial number for each document in the list, helping you quickly identify and reference documents.
+
+- **Title:** The "Title" column displays the name of the document.
+  
+- **Note:** This section contains any notes that were added during the document's creation.
+
+- **Folder:** The "Folder" column indicates the location where the document is stored within OpenSign Drive, ensuring you can easily locate the document later.
+
+- **File:** Here, you will find a **"Download"** link that allows you to directly download the drafted document to your local device for review or archiving.
+
+- **Owner:** This column shows the name of the person who created the document.
+
+- **Signers:** The "Signers" column displays the names and email addresses of the signers assigned to that document for signature. Click the "View" button to see the signers.
+
+### Action buttons
+
+The "Draft documents" report also includes several actions icons for each document:
+
+- **Edit:** If you need to make changes to your draft, click the edit (pencil) icon. This will open the document for you to make the necessary modifications before sending it for signatures.
+
+- **Delete:** If a draft is no longer needed, click the trash icon to delete it. Be cautious when using this action as deleted drafts cannot be recovered.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,46 @@
+---
+sidebar_position: 6
+title: Expired
+---
+
+# Expired documents report
+
+The **Expired documents** report in OpenSign allows you to manage and review documents that have reached their expiration date without being signed. This feature is essential for maintaining an organized record of inactive documents that may require follow-up or archival.
+
+## Accessing Expired documents
+
+To view your expired documents:
+
+1. Log in to your OpenSign account.
+2. Navigate to the left sidebar.
+3. Click on the `Expired` link under the **Documents** section.
+   
+<img width="828" alt="Expired document" src="https://github.com/user-attachments/assets/01f3626f-d694-4d3b-82da-2f2b77693b76" />
+
+## Understanding the Expired documents report
+
+The Expired documents report displays a list of documents that have not been signed by all parties before the designated expiration date. Each entry in the report includes the following information:
+
+- **Title**: The name of the document.
+- **Note**: A brief note associated with the document at the time of creation.
+- **Folder**: The folder in which the document is stored, helping you organize and locate documents efficiently in OpenSign drive.
+- **File**: Link to download the document for offline storage.
+- **Owner**: The user who uploaded or owns the document.
+- **Signers**: Lists the parties required to sign the document.
+
+### Action buttons
+
+For each expired document, you can perform several actions:
+
+- **Delete**: Deletes the document from your OpenSign account.
+- **View**: Opens the document in a viewer within OpenSign, allowing you to review the details and contents of the document.
+
+## Managing Expired documents
+
+Managing your expired documents effectively can help ensure that no important document is overlooked. Consider the following tips:
+
+- **Review Regularly**: Check the Expired documents report periodically to manage documents that require attention.
+- **Follow Up**: Contact the signers who have not completed their signatures informing them about the expired documents and resend the documents if necessary.
+- **Archive**: Move documents that are no longer active or needed to an archive folder to keep your workspace organized.
+
+By keeping track of your expired documents, you can maintain a clear overview of your document workflows & ensure that all the necessary actions are taken on time.
@@ -0,0 +1,70 @@
+---
+sidebar_position: 2
+title: In Progress
+---
+# In-Progress documents report
+The In-Progress documents report in OpenSign helps you monitor and manage documents that are currently in the signing process. This report enables you to monitor the status of your documents, manually share the document URL, track document progress, resend reminders, revoke access, or delete documents that are no longer required. Here’s a detailed guide on how to use the In-Progress documents report effectively.
+
+### Navigating to the In-Progress documents report
+
+1. Once logged into OpenSign, you'll see a navigation panel on the left side of your screen.
+2. Click on **"Documents"** to expand the available options.
+3. Select **"In progress"** This will display all documents that are currently awaiting signatures or are otherwise in the signing process.
+
+### Understanding the In-Progress documents report
+
+The "In progress documents" report is displayed in a tabular format, presenting key information about each finalized document. Below is a breakdown of each column and its purpose:
+
+<img width="816" alt="Inprogress documents" src="https://github.com/user-attachments/assets/60100998-1412-4331-8842-55fd9dd10307" />
+
+- **Sr.No:** This column displays the serial number for each document in the list, helping you quickly identify and reference documents.
+
+- **Title:** The "Title" column displays the name of the document.
+  
+- **Note:** This section contains any notes that were added during the document's creation process.
+
+- **Folder:** The "Folder" column indicates the location where the document is stored within OpenSign Drive, ensuring you can easily locate the document later.
+
+- **File:** Here, you will find a **"Download"** link that allows you to directly download the In-progress document to your local device for review.
+
+- **Status:** This column displays the current status of the document, indicating whether it has been viewed or signed by the signer. Once the signer has viewed or signed the document, the Owner of the document can click "View" to see the activity logs.
+  
+<img width="816" alt="Inprogress documents" src="https://github.com/user-attachments/assets/4eb43321-5eec-48ec-a3b6-75e932d31c6c" />
+
+
+- **Signers:** The "Signers" column displays the names and email addresses of the signers assigned to that document for signature. Click the "View" button to see the signers.
+
+### Action buttons
+
+The "In progress documents" report also includes several actions icons for each document:
+
+- **Share Document:** The "Share" option in the In-Progress Documents report allows you to manually share the signing link of a document with signers or other recipients directly via email. This feature ensures that the signers can easily access the document, even if they have missed the initial notification.
+
+<img width="816" alt="Inprogress documents" src="https://github.com/user-attachments/assets/7c632c2d-c784-4b51-9517-5c6817abd16f" />
+
+Upon clicking the Share icon, a pop-up window titled Copy link will appear. This window provides multiple options to share the document link with designated recipients. 
+
+**Here’s how to use the options within this pop-up:**
+
+The pop-up will display a list of email addresses of the intended recipients or signers of the document. Each email corresponds to a person who needs access to the document.
+
+- 
+   - **Share Button:** Click the Share button next to the recipient’s email address to resend the document link directly to that individual. This action provides multiple sharing options, such as copying the link, or sharing it via Outlook, WhatsApp, Messenger, and more.
+
+  - **Copy Button:** Click the Copy button next to the email address to copy the unique signing link to your clipboard. You can then paste this link manually into an email, chat, or any other preferred method of communication to share with the recipient.
+
+- **View Document:** The eye icon lets you preview the document directly within OpenSign without downloading it. Here, you can view the document's exact status, including who has signed and how many signers are still pending.
+
+- **Resend:** If a signer has not responded or needs a reminder, use the resend option to send another notification. This ensures that the signing process continues without delay.
+  
+<img width="816" alt="resend document" src="https://github.com/user-attachments/assets/c0cb3348-47ca-4d2e-a2d7-81cb3b18a0c6" />
+
+- **Revoke:** If there’s a mistake or you need to cancel the document, revoking stops all signing actions immediately. This is useful when changes are needed before re-sending the document.
+  
+<img width="816" alt="resend document" src="https://github.com/user-attachments/assets/b2273768-ef81-44cd-95ea-92babee429b6" />
+
+- **Delete :** If the document is outdated or was sent by mistake, you can permanently remove it from the list. Use this action cautiously, as deleted documents cannot be recovered.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,51 @@
+---
+sidebar_position: 1
+title: Need your sign
+---
+# Need your sign report
+
+The "Need your sign" feature in OpenSign is designed to simplify the process of managing documents that require your signature. This guide will walk you through the various elements of the "Need your sign" report, helping you to efficiently navigate and complete your pending signing tasks.
+
+## Accessing the "Need your sign" report
+
+- **Login to OpenSign**: Start by logging into your OpenSign account.
+- **Navigate to "Need your sign"**: Once logged in, you will find a navigation panel on the left side of your screen. Under the "Documents" section, click on "Need your sign" to view all documents that require your signature.
+
+## Understanding the "Need your sign" report
+
+Upon clicking "Need your sign," you will be presented with a list of documents awaiting your signature. Here's a breakdown of the key elements within this interface:
+
+- **Sr.No**: This column provides a serial number for each document in the list, allowing for easy identification and reference.
+ 
+- **Title**: The "Title" column displays the name of the document.
+ 
+- **Note**: This section includes any notes or instructions related to the document.
+  
+- **Folder**: The folder column shows where the document is stored within OpenSign Drive. This helps in organizing and finding documents later on.
+  
+- **File**: In this column, a "Download" link is provided, allowing you to download the document directly to your device for offline review or record-keeping.
+  
+- **Owner**: The owner column indicates who owns or initiated the document.
+  
+- **Signers**: The "Signers" column displays the names and email addresses of the signers assigned to that document for signature. Click the "View" button to see the signers
+  
+- **Sign**: The "SIGN" button is prominently displayed next to each document. Clicking this button will open the document in the signing interface, allowing you to review and apply your signature.
+
+### Action buttons
+
+- **View Document**: By clicking "View" under the "Signers" column, you can get more details about the document, including the list of individuals who have already signed or are expected to sign it.
+  
+- **Download Document**: The "Download" link in the "File" column provides a quick way to save the document to your local device, ensuring you have a copy for your records.
+
+## Signing a Document
+
+To sign a document:
+
+1. Click the **SIGN** button next to the document you wish to sign.
+2. Review the document carefully within the OpenSign interface.
+3. Apply your signature following the prompts.
+4. Once signed, the document will move from the "Need your sign" section to the "Completed" section, indicating that the signing process is finished.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,62 @@
+---
+sidebar_position: 2
+title: API Token
+---
+
+# 🔐 API Authentication – Setting Up Your `x-api-token`
+
+To authenticate and use OpenSign API endpoints, you’ll need a valid API token (`x-api-token`).
+
+Follow the steps below to generate one.
+
+> **Note:** You can generate both **Live** and **Sandbox** API tokens from your OpenSign account.
+
+---
+
+## 🧭 Step-by-Step Guide to Generate Your API Token
+
+**Step 1:** Log in to your OpenSign account using valid credentials.
+
+**Step 2:** Navigate to the **Settings** section and click on **API Token**.
+
+<img width="436" alt="Navigate-to-Api-token" src="https://github.com/user-attachments/assets/8079ecb5-ad5b-4ce6-8d6c-14395130a654" />
+
+**Step 3:** On the API Token page, click the **Generate Live API Token** button.
+
+> **Note:** To generate a **Live API Token**, you must upgrade to a **paid plan** — either the **Professional** or **Teams** plan.
+
+<img width="436" alt="Generate token" src="https://github.com/user-attachments/assets/6188ae46-0f40-4de6-9903-33ae0aa4e63f" />
+
+- Your `x-api-token` will now be generated and displayed.
+- **Copy this token** — you’ll need it to authenticate your OpenSign API requests.
+
+---
+
+### 🧪 Sandbox API Token
+
+You’ll also find the option to generate a **Sandbox API Token** on the same page.
+
+- **Sandbox API tokens** are available on all plans, including the **free plan**, and are intended for development and testing.
+- **Do not upload confidential data** to the Sandbox environment.
+
+---
+
+## 🧠 Frequently Asked Questions
+
+**1. What is the OpenSign Sandbox environment?**  
+The Sandbox is a testing environment designed for developers to safely experiment with OpenSign APIs and workflows. It mirrors the live environment but with certain limitations.
+
+**2. Can I upload large documents to the Sandbox?**  
+No. Please avoid uploading documents larger than **5MB** in the Sandbox. It is optimized for lightweight testing only.
+
+**3. Can I use my Live API Token in the Sandbox?**  
+No. **Live API Tokens do not work** in the Sandbox environment. You’ll need to generate a separate token specifically for Sandbox testing.
+
+**4. Why can’t I use a live template in the Sandbox?**  
+Live and Sandbox environments are **separate**. Templates created in the Live environment cannot be used in the Sandbox, and vice versa.
+
+**5. Can I use the API in the free self-hosted environment?**  
+No. The **free self-hosted version** does not support API token generation.  
+To use OpenSign APIs in a self-hosted setup, you must upgrade to a **paid self-hosted plan**.
+
+If you need additional assistance setting up OpenSign APIs, feel free to contact our support team at support@opensignlabs.com.
@@ -0,0 +1,49 @@
+---
+sidebar_position: 8
+title: Custom email templates
+---
+
+# 📧 Email Templates
+
+## 🚀 Steps to Set Up Custom Email Templates
+
+**Step 1:** Log in to your OpenSign account using valid credentials.  
+**Step 2:** Navigate to the **Settings** section and click on **Preferences**.  
+**Step 3:** Click on the **Email** tab. Here, users can configure and edit custom email templates for different stages of the document lifecycle.
+
+<img width="800" alt="add team" src="https://github.com/user-attachments/assets/dc1efaab-c7f9-4f82-abc4-1cafd587f7ce"></img> 
+
+---
+
+## ✉️ Request Signature Email
+
+This email is automatically sent to all signers when a document is shared with them for signing.
+
+- Customize the subject line, greeting, message body, and footer to match your tone and branding.
+- Use dynamic placeholders like `{{document_title}}`, `{{receiver_name}}`, and `{{signing_url}}` to personalize each message.
+- Personalized messages improve open rates and help recipients understand the context of the request.
+
+## 📩 Document Completion Email
+
+This email is sent to all signers and the document owner once the signing process is complete.
+
+- Includes a summary message along with the signed document and completion certificate as attachments.
+- Template customization allows teams to reinforce brand messaging post-signature.
+- Ideal for legal confirmations, audit trails, and archival communication.
+  
+### 🔄 Reset Template Text
+
+Click the **Reset** button to restore the template content to its default version.  
+Don’t forget to click **Save** afterward to apply the changes.
+
+---
+
+## 🛠️ Additional Notes
+
+- All custom email templates support **rich text formatting** and **variables** for dynamic content.
+- Changes to templates take immediate effect and apply to all new documents created after the update.
+- Organizations can define a consistent template style across all teams to ensure compliance and branding.
+
+> 💡 **Tip:** Preview your templates before saving to ensure correct formatting and placeholder usage.
+
+For more assistance with OpenSign™ features or APIs, contact our support team at **[support@opensignlabs.com](mailto:support@opensignlabs.com)**.
@@ -0,0 +1,191 @@
+---
+sidebar_position: 4
+title: Preferences
+---
+
+# 🔧 Preferences
+
+The **Preferences** page in **OpenSign™** allows users and administrators to tailor the signing experience to suit individual, team, or organizational needs. Below is a breakdown of all configurable options and what they control.
+
+---
+
+## 🚀 Steps to Navigate to Preferences
+
+**Step 1:** Log in to your OpenSign account using valid credentials.
+
+**Step 2:** Navigate to the **Settings** section and click on **Preferences**.
+
+---
+
+## 📌 Signature Types Control
+
+The **Allowed Signature Types** section defines which signature methods are available to signers:
+
+- ✅ **Draw**: Create a handwritten signature using a mouse, stylus, or finger.
+- ✅ **Type**: Type your name and apply it using pre-set font styles.
+- ✅ **Upload**: Upload a scanned or saved image of your signature.
+- ✅ **Default**: Use the default signature stored under *My Signature* in settings.
+
+⚙️ The options selected here determine what appears in the signature widget during document creation and signing. You can also change these preferences while creating a document.
+
+---
+
+## 🔄 Multi-Level Signature Type Control
+
+**OpenSign™** introduces flexible control over signature options at three levels:
+
+### 🏢 Organization-Level
+
+Admins can enforce company-wide signing policies by restricting available signature methods platform-wide.
+
+**Step 1:** Open the profile menu and select **Console Application** to launch the console.
+
+**Step 2:** Once the Console Application loads, navigate to the **General** menu. Here, admins can configure the allowed signature types at the organization level.
+
+All users created under your account will only see the signing methods you enable here in their **Preferences**. They will be restricted from using any methods you don't select.
+
+**Example:**  
+Adam, the administrator of your company account, disables the **Typed** signature option in the **Manage Signature Types** settings. As a result, Ursula, a team member, will no longer see the **Typed** signature option in her preferences.
+
+Ursula can enable or disable any of the remaining three signature methods for each document she creates.
+
+When she sends a document to Sofia, a signer, Sofia will only see the signature methods that Ursula selected during the document creation process.
+
+**Note:** Managing **Signature Types** at the organization level is only available on the **Teams** plan. This feature is not included in the **Professional** or **Free** plans.
+
+![Signature type setup console](https://github.com/user-attachments/assets/c8c3de19-e82e-464a-977b-cdf3fd12aed7)
+
+### 👤 User-Level
+
+Navigate to **Settings > Preferences** to configure user-level signature types.
+
+If a user sets preferred types here, only those will appear when adding signature or initial widgets during document creation.
+
+![Signature type setup preferences](https://github.com/user-attachments/assets/ae413b24-fe53-4aa9-9242-624574f1d7b3)
+
+### 📄 Document-Level
+
+While creating a document, users can specify allowed signature types.
+
+Only these will be available to the signer—useful for legal or regulatory requirements.
+
+![Signature type setup signature widget](https://github.com/user-attachments/assets/d64510e1-df14-44fe-8020-45b17c612238)
+
+---
+
+## 🔔 Notify on Signatures
+
+The document owner can choose to receive email notifications when a document is signed.
+
+- **Yes** – Get notified each time a signer completes their part.  
+- **No** – Turn off real-time signature notifications.
+
+This setting can be adjusted while creating a document or template.
+
+Regardless of this preference, a **final completion email**—including the signed document and completion certificate—is **always sent** to both the document owner and all signers.
+
+**Note:** Notify on Signatures feature is only available on the **Professional** and higher plans—it is not included in the **Free** plan.
+
+![Preferences setup](https://github.com/user-attachments/assets/5adad567-6c01-4766-9b10-db3f95ad65d3)
+
+---
+
+## 📬 Send in Order
+
+Decide whether the document should be signed **sequentially** or **simultaneously** by multiple signers.
+
+- **Yes** – Signers receive the document in a set order. The next signer gains access only after the previous one completes signing.
+- **No** – All signers receive the document at once and can sign independently.
+
+> Users can change this option while creating the document or a template.
+
+---
+
+## 🚫 Enable Tour
+
+The tour feature provides guidance for first-time users. You can turn this off for a cleaner, uninterrupted experience:
+
+- **Yes** – Show onboarding tips. Enables guided tooltips for the signer during the signing process.
+- **No** – Disable tour prompts *(recommended for experienced users)*. Speeds up the signing experience.
+
+> Users can change this option while creating the document or a template.
+
+💡 **Tip**: Disable if your users are already familiar with OpenSign™.
+
+---
+
+## 🧭 Timezone & Date Format
+
+Customize the **Timezone** and **Date Format** according to your regional preferences.  
+These settings are reflected in:
+
+- Document Completion Certificates  
+- Signing Logs  
+- Webhooks
+
+### 📅 Date Format
+
+- The selected date format will be applied by default to the date widget if no specific format is chosen during document creation.
+- This default format also applies in all API flows.
+
+### 🕒 Time Format
+
+- Supports **12-hour** and **24-hour** formats.
+- Affects timestamps in certificates, logs, and webhooks.
+
+![Preferences setup](https://github.com/user-attachments/assets/5bb9ad1a-f3c7-4b6e-9469-1bb003e1eec0)
+
+---
+
+## 🧪 LTV-Enabled Signatures
+
+**LTV (Long-Term Validation)** ensures that signatures remain valid and verifiable even after certificates expire or are revoked.
+
+### 🔐 Key Features:
+
+- Embeds certificate chain  
+- Includes CRLs and OCSP responses  
+- Enables offline verification  
+- Complies with PDF standards like **PAdES**
+
+### 📌 Why It Matters:
+
+Even if a certificate becomes invalid in the future, the LTV-enabled signature remains verifiable.
+
+### ✅ Use Cases:
+
+- Legal Contracts  
+- Financial or Medical Records  
+- Long-term archiving requirements
+
+---
+
+## 📧 Email Templates
+
+In the **Preferences > Email** tab, users can customize email templates to personalize communication with signers and stakeholders.  
+This feature helps maintain brand consistency and enhances engagement throughout the signing workflow.
+
+👉 [📄 Step-by-step guide to setting up custom email templates](https://docs.opensignlabs.com/docs/help/Settings/Custom-email-templates)
+
+**Note:** The custom email templates feature is only available on the **Professional** and higher plans—it is not included in the **Free** plan.
+
+---
+
+## 🔒 Security
+
+The **Security** tab in OpenSign (found under **Settings > Preferences > Security**) allows users to manage key authentication methods to protect their account access.
+
+### 🧩 Features Available:
+
+#### ✅ Two-Factor Authentication (2FA)
+
+Enhance your account security by enabling 2FA. Once activated, you'll enter a time-based code from an authenticator app each time you log in.
+
+#### 🛡️ Passkey Authentication
+
+Passkeys offer a **passwordless**, **phishing-resistant** login experience using your device’s built-in security features such as fingerprint, Face ID, or PIN.
+
+👉 For full details on setting up **Two-Factor Authentication (2FA)** and **Passkey Authentication**:  
+[🔒 View Security Setup Guide](https://docs.opensignlabs.com/docs/help/Settings/SecurityManagement)
+
+For more assistance with OpenSign™ features or APIs, contact our support team at **[support@opensignlabs.com](mailto:support@opensignlabs.com)**.
@@ -0,0 +1,87 @@
+---
+sidebar_position: 9
+title: Security
+---
+import ReactPlayer from 'react-player';
+
+### ✅ Two-Factor Authentication (2FA)
+
+Two-Factor Authentication (2FA) adds a second layer of security to your account by requiring **not just your password, but also a time-sensitive code** from a trusted device.
+
+#### 🔐 What is 2FA?
+
+2FA combines **something you know** (your password) with **something you have** (like a smartphone or hardware token). This significantly reduces the risk of unauthorized access—even if someone has your password.
+
+#### 🛡️ Benefits:
+
+- Enhances account protection against phishing and brute-force attacks  
+- Reduces the risk of unauthorized access from compromised credentials  
+- Helps meet compliance requirements for security-conscious organizations  
+- Only the account owner with access to the authenticator app can log in  
+
+#### 📲 How to Enable:
+
+1. Go to **Settings > Preferences > Security**  
+2. Click "Setup 2FA" button and scan the displayed QR code with an app like Google Authenticator, Authy, or Microsoft Authenticator.
+3. Save the recovery codes in a secure location (they allow access if you lose your phone)  
+4. Enter the 6-digit verification code shown in your app to complete setup  
+
+> 🔁 The verification code refreshes every 30 seconds and is unique to your device.  
+> 🔐 If 2FA is enabled, you will be prompted for a verification code every time you log in.
+
+#### 📹 Watch the Setup Tutorial:
+
+<div>
+    <ReactPlayer  playing controls url='https://www.youtube.com/watch?v=cgVBBetnbO8' />
+</div>
+      
+### 🛡️ Passkey Authentication
+
+Passkeys offer **passwordless**, **phishing-resistant**, and **device-bound** sign-in using modern authentication standards.
+
+#### 🔐 What Are Passkeys?
+
+Passkeys are cryptographic credentials tied to your device and identity, replacing traditional passwords. They’re based on **FIDO2/WebAuthn** standards and work using **public-private key encryption**, making them highly secure.
+
+- Instead of typing passwords, you authenticate using biometrics (like Face ID or fingerprint) or a device PIN.
+- A passkey is stored securely on your device and never shared—so even if attackers phish you, they can’t steal your login info.
+
+#### 💡 Key Features:
+
+- Use **fingerprint**, **Face ID**, or **device PIN**  
+- **Passwordless** and **secure** authentication  
+- Resistant to **phishing** and **credential stuffing**  
+- Syncs across devices (when using platforms like iCloud Keychain or Google Password Manager)  
+- Fast, one-tap login experience
+
+#### 🛠 How to Register a Passkey:
+
+1. Go to **Settings > Preferences > Security**
+2. Click **Register passkey**  
+3. Your device prompts biometric or PIN-based authentication  
+4. On success, the passkey is saved and listed under **Your Passkeys**
+
+> 📌 A passkey is unique to each device/browser combination. You can register multiple passkeys for different environments.
+
+#### 📹 Watch the Setup Tutorial:
+
+<div>
+    <ReactPlayer  playing controls url='https://www.youtube.com/watch?v=lLfcu9oSbew' />
+</div>
+
+#### 🧾 Managing Your Passkeys
+
+##### ✏️ Rename:
+
+Click the **pencil icon** to rename a passkey for easy identification.
+
+##### 🗑 Delete:
+
+Click the **trash icon** to remove a passkey.  
+⚠️ This revokes access via that method and may require alternate login or re-registration.
+
+> 🔐 Tip: Register multiple passkeys on different devices for redundancy and ease of access.
+
+---
+
+For more assistance with OpenSign™ features or APIs, contact our support team at **[support@opensignlabs.com](mailto:support@opensignlabs.com)**.
@@ -0,0 +1,102 @@
+---
+sidebar_position: 5
+title: Manage Teams
+---
+
+# 👥 Teams Management in OpenSign
+
+The **Teams** feature in OpenSign allows you to organize your users into structured groups for easier management, permissions control, and streamlined workflow configuration.
+
+---
+
+## 🧭 How to Access the Teams Page
+
+1. Log in to your OpenSign account.
+2. In the left-hand sidebar, navigate to **Settings → Teams**.
+  
+<img width="436" alt="Navigate-to-Teams" src="https://github.com/user-attachments/assets/2e292fc2-83b9-41b4-b133-451286744547"></img> 
+
+---
+
+## 📋 Teams Overview
+
+On the Teams page, you'll see a list of all existing teams. Each row includes:
+
+| Column         | Description                                                                  |
+|----------------|------------------------------------------------------------------------------|
+| **Sr. No**     | Serial number of the team in the list.                                       |
+| **Name**       | The name of the team.                                                        |
+| **Parent Team**| The parent team this team belongs to (useful for hierarchical grouping).     |
+| **Active**     | Toggle to activate or deactivate the team.                                   |
+| **Edit**       | Click the pencil icon to edit the team name or parent team.                  |
+
+- 🟢 **Active** teams are currently usable across OpenSign modules.  
+- ⚪ **Inactive** teams are hidden from functional views but not deleted.
+
+---
+
+## ➕ Adding a New Team
+
+To create a new team:
+
+1. Click the **➕ Add Team** button at the top-right of the page.
+2. A modal will appear titled **Add Team**.
+
+**Fill in the following details:**
+
+- **Name** (Required): Enter a name for the new team.
+- **Parent Team**: Choose a parent group (default is **All Users**).
+
+<img width="436" alt="add team" src="https://github.com/user-attachments/assets/74c042b1-2c31-4d00-81f4-0abeaf0c985c"></img> 
+
+3. Click **Submit** to create the team or **Reset** to clear the form.
+
+> 📝 **Tip:** Use parent teams to build a team hierarchy — for example, placing _Marketing_ under _HR_.
+
+<img width="436" alt="New team" src="https://github.com/user-attachments/assets/7f69afeb-c96e-46d4-b5ee-5af9dd656d2a"></img>
+
+---
+
+## 🖊️ Editing an Existing Team
+
+To edit a team:
+
+1. Click the **pencil icon** next to the team name.
+2. Modify the team name or parent group.
+3. Save the changes.
+
+---
+
+## 🌐 Where You Can Use the Teams
+
+1. **Active teams** are available when creating new users — you can select a team from the dropdown and add multiple users under one team.
+
+<img width="436" alt="create new user" src="https://github.com/user-attachments/assets/3aea0ff3-5aa2-416c-b6cc-7148e7d694e6"></img>
+
+2. You can also **share templates** with teams. Once a template is shared with a team, **all users in that team can access the template**.
+
+<img width="436" alt="Share template" src="https://github.com/user-attachments/assets/22ddde66-7cd9-4e4b-a012-8e1e72043d20"></img>
+<img width="436" alt="Share template with team" src="https://github.com/user-attachments/assets/534556ce-1641-44c1-a794-54033ca01376"></img>
+
+---
+
+## 🚫 Deactivating a Team
+
+To deactivate a team, toggle the **Active** switch off. This will:
+
+- Prevent users in this team from logging into their OpenSign accounts.
+- Hide the team from the **Teams dropdown** when adding new users.
+- Prevent template sharing with deactivated teams.
+- Preserve team data for future reactivation and audit purposes.
+
+---
+
+## ℹ️ Notes
+
+- The **All Users** team is the default root and **cannot be deleted**.
+- **Deactivated teams** can be re-enabled anytime using the toggle.
+- Only users with **administrative privileges** can access and manage the Teams page.
+
+If you require more help, feel free to reach out to our customer support at **support@opensignlabs.com**.
+
+**Happy signing with OpenSign™!**
@@ -0,0 +1,216 @@
+---
+sidebar_position: 3
+title: Webhook
+---
+
+# 🔁 Webhook
+
+## 🔔 What is a Webhook?
+
+A **webhook** allows one system (like OpenSign) to automatically send real-time data or notifications to another system (like your server) when a specific event occurs.
+
+Think of it as a **push notification for your backend** — instead of continuously checking for updates (polling), a webhook pushes data to your endpoint **as soon as an event happens**.
+
+---
+
+## 🧠 Simple Example
+
+Suppose you're using OpenSign to collect eSignatures:
+
+- When someone **signs a document**, OpenSign triggers a **POST request** to your server.
+- The request includes data such as the document ID, signer email, and signature status.
+- Your server can then process this information — for example, update your CRM, trigger a workflow, or send a confirmation email.
+
+---
+
+## 🧭 How to Add a Webhook in OpenSign
+
+**Step 1:** Log in to your OpenSign account using your credentials.  
+**Step 2:** Navigate to **Settings → Webhook**.
+
+![Navigate to Add Webhook](https://github.com/user-attachments/assets/6b069b6c-d2b7-408b-b7c9-7fbeb55d6c98)
+
+**Step 3:** Click **Add Webhook**.
+
+- A popup will appear. Enter your **Webhook URL** and click **Yes** to save it.
+
+> **Note:** To enable **Live Webhook** support, you must upgrade to a **paid plan** — either the **Professional** or **Teams** plan.
+
+![Add Webhook](https://github.com/user-attachments/assets/ff68b255-a6e6-4a7d-9cef-6dd9e3b6d4e4)
+
+---
+
+## 🧪 Sandbox Webhook
+
+- You can also add webhook for the **Sandbox** environment on the same page.
+- **Sandbox webhook** are available on all plans, including the **Free** plan, and are ideal for development and testing.
+
+> **Caution:** Avoid sending sensitive or confidential data to the Sandbox environment.
+
+📘 **API Reference:**  
+You can also manage your webhooks via our API.  
+See the API documentation here: [Save/Update Webhook API](https://docs.opensignlabs.com/docs/API-docs/save-update-webhook)
+
+---
+
+## 📋 Supported Webhook Events
+
+OpenSign sends event notifications to your configured webhook URL when any of the following actions occur:
+
+- **Document Created** – A document is created.
+- **Document Viewed** – A signer viewed the document.
+- **Document Signed** – A signer signed the document.
+- **Document Completed** – All required signatures are completed.
+- **Document Revoked or Declined** – The document was revoked or declined.
+
+Each notification is sent as a **POST request** with a **JSON payload** containing relevant event data.
+
+---
+
+### 🔍 Example Payload: `Document Created`
+
+```json
+{
+  "event": "created",
+  "type": "request-sign",
+  "objectId": "kpeg6Q2rO7",
+  "file": "https://legadratw3d.ams3.digitaloceanspaces.com/851de61f62b60a1f62e03232464fa4bf_81wV17MTebsrRoov.pdf?...",
+  "name": "Sample Test Doc",
+  "note": "Please review and sign this document",
+  "description": "",
+  "signers": [
+    {
+      "name": "Peter Mark",
+      "email": "peter.mark1093@gmail.com",
+      "phone": "3556567789"
+    }
+  ],
+  "createdAt": "Fri, 16 May 2025 15:02:42 IST"
+}
+```
+### 🔍 Example Payload: `Document Viewed`
+
+```json
+{
+  "event": "viewed",
+  "type": "request-sign",
+  "objectId": "kpeg6Q2rO7",
+  "file": "https://legadratw3d.ams3.digitaloceanspaces.com/851de61f62b60a1f62e03232464fa4bf_81wV17MTebsrRoov.pdf?...",
+  "name": "Sample Test Doc",
+  "note": "Please review and sign this document",
+  "description": "",
+  "signers": [
+    {
+      "name": "Peter Mark",
+      "email": "peter.mark1093@gmail.com",
+      "phone": "3556567789"
+    }
+  ],
+  "viewedBy": "peter.mark1093@gmail.com",
+  "viewedAt": "Fri, 16 May 2025 16:18:16 IST",
+  "createdAt": "Fri, 16 May 2025 15:02:28 IST"
+}
+```
+
+---
+
+### 🔍 Example Payload: `Document Signed`
+
+```json
+{
+  "event": "signed",
+  "type": "request-sign",
+  "objectId": "kpeg6Q2rO7",
+  "file": "https://legadratw3d.ams3.digitaloceanspaces.com/bc2eb56cc9d29a5f222e4a4b5dbbcfbf_signed_sample_test_doc_4858.pdf?...",
+  "name": "Sample Test Doc",
+  "note": "Please review and sign this document",
+  "description": "",
+  "signer": {
+    "name": "Peter Mark",
+    "email": "peter.mark1093@gmail.com",
+    "phone": "3556567789"
+  },
+  "signedAt": "Fri, 16 May 2025 16:18:34 GMT+5:30",
+  "createdAt": "Fri, 16 May 2025 15:02:28 GMT+5:30"
+}
+```
+
+---
+
+### 🔍 Example Payload: `Document Completed`
+
+```json
+{
+  "event": "completed",
+  "type": "request-sign",
+  "objectId": "kpeg6Q2rO7",
+  "file": "https://legadratw3d.ams3.digitaloceanspaces.com/bc2eb56cc9d29a5f222e4a4b5dbbcfbf_signed_sample_test_doc_4858.pdf?...",
+  "certificate": "https://legadratw3d.ams3.digitaloceanspaces.com/9c954912f529acb7e4d065ec0521a63b_certificate.pdf?...",
+  "name": "Sample Test Doc",
+  "note": "Please review and sign this document",
+  "description": "",
+  "signers": [
+    {
+      "name": "Peter Mark",
+      "email": "peter.mark1093@gmail.com",
+      "phone": "3556567789"
+    }
+  ],
+  "completedAt": "Fri, 16 May 2025 16:18:35 GMT+5:30",
+  "createdAt": "Fri, 16 May 2025 15:02:28 GMT+5:30"
+}
+```
+---
+
+### 🔍 Example Payload: `Document Declined`
+
+```json
+{
+  "event": "declined",
+  "type": "request-sign",
+  "objectId": "1gtDMBHpEY",
+  "file": "https://legadratw3d.ams3.digitaloceanspaces.com/e90c32a45351eb52eb00e0054ae50566_581ZmOn4CwAqnxSF.pdf?...",
+  "name": "Sample Test Doc ",
+  "note": "Please review and sign this document",
+  "description": "",
+  "signers": [
+    {
+      "name": "Peter Mark",
+      "email": "peter.mark1093@gmail.com",
+      "phone": "9283784545554"
+    }
+  ],
+  "declinedBy": "peter.mark1093@gmail.com",
+  "declinedReason": "Invalid date format used.",
+  "declinedAt": "Fri, 16 May 2025 16:25:38 IST",
+  "createdAt": "Fri, 16 May 2025 16:24:28 IST"
+}
+```
+---
+
+## ❓ Frequently Asked Questions
+
+### 1. What is the OpenSign Sandbox environment?
+
+The Sandbox is a testing environment designed for developers to safely experiment with OpenSign APIs and workflows. It mirrors the live environment but with testing limitations.
+
+---
+
+### 2. Can I use my Live Webhook in the Sandbox?
+
+No. **Live Webhooks do not work** in the Sandbox environment. You must configure a separate webhook specifically for Sandbox testing.
+
+---
+
+### 3. Can I test all webhook events in the Sandbox?
+
+Yes. The Sandbox environment supports all event types, including `created`, `viewed`, `signed`, `completed`, and `revoked/declined`.  
+However, some behaviors may be simulated for testing purposes.
+
+---
+
+## 💬 Need Help?
+
+If you need help testing your webhook or integrating it into your application, feel free to reach out to our support team at [support@opensignlabs.com](mailto:support@opensignlabs.com).
+
+**Happy signing with OpenSign™!**
@@ -0,0 +1,8 @@
+{
+  "label": "Settings",
+  "position": 5,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn everything about OpenSign™ configuration."
+  }
+}
@@ -0,0 +1,19 @@
+---
+sidebar_position: 7
+title: Disable DocumentId
+---
+
+# How to disable adding the OpenSign™ documentId to signed documents
+Whenever a document is signed by all parties, OpenSign™ adds a DocumentId at the top left corner of the digitally signed document.
+Using this id you can verify the authenticity of the document at a later date, hence we strongly recommend that you keep this id.
+In case you want to disable adding this to your signed documents, turn the 'Disable DocumentId' switch on.
+
+- Click the '⌄' symbol just beside your name on the top right corner
+- Click profile
+- Click the 'edit' button
+- Turn the 'Disable DocumentId' switch to on
+- Click 'save'
+
+<img width="436" alt="image" src="https://github.com/OpenSignLabs/OpenSign/assets/5486116/ee4433c7-1af7-4b74-800d-500060c0642d"></img>
+
+Note that this feature will be available only to enterprise plan customers.
@@ -0,0 +1,137 @@
+---
+sidebar_position: 6
+title: Manage users
+---
+
+# 👤 User Management
+
+The **User Management** feature in OpenSign allows administrators to add, edit, and manage users within the platform. This functionality is available on **Self-Hosted**, **Teams**, and **Enterprise** plans. 
+
+> ✅ Only users with the roles **Admin** or **OrgAdmin** have permission to access and manage users.
+
+---
+
+## 🧭 Accessing User Management
+
+To access the user management panel:
+
+1. Log in to your OpenSign account.
+2. In the left-hand sidebar, navigate to **Settings → Users**.
+
+<img width="436" alt="Navigate-to-users" src="https://github.com/user-attachments/assets/9f34201c-fda7-406b-9a78-49a5459269cd"></img>
+
+A list of existing users will be displayed.
+
+---
+
+## ➕ Adding a New User
+
+To add a new user:
+
+1. **Click the ➕ Add User Button**
+
+2. **Fill in the User Information**
+
+   | Field        | Required | Description                                                                                                                                               |
+   |--------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
+   | **Name**     | ✅ Yes    | Enter the user's full name.                                                                                                                                |
+   | **Email**    | ✅ Yes    | Enter a valid email address.                                                                                                                               |
+   | **Password** | ✅ Yes    | The system auto-generates a password. **Copy it immediately** as it will be shown only once.                                                               |
+   | **Phone**    | ❌ No     | (Optional) Enter the user’s phone number.                                                                                                                   |
+   | **Team**     | ✅ Yes    | Select the team the user belongs to from the dropdown.<br />_Note: Teams must be created beforehand under **Settings → Teams** (available in Teams & Enterprise plans)._ |
+   | **Role**     | ✅ Yes    | Choose one of the following roles:                                                                                                                          |
+   |              |          | - **OrgAdmin**: Full access, including user and team management.                                                                                            |
+   |              |          | - **Editor**: Can create and share templates but **cannot manage users**.                                                                                   |
+   |              |          | - **User**: Can use templates for signing but **cannot share** them or manage users.                                                                        |
+
+<img width="436" alt="Add-user-form" src="https://github.com/user-attachments/assets/c176dd4f-257d-42e2-be7f-a05a1f7e4094"></img>
+
+3. **Submit or Cancel**
+   - Click **Submit** to create the user.
+   - Click **Cancel** to exit without saving.
+
+> 🔒 **Note:** Once a user is created, the password will not be visible again. If needed, you can use the **"Forgot Password"** option on the login page to reset it.
+
+<img width="436" alt="new  user" src="https://github.com/user-attachments/assets/647c40d8-061d-4e0a-b62c-302296e83493"></img>
+
+---
+
+## 🔁 Managing User Status
+
+- **Activate/Deactivate Users**
+  - Use the toggle in the **Active** column to enable or disable a user’s account.
+  - **Deactivated users** will not be able to log in to OpenSign until reactivated.
+
+---
+
+## 🔐 Permissions by Role
+
+| Role        | Manage Users | Create Templates | Share Templates with Teams | Use Templates |
+|-------------|---------------|------------------|-----------------------------|---------------|
+| **OrgAdmin** | ✅ Yes        | ✅ Yes            | ✅ Yes                      | ✅ Yes         |
+| **Editor**   | ❌ No         | ✅ Yes            | ✅ Yes                      | ✅ Yes         |
+| **User**     | ❌ No         | ✅ Yes            | ❌ No                       | ✅ Yes         |
+
+---
+
+## 👥 Buy More Users (Buy Additional Seats)
+
+OpenSign allows you to create users based on the number of seats included in your selected plan. For example, if your current plan includes **2 users**, you can only create **2 users** by default. To add a **third user**, you must **purchase additional seats**.
+
+### Steps to Buy More Users
+
+1. **Click "Buy more users"**
+2. A popup titled **Add Seats** will appear.
+3. **Enter Quantity** – specify how many additional users (seats) you want to purchase.
+4. The **cost** will be calculated automatically based on your plan rate (e.g., USD 100 per user).
+5. Click the **Proceed** button to finalize the purchase.
+6. The seats will be **immediately added** to your account.
+
+<img width="436" alt="buy-more-seats" src="https://github.com/user-attachments/assets/2e093a64-1b75-4543-b4c4-1186d4c02b09"></img>
+
+7. Once you’ve purchased additional seats, click the **"+" Add User** button to create the new user.
+
+> 💡 **Tip:** You can also purchase additional seats in advance to avoid interruptions during user onboarding.
+
+---
+
+### 🔢 Understanding "Available Seats"
+
+At the bottom-right of the **Users** page, you’ll see the **Available seats** status.
+
+<img width="436" alt="seat-availability" src="https://github.com/user-attachments/assets/37c2a5c7-0d4b-4bd2-8fb1-11def9e65b42"></img>
+
+**Example:**  
+`Available seats: 2/3`
+
+This means:
+- **2 seats** are currently available for creating new users.
+- **3** is the **total number of user seats** your organization has purchased.
+
+If the available seats count is **0**, you must **buy more seats** before adding new users.
+
+---
+
+## 📌 Frequently Asked Questions (FAQ)
+
+**Q: How do I pay for purchased add-on users?**  
+**A:** After purchasing additional users (seats), your saved card will be charged automatically, and an invoice will be emailed to your registered address.
+If no card is on saved, a payment link will be sent to your email to complete the transaction.
+
+---
+
+## 📣 Need Help?
+
+If you need further assistance, feel free to reach out to our customer support at **support@opensignlabs.com**.
+
+For more support and updates, follow us on:
+
+- 🌐 [Website](http://www.opensignlabs.com)
+- 🐦 [Twitter](https://twitter.com/OpenSignHQ)
+- 📘 [Facebook](https://www.facebook.com/profile.php?id=61551030403669)
+- 💼 [LinkedIn](https://www.linkedin.com/company/opensignhq/)
+- 📺 [YouTube](https://www.youtube.com/@opensignhq)
+
+---
+
+Happy signing with **OpenSign™**!
@@ -0,0 +1,37 @@
+---
+sidebar_position: 1
+title: My Signature
+---
+
+# Setup "My Signature" in OpenSign
+
+This guide provides instructions on how to save your signature and initials using the OpenSign application. Once saved, you can use them with one click when signing documents. To create your signature, start by clicking the "My Signature" link under "settings" menu. 
+
+## Creating and Saving Your Signature
+
+The drawing box on the left is dedicated to this purpose. If you make a mistake or wish to redo your signature, simply click the Clear button below the drawing box to erase it and start over.
+
+## Uploading a Signature Image
+
+Alternatively, if you prefer to use a pre-existing image of your signature, click the "Upload Image" button next to the Signature button. This will prompt you to select an image file from your device. Once uploaded, the image will be displayed in the drawing box, ready to be saved.
+
+<img width="820" alt="create signature and initials" src="https://github.com/user-attachments/assets/6e86e3ed-48e2-47d1-a9b6-f964b13986c5"></img>
+
+## Creating and Saving Your Initials
+
+For creating your initials, use your mouse or a stylus to draw your initials on the drawing box on the right. As with the signature, there is a Clear button available to erase and redo the initials if necessary.
+
+## Saving Your Signature and Initials
+
+After you have drawn your signature and initials or uploaded your signature image, the next step is to save them. Click the Save button located below the drawing areas. This will store your signature and initials in the system, making them readily available for future use.
+
+<img width="820" alt="create signature" src="https://github.com/user-attachments/assets/f999f256-038f-4e91-be7d-e1dceb0cfdec"></img>
+
+Once saved, these can be applied with a single click whenever you need to sign a document within the OpenSign application, streamlining your workflow and ensuring consistency in your document signing process.
+
+## Getting Started
+**try OpenSign on cloud** at **[OpenSignLabs](https://app.opensignlabs.com)**.
+
+Or 
+
+Get started by deploying a new instance of **OpenSign** by following these [instructions](https://docs.opensignlabs.com/docs/self-host/intro).
@@ -0,0 +1,8 @@
+{
+  "label": "Templates",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn everything about OpenSign™ Templates feature."
+  }
+}
@@ -0,0 +1,179 @@
+---
+sidebar_position: 1
+title: Create Templates
+---
+
+## Getting Started
+
+Creating a template in OpenSign is straightforward and can significantly enhance your document workflow. Follow these steps to create a custom template:
+
+# How to Create a Template in OpenSign™
+
+## Step 1: 
+### Begin New Template Creation
+
+- **Navigate to New template form**: On the left sidebar, click on "Templates" to expand the menu. and Click on the "Create template" option.
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/1cb7610f-c144-4774-85c2-ed7d70e0a73c" />
+
+### Uploading Your Document
+
+- **[1] Choose File**: Once the "New template" page opens, click here to select and upload the document file from your computer that needs to be signed. Supported formats include PDF, PNG, JPG, JPEG, and DOCX.
+- **[2] Choose File from Dropbox**: Click the dropbox icon to select the document file from your dropbox account.
+
+### Entering Template Details
+
+- **[3] Title** *(Required)*: Provide a title for your template. For example, "Demo Custom Template."
+- **[4] Description**: Optionally add a description to give context or instructions regarding the template. 
+- **[5] Note**: Optionally add a note to give context or instructions regarding the document.
+
+### Set the sending order
+- **[6] Send in Order**
+  - **If you choose:**
+  - **Yes**: Selecting this option will send the signing request to the first signer initially. Once the first signer completes their part, the next signer in the sequence will receive the request. This process continues until all signers have signed the document. This method ensures that the document is signed in a specific order.
+  - **No**: Selecting this option will send the signing links to all signers simultaneously. Every signer can sign the document at their convenience, regardless of whether other signers have completed their signatures. This method is faster but does not enforce any signing order among the participants.
+Select the option that best suits the needs of your document processing.
+### Auto reminder (feature only available for the subscribed user)
+- **[7]** Once you enable the auto reminder, a text field will appear allowing you to set the reminder for a specific number of days.
+- **Remind once in every (Days)**: Here, you can set the number of days for the reminder.
+### Security Setting
+- **[8] Enable OTP Verification** : 
+If set to "Yes," the signer will be required to complete email OTP verification before viewing and signing the document. If "Enable OTP Verification" is set to "No," the signer will not be prompted for OTP verification during the signing process.
+
+- **[9] Enable tour**: 
+If set to "Yes," the signer will see the tour guide while signing the document. If your signer is familiar with OpenSign and you prefer not to display the tour guide, you can select "No," and the tour guide will not be shown to your signers.
+
+### Proceed to Template Creation Panel
+- **Next**: Click the "Next" button to proceed to the next stage of template creation, where you can add widgets and finalize the template.
+- **Cancel**: If you need to start over or make changes, click Cancel button to clear the form.
+## Step 2: 
+### Template creation 
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/986a0068-e711-4367-91b6-349dc1db8c43" />
+
+- **[1] Define Roles**:
+  - **Add Roles**: In the roles section on the right, click "+ Add role" to specify the roles involved in the document, such as Candidate, HR, and Manager.
+- **[2] Assign Widgets to Roles**: Click on each role to highlight it, then drag and drop the widget to assign it to that role.
+  - **[1] Assign signature widget**: Select the Role from the right side panel, click on the signature widget, and position it where the signature is required. You can place multiple signature widgets for each Role, as required.
+
+  After placing the Signature widget, you will see the options on the widget such as:
+  - **Add Signer/Change Signer**: Clicking the first icon on the signature widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+  - **Copy Signature**: Clicking on this option reveals the following choices.
+    -  All pages: It will copy the signature widget to all pages.
+    -  All pages but last: It will copy the signature widget to all pages except the last page.
+    -  All pages but first: It will copy the signature widget to all pages except the first page.
+    
+  - **[2] Add other widgets**: Depending on your needs, you can include additional widgets such as:
+   - **Stamp**: After placing the Stamp widget, you will see the options on the widget such as:
+        - Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
+        - Add Signer/Change Signer: Clicking the second option on the stamp widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+        - Copy Stamp: Clicking on this option reveals the following choices.
+          -  All pages : It will copy the stamp widget to all pages.
+          -  All pages but last: It will copy the stamp widget to all pages except the last page.
+          -  All pages but first: It will copy the stamp widget to all pages except the first page.
+   - **Initials**: After placing the Initials widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
+    - Add Signer/Change Signer: Clicking the first icon on the Initials widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy Initials: Clicking on this option reveals the following choices.
+      -  All pages : It will copy the stamp widget to all pages.
+      -  All pages but last: It will copy the stamp widget to all pages except the last page.
+      -  All pages but first: It will copy the stamp widget to all pages except the first page.
+ - **Name**: After placing the name widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Name widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the name widget.
+ - **Job title**: After placing the job title widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Job title widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the job title widget.
+  
+ - **Company**: After placing the company widget, you will see the options on the widget such as:
+     - Setting icon: By clicking on the option, you can set the color and font.
+     - Add Signer/Change Signer: Clicking the first icon on the Company widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the Company widget.
+ - **Date**: After placing the date widget, you will see the options on the widget such as:
+     - Setting icon: By clicking on the option, you can choose from various date formats.
+     - Add Signer/Change Signer: Clicking the first icon on the Date widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the date widget. 
+ - **Text**: After placing the Text widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Copy : Clicking on this you can duplicate the Text widget.
+  
+ - **Text Input**: After placing the Text Input widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Text Input widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the Text Input widget.
+ - **Checkbox**: Once you drop the checkbox widget, a popup will open where you can set the checkbox name and options. Additionally, there are a few options available such as setting the minimum and maximum checks, making the checkbox read-only, and hiding the label.
+     - Add Signer/Change Signer: Clicking the first icon on the CheckBox widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the image widget.
+ - **Dropdown**: Once you drop the dropdown widget, a popup will open where you can set the dropdown name and options. Additionally, there are a few options available such as setting a default value and marking the dropdown as required or optional.
+     - Add Signer/Change Signer: Clicking the first icon on the Dropdown widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the image widget.
+ - **Radio button**: Once you drop the radio button widget, a popup will open where you can set the radio button name and options. Additionally, there are a few options available such as setting a default value, making the radio button read-only, and hiding the label.
+     - Add Signer/Change Signer: Clicking the first icon on the Radio button widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+     - Copy : Clicking on this you can duplicate the image widget.
+ - **Image**: After placing the Image widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can specify whether this widget is mandatory or optional during the document signing.
+    - Add Signer/Change Signer: Clicking the first icon on the Image widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the image widget.
+ - **Email**: After placing the email widget, you will see the options on the widget such as:
+    - Setting icon: By clicking on the option, you can set the color and font.
+    - Add Signer/Change Signer: Clicking the first icon on the Email widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+    - Copy : Clicking on this you can duplicate the email widget.
+      
+### Save Template 
+**Next button**: Once you’ve organized your widgets and set their properties, simply click the “Next” button to save your template.
+
+After doing so, a “Create document” popup will appear, prompting you with the question: “Do you want to create a document using the template you just created?” You’ll have the option to choose either “Yes” or “No.”
+
+**If you select "Yes"**: It will create a document using the template you just created.
+
+**If you select "No"**: You will be redirected to the Manage templates form.
+
+## Step 3: 
+### Viewing and Managing Templates 
+
+<img width="828" alt="Manage Template" src="https://github.com/user-attachments/assets/06b80221-5c42-451c-af03-44cc12e6aa2d" />
+
+On the Manage templates page you will see a list of templates you have created or have access to. The list includes details such as the template title, file, owner, signers, and whether the template is public.
+
+**Download Template**: If you need to download the template file, click on the "Download" link under the "File" column next to the respective template.
+
+**View Signers**: This will display the roles or the list of signers along with their assigned roles, if assigned during template creation.
+
+**Public/Private Toggle**: You can set your template to public or private by toggling the switch under the "Public" column. Public templates can be accessed by anyone via the public URL, allowing them to open and sign the document after registering.
+
+**Use Template**: To use a template, click the "+ USE" button next to the desired template. This will open the template, enabling you to create a document for a signature request. Simply assign the signers and send it for signatures.
+
+**Quick Send**: For faster processing, the Quick Send feature allows you to swiftly create and send a document to a signer using the selected template.
+
+**Edit**: The "Edit" feature is crucial for keeping your document templates up-to-date and relevant. Whether you need to make minor tweaks or major changes, OpenSign's editing capabilities are user-friendly and efficient.
+Click on the three dots next to the template you want to edit.
+Select "Edit." Make the necessary changes and save them.
+
+**Share With Team**: Collaboration is essential for any successful team, and OpenSign simplifies sharing document templates with your team. Here's how you can utilize the "Share With Team" feature:
+Click on the three dots next to the template you want to share.
+Select "Share With Team."
+
+**Embed**: The "Embed" option provides you with a code to embed the template into a website or other platforms, allowing users to interact with it directly from the external site.
+Click "Embed" to generate the code that can be copied and pasted into your desired web location. We currently support React, HTML/JavaScript and Angular-based websites.
+
+<img width="828" alt="Embed" src="https://github.com/user-attachments/assets/05dcaf5d-07b0-4069-bcd5-83e2daf71e29" />
+
+**Copy template id**: This action copies the unique ID associated with the template, which is useful for embedding or sharing with public users when your template is set to public.
+
+**Copy public URL**: This generates a public link for the template, allowing external users to access it without logging into OpenSign.
+Click "Copy Public URL" to generate the link, then share it as needed.
+
+**Delete**: Sometimes, it's necessary to clean up your templates to keep your workspace organized. The "Delete" feature allows you to remove outdated or unnecessary templates with ease.
+Click on the three dots next to the template you want to delete.
+Select "Delete." Confirm the deletion.
+
+## Additional Information
+  - The fields with an asterisk (*) are mandatory.
+  - Make sure your document is in PDF, PNG, JPG, JPEG, or DOCX format.
+  - You can access your signed documents in the folder you've selected by visiting OpenSign™ Drive anytime. You can also access the documents from reports section.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,138 @@
+---
+sidebar_position: 5
+title: Embedding OpenSign templates
+---
+import ReactPlayer from 'react-player';
+
+# What is OpenSign Template Embedding?
+OpenSign Template Embedding allows users to seamlessly integrate public document templates into their websites or applications. By embedding templates, you can provide a direct and interactive signing experience for your users without requiring them to leave your platform. This feature supports various technologies like React, Next.js, HTML, JavaScript, and Angular, making it easy to add signing capabilities to different web projects.
+With OpenSign Template Embedding, businesses can offer a streamlined and professional document signing process, enhancing user experience and workflow efficiency.
+
+## How to set up a Public profile, Design templates, and Embed a template?
+
+### Step 1: Set up your Public profile (Username & Tagline)
+
+- **Navigate to your profile**: On the top right, click your profile icon, select "Edit profile," and enter a public username (e.g., "OpenSignPublicProfile").
+- **Add a tagline**(Optional): Enter a custom tagline (e.g., "Seal the deal openly") and save the changes.
+  
+<img width="828" alt="Set up Public Profile" src="https://github.com/user-attachments/assets/6c9cbd4b-eb1a-4a5b-bb0a-21777621555c" />
+
+### Step 2: Create a new template
+
+- **Navigate to Templates**: On the left sidebar, click "Templates" and select "Create template."
+  
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/95ee5c26-4284-46aa-9de7-3f492ad34feb" />
+
+### Upload your document and fill in the template details:
+
+- **[1] Choose file**: Select the document to upload (supported formats: PDF, PNG, JPG, JPEG, DOCX).
+- **[2] Choose file from Dropbox**: Click the dropbox icon to select the document file from your dropbox account.
+- **[3] Title** *(Required)*: Provide a title for your template.
+- **[4] Description**: Optionally add a description to give context or instructions regarding the template. 
+- **[5] Note**: Add additional notes or instructions.
+- **[6] Send in Order**: Choose "Yes" or "No" for sending in a specific order.
+- **[7] Auto reminder**: Set up automatic email reminders for signers. 
+- **[8] Enable OTP verification** : Choose "Yes" or "No" for requiring email verification via OTP.
+- **[9] Enable tour**: Select "Yes" or "No" for enabling the tour feature.
+  
+### Proceed to template creation panel
+- **Next**: Click the "Next" button to proceed to the next stage of template creation, where you can add widgets and finalize the template.
+- **Cancel**: If you need to start over or make changes, click Cancel button to clear the form.
+
+### Step 3: Template creation 
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/36a269fb-179b-462e-abc0-f436ec195a4a" />
+
+- **[1] Define roles**:
+  - **Add Roles**: In the roles section on the right, click "+ Add role" to specify the roles involved in the document, such as Candidate, HR, and Manager.
+
+    **Note**: Make sure the public role is positioned at the top if 'Send in Order' is set to Yes; Otherwise, you will not be able to make the template public.
+    
+- **[2] Assign widgets to roles**: Click on each role to highlight it, then drag and drop the widget to assign it to that role. The widgets will appear in the same colour as the role name once you drop it on the document.
+  - **[1] Assign signature widget**: Select the Role from the right side panel, click on the signature widget, and position it where the signature is required. You can place multiple signature widgets for each Role, as required.
+  - **[2] Add other widgets**: Depending on your needs, you can include additional widgets such as:
+Stamps, Initials, Name, Date, Text, Checkbox, and more.
+
+**Important**: Before proceeding, ensure that all roles have assigned signers, except for the public role, since we are making this template public.
+
+### Save template 
+  - **Next button**: Once you’ve organized your widgets and set their properties, simply click the “Next” button to save your template.
+
+  - After doing so, a “Create document” popup will appear, prompting you with the question: “Do you want to create a document using the template you just created?” You’ll have the option to choose either “Yes” or “No.”
+
+  - Choose "No" you will be redirected to the Manage templates screen.
+
+### Step 4: Managing and Embedding the template
+
+<img width="828" alt="Manage Template" src="https://github.com/user-attachments/assets/4fd68285-d489-4998-bcf1-1cf40eada723" />
+
+On the Manage templates page, you'll see a list of templates you've created or have access to. This list provides details such as the template title, file, owner, signers, and whether the template is public.
+
+  - To embed a template, you first need to make it public by clicking the toggle button in the public column of the template.
+
+  - A confirmation popup will appear with the message, 'Are you sure you want to make this template public?' You can choose either Yes or No. Select Yes to make the template public.
+
+  - A public profile popup will appear, displaying the code to embed the template.
+
+  - We support embedding the template in React/Next.js, HTML/JavaScript, and Angular application.
+
+After making the template public, you’ll have an additional option to view the template embedding code.
+To access it:
+
+  - Click on the three dots (options menu) next to the template.
+    
+  - Select the Embed option from the dropdown menu.
+
+**Embed the template in a React or Next.js application**
+  - Copy the code and paste it into your React or Next.js application.
+  - Install the required OpenSign dependencies and run your project.
+
+Watch the video below to see how to embed the template in a React or Next.js application.
+
+<div>
+    <ReactPlayer playing={false} controls url='https://youtu.be/W5tCPVNVNvg?si=IE0k33Gwzt3pwdxF' />
+</div>
+           
+**Embed the template in an HTML or JavaScript project**
+  - Copy the code and paste it into your HTML or JavaScript application.
+    
+Watch the video below to see how to embed the template in HTML or JavaScript application.
+
+<div>
+    <ReactPlayer playing={false} controls url='https://youtu.be/0CXZGRiGIjw?si=MqGkTZ1uz-2F-5Qn' />
+</div>
+      
+**Embed the template in an Angular project**
+  - Copy the code and paste it into your an Angular application.
+  - Install the required OpenSign dependencies and run your project.
+    
+Watch the video below to see how to embed the template in an Angular application.
+
+<div>
+    <ReactPlayer playing={false} controls url='https://youtu.be/3zz5flzql8M?si=2TgnLgjd0laCX3fu' />
+</div>
+      
+### Step 5: Sign the document through the Embed public template.
+
+  - Once the document loads, click Sign Now in the top right corner. A popup will appear asking for signer details such as Name, Email, and Phone Number.
+
+  - Enter the required details and click Submit.
+
+  - You can now fill in the necessary fields within the document's widgets and sign it.
+    
+  - After you finish signing, the document will be completed and automatically sent to the next signer for their signature.
+    
+### Step 6: Print document, Download completion certificate, and Download Document
+
+You’ll see options to Print or Download the signed document for your records.
+
+If you are the only signer, the signing process is finished, and you will have the options to Print document, Download completion certificate, and Download document.
+
+  
+## Additional Information
+- All fields marked with an asterisk (*) must be completed before the document can be submitted.
+- Ensure that the document format is supported by OpenSign before uploading.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!write 
@@ -0,0 +1,104 @@
+---
+sidebar_position: 4
+title: Setting up an OpenSign template for public signing
+---
+
+# What is the OpenSign Public profile?
+
+The OpenSign Public profile feature offers the ultimate public document signing solution without any need for integrations. With this feature, users can share document templates publicly, allowing anyone to access and sign the documents directly through the shared templates. This streamlines the signing process by providing a seamless, accessible way for public signers to complete documents without additional steps or integrations.
+
+## How to setup Public profile, Design templates, and Enable public signing?
+
+### Step 1: Set up your Public profile (Username & Tagline)
+
+- **Navigate to your profile**: On the top right, click your profile icon, select "Edit profile," and enter a public username (e.g., "OpenSignPublicProfile").
+- **Add a tagline**(Optional): Enter a custom tagline (e.g., "Seal the deal openly") and save the changes.
+  
+<img width="828" alt="Set up Public Profile" src="https://github.com/user-attachments/assets/6c9cbd4b-eb1a-4a5b-bb0a-21777621555c" />
+
+### Step 2: Create a new template
+
+- **Navigate to Templates**: On the left sidebar, click "Templates" and select "Create template."
+  
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/95ee5c26-4284-46aa-9de7-3f492ad34feb" />
+
+### Upload your document and fill in the template details:
+
+- **[1] Choose file**: Select the document to upload (supported formats: PDF, PNG, JPG, JPEG, DOCX).
+- **[2] Choose file from Dropbox**: Click the dropbox icon to select the document file from your dropbox account.
+- **[3] Title** *(Required)*: Provide a title for your template.
+- **[4] Description**: Optionally add a description to give context or instructions regarding the template. 
+- **[5] Note**: Add additional notes or instructions.
+- **[6] Send in Order**: Choose "Yes" or "No" for sending in a specific order.
+- **[7] Auto reminder**: Set up automatic email reminders for signers. 
+- **[8] Enable OTP verification** : Choose "Yes" or "No" for requiring email verification via OTP.
+- **[9] Enable tour**: Select "Yes" or "No" for enabling the tour feature.
+  
+### Proceed to template creation panel
+- **Next**: Click the "Next" button to proceed to the next stage of template creation, where you can add widgets and finalize the template.
+- **Cancel**: If you need to start over or make changes, click Cancel button to clear the form.
+
+### Step 3: Template creation 
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/36a269fb-179b-462e-abc0-f436ec195a4a" />
+
+- **[1] Define roles**:
+  - **Add Roles**: In the roles section on the right, click "+ Add role" to specify the roles involved in the document, such as Candidate, HR, and Manager.
+
+    **Note**: Make sure the public role is positioned at the top if 'Send in Order' is set to Yes; Otherwise, you will not be able to make the template public.
+    
+- **[2] Assign widgets to roles**: Click on each role to highlight it, then drag and drop the widget to assign it to that role. The widgets will appear in the same colour as the role name once you drop it on the document.
+  - **[1] Assign signature widget**: Select the Role from the right side panel, click on the signature widget, and position it where the signature is required. You can place multiple signature widgets for each Role, as required.
+  - **[2] Add other widgets**: Depending on your needs, you can include additional widgets such as:
+Stamps, Initials, Name, Date, Text, Checkbox, and more.
+
+**Important**: Before proceeding, ensure that all roles have assigned signers, except for the public role, since we are making this template public.
+
+### Save template 
+  - **Next button**: Once you’ve organized your widgets and set their properties, simply click the “Next” button to save your template.
+
+  - After doing so, a “Create document” popup will appear, prompting you with the question: “Do you want to create a document using the template you just created?” You’ll have the option to choose either “Yes” or “No.”
+
+  - Choose "No" you will be redirected to the Manage templates screen.
+
+### Step 4: Managing and making template public
+
+<img width="828" alt="Manage Template" src="https://github.com/user-attachments/assets/4fd68285-d489-4998-bcf1-1cf40eada723" />
+
+On the Manage templates page, you'll see a list of templates you've created or have access to. This list provides details such as the template title, file, owner, signers, and whether the template is public.
+
+  - To make a template public, click the toggle button in the public column on the template.
+
+  - A confirmation popup will appear with the message, 'Are you sure you want to make this template public?' You can choose either Yes or No. Select Yes to make the template public.
+
+  - A public profile popup will appear, where you can copy the public URL.
+
+  - Copy and share this link, and anyone with it can view your publicly available templates by pasting the URL into their browser.
+
+<img width="828" alt="Manage Template" src="https://github.com/user-attachments/assets/99977728-86de-4913-8d2e-f54ab0b18033" />
+
+### Step 5: Sign the document through the public template.
+
+  - Click the Sign now button next to the template you want to sign. Once the document loads, click Sign Now in the top right corner. A popup will appear asking for signer details such as Name, Email, and Phone Number.
+
+  - Enter the required details and click Submit.
+
+  - You can now fill in the necessary fields within the document's widgets and sign it.
+    
+  - After you finish signing, the document will be completed and automatically sent to the next signer for their signature.
+    
+<img width="828" alt="Signed the template" src="https://github.com/user-attachments/assets/0c667098-1c79-4c6a-b59f-03d20ac85552" />
+
+### Step 6: Print document, Download completion certificate, and Download Document
+
+You’ll see options to Print or Download the signed document for your records.
+
+If you are the only signer, the signing process is finished, and you will have the options to Print document, Download completion certificate, and Download document.
+
+## Additional Information
+- All fields marked with an asterisk (*) must be completed before the document can be submitted.
+- This feature is available on all paid plans.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!write 
@@ -0,0 +1,111 @@
+---
+sidebar_position: 3
+title: Quickly Send the Document for Signature Using Template
+---
+
+# How to use the OpenSign Quick Send feature to send a document for signature using a template
+
+### Step 1: Begin New Template Creation
+
+- **Navigate to New template form**: On the left sidebar, click on "Templates" to expand the menu. and Click on the "Create template" option.
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/fe7b0bd0-bb45-4f64-8450-83ffb5c3d7fc" />
+
+### Step 2: Uploading Your Document
+
+- **[1] Choose File**: Once the "New template" page opens, click here to select and upload the document file from your computer that needs to be signed. Supported formats include PDF, PNG, JPG, JPEG, and DOCX.
+- **[2] Choose File from Dropbox**: Click the dropbox icon to select the document file from your dropbox account.
+
+### Step 3: Entering Template Details
+
+- **[3] Title** *(Required)*: Provide a title for your template. For example, "Demo Custom Template."
+- **[4] Description**: Optionally add a description to give context or instructions regarding the template. 
+- **[5] Note**: Optionally add a note to give context or instructions regarding the document.
+
+### Step 4: Set the sending order
+- **[6] Send in Order**
+  - **If you choose:**
+  - **Yes**: Selecting this option will send the signing request to the first signer initially. Once the first signer completes their part, the next signer in the sequence will receive the request. This process continues until all signers have signed the document. This method ensures that the document is signed in a specific order.
+  - **No**: Selecting this option will send the signing links to all signers simultaneously. Every signer can sign the document at their convenience, regardless of whether other signers have completed their signatures. This method is faster but does not enforce any signing order among the participants.
+Select the option that best suits the needs of your document processing.
+### Step 5: Auto reminder (feature only available for the subscribed user)
+- **[7]** Once you enable the auto reminder, a text field will appear allowing you to set the reminder for a specific number of days.
+- **Remind once in every (Days)**: Here, you can set the number of days for the reminder.
+  
+### Step 6: Proceed to Template Creation Panel
+- **Next**: Click the "Next" button to proceed to the next stage of template creation, where you can add widgets and finalize the template.
+- **Cancel**: If you need to start over or make changes, click Cancel button to clear the form.
+### Step 7: Template creation 
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/986a0068-e711-4367-91b6-349dc1db8c43" />
+
+- **[1] Define Roles**:
+  - **Add Roles**: In the roles section on the right, click "+ Add role" to specify the roles involved in the document, such as Candidate, HR, and Manager.
+- **[2] Assign Widgets to Roles**: Click on each role to highlight it, then drag and drop the widget to assign it to that role.
+  - **[1] Assign signature widget**: Select the Role from the right side panel, click on the signature widget, and position it where the signature is required. You can place multiple signature widgets for each Role, as required.
+
+  After placing the Signature widget, you will see the options on the widget such as:
+  - **Add Signer/Change Signer**: Clicking the first icon on the signature widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+  - **Copy Signature**: Clicking on this option reveals the following choices.
+    -  All pages: It will copy the signature widget to all pages.
+    -  All pages but last: It will copy the signature widget to all pages except the last page.
+    -  All pages but first: It will copy the signature widget to all pages except the first page.
+  - **[2] Add other widgets**: Depending on your needs, you can include additional widgets such as:
+Stamps, Initials, Name, Date, Text, Checkbox, and more.
+
+### Step 8: Save Template 
+**Next button**: Once you’ve organized your widgets and set their properties, simply click the “Next” button to save your template.
+
+After doing so, a “Create Document” popup will appear, prompting you with the question: “Do you want to create a document using the template you just created?” You’ll have the option to choose either “Yes” or “No.”
+**If you select "Yes"**: It will create a document using the template you just created.
+**If you select "No"**: You will be redirected to the Manage templates form.
+
+### Step 9: Viewing and Managing Templates 
+
+<img width="828" alt="Manage Template" src="https://github.com/user-attachments/assets/86bf3628-987d-4ae2-89c3-b24ec1f6bdc2" />
+
+On the Manage Templates page, you'll see a list of templates you've created or have access to. This list provides details such as the template title, file, owner, signers, and whether the template is public. You’ll also find actions like "Use Template," "Quick Send," "Edit," "Delete," and more.
+
+### Step 10: Quick Send
+For faster processing, the Quick Send feature allows you to swiftly create and send a document to a signer using the selected template.
+
+<img width="828" alt="Manage Template" src="https://github.com/user-attachments/assets/02334ff3-eab6-4a11-aba2-d95a5cba2935" />
+
+How to Send the Document:
+-  Click the Quick Send button next to the template in the list.
+    
+-  A popup will open where you can assign signers to each role by simply adding their email addresses.
+    
+-  If you need to create multiple documents, click the Add New button.
+    
+After adding the signers, click the Send button. This will generate the document and send an email to the signers with a signature request.
+
+## Signers Signing Process
+### Step 11: Email OTP verification
+Once the email is received, the signer can click the 'Sign Here' button. This will open the email verification page. After clicking the 'Get Verification Code' button, an OTP (one-time password) will be sent to the signer’s email address. Enter the received OTP into the verification textbox and click the 'Verify' button.
+
+<div>
+  <img width="800" alt="OpenSign send OTP" src="https://github.com/user-attachments/assets/b82c796a-98e3-4296-bde1-fe86b1b993ad" />
+</div>
+<div>
+  <img width="800" alt="OpenSign verify otp" src="https://github.com/user-attachments/assets/63cf4b75-9d47-4630-a83c-e916a5c13b3c" />
+</div>
+
+### Step 12: Finalizing the Process:
+
+After verification, the signer will be redirected to the document signing page, where he can view the document received for signing. To sign, the signer simply clicks on the signature widget, which allows them to draw, upload a digitally scanned signature, or type the signature. 
+
+After filling out all assigned widgets, click the 'Finish' button. Once the document is finished,.
+   - The signer has the option of downloading or printing the signed document. He will also obtain the completion certificate if he is the final signer.  
+
+   - If there are more than one signer, the document will be immediately sent to the next signer. Once all signers have finished their signatures, they can download and print the signed document as well as the completion certificate.
+<img width="800" alt="OpenSignFinalStep" src="https://github.com/user-attachments/assets/f4783aa0-2879-4ec2-9ddc-16d59f3a1fc0" />
+
+## Additional Information
+- All fields marked with an asterisk (*) must be completed before the document can be submitted.
+- Ensure that the document format is supported by OpenSign before uploading.
+- Signed documents can be accessed in the designated 'Root' folder or the one you have specified.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!write 
@@ -0,0 +1,126 @@
+---
+sidebar_position: 2
+title: Use template to create documents
+---
+# How to use template to create documents in OpenSign™
+
+### Step 1: Begin New Template Creation
+
+- **Navigate to New template form**: On the left sidebar, click on "Templates" to expand the menu. and Click on the "Create template" option.
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/fe7b0bd0-bb45-4f64-8450-83ffb5c3d7fc" />
+
+### Step 2: Uploading Your Document
+
+- **[1] Choose File**: Once the "New template" page opens, click here to select and upload the document file from your computer that needs to be signed. Supported formats include PDF, PNG, JPG, JPEG, and DOCX.
+- **[2] Choose File from Dropbox**: Click the dropbox icon to select the document file from your dropbox account.
+
+### Step 3: Entering Template Details
+
+- **[3] Title** *(Required)*: Provide a title for your template. For example, "Demo Custom Template."
+- **[4] Description**: Optionally add a description to give context or instructions regarding the template. 
+- **[5] Note**: Optionally add a note to give context or instructions regarding the document.
+
+### Step 4: Set the sending order
+- **[6] Send in Order**
+  - **If you choose:**
+  - **Yes**: Selecting this option will send the signing request to the first signer initially. Once the first signer completes their part, the next signer in the sequence will receive the request. This process continues until all signers have signed the document. This method ensures that the document is signed in a specific order.
+  - **No**: Selecting this option will send the signing links to all signers simultaneously. Every signer can sign the document at their convenience, regardless of whether other signers have completed their signatures. This method is faster but does not enforce any signing order among the participants.
+Select the option that best suits the needs of your document processing.
+### Step 5: Auto reminder (feature only available for the subscribed user)
+- **[7]** Once you enable the auto reminder, a text field will appear allowing you to set the reminder for a specific number of days.
+- **Remind once in every (Days)**: Here, you can set the number of days for the reminder.
+  
+### Step 6: Proceed to Template Creation Panel
+- **Next**: Click the "Next" button to proceed to the next stage of template creation, where you can add widgets and finalize the template.
+- **Cancel**: If you need to start over or make changes, click Cancel button to clear the form.
+### Step 7: Template creation 
+
+<img width="828" alt="Create Template" src="https://github.com/user-attachments/assets/986a0068-e711-4367-91b6-349dc1db8c43" />
+
+- **[1] Define Roles**:
+  - **Add Roles**: In the roles section on the right, click "+ Add role" to specify the roles involved in the document, such as Candidate, HR, and Manager.
+- **[2] Assign Widgets to Roles**: Click on each role to highlight it, then drag and drop the widget to assign it to that role.
+  - **[1] Assign signature widget**: Select the Role from the right side panel, click on the signature widget, and position it where the signature is required. You can place multiple signature widgets for each Role, as required.
+
+  After placing the Signature widget, you will see the options on the widget such as:
+  - **Add Signer/Change Signer**: Clicking the first icon on the signature widget allows you to change the signer. You can choose from existing signers in the dropdown or add a new signer.
+  - **Copy Signature**: Clicking on this option reveals the following choices.
+    -  All pages: It will copy the signature widget to all pages.
+    -  All pages but last: It will copy the signature widget to all pages except the last page.
+    -  All pages but first: It will copy the signature widget to all pages except the first page.
+  - **[2] Add other widgets**: Depending on your needs, you can include additional widgets such as:
+Stamps, Initials, Name, Date, Text, Checkbox, and more.
+
+### Step 8: Save Template 
+**Next button**: Once you’ve organized your widgets and set their properties, simply click the “Next” button to save your template.
+
+After doing so, a “Create Document” popup will appear, prompting you with the question: “Do you want to create a document using the template you just created?” You’ll have the option to choose either “Yes” or “No.”
+  - **If you select "Yes"**: It will create a document using the template you just created.
+  - **If you select "No"**: You will be redirected to the Manage templates form.
+
+### Step 9: 
+**You now have two options to create a document from a template**:
+- **1) Instant Document Creation with 'Yes' Option**: 
+
+Select the "Yes" option from the popup. This will open the template, enabling you to create a document for a signature request.
+    
+  <img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/d9b80b9e-390f-4382-9b81-8b91ec2efeba" />
+ 
+ - **2) Create Documents via 'Use Template' in Manage Templates**: 
+
+Select the "No" option from the popup, and you'll be redirected to the Manage Templates form. To use a template, click the "+ USE" button next to the desired template. This will open the template and allow you to create a document for a signature request. displaying all the widgets that were set up during template creation.
+
+  <img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/e33f63b4-5b1a-430d-9fae-44a6ea316ba2" />
+
+You can view all the widgets configured during template creation and also add, remove, or adjust them as needed. Before sending the document for signatures, it's essential to assign signers to each role.
+
+**Option1**: To assign a signer, simply double-click on any widget corresponding to that role. A popup will appear, allowing you to either select an existing signer or add a new one.
+
+**Option2**: Every widget includes an option to assign a signer. Clicking the second option on the widget allows you to assign the signer, either by selecting from existing signers in the dropdown or by adding a new signer.
+
+### Step 10: Next:
+- **Next**: Once the signers are assigned to all the roles, click the "Next" button. The document will then be created.
+
+### Step 11: Send Mail
+After finishing the document creation, a 'Send Mail' popup will appear, offering options to Send Email, Customize Email, Copy Link, or Share the document.
+  - Send Email: Click the 'Send' button to send the document for signing to all signers. If the sending order is set to 'Yes', it will send the document to the first signer.
+
+  - Customize Email: Click the 'Customize Email' button to open the email editor. Here, you can set variables and customize the content. After clicking 'Send', the document will be sent for signing to all signers, or if the sending order is set to 'Yes', it will be sent to the first signer with the customized email.
+
+  - Copy Link: You can copy the link to sign the document.
+  
+  - Share: Use this option to share the document via email, WhatsApp and other Windows apps
+    
+  <img width="800" alt="request signatures" src="https://github.com/user-attachments/assets/e2344479-daae-43ff-a61a-14ea98b237d6" />   
+          
+## Signers Signing Process
+### Step 12: Email OTP verification
+Once the email is received, the signer can click the 'Sign Here' button. This will open the email verification page. After clicking the 'Get Verification Code' button, an OTP (one-time password) will be sent to the signer’s email address. Enter the received OTP into the verification textbox and click the 'Verify' button.
+
+<div>
+  <img width="800" alt="OpenSign send OTP" src="https://github.com/user-attachments/assets/b82c796a-98e3-4296-bde1-fe86b1b993ad" />
+</div>
+<div>
+  <img width="800" alt="OpenSign verify otp" src="https://github.com/user-attachments/assets/63cf4b75-9d47-4630-a83c-e916a5c13b3c" />
+</div>
+
+### Step 13: Finalizing the Process:
+
+After verification, the signer will be redirected to the document signing page, where he can view the document received for signing. To sign, the signer simply clicks on the signature widget, which allows them to draw, upload a digitally scanned signature, or type the signature. 
+
+After filling out all assigned widgets, click the 'Finish' button. Once the document is finished,.
+   - The signer has the option of downloading or printing the signed document. He will also obtain the completion certificate if he is the final signer.  
+
+   - If there are more than one signer, the document will be immediately sent to the next signer. Once all signers have finished their signatures, they can download and print the signed document as well as the completion certificate.
+     
+<img width="800" alt="OpenSignFinalStep" src="https://github.com/user-attachments/assets/f4783aa0-2879-4ec2-9ddc-16d59f3a1fc0" />
+
+## Additional Information
+- All fields marked with an asterisk (*) must be completed before the document can be submitted.
+- Ensure that the document format is supported by OpenSign before uploading.
+- Signed documents can be accessed in the designated 'Root' folder or the one you have specified.
+
+If you require more help, feel free to reach out to our customer support on support@opensignlabs.com.
+
+Happy signing with OpenSign™!
@@ -0,0 +1,18 @@
+---
+sidebar_position: 1
+---
+import ReactPlayer from 'react-player';
+
+# Intro
+
+🌟Get ready for an electrifying journey at [OpenSign™](https://app.opensignlabs.com), the most incredibly documented open source document signing solution! 🚀 This is your go-to spot for diving deep into everything OpenSign™ has to offer. Whether you’re just starting out or you’re a seasoned pro eager to uncover even more cool features, we’ve got you covered with the most awesome, top-notch guides and resources around. Get ready to make the most out of OpenSign™ 🎉📚🔍 Your adventure in excellence starts here! 🌈✨🌟
+<div>
+    <ReactPlayer playing controls url='https://www.youtube.com/watch?v=GY_OP697EiU' />
+</div>
+## Getting Started
+
+Try OpenSign on cloud at **[OpenSignLabs](https://app.opensignlabs.com)**.
+
+Or
+
+Get started by deploying a new instance of **OpenSign** by following the **[installation guide](https://docs.opensignlabs.com/docs/self-host/intro).**
@@ -0,0 +1,47 @@
+---
+sidebar_position: 1
+---
+
+# Tutorial Intro
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
+## Generate a new site
+
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
+
+```bash
+npm init docusaurus@latest my-website classic
+```
+
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
+## Start your site
+
+Run the development server:
+
+```bash
+cd my-website
+npm run start
+```
+
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
@@ -0,0 +1,15 @@
+---
+title: Digital Ocean
+---
+# Digital Ocean
+
+OpenSign application consists of 3 components -
+- ReactJS frontend
+- NodeJS API
+- MongoDB database
+
+You can install all 3 components on digital ocean using the button below -
+
+[![Deploy on DigitalOcean](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/OpenSignLabs/Deploy-OpenSign-to-Digital-Ocean/tree/main&refcode=30db1c901ab0)
+
+**Note:** This button is not intended for production installations because it sets up the OpenSign database within an app platform container that lacks persistent storage. Instead, in the next step, replace the MongoDB connection string with one from a managed MongoDB instance, which you should set up on DigitalOcean.
@@ -0,0 +1,8 @@
+{
+  "label": "One-click Install",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Start with installing OpenSign in your own cloud infrastructure."
+  }
+}
--- a/Show More
+++ b/Show More