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