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:

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

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:

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

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!