first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,89 @@
|
||||
import {Navigate, Route, Routes, Outlet} from 'react-router-dom'
|
||||
import {PageLink, PageTitle} from '../../../_metronic/layout/core'
|
||||
import {Charts} from './components/Charts'
|
||||
import {Feeds} from './components/Feeds'
|
||||
import {Lists} from './components/Lists'
|
||||
import {Tables} from './components/Tables'
|
||||
import {Mixed} from './components/Mixed'
|
||||
import {Statistics} from './components/Statistics'
|
||||
|
||||
const widgetsBreadCrumbs: Array<PageLink> = [
|
||||
{
|
||||
title: 'Widgets',
|
||||
path: '/crafted/widgets/charts',
|
||||
isSeparator: false,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
path: '',
|
||||
isSeparator: true,
|
||||
isActive: false,
|
||||
},
|
||||
]
|
||||
|
||||
const WidgetsPage = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<Outlet />}>
|
||||
<Route
|
||||
path='charts'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={widgetsBreadCrumbs}>Charts</PageTitle>
|
||||
<Charts />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='feeds'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={widgetsBreadCrumbs}>Feeds</PageTitle>
|
||||
<Feeds />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='lists'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={widgetsBreadCrumbs}>Lists</PageTitle>
|
||||
<Lists />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='mixed'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={widgetsBreadCrumbs}>Mixed</PageTitle>
|
||||
<Mixed />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='tables'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={widgetsBreadCrumbs}>Tables</PageTitle>
|
||||
<Tables />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path='statistics'
|
||||
element={
|
||||
<>
|
||||
<PageTitle breadcrumbs={widgetsBreadCrumbs}>Statiscics</PageTitle>
|
||||
<Statistics />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Route index element={<Navigate to='/crafted/widgets/lists' />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
export default WidgetsPage
|
||||
@@ -0,0 +1,63 @@
|
||||
import React, {FC} from 'react'
|
||||
import {
|
||||
ChartsWidget1,
|
||||
ChartsWidget2,
|
||||
ChartsWidget3,
|
||||
ChartsWidget4,
|
||||
ChartsWidget5,
|
||||
ChartsWidget6,
|
||||
ChartsWidget7,
|
||||
ChartsWidget8,
|
||||
} from '../../../../_metronic/partials/widgets'
|
||||
|
||||
const Charts: FC = () => {
|
||||
return (
|
||||
<>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget1 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget2 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget3 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget4 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget5 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget6 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget7 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-6'>
|
||||
<ChartsWidget8 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Charts}
|
||||
@@ -0,0 +1,34 @@
|
||||
import React, {FC} from 'react'
|
||||
import {
|
||||
FeedsWidget2,
|
||||
FeedsWidget3,
|
||||
FeedsWidget4,
|
||||
FeedsWidget5,
|
||||
FeedsWidget6,
|
||||
} from '../../../../_metronic/partials/widgets'
|
||||
|
||||
const Feeds: FC = () => {
|
||||
return (
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<FeedsWidget2 className='mb-5 mb-xl-8' />
|
||||
|
||||
<FeedsWidget3 className='mb-5 mb-xl-8' />
|
||||
|
||||
<FeedsWidget4 className='mb-5 mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<FeedsWidget5 className='mb-5 mb-xl-8' />
|
||||
|
||||
<FeedsWidget6 className='mb-5 mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {Feeds}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React, {FC} from 'react'
|
||||
import {
|
||||
ListsWidget1,
|
||||
ListsWidget2,
|
||||
ListsWidget3,
|
||||
ListsWidget4,
|
||||
ListsWidget5,
|
||||
ListsWidget6,
|
||||
ListsWidget7,
|
||||
ListsWidget8,
|
||||
} from '../../../../_metronic/partials/widgets'
|
||||
|
||||
const Lists: FC = () => {
|
||||
return (
|
||||
<>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<ListsWidget1 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-4'>
|
||||
<ListsWidget2 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-4'>
|
||||
<ListsWidget3 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<ListsWidget4 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-4'>
|
||||
<ListsWidget5 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-4'>
|
||||
<ListsWidget6 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-6'>
|
||||
<ListsWidget7 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
<div className='col-xl-6'>
|
||||
<ListsWidget8 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Lists}
|
||||
@@ -0,0 +1,399 @@
|
||||
import React, {FC} from 'react'
|
||||
import {
|
||||
MixedWidget1,
|
||||
MixedWidget2,
|
||||
MixedWidget3,
|
||||
MixedWidget4,
|
||||
MixedWidget5,
|
||||
MixedWidget6,
|
||||
MixedWidget7,
|
||||
MixedWidget8,
|
||||
MixedWidget9,
|
||||
MixedWidget10,
|
||||
MixedWidget11,
|
||||
} from '../../../../_metronic/partials/widgets'
|
||||
|
||||
const Mixed: FC = () => {
|
||||
return (
|
||||
<>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget1 className='card-xl-stretch mb-xl-8' color='primary' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget1 className='card-xl-stretch mb-xl-8' color='danger' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget1 className='card-xl-stretch mb-5 mb-xl-8' color='success' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget2
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='info'
|
||||
chartHeight='200px'
|
||||
strokeColor='#4e12c4'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget2
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='danger'
|
||||
chartHeight='200px'
|
||||
strokeColor='#cb1e46'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget2
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='200px'
|
||||
strokeColor='#0078d0'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget3 className='card-xl-stretch mb-xl-8' chartColor='info' chartHeight='250px' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget3
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='danger'
|
||||
chartHeight='250px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget3
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='250px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget4
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
image='/media/svg/brand-logos/plurk.svg'
|
||||
color='danger'
|
||||
title='Monthly Subscription'
|
||||
date='Due: 27 Apr 2020'
|
||||
progress='75%'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget4
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
image='/media/svg/brand-logos/vimeo.svg'
|
||||
color='primary'
|
||||
title='Monthly Subscription'
|
||||
date='Due: 27 Apr 2020'
|
||||
progress='75%'
|
||||
/>
|
||||
{/*))?>*/}
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget4
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
image='/media/svg/brand-logos/kickstarter.svg'
|
||||
color='success'
|
||||
title='Monthly Subscription'
|
||||
date='Due: 27 Apr 2020'
|
||||
progress='75%'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget5
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
image='/media/svg/brand-logos/plurk.svg'
|
||||
time='7 hours ago'
|
||||
title='PitStop - Multiple Email Generator'
|
||||
description='Pitstop creates quick email campaigns.<br/>We help to strengthen your brand<br/>for your every purpose.'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget5
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
image='/media/svg/brand-logos/telegram.svg'
|
||||
time='10 days ago'
|
||||
title='ReactJS Admin Theme'
|
||||
description='Keenthemes uses the latest and greatest frameworks<br/>with ReactJS for complete modernization and<br/>future.'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget5
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
image='/media/svg/brand-logos/vimeo.svg'
|
||||
time='2 weeks ago'
|
||||
title='KT.com - High Quality Templates'
|
||||
description='Easy to use, incredibly flexible and secure<br/>with in-depth documentation that outlines<br/>everything for you'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget6
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget6
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='danger'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget6
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
chartColor='success'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget7
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='200px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget7
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='success'
|
||||
chartHeight='200px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget7
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='danger'
|
||||
chartHeight='200px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget8
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget8
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='success'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget8
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
chartColor='danger'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget9
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget9
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='success'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget9
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='danger'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget10
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='info'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget10
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='warning'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget10
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='150px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget11
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='info'
|
||||
chartHeight='200px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget11
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='warning'
|
||||
chartHeight='200px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-4'>
|
||||
<MixedWidget11
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
chartColor='primary'
|
||||
chartHeight='200px'
|
||||
/>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Mixed}
|
||||
@@ -0,0 +1,269 @@
|
||||
import React, {FC} from 'react'
|
||||
import {
|
||||
StatisticsWidget1,
|
||||
StatisticsWidget2,
|
||||
StatisticsWidget3,
|
||||
StatisticsWidget4,
|
||||
StatisticsWidget5,
|
||||
StatisticsWidget6,
|
||||
} from '../../../../_metronic/partials/widgets'
|
||||
|
||||
const Statistics: FC = () => {
|
||||
return (
|
||||
<>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget1
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
image='abstract-4.svg'
|
||||
title='Meeting Schedule'
|
||||
time='3:30PM - 4:20PM'
|
||||
description='Create a headline that is informative<br/>and will capture readers'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget1
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
image='abstract-2.svg'
|
||||
title='Meeting Schedule'
|
||||
time='03 May 2020'
|
||||
description='Great blog posts don’t just happen Even the best bloggers need it'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget1
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
image='abstract-1.svg'
|
||||
title='UI Conference'
|
||||
time='10AM Jan, 2021'
|
||||
description='AirWays - A Front-end solution for airlines build with ReactJS'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget2
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
avatar='/media/svg/avatars/029-boy-11.svg'
|
||||
title='Arthur Goldstain'
|
||||
description='System & Software Architect'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget2
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
avatar='/media/svg/avatars/014-girl-7.svg'
|
||||
title='Lisa Bold'
|
||||
description='Marketing & Fanance Manager'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget2
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
avatar='/media/svg/avatars/004-boy-1.svg'
|
||||
title='Nick Stone'
|
||||
description='Customer Support Team'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget3
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
color='success'
|
||||
title='Weekly Sales'
|
||||
description='Your Weekly Sales Chart'
|
||||
change='+100'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget3
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
color='danger'
|
||||
title='Authors Progress'
|
||||
description='Marketplace Authors Chart'
|
||||
change='-260'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget3
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
color='primary'
|
||||
title='Sales Progress'
|
||||
description='Marketplace Sales Chart'
|
||||
change='+180'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget4
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/ecommerce/ecm002.svg'
|
||||
color='info'
|
||||
description='Sales Change'
|
||||
change='+256'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget4
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/general/gen025.svg'
|
||||
color='success'
|
||||
description='Weekly Income'
|
||||
change='750$'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget4
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/finance/fin006.svg'
|
||||
color='primary'
|
||||
description='New Users'
|
||||
change='+6.6K'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget5
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/ecommerce/ecm002.svg'
|
||||
color='danger'
|
||||
iconColor='white'
|
||||
title='Shopping Cart'
|
||||
description='Lands, Houses, Ranchos, Farms'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget5
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/ecommerce/ecm008.svg'
|
||||
color='primary'
|
||||
iconColor='white'
|
||||
title='Appartments'
|
||||
description='Flats, Shared Rooms, Duplex'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget5
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/graphs/gra005.svg'
|
||||
color='success'
|
||||
iconColor='white'
|
||||
title='Sales Stats'
|
||||
description='50% Increased for FY20'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-3'>
|
||||
<StatisticsWidget5
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/general/gen032.svg'
|
||||
color='white'
|
||||
iconColor='primary'
|
||||
title='500M$'
|
||||
description='SAP UI Progress'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-3'>
|
||||
<StatisticsWidget5
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/ecommerce/ecm008.svg'
|
||||
color='dark'
|
||||
iconColor='white'
|
||||
title='+3000'
|
||||
description='New Customers'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-3'>
|
||||
<StatisticsWidget5
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/finance/fin006.svg'
|
||||
color='warning'
|
||||
iconColor='white'
|
||||
title='$50,000'
|
||||
description='Milestone Reached'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-3'>
|
||||
<StatisticsWidget5
|
||||
className='card-xl-stretch mb-5 mb-xl-8'
|
||||
svgIcon='/media/icons/duotune/graphs/gra007.svg'
|
||||
color='info'
|
||||
iconColor='white'
|
||||
title='$50,000'
|
||||
description='Milestone Reached'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget6
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
color='success'
|
||||
title='Avarage'
|
||||
description='Project Progress'
|
||||
progress='50%'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget6
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
color='warning'
|
||||
title='48k Goal'
|
||||
description='Company Finance'
|
||||
progress='15%'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='col-xl-4'>
|
||||
<StatisticsWidget6
|
||||
className='card-xl-stretch mb-xl-8'
|
||||
color='primary'
|
||||
title='400k Impressions'
|
||||
description='Marketing Analysis'
|
||||
progress='76%'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Statistics}
|
||||
@@ -0,0 +1,98 @@
|
||||
import React, {FC} from 'react'
|
||||
import {
|
||||
TablesWidget1,
|
||||
TablesWidget2,
|
||||
TablesWidget3,
|
||||
TablesWidget4,
|
||||
TablesWidget5,
|
||||
TablesWidget6,
|
||||
TablesWidget7,
|
||||
TablesWidget8,
|
||||
TablesWidget9,
|
||||
TablesWidget10,
|
||||
TablesWidget11,
|
||||
TablesWidget12,
|
||||
TablesWidget13,
|
||||
} from '../../../../_metronic/partials/widgets'
|
||||
|
||||
const Tables: FC = () => {
|
||||
return (
|
||||
<>
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget1 className='card-xl-stretch mb-xl-8'></TablesWidget1>
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget2 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget3 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget4 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget5 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget6 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
{/* begin::Row */}
|
||||
<div className='row g-5 g-xl-8'>
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget7 className='card-xl-stretch mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
|
||||
{/* begin::Col */}
|
||||
<div className='col-xl-6'>
|
||||
<TablesWidget8 className='card-xl-stretch mb-5 mb-xl-8' />
|
||||
</div>
|
||||
{/* end::Col */}
|
||||
</div>
|
||||
{/* end::Row */}
|
||||
|
||||
<TablesWidget9 className='mb-5 mb-xl-8' />
|
||||
|
||||
<TablesWidget10 className='mb-5 mb-xl-8' />
|
||||
|
||||
<TablesWidget11 className='mb-5 mb-xl-8' />
|
||||
|
||||
<TablesWidget12 className='mb-5 mb-xl-8' />
|
||||
|
||||
<TablesWidget13 className='mb-5 mb-xl-8' />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export {Tables}
|
||||
Reference in New Issue
Block a user