Connect Weekly Earnings to Frontend (#303)

yanxue06 · web-flow · commit c2cf9b07d87d · 2025-11-13T19:48:50.000-05:00
diff --git a/backend/resolvers/participantResolver.ts b/backend/resolvers/participantResolver.ts
@@ -120,38 +120,44 @@ const participantResolver = {
       { participant_id }: { participant_id: number }
     ): Promise<number[]> => {
       const today = new Date();
-      const sevenDaysAgo = new Date();
-      sevenDaysAgo.setDate(today.getDate() - 6);
+
+      const dayOfWeek = today.getDay();
+      const mondayOffset = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+
+      const monday = new Date(today);
+      monday.setDate(today.getDate() - mondayOffset);
+      monday.setHours(0, 0, 0, 0);
 
       const todayStr = today.toISOString().split("T")[0];
-      const startStr = sevenDaysAgo.toISOString().split("T")[0];
+      const mondayStr = monday.toISOString().split("T")[0];
 
       const results = await prisma.$queryRaw<
         { transaction_date: string; total: number }[]
       >`
-        SELECT 
+        SELECT
           transaction_date,
           SUM(marillac_bucks) AS total
         FROM transaction
         WHERE participant_id = ${participant_id}
           AND transaction_type = 'EARNING'
-          AND transaction_date >= ${startStr}
+          AND transaction_date >= ${mondayStr}
           AND transaction_date <= ${todayStr}
         GROUP BY transaction_date
         ORDER BY transaction_date ASC
       `;
 
-      const last7Days: string[] = Array.from({ length: 7 }, (_, i) => {
-        const d = new Date();
-        d.setDate(today.getDate() - (6 - i));
+      // Create array for Monday through Sunday (7 days)
+      const weekDays: string[] = Array.from({ length: 7 }, (_, i) => {
+        const d = new Date(monday);
+        d.setDate(monday.getDate() + i);
         return d.toISOString().split("T")[0];
       });
 
       const earningsMap = Object.fromEntries(
         results.map((r) => [r.transaction_date, Number(r.total)])
       );
 
-      return last7Days.map((day) => earningsMap[day] || 0);
+      return weekDays.map((day) => earningsMap[day] || 0);
     },
   },
   Mutation: {
@@ -343,6 +349,53 @@ const participantResolver = {
         VALUES (${participant_id}, 'SET', ${new_goal_value}, ${getToday()})
       `;
 
+      return true;
+    },
+    createEarningTransaction: async (
+      _parent: undefined,
+      {
+        participant_id,
+        transaction_date,
+        marillac_bucks,
+        description,
+      }: {
+        participant_id: number;
+        transaction_date: string;
+        marillac_bucks: number;
+        description?: string;
+      }
+    ): Promise<boolean> => {
+      if (marillac_bucks <= 0) {
+        throw new Error("Marillac bucks must be greater than 0");
+      }
+
+      const participant = await prisma.participant.findUnique({
+        where: { participant_id },
+      });
+
+      if (!participant) {
+        throw new Error("Participant not found");
+      }
+
+      await prisma.transaction.create({
+        data: {
+          participant_id,
+          transaction_date,
+          transaction_type: "EARNING",
+          marillac_bucks,
+          description: description || "Daily earnings",
+        },
+      });
+
+      const newBalance = participant.marillac_bucks + marillac_bucks;
+
+      await prisma.participant.update({
+        where: { participant_id },
+        data: { marillac_bucks: newBalance },
+      });
+
+      await checkAndRecordGoalReached(participant_id);
+
       return true;
     },
   },
diff --git a/backend/seed/.snaplet/dataModel.json b/backend/seed/.snaplet/dataModel.json
@@ -874,10 +874,10 @@
           "maxLength": null
         },
         {
-          "id": "public.goal_history.goal_value",
-          "name": "goal_value",
-          "columnName": "goal_value",
-          "type": "int4",
+          "id": "public.goal_history.goal_action",
+          "name": "goal_action",
+          "columnName": "goal_action",
+          "type": "GoalAction",
           "isRequired": true,
           "kind": "scalar",
           "isList": false,
@@ -888,10 +888,10 @@
           "maxLength": null
         },
         {
-          "id": "public.goal_history.action_date",
-          "name": "action_date",
-          "columnName": "action_date",
-          "type": "text",
+          "id": "public.goal_history.goal_value",
+          "name": "goal_value",
+          "columnName": "goal_value",
+          "type": "int4",
           "isRequired": true,
           "kind": "scalar",
           "isList": false,
@@ -902,10 +902,10 @@
           "maxLength": null
         },
         {
-          "id": "public.goal_history.goal_action",
-          "name": "goal_action",
-          "columnName": "goal_action",
-          "type": "GoalAction",
+          "id": "public.goal_history.action_date",
+          "name": "action_date",
+          "columnName": "action_date",
+          "type": "text",
           "isRequired": true,
           "kind": "scalar",
           "isList": false,
diff --git a/backend/types/resolvers.ts b/backend/types/resolvers.ts
@@ -169,6 +169,12 @@ const resolvers = gql`
       monthly: Boolean
     ): Boolean
     deleteReportRecipient(report_recipient_id: Int!): Boolean
+    createEarningTransaction(
+      participant_id: Int!
+      transaction_date: String!
+      marillac_bucks: Int!
+      description: String
+    ): Boolean
   }
 `;
 
diff --git a/frontend/src/participant/pages/progress/components/EarningsWidget.tsx b/frontend/src/participant/pages/progress/components/EarningsWidget.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   BarChart,
   Bar,
@@ -23,28 +23,36 @@ interface WeeklyEarningsChartProps {
 
 interface ChartDataItem {
   amount: number;
+  day: string;
   isToday: boolean;
 }
 
 const WeeklyEarningsChart = ({
   weeklyEarnings = [],
 }: WeeklyEarningsChartProps) => {
-  const chartData: ChartDataItem[] = weeklyEarnings.map(
-    (earnings = 0, index) => ({
-      amount: earnings,
-      isToday: index === 6,
-    })
-  );
+  const [selectedBarIndex, setSelectedBarIndex] = useState<number | null>(null);
 
-  const maxEarnings = Math.max(...weeklyEarnings.filter((val) => val != null));
-  const upperBound = Math.ceil(maxEarnings * 1.2);
+  // Day labels for the week (Monday = index 0, Sunday = index 6)
+  const allDayLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
-  const thisWeekTotal = weeklyEarnings.reduce((sum, val = 0) => sum + val, 0);
-  // will need to turn this into a parameter:
-  const lastWeekTotal = thisWeekTotal * 0.77;
-  const percentageChange = Math.round(
-    ((thisWeekTotal - lastWeekTotal) / lastWeekTotal) * 100
-  );
+  // Calculate which day of the week today is (0 = Monday, 6 = Sunday)
+  const today = new Date();
+  const dayOfWeek = today.getDay(); // 0 = Sunday, 1 = Monday, etc.
+  const todayIndex = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Convert to 0 = Monday
+
+  // Only show days from Monday up to today
+  const chartData: ChartDataItem[] = weeklyEarnings
+    .slice(0, todayIndex + 1) // Only include Monday through today
+    .map((earnings = 0, index) => ({
+      amount: earnings,
+      day: allDayLabels[index] || "",
+      isToday: index === todayIndex,
+    }));
+
+  // Calculate max earnings from only the days we're showing
+  const visibleEarnings = weeklyEarnings.slice(0, todayIndex + 1);
+  const maxEarnings = Math.max(...visibleEarnings.filter((val) => val != null), 0);
+  const upperBound = Math.ceil(maxEarnings * 1.2) || 10;
 
   return (
     <div
@@ -82,10 +90,10 @@ const WeeklyEarningsChart = ({
               vertical={false}
             />
             <XAxis
-              dataKey="amount"
+              dataKey="day"
               axisLine={false}
               tickLine={false}
-              tick={false}
+              tick={{ fill: colors.text.light.secondary, fontSize: 12 }}
             />
             <YAxis
               domain={[0, upperBound]}
@@ -95,7 +103,14 @@ const WeeklyEarningsChart = ({
               tickFormatter={(value) => `$${value}`}
               width={30}
             />
-            <Bar dataKey="amount" radius={[2, 2, 0, 0]}>
+            <Bar
+              dataKey="amount"
+              radius={[2, 2, 0, 0]}
+              onClick={(data: any, index: number) => {
+                setSelectedBarIndex(index === selectedBarIndex ? null : index);
+              }}
+              style={{ cursor: "pointer" }}
+            >
               {chartData.map((entry, index) => (
                 <Cell
                   key={`cell-${index}`}
@@ -109,7 +124,8 @@ const WeeklyEarningsChart = ({
                 content={(props: any) => {
                   const { x, y, value, index } = props;
                   if (
-                    index === chartData.length - 1 &&
+                    selectedBarIndex !== null &&
+                    index === selectedBarIndex &&
                     x !== undefined &&
                     y !== undefined &&
                     value !== undefined
@@ -134,25 +150,6 @@ const WeeklyEarningsChart = ({
           </BarChart>
         </ResponsiveContainer>
       </div>
-
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 8,
-        }}
-      >
-        <span
-          style={{
-            color: colors.success[900],
-            fontSize: 18,
-            fontWeight: "bold",
-          }}
-        >
-          ▲ {percentageChange}% Compared to Last Week
-        </span>
-      </div>
     </div>
   );
 };
