complete installation reports page

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

@@ -177,4 +177,33 @@ export interface RegisterDeviceResponse {
     updated_at: string,
     __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 jalaaliDate = jalaali.toJalaali(today.getFullYear(), today.getMonth() + 1, today.getDate());
-    return `${jalaaliDate.jy}/${String(jalaaliDate.jm).padStart(2, '0')}/${String(jalaaliDate.jd).padStart(2, '0')}`;
+    const date: Date = new Date()
+    return moment(date).format('jYYYY/jM/jD')
+}
+
+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: "device_model", header: "مدل دستگاه" },
-    { accessor: "imei_number", 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> },
+    {
+        accessor: "deviceId.dollarProfit", header: "دلار"
+    },
+    { accessor: "deviceId.score", header: "امتیاز" },
+    { accessor: "deviceId.model", header: "مدل دستگاه" },
+    { 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);