complete suscriptions page

db.json

@@ -53,5 +53,23 @@
             "score": 5,
             "date": "1403/05/31 10:17:24"
         }
+    ],
+    "subscriptions": [
+        {
+            "imei_number": "865784054680547",
+            "renewal_date": "1403/05/31 10:17:24",
+            "renewal_type": "2 ساله",
+            "amount": "500200",
+            "contribution": "20500",
+            "percentage": "10%"
+        },
+        {
+            "imei_number": "865784054681250",
+            "renewal_date": "1403/05/31 10:17:24",
+            "renewal_type": "4 ساله",
+            "amount": "750000",
+            "contribution": "300000",
+            "percentage": "15%"
+        }
     ]
 }

src/components/subscription-report/index.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react"
+import { Table } from "../common/table"
+import { SortingState } from "@tanstack/react-table"
+import { subscriptionsCol } from "../../utility/subscription"
+import { useQuery } from "@tanstack/react-query"
+import { getSubscriptionsList } from "../../services/api/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={data?.data} />
+    )
+}

src/components/ui/dashboard/header.tsx

@@ -14,7 +14,7 @@ export const Header: FC<Props> = ({ setShow }) => {
                 <p className="hidden font-normal text-sm lg:block lg:text-xl">علی مصلحی</p>
             </div>
             <div className="flex flex-row gap-x-3 items-center">
-                <p className="font-normal text-sm lg:text-xl">45597000-021</p>
+                <p className="font-normal text-sm lg:text-xl">021-45597000</p>
                 <Call color="#11212D" variant="Bold" className="size-[27px]" />
             </div>
         </header>

src/pages/dashboard/subscription-report.tsx

@@ -0,0 +1,7 @@
+import { SubscriptionReport } from "../../components/subscription-report"
+
+export const SubscriptionReportPage = () => {
+    return (
+        <SubscriptionReport />
+    )
+}

src/router/index.tsx

@@ -15,6 +15,7 @@ import { ManagementBankAccountPage } from "../pages/dashboard/management-bank-ac
 import { InstallationReportsPage } from "../pages/dashboard/installation-reports";
 import { TransactionsPage } from "../pages/dashboard/transactions";
 import { ScorePage } from "../pages/dashboard/score";
+import { SubscriptionReportPage } from "../pages/dashboard/subscription-report";
 
 
 export const router = createBrowserRouter([
@@ -50,6 +51,10 @@ export const router = createBrowserRouter([
                 path: "my-score",
                 element: <ScorePage />
             },
+            {
+                path: "subscription-report",
+                element: <SubscriptionReportPage />
+            },
         ]
     },
     {

src/services/api/subscription.ts

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

src/types/index.ts

@@ -128,4 +128,13 @@ export interface ScoreInterface {
     title: string
     score: number
     date: string
+}
+
+export interface SubscriptionReportInterface {
+    imei_number: string
+    renewal_date: string
+    renewal_type: string
+    amount: string
+    contribution: string,
+    percentage:string
 }

src/utility/subscription.tsx

@@ -0,0 +1,31 @@
+
+import { createColumns } from "../components/common/create-col";
+import { colConfig } from "../types";
+import { filterNumber } from "./status";
+
+
+
+const columnConfigs: colConfig[] | [] = [
+    {
+        accessor: "imei_number", header: "شماره IMEI",
+    },
+    { accessor: "renewal_date", header: "تاریخ تمدید", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
+    { accessor: "renewal_type", header: "نوع تمدید" },
+    {
+        accessor: "amount", header: "مبلغ",
+        cellRenderer: (info) => info.getValue() && <div className="w-full justify-center flex flex-row gap-2 items-end">
+            <p className="text-primary-text-color text-base font-normal">{filterNumber(info.getValue())}</p>
+            <p className="text-primary-text-color font-normal text-xs">تومان</p>
+        </div>
+    },
+    {
+        accessor: "contribution", header: "سهم شما",
+        cellRenderer: (info) => info.getValue() && <div className="w-full justify-center flex flex-row gap-2 items-end">
+            <p className="text-primary-text-color text-base font-normal">{filterNumber(info.getValue())}</p>
+            <p className="text-primary-text-color font-normal text-xs">تومان</p>
+        </div>
+    },
+    { accessor: "percentage", header: "درصد" },
+];
+
+export const subscriptionsCol = createColumns<any>(columnConfigs);