# {{PROJECT_NAME}}

An offline-first Progressive Web App for {{MODEL_DISPLAY_NAME}} management with Odoo Studio backend integration.

## ✨ Features

- 📱 **Progressive Web App** - Installable on mobile and desktop
- 🔌 **Offline-first** - Works without internet connection
- 🔄 **Auto-sync** - Background synchronization with Odoo
- 💾 **Smart caching** - localStorage + IndexedDB for optimal performance
- 🎨 **Responsive UI** - Works on all devices
- ⚡ **Fast** - Instant UI updates with optimistic rendering

## 🚀 Quick Start

### Prerequisites

- Node.js 18+ installed
- Odoo Studio account with API access
- Custom Odoo model created: `x_{{MODEL_NAME}}`

### Installation

1. Clone this repository:
   ```bash
   git clone <repository-url>
   cd {{PROJECT_NAME}}
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Configure environment:
   ```bash
   cp .env.example .env
   ```

4. Edit `.env` with your Odoo credentials:
   ```env
   ODOO_URL=https://your-instance.odoo.com
   ODOO_DB=your-database-name
   ODOO_USERNAME=your-username
   ODOO_API_KEY=your-api-key
   ODOO_PRIMARY_MODEL=x_{{MODEL_NAME}}
   ```

5. Start development server:
   ```bash
   npm run dev
   ```

6. Open [http://localhost:5173](http://localhost:5173)

## 🔧 Odoo Studio Setup

### Create Custom Model

1. Log into your Odoo instance
2. Navigate to **Studio**
3. Create a new model: `x_{{MODEL_NAME}}`
4. Add these recommended fields:
   - `x_name` (Char) - Required - Record name
   - `x_studio_description` (Text) - Description
   - `x_studio_date` (Date) - Date field
   - `x_studio_value` (Float) - Numeric value
   - Add more custom fields as needed with `x_studio_` prefix

### Get API Credentials

1. Go to **Settings** → **Users & Companies** → **Users**
2. Select your user
3. Click **Generate API Key**
4. Copy the key and add to `.env` file

## 📦 Build & Deployment

### Build for Production

```bash
npm run build
```

### Deploy to Vercel

```bash
npm install -g vercel
vercel
```

Set environment variables in Vercel dashboard:
- `ODOO_URL`
- `ODOO_DB`
- `ODOO_USERNAME`
- `ODOO_API_KEY`
- `ODOO_PRIMARY_MODEL`

### Deploy to GitHub Pages

1. Add secrets to GitHub repository:
   - `ODOO_URL`, `ODOO_DB`, `ODOO_USERNAME`, `ODOO_API_KEY`, `ODOO_PRIMARY_MODEL`

2. Enable GitHub Pages in repository settings:
   - Source: GitHub Actions

3. Push to main branch - auto-deploys via GitHub Actions

### Deploy to Cloudflare Pages

```bash
npm run build
wrangler pages publish build
```

## 🏗️ Architecture

This app follows a three-layer architecture:

```
Frontend Component
    ↓
Cache Store (Svelte Store)
    ↓
Odoo API Client (Frontend)
    ↓
Server Route (/api/odoo)
    ↓
Odoo JSON-RPC
```

### Key Features:

- **Smart Caching**: Loads from cache instantly, syncs in background
- **Incremental Sync**: Only fetches new records since last sync
- **Offline Queue**: Saves changes locally when offline, syncs when online
- **PWA**: Service worker caches all assets for offline use

See `CLAUDE.md` for detailed architecture documentation.

## 🛠️ Development

### Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run check` - Type check

### Project Structure

```
{{PROJECT_NAME}}/
├── src/
│   ├── lib/
│   │   ├── odoo.js           # Odoo API client
│   │   ├── db.js             # IndexedDB manager
│   │   ├── utils.js          # Utility functions
│   │   └── stores/
│   │       └── cache.js      # Smart cache store
│   ├── routes/
│   │   ├── +layout.svelte    # Root layout
│   │   ├── +page.svelte      # Add record form
│   │   ├── list/+page.svelte # List all records
│   │   └── api/odoo/+server.js # Server API proxy
│   └── app.html              # HTML template
├── static/
│   ├── manifest.json         # PWA manifest
│   ├── icon-192.png          # App icon 192x192
│   └── icon-512.png          # App icon 512x512
├── .env                      # Environment variables (gitignored)
├── .env.example              # Environment template
├── svelte.config.js          # SvelteKit configuration
├── vite.config.js            # Vite + PWA configuration
└── package.json              # Dependencies
```

## 📝 Adding Fields

To add custom fields to your model:

1. Add field in Odoo Studio (use `x_studio_` prefix)
2. Update `src/lib/stores/cache.js` - add field to `fields` array
3. Update `src/routes/+page.svelte` - add form input
4. Update `src/routes/list/+page.svelte` - display field

## 🐛 Troubleshooting

### "Authentication failed"
- Verify `ODOO_API_KEY` is correct
- Check `ODOO_USERNAME` matches your Odoo user
- Ensure API access is enabled in Odoo

### "Model not found"
- Verify model name uses `x_` prefix: `x_{{MODEL_NAME}}`
- Check model exists in Odoo Studio
- Ensure model is published

### Offline mode not working
- Check service worker is registered (DevTools → Application)
- Verify PWA manifest is loaded
- Clear browser cache and reload

### Data not syncing
- Check browser console for errors
- Verify internet connection
- Check Odoo API is accessible

## 📚 Learn More

- [SvelteKit Documentation](https://kit.svelte.dev/)
- [Odoo API Documentation](https://www.odoo.com/documentation/)
- [PWA Guide](https://web.dev/progressive-web-apps/)

## 📄 License

MIT

## 🤝 Contributing

Contributions welcome! Please open an issue or PR.

---

**Generated with [Odoo PWA Generator](https://github.com/jamshid/odoo-pwa-generator)** 🚀