SmartHR

HR Management System Web Template

• Created on: 17/Jan/2019
• Developed by: DreamGuy's Technologies
• Support via email: admin@dreamguys.co.in
• Support via ThemeForest: Take me there
• 
  

  SmartHR – HRMS Web Template Automate your manual HR processes of our simplified HRMS Web App Template and integrated with Angular | HTML, CSS and Twitter Bootstrap.

  SmartHR is a simple, intelligent and user-friendly solution that offers many kinds of technology modules to help in automating your human resource practices. The feature-rich Web Template is designed to manage Employee management, Clients management, Project management, Task management, Leads management, Account management, Payroll management,Timing system, Tickets management, Events management, Email system, Chat system, Assets management, Activities tracking system, Invoice and Estimate management and User management of all departments in an organization.

Thank you for purchasing our template!

Angular Installation

Unzipping Template Package

• After unzipping Template Files, you will find our product SmartHR->Angular(Source code).
• Open Source Code folder, You will see src and e2e folders with packaging and dependency files.

Configure Node js

• Next Step you must download and install node.js LTS version from click here.
• To the end of your Path variable on the "User variable" section of the Environment Variables on the System Properties.
• Just add: C:\Program Files\nodejs\

Steps to Install

1. After that, you need to install Angular CLI.The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications.
2. By using command Prompt you can install this setup, one thing in mind you need to get in to the folder path where source code inside smartscroll located and then proceed the below steps.
3. (For example: C:\smartscroll\source code\npm install)
4. First you need to install the Angular CLI:  npm install -g @angular/cli
5. After that you need to install GIT. using the following link you can download git   Click here
6. After that you need to run the following command to install the build tools in your system   npm install --global windows-build-tools
7. After that you should install the node packages:  npm install
8. After completing installation process you can run using ng serve -o.Wait for few seconds to open in browser.
9. Now you can run this Template in web browser from your PC or Laptop locally.
10. After that if you want integrate this scrollPack Component into your product.

Steps for Deployment

1. Start with the development build:  ng build
2. After that you will get dist folder inside source code folder.
3. Copy everything within the output folder (dist/ by default) to a folder on the server.
4. If you copy the files into a server sub-folder, append the build flag, --base-href and set that appropriately.
5. If you copy to the server's root directory, omit this step and leave the base href alone.
6. Now you can run this Template in any web.

HTML Installation

Unzipping Template Package

• After unzipping Template Files, you will find our product SmartHR->HTML(Source code), Documentation, and License in the following Main Files folder.
• Open HTML folder, copy all files and paste in your localhost or server root folder. Now you can run this Template in any web browser from your PC or Laptop.

For example, localhost/smarthr/index.html or www.example.com/index.html

Working with our SmartHR product, before going to edit all the HTML, CSS and JS files you will need a text editor.

In this case, we recommended the Sublime Text 3 editor as it allows you to edit the files efficiently and all the editable files are located in "SmartHR->HTML" folder.

File Structure

File Structure - is the way you organize your folders and files on your computer. Keeping all your documents under one folder is a great way to keep organized and make things easy for backing up your computer.

Smarthr/
  ├── html/                           // All HTML files
  │   ├── css/                        // All css into this folder
  │   ├── fonts/                      // All fonts into this folder
  │   ├── images/                     // All images into this folder
  │   ├── js/                         // All js into this folder
  │   ├── plugins/                    // Third party plugins into this folder
  │   ├── index.html                  // Main index page
  │   ├── rest of the html pages      // Remaining html pages
  ├── angular/                           // All Angular files
  ├── documentation/                  // Documentation files

Html Structure

Structure of an HTML Document. An HTML document has two main parts: the head and the body. But firstly every HTML document should start by declaring that it is an HTML document. These tags are of the form: <html> Should appear at the beginning of your document. </html> Should appear at the end of your document.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
  <title>Dashboard - HRMS admin template</title>
  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/fullcalendar.min.css">
  <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="css/select2.min.css">
  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
  <link rel="stylesheet" href="plugins/morris/morris.css">
  <link rel="stylesheet" href="css/style.css">
</head>
  <body>
    <div class="main-wrapper">
       <div class="header">
       </div>
       <div class="sidebar" id="sidebar">
       </div>
       <div class="page-wrapper"> 
	   <div class="content container-fluid">
	   </div>
       </div>
    </div>
    <div class="sidebar-overlay" data-reff="#sidebar"></div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.slimscroll.js"></script>
    <script src="js/select2.min.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <script src="plugins/morris/morris.min.js"></script>
    <script src="plugins/raphael/raphael-min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Font Usage

Fonts used in SmartHR HTML template:

• Montserrat — for all text

Check it on the Google Fonts.

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet">

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

• Bootstrap
• Jquery
• Slimscroll
• Codepen
• Full Calendar
• Font Awesome
• Select2
• Summernote
• Date Timepicker
• Datatables
• Morris
• Raphael
• Google Fonts

You get full life-time support with this item. If you need some help or found a bug or issue with the template, You can always contact us at here via email and we will respond to you within 1 day.

VERSION 3.5 (4 February 2020)

- Fixed - Line Awesome icon css issue fixed

- Added - Subscription module added
- Fixed - Search issues fixed in responsive

- Added - Training
- Added - Task Board (Kanban)
- Added - Performance Appraisal
- Added - Performance Indicator
- Added - Goals
- Added - File Manager
- Added - Forms, Tables components

1. Employee Dashboard
2. Knowledgebase,
3. Search Result
4. FAQ
5. Privacy Policy
6. Terms
7. Performance Review.

- Upgrade with Bootstrap 4.3.1
- Added - Promotion
- Added - Resignation
- Added - Termination
- Added - Overtime
- Added - Policies

v3.0 (17.Jan.2019) - Included Angular vesrion multi color & RTL version

v2.0 (17.Jan.2019) - Included Angular vesrion and Fixed minor responsive issues

v1.3 (18.Dec.2018) - Improved Color Scheme, Included Job Module and Font Awesome Icons

v1.2 (29.Mar.2018) - Included Video/Voice/Incoming Call and Contact Pages

v1.1 (10.Mar.2018) - RTL theme included and Created separate files for each themes

v1.0 (13.Jan.2018) - Initial Release