add first open time for appo item and change component data, remove work time in location, add loading on links in page doctor list, fix bug search city and state in clinics page

app/component/ItemDoctor.js

@@ -11,10 +11,22 @@ import CustomLoading from "./loading/Custom";
 import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
 import moment from "moment-jalaali";
+import { useState } from "react";
 
 moment.loadPersian({ dialect: "persian-modern" });
 
-function ItemDoctor({ doctor }) {
+function ItemDoctor({ doctor, doctors, setDoctors }) {
+  const [loading, setLoading] = useState(false);
+  const handleLoading = () => {
+    setDoctors((prevDoctors) =>
+      prevDoctors.map((item) =>
+        item.id === doctor.id
+          ? { ...item, loading: true }
+          : { ...item, loading: false }
+      )
+    );
+  };
+
   return (
     <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
       {/* Detail Doctor */}
@@ -93,9 +105,13 @@ function ItemDoctor({ doctor }) {
       <Link href={`/doctor/${doctor?.uuid}`}>
         <Button
           variant="contained"
+          onClick={handleLoading}
+          loading={doctor?.loading}
           className="!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit"
         >
-          <ArrowLeftD />
+          <div className={doctor && doctor.loading ? "opacity-0" : ""}>
+            <ArrowLeftD />
+          </div>
         </Button>
       </Link>
     </li>

app/component/modalSearchCity/Content.js

@@ -60,16 +60,16 @@ function Content({
             list={states}
             label="استان"
             disabled={matchedState}
-            value={filter.state}
+            value={filter?.state}
             updateData={updateData}
           />
           <AddressSelector
             name="city"
             label="شهر"
-            value={filter.city}
+            value={filter?.city}
             list={filteredCities}
             updateData={updateData}
-            disabled={!filter.state}
+            disabled={!filter?.state}
           />
         </div>
         <div className="w-full flex justify-end">
@@ -79,7 +79,7 @@ function Content({
             onClick={handleClick}
             variant="contained"
             color="primary"
-            disabled={!filter.city || !filter.state}
+            disabled={!filter?.city || !filter?.state}
           >
             تایید و ادامه
             <ArrowLeftM />

app/component/openLocation/Content.js

@@ -1,22 +1,44 @@
 import CloseModalD from "@/components/icons/CloseModalD";
 import Image from "next/image";
 
-const maps = [
-  { src: "/assets/images/snapp.png", name: "snapp" },
-  { src: "/assets/images/tapsi.png", name: "tapsi" },
-  { src: "/assets/images/maps.png", name: "maps" },
-  { src: "/assets/images/balad.png", name: "balad" },
-  { src: "/assets/images/waze.png", name: "waze" },
-];
+function Content({ data, onClose }) {
+  const { latitude, longitude } = data && data.map;
+
+  const maps = [
+    {
+      src: "/assets/images/snapp.png",
+      name: "snapp",
+      url: `https://snapp.ir/route?lat=${latitude}&lng=${longitude}`,
+    },
+    {
+      src: "/assets/images/tapsi.png",
+      name: "tapsi",
+      url: `https://tapsi.ir/route?lat=${latitude}&lng=${longitude}`,
+    },
+    {
+      src: "/assets/images/maps.png",
+      name: "maps",
+      url: `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`,
+    },
+    {
+      src: "/assets/images/balad.png",
+      name: "balad",
+      url: `https://balad.ir/map?lat=${latitude}&lng=${longitude}`,
+    },
+    {
+      src: "/assets/images/waze.png",
+      name: "waze",
+      url: `https://waze.com/ul?ll=${latitude},${longitude}&navigate=yes`,
+    },
+  ];
 
-function Content({ handleClose }) {
   return (
     <>
       <div className="flex items-center justify-between">
         <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
           باز شدن با
         </p>
-        <div className="cursor-pointer" onClick={handleClose}>
+        <div className="cursor-pointer" onClick={onClose}>
           <CloseModalD />
         </div>
       </div>
@@ -27,20 +49,22 @@ function Content({ handleClose }) {
             key={idx}
             className="flex items-center flex-col justify-center gap-1"
           >
-            <Image
-              className="
-                w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
-                min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
-                max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
-              "
-              src={item.src}
-              alt="icon app"
-              height={40}
-              width={40}
-            />
-            <p className="text-[#3B3B3B] font-normal text-[14px]">
-              {item.name}
-            </p>
+            <a href={item.url} target="_blank" rel="noopener noreferrer">
+              <Image
+                className="
+                  w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
+                  min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
+                  max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
+                "
+                src={item.src}
+                alt="icon app"
+                height={40}
+                width={40}
+              />
+              <p className="text-[#3B3B3B] font-normal text-[14px]">
+                {item.name}
+              </p>
+            </a>
           </li>
         ))}
       </ul>

app/component/openLocation/index.js

@@ -4,7 +4,7 @@ import { Drawer, Modal } from "@mui/material";
 import { styleDefault } from "@/mui";
 import Content from "./Content";
 
-function ModalOpenLocation({ open, setOpen, handleClose, children }) {
+function ModalOpenLocation({ open, data, setOpen, handleClose, children }) {
   const toggleDrawer = (newOpen) => () => {
     setOpen(newOpen);
   };
@@ -19,7 +19,7 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
           style={styleDefault}
           className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
         >
-          <Content onClose={handleClose} />
+          <Content data={data} onClose={handleClose} />
         </div>
       </Modal>
       <Drawer
@@ -35,7 +35,7 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
         }}
       >
         <div className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]">
-          <Content handleClose={handleClose} />
+          <Content data={data} handleClose={handleClose} />
         </div>
       </Drawer>
     </>