feat(05-04): OffersSection component + client dashboard wiring + /admin/forecast page

- 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
This commit is contained in:
2026-05-30 16:43:14 +02:00
parent c398d6de34
commit 745f8a78c0
4 changed files with 123 additions and 0 deletions
+75
View File
@@ -0,0 +1,75 @@
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>
);
}
+1
View File
@@ -66,6 +66,7 @@ function projectViewToClientView(
created_at: n.created_at instanceof Date ? n.created_at.toISOString() : String(n.created_at),
})),
global_progress_pct: view.global_progress_pct,
activeOffers: view.activeOffers,
};
}
+7
View File
@@ -7,6 +7,7 @@ import { DocumentsSection } from './documents-section';
import { NotesSection } from './notes-section';
import { PhaseViewToggle } from './client/kanban/PhaseViewToggle';
import { ChatSection } from './client/ChatSection';
import { OffersSection } from './client/OffersSection';
interface ClientDashboardProps {
view: ClientView;
@@ -54,6 +55,12 @@ export function ClientDashboard({ view, token, comments }: ClientDashboardProps)
<h2 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Pagamenti</h2>
<PaymentStatus accepted_total={view.client.accepted_total} payments={view.payments} />
</div>
{view.activeOffers && view.activeOffers.length > 0 && (
<div>
<h2 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Offerte Attive</h2>
<OffersSection offers={view.activeOffers} />
</div>
)}
<div>
<h2 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Documenti & File</h2>
<DocumentsSection documents={view.documents} />
+40
View File
@@ -0,0 +1,40 @@
interface ActiveOffer {
id: string;
public_name: string; // micro offer public name only (security: see T-05-10)
cumulative_price: string; // sum of service prices
accepted_total: string | null;
}
interface OffersSectionProps {
offers: ActiveOffer[];
}
export function OffersSection({ offers }: OffersSectionProps) {
if (offers.length === 0) return null;
return (
<div className="space-y-3">
{offers.map((offer) => (
<div key={offer.id} className="bg-white rounded-lg border border-[#e5e5e5] p-4">
<p className="text-sm font-semibold text-[#1a1a1a]">{offer.public_name}</p>
<div className="mt-2 space-y-1">
<div className="flex items-center justify-between">
<span className="text-xs text-[#71717a]">Valore incluso</span>
<span className="text-xs font-mono text-[#1a1a1a]">
{parseFloat(offer.cumulative_price).toFixed(2)}
</span>
</div>
{offer.accepted_total && (
<div className="flex items-center justify-between">
<span className="text-xs font-semibold text-[#1a1a1a]">Prezzo finale</span>
<span className="text-sm font-bold text-[#1A463C]">
{parseFloat(offer.accepted_total).toFixed(2)}
</span>
</div>
)}
</div>
</div>
))}
</div>
);
}