feat(05-03): add OffersTab component + Offerte tab in project workspace

- Create OffersTab.tsx client component with assign form and offer list
- Inline accepted_total editing via onBlur handler
- Add Offerte tab trigger and content to project workspace page
- Destructure projectOffers and availableMicros from getProjectFullDetail result
This commit is contained in:
2026-05-30 16:27:07 +02:00
parent b3f781b9b5
commit 0c09d44b68
2 changed files with 177 additions and 0 deletions
+12
View File
@@ -8,6 +8,7 @@ import { DocumentsTab } from "@/components/admin/tabs/DocumentsTab";
import { CommentsTab } from "@/components/admin/tabs/CommentsTab";
import { QuoteTab } from "@/components/admin/tabs/QuoteTab";
import { TimerTab } from "@/components/admin/tabs/TimerTab";
import { OffersTab } from "@/components/admin/tabs/OffersTab";
import { PhasesViewToggle } from "@/components/admin/kanban/PhasesViewToggle";
import Link from "next/link";
@@ -38,6 +39,8 @@ export default async function ProjectDetailPage({
activeTimerEntryId,
activeTimerStartedAt,
totalTrackedSeconds,
projectOffers,
availableMicros,
} = detail;
return (
@@ -71,6 +74,7 @@ export default async function ProjectDetailPage({
<TabsTrigger value="comments">Commenti</TabsTrigger>
<TabsTrigger value="quote">Preventivo</TabsTrigger>
<TabsTrigger value="timer">Timer</TabsTrigger>
<TabsTrigger value="offers">Offerte</TabsTrigger>
</TabsList>
<TabsContent value="phases">
@@ -133,6 +137,14 @@ export default async function ProjectDetailPage({
targetHourlyRate={targetHourlyRate}
/>
</TabsContent>
<TabsContent value="offers">
<OffersTab
projectId={id}
projectOffers={projectOffers}
availableMicros={availableMicros}
/>
</TabsContent>
</Tabs>
</div>
);
+165
View File
@@ -0,0 +1,165 @@
"use client";
import { useTransition, useRef } from "react";
import { useRouter } from "next/navigation";
import {
assignOfferToProject,
removeProjectOffer,
updateProjectOfferTotal,
} from "@/app/admin/projects/project-actions";
import type { ProjectOfferWithMicro } from "@/lib/admin-queries";
type AvailableMicro = {
id: string;
internal_name: string;
public_name: string;
duration_months: number;
};
interface OffersTabProps {
projectId: string;
projectOffers: ProjectOfferWithMicro[];
availableMicros: AvailableMicro[];
}
export function OffersTab({ projectId, projectOffers, availableMicros }: OffersTabProps) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
const formRef = useRef<HTMLFormElement>(null);
function handleAssign(formData: FormData) {
startTransition(async () => {
await assignOfferToProject(formData);
formRef.current?.reset();
router.refresh();
});
}
function handleRemove(offerId: string) {
startTransition(async () => {
await removeProjectOffer(offerId, projectId);
router.refresh();
});
}
function handleTotalUpdate(offerId: string, value: string) {
startTransition(async () => {
await updateProjectOfferTotal(offerId, projectId, value);
router.refresh();
});
}
return (
<div className="space-y-6 max-w-2xl">
{/* Active assignments */}
<div>
<h3 className="text-sm font-semibold text-[#1a1a1a] mb-3">Offerte Attive</h3>
{projectOffers.length === 0 ? (
<p className="text-sm text-[#71717a]">Nessuna offerta assegnata a questo progetto.</p>
) : (
<div className="space-y-3">
{projectOffers.map((offer) => (
<div
key={offer.id}
className="bg-white rounded-lg border border-[#e5e7eb] p-4 flex items-start justify-between gap-4"
>
<div className="flex-1">
<p className="text-sm font-medium text-[#1a1a1a]">{offer.micro_internal_name}</p>
<p className="text-xs text-[#71717a]">
Pubblico: {offer.micro_public_name} &middot; {offer.micro_duration_months}{" "}
{offer.micro_duration_months === 1 ? "mese" : "mesi"}
</p>
<p className="text-xs text-[#71717a] mt-1">
Inizio: {new Date(offer.start_date).toLocaleDateString("it-IT")}
</p>
{/* Accepted total inline edit */}
<div className="flex items-center gap-2 mt-2">
<label className="text-xs text-[#71717a]">Totale accettato :</label>
<input
type="number"
step="0.01"
min="0"
defaultValue={offer.accepted_total ?? ""}
placeholder="0.00"
onBlur={(e) => {
const val = e.currentTarget.value.trim();
if (val !== (offer.accepted_total ?? "")) {
handleTotalUpdate(offer.id, val);
}
}}
className="w-24 border rounded px-2 py-0.5 text-xs"
/>
</div>
</div>
<button
type="button"
onClick={() => handleRemove(offer.id)}
disabled={isPending}
className="text-xs text-red-600 hover:underline shrink-0"
>
Rimuovi
</button>
</div>
))}
</div>
)}
</div>
{/* Assignment form */}
<div>
<h3 className="text-sm font-semibold text-[#1a1a1a] mb-3">Assegna Micro-Offerta</h3>
<form
ref={formRef}
action={handleAssign}
className="bg-white rounded-lg border border-[#e5e7eb] p-4 space-y-3"
>
<input type="hidden" name="project_id" value={projectId} />
<div>
<label className="text-xs text-[#71717a] block mb-1">Micro-offerta</label>
<select
name="micro_id"
required
className="w-full border rounded px-3 py-1.5 text-sm"
>
<option value="">Seleziona micro-offerta...</option>
{availableMicros.map((m) => (
<option key={m.id} value={m.id}>
{m.internal_name} ({m.duration_months}{" "}
{m.duration_months === 1 ? "mese" : "mesi"})
</option>
))}
</select>
</div>
<div>
<label className="text-xs text-[#71717a] block mb-1">Totale accettato (opzionale)</label>
<input
name="accepted_total"
type="number"
step="0.01"
min="0"
placeholder="0.00"
className="w-full border rounded px-3 py-1.5 text-sm"
/>
</div>
<button
type="submit"
disabled={isPending || availableMicros.length === 0}
className="bg-[#1A463C] text-white text-sm px-4 py-1.5 rounded hover:bg-[#163a31] disabled:opacity-50"
>
{isPending ? "Salvataggio..." : "Assegna Offerta"}
</button>
{availableMicros.length === 0 && (
<p className="text-xs text-[#71717a]">
Nessuna micro-offerta disponibile. Crea prima una micro-offerta in{" "}
<a href="/admin/offers" className="underline">Offerte</a>.
</p>
)}
</form>
</div>
</div>
);
}