point history

src/pages/Login.vue

@@ -25,6 +25,7 @@
 
       <!-- Form -->
       <div class="w-full">
+        <form @submit.prevent="login">
           <div class="mb-4">
             <input
               v-model="username"
@@ -58,6 +59,7 @@
               REGISTER
             </router-link>
           </div>
+        </form>
       </div>
     </div>
   </div>

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([
+  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(() => {
+  // Filter sesuai kategori
+  const filteredHistory = computed(() => {
     if (selectedCategory.value === "Semua") return pointHistory.value;
     return pointHistory.value.filter(
-    e => e.source.toLowerCase() === selectedCategory.value.toLowerCase()
+      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>

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 {
-        task: resPoint,
-        taskCount: resPoint.count,
-        myTask: userLogs,
-        myTaskCount: userLogs.length,
+                ...log,
+                mission: missionDetail || null
+            }
+        }
+    );
+    
+    const myPoints = combine.reduce((total, log) => total + log.point, 0);
+    const activeMissions = missions.activeMissions || [];
+    const taskCount = activeMissions.length;
+
+    return {
+        task: activeMissions,
+        taskCount: taskCount,
+        myTask: combine,
+        myTaskCount: combine.length,
         myPoints,
     };
 }