Daily Work Report Generator

A modern React application that replaces manual daily reporting with a form-based interface that generates professionally formatted work reports.

Features

Core Functionality

• Two-column layout: Form on the left, live preview on the right
• Real-time preview: See your report update as you type
• Copy to clipboard: One-click copying of the formatted report
• Form validation: Required fields and proper formatting
• Reset functionality: Clear all fields with one click

Form Fields

• Basic Information: Name, Date, Total Hours, Project Name/URL
• Completed Tasks: Dynamic list of accomplished work
• Unfinished Tasks: Tasks with reasons for incompletion
• Blockers: Issues that need attention
• Concerns: Any worries or issues
• Energy/Mood Level: 1-10 slider with optional notes

AI Enhancement (Optional)

• OpenAI Integration: Automatically refine and polish your text
• Professional Tone: Makes your reports more professional and clear
• Batch Processing: Refines all content at once

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Install dependencies

   npm install

2. Start the development server

   npm run dev

3. Open your browser Navigate to http://localhost:5174 (or the port shown in terminal)

Optional: AI Refinement Setup

1. Get an OpenAI API key

   • Visit OpenAI Platform
   • Create an account and generate an API key

2. Set up environment variables

   cp .env.example .env

3. Add your API key to .env

   VITE_OPENAI_API_KEY=your_actual_api_key_here
   

4. Restart the development server

📋 Report Format

The application generates reports in this exact format:

Name- Date [Hours]

Project: Project Name (if provided)
URL: Project URL (if provided)

What I completed today
-- Task 1
-- Task 2

What I didn't finish and why:
-- Unfinished task: Reason

Blockers that need attention:
-- Blocker description

Concern:
-- Concern description

Energy/mood level (1–10):
7 – Additional notes about energy/mood

🛠️ Tech Stack

• React 19 - UI framework
• Vite - Build tool and dev server
• Tailwind CSS - Styling framework
• Framer Motion - Animations
• react-copy-to-clipboard - Clipboard functionality
• OpenAI API - Text refinement (optional)

🎨 UI/UX Features

• Responsive Design: Works on desktop and mobile
• Modern Styling: Clean, professional interface
• Smooth Animations: Framer Motion powered transitions
• Intuitive Controls: Easy-to-use form elements
• Visual Feedback: Loading states and success indicators

🤝 Usage Tips

1. Fill out the form: Start with your name and date (auto-filled to today)
2. Add tasks: Use the "+" buttons to add multiple items to each section
3. Use AI refinement: Enable AI to make your text more professional
4. Preview in real-time: Watch your report update as you type
5. Copy and share: Use the "Copy to Clipboard" button to get your formatted report

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint