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 6b2472c..13ce8c2 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
@@ -3,5 +3,98 @@
     <v-toolbar>
       <v-toolbar-title> Cuadre del Tarro </v-toolbar-title>
     </v-toolbar>
+
+        <v-card>
+      <v-card-text>
+        <v-text-field
+          v-model="reconciliation.datetime"
+          label="Fecha"
+          type="date"
+          :rules="[rules.required]"
+          required
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.cashman"
+          label="Cajero"
+          :rules="[rules.required]"
+          required
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.total_cash_purchases"
+          label="Total Ventas en efectivo"
+          :rules="[rules.required]"
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.cash_taken"
+          label="Dinero Recogido"
+          :rules="[rules.required]"
+        ></v-text-field>
+        <v-text-field
+          v-model="reconciliation.cash_discrepancy"
+          label="Descuadre"
+          :rules="[rules.required]"
+        ></v-text-field>
+      </v-card-text>
+        </v-card>
+
+    <v-card v-for="(purchases, payment_method) in summary.purchases" :key="payment_method">
+      <v-card-title>{{ payment_method }} {{ totalByMethod(payment_method) }}</v-card-title>
+      <v-card-text>
+        <v-data-table-virtual
+          :headers="summary.headers"
+          :items="purchases"
+        >
+        </v-data-table-virtual>
+      </v-card-text>
+    </v-card>
+
+
   </v-container>
 </template>
+<script>
+  export default {
+    name: 'ReconciliationJar',
+    props: {
+      msg: String,
+    },
+    data () {
+      return {
+        reconciliation: {
+          datetime: '',
+          total_cash_purchase: 0,
+          cash_taken: 0,
+          cash_discrepancy: 0,
+          other_totals: {
+            confiar: 0,
+            bancolombia: 0
+          },
+        },
+        summary: {
+          headers: [
+            {title: 'Id', value: 'id'},
+            {title: 'Fecha', value: 'date'},
+            {title: 'Cliente', value: 'customer.name'},
+            {title: 'Total', value: 'total'},
+          ],
+          purchases: {
+            cash: [
+              {id: 1, date: '2024-02-01', customer:{name: 'camilocash'}, total: 12000},
+              {id: 1, date: '2024-02-01', customer:{name: 'camilocash'}, total: 12000}
+            ],
+            confiar: [{id: 1, date: '2024-02-01', customer:{name: 'camiloconfiar'}, total: 12000}],
+            bancolombia: [{id: 1, date: '2024-02-01', customer:{name: 'camilobancolobia'}, total: 12000}],
+          },
+        },
+        rules: {
+          required: value => !!value || 'Requerido.',
+        },
+      };
+    },
+
+    methods: {
+      totalByMethod(method) {
+        return this.summary.purchases[method].reduce((a, b) => a + b.total, 0);
+      },
+    },
+  }
+</script>