"use client"; import React from "react"; import { motion } from "framer-motion"; import { Mail, Phone, MoreHorizontal, Star, Shield, Plus } from "lucide-react"; // Mock CRM Data with high-quality placeholder avatars const crmLeads = [ { id: "LD-01", name: "Elena Rostova", email: "elena.r@innovatech.io", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=128&h=128", title: "Chief Marketing Officer", company: "Innovatech Solutions", engagement: 92, status: "Active", isStarred: true, }, { id: "LD-02", name: "Marcus Thorne", email: "m.thorne@globalnet.com", avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=128&h=128", title: "VP of Engineering", company: "GlobalNet Systems", engagement: 45, status: "Idle", isStarred: false, }, { id: "LD-03", name: "Sofia Chen", email: "schen@nexusventures.com", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=128&h=128", title: "Managing Partner", company: "Nexus Ventures", engagement: 78, status: "Active", isStarred: true, }, { id: "LD-04", name: "David Alaba", email: "david@crestcreative.agency", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=128&h=128", title: "Creative Director", company: "Crest Creative", engagement: 12, status: "Inactive", isStarred: false, }, { id: "LD-05", name: "Amira Hassan", email: "amira.h@fintechflow.net", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=128&h=128", title: "Head of Product", company: "FintechFlow", engagement: 88, status: "Active", isStarred: false, }, ]; export default function AvatarInfoRowTable() { const getStatusConfig = (status: string) => { switch (status) { case "Active": return "bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20"; case "Idle": return "bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/20"; case "Inactive": return "bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700"; default: return "bg-neutral-50 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700"; } }; const getEngagementColor = (score: number) => { if (score >= 80) return "bg-emerald-500"; if (score >= 40) return "bg-amber-500"; return "bg-rose-500"; }; return (

{/* CRM Header */}

Key Contacts

Manage your high-value leads and team engagement.

{/* CRM Data Table */}

{crmLeads.map((lead, index) => ( {/* Avatar & Info Cell */} {/* Role & Company */} {/* Engagement Progress Bar */} {/* Status Badge */} {/* Action Buttons */} ))}

Contact Info	Position & Company	Engagement Score	Status	Quick Actions
{lead.isStarred && ( )} {lead.name} {lead.email}	{lead.title} {lead.title.includes("Chief") \|\| lead.title.includes("VP") \|\| lead.title.includes("Head") ? ( ) : null} {lead.company}	Score {lead.engagement}%	{lead.status}

); }