feat: UI completa funcional para todos los módulos

apps/toldo-app/src/views/Cuadre.vue

@@ -1,6 +1,46 @@
 <template>
   <div>
-    <h2>Cuadre</h2>
-    <p>Módulo en desarrollo</p>
+    <h2>Cuadre de Caja</h2>
+    <section>
+      <label>Base Inicial: </label>
+      <input v-model.number="baseInicial" type="number" />
+      <button @click="calcular">Calcular Cuadre</button>
+    </section>
+    <section v-if="cuadre">
+      <h3>Resultado</h3>
+      <p>Ventas Efectivo: ${{ cuadre.totalVentasEfectivo }}</p>
+      <p>Ventas QR: ${{ cuadre.totalVentasQR }}</p>
+      <p>Gastos Efectivo: ${{ cuadre.totalGastosEfectivo }}</p>
+      <p>Gastos QR: ${{ cuadre.totalGastosQR }}</p>
+      <p><strong>Saldo Esperado Efectivo: ${{ cuadre.saldoEsperadoEfectivo }}</strong></p>
+      <p>Total Ventas: ${{ cuadre.totalVentas }}</p>
+      <label>Saldo Real en Efectivo: </label>
+      <input v-model.number="saldoReal" type="number" />
+      <button @click="guardar">Guardar Cuadre</button>
+      <p v-if="descuadre !== null">Descuadre: ${{ descuadre }}</p>
+    </section>
   </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CuadreService } from '@toldo/services';
+
+const cuadreService = new CuadreService();
+const baseInicial = ref(0);
+const cuadre = ref<any>(null);
+const saldoReal = ref(0);
+const descuadre = ref<number | null>(null);
+
+async function calcular() {
+  cuadre.value = await cuadreService.calcularCuadreDelDia(new Date(), baseInicial.value);
+}
+
+async function guardar() {
+  if (!cuadre.value) return;
+  cuadre.value.saldoRealEfectivo = saldoReal.value;
+  await cuadreService.guardarCuadre({ ...cuadre.value, id: crypto.randomUUID(), createdAt: new Date() });
+  descuadre.value = saldoReal.value - cuadre.value.saldoEsperadoEfectivo;
+  alert('Cuadre guardado');
+}
+</script>