complete score page

db.json

@@ -23,23 +23,35 @@
         {
             "status": true,
             "amount": "1558900",
-            "request_date": "1403/4/30 18:26:43",
+            "request_date": "1403/04/30 18:26:43",
             "traking_number": "930482",
-            "deposit_date": "1403/4/31"
+            "deposit_date": "1403/04/31"
         },
         {
             "status": false,
             "amount": "1558900",
-            "request_date": "1403/4/30 18:26:43",
+            "request_date": "1403/04/30 18:26:43",
             "traking_number": "930482",
-            "deposit_date": "1403/4/31"
+            "deposit_date": "1403/04/31"
         },
         {
             "status": true,
             "amount": "1558900",
-            "request_date": "1403/4/30 18:26:43",
+            "request_date": "1403/04/30 18:26:43",
             "traking_number": "930482",
-            "deposit_date": "1403/4/31"
+            "deposit_date": "1403/04/31"
+        }
+    ],
+    "score": [
+        {
+            "title": "نصب دستگاه",
+            "score": 30,
+            "date": "1403/04/31 10:17:24"
+        },
+        {
+            "title": "IMEI registration",
+            "score": 5,
+            "date": "1403/05/31 10:17:24"
         }
     ]
 }

src/components/common/table.tsx

@@ -9,9 +9,10 @@ type Props = {
     data: any
     sorting: SortingState,
     setSorting: React.Dispatch<React.SetStateAction<SortingState>>,
+    tableStatus?: boolean
 }
 
-export const Table: FC<Props> = ({ columns, data, setSorting, sorting }) => {
+export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStatus }) => {
 
     const table = useReactTable({
         data: data ? data : [],
@@ -38,7 +39,7 @@ export const Table: FC<Props> = ({ columns, data, setSorting, sorting }) => {
                     <ComboBox placeholder="100" className="bg-auth-form" />
                 </div>
             </div>
-            <div className="block max-w-full overflow-x-auto overflow-y-hidden bg-auth-form rounded-[40px] shadow-sm p-4 xl:p-9">
+            <div className="block max-w-full overflow-x-auto overflow-y-hidden bg-auth-form rounded-[40px] shadow-sm p-4 xl:p-9 relative">
                 <table>
                     <thead className="border-b border-b-secondary-color">
                         {table.getHeaderGroups().map((headerGroup: any, index: number) => (
@@ -66,6 +67,7 @@ export const Table: FC<Props> = ({ columns, data, setSorting, sorting }) => {
                         ))}
                     </tbody>
                 </table>
+                {tableStatus && <div className="absolute text-sm bottom-1.5 lg:left-10 lg:top-5 lg:text-lg text-primary-text-color font-normal">امتیاز من: 65</div>}
             </div>
         </div>
     );

src/components/score/index.tsx

@@ -0,0 +1,20 @@
+import { 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 { getScoreList } from "../../services/api/score"
+
+export const Score = () => {
+    const [sorting, setSorting] = useState<SortingState>([])
+    const { data, isLoading } = useQuery({
+        queryKey: ["score-list"],
+        queryFn: getScoreList
+    })
+
+    if (isLoading) return <p>LOADING ...</p>
+
+    return (
+        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={data?.data} tableStatus={true} />
+    )
+}

src/pages/dashboard/score.tsx

@@ -0,0 +1,7 @@
+import { Score } from "../../components/score"
+
+export const ScorePage = () => {
+    return (
+        <Score />
+    )
+}

src/router/index.tsx

@@ -14,6 +14,7 @@ import { Wallet } from "../pages/dashboard/wallet";
 import { ManagementBankAccountPage } from "../pages/dashboard/management-bank-account";
 import { InstallationReportsPage } from "../pages/dashboard/installation-reports";
 import { TransactionsPage } from "../pages/dashboard/transactions";
+import { ScorePage } from "../pages/dashboard/score";
 
 
 export const router = createBrowserRouter([
@@ -45,6 +46,10 @@ export const router = createBrowserRouter([
                 path: "transactions",
                 element: <TransactionsPage />
             },
+            {
+                path: "my-score",
+                element: <ScorePage />
+            },
         ]
     },
     {

src/services/api/score.ts

@@ -0,0 +1,4 @@
+import { ScoreInterface } from "../../types";
+import { axiosInstance } from "../axios";
+
+export const getScoreList = () => axiosInstance.get<ScoreInterface>("/score")

src/types/index.ts

@@ -123,3 +123,9 @@ export interface TransactionsInterface {
     traking_number: string
     deposit_date: string
 }
+
+export interface ScoreInterface {
+    title: string
+    score: number
+    date: string
+}

src/utility/score.tsx

@@ -0,0 +1,12 @@
+import { createColumns } from "../components/common/create-col";
+import { colConfig } from "../types";
+
+
+
+const columnConfigs: colConfig[] | [] = [
+    { accessor: "title", header: "عنوان" },
+    { accessor: "score", header: "امتیاز" },
+    { accessor: "date", header: "تاریخ", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
+];
+
+export const scoresCol = createColumns<any>(columnConfigs);