112 lines
4.6 KiB
TypeScript
112 lines
4.6 KiB
TypeScript
import React from 'react';
|
|
import { Target, CheckCircle2, TrendingUp } from 'lucide-react';
|
|
import BudgetSimulator from '@/components/BudgetSimulator';
|
|
|
|
export const revalidate = 0;
|
|
|
|
export default async function EstrategiaPage() {
|
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://supabase.4ventures.es';
|
|
const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
|
|
|
|
const now = new Date();
|
|
const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`;
|
|
|
|
let targetData: any = {
|
|
revenue_target: 10000,
|
|
revenue_actual: 0,
|
|
revenue_achievement_pct: 0,
|
|
leads_target: 20,
|
|
leads_actual: 0,
|
|
clients_target: 4,
|
|
clients_actual: 0
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`${supabaseUrl}/rest/v1/rpc/targets_vs_actual`, {
|
|
method: 'POST',
|
|
headers: {
|
|
apikey: serviceKey,
|
|
Authorization: `Bearer ${serviceKey}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ p_month: currentMonth }),
|
|
cache: 'no-store'
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
targetData = data[0];
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Error fetching targets_vs_actual:', e);
|
|
}
|
|
|
|
const revenuePct = Math.min(100, Math.round(targetData.revenue_achievement_pct || 0));
|
|
const leadsPct = targetData.leads_target > 0
|
|
? Math.min(100, Math.round((Number(targetData.leads_actual) / Number(targetData.leads_target)) * 100))
|
|
: 0;
|
|
const clientsPct = targetData.clients_target > 0
|
|
? Math.min(100, Math.round((Number(targetData.clients_actual) / Number(targetData.clients_target)) * 100))
|
|
: 0;
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight text-white">Estrategia de Crecimiento & Objetivos</h2>
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
Monitoreo mensual en tiempo real de metas fijadas frente al rendimiento real consolidado en Supabase.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="bg-[#111827] border border-gray-800 rounded-xl p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-semibold text-white text-base">Objetivo de Facturación</h3>
|
|
<Target className="w-5 h-5 text-brand-500" />
|
|
</div>
|
|
<p className="text-3xl font-extrabold text-white mb-2">
|
|
{Number(targetData.revenue_actual || 0).toLocaleString('es-ES', { minimumFractionDigits: 2 })} €
|
|
</p>
|
|
<div className="w-full bg-gray-800 rounded-full h-2 mb-2">
|
|
<div className="bg-brand-500 h-2 rounded-full" style={{ width: `${revenuePct}%` }}></div>
|
|
</div>
|
|
<p className="text-xs text-gray-400">
|
|
Meta: {Number(targetData.revenue_target || 0).toLocaleString('es-ES')} € ({revenuePct}% completado)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-[#111827] border border-gray-800 rounded-xl p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-semibold text-white text-base">Meta de Leads Cualificados</h3>
|
|
<TrendingUp className="w-5 h-5 text-blue-400" />
|
|
</div>
|
|
<p className="text-3xl font-extrabold text-white mb-2">{targetData.leads_actual || 0}</p>
|
|
<div className="w-full bg-gray-800 rounded-full h-2 mb-2">
|
|
<div className="bg-blue-400 h-2 rounded-full" style={{ width: `${leadsPct}%` }}></div>
|
|
</div>
|
|
<p className="text-xs text-gray-400">
|
|
{targetData.leads_actual || 0} de {targetData.leads_target || 0} leads captados ({leadsPct}%)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-[#111827] border border-gray-800 rounded-xl p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-semibold text-white text-base">Nuevos Clientes (Won)</h3>
|
|
<CheckCircle2 className="w-5 h-5 text-emerald-400" />
|
|
</div>
|
|
<p className="text-3xl font-extrabold text-white mb-2">{targetData.clients_actual || 0}</p>
|
|
<div className="w-full bg-gray-800 rounded-full h-2 mb-2">
|
|
<div className="bg-emerald-400 h-2 rounded-full" style={{ width: `${clientsPct}%` }}></div>
|
|
</div>
|
|
<p className="text-xs text-gray-400">
|
|
{targetData.clients_actual || 0} de {targetData.clients_target || 0} clientes ganados ({clientsPct}%)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<BudgetSimulator />
|
|
</div>
|
|
);
|
|
}
|