Add daily totals loading and display to ExpenseList

Introduces a new get_daily_totals SQL function and updates HomeView to load daily totals for displayed dates. ExpenseList now receives dailyTotals as a prop and displays the total per day using this data, ensuring accurate daily aggregation even when expenses are paginated or filtered. Types updated to reflect the new prop.

Author: Frederick-S

db/rpc.sql

@@ -17,6 +17,27 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql SECURITY DEFINER;
 
+-- 1b. Get daily totals for a list of dates
+CREATE OR REPLACE FUNCTION get_daily_totals(
+  p_user_id UUID,
+  p_dates DATE[]
+) RETURNS TABLE(
+  date DATE,
+  total NUMERIC
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT 
+    e.date,
+    COALESCE(SUM(e.amount), 0) as total
+  FROM expenses e
+  WHERE e.user_id = p_user_id 
+    AND e.date = ANY(p_dates)
+  GROUP BY e.date
+  ORDER BY e.date DESC;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
 -- 2. Get category breakdown for a specific period
 CREATE OR REPLACE FUNCTION get_category_breakdown(
   p_user_id UUID,

src/components/ExpenseList.vue

@@ -17,12 +17,9 @@
           <h3 class="text-subtitle-1 font-weight-medium text-medium-emphasis">
             {{ group.dateLabel }}
           </h3>
-          <div class="d-flex align-center">
-            <span class="text-body-2 text-medium-emphasis mr-3">
-              {{ formatAmount(group.total) }}
-            </span>
-            <v-divider />
-          </div>
+          <span class="text-body-2 text-medium-emphasis">
+            {{ formatAmount(group.total) }}
+          </span>
         </div>
 
         <!-- Expenses for this date -->
@@ -195,12 +192,11 @@ const groupedExpenses = computed(() => {
         date: dateKey,
         dateLabel: formatDateLabel(dateKey),
         expenses: [],
-        total: 0
+        total: props.dailyTotals?.[dateKey] || 0  // Use daily total from prop
       })
     }
     const group = groups.get(dateKey)!
     group.expenses.push(expense)
-    group.total += expense.amount
   })
   
   // Convert Map to Array and maintain date order (already sorted from database)

src/components/HomeView.vue

@@ -7,7 +7,7 @@
 
     <template v-else>
       <TodaySummary :expenses="expenses" />
-      <ExpenseList :expenses="expenses" @edit="openFormForEdit" @delete="handleDelete" />
+      <ExpenseList :expenses="expenses" :daily-totals="dailyTotals" @edit="openFormForEdit" @delete="handleDelete" />
 
       <!-- Load More Button -->
       <div v-if="hasMoreExpenses" class="text-center py-4">
@@ -55,6 +55,7 @@ const { openFormForEdit } = useExpenseForm()
 const { showError } = useToast()
 
 const expenses = ref<Expense[]>([])
+const dailyTotals = ref<Record<string, number>>({})
 const currentPage = ref(0)
 const pageSize = 5
 const hasMoreExpenses = ref(true)
@@ -109,6 +110,37 @@ const loadExpenses = async (reset = false) => {
   if (reset) {
     initialLoading.value = false
   }
+  
+  // Load daily totals after loading expenses
+  await loadDailyTotals()
+}
+
+// Load daily totals for the dates in the current expense list
+const loadDailyTotals = async () => {
+  if (!user.value || expenses.value.length === 0) return
+
+  // Get unique dates from loaded expenses
+  const uniqueDates = [...new Set(expenses.value.map(e => e.date))]
+  
+  try {
+    const { data, error } = await supabase.rpc('get_daily_totals', {
+      p_user_id: user.value.id,
+      p_dates: uniqueDates
+    })
+
+    if (error) {
+      console.error('Error loading daily totals:', error)
+    } else {
+      // Convert array to map for easy lookup
+      const totalsMap: Record<string, number> = {}
+      data?.forEach((item: any) => {
+        totalsMap[item.date] = item.total
+      })
+      dailyTotals.value = totalsMap
+    }
+  } catch (err) {
+    console.error('Error loading daily totals:', err)
+  }
 }
 
 // Load more expenses
@@ -117,6 +149,7 @@ const loadMoreExpenses = async () => {
   
   loadingMore.value = true
   await loadExpenses()
+  await loadDailyTotals()  // Refresh daily totals after loading more
   loadingMore.value = false
 }
 

src/types.ts

@@ -31,6 +31,7 @@ export interface User {
  */
 export interface ExpenseListProps {
   expenses: Expense[]
+  dailyTotals?: Record<string, number>  // Map of date -> total amount
 }
 
 /**