From 22224c80036922c10abddae08eace9a476dcd3b4 Mon Sep 17 00:00:00 2001
From: ='fauz <='fauzgabriel@gmail.com>
Date: Thu, 23 Oct 2025 18:20:58 +0700
Subject: [PATCH] point history

---
 src/pages/Login.vue        | 62 ++++++++++++++++---------------
 src/pages/Pointhistory.vue | 75 ++++++++++++++++++++++++--------------
 src/services/missions.js   | 32 +++++++++++-----
 3 files changed, 102 insertions(+), 67 deletions(-)

diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 9c91564..a2ff2e6 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -25,39 +25,41 @@
 
       <!-- Form -->
       <div class="w-full">
-        <div class="mb-4">
-          <input
-            v-model="username"
-            placeholder="Username"
-            type="text"
-            class="w-full h-12 px-4 py-2 text-gray-700 bg-gray-50 border border-gray-300 rounded-2xl
-                   focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-lime-400"
-          />
-        </div>
+        <form @submit.prevent="login">
+          <div class="mb-4">
+            <input
+              v-model="username"
+              placeholder="Username"
+              type="text"
+              class="w-full h-12 px-4 py-2 text-gray-700 bg-gray-50 border border-gray-300 rounded-2xl
+                    focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-lime-400"
+            />
+          </div>
 
-        <div class="mb-6">
-          <input
-            v-model="password"
-            type="password"
-            placeholder="Password"
-            class="w-full h-12 px-4 py-2 text-gray-700 bg-gray-50 border border-gray-300 rounded-2xl
-                   focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-lime-400"
-          />
-        </div>
+          <div class="mb-6">
+            <input
+              v-model="password"
+              type="password"
+              placeholder="Password"
+              class="w-full h-12 px-4 py-2 text-gray-700 bg-gray-50 border border-gray-300 rounded-2xl
+                    focus:outline-none focus:ring-2 focus:ring-lime-400 focus:border-lime-400"
+            />
+          </div>
 
-        <button
-          @click="login"
-          class="w-full h-12 bg-lime-500 text-white font-semibold rounded-2xl 
-                 hover:bg-lime-400 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"
-        >
-          LOGIN
-        </button>
+          <button
+            @click="login"
+            class="w-full h-12 bg-lime-500 text-white font-semibold rounded-2xl 
+                  hover:bg-lime-400 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"
+          >
+            LOGIN
+          </button>
 
-        <div class="w-full flex items-center justify-center mt-4">
-          <router-link to="/register" class="text-blue-600 font-semibold hover:underline">
-            REGISTER
-          </router-link>
-        </div>
+          <div class="w-full flex items-center justify-center mt-4">
+            <router-link to="/register" class="text-blue-600 font-semibold hover:underline">
+              REGISTER
+            </router-link>
+          </div>
+        </form>
       </div>
     </div>
   </div>
diff --git a/src/pages/Pointhistory.vue b/src/pages/Pointhistory.vue
index 62a8548..077cbfa 100644
--- a/src/pages/Pointhistory.vue
+++ b/src/pages/Pointhistory.vue
@@ -28,7 +28,7 @@
     <div class="p-4 flex justify-center">
       <div class="bg-gradient-to-b from-gray-400 to-slate-500 rounded-2xl p-6 text-center w-full max-w-sm shadow-lg backdrop-blur-md animate-[pulse_3s_infinite]">
         <p class="text-md text-black font-bold">Total Poin </p>
-        <h2 class="text-4xl font-bold text-yellow-300">{{ totalPoints }}</h2>
+        <h2 class="text-4xl font-bold text-yellow-300">{{ myTotalPoint }}</h2>
       </div>
     </div>
 
@@ -56,15 +56,15 @@
           class="flex justify-between items-center bg-white bg-opacity-15 backdrop-blur-md rounded-xl p-4 shadow hover:bg-opacity-25 transition-all"
         >
           <div>
-            <h3 class="font-semibold text-black">{{ entry.activity }} {{ index }}</h3>
-            <p class="text-sm text-black">{{ entry.source }}</p>
-            <p class="text-xs text-black">{{ entry.date }}</p>
+            <h3 class="font-semibold text-black">{{ entry.mission?.name || 'Unknown Mission'}} {{ index }}</h3>
+            <p class="text-sm text-black">{{ entry.mission?.category }}</p>
+            <p class="text-xs text-black">{{ entry.completed_at }}</p>
           </div>
           <span
             class="font-bold text-lg"
             :class="entry.points > 0 ? 'text-orange-300' : 'text-red-300'"
           >
-            {{ entry.points > 0 ? '+' : '' }}{{ entry.points }}
+            {{ entry.points > 0 ? '+' : '' }}{{ entry.point }}
           </span>
         </div>
       </transition-group>
@@ -87,33 +87,54 @@ export default{
 }
 </script>
 <script setup>
-import { ref, computed } from "vue";
+  import { ref, computed, onMounted } from "vue";
+  import { getUserPoint } from "@/services/missions";
 
-// Data contoh (bisa diganti dari backend)
-const pointHistory = ref([
-  { id: 1, activity: "Menang Game Word Spells", source: "Game", points: 30, date: "2025-10-21 10:22" },
-  { id: 2, activity: "Membaca artikel motivasi", source: "Content", points: 10, date: "2025-10-21 12:00" },
-  { id: 3, activity: "Membaca manga positif", source: "Manga", points: 15, date: "2025-10-22 09:15" },
-  { id: 4, activity: "Kehilangan streak harian", source: "Penalty", points: -5, date: "2025-10-22 09:20" },
-  { id: 5, activity: "Menjawab quiz refleksi diri", source: "Quiz", points: 25, date: "2025-10-22 11:30" },
-]);
+  const myTotalPoint = ref(0);
+  
+  // Data contoh (bisa diganti dari backend)
+  const pointHistory = ref([
+    { id: 1, activity: "Menang Game Word Spells", source: "Game", points: 30, date: "2025-10-21 10:22" },
+    { id: 2, activity: "Membaca artikel motivasi", source: "Content", points: 10, date: "2025-10-21 12:00" },
+    { id: 3, activity: "Membaca manga positif", source: "Manga", points: 15, date: "2025-10-22 09:15" },
+    { id: 4, activity: "Kehilangan streak harian", source: "Penalty", points: -5, date: "2025-10-22 09:20" },
+    { id: 5, activity: "Menjawab quiz refleksi diri", source: "Quiz", points: 25, date: "2025-10-22 11:30" },
+  ]);
 
-// Filter kategori
-const categories = ["Semua", "Game", "Content", "Manga", "Quiz", "Penalty"];
-const selectedCategory = ref("Semua");
+  // Filter kategori
+  const categories = ["Semua", "Game", "Content", "Manga", "Quiz", "Penalty"];
+  const selectedCategory = ref("Semua");
 
-// Hitung total poin
-const totalPoints = computed(() =>
-  pointHistory.value.reduce((sum, e) => sum + e.points, 0)
-);
+  // Hitung total poin
+  // const totalPoints = computed(() =>
+  //   pointHistory.value.reduce((sum, e) => sum + e.points, 0)
+  // );
 
-// Filter sesuai kategori
-const filteredHistory = computed(() => {
-  if (selectedCategory.value === "Semua") return pointHistory.value;
-  return pointHistory.value.filter(
-    e => e.source.toLowerCase() === selectedCategory.value.toLowerCase()
+  // Filter sesuai kategori
+  const filteredHistory = computed(() => {
+    if (selectedCategory.value === "Semua") return pointHistory.value;
+    return pointHistory.value.filter(
+      e => e.category.toLowerCase() === selectedCategory.value.toLowerCase()
+    );
+  });
+
+  
+  const totalPoints = computed(() =>
+    pointHistory.value.reduce((sum, e) => sum + e.point, 0)
   );
-});
+
+
+  async function  getHistory(){
+    const histories = await getUserPoint();
+    const myPointHistory = histories.myTask;
+    myTotalPoint.value =totalPoints //histories.myTaskCount
+    pointHistory.value = myPointHistory
+  }
+
+  onMounted(() => {
+    getHistory();
+  });
+
 </script>
 
 <style scoped>
diff --git a/src/services/missions.js b/src/services/missions.js
index 9e3fb19..1a63a00 100644
--- a/src/services/missions.js
+++ b/src/services/missions.js
@@ -17,6 +17,7 @@ export const getMissions = async () => {
       ...data,
       count: activeMissions.length,
       results: activeMissions,
+      allMissions: missions
     };
 };
 
@@ -45,22 +46,33 @@ export const updateMissionLog = async(missionId ,data = {}) =>{
     });
 }
 
+
 export const getUserPoint = async() =>{
     const auth = useAuthStore();
     const user = auth.user
-    console.log(`User Data: ${JSON.stringify(user)}`)
+    const [missions, missionLogs] = await Promise.all([getMissions(), getMissionLogs()]);
+    const userLogs = missionLogs.results.filter((mlog) => mlog.user_id ===  user.id);    
 
-    // getting points
-    const resPoint = await getMissionLogs();
-    console.log(`Missions Logs: ${JSON.stringify(resPoint)}`)
-    const userLogs = resPoint.results.filter((log) => log.user_id === user.id);
-    const myPoints = userLogs.reduce((total, log) => total + log.point, 0);
+    const combine = userLogs.map(
+        log => {
+            const missionDetail = missions.allMissions.find((mission) => mission.id === log.mission);
+            
+            return {
+                ...log,
+                mission: missionDetail || null
+            }
+        }
+    );
     
+    const myPoints = combine.reduce((total, log) => total + log.point, 0);
+    const activeMissions = missions.activeMissions || [];
+    const taskCount = activeMissions.length;
+
     return {
-        task: resPoint,
-        taskCount: resPoint.count,
-        myTask: userLogs,
-        myTaskCount: userLogs.length,
+        task: activeMissions,
+        taskCount: taskCount,
+        myTask: combine,
+        myTaskCount: combine.length,
         myPoints,
     };
 }
\ No newline at end of file