File: /mnt/data/smarthr-co-in/demo/documentation/yii.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_new/bootstrap.min.css" rel="stylesheet">
<link href="assets/css_new/prism.css" rel="stylesheet">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="assets/css_new/magnific-popup.css">
<!-- Main CSS -->
<link id="mainCss" href="assets/css_new/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="#" 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" target="_blank" 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/" target="_blank" class="btn btn-white btn-sm me-2"><i class="fa-solid fa-link me-2"></i>Live Demo</a>
<!-- <a href="#" 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 white-logo"><img src="assets/img/logo/logo.svg" alt="logo"><span class="badge badge-soft-danger fs-14 ms-1">Yii</span></a>
<a href="index.html" class="sb-full dark-logo"><img src="assets/img/logo/logo-white.svg" alt="logo"><span class="badge badge-soft-danger fs-14 ms-1">Yii</span></a>
<a href="index.html" class="sb-collapse"><img src="assets/img/logo/favicon.png" alt="logo" class="img-fluid"></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>Features</a></li>
<li><a href="#file_structure" class="page-link drop"><span class="menu-dash"><span></span></span>File Structure</a></li>
<li><a href="#php_structure" class="page-link drop"><span class="menu-dash"><span></span></span>Yii 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="#html_config" 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="#html_config" class="page-link drop"><span class="menu-dash"><span></span></span>Installation Guide</a></li>
<li><a href="#scss_install" class="page-link drop"><span class="menu-dash"><span></span></span>Scss Installation</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#dynamic_title" class="page-link">
<span class="feather-icon"><i data-feather="sliders"></i></span><span class="condense"><span class="hover-title">Dynamic Title</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#rtl_layout" class="page-link">
<span class="feather-icon"><i data-feather="globe"></i></span><span class="condense"><span class="hover-title">RTL Layout</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#change_logo" class="page-link">
<span class="feather-icon"><i data-feather="command"></i></span><span class="condense"><span class="hover-title">Change Logo</span> </span>
</a>
</li>
<li class="menu-item">
<a href="#typography" class="page-link">
<span class="feather-icon"><i data-feather="type"></i></span><span class="condense"><span class="hover-title">Typography</span> </span>
</a>
</li>
<li class="menu-item submenu">
<a href="#icon" class=" menu-link">
<span class="feather-icon"><i data-feather="database"></i></span>
<span class="condense">Base</span>
</a>
<ul class="sidebar-dropdown condense">
<li><a href="#icon" class="page-link drop"><span class="menu-dash"><span></span></span>Icons</a></li>
</ul>
</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="page-link">
<span class="feather-icon"><i data-feather="settings"></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">v4.1.1</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">v4.1.1</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/banner.jpg">
<img src="assets/img/banners/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 -->
<!-- Requirements -->
<section class="section-block hentry" id="requirement">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Requirements<a class="anchor-link ms-2" href="#requirement"><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">
<!-- Overview -->
<div class="row mb-3">
<div class="col-12">
<div class="alert alert-info mb-3">
<div class="d-flex align-items-start">
<div class="me-3">
<i class="fas fa-info-circle text-info fs-4"></i>
</div>
<div>
<h6 class="mb-1">System Overview</h6>
<p class="mb-0">The SmartHR Yii 2 template requires a modern web server environment with Yii 2.0+ framework support, PHP 8.2+ compatibility, essential extensions, and development tools for optimal performance and development experience.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Core Technologies -->
<div class="row mb-3">
<div class="col-12">
<h5 class="mb-2"><i class="fas fa-code text-primary me-2"></i>Core Technologies</h5>
<div class="row">
<div class="col-md-4 mb-2">
<div class="card border-0 bg-light">
<div class="card-body text-center">
<div class="mb-2">
<img src="assets/img/technology/yii 2.svg" alt="Yii" class="img-fluid" style="height: 2.5rem;">
</div>
<h6 class="mb-1">Backend Framework</h6>
<p class="text-muted mb-0">Yii 2.0.53</p>
</div>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="card border-0 bg-light">
<div class="card-body text-center">
<div class="mb-2">
<i class="fab fa-bootstrap text-primary fs-1"></i>
</div>
<h6 class="mb-1">Frontend Framework</h6>
<p class="text-muted mb-0">Bootstrap 5.3.8</p>
</div>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="card border-0 bg-light">
<div class="card-body text-center">
<div class="mb-2">
<i class="fab fa-php text-primary fs-1"></i>
</div>
<h6 class="mb-1">Core Language</h6>
<p class="text-muted mb-0">PHP 8.4</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- System Requirements -->
<div class="row mb-3">
<div class="col-12">
<h5 class="mb-3">System Requirements</h5>
<div class="row">
<div class="col-md-6 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fab fa-node-js text-success"></i>
</div>
<div>
<h6 class="mb-1">Node.js</h6>
<p class="text-muted mb-0">Npm for sass compilation</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-puzzle-piece text-warning"></i>
</div>
<div>
<h6 class="mb-1">PHP Extensions</h6>
<p class="text-muted mb-0">intl, pdo, xml, ctype, iconv, json, mbstring, openssl, session, tokenizer, fileinfo</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-box text-danger"></i>
</div>
<div>
<h6 class="mb-1">Composer</h6>
<p class="text-muted mb-0">Latest version for dependency management</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-edit text-info"></i>
</div>
<div>
<h6 class="mb-1">Development Tools</h6>
<p class="text-muted mb-0">Vscode, Terminal</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Development Tools -->
<div class="row mb-3">
<div class="col-12">
<h5 class="mb-3"><i class="fas fa-tools text-warning me-2"></i>Development Tools</h5>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="fas fa-database text-warning fs-1"></i>
</div>
<h6 class="mb-2">Local Server</h6>
<p class="text-muted mb-0">XAMPP/WAMP/MAMP</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="fab fa-git-alt text-warning fs-1"></i>
</div>
<h6 class="mb-2">Version Control</h6>
<p class="text-muted mb-0">Git</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="fas fa-globe text-warning fs-1"></i>
</div>
<h6 class="mb-2">Web Browser</h6>
<p class="text-muted mb-0">Any modern browser</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Installation Note -->
<div class="row mb-0">
<div class="col-12">
<div class="alert alert-warning mb-0">
<div class="d-flex align-items-start">
<div class="me-2">
<i class="fas fa-exclamation-triangle text-warning"></i>
</div>
<div>
<h6 class="mb-1">Important Note</h6>
<p class="mb-0">Ensure all PHP extensions are enabled in your server configuration. For production deployment, consider using a managed hosting service that supports Yii 2.0+ and PHP 8.2+.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Requirements -->
<!-- Features -->
<section class="section-block hentry" id="features">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">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">
<!-- Core Features -->
<div class="row mb-4">
<div class="col-12">
<h5 class="mb-3">
<i class="fas fa-star text-warning me-2"></i>Core Features
</h5>
<div class="row">
<!-- Employee Management -->
<div class="col-md-6 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-users text-primary fs-4"></i>
</div>
<div>
<h6 class="mb-2">Employee Management</h6>
<p class="text-muted mb-0">Centralized employee details with profiles, roles, and organizational hierarchy.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Attendance & Leave -->
<div class="col-md-6 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-calendar-check text-success fs-4"></i>
</div>
<div>
<h6 class="mb-2">Attendance & Leave</h6>
<p class="text-muted mb-0">Automated attendance tracking, shift management, and leave requests with approval workflow.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Payroll Management -->
<div class="col-md-6 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-file-invoice-dollar text-warning fs-4"></i>
</div>
<div>
<h6 class="mb-2">Payroll Management</h6>
<p class="text-muted mb-0">Automated salary calculations, tax deductions, payslips, and compliance management.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Recruitment & Onboarding -->
<div class="col-md-6 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-tasks text-primary fs-4"></i>
</div>
<div>
<h6 class="mb-2">Project & Task Management</h6>
<p class="text-muted mb-0">Assign tasks, monitor progress, and align teams with project deadlines.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Performance Management -->
<div class="col-md-6 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-chart-line text-info fs-4"></i>
</div>
<div>
<h6 class="mb-2">Performance Management</h6>
<p class="text-muted mb-0">Goal setting, performance reviews, and continuous feedback for employee growth.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Reports & Analytics -->
<div class="col-md-6 mb-3">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-chart-pie text-danger fs-4"></i>
</div>
<div>
<h6 class="mb-2">Reports & Analytics</h6>
<p class="text-muted mb-0">Comprehensive HR reports on workforce, payroll, attendance, and compliance insights.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Technical Features -->
<div class="row mb-4">
<div class="col-12">
<h5 class="mb-3">Technical Features</h5>
<div class="row">
<div class="col-md-4 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-code text-success"></i>
</div>
<div>
<h6 class="mb-1">Yii 2 Framework</h6>
<p class="text-muted mb-0">Modern PHP MVC architecture</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-box text-primary"></i>
</div>
<div>
<h6 class="mb-1">Composer Management</h6>
<p class="text-muted mb-0">Dependencies & autoloading</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-database text-secondary"></i>
</div>
<div>
<h6 class="mb-1">Service Container</h6>
<p class="text-muted mb-0">Dependency injection & configuration</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-layer-group text-info"></i>
</div>
<div>
<h6 class="mb-1">PHP Views</h6>
<p class="text-muted mb-0">Native PHP templating with layouts</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-route text-primary"></i>
</div>
<div>
<h6 class="mb-1">URL Management</h6>
<p class="text-muted mb-0">Pretty URLs & custom routing rules</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-cogs text-warning"></i>
</div>
<div>
<h6 class="mb-1">Component System</h6>
<p class="text-muted mb-0">Configurable application components</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-bug text-danger"></i>
</div>
<div>
<h6 class="mb-1">Debug Extension</h6>
<p class="text-muted mb-0">Development debugging tools</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-puzzle-piece text-info"></i>
</div>
<div>
<h6 class="mb-1">Gii Code Generator</h6>
<p class="text-muted mb-0">Rapid code generation tools</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-rocket text-danger"></i>
</div>
<div>
<h6 class="mb-1">Performance</h6>
<p class="text-muted mb-0">Optimized cache & HTTP handling</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- UI/UX Features -->
<div class="row mb-0">
<div class="col-12 mb-0">
<h5 class="mb-3">UI/UX Features</h5>
<div class="row mb-0">
<div class="col-md-4 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-paint-brush text-primary"></i>
</div>
<div>
<h6 class="mb-1">Modern Design</h6>
<p class="text-muted mb-0">Creative and contemporary UI</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-mobile-alt text-success"></i>
</div>
<div>
<h6 class="mb-1">Responsive Bootstrap 5.3.8</h6>
<p class="text-muted mb-0">Mobile-first responsive design</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fab fa-sass text-danger"></i>
</div>
<div>
<h6 class="mb-1">SCSS Styling</h6>
<p class="text-muted mb-0">Advanced CSS preprocessing</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-icons text-info"></i>
</div>
<div>
<h6 class="mb-1">Font Awesome & Tabler</h6>
<p class="text-muted mb-0">Comprehensive icon libraries</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-palette text-success"></i>
</div>
<div>
<h6 class="mb-1">Easy Customization</h6>
<p class="text-muted mb-0">Color and font customization</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="feature-item">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-check-circle text-danger"></i>
</div>
<div>
<h6 class="mb-1">W3C Validated</h6>
<p class="text-muted mb-0">Cross-browser compatibility</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Features -->
<!-- File Structure -->
<section class="section-block hentry" id="file_structure">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Yii Project 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"><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-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></span></a>
</div>
</div>
<div class="card-body">
<div class="file-structure">
<div class="project-overview mb-4">
<h5 class="text-primary mb-3"><i class="fa-solid fa-info-circle me-2"></i>Project Overview</h5>
<p class="mb-0">This Yii project follows the standard directory structure, separating application code, configuration, views, and assets for better organization and maintainability.</p>
</div>
<div class="structure-tree">
<div class="root-item">
<div class="folder-item expanded">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder-open me-2 text-warning"></i>
<span class="fw-bold">smarthr/</span>
<span class="text-muted ms-2">(Root Project)</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span class="fw-semibold">yii/</span>
<span class="text-muted ms-2">(Main Application)</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span class="fw-semibold">template/</span>
<span class="text-muted ms-2">(template files)</span>
</div>
<div class="sub-structure ms-4">
<!-- Assets Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-info"></i>
<span class="fw-semibold">assets/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>AppAssets.php</span>
</div>
</div>
<!-- Commands Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">commands/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>HelloController.php</span>
</div>
</div>
<!-- Config Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span class="fw-semibold">config/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>_autocomplete.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>console.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>db.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>params.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>test_db.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>test.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>web.php</span>
</div>
</div>
<!-- Controllers Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">controllers/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>PagesController.php</span>
</div>
</div>
<!-- Mail Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">mail/</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-info"></i>
<span class="fw-semibold">layouts/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>html.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>text.php</span>
</div>
</div>
</div>
<!-- models Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">models/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>ContactForm.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>LoginForm.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>User.php</span>
</div>
</div>
<!-- Runtime Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">runtime/</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-dark"></i>
<span>cache/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-dark"></i>
<span>debug/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-dark"></i>
<span>logs/</span>
</div>
</div>
<!-- tests Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">tests/</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">_data/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">_output/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">_support/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">acceptance/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">bin/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">functional/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">unit/</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>_bootstrap.php</span>
</div>
</div>
<!-- Vagrant Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">vagrant/</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-dark"></i>
<span>config/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-dark"></i>
<span>nginx/</span>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-dark"></i>
<span>provision/</span>
</div>
</div>
<!-- Views Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-info"></i>
<span class="fw-semibold">views/</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span>layouts/</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span>partials/</span>
<span class="text-muted ms-2">(Reusable components)</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>body.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>footer.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>head-css.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>horizontal-sidebar.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>job-header.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>loader.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>menu.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>main-wrapper.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>modal-popup.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>sidebar.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>stocked-sidebar.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>theme-settings.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>title-meta.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>topbar.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>twocolumn-sidebar.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>vendor-scripts.php</span>
</div>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>auth_main.php</span>
<span class="text-muted ms-2">(Authentication layout)</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>main.php</span>
<span class="text-muted ms-2">(Main application layout)</span>
</div>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>index.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>companies.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>candidates.php</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>*.php</span>
</div>
</div>
<!-- Web Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-warning"></i>
<span class="fw-semibold">web/</span>
</div>
<div class="sub-structure ms-4">
<!-- Assets Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-info"></i>
<span class="fw-semibold">assets/</span>
<span class="text-muted ms-2">(Asset files)</span>
</div>
<div class="sub-structure ms-4">
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span class="fw-semibold">css/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-css3-alt me-2 text-primary"></i>
<span>Stylesheets</span>
</div>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-success"></i>
<span class="fw-semibold">img/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fa-solid fa-file-image me-2 text-success"></i>
<span>Images & Icons</span>
</div>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-warning"></i>
<span class="fw-semibold">fonts/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fas fa-font me-2 text-primary"></i>
<span>Font files</span>
</div>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-warning"></i>
<span class="fw-semibold">js/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-js-square me-2 text-warning"></i>
<span>JavaScript Files</span>
</div>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-danger"></i>
<span class="fw-semibold">scss/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-sass me-2 text-danger"></i>
<span>Sass Source Files</span>
</div>
</div>
<div class="folder-item">
<i class="fa-solid fa-chevron-right me-2 text-muted"></i>
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span class="fw-semibold">plugins/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fa-solid fa-file-code me-2 text-primary"></i>
<span>Third-party Libraries</span>
</div>
</div>
</div>
<div class="file-item">
<i class="fa-solid fa-file-code me-2 text-success"></i>
<span>.htaccess</span>
<span class="text-muted ms-2">(Entry file)</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>index.php</span>
</div>
</div>
<!-- Widgets Directory -->
<div class="folder-item">
<i class="fa-solid fa-chevron-down me-2 text-primary"></i>
<i class="fa-solid fa-folder me-2 text-secondary"></i>
<span class="fw-semibold">widgets/</span>
</div>
<div class="sub-structure ms-4">
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>alerts.php</span>
</div>
</div>
<!-- Root Level Files -->
<div class="file-item">
<i class="fas fa-file me-2 text-muted"></i>
<span>.bowerrc</span>
</div>
<div class="file-item">
<i class="fab fa-git-alt me-2 text-danger"></i>
<span>.gitignore</span>
</div>
<div class="file-item">
<i class="fas fa-file me-2 text-muted"></i>
<span>codeception.yml</span>
</div>
<div class="file-item">
<i class="fas fa-box me-2 text-danger"></i>
<span>composer.json</span>
<span class="text-muted ms-2">(PHP dependencies)</span>
</div>
<div class="file-item">
<i class="fas fa-file me-2 text-muted"></i>
<span>docker-compose.yaml</span>
</div>
<div class="file-item">
<i class="fab fa-node-js me-2 text-success"></i>
<span>package.json</span>
<span class="text-muted ms-2">(Package dependencies)</span>
</div>
<div class="file-item">
<i class="fab fa-php me-2 text-primary"></i>
<span>requirements.php</span>
</div>
<div class="file-item">
<i class="fa-solid fa-file-code me-2 text-primary"></i>
<span>Vagrantfile</span>
</div>
<div class="file-item">
<i class="fa-solid fa-file-code me-2 text-primary"></i>
<span>yii</span>
</div>
<div class="file-item">
<i class="fa-solid fa-file-code me-2 text-primary"></i>
<span>yii.bat</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="structure-legend mt-4">
<h6 class="text-muted mb-3"><i class="fa-solid fa-legend me-2"></i>Legend</h6>
<div class="row">
<div class="col-md-6">
<div class="legend-item mb-2">
<i class="fa-solid fa-folder me-2 text-primary"></i>
<span>Directories</span>
</div>
<div class="legend-item mb-2">
<i class="fab fa-php me-2 text-primary"></i>
<span>PHP Files</span>
</div>
<div class="legend-item mb-2">
<i class="fab fa-js-square me-2 text-warning"></i>
<span>JavaScript Files</span>
</div>
<div class="legend-item mb-2">
<i class="fab fa-css3-alt me-2 text-primary"></i>
<span>CSS Files</span>
</div>
<div class="legend-item mb-2">
<i class="fab fa-git-alt me-2 text-danger"></i>
<span>Git Files</span>
</div>
</div>
<div class="col-md-6">
<div class="legend-item mb-2">
<i class="fab fa-sass me-2 text-danger"></i>
<span>SCSS Files</span>
</div>
<div class="legend-item mb-2">
<i class="fa-brands fa-node-js me-2 text-success"></i>
<span>Node.js Files</span>
</div>
<div class="legend-item mb-2">
<i class="fa-solid fa-file-image me-2 text-success"></i>
<span>Image Files</span>
</div>
<div class="legend-item mb-2">
<i class="fa-solid fa-file-code me-2 text-muted"></i>
<span>yaml Files</span>
</div>
<div class="legend-item mb-2">
<i class="fa-solid fa-file-code me-2 text-primary"></i>
<span>Other Files</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PHP Structure -->
<section class="section-block hentry" id="php_structure">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Yii Template Structure<a class="anchor-link ms-2" href="#php_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"><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-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></span></a>
</div>
</div>
<div class="card-body">
<div class="file-structure">
<h4 class="mb-2 text-dark fw-bold"><code class="language-markup">views/layouts/main.php</code>: Main Layout Template</h4>
<p class="mb-0 text-dark">This file serves as the main layout template using Yii 2's PHP view system. It provides the common HTML structure and includes partial views for consistent page elements.</p>
<p class="mb-0 text-dark">Uses <code class="language-php">$this->render('partials/...')</code> for partial includes and <code class="language-php">$content</code> variable for content injection.</p>
<pre class="language-php mb-3">
<code class="language-php mb-0">
<?php
use yii\helpers\Html;
use yii\web\View;
/* @var $this View */
/* @var $content string */
?>
<!DOCTYPE html>
<?= $this->render('partials/theme-settings') ?>
<head>
<?= $this->render('partials/title-meta') ?>
<?= $this->render('partials/head-css') ?>
</head>
<?= $this->render('partials/body') ?>
<?= $this->render('partials/loader') ?>
<!-- Begin Wrapper -->
<?= $this->render('partials/main-wrapper') ?>
<?= $this->render('partials/menu') ?>
<?= $content ?> <!-- Main content of the page -->
</div>
<!-- End Wrapper -->
<?= $this->render('partials/modal-popup') ?>
<?= $this->render('partials/vendor-scripts') ?>
</body>
</html>
</code>
</pre>
<h4 class="mb-2 mt-4 text-dark fw-bold"><code class="language-markup">views/layouts/auth_main.php</code>: Authentication Layout</h4>
<p class="mb-0 text-dark">This layout is specifically designed for authentication pages (login, register, password reset, etc.) that don't require the main navigation menu.</p>
<p class="mb-0 text-dark">It provides a clean, focused interface without the main navigation elements.</p>
<pre class="language-php mb-3">
<code class="language-php mb-0">
<?php
use yii\helpers\Html;
use yii\web\View;
/* @var $this View */
/* @var $content string */
?>
<!DOCTYPE html>
<?= $this->render('partials/theme-settings') ?>
<head>
<?= $this->render('partials/title-meta') ?>
<?= $this->render('partials/head-css') ?>
</head>
<?= $this->render('partials/body') ?>
<?= $this->render('partials/loader') ?>
<!-- Begin Wrapper -->
<?= $this->render('partials/main-wrapper') ?>
<?= $content ?> <!-- Main content of the page -->
</div>
<!-- End Wrapper -->
<?= $this->render('partials/vendor-scripts') ?>
</body>
</html>
</code>
</pre>
<h4 class="mb-2 text-dark fw-bold"><code class="language-markup">views/index.php</code>: Content Page Template</h4>
<p class="mb-0 text-dark">Each view is rendered within the layout using the <code class="language-php">$content</code> variable. Controllers specify which layout to use and pass data to the view.</p>
<p class="text-dark">This approach provides clean separation of concerns and maintains consistent layout across all pages while allowing flexible content.</p>
<pre class="language-php mb-0">
<code class="language-php mb-0">
<div class="page-wrapper">
<div class="content">
<!-- Your specific page content here -->
</div>
<?= $this->render('partials/footer') ?>
</div>
</code>
</pre>
<div class="alert alert-info mt-4 mb-0">
<div class="d-flex align-items-start">
<div class="me-3">
<i class="fas fa-info-circle text-info fs-4"></i>
</div>
<div>
<h5 class="alert-heading">Yii 2 PHP View System</h5>
<p class="mb-1">This project uses Yii 2's native PHP view system. Key features include:</p>
<ul class="mb-1">
<li>Partial view rendering with <code>$this->render()</code> method</li>
<li>Built-in helpers and widgets for UI components</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /PHP Structure -->
<!-- Installation -->
<section class="section-block hentry" id="html_config">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Installation Guide<a class="anchor-link ms-2" href="#html_config"><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="alert alert-info mb-4">
<div class="d-flex align-items-start">
<div class="me-3">
<i class="fas fa-info-circle text-info fs-4"></i>
</div>
<div>
<p class="mb-0">Follow these steps to set up SmartHR Yii 2 application on your local development environment. This guide covers environment setup, Yii 2 installation, and configuration.</p>
</div>
</div>
</div>
<!-- Installation Steps -->
<div class="row mb-0">
<div class="col-12">
<h5 class="mb-3"><i class="fas fa-server text-primary me-2"></i>Installation Steps</h5>
<!-- Step 1 -->
<div class="card border-0 bg-light mb-3">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<span class="badge bg-primary rounded-circle p-2">1</span>
</div>
<div class="flex-grow-1">
<h6 class="mb-2">System Requirements</h6>
<p class="text-muted mb-2">Ensure you have the required software installed for Yii 2:</p>
<div class="row">
<div class="col-md-4 mb-2">
<div class="d-flex align-items-center">
<i class="fab fa-php text-primary me-2"></i>
<span>PHP 8.2+</span>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-database text-warning me-2"></i>
<span>Database (MySQL/MariaDB)</span>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="d-flex align-items-center">
<i class="fas fa-cogs text-primary me-2"></i>
<span>Composer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="card border-0 bg-light mb-3">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<span class="badge bg-primary rounded-circle p-2">2</span>
</div>
<div class="flex-grow-1">
<h6 class="mb-2">Install Dependencies</h6>
<p class="text-muted mb-2">Open terminal/command prompt in the project root directory and run:</p>
<pre class="language-bash mb-2" style="position: relative;"><code class="language-bash">composer install</code><button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i>Copy</button></pre>
</div>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="card border-0 bg-light mb-0">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<span class="badge bg-primary rounded-circle p-2">3</span>
</div>
<div class="flex-grow-1">
<h6 class="mb-2">Start Development Server</h6>
<p class="text-muted mb-2">Start the Yii 2 development server and access the application:</p>
<pre class="language-bash mb-2" style="position: relative;"><code class="language-bash">php yii serve</code><button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i>Copy</button></pre>
<p class="text-muted mb-2">Or use PHP's built-in server:</p>
<pre class="language-bash mb-2" style="position: relative;"><code class="language-bash">php -S localhost:8080 -t web/</code><button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i>Copy</button></pre>
<div class="alert alert-success border-start border-success border-3 mb-0">
<div class="d-flex align-items-center">
<i class="fas fa-link text-success me-2"></i>
<div>
<strong>Access the application at:</strong>
<br><code>http://localhost:8000</code>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Installation -->
<!-- Scss Installation -->
<section class="section-block hentry" id="scss_install">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Sass, Scss Installation<a class="anchor-link ms-2" href="#scss_install"><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">
<!-- Overview -->
<div class="alert alert-info mb-4">
<div class="d-flex align-items-start">
<div class="me-3">
<i class="fas fa-info-circle text-info fs-4"></i>
</div>
<div>
<h6 class="mb-2">Overview</h6>
<p class="mb-0">Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, mixins, and more. This guide covers the installation and setup of Sass for the SmartHR template.</p>
</div>
</div>
</div>
<!-- Prerequisites -->
<div class="row mb-4">
<div class="col-12">
<h5 class="mb-3"><i class="fas fa-check-circle text-success me-2"></i>Prerequisites</h5>
<div class="card border-0 bg-light">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<i class="fas fa-download text-primary fs-4"></i>
</div>
<div class="flex-grow-1">
<h6 class="mb-2">Node.js Installation</h6>
<p class="text-muted mb-2">Before installing Sass, ensure you have Node.js installed on your system:</p>
<div class="alert alert-light border-start border-primary border-3 mb-0">
<div class="d-flex align-items-center">
<i class="fas fa-link text-primary me-2"></i>
<div>
<strong>Download Node.js:</strong>
<br><a href="https://nodejs.org/en/download/" target="_blank" class="text-decoration-none">https://nodejs.org/en/download/</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Installation Steps -->
<div class="row mb-4">
<div class="col-12">
<h5 class="mb-3"><i class="fas fa-cogs text-primary me-2"></i>Installation Steps</h5>
<!-- Step 1 -->
<div class="card border-0 bg-light mb-3">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<span class="badge bg-primary rounded-circle p-2">1</span>
</div>
<div class="flex-grow-1">
<h6 class="mb-2">Install NPM Package Manager</h6>
<p class="text-muted mb-2">Install the latest version of npm package manager:</p>
<pre class="language-bash mb-2" style="position: relative;"><code class="language-bash">npm install -g npm@latest</code><button class="code-copy-btn" onclick="copyToClipboard(this)" title="Copy to clipboard"><i class="fas fa-copy"></i>Copy</button></pre>
<div class="alert alert-light border-start border-info border-3 mb-0">
<small><i class="fas fa-terminal text-info me-1"></i><strong>Note:</strong> This ensures you have the latest npm version</small>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="card border-0 bg-light mb-3">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<span class="badge bg-primary rounded-circle p-2">2</span>
</div>
<div class="flex-grow-1">
<h6 class="mb-2">Install Sass Globally</h6>
<p class="text-muted mb-2">Install Dart Sass globally using npm:</p>
<pre class="language-bash mb-0" style="position: relative;"><code class="language-bash">npm install -g sass</code><button class="code-copy-btn" onclick="copyToClipboard(this)" title="Copy to clipboard"><i class="fas fa-copy"></i>Copy</button></pre>
<!-- <div class="alert alert-light border-start border-success border-3 mb-0">
<small><i class="fas fa-check text-success me-1"></i><strong>Success:</strong> Dart Sass is the recommended Sass implementation</small>
</div> -->
</div>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="card border-0 bg-light mb-3">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<span class="badge bg-primary rounded-circle p-2">3</span>
</div>
<div class="flex-grow-1">
<h6 class="mb-2">Verify Installation</h6>
<p class="text-muted mb-2">Check if Sass is installed correctly:</p>
<pre class="language-bash mb-0" style="position: relative;"><code class="language-bash">sass --version</code><button class="code-copy-btn" onclick="copyToClipboard(this)" title="Copy to clipboard"><i class="fas fa-copy"></i>Copy</button></pre>
<!-- <div class="alert alert-light border-start border-warning border-3 mb-0">
<small><i class="fas fa-info text-warning me-1"></i><strong>Expected Output:</strong> Should display the Sass version number</small>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Compilation Methods -->
<div class="row mb-3">
<div class="col-12">
<h5 class="mb-3"><i class="fas fa-code text-success me-2"></i>Compilation Methods</h5>
<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead class="table-light">
<tr>
<th class="text-center" style="width: 80px;">
<i class="fas fa-icons text-primary"></i>
</th>
<th style="width: 180px;" class="text-center align-middle">Method</th>
<th style="width: 200px;" class="text-center align-middle">Description</th>
<th style="width: 280px;" class="text-center align-middle">Default Sass Command</th>
<th style="width: 140px;" class="text-center align-middle">npm Script Command</th>
</tr>
</thead>
<tbody>
<tr class="align-middle">
<td class="text-center">
<i class="fas fa-play text-primary fs-4"></i>
</td>
<td class="align-middle">
<strong class="d-block mb-1">One-time Compilation</strong>
<small class="text-muted">(Production)</small>
</td>
<td class="align-middle">
<p class="mb-0">Compile SCSS files once for production with minified output</p>
</td>
<td class="text-start align-middle">
<code class="language-bash d-block p-2 bg-light rounded mb-0" style="position: relative;">sass web/assets/scss/main.scss:web/assets/css/style.css<button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button></code>
</td>
<td class="align-middle">
<code class="language-bash d-block p-2 bg-light rounded mb-0" style="position: relative;">npm run sass<button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button></code>
</td>
</tr>
<tr class="align-middle">
<td class="text-center">
<i class="fas fa-redo text-success fs-4"></i>
</td>
<td class="align-middle">
<strong class="d-block mb-1">Watch Mode</strong>
<small class="text-muted">(Development)</small>
</td>
<td class="align-middle">
<p class="mb-0">Automatically recompile on file changes for real-time development</p>
</td>
<td class="text-center align-middle">
<code class="language-bash d-block p-2 bg-light rounded mb-0" style="position: relative;">sass web/assets/scss/main.scss:web/assets/css/style.css --watch<button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button></code>
</td>
<td class="align-middle">
<code class="language-bash d-block p-2 bg-light rounded mb-0" style="position: relative;">npm run sass:watch<button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button></code>
</td>
</tr>
<tr class="align-middle">
<td class="text-center">
<i class="fas fa-layer-group text-warning fs-4"></i>
</td>
<td class="align-middle">
<strong class="d-block mb-1">Run Without Source Map</strong>
<small class="text-muted">(Production/Optional)</small>
</td>
<td class="align-middle">
<p class="mb-0">Compile SCSS without generating source maps, ideal for production builds</p>
</td>
<td class="text-center align-middle">
<code class="language-bash d-block p-2 bg-light rounded mb-0" style="position: relative;">sass web/assets/scss/main.scss:web/assets/css/style.css --style=compressed --no-source-map<button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button></code>
</td>
<td class="align-middle">
<code class="language-bash d-block p-2 bg-light rounded mb-0" style="position: relative;">npm run sass:no-map<button class="code-copy-btn" onclick="copyToClipboard(this)"><i class="fas fa-copy"></i></button></code>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Best Practices -->
<div class="row mb-0">
<div class="col-12">
<h5 class="mb-3"><i class="fas fa-star text-warning me-2"></i>Best Practices</h5>
<div class="row mb-0">
<div class="col-md-6 mb-0">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<i class="fas fa-laptop text-primary fs-4"></i>
</div>
<div>
<h6 class="mb-2">Development</h6>
<ul class="list-unstyled mb-0">
<li><i class="fas fa-check text-success me-1"></i>Use watch mode for real-time updates</li>
<li><i class="fas fa-check text-success me-1"></i>Enable source maps for debugging</li>
<li><i class="fas fa-check text-success me-1"></i>Organize SCSS with partials</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-0">
<div class="card border-0 bg-light h-100">
<div class="card-body">
<div class="d-flex align-items-start">
<div class="me-3">
<i class="fas fa-rocket text-success fs-4"></i>
</div>
<div>
<h6 class="mb-2">Production</h6>
<ul class="list-unstyled mb-0">
<li><i class="fas fa-check text-success me-1"></i>Use compressed output style</li>
<li><i class="fas fa-check text-success me-1"></i>Minimize file size</li>
<li><i class="fas fa-check text-success me-1"></i>Optimize for performance</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Scss Installation -->
<!-- Dynamic Title Feature -->
<section class="section-block hentry" id="dynamic_title">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Dynamic Title Feature<a class="anchor-link ms-2" href="#dynamic_title"><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="server">
<!-- Overview Section -->
<div class="row mb-3">
<div class="col-12">
<h5 class="mb-2">
<i class="fas fa-info-circle text-info me-2"></i>
Overview
</h5>
<p class="mb-0">The SmartHR Yii 2 application implements an intelligent title generation system using PHP that analyzes route names and converts them into user-friendly page titles. This system processes route names through multiple transformation steps to create readable, properly formatted titles.</p>
</div>
</div>
<div class="row mb-3">
<div class="col-md-8">
<div class="alert alert-light border-start border-primary border-4 mb-2">
<div class="d-flex align-items-start">
<i class="fas fa-file-code text-primary me-2 mt-1"></i>
<div>
<strong>File Location:</strong> <code>views/partials/title-meta.php</code>
<br><small class="text-muted">This partial view contains the title generation logic</small>
</div>
</div>
</div>
</div>
</div>
<!-- Key Features Section -->
<h5 class="mb-3">
Key Features
</h5>
<div class="row mb-3">
<div class="col-md-4">
<div class="feature-item mb-2">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-palette text-success"></i>
</div>
<div>
<h6 class="mb-1">Extensible</h6>
<p class="text-muted mb-0">Easily extendable with custom title generation rules</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item mb-2">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-icons text-info"></i>
</div>
<div>
<h6 class="mb-1">Smart Suffix Detection</h6>
<p class="text-muted mb-0">Automatically customize suffixes like "Icons", "Charts", etc.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item mb-2">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-edit text-primary"></i>
</div>
<div>
<h6 class="mb-1">Title Formatting</h6>
<p class="text-muted mb-0">Converts route names to properly formatted page titles</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item mb-2">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-search text-warning"></i>
</div>
<div>
<h6 class="mb-1">Yii 2 Integration</h6>
<p class="text-muted mb-0">Easily accessible in Yii 2 views via the <code>$this->title</code> property</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item mb-2">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-font text-success"></i>
</div>
<div>
<h6 class="mb-1">Smart Acronym Detection</h6>
<p class="text-muted mb-0">Automatically detects and formats common acronyms in route names</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-item mb-2">
<div class="d-flex align-items-start">
<div class="feature-icon me-3">
<i class="fas fa-star text-warning"></i>
</div>
<div>
<h6 class="mb-1">Professional Appearance</h6>
<p class="text-muted mb-0">Consistent and polished title formatting</p>
</div>
</div>
</div>
</div>
</div>
<!-- Examples Section -->
<div class="row mb-3 examples-how-it-works">
<div class="col-md-6">
<h5 class="mb-2">
<i class="fas fa-code text-secondary me-2"></i>
Examples
</h5>
<div class="alert alert-secondary">
<ul class="mb-0">
<li class="mt-0">index → "Admin Dashboard"</li>
<li class="mb-1">asset-categories → "Asset Categories"</li>
<li class="mb-1">ban-ip-address → "Ban IP Address"</li>
<li class="mb-1">ui-alerts → "Alerts"</li>
<li class="mb-0">chart-js → "JS Charts"</li>
<li class="mb-0">reset-password-1 → "Reset Password"</li>
</ul>
</div>
</div>
<div class="col-md-6">
<h5 class="mb-2">
<i class="fas fa-lightbulb text-warning me-2"></i>
How It Works
</h5>
<div class="alert alert-info">
<ol class="mb-0">
<li class="mt-0">The system captures the current route name from the Yii 2 router</li>
<li class="mb-1">Removes common prefixes and numeric suffixes</li>
<li class="mb-1">Converts underscores and hyphens to spaces</li>
<li class="mb-1">Applies proper title case formatting and handles acronyms</li>
<li class="mb-1">Processes special cases and exceptions</li>
<li class="mb-0">Returns the formatted title for display in the view</li>
</ol>
</div>
</div>
</div>
<!-- Title Format Section -->
<h5 class="mb-2">
<i class="fas fa-tag text-primary me-2"></i>
Title Format
</h5>
<div class="row mb-3">
<div class="col-12">
<p class="mb-2">All generated titles follow this consistent format:</p>
<pre class="language-html mb-3"><code class="language-html"><title> {Generated Title} | SmartHR - Advanced Bootstrap 5 Multipurpose Admin Dashboard Template for HRM, Payroll & CRM</title></code></pre>
<div class="card border-primary mt-3">
<div class="card-header bg-primary text-white">
<i class="fas fa-eye me-2"></i>
Example Output
</div>
<div class="card-body">
<p class="text-muted mb-1">For <code>cronjob-schedule</code></p>
<p class="mb-0 fw-bold">Cronjob Schedule | SmartHR - Advanced Bootstrap 5 Multipurpose Admin Dashboard Template for HRM, Payroll & CRM</p>
</div>
</div>
</div>
</div>
<div class="alert alert-info mb-0">
<span class="badge rounded-pill text-bg-info text-uppercase">
<i class="fas fa-info-circle me-1"></i>
Note
</span>
<p class="mb-0 mt-2">The system automatically handles title generation using Yii 2 Controllers. For custom acronyms and suffixes like "Icons" or "Charts", you may need to manually add them to the title generation logic in <code>views/partials/title-meta.php</code>.</p>
</div>
</div>
</div>
</div>
</section>
<!-- /Dynamic Title Feature -->
<!-- RTL Layout Feature -->
<section class="section-block hentry" id="rtl_layout">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">RTL Language Support<a class="anchor-link ms-2" href="#rtl_layout"><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="server">
<h5 class="mb-2">Overview</h5>
<p class="mb-3">The application provides comprehensive RTL (Right-to-Left) language support for languages like Arabic, Hebrew, and Persian. It uses Yii 2 PHP templating to conditionally load RTL-specific styles and assets.</p>
<h5 class="mb-2">RTL Implementation</h5>
<p class="mb-2">RTL support is implemented through the following components:</p>
<h6 class="mt-3 mb-2">RTL CSS Loading</h6>
<p>The application uses PHP conditionals in <code>views/layouts/partials/head-css.php</code> to load the appropriate CSS file based on the current page:</p>
<pre class="language-php mb-4"><code class="language-php"><?php
use yii\helpers\Url;
$path = Yii::$app->request->getPathInfo();
// Handle root path - if empty, treat as index page
$page = empty($path) ? 'index' : basename($path);
?>
<?php if ($page !== 'layout-rtl'){?>
<!-- Bootstrap CSS -->
<link rel = 'stylesheet' href ="<?= Url::to('@web/assets/css/bootstrap.min.css') ?>">
<?php }?>
<?php if ($page === 'layout-rtl'){?>
<!-- Bootstrap RTL CSS -->
<link rel="stylesheet" href="<?= Url::to('@web/assets/css/bootstrap.rtl.min.css') ?>">
<?php }?></code></pre>
<h6 class="mt-4 mb-2">RTL Layout Structure</h6>
<p>The application uses a dedicated RTL layout template that can be extended by other templates when RTL support is needed. The RTL layout includes:</p>
<ul class="custom-list mb-3">
<li>RTL-specific CSS classes and overrides</li>
<li>Right-aligned navigation and UI elements</li>
<li>Mirrored layout for RTL languages</li>
</ul>
<h5 class="mb-2">Key Features</h5>
<ul class="custom-list mb-3">
<li><i class="fa-solid fa-check text-success me-2"></i><strong>PHP-Powered Conditional Loading</strong> - Dynamically loads RTL or LTR styles based on the current route</li>
<li><i class="fa-solid fa-check text-success me-2"></i><strong>Bootstrap RTL Support</strong> - Leverages Bootstrap's built-in RTL CSS framework</li>
<li><i class="fa-solid fa-check text-success me-2"></i><strong>Component-Based Architecture</strong> - Leverages Yii 2's component system for modular RTL support</li>
<li><i class="fa-solid fa-check text-success me-2"></i><strong>Page-Based Detection</strong> - Automatically detects RTL pages and loads appropriate stylesheets</li>
</ul>
<div class="alert alert-info mb-0">
<span class="badge rounded-pill text-bg-info text-uppercase">Note</span>
<p class="mb-0">The conditional CSS loading automatically detects RTL pages using Yii 2'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 Yii 2's built-in asset management capabilities.</p>
</div>
</div>
</div>
</div>
</section>
<!-- /RTL Layout Feature -->
<!-- Change Logo -->
<section class="section-block hentry" id="change_logo">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">How to change Logo ? <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"><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-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></span></a>
</div>
</div>
<div class="card-body">
<div class="file-structure">
<p>You can change the logo or replace it from img folder or you can edit it from Php file.</p>
<pre class="language-javascript mb-0"><code class="language-javascript"><div class="header">
<a href="index" class="logo">
<img src="assets/img/logo.svg" alt="logo">
<a>
</div> </code></pre>
</div>
</div>
</div>
</section>
<!-- Typography -->
<section class="section-block hentry" id="typography">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Typography<a class="anchor-link ms-2" href="#typography"><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="server typography">
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>
</div>
</div>
</section>
<!-- /Typography -->
<!-- Icon -->
<section class="section-block hentry" id="icon">
<div class="custom-card">
<div class="card-header">
<h4 class="card-title">Icons<a class="anchor-link ms-2" href="#icon"><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="server">
<p>Use Font Awesome icons with spesific class </p>
<pre class="language-markup"><code class="language-markup mb-0">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
</head>
</html>
</code></pre>
<pre class="language-markup mb-0"><code>
<i class="fas fa-times"></i>
<i class="fas fa-chevron-down"></i>
<i class="fa-regular fa-user"></i>
</code></pre>
</div>
</div>
</div>
</section>
<!-- /Icon -->
<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="#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">
<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">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="https://www.facebook.com/dreamstechnologieslimited/" class="footer-link me-2" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="https://twitter.com/dreamstechltd" class="footer-link me-2" target="_blank"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.behance.net/dreamstechnologies" class="footer-link me-2" target="_blank"><i class="fa-brands fa-behance"></i></a>
<a href="https://dribbble.com/dreamstechnologies" class="footer-link me-2" target="_blank"><i class="fa-brands fa-dribbble"></i></a>
<a href="https://www.instagram.com/dreamstechnologieslimited/" class="footer-link" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</footer>
</div>
</main>
<script src="assets/js_new/jquery-3.7.1.min.js"></script>
<script src="assets/js_new/bootstrap.bundle.min.js"></script>
<script src="assets/js_new/prism.js"></script>
<script src="assets/js_new/feather.min.js"></script>
<script src="assets/js_new/jquery.zoom.min.js"></script>
<script src="assets/js_new/jquery.magnific-popup.min.js"></script>
<script src="assets/js_new/isotope.pkgd.min.js"></script>
<script src="assets/js_new/main.js"></script>
</body>
</html>