laravel jquery pos admin template

Laravel jQuery POS Tutorial – Part 2/8: Integrate NiceAdmin Template

Introduction

In this Laravel jQuery POS admin template tutorial, you’ll integrate the stunning NiceAdmin layout to give your POS app a clean and professional interface.

Now it’s time to make our app visually appealing and user-friendly. In this part, we’ll integrate the NiceAdmin Bootstrap 5 template into our Laravel project to build a clean, modern UI.

By the end of this tutorial, you’ll have a reusable layout with a sidebar, header, and main content area—forming the frontend foundation of your POS system.

Download the NiceAdmin Template for Laravel jQuery POS Admin Template

To integrate the NiceAdmin template into your Laravel project, start by downloading it from the BootstrapMade. Once downloaded, you can copy the necessary asset files—such as JavaScript, CSS, fonts, and images—into your Laravel project.

You can either use the full template as-is or customize it by removing sections you don’t need. If you prefer, you can follow the step-by-step instructions in this tutorial to use only the essential assets required for our Laravel POS with jQuery system.

Organize Assets, Styles, and JavaScript

💡 Tip: To ensure the project loads smoothly without broken images, you can download this default image and place it inside your Laravel project’s PROJECT_ROOT/public/ folder. This helps prevent errors when no uploaded images are available yet.

Place downloaded CSS files from NiceAdmin (like style.css) or just download from here to place into resources/css.

Replace the contents of resources/css/app.css with the code below. If the file doesn’t exist yet, please create it.

.form-label {
    margin-bottom: 0px !important;
}

form .required label:after {
    content: " *";
    color: red;
    font-weight: bold;
}

.btn-close {
    width: 3rem;
    height: 2rem;
    padding: 0px;
}

.modal-content {
    background: whitesmoke;
}

.table tbody tr {
    vertical-align: middle;
}

.form-check-input {
    border-color: #6e6e6e;
}

.form-switch .form-check-input {
    width: 3em;
    height: 1.5em;
}

.form-check-input[type=checkbox]:indeterminate.permission,
.form-check-input:checked.permission {
    background-color: green !important;
    border-color: green !important;
}

.form-check-input[type=checkbox]:indeterminate#permission,
.form-check-input:checked#permission {
    background-color: red !important;
    border-color: red !important;
}

.pagetitle {
    margin-bottom: 1rem;
}

.bi-sort-alpha-down-alt,
.bi-sort-alpha-down,
.bi-arrow-down-up {
    font-size: 12px;
}

.table>:not(caption)>*>* {
    padding: 0.5rem 1rem !important;
}

span.menu-item {
    background: darkslateblue !important;
    color: white !important;
    border-color: white !important;
    font-size: 18px;
}

span.active {
    background: #b02a37 !important;
    color: white !important;
    border-color: white !important;
    font-size: 18px;
}

.loading {
    background: lightgoldenrodyellow url('./images/processing.gif') no-repeat center 65%;
    height: 80px;
    width: 100px;
    position: fixed;
    border-radius: 4px;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -50px;
    z-index: 2000;
    display: none;
}

Replace the contents of resources/js/app.js with the code below. If the file doesn’t exist yet, please create it.

// Laravel POS With jQuery @ https://laravelcenter.com
import './bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.min.css';
import * as bootstrap from 'bootstrap';
import '../css/niceadmin.css';
import '../css/app.css';
import jQuery from 'jquery';
window.bootstrap = bootstrap;
window.$ = jQuery;

document.addEventListener('DOMContentLoaded', function () {
    $("body").show();
    // Easy selector helper function
    const select = (el, all = false) => {
        el = el.trim()
        if (all) {
            return [...document.querySelectorAll(el)]
        } else {
            return document.querySelector(el)
        }
    }

    //   Easy event listener function
    const on = (type, el, listener, all = false) => {
        if (all) {
            select(el, all).forEach(e => e.addEventListener(type, listener))
        } else {
            select(el, all).addEventListener(type, listener)
        }
    }

    //  Easy on scroll event listener 
    const onscroll = (el, listener) => {
        el.addEventListener('scroll', listener)
    }

    // Sidebar toggle
    if (select('.toggle-sidebar-btn')) {
        on('click', '.toggle-sidebar-btn', function (e) {
            select('body').classList.toggle('toggle-sidebar')
        })
    }

    //    Navbar links active state on scroll
    let navbarlinks = select('#navbar .scrollto', true)
    const navbarlinksActive = () => {
        let position = window.scrollY + 200
        navbarlinks.forEach(navbarlink => {
            if (!navbarlink.hash) return
            let section = select(navbarlink.hash)
            if (!section) return
            if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
                navbarlink.classList.add('active')
            } else {
                navbarlink.classList.remove('active')
            }
        })
    }
    window.addEventListener('load', navbarlinksActive)
    onscroll(document, navbarlinksActive)

    //   Toggle .header-scrolled class to #header when page is scrolled
    let selectHeader = select('#header')
    if (selectHeader) {
        const headerScrolled = () => {
            if (window.scrollY > 100) {
                selectHeader.classList.add('header-scrolled')
            } else {
                selectHeader.classList.remove('header-scrolled')
            }
        }
        window.addEventListener('load', headerScrolled)
        onscroll(document, headerScrolled)
    }
});

Setup Blade Layout for Laravel jQuery POS Admin Template Integration

Replace the contents of resources/views/layout/admin.blade.php with the code below. If the file doesn’t exist yet, please create it.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
{{-- Laravel POS With jQuery @ https://laravelcenter.com --}}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/png" href="images/favicon.png">
    <title>{{ env('APP_NAME') }}</title>
    <!-- Google Fonts -->
    <link href="https://fonts.gstatic.com" rel="preconnect">
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
        rel="stylesheet">
    @vite('resources/js/app.js')
</head>

<body style="display: none">
    {{-- Header Menu --}}
    <header id="header" class="header fixed-top d-flex align-items-center">

        <div class="d-flex align-items-center justify-content-between">
            <a href="{{ url('/') }}" class="logo d-flex align-items-center">
                <img src="images/logo.png" alt="">
            </a>
            <i class="bi bi-list toggle-sidebar-btn"></i>
        </div>

        <nav class="header-nav ms-auto">
            <ul class="d-flex align-items-center">
                <li class="d-none d-md-inline-block form-inline ms-auto nav-item dropdown me-5">
                    <i class="bi bi-alarm-fill text-secondary pe-2"></i>
                    <span class="text-secondary">{{ date('d-M-Y H:i:s') }}</span>
                </li>
                <li class="nav-item dropdown pe-3">
                    <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#"
                        data-bs-toggle="dropdown">
                        <i class="bi bi-person-fill" style="font-size: 35px;"></i>
                        <span class="d-none d-md-block dropdown-toggle ps-2">Admin</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
                        <li>
                            <button class="dropdown-item d-flex align-items-center"
                                onclick="ajaxPopup(`{{ url('user/change-password') }}`)">
                                <i class="bi bi-shield-lock"></i>
                                <span>Change Password</span>
                            </button>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <form method="post" action="{{ url('./user/logout') }}">
                                @csrf
                                <button type="submit" class="dropdown-item d-flex align-items-center">
                                    <i class="bi bi-box-arrow-right"></i>
                                    <span>Sign Out</span>
                                </button>
                            </form>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

    </header>

    {{-- Sidebar --}}
    <aside id="sidebar" class="sidebar">
        <ul class="sidebar-nav" id="sidebar-nav">
            <li class="nav-item">
                <a href="#dashboard" class="nav-link collapsed">
                    <i class="bi bi-speedometer2"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="nav-heading">Main Data</li>
            <li class="nav-item">
                <a href="#table" class="nav-link collapsed">
                    <i class="bi bi-grid-3x3-gap"></i>
                    <span>Table</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#product" class="nav-link collapsed">
                    <i class="bi bi-list-ul"></i>
                    <span>Product</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#product-category" class="nav-link collapsed">
                    <i class="bi bi-grid"></i>
                    <span>Product Category</span>
                </a>
            </li>
            <li class="nav-heading">Operation</li>
            <li class="nav-item">
                <a href="#balance-adjustment" class="nav-link collapsed">
                    <i class="bi bi-coin"></i>
                    <span>Balance Adjustment</span>
                </a>
            </li>
            <li class="nav-heading">Report</li>
            <li class="nav-item">
                <a href="#report/sale-summary" class="nav-link collapsed">
                    <i class="bi bi-graph-up-arrow"></i>
                    <span>Sale Summary</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#report/product-summary" class="nav-link collapsed">
                    <i class="bi bi-clipboard-data"></i>
                    <span>Product Summary</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#report/sale-history" class="nav-link collapsed">
                    <i class="bi bi-clock-history"></i>
                    <span>Sale History</span>
                </a>
            </li>
            <li class="nav-heading">System Setting</li>
            <li class="nav-item">
                <a href="#user" class="nav-link collapsed">
                    <i class="bi bi-people"></i>
                    <span>System User</span>
                </a>
            </li>
        </ul>
    </aside>
    <main id="main" class="main">
        <div id="content">
            <div class="pagetitle">
                <h1>Dashboard</h1>
            </div>
        </div>
    </main>
</body>

</html>

Update Routes in Laravel jQuery POS Admin Template Structure

Replace the contents of routes/web.php with the code below

<?php
// Laravel POS With jQuery @ https://laravelcenter.com 
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('layout.admin');
});

Update Vite Config for Laravel jQuery POS Admin Template

Replace the contents of vite.config.js with the code below

// Laravel POS With jQuery @ https://laravelcenter.com
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Compile Assets for Laravel jQuery POS Admin Template Styling

Run the following command to compile your assets:

npm run dev

Use <strong>npm run build</strong> for production.

Once compiled, visit:

http://laravel-jquery-pos

You should now see your Laravel POS with jQuery project using the NiceAdmin layout with a clean UI ready for the next features.

laravel jquery pos admin template

Laravel jQuery POS Admin Template – Layout Integration Complete

Great job! You’ve now successfully integrated the NiceAdmin Bootstrap template into your Laravel POS with jQuery project. Your system now has a modern, responsive UI layout with a clean header, sidebar, content area, and footer—ready to build real functionality on top.

In the next tutorial, we’ll move on to data migration and authentication. You’ll create the necessary database tables, models, and controllers, add dummy data, and set up a basic login system to manage users like admin and cashier.

👉 Continue to Part 3: Data Migration and Authentication

Laravel jQuery POS Tutorial for Beginners Series

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending now

Laravel jQuery POS Chart Reports
Laravel jQuery POS Tutorial – Part 8/8 (END): Graph Reports with ApexCharts
Getting Started with Laravel Simple Tips for Beginners
Getting Started with Laravel: Simple Tips for Beginners
Laravel CRUD with Image Upload, Search, Sort, and Pagination – Full Guide
Laravel CRUD with Image Upload, Search, Sort, and Pagination – Full Guide
Laravel Ajax CRUD with Image Upload, Search, Sort, and Pagination
Laravel Ajax CRUD with Image Upload, Search, Sort, and Pagination – Full Guide