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>