feat(10-redo-C): CRM leads module — schema, services, UI (Phase 10 redo)

Stage C of staged Phase 10 redo. Restores dangling phase10-wip work:
- schema.ts: leads expansion + activities/reminders tables + relations
- lead-service.ts / lead-validators.ts service layer
- /admin/leads list + detail + actions, LeadTable/LeadDetail/LeadForm
- LogActivityModal, SendQuoteModal, FollowUpWidget on dashboard
- migration 0005 (applied to prod DB in Stage B, along with
  previously-missing 0001/0003/0004 — root cause of all post-deploy
  500s: prod DB had no migrations applied since 0000)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 20:58:14 +02:00
parent 5aa6614e41
commit 008a43469d
18 changed files with 1972 additions and 3 deletions
+164
View File
@@ -0,0 +1,164 @@
"use client";
import { Lead, Activity, Reminder } from "@/db/schema";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { formatDistanceToNow, format } from "date-fns";
import { it } from "date-fns/locale";
import { LogActivityModal } from "./LogActivityModal";
import { SendQuoteModal } from "./SendQuoteModal";
import { EditLeadModal } from "./LeadForm";
const ACTIVITY_ICON: Record<string, string> = {
call: "📞",
email: "📧",
meeting: "📅",
note: "📝",
};
const STAGE_COLOR: Record<string, string> = {
contacted: "bg-blue-100 text-blue-800",
qualified: "bg-purple-100 text-purple-800",
proposal_sent: "bg-amber-100 text-amber-800",
negotiating: "bg-orange-100 text-orange-800",
won: "bg-green-100 text-green-800",
lost: "bg-red-100 text-red-800",
};
export function LeadDetail({
lead,
activities,
reminders,
}: {
lead: Lead;
activities: Activity[];
reminders: Reminder[];
}) {
return (
<div className="space-y-6">
{/* Header + Actions */}
<div className="flex justify-between items-start">
<div>
<h1 className="text-3xl font-bold">{lead.name}</h1>
<p className="text-gray-600">{lead.company || "Azienda non specificata"}</p>
</div>
<div className="flex gap-2">
<LogActivityModal leadId={lead.id} />
<SendQuoteModal leadId={lead.id} />
<EditLeadModal lead={lead} />
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Lead Profile Card */}
<Card>
<CardHeader>
<CardTitle>Profilo</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<label className="text-sm text-gray-600">Stato</label>
<Badge className={STAGE_COLOR[lead.status as keyof typeof STAGE_COLOR] || ""}>
{lead.status.replace(/_/g, " ")}
</Badge>
</div>
<div>
<label className="text-sm text-gray-600">Email</label>
<p>{lead.email || "—"}</p>
</div>
<div>
<label className="text-sm text-gray-600">Telefono</label>
<p>{lead.phone || "—"}</p>
</div>
<div>
<label className="text-sm text-gray-600">Ultimo contatto</label>
<p>
{lead.last_contact_date
? formatDistanceToNow(new Date(lead.last_contact_date), {
addSuffix: true,
locale: it,
})
: "—"}
</p>
</div>
<div>
<label className="text-sm text-gray-600">Prossima azione</label>
<p className="font-medium">{lead.next_action || "—"}</p>
</div>
</CardContent>
</Card>
{/* Upcoming Reminders Card */}
<Card>
<CardHeader>
<CardTitle>Prossimi Follow-up</CardTitle>
</CardHeader>
<CardContent>
{reminders.length > 0 ? (
<ul className="space-y-2">
{reminders.map((r) => (
<li key={r.id} className="text-sm border-l-2 border-blue-300 pl-2">
<p className="font-medium">{r.title}</p>
<p className="text-gray-600">
{format(new Date(r.due_date), "dd MMM yyyy", { locale: it })}
</p>
</li>
))}
</ul>
) : (
<p className="text-gray-500 text-sm">Nessun reminder</p>
)}
</CardContent>
</Card>
{/* Notes Card */}
<Card>
<CardHeader>
<CardTitle>Note</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm">{lead.notes || "Nessuna nota"}</p>
</CardContent>
</Card>
</div>
{/* Activity Log */}
<Card>
<CardHeader>
<CardTitle>Storico Attività</CardTitle>
</CardHeader>
<CardContent>
{activities.length > 0 ? (
<div className="space-y-4">
{activities.map((activity) => (
<div key={activity.id} className="border-l-4 border-blue-300 pl-4 pb-4">
<div className="flex items-center gap-2">
<span className="text-xl">
{ACTIVITY_ICON[activity.type as keyof typeof ACTIVITY_ICON] || "📝"}
</span>
<span className="font-medium capitalize">{activity.type}</span>
<span className="text-gray-600 text-sm">
{formatDistanceToNow(new Date(activity.activity_date), {
addSuffix: true,
locale: it,
})}
</span>
</div>
<p className="text-sm mt-2">{activity.notes}</p>
{activity.duration_minutes && (
<p className="text-xs text-gray-500 mt-1">
Durata: {activity.duration_minutes} minuti
</p>
)}
</div>
))}
</div>
) : (
<p className="text-gray-500 text-sm">Nessuna attività registrata</p>
)}
</CardContent>
</Card>
</div>
);
}
+365
View File
@@ -0,0 +1,365 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { createLeadSchema, LEAD_STAGES } from "@/lib/lead-validators";
import { Lead } from "@/db/schema";
import { createLead, updateLead } from "@/app/admin/leads/actions";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
type CreateLeadInput = z.infer<typeof createLeadSchema>;
export function CreateLeadModal() {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const form = useForm<any>({
resolver: zodResolver(createLeadSchema),
defaultValues: {
name: "",
email: "",
phone: "",
company: "",
status: "contacted",
notes: "",
},
});
async function onSubmit(data: CreateLeadInput) {
setLoading(true);
try {
const result = await createLead(data);
if (result.success) {
setOpen(false);
form.reset();
} else {
console.error("Error creating lead:", result.error);
}
} finally {
setLoading(false);
}
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button>+ Nuovo Lead</Button>
</DialogTrigger>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Nuovo Lead</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Nome</FormLabel>
<FormControl>
<Input placeholder="Nome lead" {...field} value={field.value || ""} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
type="email"
placeholder="email@example.com"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="phone"
render={({ field }) => (
<FormItem>
<FormLabel>Telefono</FormLabel>
<FormControl>
<Input
placeholder="+39 3XX XXXXXXX"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="company"
render={({ field }) => (
<FormItem>
<FormLabel>Azienda</FormLabel>
<FormControl>
<Input
placeholder="Nome azienda"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="status"
render={({ field }) => (
<FormItem>
<FormLabel>Stato</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{LEAD_STAGES.map((stage) => (
<SelectItem key={stage} value={stage}>
{stage.replace(/_/g, " ")}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="notes"
render={({ field }) => (
<FormItem>
<FormLabel>Note</FormLabel>
<FormControl>
<Textarea
placeholder="Appunti su questo lead"
className="resize-none"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" disabled={loading}>
{loading ? "Creazione..." : "Crea Lead"}
</Button>
</form>
</Form>
</DialogContent>
</Dialog>
);
}
export function EditLeadModal({ lead }: { lead: Lead }) {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const form = useForm<any>({
resolver: zodResolver(createLeadSchema),
defaultValues: {
name: lead.name,
email: lead.email || "",
phone: lead.phone || "",
company: lead.company || "",
status: lead.status as any,
notes: lead.notes || "",
},
});
async function onSubmit(data: CreateLeadInput) {
setLoading(true);
try {
const result = await updateLead(lead.id, data);
if (result.success) {
setOpen(false);
} else {
console.error("Error updating lead:", result.error);
}
} finally {
setLoading(false);
}
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm">
Modifica
</Button>
</DialogTrigger>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Modifica Lead</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Nome</FormLabel>
<FormControl>
<Input placeholder="Nome lead" {...field} value={field.value || ""} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
type="email"
placeholder="email@example.com"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="phone"
render={({ field }) => (
<FormItem>
<FormLabel>Telefono</FormLabel>
<FormControl>
<Input
placeholder="+39 3XX XXXXXXX"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="company"
render={({ field }) => (
<FormItem>
<FormLabel>Azienda</FormLabel>
<FormControl>
<Input
placeholder="Nome azienda"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="status"
render={({ field }) => (
<FormItem>
<FormLabel>Stato</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{LEAD_STAGES.map((stage) => (
<SelectItem key={stage} value={stage}>
{stage.replace(/_/g, " ")}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="notes"
render={({ field }) => (
<FormItem>
<FormLabel>Note</FormLabel>
<FormControl>
<Textarea
placeholder="Appunti su questo lead"
className="resize-none"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" disabled={loading}>
{loading ? "Salvataggio..." : "Salva"}
</Button>
</form>
</Form>
</DialogContent>
</Dialog>
);
}
+81
View File
@@ -0,0 +1,81 @@
"use client";
import Link from "next/link";
import { Lead } from "@/db/schema";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { formatDistanceToNow } from "date-fns";
import { it } from "date-fns/locale";
import { LEAD_STAGES } from "@/lib/lead-validators";
const STAGE_COLOR: Record<string, string> = {
contacted: "bg-blue-100 text-blue-800",
qualified: "bg-purple-100 text-purple-800",
proposal_sent: "bg-amber-100 text-amber-800",
negotiating: "bg-orange-100 text-orange-800",
won: "bg-green-100 text-green-800",
lost: "bg-red-100 text-red-800",
};
export function LeadTable({ leads }: { leads: Lead[] }) {
return (
<div className="border rounded-lg overflow-hidden bg-white">
<Table>
<TableHeader>
<TableRow>
<TableHead>Nome</TableHead>
<TableHead>Email</TableHead>
<TableHead>Azienda</TableHead>
<TableHead>Stato</TableHead>
<TableHead>Ultimo Contatto</TableHead>
<TableHead>Prossima Azione</TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{leads.map((lead) => (
<TableRow key={lead.id}>
<TableCell className="font-medium">
<Link href={`/admin/leads/${lead.id}`} className="hover:underline">
{lead.name}
</Link>
</TableCell>
<TableCell>{lead.email || "—"}</TableCell>
<TableCell>{lead.company || "—"}</TableCell>
<TableCell>
<Badge className={STAGE_COLOR[lead.status as keyof typeof STAGE_COLOR] || ""}>
{lead.status.replace(/_/g, " ")}
</Badge>
</TableCell>
<TableCell>
{lead.last_contact_date
? formatDistanceToNow(new Date(lead.last_contact_date), {
addSuffix: true,
locale: it,
})
: "—"}
</TableCell>
<TableCell className="text-sm">{lead.next_action || "—"}</TableCell>
<TableCell>
<Button variant="ghost" size="sm" asChild>
<Link href={`/admin/leads/${lead.id}`}>Dettagli</Link>
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
{leads.length === 0 && (
<div className="text-center py-8 text-gray-500">Nessun lead trovato</div>
)}
</div>
);
}
@@ -0,0 +1,173 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { createActivitySchema, ACTIVITY_TYPES } from "@/lib/lead-validators";
import { logActivity } from "@/app/admin/leads/actions";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
type LogActivityInput = z.infer<typeof createActivitySchema>;
export function LogActivityModal({ leadId }: { leadId: string }) {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const form = useForm<any>({
resolver: zodResolver(createActivitySchema),
defaultValues: {
lead_id: leadId,
type: "note",
activity_date: new Date().toISOString().split("T")[0],
notes: "",
},
});
async function onSubmit(data: LogActivityInput) {
setLoading(true);
try {
const result = await logActivity(data);
if (result.success) {
setOpen(false);
form.reset({
lead_id: leadId,
type: "note",
activity_date: new Date().toISOString().split("T")[0],
notes: "",
});
} else {
console.error("Error logging activity:", result.error);
}
} finally {
setLoading(false);
}
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm">
Registra Attività
</Button>
</DialogTrigger>
<DialogContent className="max-w-sm">
<DialogHeader>
<DialogTitle>Registra Attività</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem>
<FormLabel>Tipo</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{ACTIVITY_TYPES.map((type) => (
<SelectItem key={type} value={type}>
{type.charAt(0).toUpperCase() + type.slice(1)}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="activity_date"
render={({ field }) => (
<FormItem>
<FormLabel>Data</FormLabel>
<FormControl>
<Input type="date" {...field} value={field.value || ""} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="duration_minutes"
render={({ field }) => (
<FormItem>
<FormLabel>Durata (minuti) - opzionale</FormLabel>
<FormControl>
<Input
type="number"
placeholder="30"
{...field}
value={field.value || ""}
onChange={(e) => {
const val = e.target.value;
field.onChange(val ? parseInt(val) : undefined);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="notes"
render={({ field }) => (
<FormItem>
<FormLabel>Note</FormLabel>
<FormControl>
<Textarea
placeholder="Descrivi l'interazione..."
className="resize-none h-24"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" disabled={loading}>
{loading ? "Registrazione..." : "Registra"}
</Button>
</form>
</Form>
</DialogContent>
</Dialog>
);
}
@@ -0,0 +1,139 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { assignQuoteToLead } from "@/app/admin/leads/actions";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Loader2 } from "lucide-react";
const assignQuoteSchema = z.object({
lead_id: z.string(),
quote_token: z.string().optional(),
generate_new: z.boolean().default(false),
});
export function SendQuoteModal({ leadId }: { leadId: string }) {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [tab, setTab] = useState<"existing" | "new">("existing");
const form = useForm<any>({
resolver: zodResolver(assignQuoteSchema),
defaultValues: {
lead_id: leadId,
generate_new: false,
quote_token: "",
},
});
async function onSubmit(data: any) {
setLoading(true);
try {
if (tab === "new") {
// Redirect to quote builder pre-filled with this lead
window.location.href = `/admin/quotes/new?lead_id=${leadId}`;
return;
}
const result = await assignQuoteToLead({
lead_id: leadId,
quote_token: data.quote_token,
generate_new: false,
});
if (result.success) {
setOpen(false);
form.reset();
} else {
console.error("Error assigning quote:", result.error);
}
} finally {
setLoading(false);
}
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm">
Invia Preventivo
</Button>
</DialogTrigger>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Invia Preventivo al Lead</DialogTitle>
</DialogHeader>
<Tabs value={tab} onValueChange={(v) => setTab(v as "existing" | "new")}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="existing">Preventivo Esistente</TabsTrigger>
<TabsTrigger value="new">Crea Nuovo</TabsTrigger>
</TabsList>
<TabsContent value="existing" className="mt-4">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="quote_token"
render={({ field }) => (
<FormItem>
<FormLabel>Token Preventivo</FormLabel>
<FormControl>
<Input
placeholder="Incolla il token del preventivo"
{...field}
value={field.value || ""}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<p className="text-xs text-gray-600">
Copia il token dal preventivo e incollalo qui. Il lead sarà aggiornato a
"Proposal Sent".
</p>
<Button type="submit" disabled={loading} className="w-full">
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Invia
</Button>
</form>
</Form>
</TabsContent>
<TabsContent value="new" className="mt-4">
<p className="text-sm text-gray-600 mb-4">
Crea un nuovo preventivo per questo lead. Ti reindirizzeremo al builder.
</p>
<Button
className="w-full"
onClick={() => {
window.location.href = `/admin/quotes/new?lead_id=${leadId}`;
}}
>
Apri Quote Builder
</Button>
</TabsContent>
</Tabs>
</DialogContent>
</Dialog>
);
}