complete paginations

src/components/common/input.tsx

@@ -9,13 +9,12 @@ type Props = {
     placeholder: string,
     icon?: React.ReactNode,
     field?: any,
-    ref?: any,
     className?: string,
     value?: string,
     onChange?: (value: string) => void
 }
 
-export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref, className, value, onChange }) => {
+export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, className, value, onChange }) => {
     const [hidden, setHidden] = useState<boolean>(false)
     const handleHidden = () => setHidden(prev => !prev)
     return (
@@ -28,7 +27,7 @@ export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref,
                     : icon}
                 {placeholder === "شماره کارت" && field.value && findBankByPAN(field.value).icon}
             </div>
-            <InputComponent ref={ref} {...field} value={value} onChange={onChange} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} />
+            <InputComponent ref={field?.ref} {...field} value={value} onChange={onChange || field?.onChange} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} />
         </div>
     )
 }

src/components/common/table.tsx

@@ -1,4 +1,4 @@
-import { flexRender, getCoreRowModel, getPaginationRowModel, SortingState, useReactTable } from "@tanstack/react-table"
+import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table"
 import { ArrowDown2, ArrowLeft2, ArrowRight2, ArrowUp2, SearchNormal1 } from "iconsax-react"
 import { FC, useEffect } from "react"
 import { Input } from "./input"
@@ -10,14 +10,13 @@ import { tableRows } from "../../utility/table-rows"
 type Props = {
     columns: any
     data: any
-    sorting?: SortingState,
-    setSorting?: React.Dispatch<React.SetStateAction<SortingState>>,
-    tableStatus?: string | number,
+    tableStatus?: boolean,
     isLoading?: boolean,
-    totalData?: number
+    totalData?: number,
+    tableScore?: number
 }
 
-export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStatus, isLoading = false, totalData = 0 }) => {
+export const Table: FC<Props> = ({ columns, data, tableStatus = false, tableScore = 0, isLoading = false, totalData = 0 }) => {
     const { updateParams, params } = useParamsStore()
     const totalPages = Math.ceil(totalData / params?.rows)
     const table = useReactTable({
@@ -29,10 +28,6 @@ export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStat
         columnResizeMode: 'onChange',
         debugHeaders: true,
         debugColumns: true,
-        state: {
-            sorting
-        },
-        onSortingChange: setSorting,
         getPaginationRowModel: getPaginationRowModel()
     })
 
@@ -60,7 +55,7 @@ export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStat
                     <ComboBox placeholder={params?.rows.toString()} className="bg-auth-form" data={tableRows} mode="table" />
                 </div>
             </div>
-            {tableStatus && <div className="w-full flex justify-end items-end text-sm lg:text-lg text-primary-text-color font-normal -mb-7 pl-2">امتیاز من: {tableStatus}</div>}
+            <div className="w-full flex justify-start items-end text-sm lg:text-lg text-primary-text-color font-normal -mb-7 pl-2">{tableStatus && `امتیاز من : ${tableScore}`}</div>
             <div className="block max-w-full overflow-x-auto overflow-y-hidden bg-auth-form rounded-[40px] shadow-sm p-4 pb-0 xl:p-9 xl:pb-0 relative">
                 <table>
                     <thead className="border-b border-b-secondary-color">

src/components/score/index.tsx

@@ -1,17 +1,36 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Table } from "../common/table"
-import { SortingState } from "@tanstack/react-table"
 import { scoresCol } from "../../utility/score"
-import { useQuery } from "@tanstack/react-query"
+import { useMutation } from "@tanstack/react-query"
 import { getScoresList } from "../../services/api/score"
+import { useParamsStore } from "../../store/params"
+import { ScoreResponse } from "../../types"
 
 export const Score = () => {
-    const [sorting, setSorting] = useState<SortingState>([])
-    const { data, isLoading } = useQuery({
-        queryKey: ["score-list"],
-        queryFn: getScoresList
+    const { params } = useParamsStore()
+    const [data, setData] = useState<ScoreResponse>({
+        data: [],
+        total: 0,
+        score: 0
     })
+    const { mutate, isPending } = useMutation({
+        mutationFn: getScoresList
+    })
+    useEffect(() => {
+        mutate({
+            ...params
+        },
+            {
+                onSuccess: (res: any) => {
+                    setData({
+                        data: res?.data?.data,
+                        total: res?.data?.total,
+                        score: res?.data?.score
+                    })
+                }
+            })
+    }, [mutate, params])
     return (
-        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={data?.data?.data} tableStatus={data?.data?.score} isLoading={isLoading} />
+        <Table columns={scoresCol} data={data?.data} tableStatus={true} tableScore={data?.score} isLoading={isPending} totalData={data?.total} />
     )
 }

src/components/subscription-report/index.tsx

@@ -1,16 +1,8 @@
-import { useState } from "react"
 import { Table } from "../common/table"
-import { SortingState } from "@tanstack/react-table"
 import { subscriptionsCol } from "../../utility/subscription"
 
 export const SubscriptionReport = () => {
-    const [sorting, setSorting] = useState<SortingState>([])
-    // const { data, isLoading } = useQuery({
-    //     queryKey: ["suscriptions-list"],
-    //     queryFn: getSubscriptionsList
-    // })
-    // if (isLoading) return <p>LOADIN...</p>
     return (
-        <Table sorting={sorting} setSorting={setSorting} columns={subscriptionsCol} data={[]} />
+        <Table columns={subscriptionsCol} data={[]} />
     )
 }

src/components/transactions/index.tsx

@@ -1,18 +1,34 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Table } from "../common/table"
-import { SortingState } from "@tanstack/react-table"
 import { transactionsCol } from "../../utility/transactions"
 import { getTransactionsList } from "../../services/api/transactions"
-import { useQuery } from "@tanstack/react-query"
+import { useMutation } from "@tanstack/react-query"
+import { TransactionsResponse } from "../../types"
+import { useParamsStore } from "../../store/params"
 
 export const Transactions = () => {
-    const [sorting, setSorting] = useState<SortingState>([])
-
-    const { data, isLoading } = useQuery({
-        queryKey: ["transactions-list"],
-        queryFn: getTransactionsList
+    const { params } = useParamsStore()
+    const [data, setData] = useState<TransactionsResponse>({
+        data: [],
+        total: 0
     })
+    const { mutate, isPending } = useMutation({
+        mutationFn: getTransactionsList
+    })
+    useEffect(() => {
+        mutate({
+            ...params
+        },
+            {
+                onSuccess: (res: any) => {
+                    setData({
+                        data: res?.data?.data,
+                        total: res?.data?.total
+                    })
+                }
+            })
+    }, [mutate, params])
     return (
-        <Table sorting={sorting} setSorting={setSorting} columns={transactionsCol} data={data?.data?.data} isLoading={isLoading} />
+        <Table columns={transactionsCol} data={data?.data} isLoading={isPending} totalData={data?.total} />
     )
 }

src/services/api/score.ts

@@ -1,7 +1,9 @@
-import { ScoreResponse } from "../../types";
+import { ScoreResponse, TableParams } from "../../types";
 import axiosInstance from "../axios";
 
 
 
-export const getScoresList = () => axiosInstance.get<ScoreResponse, any>("/gps/score")
+export const getScoresList = (params: TableParams) => axiosInstance.get<ScoreResponse, any>("/gps/score", {
+    params: params
+})
 

src/services/api/transactions.ts

@@ -1,4 +1,6 @@
-import { TransactionsResponse } from "../../types";
+import { TableParams, TransactionsResponse } from "../../types";
 import axiosInstance from "../axios";
 
-export const getTransactionsList = () => axiosInstance.get<TransactionsResponse>("/gps/withdraw")
+export const getTransactionsList = (params: TableParams) => axiosInstance.get<TransactionsResponse>("/gps/withdraw", {
+    params: params
+})

src/types/index.ts

@@ -237,7 +237,8 @@ interface TransactionsCard {
 }
 
 export interface TransactionsResponse {
-    data: TransactionsData[] | []
+    data: TransactionsData[] | [],
+    total: number
 }
 
 type OverviewUser = {