From c977d71a19a2adb3988da6961210b80f00a4401a Mon Sep 17 00:00:00 2001
From: Alihaghighattalab <alihtofficial@gmail.com>
Date: Sun, 11 Aug 2024 11:59:32 +0330
Subject: [PATCH] complete score page

---
 db.json                         | 24 ++++++++++++++++++------
 src/components/common/table.tsx |  6 ++++--
 src/components/score/index.tsx  | 20 ++++++++++++++++++++
 src/pages/dashboard/score.tsx   |  7 +++++++
 src/router/index.tsx            |  5 +++++
 src/services/api/score.ts       |  4 ++++
 src/types/index.ts              |  6 ++++++
 src/utility/score.tsx           | 12 ++++++++++++
 8 files changed, 76 insertions(+), 8 deletions(-)
 create mode 100644 src/components/score/index.tsx
 create mode 100644 src/pages/dashboard/score.tsx
 create mode 100644 src/services/api/score.ts
 create mode 100644 src/utility/score.tsx

diff --git a/db.json b/db.json
index 1bed7a3..4253e6e 100644
--- a/db.json
+++ b/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"
         }
     ]
 }
\ No newline at end of file
diff --git a/src/components/common/table.tsx b/src/components/common/table.tsx
index cf6d060..9771040 100644
--- a/src/components/common/table.tsx
+++ b/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>
     );
diff --git a/src/components/score/index.tsx b/src/components/score/index.tsx
new file mode 100644
index 0000000..59bfd9f
--- /dev/null
+++ b/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} />
+    )
+}
\ No newline at end of file
diff --git a/src/pages/dashboard/score.tsx b/src/pages/dashboard/score.tsx
new file mode 100644
index 0000000..85d10c9
--- /dev/null
+++ b/src/pages/dashboard/score.tsx
@@ -0,0 +1,7 @@
+import { Score } from "../../components/score"
+
+export const ScorePage = () => {
+    return (
+        <Score />
+    )
+}
\ No newline at end of file
diff --git a/src/router/index.tsx b/src/router/index.tsx
index cbb8f0d..7bbb11e 100644
--- a/src/router/index.tsx
+++ b/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 />
+            },
         ]
     },
     {
diff --git a/src/services/api/score.ts b/src/services/api/score.ts
new file mode 100644
index 0000000..dbbc39f
--- /dev/null
+++ b/src/services/api/score.ts
@@ -0,0 +1,4 @@
+import { ScoreInterface } from "../../types";
+import { axiosInstance } from "../axios";
+
+export const getScoreList = () => axiosInstance.get<ScoreInterface>("/score")
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index b20837a..8bc4ca4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -122,4 +122,10 @@ export interface TransactionsInterface {
     request_date: string
     traking_number: string
     deposit_date: string
+}
+
+export interface ScoreInterface {
+    title: string
+    score: number
+    date: string
 }
\ No newline at end of file
diff --git a/src/utility/score.tsx b/src/utility/score.tsx
new file mode 100644
index 0000000..6247770
--- /dev/null
+++ b/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);
\ No newline at end of file