Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

rajusutra's avatar

Laravel Nova Exploration

How to create a purchase entry page, sale entry page, and product page with POS design in Nova. with a date-range picker component on the report page. and Most importantly How to build a settings page where we can set the application name and the theme of nova.

0 likes
1 reply
LaryAI's avatar
Level 58

Creating a purchase entry page, sale entry page, and product page with a POS design in Laravel Nova requires custom tools and resources. Here's a step-by-step guide to achieve this:

  1. Purchase Entry Page:
    • Create a Nova resource called Purchase.
    • Define the fields that match your purchase table schema using Nova fields.
    • Customize the layout to resemble a POS design by creating a custom tool or card. You can use Vue.js to create a custom interface.
// In app/Nova/Purchase.php

use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\BelongsTo;
use Laravel\Nova\Fields\DateTime;

class Purchase extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            BelongsTo::make('Product'),
            Text::make('Quantity'),
            Text::make('Total Cost'),
            DateTime::make('Purchased At'),
            // Add other fields as necessary
        ];
    }
}
  1. Sale Entry Page:
    • Similarly, create a Sale Nova resource.
    • Define the fields for the sales entry.
    • Use a custom tool or card for the POS design.
// In app/Nova/Sale.php

class Sale extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            BelongsTo::make('Product'),
            Text::make('Quantity'),
            Text::make('Total Sale'),
            DateTime::make('Sold At'),
            // Add other fields as necessary
        ];
    }
}
  1. Product Page:
    • Create a Product Nova resource.
    • Define the fields for the product details.
// In app/Nova/Product.php

class Product extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            Text::make('Name'),
            Text::make('Price'),
            Text::make('Stock'),
            // Add other fields as necessary
        ];
    }
}
  1. Date-Range Picker Component:
    • You can use a third-party Nova package or create a custom filter for date ranges on the report page.
    • If you're creating a custom filter, extend the Laravel\Nova\Filters\Filter class.
// In app/Nova/Filters/DateRangeFilter.php

use Laravel\Nova\Filters\Filter;
use Laravel\Nova\Http\Requests\NovaRequest;

class DateRangeFilter extends Filter
{
    // ...

    public function apply(NovaRequest $request, $query, $value)
    {
        return $query->whereBetween('created_at', [$value['start'], $value['end']]);
    }

    public function options(NovaRequest $request)
    {
        // Return any options for the filter, if necessary.
    }
}
  1. Settings Page:
    • Create a Settings Nova resource.
    • Use a package like optimistdigital/nova-settings to easily manage settings.
    • Define fields for application name, theme, and any other settings you want to manage.
// In app/Nova/Settings.php

use OptimistDigital\NovaSettings\NovaSettings;

class Settings extends NovaSettings
{
    // ...

    public function fields(Request $request)
    {
        return [
            Text::make('Application Name'),
            Text::make('Theme'),
            // Add other settings fields as necessary
        ];
    }
}

Remember to register your resources, tools, and filters with Nova in the NovaServiceProvider.

Please note that creating a POS design interface is a complex task and may require extensive custom development beyond the scope of this response. You may need to have a good understanding of Vue.js and Nova's customization capabilities to achieve the desired result.

Please or to participate in this conversation.