From c9cfc7f873d349beae458c75a33c29f18b5d96ac Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 12 Jan 2025 00:24:30 -0500
Subject: [PATCH 01/14]  #90 feat(ReconcilaitionJar): create api view with
 pagination.

---
 tienda_ilusion/don_confiao/api_views.py       | 13 +++++++++
 .../tests/test_jar_reconciliation.py          | 28 +++++++++++++++++++
 tienda_ilusion/don_confiao/urls.py            |  3 +-
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/tienda_ilusion/don_confiao/api_views.py b/tienda_ilusion/don_confiao/api_views.py
index 31be80a..fc462cc 100644
--- a/tienda_ilusion/don_confiao/api_views.py
+++ b/tienda_ilusion/don_confiao/api_views.py
@@ -2,6 +2,7 @@ from rest_framework import viewsets
 from rest_framework.response import Response
 from rest_framework.status import HTTP_400_BAD_REQUEST
 from rest_framework.views import APIView
+from rest_framework.pagination import PageNumberPagination
 
 from .models import Sale, SaleLine, Customer, Product, ReconciliationJar, PaymentMethods, AdminCode
 from .serializers import SaleSerializer, ProductSerializer, CustomerSerializer, ReconciliationJarSerializer, PaymentMethodSerializer, SaleForRenconciliationSerializer, SaleSummarySerializer
@@ -9,6 +10,12 @@ from .serializers import SaleSerializer, ProductSerializer, CustomerSerializer,
 from decimal import Decimal
 import json
 
+
+class Pagination(PageNumberPagination):
+    page_size = 10
+    page_size_query_param = 'page_size'
+
+
 class SaleView(viewsets.ModelViewSet):
     queryset = Sale.objects.all()
     serializer_class = SaleSerializer
@@ -131,3 +138,9 @@ class AdminCodeValidateView(APIView):
     def get(self, request, code):
         codes = AdminCode.objects.filter(value=code)
         return Response({'validCode': bool(codes)})
+
+
+class ReconciliateJarModelView(viewsets.ModelViewSet):
+    queryset = ReconciliationJar.objects.all().order_by('-date_time')
+    pagination_class = Pagination
+    serializer_class = ReconciliationJarSerializer
diff --git a/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py b/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
index de8503c..a7544cc 100644
--- a/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
+++ b/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
@@ -197,6 +197,34 @@ class TestJarReconcliation(TestCase):
         purchases = Sale.objects.filter(reconciliation_id=content['id'])
         self.assertEqual(len(purchases), 3)
 
+    def test_list_reconciliations(self):
+        self._create_simple_reconciliation()
+        self._create_simple_reconciliation()
+
+        url = '/don_confiao/api/reconciliate_jar/'
+
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, 200)
+
+        content = json.loads(response.content.decode('utf-8'))
+        self.assertEqual(2, len(content['results']))
+        self.assertEqual('2024-07-30T00:00:00Z',
+                         content['results'][0]['date_time'])
+
+    def test_list_reconciliations_pagination(self):
+        self._create_simple_reconciliation()
+        self._create_simple_reconciliation()
+
+        url = '/don_confiao/api/reconciliate_jar/?page=2&page_size=1'
+
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, 200)
+
+        content = json.loads(response.content.decode('utf-8'))
+        self.assertEqual(1, len(content['results']))
+        self.assertEqual('2024-07-30T00:00:00Z',
+                         content['results'][0]['date_time'])
+
     def _create_simple_reconciliation(self):
         reconciliation = ReconciliationJar()
         reconciliation.date_time = "2024-07-30"
diff --git a/tienda_ilusion/don_confiao/urls.py b/tienda_ilusion/don_confiao/urls.py
index 5f8f654..3b4dd69 100644
--- a/tienda_ilusion/don_confiao/urls.py
+++ b/tienda_ilusion/don_confiao/urls.py
@@ -10,7 +10,8 @@ router = DefaultRouter()
 router.register(r'sales', api_views.SaleView, basename='sale')
 router.register(r'customers', api_views.CustomerView, basename='customer')
 router.register(r'products', api_views.ProductView, basename='product')
-
+router.register(r'reconciliate_jar', api_views.ReconciliateJarModelView,
+                basename='reconciliate_jar')
 
 urlpatterns = [
     path("", views.index, name="wellcome"),

From 8bc2d025720a197ecc68abd8667de3297e9145b0 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 12 Jan 2025 01:18:53 -0500
Subject: [PATCH 02/14]  #90 test: minor fix.

---
 tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py b/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
index a7544cc..1fdb0b4 100644
--- a/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
+++ b/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
@@ -207,6 +207,7 @@ class TestJarReconcliation(TestCase):
         self.assertEqual(response.status_code, 200)
 
         content = json.loads(response.content.decode('utf-8'))
+        self.assertEqual(2, content['count'])
         self.assertEqual(2, len(content['results']))
         self.assertEqual('2024-07-30T00:00:00Z',
                          content['results'][0]['date_time'])

From d9d3239662d6dec2877d02479ef87b47f4b16240 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 12 Jan 2025 01:20:33 -0500
Subject: [PATCH 03/14]  #90 api(frontend): add getListReconcliations.

---
 .../don_confiao/frontend/don-confiao/src/services/api.js     | 4 ++++
 .../frontend/don-confiao/src/services/django-api.js          | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
index 92186b5..9cbe147 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
@@ -23,6 +23,10 @@ class Api {
     return this.apiImplementation.getPurchasesForReconciliation();
   }
 
+  getListReconcliations(page=1, itemsPerPage=10) {
+    return this.apiImplementation.getListReconcliations(page, itemsPerPage);
+  }
+
   isValidAdminCode(code) {
     return this.apiImplementation.isValidAdminCode(code);
   }
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
index 5faae05..f2b8687 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
@@ -24,6 +24,11 @@ class DjangoApi {
     return this.getRequest(url);
   }
 
+  getListReconcliations(page, itemsPerPage) {
+    const url = `/don_confiao/api/reconciliate_jar/?page=${page}&page_size=${itemsPerPage}`;
+    return this.getRequest(url);
+  }
+
   isValidAdminCode(code) {
     const url = `/don_confiao/api/admin_code/validate/${code}`
     return this.getRequest(url)

From baa0677e7a80d1e09e12e9065554068ad80ce3a3 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 12 Jan 2025 01:23:17 -0500
Subject: [PATCH 04/14]  #90 feat(frontend): add cuadres_de_tarro page.

---
 .../don-confiao/src/components/NavBar.vue     |  3 +-
 .../src/components/ReconciliationJarIndex.vue | 59 +++++++++++++++++++
 .../src/pages/cuadres_de_tarro.vue            | 20 +++++++
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
 create mode 100644 tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadres_de_tarro.vue

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
index 3c25a2a..66c44c1 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
@@ -29,7 +29,8 @@
          menuItems: [
              { title: 'Inicio', route: '/'},
              { title: 'Comprar', route:'/comprar'},
-             { title: 'Cuadrar tarro', route: '/cuadrar_tarro'}
+             { title: 'Cuadrar tarro', route: '/cuadrar_tarro'},
+             { title: 'Cuadres de tarro', route: '/cuadres_de_tarro'},
          ],
      }),
      watch: {
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
new file mode 100644
index 0000000..e08b97d
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-container>
+    <v-toolbar>
+      <v-toolbar-title> Cuadres del Tarro </v-toolbar-title>
+    </v-toolbar>
+    <v-card>
+      <v-card-text>
+        <v-data-table-server
+          v-model:items-per-page="itemsPerPage"
+          :headers="headers"
+          :items="serverItems"
+          :items-length="totalItems"
+          :loading="loading"
+          :search="search"
+          :item-value="name"
+          @update:options="loadItems"
+        >
+          <template v-slot:item.id="{ item }">
+            <v-btn >{{ item.id }}</v-btn>
+          </template>
+        </v-data-table-server>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        api: inject('api'),
+        itemsPerPage: 10,
+        headers: [
+          { title: 'Acciones', key: 'id'},
+          { title: 'Fecha', key: 'date_time'},
+          { title: 'Reconciliador', key: 'reconcilier'},
+          { title: 'Total Compras Efectivo', key: 'total_cash_purchases'},
+          { title: 'Recogido', key: 'cash_taken'},
+          { title: 'Descuadre', key: 'cash_discrepancy'},
+        ],
+        search: '',
+        serverItems: [],
+        loading: true,
+        totalItems: 0,
+      }
+    },
+    methods: {
+      loadItems ({page, itemsPerPage}) {
+        this.loading = true;
+        this.api.getListReconcliations(page, itemsPerPage)
+            .then(data => {
+              this.serverItems = data['results'];
+              this.totalItems = data['count'];
+              this.loading = false;
+            })
+            .catch(error => console.log('Error:', error));
+      },
+    },
+  }
+</script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadres_de_tarro.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadres_de_tarro.vue
new file mode 100644
index 0000000..739a1e9
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadres_de_tarro.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified" />
+  </div>
+  <ReconciliationJarIndex v-if="showComponent" />
+</template>
+
+<script>
+  import CodeDialog from '../components/CodeDialog.vue'
+
+  export default {
+    data() {
+      return {
+        showComponent: false,
+      }
+    },
+    components: { CodeDialog },
+    methods: {},
+  }
+</script>

From 1b06818583c991d591054702bd8e72df2e8265d5 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 18 Jan 2025 12:22:45 -0500
Subject: [PATCH 05/14]  #90 feat(frontend): add ReconciliationJarView.vue.

---
 .../src/components/ReconciliationJarView.vue  | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
new file mode 100644
index 0000000..10d46a1
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
@@ -0,0 +1,79 @@
+<template>
+  <v-container>
+    <v-toolbar>
+      <v-toolbar-title> Cuadre del Tarro Id: {{ id }}</v-toolbar-title>
+    </v-toolbar>
+    <v-card>
+      <v-card-text>
+        <v-text-field
+          v-model="reconciliation.date_time"
+          label="Fecha"
+          type="datetime-local"
+          required
+          readonly
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.reconcilier"
+          label="Cajero"
+          required
+          readonly
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.total_cash_purchases"
+          label="Total Ventas en efectivo"
+          prefix="$"
+          type="number"
+          readonly
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.cash_taken"
+          label="Dinero Recogido"
+          prefix="$"
+          type="number"
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.cash_discrepancy"
+          label="Descuadre"
+          prefix="$"
+          type="number"
+        ></v-text-field>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+<script>
+  import { inject } from 'vue';
+
+  export default {
+    name: 'ReconciliationJar View',
+    props: {
+      msg: String,
+      id: {
+        type: String,
+        required: true
+      }
+    },
+    data () {
+      return {
+        api: inject('api'),
+        valid: null,
+        reconciliation: {
+        },
+      };
+    },
+    created() {
+      if (this.id) {
+        this.fetchReconciliation(this.id);
+      } else {
+        console.error('No se proporcionó ID');
+      }
+    },
+    methods: {
+      fetchReconciliation(reconciliationId) {
+        this.api.getReconciliation(reconciliationId)
+            .then(data => this.reconciliation = data)
+            .catch(error => console.error(error));
+      },
+    },
+  }
+</script>

From aa45ea44acaf617afe19c27d12b07a3ebd8846a2 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 18 Jan 2025 12:42:33 -0500
Subject: [PATCH 06/14]  #90 feat(frontend): getReconciliation api method.

---
 .../frontend/don-confiao/src/services/django-api.js          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
index f2b8687..abe9f4d 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js
@@ -29,6 +29,11 @@ class DjangoApi {
     return this.getRequest(url);
   }
 
+  getReconciliation(reconciliationId) {
+    const url = `/don_confiao/api/reconciliate_jar/${reconciliationId}/`;
+    return this.getRequest(url);
+  }
+
   isValidAdminCode(code) {
     const url = `/don_confiao/api/admin_code/validate/${code}`
     return this.getRequest(url)

From d85ad7cc3852b69b5aa4fa73adc45a36036a136e Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 18 Jan 2025 12:43:01 -0500
Subject: [PATCH 07/14]  #90 feat(frontend): getReconciliation api method.

---
 .../don_confiao/frontend/don-confiao/src/services/api.js      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
index 9cbe147..2e6ef11 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js
@@ -27,6 +27,10 @@ class Api {
     return this.apiImplementation.getListReconcliations(page, itemsPerPage);
   }
 
+  getReconciliation(reconciliationId) {
+    return this.apiImplementation.getReconciliation(reconciliationId);
+  }
+
   isValidAdminCode(code) {
     return this.apiImplementation.isValidAdminCode(code);
   }

From a5d4c1977a4ba0b51d51bdb81f28c379285165c0 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 18 Jan 2025 12:43:50 -0500
Subject: [PATCH 08/14]  #90 feat(frontend): minor fix.

---
 .../don-confiao/src/components/ReconciliationJarView.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
index 10d46a1..76665d6 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container>
     <v-toolbar>
-      <v-toolbar-title> Cuadre del Tarro Id: {{ id }}</v-toolbar-title>
+      <v-toolbar-title> Cuadre de Tarro: {{ id }}</v-toolbar-title>
     </v-toolbar>
     <v-card>
       <v-card-text>

From 75d39c6ca7f9f7a6c53403acad21aa9454389267 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 18 Jan 2025 12:53:53 -0500
Subject: [PATCH 09/14]  #90 feat(frontend): add modal to
 ReconciliationJarIndex.

---
 .../src/components/ReconciliationJarIndex.vue |  9 ++++--
 .../components/SummaryReconciliationModal.vue | 31 +++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliationModal.vue

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
index e08b97d..e88e376 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
@@ -12,13 +12,13 @@
           :items-length="totalItems"
           :loading="loading"
           :search="search"
-          :item-value="name"
           @update:options="loadItems"
         >
           <template v-slot:item.id="{ item }">
-            <v-btn >{{ item.id }}</v-btn>
+            <v-btn @click="openSummaryModal(item.id)">{{ item.id }}</v-btn>
           </template>
         </v-data-table-server>
+        <SummaryReconciliationModal :id="selectedReconciliationId" ref="summaryModal" />
       </v-card-text>
     </v-card>
   </v-container>
@@ -28,6 +28,7 @@
     data() {
       return {
         api: inject('api'),
+        selectedReconciliationId: null,
         itemsPerPage: 10,
         headers: [
           { title: 'Acciones', key: 'id'},
@@ -54,6 +55,10 @@
             })
             .catch(error => console.log('Error:', error));
       },
+      openSummaryModal(id) {
+        this.selectedReconciliationId = id.toString();
+        this.$refs.summaryModal.dialog = true;
+      },
     },
   }
 </script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliationModal.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliationModal.vue
new file mode 100644
index 0000000..004d904
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliationModal.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400">
+    resumen
+    <v-card>
+      <v-card-text>
+        <ReconciliationJarView :id="id"/>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="dialog = false">Cerrar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'Summary Reconciliation Modal',
+    props: {
+      id: {
+        type: String,
+        required: true,
+      }
+    },
+    data() {
+      return {
+        dialog: false,
+      }
+    },
+  }
+</script>

From 2fcf884ccea61b03b6a3eafc3f3386f5a07b6645 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Tue, 28 Jan 2025 09:17:48 -0500
Subject: [PATCH 10/14]  #90 feat(api): add payment method to sales.

---
 tienda_ilusion/don_confiao/serializers.py     | 10 +++-
 .../tests/test_jar_reconciliation.py          | 59 ++++++++++++++-----
 2 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/tienda_ilusion/don_confiao/serializers.py b/tienda_ilusion/don_confiao/serializers.py
index d567275..8c68dd4 100644
--- a/tienda_ilusion/don_confiao/serializers.py
+++ b/tienda_ilusion/don_confiao/serializers.py
@@ -10,9 +10,12 @@ class SaleLineSerializer(serializers.ModelSerializer):
 
 
 class SaleSerializer(serializers.ModelSerializer):
+    total = serializers.ReadOnlyField(source='get_total')
+
     class Meta:
         model = Sale
-        fields = ['id', 'customer', 'date', 'saleline_set']
+        fields = ['id', 'customer', 'date', 'saleline_set',
+                  'total', 'payment_method']
 
 
 class ProductSerializer(serializers.ModelSerializer):
@@ -28,6 +31,8 @@ class CustomerSerializer(serializers.ModelSerializer):
 
 
 class ReconciliationJarSerializer(serializers.ModelSerializer):
+    Sales = SaleSerializer(many=True, read_only=True)
+
     class Meta:
         model = ReconciliationJar
         fields = [
@@ -37,8 +42,10 @@ class ReconciliationJarSerializer(serializers.ModelSerializer):
             'cash_taken',
             'cash_discrepancy',
             'total_cash_purchases',
+            'Sales',
         ]
 
+
 class PaymentMethodSerializer(serializers.Serializer):
     text = serializers.CharField()
     value = serializers.CharField()
@@ -49,6 +56,7 @@ class PaymentMethodSerializer(serializers.Serializer):
             'value': instance[0],
         }
 
+
 class SaleForRenconciliationSerializer(serializers.Serializer):
     id = serializers.IntegerField()
     date = serializers.DateTimeField()
diff --git a/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py b/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
index 1fdb0b4..9efb15d 100644
--- a/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
+++ b/tienda_ilusion/don_confiao/tests/test_jar_reconciliation.py
@@ -139,22 +139,7 @@ class TestJarReconcliation(TestCase):
         self.assertIn('total_cash_purchases', content['error'])
 
     def test_create_reconciliation_with_purchases(self):
-        url = '/don_confiao/reconciliate_jar'
-        total_purchases = (11 * 72500) + (27 * 72500)
-        data = {
-            'date_time': '2024-12-02T21:07',
-            'reconcilier': 'carlos',
-            'total_cash_purchases': total_purchases,
-            'cash_taken': total_purchases,
-            'cash_discrepancy': 0,
-            'cash_purchases': [
-                self.purchase.id,
-                self.purchase2.id,
-                self.purchase.id,
-            ],
-        }
-        response = self.client.post(url, data=json.dumps(data).encode('utf-8'),
-                                    content_type='application/json')
+        response = self._create_reconciliation_with_purchase()
 
         rawContent = response.content.decode('utf-8')
         content = json.loads(rawContent)
@@ -226,6 +211,30 @@ class TestJarReconcliation(TestCase):
         self.assertEqual('2024-07-30T00:00:00Z',
                          content['results'][0]['date_time'])
 
+    def test_get_single_reconciliation(self):
+        createResponse = self._create_reconciliation_with_purchase()
+        reconciliationId = json.loads(
+            createResponse.content.decode('utf-8')
+        )['id']
+        self.assertGreater(reconciliationId, 0)
+
+        url = f'/don_confiao/api/reconciliate_jar/{reconciliationId}/'
+        response = self.client.get(url, content_type='application/json')
+        content = json.loads(
+            response.content.decode('utf-8')
+        )
+        self.assertEqual(reconciliationId, content['id'])
+        self.assertGreater(len(content['Sales']), 0)
+        self.assertIn(
+            self.purchase.id,
+            [sale['id'] for sale in content['Sales']]
+        )
+
+        self.assertIn(
+            'CASH',
+            [sale['payment_method'] for sale in content['Sales']]
+        )
+
     def _create_simple_reconciliation(self):
         reconciliation = ReconciliationJar()
         reconciliation.date_time = "2024-07-30"
@@ -235,3 +244,21 @@ class TestJarReconcliation(TestCase):
         reconciliation.clean()
         reconciliation.save()
         return reconciliation
+
+    def _create_reconciliation_with_purchase(self):
+        url = '/don_confiao/reconciliate_jar'
+        total_purchases = (11 * 72500) + (27 * 72500)
+        data = {
+            'date_time': '2024-12-02T21:07',
+            'reconcilier': 'carlos',
+            'total_cash_purchases': total_purchases,
+            'cash_taken': total_purchases,
+            'cash_discrepancy': 0,
+            'cash_purchases': [
+                self.purchase.id,
+                self.purchase2.id,
+                self.purchase.id,
+            ],
+        }
+        return self.client.post(url, data=json.dumps(data).encode('utf-8'),
+                                content_type='application/json')

From 77a0c4ac0d0475b745dc0000469ff40253a1354f Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 2 Feb 2025 22:40:31 -0500
Subject: [PATCH 11/14]  #90 feat(Frontend): add Purchases in cuadres_de_tarro.

---
 .../src/components/ReconciliationJarView.vue  | 64 ++++++++++++++++++-
 .../src/components/SummaryPurchase.vue        |  2 +-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
index 76665d6..ee22acd 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
+++ b/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>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
index 07a37c2..9549d79 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
+++ b/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 {

From 2c6449c72717cb75c8f32b10854468ff2d2653ed Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 2 Feb 2025 22:48:21 -0500
Subject: [PATCH 12/14]  #90 feat(Frontend): add Purchases in cuadres_de_tarro.

---
 .../src/components/SummaryReconciliation.vue  | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliation.vue

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliation.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliation.vue
new file mode 100644
index 0000000..0079d0f
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliation.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400">
+    <v-card>
+      <v-card-text>
+        <SummaryPurchase :id="id"/>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="dialog = false">Cerrar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'SummaryPurchase Modal',
+    props: {
+      id: {
+        type: Number,
+        required: true,
+      }
+    },
+    data() {
+      return {
+        dialog: false,
+      }
+    },
+  }
+</script>

From 2a983c80560abb4950203fa8b31d67e63d8df818 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 2 Feb 2025 22:49:38 -0500
Subject: [PATCH 13/14]  #90 fix(Frontend): fix datetime in Reconciliation
 summary.

---
 .../don-confiao/src/components/ReconciliationJarView.vue         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
index ee22acd..67d95eb 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
@@ -8,7 +8,6 @@
         <v-text-field
           v-model="reconciliation.date_time"
           label="Fecha"
-          type="datetime-local"
           required
           readonly
         ></v-text-field>

From 6a346bdf8a8a63d1850d35e623b347ea5f2f9156 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sun, 2 Feb 2025 23:04:54 -0500
Subject: [PATCH 14/14]  #90 fix(Frontend): set default tab in Reconciliation
 summary.

---
 .../don-confiao/src/components/ReconciliationJarView.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
index 67d95eb..b1ae8cc 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarView.vue
@@ -90,7 +90,7 @@
     },
     data () {
       return {
-        tab: null,
+        tab: '0',
         selectedPurchaseId: null,
         api: inject('api'),
         valid: null,