booking

src/pages/faq/ui/Faq.tsx

@@ -44,6 +44,7 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import {
+  ChevronLeft,
   ChevronRight,
   Loader2,
   Pencil,
@@ -66,6 +67,7 @@ const faqForm = z.object({
 
 const Faq = () => {
   const [activeTab, setActiveTab] = useState<string>("");
+  const [currentPage, setCurrentPage] = useState(1);
   const { t } = useTranslation();
   const [openModal, setOpenModal] = useState(false);
   const [editFaq, setEditFaq] = useState<number | null>(null);
@@ -94,17 +96,24 @@ const Faq = () => {
     initialPageParam: 1,
   });
 
-  // Barcha kategoriyalarni birlashtirib olish
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [activeTab]);
+
   const category =
     categoryData?.pages.flatMap((page) => page.data.data.results) ?? [];
 
   const { data: faq } = useQuery({
-    queryKey: ["all_faq", activeTab],
+    queryKey: ["all_faq", activeTab, currentPage],
     queryFn: () => {
-      return getAllFaq({ page: 1, page_size: 10, category: Number(activeTab) });
+      return getAllFaq({
+        page: currentPage,
+        page_size: 10,
+        category: Number(activeTab),
+      });
     },
     select(data) {
-      return data.data.data.results;
+      return data.data.data;
     },
     enabled: !!activeTab,
   });
@@ -323,7 +332,7 @@ const Faq = () => {
         {/* Tabs content */}
         {category.map((cat) => (
           <TabsContent key={cat.id} value={String(cat.id)}>
-            {faq && faq?.length > 0 ? (
+            {faq && faq?.results.length > 0 ? (
               <div className="border rounded-md overflow-hidden shadow-sm">
                 <Table>
                   <TableHeader>
@@ -337,7 +346,7 @@ const Faq = () => {
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    {faq.map((faq, index) => (
+                    {faq.results.map((faq, index) => (
                       <TableRow key={faq.id}>
                         <TableCell className="text-center font-medium">
                           {index + 1}
@@ -380,6 +389,40 @@ const Faq = () => {
         ))}
       </Tabs>
 
+      <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(faq?.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 === faq?.total_pages}
+          onClick={() =>
+            setCurrentPage((p) => Math.min(p + 1, faq ? faq.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>
+
       <Dialog open={openModal} onOpenChange={setOpenModal}>
         <DialogContent className="sm:max-w-[500px] h-[80vh] overflow-y-scroll bg-gray-900">
           <DialogHeader>