complete award page - score - transactions not complete

src/components/awards/award-not-complete.tsx

@@ -1,20 +1,27 @@
 import { Calendar2, Cup } from "iconsax-react"
 import ProgressCircle from "./progress-circle"
+import { AwardsResponse } from "../../types"
+import { FC } from "react"
+import { formatDateToPersian } from "../../utility/getDate"
 
-export const AwardNotComplete = () => {
+type Props = {
+    award: AwardsResponse
+}
+
+export const AwardNotComplete: FC<Props> = ({ award }) => {
     return (
-        <div className="flex flex-col items-center gap-5 bg-auth-form rounded-[40px] w-full h-full relative p-[18px]">
+        <div className="w-full flex flex-col lg:items-center gap-5 bg-auth-form rounded-[40px] h-full relative p-[18px]">
             <div className="flex flex-row items-center justify-between w-full">
                 <div className="flex flex-row gap-x-[6px] items-center">
-                    <p className="font-normal text-lg text-primary-text-color">75</p>
+                    <p className="font-normal text-lg text-primary-text-color">{award?.score}</p>
                     <Cup className="size-4" color="#11212D" />
                 </div>
                 <ProgressCircle percentage={75} />
             </div>
             <div className="flex flex-col items-start gap-3">
-                <p className="font-normal text-base text-primary-text-color" style={{ fontFamily: "vazirmatn" }}>۲۵۰ هزار تومان تخفیف برای اقامت در تمام ویلاها و کلبه های جاجیگا با حداقل رزرو ۲ میلیون تومان</p>
+                <p className="font-normal text-base text-primary-text-color" style={{ fontFamily: "vazirmatn" }}>{award?.desc?.length >= 70 ? `${award?.desc?.slice(0, 70)} ...` : award?.desc}</p>
                 <div className="flex flex-row items-center gap-2">
-                    <p className="font-normal text-sm text-secondary-text-color">1403/06/12</p>
+                    <p className="font-normal text-sm text-secondary-text-color">{formatDateToPersian(award?.expireDate, "jYYYY/jMM/jD")}</p>
                     <Calendar2 color="#777577" className="size-5" />
                 </div>
             </div>

src/components/awards/index.tsx

@@ -1,7 +1,17 @@
+import { useQuery } from "@tanstack/react-query"
 import { AwardNotComplete } from "./award-not-complete"
-import { AwardComplete } from "./awards-complete"
+import { getAwardsList } from "../../services/api/awards"
+import { useEffect } from "react"
+import { AwardsResponse } from "../../types"
 
 export const Awards = () => {
+    const { data, isLoading } = useQuery({
+        queryKey: ["awards"],
+        queryFn: getAwardsList
+    })
+
+    useEffect(() => { console.log("data =>", data?.data) }, [data])
+    if (isLoading) return <p>LOADING...</p>
     return (
         <div className="flex flex-col gap-10">
             <div className="flex flex-row justify-between items-center">
@@ -9,8 +19,7 @@ export const Awards = () => {
                 <p className="font-normal text-base text-primary-text-color">امتیازهای من: 65</p>
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
-                <AwardNotComplete />
-                <AwardComplete />
+                {data?.data?.map((award: AwardsResponse) => <AwardNotComplete key={award.id} award={award} />)}
             </div>
         </div>
     )

src/components/score/index.tsx

@@ -1,18 +1,24 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Table } from "../common/table"
 import { SortingState } from "@tanstack/react-table"
 import { scoresCol } from "../../utility/score"
+import { useQuery } from "@tanstack/react-query"
+import { getScoresList } from "../../services/api/score"
 
 export const Score = () => {
     const [sorting, setSorting] = useState<SortingState>([])
-    // const { data, isLoading } = useQuery({
-    //     queryKey: ["score-list"],
-    //     queryFn: getScoreList
-    // })
+    const { data, isLoading } = useQuery({
+        queryKey: ["score-list"],
+        queryFn: getScoresList
+    })
 
-    // if (isLoading) return <p>LOADING ...</p>
+    useEffect(() => {
+        console.log("data =>", data)
+    }, [data])
+
+    if (isLoading) return <p>LOADING ...</p>
 
     return (
-        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={[]} tableStatus={true} />
+        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={data?.data} tableStatus={data?.score} />
     )
 }

src/components/transactions/index.tsx

@@ -1,18 +1,24 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Table } from "../common/table"
 import { SortingState } from "@tanstack/react-table"
 import { transactionsCol } from "../../utility/transactions"
+import { getTransactionsList } from "../../services/api/transactions"
+import { useQuery } from "@tanstack/react-query"
 
 export const Transactions = () => {
     const [sorting, setSorting] = useState<SortingState>([])
 
-    // const { data, isLoading } = useQuery({
-    //     queryKey: ["transactions-list"],
-    //     queryFn: getTransactionsList
-    // })
+    const { data, isLoading } = useQuery({
+        queryKey: ["transactions-list"],
+        queryFn: getTransactionsList
+    })
 
-    // if (isLoading) return <p>LOADING ....</p>
+    useEffect(() => {
+        console.log("data=>", data)
+    }, [data])
+
+    if (isLoading) return <p>LOADING ....</p>
     return (
-        <Table sorting={sorting} setSorting={setSorting} columns={transactionsCol} data={[]} />
+        <Table sorting={sorting} setSorting={setSorting} columns={transactionsCol} data={data?.data?.data} />
     )
 }

src/services/api/awards.ts

@@ -1,17 +1,6 @@
+import { AwardsResponse } from "../../types";
 import axiosInstance from "../axios";
 
 
-export interface AwardsResponse {
-    _id: string,
-    score: number,
-    title: string,
-    desc: string,
-    expireDate: string,
-    created_at: string,
-    updated_at: string,
-    __v: number,
-    id: string
-}
-
-export const getAwardsList = () => axiosInstance.get<AwardsResponse[] | AwardsResponse | []>("/gps/award")
+export const getAwardsList = () => axiosInstance.get<AwardsResponse[] | AwardsResponse | [], any>("/gps/award")
 

src/services/api/score.ts

@@ -1,6 +1,6 @@
 import axiosInstance from "../axios";
 
-export type ScoreDataResponse = {
+export type ScoreData = {
     _id: string,
     deviceId: string,
     score: number,
@@ -11,12 +11,11 @@ export type ScoreDataResponse = {
     id: string
 }
 
-
 export interface ScoreResponse {
-    data: ScoreDataResponse[] | []
+    data: ScoreData[] | []
     score: number,
     total: number
 }
 
-export const getScoresList = () => axiosInstance.get<ScoreResponse>("/gps/score")
+export const getScoresList = () => axiosInstance.get<ScoreData, any>("/gps/score")
 

src/services/api/transactions.ts

@@ -1,3 +1,30 @@
 import axiosInstance from "../axios";
 
-export const getTransactionsList = () => axiosInstance.get<any>("/gps/transactions")
+export interface TransactionsResponse {
+    data: TransactionsData[] | []
+}
+
+export interface TransactionsData {
+    _id: string,
+    card: TransactionsCard
+    userId: string,
+    amount: number,
+    dollarAmount: number,
+    status: number,
+    created_at: string,
+    updated_at: string,
+    __v: number,
+    id: string
+}
+
+export interface TransactionsCard {
+    _id: string,
+    holderName: string,
+    PAN: number,
+    IBAN: string,
+    created_at: string,
+    updated_at: string,
+    id: string
+}
+
+export const getTransactionsList = () => axiosInstance.get<TransactionsResponse>("/gps/transactions")

src/types/index.ts

@@ -207,3 +207,15 @@ export interface RegisterDeviceId {
     __v: number,
     id: string
 }
+
+export interface AwardsResponse {
+    _id: string,
+    score: number,
+    title: string,
+    desc: string,
+    expireDate: string,
+    created_at: string,
+    updated_at: string,
+    __v: number,
+    id: string
+}

src/utility/getDate.tsx

@@ -2,9 +2,10 @@ import moment from "moment-jalaali";
 
 export const getJalaaliDate = () => {
     const date: Date = new Date()
-    return moment(date).format('jYYYY/jM/jD')
+    return moment(date).format('jYYYY/jMM/jDD')
 }
 
-export const formatDateToPersian = (date: string | Date) => {
-    return moment(date).format("jYYYY/jM/jD HH:mm")
+export const formatDateToPersian = (date: string | Date, format?: string) => {
+    const formatString = format ? format : "jYYYY/jMM/jDD HH:mm"
+    return moment(date).format(formatString)
 }

src/utility/transactions.tsx

@@ -8,7 +8,7 @@ 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" />
+        cellRenderer: (info) => info.getValue() === 1 ? <ClipboardTick color="#11212D" className="flex w-full" /> : <ClipboardClose color="#E51717" className="flex w-full" />
     },
     {
         accessor: "amount", header: "مبلغ",
@@ -17,7 +17,7 @@ const columnConfigs: colConfig[] | [] = [
             <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: "request_date", header: "تاریخ درخواست", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
     { accessor: "traking_number", header: "شماره پیگیری" },
     { accessor: "deposit_date", header: "تاریخ واریز" },
 ];