update pdf worker url

refactor: load pdf worker from local using fetch method
fix: update pdf worker import path
2026-09-03 08:18:50 +02:00 · 2024-06-16 12:59:34 +05:30 · 2024-06-16 01:01:05 +05:30 · 2024-06-16 00:03:48 +05:30
501 changed files with 78713 additions and 64508 deletions
@@ -232,24 +232,6 @@
      "contributions": [
        "code"
      ]
-    },
-    {
-      "login": "1024mb",
-      "name": "1024mb",
-      "avatar_url": "https://avatars.githubusercontent.com/u/9301204?v=4",
-      "profile": "https://github.com/1024mb",
-      "contributions": [
-        "translation"
-      ]
-    },
-    {
-      "login": "ehowe",
-      "name": "Eugene Howe",
-      "avatar_url": "https://avatars.githubusercontent.com/u/756984?v=4",
-      "profile": "https://github.com/ehowe",
-      "contributions": [
-        "code"
-      ]
    }
  ]
 }
@@ -0,0 +1,12 @@
+# Clone the repo and rename this file to .env if you want to run the frontend react app locally for some quick contributions to the project.
+# When used as it is, this env config will connect to our hosted UAT backend
+# Note that any data in staging will get cleared from time to time and you may have to sign up again and again
+
+# Set it to the URL form where the app home page will be accessed
+PUBLIC_URL=http://localhost:3000
+# Set it to true if you want to generate the Sourcemap for debugging
+GENERATE_SOURCEMAP=false
+# 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_SERVERURL=https://staging-app.opensignlabs.com/api/app
+# 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=opensign
@@ -3,22 +3,24 @@
 # Note that any data in staging will get cleared from time to time and you may have to sign up again and again

 # Set it to the URL form where the app home page will be accessed
-PUBLIC_URL=https://localhost:3001
+PUBLIC_URL=http://localhost:3000
 # Set it to true if you want to generate the Sourcemap for debugging
 GENERATE_SOURCEMAP=false
 # 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_SERVERURL=http://localhost:8080/app
-# (DEPRECATED) This should not be changed if provided; it should be 'opensign'.
+REACT_APP_SERVERURL=http://localhost:8080/app
+# 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=opensign


 # Backend ExpressJS config ****************************************************************************************************************************************************************************************
+# 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.
+APP_ID=opensign
 # Name of the app. It will be visible in the verification emails sent out.
 appName=open_sign_server
 # 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.
 MASTER_KEY=XnAadwKxxByMr
 # Mongodb URI to connect to
-MONGODB_URI=mongodb://mongo-container:27017/OpenSignDB
+MONGODB_URI=mongodb://mongo:27017/OpenSignDB
 # Path on which APIs should be mounted. Do not change this. This variable shall be removed & value hardcoded in the source code in coming versions.
 PARSE_MOUNT=/app
 # Set it to the URL from where APIs will be accessible to the NodeJS functions, for local development it should be localhost:3000/api/app (use your local port number instead)
@@ -44,7 +46,7 @@ USE_LOCAL=true
 MAILGUN_API_KEY=
 MAILGUN_DOMAIN=mail.yourdomain.com
 MAILGUN_SENDER=postmaster@mail.yourdomain.com
-SMTP_ENABLE=true
+SMTP_ENABLE=
 SMTP_HOST=smtp.yourhost.com
 SMTP_PORT=443
 SMTP_USER_EMAIL=mailer@yourdomain.com
@@ -109,6 +111,3 @@ CRUxFgQUDYlgGVxSxuOknhQc256x3++7BDwwMTAhMAkGBSsOAwIaBQAEFFjASdYl

 # Provide Pass pharse of above PFX or p12 document
 PASS_PHRASE=opensign 
-
-# (DEPRECATED) This should not be changed if provided; it should be 'opensign'.
-APP_ID=opensign
@@ -1,15 +1,8 @@
 name: ci
-
-# 👇 add this block
-permissions:
-  contents: read        # allow checkout & metadata-action to read repo
-  id-token: write       # needed by docker/metadata-action v4
-
 on:
  push:
    branches:
      - 'main'
-      - 'staging'

 jobs:
  docker:
@@ -17,50 +10,38 @@ jobs:
    strategy:
      matrix:
        include:
-          - image: opensign/opensign
+          - image: amolshejole/OpenSign
            dockerfile: apps/OpenSign/Dockerhubfile
-          - image: opensign/opensignserver
+          - image: amolshejole/OpenSignServer
            dockerfile: apps/OpenSignServer/Dockerhubfile
-
    steps:
-      - name: Checkout
+      -
+        name: Checkout
        uses: actions/checkout@v3
-
-      # 👇 Enable emulation so we can build for arm64 on amd64 runners
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-        with:
-          platforms: linux/amd64,linux/arm64
-
-      # 👇 Enable Buildx for multi-arch builds
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Login to Docker Hub
+      -
+        name: Login to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker
+      - 
+        name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@v4
        with:
          images: ${{ matrix.image }}
-
-      - name: Debug - List files opensign
+      -
+        name: Debug - List files opensign
        run: ls -R apps/OpenSign/  # Adjust the path as needed
-
-      - name: Debug - List files opensignserver
+      -
+        name: Debug - List files opensignserver
        run: ls -R apps/OpenSignServer/  # Adjust the path as needed  
-
-      - name: Build and push (multi-arch)
+      -
+        name: Build and push
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ${{ matrix.dockerfile }}
          push: true
-          # 👇 Build for both AMD64 & ARM64
-          platforms: linux/amd64,linux/arm64
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
@@ -77,6 +77,6 @@ Engage with the community on our [Gitter Channel](https://gitter.im/OpenSignLabs

 ## License

-By contributing, you agree that your contributions will be licensed under its [AGPL-V3 License](LICENSE).
+By contributing, you agree that your contributions will be licensed under its [MIT License](LICENSE).

---
+---
@@ -1,7 +0,0 @@
-{$HOST_URL} {
-    reverse_proxy client:3000
-    handle_path /api/* {
-        reverse_proxy server:8080
-            rewrite * {uri}
-    }
-}
@@ -1,9 +1,4 @@
-* All content that resides under the "apps/OpenSignServer/cloud/customRoute" directory of this repository, if that directory exists, is licensed under the license defined in "apps/OpenSignServer/cloud/customRoute".
-* All third party components incorporated into the OpenSign Software are licensed under the original license provided by the owner of the applicable component.
-* Content outside of the above mentioned directories or restrictions above is available under the "GNU AFFERO GENERAL PUBLIC LICENSE" as defined below -
-
-
-                  GNU AFFERO GENERAL PUBLIC LICENSE
+                    GNU AFFERO GENERAL PUBLIC LICENSE
                       Version 3, 19 November 2007

 Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
@@ -1,10 +1,8 @@
 build:
-	@echo "Building with HOST_URL=${HOST_URL}"
 	cp .env.local_dev .env
 	cd apps/OpenSign && cp ../../.env.local_dev .env && npm install && npm run build
-	HOST_URL=${HOST_URL} docker compose up --build --force-recreate
+	docker compose up --build --force-recreate

 run:
-	@echo "Building with HOST_URL=${HOST_URL}"
 	cp .env.local_dev .env
-	docker compose up -d
+	docker compose up -d
@@ -11,9 +11,7 @@

 <a href="https://www.opensignlabs.com/">Website</a>
  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://docs.opensignlabs.com">Help Docs</a>
-  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-    <a href="https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1">API Docs</a>
+  <a href="https://www.opensignlabs.com">Docs</a>
  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
  <a href="https://www.opensignlabs.com/blog">Blog</a>
  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
@@ -24,7 +22,7 @@
  <a href="https://www.linkedin.com/company/opensign%E2%84%A2/about/">LinkedIn</a>


-## The premier open source document signing solution(DocuSign alternative)
+## The open-source document e-signing solution

 ---
 </div>
@@ -44,60 +42,35 @@ Please star ⭐ the repo to support us! 😀

 ### Introduction

-Welcome to OpenSign, the premier open source docusign alternative - document e-signing solution designed to provide a secure, reliable and free alternative to commercial esign platforms like DocuSign, PandaDoc, SignNow, Adobe Sign, Smartwaiver, SignRequest, HelloSign & Zoho sign. Our mission is to democratize the document signing process, making it accessible and straightforward for everyone.
+Welcome to OpenSign, the premier open source docusign alternative - document e-signing solution designed to provide a secure, reliable and free alternative to commercial esign platforms like DocuSign, PandaDoc, SignNow, Adobe Sign, Smartwaiver, SignRequest, HelloSign & Zoho sign. Our mission is to democratize the e-signing process, making it accessible and straightforward for everyone.

 ---

 ### Features

- **Secure PDF E-Signing:** With the help of robust encryption algorithms, OpenSign™ ensures maximum security, privacy & compatibility. Now sign unlimited documents even on the [cloud hosted free version of OpenSign](https://www.opensignlabs.com/).
- **Annotate Documents:** OpenSign™ allows you to annotate PDF documents with an advanced signing pad that allows hand drawn signatures, uploaded images, typed signatures & saved signatures for the simplest open source document signing experience ever.
- **User-Friendly Interface:** OpenSign™ was built while keeping Intuitive design in mind for ease of use. Features like "Sign yourself", "Templates", "One click signatures" and "OpenSign™ Drive" makes it stand out of the crowd and even makes it better than a lot of so-called industry leaders. OpenSign intends to provide the best document signing experience in the open source ecosystem.
- **Multi-signer Support:** OpenSign's ability to invite multiple signers for signing along with the ability to invite by sharing signing links & being able to enforce signing in a sequence makes it the only open source solution that is fully loaded and allows it to compete head-to-head with established players in e-signature space.
+- **Secure PDF E-Signing:** With the help of robust encryption algorithms, OpenSign™ ensures maximum security, privacy & compatibility.
+- **Annotate Documents:** OpenSign™ allows you to annotate PDF documents with an advanced signing pad that allows hand drawn signatures, uploaded images, typed signatures & saved signatures for the simplest signing experience ever.
+- **User-Friendly Interface:** OpenSign™ was built while keeping Intuitive design in mind for ease of use. Features like "Sign yourself", "Templates", "One click signatures" and "OpenSign™ Drive" makes it stand out of the crowd and even makes it better than a lot of so-called industry leaders.
+- **Multi-signer Support:** OpenSign's ability to invite multiple signers for signing along with the ability to invite witnesses & being able to enforce signing in a sequence makes it the only open source solution that is fully loaded and allows it to compete head-to-head with established players in e-signature space.
 - **Email Unique Code(OTP) verification support for guest signers:** With OpenSign™, your documents are fully secure even when being signed by guest users. Guest signers can only sign the document after entering a unique code sent to their email address. 
- **"Expiring Docs" & "Rejection":** You can set documents to expire after certain number of days after which nobody will be able to sign. Not just this, OpenSign™ also allows signers to reject signing a document with a reason that will be promptly shared with the sender.
- **Beautiful email templates:** All document signing invitations, completion notifications & reminders are formatted using great looking email templates. Not just this, you are even allowed to customise the email templates making your free document signing invitations look the way you always wanted them to be.
+- **"Expiring Docs" & "Rejection":** You can set documents to expire after certain number of days after which nobody will be able to sign. Not just this, OpenSign™ also allows signers to reject signing a document.
+- **Beautiful email templates:** All document signing invitations, completion notifications & reminders are formatted using great looking email templates.
 - **PDF Template Creation:** OpenSign™ allows you to create and store PDF document templates for repeated use thereby saving you a lot of time & collect e-signatures seamlessly.
- **OpenSign™ Drive:** It is a centralised secure vault for your digital documents that makes storing, signing, organizing, sharing & archieving your docs a breeze.
+- **OpenSign™ Drive:** It is a centralised secure vault for your digital documents that makes storing, signing, organizing, sharing & achieving your docs a breeze.
 - **Audit Trails & completion certificate:** Being a security focused solution, OpenSign™ makes it a top priority to save detailed logs for tracking document activities along with time-stamps, IP addresses, email IDs & phone numbers. A completion certificate is generated as soon as document is completed which contains all the document related logs for added safety.
- **API Support:** OpenSign™ API allows seamless integration into existing systems and software. You can generate an API key from the app and refer the [official API docs](https://docs.opensignlabs.com/docs/API-docs/v1.1) to start integrating it in your existing applications.
- **Integrations:** The open source document signing experience becomes even more seamless because of integrations with various Cloud storage systems, CRMs & enterprise platforms. We also have a Zapier integration that allows you to integrate it with virtually any application.
-<img alt="Login page" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/8016edb6-7d6e-4185-ab72-82d2c4a16032" height='200' > 
-<img alt="Dash_board" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/6e7b96f7-3154-4c25-bc1e-caf33925cc47" height='200'>
-<img  alt="Widgets" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/7edb65bd-c265-4b3d-9758-38e79766c5c2" height='200'>
-<img  alt="Request Signature" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/1697ae46-dcac-41c9-a081-aded25693846" height='200'>
-<img  alt="Create template" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/c2060fda-50f1-4116-a532-51b94b48463a" height='200'>
-<img  alt="Manage_Template" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/90310c74-8271-49bd-8c5f-89daa5a623c4" height='200'>
-<img  alt="Folders" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/a52207e7-3b0e-497c-b5f6-747bc4e67918" height='200'>
-<img alt="OpenSign_Confetti" src="https://github.com/OpenSignLabs/OpenSign/assets/171803164/8f4c6a6e-4a73-439c-9f34-f426044d0a7f" height='200'>
+- **API Support:** OpenSign™ API allows seamless integration into existing systems and software. You can generate an API key from the app and refer the [docs](https://docs.opensignlabs.com) to start integrating it in your existing applications.
+- **Integrations:** Seamless integrations with various Cloud storage systems, CRMs & enterprise platforms is available. We also have a Zapier integration that allows you to integrate it with virtually any application.
+
+<img src=https://github.com/OpenSignLabs/OpenSign/assets/5486116/b37ff443-7099-4273-9aeb-21c46d7154cf height='200'>
+<img src=https://github.com/OpenSignLabs/OpenSign/assets/5486116/86db91b7-6c2f-4885-a33c-58f4fd35ec89 height='200'>
+<img src=https://github.com/OpenSignLabs/OpenSign/assets/5486116/56835efd-c40e-42de-a206-20202c293876 height='200'>
+

 ---

-### Deploy
+### Installation

-Note: The default MongoDB instance used in deployment is not persistant and will be cleared on every restart. To retain your data, configure and supply your own MongoDB connection URL.
-
-#### DigitalOcean
-[![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)
-
-#### Docker
-The simplest way to install OpenSign on your own server is using official docker images by running the following command -
-
-**Command for linux/MacOS**
-``` 
-export HOST_URL=https://opensign.yourdomain.com && curl --remote-name-all https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/docker-compose.yml https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/Caddyfile https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/.env.local_dev && mv .env.local_dev .env.prod && docker compose up --force-recreate
-```
-**Command for Windows (Powershell)**
-```
-$env:HOST_URL="https://opensign.yourdomain.com"; Invoke-WebRequest -Uri https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/docker-compose.yml -OutFile docker-compose.yml; Invoke-WebRequest -Uri https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/Caddyfile -OutFile Caddyfile; Invoke-WebRequest -Uri https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/.env.local_dev -OutFile .env.local_dev; Rename-Item -Path .env.local_dev -NewName .env.prod; docker compose up --force-recreate
-```
-**Command for Windows (CMD/Terminal)**
-```
-set HOST_URL=https://opensign.yourdomain.com && curl -O https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/docker-compose.yml && curl -O https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/Caddyfile && curl -O https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/.env.local_dev && rename .env.local_dev .env.prod && docker compose up --force-recreate
-```
-Make sure that you have `Docker` and `git` installed before you run this command -
-
-Please refer to the [Installation Guide](https://docs.opensignlabs.com/docs/self-host/docker/run-locally/) for detailed instructions on how to install OpenSign on your system.
+Please refer to the [Installation Guide](INSTALLATION.md) for detailed instructions on how to install OpenSign on your system.

 ---

@@ -115,13 +88,13 @@ We welcome contributions from the open-source community. For more information on

 ### License

-OpenSign is licensed under the AGPL-3 License. For more details, see the [LICENSE](LICENSE) file.
+OpenSign is licensed under the AGPL License. For more details, see the [LICENSE](LICENSE) file.

 ---

 ### Acknowledgments

-We would like to thank all our contributors and users for their support and feedback. Special thanks to [OpenSignLabs](https://www.opensignlabs.com) for spearheading this initiative.
+We would like to thank all our contributors and users for their support and feedback. Special thanks to [OpenSignLabs](https://github.com/OpenSignLabs) for spearheading this initiative.

 ---

@@ -163,9 +136,7 @@ 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/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>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ugoconsonni"><img src="https://avatars.githubusercontent.com/u/13661702?v=4?s=100" width="100px;" alt="ugoconsonni"/><br /><sub><b>ugoconsonni</b></sub></a><br /><a href="#code-ugoconsonni" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/daniel-mutwiri"><img src="https://avatars.githubusercontent.com/u/8936960?v=4?s=100" width="100px;" alt="Daniel Mutwiri"/><br /><sub><b>Daniel Mutwiri</b></sub></a><br /><a href="#code-daniel-mutwiri" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/1024mb"><img src="https://avatars.githubusercontent.com/u/9301204?v=4?s=100" width="100px;" alt="1024mb"/><br /><sub><b>1024mb</b></sub></a><br /><a href="#translation-1024mb" title="Translation">🌍</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ehowe"><img src="https://avatars.githubusercontent.com/u/756984?v=4?s=100" width="100px;" alt="Eugene Howe"/><br /><sub><b>Eugene Howe</b></sub></a><br /><a href="#code-ehowe" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a><a href="#security-Zathiel" title="Security">🛡️</a></td>
    </tr>
  </tbody>
 </table>
@@ -175,5 +146,3 @@ We would like to thank all our contributors and users for their support and feed

 <!-- ALL-CONTRIBUTORS-LIST:END -->

-This project is tested with BrowserStack.
-
@@ -1 +1,6 @@
-Please visit the official documentation [here](https://docs.opensignlabs.com).
+The community is working hard to put together a great usage guide.
+You will soon see one of the best usage guides here.
+
+Till then you can view the quick promo video by clicking the link below -
+
+[<img src="https://i.ytimg.com/vi/szYaBZhXZNo/maxresdefault.jpg" width="50%">](https://www.youtube.com/watch?v=szYaBZhXZNo "OpenSign promo")
@@ -1,3 +0,0 @@
-{
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
-  }
@@ -0,0 +1,25 @@
+# Use an official Node runtime as the base image
+FROM node:18
+
+# Set the working directory inside the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json first to leverage Docker cache
+COPY ./package*.json ./
+
+# Install application dependencies
+RUN npm install
+
+# Copy the current directory contents into the container
+COPY ./ .
+COPY ./.husky .
+
+# Make port 3000 available to the world outside this container
+EXPOSE 3000
+
+# Define environment variables if needed
+# ENV NODE_ENV production
+
+# Run the application
+ENTRYPOINT npm run start
+
@@ -1,5 +1,5 @@
 # Use an official Node runtime as the base image
-FROM node:22.14.0
+FROM node:18

 # Set the working directory inside the container
 WORKDIR /usr/src/app
@@ -13,24 +13,15 @@ RUN npm install
 # Copy the current directory contents into the container
 COPY apps/OpenSign/ .
 COPY apps/OpenSign/.husky .
-COPY apps/OpenSign/entrypoint.sh .

-# make the entrypoint.sh file executable
-RUN chmod +x entrypoint.sh
-
-# Define environment variables if needed
-ENV NODE_ENV=production
-ENV GENERATE_SOURCEMAP=false
 # build
 RUN npm run build

-# Inject env.js loader into index.html
-RUN sed -i '/<head>/a\<script src="/env.js"></script>' build/index.html
-
 # Make port 3000 available to the world outside this container
 EXPOSE 3000

-ENTRYPOINT ["./entrypoint.sh"]
+# Define environment variables if needed
+# ENV NODE_ENV production

 # Run the application
 CMD ["npm", "start"]
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react"]
-};
@@ -1,213 +0,0 @@
-# Tailwind Dark Mode Usage Guide
-
-## Overview
-This guide shows how to use the new Tailwind utilities for better dark mode visibility in OpenSign.
-
-## Button Styling
-
-### VS Code-style Disabled Buttons
-```jsx
-// Option 1: Direct VS Code styling
-<button className="op-btn op-btn-primary op-btn-vscode-disabled" disabled>
-  Disabled Button
-</button>
-
-// Option 2: Themed disabled styling
-<button className="op-btn btn-themed-disabled">
-  Themed Button
-</button>
-
-// Option 3: Conditional styling
-<button 
-  className={`op-btn op-btn-primary ${isDisabled ? 'op-btn-vscode-disabled' : ''}`}
-  disabled={isDisabled}
->
-  Dynamic Button
-</button>
-```
-
-## Icon Styling
-
-### Theme-aware Icons
-```jsx
-// Better visibility in dark mode
-<i className="fa-light fa-folder icon-improved"></i>
-
-// Muted but still visible
-<i className="fa-light fa-plus icon-muted"></i>
-
-// Disabled state
-<i className="fa-light fa-trash icon-disabled"></i>
-```
-
-### CSS Variable Approach
-```jsx
-// Using CSS variables
-<i className="fa-light fa-search icon-themed"></i>
-<i className="fa-light fa-settings icon-themed-muted"></i>
-
-// Inline styles with CSS variables
-<i 
-  className="fa-light fa-plus"
-  style={{ color: 'var(--icon-color)' }}
-/>
-```
-
-### Legacy JavaScript Function (Still Supported)
-```jsx
-// Existing approach - still works
-<i 
-  className="fa-light fa-plus"
-  style={{ color: getThemeIconColor() }}
-/>
-```
-
-## Text Styling
-
-### Improved Gray Text
-```jsx
-// These automatically improve in dark mode
-<span className="text-gray-500">More visible in dark mode</span>
-<span className="text-gray-400">Muted but readable</span>
-<span className="text-gray-600">Clear text</span>
-```
-
-## Complete Examples
-
-### Toolbar with Better Visibility
-```jsx
-const Toolbar = () => (
-  <div className="flex space-x-2 p-2">
-    <button className="p-2 hover:bg-gray-200 rounded">
-      <i className="fa-light fa-plus icon-improved"></i>
-    </button>
-    <button className="p-2 hover:bg-gray-200 rounded" disabled>
-      <i className="fa-light fa-trash icon-disabled"></i>
-    </button>
-    <button className="p-2 hover:bg-gray-200 rounded">
-      <i className="fa-light fa-edit icon-improved"></i>
-    </button>
-  </div>
-);
-```
-
-### Form with Disabled States
-```jsx
-const Form = ({ isSubmitting }) => (
-  <form>
-    <input className="op-input" />
-    <button 
-      className={`op-btn op-btn-primary ${isSubmitting ? 'op-btn-vscode-disabled' : ''}`}
-      disabled={isSubmitting}
-    >
-      {isSubmitting ? 'Submitting...' : 'Submit'}
-    </button>
-  </form>
-);
-```
-
-## React-Tour and Tooltip Dark Mode Support
-
-### React-Tour Modals
-The react-tour modals now automatically support dark mode with VS Code-inspired styling:
-
-```jsx
-// These components automatically get dark mode styling
-<Tour
-  onRequestClose={closeTour}
-  steps={tourConfig}
-  isOpen={isOpen}
-  rounded={5}
-/>
-```
-
-### ReactTooltip Components
-All ReactTooltip instances now support dark mode:
-
-```jsx
-// Automatically styled for dark mode
-<ReactTooltip id="my-tooltip" className="z-[999]">
-  <div className="max-w-[200px]">
-    <p>Tooltip content</p>
-  </div>
-</ReactTooltip>
-```
-
-### HoverCard Balloon UI
-The balloon tooltips in OpenSign Drive now properly support dark mode:
-
-```jsx
-// These automatically get dark styling in dark mode
-<HoverCard>
-  <HoverCardContent>
-    Document information
-  </HoverCardContent>
-</HoverCard>
-```
-
-## Dark Mode Features Added
-
-### 1. **React-Tour Modal Styling**
- Background: `#1F2937` (VS Code modal background)
- Text: `#E5E7EB` (soft white for readability)
- Borders: `#374151` (subtle borders)
- Buttons: VS Code-style primary/secondary buttons
-
-### 2. **ReactTooltip Styling**
- Background: `#1F2937` with proper contrast
- Border: `#374151` for definition
- Box shadow: Enhanced for dark backgrounds
- Text: `#E5E7EB` for optimal readability
-
-### 3. **HoverCard Balloon UI**
- Background: `#1F2937` (matches VS Code)
- Text: `#E5E7EB` for readability
- Arrow: Automatically matches background color
- Enhanced shadows for dark backgrounds
-
-### 4. **React-Datepicker Support**
- Calendar background: `#1F2937`
- Selected dates: VS Code blue (`#007ACC`)
- Hover states: Proper contrast ratios
- Navigation arrows: Themed appropriately
-
-## CSS Classes Reference
-
-| Class | Purpose | Dark Mode Color |
-|-------|---------|----------------|
-| `icon-improved` | Better icon visibility | `#CCCCCC` |
-| `icon-muted` | Muted but visible icons | `#999999` |
-| `icon-disabled` | Disabled icon state | `#858585` |
-| `op-btn-vscode-disabled` | VS Code disabled button | Background: `#3C3C3C` |
-| `btn-themed-disabled` | Themed disabled button | Uses CSS variables |
-| `icon-themed` | Variable-based icon color | `var(--icon-color)` |
-| `.reactour__helper` | `#1F2937` background |
-| `.react-tooltip` | `#1F2937` background |
-| `.HoverCardContent` | `#1F2937` background |
-| `.react-datepicker` | `#1F2937` background |
-
-## Migration Guide
-
-### From JavaScript Function to Tailwind
-```jsx
-// Before
-<i style={{ color: getThemeIconColor() }} className="fa-light fa-plus" />
-
-// After
-<i className="fa-light fa-plus icon-improved" />
-```
-
-### From Hardcoded Colors to Theme-aware
-```jsx
-// Before
-<i className="fa-light fa-plus text-gray-500" />
-
-// After (automatic improvement)
-<i className="fa-light fa-plus text-gray-500" />
-// OR explicitly
-<i className="fa-light fa-plus icon-improved" />
-```
-
-## Migration Notes
-
-All existing tooltip and tour components will automatically inherit the new dark mode styling when the theme is set to `opensigndark`. No code changes required for existing implementations.
@@ -1,29 +0,0 @@
-#!/bin/sh
-
-ENV_FILE=./build/env.js
-DOTENV_FILE=./.env.prod # ✅ use .env.prod
-
-echo "Generating runtime env file at $ENV_FILE..."
-
-echo "window.RUNTIME_ENV = {" > $ENV_FILE
-
-# List of keys to include
-RUNTIME_KEYS="REACT_APP_SERVERURL"
-
-for key in $RUNTIME_KEYS; do
-  # First check docker env (-e), fallback to .env file
-  value=$(printenv "$key")
-
-  if [ -z "$value" ] && [ -f "$DOTENV_FILE" ]; then
-    # fallback: read from .env
-    value=$(grep "^$key=" "$DOTENV_FILE" | cut -d '=' -f2- | tr -d '\r\n' | sed 's/"/\\"/g')
-  else
-    value=$(echo "$value" | sed 's/"/\\"/g')
-  fi
-
-  echo "  $key: \"$value\"," >> $ENV_FILE
-done
-
-echo "};" >> $ENV_FILE
-
-exec "$@"
@@ -1,90 +0,0 @@
-/**
- * Tailwind Dark Mode Usage Examples for OpenSign
- *
- * This file demonstrates how to use the new Tailwind utilities
- * for better dark mode visibility of buttons and icons.
- */
-
-// Example 1: VS Code-style disabled buttons
-const DisabledButtonExamples = () => {
-  return (
-    <div>
-      {/* Option A: Using the VS Code disabled style */}
-      <button className="op-btn op-btn-primary op-btn-vscode-disabled" disabled>
-        VS Code Style Disabled Button
-      </button>
-
-      {/* Option B: Using themed disabled style */}
-      <button className="op-btn btn-themed-disabled">
-        Themed Disabled Button
-      </button>
-
-      {/* Option C: Conditional styling */}
-      <button
-        className={`op-btn op-btn-primary ${isDisabled ? "op-btn-vscode-disabled" : ""}`}
-        disabled={isDisabled}
-      >
-        Conditional Button
-      </button>
-    </div>
-  );
-};
-
-// Example 2: Icon visibility improvements
-const IconExamples = () => {
-  return (
-    <div>
-      {/* Theme-aware icons with better visibility */}
-      <i className="fa-light fa-folder icon-improved"></i>
-      <i className="fa-light fa-plus icon-muted"></i>
-      <i className="fa-light fa-trash icon-disabled"></i>
-
-      {/* Using CSS variables */}
-      <i className="fa-light fa-search icon-themed"></i>
-      <i className="fa-light fa-settings icon-themed-muted"></i>
-
-      {/* Gray text that automatically improves in dark mode */}
-      <span className="text-gray-500">
-        This text is now more visible in dark mode
-      </span>
-      <span className="text-gray-400">Muted but still readable</span>
-    </div>
-  );
-};
-
-// Example 3: Using CSS variables in inline styles
-const InlineStyleExamples = () => {
-  return (
-    <div>
-      {/* Using CSS variables directly */}
-      <i className="fa-light fa-plus" style={{ color: "var(--icon-color)" }} />
-
-      {/* Using the existing JavaScript function */}
-      <i className="fa-light fa-minus" style={{ color: getThemeIconColor() }} />
-    </div>
-  );
-};
-
-// Example 4: Toolbar with improved icons
-const ToolbarExample = () => {
-  return (
-    <div className="flex space-x-2 p-2">
-      <button className="p-2 hover:bg-gray-200 rounded">
-        <i className="fa-light fa-plus icon-improved"></i>
-      </button>
-      <button className="p-2 hover:bg-gray-200 rounded" disabled>
-        <i className="fa-light fa-trash icon-disabled"></i>
-      </button>
-      <button className="p-2 hover:bg-gray-200 rounded">
-        <i className="fa-light fa-edit icon-improved"></i>
-      </button>
-    </div>
-  );
-};
-
-export {
-  DisabledButtonExamples,
-  IconExamples,
-  InlineStyleExamples,
-  ToolbarExample
-};
@@ -1,94 +0,0 @@
-/**
- * Tailwind Dark Mode Usage Examples for OpenSign
- * 
- * This file demonstrates how to use the new Tailwind utilities
- * for better dark mode visibility of buttons and icons.
- */
-
-// Example 1: VS Code-style disabled buttons
-const DisabledButtonExamples = () => {
-  return (
-    <div>
-      {/* Option A: Using the VS Code disabled style */}
-      <button className="op-btn op-btn-primary op-btn-vscode-disabled" disabled>
-        VS Code Style Disabled Button
-      </button>
-
-      {/* Option B: Using themed disabled style */}
-      <button className="op-btn btn-themed-disabled">
-        Themed Disabled Button
-      </button>
-
-      {/* Option C: Conditional styling */}
-      <button 
-        className={`op-btn op-btn-primary ${isDisabled ? 'op-btn-vscode-disabled' : ''}`}
-        disabled={isDisabled}
-      >
-        Conditional Button
-      </button>
-    </div>
-  );
-};
-
-// Example 2: Icon visibility improvements
-const IconExamples = () => {
-  return (
-    <div>
-      {/* Theme-aware icons with better visibility */}
-      <i className="fa-light fa-folder icon-improved"></i>
-      <i className="fa-light fa-plus icon-muted"></i>
-      <i className="fa-light fa-trash icon-disabled"></i>
-      
-      {/* Using CSS variables */}
-      <i className="fa-light fa-search icon-themed"></i>
-      <i className="fa-light fa-settings icon-themed-muted"></i>
-      
-      {/* Gray text that automatically improves in dark mode */}
-      <span className="text-gray-500">This text is now more visible in dark mode</span>
-      <span className="text-gray-400">Muted but still readable</span>
-    </div>
-  );
-};
-
-// Example 3: Using CSS variables in inline styles
-const InlineStyleExamples = () => {
-  return (
-    <div>
-      {/* Using CSS variables directly */}
-      <i 
-        className="fa-light fa-plus"
-        style={{ color: 'var(--icon-color)' }}
-      />
-      
-      {/* Using the existing JavaScript function */}
-      <i 
-        className="fa-light fa-minus"
-        style={{ color: getThemeIconColor() }}
-      />
-    </div>
-  );
-};
-
-// Example 4: Toolbar with improved icons
-const ToolbarExample = () => {
-  return (
-    <div className="flex space-x-2 p-2">
-      <button className="p-2 hover:bg-gray-200 rounded">
-        <i className="fa-light fa-plus icon-improved"></i>
-      </button>
-      <button className="p-2 hover:bg-gray-200 rounded" disabled>
-        <i className="fa-light fa-trash icon-disabled"></i>
-      </button>
-      <button className="p-2 hover:bg-gray-200 rounded">
-        <i className="fa-light fa-edit icon-improved"></i>
-      </button>
-    </div>
-  );
-};
-
-export {
-  DisabledButtonExamples,
-  IconExamples,
-  InlineStyleExamples,
-  ToolbarExample
-};
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="opensigncss">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="The fastest way to sign PDFs & request signatures from others" />
-  <!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->
-
-  <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" />
-  <link rel="stylesheet" href="https://cdn.opensignlabs.com/fonts.css" />
-  <title>...Loading</title>
-</head>
-
-<body>
-  <div id="root" style="touch-action:pan-x pan-y;"></div>
-  <script type="module" src="/src/index.jsx"></script>
-</body>
-
-</html>
@@ -1,71 +1,62 @@
 {
  "name": "open_sign",
-  "version": "2.35.0",
+  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@formkit/auto-animate": "^0.9.0",
-    "@imgly/background-removal": "^1.7.0",
-    "@lottiefiles/dotlottie-react": "^0.17.13",
-    "@pdf-lib/fontkit": "^1.1.1",
-    "@radix-ui/themes": "^3.3.0",
-    "@reactour/tour": "^3.8.0",
-    "@reduxjs/toolkit": "^2.11.2",
-    "axios": "^1.13.4",
-    "body-scroll-lock": "^4.0.0-beta.0",
-    "date-fns-tz": "^3.2.0",
+    "@formkit/auto-animate": "^0.8.2",
+    "@radix-ui/themes": "^3.0.5",
+    "@react-pdf/renderer": "^3.4.4",
+    "@reduxjs/toolkit": "^2.2.5",
+    "axios": "^1.7.2",
    "file-saver": "^2.0.5",
-    "i18next": "^25.8.0",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "i18next-http-backend": "^3.0.2",
-    "jszip": "^3.10.1",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
-    "parse": "^8.0.3",
+    "nth-check": "^2.1.1",
+    "parse": "^5.1.0",
    "pdf-lib": "^1.17.1",
-    "pkijs": "^3.3.3",
    "print-js": "^1.6.0",
-    "prismjs": "^1.30.0",
-    "quill-html-edit-button": "^3.0.0",
-    "radix-ui": "^1.4.3",
-    "react": "^19.2.4",
-    "react-bootstrap": "^2.10.10",
-    "react-confetti": "^6.4.0",
-    "react-datepicker": "^9.1.0",
+    "radix-ui": "^1.0.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.2",
+    "react-confetti": "^6.1.0",
+    "react-cookie": "^7.1.4",
+    "react-datepicker": "^6.9.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
-    "react-dnd-multi-backend": "^9.0.0",
-    "react-dom": "^19.2.4",
+    "react-dnd-multi-backend": "^8.0.3",
+    "react-dnd-touch-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
    "react-gtm-module": "^2.0.11",
-    "react-i18next": "^16.5.4",
-    "react-konva": "^19.2.1",
-    "react-pdf": "^10.2.0",
-    "react-quill-new": "^3.8.3",
-    "react-redux": "^9.2.0",
-    "react-rnd": "^10.5.2",
-    "react-router": "^7.13.0",
+    "react-helmet": "^6.1.0",
+    "react-konva": "^18.2.10",
+    "react-pdf": "^9.0.0",
+    "react-quill": "^2.0.0",
+    "react-redux": "^9.1.2",
+    "react-rnd": "^10.4.11",
+    "react-router-dom": "^6.22.3",
+    "react-scripts": "5.0.1",
    "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.10.2",
-    "react-signature-canvas": "^1.1.0-alpha.2",
-    "react-timezone-select": "^3.2.8",
-    "react-to-print": "^3.2.0",
-    "react-tooltip": "^5.30.0",
+    "react-select": "^5.8.0",
+    "react-signature-canvas": "^1.0.6",
+    "react-tooltip": "^5.26.4",
+    "react-web-share": "^2.0.2",
+    "reactour": "^1.19.4",
    "redux": "^5.0.1",
-    "regex-parser": "^2.3.1",
-    "serve": "^14.2.5",
-    "web-vitals": "^5.1.0",
-    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
+    "redux-thunk": "^3.1.0",
+    "regex-parser": "^2.3.0",
+    "serve": "^14.2.3",
+    "styled-components": "^4.4.1",
+    "web-vitals": "^4.0.1"
  },
  "scripts": {
-    "build": "npm run version && NODE_OPTIONS=\"--max-old-space-size=8192\" vite build",
-    "start-dev": "vite",
-    "dev": "vite",
-    "preview": "vite preview",
    "start": "serve -s build",
+    "start-dev": "react-scripts start",
    "version": "curl -s https://api.github.com/repos/opensignlabs/opensign/releases/latest | grep '\"tag_name\":' | awk -F '\"' '{print $4}' > ./public/version.txt",
    "version-win": "powershell -Command \"Invoke-RestMethod -Uri 'https://api.github.com/repos/opensignlabs/opensign/releases/latest' | Select-Object -ExpandProperty tag_name | Out-File -FilePath ./public/version.txt\"",
-    "build-win": "npm run version-win && vite build",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "build": "npm run version && react-scripts build",
+    "build-win": "npm run version-win && react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
    "release": "standard-version",
    "commit": "cz"
  },
@@ -93,42 +84,20 @@
    }
  },
  "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/runtime-corejs2": "^7.28.6",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.10",
-    "@vitejs/plugin-react": "^5.1.3",
-    "@vitest/ui": "^4.0.18",
-    "autoprefixer": "^10.4.24",
-    "babel-loader": "^10.0.0",
-    "commitizen": "^4.3.1",
-    "concurrently": "^9.2.1",
-    "css-loader": "^7.1.3",
-    "daisyui": "^4.12.24",
-    "eslint": "^9.39.2",
-    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-react": "^7.37.5",
-    "jsdom": "^28.0.0",
-    "lint-staged": "^16.2.7",
-    "postcss": "^8.5.6",
-    "prettier": "^3.8.1",
-    "pretty-quick": "^4.2.2",
-    "rollup-plugin-node-polyfills": "^0.2.1",
-    "tailwindcss": "^3.4.19",
-    "tmp": "^0.2.5",
-    "vite": "^7.3.1",
-    "vite-plugin-svgr": "^4.5.0",
-    "vite-tsconfig-paths": "^6.0.5",
-    "vitest": "^4.0.18"
+    "@babel/runtime-corejs2": "^7.24.7",
+    "autoprefixer": "^10.4.19",
+    "commitizen": "^4.3.0",
+    "daisyui": "^4.12.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.34.1",
+    "lint-staged": "^15.2.5",
+    "postcss": "^8.4.38",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.3.1",
+    "tailwindcss": "^3.4.4"
  },
  "overrides": {
-    "tmp": "$tmp"
-  },
-  "engines": {
-    "node": "18 || 20 || 22"
+    "nth-check": "$nth-check"
  }
-}
+}
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="opensigncss">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <!-- <link rel="icon" type="image/png"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAALlJREFUaEPtmN0NwjAMBpNxYDKYiM1Yp90g93CKStH1NbIdfz921Dker2Pc+Js1cDF7MXAxASMGYkAigBI6vh9ZwoXP53uZoAYcvhwdA3mAVbI2aSb+9zFKU4IURB6j/HoPUIEa2G3iGIAhQQDlAUIoE2diabIklISS0NoFPebo77RF6OenEF3QntOm128he0GKrwHyACFoz2MgBqSGkpAEcHs47oHtN5AFakACqMNjQEMoE8SABFCHn4HE2zGHSLeEAAAAAElFTkSuQmCC"
+    sizes="40x40" /> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="The fastest way to sign PDFs & request signatures from others" />
+  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <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>OpenSign™</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
@@ -1,4 +0,0 @@
-Name,Email,Phone,Company,JobTitle
-John Doe,john@example.com,1234567890,abc firm,dev
-Jane Smith,jane@example.com,9876543210,xyz firm,manager
-Foo Bar,foo@example.com,5555555555,xyz firm,director
@@ -1 +0,0 @@
-import "@testing-library/jest-dom";
@@ -0,0 +1,183 @@
+import React, { useState, useEffect, lazy } from "react";
+import { Routes, Route, BrowserRouter } from "react-router-dom";
+import { pdfjs } from "react-pdf";
+import Login from "./pages/Login";
+import Form from "./pages/Form";
+import Report from "./pages/Report";
+import Dashboard from "./pages/Dashboard";
+import HomeLayout from "./layout/HomeLayout";
+import PageNotFound from "./pages/PageNotFound";
+import ValidateRoute from "./primitives/ValidateRoute";
+import Validate from "./primitives/Validate";
+import TemplatePlaceholder from "./pages/TemplatePlaceholder";
+import SignYourSelf from "./pages/SignyourselfPdf";
+import DraftDocument from "./components/pdf/DraftDocument";
+import PlaceHolderSign from "./pages/PlaceHolderSign";
+import PdfRequestFiles from "./pages/PdfRequestFiles";
+import LazyPage from "./primitives/LazyPage";
+import { isEnableSubscription } from "./constant/const";
+import SSOVerify from "./pages/SSOVerify";
+import Loader from "./primitives/Loader";
+const DebugPdf = lazy(() => import("./pages/DebugPdf"));
+const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
+const GuestLogin = lazy(() => import("./pages/GuestLogin"));
+const Pgsignup = lazy(() => import("./pages/Pgsignup"));
+const Subscriptions = lazy(() => import("./pages/PlanSubscriptions"));
+const ChangePassword = lazy(() => import("./pages/ChangePassword"));
+const UserProfile = lazy(() => import("./pages/UserProfile"));
+const Signup = lazy(() => import("./pages/Signup"));
+const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
+const ManageSign = lazy(() => import("./pages/Managesign"));
+const GenerateToken = lazy(() => import("./pages/GenerateToken"));
+const Webhook = lazy(() => import("./pages/Webhook"));
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
+
+const AppLoader = () => {
+  return (
+    <div className="flex justify-center items-center h-[100vh]">
+      <Loader />
+    </div>
+  );
+};
+function App() {
+  const [isloading, setIsLoading] = useState(true);
+  useEffect(() => {
+    handleCredentials();
+  }, []);
+
+  const handleCredentials = () => {
+    const appId = process.env.REACT_APP_APPID
+      ? process.env.REACT_APP_APPID
+      : "opensign";
+    const baseurl = process.env.REACT_APP_SERVERURL
+      ? process.env.REACT_APP_SERVERURL
+      : window.location.origin + "/api/app";
+    const appName = "contracts";
+    try {
+      localStorage.setItem("baseUrl", `${baseurl}/`);
+      localStorage.setItem("parseAppId", appId);
+      localStorage.setItem("domain", appName);
+      setIsLoading(false);
+    } catch (error) {
+      console.log("err ", error);
+    }
+  };
+
+  return (
+    <div className="bg-base-200">
+      {isloading ? (
+        <AppLoader />
+      ) : (
+        <BrowserRouter>
+          <Routes>
+            <Route element={<ValidateRoute />}>
+              <Route exact path="/" element={<Login />} />
+              <Route path="/signup" element={<LazyPage Page={Signup} />} />
+            </Route>
+            <Route element={<Validate />}>
+              <Route
+                path="/load/template/:templateId"
+                element={<TemplatePlaceholder />}
+              />
+              <Route
+                exact
+                path="/load/placeholdersign/:docId"
+                element={<PlaceHolderSign />}
+              />
+              <Route
+                exact
+                path="/load/recipientSignPdf/:docId/:contactBookId"
+                element={<PdfRequestFiles />}
+              />
+            </Route>
+            <Route
+              path="/loadmf/signmicroapp/login/:id/:userMail/:contactBookId/:serverUrl"
+              element={<LazyPage Page={GuestLogin} />}
+            />
+            <Route
+              path="/login/:id/:userMail/:contactBookId/:serverUrl"
+              element={<LazyPage Page={GuestLogin} />}
+            />
+            <Route
+              path="/login/:base64url"
+              element={<LazyPage Page={GuestLogin} />}
+            />
+            <Route path="/debugpdf" element={<LazyPage Page={DebugPdf} />} />
+            <Route
+              path="/forgetpassword"
+              element={<LazyPage Page={ForgetPassword} />}
+            />
+            {isEnableSubscription && (
+              <>
+                <Route
+                  path="/pgsignup"
+                  element={<LazyPage Page={Pgsignup} />}
+                />
+                <Route
+                  path="/subscription"
+                  element={<LazyPage Page={Subscriptions} />}
+                />
+              </>
+            )}
+            <Route element={<HomeLayout />}>
+              <Route
+                path="/changepassword"
+                element={<LazyPage Page={ChangePassword} />}
+              />
+              <Route path="/form/:id" element={<Form />} />
+              <Route path="/report/:id" element={<Report />} />
+              <Route path="/dashboard/:id" element={<Dashboard />} />
+              <Route
+                path="/profile"
+                element={<LazyPage Page={UserProfile} />}
+              />
+              <Route
+                path="/opensigndrive"
+                element={<LazyPage Page={Opensigndrive} />}
+              />
+              <Route
+                path="/managesign"
+                element={<LazyPage Page={ManageSign} />}
+              />
+              <Route
+                path="/generatetoken"
+                element={<LazyPage Page={GenerateToken} />}
+              />
+              <Route path="/webhook" element={<LazyPage Page={Webhook} />} />
+              <Route
+                path="/template/:templateId"
+                element={<TemplatePlaceholder />}
+              />
+              {/* signyouself route with no rowlevel data using docId from url */}
+              <Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
+              {/* draft document route to handle and navigate route page accordiing to document status */}
+              <Route path="/draftDocument" element={<DraftDocument />} />
+              {/* recipient placeholder set route with no rowlevel data using docId from url*/}
+              <Route
+                path="/placeHolderSign/:docId"
+                element={<PlaceHolderSign />}
+              />
+              {/* for user signature (need your sign route) with row level data */}
+              <Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
+              {/* for user signature (need your sign route) with no row level data */}
+              <Route
+                path="/pdfRequestFiles/:docId"
+                element={<PdfRequestFiles />}
+              />
+              {/* recipient signature route with no rowlevel data using docId from url */}
+              <Route
+                path="/recipientSignPdf/:docId/:contactBookId"
+                element={<PdfRequestFiles />}
+              />
+            </Route>
+            <Route path="/sso" element={<SSOVerify />} />
+            <Route path="*" element={<PageNotFound />} />
+          </Routes>
+        </BrowserRouter>
+      )}
+    </div>
+  );
+}
+
+export default App;
@@ -1,148 +0,0 @@
-import { useState, useEffect } from "react";
-import { lazyWithRetry, hideUpgradeProgress } from "./utils";
-import { Routes, Route, BrowserRouter } from "react-router";
-import { pdfjs } from "react-pdf";
-import Form from "./pages/Form";
-import Report from "./pages/Report";
-import Dashboard from "./pages/Dashboard";
-import HomeLayout from "./layout/HomeLayout";
-import PageNotFound from "./pages/PageNotFound";
-import ValidateRoute from "./primitives/ValidateRoute";
-import Validate from "./primitives/Validate";
-import TemplatePlaceholder from "./pages/TemplatePlaceholder";
-import SignYourSelf from "./pages/SignyourselfPdf";
-import DraftDocument from "./components/pdf/DraftDocument";
-import PlaceHolderSign from "./pages/PlaceHolderSign";
-import PdfRequestFiles from "./pages/PdfRequestFiles";
-import Lazy from "./primitives/LazyPage";
-import Loader from "./primitives/Loader";
-import UserList from "./pages/UserList";
-import { serverUrl_fn } from "./constant/appinfo";
-import DocSuccessPage from "./pages/DocSuccessPage";
-import DragProvider from "./components/DragProivder";
-import Title from "./components/Title";
-const DebugPdf = lazyWithRetry(() => import("./pages/DebugPdf"));
-const ForgetPassword = lazyWithRetry(() => import("./pages/ForgetPassword"));
-const GuestLogin = lazyWithRetry(() => import("./pages/GuestLogin"));
-const ChangePassword = lazyWithRetry(() => import("./pages/ChangePassword"));
-const UserProfile = lazyWithRetry(() => import("./pages/UserProfile"));
-const Opensigndrive = lazyWithRetry(() => import("./pages/Opensigndrive"));
-const ManageSign = lazyWithRetry(() => import("./pages/Managesign"));
-const AddAdmin = lazyWithRetry(() => import("./pages/AddAdmin"));
-const UpdateExistUserAdmin = lazyWithRetry(
-  () => import("./pages/UpdateExistUserAdmin")
-);
-const Preferences = lazyWithRetry(() => import("./pages/Preferences"));
-const Login = lazyWithRetry(() => import("./pages/Login"));
-const VerifyDocument = lazyWithRetry(() => import("./pages/VerifyDocument"));
-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
-const AppLoader = () => {
-  return (
-    <div className="flex justify-center items-center h-[100vh]">
-      <Loader />
-    </div>
-  );
-};
-function App() {
-  const [isloading, setIsLoading] = useState(true);
-  useEffect(() => {
-    // initialize creds
-    const id = process.env.REACT_APP_APPID ?? "opensign";
-    localStorage.setItem("parseAppId", id);
-    localStorage.setItem("baseUrl", `${serverUrl_fn()}/`);
-    hideUpgradeProgress();
-    localStorage.removeItem("showUpgradeProgress");
-    setIsLoading(false);
-  }, []);
-
-  return (
-    <div className="bg-base-200">
-      {isloading ? (
-        <AppLoader />
-      ) : (
-        <BrowserRouter>
-          <Title />
-          <Routes>
-            <Route element={<ValidateRoute />}>
-              <Route exact path="/" element={<Lazy Page={Login} />} />
-                  <Route path="/addadmin" element={<Lazy Page={AddAdmin} />} />
-                  <Route
-                    path="/upgrade-2.1"
-                    element={<Lazy Page={UpdateExistUserAdmin} />}
-                  />
-            </Route>
-            <Route element={<Validate />}>
-              <Route
-                exact
-                path="/load/recipientSignPdf/:docId/:contactBookId"
-                element={<DragProvider Page={PdfRequestFiles} />}
-              />
-            </Route>
-            <Route
-              path="/login/:base64url"
-              element={<Lazy Page={GuestLogin} />}
-            />
-            <Route path="/debugpdf" element={<Lazy Page={DebugPdf} />} />
-              <Route
-                path="/forgetpassword"
-                element={<Lazy Page={ForgetPassword} />}
-              />
-            <Route element={<HomeLayout />}>
-                  <Route path="/users" element={<UserList />} />
-                  <Route
-                    path="/changepassword"
-                    element={<Lazy Page={ChangePassword} />}
-                  />
-              <Route path="/form/:id" element={<Form />} />
-              <Route path="/report/:id" element={<Report />} />
-              <Route path="/dashboard/:id" element={<Dashboard />} />
-              <Route path="/profile" element={<Lazy Page={UserProfile} />} />
-              <Route path="/drive" element={<Lazy Page={Opensigndrive} />} />
-              <Route path="/managesign" element={<Lazy Page={ManageSign} />} />
-              <Route
-                path="/template/:templateId"
-                element={<DragProvider Page={TemplatePlaceholder} />}
-              />
-              {/* signyouself route with no rowlevel data using docId from url */}
-              <Route
-                path="/signaturePdf/:docId"
-                element={<DragProvider Page={SignYourSelf} />}
-              />
-              {/* draft document route to handle and navigate route page according to document status */}
-              <Route
-                path="/draftDocument"
-                element={<DragProvider Page={DraftDocument} />}
-              />
-              {/* recipient placeholder set route with no rowlevel data using docId from url*/}
-              <Route
-                path="/placeHolderSign/:docId"
-                element={<DragProvider Page={PlaceHolderSign} />}
-              />
-              {/* recipient signature route with no rowlevel data using docId from url */}
-              <Route
-                path="/recipientSignPdf/:docId/:contactBookId"
-                element={<DragProvider Page={PdfRequestFiles} />}
-              />
-              <Route
-                path="/recipientSignPdf/:docId"
-                element={<DragProvider Page={PdfRequestFiles} />}
-              />
-              <Route
-                path="/verify-document"
-                element={<Lazy Page={VerifyDocument} />}
-              />
-              <Route
-                path="/preferences"
-                element={<Lazy Page={Preferences} />}
-              />
-            </Route>
-            <Route path="/success" element={<DocSuccessPage />} />
-            <Route path="*" element={<PageNotFound />} />
-          </Routes>
-        </BrowserRouter>
-      )}
-    </div>
-  );
-}
-
-export default App;
@@ -0,0 +1,310 @@
+import React, { useState, useEffect } from "react";
+import Parse from "parse";
+import axios from "axios";
+import Loader from "../primitives/Loader";
+
+const AddSigner = (props) => {
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+  const [addYourself, setAddYourself] = useState(false);
+  const [isLoader, setIsLoader] = useState(false);
+  const [isUserExist, setIsUserExist] = useState(false);
+  const parseBaseUrl = localStorage.getItem("baseUrl");
+  const parseAppId = localStorage.getItem("parseAppId");
+
+  useEffect(() => {
+    checkUserExist();
+  }, []);
+  // Load user details from localStorage when the component mounts
+  useEffect(() => {
+    const savedUserDetails = JSON.parse(
+      localStorage.getItem("UserInformation")
+    );
+    if (savedUserDetails && addYourself) {
+      setName(savedUserDetails.name);
+      setPhone(savedUserDetails?.phone || "");
+      setEmail(savedUserDetails.email);
+    }
+  }, [addYourself]);
+
+  const checkUserExist = async () => {
+    const user = Parse.User.current();
+    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);
+      if (!res) {
+        setIsUserExist(true);
+      }
+    } catch (err) {
+      console.log("err", err);
+    }
+  };
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsLoader(true);
+    if (localStorage.getItem("TenantId")) {
+      try {
+        const user = Parse.User.current();
+        const query = new Parse.Query("contracts_Contactbook");
+        query.equalTo("CreatedBy", user);
+        query.notEqualTo("IsDeleted", true);
+        query.equalTo("Email", email);
+        const res = await query.first();
+        // console.log(res);
+        if (!res) {
+          const contactQuery = new Parse.Object("contracts_Contactbook");
+          contactQuery.set("Name", name);
+          if (phone) {
+            contactQuery.set("Phone", phone);
+          }
+          contactQuery.set("Email", email);
+          contactQuery.set("UserRole", "contracts_Guest");
+
+          contactQuery.set("TenantId", {
+            __type: "Pointer",
+            className: "partners_Tenant",
+            objectId: localStorage.getItem("TenantId")
+          });
+
+          try {
+            const _users = Parse.Object.extend("User");
+            const _user = new _users();
+            _user.set("name", name);
+            _user.set("username", email);
+            _user.set("email", email);
+            _user.set("password", email);
+            if (phone) {
+              _user.set("phone", phone);
+            }
+            const user = await _user.save();
+            if (user) {
+              const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+              const headers = {
+                "Content-Type": "application/json",
+                "X-Parse-Application-Id": parseAppId,
+                sessionToken: localStorage.getItem("accesstoken")
+              };
+              const body = {
+                appName: localStorage.getItem("_appName"),
+                roleName: "contracts_Guest",
+                userId: user.id
+              };
+              await axios.post(roleurl, body, { headers: headers });
+              const currentUser = Parse.User.current();
+              contactQuery.set(
+                "CreatedBy",
+                Parse.User.createWithoutData(currentUser.id)
+              );
+
+              contactQuery.set("UserId", user);
+              const acl = new Parse.ACL();
+              acl.setPublicReadAccess(true);
+              acl.setPublicWriteAccess(true);
+              acl.setReadAccess(currentUser.id, true);
+              acl.setWriteAccess(currentUser.id, true);
+
+              contactQuery.setACL(acl);
+
+              const res = await contactQuery.save();
+
+              const parseData = JSON.parse(JSON.stringify(res));
+              if (props.details) {
+                props.details({
+                  value: parseData[props.valueKey],
+                  label: parseData[props.displayKey]
+                });
+              }
+              if (props.closePopup) {
+                props.closePopup();
+              }
+              if (props.handleUserData) {
+                props.handleUserData(parseData);
+              }
+
+              setIsLoader(false);
+              // Reset the form fields
+              setAddYourself(false);
+              setName("");
+              setPhone("");
+              setEmail("");
+            }
+          } catch (err) {
+            console.log("err ", err);
+            if (err.code === 202) {
+              const params = { email: email };
+              const userRes = await Parse.Cloud.run("getUserId", params);
+              const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+              const headers = {
+                "Content-Type": "application/json",
+                "X-Parse-Application-Id": parseAppId,
+                sessionToken: localStorage.getItem("accesstoken")
+              };
+              const body = {
+                appName: localStorage.getItem("_appName"),
+                roleName: "contracts_Guest",
+                userId: userRes.id
+              };
+              await axios.post(roleurl, body, { headers: headers });
+              const currentUser = Parse.User.current();
+              contactQuery.set(
+                "CreatedBy",
+                Parse.User.createWithoutData(currentUser.id)
+              );
+
+              contactQuery.set("UserId", {
+                __type: "Pointer",
+                className: "_User",
+                objectId: userRes.id
+              });
+              const acl = new Parse.ACL();
+              acl.setPublicReadAccess(true);
+              acl.setPublicWriteAccess(true);
+              acl.setReadAccess(currentUser.id, true);
+              acl.setWriteAccess(currentUser.id, true);
+
+              contactQuery.setACL(acl);
+              const res = await contactQuery.save();
+
+              const parseData = JSON.parse(JSON.stringify(res));
+              if (props.details) {
+                props.details({
+                  value: parseData[props.valueKey],
+                  label: parseData[props.displayKey]
+                });
+              }
+              if (props.closePopup) {
+                props.closePopup();
+              }
+              if (props.handleUserData) {
+                props.handleUserData(parseData);
+              }
+              setIsLoader(false);
+              // Reset the form fields
+              setAddYourself(false);
+              setName("");
+              setPhone("");
+              setEmail("");
+            }
+          }
+        } else {
+          alert("Contact already exist!");
+          setIsLoader(false);
+        }
+      } catch (err) {
+        console.log("err in fetch contact", err);
+        setIsLoader(false);
+        alert("something went wrong, please try again later");
+      }
+    } else {
+      setIsLoader(false);
+      alert("something went wrong, please try again later");
+    }
+  };
+
+  // Define a function to handle the "add yourself" checkbox
+  const handleAddYourselfChange = () => {
+    if (addYourself) {
+      setAddYourself(false);
+      setName("");
+      setPhone("");
+      setEmail("");
+    } else {
+      setAddYourself(true);
+    }
+  };
+  const handleReset = () => {
+    setAddYourself(false);
+  };
+
+  return (
+    <div className="h-full p-[20px]">
+      {isLoader && (
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )}
+      <div className="w-full mx-auto p-2 text-base-content">
+        {isUserExist && (
+          <div className="mb-3 flex items-center">
+            <input
+              type="checkbox"
+              id="addYourself"
+              checked={addYourself}
+              onChange={handleAddYourselfChange}
+              className="op-checkbox op-checkbox-sm"
+            />
+            <label htmlFor="addYourself" className="ml-2 mb-0">
+              Add Yourself
+            </label>
+          </div>
+        )}
+        <form onSubmit={handleSubmit}>
+          <div className="mb-3">
+            <label htmlFor="name" className="block text-xs font-semibold">
+              Name
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              disabled={addYourself}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mb-3">
+            <label htmlFor="email" className="block text-xs font-semibold">
+              Email
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value?.toLowerCase())}
+              required
+              disabled={addYourself}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mb-3">
+            <label htmlFor="phone" className="block text-xs font-semibold">
+              Phone
+            </label>
+            <input
+              type="text"
+              id="phone"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              disabled={addYourself}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mt-4 flex gap-x-2 justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
+              Submit
+            </button>
+            <button
+              type="button"
+              onClick={() => handleReset()}
+              className="op-btn op-btn-secondary"
+            >
+              Reset
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddSigner;
@@ -0,0 +1,278 @@
+import React, { useState } from "react";
+import Parse from "parse";
+import axios from "axios";
+import Title from "./Title";
+import Alert from "../primitives/Alert";
+import Loader from "../primitives/Loader";
+
+const AddUser = (props) => {
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+  const [isLoader, setIsLoader] = useState(false);
+  const [isUserExist, setIsUserExist] = useState(false);
+  const parseBaseUrl = localStorage.getItem("baseUrl");
+  const parseAppId = localStorage.getItem("parseAppId");
+
+  const checkUserExist = async () => {
+    try {
+      const res = await Parse.Cloud.run("getUserDetails", {
+        email: email,
+        userId: Parse.User.current().id
+      });
+      if (res) {
+        return true;
+      } else {
+        return false;
+      }
+    } catch (err) {
+      console.log("err", err);
+    }
+  };
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsLoader(true);
+    const res = await checkUserExist();
+    if (res) {
+      setIsUserExist(true);
+      setIsLoader(false);
+      setTimeout(() => {
+        setIsUserExist(false);
+      }, 1000);
+    } else {
+      try {
+        const contactQuery = new Parse.Object("contracts_Users");
+        contactQuery.set("Name", name);
+        contactQuery.set("Phone", phone);
+        contactQuery.set("Email", email);
+        contactQuery.set("UserRole", "contracts_User");
+
+        if (localStorage.getItem("TenantId")) {
+          contactQuery.set("TenantId", {
+            __type: "Pointer",
+            className: "partners_Tenant",
+            objectId: localStorage.getItem("TenantId")
+          });
+        }
+
+        try {
+          const _users = Parse.Object.extend("User");
+          const _user = new _users();
+          _user.set("name", name);
+          _user.set("username", email);
+          _user.set("email", email);
+          _user.set("password", email);
+          if (phone) {
+            _user.set("phone", phone);
+          }
+
+          const user = await _user.save();
+          if (user) {
+            const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+            const headers = {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": parseAppId,
+              sessionToken: localStorage.getItem("accesstoken")
+            };
+            const body = {
+              appName: localStorage.getItem("_appName"),
+              roleName: "contracts_User",
+              userId: user.id
+            };
+            await axios.post(roleurl, body, { headers: headers });
+            const currentUser = Parse.User.current();
+            contactQuery.set(
+              "CreatedBy",
+              Parse.User.createWithoutData(currentUser.id)
+            );
+
+            contactQuery.set("UserId", user);
+            const acl = new Parse.ACL();
+            acl.setPublicReadAccess(true);
+            acl.setPublicWriteAccess(true);
+            acl.setReadAccess(currentUser.id, true);
+            acl.setWriteAccess(currentUser.id, true);
+
+            contactQuery.setACL(acl);
+
+            const res = await contactQuery.save();
+
+            const parseData = JSON.parse(JSON.stringify(res));
+            if (props.details) {
+              props.details({
+                value: parseData[props.valueKey],
+                label: parseData[props.displayKey]
+              });
+            }
+            if (props.closePopup) {
+              props.closePopup();
+            }
+            if (props.handleUserData) {
+              props.handleUserData(parseData);
+            }
+
+            setIsLoader(false);
+
+            setName("");
+            setPhone("");
+            setEmail("");
+          }
+        } catch (err) {
+          console.log("err ", err);
+          if (err.code === 202) {
+            const params = { email: email };
+            const userRes = await Parse.Cloud.run("getUserId", params);
+            const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+            const headers = {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": parseAppId,
+              sessionToken: localStorage.getItem("accesstoken")
+            };
+            const body = {
+              appName: localStorage.getItem("_appName"),
+              roleName: "contracts_User",
+              userId: userRes.id
+            };
+            await axios.post(roleurl, body, { headers: headers });
+            const currentUser = Parse.User.current();
+            contactQuery.set(
+              "CreatedBy",
+              Parse.User.createWithoutData(currentUser.id)
+            );
+
+            contactQuery.set("UserId", {
+              __type: "Pointer",
+              className: "_User",
+              objectId: userRes.id
+            });
+            const acl = new Parse.ACL();
+            acl.setPublicReadAccess(true);
+            acl.setPublicWriteAccess(true);
+            acl.setReadAccess(currentUser.id, true);
+            acl.setWriteAccess(currentUser.id, true);
+
+            contactQuery.setACL(acl);
+            const res = await contactQuery.save();
+
+            const parseData = JSON.parse(JSON.stringify(res));
+            if (props.details) {
+              props.details({
+                value: parseData[props.valueKey],
+                label: parseData[props.displayKey]
+              });
+            }
+            if (props.closePopup) {
+              props.closePopup();
+            }
+            if (props.handleUserData) {
+              props.handleUserData(parseData);
+            }
+            setIsLoader(false);
+            setName("");
+            setPhone("");
+            setEmail("");
+          }
+        }
+      } catch (err) {
+        // console.log("err", err);
+        setIsLoader(false);
+        alert("something went wrong!");
+      }
+    }
+  };
+
+  // Define a function to handle the "add yourself" checkbox
+  const handleReset = () => {
+    setName("");
+    setPhone("");
+    setEmail("");
+  };
+
+  return (
+    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
+      <Title title={"Add User"} />
+      {isUserExist && <Alert type="danger">User already exists!</Alert>}
+      {isLoader && (
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50">
+          <Loader />
+        </div>
+      )}
+      <div className="w-full mx-auto">
+        <form onSubmit={handleSubmit}>
+          <h1 className="text-[20px] font-semibold mb-4">Add User</h1>
+          <div className="mb-3">
+            <label
+              htmlFor="name"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Name
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="email"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Email
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="phone"
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Phone
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="text"
+              id="phone"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              required
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+
+          <div className="flex items-center mt-3 gap-2 text-white">
+            <button
+              type="submit"
+              className="bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none"
+            >
+              Submit
+            </button>
+            <div
+              type="button"
+              onClick={() => handleReset()}
+              className="bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
+            >
+              Reset
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddUser;
@@ -1,288 +0,0 @@
-import { useEffect, useState } from "react";
-import Parse from "parse";
-import Loader from "../primitives/Loader";
-import {
-  copytoData,
-  usertimezone
-} from "../constant/Utils";
-import {
-  emailRegex,
-} from "../constant/const";
-import {
-  useTranslation
-} from "react-i18next";
-import { withSessionValidation } from "../utils";
-
-function generatePassword(length) {
-  const characters =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let result = "";
-  const charactersLength = characters.length;
-
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
-
-const AddUser = (props) => {
-  const { t } = useTranslation();
-  const [formdata, setFormdata] = useState({
-    name: "",
-    phone: "",
-    email: "",
-    team: "",
-    password: "",
-    role: ""
-  });
-  const [isFormLoader, setIsFormLoader] = useState(false);
-  const [teamList, setTeamList] = useState([]);
-  const role = ["OrgAdmin", "Editor", "User"];
-  useEffect(() => {
-    getTeamList();
-    // eslint-disable-next-line
-  }, []);
-
-  const getTeamList = async () => {
-    setFormdata((prev) => ({ ...prev, password: generatePassword(12) }));
-    const teamRes = await Parse.Cloud.run("getteams", { active: true });
-    if (teamRes.length > 0) {
-      const _teamRes = JSON.parse(JSON.stringify(teamRes));
-      setTeamList(_teamRes);
-        const allUserId =
-          _teamRes.find((x) => x.Name === "All Users")?.objectId || "";
-        setFormdata((prev) => ({ ...prev, team: allUserId }));
-    }
-  };
-  const checkUserExist = async () => {
-    try {
-      const res = await Parse.Cloud.run("getUserDetails", {
-        email: formdata.email
-      });
-      if (res) {
-        return true;
-      } else {
-        return false;
-      }
-    } catch (err) {
-      console.log("err", err);
-    }
-  };
-  // Define a function to handle form submission
-  const handleSubmit = withSessionValidation(async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!emailRegex.test(formdata.email)) {
-      alert(t("valid-email-alert"));
-    } else {
-      const localUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
-      setIsFormLoader(true);
-      const res = await checkUserExist();
-      if (res) {
-        props.showAlert("danger", t("user-already-exist"));
-        setIsFormLoader(false);
-      } else {
-        if (localStorage.getItem("TenantId")) {
-          const timezone = usertimezone;
-          try {
-            const params = {
-              name: formdata.name,
-              email: formdata.email,
-              phone: formdata.phone,
-              password: formdata.password,
-              role: formdata.role,
-              team: formdata.team,
-              timezone: timezone,
-              tenantId: localStorage.getItem("TenantId"),
-              organization: {
-                objectId: localUser?.OrganizationId?.objectId,
-                company: localUser?.Company
-              },
-            };
-            const res = await Parse.Cloud.run("adduser", params);
-            const parseData = JSON.parse(JSON.stringify(res));
-            if (props.closePopup) {
-              props.closePopup();
-            }
-            if (props.handleUserData) {
-              if (formdata?.team) {
-                const team = teamList.find((x) => x.objectId === formdata.team);
-                parseData.TeamIds = parseData.TeamIds.map((y) =>
-                  y.objectId === team.objectId ? team : y
-                );
-              }
-              props.handleUserData(parseData);
-            }
-            setIsFormLoader(false);
-            setFormdata({
-              name: "",
-              email: "",
-              phone: "",
-              team: "",
-              role: ""
-            });
-            props.showAlert("success", t("user-created-successfully"));
-          } catch (err) {
-            console.log("err", err);
-            setIsFormLoader(false);
-            props.showAlert("danger", t("something-went-wrong-mssg"));
-          }
-        } else {
-          props.showAlert("danger", t("something-went-wrong-mssg"));
-        }
-      }
-    }
-  });
-
-  // Define a function to handle the "add yourself" checkbox
-  const handleReset = () => {
-    setFormdata({ name: "", email: "", phone: "", team: "", role: "" });
-    if (props.closePopup) {
-      props.closePopup();
-    }
-  };
-  const handleChange = (event) => {
-    let { name, value } = event.target;
-    if (name === "email") {
-      value = value?.toLowerCase()?.replace(/\s/g, "");
-    }
-    setFormdata((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const copytoclipboard = (text) => {
-    copytoData(text);
-    props.showAlert("success", t("copied"));
-  };
-  return (
-    <div className="shadow-md rounded-box my-[1px] p-3 bg-base-100 relative">
-      {isFormLoader && (
-        <div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
-          <Loader />
-        </div>
-      )}
-              <div className="w-full mx-auto">
-                    <form onSubmit={handleSubmit}>
-                      <div className="mb-3">
-                        <label
-                          htmlFor="name"
-                          className="block text-xs font-semibold"
-                        >
-                          {t("name")}
-                          <span className="text-[red] text-[13px]"> *</span>
-                        </label>
-                        <input
-                          type="text"
-                          name="name"
-                          value={formdata.name}
-                          onChange={(e) => handleChange(e)}
-                          onInvalid={(e) =>
-                            e.target.setCustomValidity(t("input-required"))
-                          }
-                          onInput={(e) => e.target.setCustomValidity("")}
-                          required
-                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                          placeholder={t("enter-name")}
-                        />
-                      </div>
-                      <div className="mb-3">
-                        <label
-                          htmlFor="email"
-                          className="block text-xs font-semibold"
-                        >
-                          {t("email")}
-                          <span className="text-[red] text-[13px]"> *</span>
-                        </label>
-                        <input
-                          type="email"
-                          name="email"
-                          value={formdata.email}
-                          onChange={(e) => handleChange(e)}
-                          required
-                          onInvalid={(e) =>
-                            e.target.setCustomValidity(t("input-required"))
-                          }
-                          onInput={(e) => e.target.setCustomValidity("")}
-                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                          placeholder={t("enter-email")}
-                        />
-                      </div>
-                      <div className="mb-3">
-                        <label className="block text-xs font-semibold">
-                          {t("password")}
-                        </label>
-                        <div className="flex justify-between items-center op-input op-input-bordered op-input-sm text-base-content w-full h-full text-[13px]">
-                          <div className="break-all">{formdata?.password}</div>
-                          <i
-                            onClick={() => copytoclipboard(formdata?.password)}
-                            className="fa-light fa-copy rounded-full hover:bg-base-300 p-[8px] cursor-pointer "
-                          ></i>
-                        </div>
-                        <div className="text-[12px] ml-2 mb-0 text-[red] select-none">
-                          {t("password-generateed")}
-                        </div>
-                      </div>
-                      <div className="mb-3">
-                        <label
-                          htmlFor="phone"
-                          className="block text-xs font-semibold"
-                        >
-                          {t("phone")}
-                        </label>
-                        <input
-                          type="text"
-                          name="phone"
-                          placeholder={t("phone-optional")}
-                          value={formdata.phone}
-                          onChange={(e) => handleChange(e)}
-                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                        />
-                      </div>
-                      <div className="mb-3">
-                        <label
-                          htmlFor="phone"
-                          className="block text-xs font-semibold"
-                        >
-                          {t("Role")}
-                          <span className="text-[red] text-[13px]"> *</span>
-                        </label>
-                        <select
-                          value={formdata.role}
-                          onChange={(e) => handleChange(e)}
-                          name="role"
-                          className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
-                          onInvalid={(e) =>
-                            e.target.setCustomValidity(t("input-required"))
-                          }
-                          onInput={(e) => e.target.setCustomValidity("")}
-                          required
-                        >
-                          <option defaultValue={""} value={""}>
-                            {t("Select")}
-                          </option>
-                          {role.length > 0 &&
-                            role.map((x) => (
-                              <option key={x} value={x}>
-                                {x}
-                              </option>
-                            ))}
-                        </select>
-                      </div>
-                      <div className="flex items-center mt-3 gap-2 text-white">
-                        <button type="submit" className="op-btn op-btn-primary">
-                          {t("submit")}
-                        </button>
-                        <div
-                          type="button"
-                          onClick={() => handleReset()}
-                          className="op-btn op-btn-secondary"
-                        >
-                          {t("cancel")}
-                        </div>
-                      </div>
-                    </form>
-              </div>
-    </div>
-  );
-};
-
-export default AddUser;
@@ -0,0 +1,256 @@
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
+import SuggestionInput from "./shared/fields/SuggestionInput";
+import Loader from "../primitives/Loader";
+
+const BulkSendUi = (props) => {
+  const [forms, setForms] = useState([]);
+  const [formId, setFormId] = useState(2);
+  const formRef = useRef(null);
+  const [scrollOnNextUpdate, setScrollOnNextUpdate] = useState(false);
+  const [isSubmit, setIsSubmit] = useState(false);
+  const [allowedForm, setAllowedForm] = useState(0);
+  const [isSignatureExist, setIsSignatureExist] = useState();
+  const allowedSigners = 50;
+  useEffect(() => {
+    signatureExist();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  //function to check atleast one signature field exist
+  const signatureExist = () => {
+    const getPlaceholder = props.item?.Placeholders;
+    const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
+      placeholderObj?.placeHolder?.some((holder) =>
+        holder?.pos?.some((posItem) => posItem?.type === "signature")
+      )
+    );
+    setIsSignatureExist(checkIsSignatureExistt);
+  };
+  useEffect(() => {
+    if (scrollOnNextUpdate && formRef.current) {
+      formRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+        inline: "nearest"
+      });
+      setScrollOnNextUpdate(false);
+    }
+  }, [forms, scrollOnNextUpdate]);
+
+  useEffect(() => {
+    (() => {
+      if (props?.Placeholders?.length > 0) {
+        let users = [];
+        props?.Placeholders?.forEach((element) => {
+          if (!element.signerObjId) {
+            users = [
+              ...users,
+              {
+                fieldId: element.Id,
+                email: "",
+                label: element.Role,
+                signer: {}
+              }
+            ];
+          }
+        });
+        setForms((prevForms) => [...prevForms, { Id: 1, fields: users }]);
+        const totalForms = Math.floor(allowedSigners / users?.length);
+        setAllowedForm(totalForms);
+      }
+    })();
+    // eslint-disable-next-line
+  }, []);
+  const handleInputChange = (index, signer, fieldIndex) => {
+    const newForms = [...forms];
+    newForms[index].fields[fieldIndex].email = signer?.Email
+      ? signer?.Email
+      : signer || "";
+    newForms[index].fields[fieldIndex].signer = signer?.objectId ? signer : "";
+    setForms(newForms);
+  };
+
+  const handleAddForm = (e) => {
+    e.preventDefault();
+    // Check if the quick send limit has been reached
+    if (forms?.length < allowedForm) {
+      if (props?.Placeholders.length > 0) {
+        let newForm = [];
+        props?.Placeholders?.forEach((element) => {
+          if (!element.signerObjId) {
+            newForm = [
+              ...newForm,
+              {
+                fieldId: element.Id,
+                email: "",
+                label: element.Role,
+                signer: {}
+              }
+            ];
+          }
+        });
+        setForms([...forms, { Id: formId, fields: newForm }]);
+      }
+      setFormId(formId + 1);
+      setScrollOnNextUpdate(true);
+    } else {
+      // If the limit has been reached, throw an error with the appropriate message
+      alert("Quick send reached limit.");
+    }
+  };
+
+  const handleRemoveForm = (index) => {
+    const updatedForms = forms.filter((_, i) => i !== index);
+    setForms(updatedForms);
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsSubmit(true);
+
+    // Create a copy of Placeholders array from props.item
+    let Placeholders = [...props.item.Placeholders];
+    // Initialize an empty array to store updated documents
+    let Documents = [];
+
+    // Loop through each form
+    forms.forEach((form) => {
+      // Map through the copied Placeholders array to update email values
+      const updatedPlaceholders = Placeholders.map((placeholder) => {
+        // Find the field in the current form that matches the placeholder Id
+        const field = form.fields.find(
+          (element) => parseInt(element.fieldId) === placeholder.Id
+        );
+        // If a matching field is found, update the email value in the placeholder
+        const signer = field?.signer?.objectId ? field.signer : {};
+        if (field) {
+          return {
+            ...placeholder,
+            email: field.email,
+            signerObjId: field?.signer?.objectId || "",
+            signerPtr: signer
+          };
+        }
+        // If no matching field is found, keep the placeholder as is
+        return placeholder;
+      });
+
+      // Push a new document object with updated Placeholders into the Documents array
+      Documents.push({ ...props.item, Placeholders: updatedPlaceholders });
+    });
+    // console.log("Documents ", Documents);
+    await batchQuery(Documents);
+  };
+
+  const batchQuery = async (Documents) => {
+    const serverUrl = localStorage.getItem("baseUrl");
+    const functionsUrl = `${serverUrl}functions/batchdocuments`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+      sessionToken: localStorage.getItem("accesstoken")
+    };
+    const params = {
+      Documents: JSON.stringify(Documents)
+    };
+    try {
+      const res = await axios.post(functionsUrl, params, { headers: headers });
+      // console.log("res ", res);
+      if (res.data && res.data.result) {
+        props.handleClose("success", Documents?.length);
+      }
+    } catch (err) {
+      console.log("Err ", err);
+      props.handleClose("error", 0);
+    } finally {
+      setIsSubmit(false);
+    }
+  };
+
+  return (
+    <>
+      {isSubmit && (
+        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )}
+      {props.Placeholders?.length > 0 ? (
+        isSignatureExist ? (
+          <>
+            {props.Placeholders?.some((x) => !x.signerObjId) ? (
+              <form onSubmit={handleSubmit}>
+                <div className="min-h-max max-h-[250px] overflow-y-auto">
+                  {forms?.map((form, index) => (
+                    <div
+                      key={form.Id}
+                      className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
+                    >
+                      {form?.fields?.map((field, fieldIndex) => (
+                        <div className="flex flex-col" key={field.fieldId}>
+                          <label>{field.label}</label>
+                          <SuggestionInput
+                            required
+                            type="email"
+                            value={field.value}
+                            index={fieldIndex}
+                            onChange={(signer) =>
+                              handleInputChange(index, signer, fieldIndex)
+                            }
+                          />
+                        </div>
+                      ))}
+                      {forms?.length > 1 && (
+                        <button
+                          onClick={() => handleRemoveForm(index)}
+                          className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
+                        >
+                          <i className="fa-solid fa-trash"></i>
+                        </button>
+                      )}
+                      <div ref={formRef}></div>
+                    </div>
+                  ))}
+                </div>
+                <div className="flex flex-col mx-4 mb-4 gap-3">
+                  <button
+                    onClick={handleAddForm}
+                    className="op-btn op-btn-primary focus:outline-none"
+                  >
+                    <i className="fa-solid fa-plus"></i> <span>Add new</span>
+                  </button>
+                  <button
+                    type="submit"
+                    className="op-btn op-btn-secondary focus:outline-none"
+                  >
+                    <i className="fa-solid fa-paper-plane"></i>{" "}
+                    <span>Send</span>
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+                All roles in this document are currently linked to contacts. To
+                &apos;quick send&apos; copies of this template to multiple
+                signers, please ensure that at least one role is not linked to
+                any contact.
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+            Please ensure there&#39;s at least one signature widget added for
+            all recipients.
+          </div>
+        )
+      ) : (
+        <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+          Please add at least one role to this template in order to &apos;quick
+          send&apos; copies of it to multiple signers.
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BulkSendUi;
@@ -1,62 +0,0 @@
-import { useState, useEffect } from "react";
-import ModalUi from "../primitives/ModalUi";
-import { useTranslation } from "react-i18next";
-
-const ColumnSelector = ({
-  isOpen,
-  allColumns = [],
-  visibleColumns = [],
-  columnLabels = {},
-  onApply,
-  onClose
-}) => {
-  const { t } = useTranslation();
-  const [selected, setSelected] = useState(visibleColumns);
-  const [names, setNames] = useState(columnLabels);
-
-  useEffect(() => {
-    setSelected(visibleColumns);
-    setNames(columnLabels);
-  }, [visibleColumns, columnLabels]);
-
-  const handleChange = (col) => {
-    setSelected((prev) =>
-      prev.includes(col) ? prev.filter((c) => c !== col) : [...prev, col]
-    );
-  };
-
-  const handleApply = () => {
-    onApply && onApply(selected, names);
-    onClose && onClose();
-  };
-
-  return (
-    <ModalUi isOpen={isOpen} title={t("select-columns")} handleClose={onClose}>
-      <div className="p-[20px] flex flex-col gap-2">
-        {allColumns.map((col, i) => (
-          <div key={col} className="flex justify-between items-center gap-2">
-            <span className="flex justify-center items-center h-full">
-              <input
-                id={col + "_" + i}
-                type="checkbox"
-                checked={selected.includes(col)}
-                onChange={() => handleChange(col)}
-                className="mb-0 cursor-pointer"
-              />
-              <span className="whitespace-nowrap ml-1">
-                {t(`report-heading.${col}`, { defaultValue: col })}
-              </span>
-            </span>
-          </div>
-        ))}
-        <div className="flex justify-start mt-2">
-          <button onClick={handleApply} className="op-btn op-btn-primary">
-            {t("apply")}
-          </button>
-        </div>
-      </div>
-    </ModalUi>
-  );
-};
-
-export default ColumnSelector;
@@ -1,35 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-const DateFormat = ({ selectDate, dateFormatList, handleChangeFormat }) => {
-  const selectedFormatIndex = dateFormatList?.findIndex(
-    (item) => item.format === selectDate?.format
-  );
-  const { t } = useTranslation();
-
-  return (
-    <div className="flex flex-col md:items-center md:flex-row gap-y-3 my-2">
-      <span className="capitalize">{t("format")}: </span>
-      <select
-        className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs md:ml-2"
-        value={selectedFormatIndex >= 0 ? selectedFormatIndex : ""}
-        onChange={(e) => handleChangeFormat(e)}
-      >
-        <option value="" disabled>
-          {t("select-date-format")}
-        </option>
-        {dateFormatList.map((data, ind) => {
-          return (
-            <option className="text-[13px]" value={ind} key={ind}>
-              {data?.date ? data?.date : "nodata"}
-            </option>
-          );
-        })}
-      </select>
-      <span className="text-xs text-gray-400 ml-1 uppercase">
-        {selectDate.format}
-      </span>
-    </div>
-  );
-};
-
-export default DateFormat;
@@ -1,88 +0,0 @@
-import { forwardRef } from "react";
-import ReactDatePicker from "react-datepicker";
-import {
-  getDefaultDate,
-  getMonth,
-  getYear,
-  months,
-  years
-} from "../constant/Utils";
-import { useTranslation } from "react-i18next";
-
-const DatePicker = ({
-  selectDate,
-  format,
-  minDate,
-  maxDate,
-  onChange,
-  handleClear
-}) => {
-  const { t } = useTranslation();
-
-  const CustomInput = forwardRef(({ value, onClick }, ref) => (
-    <div
-      className="border-gray-400 rounded-[50px] border-[1px] px-3 text-xs py-2 focus:outline-none hover:border-base-content "
-      onClick={onClick}
-      ref={ref}
-    >
-      {value}
-      <i
-        className={`${value ? "ml-[15px]" : "w-20"} fa-light fa-calendar `}
-      ></i>
-    </div>
-  ));
-  CustomInput.displayName = "CustomInput";
-
-  return (
-    <div>
-      <span>{t("default-date")}: </span>
-      <ReactDatePicker
-        renderCustomHeader={({ date, changeYear, changeMonth }) => (
-          <div className="flex justify-start md:ml-2">
-            <select
-              className="bg-transparent outline-none"
-              value={months[getMonth(date)]}
-              onChange={({ target: { value } }) =>
-                changeMonth(months.indexOf(value))
-              }
-            >
-              {months.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </select>
-            <select
-              className="bg-transparent outline-none"
-              value={getYear(date)}
-              onChange={({ target: { value } }) => changeYear(value)}
-            >
-              {years.map((option) => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </select>
-          </div>
-        )}
-        closeOnScroll={true}
-        selected={getDefaultDate(selectDate?.date, selectDate?.format)}
-        popperPlacement="top-end"
-        customInput={<CustomInput />}
-        onChange={(date) => onChange(date)}
-        dateFormat={
-          selectDate ? selectDate?.format : format ? format : "MM/dd/yyyy"
-        }
-        portalId="root-portal"
-      />
-      <span
-        onClick={() => handleClear()}
-        className="underline text-blue-500 cursor-pointer ml-2"
-      >
-        {t("clear")}
-      </span>
-    </div>
-  );
-};
-
-export default DatePicker;
@@ -1,27 +0,0 @@
-import { HTML5Backend } from "react-dnd-html5-backend";
-import {
-  DndProvider,
-  MouseTransition
-} from "react-dnd-multi-backend";
-import LazyPage from "../primitives/LazyPage";
-import { GuidelinesProvider } from "../context/GuidelinesContext";
-
-const HTML5toTouch = {
-  backends: [
-    {
-      id: "html5",
-      backend: HTML5Backend,
-      transition: MouseTransition
-    }
-  ]
-};
-
-export default function DragProvider({ Page, lazy = false }) {
-  return (
-    <DndProvider options={HTML5toTouch}>
-      <GuidelinesProvider>
-        {lazy ? <LazyPage Page={Page} /> : <Page />}
-      </GuidelinesProvider>
-    </DndProvider>
-  );
-}
@@ -2,10 +2,7 @@ import React, { useEffect, useState } from "react";
 import Package from "../../package.json";
 import axios from "axios";
 import { openInNewTab } from "../constant/Utils";
-import { useTranslation } from "react-i18next";
 const Footer = () => {
-  const appName = "OpenSign™";
-  const { t } = useTranslation();
  const [showButton, setShowButton] = useState(false);
  const [version, setVersion] = useState("");
  useEffect(() => {
@@ -40,6 +37,7 @@ const Footer = () => {
    };
  }, []);

+  const appName = "OpenSign™";
  const openUrl = () => {
    openInNewTab(
      "https://github.com/OpenSignLabs/OpenSign/releases/tag/" + version
@@ -50,10 +48,9 @@ const Footer = () => {
      <footer className="op-footer op-footer-center py-3 bg-base-300 text-base-content text-center text-[13px]">
        <aside>
          <p>
-            {t("all-right")} &copy; {new Date().getFullYear()} &nbsp;
+            All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
            <span onClick={openUrl} className="hover:underline cursor-pointer">
-              {appName} ( {t("version")}:{" "}
-              {version ? version : `${Package.version} `})
+              {appName} ( version: {version ? version : `${Package.version} `})
            </span>
          </p>
        </aside>
@@ -61,10 +58,10 @@ const Footer = () => {
      <button
        className={`${
          showButton ? "block" : "hidden"
-        } fixed bottom-4 right-4 px-3 p-2 text-xl op-bg-secondary text-white rounded focus:outline-none`}
+        } fixed bottom-4 right-4 px-3 p-2 text-xl bg-blue-500 text-white rounded focus:outline-none`}
        onClick={scrollToTop}
      >
-        <i className="fa-light fa-angle-up"></i>
+        <i className="fa-solid fa-angle-up"></i>
      </button>
    </>
  );
@@ -70,9 +70,9 @@ const FullScreenButton = () => {
        className="text-base-content p-2 text-sm focus:outline-none"
      >
        {isFullScreen ? (
-          <i className="fa-light fa-compress"></i>
+          <i className="fa-solid fa-compress"></i>
        ) : (
-          <i className="fa-light fa-maximize"></i>
+          <i className="fa fa-maximize"></i>
        )}
      </button>
    </div>
@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from "react";
+import dp from "../assets/images/dp.png";
+import FullScreenButton from "./FullScreenButton";
+import { useNavigate } from "react-router-dom";
+import Parse from "parse";
+import { useWindowSize } from "../hook/useWindowSize";
+import { checkIsSubscribed, getAppLogo, openInNewTab } from "../constant/Utils";
+import { isEnableSubscription } from "../constant/const";
+
+const Header = ({ showSidebar }) => {
+  const navigate = useNavigate();
+  const { width } = useWindowSize();
+  let username = localStorage.getItem("username");
+  const image = localStorage.getItem("profileImg") || dp;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubscribe, setIsSubscribe] = useState(true);
+  const [isPro, setIsPro] = useState(false);
+  const [applogo, setAppLogo] = useState(
+    localStorage.getItem("appLogo") || " "
+  );
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+  useEffect(() => {
+    checkSubscription();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  async function checkSubscription() {
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      if (getIsSubscribe) {
+        const applogo = await getAppLogo();
+        if (applogo) {
+          setAppLogo(applogo);
+        } else {
+          setAppLogo(localStorage.getItem("appLogo") || "");
+        }
+      }
+      setIsPro(getIsSubscribe);
+      setIsSubscribe(getIsSubscribe);
+    }
+  }
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+    if (Parse?.User?.current()) {
+      try {
+        Parse.User.logOut();
+      } catch (err) {
+        console.log("Err", err);
+      }
+    }
+    let appdata = localStorage.getItem("userSettings");
+    let applogo = localStorage.getItem("appLogo");
+    let appName = localStorage.getItem("appName");
+    let defaultmenuid = localStorage.getItem("defaultmenuid");
+    let PageLanding = localStorage.getItem("PageLanding");
+    let domain = localStorage.getItem("domain");
+    let _appName = localStorage.getItem("_appName");
+    let baseUrl = localStorage.getItem("baseUrl");
+    let appid = localStorage.getItem("parseAppId");
+
+    localStorage.clear();
+
+    localStorage.setItem("appLogo", applogo);
+    localStorage.setItem("appName", appName);
+    localStorage.setItem("_appName", _appName);
+    localStorage.setItem("defaultmenuid", defaultmenuid);
+    localStorage.setItem("PageLanding", PageLanding);
+    localStorage.setItem("domain", domain);
+    localStorage.setItem("userSettings", appdata);
+    localStorage.setItem("baseUrl", baseUrl);
+    localStorage.setItem("parseAppId", appid);
+
+    navigate("/");
+  };
+
+  //handle to close profile drop down menu onclick screen
+  useEffect(() => {
+    const closeMenuOnOutsideClick = (e) => {
+      if (isOpen && !e.target.closest("#profile-menu")) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("click", closeMenuOnOutsideClick);
+
+    return () => {
+      // Cleanup the event listener when the component unmounts
+      document.removeEventListener("click", closeMenuOnOutsideClick);
+    };
+  }, [isOpen]);
+
+  return (
+    <div className="op-navbar bg-base-100 shadow">
+      <div className="flex-none">
+        <button
+          className="op-btn op-btn-square op-btn-ghost focus:outline-none"
+          onClick={showSidebar}
+        >
+          <i className="fa-solid fa-bars text-xl text-base-content"></i>
+        </button>
+      </div>
+      <div className="flex-1 ml-2">
+        <div className="h-[25px] md:h-[40px] w-auto overflow-hidden">
+          <img
+            className="object-contain h-full w-auto"
+            src={applogo}
+            alt="img"
+          />
+        </div>
+      </div>
+      <div id="profile-menu" className="flex-none gap-2">
+        {!isSubscribe && (
+          <div>
+            <button
+              className="text-xs bg-[#002864] p-2 text-white rounded shadow"
+              onClick={() => navigate("/subscription")}
+            >
+              Upgrade Now
+            </button>
+          </div>
+        )}
+        {isPro && (
+          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+            PRO
+          </div>
+        )}
+        <div>
+          <FullScreenButton />
+        </div>
+        {width >= 768 && (
+          <div
+            onClick={toggleDropdown}
+            className="cursor-pointer w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-gray-400 overflow-hidden"
+          >
+            <img
+              className="w-[35px] h-[35px] object-contain"
+              src={image}
+              alt="img"
+            />
+          </div>
+        )}
+        {width >= 768 && (
+          <div
+            onClick={toggleDropdown}
+            className="cursor-pointer text-base-content text-sm"
+          >
+            {username && username}
+          </div>
+        )}
+        <div className="op-dropdown op-dropdown-end" id="profile-menu">
+          <div tabIndex={0} role="button" className="op-btn op-btn-ghost">
+            <i
+              tabIndex={0}
+              role="button"
+              onClick={toggleDropdown}
+              className="fa-solid fa-angle-down text-base-content"
+            ></i>
+          </div>
+          <ul
+            tabIndex={0}
+            className="mt-3 z-[1] p-2 shadow op-menu op-menu-sm op-dropdown-content text-base-content bg-base-100 rounded-box w-52"
+          >
+            <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
+              <span>
+                <i className="fa-solid fa-book"></i> Docs
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/profile");
+              }}
+            >
+              <span>
+                <i className="fa-regular fa-user"></i> Profile
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/changepassword");
+              }}
+            >
+              <span>
+                <i className="fa-solid fa-lock"></i> Change Password
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                window.open("https://console.opensignlabs.com/");
+              }}
+            >
+              <span>
+                <i className="fa-regular fa-id-card"></i> Console
+              </span>
+            </li>
+            <li onClick={closeDropdown}>
+              <span>
+                <i className="fa-solid fa-arrow-right-from-bracket"></i> Log Out
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
@@ -1,273 +0,0 @@
-import { useState, useEffect } from "react";
-import dp from "../assets/images/dp.png";
-import FullScreenButton from "./FullScreenButton";
-import ThemeToggle from "./ThemeToggle";
-import { useNavigate } from "react-router";
-import Parse from "parse";
-import { useWindowSize } from "../hook/useWindowSize";
-import {
-  getAppLogo,
-  openInNewTab,
-  saveLanguageInLocal
-} from "../constant/Utils";
-import { useTranslation } from "react-i18next";
-import { appInfo } from "../constant/appinfo";
-import { useDispatch } from "react-redux";
-import { toggleSidebar } from "../redux/reducers/sidebarReducer";
-import { sessionStatus } from "../redux/reducers/userReducer";
-
-const Header = ({ isConsole, setIsLoggingOut }) => {
-  const { t, i18n } = useTranslation();
-  const navigate = useNavigate();
-  const { width } = useWindowSize();
-  const dispatch = useDispatch();
-  const username = localStorage.getItem("username") || "";
-  const image = localStorage.getItem("profileImg") || dp;
-  const [isOpen, setIsOpen] = useState(false);
-  const [applogo, setAppLogo] = useState("");
-  const [isDarkTheme, setIsDarkTheme] = useState();
-
-  const toggleDropdown = () => {
-    setIsOpen(!isOpen);
-    closeSidebar();
-  };
-  const closeSidebar = () => {
-    if (width && width <= 768) {
-      dispatch(toggleSidebar(false));
-    }
-  };
-
-  useEffect(() => {
-    initializeHead();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    closeSidebar();
-  }, [width]);
-
-  const showSidebar = () => {
-    dispatch(toggleSidebar());
-  };
-
-
-  async function initializeHead() {
-      const applogo = await getAppLogo();
-      if (applogo?.logo) {
-        setAppLogo(applogo?.logo);
-      } else {
-        const logo = localStorage.getItem("appLogo") || appInfo.applogo;
-        setAppLogo(logo);
-      }
-  }
-  const handleLogout = async () => {
-    setIsOpen(false);
-    setIsLoggingOut(true);
-    try {
-      await Parse.User.logOut();
-    } catch (err) {
-      console.log("Err while logging out", err);
-    } finally {
-      dispatch(sessionStatus(true));
-    }
-    let appdata = localStorage.getItem("userSettings");
-    let applogo = localStorage.getItem("appLogo");
-    let defaultmenuid = localStorage.getItem("defaultmenuid");
-    let PageLanding = localStorage.getItem("PageLanding");
-    let baseUrl = localStorage.getItem("baseUrl");
-    let appid = localStorage.getItem("parseAppId");
-    let favicon = localStorage.getItem("favicon");
-
-    localStorage.clear();
-    saveLanguageInLocal(i18n);
-    localStorage.setItem("appLogo", applogo);
-    localStorage.setItem("defaultmenuid", defaultmenuid);
-    localStorage.setItem("PageLanding", PageLanding);
-    localStorage.setItem("userSettings", appdata);
-    localStorage.setItem("baseUrl", baseUrl);
-    localStorage.setItem("parseAppId", appid);
-    localStorage.setItem("favicon", favicon);
-    setIsLoggingOut(false);
-    navigate("/");
-  };
-
-  //handle to close profile drop down menu onclick screen
-  useEffect(() => {
-    const closeMenuOnOutsideClick = (e) => {
-      if (isOpen && !e.target.closest("#profile-menu")) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("click", closeMenuOnOutsideClick);
-
-    return () => {
-      // Cleanup the event listener when the component unmounts
-      document.removeEventListener("click", closeMenuOnOutsideClick);
-    };
-  }, [isOpen]);
-
-
-  useEffect(() => {
-    const updateThemeStatus = () => {
-      const isDarkTheme =
-        document.documentElement.getAttribute("data-theme") === "opensigndark";
-      setIsDarkTheme(isDarkTheme);
-    };
-    updateThemeStatus();
-
-    const observer = new MutationObserver(() => {
-      updateThemeStatus();
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"]
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <>
-      <div className="op-navbar bg-base-100 shadow touch-none">
-        <div className="flex-none">
-          <button
-            className="op-btn op-btn-square op-btn-ghost focus:outline-none hover:bg-transparent op-btn-sm no-animation"
-            onClick={showSidebar}
-          >
-            <i className="fa-light fa-bars text-xl text-base-content"></i>
-          </button>
-        </div>
-        <div className="flex-1 ml-2">
-          <div
-            onClick={() => navigate("/dashboard/35KBoSgoAK")}
-            className="h-[25px] md:h-[40px] w-auto overflow-hidden cursor-pointer"
-          >
-            {applogo && (
-              <img
-                className="object-contain h-full w-auto"
-                src={
-                      isDarkTheme
-                      ? "/static/js/assets/images/logo-dark.png"
-                      : applogo
-                }
-                alt="logo"
-              />
-            )}
-          </div>
-        </div>
-        <div id="profile-menu" className="flex-none gap-2">
-          <div>
-            <FullScreenButton />
-          </div>
-          {width >= 768 && (
-            <div
-              onClick={toggleDropdown}
-              className="cursor-pointer w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-gray-400 overflow-hidden"
-            >
-              <img
-                className="w-[35px] h-[35px] object-contain"
-                src={image}
-                alt="img"
-              />
-            </div>
-          )}
-          {width >= 768 && (
-            <div
-              onClick={toggleDropdown}
-              role="button"
-              tabIndex="0"
-              className="cursor-pointer text-base-content text-sm"
-            >
-              {username && username}
-            </div>
-          )}
-          <div
-            className="op-dropdown op-dropdown-open op-dropdown-end"
-            id="profile-menu"
-          >
-            <div
-              tabIndex={0}
-              role="button"
-              onClick={toggleDropdown}
-              className="op-btn op-btn-ghost op-btn-xs w-[10px] h-[20px] hover:bg-transparent"
-            >
-              <i className="fa-light fa-angle-down text-base-content"></i>
-            </div>
-            <ul
-              tabIndex={0}
-              className={`mt-4 z-[1] p-2 shadow op-dropdown-open op-menu op-menu-sm op-dropdown-content text-base-content bg-base-100 rounded-box w-56 ${
-                isOpen ? "" : "hidden"
-              }`}
-            >
-              {!isConsole && (
-                <>
-                    <li
-                      onClick={() =>
-                        openInNewTab("https://docs.opensignlabs.com")
-                      }
-                    >
-                      <span>
-                        <i className="fa-light fa-book"></i> {t("docs")}
-                      </span>
-                    </li>
-                  <li
-                    onClick={() => {
-                      setIsOpen(false);
-                      navigate("/profile");
-                    }}
-                  >
-                    <span>
-                      <i className="fa-light fa-user"></i> {t("profile")}
-                    </span>
-                  </li>
-                    <li
-                      onClick={() => {
-                        setIsOpen(false);
-                        navigate("/changepassword");
-                      }}
-                    >
-                      <span>
-                        <i className="fa-light fa-lock"></i>{" "}
-                        {t("change-password")}
-                      </span>
-                    </li>
-                  <li
-                    onClick={() => {
-                      setIsOpen(false);
-                      navigate("/verify-document");
-                    }}
-                  >
-                    <span>
-                      <i className="fa-light fa-check-square"></i>{" "}
-                      {t("verify-document")}
-                    </span>
-                  </li>
-                  <li>
-                    <span>
-                      <i className="fa-light fa-moon"></i>
-                      {t("dark-mode")}
-                      <span className="text-[10px] font-semibold bg-base-300 text-base-content px-1 rounded-md">
-                        BETA
-                      </span>
-                      <ThemeToggle />
-                    </span>
-                  </li>
-                </>
-              )}
-              <li onClick={handleLogout}>
-                <span>
-                  <i className="fa-light fa-arrow-right-from-bracket"></i>{" "}
-                  {t("log-out")}
-                </span>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Header;
@@ -0,0 +1,208 @@
+import React, { useState } from "react";
+import Parse from "parse";
+import Loader from "../primitives/Loader";
+// import FacebookLogin from "react-facebook-login";
+
+const LoginFacebook = ({
+  FBCred,
+  thirdpartyLoginfn,
+  thirdpartyLoader,
+  setThirdpartyLoader
+}) => {
+  const [isModal, setIsModal] = useState(false);
+  const [userDetails, setUserDetails] = useState({
+    Phone: "",
+    Company: "",
+    Name: "",
+    Email: ""
+  });
+  const [fBDetails, setFBDetails] = useState({
+    Id: "",
+    AccessToken: "",
+    Name: "",
+    Email: ""
+  });
+  const responseFacebook = async (response) => {
+    // console.log("response ", response);
+    if (response.userID) {
+      setThirdpartyLoader(true);
+      const details = {
+        Email: response.email,
+        Name: response.name
+      };
+      setUserDetails({ ...userDetails, ...details });
+      const fDetails = {
+        Id: response.userID,
+        AccessToken: response.accessToken,
+        Name: response.name,
+        Email: response.email
+      };
+      setFBDetails({ ...fBDetails, ...fDetails });
+      const res = await checkExtUser(fDetails);
+    }
+  };
+
+  const checkExtUser = async (details) => {
+    // const extUser = new Parse.Query("contracts_Users");
+    // extUser.equalTo("Email", details.Email);
+    // const extRes = await extUser.first();
+    const params = { email: details.Email };
+    const extRes = await Parse.Cloud.run("getUserDetails", params);
+    // console.log("extRes ", extRes);
+    if (extRes) {
+      const params = { ...details, Phone: extRes?.get("Phone") || "" };
+      const payload = await Parse.Cloud.run("facebooksign", params);
+      //   console.log("payload ", payload);
+      if (payload && payload.sessiontoken) {
+        const billingDate =
+          extRes.get("Next_billing_date") && extRes.get("Next_billing_date");
+        // console.log("billingDate expired", billingDate > new Date());
+        const LocalUserDetails = {
+          name: details.Name,
+          email: details.Email,
+          phone: extRes?.get("Phone") || "",
+          company: extRes.get("Company")
+        };
+        localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
+        thirdpartyLoginfn(payload.sessiontoken, billingDate);
+      }
+      return { msg: "exist" };
+    } else {
+      setIsModal(true);
+      setThirdpartyLoader(false);
+      return { msg: "notexist" };
+    }
+  };
+  const handleSubmitbtn = async () => {
+    if (userDetails.Phone && userDetails.Company) {
+      setThirdpartyLoader(true);
+      const params = { ...fBDetails, Phone: userDetails?.Phone || "" };
+      const payload = await Parse.Cloud.run("facebooksign", params);
+      // console.log("payload ", payload);
+
+      if (payload && payload.sessiontoken) {
+        const params = {
+          userDetails: {
+            name: userDetails.Name,
+            email: userDetails.Email,
+            // "passsword":userDetails.Phone,
+            phone: userDetails?.Phone || "",
+            role: "contracts_User",
+            company: userDetails.Company
+          }
+        };
+        const userSignUp = await Parse.Cloud.run("usersignup", params);
+        // console.log("userSignUp ", userSignUp);
+        if (userSignUp && userSignUp.sessionToken) {
+          const LocalUserDetails = {
+            name: userDetails.Name,
+            email: userDetails.Email,
+            phone: userDetails?.Phone || "",
+            company: userDetails.Company
+          };
+          localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
+          thirdpartyLoginfn(userSignUp.sessionToken);
+        } else {
+          alert(userSignUp.message);
+        }
+      } else {
+        alert("Internal server error !");
+      }
+    } else {
+      alert("Please fill required details!");
+    }
+  };
+  return (
+    <div className="relative">
+      {thirdpartyLoader && (
+        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
+        </div>
+      )}
+      {/* <FacebookLogin
+        appId={FBCred}
+        fields="name,email,picture"
+        callback={responseFacebook}
+        cssClass="btn btn-info btn-md btn-fb"
+        icon="fa fa-facebook-f"
+      /> */}
+      {isModal && (
+        <div
+          className="modal fade show block z-[1]"
+          id="exampleModal"
+          tabIndex="-1"
+          role="dialog"
+        >
+          <div className="modal-dialog" role="document">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Sign up form</h5>
+                <span>
+                  <span></span>
+                </span>
+              </div>
+              <div className="modal-body">
+                <form>
+                  <div className="form-group">
+                    <label htmlFor="Phone" className="col-form-label">
+                      Phone <span className="text-[red] text-[13px]">*</span>
+                    </label>
+                    <input
+                      type="tel"
+                      className="form-control"
+                      id="Phone"
+                      value={userDetails.Phone}
+                      onChange={(e) =>
+                        setUserDetails({
+                          ...userDetails,
+                          Phone: e.target.value
+                        })
+                      }
+                      required
+                    />
+                  </div>
+                  <div className="form-group">
+                    <label htmlFor="Company" className="col-form-label">
+                      Company <span className="text-[red] text-[13px]">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      className="form-control"
+                      id="Company"
+                      value={userDetails.Company}
+                      onChange={(e) =>
+                        setUserDetails({
+                          ...userDetails,
+                          Company: e.target.value
+                        })
+                      }
+                      required
+                    />
+                  </div>
+                  <div>
+                    <button
+                      type="button"
+                      onClick={() => handleSubmitbtn()}
+                      className="btn btn-info mr-[10px]"
+                    >
+                      Sign up
+                    </button>
+                    <button
+                      type="button"
+                      className="btn btn-secondary w-[90px]"
+                      onClick={() => setIsModal(false)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LoginFacebook;
@@ -0,0 +1,295 @@
+import React, { useState, useRef } from "react";
+import Parse from "parse";
+import { jwtDecode } from "jwt-decode";
+import { useScript } from "../hook/useScript";
+import ModalUi from "../primitives/ModalUi";
+import Loader from "../primitives/Loader";
+
+/*
+ * `GoogleSignInBtn`as it's name indicates it render google sign in button
+ * and in this `useScript` in which we have created for generate google sign button
+ * and when user click on sign in with google it will be verify on server side
+ * and then generate token
+ */
+const GoogleSignInBtn = ({
+  GoogleCred,
+  thirdpartyLoginfn,
+  thirdpartyLoader,
+  setThirdpartyLoader
+}) => {
+  const [isModal, setIsModal] = useState(false);
+  const googleBtn = useRef();
+  const [userDetails, setUserDetails] = useState({
+    Phone: "",
+    Company: "",
+    Name: "",
+    Email: "",
+    Destination: ""
+  });
+  const [googleDetails, setGoogleDetails] = useState({
+    Id: "",
+    TokenId: "",
+    Gmail: "",
+    Name: ""
+  });
+  useScript("https://accounts.google.com/gsi/client", () => {
+    window.google.accounts.id.initialize({
+      client_id: GoogleCred,
+      callback: responseGoogle,
+      auto_select: false
+    });
+    window.google.accounts.id.renderButton(googleBtn.current, {
+      theme: "outline",
+      size: "large",
+      width: "187px"
+    });
+  });
+  const clearStorage = async () => {
+    if (Parse.User.current()) {
+      await Parse.User.logOut();
+    }
+    let baseUrl = localStorage.getItem("baseUrl");
+    let appid = localStorage.getItem("parseAppId");
+    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("baseUrl", baseUrl);
+    localStorage.setItem("parseAppId", 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 responseGoogle = async (response) => {
+    clearStorage();
+    setThirdpartyLoader(true);
+    // console.log("response ", response);
+    if (response.credential) {
+      const data = jwtDecode(response.credential);
+      // console.log("data ", data);
+      if (data.sub && data.email) {
+        const details = {
+          Email: data.email,
+          Name: data.name
+        };
+        setUserDetails({ ...userDetails, ...details });
+        const Gdetails = {
+          Id: data.sub,
+          TokenId: response.credential,
+          Gmail: data.email,
+          Name: data.name
+        };
+        setGoogleDetails({ ...googleDetails, ...Gdetails });
+        await checkExtUser(Gdetails);
+      }
+    }
+  };
+  const checkExtUser = async (details) => {
+    // const extUser = new Parse.Query("contracts_Users");
+    // extUser.equalTo("Email", details.Gmail);
+    // const extRes = await extUser.first();
+    const params = { email: details.Gmail };
+    const extRes = await Parse.Cloud.run("getUserDetails", params);
+    // console.log("extRes ", extRes);
+    if (extRes) {
+      const params = { ...details, Phone: extRes?.get("Phone") || "" };
+      const payload = await Parse.Cloud.run("googlesign", params);
+      // console.log("payload ", payload);
+      if (payload && payload.sessiontoken) {
+        // setThirdpartyLoader(true);
+        // const billingDate =
+        //   extRes.get("Next_billing_date") && extRes.get("Next_billing_date");
+        // console.log("billingDate expired", billingDate > new Date());
+        const LocalUserDetails = {
+          name: details.Name,
+          email: details.Gmail,
+          phone: extRes?.get("Phone") || "",
+          company: extRes.get("Company")
+        };
+        localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
+        thirdpartyLoginfn(payload.sessiontoken);
+      }
+      return { msg: "exist" };
+    } else {
+      setIsModal(true);
+      setThirdpartyLoader(false);
+      return { msg: "notexist" };
+    }
+  };
+  const handleSubmitbtn = async () => {
+    if (userDetails.Phone && userDetails.Company) {
+      setThirdpartyLoader(true);
+      // e.preventDefault()
+      // console.log("handelSubmit", userDetails);
+      const params = { ...googleDetails, Phone: userDetails?.Phone };
+      const payload = await Parse.Cloud.run("googlesign", params);
+
+      // console.log("payload ", payload);
+      if (payload && payload.sessiontoken) {
+        const params = {
+          userDetails: {
+            name: userDetails.Name,
+            email: userDetails.Email,
+            // "passsword":userDetails.Phone,
+            phone: userDetails?.Phone || "",
+            role: "contracts_User",
+            company: userDetails.Company,
+            jobTitle: userDetails.Destination
+          }
+        };
+        const userSignUp = await Parse.Cloud.run("usersignup", params);
+        // console.log("userSignUp ", userSignUp);
+        if (userSignUp && userSignUp.sessionToken) {
+          const LocalUserDetails = {
+            name: userDetails.Name,
+            email: userDetails.Email,
+            phone: userDetails?.Phone || "",
+            company: userDetails.Company
+            // jobTitle: userDetails.JobTitle
+          };
+          localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
+          thirdpartyLoginfn(userSignUp.sessionToken);
+        } else {
+          alert(userSignUp.message);
+        }
+      } else if (
+        payload &&
+        payload.message.replace(/ /g, "_") === "Internal_server_err"
+      ) {
+        alert("Internal server error !");
+      }
+    } else {
+      alert("Please fill required details!");
+    }
+  };
+  const handleCloseModal = () => {
+    setIsModal(false);
+    Parse.User.logOut();
+
+    let appdata = localStorage.getItem("userSettings");
+    let applogo = localStorage.getItem("appLogo");
+    let appName = localStorage.getItem("appName");
+    let defaultmenuid = localStorage.getItem("defaultmenuid");
+    let PageLanding = localStorage.getItem("PageLanding");
+    let domain = localStorage.getItem("domain");
+    let _appName = localStorage.getItem("_appName");
+    let baseUrl = localStorage.getItem("baseUrl");
+    let appid = localStorage.getItem("parseAppId");
+
+    localStorage.clear();
+
+    localStorage.setItem("appLogo", applogo);
+    localStorage.setItem("appName", appName);
+    localStorage.setItem("_appName", _appName);
+    localStorage.setItem("defaultmenuid", defaultmenuid);
+    localStorage.setItem("PageLanding", PageLanding);
+    localStorage.setItem("domain", domain);
+    localStorage.setItem("userSettings", appdata);
+    localStorage.setItem("baseUrl", baseUrl);
+    localStorage.setItem("parseAppId", appid);
+  };
+  return (
+    <div className="relative">
+      {thirdpartyLoader && (
+        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
+        </div>
+      )}
+      <div ref={googleBtn} className="text-sm"></div>
+      <ModalUi showClose={false} isOpen={isModal} title="Sign up form">
+        <form className="px-4 py-3 text-base-content">
+          <div className="mb-3">
+            <label htmlFor="Phone" className="block text-xs font-semibold">
+              Phone <span className="text-[13px] text-[red]">*</span>
+            </label>
+            <input
+              type="tel"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              id="Phone"
+              value={userDetails.Phone}
+              onChange={(e) =>
+                setUserDetails({
+                  ...userDetails,
+                  Phone: e.target.value
+                })
+              }
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <label htmlFor="Company" className="block text-xs font-semibold">
+              Company <span className="text-[13px] text-[red]">*</span>
+            </label>
+            <input
+              type="text"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              id="Company"
+              value={userDetails.Company}
+              onChange={(e) =>
+                setUserDetails({
+                  ...userDetails,
+                  Company: e.target.value
+                })
+              }
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <label htmlFor="JobTitle" className="block text-xs font-semibold">
+              Job Title <span className="text-[13px] text-[red]">*</span>
+            </label>
+            <input
+              type="text"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              id="JobTitle"
+              value={userDetails.Destination}
+              onChange={(e) =>
+                setUserDetails({
+                  ...userDetails,
+                  Destination: e.target.value
+                })
+              }
+              required
+            />
+          </div>
+          <div className="flex flex-row gap-2">
+            <button
+              type="button"
+              className="op-btn op-btn-primary"
+              onClick={() => handleSubmitbtn()}
+            >
+              Sign up
+            </button>
+            <button
+              type="button"
+              className="op-btn op-btn-ghost"
+              onClick={handleCloseModal}
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </ModalUi>
+    </div>
+  );
+};
+
+export default GoogleSignInBtn;
@@ -1,9 +1,7 @@
 import React from "react";
 import { Document, Page } from "react-pdf";
-import { Stage, Layer, Rect, Text } from "react-konva";
-import { useTranslation } from "react-i18next";
+import { Stage, Layer, Rect } from "react-konva";
 const RenderDebugPdf = (props) => {
-  const { t } = useTranslation();
  return (
    <div>
      <div className="sticky top-0 p-[10px] z-10 bg-white border-[1px] border-[gray] my-[5px]">
@@ -14,9 +12,14 @@ const RenderDebugPdf = (props) => {
        onMouseMove={props.handleMouseMoveDiv}
      >
        <Document
-          onLoadError={() => props.setPdfLoadFail(false)}
-          loading={t("loading-doc")}
-          error={<p className="mx-2">{t("failed-to-load-refresh-page")}</p>}
+          onLoadError={() => {
+            const load = {
+              status: false,
+              type: "failed"
+            };
+            props.setPdfLoadFail(load);
+          }}
+          loading={"Loading Document.."}
          onLoadSuccess={props.pageDetails}
          ref={props.pdfRef}
          file={props.pdfUrl}
@@ -44,30 +47,16 @@ const RenderDebugPdf = (props) => {
            {props.annotations
              .filter((value) => value.page === props.pageNumber)
              .map((value) => {
-                const textX = value.x + value.width / 3;
-                const textY = value.y + value.height / 2.5;
                return (
-                  <React.Fragment key={value.key}>
-                    <Rect
-                      x={value.x}
-                      y={value.y}
-                      width={value.width}
-                      height={value.height}
-                      fill="#cbe9ed"
-                      stroke="black"
-                    />
-                    <Text
-                      x={textX}
-                      y={textY}
-                      text={
-                        value?.key > 0 ? "box " + value.key.toString() : "box"
-                      }
-                      fontSize={16}
-                      fill="black"
-                      align="center"
-                      verticalAlign="middle"
-                    />
-                  </React.Fragment>
+                  <Rect
+                    key={value.key}
+                    x={value.x}
+                    y={value.y}
+                    width={value.width}
+                    height={value.height}
+                    fill="transparent"
+                    stroke="black"
+                  />
                );
              })}
          </Layer>
@@ -1,39 +0,0 @@
-import React from "react";
-import ModalUi from "../primitives/ModalUi";
-import { useTranslation } from "react-i18next";
-
-function RotateAlert(props) {
-  const { t } = useTranslation();
-  return (
-    <ModalUi
-      isOpen={props.showRotateAlert}
-      title={t("Rotation-alert")}
-      handleClose={() => props.setShowRotateAlert({ status: false, degree: 0 })}
-    >
-      <div className="p-[20px] h-full">
-        <p>{t("rotate-alert-mssg")}</p>
-        <div className="h-[1px]  w-full my-[15px] bg-[#9f9f9f]"></div>
-        <div className="flex gap-1">
-          <button
-            onClick={() => props.handleRemoveWidgets()}
-            type="button"
-            className="op-btn op-btn-primary"
-          >
-            {t("yes")}
-          </button>
-          <button
-            onClick={() =>
-              props.setShowRotateAlert({ status: false, degree: 0 })
-            }
-            type="button"
-            className="op-btn op-btn-ghost text-base-content shadow-md"
-          >
-            {t("no")}
-          </button>
-        </div>
-      </div>
-    </ModalUi>
-  );
-}
-
-export default RotateAlert;
@@ -1,54 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { NavLink } from "react-router";
-
-const SocialMedia = () => {
-  const { t } = useTranslation();
-
-  return (
-    <React.Fragment>
-      <NavLink
-        to="https://github.com/opensignlabs/opensign"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <i aria-hidden="true" className="fa-brands fa-github"></i>
-        <span className="fa-sr-only">
-          OpenSign&apos;s {t("social-media.github")}
-        </span>
-      </NavLink>
-      <NavLink
-        to="https://www.linkedin.com/company/opensign%E2%84%A2/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <i aria-hidden="true" className="fa-brands fa-linkedin"></i>
-        <span className="fa-sr-only">
-          OpenSign&apos;s {t("social-media.linked-in")}
-        </span>
-      </NavLink>
-      <NavLink
-        to="https://www.twitter.com/opensignlabs"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <i aria-hidden="true" className="fa-brands fa-square-x-twitter"></i>
-        <span className="fa-sr-only">
-          OpenSign&apos;s {t("social-media.twitter")}
-        </span>
-      </NavLink>
-      <NavLink
-        to="https://discord.com/invite/xe9TDuyAyj"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <i aria-hidden="true" className="fa-brands fa-discord"></i>
-        <span className="fa-sr-only">
-          OpenSign&apos;s {t("social-media.discord")}
-        </span>
-      </NavLink>
-    </React.Fragment>
-  );
-};
-
-export default SocialMedia;
@@ -1,41 +0,0 @@
-import { useEffect, useState } from "react";
-
-const ThemeToggle = () => {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    const storedTheme = localStorage.getItem("theme");
-    if (storedTheme === "dark") {
-      setIsDark(true);
-      document.documentElement.setAttribute("data-theme", "opensigndark");
-    } else {
-      document.documentElement.setAttribute("data-theme", "opensigncss");
-    }
-  }, []);
-
-  const handleChange = () => {
-    const newTheme = !isDark;
-    setIsDark(newTheme);
-    if (newTheme) {
-      document.documentElement.setAttribute("data-theme", "opensigndark");
-      localStorage.setItem("theme", "dark");
-    } else {
-      document.documentElement.setAttribute("data-theme", "opensigncss");
-      localStorage.setItem("theme", "light");
-    }
-  };
-
-  return (
-    <>
-      <input
-        id="dark-mode-toggle"
-        type="checkbox"
-        className="op-toggle checked:[--tglbg:#3368ff] transition-all checked:bg-white"
-        checked={isDark}
-        onChange={handleChange}
-      />
-    </>
-  );
-};
-
-export default ThemeToggle;
@@ -0,0 +1,19 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+
+function Title({ title, drive }) {
+  return (
+    <Helmet>
+      <title>{drive ? title : `${title} - OpenSign™`}</title>
+      <meta name="description" content={`${title} - OpenSign™`} />
+      <link
+        rel="icon"
+        type="image/png"
+        href={localStorage.getItem("fev_Icon")}
+        sizes="40x40"
+      />
+    </Helmet>
+  );
+}
+
+export default Title;
@@ -1,81 +0,0 @@
-import { useLocation, matchPath } from "react-router";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-import { useManifestUrl } from "../hook/useManifestUrl";
-
-const TITLE_MAP = {
-  "/": "login",
-  // Homelayout
-  "/dashboard/35KBoSgoAK": "Dashboard",
-  "/form/sHAnZphf69": "Sign Yourself",
-  "/form/8mZzFxbG1z": "Request Signatures",
-  "/form/template": "New Template",
-  "/report/6TeaPr321t": "Templates",
-  "/report/4Hhwbp482K": "Need your sign",
-  "/report/1MwEuxLEkF": "In Progress",
-  "/report/kQUoW4hUXz": "Completed",
-  "/report/ByHuevtCFY": "Drafts",
-  "/report/UPr2Fm5WY3": "Declined",
-  "/report/zNqBHXHsYH": "Expired",
-  "/report/contacts": "Contactbook",
-  "/drive": "Drive",
-  "/managesign": "My Signature",
-  "/preferences": "Preferences",
-  "/users": "Users",
-  "/profile": "profile",
-  "/changepassword": "change-password",
-  "/verify-document": "verify-document",
-
-  "/signaturePdf/:docId": "Sign Yourself",
-  "/placeHolderSign/:docId": "Request Signatures",
-  "/template/:templateId": "New Template",
-  "/recipientSignPdf/:docId": "Request Signatures",
-  "/recipientSignPdf/:docId/:contactBookId": "Request Signatures",
-  "/load/recipientSignPdf/:docId/:contactBookId": "Request Signatures",
-
-  // alone
-  "/debugpdf": "Debug Pdf",
-  "/forgetpassword": "forgot-password",
-  "/success": "success",
-  "/addadmin": "add-admin",
-  "/upgrade-2.1": "add-admin",
-  "/draftDocument": "New Document",
-  "/login/:base64url": "Request Signatures",
-
-};
-
-function resolveTitle(pathname, override) {
-  if (override) return override;
-  for (let [pattern, label] of Object.entries(TITLE_MAP)) {
-    if (matchPath({ path: pattern, end: true }, pathname)) {
-      return label;
-    }
-  }
-  return "";
-}
-
-export default function Title() {
-  const { pathname, state } = useLocation();
-  const { t } = useTranslation();
-  const appName =
-    "OpenSign™";
-  const logo = useMemo(() => localStorage.getItem("favicon"), []);
-  const prefix = useMemo(
-    () => resolveTitle(pathname, state?.title),
-    [pathname, state?.title]
-  );
-  const title = useMemo(
-    () => (prefix ? `${t(prefix)} - ${appName}` : appName),
-    [t, prefix, appName]
-  );
-  const manifestUrl = useManifestUrl(appName, logo);
-
-  return (
-    <>
-      <title>{title}</title>
-      <meta name="description" content={title} />
-      {logo && <link rel="icon" type="image/png" href={logo} />}
-      <link rel="manifest" href={manifestUrl} />
-    </>
-  );
-}
@@ -1,605 +0,0 @@
-import {
-  useState,
-  useEffect,
-  useMemo
-} from "react";
-import axios from "axios";
-import SuggestionInput from "../shared/fields/SuggestionInput";
-import Loader from "../../primitives/Loader";
-import { useTranslation } from "react-i18next";
-import {
-  emailRegex,
-} from "../../constant/const";
-import {
-  convertPdfArrayBuffer,
-  getSignedUrl,
-  isBase64,
-  getBase64FromUrl,
-} from "../../constant/Utils";
-import {
-  formatCSVDate,
-  handleEmbedPrefillToDoc,
-  normalizeKey
-} from "../../utils";
-import RenderWidgets from "./components/RenderWidgets";
-import { useDispatch, useSelector } from "react-redux";
-import { setBulkLoader } from "../../redux/reducers/widgetSlice";
-
-const EXCLUDED_PREFILL_TYPES = new Set(["image", "draw"]);
-const EXCLUDED_WIDGET_TYPES = new Set([
-  "image",
-  "signature",
-  "stamp",
-  "initials"
-]);
-const ALL_EXCLUDED_TYPES = new Set([
-  ...EXCLUDED_PREFILL_TYPES,
-  ...EXCLUDED_WIDGET_TYPES
-]);
-
-const requiredAsteriskCls = (isRequired = false) => {
-  return isRequired ? "after:content-['_*'] after:text-red-500" : "";
-};
-const BulkSendUi = (props) => {
-  const { t } = useTranslation();
-  const appName =
-    "OpenSign™";
-  const dispatch = useDispatch();
-  const { isBulkLoader } = useSelector((state) => state.widget);
-  const [forms, setForms] = useState([]);
-  const [isSignatureExist, setIsSignatureExist] = useState();
-  const [isLoader, setIsLoader] = useState(false);
-  const [signers, setSigners] = useState([]);
-  const [emails, setEmails] = useState([]);
-  const [isVacantRoles, setIsVacantRoles] = useState(false);
-  const [fields, setFields] = useState([]);
-  const [headers, setHeaders] = useState([]);
-
-  const tokenHeader = useMemo(() => {
-    const headers = {
-      "Content-Type": "application/json",
-      "X-Parse-Application-Id": localStorage.getItem("parseAppId")
-    };
-    return {
-      ...headers,
-      "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-    };
-  }, [props?.jwttoken]);
-
-  //  Initialize form state (fields, widgets/responses, emails, headers, forms, signers, allowedForm) from template placeholders with existing values.
-  const initializeWidgetsWithValues = async () => {
-    if (props?.Placeholders?.length > 0) {
-      const roles = props?.Placeholders?.filter((p) => !p.signerObjId) || [];
-      const emails = [];
-      const users = await Promise.all(
-        roles.map(async (role) => {
-          const isPrefill = role?.Role?.toLowerCase() === "prefill";
-          const uniqueNames = new Set();
-          const pages = role?.placeHolder ?? [];
-          const widgets = await Promise.all(
-            pages.flatMap((page) =>
-              page.pos
-                .filter((widget) => {
-                  const widgetName = widget?.options?.name;
-                  if (!widgetName) return false; //|| widget?.options?.isReadOnly
-                  // exclude certain widget types for non-prefill
-                  if (EXCLUDED_WIDGET_TYPES.has(widget.type) && !isPrefill)
-                    return false;
-                  // unique by widget name
-                  if (uniqueNames.has(widgetName)) return false;
-                  uniqueNames.add(widgetName);
-                  return true;
-                })
-                .map(async (widget) => {
-                  let response = "";
-                  if (ALL_EXCLUDED_TYPES.has(widget.type)) {
-                    const url =
-                      widget.options?.response ||
-                      widget.options?.defaultValue ||
-                      "";
-                    if (url && !isBase64(url)) {
-                      const signedUrl = await getSignedUrl(
-                        url,
-                        "", // docId
-                        props.item.objectId, // templateId
-                      );
-
-                      response = await getBase64FromUrl(signedUrl, true);
-                    } else {
-                      response = "";
-                    }
-                  } else {
-                    if (widget.type === "date") {
-                      const value =
-                        widget.options?.response ||
-                        widget.options?.defaultValue ||
-                        "";
-                      response = value ? formatCSVDate(widget, value) : "";
-                    } else {
-                      response =
-                        widget.options?.response ||
-                        widget.options?.defaultValue ||
-                        "";
-                    }
-                  }
-                  const label = `${role.Role}::${widget.options?.name}`;
-
-                  return {
-                    ...widget,
-                    label: label,
-                    response,
-                    pageNumber: page.pageNumber
-                  };
-                })
-            )
-          );
-          const signerEmail =
-            normalizeKey(role?.email) || role?.signerPtr?.Email;
-          if (signerEmail) emails.push(signerEmail);
-
-          return {
-            fieldId: role.Id,
-            email: "",
-            label: role.Role,
-            signer: {},
-            widgets: widgets
-          };
-        })
-      );
-      setFields(users);
-      setEmails(emails);
-
-      // Build headers with required ordering:
-      // 1) all role emails first
-      // 2) then all widgets
-      const emailHeaders = [];
-      const widgetHeaders = [];
-      for (const role of users) {
-        const isPrefill = role?.label?.toLowerCase() === "prefill";
-
-        if (!isPrefill) {
-          emailHeaders.push({
-            label: `${role.label}::Email`,
-            role: role.label,
-            type: "role",
-            isRequired: true
-          });
-        }
-
-        for (const widget of role?.widgets ?? []) {
-          const isRequired =
-            widget?.options?.status === "required" && isPrefill;
-
-          widgetHeaders.push({
-            label: widget?.label,
-            role: role?.label,
-            type: widget?.type,
-            isRequired
-          });
-        }
-      }
-      setHeaders([...emailHeaders, ...widgetHeaders]);
-      setForms((prev) => [...prev, { Id: 1, fields: users }]);
-      const signer = props.item?.Signers?.filter((x) => x?.objectId);
-      setSigners(signer);
-    }
-  };
-
-  useEffect(() => {
-    signatureExist();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const checkSignatureAndRoles = (placeholders = []) => {
-    const filtered = placeholders.filter((x) => x?.Role !== "prefill");
-
-    const isSignExist = filtered.every((p) =>
-      p?.placeHolder?.some((h) => h?.pos?.some((p) => p?.type === "signature"))
-    );
-
-    setIsSignatureExist(isSignExist);
-    setIsVacantRoles(placeholders.some((x) => !x.signerObjId));
-  };
-
-  //function to check at least one signature field exist
-  const signatureExist = async () => {
-    setIsLoader(true);
-    await initializeWidgetsWithValues();
-      checkSignatureAndRoles(props?.Placeholders);
-      setIsLoader(false);
-  };
-
-  const handleInputChange = (formIndex, signer, role) => {
-    const newForms = [...forms];
-    const email = signer?.Email ? signer?.Email : signer || "";
-    const fieldId = newForms[formIndex].fields.findIndex(
-      (f) => f.label === role
-    );
-    newForms[formIndex].fields[fieldId].email = normalizeKey(email);
-    newForms[formIndex].fields[fieldId].signer = signer?.objectId ? signer : "";
-    setForms(newForms);
-  };
-
-  const handleWidgetDetails = (
-    value = "",
-    formIndex,
-    RoleIndex = 0,
-    widgetIndex
-  ) => {
-    const newForms = [...forms];
-    newForms[formIndex].fields[RoleIndex].widgets[widgetIndex].response = value;
-    setForms(newForms);
-  };
-
-
-  function validateEmails(data) {
-    for (const item of data) {
-      let email = "";
-      const filterFields = item.fields.filter((p) => p.label !== "prefill");
-      for (const field of filterFields) {
-        if (!emailRegex.test(field.email)) {
-          alert(t("invalid-email-found", { email: field.email }));
-          return false;
-        } else if (email === field.email || emails?.includes(field.email)) {
-          alert(t("duplicate-email-found", { email: field.email }));
-          return false;
-        } else {
-          email = field.email;
-        }
-      }
-    }
-    return true;
-  }
-
-  // `updateWidgetValues` will update responses for all widget types
-  const updateWidgetValues = (widgetValues = [], placeholders = []) => {
-    if (!widgetValues?.length) return placeholders;
-    const responseByName = new Map(
-      widgetValues
-        .map((w) => [w?.options?.name, w?.response])
-        .filter(([name]) => !!name)
-    );
-
-    return placeholders.map((ph) => {
-      const updatedPages = (ph?.placeHolder ?? []).map((page) => {
-        const updatedPos = (page?.pos ?? []).map((widgetDetails) => {
-          const name = widgetDetails?.options?.name;
-          if (!name || !responseByName.has(name)) return widgetDetails;
-
-          const newResponse = responseByName.get(name);
-
-          return {
-            ...widgetDetails,
-            options: {
-              ...widgetDetails.options,
-              // update response; if you DON'T want undefined to overwrite, keep the ?? fallback
-              response:
-                newResponse ??
-                widgetDetails.options?.response ??
-                widgetDetails.options?.defaultValue
-            }
-          };
-        });
-
-        return { ...page, pos: updatedPos };
-      });
-
-      return { ...ph, placeHolder: updatedPages };
-    });
-  };
-
-  // `removeWidgetValues` will clear out responses for draw/image/signature/stamp/initials widgets
-  const removeWidgetValues = (widgetValues = [], placeholders = []) => {
-    if (!widgetValues?.length) return placeholders;
-    return placeholders.map((ph) => {
-      const updatedPages = (ph?.placeHolder ?? []).map((page) => {
-        const updatedPos = (page?.pos ?? []).map((widgetDetails) => {
-          const isImageType = ALL_EXCLUDED_TYPES.has(widgetDetails?.type);
-          return {
-            ...widgetDetails,
-            options: {
-              ...widgetDetails.options,
-              // update response; if you DON'T want undefined to overwrite, keep the ?? fallback
-              response: isImageType ? "" : widgetDetails.options?.response,
-              defaultValue: isImageType
-                ? ""
-                : widgetDetails.options?.defaultValue
-            }
-          };
-        });
-
-        return { ...page, pos: updatedPos };
-      });
-
-      return { ...ph, placeHolder: updatedPages };
-    });
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-      dispatch(setBulkLoader(true));
-      if (!forms.length) {
-        alert(t("bulk-send-no-records"));
-        dispatch(setBulkLoader(false));
-        return;
-      }
-      if (validateEmails(forms)) {
-        // Create a copy of Placeholders array from props.item
-        let Placeholders = [...props.Placeholders];
-        // Initialize an empty array to store updated documents
-        let Documents = [];
-        let error = "";
-        // Loop through each form
-        for (const form of forms) {
-          //checking if user enter email which already exist as a signer then add user in a signers array
-          let existSigner = [];
-          form.fields.map((data) => {
-            if (data.signer) {
-              existSigner.push(data.signer);
-            }
-          });
-          // Map through the copied Placeholders array to update email values
-          const updatedPlaceholders = Placeholders.map((placeholder) => {
-            // Find the field in the current form that matches the placeholder Id
-            const field = form.fields.find(
-              (element) => parseInt(element.fieldId) === placeholder.Id
-            );
-            // If a matching field is found, update the email value in the placeholder
-            const signer = field?.signer?.objectId ? field.signer : "";
-            if (field) {
-              if (signer) {
-                return {
-                  ...placeholder,
-                  signerObjId: field?.signer?.objectId || "",
-                  signerPtr: signer
-                };
-              } else {
-                return {
-                  ...placeholder,
-                  email: normalizeKey(field.email),
-                  signerObjId: field?.signer?.objectId || "",
-                  signerPtr: signer
-                };
-              }
-            }
-            // If no matching field is found, keep the placeholder as is
-            return placeholder;
-          });
-          const widgetValues = form?.fields?.flatMap((f) => f.widgets);
-          const updateWidgetPlaceholder = updateWidgetValues(
-            widgetValues,
-            updatedPlaceholders
-          );
-          const url = props.item?.URL || props.item?.SignedUrl;
-          let signedUrl = await getSignedUrl(
-            url,
-            "", //docId
-            props.item.objectId, // templateId
-          );
-          const prefillField = form?.fields?.find((f) => f.label === "prefill");
-          const prefills = prefillField?.widgets ?? [];
-          if (prefills?.length > 0) {
-            const prefillDetails = updateWidgetPlaceholder?.find(
-              (x) => x.Role === "prefill"
-            );
-            const pdfArrayBuffer = await convertPdfArrayBuffer(signedUrl);
-            if (pdfArrayBuffer === "Error") {
-              error = t("something-went-wrong-mssg");
-              dispatch(setBulkLoader(false));
-              break;
-            }
-            signedUrl = await handleEmbedPrefillToDoc(
-              prefillDetails,
-              1, // scale
-              pdfArrayBuffer,
-              [], // prefillImg,
-              props.item?.ExtUserPtr?.UserId?.objectId // userId
-            );
-            if (signedUrl?.error) {
-              error = signedUrl.error.includes("not compatible")
-                ? t("pdf-uncompatible", { appName: appName })
-                : signedUrl?.error;
-              dispatch(setBulkLoader(false));
-              break;
-            }
-          }
-          const placeholders = removeWidgetValues(
-            widgetValues,
-            updateWidgetPlaceholder
-          );
-          if (!signedUrl) {
-            error = t("something-went-wrong-mssg");
-            dispatch(setBulkLoader(false));
-            break;
-          }
-          // Push a new document object with updated Placeholders into the Documents array
-          if (existSigner?.length > 0) {
-            Documents.push({
-              ...props.item,
-              URL: signedUrl,
-              Placeholders: placeholders,
-              Signers: signers ? [...signers, ...existSigner] : [...existSigner]
-            });
-          } else {
-            Documents.push({
-              ...props.item,
-              URL: signedUrl,
-              Placeholders: placeholders,
-              SignatureType: props.signatureType,
-              Signers: signers
-            });
-          }
-        }
-        if (error) {
-          alert(error);
-        } else {
-          await batchQuery(Documents);
-        }
-      } else {
-        dispatch(setBulkLoader(false));
-      }
-  };
-
-  const batchQuery = async (Documents) => {
-    const functionsUrl = `${localStorage.getItem("baseUrl")}functions/batchdocuments`;
-    const headers = {
-      ...tokenHeader,
-    };
-    const params = { Documents: JSON.stringify(Documents) };
-    try {
-      const res = await axios.post(functionsUrl, params, { headers: headers });
-      if (res.data && res.data.result) {
-        props.handleClose("success", Documents?.length);
-      }
-    } catch (err) {
-      const message =
-        err?.response?.data?.error || err?.message || "something went wrong.";
-      console.error("Error sending documents:", message);
-        props.handleClose("error", 0, message);
-    } finally {
-      dispatch(setBulkLoader(false));
-    }
-  };
-
-
-  if (isLoader) {
-    return (
-      <div className="w-full h-[100px] flex justify-center items-center z-[999]">
-        <Loader />
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative">
-      {/* {isBulkLoader && (
-        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
-          <Loader />
-        </div>
-      )} */}
-      {props.Placeholders?.length > 0 ? (
-        isSignatureExist ? (
-          isVacantRoles ? (
-            <>
-              <form onSubmit={handleSubmit}>
-                <div className="min-h-max max-h-[250px] overflow-auto">
-                  {
-                      forms?.length > 0 && (
-                        <div className="mx-4">
-                          <table className="op-table border-collapse w-full">
-                            <thead className="text-[13px] text-center">
-                              <tr className="border-y-[1px]">
-                                {/* Roles + widgets */}
-                                {headers?.map((header) => (
-                                  <th
-                                    key={header.label}
-                                    className={`${requiredAsteriskCls(header?.isRequired)} p-2`}
-                                  >
-                                    {header.label}
-                                  </th>
-                                ))}
-                                {forms?.length > 1 && (
-                                  <th className="p-2">{t("action")}</th>
-                                )}
-                              </tr>
-                            </thead>
-                            <tbody className="text-[12px] text-base-content">
-                              {forms.map((form, formIndex) => {
-                                const fields = form?.fields ?? [];
-                                const emailFields = fields.filter(
-                                  (f) => f.label !== "prefill"
-                                );
-                                const widgets = fields.flatMap(
-                                  (f, fieldIndex) =>
-                                    (f.widgets ?? []).map(
-                                      (widget, widgetIndex) => ({
-                                        widget,
-                                        fieldIndex, // keep the fieldIndex that produced this widget
-                                        widgetIndex
-                                      })
-                                    )
-                                );
-
-                                return (
-                                  <tr key={form.Id}>
-                                    {/* Email cell (label + SuggestionInput) */}
-                                    {emailFields?.map((field, fieldIndex) => (
-                                      <td key={field.fieldId} className="p-2">
-                                        <div className="flex flex-col min-w-max">
-                                          <SuggestionInput
-                                            required
-                                            type="email"
-                                            value={field.email ?? ""}
-                                            index={fieldIndex}
-                                            onChange={(signer) =>
-                                              handleInputChange(
-                                                formIndex,
-                                                signer,
-                                                field.label
-                                              )
-                                            }
-                                          />
-                                        </div>
-                                      </td>
-                                    ))}
-
-                                    {widgets.map(
-                                      ({ widget, fieldIndex, widgetIndex }) => (
-                                        <td key={widget.key} className="p-2">
-                                          <RenderWidgets
-                                            widget={widget}
-                                            formIndex={formIndex}
-                                            prefillIndex={widgetIndex}
-                                            handleWidgetDetails={(value) =>
-                                              handleWidgetDetails(
-                                                value,
-                                                formIndex,
-                                                fieldIndex,
-                                                widgetIndex
-                                              )
-                                            }
-                                          />
-                                        </td>
-                                      )
-                                    )}
-                                  </tr>
-                                );
-                              })}
-                            </tbody>
-                          </table>
-                        </div>
-                      )
-                  }
-                </div>
-                <div className="flex flex-row flex-wrap pb-3 pt-2 px-3 gap-3 justify-center">
-                  <button
-                    type="submit"
-                    className="op-btn op-btn-accent w-[150px] focus:outline-none"
-                  >
-                    <i className="fa-light fa-paper-plane"></i>
-                    <span>{t("send")}</span>
-                  </button>
-                </div>
-              </form>
-            </>
-          ) : (
-            <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-              {t("quick-send-alert-1")}
-            </div>
-          )
-        ) : (
-          <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-            {t("quick-send-alert-2")}
-          </div>
-        )
-      ) : (
-        <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-          {t("quick-send-alert-3")}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default BulkSendUi;
@@ -1,582 +0,0 @@
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import DatePicker from "react-datepicker";
-import SignatureCanvas from "react-signature-canvas";
-import { useTranslation } from "react-i18next";
-import moment from "moment";
-import {
-  changeDateToMomentFormat,
-  compressedFileSize,
-  getMonth,
-  getYear,
-  months,
-  radioButtonWidget,
-  textInputWidget,
-  textWidget,
-  years
-} from "../../../constant/Utils";
-import PenColorComponent from "../../pdf/tab/PenColorComponent";
-import { getDatePickerDate, toHtmlPattern } from "../../../utils";
-import CellsInput from "../../shared/fields/CellsInput";
-import { emailRegex } from "../../../constant/const";
-
-const inputOpt = new Set(["text", "email", "number"]);
-const PREFILL_PREFIX = "prefill::";
-
-const inputTypes = {
-  email: emailRegex,
-  number: /^[0-9\s]*$/,
-  ssn: /^(?!000|666|9\d{2})\d{3}-(?!00)\d{2}-(?!0000)\d{4}$/
-};
-const inputValidation = (pattern, type) => {
-  if (pattern) return pattern;
-  return inputTypes[type] || "";
-};
-const canavasTheme = `opensigncss:bg-white opensigndark:bg-[#121212] opensigndark:border-[#f6f3f4]/20 opensigncss:border-gray-300 opensigndark:hover:border-white opensigncss:hover:border-black border-[1px]`;
-const DateWidget = ({ widget, isRequired, onChange }) => {
-  const format = widget?.options?.validation?.format || "MM/dd/yyyy";
-
-  const PrefillDateInput = forwardRef(({ value, onClick }, ref) => (
-    <div
-      style={{ fontFamily: "Arial, sans-serif" }}
-      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full"
-      onClick={onClick}
-      ref={ref}
-    >
-      {value ? value : format}
-      <i className="fa-light fa-calendar ml-[5px]"></i>
-    </div>
-  ));
-  PrefillDateInput.displayName = "PrefillDateInput";
-
-  const handleDate = (widget) => {
-    // The getDatePickerDate function retrieves the date in the correct format supported by the DatePicker.
-    try {
-      return getDatePickerDate(widget?.response, format);
-    } catch (err) {
-      console.error("handleDate error ", err);
-      return;
-    }
-  };
-
-  //function to set date with required date format onchange date
-  const handleOnDateChange = (date) => {
-    let updateDate = date;
-    let newDate;
-    const isSpecialDateFormat =
-      format && ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"].includes(format);
-    if (isSpecialDateFormat) {
-      newDate = moment(updateDate).format(changeDateToMomentFormat(format));
-    } else {
-      //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
-      newDate = new Date(updateDate);
-      newDate = moment(newDate.getTime()).format(
-        changeDateToMomentFormat(format)
-      );
-    }
-    onChange(newDate);
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="min-w-max">
-        <DatePicker
-          portalId="datepicker-portal-root"
-          id={`widget-${widget?.options?.name}-${widget.key}`}
-          renderCustomHeader={({ date, changeYear, changeMonth }) => (
-            <div className="flex justify-start ml-2">
-              <select
-                className="bg-transparent outline-none"
-                value={months[getMonth(date)]}
-                onChange={({ target: { value } }) =>
-                  changeMonth(months.indexOf(value))
-                }
-              >
-                {months.map((option) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </select>
-              <select
-                className="bg-transparent outline-none"
-                value={getYear(date)}
-                onChange={({ target: { value } }) => changeYear(value)}
-              >
-                {years.map((option) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-          closeOnScroll={true}
-          selected={handleDate(widget)}
-          onChange={(date) => handleOnDateChange(date, widget)}
-          customInput={<PrefillDateInput />}
-          dateFormat={widget?.options?.validation?.format || "MM/dd/yyyy"}
-          required={isRequired}
-        />
-      </div>
-    </div>
-  );
-};
-const TextWidget = ({ widget, isRequired, onChange }) => {
-  const { t } = useTranslation();
-  const [value, setValue] = useState([]);
-  const inputType = widget?.options?.validation?.type || "";
-  const serverRegex = widget?.options?.validation?.pattern;
-  const isPredfineType = inputType ? inputOpt?.has(inputType) : "";
-  const regExpression = inputValidation(serverRegex, inputType);
-  const pattern = useMemo(() => toHtmlPattern(regExpression), [regExpression]);
-
-  useEffect(() => {
-    const response =
-      widget?.options?.response ?? widget?.options?.defaultValue ?? "";
-    const isNumber = inputType === "number" && response;
-    setValue(isNumber ? Number(response) : response);
-  }, []);
-  const handleInputChange = (e) => {
-    const text = e.target.value || "";
-    setValue(text);
-    onChange(text);
-  };
-  return (
-    <div className="flex flex-col">
-      <div className="min-w-max">
-        <input
-          type={isPredfineType ? inputType : "text"}
-          id={`widget-${widget?.options?.name}-${widget.key}`}
-          value={value}
-          placeholder={
-            widget?.options?.hint ||
-            t("enter-value", { value: widget?.options?.name })
-          }
-          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-          onChange={(e) => handleInputChange(e)}
-          pattern={pattern || undefined} // if no pattern, browser won't do pattern validation
-          onInvalid={(e) => {
-            const el = e.currentTarget;
-            // ✅ Only override message if pattern exists AND the error is patternMismatch
-            if (pattern && el.validity.patternMismatch) {
-              el.setCustomValidity(t("validation-alert-1"));
-            } else {
-              el.setCustomValidity("");
-            }
-          }}
-          onInput={(e) => {
-            e.currentTarget.setCustomValidity("");
-          }}
-          required={isRequired}
-        />
-      </div>
-    </div>
-  );
-};
-const CheckboxWidget = ({ widget, isRequired, onChange }) => {
-  const { t } = useTranslation();
-  const [selectedCheckbox, setSelectedCheckbox] = useState([]);
-
-  useEffect(() => {
-    setSelectedCheckbox(
-      widget?.options?.response ?? widget?.options?.defaultValue ?? []
-    );
-  }, []);
-
-  const handleCheckboxValue = (isChecked, ind) => {
-    const prevArr = Array.isArray(selectedCheckbox) ? selectedCheckbox : [];
-
-    const updateResponse = isChecked
-      ? prevArr.includes(ind)
-        ? prevArr
-        : [...prevArr, ind] // add once
-      : prevArr.filter((v) => v !== ind); // remove
-
-    setSelectedCheckbox(updateResponse);
-    onChange(updateResponse);
-  };
-  const noneSelected = selectedCheckbox?.length === 0;
-  return (
-    <div className="flex flex-col">
-      <div className="flex flex-col gap-y-1 min-w-max">
-        {widget.options?.values?.map((value, ind) => (
-          <div
-            key={ind}
-            className="select-none-cls flex items-center text-center gap-0.5"
-          >
-            <input
-              id={`checkbox-${widget.key + ind}`}
-              className="mt-[2px] op-checkbox op-checkbox-xs"
-              type="checkbox"
-              checked={selectedCheckbox.includes(ind)}
-              required={isRequired && noneSelected && ind === 0} // ✅ key line
-              onInvalid={(e) =>
-                e.target.setCustomValidity(t("select-at-least-option"))
-              }
-              onChange={(e) => {
-                e.target.setCustomValidity(""); // ✅ clear message as soon as user changes
-                handleCheckboxValue(e.target.checked, ind);
-              }}
-            />
-            <label
-              htmlFor={`checkbox-${widget.key + ind}`}
-              className="text-xs mb-0 text-center ml-[3px] cursor-pointer"
-            >
-              {value}
-            </label>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-const DropdownWidget = ({ widget, isRequired, onChange }) => {
-  const { t } = useTranslation();
-  const [selected, setSelected] = useState("");
-
-  useEffect(() => {
-    setSelected(
-      widget?.options?.response ?? widget?.options?.defaultValue ?? ""
-    );
-  }, []);
-
-  const handleDropdownChange = (value) => {
-    setSelected(value);
-    onChange(value);
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="min-w-max">
-        <select
-          className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-base-content w-full"
-          id={`widget-${widget?.options?.name}-${widget?.key}`}
-          value={selected}
-          onChange={(e) => handleDropdownChange(e.target.value)}
-          required={isRequired}
-        >
-          {/* Default/Title option */}
-          <option value="" disabled hidden>
-            {t("choose-one")}
-          </option>
-          {widget?.options?.values?.map((option, ind) => (
-            <option key={ind} value={option}>
-              {option}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-};
-const RadioButtonWidget = ({ widget, isRequired, onChange, formIndex }) => {
-  const [selected, setSelected] = useState("");
-
-  useEffect(() => {
-    setSelected(
-      widget?.options?.response || widget?.options?.defaultValue || ""
-    );
-  }, []);
-
-  const handleRadioChange = (value) => {
-    setSelected(value);
-    onChange(value);
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="flex flex-col gap-y-1 min-w-max">
-        {widget.options?.values?.map((data, ind) => (
-          <div
-            key={ind}
-            className="select-none-cls flex items-center text-center gap-0.5"
-          >
-            <input
-              id={`radio-${widget.key + ind}`}
-              className="mt-[2px] op-radio op-radio-xs"
-              name={`radio-group-${widget.key}-${formIndex}`} // ✅ same name => browser treats all radios as ONE group
-              type="radio"
-              required={isRequired && ind === 0} // ✅ set required ONCE (on first radio) to make the whole group mandatory
-              checked={selected === data}
-              onChange={() => handleRadioChange(data)}
-            />
-            <label
-              htmlFor={`radio-${widget.key + ind}`}
-              className="text-xs mb-0 ml-[2px] cursor-pointer"
-            >
-              {data}
-            </label>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-const ImageWidget = ({ widget, isRequired, onChange }) => {
-  const { t } = useTranslation();
-  const imageRef = useRef(null);
-  const [img, setImg] = useState({ src: "", imgType: "" });
-  const [defaultImg, setDefaultImg] = useState({ src: "", imgType: "" });
-
-  useEffect(() => {
-    if (widget?.response) {
-      setDefaultImg({ src: widget?.response, imgType: "" });
-    }
-  }, []);
-
-  const onImageChange = (e) => {
-    if (e.target.files && e.target.files?.[0]) {
-      const file = e.target.files?.[0];
-      compressedFileSize(file, ({ src, imgType }) => {
-        onChange(src);
-        setImg({ src, imgType });
-      });
-    }
-  };
-  const handleClearImage = () => {
-    setDefaultImg({ src: "", imgType: "" });
-    setImg({ src: "", imgType: "" });
-    onChange("");
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="flex flex-col prefillCanvas">
-        {defaultImg?.src || img?.src ? (
-          <>
-            <div
-              className={`cursor-pointer rounded-box ${canavasTheme} flex flex-col w-full h-full justify-center items-center`}
-            >
-              <img
-                alt={`image_${widget?.options?.name}`}
-                src={img.src || defaultImg?.src}
-                draggable="false"
-                className="object-contain h-full w-full aspect-[5/2]"
-              />
-            </div>
-            <span
-              onClick={handleClearImage}
-              className="flex justify-start text-blue-500 underline cursor-pointer ml-1"
-            >
-              {t("clear")}
-            </span>
-          </>
-        ) : (
-          <div
-            className={`cursor-pointer rounded-box ${canavasTheme} overflow-hidden w-full h-full aspect-[5/2] flex flex-col justify-center items-center`}
-            onClick={() => imageRef.current?.click()}
-          >
-            <i className="fa-light text-base-content fa-cloud-upload-alt text-[25px]"></i>
-            <div className="text-[10px] text-base-content">{t("upload")}</div>
-            <input
-              type="file"
-              onChange={(e) => onImageChange?.(e, widget)}
-              className="filetype w-[1px] h-[1px] opacity-0"
-              accept="image/png,image/jpeg"
-              ref={imageRef} // Assign ref dynamically
-              required={isRequired}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-const DrawWidget = ({ widget, isRequired, onChange }) => {
-  const { t } = useTranslation();
-  const canvasRef = useRef(null);
-  const sigRequiredRef = useRef(null);
-  const [hasDraw, setHasDraw] = useState("");
-  const [penColor, setPenColor] = useState("blue");
-  const [image, setImage] = useState("");
-
-  useEffect(() => {
-    if (widget?.response) {
-      setImage(widget?.response);
-      setHasDraw("signed");
-    }
-  }, []);
-
-  const handleSignatureChange = () => {
-    const draw = canvasRef.current?.isEmpty?.() ? "" : "signed";
-    setHasDraw(draw);
-    onChange(canvasRef.current.toDataURL());
-
-    // clear custom error once user signs
-    sigRequiredRef.current?.setCustomValidity("");
-  };
-
-  const handleClear = () => {
-    setImage("");
-    if (canvasRef?.current) {
-      canvasRef.current.clear();
-      onChange("");
-      setHasDraw("");
-      // clear custom error once user signs
-      sigRequiredRef.current?.setCustomValidity("");
-    }
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="relative">
-        {image ? (
-          <div className={`prefillCanvas ${canavasTheme} rounded-[10px]`}>
-            <img
-              alt={`draw_${widget?.options?.name}`}
-              src={image}
-              className="prefillCanvas object-contain"
-            />
-          </div>
-        ) : (
-          <SignatureCanvas
-            ref={canvasRef}
-            penColor={penColor}
-            canvasProps={{
-              className: `prefillCanvas ${canavasTheme} rounded-[10px]`
-            }}
-            onEnd={() => handleSignatureChange()}
-            dotSize={1}
-          />
-        )}
-        {/* ✅ Native form validation hook */}
-        <input
-          ref={sigRequiredRef}
-          type="text"
-          value={hasDraw}
-          required={isRequired}
-          tabIndex={-1}
-          onInvalid={(e) => e.target.setCustomValidity(t("draw-required"))}
-          onChange={() => {}}
-          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 w-[1px] h-[1px] pointer-events-none"
-        />
-      </div>
-      <div className="flex flex-row justify-between mt-[8px] w-[200px]">
-        <PenColorComponent
-          penColor={penColor}
-          setPenColor={setPenColor}
-          hideLabel
-          penSize="sm"
-        />
-        <span
-          onClick={handleClear}
-          className="flex justify-start text-blue-500 underline cursor-pointer"
-        >
-          {t("clear")}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-const CellsWidget = ({ widget, isRequired, onChange }) => {
-  const { t } = useTranslation();
-  const count = widget?.options?.cellCount || 1;
-  const [word, setWord] = useState("");
-  const inputType = widget?.options?.validation?.type || "";
-  const serverRegex = widget?.options?.validation?.pattern;
-  const regExpression = inputValidation(serverRegex, inputType);
-  const pattern = useMemo(() => toHtmlPattern(regExpression), [regExpression]);
-
-  useEffect(() => {
-    const response =
-      widget?.options?.response ?? widget?.options?.defaultValue ?? "";
-    const isNumber = inputType === "number" && response;
-    setWord(isNumber ? Number(response) : response);
-  }, []);
-
-  const handleChange = (words) => {
-    const value = words;
-    setWord(value);
-    onChange(value);
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="relative">
-        <CellsInput
-          hint={
-            widget?.options?.hint ||
-            t("enter-value", { value: widget?.options?.name })
-          }
-          count={count}
-          value={word}
-          onChange={handleChange}
-          only="all"
-          autoFocus
-        />
-        <input
-          id={`widget-${widget?.options?.name}-${widget.key}`}
-          value={word}
-          required={isRequired}
-          tabIndex={-1}
-          onChange={() => {}}
-          pattern={pattern || undefined} // if no pattern, browser won't do pattern validation
-          onInvalid={(e) => {
-            const el = e.currentTarget;
-            // ✅ Only override message if pattern exists AND the error is patternMismatch
-            if (pattern && el.validity.patternMismatch) {
-              el.setCustomValidity(t("validation-alert-1"));
-            } else {
-              el.setCustomValidity("");
-            }
-          }}
-          onInput={(e) => {
-            e.currentTarget.setCustomValidity("");
-          }}
-          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 w-[1px] h-[1px] pointer-events-none"
-        />
-      </div>
-    </div>
-  );
-};
-
-const RenderWidgets = ({
-  widget,
-  formIndex,
-  prefillIndex,
-  handleWidgetDetails
-}) => {
-  const label = widget?.label?.toLowerCase() ?? "";
-  const isPrefill = label.includes(PREFILL_PREFIX);
-  const commonProps = {
-    widget,
-    isRequired: widget.options?.status === "required" && isPrefill,
-    formIndex
-  };
-
-  const onChange = (value) => {
-    handleWidgetDetails(value, formIndex, prefillIndex);
-  };
-
-  switch (widget.type) {
-    case "date":
-      return <DateWidget {...commonProps} onChange={onChange} />;
-    case textWidget:
-    case textInputWidget:
-    case "name":
-    case "email":
-    case "company":
-    case "job title":
-    case "number":
-      return <TextWidget {...commonProps} onChange={onChange} />;
-    case "checkbox":
-      return <CheckboxWidget {...commonProps} onChange={onChange} />;
-    case radioButtonWidget:
-      return <RadioButtonWidget {...commonProps} onChange={onChange} />;
-    case "dropdown":
-      return <DropdownWidget {...commonProps} onChange={onChange} />;
-    case "image":
-    case "stamp":
-      return <ImageWidget {...commonProps} onChange={onChange} />;
-    case "initials":
-    case "draw":
-      return <DrawWidget {...commonProps} onChange={onChange} />;
-    case "cells":
-      return <CellsWidget {...commonProps} onChange={onChange} />;
-    default:
-      return null;
-  }
-};
-
-export default RenderWidgets;
@@ -0,0 +1,47 @@
+import React from "react";
+import "../../styles/loader.css";
+import { useNavigate } from "react-router-dom";
+import { openInNewTab } from "../../constant/Utils";
+
+const DashboardButton = (props) => {
+  const navigate = useNavigate();
+
+  function openReport() {
+    if (props.Data && props.Data.Redirect_type) {
+      const Redirect_type = props.Data.Redirect_type;
+      const id = props.Data.Redirect_id;
+      if (Redirect_type === "Form") {
+        navigate(`/form/${id}`);
+      } else if (Redirect_type === "Report") {
+        navigate(`/report/${id}`);
+      } else if (Redirect_type === "Url") {
+        openInNewTab(id);
+      }
+    }
+  }
+  return (
+    <div
+      onClick={() => openReport()}
+      className={`${
+        props.Data && props.Data.Redirect_type
+          ? "cursor-pointer"
+          : "cursor-default"
+      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
+    >
+      <div className="flex flex-row items-center">
+        <span className="rounded-full bg-base-content bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
+          <i
+            className={`${
+              props.Icon ? props.Icon : "fa fa-solid fa-info"
+            } text-[25px] lg:text-[30px]`}
+          ></i>
+        </span>
+        <div className="op-card-title text-lg ml-3 text-base-content">
+          {props.Label}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardButton;
@@ -1,60 +0,0 @@
-import React from "react";
-import { useNavigate } from "react-router";
-import { openInNewTab } from "../../constant/Utils";
-import { useTranslation } from "react-i18next";
-
-const DashboardButton = (props) => {
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-
-  function openReport() {
-    if (props.Data && props.Data.Redirect_type) {
-      const Redirect_type = props.Data.Redirect_type;
-      const id = props.Data.Redirect_id;
-      if (Redirect_type === "Form") {
-        navigate(`/form/${id}`);
-      } else if (Redirect_type === "Report") {
-        navigate(`/report/${id}`);
-      } else if (Redirect_type === "Url") {
-        openInNewTab(id);
-      }
-    }
-  }
-  return (
-    <div
-      onClick={() => openReport()}
-      className={`${
-        props.Data && props.Data.Redirect_type
-          ? "cursor-pointer"
-          : "cursor-default"
-      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
-    >
-      <div className="flex flex-row items-center text-base-content">
-        <div className="flex flex-row items-center">
-          <span className="rounded-full bg-base-content bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
-            <i
-              className={`${
-                props.Icon ? props.Icon : "fa-light fa-info"
-              } text-[25px] lg:text-[30px]`}
-            ></i>
-          </span>
-        </div>
-        <div className="text-lg ml-3">
-          {t(`sidebar.${props.Label}`)}
-          {props.Label === "Sign yourself" && (
-            <div className="text-gray-500 text-xs mt-1">
-              {t("signyour-self-button")}
-            </div>
-          )}
-          {props.Label === "Request signatures" && (
-            <div className="text-gray-500 text-xs mt-1">
-              {t("requestsign-button")}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardButton;
@@ -1,21 +1,19 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import axios from "axios";
 import Parse from "parse";
 import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
-import { useNavigate } from "react-router";
+import "../../styles/loader.css";
+import { useNavigate } from "react-router-dom";
 import Tooltip from "../../primitives/Tooltip";
-import { useTranslation } from "react-i18next";
-import { withSessionValidation } from "../../utils";

 const DashboardCard = (props) => {
  const navigate = useNavigate();
-  const { t } = useTranslation();
  const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
  const [parseAppId] = useState(localStorage.getItem("parseAppId"));
  const [response, setresponse] = useState("");
  const [loading, setLoading] = useState(false);

-  const renderData = withSessionValidation(async () => {
+  const renderData = async () => {
    if (props.Data.queryType === "function") {
      setLoading(true);
      try {
@@ -26,12 +24,17 @@ const DashboardCard = (props) => {
          sessionToken: localStorage.getItem("accesstoken")
        };
        let body = {};
+        let currentUser;
+        let currentUser1 = Parse.User.current();
+        currentUser = currentUser1.id;
        let res;
        if (localStorage.getItem("Extand_Class")) {
          let data = JSON.parse(localStorage.getItem("Extand_Class"));
          res = data[0];
        } else {
-          res = await Parse.Cloud.run("getUserDetails");
+          res = await Parse.Cloud.run("getUserDetails", {
+            email: currentUser.get("email")
+          });
          if (res) res = res.toJSON();
        }
        if (res) {
@@ -92,7 +95,9 @@ const DashboardCard = (props) => {
            let data = JSON.parse(localStorage.getItem("Extand_Class"));
            resr = data[0];
          } else {
-            resr = await Parse.Cloud.run("getUserDetails");
+            resr = await Parse.Cloud.run("getUserDetails", {
+              email: currentUser.get("email")
+            });
            if (resr) resr = resr.toJSON();
          }

@@ -134,7 +139,7 @@ const DashboardCard = (props) => {
            skip: 0,
            limit: 200
          };
-          const url = `${parseBaseUrl}functions/getReport`;
+          const url = `${parseBaseUrl}/functions/getReport`;
          await axios
            .post(url, params, {
              headers: {
@@ -149,7 +154,7 @@ const DashboardCard = (props) => {
              );
              let arr = [];
              for (const obj of listData) {
-                const isSigner = obj.Signers?.some(
+                const isSigner = obj.Signers.some(
                  (item) => item.UserId.objectId === currentUser.id
                );
                if (isSigner) {
@@ -169,27 +174,31 @@ const DashboardCard = (props) => {
                }
              }
              setresponse(arr.length);
+              setLoading(false);
            });
        } else {
          await axios.get(url, { headers: headers }).then((res) => {
-            if (res?.data?.[props.Data.key]) {
-              setresponse(parseInt(res.data[props.Data.key]));
-            } else if (res?.data?.results?.length > 0) {
-              setresponse(res.data.results.length);
+            if (res.data.results.length > 0) {
+              setLoading(false);
+              if (props.Data.key !== "count") {
+                setresponse(res.data.results[0][props.Data.key]);
+              } else {
+                setresponse(res.data[props.Data.key]);
+              }
            } else {
              setresponse(0);
+              setLoading(false);
            }
          });
        }
      } catch (e) {
        console.error("Problem", e);
-      } finally {
        setLoading(false);
      }
    }
-  });
+  };

-  const filterRender = withSessionValidation(async () => {
+  const filterRender = async () => {
    if (props.FilterData && props.FilterData.queryType === "function") {
      setLoading(true);
      try {
@@ -210,12 +219,15 @@ const DashboardCard = (props) => {

        if (restr.includes("#")) {
          try {
+            const currentUser = Parse.User.current();
            let res;
            if (localStorage.getItem("Extand_Class")) {
              let data = JSON.parse(localStorage.getItem("Extand_Class"));
              res = data[0];
            } else {
-              let resr = await Parse.Cloud.run("getUserDetails");
+              let resr = await Parse.Cloud.run("getUserDetails", {
+                email: currentUser.get("email")
+              });
              if (res) res = resr.toJSON();
            }

@@ -250,14 +262,21 @@ const DashboardCard = (props) => {
              }
            }
            body = str;
-            const response = await axios.post(url, body, { headers: headers });
-            if (response.data.result.length > 0) {
-              setresponse(response.data.result[0][props.FilterData.key]);
-              setLoading(false);
-            } else {
-              setresponse("0");
-              setLoading(false);
-            }
+            await axios
+              .post(url, body, { headers: headers })
+              .then((response) => {
+                try {
+                  if (response.data.result.length > 0) {
+                    setresponse(response.data.result[0][props.FilterData.key]);
+                    setLoading(false);
+                  } else {
+                    setresponse("0");
+                    setLoading(false);
+                  }
+                } catch (error) {
+                  setLoading(false);
+                }
+              });
          } catch (error) {
            setLoading(false);
          }
@@ -267,7 +286,7 @@ const DashboardCard = (props) => {
        setLoading(false);
      }
    }
-  });
+  };

  const setFormat = (val) => {
    switch (props.Format) {
@@ -310,7 +329,6 @@ const DashboardCard = (props) => {
      }
    }
  }
-
  return (
    <div
      onClick={() => openReport()}
@@ -321,18 +339,15 @@ const DashboardCard = (props) => {
      }`}
    >
      <div className="flex items-center justify-start gap-5 text-white">
-        <span className="rounded-full bg-base-300 bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
+        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
          <i
            className={`${
-              props.Icon ? props.Icon : "fa-light fa-info"
+              props.Icon ? props.Icon : "fa fa-solid fa-info"
            } text-[25px] lg:text-[30px]`}
          ></i>
        </span>
-
        <div className="font-medium">
-          <div className="text-base lg:text-lg">
-            {t(`dashboard-card.${props.Label}`)}
-          </div>
+          <div className="text-base lg:text-lg"> {props.Label}</div>
          <div className="text-2xl font-light">
            {loading ? <div className="loader-01"></div> : setFormat(response)}
          </div>
@@ -342,7 +357,7 @@ const DashboardCard = (props) => {
        <Tooltip
          id={props.Label}
          iconColor={"white"}
-          message={t(`tour-mssg.${props.Label}`)}
+          message={props?.Data?.tourMessage}
        />
      </div>
    </div>
@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import ReportTable from "../../primitives/GetReportDisplay";
+import reportJson from "../../json/ReportJson";
+import axios from "axios";
+import Loader from "../../primitives/Loader";
+function DashboardReport(props) {
+  // console.log("props ", props)
+  const [List, setList] = useState([]);
+  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();
+  const docPerPage = 5;
+
+  useEffect(() => {
+    setReportName("");
+    getReportData(props.Record.reportId);
+
+    // Function returned from useEffect is called on unmount
+    return () => {
+      setIsLoader(true);
+      setList([]);
+      setIsNextRecord(false);
+      // Here it'll abort the fetch
+      abortController.abort();
+    };
+    // eslint-disable-next-line
+  }, [props.Record.reportId]);
+
+  // below useEffect call when isNextRecord state is true and fetch next record
+  useEffect(() => {
+    if (isNextRecord) {
+      getReportData(props.Record.reportId, List.length, 200);
+    }
+    // eslint-disable-next-line
+  }, [isNextRecord]);
+
+  const getReportData = async (id, skipUserRecord = 0, limit = 200) => {
+    setIsLoader(true);
+    const json = reportJson(id);
+    if (json) {
+      setActions(json.actions);
+      setReportName(json.reportName);
+      setHeading(json.heading);
+      const currentUser = Parse.User.current().id;
+
+      const headers = {
+        "Content-Type": "application/json",
+        "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+        sessiontoken: localStorage.getItem("accesstoken")
+      };
+      try {
+        const params = { reportId: id, skip: skipUserRecord, limit: limit };
+        const url = `${localStorage.getItem("baseUrl")}/functions/getReport`;
+        const res = await axios.post(url, params, {
+          headers: headers,
+          signal: abortController.signal // is used to cancel fetch query
+        });
+        if (id === "5Go51Q7T8r") {
+          const listData = res.data?.result.filter((x) => x.Signers.length > 0);
+          let arr = [];
+          for (const obj of listData) {
+            const isSigner = obj.Signers.some(
+              (item) => item.UserId.objectId === currentUser
+            );
+            if (isSigner) {
+              let isRecord;
+              if (obj?.AuditTrail && obj?.AuditTrail.length > 0) {
+                isRecord = obj?.AuditTrail.some(
+                  (item) =>
+                    item?.UserPtr?.UserId?.objectId === currentUser &&
+                    item.Activity === "Signed"
+                );
+              } else {
+                isRecord = false;
+              }
+              if (isRecord === false) {
+                arr.push(obj);
+              }
+            }
+          }
+          if (arr.length === docPerPage) {
+            setIsMoreDocs(true);
+          } else {
+            setIsMoreDocs(false);
+          }
+          setList((prevRecord) =>
+            prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
+          );
+        } else {
+          if (res.data.result.length === docPerPage) {
+            setIsMoreDocs(true);
+          } else {
+            setIsMoreDocs(false);
+          }
+          setIsNextRecord(false);
+          if (!res.data.result.error) {
+            setList((prevRecord) =>
+              prevRecord.length > 0
+                ? [...prevRecord, ...res.data.result]
+                : res.data.result
+            );
+          }
+        }
+        setIsLoader(false);
+      } catch (err) {
+        const isCancel = axios.isCancel(err);
+        if (!isCancel) {
+          console.log("err ", err);
+          setIsLoader(false);
+        }
+        setIsLoader(false);
+      }
+    } else {
+      setIsLoader(false);
+    }
+  };
+  return (
+    <>
+      {isLoader ? (
+        <div className="h-[250px] flex justify-center items-center">
+          <Loader />
+        </div>
+      ) : (
+        <>
+          {reportName ? (
+            <ReportTable
+              ReportName={reportName}
+              List={List}
+              setList={setList}
+              actions={actions}
+              heading={heading}
+              setIsNextRecord={setIsNextRecord}
+              isMoreDocs={isMoreDocs}
+              docPerPage={docPerPage}
+            />
+          ) : (
+            <div className="flex items-center justify-center h-[100px] w-full bg-white rounded">
+              <div className="text-center">
+                <p className="text-xl text-black">Report Not Found</p>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+
+export default DashboardReport;
@@ -1,229 +0,0 @@
-import { useEffect, useState, useRef } from "react";
-import Parse from "parse";
-import DocumentsReport from "../../reports/document/DocumentsReport";
-import reportJson from "../../json/ReportJson";
-import axios from "axios";
-import Loader from "../../primitives/Loader";
-import { useTranslation } from "react-i18next";
-import { withSessionValidation } from "../../utils";
-function DashboardReport(props) {
-  const { t } = useTranslation();
-  const [List, setList] = useState([]);
-  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();
-  const docPerPage = 5;
-  const [searchTerm, setSearchTerm] = useState("");
-  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
-  const [isSearchResult, setIsSearchResult] = useState(false);
-  const debounceTimer = useRef(null);
-
-  useEffect(() => {
-    setReportName("");
-    setSearchTerm("");
-    setMobileSearchOpen(false);
-    getReportData(props.Record.reportId, 0, 20, "");
-
-    // Function returned from useEffect is called on unmount
-    return () => {
-      setIsLoader(true);
-      setList([]);
-      setIsNextRecord(false);
-      // Here it'll abort the fetch
-      abortController.abort();
-    };
-    // eslint-disable-next-line
-  }, [props.Record.reportId]);
-
-  // below useEffect call when isNextRecord state is true and fetch next record
-  useEffect(() => {
-    if (isNextRecord) {
-      getReportData(props.Record.reportId, List.length, 20, searchTerm);
-    }
-    // eslint-disable-next-line
-  }, [isNextRecord]);
-
-  const handleSearchChange = withSessionValidation(async (e) => {
-    const term = e.target.value.toLowerCase();
-    setSearchTerm(term);
-    if (debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
-    }
-    debounceTimer.current = setTimeout(async () => {
-      try {
-        const headers = {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessiontoken: localStorage.getItem("accesstoken")
-        };
-        const url = `${localStorage.getItem("baseUrl")}functions/getReport`;
-        const res = await axios.post(
-          url,
-          {
-            reportId: props.Record.reportId,
-            searchTerm: term,
-            skip: 0,
-            limit: docPerPage
-          },
-          { headers }
-        );
-        const data = res.data?.result || [];
-        if (!data.error) {
-          setList(data);
-          setIsMoreDocs(data.length >= docPerPage);
-          setIsNextRecord(false);
-          setIsSearchResult(true);
-        }
-      } catch (err) {
-        console.error("Search error:", err);
-      }
-    }, 300);
-    setIsSearchResult(false);
-  });
-
-  const handleSearchPaste = (e) => {
-    setTimeout(() => {
-      handleSearchChange({ target: { value: e.target.value } });
-    }, 0);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-    };
-  }, []);
-
-  const getReportData = withSessionValidation(
-    async (id, skipUserRecord = 0, limit = 20, term = searchTerm) => {
-      setIsLoader(true);
-      const json = reportJson(id);
-      if (json) {
-        setActions(json.actions);
-        setReportName(json.reportName);
-        setHeading(json.heading);
-        const currentUser = Parse.User.current().id;
-
-        const headers = {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessiontoken: localStorage.getItem("accesstoken")
-        };
-        try {
-          const skipRecord = id === "5Go51Q7T8r" ? 0 : skipUserRecord;
-          const limitRecord = id === "5Go51Q7T8r" ? 200 : limit;
-          const params = { reportId: id, skip: skipRecord, limit: limitRecord };
-          if (term) {
-            params.searchTerm = term;
-          }
-          const url = `${localStorage.getItem("baseUrl")}functions/getReport`;
-          const res = await axios.post(url, params, {
-            headers: headers,
-            signal: abortController.signal // is used to cancel fetch query
-          });
-          if (id === "5Go51Q7T8r") {
-            const listData = res.data?.result.filter(
-              (x) => x.Signers.length > 0
-            );
-            let arr = [];
-            for (const obj of listData) {
-              const isSigner = obj.Signers?.some(
-                (item) => item.UserId.objectId === currentUser
-              );
-              if (isSigner) {
-                let isRecord;
-                if (obj?.AuditTrail && obj?.AuditTrail.length > 0) {
-                  isRecord = obj?.AuditTrail.some(
-                    (item) =>
-                      item?.UserPtr?.UserId?.objectId === currentUser &&
-                      item.Activity === "Signed"
-                  );
-                } else {
-                  isRecord = false;
-                }
-                if (isRecord === false) {
-                  arr.push(obj);
-                }
-              }
-            }
-            if (arr.length === docPerPage) {
-              setIsMoreDocs(true);
-            } else {
-              setIsMoreDocs(false);
-            }
-            setList((prevRecord) =>
-              prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
-            );
-          } else {
-            if (res.data.result.length >= docPerPage) {
-              setIsMoreDocs(true);
-            } else {
-              setIsMoreDocs(false);
-            }
-            setIsNextRecord(false);
-            if (!res.data.result.error) {
-              setList((prevRecord) =>
-                prevRecord.length > 0
-                  ? [...prevRecord, ...res.data.result]
-                  : res.data.result
-              );
-            }
-          }
-          setIsLoader(false);
-        } catch (err) {
-          const isCancel = axios.isCancel(err);
-          if (!isCancel) {
-            console.log("err ", err);
-            setIsLoader(false);
-          }
-          setIsLoader(false);
-        }
-      } else {
-        setIsLoader(false);
-      }
-    }
-  );
-  return (
-    <>
-      {isLoader ? (
-        <div className="h-[250px] flex justify-center items-center">
-          <Loader />
-        </div>
-      ) : (
-        <>
-          {reportName ? (
-            <DocumentsReport
-              ReportName={reportName}
-              List={List}
-              setList={setList}
-              actions={actions}
-              heading={heading}
-              setIsNextRecord={setIsNextRecord}
-              isMoreDocs={isMoreDocs}
-              docPerPage={docPerPage}
-              mobileSearchOpen={mobileSearchOpen}
-              setMobileSearchOpen={setMobileSearchOpen}
-              searchTerm={searchTerm}
-              handleSearchChange={handleSearchChange}
-              handleSearchPaste={handleSearchPaste}
-              isSearchResult={isSearchResult}
-            />
-          ) : (
-            <div className="flex items-center justify-center h-[100px] w-full bg-white rounded-box">
-              <div className="text-center text-xl text-base-content">
-                {t("report-not-found")}
-              </div>
-            </div>
-          )}
-        </>
-      )}
-    </>
-  );
-}
-
-export default DashboardReport;
@@ -1,26 +1,22 @@
-import { useState, useEffect, Suspense } from "react";
-import { lazyWithRetry } from "../../utils";
-import { useTranslation } from "react-i18next";
-const DashboardButton = lazyWithRetry(() => import("./DashboardButton"));
-const DashboardCard = lazyWithRetry(() => import("./DashboardCard"));
-const DashboardReport = lazyWithRetry(() => import("./DashboardReport"));
+import React, { Suspense, lazy } from "react";
+const DashboardButton = lazy(() => import("./DashboardButton"));
+const DashboardCard = lazy(() => import("./DashboardCard"));
+const DashboardReport = lazy(() => import("./DashboardReport"));
 const buttonList = [
  {
    label: "Sign yourself",
    redirectId: "sHAnZphf69",
    redirectType: "Form",
-    icon: "fa-light fa-pen-nib"
+    icon: "fas fa-pen-nib"
  },
  {
-    label: "Request signatures",
+    label: "Request signature",
    redirectId: "8mZzFxbG1z",
    redirectType: "Form",
-    icon: "fa-light fa-paper-plane"
+    icon: "fa-solid fa-paper-plane"
  }
 ];
 const GetDashboard = (props) => {
-  const { t } = useTranslation();
-
  const Button = ({ label, redirectId, redirectType, icon }) => (
    <DashboardButton
      Icon={icon}
@@ -35,13 +31,13 @@ const GetDashboard = (props) => {
          <div
            className={`${
              col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
-            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md`}
+            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
            data-tut={col.widget.data.tourSection}
          >
            <Suspense
              fallback={
                <div className="h-[150px] w-full flex justify-center items-center">
-                  {t("loading")}
+                  loading...
                </div>
              }
            >
@@ -60,9 +56,7 @@ const GetDashboard = (props) => {
          <div data-tut={col.widget.data.tourSection}>
            <Suspense fallback={<div>please wait</div>}>
              <div className="mb-3 md:mb-0">
-                <DashboardReport
-                  Record={col.widget}
-                />
+                <DashboardReport Record={col.widget} />
              </div>
            </Suspense>
          </div>
@@ -96,9 +90,7 @@ const GetDashboard = (props) => {
        return (
          <Suspense fallback={<div>please wait</div>}>
            <div className="mb-3 md:mb-0">
-              <DashboardReport
-                Record={col.widget}
-              />
+              <DashboardReport Record={col.widget} />
            </div>
          </Suspense>
        );
@@ -0,0 +1,595 @@
+import React, { useState, useEffect, useRef } from "react";
+import folder from "../../assets/images/folder.png";
+import "../../styles/opensigndrive.css";
+import pdfLogo from "../../assets/images/pdf3.png";
+import axios from "axios";
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import { saveAs } from "file-saver";
+import { useNavigate } from "react-router-dom";
+import Table from "react-bootstrap/Table";
+import * as HoverCard from "@radix-ui/react-hover-card";
+import ModalUi from "../../primitives/ModalUi";
+import FolderModal from "../shared/fields/FolderModal";
+
+function DriveBody(props) {
+  const [rename, setRename] = useState("");
+  const [renameValue, setRenameValue] = useState("");
+  const inputRef = useRef(null);
+  const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
+  const [selectDoc, setSelectDoc] = useState();
+  const [isDeleteDoc, setIsDeleteDoc] = useState(false);
+  const contextMenu = [
+    { type: "Download", icon: "fa-solid fa-arrow-down" },
+    { type: "Rename", icon: "fa-solid fa-font" },
+    { type: "Move", icon: "fa-solid fa-file-export" },
+    { type: "Delete", icon: "fa-solid fa-trash" }
+  ];
+  const navigate = useNavigate();
+
+  //to focus input box on press rename to change doc name
+  useEffect(() => {
+    if (rename && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current.focus();
+      }, 10);
+    }
+  }, [rename]);
+
+  //function to handle folder component
+  const handleOnclikFolder = (data) => {
+    const folderData = {
+      name: data.Name,
+      objectId: data.objectId
+    };
+    props.setFolderName((prev) => [...prev, folderData]);
+    props.setIsLoading({
+      isLoad: true,
+      message: "This might take some time"
+    });
+    props.setDocId(data.objectId);
+    props.setPdfData([]);
+    props.setSkip(0);
+  };
+  //function for change doc name and update doc name in  _document class
+  const handledRenameDoc = async (data) => {
+    setRename("");
+    const trimmedValue = renameValue.trim();
+    if (trimmedValue.length > 0) {
+      const updateName = {
+        Name: renameValue
+      };
+      const docId = data.objectId;
+      const docData = props.pdfData;
+      const updatedData = docData.map((item) => {
+        if (item.objectId === docId) {
+          // If the item's ID matches the target ID, update the name
+          return { ...item, Name: renameValue };
+        }
+        // If the item's ID doesn't match, keep it unchanged
+        return item;
+      });
+      props.setPdfData(updatedData);
+      props.sortingData(null, null, updatedData);
+      await axios
+        .put(
+          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+            "_appName"
+          )}_Document/${docId}`,
+          updateName,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+            }
+          }
+        )
+        .then(() => {
+          // const res = result.data;
+          // console.log("res", res);
+        })
+        .catch((err) => {
+          console.log("Err ", err);
+          props.setIsAlert({
+            isShow: true,
+            alertMessage: "something went wrong"
+          });
+        });
+    }
+  };
+
+  //function for navigate user to microapp-signature component
+  const checkPdfStatus = async (data) => {
+    const signerExist = data.Signers && data.Signers;
+    const isDecline = data.IsDeclined && data.IsDeclined;
+    const isPlaceholder = data.Placeholders && data.Placeholders;
+    const signedUrl = data.SignedUrl;
+    //checking if document has completed and request signature flow
+    if (data?.IsCompleted && signerExist?.length > 0) {
+      navigate(`/pdfRequestFiles/${data.objectId}`);
+    }
+    //checking if document has completed and signyour-self flow
+    else if (!signerExist && !isPlaceholder) {
+      navigate(`/signaturePdf/${data.objectId}`);
+    }
+    //checking if document has declined by someone
+    else if (isDecline) {
+      navigate(`/pdfRequestFiles/${data.objectId}`);
+      //checking draft type document
+    } else if (
+      signerExist?.length > 0 &&
+      isPlaceholder?.length > 0 &&
+      !signedUrl
+    ) {
+      navigate(`/placeHolderSign/${data.objectId}`);
+    }
+    //Inprogress document
+    else if (isPlaceholder?.length > 0 && signerExist?.length > 0) {
+      navigate(`/pdfRequestFiles/${data.objectId}`);
+    } //placeholder draft document
+    else if (
+      (signerExist?.length > 0 &&
+        (!isPlaceholder || isPlaceholder?.length === 0)) ||
+      ((!signerExist || signerExist?.length === 0) && isPlaceholder?.length > 0)
+    ) {
+      navigate(`/placeHolderSign/${data.objectId}`);
+    }
+  };
+
+  const handleMenuItemClick = (selectType, data) => {
+    switch (selectType) {
+      case "Download": {
+        const pdfName = data && data.Name;
+        const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
+        saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+        break;
+      }
+      case "Rename": {
+        setRenameValue(data.Name);
+        setRename(data.objectId);
+        break;
+      }
+      case "Delete": {
+        setIsDeleteDoc(true);
+        setSelectDoc(data);
+        break;
+      }
+      case "Move": {
+        handleMoveDocument(data);
+        break;
+      }
+      default:
+        null;
+    }
+  };
+  //function for delete document
+  const handleDeleteDocument = async (docData) => {
+    setIsDeleteDoc(false);
+    const docId = docData.objectId;
+    const data = {
+      IsArchive: true
+    };
+
+    await axios
+      .put(
+        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+          "_appName"
+        )}_Document/${docId}`,
+        data,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
+        }
+      )
+      .then((result) => {
+        const res = result.data;
+        if (res) {
+          const updatedData = props.pdfData.filter((x) => x.objectId !== docId);
+          props.setPdfData(updatedData);
+        }
+      })
+      .catch((err) => {
+        console.log("Err ", err);
+        props.setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
+      });
+  };
+  const handleMoveDocument = async (docData) => {
+    setIsOpenMoveModal(true);
+    setSelectDoc(docData);
+  };
+  //function for move document from one folder to another folder
+  const handleMoveFolder = async (selectFolderData) => {
+    const selecFolderId = selectDoc?.Folder?.objectId;
+    const moveFolderId = selectFolderData?.ObjectId;
+    let updateDocId = selectDoc?.objectId;
+    let updateData;
+    const checkExist = moveFolderId
+      ? selecFolderId === moveFolderId
+        ? true
+        : false
+      : selecFolderId
+        ? false
+        : true;
+    if (!checkExist) {
+      if (moveFolderId) {
+        updateData = {
+          Folder: {
+            __type: "Pointer",
+            className: `${localStorage.getItem("_appName")}_Document`,
+            objectId: moveFolderId
+          }
+        };
+      } else {
+        updateData = {
+          Folder: { __op: "Delete" }
+        };
+      }
+
+      await axios
+        .put(
+          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+            "_appName"
+          )}_Document/${updateDocId}`,
+          updateData,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+            }
+          }
+        )
+
+        .then((Listdata) => {
+          // console.log("Listdata ", Listdata);
+          const res = Listdata.data;
+          if (res) {
+            const updatedData = props.pdfData.filter(
+              (x) => x.objectId !== updateDocId
+            );
+            props.setPdfData(updatedData);
+          }
+        })
+        .catch((err) => {
+          console.log("err", err);
+        });
+
+      setIsOpenMoveModal(false);
+    } else {
+      alert("folder already exist!");
+      setIsOpenMoveModal(false);
+    }
+  };
+
+  const sanitizeFileName = (pdfName) => {
+    // Replace spaces with underscore
+    return pdfName.replace(/ /g, "_");
+  };
+
+  const handleEnterPress = (e, data) => {
+    if (e.key === "Enter") {
+      handledRenameDoc(data);
+    }
+  };
+
+  //component to handle type of document and render according to type
+  const handleFolderData = (data, ind, listType) => {
+    let createddate, status, isDecline, signerExist, isComplete;
+    if (data.Type !== "Folder") {
+      const expireDate = data.ExpiryDate && data.ExpiryDate.iso;
+      const createdDate = data.createdAt && data.createdAt;
+      createddate = new Date(createdDate).toLocaleDateString();
+      isComplete = data.IsCompleted && data.IsCompleted ? true : false;
+      isDecline = data.IsDeclined && data.IsDeclined;
+      signerExist = data.Signers && data.Signers;
+      const signedUrl = data.SignedUrl;
+
+      const expireUpdateDate = new Date(expireDate).getTime();
+      const currDate = new Date().getTime();
+      let isExpire = false;
+      if (currDate > expireUpdateDate) {
+        isExpire = true;
+      }
+
+      if (isComplete) {
+        status = "Completed";
+      } else if (isDecline) {
+        status = "Declined";
+      } else if (!signedUrl) {
+        status = "Draft";
+      } else if (isExpire) {
+        status = "Expired";
+      } else {
+        status = "In Progress";
+      }
+    }
+
+    const signersName = () => {
+      const getSignersName = signerExist.map((data) => data.Name);
+      const signerName = getSignersName.join(", ");
+
+      return (
+        <span className="statusSpan w-[90%] break-words">{signerName}</span>
+      );
+    };
+    return listType === "table" ? (
+      data.Type === "Folder" ? (
+        <tr onClick={() => handleOnclikFolder(data)}>
+          <td className="cursor-pointer flex items-center">
+            <i
+              className="fa fa-folder mr-[8px] text-[26px] text-[#f0ad26]"
+              aria-hidden="true"
+            ></i>
+            <span className="text-[12px] font-medium">{data.Name}</span>
+          </td>
+          <td>_</td>
+          <td>Folder</td>
+          <td>_</td>
+          <td>_</td>
+        </tr>
+      ) : (
+        <tr onClick={() => checkPdfStatus(data)}>
+          <td className="cursor-pointer flex items-center">
+            <i className="fa fa-file-pdf mr-[8px] text-[26px] text-[#ed4d0e]"></i>
+            <span className="text-[12px] font-medium">{data.Name}</span>
+          </td>
+          <td>{createddate}</td>
+          <td>Pdf</td>
+          <td>{status}</td>
+          <td>
+            <i
+              onClick={(e) => {
+                e.stopPropagation();
+                handleMenuItemClick("Download", data);
+              }}
+              className="fa fa-download mr-[8px] text-[#ed280e]"
+              aria-hidden="true"
+            ></i>
+          </td>
+        </tr>
+      )
+    ) : listType === "list" && data.Type === "Folder" ? (
+      <div key={ind} className="icon-container">
+        <ContextMenu.Root>
+          <ContextMenu.Trigger className="ContextMenuTrigger">
+            <div data-tut={props.dataTutSeventh}>
+              <img
+                alt="folder"
+                onClick={() => handleOnclikFolder(data)}
+                src={folder}
+                className="w-full h-full"
+              />
+              {rename === data.objectId ? (
+                <input
+                  onFocus={() => {
+                    inputRef.current.setSelectionRange(0, 0);
+                    const input = inputRef.current;
+                    if (input) {
+                      input.select();
+                    }
+                  }}
+                  autoFocus={true}
+                  type="text"
+                  onBlur={() => handledRenameDoc(data)}
+                  onKeyDown={(e) => handleEnterPress(e, data)}
+                  ref={inputRef}
+                  defaultValue={renameValue}
+                  // value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
+                />
+              ) : (
+                <span className="foldName">{data.Name}</span>
+              )}
+            </div>
+          </ContextMenu.Trigger>
+
+          <ContextMenu.Portal>
+            <ContextMenu.Content
+              className="ContextMenuContent"
+              sideOffset={5}
+              align="end"
+            >
+              <ContextMenu.Item
+                onClick={() => handleMenuItemClick("Rename", data)}
+                className="ContextMenuItem"
+              >
+                <i className="fa-solid fa-font mr-[8px]"></i>
+                <span>Rename</span>
+              </ContextMenu.Item>
+            </ContextMenu.Content>
+          </ContextMenu.Portal>
+        </ContextMenu.Root>
+      </div>
+    ) : (
+      <HoverCard.Root openDelay={0} closeDelay={100}>
+        <HoverCard.Trigger asChild>
+          <div>
+            <ContextMenu.Root>
+              <div className="icon-container">
+                <ContextMenu.Trigger className="ContextMenuTrigger">
+                  <img
+                    alt="PDF"
+                    className="w-full h-full"
+                    src={pdfLogo}
+                    onClick={() => checkPdfStatus(data)}
+                    data-tut={props.dataTutSixth}
+                  />
+                  {rename === data.objectId ? (
+                    <input
+                      autoFocus={true}
+                      type="text"
+                      onFocus={() => {
+                        inputRef.current.setSelectionRange(0, 0);
+                        const input = inputRef.current;
+                        if (input) {
+                          input.select();
+                        }
+                      }}
+                      onBlur={() => handledRenameDoc(data)}
+                      onKeyDown={(e) => handleEnterPress(e, data)}
+                      ref={inputRef}
+                      defaultValue={renameValue}
+                      // value={renameValue}
+                      onChange={(e) => setRenameValue(e.target.value)}
+                      className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
+                    />
+                  ) : (
+                    <span className="fileName">{data.Name}</span>
+                  )}
+                </ContextMenu.Trigger>
+                {status === "Completed" ? (
+                  <div className="status-badge completed">
+                    <i className="fas fa-check-circle"></i>
+                  </div>
+                ) : status === "Declined" ? (
+                  <div className="status-badge declined">
+                    <i className="fa fa-thumbs-down"></i>
+                  </div>
+                ) : status === "Expired" ? (
+                  <div className="status-badge expired">
+                    <i className="fa fa-hourglass-end"></i>
+                  </div>
+                ) : status === "Draft" ? (
+                  <div className="status-badge draft">
+                    <i className="fa fa-file"></i>
+                  </div>
+                ) : (
+                  status === "In Progress" && (
+                    <div className="status-badge in-progress">
+                      <i className="fa fa-paper-plane"></i>
+                    </div>
+                  )
+                )}
+              </div>
+
+              <ContextMenu.Portal>
+                <ContextMenu.Content
+                  className="ContextMenuContent"
+                  sideOffset={5}
+                  align="end"
+                >
+                  {contextMenu.map((menu, ind) => {
+                    return (
+                      <ContextMenu.Item
+                        key={ind}
+                        onClick={() => handleMenuItemClick(menu.type, data)}
+                        className="ContextMenuItem"
+                      >
+                        <i className={menu.icon}></i>
+                        <span className="ml-[8px]">{menu.type}</span>
+                      </ContextMenu.Item>
+                    );
+                  })}
+                </ContextMenu.Content>
+              </ContextMenu.Portal>
+            </ContextMenu.Root>
+          </div>
+        </HoverCard.Trigger>
+        <HoverCard.Portal>
+          <HoverCard.Content className="HoverCardContent" sideOffset={5}>
+            <strong className="text-[13px]">Title: </strong>
+            <span className="statusSpan" style={{ marginBottom: "0px" }}>
+              {" "}
+              {data.Name}
+            </span>
+            <br />
+            <strong className="text-[13px]">Status: </strong>
+            <span className="statusSpan"> {status}</span>
+            <br />
+            <strong className="text-[13px]">Created Date: </strong>
+            <span className="statusSpan">{createddate}</span>
+            <br />
+            {signerExist && (
+              <>
+                <strong className="text-[13px]">Signers: </strong>
+                {/* <span className="statusSpan">kjefjjnejkfnkbjs bbfjkdsbjbfjkbjk kscbjkbjkb</span> */}
+                {signersName()}
+              </>
+            )}
+
+            <HoverCard.Arrow className="HoverCardArrow" />
+          </HoverCard.Content>
+        </HoverCard.Portal>
+      </HoverCard.Root>
+    );
+  };
+
+  //component to handle type of document and render according to type
+  return (
+    <>
+      {props.isList ? (
+        <div className="container" style={{ overflowX: "auto" }}>
+          <Table striped bordered hover>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Created Date</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {props.pdfData.map((data, ind) => {
+                return (
+                  <React.Fragment key={ind}>
+                    {handleFolderData(data, ind, "table")}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </Table>
+        </div>
+      ) : (
+        <div className="flex flex-row flex-wrap items-center mt-1 pb-[20px] mx-[5px]">
+          {props.pdfData.map((data, ind) => {
+            return <div key={ind}>{handleFolderData(data, ind, "list")}</div>;
+          })}
+        </div>
+      )}
+
+      {isOpenMoveModal && (
+        <FolderModal
+          onSuccess={handleMoveFolder}
+          isOpenModal={isOpenMoveModal}
+          folderCls={"contracts_Document"}
+          setIsOpenMoveModal={setIsOpenMoveModal}
+          setPdfData={props.setPdfData}
+        />
+      )}
+      <ModalUi
+        isOpen={isDeleteDoc}
+        title={"Delete Document"}
+        handleClose={() => setIsDeleteDoc(false)}
+      >
+        <div className="h-full p-[20px] text-base-content">
+          <p>Are you sure you want to delete this document?</p>
+          <div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
+          <button
+            onClick={() => handleDeleteDocument(selectDoc)}
+            type="button"
+            className="op-btn op-btn-primary mr-2"
+          >
+            Yes
+          </button>
+          <button
+            onClick={() => setIsDeleteDoc(false)}
+            type="button"
+            className="op-btn op-btn-neutral"
+          >
+            No
+          </button>
+        </div>
+      </ModalUi>
+    </>
+  );
+}
+
+export default DriveBody;
@@ -1,679 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import "../../styles/opensigndrive.css";
-import axios from "axios";
-import { ContextMenu } from "radix-ui";
-import { useNavigate } from "react-router";
-import Table from "react-bootstrap/Table";
-import { HoverCard } from "radix-ui";
-import ModalUi from "../../primitives/ModalUi";
-import FolderModal from "../shared/fields/FolderModal";
-import { useTranslation } from "react-i18next";
-import { handleDownloadPdf, isMobile } from "../../constant/Utils";
-import Parse from "parse";
-import { withSessionValidation } from "../../utils";
-
-function DriveBody(props) {
-  const { t } = useTranslation();
-  const [rename, setRename] = useState("");
-  const [renameValue, setRenameValue] = useState("");
-  const inputRef = useRef(null);
-  const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
-  const [selectDoc, setSelectDoc] = useState();
-  const [isDeleteDoc, setIsDeleteDoc] = useState({});
-  const contextMenu = [
-    { type: "Download", icon: "fa-light fa-arrow-down" },
-    { type: "Rename", icon: "fa-light fa-font" },
-    { type: "Move", icon: "fa-light fa-file-export" },
-    { type: "Delete", icon: "fa-light fa-trash" }
-  ];
-  const navigate = useNavigate();
-
-  //to focus input box on press rename to change doc name
-  useEffect(() => {
-    if (rename && inputRef.current) {
-      setTimeout(() => {
-        inputRef.current.focus();
-      }, 10);
-    }
-  }, [rename]);
-
-  //function to handle folder component
-  const handleOnclikFolder = (data) => {
-    const folderData = {
-      name: data.Name,
-      objectId: data.objectId
-    };
-    props.setFolderName((prev) => [...prev, folderData]);
-    props.setIsLoading({
-      isLoad: true,
-      message: t("loading-mssg")
-    });
-    props.setDocId(data.objectId);
-    props.setPdfData([]);
-    props.setSkip(0);
-  };
-  //function for change doc name and update doc name in  _document class
-  const handledRenameDoc = withSessionValidation(async (data) => {
-    setRename("");
-    const trimmedValue = renameValue.trim();
-    if (trimmedValue.length > 0) {
-      const updateName = { Name: renameValue };
-      const docId = data.objectId;
-      const docData = props.pdfData;
-      const updatedData = docData.map((item) => {
-        if (item.objectId === docId) {
-          // If the item's ID matches the target ID, update the name
-          return { ...item, Name: renameValue };
-        }
-        // If the item's ID doesn't match, keep it unchanged
-        return item;
-      });
-      props.setPdfData(updatedData);
-      props.sortingData(null, null, updatedData);
-      try {
-        await axios.put(
-          `${localStorage.getItem("baseUrl")}classes/contracts_Document/${docId}`,
-          updateName,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-            }
-          }
-        );
-      } catch (err) {
-        console.error("Error in rename doc", err);
-        props.setIsAlert({
-          isShow: true,
-          alertMessage: t("something-went-wrong-mssg")
-        });
-      }
-    }
-  });
-
-  //function for navigate user to microapp-signature component
-  const checkPdfStatus = async (data) => {
-    const signerExist = data?.Signers;
-    const isDecline = data?.IsDeclined;
-    const isPlaceholder = data?.Placeholders;
-    const signedUrl = data?.SignedUrl;
-    const isSignYourself = data?.IsSignyourself;
-    //checking if document has completed and request signature flow
-    if (data?.IsCompleted && signerExist?.length > 0) {
-      navigate(`/recipientSignPdf/${data.objectId}`);
-    }
-    //checking if document has completed and signyour-self flow
-    else if ((!signerExist && !isPlaceholder) || isSignYourself) {
-      navigate(`/signaturePdf/${data.objectId}`);
-    }
-    //checking if document has declined by someone
-    else if (isDecline) {
-      navigate(`/recipientSignPdf/${data.objectId}`);
-      //checking draft type document
-    } else if (
-      signerExist?.length > 0 &&
-      isPlaceholder?.length > 0 &&
-      !signedUrl
-    ) {
-      navigate(`/placeHolderSign/${data.objectId}`);
-    }
-    //Inprogress document
-    else if (isPlaceholder?.length > 0 && signedUrl) {
-      navigate(`/recipientSignPdf/${data.objectId}`);
-    } //placeholder draft document
-    else if (
-      (signerExist?.length > 0 &&
-        (!isPlaceholder || isPlaceholder?.length === 0)) ||
-      ((!signerExist || signerExist?.length === 0) && isPlaceholder?.length > 0)
-    ) {
-      navigate(`/placeHolderSign/${data.objectId}`);
-    }
-  };
-
-  const handleMenuItemClick = async (selectType, data, deleteType) => {
-    switch (selectType) {
-      case "Download": {
-        await handleDownloadPdf([data]);
-        break;
-      }
-      case "Rename": {
-        setRenameValue(data.Name);
-        setRename(data.objectId);
-        break;
-      }
-      case "Delete": {
-        setIsDeleteDoc({ status: true, deleteType });
-        setSelectDoc(data);
-        break;
-      }
-      case "Move": {
-        handleMoveDocument(data);
-        break;
-      }
-      default:
-        null;
-    }
-  };
-  //function for delete document
-  const handleDeleteDocument = withSessionValidation(async (docData) => {
-    setIsDeleteDoc({});
-    const docId = docData.objectId;
-    const data = { IsArchive: true };
-
-    await axios
-      .put(
-        `${localStorage.getItem("baseUrl")}classes/contracts_Document/${docId}`,
-        data,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-          }
-        }
-      )
-      .then((result) => {
-        const res = result.data;
-        if (res) {
-          const updatedData = props.pdfData.filter((x) => x.objectId !== docId);
-          props.setPdfData(updatedData);
-        }
-      })
-      .catch((err) => {
-        console.error("Err in delete doc", err);
-        props.setIsAlert({
-          isShow: true,
-          alertMessage: t("something-went-wrong-mssg")
-        });
-      });
-  });
-  const handleMoveDocument = async (docData) => {
-    setIsOpenMoveModal(true);
-    setSelectDoc(docData);
-  };
-  //function for move document from one folder to another folder
-  const handleMoveFolder = withSessionValidation(async (selectFolderData) => {
-    const selecFolderId = selectDoc?.Folder?.objectId;
-    const moveFolderId = selectFolderData?.ObjectId;
-    let updateDocId = selectDoc?.objectId;
-    let updateData;
-    const checkExist = moveFolderId
-      ? selecFolderId === moveFolderId
-        ? true
-        : false
-      : selecFolderId
-        ? false
-        : true;
-    if (!checkExist) {
-      if (moveFolderId) {
-        updateData = {
-          Folder: {
-            __type: "Pointer",
-            className: "contracts_Document",
-            objectId: moveFolderId
-          }
-        };
-      } else {
-        updateData = { Folder: { __op: "Delete" } };
-      }
-
-      await axios
-        .put(
-          `${localStorage.getItem("baseUrl")}classes/contracts_Document/${updateDocId}`,
-          updateData,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-            }
-          }
-        )
-        .then((Listdata) => {
-          const res = Listdata.data;
-          if (res) {
-            const updatedData = props.pdfData.filter(
-              (x) => x.objectId !== updateDocId
-            );
-            props.setPdfData(updatedData);
-          }
-        })
-        .catch((err) => {
-          console.error("err in move folder", err);
-        });
-
-      setIsOpenMoveModal(false);
-    } else {
-      alert(t("folder-already-exist!"));
-      setIsOpenMoveModal(false);
-    }
-  });
-  const handleEnterPress = (e, data) => {
-    if (e.key === "Enter") {
-      handledRenameDoc(data);
-    }
-  };
-
-  const checkFolderEmpty = async (docData) => {
-    let isEmptyFolder = true;
-    const query = new Parse.Query("contracts_Document");
-    query.equalTo("Folder", {
-      __type: "Pointer",
-      className: "contracts_Document",
-      objectId: docData.objectId
-    });
-    query.notEqualTo("IsArchive", true);
-    const res = await query.find();
-    const jsonRes = JSON.parse(JSON.stringify(res));
-    if (jsonRes && jsonRes.length > 0) {
-      isEmptyFolder = false;
-      return isEmptyFolder;
-    } else {
-      return isEmptyFolder;
-    }
-  };
-  const handleDeleteFolder = async (docData) => {
-    setIsDeleteDoc({});
-    const isEmptyFolder = await checkFolderEmpty(docData);
-    if (isEmptyFolder) {
-      const docId = docData?.objectId;
-      try {
-        const updateQuery = new Parse.Query("contracts_Document");
-        const updateObj = await updateQuery.get(docId);
-        updateObj.set("IsArchive", true);
-        const res = await updateObj.save();
-        if (res) {
-          const updatedData = props.pdfData.filter((x) => x.objectId !== docId);
-          props.setPdfData(updatedData);
-        }
-      } catch (err) {
-        console.error("Err in delete folder", err);
-        props.setIsAlert({
-          isShow: true,
-          alertMessage: t("something-went-wrong-mssg")
-        });
-      }
-    } else {
-      alert(t("delete-folder-alert-1"));
-    }
-  };
-
-  //component to handle type of document and render according to type
-  const handleFolderData = (data, ind, listType) => {
-    let createddate, status, isDecline, signerExist, isComplete;
-    if (data.Type !== "Folder") {
-      const expireDate = data.ExpiryDate && data.ExpiryDate.iso;
-      const createdDate = data.createdAt && data.createdAt;
-      createddate = new Date(createdDate).toLocaleDateString();
-      isComplete = data.IsCompleted && data.IsCompleted ? true : false;
-      isDecline = data.IsDeclined && data.IsDeclined;
-      signerExist = data.Signers && data.Signers;
-      const signedUrl = data.SignedUrl;
-
-      const expireUpdateDate = new Date(expireDate).getTime();
-      const currDate = new Date().getTime();
-      let isExpire = false;
-      if (currDate > expireUpdateDate) {
-        isExpire = true;
-      }
-
-      if (isComplete) {
-        status = "Completed";
-      } else if (isDecline) {
-        status = "Declined";
-      } else if (!signedUrl) {
-        status = "Draft";
-      } else if (isExpire) {
-        status = "Expired";
-      } else {
-        status = "In Progress";
-      }
-    }
-
-    const signersName = () => {
-      const getSignersName =
-        signerExist?.length > 0 && signerExist?.map((data) => data?.Name || "");
-      const signerName =
-        getSignersName?.length > 0 ? getSignersName?.join(", ") : "";
-
-      return (
-        <span className="text-[12px] font-medium w-[90%] break-words">
-          {signerName && signerName}
-        </span>
-      );
-    };
-
-    return listType === "table" ? (
-      data.Type === "Folder" ? (
-        <tr onClick={() => handleOnclikFolder(data)}>
-          <td className="cursor-pointer flex items-center gap-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512"
-              className="w-[26px] h-[26px] fill-current"
-            >
-              <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
-            </svg>
-            <span className="text-[12px] font-medium">{data.Name}</span>
-          </td>
-          <td>_</td>
-          <td>{t("folder")}</td>
-          <td>_</td>
-          <td>_</td>
-        </tr>
-      ) : (
-        <tr onClick={() => checkPdfStatus(data)}>
-          <td className="cursor-pointer flex items-center gap-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 384 512"
-              className="w-[26px] h-[26px] fill-current op-text-primary"
-            >
-              <path d="M374.629 150.627L233.371 9.373C227.371 3.371 219.23 0 210.746 0H64C28.652 0 0 28.652 0 64V448C0 483.345 28.652 512 64 512H320C355.348 512 384 483.345 384 448V173.254C384 164.767 380.629 156.629 374.629 150.627ZM224 22.629L361.375 160H248C234.781 160 224 149.234 224 136V22.629ZM368 448C368 474.467 346.469 496 320 496H64C37.531 496 16 474.467 16 448V64C16 37.533 37.531 16 64 16H208V136C208 158.062 225.938 176 248 176H368V448ZM96 264C96 268.406 99.594 272 104 272H280C284.406 272 288 268.406 288 264S284.406 256 280 256H104C99.594 256 96 259.594 96 264ZM280 320H104C99.594 320 96 323.594 96 328S99.594 336 104 336H280C284.406 336 288 332.406 288 328S284.406 320 280 320ZM280 384H104C99.594 384 96 387.594 96 392S99.594 400 104 400H280C284.406 400 288 396.406 288 392S284.406 384 280 384Z" />
-            </svg>
-            <span className="text-[12px] font-medium">{data.Name}</span>
-          </td>
-          <td>{createddate}</td>
-          <td>{t("pdf")}</td>
-          <td>{t(`drive-document-status.${status}`)}</td>
-          <td>
-            <i
-              onClick={(e) => {
-                e.stopPropagation();
-                handleMenuItemClick("Download", data);
-              }}
-              className="fa-light fa-download mr-[8px] op-text-primary cursor-pointer"
-              aria-hidden="true"
-            ></i>
-          </td>
-        </tr>
-      )
-    ) : listType === "list" && data.Type === "Folder" ? (
-      <div className="relative w-[100px] h-[100px] mx-2 my-3">
-        <ContextMenu.Root>
-          <ContextMenu.Trigger className="flex flex-col justify-center items-center select-none-cls">
-            {/* folder */}
-            <div
-              data-tut={props.dataTutSeventh}
-              onClick={() => {
-                if (!rename) {
-                  handleOnclikFolder(data);
-                }
-              }}
-              className="cursor-pointer"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 512 512"
-                className="w-[100px] h-[100px] fill-current"
-              >
-                <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
-              </svg>
-              {rename === data.objectId ? (
-                <input
-                  onFocus={() => {
-                    const input = inputRef.current;
-                    if (input) {
-                      input.select();
-                    }
-                  }}
-                  autoFocus={true}
-                  type="text"
-                  onBlur={() => handledRenameDoc(data)}
-                  onKeyDown={(e) => handleEnterPress(e, data)}
-                  ref={inputRef}
-                  defaultValue={renameValue}
-                  onChange={(e) => setRenameValue(e.target.value)}
-                  className="op-input op-input-bordered op-input-xs w-[100px] focus:outline-none hover:border-base-content text-[10px]"
-                />
-              ) : (
-                <span className="fileName select-none-cls">{data.Name}</span>
-              )}
-            </div>
-          </ContextMenu.Trigger>
-          <ContextMenu.Portal>
-            <ContextMenu.Content
-              className="ContextMenuContent"
-              sideOffset={5}
-              align="end"
-            >
-              <ContextMenu.Item
-                onClick={() => handleMenuItemClick("Rename", data)}
-                className="ContextMenuItem"
-              >
-                <i className="fa-light fa-font mr-[8px]"></i>
-                <span>{t(`context-menu.Rename`)}</span>
-              </ContextMenu.Item>
-              <ContextMenu.Item
-                onClick={() => handleMenuItemClick("Delete", data, data.Type)}
-                className="ContextMenuItem"
-              >
-                <i className="fa-light fa-trash mr-[8px]"></i>
-                <span>{t(`context-menu.Delete`)}</span>
-              </ContextMenu.Item>
-            </ContextMenu.Content>
-          </ContextMenu.Portal>
-        </ContextMenu.Root>
-      </div>
-    ) : (
-      <HoverCard.Root
-        open={rename || isMobile ? false : undefined}
-        openDelay={0}
-        closeDelay={100}
-      >
-        <HoverCard.Trigger asChild>
-          <div>
-            <ContextMenu.Root>
-              <div className="relative w-[100px] h-[100px] mx-2 my-3">
-                <ContextMenu.Trigger
-                  asChild
-                  className="flex flex-col justify-center items-center select-none-cls"
-                >
-                  {/* pdf */}
-                  <div
-                    data-tut={props.dataTutSixth}
-                    onClick={() => {
-                      if (!rename) {
-                        checkPdfStatus(data);
-                      }
-                    }}
-                    className="cursor-pointer"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 384 512"
-                      className="w-[100px] h-[100px] fill-current op-text-primary"
-                    >
-                      <path d="M374.629 150.627L233.371 9.373C227.371 3.371 219.23 0 210.746 0H64C28.652 0 0 28.652 0 64V448C0 483.345 28.652 512 64 512H320C355.348 512 384 483.345 384 448V173.254C384 164.767 380.629 156.629 374.629 150.627ZM224 22.629L361.375 160H248C234.781 160 224 149.234 224 136V22.629ZM368 448C368 474.467 346.469 496 320 496H64C37.531 496 16 474.467 16 448V64C16 37.533 37.531 16 64 16H208V136C208 158.062 225.938 176 248 176H368V448ZM96 264C96 268.406 99.594 272 104 272H280C284.406 272 288 268.406 288 264S284.406 256 280 256H104C99.594 256 96 259.594 96 264ZM280 320H104C99.594 320 96 323.594 96 328S99.594 336 104 336H280C284.406 336 288 332.406 288 328S284.406 320 280 320ZM280 384H104C99.594 384 96 387.594 96 392S99.594 400 104 400H280C284.406 400 288 396.406 288 392S284.406 384 280 384Z" />
-                    </svg>
-                    {rename === data.objectId ? (
-                      <input
-                        autoFocus={true}
-                        type="text"
-                        onFocus={() => {
-                          const input = inputRef.current;
-                          if (input) {
-                            input.select();
-                          }
-                        }}
-                        onBlur={() => handledRenameDoc(data)}
-                        onKeyDown={(e) => handleEnterPress(e, data, data.Type)}
-                        ref={inputRef}
-                        defaultValue={renameValue}
-                        onChange={(e) => setRenameValue(e.target.value)}
-                        className="op-input op-input-bordered op-input-xs w-[100px] focus:outline-none hover:border-base-content text-[10px]"
-                      />
-                    ) : (
-                      <span className="fileName select-none-cls">
-                        {data.Name}
-                      </span>
-                    )}
-                  </div>
-                </ContextMenu.Trigger>
-                {status === "Completed" ? (
-                  <div className="status-badge completed">
-                    <i className="fa-light fa-check-circle"></i>
-                  </div>
-                ) : status === "Declined" ? (
-                  <div className="status-badge declined">
-                    <i className="fa-light fa-thumbs-down"></i>
-                  </div>
-                ) : status === "Expired" ? (
-                  <div className="status-badge expired">
-                    <i className="fa-light fa-hourglass-end"></i>
-                  </div>
-                ) : status === "Draft" ? (
-                  <div className="status-badge draft">
-                    <i className="fa-light fa-file"></i>
-                  </div>
-                ) : (
-                  status === "In Progress" && (
-                    <div className="status-badge in-progress">
-                      <i className="fa-light fa-paper-plane"></i>
-                    </div>
-                  )
-                )}
-              </div>
-              <ContextMenu.Portal>
-                <ContextMenu.Content
-                  className="ContextMenuContent"
-                  sideOffset={5}
-                  align="end"
-                >
-                  {contextMenu.map((menu, ind) => {
-                    return (
-                      <ContextMenu.Item
-                        key={ind}
-                        onClick={() => handleMenuItemClick(menu.type, data)}
-                        className="ContextMenuItem"
-                      >
-                        <i className={menu.icon}></i>
-                        <span className="ml-[8px]">
-                          {t(`context-menu.${menu.type}`)}
-                        </span>
-                      </ContextMenu.Item>
-                    );
-                  })}
-                </ContextMenu.Content>
-              </ContextMenu.Portal>
-            </ContextMenu.Root>
-          </div>
-        </HoverCard.Trigger>
-        <HoverCard.Portal>
-          <HoverCard.Content className="HoverCardContent" sideOffset={5}>
-            <strong className="text-[13px]">
-              {t("report-heading.Title")}:{" "}
-            </strong>
-            <span className="text-[12px] font-medium mb-0"> {data.Name}</span>
-            <br />
-            <strong className="text-[13px]">
-              {t("report-heading.Status")}:{" "}
-            </strong>
-            <span className="text-[12px] font-medium">
-              {t(`drive-document-status.${status}`)}
-            </span>
-            <br />
-            <strong className="text-[13px]">
-              {t("report-heading.created-date")}:{" "}
-            </strong>
-            <span className="text-[12px] font-medium">{createddate}</span>
-            <br />
-            {signerExist && (
-              <>
-                <strong className="text-[13px]">
-                  {t("report-heading.Signers")}:{" "}
-                </strong>
-                {signersName()}
-              </>
-            )}
-            <HoverCard.Arrow className="HoverCardArrow" />
-          </HoverCard.Content>
-        </HoverCard.Portal>
-      </HoverCard.Root>
-    );
-  };
-
-  //component to handle type of document and render according to type
-  return (
-    <>
-      {props.isList ? (
-        <div className="container" style={{ overflowX: "auto" }}>
-          <Table striped bordered hover>
-            <thead>
-              <tr>
-                <th>{t("report-heading.Name")}</th>
-                <th>{t("report-heading.created-date")}</th>
-                <th>{t("report-heading.Type")}</th>
-                <th>{t("report-heading.Status")}</th>
-                <th>{t("action")}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {props?.pdfData?.map((data, ind) => (
-                <React.Fragment key={ind}>
-                  {handleFolderData(data, ind, "table")}
-                </React.Fragment>
-              ))}
-            </tbody>
-          </Table>
-        </div>
-      ) : (
-        <div className="flex flex-row flex-wrap items-center mt-1 pb-[20px] mx-[5px]">
-          {props?.pdfData?.map((data, ind) => (
-            <React.Fragment key={ind}>
-              {handleFolderData(data, ind, "list")}
-            </React.Fragment>
-          ))}
-        </div>
-      )}
-
-      {isOpenMoveModal && (
-        <FolderModal
-          onSuccess={handleMoveFolder}
-          isOpenModal={isOpenMoveModal}
-          folderCls={"contracts_Document"}
-          setIsOpenMoveModal={setIsOpenMoveModal}
-          setPdfData={props.setPdfData}
-        />
-      )}
-      <ModalUi
-        isOpen={isDeleteDoc.status}
-        title={t("delete-document")}
-        handleClose={() => setIsDeleteDoc({})}
-      >
-        <div className="h-full p-[20px] text-base-content">
-          {isDeleteDoc.deleteType ? (
-            <p>{t("delete-folder-alert")}</p>
-          ) : (
-            <p>{t("delete-document-alert")}</p>
-          )}
-
-          <div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
-          <button
-            onClick={() => {
-              if (isDeleteDoc.deleteType) {
-                handleDeleteFolder(selectDoc);
-              } else {
-                handleDeleteDocument(selectDoc);
-              }
-            }}
-            type="button"
-            className="op-btn op-btn-primary mr-2"
-          >
-            {t("yes")}
-          </button>
-          <button
-            onClick={() => setIsDeleteDoc({})}
-            type="button"
-            className="op-btn op-btn-neutral"
-          >
-            {t("no")}
-          </button>
-        </div>
-      </ModalUi>
-    </>
-  );
-}
-
-export default DriveBody;
@@ -1,41 +1,39 @@
 import React from "react";
 import ModalUi from "../../primitives/ModalUi";
-import { useTranslation } from "react-i18next";

 const AddRoleModal = (props) => {
-  const { t } = useTranslation();
  return (
    <ModalUi
-      title={t("add-role")}
+      title={"Add Role"}
      isOpen={props.isModalRole}
      handleClose={props.handleCloseRoleModal}
    >
-      <div className="text-base-content h-full py-[10px] px-[20px]">
+      <div className="h-full py-[10px] px-[20px]">
        <form className="flex flex-col" onSubmit={props.handleAddRole}>
          <input
            value={props.roleName}
            onChange={(e) => props.setRoleName(e.target.value)}
            placeholder={
              props.signersdata.length > 0
-                ? "Role " + (props.signersdata.length + 1)
-                : "Role 1"
+                ? "User " + (props.signersdata.length + 1)
+                : "User 1"
            }
            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs mt-1"
          />
          <p className="text-[gray] text-[11px] mt-[5px] mb-[10px] ml-[10px]">
-            {t("role-ex")}..
+            e.g: Customer, Hr, Director, Manager, Student, etc...
          </p>
          <div>
            <div className="h-[1px] w-full bg-[#9f9f9f] mb-[10px]"></div>
            <button type="submit" className="op-btn op-btn-primary">
-              {t("add")}
+              Add
            </button>
            <button
              onClick={props.handleCloseRoleModal}
              type="button"
-              className="op-btn op-btn-ghost text-base-content ml-2"
+              className="op-btn op-btn-ghost ml-2"
            >
-              {t("close")}
+              Close
            </button>
          </div>
        </form>
@@ -1,133 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import ModalUi from "../../primitives/ModalUi";
-
-function AgreementContent(props) {
-  const { t } = useTranslation();
-  const appName =
-    "OpenSign™";
-  const h2Style = "text-base-content font-medium text-lg";
-  const ulStyle = "list-disc px-4 py-3";
-  const handleOnclick = () => {
-    props.setIsAgree(true);
-    props.setIsShowAgreeTerms(false);
-    props.showFirstWidget();
-  };
-  return (
-    <div>
-      <ModalUi
-        isOpen={true}
-        title={t("term-cond-title")}
-        handleClose={() => props.setIsShowAgreeTerms(false)}
-      >
-        <div className="h-[100%] p-[20px]">
-          <h2 className={h2Style}>{t("term-cond-h")}</h2>
-          <span className="mt-2">
-            {t("term-cond-p1", { appName: appName })}
-          </span>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h1")}</h2>
-          <span className="mt-2">
-            {t("term-cond-p2", { appName: appName })}
-          </span>
-          <ul className={ulStyle}>
-            <li>{t("term-cond-p3", { appName: appName })}</li>
-            <li>{t("term-cond-p4")}</li>
-          </ul>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h2")}</h2>
-          <span className="mt-2">{t("term-cond-p5")}</span>
-          <ul className={ulStyle}>
-            <li>{t("term-cond-p6", { appName: appName })}</li>
-            <li>{t("term-cond-p7", { appName: appName })}</li>
-            <li>{t("term-cond-p8")}</li>
-          </ul>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h3")}</h2>
-          <span className="mt-2">{t("term-cond-p9")}</span>
-          <ul className={ulStyle}>
-            <li>{t("term-cond-p10")}</li>
-            <li>{t("term-cond-p11")}</li>
-          </ul>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h4")}</h2>
-          <span className="mt-2">
-            {t("term-cond-p12", { appName: appName })}
-          </span>
-          <ul className={ulStyle}>
-            <li>{t("term-cond-p13")}</li>
-            <li>{t("term-cond-p14")}</li>
-            <li>{t("term-cond-p15")}</li>
-          </ul>
-          <span>{t("term-cond-p16", { appName: appName })}</span>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h5")}</h2>
-          <p>{t("term-cond-p17", { appName: appName })}</p>
-          <p className="mt-2">{t("term-cond-p18")}</p>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h6")}</h2>
-          <span className="mt-2">{t("term-cond-p19")}</span>
-          <ul className={ulStyle}>
-            <li>{t("term-cond-p20")}</li>
-            <li>{t("term-cond-p21")}</li>
-            <li>{t("term-cond-p22", { appName: appName })}</li>
-          </ul>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h7")}</h2>
-          <span className="mt-2">
-            {t("term-cond-p23", { appName: appName })}
-          </span>
-          <ul className={ulStyle}>
-            <li>{t("term-cond-p24")}</li>
-            <li>{t("term-cond-p25")}</li>
-          </ul>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h8")}</h2>
-          <span className="mt-2">
-            {t("term-cond-p26", { appName: appName })}
-          </span>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <h2 className={h2Style}>{t("term-cond-h9")}</h2>
-          <span className="mt-2">
-            {t("term-cond-p27", { appName: appName })}
-          </span>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <span className="mt-2 font-medium">
-            {t("term-cond-p28", { appName: appName })}
-          </span>
-              <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-              <span className="mt-2">
-                {t("term-cond-p29", { appName: appName })}
-              </span>
-              <a
-                href="www.opensignlabs.com"
-                target="_blank"
-                className="text-blue-700 cursor-pointer"
-              >
-                www.opensignlabs.com
-              </a>
-
-              <span>{t("term-cond-p30")}</span>
-              <span className="font-medium"> support@opensignlabs.com </span>
-          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
-          <div className="mt-6 flex justify-start gap-2">
-            <button
-              onClick={() => handleOnclick()}
-              className="op-btn op-btn-primary"
-            >
-              {t("agrre-button")}
-            </button>
-            <button
-              className="op-btn op-btn-ghost text-base-content"
-              onClick={() => props.setIsShowAgreeTerms(false)}
-            >
-              {t("close")}
-            </button>
-          </div>
-        </div>
-      </ModalUi>
-    </div>
-  );
-}
-
-export default AgreementContent;
@@ -1,54 +0,0 @@
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import AgreementContent from "./AgreementContent";
-
-function AgreementSign(props) {
-  const { t } = useTranslation();
-  const [isShowAgreeTerms, setIsShowAgreeTerms] = useState(false);
-
-  return (
-    <>
-      <div className="op-modal op-modal-open absolute z-[448]">
-        <div className="w-[95%] md:w-[60%] lg:w-[40%] op-modal-box overflow-y-auto hide-scrollbar text-sm p-4">
-          <div className="flex flex-row items-center">
-            <div className="text-[11px] md:text-base text-base-content">
-              <span>{t("agree-p1")}</span>
-              <span
-                className="font-bold text-blue-600 cursor-pointer"
-                onClick={() => {
-                  setIsShowAgreeTerms(true);
-                }}
-              >
-                {t("agree-p2")}
-              </span>
-              <span> {t("agree-p3")}</span>
-            </div>
-          </div>
-          <div className="flex mt-3">
-            <button
-              onClick={() => {
-                props.setIsAgree(true);
-                props.showFirstWidget();
-              }}
-              className="op-btn op-btn-primary op-btn-sm w-full md:w-auto"
-            >
-              {t("agrre-button")}
-            </button>
-          </div>
-          <div className="mt-2  text-base-content">
-            <span className="text-[11px]">{t("agreement-note")}</span>
-          </div>
-        </div>
-      </div>
-      {isShowAgreeTerms && (
-        <AgreementContent
-          setIsAgree={props.setIsAgree}
-          setIsShowAgreeTerms={setIsShowAgreeTerms}
-          showFirstWidget={props.showFirstWidget}
-        />
-      )}
-    </>
-  );
-}
-
-export default AgreementSign;
@@ -0,0 +1,17 @@
+import React from "react";
+
+function BorderResize({ right, top }) {
+  return (
+    <div
+      className="borderResize"
+      style={{
+        right: right ? right + "px" : "-1px",
+        bottom: top ? top + "px" : "-1px",
+        borderRight: "3px solid  #188ae2",
+        borderBottom: "3px solid #188ae2"
+      }}
+    ></div>
+  );
+}
+
+export default BorderResize;
@@ -1,23 +0,0 @@
-import React from "react";
-
-function BorderResize(props) {
-  const getHeight = () => {
-    const height = props.posHeight(props.pos, props.isSignYourself);
-    if (height > 14) {
-      return "14px";
-    } else {
-      return `${height}px`;
-    }
-  };
-
-  return (
-    <div
-      style={{ width: getHeight() || "14px", height: getHeight() || "14px" }}
-      className={`${props.right ? `-right-[12px]` : "-right-[2px]"} ${
-        props.top ? `-bottom-[12px]` : "-bottom-[2px]"
-      } absolute inline-block hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
-    ></div>
-  );
-}
-
-export default BorderResize;
@@ -1,110 +0,0 @@
-import { useState, useEffect } from "react";
-import ModalUi from "../../primitives/ModalUi";
-import { fontsizeArr, fontColorArr } from "../../constant/Utils";
-import { useTranslation } from "react-i18next";
-
-export default function CellsSettingModal({
-  isOpen,
-  handleClose,
-  defaultData,
-  handleSave,
-}) {
-  const { t } = useTranslation();
-  const [name, setName] = useState("");
-  const [cellCount, setCellCount] = useState(5);
-  const [fontSize, setFontSize] = useState(12);
-  const [fontColor, setFontColor] = useState("black");
-
-  useEffect(() => {
-    if (defaultData) {
-      setName(defaultData.options?.name || "Cells");
-      setCellCount(defaultData.options?.cellCount || 5);
-      setFontSize(defaultData.options?.fontSize || 12);
-      setFontColor(defaultData.options?.fontColor || "black");
-    }
-  }, [defaultData]);
-
-  const onSubmit = (e) => {
-    e.preventDefault();
-    handleSave &&
-      handleSave({
-        name,
-        cellCount: parseInt(cellCount, 10),
-        fontSize,
-        fontColor,
-      });
-  };
-
-  return (
-    <ModalUi isOpen={isOpen} handleClose={handleClose} title={t("widget-info")}>
-      <form
-        onSubmit={onSubmit}
-        className="p-[20px] text-base-content flex flex-col gap-3"
-      >
-        <div>
-          <label htmlFor="name" className="text-[13px]">
-            {t("name")} <span className="text-[red]">*</span>
-          </label>
-          <input
-            required
-            name="name"
-            className="op-input op-input-bordered op-input-sm w-full text-xs focus:outline-none hover:border-base-content"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </div>
-        <div>
-          <label htmlFor="cellCount" className="text-[13px]">
-            {t("cell-count")}
-          </label>
-          <input
-            type="number"
-            min="1"
-            name="cellCount"
-            className="op-input op-input-bordered op-input-sm w-full text-xs focus:outline-none hover:border-base-content"
-            value={cellCount}
-            onChange={(e) => setCellCount(e.target.value)}
-          />
-        </div>
-        <div className="flex flex-col md:flex-row md:items-center gap-3">
-          <div className="flex items-center gap-2">
-            <span className="whitespace-nowrap">{t("font-size")}: </span>
-            <select
-              className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-              value={fontSize}
-              onChange={(e) => setFontSize(parseInt(e.target.value))}
-            >
-              {fontsizeArr.map((size, ind) => (
-                <option className="text-[13px]" value={size} key={ind}>
-                  {size}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="flex items-center">
-            <span>{t("color")}: </span>
-            <select
-              className="ml-[33px] md:ml-4 w-[65%] md:w-full op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-              value={fontColor}
-              onChange={(e) => setFontColor(e.target.value)}
-            >
-              {fontColorArr.map((color, ind) => (
-                <option value={color} key={ind}>
-                  {t(`color-type.${color}`)}
-                </option>
-              ))}
-            </select>
-            <span
-              className="w-5 h-[19px] ml-1"
-              style={{ background: fontColor }}
-            />
-          </div>
-        </div>
-        <div className="h-[1px] w-full bg-[#b7b3b3] my-[16px]"></div>
-        <button type="submit" className="op-btn op-btn-primary">
-          {t("save")}
-        </button>
-      </form>
-    </ModalUi>
-  );
-}
@@ -1,143 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-
-const Cell = ({
-  isEnabled,
-  count,
-  h,
-  value,
-  editable,
-  onChange,
-  onKeyDown,
-  onBlur,
-  inputRef,
-  index,
-  fontSize,
-  fontColor,
-  hint
-}) => (
-  <div
-    className={`${isEnabled ? "bg-white border-gray-400" : "select-none-cls pointer-events-none border-gray-500"} flex items-center justify-center border-[1px]`}
-    style={{ flex: `0 0 ${100 / count}%`, height: h }}
-  >
-    <input
-      disabled={!isEnabled}
-      maxLength={1}
-      value={value}
-      readOnly={!editable}
-      ref={inputRef}
-      onChange={editable ? (e) => onChange && onChange(e, index) : undefined}
-      onKeyDown={editable ? (e) => onKeyDown && onKeyDown(e, index) : undefined}
-      // trigger validation when leaving a cell
-      onBlur={editable ? (e) => onBlur && onBlur(e, index) : undefined}
-      className={`${isEnabled ? "placeholder-gray-300" : "placeholder-gray-500"} w-full text-center focus:outline-none bg-transparent`}
-      placeholder={hint}
-      style={{ fontFamily: "Arial, sans-serif", fontSize, color: fontColor }}
-    />
-  </div>
-);
-
-export default function CellsWidget({
-  isEnabled,
-  count = 8,
-  height = 40,
-  value = "",
-  editable = false,
-  onChange,
-  onKeyDown,
-  onBlur,
-  onCellCountChange,
-  inputRefs,
-  resizable = false,
-  fontSize = "12px",
-  fontColor = "black",
-  hint = ""
-}) {
-  const [cellCount, setCellCount] = useState(count);
-
-  // keep internal state in sync with prop updates
-  useEffect(() => setCellCount(count), [count]);
-
-  const startX = useRef(0);
-  const startCount = useRef(cellCount);
-
-  const capture = (downEv, onMove, onUp = () => {}) => {
-    const id = downEv.pointerId;
-    const move = (ev) => id === ev.pointerId && onMove(ev);
-    const up = (ev) => {
-      if (id !== ev.pointerId) return;
-      onUp(ev);
-      downEv.target.releasePointerCapture(id);
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-    downEv.target.setPointerCapture(id);
-  };
-
-  const onTopHandlePointerDown = (ev) => {
-    // Prevent triggering the widget drag logic
-    ev.stopPropagation();
-    ev.preventDefault();
-    startX.current = ev.clientX;
-    startCount.current = cellCount;
-    capture(ev, (moveEv) => {
-      const dx = moveEv.clientX - startX.current;
-      const delta = Math.floor(-dx / 5);
-      let newCount = Math.max(1, startCount.current + delta);
-      if (newCount !== cellCount) {
-        setCellCount(newCount);
-        onCellCountChange?.(newCount);
-      }
-    });
-  };
-
-  const cells = Array.from({ length: cellCount }).map((_, i) => value[i] || "");
-  const hints = Array.from({ length: cellCount }).map((_, i) => hint[i] || "");
-
-  return (
-    <div
-      className="relative flex w-full h-full overflow-visible"
-      style={{ height }}
-    >
-      {resizable && (
-        <div
-          className="cell-size-handle absolute left-1/2 -translate-x-1/2 -bottom-4 rotate-180 cursor-ew-resize touch-none"
-          onPointerDown={onTopHandlePointerDown}
-        >
-          <svg
-            className="w-4 h-4 text-blue-600"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fillRule="evenodd"
-              d="m9.69 18.933.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 0 0 .281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 1 0 3 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 0 0 2.273 1.765 11.842 11.842 0 0 0 .976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </div>
-      )}
-      {cells.map((val, i) => (
-        <Cell
-          key={i}
-          isEnabled={isEnabled}
-          count={cellCount}
-          h={height}
-          value={val}
-          editable={editable}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          onBlur={onBlur}
-          inputRef={inputRefs ? (el) => (inputRefs.current[i] = el) : undefined}
-          index={i}
-          fontSize={fontSize}
-          fontColor={fontColor}
-          hint={hints[i]}
-        />
-      ))}
-    </div>
-  );
-}
@@ -0,0 +1,276 @@
+import React, { useEffect, useState } from "react";
+import opensignLogo from "../../assets/images/logo.png";
+import {
+  Page,
+  Text,
+  View,
+  Document,
+  StyleSheet,
+  Image
+} from "@react-pdf/renderer";
+
+function Certificate({ pdfData }) {
+  const [isMultiSigners, setIsMultiSigners] = useState();
+  const [multiSigner, setMultiSigners] = useState([]);
+  const [isLoad, setIsLoad] = useState(false);
+
+  useEffect(() => {
+    handleSignerData();
+    // eslint-disable-next-line
+  }, []);
+
+  const handleSignerData = () => {
+    const checkSigners = pdfData.filter((data) => data.Signers);
+    if (checkSigners && checkSigners.length > 0) {
+      setIsMultiSigners(true);
+
+      const checkSignSigners =
+        pdfData[0].AuditTrail &&
+        pdfData[0].AuditTrail.length > 0 &&
+        pdfData[0].AuditTrail.filter((data) => data.Activity === "Signed");
+
+      setMultiSigners(checkSignSigners);
+    } else {
+      setIsMultiSigners(false);
+    }
+    setIsLoad(true);
+  };
+
+  const styles = StyleSheet.create({
+    page: {
+      borderRadius: "5px",
+      padding: "10px",
+      backgroundColor: "white"
+    },
+    section1: {
+      border: "1px solid rgb(177, 174, 174)",
+      padding: "20px"
+    },
+    textStyle: {
+      fontWeight: "bold",
+      fontSize: "11px",
+      marginBottom: "10px"
+    },
+    textStyle2: {
+      fontWeight: "600",
+      fontSize: "11px",
+      marginBottom: "10px",
+      color: "gray"
+    },
+    image: {
+      width: "71px",
+      height: "17px"
+    }
+  });
+
+  const generatedDate = () => {
+    const newDate = new Date();
+    const utcTime = newDate.toUTCString();
+
+    return (
+      <Text
+        style={{
+          color: "gray",
+          fontSize: "10px"
+        }}
+      >
+        Generated On {utcTime}
+      </Text>
+    );
+  };
+  const changeCompletedDate = () => {
+    const completedOn = pdfData[0].updatedAt;
+    const newDate = new Date(completedOn);
+    const utcTime = newDate.toUTCString();
+
+    return <Text style={styles.textStyle2}>{utcTime}</Text>;
+  };
+
+  const signerName = (data) => {
+    const getSignerName = pdfData[0].Signers.filter(
+      (sign) => sign.objectId === data.UserPtr.objectId
+    );
+
+    return (
+      getSignerName[0] &&
+      getSignerName.length > 0 && (
+        <>
+          <Text style={styles.textStyle}>
+            Name : &nbsp;
+            <Text style={styles.textStyle2}>{getSignerName[0].Name}</Text>
+          </Text>
+          <Text style={styles.textStyle}>
+            Email : &nbsp;
+            <Text style={styles.textStyle2}>{getSignerName[0].Email}</Text>
+          </Text>
+        </>
+      )
+    );
+  };
+
+  return (
+    isLoad && (
+      <Document>
+        {/** Page defines a single page of content. */}
+        <Page size="A4" style={styles.page}>
+          <View style={styles.section1}>
+            <View
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "30px"
+              }}
+            >
+              <Image src={opensignLogo} style={styles.image} />
+              {generatedDate()}
+            </View>
+
+            <View style={{ justifyContent: "center" }}>
+              <Text
+                style={{
+                  textAlign: "center",
+                  fontSize: "20px",
+                  fontWeight: "bold",
+                  color: "#31bceb",
+                  marginBottom: "10px"
+                }}
+              >
+                {" "}
+                Certificate of Completion
+              </Text>
+              <View style={{ border: "1px solid #bdbbbb" }}></View>
+              <View>
+                <View>
+                  <Text
+                    style={{
+                      fontSize: "16px",
+                      fontWeight: "bold",
+                      color: "#31bceb",
+                      margin: "10px 0px 10px 0px"
+                    }}
+                  >
+                    Summary
+                  </Text>
+                </View>
+                <View style={{ display: "flex", flexDirection: "column" }}>
+                  <Text style={styles.textStyle}>
+                    Document ID : &nbsp;
+                    <Text style={styles.textStyle2}>{pdfData[0].objectId}</Text>
+                  </Text>
+                  <Text style={styles.textStyle}>
+                    Document Name : &nbsp;
+                    <Text style={styles.textStyle2}>{pdfData[0].Name}</Text>
+                  </Text>
+                  <Text style={styles.textStyle}>
+                    Organization : &nbsp;
+                    <Text style={styles.textStyle2}>
+                      {pdfData[0].ExtUserPtr.Company}
+                    </Text>
+                  </Text>
+                  <Text style={styles.textStyle}>
+                    Completed on : &nbsp;{changeCompletedDate()}
+                  </Text>
+                  {multiSigner && multiSigner.length > 0 && (
+                    <Text style={styles.textStyle}>
+                      Signers : &nbsp;
+                      <Text style={styles.textStyle2}>
+                        {multiSigner.length}
+                      </Text>
+                    </Text>
+                  )}
+                </View>
+                {isMultiSigners ? (
+                  <View style={{ display: "flex", flexDirection: "column" }}>
+                    <Text
+                      style={{
+                        fontSize: "16px",
+                        fontWeight: "bold",
+                        color: "#31bceb",
+                        margin: "10px 0px 10px 0px"
+                      }}
+                    >
+                      Recipients
+                    </Text>
+
+                    <View>
+                      {multiSigner &&
+                        multiSigner.map((data, ind) => {
+                          return (
+                            <View
+                              key={ind}
+                              style={{
+                                display: "flex",
+                                flexDirection: "column"
+                              }}
+                            >
+                              <View
+                                style={{
+                                  border: "0.4px solid #bdbbbb",
+                                  marginBottom: "10px"
+                                }}
+                              ></View>
+                              {signerName(data)}
+
+                              <Text style={styles.textStyle}>
+                                Accessed from : &nbsp;
+                                <Text style={styles.textStyle2}>
+                                  {data.ipAddress}
+                                </Text>
+                              </Text>
+                            </View>
+                          );
+                        })}
+                    </View>
+                  </View>
+                ) : (
+                  <View style={{ display: "flex", flexDirection: "column" }}>
+                    <Text
+                      style={{
+                        fontSize: "16px",
+                        fontWeight: "bold",
+                        color: "#31bceb",
+                        margin: "10px 0px 10px 0px"
+                      }}
+                    >
+                      Recipients
+                    </Text>
+                    <Text style={styles.textStyle}>
+                      Signers : &nbsp;<Text style={styles.textStyle2}>1</Text>
+                    </Text>
+                    <Text style={styles.textStyle}>
+                      Name : &nbsp;
+                      <Text style={styles.textStyle2}>
+                        {pdfData[0].ExtUserPtr.Name}
+                      </Text>
+                    </Text>
+                    <Text style={styles.textStyle}>
+                      Email : &nbsp;
+                      <Text style={styles.textStyle2}>
+                        {pdfData[0].ExtUserPtr.Email}
+                      </Text>
+                    </Text>
+                    <Text style={styles.textStyle}>
+                      Accessed from : &nbsp;
+                      <Text style={styles.textStyle2}>
+                        {pdfData[0].AuditTrail &&
+                          pdfData[0].AuditTrail[0].ipAddress}
+                      </Text>
+                    </Text>
+
+                    <Text style={styles.textStyle}>
+                      Signed on : &nbsp;{changeCompletedDate()}
+                    </Text>
+                  </View>
+                )}
+              </View>
+            </View>
+          </View>
+        </Page>
+      </Document>
+    )
+  );
+}
+
+export default Certificate;
@@ -1,155 +0,0 @@
-import { useRef, useState } from "react";
-import ModalUi from "../../primitives/ModalUi";
-import { EmailBody } from "./EmailBody";
-import {
-  contractDocument,
-  defaultMailBody,
-  defaultMailSubject,
-  sendEmailToSigners
-} from "../../constant/Utils";
-import { useTranslation } from "react-i18next";
-import Loader from "../../primitives/Loader";
-import { useNavigate } from "react-router";
-
-function CustomizeMail(props) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const copyUrlRef = useRef(null);
-  const [isCustomize, setIsCustomize] = useState(false);
-  const [isLoader, setIsLoader] = useState(false);
-
-  const handleCloseSendmailModal = () => {
-    if (props?.handleClose) {
-      props?.handleClose();
-      return;
-    }
-    props?.setIsMailModal(false);
-    navigate("/report/1MwEuxLEkF");
-  };
-  const handleOnchangeRequest = (value) => {
-    props?.setCustomizeMail((prev) => ({
-      ...prev,
-      body: value
-    }));
-  };
-  const handleEmailSendToSigners = async () => {
-    setIsLoader(true);
-    const documentData = await contractDocument(props?.documentId);
-    if (documentData && documentData?.length > 0) {
-      props?.setDocumentDetails && props?.setDocumentDetails(documentData[0]);
-      if (
-        documentData?.[0]?.SendinOrder &&
-        documentData?.[0]?.SendinOrder === true
-      ) {
-        const ownerEmail = documentData[0].ExtUserPtr.Email;
-        const ownerDetails = documentData[0].Signers.find(
-          (x) => x.Email === ownerEmail
-        );
-        props?.setCurrUserId && props?.setCurrUserId(ownerDetails?.objectId);
-      }
-      //function is used to send email to signers for sign the document
-      const mailRes = await sendEmailToSigners(
-        documentData,
-        props?.signerList,
-        props?.customizeMail,
-        props?.defaultMail,
-        isCustomize,
-      );
-      props?.setIsMailModal(false);
-      props?.setIsSend(true);
-      setIsLoader(false);
-      if (mailRes?.status === "success") {
-        props?.setMailStatus("success");
-      } else if (mailRes?.status === "quota-reached") {
-        props?.setMailStatus("quotareached");
-      } else if (mailRes?.status === "daily-quota-reached") {
-        props?.setMailStatus("dailyquotareached");
-      } else {
-        props?.setMailStatus("failed");
-      }
-      // setMailStatus(mail_status);
-    } else {
-      alert("something-went-wrong-mssg");
-    }
-  };
-  return (
-    <>
-      {isLoader ? (
-        <div className="absolute w-full h-full flex justify-center items-center bg-black/30 rounded-box z-30">
-          <Loader />
-        </div>
-      ) : (
-        <ModalUi
-          isOpen={props?.isMailModal}
-          title={t("send-mail")}
-          handleClose={() => handleCloseSendmailModal()}
-        >
-          <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
-            {!isCustomize && <span>{t("placeholder-alert-3")}</span>}
-            {
-                isCustomize && (
-                  <>
-                    <EmailBody
-                      requestBody={props?.customizeMail?.body}
-                      requestSubject={props?.customizeMail?.subject}
-                      handleOnchangeRequest={handleOnchangeRequest}
-                      setCustomizeMail={props?.setCustomizeMail}
-                    />
-                    <div
-                      className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
-                      onClick={() => {
-                        props?.setCustomizeMail({
-                          subject: defaultMailSubject,
-                          body: defaultMailBody
-                        });
-                      }}
-                    >
-                      <span>{t("reset-to-default")}</span>
-                    </div>
-                  </>
-                )
-            }
-            <div className="flex flex-row items-center gap-2 md:gap-6 mt-2">
-              <div className="flex flex-row gap-2">
-                <button
-                  onClick={() => handleEmailSendToSigners()}
-                  className="op-btn op-btn-primary font-[500] text-sm shadow"
-                >
-                  {t("send")}
-                </button>
-                {isCustomize && (
-                  <button
-                    onClick={() => setIsCustomize(false)}
-                    className="op-btn op-btn-ghost font-[500] text-sm"
-                  >
-                    {t("close")}
-                  </button>
-                )}
-              </div>
-              {
-                  !isCustomize && (
-                    <span
-                      className="op-link op-link-accent text-sm"
-                      onClick={() => setIsCustomize(true)}
-                    >
-                      {t("customize-email")}
-                    </span>
-                  )
-              }
-            </div>
-
-            <div className="flex justify-center items-center mt-3">
-              <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
-              <span className="ml-[5px] mr-[5px]">{t("or")}</span>
-              <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
-            </div>
-            <div className="my-3">{props?.handleShareList()}</div>
-            <p id="copyUrl" ref={copyUrlRef} className="hidden"></p>
-          </div>
-        </ModalUi>
-      )}
-    </>
-  );
-}
-
-export default CustomizeMail;
@@ -0,0 +1,44 @@
+import React from "react";
+function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
+  const confirmToaddDefaultSign = () => {
+    if (xyPostion.length > 0) {
+      setDefaultSignAlert({
+        isShow: true,
+        alertMessage:
+          "Are you sure you want to auto sign at requested all locations?"
+      });
+    } else {
+      setDefaultSignAlert({
+        isShow: true,
+        alertMessage: "please select position!"
+      });
+    }
+  };
+
+  return (
+    <div data-tut="reactourThird">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+        Signature
+      </div>
+      <div className="flex flex-col items-center mt-[10px] font-semibold">
+        <p className="text-base-content">Your Signature</p>
+        <div className="op-card shadow-md h-[111px] w-[90%] p-2">
+          <img
+            alt="signature"
+            className="w-full h-full object-contain"
+            src={defaultSignImg}
+          />
+        </div>
+        <button
+          type="button"
+          className="op-btn op-btn-primary op-btn-sm mt-[10px]"
+          onClick={() => confirmToaddDefaultSign()}
+        >
+          Auto Sign All
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default DefaultSignature;
@@ -1,116 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
-function DefaultSignature(props) {
-  const { t } = useTranslation();
-  const defaultSignImg = useSelector((state) => state.widget.defaultSignImg);
-  const myInitial = useSelector((state) => state.widget.myInitial);
-  const tabName = ["my-signature", "my-initials"];
-  const [activeTab, setActiveTab] = useState(0);
-  const confirmToaddDefaultSign = (type) => {
-    if (props?.xyPosition.length > 0) {
-      //check signature or initial widgets exist or not for auto signing
-      const getCurrentSignerXY = props?.xyPosition.filter(
-        (data) => data.Id === props.uniqueId
-      );
-      const checkIsSignInitialExist = getCurrentSignerXY?.every(
-        (placeholderObj) =>
-          placeholderObj?.placeHolder?.some((placeholder) =>
-            placeholder?.pos?.some((posItem) => posItem?.type === type)
-          )
-      );
-      if (checkIsSignInitialExist) {
-        props?.setDefaultSignAlert({
-          isShow: true,
-          alertMessage: t("default-sign-alert", { widgetsType: type }),
-          type: type
-        });
-      } else {
-        props?.setDefaultSignAlert({
-          isShow: true,
-          alertMessage: t("defaultSign-alert", { widgetsType: type })
-        });
-      }
-    } else {
-      props?.setDefaultSignAlert({
-        isShow: true,
-        alertMessage: t("please-select-position!")
-      });
-    }
-  };
-
-  return (
-    <div data-tut="reactourThird">
-      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-        <p className="text-base-content">{t("signature")}</p>
-      </div>
-      <div className="flex justify-center items-center mt-2">
-        <div role="tablist" className="op-tabs op-tabs-bordered">
-          {tabName.map((tabData, ind) => (
-            <div
-              onClick={() => setActiveTab(ind)}
-              key={ind}
-              role="tab"
-              className={`${
-                activeTab === ind ? "op-tab-active" : ""
-              } op-tab flex items-center pb-10 md:pb-0`}
-            >
-              <span className="ml-1 text-[7px] font-medium md:font-normal md:text-[12px]">
-                {t(`${tabData}`)}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex flex-col items-center mt-[10px] font-semibold relative">
-        <div className="op-card shadow-md h-[111px] w-[90%] p-2">
-          {activeTab === 0 ? (
-            <img
-              alt="signature"
-              className="w-full h-full object-contain"
-              src={defaultSignImg}
-            />
-          ) : (
-            activeTab === 1 &&
-            (myInitial ? (
-              <img
-                alt="signature"
-                className="w-full h-full object-contain"
-                src={myInitial}
-              />
-            ) : (
-              <div className="flex justify-center items-center h-full">
-                <span>{t("initial-alert")}</span>
-              </div>
-            ))
-          )}
-        </div>
-        <button
-          type="button"
-          className="op-btn op-btn-primary op-btn-sm mt-[10px]"
-          onClick={() =>
-            confirmToaddDefaultSign(
-              activeTab === 0 ? "signature" : activeTab === 1 && "initials"
-            )
-          }
-          disabled={
-            activeTab === 0 && !props?.isDefault
-              ? true
-              : activeTab === 1 && !myInitial
-                ? true
-                : false
-          }
-        >
-          {t("auto-sign-all")}
-        </button>
-        {!props.isDefault && (
-          <div className="absolute bg-black/70 text-white w-full h-full flex items-center justify-center text-[11px] cursor-default">
-            <span className="-rotate-45">{t("option-disabled-by-owner")}</span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default DefaultSignature;
@@ -1,21 +1,23 @@
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import LoaderWithMsg from "../../primitives/LoaderWithMsg";
 import { contractDocument } from "../../constant/Utils";
 import HandleError from "../../primitives/HandleError";
-import { useLocation, useNavigate } from "react-router";
-import { useTranslation } from "react-i18next";
-function useQuery() {
-  return new URLSearchParams(useLocation().search);
-}
 function DraftDocument() {
-  const { t } = useTranslation();
  const navigate = useNavigate();
-  const query = useQuery();
-  const docId = query.get("docId");
  const [isLoading, setIsLoading] = useState({
    isLoader: true,
-    message: t("loading-mssg")
+    message: "This might take some time"
  });
+
+  const rowLevel =
+    localStorage.getItem("rowlevel") &&
+    JSON.parse(localStorage.getItem("rowlevel"));
+  const docId =
+    rowLevel && rowLevel?.id
+      ? rowLevel.id
+      : rowLevel?.objectId && rowLevel.objectId;
+
  useEffect(() => {
    getDocumentDetails();
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -30,19 +32,15 @@ function DraftDocument() {
      documentData === "Error: Something went wrong!" ||
      (documentData.result && documentData.result.error)
    ) {
-      if (documentData?.result?.error?.includes("deleted")) {
-        setIsLoading({
-          isLoader: false,
-          message: t("document-deleted")
-        });
-      } else {
-        setIsLoading({
-          isLoader: false,
-          message: t("something-went-wrong-mssg")
-        });
-      }
+      setIsLoading({
+        isLoader: false,
+        message: "Error: Something went wrong!"
+      });
    } else {
-      setIsLoading({ isLoader: false, message: t("no-data") });
+      setIsLoading({
+        isLoader: false,
+        message: "No data found!"
+      });
    }
  };

@@ -55,15 +53,15 @@ function DraftDocument() {
    const signedUrl = data.SignedUrl;
    //checking if document has completed and request signature flow
    if (data?.IsCompleted && signerExist?.length > 0) {
-      navigate(`/recipientSignPdf/${data.objectId}`);
+      navigate(`/pdfRequestFiles/${data.objectId}`);
    }
    //checking if document has completed and signyour-self flow
-    else if ((!signerExist && !isPlaceholder) || data?.IsSignyourself) {
+    else if (!signerExist && !isPlaceholder) {
      navigate(`/signaturePdf/${data.objectId}`);
    }
    //checking if document has declined by someone
    else if (isDecline) {
-      navigate(`/recipientSignPdf/${data.objectId}`);
+      navigate(`/pdfRequestFiles/${data.objectId}`);
      //checking draft type document
    } else if (
      signerExist?.length > 0 &&
@@ -73,8 +71,8 @@ function DraftDocument() {
      navigate(`/placeHolderSign/${data.objectId}`);
    }
    //Inprogress document
-    else if (isPlaceholder?.length > 0 && signedUrl) {
-      navigate(`/recipientSignPdf/${data.objectId}`);
+    else if (isPlaceholder?.length > 0 && signerExist?.length > 0) {
+      navigate(`/pdfRequestFiles/${data.objectId}`);
    } //placeholder draft document
    else if (
      (signerExist?.length > 0 &&
@@ -1,5 +1,5 @@
-import { widgets } from "../../constant/Utils";
-import getWidgetType from "./getWidgetType";
+import React from "react";
+import { getWidgetType, widgets } from "../../constant/Utils";

 function DragElement(item) {
  const getWidgets = widgets;
@@ -1,77 +0,0 @@
-import { useDragLayer } from "react-dnd";
-import { defaultWidthHeight } from "../../constant/Utils";
-import { useEffect, useRef } from "react";
-
-function DragGuideLinesLayer(props) {
-  const { showGuidelines } = props;
-  const prevDragState = useRef({ isDragging: false, x: 0, y: 0 });
-  const { isDraggingWidget, offset, itemType } = useDragLayer((monitor) => ({
-    isDraggingWidget: monitor.isDragging(),
-    offset: monitor.getClientOffset(),
-    itemType: monitor.getItem()
-  }));
-  useEffect(() => {
-    //  Hide guidelines when dragging stops
-    if (!isDraggingWidget) {
-      showGuidelines(false);
-      return;
-    }
-    if (!offset) return;
-    //getting container by id
-    const container = document.getElementById("container");
-    if (!container) return;
-    if (itemType?.text) {
-      // Calculate the position of the dragged element relative to the container
-      // Get the container's bounding rectangle (position and size in the viewport)
-      const containerRect = container.getBoundingClientRect();
-
-      // Compute the X and Y coordinates of the dragged item inside the container
-      // by subtracting the container's top-left offset from the current drag offset
-      const x = offset.x - containerRect.left;
-      const y = offset.y - containerRect.top;
-
-      //  Check if there’s any change in the dragging state or the dragged element’s position
-      // Compare the current drag state with the previously stored one
-      const hasStateChanged =
-        prevDragState.current.isDragging !== isDraggingWidget || // Drag started or stopped
-        prevDragState.current.x !== x || // X position changed
-        prevDragState.current.y !== y; // Y position changed
-
-      if (hasStateChanged) {
-        //  Update the previous drag state with the latest values
-        prevDragState.current = { isDragging: isDraggingWidget, x, y };
-        if (isDraggingWidget) {
-          //  Adjust the current drag coordinates relative to the initial widgets button position
-          const getXPosition = props?.signBtnPosition?.[0]
-            ? x - props.signBtnPosition[0].xPos
-            : x;
-          const getYPosition = props?.signBtnPosition?.[0]
-            ? y - props.signBtnPosition[0].yPos
-            : y;
-
-          //  Get the default width and height of the dragged checkbox/radio widget type
-          const el = document.getElementById("checkbox&radio-preview");
-          let rect;
-          if (el) {
-            rect = el.getBoundingClientRect();
-          }
-          const widget = {
-            type: itemType?.text,
-            width: defaultWidthHeight(itemType?.text).width,
-            height: defaultWidthHeight(itemType?.text).height
-          };
-
-          const getWidth =
-            rect?.width || props?.posWidth(widget, props?.isSignYourself);
-          const getHeight =
-            rect?.height || props?.posHeight(widget, props?.isSignYourself);
-
-          //  Display the alignment guidelines based on the current drag position and widget size
-          showGuidelines(true, getXPosition, getYPosition, getWidth, getHeight);
-        }
-      }
-    }
-  }, [isDraggingWidget, offset, itemType, showGuidelines]);
-}
-
-export default DragGuideLinesLayer;
@@ -0,0 +1,389 @@
+import React, { useEffect, useState } from "react";
+import { isEnableSubscription } from "../../constant/const";
+import ModalUi from "../../primitives/ModalUi";
+import { radioButtonWidget } from "../../constant/Utils";
+import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
+import Upgrade from "../../primitives/Upgrade";
+function DropdownWidgetOption(props) {
+  const [dropdownOptionList, setDropdownOptionList] = useState([
+    "option-1",
+    "option-2"
+  ]);
+  const [minCount, setMinCount] = useState(0);
+  const [maxCount, setMaxCount] = useState(0);
+  const [dropdownName, setDropdownName] = useState(props.type);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [isHideLabel, setIsHideLabel] = useState(false);
+  const [status, setStatus] = useState("required");
+  const [defaultValue, setDefaultValue] = useState("");
+  const statusArr = ["required", "optional"];
+  const [defaultCheckbox, setDefaultCheckbox] = useState([]);
+
+  const resetState = () => {
+    setDropdownOptionList(["option-1", "option-2"]);
+    setDropdownName(props.type);
+    setIsReadOnly(false);
+    setIsHideLabel(false);
+    setMinCount(0);
+    setMaxCount(0);
+    setDefaultCheckbox([]);
+    setDefaultValue("");
+  };
+
+  useEffect(() => {
+    if (
+      props.currWidgetsDetails?.options?.name &&
+      props.currWidgetsDetails?.options?.values
+    ) {
+      setDropdownName(props.currWidgetsDetails?.options?.name);
+      setDropdownOptionList(props.currWidgetsDetails?.options?.values);
+      setMinCount(
+        props.currWidgetsDetails?.options?.validation?.minRequiredCount
+      );
+      setMaxCount(
+        props.currWidgetsDetails?.options?.validation?.maxRequiredCount
+      );
+      setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
+      setIsHideLabel(props.currWidgetsDetails?.options?.isHideLabel);
+      setStatus(props.currWidgetsDetails?.options?.status || "required");
+      setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
+      setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
+    } else {
+      setStatus("required");
+      resetState();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.currWidgetsDetails]);
+  const handleInputChange = (index, value) => {
+    setDropdownOptionList((prevInputs) => {
+      const newInputs = [...prevInputs];
+      newInputs[index] = value;
+      return newInputs;
+    });
+  };
+
+  //function add add checkbox option and add width of checkbox
+  const handleAddInput = () => {
+    const deleteOption = false;
+    const addOption = true;
+    setDropdownOptionList((prevInputs) => [...prevInputs, ""]);
+    props.handleSaveWidgetsOptions(
+      null,
+      null,
+      null,
+      null,
+      null,
+      addOption,
+      deleteOption
+    );
+  };
+
+  //function add add checkbox option and delete width of checkbox
+  const handleDeleteInput = (ind) => {
+    const deleteOption = true;
+    const addOption = false;
+    const getUpdatedOptions = dropdownOptionList.filter(
+      (data, index) => index !== ind
+    );
+    setDropdownOptionList(getUpdatedOptions);
+    props.handleSaveWidgetsOptions(
+      null,
+      null,
+      null,
+      null,
+      null,
+      addOption,
+      deleteOption
+    );
+  };
+
+  const handleSaveOption = () => {
+    const defaultData =
+      defaultCheckbox && defaultCheckbox.length > 0
+        ? defaultCheckbox
+        : defaultValue;
+
+    props.handleSaveWidgetsOptions(
+      dropdownName,
+      dropdownOptionList,
+      minCount,
+      maxCount,
+      isReadOnly,
+      null,
+      null,
+      status,
+      defaultData,
+      isHideLabel
+    );
+    //  props.setShowDropdown(false);
+    setDropdownOptionList(["option-1", "option-2"]);
+    setDropdownName(props.type);
+    //  props.setCurrWidgetsDetails({});
+    setIsReadOnly(false);
+    setIsHideLabel(false);
+    setMinCount(0);
+    setMaxCount(0);
+    setDefaultCheckbox([]);
+    setDefaultValue("");
+  };
+
+  const handleSetMinMax = (e) => {
+    const minValue = e.target.value;
+    if (minValue > dropdownOptionList.length) {
+      return "";
+    } else {
+      return minValue;
+    }
+  };
+
+  const handleDefaultCheck = (index) => {
+    const getDefaultCheck = defaultCheckbox.includes(index);
+    if (getDefaultCheck) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  return (
+    <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
+      <div className="h-full p-[15px] text-base-content">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSaveOption();
+          }}
+        >
+          <div>
+            <label className="text-[13px] font-semibold">
+              Name<span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              required
+              defaultValue={dropdownName}
+              value={dropdownName}
+              onChange={(e) => setDropdownName(e.target.value)}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+
+            <label className="text-[13px] font-semibold mt-[5px]">
+              Options
+            </label>
+            <div className="flex flex-col">
+              {dropdownOptionList.map((option, index) => (
+                <div
+                  key={index}
+                  className="flex flex-row mb-[5px] items-center"
+                >
+                  {props.type === "checkbox" && !props.isSignYourself && (
+                    <input
+                      type="checkbox"
+                      checked={handleDefaultCheck(index)}
+                      onChange={(e) => {
+                        if (e.target.checked) {
+                          const getDefaultCheck =
+                            defaultCheckbox?.includes(index);
+                          if (!getDefaultCheck) {
+                            setDefaultCheckbox((prev) => [...prev, index]);
+                          }
+                        } else {
+                          const removeOption = defaultCheckbox.filter(
+                            (data) => data !== index
+                          );
+                          setDefaultCheckbox(removeOption);
+                        }
+                      }}
+                      className="op-checkbox focus:outline-none hover:border-base-content mr-[5px]"
+                    />
+                  )}
+                  <input
+                    required
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    type="text"
+                    value={option}
+                    onChange={(e) => handleInputChange(index, e.target.value)}
+                  />
+
+                  <i
+                    className="fa-solid fa-rectangle-xmark text-[25px] ml-[10px] text-error"
+                    onClick={() => handleDeleteInput(index)}
+                  ></i>
+                </div>
+              ))}
+              <i
+                onClick={handleAddInput}
+                className="fa-solid fa-square-plus text-[25px] ml-[10px] text-primary"
+              ></i>
+              <div>
+                {props.type === "checkbox" && !props.isSignYourself && (
+                  <>
+                    <label
+                      className={`${
+                        !props.isSubscribe ? "text-[gray]" : ""
+                      } text-[13px] font-semibold`}
+                    >
+                      Minimun check
+                    </label>
+                    {!props.isSubscribe && isEnableSubscription && <Upgrade />}
+                    <input
+                      required
+                      defaultValue={0}
+                      value={minCount}
+                      onChange={(e) => {
+                        const count = handleSetMinMax(e);
+                        setMinCount(count);
+                      }}
+                      className={`${
+                        props.isSubscribe || !isEnableSubscription
+                          ? ""
+                          : "pointer-events-none bg-opacity-50"
+                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
+                    />
+                    <label
+                      className={`${
+                        !props.isSubscribe ? "text-[gray]" : ""
+                      } text-[13px] font-semibold`}
+                    >
+                      Maximum check
+                    </label>
+                    <input
+                      required
+                      defaultValue={0}
+                      value={maxCount}
+                      onChange={(e) => {
+                        const count = handleSetMinMax(e);
+                        setMaxCount(count);
+                      }}
+                      className={`${
+                        props.isSubscribe || !isEnableSubscription
+                          ? ""
+                          : "pointer-events-none bg-opacity-50"
+                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+            {["dropdown", radioButtonWidget].includes(props.type) && (
+              <>
+                <label className="text-[13px] font-semibold mt-[5px]">
+                  Default value
+                </label>
+                <select
+                  onChange={(e) => setDefaultValue(e.target.value)}
+                  className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  name="defaultvalue"
+                  value={defaultValue}
+                  placeholder="select default value"
+                >
+                  <option value="" disabled hidden className="text-[13px]">
+                    Select...
+                  </option>
+                  {dropdownOptionList.map((data, ind) => {
+                    return (
+                      <option className="text-[13px]" key={ind} value={data}>
+                        {data}
+                      </option>
+                    );
+                  })}
+                </select>
+              </>
+            )}
+            {props.type !== "checkbox" && props.type !== radioButtonWidget && (
+              <>
+                <div className="flex flex-row gap-[10px] mt-[0.5rem]">
+                  {statusArr.map((data, ind) => {
+                    return (
+                      <div
+                        key={ind}
+                        className="flex flex-row gap-[5px] items-center"
+                      >
+                        <input
+                          className="op-radio op-radio-xs my-1"
+                          type="radio"
+                          name="status"
+                          onChange={() => setStatus(data.toLowerCase())}
+                          checked={status.toLowerCase() === data.toLowerCase()}
+                        />
+                        <div className="text-[13px] font-500">{data}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </>
+            )}
+            {["checkbox", radioButtonWidget].includes(props.type) && (
+              <div className="flex flex-row gap-5 my-2 items-center text-center">
+                {!props.isSignYourself && (
+                  <div className="flex items-center">
+                    <input
+                      id="isreadonly"
+                      type="checkbox"
+                      checked={isReadOnly}
+                      className="op-checkbox op-checkbox-sm"
+                      onChange={(e) => setIsReadOnly(e.target.checked)}
+                    />
+                    <label className="ml-1 mb-0" htmlFor="isreadonly">
+                      Is read only
+                    </label>
+                  </div>
+                )}
+                <div className="flex items-center">
+                  <input
+                    id="ishidelabel"
+                    type="checkbox"
+                    checked={isHideLabel}
+                    className="op-checkbox op-checkbox-sm"
+                    onChange={(e) => setIsHideLabel(e.target.checked)}
+                  />
+
+                  <label className="ml-1 mb-0" htmlFor="ishidelabel">
+                    Hide labels
+                  </label>
+                </div>
+              </div>
+            )}
+          </div>
+          {props.type === "checkbox" &&
+            !props.isSignYourself &&
+            !isEnableSubscription && (
+              <PremiumAlertHeader
+                message={
+                  "Field validations are free in beta, this feature will incur a fee later."
+                }
+              />
+            )}
+          <div
+            className={`${
+              props.type === "checkbox" && !props.isSignYourself
+                ? "mb-[15px]"
+                : "my-[15px]"
+            } w-full h-[1px] bg-[#9f9f9f]`}
+          ></div>
+
+          <button
+            disabled={dropdownOptionList.length === 0 && true}
+            type="submit"
+            className="op-btn op-btn-primary"
+          >
+            Save
+          </button>
+          {props.currWidgetsDetails?.options?.values?.length > 0 && (
+            <button
+              type="submit"
+              className="op-btn op-btn-ghost ml-1"
+              onClick={() => {
+                props.handleClose && props.handleClose();
+                resetState();
+              }}
+            >
+              Cancel
+            </button>
+          )}
+        </form>
+      </div>
+    </ModalUi>
+  );
+}
+
+export default DropdownWidgetOption;
@@ -1,435 +0,0 @@
-import { useEffect, useState } from "react";
-import ModalUi from "../../primitives/ModalUi";
-import { radioButtonWidget } from "../../constant/Utils";
-import { useTranslation } from "react-i18next";
-import { fontColorArr, fontsizeArr } from "../../constant/Utils";
-
-function DropdownWidgetOption(props) {
-  const { t } = useTranslation();
-  const [dropdownOptionList, setDropdownOptionList] = useState([
-    "Option-1",
-    "Option-2"
-  ]);
-  const [minCount, setMinCount] = useState(0);
-  const [maxCount, setMaxCount] = useState(0);
-  const [dropdownName, setDropdownName] = useState();
-  const [isReadOnly, setIsReadOnly] = useState(false);
-  const [isHideLabel, setIsHideLabel] = useState(false);
-  const [status, setStatus] = useState("required");
-  const [defaultValue, setDefaultValue] = useState("");
-  const [defaultCheckbox, setDefaultCheckbox] = useState([]);
-  const [layout, setLayout] = useState("vertical");
-  const statusArr = ["required", "optional"];
-  const layoutArr = ["vertical", "horizontal"];
-  const isPrefillExist = props?.roleName === "prefill";
-
-  const resetState = () => {
-    setDropdownOptionList(["Option-1", "Option-2"]);
-    setDropdownName(props.currWidgetsDetails?.options?.name || props.type);
-    setIsReadOnly(false);
-    setIsHideLabel(false);
-    setMinCount(0);
-    setMaxCount(0);
-    setDefaultCheckbox([]);
-    setDefaultValue("");
-    setLayout("vertical");
-  };
-  useEffect(() => {
-    if (
-      props.currWidgetsDetails?.options?.name &&
-      props.currWidgetsDetails?.options?.values?.length > 0
-    ) {
-      setDropdownName(props.currWidgetsDetails?.options?.name);
-      setDropdownOptionList(props.currWidgetsDetails?.options?.values);
-      setMinCount(
-        props.currWidgetsDetails?.options?.validation?.minRequiredCount
-      );
-      setMaxCount(
-        props.currWidgetsDetails?.options?.validation?.maxRequiredCount
-      );
-      setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
-      setIsHideLabel(props.currWidgetsDetails?.options?.isHideLabel);
-      setStatus(props.currWidgetsDetails?.options?.status || "required");
-      setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
-      setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
-      setLayout(props.currWidgetsDetails?.options?.layout || "vertical");
-    } else {
-      setStatus("required");
-      resetState();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.currWidgetsDetails]);
-  const handleInputChange = (index, value) => {
-    setDropdownOptionList((prevInputs) => {
-      const newInputs = [...prevInputs];
-      newInputs[index] = value;
-      return newInputs;
-    });
-  };
-
-  //function add add checkbox option and add width of checkbox
-  const handleAddInput = () => {
-    const deleteOption = false;
-    const addOption = true;
-    setDropdownOptionList((prevInputs) => [...prevInputs, ""]);
-    props.handleSaveWidgetsOptions(
-      null,
-      null,
-      null,
-      null,
-      null,
-      addOption,
-      deleteOption
-    );
-  };
-
-  //function add add checkbox option and delete width of checkbox
-  const handleDeleteInput = (ind) => {
-    const deleteOption = true;
-    const addOption = false;
-    const getUpdatedOptions = dropdownOptionList.filter(
-      (_, index) => index !== ind
-    );
-    setDropdownOptionList(getUpdatedOptions);
-    props.handleSaveWidgetsOptions(
-      null,
-      null,
-      null,
-      null,
-      null,
-      addOption,
-      deleteOption
-    );
-  };
-
-  const handleSaveOption = () => {
-    if (["checkbox", radioButtonWidget, "dropdown"].includes(props.type)) {
-      const allUnique =
-        new Set(dropdownOptionList).size === dropdownOptionList.length;
-      if (!allUnique) {
-        alert("Please remove duplicate option");
-        return;
-      }
-    }
-
-    const isDropdownOrRadio =
-      props?.type === "dropdown" || props?.type === radioButtonWidget;
-    const isCheckbox = props?.type === "checkbox";
-
-    const defaultData = isCheckbox ? defaultCheckbox : defaultValue;
-
-    const readOnlyWithoutValue =
-      isReadOnly && !defaultValue && status !== "optional";
-    const WidgetLayout = ["checkbox", radioButtonWidget].includes(props.type)
-      ? layout
-      : null;
-
-    // If it’s a dropdown and it’s read-only without a value (nor marked optional), stop here.
-    if (isDropdownOrRadio && readOnlyWithoutValue) {
-      alert(t("readonly-error", { widgetName: props?.type }));
-      return;
-    } else if (
-      isCheckbox &&
-      isReadOnly &&
-      minCount > 0 &&
-      defaultCheckbox?.length === 0
-    ) {
-      alert(t("readonly-error", { widgetName: props?.type }));
-      return;
-    }
-
-    // Otherwise (either not a dropdown, or a valid dropdown), do the save + reset exactly once.
-    props.handleSaveWidgetsOptions(
-      dropdownName,
-      dropdownOptionList,
-      minCount,
-      maxCount,
-      isReadOnly,
-      null,
-      null,
-      status,
-      defaultData,
-      isHideLabel,
-      WidgetLayout
-    );
-    resetState();
-  };
-
-
-  const handleSelectDefaultCheckbox = (e, index) => {
-    const checked = e.target.checked;
-    setDefaultCheckbox((prev) =>
-      checked
-        ? prev.includes(index)
-          ? prev
-          : [...prev, index]
-        : prev.filter((i) => i !== index)
-    );
-  };
-  return (
-    <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
-      <div className="h-full p-[15px] text-base-content">
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            handleSaveOption();
-          }}
-        >
-          <div>
-            <label htmlFor="title" className="text-[13px] font-semibold">
-              {t("name")}
-              <span className="text-[red] text-[13px]"> *</span>
-            </label>
-            <input
-              id="title"
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              value={dropdownName}
-              onChange={(e) => setDropdownName(e.target.value)}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              required
-            />
-
-            <label className="text-[13px] font-semibold mt-[5px]">
-              {t("options")}
-            </label>
-            <div className="flex flex-col">
-              {dropdownOptionList?.map((option, index) => (
-                <div
-                  key={index}
-                  className="flex flex-row mb-[5px] items-center"
-                >
-                  {props.type === "checkbox" && props.isShowAdvanceFeature && (
-                    <input
-                      type="checkbox"
-                      checked={defaultCheckbox?.includes(index)}
-                      onChange={(e) => handleSelectDefaultCheckbox(e, index)}
-                      className="op-checkbox focus:outline-none hover:border-base-content mr-[5px]"
-                    />
-                  )}
-                  <input
-                    onInvalid={(e) =>
-                      e.target.setCustomValidity(t("input-required"))
-                    }
-                    onInput={(e) => e.target.setCustomValidity("")}
-                    required
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                    type="text"
-                    value={option}
-                    onChange={(e) => handleInputChange(index, e.target.value)}
-                  />
-
-                  <i
-                    className="fa-light fa-rectangle-xmark text-[25px] ml-[10px] text-accent cursor-pointer"
-                    onClick={() => handleDeleteInput(index)}
-                  ></i>
-                </div>
-              ))}
-              <div>
-                <i
-                  className="fa-light fa-square-plus text-[25px] ml-[10px] op-text-primary cursor-pointer"
-                  aria-label="Add option"
-                  onClick={handleAddInput}
-                ></i>
-              </div>
-            </div>
-            {["dropdown", radioButtonWidget].includes(props.type) &&
-              !isPrefillExist && (
-                <>
-                  <label className="text-[13px] font-semibold mt-[5px]">
-                    {t("default-value")}
-                  </label>
-                  <select
-                    value={defaultValue}
-                    onChange={(e) => setDefaultValue(e.target.value)}
-                    className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
-                    name="defaultvalue"
-                  >
-                    <option value="" disabled hidden className="text-[13px]">
-                      {t("select")}...
-                    </option>
-                    {dropdownOptionList.map((data, ind) => {
-                      return (
-                        <option className="text-[13px]" key={ind} value={data}>
-                          {data}
-                        </option>
-                      );
-                    })}
-                  </select>
-                </>
-              )}
-            {((props.type !== "checkbox" && !isPrefillExist) ||
-              isPrefillExist) && (
-              <div className="flex flex-row gap-[10px] mt-[0.5rem]">
-                {statusArr.map((data, ind) => (
-                  <div
-                    key={ind}
-                    className="flex flex-row gap-[5px] items-center"
-                  >
-                    <input
-                      className="op-radio op-radio-xs my-1"
-                      type="radio"
-                      name="status"
-                      onChange={() => setStatus(data.toLowerCase())}
-                      checked={status.toLowerCase() === data.toLowerCase()}
-                    />
-                    <div className="text-[13px] font-500 capitalize">
-                      {data}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-            <div className="flex items-center mt-3 mb-3">
-              <span>{t("font-size")} :</span>
-              <select
-                className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-                value={
-                  props.fontSize ||
-                  props.currWidgetsDetails?.options?.fontSize ||
-                  12
-                }
-                onChange={(e) => props.setFontSize(parseInt(e.target.value))}
-              >
-                {fontsizeArr.map((size, ind) => {
-                  return (
-                    <option className="text-[13px]" value={size} key={ind}>
-                      {size}
-                    </option>
-                  );
-                })}
-              </select>
-              <div className="flex flex-row gap-1 items-center ml-4">
-                <span className="capitalize">{t("color")} : </span>
-                <select
-                  value={
-                    props.fontColor ||
-                    props.currWidgetsDetails?.options?.fontColor ||
-                    "black"
-                  }
-                  onChange={(e) => props.setFontColor(e.target.value)}
-                  className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-                >
-                  {fontColorArr.map((color, ind) => {
-                    return (
-                      <option value={color} key={ind}>
-                        {t(`color-type.${color}`)}
-                      </option>
-                    );
-                  })}
-                </select>
-                <span
-                  style={{
-                    background:
-                      props.fontColor ||
-                      props.currWidgetsDetails?.options?.fontColor ||
-                      "black"
-                  }}
-                  className="w-5 h-[19px] ml-1"
-                ></span>
-              </div>
-            </div>
-            {["checkbox", radioButtonWidget, "dropdown"].includes(
-              props.type
-            ) && (
-              <div className="flex flex-row gap-5 my-2 items-center text-center">
-                {props.isShowAdvanceFeature && !isPrefillExist && (
-                  <div className="flex items-center">
-                    <input
-                      id="isreadonly"
-                      type="checkbox"
-                      checked={isReadOnly}
-                      className="op-checkbox op-checkbox-sm"
-                      onChange={(e) => setIsReadOnly(e.target.checked)}
-                    />
-                    <label
-                      className="ml-2 mb-0 capitalize"
-                      htmlFor="isreadonly"
-                    >
-                      {t("read-only")}
-                    </label>
-                  </div>
-                )}
-                {props.type !== "dropdown" && (
-                  <div className="flex items-center">
-                    <input
-                      id="ishidelabel"
-                      type="checkbox"
-                      checked={isHideLabel}
-                      className="op-checkbox op-checkbox-sm"
-                      onChange={(e) => setIsHideLabel(e.target.checked)}
-                    />
-
-                    <label
-                      className="ml-2 mb-0 capitalize"
-                      htmlFor="ishidelabel"
-                    >
-                      {t("hide-labels")}
-                    </label>
-                  </div>
-                )}
-              </div>
-            )}
-            {["checkbox", radioButtonWidget].includes(props.type) && (
-              <>
-                <div className="text-[13px] font-semibold mt-[5px] capitalize">
-                  {t("layout")}
-                </div>
-                <div
-                  className={`${props.type === "checkbox" ? "mb-[10px]" : ""} flex flex-row gap-[10px] mt-[0.5rem]`}
-                >
-                  {layoutArr.map((data, ind) => (
-                    <div
-                      key={ind}
-                      className="flex flex-row gap-[5px] items-center"
-                    >
-                      <input
-                        className="op-radio op-radio-xs my-1"
-                        type="radio"
-                        name="layout"
-                        checked={layout.toLowerCase() === data.toLowerCase()}
-                        onChange={() => setLayout(data.toLowerCase())}
-                      />
-                      <label className="text-[13px] font-500 mb-0">
-                        {t(data)}
-                      </label>
-                    </div>
-                  ))}
-                </div>
-              </>
-            )}
-          </div>
-          <div
-            className={`${
-              props.type === "checkbox" && props.isShowAdvanceFeature
-                ? "mb-[15px]"
-                : "my-[15px]"
-            } w-full h-[1px] bg-[#9f9f9f]`}
-          ></div>
-
-          <button
-            disabled={dropdownOptionList.length === 0 && true}
-            type="submit"
-            className="op-btn op-btn-primary"
-          >
-            {t("save")}
-          </button>
-          {props.currWidgetsDetails?.options?.values?.length > 0 && (
-            <button
-              type="submit"
-              className="op-btn op-btn-ghost text-base-content ml-1"
-              onClick={() => {
-                props.handleClose && props.handleClose();
-                resetState();
-              }}
-            >
-              {t("cancel")}
-            </button>
-          )}
-        </form>
-      </div>
-    </ModalUi>
-  );
-}
-
-export default DropdownWidgetOption;
@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from "react";
+import { checkIsSubscribed, getFileName } from "../../constant/Utils";
+import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
+import Upgrade from "../../primitives/Upgrade";
+import { isEnableSubscription } from "../../constant/const";
+// import SelectFolder from "../../premitives/SelectFolder";
+
+const EditTemplate = ({ template, onSuccess }) => {
+  // const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
+  const [formData, setFormData] = useState({
+    Name: template?.Name || "",
+    Note: template?.Note || "",
+    Description: template?.Description || "",
+    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false",
+    AutomaticReminders: template?.AutomaticReminders || false,
+    RemindOnceInEvery: template?.RemindOnceInEvery || 5
+  });
+  const [isSubscribe, setIsSubscribe] = useState(false);
+  useEffect(() => {
+    fetchSubscription();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const fetchSubscription = async () => {
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      setIsSubscribe(getIsSubscribe);
+    }
+  };
+  const handleStrInput = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  // const handleFolder = (data) => {
+  //   console.log("handleFolder ", data)
+  //   setFolder(data);
+  // };
+
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const isChecked = formData.SendinOrder === "true" ? true : false;
+    const AutoReminder = formData?.AutomaticReminders || false;
+
+    let reminderDate = {};
+    if (AutoReminder) {
+      const RemindOnceInEvery = parseInt(formData?.RemindOnceInEvery);
+      const ReminderDate = new Date(template?.createdAt);
+      ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
+      reminderDate = { NextReminderDate: ReminderDate };
+    }
+    const data = { ...formData, SendinOrder: isChecked, ...reminderDate };
+    onSuccess(data);
+  };
+  const handleAutoReminder = () => {
+    setFormData((prev) => ({
+      ...prev,
+      AutomaticReminders: !formData.AutomaticReminders
+    }));
+  };
+  return (
+    <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
+      <div className="text-base-content">
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="name" className="text-[13px]">
+              File
+            </label>
+            <div className="op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs">
+              {getFileName(template.URL)}
+            </div>
+          </div>
+          <div className="form-section">
+            <label htmlFor="name" className="text-[13px]">
+              Name
+              <span className="text-[13px] text-[red]"> *</span>
+            </label>
+            <input
+              type="text"
+              name="Name"
+              value={formData.Name}
+              onChange={(e) => handleStrInput(e)}
+              required
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="form-section">
+            <label htmlFor="Note" className="text-[13px]">
+              Note
+            </label>
+            <input
+              type="text"
+              name="Note"
+              id="Note"
+              value={formData.Note}
+              onChange={(e) => handleStrInput(e)}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="form-section">
+            <label htmlFor="Description" className="text-[13px]">
+              Description
+            </label>
+            <input
+              type="text"
+              name="Description"
+              id="Description"
+              value={formData.Description}
+              onChange={(e) => handleStrInput(e)}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            />
+          </div>
+          <div className="form-section">
+            <label className="text-[13px]">Send In Order</label>
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
+              <input
+                type="radio"
+                value={"true"}
+                className="op-radio op-radio-xs"
+                name="SendinOrder"
+                checked={formData.SendinOrder === "true"}
+                onChange={handleStrInput}
+              />
+              <div className="text-[12px]">Yes</div>
+            </div>
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
+              <input
+                type="radio"
+                value={"false"}
+                name="SendinOrder"
+                className="op-radio op-radio-xs"
+                checked={formData.SendinOrder === "false"}
+                onChange={handleStrInput}
+              />
+              <div className="text-[12px]">No</div>
+            </div>
+          </div>
+          <div className="text-xs mt-2">
+            {!isEnableSubscription && (
+              <PremiumAlertHeader
+                message={
+                  "Disable Auto reminder is free in beta, this feature will incur a fee later."
+                }
+              />
+            )}
+            <span
+              className={
+                isSubscribe || !isEnableSubscription
+                  ? "font-semibold"
+                  : "font-semibold text-gray-300"
+              }
+            >
+              Auto reminder{"  "}
+              {!isSubscribe && isEnableSubscription && <Upgrade />}
+            </span>
+            <label
+              className={`${
+                isSubscribe || !isEnableSubscription
+                  ? "cursor-pointer "
+                  : "pointer-events-none opacity-50"
+              } relative block items-center mb-0`}
+            >
+              <input
+                checked={formData.AutomaticReminders}
+                onChange={handleAutoReminder}
+                type="checkbox"
+                className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white mt-2"
+              />
+            </label>
+          </div>
+          {isSubscribe && formData?.AutomaticReminders === true && (
+            <div className="text-xs mt-2">
+              <label className="block">
+                Remind once in every (Days)
+                <span className="text-red-500 text-[13px]">*</span>
+              </label>
+              <input
+                type="number"
+                value={formData.RemindOnceInEvery}
+                name="RemindOnceInEvery"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                onChange={handleStrInput}
+                required
+              />
+            </div>
+          )}
+          <div className="mt-[1rem] flex justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
+              Submit
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditTemplate;
@@ -1,596 +0,0 @@
-import {
-  useState,
-  useRef,
-} from "react";
-import {
-  base64ToArrayBuffer,
-  convertBase64ToFile,
-  generatePdfName,
-  getFileName
-} from "../../constant/Utils";
-import {
-  maxDescriptionLength,
-  maxNoteLength,
-  maxTitleLength
-} from "../../constant/const";
-import { useTranslation } from "react-i18next";
-import { Tooltip } from "react-tooltip";
-import SignersInput from "../shared/fields/SignersInput";
-import { PDFDocument } from "pdf-lib";
-import ModalUi from "../../primitives/ModalUi";
-import { SaveFileSize } from "../../constant/saveFileSize";
-
-const EditTemplate = ({
-  title,
-  handleClose,
-  pdfbase64,
-  template,
-  onSuccess,
-  setPdfArrayBuffer,
-  setPdfBase64Url,
-  isAddYourSelfCheckbox,
-}) => {
-  const appName =
-    "OpenSign™";
-  const { t } = useTranslation();
-  const inputFileRef = useRef(null);
-  const [formData, setFormData] = useState({
-    Name: template?.Name || "",
-    Note: template?.Note || "",
-    Description: template?.Description || "",
-    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false",
-    AutomaticReminders: template?.AutomaticReminders || false,
-    RemindOnceInEvery: template?.RemindOnceInEvery || 5,
-    IsEnableOTP: template?.IsEnableOTP ? `${template?.IsEnableOTP}` : "false",
-    IsTourEnabled: template?.IsTourEnabled
-      ? `${template?.IsTourEnabled}`
-      : "false",
-    NotifyOnSignatures:
-      template?.NotifyOnSignatures !== undefined
-        ? template?.NotifyOnSignatures
-        : false,
-    Bcc: template?.Bcc,
-    RedirectUrl: template?.RedirectUrl || "",
-    AllowModifications: template?.AllowModifications || false,
-    TimeToCompleteDays: template?.TimeToCompleteDays || 15,
-  });
-  const pensList = ["blue", "red", "black"];
-  const [selectedColors, setSelectedColors] = useState(
-    template?.PenColors || pensList
-  );
-  const [isUpdate, setIsUpdate] = useState(false);
-  const [showConfirm, setShowConfirm] = useState(false);
-  const [uploadPdf, setUploadPdf] = useState({
-    name: "",
-    base64: "",
-    url: ""
-  });
-  const handleDrop = (e) => {
-    e.preventDefault();
-    const file = e.dataTransfer.files[0];
-    handleFile(file);
-  };
-
-  const handleFile = (file) => {
-    if (file && file.type === "application/pdf") {
-      handleReplaceFileValdition(file);
-      // You can handle the file here
-    } else {
-      alert(t("only-pdf-allowed"));
-      if (inputFileRef.current) inputFileRef.current.value = "";
-    }
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-  };
-
-  // `isValidURL` is used to check valid webhook url
-  function isValidURL(value) {
-    try {
-      const url = new URL(value);
-      return url.protocol === "https:" || url.protocol === "http:";
-    } catch (error) {
-      return false;
-    }
-  }
-
-  const handleStrInput = (e) => {
-    setIsUpdate(true);
-    setFormData({ ...formData, [e.target.name]: e.target.value });
-  };
-  const getPdfMetadataHash = async (pdfBytes) => {
-    const pdfDoc = await PDFDocument.load(pdfBytes);
-    const pages = pdfDoc.getPages();
-    const metaString = pages
-      .map((page, index) => {
-        const { width, height } = page.getSize();
-        return `${index + 1}:${Math.round(width)}x${Math.round(height)}`;
-      })
-      .join("|");
-    const encoder = new TextEncoder();
-    const data = encoder.encode(metaString);
-    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
-    return Array.from(new Uint8Array(hashBuffer))
-      .map((b) => b.toString(16).padStart(2, "0"))
-      .join("");
-  };
-
-  const handleFileInput = async (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
-    handleReplaceFileValdition(file);
-  };
-  const handleReplaceFileValdition = async (file) => {
-    try {
-      const basePdfBytes = base64ToArrayBuffer(pdfbase64);
-      const expectedHash = await getPdfMetadataHash(basePdfBytes);
-      const fileReader = new FileReader();
-      fileReader.onload = async (event) => {
-        const uploadedPdfBytes = event.target.result;
-        const uploadedHash = await getPdfMetadataHash(uploadedPdfBytes);
-
-        if (expectedHash === uploadedHash) {
-          const arrayBuffer = uploadedPdfBytes;
-          const uint8Array = new Uint8Array(arrayBuffer);
-          const binaryString = Array.from(uint8Array)
-            .map((b) => String.fromCharCode(b))
-            .join("");
-          const base64 = btoa(binaryString);
-          const pdfName = generatePdfName(16);
-          setIsUpdate(true);
-          setUploadPdf((prev) => ({ ...prev, name: pdfName, base64: base64 }));
-          // alert("✅ PDFs match (based on page number, width, height)");
-        } else {
-          alert("❌ PDF do NOT match based on page number, width, height");
-          if (inputFileRef.current) inputFileRef.current.value = "";
-        }
-      };
-
-      fileReader.readAsArrayBuffer(file);
-    } catch (err) {
-      alert("Error: " + err.message);
-      if (inputFileRef.current) inputFileRef.current.value = "";
-    }
-  };
-  // Define a function to handle form submission
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (formData.RedirectUrl && !isValidURL(formData?.RedirectUrl)) {
-      alert(t("invalid-redirect-url"));
-      return;
-    }
-    if (formData?.Name?.length > maxTitleLength) {
-      alert(t("title-length-alert"));
-      return;
-    }
-    if (formData?.Note?.length > maxNoteLength) {
-      alert(t("note-length-alert"));
-      return;
-    }
-    if (formData?.Description?.length > maxDescriptionLength) {
-      alert(t("description-length-alert"));
-      return;
-    }
-    let pdfUrl;
-    if (uploadPdf?.base64) {
-      pdfUrl = await convertBase64ToFile(
-        uploadPdf.name,
-        uploadPdf.base64,
-      );
-      setUploadPdf((prev) => ({ ...prev, url: pdfUrl }));
-      const pdfBuffer = base64ToArrayBuffer(uploadPdf.base64);
-      setPdfArrayBuffer && setPdfArrayBuffer(pdfBuffer);
-      setPdfBase64Url && setPdfBase64Url(uploadPdf.base64);
-      const tenantId =
-        localStorage.getItem("TenantId") ||
-        template?.ExtUserPtr?.TenantId?.objectId;
-      const buffer = atob(uploadPdf.base64);
-      const userId = template?.ExtUserPtr?.UserId?.objectId;
-      SaveFileSize(buffer.length, pdfUrl, tenantId, userId);
-    }
-    const isChecked = formData.SendinOrder === "true" ? true : false;
-    const isTourEnabled = formData?.IsTourEnabled === "false" ? false : true;
-    const AutoReminder = formData?.AutomaticReminders || false;
-    const IsEnableOTP = formData.IsEnableOTP === "true" ? true : false;
-    const allowModify = formData?.AllowModifications || false;
-    let reminderDate = {};
-    const remindOnceInEvery = formData?.RemindOnceInEvery;
-    const TimeToCompleteDays = parseInt(formData?.TimeToCompleteDays);
-    const reminderCount = TimeToCompleteDays / remindOnceInEvery;
-    if (AutoReminder && reminderCount > 15) {
-      alert(t("only-15-reminder-allowed"));
-      return;
-    }
-    if (AutoReminder) {
-      const RemindOnceInEvery = parseInt(formData?.RemindOnceInEvery);
-      const ReminderDate = new Date(template?.createdAt);
-      ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
-      reminderDate = { NextReminderDate: ReminderDate };
-    }
-    const data = {
-      ...formData,
-      ...(pdfUrl ? { URL: pdfUrl } : {}),
-      SendinOrder: isChecked,
-      IsEnableOTP: IsEnableOTP,
-      IsTourEnabled: isTourEnabled,
-      AllowModifications: allowModify,
-      PenColors: selectedColors,
-      ...reminderDate
-    };
-    onSuccess(data);
-  };
-
-  // `handleNotifySignChange` is trigger when user change radio of notify on signatures
-  const handleNotifySignChange = (value) => {
-    setIsUpdate(true);
-    setFormData((obj) => ({ ...obj, NotifyOnSignatures: value }));
-  };
-  const handleBcc = (data) => {
-    if (data && data.length > 0) {
-      const trimEmail = data.map((item) => ({
-        objectId: item?.value,
-        Name: item?.label,
-        Email: item?.email
-      }));
-      setIsUpdate(true);
-      setFormData((prev) => ({ ...prev, Bcc: trimEmail }));
-    }
-  };
-
-  const handleEditTemplateClose = () => {
-    if (isUpdate) {
-      setShowConfirm(true);
-    } else {
-      handleClose();
-    }
-  };
-  const discardChanges = () => {
-    setShowConfirm(false);
-    handleClose();
-  };
-
-  const handleColorsChange = (color) => {
-    setSelectedColors((prev) => {
-      // If user tries to uncheck the last remaining color → block it
-      if (prev.length === 1 && prev.includes(color)) {
-        return prev;
-      }
-
-      // Normal toggle behavior
-      return prev.includes(color)
-        ? prev.filter((c) => c !== color) // remove
-        : [...prev, color]; // add
-    });
-  };
-  return (
-    <ModalUi
-      isOpen
-      title={isUpdate ? `${title} (unsaved)` : title}
-      handleClose={handleEditTemplateClose}
-    >
-      <ModalUi isOpen={showConfirm} showClose={false}>
-        <div className="p-[20px]">
-          <p className="text-base font-normal text-base-content py-[5px] md:py-[6px] px-[5px]">
-            {t("unsaved-changes-discard-them?")}
-          </p>
-          <div className="flex items-center mt-2.5 gap-2 md:gap-3 text-white">
-            <button
-              className="op-btn op-btn-primary px-6"
-              onClick={discardChanges}
-            >
-              {t("yes-discard")}
-            </button>
-            <button
-              className="op-btn op-btn-secondary px-4 md:px-6"
-              onClick={() => setShowConfirm(false)}
-            >
-              {t("cancel")}
-            </button>
-          </div>
-        </div>
-      </ModalUi>
-      <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
-        <div className="text-base-content">
-          <form onSubmit={handleSubmit}>
-            <div className="mb-[0.35rem]">
-              <label htmlFor="name" className="text-[13px]">
-                {t("report-heading.File")}
-              </label>
-              <div
-                className="border-[1.5px] border-dashed border-gray-300 rounded-lg px-4 py-6 text-center text-gray-500 bg-white cursor-pointer hover:border-base-content transition"
-                onDrop={handleDrop}
-                onDragOver={handleDragOver}
-                onClick={() => inputFileRef?.current?.click()}
-              >
-                <label
-                  htmlFor="fileUpload"
-                  className="cursor-pointer text-center mb-0"
-                >
-                  {t("browse-or-drag-to-replace-existing-file")}
-                </label>
-              </div>
-              <input
-                ref={inputFileRef}
-                type="file"
-                className="hidden"
-                accept="application/pdf"
-                onChange={(e) => handleFileInput(e)}
-                onInvalid={(e) =>
-                  e.target.setCustomValidity(t("input-required"))
-                }
-                onInput={(e) => e.target.setCustomValidity("")}
-              />
-              {uploadPdf?.name && (
-                <div
-                  onClick={() => inputFileRef?.current?.click()}
-                  className="mt-2 cursor-pointer op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs"
-                >
-                  selected:{" "}
-                  {uploadPdf?.url
-                    ? `${uploadPdf?.name}.pdf`
-                    : getFileName(template.URL)}
-                </div>
-              )}
-            </div>
-            <div className="mb-[0.35rem]">
-              <label htmlFor="name" className="text-[13px]">
-                {t("Title")}
-                <span className="text-[13px] text-[red]"> *</span>
-              </label>
-              <input
-                type="text"
-                name="Name"
-                value={formData.Name}
-                onChange={(e) => handleStrInput(e)}
-                onInvalid={(e) =>
-                  e.target.setCustomValidity(t("input-required"))
-                }
-                onInput={(e) => e.target.setCustomValidity("")}
-                required
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              />
-            </div>
-            <div className="mb-[0.35rem]">
-              <label htmlFor="Note" className="text-[13px]">
-                {t("report-heading.Note")}
-              </label>
-              <input
-                type="text"
-                name="Note"
-                id="Note"
-                value={formData.Note}
-                onChange={(e) => handleStrInput(e)}
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              />
-            </div>
-            <div className="mb-[0.35rem]">
-              <label htmlFor="Description" className="text-[13px]">
-                {t("description")}
-              </label>
-              <input
-                type="text"
-                name="Description"
-                id="Description"
-                value={formData.Description}
-                onChange={(e) => handleStrInput(e)}
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              />
-            </div>
-            <div className="mb-[0.35rem]">
-              <label className="text-[13px]">{t("send-in-order")}</label>
-              <div className="flex flex-col md:flex-row md:gap-4">
-                <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
-                  <input
-                    type="radio"
-                    value={"true"}
-                    className="op-radio op-radio-xs"
-                    name="SendinOrder"
-                    checked={formData.SendinOrder === "true"}
-                    onChange={handleStrInput}
-                  />
-                  <div className="text-[12px]">{t("yes")}</div>
-                </div>
-                <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
-                  <input
-                    type="radio"
-                    value={"false"}
-                    name="SendinOrder"
-                    className="op-radio op-radio-xs"
-                    checked={formData.SendinOrder === "false"}
-                    onChange={handleStrInput}
-                  />
-                  <div className="text-[12px]">{t("no")}</div>
-                </div>
-              </div>
-            </div>
-            <div className="text-xs mt-3">
-              <label className="block">
-                <span>
-                  {t("enable-tour")}
-                  <a data-tooltip-id="istourenabled-tooltip" className="ml-1">
-                    <sup>
-                      <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
-                    </sup>
-                  </a>{" "}
-                </span>
-                <Tooltip id="istourenabled-tooltip" className="z-50">
-                  <div className="max-w-[200px] md:max-w-[450px]">
-                    <p className="font-bold">{t("enable-tour")}</p>
-                    <div className="p-[5px]">
-                      <ol className="list-disc">
-                        <li>
-                          <span className="font-bold">{t("yes")}: </span>
-                          <span>{t("istourenabled-help.p1")}</span>
-                        </li>
-                        <li>
-                          <span className="font-bold">{t("no")}: </span>
-                          <span>{t("istourenabled-help.p2")}</span>
-                        </li>
-                      </ol>
-                    </div>
-                    <p>{t("istourenabled-help.p3", { appName: appName })}</p>
-                  </div>
-                </Tooltip>
-              </label>
-              <div className="flex flex-col md:flex-row md:gap-4">
-                <div className="flex items-center gap-2 ml-2 mb-1">
-                  <input
-                    type="radio"
-                    value={"true"}
-                    className="op-radio op-radio-xs"
-                    name="IsTourEnabled"
-                    checked={formData.IsTourEnabled === "true"}
-                    onChange={handleStrInput}
-                  />
-                  <div className="text-center">{t("yes")}</div>
-                </div>
-                <div className="flex items-center gap-2 ml-2 mb-1">
-                  <input
-                    type="radio"
-                    value={"false"}
-                    name="IsTourEnabled"
-                    className="op-radio op-radio-xs"
-                    checked={formData.IsTourEnabled === "false"}
-                    onChange={handleStrInput}
-                  />
-                  <div className="text-center">{t("no")}</div>
-                </div>
-              </div>
-            </div>
-            <div className="text-xs mt-3">
-              <label>
-                {t("notify-on-signatures")}
-                <a data-tooltip-id="nos-tooltip" className="ml-1">
-                  <sup>
-                    <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
-                  </sup>
-                </a>{" "}
-                <Tooltip id="nos-tooltip" className="z-[999]">
-                  <div className="max-w-[200px] md:max-w-[450px] text-[11px]">
-                    <p className="font-bold">{t("notify-on-signatures")}</p>
-                    <p>{t("notify-on-signatures-help.p1")}</p>
-                    <p>{t("notify-on-signatures-help.note")}</p>
-                  </div>
-                </Tooltip>
-              </label>
-              <div className="flex flex-col md:flex-row md:gap-4">
-                <div
-                  className={
-                    `flex items-center gap-2 ml-2 mb-1`
-                  }
-                >
-                  <input
-                    className="mr-[2px] op-radio op-radio-xs"
-                    type="radio"
-                    onChange={() => handleNotifySignChange(true)}
-                    checked={formData.NotifyOnSignatures === true}
-                  />
-                  <div className="text-center">{t("yes")}</div>
-                </div>
-                <div
-                  className={
-                    `flex items-center gap-2 ml-2 mb-1`
-                  }
-                >
-                  <input
-                    className="mr-[2px] op-radio op-radio-xs"
-                    type="radio"
-                    onChange={() => handleNotifySignChange(false)}
-                    checked={formData.NotifyOnSignatures === false}
-                  />
-                  <div className="text-center">{t("no")}</div>
-                </div>
-              </div>
-            </div>
-            <div className="text-xs mt-3 mb-4">
-              <label htmlFor="penColors">
-                {t("pen-colors")}
-                <a data-tooltip-id="pen-colors-tooltip" className="ml-1">
-                  <sup>
-                    <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
-                  </sup>
-                </a>
-                <Tooltip id="pen-colors-tooltip" className="z-[999]">
-                  <div className="max-w-[200px] md:max-w-[450px]">
-                    <p className="font-bold">{t("pen-colors")}</p>
-                    <div>{t("pen-colors-help")}</div>
-                  </div>
-                </Tooltip>
-              </label>
-              <div className="ml-[7px] flex flex-col md:flex-row gap-[10px] mb-[0.7rem]">
-                {pensList.map((color) => (
-                  <div
-                    key={color}
-                    className="flex flex-row gap-[5px] items-center"
-                  >
-                    <input
-                      className="mr-[2px] op-checkbox op-checkbox-xs"
-                      type="checkbox"
-                      name="penColors"
-                      checked={selectedColors.includes(color)}
-                      onChange={() => handleColorsChange(color)}
-                    />
-                    <div className="hover:underline underline-offset-2 cursor-default capitalize">
-                      {color}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="text-xs mt-3">
-              <SignersInput
-                label={t("Bcc")}
-                initialData={template?.Bcc}
-                onChange={handleBcc}
-                helptextZindex={50}
-                helpText={t("bcc-help")}
-                isCaptureAllData
-                isAddYourSelfCheckbox={isAddYourSelfCheckbox}
-              />
-            </div>
-            <div className="text-xs mt-2">
-              <label className="block">{t("redirect-url")}</label>
-              <input
-                name="RedirectUrl"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                value={formData.RedirectUrl}
-                onChange={handleStrInput}
-                onInvalid={(e) =>
-                  e.target.setCustomValidity(t("input-required"))
-                }
-                onInput={(e) => e.target.setCustomValidity("")}
-              />
-            </div>
-            <div className="text-xs mt-2">
-              <label className="block">
-                {t("time-to-complete")}
-                <span className="text-red-500 text-[13px]">*</span>
-              </label>
-              <input
-                type="number"
-                name="TimeToCompleteDays"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                value={formData.TimeToCompleteDays}
-                onChange={(e) => handleStrInput(e)}
-                onInvalid={(e) =>
-                  e.target.setCustomValidity(t("input-required"))
-                }
-                onInput={(e) => e.target.setCustomValidity("")}
-                min={1}
-                required
-              />
-            </div>
-            <div className="mt-[1rem] flex justify-start">
-              <button type="submit" className="op-btn op-btn-primary">
-                {t("submit")}
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </ModalUi>
-  );
-};
-
-export default EditTemplate;
@@ -1,9 +1,5 @@
-import { Quill } from "react-quill-new";
-// Use a third-party plugin so editors can toggle raw HTML view.
-import htmlEditButton from "quill-html-edit-button";
-
-// Register the module which adds a "<>" button for HTML editing.
-Quill.register("modules/htmlEditButton", htmlEditButton);
+import React from "react";
+import { Quill } from "react-quill";

 // Custom Undo button icon component for Quill editor. You can import it directly
 // from 'quill/assets/icons/undo.svg' but I found that a number of loaders do not
@@ -58,24 +54,17 @@ Quill.register(Font, true);
 export const module1 = {
  toolbar: {
    container: "#toolbar1",
-    handlers: { undo: undoChange, redo: redoChange }
+    handlers: {
+      undo: undoChange,
+      redo: redoChange
+    }
  },
-  history: { delay: 500, maxStack: 100, userOnly: true },
-  // Enable the "<>" button registered above
-  htmlEditButton: {}
+  history: {
+    delay: 500,
+    maxStack: 100,
+    userOnly: true
+  }
 };
-
-// Modules object for setting up the Quill editor
-export const module2 = {
-  toolbar: {
-    container: "#toolbar2",
-    handlers: { undo: undoChange, redo: redoChange }
-  },
-  history: { delay: 500, maxStack: 100, userOnly: true },
-  // Enable the "<>" button registered above
-  htmlEditButton: {}
-};
-
 // Formats objects for setting up the Quill editor
 export const formats = [
  "header",
@@ -90,6 +79,7 @@ export const formats = [
  "blockquote",
  "background",
  "list",
+  "bullet",
  "indent",
  "link",
  "image",
@@ -1,40 +1,36 @@
+import React from "react";
 import Tooltip from "../../primitives/Tooltip";
-import ReactQuill from "react-quill-new";
-import "../../styles/quill.css";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
 import EditorToolbar, { module1, formats } from "./EditorToolbar";
-import { useTranslation } from "react-i18next";

 export function EmailBody(props) {
-  const { t } = useTranslation();
  return (
    <form className="flex flex-col text-base-content text-lg font-normal">
      <div className="m-2 md:m-10 p-3 md:p-10 shadow-md hover:shadow-lg border-[1px] border-indigo-800 rounded-md">
        <label className="text-sm ml-2">
-          {t("subject")} <Tooltip message={t("email-subject")} />
+          Subject <Tooltip message={"email subject"} />
        </label>
        <input
          required
-          onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-          onInput={(e) => e.target.setCustomValidity("")}
          value={props.requestSubject}
-          onChange={(e) => {
-            props?.setCustomizeMail((prev) => ({
-              ...prev,
-              subject: e.target.value
-            }));
-          }}
+          onChange={(e) => props.setRequestSubject(e.target.value)}
          placeholder='${senderName} has requested you to sign "${documentName}"'
          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
        />
        <label className="text-sm ml-2 mt-3">
-          {t("body")} <Tooltip message={t("email-body")} />
+          Body <Tooltip message={"email body"} />
        </label>
-        <div className="px-1 py-2 w-full focus:outline-none text-xs">
+        <div className="px-3 py-2 w-full focus:outline-none text-xs">
          <EditorToolbar containerId="toolbar1" />
          <ReactQuill
            theme="snow"
            value={props.requestBody}
-            placeholder={t("email-placeholder")}
+            // value={typedText}
+            placeholder="add body of email "
+            // readOnly={loading}
+            // onChangeSelection={handleTextSelection} // Listen for text selection
+            ref={props.editorRef}
            modules={module1}
            formats={formats}
            onChange={props.handleOnchangeRequest}
@@ -0,0 +1,318 @@
+import React, { useState } from "react";
+import { saveAs } from "file-saver";
+import celebration from "../../assets/images/newCeleb.gif";
+import axios from "axios";
+import { getBase64FromUrl } from "../../constant/Utils";
+import { themeColor } from "../../constant/const";
+import printModule from "print-js";
+import Loader from "../../primitives/Loader";
+
+function EmailComponent({
+  isEmail,
+  pdfUrl,
+  setIsEmail,
+  setSuccessEmail,
+  pdfName,
+  sender,
+  setIsAlert,
+  extUserId,
+  activeMailAdapter
+}) {
+  const [emailList, setEmailList] = useState([]);
+  const [emailValue, setEmailValue] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isEmailCelebration, setIsEmailCelebration] = useState(false);
+  //function for send email
+  const sendEmail = async () => {
+    setIsLoading(true);
+
+    let sendMail;
+    for (let i = 0; i < emailList.length; i++) {
+      try {
+        const imgPng =
+          "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
+
+        let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3/`;
+        const headers = {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+          sessionToken: localStorage.getItem("accesstoken")
+        };
+        const openSignUrl = "https://www.opensignlabs.com/contact-us";
+        const themeBGcolor = themeColor;
+        let params = {
+          mailProvider: activeMailAdapter,
+          extUserId: extUserId,
+          pdfName: pdfName,
+          url: pdfUrl,
+          recipient: emailList[i],
+          subject: `${sender.name} has signed the doc - ${pdfName}`,
+          from: sender.email,
+          html:
+            "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /></head><body>  <div style='background-color:#f5f5f5;padding:20px'>    <div style='box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background-color:white;'> <div><img src=" +
+            imgPng +
+            "  height='50' style='padding:20px,width:170px,height:40px'/> </div><div style='padding:2px;font-family:system-ui; background-color:" +
+            themeBGcolor +
+            ";'>    <p style='font-size:20px;font-weight:400;color:white;padding-left:20px',>  Document Copy</p></div><div><p style='padding:20px;font-family:system-ui;font-size:14px'>A copy of the document <strong>" +
+            pdfName +
+            " </strong>is attached to this email. Kindly download the document from the attachment.</p></div> </div><div><p>This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " +
+            sender.email +
+            " directly. If you think this email is inappropriate or spam, you may file a complaint with OpenSign™  <a href= " +
+            openSignUrl +
+            " target=_blank>here</a> </p></div></div></body></html>"
+        };
+        sendMail = await axios.post(url, params, { headers: headers });
+        setIsEmailCelebration(true);
+        setTimeout(() => {
+          setIsEmailCelebration(false);
+        }, 3000);
+      } catch (error) {
+        console.log("error", error);
+        setIsLoading(false);
+        setIsEmail(false);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
+      }
+    }
+
+    if (sendMail && sendMail.data.result.status === "success") {
+      setSuccessEmail(true);
+      setTimeout(() => {
+        setSuccessEmail(false);
+        setIsEmail(false);
+        setEmailValue("");
+        setEmailList([]);
+      }, 1500);
+
+      setIsLoading(false);
+    } else if (sendMail && sendMail.data.result.status === "error") {
+      setIsLoading(false);
+      setIsEmail(false);
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong"
+      });
+      setEmailValue("");
+      setEmailList([]);
+    } else {
+      setIsLoading(false);
+      setIsEmail(false);
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong"
+      });
+      setEmailValue("");
+      setEmailList([]);
+    }
+  };
+
+  //function for remove email
+  const removeChip = (index) => {
+    const updateEmailCount = emailList.filter((data, key) => key !== index);
+    setEmailList(updateEmailCount);
+  };
+  //function for get email value
+  const handleEmailValue = (e) => {
+    const value = e.target.value;
+    setEmailValue(value);
+  };
+
+  //function for save email in array after press enter
+  const handleEnterPress = (e) => {
+    if (e.key === "Enter" && emailValue) {
+      setEmailList((prev) => [...prev, emailValue]);
+      setEmailValue("");
+    } else if (e === "add" && emailValue) {
+      setEmailList((prev) => [...prev, emailValue]);
+      setEmailValue("");
+    }
+  };
+
+  // function for print signed pdf
+  const handleToPrint = async (event) => {
+    event.preventDefault();
+
+    const pdf = await getBase64FromUrl(pdfUrl);
+    const isAndroidDevice = navigator.userAgent.match(/Android/i);
+    const isAppleDevice =
+      (/iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
+      !window.MSStream;
+    if (isAndroidDevice || isAppleDevice) {
+      const byteArray = Uint8Array.from(
+        atob(pdf)
+          .split("")
+          .map((char) => char.charCodeAt(0))
+      );
+      const blob = new Blob([byteArray], { type: "application/pdf" });
+      const blobUrl = URL.createObjectURL(blob);
+      window.open(blobUrl, "_blank");
+    } else {
+      printModule({ printable: pdf, type: "pdf", base64: true });
+    }
+  };
+
+  //handle download signed pdf
+  const handleDownloadPdf = () => {
+    saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+  };
+
+  const sanitizeFileName = (pdfName) => {
+    // Replace spaces with underscore
+    return pdfName.replace(/ /g, "_");
+  };
+
+  const isAndroid = /Android/i.test(navigator.userAgent);
+
+  return (
+    <div>
+      {/* isEmail */}
+      {isEmail && (
+        <div className="modaloverlay">
+          <div className="modalcontainer">
+            {isLoading && (
+              <div className="absolute w-full h-full flex flex-col justify-center items-center z-[20] bg-[#e6f2f2] bg-opacity-80">
+                <Loader />
+                <span className="text-[12px] font-bold">
+                  This might take some time
+                </span>
+              </div>
+            )}
+            <div style={{ background: "#32a3ac" }} className="modalheader">
+              <span className="text-white">Successfully signed!</span>
+              <div className="flex flex-row">
+                <div></div>
+                {!isAndroid && (
+                  <button
+                    onClick={handleToPrint}
+                    className="op-btn op-btn-neutral op-btn-sm text-[15px]"
+                  >
+                    <i className="fa fa-print" aria-hidden="true"></i>
+                    Print
+                  </button>
+                )}
+                <button
+                  className="op-btn op-btn-primary op-btn-sm text-[15px] ml-2"
+                  onClick={() => handleDownloadPdf()}
+                >
+                  <i className="fa fa-download" aria-hidden="true"></i>
+                  Download
+                </button>
+              </div>
+            </div>
+            <div className="h-full p-[20px]">
+              {isEmailCelebration && (
+                <div className="absolute w-[100%] flex justify-center items-center">
+                  <img alt="celeb" width={300} height={250} src={celebration} />
+                </div>
+              )}
+              <p className="font-medium text-[15px] mb-[5px] text-base-content align-baseline">
+                Recipients added here will get a copy of the signed document.
+              </p>
+              {emailList.length > 0 ? (
+                <>
+                  <div className="addEmail">
+                    <div className="flex flex-row flex-wrap">
+                      {emailList.map((data, ind) => {
+                        return (
+                          <div
+                            className="flex flex-row items-center bg-[#47a3ad] m-[4px] rounded-md py-[5px] px-[10px]"
+                            key={ind}
+                          >
+                            <span className="text-white text-[13px]">
+                              {data}
+                            </span>
+                            <span
+                              className="text-white text-[13px] font-semibold ml-[7px] cursor-pointer"
+                              onClick={() => removeChip(ind)}
+                            >
+                              <i className="fa-solid fa-xmark"></i>
+                            </span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                    {emailList.length <= 9 && (
+                      <input
+                        type="text"
+                        value={emailValue}
+                        className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-white outline-none"
+                        onChange={handleEmailValue}
+                        onKeyDown={handleEnterPress}
+                        onBlur={() => {
+                          if (emailValue) {
+                            handleEnterPress("add");
+                          }
+                        }}
+                        required
+                      />
+                    )}
+                  </div>
+                </>
+              ) : (
+                <div>
+                  <input
+                    type="text"
+                    value={emailValue}
+                    className="p-[10px] pb-[20px] rounded w-full text-[15px] outline-none bg-white border-2 border-[#47a3ad]"
+                    onChange={handleEmailValue}
+                    onKeyDown={handleEnterPress}
+                    placeholder="Add the email addresses"
+                    onBlur={() => {
+                      if (emailValue) {
+                        handleEnterPress("add");
+                      }
+                    }}
+                    required
+                  />
+                </div>
+              )}
+              <button
+                className={`${
+                  emailValue ? "cursor-pointer" : "cursor-default"
+                } op-btn op-btn-primary op-btn-sm m-2 shadow-md`}
+                onClick={() => {
+                  if (emailValue) {
+                    handleEnterPress("add");
+                  }
+                }}
+              >
+                <i className="fa fa-plus" aria-hidden="true"></i>
+              </button>
+
+              <div className="bg-[#e3e2e1] mt-[10px] p-[5px] rounded">
+                <span className="font-bold">Note: </span>
+                <span className="text-[15px]">
+                  You can only send to ten recipients at a time.
+                </span>
+              </div>
+              <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+              <button
+                type="button"
+                className="op-btn op-btn-primary"
+                onClick={() => emailList.length > 0 && sendEmail()}
+              >
+                Send
+              </button>
+              <button
+                type="button"
+                className="op-btn op-btn-ghost ml-2"
+                onClick={() => {
+                  setIsEmail(false);
+                  setEmailValue("");
+                  setEmailList([]);
+                }}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default EmailComponent;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
prafull-opensignlabsandGitHub	acd1c589d7	update pdf worker url	2024-06-16 12:59:34 +05:30
prafull-opensignlabsandGitHub	de62052453	refactor: load pdf worker from local using fetch method	2024-06-16 01:01:05 +05:30
prafull-opensignlabsandGitHub	de120dae39	fix: update pdf worker import path	2024-06-16 00:03:48 +05:30