complete installation reports page

package-lock.json

@@ -24,7 +24,7 @@
         "clsx": "^2.1.1",
         "iconsax-react": "^0.0.8",
         "iranianbanklogos": "^3.1.2",
-        "jalaali-js": "^1.2.7",
+        "moment-jalaali": "^0.10.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.52.2",
@@ -41,6 +41,7 @@
       },
       "devDependencies": {
         "@tanstack/eslint-plugin-query": "^5.51.15",
+        "@types/moment-jalaali": "^0.7.9",
         "tailwindcss": "^3.4.7"
       }
     },
@@ -4881,6 +4882,16 @@
       "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
       "license": "MIT"
     },
+    "node_modules/@types/moment-jalaali": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/@types/moment-jalaali/-/moment-jalaali-0.7.9.tgz",
+      "integrity": "sha512-gsDOoAzRnCfQTbfdlUrCvX6R0wIto6CvwfvV2C3j4qJLK+DEiTK8Rl/xlOCBO9C6qeUfX8oyZ2UfjnXJTOvHSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "moment": ">=2.14.0"
+      }
+    },
     "node_modules/@types/node": {
       "version": "16.18.104",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.104.tgz",
@@ -13963,6 +13974,39 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-jalaali": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/moment-jalaali/-/moment-jalaali-0.10.1.tgz",
+      "integrity": "sha512-/iwLtt3onvI6wFydUSTj10nFeNkD9sZ0fSY1gmqC2dwt1yGYJun6agI7E7SiBYi8uzGlt3P4KuPYCMLiv43E+g==",
+      "license": "MIT",
+      "dependencies": {
+        "jalaali-js": "^1.1.0",
+        "moment": "^2.22.2",
+        "moment-timezone": "^0.5.21",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.5.45",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.45.tgz",
+      "integrity": "sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -19,7 +19,7 @@
     "clsx": "^2.1.1",
     "iconsax-react": "^0.0.8",
     "iranianbanklogos": "^3.1.2",
-    "jalaali-js": "^1.2.7",
+    "moment-jalaali": "^0.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
@@ -60,6 +60,7 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.51.15",
+    "@types/moment-jalaali": "^0.7.9",
     "tailwindcss": "^3.4.7"
   }
 }

src/components/common/table.tsx

@@ -9,7 +9,7 @@ type Props = {
     data: any
     sorting: SortingState,
     setSorting: React.Dispatch<React.SetStateAction<SortingState>>,
-    tableStatus?: boolean
+    tableStatus?: string | number
 }
 
 export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStatus }) => {
@@ -67,7 +67,7 @@ export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStat
                         ))}
                     </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>}
+                {tableStatus && <div className="absolute text-sm bottom-1.5 lg:left-10 lg:top-5 lg:text-lg text-primary-text-color font-normal">امتیاز من: {tableStatus}</div>}
             </div>
         </div>
     );

src/components/installation-reports/index.tsx

@@ -1,6 +1,6 @@
 import { installationReportsCol } from "../../utility/reports"
 import { Table } from "../common/table"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { SortingState } from "@tanstack/react-table"
 import { useQuery } from "@tanstack/react-query"
 import { getRegisterDeviceList } from "../../services/api/register-device"
@@ -12,8 +12,12 @@ export const InstallationReports = () => {
         queryFn: getRegisterDeviceList
     })
 
+    useEffect(() => {
+        console.log("data =>", data)
+    }, [data])
+
     if (isLoading) return <p>LODING .....</p>
     return (
-        <Table columns={installationReportsCol} data={data?.data} sorting={sorting} setSorting={setSorting} />
+        <Table columns={installationReportsCol} data={data?.data?.data} sorting={sorting} setSorting={setSorting} />
     )
 }

src/services/api/register-device.ts

@@ -1,4 +1,4 @@
 import { RegisterDeviceResponse } from "../../types";
 import axiosInstance from "../axios";
 
-export const getRegisterDeviceList = () => axiosInstance.get<RegisterDeviceResponse[] | RegisterDeviceResponse | []>("/gps/register-device")
+export const getRegisterDeviceList = () => axiosInstance.get<RegisterDeviceResponse[] | RegisterDeviceResponse | [], any>("/gps/register-device")

src/types/index.ts

@@ -178,3 +178,32 @@ export interface RegisterDeviceResponse {
     __v: number,
     id: string
 }
+
+export interface RegisterDeviceData {
+    status: number,
+    _id: string,
+    deviceId: RegisterDeviceData[] | [],
+    registerDate: string,
+    userId: string,
+    created_at: string,
+    updated_at: string,
+    __v: number,
+    id: string
+}
+
+
+export interface RegisterDeviceId {
+    tomanPrice: number,
+    dollarProfit: number,
+    profit: number,
+    status: number,
+    _id: string,
+    IMEI: string,
+    model: string,
+    score: number,
+    renewalProfit: number,
+    created_at: string,
+    updated_at: string,
+    __v: number,
+    id: string
+}

src/utility/getDate.tsx

@@ -1,7 +1,10 @@
-const jalaali = require('jalaali-js');
+import moment from "moment-jalaali";
 
 export const getJalaaliDate = () => {
-    const today = new Date();
+    const date: Date = new Date()
-    const jalaaliDate = jalaali.toJalaali(today.getFullYear(), today.getMonth() + 1, today.getDate());
+    return moment(date).format('jYYYY/jM/jD')
-    return `${jalaaliDate.jy}/${String(jalaaliDate.jm).padStart(2, '0')}/${String(jalaaliDate.jd).padStart(2, '0')}`;
+}
+
+export const formatDateToPersian = (date: string | Date) => {
+    return moment(date).format("jYYYY/jM/jD HH:mm")
 }

src/utility/reports.tsx

@@ -1,18 +1,21 @@
 import { ShieldCross, ShieldTick } from "iconsax-react";
 import { createColumns } from "../components/common/create-col";
 import { colConfig } from "../types";
+import { formatDateToPersian } from "./getDate";
 
 const columnConfigs: colConfig[] | [] = [
     {
         accessor: "status", header: "وضعیت",
-        cellRenderer: (info) => info.getValue() ? <ShieldTick color="#11212D" className="flex w-full" /> : <ShieldCross color="#E51717" className="flex w-full" />
+        cellRenderer: (info) => info.getValue() === 1 ? <ShieldTick color="#11212D" className="flex w-full" /> : <ShieldCross color="#E51717" className="flex w-full" />
     },
-    { accessor: "dollar", header: "دلار" },
+    {
-    { accessor: "score", header: "امتیاز" },
+        accessor: "deviceId.dollarProfit", header: "دلار"
-    { accessor: "device_model", header: "مدل دستگاه" },
+    },
-    { accessor: "imei_number", header: "شماره IMEI" },
+    { accessor: "deviceId.score", header: "امتیاز" },
-    { accessor: "install_date", header: "تاریخ نصب", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
+    { accessor: "deviceId.model", header: "مدل دستگاه" },
-    { accessor: "install_iemi", header: "تاریخ ثبت IMEI", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
+    { accessor: "deviceId.IMEI", header: "شماره IMEI" },
+    { accessor: "deviceId.created_at", header: "تاریخ نصب", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{formatDateToPersian(info.getValue())}</p> },
+    { accessor: "registerDate", header: "تاریخ ثبت IMEI", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{formatDateToPersian(info.getValue())}</p> },
 ];
 
 export const installationReportsCol = createColumns<any>(columnConfigs);