import React, { useState, useEffect, useRef } from "react"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; function App() { const { database, useDocument, useLiveQuery } = useFireproof("project-time-manager"); const [activeTab, setActiveTab] = useState("projects"); const [editingProject, setEditingProject] = useState(null); const [aiLoading, setAiLoading] = useState(false); const [aiResponse, setAiResponse] = useState(""); const [dailyCapacity, setDailyCapacity] = useState(8); const [showDemoButton, setShowDemoButton] = useState(true); const [currentTime, setCurrentTime] = useState(new Date()); const [selectedTaskId, setSelectedTaskId] = useState(null); const [actualHours, setActualHours] = useState(0); const [chartPeriod, setChartPeriod] = useState(7); // Days to show in chart const chartRef = useRef(null); const pieChartRef = useRef(null); // Update the clock useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()); }, 1000); return () => clearInterval(timer); }, []); // Form for creating new projects const { doc: newProject, merge: mergeProject, submit: submitProject, reset: resetProject } = useDocument({ type: "project", name: "", description: "", dailyTimeCommitment: 1, startDate: new Date().toISOString().split('T')[0], endDate: "", priority: "medium", status: "planning", ticker: "", // Added ticker field timeBalance: 0, // Time balance (over/under investment) actualTimeSpent: 0 // Total time spent on this project }); // Form for creating new tasks/milestones const { doc: newTask, merge: mergeTask, submit: submitTask, reset: resetTask } = useDocument({ type: "task", projectId: "", title: "", description: "", dueDate: "", estimatedHours: 1, actualHours: 0, isComplete: false, isMilestone: false, completedDate: null }); // Form for time tracking entry const { doc: timeEntry, merge: mergeTimeEntry, submit: submitTimeEntry, reset: resetTimeEntry } = useDocument({ type: "timeEntry", projectId: "", taskId: "", date: new Date().toISOString().split('T')[0], hours: 0, description: "" }); // Query all projects const { docs: projects } = useLiveQuery("type", { key: "project" }); // Query all tasks const { docs: tasks } = useLiveQuery("type", { key: "task" }); // Query all time entries const { docs: timeEntries } = useLiveQuery("type", { key: "timeEntry" }); // Calculate daily time allocation const dailyTimeAllocated = projects.reduce((total, project) => total + (parseFloat(project.dailyTimeCommitment) || 0), 0); // Calculate time availability const timeRemaining = dailyCapacity - dailyTimeAllocated; // Draw pie chart for day trading view useEffect(() => { if (!pieChartRef.current) return; const canvas = pieChartRef.current; const ctx = canvas.getContext('2d'); // Set canvas dimensions canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Calculate angles const totalHours = dailyCapacity; const remainingHours = Math.max(0, timeRemaining); // Gather project data for the pie chart const projectData = projects.map(project => ({ ticker: project.ticker || generateTicker(project.name), name: project.name.length > 15 ? project.name.substring(0, 15) + '...' : project.name, hours: parseFloat(project.dailyTimeCommitment) || 0, todaySpent: getTodayTimeSpent(project._id) })); // Sort projects by hours for better visualization projectData.sort((a, b) => b.hours - a.hours); // Calculate center of the pie const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = Math.min(centerX, centerY) * 0.85; // Define colors for the pie slices const colors = ['#ff70a6', '#ff9770', '#ffd670', '#e9ff70', '#70d6ff', '#ff70d6', '#70fff8']; let startAngle = -Math.PI / 2; // Start from top // Function to draw a pie slice const drawPieSlice = (startAngle, endAngle, color, label, value, isRemaining = false) => { // Draw slice ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, startAngle, endAngle); ctx.closePath(); // Fill slice ctx.fillStyle = isRemaining ? '#2d3748' : color; ctx.fill(); // Draw border ctx.strokeStyle = '#1f2937'; ctx.lineWidth = 2; ctx.stroke(); // Calculate position for the label const sliceAngle = (startAngle + endAngle) / 2; const labelRadius = radius * 0.7; const labelX = centerX + Math.cos(sliceAngle) * labelRadius; const labelY = centerY + Math.sin(sliceAngle) * labelRadius; if (!isRemaining && value > 0.3) { // Only show labels for slices that are big enough // Draw label ctx.fillStyle = '#ffffff'; ctx.font = 'bold 12px monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(label, labelX, labelY); // Draw value below the label ctx.fillStyle = '#d1d5db'; ctx.font = '10px monospace'; ctx.fillText(`${value.toFixed(1)}h`, labelX, labelY + 14); } }; // Draw project slices let legendItems = []; projectData.forEach((project, index) => { const sliceAngle = (project.hours / totalHours) * Math.PI * 2; const endAngle = startAngle + sliceAngle; const color = colors[index % colors.length]; drawPieSlice(startAngle, endAngle, color, project.ticker, project.hours); legendItems.push({ ticker: project.ticker, name: project.name, hours: project.hours, todaySpent: project.todaySpent, color: color }); startAngle = endAngle; }); // Draw remaining time slice if any if (remainingHours > 0) { const remainingSliceAngle = (remainingHours / totalHours) * Math.PI * 2; const endAngle = startAngle + remainingSliceAngle; drawPieSlice(startAngle, endAngle, '#4a5568', 'OPEN', remainingHours, true); legendItems.push({ ticker: 'OPEN', name: 'Unallocated Time', hours: remainingHours, color: '#4a5568' }); } // Draw central hole (donut chart) ctx.beginPath(); ctx.arc(centerX, centerY, radius * 0.5, 0, Math.PI * 2); ctx.fillStyle = 'black'; ctx.fill(); ctx.strokeStyle = '#1f2937'; ctx.lineWidth = 2; ctx.stroke(); // Draw center text ctx.fillStyle = '#e2e8f0'; ctx.font = 'bold 14px monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(`${dailyCapacity}h`, centerX, centerY - 10); ctx.font = '12px monospace'; ctx.fillStyle = '#a0aec0'; ctx.fillText('CAPACITY', centerX, centerY + 10); // Add data to DOM for legend const legendContainer = document.getElementById('pie-chart-legend'); if (legendContainer) { legendContainer.innerHTML = ''; legendItems.forEach(item => { const legendItem = document.createElement('div'); legendItem.className = 'flex items-center justify-between mb-1'; const leftSide = document.createElement('div'); leftSide.className = 'flex items-center'; const colorSquare = document.createElement('div'); colorSquare.className = 'w-3 h-3 mr-2'; colorSquare.style.backgroundColor = item.color; const tickerSpan = document.createElement('span'); tickerSpan.className = 'font-bold mr-2'; tickerSpan.textContent = item.ticker; const nameSpan = document.createElement('span'); nameSpan.className = 'text-xs text-gray-400'; nameSpan.textContent = item.name; leftSide.appendChild(colorSquare); leftSide.appendChild(tickerSpan); leftSide.appendChild(nameSpan); const rightSide = document.createElement('div'); rightSide.className = 'flex items-center'; const hoursSpan = document.createElement('span'); hoursSpan.textContent = `${item.hours.toFixed(1)}h`; if (item.todaySpent !== undefined) { const spentSpan = document.createElement('span'); const diff = item.todaySpent - item.hours; spentSpan.className = diff < 0 ? 'text-red-400 text-xs ml-2' : diff > 0 ? 'text-green-400 text-xs ml-2' : 'text-yellow-300 text-xs ml-2'; spentSpan.textContent = `(${item.todaySpent.toFixed(1)}h today)`; rightSide.appendChild(hoursSpan); rightSide.appendChild(spentSpan); } else { rightSide.appendChild(hoursSpan); } legendItem.appendChild(leftSide); legendItem.appendChild(rightSide); legendContainer.appendChild(legendItem); }); } }, [projects, dailyCapacity, timeRemaining, timeEntries]); // Functions to get time data for the chart const getProjectTimeHistory = (projectId, days) => { const result = []; const today = new Date(); // Create dates array for last N days for (let i = days - 1; i >= 0; i--) { const date = new Date(today); date.setDate(date.getDate() - i); const dateString = date.toISOString().split('T')[0]; // Find time entries for this project on this date const entries = timeEntries.filter( entry => entry.projectId === projectId && entry.date === dateString ); // Sum hours for this date const hoursSpent = entries.reduce((sum, entry) => sum + parseFloat(entry.hours || 0), 0); // Get the project const project = projects.find(p => p._id === projectId); const dailyTarget = project ? parseFloat(project.dailyTimeCommitment) || 0 : 0; // Calculate balance (actual - expected) const balance = hoursSpent - dailyTarget; // Add to result result.push({ date: dateString, hoursSpent, dailyTarget, balance }); } return result; }; // Get all project time data for the chart const getAllProjectsTimeHistory = (days) => { return projects.map(project => ({ projectId: project._id, ticker: project.ticker || generateTicker(project.name), name: project.name, timeData: getProjectTimeHistory(project._id, days) })); }; // Generate chart lines useEffect(() => { if (!chartRef.current || projects.length === 0) return; const drawStockChart = () => { const canvas = chartRef.current; const ctx = canvas.getContext('2d'); const projectsData = getAllProjectsTimeHistory(chartPeriod); // Set canvas dimensions canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Set chart dimensions const padding = 40; const chartWidth = canvas.width - padding * 2; const chartHeight = canvas.height - padding * 2; // Draw background grid ctx.strokeStyle = '#1f2937'; ctx.lineWidth = 1; // Horizontal grid lines for (let i = 0; i <= 5; i++) { const y = padding + (i / 5) * chartHeight; ctx.beginPath(); ctx.moveTo(padding, y); ctx.lineTo(padding + chartWidth, y); ctx.stroke(); } // Vertical grid lines for (let i = 0; i <= chartPeriod - 1; i++) { const x = padding + (i / (chartPeriod - 1)) * chartWidth; ctx.beginPath(); ctx.moveTo(x, padding); ctx.lineTo(x, padding + chartHeight); ctx.stroke(); } // Find min and max values across all projects let minBalance = 0; let maxBalance = 0; projectsData.forEach(project => { project.timeData.forEach(day => { if (day.balance < minBalance) minBalance = day.balance; if (day.balance > maxBalance) maxBalance = day.balance; }); }); // Ensure we have a reasonable range (at least -1 to +1) if (maxBalance - minBalance < 2) { if (maxBalance <= 0) maxBalance = 1; if (minBalance >= 0) minBalance = -1; } // Add some padding to the range const range = maxBalance - minBalance; minBalance -= range * 0.1; maxBalance += range * 0.1; // Draw zero line if (minBalance < 0 && maxBalance > 0) { const zeroY = padding + chartHeight * (maxBalance / (maxBalance - minBalance)); ctx.strokeStyle = '#4b5563'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(padding, zeroY); ctx.lineTo(padding + chartWidth, zeroY); ctx.stroke(); } // Draw dates on x-axis ctx.fillStyle = '#9ca3af'; ctx.font = '10px monospace'; ctx.textAlign = 'center'; for (let i = 0; i < chartPeriod; i += Math.max(1, Math.floor(chartPeriod / 7))) { const date = new Date(); date.setDate(date.getDate() - (chartPeriod - 1 - i)); const x = padding + (i / (chartPeriod - 1)) * chartWidth; const dateLabel = `${date.getMonth() + 1}/${date.getDate()}`; ctx.fillText(dateLabel, x, canvas.height - 10); } // Draw project lines const colors = ['#ff70a6', '#ff9770', '#ffd670', '#e9ff70', '#70d6ff']; projectsData.forEach((project, index) => { const color = colors[index % colors.length]; // Draw line ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.beginPath(); project.timeData.forEach((day, i) => { const x = padding + (i / (chartPeriod - 1)) * chartWidth; const y = padding + chartHeight - ((day.balance - minBalance) / (maxBalance - minBalance)) * chartHeight; if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } }); ctx.stroke(); // Draw ticker labels at the end of each line const lastPoint = project.timeData[project.timeData.length - 1]; const x = padding + chartWidth; const y = padding + chartHeight - ((lastPoint.balance - minBalance) / (maxBalance - minBalance)) * chartHeight; ctx.fillStyle = color; ctx.font = 'bold 12px monospace'; ctx.textAlign = 'left'; ctx.fillText(project.ticker, x + 5, y + 4); }); // Draw chart title and labels ctx.fillStyle = '#d1d5db'; ctx.font = 'bold 14px monospace'; ctx.textAlign = 'center'; ctx.fillText('TIME BALANCE CHART (DAILY TARGET VS ACTUAL)', canvas.width / 2, 20); ctx.font = '11px monospace'; ctx.textAlign = 'left'; ctx.fillText(`MIN: ${minBalance.toFixed(1)}`, padding, padding - 10); ctx.textAlign = 'right'; ctx.fillText(`MAX: ${maxBalance.toFixed(1)}`, padding + chartWidth, padding - 10); }; // Draw the chart initially drawStockChart(); // Redraw on window resize const handleResize = () => drawStockChart(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [projects, timeEntries, chartPeriod]); // Complete a task with actual hours const completeTask = async (task) => { if (task.isComplete) { // If already complete, just uncomplete it await database.put({ ...task, isComplete: false, completedDate: null }); return; } // Otherwise, show the completion modal setSelectedTaskId(task._id); setActualHours(task.estimatedHours); }; // Save task completion with actual hours const saveTaskCompletion = async () => { if (!selectedTaskId || actualHours <= 0) return; const task = tasks.find(t => t._id === selectedTaskId); if (!task) return; const project = projects.find(p => p._id === task.projectId); if (!project) return; // Update task with completion info await database.put({ ...task, isComplete: true, actualHours: parseFloat(actualHours), completedDate: new Date().toISOString() }); // Create time entry await database.put({ type: "timeEntry", projectId: task.projectId, taskId: task._id, date: new Date().toISOString().split('T')[0], hours: parseFloat(actualHours), description: `Completed: ${task.title}` }); // Update project time balance const difference = parseFloat(actualHours) - parseFloat(task.estimatedHours); const newActualTimeSpent = (parseFloat(project.actualTimeSpent) || 0) + parseFloat(actualHours); await database.put({ ...project, timeBalance: (parseFloat(project.timeBalance) || 0) + difference, actualTimeSpent: newActualTimeSpent }); // Reset modal state setSelectedTaskId(null); setActualHours(0); }; // Cancel completion modal const cancelTaskCompletion = () => { setSelectedTaskId(null); setActualHours(0); }; // Log time for a project (not necessarily completing a task) const logTimeToProject = async (e) => { e.preventDefault(); if (!timeEntry.projectId || timeEntry.hours <= 0) return; // Get the project const project = projects.find(p => p._id === timeEntry.projectId); if (!project) return; // First, save the time entry await submitTimeEntry(); // Then, calculate how much this affects the project's time balance const newActualTimeSpent = (parseFloat(project.actualTimeSpent) || 0) + parseFloat(timeEntry.hours); const expectedDaily = parseFloat(project.dailyTimeCommitment) || 0; // We're treating this like a "stock price" - if we invest the expected amount, balance stays the same // If we invest more, the balance goes up, if less, it goes down const timeBalance = (parseFloat(project.timeBalance) || 0) + (parseFloat(timeEntry.hours) - expectedDaily); // Update the project await database.put({ ...project, actualTimeSpent: newActualTimeSpent, timeBalance: timeBalance }); }; // Delete project const deleteProject = async (projectId) => { const projectDoc = projects.find(p => p._id === projectId); const projectTasks = tasks.filter(t => t.projectId === projectId); const projectEntries = timeEntries.filter(t => t.projectId === projectId); // Delete all related tasks and time entries first for (const task of projectTasks) { await database.del(task._id); } for (const entry of projectEntries) { await database.del(entry._id); } // Then delete the project await database.del(projectDoc._id); if (editingProject === projectId) { setEditingProject(null); } }; // Delete task const deleteTask = async (taskId) => { const taskEntries = timeEntries.filter(t => t.taskId === taskId); // Delete associated time entries for (const entry of taskEntries) { await database.del(entry._id); } // Delete the task await database.del(taskId); }; // Update project const updateProject = async (e) => { e.preventDefault(); await database.put(newProject); resetProject(); setEditingProject(null); }; // Edit project const editProject = (project) => { mergeProject({ ...project }); setEditingProject(project._id); }; // Get tasks for a specific project const getProjectTasks = (projectId) => { return tasks.filter(task => task.projectId === projectId) .sort((a, b) => { // Sort by completion status first, then by due date, then by milestone if (a.isComplete !== b.isComplete) { return a.isComplete ? 1 : -1; } if (a.dueDate !== b.dueDate) { return new Date(a.dueDate) - new Date(b.dueDate); } return b.isMilestone - a.isMilestone; }); }; // Get time entries for a specific project const getProjectTimeEntries = (projectId) => { return timeEntries.filter(entry => entry.projectId === projectId) .sort((a, b) => new Date(b.date) - new Date(a.date)); }; // Calculate total time spent today for a project const getTodayTimeSpent = (projectId) => { const today = new Date().toISOString().split('T')[0]; return timeEntries .filter(entry => entry.projectId === projectId && entry.date === today) .reduce((total, entry) => total + parseFloat(entry.hours), 0); }; // Format date for display const formatDate = (dateString) => { if (!dateString) return "NO DATE"; const date = new Date(dateString); return date.toLocaleDateString(); }; // Calculate days remaining const getDaysRemaining = (dateString) => { if (!dateString) return "NO DEADLINE"; const today = new Date(); const dueDate = new Date(dateString); const diffTime = dueDate - today; const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); if (diffDays < 0) { return "OVERDUE " + Math.abs(diffDays) + "d"; } else if (diffDays === 0) { return "DUE TODAY"; } else { return "T-" + diffDays + "d"; } }; // Generate ticker symbol const generateTicker = (name) => { if (!name) return ""; // Extract initials or first few characters, convert to uppercase const words = name.split(/\s+/); if (words.length >= 2) { return (words[0][0] + words[1][0] + Math.floor(Math.random() * 10)).toUpperCase(); } return name.substring(0, 3).toUpperCase() + Math.floor(Math.random() * 10); }; // Format stock change indicator const getTimeChangeIndicator = (project) => { const timeBalance = parseFloat(project.timeBalance) || 0; const indicator = { symbol: timeBalance === 0 ? "■" : timeBalance > 0 ? "▲" : "▼", class: timeBalance === 0 ? "text-yellow-300" : timeBalance > 0 ? "text-green-400" : "text-red-400" }; return indicator; }; // AI function to generate recommendations for project planning const generateRecommendations = async () => { setAiLoading(true); setAiResponse(""); try { // Prepare project data for AI const projectSummaries = projects.map(p => ({ name: p.name, ticker: p.ticker, dailyHours: p.dailyTimeCommitment, actualTimeSpent: p.actualTimeSpent || 0, timeBalance: p.timeBalance || 0, deadline: p.endDate, status: p.status, priority: p.priority, tasksCount: getProjectTasks(p._id).length, completedTasksCount: getProjectTasks(p._id).filter(t => t.isComplete).length, todayInvestment: getTodayTimeSpent(p._id) })); // Create prompt for AI const prompt = ` I'm managing ${projects.length} projects with a daily capacity of ${dailyCapacity} hours. Here are my current projects: ${JSON.stringify(projectSummaries, null, 2)} Format your response like a financial analyst terminal report from the 1990s. Use ALL CAPS for headers and key information. Include terms like BUY/SELL/HOLD recommendations for each project based on time allocation. For each project, include: 1. BUY/HOLD/SELL recommendation based on time investment needed 2. Current status (OVER-INVESTED, UNDER-INVESTED, or ON TARGET) 3. Time ROI prediction Then provide: 1. MARKET OVERVIEW - Overall assessment of my time portfolio 2. RISK ASSESSMENT - Projects at risk of failure 3. OPPORTUNITY ANALYSIS - Where should I invest more time? 4. REBALANCE RECOMMENDATION - How to adjust my daily allocations `; const generator = await callAI(prompt, { stream: true }); let fullResponse = ""; for await (const chunk of generator) { fullResponse += chunk; setAiResponse(fullResponse); } } catch (error) { console.error("Error generating recommendations:", error); setAiResponse("ERROR GENERATING RECOMMENDATIONS. RETRY."); } finally { setAiLoading(false); } }; // Generate demo data const generateDemoData = async () => { setAiLoading(true); try { const response = await callAI("Generate 5 sample projects with titles, descriptions, priorities (high, medium, low), daily time commitments (0.5-4 hours), start dates (recent), end dates (in the future), and status (planning, active, on hold, complete). For each project, generate 3-5 tasks/milestones with titles, descriptions, due dates, estimated hours, and completion status. Make some tasks complete with actual hours that vary from the estimates. Also generate time entries for the past 7 days with varying hours (some above and some below the daily target) for each project. Return as structured JSON. Make the titles sound like actual business projects.", { schema: { properties: { projects: { type: "array", items: { type: "object", properties: { name: { type: "string" }, description: { type: "string" }, dailyTimeCommitment: { type: "number" }, startDate: { type: "string" }, endDate: { type: "string" }, priority: { type: "string" }, status: { type: "string" }, tasks: { type: "array", items: { type: "object", properties: { title: { type: "string" }, description: { type: "string" }, dueDate: { type: "string" }, estimatedHours: { type: "number" }, actualHours: { type: "number" }, isComplete: { type: "boolean" }, isMilestone: { type: "boolean" } } } }, timeEntries: { type: "array", items: { type: "object", properties: { date: { type: "string" }, hours: { type: "number" }, description: { type: "string" } } } } } } } } } }); const data = JSON.parse(response); // Create projects and their tasks for (const project of data.projects) { const tasks = project.tasks || []; const timeEntries = project.timeEntries || []; delete project.tasks; delete project.timeEntries; // Generate ticker const ticker = generateTicker(project.name); // Calculate initial time balance based on completed tasks let actualTimeSpent = 0; let expectedTimeSpent = 0; tasks.forEach(task => { if (task.isComplete) { actualTimeSpent += task.actualHours || 0; expectedTimeSpent += task.estimatedHours || 0; } }); const timeBalance = actualTimeSpent - expectedTimeSpent; // Add project const newPrj = await database.put({ ...project, type: "project", ticker: ticker, timeBalance: timeBalance, actualTimeSpent: actualTimeSpent }); // Add tasks for this project for (const task of tasks) { const taskDoc = await database.put({ ...task, type: "task", projectId: newPrj.id, completedDate: task.isComplete ? new Date().toISOString() : null }); // If task is complete, add a time entry if (task.isComplete && (!timeEntries || timeEntries.length === 0)) { await database.put({ type: "timeEntry", projectId: newPrj.id, taskId: taskDoc.id, date: new Date().toISOString().split('T')[0], hours: task.actualHours || task.estimatedHours, description: `Completed: ${task.title}` }); } } // Add time entries if (timeEntries && timeEntries.length > 0) { for (const entry of timeEntries) { await database.put({ type: "timeEntry", projectId: newPrj.id, taskId: "", date: entry.date, hours: entry.hours, description: entry.description || "Time logged" }); } } } setShowDemoButton(false); } catch (error) { console.error("Error generating demo data:", error); } finally { setAiLoading(false); } }; return (

TIME MARKET TERMINAL

INVESTING YOUR TIME LIKE STOCK MARKET CAPITAL

{currentTime.toLocaleTimeString()}

{currentTime.toLocaleDateString()}

TIME ALLOCATION

DAILY CAPACITY:

setDailyCapacity(parseFloat(e.target.value))} className="bg-black border border-green-400 text-green-300 w-16 text-right px-1" /> HRS

ALLOCATED: dailyCapacity ? 'text-red-400' : 'text-blue-300'}`}> {dailyTimeAllocated.toFixed(1)} HRS

REMAINING: {timeRemaining.toFixed(1)} HRS

PROJECTS: {projects.length}

TASKS: {tasks.length}

COMPLETED: {tasks.filter(t => t.isComplete).length}

DAY TRADING

TODAY'S TIME INVESTMENTS

{projects.map(project => { const todayTime = getTodayTimeSpent(project._id); const dailyTarget = parseFloat(project.dailyTimeCommitment) || 0; const diff = todayTime - dailyTarget; const percentComplete = dailyTarget > 0 ? (todayTime / dailyTarget) * 100 : 0; return (

{project.ticker} 0 ? 'text-green-400' : 'text-yellow-300'}> {todayTime.toFixed(1)}/{dailyTarget.toFixed(1)}

{project.name}

100 ? 'bg-green-500' : percentComplete >= 75 ? 'bg-green-600' : percentComplete >= 50 ? 'bg-yellow-500' : percentComplete >= 25 ? 'bg-orange-500' : 'bg-red-500' }`} style={{ width: `${Math.min(100, percentComplete)}%` }} >

{percentComplete.toFixed(0)}% Complete

); })} {projects.length === 0 && (

NO INVESTMENTS TODAY

)}

{/* Demo data button */} {showDemoButton && projects.length === 0 && (

)} {/* Stock Chart Section */}

TIME MARKET CHART

{projects.length > 0 ? (

) : (

NO DATA AVAILABLE - ADD PROJECTS AND LOG TIME TO SEE CHART

)}

{projects.slice(0, 5).map((project, index) => { const colors = ['#ff70a6', '#ff9770', '#ffd670', '#e9ff70', '#70d6ff']; return (

{project.ticker}: {project.name}

); })}

{/* Tabs */}

{/* Projects Tab */} {activeTab === "projects" && (

{/* Project List */}

PROJECT LISTINGS

{projects.length === 0 ? (

NO PROJECTS FOUND IN DATABASE

) : (

{projects.map(project => { const indicator = getTimeChangeIndicator(project); const todayTime = getTodayTimeSpent(project._id); const dailyTarget = parseFloat(project.dailyTimeCommitment) || 0; const dailyDiff = todayTime - dailyTarget; return ( ); })}

TICKER	PROJECT	DAILY	TIME BAL	TODAY	TOTAL	DEADLINE	TASKS	ACTIONS
{project.ticker \|\| '---'}	{project.name} {project.description}	{project.dailyTimeCommitment} HRS	{(project.timeBalance \|\| 0).toFixed(1)} {indicator.symbol}	0 ? 'text-green-400' : 'text-yellow-300'}> {todayTime.toFixed(1)}/{dailyTarget.toFixed(1)}	{(project.actualTimeSpent \|\| 0).toFixed(1)}	{project.endDate ? ( {formatDate(project.endDate)} {getDaysRemaining(project.endDate)} ) : ( "NO DATE" )}	{getProjectTasks(project._id).filter(t => t.isComplete).length}/{getProjectTasks(project._id).length}

)}

{/* Project Form - Moved to bottom */}

{editingProject ? "EDIT PROJECT" : "NEW PROJECT ENTRY"}

PROJECT NAME { const name = e.target.value; mergeProject({ name, ticker: newProject.ticker || generateTicker(name) }); }} className="w-full p-2 bg-black border border-green-500 text-green-300" required />

TICKER mergeProject({ ticker: e.target.value.toUpperCase().substring(0, 5) })} className="w-full p-2 bg-black border border-green-500 text-green-300 uppercase" maxLength={5} />

PRIORITY

DESCRIPTION

mergeProject({ description: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  rows="2"
                />
              </div>
              
              <div>
                <label className="block mb-1">DAILY TIME INVESTMENT</label>
                <input 
                  type="number" 
                  min="0.1" 
                  max="24" 
                  step="0.1"
                  value={newProject.dailyTimeCommitment} 
                  onChange={(e) => mergeProject({ dailyTimeCommitment: parseFloat(e.target.value) })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required 
                />
              </div>
              
              <div>
                <label className="block mb-1">STATUS</label>
                <select 
                  value={newProject.status} 
                  onChange={(e) => mergeProject({ status: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                >
                  <option value="planning">PLANNING</option>
                  <option value="active">ACTIVE</option>
                  <option value="on hold">ON HOLD</option>
                  <option value="complete">COMPLETE</option>
                </select>
              </div>
              
              <div>
                <label className="block mb-1">START DATE</label>
                <input 
                  type="date" 
                  value={newProject.startDate} 
                  onChange={(e) => mergeProject({ startDate: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required
                />
              </div>
              
              <div>
                <label className="block mb-1">END DATE</label>
                <input 
                  type="date" 
                  value={newProject.endDate} 
                  onChange={(e) => mergeProject({ endDate: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                />
              </div>
              
              <div className="md:col-span-2 flex justify-end gap-3 mt-2">
                {editingProject && (
                  <button 
                    type="button"
                    onClick={() => {
                      resetProject();
                      setEditingProject(null);
                    }}
                    className="px-4 py-1 bg-gray-800 text-gray-300 border border-gray-600"
                  >
                    CANCEL
                  </button>
                )}
                <button 
                  type="submit" 
                  className="px-6 py-1 bg-green-800 hover:bg-green-700 text-green-100 border-2 border-green-500"
                >
                  {editingProject ? "UPDATE" : "SUBMIT"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
      
      {/* Tasks Tab */}
      {activeTab === "tasks" && (
        <div>
          {/* Tasks List */}
          <div className="mb-8">
            <h2 className="text-xl font-bold text-yellow-300 mb-4">TASK LISTINGS</h2>
            
            {tasks.length === 0 ? (
              <div className="text-center py-8 bg-gray-900 border border-green-700">
                <p className="text-green-500">NO TASKS FOUND IN DATABASE</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <thead>
                    <tr className="bg-green-900 text-green-100">
                      <th className="border border-green-500 p-2 text-left">TICKER</th>
                      <th className="border border-green-500 p-2 text-left">TASK</th>
                      <th className="border border-green-500 p-2 text-center">TYPE</th>
                      <th className="border border-green-500 p-2 text-center">DUE DATE</th>
                      <th className="border border-green-500 p-2 text-center">EST. HRS</th>
                      <th className="border border-green-500 p-2 text-center">ACTUAL</th>
                      <th className="border border-green-500 p-2 text-center">DIFF</th>
                      <th className="border border-green-500 p-2 text-center">STATUS</th>
                      <th className="border border-green-500 p-2 text-center">ACTIONS</th>
                    </tr>
                  </thead>
                  <tbody>
                    {[...tasks].sort((a, b) => {
                      // Sort by project ticker, then by completion status, then by due date
                      const projectA = projects.find(p => p._id === a.projectId);
                      const projectB = projects.find(p => p._id === b.projectId);
                      const tickerA = (projectA?.ticker || 'ZZZ').toUpperCase();
                      const tickerB = (projectB?.ticker || 'ZZZ').toUpperCase();
                      
                      if (tickerA !== tickerB) return tickerA.localeCompare(tickerB);
                      
                      if (a.isComplete !== b.isComplete) {
                        return a.isComplete ? 1 : -1;
                      }
                      
                      if (a.dueDate && b.dueDate) {
                        return new Date(a.dueDate) - new Date(b.dueDate);
                      }
                      if (a.dueDate) return -1;
                      if (b.dueDate) return 1;
                      return 0;
                    }).map(task => {
                      const project = projects.find(p => p._id === task.projectId) || {};
                      const actualHours = parseFloat(task.actualHours) || 0;
                      const estimatedHours = parseFloat(task.estimatedHours) || 0;
                      const diff = actualHours - estimatedHours;
                      
                      return (
                        <tr key={task._id} className={`hover:bg-gray-800 ${task.isComplete ? 'bg-gray-950 text-green-600' : 'bg-gray-900'}`}>
                          <td className="border border-green-700 p-2 font-bold text-yellow-300">{project.ticker || '---'}</td>
                          <td className="border border-green-700 p-2">
                            <div className={task.isComplete ? 'line-through' : ''}>{task.title}</div>
                            <div className="text-sm text-green-500">{task.description}</div>
                          </td>
                          <td className="border border-green-700 p-2 text-center">
                            {task.isMilestone ? (
                              <span className="bg-yellow-900 text-yellow-200 px-1 text-xs">MILESTONE</span>
                            ) : (
                              <span className="bg-blue-900 text-blue-200 px-1 text-xs">TASK</span>
                            )}
                          </td>
                          <td className="border border-green-700 p-2 text-center">
                            {task.dueDate ? (
                              <div>
                                <div>{formatDate(task.dueDate)}</div>
                                <div className={getDaysRemaining(task.dueDate).includes("OVERDUE") ? "text-red-400" : "text-blue-300"}>
                                  {getDaysRemaining(task.dueDate)}
                                </div>
                              </div>
                            ) : (
                              "NO DATE"
                            )}
                          </td>
                          <td className="border border-green-700 p-2 text-center">{task.estimatedHours}</td>
                          <td className="border border-green-700 p-2 text-center">
                            {task.isComplete ? task.actualHours : "—"}
                          </td>
                          <td className="border border-green-700 p-2 text-center">
                            {task.isComplete && (
                              <span className={diff > 0 ? "text-red-400" : diff < 0 ? "text-green-400" : "text-yellow-300"}>
                                {diff > 0 ? "+" : ""}{diff.toFixed(1)}
                              </span>
                            )}
                          </td>
                          <td className="border border-green-700 p-2 text-center">
                            <button
                              onClick={() => completeTask(task)}
                              className={`px-2 py-1 text-xs border ${
                                task.isComplete 
                                  ? 'bg-green-900 text-green-200 border-green-700' 
                                  : 'bg-gray-800 text-gray-300 border-gray-700 hover:bg-gray-700'
                              }`}
                            >
                              {task.isComplete ? "COMPLETE" : "COMPLETE"}
                            </button>
                          </td>
                          <td className="border border-green-700 p-2 text-center">
                            <button
                              onClick={() => deleteTask(task._id)}
                              className="px-2 py-1 bg-red-900 text-red-200 border border-red-700 hover:bg-red-800 text-xs"
                            >
                              DELETE
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
          
          {/* Task Form */}
          <div className="bg-gray-900 p-6 border-2 border-green-500">
            <h2 className="text-xl font-bold text-yellow-300 mb-4">ADD TASK ENTRY</h2>
            
            <form onSubmit={submitTask} className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block mb-1">PROJECT</label>
                <select 
                  value={newTask.projectId} 
                  onChange={(e) => mergeTask({ projectId: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required
                >
                  <option value="">-- SELECT PROJECT --</option>
                  {projects.map(project => (
                    <option key={project._id} value={project._id}>
                      {project.ticker ? `${project.ticker}: ${project.name}` : project.name}
                    </option>
                  ))}
                </select>
              </div>
              
              <div>
                <label className="block mb-1">TYPE</label>
                <select
                  value={newTask.isMilestone ? "milestone" : "task"}
                  onChange={(e) => mergeTask({ isMilestone: e.target.value === "milestone" })}
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                >
                  <option value="task">TASK</option>
                  <option value="milestone">MILESTONE</option>
                </select>
              </div>
              
              <div className="md:col-span-2">
                <label className="block mb-1">TITLE</label>
                <input 
                  type="text" 
                  value={newTask.title} 
                  onChange={(e) => mergeTask({ title: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required 
                />
              </div>
              
              <div className="md:col-span-2">
                <label className="block mb-1">DESCRIPTION</label>
                <textarea 
                  value={newTask.description} 
                  onChange={(e) => mergeTask({ description: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  rows="2"
                />
              </div>
              
              <div>
                <label className="block mb-1">DUE DATE</label>
                <input 
                  type="date" 
                  value={newTask.dueDate} 
                  onChange={(e) => mergeTask({ dueDate: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required
                />
              </div>
              
              <div>
                <label className="block mb-1">EST. HOURS</label>
                <input 
                  type="number" 
                  min="0.1" 
                  step="0.1"
                  value={newTask.estimatedHours} 
                  onChange={(e) => mergeTask({ estimatedHours: parseFloat(e.target.value) })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required 
                />
              </div>
              
              <div className="md:col-span-2 flex justify-end mt-2">
                <button 
                  type="submit" 
                  className="px-6 py-1 bg-green-800 hover:bg-green-700 text-green-100 border-2 border-green-500"
                >
                  SUBMIT
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
      
      {/* Time Entries Tab */}
      {activeTab === "timeEntries" && (
        <div>
          {/* Time Entry Form */}
          <div className="mb-8 bg-gray-900 p-6 border-2 border-green-500">
            <h2 className="text-xl font-bold text-yellow-300 mb-4">LOG TIME INVESTMENT</h2>
            
            <form onSubmit={logTimeToProject} className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block mb-1">PROJECT</label>
                <select 
                  value={timeEntry.projectId} 
                  onChange={(e) => {
                    // Set project ID and reset task ID
                    mergeTimeEntry({ 
                      projectId: e.target.value,
                      taskId: "" 
                    });
                  }} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required
                >
                  <option value="">-- SELECT PROJECT --</option>
                  {projects.map(project => (
                    <option key={project._id} value={project._id}>
                      {project.ticker ? `${project.ticker}: ${project.name}` : project.name}
                    </option>
                  ))}
                </select>
              </div>
              
              <div>
                <label className="block mb-1">TASK (OPTIONAL)</label>
                <select 
                  value={timeEntry.taskId} 
                  onChange={(e) => mergeTimeEntry({ taskId: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  disabled={!timeEntry.projectId}
                >
                  <option value="">-- GENERAL TIME --</option>
                  {tasks
                    .filter(task => task.projectId === timeEntry.projectId && !task.isComplete)
                    .map(task => (
                      <option key={task._id} value={task._id}>
                        {task.title}
                      </option>
                    ))
                  }
                </select>
              </div>
              
              <div>
                <label className="block mb-1">DATE</label>
                <input 
                  type="date" 
                  value={timeEntry.date} 
                  onChange={(e) => mergeTimeEntry({ date: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required
                />
              </div>
              
              <div>
                <label className="block mb-1">HOURS</label>
                <input 
                  type="number" 
                  min="0.1" 
                  step="0.1"
                  value={timeEntry.hours} 
                  onChange={(e) => mergeTimeEntry({ hours: parseFloat(e.target.value) })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  required 
                />
              </div>
              
              <div className="md:col-span-2">
                <label className="block mb-1">DESCRIPTION</label>
                <input 
                  type="text" 
                  value={timeEntry.description} 
                  onChange={(e) => mergeTimeEntry({ description: e.target.value })} 
                  className="w-full p-2 bg-black border border-green-500 text-green-300"
                  placeholder="What did you work on?"
                />
              </div>
              
              <div className="md:col-span-3 flex justify-end mt-2">
                <button 
                  type="submit" 
                  disabled={!timeEntry.projectId || timeEntry.hours <= 0}
                  className="px-6 py-1 bg-green-800 hover:bg-green-700 text-green-100 border-2 border-green-500 disabled:opacity-50"
                >
                  LOG TIME
                </button>
              </div>
            </form>
          </div>
          
          {/* Time Entries List */}
          <div>
            <h2 className="text-xl font-bold text-yellow-300 mb-4">TIME INVESTMENT LEDGER</h2>
            
            {timeEntries.length === 0 ? (
              <div className="text-center py-8 bg-gray-900 border border-green-700">
                <p className="text-green-500">NO TIME ENTRIES FOUND IN DATABASE</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <thead>
                    <tr className="bg-green-900 text-green-100">
                      <th className="border border-green-500 p-2 text-left">DATE</th>
                      <th className="border border-green-500 p-2 text-left">TICKER</th>
                      <th className="border border-green-500 p-2 text-left">PROJECT/TASK</th>
                      <th className="border border-green-500 p-2 text-center">HOURS</th>
                      <th className="border border-green-500 p-2 text-left">DESCRIPTION</th>
                    </tr>
                  </thead>
                  <tbody>
                    {[...timeEntries].sort((a, b) => {
                      // Sort by date (newest first), then by project
                      if (a.date !== b.date) {
                        return new Date(b.date) - new Date(a.date);
                      }
                      
                      const projectA = projects.find(p => p._id === a.projectId);
                      const projectB = projects.find(p => p._id === b.projectId);
                      
                      return (projectA?.name || '').localeCompare(projectB?.name || '');
                    }).map(entry => {
                      const project = projects.find(p => p._id === entry.projectId) || {};
                      const task = tasks.find(t => t._id === entry.taskId);
                      
                      return (
                        <tr key={entry._id} className="bg-gray-900 hover:bg-gray-800">
                          <td className="border border-green-700 p-2">
                            {formatDate(entry.date)}
                          </td>
                          <td className="border border-green-700 p-2 font-bold text-yellow-300">
                            {project.ticker || '---'}
                          </td>
                          <td className="border border-green-700 p-2">
                            <div>{project.name || 'Unknown Project'}</div>
                            {task && (
                              <div className="text-sm text-green-500">Task: {task.title}</div>
                            )}
                          </td>
                          <td className="border border-green-700 p-2 text-center font-bold">
                            {parseFloat(entry.hours).toFixed(1)}
                          </td>
                          <td className="border border-green-700 p-2">
                            {entry.description || '—'}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      )}
      
      {/* AI Advisor Tab */}
      {activeTab === "advisor" && (
        <div>
          <div className="mb-6 bg-gray-900 p-6 border-2 border-green-500">
            <h2 className="text-xl font-bold text-yellow-300 mb-4">TIME MARKET ANALYST</h2>
            
            <p className="text-green-400 mb-4">
              Generate terminal report with BUY/SELL/HOLD recommendations for optimal time investment portfolio.
            </p>
            
            <button
              onClick={generateRecommendations}
              disabled={aiLoading || projects.length === 0}
              className="px-6 py-2 bg-blue-800 hover:bg-blue-700 text-blue-200 font-bold border-2 border-blue-500 disabled:bg-gray-800 disabled:text-gray-500 disabled:border-gray-700"
            >
              {aiLoading ? "ANALYZING DATA..." : "GENERATE ANALYSIS"}
            </button>
            
            {projects.length === 0 && (
              <p className="text-sm text-red-400 mt-2">
                ERROR: INSUFFICIENT DATA. ADD PROJECTS TO GENERATE ANALYSIS.
              </p>
            )}
          </div>
          
          {(aiLoading || aiResponse) && (
            <div className="bg-black p-6 border-2 border-green-500 font-mono text-green-300">
              <h3 className="text-xl font-bold text-yellow-300 mb-3">MARKET ANALYSIS</h3>
              
              {aiLoading && (
                <div className="flex items-center gap-2 text-green-500">
                  <div className="animate-pulse">▌</div>
                  <div>PROCESSING REQUEST...</div>
                </div>
              )}
              
              {aiResponse && (
                <pre className="whitespace-pre-wrap overflow-x-auto font-mono text-sm">{aiResponse}</pre>
              )}
            </div>
          )}
        </div>
      )}
      
      {/* Task completion modal */}
      {selectedTaskId && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
          <div className="bg-gray-900 p-6 border-2 border-green-500 max-w-md w-full">
            <h2 className="text-xl font-bold text-yellow-300 mb-4">TASK COMPLETION</h2>
            
            {(() => {
              const task = tasks.find(t => t._id === selectedTaskId);
              const project = task ? projects.find(p => p._id === task.projectId) : null;
              
              if (!task || !project) return <p>Error: Task not found</p>;
              
              return (
                <>
                  <p className="mb-2">
                    <span className="text-green-300">Project:</span> {project.name} ({project.ticker})
                  </p>
                  <p className="mb-4">
                    <span className="text-green-300">Task:</span> {task.title}
                  </p>
                  
                  <div className="mb-4">
                    <label className="block mb-1">ACTUAL HOURS SPENT</label>
                    <input 
                      type="number" 
                      min="0.1" 
                      step="0.1"
                      value={actualHours} 
                      onChange={(e) => setActualHours(parseFloat(e.target.value))} 
                      className="w-full p-2 bg-black border border-green-500 text-green-300"
                    />
                  </div>
                  
                  <div className="flex justify-between">
                    <div className="text-sm">
                      <p>Estimated: <span className="text-blue-300">{task.estimatedHours} hrs</span></p>
                      <p>
                        Difference: 
                        <span className={actualHours - task.estimatedHours > 0 ? 'text-red-400' : 'text-green-400'}>
                          {" "}{(actualHours - task.estimatedHours > 0 ? '+' : '')}{(actualHours - task.estimatedHours).toFixed(1)} hrs
                        </span>
                      </p>
                    </div>
                    
                    <div className="flex gap-2">
                      <button
                        onClick={cancelTaskCompletion}
                        className="px-4 py-1 bg-gray-800 text-gray-300 border border-gray-600"
                      >
                        CANCEL
                      </button>
                      <button
                        onClick={saveTaskCompletion}
                        className="px-6 py-1 bg-green-800 hover:bg-green-700 text-green-100 border-2 border-green-500"
                      >
                        COMPLETE
                      </button>
                    </div>
                  </div>
                </>
              );
            })()}
          </div>
        </div>
      )}
      
      <footer className="mt-8 text-center text-green-500 text-sm border-t border-green-700 pt-4">
        <p>TIME MARKET TERMINAL v1.0 - INVEST YOUR TIME WISELY</p>
        <p>© {new Date().getFullYear()} TEMPORAL EXCHANGE SYSTEMS</p>
      </footer>
    </div>
  );
}

export default App;</article></body></html>