"use client";

import React, { useState, useEffect, useRef, useMemo } from 'react';

import { createPortal } from 'react-dom';

import { cn } from "@/lib/utils";

import { Building2, Tag, User2, Briefcase, DollarSign, Trophy, Activity, Clock, MoreHorizontal, Check, ChevronDown, X, ArrowUp, ArrowDown } from "lucide-react";

// Types

type Deal = {

id: string;

company: { name: string; icon: string; };

segments: { name: string; color: string }[];

extra?: number;

owner: { name: string; avatar: string; };

deals: number;

value: number;

probability: number;

trend: number[];

interaction: string;

}

const CRM_DATA: Deal[] = [

{ id: '1', company: { name: 'OpenAI', icon: 'https://unavatar.io/openai.com' }, segments: [{name: 'Strategic', color: 'red'}, {name: 'Expansion', color: 'cyan'}], owner: { name: 'Maya Chen', avatar: 'https://i.pravatar.cc/150?u=maya' }, deals: 7, value: 612400, probability: 84, trend: [20, 30, 25, 45, 40, 60, 50, 75, 70], interaction: 'Jan 14' },

{ id: '2', company: { name: 'Harvey', icon: 'https://unavatar.io/harvey.com' }, segments: [{name: 'Enterprise', color: 'blue'}, {name: 'Renewal', color: 'purple'}], owner: { name: 'Leo Hartman', avatar: 'https://i.pravatar.cc/150?u=leo' }, deals: 6, value: 548900, probability: 27, trend: [60, 50, 55, 40, 45, 30, 35, 20, 25], interaction: 'Aug 3' },

{ id: '3', company: { name: 'Browserbase', icon: 'https://unavatar.io/browserbase.com' }, segments: [{name: 'Expansion', color: 'cyan'}, {name: 'SMB', color: 'yellow'}], extra: 2, owner: { name: 'Priya Raman', avatar: 'https://i.pravatar.cc/150?u=priya' }, deals: 4, value: 497210, probability: 46, trend: [40, 35, 50, 45, 60, 55, 45, 50, 40], interaction: 'Mar 25' },

{ id: '4', company: { name: 'Cursor', icon: 'https://unavatar.io/cursor.sh' }, segments: [{name: 'Mid-Market', color: 'green'}, {name: 'Upsell', color: 'purple'}], extra: 2, owner: { name: 'Tom Okafor', avatar: 'https://i.pravatar.cc/150?u=tom' }, deals: 3, value: 451030, probability: 39, trend: [50, 45, 55, 40, 35, 45, 30, 40, 35], interaction: 'Sep 30' },

{ id: '5', company: { name: 'Notion', icon: 'https://unavatar.io/notion.so' }, segments: [{name: 'Enterprise', color: 'blue'}, {name: 'Upsell', color: 'purple'}], extra: 2, owner: { name: 'Elena Rossi', avatar: 'https://i.pravatar.cc/150?u=elena' }, deals: 8, value: 438000, probability: 71, trend: [40, 50, 45, 60, 55, 70, 65, 80, 75], interaction: 'Nov 12' },

{ id: '6', company: { name: 'Granola', icon: 'https://unavatar.io/granola.so' }, segments: [{name: 'Mid-Market', color: 'green'}, {name: 'Co-Sell', color: 'orange'}], owner: { name: 'Sam Whitaker', avatar: 'https://i.pravatar.cc/150?u=sam' }, deals: 5, value: 402560, probability: 22, trend: [30, 25, 35, 20, 25, 15, 20, 10, 15], interaction: 'Jul 9' },

{ id: '7', company: { name: 'Ramp', icon: 'https://unavatar.io/ramp.com' }, segments: [{name: 'Strategic', color: 'red'}, {name: 'Expansion', color: 'cyan'}], owner: { name: 'Nora Lind', avatar: 'https://i.pravatar.cc/150?u=nora' }, deals: 9, value: 389120, probability: 88, trend: [60, 70, 65, 80, 75, 90, 85, 100, 95], interaction: 'Feb 2' },

{ id: '8', company: { name: 'ElevenLabs', icon: 'https://unavatar.io/elevenlabs.io' }, segments: [{name: 'Enterprise', color: 'blue'}, {name: 'New Logo', color: 'green'}], owner: { name: 'Diego Alvarez', avatar: 'https://i.pravatar.cc/150?u=diego' }, deals: 4, value: 356800, probability: 53, trend: [40, 45, 40, 50, 45, 55, 50, 60, 55], interaction: 'Jun 26' },

{ id: '9', company: { name: 'Linear', icon: 'https://unavatar.io/linear.app' }, segments: [{name: 'Expansion', color: 'cyan'}, {name: 'Upsell', color: 'purple'}], extra: 1, owner: { name: 'Hana Sato', avatar: 'https://i.pravatar.cc/150?u=hana' }, deals: 6, value: 331470, probability: 36, trend: [50, 45, 40, 35, 30, 25, 20, 15, 10], interaction: 'Oct 15' },

{ id: '10', company: { name: 'Snowflake', icon: 'https://unavatar.io/snowflake.com' }, segments: [{name: 'Enterprise', color: 'blue'}, {name: 'Strategic', color: 'red'}], owner: { name: 'Ruth Adeyemi', avatar: 'https://i.pravatar.cc/150?u=ruth' }, deals: 5, value: 99870, probability: 63, trend: [20, 30, 40, 30, 45, 35, 50, 60, 55], interaction: 'Jan 14' },

{ id: '11', company: { name: 'Databricks', icon: 'https://unavatar.io/databricks.com' }, segments: [{name: 'Enterprise', color: 'blue'}], owner: { name: 'Maya Chen', avatar: 'https://i.pravatar.cc/150?u=maya' }, deals: 2, value: 92410, probability: 40, trend: [40, 35, 30, 40, 50, 45, 40, 30, 25], interaction: 'Aug 3' },

{ id: '12', company: { name: 'Plaid', icon: 'https://unavatar.io/plaid.com' }, segments: [{name: 'Mid-Market', color: 'green'}, {name: 'Expansion', color: 'cyan'}], owner: { name: 'Leo Hartman', avatar: 'https://i.pravatar.cc/150?u=leo' }, deals: 2, value: 87650, probability: 33, trend: [30, 40, 35, 25, 20, 30, 40, 35, 45], interaction: 'Mar 25' },

{ id: '13', company: { name: 'Shopify', icon: 'https://unavatar.io/shopify.com' }, segments: [{name: 'Enterprise', color: 'blue'}], owner: { name: 'Priya Raman', avatar: 'https://i.pravatar.cc/150?u=priya' }, deals: 4, value: 81200, probability: 72, trend: [50, 55, 60, 50, 45, 55, 65, 60, 70], interaction: 'Sep 30' },

{ id: '14', company: { name: 'Discord', icon: 'https://unavatar.io/discord.com' }, segments: [{name: 'Strategic', color: 'red'}], owner: { name: 'Tom Okafor', avatar: 'https://i.pravatar.cc/150?u=tom' }, deals: 3, value: 76540, probability: 86, trend: [60, 65, 70, 75, 80, 85, 90, 85, 95], interaction: 'Nov 12' },

{ id: '15', company: { name: 'Duolingo', icon: 'https://unavatar.io/duolingo.com' }, segments: [{name: 'SMB', color: 'yellow'}, {name: 'Renewal', color: 'purple'}], owner: { name: 'Elena Rossi', avatar: 'https://i.pravatar.cc/150?u=elena' }, deals: 1, value: 70980, probability: 21, trend: [20, 15, 25, 20, 15, 10, 20, 15, 25], interaction: 'Jul 9' },

{ id: '16', company: { name: 'Spotify', icon: 'https://unavatar.io/spotify.com' }, segments: [{name: 'Mid-Market', color: 'green'}], owner: { name: 'Sam Whitaker', avatar: 'https://i.pravatar.cc/150?u=sam' }, deals: 3, value: 64300, probability: 44, trend: [30, 35, 40, 45, 40, 35, 40, 45, 50], interaction: 'Feb 2' },

{ id: '17', company: { name: 'Airbnb', icon: 'https://unavatar.io/airbnb.com' }, segments: [{name: 'Enterprise', color: 'blue'}, {name: 'Expansion', color: 'cyan'}], owner: { name: 'Nora Lind', avatar: 'https://i.pravatar.cc/150?u=nora' }, deals: 2, value: 58120, probability: 58, trend: [40, 45, 50, 55, 50, 60, 55, 65, 70], interaction: 'Apr 28' },

{ id: '18', company: { name: 'HubSpot', icon: 'https://unavatar.io/hubspot.com' }, segments: [{name: 'SMB', color: 'yellow'}, {name: 'New Logo', color: 'green'}], owner: { name: 'Diego Alvarez', avatar: 'https://i.pravatar.cc/150?u=diego' }, deals: 2, value: 51890, probability: 37, trend: [35, 40, 35, 30, 35, 40, 45, 40, 35], interaction: 'Jun 26' },

{ id: '19', company: { name: 'Gusto', icon: 'https://unavatar.io/gusto.com' }, segments: [{name: 'Mid-Market', color: 'green'}], owner: { name: 'Hana Sato', avatar: 'https://i.pravatar.cc/150?u=hana' }, deals: 1, value: 44760, probability: 66, trend: [50, 55, 60, 65, 60, 70, 75, 70, 80], interaction: 'Oct 15' },

{ id: '20', company: { name: 'Loom', icon: 'https://unavatar.io/loom.com' }, segments: [{name: 'SMB', color: 'yellow'}, {name: 'Co-Sell', color: 'orange'}], owner: { name: 'Owen Price', avatar: 'https://i.pravatar.cc/150?u=owen' }, deals: 2, value: 39500, probability: 29, trend: [25, 20, 30, 25, 20, 15, 25, 30, 25], interaction: 'Dec 8' }

];

const COLUMNS_CONFIG = [

{ id: "Companies", label: "Companies", icon: Building2, minWidth: 160 },

{ id: "Segment & Stage", label: "Segment & Stage", icon: Tag, minWidth: 220 },

{ id: "Account Owner", label: "Account Owner", icon: User2, minWidth: 160 },

{ id: "Open Deals", label: "Open Deals", icon: Briefcase, minWidth: 120 },

{ id: "Pipeline Value", label: "Pipeline Value", icon: DollarSign, minWidth: 140 },

{ id: "Win Probability", label: "Win Probability", icon: Trophy, minWidth: 160 },

{ id: "Activity Trend", label: "Activity Trend", icon: Activity, minWidth: 140 },

{ id: "Last Interaction", label: "Last Interaction", icon: Clock, minWidth: 140 },

];

const BADGE_COLORS: Record<string, string> = {

red: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",

blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",

yellow: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-500 border-yellow-500/20",

purple: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",

green: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",

cyan: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border-cyan-500/20",

orange: "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20",

};

const formatCurrency = (value: number) => {

return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value);

};

const ProbabilityIndicator = ({ prob }: { prob: number }) => {

const bars = 5;

const activeBars = Math.round((prob / 100) * bars);

let color = "bg-emerald-500";

if (prob < 40) color = "bg-orange-500";

else if (prob < 60) color = "bg-yellow-500";

return (

<div className="flex items-center gap-2">

<span className="w-8 text-right">{prob}%</span>

<div className="flex gap-[2px]">

{Array.from({ length: bars }).map((_, i) => (

<div

key={i}

className={cn(

"w-1 h-3.5 rounded-[1px] transition-colors",

i < activeBars ? color : "bg-black/10 dark:bg-white/10"

)}

/>

))}

</div>

</div>

);

};

const Sparkline = ({ data, prob }: { data: number[], prob: number }) => {

let color = "#10b981"; // emerald-500

if (prob < 40) color = "#f97316"; // orange-500

else if (prob < 60) color = "#eab308"; // yellow-500

const max = Math.max(...data);

const min = Math.min(...data);

const range = max - min || 1;

const width = 50;

const height = 16;

const points = data.map((d, i) => {

const x = (i / (data.length - 1)) * width;

const y = height - ((d - min) / range) * height;

return `${x},${y}`;

}).join(' ');

return (

<svg width={width} height={height} className="overflow-visible">

<defs>

<linearGradient id={`grad-${color}`} x1="0" y1="0" x2="0" y2="1">

<stop offset="0%" stopColor={color} stopOpacity="0.15" />

<stop offset="100%" stopColor={color} stopOpacity="0" />

</linearGradient>

</defs>

<polygon points={`0,${height} ${points} ${width},${height}`} fill={`url(#grad-${color})`} />

<polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="miter" />

</svg>

);

};

export function CRMTable({ className, pinnedColumns = ["Companies"], showShadow = true }: { className?: string, pinnedColumns?: string[], showShadow?: boolean }) {

const [selected, setSelected] = useState<Set<string>>(new Set());

const [sortConfig, setSortConfig] = useState<{key: string, direction: 'asc' | 'desc'} | null>(null);

const allSelected = selected.size === CRM_DATA.length;

const sortedData = useMemo(() => {

let sortableItems = [...CRM_DATA];

if (sortConfig !== null) {

sortableItems.sort((a, b) => {

let aValue: any;

let bValue: any;

switch (sortConfig.key) {

case 'Companies': aValue = a.company.name; bValue = b.company.name; break;

case 'Segment & Stage': aValue = a.segments[0]?.name || ''; bValue = b.segments[0]?.name || ''; break;

case 'Account Owner': aValue = a.owner.name; bValue = b.owner.name; break;

case 'Open Deals': aValue = a.deals; bValue = b.deals; break;

case 'Pipeline Value': aValue = a.value; bValue = b.value; break;

case 'Win Probability': aValue = a.probability; bValue = b.probability; break;

case 'Activity Trend': aValue = a.trend[a.trend.length - 1]; bValue = b.trend[b.trend.length - 1]; break;

case 'Last Interaction': aValue = a.interaction; bValue = b.interaction; break;

default: aValue = 0; bValue = 0;

}

if (aValue < bValue) return sortConfig.direction === 'asc' ? -1 : 1;

if (aValue > bValue) return sortConfig.direction === 'asc' ? 1 : -1;

return 0;

});

}

return sortableItems;

}, [sortConfig]);

// Calculate Column Ordering and Sticky Offsets

const pinnedIds = pinnedColumns;

const isAnyPinned = pinnedIds.length > 0;

const pinnedCols = COLUMNS_CONFIG.filter(c => pinnedIds.includes(c.id)).sort((a, b) => pinnedIds.indexOf(a.id) - pinnedIds.indexOf(b.id));

const unpinnedCols = COLUMNS_CONFIG.filter(c => !pinnedIds.includes(c.id));

const orderedCols = [...pinnedCols, ...unpinnedCols];

const lastPinnedId = pinnedCols.length > 0 ? pinnedCols[pinnedCols.length - 1].id : null;

let currentLeft = 50; // Initial 50px for the Checkbox column (if sticky)

const colsWithOffsets = orderedCols.map(col => {

const isPinned = pinnedIds.includes(col.id);

const left = currentLeft;

if (isPinned) currentLeft += col.minWidth;

const isLastPinned = isPinned && col.id === lastPinnedId;

return { ...col, isPinned, left, isLastPinned };

});

const requestSort = (key: string) => {

let direction: 'asc' | 'desc' = 'asc';

if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') {

direction = 'desc';

}

setSortConfig({ key, direction });

};

const toggleAll = () => {

if (allSelected) setSelected(new Set());

else setSelected(new Set(CRM_DATA.map(d => d.id)));

};

const toggleRow = (id: string) => {

const newSet = new Set(selected);

if (newSet.has(id)) newSet.delete(id);

else newSet.add(id);

setSelected(newSet);

};

const renderCell = (colId: string, row: Deal) => {

switch (colId) {

case "Companies":

return (

<div className="flex items-center gap-3">

<img src={row.company.icon} alt={row.company.name} className="w-5 h-5 rounded-[4px] shadow-sm bg-white" />

{row.company.name}

</div>

);

case "Segment & Stage":

return (

<div className="flex items-center gap-2">

{row.segments.map(s => (

<span key={s.name} className={cn("px-2 py-0.5 rounded-full border text-[11px] font-medium", BADGE_COLORS[s.color])}>

{s.name}

</span>

))}

{row.extra && (

<span className="px-2 py-0.5 rounded-full border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-zinc-600 dark:text-zinc-400 text-[11px] font-medium">

+{row.extra}

</span>

)}

</div>

);

case "Account Owner":

return (

<div className="flex items-center gap-2.5">

<img src={row.owner.avatar} alt={row.owner.name} className="w-5 h-5 rounded-full shadow-sm" />

{row.owner.name}

</div>

);

case "Open Deals":

return <div className="text-right font-mono text-[12px] pr-2">{row.deals}</div>;

case "Pipeline Value":

return <div className="text-right font-mono text-[12px] pr-2">{formatCurrency(row.value)}</div>;

case "Win Probability":

return <ProbabilityIndicator prob={row.probability} />;

case "Activity Trend":

return <Sparkline data={row.trend} prob={row.probability} />;

case "Last Interaction":

return <span className="text-zinc-500 dark:text-zinc-400">{row.interaction}</span>;

default:

return null;

}

};

return (

<div className={cn("relative w-full max-w-[calc(100vw-32px)] md:max-w-[1050px] font-sans pt-12 mx-auto scale-[0.95] origin-top", className)}>

{/* Hand-drawn filter indicator */}

<div className="absolute top-0 left-[270px] flex flex-col items-center pointer-events-none text-zinc-500 dark:text-zinc-400/80">

<span

className="text-[17px] tracking-wide"

style={{ fontFamily: '"Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive' }}

>

tap label to filter

</span>

</div>

<div className={cn(

"w-full bg-white dark:bg-[#151515] rounded-[16px] border border-black/5 dark:border-white/[0.08] overflow-hidden flex flex-col",

showShadow && "shadow-sm"

)}>

<div className="w-full overflow-x-auto overflow-y-auto max-h-[380px] sm:max-h-[460px] md:max-h-[600px] custom-scrollbar [-webkit-overflow-scrolling:touch]">

<table className="w-full text-left border-separate border-spacing-0 whitespace-nowrap">

<thead className="relative">

<tr className="text-[12px] font-medium text-zinc-500 dark:text-zinc-400">

<th className={cn(

"sticky top-0 left-0 z-50 bg-zinc-50 dark:bg-[#1A1A1A] border-b border-black/[0.04] dark:border-white/[0.06] px-4 py-2.5 w-[50px] min-w-[50px] max-w-[50px] align-middle",

!isAnyPinned && "border-r border-black/10 dark:border-white/10"

)}>

<button

onClick={toggleAll}

className={cn(

"w-4 h-4 rounded-[4px] border flex items-center justify-center transition-colors",

allSelected

? "bg-zinc-800 border-zinc-800 dark:bg-zinc-200 dark:border-zinc-200 text-white dark:text-black"

: "border-black/20 dark:border-white/20 hover:border-black/40 dark:hover:border-white/40"

)}

>

{allSelected && <Check className="w-3 h-3" strokeWidth={3} />}

</button>

</th>

{colsWithOffsets.map(col => {

const Icon = col.icon;

const isSorted = sortConfig?.key === col.id;

return (

<th

key={col.id}

onClick={() => requestSort(col.id)}

className={cn(

"sticky top-0 px-4 py-2.5 border-b border-black/[0.04] dark:border-white/[0.06] align-middle cursor-pointer transition-colors group",

col.isPinned

? "z-50 bg-zinc-50 dark:bg-[#1A1A1A] hover:bg-[#F0F0F3] dark:hover:bg-[#1C1C1F]"

: "z-30 bg-zinc-50 dark:bg-[#1A1A1A] hover:bg-[#F0F0F3] dark:hover:bg-[#1C1C1F]",

col.isLastPinned && "border-r border-black/10 dark:border-white/10"

)}

style={{ minWidth: col.minWidth, ...(col.isPinned ? { left: col.left } : {}) }}

>

<div className="flex items-center gap-2">

<Icon className={cn("w-3.5 h-3.5", isSorted ? "text-zinc-900 dark:text-white" : "")} />

<span className={cn(isSorted ? "text-zinc-900 dark:text-white" : "")}>{col.label}</span>

{isSorted ? (

sortConfig.direction === 'asc' ? <ArrowUp className="w-3.5 h-3.5 ml-auto text-zinc-900 dark:text-white" /> : <ArrowDown className="w-3.5 h-3.5 ml-auto text-zinc-900 dark:text-white" />

) : (

<ArrowUp className="w-3.5 h-3.5 ml-auto opacity-0 group-hover:opacity-40 transition-opacity" />

)}

</div>

</th>

);

})}

<th className="sticky top-0 z-30 bg-zinc-50 dark:bg-[#1A1A1A] border-b border-black/[0.04] dark:border-white/[0.06] px-4 py-2.5 w-[50px] text-center align-middle">

</th>

</tr>

</thead>

<tbody className="text-[13px] text-zinc-900 dark:text-zinc-200">

{sortedData.map((row, i) => {

const isSelected = selected.has(row.id);

const isEven = i % 2 === 0;

const rowBg = isSelected

? "bg-[#EEF5FF] hover:bg-[#E2EDFF] dark:bg-[#1E293B] dark:hover:bg-[#25354C]"

: isEven

? "bg-white hover:bg-[#F2F2F5] dark:bg-[#161618] dark:hover:bg-[#1E1E22]"

: "bg-[#F9F9FB] hover:bg-[#F2F2F5] dark:bg-[#121214] dark:hover:bg-[#1E1E22]";

const stickyBg = isSelected

? "bg-[#EEF5FF] group-hover:bg-[#E2EDFF] dark:bg-[#1E293B] dark:group-hover:bg-[#25354C]"

: isEven

? "bg-white group-hover:bg-[#F2F2F5] dark:bg-[#161618] dark:group-hover:bg-[#1E1E22]"

: "bg-[#F9F9FB] group-hover:bg-[#F2F2F5] dark:bg-[#121214] dark:group-hover:bg-[#1E1E22]";

return (

<tr

key={row.id}

className={cn(

"group transition-colors",

rowBg

)}

>

<td className={cn(

"sticky left-0 z-20 px-4 py-2.5 w-[50px] min-w-[50px] max-w-[50px] align-middle transition-colors border-b border-black/[0.04] dark:border-white/[0.06]",

stickyBg,

!isAnyPinned && "border-r border-black/10 dark:border-white/10"

)}>

<button

onClick={() => toggleRow(row.id)}

className={cn(

"w-4 h-4 rounded-[4px] border flex items-center justify-center transition-colors",

isSelected

? "bg-zinc-800 border-zinc-800 dark:bg-zinc-200 dark:border-zinc-200 text-white dark:text-black"

: "border-black/20 dark:border-white/20 group-hover:border-black/40 dark:group-hover:border-white/40"

)}

>

{isSelected && <Check className="w-3 h-3" strokeWidth={3} />}

</button>

</td>

{colsWithOffsets.map(col => (

<td

key={col.id}

className={cn(

"px-4 py-2.5 align-middle transition-colors border-b border-black/[0.04] dark:border-white/[0.06]",

col.isPinned && cn("sticky z-20", stickyBg),

col.isLastPinned && "border-r border-black/10 dark:border-white/10",

col.id === 'Companies' && "font-medium"

)}

style={{ minWidth: col.minWidth, ...(col.isPinned ? { left: col.left } : {}) }}

>

{renderCell(col.id, row)}

</td>

))}

<td className="px-4 py-2.5 text-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 cursor-pointer align-middle border-b border-black/[0.04] dark:border-white/[0.06]">

<MoreHorizontal className="w-4 h-4 mx-auto" />

</td>

</tr>

);

})}

</tbody>

<tfoot className="relative">

<tr className="text-[12px] font-medium text-zinc-500 dark:text-zinc-400">

<td className={cn(

"sticky bottom-0 left-0 z-50 bg-zinc-50 dark:bg-[#1A1A1A] px-4 py-2.5 border-t border-black/[0.08] dark:border-white/[0.1]",

!isAnyPinned && "border-r border-black/10 dark:border-white/10"

)} colSpan={1}></td>

{colsWithOffsets.map((col, idx) => {

let content = null;

if (idx === 0) {

content = (

<div className="pl-1">

{selected.size > 0 ? (

<span className="text-zinc-900 dark:text-zinc-200 font-semibold">{selected.size} of {CRM_DATA.length} selected</span>

) : (

<span><strong className="text-zinc-900 dark:text-zinc-200">{CRM_DATA.length}</strong> Companies in view</span>

)}

</div>

);

} else if (idx === 1) {

content = "+ Count unique";

} else if (idx === 3) {

content = "+ Sum";

} else if (idx === 4) {

content = "+ Average";

}

return (

<td

key={col.id}

className={cn(

"sticky bottom-0 px-4 py-2.5 border-t border-black/[0.08] dark:border-white/[0.1] align-middle transition-colors",

col.isPinned ? "z-50 bg-zinc-50 dark:bg-[#1A1A1A]" : "z-30 bg-zinc-50 dark:bg-[#1A1A1A]",

col.isLastPinned && "border-r border-black/10 dark:border-white/10",

content && typeof content === 'string' && "hover:bg-[#F0F0F3] dark:hover:bg-[#1C1C1F] cursor-pointer"

)}

style={{ minWidth: col.minWidth, ...(col.isPinned ? { left: col.left } : {}) }}

>

{content}

</td>

);

})}

<td className="sticky bottom-0 z-30 bg-zinc-50 dark:bg-[#1A1A1A] border-t border-black/[0.08] dark:border-white/[0.1] px-4 py-2.5 align-middle"></td>

</tr>

</tfoot>

</table>

</div>

</div>

</div>

);

}

// Interactive Showcase wrapper

export default function CRMTableDemo() {

const [mounted, setMounted] = useState(false);

const [shadow, setShadow] = useState(true);

const [pinned, setPinned] = useState<string[]>(["Companies"]);

const [isDropdownOpen, setIsDropdownOpen] = useState(false);

const dropdownRef = useRef<HTMLDivElement>(null);

useEffect(() => {

setMounted(true);

const handleClickOutside = (event: MouseEvent) => {

if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {

setIsDropdownOpen(false);

}

};

document.addEventListener("mousedown", handleClickOutside);

return () => document.removeEventListener("mousedown", handleClickOutside);

}, []);

const togglePin = (id: string) => {

setPinned(prev =>

prev.includes(id)

? prev.filter(p => p !== id)

: [...prev, id]

);

};

const removePin = (id: string, e: React.MouseEvent) => {

e.stopPropagation();

setPinned(prev => prev.filter(p => p !== id));

};

const controls = mounted ? createPortal(

<div className="flex flex-col gap-5 mb-8 animate-in fade-in slide-in-from-top-4 duration-500">

<div className="flex items-center gap-2 text-[13px] font-semibold text-[#1F1F1F] dark:text-[#D4D4D8]">

<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-[#FBD364]">

<path d="M2 12h4l3-9 5 18 3-9h5"/>

</svg>

Preview

</div>

{/* Shadow Toggle */}

<div className="flex items-center justify-between">

<span className="text-[13px] text-[#555555] dark:text-[#A1A1AA] font-medium">Shadow</span>

<button

onClick={() => setShadow(!shadow)}

className={cn(

"w-8 h-4.5 rounded-full p-[2px] transition-colors relative flex items-center",

shadow ? "bg-[#1F1F1F] dark:bg-white" : "bg-black/10 dark:bg-white/10"

)}

>

<div className={cn(

"w-3.5 h-3.5 rounded-full transition-all duration-300 shadow-sm",

shadow ? "bg-white dark:bg-[#1F1F1F] translate-x-[14px]" : "bg-white dark:bg-[#A1A1AA] translate-x-0"

)} />

</button>

</div>

{/* Pinned Columns Multiselect */}

<div className="flex flex-col gap-2 relative" ref={dropdownRef}>

<span className="text-[13px] text-[#555555] dark:text-[#A1A1AA] font-medium">Pinned columns</span>

<div

onClick={() => setIsDropdownOpen(!isDropdownOpen)}

className="flex flex-wrap items-center gap-1.5 p-2 min-h-[38px] rounded-lg border border-black/10 dark:border-white/10 bg-transparent hover:border-black/20 dark:hover:border-white/20 transition-colors cursor-pointer"

>

{pinned.length === 0 ? (

<span className="text-[13px] text-black/40 dark:text-white/40 pl-1">None</span>

) : (

pinned.map(id => (

<span key={id} className="flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-[4px] bg-black/5 dark:bg-white/10 text-[11.5px] font-medium text-black dark:text-white">

{id}

<div onClick={(e) => removePin(id, e)} className="p-0.5 rounded-[2px] hover:bg-black/10 dark:hover:bg-white/10 transition-colors">

<X className="w-3 h-3 opacity-60" />

</div>

</span>

))

)}

</div>

{/* Dropdown Menu */}

{isDropdownOpen && (

<div className="absolute top-full left-0 right-0 mt-1.5 py-1.5 rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-[#1C1C1C] shadow-lg z-50 animate-in fade-in zoom-in-95 duration-200">

{COLUMNS_CONFIG.map(col => {

const isSelected = pinned.includes(col.id);

return (

<div

key={col.id}

onClick={() => togglePin(col.id)}

className="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 transition-colors"

>

<div className={cn(

"w-4 h-4 rounded-[4px] border flex items-center justify-center transition-colors",

isSelected

? "bg-zinc-800 border-zinc-800 dark:bg-zinc-200 dark:border-zinc-200 text-white dark:text-black"

: "border-black/20 dark:border-white/20"

)}>

{isSelected && <Check className="w-3 h-3" strokeWidth={3} />}

</div>

<span className="text-[13px] font-medium text-[#1F1F1F] dark:text-[#F5F5F7]">{col.label}</span>

</div>

);

})}

</div>

)}

</div>

</div>,

document.getElementById("custom-controls-portal")!

) : null;

return (

<>

{controls}

<CRMTable pinnedColumns={pinned} showShadow={shadow} />

</>

);

}