92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { motion } from "framer-motion"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { LeadStatusBadge } from "./lead-status-badge"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Lead } from "@/types"
|
|
import {
|
|
Building2,
|
|
Mail,
|
|
Phone,
|
|
Globe,
|
|
User,
|
|
CalendarDays,
|
|
Clock,
|
|
Tag,
|
|
} from "lucide-react"
|
|
|
|
interface LeadDetailsCardProps {
|
|
lead: Lead
|
|
}
|
|
|
|
export function LeadDetailsCard({ lead }: LeadDetailsCardProps) {
|
|
const fields = [
|
|
{ icon: Building2, label: "Company", value: lead.companyName },
|
|
{ icon: User, label: "Contact", value: lead.contactName },
|
|
{ icon: Mail, label: "Email", value: lead.email },
|
|
{ icon: Phone, label: "Phone", value: lead.phone || "—" },
|
|
{ icon: Globe, label: "Source", value: lead.source || "—" },
|
|
{ icon: Tag, label: "Status", value: <LeadStatusBadge status={lead.status} /> },
|
|
{ icon: CalendarDays, label: "Created", value: new Date(lead.createdAt).toLocaleDateString() },
|
|
{ icon: Clock, label: "Updated", value: new Date(lead.updatedAt).toLocaleDateString() },
|
|
]
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Lead Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-6 sm:grid-cols-2">
|
|
{fields.map((field, i) => (
|
|
<div key={i} className="flex items-start gap-3">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted">
|
|
<field.icon className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<p className="text-xs text-muted-foreground">{field.label}</p>
|
|
<div className="text-sm font-medium">{field.value}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{lead.description && (
|
|
<div className="mt-6 border-t pt-6">
|
|
<h4 className="mb-2 text-sm font-medium text-muted-foreground">Description</h4>
|
|
<p className="text-sm leading-relaxed">{lead.description}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 border-t pt-6">
|
|
<h4 className="mb-3 text-sm font-medium text-muted-foreground">Assigned User</h4>
|
|
{lead.assignedUser ? (
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-10 w-10">
|
|
<AvatarImage src={lead.assignedUser.avatar} />
|
|
<AvatarFallback>{lead.assignedUser.name[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<p className="text-sm font-medium">{lead.assignedUser.name}</p>
|
|
<Badge variant="secondary" className="mt-0.5 text-xs">
|
|
{lead.assignedUser.role}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">No user assigned</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
)
|
|
}
|