Introduction

Item Name : DreamsPOS - POS & Inventory Management Admin Dashboard Template
Item Version : v2.2.2
Author : Dreams Technologies
Support via email: [email protected]
Support via themeforest: Take me there

DreamsPOS - POS & Inventory Management Admin Dashboard Template

A point of sale admin template can help organize and track inventory in a business. The template includes fields for items, quantities, prices, and descriptions. It also includes fields for customer information.

Contact Support Create Support ticket

Requirements

System Overview

The Dreams POS .NET template is built with .NET 9.0 and follows modern web development practices. It uses ASP.NET Core MVC for the web framework and supports OpenAPI for API documentation. The application is designed to be scalable, maintainable, and follows best practices for enterprise application development.

Core Technologies

Backend Framework

ASP.NET Core MVC

Frontend Framework

Bootstrap 5.3.8

.NET Runtime

.NET 9.0

System Requirements

.NET SDK

.NET 9.0 SDK or higher

Web Server

IIS, Kestrel, or any compatible web server

Database (Optional)

SQL Server, SQLite, PostgreSQL, or MySQL

Operating System

Windows, Linux, or macOS

Development Tools

IDE

Visual Studio 2022 or VS Code

.NET CLI

Command-line interface

Version Control

Git

Important Note

For production deployment, it's recommended to use IIS on Windows or a reverse proxy like Nginx/Apache on Linux. Ensure the .NET 9.0 runtime is installed on the production server. You can publish the application using dotnet publish command or Visual Studio's publish feature.

Features

Core Features

Product Management

Seamless product browsing with dynamic search, smart filters, and visually rich catalogs.

Inventory Control

Real-time stock tracking, batch management, and low-stock notifications.

Billing & Invoices

Generate professional invoices, manage payments, and track sales history.

Point of Sale

Fast checkout process with barcode scanning, discounts, and multiple payment options.

Supplier & Purchase Management

Manage suppliers, track purchase orders, and maintain procurement records.

Reports & Analytics

Detailed sales, purchase, and inventory reports with real-time business insights.

Technical Features

ASP.NET Core MVC

Modern web framework with Model-View-Controller pattern

Razor Views

Powerful Razor templating engine for dynamic HTML rendering

Configuration System

Environment-based appsettings.json configuration

Security & Middleware

HTTPS enforcement, authorization, and custom middleware

Custom URL Helpers

Extended URL helpers for active routes and base paths

Flexible Routing

Attribute routing with path prefix middleware support

View Layouts

Layout pages with _ViewStart and _ViewImports

Static Files

Built-in static file serving for assets

High Performance

Optimized with .NET 9.0 runtime

UI/UX Features

Modern Design

Creative and contemporary UI

Responsive Bootstrap 5.3.8

Mobile-first responsive design

SCSS Styling

Advanced CSS preprocessing

Font Awesome & Tabler

Comprehensive icon libraries

Easy Customization

Color and font customization

W3C Validated

Cross-browser compatibility

.NET Project Structure

Project Overview

This .NET project follows the standard ASP.NET Core MVC directory structure, separating controllers, views, middleware, extensions, and static assets for better organization and maintainability.

template/ (Root Project)

Controllers/ (MVC Controllers)

PagesController.cs (Main controller)

Extensions/ (Helper Extensions)

UrlHelperExtensions.cs (URL helper methods)

Middleware/ (Custom Middleware)

PathPrefixMiddleware.cs (Path prefix handler)

Properties/ (Project Properties)

launchSettings.json (Launch configuration)

views/ (Razor Views)

_ViewImports.cshtml (View imports)

_ViewStart.cshtml (View start)

Shared/ (Shared layouts)

base.cshtml (Main layout)

auth-base.cshtml (Auth layout)

Partials/ (Partial views)

dashboard/ (Dashboard views)

layouts/ (Layout variations)

pages/ (Page views)

*.cshtml (Other view files)

wwwroot/ (Static Files)

assets/ (Asset files)

css/

fonts/

js/

img/

plugins/

Program.cs (Application entry point)

template.csproj (Project file)

template.sln (Solution file)

appsettings.json (Configuration)

appsettings.Development.json (Dev configuration)

template.http (HTTP test file)

Legend

Directories

Html Files

JavaScript Files

CSS Files

Git Files

SCSS Files

Node.js Files

Image Files

C# Files

Other Files

DotNet Template Structure

`views/Shared/base.cshtml`: Main Layout Template

The template follows Razor templating engine syntax and is organized in a modular way for better maintainability using partial views.

    
@{
    var html_attributes = (ViewData["HTMLAttributes"] as string) ?? "";
    var html_class = (ViewData["HTMLClass"] as string) ?? "";
    
    // Get the current page name from the request path
    var path = Context?.Request?.Path.Value ?? string.Empty;
    var fileName = System.IO.Path.GetFileName(path);
    var pageName = string.IsNullOrEmpty(fileName) ? "index" : System.IO.Path.GetFileNameWithoutExtension(fileName);
    var route = pageName.ToLowerInvariant();
    
    // Determine the body class based on the page route
    var body_class = route switch
    {
        "layout-horizontal" => "menu-horizontal",
        "layout-hovered" => "mini-sidebar expand-menu",
        "layout-boxed" => "mini-sidebar layout-box-mode",
        "layout-rtl" => "layout-mode-rtl",
        "pos" or "pos-2" or "pos-3" or "pos-4" or "pos-5" => "pos-page",
        _ => ""
    };
    
    ViewData["BodyClass"] = body_class;
}

<!DOCTYPE html>
<html lang="en" class="@html_class" @Html.Raw(html_attributes)>
<head>
    @{
        var pathBase = Context?.Request?.PathBase.Value ?? string.Empty;
    }
    <meta name="base-path" content="@pathBase" />
    @await Html.PartialAsync("~/Views/Shared/Partials/_TitleMeta.cshtml")
    @RenderSection("styles", false)
    @await Html.PartialAsync("~/Views/Shared/Partials/_HeadCss.cshtml")
</head>

<body class="@body_class">
    @await Html.PartialAsync("~/Views/Shared/Partials/main-wrapper.cshtml")
    @await Html.PartialAsync("~/Views/Shared/Partials/_Topbar.cshtml")
    @await Html.PartialAsync("~/Views/Shared/Partials/_Sidenav.cshtml")
    @await Html.PartialAsync("~/Views/Shared/Partials/horizontal-sidebar.cshtml")
    @await Html.PartialAsync("~/Views/Shared/Partials/twocolumn-sidebar.cshtml")

    @RenderBody()

    @await Html.PartialAsync("~/Views/Shared/Partials/modal-popup.cshtml")
    @await Html.PartialAsync("~/Views/Shared/Partials/_FooterScripts.cshtml")
    @await Html.PartialAsync("~/Views/Shared/Partials/theme-settings.cshtml")
    @RenderSection("scripts", required: false)
</body>
</html>

`views/Shared/auth-base.cshtml`: Authentication Layout

This layout is specifically designed for authentication pages (login, register, password reset, etc.) that don't require the main navigation menu.

It provides a clean, focused interface without the main navigation elements.

    
@{
    var html_attributes = (ViewData["HTMLAttributes"] as string) ?? "";
    var html_class = (ViewData["HTMLClass"] as string) ?? "";
    
    // Get the current page name from the request path
    var path = Context?.Request?.Path.Value ?? string.Empty;
    var fileName = System.IO.Path.GetFileName(path);
    var pageName = string.IsNullOrEmpty(fileName) ? "index" : System.IO.Path.GetFileNameWithoutExtension(fileName);
    var route = pageName.ToLowerInvariant();
    
    // Determine the body class based on the page route
    var body_class = route switch
    {
        "signin" => "account-page",
        "register" => "account-page",
        "forgot-password" => "account-page",
        "reset-password" => "account-page",
        _ => ""
    };
    
    ViewData["BodyClass"] = body_class;
}

<!DOCTYPE html>
<html lang="en" class="@html_class" @Html.Raw(html_attributes)>
<head>
    @{
        var pathBase = Context?.Request?.PathBase.Value ?? string.Empty;
    }
    <meta name="base-path" content="@pathBase" />
    @await Html.PartialAsync("~/Views/Shared/Partials/_TitleMeta.cshtml")
    @RenderSection("styles", false)
    @await Html.PartialAsync("~/Views/Shared/Partials/_HeadCss.cshtml")
</head>

<body class="@body_class">
    @RenderBody()

    @RenderSection("scripts", required: false)
    @await Html.PartialAsync("~/Views/Shared/Partials/_BasePathScript.cshtml")
</body>
</html>

`views/dashboard/index.cshtml`: Content Page Template

This approach provides clean separation of concerns and maintains consistent layout across all pages while allowing flexible content.

    
@{
    ViewData["Title"] = "Dashboard";
    Layout = "~/views/Shared/base.cshtml";
}   

@section Styles {
    <!-- Page-specific styles -->
}

<div class="page-wrapper">
    <div class="content">
        
        <!-- Your specific page content here -->
        <h1>Welcome, Admin</h1>
        <p>You have <span class="text-primary fw-bold">200+</span> Orders, Today</p>
        
    </div>
</div>

@section scripts {
    <!-- Page-specific scripts -->
}

ASP.NET Core Razor Template System

This project uses ASP.NET Core's built-in Razor templating engine. Key features include:

Layout pages using Layout = "~/views/Shared/base.cshtml" in _ViewStart.cshtml or individual views
Dynamic content rendering with @variable and @(expression) syntax
Reusable components via @await Html.PartialAsync("~/Views/Shared/Partials/_Topbar.cshtml")
View sections with @RenderSection("styles", false) and @section scripts { }
Support for C# code blocks with @{ }, loops, conditionals, and LINQ queries
Tag helpers for form elements, links, and more with @addTagHelper

Installation Guide

Follow these steps to set up the DreamsPOS .NET application on your local development environment. This guide covers .NET SDK installation, project setup, and running the application.

Installation Steps

1

Install .NET SDK

Ensure you have the .NET 9.0 SDK or higher installed on your system:

.NET 9.0 SDK or higher

Visual Studio 2022 or VS Code (Optional)

Download .NET SDK:
https://dotnet.microsoft.com/download

Verify installation by running:

dotnet --version

2

Navigate to Project Directory

Open a terminal/command prompt and navigate to the template directory:

cd template

3

Restore NuGet Packages

Restore the project dependencies using the .NET CLI:

dotnet restore

Note: This will download all NuGet packages specified in template.csproj.

4

Configure Base Path (Production)

If you need to deploy under a subdirectory, update the base path in Program.cs:

$basePath = "/dotnet/template/";

Note: For local development, you can set this to "/" or leave it as is. Update it only for production deployment under a subdirectory.

5

Build the Project

Build the project to ensure everything compiles correctly:

dotnet build

6

Run the Application

Start the development server using the .NET CLI:

dotnet run

Access the application at:
http://localhost:7000
(If base path is configured: http://localhost:7000/dotnet/template/)

Alternative Methods:

Visual Studio: Press F5 or click the Run button
VS Code: Use the Run and Debug panel (F5)
Watch Mode: Use dotnet watch run for automatic reload on file changes

Sass/SCSS with Gulp

Overview

This .NET project uses Gulp with gulp-sass (Dart Sass) for processing SCSS files located in webroot/assets/scss/. The output CSS is generated inside webroot/assets/css/ with automatic prefixing and minified development builds.

Prerequisites

Node.js Installation

Ensure you have Node.js installed on your system:

Download Node.js:
https://nodejs.org/en/download/

Installation Steps

1

Install NPM Package Manager

Install the latest version of npm package manager:

npm install -g npm@latest

Note: This ensures you have the latest npm version

2

Install Project Dependencies

In your .NET project root (where package.json exists), install all dependencies:

npm install

This will install Gulp and required SCSS build packages listed in package.json.

3

Run Development Build

To compile SCSS files into CSS during development, run:

npm run dev

Generates style.css in webroot/assets/css/

Compilation Methods

Method	Description	Gulp Command	npm Script Command
One-time Compilation (Production)	Compile SCSS files once for production with minified output	`Gulp build`	`npm run build`
Watch Mode (Development)	Automatically recompile on file changes for real-time development	`Gulp watch`	`npm run watch`
Run Without Minified (Development)	Compile SCSS without generating source maps, ideal for development	`Gulp`	`npm run dev`

Best Practices

Development

Use npm run watch for real-time updates
Keep SCSS partials modular and organized
Store all styles under webroot/assets/scss/

Production

Run npm run build before deployment
Use minified CSS for faster load times
Clean unused SCSS before pushing live

Dynamic Title Feature

Overview

Dreams POS implements a simple and flexible dynamic title system using ASP.NET Core's ViewData. Each page can set its own title, which is then automatically formatted and displayed in the browser tab. This approach gives you full control over page titles while maintaining consistency across the application.

File Location: views/Shared/Partials/_TitleMeta.cshtml
Contains the title rendering logic that formats and displays page titles

Key Features

Simple Title Setting

Set titles using ViewData in each Razor view

Automatic Formatting

Titles are automatically formatted with suffix

Consistent Format

All titles follow the same format pattern

Razor Integration

Easily accessible via ViewData in Razor views

Default Fallback

Provides default title if none is specified

Professional Appearance

Consistent and polished title formatting

Usage Examples

index → "Admin Dashboard"
account-statement → "Account Statement"
ban-ip-address → "Ban IP Address"
ui-alerts → "Alerts"
chart-js → "JS Charts"
reset-password-1 → "Reset Password"

How It Works

Each view sets ViewData["Title"] at the top
The _TitleMeta.cshtml partial reads ViewBag.Title (same as ViewData["Title"])
If title exists, formats it as: {Title} | Pos admin template
If no title is set, defaults to: Pos admin template
The formatted title is rendered in the <title> tag
This partial is included in both base.cshtml and auth-base.cshtml layouts

Title Format

All titles follow this consistent format:

<title>{Page Title} | Pos admin template</title>

Implementation Code

The title rendering logic in views/Shared/Partials/_TitleMeta.cshtml:

@{
    var title = ViewBag.Title != null
        ? ViewBag.Title + " | Pos admin template"
        : "Pos admin template";
}
<title>@title</title>

Example Output

For ViewData["Title"] = "Product Details"

Product Details | Pos admin template

Note

To customize the title format or default text, edit the _TitleMeta.cshtml partial view. You can change the suffix "Pos admin template" to match your application name, or modify the formatting logic as needed. The title is set in each individual view using ViewData["Title"] at the top of the Razor file.

RTL Language Support

Overview

The application provides comprehensive RTL (Right-to-Left) language support for languages like Arabic, Hebrew, and Persian. It uses ASP.NET Core Razor views to conditionally load RTL-specific styles and apply RTL layout classes.

RTL Implementation

RTL support is implemented through the following components:

RTL CSS Loading

The application uses Razor conditionals in views/Shared/Partials/_HeadCss.cshtml to load the appropriate CSS file based on the current page route:

@if (!IsPage("layout-rtl")){
    <!-- Bootstrap CSS -->
    <link rel = 'stylesheet' href ='~/assets/css/bootstrap.min.css'>
} 

@if (IsPage("layout-rtl")){
    <!-- Bootstrap RTL CSS -->
    <link rel="stylesheet" href="~/assets/css/bootstrap.rtl.min.css">
}

RTL Body Class

The base.cshtml layout automatically adds the RTL body class when the route is "layout-rtl":

var body_class = route switch
{
    "layout-rtl" => "layout-mode-rtl",
    // ... other cases
    _ => ""
};

<body class="@body_class">

RTL Layout Structure

The application includes a dedicated RTL layout view at views/layouts/layout-rtl.cshtml that extends the base layout. The RTL layout includes:

RTL-specific CSS classes and overrides
Right-aligned navigation and UI elements
Mirrored layout for RTL languages
Bootstrap RTL CSS framework integration

RTL Route

The RTL layout is accessible via a dedicated route in the controller:

[Route("layout-rtl")]
public IActionResult LayoutRtl()
{
    return View("~/views/layouts/layout-rtl.cshtml");
}

Key Features

Razor-Powered Conditional Loading - Dynamically loads RTL or LTR styles based on the current route using Razor's IsPage() helper function
Bootstrap RTL Support - Leverages Bootstrap's built-in RTL CSS framework for consistent RTL styling
Automatic Body Class - Automatically applies "layout-mode-rtl" class to the body element when on RTL pages
Dedicated Layout View - Uses a dedicated layout-rtl.cshtml view that extends the base layout
Route-Based Detection - Detects RTL mode based on the route name, making it easy to switch between LTR and RTL

Note

The conditional CSS loading automatically detects RTL pages using the route name "layout-rtl" and loads the appropriate Bootstrap RTL stylesheet. The IsPage() helper function in _HeadCss.cshtml checks the current route and conditionally loads either the standard Bootstrap CSS or the RTL version. This approach ensures that RTL-specific styles are only loaded when needed, improving performance and maintainability.

How to change Logo ?

You can change the logo or replace it from img folder or you can edit it from Html file.

<div class="header">
	<a asp-area="" asp-controller="Home" asp-action="Index" class="logo">
		<img src="@(Url.Content("assets/img/logo.svg"))" alt="logo" />
	</a>
</div>

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Icons

Use Font Awesome icons with spesific class


	<!DOCTYPE html>
	<html lang="en">
		<head>
			<link rel="stylesheet" href="{{ url_for('static', filename='assets/plugins/fontawesome/css/fontawesome.min.css') }}" >
			<link rel="stylesheet" href="{{ url_for('static', filename='assets/plugins/fontawesome/css/all.min.css') }}" >
		</head>
	</html>


	<i class="fas fa-times"></i>
	<i class="fas fa-chevron-down"></i>
	<i class="fa-regular fa-user"></i>

FAQs

With one purchase code you can use it on one domain name. You need to get new license for every new domain name, please check Envato Help Page for more information about licenses.

If you need support, or if you're facing any problems, please contact us via Envato Support
Please note that our respond can take up to 2 business days.

Availability to answer questions, Answering technical questions about item’s features, Assistance with reported bugs and issues, Help with included 3rd party assets.
Any customization request will be ignored.
Please make sure to read more about the support policy.

Support

If this documentation does not address your questions, please feel free to contact us via email at Item Support Page

We are in the GMT+5:30 time zone and typically respond to inquiries on weekdays within 12-24 hours. Please note that in rare cases, the response time may extend to 48 hours, especially during holiday seasons.

Note:

We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.

Don’t forget to Rate DreamsPos!

Please take a moment to rate our product on Themeforest. Your support means a lot to us. Just go to your Themeforest Profile > Downloads Tab, and you can leave a review for our script. Thank you!

License

DreamsPos is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.

Regular License

Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.

Extended License

For use by you or one client in a single end product for which end users may be charged.

What are the main differences between the Regular License and the Extended License?

Note

If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.

Credits

Plugin Name	URL
Bootstrap	https://getbootstrap.com/docs/
jQuery	https://jquery.com/
Fontawesome	https://fontawesome.com/
Select2	https://github.com/select2/select2
Date Timepicker	https://cdnjs.com/libraries/jquery-datetimepicker
Google Fonts	https://fonts.google.com/
Fancy Box	http://fancybox.net/
Moment JS	https://momentjs.com/
Full Calendar	https://fullcalendar.io/
Morris	https://morrisjs.github.io/morris.js/
Owl Carousel	https://www.npmjs.com/package/ngx-owl-carousel-o
Range-Slider	https://ionicframework.com/docs/api/range

Do you need a customized application for your business?

If you need a customized application for your business depends on your specific requirements and goals, Please contact us.

Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.

Don't Miss Out on the Benefits of Customization!

Unlock the potential of your project. It's time to ensure that your project isn't just another cookie-cutter solution but a truly unique and effective one.

Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!

We'll tailor the application to meet your specific needs and preferences.
We will upload your website to the server and ensure it is live.

Book an Appointment Get a Free Quote

[email protected]

Getting Started

Introduction

DreamsPOS - POS & Inventory Management Admin Dashboard Template

Requirements

System Overview

Core Technologies

Backend Framework

Frontend Framework

.NET Runtime

System Requirements

.NET SDK

Web Server

Database (Optional)

Operating System

Development Tools

IDE

.NET CLI

Version Control

Important Note

Features

Core Features

Product Management

Inventory Control

Billing & Invoices

Point of Sale

Supplier & Purchase Management

Reports & Analytics

Technical Features

ASP.NET Core MVC

Razor Views

Configuration System

Security & Middleware

Custom URL Helpers

Flexible Routing

View Layouts

Static Files

High Performance

UI/UX Features

Modern Design

Responsive Bootstrap 5.3.8

SCSS Styling

Font Awesome & Tabler

Easy Customization

W3C Validated

.NET Project Structure

Project Overview

Legend

DotNet Template Structure

views/Shared/base.cshtml: Main Layout Template

views/Shared/auth-base.cshtml: Authentication Layout

views/dashboard/index.cshtml: Content Page Template

ASP.NET Core Razor Template System

Installation Guide

Installation Steps

Install .NET SDK

Navigate to Project Directory

Restore NuGet Packages

Configure Base Path (Production)

Build the Project

Run the Application

Sass/SCSS with Gulp

Overview

Prerequisites

Node.js Installation

Installation Steps

Install NPM Package Manager

Install Project Dependencies

Run Development Build

Compilation Methods

Best Practices

Development

Production

Dynamic Title Feature

Overview

Key Features

Simple Title Setting

Automatic Formatting

Consistent Format

Razor Integration

Default Fallback

`views/Shared/base.cshtml`: Main Layout Template

`views/Shared/auth-base.cshtml`: Authentication Layout

`views/dashboard/index.cshtml`: Content Page Template