Admin dashboard V8 HTML CSS JS Laravel 8
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 running the below command in your terminal.
composer create-project --prefer-dist laravel/laravel admin_dashboard_v8Step 2: Update Your Database Credentials
After that update your database credentials in your .env file which is located in your project root.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database passwordStep 3: Make Migration
After adding the migration file now run the migrate command.
php artisan migrateStep 4: Add in Home Page
Add the below code in your home.blade.php file.
Resources/Views/home.blade.php
@extends('layouts.master')
@section('menu')
@include('sidebar.dashboard')
<!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg navbar-light header-blue">
<div class="m-header">
<a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
<a href="#!" class="b-brand">
<!-- ======== change your logo hear ============ -->
<img src="assets/images/logo.png" alt="" class="logo">
<img src="assets/images/logo-icon.png" alt="" class="logo-thumb">
</a>
<a href="#!" class="mob-toggler">
<i class="feather icon-more-vertical"></i>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#!" class="pop-search"><i class="feather icon-search"></i></a>
<div class="search-bar">
<input type="text" class="form-control border-0 shadow-none" placeholder="Search hear">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<div class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right notification">
<div class="noti-head">
<h6 class="d-inline-block m-b-0">Notifications</h6>
<div class="float-right">
<a href="#!" class="m-r-10">mark as read</a>
<a href="#!">clear all</a>
</div>
</div>
<ul class="noti-body">
<li class="n-title">
<p class="m-b-0">NEW</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Soeng Souy</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
<p>New ticket Added</p>
</div>
</div>
</li>
<li class="n-title">
<p class="m-b-0">EARLIER</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
</ul>
<div class="noti-footer">
<a href="#!">show all</a>
</div>
</div>
</div>
</li>
<li>
<div class="dropdown drp-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="feather icon-user"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification">
<div class="pro-head">
<img src="assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
<span>Soeng Souy</span>
<a href="auth-signin.html" class="dud-logout" title="Logout">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li><a href="user-profile.html" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
<li><a href="email_inbox.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
<li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</header>
<!-- [ Header ] end -->
<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
<div class="pcoded-content">
<!-- [ breadcrumb ] start -->
<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-12">
<div class="page-header-title">
<h5 class="m-b-10">Dashboard Analytics</h5>
</div>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
<li class="breadcrumb-item"><a href="#!">Dashboard Analytics</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- [ breadcrumb ] end -->
<!-- [ Main Content ] start -->
<div class="row">
<div class="col-lg-7 col-md-12">
<!-- support-section start -->
<div class="row">
<div class="col-sm-6">
<div class="card support-bar overflow-hidden">
<div class="card-body pb-0">
<h2 class="m-0">350</h2>
<span class="text-c-blue">Support Requests</span>
<p class="mb-3 mt-3">Total number of support requests that come in.</p>
</div>
<div id="support-chart"></div>
<div class="card-footer bg-primary text-white">
<div class="row text-center">
<div class="col">
<h4 class="m-0 text-white">10</h4>
<span>Open</span>
</div>
<div class="col">
<h4 class="m-0 text-white">5</h4>
<span>Running</span>
</div>
<div class="col">
<h4 class="m-0 text-white">3</h4>
<span>Solved</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card support-bar overflow-hidden">
<div class="card-body pb-0">
<h2 class="m-0">350</h2>
<span class="text-c-green">Support Requests</span>
<p class="mb-3 mt-3">Total number of support requests that come in.</p>
</div>
<div id="support-chart1"></div>
<div class="card-footer bg-success text-white">
<div class="row text-center">
<div class="col">
<h4 class="m-0 text-white">10</h4>
<span>Open</span>
</div>
<div class="col">
<h4 class="m-0 text-white">5</h4>
<span>Running</span>
</div>
<div class="col">
<h4 class="m-0 text-white">3</h4>
<span>Solved</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- support-section end -->
</div>
<div class="col-lg-5 col-md-12">
<!-- page statustic card start -->
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-yellow">$30200</h4>
<h6 class="text-muted m-b-0">All Earnings</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-bar-chart-2 f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-yellow">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-up text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-green">290+</h4>
<h6 class="text-muted m-b-0">Page Views</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-file-text f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-green">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-up text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-red">145</h4>
<h6 class="text-muted m-b-0">Task</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-calendar f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-red">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-down text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-blue">500</h4>
<h6 class="text-muted m-b-0">Downloads</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-thumbs-down f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-blue">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-down text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- page statustic card end -->
</div>
<!-- prject ,team member start -->
<div class="col-xl-6 col-md-12">
<div class="card table-card">
<div class="card-header">
<h5>Projects</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
Assigned
</th>
<th>Name</th>
<th>Due Date</th>
<th class="text-right">Priority</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-4.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>John Deo</h6>
<p class="text-muted m-b-0">Graphics Designer</p>
</div>
</div>
</td>
<td>Able Pro</td>
<td>Jun, 26</td>
<td class="text-right"><label class="badge badge-light-danger">Low</label></td>
</tr>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>Jenifer Vintage</h6>
<p class="text-muted m-b-0">Web Designer</p>
</div>
</div>
</td>
<td>Mashable</td>
<td>March, 31</td>
<td class="text-right"><label class="badge badge-light-primary">high</label></td>
</tr>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-3.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>William Jem</h6>
<p class="text-muted m-b-0">Developer</p>
</div>
</div>
</td>
<td>Flatable</td>
<td>Aug, 02</td>
<td class="text-right"><label class="badge badge-light-success">medium</label></td>
</tr>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>David Jones</h6>
<p class="text-muted m-b-0">Developer</p>
</div>
</div>
</td>
<td>Guruable</td>
<td>Sep, 22</td>
<td class="text-right"><label class="badge badge-light-primary">high</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-md-12">
<div class="card latest-update-card">
<div class="card-header">
<h5>Latest Updates</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="latest-update-box">
<div class="row p-t-30 p-b-30">
<div class="col-auto text-right update-meta">
<p class="text-muted m-b-0 d-inline-flex">2 hrs ago</p>
<i class="feather icon-twitter bg-twitter update-icon"></i>
</div>
<div class="col">
<a href="#!">
<h6>+ 1652 Followers</h6>
</a>
<p class="text-muted m-b-0">You’re getting more and more followers, keep it up!</p>
</div>
</div>
<div class="row p-b-30">
<div class="col-auto text-right update-meta">
<p class="text-muted m-b-0 d-inline-flex">4 hrs ago</p>
<i class="feather icon-briefcase bg-c-red update-icon"></i>
</div>
<div class="col">
<a href="#!">
<h6>+ 5 New Products were added!</h6>
</a>
<p class="text-muted m-b-0">Congratulations!</p>
</div>
</div>
<div class="row p-b-0">
<div class="col-auto text-right update-meta">
<p class="text-muted m-b-0 d-inline-flex">2 day ago</p>
<i class="feather icon-facebook bg-facebook update-icon"></i>
</div>
<div class="col">
<a href="#!">
<h6>+1 Friend Requests</h6>
</a>
<p class="text-muted m-b-10">This is great, keep it up!</p>
<div class="table-responsive">
<table class="table table-hover">
<tr>
<td class="b-none">
<a href="#!" class="align-middle">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>Jeny William</h6>
<p class="text-muted m-b-0">Graphic Designer</p>
</div>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="#!" class="b-b-primary text-primary">View all Projects</a>
</div>
</div>
</div>
</div>
<!-- prject ,team member start -->
<!-- seo start -->
<div class="col-xl-4 col-md-12">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-6">
<h3>$16,756</h3>
<h6 class="text-muted m-b-0">Visits<i class="fa fa-caret-down text-c-red m-l-10"></i></h6>
</div>
<div class="col-6">
<div id="seo-chart1" class="d-flex align-items-end"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-6">
<h3>49.54%</h3>
<h6 class="text-muted m-b-0">Bounce Rate<i class="fa fa-caret-up text-c-green m-l-10"></i></h6>
</div>
<div class="col-6">
<div id="seo-chart2" class="d-flex align-items-end"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-6">
<h3>1,62,564</h3>
<h6 class="text-muted m-b-0">Products<i class="fa fa-caret-down text-c-red m-l-10"></i></h6>
</div>
<div class="col-6">
<div id="seo-chart3" class="d-flex align-items-end"></div>
</div>
</div>
</div>
</div>
</div>
<!-- seo end -->
<!-- Latest Customers start -->
<div class="col-lg-8 col-md-12">
<div class="card table-card review-card">
<div class="card-header borderless ">
<h5>Customer Reviews</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="review-block">
<div class="row">
<div class="col-sm-auto p-r-0">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius profile-img cust-img m-b-15">
</div>
<div class="col">
<h6 class="m-b-15">John Deo <span class="float-right f-13 text-muted"> a week ago</span></h6>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<p class="m-t-15 m-b-15 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.</p>
<a href="#!" class="m-r-30 text-muted"><i class="feather icon-thumbs-up m-r-15"></i>Helpful?</a>
<a href="#!"><i class="feather icon-heart-on text-c-red m-r-15"></i></a>
<a href="#!"><i class="feather icon-edit text-muted"></i></a>
</div>
</div>
<div class="row">
<div class="col-sm-auto p-r-0">
<img src="assets/images/user/avatar-4.jpg" alt="user image" class="img-radius profile-img cust-img m-b-15">
</div>
<div class="col">
<h6 class="m-b-15">Allina D’croze <span class="float-right f-13 text-muted"> a week ago</span></h6>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<p class="m-t-15 m-b-15 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.</p>
<a href="#!" class="m-r-30 text-muted"><i class="feather icon-thumbs-up m-r-15"></i>Helpful?</a>
<a href="#!"><i class="feather icon-heart-on text-c-red m-r-15"></i></a>
<a href="#!"><i class="feather icon-edit text-muted"></i></a>
<blockquote class="blockquote m-t-15 m-b-0">
<h6>Allina D’croze</h6>
<p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of the industry.</p>
</blockquote>
</div>
</div>
</div>
<div class="text-right m-r-20">
<a href="#!" class="b-b-primary text-primary">View all Customer Reviews</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="mb-3">Power</h5>
<h2>2789<span class="text-muted m-l-5 f-14">kw</span></h2>
<div id="power-card-chart1"></div>
<div class="row">
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">2876 <span> kw</span></h6>
<p class="text-muted m-0">month</p>
</div>
</div>
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">234 <span> kw</span></h6>
<p class="text-muted m-0">Today</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="mb-3">Temperature</h5>
<h2>7.3<span class="text-muted m-l-10 f-14">deg</span></h2>
<div id="power-card-chart3"></div>
<div class="row">
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">4.5 <span> deg</span></h6>
<p class="text-muted m-0">month</p>
</div>
</div>
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">0.5 <span> deg</span></h6>
<p class="text-muted m-0">Today</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="card chat-card">
<div class="card-header">
<h5>Chat</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="row m-b-20 received-chat">
<div class="col-auto p-r-0">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40">
</div>
<div class="col">
<div class="msg">
<p class="m-b-0">Nice to meet you!</p>
</div>
<p class="text-muted m-b-0"><i class="fa fa-clock-o m-r-10"></i>10:20am</p>
</div>
</div>
<div class="row m-b-20 send-chat">
<div class="col">
<div class="msg">
<p class="m-b-0">Nice to meet you!</p>
</div>
<p class="text-muted m-b-0"><i class="fa fa-clock-o m-r-10"></i>10:20am</p>
</div>
<div class="col-auto p-l-0">
<img src="assets/images/user/avatar-3.jpg" alt="user image" class="img-radius wid-40">
</div>
</div>
<div class="row m-b-20 received-chat">
<div class="col-auto p-r-0">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40">
</div>
<div class="col">
<div class="msg">
<p class="m-b-0">Nice to meet you!</p>
<img src="assets/images/widget/dashborad-1.jpg" alt="">
<img src="assets/images/widget/dashborad-3.jpg" alt="">
</div>
<p class="text-muted m-b-0"><i class="fa fa-clock-o m-r-10"></i>10:20am</p>
</div>
</div>
<div class="form-group m-t-15">
<label class="floating-label" for="Project">Send message</label>
<input type="text" name="task-insert" class="form-control" id="Project">
<div class="form-icon">
<button class="btn btn-primary btn-icon">
<i class="feather icon-message-circle"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card user-card2">
<div class="card-body text-center">
<h6 class="m-b-15">Project Risk</h6>
<div class="risk-rate">
<span><b>5</b></span>
</div>
<h6 class="m-b-10 m-t-10">Balanced</h6>
<a href="#!" class="text-c-green b-b-success">Change Your Risk</a>
<div class="row justify-content-center m-t-10 b-t-default m-l-0 m-r-0">
<div class="col m-t-15 b-r-default">
<h6 class="text-muted">Nr</h6>
<h6>AWS 2455</h6>
</div>
<div class="col m-t-15">
<h6 class="text-muted">Created</h6>
<h6>30th Sep</h6>
</div>
</div>
</div>
<button class="btn btn-success btn-block">Download Overall Report</button>
</div>
</div>
<!-- Latest Customers end -->
</div>
<!-- [ Main Content ] end -->
</div>
</div>
@endsection
@extends('layouts.master')
@section('menu')
@include('sidebar.dashboard')
<!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg navbar-light header-blue">
<div class="m-header">
<a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
<a href="#!" class="b-brand">
<!-- ======== change your logo hear ============ -->
<img src="assets/images/logo.png" alt="" class="logo">
<img src="assets/images/logo-icon.png" alt="" class="logo-thumb">
</a>
<a href="#!" class="mob-toggler">
<i class="feather icon-more-vertical"></i>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#!" class="pop-search"><i class="feather icon-search"></i></a>
<div class="search-bar">
<input type="text" class="form-control border-0 shadow-none" placeholder="Search hear">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<div class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right notification">
<div class="noti-head">
<h6 class="d-inline-block m-b-0">Notifications</h6>
<div class="float-right">
<a href="#!" class="m-r-10">mark as read</a>
<a href="#!">clear all</a>
</div>
</div>
<ul class="noti-body">
<li class="n-title">
<p class="m-b-0">NEW</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Soeng Souy</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
<p>New ticket Added</p>
</div>
</div>
</li>
<li class="n-title">
<p class="m-b-0">EARLIER</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
<p>currently login</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
</ul>
<div class="noti-footer">
<a href="#!">show all</a>
</div>
</div>
</div>
</li>
<li>
<div class="dropdown drp-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="feather icon-user"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification">
<div class="pro-head">
<img src="assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
<span>Soeng Souy</span>
<a href="auth-signin.html" class="dud-logout" title="Logout">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li><a href="user-profile.html" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
<li><a href="email_inbox.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
<li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</header>
<!-- [ Header ] end -->
<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
<div class="pcoded-content">
<!-- [ breadcrumb ] start -->
<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-12">
<div class="page-header-title">
<h5 class="m-b-10">Dashboard Analytics</h5>
</div>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
<li class="breadcrumb-item"><a href="#!">Dashboard Analytics</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- [ breadcrumb ] end -->
<!-- [ Main Content ] start -->
<div class="row">
<div class="col-lg-7 col-md-12">
<!-- support-section start -->
<div class="row">
<div class="col-sm-6">
<div class="card support-bar overflow-hidden">
<div class="card-body pb-0">
<h2 class="m-0">350</h2>
<span class="text-c-blue">Support Requests</span>
<p class="mb-3 mt-3">Total number of support requests that come in.</p>
</div>
<div id="support-chart"></div>
<div class="card-footer bg-primary text-white">
<div class="row text-center">
<div class="col">
<h4 class="m-0 text-white">10</h4>
<span>Open</span>
</div>
<div class="col">
<h4 class="m-0 text-white">5</h4>
<span>Running</span>
</div>
<div class="col">
<h4 class="m-0 text-white">3</h4>
<span>Solved</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card support-bar overflow-hidden">
<div class="card-body pb-0">
<h2 class="m-0">350</h2>
<span class="text-c-green">Support Requests</span>
<p class="mb-3 mt-3">Total number of support requests that come in.</p>
</div>
<div id="support-chart1"></div>
<div class="card-footer bg-success text-white">
<div class="row text-center">
<div class="col">
<h4 class="m-0 text-white">10</h4>
<span>Open</span>
</div>
<div class="col">
<h4 class="m-0 text-white">5</h4>
<span>Running</span>
</div>
<div class="col">
<h4 class="m-0 text-white">3</h4>
<span>Solved</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- support-section end -->
</div>
<div class="col-lg-5 col-md-12">
<!-- page statustic card start -->
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-yellow">$30200</h4>
<h6 class="text-muted m-b-0">All Earnings</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-bar-chart-2 f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-yellow">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-up text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-green">290+</h4>
<h6 class="text-muted m-b-0">Page Views</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-file-text f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-green">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-up text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-red">145</h4>
<h6 class="text-muted m-b-0">Task</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-calendar f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-red">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-down text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-8">
<h4 class="text-c-blue">500</h4>
<h6 class="text-muted m-b-0">Downloads</h6>
</div>
<div class="col-4 text-right">
<i class="feather icon-thumbs-down f-28"></i>
</div>
</div>
</div>
<div class="card-footer bg-c-blue">
<div class="row align-items-center">
<div class="col-9">
<p class="text-white m-b-0">% change</p>
</div>
<div class="col-3 text-right">
<i class="feather icon-trending-down text-white f-16"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- page statustic card end -->
</div>
<!-- prject ,team member start -->
<div class="col-xl-6 col-md-12">
<div class="card table-card">
<div class="card-header">
<h5>Projects</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
Assigned
</th>
<th>Name</th>
<th>Due Date</th>
<th class="text-right">Priority</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-4.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>John Deo</h6>
<p class="text-muted m-b-0">Graphics Designer</p>
</div>
</div>
</td>
<td>Able Pro</td>
<td>Jun, 26</td>
<td class="text-right"><label class="badge badge-light-danger">Low</label></td>
</tr>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>Jenifer Vintage</h6>
<p class="text-muted m-b-0">Web Designer</p>
</div>
</div>
</td>
<td>Mashable</td>
<td>March, 31</td>
<td class="text-right"><label class="badge badge-light-primary">high</label></td>
</tr>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-3.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>William Jem</h6>
<p class="text-muted m-b-0">Developer</p>
</div>
</div>
</td>
<td>Flatable</td>
<td>Aug, 02</td>
<td class="text-right"><label class="badge badge-light-success">medium</label></td>
</tr>
<tr>
<td>
<div class="chk-option">
<label class="check-task custom-control custom-checkbox d-flex justify-content-center done-task">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
<div class="d-inline-block align-middle">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>David Jones</h6>
<p class="text-muted m-b-0">Developer</p>
</div>
</div>
</td>
<td>Guruable</td>
<td>Sep, 22</td>
<td class="text-right"><label class="badge badge-light-primary">high</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-md-12">
<div class="card latest-update-card">
<div class="card-header">
<h5>Latest Updates</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="latest-update-box">
<div class="row p-t-30 p-b-30">
<div class="col-auto text-right update-meta">
<p class="text-muted m-b-0 d-inline-flex">2 hrs ago</p>
<i class="feather icon-twitter bg-twitter update-icon"></i>
</div>
<div class="col">
<a href="#!">
<h6>+ 1652 Followers</h6>
</a>
<p class="text-muted m-b-0">You’re getting more and more followers, keep it up!</p>
</div>
</div>
<div class="row p-b-30">
<div class="col-auto text-right update-meta">
<p class="text-muted m-b-0 d-inline-flex">4 hrs ago</p>
<i class="feather icon-briefcase bg-c-red update-icon"></i>
</div>
<div class="col">
<a href="#!">
<h6>+ 5 New Products were added!</h6>
</a>
<p class="text-muted m-b-0">Congratulations!</p>
</div>
</div>
<div class="row p-b-0">
<div class="col-auto text-right update-meta">
<p class="text-muted m-b-0 d-inline-flex">2 day ago</p>
<i class="feather icon-facebook bg-facebook update-icon"></i>
</div>
<div class="col">
<a href="#!">
<h6>+1 Friend Requests</h6>
</a>
<p class="text-muted m-b-10">This is great, keep it up!</p>
<div class="table-responsive">
<table class="table table-hover">
<tr>
<td class="b-none">
<a href="#!" class="align-middle">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40 align-top m-r-15">
<div class="d-inline-block">
<h6>Jeny William</h6>
<p class="text-muted m-b-0">Graphic Designer</p>
</div>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="#!" class="b-b-primary text-primary">View all Projects</a>
</div>
</div>
</div>
</div>
<!-- prject ,team member start -->
<!-- seo start -->
<div class="col-xl-4 col-md-12">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-6">
<h3>$16,756</h3>
<h6 class="text-muted m-b-0">Visits<i class="fa fa-caret-down text-c-red m-l-10"></i></h6>
</div>
<div class="col-6">
<div id="seo-chart1" class="d-flex align-items-end"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-6">
<h3>49.54%</h3>
<h6 class="text-muted m-b-0">Bounce Rate<i class="fa fa-caret-up text-c-green m-l-10"></i></h6>
</div>
<div class="col-6">
<div id="seo-chart2" class="d-flex align-items-end"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-6">
<h3>1,62,564</h3>
<h6 class="text-muted m-b-0">Products<i class="fa fa-caret-down text-c-red m-l-10"></i></h6>
</div>
<div class="col-6">
<div id="seo-chart3" class="d-flex align-items-end"></div>
</div>
</div>
</div>
</div>
</div>
<!-- seo end -->
<!-- Latest Customers start -->
<div class="col-lg-8 col-md-12">
<div class="card table-card review-card">
<div class="card-header borderless ">
<h5>Customer Reviews</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="review-block">
<div class="row">
<div class="col-sm-auto p-r-0">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius profile-img cust-img m-b-15">
</div>
<div class="col">
<h6 class="m-b-15">John Deo <span class="float-right f-13 text-muted"> a week ago</span></h6>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<p class="m-t-15 m-b-15 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.</p>
<a href="#!" class="m-r-30 text-muted"><i class="feather icon-thumbs-up m-r-15"></i>Helpful?</a>
<a href="#!"><i class="feather icon-heart-on text-c-red m-r-15"></i></a>
<a href="#!"><i class="feather icon-edit text-muted"></i></a>
</div>
</div>
<div class="row">
<div class="col-sm-auto p-r-0">
<img src="assets/images/user/avatar-4.jpg" alt="user image" class="img-radius profile-img cust-img m-b-15">
</div>
<div class="col">
<h6 class="m-b-15">Allina D’croze <span class="float-right f-13 text-muted"> a week ago</span></h6>
<a href="#!"><i class="feather icon-star-on f-18 text-c-yellow"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<a href="#!"><i class="feather icon-star f-18 text-muted"></i></a>
<p class="m-t-15 m-b-15 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.</p>
<a href="#!" class="m-r-30 text-muted"><i class="feather icon-thumbs-up m-r-15"></i>Helpful?</a>
<a href="#!"><i class="feather icon-heart-on text-c-red m-r-15"></i></a>
<a href="#!"><i class="feather icon-edit text-muted"></i></a>
<blockquote class="blockquote m-t-15 m-b-0">
<h6>Allina D’croze</h6>
<p class="m-b-0 text-muted">Lorem Ipsum is simply dummy text of the industry.</p>
</blockquote>
</div>
</div>
</div>
<div class="text-right m-r-20">
<a href="#!" class="b-b-primary text-primary">View all Customer Reviews</a>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="mb-3">Power</h5>
<h2>2789<span class="text-muted m-l-5 f-14">kw</span></h2>
<div id="power-card-chart1"></div>
<div class="row">
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">2876 <span> kw</span></h6>
<p class="text-muted m-0">month</p>
</div>
</div>
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">234 <span> kw</span></h6>
<p class="text-muted m-0">Today</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="mb-3">Temperature</h5>
<h2>7.3<span class="text-muted m-l-10 f-14">deg</span></h2>
<div id="power-card-chart3"></div>
<div class="row">
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">4.5 <span> deg</span></h6>
<p class="text-muted m-0">month</p>
</div>
</div>
<div class="col col-auto">
<div class="map-area">
<h6 class="m-0">0.5 <span> deg</span></h6>
<p class="text-muted m-0">Today</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="card chat-card">
<div class="card-header">
<h5>Chat</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
<li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="row m-b-20 received-chat">
<div class="col-auto p-r-0">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40">
</div>
<div class="col">
<div class="msg">
<p class="m-b-0">Nice to meet you!</p>
</div>
<p class="text-muted m-b-0"><i class="fa fa-clock-o m-r-10"></i>10:20am</p>
</div>
</div>
<div class="row m-b-20 send-chat">
<div class="col">
<div class="msg">
<p class="m-b-0">Nice to meet you!</p>
</div>
<p class="text-muted m-b-0"><i class="fa fa-clock-o m-r-10"></i>10:20am</p>
</div>
<div class="col-auto p-l-0">
<img src="assets/images/user/avatar-3.jpg" alt="user image" class="img-radius wid-40">
</div>
</div>
<div class="row m-b-20 received-chat">
<div class="col-auto p-r-0">
<img src="assets/images/user/avatar-2.jpg" alt="user image" class="img-radius wid-40">
</div>
<div class="col">
<div class="msg">
<p class="m-b-0">Nice to meet you!</p>
<img src="assets/images/widget/dashborad-1.jpg" alt="">
<img src="assets/images/widget/dashborad-3.jpg" alt="">
</div>
<p class="text-muted m-b-0"><i class="fa fa-clock-o m-r-10"></i>10:20am</p>
</div>
</div>
<div class="form-group m-t-15">
<label class="floating-label" for="Project">Send message</label>
<input type="text" name="task-insert" class="form-control" id="Project">
<div class="form-icon">
<button class="btn btn-primary btn-icon">
<i class="feather icon-message-circle"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card user-card2">
<div class="card-body text-center">
<h6 class="m-b-15">Project Risk</h6>
<div class="risk-rate">
<span><b>5</b></span>
</div>
<h6 class="m-b-10 m-t-10">Balanced</h6>
<a href="#!" class="text-c-green b-b-success">Change Your Risk</a>
<div class="row justify-content-center m-t-10 b-t-default m-l-0 m-r-0">
<div class="col m-t-15 b-r-default">
<h6 class="text-muted">Nr</h6>
<h6>AWS 2455</h6>
</div>
<div class="col m-t-15">
<h6 class="text-muted">Created</h6>
<h6>30th Sep</h6>
</div>
</div>
</div>
<button class="btn btn-success btn-block">Download Overall Report</button>
</div>
</div>
<!-- Latest Customers end -->
</div>
<!-- [ Main Content ] end -->
</div>
</div>
@endsection
Step 5: Add Button in Register Page
Add the below code in your register.blade.php file.
Resources/Views/passwords/Auth/register.blade.php
Add the below code in your register.blade.php file.
Resources/Views/passwords/Auth/register.blade.php
@extends('layouts.app')
@section('content')
<!-- [ auth-signup ] start -->
<div class="auth-wrapper">
<div class="auth-content">
<div class="card">
<div class="row align-items-center text-center">
<div class="col-md-12">
<form method="POST" action="{{ route('register') }}" class="md-float-material form-material">
@csrf
<div class="card-body">
<img src="assets/images/logo-dark.png" alt="" class="img-fluid mb-4" style="width: 15%;">
<h4 class="mb-3 f-w-400">Sign up</h4>
<div class="form-group mb-3">
<label class="floating-label" for="Username">Username</label>
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autocomplete="name" autofocus placeholder="Username">
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group mb-3">
<label class="floating-label" for="Email">Email address</label>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" placeholder="Enter email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group mb-4">
<label class="floating-label" for="Password">Password</label>
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password" placeholder="Enter password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group mb-4">
<label class="floating-label" for="Password">Confirm Password</label>
<input type="password" name="password_confirmation" class="form-control" placeholder="Confirm Password">
</div>
<div class="custom-control custom-checkbox text-left mb-4 mt-2">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Send me the <a href="#!"> Newsletter</a> weekly.</label>
</div>
<button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>
<p class="mb-2">Already have an account? <a href="{{ route('login') }}" class="f-w-400">Signin</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- [ auth-signup ] end -->
@endsection
Step 6: 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\formController;
/*
|--------------------------------------------------------------------------
| 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');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
// -----------------------------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');
// ------------------------------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@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');
Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');
// ------------------------------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');
// -----------------------------form-----------------------------------------
Route::get('form/new', [App\Http\Controllers\formController::class, 'index'])->name('form/new');
Step 7: Create LoginController
php artisan make:controller LoginController<?php
namespace App\Http\Controllers\Auth;
use Laravel\Socialite\Facades\Socialite;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use Auth;
use App\Models\User;
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');
}
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;
if (Auth::attempt(['email'=>$email,'password'=>$password,'status'=>'Active'])) {
return redirect()->intended('home');
}elseif (Auth::attempt(['email'=>$email,'password'=>$password,'status'=> null])) {
return redirect()->intended('home');
}
else{
return redirect('login')->with('error', 'Oppose! You have entered invalid credentials');
}
}
// Facebook login
public function redirectToFacebook()
{
return Socialite::driver('facebook')->redirect();
}
// Facebook callback
public function handleFacebookCallback()
{
$user = Socialite::driver('facebook')->user();
$this->_registerOrLoginUser($user);
// Return home after login
return redirect()->route('home');
}
// Google login
public function redirectToGoogle()
{
return Socialite::driver('google')->redirect();
}
// Google callback
public function handleGoogleCallback()
{
$user = Socialite::driver('google')->user();
$this->_registerOrLoginUser($user);
// Return home after login
return redirect()->route('home');
}
protected function _registerOrLoginUser($data)
{
$user = User::where('email', '=', $data->email)->first();
if (!$user) {
$user = new User();
$user->name = $data->name;
$user->email = $data->email;
$user->provider_id = $data->id;
$user->avatar = $data->avatar;
$user->save();
}
Auth::login($user);
}
public function logout()
{
Auth::logout();
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
Add the below code in your login.blade.php file.
Resources/Views/passwords/Auth/login.blade.php
@extends('layouts.app')
@section('content')
<!-- [ auth-signin ] start -->
<div class="auth-wrapper">
<div class="auth-content">
<div class="card">
<div class="row align-items-center text-center">
<div class="col-md-12">
<form method="POST" action="{{ route('login') }}" class="md-float-material form-material">
@csrf
<div class="card-body">
<img src="assets/images/logo-dark.png" alt="" class="img-fluid mb-4" style="width: 15%;">
<h4 class="mb-3 f-w-400">Signin</h4>
@if(session()->has('error'))
<div class="text-danger text-center">
{{ session()->get('error') }}
</div>
@endif
<div class="form-group mb-3">
<label class="floating-label" for="Email">Email address</label>
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus placeholder="Enter email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group mb-4">
<label class="floating-label" for="Password">Password</label>
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="current-password" placeholder="Enter password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="custom-control custom-checkbox text-left mb-4 mt-2">
<input type="checkbox" class="custom-control-input" id="customCheck1" {{ old('remember') ? 'checked' : '' }}>
<label class="custom-control-label" for="customCheck1">Save credentials.</label>
</div>
<button type="submit" class="btn btn-block btn-primary mb-4">Signin</button>
<p class="mb-2 text-muted">Forgot password? <a href="{{ route('forget-password') }}" class="f-w-400">Reset</a></p>
<p class="mb-0 text-muted">Don’t have an account? <a href="{{ route('register') }}" class="f-w-400">Signup</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- [ auth-signin ] end -->
@endsection
Step 9: Run Development Server
After successfully update all run the development server just adding the below command in the terminal.
php artisan serveAfter this go to the browser and check using the login page.
http://localhost/admin_dashboard_v8/public/