# Coastal Contracting Timesheet App

A modern, responsive timesheet application built with React for tracking work hours and generating professional PDF timesheets.

## Features

- **Weekly Time Tracking**: Track work hours for each day of the week
- **Dynamic Date Navigation**: Navigate between weeks with easy-to-use controls
- **Homeowner Management**: Default homeowners plus ability to add custom names
- **Dark/Light Mode**: Toggle between themes with persistent preference
- **PDF Export**: Generate and download professional timesheet PDFs
- **Local Storage**: Automatically saves timesheet data and custom homeowners
- **Responsive Design**: Works on desktop and mobile devices

## Getting Started

### Prerequisites

- Node.js (version 14 or higher)
- npm or yarn

### Installation

1. Clone the repository
2. Install dependencies:
   ```bash
   npm install
   ```

3. Start the development server:
   ```bash
   npm run dev
   ```

4. Open [http://localhost:5173](http://localhost:5173) in your browser

### Building for Production

```bash
npm run build
npm run preview
```

## Usage

1. **Select Week**: Use the date picker at the top to navigate between weeks
2. **Enter Time Data**: For each day, fill in:
   - Work Description: What work was performed
   - Hours Worked: Number of hours (supports decimals)
   - Homeowner: Select from dropdown or add custom names
3. **Theme Toggle**: Click the sun/moon icon in the top-right to switch themes
4. **Export PDF**: Click "Download PDF" to generate a professional timesheet

## Data Storage

- All timesheet data is stored locally in your browser
- Custom homeowner names are preserved across sessions
- Each week's data is stored separately

## Tech Stack

- **Frontend**: React with Vite
- **Styling**: Tailwind CSS
- **PDF Generation**: @react-pdf/renderer
- **Icons**: Lucide React
- **Storage**: Browser localStorage

## Project Structure

```
src/
├── components/          # React components
│   ├── TimeSheet.jsx    # Main timesheet interface
│   ├── DatePicker.jsx   # Week navigation
│   ├── TimeEntryRow.jsx # Individual day entry
│   ├── HomeownerDropdown.jsx # Name selection
│   ├── ThemeToggle.jsx  # Dark/light mode toggle
│   ├── PDFExport.jsx    # PDF download button
│   └── TimesheetPDF.jsx # PDF document structure
├── hooks/               # Custom React hooks
│   ├── useTimeSheet.js  # Timesheet state management
│   └── useTheme.js      # Theme management
├── utils/               # Utility functions
│   └── dateUtils.js     # Date manipulation helpers
└── App.jsx              # Main application component
```