Add cost summary feature to ListDetailPage; implement API endpoints for costs and enhance UI with a dialog for displaying cost details, including user balances and total costs.

fe/src/config/api-config.ts

@@ -86,6 +86,13 @@ export const API_ENDPOINTS = {
         HISTORY: '/ocr/history',
     },
 
+    // Costs
+    COSTS: {
+        BASE: '/costs',
+        LIST_SUMMARY: (listId: string | number) => `/costs/lists/${listId}/cost-summary`,
+        GROUP_BALANCE_SUMMARY: (groupId: string | number) => `/costs/groups/${groupId}/balance-summary`,
+    },
+
     // Financials
     FINANCIALS: {
         EXPENSES: '/financials/expenses',

fe/src/pages/ListDetailPage.vue

@@ -19,6 +19,13 @@
       <div class="row items-center q-mb-md">
         <h1 class="text-h4 q-mb-none">{{ list.name }}</h1>
         <q-space />
+        <q-btn
+          color="info"
+          icon="insights"
+          label="Cost Summary"
+          class="q-mr-sm"
+          @click="showCostSummaryDialog = true"
+        />
         <q-btn
           color="secondary"
           icon="camera_alt"
@@ -96,6 +103,66 @@
         </q-card>
       </q-dialog>
 
+      <!-- Cost Summary Dialog -->
+      <q-dialog v-model="showCostSummaryDialog">
+        <q-card style="min-width: 500px">
+          <q-card-section>
+            <div class="text-h6">List Cost Summary</div>
+          </q-card-section>
+
+          <q-card-section v-if="costSummaryLoading" class="text-center">
+            <q-spinner-dots color="primary" size="2em" />
+            <p>Loading cost summary...</p>
+          </q-card-section>
+
+          <q-card-section v-else-if="costSummaryError" class="text-white bg-red q-py-sm">
+            <q-icon name="warning" />
+            {{ costSummaryError }}
+          </q-card-section>
+
+          <q-card-section v-else-if="listCostSummary">
+            <div class="q-mb-md">
+              <div><strong>Total List Cost:</strong> {{ formatCurrency(listCostSummary.total_list_cost) }}</div>
+              <div><strong>Equal Share Per User:</strong> {{ formatCurrency(listCostSummary.equal_share_per_user) }}</div>
+              <div><strong>Participating Users:</strong> {{ listCostSummary.num_participating_users }}</div>
+            </div>
+
+            <q-table
+              title="User Balances"
+              :rows="listCostSummary.user_balances"
+              :columns="userBalancesColumns"
+              row-key="user_id"
+              flat
+              bordered
+              dense
+            >
+              <template v-slot:body-cell-items_added_value="props">
+                <q-td :props="props">
+                  {{ formatCurrency(props.row.items_added_value) }}
+                </q-td>
+              </template>
+              <template v-slot:body-cell-amount_due="props">
+                <q-td :props="props">
+                  {{ formatCurrency(props.row.amount_due) }}
+                </q-td>
+              </template>
+              <template v-slot:body-cell-balance="props">
+                <q-td :props="props">
+                  <q-badge :color="props.row.balance >= 0 ? 'positive' : 'negative'">
+                    {{ formatCurrency(props.row.balance) }}
+                  </q-badge>
+                </q-td>
+              </template>
+            </q-table>
+
+          </q-card-section>
+
+          <q-card-actions align="right">
+            <q-btn flat label="Close" color="primary" v-close-popup />
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+
       <!-- Add Item Form -->
       <q-form @submit="onAddItem" class="q-mb-lg">
         <div class="row q-col-gutter-md">
@@ -204,7 +271,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { apiClient, API_ENDPOINTS } from 'src/config/api';
 import { useQuasar, QFile } from 'quasar';
@@ -231,6 +298,23 @@ interface List {
   updated_at: string;
 }
 
+interface UserCostShare {
+  user_id: number;
+  user_identifier: string;
+  items_added_value: string | number; // API returns string, but we'll parse to number
+  amount_due: string | number;
+  balance: string | number;
+}
+
+interface ListCostSummaryData {
+  list_id: number;
+  list_name: string;
+  total_list_cost: string | number;
+  num_participating_users: number;
+  equal_share_per_user: string | number;
+  user_balances: UserCostShare[];
+}
+
 const route = useRoute();
 const $q = useQuasar();
 
@@ -267,6 +351,26 @@ const pendingAction = ref<(() => Promise<void>) | null>(null);
 // Add ref for item name input
 const itemNameInput = ref<{ focus: () => void } | null>(null);
 
+// Cost Summary
+const showCostSummaryDialog = ref(false);
+const listCostSummary = ref<ListCostSummaryData | null>(null);
+const costSummaryLoading = ref(false);
+const costSummaryError = ref<string | null>(null);
+
+const userBalancesColumns = [
+  { name: 'user_identifier', label: 'User', field: 'user_identifier', align: 'left' as const, sortable: true },
+  { name: 'items_added_value', label: 'Items Added Value', field: 'items_added_value', align: 'right' as const, sortable: true },
+  { name: 'amount_due', label: 'Amount Due', field: 'amount_due', align: 'right' as const, sortable: true },
+  { name: 'balance', label: 'Balance', field: 'balance', align: 'right' as const, sortable: true },
+];
+
+const formatCurrency = (value: string | number | undefined | null): string => {
+  if (value === undefined || value === null) return '$0.00';
+  const numValue = typeof value === 'string' ? parseFloat(value) : value;
+  if (isNaN(numValue)) return '$0.00';
+  return `$${numValue.toFixed(2)}`;
+};
+
 const fetchListDetails = async () => {
   loading.value = true;
   error.value = null;
@@ -282,6 +386,7 @@ const fetchListDetails = async () => {
     lastItemUpdate.value = response.data.items.reduce((latest: string, item: Item) => {
       return item.updated_at > latest ? item.updated_at : latest;
     }, '');
+    await fetchListCostSummary(); // Fetch cost summary after list details
   } catch (err: unknown) {
     console.error('Failed to fetch list details:', err);
     error.value =
@@ -521,6 +626,36 @@ const deleteItem = async (item: Item) => {
   }
 };
 
+const fetchListCostSummary = async () => {
+  if (!list.value || list.value.id === 0) return;
+  costSummaryLoading.value = true;
+  costSummaryError.value = null;
+  try {
+    const response = await apiClient.get(
+      API_ENDPOINTS.COSTS.LIST_SUMMARY(list.value.id)
+    );
+    listCostSummary.value = response.data;
+  } catch (err: unknown) {
+    console.error('Error fetching cost summary:', err);
+    costSummaryError.value =
+      (err as { response?: { data?: { detail?: string } } }).response?.data?.detail ||
+      'Failed to load cost summary. Please try again.';
+    listCostSummary.value = null; // Clear any old data
+  } finally {
+    costSummaryLoading.value = false;
+  }
+};
+
+// Call fetchListCostSummary when the dialog is opened
+watch(showCostSummaryDialog, (newValue) => {
+  if (newValue && !listCostSummary.value && list.value.id !== 0) {
+    void fetchListCostSummary();
+  }
+});
+
+// Watch for changes in items that might affect cost summary
+// e.g., price changes, item completion, which are handled by fetchListDetails then fetchListCostSummary
+
 // Add keyboard event listeners
 onMounted(() => {
   console.log('Component mounted, route params:', route.params);
@@ -556,4 +691,9 @@ onUnmounted(() => {
   opacity: 0.7;
   pointer-events: none;
 }
+
+.q-table__title {
+  font-size: 1.1rem;
+  font-weight: 500;
+}
 </style>