File: /mnt/data/smarthr-co-in/demo/laravel_06/documentation/index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="SmartHR - HRMS, Payroll, HR Project Management Admin Dashboard Template.">
<meta name="author" content="dreamstechnologies">
<title>Smarthr - Online Documentation.</title>
<!-- App favicon -->
<link rel="shortcut icon" href="assets/img/logo/favicon.png">
<!-- Vendor -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/prism.css" rel="stylesheet">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Main CSS -->
<link id="mainCss" href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="wrapper sb-default">
<!-- Loader -->
<div id="loader-wrapper">
<div class="loader-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Header -->
<header class="header">
<div class="container-fluid">
<div class="header-left">
<div class="left-header me-2">
<a href="javascript:void(0)" class="sidebar-toggle">
<span class="outer-ring">
<span class="inner-ring"></span>
</span>
</a>
</div>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" target="_blank" class="nav-link px-2 link-body-emphasis"><i class="fa-solid fa-headset me-2"></i>Support</a></li>
<li><a href="https://calendly.com/dreamstechnologies" class="nav-link px-2 link-body-emphasis" target="_blank"><i class="fa-brands fa-hire-a-helper me-2"></i>Hire Us</a></li>
<li><a href="changelog.html" class="nav-link px-2 link-body-emphasis"><i class="fa-brands fa-hire-a-helper me-2"></i>Changelog</a></li>
</ul>
<div class="right-header">
<div class="me-2 header-item theme-light">
<button type="button" class="btn-topbar tools-item mode" data-bs-theme-tool="light">
<span class="feather-icon"><i data-feather="moon"></i></span>
</button>
</div>
<div class="me-2 header-item theme-dark">
<button type="button" class="btn-topbar tools-item mode active" data-bs-theme-tool="dark">
<span class="feather-icon"><i data-feather="sun"></i></span>
</button>
</div>
</div>
<div class="text-end">
<a href="https://smarthr.dreamstechnologies.com/laravel/" target="_blank" class="btn btn-white btn-sm me-2"><i class="fa-solid fa-link me-2"></i>Live Demo</a>
<a href="https://themeforest.net/item/smarthr-laravel-admin-template/27532539" class="btn btn-primary btn-sm" target="_blank"><i class="fa-solid fa-cart-plus me-2"></i>Buy Now</a>
</div>
</div>
</div>
</header>
<div class="doc-progress">
<div class="doc-progress-inner" id="scrollProgress">
</div>
</div>
<div class="sidebar-overlay"></div>
<div class="sidebar" data-mode="light">
<div class="sidebar-logo">
<a href="index.html" class="sb-full"><img src="assets/img/logo/logo.svg" alt="logo"><span class="badge badge-soft-danger fs-14 ms-1">Laravel</span></a>
<a href="index.html" class="sb-collapse"><img src="assets/img/logo/favicon.png" alt="logo"></a>
</div>
<div class="sidebar-inner">
<div class="sidebar-menu">
<ul id="menu-main-menu" class="sidebar-nav">
<li class="menu-item submenu">
<a href="#instructions" class="active menu-link">
<span class="feather-icon"><i data-feather="box"></i></span>
<span class="condense">Getting Started</span>
</a>
<ul class="sidebar-dropdown condense active">
<li>
<a href="#instructions" class="page-link drop">
<span class="menu-dash"><span></span></span>Introduction
</a>
</li>
<li><a href="#requirement" class="page-link drop"><span
class="menu-dash"><span></span></span>Requirement</a></li>
<li><a href="#features" class="page-link drop"><span
class="menu-dash"><span></span></span>Core Features</a></li>
<li><a href="#file_structure" class="page-link drop"><span
class="menu-dash"><span></span></span>File Structure</a></li>
</ul>
</li>
<li class="menu-item-separator"></li>
<li class="menu-title condense">Configuration</li>
<li class="menu-item submenu">
<a href="#local_server" class=" menu-link">
<span class="feather-icon"><i data-feather="pie-chart"></i></span>
<span class="condense">Installation</span>
</a>
<ul class="sidebar-dropdown condense">
<li><a href="#local_server" class="page-link drop"><span class="menu-dash"><span></span></span>Local Server Installation</a></li>
<li><a href="#live_server" class="page-link drop"><span class="menu-dash"><span></span></span>Live Server Installation</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#dark-mode" class="page-link">
<span class="feather-icon"><i data-feather="moon"></i></span><span class="condense"><span class="hover-title">Dark Mode</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#rtl" class="page-link">
<span class="feather-icon"><i data-feather="align-right"></i></span><span class="condense"><span class="hover-title">RTL</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#theme-layouts" class="page-link">
<span class="feather-icon"><i data-feather="tool"></i></span><span class="condense"><span class="hover-title">Theme Setup</span> </span>
</a>
</li>
<li class="menu-item-separator"></li>
<li class="menu-title condense">Info</li>
<li class="menu-item">
<a href="#faq" class="page-link">
<span class="feather-icon"><i data-feather="star"></i></span><span
class="condense"><span class="hover-title">FAQs</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#support" class="page-link">
<span class="feather-icon"><i data-feather="star"></i></span><span
class="condense"><span class="hover-title">Support</span> </span>
</a>
</li>
<li class="menu-item submenu">
<a href="#license" class=" menu-link">
<span class="feather-icon"><i data-feather="command"></i></span>
<span class="condense">License & Credits</span>
</a>
<ul class="sidebar-dropdown condense">
<li><a href="#license" class="page-link drop"><span
class="menu-dash"><span></span></span>License</a></li>
<li><a href="#credits" class="page-link drop"><span
class="menu-dash"><span></span></span>Credits</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#customwork" class="page-link">
<span class="feather-icon"><i data-feather="briefcase"></i></span><span
class="condense"><span class="hover-title">Custom Work</span> </span>
</a>
</li>
<li class="menu-item">
<a href="changelog.html" class="page-link">
<span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hexagon"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg></span>
<span class="condense"><span class="hover-title">Change Log</span> </span>
<span class="badge badge-changelog badge-soft-danger fw-semibold fs-8 px-2 ms-2 condense">v1.7.9</span>
</a>
</li>
<li class="menu-item">
<a href="#thanks" class="page-link">
<span class="feather-icon"><i data-feather="smile"></i></span><span
class="condense"><span class="hover-title">Thank
You</span> </span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- main content -->
<div class="main-content">
<div class="container-fluid">
<!-- Page title & breadcrumb -->
<div class="page-title">
<div class="breadcrumb">
<h1>Getting Started</h1>
<ul>
<li><a href="index.html">Smarthr</a></li>
<li>Getting Started</li>
</ul>
</div>
</div>
<div class="row sections">
<div class="col-xl-12 col-md-12">
<!-- Introduction -->
<section class="section-block hentry" id="instructions">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Introduction<a class="anchor-link ms-2" href="#instructions"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span>
</a>
</div>
</div>
<div class="card-body">
<div class="intro">
<div class="item-details mb-3">
<div class="row">
<div class="col-md-6">
<ul class="auth-detail">
<li><strong>Item Name : </strong>SmartHR - HRMS, Payroll, HR Project Management Admin Dashboard Template</li>
<li><strong>Item Version : </strong><span class="badge badge-changelog badge-soft-danger fw-semibold fs-8 px-2 ms-2">v1.7.9</span></li>
<li><strong>Author : </strong><a target="_blank" href="https://dreamstechnologies.com">Dreams Technologies</a></li>
<li>Support via email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Support via Themeforest: <a target="_blank" href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support">Take me there</a></li>
</ul>
</div>
<div class="col-md-6">
<a class="gallery-thumb" href="assets/img/banners/laravel-banner.jpg">
<img src="assets/img/banners/laravel-banner.jpg" class="img-fluid" alt="Smarthr Banner">
</a>
</div>
</div>
</div>
<h5>
<a href="#" class="pro-thumbnail me-2" target="_blank">
<img src="assets/img/logo/favicon.png" class="img-fluid" alt="Smarthr Thumbnail">
</a> SmartHR - HRMS, Payroll, HR Project Management Admin Dashboard Template.
</h5>
<p>SmartHR – HR Management Admin Template is a HR management solution for automating and simplifying HR operations. SmartHR is a simple, intelligent, and user-friendly solution that offers many kinds of technology modules to help in automating your human resource practices.</p>
</div>
<a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" class="btn btn-primary rounded-pill me-2" target="_blank">Contact Support</a>
<a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" class="btn btn-soft-primary rounded-pill" target="_blank" rel="noreferrer">Create Support ticket</a>
</div>
</div>
</section>
<!-- Core Features -->
<section class="section-block hentry" id="requirement">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Requirements</h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i
data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div>
<ol class="custom-list mb-4">
<li>Laravel version = <strong>12.42.0</strong></li>
<li>Composer</li>
<li>Php version = 8.2 to 8.4</li>
<li>Xampp</li>
<li>Visual Studio Code</li>
<li>Terminal</li>
</ol>
</div>
</div>
</div>
</section>
<section class="section-block hentry" id="features">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Core Features<a class="anchor-link ms-2" href="#features"><i
class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i
data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<p class="mb-0">
Laravel 12.42.0<br>
Fake Backend Authentication<br>
Bootstrap 5.3.8<br>
Style with SASS<br>
Font Awesome icons<br>
Feather icons<br>
Fully Responsive Layout<br>
Cross Browser Compatible<br>
Easy to Customize<br>
Clean & Well Commented Codes<br>
Compatible to all Mobile Devices<br>
Detailed Documentation<br>
Developer Friendly<br>
And Many More...<br>
</div>
</div>
</section>
<!-- File Structure -->
<section class="section-block hentry" id="file_structure">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">File Structure<a class="anchor-link ms-2"
href="#file_structure"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i
data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="file-structure">
<ul class="main-structure">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-open"></i>Smarthr
</a>
<ul class="file-sub">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>laravel
</a>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>template
</a>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>app
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>bootstrap
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>config
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>database
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>public
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>resources
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>routes
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>storage
</a>
</li>
</ul>
<ul class="file-hide">
<li>
<a href="javascript:void(0)" class="file-drop">
<i class="fa-solid fa-chevron-up"></i><i class="fa-regular fa-folder-closed"></i>tests
</a>
</li>
</ul>
<ul class="file-hide">
<li><i class="fa-regular fa-file-lines"></i>.editorconfig</li>
<li><i class="fa-regular fa-file-lines"></i>.env.example</li>
<li><i class="fa-regular fa-file-lines"></i>.gitattributes</li>
<li><i class="fa-regular fa-file-lines"></i>.gitignore</li>
<li><i class="fa-regular fa-file-lines"></i>README.md</li>
<li><i class="fa-regular fa-file-lines"></i>artisan</li>
<li><i class="fa-regular fa-file-lines"></i>composer.json</li>
<li><i class="fa-regular fa-file-lines"></i>composer.lock</li>
<li><i class="fa-regular fa-file-lines"></i>package-lock.json</li>
<li><i class="fa-regular fa-file-lines"></i>package.json</li>
<li><i class="fa-regular fa-file-lines"></i>phpunit.xml</li>
<li><i class="fa-regular fa-file-lines"></i>vite.config.js</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="section-block hentry" id="local_server">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Local Server Installation<a class="anchor-link ms-2"
href="#local_server"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i
data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="server">
<h5 id="step-1-configure-env-file">Step 1: Place Files</h5>
<ul class="custom-list list-disc mb-4">
<li>Unzip the script which you have downloaded</li>
<li>Start your xampp or wampp server</li>
<li>If you are using xampp please put the extracted file inside htdocs folder</li>
</ul> <hr />
<h5 id="step-1-configure-env-file">Step 2: Configure .env file</h5>
<p>In the root directory, you will find a file named .env.example, rename the given file name to .env . On this file update accordingly to your information and save the file.</p>
<pre class="language-javascript">
<code class="language-javascript">APP_NAME='Laravel'
APP_ENV=local
APP_KEY=base64:tENMz2jiwTKJjhl4ir8GwNfPYWAPVN48OqghA+QMq0M=
APP_DEBUG=false
APP_URL=http://localhost
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db_name
DB_USERNAME=your_db_user_name
DB_PASSWORD=your_db_password
</code></pre>
<p><strong><em>You must change</em></strong> these values before move forward.</p>
<blockquote>
<p><code>DB_DATABASE</code>, <code>DB_USERNAME</code>, <code>DB_PASSWORD</code></p>
</blockquote>
<hr />
<h5 id="step-2-import-sql-file">Step Final</h5>
<p>Open terminal from your project root folder <br>
<code> Run composer update </code><br>
<code> Run php artisan key:generate </code><br>
<code> Run php artisan migrate </code><br>
<code>npm install </code><br>
<code>npm run build </code><br>
<code>Run php artisan serve </code><br>
</p>
<hr />
<p class="mb-0">Go to browser and enter <code>localhost:8000</code></p>
</div>
</div>
</div>
</section>
<section class="section-block hentry" id="live_server">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Live Server Installation<a class="anchor-link ms-2" href="#local_server"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="server">
<h5 id="step-1-configure-env-file">Step 1: Place Files</h5>
<ul class="custom-list list-disc mb-4">
<li>Unzip the script inside the public_html folder</li>
<li>Now copy the .htaccess file from the public folder and paste it into the project root folder</li>
</ul> <hr />
<h5 id="step-1-configure-env-file">Step 2: Configure .env file</h5>
<p>Please go to '<strong>your project root</strong>' folder and edit the <strong>.env</strong> file. On this file please update accordingly to your information and save the file.</p>
<pre class="language-javascript">
<code class="language-javascript">APP_NAME='Laravel'
APP_ENV=local
APP_KEY=base64:tENMz2jiwTKJjhl4ir8GwNfPYWAPVN48OqghA+QMq0M=
APP_DEBUG=false
APP_URL=http://localhost
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db_name
DB_USERNAME=your_db_user_name
DB_PASSWORD=your_db_password
</code></pre>
<p><strong><em>You must change</em></strong> these values before move forward.</p>
<blockquote>
<p><code>DB_DATABASE</code>, <code>DB_USERNAME</code>, <code>DB_PASSWORD</code></p>
</blockquote>
<hr />
<h5 id="step-2-import-sql-file">Step Final</h5>
<p>Open terminal from your project root folder <br>
<code> Run composer update </code><br>
<code> Run php artisan key:generate </code><br>
<code> Run php artisan migrate </code><br>
<code>npm install </code><br>
<code>npm run build </code><br>
<code>Run php artisan serve </code><br></p>
<hr />
<p class="mb-0">Go to browser and enter <code>https://your-domain.com/</code></p>
</div>
</div>
</div>
</section>
<!-- Dark Mode -->
<section class="section-block hentry" id="dark-mode">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">How can I switch to the Dark Mode?<a class="anchor-link ms-2" href="#dark-mode"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="dark-mode-content">
<p>You will see a Light mode and Dark mode radio button in the Theme Settings. Choose any one of the option to change website theme.</p>
<div class="config-images my-4">
<img src="assets/img//configuration/dark-mode-settings.png" alt="dark-image">
</div>
<pre class=" language-javascript mb-0"><code class=" language-javascript">
<html data-theme="dark"></html>
</code></pre>
<p class="mt-2">The script for the Dark-mode are located in the theme-script.js file. You can find this file in the following directory:</p>
<h6 class="mb-2">Path: <span>js/theme-script.js</span></h6>
</div>
</div>
</div>
</section>
<!-- /Dark Mode -->
<!-- RTL -->
<section class="section-block hentry" id="rtl">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">How can I switch to the RTL?<a class="anchor-link ms-2" href="#rtl"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="rtl-content">
<p>To enable Right-to-Left (RTL) layout in a Bootstrap-powered page, you need to follow these steps to ensure proper support and display for RTL languages like Arabic, Hebrew, etc. Here’s a guide with clear steps and explanations.</p>
<h6>Step 1: Applying RTL Direction via CSS</h6>
<pre class=" language-javascript mb-0"><code class=" language-javascript">
body {
direction:rtl;
background: #fff;
left: 0;
position: fixed;
right: 0;
top: 0;
height: 66px;
}
</code></pre>
<p class="dir-content"><strong> Explanation:</strong> The direction: rtl; property is applied to the "body" element via the CSS style block.This ensures that the entire content of the page flows from right to left.</p>
<h6>Step 2: Including the RTL Version of Bootstrap CSS</h6>
<p>After enabling RTL in the Laravel <strong>head.blade.php</strong> file, you need to include an RTL-compatible CSS file from Bootstrap. Bootstrap provides an RTL version of its CSS, which has been adjusted for RTL support.</p>
<pre class="language-markup mb-0 border-0"><code>
<link rel="stylesheet" href="{{ url('build/css/bootstrap.rtl.min.css') }}">
</code></pre>
</div>
</div>
</div>
</section>
<!-- /RTL -->
<!-- Theme layouts -->
<section class="section-block hentry" id="theme-layouts">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">How Can I Use Theme Layouts?<a class="anchor-link ms-2" href="#rtl"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="#" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<p class="text-muted"> Please do the below change in the html element at
<code>resources/views/layouts/mainlayout.blade.php</code> file. ex:
<code><html data-theme="default"></code>
</p>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-01.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="default"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-02.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="mini"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-03.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="horizontal"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-05.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="horizontal-single"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-06.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="detached"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-07.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="twocolumn"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-09.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="without-header"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-10.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="horizontal-overlay"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-11.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="horizontal-sidemenu"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-12.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="stacked"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-13.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="modern"</code>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="border p-3 text-center mb-3">
<div>
<img src="assets/img/layouts/layout-14.svg" alt="image" class="img-fluid shadow mb-3">
</div>
<code>data-layout="transparent"</code>
</div>
</div>
</div>
<div class="my-4">
<p>If you didn't want to theme settings go <code>resources/views/layouts/partials/head.blade.php</code> and remove the script:</p>
<pre class="language-markup mb-0 border-0"><code>
<link rel="stylesheet" src="{{ URL::asset('build/js/theme-script.js') }}">
</code></pre>
</div>
</div>
</div>
</section>
<!-- /Theme layouts -->
<section class="section-block hentry" id="faq">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">FAQs<a class="anchor-link ms-2" href="#faq"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="accordion" id="faq_list">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Can I use this platform on multiple domains?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#faq_list">
<div class="accordion-body">
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 <a href="https://themeforest.net/licenses/standard" target="_blank">Envato Help Page</a> for more information about licenses. </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
I got a problem, How can I get support?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faq_list">
<div class="accordion-body">
If you need support, or if you're facing any problems, please contact us via <a href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support" target="_blank">Envato Support</a>
<br> Please note that our respond can take up to 2 business days.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What does the support include?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faq_list">
<div class="accordion-body">
<ul class="list-disc">
<li>Availability to answer questions, Answering technical questions about item’s features, Assistance with reported bugs and issues, Help with included 3rd party assets.</li>
<li>Any customization request will be ignored.</li>
<li>Please make sure to read more about the <a href="https://themeforest.net/page/item_support_policy" target="_blank">support policy</a>. </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-block page-block hentry" id="support">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Support<a class="anchor-link ms-2" href="#support"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<p>If this documentation does not address your questions, please feel free to contact us via email at <a class="btn btn-primary btn-sm" target="_blank" href="https://themeforest.net/item/smarthr-bootstrap-admin-panel-template/21153150/support">Item Support Page</a>
</p>
<p>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.</p>
<div class="alert alert-warning mb-4">
<span class="badge rounded-pill text-bg-danger text-uppercase">Note:</span>
<p class="mb-0">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.</p>
</div>
<h5>Don’t forget to Rate Smarthr! <i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
</h5>
<div class="alert alert-success mb-0">Please take a moment to rate our product on Themeforest. Your support means a lot to us. Just go to your <strong>Themeforest Profile > Downloads Tab</strong>, and you can leave a review for our script. Thank you!</div>
</div>
</div>
</section>
<section class="section-block page-block hentry" id="license">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">License<a class="anchor-link ms-2" href="#license"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<p>Smarthr is developed by <a href="https://themeforest.net/user/dreamstechnologies/portfolio" target="_blank">Dreams Technologies</a> and is available under both <a href="https://themeforest.net/licenses/standard" target="_blank">Envato Extended & Regular License</a> options.</p>
<h6>Regular License</h6>
<p>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.</p>
<h6>Extended License</h6>
<p>For use by you or one client in a single end product for which end users may be charged.</p>
<p><a href="https://themeforest.net/licenses/faq#main-differences-licenses-a" target="_blank">What are the main differences between the Regular License and the Extended License?</a></p>
<div class="alert alert-info mb-0">
<span class="badge rounded-pill text-bg-danger text-uppercase">Note</span>
<p class="mb-0">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.</p>
</div>
</div>
</div>
</section>
<section class="section-block page-block hentry" id="credits">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Credits<a class="anchor-link ms-2" href="#credits"><i class="fa-solid fa-hashtag"></i></a></h4>
<div class="header-tools">
<a href="javascript:void(0)" class="card-maximize">
<span class="feather-icon" title="Full Screen"><i data-feather="maximize"></i></span></a>
</div>
</div>
<div class="card-body">
<div class="table-responsive ref-table">
<table class="table table-borderless mb-0">
<thead class="thead-light">
<tr>
<th class="w-20">Plugin Name</th>
<th class="w-80">URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-high-em">Bootstrap</span></td>
<td><a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/" class="link-high-em" target="_blank">https://getbootstrap.com/docs/</a></td>
</tr>
<tr>
<td><span class="text-high-em">jQuery</span></td>
<td><a href="https://jquery.com/" class="link-high-em" target="_blank">https://jquery.com/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Fontawesome</span></td>
<td><a href="https://fontawesome.com/" class="link-high-em" target="_blank">https://fontawesome.com/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Select2</span></td>
<td><a href="https://github.com/select2/select2" class="link-high-em" target="_blank">https://github.com/select2/select2</a></td>
</tr>
<tr>
<td><span class="text-high-em">Date Timepicker</span></td>
<td><a href="https://cdnjs.com/libraries/jquery-datetimepicker" class="link-high-em" target="_blank">https://cdnjs.com/libraries/jquery-datetimepicker</a></td>
</tr>
<tr>
<td><span class="text-high-em">Google Fonts</span></td>
<td><a href="https://fonts.google.com/" class="link-high-em" target="_blank">https://fonts.google.com/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Morris</span></td>
<td><a href="https://morrisjs.github.io/morris.js/" class="link-high-em" target="_blank">https://morrisjs.github.io/morris.js/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Summernote</span></td>
<td><a href="https://summernote.org/plugins" class="link-high-em" target="_blank">https://summernote.org/plugins</a></td>
</tr>
<tr>
<td><span class="text-high-em">Fancy Box</span></td>
<td><a href="http://fancybox.net/" class="link-high-em" target="_blank">http://fancybox.net/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Dropzone Js</span></td>
<td><a href="https://github.com/dropzone/dropzone" class="link-high-em" target="_blank">https://github.com/dropzone/dropzone</a></td>
</tr>
<tr>
<td><span class="text-high-em">Jquery UI</span></td>
<td><a href="https://jqueryui.com/s" class="link-high-em" target="_blank">https://jqueryui.com/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Full Calendar</span></td>
<td><a href="https://fullcalendar.io/" class="link-high-em" target="_blank">https://fullcalendar.io/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Moment JS</span></td>
<td><a href="https://momentjs.com/" class="link-high-em" target="_blank">https://momentjs.com/</a></td>
</tr>
<tr>
<td><span class="text-high-em">Popper JS</span></td>
<td><a href="https://popper.js.org/" class="link-high-em" target="_blank">https://popper.js.org/</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="section-block page-block hentry" id="customwork">
<div class="custom-card bg-gr-1 text-center">
<div class="card-body">
<h4 class="card-title">Do you need a customized application for your business?</h4>
<p>If you need a customized application for your business depends on your specific requirements and goals, Please contact us.</p>
<p>Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.</p>
<div class="hire">
<h6>Don't Miss Out on the Benefits of Customization!</h6>
<p>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.</p>
<p>Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!</p>
<ul>
<li>We'll tailor the application to meet your specific needs and preferences.</li>
<li>We will upload your website to the server and ensure it is live.</li>
</ul>
<div class="contact-btn mb-3">
<a target="_blank" href="https://calendly.com/dreamstechnologies" class="btn btn-primary me-2"><i class="fa-solid fa-calendar-days me-2"></i>Book an Appointment</a>
<a href="mailto:[email protected]" class="btn btn-primary"><i class="fa-solid fa-calendar-days me-2"></i>Get a Free Quote</a>
</div>
<div class="contact-link">
<a target="_blank" href="mailto:[email protected]" class="px-2 link-body-emphasis"><i class="fa fa-envelope me-1"></i> [email protected]</a>
</div>
</div>
</div>
</div>
</section>
<section class="custom-card page-block hentry min-h-100" id="thanks">
<div class="card-body">
<div class="thanks">
<img src="assets/img/banners/ratings.svg" alt="thanks">
<h2>Thank You</h2>
<p>Thank you once again for downloading <strong>Smarthr</strong>.<br>
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.</p>
<strong>Review Link:</strong><a href="https://themeforest.net/downloads" class="text-primary fw-bold fs-5" target="_blank">https://themeforest.net/downloads</a>
</div>
</div>
</section>
</div>
</div>
</div><footer class="content-footer footer">
<div class="container-fluid d-flex flex-wrap justify-content-between align-items-center text-center py-3">
<div>
© 2015- <script>
document.write(new Date().getFullYear())
</script>
<a href="#" class="footer-text fw-medium text-primary" target="_blank">Dreams Technologies</a>
</div>
<div class="social-icons">
<a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="#" class="footer-link me-2" target="_blank"><i class="fa-brands fa-dribbble"></i></a>
<a href="#" class="footer-link" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</footer>
</div>
</main>
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/feather.min.js"></script>
<script src="assets/js/jquery.zoom.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>