Real-world usage examples and scenarios for the Odoo PWA Generator plugin.
Provides real-world examples and implementation scenarios for Odoo PWA Generator plugin
/plugin marketplace add jamshu/jamshi-marketplace/plugin install odoo-pwa-generator@jamshi-marketplaceReal-world usage examples and scenarios for the Odoo PWA Generator plugin.
Create a mobile-friendly app for employees to track expenses on-the-go, even without internet connection. Sync with Odoo for approval and reimbursement.
In Odoo Studio, create model x_expense with fields:
x_studio_description (Char) - Expense descriptionx_studio_amount (Float) - Amount spentx_studio_date (Date) - When expense occurredx_studio_category (Selection) - Meal, Travel, Hotel, Otherx_studio_receipt (Binary) - Photo of receiptx_studio_employee (Many2one to res.partner) - Who spent itx_studio_status (Selection) - Draft, Submitted, Approved, Paid1. /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
// 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);
}
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.
Create model x_inventory with fields:
x_studio_sku (Char) - Product SKUx_studio_name (Char) - Product namex_studio_quantity (Integer) - Current stockx_studio_location (Char) - Warehouse locationx_studio_min_quantity (Integer) - Reorder thresholdx_studio_supplier (Many2one to res.partner) - Supplierx_studio_last_restock (Date) - Last restock date1. /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
// 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);
}
Field technicians need to view customer information, log service calls, and update job status while on-site, often without reliable internet.
Create model x_service_call with fields:
x_studio_customer (Many2one to res.partner) - Customerx_studio_issue (Text) - Problem descriptionx_studio_status (Selection) - Scheduled, In Progress, Completedx_studio_scheduled_date (Datetime) - When to visitx_studio_technician (Many2one to res.partner) - Assigned techx_studio_notes (Text) - Service notesx_studio_parts_used (Char) - Parts replacedx_studio_duration (Float) - Hours spent1. /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
Sales reps at trade shows need to take orders offline and sync them with Odoo when they get back online.
Create model x_sales_order with fields:
x_studio_customer (Many2one to res.partner)x_studio_date (Date)x_studio_items (Text/JSON) - Line itemsx_studio_total (Float) - Order totalx_studio_status (Selection) - Draft, Sent, Confirmedx_studio_notes (Text) - Special instructionsx_studio_salesperson (Many2one to res.partner)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
Manage projects with tasks, time entries, and documents, all syncing with Odoo.
x_project - Projectsx_task - Tasksx_time_entry - Time trackingx_document - File attachments1. /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
Need a custom caching strategy for frequently changing data.
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);
}
Have an existing web app, want to add Odoo integration and offline functionality.
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
export function searchRecords(query) {
return $cache.filter(record =>
record.x_studio_name.toLowerCase().includes(query.toLowerCase())
);
}
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;
});
}
export function paginate(page, pageSize) {
const start = (page - 1) * pageSize;
return $cache.slice(start, start + pageSize);
}
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
}
export async function bulkUpdate(ids, fields) {
const promises = ids.map(id => update(id, fields));
return Promise.all(promises);
}
/examples - Show all examplesAfter reviewing these examples:
Need help? Run /help for more information!