simone
745f8a78c0
- Create src/components/client/OffersSection.tsx — displays public_name, cumulative_price, accepted_total (no internal_name) - Extend client-dashboard.tsx — import OffersSection, add Offerte Attive sidebar block conditional on view.activeOffers - Extend client/[token]/page.tsx adapter — map activeOffers from ProjectView to ClientView - Create src/app/admin/forecast/page.tsx — RSC with 12-month revenue table using getRevenueForecast12Months(), bar chart column, totals row, empty-state message
76 lines
3.2 KiB
TypeScript
76 lines
3.2 KiB
TypeScript
import { getRevenueForecast12Months } from "@/lib/forecast-queries";
|
|
|
|
export const revalidate = 0;
|
|
|
|
export default async function ForecastPage() {
|
|
const forecast = await getRevenueForecast12Months();
|
|
const totalForecast = forecast.reduce((sum, m) => sum + m.total, 0);
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto py-8 px-4">
|
|
<h1 className="text-2xl font-bold text-[#1a1a1a] mb-2">Revenue Forecast</h1>
|
|
<p className="text-sm text-[#71717a] mb-6">
|
|
Proiezione 12 mesi basata sulle offerte attive, i loro accepted_total e le durate in mesi.
|
|
Ogni offerta distribuisce il suo totale equamente per i mesi di durata a partire dalla data di inizio.
|
|
</p>
|
|
|
|
<div className="bg-white rounded-lg border border-[#e5e7eb] overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-[#71717a] uppercase tracking-wider">
|
|
Mese
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-[#71717a] uppercase tracking-wider">
|
|
Fatturato previsto
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-semibold text-[#71717a] uppercase tracking-wider">
|
|
Barra
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-[#e5e7eb]">
|
|
{forecast.map((month) => {
|
|
const maxTotal = Math.max(...forecast.map((m) => m.total), 1);
|
|
const pct = Math.round((month.total / maxTotal) * 100);
|
|
return (
|
|
<tr key={`${month.year}-${month.month}`} className="hover:bg-[#f9f9f9]">
|
|
<td className="px-4 py-3 text-[#1a1a1a] capitalize">{month.label}</td>
|
|
<td className="px-4 py-3 text-right font-mono text-[#1a1a1a]">
|
|
{month.total > 0 ? `€${month.total.toFixed(2)}` : <span className="text-[#71717a]">—</span>}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{month.total > 0 && (
|
|
<div className="flex justify-end items-center">
|
|
<div
|
|
className="bg-[#1A463C] h-2 rounded"
|
|
style={{ width: `${pct}%`, minWidth: "4px", maxWidth: "120px" }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
<tfoot className="border-t-2 border-[#e5e7eb] bg-[#f9f9f9]">
|
|
<tr>
|
|
<td className="px-4 py-3 text-sm font-semibold text-[#1a1a1a]">Totale 12 mesi</td>
|
|
<td className="px-4 py-3 text-right font-mono font-bold text-[#1a1a1a]">
|
|
€{totalForecast.toFixed(2)}
|
|
</td>
|
|
<td />
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
{forecast.every((m) => m.total === 0) && (
|
|
<p className="text-sm text-[#71717a] mt-4">
|
|
Nessuna offerta con accepted_total trovata. Assegna micro-offerte ai progetti e imposta il totale accettato.
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|