Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to track the time associated with various tasks. Users can define a list of tasks, select one to start timing, and can either count up from the start or use a timer with intervals of 30 minutes. The app will also allow users to add comments and generate daily reports summarizing the time spent on each task along with the associated comments.

## CORE FEATURES
1. **Task Management**: Users can create, edit, and delete a list of tasks to track.
2. **Time Tracking**: Users can select a task to start a timer, which tracks the time spent on that task until stopped.
3. **Timer Functionality**: Users can set a timer with increments of 30 minutes for focused work sessions.
4. **Comment Field**: Provide an input field for users to add comments or notes related to each task.
5. **Daily Reporting**: At the end of each day, the app generates a report summarizing the total time spent on each task and includes the comments added throughout the day.
6. **User Dashboard**: A clean dashboard that displays ongoing tasks, completed tasks, and daily summaries for easy navigation and monitoring.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean, simple layout that emphasizes usability. The interface should have plenty of white space to avoid clutter and enhance focus on content.
- **Color Mode**: Utilize a light theme with dark text on light backgrounds to ensure readability and a friendly user experience.
- **Layout**: Use a card-based layout to display tasks, timers, and reports. The main dashboard should feature a header with navigation, a task list section, an active timer area, and a reporting section for daily summaries.
- **Typography**: Use a sans-serif font for clarity and modernity. Maintain a clear hierarchy with larger font sizes for headings, medium for subheadings, and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for rapid and responsive UI design.
- **UI Components**: Implement shadcn/ui for ready-to-use components that align with the minimalist design.
- **State Management**: Use React's built-in state management or consider Context API for global state management if needed for user preferences and task data.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Components**: Build core components including TaskList, Timer, Comments, and DailyReport.
4. **Implement State Management**: Set up local state to manage tasks, timer status, and comments using React hooks.
5. **Design Layout**: Use Tailwind CSS classes to design the layout according to the specified visual style and spacing guidelines.
6. **Add Functionality**: Implement functionality for task creation, timer controls, and comment storage.
7. **Create Reporting Logic**: Develop a function to compile daily reports from tracked data and display them in the dashboard.
8. **Responsive Design**: Ensure the app is responsive by testing and adjusting the layout for different screen sizes.

## USER EXPERIENCE
Users will land on a minimalistic dashboard where they can view their tasks and start timing a selected task with a simple click. The active timer will be prominently displayed, with options to pause or reset. Users can add comments easily while the timer is running. At the end of the day, users can view a neatly formatted report showing the total time spent on each task along with their comments, enhancing their ability to review productivity efficiently. The app's design ensures that every interaction is intuitive, with a focus on minimizing distractions and maximizing usability.