update on timeline on portfolio view + some corrections
This commit is contained in:
fahed
507
client/src/components/InteractiveTimeline.jsx
Normal file
507
client/src/components/InteractiveTimeline.jsx
Normal file
@@ -0,0 +1,507 @@
|
||||
import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
|
||||
import { format, differenceInDays, startOfDay, addDays, isBefore, isAfter } from 'date-fns'
|
||||
import { Calendar, Rows3, Rows4 } from 'lucide-react'
|
||||
|
||||
const STATUS_COLORS = {
|
||||
todo: 'bg-gray-500',
|
||||
in_progress: 'bg-blue-500',
|
||||
done: 'bg-emerald-500',
|
||||
planning: 'bg-amber-500',
|
||||
active: 'bg-blue-500',
|
||||
paused: 'bg-orange-500',
|
||||
completed: 'bg-emerald-500',
|
||||
cancelled: 'bg-red-400',
|
||||
draft: 'bg-gray-400',
|
||||
in_review: 'bg-yellow-500',
|
||||
approved: 'bg-indigo-500',
|
||||
scheduled: 'bg-purple-500',
|
||||
published: 'bg-emerald-500',
|
||||
planned: 'bg-amber-400',
|
||||
// tracks
|
||||
organic_social: 'bg-green-500',
|
||||
paid_social: 'bg-blue-500',
|
||||
paid_search: 'bg-amber-500',
|
||||
seo_content: 'bg-purple-500',
|
||||
production: 'bg-red-500',
|
||||
}
|
||||
|
||||
const PRIORITY_BORDER = {
|
||||
urgent: 'ring-2 ring-red-400',
|
||||
high: 'ring-2 ring-orange-300',
|
||||
medium: '',
|
||||
low: '',
|
||||
}
|
||||
|
||||
const ZOOM_LEVELS = [
|
||||
{ key: 'day', label: 'Day', pxPerDay: 48 },
|
||||
{ key: 'week', label: 'Week', pxPerDay: 20 },
|
||||
]
|
||||
|
||||
function getInitials(name) {
|
||||
if (!name) return '?'
|
||||
return name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2)
|
||||
}
|
||||
|
||||
export default function InteractiveTimeline({ items = [], mapItem, onDateChange, onItemClick, readOnly = false }) {
|
||||
const containerRef = useRef(null)
|
||||
const didDragRef = useRef(false)
|
||||
const optimisticRef = useRef({}) // { [itemId]: { startDate, endDate } } — keeps bar in place until fresh data arrives
|
||||
const [zoomIdx, setZoomIdx] = useState(0)
|
||||
const [barMode, setBarMode] = useState('expanded') // 'compact' | 'expanded'
|
||||
const [tooltip, setTooltip] = useState(null)
|
||||
const [dragState, setDragState] = useState(null) // { itemId, mode: 'move'|'resize-left'|'resize-right', startX, origStart, origEnd }
|
||||
const dragStateRef = useRef(null)
|
||||
|
||||
const pxPerDay = ZOOM_LEVELS[zoomIdx].pxPerDay
|
||||
const today = useMemo(() => startOfDay(new Date()), [])
|
||||
|
||||
// Clear optimistic overrides when fresh data arrives
|
||||
useEffect(() => {
|
||||
optimisticRef.current = {}
|
||||
}, [items])
|
||||
|
||||
// Map items
|
||||
const mapped = useMemo(() => {
|
||||
return items.map(raw => {
|
||||
const m = mapItem(raw)
|
||||
const opt = optimisticRef.current[m.id]
|
||||
return {
|
||||
...m,
|
||||
_raw: raw,
|
||||
startDate: opt?.startDate || (m.startDate ? startOfDay(new Date(m.startDate)) : null),
|
||||
endDate: opt?.endDate || (m.endDate ? startOfDay(new Date(m.endDate)) : null),
|
||||
}
|
||||
})
|
||||
}, [items, mapItem])
|
||||
|
||||
// Compute time range
|
||||
const { earliest, latest, totalDays, days } = useMemo(() => {
|
||||
let earliest = addDays(today, -7)
|
||||
let latest = addDays(today, 28)
|
||||
|
||||
mapped.forEach(item => {
|
||||
const s = item.startDate || today
|
||||
const e = item.endDate || addDays(s, 3)
|
||||
if (isBefore(s, earliest)) earliest = addDays(s, -3)
|
||||
if (isAfter(e, latest)) latest = addDays(e, 7)
|
||||
})
|
||||
|
||||
const totalDays = differenceInDays(latest, earliest) + 1
|
||||
const days = []
|
||||
for (let i = 0; i < totalDays; i++) {
|
||||
days.push(addDays(earliest, i))
|
||||
}
|
||||
return { earliest, latest, totalDays, days }
|
||||
}, [mapped, today])
|
||||
|
||||
// Auto-scroll to today on mount
|
||||
useEffect(() => {
|
||||
if (containerRef.current) {
|
||||
const todayOffset = differenceInDays(today, earliest) * pxPerDay
|
||||
containerRef.current.scrollLeft = Math.max(0, todayOffset - 200)
|
||||
}
|
||||
}, [earliest, pxPerDay, today])
|
||||
|
||||
// Drag handlers
|
||||
const handleMouseDown = useCallback((e, item, mode) => {
|
||||
if (readOnly || !onDateChange) return
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
didDragRef.current = false
|
||||
const initial = {
|
||||
itemId: item.id,
|
||||
mode,
|
||||
startX: e.clientX,
|
||||
origStart: item.startDate || today,
|
||||
origEnd: item.endDate || addDays(item.startDate || today, 3),
|
||||
}
|
||||
dragStateRef.current = initial
|
||||
setDragState(initial)
|
||||
}, [readOnly, onDateChange, today])
|
||||
|
||||
useEffect(() => {
|
||||
if (!dragState) return
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
const cur = dragStateRef.current
|
||||
if (!cur) return
|
||||
const dx = e.clientX - cur.startX
|
||||
const dayDelta = Math.round(dx / pxPerDay)
|
||||
if (dayDelta === 0) return
|
||||
|
||||
didDragRef.current = true
|
||||
const newState = { ...cur }
|
||||
|
||||
if (cur.mode === 'move') {
|
||||
newState.currentStart = addDays(cur.origStart, dayDelta)
|
||||
newState.currentEnd = addDays(cur.origEnd, dayDelta)
|
||||
} else if (cur.mode === 'resize-left') {
|
||||
const newStart = addDays(cur.origStart, dayDelta)
|
||||
if (isBefore(newStart, cur.origEnd)) {
|
||||
newState.currentStart = newStart
|
||||
newState.currentEnd = cur.origEnd
|
||||
}
|
||||
} else if (cur.mode === 'resize-right') {
|
||||
const newEnd = addDays(cur.origEnd, dayDelta)
|
||||
if (isAfter(newEnd, cur.origStart)) {
|
||||
newState.currentStart = cur.origStart
|
||||
newState.currentEnd = newEnd
|
||||
}
|
||||
}
|
||||
dragStateRef.current = newState
|
||||
setDragState(newState)
|
||||
}
|
||||
|
||||
const handleMouseUp = () => {
|
||||
const prev = dragStateRef.current
|
||||
dragStateRef.current = null
|
||||
setDragState(null)
|
||||
if (prev && (prev.currentStart || prev.currentEnd) && onDateChange) {
|
||||
const startDate = prev.currentStart || prev.origStart
|
||||
const endDate = prev.currentEnd || prev.origEnd
|
||||
// Keep bar in place visually until fresh data arrives
|
||||
optimisticRef.current[prev.itemId] = { startDate, endDate }
|
||||
onDateChange(prev.itemId, {
|
||||
startDate: format(startDate, 'yyyy-MM-dd'),
|
||||
endDate: format(endDate, 'yyyy-MM-dd'),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove)
|
||||
document.addEventListener('mouseup', handleMouseUp)
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
document.removeEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
}, [dragState?.itemId, pxPerDay, onDateChange])
|
||||
|
||||
const getBarPosition = useCallback((item) => {
|
||||
let start, end
|
||||
|
||||
// If this item is being dragged, use the drag state
|
||||
if (dragState && dragState.itemId === item.id && (dragState.currentStart || dragState.currentEnd)) {
|
||||
start = dragState.currentStart || item.startDate || today
|
||||
end = dragState.currentEnd || item.endDate || addDays(start, 3)
|
||||
} else {
|
||||
// Check optimistic position (keeps bar in place after drop, before API data refreshes)
|
||||
const opt = optimisticRef.current[item.id]
|
||||
start = opt?.startDate || item.startDate || today
|
||||
end = opt?.endDate || item.endDate || addDays(start, 3)
|
||||
}
|
||||
|
||||
// Ensure end is after start
|
||||
if (!isAfter(end, start)) end = addDays(start, 1)
|
||||
|
||||
const left = differenceInDays(start, earliest) * pxPerDay
|
||||
const width = Math.max(pxPerDay, (differenceInDays(end, start) + 1) * pxPerDay)
|
||||
return { left, width }
|
||||
}, [earliest, pxPerDay, today, dragState])
|
||||
|
||||
const scrollToToday = () => {
|
||||
if (containerRef.current) {
|
||||
const todayOffset = differenceInDays(today, earliest) * pxPerDay
|
||||
containerRef.current.scrollTo({ left: Math.max(0, todayOffset - 200), behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
|
||||
const isExpanded = barMode === 'expanded'
|
||||
const rowHeight = isExpanded ? 100 : 52
|
||||
const barHeight = isExpanded ? 84 : 36
|
||||
const headerHeight = 48
|
||||
const labelWidth = isExpanded ? 280 : 220
|
||||
const todayOffset = differenceInDays(today, earliest) * pxPerDay
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-border py-16 text-center">
|
||||
<Calendar className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
|
||||
<p className="text-text-secondary font-medium">No items to display</p>
|
||||
<p className="text-sm text-text-tertiary mt-1">Add items with dates to see the timeline</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-border overflow-hidden">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-border bg-surface-secondary">
|
||||
<div className="flex items-center gap-2">
|
||||
{ZOOM_LEVELS.map((z, i) => (
|
||||
<button
|
||||
key={z.key}
|
||||
onClick={() => setZoomIdx(i)}
|
||||
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
|
||||
zoomIdx === i
|
||||
? 'bg-brand-primary text-white shadow-sm'
|
||||
: 'text-text-tertiary hover:text-text-primary hover:bg-surface-tertiary'
|
||||
}`}
|
||||
>
|
||||
{z.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setBarMode(m => m === 'compact' ? 'expanded' : 'compact')}
|
||||
className="flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-surface-tertiary rounded-md transition-colors"
|
||||
title={isExpanded ? 'Compact bars' : 'Expanded bars'}
|
||||
>
|
||||
{isExpanded ? <Rows4 className="w-3.5 h-3.5" /> : <Rows3 className="w-3.5 h-3.5" />}
|
||||
{isExpanded ? 'Compact' : 'Expand'}
|
||||
</button>
|
||||
<button
|
||||
onClick={scrollToToday}
|
||||
className="flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-brand-primary hover:bg-brand-primary/10 rounded-md transition-colors"
|
||||
>
|
||||
<Calendar className="w-3.5 h-3.5" />
|
||||
Today
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div ref={containerRef} className="overflow-x-auto relative" style={{ cursor: dragState ? 'grabbing' : undefined }}>
|
||||
<div style={{ minWidth: `${labelWidth + totalDays * pxPerDay}px` }}>
|
||||
{/* Day header */}
|
||||
<div className="flex sticky top-0 z-20 bg-white border-b border-border" style={{ height: headerHeight }}>
|
||||
<div className="shrink-0 border-r border-border bg-surface-secondary flex items-center px-4 sticky left-0 z-30" style={{ width: labelWidth }}>
|
||||
<span className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">Item</span>
|
||||
</div>
|
||||
<div className="flex relative">
|
||||
{days.map((day, i) => {
|
||||
const isToday = differenceInDays(day, today) === 0
|
||||
const isWeekend = day.getDay() === 0 || day.getDay() === 6
|
||||
const isMonthStart = day.getDate() === 1
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{ width: pxPerDay, minWidth: pxPerDay }}
|
||||
className={`flex flex-col items-center justify-center border-r border-border-light text-[10px] leading-tight ${
|
||||
isToday ? 'bg-red-50 font-bold text-red-600' :
|
||||
isWeekend ? 'bg-surface-tertiary/40 text-text-tertiary' :
|
||||
'text-text-tertiary'
|
||||
} ${isMonthStart ? 'border-l-2 border-l-text-tertiary/30' : ''}`}
|
||||
>
|
||||
{pxPerDay >= 30 && <div>{format(day, 'd')}</div>}
|
||||
{pxPerDay >= 40 && <div className="text-[8px] uppercase">{format(day, 'EEE')}</div>}
|
||||
{pxPerDay < 30 && day.getDate() % 7 === 1 && <div>{format(day, 'd')}</div>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
{mapped.map((item, idx) => {
|
||||
const { left, width } = getBarPosition(item)
|
||||
const statusColor = STATUS_COLORS[item.status] || STATUS_COLORS[item.type] || 'bg-gray-400'
|
||||
const priorityRing = PRIORITY_BORDER[item.priority] || ''
|
||||
const isDragging = dragState?.itemId === item.id
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`flex border-b border-border-light group/row hover:bg-surface-secondary/50 ${isDragging ? 'bg-blue-50/30' : ''}`}
|
||||
style={{ height: rowHeight }}
|
||||
>
|
||||
{/* Label column */}
|
||||
<div
|
||||
className={`shrink-0 border-r border-border flex ${isExpanded ? 'flex-col justify-center gap-1' : 'items-center gap-2'} px-3 overflow-hidden sticky left-0 z-10 bg-white group-hover/row:bg-surface-secondary/50`}
|
||||
style={{ width: labelWidth }}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
{item.assigneeName && (
|
||||
<div className="w-6 h-6 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[9px] font-bold shrink-0">
|
||||
{getInitials(item.assigneeName)}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-sm font-semibold text-text-primary truncate">{item.label}</span>
|
||||
</div>
|
||||
{item.description && (
|
||||
<p className="text-[11px] text-text-tertiary line-clamp-2 leading-tight">{item.description}</p>
|
||||
)}
|
||||
{item.tags && item.tags.length > 0 && (
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{item.tags.slice(0, 4).map((tag, i) => (
|
||||
<span key={i} className="text-[9px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-secondary font-medium">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{item.assigneeName && (
|
||||
<div className="w-6 h-6 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[9px] font-bold shrink-0">
|
||||
{getInitials(item.assigneeName)}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-xs font-medium text-text-primary truncate">{item.label}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bar area */}
|
||||
<div className="relative flex-1" style={{ height: rowHeight }}>
|
||||
{/* Today line */}
|
||||
{todayOffset >= 0 && (
|
||||
<div
|
||||
className="absolute top-0 bottom-0 w-0.5 bg-red-400 z-10"
|
||||
style={{ left: `${todayOffset + pxPerDay / 2}px` }}
|
||||
>
|
||||
{idx === 0 && (
|
||||
<div className="absolute -top-0 left-1 text-[8px] font-bold text-red-500 bg-red-50 px-1 rounded whitespace-nowrap">
|
||||
Today
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The bar */}
|
||||
<div
|
||||
className={`absolute rounded-lg ${statusColor} ${priorityRing} shadow-sm transition-shadow hover:shadow-md select-none overflow-hidden group ${
|
||||
!readOnly && onDateChange ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'
|
||||
} ${isDragging ? 'opacity-80 shadow-lg' : ''}`}
|
||||
style={{
|
||||
left: `${left}px`,
|
||||
width: `${width}px`,
|
||||
height: `${barHeight}px`,
|
||||
top: isExpanded ? '8px' : '8px',
|
||||
}}
|
||||
onMouseDown={(e) => handleMouseDown(e, item, 'move')}
|
||||
onClick={(e) => {
|
||||
if (didDragRef.current) {
|
||||
didDragRef.current = false
|
||||
return
|
||||
}
|
||||
if (onItemClick) {
|
||||
onItemClick(item._raw)
|
||||
}
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!dragState) {
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
setTooltip({
|
||||
item,
|
||||
x: rect.left + rect.width / 2,
|
||||
y: rect.top - 8,
|
||||
})
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => setTooltip(null)}
|
||||
>
|
||||
{/* Left resize handle */}
|
||||
{!readOnly && onDateChange && (
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-white/30 z-10"
|
||||
onMouseDown={(e) => handleMouseDown(e, item, 'resize-left')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Bar content */}
|
||||
{isExpanded ? (
|
||||
<div className="flex flex-col gap-0.5 px-3 py-1.5 flex-1 min-w-0 h-full">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{item.assigneeName && width > 60 && (
|
||||
<span className="text-[9px] font-bold text-white/80 bg-white/20 w-5 h-5 rounded-full flex items-center justify-center shrink-0">
|
||||
{getInitials(item.assigneeName)}
|
||||
</span>
|
||||
)}
|
||||
{width > 80 && (
|
||||
<span className="text-xs font-semibold text-white truncate">
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
{width > 120 && item.status && (
|
||||
<span className="text-[9px] text-white/70 bg-white/15 px-1.5 py-0.5 rounded ml-auto shrink-0">
|
||||
{item.status.replace(/_/g, ' ')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{width > 100 && item.description && (
|
||||
<p className="text-[10px] text-white/60 line-clamp-2 leading-tight">
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
{width > 80 && (
|
||||
<div className="flex items-center gap-1.5 mt-auto">
|
||||
{item.tags && item.tags.slice(0, 3).map((tag, i) => (
|
||||
<span key={i} className="text-[8px] px-1 py-0.5 rounded bg-white/15 text-white/70 font-medium">{tag}</span>
|
||||
))}
|
||||
{width > 140 && item.startDate && item.endDate && (
|
||||
<span className="text-[8px] text-white/50 ml-auto">
|
||||
{format(item.startDate, 'MMM d')} – {format(item.endDate, 'MMM d')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 px-3 flex-1 min-w-0 h-full">
|
||||
{item.assigneeName && width > 60 && (
|
||||
<span className="text-[9px] font-bold text-white/80 bg-white/20 w-5 h-5 rounded-full flex items-center justify-center shrink-0">
|
||||
{getInitials(item.assigneeName)}
|
||||
</span>
|
||||
)}
|
||||
{width > 80 && (
|
||||
<span className="text-xs font-medium text-white truncate">
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Right resize handle */}
|
||||
{!readOnly && onDateChange && (
|
||||
<div
|
||||
className="absolute right-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-white/30 z-10"
|
||||
onMouseDown={(e) => handleMouseDown(e, item, 'resize-right')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tooltip */}
|
||||
{tooltip && !dragState && (
|
||||
<div
|
||||
className="fixed z-50 pointer-events-none"
|
||||
style={{
|
||||
left: tooltip.x,
|
||||
top: tooltip.y,
|
||||
transform: 'translate(-50%, -100%)',
|
||||
}}
|
||||
>
|
||||
<div className="bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg max-w-xs">
|
||||
<div className="font-semibold mb-1">{tooltip.item.label}</div>
|
||||
<div className="text-gray-300 space-y-0.5">
|
||||
{tooltip.item.startDate && (
|
||||
<div>Start: {format(tooltip.item.startDate, 'MMM d, yyyy')}</div>
|
||||
)}
|
||||
{tooltip.item.endDate && (
|
||||
<div>End: {format(tooltip.item.endDate, 'MMM d, yyyy')}</div>
|
||||
)}
|
||||
{tooltip.item.assigneeName && (
|
||||
<div>Assignee: {tooltip.item.assigneeName}</div>
|
||||
)}
|
||||
{tooltip.item.status && (
|
||||
<div>Status: {tooltip.item.status.replace(/_/g, ' ')}</div>
|
||||
)}
|
||||
</div>
|
||||
{!readOnly && onDateChange && (
|
||||
<div className="text-gray-400 mt-1 text-[10px] italic">
|
||||
Drag to move · Drag edges to resize
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user