From dd64f3c2db3d627f37eb7e16904ccbef303946d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Tue, 18 May 2021 23:23:33 +0200 Subject: [PATCH] refactor: update views --- src/assets/icons/index.js | 2 + src/components/AppBreadcrumb.js | 2 +- src/components/AppHeader.js | 26 +- src/components/AppSidebar.js | 4 +- src/components/header/AppHeaderDropdown.js | 34 +- .../header/AppHeaderDropdownMssg.js | 32 +- .../header/AppHeaderDropdownNotif.js | 6 +- src/containers/_nav.js | 12 +- src/routes.js | 8 +- src/views/dashboard/Dashboard.js | 321 +++++++++--------- src/views/examples/charts/ChartBarSimple.js | 21 +- 11 files changed, 251 insertions(+), 217 deletions(-) diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index 505b704..06aee5b 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -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, diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js index 8d87f56..93cd1cc 100644 --- a/src/components/AppBreadcrumb.js +++ b/src/components/AppBreadcrumb.js @@ -31,7 +31,7 @@ const AppBreadcrumb = () => { const breadcrumbs = getBreadcrumbs(currentLocation) return ( - + Home {breadcrumbs.map((breadcrumb, index) => { return ( diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index 13a466e..281e548 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -42,13 +42,13 @@ const AppHeader = () => { className="ms-md-3 d-lg-none" onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })} > - + - + - + Dashboard @@ -63,9 +63,23 @@ const AppHeader = () => { - - - + + + + + + + + + + + + + + + + + diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js index b86dde9..adc7e44 100644 --- a/src/components/AppSidebar.js +++ b/src/components/AppSidebar.js @@ -30,7 +30,7 @@ const AppSidebar = () => { dispatch({ type: 'set', sidebarShow: false }) }} > - + @@ -38,7 +38,7 @@ const AppSidebar = () => { dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })} /> diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js index 22836dc..25ffe50 100644 --- a/src/components/header/AppHeaderDropdown.js +++ b/src/components/header/AppHeaderDropdown.js @@ -14,64 +14,64 @@ import CIcon from '@coreui/icons-react' const AppHeaderDropdown = () => { return ( - - + + Account - + Updates - + 42 - + Messages - + 42 - + Tasks - + 42 - + Comments - + 42 Settings - + Profile - + Settings - + Payments - + 42 - + Projects - + 42 - + Lock Account diff --git a/src/components/header/AppHeaderDropdownMssg.js b/src/components/header/AppHeaderDropdownMssg.js index 342cbba..bfc902d 100644 --- a/src/components/header/AppHeaderDropdownMssg.js +++ b/src/components/header/AppHeaderDropdownMssg.js @@ -26,16 +26,16 @@ const AppHeaderDropdownMssg = () => {
- +
- John Doe - Just now + John Doe + Just now
Important message
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
@@ -45,14 +45,14 @@ const AppHeaderDropdownMssg = () => {
- +
- Jane Dovve - 5 minutes ago + Jane Dovve + 5 minutes ago
Lorem ipsum dolor sit amet
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
@@ -62,14 +62,14 @@ const AppHeaderDropdownMssg = () => {
- +
- Janet Doe - 1:52 PM + Janet Doe + 1:52 PM
Lorem ipsum dolor sit amet
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
@@ -79,14 +79,14 @@ const AppHeaderDropdownMssg = () => {
- +
- Joe Doe - 4:03 AM + Joe Doe + 4:03 AM
Lorem ipsum dolor sit amet
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
diff --git a/src/components/header/AppHeaderDropdownNotif.js b/src/components/header/AppHeaderDropdownNotif.js index 0ee4b96..881e445 100644 --- a/src/components/header/AppHeaderDropdownNotif.js +++ b/src/components/header/AppHeaderDropdownNotif.js @@ -48,7 +48,7 @@ const AppHeaderDropdownNotif = () => {
- 348 Processes. 1/4 Cores. + 348 Processes. 1/4 Cores.
@@ -57,7 +57,7 @@ const AppHeaderDropdownNotif = () => {
- 11444GB/16384MB + 11444GB/16384MB
@@ -66,7 +66,7 @@ const AppHeaderDropdownNotif = () => {
- 243GB/256GB + 243GB/256GB diff --git a/src/containers/_nav.js b/src/containers/_nav.js index 2c33f78..8ca4642 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -139,14 +139,14 @@ const _nav = [ _component: 'CNavItem', as: NavLink, anchor: 'Dropdowns', - to: '/buttons/button-dropdowns', + to: '/buttons/dropdowns', }, ], }, { _component: 'CNavGroup', anchor: 'Forms', - icon: , + 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', }, ], }, diff --git a/src/routes.js b/src/routes.js index 9a60c48..1d1e8d3 100644 --- a/src/routes.js +++ b/src/routes.js @@ -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 }, ] diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 8adef0f..54ad665 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -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 = () => {

Traffic

-
January - July 2021
+
January - July 2021
@@ -146,27 +151,27 @@ const Dashboard = () => { -
Visits
+
Visits
29.703 Users (40%) - -
Unique
+ +
Unique
24.093 Users (20%) -
Pageviews
+
Pageviews
78.706 Views (60%) -
New Users
+
New Users
22.123 Users (80%) - -
Bounce Rate
+ +
Bounce Rate
Average Rate (40.15%) @@ -185,13 +190,13 @@ const Dashboard = () => { -
+
New Clients
9,123
-
+
Recurring Clients
22,643
@@ -268,13 +273,13 @@ const Dashboard = () => { -
+
Pageviews
78,623
-
+
Organic
49,123
@@ -309,7 +314,7 @@ const Dashboard = () => { Organic Search - 191,235 (56%) + 191,235 (56%)
@@ -321,7 +326,7 @@ const Dashboard = () => { Facebook - 51,223 (15%) + 51,223 (15%)
@@ -333,7 +338,7 @@ const Dashboard = () => { Twitter - 37,564 (11%) + 37,564 (11%)
@@ -345,7 +350,7 @@ const Dashboard = () => { LinkedIn - 27,319 (8%) + 27,319 (8%)
@@ -357,214 +362,226 @@ const Dashboard = () => {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + + - UserCountryUsagePayment MethodActivity
- - + + User + Country + Usage + Payment Method + Activity + + + + + + + +
Yiorgos Avraamu
-
+
New | Registered: Jan 1, 2015
-
- - + + + + +
50%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- 		- - -
Last login
+ + + + + +
Last login
10 sec ago -
- - + + + + + + +
Avram Tarasios
-
+
Recurring | Registered: Jan 1, 2015
-
- - + + + + +
10%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- 		- - -
Last login
+ + + + + +
Last login
5 minutes ago -
- - + + + + + + +
Quintin Ed
-
+
New | Registered: Jan 1, 2015
-
- - + + + + +
74%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- 		- - -
Last login
+ + + + + +
Last login
1 hour ago -
- - + + + + + + +
Enéas Kwadwo
-
+
New | Registered: Jan 1, 2015
-
- - + + + + +
98%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- 		- - -
Last login
+ + + + + +
Last login
Last month -
- - + + + + + + +
Agapetus Tadeáš
-
+
New | Registered: Jan 1, 2015
-
- - + + + + +
22%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- 		- - -
Last login
+ + + + + +
Last login
Last week -
- - + + + + + + +
Friderik Dávid
-
+
New | Registered: Jan 1, 2015
-
- - + + + + +
43%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- 		- - -
Last login
+ + + + + +
Last login
Yesterday -
+ + + + diff --git a/src/views/examples/charts/ChartBarSimple.js b/src/views/examples/charts/ChartBarSimple.js index 7f1e2d1..9eb879b 100644 --- a/src/views/examples/charts/ChartBarSimple.js +++ b/src/views/examples/charts/ChartBarSimple.js @@ -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} /> ) }