laravelEcomm/resources/views/Dashboard/index.blade.php

790 lines
50 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<x-adminheader title="Home" />
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-md-12 grid-margin">
<div class="row">
<div class="col-12 col-xl-8 mb-4 mb-xl-0">
<h3 class="font-weight-bold">Welcome Aamir</h3>
<h6 class="font-weight-normal mb-0">All systems are running smoothly! You have
<span class="text-primary">3 unread alerts!</span>
</h6>
</div>
<div class="col-12 col-xl-4">
<div class="justify-content-end d-flex">
<div class="dropdown flex-md-grow-1 flex-xl-grow-0">
<button class="btn btn-sm btn-light bg-white dropdown-toggle" type="button"
id="dropdownMenuDate2" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
<i class="mdi mdi-calendar"></i> Today (10 Jan 2021)
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuDate2">
<a class="dropdown-item" href="#">January - March</a>
<a class="dropdown-item" href="#">March - June</a>
<a class="dropdown-item" href="#">June - August</a>
<a class="dropdown-item" href="#">August - November</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card tale-bg">
<div class="card-people mt-auto">
<img src="Dashboard/images/dashboard/people.svg" alt="people">
<div class="weather-info">
<div class="d-flex">
<div>
<h2 class="mb-0 font-weight-normal"><i class="icon-sun mr-2"></i>31<sup>C</sup></h2>
</div>
<div class="ml-2">
<h4 class="location font-weight-normal">Bangalore</h4>
<h6 class="font-weight-normal">India</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin transparent">
<div class="row">
<div class="col-md-6 mb-4 stretch-card transparent">
<div class="card card-tale">
<div class="card-body">
<p class="mb-4">Todays Bookings</p>
<p class="fs-30 mb-2">4006</p>
<p>10.00% (30 days)</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 stretch-card transparent">
<div class="card card-dark-blue">
<div class="card-body">
<p class="mb-4">Total Bookings</p>
<p class="fs-30 mb-2">61344</p>
<p>22.00% (30 days)</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 mb-lg-0 stretch-card transparent">
<div class="card card-light-blue">
<div class="card-body">
<p class="mb-4">Number of Meetings</p>
<p class="fs-30 mb-2">34040</p>
<p>2.00% (30 days)</p>
</div>
</div>
</div>
<div class="col-md-6 stretch-card transparent">
<div class="card card-light-danger">
<div class="card-body">
<p class="mb-4">Number of Clients</p>
<p class="fs-30 mb-2">47033</p>
<p>0.22% (30 days)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title">Order Details</p>
<p class="font-weight-500">The total number of sessions within the date range. It
is the period time a user is actively engaged with your website, page or app,
etc</p>
<div class="d-flex flex-wrap mb-5">
<div class="mr-5 mt-3">
<p class="text-muted">Order value</p>
<h3 class="text-primary fs-30 font-weight-medium">12.3k</h3>
</div>
<div class="mr-5 mt-3">
<p class="text-muted">Orders</p>
<h3 class="text-primary fs-30 font-weight-medium">14k</h3>
</div>
<div class="mr-5 mt-3">
<p class="text-muted">Users</p>
<h3 class="text-primary fs-30 font-weight-medium">71.56%</h3>
</div>
<div class="mt-3">
<p class="text-muted">Downloads</p>
<h3 class="text-primary fs-30 font-weight-medium">34040</h3>
</div>
</div>
<canvas id="order-chart"></canvas>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<p class="card-title">Sales Report</p>
<a href="#" class="text-info">View all</a>
</div>
<p class="font-weight-500">The total number of sessions within the date range. It
is the period time a user is actively engaged with your website, page or app,
etc</p>
<div id="sales-legend" class="chartjs-legend mt-4 mb-2"></div>
<canvas id="sales-chart"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card position-relative">
<div class="card-body">
<div id="detailedReports" class="carousel slide detailed-report-carousel position-static pt-2"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-12 col-xl-3 d-flex flex-column justify-content-start">
<div class="ml-xl-4 mt-3">
<p class="card-title">Detailed Reports</p>
<h1 class="text-primary">$34040</h1>
<h3 class="font-weight-500 mb-xl-4 text-primary">North
America</h3>
<p class="mb-2 mb-xl-0">The total number of sessions within
the date range. It is the period time a user is actively
engaged with your website, page or app, etc</p>
</div>
</div>
<div class="col-md-12 col-xl-9">
<div class="row">
<div class="col-md-6 border-right">
<div class="table-responsive mb-3 mb-md-0 mt-3">
<table class="table table-borderless report-table">
<tr>
<td class="text-muted">Illinois</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary"
role="progressbar" style="width: 70%"
aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">713
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Washington</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-warning"
role="progressbar" style="width: 30%"
aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">583
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Mississippi</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger"
role="progressbar" style="width: 95%"
aria-valuenow="95" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">924
</h5>
</td>
</tr>
<tr>
<td class="text-muted">California</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-info"
role="progressbar" style="width: 60%"
aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">664
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Maryland</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary"
role="progressbar" style="width: 40%"
aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">560
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Alaska</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger"
role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">793
</h5>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 mt-3">
<canvas id="north-america-chart"></canvas>
<div id="north-america-legend"></div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-12 col-xl-3 d-flex flex-column justify-content-start">
<div class="ml-xl-4 mt-3">
<p class="card-title">Detailed Reports</p>
<h1 class="text-primary">$34040</h1>
<h3 class="font-weight-500 mb-xl-4 text-primary">North
America</h3>
<p class="mb-2 mb-xl-0">The total number of sessions within
the date range. It is the period time a user is actively
engaged with your website, page or app, etc</p>
</div>
</div>
<div class="col-md-12 col-xl-9">
<div class="row">
<div class="col-md-6 border-right">
<div class="table-responsive mb-3 mb-md-0 mt-3">
<table class="table table-borderless report-table">
<tr>
<td class="text-muted">Illinois</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary"
role="progressbar" style="width: 70%"
aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">713
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Washington</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-warning"
role="progressbar" style="width: 30%"
aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">583
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Mississippi</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger"
role="progressbar" style="width: 95%"
aria-valuenow="95" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">924
</h5>
</td>
</tr>
<tr>
<td class="text-muted">California</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-info"
role="progressbar" style="width: 60%"
aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">664
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Maryland</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-primary"
role="progressbar" style="width: 40%"
aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">560
</h5>
</td>
</tr>
<tr>
<td class="text-muted">Alaska</td>
<td class="w-100 px-0">
<div class="progress progress-md mx-4">
<div class="progress-bar bg-danger"
role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</td>
<td>
<h5 class="font-weight-bold mb-0">793
</h5>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 mt-3">
<canvas id="south-america-chart"></canvas>
<div id="south-america-legend"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#detailedReports" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#detailedReports" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title mb-0">Top Products</p>
<div class="table-responsive">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Search Engine Marketing</td>
<td class="font-weight-bold">$362</td>
<td>21 Sep 2018</td>
<td class="font-weight-medium">
<div class="badge badge-success">Completed</div>
</td>
</tr>
<tr>
<td>Search Engine Optimization</td>
<td class="font-weight-bold">$116</td>
<td>13 Jun 2018</td>
<td class="font-weight-medium">
<div class="badge badge-success">Completed</div>
</td>
</tr>
<tr>
<td>Display Advertising</td>
<td class="font-weight-bold">$551</td>
<td>28 Sep 2018</td>
<td class="font-weight-medium">
<div class="badge badge-warning">Pending</div>
</td>
</tr>
<tr>
<td>Pay Per Click Advertising</td>
<td class="font-weight-bold">$523</td>
<td>30 Jun 2018</td>
<td class="font-weight-medium">
<div class="badge badge-warning">Pending</div>
</td>
</tr>
<tr>
<td>E-Mail Marketing</td>
<td class="font-weight-bold">$781</td>
<td>01 Nov 2018</td>
<td class="font-weight-medium">
<div class="badge badge-danger">Cancelled</div>
</td>
</tr>
<tr>
<td>Referral Marketing</td>
<td class="font-weight-bold">$283</td>
<td>20 Mar 2018</td>
<td class="font-weight-medium">
<div class="badge badge-warning">Pending</div>
</td>
</tr>
<tr>
<td>Social media marketing</td>
<td class="font-weight-bold">$897</td>
<td>26 Oct 2018</td>
<td class="font-weight-medium">
<div class="badge badge-success">Completed</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-5 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">To Do Lists</h4>
<div class="list-wrapper pt-2">
<ul class="d-flex flex-column-reverse todo-list todo-list-custom">
<li>
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Meeting with Urban Team
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li class="completed">
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox" checked>
Duplicate a project for new customer
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li>
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Project meeting with CEO
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li class="completed">
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox" checked>
Follow up of team zilla
</label>
</div>
<i class="remove ti-close"></i>
</li>
<li>
<div class="form-check form-check-flat">
<label class="form-check-label">
<input class="checkbox" type="checkbox">
Level up for Antony
</label>
</div>
<i class="remove ti-close"></i>
</li>
</ul>
</div>
<div class="add-items d-flex mb-0 mt-2">
<input type="text" class="form-control todo-list-input" placeholder="Add new task">
<button class="add btn btn-icon text-primary todo-list-add-btn bg-transparent"><i
class="icon-circle-plus"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 stretch-card grid-margin">
<div class="card">
<div class="card-body">
<p class="card-title mb-0">Projects</p>
<div class="table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th class="pl-0 pb-2 border-bottom">Places</th>
<th class="border-bottom pb-2">Orders</th>
<th class="border-bottom pb-2">Users</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pl-0">Kentucky</td>
<td>
<p class="mb-0"><span class="font-weight-bold mr-2">65</span>(2.15%)
</p>
</td>
<td class="text-muted">65</td>
</tr>
<tr>
<td class="pl-0">Ohio</td>
<td>
<p class="mb-0"><span class="font-weight-bold mr-2">54</span>(3.25%)
</p>
</td>
<td class="text-muted">51</td>
</tr>
<tr>
<td class="pl-0">Nevada</td>
<td>
<p class="mb-0"><span class="font-weight-bold mr-2">22</span>(2.22%)
</p>
</td>
<td class="text-muted">32</td>
</tr>
<tr>
<td class="pl-0">North Carolina</td>
<td>
<p class="mb-0"><span class="font-weight-bold mr-2">46</span>(3.27%)
</p>
</td>
<td class="text-muted">15</td>
</tr>
<tr>
<td class="pl-0">Montana</td>
<td>
<p class="mb-0"><span class="font-weight-bold mr-2">17</span>(1.25%)
</p>
</td>
<td class="text-muted">25</td>
</tr>
<tr>
<td class="pl-0">Nevada</td>
<td>
<p class="mb-0"><span class="font-weight-bold mr-2">52</span>(3.11%)
</p>
</td>
<td class="text-muted">71</td>
</tr>
<tr>
<td class="pl-0 pb-0">Louisiana</td>
<td class="pb-0">
<p class="mb-0"><span class="font-weight-bold mr-2">25</span>(1.32%)
</p>
</td>
<td class="pb-0">14</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4 stretch-card grid-margin">
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title">Charts</p>
<div class="charts-data">
<div class="mt-3">
<p class="mb-0">Data 1</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-inf0" role="progressbar"
style="width: 95%" aria-valuenow="95" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mb-0">5k</p>
</div>
</div>
<div class="mt-3">
<p class="mb-0">Data 2</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-info" role="progressbar"
style="width: 35%" aria-valuenow="35" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mb-0">1k</p>
</div>
</div>
<div class="mt-3">
<p class="mb-0">Data 3</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-info" role="progressbar"
style="width: 48%" aria-valuenow="48" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mb-0">992</p>
</div>
</div>
<div class="mt-3">
<p class="mb-0">Data 4</p>
<div class="d-flex justify-content-between align-items-center">
<div class="progress progress-md flex-grow-1 mr-4">
<div class="progress-bar bg-info" role="progressbar"
style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<p class="mb-0">687</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 stretch-card grid-margin grid-margin-md-0">
<div class="card data-icon-card-primary">
<div class="card-body">
<p class="card-title text-white">Number of Meetings</p>
<div class="row">
<div class="col-8 text-white">
<h3>34040</h3>
<p class="text-white font-weight-500 mb-0">The total number of
sessions within the date range.It is calculated as the sum .
</p>
</div>
<div class="col-4 background-icon">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 stretch-card grid-margin">
<div class="card">
<div class="card-body">
<p class="card-title">Notifications</p>
<ul class="icon-data-list">
<li>
<div class="d-flex">
<img src="Dashboard/images/faces/face1.jpg" alt="user">
<div>
<p class="text-info mb-1">Isabella Becker</p>
<p class="mb-0">Sales dashboard have been created</p>
<small>9:30 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="Dashboard/images/faces/face2.jpg" alt="user">
<div>
<p class="text-info mb-1">Adam Warren</p>
<p class="mb-0">You have done a great job #TW111</p>
<small>10:30 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="Dashboard/images/faces/face3.jpg" alt="user">
<div>
<p class="text-info mb-1">Leonard Thornton</p>
<p class="mb-0">Sales dashboard have been created</p>
<small>11:30 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="Dashboard/images/faces/face4.jpg" alt="user">
<div>
<p class="text-info mb-1">George Morrison</p>
<p class="mb-0">Sales dashboard have been created</p>
<small>8:50 am</small>
</div>
</div>
</li>
<li>
<div class="d-flex">
<img src="Dashboard/images/faces/face5.jpg" alt="user">
<div>
<p class="text-info mb-1">Ryan Cortez</p>
<p class="mb-0">Herbs are fun and easy to grow.</p>
<small>9:00 am</small>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<p class="card-title">Advanced Table</p>
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table id="example" class="display expandable-table" style="width:100%">
<thead>
<tr>
<th>Quote#</th>
<th>Product</th>
<th>Business type</th>
<th>Policy holder</th>
<th>Premium</th>
<th>Status</th>
<th>Updated at</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<x-adminfooter />