From 390442a33107eb56d879da382dc419e221077680 Mon Sep 17 00:00:00 2001
From: Alihaghighattalab <alihtofficial@gmail.com>
Date: Sun, 11 Aug 2024 14:39:02 +0330
Subject: [PATCH] complete suscriptions page

---
 db.json                                      | 18 ++++++++++++
 src/components/subscription-report/index.tsx | 18 ++++++++++++
 src/components/ui/dashboard/header.tsx       |  2 +-
 src/pages/dashboard/subscription-report.tsx  |  7 +++++
 src/router/index.tsx                         |  5 ++++
 src/services/api/subscription.ts             |  4 +++
 src/types/index.ts                           |  9 ++++++
 src/utility/subscription.tsx                 | 31 ++++++++++++++++++++
 8 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/components/subscription-report/index.tsx
 create mode 100644 src/pages/dashboard/subscription-report.tsx
 create mode 100644 src/services/api/subscription.ts
 create mode 100644 src/utility/subscription.tsx

diff --git a/db.json b/db.json
index 4253e6e..af86354 100644
--- a/db.json
+++ b/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%"
+        }
     ]
 }
\ No newline at end of file
diff --git a/src/components/subscription-report/index.tsx b/src/components/subscription-report/index.tsx
new file mode 100644
index 0000000..87f48eb
--- /dev/null
+++ b/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} />
+    )
+}
\ No newline at end of file
diff --git a/src/components/ui/dashboard/header.tsx b/src/components/ui/dashboard/header.tsx
index 3b2e392..67e7ba6 100644
--- a/src/components/ui/dashboard/header.tsx
+++ b/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>
diff --git a/src/pages/dashboard/subscription-report.tsx b/src/pages/dashboard/subscription-report.tsx
new file mode 100644
index 0000000..c355bc1
--- /dev/null
+++ b/src/pages/dashboard/subscription-report.tsx
@@ -0,0 +1,7 @@
+import { SubscriptionReport } from "../../components/subscription-report"
+
+export const SubscriptionReportPage = () => {
+    return (
+        <SubscriptionReport />
+    )
+}
\ No newline at end of file
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 7bbb11e..216e0fe 100644
--- a/src/router/index.tsx
+++ b/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 />
+            },
         ]
     },
     {
diff --git a/src/services/api/subscription.ts b/src/services/api/subscription.ts
new file mode 100644
index 0000000..0c4d9bd
--- /dev/null
+++ b/src/services/api/subscription.ts
@@ -0,0 +1,4 @@
+import { SubscriptionReportInterface } from "../../types";
+import { axiosInstance } from "../axios";
+
+export const getSubscriptionsList = () => axiosInstance.get<SubscriptionReportInterface>("/subscriptions")
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 8bc4ca4..cebe8d6 100644
--- a/src/types/index.ts
+++ b/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
 }
\ No newline at end of file
diff --git a/src/utility/subscription.tsx b/src/utility/subscription.tsx
new file mode 100644
index 0000000..713b257
--- /dev/null
+++ b/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);
\ No newline at end of file