Skip to content

Develop Next.js Schedule Viewing Application with MUI #1

New issue
New issue
Open
#3
Open
Develop Next.js Schedule Viewing Application with MUI#1
#3
@CoreyTrombley

Description

@CoreyTrombley
CoreyTrombley
opened on Aug 7, 2025

implement a next js application based off the script. The application should use MUI for the layout. Skip the emails, but create a UI for users to see their schedules.

Agent Context { "tasks": [ { "id": "2169715f-b2a8-4965-8169-c516c8045ac4", "taskIndex": 0, "request": "[original issue]\n**Develop Next.js Schedule Viewing Application with MUI**\nimplement a next js application based off the script. The application should use MUI for the layout. Skip the emails, but create a UI for users to see their schedules.", "title": "Develop Next.js Schedule Viewing Application with MUI based on CLI task scheduler", "createdAt": 1754542176785, "completed": false, "planRevisions": [ { "revisionIndex": 0, "plans": [ { "index": 0, "plan": "**1. Set up a new Next.js project with MUI**\n- Create a new Next.js project using `create-next-app`\n- Install Material UI dependencies: `@mui/material`, `@mui/icons-material`, `@emotion/react`, `@emotion/styled`\n- Set up basic project structure with `/pages`, `/components`, and `/utils` directories\n- Configure MUI theme in a `theme.js` file for consistent styling", "completed": true, "summary": "**Task 1 Completed: Set up a new Next.js project with MUI**\n\nSuccessfully completed all requirements for the initial project setup:\n\n### Actions Taken:\n- **Created Next.js Project**: Used `create-next-app@latest` to create a new TypeScript-enabled Next.js project named \"schedule-app\"\n- **Installed MUI Dependencies**: Successfully installed all required Material UI packages:\n - `@mui/material` (v7.3.1)\n - `@mui/icons-material` (v7.3.1) \n - `@emotion/react` (v11.14.0)\n - `@emotion/styled` (v11.14.1)\n- **Created Project Structure**: Set up the required directory structure:\n - `/pages` - for Next.js pages (already existed)\n - `/components` - for reusable React components\n - `/utils` - for utility functions\n - `/context` - for React Context providers\n- **Configured MUI Theme**: Created `theme.js` with comprehensive styling including:\n - Custom color palette (primary blue, secondary red)\n - Typography configuration with proper font weights and sizes\n - Component overrides for Card, Button, and AppBar\n - Consistent spacing and border radius values\n\n### Project Foundation:\nThe project is now ready for development with a solid foundation that includes:\n- TypeScript support for type safety\n- Material UI for consistent, professional UI components\n- Proper directory structure for scalable development\n- Custom theme configuration for brand consistency\n\nThe setup provides a clean starting point for implementing the task management and scheduling functionality in the subsequent tasks." }, { "index": 1, "plan": "**2. Create utility functions for task management**\n- Create `/utils/taskUtils.js` to handle task operations:\n - `loadTasks()`: Load tasks from localStorage (fallback to empty array)\n - `saveTasks(tasks)`: Save tasks to localStorage\n - `generateSchedule(tasks)`: Implement the scheduling algorithm from the CLI script\n - Include the fixed Monday tasks: 'Application Send', 'Follow Ups', 'Job Search'\n - Implement Fisher-Yates shuffle algorithm for random task distribution", "completed": true, "summary": "**Task 2 Completed: Create utility functions for task management**\n\nSuccessfully implemented all required utility functions in `/utils/taskUtils.js` that replicate the core functionality from the CLI script:\n\n### Core Functions Implemented:\n- **`loadTasks()`**: Loads tasks from localStorage with fallback to empty array, includes backward compatibility for different task formats (string vs object)\n- **`saveTasks(tasks)`**: Saves tasks to localStorage with error handling\n- **`generateSchedule(tasks)`**: Implements the exact scheduling algorithm from the CLI script:\n - Fixed Monday tasks: 'Application Send', 'Follow Ups', 'Job Search'\n - Random distribution of user tasks across Tuesday-Friday\n - Wrapping logic for when there are more tasks than available days\n- **`shuffle(array)`**: Fisher-Yates shuffle algorithm for random task distribution\n- **Constants**: `DAYS` array and `MONDAY_TASKS` array matching CLI script\n\n### Additional Helper Functions:\n- **`addTask(tasks, taskText)`**: Add new tasks with validation\n- **`removeTask(tasks, taskIndex)`**: Remove tasks by index\n- **`addSubtask(tasks, taskIndex, subtaskText)`**: Add subtasks to existing tasks\n- **`removeSubtask(tasks, taskIndex, subtaskIndex)`**: Remove subtasks\n- **`formatSchedule(schedule)`**: Format schedule for display\n\n### Key Features:\n- **Server-side rendering compatibility**: Proper `typeof window` checks\n- **Error handling**: Comprehensive error handling for all operations\n- **Data structure consistency**: Maintains `{ text: string, subtasks: [] }` format\n- **Immutable operations**: Functions return new arrays/objects without mutating originals\n- **localStorage integration**: Replaces file-based storage from CLI script\n\nThe utility functions provide a complete foundation for task management and scheduling that perfectly mirrors the original CLI script's behavior while being optimized for web application use." }, { "index": 2, "plan": "**3. Implement state management with React Context**\n- Create `/context/TaskContext.js` to manage global task state\n- Implement provider with state for tasks and current schedule\n- Create actions for adding tasks, removing tasks, adding subtasks, and generating schedules\n- Ensure state is persisted to localStorage when modified", "completed": true, "summary": "**Task 3 Completed: Implement state management with React Context**\n\nSuccessfully implemented comprehensive React Context state management in `/context/TaskContext.js`:\n\n### Core Implementation:\n- **TaskContext Creation**: Created React Context with `createContext()` and custom `useTaskContext()` hook\n- **TaskProvider Component**: Implemented provider using `useReducer` for complex state management\n- **State Structure**: Manages `tasks`, `schedule`, `loading`, and `error` states\n- **Reducer Pattern**: Implemented taskReducer with action types for all operations\n\n### Actions Implemented:\n- **`addTask(taskText)`**: Adds new tasks with validation and auto-saves to localStorage\n- **`removeTask(taskIndex)`**: Removes tasks by index with bounds checking\n- **`addSubtask(taskIndex, subtaskText)`**: Adds subtasks to existing tasks\n- **`removeSubtask(taskIndex, subtaskIndex)`**: Removes subtasks with validation\n- **`generateNewSchedule()`**: Creates new random schedules using utility functions\n- **`reloadTasks()`**: Reloads tasks from localStorage\n- **`clearError()`**: Clears error state\n\n### localStorage Persistence:\n- **Automatic Persistence**: All task modifications automatically save to localStorage via `saveTasks()`\n- **Initial Load**: Loads tasks from localStorage on component mount with `useEffect`\n- **Schedule Sync**: Automatically regenerates schedule when tasks change\n- **Error Handling**: Comprehensive error handling for localStorage operations\n\n### Additional Features:\n- **Computed Values**: Provides `hasSchedule`, `taskCount`, `totalSubtasks` for UI convenience\n- **Loading States**: Manages loading state for async operations\n- **Error Management**: User-friendly error messages with proper error clearing\n- **Validation**: Input validation for all task operations\n- **Immutable Updates**: All state updates maintain immutability\n\nThe context provides a complete state management solution that integrates seamlessly with the utility functions and will serve as the foundation for all UI components." }, { "index": 3, "plan": "**4. Create reusable UI components**\n- Create `/components/Layout.js` with MUI AppBar, navigation, and container\n- Create `/components/TaskItem.js` for rendering individual tasks with subtasks\n- Create `/components/TaskForm.js` for adding new tasks\n- Create `/components/SubtaskForm.js` for adding subtasks to existing tasks\n- Create `/components/ConfirmDialog.js` for task deletion confirmation", "completed": true, "summary": "**Task 4 Completed: Create reusable UI components**\n\nSuccessfully created all five required reusable UI components with comprehensive MUI integration:\n\n### Components Created:\n\n**1. `/components/Layout.js`** - Application layout and navigation\n- **MUI AppBar** with Toolbar for top navigation\n- **Container** component for responsive content layout\n- **Navigation buttons** with icons for Schedule and Tasks pages\n- **Responsive design** with mobile-friendly navigation\n- **Footer** with consistent styling\n- **Active page highlighting** and proper routing integration\n\n**2. `/components/TaskItem.js`** - Individual task rendering with subtasks\n- **Card** component for task display with hover effects\n- **List and ListItem** components for subtask rendering\n- **IconButton** components for add, delete, expand/collapse actions\n- **Chip** component showing subtask count\n- **Collapsible subtask sections** with smooth animations\n- **Inline subtask form** for quick additions\n- **Tooltip** components for better UX\n\n**3. `/components/TaskForm.js`** - New task creation\n- **Dialog** component for modal task creation\n- **TextField** with multiline support and character validation\n- **Button** components with loading states and icons\n- **Alert** component for error display\n- **Both modal and inline versions** for flexibility\n- **Form validation** with real-time feedback\n- **Keyboard shortcuts** (Enter to submit, Escape to cancel)\n\n**4. `/components/SubtaskForm.js`** - Subtask creation for existing tasks\n- **Dialog** component for modal subtask creation\n- **Chip** component to display parent task context\n- **TextField** with validation and character limits\n- **Button** components with proper loading states\n- **Both modal and inline versions** available\n- **Error handling** and user feedback\n- **Parent task context** display for clarity\n\n**5. `/components/ConfirmDialog.js`** - Deletion confirmation dialogs\n- **Dialog** component with customizable severity levels\n- **Alert** components for warnings and errors\n- **Button** components with appropriate colors and icons\n- **Specialized versions**: TaskDeleteDialog, SubtaskDeleteDialog, ScheduleRegenerateDialog\n- **Item details display** showing what will be deleted\n- **Loading states** and error handling\n- **Severity-based styling** (warning, error, info)\n\n### Key Features Implemented:\n- **Comprehensive MUI Integration**: All components use MUI components (Card, List, TextField, Button, IconButton) as required\n- **Responsive Design**: Components adapt to different screen sizes\n- **Accessibility**: Proper ARIA labels, keyboard navigation, and tooltips\n- **Error Handling**: Comprehensive validation and error display\n- **Loading States**: Visual feedback during async operations\n- **Reusability**: Components designed for use across multiple pages\n- **Consistent Styling**: Follows the established theme configuration\n- **User Experience**: Smooth animations, hover effects, and intuitive interactions\n\nAll components are ready for integration into the Tasks Management and Schedule View pages." }, { "index": 4, "plan": "**5. Implement Tasks Management Page**\n- Create `/pages/tasks.js` for managing tasks\n- Implement UI for displaying the list of all tasks with their subtasks\n- Add functionality to add new tasks\n- Add functionality to add subtasks to existing tasks\n- Add functionality to remove tasks\n- Use MUI components (Card, List, TextField, Button, IconButton) for the UI", "completed": false }, { "index": 5, "plan": "**6. Implement Schedule View Page**\n- Create `/pages/index.js` as the main schedule view\n- Display the weekly schedule (Monday-Friday) in a responsive grid layout\n- Show tasks assigned to each day with their subtasks\n- Add a button to generate a new random schedule\n- Use MUI components (Grid, Card, Typography, Button) for the UI", "completed": false }, { "index": 6, "plan": "**7. Implement Navigation and App Structure**\n- Create `/pages/_app.js` to wrap the application with the TaskProvider and MUI theme\n- Add navigation between Tasks Management and Schedule View\n- Ensure responsive design works on different screen sizes\n- Add appropriate page titles and metadata", "completed": false }, { "index": 7, "plan": "**8. Add Final Touches and Styling**\n- Implement loading states and error handling\n- Add empty state displays when no tasks exist\n- Ensure consistent styling across the application\n- Add subtle animations for better user experience\n- Test the application thoroughly across different browsers", "completed": false } ], "createdAt": 1754542176785, "createdBy": "agent" } ], "activeRevisionIndex": 0, "pullRequestNumber": 3 } ], "activeTaskIndex": 0 } [ "**1. Set up a new Next.js project with MUI**\n- Create a new Next.js project using `create-next-app`\n- Install Material UI dependencies: `@mui/material`, `@mui/icons-material`, `@emotion/react`, `@emotion/styled`\n- Set up basic project structure with `/pages`, `/components`, and `/utils` directories\n- Configure MUI theme in a `theme.js` file for consistent styling", "**2. Create utility functions for task management**\n- Create `/utils/taskUtils.js` to handle task operations:\n - `loadTasks()`: Load tasks from localStorage (fallback to empty array)\n - `saveTasks(tasks)`: Save tasks to localStorage\n - `generateSchedule(tasks)`: Implement the scheduling algorithm from the CLI script\n - Include the fixed Monday tasks: 'Application Send', 'Follow Ups', 'Job Search'\n - Implement Fisher-Yates shuffle algorithm for random task distribution", "**3. Implement state management with React Context**\n- Create `/context/TaskContext.js` to manage global task state\n- Implement provider with state for tasks and current schedule\n- Create actions for adding tasks, removing tasks, adding subtasks, and generating schedules\n- Ensure state is persisted to localStorage when modified", "**4. Create reusable UI components**\n- Create `/components/Layout.js` with MUI AppBar, navigation, and container\n- Create `/components/TaskItem.js` for rendering individual tasks with subtasks\n- Create `/components/TaskForm.js` for adding new tasks\n- Create `/components/SubtaskForm.js` for adding subtasks to existing tasks\n- Create `/components/ConfirmDialog.js` for task deletion confirmation", "**5. Implement Tasks Management Page**\n- Create `/pages/tasks.js` for managing tasks\n- Implement UI for displaying the list of all tasks with their subtasks\n- Add functionality to add new tasks\n- Add functionality to add subtasks to existing tasks\n- Add functionality to remove tasks\n- Use MUI components (Card, List, TextField, Button, IconButton) for the UI", "**6. Implement Schedule View Page**\n- Create `/pages/index.js` as the main schedule view\n- Display the weekly schedule (Monday-Friday) in a responsive grid layout\n- Show tasks assigned to each day with their subtasks\n- Add a button to generate a new random schedule\n- Use MUI components (Grid, Card, Typography, Button) for the UI", "**7. Implement Navigation and App Structure**\n- Create `/pages/_app.js` to wrap the application with the TaskProvider and MUI theme\n- Add navigation between Tasks Management and Schedule View\n- Ensure responsive design works on different screen sizes\n- Add appropriate page titles and metadata", "**8. Add Final Touches and Styling**\n- Implement loading states and error handling\n- Add empty state displays when no tasks exist\n- Ensure consistent styling across the application\n- Add subtle animations for better user experience\n- Test the application thoroughly across different browsers" ]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions