HR System Management Admin Dashboard | Clone Full Code Laravel 8

              

Admin dashboard in Laravel ​8.X | HR MS


'

Step 1: Install Laravel 8

step: Install UI

Note:

composer require laravel/ui
php artisan ui vue --auth

First, install a new Laravel app just by running the below command in your terminal.

composer create-project --prefer-dist laravel/laravel hr_ms_laravel8


Step 2: Update Your Database Credentials

After that update your database credentials in your .env file which is located in your project root.

1. connection databases

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database password
2. for send mail when fogot password

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password email'
MAIL_ENCRYPTION=tls

Step 3: Make Migration

After adding the migration file now run the migrate command.

php artisan migrate

Step 4: Add in Home Page

Add the below code in your home.blade.php file.

Resources/Views/dashboard/dashbiard.blade.php

@extends('layouts.master')
{{--
@section('menu')
@extends('sidebar.dashboard')
@endsection --}}
@section('content')
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="menu-title">
<span>Main</span>
</li>
<li class="submenu">
<a href="#"><i class="la la-dashboard"></i>
<span> Dashboard</span> <span class="menu-arrow"></span>
</a>
<ul style="display: none;">
<li><a class="active" href="{{ route('home') }}">Admin Dashboard</a></li>
<li><a href="{{ route('em/dashboard') }}">Employee Dashboard</a></li>
</ul>
</li>
<li class="menu-title"> <span>Employees</span> </li>
<li class="submenu">
<a href="#" class="noti-dot">
<i class="la la-user"></i> <span> Employees</span> <span class="menu-arrow"></span>
</a>
<ul style="display: none;">
<li><a href="employees.html">All Employees</a></li>
<li><a href="holidays.html">Holidays</a></li>
<li><a href="leaves.html">Leaves (Admin)
<span class="badge badge-pill bg-primary float-right">1</span></a>
</li>
<li><a href="leaves-employee.html">Leaves (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
<li><a href="attendance.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="timesheet.html">Timesheet</a></li>
<li><a href="shift-scheduling.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-rocket"></i>
<span> Projects</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="projects.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
<li class="menu-title"> <span>HR</span> </li>
<li class="submenu"> <a href="#"><i class="la la-files-o"></i>
<span> Sales </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-files-o"></i>
<span> Accounting </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-money"></i>
<span> Payroll </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="salary.html"> Employee Salary </a></li>
<li><a href="salary-view.html"> Payslip </a></li>
<li><a href="payroll-items.html"> Payroll Items </a></li>
</ul>
</li>
<li> <a href="policies.html">
<i class="la la-file-pdf-o"></i>
<span>Policies</span></a>
</li>
<li class="submenu"> <a href="#"><i class="la la-pie-chart"></i>
<span> Reports </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="expense-reports.html"> Expense Report </a></li>
<li><a href="invoice-reports.html"> Invoice Report </a></li>
<li><a href="payments-reports.html"> Payments Report </a></li>
<li><a href="project-reports.html"> Project Report </a></li>
<li><a href="task-reports.html"> Task Report </a></li>
<li><a href="user-reports.html"> User Report </a></li>
<li><a href="employee-reports.html"> Employee Report </a></li>
<li><a href="payslip-reports.html"> Payslip Report </a></li>
<li><a href="attendance-reports.html"> Attendance Report </a></li>
<li><a href="leave-reports.html"> Leave Report </a></li>
<li><a href="daily-reports.html"> Daily Report </a></li>
</ul>
</li>
<li class="menu-title"> <span>Performance</span> </li>
<li class="submenu"> <a href="#"><i class="la la-graduation-cap"></i>
<span> Performance </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="performance-indicator.html"> Performance Indicator </a></li>
<li><a href="performance.html"> Performance Review </a></li>
<li><a href="performance-appraisal.html"> Performance Appraisal </a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-crosshairs"></i>
<span> Goals </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="goal-tracking.html"> Goal List </a></li>
<li><a href="goal-type.html"> Goal Type </a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-edit"></i>
<span> Training </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="training.html"> Training List </a></li>
<li><a href="trainers.html"> Trainers</a></li>
<li><a href="training-type.html"> Training Type </a></li>
</ul>
</li>
<li><a href="promotion.html"><i class="la la-bullhorn"></i> <span>Promotion</span></a></li>
<li><a href="resignation.html"><i class="la la-external-link-square"></i> <span>Resignation</span></a></li>
<li><a href="termination.html"><i class="la la-times-circle"></i> <span>Termination</span></a></li>
<li class="menu-title"> <span>Administration</span> </li>
<li> <a href="assets.html"><i class="la la-object-ungroup">
</i> <span>Assets</span></a>
</li>
<li class="submenu"> <a href="#"><i class="la la-briefcase"></i>
<span> Jobs </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="user-dashboard.html"> User Dasboard </a></li>
<li><a href="jobs-dashboard.html"> Jobs Dasboard </a></li>
<li><a href="jobs.html"> Manage Jobs </a></li>
<li><a href="manage-resumes.html"> Manage Resumes </a></li>
<li><a href="shortlist-candidates.html"> Shortlist Candidates </a></li>
<li><a href="interview-questions.html"> Interview Questions </a></li>
<li><a href="offer_approvals.html"> Offer Approvals </a></li>
<li><a href="experiance-level.html"> Experience Level </a></li>
<li><a href="candidates.html"> Candidates List </a></li>
<li><a href="schedule-timing.html"> Schedule timing </a></li>
<li><a href="apptitude-result.html"> Aptitude Results </a></li>
</ul>
</li>
<li class="menu-title"> <span>Pages</span> </li>
<li class="submenu"> <a href="#"><i class="la la-user"></i>
<span> Profile </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="profile.html"> Employee Profile </a></li>
<li><a href="client-profile.html"> Client Profile </a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Sidebar -->
<div class="page-wrapper">
<!-- Page Content -->
<div class="content container-fluid">
<!-- Page Header -->
<div class="page-header">
<div class="row">
<div class="col-sm-12">
<h3 class="page-title">Welcome Admin!</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item active">Dashboard</li>
</ul>
</div>
</div>
</div>
<!-- /Page Header -->
<div class="row">
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-cubes"></i></span>
<div class="dash-widget-info">
<h3>112</h3> <span>Projects</span> </div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-usd"></i></span>
<div class="dash-widget-info">
<h3>44</h3> <span>Clients</span> </div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-diamond"></i></span>
<div class="dash-widget-info">
<h3>37</h3> <span>Tasks</span> </div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-user"></i></span>
<div class="dash-widget-info">
<h3>218</h3> <span>Employees</span> </div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 text-center">
<div class="card">
<div class="card-body">
<h3 class="card-title">Total Revenue</h3>
<div id="bar-charts"></div>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="card">
<div class="card-body">
<h3 class="card-title">Sales Overview</h3>
<div id="line-charts"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card-group m-b-30">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">New Employees</span> </div>
<div> <span class="text-success">+10%</span> </div>
</div>
<h3 class="mb-3">10</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Overall Employees 218</p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">Earnings</span> </div>
<div> <span class="text-success">+12.5%</span> </div>
</div>
<h3 class="mb-3">$1,42,300</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Previous Month <span class="text-muted">$1,15,852</span></p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">Expenses</span> </div>
<div> <span class="text-danger">-2.8%</span> </div>
</div>
<h3 class="mb-3">$8,500</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Previous Month <span class="text-muted">$7,500</span></p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">Profit</span> </div>
<div> <span class="text-danger">-75%</span> </div>
</div>
<h3 class="mb-3">$1,12,000</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Previous Month <span class="text-muted">$1,42,000</span></p>
</div>
</div>
</div>
</div>
</div>
{{-- message --}}
{!! Toastr::message() !!}
<!-- Statistics Widget -->
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-4 d-flex">
<div class="card flex-fill dash-statistics">
<div class="card-body">
<h5 class="card-title">Statistics</h5>
<div class="stats-list">
<div class="stats-info">
<p>Today Leave <strong>4 <small>/ 65</small></strong></p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 31%" aria-valuenow="31" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Pending Invoice <strong>15 <small>/ 92</small></strong></p>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 31%" aria-valuenow="31" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Completed Projects <strong>85 <small>/ 112</small></strong></p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Open Tickets <strong>190 <small>/ 212</small></strong></p>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Closed Tickets <strong>22 <small>/ 212</small></strong></p>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill">
<div class="card-body">
<h4 class="card-title">Task Statistics</h4>
<div class="statistics">
<div class="row">
<div class="col-md-6 col-6 text-center">
<div class="stats-box mb-4">
<p>Total Tasks</p>
<h3>385</h3> </div>
</div>
<div class="col-md-6 col-6 text-center">
<div class="stats-box mb-4">
<p>Overdue Tasks</p>
<h3>19</h3> </div>
</div>
</div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-purple" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 22%" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">22%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 24%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100">24%</div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 26%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100">21%</div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
<div>
<p><i class="fa fa-dot-circle-o text-purple mr-2"></i>Completed Tasks <span class="float-right">166</span></p>
<p><i class="fa fa-dot-circle-o text-warning mr-2"></i>Inprogress Tasks <span class="float-right">115</span></p>
<p><i class="fa fa-dot-circle-o text-success mr-2"></i>On Hold Tasks <span class="float-right">31</span></p>
<p><i class="fa fa-dot-circle-o text-danger mr-2"></i>Pending Tasks <span class="float-right">47</span></p>
<p class="mb-0"><i class="fa fa-dot-circle-o text-info mr-2"></i>Review Tasks <span class="float-right">5</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill">
<div class="card-body">
<h4 class="card-title">Today Absent <span class="badge bg-inverse-danger ml-2">5</span></h4>
<div class="leave-info-box">
<div class="media align-items-center">
<a href="profile.html" class="avatar"><img alt="" src="assets/img/user.jpg"></a>
<div class="media-body">
<div class="text-sm my-0">Martin Lewis</div>
</div>
</div>
<div class="row align-items-center mt-3">
<div class="col-6">
<h6 class="mb-0">4 Sep 2019</h6> <span class="text-sm text-muted">Leave Date</span> </div>
<div class="col-6 text-right"> <span class="badge bg-inverse-danger">Pending</span> </div>
</div>
</div>
<div class="leave-info-box">
<div class="media align-items-center">
<a href="profile.html" class="avatar"><img alt="" src="assets/img/user.jpg"></a>
<div class="media-body">
<div class="text-sm my-0">Martin Lewis</div>
</div>
</div>
<div class="row align-items-center mt-3">
<div class="col-6">
<h6 class="mb-0">4 Sep 2019</h6> <span class="text-sm text-muted">Leave Date</span> </div>
<div class="col-6 text-right"> <span class="badge bg-inverse-success">Approved</span> </div>
</div>
</div>
<div class="load-more text-center"> <a class="text-dark" href="javascript:void(0);">Load More</a> </div>
</div>
</div>
</div>
</div>
<!-- /Statistics Widget -->
<div class="row">
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Invoices</h3> </div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-nowrap custom-table mb-0">
<thead>
<tr>
<th>Invoice ID</th>
<th>Client</th>
<th>Due Date</th>
<th>Total</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="invoice-view.html">#INV-0001</a></td>
<td>
<h2><a href="#">Global Technologies</a></h2> </td>
<td>11 Mar 2019</td>
<td>$380</td>
<td> <span class="badge bg-inverse-warning">Partially Paid</span> </td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0002</a></td>
<td>
<h2><a href="#">Delta Infotech</a></h2> </td>
<td>8 Feb 2019</td>
<td>$500</td>
<td> <span class="badge bg-inverse-success">Paid</span> </td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0003</a></td>
<td>
<h2><a href="#">Cream Inc</a></h2> </td>
<td>23 Jan 2019</td>
<td>$60</td>
<td> <span class="badge bg-inverse-danger">Unpaid</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer"> <a href="invoices.html">View all invoices</a> </div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Payments</h3> </div>
<div class="card-body">
<div class="table-responsive">
<table class="table custom-table table-nowrap mb-0">
<thead>
<tr>
<th>Invoice ID</th>
<th>Client</th>
<th>Payment Type</th>
<th>Paid Date</th>
<th>Paid Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="invoice-view.html">#INV-0001</a></td>
<td>
<h2><a href="#">Global Technologies</a></h2> </td>
<td>Paypal</td>
<td>11 Mar 2019</td>
<td>$380</td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0002</a></td>
<td>
<h2><a href="#">Delta Infotech</a></h2> </td>
<td>Paypal</td>
<td>8 Feb 2019</td>
<td>$500</td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0003</a></td>
<td>
<h2><a href="#">Cream Inc</a></h2> </td>
<td>Paypal</td>
<td>23 Jan 2019</td>
<td>$60</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer"> <a href="payments.html">View all payments</a> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Clients</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table custom-table mb-0">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2 class="table-avatar">
<a href="#" class="avatar"><img alt="" src="assets/img/profiles/avatar-19.jpg"></a>
<a href="client-profile.html">Barry Cuda <span>CEO</span></a>
</h2>
</td>
<td>barrycuda@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-success"></i> Active </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action"> <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="#" class="avatar"><img alt="" src="assets/img/profiles/avatar-19.jpg"></a>
<a href="client-profile.html">Tressa Wexler <span>Manager</span></a>
</h2>
</td>
<td>tressawexler@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-danger"></i> Inactive </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="client-profile.html" class="avatar">
<img alt="" src="assets/img/profiles/avatar-07.jpg">
</a>
<a href="client-profile.html">Ruby Bartlett <span>CEO</span></a>
</h2>
</td>
<td>rubybartlett@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-danger"></i> Inactive </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="client-profile.html" class="avatar">
<img alt="" src="assets/img/profiles/avatar-06.jpg">
</a>
<a href="client-profile.html"> Misty Tison <span>CEO</span></a>
</h2>
</td>
<td>mistytison@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-success"></i> Active </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a> <a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="client-profile.html" class="avatar">
<img alt="" src="assets/img/profiles/avatar-14.jpg">
</a>
<a href="client-profile.html"> Daniel Deacon <span>CEO</span></a>
</h2>
</td>
<td>danieldeacon@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-danger"></i> Inactive </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer"> <a href="clients.html">View all clients</a> </div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Recent Projects</h3> </div>
<div class="card-body">
<div class="table-responsive">
<table class="table custom-table mb-0">
<thead>
<tr>
<th>Project Name </th>
<th>Progress</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2>
<a href="project-view.html">Office Management</a>
</h2>
<small class="block text-ellipsis">
<span>1</span> <span class="text-muted">open tasks, </span>
<span>9</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="65%" style="width: 65%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Project Management</a>
</h2>
<small class="block text-ellipsis">
<span>2</span> <span class="text-muted">open tasks, </span>
<span>5</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="15%" style="width: 15%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Video Calling App</a>
</h2>
<small class="block text-ellipsis">
<span>3</span> <span class="text-muted">open tasks, </span>
<span>3</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="49%" style="width: 49%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Hospital Administration</a>
</h2>
<small class="block text-ellipsis">
<span>12</span> <span class="text-muted">open tasks, </span>
<span>4</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="88%" style="width: 88%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Digital Marketplace</a>
</h2>
<small class="block text-ellipsis">
<span>7</span> <span class="text-muted">open tasks, </span>
<span>14</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="100%" style="width: 100%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<a href="projects.html">View all projects</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Page Content -->
</div>
@endsection@extends('layouts.master')
{{--
@section('menu')
@extends('sidebar.dashboard')
@endsection --}}
@section('content')
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="menu-title">
<span>Main</span>
</li>
<li class="submenu">
<a href="#"><i class="la la-dashboard"></i>
<span> Dashboard</span> <span class="menu-arrow"></span>
</a>
<ul style="display: none;">
<li><a class="active" href="{{ route('home') }}">Admin Dashboard</a></li>
<li><a href="{{ route('em/dashboard') }}">Employee Dashboard</a></li>
</ul>
</li>
<li class="menu-title"> <span>Employees</span> </li>
<li class="submenu">
<a href="#" class="noti-dot">
<i class="la la-user"></i> <span> Employees</span> <span class="menu-arrow"></span>
</a>
<ul style="display: none;">
<li><a href="employees.html">All Employees</a></li>
<li><a href="holidays.html">Holidays</a></li>
<li><a href="leaves.html">Leaves (Admin)
<span class="badge badge-pill bg-primary float-right">1</span></a>
</li>
<li><a href="leaves-employee.html">Leaves (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
<li><a href="attendance.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="timesheet.html">Timesheet</a></li>
<li><a href="shift-scheduling.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-rocket"></i>
<span> Projects</span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="projects.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
<li class="menu-title"> <span>HR</span> </li>
<li class="submenu"> <a href="#"><i class="la la-files-o"></i>
<span> Sales </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-files-o"></i>
<span> Accounting </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-money"></i>
<span> Payroll </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="salary.html"> Employee Salary </a></li>
<li><a href="salary-view.html"> Payslip </a></li>
<li><a href="payroll-items.html"> Payroll Items </a></li>
</ul>
</li>
<li> <a href="policies.html">
<i class="la la-file-pdf-o"></i>
<span>Policies</span></a>
</li>
<li class="submenu"> <a href="#"><i class="la la-pie-chart"></i>
<span> Reports </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="expense-reports.html"> Expense Report </a></li>
<li><a href="invoice-reports.html"> Invoice Report </a></li>
<li><a href="payments-reports.html"> Payments Report </a></li>
<li><a href="project-reports.html"> Project Report </a></li>
<li><a href="task-reports.html"> Task Report </a></li>
<li><a href="user-reports.html"> User Report </a></li>
<li><a href="employee-reports.html"> Employee Report </a></li>
<li><a href="payslip-reports.html"> Payslip Report </a></li>
<li><a href="attendance-reports.html"> Attendance Report </a></li>
<li><a href="leave-reports.html"> Leave Report </a></li>
<li><a href="daily-reports.html"> Daily Report </a></li>
</ul>
</li>
<li class="menu-title"> <span>Performance</span> </li>
<li class="submenu"> <a href="#"><i class="la la-graduation-cap"></i>
<span> Performance </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="performance-indicator.html"> Performance Indicator </a></li>
<li><a href="performance.html"> Performance Review </a></li>
<li><a href="performance-appraisal.html"> Performance Appraisal </a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-crosshairs"></i>
<span> Goals </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="goal-tracking.html"> Goal List </a></li>
<li><a href="goal-type.html"> Goal Type </a></li>
</ul>
</li>
<li class="submenu"> <a href="#"><i class="la la-edit"></i>
<span> Training </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="training.html"> Training List </a></li>
<li><a href="trainers.html"> Trainers</a></li>
<li><a href="training-type.html"> Training Type </a></li>
</ul>
</li>
<li><a href="promotion.html"><i class="la la-bullhorn"></i> <span>Promotion</span></a></li>
<li><a href="resignation.html"><i class="la la-external-link-square"></i> <span>Resignation</span></a></li>
<li><a href="termination.html"><i class="la la-times-circle"></i> <span>Termination</span></a></li>
<li class="menu-title"> <span>Administration</span> </li>
<li> <a href="assets.html"><i class="la la-object-ungroup">
</i> <span>Assets</span></a>
</li>
<li class="submenu"> <a href="#"><i class="la la-briefcase"></i>
<span> Jobs </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="user-dashboard.html"> User Dasboard </a></li>
<li><a href="jobs-dashboard.html"> Jobs Dasboard </a></li>
<li><a href="jobs.html"> Manage Jobs </a></li>
<li><a href="manage-resumes.html"> Manage Resumes </a></li>
<li><a href="shortlist-candidates.html"> Shortlist Candidates </a></li>
<li><a href="interview-questions.html"> Interview Questions </a></li>
<li><a href="offer_approvals.html"> Offer Approvals </a></li>
<li><a href="experiance-level.html"> Experience Level </a></li>
<li><a href="candidates.html"> Candidates List </a></li>
<li><a href="schedule-timing.html"> Schedule timing </a></li>
<li><a href="apptitude-result.html"> Aptitude Results </a></li>
</ul>
</li>
<li class="menu-title"> <span>Pages</span> </li>
<li class="submenu"> <a href="#"><i class="la la-user"></i>
<span> Profile </span> <span class="menu-arrow"></span></a>
<ul style="display: none;">
<li><a href="profile.html"> Employee Profile </a></li>
<li><a href="client-profile.html"> Client Profile </a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Sidebar -->
<div class="page-wrapper">
<!-- Page Content -->
<div class="content container-fluid">
<!-- Page Header -->
<div class="page-header">
<div class="row">
<div class="col-sm-12">
<h3 class="page-title">Welcome Admin!</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item active">Dashboard</li>
</ul>
</div>
</div>
</div>
<!-- /Page Header -->
<div class="row">
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-cubes"></i></span>
<div class="dash-widget-info">
<h3>112</h3> <span>Projects</span> </div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-usd"></i></span>
<div class="dash-widget-info">
<h3>44</h3> <span>Clients</span> </div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-diamond"></i></span>
<div class="dash-widget-info">
<h3>37</h3> <span>Tasks</span> </div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
<div class="card dash-widget">
<div class="card-body"> <span class="dash-widget-icon"><i class="fa fa-user"></i></span>
<div class="dash-widget-info">
<h3>218</h3> <span>Employees</span> </div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 text-center">
<div class="card">
<div class="card-body">
<h3 class="card-title">Total Revenue</h3>
<div id="bar-charts"></div>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="card">
<div class="card-body">
<h3 class="card-title">Sales Overview</h3>
<div id="line-charts"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card-group m-b-30">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">New Employees</span> </div>
<div> <span class="text-success">+10%</span> </div>
</div>
<h3 class="mb-3">10</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Overall Employees 218</p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">Earnings</span> </div>
<div> <span class="text-success">+12.5%</span> </div>
</div>
<h3 class="mb-3">$1,42,300</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Previous Month <span class="text-muted">$1,15,852</span></p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">Expenses</span> </div>
<div> <span class="text-danger">-2.8%</span> </div>
</div>
<h3 class="mb-3">$8,500</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Previous Month <span class="text-muted">$7,500</span></p>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div> <span class="d-block">Profit</span> </div>
<div> <span class="text-danger">-75%</span> </div>
</div>
<h3 class="mb-3">$1,12,000</h3>
<div class="progress mb-2" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mb-0">Previous Month <span class="text-muted">$1,42,000</span></p>
</div>
</div>
</div>
</div>
</div>
{{-- message --}}
{!! Toastr::message() !!}
<!-- Statistics Widget -->
<div class="row">
<div class="col-md-12 col-lg-12 col-xl-4 d-flex">
<div class="card flex-fill dash-statistics">
<div class="card-body">
<h5 class="card-title">Statistics</h5>
<div class="stats-list">
<div class="stats-info">
<p>Today Leave <strong>4 <small>/ 65</small></strong></p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 31%" aria-valuenow="31" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Pending Invoice <strong>15 <small>/ 92</small></strong></p>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 31%" aria-valuenow="31" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Completed Projects <strong>85 <small>/ 112</small></strong></p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Open Tickets <strong>190 <small>/ 212</small></strong></p>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="stats-info">
<p>Closed Tickets <strong>22 <small>/ 212</small></strong></p>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill">
<div class="card-body">
<h4 class="card-title">Task Statistics</h4>
<div class="statistics">
<div class="row">
<div class="col-md-6 col-6 text-center">
<div class="stats-box mb-4">
<p>Total Tasks</p>
<h3>385</h3> </div>
</div>
<div class="col-md-6 col-6 text-center">
<div class="stats-box mb-4">
<p>Overdue Tasks</p>
<h3>19</h3> </div>
</div>
</div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-purple" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 22%" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">22%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 24%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100">24%</div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 26%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100">21%</div>
<div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
<div>
<p><i class="fa fa-dot-circle-o text-purple mr-2"></i>Completed Tasks <span class="float-right">166</span></p>
<p><i class="fa fa-dot-circle-o text-warning mr-2"></i>Inprogress Tasks <span class="float-right">115</span></p>
<p><i class="fa fa-dot-circle-o text-success mr-2"></i>On Hold Tasks <span class="float-right">31</span></p>
<p><i class="fa fa-dot-circle-o text-danger mr-2"></i>Pending Tasks <span class="float-right">47</span></p>
<p class="mb-0"><i class="fa fa-dot-circle-o text-info mr-2"></i>Review Tasks <span class="float-right">5</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill">
<div class="card-body">
<h4 class="card-title">Today Absent <span class="badge bg-inverse-danger ml-2">5</span></h4>
<div class="leave-info-box">
<div class="media align-items-center">
<a href="profile.html" class="avatar"><img alt="" src="assets/img/user.jpg"></a>
<div class="media-body">
<div class="text-sm my-0">Martin Lewis</div>
</div>
</div>
<div class="row align-items-center mt-3">
<div class="col-6">
<h6 class="mb-0">4 Sep 2019</h6> <span class="text-sm text-muted">Leave Date</span> </div>
<div class="col-6 text-right"> <span class="badge bg-inverse-danger">Pending</span> </div>
</div>
</div>
<div class="leave-info-box">
<div class="media align-items-center">
<a href="profile.html" class="avatar"><img alt="" src="assets/img/user.jpg"></a>
<div class="media-body">
<div class="text-sm my-0">Martin Lewis</div>
</div>
</div>
<div class="row align-items-center mt-3">
<div class="col-6">
<h6 class="mb-0">4 Sep 2019</h6> <span class="text-sm text-muted">Leave Date</span> </div>
<div class="col-6 text-right"> <span class="badge bg-inverse-success">Approved</span> </div>
</div>
</div>
<div class="load-more text-center"> <a class="text-dark" href="javascript:void(0);">Load More</a> </div>
</div>
</div>
</div>
</div>
<!-- /Statistics Widget -->
<div class="row">
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Invoices</h3> </div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-nowrap custom-table mb-0">
<thead>
<tr>
<th>Invoice ID</th>
<th>Client</th>
<th>Due Date</th>
<th>Total</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="invoice-view.html">#INV-0001</a></td>
<td>
<h2><a href="#">Global Technologies</a></h2> </td>
<td>11 Mar 2019</td>
<td>$380</td>
<td> <span class="badge bg-inverse-warning">Partially Paid</span> </td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0002</a></td>
<td>
<h2><a href="#">Delta Infotech</a></h2> </td>
<td>8 Feb 2019</td>
<td>$500</td>
<td> <span class="badge bg-inverse-success">Paid</span> </td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0003</a></td>
<td>
<h2><a href="#">Cream Inc</a></h2> </td>
<td>23 Jan 2019</td>
<td>$60</td>
<td> <span class="badge bg-inverse-danger">Unpaid</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer"> <a href="invoices.html">View all invoices</a> </div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Payments</h3> </div>
<div class="card-body">
<div class="table-responsive">
<table class="table custom-table table-nowrap mb-0">
<thead>
<tr>
<th>Invoice ID</th>
<th>Client</th>
<th>Payment Type</th>
<th>Paid Date</th>
<th>Paid Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="invoice-view.html">#INV-0001</a></td>
<td>
<h2><a href="#">Global Technologies</a></h2> </td>
<td>Paypal</td>
<td>11 Mar 2019</td>
<td>$380</td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0002</a></td>
<td>
<h2><a href="#">Delta Infotech</a></h2> </td>
<td>Paypal</td>
<td>8 Feb 2019</td>
<td>$500</td>
</tr>
<tr>
<td><a href="invoice-view.html">#INV-0003</a></td>
<td>
<h2><a href="#">Cream Inc</a></h2> </td>
<td>Paypal</td>
<td>23 Jan 2019</td>
<td>$60</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer"> <a href="payments.html">View all payments</a> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Clients</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table custom-table mb-0">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Status</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2 class="table-avatar">
<a href="#" class="avatar"><img alt="" src="assets/img/profiles/avatar-19.jpg"></a>
<a href="client-profile.html">Barry Cuda <span>CEO</span></a>
</h2>
</td>
<td>barrycuda@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-success"></i> Active </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action"> <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="#" class="avatar"><img alt="" src="assets/img/profiles/avatar-19.jpg"></a>
<a href="client-profile.html">Tressa Wexler <span>Manager</span></a>
</h2>
</td>
<td>tressawexler@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-danger"></i> Inactive </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="client-profile.html" class="avatar">
<img alt="" src="assets/img/profiles/avatar-07.jpg">
</a>
<a href="client-profile.html">Ruby Bartlett <span>CEO</span></a>
</h2>
</td>
<td>rubybartlett@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-danger"></i> Inactive </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="client-profile.html" class="avatar">
<img alt="" src="assets/img/profiles/avatar-06.jpg">
</a>
<a href="client-profile.html"> Misty Tison <span>CEO</span></a>
</h2>
</td>
<td>mistytison@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-success"></i> Active </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a> <a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 class="table-avatar">
<a href="client-profile.html" class="avatar">
<img alt="" src="assets/img/profiles/avatar-14.jpg">
</a>
<a href="client-profile.html"> Daniel Deacon <span>CEO</span></a>
</h2>
</td>
<td>danieldeacon@example.com</td>
<td>
<div class="dropdown action-label">
<a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <i class="fa fa-dot-circle-o text-danger"></i> Inactive </a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-success"></i> Active
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-dot-circle-o text-danger"></i> Inactive
</a>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer"> <a href="clients.html">View all clients</a> </div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="card card-table flex-fill">
<div class="card-header">
<h3 class="card-title mb-0">Recent Projects</h3> </div>
<div class="card-body">
<div class="table-responsive">
<table class="table custom-table mb-0">
<thead>
<tr>
<th>Project Name </th>
<th>Progress</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2>
<a href="project-view.html">Office Management</a>
</h2>
<small class="block text-ellipsis">
<span>1</span> <span class="text-muted">open tasks, </span>
<span>9</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="65%" style="width: 65%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Project Management</a>
</h2>
<small class="block text-ellipsis">
<span>2</span> <span class="text-muted">open tasks, </span>
<span>5</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="15%" style="width: 15%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Video Calling App</a>
</h2>
<small class="block text-ellipsis">
<span>3</span> <span class="text-muted">open tasks, </span>
<span>3</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="49%" style="width: 49%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Hospital Administration</a>
</h2>
<small class="block text-ellipsis">
<span>12</span> <span class="text-muted">open tasks, </span>
<span>4</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="88%" style="width: 88%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2>
<a href="project-view.html">Digital Marketplace</a>
</h2>
<small class="block text-ellipsis">
<span>7</span> <span class="text-muted">open tasks, </span>
<span>14</span> <span class="text-muted">tasks completed</span>
</small>
</td>
<td>
<div class="progress progress-xs progress-striped">
<div class="progress-bar" role="progressbar" data-toggle="tooltip" title="100%" style="width: 100%"></div>
</div>
</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-pencil m-r-5"></i> Edit
</a>
<a class="dropdown-item" href="javascript:void(0)">
<i class="fa fa-trash-o m-r-5"></i> Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<a href="projects.html">View all projects</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Page Content -->
</div>
@endsection

Step5: Add Button in Register Page

Add the below code in your register.blade.php file.

Resources/Views/passwords/Auth/register.blade.php

@extends('layouts.app') @section('content') <div class="main-wrapper"> <div class="account-content"> <a href="job-list.html" class="btn btn-primary apply-btn">Apply Job</a> <div class="container"> <!-- Account Logo --> <div class="account-logo"> <a href="index.html"><img src="{{ URL::to('assets/img/logo2.png') }}" alt="SoengSouy"></a> </div> <!-- /Account Logo --> <div class="account-box"> <div class="account-wrapper"> <h3 class="account-title">Register</h3> <p class="account-subtitle">Access to our dashboard</p> <!-- Account Form --> <form method="POST" action="{{ route('register') }}"> @csrf <div class="form-group"> <label>Username</label> <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="Enter Your Name"> @error('name') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Enter Your Email"> @error('email') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> {{-- insert defaults --}} <input type="hidden" class="image" name="image" value="photo_defaults.jpg"> <div class="form-group"> <label class="col-form-label">Role Name</label> <select class="select @error('role_name') is-invalid @enderror" name="role_name" id="role_name"> <option selected disabled>Select Role Name</option> <option value="Admin">Admin</option> <option value="Super Admin">Super Admin</option> <option value="Normal User">Normal User</option> </select> @error('role_name') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter Password"> @error('password') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> <div class="form-group"> <label><strong>Repeat Password</strong></label> <input type="password" class="form-control" name="password_confirmation" placeholder="Choose Repeat Password"> </div> <div class="form-group text-center"> <button class="btn btn-primary account-btn" type="submit">Register</button> </div> <div class="account-footer"> <p>Already have an account? <a href="{{ route('login') }}">Login</a></p> </div> </form> <!-- /Account Form --> </div> </div> </div> </div> </div> @endsection

Step 6: Create RegisterController

php artisan make:controller RegisterController

<?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Illuminate\Http\Request; use App\Models\User; use Brian2694\Toastr\Facades\Toastr; use Hash; use Illuminate\Support\Facades\Validator; use Illuminate\Validation\Rules\Password; class RegisterController extends Controller { public function register() { return view('auth.register'); } public function storeUser(Request $request) { $request->validate([ 'name' => 'required|string|max:255', 'email' => 'required|string|email|max:255|unique:users', 'role_name' => 'required|string|max:255', 'password' => 'required|string|min:8|confirmed', 'password_confirmation' => 'required', ]); User::create([ 'name' => $request->name, 'avatar' => $request->image, 'email' => $request->email, 'role_name' => $request->role_name, 'password' => Hash::make($request->password), ]); Toastr::success('Create new account successfully :)','Success'); return redirect('login'); } }

Step 7: Create LoginController

php artisan make:controller LoginController

<?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use App\Providers\RouteServiceProvider; use Illuminate\Foundation\Auth\AuthenticatesUsers; use Illuminate\Http\Request; use Auth; use DB; use App\Models\User; use Carbon\Carbon; use Session; use Brian2694\Toastr\Facades\Toastr; class LoginController extends Controller { /* |-------------------------------------------------------------------------- | Login Controller |-------------------------------------------------------------------------- | | This controller handles authenticating users for the application and | redirecting them to your home screen. The controller uses a trait | to conveniently provide its functionality to your applications. | */ use AuthenticatesUsers; /** * Where to redirect users after login. * * @var string */ protected $redirectTo = RouteServiceProvider::HOME; /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('guest')->except([ 'logout', 'locked', 'unlock' ]); } public function login() { return view('auth.login'); } public function authenticate(Request $request) { $request->validate([ 'email' => 'required|string|email', 'password' => 'required|string', ]); $email = $request->email; $password = $request->password; $dt = Carbon::now(); $todayDate = $dt->toDayDateTimeString(); $activityLog = [ 'name' => $email, 'email' => $email, 'description' => 'has log in', 'date_time' => $todayDate, ]; if (Auth::attempt(['email'=>$email,'password'=>$password,'status'=>'Active'])) { DB::table('activity_logs')->insert($activityLog); Toastr::success('Login successfully :)','Success'); return redirect()->intended('home'); }elseif (Auth::attempt(['email'=>$email,'password'=>$password,'status'=> null])) { DB::table('activity_logs')->insert($activityLog); Toastr::success('Login successfully :)','Success'); return redirect()->intended('home'); } else{ Toastr::error('fail, WRONG USERNAME OR PASSWORD :)','Error'); return redirect('login'); } } public function logout() { $user = Auth::User(); Session::put('user', $user); $user=Session::get('user'); $name = $user->name; $email = $user->email; $dt = Carbon::now(); $todayDate = $dt->toDayDateTimeString(); $activityLog = [ 'name' => $name, 'email' => $email, 'description' => 'has logged out', 'date_time' => $todayDate, ]; DB::table('activity_logs')->insert($activityLog); Auth::logout(); Toastr::success('Logout successfully :)','Success'); return redirect('login'); } }


Step 8: Add Button in Login Page

Add the below code in your login.blade.php file.

Resources/Views/passwords/Auth/login.blade.php

@extends('layouts.app')
@section('content')
    <div class="main-wrapper">
        <div class="account-content">
            <a href="job-list.html" class="btn btn-primary apply-btn">Apply Job</a>
            <div class="container">
                <!-- Account Logo -->
                <div class="account-logo">
                    <a href="index.html"><img src="{{ URL::to('assets/img/logo2.png') }}" alt="Soeng Souy"></a>
                </div>
                {{-- message --}}
                {!! Toastr::message() !!}
                <!-- /Account Logo -->
                <div class="account-box">
                    <div class="account-wrapper">
                        <h3 class="account-title">Login</h3>
                        <p class="account-subtitle">Access to our dashboard</p>
                        <!-- Account Form -->
                        <form method="POST" action="{{ route('login') }}">
                            @csrf
                            <div class="form-group">
                                <label>Email Address</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Enter email">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col">
                                        <label>Password</label>
                                    </div>
                                </div>
                                <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter Password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col">
                                        <label></label>
                                    </div>
                                    <div class="col-auto">
                                        <a class="text-muted" href="{{ route('forget-password') }}">
                                            Forgot password?
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group text-center">
                                <button class="btn btn-primary account-btn" type="submit">Login</button>
                            </div>
                            <div class="account-footer">
                                <p>Don't have an account yet? <a href="{{ route('register') }}">Register</a></p>
                            </div>
                        </form>
                        <!-- /Account Form -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Step 9: Add Routes

In this step we create routes for Facebook login, add two routes in your web.php file.

app/routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PhotosController;
use App\Http\Controllers\Auth\LoginController;
use App\Http\Controllers\Auth\RegisterController;
use App\Http\Controllers\ResetPasswordController;
use App\Http\Controllers\FormController;
use App\Http\Controllers\UserManagementController;
use App\Http\Controllers\LockScreen;
/*
|--------------------------------------------------------------------------
|--------------------------------------------------------------------------
| Web Routes
| Here is where you can register web routes for your application. These
|
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () { return view('auth.login'); }); Route::group(['middleware'=>'auth'],function() { Route::get('home',function() { return view('home'); }); Route::get('home',function() { return view('home'); }); }); Auth::routes(); // ----------------------------- main dashboard ------------------------------// Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home'); Route::get('em/dashboard', [App\Http\Controllers\HomeController::class, 'emDashboard'])->name('em/dashboard'); // -----------------------------login----------------------------------------// Route::get('/login', [App\Http\Controllers\Auth\LoginController::class, 'login'])->name('login'); Route::post('/login', [App\Http\Controllers\Auth\LoginController::class, 'authenticate']); Route::get('/logout', [App\Http\Controllers\Auth\LoginController::class, 'logout'])->name('logout'); // ----------------------------- lock screen --------------------------------// Route::get('lock_screen', [App\Http\Controllers\LockScreen::class, 'lockScreen'])->middleware('auth')->name('lock_screen'); Route::post('unlock', [App\Http\Controllers\LockScreen::class, 'unlock'])->name('unlock'); // ------------------------------ register ---------------------------------// Route::get('/register', [App\Http\Controllers\Auth\RegisterController::class, 'register'])->name('register'); Route::post('/register', [App\Http\Controllers\Auth\RegisterController::class, 'storeUser'])->name('register'); // ----------------------------- forget password ----------------------------// Route::get('forget-password', [App\Http\Controllers\Auth\ForgotPasswordController::class, 'getEmail'])->name('forget-password'); Route::post('forget-password', [App\Http\Controllers\Auth\ForgotPasswordController::class, 'postEmail'])->name('forget-password'); // ----------------------------- reset password -----------------------------// Route::get('reset-password/{token}', [App\Http\Controllers\Auth\ResetPasswordController::class, 'getPassword']); Route::post('reset-password', [App\Http\Controllers\Auth\ResetPasswordController::class, 'updatePassword']); // ----------------------------- user profile ------------------------------// Route::get('profile_user', [App\Http\Controllers\UserManagementController::class, 'profile'])->name('profile_user'); Route::post('profile_user/store', [App\Http\Controllers\UserManagementController::class, 'profileStore'])->name('profile_user/store'); // ----------------------------- user userManagement -----------------------// Route::get('userManagement', [App\Http\Controllers\UserManagementController::class, 'index'])->middleware('auth')->name('userManagement'); Route::get('user/add/new', [App\Http\Controllers\UserManagementController::class, 'addNewUser'])->middleware('auth')->name('user/add/new'); Route::post('user/add/save', [App\Http\Controllers\UserManagementController::class, 'addNewUserSave'])->name('user/add/save'); Route::get('view/detail/{id}', [App\Http\Controllers\UserManagementController::class, 'viewDetail'])->middleware('auth'); Route::post('update', [App\Http\Controllers\UserManagementController::class, 'update'])->name('update'); Route::get('delete_user/{id}', [App\Http\Controllers\UserManagementController::class, 'delete'])->middleware('auth'); Route::get('activity/log', [App\Http\Controllers\UserManagementController::class, 'activityLog'])->middleware('auth')->name('activity/log'); Route::get('activity/login/logout', [App\Http\Controllers\UserManagementController::class, 'activityLogInLogOut'])->middleware('auth')->name('activity/login/logout'); // ----------------------------- form change password ------------------------------// Route::get('change/password', [App\Http\Controllers\UserManagementController::class, 'changePasswordView'])->middleware('auth')->name('change/password');
Route::post('change/password/db', [App\Http\Controllers\UserManagementController::class, 'changePasswordDB'])->name('change/password/db');

Step 10: Run Development Server

After successfully update all run the development server just adding the below command in the terminal.

php artisan serve

After this go to the browser and check using the login page.

http://localhost/hr_ms_laravel8/public/

Reactions

Post a Comment

0 Comments