feat:added signature to the certificates

client/package.json

@@ -34,8 +34,8 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "react-signature-canvas": "^1.0.7",
     "react-to-print": "^2.14.15",
-    "react-webcam": "^7.2.0",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "uuid": "^9.0.1"

client/src/api/upload/index.js

@@ -0,0 +1,18 @@
+import { resolve } from "../../helpers/resolve-response";
+import axios from "@api";
+
+export async function uploadSignature(id, type, file) {
+  console.log("id", id);
+  console.log("type", type);
+  console.log("file", file.get("file"));
+  const authResponse = await resolve(
+    fetch(
+      "http://localhost:9000/api/upload/signature?id=" + id + "&type=" + type,
+      {
+        body: file,
+        method: "POST",
+      },
+    ),
+  );
+  return authResponse.data;
+}

client/src/components/documents/adr/front/AdrCertificate.jsx

@@ -1,10 +1,7 @@
-import summarizeName from "@helpers/summarizeName";
-import gerb from "@assets/images/gerb.png";
-import signs from "@assets/images/signs.png";
 import QRCode from "react-qr-code";
 
 const AdrCertificateFront = ({ document, type }) => {
-  const { name, surname, to, birthDate, id, from } = document;
+  const { name, surname, to, birthDate, id, signature } = document;
   return (
     <div
       className={`w-[2480px] ${type !== "search" && "h-[3508px]"} flex justify-center`}
@@ -32,7 +29,15 @@ const AdrCertificateFront = ({ document, type }) => {
             <p>5.REPUBLIC OF UZBEKISTAN</p>
             <p>6.NAMANGANTRANS 2022</p>
             <p>Until (date) {to}</p>
-            <div className="w-[400px] h-[150px] bg-white border-[2px] border-black"></div>
+            <div className="w-[400px] h-[130px] bg-white border-[2px] border-black">
+              <img
+                width={"100%"}
+                height={"80%"}
+                src={signature}
+                alt=""
+                className="scale-75"
+              />
+            </div>
           </div>
           <div className="h-full flex items-end justify-center">
             <QRCode

client/src/redux/thunks/upload-thunk.js

@@ -0,0 +1,14 @@
+import { uploadSignature } from "@/api/upload";
+import { createAsyncThunk } from "@reduxjs/toolkit";
+
+export const uploadSignatureThunk = createAsyncThunk(
+  "signature/upload",
+  async ({ id, type, file, onSuccess }) => {
+    try {
+      const response = await uploadSignature(id, type, file);
+      if (onSuccess) onSuccess(response);
+    } catch (error) {
+      throw error;
+    }
+  },
+);

client/src/routes/index.jsx

@@ -11,7 +11,7 @@ import Manager from "@routes/sub-routes/manage-certificate/manager";
 import AdrTank from "@routes/sub-routes/manage-certificate/adr-tank";
 import Status from "./sub-routes/status";
 import Details from "./sub-routes/status/details";
-import ImageUpload from "./image-upload";
+import SignatureUpload from "./signature-upload";
 
 const index = () => {
   return (
@@ -31,7 +31,7 @@ const index = () => {
           <Route path=":id" element={<Details />} />
         </Route>
       </Route>
-      <Route path="image-upload/:id" element={<ImageUpload />} />
+      <Route path="signature-upload/:id" element={<SignatureUpload />} />
     </Routes>
   );
 };

client/src/routes/signature-upload/index.jsx

@@ -0,0 +1,81 @@
+import React, { useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import SignatureCanvas from "react-signature-canvas";
+import { Button, message, Spin } from "antd";
+import { uploadSignatureThunk } from "@thunks/upload-thunk";
+import { useDispatch } from "react-redux";
+
+const SignatureUpload = () => {
+  const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+  const signatureRef = useRef(null);
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const handleSave = () => {
+    const signature = signatureRef.current
+      .getTrimmedCanvas()
+      .toDataURL("image/png");
+    const imageFromBase64 = signature.split(",")[1];
+    const byteCharacters = atob(imageFromBase64);
+    const byteNumbers = new Array(byteCharacters.length);
+
+    for (let i = 0; i < byteCharacters.length; i++) {
+      byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+
+    const byteArray = new Uint8Array(byteNumbers);
+    const blob = new Blob([byteArray], { type: "image/png" });
+    const file = new File([blob], "signature.png", { type: "image/png" });
+    const formData = new FormData();
+    formData.append("file", file);
+    setLoading(true);
+    dispatch(
+      uploadSignatureThunk({
+        id: id?.split("-")[1],
+        type: id?.split("-")[0],
+        file: formData,
+        onSuccess: () => {
+          setLoading(false);
+          message.success("Imzo saqlandi");
+          navigate("/");
+        },
+      }),
+    );
+  };
+
+  const handleReset = () => {
+    signatureRef.current.clear();
+  };
+
+  return (
+    <div className="max-w-[500px] mx-auto h-screen flex flex-col gap-[20px] justify-center items-center">
+      {loading ? (
+        <Spin />
+      ) : (
+        <>
+          {" "}
+          <SignatureCanvas
+            ref={signatureRef}
+            penColor="black"
+            canvasProps={{
+              width: 500,
+              height: 200,
+              className: "border-2 border-black",
+            }}
+          />
+          <div className="flex gap-4">
+            <Button type="primary" disabled={loading} onClick={handleSave}>
+              Saqlash
+            </Button>
+            <Button type="default" disabled={loading} onClick={handleReset}>
+              Qaytadan chizish
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SignatureUpload;

client/src/routes/sub-routes/create/save-and-check/index.jsx

@@ -79,12 +79,12 @@ const SaveAndCheck = ({
     },
     {
       key: "10",
-      label: "Sertifikat mavjudligi",
+      label: "Sertifikat holati",
       span: 3,
       children: (
         <Badge
           status={checkCertificateStatus(document) ? "success" : "error"}
-          text={checkCertificateStatus(document) ? "Mavjud" : "Mavjud emas"}
+          text={checkCertificateStatus(document) ? "Mavjud" : "Maddati tugagan"}
         />
       ),
     },
@@ -149,7 +149,7 @@ const SaveAndCheck = ({
 
   const handleCopyImageUploadLink = () => {
     navigator.clipboard.writeText(
-      `${window.location.origin}/image-upload/${document._id}`,
+      `${window.location.origin}/signature-upload/${documentType}-${document._id}`,
     );
     message.success("Havola nusxalandi");
   };
@@ -194,7 +194,7 @@ const SaveAndCheck = ({
               disabled={loading}
               onClick={handleCopyImageUploadLink}
             >
-              Rasm yuklash uchun havola
+              Imzo qo'yish uchun havola
             </Button>
           </div>
           {actionType && (