refactor: update dashboard view
This commit is contained in:
Łukasz Holeczek
parent
d6764b794c
commit
a21075da1a
@ -59,6 +59,119 @@ const Dashboard = () => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
const progressGroupExample1 = [
|
||||
{ title: 'Monday', value1: 34, value2: 78 },
|
||||
{ title: 'Tuesday', value1: 56, value2: 94 },
|
||||
{ title: 'Wednesday', value1: 12, value2: 67 },
|
||||
{ title: 'Thursday', value1: 43, value2: 91 },
|
||||
{ title: 'Friday', value1: 22, value2: 73 },
|
||||
{ title: 'Saturday', value1: 53, value2: 82 },
|
||||
{ title: 'Sunday', value1: 9, value2: 69 },
|
||||
]
|
||||
|
||||
const progressGroupExample2 = [
|
||||
{ title: 'Male', icon: cilUser, value: 53 },
|
||||
{ title: 'Female', icon: cilUserFemale, value: 43 },
|
||||
]
|
||||
|
||||
const progressGroupExample3 = [
|
||||
{ title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' },
|
||||
{ title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' },
|
||||
{ title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' },
|
||||
{ title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' },
|
||||
]
|
||||
|
||||
const tableExample = [
|
||||
{
|
||||
avatar: { src: avatar1, status: 'success' },
|
||||
user: {
|
||||
name: 'Yiorgos Avraamu',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'USA', flag: cifUs },
|
||||
usage: {
|
||||
value: 50,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Mastercard', icon: cibCcMastercard },
|
||||
activity: '10 sec ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar2, status: 'danger' },
|
||||
user: {
|
||||
name: 'Avram Tarasios',
|
||||
new: false,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Brazil', flag: cifBr },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'info',
|
||||
},
|
||||
payment: { name: 'Visa', icon: cibCcVisa },
|
||||
activity: '5 minutes ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar3, status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
|
||||
country: { name: 'India', flag: cifIn },
|
||||
usage: {
|
||||
value: 74,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'warning',
|
||||
},
|
||||
payment: { name: 'Stripe', icon: cibCcStripe },
|
||||
activity: '1 hour ago',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar4, status: 'secondary' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
|
||||
country: { name: 'France', flag: cifFr },
|
||||
usage: {
|
||||
value: 98,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'danger',
|
||||
},
|
||||
payment: { name: 'PayPal', icon: cibCcPaypal },
|
||||
activity: 'Last month',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar5, status: 'success' },
|
||||
user: {
|
||||
name: 'Agapetus Tadeáš',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Spain', flag: cifEs },
|
||||
usage: {
|
||||
value: 22,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'primary',
|
||||
},
|
||||
payment: { name: 'Google Wallet', icon: cibCcApplePay },
|
||||
activity: 'Last week',
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar6, status: 'danger' },
|
||||
user: {
|
||||
name: 'Friderik Dávid',
|
||||
new: true,
|
||||
registered: 'Jan 1, 2021',
|
||||
},
|
||||
country: { name: 'Poland', flag: cifPl },
|
||||
usage: {
|
||||
value: 43,
|
||||
period: 'Jun 11, 2021 - Jul 10, 2021',
|
||||
color: 'success',
|
||||
},
|
||||
payment: { name: 'Amex', icon: cibCcAmex },
|
||||
activity: 'Last week',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<WidgetsDropdown />
|
||||
@ -179,27 +292,27 @@ const Dashboard = () => {
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="success" value={40} />
|
||||
<CProgress thin className="mt-2" color="success" value={40} />
|
||||
</CCol>
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="info" value={40} />
|
||||
<CProgress thin className="mt-2" color="info" value={40} />
|
||||
</CCol>
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="warning" value={40} />
|
||||
<CProgress thin className="mt-2" color="warning" value={40} />
|
||||
</CCol>
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} color="danger" value={40} />
|
||||
<CProgress thin className="mt-2" color="danger" value={40} />
|
||||
</CCol>
|
||||
<CCol className="mb-sm-2 mb-0">
|
||||
<div className="text-medium-emphasis">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<CProgress thin className="mt-2" precision={1} value={40} />
|
||||
<CProgress thin className="mt-2" value={40} />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
@ -230,70 +343,17 @@ const Dashboard = () => {
|
||||
</CRow>
|
||||
|
||||
<hr className="mt-0" />
|
||||
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">Monday</span>
|
||||
{progressGroupExample1.map((item, index) => (
|
||||
<div className="progress-group mb-4" key={index}>
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">{item.title}</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={item.value1} />
|
||||
<CProgress thin color="danger" value={item.value2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={34} />
|
||||
<CProgress thin color="danger" value={78} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">Tuesday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={56} />
|
||||
<CProgress thin color="danger" value={94} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">Wednesday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={12} />
|
||||
<CProgress thin color="danger" value={67} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">Thursday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={43} />
|
||||
<CProgress thin color="danger" value={91} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">Friday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={22} />
|
||||
<CProgress thin color="danger" value={73} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">Saturday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={53} />
|
||||
<CProgress thin color="danger" value={82} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-prepend">
|
||||
<span className="text-medium-emphasis small">Sunday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="info" value={9} />
|
||||
<CProgress thin color="danger" value={69} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CCol>
|
||||
|
||||
<CCol xs={12} md={6} xl={6}>
|
||||
@ -314,81 +374,42 @@ const Dashboard = () => {
|
||||
|
||||
<hr className="mt-0" />
|
||||
|
||||
<div className="progress-group mb-4">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon={cilUser} />
|
||||
<span>Male</span>
|
||||
<span className="ms-auto font-semibold">43%</span>
|
||||
{progressGroupExample2.map((item, index) => (
|
||||
<div className="progress-group mb-4" key={index}>
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="me-2" icon={item.icon} size="lg" />
|
||||
<span>{item.title}</span>
|
||||
<span className="ms-auto fw-semibold">{item.value}%</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="warning" value={item.value} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="warning" value={43} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-5">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon={cilUserFemale} />
|
||||
<span>Female</span>
|
||||
<span className="ms-auto font-semibold">37%</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="warning" value={37} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon={cibGoogle} />
|
||||
<span>Organic Search</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
191,235 <span className="text-medium-emphasis small">(56%)</span>
|
||||
</span>
|
||||
<div className="mb-5"></div>
|
||||
|
||||
{progressGroupExample3.map((item, index) => (
|
||||
<div className="progress-group" key={index}>
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="me-2" icon={item.icon} size="lg" />
|
||||
<span>{item.title}</span>
|
||||
<span className="ms-auto fw-semibold">
|
||||
{item.value}{' '}
|
||||
<span className="text-medium-emphasis small">({item.percent}%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="success" value={item.percent} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="success" value={56} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon={cibFacebook} />
|
||||
<span>Facebook</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
51,223 <span className="text-medium-emphasis small">(15%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="success" value={15} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon={cibTwitter} />
|
||||
<span>Twitter</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
37,564 <span className="text-medium-emphasis small">(11%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="success" value={11} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="icon icon-lg me-2" icon={cibLinkedin} />
|
||||
<span>LinkedIn</span>
|
||||
<span className="ms-auto font-semibold">
|
||||
27,319 <span className="text-medium-emphasis small">(8%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress thin color="success" value={8} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<br />
|
||||
|
||||
<CTable hover responsive align="middle" className="mb-0 border">
|
||||
<CTable align="middle" className="mb-0 border" hover responsive>
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell className="text-center">
|
||||
@ -402,210 +423,41 @@ const Dashboard = () => {
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={avatar1} status="success" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Yiorgos Avraamu</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cifUs} title="us" id="us" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>50%</strong>
|
||||
{tableExample.map((item, index) => (
|
||||
<CTableRow v-for="item in tableItems" key={index}>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={item.avatar.src} status={item.avatar.status} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>{item.user.name}</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
|
||||
{item.user.registered}
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={item.country.flag} title={item.country.name} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>{item.usage.value}%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">{item.usage.period}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color="success" value={50} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cibCcMastercard} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>10 sec ago</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={avatar2} status="danger" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Avram Tarasios</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>Recurring</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cifBr} title="br" id="br" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>10%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color="info" value={10} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cibCcVisa} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>5 minutes ago</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={avatar3} status="warning" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Quintin Ed</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cifIn} title="in" id="in" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>74%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color="warning" value={74} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cibCcStripe} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>1 hour ago</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={avatar4} status="secondary" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Enéas Kwadwo</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cifFr} title="fr" id="fr" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>98%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color="danger" value={98} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cibCcPaypal} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>Last month</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={avatar5} status="success" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Agapetus Tadeáš</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cifEs} title="es" id="es" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>22%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color="info" value={22} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cibCcApplePay} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>Last week</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell className="text-center">
|
||||
<CAvatar size="md" src={avatar6} status="danger" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>Friderik Dávid</div>
|
||||
<div className="small text-medium-emphasis">
|
||||
<span>New</span> | Registered: Jan 1, 2015
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cifPl} title="pl" id="pl" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="clearfix">
|
||||
<div className="float-start">
|
||||
<strong>43%</strong>
|
||||
</div>
|
||||
<div className="float-end">
|
||||
<small className="text-medium-emphasis">
|
||||
Jun 11, 2015 - Jul 10, 2015
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress thin color="success" value={43} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={cibCcAmex} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>Yesterday</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CProgress thin color={item.usage.color} value={item.usage.value} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" icon={item.payment.icon} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
<strong>{item.activity}</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
))}
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user