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

2025-10-02 02:52:26 +03:30
parent 645da72002
commit e1510b142b
21 changed files with 394 additions and 154 deletions
@@ -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, setDoctors }) {
+function ItemDoctor({ doctor, loading, 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]
                    ${
@@ -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);
  }
@@ -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>
@@ -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);
@@ -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>
@@ -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}
        />
@@ -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";
-
-moment.loadPersian({ dialect: "persian-modern" });
+import { convertTimestampToPersianDateSimple } from "@/helper";

 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(
-                    "dddd jD jMMMM [ساعت] HH:mm"
-                  )}`
+                ? `اولین نوبت آزاد: ${convertTimestampToPersianDateSimple(turn?.free_turn)}`
                : "نوبت ندارد"}
            </p>
          </TextLoading>
@@ -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="">
+      <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 ref={hiddenRef}>
          <Poster data={data} />
        </div>
@@ -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) => (
@@ -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]">
@@ -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;
@@ -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>
+  );
+}
@@ -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>
@@ -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>
  );
@@ -1,53 +1,14 @@
-import { useState } from "react";
-
 import SearchBar from "../search";
 import SortList from "../sortlist";
-import { useRouter, useSearchParams } from "next/navigation";
-import specialties from "@/data/specialties.json";
+import { useRouter } from "next/navigation";

 // 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 }) {
-  const searchParams = useSearchParams();
+function Head({ filter, setFilter, setPage, setDoctors }) {
  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}
@@ -2,21 +2,70 @@

 import { useState } from "react";
 import ListDoctors from "./listDoctors";
-
-// Data
+import { useSearchParams } from "next/navigation";
 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>
  );
 }
@@ -1,8 +1,57 @@
-import doctorList from "@/data/doctors.json";
-import Pagination from "@/app/component/Pagination";
+import { useState } from "react";
 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">
-        <Pagination list={doctorList} itemsPerPage={12} />
+      <div className="mt-[48px] flex justify-center">
+        <PaginationContent
+          page={page}
+          limit={limit}
+          changePage={changePage}
+          pageDetail={data?.page || []}
+        />
      </div>
    </>
  );
@@ -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;
-    params.limit = 12;
-  }
+  params.page = searchParams.page || 1;
+
+  // 🔹 limit
+  params.limit = 12;

  return params;
 };
@@ -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 };
 }
@@ -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",
@@ -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",