# LifeManager Frontend

A modern, dark-themed React application for managing your life - todos, calendar events, reminders, projects, people, and locations.

## Tech Stack

- **React 18** with TypeScript
- **Vite** for fast builds
- **Tailwind CSS v3** for styling
- **shadcn/ui** components (manually implemented)
- **React Router v6** for routing
- **TanStack Query v5** for data fetching
- **Axios** for HTTP requests
- **FullCalendar** for calendar view
- **Lucide React** for icons
- **date-fns** for date formatting
- **sonner** for toast notifications

## Features

- PIN-based authentication with setup wizard
- Dark theme with customizable accent colors (cyan, blue, purple, orange, green)
- Dashboard with stats and widgets
- Todos with priority, category, and recurrence
- Calendar with event management
- Reminders with dismiss functionality
- Projects with tasks and progress tracking
- People management with relationships
- Locations categorization
- Responsive design with collapsible sidebar

## Getting Started

### Prerequisites

- Node.js 20 or higher
- npm or yarn

### Installation

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## Development

The application expects a backend API at `/api`. During development, Vite proxies `/api` requests to `http://localhost:8000`.

### Project Structure

```
frontend/
├── src/
│   ├── components/
│   │   ├── auth/          # Authentication components
│   │   ├── calendar/      # Calendar page and forms
│   │   ├── dashboard/     # Dashboard widgets
│   │   ├── layout/        # Layout components (sidebar, etc)
│   │   ├── locations/     # Locations management
│   │   ├── people/        # People management
│   │   ├── projects/      # Projects and tasks
│   │   ├── reminders/     # Reminders management
│   │   ├── settings/      # Settings page
│   │   ├── todos/         # Todos management
│   │   └── ui/            # shadcn/ui components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utilities (API client, utils)
│   ├── types/             # TypeScript type definitions
│   ├── App.tsx            # Main app with routing
│   ├── main.tsx           # Entry point
│   └── index.css          # Global styles
├── Dockerfile             # Production Docker image
├── nginx.conf             # Nginx configuration
└── package.json
```

## Docker Deployment

Build and run with Docker:

```bash
# Build image
docker build -t lifemanager-frontend .

# Run container
docker run -p 80:80 lifemanager-frontend
```

## Environment Variables

No environment variables required. API base URL is configured to `/api` and proxied by nginx in production.

## Customization

### Accent Colors

Accent colors are defined in `src/hooks/useTheme.ts` and can be changed in Settings. The application uses CSS custom properties for theming.

### Adding New Pages

1. Create component in `src/components/<feature>/`
2. Add route in `src/App.tsx`
3. Add navigation item in `src/components/layout/Sidebar.tsx`

## License

Private project - all rights reserved.