Clean sections
This commit is contained in:
CHIEFSOFT\ameye
+147
-308
@@ -8,18 +8,18 @@ export default function HomeSections(){
|
||||
<div className="col-md-12 m-b-30">
|
||||
<div className="d-block d-sm-flex flex-nowrap align-items-center">
|
||||
<div className="page-title mb-2 mb-sm-0">
|
||||
<h1>Ecommerce</h1>
|
||||
<h1>The Practice Name Shows Up Here </h1>
|
||||
</div>
|
||||
<div className="ml-auto d-flex align-items-center">
|
||||
<nav>
|
||||
<ol className="breadcrumb p-0 m-b-0">
|
||||
<li className="breadcrumb-item">
|
||||
<a href="index.html"><i className="ti ti-home"></i></a>
|
||||
<a href="/dash"><i className="ti ti-home"></i></a>
|
||||
</li>
|
||||
<li className="breadcrumb-item">
|
||||
Dashboard
|
||||
</li>
|
||||
<li className="breadcrumb-item active text-primary" aria-current="page">Ecommerce</li>
|
||||
<li className="breadcrumb-item active text-primary" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -126,6 +126,150 @@ export default function HomeSections(){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">My Products</h4>
|
||||
</div>
|
||||
<div className="card-body pb-0">
|
||||
<div className="row m-b-20">
|
||||
<div className="col-xxs-6 col-xl-4 col-xxl-4 mb-2 mb-xxl-0">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
|
||||
<i className="fa fa-cart-plus text-primary"></i>
|
||||
</div>
|
||||
<div className="report-details">
|
||||
<p>Annual Sales</p>
|
||||
<h3>15,236</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxs-6 col-md-4 col-xxl-4 mb-2 mb-xxl-0">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
|
||||
<i className="fa fa-dollar text-primary"></i>
|
||||
</div>
|
||||
<div className="report-details">
|
||||
<p>Annual Revenue</p>
|
||||
<h3>$40,516</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apexchart-wrapper">
|
||||
<div id="ecommerce5" className="chart-fit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
<div className="card-header d-sm-flex justify-content-between align-items-center py-3">
|
||||
<div className="card-heading mb-3 mb-sm-0">
|
||||
<h4 className="card-title">Invoices Status</h4>
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<input type="text" className="form-control form-control-sm" placeholder="Search Invoice"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body scrollbar scroll_dark" style={{maxHeight: '420px'}}>
|
||||
<div className="d-xxs-flex align-items-center">
|
||||
<div className="total-sales">
|
||||
<p>Total Sales</p>
|
||||
<h1>$9514</h1>
|
||||
</div>
|
||||
<div className="mb-3 mb-sm-0 ml-auto">
|
||||
<button className="btn btn-primary btn-xs">View All Invoices</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-none d-sm-flex progress m-t-20 m-b-0" style={{height: '5px'}}>
|
||||
<div className="progress-bar bg-primary" role="progressbar" style={{width: '25%'}}
|
||||
aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div className="progress-bar bg-warning" role="progressbar" style={{width: '25%'}}
|
||||
aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div className="progress-bar bg-info" role="progressbar" style={{width: '25%'}} aria-valuenow="20"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div className="progress-bar bg-success" role="progressbar" style={{width: '25%'}}
|
||||
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div className="row no-gutters">
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Overdue</p>
|
||||
<h4>$1596</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Outstanding</p>
|
||||
<h4>$2586</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Open</p>
|
||||
<h4>$5678</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Paid</p>
|
||||
<h4>$2458</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive m-t-20">
|
||||
<table id="datatable-buttons" className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Name</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-muted">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Smith Drake</td>
|
||||
<td>27/3/2014</td>
|
||||
<td>$1,00,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-primary-inverse"> Overdue</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Martha Doe</td>
|
||||
<td>28/3/2015</td>
|
||||
<td>$70,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-warning-inverse
|
||||
"> Outstanding</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Fenish Paul</td>
|
||||
<td>24/3/2015</td>
|
||||
<td>$60,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-info-inverse
|
||||
"> Open</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Albom Mitch</td>
|
||||
<td>29/3/2016</td>
|
||||
<td>$60,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-success-inverse
|
||||
"> Paid</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xxl-8 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
@@ -306,311 +450,6 @@ export default function HomeSections(){
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xxl-6 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Yearly Sales Report</h4>
|
||||
</div>
|
||||
<div className="card-body pb-0">
|
||||
<div className="row m-b-20">
|
||||
<div className="col-xxs-6 col-xl-4 col-xxl-4 mb-2 mb-xxl-0">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
|
||||
<i className="fa fa-cart-plus text-primary"></i>
|
||||
</div>
|
||||
<div className="report-details">
|
||||
<p>Annual Sales</p>
|
||||
<h3>15,236</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxs-6 col-md-4 col-xxl-4 mb-2 mb-xxl-0">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
|
||||
<i className="fa fa-dollar text-primary"></i>
|
||||
</div>
|
||||
<div className="report-details">
|
||||
<p>Annual Revenue</p>
|
||||
<h3>$40,516</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apexchart-wrapper">
|
||||
<div id="ecommerce5" className="chart-fit"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-6 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
<div className="card-header d-sm-flex justify-content-between align-items-center py-3">
|
||||
<div className="card-heading mb-3 mb-sm-0">
|
||||
<h4 className="card-title">Invoices Status</h4>
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<input type="text" className="form-control form-control-sm" placeholder="Search Invoice"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body scrollbar scroll_dark" style={{maxHeight: '420px'}}>
|
||||
<div className="d-xxs-flex align-items-center">
|
||||
<div className="total-sales">
|
||||
<p>Total Sales</p>
|
||||
<h1>$9514</h1>
|
||||
</div>
|
||||
<div className="mb-3 mb-sm-0 ml-auto">
|
||||
<button className="btn btn-primary btn-xs">View All Invoices</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-none d-sm-flex progress m-t-20 m-b-0" style={{height: '5px'}}>
|
||||
<div className="progress-bar bg-primary" role="progressbar" style={{width: '25%'}}
|
||||
aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div className="progress-bar bg-warning" role="progressbar" style={{width: '25%'}}
|
||||
aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div className="progress-bar bg-info" role="progressbar" style={{width: '25%'}} aria-valuenow="20"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div className="progress-bar bg-success" role="progressbar" style={{width: '25%'}}
|
||||
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div className="row no-gutters">
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Overdue</p>
|
||||
<h4>$1596</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Outstanding</p>
|
||||
<h4>$2586</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Open</p>
|
||||
<h4>$5678</h4>
|
||||
</div>
|
||||
<div className="col-6 col-xxs-3 ">
|
||||
<p>Paid</p>
|
||||
<h4>$2458</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive m-t-20">
|
||||
<table id="datatable-buttons" className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Name</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-muted">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Smith Drake</td>
|
||||
<td>27/3/2014</td>
|
||||
<td>$1,00,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-primary-inverse"> Overdue</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Martha Doe</td>
|
||||
<td>28/3/2015</td>
|
||||
<td>$70,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-warning-inverse
|
||||
"> Outstanding</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Fenish Paul</td>
|
||||
<td>24/3/2015</td>
|
||||
<td>$60,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-info-inverse
|
||||
"> Open</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Albom Mitch</td>
|
||||
<td>29/3/2016</td>
|
||||
<td>$60,000</td>
|
||||
<td>
|
||||
<label className="badge mb-0 badge-success-inverse
|
||||
"> Paid</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-xxl-4">
|
||||
<div className="card card-statistics">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Conversion Visualizer</h4>
|
||||
</div>
|
||||
<div className="card-body pb-2">
|
||||
<div className="row no-gutters">
|
||||
<div className="col-sm-4 mt-3">
|
||||
<ul className="list-group list-group-flush">
|
||||
<li className="list-group-item px-0 pt-0 d-flex justify-content-between align-items-center">
|
||||
<p className="text-muted m-b-0">
|
||||
<i className="fa fa-circle-o mr-2 text-primary"></i>
|
||||
Direct
|
||||
</p>
|
||||
<p className="text-primary mb-0">44</p>
|
||||
</li>
|
||||
<li className="list-group-item d-flex px-0 justify-content-between align-items-center">
|
||||
<p className="text-muted m-b-0">
|
||||
<i className="fa fa-circle-o mr-2 text-warning"></i>
|
||||
Referral
|
||||
</p>
|
||||
<p className="text-warning mb-0">55</p>
|
||||
</li>
|
||||
<li className="list-group-item d-flex px-0 justify-content-between align-items-center">
|
||||
<p className="text-muted m-b-0">
|
||||
<i className="fa fa-circle-o mr-2 text-info"></i>
|
||||
Organic Search
|
||||
</p>
|
||||
<p className="text-info mb-0">13</p>
|
||||
</li>
|
||||
<li className="list-group-item d-flex px-0 justify-content-between align-items-center">
|
||||
<p className="text-muted m-b-0">
|
||||
<i className="fa fa-circle-o mr-2 text-danger"></i>
|
||||
Social Network
|
||||
</p>
|
||||
<p className="text-danger mb-0">53</p>
|
||||
</li>
|
||||
<li className="list-group-item d-flex px-0 justify-content-between align-items-center">
|
||||
<p className="text-muted m-b-0">
|
||||
<i className="fa fa-circle-o mr-2 text-dark"></i>
|
||||
Other Advertising
|
||||
</p>
|
||||
<p className="text-dark mb-0">35</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-sm-8">
|
||||
<div className="apexchart-wrapper">
|
||||
<div id="ecommercedemo5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card card-statistics bg-gradient">
|
||||
<div className="card-header d-flex justify-content-between border-0 pb-0">
|
||||
<div className="card-heading">
|
||||
<h4 className="card-title text-white">Next payout</h4>
|
||||
</div>
|
||||
<div className="dropdown">
|
||||
<a className="text-white tooltip-wrapper font-18" href="#" data-toggle="tooltip"
|
||||
data-placement="top" title="" data-original-title="Payout account: XXXX4955"><i
|
||||
className="fa fa-question-circle-o"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<h2 className="text-white mb-0">$12,127.48</h2>
|
||||
<p className="text-white">Your payout will be processed on January 15, 2019</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-xxl-4 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Best selling product</h4>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="blog">
|
||||
<img className="img-fluid" src="assets/img/product.jpg" alt="" />
|
||||
<h4 className="m-b-10 m-t-20"><a href="#">Active Smartwatch</a></h4>
|
||||
<p>Explicabo rem autem fugit, rerum, debitis, perferendis aut Lorem ipsum dolor sit
|
||||
Lorem ipsum dolor sit amet, consectetur.</p>
|
||||
</div>
|
||||
<div className="product-bar m-t-30">
|
||||
<div className="d-flex">
|
||||
<span>Ordered: <b>45</b></span>
|
||||
<span className="ml-auto">Items available: <b>8</b></span>
|
||||
</div>
|
||||
<div className="progress my-3" style={{height: '6px'}}>
|
||||
<div className="progress-bar bg-success" role="progressbar" style={{width: '65%'}}
|
||||
aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-4 m-b-30">
|
||||
<div className="card card-statistics h-100 mb-0">
|
||||
<div className="card-header">
|
||||
<h4 className="card-title">Sales overview</h4>
|
||||
</div>
|
||||
<div className="card-body p-30">
|
||||
<div className="row">
|
||||
<div className="col-xxs-6 h-100 p-2 border-right border-bottom border-xxs-right-0">
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="p-3 text-center">
|
||||
<a href=""
|
||||
className="btn btn-icon btn-round btn-inverse-primary"><i
|
||||
className="fe fe-settings"></i></a>
|
||||
<h2 className="m-t-20 mb-0">$272</h2>
|
||||
<p className="text-muted d-block m-b-0">Avg. Order Value</p>
|
||||
<span className="text-primary"> <i className="fe fe-activity"></i> 155.5% </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxs-6 h-100 p-2 border-bottom">
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="p-3 text-center">
|
||||
<a href=""
|
||||
className="btn btn-icon btn-round btn-inverse-success"><i
|
||||
className="fe fe-user-check"></i></a>
|
||||
<h2 className="m-t-20 mb-0">$450</h2>
|
||||
<p className="text-muted d-block m-b-0">Page Impressions</p>
|
||||
<span className="text-success"> <i
|
||||
className="fe fe-arrow-down-left"></i> 155.5% </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxs-6 h-100 p-2 border-right border-xxs-bottom border-xxs-right-0">
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="p-3 text-center">
|
||||
<a href="" className="btn btn-icon btn-round btn-inverse-danger"><i
|
||||
className="fe fe-bar-chart-2"></i></a>
|
||||
<h2 className="m-t-20 mb-0">$135</h2>
|
||||
<p className="text-muted d-block m-b-0">Quantity</p>
|
||||
<span className="text-danger"> <i
|
||||
className="fe fe-arrow-down-right"></i> 155.5% </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxs-6 h-100 p-2 ">
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<div className="p-3 text-center">
|
||||
<a href="" className="btn btn-icon btn-round btn-inverse-info"><i
|
||||
className="fe fe-crosshair"></i></a>
|
||||
<h2 className="m-t-20 mb-0">$7525</h2>
|
||||
<p className="text-muted d-block m-b-0">Total Products</p>
|
||||
<span className="text-info"> <i className="fe fe-arrow-up"></i> 155.5% </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>;
|
||||
|
||||
}
|
||||
@@ -5,18 +5,18 @@ export default function UserMenu() {
|
||||
<>
|
||||
<div className="sidebar-nav scrollbar scroll_dark">
|
||||
<ul className="metismenu " id="sidebarNav">
|
||||
<li className="nav-static-title">Personal</li>
|
||||
<li className="nav-static-title">Panel</li>
|
||||
<li className="active">
|
||||
<a className="has-arrow" href="javascript:void(0)" aria-expanded="false">
|
||||
<i className="nav-icon ti ti-rocket"></i>
|
||||
<span className="nav-title">Dashboards</span>
|
||||
<span className="nav-title">Dashboard</span>
|
||||
<span className="nav-label label label-danger">9</span>
|
||||
</a>
|
||||
<ul aria-expanded="false">
|
||||
<li><a href='index.html'>Default</a></li>
|
||||
<li className="active"><a href='index-ecommerce.html'>Ecommerce</a></li>
|
||||
<li><a href='#'>Car Dealer</a></li>
|
||||
<li><a href='#'>Stock Market</a></li>
|
||||
<li><a href='/dash'>Home</a></li>
|
||||
<li className="active"><a href='#'>Calendar</a></li>
|
||||
<li><a href='#'>Contacts</a></li>
|
||||
<li><a href='#'>Comments</a></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user