diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue
index 0250d3d..6e8fea5 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue
@@ -65,8 +65,12 @@
               :headers="summary.headers"
               :items="summary.purchases[payment_method]"
             >
+              <template v-slot:item.id="{ item }">
+                <v-btn @click="openSummaryModal(item.id)">{{ item.id }}</v-btn>
+              </template>
             </v-data-table-virtual>
           </v-tabs-window-item>
+          <SummaryPurchaseModal :id="selectedPurchaseId" ref="summaryModal" />
         </v-card-text>
       </v-card>
     </v-tabs-window>
@@ -74,13 +78,19 @@
 </template>
 <script>
   import CurrencyText from './CurrencyText.vue';
+  import SummaryPurchaseModal from './SummaryPurchaseModal.vue';
+
   export default {
     name: 'ReconciliationJar',
     props: {
       msg: String,
     },
+    components: {
+      SummaryPurchaseModal,
+    },
     data () {
       return {
+        selectedPurchaseId: null,
         selectedTab: null,
         reconciliation: {
           datetime: '',
@@ -141,6 +151,10 @@
         const formattedDate = localDate.toISOString().slice(0,16);
         return formattedDate;
       },
+      openSummaryModal(id) {
+        this.selectedPurchaseId = id;
+        this.$refs.summaryModal.dialog = true;
+      },
     },
   }
 </script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchaseModal.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchaseModal.vue
new file mode 100644
index 0000000..0079d0f
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchaseModal.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>