From bc2c20b1b7d350e7aad996e54453f792a19f45b1 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Tue, 17 Nov 2020 06:44:18 +0900 Subject: [PATCH 01/10] Add icon library; Provide dashboard infobox data --- demo/DemoApp.jsx | 2 ++ demo/data/IconLib.js | 4 +++ demo/data/dashboard/dashboardInfoBoxData.js | 28 +++++++++++++++++++++ demo/pages/DemoDashboard.jsx | 28 +++++++++------------ 4 files changed, 46 insertions(+), 16 deletions(-) create mode 100644 demo/data/IconLib.js create mode 100644 demo/data/dashboard/dashboardInfoBoxData.js diff --git a/demo/DemoApp.jsx b/demo/DemoApp.jsx index 57adbc8..f1b8fb6 100644 --- a/demo/DemoApp.jsx +++ b/demo/DemoApp.jsx @@ -7,6 +7,8 @@ import ContentWrapper from './layout/ContentWrapper'; import MainFooter from './layout/MainFooter'; import Demo404 from './pages/Demo404'; +import './data/IconLib'; + const getBasename = () => `/${process.env.PUBLIC_URL.split('/').pop()}`; export default function DemoApp() { diff --git a/demo/data/IconLib.js b/demo/data/IconLib.js new file mode 100644 index 0000000..7b75032 --- /dev/null +++ b/demo/data/IconLib.js @@ -0,0 +1,4 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faCog, faShoppingCart, faThumbsUp, faUsers } from '@fortawesome/free-solid-svg-icons'; + +library.add(faCog, faThumbsUp, faShoppingCart, faUsers); diff --git a/demo/data/dashboard/dashboardInfoBoxData.js b/demo/data/dashboard/dashboardInfoBoxData.js new file mode 100644 index 0000000..896b210 --- /dev/null +++ b/demo/data/dashboard/dashboardInfoBoxData.js @@ -0,0 +1,28 @@ +const dashboardInfoBoxData = [ + { + icon: 'cog', + text: 'CPU Traffic', + number: '10%', + color: 'info', + }, + { + icon: 'thumbs-up', + text: 'Likes', + number: '41,410', + color: 'danger', + }, + { + icon: 'shopping-cart', + text: 'Sales', + number: '760', + color: 'success', + }, + { + icon: 'users', + text: 'New Members', + number: '2,000', + color: 'warning', + }, +]; + +export default dashboardInfoBoxData; diff --git a/demo/pages/DemoDashboard.jsx b/demo/pages/DemoDashboard.jsx index 504daa1..c7bc4c4 100644 --- a/demo/pages/DemoDashboard.jsx +++ b/demo/pages/DemoDashboard.jsx @@ -4,7 +4,6 @@ import { faBars, faChartPie, faCloudDownloadAlt, - faCog, faComments, faDownload, faMinus, @@ -12,7 +11,6 @@ import { faShoppingBasket, faShoppingCart, faTag, - faThumbsUp, faTimes, faUserPlus, faUsers, @@ -49,6 +47,17 @@ import LteContactsListItem from '../../src/components/directchat/LteContactsList import LteCardTools from '../../src/components/card/LteCardTools'; import LteUsersList from '../../src/components/userslist/LteUsersList'; import LteUsersListItem from '../../src/components/userslist/LteUsersListItem'; +import dashboardInfoBoxData from '../data/dashboard/dashboardInfoBoxData'; + +const DashboardInfoBox = ({ data }) => { + return data.map(({ icon, text, number, color }) => { + return ( + + + + ); + }); +}; export default function DemoDashboard() { return ( @@ -56,21 +65,8 @@ export default function DemoDashboard() { - - - - - - -
- - - - - - + - From 7362beeddeedba4a49e59038fda1ae9e839251bf Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Tue, 17 Nov 2020 07:11:23 +0900 Subject: [PATCH 02/10] Extract dashboard smallbox into its own function --- demo/data/IconLib.js | 13 +++++++-- demo/data/dashboard/dashboardSmallboxData.js | 28 +++++++++++++++++++ demo/pages/DemoDashboard.jsx | 29 +++++++++----------- 3 files changed, 52 insertions(+), 18 deletions(-) create mode 100644 demo/data/dashboard/dashboardSmallboxData.js diff --git a/demo/data/IconLib.js b/demo/data/IconLib.js index 7b75032..9ce36f4 100644 --- a/demo/data/IconLib.js +++ b/demo/data/IconLib.js @@ -1,4 +1,13 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faCog, faShoppingCart, faThumbsUp, faUsers } from '@fortawesome/free-solid-svg-icons'; +import { + faChartBar, + faChartPie, + faCog, + faShoppingBasket, + faShoppingCart, + faThumbsUp, + faUserPlus, + faUsers, +} from '@fortawesome/free-solid-svg-icons'; -library.add(faCog, faThumbsUp, faShoppingCart, faUsers); +library.add(faCog, faThumbsUp, faShoppingCart, faUsers, faUserPlus, faChartPie, faShoppingBasket, faChartBar); diff --git a/demo/data/dashboard/dashboardSmallboxData.js b/demo/data/dashboard/dashboardSmallboxData.js new file mode 100644 index 0000000..61d0c40 --- /dev/null +++ b/demo/data/dashboard/dashboardSmallboxData.js @@ -0,0 +1,28 @@ +const dashboardSmallboxData = [ + { + title: '150', + message: 'New Orders', + icon: 'shopping-basket', + color: 'info', + }, + { + title: '53%', + message: 'Bounce Rate', + icon: 'chart-bar', + color: 'success', + }, + { + title: '44', + message: 'User Registrations', + icon: 'user-plus', + color: 'warning', + }, + { + title: '65', + message: 'Unique Visitors', + icon: 'chart-pie', + color: 'danger', + }, +]; + +export default dashboardSmallboxData; diff --git a/demo/pages/DemoDashboard.jsx b/demo/pages/DemoDashboard.jsx index c7bc4c4..a2cc5f2 100644 --- a/demo/pages/DemoDashboard.jsx +++ b/demo/pages/DemoDashboard.jsx @@ -1,18 +1,15 @@ -import { faChartBar, faComment, faHeart } from '@fortawesome/free-regular-svg-icons'; +import { faComment, faHeart } from '@fortawesome/free-regular-svg-icons'; import { faArrowUp, faBars, - faChartPie, faCloudDownloadAlt, faComments, faDownload, faMinus, faRedo, - faShoppingBasket, faShoppingCart, faTag, faTimes, - faUserPlus, faUsers, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -48,6 +45,7 @@ import LteCardTools from '../../src/components/card/LteCardTools'; import LteUsersList from '../../src/components/userslist/LteUsersList'; import LteUsersListItem from '../../src/components/userslist/LteUsersListItem'; import dashboardInfoBoxData from '../data/dashboard/dashboardInfoBoxData'; +import dashboardSmallboxData from '../data/dashboard/dashboardSmallboxData'; const DashboardInfoBox = ({ data }) => { return data.map(({ icon, text, number, color }) => { @@ -59,6 +57,16 @@ const DashboardInfoBox = ({ data }) => { }); }; +const DashboardSmallbox = ({ data }) => { + return data.map(({ title, message, icon, color }) => { + return ( + + + + ); + }); +}; + export default function DemoDashboard() { return ( <> @@ -68,18 +76,7 @@ export default function DemoDashboard() { - - - - - - - - - - - - + From 9b18a194cfe4b26dc9362ca6c2aaa69c4f3d8325 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Tue, 17 Nov 2020 07:35:01 +0900 Subject: [PATCH 03/10] Extract latest orders to its own function --- .../dashboard/dashboardLatestOrderData.js | 53 ++++++++ demo/pages/DemoDashboard.jsx | 121 ++++-------------- 2 files changed, 76 insertions(+), 98 deletions(-) create mode 100644 demo/data/dashboard/dashboardLatestOrderData.js diff --git a/demo/data/dashboard/dashboardLatestOrderData.js b/demo/data/dashboard/dashboardLatestOrderData.js new file mode 100644 index 0000000..62f0949 --- /dev/null +++ b/demo/data/dashboard/dashboardLatestOrderData.js @@ -0,0 +1,53 @@ +const dashboardLatestOrderData = [ + { + orderID: 'OR9842', + item: 'Call of Duty IV', + status: 'Shipped', + statusColor: 'success', + popularity: '90,80,90,-70,61,-83,63', + }, + { + orderID: 'OR1848', + item: 'Samsung Smart TV', + status: 'Pending', + statusColor: 'warning', + popularity: '90,80,-90,70,61,-83,68', + }, + { + orderID: 'OR7429', + item: 'iPhone 6 Plus', + status: 'Delivered', + statusColor: 'danger', + popularity: '90,-80,90,70,-61,83,63', + }, + { + orderID: 'OR7429', + item: 'Samsung Smart TV', + status: 'Processing', + statusColor: 'info', + popularity: '90,80,-90,70,-61,83,63', + }, + { + orderID: 'OR1848', + item: 'Samsung Smart TV', + status: 'Pending', + statusColor: 'warning', + popularity: '90,80,-90,70,61,-83,68', + }, + { + orderID: 'OR7429', + item: 'iPhone 6 Plus', + status: 'Delivered', + statusColor: 'danger', + popularity: '90,-80,90,70,-61,83,63', + }, + { + orderID: 'OR9842', + item: 'Call of Duty IV', + status: 'Shipped', + statusColor: 'success', + popularity: '90,80,90,-70,61,-83,63', + }, +]; + +export default dashboardLatestOrderData; diff --git a/demo/pages/DemoDashboard.jsx b/demo/pages/DemoDashboard.jsx index a2cc5f2..00a91ca 100644 --- a/demo/pages/DemoDashboard.jsx +++ b/demo/pages/DemoDashboard.jsx @@ -46,6 +46,7 @@ import LteUsersList from '../../src/components/userslist/LteUsersList'; import LteUsersListItem from '../../src/components/userslist/LteUsersListItem'; import dashboardInfoBoxData from '../data/dashboard/dashboardInfoBoxData'; import dashboardSmallboxData from '../data/dashboard/dashboardSmallboxData'; +import dashboardLatestOrderData from '../data/dashboard/dashboardLatestOrderData'; const DashboardInfoBox = ({ data }) => { return data.map(({ icon, text, number, color }) => { @@ -67,6 +68,27 @@ const DashboardSmallbox = ({ data }) => { }); }; +const LatestOrder = ({ data }) => { + return data.map(({ orderID, item, status, statusColor, popularity }) => { + return ( + + {orderID} + {item} + + + {status} + + + +
+ {popularity} +
+ + + ); + }); +}; + export default function DemoDashboard() { return ( <> @@ -105,104 +127,7 @@ export default function DemoDashboard() { - - OR9842 - Call of Duty IV - - - Shipped - - - -
- 90,80,90,-70,61,-83,63 -
- - - - OR1848 - Samsung Smart TV - - - Pending - - - -
- 90,80,-90,70,61,-83,68 -
- - - - OR7429 - iPhone 6 Plus - - - Delivered - - - -
- 90,-80,90,70,-61,83,63 -
- - - - OR7429 - Samsung Smart TV - - - Processing - - - -
- 90,80,-90,70,-61,83,63 -
- - - - OR1848 - Samsung Smart TV - - - Pending - - - -
- 90,80,-90,70,61,-83,68 -
- - - - OR7429 - iPhone 6 Plus - - - Delivered - - - -
- 90,-80,90,70,-61,83,63 -
- - - - OR9842 - Call of Duty IV - - - Shipped - - - -
- 90,80,90,-70,61,-83,63 -
- - + From 05b4ea754f4882aa189d69ca1ee75fb2b5f365b2 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Wed, 18 Nov 2020 17:28:06 +0900 Subject: [PATCH 04/10] Extract direct chat data --- .../data/dashboard/dashboardDirectChatData.js | 75 +++++++++++++++++ demo/pages/DemoDashboard.jsx | 83 ++++--------------- 2 files changed, 90 insertions(+), 68 deletions(-) create mode 100644 demo/data/dashboard/dashboardDirectChatData.js diff --git a/demo/data/dashboard/dashboardDirectChatData.js b/demo/data/dashboard/dashboardDirectChatData.js new file mode 100644 index 0000000..e98ab31 --- /dev/null +++ b/demo/data/dashboard/dashboardDirectChatData.js @@ -0,0 +1,75 @@ +import { user1, user3, user5, user6, user7, user8 } from '../images'; + +const ChatMessages = [ + { + name: 'Alexander Pierce', + date: '23 Jan 2:00 pm', + image: user1, + message: "Is this template really for free? That's unbelievable!", + }, + { + name: 'Sarah Bullock', + date: '23 Jan 2:05 pm', + image: user3, + message: 'You better believe it!', + }, + { + name: 'Alexander Pierce', + date: '23 Jan 5:37 pm', + image: user1, + message: 'Working with AdminLTE on a great new app! Wanna join?', + }, + { + name: 'Sarah Bullock', + date: '23 Jan 6:10 pm', + image: user3, + message: 'I would love to.', + }, +]; + +const ChatContacts = [ + { + href: '/contacts', + image: user1, + name: 'Count Dracula', + date: '2/28/2015', + message: 'How have you been? I was...', + }, + { + href: '/contacts', + image: user7, + name: 'Sarah Doe', + date: '2/23/2015', + message: 'I will be waiting for...', + }, + { + href: '/contacts', + image: user3, + name: 'Nadia Jolie', + date: '2/20/2015', + message: "I'll call you back at...", + }, + { + href: '/contacts', + image: user5, + name: 'Nora S. Vans', + date: '2/10/2015', + message: 'Where is your new...', + }, + { + href: '/contacts', + image: user6, + name: 'John K.', + date: '1/27/2015', + message: 'Can I take a look at...', + }, + { + href: '/contacts', + image: user8, + name: 'Kenneth M.', + date: '1/4/2015', + message: 'Never mind I found...', + }, +]; + +export { ChatMessages, ChatContacts }; diff --git a/demo/pages/DemoDashboard.jsx b/demo/pages/DemoDashboard.jsx index 00a91ca..4aa3fb0 100644 --- a/demo/pages/DemoDashboard.jsx +++ b/demo/pages/DemoDashboard.jsx @@ -47,6 +47,7 @@ import LteUsersListItem from '../../src/components/userslist/LteUsersListItem'; import dashboardInfoBoxData from '../data/dashboard/dashboardInfoBoxData'; import dashboardSmallboxData from '../data/dashboard/dashboardSmallboxData'; import dashboardLatestOrderData from '../data/dashboard/dashboardLatestOrderData'; +import { ChatMessages, ChatContacts } from '../data/dashboard/dashboardDirectChatData'; const DashboardInfoBox = ({ data }) => { return data.map(({ icon, text, number, color }) => { @@ -89,6 +90,18 @@ const LatestOrder = ({ data }) => { }); }; +const DirectChatMsg = ({ data }) => { + return data.map(({ name, date, image, message }) => { + return ; + }); +}; + +const DirectChatContacts = ({ data }) => { + return data.map(({ href, image, name, date, message }) => { + return ; + }); +}; + export default function DemoDashboard() { return ( <> @@ -161,77 +174,11 @@ export default function DemoDashboard() { - - - - + - - - - - - + From 1b256b578aa0a764c9af8ac1e90b1bfb4bb8bb24 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Wed, 18 Nov 2020 19:25:25 +0900 Subject: [PATCH 05/10] Move DemoDashboard to dashboard dir --- demo/DemoApp.jsx | 2 +- demo/pages/{ => dashboard}/DemoDashboard.jsx | 36 ++++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) rename demo/pages/{ => dashboard}/DemoDashboard.jsx (87%) diff --git a/demo/DemoApp.jsx b/demo/DemoApp.jsx index f1b8fb6..d8f4daa 100644 --- a/demo/DemoApp.jsx +++ b/demo/DemoApp.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { Route, BrowserRouter, Switch } from 'react-router-dom'; -import DemoDashboard from './pages/DemoDashboard'; +import DemoDashboard from './pages/dashboard/DemoDashboard'; import DemoHeader from './layout/DemoHeader'; import DemoSidebar from './layout/DemoSidebar'; import ContentWrapper from './layout/ContentWrapper'; diff --git a/demo/pages/DemoDashboard.jsx b/demo/pages/dashboard/DemoDashboard.jsx similarity index 87% rename from demo/pages/DemoDashboard.jsx rename to demo/pages/dashboard/DemoDashboard.jsx index 4aa3fb0..af6d8f9 100644 --- a/demo/pages/DemoDashboard.jsx +++ b/demo/pages/dashboard/DemoDashboard.jsx @@ -30,24 +30,24 @@ import { Row, Table, } from 'reactstrap'; -import LteContent from '../../src/components/LteContent'; -import LteContentHeader from '../../src/components/LteContentHeader'; -import LteInfoBox from '../../src/components/LteInfoBox'; -import LteSmallBox from '../../src/components/LteSmallBox'; -import { user1, user2, user3, user4, user5, user6, user7, user8 } from '../data/images'; -import LteDirectChatMsg from '../../src/components/directchat/LteDirectChatMsg'; -import LteDirectChatMessages from '../../src/components/directchat/LteDirectChatMessages'; -import LteDirectChat from '../../src/components/directchat/LteDirectChat'; -import LteDirectChatContacts from '../../src/components/directchat/LteDirectChatContacts'; -import LteContactsList from '../../src/components/directchat/LteContactsList'; -import LteContactsListItem from '../../src/components/directchat/LteContactsListItem'; -import LteCardTools from '../../src/components/card/LteCardTools'; -import LteUsersList from '../../src/components/userslist/LteUsersList'; -import LteUsersListItem from '../../src/components/userslist/LteUsersListItem'; -import dashboardInfoBoxData from '../data/dashboard/dashboardInfoBoxData'; -import dashboardSmallboxData from '../data/dashboard/dashboardSmallboxData'; -import dashboardLatestOrderData from '../data/dashboard/dashboardLatestOrderData'; -import { ChatMessages, ChatContacts } from '../data/dashboard/dashboardDirectChatData'; +import LteContent from '../../../src/components/LteContent'; +import LteContentHeader from '../../../src/components/LteContentHeader'; +import LteInfoBox from '../../../src/components/LteInfoBox'; +import LteSmallBox from '../../../src/components/LteSmallBox'; +import { user1, user2, user3, user4, user5, user6, user7, user8 } from '../../data/images'; +import LteDirectChatMsg from '../../../src/components/directchat/LteDirectChatMsg'; +import LteDirectChatMessages from '../../../src/components/directchat/LteDirectChatMessages'; +import LteDirectChat from '../../../src/components/directchat/LteDirectChat'; +import LteDirectChatContacts from '../../../src/components/directchat/LteDirectChatContacts'; +import LteContactsList from '../../../src/components/directchat/LteContactsList'; +import LteContactsListItem from '../../../src/components/directchat/LteContactsListItem'; +import LteCardTools from '../../../src/components/card/LteCardTools'; +import LteUsersList from '../../../src/components/userslist/LteUsersList'; +import LteUsersListItem from '../../../src/components/userslist/LteUsersListItem'; +import dashboardInfoBoxData from '../../data/dashboard/dashboardInfoBoxData'; +import dashboardSmallboxData from '../../data/dashboard/dashboardSmallboxData'; +import dashboardLatestOrderData from '../../data/dashboard/dashboardLatestOrderData'; +import { ChatMessages, ChatContacts } from '../../data/dashboard/dashboardDirectChatData'; const DashboardInfoBox = ({ data }) => { return data.map(({ icon, text, number, color }) => { From d83467f3d16d9f9295a6e3ee43d1e8163ed572a9 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Wed, 18 Nov 2020 19:40:18 +0900 Subject: [PATCH 06/10] Add InfoboxTop dashboard component - Move DashboardInfoBox definition to InfoboxTop - Define infobox data directly inside the file - Remove dashboardInfoBoxData --- demo/data/dashboard/dashboardInfoBoxData.js | 28 ---------- demo/pages/dashboard/DemoDashboard.jsx | 16 +----- .../pages/dashboard/components/InfoboxTop.jsx | 51 +++++++++++++++++++ 3 files changed, 53 insertions(+), 42 deletions(-) delete mode 100644 demo/data/dashboard/dashboardInfoBoxData.js create mode 100644 demo/pages/dashboard/components/InfoboxTop.jsx diff --git a/demo/data/dashboard/dashboardInfoBoxData.js b/demo/data/dashboard/dashboardInfoBoxData.js deleted file mode 100644 index 896b210..0000000 --- a/demo/data/dashboard/dashboardInfoBoxData.js +++ /dev/null @@ -1,28 +0,0 @@ -const dashboardInfoBoxData = [ - { - icon: 'cog', - text: 'CPU Traffic', - number: '10%', - color: 'info', - }, - { - icon: 'thumbs-up', - text: 'Likes', - number: '41,410', - color: 'danger', - }, - { - icon: 'shopping-cart', - text: 'Sales', - number: '760', - color: 'success', - }, - { - icon: 'users', - text: 'New Members', - number: '2,000', - color: 'warning', - }, -]; - -export default dashboardInfoBoxData; diff --git a/demo/pages/dashboard/DemoDashboard.jsx b/demo/pages/dashboard/DemoDashboard.jsx index af6d8f9..1c7eeb7 100644 --- a/demo/pages/dashboard/DemoDashboard.jsx +++ b/demo/pages/dashboard/DemoDashboard.jsx @@ -44,20 +44,10 @@ import LteContactsListItem from '../../../src/components/directchat/LteContactsL import LteCardTools from '../../../src/components/card/LteCardTools'; import LteUsersList from '../../../src/components/userslist/LteUsersList'; import LteUsersListItem from '../../../src/components/userslist/LteUsersListItem'; -import dashboardInfoBoxData from '../../data/dashboard/dashboardInfoBoxData'; import dashboardSmallboxData from '../../data/dashboard/dashboardSmallboxData'; import dashboardLatestOrderData from '../../data/dashboard/dashboardLatestOrderData'; import { ChatMessages, ChatContacts } from '../../data/dashboard/dashboardDirectChatData'; - -const DashboardInfoBox = ({ data }) => { - return data.map(({ icon, text, number, color }) => { - return ( - - - - ); - }); -}; +import InfoboxTop from './components/InfoboxTop'; const DashboardSmallbox = ({ data }) => { return data.map(({ title, message, icon, color }) => { @@ -107,9 +97,7 @@ export default function DemoDashboard() { <> - - - + diff --git a/demo/pages/dashboard/components/InfoboxTop.jsx b/demo/pages/dashboard/components/InfoboxTop.jsx new file mode 100644 index 0000000..a991b8f --- /dev/null +++ b/demo/pages/dashboard/components/InfoboxTop.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import Col from 'reactstrap/lib/Col'; +import Row from 'reactstrap/lib/Row'; +import LteInfoBox from '../../../../src/components/LteInfoBox'; + +const data = [ + { + icon: 'cog', + text: 'CPU Traffic', + number: '10%', + color: 'info', + }, + { + icon: 'thumbs-up', + text: 'Likes', + number: '41,410', + color: 'danger', + }, + { + icon: 'shopping-cart', + text: 'Sales', + number: '760', + color: 'success', + }, + { + icon: 'users', + text: 'New Members', + number: '2,000', + color: 'warning', + }, +]; + +const Item = ({ infoData }) => { + return infoData.map(({ icon, text, number, color }) => { + return ( + + + + ); + }); +}; + +const InfoboxTop = () => { + return ( + + + + ); +}; + +export default InfoboxTop; From 32782f4746078877cf66c103de0aa7182189d915 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Wed, 18 Nov 2020 19:49:46 +0900 Subject: [PATCH 07/10] Add smallbox dashboard component - Move DashboardSmallbox definition into Smallbox component - Remove dashboardSmallboxData --- demo/data/dashboard/dashboardSmallboxData.js | 28 ----------- demo/pages/dashboard/DemoDashboard.jsx | 17 +------ demo/pages/dashboard/components/Smallbox.jsx | 51 ++++++++++++++++++++ 3 files changed, 53 insertions(+), 43 deletions(-) delete mode 100644 demo/data/dashboard/dashboardSmallboxData.js create mode 100644 demo/pages/dashboard/components/Smallbox.jsx diff --git a/demo/data/dashboard/dashboardSmallboxData.js b/demo/data/dashboard/dashboardSmallboxData.js deleted file mode 100644 index 61d0c40..0000000 --- a/demo/data/dashboard/dashboardSmallboxData.js +++ /dev/null @@ -1,28 +0,0 @@ -const dashboardSmallboxData = [ - { - title: '150', - message: 'New Orders', - icon: 'shopping-basket', - color: 'info', - }, - { - title: '53%', - message: 'Bounce Rate', - icon: 'chart-bar', - color: 'success', - }, - { - title: '44', - message: 'User Registrations', - icon: 'user-plus', - color: 'warning', - }, - { - title: '65', - message: 'Unique Visitors', - icon: 'chart-pie', - color: 'danger', - }, -]; - -export default dashboardSmallboxData; diff --git a/demo/pages/dashboard/DemoDashboard.jsx b/demo/pages/dashboard/DemoDashboard.jsx index 1c7eeb7..cbe834f 100644 --- a/demo/pages/dashboard/DemoDashboard.jsx +++ b/demo/pages/dashboard/DemoDashboard.jsx @@ -33,7 +33,6 @@ import { import LteContent from '../../../src/components/LteContent'; import LteContentHeader from '../../../src/components/LteContentHeader'; import LteInfoBox from '../../../src/components/LteInfoBox'; -import LteSmallBox from '../../../src/components/LteSmallBox'; import { user1, user2, user3, user4, user5, user6, user7, user8 } from '../../data/images'; import LteDirectChatMsg from '../../../src/components/directchat/LteDirectChatMsg'; import LteDirectChatMessages from '../../../src/components/directchat/LteDirectChatMessages'; @@ -44,20 +43,10 @@ import LteContactsListItem from '../../../src/components/directchat/LteContactsL import LteCardTools from '../../../src/components/card/LteCardTools'; import LteUsersList from '../../../src/components/userslist/LteUsersList'; import LteUsersListItem from '../../../src/components/userslist/LteUsersListItem'; -import dashboardSmallboxData from '../../data/dashboard/dashboardSmallboxData'; import dashboardLatestOrderData from '../../data/dashboard/dashboardLatestOrderData'; import { ChatMessages, ChatContacts } from '../../data/dashboard/dashboardDirectChatData'; import InfoboxTop from './components/InfoboxTop'; - -const DashboardSmallbox = ({ data }) => { - return data.map(({ title, message, icon, color }) => { - return ( - - - - ); - }); -}; +import Smallbox from './components/Smallbox'; const LatestOrder = ({ data }) => { return data.map(({ orderID, item, status, statusColor, popularity }) => { @@ -98,9 +87,7 @@ export default function DemoDashboard() { - - - + diff --git a/demo/pages/dashboard/components/Smallbox.jsx b/demo/pages/dashboard/components/Smallbox.jsx new file mode 100644 index 0000000..2ba06fe --- /dev/null +++ b/demo/pages/dashboard/components/Smallbox.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import Col from 'reactstrap/lib/Col'; +import Row from 'reactstrap/lib/Row'; +import LteSmallBox from '../../../../src/components/LteSmallBox'; + +const mockData = [ + { + title: '150', + message: 'New Orders', + icon: 'shopping-basket', + color: 'info', + }, + { + title: '53%', + message: 'Bounce Rate', + icon: 'chart-bar', + color: 'success', + }, + { + title: '44', + message: 'User Registrations', + icon: 'user-plus', + color: 'warning', + }, + { + title: '65', + message: 'Unique Visitors', + icon: 'chart-pie', + color: 'danger', + }, +]; + +const Item = ({ data }) => { + return data.map(({ title, message, icon, color }) => { + return ( + + + + ); + }); +}; + +const Smallbox = () => { + return ( + + + + ); +}; + +export default Smallbox; From b00f857ae861fab145cd0633420cd2e9c8305558 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Wed, 18 Nov 2020 20:11:23 +0900 Subject: [PATCH 08/10] Add LatestOrder dashboard component - Remove dashboardLatestOrderData --- .../dashboard/dashboardLatestOrderData.js | 53 -------- demo/pages/dashboard/DemoDashboard.jsx | 54 +-------- .../dashboard/components/LatestOrder.jsx | 113 ++++++++++++++++++ 3 files changed, 115 insertions(+), 105 deletions(-) delete mode 100644 demo/data/dashboard/dashboardLatestOrderData.js create mode 100644 demo/pages/dashboard/components/LatestOrder.jsx diff --git a/demo/data/dashboard/dashboardLatestOrderData.js b/demo/data/dashboard/dashboardLatestOrderData.js deleted file mode 100644 index 62f0949..0000000 --- a/demo/data/dashboard/dashboardLatestOrderData.js +++ /dev/null @@ -1,53 +0,0 @@ -const dashboardLatestOrderData = [ - { - orderID: 'OR9842', - item: 'Call of Duty IV', - status: 'Shipped', - statusColor: 'success', - popularity: '90,80,90,-70,61,-83,63', - }, - { - orderID: 'OR1848', - item: 'Samsung Smart TV', - status: 'Pending', - statusColor: 'warning', - popularity: '90,80,-90,70,61,-83,68', - }, - { - orderID: 'OR7429', - item: 'iPhone 6 Plus', - status: 'Delivered', - statusColor: 'danger', - popularity: '90,-80,90,70,-61,83,63', - }, - { - orderID: 'OR7429', - item: 'Samsung Smart TV', - status: 'Processing', - statusColor: 'info', - popularity: '90,80,-90,70,-61,83,63', - }, - { - orderID: 'OR1848', - item: 'Samsung Smart TV', - status: 'Pending', - statusColor: 'warning', - popularity: '90,80,-90,70,61,-83,68', - }, - { - orderID: 'OR7429', - item: 'iPhone 6 Plus', - status: 'Delivered', - statusColor: 'danger', - popularity: '90,-80,90,70,-61,83,63', - }, - { - orderID: 'OR9842', - item: 'Call of Duty IV', - status: 'Shipped', - statusColor: 'success', - popularity: '90,80,90,-70,61,-83,63', - }, -]; - -export default dashboardLatestOrderData; diff --git a/demo/pages/dashboard/DemoDashboard.jsx b/demo/pages/dashboard/DemoDashboard.jsx index cbe834f..4ac19a5 100644 --- a/demo/pages/dashboard/DemoDashboard.jsx +++ b/demo/pages/dashboard/DemoDashboard.jsx @@ -28,7 +28,6 @@ import { InputGroup, InputGroupAddon, Row, - Table, } from 'reactstrap'; import LteContent from '../../../src/components/LteContent'; import LteContentHeader from '../../../src/components/LteContentHeader'; @@ -43,31 +42,10 @@ import LteContactsListItem from '../../../src/components/directchat/LteContactsL import LteCardTools from '../../../src/components/card/LteCardTools'; import LteUsersList from '../../../src/components/userslist/LteUsersList'; import LteUsersListItem from '../../../src/components/userslist/LteUsersListItem'; -import dashboardLatestOrderData from '../../data/dashboard/dashboardLatestOrderData'; import { ChatMessages, ChatContacts } from '../../data/dashboard/dashboardDirectChatData'; import InfoboxTop from './components/InfoboxTop'; import Smallbox from './components/Smallbox'; - -const LatestOrder = ({ data }) => { - return data.map(({ orderID, item, status, statusColor, popularity }) => { - return ( - - {orderID} - {item} - - - {status} - - - -
- {popularity} -
- - - ); - }); -}; +import LatestOrder from './components/LatestOrder'; const DirectChatMsg = ({ data }) => { return data.map(({ name, date, image, message }) => { @@ -91,35 +69,7 @@ export default function DemoDashboard() { - - - Latest Orders - - - - - - - - - - - - - - - - - - - -
Order IDItemStatusPopularity
- - + diff --git a/demo/pages/dashboard/components/LatestOrder.jsx b/demo/pages/dashboard/components/LatestOrder.jsx new file mode 100644 index 0000000..e0c1d6a --- /dev/null +++ b/demo/pages/dashboard/components/LatestOrder.jsx @@ -0,0 +1,113 @@ +import React from 'react'; +import { faMinus, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Badge, Button, Card, CardBody, CardHeader, CardTitle, Table } from 'reactstrap'; +import LteCardTools from '../../../../src/components/card/LteCardTools'; + +const mockData = [ + { + orderID: 'OR9842', + item: 'Call of Duty IV', + status: 'Shipped', + statusColor: 'success', + popularity: '90,80,90,-70,61,-83,63', + }, + { + orderID: 'OR1848', + item: 'Samsung Smart TV', + status: 'Pending', + statusColor: 'warning', + popularity: '90,80,-90,70,61,-83,68', + }, + { + orderID: 'OR7429', + item: 'iPhone 6 Plus', + status: 'Delivered', + statusColor: 'danger', + popularity: '90,-80,90,70,-61,83,63', + }, + { + orderID: 'OR7429', + item: 'Samsung Smart TV', + status: 'Processing', + statusColor: 'info', + popularity: '90,80,-90,70,-61,83,63', + }, + { + orderID: 'OR1848', + item: 'Samsung Smart TV', + status: 'Pending', + statusColor: 'warning', + popularity: '90,80,-90,70,61,-83,68', + }, + { + orderID: 'OR7429', + item: 'iPhone 6 Plus', + status: 'Delivered', + statusColor: 'danger', + popularity: '90,-80,90,70,-61,83,63', + }, + { + orderID: 'OR9842', + item: 'Call of Duty IV', + status: 'Shipped', + statusColor: 'success', + popularity: '90,80,90,-70,61,-83,63', + }, +]; + +const Item = ({ data }) => { + return data.map(({ orderID, item, status, statusColor, popularity }) => { + return ( + + {orderID} + {item} + + + {status} + + + +
+ {popularity} +
+ + + ); + }); +}; + +const LatestOrder = () => { + return ( + + + Latest Orders + + + + + + + + + + + + + + + + + + +
Order IDItemStatusPopularity
+ + + ); +}; + +export default LatestOrder; From 907aa0b973bdf6ff2a0cf7cd1025ad6d02708468 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Wed, 18 Nov 2020 20:14:00 +0900 Subject: [PATCH 09/10] Modify import libraries --- demo/pages/dashboard/components/InfoboxTop.jsx | 3 +-- demo/pages/dashboard/components/Smallbox.jsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/demo/pages/dashboard/components/InfoboxTop.jsx b/demo/pages/dashboard/components/InfoboxTop.jsx index a991b8f..bdefde5 100644 --- a/demo/pages/dashboard/components/InfoboxTop.jsx +++ b/demo/pages/dashboard/components/InfoboxTop.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import Col from 'reactstrap/lib/Col'; -import Row from 'reactstrap/lib/Row'; +import { Row, Col } from 'reactstrap'; import LteInfoBox from '../../../../src/components/LteInfoBox'; const data = [ diff --git a/demo/pages/dashboard/components/Smallbox.jsx b/demo/pages/dashboard/components/Smallbox.jsx index 2ba06fe..0b0d149 100644 --- a/demo/pages/dashboard/components/Smallbox.jsx +++ b/demo/pages/dashboard/components/Smallbox.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import Col from 'reactstrap/lib/Col'; -import Row from 'reactstrap/lib/Row'; +import { Row, Col } from 'reactstrap'; import LteSmallBox from '../../../../src/components/LteSmallBox'; const mockData = [ From 7a076eb93290ebd852c7b69027a46e6baa24ea69 Mon Sep 17 00:00:00 2001 From: Asis Pattisahusiwa Date: Wed, 18 Nov 2020 20:26:38 +0900 Subject: [PATCH 10/10] Add DirectChat dashboard component --- .../data/dashboard/dashboardDirectChatData.js | 75 --------- demo/pages/dashboard/DemoDashboard.jsx | 83 +--------- .../pages/dashboard/components/DirectChat.jsx | 153 ++++++++++++++++++ 3 files changed, 156 insertions(+), 155 deletions(-) delete mode 100644 demo/data/dashboard/dashboardDirectChatData.js create mode 100644 demo/pages/dashboard/components/DirectChat.jsx diff --git a/demo/data/dashboard/dashboardDirectChatData.js b/demo/data/dashboard/dashboardDirectChatData.js deleted file mode 100644 index e98ab31..0000000 --- a/demo/data/dashboard/dashboardDirectChatData.js +++ /dev/null @@ -1,75 +0,0 @@ -import { user1, user3, user5, user6, user7, user8 } from '../images'; - -const ChatMessages = [ - { - name: 'Alexander Pierce', - date: '23 Jan 2:00 pm', - image: user1, - message: "Is this template really for free? That's unbelievable!", - }, - { - name: 'Sarah Bullock', - date: '23 Jan 2:05 pm', - image: user3, - message: 'You better believe it!', - }, - { - name: 'Alexander Pierce', - date: '23 Jan 5:37 pm', - image: user1, - message: 'Working with AdminLTE on a great new app! Wanna join?', - }, - { - name: 'Sarah Bullock', - date: '23 Jan 6:10 pm', - image: user3, - message: 'I would love to.', - }, -]; - -const ChatContacts = [ - { - href: '/contacts', - image: user1, - name: 'Count Dracula', - date: '2/28/2015', - message: 'How have you been? I was...', - }, - { - href: '/contacts', - image: user7, - name: 'Sarah Doe', - date: '2/23/2015', - message: 'I will be waiting for...', - }, - { - href: '/contacts', - image: user3, - name: 'Nadia Jolie', - date: '2/20/2015', - message: "I'll call you back at...", - }, - { - href: '/contacts', - image: user5, - name: 'Nora S. Vans', - date: '2/10/2015', - message: 'Where is your new...', - }, - { - href: '/contacts', - image: user6, - name: 'John K.', - date: '1/27/2015', - message: 'Can I take a look at...', - }, - { - href: '/contacts', - image: user8, - name: 'Kenneth M.', - date: '1/4/2015', - message: 'Never mind I found...', - }, -]; - -export { ChatMessages, ChatContacts }; diff --git a/demo/pages/dashboard/DemoDashboard.jsx b/demo/pages/dashboard/DemoDashboard.jsx index 4ac19a5..a8343eb 100644 --- a/demo/pages/dashboard/DemoDashboard.jsx +++ b/demo/pages/dashboard/DemoDashboard.jsx @@ -3,7 +3,6 @@ import { faArrowUp, faBars, faCloudDownloadAlt, - faComments, faDownload, faMinus, faRedo, @@ -14,50 +13,18 @@ import { } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; -import { - Badge, - Button, - Card, - CardBody, - CardFooter, - CardHeader, - CardTitle, - Col, - Form, - Input, - InputGroup, - InputGroupAddon, - Row, -} from 'reactstrap'; +import { Badge, Button, Card, CardBody, CardHeader, CardTitle, Col, Row } from 'reactstrap'; import LteContent from '../../../src/components/LteContent'; import LteContentHeader from '../../../src/components/LteContentHeader'; import LteInfoBox from '../../../src/components/LteInfoBox'; import { user1, user2, user3, user4, user5, user6, user7, user8 } from '../../data/images'; -import LteDirectChatMsg from '../../../src/components/directchat/LteDirectChatMsg'; -import LteDirectChatMessages from '../../../src/components/directchat/LteDirectChatMessages'; -import LteDirectChat from '../../../src/components/directchat/LteDirectChat'; -import LteDirectChatContacts from '../../../src/components/directchat/LteDirectChatContacts'; -import LteContactsList from '../../../src/components/directchat/LteContactsList'; -import LteContactsListItem from '../../../src/components/directchat/LteContactsListItem'; import LteCardTools from '../../../src/components/card/LteCardTools'; import LteUsersList from '../../../src/components/userslist/LteUsersList'; import LteUsersListItem from '../../../src/components/userslist/LteUsersListItem'; -import { ChatMessages, ChatContacts } from '../../data/dashboard/dashboardDirectChatData'; import InfoboxTop from './components/InfoboxTop'; import Smallbox from './components/Smallbox'; import LatestOrder from './components/LatestOrder'; - -const DirectChatMsg = ({ data }) => { - return data.map(({ name, date, image, message }) => { - return ; - }); -}; - -const DirectChatContacts = ({ data }) => { - return data.map(({ href, image, name, date, message }) => { - return ; - }); -}; +import DirectChat from './components/DirectChat'; export default function DemoDashboard() { return ( @@ -73,51 +40,7 @@ export default function DemoDashboard() { - - - Direct Chat - - - 3 - - - - - - - - - - - - - - - - - -
- - - - - - -
- - + diff --git a/demo/pages/dashboard/components/DirectChat.jsx b/demo/pages/dashboard/components/DirectChat.jsx new file mode 100644 index 0000000..5c221f3 --- /dev/null +++ b/demo/pages/dashboard/components/DirectChat.jsx @@ -0,0 +1,153 @@ +import React from 'react'; +import { + Badge, + Button, + CardBody, + CardFooter, + CardHeader, + CardTitle, + Form, + Input, + InputGroup, + InputGroupAddon, +} from 'reactstrap'; +import { faComments, faMinus, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import LteCardTools from '../../../../src/components/card/LteCardTools'; +import LteContactsListItem from '../../../../src/components/directchat/LteContactsListItem'; +import LteDirectChatMsg from '../../../../src/components/directchat/LteDirectChatMsg'; +import LteDirectChat from '../../../../src/components/directchat/LteDirectChat'; +import LteDirectChatMessages from '../../../../src/components/directchat/LteDirectChatMessages'; +import LteDirectChatContacts from '../../../../src/components/directchat/LteDirectChatContacts'; +import LteContactsList from '../../../../src/components/directchat/LteContactsList'; +import { user1, user3, user5, user6, user7, user8 } from '../../../data/images'; + +const messageData = [ + { + name: 'Alexander Pierce', + date: '23 Jan 2:00 pm', + image: user1, + message: "Is this template really for free? That's unbelievable!", + }, + { + name: 'Sarah Bullock', + date: '23 Jan 2:05 pm', + image: user3, + message: 'You better believe it!', + }, + { + name: 'Alexander Pierce', + date: '23 Jan 5:37 pm', + image: user1, + message: 'Working with AdminLTE on a great new app! Wanna join?', + }, + { + name: 'Sarah Bullock', + date: '23 Jan 6:10 pm', + image: user3, + message: 'I would love to.', + }, +]; + +const contactData = [ + { + href: '/contacts', + image: user1, + name: 'Count Dracula', + date: '2/28/2015', + message: 'How have you been? I was...', + }, + { + href: '/contacts', + image: user7, + name: 'Sarah Doe', + date: '2/23/2015', + message: 'I will be waiting for...', + }, + { + href: '/contacts', + image: user3, + name: 'Nadia Jolie', + date: '2/20/2015', + message: "I'll call you back at...", + }, + { + href: '/contacts', + image: user5, + name: 'Nora S. Vans', + date: '2/10/2015', + message: 'Where is your new...', + }, + { + href: '/contacts', + image: user6, + name: 'John K.', + date: '1/27/2015', + message: 'Can I take a look at...', + }, + { + href: '/contacts', + image: user8, + name: 'Kenneth M.', + date: '1/4/2015', + message: 'Never mind I found...', + }, +]; + +const MessageItem = ({ data }) => { + return data.map(({ name, date, image, message }) => { + return ; + }); +}; + +const ContactItem = ({ data }) => { + return data.map(({ href, image, name, date, message }) => { + return ; + }); +}; + +const DirectChat = () => { + return ( + + + Direct Chat + + + 3 + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + + ); +}; + +export default DirectChat;