InventoryTracker with Order Portal

We will continue with the inventory tracker app.

We will add following functionality

• Dashboard to view Order Stats
• Reports

Content

• Models
• Routes
• Dashboard
• Reports
• Profile
• View Code
• Next Steps

Models

App has for models

• Catalog
• Inventory
• Order
• Item

App also has one view defined

• Order Stats

For this tutorial, we will be using Order Stats view.

Order Stats

Order Stats view aggregates order stats. It provides order count by status.

If you are not in Visual Editor, use following

• Select Editor Tab
• Select Inventory Tracker App from List of Apps
• Select Models and explore Order Stats

Routes

InventoryTracker App so far has following routes

• Catalog
• Inventory
• Order

We will be adding routes for Dashboard, Reports and Profile.

Dashboard

Dashboard is used to display aggregate data and KPIs. For this tutorial, we will display Order Stats.

In Visual Editor, click Add Route

Enter following

Template: Select > 'Dashboard'
Label: 'Dashboard'

Template: Select > 'Dashboard'
Label: 'Dashboard'

This will add new Dashboard route and display Dashboard view. On the view, click Add Stats.

This will open Add Stats for Model dialog, enter following:

Model: Select > 'Order Stats'
Stat Data Field: Select > 'Status Count'
Stat Label Field: Select > 'Status'
Label: 'Order Stats'

Model: Select > 'Order Stats'
Stat Data Field: Select > 'Status Count'
Stat Label Field: Select > 'Status'
Label: 'Order Stats'

click Save. This will add Order Stats stat list panel. Alternatively, you can also drag Stats component from Component panel.

Next click Add Chart. This will open Add Chart for Model dialog, enter following:

Model: Select > 'Order Stats'
Chart Type: Select > 'Bar'
Chart Data Field: Select > 'Status Count'
Chart Label Field: Select > 'Status'
Label: Order Stats

Model: Select > 'Order Stats'
Chart Type: Select > 'Bar'
Chart Data Field: Select > 'Status Count'
Chart Label Field: Select > 'Status'
Label: Order Stats

click Save. This will add Order Stats chart panel. Alternatively, you can also drag Chart component from Component panel.

Click on Preview and select Dashboard tab in navigation bar on left. You should stats for pending order, fulfilled orders.

Reports

In Visual Editor, click Add Route

Enter following

Template: Select > 'Report'
Label: 'Report'

Template: Select > 'Report'
Label: 'Report'

This will add new Report list route and display Report list view. On the view, click Add Report.

This will open Add Report dialog, enter following:

Label: 'Order Status'
Description: 'List of order status and count for each.'
Model: Select > 'Order Stats'
Type: Select > 'Grid'

Label: 'Order Status'
Description: 'List of order status and count for each.'
Model: Select > 'Order Stats'
Type: Select > 'Grid'

click Save. This will create Order Status report route and display report grid view.

:build: Parameters can be used to define various parameters used to filter report. Just drag field from Fields panel and set appropriate type for the dropped field.

Click on Preview and select Report tab in navigation bar on left. Select Order Status report and then View to display report.

Profile

In Visual Editor, click Add Route

Enter following

Template: Select > 'Profile'
Label: 'Profile'

Template: Select > 'Profile'
Label: 'Profile'

This will add new Profile route and display Profile view. Profile route has actions to update app user information as well as supports photo upload.

Click on Preview and select profile on the navigation bar at bottom.

You now have a working Inventory Tracker app with Dashboard, Report and Profile!

Export Code

Click on Export Code, to generate codebase for the app.

This will open Export Code dialog. Enter following

Version: 1.0.0

Version: 1.0.0

Click Export Code button. This will start code export. Once completed, select Code tab and view generated code

• \prisma\schema.prisma to view generated Prisma Schema
• \app\models\orderStats.ts to view model details
• \app\models\orderStats.server.ts to view Prisma aggregate functionality
• \app\routes\__app\dashboard.tsx route to view dashboard route and loader to load initial data
• \app\routes\__app\dashboard\orderStats.tsx route to view loader for order stats
• \app\routes\__app\report.tsx route to view loader for report list
• \app\routes\__app\report\orderStats.tsx route to view loader for order stats
• \app\routes\__app\profile.tsx route to view loader and actions for Profile route.

Also check out various views.

click on Download Code to continue development in local editor!

Next Steps

Continue by adding Kanban board with integrated order workflow to model employee ordering process. ->