import pageData from "~/data/category-weekly-planner-app.json"; export function WeeklyPlanner() { const { data, updateData } = useData(pageData); const categories = data.categories || [ { id: 'work', name: 'Work', color: { header: 'bg-blue-100 dark:bg-blue-900', cell: 'bg-blue-50 dark:bg-blue-950' } }, { id: 'personal', name: 'Personal', color: { header: 'bg-green-100 dark:bg-green-900', cell: 'bg-green-50 dark:bg-green-950' } }, { id: 'health', name: 'Health', color: { header: 'bg-purple-100 dark:bg-purple-900', cell: 'bg-purple-50 dark:bg-purple-950' } }, { id: 'learning', name: 'Learning', color: { header: 'bg-orange-100 dark:bg-orange-900', cell: 'bg-orange-50 dark:bg-orange-950' } } ]; const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; const tasks = data.tasks || {}; const availableColors = [ { header: 'bg-red-100 dark:bg-red-900', cell: 'bg-red-50 dark:bg-red-950' }, { header: 'bg-yellow-100 dark:bg-yellow-900', cell: 'bg-yellow-50 dark:bg-yellow-950' }, { header: 'bg-indigo-100 dark:bg-indigo-900', cell: 'bg-indigo-50 dark:bg-indigo-950' }, { header: 'bg-pink-100 dark:bg-pink-900', cell: 'bg-pink-50 dark:bg-pink-950' }, { header: 'bg-teal-100 dark:bg-teal-900', cell: 'bg-teal-50 dark:bg-teal-950' }, { header: 'bg-cyan-100 dark:bg-cyan-900', cell: 'bg-cyan-50 dark:bg-cyan-950' }, { header: 'bg-emerald-100 dark:bg-emerald-900', cell: 'bg-emerald-50 dark:bg-emerald-950' }, { header: 'bg-violet-100 dark:bg-violet-900', cell: 'bg-violet-50 dark:bg-violet-950' } ]; const [newCategoryName, setNewCategoryName] = React.useState(''); const [selectedTask, setSelectedTask] = React.useState(null); const [taskDetails, setTaskDetails] = React.useState({ title: '', time: '', description: '', notes: '' }); const [isCreateTaskOpen, setIsCreateTaskOpen] = React.useState(false); const [newTaskData, setNewTaskData] = React.useState({ title: '', time: '', description: '', notes: '', day: '', categoryId: '', showDetails: false }); const [selectedCategory, setSelectedCategory] = React.useState(null); const [editingCategoryName, setEditingCategoryName] = React.useState(''); // Get current day for visual indication const getCurrentDayIndex = () => { const today = new Date().getDay(); return today === 0 ? 6 : today - 1; // Convert Sunday=0 to index 6, Monday=1 to index 0 }; const currentDayIndex = getCurrentDayIndex(); const addCategory = () => { if (!newCategoryName.trim()) return; const categoryId = newCategoryName.toLowerCase().replace(/\s+/g, '-'); const usedColors = categories.map(c => c.color.header); const availableColor = availableColors.find(color => !usedColors.includes(color.header)) || availableColors[0]; const newCategory = { id: categoryId, name: newCategoryName.trim(), color: availableColor }; updateData({ ...data, categories: [...categories, newCategory] }); setNewCategoryName(''); }; const deleteCategory = (categoryId) => { const newCategories = categories.filter(c => c.id !== categoryId); const newTasks = { ...tasks }; // Remove tasks for this category Object.keys(newTasks).forEach(day => { if (newTasks[day][categoryId]) { delete newTasks[day][categoryId]; } }); updateData({ ...data, categories: newCategories, tasks: newTasks }); setSelectedCategory(null); }; const renameCategory = (categoryId, newName) => { if (!newName.trim()) return; const newCategories = categories.map(c => c.id === categoryId ? { ...c, name: newName.trim() } : c ); updateData({ ...data, categories: newCategories }); setSelectedCategory(null); setEditingCategoryName(''); }; const addTask = (day, categoryId, text, time = '') => { if (!text.trim()) return; const taskId = Date.now().toString(); const newTasks = { ...tasks }; if (!newTasks[day]) newTasks[day] = {}; if (!newTasks[day][categoryId]) newTasks[day][categoryId] = []; newTasks[day][categoryId].push({ id: taskId, text: text.trim(), time: time, completed: false, description: '', notes: '' }); updateData({ ...data, tasks: newTasks }); return taskId; }; const updateTask = (day, categoryId, taskId, updates) => { const newTasks = { ...tasks }; const task = newTasks[day][categoryId].find(t => t.id === taskId); if (task) { Object.assign(task, updates); updateData({ ...data, tasks: newTasks }); } }; const toggleTask = (day, categoryId, taskId) => { updateTask(day, categoryId, taskId, { completed: !tasks[day][categoryId].find(t => t.id === taskId).completed }); }; const deleteTask = (day, categoryId, taskId) => { const newTasks = { ...tasks }; newTasks[day][categoryId] = newTasks[day][categoryId].filter(t => t.id !== taskId); updateData({ ...data, tasks: newTasks }); }; const openTaskModal = (day, categoryId, task) => { setSelectedTask({ day, categoryId, task }); setTaskDetails({ title: task.text || '', time: task.time || '', description: task.description || '', notes: task.notes || '' }); }; const saveTaskDetails = () => { if (selectedTask) { updateTask( selectedTask.day, selectedTask.categoryId, selectedTask.task.id, { text: taskDetails.title, time: taskDetails.time, description: taskDetails.description, notes: taskDetails.notes } ); setSelectedTask(null); setTaskDetails({ title: '', time: '', description: '', notes: '' }); } }; const openCreateTaskModal = (day = '', categoryId = '') => { setNewTaskData({ title: '', time: '', description: '', notes: '', day, categoryId, showDetails: false }); setIsCreateTaskOpen(true); }; const createNewTask = () => { if (!newTaskData.title.trim() || !newTaskData.day || !newTaskData.categoryId) return; const taskId = addTask(newTaskData.day, newTaskData.categoryId, newTaskData.title, newTaskData.time); // If there's description or notes, update the task with those details if (newTaskData.description || newTaskData.notes) { setTimeout(() => { updateTask(newTaskData.day, newTaskData.categoryId, taskId, { description: newTaskData.description, notes: newTaskData.notes }); }, 100); } setIsCreateTaskOpen(false); setNewTaskData({ title: '', time: '', description: '', notes: '', day: '', categoryId: '', showDetails: false }); }; const openCategoryModal = (category) => { setSelectedCategory(category); setEditingCategoryName(category.name); }; return (

setNewCategoryName(e.target.value)} onKeyPress={(e) => { if (e.key === 'Enter') { addCategory(); } }} className="w-full sm:w-48" />

{/* Header row */}

Categories Cat

{days.map((day, index) => { const isPastDay = index < currentDayIndex; const isToday = index === currentDayIndex; return (

{day} {day.slice(0, 3)} {isToday && (

)}

); })}

{/* Category rows */} {categories.map((category, categoryIndex) => (

{/* Category header */}

openCategoryModal(category)}> {category.name} {category.name.charAt(0)}... {categories.length > 1 && ( )}

{/* Day cells for this category */} {days.map((day, dayIndex) => { const dayTasks = tasks[day]?.[category.id] || []; const isPastDay = dayIndex < currentDayIndex; return (

{/* Tasks */}

{dayTasks.map(task => (

openTaskModal(day, category.id, task)} >

{/* Desktop: show checkbox and delete button */} { toggleTask(day, category.id, task.id); }} onClick={(e) => e.stopPropagation()} className="hidden sm:flex h-3 w-3 flex-shrink-0" /> {task.text}

{task.time && (

{task.time.slice(0, 5)}

)}

))}

{/* Add task button */}

); })}

))}

{/* Task Details Modal */}