# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a Laravel + Vue.js application using Inertia.js for seamless SPA-like navigation. The project uses:
- **Backend**: Laravel 12 with PHP 8.2+
- **Frontend**: Vue 3 with TypeScript
- **Styling**: Tailwind CSS 4
- **UI Components**: Reka UI (Vue port of Radix UI)
- **Build Tool**: Vite
- **Testing**: Pest (PHP) and PHPUnit
- **Database**: SQLite (default)

## Development Commands

### Starting Development Server
```bash
# Start all services (server, queue, logs, vite)
composer dev

# Start with SSR support
composer dev:ssr

# Frontend only
npm run dev
```

### Building
```bash
# Build frontend assets
npm run build

# Build with SSR support
npm run build:ssr
```

### Testing
```bash
# Run PHP tests
composer test
# or
php artisan test

# Run specific test file
php artisan test tests/Feature/ExampleTest.php
```

### Code Quality
```bash
# Lint and fix JavaScript/TypeScript
npm run lint

# Format code
npm run format

# Check formatting
npm run format:check

# PHP code style (if Laravel Pint is available)
./vendor/bin/pint
```

## Architecture

### Frontend Structure
- **Pages**: `/resources/js/pages/` - Inertia.js pages
- **Components**: `/resources/js/components/` - Vue components
  - `ui/` - Reusable UI components based on Reka UI
  - App-specific components in root
- **Layouts**: `/resources/js/layouts/` - Page layouts
  - `AppLayout.vue` - Main application layout
  - `AuthLayout.vue` - Authentication pages layout
- **Composables**: `/resources/js/composables/` - Vue composables
  - `useAppearance.ts` - Theme management (light/dark/system)
- **Types**: `/resources/js/types/` - TypeScript type definitions

### Backend Structure
- **Controllers**: `/app/Http/Controllers/` - Laravel controllers
  - `Auth/` - Authentication controllers
  - `Settings/` - User settings controllers
- **Models**: `/app/Models/` - Eloquent models
- **Routes**: `/routes/` - Route definitions
  - `web.php` - Main web routes
  - `auth.php` - Authentication routes
  - `settings.php` - Settings routes

### Key Features
- **Authentication**: Full Laravel Breeze authentication system
- **Theme System**: Light/dark/system theme support with SSR
- **Sidebar Navigation**: Collapsible sidebar with state persistence
- **Settings Management**: User profile and password management
- **Responsive Design**: Mobile-first approach with Tailwind CSS

### Component Patterns
- Uses Vue 3 Composition API with TypeScript
- UI components follow Reka UI patterns with proper props and slots
- Layouts use slot-based composition for flexibility
- Theme management handles both client-side and SSR scenarios

### Database
- Uses SQLite by default (`database/database.sqlite`)
- Migrations in `/database/migrations/`
- Factory and seeders available for testing

## Important Notes
- The application uses Inertia.js for SPA-like navigation without API endpoints
- Theme state is persisted in both localStorage and cookies for SSR support
- All frontend assets are processed through Vite with Laravel integration
- Uses Pest for testing with RefreshDatabase trait for feature tests