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.
Table of Contents
Step 1: Download NiceAdmin Template
The first step in setting up your Laravel jQuery POS admin template is to download the NiceAdmin 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.
Step 2: Organize Assets, Styles, and JavaScript
Once the template is downloaded, the next step in building your Laravel jQuery POS admin template is organizing all assets.
💡 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('/public/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)
}
});This structure keeps your Laravel jQuery POS admin template clean, modular, and easy to maintain as your POS system grows.
Step 3: Setup Blade Layout for POS Admin Template
Now it’s time to create a master Blade layout for your Laravel jQuery POS admin template.
Define reusable sections for the header, sidebar, and footer to ensure consistent UI across all admin pages.
This layout will serve as the foundation for all future POS pages in your Laravel jQuery POS admin template project.
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>Step 4: Setup Laravel Routes
In this step, you’ll update your Laravel routes to load views connected to the Laravel jQuery POS admin template.
Adding routes for dashboards, reports, and settings helps structure your POS application.
By defining routes properly, your Laravel jQuery POS admin template becomes fully functional for both admin and cashier users.
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');
});Step 5: Update vite.config.js
To make sure all your frontend assets compile correctly, you’ll need to configure vite.config.js for your Laravel jQuery POS admin template.
Add your template’s CSS and JavaScript files so that Vite can handle them during development and production builds.
This ensures that your Laravel jQuery POS admin template runs smoothly with optimized performance.
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,
}),
],
});Running and Testing Your Project
Open your Terminal/CMD in separate windows, go to the project’s root folder, and then run the command below:
npm run devphp artisan serveWith both commands running in their separate windows, open your web browser to the Laravel address (http://127.0.0.1:8000).
You should now see your Laravel POS with jQuery project using the NiceAdmin layout with a clean UI ready for the next features.
Layout Integration Complete
Congratulations! You’ve successfully completed the Laravel jQuery POS admin template integration.
Your Laravel project is now linked with the NiceAdmin layout, routes are configured, and assets are compiled.
With this setup, your Laravel jQuery POS admin template is ready for further customization — including adding POS features, charts, and user management.
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
This step-by-step series will guide you through building a complete Laravel jQuery POS system from scratch:
- Part 1: Install Laravel and Required Packages
Set up Laravel 12.x, jQuery, Bootstrap, and essential dependencies to get your project started. - Part 2: Integrate NiceAdmin Template into Laravel
Design a clean and responsive UI using the NiceAdmin Bootstrap template. - Part 3: Data Migration and Authentication
Implement user login, logout, and role-based access control. - Part 4: Ajax Menu Navigation and System Data (CRUD)
Create smooth navigation and manage key POS data with simple Ajax-based CRUD features. - Part 5: Build the POS Cart System with jQuery
Add products to cart, adjust quantities, and calculate totals with jQuery. - Part 6: Role-Based Access – Admin vs. Cashier
Create middleware to manage access between different user roles. - Part 7: Generate Reports and Filter Sales Data
Show daily sales, filter by date, and export reports using xlsx-populate. - Part 8: Create Graph Reports with ApexCharts
Visualize sales performance using beautiful charts on the dashboard.
