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!