refactor: update appointment handling to improve data flow and display, including status management and detail views

components/dashboard/userAccount/sidebars/turns/Card.js

@@ -3,23 +3,21 @@ import TextLoading from "@/app/component/loading/Text";
 import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD";
 import { Button } from "@mui/material";
 import Image from "next/image";
+import { convertTimestampToJalali, convertTimestampToTime } from "@/helper";
 
 function Card({ data, loading, setIsTurnsDetails }) {
   return (
     <li className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]">
       <div className="flex items-center justify-start gap-[8px] p-[12px]">
-        <CircularLoading width={32} height={32} loading={loading}>
-          <Image width={32} height={32} alt="profile" src={data.image} />
-        </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-[8px]">
-          <TextLoading loading={loading} width={65} height={18}>
+          <TextLoading loading={loading} width={120} height={18}>
             <p className="text-[#616161] text-[14px] font-medium">
-              {data.name}
+              {data.doctor?.name || "--"}
             </p>
           </TextLoading>
-          <TextLoading loading={loading} width={50} height={18}>
+          <TextLoading loading={loading} width={100} height={18}>
             <p className="text-[#7E7E7E] text-[14px] font-normal">
-              {data.expertise}
+              {data.doctor?.specialty?.name || "--"}
             </p>
           </TextLoading>
         </div>
@@ -33,7 +31,7 @@ function Card({ data, loading, setIsTurnsDetails }) {
           </TextLoading>
           <TextLoading loading={loading} width={110} height={18}>
             <p className="text-[#525252] text-[14px] font-medium">
-              {data.date}
+              {convertTimestampToJalali(data.start_time)}
             </p>
           </TextLoading>
         </li>
@@ -43,21 +41,16 @@ function Card({ data, loading, setIsTurnsDetails }) {
           </TextLoading>
           <TextLoading loading={loading} width={60} height={18}>
             <p className="text-[#525252] text-[14px] font-medium">
-              {data.time}
+              {data.slot?.time || convertTimestampToTime(data.start_time)}
             </p>
           </TextLoading>
         </li>
       </ul>
-      <div className="mt-[12px] flex items-center justify-between px-[12px]">
-        <TextLoading loading={loading} width={120} height={18}>
-          <p className="text-[#7E7E7E] text-[12px] font-normal">
-            مبلغ پیش پرداخت: {data.amount} تومان
-          </p>
-        </TextLoading>
+      <div className="mt-[12px] flex items-center justify-end px-[12px]">
         <TextLoading loading={loading} width={80} height={25}>
           <Button
             className="!flex !p-1 !items-center !justify-end !gap-[2px]"
-            onClick={() => setIsTurnsDetails(true)}
+            onClick={() => setIsTurnsDetails(data)}
             variant="text"
           >
             مشاهده