@coreui/ajax
Version:
Open Source Bootstrap Admin Template
1,229 lines (1,185 loc) • 45.9 kB
JavaScript
import React, {Component} from "react";
import {Bar, Line} from "react-chartjs-2";
import {
Badge,
Row,
Col,
Progress,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
Card,
CardHeader,
CardBlock,
CardFooter,
CardTitle,
Button,
ButtonToolbar,
ButtonGroup,
ButtonDropdown,
Label,
Input,
Table
} from "reactstrap";
const brandPrimary = '#20a8d8';
const brandSuccess = '#4dbd74';
const brandInfo = '#63c2de';
const brandWarning = '#f8cb00';
const brandDanger = '#f86c6b';
// Card Chart 1
const cardChartData1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: brandPrimary,
borderColor: 'rgba(255,255,255,.55)',
data: [65, 59, 84, 84, 51, 55, 40]
}
],
};
const cardChartOpts1 = {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent',
}
}],
yAxes: [{
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, cardChartData1.datasets[0].data) - 5,
max: Math.max.apply(Math, cardChartData1.datasets[0].data) + 5,
}
}],
},
elements: {
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
}
}
// Card Chart 2
const cardChartData2 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: brandInfo,
borderColor: 'rgba(255,255,255,.55)',
data: [1, 18, 9, 17, 34, 22, 11]
}
],
};
const cardChartOpts2 = {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent',
}
}],
yAxes: [{
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, cardChartData2.datasets[0].data) - 5,
max: Math.max.apply(Math, cardChartData2.datasets[0].data) + 5,
}
}],
},
elements: {
line: {
tension: 0.00001,
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
}
}
// Card Chart 3
const cardChartData3 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40]
}
],
};
const cardChartOpts3 = {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}],
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
},
}
}
// Card Chart 4
const cardChartData4 = {
labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.3)',
borderColor: 'transparent',
data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
}
],
};
const cardChartOpts4 = {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false,
barPercentage: 0.6,
}],
yAxes: [{
display: false,
}]
}
}
// Social Box Chart
const socialBoxData = [
{data: [65, 59, 84, 84, 51, 55, 40], label: 'facebook'},
{data: [1, 13, 9, 17, 34, 41, 38], label: 'twitter'},
{data: [78, 81, 80, 45, 34, 12, 40], label: 'linkedin'},
{data: [35, 23, 56, 22, 97, 23, 64], label: 'google'}
];
const makeSocialBoxData = (dataSetNo) => {
const dataset = socialBoxData[dataSetNo];
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: dataset.data,
label: dataset.label,
}
]
};
return () => data;
};
const socialChartOpts = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3
}
}
};
// sparkline charts
const sparkLineChartData = [
{
data: [35, 23, 56, 22, 97, 23, 64],
label: 'New Clients'
},
{
data: [65, 59, 84, 84, 51, 55, 40],
label: 'Recurring Clients'
},
{
data: [35, 23, 56, 22, 97, 23, 64],
label: 'Pageviews'
},
{
data: [65, 59, 84, 84, 51, 55, 40],
label: 'Organic'
},
{
data: [78, 81, 80, 45, 34, 12, 40],
label: 'CTR'
},
{
data: [1, 13, 9, 17, 34, 41, 38],
label: 'Bounce Rate'
}
];
const makeSparkLineData = (dataSetNo, variant) => {
const dataset = sparkLineChartData[dataSetNo];
const data = {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: variant ? variant : '#c2cfd6',
data: dataset.data,
label: dataset.label
}
],
};
return () => data;
};
const sparklineChartOpts = {
responsive: true,
maintainAspectRatio: true,
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
}
},
legend: {
display: false
}
};
// Main Chart
// convert Hex to RGBA
function convertHex(hex, opacity) {
hex = hex.replace('#', '');
var r = parseInt(hex.substring(0, 2), 16);
var g = parseInt(hex.substring(2, 4), 16);
var b = parseInt(hex.substring(4, 6), 16);
var result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
return result;
}
//Random Numbers
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var elements = 27;
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i <= elements; i++) {
data1.push(random(50, 200));
data2.push(random(80, 100));
data3.push(65);
}
const mainChart = {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [
{
label: 'My First dataset',
backgroundColor: convertHex(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data1
},
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: brandSuccess,
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: data2
},
{
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: brandDanger,
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
borderDash: [8, 5],
data: data3
}
]
}
const mainChartOpts = {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false,
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
max: 250
}
}]
},
elements: {
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
}
}
}
class Dashboard extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-primary">
<CardBlock className="card-body pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card1' isOpen={this.state.card1}
toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card1 ? "show" : ""} right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem disabled>Disabled action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
<div className="chart-wrapper px-3" style={{height:'70px'}}>
<Line data={cardChartData1} options={cardChartOpts1} height={70}/>
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-info">
<CardBlock className="card-body pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card2' isOpen={this.state.card2}
toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card2 ? "show" : ""} right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
<div className="chart-wrapper px-3" style={{height:'70px'}}>
<Line data={cardChartData2} options={cardChartOpts2} height={70}/>
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-warning">
<CardBlock className="card-body pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card3' isOpen={this.state.card3}
toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card3 ? "show" : ""} right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
<div className="chart-wrapper px-0" style={{height:'70px'}}>
<Line data={cardChartData3} options={cardChartOpts3} height={70}/>
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-danger">
<CardBlock className="card-body pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card4' isOpen={this.state.card4}
toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card4 ? "show" : ""} right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
<div className="chart-wrapper px-3" style={{height:'70px'}}>
<Bar data={cardChartData4} options={cardChartOpts4} height={70}/>
</div>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardBlock className="card-body">
<Row>
<Col sm="5">
<CardTitle className="mb-0">Traffic</CardTitle>
<div className="small text-muted">November 2015</div>
</Col>
<Col sm="7" className="d-none d-sm-inline-block">
<Button color="primary" className="float-right"><i className="icon-cloud-download"></i></Button>
<ButtonToolbar className="float-right" aria-label="Toolbar with button groups">
<ButtonGroup className="mr-3" data-toggle="buttons" aria-label="First group">
<Label htmlFor="option1" className="btn btn-outline-secondary">
<Input type="radio" name="options" id="option1"/> Day
</Label>
<Label htmlFor="option2" className="btn btn-outline-secondary active">
<Input type="radio" name="options" id="option2" defaultChecked/> Month
</Label>
<Label htmlFor="option3" className="btn btn-outline-secondary">
<Input type="radio" name="options" id="option3"/> Year
</Label>
</ButtonGroup>
</ButtonToolbar>
</Col>
</Row>
<div className="chart-wrapper" style={{height: 300 + 'px', marginTop: 40 + 'px'}}>
<Line data={mainChart} options={mainChartOpts} height={300}/>
</div>
</CardBlock>
<CardFooter>
<ul>
<li>
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<Progress className="progress-xs mt-2" color="success" value="40"/>
</li>
<li className="d-none d-md-table-cell">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<Progress className="progress-xs mt-2" color="info" value="20"/>
</li>
<li>
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<Progress className="progress-xs mt-2" color="warning" value="60"/>
</li>
<li className="d-none d-md-table-cell">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<Progress className="progress-xs mt-2" color="danger" value="80"/>
</li>
<li className="d-none d-md-table-cell">
<div className="text-muted">Bounce Rate</div>
<strong>Average 40.15%</strong>
<Progress className="progress-xs mt-2" color="primary" value="40"/>
</li>
</ul>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="6" sm="6" lg="3">
<div className="social-box facebook">
<i className="fa fa-facebook"></i>
<div className="chart-wrapper">
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90}/>
</div>
<ul>
<li>
<strong>89k</strong>
<span>friends</span>
</li>
<li>
<strong>459</strong>
<span>feeds</span>
</li>
</ul>
</div>
</Col>
<Col xs="6" sm="6" lg="3">
<div className="social-box twitter">
<i className="fa fa-twitter"></i>
<div className="chart-wrapper">
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90}/>
</div>
<ul>
<li>
<strong>973k</strong>
<span>followers</span>
</li>
<li>
<strong>1.792</strong>
<span>tweets</span>
</li>
</ul>
</div>
</Col>
<Col xs="6" sm="6" lg="3">
<div className="social-box linkedin">
<i className="fa fa-linkedin"></i>
<div className="chart-wrapper">
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90}/>
</div>
<ul>
<li>
<strong>500+</strong>
<span>contacts</span>
</li>
<li>
<strong>292</strong>
<span>feeds</span>
</li>
</ul>
</div>
</Col>
<Col xs="6" sm="6" lg="3">
<div className="social-box google-plus">
<i className="fa fa-google-plus"></i>
<div className="chart-wrapper">
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90}/>
</div>
<ul>
<li>
<strong>894</strong>
<span>followers</span>
</li>
<li>
<strong>92</strong>
<span>circles</span>
</li>
</ul>
</div>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
Traffic {'&'} Sales
</CardHeader>
<CardBlock className="card-body">
<Row>
<Col xs="12" md="6" xl="4">
<Row>
<Col sm="6">
<div className="callout callout-info">
<small className="text-muted">New Clients</small>
<br/>
<strong className="h4">9,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(0, brandPrimary)} options={sparklineChartOpts} width={100} height={30}/>
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-danger">
<small className="text-muted">Recurring Clients</small>
<br/>
<strong className="h4">22,643</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(1, brandDanger)} options={sparklineChartOpts} width={100} height={30}/>
</div>
</div>
</Col>
</Row>
<hr className="mt-0"/>
<ul className="horizontal-bars">
<li>
<div className="title">
Monday
</div>
<div className="bars">
<Progress className="progress-xs" color="info" value="34"/>
<Progress className="progress-xs" color="danger" value="78"/>
</div>
</li>
<li>
<div className="title">
Tuesday
</div>
<div className="bars">
<Progress className="progress-xs" color="info" value="56"/>
<Progress className="progress-xs" color="danger" value="94"/>
</div>
</li>
<li>
<div className="title">
Wednesday
</div>
<div className="bars">
<Progress className="progress-xs" color="info" value="12"/>
<Progress className="progress-xs" color="danger" value="67"/>
</div>
</li>
<li>
<div className="title">
Thursday
</div>
<div className="bars">
<Progress className="progress-xs" color="info" value="43"/>
<Progress className="progress-xs" color="danger" value="91"/>
</div>
</li>
<li>
<div className="title">
Friday
</div>
<div className="bars">
<Progress className="progress-xs" color="info" value="22"/>
<Progress className="progress-xs" color="danger" value="73"/>
</div>
</li>
<li>
<div className="title">
Saturday
</div>
<div className="bars">
<Progress className="progress-xs" color="info" value="53"/>
<Progress className="progress-xs" color="danger" value="82"/>
</div>
</li>
<li>
<div className="title">
Sunday
</div>
<div className="bars">
<Progress className="progress-xs" color="info" value="9"/>
<Progress className="progress-xs" color="danger" value="69"/>
</div>
</li>
<li className="legend">
<Badge pill color="info"></Badge>
<small>New clients</small>
<Badge pill color="danger"></Badge>
<small>Recurring clients</small>
</li>
</ul>
</Col>
<Col xs="12" md="6" xl="4">
<Row>
<Col sm="6">
<div className="callout callout-warning">
<small className="text-muted">Pageviews</small>
<br/>
<strong className="h4">78,623</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(2, brandWarning)} options={sparklineChartOpts} width={100} height={30}/>
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-success">
<small className="text-muted">Organic</small>
<br/>
<strong className="h4">49,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(3, brandSuccess)} options={sparklineChartOpts} width={100} height={30}/>
</div>
</div>
</Col>
</Row>
<hr className="mt-0"/>
<ul className="horizontal-bars type-2">
<li>
<i className="icon-user"></i>
<span className="title">Male</span>
<span className="value">43%</span>
<div className="bars">
<Progress className="progress-xs" color="warning" value="43"/>
</div>
</li>
<li>
<i className="icon-user-female"></i>
<span className="title">Female</span>
<span className="value">37%</span>
<div className="bars">
<Progress className="progress-xs" color="warning" value="37"/>
</div>
</li>
<li className="divider"></li>
<li>
<i className="icon-globe"></i>
<span className="title">Organic Search</span>
<span className="value">191,235 <span className="text-muted small">(56%)</span></span>
<div className="bars">
<Progress className="progress-xs" color="success" value="56"/>
</div>
</li>
<li>
<i className="icon-social-facebook"></i>
<span className="title">Facebook</span>
<span className="value">51,223 <span className="text-muted small">(15%)</span></span>
<div className="bars">
<Progress className="progress-xs" color="success" value="15"/>
</div>
</li>
<li>
<i className="icon-social-twitter"></i>
<span className="title">Twitter</span>
<span className="value">37,564 <span className="text-muted small">(11%)</span></span>
<div className="bars">
<Progress className="progress-xs" color="success" value="11"/>
</div>
</li>
<li>
<i className="icon-social-linkedin"></i>
<span className="title">LinkedIn</span>
<span className="value">27,319 <span className="text-muted small">(8%)</span></span>
<div className="bars">
<Progress className="progress-xs" color="success" value="8"/>
</div>
</li>
<li className="divider text-center">
<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top"
title="" data-original-title="show more"><i className="icon-options"></i></Button>
</li>
</ul>
</Col>
<Col xs="12" xl="4">
<Row>
<Col sm="6">
<div className="callout">
<small className="text-muted">CTR</small>
<br/>
<strong className="h4">23%</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(4)} options={sparklineChartOpts} width={100} height={30}/>
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-primary">
<small className="text-muted">Bounce Rate</small>
<br/>
<strong className="h4">5%</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(5, brandPrimary)} options={sparklineChartOpts} width={100} height={30}/>
</div>
</div>
</Col>
</Row>
<hr className="mt-0"/>
<ul className="icons-list">
<li>
<i className="icon-screen-desktop bg-primary"></i>
<div className="desc">
<div className="title">iMac 4k</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div className="value">
<div className="small text-muted">Sold this week</div>
<strong>1.924</strong>
</div>
<div className="actions">
<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>
</div>
</li>
<li>
<i className="icon-screen-smartphone bg-info"></i>
<div className="desc">
<div className="title">Samsung Galaxy Edge</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div className="value">
<div className="small text-muted">Sold this week</div>
<strong>1.224</strong>
</div>
<div className="actions">
<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>
</div>
</li>
<li>
<i className="icon-screen-smartphone bg-warning"></i>
<div className="desc">
<div className="title">iPhone 6S</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div className="value">
<div className="small text-muted">Sold this week</div>
<strong>1.163</strong>
</div>
<div className="actions">
<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>
</div>
</li>
<li>
<i className="icon-user bg-danger"></i>
<div className="desc">
<div className="title">Premium accounts</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div className="value">
<div className="small text-muted">Sold this week</div>
<strong>928</strong>
</div>
<div className="actions">
<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>
</div>
</li>
<li>
<i className="icon-social-spotify bg-success"></i>
<div className="desc">
<div className="title">Spotify Subscriptions</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div className="value">
<div className="small text-muted">Sold this week</div>
<strong>893</strong>
</div>
<div className="actions">
<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>
</div>
</li>
<li>
<i className="icon-cloud-download bg-danger"></i>
<div className="desc">
<div className="title">Ebook</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div className="value">
<div className="small text-muted">Downloads</div>
<strong>121.924</strong>
</div>
<div className="actions">
<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>
</div>
</li>
<li>
<i className="icon-camera bg-warning"></i>
<div className="desc">
<div className="title">Photos</div>
<small>Lorem ipsum dolor sit amet</small>
</div>
<div className="value">
<div className="small text-muted">Uploaded</div>
<strong>12.125</strong>
</div>
<div className="actions">
<Button color="link" className="text-muted"><i className="icon-settings"></i></Button>
</div>
</li>
<li className="divider text-center">
<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top"
title="show more"><i className="icon-options"></i></Button>
</li>
</ul>
</Col>
</Row>
<br/>
<Table hover responsive className="table-outline mb-0 d-none d-sm-table">
<thead className="thead-default">
<tr>
<th className="text-center"><i className="icon-people"></i></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'img/avatars/1.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<img src={'img/flags/USA.png'} alt="USA" style={{height: 24 + 'px'}}/>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="50"/>
</td>
<td className="text-center">
<i className="fa fa-cc-mastercard" style={{fontSize: 24 + 'px'}}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<img src={'img/flags/Brazil.png'} alt="Brazil" style={{height: 24 + 'px'}}/>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="10"/>
</td>
<td className="text-center">
<i className="fa fa-cc-visa" style={{fontSize: 24 + 'px'}}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="avatar-status badge-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<img src={'img/flags/India.png'} alt="India" style={{height: 24 + 'px'}}/>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="warning" value="74"/>
</td>
<td className="text-center">
<i className="fa fa-cc-stripe" style={{fontSize: 24 + 'px'}}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="avatar-status badge-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<img src={'img/flags/France.png'} alt="France" style={{height: 24 + 'px'}}/>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="danger" value="98"/>
</td>
<td className="text-center">
<i className="fa fa-paypal" style={{fontSize: 24 + 'px'}}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<img src={'img/flags/Spain.png'} alt="Spain" style={{height: 24 + 'px'}}/>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="22"/>
</td>
<td className="text-center">
<i className="fa fa-google-wallet" style={{fontSize: 24 + 'px'}}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<img src={'img/flags/Poland.png'} alt="Poland" style={{height: 24 + 'px'}}/>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="43"/>
</td>
<td className="text-center">
<i className="fa fa-cc-amex" style={{fontSize: 24 + 'px'}}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</Table>
</CardBlock>
</Card>
</Col>
</Row>
</div>
)
}
}
export default Dashboard;