From 3f9e0d761573cb6248c5bd70be731753397eab46 Mon Sep 17 00:00:00 2001
From: HAM!DREZA <hamidreza.eidy1999@gmail.com>
Date: Mon, 17 Jun 2024 09:09:00 +0330
Subject: [PATCH] update

---
 components/Card.vue                           |   2 +-
 components/ProgressCard.vue                   |  22 +-
 .../course-details/Course-information.vue     |   2 +-
 pages/account/[product]/index.vue             | 244 +++++++++++++
 pages/account/index.vue                       | 196 ++++++----
 pages/account/my-courses.vue                  |  10 +-
 pages/account/tickets.vue                     |  60 ++--
 pages/account/wallet.vue                      | 339 +++++++++++-------
 server/api/user/payments.js                   |  19 +
 utils/jDate.js                                |   1 +
 utils/numberFormat.js                         |   5 +
 11 files changed, 666 insertions(+), 234 deletions(-)
 create mode 100644 pages/account/[product]/index.vue
 create mode 100644 server/api/user/payments.js
 create mode 100644 utils/jDate.js
 create mode 100644 utils/numberFormat.js

diff --git a/components/Card.vue b/components/Card.vue
index 1bc6bd8..fe63e8c 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -3,7 +3,7 @@
         <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
             <p
                 class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
-                {{props.course?.price == 0 ? 'رایگان' : props.course?.price + ',000'}}
+                {{props.course?.price == 0 ? 'رایگان' : numberFormat(props.course?.price)  }}
                 <span v-if="!props.course?.price == 0" class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
             </p>
             <NuxtImg style="object-fit: cover;" :src="props.course?.image"  alt="laravel"
diff --git a/components/ProgressCard.vue b/components/ProgressCard.vue
index fe2a2b8..20238a0 100644
--- a/components/ProgressCard.vue
+++ b/components/ProgressCard.vue
@@ -4,14 +4,11 @@
           <p
           class="text-black post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
           
-            540,000
-            <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]"
-              >تومان</span
-            >
+         {{ props.item?.price > 0 ? numberFormat(props.item?.price) + 'تومان' : 'رایگان' }}
+     
           </p>
-          <img
-            style="object-fit: cover"
-            src="/public/images/course.png"
+          <NuxtImg style="object-fit: cover;" :src="props.item?.image"
+            :placeholder="[30, 20]"
             alt="laravel"
             class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]"
           />
@@ -20,11 +17,11 @@
         <div
           class="w-full flex flex-col justify-center space-y-[1.042vw] md:space-y-[1.25vw]"
         >
-          <p
+          <nuxt-link :to="`${props.item?.id}`"
             class="mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
           >
-            ترفند های کاربردی پایتون
-          </p>
+        {{ props.item?.name }}
+      </nuxt-link>
 
           <div
             class="flex flex-col justify-between items-center py-[3vw] md:py-[0.7vw] mx-[3vw] md:mx-[0.833vw] border-t"
@@ -45,7 +42,10 @@
         </div>
       </div>
 </template>
-
+<script setup>
+const props = defineProps(['item']);
+console.log(props.item);
+</script>
 
 <style scoped>
 .post::before {
diff --git a/components/product-page/course-details/Course-information.vue b/components/product-page/course-details/Course-information.vue
index c792748..8950dee 100644
--- a/components/product-page/course-details/Course-information.vue
+++ b/components/product-page/course-details/Course-information.vue
@@ -213,7 +213,7 @@
       <h2 v-if="props.props.price > 0"
         class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
       >
-        {{props.props.price}},000
+        {{numberFormat(props.props.price)}}
         <p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
       </h2>
       <h2 v-else
diff --git a/pages/account/[product]/index.vue b/pages/account/[product]/index.vue
new file mode 100644
index 0000000..b9cb0a0
--- /dev/null
+++ b/pages/account/[product]/index.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
+    <product-page-course-detailsHeader :props="data.course" />
+    <div
+      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
+    >
+      <div
+        class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
+      >
+        <product-page-course-detailsDescription :props="data.course" />
+        test
+        <product-page-course-detailsHeadlines :props="data.course" />
+
+        <!-- <product-page-course-detailsComments :props="data.comments" /> -->
+        <div
+          class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
+        >
+          <svg
+            class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
+            viewBox="0 0 10 53"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
+              fill="#0D3F40"
+            />
+          </svg>
+          <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
+            >نظرات</span
+          >
+        </div>
+
+        <!-- comment 1 -->
+        <div
+          v-for="item in data.comments"
+          :key="item.id"
+          class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
+        >
+          <img
+            src="/public/images/client1.png"
+            alt="profile"
+            class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
+          />
+
+          <div class="ps-[3vw] md:ps-[1vw] w-full">
+            <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+              علی مصلحی
+            </p>
+            <div class="thin">
+              <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+                1402/09/14
+              </p>
+              <p
+                class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
+              >
+                {{ item.text }}
+              </p>
+            </div>
+
+            <div
+              v-for="reply in item.replies"
+              :key="reply.id"
+              class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between ps-[16vw] md:ps-[6vw] p-[2vw] md:p-[1.55vw]"
+            >
+              <img
+                src="/public/images/client3.png"
+                alt="profile"
+                class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
+              />
+
+              <div class="ps-[3vw] md:ps-[1vw] w-full">
+                <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                  علی مصلحی
+                </p>
+                <div class="thin">
+                  <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+                    1402/09/14
+                  </p>
+                  <p
+                    class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
+                  >
+                 {{ reply.text }}
+                  </p>
+                </div>
+              </div>
+
+              <!-- <svg
+                @click="sendReplay(reply.id)"
+                class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg> -->
+            </div>
+
+
+
+       
+          </div>
+
+          <svg
+            @click="sendReplay(item.id)"
+            class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
+              stroke="#383E43"
+              stroke-width="1.5"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
+              stroke="#383E43"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <div class="w-full md:w-[23.438vw] text-[#383E43]">
+        <product-page-course-detailsCourse-status :props="data.course" />
+        <product-page-course-detailsCourse-information :props="data.course" />
+      </div>
+    </div>
+
+    <div
+      class="w-[63.438vw] bg-[#F8F8F8] p-[4vw] md:p-[1vw] rounded-[3.846vw] md:rounded-[0.781vw] mt-[6vw] md:mt-[2vw]"
+    >
+      <div class="space-y-[5vw] md:space-y-[1vw]">
+        <div class="flex gap-[1vw]">
+          <img
+            src="/public/images/client1.png"
+            alt=""
+            class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
+          />
+          <div
+            class="space-y-[4vw] mt-[1vw] md:mt-0 ms-[1vw] md:ms-0 md:space-y-0"
+          >
+            <p class="text-[3.59vw] md:text-[0.938vw]">علی مصلحی</p>
+            <p
+              v-if="replayTarget === null"
+              class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
+            >
+              پرسش جدید
+            </p>
+            <p v-else class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
+              پاسخ به علی مصلحی
+            </p>
+          </div>
+        </div>
+        <textarea
+          v-model="comment"
+          class="h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
+          name=""
+          id=""
+          cols="30"
+          rows="10"
+        ></textarea>
+        <div
+          class="flex justify-end gap-[1vw] text-[3.19vw] md:text-[0.833vw] text-white"
+        >
+          <button
+            @click="deleteComment"
+            class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-[#5A6268]"
+          >
+            حذف
+          </button>
+          <button
+            @click="sendComment"
+            class="cursor-pointer h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-primaryGreen"
+          >
+            ثبت
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useToast } from "vue-toastification";
+const toast = useToast();
+const route = useRoute();
+const replayTarget = ref(null);
+const { data, refresh } = await useFetch("/api/productId", {
+  method: "POST",
+  body: {
+    id: route.params.product,
+  },
+});
+console.log(data.value.comments[0]);
+const comment = ref(null);
+
+const sendComment = async () => {
+  if (comment.value === "" || comment.value === null) {
+    return toast.error("متن خود را وارد کنید");
+  }
+  const comments = await useFetch("/api/comments/sendcomment", {
+    method: "POST",
+    query: {
+      id: data.value.course._id,
+    },
+    body: {
+      text: comment.value,
+      parent: replayTarget.value,
+    },
+  });
+  comment.value = null;
+  toast.success("نظر شما با موفقیت ثبت شد");
+  refresh();
+};
+
+const sendReplay = (id) => {
+  replayTarget.value = id;
+};
+const deleteComment = () => {
+  replayTarget.value = null;
+  comment.value = null;
+};
+
+</script>
\ No newline at end of file
diff --git a/pages/account/index.vue b/pages/account/index.vue
index 48fbcac..6b0ef8c 100644
--- a/pages/account/index.vue
+++ b/pages/account/index.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="flex flex-col md:flex-row justify-between w-full thin pb-[25vw] md:pb-0">
+  <div
+    class="flex flex-col md:flex-row justify-between w-full thin pb-[25vw] md:pb-0"
+  >
     <div class="w-full md:w-[36.667vw]">
       <div class="grid grid-cols-2 gap-3">
-
         <div
           class="h-[18.974vw] md:h-[5.469vw] bg-[#EFFAFE] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-[2.051vw] md:px-[1.25vw]"
         >
           <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
-            <p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
+            <p
+              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
+            >
               1 روز
             </p>
             <p
@@ -78,13 +81,15 @@
           </svg>
         </div>
 
-
-        <div
+        <nuxt-link to="/account/my-courses"
           class="h-[18.974vw] md:h-[5.469vw] bg-[#F9F6FF] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-6"
         >
           <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
-            <p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
-              3 دوره
+            <p
+              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
+            >
+            {{ myCourses.data.value.course.length }}  
+            دوره
             </p>
             <p
               class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
@@ -120,13 +125,16 @@
               stroke-linejoin="round"
             />
           </svg>
-        </div>
-        <div
+        </nuxt-link>
+        <nuxt-link to="/account/tickets"
           class="h-[18.974vw] md:h-[5.469vw] bg-[#FFF7F4] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-6"
         >
           <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
-            <p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
-              1 تیکت
+            <p
+              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
+            >
+            {{ tickets.data.value.length }}  
+            تیکت
             </p>
             <p
               class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
@@ -134,20 +142,38 @@
               تیکت ها
             </p>
           </div>
-          <svg 
-          class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
-          viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M36.5625 23.4375C36.5625 20.85 38.6625 18.75 41.25 18.75V16.875C41.25 9.375 39.375 7.5 31.875 7.5H13.125C5.625 7.5 3.75 9.375 3.75 16.875V17.8125C6.3375 17.8125 8.4375 19.9125 8.4375 22.5C8.4375 25.0875 6.3375 27.1875 3.75 27.1875V28.125C3.75 35.625 5.625 37.5 13.125 37.5H31.875C39.375 37.5 41.25 35.625 41.25 28.125C38.6625 28.125 36.5625 26.025 36.5625 23.4375Z" stroke="#FFA766" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M18.75 7.5L18.75 37.5" stroke="#FFA766" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5 5"/>
-            </svg>
-            
-        </div>
-        <div
+          <svg
+            class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
+            viewBox="0 0 45 45"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M36.5625 23.4375C36.5625 20.85 38.6625 18.75 41.25 18.75V16.875C41.25 9.375 39.375 7.5 31.875 7.5H13.125C5.625 7.5 3.75 9.375 3.75 16.875V17.8125C6.3375 17.8125 8.4375 19.9125 8.4375 22.5C8.4375 25.0875 6.3375 27.1875 3.75 27.1875V28.125C3.75 35.625 5.625 37.5 13.125 37.5H31.875C39.375 37.5 41.25 35.625 41.25 28.125C38.6625 28.125 36.5625 26.025 36.5625 23.4375Z"
+              stroke="#FFA766"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M18.75 7.5L18.75 37.5"
+              stroke="#FFA766"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-dasharray="5 5"
+            />
+          </svg>
+        </nuxt-link>
+        <nuxt-link to="/account/wallet"
           class="h-[18.974vw] md:h-[5.469vw] bg-[#FEEFF6] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-[1.25vw]"
         >
           <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
-            <p class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]">
-              0 تومان
+            <p
+              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
+            >
+            {{ numberFormat(balance.data.value) }}  
+            تومان
             </p>
             <p
               class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
@@ -156,7 +182,7 @@
             </p>
           </div>
           <svg
-          class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
+            class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
             viewBox="0 0 45 45"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
@@ -190,7 +216,7 @@
               stroke-linejoin="round"
             />
           </svg>
-        </div>
+        </nuxt-link>
       </div>
 
       <div class="lastTickets mt-[20vw] md:mt-[2.917vw]">
@@ -199,10 +225,13 @@
             <p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
               آخرین تیکت ها
             </p>
-            <p class="text-[2.836vw] md:text-[0.741vw] flex">
+            <nuxt-link
+              to="/account/tickets"
+              class="text-[2.836vw] md:text-[0.741vw] flex"
+            >
               همه ی تیکت ها
               <svg
-                class="ms-[2.051vw] w-[4.103vw] md:w-[1.042vw]"
+                class="ms-[1.051vw] w-[4.103vw] md:w-[1.042vw]"
                 viewBox="0 0 20 21"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -224,9 +253,27 @@
                   stroke-linejoin="round"
                 />
               </svg>
-            </p>
+            </nuxt-link>
           </div>
-          <div class="flex justify-between items-center mt-[1.25vw] px-2">
+          <div
+            v-for="ticket in lastTickets"
+            :key="ticket.id"
+            class="flex justify-between items-center mt-[1.25vw] px-2"
+          >
+            <p class="text-[3.19vw] md:text-[0.833vw] text-[#000]">
+              {{ ticket.subject }}
+            </p>
+            <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
+              {{ jDate(ticket.createdAt) }}
+            </p>
+            <nuxt-link
+              to="/account/tickets"
+              class="flex justify-center items-center text-[2.518vw] md:text-[0.658vw] px-[2.564vw] md:px-[0.417vw] py-[2.051vw] md:py-[0.521vw] text-[#2ED573] bg-[#2ED5731A] rounded-[2.051vw] md:rounded-[0.521vw]"
+            >
+              مشاهده
+            </nuxt-link>
+          </div>
+          <!-- <div class="flex justify-between items-center mt-[0.833vw] px-2">
             <p class="text-[3.19vw] md:text-[0.833vw] text-[#000]">
               طراحی سایت
             </p>
@@ -238,20 +285,7 @@
             >
               پاسخ داده شده
             </p>
-          </div>
-          <div class="flex justify-between items-center mt-[0.833vw] px-2">
-            <p class="text-[3.19vw] md:text-[0.833vw] text-[#000]">
-              طراحی سایت
-            </p>
-            <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-              1402/09/12
-            </p>
-            <p
-              class="flex justify-center items-center text-[2.518vw] md:text-[0.658vw] px-[2.564vw] md:px-[0.417vw] py-[2.051vw] md:py-[0.521vw] text-[#2ED573] bg-[#2ED5731A] rounded-[2.051vw] md:rounded-[0.521vw]"
-            >
-              پاسخ داده شده
-            </p>
-          </div>
+          </div> -->
         </div>
       </div>
 
@@ -261,7 +295,10 @@
             <p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
               آخرین دوره ها
             </p>
-            <p class="text-[2.836vw] md:text-[0.741vw] flex">
+            <nuxt-link
+              to="/account/my-courses"
+              class="text-[2.836vw] md:text-[0.741vw] flex"
+            >
               همه ی دوره های ثبت نام شده
               <svg
                 class="ms-2 w-[4.103vw] md:w-[1.042vw] h-[4.103vw] md:h-[1.042vw]"
@@ -286,12 +323,16 @@
                   stroke-linejoin="round"
                 />
               </svg>
-            </p>
+            </nuxt-link>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 mt-[3vw] md:mt-[1.25vw] gap-[3vw] md:gap-[1.25vw]">
-            <ProgressCard />
-            <ProgressCard />
+          <div
+            class="grid grid-cols-1 md:grid-cols-2 mt-[3vw] md:mt-[1.25vw] gap-[3vw] md:gap-[1.25vw]"
+          >
+            <div v-for="item in lastCourses" :key="item.id">
+              <ProgressCard :item="item" />
+            </div>
+   
           </div>
         </div>
       </div>
@@ -302,9 +343,13 @@
         class="bg-white mb-[1.25vw] pinkShadow p-[5vw] md:p-[1.25vw] flex flex-col profile w-full md:w-[23.385vw] h-[108.872vw] md:h-[26.25vw] rounded-[3.846vw] md:rounded-[0.781vw] space-y-[7vw] md:space-y-[1.5vw]"
       >
         <div class="flex justify-between items-center">
-          <p class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold">پروفایل</p>
+          <p
+            class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold"
+          >
+            پروفایل
+          </p>
           <svg
-          class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
+            class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
             viewBox="0 0 27 27"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
@@ -332,10 +377,14 @@
             class="h-[27.949vw] md:h-[7.24vw] w-[27.949vw] md:w-[7.24vw] rounded-full"
             alt=""
           />
-          <p class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold mt-[1.25vw]">
+          <p
+            class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold mt-[1.25vw]"
+          >
             علی مصلحی
           </p>
-          <p class="font-[400] text-[3.19vw] md:text-[0.833vw] text-[#878787] mt-[0.417vw]">
+          <p
+            class="font-[400] text-[3.19vw] md:text-[0.833vw] text-[#878787] mt-[0.417vw]"
+          >
             alimoslehi@
           </p>
         </div>
@@ -356,7 +405,10 @@
               stroke-linejoin="round"
             />
           </svg>
-          <span class="text-[#383E43] text-[4.038vw] md:text-[0.938vw] font-[600]">آذر</span>
+          <span
+            class="text-[#383E43] text-[4.038vw] md:text-[0.938vw] font-[600]"
+            >آذر</span
+          >
           <svg
             class="h-[4.615vw] md:h-[1.25vw] w-[4.615vw] md:w-[1.25vw]"
             viewBox="0 0 24 24"
@@ -373,14 +425,18 @@
             />
           </svg>
         </div>
-        <div class="grid grid-cols-5 md:grid-cols-7 mt-[0.833vw] justify-center">
+        <div
+          class="grid grid-cols-5 md:grid-cols-7 mt-[0.833vw] justify-center"
+        >
           <div class="hidden md:flex flex-col items-center">
             <p
               class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
             >
               18
             </p>
-            <p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
+            <p
+              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
+            >
               سه شنبه
             </p>
           </div>
@@ -390,7 +446,9 @@
             >
               17
             </p>
-            <p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
+            <p
+              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
+            >
               دو شنبه
             </p>
           </div>
@@ -400,7 +458,9 @@
             >
               16
             </p>
-            <p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
+            <p
+              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
+            >
               یک شنبه
             </p>
           </div>
@@ -424,7 +484,9 @@
             >
               14
             </p>
-            <p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
+            <p
+              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
+            >
               جمعه
             </p>
           </div>
@@ -434,7 +496,9 @@
             >
               13
             </p>
-            <p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
+            <p
+              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
+            >
               پنج شنبه
             </p>
           </div>
@@ -444,7 +508,9 @@
             >
               12
             </p>
-            <p class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]">
+            <p
+              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
+            >
               چهار شنبه
             </p>
           </div>
@@ -456,15 +522,20 @@
 
 
 <script setup>
+const tickets = await useFetch("/api/ticket");
+const lastTickets = tickets.data.value.slice(-2);
+const myCourses = await useFetch("/api/auth/me");
+const lastCourses = myCourses.data.value.course.slice(-2);
+const  balance = await useFetch("/api/user/balance");
+console.log(balance.data);
 definePageMeta({
-    middleware: 'auth',
-})
+  middleware: "auth",
+});
 </script>
 
 
 
 <style scoped>
-
 .activeDay {
   background: linear-gradient(0deg, #0e8789 0%, rgba(34, 164, 166, 0.8) 100%);
   width: 2.917vw;
@@ -482,5 +553,4 @@ definePageMeta({
     padding-top: 3vw;
   }
 }
-
 </style>
\ No newline at end of file
diff --git a/pages/account/my-courses.vue b/pages/account/my-courses.vue
index f4d798b..ae8f6e1 100644
--- a/pages/account/my-courses.vue
+++ b/pages/account/my-courses.vue
@@ -3,9 +3,11 @@
         <tabs nav-item-active-class="text-primaryGreen relative" nav-class="scrolBar flex gap-[2vw] md:gap-[0.8vw] md:border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]" :options="{ useUrlFragment: false }">
             <tab :name=tab1>
                 <div class="me-[4vw] grid grid-cols-1 md:grid-cols-3 mt-[6vw] md:mt-[1.25vw] gap-[1vw]">
-                  <ProgressCard />
-                  <ProgressCard />
-                  
+          
+                  <div v-for="item in myCourses.data.value.course" :key="item.id">
+                      <ProgressCard :item="item"/>
+
+                  </div>
                   </div>
             </tab>
             <tab :name=tab2>
@@ -24,6 +26,8 @@
 <script setup>
 import ProgressCard from './../../../components/ProgressCard.vue'
 import {Tabs, Tab} from 'vue3-tabs-component';
+const myCourses = await useFetch('/api/auth/me')
+console.log(myCourses.data.value.course);
 const tab1 =
 `<p 
 class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
diff --git a/pages/account/tickets.vue b/pages/account/tickets.vue
index fa6bb84..db2e6d3 100644
--- a/pages/account/tickets.vue
+++ b/pages/account/tickets.vue
@@ -17,11 +17,11 @@
             <div class="flex flex-col flex-col-reverse pb-[10vw]">
               <ul
                 class="space-y-[2vw] md:space-y-[0.5vw] mt-[0.5vw] border-b"
-                v-for="(ticket, index) in tickets"
+                v-for="ticket in tickets"
                 :key="ticket.id"
               >
             
-              <li class="flex justify-between pt-[1.5vw] md:pt-0">
+              <li class="flex justify-between  items-center pt-[1.5vw] md:pt-0">
              
              
                 <p
@@ -29,15 +29,12 @@
                   class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
                     {{ ticket.subject }}
                   </p>
-          
-          
+
+
                   <p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-                    <span v-show="num === index"
-                    v-for="(item, num) in jalali" :key="num"
-                    >{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
+                    {{ jDate(ticket.createdAt) }}
                   </p>
              
-             
                   <div class="basis-2/6 flex items-center justify-end gap-[1vw]">
                     <button
                       @click="openTicket(ticket.id)"
@@ -45,11 +42,11 @@
                     >
                       مشاوره
                     </button>
-                    <button
+                    <!-- <button
                       class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
                     >
                       پاسخ داده شده
-                    </button>
+                    </button> -->
                   </div>
                 </li>
                 <div class="chatBox">
@@ -75,14 +72,11 @@
                         <p class="text-[3.59vw] md:text-[1.055vw]">
                           {{ message.createdBy && "کاربر مهمان" }} {{ }}
                         </p>
-                        <!-- <p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
-                          {{ message.createdAt }}
-                        </p> -->
-                        <p  class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
-                          <span v-show="num === index"
-                          v-for="(item, num) in jalali" :key="num"
-                          >{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
+                        <p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
+                          {{ jDate(message.createdAt) }}
                         </p>
+              
+
                         <p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
                           {{ message.content }}
                         </p>
@@ -129,26 +123,29 @@
                 v-show="ticket.status === 'active'"
               >
                 <li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
+                
                   <p 
                   @click="openTicket(ticket.id)"
-                  class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                  class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
                     {{ ticket.subject }}
                   </p>
-                  <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-                    {{ ticket.createdAt }}
+
+                  <p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
+                    {{ jDate(ticket.createdAt) }}
                   </p>
-                  <div class="flex items-center gap-[1vw]">
+
+                  <div class="basis-2/6 flex items-center justify-end gap-[1vw]">
                     <button
                     @click="openTicket(ticket.id)"
                       class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
                     >
                       مشاوره
                     </button>
-                    <button
+                    <!-- <button
                       class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
                     >
                       پاسخ داده شده
-                    </button>
+                    </button> -->
                   </div>
                 </li>
                 <div class="chatBox">
@@ -222,23 +219,23 @@
 
                 <li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
                 
-                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                  <p class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
                     {{ ticket.subject }}
                   </p>
-                  <p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
-                    {{ ticket.createdAt }}
+                  <p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
+                    {{ jDate(ticket.createdAt) }}
                   </p>
-                  <div class="flex items-center gap-[1vw]">
+                  <div class="basis-2/6 flex items-center justify-end flex items-center gap-[1vw]">
                     <button
                       class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
                     >
                       مشاوره
                     </button>
-                    <button
+                    <!-- <button
                       class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[20.769vw] md:w-[5.625vw] rounded-[2.051vw] md:rounded-[0.521vw]"
                     >
                       پاسخ داده شده
-                    </button>
+                    </button> -->
                   </div>
                 </li>
                 <div class="chatBox">
@@ -422,10 +419,11 @@ const sendTicket = async () => {
       subject: subject.value,
     },
   });
-  // load()
+   load()
   addTicketForm.value = false;
   subject.value = null;
-  location.reload()
+  toast.success('تیکت جدید با موفقیت ثبت شد')
+  // location.reload()
 
 };
 
diff --git a/pages/account/wallet.vue b/pages/account/wallet.vue
index 04e671f..dd59ee0 100644
--- a/pages/account/wallet.vue
+++ b/pages/account/wallet.vue
@@ -1,127 +1,216 @@
 <template>
-    <div class="flex flex-col md:flex-row justify-between">
-        <div class="w-full md:w-[41.5vw]">
-            <tabs nav-item-active-class="text-primaryGreen relative" nav-class="scrolBar flex  gap-[2vw] md:gap-[0.8vw] border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]" :options="{ useUrlFragment: false }">
-              
-              
-              
-              <div class="relative flex w-full flex-col-reverse md:flex-row">
-                  <div class="w-full">
-                      <tab :name=tab1>
-                          <ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
-                              <li class="flex justify-between items-center">
-                                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">طراحی سایت</p>
-                                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">60,000</p>
-                                  <p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">1402,09,12</p>
-                                      <button class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]">واریز</button>
-                              </li>
-                              <li class="flex justify-between items-center">
-                                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">طراحی سایت</p>
-                                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">60,000</p>
-                                  <p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">1402,09,12</p>
-                                  <div class="flex items-center gap-[1vw]">
-                                      <button class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]">برداشت</button>
-                                  </div>
-                              </li>
-                          </ul>
-                      </tab>
-                      <tab :name=tab2>
-                          محتوا دوم
-                      </tab>
-                      <tab :name=tab3>
-                          محتوا سوم
-                      </tab>
-
-                  </div>
-             
-    
-    
-    
-        
-                    <div class="my-[6vw] md:my-0 relative md:absolute left-0 md:-left-[20vw] absolute flexBox smallShadow w-full md:w-[18.906vw] h-[87.692vw] md:h-[20.729vw] rounded-[0.781vw]">
-                        <div class="w-[75vw] md:w-[17.229vw] space-y-[8vw] md:space-y-[3vw]">
-                            <div class="flex justify-between">
-                                <p class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold">موجودی حساب</p>
-                                <svg 
-                                class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
-                                viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M14.625 10.125H7.875" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M24.7498 12.3412V14.6588C24.7498 15.2775 24.2548 15.7837 23.6248 15.8062H21.4197C20.2047 15.8062 19.091 14.9175 18.9898 13.7025C18.9223 12.9937 19.1922 12.33 19.6647 11.8687C20.081 11.4412 20.6547 11.1938 21.2847 11.1938H23.6248C24.2548 11.2163 24.7498 11.7225 24.7498 12.3412Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M19.665 11.8687C19.1925 12.33 18.9225 12.9937 18.99 13.7025C19.0913 14.9175 20.205 15.8062 21.42 15.8062H23.625V17.4375C23.625 20.8125 21.375 23.0625 18 23.0625H7.875C4.5 23.0625 2.25 20.8125 2.25 17.4375V9.5625C2.25 6.5025 4.095 4.365 6.96375 4.005C7.25625 3.96 7.56 3.9375 7.875 3.9375H18C18.2925 3.9375 18.5737 3.94874 18.8437 3.99374C21.7462 4.33124 23.625 6.48 23.625 9.5625V11.1938H21.285C20.655 11.1938 20.0812 11.4412 19.665 11.8687Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                                    </svg>
-                            </div>
-                            <p class="w-full text-end text-[4.544vw] md:text-[1.055vw]">
-                                {{ data }},000 
-                                <span class="text-[2.836vw] md:text-[0.741vw] font-[400]"> 
-                                    تومان        
-                                </span>
-                            </p>
-                            <div class="pt-[10vw] md:pt-0 space-y-[3vw] md:space-y-[1vw]">
-                                <p class="text-[3.19vw] md:text-[0.833vw] text-[#383E43]">مبلغ مورد نظر</p>
-                                <input v-model="price" type="number" placeholder="تومان" class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]">
-                                <button @click="charge" class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]">شارژ حساب</button>
-                            </div>
-                        </div>
-                    </div>
+  <div class="flex flex-col md:flex-row justify-between">
+    <div class="w-full md:w-[41.5vw]">
+      <tabs
+        nav-item-active-class="text-primaryGreen relative"
+        nav-class="scrolBar flex  gap-[2vw] md:gap-[0.8vw] border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]"
+        :options="{ useUrlFragment: false }"
+      >
+        <div class="relative flex w-full flex-col-reverse md:flex-row">
+          <div class="w-full">
+            <tab :name="tab1">
+              <ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
+                <li
+                  v-for="(item, index) in payments.data.value"
+                  :key="index"
+                  class="flex justify-between items-center"
+                >
+                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                    {{ item.reason }}
+                  </p>
+                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                  {{ numberFormat(item.amount) }}
+                  </p>
+                  <p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">
+                    {{ jDate(item.createdAt) }}
+                  </p>
+                  <button
+                    v-if="item.reason === 'deposit'"
+                    class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                  >
+                    واریز
+                  </button>
+                  <button
+                    v-else
+                    class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                  >
+                    برداشت
+                  </button>
+                </li>
+              </ul>
+            </tab>
+            <tab :name="tab2">
+              <ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
+                <li
+                  v-for="(item, index) in payments.data.value"
+                  :key="index"
+                  v-show="item.reason === 'deposit'"
+                  class="flex justify-between items-center"
+                >
+                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                    {{ item.reason }}
+                  </p>
+                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                    {{ numberFormat(item.amount) }}
+                  </p>
+                  <p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">
+                    {{ jDate(item.createdAt) }}
+                  </p>
+                  <button
+                    v-if="item.reason === 'deposit'"
+                    class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                  >
+                    واریز
+                  </button>
+                  <button
+                    v-else
+                    class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                  >
+                    برداشت
+                  </button>
+                </li>
+              </ul>
+            </tab>
+            <tab :name="tab3">
+              <ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
+                <li
+                  v-for="(item, index) in payments.data.value"
+                  :key="index"
+                  v-show="item.reason === 'withdrawal'"
+                  class="flex justify-between items-center"
+                >
+                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                    {{ item.reason }}
+                  </p>
+                  <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
+                    {{ numberFormat(item.amount) }}
+                  </p>
+                  <p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">
+                    {{ jDate(item.createdAt) }}
+                  </p>
+                  <button
+                    v-if="item.reason === 'deposit'"
+                    class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                  >
+                    واریز
+                  </button>
+                  <button
+                    v-else
+                    class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]"
+                  >
+                    برداشت
+                  </button>
+                </li>
+              </ul>
+            </tab>
+          </div>
 
+          <div
+            class="my-[6vw] md:my-0 relative md:absolute left-0 md:-left-[20vw] absolute flexBox smallShadow w-full md:w-[18.906vw] h-[87.692vw] md:h-[20.729vw] rounded-[0.781vw]"
+          >
+            <div
+              class="w-[75vw] md:w-[17.229vw] space-y-[8vw] md:space-y-[3vw]"
+            >
+              <div class="flex justify-between">
+                <p
+                  class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold"
+                >
+                  موجودی حساب
+                </p>
+                <svg
+                  class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
+                  viewBox="0 0 27 27"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M14.625 10.125H7.875"
+                    stroke="#0D3F40"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M24.7498 12.3412V14.6588C24.7498 15.2775 24.2548 15.7837 23.6248 15.8062H21.4197C20.2047 15.8062 19.091 14.9175 18.9898 13.7025C18.9223 12.9937 19.1922 12.33 19.6647 11.8687C20.081 11.4412 20.6547 11.1938 21.2847 11.1938H23.6248C24.2548 11.2163 24.7498 11.7225 24.7498 12.3412Z"
+                    stroke="#0D3F40"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M19.665 11.8687C19.1925 12.33 18.9225 12.9937 18.99 13.7025C19.0913 14.9175 20.205 15.8062 21.42 15.8062H23.625V17.4375C23.625 20.8125 21.375 23.0625 18 23.0625H7.875C4.5 23.0625 2.25 20.8125 2.25 17.4375V9.5625C2.25 6.5025 4.095 4.365 6.96375 4.005C7.25625 3.96 7.56 3.9375 7.875 3.9375H18C18.2925 3.9375 18.5737 3.94874 18.8437 3.99374C21.7462 4.33124 23.625 6.48 23.625 9.5625V11.1938H21.285C20.655 11.1938 20.0812 11.4412 19.665 11.8687Z"
+                    stroke="#0D3F40"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
               </div>
-
-
-
-
-
-            </tabs>
+              <p class="w-full text-end text-[4.544vw] md:text-[1.055vw]">
+            {{ numberFormat(data) }}
+                <span class="text-[2.836vw] md:text-[0.741vw] font-[400]">
+                  تومان
+                </span>
+              </p>
+              <div class="pt-[10vw] md:pt-0 space-y-[3vw] md:space-y-[1vw]">
+                <p class="text-[3.19vw] md:text-[0.833vw] text-[#383E43]">
+                  مبلغ مورد نظر <span v-if="price > 0" class="text-[0.6vw] font-bold text-end">{{ numberFormat(price) }} تومان</span>
+                </p>
+                <input
+                  v-model="price"
+                  type="number"
+                  name="price"
+                  placeholder="تومان"
+                  class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]"
+                />
+                <button
+                  @click="charge"
+                  class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]"
+                >
+                  شارژ حساب
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
-    
-       
+      </tabs>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {Tabs, Tab} from 'vue3-tabs-component';
+import { Tabs, Tab } from "vue3-tabs-component";
 
-const {data, refresh} = await useFetch('/api/user/balance')
-const price = ref(null)
-const charge = async () =>{
-    console.log(price.value);
-    const toPay = await useFetch("/api/user/add", {
+const { data, refresh } = await useFetch("/api/user/balance");
+const payments = await useFetch("/api/user/payments");
+
+
+const price = ref(null);
+const charge = async () => {
+  const toPay = await useFetch("/api/user/add", {
     method: "POST",
     body: {
       amount: price.value,
-    }
+      paymentNumber: "411",
+      reason: "deposit",
+    },
   });
-  refresh()
-  price.value = null
-  console.log(toPay);
-}
-console.log('wallet,' , data.value);
+  refresh();
+  price.value = null;
+};
 
-
-
-
-
-
-
-
-
-
-
-
-
-const tab1 =
-`<p 
+const tab1 = `<p 
 class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
 <svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.25 9.56808H24.75" stroke="#0D3F40" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.75 18.5681H9" stroke="#0D3F40" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.8125 18.5681H16.3125" stroke="#0D3F40" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.245 3.94308H19.7438C23.7488 3.94308 24.75 4.93308 24.75 8.88183V18.1181C24.75 22.0668 23.7488 23.0568 19.755 23.0568H7.245C3.25125 23.0681 2.25 22.0781 2.25 18.1293V8.88183C2.25 4.93308 3.25125 3.94308 7.245 3.94308Z" stroke="#0D3F40" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.25 9.56808H24.75" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.75 18.5681H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.8125 18.5681H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.245 3.94308H19.7438C23.7488 3.94308 24.75 4.93308 24.75 8.88183V18.1181C24.75 22.0668 23.7488 23.0568 19.755 23.0568H7.245C3.25125 23.0681 2.25 22.0781 2.25 18.1293V8.88183C2.25 4.93308 3.25125 3.94308 7.245 3.94308Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 
 همه تراکنش ها
-</p>`
-const tab2 =
-`<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
+</p>`;
+const tab2 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
     <svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.25 9.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6.75 18.5625H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
@@ -132,9 +221,8 @@ const tab2 =
 </svg>
 
 واریزی ها
-</p>`
-const tab3 =
-`<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
+</p>`;
+const tab3 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
     <svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.25 9.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M6.75 18.5625H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
@@ -146,26 +234,29 @@ const tab3 =
 
 
 برداشت ها
-</p>`
-
-
+</p>`;
 </script>
 
 <style>
-
-.tabs-component .tabs-component-tab .is-active p svg path{
-    stroke: #0D3F40;
+.tabs-component .tabs-component-tab .is-active p svg path {
+  stroke: #0d3f40;
 }
-.tabs-component .tabs-component-tab .is-active::before{
-content: '';
-position: absolute;
-width: 100%;
-height: 0.104vw;
-top: 2.1vw;
-background-color: #0D3F40;
+.tabs-component .tabs-component-tab .is-active::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 0.104vw;
+  top: 2.1vw;
+  background-color: #0d3f40;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
-
-
-
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
 </style>
\ No newline at end of file
diff --git a/server/api/user/payments.js b/server/api/user/payments.js
new file mode 100644
index 0000000..823a034
--- /dev/null
+++ b/server/api/user/payments.js
@@ -0,0 +1,19 @@
+export default defineEventHandler(async (event) => {
+    const { public: { apiBase } } = useRuntimeConfig();
+    const token = getCookie(event, 'token');
+    try {
+        const payments = await $fetch(`${apiBase}/user/payments`, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+        });
+console.log('server', payments);
+        return payments;
+    } catch (error) {
+
+        return error;
+    }
+
+})
\ No newline at end of file
diff --git a/utils/jDate.js b/utils/jDate.js
new file mode 100644
index 0000000..b8e533f
--- /dev/null
+++ b/utils/jDate.js
@@ -0,0 +1 @@
+export const jDate = (d) => new Date(d).toLocaleDateString('fa-IR')
\ No newline at end of file
diff --git a/utils/numberFormat.js b/utils/numberFormat.js
new file mode 100644
index 0000000..f490379
--- /dev/null
+++ b/utils/numberFormat.js
@@ -0,0 +1,5 @@
+// export const numberFormat = (number) => new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)
+
+export const numberFormat = (number) => {
+    return new Intl.NumberFormat().format(number)
+}
\ No newline at end of file