86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
# 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
|
|
``` |