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

2025-11-18 22:21:47 +03:30
parent 430e0b3b11
commit e7c8501680
9 changed files with 286 additions and 75 deletions
@@ -6,8 +6,9 @@ import Card from "./Card";
 import CircularLoading from "@/app/component/loading/Circular";
 import TextLoading from "@/app/component/loading/Text";
 import CustomLoading from "@/app/component/loading/Custom";
+import Pagination from "@/app/component/Pagination";

-function List({ user, loading, setIsTurnsDetails }) {
+function List({ user, loading, setIsTurnsDetails, page, totalPages, onPageChange }) {
  const tableHead = [
    "ردیف",
    "نام پزشک",
@@ -110,6 +111,15 @@ function List({ user, loading, setIsTurnsDetails }) {
          />
        ))}
      </ul>
+      {totalPages > 1 && (
+        <div className="flex justify-center mt-[32px] w-full">
+          <Pagination
+            page={page}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+          />
+        </div>
+      )}
    </div>
  );
 }
@@ -1,9 +1,60 @@
-import { useState } from "react";
+"use client";
+
+import { useEffect, useState } from "react";
 import Head from "./Head";
 import List from "./List";
+import { request } from "@/services/response";
+import Cookies from "js-cookie";

 function Turns({ user, setIsTurnsDetails, loading }) {
  const [isDone, setIsDone] = useState(true);
+  const [appointments, setAppointments] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  useEffect(() => {
+    const fetchAppointments = async () => {
+      setIsLoading(true);
+      try {
+        const userInfo = Cookies.get("userInfo");
+        if (!userInfo) {
+          setIsLoading(false);
+          return;
+        }
+
+        const parsedData = JSON.parse(userInfo);
+        const userId = parsedData.id || parsedData.uuid;
+
+        if (!userId) {
+          setIsLoading(false);
+          return;
+        }
+
+        const response = await request.getMyAppointments(userId, {
+          page,
+          limit: 10,
+        });
+
+        if (response?.data) {
+          setAppointments(response.data);
+          if (response.page) {
+            setTotalPages(response.page.totalPages);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching appointments:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchAppointments();
+  }, [page]);
+
+  const handlePageChange = (event, value) => {
+    setPage(value);
+  };

  return (
    <div className="opacity-page">
@@ -12,9 +63,12 @@ function Turns({ user, setIsTurnsDetails, loading }) {
      </p>
      <Head isDone={isDone} setIsDone={setIsDone} />
      <List
-        loading={loading}
+        loading={isLoading}
        setIsTurnsDetails={setIsTurnsDetails}
-        user={user.turns[isDone ? "done" : "current"]}
+        user={appointments}
+        page={page}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
      />
    </div>
  );