refactor: update views
This commit is contained in:
Łukasz Holeczek
parent
9842172b67
commit
dd64f3c2db
@ -88,6 +88,7 @@ import {
|
||||
cilLockLocked,
|
||||
cilMagnifyingGlass,
|
||||
cilMap,
|
||||
cilMenu,
|
||||
cilMoon,
|
||||
cilNotes,
|
||||
cilOptions,
|
||||
@ -189,6 +190,7 @@ export const icons = Object.assign(
|
||||
cilLockLocked,
|
||||
cilMagnifyingGlass,
|
||||
cilMap,
|
||||
cilMenu,
|
||||
cilMoon,
|
||||
cilNotes,
|
||||
cilOptions,
|
||||
|
||||
@ -31,7 +31,7 @@ const AppBreadcrumb = () => {
|
||||
const breadcrumbs = getBreadcrumbs(currentLocation)
|
||||
|
||||
return (
|
||||
<CBreadcrumb className="m-0">
|
||||
<CBreadcrumb className="m-0 ms-2">
|
||||
<CBreadcrumbItem href="/">Home</CBreadcrumbItem>
|
||||
{breadcrumbs.map((breadcrumb, index) => {
|
||||
return (
|
||||
|
||||
@ -42,13 +42,13 @@ const AppHeader = () => {
|
||||
className="ms-md-3 d-lg-none"
|
||||
onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
|
||||
>
|
||||
<CIcon name="cil-menu" />
|
||||
<CIcon name="cil-menu" size="lg" />
|
||||
</CHeaderToggler>
|
||||
<CHeaderBrand className="mx-auto d-lg-none" to="/">
|
||||
<CHeaderBrand className="mx-auto d-md-none" to="/">
|
||||
<CIcon name="logo" height="48" alt="Logo" />
|
||||
</CHeaderBrand>
|
||||
|
||||
<CHeaderNav className="d-md-down-none me-auto">
|
||||
<CHeaderNav className="d-none d-md-flex me-auto">
|
||||
<CNavItem>
|
||||
<CNavLink to="/dashboard" component={NavLink} activeClassName="active">
|
||||
Dashboard
|
||||
@ -63,9 +63,23 @@ const AppHeader = () => {
|
||||
</CHeaderNav>
|
||||
|
||||
<CHeaderNav>
|
||||
<AppHeaderDropdownNotif />
|
||||
<AppHeaderDropdownTasks />
|
||||
<AppHeaderDropdownMssg />
|
||||
<CNavItem>
|
||||
<CNavLink>
|
||||
<CIcon name="cil-bell" size="lg" />
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink>
|
||||
<CIcon name="cil-list" size="lg" />
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink>
|
||||
<CIcon name="cil-envelope-open" size="lg" />
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CHeaderNav>
|
||||
<CHeaderNav>
|
||||
<AppHeaderDropdown />
|
||||
</CHeaderNav>
|
||||
</CContainer>
|
||||
|
||||
@ -30,7 +30,7 @@ const AppSidebar = () => {
|
||||
dispatch({ type: 'set', sidebarShow: false })
|
||||
}}
|
||||
>
|
||||
<CSidebarBrand className="d-md-down-none" to="/">
|
||||
<CSidebarBrand className="d-none d-md-flex" to="/">
|
||||
<CIcon className="sidebar-brand-full" name="logo-negative" height={35} />
|
||||
<CIcon className="sidebar-brand-narrow" name="sygnet" height={35} />
|
||||
</CSidebarBrand>
|
||||
@ -38,7 +38,7 @@ const AppSidebar = () => {
|
||||
<CCreateNavItem items={navigation} />
|
||||
</CSidebarNav>
|
||||
<CSidebarToggler
|
||||
className="c-d-md-down-none"
|
||||
className="d-none d-lg-flex"
|
||||
onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
|
||||
/>
|
||||
</CSidebar>
|
||||
|
||||
@ -14,64 +14,64 @@ import CIcon from '@coreui/icons-react'
|
||||
const AppHeaderDropdown = () => {
|
||||
return (
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle placement="bottom-end">
|
||||
<CAvatar image="avatars/6.jpg" />
|
||||
<CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
|
||||
<CAvatar src="avatars/8.jpg" size="md" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-bell" className="me-2" />
|
||||
Updates
|
||||
<CBadge color="info" className="ms-auto">
|
||||
<CBadge color="info" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-envelope-open" className="me-2" />
|
||||
Messages
|
||||
<CBadge color="success" className="ms-auto">
|
||||
<CBadge color="success" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-task" className="me-2" />
|
||||
Tasks
|
||||
<CBadge color="danger" className="ms-auto">
|
||||
<CBadge color="danger" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-comment-square" className="me-2" />
|
||||
Comments
|
||||
<CBadge color="warning" className="ms-auto">
|
||||
<CBadge color="warning" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-user" className="me-2" />
|
||||
Profile
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-settings" className="me-2" />
|
||||
Settings
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-credit-card" className="me-2" />
|
||||
Payments
|
||||
<CBadge color="secondary" className="ms-auto">
|
||||
<CBadge color="secondary" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-file" className="me-2" />
|
||||
Projects
|
||||
<CBadge color="primary" className="ms-auto">
|
||||
<CBadge color="primary" className="ms-2">
|
||||
42
|
||||
</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<CIcon name="cil-lock-locked" className="me-2" />
|
||||
Lock Account
|
||||
</CDropdownItem>
|
||||
|
||||
@ -26,16 +26,16 @@ const AppHeaderDropdownMssg = () => {
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<CAvatar image={'avatars/7.jpg'} status="success" />
|
||||
<CAvatar src={'avatars/7.jpg'} status="success" />
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">John Doe</small>
|
||||
<small className="text-muted float-end mt-1">Just now</small>
|
||||
<small className="text-medium-emphasis">John Doe</small>
|
||||
<small className="text-medium-emphasis float-end mt-1">Just now</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">
|
||||
<span className="fa fa-exclamation text-danger"></span> Important message
|
||||
</div>
|
||||
<div className="small text-muted text-truncate">
|
||||
<div className="small text-medium-emphasis text-truncate">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||||
incididunt...
|
||||
</div>
|
||||
@ -45,14 +45,14 @@ const AppHeaderDropdownMssg = () => {
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<CAvatar image={'avatars/6.jpg'} status="warning" />
|
||||
<CAvatar src={'avatars/6.jpg'} status="warning" />
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Jane Dovve</small>
|
||||
<small className="text-muted float-end mt-1">5 minutes ago</small>
|
||||
<small className="text-medium-emphasis">Jane Dovve</small>
|
||||
<small className="text-medium-emphasis float-end mt-1">5 minutes ago</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">
|
||||
<div className="small text-medium-emphasis text-truncate">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||||
incididunt...
|
||||
</div>
|
||||
@ -62,14 +62,14 @@ const AppHeaderDropdownMssg = () => {
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<CAvatar image={'avatars/5.jpg'} status="danger" />
|
||||
<CAvatar src={'avatars/5.jpg'} status="danger" />
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Janet Doe</small>
|
||||
<small className="text-muted float-end mt-1">1:52 PM</small>
|
||||
<small className="text-medium-emphasis">Janet Doe</small>
|
||||
<small className="text-medium-emphasis float-end mt-1">1:52 PM</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">
|
||||
<div className="small text-medium-emphasis text-truncate">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||||
incididunt...
|
||||
</div>
|
||||
@ -79,14 +79,14 @@ const AppHeaderDropdownMssg = () => {
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<CAvatar image={'avatars/4.jpg'} status="info" />
|
||||
<CAvatar src={'avatars/4.jpg'} status="info" />
|
||||
</div>
|
||||
<div>
|
||||
<small className="text-muted">Joe Doe</small>
|
||||
<small className="text-muted float-end mt-1">4:03 AM</small>
|
||||
<small className="text-medium-emphasis">Joe Doe</small>
|
||||
<small className="text-medium-emphasis float-end mt-1">4:03 AM</small>
|
||||
</div>
|
||||
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||
<div className="small text-muted text-truncate">
|
||||
<div className="small text-medium-emphasis text-truncate">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||||
incididunt...
|
||||
</div>
|
||||
|
||||
@ -48,7 +48,7 @@ const AppHeaderDropdownNotif = () => {
|
||||
</small>
|
||||
</div>
|
||||
<CProgress size="xs" color="info" value={25} />
|
||||
<small className="text-muted">348 Processes. 1/4 Cores.</small>
|
||||
<small className="text-medium-emphasis">348 Processes. 1/4 Cores.</small>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
@ -57,7 +57,7 @@ const AppHeaderDropdownNotif = () => {
|
||||
</small>
|
||||
</div>
|
||||
<CProgress size="xs" color="warning" value={70} />
|
||||
<small className="text-muted">11444GB/16384MB</small>
|
||||
<small className="text-medium-emphasis">11444GB/16384MB</small>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="text-uppercase mb-1">
|
||||
@ -66,7 +66,7 @@ const AppHeaderDropdownNotif = () => {
|
||||
</small>
|
||||
</div>
|
||||
<CProgress size="xs" color="danger" value={90} />
|
||||
<small className="text-muted">243GB/256GB</small>
|
||||
<small className="text-medium-emphasis">243GB/256GB</small>
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
|
||||
@ -139,14 +139,14 @@ const _nav = [
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Dropdowns',
|
||||
to: '/buttons/button-dropdowns',
|
||||
to: '/buttons/dropdowns',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Forms',
|
||||
icon: <CIcon name="cil-note" customClasses="nav-icon" />,
|
||||
icon: <CIcon name="cil-notes" customClasses="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -288,25 +288,25 @@ const _nav = [
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Login',
|
||||
to: '/pages/login',
|
||||
to: '/login',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Register',
|
||||
to: '/pages/register',
|
||||
to: '/register',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Error 404',
|
||||
to: '/pages/404',
|
||||
to: '/404',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Error 500',
|
||||
to: '/pages/500',
|
||||
to: '/500',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -41,6 +41,8 @@ const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/To
|
||||
|
||||
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
|
||||
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
|
||||
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
|
||||
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
|
||||
|
||||
const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets'))
|
||||
|
||||
@ -88,8 +90,10 @@ const routes = [
|
||||
{ path: '/notifications/badges', name: 'Badges', component: Badges },
|
||||
{ path: '/notifications/modals', name: 'Modals', component: Modals },
|
||||
{ path: '/notifications/toasts', name: 'Toasts', component: Toasts },
|
||||
{ path: '/pages/login', name: 'Login', component: Login },
|
||||
{ path: '/pages/register', name: 'Register', component: Register },
|
||||
// { path: '/login', name: 'Login', component: Login },
|
||||
// { path: '/register', name: 'Register', component: Register },
|
||||
// { path: '/404', name: '404', component: Page404 },
|
||||
// { path: '/500', name: '500', component: Page500 },
|
||||
{ path: '/widgets', name: 'Widgets', component: Widgets },
|
||||
]
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@ import {
|
||||
CAvatar,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCallout,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardFooter,
|
||||
@ -12,6 +11,12 @@ import {
|
||||
CCol,
|
||||
CProgress,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
CTableDataCell,
|
||||
CTableHead,
|
||||
CTableHeaderCell,
|
||||
CTableRow,
|
||||
} from '@coreui/react'
|
||||
import { CChart } from '@coreui/react-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils'
|
||||
@ -37,7 +42,7 @@ const Dashboard = () => {
|
||||
<h4 id="traffic" className="card-title mb-0">
|
||||
Traffic
|
||||
</h4>
|
||||
<div className="small text-muted">January - July 2021</div>
|
||||
<div className="small text-medium-emphasis">January - July 2021</div>
|
||||
</CCol>
|
||||
<CCol sm="7" className="d-none d-md-block">
|
||||
<CButton color="primary" className="float-end">
|
||||
@ -146,27 +151,27 @@ const Dashboard = () => {
|
||||
<CCardFooter>
|
||||
<CRow className="text-center">
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<div className="text-muted">Visits</div>
|
||||
<div className="text-medium-emphasis">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<CProgress className="progress-xs mt-2" precision={1} color="success" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div className="text-muted">Unique</div>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<CProgress className="progress-xs mt-2" precision={1} color="info" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<div className="text-muted">Pageviews</div>
|
||||
<div className="text-medium-emphasis">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<CProgress className="progress-xs mt-2" precision={1} color="warning" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<div className="text-muted">New Users</div>
|
||||
<div className="text-medium-emphasis">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<CProgress className="progress-xs mt-2" precision={1} color="danger" value={40} />
|
||||
</CCol>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div className="text-muted">Bounce Rate</div>
|
||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<CProgress className="progress-xs mt-2" precision={1} value={40} />
|
||||
</CCol>
|
||||
@ -185,13 +190,13 @@ const Dashboard = () => {
|
||||
<CCol xs="12" md="6" xl="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<div className="border-start border-start-3 border-start-info py-1 px-3">
|
||||
<div className="border-start border-start-4 border-start-info py-1 px-3">
|
||||
<div className="text-medium-emphasis small">New Clients</div>
|
||||
<div className="fs-3 fw-semibold">9,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<div className="border-start border-start-3 border-start-danger py-1 px-3 mb-3">
|
||||
<div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Recurring Clients</div>
|
||||
<div className="fs-3 fw-semibold">22,643</div>
|
||||
</div>
|
||||
@ -268,13 +273,13 @@ const Dashboard = () => {
|
||||
<CCol xs="12" md="6" xl="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<div className="border-start border-start-3 border-start-warning py-1 px-3 mb-3">
|
||||
<div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Pageviews</div>
|
||||
<div className="fs-3 fw-semibold">78,623</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<div className="border-start border-start-3 border-start-success py-1 px-3 mb-3">
|
||||
<div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
|
||||
<div className="text-medium-emphasis small">Organic</div>
|
||||
<div className="fs-3 fw-semibold">49,123</div>
|
||||
</div>
|
||||
@ -309,7 +314,7 @@ const Dashboard = () => {
|
||||
<CIcon className="icon icon-lg me-2" name="cib-google" />
|
||||
<span>Organic Search</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
191,235 <span className="text-muted small">(56%)</span>
|
||||
191,235 <span className="text-medium-emphasis small">(56%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
@ -321,7 +326,7 @@ const Dashboard = () => {
|
||||
<CIcon name="cib-facebook" className="icon icon-lg me-2" />
|
||||
<span>Facebook</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
51,223 <span className="text-muted small">(15%)</span>
|
||||
51,223 <span className="text-medium-emphasis small">(15%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
@ -333,7 +338,7 @@ const Dashboard = () => {
|
||||
<CIcon name="cib-twitter" className="icon icon-lg me-2" />
|
||||
<span>Twitter</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
37,564 <span className="text-muted small">(11%)</span>
|
||||
37,564 <span className="text-medium-emphasis small">(11%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
@ -345,7 +350,7 @@ const Dashboard = () => {
|
||||
<CIcon name="cib-linkedin" className="icon icon-lg me-2" />
|
||||
<span>LinkedIn</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
27,319 <span className="text-muted small">(8%)</span>
|
||||
27,319 <span className="text-medium-emphasis small">(8%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
@ -357,214 +362,226 @@ const Dashboard = () => {
|
||||
|
||||
<br />
|
||||
|
||||
<table className="table table-hover table-outline mb-0 d-none d-sm-table">
|
||||
<thead className="thead-light">
|
||||
<tr>
|
||||
<th className="text-center">
|
||||
<CTable hover responsive className="mb-0 border">
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell className="text-center">
|
||||
<CIcon name="cil-people" />
|
||||
</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">
|
||||
<CAvatar image="avatars/1.jpg" status="success" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell>User</CTableHeaderCell>
|
||||
<CTableHeaderCell className="text-center">Country</CTableHeaderCell>
|
||||
<CTableHeaderCell>Usage</CTableHeaderCell>
|
||||
<CTableHeaderCell className="text-center">Payment Method</CTableHeaderCell>
|
||||
<CTableHeaderCell>Activity</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/1.jpg" status="success" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Yiorgos Avraamu</div>
|
||||
<div className="small text-muted">
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cif-us" title="us" id="us" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cif-us" title="us" id="us" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>50%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="success" value="50" />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cib-cc-mastercard" />
|
||||
</td>
|
||||
<td>
|
||||
<div className="small text-muted">Last login</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-cc-mastercard" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>10 sec ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<CAvatar image="avatars/2.jpg" status="danger" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/2.jpg" status="danger" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Avram Tarasios</div>
|
||||
<div className="small text-muted">
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>Recurring</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cif-br" title="br" id="br" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cif-br" title="br" id="br" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>10%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="info" value="10" />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cib-cc-visa" />
|
||||
</td>
|
||||
<td>
|
||||
<div className="small text-muted">Last login</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-cc-visa" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>5 minutes ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<CAvatar image="avatars/3.jpg" status="warning" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/3.jpg" status="warning" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Quintin Ed</div>
|
||||
<div className="small text-muted">
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cif-in" title="in" id="in" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cif-in" title="in" id="in" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>74%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="warning" value="74" />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cib-stripe" />
|
||||
</td>
|
||||
<td>
|
||||
<div className="small text-muted">Last login</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-stripe" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>1 hour ago</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<CAvatar image="avatars/4.jpg" status="secondary" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/4.jpg" status="secondary" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Enéas Kwadwo</div>
|
||||
<div className="small text-muted">
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cif-fr" title="fr" id="fr" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>98%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="danger" value="98" />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cib-paypal" />
|
||||
</td>
|
||||
<td>
|
||||
<div className="small text-muted">Last login</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-paypal" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>Last month</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<CAvatar image="avatars/5.jpg" status="success" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/5.jpg" status="success" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Agapetus Tadeáš</div>
|
||||
<div className="small text-muted">
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cif-es" title="es" id="es" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cif-es" title="es" id="es" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>22%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="info" value="22" />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cib-google-pay" />
|
||||
</td>
|
||||
<td>
|
||||
<div className="small text-muted">Last login</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-google-pay" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>Last week</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<CAvatar image="avatars/6.jpg" status="danger" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src="avatars/6.jpg" status="danger" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Friderik Dávid</div>
|
||||
<div className="small text-muted">
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
|
||||
</td>
|
||||
<td>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cif-pl" title="pl" id="pl" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>43%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="success" value="43" />
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<CIcon height={25} name="cib-cc-amex" />
|
||||
</td>
|
||||
<td>
|
||||
<div className="small text-muted">Last login</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-cc-amex" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>Yesterday</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
@ -14,16 +14,13 @@ const ChartBarSimple = (props) => {
|
||||
} = props
|
||||
|
||||
const defaultDatasets = {
|
||||
datasets: [
|
||||
{
|
||||
data: dataPoints,
|
||||
backgroundColor: getColor(backgroundColor),
|
||||
pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
|
||||
label: label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1,
|
||||
},
|
||||
],
|
||||
|
||||
data: dataPoints,
|
||||
backgroundColor: getColor(backgroundColor),
|
||||
pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
|
||||
label: label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1,
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
@ -62,8 +59,8 @@ const ChartBarSimple = (props) => {
|
||||
type="bar"
|
||||
{...attributes}
|
||||
data={defaultDatasets}
|
||||
options={defaultOptions}
|
||||
labels={label}
|
||||
// options={defaultOptions}
|
||||
// labels={label}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user