feat: UI completa funcional para todos los módulos

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

@@ -1,6 +1,53 @@
 <template>
   <div>
     <h2>Gastos</h2>
-    <p>Módulo en desarrollo</p>
+    <section>
+      <input v-model="concepto" placeholder="Concepto (cinta, lapicero, bolsas...)" />
+      <input v-model.number="monto" type="number" placeholder="Monto" />
+      <select v-model="formaPago">
+        <option value="EFECTIVO">Efectivo</option>
+        <option value="QR">QR</option>
+      </select>
+      <button @click="registrar">Registrar Gasto</button>
+    </section>
+    <section>
+      <h3>Gastos del día</h3>
+      <ul>
+        <li v-for="g in gastos" :key="g.id">{{ g.concepto }} - ${{ g.monto }} ({{ g.formaPago }})</li>
+      </ul>
+    </section>
   </div>
 </template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { GastosService } from '@toldo/services';
+
+const gastosService = new GastosService();
+const concepto = ref('');
+const monto = ref(0);
+const formaPago = ref<'EFECTIVO' | 'QR'>('EFECTIVO');
+const gastos = ref<any[]>([]);
+
+async function cargar() {
+  gastos.value = await gastosService.getGastosDelDia(new Date());
+}
+
+async function registrar() {
+  if (!concepto.value || monto.value <= 0) return;
+  await gastosService.registrarGasto({
+    id: crypto.randomUUID(),
+    fecha: new Date(),
+    concepto: concepto.value,
+    monto: monto.value,
+    formaPago: formaPago.value,
+    createdAt: new Date()
+  } as any);
+  concepto.value = '';
+  monto.value = 0;
+  await cargar();
+  alert('Gasto registrado');
+}
+
+onMounted(cargar);
+</script>