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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user