Feat/add new driver certificate

client/src/api/upload/index.js

@@ -4,7 +4,7 @@ import axios from "@api";
 export async function uploadSignature(id, type, file) {
   const authResponse = await resolve(
     fetch(
-      "https://lionfish-app-3v9xf.ondigitalocean.app/api/upload/signature?id=" +
+      `${import.meta.env.VITE_API_URL}upload/signature?id=` +
         id +
         "&type=" +
         type,

client/src/components/documents/adr/index.jsx

@@ -7,14 +7,9 @@ import MiniCertificate from "../driver/mini";
 const AdrCertificate = forwardRef(({ document, type }, ref) => {
   return (
     <div ref={ref}>
-      <AdrCertificateFront type={type} document={document} ref={ref} />
+      <AdrCertificateFront type={type} document={document} />
       <AdrCertificateBack type={type} tank={document?.tank} />
-      <MiniCertificate
-        document={document}
-        type={type}
-        certType="adr"
-        ref={ref}
-      />
+      <MiniCertificate document={document} type={type} certType="adr" />
     </div>
   );
 });

client/src/components/documents/driver-card/card/back/index.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+import QRCode from "react-qr-code";
+
+const DriverCardBack = ({ document }) => {
+  const { to, id } = document;
+
+  return (
+    <div className={`w-[2480px] h-[3498px] flex justify-center mt-[10px]`}>
+      <div className="w-[1600px] h-[1000px] border-[6px] border-gray-400 mt-[10px] rounded-[50px] bg-silkBack bg-cover bg-no-repeat text-center px-[30px]">
+        <p className="text-[45px] mt-[20px]">DRIVER QUALIFICATION CARD</p>
+        <div className="flex justify-between p-[30px]">
+          <div>
+            <div className="text-[45px] text-left mt-[30px] flex flex-col gap-[15px]">
+              <p>1.Номер сертификата</p>
+              <p>2.Имя</p>
+              <p>3.Фамилия</p>
+              <p>4.Дата рождения</p>
+              <p>5.Oтчество</p>
+              <p>7.Категории транспортных средств</p>
+              <p>8.Страна выдачи</p>
+              <p>9.Организация-эмитент</p>
+            </div>
+            <QRCode
+              className="mb-[20px] mt-[30px]"
+              value={`https://www.xalqarologistika.uz/check-certificates/${id}`}
+            />
+          </div>
+          <div className="text-[45px]">
+            <table className="border-2 border-black">
+              <tr>
+                <th className="px-[30px] border-2 border-black">
+                  Category <br /> Категории
+                </th>
+                <th className="px-[30px] border-2 border-black">
+                  Until <br /> До
+                </th>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">C1</td>
+                <td className="px-[30px] border-2 border-black"></td>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">C</td>
+                <td className="px-[30px] border-2 border-black">{to}</td>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">D1</td>
+                <td className="px-[30px] border-2 border-black"></td>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">D</td>
+                <td className="px-[30px] border-2 border-black"></td>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">C1E</td>
+                <td className="px-[30px] border-2 border-black"></td>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">CE</td>
+                <td className="px-[30px] border-2 border-black">{to}</td>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">D1E</td>
+                <td className="px-[30px] border-2 border-black"></td>
+              </tr>
+              <tr>
+                <td className="px-[30px] border-2 border-black">DE</td>
+                <td className="px-[30px] border-2 border-black"></td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DriverCardBack;

client/src/components/documents/driver-card/card/front/index.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import flag from "@assets/images/flag.png";
+
+const DriverCardFront = ({ document }) => {
+  const { name, surname, to, birthDate, id, signature, driverLicenceNumber } =
+    document;
+  console.log(document);
+  return (
+    <div className={`w-[2480px] h-[3508px] flex justify-center mt-[10px]`}>
+      <div className="w-[1600px] h-[1000px] border-[6px] border-gray-400 mt-[10px] rounded-[50px] bg-silk bg-cover bg-no-repeat text-center px-[30px]">
+        <p className="text-[48px] font-bold mt-[30px]">
+          CERTIFICATE OF PROFESSIONAL COMPETENCE OF THE DRIVER
+        </p>
+        <p className="text-[45px] mt-[20px]">DRIVER QUALIFICATION CARD</p>
+        <div className="flex justify-between items-center mt-[50px] px-[60px]">
+          <div className="text-[60px] py-[15px] px-[40px] border-[6px] border-black rounded-[100%]">
+            UZ
+          </div>
+          <p className="text-[50px] font-bold ml-[-200px]">1.Nr. {id}</p>
+          <img src={flag} alt="NT2022" className="w-[200px]" />
+        </div>
+        <div className="h-[570px] flex items-center mt-[60px] gap-[40px]">
+          <div className="h-full aspect-[3/4] bg-white border-[2px] border-black"></div>
+          <div className="h-full bg-blue  font-bold text-left text-[43px] flex flex-col flex-1 gap-[10px]">
+            <p>2.{name}</p>
+            <p>3.{surname}</p>
+            <p>4.{birthDate}</p>
+            <p>5.{driverLicenceNumber}</p>
+            <p>7.C/CE</p>
+            <p>8.REPUBLIC OF UZBEKISTAN</p>
+            <p>9.NAMANGANTRANS 2022</p>
+            <p>Until (date) {to}</p>
+            <div className="w-[300px] h-[100px] bg-white border-[2px] border-black">
+              <img
+                width={"100%"}
+                height={"80%"}
+                src={signature}
+                alt=""
+                className="scale-[0.7]"
+              />
+            </div>
+          </div>
+          <div className="h-full flex flex-col items-end justify-end">
+            <div className="bg-blue-500 text-white text-[35px] py-[20px] px-[40px] flex items-center justify-center rounded-ee-[30px] rounded-ss-[30px] mb-[500px] mr-[55px]">
+              NT2022
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DriverCardFront;

client/src/components/documents/driver-card/index.jsx

@@ -0,0 +1,14 @@
+import { forwardRef } from "react";
+import DriverCardFront from "./card/front";
+import DriverCardBack from "./card/back";
+
+const DriverCertificateCard = forwardRef(({ document, type }, ref) => {
+  return (
+    <div ref={ref}>
+      <DriverCardFront document={document} type={type} />
+      <DriverCardBack document={document} type={type} />
+    </div>
+  );
+});
+
+export default DriverCertificateCard;

client/src/components/documents/driver/index.jsx

@@ -5,9 +5,9 @@ import MiniCertificate from "./mini";
 const DriverCertificate = forwardRef(({ document, type }, ref) => {
   return (
     <div ref={ref}>
-      <DriverCertificateTop document={document} type={type} ref={ref} />
-      <DriverCertificateBottom document={document} type={type} ref={ref} />
-      <MiniCertificate document={document} type={type} ref={ref} />
+      <DriverCertificateTop document={document} type={type} />
+      <DriverCertificateBottom document={document} type={type} />
+      <MiniCertificate document={document} type={type} />
     </div>
   );
 });

client/src/components/table/index.jsx

@@ -18,6 +18,7 @@ import Edit from "@routes/sub-routes/edit";
 import { deleteDocumentThunk } from "@thunks/documents-thunks";
 import { updateUI } from "@helpers/update-ui";
 import { useNavigate } from "react-router-dom";
+import DriverCertificateCard from "../documents/driver-card";
 
 const DocumentsTable = ({ data, loading, type }) => {
   const [editingDocumentId, setEditingDocumentId] = useState(null);
@@ -80,6 +81,12 @@ const DocumentsTable = ({ data, loading, type }) => {
       key: "birthDate",
       width: "10%",
     },
+    {
+      title: "Haydovchilik guvohnomasi raqami",
+      dataIndex: "driverLicenceNumber",
+      key: "driverLicenceNumber",
+      width: "10%",
+    },
     {
       title: "Berilgan sana",
       dataIndex: "from",
@@ -175,11 +182,17 @@ const DocumentsTable = ({ data, loading, type }) => {
       <div className="hidden w-0 h-0">
         {document && (
           <>
-            {SIMILAR_DOCUMENT_TYPES.DRIVER.includes(type) ? (
+            {SIMILAR_DOCUMENT_TYPES.DRIVER.includes(type) && (
               <DriverCertificate document={document} ref={printFrame} />
-            ) : (
+            )}
+
+            {SIMILAR_DOCUMENT_TYPES.ADR.includes(type) && (
               <AdrCertificate document={document} ref={printFrame} />
             )}
+
+            {SIMILAR_DOCUMENT_TYPES.DRIVER_CARD.includes(type) && (
+              <DriverCertificateCard document={document} ref={printFrame} />
+            )}
           </>
         )}
       </div>

client/src/constants/document/index.js

@@ -1,5 +1,6 @@
 export const DOCUMENT_TYPES = {
   DRIVER: "driver",
+  DRIVER_CARD: "drivercard",
   MANAGER: "manager",
   ADR: "adr",
   ADR_TANK: "adr_tank",
@@ -8,9 +9,14 @@ export const DOCUMENT_TYPES = {
 export const SIMILAR_DOCUMENT_TYPES = {
   DRIVER: ["driver", "manager"],
   ADR: ["adr", "adr-tank"],
+  DRIVER_CARD: ["drivercard"],
 };
 
 export const DOCUMENT_TYPES_LIST = [
+  {
+    key: "drivercard",
+    label: "Haydovchi sertifikat (kartochka)",
+  },
   {
     key: "driver",
     label: "Haydovchi sertifikat",

client/src/helpers/update-ui.js

@@ -7,6 +7,8 @@ import {
 
 export const updateUI = (type) => {
   switch (type) {
+    case "drivercard":
+      return fetchDriverDocumentsThunk({ endpoint: type });
     case "driver":
       return fetchDriverDocumentsThunk({ endpoint: type });
     case "adr":

client/src/routes/index.jsx

@@ -22,10 +22,11 @@ const index = () => {
       <Route path="admin" element={<Private />}>
         <Route index path="" element={<Create />} />
         <Route path="manage-certificate" element={<ManageCertificates />}>
-          <Route index path="" element={<Certificates />} />
+          <Route path="driver" element={<Certificates />} />
           <Route path="adr" element={<Adr />} />
           <Route path="manager" element={<Manager />} />
           <Route path="adr-tank" element={<AdrTank />} />
+          <Route path="drivercard" element={<Certificates />} />
         </Route>
         <Route path="status" element={<Status />}>
           <Route path=":id" element={<Details />} />

client/src/routes/search/Search.jsx

@@ -12,6 +12,7 @@ import DriverCertificate from "@/components/documents/driver";
 import AdrCertificate from "@/components/documents/adr";
 import { Watermark } from "antd";
 import { checkCertificateStatus } from "@/helpers/check-certificate-status";
+import DriverCertificateCard from "@/components/documents/driver-card";
 
 const Search = () => {
   const [isCertificateValid, setIsCertificateValid] = useState(null);
@@ -46,7 +47,10 @@ const Search = () => {
               <div
                 className={`w-full h-full absolute top-0 left-0 z-10 ${!isCertificateValid ? "backdrop-blur-[20px]" : ""}`}
               ></div>
-              {document.id?.startsWith("D") || document.id?.startsWith("M") ? (
+              {document.id?.startsWith("DC") ? (
+                <DriverCertificateCard document={document} type={"search"} />
+              ) : document.id?.startsWith("D") ||
+                document.id?.startsWith("M") ? (
                 <DriverCertificate document={document} type={"search"} />
               ) : (
                 <AdrCertificate document={document} type={"search"} />

client/src/routes/sub-routes/create/Create.jsx

@@ -10,20 +10,17 @@ import {
   SaveOutlined,
 } from "@ant-design/icons";
 import { useEffect, useState } from "react";
-import { convertToValueLabel } from "@/helpers/formItems";
-import { DOCUMENT_TYPES_LIST } from "@/constants/document";
+import { convertToValueLabel } from "@helpers/formItems";
+import { DOCUMENT_TYPES_LIST } from "@constants/document";
 import CreateForm from "./form";
 import { useDispatch, useSelector } from "react-redux";
-import {
-  getDocumentId,
-  getDocumentsLoading,
-} from "@/redux/selectors/documents";
-import { fetchDocumentIdThunk } from "@/redux/thunks/documents-thunks";
+import { getDocumentId, getDocumentsLoading } from "@selectors/documents";
+import { fetchDocumentIdThunk } from "@thunks/documents-thunks";
 import SaveAndCheck from "./save-and-check";
 import {
   getDataFromLocalStorage,
   setDataToLocalStorage,
-} from "@/helpers/localStorageActions";
+} from "@helpers/localStorageActions";
 
 const { Title } = Typography;
 
@@ -92,7 +89,7 @@ const Create = () => {
           <Select
             value={documentType}
             onChange={(value) => setDocumentType(value)}
-            className="w-[200px]"
+            className="w-[300px]"
             defaultValue={DOCUMENT_TYPES_LIST[0].key}
             options={convertToValueLabel(DOCUMENT_TYPES_LIST, "key", "label")}
           />{" "}
@@ -115,7 +112,11 @@ const Create = () => {
 
       <div className="flex flex-1 flex-col">
         {current === 0 && (
-          <CreateForm document={document} setDocument={setDocument} />
+          <CreateForm
+            document={document}
+            documentType={documentType}
+            setDocument={setDocument}
+          />
         )}
         {current === 1 && (
           <SaveAndCheck