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:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open http://localhost:5173 in your browser

Building for Production

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