dashboard design and functionality and data and page doctor and clinic change data

app/blog/[slug]/page.js

@@ -1,6 +1,5 @@
 import axios from "axios";
 import BlogPage from "@/components/blog";
-import articles from "@/data/articles.json";
 import Layout from "@/components/layout/StLayout";
 
 async function Blog({ params: { slug } }) {
@@ -11,7 +10,6 @@ async function Blog({ params: { slug } }) {
 
   const resBlog = blog.data;
   const resBlogs = blogs.data;
-  console.log(resBlogs);
 
   return (
     <Layout>

app/component/EditField.js

@@ -20,7 +20,7 @@ function EditField({
       <TextField
         {...props}
         rows={multiline}
-        value={data?.value}
+        value={data?.value || ""}
         multiline={multiline}
         type={type || "text"}
         placeholder={placeholder || ""}

app/component/element/AutoSelector.js

@@ -17,7 +17,7 @@ function AutoSelector({
       disablePortal
       options={list}
       disabled={disabled}
-      defaultValue={value}
+      defaultValue={value || ""}
       ListboxProps={listboxProps}
       getOptionLabel={(option) => {
         if (typeof option === "string") return option;

app/dashboard/page.js

@@ -2,6 +2,7 @@ import Content from "@/components/dashboard/Content";
 import { defineAbilitiesFor } from "@/lib/ability";
 import { getUser } from "@/lib/auth";
 import { getStateInfo } from "@/lib/getStateInfo";
+import axios from "axios";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -11,6 +12,16 @@ export default async function Dashboard() {
   const ability = defineAbilitiesFor(user);
   const cookieStore = cookies();
   const token = cookieStore.get("access_token");
+  const uuid = "9ef7c050-6e81-4aa2-8248-283a16635624";
+  const response = await axios.get(
+    `https://back-dev.clinic-pro.ir/api/v1/user-profile/9ef7c050-6e81-4aa2-8248-283a16635624`,
+    {
+      headers: {
+        Authorization: `Bearer ${token.value}`,
+      },
+    }
+  );
+  const dashboard = response.data;
 
   if (!ability.can("access", "Dashboard")) {
     return redirect("/");
@@ -21,8 +32,9 @@ export default async function Dashboard() {
 
   return (
     <Content
-      matchedCity={matchedCity}
       logged={token}
+      dataUser={dashboard}
+      matchedCity={matchedCity}
       initialTurnsDetails={isMobile}
     />
   );

components/dashboard/Content.js

@@ -6,10 +6,11 @@ import userData from "@/data/userData.json";
 import DashboardPage from "@/components/dashboard";
 import UserAccountPage from "./userAccount";
 
-function Content({ matchedCity, logged, initialIsOpenSide }) {
+function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
   const [value, setValue] = useState(0);
   const [isOpenSide, setIsOpenSide] = useState(initialIsOpenSide);
   const [isTurnsDetails, setIsTurnsDetails] = useState(false);
+  console.log(dataUser);
 
   return (
     <DashboardPage
@@ -25,6 +26,7 @@ function Content({ matchedCity, logged, initialIsOpenSide }) {
     >
       <UserAccountPage
         value={value}
+        dataUser={dataUser}
         setValue={setValue}
         user={userData.data}
         isOpenSide={isOpenSide}

components/dashboard/userAccount/detailUser/index.js

@@ -21,7 +21,7 @@ const listTab = [
   "بستگان",
 ];
 
-function DetailUser({ user, isTurnsDetails, setIsTurnsDetails }) {
+function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
   const [tab, setTab] = useState(0);
   const [data, setData] = useState(profileData[0]);
   const [includeData, setIncludeData] = useState(false);
@@ -56,6 +56,7 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails }) {
   const components = [
     <Information
       user={user}
+      dataUser={dataUser}
       isTurnsDetails={isTurnsDetails}
       setIsTurnsDetails={setIsTurnsDetails}
     />,

components/dashboard/userAccount/detailUser/information/Form.js

@@ -1,6 +1,5 @@
 import Content from "./Content";
 import EditField from "@/app/component/EditField";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import DateBirthday from "./DateBirthday";
 import {
   insurance,
@@ -10,8 +9,11 @@ import {
   education,
   job,
 } from "./listSelector";
+import AutoSelector from "@/app/component/element/AutoSelector";
+
+function Form({ data, changeData, selected, updateSelect }) {
+  const findVal = (list, name) => list.find((g) => g.id === selected[name]);
 
-function Form({ data, changeData, updateSelect }) {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
       <Content title="شماره موبایل" isConfirmed={true}>
@@ -44,8 +46,11 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="جنسیت">
-        <AutoCompleteSelect
+        <AutoSelector
-          updateData={updateSelect}
+          updateData={(name, data) =>
+            updateSelect(name, data === "زن" ? "female" : "male")
+          }
+          value={findVal(gender, "gender")}
           label="جنسیت"
           name="gender"
           list={gender}
@@ -68,8 +73,9 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="نوع بیمه">
-        <AutoCompleteSelect
+        <AutoSelector
           updateData={updateSelect}
+          value={findVal(insurance, "insurance")}
           label="نوع بیمه"
           name="insurance"
           list={insurance}
@@ -86,16 +92,22 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="گروه خونی">
-        <AutoCompleteSelect
+        <AutoSelector
-          updateData={updateSelect}
+          updateData={(name, value) =>
+            updateSelect(name, blood_group.find((g) => g.label === value).id)
+          }
+          value={findVal(blood_group, "blood_group")}
           label="گروه خونی"
           name="blood_group"
           list={blood_group}
         />
       </Content>
       <Content title="وضعیت تاهل">
-        <AutoCompleteSelect
+        <AutoSelector
-          updateData={updateSelect}
+          updateData={(name, value) =>
+            updateSelect(name, marital_status.find((g) => g.label === value).id)
+          }
+          value={findVal(marital_status, "marital_status")}
           label="وضعیت تاهل"
           name="marital_status"
           list={marital_status}
@@ -112,16 +124,22 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="تحصیلات">
-        <AutoCompleteSelect
+        <AutoSelector
-          updateData={updateSelect}
+          updateData={(name, value) =>
+            updateSelect(name, education.find((g) => g.label === value).id)
+          }
+          value={findVal(education, "education")}
           label="تحصیلات"
           name="education"
           list={education}
         />
       </Content>
       <Content title="شغل">
-        <AutoCompleteSelect
+        <AutoSelector
-          updateData={updateSelect}
+          updateData={(name, value) =>
+            updateSelect(name, job.find((g) => g.label === value).id)
+          }
+          value={findVal(job, "job")}
           label="شغل"
           name="job"
           list={job}

components/dashboard/userAccount/detailUser/information/index.js

@@ -3,27 +3,29 @@ import Form from "./Form";
 import { Button } from "@mui/material";
 import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
 
-function Information({ user }) {
+function Information({ user, dataUser }) {
+  const [disable, setDisable] = useState(true);
   const [data, setData] = useState({
-    phone: { value: user.phone, isEdit: true },
+    phone: { value: dataUser.work_phone, isEdit: true },
-    national_code: { value: user.national_code, isEdit: true },
+    national_code: { value: dataUser.national_code, isEdit: true },
-    name: { value: user.name, isEdit: true },
+    name: { value: dataUser.name, isEdit: true },
-    date_of_birth: { value: user.date_of_birth, isEdit: true },
+    date_of_birth: { value: dataUser.birthday, isEdit: true },
-    father_name: { value: user.father_name, isEdit: true },
+    father_name: { value: dataUser.fathers_name, isEdit: true },
-    insurance_number: { value: user.insurance_number, isEdit: true },
+    insurance_number: { value: dataUser.supplementary_insurance, isEdit: true },
-    home_phone: { value: user.home_phone, isEdit: true },
+    home_phone: { value: dataUser.home_phone, isEdit: true },
     work_phone: { value: user.work_phone, isEdit: true },
   });
   const [selected, setSelected] = useState({
-    gender: "",
+    gender: dataUser.gender,
-    blood_group: "",
+    blood_group: dataUser.blood_type,
-    insurance: "",
+    insurance: dataUser.supplementary_insurance,
-    marital_status: "",
+    marital_status: dataUser.marital_status,
-    education: "",
+    education: dataUser.education,
-    job: "",
+    job: dataUser.job,
   });
 
-  const changeData = (value, type, name) =>
+  const changeData = (value, type, name) => {
+    disable && setDisable(false);
     setData({
       ...data,
       [name]: {
@@ -31,17 +33,28 @@ function Information({ user }) {
         [type]: value,
       },
     });
+  };
 
-  const updateSelect = (event, name) =>
+  const updateSelect = (name, event) => {
+    disable && setDisable(false);
     setSelected({ ...selected, [name]: event });
+  };
 
   return (
     <div className="opacity-page">
-      <Form data={data} changeData={changeData} updateSelect={updateSelect} />
+      <Form
+        data={data}
+        changeData={changeData}
+        selected={selected}
+        updateSelect={updateSelect}
+      />
       <Button
-        className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
+        disabled={disable}
-                !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
+        variant="contained"
-                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
+        className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
+                 !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
+                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
+              ${disable ? "" : "!bg-[#5559CE]"}`}
       >
         ثبت اطلاعات
         <ArrowLeftWhiteD />

components/dashboard/userAccount/detailUser/information/listSelector.js

@@ -1,30 +1,35 @@
 export const gender = [
-  { label: "مرد", id: 10 },
+  { label: "مرد", id: "male" },
-  { label: "زن", id: 20 },
+  { label: "زن", id: "female" },
 ];
 
 export const blood_group = [
-  { label: "A+", id: 10 },
+  { label: "A+", id: "a_positive" },
-  { label: "B+", id: 20 },
+  { label: "A-", id: "a_negative" },
-  { label: "AB", id: 30 },
+  { label: "B+", id: "b_positive" },
-  { label: "O+", id: 40 },
+  { label: "B-", id: "b_negative" },
+  { label: "O+", id: "o_positive" },
+  { label: "O-", id: "o_negative" },
+  { label: "AB+", id: "ab_positive" },
+  { label: "AB-", id: "ab_negative" },
 ];
 
 export const marital_status = [
-  { label: "متاهل", id: 10 },
+  { label: "متاهل", id: "married" },
-  { label: "مجرد", id: 20 },
+  { label: "مجرد", id: "single" },
 ];
 
 export const education = [
-  { label: "دیپلم", id: 10 },
+  { label: "دیپلم", id: "diploma" },
-  { label: "فوق دیپلم", id: 20 },
+  { label: "دیپلم تحصیلات تکمیلی", id: "postgraduate_diploma" },
-  { label: "لیسانس", id: 30 },
+  { label: "لیسانس", id: "bachelor_s_degree" },
-  { label: "کارشناسی ارشد", id: 40 },
+  { label: "کارشناسی ارشد", id: "master_s_degree" },
+  { label: "دکترا", id: "doctorate" },
 ];
 
 export const job = [
-  { label: "آزاد", id: 10 },
+  { label: "آزاد", id: "azad" },
-  { label: "دولتی", id: 20 },
+  { label: "دولتی", id: "dolati" },
 ];
 
 export const insurance = [

components/dashboard/userAccount/index.js

@@ -29,10 +29,12 @@ function UserAccountPage({
   setValue,
   isOpenSide,
   setIsOpenSide,
+  dataUser,
 }) {
   const sidebars = [
     <DetailUser
       user={user}
+      dataUser={dataUser}
       isTurnsDetails={isTurnsDetails}
       setIsTurnsDetails={setIsTurnsDetails}
     />,

components/doctor/detailDoctor/List.js

@@ -0,0 +1,83 @@
+import { useRef } from "react";
+
+// Icons
+import CopyBlueD from "@/components/icons/CopyBlueD";
+import DownloadBlue from "@/components/icons/DownloadBlue";
+import WhatsappBlueD from "@/components/icons/WhatsappBlueD";
+import TelegramBlueD from "@/components/icons/TelegramBlueD";
+import LinkedingBlueD from "@/components/icons/LinkedingBlueD";
+
+// Packages
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { Button } from "@mui/material";
+
+function List({ hiddenRef }) {
+  const handleDownloadPDF = async () => {
+    const element = hiddenRef.current;
+    if (!element) return;
+
+    const canvas = await html2canvas(element, {
+      backgroundColor: "#ffffff",
+      useCORS: true,
+      scale: 2,
+    });
+
+    const imgData = canvas.toDataURL("image/png");
+
+    const imgWidth = 210;
+    const imgProps = canvas;
+    const pxPerMm = imgProps.width / imgWidth;
+    const imgHeight = canvas.height / pxPerMm;
+
+    const pdf = new jsPDF({
+      orientation: "portrait",
+      unit: "mm",
+      format: [imgWidth, imgHeight],
+    });
+
+    pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
+    pdf.save("poster.pdf");
+  };
+
+  const listIcons = [
+    { name: "واتساپ", icon: <WhatsappBlueD /> },
+    { name: "تلگرام", icon: <TelegramBlueD /> },
+    { name: "لینکدین", icon: <LinkedingBlueD /> },
+    { name: "کپی لینک", icon: <CopyBlueD /> },
+    { name: "دانلود", icon: <DownloadBlue /> },
+  ];
+
+  return (
+    <>
+      <ul className="flex items-center mx-[60px] sm:mx-[86px] md:mx-[112px] lg:mx-[140px] justify-center mt-[8px] md:mt-[12px] lg:mt-[16px] gap-[24px] sm:gap-[26px] md:gap-[29px] lg:gap-[32px]">
+        {listIcons.map((item, idx) => (
+          <li
+            key={idx}
+            className="flex flex-col justify-center items-center w-fit gap-[2px]"
+          >
+            <Button
+              className="
+                    !p-[0px] !bg-[#EAECFA] !rounded-full !min-w-0 grid place-items-center
+                    !w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
+                    !h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
+                  "
+              onClick={handleDownloadPDF}
+              variant="text"
+            >
+              <div
+                className="grid place-items-center w-full-icon
+                                        !w-[16px] md:!w-[17px] lg:!w-[18px]
+                                        !h-[16px] md:!h-[17px] lg:!h-[18px]"
+              >
+                {item.icon}
+              </div>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export default List;

components/doctor/detailDoctor/Share.js

@@ -1,27 +1,18 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { styleDefault } from "@/mui";
 import ShareDI from "@/components/icons/ShareDI";
 import { Box, Button, Modal } from "@mui/material";
 
 // Icons
-import CopyBlueD from "@/components/icons/CopyBlueD";
 import CloseModalD from "@/components/icons/CloseModalD";
-import WhatsappBlueD from "@/components/icons/WhatsappBlueD";
+import List from "./List";
-import TelegramBlueD from "@/components/icons/TelegramBlueD";
+import Poster from "../poster";
-import LinkedingBlueD from "@/components/icons/LinkedingBlueD";
 
-const listIcons = [
+function Share({ data }) {
-  { name: "واتساپ", icon: <WhatsappBlueD /> },
+  const hiddenRef = useRef();
-  { name: "تلگرام", icon: <TelegramBlueD /> },
-  { name: "لینکدین", icon: <LinkedingBlueD /> },
-  { name: "کپی لینک", icon: <CopyBlueD /> },
-  { name: "دانلود", icon: <CopyBlueD /> },
-];
-
-function Share() {
   const [open, setOpen] = useState(false);
 
   const handleOpen = () => setOpen(true);
@@ -37,12 +28,17 @@ function Share() {
         <ShareDI />
         <p className="hidden lg:flex">اشتراک گذاری</p>
       </Button>
+      <div className="fixed top-0 left-0 opacity-0 pointer-events-none -z-10">
+        <div ref={hiddenRef}>
+          <Poster data={data} />
+        </div>
+      </div>
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}
-          className="!pt-[12px] md:!pt-[14px] lg:!py-[16px]
+          className="!pt-[12px] md:!pt-[14px] lg:!py-[16px] !overflow-hidden
                     !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px]
-                    !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] !rounded-[8px] overflow-hidden"
+                    !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] !rounded-[8px]"
         >
           <div className="flex items-center justify-between w-full">
             <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
@@ -60,31 +56,7 @@ function Share() {
           <p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">
             شما می توانید این پزشک را با دیگران به اشتراک بگذارید:
           </p>
-          <ul className="flex items-center mx-[60px] sm:mx-[86px] md:mx-[112px] lg:mx-[140px] justify-center mt-[8px] md:mt-[12px] lg:mt-[16px] gap-[24px] sm:gap-[26px] md:gap-[29px] lg:gap-[32px]">
+          <List data={data} hiddenRef={hiddenRef} />
-            {listIcons.map((item, idx) => (
-              <li
-                key={idx}
-                className="flex flex-col justify-center items-center w-fit gap-[2px]"
-              >
-                <Button
-                  className="
-                                        !p-[0px] !bg-[#EAECFA] !rounded-full !min-w-0 grid place-items-center
-                                        !w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
-                                        !h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
-                                    "
-                  variant="text"
-                >
-                  <div
-                    className="grid place-items-center w-full-icon
-                                        !w-[16px] md:!w-[17px] lg:!w-[18px]
-                                        !h-[16px] md:!h-[17px] lg:!h-[18px]"
-                  >
-                    {item.icon}
-                  </div>
-                </Button>
-              </li>
-            ))}
-          </ul>
         </Box>
       </Modal>
     </div>

components/doctor/detailDoctor/index.js

@@ -9,7 +9,7 @@ function DetailDoctor({ doctor }) {
   return (
     <div className="w-full lg:w-[59%]">
       <div className="hidden lg:flex">
-        <Share />
+        <Share data={doctor} />
       </div>
       <Title doctor={doctor} />
       <Link />

components/icons/DownloadBlue.js

@@ -0,0 +1,35 @@
+function DownloadBlue() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M16.4405 8.89999C20.0405 9.20999 21.5105 11.06 21.5105 15.11V15.24C21.5105 19.71 19.7205 21.5 15.2505 21.5H8.74047C4.27047 21.5 2.48047 19.71 2.48047 15.24V15.11C2.48047 11.09 3.93047 9.23999 7.47047 8.90999"
+        stroke="#5559CE"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 2V14.88"
+        stroke="#5559CE"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.3484 12.65L11.9984 16L8.64844 12.65"
+        stroke="#5559CE"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default DownloadBlue;

components/register/verificationPage/SendReq.js

@@ -32,6 +32,13 @@ function SendReq({
       secure: true,
       sameSite: "strict",
     });
+
+    Cookies.set("uuid", uuid, {
+      expires: refreshTokenExpires,
+      path: "/",
+      secure: true,
+      sameSite: "strict",
+    });
   };
 
   const handleReq = async () => {

package-lock.json

@@ -25,10 +25,12 @@
         "axios": "^1.7.7",
         "date-fns": "^3.6.0",
         "dayjs": "^1.11.13",
+        "html2canvas": "^1.4.1",
         "i": "^0.3.7",
         "jalaali-react-date-picker": "^1.0.18",
         "jalali-moment": "^3.3.11",
         "js-cookie": "^3.0.5",
+        "jspdf": "^3.0.1",
         "next": "^14.2.20",
         "next-themes": "^0.3.0",
         "npm": "^10.8.2",
@@ -5730,6 +5732,13 @@
       "integrity": "sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==",
       "license": "MIT"
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
@@ -6835,6 +6844,18 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -7156,6 +7177,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -7360,6 +7390,18 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -7550,6 +7592,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -8224,6 +8286,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -9179,6 +9250,16 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -10471,6 +10552,12 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -11536,6 +11623,19 @@
         }
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -13830,6 +13930,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jspdf": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
+      "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jss": {
       "version": "10.10.0",
       "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
@@ -19538,12 +19656,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/react-app-polyfill/node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "license": "MIT"
-    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -19950,6 +20062,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT"
+    },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
@@ -20233,6 +20351,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -21115,6 +21243,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
@@ -21805,6 +21943,16 @@
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "license": "MIT"
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -22173,6 +22321,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -22717,6 +22874,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",

package.json

@@ -26,10 +26,12 @@
     "axios": "^1.7.7",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.13",
+    "html2canvas": "^1.4.1",
     "i": "^0.3.7",
     "jalaali-react-date-picker": "^1.0.18",
     "jalali-moment": "^3.3.11",
     "js-cookie": "^3.0.5",
+    "jspdf": "^3.0.1",
     "next": "^14.2.20",
     "next-themes": "^0.3.0",
     "npm": "^10.8.2",

utils/index.js

@@ -3,6 +3,7 @@ import Cookies from "js-cookie";
 const removeToken = () => {
   Cookies.remove("access_token", { path: "/" });
   Cookies.remove("refresh_token", { path: "/" });
+  Cookies.remove("uuid", { path: "/" });
 };
 
 export { removeToken };