tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue

@@ -37,6 +37,42 @@
           prefix="$"
           type="number"
         ></v-text-field>
+        <v-tabs v-model="tab">
+          <v-tab
+            v-for="(elements, paymentMethod) in purchases"
+            :key="paymentMethod"
+          >
+            {{ paymentMethod }}&nbsp; <CurrencyText :value="elements.total"</CurrencyText>
+          </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item
+            v-for="(elements, paymentMethod) in purchases"
+            :key="paymentMethod"
+          >
+            <v-table>
+              <thead>
+                <tr>
+                  <th>Id</th>
+                  <th>Fecha</th>
+                  <th>Cliente</th>
+                  <th>Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="purchase in elements.purchases" :key="purchase.id">
+                  <td><v-btn @click="openSummaryModal(purchase.id)">{{ purchase.id }}</v-btn></td>
+                  <td>{{ purchase.date }}</td>
+                  <td>{{ purchase.customer }}</td>
+                  <td><CurrencyText :value="purchase.total"</CurrencyText></td>
+
+                </tr>
+              </tbody>
+            </v-table>
+
+          </v-tabs-window-item>
+        </v-tabs-window>
+        <SummaryPurchaseModal :id="selectedPurchaseId" ref="summaryModal" />
       </v-card-text>
     </v-card>
   </v-container>
@@ -55,10 +91,13 @@
     },
     data () {
       return {
+        tab: null,
+        selectedPurchaseId: null,
         api: inject('api'),
         valid: null,
         reconciliation: {
         },
+        purchases: {},
       };
     },
     created() {
@@ -71,9 +110,32 @@
     methods: {
       fetchReconciliation(reconciliationId) {
         this.api.getReconciliation(reconciliationId)
-            .then(data => this.reconciliation = data)
+            .then(data => {
+              this.reconciliation = data;
+              this.groupPurchases();
+            })
             .catch(error => console.error(error));
       },
+      groupPurchases() {
+        if (this.reconciliation.Sales) {
+          this.purchases = this.reconciliation.Sales.reduce((grouped, sale) => {
+            const paymentMethod = sale.payment_method;
+            if (!grouped[paymentMethod]) {
+              grouped[paymentMethod] = {
+                purchases: [],
+                total: 0,
+              };
+            }
+            grouped[paymentMethod].purchases.push(sale);
+            grouped[paymentMethod].total += sale.total;
+            return grouped;
+          }, {});
+        }
+      },
+      openSummaryModal(id) {
+        this.selectedPurchaseId = id;
+        this.$refs.summaryModal.dialog = true;
+      },
     },
   }
 </script>

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue

@@ -53,7 +53,7 @@
     name: 'SummaryPurchase',
     props: {
       msg: String,
-      id: String
+      id: Number
     },
     data () {
       return {