simone/clienthub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tier names + per-tier prices on offer cards, unified admin UI

Browse Source 
- offer editor: per-tier name input (mirrors public_name/internal_name)
- offer list cards: show 3-tier services total + manual public price
- shared PageHeader component, full-width layout across all admin pages
- UI-RULES.md design conventions doc

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Simone Cavalli
2026-06-26 16:58:18 +02:00
parent 9abe1fe4bb
commit add2176a6b
12 changed files with 281 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/catalog/page.tsx
+3 -5
View File
@@ -1,5 +1,6 @@
import { getAllServices, getCatalogFieldOptions } from "@/lib/admin-queries";
import { CatalogSearch } from "./CatalogSearch";
import { PageHeader } from "@/components/admin/PageHeader";
export const revalidate = 0;
@@ -10,11 +11,8 @@ export default async function CatalogPage() {
]);
return (
<div>
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold text-[#1a1a1a]">Catalogo Servizi</h1>
</div>
<div className="space-y-6">
<PageHeader title="Catalogo Servizi" />
<CatalogSearch services={services} options={options} />
</div>
);
src/app/admin/clients/page.tsx
+17 -15
View File
@@ -2,6 +2,7 @@ import Link from "next/link";
import { getAllClientsWithPayments } from "@/lib/admin-queries";
import { ClientRow } from "@/components/admin/ClientRow";
import { Button } from "@/components/ui/button";
import { PageHeader } from "@/components/admin/PageHeader";
export const revalidate = 0;
@@ -14,22 +15,23 @@ export default async function AdminClientsPage({
const showArchived = archived === "1";
const clients = await getAllClientsWithPayments(showArchived);
const clientiAction = (
<div className="flex items-center gap-3">
<a
href={showArchived ? "/admin/clients" : "/admin/clients?archived=1"}
className="text-xs text-[#71717a] hover:text-[#1A463C] underline underline-offset-2"
>
{showArchived ? "Nascondi archiviati" : "Mostra archiviati"}
</a>
<Button asChild>
<Link href="/admin/clients/new">+ Nuovo cliente</Link>
</Button>
</div>
);
return (
<div>
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-4">
<h1 className="text-2xl font-bold text-[#1a1a1a]">Clienti</h1>
<a
href={showArchived ? "/admin/clients" : "/admin/clients?archived=1"}
className="text-xs text-[#71717a] hover:text-[#1A463C] underline underline-offset-2"
>
{showArchived ? "Nascondi archiviati" : "Mostra archiviati"}
</a>
</div>
<Button asChild>
<Link href="/admin/clients/new">+ Nuovo cliente</Link>
</Button>
</div>
<div className="space-y-6">
<PageHeader title="Clienti" action={clientiAction} />
{clients.length === 0 ? (
<div className="text-center py-20 text-[#71717a]">
src/app/admin/impostazioni/page.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
import { getTargetHourlyRate, updateSetting, SETTINGS_KEYS } from "@/lib/settings";
import { getAllPools } from "@/lib/taxonomy";
import { TaxonomyManager } from "@/components/admin/impostazioni/TaxonomyManager";
import { PageHeader } from "@/components/admin/PageHeader";
export const revalidate = 0;
@@ -16,8 +17,8 @@ export default async function ImpostazioniPage() {
}
return (
<div>
<h1 className="text-2xl font-bold text-[#1a1a1a] mb-6">Impostazioni</h1>
<div className="space-y-6">
<PageHeader title="Impostazioni" />
<div className="space-y-6 max-w-4xl">
<div className="bg-white rounded-xl border border-[#e5e7eb] p-6 max-w-md">
src/app/admin/leads/page.tsx
+2 -5
View File
@@ -1,6 +1,7 @@
import { getLeadsWithTags, getLeadFieldOptions } from "@/lib/admin-queries";
import { LeadsViewToggle } from "@/components/admin/leads/LeadsViewToggle";
import { CreateLeadModal } from "@/components/admin/leads/LeadForm";
import { PageHeader } from "@/components/admin/PageHeader";
export const revalidate = 0;
@@ -12,11 +13,7 @@ export default async function LeadsPage() {
return (
<div className="space-y-6">
<div className="flex justify-between items-center">
<h1 className="text-2xl font-bold text-[#1a1a1a]">Lead Pipeline</h1>
<CreateLeadModal />
</div>
<PageHeader title="Lead Pipeline" action={<CreateLeadModal />} />
<LeadsViewToggle leads={leads} options={options} />
</div>
);
src/app/admin/page.tsx
+3 -2
View File
@@ -12,6 +12,7 @@ import { getRevenueForecast12Months, getOffersSoldBreakdown } from "@/lib/foreca
import { YearSelector, MonthlyChart } from "@/components/admin/YearSelector";
import { ForecastChart } from "@/components/admin/ForecastChart";
import { OffersSoldChart } from "@/components/admin/OffersSoldChart";
import { PageHeader } from "@/components/admin/PageHeader";
export const revalidate = 0;
@@ -95,8 +96,8 @@ export default async function AdminDashboard({
const maxClientSeconds = timeByClient[0]?.totalSeconds ?? 1;
return (
<div className="max-w-5xl">
<h1 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
<div className="space-y-6">
<PageHeader title="Dashboard" />
{/* Follow-up Widget */}
<div className="mb-8">
src/app/admin/preventivi/page.tsx
+34 -34
View File
@@ -1,6 +1,7 @@
import Link from "next/link";
import { listProposals } from "@/lib/proposal/queries";
import { FileText, Plus } from "lucide-react";
import { PageHeader } from "@/components/admin/PageHeader";
export const revalidate = 0;
@@ -14,47 +15,46 @@ const STATE_LABELS: Record<string, { label: string; className: string }> = {
export default async function PreventiviPage() {
const proposals = await listProposals();
const preventiviAction = (
<Link
href="/admin/preventivi/genera"
className="flex items-center gap-2 px-4 py-2 bg-[#1A463C] text-white rounded-md text-sm font-medium hover:bg-[#163a31] transition-colors"
>
<Plus size={16} />
Genera preventivo
</Link>
);
return (
<div className="max-w-5xl mx-auto space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-semibold text-foreground">Preventivi</h1>
<p className="text-sm text-muted-foreground mt-1">
Preventivi generati con AI e pubblicati ai clienti
</p>
</div>
<Link
href="/admin/preventivi/genera"
className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors"
>
<Plus size={16} />
Genera preventivo
</Link>
</div>
<div className="space-y-6">
<PageHeader
title="Preventivi"
subtitle="Preventivi generati con AI e pubblicati ai clienti"
action={preventiviAction}
/>
{/* Lista */}
{proposals.length === 0 ? (
<div className="text-center py-20 border border-dashed border-border rounded-lg">
<FileText size={40} className="mx-auto text-muted-foreground mb-4" />
<p className="text-muted-foreground text-sm">Nessun preventivo ancora.</p>
<div className="text-center py-20 border border-dashed border-[#e5e7eb] rounded-lg">
<FileText size={40} className="mx-auto text-[#71717a] mb-4" />
<p className="text-[#71717a] text-sm">Nessun preventivo ancora.</p>
<Link
href="/admin/preventivi/genera"
className="mt-4 inline-flex items-center gap-2 text-sm text-primary hover:underline"
className="mt-4 inline-flex items-center gap-2 text-sm text-[#1A463C] hover:underline"
>
Genera il primo preventivo →
</Link>
</div>
) : (
<div className="border border-border rounded-lg overflow-hidden">
<div className="border border-[#e5e7eb] rounded-lg overflow-hidden">
<table className="w-full text-sm">
<thead className="bg-muted border-b border-border">
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
<tr>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Titolo</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Lead / Cliente</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Offerta</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Stato</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Data</th>
<th className="px-4 py-3 text-left font-medium text-[#71717a]">Titolo</th>
<th className="px-4 py-3 text-left font-medium text-[#71717a]">Lead / Cliente</th>
<th className="px-4 py-3 text-left font-medium text-[#71717a]">Offerta</th>
<th className="px-4 py-3 text-left font-medium text-[#71717a]">Stato</th>
<th className="px-4 py-3 text-left font-medium text-[#71717a]">Data</th>
<th className="px-4 py-3" />
</tr>
</thead>
@@ -63,20 +63,20 @@ export default async function PreventiviPage() {
const stateInfo = STATE_LABELS[p.state] ?? { label: p.state, className: "bg-gray-100 text-gray-700" };
const subject = p.clientName ?? p.leadName ?? "—";
return (
<tr key={p.id} className="border-b border-border last:border-0 hover:bg-muted/50 transition-colors">
<tr key={p.id} className="border-b border-[#e5e7eb] last:border-0 hover:bg-[#f9f9f9] transition-colors">
<td className="px-4 py-3 font-medium">
<Link href={`/admin/preventivi/${p.id}`} className="hover:text-primary transition-colors">
<Link href={`/admin/preventivi/${p.id}`} className="hover:text-[#1A463C] transition-colors">
{p.title ?? "Senza titolo"}
</Link>
</td>
<td className="px-4 py-3 text-muted-foreground">{subject}</td>
<td className="px-4 py-3 text-muted-foreground">{p.offerName}</td>
<td className="px-4 py-3 text-[#71717a]">{subject}</td>
<td className="px-4 py-3 text-[#71717a]">{p.offerName}</td>
<td className="px-4 py-3">
<span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${stateInfo.className}`}>
{stateInfo.label}
</span>
</td>
<td className="px-4 py-3 text-muted-foreground">
<td className="px-4 py-3 text-[#71717a]">
{p.createdAt.toLocaleDateString("it-IT")}
</td>
<td className="px-4 py-3 text-right">
@@ -85,7 +85,7 @@ export default async function PreventiviPage() {
href={`/preventivo/${p.slug}`}
target="_blank"
rel="noopener noreferrer"
className="text-xs text-primary hover:underline"
className="text-xs text-[#1A463C] hover:underline"
>
Apri →
</a>
src/app/admin/projects/page.tsx
+12 -10
View File
@@ -1,23 +1,25 @@
import { getAllProjectsWithPayments } from "@/lib/admin-queries";
import { ProjectRow } from "@/components/admin/ProjectRow";
import Link from "next/link";
import { PageHeader } from "@/components/admin/PageHeader";
export const revalidate = 0;
export default async function ProjectsPage() {
const projects = await getAllProjectsWithPayments();
const projectiAction = (
<Link
href="/admin/projects/new"
className="text-sm bg-[#1A463C] text-white px-4 py-2 rounded-lg hover:bg-[#1A463C]/90 transition-colors"
>
+ Nuovo Progetto
</Link>
);
return (
<div>
<div className="mb-6 flex items-center justify-between">
<h1 className="text-2xl font-bold text-[#1a1a1a]">Progetti</h1>
<Link
href="/admin/projects/new"
className="text-sm bg-[#1A463C] text-white px-4 py-2 rounded-lg hover:bg-[#1A463C]/90 transition-colors"
>
+ Nuovo Progetto
</Link>
</div>
<div className="space-y-6">
<PageHeader title="Progetti" action={projectiAction} />
{projects.length === 0 ? (
<div className="bg-white rounded-xl border border-[#e5e7eb] p-12 text-center">