feat(12-05): build offer editor client component
- Add OfferEditorClient: full editor for /admin/offers/[id]/edit - Categoria/Ticket single-select (OptionSelect) + Tipo/Obiettivo multi-select with on-the-fly creation (OptionMultiSelect) - Services matrix (A/B/C checkboxes) pre-filtered by macro.category, with live "Totale Servizi" recalculation via useMemo (OFFER-11) - Independent manual "Prezzo Pubblico" per tier (OFFER-16) - 5-field "Promessa di Trasformazione" block via EditableCell (OFFER-17) - Salva Offerta / Annulla / Archivia actions wired to saveOfferEditor, toggleOfferArchived and renameOfferOption (OFFER-15)
This commit is contained in:
@@ -0,0 +1,500 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useMemo, useTransition } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
saveOfferEditor,
|
||||||
|
toggleOfferArchived,
|
||||||
|
renameOfferOption,
|
||||||
|
type SaveOfferEditorPayload,
|
||||||
|
} from "@/app/admin/offers/actions";
|
||||||
|
import { OptionSelect } from "@/components/ui/option-select";
|
||||||
|
import { OptionMultiSelect } from "@/components/ui/option-multi-select";
|
||||||
|
import { EditableCell } from "@/components/ui/editable-cell";
|
||||||
|
import type { OfferEditorData, OfferFieldOptions, OfferTierData } from "@/lib/offer-queries";
|
||||||
|
|
||||||
|
type TierLetter = "A" | "B" | "C";
|
||||||
|
const TIER_LETTERS: TierLetter[] = ["A", "B", "C"];
|
||||||
|
|
||||||
|
function emptyTier(letter: TierLetter): OfferTierData {
|
||||||
|
return {
|
||||||
|
id: "",
|
||||||
|
tier_letter: letter,
|
||||||
|
internal_name: "",
|
||||||
|
public_name: "",
|
||||||
|
duration_months: 1,
|
||||||
|
public_price: null,
|
||||||
|
assignedServiceIds: [],
|
||||||
|
servicesTotal: "0",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function padTiers(tiers: OfferTierData[]): OfferTierData[] {
|
||||||
|
return TIER_LETTERS.map(
|
||||||
|
(letter) => tiers.find((t) => t.tier_letter === letter) ?? emptyTier(letter)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatEuro(value: number): string {
|
||||||
|
return `€${value.toLocaleString("it-IT", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatUnitPrice(raw: string): string {
|
||||||
|
const num = parseFloat(raw);
|
||||||
|
return `€${(isNaN(num) ? 0 : num).toLocaleString("it-IT", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
type MacroFields = {
|
||||||
|
internal_name: string;
|
||||||
|
public_name: string;
|
||||||
|
description: string;
|
||||||
|
category: string | null;
|
||||||
|
ticket: string | null;
|
||||||
|
cliente_ideale: string;
|
||||||
|
risultato: string;
|
||||||
|
tempo: string;
|
||||||
|
pain: string;
|
||||||
|
metodo: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function OfferEditorClient({
|
||||||
|
data,
|
||||||
|
fieldOptions,
|
||||||
|
}: {
|
||||||
|
data: OfferEditorData;
|
||||||
|
fieldOptions: OfferFieldOptions;
|
||||||
|
}) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [isPending, startTransition] = useTransition();
|
||||||
|
const [saveError, setSaveError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const [macro, setMacro] = useState<MacroFields>({
|
||||||
|
internal_name: data.macro.internal_name,
|
||||||
|
public_name: data.macro.public_name,
|
||||||
|
description: data.macro.description ?? "",
|
||||||
|
category: data.macro.category,
|
||||||
|
ticket: data.macro.ticket,
|
||||||
|
cliente_ideale: data.macro.cliente_ideale ?? "",
|
||||||
|
risultato: data.macro.risultato ?? "",
|
||||||
|
tempo: data.macro.tempo ?? "",
|
||||||
|
pain: data.macro.pain ?? "",
|
||||||
|
metodo: data.macro.metodo ?? "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [tiers, setTiers] = useState<OfferTierData[]>(() => padTiers(data.tiers));
|
||||||
|
const [tipoTags, setTipoTags] = useState<string[]>(data.tipoTags);
|
||||||
|
const [obiettivoTags, setObiettivoTags] = useState<string[]>(data.obiettivoTags);
|
||||||
|
|
||||||
|
const [categoriaOptions, setCategoriaOptions] = useState<string[]>(fieldOptions.categoria);
|
||||||
|
const [ticketOptions, setTicketOptions] = useState<string[]>(fieldOptions.ticket);
|
||||||
|
const [tipoOptions, setTipoOptions] = useState<string[]>(fieldOptions.tipo);
|
||||||
|
const [obiettivoOptions, setObiettivoOptions] = useState<string[]>(fieldOptions.obiettivo);
|
||||||
|
|
||||||
|
const [initialArchived] = useState<boolean>(data.macro.is_archived);
|
||||||
|
|
||||||
|
const filteredServices = useMemo(() => {
|
||||||
|
return macro.category
|
||||||
|
? data.availableServices.filter((s) => s.category === macro.category)
|
||||||
|
: data.availableServices;
|
||||||
|
}, [macro.category, data.availableServices]);
|
||||||
|
|
||||||
|
const tierTotals = useMemo(() => {
|
||||||
|
return tiers.map((tier) =>
|
||||||
|
tier.assignedServiceIds.reduce((sum, id) => {
|
||||||
|
const service = filteredServices.find((s) => s.id === id);
|
||||||
|
return sum + Number(service?.unit_price ?? 0);
|
||||||
|
}, 0)
|
||||||
|
);
|
||||||
|
}, [tiers, filteredServices]);
|
||||||
|
|
||||||
|
const canSave = tiers.some((t) => t.assignedServiceIds.length > 0);
|
||||||
|
|
||||||
|
function updateMacro<K extends keyof MacroFields>(key: K, value: MacroFields[K]) {
|
||||||
|
setMacro((prev) => ({ ...prev, [key]: value }));
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleService(tierIdx: number, serviceId: string) {
|
||||||
|
setTiers((prev) =>
|
||||||
|
prev.map((tier, idx) => {
|
||||||
|
if (idx !== tierIdx) return tier;
|
||||||
|
const has = tier.assignedServiceIds.includes(serviceId);
|
||||||
|
return {
|
||||||
|
...tier,
|
||||||
|
assignedServiceIds: has
|
||||||
|
? tier.assignedServiceIds.filter((id) => id !== serviceId)
|
||||||
|
: [...tier.assignedServiceIds, serviceId],
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTierPublicPrice(tierIdx: number, value: string) {
|
||||||
|
setTiers((prev) =>
|
||||||
|
prev.map((tier, idx) => (idx === tierIdx ? { ...tier, public_price: value } : tier))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSave() {
|
||||||
|
setSaveError(null);
|
||||||
|
const payload: SaveOfferEditorPayload = {
|
||||||
|
internal_name: macro.internal_name,
|
||||||
|
public_name: macro.public_name || macro.internal_name,
|
||||||
|
description: macro.description,
|
||||||
|
category: macro.category ?? undefined,
|
||||||
|
ticket: macro.ticket ?? undefined,
|
||||||
|
cliente_ideale: macro.cliente_ideale,
|
||||||
|
risultato: macro.risultato,
|
||||||
|
tempo: macro.tempo,
|
||||||
|
pain: macro.pain,
|
||||||
|
metodo: macro.metodo,
|
||||||
|
tiers: tiers.map((t) => ({
|
||||||
|
id: t.id || undefined,
|
||||||
|
tier_letter: (t.tier_letter ?? "A") as "A" | "B" | "C",
|
||||||
|
internal_name: t.internal_name || `Tier ${t.tier_letter}`,
|
||||||
|
public_name: t.public_name || t.tier_letter || "Tier",
|
||||||
|
duration_months: t.duration_months || 1,
|
||||||
|
public_price: t.public_price ? Number(t.public_price) : null,
|
||||||
|
assignedServiceIds: t.assignedServiceIds,
|
||||||
|
})),
|
||||||
|
tipoTags,
|
||||||
|
obiettivoTags,
|
||||||
|
};
|
||||||
|
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
await saveOfferEditor(data.macro.id, payload);
|
||||||
|
router.push("/admin/offers");
|
||||||
|
} catch {
|
||||||
|
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleArchive() {
|
||||||
|
if (!window.confirm("Sei sicuro? L'offerta non sarà visibile nella lista.")) return;
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
await toggleOfferArchived(data.macro.id, true);
|
||||||
|
router.push("/admin/offers");
|
||||||
|
} catch {
|
||||||
|
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRenameCategoria(oldValue: string, newValue: string) {
|
||||||
|
setCategoriaOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||||
|
if (macro.category === oldValue) updateMacro("category", newValue);
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
await renameOfferOption("categoria", oldValue, newValue);
|
||||||
|
} catch {
|
||||||
|
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRenameTicket(oldValue: string, newValue: string) {
|
||||||
|
setTicketOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||||
|
if (macro.ticket === oldValue) updateMacro("ticket", newValue);
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
await renameOfferOption("ticket", oldValue, newValue);
|
||||||
|
} catch {
|
||||||
|
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRenameTipo(oldValue: string, newValue: string) {
|
||||||
|
setTipoOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||||
|
setTipoTags((prev) => prev.map((t) => (t === oldValue ? newValue : t)));
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
await renameOfferOption("tipo", oldValue, newValue);
|
||||||
|
} catch {
|
||||||
|
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRenameObiettivo(oldValue: string, newValue: string) {
|
||||||
|
setObiettivoOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||||
|
setObiettivoTags((prev) => prev.map((t) => (t === oldValue ? newValue : t)));
|
||||||
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
|
await renameOfferOption("obiettivo", oldValue, newValue);
|
||||||
|
} catch {
|
||||||
|
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto py-8 px-4 space-y-8">
|
||||||
|
{/* Header & navigation */}
|
||||||
|
<div>
|
||||||
|
<Link href="/admin/offers" className="text-sm text-[#71717a] hover:text-[#1a1a1a]">
|
||||||
|
← Indietro
|
||||||
|
</Link>
|
||||||
|
<div className="mt-2 flex items-center justify-between">
|
||||||
|
<h2 className="text-xl font-semibold text-[#1a1a1a]">Modifica Offerta</h2>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2">
|
||||||
|
<h3 className="text-base font-semibold text-[#1a1a1a]">
|
||||||
|
<EditableCell
|
||||||
|
value={macro.internal_name}
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
onSave={(v) => updateMacro("internal_name", v)}
|
||||||
|
/>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tags block */}
|
||||||
|
<section className="space-y-4">
|
||||||
|
<h3 className="text-base font-semibold text-[#1a1a1a]">Tag</h3>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">Categoria</span>
|
||||||
|
<OptionSelect
|
||||||
|
value={macro.category}
|
||||||
|
options={categoriaOptions}
|
||||||
|
onChange={(v) => updateMacro("category", v)}
|
||||||
|
onRename={handleRenameCategoria}
|
||||||
|
placeholder="Seleziona categoria..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">Ticket</span>
|
||||||
|
<OptionSelect
|
||||||
|
value={macro.ticket}
|
||||||
|
options={ticketOptions}
|
||||||
|
onChange={(v) => updateMacro("ticket", v)}
|
||||||
|
onRename={handleRenameTicket}
|
||||||
|
placeholder="Seleziona ticket..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">Tipo</span>
|
||||||
|
<OptionMultiSelect
|
||||||
|
values={tipoTags}
|
||||||
|
options={tipoOptions}
|
||||||
|
onAdd={(v) => {
|
||||||
|
setTipoTags((prev) => [...prev, v]);
|
||||||
|
if (!tipoOptions.includes(v)) setTipoOptions((prev) => [...prev, v]);
|
||||||
|
}}
|
||||||
|
onRemove={(v) => setTipoTags((prev) => prev.filter((t) => t !== v))}
|
||||||
|
onRename={handleRenameTipo}
|
||||||
|
placeholder="+ Crea Tipo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">Obiettivo</span>
|
||||||
|
<OptionMultiSelect
|
||||||
|
values={obiettivoTags}
|
||||||
|
options={obiettivoOptions}
|
||||||
|
onAdd={(v) => {
|
||||||
|
setObiettivoTags((prev) => [...prev, v]);
|
||||||
|
if (!obiettivoOptions.includes(v)) setObiettivoOptions((prev) => [...prev, v]);
|
||||||
|
}}
|
||||||
|
onRemove={(v) => setObiettivoTags((prev) => prev.filter((t) => t !== v))}
|
||||||
|
onRename={handleRenameObiettivo}
|
||||||
|
placeholder="+ Crea Obiettivo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services matrix */}
|
||||||
|
<section className="space-y-3">
|
||||||
|
<h3 className="text-base font-semibold text-[#1a1a1a]">Servizi Inclusi</h3>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
|
||||||
|
<tr>
|
||||||
|
<th className="text-left py-2 px-3 font-semibold text-[#71717a]">Servizio</th>
|
||||||
|
<th className="text-right py-2 px-3 font-semibold text-[#71717a]">Prezzo</th>
|
||||||
|
{TIER_LETTERS.map((letter) => (
|
||||||
|
<th
|
||||||
|
key={letter}
|
||||||
|
className="text-center py-2 px-3 font-semibold text-[#71717a] w-12"
|
||||||
|
>
|
||||||
|
{letter}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{filteredServices.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={2 + TIER_LETTERS.length} className="py-3 px-3 text-[#71717a]">
|
||||||
|
Nessun servizio disponibile per questa categoria
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
filteredServices.map((service) => (
|
||||||
|
<tr
|
||||||
|
key={service.id}
|
||||||
|
className="border-b border-[#e5e7eb] hover:bg-[#f9f9f9] transition-colors duration-150 h-10"
|
||||||
|
>
|
||||||
|
<td className="py-2 px-3 text-[#1a1a1a]">{service.name}</td>
|
||||||
|
<td className="py-2 px-3 text-right tabular-nums text-[#1a1a1a]">
|
||||||
|
{formatUnitPrice(service.unit_price)}
|
||||||
|
</td>
|
||||||
|
{tiers.map((tier, tierIdx) => (
|
||||||
|
<td key={tier.tier_letter} className="py-2 px-3 text-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={tier.assignedServiceIds.includes(service.id)}
|
||||||
|
onChange={() => toggleService(tierIdx, service.id)}
|
||||||
|
style={{ accentColor: "#1A463C" }}
|
||||||
|
className="h-4 w-4 cursor-pointer"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr className="border-t border-[#e5e7eb]">
|
||||||
|
<td className="py-2 px-3 font-semibold text-[#1a1a1a]" colSpan={2}>
|
||||||
|
Totale Servizi
|
||||||
|
</td>
|
||||||
|
{tierTotals.map((total, idx) => (
|
||||||
|
<td
|
||||||
|
key={tiers[idx].tier_letter}
|
||||||
|
className="py-2 px-3 text-center font-semibold text-[#1a1a1a] tabular-nums"
|
||||||
|
>
|
||||||
|
{formatEuro(total)}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="py-2 px-3 font-semibold text-[#1a1a1a]" colSpan={2}>
|
||||||
|
Prezzo Pubblico
|
||||||
|
</td>
|
||||||
|
{tiers.map((tier, tierIdx) => (
|
||||||
|
<td key={tier.tier_letter} className="py-2 px-3 text-center">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
value={tier.public_price ?? ""}
|
||||||
|
onChange={(e) => updateTierPublicPrice(tierIdx, e.target.value)}
|
||||||
|
placeholder="€0,00"
|
||||||
|
className="w-20 text-center text-sm border border-[#e5e7eb] rounded px-1 py-1 tabular-nums focus-visible:ring-1 focus-visible:ring-primary focus:outline-none"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Transformation promise block */}
|
||||||
|
<section className="space-y-4">
|
||||||
|
<h3 className="text-base font-semibold text-[#1a1a1a]">Promessa di Trasformazione</h3>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">Aiuto</span>
|
||||||
|
<div className="flex-1">
|
||||||
|
<EditableCell
|
||||||
|
value={macro.cliente_ideale}
|
||||||
|
type="text"
|
||||||
|
placeholder="Aggiungi cliente ideale"
|
||||||
|
onSave={(v) => updateMacro("cliente_ideale", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">A ottenere</span>
|
||||||
|
<div className="flex-1">
|
||||||
|
<EditableCell
|
||||||
|
value={macro.risultato}
|
||||||
|
type="text"
|
||||||
|
placeholder="Aggiungi risultato"
|
||||||
|
onSave={(v) => updateMacro("risultato", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">In</span>
|
||||||
|
<div className="flex-1">
|
||||||
|
<EditableCell
|
||||||
|
value={macro.tempo}
|
||||||
|
type="text"
|
||||||
|
placeholder="Aggiungi durata (es. 3 mesi)"
|
||||||
|
onSave={(v) => updateMacro("tempo", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">Senza</span>
|
||||||
|
<div className="flex-1">
|
||||||
|
<EditableCell
|
||||||
|
value={macro.pain}
|
||||||
|
type="text"
|
||||||
|
placeholder="Aggiungi pain point"
|
||||||
|
onSave={(v) => updateMacro("pain", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-xs text-[#71717a] w-24 shrink-0">Grazie a</span>
|
||||||
|
<div className="flex-1">
|
||||||
|
<EditableCell
|
||||||
|
value={macro.metodo}
|
||||||
|
type="text"
|
||||||
|
placeholder="Aggiungi metodo"
|
||||||
|
onSave={(v) => updateMacro("metodo", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
{saveError && <p className="text-sm text-red-600">{saveError}</p>}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={!canSave || isPending}
|
||||||
|
title={!canSave ? "Seleziona almeno un servizio" : undefined}
|
||||||
|
className="bg-[#1A463C] text-white text-sm font-semibold px-6 py-4 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[#163a31] transition-colors duration-150"
|
||||||
|
>
|
||||||
|
Salva Offerta
|
||||||
|
</button>
|
||||||
|
<Link
|
||||||
|
href="/admin/offers"
|
||||||
|
className="border border-[#e5e7eb] text-[#1a1a1a] text-sm font-semibold px-6 py-4 rounded hover:bg-[#f9f9f9] transition-colors duration-150"
|
||||||
|
>
|
||||||
|
Annulla
|
||||||
|
</Link>
|
||||||
|
{!initialArchived && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleArchive}
|
||||||
|
disabled={isPending}
|
||||||
|
className="text-[#dc2626] text-sm font-semibold px-6 py-4 rounded hover:bg-red-50 transition-colors duration-150 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Archivia
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user