Learn how to build a custom customer portal that connects to your Odoo instance, allowing customers to view orders, invoices, and account information without direct backend access.

Overview

This example demonstrates building a customer portal that:
  • Displays customer orders and invoices from Odoo
  • Shows account balance and payment history
  • Allows customers to download invoices and documents
  • Provides a secure, custom-branded interface

Prerequisites

  • Odoo integration configured in HelloLeo
  • Customer data in your Odoo instance
  • Basic understanding of Odoo models (sale.order, account.move, res.partner)

Step-by-Step Guide

1. Set Up the Integration

First, ensure your Odoo integration is configured:
  1. Go to Project SettingsProject Integrations
  2. Select Odoo and enter your credentials
  3. Test the connection

2. Create the Main Portal Page

Start by creating a dashboard that displays customer information:
Create a customer portal page that shows:
- Customer name and account information from Odoo
- Total orders count
- Total invoices count
- Account balance
- Recent activity timeline

Use data from Odoo res.partner model for customer info,
sale.order for orders, and account.move for invoices.

3. Display Orders List

Create a page to show all customer orders:
Create an orders page that displays all orders from Odoo 
for the current customer. Show:
- Order number
- Order date
- Total amount
- Status (draft, confirmed, done, cancelled)
- Link to order details

Filter orders by the current customer's partner ID from Odoo.
Add search functionality to find orders by number or date.

4. Show Order Details

Create a detailed order view:
Create an order details page that shows:
- Order header (number, date, status)
- Customer information
- Order lines with product name, quantity, price, subtotal
- Order total and taxes
- Delivery address
- Payment status

Fetch order data from Odoo sale.order model using the order ID.

5. Display Invoices

Create an invoices page:
Create an invoices page showing all invoices from Odoo 
for the current customer. Display:
- Invoice number
- Invoice date
- Due date
- Amount
- Status (draft, posted, paid)
- Download button for PDF

Use Odoo account.move model filtered by customer partner ID.

6. Add Invoice Download

Enable customers to download invoices:
Add functionality to download invoice PDFs from Odoo.
When user clicks download button, fetch the invoice PDF 
from Odoo using the account.move report endpoint.

7. Create Account Summary

Add an account summary section:
Create an account summary component showing:
- Total outstanding invoices
- Overdue amount
- Payment history
- Next payment due date

Calculate totals from Odoo account.move records filtered 
by customer and payment status.

Example Prompts

Initial Setup

Build a customer portal with navigation menu, dashboard, 
orders page, invoices page, and account summary. Connect 
all pages to Odoo data.

Enhancements

Add filtering to the orders page to filter by status 
(draft, confirmed, done) and date range.
Add pagination to the invoices list showing 20 invoices 
per page with page navigation.
Create a responsive design that works on mobile devices 
with a collapsible navigation menu.

Key Odoo Models Used

  • res.partner - Customer information
  • sale.order - Sales orders
  • account.move - Invoices and accounting entries
  • sale.order.line - Order line items

Best Practices

  • Security: Always filter data by customer partner ID to ensure customers only see their own data
  • Performance: Use pagination for large lists of orders/invoices
  • User Experience: Show loading states while fetching data from Odoo
  • Error Handling: Display friendly error messages if Odoo connection fails

Next Steps

  • Add payment integration (Stripe) to allow customers to pay invoices
  • Create order tracking functionality
  • Add document upload for customer documents
  • Implement notifications for order status changes