christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 14:15:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement resizable columns in Pricing Units tab

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-21 09:03:01 +02:00
parent 9b861f1c19
commit 2b994e3c86
1 changed files with 164 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PricingView.tsx
+164 -126
View File
@@ -56,6 +56,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
articleName: 220,
line: 100,
classification: 130,
unitsOuter: 100,
outerW: 80,
outerL: 80,
outerH: 80,
check: 100,
actions: 60,
});
const [resizingColumn, setResizingColumn] = useState<string | null>(null);
const [resizeStartX, setResizeStartX] = useState<number | null>(null);
@@ -135,7 +141,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const handleMouseMove = (e: MouseEvent) => {
const delta = e.clientX - resizeStartX;
const newWidth = Math.max(50, Math.min(400, resizeStartWidth + delta));
const newWidth = Math.max(40, Math.min(800, resizeStartWidth + delta));
setColumnWidths(prev => ({ ...prev, [resizingColumn]: newWidth }));
};
@@ -659,26 +665,22 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
<p className="text-sm mt-1">All products are correctly configured.</p>
</div>
) : (
<table ref={tableRef} className="w-full text-sm border-collapse">
<table ref={tableRef} className="w-full text-sm border-collapse table-fixed">
<thead className="sticky top-0 z-10 bg-slate-900">
<tr>
<th data-col-key="articleNo" style={{ width: columnWidths.articleNo || 100, minWidth: 60 }} className="text-left px-2 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap relative">
<div className="flex items-center justify-between">
<th style={{ width: columnWidths.articleNo }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap relative">
<div className="flex items-center gap-1">
<span>Art. No.</span>
<div
onMouseDown={(e) => handleResizeStart(e, 'articleNo', columnWidths.articleNo || 100)}
onClick={(e) => e.stopPropagation()}
className="w-1.5 h-4 bg-slate-600 hover:bg-blue-500 cursor-col-resize rounded-sm ml-1 shrink-0 pointer-events-auto"
title="Drag to resize"
/>
</div>
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'articleNo', columnWidths.articleNo)} />
</th>
<th data-col-key="articleName" style={{ width: columnWidths.articleName || 220 }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 group relative">
<div className="flex items-center gap-1"><span>Article Name</span>
<th style={{ width: columnWidths.articleName }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 group relative">
<div className="flex items-center gap-1">
<span className="truncate">Article Name</span>
<button
onClick={() => setOpenFilter(openFilter === 'name' ? null : 'name')}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
nameColFilter ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
@@ -692,14 +694,15 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'articleName', columnWidths.articleName)} />
</th>
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<th style={{ width: columnWidths.line }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>Line</span>
<span className="truncate">Line</span>
<button
onClick={() => setOpenFilter(openFilter === 'line' ? null : 'line')}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
lineMultiFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
@@ -716,14 +719,15 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'line', columnWidths.line)} />
</th>
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<th style={{ width: columnWidths.classification }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>Classification</span>
<span className="truncate">Classification</span>
<button
onClick={() => setOpenFilter(openFilter === 'classification' ? null : 'classification')}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
classificationFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
@@ -740,50 +744,56 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'classification', columnWidths.classification)} />
</th>
{pricingEditableCols.map(col => (
<th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>{col.name}</span>
<button
onClick={(e) => {
e.stopPropagation();
setOpenFilter(openFilter === `prc_${col.index}` ? null : `prc_${col.index}`);
}}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
dynamicColFilters[col.index]?.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
<Filter className="w-3 h-3" />
</button>
</div>
{openFilter === `prc_${col.index}` && (
<ColumnFilterPopover
uniqueValues={dynamicColUniqueValues[col.index] || []}
selectedValues={dynamicColFilters[col.index] || []}
onToggle={val => setDynamicColFilters(prev => {
const current = prev[col.index] || [];
return current.includes(val)
? { ...prev, [col.index]: current.filter(v => v !== val) }
: { ...prev, [col.index]: [...current, val] };
})}
onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
/>
)}
</th>
))}
{pricingEditableCols.map(col => {
const colKey = `prc_${col.index}`;
const width = columnWidths[colKey] ?? 100;
return (
<th key={col.index} style={{ width }} className="text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span className="truncate">{col.name}</span>
<button
onClick={(e) => {
e.stopPropagation();
setOpenFilter(openFilter === `prc_${col.index}` ? null : `prc_${col.index}`);
}}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
dynamicColFilters[col.index]?.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
<Filter className="w-3 h-3" />
</button>
</div>
{openFilter === `prc_${col.index}` && (
<ColumnFilterPopover
uniqueValues={dynamicColUniqueValues[col.index] || []}
selectedValues={dynamicColFilters[col.index] || []}
onToggle={val => setDynamicColFilters(prev => {
const current = prev[col.index] || [];
return current.includes(val)
? { ...prev, [col.index]: current.filter(v => v !== val) }
: { ...prev, [col.index]: [...current, val] };
})}
onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, colKey, width)} />
</th>
);
})}
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<th style={{ width: columnWidths.unitsOuter }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>Units/Outer</span>
<span className="truncate">Units/Outer</span>
<button
onClick={() => setOpenFilter(openFilter === 'unitsOuter' ? null : 'unitsOuter')}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
unitsOuterFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
@@ -800,15 +810,16 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'unitsOuter', columnWidths.unitsOuter)} />
</th>
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<th style={{ width: columnWidths.outerW }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>Outer W</span>
<span className="truncate">Outer W</span>
<button
onClick={() => setOpenFilter(openFilter === 'outerW' ? null : 'outerW')}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
outerWFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
@@ -825,15 +836,16 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'outerW', columnWidths.outerW)} />
</th>
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<th style={{ width: columnWidths.outerL }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>Outer L</span>
<span className="truncate">Outer L</span>
<button
onClick={() => setOpenFilter(openFilter === 'outerL' ? null : 'outerL')}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
outerLFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
@@ -850,15 +862,16 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'outerL', columnWidths.outerL)} />
</th>
<th className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<th style={{ width: columnWidths.outerH }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>Outer H</span>
<span className="truncate">Outer H</span>
<button
onClick={() => setOpenFilter(openFilter === 'outerH' ? null : 'outerH')}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
outerHFilter.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
@@ -875,57 +888,68 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'outerH', columnWidths.outerH)} />
</th>
{containerCols.map(col => (
<th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span>{col.name}</span>
<button
onClick={(e) => {
e.stopPropagation();
setOpenFilter(openFilter === `con_${col.index}` ? null : `con_${col.index}`);
}}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors',
dynamicColFilters[col.index]?.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
<Filter className="w-3 h-3" />
</button>
</div>
{openFilter === `con_${col.index}` && (
<ColumnFilterPopover
uniqueValues={dynamicColUniqueValues[col.index] || []}
selectedValues={dynamicColFilters[col.index] || []}
onToggle={val => setDynamicColFilters(prev => {
const current = prev[col.index] || [];
return current.includes(val)
? { ...prev, [col.index]: current.filter(v => v !== val) }
: { ...prev, [col.index]: [...current, val] };
})}
onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
/>
)}
</th>
))}
{containerCols.map(col => {
const colKey = `con_${col.index}`;
const width = columnWidths[colKey] ?? 110;
return (
<th key={col.index} style={{ width }} className="text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative">
<div className="flex items-center gap-1">
<span className="truncate">{col.name}</span>
<button
onClick={(e) => {
e.stopPropagation();
setOpenFilter(openFilter === `con_${col.index}` ? null : `con_${col.index}`);
}}
className={cn(
'p-0.5 rounded hover:bg-slate-700 transition-colors shrink-0',
dynamicColFilters[col.index]?.length > 0 ? 'text-blue-400 bg-blue-400/10' : 'text-slate-500 opacity-0 group-hover:opacity-100'
)}
>
<Filter className="w-3 h-3" />
</button>
</div>
{openFilter === `con_${col.index}` && (
<ColumnFilterPopover
uniqueValues={dynamicColUniqueValues[col.index] || []}
selectedValues={dynamicColFilters[col.index] || []}
onToggle={val => setDynamicColFilters(prev => {
const current = prev[col.index] || [];
return current.includes(val)
? { ...prev, [col.index]: current.filter(v => v !== val) }
: { ...prev, [col.index]: [...current, val] };
})}
onSelectAll={vals => setDynamicColFilters(prev => ({ ...prev, [col.index]: vals }))}
onClear={() => { setDynamicColFilters(prev => { const next = { ...prev }; delete next[col.index]; return next; }); setOpenFilter(null); }}
onClose={() => setOpenFilter(null)}
/>
)}
<ResizeHandle onMouseDown={e => handleResizeStart(e, colKey, width)} />
</th>
);
})}
{/* Validation Check Column */}
<th className="text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap">
<th style={{ width: columnWidths.check }} className="text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap relative">
Check
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'check', columnWidths.check)} />
</th>
{/* All remaining Matrix columns */}
{matrixCols.map(col => (
<th key={col.index} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap overflow-hidden max-w-[150px] truncate" title={col.name}>
{col.name}
</th>
))}
{matrixCols.map(col => {
const colKey = `mat_${col.index}`;
const width = columnWidths[colKey] ?? 120;
return (
<th key={col.index} style={{ width }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap group relative" title={col.name}>
<span className="truncate block">{col.name}</span>
<ResizeHandle onMouseDown={e => handleResizeStart(e, colKey, width)} />
</th>
);
})}
{/* Actions */}
<th className="px-3 py-3 border-b border-slate-700 w-10 sticky right-0 bg-slate-900 shadow-[-4px_0_8px_rgba(0,0,0,0.2)]" />
<th style={{ width: columnWidths.actions }} className="px-3 py-3 border-b border-slate-700 sticky right-0 bg-slate-900 shadow-[-4px_0_8px_rgba(0,0,0,0.2)]">
<ResizeHandle onMouseDown={e => handleResizeStart(e, 'actions', columnWidths.actions)} />
</th>
</tr>
</thead>
<tbody>
@@ -953,7 +977,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
)}
>
{/* Art. No. */}
<td className="px-3 py-2.5 font-mono text-xs text-slate-300 whitespace-nowrap">
<td className="px-3 py-2.5 font-mono text-xs text-slate-300 whitespace-nowrap overflow-hidden truncate">
{row[COLUMNS.ARTICLE_NO]}
</td>
@@ -965,14 +989,14 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
</td>
{/* Line */}
<td className="px-3 py-2.5 text-slate-400 whitespace-nowrap text-xs">
<td className="px-3 py-2.5 text-slate-400 whitespace-nowrap text-xs overflow-hidden truncate">
{row[COLUMNS.LINE] || '—'}
</td>
{/* Classification */}
<td className="px-3 py-2.5">
<td className="px-3 py-2.5 overflow-hidden">
<span className={cn(
'px-2 py-0.5 rounded text-[10px] font-bold border whitespace-nowrap',
'px-2 py-0.5 rounded text-[10px] font-bold border whitespace-nowrap inline-block max-w-full truncate',
String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().includes('CORE')
? 'bg-blue-500/10 text-blue-400 border-blue-500/20'
: String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().includes('OOC')
@@ -991,7 +1015,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
const isEmpty = !row[col.index] || row[col.index] === '' || Number(row[col.index]) === 0;
return (
<td key={col.index} className="px-3 py-2">
<td key={col.index} className="px-3 py-2 overflow-hidden">
{isEditing ? (
<div className="flex items-center gap-1">
<input
@@ -1001,17 +1025,14 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onChange={e => setEditingCell(prev => prev ? { ...prev, value: e.target.value } : null)}
onKeyDown={handleKeyDown}
onBlur={commitEdit}
className="w-24 bg-slate-900 border border-blue-500 rounded px-2 py-1 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
className="w-full bg-slate-900 border border-blue-500 rounded px-2 py-1 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500"
/>
<button onClick={commitEdit} className="text-emerald-400 hover:text-emerald-300 p-0.5">
<Save className="w-3.5 h-3.5" />
</button>
</div>
) : (
<button
onClick={() => startEdit(dataIndex, col.index, val)}
className={cn(
'group flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors hover:bg-slate-700/60 min-w-[72px]',
'group flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors hover:bg-slate-700/60 w-full overflow-hidden',
isEmpty
? 'text-amber-400 border border-amber-500/40 bg-amber-500/5'
: 'text-slate-200 border border-transparent hover:border-slate-600'
@@ -1019,11 +1040,14 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
title={isSaving ? 'Saving…' : `Click to edit ${col.name}`}
>
{isSaving ? (
<span className="text-slate-500 italic">saving…</span>
<span className="text-slate-500 italic truncate">saving…</span>
) : isEmpty ? (
<><AlertTriangle className="w-3 h-3" /><span>Missing</span></>
<div className="flex items-center gap-1 truncate"><AlertTriangle className="w-3 h-3 shrink-0" /><span>Missing</span></div>
) : (
<>{val}<Edit2 className="w-2.5 h-2.5 opacity-0 group-hover:opacity-50" /></>
<div className="flex items-center justify-between w-full truncate">
<span>{val}</span>
<Edit2 className="w-2.5 h-2.5 opacity-0 group-hover:opacity-50 shrink-0" />
</div>
)}
</button>
)}
@@ -1033,13 +1057,13 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
{/* Units columns */}
<td className="px-3 py-2.5">{unitOuterBadge(row[COLUMNS.UNITS_OUTER])}</td>
<td className="px-3 py-2.5 text-slate-400 font-mono text-xs">{row[COLUMNS.OUTER_W] ?? '-'}</td>
<td className="px-3 py-2.5 text-slate-400 font-mono text-xs">{row[COLUMNS.OUTER_L] ?? '-'}</td>
<td className="px-3 py-2.5 text-slate-400 font-mono text-xs">{row[COLUMNS.OUTER_H] ?? '-'}</td>
<td className="px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate">{row[COLUMNS.OUTER_W] ?? '-'}</td>
<td className="px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate">{row[COLUMNS.OUTER_L] ?? '-'}</td>
<td className="px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate">{row[COLUMNS.OUTER_H] ?? '-'}</td>
{/* Container units columns */}
{containerCols.map(col => (
<td key={col.index} className="px-3 py-2.5">
<td key={col.index} className="px-3 py-2.5 overflow-hidden truncate">
{unitBadge(row[col.index], col.name)}
</td>
))}
@@ -1139,6 +1163,20 @@ function TextFilterPopover({ value, onChange, onClose }: {
);
}
// ── Resize Handle Component ─────────────────────────────────────────────
function ResizeHandle({ onMouseDown }: { onMouseDown: (e: React.MouseEvent) => void }) {
return (
<div
onMouseDown={onMouseDown}
onClick={e => e.stopPropagation()}
className="absolute right-0 top-0 bottom-0 w-1.5 hover:bg-blue-500/50 cursor-col-resize group/resizer flex items-center justify-center z-20"
title="Drag to resize"
>
<div className="w-[1px] h-4 bg-slate-700 group-hover/resizer:bg-blue-400 transition-colors" />
</div>
);
}
// ── Stat card ─────────────────────────────────────────────────────────────────
function StatCard({
label,