Merge pull request #790 from nxglabs/fix_readonly

fix: width should be 100% of text type widgets
Merge pull request #1789 from OpenSignLabs/updates-15483575034
2026-09-03 08:18:50 +02:00 · 2025-06-11 17:51:34 +00:00 · 2025-06-06 11:17:12 +05:30 · 2025-06-06 05:33:37 +00:00 · 2025-06-04 00:17:30 +05:30 · 2025-06-03 18:45:49 +00:00
151 changed files with 19901 additions and 27055 deletions
@@ -73,12 +73,28 @@ Welcome to OpenSign, the premier open source docusign alternative - document e-s

 ---

-### Installation
+### Deploy

+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.
@@ -1,25 +0,0 @@
-# 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
-
@@ -13,6 +13,10 @@ 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
@@ -20,8 +24,13 @@ 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"]
+
 # Run the application
 CMD ["npm", "start"]
@@ -0,0 +1,29 @@
+#!/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 "$@"
@@ -3,11 +3,11 @@

 <head>
  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.ico" />
+  <link rel="icon"  type="image/x-icon" href="/favicon.ico" />
  <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="%PUBLIC_URL%/logo192.png" /> -->
+  <!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->

  <link rel="manifest" href="/manifest.json" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
@@ -17,5 +17,6 @@
 </head>
 <body>
  <div id="root" style="touch-action:pan-x pan-y;"></div>
+  <script type="module" src="/src/index.jsx"></script>
 </body>
-</html>
+</html>
@@ -1,74 +1,71 @@
 {
  "name": "open_sign",
-  "version": "0.1.0",
+  "version": "2.21.1",
  "private": true,
  "dependencies": {
    "@formkit/auto-animate": "^0.8.2",
-    "@lottiefiles/dotlottie-react": "^0.13.4",
+    "@imgly/background-removal": "^1.6.0",
+    "@lottiefiles/dotlottie-react": "^0.14.0",
    "@pdf-lib/fontkit": "^1.1.1",
-    "@radix-ui/themes": "^3.1.6",
-    "@reduxjs/toolkit": "^2.7.0",
+    "@radix-ui/themes": "^3.2.1",
+    "@reduxjs/toolkit": "^2.8.2",
    "axios": "^1.9.0",
-    "css-minimizer-webpack-plugin": "^7.0.2",
    "date-fns-tz": "^3.2.0",
    "file-saver": "^2.0.5",
    "i18next": "^23.16.8",
-    "i18next-browser-languagedetector": "^8.0.5",
+    "i18next-browser-languagedetector": "^8.1.0",
    "i18next-http-backend": "^3.0.2",
    "jszip": "^3.10.1",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
-    "nth-check": "^2.1.1",
    "parse": "^6.1.1",
    "pdf-lib": "^1.17.1",
+    "pkijs": "^3.0.8",
    "print-js": "^1.6.0",
-    "radix-ui": "^1.0.1",
-    "react": "^18.2.0",
-    "react-bootstrap": "^2.10.9",
+    "prismjs": "^1.30.0",
+    "radix-ui": "^1.4.2",
+    "react": "^18.3.1",
+    "react-bootstrap": "^2.10.10",
    "react-confetti": "^6.4.0",
-    "react-cookie": "^7.2.2",
-    "react-datepicker": "^7.6.0",
+    "react-datepicker": "^8.4.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dnd-multi-backend": "^9.0.0",
    "react-dnd-touch-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
    "react-gtm-module": "^2.0.11",
    "react-helmet": "^6.1.0",
-    "react-i18next": "^15.5.0",
+    "react-i18next": "^15.5.2",
    "react-konva": "^18.2.10",
    "react-pdf": "^9.2.1",
    "react-quill-new": "^3.4.6",
    "react-redux": "^9.2.0",
    "react-rnd": "^10.5.2",
-    "react-router": "^7.5.2",
-    "react-scripts": "^5.0.1",
+    "react-router": "^7.6.1",
    "react-scrollbars-custom": "^4.1.1",
    "react-select": "^5.10.1",
-    "react-signature-canvas": "^1.0.7",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-signature-canvas": "^1.1.0-alpha.2",
    "react-timezone-select": "^3.2.8",
    "react-tooltip": "^5.28.1",
-    "react-web-share": "^2.0.2",
    "reactour": "^1.19.4",
    "redux": "^5.0.1",
-    "redux-thunk": "^3.1.0",
    "regex-parser": "^2.3.1",
    "serve": "^14.2.4",
-    "styled-components": "^5.3.0",
-    "web-vitals": "^4.2.4",
-    "ws": "^8.18.1",
+    "styled-components": "^5.3.11",
+    "web-vitals": "^5.0.2",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
  },
  "scripts": {
-    "build": "npm run version && react-scripts build",
-    "start-dev": "react-scripts start",
+    "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",
    "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 && react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "build-win": "npm run version-win && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
    "release": "standard-version",
    "commit": "cz"
  },
@@ -96,10 +93,17 @@
    }
  },
  "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/runtime-corejs2": "^7.27.0",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/runtime-corejs2": "^7.27.4",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.23",
+    "@vitejs/plugin-react": "^4.5.1",
+    "@vitejs/plugin-react-swc": "^3.10.1",
+    "@vitest/ui": "^3.2.0",
    "autoprefixer": "^10.4.21",
    "babel-loader": "^10.0.0",
    "commitizen": "^4.3.1",
@@ -107,22 +111,20 @@
    "css-loader": "^7.1.2",
    "daisyui": "^4.12.24",
    "dotenv": "^16.5.0",
-    "dotenv-webpack": "^8.1.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-prettier": "^5.2.6",
+    "eslint": "^9.28.0",
+    "eslint-plugin-prettier": "^5.4.1",
    "eslint-plugin-react": "^7.37.5",
-    "lint-staged": "^15.5.1",
-    "mini-css-extract-plugin": "^2.9.2",
-    "postcss": "^8.5.3",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.1.0",
+    "postcss": "^8.5.4",
    "prettier": "^3.5.3",
-    "pretty-quick": "^4.1.1",
+    "pretty-quick": "^4.2.2",
+    "rollup-plugin-node-polyfills": "^0.2.1",
    "tailwindcss": "^3.4.17",
-    "terser-webpack-plugin": "^5.3.14",
-    "webpack-cli": "^5.1.4"
-  },
-  "overrides": {
-    "nth-check": "$nth-check",
-    "ws": "$ws"
+    "vite": "^6.3.5",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.0"
  },
  "engines": {
    "node": "18 || 20 || 22"
@@ -1,6 +1,7 @@
 { 
  "header-news": "Neue Funktion: Benutzer des Teams-Plans können jetzt ihre eigenen AWS S3-Buckets für die Dateispeicherung integrieren",
  "header-news-btn": "Jetzt einrichten",
+  "sandbox-news": "Dies ist eine Sandbox-Umgebung. Bitte nicht für produktive Zwecke verwenden.",
  "create-account": "Konto erstellen",
  "login": "Anmelden",
  "language": "Sprache",
@@ -39,8 +40,10 @@
  "save": "Speichern",
  "cancel": "Abbrechen",
  "upgrade-now": "Jetzt upgraden",
+  "contact-now": "Jetzt kontaktieren",
  "upgrade-to": "Upgrade zu",
  "plan": "Plan",
+  "subscription-renew-warning": "Ihr Abonnement läuft in {{remainingDays}} Tagen ab. Bitte verlängern Sie Ihr Abonnement.",
  "subscribe-card-teamplan": "Entfesseln Sie die volle Kraft der Zusammenarbeit! Erstellen Sie unbegrenzt Organisationen, Teams und Hierarchien. Teilen Sie Vorlagen nahtlos zwischen Teams und weisen Sie benutzerdefinierte Benutzerrollen zu. Optimieren Sie Ihren Workflow noch heute!",
  "subscribe-card-plan": "Entsperren Sie Premium-Funktionen ab nur {{premiumPrice}}/Monat. Genießen Sie eine verbesserte Leistung und zahlen Sie nur {{addonPrice}} pro zusätzlichem Credit nach den enthaltenen Premium-Credits.",
  "user-name-limit-char": "Um einen Benutzernamen mit weniger als 8 Zeichen zu haben, abonnieren Sie bitte.",
@@ -142,6 +145,7 @@
    "Quick send": "Schnell senden",
    "Edit": "Bearbeiten",
    "Share with team": "Mit Team teilen",
+    "Share with user": "Mit Kollegen teilen",
    "Share": "Teilen",
    "View": "Ansehen",
    "option": "Option",
@@ -245,6 +249,7 @@
  "API": "API",
  "api-token": "API-Token",
  "regenerate-token": "Live-Token neu generieren",
+  "remove-background": "Hintergrund entfernen",
  "generate-token": "Live-Token generieren",
  "view-docs": "Dokumentation ansehen",
  "generate-token-alert": "Sind Sie sicher, dass Sie das Token neu generieren möchten? Das alte Token wird ablaufen.",
@@ -356,6 +361,7 @@
    "date": "Datum",
    "text": "Text",
    "text input": "Texteingabe",
+    "cells": "Zellen",
    "checkbox": "Checkbox",
    "dropdown": "Dropdown",
    "radio button": "Radiobutton",
@@ -410,10 +416,12 @@
  "options": "Optionen",
  "minimun-check": "Minimale Anzahl",
  "maximum-check": "Maximale Anzahl",
+  "cell-count": "Zellzahl",
  "default-value": "Standardwert",
  "select": "Auswählen",
-  "read-only": "Nur lesen",
+  "read-only": "Ist schreibgeschützt",
  "hide-labels": "Labels ausblenden",
+  "layout": "Layout",
  "checkbox": "Checkbox",
  "alert": "Warnung",
  "zoom-in": "Vergrößern",
@@ -478,6 +486,7 @@
  "document-alert": "Dokument-Warnung",
  "owner-subscription-expired": "Das Abonnement des Besitzers ist abgelaufen.",
  "subscription-expired": "Abonnement abgelaufen",
+  "owner-doesnt-have-paid-plan": "Der Inhaber hat keinen kostenpflichtigen Plan.",
  "alert-message": "Warnmeldung",
  "document-decline": "Dokument ablehnen",
  "decline-alert-1": "Sind Sie sicher, dass Sie dieses Dokument ablehnen möchten?",
@@ -670,7 +679,7 @@
  "public-template-mssg-1": "Um OpenSign in Ihr React- oder Next.js-Projekt zu integrieren, führen Sie einfach den folgenden Befehl aus:",
  "public-template-mssg-2": "Stellen Sie sicher, dass npm oder yarn in Ihrem Projekt eingerichtet ist. Wenn Sie Yarn verwenden, können Sie npm install durch yarn add @opensign/react ersetzen.",
  "public-template-mssg-3": "Benötigen Sie weitere Details oder Beispiele?",
-  "public-template-mssg-4": "Besuchen Sie die",
+  "public-template-mssg-4": "Besuchen Sie die ",
  "public-template-mssg-5": " npm für die neuesten Updates, detaillierte Dokumentationen und Versionshistorie.",
  "public-template-mssg-6": "Bevor Sie diesen Code-Schnipsel verwenden können, müssen Sie diese Vorlage öffentlich machen.",
  "public-template-mssg-7": "Bevor Sie einen öffentlichen Link generieren können, müssen Sie diese Vorlage öffentlich machen.",
@@ -971,5 +980,54 @@
  "kiosk-sign": "Kiosk-Unterschrift",
  "dont-have-access-to-template": "Das template wurde gelöscht oder Sie haben keinen Zugriff. Bitte kontaktieren Sie den Absender.",
  "kiosk-info": "Kiosk Modus ermöglicht es Ihnen, persönliche Unterschriften schnell und effizient zu erfassen. Ideal für Messen, Veranstaltungen oder Laufkundschaft, bei denen alle Unterzeichner physisch anwesend sind. ",
-  "learn-more": "Mehr erfahren"
+  "learn-more": "Mehr erfahren",
+  "finish-mssg": "Sind Sie sicher, dass Sie das Dokument abschließen möchten?",
+  "review": "Überprüfen",
+  "next-field": "Nächstes Feld",
+  "required-mssg": "{{leftRequiredWidget}} von {{totalWidget}} Feldern übrig",
+  "verify-document-signature": "Dokumentensignatur überprüfen",
+  "select-pdf-document": "PDF-Dokument auswählen",
+  "selected-file": "Ausgewählte Datei",
+  "verify-signature": "Signatur überprüfen",
+  "verification-status": "Überprüfungsstatus",
+  "verification-in-progress": "Überprüfung läuft...",
+  "verification-results-will-appear-here": "Überprüfungsergebnisse werden hier angezeigt",
+  "please-select-pdf": "Bitte wählen Sie eine gültige PDF-Datei aus",
+  "please-select-file-to-verify": "Bitte wählen Sie eine Datei zur Überprüfung aus",
+  "no-signature-found": "Keine Signatur im Dokument gefunden",
+  "error-verifying-pdf": "Fehler beim Überprüfen der PDF",
+  "signature-valid-basic": "Signatur ist gültig",
+  "signature-invalid-basic": "Signatur ist ungültig",
+  "all-signatures-verified-convincing": "Dokument überprüft: Alle Signaturen wurden erfolgreich validiert.",
+  "some-signatures-invalid-basic": "Einige Signaturen sind ungültig",
+  "no-signatures-processed": "Keine Signaturen verarbeitet",
+  "unnamed-signature-field": "Unbenanntes Signaturfeld",
+  "error-processing-signature": "Fehler beim Verarbeiten der Signatur",
+  "signer-info-not-available": "Signaturinformationen nicht verfügbar",
+  "cert-validity-not-checked": "Gültigkeit des Zertifikats nicht geprüft",
+  "valid": "Gültig",
+  "expired-or-not-yet-valid": "Abgelaufen oder noch nicht gültig",
+  "valid-from": "Gültig von",
+  "to": "bis",
+  "signer": "Unterzeichner",
+  "issuer": "Aussteller",
+  "not-available": "Nicht verfügbar",
+  "not-performed": "Nicht durchgeführt",
+  "missing-acrofield-dict": "Fehlendes Acrofield-Wörterbuch",
+  "signature-dictionary-not-found-or-invalid": "Signaturwörterbuch nicht gefunden oder ungültig",
+  "missing-or-invalid-byterange": "Fehlender oder ungültiger ByteRange",
+  "missing-or-invalid-contents": "Fehlender oder ungültiger Inhalt",
+  "missing-signature-contents": "Fehlender Signaturinhalt",
+  "invalid-signature-hex-format": "Ungültiges Signatur-Hex-Format",
+  "unsupported-signature-format-not-signeddata": "Nicht unterstütztes Signaturformat - nicht SignedData",
+  "signer-certificate-not-found": "Unterzeichnerzertifikat nicht gefunden",
+  "no-certificates-in-signature": "Keine Zertifikate in der Signatur",
+  "no-signer-info-in-pkcs7": "Keine Signaturinformationen in PKCS#7",
+  "could-not-parse-signer-info": "Signaturinformationen konnten nicht analysiert werden",
+  "not-calculated": "Nicht berechnet",
+  "not-found-in-signature": "Nicht in Signatur gefunden",
+  "readonly-textinput-error": "Schreibgeschütztes Text-Widget muss einen Standardwert haben oder optional sein.",
+  "readonly-dropdown-error": "Schreibgeschütztes Dropdown-Widget muss einen Standardwert haben oder optional sein.",
+  "readonly-radiobtn-error": "Schreibgeschütztes Optionsfeld-Widget muss einen Standardwert haben oder optional sein.",
+  "choose-one":"Wählen Sie eine aus"
 }
@@ -1,6 +1,7 @@
 {
  "header-news": "New feature: Protect your account with Two-Factor Authentication (2FA) and enjoy the future of login with Passkeys — no passwords needed.",
  "header-news-btn": "Setup now",
+  "sandbox-news": "This is a sandbox environment. Please do not use it for production purposes.",
  "create-account": "Create account",
  "login": "Login",
  "language": "Language",
@@ -39,8 +40,10 @@
  "save": "Save",
  "cancel": "Cancel",
  "upgrade-now": "Upgrade now",
+  "contact-now": "Contact now",
  "upgrade-to": "Upgrade to",
  "plan": "Plan",
+  "subscription-renew-warning": "Your subscription will expire in {{remainingDays}} days. Please renew your subscription.",
  "subscribe-card-teamplan": "Unlock the full power of collaboration! Create unlimited organizations, teams, and hierarchies. Share templates seamlessly across teams and assign custom user roles. Elevate your workflow today!",
  "subscribe-card-plan": "Unlock premium features starting at just {{premiumPrice}}/month. Enjoy enhanced performance and only {{addonPrice}} per additional credit after your included premium credits.",
  "user-name-limit-char": "To have a username less than 8 character please subscribe",
@@ -142,6 +145,7 @@
    "Quick send": "Quick send",
    "Edit": "Edit",
    "Share with team": "Share with team",
+    "Share with user": "Share with colleague",
    "Share": "Share",
    "View": "View",
    "option": "Option",
@@ -245,6 +249,7 @@
  "API": "API",
  "api-token": "API token",
  "regenerate-token": "Regenerate live token",
+  "remove-background": "Remove Background",
  "generate-token": "Generate live token",
  "view-docs": "View docs",
  "generate-token-alert": "Are you sure you want to regenerate token it will expire old token?",
@@ -356,6 +361,7 @@
    "date": "date",
    "text": "text",
    "text input": "text input",
+    "cells": "cells",
    "checkbox": "checkbox",
    "dropdown": "dropdown",
    "radio button": "radio button",
@@ -410,10 +416,12 @@
  "options": "Options",
  "minimun-check": "Minimun check",
  "maximum-check": "Maximum check",
+  "cell-count": "Cell count",
  "default-value": "Default value",
  "select": "Select",
-  "read-only": "Is read only",
+  "read-only": "read only",
  "hide-labels": "Hide labels",
+  "layout": "Layout",
  "checkbox": "Checkbox",
  "alert": "Alert",
  "zoom-in": "Zoom in",
@@ -478,6 +486,7 @@
  "document-alert": "Document alert",
  "owner-subscription-expired": "Owner's subscription has expired.",
  "subscription-expired": "Subscription Expired",
+  "owner-doesnt-have-paid-plan": "Owner doesn't have paid plan.",
  "alert-message": "Alert message",
  "document-decline": "Document decline",
  "decline-alert-1": "Are you sure want to decline this document ?",
@@ -670,7 +679,7 @@
  "public-template-mssg-1": "To integrate OpenSign into your React or Next.js project, simply run the following command:",
  "public-template-mssg-2": "Ensure you have npm or yarn set up in your project. If you're using Yarn, you can replace npm install with yarn add @opensign/react.",
  "public-template-mssg-3": "Need more details or examples?",
-  "public-template-mssg-4": "Visit the",
+  "public-template-mssg-4": "Visit the ",
  "public-template-mssg-5": " npm for the latest updates, detailed documentation, and version history.",
  "public-template-mssg-6": "Before you can use this code snippet, you must make this template public.",
  "public-template-mssg-7": "Before you can generate a public link you must make this template public.",
@@ -971,5 +980,54 @@
  "kiosk-sign": "Kiosk Sign",
  "dont-have-access-to-template": "The template has been deleted or you don't have access. Please contact the sender.",
  "kiosk-info": "Kiosk Mode lets you collect in-person signatures quickly and efficiently. Ideal for trade shows, events, or walk-in scenarios where all signers are physically present. ",
-  "learn-more": "Learn more"
+  "learn-more": "Learn more",
+  "finish-mssg":" Are you sure you want to finish the document ?",
+  "review":"Review",
+  "next-field":"Next Field",
+  "required-mssg":"{{leftRequiredWidget}} of {{totalWidget}} fields left",
+  "verify-document-signature": "Verify Document Signature",
+  "select-pdf-document": "Select PDF Document",
+  "selected-file": "Selected file",
+  "verify-signature": "Verify Signature",
+  "verification-status": "Verification Status",
+  "verification-in-progress": "Verification in progress...",
+  "verification-results-will-appear-here": "Verification results will appear here",
+  "please-select-pdf": "Please select a valid PDF file",
+  "please-select-file-to-verify": "Please select a file to verify",
+  "no-signature-found": "No signature found in the document",
+  "error-verifying-pdf": "Error verifying PDF",
+  "signature-valid-basic": "Signature is valid",
+  "signature-invalid-basic": "Signature is invalid",
+  "all-signatures-verified-convincing": "Document Verified: All signatures have been successfully validated.",
+  "some-signatures-invalid-basic": "Some signatures are invalid",
+  "no-signatures-processed": "No signatures were processed",
+  "unnamed-signature-field": "Unnamed Signature Field",
+  "error-processing-signature": "Error processing signature",
+  "signer-info-not-available": "Signer information not available",
+  "cert-validity-not-checked": "Certificate validity not checked",
+  "valid": "Valid",
+  "expired-or-not-yet-valid": "Expired or not yet valid",
+  "valid-from": "Valid from",
+  "to": "to",
+  "signer": "Signer",
+  "issuer": "Issuer",
+  "not-available": "Not available",
+  "not-performed": "Not performed",
+  "missing-acrofield-dict": "Missing acrofield dictionary",
+  "signature-dictionary-not-found-or-invalid": "Signature dictionary not found or invalid",
+  "missing-or-invalid-byterange": "Missing or invalid ByteRange",
+  "missing-or-invalid-contents": "Missing or invalid Contents",
+  "missing-signature-contents": "Missing signature contents",
+  "invalid-signature-hex-format": "Invalid signature hex format",
+  "unsupported-signature-format-not-signeddata": "Unsupported signature format - not SignedData",
+  "signer-certificate-not-found": "Signer certificate not found",
+  "no-certificates-in-signature": "No certificates in signature",
+  "no-signer-info-in-pkcs7": "No signer info in PKCS#7",
+  "could-not-parse-signer-info": "Could not parse signer info",
+  "not-calculated": "Not calculated",
+  "not-found-in-signature": "Not found in signature",
+  "readonly-textinput-error": "Read-only text widget must have a default value or you can make it optional.",
+  "readonly-dropdown-error": "Read-only dropdown widget must have a default value or you can make it optional.",
+  "readonly-radiobtn-error": "Read-only radio button widget must have a default value or you can make it optional.",
+  "choose-one":"Choose One"
 }
@@ -1,6 +1,7 @@
 {
  "header-news": "Nueva característica: los usuarios del plan Teams ahora pueden integrar sus propios depósitos de AWS S3 para el almacenamiento de archivos",
  "header-news-btn": "Configurar ahora",
+  "sandbox-news": "Este es un entorno sandbox. Por favor, no lo utilice con fines de producción.",
  "create-account": "Crear cuenta",
  "login": "Iniciar sesión",
  "language": "Idioma",
@@ -39,8 +40,10 @@
  "save": "Guardar",
  "cancel": "Cancelar",
  "upgrade-now": "Mejorar ahora",
+  "contact-now": "Contactar ahora",
  "upgrade-to": "Mejorar a",
  "plan": "Plan",
+  "subscription-renew-warning": "Su suscripción vencerá en {{remainingDays}} días. Por favor, renueve su suscripción.",
  "subscribe-card-teamplan": "¡Libera todo el poder de la colaboración! Crea organizaciones, equipos y jerarquías ilimitadas. Comparte plantillas sin problemas entre equipos y asigna funciones de usuario personalizadas. ¡Mejora tu flujo de trabajo hoy mismo!",
  "subscribe-card-plan": "Desbloquea funciones premium desde solo {{premiumPrice}}/mes. Disfruta de un rendimiento mejorado y solo {{addonPrice}} por crédito adicional después de tus créditos premium incluidos.",
  "user-name-limit-char": "Para tener un nombre de usuario menor a 8 caracteres por favor suscríbete",
@@ -142,6 +145,7 @@
    "Quick send": "Envío rápido",
    "Edit": "Editar",
    "Share with team": "Compartir con el equipo",
+    "Share with user": "Compartir con un colega",
    "Share": "Compartir",
    "View": "Ver",
    "option": "Opción",
@@ -246,6 +250,7 @@
  "API": "API",
  "api-token": "Token API",
  "regenerate-token": "Regenerar token activo",
+  "remove-background": "Eliminar fondo",
  "generate-token": "Generar token activo",
  "view-docs": "Ver documentación",
  "generate-token-alert": "¿En definitiva quieres regenerar el token? Esto expirará el token antiguo.",
@@ -357,6 +362,7 @@
    "date": "fecha",
    "text": "texto",
    "text input": "entrada de texto",
+    "cells": "células",
    "checkbox": "casilla",
    "dropdown": "desplegable",
    "radio button": "botón de radio",
@@ -411,10 +417,12 @@
  "options": "Opciones",
  "minimun-check": "Chequeo mínimo",
  "maximum-check": "Chequeo máximo",
+  "cell-count": "recuento de células",
  "default-value": "Valor por defecto",
  "select": "Seleccionar",
  "read-only": "Es de solo lectura",
  "hide-labels": "Esconder etiquetas",
+  "layout": "Diseño",
  "checkbox": "Casilla",
  "alert": "Alerta",
  "zoom-in": "Acercar",
@@ -477,6 +485,7 @@
  "mail-not-delivered": "correo no entregado",
  "document-alert": "Alerta de documento",
  "owner-subscription-expired": "La suscripción del propietario ha expirado.",
+  "owner-doesnt-have-paid-plan": "El propietario no tiene un plan de pago.",
  "subscription-expired": "Suscripción expirada",
  "alert-message": "Mensaje de alerta",
  "document-decline": "Rechazar documento",
@@ -670,7 +679,7 @@
  "public-template-mssg-1": "Para integrar OpenSign a tu proyecto React o Next.js, simplemente ejecuta los siguientes comandos:",
  "public-template-mssg-2": "Asegúrate de tener «npm» o «yarn» configurado en tu proyecto. Si estás usando «yarn», puedes reemplazar «npm install» con «yarn add @opensign/react».",
  "public-template-mssg-3": "¿Necesitas más detalles o ejemplos?",
-  "public-template-mssg-4": "Visita la",
+  "public-template-mssg-4": "Visita la ",
  "public-template-mssg-5": " «npm» para las últimas actualizaciones, documentación detallada e historial de versiones.",
  "public-template-mssg-6": "Antes de que puedas usar este fragmento de código, debes convertir esta plantilla en pública.",
  "public-template-mssg-7": "Antes de poder generar un enlace público, debes hacer que esta plantilla sea pública.",
@@ -971,5 +980,54 @@
  "kiosk-sign": "Firma en quiosco",
  "dont-have-access-to-template": "El template ha sido eliminado o no tiene acceso. Por favor, contacte al remitente.",
  "kiosk-info": "El Modo Kiosco le permite recopilar firmas en persona de forma rápida y eficiente. Ideal para ferias, eventos o situaciones con personas que firman en el lugar. ",
-  "learn-more": "Más información"
+  "learn-more": "Más información",
+  "finish-mssg": "¿Está seguro de que desea finalizar el documento?",
+  "review": "Revisar",
+  "next-field": "Siguiente campo",
+  "required-mssg": "{{leftRequiredWidget}} de {{totalWidget}} campos restantes",
+  "verify-document-signature": "Verificar firma del documento",
+  "select-pdf-document": "Seleccionar documento PDF",
+  "selected-file": "Archivo seleccionado",
+  "verify-signature": "Verificar firma",
+  "verification-status": "Estado de verificación",
+  "verification-in-progress": "Verificación en curso...",
+  "verification-results-will-appear-here": "Los resultados de la verificación aparecerán aquí",
+  "please-select-pdf": "Por favor, seleccione un archivo PDF válido",
+  "please-select-file-to-verify": "Por favor, seleccione un archivo para verificar",
+  "no-signature-found": "No se encontró ninguna firma en el documento",
+  "error-verifying-pdf": "Error al verificar el PDF",
+  "signature-valid-basic": "La firma es válida",
+  "signature-invalid-basic": "La firma no es válida",
+  "all-signatures-verified-convincing": "Documento verificado: Todas las firmas han sido validadas exitosamente.",
+  "some-signatures-invalid-basic": "Algunas firmas no son válidas",
+  "no-signatures-processed": "No se procesaron firmas",
+  "unnamed-signature-field": "Campo de firma sin nombre",
+  "error-processing-signature": "Error al procesar la firma",
+  "signer-info-not-available": "Información del firmante no disponible",
+  "cert-validity-not-checked": "Validez del certificado no verificada",
+  "valid": "Válido",
+  "expired-or-not-yet-valid": "Caducado o aún no válido",
+  "valid-from": "Válido desde",
+  "to": "hasta",
+  "signer": "Firmante",
+  "issuer": "Emisor",
+  "not-available": "No disponible",
+  "not-performed": "No realizado",
+  "missing-acrofield-dict": "Falta el diccionario Acrofield",
+  "signature-dictionary-not-found-or-invalid": "Diccionario de firmas no encontrado o inválido",
+  "missing-or-invalid-byterange": "ByteRange faltante o inválido",
+  "missing-or-invalid-contents": "Contenido faltante o inválido",
+  "missing-signature-contents": "Falta el contenido de la firma",
+  "invalid-signature-hex-format": "Formato hexadecimal de firma inválido",
+  "unsupported-signature-format-not-signeddata": "Formato de firma no compatible - no SignedData",
+  "signer-certificate-not-found": "Certificado del firmante no encontrado",
+  "no-certificates-in-signature": "No hay certificados en la firma",
+  "no-signer-info-in-pkcs7": "No hay información del firmante en PKCS#7",
+  "could-not-parse-signer-info": "No se pudo analizar la información del firmante",
+  "not-calculated": "No calculado",
+  "not-found-in-signature": "No encontrado en la firma",
+  "readonly-textinput-error": "El widget de texto de solo lectura debe tener un valor predeterminado o puede hacerse opcional.",
+  "readonly-dropdown-error": "El widget desplegable de solo lectura debe tener un valor predeterminado o puede hacerse opcional.",
+  "readonly-radiobtn-error": "El widget de botón de opción de solo lectura debe tener un valor predeterminado o puede hacerse opcional.",
+  "choose-one":"Elige uno"
 }
@@ -1,6 +1,7 @@
 {
  "header-news": "Nouvelle fonctionnalité : les utilisateurs du forfait Teams peuvent désormais intégrer leurs propres compartiments AWS S3 pour le stockage de fichiers",
  "header-news-btn": "Configurer maintenant",
+  "sandbox-news": "Ceci est un environnement sandbox. Veuillez ne pas l'utiliser à des fins de production.",
  "create-account": "Créer un compte",
  "login": "Se Connecter",
  "language": "Langue",
@@ -39,9 +40,11 @@
  "save": "Sauvegarder",
  "cancel": "Annuler",
  "upgrade-now": "Mettre à jour maintenant",
+  "contact-now": "Contacter maintenant",
  "upgrade-to": "Mettre à niveau vers",
  "pro": "PRO",
  "plan": "Offre",
+  "subscription-renew-warning": "Votre abonnement expirera dans {{remainingDays}} jours. Veuillez renouveler votre abonnement.",
  "subscribe-card-teamplan": "Libérez toute la puissance de la collaboration ! Créez un nombre illimité d'organisations, d'équipes et de hiérarchies. Partagez des modèles de manière transparente entre les équipes et attribuez des rôles d'utilisateur personnalisés. Améliorez votre flux de travail dès aujourd'hui !",
  "subscribe-card-plan": "Débloquez des fonctionnalités premium à partir de seulement {{premiumPrice}}/mois. Bénéficiez de performances améliorées et de seulement {{addonPrice}} par crédit supplémentaire après vos crédits premium inclus.",
  "user-name-limit-char": "Pour avoir un nom d'utilisateur de moins de 8 caractères s'il vous plaît s'abonner",
@@ -163,6 +166,7 @@
    "Quick send": "Envoi rapide",
    "Edit": "Modifier",
    "Share with team": "Partager avec l'équipe",
+    "Share with user": "Partager avec un collègue",
    "Share": "Partager",
    "View": "Voir",
    "option": "Option",
@@ -245,6 +249,7 @@
  "API": "API",
  "api-token": "Jeton API",
  "regenerate-token": "Régénérer en direct jeton",
+  "remove-background": "Supprimer l'arrière-plan",
  "generate-token": "Générer en direct jeton",
  "view-docs": "Afficher les documents",
  "generate-token-alert": "Êtes-vous sûr de vouloir régénérer le jeton, votre ancien jeton sera supprimer?",
@@ -356,6 +361,7 @@
    "date": "date",
    "text": "texte",
    "text input": "saisie de texte",
+    "cells": "cellules",
    "checkbox": "case à cocher",
    "dropdown": "dérouler",
    "radio button": "bouton radio",
@@ -410,10 +416,12 @@
  "options": "Possibilités",
  "minimun-check": "Vérification minimale",
  "maximum-check": "Contrôle maximum",
+  "cell-count": "numération cellulaire",
  "default-value": "Valeur par défaut",
  "select": "Sélectionner",
  "read-only": "Est en lecture seule",
  "hide-labels": "Masquer les étiquettes",
+  "layout": "Disposition",
  "checkbox": "Case à cocher",
  "alert": "Alerte",
  "zoom-in": "Agrandir",
@@ -477,6 +485,7 @@
  "mail-not-delivered": "Courrier non distribué",
  "document-alert": "Alerte document",
  "owner-subscription-expired": "L'abonnement du propriétaire a expiré.",
+  "owner-doesnt-have-paid-plan": "Le propriétaire n'a pas de plan payant.",
  "subscription-expired": "Abonnement expiré",
  "alert-message": "Message d'alerte",
  "document-decline": "Document-refusé",
@@ -670,7 +679,7 @@
  "public-template-mssg-1": "Pour intégrer OpenSign dans votre projet React ou Next.js, exécutez simplement la commande suivante :",
  "public-template-mssg-2": "Assurez-vous que npm ou Yarn est configuré dans votre projet. Si vous utilisez Yarn, vous pouvez remplacer npm install par Yarn Add @opensign/react.",
  "public-template-mssg-3": "Besoin de plus de détails ou d'exemples ?",
-  "public-template-mssg-4": "Visitez le",
+  "public-template-mssg-4": "Visitez le ",
  "public-template-mssg-5": "npm pour les dernières mises à jour, une documentation détaillée et l'historique des versions.",
  "public-template-mssg-6": "Avant de pouvoir utiliser cet extrait de code, vous devez rendre ce modèle public.",
  "public-template-mssg-7": "Avant de pouvoir générer un lien public, vous devez rendre ce modèle public.",
@@ -971,5 +980,54 @@
  "kiosk-sign": "Signature sur kiosque",
  "dont-have-access-to-template": "Le template a été supprimé ou vous n'y avez pas accès. Veuillez contacter l'expéditeur.",
  "kiosk-info": "Le Mode Kiosque vous permet de recueillir des signatures en personne rapidement et efficacement. Idéal pour les salons, événements ou situations où tous les signataires sont physiquement présents. ",
-  "learn-more": "En savoir plus"
+  "learn-more": "En savoir plus",
+  "finish-mssg": "Êtes-vous sûr de vouloir terminer le document ?",
+  "review": "Revoir",
+  "next-field": "Champ suivant",
+  "required-mssg":"{{leftRequiredWidget}} champs sur {{totalWidget}} restants",
+  "verify-document-signature": "Vérifier la signature du document",
+  "select-pdf-document": "Sélectionner le document PDF",
+  "selected-file": "Fichier sélectionné",
+  "verify-signature": "Vérifier la signature",
+  "verification-status": "État de la vérification",
+  "verification-in-progress": "Vérification en cours...",
+  "verification-results-will-appear-here": "Les résultats de la vérification apparaîtront ici",
+  "please-select-pdf": "Veuillez sélectionner un fichier PDF valide",
+  "please-select-file-to-verify": "Veuillez sélectionner un fichier à vérifier",
+  "no-signature-found": "Aucune signature trouvée dans le document",
+  "error-verifying-pdf": "Erreur lors de la vérification du PDF",
+  "signature-valid-basic": "La signature est valide",
+  "signature-invalid-basic": "La signature est invalide",
+  "all-signatures-verified-convincing": "Document vérifié : Toutes les signatures ont été validées avec succès.",
+  "some-signatures-invalid-basic": "Certaines signatures sont invalides",
+  "no-signatures-processed": "Aucune signature traitée",
+  "unnamed-signature-field": "Champ de signature sans nom",
+  "error-processing-signature": "Erreur lors du traitement de la signature",
+  "signer-info-not-available": "Informations sur le signataire non disponibles",
+  "cert-validity-not-checked": "Validité du certificat non vérifiée",
+  "valid": "Valide",
+  "expired-or-not-yet-valid": "Expiré ou pas encore valide",
+  "valid-from": "Valide du",
+  "to": "au",
+  "signer": "Signataire",
+  "issuer": "Émetteur",
+  "not-available": "Non disponible",
+  "not-performed": "Non effectué",
+  "missing-acrofield-dict": "Dictionnaire Acrofield manquant",
+  "signature-dictionary-not-found-or-invalid": "Dictionnaire de signatures introuvable ou invalide",
+  "missing-or-invalid-byterange": "ByteRange manquant ou invalide",
+  "missing-or-invalid-contents": "Contenu manquant ou invalide",
+  "missing-signature-contents": "Contenu de la signature manquant",
+  "invalid-signature-hex-format": "Format hexadécimal de signature invalide",
+  "unsupported-signature-format-not-signeddata": "Format de signature non pris en charge - pas SignedData",
+  "signer-certificate-not-found": "Certificat du signataire introuvable",
+  "no-certificates-in-signature": "Aucun certificat dans la signature",
+  "no-signer-info-in-pkcs7": "Aucune information sur le signataire dans PKCS#7",
+  "could-not-parse-signer-info": "Impossible d'analyser les informations sur le signataire",
+  "not-calculated": "Non calculé",
+  "not-found-in-signature": "Introuvable dans la signature",
+  "readonly-textinput-error": "Le widget de texte en lecture seule doit avoir une valeur par défaut ou être rendu optionnel.",
+  "readonly-dropdown-error": "Le widget déroulant en lecture seule doit avoir une valeur par défaut ou être rendu optionnel.",
+  "readonly-radiobtn-error": "Le widget bouton radio en lecture seule doit avoir une valeur par défaut ou être rendu optionnel.",
+  "choose-one":"Choisissez-en un"
 }
@@ -1,6 +1,7 @@
 {
  "header-news": "Nuova funzionalità: Gli utenti del piano Teams possono ora integrare i propri bucket AWS S3 per l'archiviazione dei file",
  "header-news-btn": "Configura Ora",
+  "sandbox-news": "Questo è un ambiente sandbox. Si prega di non utilizzarlo per scopi di produzione.",  
  "create-account": "Crea Account",
  "login": "Accedi",
  "language": "Lingua",
@@ -39,8 +40,10 @@
  "save": "Salva",
  "cancel": "Annulla",
  "upgrade-now": "Aggiorna ora",
+  "contact-now": "Contatta ora",
  "upgrade-to": "Aggiorna a",
  "plan": "Piano",
+  "subscription-renew-warning": "Il tuo abbonamento scadrà tra {{remainingDays}} giorni. Ti preghiamo di rinnovarlo.",
  "subscribe-card-teamplan": "Sblocca tutto il potenziale della collaborazione! Crea organizzazioni, team e gerarchie illimitati. Condividi modelli senza problemi tra i team e assegna ruoli personalizzati agli utenti. Migliora il tuo flusso di lavoro oggi stesso!",
  "subscribe-card-plan": "Sblocca le funzionalità premium a partire da soli {{premiumPrice}}/mese. Approfitta di prestazioni migliorate e paga solo {{addonPrice}} per ogni credito aggiuntivo dopo quelli inclusi.",
  "user-name-limit-char": "Per un nome utente con meno di 8 caratteri, abbonati",
@@ -142,6 +145,7 @@
    "Quick send": "Invio rapido",
    "Edit": "Modifica",
    "Share with team": "Condividi con il team",
+    "Share with user": "Condividi con un collega",
    "Share": "Condividi",
    "View": "Visualizza",
    "option": "Opzione",
@@ -245,6 +249,7 @@
  "API": "API",
  "api-token": "Token API",
  "regenerate-token": "Rigenera token live",
+  "remove-background": "Rimuovi sfondo",
  "generate-token": "Genera token live",
  "view-docs": "Visualizza documenti",
  "generate-token-alert": "Sei sicuro di voler rigenerare il token? Questo invaliderà il vecchio token.",
@@ -356,6 +361,7 @@
    "date": "data",
    "text": "testo",
    "text input": "campo di testo",
+    "cells": "cellule",
    "checkbox": "casella di controllo",
    "dropdown": "menu a tendina",
    "radio button": "pulsante di opzione",
@@ -410,10 +416,12 @@
  "options": "Opzioni",
  "minimun-check": "Controllo minimo",
  "maximum-check": "Controllo massimo",
+  "cell-count": "conteggio delle cellule",
  "default-value": "Valore predefinita",
  "select": "Seleziona",
-  "read-only": "È solo lettura",
+  "read-only": "È di sola lettura",
  "hide-labels": "Nascondi etichette",
+  "layout": "Layout",
  "checkbox": "Casella di controllo",
  "alert": "Avviso",
  "zoom-in": "Ingrandisci",
@@ -477,6 +485,7 @@
  "mail-not-delivered": "Mail non consegnata",
  "document-alert": "Avviso Documento",
  "owner-subscription-expired": "L'abbonamento del proprietario è scaduto.",
+  "owner-doesnt-have-paid-plan": "Il proprietario non ha un piano a pagamento.",
  "subscription-expired": "Abbonamento Scaduto",
  "alert-message": "Messaggio di avviso",
  "document-decline": "Documento rifiutato",
@@ -670,7 +679,7 @@
  "public-template-mssg-1": "Per integrare OpenSign nel tuo progetto React o Next.js, esegui semplicemente il seguente comando:",
  "public-template-mssg-2": "Assicurati di avere npm o yarn configurato nel tuo progetto. Se usi Yarn, puoi sostituire npm install con yarn add @opensign/react.",
  "public-template-mssg-3": "Hai bisogno di maggiori dettagli o esempi?",
-  "public-template-mssg-4": "Visita il",
+  "public-template-mssg-4": "Visita il ",
  "public-template-mssg-5": " npm per gli aggiornamenti più recenti, documentazione dettagliata e cronologia delle versioni.",
  "public-template-mssg-6": "Prima di poter utilizzare questo frammento di codice, devi rendere questo modello pubblico.",
  "public-template-mssg-7": "Prima di poter generare un link pubblico, devi rendere questo modello pubblico.",
@@ -971,5 +980,54 @@
  "kiosk-sign": "Firma su chiosco",
  "dont-have-access-to-template": "Il template è stato eliminato o non hai accesso. Si prega di contattare il mittente.",
  "kiosk-info": "La Modalità Kiosk consente di raccogliere firme in presenza in modo rapido ed efficiente. Ideale per fiere, eventi o situazioni con firmatari fisicamente presenti. ",
-  "learn-more": "Scopri di più"
+  "learn-more": "Scopri di più",
+  "finish-mssg": "Sei sicuro di voler completare il documento?",
+  "review": "Rivedere",
+  "next-field": "Campo successivo",
+  "required-mssg":"{{leftRequiredWidget}} di {{totalWidget}} campi rimanenti",
+  "verify-document-signature": "Verifica firma documento",
+  "select-pdf-document": "Seleziona documento PDF",
+  "selected-file": "File selezionato",
+  "verify-signature": "Verifica firma",
+  "verification-status": "Stato verifica",
+  "verification-in-progress": "Verifica in corso...",
+  "verification-results-will-appear-here": "I risultati della verifica appariranno qui",
+  "please-select-pdf": "Seleziona un file PDF valido",
+  "please-select-file-to-verify": "Seleziona un file da verificare",
+  "no-signature-found": "Nessuna firma trovata nel documento",
+  "error-verifying-pdf": "Errore durante la verifica del PDF",
+  "signature-valid-basic": "La firma è valida",
+  "signature-invalid-basic": "La firma non è valida",
+  "all-signatures-verified-convincing": "Documento Verificato: Tutte le firme sono state validate con successo.",
+  "some-signatures-invalid-basic": "Alcune firme non sono valide",
+  "no-signatures-processed": "Nessuna firma elaborata",
+  "unnamed-signature-field": "Campo firma senza nome",
+  "error-processing-signature": "Errore durante l'elaborazione della firma",
+  "signer-info-not-available": "Informazioni firmatario non disponibili",
+  "cert-validity-not-checked": "Validità certificato non verificata",
+  "valid": "Valido",
+  "expired-or-not-yet-valid": "Scaduto o non ancora valido",
+  "valid-from": "Valido dal",
+  "to": "al",
+  "signer": "Firmatario",
+  "issuer": "Emittente",
+  "not-available": "Non disponibile",
+  "not-performed": "Non eseguito",
+  "missing-acrofield-dict": "Dizionario Acrofield mancante",
+  "signature-dictionary-not-found-or-invalid": "Dizionario firme non trovato o non valido",
+  "missing-or-invalid-byterange": "ByteRange mancante o non valido",
+  "missing-or-invalid-contents": "Contenuto mancante o non valido",
+  "missing-signature-contents": "Contenuto firma mancante",
+  "invalid-signature-hex-format": "Formato esadecimale firma non valido",
+  "unsupported-signature-format-not-signeddata": "Formato firma non supportato - non SignedData",
+  "signer-certificate-not-found": "Certificato firmatario non trovato",
+  "no-certificates-in-signature": "Nessun certificato nella firma",
+  "no-signer-info-in-pkcs7": "Nessuna informazione firmatario in PKCS#7",
+  "could-not-parse-signer-info": "Impossibile analizzare le informazioni del firmatario",
+  "not-calculated": "Non calcolato",
+  "not-found-in-signature": "Non trovato nella firma",
+  "readonly-textinput-error": "Il widget di testo di sola lettura deve avere un valore predefinito oppure può essere reso opzionale.",
+  "readonly-dropdown-error": "Il widget a discesa di sola lettura deve avere un valore predefinito oppure può essere reso opzionale.",
+  "readonly-radiobtn-error": "Il widget pulsante di opzione di sola lettura deve avere un valore predefinito oppure può essere reso opzionale.",
+  "choose-one":"Scegline uno"
 }
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
@@ -1,7 +1,6 @@
-import React, { useState, useEffect, lazy } from "react";
+import { useState, useEffect, lazy } from "react";
 import { Routes, Route, BrowserRouter } from "react-router";
 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";
@@ -30,7 +29,8 @@ const ManageSign = lazy(() => import("./pages/Managesign"));
 const AddAdmin = lazy(() => import("./pages/AddAdmin"));
 const UpdateExistUserAdmin = lazy(() => import("./pages/UpdateExistUserAdmin"));
 const Preferences = lazy(() => import("./pages/Preferences"));
-
+const Login = lazy(() => import("./pages/Login"));
+const VerifyDocument = lazy(() => import("./pages/VerifyDocument"));
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
 const AppLoader = () => {
  return (
@@ -67,7 +67,7 @@ function App() {
        <BrowserRouter>
          <Routes>
            <Route element={<ValidateRoute />}>
-              <Route exact path="/" element={<Login />} />
+              <Route exact path="/" element={<LazyPage Page={Login} />} />
                  <Route
                    path="/addadmin"
                    element={<LazyPage Page={AddAdmin} />}
@@ -106,10 +106,10 @@ function App() {
              element={<LazyPage Page={GuestLogin} />}
            />
            <Route path="/debugpdf" element={<LazyPage Page={DebugPdf} />} />
-            <Route
-              path="/forgetpassword"
-              element={<LazyPage Page={ForgetPassword} />}
-            />
+              <Route
+                path="/forgetpassword"
+                element={<LazyPage Page={ForgetPassword} />}
+              />
            <Route
              element={
                <ValidateSession>
@@ -117,10 +117,10 @@ function App() {
                </ValidateSession>
              }
            >
-              <Route
-                path="/changepassword"
-                element={<LazyPage Page={ChangePassword} />}
-              />
+                <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 />} />
@@ -165,7 +165,11 @@ function App() {
                path="/recipientSignPdf/:docId"
                element={<PdfRequestFiles />}
              />
-              <Route path="/users" element={<UserList />} />
+                <Route path="/users" element={<UserList />} />
+              <Route
+                path="/verify-document"
+                element={<LazyPage Page={VerifyDocument} />}
+              />
              <Route
                path="/preferences"
                element={<LazyPage Page={Preferences} />}
@@ -1,275 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Parse from "parse";
-import Title from "./Title";
-import Loader from "../primitives/Loader";
-import { copytoData, usertimezone } from "../constant/Utils";
-import { emailRegex } from "../constant/const";
-import { useTranslation } from "react-i18next";
-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 = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!emailRegex.test(formdata.email)) {
-      alert("Please enter a valid email address.");
-    } 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));
-            console.log("parseData ", parseData);
-            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">
-      <Title title={t("add-user")} />
-      {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 text-gray-700 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"
-            />
-          </div>
-          <div className="mb-3">
-            <label
-              htmlFor="email"
-              className="block text-xs text-gray-700 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"
-            />
-          </div>
-          <div className="mb-3">
-            <label className="block text-xs text-gray-700 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 text-gray-700 font-semibold"
-            >
-              {t("phone")}
-              {/* <span className="text-[red] text-[13px]"> *</span> */}
-            </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 text-gray-700 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,288 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import Title from "./Title";
+import Loader from "../primitives/Loader";
+import {
+  copytoData,
+  usertimezone
+} from "../constant/Utils";
+import {
+  emailRegex,
+} from "../constant/const";
+import {
+  useTranslation
+} from "react-i18next";
+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 = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!emailRegex.test(formdata.email)) {
+      alert("Please enter a valid email address.");
+    } 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));
+            console.log("parseData ", parseData);
+            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">
+      <Title title={t("add-user")} />
+      {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 text-gray-700 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"
+                        />
+                      </div>
+                      <div className="mb-3">
+                        <label
+                          htmlFor="email"
+                          className="block text-xs text-gray-700 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"
+                        />
+                      </div>
+                      <div className="mb-3">
+                        <label className="block text-xs text-gray-700 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 text-gray-700 font-semibold"
+                        >
+                          {t("phone")}
+                          {/* <span className="text-[red] text-[13px]"> *</span> */}
+                        </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 text-gray-700 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;
@@ -3,7 +3,9 @@ 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 {
+  emailRegex,
+} from "../constant/const";
 const BulkSendUi = (props) => {
  const { t } = useTranslation();
  const [forms, setForms] = useState([]);
@@ -20,15 +22,15 @@ const BulkSendUi = (props) => {

  //function to check atleast one signature field exist
  const signatureExist = async () => {
-    setIsDisableBulkSend(false);
-    const getPlaceholder = props?.Placeholders;
-    const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
-      placeholderObj?.placeHolder?.some((holder) =>
-        holder?.pos?.some((posItem) => posItem?.type === "signature")
-      )
-    );
-    setIsSignatureExist(checkIsSignatureExistt);
-    setIsLoader(false);
+      setIsDisableBulkSend(false);
+      const getPlaceholder = props?.Placeholders;
+      const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
+        placeholderObj?.placeHolder?.some((holder) =>
+          holder?.pos?.some((posItem) => posItem?.type === "signature")
+        )
+      );
+      setIsSignatureExist(checkIsSignatureExistt);
+      setIsLoader(false);
  };
  useEffect(() => {
    if (scrollOnNextUpdate && formRef.current) {
@@ -72,6 +74,7 @@ const BulkSendUi = (props) => {
    setForms(newForms);
  };

+
  const handleRemoveForm = (index) => {
    const updatedForms = forms.filter((_, i) => i !== index);
    setForms(updatedForms);
@@ -92,83 +95,82 @@ const BulkSendUi = (props) => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
-    setIsSubmit(true);
-    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 = [];
-      // Loop through each form
-      forms.forEach((form) => {
-        //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: field.email,
-                signerObjId: field?.signer?.objectId || "",
-                signerPtr: signer
-              };
+      setIsSubmit(true);
+      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 = [];
+        // Loop through each form
+        forms.forEach((form) => {
+          //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);
            }
-          }
-          // If no matching field is found, keep the placeholder as is
-          return placeholder;
-        });
+          });
+          // 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: 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
-        if (existSigner?.length > 0) {
-          Documents.push({
-            ...props.item,
-            Placeholders: updatedPlaceholders,
-            Signers: props.item.Signers
-              ? [...props.item.Signers, ...existSigner]
-              : [...existSigner]
-          });
-        } else {
-          Documents.push({
-            ...props.item,
-            Placeholders: updatedPlaceholders,
-            SignatureType: props.signatureType
-          });
-        }
-      });
-      await batchQuery(Documents);
-    } else {
-      setIsSubmit(false);
-    }
+          // Push a new document object with updated Placeholders into the Documents array
+          if (existSigner?.length > 0) {
+            Documents.push({
+              ...props.item,
+              Placeholders: updatedPlaceholders,
+              Signers: props.item.Signers
+                ? [...props.item.Signers, ...existSigner]
+                : [...existSigner]
+            });
+          } else {
+            Documents.push({
+              ...props.item,
+              Placeholders: updatedPlaceholders,
+              SignatureType: props.signatureType
+            });
+          }
+        });
+        await batchQuery(Documents);
+      } else {
+        setIsSubmit(false);
+      }
  };

  const batchQuery = async (Documents) => {
-    const token = {
-      "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-    };
+    const token =
+          { "X-Parse-Session-Token": localStorage.getItem("accesstoken") };
    const functionsUrl = `${localStorage.getItem(
      "baseUrl"
    )}functions/batchdocuments`;
    const headers = {
      "Content-Type": "application/json",
      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-      ...token
+      ...token,
    };
    const params = { Documents: JSON.stringify(Documents) };
    try {
@@ -275,7 +277,8 @@ const BulkSendUi = (props) => {
              )}
            </>
          ) : (
-            <></>
+            <>
+            </>
          )}
        </>
      )}
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import dp from "../assets/images/dp.png";
 import FullScreenButton from "./FullScreenButton";
 import { useNavigate } from "react-router";
@@ -32,14 +32,15 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+
  async function initializeHead() {
-    const applogo = await getAppLogo();
-    if (applogo?.logo) {
-      setAppLogo(applogo?.logo);
-    } else {
-      const logo = localStorage.getItem("appLogo") || appInfo.applogo;
-      setAppLogo(logo);
-    }
+      const applogo = await getAppLogo();
+      if (applogo?.logo) {
+        setAppLogo(applogo?.logo);
+      } else {
+        const logo = localStorage.getItem("appLogo") || appInfo.applogo;
+        setAppLogo(logo);
+      }
  }

  const closeDropdown = async () => {
@@ -152,15 +153,15 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
            >
              {!isConsole && (
                <>
-                  <li
-                    onClick={() =>
-                      openInNewTab("https://docs.opensignlabs.com")
-                    }
-                  >
-                    <span>
-                      <i className="fa-light fa-book"></i> {t("docs")}
-                    </span>
-                  </li>
+                    <li
+                      onClick={() =>
+                        openInNewTab("https://docs.opensignlabs.com")
+                      }
+                    >
+                      <span>
+                        <i className="fa-light fa-book"></i> {t("docs")}
+                      </span>
+                    </li>
                  <li
                    onClick={() => {
                      setIsOpen(false);
@@ -171,15 +172,26 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
                      <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("/changepassword");
+                      navigate("/verify-document");
                    }}
                  >
                    <span>
-                      <i className="fa-light fa-lock"></i>{" "}
-                      {t("change-password")}
+                      <i className="fa-light fa-check-square"></i>{" "}
+                      {t("verify-document")}
                    </span>
                  </li>
                </>
@@ -1,4 +1,3 @@
-import React from "react";
 import { Helmet } from "react-helmet";

 function Title({ title, drive }) {
@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useRef } from "react";
 import "../../styles/opensigndrive.css";
 import axios from "axios";
-import * as ContextMenu from "@radix-ui/react-context-menu";
+import { ContextMenu } from "radix-ui";
 import { useNavigate } from "react-router";
 import Table from "react-bootstrap/Table";
-import * as HoverCard from "@radix-ui/react-hover-card";
+import { HoverCard } from "radix-ui";
 import ModalUi from "../../primitives/ModalUi";
 import FolderModal from "../shared/fields/FolderModal";
 import { useTranslation } from "react-i18next";
@@ -12,19 +12,32 @@ function AgreementSign(props) {
      <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">
-            <input
-              data-tut="IsAgree"
-              className="mr-3 op-checkbox op-checkbox-m"
-              type="checkbox"
-              value={isChecked}
-              onChange={(e) => {
-                setIsChecked(e.target.checked);
-                if (e.target.checked) {
-                  props.setIsAgreeTour(false);
-                }
-                props.showFirstWidget();
-              }}
-            />
+            <label className="inline-flex justify-center items-center cursor-pointer mb-0">
+              {/* 1) This div becomes the “fake” checkbox */}
+              <div
+                data-tut="IsAgree"
+                className={`w-6 h-6 border-2 mr-3 rounded-full flex text-center items-center justify-center ${isChecked ? "op-border-primary" : "border-red-500"}`}
+              >
+                {isChecked ? (
+                  <span className="op-text-primary text-sm font-bold">✓</span>
+                ) : (
+                  <span className="text-red-500 text-sm font-bold">X</span>
+                )}
+              </div>
+              {/* 2) Visually hide the native checkbox but keep it in the DOM */}
+              <input
+                className="sr-only"
+                type="checkbox"
+                checked={isChecked}
+                onChange={(e) => {
+                  setIsChecked(e.target.checked);
+                  if (e.target.checked) {
+                    props.setIsAgreeTour(false);
+                  }
+                  props.showFirstWidget();
+                }}
+              />
+            </label>
            <div className="text-[11px] md:text-base">
              <span>{t("agree-p1")}</span>
              <span
@@ -0,0 +1,123 @@
+import { useState, useEffect, useRef } from "react";
+
+const Cell = ({
+  count,
+  h,
+  value,
+  editable,
+  onChange,
+  onKeyDown,
+  inputRef,
+  index
+}) => (
+  <div
+    className="flex items-center justify-center border border-gray-800 bg-white"
+    style={{ flex: `0 0 ${100 / count}%`, height: h }}
+  >
+    <input
+      maxLength={1}
+      value={value}
+      readOnly={!editable}
+      ref={inputRef}
+      onChange={editable ? (e) => onChange && onChange(e, index) : undefined}
+      onKeyDown={editable ? (e) => onKeyDown && onKeyDown(e, index) : undefined}
+      className="w-full text-center uppercase focus:outline-none bg-transparent text-[12px]"
+      style={{ fontFamily: "Arial, sans-serif" }}
+    />
+  </div>
+);
+
+export default function CellsWidget({
+  count = 8,
+  height = 40,
+  value = "",
+  editable = false,
+  onChange,
+  onKeyDown,
+  onCellCountChange,
+  inputRefs,
+  resizable = false
+}) {
+  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] || "");
+
+  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 -top-3 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}
+          count={cellCount}
+          h={height}
+          value={val}
+          editable={editable}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          inputRef={inputRefs ? (el) => (inputRefs.current[i] = el) : undefined}
+          index={i}
+        />
+      ))}
+    </div>
+  );
+}
@@ -1,7 +1,10 @@
 import React, { 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) => {
@@ -69,15 +72,15 @@ function DefaultSignature(props) {
            <img
              alt="signature"
              className="w-full h-full object-contain"
-              src={props?.defaultSignImg}
+              src={defaultSignImg}
            />
          ) : (
            activeTab === 1 &&
-            (props?.myInitial ? (
+            (myInitial ? (
              <img
                alt="signature"
                className="w-full h-full object-contain"
-                src={props?.myInitial}
+                src={myInitial}
              />
            ) : (
              <div className="flex justify-center items-center h-full">
@@ -97,7 +100,7 @@ function DefaultSignature(props) {
          disabled={
            activeTab === 0 && !props?.isDefault
              ? true
-              : activeTab === 1 && !props.myInitial
+              : activeTab === 1 && !myInitial
                ? true
                : false
          }
@@ -7,34 +7,36 @@ import { fontColorArr, fontsizeArr } from "../../constant/Utils";
 function DropdownWidgetOption(props) {
  const { t } = useTranslation();
  const [dropdownOptionList, setDropdownOptionList] = useState([
-    "option-1",
-    "option-2"
+    "Option-1",
+    "Option-2"
  ]);
  const [minCount, setMinCount] = useState(0);
  const [maxCount, setMaxCount] = useState(0);
-  const [dropdownName, setDropdownName] = useState(props.type);
+  const [dropdownName, setDropdownName] = useState();
  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 [layout, setLayout] = useState("vertical");
+  const statusArr = ["required", "optional"];
+  const layoutArr = ["vertical", "horizontal"];

  const resetState = () => {
-    setDropdownOptionList(["option-1", "option-2"]);
-    setDropdownName(props.type);
+    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
+      props.currWidgetsDetails?.options?.values?.length > 0
    ) {
      setDropdownName(props.currWidgetsDetails?.options?.name);
      setDropdownOptionList(props.currWidgetsDetails?.options?.values);
@@ -49,6 +51,7 @@ function DropdownWidgetOption(props) {
      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();
@@ -104,6 +107,25 @@ function DropdownWidgetOption(props) {
        ? defaultCheckbox
        : defaultValue;

+    const isDropdownOrRadio =
+      props?.type === "dropdown" || props?.type === radioButtonWidget;
+    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(
+        props?.type === "dropdown"
+          ? t("readonly-dropdown-error")
+          : t("readonly-radiobtn-error")
+      );
+      return;
+    }
+
+    // Otherwise (either not a dropdown, or a valid dropdown), do the save + reset exactly once.
    props.handleSaveWidgetsOptions(
      dropdownName,
      dropdownOptionList,
@@ -114,18 +136,10 @@ function DropdownWidgetOption(props) {
      null,
      status,
      defaultData,
-      isHideLabel
+      isHideLabel,
+      WidgetLayout
    );
-    //  props.setShowDropdown(false);
-    setDropdownOptionList(["option-1", "option-2"]);
-    setDropdownName(props.type);
-    //  props.setCurrWidgetsDetails({});
-    setIsReadOnly(false);
-    setIsHideLabel(false);
-    setMinCount(0);
-    setMaxCount(0);
-    setDefaultCheckbox([]);
-    setDefaultValue("");
+    resetState();
  };


@@ -137,7 +151,6 @@ function DropdownWidgetOption(props) {
      return false;
    }
  };
-
  return (
    <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
      <div className="h-full p-[15px] text-base-content">
@@ -148,25 +161,25 @@ function DropdownWidgetOption(props) {
          }}
        >
          <div>
-            <label className="text-[13px] font-semibold">
+            <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("")}
-              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"
+              required
            />

            <label className="text-[13px] font-semibold mt-[5px]">
              {t("options")}
            </label>
            <div className="flex flex-col">
-              {dropdownOptionList.map((option, index) => (
+              {dropdownOptionList?.map((option, index) => (
                <div
                  key={index}
                  className="flex flex-row mb-[5px] items-center"
@@ -240,28 +253,24 @@ function DropdownWidgetOption(props) {
                </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>
-              </>
+            {props.type !== "checkbox" && (
+              <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>
@@ -282,8 +291,8 @@ function DropdownWidgetOption(props) {
                  );
                })}
              </select>
-              <div className="flex flex-row gap-1 items-center ml-4  ">
-                <span>{t("color")} : </span>
+              <div className="flex flex-row gap-1 items-center ml-4">
+                <span className="capitalize">{t("color")} : </span>
                <select
                  value={
                    props.fontColor ||
@@ -325,7 +334,7 @@ function DropdownWidgetOption(props) {
                      className="op-checkbox op-checkbox-sm"
                      onChange={(e) => setIsReadOnly(e.target.checked)}
                    />
-                    <label className="ml-1 mb-0" htmlFor="isreadonly">
+                    <label className="ml-2 mb-0 capitalize" htmlFor="isreadonly">
                      {t("read-only")}
                    </label>
                  </div>
@@ -340,15 +349,42 @@ function DropdownWidgetOption(props) {
                      onChange={(e) => setIsHideLabel(e.target.checked)}
                    />

-                    <label className="ml-1 mb-0" htmlFor="ishidelabel">
+                    <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 capitalize">
+                        {data}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
          </div>
-
          <div
            className={`${
              props.type === "checkbox" && props.isShowAdvanceFeature
@@ -1,4 +1,7 @@
-import React, { useState, useRef } from "react";
+import {
+  useState,
+  useRef,
+} from "react";
 import {
  base64ToArrayBuffer,
  convertBase64ToFile,
@@ -24,9 +27,10 @@ const EditTemplate = ({
  template,
  onSuccess,
  setPdfArrayBuffer,
-  setPdfBase64Url
+  setPdfBase64Url,
 }) => {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const { t } = useTranslation();
  const inputFileRef = useRef(null);
  const [formData, setFormData] = useState({
@@ -165,7 +169,10 @@ const EditTemplate = ({
    }
    let pdfUrl;
    if (uploadPdf?.base64) {
-      pdfUrl = await convertBase64ToFile(uploadPdf.name, uploadPdf.base64);
+      pdfUrl = await convertBase64ToFile(
+        uploadPdf.name,
+        uploadPdf.base64,
+      );
      setUploadPdf((prev) => ({ ...prev, url: pdfUrl }));
      const pdfBuffer = base64ToArrayBuffer(uploadPdf.base64);
      setPdfArrayBuffer && setPdfArrayBuffer(pdfBuffer);
@@ -447,7 +454,11 @@ const EditTemplate = ({
                </Tooltip>
              </label>
              <div className="flex flex-col md:flex-row md:gap-4">
-                <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                <div
+                  className={
+                    `flex items-center gap-2 ml-2 mb-1`
+                  }
+                >
                  <input
                    className="mr-[2px] op-radio op-radio-xs"
                    type="radio"
@@ -456,7 +467,11 @@ const EditTemplate = ({
                  />
                  <div className="text-center">{t("yes")}</div>
                </div>
-                <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                <div
+                  className={
+                    `flex items-center gap-2 ml-2 mb-1`
+                  }
+                >
                  <input
                    className="mr-[2px] op-radio op-radio-xs"
                    type="radio"
@@ -1,6 +1,10 @@
 import React, { useState } from "react";
-import { handleToPrint } from "../../constant/Utils";
-import { emailRegex } from "../../constant/const";
+import {
+  handleToPrint,
+} from "../../constant/Utils";
+import {
+  emailRegex,
+} from "../../constant/const";
 import Loader from "../../primitives/Loader";
 import ModalUi from "../../primitives/ModalUi";
 import { useTranslation } from "react-i18next";
@@ -37,7 +41,8 @@ function EmailComponent({
        setEmailList([]);
      }, 1500);
      setIsLoading(false);
-    } else {
+    }
+    else {
      setIsLoading(false);
      setIsEmail(false);
      setIsAlert({
@@ -9,7 +9,7 @@ import {
  handleToPrint
 } from "../../constant/Utils";
 import "../../styles/signature.css";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu } from "radix-ui";
 import ModalUi from "../../primitives/ModalUi";
 import Loader from "../../primitives/Loader";
 import { useTranslation } from "react-i18next";
@@ -276,6 +276,20 @@ function Header(props) {
                          className="bg-white shadow-md rounded-md px-3 py-2"
                          sideOffset={5}
                        >
+                          {props?.setIsEditTemplate && (
+                            <DropdownMenu.Item
+                              className="DropdownMenuItem"
+                              onClick={() => props?.setIsEditTemplate(true)}
+                            >
+                              <div className="flex flex-row">
+                                <i
+                                  className="fa-light fa-gear mr-[3px]"
+                                  aria-hidden="true"
+                                ></i>
+                                <span className="font-[500]">{t("Edit")}</span>
+                              </div>
+                            </DropdownMenu.Item>
+                          )}
                          <DropdownMenu.Item
                            className="DropdownMenuItem"
                            onClick={() =>
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import BorderResize from "./BorderResize";
-import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
 import {
+  changeDateToMomentFormat,
  defaultWidthHeight,
  fontColorArr,
  fontsizeArr,
@@ -13,6 +13,7 @@ import {
  onChangeInput,
  radioButtonWidget,
  textInputWidget,
+  cellsWidget,
  textWidget
 } from "../../constant/Utils";
 import PlaceholderType from "./PlaceholderType";
@@ -20,6 +21,9 @@ import moment from "moment";
 import "../../styles/opensigndrive.css";
 import ModalUi from "../../primitives/ModalUi";
 import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { setIsShowModal } from "../../redux/reducers/widgetSlice";
+import { themeColor } from "../../constant/const";

 const selectFormat = (data) => {
  switch (data) {
@@ -52,32 +56,6 @@ const selectFormat = (data) => {
  }
 };

-const changeDateToMomentFormat = (format) => {
-  switch (format) {
-    case "MM/dd/yyyy":
-      return "L";
-    case "dd-MM-yyyy":
-      return "DD-MM-YYYY";
-    case "dd/MM/yyyy":
-      return "DD/MM/YYYY";
-    case "MMMM dd, yyyy":
-      return "LL";
-    case "dd MMM, yyyy":
-      return "DD MMM, YYYY";
-    case "yyyy-MM-dd":
-      return "YYYY-MM-DD";
-    case "MM-dd-yyyy":
-      return "MM-DD-YYYY";
-    case "MM.dd.yyyy":
-      return "MM.DD.YYYY";
-    case "MMM dd, yyyy":
-      return "MMM DD, YYYY";
-    case "dd MMMM, yyyy":
-      return "DD MMMM, YYYY";
-    default:
-      return "L";
-  }
-};
 //function to get default format
 const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";

@@ -97,31 +75,27 @@ const getDefaultDate = (dateStr, format) => {
 };

 function Placeholder(props) {
-  //'isTouchDevice' is used to detect whether a device has a touchscreen or is mouse-based
-  const isTouchDevice = navigator.maxTouchPoints > 0;
  const { t } = useTranslation();
-  const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
-  const [isDraggingEnabled, setDraggingEnabled] = useState(true);
+  const dispatch = useDispatch();
+  const widgetData =
+    props.pos?.options?.defaultValue || props.pos?.options?.response;
  const [isDateModal, setIsDateModal] = useState(false);
  const [containerScale, setContainerScale] = useState();
  const holdTimeout = useRef(null);
  const startTime = useRef(null); // Track when the user starts holdings
-  const [isDisableDragging, setIsDisableDragging] = useState(true);
  const [selectDate, setSelectDate] = useState({});
  const [dateFormat, setDateFormat] = useState([]);
  const [clickonWidget, setClickonWidget] = useState({});
-  const [startDate, setStartDate] = useState(
-    props?.pos?.options?.response
-      ? getDefaultDate(
-          props?.pos?.options?.response,
-          props.pos?.options?.validation?.format
-        )
-      : new Date()
+  const [isDateReadOnly, setIsDateReadOnly] = useState(
+    props?.pos?.options?.isReadOnly || false
  );
-  const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
-    width: null,
-    height: null
-  });
+  const startDate = props?.pos?.options?.response
+    ? getDefaultDate(
+        props?.pos?.options?.response,
+        props.pos?.options?.validation?.format
+      )
+    : new Date();
+
  useEffect(() => {
    const getPdfPageWidth = props.pdfOriginalWH.find(
      (data) => data.pageNumber === props.pageNumber
@@ -142,33 +116,16 @@ function Placeholder(props) {
  ];

  useEffect(() => {
-    const updateWidth = () => {
-      const rndElement = document.getElementById(props.pos.key);
-      if (rndElement) {
-        const { width, height } = rndElement.getBoundingClientRect();
-        setGetCheckboxRenderWidth({ width: width, height: height });
-      }
-    };
+    if (props?.pos?.type === "date") {
+      const isDateChange = true;
+      const dateObj = {
+        date: startDate,
+        format: getDefaultFormat(props.pos?.options?.validation?.format)
+      };
+      handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
+    }
+  }, [widgetData]);

-    // Delay to ensure rendering is complete
-    const timer = setTimeout(updateWidth, 0);
-
-    return () => clearTimeout(timer);
-  }, [props.pos]);
-  useEffect(() => {
-    const onOutsideClick = () => {
-      if (!isDraggingEnabled) {
-        setDraggingEnabled(true);
-      }
-    };
-
-    document.addEventListener("click", onOutsideClick);
-
-    return () => {
-      // Cleanup the event listener when the component unmounts
-      document.removeEventListener("click", onOutsideClick);
-    };
-  }, [isDraggingEnabled]);
  //function change format array list with selected date and format
  const changeDateFormat = () => {
    const updateDate = [];
@@ -200,60 +157,39 @@ function Placeholder(props) {

  //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
  const handleWidgetIdandPopup = async () => {
-    if (props.setSelectWidgetId) {
-      props.setSelectWidgetId(props.pos.key);
-    }
-
-    const widgetTypeExist = [
-      textInputWidget,
-      "checkbox",
-      "name",
-      "company",
-      "job title",
-      "date",
-      "email",
-      textWidget
-    ].includes(props.pos.type);
-
-    if (widgetTypeExist) {
-      setDraggingEnabled(false);
-    }
-    if (props.isOpenSignPad && !props.isDragging) {
+    //'props.isOpenSignPad' variable is used to check flow to open signature pad for finish document
+    if (
+      props.isOpenSignPad &&
+      !props.isDragging &&
+      !props.pos.options?.isReadOnly &&
+      props.pos.type !== textWidget
+    ) {
      if (props?.ispublicTemplate) {
        props.handleUserDetails();
      } else {
-        if (props?.isNeedSign) {
-          //funcion is used to heightlight widgets on top if two widgets on overlap
-          const getCurrentSignerPos = props.xyPosition.find(
-            (x) => x.Id === props.uniqueId
-          );
-          const updateZindex = handleHeighlightWidget(
-            getCurrentSignerPos,
-            props.pos.key,
-            props.pageNumber
-          );
-          const updatesignerPos = props.xyPosition.map((x) =>
-            x.Id === props.uniqueId ? { ...x, placeHolder: updateZindex } : x
-          );
-          props.setXyPosition(updatesignerPos);
-        }
-        if (
-          ["signature", "stamp", "image", "initials"].includes(props.pos.type)
-        ) {
-          props.setIsSignPad(true);
-          props.setSignKey(props.pos.key);
-          props.setIsStamp(props.pos.isStamp);
-        }
-        if (props.pos.type === "initials") {
-          props.setIsInitial(true);
-        }
+          if (props?.isNeedSign) {
+            //funcion is used to highlight widgets on top when click any widget if two widgets on overlap
+            const getCurrentSignerPos = props.xyPosition.find(
+              (x) => x.Id === props.uniqueId
+            );
+            const updateZindex = handleHeighlightWidget(
+              getCurrentSignerPos,
+              props.pos.key,
+              props.pageNumber
+            );
+            const updatesignerPos = props.xyPosition.map((x) =>
+              x.Id === props.uniqueId ? { ...x, placeHolder: updateZindex } : x
+            );
+            props.setXyPosition(updatesignerPos);
+          }
+          dispatch(setIsShowModal({ [props.pos.key]: true }));
      }
    } else if (
      props.isPlaceholder &&
      !props.isDragging &&
      props.pos.type !== textWidget
    ) {
-      if (props.pos.key === props.selectWidgetId) {
+      if (props.pos.key === props?.currWidgetsDetails?.key) {
        props.handleLinkUser(props.data.Id);
        props.setUniqueId(props.data.Id);
        const checkIndex = props.xyPosition.findIndex(
@@ -261,31 +197,17 @@ function Placeholder(props) {
        );
        props.setIsSelectId(checkIndex || 0);
      }
-    } else if (!props.pos.type) {
-      if (
-        !props.pos.type &&
-        props.isNeedSign &&
-        props.data.signerObjId === props.signerObjId
-      ) {
-        props.setIsSignPad(true);
-        props.setSignKey(props.pos.key);
-        props.setIsStamp(props.pos.isStamp);
-      } else if (
-        (props.isNeedSign && props.pos.type === "signature") ||
-        props.pos.type === "stamp"
-      ) {
-        props.setIsSignPad(true);
-        props.setSignKey(props.pos.key);
-        props.setIsStamp(props.pos.isStamp);
-      } else if (props.isNeedSign && props.pos.type === "dropdown") {
-        props.setSignKey(props.pos.key);
-      }
+      //handle prefill 'text widget' click then save previos in tem variable after save or close button again assign current selected userId
+    } else if (props.pos.type === textWidget) {
+      dispatch(setIsShowModal({ [props.pos.key]: true }));
+      props.setTempSignerId(props?.uniqueId);
+      props.setUniqueId(props?.data?.Id);
    }
  };

  const widgetClickHandler = () => {
-    //The else condition opens the signature pad if it's a request signature flow and the user clicking is identified as a signer.
    props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
+    //condition to check in request signing flow user click on agree or not
    if (props?.data?.signerObjId === props?.signerObjId && !props.isDragging) {
      if (!props.isAgree && !props.isSelfSign) {
        props.setIsAgreeTour && props.setIsAgreeTour(true);
@@ -297,7 +219,10 @@ function Placeholder(props) {
      handleWidgetIdandPopup();
    }
  };
+
  const handleOnClickPlaceholder = () => {
+    //'props.isDragging' variable is used to checking if user take any widget and try to drag then in that case
+    //onclick event call. so to prevent onclick and do not open unecessary modal open.
    //condition only for request signing flow and self signing flow then apply one click copy sign url of previous drawn signature
    if (props.isApplyAll) {
      props.setRequestSignTour && props.setRequestSignTour(true);
@@ -367,12 +292,9 @@ function Placeholder(props) {
      } else {
        widgetClickHandler();
      }
-      // }
-      // }
    } else {
      //The else condition is used to handle the case when the user clicks on a widget and open signature pad to draw sign
      props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
-      props.setWidgetType(props.pos.type);
      handleWidgetIdandPopup();
    }
  };
@@ -416,8 +338,6 @@ function Placeholder(props) {
      props.setTempSignerId(props.uniqueId);
      props.setUniqueId(props?.data?.Id);
    }
-    props.setSignKey(props.pos.key);
-    props.setWidgetType(props.pos.type);
    props.setCurrWidgetsDetails(props.pos);
  };
  //function to set required state value onclick on widget's copy icon
@@ -450,7 +370,7 @@ function Placeholder(props) {
      )
    ) {
      props.setIsPageCopy(true);
-      props.setSignKey(props.pos.key);
+      props.setCurrWidgetsDetails(props.pos);
    } else {
      //function to create new widget next to just widget
      handleCopyNextToWidget(
@@ -464,18 +384,6 @@ function Placeholder(props) {
    }
  };

-  //function to save date and format after seleted new date in response field and after finish document it should be emebed new selected date instead of current date
-  useEffect(() => {
-    if (props.pos.type === "date") {
-      const isDateChange = true;
-      const dateObj = {
-        date: startDate,
-        format: getDefaultFormat(props.pos?.options?.validation?.format)
-      };
-      handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startDate]);
  //function to save date and format on local array onchange date and onclick format
  const handleSaveDate = (data, isDateChange) => {
    let updateDate = data.date;
@@ -501,13 +409,48 @@ function Placeholder(props) {
      props.data && props.data.Id,
      false,
      data?.format,
-      null,
-      null,
      props.fontSize || props.pos?.options?.fontSize || 12,
-      props.fontColor || props.pos?.options?.fontColor || "black"
+      props.fontColor || props.pos?.options?.fontColor || "black",
+      isDateReadOnly || false
    );
    setSelectDate({ date: date, format: data?.format });
  };
+
+  const setCellCount = (key, newCount) => {
+    const isSignerList = props.xyPosition.some((d) => d.signerPtr);
+    if (isSignerList) {
+      const signerId = props.data?.Id || props.uniqueId;
+      const filterSignerPos = props.xyPosition.filter((d) => d.Id === signerId);
+      if (filterSignerPos.length > 0) {
+        const getPlaceHolder = filterSignerPos[0].placeHolder;
+        const updatedPlaceHolder = getPlaceHolder.map((ph) => {
+          if (ph.pageNumber !== props.pageNumber) return ph;
+          const newPos = ph.pos.map((p) =>
+            p.key === key
+              ? { ...p, options: { ...p.options, cellCount: newCount } }
+              : p
+          );
+          return { ...ph, pos: newPos };
+        });
+        const newSignerPos = props.xyPosition.map((obj) =>
+          obj.Id === signerId
+            ? { ...obj, placeHolder: updatedPlaceHolder }
+            : obj
+        );
+        props.setXyPosition(newSignerPos);
+      }
+    } else {
+      const updatePos = props.xyPosition[props.index].pos.map((p) =>
+        p.key === key
+          ? { ...p, options: { ...p.options, cellCount: newCount } }
+          : p
+      );
+      const updatePlaceholder = props.xyPosition.map((obj, ind) =>
+        ind === props.index ? { ...obj, pos: updatePos } : obj
+      );
+      props.setXyPosition(updatePlaceholder);
+    }
+  };
  const PlaceholderIcon = () => {
    // 1- If props.isShowBorder is true, display border's icon for all widgets. OR
    // 2- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show border's icon:
@@ -611,7 +554,7 @@ function Placeholder(props) {
                e.stopPropagation();
                setClickonWidget(props.pos);
                if (props.data) {
-                  props.setSignKey(props.pos.key);
+                  props.setCurrWidgetsDetails(props.pos);
                  props.setUniqueId(props.data.Id);
                  const checkIndex = props.xyPosition.findIndex(
                    (data) => data.Id === props.data.Id
@@ -624,7 +567,7 @@ function Placeholder(props) {
                e.stopPropagation();
                setIsDateModal(!isDateModal);
                if (props.data) {
-                  props.setSignKey(props.pos.key);
+                  props.setCurrWidgetsDetails(props.pos);
                  props.setUniqueId(props.data.Id);
                  const checkIndex = props.xyPosition.findIndex(
                    (data) => data.Id === props.data.Id
@@ -661,7 +604,6 @@ function Placeholder(props) {
              //condition for signyour-self flow
              else {
                props.handleDeleteSign(props.pos.key);
-                props.setIsStamp(false);
              }
            }}
            //for mobile and tablet touch event
@@ -674,7 +616,6 @@ function Placeholder(props) {
              //condition for signyour-self flow
              else {
                props.handleDeleteSign(props.pos.key);
-                props.setIsStamp(false);
              }
            }}
            style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
@@ -769,43 +710,7 @@ function Placeholder(props) {
      return "all-scroll";
    }
  };
-  const handleDragging = () => {
-    //condition for request signing flow
-    if (props.isNeedSign) {
-      //enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
-      if (
-        props.isAlllowModify &&
-        props?.assignedWidgetId.includes(props.pos.key) &&
-        props.data?.signerObjId === props.signerObjId
-      ) {
-        //if 'isTouchDevice' then handle dragging functionality conditionaly
-        if (isTouchDevice) {
-          return isDisableDragging;
-        } else {
-          //no need to handle dragging functionality it auto enable and working or mouse click devices
-          return false;
-        }
-      } else if (
-        //condition when 'isAlllowModify' is true and user add new widgets then handle dragging functionality like signyourself flow
-        props.isAlllowModify &&
-        !props?.assignedWidgetId.includes(props.pos.key) &&
-        props.data?.signerObjId === props.signerObjId
-      ) {
-        return !isDraggingEnabled;
-      } else {
-        //if 'isAlllowModify' is false then disbale dragging functionality
-        return true;
-      }
-    } //dragging enable in placeholder,template and not text widget flow
-    else if (props.isPlaceholder && ![textWidget].includes(props.pos.type)) {
-      return false;
-    } //dragging depend on 'isDraggingEnabled' variable in self sign and signyourself flow
-    else if (isTouchDevice) {
-      return !isDraggingEnabled;
-    } else {
-      return false;
-    }
-  };
+
  //function to handle widget background color
  const handleBackground = () => {
    if (props.data) {
@@ -837,42 +742,38 @@ function Placeholder(props) {
    }
    if (!props.isNeedSign || props.isAlllowModify) handleOnClickPlaceholder();
  };
-  const handleTouchStart = () => {
-    clearTimeout(holdTimeout.current); // Ensure no previous timeouts are running
-    startTime.current = Date.now(); // Store touch start time

-    holdTimeout.current = setTimeout(() => {
-      //handlle vibration and tab any widget and hold for 1 sec then show border outside widget and then user can able to drag
-      if (isDisableDragging) {
-        if (
-          props.isNeedSign &&
-          props.isAlllowModify &&
-          props?.assignedWidgetId.includes(props.pos.key)
-        ) {
-          try {
-            navigator.vibrate(200); // Vibrate for 200ms
-          } catch (e) {
-            console.log("error in  navigator.vibrate", e);
-          }
-          setIsDisableDragging(false);
-          props.setSelectWidgetId(props.pos.key);
-        } else if (!props.isNeedSign) {
-          setIsDisableDragging(false);
-        }
-      }
-    }, 1000); // Hold for 1 second before vibrating
-  };
  const fontSize = calculateFont(props.pos.options?.fontSize);
  const fontColor = props.pos.options?.fontColor || "black";
+
+  const handleDragging = () => {
+    //condition for request signing flow
+    if (props.isNeedSign) {
+      //enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
+      if (
+        props.isAlllowModify &&
+        !props?.assignedWidgetId.includes(props.pos.key) &&
+        props.data?.signerObjId === props.signerObjId
+      ) {
+        return false;
+      } else {
+        //if 'isAlllowModify' is false then disbale dragging functionality
+        return true;
+      }
+    } else {
+      return false;
+    }
+  };
  return (
    <>
      {/*  Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
      {props.pos?.options?.response &&
-      props.pos.key !== props.selectWidgetId &&
+      props.pos.key !== props?.currWidgetsDetails?.key &&
      props.pos.type === textWidget ? (
        <span
          onClick={() => {
-            props.setSelectWidgetId && props.setSelectWidgetId(props.pos.key);
+            props.setCurrWidgetsDetails &&
+              props.setCurrWidgetsDetails(props.pos);
          }}
          style={{
            fontFamily: "Arial, sans-serif",
@@ -891,16 +792,9 @@ function Placeholder(props) {
          id={props.pos.key}
          data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
          key={props.pos.key}
+          cancel=".cell-size-handle"
          lockAspectRatio={
            !props.isFreeResize &&
-            ![
-              textWidget,
-              "email",
-              "name",
-              "company",
-              "job title",
-              textInputWidget
-            ].includes(props.pos.type) &&
            (props.pos.Width
              ? props.pos.Width / props.pos.Height
              : defaultWidthHeight(props.pos.type).width /
@@ -921,7 +815,7 @@ function Placeholder(props) {
                  : false
                : props.pos.type !== radioButtonWidget &&
                  props.pos.type !== "checkbox" &&
-                  props.pos.key === props.selectWidgetId &&
+                  props.pos.key === props?.currWidgetsDetails?.key &&
                  true,
            bottomLeft: false,
            topLeft: false
@@ -934,7 +828,7 @@ function Placeholder(props) {
            cursor: getCursor(),
            zIndex:
              props.pos.type === "date"
-                ? props.pos.key === props.selectWidgetId
+                ? props.pos.key === props?.currWidgetsDetails?.key
                  ? 99 + 1
                  : 99
                : props?.pos?.zIndex
@@ -945,7 +839,6 @@ function Placeholder(props) {
            background: handleBackground()
          }}
          onDrag={() => {
-            setDraggingEnabled(true);
            props.handleTabDrag && props.handleTabDrag(props.pos.key);
          }}
          size={{
@@ -960,10 +853,14 @@ function Placeholder(props) {
                ? "auto"
                : props.posHeight(props.pos, props.isSignYourself)
          }}
-          minHeight={calculateFont(props.pos.options?.fontSize, true)}
+          minHeight={
+            props.pos.type === cellsWidget
+              ? calculateFont(props.pos.options?.fontSize, true)
+              : props.pos.type !== "checkbox" &&
+                calculateFont(props.pos.options?.fontSize, true)
+          }
          maxHeight="auto"
          onResizeStart={() => {
-            setDraggingEnabled(true);
            props.setIsResize && props.setIsResize(true);
          }}
          onResizeStop={(e, direction, ref) => {
@@ -983,9 +880,7 @@ function Placeholder(props) {
                props.isResize
              );
          }}
-          disableDragging={handleDragging()}
          onDragStop={(event, dragElement) => {
-            setIsDisableDragging(true);
            props.handleStop &&
              props.handleStop(
                event,
@@ -998,17 +893,9 @@ function Placeholder(props) {
            x: xPos(props.pos, props.isSignYourself),
            y: yPos(props.pos, props.isSignYourself)
          }}
-          onResize={(e, direction, ref) => {
-            setPlaceholderBorder({
-              w: ref.offsetWidth / (props.scale * containerScale),
-              h: ref.offsetHeight / (props.scale * containerScale)
-            });
-          }}
-          // onClick={() =>
-          //   !props.isResize && !isMobile && handleOnClickPlaceholder()
-          // }
+          disableDragging={handleDragging()}
        >
-          {props.pos.key === props.selectWidgetId &&
+          {props.pos.key === props?.currWidgetsDetails?.key &&
          ((props.isShowBorder &&
            ![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
            (props?.isAlllowModify &&
@@ -1035,59 +922,44 @@ function Placeholder(props) {
            )
          ) : (
            ![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
-            props.pos.key === props.selectWidgetId && <BorderResize />
+            props.pos.key === props?.currWidgetsDetails?.key && <BorderResize />
          )}

-          {/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
-            2- If props.isShowBorder is true, display borders for all widgets. 
-            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
-               1- When isAlllowModify is true, show borders.
-               2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
-    */}
-          {props.pos.key === props.selectWidgetId &&
-            (props.isShowBorder ||
-              !isDisableDragging ||
-              (props?.isAlllowModify &&
-                !props?.assignedWidgetId.includes(props.pos.key))) && (
-              <PlaceholderBorder
-                setDraggingEnabled={setDraggingEnabled}
-                pos={props.pos}
-                isPlaceholder={props.isPlaceholder}
-                getCheckboxRenderWidth={getCheckboxRenderWidth}
-                scale={props.scale}
-                containerScale={containerScale}
-                placeholderBorder={placeholderBorder}
-              />
-            )}
+          {/* 1- Show a ouline if props.pos.key === props?.currWidgetsDetails?.key, indicating the current user's selected widget.
+            2- If props.isShowBorder is true, display ouline for all widgets. 
+            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show ouline:
+              3.1- When isAlllowModify is true, show ouline.
+              3.2- Do not display ouline for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true). 
+            */}
          <div
-            className="flex items-stretch justify-center"
+            className={`${
+              props.pos.key === props?.currWidgetsDetails?.key &&
+              (props.isShowBorder ||
+                (props?.isAlllowModify &&
+                  !props?.assignedWidgetId.includes(props.pos.key)))
+                ? "outline-[0.3px] outline-dashed outline-offset-[10px]"
+                : ""
+            } flex items-stretch justify-center`}
            style={{
+              outlineColor: themeColor,
              left: xPos(props.pos, props.isSignYourself),
              top: yPos(props.pos, props.isSignYourself),
-              width:
-                props.pos.type === radioButtonWidget ||
-                props.pos.type === "checkbox"
-                  ? "auto"
-                  : props.posWidth(props.pos, props.isSignYourself),
-              height:
-                props.pos.type === radioButtonWidget ||
-                props.pos.type === "checkbox"
-                  ? "auto"
-                  : props.posHeight(props.pos, props.isSignYourself),
+              width: "100%",
+              height: "100%",
              zIndex: "10"
            }}
-            onTouchEnd={() => handleTouchEnd()}
+            onTouchEnd={() => handleOnClickPlaceholder()}
            onClick={() => handleOnClickPlaceholder()}
-            onTouchStart={() => handleTouchStart()}
          >
-            {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+            {props.pos.key === props?.currWidgetsDetails?.key && (
+              <PlaceholderIcon />
+            )}
            <PlaceholderType
              pos={props.pos}
              xyPosition={props.xyPosition}
              index={props.index}
              setXyPosition={props.setXyPosition}
              data={props.data}
-              setSignKey={props.setSignKey}
              isShowDropdown={props?.isShowDropdown}
              isPlaceholder={props.isPlaceholder}
              isSignYourself={props.isSignYourself}
@@ -1098,12 +970,11 @@ function Placeholder(props) {
              isNeedSign={props.isNeedSign}
              setSelectDate={setSelectDate}
              selectDate={selectDate}
-              setValidateAlert={props.setValidateAlert}
-              setStartDate={setStartDate}
              startDate={startDate}
              handleSaveDate={handleSaveDate}
              xPos={props.xPos}
              calculateFont={calculateFont}
+              setCellCount={setCellCount}
            />
          </div>
        </Rnd>
@@ -1111,11 +982,11 @@ function Placeholder(props) {

      <ModalUi isOpen={isDateModal} title={t("widget-info")} showClose={false}>
        <div className="h-[100%] p-[20px]">
-          <div className="flex flex-row items-center">
-            <span>{t("format")} : </span>
-            <div className="flex">
+          <div className="flex flex-col md:flex-row md:items-center gap-y-3">
+            <div className="flex flex-row items-center gap-x-1">
+              <span className="capitalize">{t("format")} :</span>
              <select
-                className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
                defaultValue={""}
                onChange={(e) => {
                  const selectedIndex = e.target.value;
@@ -1139,23 +1010,23 @@ function Placeholder(props) {
              {selectDate.format}
            </span>
          </div>
-          <div className="flex items-center mt-4 md:mt-2">
-            <span>{t("font-size")} :</span>
-            <select
-              className="ml-[3px] md:ml:[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-              value={props.fontSize || clickonWidget.options?.fontSize || 12}
-              onChange={(e) => props.setFontSize(parseInt(e.target.value))}
-            >
-              {fontsizeArr.map((size, ind) => {
-                return (
+          <div className="flex flex-col md:flex-row gap-y-2 md:gap-y-0 gap-x-2 mt-3">
+            <div className="flex flex-row items-center">
+              <span className="capitalize">{t("font-size")} :</span>
+              <select
+                className="ml-[3px] md:ml:[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                value={props.fontSize || clickonWidget.options?.fontSize || 12}
+                onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+              >
+                {fontsizeArr.map((size, ind) => (
                  <option className="text-[13px]" value={size} key={ind}>
                    {size}
                  </option>
-                );
-              })}
-            </select>
-            <div className="flex flex-row gap-1 items-center ml-2 md:ml-4 ">
-              <span>{t("color")}: </span>
+                ))}
+              </select>
+            </div>
+            <div className="flex flex-row gap-1 items-center">
+              <span className="capitalize">{t("color")} :</span>
              <select
                value={
                  props.fontColor || clickonWidget.options?.fontColor || "black"
@@ -1163,13 +1034,11 @@ function Placeholder(props) {
                onChange={(e) => props.setFontColor(e.target.value)}
                className="ml-[4px] md: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>
-                  );
-                })}
+                {fontColorArr.map((color, ind) => (
+                  <option value={color} key={ind}>
+                    {t(`color-type.${color}`)}
+                  </option>
+                ))}
              </select>
              <span
                style={{
@@ -1180,7 +1049,26 @@ function Placeholder(props) {
              ></span>
            </div>
          </div>
-
+          {props?.isPlaceholder && (
+            <div className="flex items-center mt-3">
+              <input
+                id="isReadOnly"
+                name="isReadOnly"
+                type="checkbox"
+                checked={
+                  isDateReadOnly || props.pos.options?.isReadOnly || false
+                }
+                className="op-checkbox op-checkbox-xs"
+                onChange={() => setIsDateReadOnly(!isDateReadOnly)}
+              />
+              <label
+                className="ml-1.5 mb-0 capitalize text-[13px]"
+                htmlFor="isreadonly"
+              >
+                {t("read-only")}
+              </label>
+            </div>
+          )}
          <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
          <button
            type="button"
@@ -1,60 +0,0 @@
-import React from "react";
-import { themeColor } from "../../constant/const";
-import {
-  defaultWidthHeight,
-  isMobile,
-  radioButtonWidget,
-  resizeBorderExtraWidth,
-  textWidget
-} from "../../constant/Utils";
-function PlaceholderBorder(props) {
-  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
-  const defaultWidth = defaultWidthHeight(props.pos.type).width;
-  const defaultHeight = defaultWidthHeight(props.pos.type).height;
-  const width = () => {
-    const getWidth =
-      props.placeholderBorder.w || props.pos.Width || defaultWidth;
-    return (
-      getWidth * props.scale * props.containerScale + getResizeBorderExtraWidth
-    );
-  };
-  const height = () => {
-    const getHeight =
-      props.placeholderBorder.h || props.pos.Height || defaultHeight;
-
-    return (
-      getHeight * props.scale * props.containerScale + getResizeBorderExtraWidth
-    );
-  };
-
-  const handleMinWidth = () => {
-    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
-      return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
-    } else {
-      return width();
-    }
-  };
-  const handleMinHeight = () => {
-    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
-      return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
-    } else {
-      return height();
-    }
-  };
-  return (
-    <div
-      onMouseEnter={() => !isMobile && props?.setDraggingEnabled(false)}
-      onTouchEnd={() =>
-        props.pos.type === textWidget && props?.setDraggingEnabled(false)
-      }
-      className="absolute inline-block w-[14px] h-[14px]  border-[0.2px] overflow-hidden border-dashed"
-      style={{
-        borderColor: themeColor,
-        minWidth: handleMinWidth() || 0,
-        minHeight: handleMinHeight() || 0
-      }}
-    ></div>
-  );
-}
-
-export default PlaceholderBorder;
@@ -1,903 +0,0 @@
-import React, { useEffect, useState, forwardRef, useRef } from "react";
-import {
-  getMonth,
-  getYear,
-  onChangeHeightOfTextArea,
-  onChangeInput,
-  radioButtonWidget,
-  range,
-  textInputWidget,
-  textWidget
-} from "../../constant/Utils";
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import "../../styles/signature.css";
-import RegexParser from "regex-parser";
-import { emailRegex } from "../../constant/const";
-import { useTranslation } from "react-i18next";
-const textWidgetCls =
-  "w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center whitespace-pre-wrap bg-white";
-const selectWidgetCls =
-  "w-full h-full absolute left-0 top-0 border-[1px] border-[#007bff] rounded-[2px] focus:outline-none text-base-content";
-const widgetCls =
-  "select-none-cls overflow-hidden w-full h-full text-black flex flex-col justify-center items-center";
-function PlaceholderType(props) {
-  const { t } = useTranslation();
-  const type = props?.pos?.type;
-  const widgetTypeTranslation = t(`widgets-name.${props?.pos?.type}`);
-  const [selectOption, setSelectOption] = useState("");
-  const [validatePlaceholder, setValidatePlaceholder] = useState("");
-  const inputRef = useRef(null);
-  const [textValue, setTextValue] = useState();
-  const [selectedCheckbox, setSelectedCheckbox] = useState([]);
-  const [hint, setHint] = useState("");
-  const years = range(1950, getYear(new Date()) + 16, 1);
-  const fontSize = props.calculateFont(props.pos.options?.fontSize);
-  const fontColor = props.pos.options?.fontColor || "black";
-  const months = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December"
-  ];
-  const textWidgetStyle = {
-    fontSize: fontSize,
-    color: fontColor,
-    fontFamily: "Arial, sans-serif",
-    overflow: "hidden",
-    textAlign: "start",
-    width: "100%",
-    display: "flex",
-    height: "100%"
-  };
-  const validateExpression = (regexValidation) => {
-    if (textValue && regexValidation) {
-      let regexObject = regexValidation;
-      if (props.pos?.options?.validation?.type === "regex") {
-        regexObject = RegexParser(regexValidation);
-      }
-      // new RegExp(regexValidation);
-      let isValidate = regexObject.test(textValue);
-      if (!isValidate) {
-        props?.setValidateAlert(true);
-        inputRef.current.focus();
-      }
-    }
-  };
-
-  const handleInputBlur = () => {
-    const validateType = props.pos?.options?.validation?.type;
-    let regexValidation;
-    if (validateType && validateType !== "text") {
-      switch (validateType) {
-        case "email":
-          regexValidation = emailRegex;
-          validateExpression(regexValidation);
-          break;
-        case "number":
-          regexValidation = /^[0-9\s]*$/;
-          validateExpression(regexValidation);
-          break;
-        default:
-          regexValidation = props.pos?.options?.validation?.pattern || "";
-          validateExpression(regexValidation);
-      }
-    }
-  };
-
-  const handleTextValid = (e) => {
-    const textInput = e.target.value;
-    setTextValue(textInput);
-  };
-  function checkRegularExpress(validateType) {
-    switch (validateType) {
-      case "email":
-        setValidatePlaceholder("demo@gmail.com");
-        break;
-      case "number":
-        setValidatePlaceholder("12345");
-        break;
-      case "text":
-        setValidatePlaceholder("please enter text");
-        break;
-      default:
-        setValidatePlaceholder("please enter value");
-    }
-  }
-
-  useEffect(() => {
-    if (type && type === "checkbox" && props.isNeedSign) {
-      const isDefaultValue = props.pos.options?.defaultValue;
-      if (isDefaultValue) {
-        setSelectedCheckbox(isDefaultValue);
-      }
-    } else if (props.pos?.options?.hint) {
-      setValidatePlaceholder(props.pos?.options.hint);
-    } else if (props.pos?.options?.validation?.type) {
-      checkRegularExpress(props.pos?.options?.validation?.type);
-    }
-    setTextValue(
-      props.pos?.options?.response
-        ? props.pos?.options?.response
-        : props.pos?.options?.defaultValue
-          ? props.pos?.options?.defaultValue
-          : ""
-    );
-    setSelectOption(
-      props.pos?.options?.response
-        ? props.pos?.options?.response
-        : props.pos?.options?.defaultValue
-          ? props.pos?.options?.defaultValue
-          : ""
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (
-      ["name", "email", "job title", "company"].includes(props.pos?.type) &&
-      props.isNeedSign &&
-      props.data?.signerObjId === props?.signerObjId
-    ) {
-      const defaultData = props.pos?.options?.defaultValue;
-      if (defaultData) {
-        setTextValue(defaultData);
-      }
-      if (props.pos?.options?.hint) {
-        setHint(props.pos?.options.hint);
-      } else {
-        setHint(props.pos?.type);
-      }
-    } else if ([textInputWidget].includes(props.pos?.type)) {
-      const defaultData = props.pos?.options?.defaultValue;
-      if (defaultData) {
-        setTextValue(defaultData);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.pos?.options?.defaultValue]);
-  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
-    <div
-      style={{
-        fontSize: fontSize,
-        color: fontColor,
-        fontFamily: "Arial, sans-serif"
-      }}
-      className={`${selectWidgetCls} overflow-hidden`}
-      onClick={onClick}
-      ref={ref}
-    >
-      {value}
-      <i className="fa-light fa-calendar ml-[5px]"></i>
-    </div>
-  ));
-  ExampleCustomInput.displayName = "ExampleCustomInput";
-
-  useEffect(() => {
-    if (
-      ["name", "email", "job title", "company"].includes(type) &&
-      props.isNeedSign &&
-      props.data?.signerObjId === props.signerObjId
-    ) {
-      const isDefault = true;
-      const senderUser = localStorage.getItem("Extand_Class");
-      const jsonSender = JSON.parse(senderUser);
-      onChangeInput(
-        jsonSender && jsonSender[0],
-        null,
-        props.xyPosition,
-        null,
-        props.setXyPosition,
-        props.data.Id,
-        isDefault
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [type]);
-  //function for show checked checkbox
-  const selectCheckbox = (ind) => {
-    const res = props.pos.options?.response;
-    const defaultCheck = props.pos.options?.defaultValue;
-    if (res && res?.length > 0) {
-      const isSelectIndex = res.indexOf(ind);
-      if (isSelectIndex > -1) {
-        return true;
-      } else {
-        return false;
-      }
-      // }
-    } else if (defaultCheck) {
-      const isSelectIndex = defaultCheck.indexOf(ind);
-      if (isSelectIndex > -1) {
-        return true;
-      } else {
-        return false;
-      }
-    } else {
-      return false;
-    }
-  };
-
-  const handleRadioCheck = (data) => {
-    const defaultData = props.pos.options?.defaultValue;
-    if (textValue === data) {
-      return true;
-    } else if (defaultData === data) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  //function for set checked and unchecked value of checkbox
-  const handleCheckboxValue = (isChecked, ind) => {
-    let updateSelectedCheckbox = [],
-      checkedList;
-    let isDefaultValue, isDefaultEmpty;
-    if (type === "checkbox") {
-      updateSelectedCheckbox = selectedCheckbox ? selectedCheckbox : [];
-
-      if (isChecked) {
-        updateSelectedCheckbox.push(ind);
-        setSelectedCheckbox(updateSelectedCheckbox);
-      } else {
-        checkedList = selectedCheckbox.filter((data) => data !== ind);
-        setSelectedCheckbox(checkedList);
-      }
-      if (props.isNeedSign) {
-        isDefaultValue = props.pos.options?.defaultValue;
-      }
-      if (isDefaultValue && isDefaultValue.length > 0) {
-        isDefaultEmpty = true;
-      }
-      onChangeInput(
-        checkedList ? checkedList : updateSelectedCheckbox,
-        props.pos.key,
-        props.xyPosition,
-        props.index,
-        props.setXyPosition,
-        props.data && props.data.Id,
-        false,
-        null,
-        isDefaultEmpty
-      );
-    }
-  };
-
-  //function to handle select radio widget and set value seletced by user
-  const handleCheckRadio = (isChecked, data) => {
-    let isDefaultValue,
-      isDefaultEmpty,
-      isRadio = true;
-    if (props.isNeedSign) {
-      isDefaultValue = props.pos.options?.defaultValue;
-    }
-    if (isDefaultValue) {
-      isDefaultEmpty = true;
-    }
-    if (isChecked) {
-      setTextValue(data);
-    } else {
-      setTextValue("");
-    }
-    onChangeInput(
-      data,
-      props.pos.key,
-      props.xyPosition,
-      props.index,
-      props.setXyPosition,
-      props.data && props.data.Id,
-      false,
-      null,
-      isDefaultEmpty,
-      isRadio
-    );
-  };
-  //function to set onchange date
-  const handleOnDateChange = (date) => {
-    props.setStartDate(date);
-  };
-  //handle height on enter press in text area
-  const handleEnterPress = (e) => {
-    const height = 18;
-    if (e.key === "Enter") {
-      //function to save height of text area
-      onChangeHeightOfTextArea(
-        height,
-        props.pos.type,
-        props.pos.key,
-        props.xyPosition,
-        props.index,
-        props.setXyPosition,
-        props.data && props.data?.Id
-      );
-    }
-  };
-  switch (type) {
-    case "signature":
-      return props.pos.SignUrl ? (
-        <img
-          alt="signature"
-          draggable="false"
-          src={props.pos.SignUrl}
-          className="w-full h-full select-none-cls "
-        />
-      ) : (
-        <div className={widgetCls}>
-          {props.pos.type && (
-            <div
-              style={{
-                fontSize: props.pos
-                  ? props.calculateFontsize(props.pos)
-                  : "11px"
-              }}
-              className="font-medium"
-            >
-              {props.isNeedSign
-                ? props.pos?.options?.hint || widgetTypeTranslation
-                : widgetTypeTranslation}
-            </div>
-          )}
-        </div>
-      );
-    case "stamp":
-      return props.pos.SignUrl ? (
-        <img
-          alt="stamp"
-          draggable="false"
-          src={props.pos.SignUrl}
-          className="w-full h-full select-none-cls"
-        />
-      ) : (
-        <div className={widgetCls}>
-          {props.pos.type && (
-            <div
-              style={{
-                fontSize: props.pos
-                  ? props.calculateFontsize(props.pos)
-                  : "11px"
-              }}
-              className="font-medium"
-            >
-              {props.isNeedSign
-                ? props.pos?.options?.hint || widgetTypeTranslation
-                : widgetTypeTranslation}
-            </div>
-          )}
-        </div>
-      );
-    case "checkbox":
-      return (
-        <div style={{ zIndex: props.isSignYourself && "99" }}>
-          {props.pos.options?.values?.map((data, ind) => {
-            return (
-              <div
-                key={ind}
-                className="select-none-cls flex items-center text-center gap-0.5"
-              >
-                <input
-                  id={`checkbox-${props.pos.key + ind}`}
-                  style={{ width: fontSize, height: fontSize }}
-                  className={`${
-                    ind === 0 ? "mt-0" : "mt-[5px]"
-                  } flex justify-center op-checkbox rounded-[1px] `}
-                  onBlur={handleInputBlur}
-                  disabled={
-                    props.isNeedSign &&
-                    (props.pos.options?.isReadOnly ||
-                      props.data?.signerObjId !== props.signerObjId)
-                  }
-                  type="checkbox"
-                  checked={selectCheckbox(ind)}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      if (!props.isPlaceholder) {
-                        const maxRequired =
-                          props.pos.options?.validation?.maxRequiredCount;
-                        const maxCountInt =
-                          maxRequired && parseInt(maxRequired);
-
-                        if (maxCountInt > 0) {
-                          if (
-                            selectedCheckbox &&
-                            selectedCheckbox?.length <= maxCountInt - 1
-                          ) {
-                            handleCheckboxValue(e.target.checked, ind);
-                          }
-                        } else {
-                          handleCheckboxValue(e.target.checked, ind);
-                        }
-                      }
-                    } else {
-                      handleCheckboxValue(e.target.checked, ind);
-                    }
-                  }}
-                />
-                {!props.pos.options?.isHideLabel && (
-                  <label
-                    htmlFor={`checkbox-${props.pos.key + ind}`}
-                    style={{ fontSize: fontSize, color: fontColor }}
-                    className="text-xs mb-0 text-center"
-                  >
-                    {data}
-                  </label>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      );
-    case textInputWidget:
-      return props.isSignYourself ||
-        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
-        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <textarea
-          ref={inputRef}
-          placeholder={validatePlaceholder || t("widgets-name.text")}
-          rows={1}
-          onKeyDown={handleEnterPress}
-          value={textValue}
-          onBlur={handleInputBlur}
-          onChange={(e) => {
-            setTextValue(e.target.value);
-            onChangeInput(
-              e.target.value,
-              props.pos.key,
-              props.xyPosition,
-              props.index,
-              props.setXyPosition,
-              props.data && props.data?.Id,
-              false
-            );
-          }}
-          className={`${
-            props.isNeedSign &&
-            (props.pos.options?.isReadOnly ||
-              props.data?.signerObjId !== props.signerObjId)
-              ? " bg-black/68 select-none "
-              : "" + textWidgetCls
-          }`}
-          style={{ fontSize: fontSize, color: fontColor }}
-          disabled={
-            props.isNeedSign &&
-            (props.pos.options?.isReadOnly ||
-              props.data?.signerObjId !== props.signerObjId)
-          }
-          cols="50"
-        />
-      ) : (
-        <div style={textWidgetStyle} className="select-none-cls">
-          <span>{textValue || widgetTypeTranslation}</span>
-        </div>
-      );
-    case "dropdown":
-      return props.data?.signerObjId === props.signerObjId ? (
-        <select
-          style={{ fontSize: fontSize, color: fontColor }}
-          className={`${
-            props.isNeedSign &&
-            (props.pos.options?.isReadOnly ||
-              props.data?.signerObjId !== props.signerObjId)
-              ? " disabled:bg-inherit select-none "
-              : "" + `${selectWidgetCls} text-[12px] bg-inherit`
-          }`}
-          id="myDropdown"
-          value={selectOption}
-          onChange={(e) => {
-            setSelectOption(e.target.value);
-            onChangeInput(
-              e.target.value,
-              props.pos.key,
-              props.xyPosition,
-              props.index,
-              props.setXyPosition,
-              props.data && props.data?.Id,
-              false
-            );
-          }}
-          disabled={
-            props.isNeedSign &&
-            (props.pos.options?.isReadOnly ||
-              props.data?.signerObjId !== props.signerObjId)
-          }
-        >
-          {/* Default/Title option */}
-          <option
-            style={{ fontSize: fontSize, color: fontColor }}
-            value=""
-            disabled
-            hidden
-          >
-            {props?.pos?.options?.name}
-          </option>
-
-          {props.pos?.options?.values?.map((data, ind) => {
-            return (
-              <option
-                style={{ fontSize: fontSize, color: fontColor }}
-                key={ind}
-                value={data}
-              >
-                {data}
-              </option>
-            );
-          })}
-        </select>
-      ) : (
-        <div
-          style={textWidgetStyle}
-          className="select-none-cls flex justify-between items-center"
-        >
-          {props.pos?.options?.name
-            ? props.pos.options.name
-            : widgetTypeTranslation}
-          <i className="fa-light fa-circle-chevron-down mr-1 "></i>
-        </div>
-      );
-    case "initials":
-      return props.pos.SignUrl ? (
-        <img
-          alt="initials"
-          draggable="false"
-          src={props.pos.SignUrl}
-          className="w-full h-full select-none-cls"
-        />
-      ) : (
-        <div className={widgetCls}>
-          {props.pos.type && (
-            <div
-              style={{
-                fontSize: props.pos
-                  ? props.calculateFontsize(props.pos)
-                  : "11px"
-              }}
-              className="font-medium text-center"
-            >
-              {props.isNeedSign
-                ? props.pos?.options?.hint || widgetTypeTranslation
-                : widgetTypeTranslation}
-            </div>
-          )}
-        </div>
-      );
-    case "name":
-      return props.isSignYourself ||
-        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
-        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <textarea
-          ref={inputRef}
-          placeholder={hint || widgetTypeTranslation}
-          rows={1}
-          onKeyDown={handleEnterPress}
-          value={textValue}
-          onChange={(e) => {
-            const isDefault = false;
-            handleTextValid(e);
-            onChangeInput(
-              e.target.value,
-              props.pos.key,
-              props.xyPosition,
-              props.index,
-              props.setXyPosition,
-              props.data && props.data?.Id,
-              isDefault
-            );
-          }}
-          className={textWidgetCls}
-          style={{ fontSize: fontSize, color: fontColor }}
-          cols="50"
-        />
-      ) : (
-        <div className="flex h-full select-none-cls" style={textWidgetStyle}>
-          <span>{widgetTypeTranslation}</span>
-        </div>
-      );
-    case "company":
-      return props.isSignYourself ||
-        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
-        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <textarea
-          ref={inputRef}
-          placeholder={hint || widgetTypeTranslation}
-          rows={1}
-          onKeyDown={handleEnterPress}
-          value={textValue}
-          onChange={(e) => {
-            handleTextValid(e);
-            onChangeInput(
-              e.target.value,
-              props.pos.key,
-              props.xyPosition,
-              props.index,
-              props.setXyPosition,
-              props.data && props.data?.Id,
-              false
-            );
-          }}
-          className={textWidgetCls}
-          style={{ fontSize: fontSize, color: fontColor }}
-          cols="50"
-        />
-      ) : (
-        <div style={textWidgetStyle} className="select-none-cls">
-          <span>{widgetTypeTranslation}</span>
-        </div>
-      );
-    case "job title":
-      return props.isSignYourself ||
-        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
-        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <textarea
-          ref={inputRef}
-          placeholder={hint || widgetTypeTranslation}
-          rows={1}
-          onKeyDown={handleEnterPress}
-          value={textValue}
-          onChange={(e) => {
-            handleTextValid(e);
-            onChangeInput(
-              e.target.value,
-              props.pos.key,
-              props.xyPosition,
-              props.index,
-              props.setXyPosition,
-              props.data && props.data?.Id,
-              false
-            );
-          }}
-          className={textWidgetCls}
-          style={{ fontSize: fontSize, color: fontColor }}
-          cols="50"
-        />
-      ) : (
-        <div style={textWidgetStyle} className="select-none-cls">
-          <span>{widgetTypeTranslation}</span>
-        </div>
-      );
-    case "date":
-      return props.isSignYourself ||
-        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
-        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <DatePicker
-          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>
-          )}
-          disabled={
-            props.isPlaceholder ||
-            (props.isNeedSign && props.data?.signerObjId !== props.signerObjId)
-          }
-          onBlur={handleInputBlur}
-          closeOnScroll={true}
-          className={`${selectWidgetCls} outline-[#007bff]`}
-          selected={props?.startDate}
-          onChange={(date) => handleOnDateChange(date)}
-          popperPlacement="top-end"
-          customInput={<ExampleCustomInput />}
-          dateFormat={
-            props.selectDate
-              ? props.selectDate?.format
-              : props.pos?.options?.validation?.format
-                ? props.pos?.options?.validation?.format
-                : "MM/dd/yyyy"
-          }
-        />
-      ) : (
-        <div
-          style={textWidgetStyle}
-          className="select-none-cls overflow-hidden"
-        >
-          <span>
-            {props.selectDate
-              ? props.selectDate?.format
-              : props.pos?.options?.validation?.format
-                ? props.pos?.options?.validation?.format
-                : "MM/dd/yyyy"}
-          </span>
-        </div>
-      );
-    case "image":
-      return props.pos.SignUrl ? (
-        <img
-          alt="image"
-          draggable="false"
-          src={props.pos.SignUrl}
-          className="w-full h-full select-none-cls"
-        />
-      ) : (
-        <div className={widgetCls}>
-          {props.pos.type && (
-            <div
-              style={{
-                fontSize: props.pos
-                  ? props.calculateFontsize(props.pos)
-                  : "11px"
-              }}
-              className="font-medium text-center"
-            >
-              {props.isNeedSign
-                ? props.pos?.options?.hint || widgetTypeTranslation
-                : widgetTypeTranslation}
-            </div>
-          )}
-        </div>
-      );
-    case "email":
-      return props.isSignYourself ||
-        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
-        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <textarea
-          ref={inputRef}
-          placeholder={hint || widgetTypeTranslation}
-          rows={1}
-          onKeyDown={(e) => {
-            // Prevent new line on Enter key press
-            if (e.key === "Enter") {
-              e.preventDefault();
-            }
-          }}
-          value={textValue}
-          onBlur={handleInputBlur}
-          onChange={(e) => {
-            handleTextValid(e);
-            onChangeInput(
-              e.target.value,
-              props.pos.key,
-              props.xyPosition,
-              props.index,
-              props.setXyPosition,
-              props.data && props.data?.Id,
-              false
-            );
-          }}
-          className={textWidgetCls}
-          style={{
-            fontSize: fontSize,
-            color: fontColor,
-            fontFamily: "Arial, sans-serif"
-          }}
-          cols="1"
-        />
-      ) : (
-        <div style={textWidgetStyle} className="select-none-cls">
-          <span>{widgetTypeTranslation}</span>
-        </div>
-      );
-    case radioButtonWidget:
-      return (
-        <div>
-          {props.pos.options?.values.map((data, ind) => {
-            return (
-              <div
-                key={ind}
-                className="select-none-cls flex items-center text-center gap-0.5"
-              >
-                <input
-                  id={`radio-${props.pos.key + ind}`}
-                  style={{
-                    width: fontSize,
-                    height: fontSize,
-                    marginTop: ind > 0 ? "10px" : "0px"
-                  }}
-                  className={`flex justify-center op-radio`}
-                  type="radio"
-                  disabled={
-                    props.isNeedSign &&
-                    (props.pos.options?.isReadOnly ||
-                      props.data?.signerObjId !== props.signerObjId)
-                  }
-                  checked={handleRadioCheck(data)}
-                  onChange={(e) => {
-                    if (!props.isPlaceholder) {
-                      handleCheckRadio(e.target.checked, data);
-                    }
-                  }}
-                />
-                {!props.pos.options?.isHideLabel && (
-                  <label
-                    htmlFor={`radio-${props.pos.key + ind}`}
-                    style={{ fontSize: fontSize, color: fontColor }}
-                    className="text-xs mb-0"
-                  >
-                    {data}
-                  </label>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      );
-    case textWidget:
-      return (
-        <textarea
-          placeholder={t("widgets-name.text")}
-          rows={1}
-          onKeyDown={handleEnterPress}
-          value={textValue}
-          onBlur={handleInputBlur}
-          onChange={(e) => {
-            setTextValue(e.target.value);
-            onChangeInput(
-              e.target.value,
-              props.pos.key,
-              props.xyPosition,
-              props.index,
-              props.setXyPosition,
-              props.data && props.data?.Id,
-              false
-            );
-          }}
-          className={textWidgetCls}
-          style={{
-            fontFamily: "Arial, sans-serif",
-            fontSize: fontSize,
-            color: fontColor
-          }}
-          cols="50"
-        />
-      );
-    default:
-      return props.pos.SignUrl ? (
-        <div className="pointer-events-none">
-          <img
-            alt="image"
-            draggable="false"
-            src={props.pos.SignUrl}
-            className="w-full h-full "
-          />
-        </div>
-      ) : (
-        <div className={widgetCls}>
-          {props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
-          {props.pos.type && (
-            <div
-              style={{
-                fontSize: props.pos
-                  ? props.calculateFontsize(props.pos)
-                  : "11px"
-              }}
-              className="font-medium"
-            >
-              {props.isNeedSign
-                ? props.pos?.options?.hint || widgetTypeTranslation
-                : widgetTypeTranslation}
-            </div>
-          )}
-        </div>
-      );
-  }
-}
-
-export default PlaceholderType;
@@ -0,0 +1,526 @@
+import React, { useEffect, useState, forwardRef, useRef } from "react";
+import {
+  getMonth,
+  getYear,
+  radioButtonWidget,
+  textInputWidget,
+  cellsWidget,
+  textWidget,
+  months,
+  years,
+  selectCheckbox,
+  checkRegularExpress
+} from "../../constant/Utils";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import "../../styles/signature.css";
+import { useTranslation } from "react-i18next";
+import CellsWidget from "./CellsWidget";
+const textWidgetCls =
+  "w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center whitespace-pre-wrap";
+const selectWidgetCls =
+  "w-full h-full absolute left-0 top-0 border-[1px] border-[#007bff] rounded-[2px] focus:outline-none text-base-content";
+const widgetCls =
+  "select-none-cls overflow-hidden w-full h-full text-black flex flex-col justify-center items-center";
+function PlaceholderType(props) {
+  const { t } = useTranslation();
+  const type = props?.pos?.type;
+  const iswidgetEnable =
+    props.isSignYourself ||
+    ((props.isSelfSign || props.isNeedSign) &&
+      props.data?.signerObjId === props.signerObjId);
+  const isReadOnly =
+    props.pos.options?.isReadOnly ||
+    props.data?.signerObjId !== props.signerObjId;
+  // prefer the latest response value over any default value
+  const widgetData =
+    props.pos?.options?.response ?? props.pos?.options?.defaultValue ?? "";
+  const widgetTypeTranslation = t(`widgets-name.${props?.pos?.type}`);
+  const inputRef = useRef(null);
+  const [widgetValue, setwidgetValue] = useState();
+  const [selectedCheckbox, setSelectedCheckbox] = useState([]);
+  const [hint, setHint] = useState("");
+  const fontSize = props.calculateFont(props.pos.options?.fontSize);
+  const fontColor = props.pos.options?.fontColor || "black";
+  const textWidgetStyle = {
+    fontSize: fontSize,
+    color: fontColor,
+    fontFamily: "Arial, sans-serif",
+    overflow: "hidden",
+    textAlign: "start",
+    width: "100%",
+    display: "flex",
+    height: "100%"
+  };
+
+  useEffect(() => {
+    if (type !== "date") {
+      if (type && type === "checkbox") {
+        setSelectedCheckbox(
+          props?.pos?.options?.response ||
+            props?.pos?.options?.defaultValue ||
+            []
+        );
+      } else {
+        // keep displayed value in sync with the stored response
+        setwidgetValue(widgetData);
+      }
+      if (props.pos?.options?.hint) {
+        setHint(props.pos?.options.hint);
+      } else if (props.pos?.options?.validation?.type) {
+        checkRegularExpress(props.pos?.options?.validation?.type, setHint);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.pos]);
+  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
+    <div
+      style={{
+        fontSize: fontSize,
+        color: fontColor,
+        fontFamily: "Arial, sans-serif"
+      }}
+      className={`${isReadOnly ? `select-none` : ``} ${selectWidgetCls} overflow-hidden`}
+      disabled={isReadOnly}
+      onClick={onClick}
+      ref={ref}
+    >
+      {value}
+      <i className="fa-light fa-calendar ml-[5px]"></i>
+    </div>
+  ));
+  ExampleCustomInput.displayName = "ExampleCustomInput";
+
+  const handleRadioCheck = (data) => {
+    const defaultData = props.pos.options?.defaultValue;
+    if (widgetValue === data) {
+      return true;
+    } else if (defaultData === data) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  switch (type) {
+    case "signature":
+      return props.pos.SignUrl ? (
+        <img
+          alt="signature"
+          draggable="false"
+          src={props.pos.SignUrl}
+          className="w-full h-full select-none-cls "
+        />
+      ) : (
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium"
+            >
+              {hint || widgetTypeTranslation}
+            </div>
+          )}
+        </div>
+      );
+    case "stamp":
+      return props.pos.SignUrl ? (
+        <img
+          alt="stamp"
+          draggable="false"
+          src={props.pos.SignUrl}
+          className="w-full h-full select-none-cls"
+        />
+      ) : (
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium"
+            >
+              {hint || widgetTypeTranslation}
+            </div>
+          )}
+        </div>
+      );
+    case "checkbox":
+      const checkBoxLayout = props.pos.options?.layout || "vertical";
+      const isMultipleCheckbox =
+        props.pos.options?.values?.length > 0 ? true : false;
+      const checkBoxWrapperClass = `flex items-start ${
+        checkBoxLayout === "horizontal"
+          ? `flex-row flex-wrap ${isMultipleCheckbox ? "gap-x-2" : ""}`
+          : `flex-col ${isMultipleCheckbox ? "gap-y-[5px]" : ""}`
+      }`; // Using gap-y-1 for consistency, adjust if needed
+
+      return (
+        <div
+          className={checkBoxWrapperClass}
+          style={{ zIndex: props.isSignYourself && "99" }}
+        >
+          {props.pos.options?.values?.map((data, ind) => (
+            <div key={ind} className="select-none-cls pointer-events-none">
+              <label
+                htmlFor={`checkbox-${props.pos.key + ind}`}
+                style={{ fontSize: fontSize, color: fontColor }}
+                className={`mb-0 flex items-center gap-1`}
+              >
+                <input
+                  id={`checkbox-${props.pos.key + ind}`}
+                  style={{ width: fontSize, height: fontSize }}
+                  className="op-checkbox rounded-[1px]"
+                  disabled={props.isNeedSign && isReadOnly}
+                  type="checkbox"
+                  readOnly
+                  checked={!!selectCheckbox(ind, selectedCheckbox)}
+                />
+                {!props.pos.options?.isHideLabel && (
+                  <span className="leading-none">{data}</span>
+                )}
+              </label>
+            </div>
+          ))}
+        </div>
+      );
+    case textInputWidget:
+      return props.isSignYourself || iswidgetEnable ? (
+        <textarea
+          ref={inputRef}
+          placeholder={hint || t("widgets-name.text")}
+          rows={1}
+          value={widgetValue}
+          className={`${textWidgetCls} ${isReadOnly ? "select-none" : ""}`}
+          style={{
+            fontSize: fontSize,
+            color: fontColor,
+            background: isReadOnly ? props.data?.blockColor : "white",
+            pointerEvents: "none"
+          }}
+          readOnly
+          disabled={props.isNeedSign && isReadOnly}
+          cols="50"
+        />
+      ) : (
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{hint || widgetTypeTranslation}</span>
+        </div>
+      );
+    case cellsWidget: {
+      const count = props.pos.options?.cellCount || 5;
+      const cells = (widgetValue || "").split("");
+      const height = "100%";
+      const handleCellResize = (newCount) => {
+        if (props.setCellCount) props.setCellCount(props.pos.key, newCount);
+      };
+      return (
+        <CellsWidget
+          count={count}
+          height={height}
+          value={cells.join("")}
+          editable={props.isPlaceholder}
+          resizable={props.isPlaceholder}
+          onCellCountChange={handleCellResize}
+        />
+      );
+    }
+    case "dropdown":
+      return (
+        <div
+          style={textWidgetStyle}
+          className="select-none-cls flex justify-between items-center"
+        >
+          {widgetData || t("choose-one")}
+          <i className="fa-light fa-circle-chevron-down mr-1 "></i>
+        </div>
+      );
+    case "initials":
+      return props.pos.SignUrl ? (
+        <img
+          alt="initials"
+          draggable="false"
+          src={props.pos.SignUrl}
+          className="w-full h-full select-none-cls"
+        />
+      ) : (
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium text-center"
+            >
+              {hint || widgetTypeTranslation}
+            </div>
+          )}
+        </div>
+      );
+    case "name":
+      return iswidgetEnable ? (
+        <textarea
+          readOnly
+          ref={inputRef}
+          placeholder={hint || widgetTypeTranslation}
+          rows={1}
+          value={widgetValue}
+          className={`${textWidgetCls} ${isReadOnly ? "select-none" : ""}`}
+          style={{
+            fontSize: fontSize,
+            color: fontColor,
+            background: isReadOnly ? props.data?.blockColor : "white",
+            pointerEvents: "none"
+          }}
+          cols="50"
+          disabled={props.isNeedSign && isReadOnly}
+        />
+      ) : (
+        <div className="flex h-full select-none-cls" style={textWidgetStyle}>
+          <span> {props.pos?.options?.hint || widgetTypeTranslation}</span>
+        </div>
+      );
+    case "company":
+      return iswidgetEnable ? (
+        <textarea
+          readOnly
+          ref={inputRef}
+          placeholder={hint || widgetTypeTranslation}
+          rows={1}
+          value={widgetValue}
+          className={`${textWidgetCls} ${isReadOnly ? "select-none" : ""}`}
+          style={{
+            fontSize: fontSize,
+            color: fontColor,
+            background: isReadOnly ? props.data?.blockColor : "white",
+            pointerEvents: "none"
+          }}
+          cols="50"
+          disabled={props.isNeedSign && isReadOnly}
+        />
+      ) : (
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{hint || widgetTypeTranslation}</span>
+        </div>
+      );
+    case "job title":
+      return iswidgetEnable ? (
+        <textarea
+          readOnly
+          ref={inputRef}
+          placeholder={hint || widgetTypeTranslation}
+          rows={1}
+          value={widgetValue}
+          className={`${textWidgetCls} ${isReadOnly ? "select-none" : ""}`}
+          style={{
+            fontSize: fontSize,
+            color: fontColor,
+            background: isReadOnly ? props.data?.blockColor : "white",
+            pointerEvents: "none"
+          }}
+          cols="50"
+          disabled={props.isNeedSign && isReadOnly}
+        />
+      ) : (
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{hint || widgetTypeTranslation}</span>
+        </div>
+      );
+    case "date":
+      return iswidgetEnable ? (
+        <DatePicker
+          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>
+          )}
+          disabled={true}
+          closeOnScroll={true}
+          className={`${selectWidgetCls} outline-[#007bff]`}
+          selected={props?.startDate}
+          popperPlacement="top-end"
+          customInput={<ExampleCustomInput />}
+          dateFormat={
+            props.selectDate
+              ? props.selectDate?.format
+              : props.pos?.options?.validation?.format
+                ? props.pos?.options?.validation?.format
+                : "MM/dd/yyyy"
+          }
+        />
+      ) : (
+        <div
+          style={textWidgetStyle}
+          className="select-none-cls overflow-hidden"
+        >
+          <span>
+            {props.selectDate
+              ? props.selectDate?.format
+              : props.pos?.options?.validation?.format
+                ? props.pos?.options?.validation?.format
+                : "MM/dd/yyyy"}
+          </span>
+        </div>
+      );
+    case "image":
+      return props.pos.SignUrl ? (
+        <img
+          alt="image"
+          draggable="false"
+          src={props.pos.SignUrl}
+          className="w-full h-full select-none-cls"
+        />
+      ) : (
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium text-center"
+            >
+              {hint || widgetTypeTranslation}
+            </div>
+          )}
+        </div>
+      );
+    case "email":
+      return iswidgetEnable ? (
+        <textarea
+          readOnly
+          ref={inputRef}
+          placeholder={hint || widgetTypeTranslation}
+          rows={1}
+          value={widgetValue}
+          className={`${textWidgetCls} ${isReadOnly ? "select-none" : ""}`}
+          style={{
+            fontSize: fontSize,
+            color: fontColor,
+            background: isReadOnly ? props.data?.blockColor : "white",
+            pointerEvents: "none"
+          }}
+          cols="1"
+          disabled={props.isNeedSign && isReadOnly}
+        />
+      ) : (
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{hint || widgetTypeTranslation}</span>
+        </div>
+      );
+    case radioButtonWidget:
+      const radioLayout = props.pos.options?.layout || "vertical";
+      const isOnlyOneBtn = props.pos.options?.values?.length > 0 ? true : false;
+      const radioWrapperClass = `flex items-start ${
+        radioLayout === "horizontal"
+          ? `flex-row flex-wrap ${isOnlyOneBtn ? "gap-x-2" : ""}`
+          : `flex-col ${isOnlyOneBtn ? "gap-y-[5px]" : ""}`
+      }`; // Using gap-y-1 for consistency, adjust if needed
+      return (
+        <div className={radioWrapperClass}>
+          {props.pos.options?.values.map((data, ind) => (
+            <div key={ind} className="select-none-cls pointer-events-none">
+              <label
+                htmlFor={`radio-${props.pos.key + ind}`}
+                style={{ fontSize: fontSize, color: fontColor }}
+                className="text-xs mb-0 flex items-center gap-1"
+              >
+                <input
+                  readOnly
+                  id={`radio-${props.pos.key + ind}`}
+                  style={{ width: fontSize, height: fontSize, lineHeight: 2 }}
+                  className={`op-radio rounded-full border-black appearance-none bg-white inline-block align-middle relative ${
+                    handleRadioCheck(data) ? "checked-radio" : ""
+                  }`}
+                  type="radio"
+                  disabled={props.isNeedSign && isReadOnly}
+                  checked={handleRadioCheck(data)}
+                />
+                {!props.pos.options?.isHideLabel && (
+                  <span className="leading-none">{data}</span>
+                )}
+              </label>
+            </div>
+          ))}
+        </div>
+      );
+    case textWidget:
+      return (
+        <textarea
+          readOnly
+          placeholder={t("widgets-name.text")}
+          rows={1}
+          value={widgetValue}
+          className={textWidgetCls}
+          style={{
+            fontFamily: "Arial, sans-serif",
+            fontSize: fontSize,
+            color: fontColor,
+            background: "white"
+          }}
+          cols="50"
+        />
+      );
+    default:
+      return props.pos.SignUrl ? (
+        <div className="pointer-events-none">
+          <img
+            alt="image"
+            draggable="false"
+            src={props.pos.SignUrl}
+            className="w-full h-full "
+          />
+        </div>
+      ) : (
+        <div className={widgetCls}>
+          {props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium"
+            >
+              {hint || widgetTypeTranslation}
+            </div>
+          )}
+        </div>
+      );
+  }
+}
+
+export default PlaceholderType;
@@ -1,635 +0,0 @@
-import React, { useState } from "react";
-import RSC from "react-scrollbars-custom";
-import { Document, Page } from "react-pdf";
-import {
-  defaultWidthHeight,
-  getContainerScale,
-  handleImageResize,
-  handleSignYourselfImageResize,
-  isMobile
-} from "../../constant/Utils";
-import Placeholder from "./Placeholder";
-import Alert from "../../primitives/Alert";
-import { useTranslation } from "react-i18next";
-
-function RenderPdf(props) {
-  const { t } = useTranslation();
-  const [scaledHeight, setScaledHeight] = useState();
-  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
-  const isGuestSigner = localStorage.getItem("isGuestSigner");
-
-  // handle signature block width and height according to screen
-  const posWidth = (pos, signYourself) => {
-    const containerScale = getContainerScale(
-      props.pdfOriginalWH,
-      props.pageNumber,
-      props.containerWH
-    );
-    const defaultWidth = defaultWidthHeight(pos.type).width;
-    const posWidth = pos.Width ? pos.Width : defaultWidth;
-    if (signYourself) {
-      return posWidth * props.scale * containerScale;
-    } else {
-      if (pos.isMobile && pos.scale) {
-        if (pos.IsResize) {
-          if (props.scale > 1) {
-            return posWidth * pos.scale * containerScale * props.scale;
-          } else {
-            return posWidth * containerScale;
-          }
-        } else {
-          if (props.scale > 1) {
-            return posWidth * pos.scale * containerScale * props.scale;
-          } else {
-            return posWidth * pos.scale * containerScale;
-          }
-        }
-      } else {
-        return posWidth * props.scale * containerScale;
-      }
-    }
-  };
-  const posHeight = (pos, signYourself) => {
-    const containerScale = getContainerScale(
-      props.pdfOriginalWH,
-      props.pageNumber,
-      props.containerWH
-    );
-    const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
-    if (signYourself) {
-      return posHeight * props.scale * containerScale;
-    } else {
-      if (pos.isMobile && pos.scale) {
-        if (pos.IsResize) {
-          if (props.scale > 1) {
-            return posHeight * pos.scale * containerScale * props.scale;
-          } else {
-            return posHeight * containerScale;
-          }
-        } else {
-          if (props.scale > 1) {
-            return posHeight * pos.scale * containerScale * props.scale;
-          } else {
-            return posHeight * pos.scale * containerScale;
-          }
-        }
-      } else {
-        return posHeight * props.scale * containerScale;
-      }
-    }
-  };
-
-  //function for render placeholder block over pdf document
-  const checkSignedSigners = (data) => {
-    let checkSign = [];
-    //condition to handle quick send flow and using normal request sign flow
-    checkSign = props.signedSigners
-      ? props.signedSigners?.filter(
-          (sign) =>
-            sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
-        )
-      : [];
-    return (
-      checkSign.length === 0 &&
-      data?.placeHolder?.map((placeData, key) => {
-        return (
-          <React.Fragment key={key}>
-            {placeData.pageNumber === props.pageNumber &&
-              placeData.pos.map((pos) => {
-                return (
-                  pos && (
-                    <React.Fragment key={pos.key}>
-                      <Placeholder
-                        pos={pos}
-                        setSignKey={props.setSignKey}
-                        setIsSignPad={props.setIsSignPad}
-                        setIsStamp={props.setIsStamp}
-                        handleSignYourselfImageResize={handleImageResize}
-                        index={props.pageNumber}
-                        xyPosition={props.signerPos}
-                        setXyPosition={props.setSignerPos}
-                        data={data}
-                        setIsResize={props.setIsResize}
-                        isShowBorder={props.isSelfSign}
-                        isAlllowModify={props.isAlllowModify}
-                        signerObjId={props.signerObjectId}
-                        isShowDropdown={true}
-                        isNeedSign={props.pdfRequest}
-                        isSelfSign={true}
-                        isSignYourself={false}
-                        posWidth={posWidth}
-                        posHeight={posHeight}
-                        isDragging={props.isDragging}
-                        pdfDetails={props.pdfDetails}
-                        setIsInitial={props.setIsInitial}
-                        setValidateAlert={props.setValidateAlert}
-                        unSignedWidgetId={props.unSignedWidgetId}
-                        setSelectWidgetId={props.setSelectWidgetId}
-                        selectWidgetId={props.selectWidgetId}
-                        setCurrWidgetsDetails={props.setCurrWidgetsDetails}
-                        uniqueId={props.uniqueId}
-                        scale={props.scale}
-                        containerWH={props.containerWH}
-                        pdfOriginalWH={props.pdfOriginalWH}
-                        pageNumber={props.pageNumber}
-                        ispublicTemplate={props.ispublicTemplate}
-                        handleUserDetails={props.handleUserDetails}
-                        isResize={props.isResize}
-                        setIsAgreeTour={props.setIsAgreeTour}
-                        isAgree={props.isAgree}
-                        handleTabDrag={props.handleTabDrag}
-                        handleStop={props.handleStop}
-                        setWidgetType={props.setWidgetType}
-                        setUniqueId={props.setUniqueId}
-                        setIsSelectId={props.setIsSelectId}
-                        handleDeleteSign={props.handleDeleteSign}
-                        setIsPageCopy={props.setIsPageCopy}
-                        handleTextSettingModal={props.handleTextSettingModal}
-                        setIsCheckbox={props.setIsCheckbox}
-                        isFreeResize={false}
-                        isOpenSignPad={true}
-                        assignedWidgetId={props.assignedWidgetId}
-                        isApplyAll={true}
-                        setFontSize={props.setFontSize}
-                        fontSize={props.fontSize}
-                        fontColor={props.fontColor}
-                        setFontColor={props.setFontColor}
-                        setRequestSignTour={props.setRequestSignTour}
-                        calculateFontsize={calculateFontsize}
-                      />
-                    </React.Fragment>
-                  )
-                );
-              })}
-          </React.Fragment>
-        );
-      })
-    );
-  };
-
-  const calculateFontsize = (pos) => {
-    const width = posWidth(pos);
-    const height = posHeight(pos);
-
-    if (height === width || height < width) {
-      return `${height / 5}px`;
-    } else if (width < height) {
-      return `${width / 10}px`;
-    }
-  };
-  const pdfDataBase64 = `data:application/pdf;base64,${props.pdfBase64Url}`;
-  //calculate render height of pdf in mobile view
-  const handlePageLoadSuccess = (page) => {
-    const containerWidth = props.divRef.current.offsetWidth; // Get container width
-    const viewport = page.getViewport({ scale: 1 });
-    const scale = containerWidth / viewport.width; // Scale to fit container width
-    const scaleHeight = viewport.height * scale;
-    setScaledHeight(scaleHeight);
-  };
-  return (
-    <>
-      {props.successEmail && (
-        <Alert type={"success"}>{t("success-email-alert")}</Alert>
-      )}
-      {isMobile ? (
-        <RSC
-          style={{
-            position: "relative",
-            boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-            //49 is height of header
-            height: isGuestSigner ? window.innerHeight - 49 : scaledHeight,
-            zIndex: 0
-          }}
-          noScrollY={props.scale === 1 ? true : false}
-          noScrollX={props.scale === 1 ? true : false}
-        >
-          <div
-            data-tut="reactourForth"
-            className={`${
-              isGuestSigner ? "30px" : ""
-            } border-[0.1px] border-[#ebe8e8] overflow-x-auto`}
-            style={{
-              width:
-                props.containerWH?.width &&
-                props.containerWH?.width * props.scale
-            }}
-            ref={props.drop}
-            id="container"
-          >
-            {props.containerWH?.width &&
-              props.pdfOriginalWH.length > 0 &&
-              (props.pdfRequest || props.isSelfSign
-                ? props.signerPos?.map((data, key) => {
-                    return (
-                      <React.Fragment key={key}>
-                        {checkSignedSigners(data)}
-                      </React.Fragment>
-                    );
-                  })
-                : props.placeholder // placeholder mobile
-                  ? props.signerPos?.map((data, ind) => {
-                      return (
-                        <React.Fragment key={ind}>
-                          {data?.placeHolder &&
-                            data?.placeHolder.map((placeData, index) => {
-                              return (
-                                <React.Fragment key={index}>
-                                  {placeData.pageNumber === props.pageNumber &&
-                                    placeData.pos.map((pos) => {
-                                      return (
-                                        <React.Fragment key={pos.key}>
-                                          <Placeholder
-                                            pos={pos}
-                                            setIsPageCopy={props.setIsPageCopy}
-                                            setSignKey={props.setSignKey}
-                                            handleDeleteSign={
-                                              props.handleDeleteSign
-                                            }
-                                            setIsStamp={props.setIsStamp}
-                                            handleTabDrag={props.handleTabDrag}
-                                            handleStop={props.handleStop}
-                                            handleSignYourselfImageResize={
-                                              handleImageResize
-                                            }
-                                            index={props.pageNumber}
-                                            xyPosition={props.signerPos}
-                                            setXyPosition={props.setSignerPos}
-                                            data={data}
-                                            setIsResize={props.setIsResize}
-                                            setShowDropdown={
-                                              props.setShowDropdown
-                                            }
-                                            isShowBorder={true}
-                                            isPlaceholder={true}
-                                            setUniqueId={props.setUniqueId}
-                                            handleLinkUser={
-                                              props.handleLinkUser
-                                            }
-                                            isSignYourself={false}
-                                            posWidth={posWidth}
-                                            posHeight={posHeight}
-                                            isDragging={props.isDragging}
-                                            setIsValidate={props.setIsValidate}
-                                            setWidgetType={props.setWidgetType}
-                                            setIsRadio={props.setIsRadio}
-                                            setIsCheckbox={props.setIsCheckbox}
-                                            setCurrWidgetsDetails={
-                                              props.setCurrWidgetsDetails
-                                            }
-                                            setSelectWidgetId={
-                                              props.setSelectWidgetId
-                                            }
-                                            selectWidgetId={
-                                              props.selectWidgetId
-                                            }
-                                            handleNameModal={
-                                              props.handleNameModal
-                                            }
-                                            setTempSignerId={
-                                              props.setTempSignerId
-                                            }
-                                            uniqueId={props.uniqueId}
-                                            handleTextSettingModal={
-                                              props.handleTextSettingModal
-                                            }
-                                            scale={props.scale}
-                                            containerWH={props.containerWH}
-                                            pdfOriginalWH={props.pdfOriginalWH}
-                                            pageNumber={props.pageNumber}
-                                            setIsSelectId={props.setIsSelectId}
-                                            fontSize={props.fontSize}
-                                            setFontSize={props.setFontSize}
-                                            fontColor={props.fontColor}
-                                            setFontColor={props.setFontColor}
-                                            isResize={props.isResize}
-                                            unSignedWidgetId={
-                                              props.unSignedWidgetId
-                                            }
-                                            isFreeResize={true}
-                                            calculateFontsize={
-                                              calculateFontsize
-                                            }
-                                          />
-                                        </React.Fragment>
-                                      );
-                                    })}
-                                </React.Fragment>
-                              );
-                            })}
-                        </React.Fragment>
-                      );
-                    })
-                  : !props.pdfDetails?.[0]?.IsCompleted &&
-                    props.xyPosition?.map((data, ind) => {
-                      return (
-                        <React.Fragment key={ind}>
-                          {data.pageNumber === props.pageNumber &&
-                            data.pos.map((pos, id) => {
-                              return (
-                                pos && (
-                                  <Placeholder
-                                    key={id}
-                                    pos={pos}
-                                    setIsPageCopy={props.setIsPageCopy}
-                                    setSignKey={props.setSignKey}
-                                    handleDeleteSign={props.handleDeleteSign}
-                                    setIsStamp={props.setIsStamp}
-                                    handleTabDrag={props.handleTabDrag}
-                                    handleStop={props.handleStop}
-                                    handleSignYourselfImageResize={
-                                      handleSignYourselfImageResize
-                                    }
-                                    index={props.index}
-                                    xyPosition={props.xyPosition}
-                                    setXyPosition={props.setXyPosition}
-                                    containerWH={props.containerWH}
-                                    setIsSignPad={props.setIsSignPad}
-                                    isShowBorder={true}
-                                    isSignYourself={true}
-                                    posWidth={posWidth}
-                                    posHeight={posHeight}
-                                    pdfDetails={props.pdfDetails[0]}
-                                    isDragging={props.isDragging}
-                                    setIsInitial={props.setIsInitial}
-                                    setWidgetType={props.setWidgetType}
-                                    setSelectWidgetId={props.setSelectWidgetId}
-                                    selectWidgetId={props.selectWidgetId}
-                                    setIsCheckbox={props.setIsCheckbox}
-                                    setValidateAlert={props.setValidateAlert}
-                                    setCurrWidgetsDetails={
-                                      props.setCurrWidgetsDetails
-                                    }
-                                    handleTextSettingModal={
-                                      props.handleTextSettingModal
-                                    }
-                                    scale={props.scale}
-                                    pdfOriginalWH={props.pdfOriginalWH}
-                                    pageNumber={props.pageNumber}
-                                    fontSize={props.fontSize}
-                                    setFontSize={props.setFontSize}
-                                    fontColor={props.fontColor}
-                                    setFontColor={props.setFontColor}
-                                    isResize={props.isResize}
-                                    setIsResize={props.setIsResize}
-                                    isFreeResize={false}
-                                    isOpenSignPad={true}
-                                    calculateFontsize={calculateFontsize}
-                                  />
-                                )
-                              );
-                            })}
-                        </React.Fragment>
-                      );
-                    }))}
-            {/* Mobile */}
-            <Document
-              error={<p className="mx-2">{t("failed-to-load-refresh-page")}</p>}
-              onLoadError={() => props.setPdfLoad(false)}
-              loading={t("loading-doc")}
-              onLoadSuccess={props.pageDetails}
-              onClick={() =>
-                props.setSelectWidgetId && props.setSelectWidgetId("")
-              }
-              file={pdfDataBase64}
-            >
-              <Page
-                onLoadSuccess={handlePageLoadSuccess}
-                scale={props.scale || 1}
-                key={props.index}
-                pageNumber={props.pageNumber}
-                width={props.containerWH.width}
-                renderAnnotationLayer={false}
-                renderTextLayer={false}
-                onGetAnnotationsError={(error) => {
-                  console.log("annotation error", error);
-                }}
-                className="select-none touch-callout-none"
-              />
-            </Document>
-          </div>
-        </RSC>
-      ) : (
-        <RSC
-          style={{
-            position: "relative",
-            boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-            height: window.innerHeight + "px",
-            zIndex: 0
-          }}
-          noScrollY={false}
-          noScrollX={props.scale === 1 ? true : false}
-        >
-          <div
-            style={{
-              width:
-                props.containerWH?.width &&
-                props.containerWH?.width * props.scale
-            }}
-            ref={props.drop}
-            id="container"
-          >
-            {props.pdfLoad &&
-              props.containerWH?.width &&
-              props.pdfOriginalWH.length > 0 &&
-              (props.pdfRequest || props.isSelfSign //pdf request sign flow
-                ? props.signerPos?.map((data, key) => {
-                    return (
-                      <React.Fragment key={key}>
-                        {checkSignedSigners(data)}
-                      </React.Fragment>
-                    );
-                  })
-                : props.placeholder //placeholder and template flow
-                  ? props.signerPos.map((data, ind) => {
-                      return (
-                        <React.Fragment key={ind}>
-                          {data?.placeHolder &&
-                            data?.placeHolder.map((placeData, index) => {
-                              return (
-                                <React.Fragment key={index}>
-                                  {placeData.pageNumber === props.pageNumber &&
-                                    placeData.pos.map((pos) => {
-                                      return (
-                                        <React.Fragment key={pos.key}>
-                                          <Placeholder
-                                            pos={pos}
-                                            setIsPageCopy={props.setIsPageCopy}
-                                            setSignKey={props.setSignKey}
-                                            handleDeleteSign={
-                                              props.handleDeleteSign
-                                            }
-                                            setIsStamp={props.setIsStamp}
-                                            handleTabDrag={props.handleTabDrag}
-                                            handleStop={props.handleStop}
-                                            handleSignYourselfImageResize={
-                                              handleImageResize
-                                            }
-                                            index={props.pageNumber}
-                                            xyPosition={props.signerPos}
-                                            setXyPosition={props.setSignerPos}
-                                            data={data}
-                                            setIsResize={props.setIsResize}
-                                            setShowDropdown={
-                                              props.setShowDropdown
-                                            }
-                                            isShowBorder={true}
-                                            isPlaceholder={true}
-                                            setUniqueId={props.setUniqueId}
-                                            handleLinkUser={
-                                              props.handleLinkUser
-                                            }
-                                            isSignYourself={false}
-                                            posWidth={posWidth}
-                                            posHeight={posHeight}
-                                            isDragging={props.isDragging}
-                                            setIsValidate={props.setIsValidate}
-                                            setWidgetType={props.setWidgetType}
-                                            setIsRadio={props.setIsRadio}
-                                            setIsCheckbox={props.setIsCheckbox}
-                                            setCurrWidgetsDetails={
-                                              props.setCurrWidgetsDetails
-                                            }
-                                            setSelectWidgetId={
-                                              props.setSelectWidgetId
-                                            }
-                                            selectWidgetId={
-                                              props.selectWidgetId
-                                            }
-                                            handleNameModal={
-                                              props.handleNameModal
-                                            }
-                                            setTempSignerId={
-                                              props.setTempSignerId
-                                            }
-                                            uniqueId={props.uniqueId}
-                                            handleTextSettingModal={
-                                              props.handleTextSettingModal
-                                            }
-                                            scale={props.scale}
-                                            containerWH={props.containerWH}
-                                            pdfOriginalWH={props.pdfOriginalWH}
-                                            pageNumber={props.pageNumber}
-                                            setIsSelectId={props.setIsSelectId}
-                                            fontSize={props.fontSize}
-                                            setFontSize={props.setFontSize}
-                                            fontColor={props.fontColor}
-                                            setFontColor={props.setFontColor}
-                                            isResize={props.isResize}
-                                            unSignedWidgetId={
-                                              props.unSignedWidgetId
-                                            }
-                                            isFreeResize={true}
-                                            calculateFontsize={
-                                              calculateFontsize
-                                            }
-                                          />
-                                        </React.Fragment>
-                                      );
-                                    })}
-                                </React.Fragment>
-                              );
-                            })}
-                        </React.Fragment>
-                      );
-                    })
-                  : !props.pdfDetails?.[0]?.IsCompleted &&
-                    props.xyPosition?.map((data, ind) => {
-                      // signyourself flow
-                      return (
-                        <React.Fragment key={ind}>
-                          {data.pageNumber === props.pageNumber &&
-                            data.pos.map((pos) => {
-                              return (
-                                <React.Fragment key={pos.key}>
-                                  <Placeholder
-                                    pos={pos}
-                                    setIsPageCopy={props.setIsPageCopy}
-                                    setSignKey={props.setSignKey}
-                                    handleDeleteSign={props.handleDeleteSign}
-                                    setIsStamp={props.setIsStamp}
-                                    handleTabDrag={props.handleTabDrag}
-                                    handleStop={(event, dragElement) =>
-                                      props.handleStop(
-                                        event,
-                                        dragElement,
-                                        pos.type
-                                      )
-                                    }
-                                    handleSignYourselfImageResize={
-                                      handleSignYourselfImageResize
-                                    }
-                                    index={props.index}
-                                    xyPosition={props.xyPosition}
-                                    setXyPosition={props.setXyPosition}
-                                    setIsSignPad={props.setIsSignPad}
-                                    isShowBorder={true}
-                                    isSignYourself={true}
-                                    posWidth={posWidth}
-                                    posHeight={posHeight}
-                                    pdfDetails={props.pdfDetails[0]}
-                                    isDragging={props.isDragging}
-                                    setIsInitial={props.setIsInitial}
-                                    setWidgetType={props.setWidgetType}
-                                    setSelectWidgetId={props.setSelectWidgetId}
-                                    selectWidgetId={props.selectWidgetId}
-                                    setIsCheckbox={props.setIsCheckbox}
-                                    setValidateAlert={props.setValidateAlert}
-                                    setCurrWidgetsDetails={
-                                      props.setCurrWidgetsDetails
-                                    }
-                                    handleTextSettingModal={
-                                      props.handleTextSettingModal
-                                    }
-                                    scale={props.scale}
-                                    containerWH={props.containerWH}
-                                    pdfOriginalWH={props.pdfOriginalWH}
-                                    pageNumber={props.pageNumber}
-                                    fontSize={props.fontSize}
-                                    setFontSize={props.setFontSize}
-                                    fontColor={props.fontColor}
-                                    setFontColor={props.setFontColor}
-                                    isResize={props.isResize}
-                                    setIsResize={props.setIsResize}
-                                    isFreeResize={false}
-                                    isOpenSignPad={true}
-                                    calculateFontsize={calculateFontsize}
-                                  />
-                                </React.Fragment>
-                              );
-                            })}
-                        </React.Fragment>
-                      );
-                    }))}
-            {/* large device */}
-            {/* this component for render pdf document is in middle of the component */}
-            <Document
-              error={<p className="mx-2">{t("failed-to-load-refresh-page")}</p>}
-              onLoadError={() => props.setPdfLoad(false)}
-              loading={t("loading-doc")}
-              onLoadSuccess={props.pageDetails}
-              onClick={() =>
-                props.setSelectWidgetId && props.setSelectWidgetId("")
-              }
-              file={pdfDataBase64}
-            >
-              <Page
-                key={props.index}
-                width={props.containerWH.width}
-                scale={props.scale || 1}
-                className={"-z-[1]"} // when user zoom-in in tablet widgets move backward that's why pass -z-[1]
-                pageNumber={props.pageNumber}
-                renderAnnotationLayer={false}
-                renderTextLayer={false}
-                onGetAnnotationsError={(error) => {
-                  console.log("annotation error", error);
-                }}
-              />
-            </Document>
-          </div>
-        </RSC>
-      )}
-    </>
-  );
-}
-
-export default RenderPdf;
@@ -0,0 +1,391 @@
+import React, { useState } from "react";
+import RSC from "react-scrollbars-custom";
+import { Document, Page } from "react-pdf";
+import {
+  defaultWidthHeight,
+  getContainerScale,
+  handleImageResize,
+  handleSignYourselfImageResize,
+  isMobile
+} from "../../constant/Utils";
+import Placeholder from "./Placeholder";
+import Alert from "../../primitives/Alert";
+import { useTranslation } from "react-i18next";
+
+function RenderPdf(props) {
+  const { t } = useTranslation();
+  const [scaledHeight, setScaledHeight] = useState();
+  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
+  const isGuestSigner = localStorage.getItem("isGuestSigner");
+
+  // handle signature block width and height according to screen
+  const posWidth = (pos, signYourself) => {
+    const containerScale = getContainerScale(
+      props.pdfOriginalWH,
+      props.pageNumber,
+      props.containerWH
+    );
+    const defaultWidth = defaultWidthHeight(pos.type).width;
+    const posWidth = pos.Width ? pos.Width : defaultWidth;
+    if (signYourself) {
+      return posWidth * props.scale * containerScale;
+    } else {
+      if (pos.isMobile && pos.scale) {
+        if (pos.IsResize) {
+          if (props.scale > 1) {
+            return posWidth * pos.scale * containerScale * props.scale;
+          } else {
+            return posWidth * containerScale;
+          }
+        } else {
+          if (props.scale > 1) {
+            return posWidth * pos.scale * containerScale * props.scale;
+          } else {
+            return posWidth * pos.scale * containerScale;
+          }
+        }
+      } else {
+        return posWidth * props.scale * containerScale;
+      }
+    }
+  };
+  const posHeight = (pos, signYourself) => {
+    const containerScale = getContainerScale(
+      props.pdfOriginalWH,
+      props.pageNumber,
+      props.containerWH
+    );
+    const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
+    if (signYourself) {
+      return posHeight * props.scale * containerScale;
+    } else {
+      if (pos.isMobile && pos.scale) {
+        if (pos.IsResize) {
+          if (props.scale > 1) {
+            return posHeight * pos.scale * containerScale * props.scale;
+          } else {
+            return posHeight * containerScale;
+          }
+        } else {
+          if (props.scale > 1) {
+            return posHeight * pos.scale * containerScale * props.scale;
+          } else {
+            return posHeight * pos.scale * containerScale;
+          }
+        }
+      } else {
+        return posHeight * props.scale * containerScale;
+      }
+    }
+  };
+
+  // function for render placeholder block over pdf document (all signing flow)
+  const checkSignedSigners = (data) => {
+    let checkSign = [];
+    //condition to handle quick send flow and using normal request sign flow
+    checkSign = props.signedSigners
+      ? props.signedSigners?.filter(
+          (sign) =>
+            sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
+        )
+      : [];
+    return (
+      checkSign.length === 0 &&
+      data?.placeHolder?.map((placeData, key) => (
+        <React.Fragment key={key}>
+          {placeData.pageNumber === props.pageNumber &&
+            placeData.pos.map(
+              (pos, ind) =>
+                pos && (
+                  <React.Fragment key={ind}>
+                    <Placeholder
+                      pos={pos}
+                      handleSignYourselfImageResize={handleImageResize}
+                      index={props.pageNumber}
+                      xyPosition={props.signerPos}
+                      setXyPosition={props.setSignerPos}
+                      data={data}
+                      setIsResize={props.setIsResize}
+                      isShowBorder={props.isSelfSign}
+                      isAlllowModify={props.isAlllowModify}
+                      signerObjId={props.signerObjectId}
+                      isShowDropdown={true}
+                      isNeedSign={props.pdfRequest}
+                      isSelfSign={true}
+                      isSignYourself={false}
+                      posWidth={posWidth}
+                      posHeight={posHeight}
+                      isDragging={props.isDragging}
+                      pdfDetails={props.pdfDetails}
+                      unSignedWidgetId={props.unSignedWidgetId}
+                      setCurrWidgetsDetails={props.setCurrWidgetsDetails}
+                      uniqueId={props.uniqueId}
+                      scale={props.scale}
+                      containerWH={props.containerWH}
+                      pdfOriginalWH={props.pdfOriginalWH}
+                      pageNumber={props.pageNumber}
+                      ispublicTemplate={props.ispublicTemplate}
+                      handleUserDetails={props.handleUserDetails}
+                      isResize={props.isResize}
+                      setIsAgreeTour={props.setIsAgreeTour}
+                      isAgree={props.isAgree}
+                      handleTabDrag={props.handleTabDrag}
+                      handleStop={props.handleStop}
+                      setUniqueId={props.setUniqueId}
+                      setIsSelectId={props.setIsSelectId}
+                      handleDeleteSign={props.handleDeleteSign}
+                      setIsPageCopy={props.setIsPageCopy}
+                      handleTextSettingModal={props.handleTextSettingModal}
+                      setIsCheckbox={props.setIsCheckbox}
+                      isFreeResize={false}
+                      isOpenSignPad={true}
+                      assignedWidgetId={props.assignedWidgetId}
+                      isApplyAll={true}
+                      setCellCount={props.setCellCount}
+                      setFontSize={props.setFontSize}
+                      fontSize={props.fontSize}
+                      fontColor={props.fontColor}
+                      setFontColor={props.setFontColor}
+                      setRequestSignTour={props.setRequestSignTour}
+                      calculateFontsize={calculateFontsize}
+                      currWidgetsDetails={props?.currWidgetsDetails}
+                      setTempSignerId={props.setTempSignerId}
+                    />
+                  </React.Fragment>
+                )
+            )}
+        </React.Fragment>
+      ))
+    );
+  };
+
+  const calculateFontsize = (pos) => {
+    const width = posWidth(pos);
+    const height = posHeight(pos);
+
+    if (height === width || height < width) {
+      return `${height / 5}px`;
+    } else if (width < height) {
+      return `${width / 10}px`;
+    }
+  };
+  const pdfDataBase64 = `data:application/pdf;base64,${props.pdfBase64Url}`;
+  // calculate render height of pdf in mobile view
+  const handlePageLoadSuccess = (page) => {
+    if (isMobile) {
+      const containerWidth = props.divRef.current.offsetWidth; // Get container width
+      const viewport = page.getViewport({ scale: 1 });
+      const scale = containerWidth / viewport.width; // Scale to fit container width
+      const scaleHeight = viewport.height * scale;
+      setScaledHeight(scaleHeight);
+    }
+  };
+  return (
+    <>
+      {props.successEmail && (
+        <Alert type={"success"}>{t("success-email-alert")}</Alert>
+      )}
+      <RSC
+        style={{
+          position: "relative",
+          boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+          height: isMobile
+            ? isGuestSigner
+              ? window.innerHeight - 49 // 49 is height of header
+              : scaledHeight
+            : `${window.innerHeight}px`,
+          zIndex: 0
+        }}
+        noScrollY={isMobile ? props.scale === 1 : false}
+        noScrollX={props.scale === 1}
+      >
+        <div
+          data-tut={isMobile ? "reactourForth" : undefined}
+          className={
+            isMobile
+              ? `${isGuestSigner ? "30px" : ""} border-[0.1px] border-[#ebe8e8] overflow-x-auto`
+              : ""
+          }
+          style={{
+            width:
+              props.containerWH?.width && props.containerWH?.width * props.scale
+          }}
+          ref={props.drop}
+          id="container"
+        >
+          {props.pdfLoad !== false &&
+            props.containerWH?.width &&
+            props.pdfOriginalWH.length > 0 && (
+              <>
+                {props.pdfRequest || props.isSelfSign
+                  ? // request sign, guest sign,
+                    props.signerPos?.map((data, key) => (
+                      <React.Fragment key={key}>
+                        {checkSignedSigners(data)}
+                      </React.Fragment>
+                    ))
+                  : props.placeholder // placeholdersign document, draft document, create template, draft template
+                    ? props.signerPos?.map((data, ind) => (
+                        <React.Fragment key={ind}>
+                          {data?.placeHolder &&
+                            data?.placeHolder.map((placeData, index) => (
+                              <React.Fragment key={index}>
+                                {placeData.pageNumber === props.pageNumber &&
+                                  placeData.pos.map((pos) => (
+                                    <React.Fragment key={pos.key}>
+                                      <Placeholder
+                                        pos={pos}
+                                        setIsPageCopy={props.setIsPageCopy}
+                                        handleDeleteSign={
+                                          props.handleDeleteSign
+                                        }
+                                        handleTabDrag={props.handleTabDrag}
+                                        handleStop={props.handleStop}
+                                        handleSignYourselfImageResize={
+                                          handleImageResize
+                                        }
+                                        index={props.pageNumber}
+                                        xyPosition={props.signerPos}
+                                        setXyPosition={props.setSignerPos}
+                                        data={data}
+                                        setIsResize={props.setIsResize}
+                                        setShowDropdown={props.setShowDropdown}
+                                        isShowBorder={true}
+                                        isPlaceholder={true}
+                                        setUniqueId={props.setUniqueId}
+                                        handleLinkUser={props.handleLinkUser}
+                                        isSignYourself={false}
+                                        posWidth={posWidth}
+                                        posHeight={posHeight}
+                                        isDragging={props.isDragging}
+                                        setIsValidate={props.setIsValidate}
+                                        setIsRadio={props.setIsRadio}
+                                        setIsCheckbox={props.setIsCheckbox}
+                                        setCurrWidgetsDetails={
+                                          props.setCurrWidgetsDetails
+                                        }
+                                        handleNameModal={props.handleNameModal}
+                                        setTempSignerId={props.setTempSignerId}
+                                        uniqueId={props.uniqueId}
+                                        handleTextSettingModal={
+                                          props.handleTextSettingModal
+                                        }
+                                        scale={props.scale}
+                                        containerWH={props.containerWH}
+                                        pdfOriginalWH={props.pdfOriginalWH}
+                                        pageNumber={props.pageNumber}
+                                        setIsSelectId={props.setIsSelectId}
+                                        fontSize={props.fontSize}
+                                        setFontSize={props.setFontSize}
+                                        setCellCount={props.setCellCount}
+                                        fontColor={props.fontColor}
+                                        setFontColor={props.setFontColor}
+                                        isResize={props.isResize}
+                                        unSignedWidgetId={
+                                          props.unSignedWidgetId
+                                        }
+                                        isFreeResize={true}
+                                        calculateFontsize={calculateFontsize}
+                                        currWidgetsDetails={
+                                          props?.currWidgetsDetails
+                                        }
+                                      />
+                                    </React.Fragment>
+                                  ))}
+                              </React.Fragment>
+                            ))}
+                        </React.Fragment>
+                      ))
+                    : !props.pdfDetails?.[0]?.IsCompleted && // signyourself flow
+                      props.xyPosition?.map((data, ind) => (
+                        <React.Fragment key={ind}>
+                          {data.pageNumber === props.pageNumber &&
+                            data.pos.map(
+                              (pos, id) =>
+                                pos && (
+                                  <Placeholder
+                                    key={id}
+                                    pos={pos}
+                                    setIsPageCopy={props.setIsPageCopy}
+                                    handleDeleteSign={props.handleDeleteSign}
+                                    handleTabDrag={props.handleTabDrag}
+                                    handleStop={props.handleStop}
+                                    handleSignYourselfImageResize={
+                                      handleSignYourselfImageResize
+                                    }
+                                    index={props.index}
+                                    xyPosition={props.xyPosition}
+                                    setXyPosition={props.setXyPosition}
+                                    containerWH={props.containerWH}
+                                    isShowBorder={true}
+                                    isSignYourself={true}
+                                    posWidth={posWidth}
+                                    posHeight={posHeight}
+                                    pdfDetails={props.pdfDetails[0]}
+                                    isDragging={props.isDragging}
+                                    setIsCheckbox={props.setIsCheckbox}
+                                    setCurrWidgetsDetails={
+                                      props.setCurrWidgetsDetails
+                                    }
+                                    handleTextSettingModal={
+                                      props.handleTextSettingModal
+                                    }
+                                    scale={props.scale}
+                                    pdfOriginalWH={props.pdfOriginalWH}
+                                    pageNumber={props.pageNumber}
+                                    fontSize={props.fontSize}
+                                    setFontSize={props.setFontSize}
+                                    fontColor={props.fontColor}
+                                    setFontColor={props.setFontColor}
+                                    isResize={props.isResize}
+                                    setIsResize={props.setIsResize}
+                                    isFreeResize={false}
+                                    isOpenSignPad={true}
+                                    calculateFontsize={calculateFontsize}
+                                    currWidgetsDetails={
+                                      props?.currWidgetsDetails
+                                    }
+                                  />
+                                )
+                            )}
+                        </React.Fragment>
+                      ))}
+              </>
+            )}
+          <Document
+            error={<p className="mx-2">{t("failed-to-load-refresh-page")}</p>}
+            onLoadError={(e) => {
+              console.log("PDF load error", e);
+              props.setPdfLoad(false);
+            }}
+            loading={t("loading-doc")}
+            onLoadSuccess={(pdf) => {
+              props.setPdfLoad(true);
+              props.pageDetails(pdf);
+            }}
+            onClick={() =>
+              props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({})
+            }
+            file={pdfDataBase64}
+          >
+            <Page
+              key={props.index}
+              onLoadSuccess={handlePageLoadSuccess}
+              width={props.containerWH.width}
+              scale={props.scale || 1}
+              className={isMobile ? "select-none touch-callout-none" : "-z-[1]"}
+              pageNumber={props.pageNumber}
+              renderAnnotationLayer={false}
+              renderTextLayer={false}
+              onGetAnnotationsError={(error) => {
+                console.log("annotation error", error);
+              }}
+            />
+          </Document>
+        </div>
+      </RSC>
+    </>
+  );
+}
+
+export default RenderPdf;
@@ -9,7 +9,8 @@ function SelectLanguage(props) {
    { value: "es", text: "Española" }, //spanish
    { value: "fr", text: "Français" }, //french
    { value: "it", text: "Italiano" }, //italian
-    { value: "de", text: "Deutsch" } //german
+    { value: "de", text: "Deutsch" }, //german
+    { value: "hi", text: "हिन्दी" } //hindi
  ];
  const defaultLanguage = i18next.language || "en";
  const [lang, setLang] = useState(defaultLanguage);
@@ -1,882 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import SignatureCanvas from "react-signature-canvas";
-import Parse from "parse";
-import {
-  generateTitleFromFilename,
-  getBase64FromUrl,
-  getSecureUrl
-} from "../../constant/Utils";
-import sanitizeFileName from "../../primitives/sanitizeFileName";
-import { SaveFileSize } from "../../constant/saveFileSize";
-import Loader from "../../primitives/Loader";
-
-function SignPad(props) {
-  const { t } = useTranslation();
-  const [penColor, setPenColor] = useState("blue");
-  const allColor = ["blue", "red", "black"];
-  const canvasRef = useRef(null);
-  const [isDefaultSign, setIsDefaultSign] = useState(false);
-  const [isTab, setIsTab] = useState("");
-  const [isSignImg, setIsSignImg] = useState("");
-  const [textWidth, setTextWidth] = useState(0);
-  const [textHeight, setTextHeight] = useState(0);
-  const [signatureType, setSignatureType] = useState("");
-  const [isSignTypes, setIsSignTypes] = useState(true);
-  const [typedSignature, setTypedSignature] = useState("");
-  const fontOptions = [
-    { value: "Fasthand" },
-    { value: "Dancing Script" },
-    { value: "Cedarville Cursive" },
-    { value: "Delicious Handrawn" }
-    // Add more font options as needed
-  ];
-  const [fontSelect, setFontSelect] = useState(fontOptions[0].value);
-  const [isSavedSign, setIsSavedSign] = useState(false);
-  const [isLoader, setIsLoader] = useState(false);
-  const accesstoken = localStorage.getItem("accesstoken") || "";
-  const senderUser = localStorage.getItem(
-    `Parse/${localStorage.getItem("parseAppId")}/currentUser`
-  );
-  const jsonSender = senderUser && JSON.parse(senderUser);
-  const currentUserName = jsonSender && jsonSender?.name;
-  useEffect(() => {
-    handleTab();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.signatureTypes]);
-  function handleTab() {
-    const signtypes = props?.signatureTypes || [];
-    const defaultIndex = signtypes?.findIndex(
-      (x) =>
-        x.name === "default" &&
-        x.enabled === true &&
-        props.defaultSign &&
-        (props?.currWidgetsDetails?.type || props.widgetType) !== "image" &&
-        (props?.currWidgetsDetails?.type || props.widgetType) !== "stamp"
-    );
-    const getIndex =
-      defaultIndex !== -1 // Check if the default index exists
-        ? defaultIndex // If found, use it
-        : signtypes?.findIndex((x) => x.enabled === true);
-
-    if (getIndex !== -1) {
-      setIsSignTypes(true);
-      const tab = props?.signatureTypes[getIndex].name;
-      if (tab === "draw") {
-        setIsTab("draw");
-        setSignatureType("draw");
-      } else if (tab === "upload") {
-        props?.setIsImageSelect(true);
-        setIsTab("uploadImage");
-      } else if (tab === "typed") {
-        setIsTab("type");
-      } else if (tab === "default") {
-        if (
-          (props?.isInitial && props?.myInitial) ||
-          (!props?.isInitial && props?.defaultSign)
-        ) {
-          setIsDefaultSign(true);
-          setIsTab("mysignature");
-        } else {
-          setIsTab("draw");
-        }
-      } else {
-        setIsTab(true);
-      }
-    } else {
-      setIsSignTypes(false);
-    }
-  }
-  function isTabEnabled(tabName) {
-    const isEnabled = props?.signatureTypes.find(
-      (x) => x.name === tabName
-    )?.enabled;
-    return isEnabled;
-  }
-
-  //function for clear signature image
-  const handleClear = () => {
-    if (isTab === "draw") {
-      if (canvasRef.current) {
-        canvasRef.current.clear();
-      } else if (props?.isStamp) {
-        props?.setImage("");
-      }
-      setIsSignImg("");
-    } else if (isTab === "uploadImage") {
-      props?.setImage("");
-    }
-  };
-  //function for set signature url
-  const handleSignatureChange = (data) => {
-    props?.setSignature(data);
-    setIsSignImg(data);
-  };
-  function base64StringtoFile(base64String, filename) {
-    let arr = base64String.split(","),
-      // type of uploaded image
-      mime = arr[0].match(/:(.*?);/)[1],
-      // decode base64
-      bstr = atob(arr[1]),
-      n = bstr.length,
-      u8arr = new Uint8Array(n);
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
-    }
-    const ext = mime.split("/").pop();
-    const name = `${filename}.${ext}`;
-    return new File([u8arr], name, { type: mime });
-  }
-
-  const uploadFile = async (file) => {
-    try {
-      const parseFile = new Parse.File(file.name, file);
-      const response = await parseFile.save();
-      if (response?.url()) {
-        const fileRes = await getSecureUrl(response.url());
-        if (fileRes.url) {
-          const tenantId = localStorage.getItem("TenantId");
-          SaveFileSize(file.size, fileRes.url, tenantId);
-          return fileRes?.url;
-        } else {
-          alert(`${t("something-went-wrong-mssg")}`);
-          return false;
-        }
-      } else {
-        alert(`${t("something-went-wrong-mssg")}`);
-        return false;
-      }
-    } catch (err) {
-      console.log("sign upload err", err);
-      alert(`${err.message}`);
-      return false;
-    }
-  };
-
-  // `handlesavesign` is used to save signaute, initials, stamp as a default
-  const handleSaveSign = async () => {
-    if (isSignImg || props?.image?.src) {
-      setIsLoader(true);
-      try {
-        const User = Parse?.User?.current();
-        const sanitizename = generateTitleFromFilename(User?.get("name"));
-        const replaceSpace = sanitizeFileName(sanitizename);
-        let file;
-        if (isSignImg) {
-          file = base64StringtoFile(isSignImg, `${replaceSpace}__sign`);
-        } else {
-          file = base64StringtoFile(props?.image?.src, `${replaceSpace}__sign`);
-        }
-        const imageUrl = await uploadFile(file);
-        const userId = {
-          __type: "Pointer",
-          className: "_User",
-          objectId: User?.id
-        };
-        if (imageUrl) {
-          //  below code is used to save or update default signaute, initials, stamp
-          try {
-            const signCls = new Parse.Object("contracts_Signature");
-            if (props?.saveSignCheckbox?.signId) {
-              signCls.id = props.saveSignCheckbox.signId;
-            }
-            if (
-              props.currWidgetsDetails?.type === "initials" ||
-              props?.widgetType === "initials"
-            ) {
-              signCls.set("Initials", imageUrl);
-            } else if (
-              props.currWidgetsDetails?.type === "signature" ||
-              props?.widgetType === "signature"
-            ) {
-              signCls.set("ImageURL", imageUrl);
-            }
-            signCls.set("UserId", userId);
-            const signRes = await signCls.save();
-            if (signRes) {
-              props.saveSignCheckbox.signId;
-              props.setSaveSignCheckbox((prev) => ({
-                ...prev,
-                signId: signRes?.id
-              }));
-              const _signRes = JSON.parse(JSON.stringify(signRes));
-              if (
-                props.currWidgetsDetails?.type === "signature" ||
-                props?.widgetType === "signature"
-              ) {
-                const defaultSign = await getBase64FromUrl(
-                  _signRes?.ImageURL,
-                  true
-                );
-                props.setDefaultSignImg(defaultSign);
-              } else if (
-                props.currWidgetsDetails?.type === "initials" ||
-                props?.widgetType === "initials"
-              ) {
-                const defaultInitials = await getBase64FromUrl(
-                  _signRes?.Initials,
-                  true
-                );
-                props.setMyInitial(defaultInitials);
-              }
-              alert(t("saved-successfully"));
-            }
-            return signRes;
-          } catch (err) {
-            console.log(err);
-            alert(`${err.message}`);
-          } finally {
-            setIsLoader(false);
-          }
-        }
-      } catch (err) {
-        console.log("Err while saving signature", err);
-      }
-    }
-  };
-
-  const handleSaveBtn = async () => {
-    if (accesstoken && isSavedSign) {
-      await handleSaveSign();
-      resetToDefault();
-    } else {
-      resetToDefault();
-    }
-  };
-  const resetToDefault = () => {
-    props?.setCurrWidgetsDetails({});
-    if (!props?.image) {
-      if (isTab === "mysignature") {
-        setIsSignImg("");
-        if (props?.isInitial) {
-          props?.onSaveSign(signatureType, "initials");
-        } else {
-          props?.onSaveSign(null, "default");
-        }
-      } else {
-        if (isTab === "type") {
-          setIsSignImg("");
-          props?.onSaveSign(
-            null,
-            false,
-            !props?.isInitial && textWidth > 150 ? 150 : textWidth,
-            !props?.isInitial && textHeight > 35 ? 35 : textHeight,
-            typedSignature
-          );
-        } else {
-          setIsSignImg("");
-          canvasRef.current.clear();
-          props?.onSaveSign(signatureType);
-        }
-      }
-      setPenColor("blue");
-    } else {
-      setIsSignImg("");
-      props?.onSaveImage(signatureType);
-    }
-    props?.setIsSignPad(false);
-    props?.setIsInitial && props?.setIsInitial(false);
-    props?.setIsImageSelect(false);
-    setIsDefaultSign(false);
-    props?.setImage();
-    handleTab();
-    props?.setIsStamp(false);
-  };
-  //save button component
-  const SaveBtn = () => {
-    return (
-      <div>
-        {(isTab === "draw" || isTab === "uploadImage") && (
-          <button
-            type="button"
-            className="op-btn op-btn-ghost mr-1 mt-[2px]"
-            onClick={() => handleClear()}
-          >
-            {t("clear")}
-          </button>
-        )}
-        <button
-          onClick={() => handleSaveBtn()}
-          type="button"
-          className={`${
-            isSignImg ||
-            props?.image ||
-            isDefaultSign ||
-            textWidth ||
-            props.isAutoSign
-              ? ""
-              : "pointer-events-none"
-          } op-btn op-btn-primary shadow-lg`}
-          disabled={
-            (isTab === "draw" && isSignImg) ||
-            (isTab === "image" && props?.image) ||
-            (isTab === "mysignature" && isDefaultSign) ||
-            (isTab === "type" && typedSignature) ||
-            props.isAutoSign
-              ? false
-              : props?.image
-                ? false
-                : true
-          }
-        >
-          {t("save")}
-        </button>
-      </div>
-    );
-  };
-  const autoSignAll = () => {
-    return (
-      <label className="cursor-pointer flex items-center mb-[6px] text-center text-[11px] md:text-base">
-        <input
-          className="mr-2 md:mr-3 op-checkbox op-checkbox-xs md:op-checkbox-sm"
-          type="checkbox"
-          value={props.isAutoSign}
-          onChange={(e) => {
-            props.setIsAutoSign(e.target.checked);
-          }}
-        />
-        {t("auto-sign-mssg")}
-      </label>
-    );
-  };
-  //useEffect for set already draw or save signature url/text url of signature text type and draw type for initial type and signature type widgets
-  useEffect(() => {
-    if (props?.currWidgetsDetails && canvasRef.current && props.isSignPad) {
-      const isWidgetType = props?.currWidgetsDetails?.type;
-      const signatureType = props?.currWidgetsDetails?.signatureType;
-      const url = props?.currWidgetsDetails?.SignUrl;
-      //checking widget type and draw type signature url
-      if (props?.isInitial) {
-        if (isWidgetType === "initials" && signatureType === "draw" && url) {
-          canvasRef.current.fromDataURL(url);
-        }
-      } else if (
-        isWidgetType === "signature" &&
-        signatureType === "draw" &&
-        url
-      ) {
-        canvasRef.current.fromDataURL(url);
-      }
-
-      const trimmedName = currentUserName && currentUserName?.trim();
-      const firstCharacter = trimmedName?.charAt(0);
-      const userName = props?.isInitial ? firstCharacter : currentUserName;
-      const signatureValue = props?.currWidgetsDetails?.typeSignature;
-      setTypedSignature(signatureValue || userName || "");
-      setFontSelect("Fasthand");
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.isSignPad]);
-  useEffect(() => {
-    const loadFont = async () => {
-      try {
-        await document.fonts.load(`20px ${fontSelect}`);
-        const selectFontSTyle = fontOptions.find(
-          (font) => font.value === fontSelect
-        );
-        setFontSelect(selectFontSTyle?.value || fontOptions[0].value);
-      } catch (error) {
-        console.error("Error loading font:", error);
-      }
-    };
-
-    loadFont();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fontSelect]);
-  useEffect(() => {
-    // Load the default signature after the component mounts
-    if (canvasRef.current) {
-      canvasRef.current.fromDataURL(isSignImg);
-    }
-    if (isTab === "type") {
-      const trimmedName = typedSignature
-        ? typedSignature?.trim()
-        : currentUserName?.trim();
-      const firstCharacter = trimmedName?.charAt(0);
-      const userName = props?.isInitial ? firstCharacter : typedSignature;
-      const signatureValue = props?.currWidgetsDetails?.typeSignature;
-      setTypedSignature(signatureValue || userName || "");
-      convertToImg(fontSelect, userName);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTab]);
-  //function for convert input text value in image
-  const convertToImg = async (fontStyle, text, color) => {
-    //get text content to convert in image
-    const textContent = text;
-    const fontfamily = fontStyle
-      ? fontStyle
-      : fontSelect
-        ? fontSelect
-        : "Fasthand";
-    const fontSizeValue = "40px";
-    //creating span for getting text content width
-    const span = document.createElement("span");
-    span.textContent = textContent;
-    span.style.font = `${fontSizeValue} ${fontfamily}`; // here put your text size and font family
-    span.style.color = color ? color : penColor;
-    span.style.display = "hidden";
-    document.body.appendChild(span); // Replace 'container' with the ID of the container element
-
-    //create canvas to render text in canvas and convert in image
-    const canvasElement = document.createElement("canvas");
-    // Draw the text content on the canvas
-    const ctx = canvasElement.getContext("2d");
-    const pixelRatio = window.devicePixelRatio || 1;
-    const addExtraWidth = props?.isInitial ? 10 : 50;
-    const width = span.offsetWidth + addExtraWidth;
-    const height = span.offsetHeight;
-    setTextWidth(width);
-    setTextHeight(height);
-    const font = span.style["font"];
-    // Set the canvas dimensions to match the span
-    canvasElement.width = width * pixelRatio;
-    canvasElement.height = height * pixelRatio;
-
-    // You can customize text styles if needed
-    ctx.font = font;
-    ctx.fillStyle = color ? color : penColor; // Set the text color
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.scale(pixelRatio, pixelRatio);
-    // Draw the content of the span onto the canvas
-    ctx.fillText(span.textContent, width / 2, height / 2); // Adjust the x,y-coordinate as needed
-    //remove span tag
-    document.body.removeChild(span);
-    // Convert the canvas to image data
-    const dataUrl = canvasElement.toDataURL("image/png");
-    props?.setSignature(dataUrl);
-  };
-  const PenColorComponent = (props) => {
-    return (
-      <div className="flex flex-row items-center m-[5px] gap-2">
-        {allColor.map((data, key) => {
-          return (
-            <i
-              key={key}
-              onClick={() => {
-                props?.convertToImg &&
-                  props?.convertToImg(fontSelect, typedSignature, data);
-                setPenColor(allColor[key]);
-              }}
-              className={`border-b-[2px] ${
-                key === 0 && penColor === "blue"
-                  ? "border-blue-600"
-                  : key === 1 && penColor === "red"
-                    ? "border-red-500"
-                    : key === 2 && penColor === "black"
-                      ? "border-black"
-                      : "border-white"
-              } text-[${data}] text-[16px] fa-light fa-pen-nib`}
-            ></i>
-          );
-        })}
-      </div>
-    );
-  };
-
-  // `handleCancelBtn` function trigger when user click on cross button
-  const handleCancelBtn = () => {
-    setPenColor("blue");
-    props?.setIsSignPad(false);
-    props?.setIsInitial && props?.setIsInitial(false);
-    props?.setIsImageSelect(false);
-    setIsDefaultSign(false);
-    props?.setImage();
-    handleTab();
-    props?.setIsStamp(false);
-  };
-
-  const savesigncheckbox = (
-    <label className="cursor-pointer flex items-center mb-0 text-center text-[11px] md:text-base">
-      <input
-        className="mr-2 md:mr-3 op-checkbox op-checkbox-xs md:op-checkbox-sm"
-        type="checkbox"
-        checked={isSavedSign}
-        onChange={(e) => setIsSavedSign(e.target.checked)}
-      />
-      Save {props?.currWidgetsDetails?.type || props?.widgetType}
-    </label>
-  );
-  return (
-    <div>
-      {props?.isSignPad && (
-        <div className="op-modal op-modal-open">
-          <div className="op-modal-box px-[13px] pt-2 pb-0">
-            {isLoader && (
-              <div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
-                <Loader />
-              </div>
-            )}
-            {isSignTypes ? (
-              <>
-                <div className="flex justify-between text-base-content items-center">
-                  <div className="text-[1.2rem]">
-                    <div className="flex flex-row justify-between mt-[3px]">
-                      <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
-                        {props?.isStamp ? (
-                          <span className="text-base-content font-bold text-lg">
-                            {props?.widgetType === "image" ||
-                            props?.currWidgetsDetails?.type === "image"
-                              ? t("upload-image")
-                              : t("upload-stamp-image")}
-                          </span>
-                        ) : (
-                          <>
-                            {!props?.isInitial &&
-                            props?.defaultSign &&
-                            isTabEnabled("default") ? (
-                              <div>
-                                <span
-                                  onClick={() => {
-                                    setIsDefaultSign(true);
-                                    props?.setIsImageSelect(true);
-                                    setIsTab("mysignature");
-                                    setSignatureType("");
-                                    props?.setImage();
-                                  }}
-                                  className={`${
-                                    isTab === "mysignature"
-                                      ? "op-link-primary"
-                                      : "no-underline"
-                                  } op-link underline-offset-8 ml-[2px]`}
-                                >
-                                  {t("my-signature")}
-                                </span>
-                              </div>
-                            ) : (
-                              props?.isInitial &&
-                              props?.myInitial &&
-                              isTabEnabled("default") && (
-                                <div>
-                                  <span
-                                    onClick={() => {
-                                      setIsDefaultSign(true);
-                                      props?.setIsImageSelect(true);
-                                      setIsTab("mysignature");
-                                      setSignatureType("");
-                                      props?.setImage();
-                                    }}
-                                    className={`${
-                                      isTab === "mysignature"
-                                        ? "op-link-primary"
-                                        : "no-underline"
-                                    } op-link underline-offset-8 ml-[2px]`}
-                                  >
-                                    {t("my-initials")}
-                                  </span>
-                                </div>
-                              )
-                            )}
-                            {isTabEnabled("draw") && (
-                              <div>
-                                <span
-                                  onClick={() => {
-                                    setIsDefaultSign(false);
-                                    props?.setIsImageSelect(false);
-                                    setIsTab("draw");
-                                    props?.setImage();
-                                    if (isSignImg) {
-                                      props?.setSignature(isSignImg);
-                                    }
-                                  }}
-                                  className={`${
-                                    isTab === "draw"
-                                      ? "op-link-primary"
-                                      : "no-underline"
-                                  } op-link underline-offset-8 ml-[2px]`}
-                                >
-                                  {t("draw")}
-                                </span>
-                              </div>
-                            )}
-                            {isTabEnabled("upload") && (
-                              <div>
-                                <span
-                                  onClick={() => {
-                                    setIsDefaultSign(false);
-                                    props?.setIsImageSelect(true);
-                                    setIsTab("uploadImage");
-                                    setSignatureType("");
-                                  }}
-                                  className={`${
-                                    isTab === "uploadImage"
-                                      ? "op-link-primary"
-                                      : "no-underline"
-                                  } op-link underline-offset-8 ml-[2px]`}
-                                >
-                                  {t("upload-image")}
-                                </span>
-                              </div>
-                            )}
-                            {isTabEnabled("typed") && (
-                              <div>
-                                <span
-                                  onClick={() => {
-                                    setIsDefaultSign(false);
-                                    props?.setIsImageSelect(false);
-                                    setIsTab("type");
-                                    setSignatureType("");
-                                    props?.setImage();
-                                  }}
-                                  className={`${
-                                    isTab === "type"
-                                      ? "op-link-primary"
-                                      : "no-underline"
-                                  } op-link underline-offset-8 ml-[2px]`}
-                                >
-                                  {t("type")}
-                                </span>
-                              </div>
-                            )}
-                          </>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="text-[1.5rem] cursor-pointer"
-                    onClick={handleCancelBtn}
-                  >
-                    &times;
-                  </div>
-                </div>
-                <div className="p-[20px] h-full">
-                  {isDefaultSign ? (
-                    <>
-                      {!props?.isInitial &&
-                        props?.defaultSign &&
-                        isTabEnabled("default") && (
-                          <>
-                            <div className="flex justify-center">
-                              <div
-                                className={`${
-                                  props?.isInitial
-                                    ? "intialSignatureCanvas"
-                                    : "signatureCanvas"
-                                } bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
-                              >
-                                <img
-                                  alt="stamp img"
-                                  className="w-full h-full object-contain bg-white"
-                                  draggable="false"
-                                  src={
-                                    props?.isInitial
-                                      ? props?.myInitial
-                                      : props?.defaultSign
-                                  }
-                                />
-                              </div>
-                            </div>
-                            {props.setIsAutoSign && autoSignAll()}
-                            <div className="flex justify-end">
-                              <SaveBtn />
-                            </div>
-                          </>
-                        )}
-
-                      {props?.isInitial &&
-                        props?.myInitial &&
-                        isTabEnabled("default") && (
-                          <>
-                            <div className="flex justify-center">
-                              <div
-                                className={`${
-                                  props?.isInitial
-                                    ? "intialSignatureCanvas"
-                                    : "signatureCanvas"
-                                } bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
-                              >
-                                <img
-                                  alt="stamp img"
-                                  className="w-full h-full object-contain bg-white"
-                                  draggable="false"
-                                  src={
-                                    props?.isInitial
-                                      ? props?.myInitial
-                                      : props?.defaultSign
-                                  }
-                                />
-                              </div>
-                            </div>
-                            {props.setIsAutoSign && autoSignAll()}
-                            <div className="flex justify-end">
-                              <SaveBtn />
-                            </div>
-                          </>
-                        )}
-                    </>
-                  ) : props?.isImageSelect || props?.isStamp ? (
-                    !props?.image ? (
-                      <div className="flex justify-center">
-                        <div
-                          className={`${
-                            props?.isInitial
-                              ? "intialSignatureCanvas"
-                              : "signatureCanvas"
-                          } bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
-                          onClick={() => props?.imageRef.current.click()}
-                        >
-                          <input
-                            type="file"
-                            onChange={props?.onImageChange}
-                            className="filetype"
-                            accept="image/png,image/jpeg"
-                            ref={props?.imageRef}
-                            hidden
-                          />
-                          <i className="fa-light fa-cloud-upload-alt uploadImgLogo"></i>
-                          <div className="text-[10px]">{t("upload")}</div>
-                        </div>
-                      </div>
-                    ) : (
-                      <>
-                        <div className="flex justify-center">
-                          <div
-                            className={`${
-                              props?.isInitial
-                                ? "intialSignatureCanvas"
-                                : "signatureCanvas"
-                            } bg-white border-[1.3px] border-[#007bff] mb-[6px] overflow-hidden`}
-                          >
-                            <img
-                              alt="print img"
-                              ref={props?.imageRef}
-                              src={props?.image.src}
-                              draggable="false"
-                              className="object-contain h-full w-full"
-                            />
-                          </div>
-                        </div>
-                        {props.setIsAutoSign && autoSignAll()}
-                        <div className="flex justify-end">
-                          <SaveBtn />
-                        </div>
-                      </>
-                    )
-                  ) : isTab === "type" ? (
-                    <div>
-                      <div className="flex justify-between items-center">
-                        <span className="mr-[5px] text-[12px]">
-                          {props?.isInitial
-                            ? t("initial-teb")
-                            : t("signature-tab")}
-                          :
-                        </span>
-                        <input
-                          maxLength={props?.isInitial ? 3 : 30}
-                          style={{ fontFamily: fontSelect, color: penColor }}
-                          type="text"
-                          className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
-                          placeholder={
-                            props?.isInitial
-                              ? t("initial-type")
-                              : t("signature-type")
-                          }
-                          value={typedSignature}
-                          onChange={(e) => {
-                            setTypedSignature(e.target.value);
-                            convertToImg(fontSelect, e.target.value);
-                          }}
-                        />
-                      </div>
-                      <div className="border-[1px] border-[#d6d3d3] mt-[10px] ml-[5px]">
-                        {fontOptions.map((font, ind) => {
-                          return (
-                            <div
-                              key={ind}
-                              style={{
-                                cursor: "pointer",
-                                fontFamily: font.value,
-                                backgroundColor:
-                                  fontSelect === font.value &&
-                                  "rgb(206 225 247)"
-                              }}
-                              onClick={() => {
-                                setFontSelect(font.value);
-                                convertToImg(font.value, typedSignature);
-                              }}
-                            >
-                              <div
-                                className="py-[5px] px-[10px] text-[20px]"
-                                style={{ color: penColor }}
-                              >
-                                {typedSignature
-                                  ? typedSignature
-                                  : "Your signature"}
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-
-                      <div className="flex flex-col justify-between mt-[10px]">
-                        {props.setIsAutoSign && autoSignAll()}
-                        <div className="flex flex-row justify-between mt-[10px]">
-                          <PenColorComponent convertToImg={convertToImg} />
-                          <SaveBtn />
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="flex justify-center">
-                        <SignatureCanvas
-                          ref={canvasRef}
-                          penColor={penColor}
-                          canvasProps={{
-                            className: `${
-                              props?.isInitial
-                                ? "intialSignatureCanvas"
-                                : "signatureCanvas"
-                            } border-[1.3px] border-[#007bff]`
-                          }}
-                          onEnd={() =>
-                            handleSignatureChange(
-                              canvasRef.current?.toDataURL()
-                            )
-                          }
-                          dotSize={1}
-                        />
-                      </div>
-                      <div className="flex flex-col justify-between mt-[10px]">
-                        {props.setIsAutoSign && autoSignAll()}
-                        {accesstoken &&
-                          props?.saveSignCheckbox?.isVisible &&
-                          savesigncheckbox}
-                        <div className="flex flex-row justify-between mt-[10px]">
-                          <PenColorComponent />
-                          <SaveBtn />
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </>
-            ) : (
-              <div>
-                <div className="relative flex flex-row items-center justify-between">
-                  <div className="text-base-content font-bold text-lg">
-                    Signature
-                  </div>
-                  <div
-                    className="text-[1.5rem] cursor-pointer"
-                    onClick={handleCancelBtn}
-                  >
-                    &times;
-                  </div>
-                </div>
-                <div className="mx-3 mb-6 mt-3">
-                  <p>{t("at-least-one-signature-type")}</p>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default SignPad;
@@ -8,6 +8,7 @@ import {
  isMobile,
  radioButtonWidget,
  textInputWidget,
+  cellsWidget,
  textWidget,
  widgets
 } from "../../constant/Utils";
@@ -37,6 +38,10 @@ function WidgetComponent(props) {
    type: "BOX",
    item: { type: "BOX", id: 7, text: textInputWidget }
  });
+  const [, cells] = useDrag({
+    type: "BOX",
+    item: { type: "BOX", id: 17, text: cellsWidget }
+  });
  const [, initials] = useDrag({
    type: "BOX",
    item: { type: "BOX", id: 8, text: "initials" }
@@ -89,6 +94,7 @@ function WidgetComponent(props) {
      date,
      text,
      textInput,
+      cells,
      checkbox,
      dropdown,
      radioButton,
@@ -132,7 +138,9 @@ function WidgetComponent(props) {
  );
  const filterWidgets = widget.filter(
    (data) =>
-      !["dropdown", radioButtonWidget, textInputWidget].includes(data.type)
+      !["dropdown", radioButtonWidget, textInputWidget].includes(
+        data.type
+      )
  );
  const textWidgetData = widget.filter((data) => data.type !== textWidget);
  const updateWidgets = props.isSignYourself
@@ -241,6 +249,7 @@ function WidgetComponent(props) {
              handleDivClick={props.handleDivClick}
              handleMouseLeave={props.handleMouseLeave}
              signRef={signRef}
+              addPositionOfSignature={props.addPositionOfSignature}
            />
          </div>
        </div>
@@ -5,6 +5,7 @@ import RegexParser from "regex-parser";
 import {
  signatureTypes,
  textInputWidget,
+  cellsWidget,
  textWidget
 } from "../../constant/Utils";
 import { fontColorArr, fontsizeArr } from "../../constant/Utils";
@@ -19,33 +20,47 @@ const WidgetNameModal = (props) => {
    status: "required",
    hint: "",
    textvalidate: "",
-    isReadOnly: false
+    isReadOnly: false,
+    cellCount: 5
  });
  const [isValid, setIsValid] = useState(true);
  const statusArr = ["Required", "Optional"];
  const [signatureType, setSignatureType] = useState([]);

+  const handleHint = () => {
+    const type = props.defaultdata?.type;
+
+    if (type === "signature") {
+      return "Draw signature";
+    } else if (type === "stamp" || type === "image") {
+      return `Upload ${type}`;
+    } else if (type === "initials") {
+      return "Draw initial";
+    } else if (type === textInputWidget) {
+      return "Enter text";
+    } else {
+      return `Enter ${type}`;
+    }
+  };
  useEffect(() => {
    if (props.defaultdata) {
      setFormdata({
        name: props.defaultdata?.options?.name || "",
        defaultValue: props.defaultdata?.options?.defaultValue || "",
        status: props.defaultdata?.options?.status || "required",
-        hint:
-          props.defaultdata?.options?.hint ||
-          (props.defaultdata?.type === textInputWidget
-            ? "Enter text"
-            : `Enter ${props.defaultdata?.options?.name}`),
+        hint: props.defaultdata?.options?.hint || handleHint(),
        textvalidate:
          props.defaultdata?.options?.validation?.type === "regex"
            ? props.defaultdata?.options?.validation?.pattern
            : props.defaultdata?.options?.validation?.type || "",
-        isReadOnly: props.defaultdata?.options?.isReadOnly || false
+        isReadOnly: props.defaultdata?.options?.isReadOnly || false,
+        cellCount: props.defaultdata?.options?.cellCount || 5
      });
    } else {
      setFormdata({
        ...formdata,
-        name: props.defaultdata?.options?.name || ""
+        name: props.defaultdata?.options?.name || "",
+        cellCount: props.defaultdata?.options?.cellCount || 5
      });
    }

@@ -72,6 +87,21 @@ const WidgetNameModal = (props) => {
          props.handleData(data, props.defaultdata?.type);
        }
      } else {
+        const isTextInput = [textInputWidget, cellsWidget].includes(
+          props.defaultdata?.type
+        );
+        const { isReadOnly, defaultValue, status } = formdata;
+        // If it’s a text‐input widget, enforce that read-only fields have
+        // either a defaultValue or an "optional" status.
+        if (isTextInput) {
+          const readOnlyWithoutValue =
+            isReadOnly && !defaultValue && status !== "optional";
+
+          if (readOnlyWithoutValue) {
+            alert(t("readonly-textinput-error"));
+            return;
+          }
+        }
        props.handleData(formdata);
      }
      setFormdata({
@@ -80,7 +110,8 @@ const WidgetNameModal = (props) => {
        defaultValue: "",
        status: "required",
        hint: "",
-        textvalidate: ""
+        textvalidate: "",
+        cellCount: 5
      });
      setSignatureType(signTypes);
    }
@@ -101,7 +132,11 @@ const WidgetNameModal = (props) => {
    } else {
      setIsValid(true);
    }
-    setFormdata({ ...formdata, [e.target.name]: e.target.value });
+    const val =
+      props.defaultdata?.type === cellsWidget
+        ? e.target.value.slice(0, formdata.cellCount)
+        : e.target.value;
+    setFormdata({ ...formdata, [e.target.name]: val });
  };

  function handleValidation(type) {
@@ -112,11 +147,14 @@ const WidgetNameModal = (props) => {
        return "/^\\d+$/";
      case "text":
        return "/^[a-zA-Zs]+$/";
+      case "ssn":
+        return "^\\d{3}-\\d{2}-\\d{4}$";
      default:
        return type;
    }
  }

+
  const handleCheckboxChange = (index) => {
    // Update the state with the modified array
    setSignatureType((prev) =>
@@ -138,7 +176,7 @@ const WidgetNameModal = (props) => {
      <form
        onSubmit={handleSubmit}
        className={`${
-          props.defaultdata?.type === textInputWidget
+          [textInputWidget, cellsWidget].includes(props.defaultdata?.type)
            ? "pt-0"
            : ["signature", "initials"].includes(props.defaultdata?.type)
              ? "pt-2"
@@ -162,7 +200,21 @@ const WidgetNameModal = (props) => {
            />
          </div>
        )}
-        {props.defaultdata?.type === textInputWidget && (
+        {props.defaultdata?.type === cellsWidget && (
+          <div className="mb-[0.75rem] text-[13px]">
+            <label htmlFor="cellCount">{t("cell-count")}</label>
+            <input
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              type="number"
+              min="1"
+              name="cellCount"
+              value={formdata.cellCount}
+              onChange={(e) => handleChange(e)}
+              required
+            />
+          </div>
+        )}
+        {[textInputWidget, cellsWidget].includes(props.defaultdata?.type) && (
          <>
            <div className="mb-[0.75rem]">
              <label htmlFor="name" className="text-[13px]">
@@ -174,6 +226,11 @@ const WidgetNameModal = (props) => {
                value={formdata.defaultValue}
                onChange={(e) => handledefaultChange(e)}
                autoComplete="off"
+                maxLength={
+                  props.defaultdata?.type === cellsWidget
+                    ? formdata.cellCount
+                    : undefined
+                }
                onBlur={() => {
                  if (isValid === false) {
                    setFormdata({ ...formdata, defaultValue: "" });
@@ -225,7 +282,9 @@ const WidgetNameModal = (props) => {
                );
              })}
            </div>
-            {[textInputWidget].includes(props.defaultdata?.type) && (
+            {[textInputWidget, cellsWidget].includes(
+              props.defaultdata?.type
+            ) && (
              <div className="flex items-center">
                <input
                  id="isReadOnly"
@@ -240,7 +299,7 @@ const WidgetNameModal = (props) => {
                    }))
                  }
                />
-                <label className="ml-1 mb-0" htmlFor="isreadonly">
+                <label className="ml-1.5 mb-0 capitalize text-[13px]" htmlFor="isreadonly">
                  {t("read-only")}
                </label>
              </div>
@@ -292,6 +351,7 @@ const WidgetNameModal = (props) => {
        {[
          textInputWidget,
          textWidget,
+          cellsWidget,
          "name",
          "company",
          "job title",
@@ -6,7 +6,8 @@ import { useTranslation } from "react-i18next";

 const FolderModal = (props) => {
  const { t } = useTranslation();
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
  const [clickFolder, setClickFolder] = useState("");
  const [folderList, setFolderList] = useState([]);
@@ -6,7 +6,8 @@ import Tooltip from "../../../primitives/Tooltip";
 import { useTranslation } from "react-i18next";

 const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
  const { t } = useTranslation();
  const [isOpen, SetIsOpen] = useState(false);
@@ -2,9 +2,19 @@ import React, { useEffect, useState } from "react";
 import AsyncSelect from "react-select/async";
 import { useTranslation } from "react-i18next";
 import axios from "axios";
+import { handleUnlinkSigner } from "../../../constant/Utils";

 const SelectSigners = (props) => {
  const { t } = useTranslation();
+  const {
+    signerPos,
+    setSignerPos,
+    signersData,
+    setSignersData,
+    uniqueId,
+    isRemove,
+    handleAddUser
+  } = props;
  const [userList, setUserList] = useState([]);
  const [selected, setSelected] = useState();
  const [userData, setUserData] = useState({});
@@ -30,7 +40,7 @@ const SelectSigners = (props) => {
    //checking if user select no signer option from dropdown
    if (item) {
      //checking selected signer is already assign to the document or not
-      const alreadyAssign = props.signersData.some(
+      const alreadyAssign = signersData.some(
        (item2) => item2.objectId === item.value
      );
      if (alreadyAssign) {
@@ -49,7 +59,7 @@ const SelectSigners = (props) => {
  };
  const handleAdd = () => {
    if (userData && userData.objectId) {
-      props.details(userData);
+      handleAddUser(userData);
      if (props.closePopup) {
        props.closePopup();
      }
@@ -60,7 +70,13 @@ const SelectSigners = (props) => {
  };
  //function to use remove signer from assigned widgets in create template flow
  const handleRemove = () => {
-    props.handleUnlinkSigner();
+    handleUnlinkSigner(
+      signerPos,
+      setSignerPos,
+      signersData,
+      setSignersData,
+      uniqueId
+    );
    if (props.closePopup) {
      props.closePopup();
    }
@@ -161,7 +177,7 @@ const SelectSigners = (props) => {
          <button className="op-btn op-btn-primary" onClick={() => handleAdd()}>
            {t("submit")}
          </button>
-          {props.isExistSigner && props.handleUnlinkSigner && (
+          {props.isExistSigner && isRemove && (
            <button
              className="op-btn op-btn-accent op-btn-outline"
              onClick={() => handleRemove()}
@@ -117,7 +117,9 @@ const SignersInput = (props) => {
  };
  const loadOptions = async (inputValue) => {
    try {
-      const contactRes = await findContact(inputValue);
+      const contactRes = await findContact(
+        inputValue,
+      );
      if (contactRes) {
        const res = JSON.parse(JSON.stringify(contactRes));
        //compareArrays is a function where compare between two array (total signersList and dcument signers list)
@@ -152,9 +154,7 @@ const SignersInput = (props) => {
        {props.label ? props.label : t("signers")}
        {props.required && <span className="text-red-500 text-[13px]">*</span>}
        <span
-          className={`z-[${
-            props?.helptextZindex ? props.helptextZindex : 30
-          }] absolute ml-1 text-xs`}
+          className={`z-[${props?.helptextZindex ? props.helptextZindex : 30}] absolute ml-1 text-xs`}
        >
          <Tooltip
            id={`${props.label ? props.label : "signers"}-tooltip`}
@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";

 const Menu = ({ item, isOpen, closeSidebar }) => {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
  const { t } = useTranslation();
  return (
@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";

 const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
  const { t } = useTranslation();
  const { title, icon, children } = item;
@@ -1,9 +1,12 @@
 import logo from "../assets/images/logo.png";
+import { getEnv } from "./Utils";

 export function serverUrl_fn() {
-  let baseUrl = process.env.REACT_APP_SERVERURL
-    ? process.env.REACT_APP_SERVERURL
-    : window.location.origin + "/api/app";
+  const env = getEnv();
+  const serverurl = env?.REACT_APP_SERVERURL
+    ? env.REACT_APP_SERVERURL // env.REACT_APP_SERVERURL is used for prod
+    : process.env.REACT_APP_SERVERURL; //  process.env.REACT_APP_SERVERURL is used for dev (locally)
+  let baseUrl = serverurl ? serverurl : window.location.origin + "/api/app";
  return baseUrl;
 }
 export const appInfo = {
@@ -11,9 +14,6 @@ export const appInfo = {
  appId: process.env.REACT_APP_APPID ? process.env.REACT_APP_APPID : "opensign",
  baseUrl: serverUrl_fn(),
  defaultRole: "contracts_User",
-  fbAppId: process.env.REACT_APP_FBAPPID
-    ? `${process.env.REACT_APP_FBAPPID}`
-    : "",
  fev_Icon:
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAALlJREFUaEPtmN0NwjAMBpNxYDKYiM1Yp90g93CKStH1NbIdfz921Dker2Pc+Js1cDF7MXAxASMGYkAigBI6vh9ZwoXP53uZoAYcvhwdA3mAVbI2aSb+9zFKU4IURB6j/HoPUIEa2G3iGIAhQQDlAUIoE2diabIklISS0NoFPebo77RF6OenEF3QntOm128he0GKrwHyACFoz2MgBqSGkpAEcHs47oHtN5AFakACqMNjQEMoE8SABFCHn4HE2zGHSLeEAAAAAElFTkSuQmCC",
  googleClietId: process.env.REACT_APP_GOOGLECLIENTID
@@ -1,4 +0,0 @@
-export default function linkURL(url) {
-  let newURL = (url && decodeURIComponent(url)) || "";
-  return newURL.substring(newURL.indexOf(".com/") + 5, newURL.indexOf("_"));
-}
@@ -25,7 +25,7 @@ i18n
    interpolation: {
      escapeValue: false // Not needed for react as it escapes by default
    },
-    whitelist: ["en", "es", "fr", "it", "de"] // List of allowed languages
+    whitelist: ["en", "es", "fr", "it", "de", "hi"] // List of allowed languages
  });

 export default i18n;
@@ -17,6 +17,9 @@ body {
  scrollbar-width: none;
  /* Firefox */
 }
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}

@media screen and (max-width: 766px) {
  .reactour__close {
@@ -4,7 +4,6 @@ import "./index.css";
 import App from "./App";
 import { Provider } from "react-redux";
 import { store } from "./redux/store";
-import { CookiesProvider } from "react-cookie";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { TouchBackend } from "react-dnd-touch-backend";
 import {
@@ -13,15 +12,14 @@ import {
  MouseTransition,
  Preview
 } from "react-dnd-multi-backend";
-import DragElement from "./components/pdf/DragElement";
+import DragElement from "./components/pdf/DragElement.jsx";
 import Parse from "parse";
 import "./polyfills";
 import { serverUrl_fn } from "./constant/appinfo";
 import "./i18n";

-const appId = process.env.REACT_APP_APPID
-  ? process.env.REACT_APP_APPID
-  : "opensign";
+const appId =
+  import.meta.env.VITE_APPID || process.env.REACT_APP_APPID || "opensign";
 const serverUrl = serverUrl_fn();
 Parse.initialize(appId);
 Parse.serverURL = serverUrl;
@@ -55,14 +53,13 @@ const generatePreview = (props) => {
  );
 };

+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <CookiesProvider defaultSetOptions={{ path: "/" }}>
-    <Provider store={store}>
-      <DndProvider options={HTML5toTouch}>
-        <Preview>{generatePreview}</Preview>
-        <App />
-      </DndProvider>
-    </Provider>
-  </CookiesProvider>
+  <Provider store={store}>
+    <DndProvider options={HTML5toTouch}>
+      <Preview>{generatePreview}</Preview>
+      <App />
+    </DndProvider>
+  </Provider>
 );
@@ -186,6 +186,14 @@ export default function reportJson(id) {
                btnIcon: "fa-light fa-envelope",
                redirectUrl: "",
                action: "saveastemplate"
+              },
+              {
+                btnId: "8440",
+                btnLabel: "Fix & resend",
+                hoverLabel: "Fix & resend",
+                btnIcon: "fa-light fa-paper-plane",
+                redirectUrl: "",
+                action: "recreatedocument"
              }
            ]
          }
@@ -533,9 +541,9 @@ export default function reportJson(id) {
                btnId: "1873",
                btnLabel: "Share with team",
                hoverLabel: "Share with team",
-                btnIcon: "fa-light fa-share-nodes",
+                btnIcon: "fa-light fa-user-group",
                redirectUrl: "",
-                action: "sharewith"
+                action: "sharewithteam"
              });
              return newItem;
            }
@@ -36,7 +36,7 @@ const dashboardJson = [
            queryType: "",
            class: "contracts_Document",
            query:
-              'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"SignedUrl":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              'where={"Type":null,"Signers":{"#*exists":true},"Placeholders":{"#*exists":true},"SignedUrl":{"#*exists":true},"IsCompleted":false,"IsDeclined":false,"IsArchive":null,"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&keys=Name,ExpiryDate,SignedUrl,Signers&count=1',
            key: "count",
            Redirect_type: "Report",
            Redirect_id: "1MwEuxLEkF",
@@ -1,3 +1,13 @@
+const userssetting = [
+  {
+    icon: "fa-light fa-users fa-fw",
+    title: "Users",
+    target: "_self",
+    pageType: "",
+    description: "",
+    objectId: "users"
+  }
+];
 export const subSetting = [
  {
    icon: "fa-light fa-sliders",
@@ -7,14 +17,7 @@ export const subSetting = [
    description: "",
    objectId: "preferences"
  },
-  {
-    icon: "fa-light fa-users fa-fw",
-    title: "Users",
-    target: "_self",
-    pageType: "",
-    description: "",
-    objectId: "users"
-  }
+  ...userssetting
 ];

 const sidebarList = [
@@ -65,7 +68,7 @@ const sidebarList = [
        pageType: "report",
        description: "",
        objectId: "6TeaPr321t"
-      },
+      }
    ]
  },
  {
@@ -3,19 +3,19 @@ import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Sidebar from "../components/sidebar/Sidebar";
 import { useWindowSize } from "../hook/useWindowSize";
-import Tour from "reactour";
+import Tour from "../primitives/Tour";
 import axios from "axios";
 import { useDispatch, useSelector } from "react-redux";
 import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
 import { useNavigate, useLocation, Outlet } from "react-router";
-import { useCookies } from "react-cookie";
 import Loader from "../primitives/Loader";
 import { showHeader } from "../redux/reducers/showHeader";
 import { useTranslation } from "react-i18next";

 const HomeLayout = () => {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
@@ -29,7 +29,6 @@ const HomeLayout = () => {
  const [isTour, setIsTour] = useState(false);
  const [tourStatusArr, setTourStatusArr] = useState([]);
  const [tourConfigs, setTourConfigs] = useState([]);
-  const [, setCookie] = useCookies(["accesstoken", "main_Domain"]);

  const tenantId = localStorage.getItem("TenantId");

@@ -53,8 +52,8 @@ const HomeLayout = () => {
          });
          if (user) {
            localStorage.setItem("profileImg", user.get("ProfilePic") || "");
-            setIsUserValid(true);
-            setIsLoader(false);
+              setIsUserValid(true);
+              setIsLoader(false);
          } else {
            setIsUserValid(false);
          }
@@ -63,38 +62,11 @@ const HomeLayout = () => {
          setIsUserValid(false);
        }
      })();
-      saveCookies();
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tenantId]);
-  //function to use save data in cookies storage
-  const saveCookies = () => {
-    const main_Domain = window.location.origin;
-    const domainName = window.location.hostname;
-    // Find the index of the first dot in the string
-    const indexOfFirstDot = domainName.indexOf(".");
-    // Remove the first dot and get the substring starting from the next character
-    const updateDomain = domainName.substring(indexOfFirstDot); //.opensignlabs.com
-    const serverUrl = localStorage.getItem("baseUrl");
-    const parseAppId = localStorage.getItem("parseAppId");
-    setCookie("accesstoken", localStorage.getItem("accesstoken"), {
-      secure: true,
-      domain: updateDomain
-    });
-    setCookie("main_Domain", main_Domain, {
-      secure: true,
-      domain: updateDomain
-    });
-    setCookie("server_url", serverUrl, {
-      secure: true,
-      domain: updateDomain
-    });
-    setCookie("parse_app_id", parseAppId, {
-      secure: true,
-      domain: updateDomain
-    });
-  };
+
  const showSidebar = () => {
    setIsOpen((value) => !value);
    dispatch(showHeader(!isOpen));
@@ -119,12 +91,7 @@ const HomeLayout = () => {
      // const resArr = arr;
      const resArr = arr.map((obj, index) => {
        if (arr.length - 1 === index) {
-          return {
-            ...obj
-            // actions: () => {
-            //   setIsCloseBtn(true);
-            // },
-          };
+          return { ...obj };
        } else {
          return {
            ...obj,
@@ -136,27 +103,23 @@ const HomeLayout = () => {
      });
      setTourConfigs([
        {
-          selector: '[data-tut="reactourFirst"]',
+          selector: '[data-tut="nonpresentmask"]',
          content: t("tour-mssg.home-layout-1"),
-          position: "top"
-          // style: { backgroundColor: "#abd4d2" },
+          position: "center",
        },
        {
          selector: '[data-tut="tourbutton"]',
          content: t("tour-mssg.home-layout-2"),
          position: "top"
-          // style: { backgroundColor: "#abd4d2" },
        },
        ...resArr,
        {
-          selector: '[data-tut="reactourLast"]',
+          selector: '[data-tut="nonpresentmask"]',
          content: t("tour-mssg.home-layout-3", { appName }),
-          position: "top"
-          // style: { backgroundColor: "#abd4d2" },
+          position: "center",
        }
      ]);
      checkTourStatus();
-      // console.log("resArr ", resArr);
    }
  };
  const closeTour = async () => {
@@ -16,7 +16,8 @@ import { useTranslation } from "react-i18next";
 import { emailRegex } from "../constant/const";

 const AddAdmin = () => {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  const dispatch = useDispatch();
@@ -175,7 +176,6 @@ const AddAdmin = () => {
      localStorage.setItem("accesstoken", sessionToken);
      localStorage.setItem("UserInformation", JSON.stringify(_user));
      localStorage.setItem("accesstoken", _user.sessionToken);
-      localStorage.setItem("scriptId", true);
      if (_user.ProfilePic) {
        localStorage.setItem("profileImg", _user.ProfilePic);
      } else {
@@ -5,7 +5,7 @@ import {
  getBase64FromUrl,
  handleDownloadCertificate,
  handleDownloadPdf,
-  handleToPrint
+  handleToPrint,
 } from "../constant/Utils";
 import ModalUi from "../primitives/ModalUi";
 import Loader from "../primitives/Loader";
@@ -7,7 +7,9 @@ import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
-import { emailRegex } from "../constant/const";
+import {
+  emailRegex,
+} from "../constant/const";
 import { useTranslation } from "react-i18next";
 import Loader from "../primitives/Loader";

@@ -46,7 +48,7 @@ function ForgotPassword() {
      if (state.email) {
        const username = state.email;
        try {
-          await Parse.User.requestPasswordReset(username);
+            await Parse.User.requestPasswordReset(username);
          setToast({ type: "success", message: t("reset-password-alert-1") });
        } catch (err) {
          console.log("err ", err.code);
@@ -76,7 +78,7 @@ function ForgotPassword() {
    } catch (err) {
      console.log("err while logging out ", err);
    }
-    setImage(appInfo?.applogo || undefined);
+      setImage(appInfo?.applogo || undefined);
  };
  return (
    <div>
@@ -42,7 +42,8 @@ function Form() {
 }

 const Forms = (props) => {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const { t } = useTranslation();
  const abortController = new AbortController();
  const inputFileRef = useRef(null);
@@ -105,12 +106,12 @@ const Forms = (props) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const initializeValues = async () => {
-    setFormData((obj) => ({
-      ...obj,
-      NotifyOnSignatures: true,
-      SendinOrder: sendinorder,
-      IsTourEnabled: istourenabled
-    }));
+      setFormData((obj) => ({
+        ...obj,
+        NotifyOnSignatures: true,
+        SendinOrder: sendinorder,
+        IsTourEnabled: istourenabled
+      }));
  };

  function getFileAsArrayBuffer(file) {
@@ -148,81 +149,17 @@ const Forms = (props) => {
            const name = generatePdfName(16);
            const pdfName = `${name?.split(".")[0]}.pdf`;
            setfileload(true);
-            try {
-              const res = await getFileAsArrayBuffer(files[0]);
-              const flatPdf = await flattenPdf(res);
-              const parseFile = new Parse.File(
-                pdfName,
-                [...flatPdf],
-                "application/pdf"
-              );
-
              try {
-                const response = await parseFile.save({
-                  progress: (progressValue, loaded, total, { type }) => {
-                    if (type === "upload" && progressValue !== null) {
-                      const percentCompleted = Math.round(
-                        (loaded * 100) / total
-                      );
-                      setpercentage(percentCompleted);
-                    }
-                  }
-                });
-                // The response object will contain information about the uploaded file
-                // You can access the URL of the uploaded file using response.url()
-                if (response.url()) {
-                  const fileRes = await getSecureUrl(response.url());
-                  if (fileRes.url) {
-                    setFileUpload(fileRes.url);
-                    setfileload(false);
-                    const tenantId = localStorage.getItem("TenantId");
-                    const title = generateTitleFromFilename(files?.[0]?.name);
-                    setFormData((obj) => ({ ...obj, Name: title }));
-                    SaveFileSize(size, fileRes.url, tenantId);
-                    return fileRes.url;
-                  } else {
-                    removeFile(e);
-                  }
-                } else {
-                  removeFile(e);
-                }
-              } catch (error) {
-                removeFile(e);
-                console.error("Error uploading file:", error);
-              }
-            } catch (err) {
-              if (err?.message?.includes("is encrypted")) {
-                try {
-                  setIsDecrypting(true);
-                  const size = files?.[0].size;
-                  const name = generatePdfName(16);
-                  const url = "https://ai.nxglabs.in/decryptpdf"; //
-                  let formData = new FormData();
-                  formData.append("file", files[0]);
-                  formData.append("password", "");
-                  const config = {
-                    headers: { "content-type": "multipart/form-data" },
-                    responseType: "blob"
-                  };
-                  const response = await axios.post(url, formData, config);
-                  const pdfBlob = new Blob([response.data], {
-                    type: "application/pdf"
-                  });
-                  const pdfFile = new File([pdfBlob], name, {
-                    type: "application/pdf"
-                  });
-                  setIsDecrypting(false);
-                  setfileload(true);
-                  const res = await getFileAsArrayBuffer(pdfFile);
-                  const flatPdf = await flattenPdf(res);
-                  // Upload the file to Parse Server
-                  const parseFile = new Parse.File(
-                    name,
-                    [...flatPdf],
-                    "application/pdf"
-                  );
+                const res = await getFileAsArrayBuffer(files[0]);
+                const flatPdf = await flattenPdf(res);
+                const parseFile = new Parse.File(
+                  pdfName,
+                  [...flatPdf],
+                  "application/pdf"
+                );

-                  await parseFile.save({
+                try {
+                  const response = await parseFile.save({
                    progress: (progressValue, loaded, total, { type }) => {
                      if (type === "upload" && progressValue !== null) {
                        const percentCompleted = Math.round(
@@ -232,16 +169,16 @@ const Forms = (props) => {
                      }
                    }
                  });
-
-                  // Retrieve the URL of the uploaded file
-                  if (parseFile.url()) {
-                    const fileRes = await getSecureUrl(parseFile.url());
+                  // The response object will contain information about the uploaded file
+                  // You can access the URL of the uploaded file using response.url()
+                  if (response.url()) {
+                    const fileRes = await getSecureUrl(response.url());
                    if (fileRes.url) {
                      setFileUpload(fileRes.url);
-                      removeFile();
+                      setfileload(false);
+                      const tenantId = localStorage.getItem("TenantId");
                      const title = generateTitleFromFilename(files?.[0]?.name);
                      setFormData((obj) => ({ ...obj, Name: title }));
-                      const tenantId = localStorage.getItem("TenantId");
                      SaveFileSize(size, fileRes.url, tenantId);
                      return fileRes.url;
                    } else {
@@ -250,22 +187,88 @@ const Forms = (props) => {
                  } else {
                    removeFile(e);
                  }
-                } catch (err) {
-                  removeFile();
-                  if (err?.response?.status === 401) {
-                    setIsPassword(true);
-                  } else {
-                    console.log("Error uploading file: ", err?.response);
-                    setIsDecrypting(false);
-                    e.target.value = "";
-                  }
+                } catch (error) {
+                  removeFile(e);
+                  console.error("Error uploading file:", error);
+                }
+              } catch (err) {
+                if (err?.message?.includes("is encrypted")) {
+                  try {
+                    setIsDecrypting(true);
+                    const size = files?.[0].size;
+                    const name = generatePdfName(16);
+                    const url = "https://ai.nxglabs.in/decryptpdf"; //
+                    let formData = new FormData();
+                    formData.append("file", files[0]);
+                    formData.append("password", "");
+                    const config = {
+                      headers: { "content-type": "multipart/form-data" },
+                      responseType: "blob"
+                    };
+                    const response = await axios.post(url, formData, config);
+                    const pdfBlob = new Blob([response.data], {
+                      type: "application/pdf"
+                    });
+                    const pdfFile = new File([pdfBlob], name, {
+                      type: "application/pdf"
+                    });
+                    setIsDecrypting(false);
+                    setfileload(true);
+                      const res = await getFileAsArrayBuffer(pdfFile);
+                      const flatPdf = await flattenPdf(res);
+                      // Upload the file to Parse Server
+                      const parseFile = new Parse.File(
+                        name,
+                        [...flatPdf],
+                        "application/pdf"
+                      );
+
+                      await parseFile.save({
+                        progress: (progressValue, loaded, total, { type }) => {
+                          if (type === "upload" && progressValue !== null) {
+                            const percentCompleted = Math.round(
+                              (loaded * 100) / total
+                            );
+                            setpercentage(percentCompleted);
+                          }
+                        }
+                      });
+
+                      // Retrieve the URL of the uploaded file
+                      if (parseFile.url()) {
+                        const fileRes = await getSecureUrl(parseFile.url());
+                        if (fileRes.url) {
+                          setFileUpload(fileRes.url);
+                          removeFile();
+                          const title = generateTitleFromFilename(
+                            files?.[0]?.name
+                          );
+                          setFormData((obj) => ({ ...obj, Name: title }));
+                          const tenantId = localStorage.getItem("TenantId");
+                          SaveFileSize(size, fileRes.url, tenantId);
+                          return fileRes.url;
+                        } else {
+                          removeFile(e);
+                        }
+                      } else {
+                        removeFile(e);
+                      }
+                  } catch (err) {
+                    removeFile();
+                    if (err?.response?.status === 401) {
+                      setIsPassword(true);
+                    } else {
+                      console.log("Error uploading file: ", err?.response);
+                      setIsDecrypting(false);
+                      e.target.value = "";
+                    }
+                  }
+                } else {
+                  console.log("err ", err);
+                  setFileUpload("");
+                  removeFile(e);
                }
-              } else {
-                console.log("err ", err);
-                setFileUpload("");
-                removeFile(e);
              }
-            }
          } else {
            const isImage = files?.[0]?.type.includes("image/");
            if (isImage) {
@@ -290,50 +293,50 @@ const Forms = (props) => {
              });
              const size = files?.[0]?.size;
              const name = generatePdfName(16);
-              const getFile = await pdfDoc.save({
-                useObjectStreams: false
-              });
-              setfileload(true);
-              const pdfName = `${name?.split(".")[0]}.pdf`;
-              const parseFile = new Parse.File(
-                pdfName,
-                [...getFile],
-                "application/pdf"
-              );
-
-              try {
-                const response = await parseFile.save({
-                  progress: (progressValue, loaded, total, { type }) => {
-                    if (type === "upload" && progressValue !== null) {
-                      const percentCompleted = Math.round(
-                        (loaded * 100) / total
-                      );
-                      setpercentage(percentCompleted);
-                    }
-                  }
+                const getFile = await pdfDoc.save({
+                  useObjectStreams: false
                });
-                // The response object will contain information about the uploaded file
-                // You can access the URL of the uploaded file using response.url()
-                if (response.url()) {
-                  const fileRes = await getSecureUrl(response.url());
-                  if (fileRes.url) {
-                    setFileUpload(fileRes.url);
-                    setfileload(false);
-                    const tenantId = localStorage.getItem("TenantId");
-                    const title = generateTitleFromFilename(files?.[0]?.name);
-                    setFormData((obj) => ({ ...obj, Name: title }));
-                    SaveFileSize(size, fileRes.url, tenantId);
-                    return fileRes.url;
+                setfileload(true);
+                const pdfName = `${name?.split(".")[0]}.pdf`;
+                const parseFile = new Parse.File(
+                  pdfName,
+                  [...getFile],
+                  "application/pdf"
+                );
+
+                try {
+                  const response = await parseFile.save({
+                    progress: (progressValue, loaded, total, { type }) => {
+                      if (type === "upload" && progressValue !== null) {
+                        const percentCompleted = Math.round(
+                          (loaded * 100) / total
+                        );
+                        setpercentage(percentCompleted);
+                      }
+                    }
+                  });
+                  // The response object will contain information about the uploaded file
+                  // You can access the URL of the uploaded file using response.url()
+                  if (response.url()) {
+                    const fileRes = await getSecureUrl(response.url());
+                    if (fileRes.url) {
+                      setFileUpload(fileRes.url);
+                      setfileload(false);
+                      const tenantId = localStorage.getItem("TenantId");
+                      const title = generateTitleFromFilename(files?.[0]?.name);
+                      setFormData((obj) => ({ ...obj, Name: title }));
+                      SaveFileSize(size, fileRes.url, tenantId);
+                      return fileRes.url;
+                    } else {
+                      removeFile(e);
+                    }
                  } else {
                    removeFile(e);
                  }
-                } else {
+                } catch (error) {
                  removeFile(e);
+                  console.error("Error uploading file:", error);
                }
-              } catch (error) {
-                removeFile(e);
-                console.error("Error uploading file:", error);
-              }
            }
          }
        }
@@ -408,11 +411,11 @@ const Forms = (props) => {
          object.set("RemindOnceInEvery", remindOnceInEvery);
          object.set("IsTourEnabled", isTourEnabled);
          object.set("TimeToCompleteDays", TimeToCompleteDays);
-          object.set("AllowModifications", false);
-          object.set("IsEnableOTP", false);
-          if (formData.NotifyOnSignatures !== undefined) {
-            object.set("NotifyOnSignatures", formData.NotifyOnSignatures);
-          }
+            object.set("AllowModifications", false);
+            object.set("IsEnableOTP", false);
+            if (formData.NotifyOnSignatures !== undefined) {
+              object.set("NotifyOnSignatures", formData.NotifyOnSignatures);
+            }
          if (formData?.RedirectUrl) {
            object.set("RedirectUrl", formData.RedirectUrl);
          }
@@ -451,9 +454,10 @@ const Forms = (props) => {
          setSigners([]);
          setBcc([]);
          setFolder({ ObjectId: "", Name: "" });
-          const notifySign = extUserData?.NotifyOnSignatures
-            ? extUserData?.NotifyOnSignatures
-            : true;
+          const notifySign =
+                extUserData?.NotifyOnSignatures !== undefined
+                ? extUserData?.NotifyOnSignatures
+                : true;
          setFormData({
            Name: "",
            Description: "",
@@ -529,9 +533,10 @@ const Forms = (props) => {
    setSigners([]);
    setBcc([]);
    setFolder({ ObjectId: "", Name: "" });
-    const notifySign = extUserData?.NotifyOnSignatures
-      ? extUserData?.NotifyOnSignatures
-      : true;
+    const notifySign =
+          extUserData?.NotifyOnSignatures !== undefined
+          ? extUserData?.NotifyOnSignatures
+          : true;
    let obj = {
      Name: "",
      Description: "",
@@ -585,28 +590,36 @@ const Forms = (props) => {
        type: "application/pdf"
      });
      setIsDecrypting(false);
-      const res = await getFileAsArrayBuffer(pdfFile);
-      const flatPdf = await flattenPdf(res);
-      const parseFile = new Parse.File(name, [...flatPdf], "application/pdf");
-      await parseFile.save({
-        progress: (progressValue, loaded, total, { type }) => {
-          if (type === "upload" && progressValue !== null) {
-            const percentCompleted = Math.round((loaded * 100) / total);
-            setpercentage(percentCompleted);
+        const res = await getFileAsArrayBuffer(pdfFile);
+        const flatPdf = await flattenPdf(res);
+        const parseFile = new Parse.File(name, [...flatPdf], "application/pdf");
+        await parseFile.save({
+          progress: (progressValue, loaded, total, { type }) => {
+            if (type === "upload" && progressValue !== null) {
+              const percentCompleted = Math.round((loaded * 100) / total);
+              setpercentage(percentCompleted);
+            }
+          }
+        });
+        // Retrieve the URL of the uploaded file
+        if (parseFile.url()) {
+          const fileRes = await getSecureUrl(parseFile.url());
+          if (fileRes.url) {
+            setFileUpload(fileRes.url);
+            removeFile();
+            const title = generateTitleFromFilename(formData?.file?.name);
+            setFormData((obj) => ({ ...obj, password: "", Name: title }));
+            const tenantId = localStorage.getItem("TenantId");
+            SaveFileSize(size, fileRes.url, tenantId);
+            return fileRes.url;
+          } else {
+            removeFile();
+            setFormData((prev) => ({ ...prev, password: "" }));
+            setIsDecrypting(false);
+            if (inputFileRef.current) {
+              inputFileRef.current.value = ""; // Set file input value to empty string
+            }
          }
-        }
-      });
-      // Retrieve the URL of the uploaded file
-      if (parseFile.url()) {
-        const fileRes = await getSecureUrl(parseFile.url());
-        if (fileRes.url) {
-          setFileUpload(fileRes.url);
-          removeFile();
-          const title = generateTitleFromFilename(formData?.file?.name);
-          setFormData((obj) => ({ ...obj, password: "", Name: title }));
-          const tenantId = localStorage.getItem("TenantId");
-          SaveFileSize(size, fileRes.url, tenantId);
-          return fileRes.url;
        } else {
          removeFile();
          setFormData((prev) => ({ ...prev, password: "" }));
@@ -615,14 +628,6 @@ const Forms = (props) => {
            inputFileRef.current.value = ""; // Set file input value to empty string
          }
        }
-      } else {
-        removeFile();
-        setFormData((prev) => ({ ...prev, password: "" }));
-        setIsDecrypting(false);
-        if (inputFileRef.current) {
-          inputFileRef.current.value = ""; // Set file input value to empty string
-        }
-      }
    } catch (err) {
      removeFile();
      if (err?.response?.status === 401) {
@@ -744,7 +749,9 @@ const Forms = (props) => {
            )}
            <div className="text-xs">
              <label className="block">
-                {`${`${t("report-heading.File")} (${t("file-type")}`}${")"}`}
+                {`${`${t("report-heading.File")} (${t("file-type")}`}${
+                      ")"
+                }`}
                <span className="text-red-500 text-[13px]">*</span>
              </label>
              {fileupload.length > 0 ? (
@@ -768,7 +775,9 @@ const Forms = (props) => {
                    className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                    onChange={(e) => handleFileInput(e)}
                    ref={inputFileRef}
-                    accept={"application/pdf,image/png,image/jpeg"}
+                    accept={
+                          "application/pdf,image/png,image/jpeg"
+                    }
                    onInvalid={(e) =>
                      e.target.setCustomValidity(t("input-required"))
                    }
@@ -1058,7 +1067,10 @@ const Forms = (props) => {
                {isAdvanceOpt && (
                  <div
                    style={{
-                      height: props.title === "New Template" ? "100px" : "280px"
+                      height:
+                              props.title === "New Template"
+                            ? "100px"
+                            : "280px"
                    }}
                    className="w-[1px] bg-gray-300 m-auto hidden md:inline-block"
                  ></div>
@@ -1167,7 +1179,11 @@ const Forms = (props) => {
                        </Tooltip>
                      </label>
                      <div className="flex flex-col md:flex-row md:gap-4">
-                        <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                        <div
+                          className={
+                            `flex items-center gap-2 ml-2 mb-1`
+                          }
+                        >
                          <input
                            className="mr-[2px] op-radio op-radio-xs"
                            type="radio"
@@ -1176,7 +1192,11 @@ const Forms = (props) => {
                          />
                          <div className="text-center">{t("yes")}</div>
                        </div>
-                        <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                        <div
+                          className={
+                            `flex items-center gap-2 ml-2 mb-1`
+                          }
+                        >
                          <input
                            className="mr-[2px] op-radio op-radio-xs"
                            type="radio"
@@ -1,8 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router";
 import axios from "axios";
-import { emailRegex } from "../constant/const";
-import { contractUsers, saveLanguageInLocal } from "../constant/Utils";
+import {
+  emailRegex,
+} from "../constant/const";
+import {
+  contractUsers,
+  saveLanguageInLocal
+} from "../constant/Utils";
 import logo from "../assets/images/logo.png";
 import { appInfo } from "../constant/appinfo";
 import Parse from "parse";
@@ -33,6 +38,7 @@ function GuestLogin() {
  const [sendmail, setSendmail] = useState();
  const [contact, setContact] = useState({ name: "", phone: "", email: "" });

+
  const navigateToDoc = async (docId, contactId) => {
    try {
      const docDetails = await Parse.Cloud.run("getDocument", {
@@ -62,12 +68,16 @@ function GuestLogin() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+
  //function generate serverUrl and parseAppId from url and save it in local storage
  const handleServerUrl = async () => {
-    setAppLogo(logo);
+      setAppLogo(logo);

    localStorage.clear(); // Clears everything
-    localStorage.setItem("appname", "OpenSign™");
+    localStorage.setItem(
+      "appname",
+        "OpenSign™"
+    );
    //save isGuestSigner true in local to handle login flow header in mobile view
    localStorage.setItem("isGuestSigner", true);
    saveLanguageInLocal(i18n);
@@ -119,7 +129,7 @@ function GuestLogin() {
    try {
      const params = {
        email: email?.toLowerCase()?.replace(/\s/g, "")?.toString(),
-        docId: documentId
+        docId: documentId,
      };
      const Otp = await Parse.Cloud.run("SendOTPMailV1", params);
      if (Otp) {
@@ -200,6 +210,7 @@ function GuestLogin() {
    }
  };

+
  const handleUserData = async (e) => {
    e.preventDefault();
    if (!emailRegex.test(contact.email?.toLowerCase()?.replace(/\s/g, ""))) {
@@ -323,12 +334,12 @@ function GuestLogin() {
                    className="op-btn op-btn-primary flex items-center"
                    onClick={(e) => {
                      e.preventDefault();
-                      SendOtp();
+                        SendOtp();
                    }}
                    disabled={loading}
                  >
-                    <i className="fa-light fa-message-sms mr-2"></i>
-                    {loading ? t("loading") : t("get-verification-code")}
+                        <i className="fa-light fa-message-sms mr-2"></i>
+                        {loading ? t("loading") : t("get-verification-code")}
                  </button>
                </div>
              </div>
@@ -7,7 +7,9 @@ import { NavLink, useNavigate, useLocation } from "react-router";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import ModalUi from "../primitives/ModalUi";
-import { emailRegex } from "../constant/const";
+import {
+  emailRegex,
+} from "../constant/const";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
@@ -22,7 +24,8 @@ import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";

 function Login() {
-  const appName = "OpenSign™";
+  const appName =
+    "OpenSign™";
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
@@ -30,17 +33,12 @@ function Login() {
  const { width } = useWindowSize();
  const [state, setState] = useState({
    email: "",
+    password: "",
    alertType: "success",
    alertMsg: "",
-    password: "",
    passwordVisible: false,
-    mobile: "",
-    phone: "",
-    scanResult: "",
-    baseUrl: localStorage.getItem("baseUrl"),
-    parseAppId: localStorage.getItem("parseAppId"),
    loading: false,
-    thirdpartyLoader: false
+    thirdpartyLoader: false,
  });
  const [userDetails, setUserDetails] = useState({
    Company: "",
@@ -54,15 +52,30 @@ function Login() {
    // eslint-disable-next-line
  }, []);

+
+  const setLocalVar = (user) => {
+    localStorage.setItem("accesstoken", user.sessionToken);
+    localStorage.setItem("UserInformation", JSON.stringify(user));
+    localStorage.setItem("userEmail", user.email);
+    if (user.ProfilePic) {
+      localStorage.setItem("profileImg", user.ProfilePic);
+    } else {
+      localStorage.setItem("profileImg", "");
+    }
+  };
+
  const showToast = (type, msg) => {
    setState({ ...state, loading: false, alertType: type, alertMsg: msg });
    setTimeout(() => setState({ ...state, alertMsg: "" }), 2000);
  };
+
  const checkUserExt = async () => {
    const app = await getAppLogo();
    if (app?.error === "invalid_json") {
      setErrMsg(t("server-down", { appName: appName }));
-    } else if (app?.user === "not_exist") {
+    } else if (
+      app?.user === "not_exist"
+    ) {
      navigate("/addadmin");
    }
    if (app?.logo) {
@@ -70,11 +83,11 @@ function Login() {
    } else {
      setImage(appInfo?.applogo || undefined);
    }
+    dispatch(fetchAppInfo());
    if (localStorage.getItem("accesstoken")) {
      setState({ ...state, loading: true });
      GetLoginData();
    }
-    dispatch(fetchAppInfo());
  };
  const handleChange = (event) => {
    let { name, value } = event.target;
@@ -84,20 +97,15 @@ function Login() {
    setState({ ...state, [name]: value });
  };

-  const handleSubmit = async (event) => {
-    localStorage.removeItem("accesstoken");
-    event.preventDefault();
+  const handleLogin = async (
+  ) => {
+    const email = state?.email
+    const password = state?.password

-    if (!emailRegex.test(state.email)) {
-      alert("Please enter a valid email address.");
-      return;
-    }
-
-    const { email, password } = state;
    if (!email || !password) {
      return;
    }
-
+    localStorage.removeItem("accesstoken");
    try {
      setState({ ...state, loading: true });
      localStorage.setItem("appLogo", appInfo.applogo);
@@ -109,31 +117,30 @@ function Login() {
      // Get extended user data (including 2FA status) using cloud function
      try {
        await Parse.User.become(_user.sessionToken);
-        // Store basic user info needed for further steps
-        localStorage.setItem("UserInformation", JSON.stringify(_user));
-        localStorage.setItem("userEmail", email);
-        localStorage.setItem("accesstoken", _user.sessionToken);
-        localStorage.setItem("scriptId", true);
-        if (_user.ProfilePic) {
-          localStorage.setItem("profileImg", _user.ProfilePic);
-        } else {
-          localStorage.setItem("profileImg", "");
-        }
+        setLocalVar(_user);
        await continueLoginFlow();
      } catch (error) {
        console.error("Error checking 2FA status:", error);
        showToast("danger", t("something-went-wrong-mssg"));
-        setState({ ...state, loading: false });
      }
    } catch (error) {
      console.error("Error while logging in user", error);
      showToast("danger", "Invalid username/password or region");
    }
  };
+  const handleLoginBtn = async (event) => {
+    event.preventDefault();
+    if (!emailRegex.test(state.email)) {
+      alert("Please enter a valid email address.");
+      return;
+    }
+    await handleLogin();
+  };

  const setThirdpartyLoader = (value) => {
    setState({ ...state, thirdpartyLoader: value });
  };
+
  const thirdpartyLoginfn = async (sessionToken) => {
    const baseUrl = localStorage.getItem("baseUrl");
    const parseAppId = localStorage.getItem("parseAppId");
@@ -148,74 +155,57 @@ function Login() {
    });
    if (res.data) {
      let _user = res.data;
-      localStorage.setItem("UserInformation", JSON.stringify(_user));
-      localStorage.setItem("userEmail", _user.email);
-      localStorage.setItem("accesstoken", _user.sessionToken);
-      localStorage.setItem("scriptId", true);
-      if (_user.ProfilePic) {
-        localStorage.setItem("profileImg", _user.ProfilePic);
-      } else {
-        localStorage.setItem("profileImg", "");
-      }
+      setLocalVar(_user);
      // Check extended class user role and tenentId
      try {
        const userSettings = appInfo.settings;
-        await Parse.Cloud.run("getUserDetails")
-          .then(async (extUser) => {
-            if (extUser) {
-              const IsDisabled = extUser?.get("IsDisabled") || false;
-              if (!IsDisabled) {
-                const userRole = extUser?.get("UserRole");
-                const menu =
-                  userRole &&
-                  userSettings.find((menu) => menu.role === userRole);
-                if (menu) {
-                  const _currentRole = userRole;
-                  const redirectUrl =
-                    location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
-                  const _role = _currentRole.replace("contracts_", "");
-                  localStorage.setItem("_user_role", _role);
-                  const results = [extUser];
-                  const extUser_stringify = JSON.stringify(results);
-                  localStorage.setItem("Extand_Class", extUser_stringify);
-                  const extInfo = JSON.parse(JSON.stringify(extUser));
-                  localStorage.setItem("userEmail", extInfo?.Email);
-                  localStorage.setItem("username", extInfo?.Name);
-                  if (extInfo?.TenantId) {
-                    const tenant = {
-                      Id: extInfo?.TenantId?.objectId || "",
-                      Name: extInfo?.TenantId?.TenantName || ""
-                    };
-                    localStorage.setItem("TenantId", tenant?.Id);
-                    dispatch(showTenant(tenant?.Name));
-                    localStorage.setItem("TenantName", tenant?.Name);
-                  }
-                  localStorage.setItem("PageLanding", menu.pageId);
-                  localStorage.setItem("defaultmenuid", menu.menuId);
-                  localStorage.setItem("pageType", menu.pageType);
-                  navigate(redirectUrl);
-                } else {
-                  showToast("danger", t("role-not-found"));
-                  logOutUser();
-                }
-              } else {
-                showToast("danger", t("do-not-access-contact-admin"));
-                logOutUser();
+        const extUser = await Parse.Cloud.run("getUserDetails");
+        if (extUser) {
+          const IsDisabled = extUser?.get("IsDisabled") || false;
+          if (!IsDisabled) {
+            const userRole = extUser?.get("UserRole");
+            const menu =
+              userRole && userSettings.find((menu) => menu.role === userRole);
+            if (menu) {
+              const _currentRole = userRole;
+              const redirectUrl =
+                location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
+              const _role = _currentRole.replace("contracts_", "");
+              const extInfo = JSON.parse(JSON.stringify(extUser));
+              localStorage.setItem("_user_role", _role);
+              localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
+              localStorage.setItem("userEmail", extInfo?.Email);
+              localStorage.setItem("username", extInfo?.Name);
+              if (extInfo?.TenantId) {
+                const tenant = {
+                  Id: extInfo?.TenantId?.objectId || "",
+                  Name: extInfo?.TenantId?.TenantName || ""
+                };
+                localStorage.setItem("TenantId", tenant?.Id);
+                dispatch(showTenant(tenant?.Name));
+                localStorage.setItem("TenantName", tenant?.Name);
              }
+              localStorage.setItem("PageLanding", menu.pageId);
+              localStorage.setItem("defaultmenuid", menu.menuId);
+              localStorage.setItem("pageType", menu.pageType);
+                navigate(redirectUrl);
            } else {
-              showToast("danger", t("user-not-found"));
+              showToast("danger", t("role-not-found"));
              logOutUser();
            }
-          })
-          .catch((err) => {
-            console.error("err in fetching extUser", err);
-            showToast("danger", `${err.message}`);
-            const payload = { sessionToken: sessionToken };
-            handleSubmitbtn(payload);
-          });
+          } else {
+            showToast("danger", t("do-not-access-contact-admin"));
+            logOutUser();
+          }
+        } else {
+          showToast("danger", t("user-not-found"));
+          logOutUser();
+        }
      } catch (error) {
-        showToast("danger", `${error.message}`);
-        console.log(error);
+        console.error("err in fetching extUser", err);
+        showToast("danger", `${err.message}`);
+        const payload = { sessionToken: _user.sessionToken };
+        handleSubmitbtn(payload);
      } finally {
        setThirdpartyLoader(false);
      }
@@ -227,14 +217,7 @@ function Login() {
    try {
      const user = await Parse.User.become(localStorage.getItem("accesstoken"));
      const _user = user.toJSON();
-      localStorage.setItem("UserInformation", JSON.stringify(_user));
-      localStorage.setItem("accesstoken", _user.sessionToken);
-      localStorage.setItem("scriptId", true);
-      if (_user.ProfilePic) {
-        localStorage.setItem("profileImg", _user.ProfilePic);
-      } else {
-        localStorage.setItem("profileImg", "");
-      }
+      setLocalVar(_user);
      const userSettings = appInfo.settings;
      const extUser = await Parse.Cloud.run("getUserDetails");
      if (extUser) {
@@ -245,14 +228,12 @@ function Login() {
          const menu =
            userRole && userSettings.find((menu) => menu.role === userRole);
          if (menu) {
+            const extInfo = JSON.parse(JSON.stringify(extUser));
            const _role = _currentRole.replace("contracts_", "");
            localStorage.setItem("_user_role", _role);
            const redirectUrl =
              location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
-            const results = [extUser];
-            const extendedInfo_stringify = JSON.stringify(results);
-            localStorage.setItem("Extand_Class", extendedInfo_stringify);
-            const extInfo = JSON.parse(JSON.stringify(extUser));
+            localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
            localStorage.setItem("userEmail", extInfo.Email);
            localStorage.setItem("username", extInfo.Name);
            if (extInfo?.TenantId) {
@@ -267,8 +248,7 @@ function Login() {
            localStorage.setItem("PageLanding", menu.pageId);
            localStorage.setItem("defaultmenuid", menu.menuId);
            localStorage.setItem("pageType", menu.pageType);
-            // Redirect to the appropriate URL after successful login
-            navigate(redirectUrl);
+              navigate(redirectUrl);
          } else {
            setState({ ...state, loading: false });
            logOutUser();
@@ -299,7 +279,6 @@ function Login() {
      const userInformation = JSON.parse(
        localStorage.getItem("UserInformation")
      );
-      // console.log("payload ", payload);
      if (payload && payload.sessionToken) {
        const params = {
          userDetails: {
@@ -313,7 +292,6 @@ function Login() {
          }
        };
        const userSignUp = await Parse.Cloud.run("usersignup", params);
-        // console.log("userSignUp ", userSignUp);
        if (userSignUp && userSignUp.sessionToken) {
          const LocalUserDetails = {
            name: userInformation.name,
@@ -377,18 +355,15 @@ function Login() {
            const _currentRole = userRole;
            const redirectUrl =
              location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
-            let _role = _currentRole.replace("contracts_", "");
+            const _role = _currentRole.replace("contracts_", "");
            localStorage.setItem("_user_role", _role);
            const checkLanguage = extUser?.get("Language");
            if (checkLanguage) {
              checkLanguage && i18n.changeLanguage(checkLanguage);
            }
-
-            // Continue with storing user data and redirecting
-            const results = [extUser];
-            const extUser_str = JSON.stringify(results);
-            localStorage.setItem("Extand_Class", extUser_str);
            const extInfo = JSON.parse(JSON.stringify(extUser));
+            // Continue with storing user data and redirecting
+            localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
            localStorage.setItem("userEmail", extInfo.Email);
            localStorage.setItem("username", extInfo.Name);
            if (extInfo?.TenantId) {
@@ -403,9 +378,8 @@ function Login() {
            localStorage.setItem("PageLanding", menu.pageId);
            localStorage.setItem("defaultmenuid", menu.menuId);
            localStorage.setItem("pageType", menu.pageType);
-
-            setState({ ...state, loading: false });
-            navigate(redirectUrl);
+              setState({ ...state, loading: false });
+              navigate(redirectUrl);
          } else {
            setState({ ...state, loading: false });
            setIsModal(true);
@@ -415,8 +389,8 @@ function Login() {
          logOutUser();
        }
      } else {
-        showToast("danger", t("user-not-found"));
-        logOutUser();
+          showToast("danger", t("user-not-found"));
+          logOutUser();
      }
    } catch (error) {
      console.error("Error during login flow", error);
@@ -458,7 +432,7 @@ function Login() {
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
                <div>
-                  <form onSubmit={handleSubmit} aria-label="Login Form">
+                  <form onSubmit={handleLoginBtn} aria-label="Login Form">
                    <h1 className="text-[30px] mt-6">{t("welcome")}</h1>
                    <fieldset>
                      <legend className="text-[12px] text-[#878787]">
@@ -483,44 +457,47 @@ function Login() {
                          onInput={(e) => e.target.setCustomValidity("")}
                        />
                        <hr className="my-1 border-none" />
-                        <label className="block text-xs" htmlFor="password">
-                          {t("password")}
-                        </label>
-                        <div className="relative">
-                          <input
-                            id="password"
-                            type={state.passwordVisible ? "text" : "password"}
-                            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                            name="password"
-                            value={state.password}
-                            autoComplete="current-password"
-                            onChange={handleChange}
-                            onInvalid={(e) =>
-                              e.target.setCustomValidity(t("input-required"))
-                            }
-                            onInput={(e) => e.target.setCustomValidity("")}
-                            required
-                          />
-                          <span
-                            className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
-                            onClick={togglePasswordVisibility}
-                          >
-                            {state.passwordVisible ? (
-                              <i className="fa-light fa-eye-slash text-xs pb-1" /> // Close eye icon
-                            ) : (
-                              <i className="fa-light fa-eye text-xs pb-1 " /> // Open eye icon
-                            )}
-                          </span>
-                        </div>
-
-                        <div className="relative mt-1">
-                          <NavLink
-                            to="/forgetpassword"
-                            className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
-                          >
-                            {t("forgot-password")}
-                          </NavLink>
-                        </div>
+                            <label className="block text-xs" htmlFor="password">
+                              {t("password")}
+                            </label>
+                            <div className="relative">
+                              <input
+                                id="password"
+                                type={
+                                  state.passwordVisible ? "text" : "password"
+                                }
+                                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                                name="password"
+                                value={state.password}
+                                autoComplete="current-password"
+                                onChange={handleChange}
+                                onInvalid={(e) =>
+                                  e.target.setCustomValidity(
+                                    t("input-required")
+                                  )
+                                }
+                                onInput={(e) => e.target.setCustomValidity("")}
+                                required
+                              />
+                              <span
+                                className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
+                                onClick={togglePasswordVisibility}
+                              >
+                                {state.passwordVisible ? (
+                                  <i className="fa-light fa-eye-slash text-xs pb-1" /> // Close eye icon
+                                ) : (
+                                  <i className="fa-light fa-eye text-xs pb-1 " /> // Open eye icon
+                                )}
+                              </span>
+                            </div>
+                          <div className="relative mt-1">
+                            <NavLink
+                              to="/forgetpassword"
+                              className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
+                            >
+                              {t("forgot-password")}
+                            </NavLink>
+                          </div>
                      </div>
                    </fieldset>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nxglabs	7e87aa4c38	Merge pull request #790 from nxglabs/fix_readonly fix: width should be 100% of text type widgets	2025-06-11 17:51:34 +00:00
prafull-opensignlabsandGitHub	b0e0b38e8f	Merge pull request #1789 from OpenSignLabs/updates-15483575034 v2.24.1	2025-06-06 11:17:12 +05:30
prafull-opensignlabs	49c23fb52b	Merge pull request #753 from OpenSignLabs/staging v2.24.1	2025-06-06 05:33:37 +00:00
prafull-opensignlabsandGitHub	da4b604710	Merge pull request #1785 from OpenSignLabs/updates-15425322075 handle crashing pattern for text input widgets	2025-06-04 00:17:30 +05:30
prafull-opensignlabs	82d518b3c9	Merge pull request #739 from OpenSignLabs/staging disable signing request email when send_email flag is false	2025-06-03 18:45:49 +00:00
prafull-opensignlabsandGitHub	dcbde2b661	Merge pull request #1784 from OpenSignLabs/updates-15419310132 v2.23.1	2025-06-03 19:28:35 +05:30
prafull-opensignlabs	27b0b426ad	v2.23.1 Enable widget placement on click in desktop view Disable signature types not working Change icon of agreement sign checkbox Update dependencies	2025-06-03 13:55:57 +00:00
prafull-opensignlabsandGitHub	8788afaa8e	Merge pull request #1766 from OpenSignLabs/updates-15350472621 fix: add verify-document route	2025-05-30 21:19:35 +05:30
prafull-opensignlabs	428aa65b38	Merge pull request #710 from OpenSignLabs/staging fix: add verify-document route	2025-05-30 15:45:27 +00:00
AmolandGitHub	295d942427	feat: add deploy to digitalocean button	2025-05-30 20:33:43 +05:30
prafull-opensignlabsandGitHub	c4e28e6e6e	Merge pull request #1764 from OpenSignLabs/updates-15349515719 v2.23.0	2025-05-30 20:26:41 +05:30
prafull-opensignlabs	b19fb29b82	Merge pull request #708 from OpenSignLabs/staging refactor: unnecessary code	2025-05-30 14:54:53 +00:00
prafull-opensignlabsandGitHub	3d223ba343	Merge pull request #1756 from OpenSignLabs/updates-15275255429 v2.22.0	2025-05-27 18:13:12 +05:30
prafull-opensignlabs	98754c776f	Merge pull request #675 from OpenSignLabs/staging v2.22.0	2025-05-27 12:28:40 +00:00
prafull-opensignlabsandGitHub	1550e3a3d0	Merge pull request #1748 from OpenSignLabs/updates-15156338467 v2.21.2	2025-05-21 13:09:14 +05:30
prafull-opensignlabs	3500883205	v2.21.2 fix: handle subscription error in publicsign	2025-05-21 07:37:15 +00:00
prafull-opensignlabsandGitHub	d888897b62	Update README.md	2025-05-20 20:10:44 +05:30
prafull-opensignlabsandGitHub	8f2433fbea	Merge pull request #1737 from OpenSignLabs/updates-15043583319 v2.21.1	2025-05-15 16:48:53 +05:30
prafull-opensignlabs	b671dbac19	v2.21.1 fix: handle undefined placeholders condition	2025-05-15 11:17:30 +00:00
prafull-opensignlabsandGitHub	79cdbc9c8c	Merge pull request #1735 from OpenSignLabs/updates-15024699698 fix: resolve error cannot read undefined props	2025-05-14 20:55:08 +05:30
prafull-opensignlabs	e585b7c943	fix: resolve error cannot read undefined props	2025-05-14 15:24:27 +00:00
prafull-opensignlabsandGitHub	5336e2cb7c	Merge pull request #1734 from OpenSignLabs/prafull-opensignlabs-patch-7 refactor: remove unnecessary file	2025-05-14 20:26:36 +05:30
prafull-opensignlabsandGitHub	72401291f8	Delete apps/OpenSign/vite.public-template.config.js	2025-05-14 20:24:54 +05:30
prafull-opensignlabsandGitHub	7b34314b9e	Merge pull request #1733 from OpenSignLabs/updates-15023728155 fix: correct build commands for selfhosting	2025-05-14 20:13:14 +05:30
prafull-opensignlabs	b6f1cceeca	Merge pull request #612 from OpenSignLabs/staging fix: correct build commands for selfhosting	2025-05-14 14:42:30 +00:00
prafull-opensignlabsandGitHub	c422cdac06	Merge pull request #1732 from OpenSignLabs/updates-15023371589 fix: edit template option not visible in mobile view	2025-05-14 20:00:02 +05:30
prafull-opensignlabsandGitHub	ab08d2615d	Update package.json	2025-05-14 19:59:01 +05:30
prafull-opensignlabs	2b0c7488d9	Merge pull request #610 from OpenSignLabs/staging fix: edit template option not visible in mobile view	2025-05-14 14:27:57 +00:00
prafull-opensignlabsandGitHub	6927540741	Merge pull request #1731 from OpenSignLabs/updates-15022725718 v2.21.0	2025-05-14 19:33:19 +05:30
prafull-opensignlabs	1ceeee36ac	v2.21.0 Merge pull request #601 from OpenSignLabs/staging	2025-05-14 14:00:50 +00:00
prafull-opensignlabsandGitHub	c4779c14c1	feat: add all three docker command	2025-05-14 19:11:18 +05:30
prafull-opensignlabsandGitHub	e48869cb2f	feat: add deploy to digitalocean button	2025-05-14 18:36:47 +05:30
prafull-opensignlabsandGitHub	81d3969d1f	Merge pull request #1719 from OpenSignLabs/updates-14856876951 v2.20.1	2025-05-06 15:35:42 +05:30
prafull-opensignlabs	5819103f57	v2.20.1	2025-05-06 10:01:20 +00:00