-
Notifications
You must be signed in to change notification settings - Fork 0
Home
[[import React, { useState, useMemo } from ‘react’; import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Area, AreaChart } from ‘recharts’; import { Calendar, CheckCircle, AlertCircle, Users, Target, Clock, Zap, DollarSign, Code, Smartphone } from ‘lucide-react’;
// ETHEXE Project Data const ethexeData = { projectName: “ETHEXE - Decentralized Subscription Management”, description: “A blockchain-powered dApp for managing subscriptions with smart contract profit distribution”, tasks: [ // Phase 1: Planning & Research (Weeks 1-2) { id: 1, name: “Define Scope & Features”, assignee: “Product Team”, deadline: “2024-10-10”, status: “Completed”, priority: “High”, progress: 100, start: “2024-10-01”, phase: “Planning” }, { id: 2, name: “Market Research”, assignee: “Business Analyst”, deadline: “2024-10-10”, status: “Completed”, priority: “Medium”, progress: 100, start: “2024-10-01”, phase: “Planning” }, { id: 3, name: “Team Formation”, assignee: “HR Lead”, deadline: “2024-10-15”, status: “In Progress”, priority: “High”, progress: 75, start: “2024-10-08”, phase: “Planning” }, { id: 4, name: “Budget & Funding”, assignee: “Finance Team”, deadline: “2024-10-15”, status: “In Progress”, priority: “High”, progress: 60, start: “2024-10-08”, phase: “Planning” },
// Phase 2: Design & Prototyping (Weeks 3-6) { id: 5, name: “Wireframes & UI/UX Design”, assignee: “Design Team”, deadline: “2024-11-01”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-10-16”, phase: “Design” }, { id: 6, name: “Smart Contract Design”, assignee: “Blockchain Team”, deadline: “2024-11-08”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-10-23”, phase: “Design” }, { id: 7, name: “Technology Stack Selection”, assignee: “Tech Lead”, deadline: “2024-10-25”, status: “Not Started”, priority: “Medium”, progress: 0, start: “2024-10-20”, phase: “Design” }, { id: 8, name: “Prototype Development”, assignee: “Frontend Team”, deadline: “2024-11-08”, status: “Not Started”, priority: “Medium”, progress: 0, start: “2024-10-30”, phase: “Design” },
// Phase 3: Development (Weeks 7-20) { id: 9, name: “Smart Contract Development”, assignee: “Blockchain Team”, deadline: “2024-12-20”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-11-09”, phase: “Development” }, { id: 10, name: “Backend Development”, assignee: “Backend Team”, deadline: “2024-01-15”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-11-20”, phase: “Development” }, { id: 11, name: “Frontend Development”, assignee: “Frontend Team”, deadline: “2024-01-30”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-12-01”, phase: “Development” }, { id: 12, name: “Payment Integration”, assignee: “Payments Team”, deadline: “2024-01-20”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-12-15”, phase: “Development” }, { id: 13, name: “Database Setup”, assignee: “DevOps Team”, deadline: “2024-12-01”, status: “Not Started”, priority: “Medium”, progress: 0, start: “2024-11-15”, phase: “Development” }, { id: 14, name: “Testing & Security Audit”, assignee: “QA Team”, deadline: “2024-02-15”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-01-25”, phase: “Development” },
// Phase 4: Launch & Marketing (Weeks 21-24) { id: 15, name: “Beta Launch”, assignee: “Product Team”, deadline: “2024-02-28”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-02-16”, phase: “Launch” }, { id: 16, name: “Token Creation”, assignee: “Blockchain Team”, deadline: “2024-03-07”, status: “Not Started”, priority: “Medium”, progress: 0, start: “2024-02-20”, phase: “Launch” }, { id: 17, name: “App Store Deployment”, assignee: “Mobile Team”, deadline: “2024-03-15”, status: “Not Started”, priority: “High”, progress: 0, start: “2024-03-01”, phase: “Launch” }, { id: 18, name: “Marketing Campaign”, assignee: “Marketing Team”, deadline: “2024-03-31”, status: “Not Started”, priority: “Medium”, progress: 0, start: “2024-03-01”, phase: “Launch” },
// Phase 5: Post-Launch (Weeks 25+) { id: 19, name: “User Support Setup”, assignee: “Support Team”, deadline: “2024-04-15”, status: “Not Started”, priority: “Medium”, progress: 0, start: “2024-04-01”, phase: “Scaling” }, { id: 20, name: “Feature Enhancements”, assignee: “Development Team”, deadline: “2024-06-01”, status: “Not Started”, priority: “Low”, progress: 0, start: “2024-04-15”, phase: “Scaling” } ], teamMembers: [“Alice (Tech Lead)”, “Bob (Blockchain Dev)”, “Charlie (Frontend)”, “Diana (Backend)”, “Eve (Designer)”, “Frank (DevOps)”, “Grace (QA)”, “Henry (Marketing)”], milestones: [ { name: “Project Kickoff”, date: “2024-10-01”, status: “completed” }, { name: “Design Phase Complete”, date: “2024-11-08”, status: “upcoming” }, { name: “Smart Contracts Deployed”, date: “2024-12-20”, status: “future” }, { name: “Beta Launch”, date: “2024-02-28”, status: “future” }, { name: “Full Launch”, date: “2024-03-15”, status: “future” }, { name: “Community Milestone”, date: “2024-06-01”, status: “future” } ], monetizationTargets: [ { strategy: “Affiliate Revenue”, target: 50000, current: 0, color: “#10b981” }, { strategy: “App Fees”, target: 30000, current: 0, color: “#3b82f6” }, { strategy: “Token Rewards”, target: 75000, current: 0, color: “#8b5cf6” }, { strategy: “Premium Features”, target: 25000, current: 0, color: “#f59e0b” } ], techStack: [ { category: “Blockchain”, technologies: [“Ethereum”, “Solidity”, “Hardhat”], progress: 20 }, { category: “Frontend”, technologies: [“React Native”, “Web3.js”], progress: 10 }, { category: “Backend”, technologies: [“Node.js”, “Express”, “MongoDB”], progress: 15 }, { category: “Payments”, technologies: [“Stripe”, “Flutterwave”], progress: 5 }, { category: “Infrastructure”, technologies: [“AWS”, “Docker”, “CI/CD”], progress: 25 } ] };
const ETHEXE_Dashboard = () => { const [projectData, setProjectData] = useState(ethexeData); const [filter, setFilter] = useState({ member: “”, priority: “”, status: “”, phase: “” });
// Calculate overall progress const overallProgress = useMemo(() => { const totalProgress = projectData.tasks.reduce((sum, task) => sum + task.progress, 0); return Math.round(totalProgress / projectData.tasks.length); }, [projectData.tasks]);
// Filter tasks based on current filter const filteredTasks = useMemo(() => { return projectData.tasks.filter(task => { return ( (filter.member === “” || task.assignee.includes(filter.member)) && (filter.priority === “” || task.priority === filter.priority) && (filter.status === “” || task.status === filter.status) && (filter.phase === “” || task.phase === filter.phase) ); }); }, [projectData.tasks, filter]);
// Phase progress data const phaseProgress = useMemo(() => { const phases = {}; projectData.tasks.forEach(task => { if (!phases[task.phase]) { phases[task.phase] = { total: 0, completed: 0, tasks: 0 }; } phases[task.phase].total += task.progress; phases[task.phase].tasks += 1; if (task.status === “Completed”) phases[task.phase].completed += 1; });
return Object.entries(phases).map(([name, data]) => ({ name, progress: Math.round(data.total / data.tasks), completed: data.completed, total: data.tasks })); }, [projectData.tasks]);
// Revenue projection data const revenueProjection = useMemo(() => { const months = [“Oct 24”, “Nov 24”, “Dec 24”, “Jan 25”, “Feb 25”, “Mar 25”, “Apr 25”, “May 25”, “Jun 25”]; return months.map((month, index) => ({ month, projected: index < 4 ? 0 : (index - 3) * 15000 + Math.random() * 5000, actual: index < 2 ? 0 : index < 4 ? (index - 1) * 2000 : 0 })); }, []);
// Team workload by phase const teamWorkload = useMemo(() => { const workload = {}; projectData.tasks.forEach(task => { const member = task.assignee.split(’ ‘)[0]; if (!workload[member]) { workload[member] = { planning: 0, design: 0, development: 0, launch: 0, scaling: 0 }; } workload[member][task.phase.toLowerCase()] += 1; });
return Object.entries(workload).map(([name, data]) => ({ name, …data })); }, [projectData.tasks]);
const getStatusColor = (status) => { switch (status) { case “Completed”: return “bg-green-500”; case “In Progress”: return “bg-blue-500”; default: return “bg-gray-300”; } };
const getPriorityColor = (priority) => { switch (priority) { case “High”: return “bg-red-100 text-red-800”; case “Medium”: return “bg-yellow-100 text-yellow-800”; default: return “bg-green-100 text-green-800”; } };
const getPhaseIcon = (phase) => { switch (phase) { case “Planning”: return <Target className=”w-4 h-4” />; case “Design”: return <Smartphone className=”w-4 h-4” />; case “Development”: return <Code className=”w-4 h-4” />; case “Launch”: return <Zap className=”w-4 h-4” />; case “Scaling”: return <Users className=”w-4 h-4” />; default: return <CheckCircle className=”w-4 h-4” />; } };
return ( <div className=”min-h-screen bg-gradient-to-br from-purple-50 to-blue-50 p-8”> {* Header *} <div className=”bg-white rounded-xl shadow-lg border border-gray-100 p-8 mb-8”> <div className=”flex items-center justify-between”> <div> <h1 className=”text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent”> {projectData.projectName} </h1> <p className=”text-gray-600 mt-2 text-lg”>{projectData.description}</p> </div> <div className=”flex items-center space-x-4”> <div className=”bg-purple-100 p-3 rounded-full”> <Zap className=”w-8 h-8 text-purple-600” /> </div> </div> </div> </div>
{* Filter Controls *} <div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-8”> <div className=”flex flex-wrap gap-4”> <select className=”px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500” value={filter.phase} onChange={(e) => setFilter({…filter, phase: e.target.value})} > <option value=”“>All Phases</option> <option value=”Planning”>Planning</option> <option value=”Design”>Design</option> <option value=”Development”>Development</option> <option value=”Launch”>Launch</option> <option value=”Scaling”>Scaling</option> </select>
<select className=”px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500” value={filter.priority} onChange={(e) => setFilter({…filter, priority: e.target.value})} > <option value=”“>All Priorities</option> <option value=”High”>High Priority</option> <option value=”Medium”>Medium Priority</option> <option value=”Low”>Low Priority</option> </select>
<select className=”px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500” value={filter.status} onChange={(e) => setFilter({…filter, status: e.target.value})} > <option value=”“>All Status</option> <option value=”Completed”>Completed</option> <option value=”In Progress”>In Progress</option> <option value=”Not Started”>Not Started</option> </select> </div> </div>
{* Key Metrics *} <div className=”grid grid-cols-1 md:grid-cols-4 gap-6 mb-8”> <div className=”bg-gradient-to-r from-green-400 to-green-600 rounded-xl shadow-lg p-6 text-white”> <div className=”flex items-center justify-between mb-4”> <h3 className=”text-sm font-medium opacity-90”>Project Progress</h3> <CheckCircle className=”w-6 h-6” /> </div> <div className=”text-3xl font-bold mb-2”>{overallProgress}%</div> <div className=”w-full bg-white bg-opacity-20 rounded-full h-2”> <div className=”bg-white h-2 rounded-full transition-all duration-300” style={{width: `${overallProgress}%`}} ></div> </div> </div>
<div className=”bg-gradient-to-r from-blue-400 to-blue-600 rounded-xl shadow-lg p-6 text-white”>
<div className=”flex items-center justify-between mb-4”>
<h3 className=”text-sm font-medium opacity-90”>Active Tasks</h3>
<Target className=”w-6 h-6” />
</div>
<div className=”text-3xl font-bold mb-2”>
{projectData.tasks.filter(t > t.status == “In Progress”).length}
</div>
<div className=”text-sm opacity-90”>Currently In Progress</div>
</div>
<div className=”bg-gradient-to-r from-purple-400 to-purple-600 rounded-xl shadow-lg p-6 text-white”> <div className=”flex items-center justify-between mb-4”> <h3 className=”text-sm font-medium opacity-90”>Team Size</h3> <Users className=”w-6 h-6” /> </div> <div className=”text-3xl font-bold mb-2”>{projectData.teamMembers.length}</div> <div className=”text-sm opacity-90”>Core Team Members</div> </div>
<div className=”bg-gradient-to-r from-orange-400 to-orange-600 rounded-xl shadow-lg p-6 text-white”> <div className=”flex items-center justify-between mb-4”> <h3 className=”text-sm font-medium opacity-90”>Revenue Target</h3> <DollarSign className=”w-6 h-6” /> </div> <div className=”text-3xl font-bold mb-2”>$180K</div> <div className=”text-sm opacity-90”>Annual Goal</div> </div> </div>
{* Phase Progress *}
<div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-8”>
<h2 className=”text-xl font-semibold text-gray-800 mb-6”>Development Phases</h2>
<div className=”grid grid-cols-1 md:grid-cols-5 gap-4”>
{phaseProgress.map((phase, index) > (
<div key={phase.name} className“relative”>
<div className=”bg-gray-50 rounded-lg p-4 border-2 border-gray-200 hover:border-purple-300 transition-colors”>
<div className=”flex items-center justify-between mb-3”>
<div className=”flex items-center space-x-2”>
{getPhaseIcon(phase.name)}
<h3 className=”font-medium text-gray-800”>{phase.name}</h3>
</div>
</div>
<div className=”mb-2”>
<div className=”flex justify-between text-sm text-gray-600 mb-1”>
<span>Progress</span>
<span>{phase.progress}%</span>
</div>
<div className=”w-full bg-gray-200 rounded-full h-2”>
<div
className=”bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full transition-all duration-300”
style={{width: `${phase.progress}%`}}
></div>
</div>
</div>
<div className=”text-sm text-gray-500”>
{phase.completed}/{phase.total} tasks completed
</div>
</div>
{index < phaseProgress.length - 1 && (
<div className=”hidden md:block absolute top-1/2 -right-2 w-4 h-0.5 bg-gray-300”></div>
)}
</div>
))}
</div>
</div>
{* Revenue Projection & Team Workload *}
<div className=”grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8”>
<div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6”>
<h2 className=”text-xl font-semibold text-gray-800 mb-4”>Revenue Projection</h2>
<ResponsiveContainer width=”100%” height={300}>
<AreaChart data={revenueProjection}>
<CartesianGrid strokeDasharray=”3 3” />
<XAxis dataKey=”month” />
<YAxis />
<Tooltip formatter={(value) > [`$${value.toLocaleString()}`, '']} />
<Area type“monotone” dataKey=”projected” stackId=”1” stroke=”#8b5cf6” fill=”#8b5cf6” fillOpacity={0.3} />
<Area type=”monotone” dataKey=”actual” stackId=”2” stroke=”#10b981” fill=”#10b981” />
</AreaChart>
</ResponsiveContainer>
</div>
<div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6”> <h2 className=”text-xl font-semibold text-gray-800 mb-4”>Team Workload by Phase</h2> <ResponsiveContainer width=”100%” height={300}> <BarChart data={teamWorkload}> <CartesianGrid strokeDasharray=”3 3” /> <XAxis dataKey=”name” /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey=”planning” stackId=”a” fill=”#f59e0b” /> <Bar dataKey=”design” stackId=”a” fill=”#3b82f6” /> <Bar dataKey=”development” stackId=”a” fill=”#10b981” /> <Bar dataKey=”launch” stackId=”a” fill=”#8b5cf6” /> <Bar dataKey=”scaling” stackId=”a” fill=”#f97316” /> </BarChart> </ResponsiveContainer> </div> </div>
{* Monetization Strategy & Tech Stack *}
<div className=”grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8”>
<div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6”>
<h2 className=”text-xl font-semibold text-gray-800 mb-4”>Monetization Strategy</h2>
<div className=”space-y-4”>
{projectData.monetizationTargets.map((item, index) > (
<div key={index} className“flex items-center justify-between p-4 bg-gray-50 rounded-lg”>
<div className=”flex items-center space-x-3”>
<div
className=”w-4 h-4 rounded”
style={{backgroundColor: item.color}}
></div>
<span className=”font-medium text-gray-800”>{item.strategy}</span>
</div>
<div className=”text-right”>
<div className=”font-bold text-gray-800”>${item.target.toLocaleString()}</div>
<div className=”text-sm text-gray-500”>Target</div>
</div>
</div>
))}
</div>
</div>
<div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6”>
<h2 className=”text-xl font-semibold text-gray-800 mb-4”>Technology Stack Progress</h2>
<div className=”space-y-4”>
{projectData.techStack.map((item, index) > (
<div key={index} className“space-y-2”>
<div className=”flex justify-between items-center”>
<h3 className=”font-medium text-gray-700”>{item.category}</h3>
<span className=”text-sm text-gray-500”>{item.progress}%</span>
</div>
<div className=”w-full bg-gray-200 rounded-full h-2”>
<div
className=”bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full transition-all duration-300”
style={{width: `${item.progress}%`}}
></div>
</div>
<div className=”flex flex-wrap gap-1”>
{item.technologies.map((tech, techIndex) > (
<span key={techIndex} className“px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded”>
{tech}
</span>
))}
</div>
</div>
))}
</div>
</div>
</div>
{* Milestones & Recent Tasks *}
<div className=”grid grid-cols-1 lg:grid-cols-2 gap-8”>
<div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6”>
<h2 className=”text-xl font-semibold text-gray-800 mb-4 flex items-center”>
<Calendar className=”w-5 h-5 mr-2 text-purple-500” />
Project Milestones
</h2>
<div className=”space-y-4”>
{projectData.milestones.map((milestone, index) > (
<div key={index} className“flex items-center space-x-4”>
<div className={`w-4 h-4 rounded-full
<div className=”bg-white rounded-xl shadow-sm border border-gray-100 p-6”>
<h2 className=”text-xl font-semibold text-gray-800 mb-4 flex items-center”>
<Clock className=”w-5 h-5 mr-2 text-orange-500” />
Current Focus
</h2>
<div className=”space-y-3”>
{filteredTasks
.filter(task > task.status == “In Progress” || (task.status === “Not Started” && new Date(task.start) <= new Date()))
.slice(0, 6)
.map(task > (
<div key={task.id} className“flex items-center justify-between p-3 bg-gray-50 rounded-lg”>
<div className=”flex-1”>
<h4 className=”font-medium text-gray-800”>{task.name}</h4>
<div className=”flex items-center space-x-2 mt-1”>
<span className=”text-sm text-gray-500”>{task.assignee}</span>
<span className=”text-gray-300”>•</span>
<span className=”text-sm text-gray-500”>{task.deadline}</span>
</div>
</div>
<div className=”flex items-center space-x-2”>
<span className={`px-2 py-1 text-xs rounded
export default ETHEXE_Dashboard;]]