booking

src/pages/support/ui/SupportTours.tsx

@@ -19,13 +19,22 @@ import {
   DialogTitle,
 } from "@/shared/ui/dialog";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertTriangle, Loader2, Phone, Trash2, User } from "lucide-react";
-import { useState } from "react";
+import {
+  AlertTriangle,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  Phone,
+  Trash2,
+  User,
+} from "lucide-react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
 const SupportTours = () => {
   const { t } = useTranslation();
+  const [currentPage, setCurrentPage] = useState(1);
   const [selected, setSelected] = useState<GetSupportUserRes | null>(null);
   const [selectedToDelete, setSelectedToDelete] =
     useState<GetSupportUserRes | null>(null);
@@ -34,10 +43,18 @@ const SupportTours = () => {
     "" | "pending" | "done" | "failed"
   >("");
 
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [filterStatus]);
+
   const { data, isLoading, isError, refetch } = useQuery({
-    queryKey: ["support_user", filterStatus],
+    queryKey: ["support_user", filterStatus, currentPage],
     queryFn: () =>
-      getSupportUser({ page: 1, page_size: 99, status: filterStatus }),
+      getSupportUser({
+        page: currentPage,
+        page_size: 10,
+        status: filterStatus,
+      }),
   });
 
   const { data: agency } = useQuery({
@@ -210,6 +227,45 @@ const SupportTours = () => {
         </>
       )}
 
+      <div className="flex justify-end gap-2">
+        <button
+          disabled={currentPage === 1}
+          onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+
+        {[...Array(data?.data.data?.total_pages)].map((_, i) => (
+          <button
+            key={i}
+            onClick={() => setCurrentPage(i + 1)}
+            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
+              currentPage === i + 1
+                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
+                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
+            }`}
+          >
+            {i + 1}
+          </button>
+        ))}
+
+        <button
+          disabled={currentPage === data?.data.data?.total_pages}
+          onClick={() =>
+            setCurrentPage((p) =>
+              Math.min(
+                p + 1,
+                data?.data.data ? data?.data.data.total_pages : 0,
+              ),
+            )
+          }
+          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+
       {/* Detail Modal */}
       <Dialog open={!!selected} onOpenChange={() => setSelected(null)}>
         <DialogContent className="bg-gray-800 border border-gray-700 text-gray-100 sm:max-w-lg">