refactor: enhance transaction and appointment handling with pagination, status filtering, and improved data display

components/dashboard/userAccount/sidebars/transactions/List.js

@@ -5,8 +5,11 @@ import Card from "./Card";
 import TextLoading from "@/app/component/loading/Text";
 import CustomLoading from "@/app/component/loading/Custom";
 import CircularLoading from "@/app/component/loading/Circular";
+import { convertTimestampToJalali, convertTimestampToTime } from "@/helper";
+import Pagination from "@/app/component/Pagination";
+import Link from "next/link";
 
-function List({ user, loading }) {
+function List({ user, loading, page, totalPages, onPageChange }) {
   const tableHead = [
     "ردیف",
     "شناسه",
@@ -45,26 +48,16 @@ function List({ user, loading }) {
                 component="th"
                 scope="row"
               >
-                <div className="flex items-center justify-start gap-[8px] !text-nowrap">
-                  <CircularLoading width={32} height={32} loading={loading}>
-                    <Image
-                      src={row.image}
-                      alt="doctor"
-                      height={32}
-                      width={32}
-                    />
-                  </CircularLoading>
-                  <TextLoading width={40} height={18} loading={loading}>
-                    {row.name}
-                  </TextLoading>
-                </div>
+                <TextLoading width={120} height={18} loading={loading}>
+                  {row.appointment_details?.doctor_name || "--"}
+                </TextLoading>
               </TableCell>
               <TableCell
                 className="!text-start !pr-[18px] !text-nowrap"
                 align="right"
               >
-                <TextLoading width={50} height={18} loading={loading}>
-                  {row.date}
+                <TextLoading width={80} height={18} loading={loading}>
+                  {convertTimestampToJalali(row.appointment_details?.start_time)}
                 </TextLoading>
               </TableCell>
               <TableCell
@@ -72,7 +65,7 @@ function List({ user, loading }) {
                 align="right"
               >
                 <TextLoading width={50} height={18} loading={loading}>
-                  {row.time}
+                  {convertTimestampToTime(row.appointment_details?.start_time)}
                 </TextLoading>
               </TableCell>
               <TableCell
@@ -80,30 +73,31 @@ function List({ user, loading }) {
                 align="right"
               >
                 <TextLoading width={50} height={18} loading={loading}>
-                  {row.amount}
+                  {row.amount ? row.amount.toLocaleString('fa-IR') : "--"}
                 </TextLoading>
               </TableCell>
               <TableCell className="!pr-[18px] !text-nowrap" align="right">
                 <CustomLoading width={80} height={22} loading={loading}>
-                  <div
-                    className={`
-                      w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium select-none
-                      ${
-                        row.status === "success"
+                  <Link href={`/payment/${row.uuid}`}>
+                    <div
+                      className={`
+                      w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium select-none cursor-pointer
+                      ${row.status === "received"
                           ? "bg-[#E8FADD] text-[#75E22E]"
                           : row.status === "pending"
                             ? "bg-[#FFF3DD] text-[#FDBA35]"
                             : "bg-[#FFE3E2] text-[#FF5450]"
-                      }
+                        }
                     `}
-                    variant="text"
-                  >
-                    {row.status === "success"
-                      ? "پرداخت شده"
-                      : row.status === "pending"
-                        ? "در انتظار"
-                        : "پرداخت نشده"}
-                  </div>
+                      variant="text"
+                    >
+                      {row.status === "received"
+                        ? "پرداخت شده"
+                        : row.status === "pending"
+                          ? "در انتظار"
+                          : "لغو شده"}
+                    </div>
+                  </Link>
                 </CustomLoading>
               </TableCell>
             </TableRow>
@@ -115,6 +109,15 @@ function List({ user, loading }) {
           <Card key={idx} data={row} loading={loading} />
         ))}
       </ul>
+      {totalPages > 1 && (
+        <div className="flex justify-center mt-[32px] w-full">
+          <Pagination
+            page={page}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+          />
+        </div>
+      )}
     </div>
   );
 }