/examples

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:

// 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:

// 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:

x_project - Projects
x_task - Tasks
x_time_entry - Time tracking
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:

// 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

export function searchRecords(query) {
  return $cache.filter(record =>
    record.x_studio_name.toLowerCase().includes(query.toLowerCase())
  );
}

2. Add Sorting

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

export function paginate(page, pageSize) {
  const start = (page - 1) * pageSize;
  return $cache.slice(start, start + pageSize);
}

4. Add Export to CSV

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

export async function bulkUpdate(ids, fields) {
  const promises = ids.map(id => update(id, fields));
  return Promise.all(promises);
}

Tips for Success:

Start Simple

Generate basic PWA first
Test with sample data
Add features incrementally
Deploy early and often

Plan Your Models

Design Odoo model schema carefully
Include all necessary fields
Think about relationships
Consider mobile UX

Test Thoroughly

Test offline functionality
Verify sync works correctly
Check error handling
Test on real devices

Optimize Performance

Limit initial data load
Use pagination for large datasets
Lazy load images
Minimize bundle size

Deploy Confidently

Test build locally
Use staging environment
Monitor errors
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:

Choose a use case similar to your needs
Follow the implementation steps
Customize to match your requirements
Deploy and iterate

Need help? Run /help for more information!

What this command does:

Example 1: Expense Tracking App 💰

Business Need:

Odoo Model Setup:

Implementation Steps:

Key Features:

Code Customization:

Example 2: Inventory Management System 📦

Business Need:

Odoo Model Setup:

Implementation Steps:

Key Features:

Code Customization:

Example 3: Field Service CRM 🔧

Business Need:

Odoo Model Setup:

Implementation Steps:

Key Features:

Example 4: Sales Order Entry 🛒

Business Need:

Odoo Model Setup:

Implementation Steps:

Key Features:

Example 5: Multi-Model Project Management 📋

Business Need:

Multiple Models:

Implementation Steps:

Key Features:

Example 6: Custom Cache Strategy 🎯

Scenario:

Implementation:

Example 7: Migrating Existing App 🔄

Scenario:

Implementation Steps:

Common Customizations:

1. Add Search Functionality

2. Add Sorting

3. Add Pagination

4. Add Export to CSV

5. Add Bulk Operations

Tips for Success:

Start Simple

Plan Your Models

Test Thoroughly

Optimize Performance

Deploy Confidently

Example prompts to use this command:

Next Steps:

Other plugins with /examples