72f974a52a
- Added 'Completed Tasks' collapsible block with count badge - Completed section collapsed by default (prevents scrolling) - In-progress and planned tasks always visible at top - Click completed section header to expand/collapse - Improves navigation to active work
358 lines
16 KiB
TypeScript
358 lines
16 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect, useState } from 'react'
|
||
|
||
interface RoadmapItem {
|
||
phase: string
|
||
title: string
|
||
status: 'complete' | 'in-progress' | 'planned'
|
||
description: string
|
||
impact: string
|
||
completed?: string
|
||
items?: string[]
|
||
}
|
||
|
||
export default function RoadmapPage() {
|
||
const [roadmap, setRoadmap] = useState<RoadmapItem[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set())
|
||
const [showCompleted, setShowCompleted] = useState(false)
|
||
|
||
useEffect(() => {
|
||
fetchRoadmap()
|
||
}, [])
|
||
|
||
const fetchRoadmap = async () => {
|
||
try {
|
||
const response = await fetch('/api/roadmap')
|
||
const data = await response.json()
|
||
setRoadmap(data.roadmap || [])
|
||
|
||
// Auto-expand only non-complete items by default
|
||
const autoExpand = new Set<number>()
|
||
data.roadmap?.forEach((item: RoadmapItem, index: number) => {
|
||
if (item.status !== 'complete') {
|
||
autoExpand.add(index)
|
||
}
|
||
})
|
||
setExpandedItems(autoExpand)
|
||
} catch (error) {
|
||
console.error('Failed to fetch roadmap:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const toggleItem = (index: number) => {
|
||
const newExpanded = new Set(expandedItems)
|
||
if (newExpanded.has(index)) {
|
||
newExpanded.delete(index)
|
||
} else {
|
||
newExpanded.add(index)
|
||
}
|
||
setExpandedItems(newExpanded)
|
||
}
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'complete':
|
||
return 'bg-green-500/20 text-green-400 border-green-500/30'
|
||
case 'in-progress':
|
||
return 'bg-blue-500/20 text-blue-400 border-blue-500/30'
|
||
case 'planned':
|
||
return 'bg-gray-500/20 text-gray-400 border-gray-500/30'
|
||
default:
|
||
return 'bg-gray-500/20 text-gray-400 border-gray-500/30'
|
||
}
|
||
}
|
||
|
||
const getStatusIcon = (status: string) => {
|
||
switch (status) {
|
||
case 'complete':
|
||
return '✅'
|
||
case 'in-progress':
|
||
return '🔄'
|
||
case 'planned':
|
||
return '📋'
|
||
default:
|
||
return '❓'
|
||
}
|
||
}
|
||
|
||
const stats = {
|
||
total: roadmap.length,
|
||
complete: roadmap.filter(item => item.status === 'complete').length,
|
||
inProgress: roadmap.filter(item => item.status === 'in-progress').length,
|
||
planned: roadmap.filter(item => item.status === 'planned').length,
|
||
}
|
||
|
||
const completionRate = stats.total > 0 ? Math.round((stats.complete / stats.total) * 100) : 0
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-8">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="text-center text-gray-400">Loading roadmap...</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-8">
|
||
<div className="max-w-6xl mx-auto space-y-8">
|
||
{/* Header */}
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h1 className="text-3xl font-bold text-white">🗺️ Trading Bot Roadmap</h1>
|
||
<a
|
||
href="/"
|
||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors flex items-center gap-2"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||
</svg>
|
||
Back to Home
|
||
</a>
|
||
</div>
|
||
<p className="text-gray-400">Track development progress and upcoming features</p>
|
||
</div>
|
||
|
||
{/* Stats Overview */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6">
|
||
<div className="text-gray-400 text-sm mb-1">Total Items</div>
|
||
<div className="text-3xl font-bold text-white">{stats.total}</div>
|
||
</div>
|
||
|
||
<div className="bg-green-500/10 backdrop-blur-sm border border-green-500/30 rounded-xl p-6">
|
||
<div className="text-green-400 text-sm mb-1">✅ Completed</div>
|
||
<div className="text-3xl font-bold text-green-400">{stats.complete}</div>
|
||
</div>
|
||
|
||
<div className="bg-blue-500/10 backdrop-blur-sm border border-blue-500/30 rounded-xl p-6">
|
||
<div className="text-blue-400 text-sm mb-1">🔄 In Progress</div>
|
||
<div className="text-3xl font-bold text-blue-400">{stats.inProgress}</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-500/10 backdrop-blur-sm border border-gray-500/30 rounded-xl p-6">
|
||
<div className="text-gray-400 text-sm mb-1">📋 Planned</div>
|
||
<div className="text-3xl font-bold text-gray-400">{stats.planned}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Progress Bar */}
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="text-white font-semibold">Overall Completion</div>
|
||
<div className="text-green-400 font-bold">{completionRate}%</div>
|
||
</div>
|
||
<div className="w-full bg-gray-700 rounded-full h-4 overflow-hidden">
|
||
<div
|
||
className="bg-gradient-to-r from-green-500 to-emerald-500 h-full transition-all duration-500 rounded-full"
|
||
style={{ width: `${completionRate}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Roadmap Items */}
|
||
<div className="space-y-8">
|
||
{/* Completed Tasks Section */}
|
||
{stats.complete > 0 && (
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-green-500/30 rounded-xl overflow-hidden">
|
||
<button
|
||
onClick={() => setShowCompleted(!showCompleted)}
|
||
className="w-full p-6 flex items-center justify-between hover:bg-gray-700/20 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">✅</span>
|
||
<h2 className="text-xl font-bold text-white">Completed Tasks</h2>
|
||
<span className="px-3 py-1 rounded-full text-sm font-semibold bg-green-500/20 text-green-400">
|
||
{stats.complete} items
|
||
</span>
|
||
</div>
|
||
<svg
|
||
className={`w-6 h-6 text-gray-400 transition-transform ${showCompleted ? 'rotate-180' : ''}`}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
{showCompleted && (
|
||
<div className="p-6 pt-0 space-y-4 border-t border-gray-700">
|
||
{roadmap
|
||
.map((item, index) => ({ item, index }))
|
||
.filter(({ item }) => item.status === 'complete')
|
||
.map(({ item, index }) => {
|
||
const isExpanded = expandedItems.has(index)
|
||
return (
|
||
<div
|
||
key={index}
|
||
className={`bg-gray-800/50 backdrop-blur-sm border rounded-xl overflow-hidden transition-all ${getStatusColor(item.status)}`}
|
||
>
|
||
<div
|
||
className="p-6 cursor-pointer hover:bg-gray-700/20 transition-colors"
|
||
onClick={() => toggleItem(index)}
|
||
>
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<span className="text-2xl">{getStatusIcon(item.status)}</span>
|
||
<h3 className="text-xl font-bold text-white">{item.title}</h3>
|
||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-gray-700/50 text-gray-300">
|
||
{item.phase}
|
||
</span>
|
||
</div>
|
||
<p className="text-gray-300">{item.description}</p>
|
||
{item.completed && (
|
||
<div className="text-xs text-green-400 mt-2">
|
||
✓ Completed: {item.completed}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
className="ml-4 text-gray-400 hover:text-white transition-colors"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
toggleItem(index)
|
||
}}
|
||
>
|
||
<svg
|
||
className={`w-6 h-6 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{isExpanded && (
|
||
<div className="px-6 pb-6 border-t border-gray-700">
|
||
<div className="pt-4">
|
||
<div className="bg-gray-900/50 rounded-lg p-3 mb-3">
|
||
<div className="text-xs text-gray-400 mb-1">Expected Impact</div>
|
||
<div className="text-sm text-white font-semibold">{item.impact}</div>
|
||
</div>
|
||
|
||
{item.items && item.items.length > 0 && (
|
||
<div>
|
||
<div className="text-sm text-gray-400 mb-2">Implementation Details:</div>
|
||
<ul className="space-y-1">
|
||
{item.items.map((subItem, subIndex) => (
|
||
<li key={subIndex} className="text-sm text-gray-300 flex items-start gap-2">
|
||
<span className="text-gray-500 mt-1">•</span>
|
||
<span>{subItem}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* In-Progress and Planned Tasks */}
|
||
<div className="space-y-4">
|
||
{roadmap
|
||
.map((item, index) => ({ item, index }))
|
||
.filter(({ item }) => item.status !== 'complete')
|
||
.map(({ item, index }) => {
|
||
const isExpanded = expandedItems.has(index)
|
||
return (
|
||
<div
|
||
key={index}
|
||
className={`bg-gray-800/50 backdrop-blur-sm border rounded-xl overflow-hidden transition-all ${getStatusColor(item.status)}`}
|
||
>
|
||
<div
|
||
className="p-6 cursor-pointer hover:bg-gray-700/20 transition-colors"
|
||
onClick={() => toggleItem(index)}
|
||
>
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<span className="text-2xl">{getStatusIcon(item.status)}</span>
|
||
<h3 className="text-xl font-bold text-white">{item.title}</h3>
|
||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-gray-700/50 text-gray-300">
|
||
{item.phase}
|
||
</span>
|
||
</div>
|
||
<p className="text-gray-300">{item.description}</p>
|
||
{item.completed && (
|
||
<div className="text-xs text-green-400 mt-2">
|
||
✓ Completed: {item.completed}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
className="ml-4 text-gray-400 hover:text-white transition-colors"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
toggleItem(index)
|
||
}}
|
||
>
|
||
<svg
|
||
className={`w-6 h-6 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{isExpanded && (
|
||
<div className="px-6 pb-6 border-t border-gray-700">
|
||
<div className="pt-4">
|
||
<div className="bg-gray-900/50 rounded-lg p-3 mb-3">
|
||
<div className="text-xs text-gray-400 mb-1">Expected Impact</div>
|
||
<div className="text-sm text-white font-semibold">{item.impact}</div>
|
||
</div>
|
||
|
||
{item.items && item.items.length > 0 && (
|
||
<div>
|
||
<div className="text-sm text-gray-400 mb-2">Implementation Details:</div>
|
||
<ul className="space-y-1">
|
||
{item.items.map((subItem, subIndex) => (
|
||
<li key={subIndex} className="text-sm text-gray-300 flex items-start gap-2">
|
||
<span className="text-gray-500 mt-1">•</span>
|
||
<span>{subItem}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 text-center">
|
||
<p className="text-gray-400 text-sm">
|
||
Last updated: {new Date().toLocaleDateString()} • Trading Bot v4
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|