# T H E M E L O C K . C O M

Kubayar Invoicing PHP Admin Dashboard - Empowering Your Administration Work

## Kubayar

#### Kubayar Invoicing PHP Admin Dashboard - Empowering Your Administration Work

This documentation is last updated on 1 May 2025

Thank you for purchasing this PHP template.

If you like this template, Please support us by rating this template with 5 stars

## Installation -

##### 1.- Install Node.js

To compile Sass via the command line first, we need to install node.js. The easiest way is downloading it from the official website nodejs.org open the package and follow the wizard.

##### 2.- Initialize NPM

NPM is the Node Package Manager for JavaScript. NPM makes it easy to install and uninstall third party packages. To initialize a Sass project with NPM, open your terminal and CD (change directory) to your project's assets folder.

    npm init

Once in the correct folder, run the command `npm init`. You will be prompted to answer several questions about the project, after which NPM will generate a `package.json` file in your folder.

##### 3.- Install Sass

sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install sass run the following command in your terminal: `npm install sass@1.64.2`

    npm install sass@1.64.2

##### 4.- Write sass Command

Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this: In the scripts section add an scss command

    "scripts": {
      "sass": "sass --watch scss/main.scss css/style.css"
    },

##### 5.- Run the Script

To execute our one-line script, we need to run the following command in the terminal: `npm run sass`

    npm run sass

## Folder Directories -

- images

  This folder contains all the images of Kubayar template.

- fonts

  This folder font files for various template features.

- css

  This folder contains all the CSS files of Kubayar template.

- js

  This folder has all javascript files for various template features.

- vendor

  This folder has all plugins used in the template.

- script

  This folder has all script contact form used in the template.

- scss

  Scss File

## HTML File-

- package
  - account
  - ajax
  - assets
    - css
    - icons
      - avasta
      - feather
      - flaticon
      - font-awesome-old
      - helveticaNeue
      - icomoon
      - line-awesome
      - material-design-iconic-font
      - simple-line-icons
      - themify-icons
    - images
      - avatar
      - big
      - card
      - product
      - profile
      - tab
    - js
      - dashboard
      - plugins-init
    - scss
      - abstracts
      - base
      - components
        - app
        - charts
        - forms
        - ico
        - map
        - tables
        - uc
        - ui
        - widget
      - layout
        - footer
        - header
        - rtl
        - sidebar
        - theme
        - typography
        - version-dark
        - version-transparent
      - pages
    - vendor
      - amcharts
      - animate
      - aos
      - apexchart
      - bootstrap
      - bootstrap4-notify
      - bootstrap-daterangepicker
      - bootstrap-material-datetimepicker
      - bootstrap-multiselect
      - bootstrap-select
      - bootstrap-tagsinput
      - bootstrap-touchspin
      - bootstrap-v4-rtl
      - chart.js
      - chartist
      - chartist-plugin-tooltips
      - clockpicker
      - datatables
      - dropzone
      - flot
      - flot-spline
      - fullcalendar
      - global
      - highlightjs
      - jquery
      - jquery-asColor
      - jquery-asColorPicker
      - jquery-asGradient
      - jquery-sparkline
      - jquery-steps
      - jqueryui
      - jquery-validation
      - jqvmap
      - metismenu
      - moment
      - morris
      - nestable2
      - nouislider
      - peity
      - perfect-scrollbar
      - pickadate
      - raphael
      - select2
      - summernote
      - svganimation
      - sweetalert2
      - toastr
      - wnumb
  - config
  - elements
  - profile
  - uploads
  - index.html
  - index-2.html
  - wallet.html
  - invoices.html
  - create-invoices.html
  - .....

## Theme Features -

#### js/dz-sidenav-init.js

    var dzSettingsOptions = {
    	typography: "poppins",
    	version: "light",
    	layout: "vertical",
    	primary: "color_1",
    	headerBg: "color_1",
    	navheaderBg: "color_1",
    	sidebarBg: "color_1",
    	sidebarStyle: "full",
    	sidebarPosition: "fixed",
    	headerPosition: "fixed",
    	containerLayout: "wide",
    };

### Color Theme -

So many color option available

- color_1
- color_2
- color_3
- color_4
- color_5
- color_6
- color_7
- color_8
- color_9
- color_10
- color_11
- color_12
- color_13
- color_14
- color_15

    var dzSettingsOptions = {
    	typography: "poppins",  		More Options => ["poppins" , "roboto" , "Open Sans"]
    	version: "light",       		More Options => ["light" , "dark"]
    	layout: "horizontal",   		More Options => ["horizontal" , "vertical"]
    	primary: "color_11",			More Options => ["color_1," , "color_2," ..... "color_14"]
    	headerBg: "color_1",			More Options => ["color_1," , "color_2," ..... "color_14"]
    	navheaderBg: "color_1",			More Options => ["color_1," , "color_2," ..... "color_14"]
    	sidebarBg: "color_11",			More Options => ["color_1," , "color_2," ..... "color_14"]
    	sidebarStyle: "compact",		More Options => ["full" , "mini" , "compact" , "modern" , "overlay" , "icon-hover"]
    	sidebarPosition: "static",		More Options => ["static" , "fixed"]
    	headerPosition: "fixed",		More Options => ["static" , "fixed"]
    	containerLayout: "full",		More Options => ["wide" , "Boxed" , "wide-Boxed"]
    };

    var dzThemeSet1 = {
    	typography: "poppins",
    	version: "light",
    	layout: "vertical",
    	primary: "color_3",
    	headerBg: "color_1",
    	navheaderBg: "color_3",
    	sidebarBg: "color_3",
    	sidebarStyle: "full",
    	sidebarPosition: "fixed",
    	headerPosition: "fixed",
    	containerLayout: "wide",
    };

    var dzThemeSet2 = {
    	typography: "poppins",
    	version: "light",
    	layout: "vertical",
    	primary: "color_15",
    	headerBg: "color_15",
    	navheaderBg: "color_1",
    	sidebarBg: "color_1",
    	sidebarStyle: "modern",
    	sidebarPosition: "fixed",
    	headerPosition: "fixed",
    	containerLayout: "wide",
    };

    var dzThemeSet3 = {
    	typography: "poppins",
    	version: "light",
    	layout: "horizontal",
    	primary: "color_11",
    	headerBg: "color_1",
    	navheaderBg: "color_1",
    	sidebarBg: "color_11",
    	sidebarStyle: "compact",
    	sidebarPosition: "fixed",
    	headerPosition: "fixed",
    	containerLayout: "wide",
    };

    var dzThemeSet4 = {
    	typography: "poppins",
    	version: "light",
    	layout: "horizontal",
    	primary: "color_3",
    	headerBg: "color_3",
    	navheaderBg: "color_3",
    	sidebarBg: "color_1",
    	sidebarStyle: "mini",
    	sidebarPosition: "fixed",
    	headerPosition: "fixed",
    	containerLayout: "wide",
    };

    var dzThemeSet5 = {
    	typography: "poppins",
    	version: "light",
    	layout: "vertical",
    	primary: "color_14",
    	headerBg: "color_1",
    	navheaderBg: "color_1",
    	sidebarBg: "color_14",
    	sidebarStyle: "full",
    	sidebarPosition: "fixed",
    	headerPosition: "fixed",
    	containerLayout: "wide",
    };

    var dzThemeSet6 = {
    	typography: "poppins",
    	version: "light",
    	layout: "vertical",
    	primary: "color_5",
    	headerBg: "color_1",
    	navheaderBg: "color_1",
    	sidebarBg: "color_1",
    	sidebarStyle: "mini",
    	sidebarPosition: "fixed",
    	headerPosition: "fixed",
    	containerLayout: "wide",
    };

## Credits -

- amcharts

  https://www.amcharts.com

- animate

  https://animate.style

- aos

  https://michalsnik.github.io/aos

- apexchart

  https://apexcharts.com

- bootstrap

  https://getbootstrap.com

- bootstrap4-notify

  http://bootstrap-notify.remabledesigns.com

- bootstrap-daterangepicker

  https://www.daterangepicker.com

- bootstrap-material-datetimepicker

  https://t00rk.github.io/bootstrap-material-datetimepicker

- bootstrap-multiselect

  https://github.com/davidstutz/bootstrap-multiselect

- bootstrap-select

  https://developer.snapappointments.com/bootstrap-select

- bootstrap-tagsinput

  https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples

- bootstrap-touchspin

  https://www.virtuosoft.eu/code/bootstrap-touchspin

- chart.js

  https://www.chartjs.org

- chartist

  https://gionkunz.github.io/chartist-js

- chartist-plugin-tooltips

  https://github.com/tmmdata/chartist-plugin-tooltip

- clockpicker

  https://weareoutman.github.io/clockpicker

- datatables

  https://datatables.net

- dropzone

  https://www.dropzonejs.com

- flot

  https://www.flotcharts.org

- flot-spline

  https://github.com/miloszfalinski/jquery.flot.spline

- fullcalendar

  https://fullcalendar.io

- highlightjs

  https://highlightjs.org

- jquery

  https://jquery.com

- jquery-asColor

  https://github.com/thecreation/jquery-asColor

- jquery-asColorPicker

  https://github.com/thecreation/jquery-asColorPicker

- jquery-asGradient

  https://www.npmtrends.com/jquery-asGradient

- jquery-sparkline

  https://plugins.jquery.com/sparkline

- jquery-steps

  http://www.jquery-steps.com

- jqueryui

  https://jqueryui.com

- jquery-validation

  https://jqueryvalidation.org

- jqvmap

  https://github.com/10bestdesign/jqvmap

- metismenu

  https://github.com/onokumus/metismenu

- moment

  https://momentjs.com

- morris

  https://morrisjs.github.io/morris.js

- nestable2

  https://ramonsmit.github.io/Nestable2

- nouislider

  https://refreshless.com/nouislider

- peity

  http://benpickles.github.io/peity

- perfect-scrollbar

  https://plugins.jquery.com/perfect-scrollbar

- pickadate

  https://amsul.ca/pickadate.js

- raphael

  https://github.com/DmitryBaranovskiy/raphael

- select2

  https://select2.org

- summernote

  https://summernote.org

- svganimation

  https://github.com/maxwellito/vivus

- sweetalert2

  https://sweetalert2.github.io

- toastr

  https://github.com/CodeSeven/toastr

- wnumb

  https://refreshless.com/wnumb

## HTML Structure -

### Head Section

### Header

### Footer Section

### Page Css

`elements/page-css.php`

### Page Js

`elements/page-js.php`

### Page Meta

`elements/meta.php`

## Do You Need Help To Customization

### After Purchase A Template...

#### You Will Start Customizing According Your Requirement
BUT What If You Don't Know

### SOLUTION IS HIRE DexignZone

#### Hire Same Team For Quality Customization

- In Order To Ensure Your Website Is Live, We Will Customize
  The Template According To Your Requirements And Upload It to the Server.

dexignzones@gmail.com

### Version History - #back to top

##### v1.0 - 1 May 2025

- New - Created & Upload Kubayar