soft_usite/resources/views/contabilidad/contabilidad.html

<div x-data="contabilidadApp()" x-init="init()" class="p-6">

  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold text-slate-800">Contabilidad</h1>
      <p class="text-sm text-slate-500 mt-1">Consolidado mensual de ingresos y egresos</p>
    </div>
    <div class="flex items-center gap-3">
      <select x-model="mes" @change="loadDashboard()" class="input-field">
        <template x-for="m in 12" :key="m">
          <option :value="m" x-text="meses[m-1]"></option>
        </template>
      </select>
      <select x-model="anio" @change="loadDashboard()" class="input-field">
        <option x-text="anio-2" :value="anio-2"></option>
        <option x-text="anio-1" :value="anio-1"></option>
        <option x-text="anio" :value="anio" selected></option>
      </select>
    </div>
  </div>

  <!-- Tarjetas de resumen -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
      <p class="text-xs uppercase tracking-wide text-slate-500 font-semibold mb-1">Ingresos</p>
      <p class="text-2xl font-bold text-green-600" x-text="formatoCOP(data.total_ingresos)"></p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
      <p class="text-xs uppercase tracking-wide text-slate-500 font-semibold mb-1">Egresos</p>
      <p class="text-2xl font-bold text-red-600" x-text="formatoCOP(data.total_egresos)"></p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
      <p class="text-xs uppercase tracking-wide text-slate-500 font-semibold mb-1">Resultado</p>
      <p class="text-2xl font-bold" :class="data.resultado >= 0 ? 'text-green-600' : 'text-red-600'" x-text="formatoCOP(data.resultado)"></p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
      <p class="text-xs uppercase tracking-wide text-slate-500 font-semibold mb-1">Transacciones</p>
      <p class="text-2xl font-bold text-blue-600" x-text="data.cant_transacciones"></p>
    </div>
  </div>

  <!-- Pendientes -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
      <div class="flex items-center justify-between mb-2">
        <p class="text-sm font-semibold text-slate-700">Por cobrar</p>
        <a href="/app/contabilidad/cuentas-cobro" class="text-xs text-blue-500 hover:underline">Ver todas</a>
      </div>
      <p class="text-xl font-bold text-amber-600" x-text="formatoCOP(data.pendientes_cobro)"></p>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
      <div class="flex items-center justify-between mb-2">
        <p class="text-sm font-semibold text-slate-700">Por pagar</p>
        <a href="/app/contabilidad/cuentas-pagar" class="text-xs text-blue-500 hover:underline">Ver todas</a>
      </div>
      <p class="text-xl font-bold text-red-600" x-text="formatoCOP(data.pendientes_pago)"></p>
    </div>
  </div>

  <!-- Últimas transacciones -->
  <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-bold text-slate-800">Últimas transacciones</h2>
      <a href="/app/contabilidad/transacciones" class="text-sm text-blue-500 hover:underline">Ver todas</a>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-slate-50 text-slate-500 text-xs uppercase tracking-wide">
          <tr>
            <th class="px-3 py-2 text-left">Fecha</th>
            <th class="px-3 py-2 text-left">Tipo</th>
            <th class="px-3 py-2 text-left">Descripción</th>
            <th class="px-3 py-2 text-left">Categoría</th>
            <th class="px-3 py-2 text-left">Entidad</th>
            <th class="px-3 py-2 text-right">Valor</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          <template x-for="t in data.transacciones" :key="t.ID">
            <tr class="hover:bg-slate-50">
              <td class="px-3 py-2 text-xs text-slate-500" x-text="formatoFecha(t.fecha)"></td>
              <td class="px-3 py-2">
                <span class="badge" :class="t.tipo==='ingreso'?'badge-green':'badge-red'" x-text="t.tipo"></span>
              </td>
              <td class="px-3 py-2 text-slate-700" x-text="t.descripcion"></td>
              <td class="px-3 py-2 text-slate-600" x-text="t.cuenta?.nombre||'-'"></td>
              <td class="px-3 py-2 text-slate-600" x-text="t.entidad?.nombre||'-'"></td>
              <td class="px-3 py-2 text-right font-semibold" :class="t.tipo==='ingreso'?'text-green-600':'text-red-600'" x-text="formatoCOP(t.valor)"></td>
            </tr>
          </template>
          <template x-if="!data.transacciones?.length">
            <tr><td colspan="6" class="text-center py-6 text-slate-400">Sin transacciones este mes</td></tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>

</div>

<script>
function contabilidadApp() {
  return {
    data:{transacciones:[]},
    mes:new Date().getMonth()+1,
    anio:new Date().getFullYear(),
    meses:['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],

    async init(){ await this.loadDashboard(); },

    async loadDashboard(){
      try {
        const r=await axios.get(`/app/contabilidad/dashboard?mes=${this.mes}&anio=${this.anio}`);
        this.data=r.data;
      } catch(e){ console.error(e); }
    },

    formatoCOP(n){ if(n==null) return '$0'; return '$ '+Number(n).toLocaleString('es-CO',{minimumFractionDigits:0}); },
    formatoFecha(d){ if(!d) return ''; return new Date(d).toLocaleDateString('es-CO',{day:'2-digit',month:'short',year:'numeric'}); },
  }
}
</script>