From f552eee230a5840513c672dcda5899b2543eecc7 Mon Sep 17 00:00:00 2001
From: Alihaghighattalab <alihtofficial@gmail.com>
Date: Sun, 11 Aug 2024 11:01:10 +0330
Subject: [PATCH] complete transactions page

---
 db.json                                       | 23 +++++++++++++++++
 src/components/common/create-col.tsx          |  5 ++--
 src/components/installation-reports/index.tsx |  2 +-
 src/components/transactions/index.tsx         | 20 +++++++++++++++
 src/pages/dashboard/transactions.tsx          |  7 ++++++
 src/router/index.tsx                          |  5 ++++
 src/services/api/{index.ts => reports.ts}     |  0
 src/services/api/transactions.ts              |  4 +++
 src/types/index.ts                            | 14 +++++++++++
 src/utility/cart.tsx                          | 18 -------------
 src/utility/reports.tsx                       | 16 ++++++------
 src/utility/sidebar.tsx                       |  9 ++++++-
 src/utility/transactions.tsx                  | 25 +++++++++++++++++++
 13 files changed, 118 insertions(+), 30 deletions(-)
 create mode 100644 src/components/transactions/index.tsx
 create mode 100644 src/pages/dashboard/transactions.tsx
 rename src/services/api/{index.ts => reports.ts} (100%)
 create mode 100644 src/services/api/transactions.ts
 create mode 100644 src/utility/transactions.tsx

diff --git a/db.json b/db.json
index 5f64b1f..1bed7a3 100644
--- a/db.json
+++ b/db.json
@@ -18,5 +18,28 @@
             "install_date": "1403/05/01 18:26:43",
             "install_iemi": "1403/05/31 10:17:24"
         }
+    ],
+    "transactions": [
+        {
+            "status": true,
+            "amount": "1558900",
+            "request_date": "1403/4/30 18:26:43",
+            "traking_number": "930482",
+            "deposit_date": "1403/4/31"
+        },
+        {
+            "status": false,
+            "amount": "1558900",
+            "request_date": "1403/4/30 18:26:43",
+            "traking_number": "930482",
+            "deposit_date": "1403/4/31"
+        },
+        {
+            "status": true,
+            "amount": "1558900",
+            "request_date": "1403/4/30 18:26:43",
+            "traking_number": "930482",
+            "deposit_date": "1403/4/31"
+        }
     ]
 }
\ No newline at end of file
diff --git a/src/components/common/create-col.tsx b/src/components/common/create-col.tsx
index acbc6ec..d27c9dc 100644
--- a/src/components/common/create-col.tsx
+++ b/src/components/common/create-col.tsx
@@ -1,18 +1,19 @@
 import { createColumnHelper } from "@tanstack/react-table";
-import { ShieldCross, ShieldTick } from "iconsax-react";
 
 type ColumnConfig = {
   accessor: any;
   header: string;
   enableSorting?: boolean;
+  cellRenderer?: (info: any) => JSX.Element;
 };
 
+
 export const createColumns = <T,>(columnConfigs: ColumnConfig[]) => {
   const columnHelper = createColumnHelper<T>();
   return columnConfigs.map(config =>
     columnHelper.accessor(config.accessor, {
       header: () => config.header,
-      cell: (info) => config.header === "وضعیت" ? info.getValue() ? <ShieldTick color="#11212D" className="flex w-full"/> : <ShieldCross color="#E51717" className="flex w-full"/> : info.getValue(),
+      cell: (info) => config.cellRenderer ? config.cellRenderer(info) : info.getValue(),
       enableSorting: config.enableSorting ?? true,
     })
   );
diff --git a/src/components/installation-reports/index.tsx b/src/components/installation-reports/index.tsx
index 7ad1951..36f35e8 100644
--- a/src/components/installation-reports/index.tsx
+++ b/src/components/installation-reports/index.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query"
 import { installationReportsCol } from "../../utility/reports"
 import { Table } from "../common/table"
-import { getReportsList } from "../../services/api"
+import { getReportsList } from "../../services/api/reports"
 import { useState } from "react"
 import { SortingState } from "@tanstack/react-table"
 
diff --git a/src/components/transactions/index.tsx b/src/components/transactions/index.tsx
new file mode 100644
index 0000000..99b3443
--- /dev/null
+++ b/src/components/transactions/index.tsx
@@ -0,0 +1,20 @@
+import { useState } from "react"
+import { Table } from "../common/table"
+import { SortingState } from "@tanstack/react-table"
+import { transactionsCol } from "../../utility/transactions"
+import { useQuery } from "@tanstack/react-query"
+import { getTransactionsList } from "../../services/api/transactions"
+
+export const Transactions = () => {
+    const [sorting, setSorting] = useState<SortingState>([])
+
+    const { data, isLoading } = useQuery({
+        queryKey: ["transactions-list"],
+        queryFn: getTransactionsList
+    })
+
+    if (isLoading) return <p>LOADING ....</p>
+    return (
+        <Table sorting={sorting} setSorting={setSorting} columns={transactionsCol} data={data?.data} />
+    )
+}
\ No newline at end of file
diff --git a/src/pages/dashboard/transactions.tsx b/src/pages/dashboard/transactions.tsx
new file mode 100644
index 0000000..a92ea65
--- /dev/null
+++ b/src/pages/dashboard/transactions.tsx
@@ -0,0 +1,7 @@
+import { Transactions } from "../../components/transactions"
+
+export const TransactionsPage = () => {
+    return (
+        <Transactions />
+    )
+}
\ No newline at end of file
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 27eaf99..cbb8f0d 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -13,6 +13,7 @@ import { MyAcccount } from "../pages/dashboard/my-account";
 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";
 
 
 export const router = createBrowserRouter([
@@ -40,6 +41,10 @@ export const router = createBrowserRouter([
                 path: "installation-reports",
                 element: <InstallationReportsPage />
             },
+            {
+                path: "transactions",
+                element: <TransactionsPage />
+            },
         ]
     },
     {
diff --git a/src/services/api/index.ts b/src/services/api/reports.ts
similarity index 100%
rename from src/services/api/index.ts
rename to src/services/api/reports.ts
diff --git a/src/services/api/transactions.ts b/src/services/api/transactions.ts
new file mode 100644
index 0000000..f093beb
--- /dev/null
+++ b/src/services/api/transactions.ts
@@ -0,0 +1,4 @@
+import { TransactionsInterface } from "../../types";
+import { axiosInstance } from "../axios";
+
+export const getTransactionsList = () => axiosInstance.get<TransactionsInterface>("/transactions")
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 32d679b..b20837a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -108,4 +108,18 @@ export interface installationReportsInterface {
     imei_number: string
     install_date: string
     install_iemi: string
+}
+
+export interface colConfig {
+    accessor: string
+    header: string
+    cellRenderer?: (info: any) => JSX.Element;
+}
+
+export interface TransactionsInterface {
+    status: boolean
+    amount: string
+    request_date: string
+    traking_number: string
+    deposit_date: string
 }
\ No newline at end of file
diff --git a/src/utility/cart.tsx b/src/utility/cart.tsx
index 1d45675..2cc782b 100644
--- a/src/utility/cart.tsx
+++ b/src/utility/cart.tsx
@@ -25,15 +25,6 @@ const banks: BanksInterface[] | [] = [
             "636214"
         ]
     },
-    {
-        name: "bank_markazi",
-        name_farsi: "بانک مرکزی",
-        icon: "Bank_Markazi.svg",
-        iban_nbc: "010",
-        pan_iin: [
-            "636795"
-        ]
-    },
     {
         name: "dey",
         name_farsi: "دی",
@@ -166,15 +157,6 @@ const banks: BanksInterface[] | [] = [
             "170019"
         ]
     },
-    {
-        name: "noor",
-        name_farsi: "نور",
-        icon: "Noor.svg",
-        iban_nbc: "080",
-        pan_iin: [
-            "507677"
-        ]
-    },
     {
         name: "parsian",
         name_farsi: "پارسیان",
diff --git a/src/utility/reports.tsx b/src/utility/reports.tsx
index 13abed7..d5c5daf 100644
--- a/src/utility/reports.tsx
+++ b/src/utility/reports.tsx
@@ -1,18 +1,18 @@
+import { ShieldCross, ShieldTick } from "iconsax-react";
 import { createColumns } from "../components/common/create-col";
-
-type colConfig = {
-    accessor: string
-    header: string
-}
+import { colConfig } from "../types";
 
 const columnConfigs: colConfig[] | [] = [
-    { accessor: "status", header: "وضعیت" },
+    {
+        accessor: "status", header: "وضعیت",
+        cellRenderer: (info) => info.getValue() ? <ShieldTick color="#11212D" className="flex w-full" /> : <ShieldCross color="#E51717" className="flex w-full" />
+    },
     { accessor: "dollar", header: "دلار" },
     { accessor: "score", header: "امتیاز" },
     { accessor: "device_model", header: "مدل دستگاه" },
     { accessor: "imei_number", header: "شماره IMEI" },
-    { accessor: "install_date", header: "تاریخ نصب" },
-    { accessor: "install_iemi", header: "تاریخ ثبت IMEI" },
+    { accessor: "install_date", header: "تاریخ نصب", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
+    { accessor: "install_iemi", header: "تاریخ ثبت IMEI", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
 ];
 
 export const installationReportsCol = createColumns<any>(columnConfigs);
\ No newline at end of file
diff --git a/src/utility/sidebar.tsx b/src/utility/sidebar.tsx
index 55b49c7..42bc79b 100644
--- a/src/utility/sidebar.tsx
+++ b/src/utility/sidebar.tsx
@@ -1,4 +1,4 @@
-import { CardPos, DocumentText, Home2, ReceiptItem, SmartCar, StarSlash, UserSquare, Wallet } from "iconsax-react";
+import { CardPos, Cup, DocumentText, Home2, ReceiptItem, SmartCar, StarSlash, UserSquare, Wallet } from "iconsax-react";
 import { SidebarInterface } from "../types";
 
 
@@ -52,6 +52,13 @@ export const sidebarItems: SidebarInterface[] | [] = [
         icon: <StarSlash color="#777577" className="size-[27px]" variant="Bold" />,
         activeIcon: <StarSlash color="#11212D" className="size-[27px]" variant="Bold" />
     },
+    {
+        name: "awards",
+        title: "جوایز",
+        route: "/awards",
+        icon: <Cup color="#777577" className="size-[27px]" variant="Bold" />,
+        activeIcon: <Cup color="#11212D" className="size-[27px]" variant="Bold" />
+    },
     {
         name: "subscription-report",
         title: "گزارش تمدید اشتراک اینترنتی",
diff --git a/src/utility/transactions.tsx b/src/utility/transactions.tsx
new file mode 100644
index 0000000..7e47e56
--- /dev/null
+++ b/src/utility/transactions.tsx
@@ -0,0 +1,25 @@
+import { ClipboardClose, ClipboardTick } from "iconsax-react";
+import { createColumns } from "../components/common/create-col";
+import { colConfig } from "../types";
+import { filterNumber } from "./status";
+
+
+
+const columnConfigs: colConfig[] | [] = [
+    {
+        accessor: "status", header: "وضعیت",
+        cellRenderer: (info) => info.getValue() ? <ClipboardTick color="#11212D" className="flex w-full" /> : <ClipboardClose color="#E51717" className="flex w-full" />
+    },
+    {
+        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: "request_date", header: "تاریخ درخواست", cellRenderer: (info) => info.getValue() && <p style={{direction: "ltr"}}>{info.getValue()}</p> },
+    { accessor: "traking_number", header: "شماره پیگیری" },
+    { accessor: "deposit_date", header: "تاریخ واریز" },
+];
+
+export const transactionsCol = createColumns<any>(columnConfigs);
\ No newline at end of file