complete transactions page

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"
+        }
     ]
 }

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,
     })
   );

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"
 

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} />
+    )
+}

src/pages/dashboard/transactions.tsx

@@ -0,0 +1,7 @@
+import { Transactions } from "../../components/transactions"
+
+export const TransactionsPage = () => {
+    return (
+        <Transactions />
+    )
+}

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 />
+            },
         ]
     },
     {

src/services/api/transactions.ts

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

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
 }

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: "پارسیان",

src/utility/reports.tsx

@@ -1,18 +1,18 @@
+import { ShieldCross, ShieldTick } from "iconsax-react";
 import { createColumns } from "../components/common/create-col";
-
+import { colConfig } from "../types";
-type colConfig = {
-    accessor: string
-    header: string
-}
 
 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_date", header: "تاریخ نصب", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
-    { accessor: "install_iemi", header: "تاریخ ثبت IMEI" },
+    { accessor: "install_iemi", header: "تاریخ ثبت IMEI", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
 ];
 
 export const installationReportsCol = createColumns<any>(columnConfigs);

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: "گزارش تمدید اشتراک اینترنتی",

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);