98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { motion } from "framer-motion"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Lead } from "@/types"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
const statusStyles: Record<string, string> = {
|
|
open: "bg-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
|
|
contacted: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
|
|
pending: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
|
|
closed: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
|
|
ignored: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
|
|
}
|
|
|
|
interface RecentLeadsTableProps {
|
|
leads: Lead[]
|
|
}
|
|
|
|
export function RecentLeadsTable({ leads }: RecentLeadsTableProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3, delay: 0.4 }}
|
|
>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Recent Leads</CardTitle>
|
|
<Link
|
|
href="/leads"
|
|
className="flex items-center gap-1 text-sm text-primary hover:underline"
|
|
>
|
|
View all <ArrowRight className="h-3 w-3" />
|
|
</Link>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b text-left text-muted-foreground">
|
|
<th className="pb-3 font-medium">Company</th>
|
|
<th className="pb-3 font-medium">Contact</th>
|
|
<th className="hidden pb-3 font-medium md:table-cell">Status</th>
|
|
<th className="hidden pb-3 font-medium lg:table-cell">Assigned</th>
|
|
<th className="hidden pb-3 font-medium sm:table-cell">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{leads.map((lead, i) => (
|
|
<motion.tr
|
|
key={lead.id}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: i * 0.03 }}
|
|
className="border-b last:border-0 hover:bg-muted/30"
|
|
>
|
|
<td className="py-3">
|
|
<Link href={`/leads/${lead.id}`} className="font-medium hover:text-primary">
|
|
{lead.companyName}
|
|
</Link>
|
|
</td>
|
|
<td className="py-3 text-muted-foreground">{lead.contactName}</td>
|
|
<td className="hidden py-3 md:table-cell">
|
|
<Badge variant="outline" className={statusStyles[lead.status]}>
|
|
{lead.status.charAt(0).toUpperCase() + lead.status.slice(1)}
|
|
</Badge>
|
|
</td>
|
|
<td className="hidden py-3 lg:table-cell">
|
|
{lead.assignedUser ? (
|
|
<div className="flex items-center gap-2">
|
|
<Avatar className="h-6 w-6">
|
|
<AvatarImage src={lead.assignedUser.avatar} />
|
|
<AvatarFallback>{lead.assignedUser.name[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="text-muted-foreground">{lead.assignedUser.name}</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground/50">Unassigned</span>
|
|
)}
|
|
</td>
|
|
<td className="hidden py-3 text-muted-foreground sm:table-cell">
|
|
{new Date(lead.createdAt).toLocaleDateString()}
|
|
</td>
|
|
</motion.tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
)
|
|
}
|