handle download poster and qrcode, fix to show timestamp, add pagination to doctors page

app/component/ItemDoctor.js

@@ -4,7 +4,6 @@ import Link from "next/link";
 import CustomLoading from "./loading/Custom";
 import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
-import moment from "moment-jalaali";
 
 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -13,9 +12,7 @@ import LikeD from "@/components/icons/LikeD";
 import PointD from "@/components/icons/PointD";
 import { convertTimestampToPersianDateSimple } from "@/helper";
 
-moment.loadPersian({ dialect: "persian-modern" });
+function ItemDoctor({ doctor, loading, setDoctors }) {
-
-function ItemDoctor({ doctor, setDoctors }) {
   const handleLoading = () => {
     setDoctors((prevDoctors) =>
       prevDoctors.map((item) =>
@@ -30,24 +27,24 @@ function ItemDoctor({ doctor, setDoctors }) {
     <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
       {/* Detail Doctor */}
       <div className="flex items-center justify-start gap-2.5">
-        <CircularLoading width={66} height={66}>
+        <CircularLoading loading={loading} width={66} height={66}>
           <Image
             width={72}
             height={72}
             alt="image-doctor"
-            src={doctor?.img[0]?.url}
+            src={doctor?.img && doctor?.img[0]?.url}
             className="object-contain rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
-          <TextLoading width={90} height={15}>
+          <TextLoading loading={loading} width={90} height={15}>
             <Link href={`/doctor/${doctor?.uuid}`}>
               <p className="text-[#3B3B3B] text-[14px] font-bold">
                 {doctor?.name}
               </p>
             </Link>
           </TextLoading>
-          <TextLoading width={120} height={15}>
+          <TextLoading loading={loading} width={120} height={15}>
             <p className="text-[#616161] text-[14px] font-normal">
               تخصص:
               {doctor?.specialties?.map(
@@ -56,7 +53,7 @@ function ItemDoctor({ doctor, setDoctors }) {
               )}
             </p>
           </TextLoading>
-          <CustomLoading width={100} height={25}>
+          <CustomLoading loading={loading} width={100} height={25}>
             <div className="flex rounded items-center justify-start gap-2">
               <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                 <LikeD />
@@ -78,13 +75,13 @@ function ItemDoctor({ doctor, setDoctors }) {
       {/* Hours of work */}
       <div className="flex my-4 items-center justify-start gap-0.5">
         <ClockD />
-        <TextLoading width={150} height={15}>
+        <TextLoading loading={loading} width={150} height={15}>
           <p className="text-[#7E7E7E] text-[12px] font-normal">
             ساعت کاری: {doctor?.hours_of_work}
           </p>
         </TextLoading>
       </div>
-      <CustomLoading width={150} height={20}>
+      <CustomLoading loading={loading} width={150} height={20}>
         <p
           className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                     ${

app/doctors/page.js

@@ -26,11 +26,10 @@ async function Doctors({ searchParams }) {
 
     const params = buildDoctorParams(newSearchParams);
 
-
     const response = await axios.get(`${API_URL}/api/v1/doctors`, {
       params,
     });
-    doctors = response.data.data;
+    doctors = response.data;
   } catch (error) {
     console.error("Error fetching doctors:", error);
   }

components/clinics/head/SearchBar.js

@@ -13,6 +13,7 @@ import { request } from "@/services/response";
 function SearchBar({
   state,
   limit,
+  setPage,
   selected,
   specialties,
   setSelected,
@@ -63,6 +64,7 @@ function SearchBar({
         limit={limit}
         state={state}
         setOpen={setOpen}
+        setPage={setPage}
         selected={selected}
         filterData={filterData}
         setSelected={setSelected}
@@ -71,9 +73,9 @@ function SearchBar({
       </ModalSearchCity>
       <AutoSearch
         data={specialties}
-        inputValue={selected.specialty}
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
+        inputValue={selected.specialty}
       />
       <FilterButton limit={limit} selected={selected} filterData={filterData} />
     </ButtonGroup>

components/clinics/head/filter/index.js

@@ -14,6 +14,7 @@ function ModalSearchCity({
   open,
   state,
   limit,
+  setPage,
   setOpen,
   children,
   selected,
@@ -50,7 +51,9 @@ function ModalSearchCity({
     if (name === "province") {
       setSelected({ ...selected, province: event, city: "" });
       searchParams.set("state", event?.name);
-      searchParams.delete("city", selected.city?.name);
+      searchParams.delete("city");
+      searchParams.delete("page");
+      setPage(1);
     } else {
       setSelected({ ...selected, [name]: event });
       searchParams.set("city", event?.name);

components/clinics/index.js

@@ -14,6 +14,7 @@ import cities from "@/data/city.json";
 
 function ClinicsPage({ clinics, matchedCity, matchedState }) {
   const searchParams = useSearchParams();
+  const [page, setPage] = useState(clinics?.page?.currentPage);
   const [filteredClinics, setFilteredClinics] = useState(clinics?.data);
 
   const selectedState = searchParams.get("state") || matchedState?.name;
@@ -38,6 +39,7 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
       >
         <SearchBar
           limit={12}
+          setPage={setPage}
           selected={selected}
           state={matchedState}
           setSelected={setSelected}
@@ -47,9 +49,11 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
       </HeadPageList>
       <List
         limit={12}
+        page={page}
+        setPage={setPage}
         selected={selected}
-        pages={clinics?.page || []}
         clinics={filteredClinics}
+        pages={clinics?.page || []}
         setFilteredClinics={setFilteredClinics}
       />
     </div>

components/clinics/list/index.js

@@ -6,9 +6,16 @@ import PaginationContent from "@/app/component/PaginationContent";
 import { request } from "@/services/response";
 import { useRouter } from "next/navigation";
 
-function List({ limit, selected, clinics, pages, setFilteredClinics }) {
+function List({
+  page,
+  limit,
+  pages,
+  setPage,
+  clinics,
+  selected,
+  setFilteredClinics,
+}) {
   const listPage = ["کلینیک ها", selected?.city?.name || ""];
-  const [page, setPage] = useState(pages?.currentPage);
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
@@ -62,9 +69,6 @@ function List({ limit, selected, clinics, pages, setFilteredClinics }) {
         <PaginationContent
           page={page}
           limit={limit}
-          list={clinics}
-          itemsPerPage={12}
-          setPage={setPage}
           pageDetail={pages}
           changePage={changePage}
         />

components/doctor/appointmentList/ItemAppointment.js

@@ -5,9 +5,7 @@ import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
 import { Button } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
-import moment from "moment-jalaali";
+import { convertTimestampToPersianDateSimple } from "@/helper";
-
-moment.loadPersian({ dialect: "persian-modern" });
 
 function ItemAppointment({ turn, loading }) {
   return (
@@ -48,9 +46,7 @@ function ItemAppointment({ turn, loading }) {
           <TextLoading width={100} height={15} loading={loading}>
             <p className="text-[#05BA58] text-[12px] font-medium">
               {Number(turn?.free_turn)
-                ? `اولین نوبت آزاد: ${moment(turn?.free_turn * 1000).format(
+                ? `اولین نوبت آزاد: ${convertTimestampToPersianDateSimple(turn?.free_turn)}`
-                    "dddd jD jMMMM [ساعت] HH:mm"
-                  )}`
                 : "نوبت ندارد"}
             </p>
           </TextLoading>

components/doctor/detailDoctor/Share.js

@@ -25,8 +25,7 @@ function Share({ data }) {
         <ShareDI />
         <p className="hidden lg:flex">اشتراک گذاری</p>
       </Button>
-      {/* <div className="fixed top-0 left-0 opacity-0 pointer-events-none -z-10"> */}
+      <div className="fixed min-w-[600px] min-h-[700px] w-[600px] h-[700px] top-0 left-0 opacity-0 pointer-events-none -z-10">
-      <div className="">
         <div ref={hiddenRef}>
           <Poster data={data} />
         </div>

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -41,7 +41,7 @@ function AboutDcotor({ doctor }) {
       </div>
       <div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
         <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
-          تخصص ها
+          خدمات
         </p>
         <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
           {doctor?.expertise?.map((item, idx) => (

components/doctor/index.js

@@ -19,7 +19,7 @@ function DoctorPage({ doctor, comments }) {
           </div>
         </CustomLoading>
         <div className="flex lg:hidden">
-          <Share />
+          <Share data={doctor} />
         </div>
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">

components/doctor/poster/QrCode.js

@@ -1,15 +0,0 @@
-import Image from "next/image";
-import CodeSample from "@/public/assets/images/default-qr-code.png";
-
-function QrCode() {
-  return (
-    <div className="flex items-center flex-col justify-center mt-[100%]">
-      <Image className="mt-[100%]" src={CodeSample} width={167} height={167} />
-      <p className="text-[#3987D4] font-semibold text-[16px] mt-[32px]">
-        nobat724/ahwaz.com
-      </p>
-    </div>
-  );
-}
-
-export default QrCode;

components/doctor/poster/QrImg.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import QRCode from "qrcode";
+import { getStateInfoClient } from "@/lib/getStateInfoClient";
+
+export default function QrImg() {
+  const [host, setHost] = useState("");
+  const [qrCodeData, setQrCodeData] = useState("");
+
+  useEffect(() => {
+    const info = getStateInfoClient();
+    const linkHost = info.host;
+    const linkURL = info.fullUrl;
+
+    setHost(linkHost);
+
+    if (linkURL) {
+      QRCode.toDataURL(linkURL).then(setQrCodeData);
+    }
+  }, []);
+
+  return (
+    <div className="flex items-center flex-col justify-center mt-[100%]">
+      {qrCodeData ? (
+        <img src={qrCodeData} width={167} height={167} />
+      ) : (
+        <p>در حال بارگذاری...</p>
+      )}
+      <p className="text-[#3987D4] min-h-[24px] font-semibold text-[16px] mt-[32px]">
+        {host || ""}
+      </p>
+    </div>
+  );
+}

components/doctor/poster/Services.js

@@ -9,7 +9,7 @@ function Services({ data }) {
         <p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
       </div>
       <ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
-        {data?.specialties?.map((item, idx) => (
+        {data?.expertise?.map((item, idx) => (
           <li key={idx} className="flex items-center justify-start gap-[4px]">
             <CircleOrangeSm />
             <p className="text-[16px] font-normal text-[#E7EEF6]">{item.name}</p>

components/doctor/poster/index.js

@@ -4,7 +4,7 @@ import Services from "./Services";
 import Address from "./Address";
 import Telefon from "./Telefon";
 import ImageProfile from "./ImageProfile";
-import QrCode from "./QrCode";
+import QrImg from "./QrImg";
 
 function Poster({ data }) {
   return (
@@ -19,18 +19,18 @@ function Poster({ data }) {
         </p>
         <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold text-right">
           تخصص:
-          {data?.expertise?.map(
+          {data?.specialties?.map(
             (item, idx) =>
-              `${item.name} ${data.expertise.length === idx + 1 ? "" : "|"} `
+              `${item.name} ${data.specialties.length === idx + 1 ? "" : "|"} `
           )}
         </p>
         <Services data={data} />
         <Address data={data} />
         <Telefon data={data} />
       </div>
-      <div className="flex flex-col justify-between items-end">
+      <div className="flex flex-col justify-between items-end min-w-[200px]">
         <ImageProfile data={data} />
-        <QrCode />
+        <QrImg />
       </div>
     </div>
   );

components/doctors/head/index.js

@@ -1,53 +1,14 @@
-import { useState } from "react";
-
 import SearchBar from "../search";
 import SortList from "../sortlist";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
-import specialties from "@/data/specialties.json";
 
 // Data
-import states from "@/data/state.json";
-import cities from "@/data/city.json";
 import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
 import { request } from "@/services/response";
 import FilterLocate from "./FilterLocate";
 
-function Head({ matchedCity, matchedState, setDoctors }) {
+function Head({ filter, setFilter, setPage, setDoctors }) {
-  const searchParams = useSearchParams();
   const router = useRouter();
-  const fieldName = searchParams.get("specialty");
-
-  const findItem = (key, name) =>
-    specialties.find((item) => item[key] === name);
-  const isParent =
-    findItem("name", fieldName) && findItem("name", fieldName).parent;
-
-  const selectedState = searchParams.get("state") || matchedState?.name;
-  const selectedCity =
-    searchParams.get("city") ||
-    (matchedCity?.name && matchedCity?.id !== "600"
-      ? matchedCity?.name
-      : false);
-
-  const valCategory = isParent
-    ? findItem("id", isParent)
-    : findItem("name", fieldName);
-  const valSpecialty = isParent && findItem("name", fieldName);
-
-  const defaultFilter = {
-    state: selectedState && states.find((item) => item.name === selectedState),
-    city: selectedCity && cities.find((item) => item.name === selectedCity),
-    category: valCategory,
-    specialty: valSpecialty,
-    active: searchParams.get("active") || 0,
-    gender: searchParams.get("gender") || "هر دو",
-    degree: searchParams.get("degree") || "همه موارد",
-    sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
-    name:
-      searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
-  };
-
-  const [filter, setFilter] = useState(defaultFilter);
 
   const setDataInURL = (newFilter) => {
     const query = QueryForDoctorsFilter(newFilter);
@@ -74,6 +35,10 @@ function Head({ matchedCity, matchedState, setDoctors }) {
       delete filteredName.name;
     }
 
+    filteredName.page = 1;
+    filteredName.limit = 12;
+    setPage(1);
+
     return request
       .getDoctors(filteredName)
       .then((res) => {
@@ -89,6 +54,7 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
       <FilterLocate
         filter={filter}
+        setPage={setPage}
         sendReq={sendReq}
         setFilter={setFilter}
         setDataInURL={setDataInURL}

components/doctors/index.js

@@ -2,21 +2,70 @@
 
 import { useState } from "react";
 import ListDoctors from "./listDoctors";
-
+import { useSearchParams } from "next/navigation";
-// Data
 import Head from "./head";
+import specialties from "@/data/specialties.json";
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
 
 function DoctorsPage({ matchedCity, matchedState, list }) {
-  const [doctors, setDoctors] = useState(list);
+  const searchParams = useSearchParams();
+  const [page, setPage] = useState(list?.page?.currentPage);
+  const [doctors, setDoctors] = useState(list.data);
+  const fieldName = searchParams.get("specialty");
+
+  const findItem = (key, name) =>
+    specialties.find((item) => item[key] === name);
+  const isParent =
+    findItem("name", fieldName) && findItem("name", fieldName).parent;
+
+  const selectedState = searchParams.get("state") || matchedState?.name;
+  const selectedCity =
+    searchParams.get("city") ||
+    (matchedCity?.name && matchedCity?.id !== "600"
+      ? matchedCity?.name
+      : false);
+
+  const valCategory = isParent
+    ? findItem("id", isParent)
+    : findItem("name", fieldName);
+  const valSpecialty = isParent && findItem("name", fieldName);
+
+  const defaultFilter = {
+    state: selectedState && states.find((item) => item.name === selectedState),
+    city: selectedCity && cities.find((item) => item.name === selectedCity),
+    category: valCategory,
+    specialty: valSpecialty,
+    active: searchParams.get("active") || 0,
+    gender: searchParams.get("gender") || "هر دو",
+    degree: searchParams.get("degree") || "همه موارد",
+    sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
+    name:
+      searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
+  };
+
+  const [filter, setFilter] = useState(defaultFilter);
 
   return (
     <div className="pt-[95px] sm:pt-[120px] padding-responsive">
       <Head
+        limit={12}
+        filter={filter}
+        setPage={setPage}
+        setFilter={setFilter}
         setDoctors={setDoctors}
         matchedCity={matchedCity}
         matchedState={matchedState}
       />
-      <ListDoctors doctors={doctors} setDoctors={setDoctors} />
+      <ListDoctors
+        limit={12}
+        data={list}
+        page={page}
+        filter={filter}
+        setPage={setPage}
+        doctors={doctors}
+        setDoctors={setDoctors}
+      />
     </div>
   );
 }

components/doctors/listDoctors/index.js

@@ -1,8 +1,57 @@
-import doctorList from "@/data/doctors.json";
+import { useState } from "react";
-import Pagination from "@/app/component/Pagination";
 import ItemDoctor from "@/app/component/ItemDoctor";
+import PaginationContent from "@/app/component/PaginationContent";
+import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
+import { request } from "@/services/response";
+import { useRouter } from "next/navigation";
+
+function ListDoctors({
+  data,
+  page,
+  limit,
+  filter,
+  doctors,
+  setPage,
+  setDoctors,
+}) {
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const changePage = (_, num) => {
+    setLoading(true);
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set("page", num);
+    router.push(`?${searchParams.toString()}`);
+
+    setPage(num);
+    let params = {
+      ...QueryForDoctorsReq(filter),
+      page: num,
+      limit,
+    };
+    if (
+      data?.name === data.specialty?.name ||
+      data?.name === data.category?.name
+    ) {
+      params.name = "";
+      delete params.name;
+    }
+
+    console.log(params);
+
+    request
+      .getDoctors(params)
+      .then((res) => {
+        console.log(res);
+
+        if (res.data) setDoctors(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+      .finally(() => setLoading(false));
+  };
 
-function ListDoctors({ doctors, setDoctors }) {
   return (
     <>
       <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
@@ -12,6 +61,7 @@ function ListDoctors({ doctors, setDoctors }) {
               <ItemDoctor
                 key={doctor.id}
                 doctor={doctor}
+                loading={loading}
                 setDoctors={setDoctors}
               />
             ))}
@@ -22,8 +72,13 @@ function ListDoctors({ doctors, setDoctors }) {
           </p>
         )}
       </div>
-      <div className="mt-[56px] flex justify-center">
+      <div className="mt-[48px] flex justify-center">
-        <Pagination list={doctorList} itemsPerPage={12} />
+        <PaginationContent
+          page={page}
+          limit={limit}
+          changePage={changePage}
+          pageDetail={data?.page || []}
+        />
       </div>
     </>
   );

helper/index.js

@@ -260,6 +260,14 @@ export const degreeVal = [
   { name: "پزشک فوق تخصص", val: "subspecialistplus" },
 ];
 
+export const addLabelToList = (list) =>
+  list.map((item) => {
+    return {
+      ...item,
+      label: item.name,
+    };
+  });
+
 export const QueryForDoctorsFilter = (newFilter) => {
   const query = {};
 
@@ -355,50 +363,6 @@ export const QueryForDoctorsReq = (newFilter) => {
   return params;
 };
 
-export const addLabelToList = (list) =>
-  list.map((item) => {
-    return {
-      ...item,
-      label: item.name,
-    };
-  });
-
-export const QueryForClinicsFilter = (searchParams) => {
-  const params = {};
-
-  // 🔹 specialty (find by name in specialties.json)
-  if (searchParams.specialty) {
-    const spec = specialties.find((s) => s.name === searchParams.specialty);
-    if (spec) {
-      params.specialty = spec.id;
-    }
-  }
-
-  // 🔹 city (find by name in city.json)
-  if (searchParams.city) {
-    const cityObj = cities.find((c) => c.name === searchParams.city.name);
-    if (cityObj) {
-      params.city = cityObj.id;
-    }
-  }
-
-  // 🔹 state (find by name in state.json)
-  if (searchParams.province) {
-    const stateObj = states.find((s) => s.name === searchParams.province.name);
-    if (stateObj) {
-      params.state = stateObj.id;
-    }
-  }
-
-  // 🔹 page
-  if (searchParams.page) params.page = searchParams.page;
-
-  // 🔹 limit
-  if (searchParams.limit) params.limit = searchParams.limit;
-
-  return params;
-};
-
 export const buildDoctorParams = (searchParams) => {
   const params = {};
 
@@ -469,6 +433,48 @@ export const buildDoctorParams = (searchParams) => {
     else if ([4, 5].includes(sortNum)) params.sort = "DESC";
   }
 
+  // 🔹 page
+  params.page = searchParams.page || 1;
+
+  // 🔹 limit
+  params.limit = 12;
+
+  return params;
+};
+
+export const QueryForClinicsFilter = (searchParams) => {
+  const params = {};
+
+  // 🔹 specialty (find by name in specialties.json)
+  if (searchParams.specialty) {
+    const spec = specialties.find((s) => s.name === searchParams.specialty);
+    if (spec) {
+      params.specialty = spec.id;
+    }
+  }
+
+  // 🔹 city (find by name in city.json)
+  if (searchParams.city) {
+    const cityObj = cities.find((c) => c.name === searchParams.city.name);
+    if (cityObj) {
+      params.city = cityObj.id;
+    }
+  }
+
+  // 🔹 state (find by name in state.json)
+  if (searchParams.province) {
+    const stateObj = states.find((s) => s.name === searchParams.province.name);
+    if (stateObj) {
+      params.state = stateObj.id;
+    }
+  }
+
+  // 🔹 page
+  params.page = searchParams.page || 1;
+
+  // 🔹 limit
+  params.limit = 12;
+
   return params;
 };
 
@@ -500,10 +506,10 @@ export const buildClinicParams = (searchParams) => {
   }
 
   // 🔹 page
-  if (searchParams.page) {
+  params.page = searchParams.page || 1;
-    params.page = searchParams.page;
+
-    params.limit = 12;
+  // 🔹 limit
-  }
+  params.limit = 12;
 
   return params;
 };

lib/getStateInfoClient.js

@@ -4,8 +4,9 @@ import statesData from "@/data/state.json";
 
 export function getStateInfoClient() {
   if (typeof window === "undefined")
-    return { matchedCity: null, matchedState: null };
+    return { matchedCity: null, matchedState: null, fullUrl: "" };
 
+  const fullUrl = window.location.href; // کل URL
   const host = window.location.host || "";
   const subdomain = host.split(".")[0];
 
@@ -17,5 +18,5 @@ export function getStateInfoClient() {
     matchedCity &&
     statesData.find((state) => state.id === matchedCity.province_id);
 
-  return { matchedCity, matchedState };
+  return { matchedCity, matchedState, host, fullUrl };
 }

package-lock.json

@@ -36,6 +36,8 @@
         "next": "^14.2.20",
         "next-themes": "^0.3.0",
         "npm": "^10.8.2",
+        "qrcode": "^1.5.4",
+        "qrcode.react": "^4.2.0",
         "react": "^18.0.0",
         "react-dom": "^18",
         "react-easy-crop": "^5.1.0",
@@ -46,7 +48,8 @@
         "styled-components": "^6.1.11",
         "stylis": "^4.3.4",
         "stylis-plugin-rtl": "^2.1.1",
-        "swiper": "^11.1.9"
+        "swiper": "^11.1.9",
+        "uninstall": "^0.0.0"
       },
       "devDependencies": {
         "cross-env": "^7.0.3",
@@ -8879,6 +8882,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -9122,6 +9134,12 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -18034,6 +18052,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/popper.js": {
       "version": "1.16.1-lts",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
@@ -19539,6 +19566,93 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
@@ -20201,6 +20315,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -20864,6 +20984,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -22756,6 +22882,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/uninstall": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/uninstall/-/uninstall-0.0.0.tgz",
+      "integrity": "sha512-pjP/0+A4gsbDVa8XH/S2GZdT9NPJW8NFMy3GI7HnsWG+NAmFSSj3QidNosXBI9cPtxxNExEDdhKFO6sli8K3mA==",
+      "license": "MIT"
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -23396,6 +23528,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.16.tgz",

package.json

@@ -37,6 +37,8 @@
     "next": "^14.2.20",
     "next-themes": "^0.3.0",
     "npm": "^10.8.2",
+    "qrcode": "^1.5.4",
+    "qrcode.react": "^4.2.0",
     "react": "^18.0.0",
     "react-dom": "^18",
     "react-easy-crop": "^5.1.0",
@@ -47,7 +49,8 @@
     "styled-components": "^6.1.11",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",
-    "swiper": "^11.1.9"
+    "swiper": "^11.1.9",
+    "uninstall": "^0.0.0"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",