Getting Started

Introduction

Banner
Dreams Money Thumbnail 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 template is built with Flask 3.1.2 and requires Python 3.8+ environment. It includes all necessary dependencies that can be installed via pip. The application is designed to be lightweight yet powerful, with support for various databases and deployment options.

Core Technologies
Flask
Backend Framework

Flask 3.1.2

Frontend Framework

Bootstrap 5.3.8

Core Language

Python 3.14

System Requirements
Python

Python 3.8 or higher

Web Server

Gunicorn, uWSGI, or similar WSGI server

Database

SQLite, PostgreSQL, or MySQL

Node.js & npm

For frontend sass compilation

Development Tools
Development Server

Flask Development Server

Version Control

Git

Web Browser

Any modern browser

Important Note

For production deployment, it's recommended to use a production-ready WSGI server like Gunicorn or uWSGI behind a reverse proxy like Nginx. Ensure your Python environment has all required dependencies installed using pip.

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
Flask 3.x

Lightweight Python web framework with flexibility

Jinja2 Templates

Powerful templating engine for dynamic HTML rendering

Configuration System

Environment-based app configuration management

Security Middleware

Protect app with CSRF, HTTPS enforcement

Flask Debug Toolbar

Interactive debugging insights

URL Management

Pretty URLs & custom routing rules

Gulpjs Integration

Build tool for automating tasks

Template Inheritance

Base templates with dynamic content blocks

Performance

Optimized cache & HTTP handling

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

Flask Project Structure

Project Overview

This Flask project follows the standard directory structure, separating application code, configuration, views, and assets for better organization and maintainability.

dreamspos/ (Root Project)
flask/ (Main Application)
template/ (template files)
static/
assets/ (Asset files)
css/
Stylesheets
fonts/
Font files
js/
JavaScript Files
img/
Images & Icons
plugins/
Third-party Libraries
scss/
Sass Source Files
templates/
components/ (Reusable components)
body.html
footer.html
head-css.html
horizontal-sidebar.html
loader.html
main-wrapper.html
modal-popup.html
sidebar.html
theme-settings.html
topbar.html
twocolumn-sidebar.html
vendor-scripts.html
layouts/
auth_base.html (Authentication layout)
base.html (Main application layout)
pages/
index.html
products.html
customers.html
*.html
.gitignore
app.py
config.py
gulpfile.js
middleware.py
package.json
requirements.txt
utils.py
Legend
Directories
Html Files
JavaScript Files
CSS Files
Git Files
SCSS Files
Node.js Files
Image Files
Python Files
Other Files

Flask Template Structure

templates/layouts/base.html: Main Layout Template

The template follows Jinja2 templating engine syntax and is organized in a modular way for better maintainability.

    
<!DOCTYPE html>
{% include 'components/theme-settings.html' %}

<head>
	<!-- Meta Tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Dreams POS is a powerful Bootstrap based Inventory Management Admin Template designed for businesses, offering seamless invoicing, project tracking, and estimates.">
	<meta name="keywords" content="inventory management, admin dashboard, bootstrap template, invoicing, estimates, business management, responsive admin, POS system">
	<meta name="author" content="Dreams Technologies">
	<meta name="robots" content="index, follow">
	<title>{{ title }}</title>
    
    {% include 'components/head-css.html' %}
</head>

{% include 'components/body.html' %}
    {% include 'components/loader.html' %}

    <!-- Begin Wrapper -->
    {% include 'components/main-wrapper.html' %}

        {% include 'components/topbar.html' %}
        {% include 'components/sidebar.html' %}
        {% include 'components/twocolumn-sidebar.html' %}
        {% include 'components/horizontal-sidebar.html' %}

        {% block content %}
            
        {% endblock %}

    </div>
    <!-- End Wrapper -->

    {% include 'components/modal-popup.html' %}
    {% include 'components/vendor-scripts.html' %}
</body>
</html>

templates/layouts/auth_base.html: 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.

    
<!DOCTYPE html>
{% include 'components/theme-settings.html' %}

<head>
	<!-- Meta Tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Dreams POS is a powerful Bootstrap based Inventory Management Admin Template designed for businesses, offering seamless invoicing, project tracking, and estimates.">
	<meta name="keywords" content="inventory management, admin dashboard, bootstrap template, invoicing, estimates, business management, responsive admin, POS system">
	<meta name="author" content="Dreams Technologies">
	<meta name="robots" content="index, follow">
	<title>{{ title }}</title>

    {% include 'components/head-css.html' %}
</head>

{% include 'components/body.html' %}
    {% include 'components/loader.html' %}

    <!-- Begin Wrapper -->
    {% include 'components/main-wrapper.html' %}

        {% block content %}
            
        {% endblock %}

    </div>
    <!-- End Wrapper -->

    {% include 'components/vendor-scripts.html' %}
</body>
</html>

templates/pages/index.html: Content Page Template

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

    
{% extends 'layouts/base.html' %}

{% block content %}

    <!-- ========================
        Start Page Content
    ========================= -->

    <div class="page-wrapper">

        <div class="content">
            
            <!-- Your specific page content here -->
            
        </div>

        {% include 'components/footer.html' %}

    </div>

    <!-- ========================
        End Page Content
    ========================= -->

{% endblock %}
Flask Jinja2 Template System

This project uses Flask’s built-in Jinja2 templating engine. Key features include:

  • Template inheritance using {% extends "base.html" %} and {% block content %}
  • Dynamic content rendering with {{ variable }} expressions
  • Reusable components via {% include "components/topbar.html" %}
  • Support for filters, loops, and conditional logic in templates

Installation Guide

Follow these steps to set up the DreamsPOS Flask application on your local development environment. This guide covers Python virtual environment setup, package installation, and running the application.

Installation Steps
1
System Requirements

Ensure you have the required software installed for Flask:

Python 3.8+
Database (SQLite / MySQL / PostgreSQL)
Pip (Python package manager)
2
Setup Virtual Environment

In your project directory, create and activate a virtual environment:

python -m venv .venv
.venv\Scripts\activate
3
Install Dependencies

Use pip to install Flask and generate a requirements file:

pip install Flask
pip freeze > requirements.txt
4
Set Flask Application

Define the main Flask app file (e.g., app.py):

set FLASK_APP=app.py
5
Update the Base URL

Update the base URL in the config.py file:(production)

BASE_URL = '/flask/template/'
Note: It's only for production or live server.
6
Run Development Server

Start the Flask development server and access your app:

flask run
Access the application at:
http://localhost:5000

Sass/SCSS with Gulp

Overview

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

Prerequisites
Node.js Installation

Ensure you have Node.js installed on your system:

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 Flask 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 static/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 static/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 an intelligent title generation system that automatically creates user-friendly page titles based on the current URL path. This system processes route names through multiple transformation steps to create readable, properly formatted titles.

File Location: utils.py
Contains the generate_title() function that handles title generation
Key Features
Automatic Title Generation

Automatically generates titles based on URL paths

Smart Suffix Detection

Automatically customize suffixes like "Icons", "Charts", etc.

Title Formatting

Converts route names to properly formatted page titles

Flask Integration

Easily accessible in templates via the page variable

Smart Acronym Detection

Automatically detects and formats common acronyms in route names

Professional Appearance

Consistent and polished title formatting

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
  1. Extracts the current path from the URL using Flask's request.path
  2. Removes common prefixes and numeric suffixes
  3. Converts underscores and hyphens to spaces
  4. Applies proper title case formatting and handles acronyms
  5. Processes special cases and exceptions
  6. Returns the formatted title for display in the view
Title Format

All generated titles follow this consistent format:

<title> {Generated Title} | Dreams POS - Inventory Management & Admin Dashboard Template</title>
Example Output

For expense-category

Expense Category | DreamsPOS - Inventory Management & Admin Dashboard Template

Note

The title generation is handled automatically by the generate_title() function in utils.py. To add custom acronyms or modify the title generation behavior, update the acronyms list in the generate_title() function or adjust the logic as needed.

RTL Language Support

Overview

The application provides comprehensive RTL (Right-to-Left) language support for languages like Arabic, Hebrew, and Persian. It uses Flask templating to conditionally load RTL-specific styles and assets.

RTL Implementation

RTL support is implemented through the following components:

RTL CSS Loading

The application uses Flask conditionals in templates/layouts/head-css.html to load the appropriate CSS file based on the current page:


{% if page != 'layout-rtl' %}
    <!-- Bootstrap CSS -->
    <link rel = 'stylesheet' href ="{{ url_for('static', filename='assets/css/bootstrap.min.css')}}">
{% endif %} 

{% if page == 'layout-rtl' %}
    <!-- Bootstrap RTL CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/bootstrap.rtl.min.css')}}">
{% endif %}
RTL Layout Structure

The application uses a dedicated RTL layout template that can be extended by other templates when RTL support is needed. The RTL layout includes:

  • RTL-specific CSS classes and overrides
  • Right-aligned navigation and UI elements
  • Mirrored layout for RTL languages
Key Features
  • Flask-Powered Conditional Loading - Dynamically loads RTL or LTR styles based on the current route using Flask's template system
  • Bootstrap RTL Support - Leverages Bootstrap's built-in RTL CSS framework for consistent RTL styling
  • Template Inheritance - Uses Flask's Jinja2 template inheritance for modular RTL support
  • Dynamic Asset Management - Automatically serves RTL-specific assets using Flask's static file handling
Note

The conditional CSS loading automatically detects RTL pages using Flask's routing system and loads appropriate Bootstrap stylesheets. This approach ensures that RTL-specific styles are only loaded when needed, improving performance and maintainability while leveraging Flask's built-in asset management capabilities.

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]
thanks

Thank You

Thank you once again for downloading DreamsPos.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.

Review Link:https://themeforest.net/downloads