gh-jamshu-jamshi-marketplace-plugins-odoo-pwa-generator/commands/examples.md

Real-world usage examples and scenarios for the Odoo PWA Generator plugin.

## What this command does:
- Provides practical, real-world examples of using the plugin
- Shows complete workflows from start to finish
- Demonstrates different use cases and scenarios
- Includes code samples and best practices
- Helps users understand the plugin's capabilities

## Example 1: Expense Tracking App 💰

### Business Need:
Create a mobile-friendly app for employees to track expenses on-the-go, even without internet connection. Sync with Odoo for approval and reimbursement.

### Odoo Model Setup:
In Odoo Studio, create model `x_expense` with fields:
- `x_studio_description` (Char) - Expense description
- `x_studio_amount` (Float) - Amount spent
- `x_studio_date` (Date) - When expense occurred
- `x_studio_category` (Selection) - Meal, Travel, Hotel, Other
- `x_studio_receipt` (Binary) - Photo of receipt
- `x_studio_employee` (Many2one to res.partner) - Who spent it
- `x_studio_status` (Selection) - Draft, Submitted, Approved, Paid

### Implementation Steps:
```
1. /new-svelte-pwa
   - Project name: expense-tracker
   - Model: expense
   - Display name: Expense
   - Deployment: vercel

2. cd expense-tracker

3. /init-project
   - Install dependencies
   - Configure Odoo credentials
   - Test connection

4. Customize the UI:
   - Add category filter
   - Display total amount
   - Add receipt upload
   - Status badge colors

5. /deploy-vercel
   - Deploy to production
   - Share with team
```

### Key Features:
- ✅ Record expenses offline
- ✅ Take photos of receipts
- ✅ Categorize expenses
- ✅ Auto-sync when online
- ✅ View approval status
- ✅ Calculate monthly totals

### Code Customization:
```javascript
// Add total calculation to cache store
export const totalExpenses = derived(expenseCache, $cache => {
  return $cache.reduce((sum, exp) => sum + exp.x_studio_amount, 0);
});

// Add category filter
export function filterByCategory(category) {
  return $expenseCache.filter(e => e.x_studio_category === category);
}
```

---

## Example 2: Inventory Management System 📦

### Business Need:
Warehouse staff need to check stock levels, update quantities, and add new inventory items from mobile devices or tablets, even in areas with poor connectivity.

### Odoo Model Setup:
Create model `x_inventory` with fields:
- `x_studio_sku` (Char) - Product SKU
- `x_studio_name` (Char) - Product name
- `x_studio_quantity` (Integer) - Current stock
- `x_studio_location` (Char) - Warehouse location
- `x_studio_min_quantity` (Integer) - Reorder threshold
- `x_studio_supplier` (Many2one to res.partner) - Supplier
- `x_studio_last_restock` (Date) - Last restock date

### Implementation Steps:
```
1. /new-react-pwa
   - Project name: inventory-manager
   - Model: inventory
   - Display name: Inventory Item
   - Deployment: vercel

2. cd inventory-manager

3. /init-project

4. Add barcode scanning:
   - npm install @zxing/library
   - Add scanner component
   - Look up items by SKU

5. Add low stock alerts:
   - Filter items where quantity < min_quantity
   - Show notification badge
   - Sort by urgency

6. /deploy-vercel
```

### Key Features:
- ✅ Scan barcodes to find items
- ✅ Update quantities offline
- ✅ Low stock alerts
- ✅ Search by name or SKU
- ✅ Filter by location
- ✅ Auto-sync updates

### Code Customization:
```javascript
// Add low stock filter
const lowStockItems = useMemo(() => {
  return records.filter(item =>
    item.x_studio_quantity < item.x_studio_min_quantity
  );
}, [records]);

// Add barcode lookup
async function lookupBySKU(sku) {
  return records.find(item => item.x_studio_sku === sku);
}
```

---

## Example 3: Field Service CRM 🔧

### Business Need:
Field technicians need to view customer information, log service calls, and update job status while on-site, often without reliable internet.

### Odoo Model Setup:
Create model `x_service_call` with fields:
- `x_studio_customer` (Many2one to res.partner) - Customer
- `x_studio_issue` (Text) - Problem description
- `x_studio_status` (Selection) - Scheduled, In Progress, Completed
- `x_studio_scheduled_date` (Datetime) - When to visit
- `x_studio_technician` (Many2one to res.partner) - Assigned tech
- `x_studio_notes` (Text) - Service notes
- `x_studio_parts_used` (Char) - Parts replaced
- `x_studio_duration` (Float) - Hours spent

### Implementation Steps:
```
1. /new-vue-pwa
   - Project name: field-service-crm
   - Model: service_call
   - Display name: Service Call
   - Deployment: vercel

2. /init-project

3. Add customer details:
   - Create customer cache store
   - /add-model
     - Model: customer (use res.partner)
     - Generate UI: no (use existing)

4. Add map integration:
   - npm install @googlemaps/js-api-loader
   - Show customer locations
   - Route planning

5. Add time tracking:
   - Start/stop timer
   - Calculate duration
   - Generate timesheet

6. /deploy-vercel
```

### Key Features:
- ✅ View today's schedule
- ✅ Customer contact info
- ✅ Log service notes offline
- ✅ Track time spent
- ✅ Update job status
- ✅ View service history

---

## Example 4: Sales Order Entry 🛒

### Business Need:
Sales reps at trade shows need to take orders offline and sync them with Odoo when they get back online.

### Odoo Model Setup:
Create model `x_sales_order` with fields:
- `x_studio_customer` (Many2one to res.partner)
- `x_studio_date` (Date)
- `x_studio_items` (Text/JSON) - Line items
- `x_studio_total` (Float) - Order total
- `x_studio_status` (Selection) - Draft, Sent, Confirmed
- `x_studio_notes` (Text) - Special instructions
- `x_studio_salesperson` (Many2one to res.partner)

### Implementation Steps:
```
1. /new-svelte-pwa
   - Project name: sales-order-entry
   - Model: sales_order
   - Display name: Sales Order

2. /add-model
   - Model: customer (res.partner)
   - Add product catalog model

3. Build line item editor:
   - Add/remove products
   - Quantity and price
   - Calculate totals

4. Add customer search:
   - Autocomplete
   - Recently viewed
   - New customer form

5. /deploy-vercel
```

### Key Features:
- ✅ Search products
- ✅ Build order offline
- ✅ Calculate totals
- ✅ Customer lookup
- ✅ Sync when online
- ✅ Email confirmation

---

## Example 5: Multi-Model Project Management 📋

### Business Need:
Manage projects with tasks, time entries, and documents, all syncing with Odoo.

### Multiple Models:
1. `x_project` - Projects
2. `x_task` - Tasks
3. `x_time_entry` - Time tracking
4. `x_document` - File attachments

### Implementation Steps:
```
1. /new-svelte-pwa
   - Project name: project-manager
   - Model: project
   - Display name: Project

2. /add-model
   - Model: task
   - Generate UI: yes

3. /add-model
   - Model: time_entry
   - Generate UI: yes

4. /add-model
   - Model: document
   - Generate UI: yes

5. Add relationships:
   - Tasks belong to projects
   - Time entries belong to tasks
   - Documents belong to projects

6. Build dashboard:
   - Project overview
   - Task list by status
   - Total hours tracked
   - Recent documents

7. /deploy-vercel
```

### Key Features:
- ✅ Multiple model types
- ✅ Relationships between models
- ✅ Aggregate data (total hours)
- ✅ Complex filtering
- ✅ Dashboard views

---

## Example 6: Custom Cache Strategy 🎯

### Scenario:
Need a custom caching strategy for frequently changing data.

### Implementation:
```
1. Open existing project

2. /create-cache-store
   - Model: notification
   - Shorter cache timeout (1 minute)
   - More frequent sync (30 seconds)

3. Customize the generated store:
```

```javascript
// Shorten cache validity
const CACHE_VALIDITY = 60 * 1000; // 1 minute

// More frequent sync
const SYNC_INTERVAL = 30 * 1000; // 30 seconds

// Add real-time refresh
export function enableRealTimeSync() {
  return setInterval(() => {
    refresh();
  }, SYNC_INTERVAL);
}
```

---

## Example 7: Migrating Existing App 🔄

### Scenario:
Have an existing web app, want to add Odoo integration and offline functionality.

### Implementation Steps:
```
1. Generate reference implementation:
   /new-svelte-pwa
   - Project name: reference-app
   - Model: your_model

2. Study generated code:
   - Review odoo.js client
   - Study cache.js pattern
   - Examine API routes

3. Copy patterns to existing app:
   - Copy src/lib/odoo.js
   - Copy src/routes/api/odoo/+server.js
   - Adapt cache store to your state management

4. Test integration:
   /test-connection

5. Gradually add features:
   - Start with read-only
   - Add create functionality
   - Add update/delete
   - Add offline support

6. /deploy-vercel
```

---

## Common Customizations:

### 1. Add Search Functionality
```javascript
export function searchRecords(query) {
  return $cache.filter(record =>
    record.x_studio_name.toLowerCase().includes(query.toLowerCase())
  );
}
```

### 2. Add Sorting
```javascript
export function sortBy(field, direction = 'asc') {
  return $cache.sort((a, b) => {
    const valA = a[field];
    const valB = b[field];
    return direction === 'asc' ? valA - valB : valB - valA;
  });
}
```

### 3. Add Pagination
```javascript
export function paginate(page, pageSize) {
  const start = (page - 1) * pageSize;
  return $cache.slice(start, start + pageSize);
}
```

### 4. Add Export to CSV
```javascript
export function exportToCSV() {
  const headers = ['ID', 'Name', 'Amount', 'Date'];
  const rows = $cache.map(r => [
    r.id,
    r.x_studio_name,
    r.x_studio_amount,
    r.x_studio_date
  ]);
  // Convert to CSV and download
}
```

### 5. Add Bulk Operations
```javascript
export async function bulkUpdate(ids, fields) {
  const promises = ids.map(id => update(id, fields));
  return Promise.all(promises);
}
```

---

## Tips for Success:

### Start Simple
1. Generate basic PWA first
2. Test with sample data
3. Add features incrementally
4. Deploy early and often

### Plan Your Models
1. Design Odoo model schema carefully
2. Include all necessary fields
3. Think about relationships
4. Consider mobile UX

### Test Thoroughly
1. Test offline functionality
2. Verify sync works correctly
3. Check error handling
4. Test on real devices

### Optimize Performance
1. Limit initial data load
2. Use pagination for large datasets
3. Lazy load images
4. Minimize bundle size

### Deploy Confidently
1. Test build locally
2. Use staging environment
3. Monitor errors
4. Have rollback plan

---

## Example prompts to use this command:
- `/examples` - Show all examples
- User: "Show me real-world examples"
- User: "How do I build an expense tracker?"
- User: "Give me ideas for using this plugin"

## Next Steps:
After reviewing these examples:
1. Choose a use case similar to your needs
2. Follow the implementation steps
3. Customize to match your requirements
4. Deploy and iterate

Need help? Run `/help` for more information!