Vite + React

└── admin-dashboard ├── src ├── index.css ├── components │ ├── Layout │ │ ├── index.jsx │ │ ├── SideBarContainer.jsx │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ └── SideBar.jsx │ └── Common │ │ ├── Breadcrumb.jsx │ │ └── TableContainer.jsx ├── assets │ ├── images │ │ └── 1876.jpg │ ├── scss │ │ ├── _variables.scss │ │ └── app.scss │ └── react.svg ├── main.jsx ├── App.css ├── pages │ ├── Dashboard │ │ ├── AdComp.jsx │ │ ├── ColumnChart.jsx │ │ ├── MetricsComp.jsx │ │ ├── CardComp.jsx │ │ ├── CityRankings.jsx │ │ ├── index.jsx │ │ └── ActivityComp.jsx │ └── Transactions │ │ ├── TransactionColumn.jsx │ │ └── index.jsx ├── App.jsx └── data.js ├── vite.config.js ├── .gitignore ├── index.html ├── package.json └── public └── vite.svg /admin-dashboard/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /admin-dashboard/src/components/Layout/index.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /admin-dashboard/src/assets/images/1876.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/judygab/web-dev-projects-2/HEAD/admin-dashboard/src/assets/images/1876.jpg -------------------------------------------------------------------------------- /admin-dashboard/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /admin-dashboard/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /admin-dashboard/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /admin-dashboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /admin-dashboard/src/components/Layout/SideBarContainer.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import SideBar from "./SideBar"; 3 | 4 | const SideBarContainer = props => { 5 | return ( 6 |

7 |

8 | 9 | WEBDECODED 10 | 11 |

12 |

13 | 14 |

15 |

16 | ) 17 | } 18 | 19 | export default SideBarContainer; 20 | -------------------------------------------------------------------------------- /admin-dashboard/src/components/Layout/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { Container, Row, Col } from "reactstrap" 2 | 3 | const Footer = () => { 4 | return ( 5 | 17 | ) 18 | } 19 | 20 | export default Footer 21 | -------------------------------------------------------------------------------- /admin-dashboard/src/App.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | height: 6em; 3 | padding: 1.5em; 4 | will-change: filter; 5 | } 6 | .logo:hover { 7 | filter: drop-shadow(0 0 2em #646cffaa); 8 | } 9 | .logo.react:hover { 10 | filter: drop-shadow(0 0 2em #61dafbaa); 11 | } 12 | 13 | @keyframes logo-spin { 14 | from { 15 | transform: rotate(0deg); 16 | } 17 | to { 18 | transform: rotate(360deg); 19 | } 20 | } 21 | 22 | @media (prefers-reduced-motion: no-preference) { 23 | a:nth-of-type(2) .logo { 24 | animation: logo-spin infinite 20s linear; 25 | } 26 | } 27 | 28 | .card { 29 | padding: 2em; 30 | } 31 | 32 | .read-the-docs { 33 | color: #888; 34 | } 35 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Dashboard/AdComp.jsx: -------------------------------------------------------------------------------- 1 | import { Card } from "reactstrap"; 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 3 | 4 | const AdComp = () => { 5 | return ( 6 | 7 |

8 | 9 |

10 |

Build Future with Us

11 |

12 | Don't miss the opportunity of working on the cutting-edge technology and the most futuristics projects 13 |

14 | 15 | Read More 16 | 17 | 18 |

19 |

20 | 21 | ) 22 | } 23 | 24 | export default AdComp; 25 | -------------------------------------------------------------------------------- /admin-dashboard/src/components/Common/Breadcrumb.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "react-router-dom" 3 | import { Row, Col, BreadcrumbItem } from "reactstrap" 4 | 5 | const Breadcrumb = props => { 6 | return ( 7 | 8 | 9 |

10 |

{props.breadcrumbItem}

11 |

12 |

14 | {props.title} 15 |

17 | {props.breadcrumbItem} 18 |

20 |

21 |

22 | 23 | 24 | ) 25 | } 26 | 27 | export default Breadcrumb 28 | -------------------------------------------------------------------------------- /admin-dashboard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "admin-dashboard", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@fortawesome/fontawesome-svg-core": "^6.2.0", 13 | "@fortawesome/free-regular-svg-icons": "^6.2.0", 14 | "@fortawesome/free-solid-svg-icons": "^6.2.0", 15 | "@fortawesome/react-fontawesome": "^0.2.0", 16 | "apexcharts": "^3.35.5", 17 | "babel-plugin-macros": "^3.1.0", 18 | "bootstrap": "^5.2.2", 19 | "node-sass": "^7.0.3", 20 | "react": "^18.2.0", 21 | "react-apexcharts": "^1.4.0", 22 | "react-dom": "^18.2.0", 23 | "react-router-dom": "^6.4.2", 24 | "react-table": "^7.8.0", 25 | "reactstrap": "^9.1.4", 26 | "sass": "^1.55.0" 27 | }, 28 | "devDependencies": { 29 | "@types/react": "^18.0.17", 30 | "@types/react-dom": "^18.0.6", 31 | "@vitejs/plugin-react": "^2.1.0", 32 | "vite": "^3.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Transactions/TransactionColumn.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { Badge } from 'reactstrap'; 4 | 5 | const toLowerCase1 = str => { 6 | return ( 7 | str === "" || str === undefined ? "" : str.toLowerCase() 8 | ); 9 | }; 10 | 11 | const OrderId = (cell) => { 12 | return ( 13 | {cell.value ? cell.value : ''} 14 | ); 15 | }; 16 | 17 | const BillingName = (cell) => { 18 | return cell.value ? cell.value : ''; 19 | }; 20 | 21 | const Date = (cell) => { 22 | return cell.value ? cell.value : ''; 23 | }; 24 | 25 | const Total = (cell) => { 26 | return cell.value ? cell.value : ''; 27 | }; 28 | 29 | const PaymentStatus = (cell) => { 30 | return ( 31 | {cell.value} 32 | ) 33 | }; 34 | 35 | export { 36 | OrderId, 37 | BillingName, 38 | Date, 39 | Total, 40 | PaymentStatus, 41 | }; 42 | -------------------------------------------------------------------------------- /admin-dashboard/src/components/Layout/Header.jsx: -------------------------------------------------------------------------------- 1 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 2 | 3 | const Header = () => { 4 | return ( 5 | 28 | ) 29 | } 30 | 31 | export default Header; 32 | -------------------------------------------------------------------------------- /admin-dashboard/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import './App.css' 4 | // Import scss 5 | import "./assets/scss/app.scss" 6 | import Dashboard from "./pages/Dashboard" 7 | import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom" 8 | import { fas } from '@fortawesome/free-solid-svg-icons' 9 | import { library } from '@fortawesome/fontawesome-svg-core' 10 | import Header from "./components/Layout/Header" 11 | import Footer from "./components/Layout/Footer" 12 | import SideBarContainer from "./components/Layout/SideBarContainer" 13 | import Transactions from "./pages/Transactions"; 14 | 15 | function App() { 16 | library.add(fas) 17 | const [count, setCount] = useState(0) 18 | 19 | return ( 20 | <> 21 | 22 |

23 | 24 |

25 |

26 | 27 | }/> 28 | } /> 29 | 30 |

31 |

32 |

33 | 34 | 35 | ) 36 | } 37 | 38 | export default App 39 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Dashboard/ColumnChart.jsx: -------------------------------------------------------------------------------- 1 | import ReactApexChart from "react-apexcharts" 2 | 3 | const ColumnChart = ({ dataColors, periodData }) => { 4 | const options = { 5 | chart: { 6 | stacked: !0, 7 | toolbar: { 8 | show: 1 9 | }, 10 | zoom: { 11 | enabled: !0 12 | } 13 | }, 14 | plotOptions: { 15 | bar: { 16 | horizontal: !1, 17 | columnWidth: "15%", 18 | endingShape: "rounded" 19 | } 20 | }, 21 | dataLabels: { 22 | enabled: !1 23 | }, 24 | xaxis: { 25 | show: true, 26 | categories: [ 27 | "Jan", 28 | "Feb", 29 | "Mar", 30 | "Apr", 31 | "May", 32 | "Jun", 33 | "Jul", 34 | "Aug", 35 | "Sep", 36 | "Oct", 37 | "Nov", 38 | "Dec" 39 | ], 40 | labels: { 41 | show: true 42 | } 43 | }, 44 | colors: dataColors, 45 | legend: { 46 | position: "bottom" 47 | }, 48 | fill: { 49 | opacity: 1 50 | } 51 | } 52 | 53 | return ( 54 | <> 55 | 62 | 63 | 64 | ) 65 | } 66 | 67 | export default ColumnChart; 68 | -------------------------------------------------------------------------------- /admin-dashboard/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Dashboard/MetricsComp.jsx: -------------------------------------------------------------------------------- 1 | import { Card } from "reactstrap"; 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 3 | import ReactApexChart from "react-apexcharts"; 4 | 5 | const MetricsComp = () => { 6 | const series = [50, 34, 67, 95]; 7 | 8 | const options = { 9 | plotOptions: { 10 | radialBar: { 11 | dataLabels: { 12 | name: { 13 | fontSize: "22px", 14 | }, 15 | value: { 16 | fontSize: "16px", 17 | }, 18 | total: { 19 | show: true, 20 | label: "Total", 21 | formatter: function (w) { 22 | return 340; 23 | }, 24 | }, 25 | }, 26 | }, 27 | }, 28 | 29 | labels: ["Computer", "Tablet", "Laptop", "Mobile"], 30 | colors: ["primary", "secondar", "orange"], 31 | }; 32 | 33 | return ( 34 | 35 |

36 |

Views

37 |

38 |

27,800

39 |

40 | 41 | 12% 42 |

43 |

44 | Compared to last week 45 | 52 |

53 | 54 | ) 55 | } 56 | 57 | export default MetricsComp; 58 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Dashboard/CardComp.jsx: -------------------------------------------------------------------------------- 1 | import { Card, Row, Col } from "reactstrap"; 2 | 3 | const CardComp = () => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 |

10 |

Name

11 |

Tony

12 |

13 |

14 |

Card Number

15 |

4642 3489 9867 7632

16 |

17 |

18 |

19 |

20 | Valid 21 |

22 |

23 | 11/15 24 |

25 |

26 |

27 |

28 | Expiry 29 |

30 |

31 | 03/25 32 |

33 |

34 |

35 |

36 | CVV 37 |

38 |

39 | ··· 40 |

41 |

42 |

43 | 44 | 45 | 46 | 47 | ) 48 | } 49 | 50 | export default CardComp; 51 | -------------------------------------------------------------------------------- /admin-dashboard/src/components/Layout/SideBar.jsx: -------------------------------------------------------------------------------- 1 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 2 | import { Link } from "react-router-dom"; 3 | 4 | const SideBar = () => { 5 | return ( 6 |

7 |

8 |

Menu
11 | 12 |
13 | 14 |
15 | Users 16 | 17 |
19 | 20 |
21 | 22 |
23 | Calendar 24 | 25 |
27 | 28 |
29 | 30 |
31 | E-commerce 32 | 33 |
35 | 36 |
37 | 38 |
39 | E-mail 40 | 41 |

43 |

44 |

45 | ) 46 | } 47 | 48 | export default SideBar; 49 | -------------------------------------------------------------------------------- /admin-dashboard/src/assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | @import "./node_modules/bootstrap/scss/functions"; 2 | @import "./node_modules/bootstrap/scss/variables"; 3 | @import "./node_modules/bootstrap/scss/mixins"; 4 | 5 | // Body Styling 6 | $body-bg: #f8f8fb; 7 | $body-color: #000000; 8 | $header-color: #fff; 9 | $container-bg: #fff; 10 | 11 | // Color System: 12 | $white: #fff; 13 | $blue: #3258F2; 14 | $lightBlue: #A0EADE; 15 | $cambridgeBlue: #BFD2BF; 16 | $orange: #F2545B; 17 | $red: #A93F55; 18 | $purple: #a855f7; 19 | $green: #646F4B; 20 | 21 | $colors: ( 22 | "blue": $blue, 23 | "orange": $orange, 24 | "red": $red, 25 | "purple": $purple, 26 | "lightBlue": $lightBlue, 27 | "cambridgeBlue": $cambridgeBlue, 28 | "green": $green 29 | ); 30 | 31 | // Variants 32 | $primary: $purple; 33 | $secondary: $lightBlue; 34 | $success: $green; 35 | 36 | $theme-colors: ( 37 | "primary": $primary, 38 | "secondary": $secondary, 39 | "success": $success 40 | ); 41 | 42 | $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); 43 | 44 | .dark { 45 | $secondary: #111111; 46 | $success: #222222; 47 | $dark: #000; 48 | 49 | $theme-colors: ( 50 | "secondary": $secondary, 51 | "success": $success, 52 | "danger": $danger, 53 | "info": $indigo, 54 | "dark": $dark, 55 | "light": $light, 56 | ); 57 | 58 | /* redefine theme color variables */ 59 | @each $color, $value in $theme-colors { 60 | --#{$variable-prefix}#{$color}: #{$value}; 61 | } 62 | 63 | /* redefine theme color rgb vars (used for bg- colors) */ 64 | $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); 65 | @each $color, $value in $theme-colors-rgb { 66 | --#{$variable-prefix}#{$color}-rgb: #{$value}; 67 | } 68 | 69 | $body-color: #ffff; 70 | $card-bg: #111C44; 71 | $body-bg: #0f172a; 72 | $container-bg: #111C44; 73 | $link-color: $white; 74 | 75 | --#{$variable-prefix}body-color: #{$body-color}; 76 | --#{$variable-prefix}body-bg: #{$body-bg}; 77 | --#{$variable-prefix}link-color: #{$link-color}; 78 | --#{$variable-prefix}container-bg: #{$container-bg}; 79 | 80 | @import "./node_modules/bootstrap/scss/bootstrap"; 81 | } 82 | 83 | @import "./node_modules/bootstrap/scss/bootstrap"; 84 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Dashboard/CityRankings.jsx: -------------------------------------------------------------------------------- 1 | import { Card, CardBody, CardTitle, Progress } from "reactstrap"; 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 3 | 4 | const CityRankings = () => { 5 | return ( 6 | <> 7 | 8 | 9 | Top Selling Cities 10 |

11 |

12 | 13 |

14 |

2,3951

15 |

Seattle

16 |

17 | 18 |

19 | 20 | 21 | 22 | 25 | 28 | 36 | 37 | 38 | 41 | 44 | 52 | 53 | 54 | 57 | 60 | 68 | 69 | 70 |

23 \| Seattle 24 \|	26 \| 1,456 27 \|	29 \| 35 \|
39 \| Houston 40 \|	42 \| 1,080 43 \|	45 \| 51 \|
55 \| San Francisco 56 \|	58 \| 1,112 59 \|	61 \| 67 \|

71 |

72 | 73 | 74 | 75 | ) 76 | } 77 | 78 | export default CityRankings 79 | -------------------------------------------------------------------------------- /admin-dashboard/src/data.js: -------------------------------------------------------------------------------- 1 | const periodData = [ 2 | { 3 | name: "Clothing", 4 | data: [44, 55, 41, 67, 12, 76, 16, 43, 18, 24, 33, 45] 5 | }, 6 | { 7 | name: "Shoes", 8 | data: [3, 12, 34, 7, 27, 18, 14, 23, 11, 13, 25, 21] 9 | }, 10 | { 11 | name: "Accessories", 12 | data: [10, 11, 7, 15, 21, 12, 8, 9, 18, 12, 20, 17] 13 | }, 14 | ] 15 | 16 | const ordersData = [{"id":1,"billingName":"Lyon Bessent","email":"lbessent0@simplemachines.org","total":"$1.07", "status": "Paid", "date":"2/10/2022"}, 17 | {"id":2,"billingName":"Antons Poore","email":"apoore1@nature.com","total":"$5.54", "status": "Paid", "date":"2/15/2022"}, 18 | {"id":3,"billingName":"Ibby Brailsford","email":"ibrailsford2@sfgate.com","total":"$7.76", "status": "Paid", "date":"8/11/2022"}, 19 | {"id":4,"billingName":"Delila Berzins","email":"dberzins3@ihg.com","total":"$1.05", "status": "Refund", "date":"3/5/2022"}, 20 | {"id":5,"billingName":"Lisbeth Stokell","email":"lstokell4@dedecms.com","total":"$4.39", "status": "Paid", "date":"5/1/2022"}, 21 | {"id":6,"billingName":"Romain Seathwright","email":"rseathwright5@cdc.gov","total":"$9.08", "status": "Refund", "date":"9/22/2022"}, 22 | {"id":7,"billingName":"Darya Smorfit","email":"dsmorfit6@msn.com","total":"$8.65", "status": "", "date":"3/2/2022"}, 23 | {"id":8,"billingName":"Netta Gaishson","email":"ngaishson7@nature.com","total":"$1.66", "status": "Paid", "date":"1/26/2022"}, 24 | {"id":9,"billingName":"Christie Signori","email":"csignori8@youtu.be","total":"$5.59", "status": "Paid", "date":"8/22/2022"}, 25 | {"id":10,"billingName":"Genna Wimpress","email":"gwimpress9@google.pl","total":"$3.21", "status": "Paid", "date":"4/14/2022"}, 26 | {"id":11,"billingName":"Joyce Summers","email":"jsummersa@who.int","total":"$7.23", "status": "Paid", "date":"11/4/2021"}, 27 | {"id":12,"billingName":"Aviva Lasselle","email":"alasselleb@bloomberg.com","total":"$3.65", "status": "Refund", "date":"11/26/2021"}, 28 | {"id":13,"billingName":"Binky Lorrain","email":"blorrainc@berkeley.edu","total":"$2.01", "status": "Refund", "date":"1/10/2022"}, 29 | {"id":14,"billingName":"Val Dickson","email":"vdicksond@state.gov","total":"$3.48", "status": "Paid", "date":"1/17/2022"}, 30 | {"id":15,"billingName":"Hendrika Schubert","email":"hschuberte@prnewswire.com","total":"$4.58", "status": "Refund", "date":"10/17/2021"}, 31 | {"id":16,"billingName":"Lacie Karim","email":"lkarimf@netscape.com","total":"$6.30", "status": "Refund", "date":"2/15/2022"}, 32 | {"id":17,"billingName":"Rani Gemmill","email":"rgemmillg@studiopress.com","total":"$5.49", "status": "Refund", "date":"8/23/2022"}, 33 | {"id":18,"billingName":"Cobby McInnery","email":"cmcinneryh@geocities.jp","total":"$3.65", "status": "Paid", "date":"7/17/2022"}, 34 | {"id":19,"billingName":"Maryellen Thorogood","email":"mthorogoodi@ustream.tv","total":"$8.36", "status": "Paid", "date":"1/5/2022"}, 35 | {"id":20,"billingName":"Lorrayne McTeggart","email":"lmcteggartj@creativecommons.org","total":"$8.88", "status": "Paid", "date":"7/17/2022"}] 36 | 37 | export { periodData, ordersData } 38 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Transactions/index.jsx: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react"; 2 | import Breadcrumbs from "../../components/Common/Breadcrumb"; 3 | import { Card } from "reactstrap"; 4 | import { 5 | OrderId, 6 | BillingName, 7 | Date, 8 | Total, 9 | PaymentStatus, 10 | } from "./TransactionColumn"; 11 | import { TableContainer } from "../../components/Common/TableContainer"; 12 | import { ordersData } from "../../data.js"; 13 | 14 | const Transactions = () => { 15 | const columns = useMemo( 16 | () => [ 17 | { 18 | Header: "#", 19 | filterable: true, 20 | disableFilters: true, 21 | Cell: cellProps => { 22 | return ; 23 | }, 24 | }, 25 | { 26 | Header: "Order ID", 27 | accessor: "id", 28 | filterable: true, 29 | disableFilters: true, 30 | Cell: cellProps => { 31 | return ; 32 | }, 33 | }, 34 | { 35 | Header: "Billing Name", 36 | accessor: "billingName", 37 | disableFilters: true, 38 | filterable: true, 39 | Cell: cellProps => { 40 | return ; 41 | }, 42 | }, 43 | { 44 | Header: "Date", 45 | accessor: "date", 46 | disableFilters: true, 47 | filterable: true, 48 | Cell: cellProps => { 49 | return ; 50 | }, 51 | }, 52 | { 53 | Header: "Total", 54 | accessor: "total", 55 | disableFilters: true, 56 | filterable: true, 57 | Cell: cellProps => { 58 | return ; 59 | }, 60 | }, 61 | { 62 | Header: "Payment Status", 63 | accessor: "status", 64 | disableFilters: true, 65 | filterable: true, 66 | Cell: cellProps => { 67 | return ; 68 | }, 69 | }, 70 | // { 71 | // Header: "View Details", 72 | // disableFilters: true, 73 | // accessor: "view", 74 | // Cell: cellProps => { 75 | // return ( 76 | // 84 | // ); 85 | // }, 86 | // }, 87 | ], 88 | [] 89 | ); 90 | 91 | return ( 92 | <> 93 | 97 | 98 |

All Transactions

99 | 104 | 105 | 106 | ) 107 | } 108 | 109 | export default Transactions; 110 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Dashboard/index.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Container, 3 | Row, 4 | Col, 5 | Card, 6 | CardBody 7 | } from "reactstrap"; 8 | import Breadcrumbs from "../../components/Common/Breadcrumb"; 9 | import CardComp from "./CardComp"; 10 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 11 | import MetricsComp from "./MetricsComp"; 12 | import ColumnChart from "./ColumnChart"; 13 | import AdComp from "./AdComp"; 14 | import ActivityComp from "./ActivityComp"; 15 | import CityRankings from "./CityRankings"; 16 | import { periodData } from "../../data.js"; 17 | 18 | const Dashboard = () => { 19 | 20 | const reports = [ 21 | { title: "Orders", iconClass: "fa-bag-shopping", description: "1,235", percent: "+1.2" }, 22 | { title: "Revenue", iconClass: "fa-money-check-dollar", description: "$35, 723", percent: "-5" }, 23 | { 24 | title: "Sales", 25 | iconClass: "fa-sack-dollar", 26 | description: "$160,230", 27 | percent: "+20" 28 | }, 29 | ]; 30 | 31 | return ( 32 | <> 33 | 34 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | {reports.map((report, key) => ( 46 | 47 | 48 | 49 |

50 |

51 |

52 | {report.title} 53 |

54 |

{report.description}

55 |

56 |

57 | 58 | 63 | 64 | 65 |

66 |

67 | 68 | 69 | 70 | ))} 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | ) 95 | } 96 | 97 | export default Dashboard; 98 | -------------------------------------------------------------------------------- /admin-dashboard/src/pages/Dashboard/ActivityComp.jsx: -------------------------------------------------------------------------------- 1 | import { Card, CardBody, CardTitle } from "reactstrap"; 2 | import { Link } from "react-router-dom"; 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 4 | 5 | const ActivityComp = () => { 6 | return ( 7 | <> 8 | 9 | 10 | Activity 11 |

13 |
14 | 15 |
16 |
17 |
18 |
19 | 1 Jan{" "} 20 |
21 |
22 |
23 |
Release of an Alpha Version
24 |
25 |
26 |
29 |
30 | 31 |
32 |
33 |
34 |
35 | 13 Feb{" "} 36 |
37 |
38 |
39 |
40 | Bug fixes and Beta release to a small group of users for testing... Read More 41 |
42 |
43 |
44 |
46 |
47 | 48 |
49 |
50 |
51 |
52 | 20 March{" "} 53 | 54 |
55 |
56 |
57 |
Pre-seed funding is complete
58 |
59 |
60 |

61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 12 May{" "} 69 |
70 |
71 |
72 |
Product market fit found
73 |
74 |
75 |
76 |

77 |
78 | 82 | View More 83 | 84 |
85 | 86 | 87 | 88 | ); 89 | }; 90 | 91 | export default ActivityComp; 92 | -------------------------------------------------------------------------------- /admin-dashboard/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /admin-dashboard/src/assets/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | 3 | body { 4 | background-color: var(--bs-body-bg); 5 | } 6 | 7 | a { 8 | text-decoration: none; 9 | color: $black; 10 | } 11 | 12 | 13 | /* Dashboard */ 14 | .credit-card-container { 15 | background: rgb(50,88,242); 16 | background: linear-gradient(90deg, #84D9FE, #A797FF); 17 | 18 | p { 19 | margin-bottom: 0.25rem; 20 | } 21 | } 22 | 23 | .mini-stats-wid{ 24 | .mini-stat-icon{ 25 | overflow: hidden; 26 | position: relative; 27 | &:before, &:after{ 28 | content: ""; 29 | position: absolute; 30 | width: 8px; 31 | height: 54px; 32 | background-color: rgba($container-bg,.1); 33 | left: 16px; 34 | transform: rotate(32deg); 35 | top: -5px; 36 | transition: all 0.4s; 37 | } 38 | 39 | &::after{ 40 | left: -12px; 41 | width: 12px; 42 | transition: all 0.2s; 43 | } 44 | } 45 | 46 | &:hover{ 47 | .mini-stat-icon{ 48 | &::after{ 49 | left: 60px; 50 | } 51 | } 52 | } 53 | } 54 | 55 | .icon-container { 56 | align-items: center; 57 | background-color: $primary; 58 | color: $container-bg; 59 | display: flex; 60 | font-weight: 500; 61 | height: 100%; 62 | justify-content: center; 63 | width: 100%; 64 | } 65 | 66 | .icon-sm { 67 | height: 3rem; 68 | width: 3rem; 69 | } 70 | 71 | .ad-container { 72 | background-image: url(../images/1876.jpg); 73 | background-size: cover; 74 | border-radius: 0.75rem; 75 | overflow: hidden; 76 | 77 | .image-cover { 78 | opacity: 0.8; 79 | background-position: center; 80 | background-size: cover; 81 | position: absolute; 82 | left: 0px; 83 | top: 0px; 84 | background-image: linear-gradient(to top left, #141727, #3a416f); 85 | width: 100%; 86 | height: 100%; 87 | } 88 | } 89 | 90 | .verti-timeline { 91 | border-left: 2px solid #f6f6f6; 92 | margin: 0 10px; 93 | 94 | .event-list { 95 | position: relative; 96 | padding: 0px 0px 40px 30px; 97 | 98 | .event-timeline-icon { 99 | position: absolute; 100 | left: -9px; 101 | top: 0px; 102 | z-index: 9; 103 | font-size: 16px; 104 | padding: 1px; 105 | background-color: $card-bg; 106 | } 107 | } 108 | } 109 | 110 | /* Layout */ 111 | .navbar-header { 112 | display: flex; 113 | justify-content: space-between; 114 | align-items: center; 115 | margin: 0 auto; 116 | height: 70px; 117 | padding: 0 calc(24px * 0.5) 0 0; 118 | } 119 | 120 | #page-topbar { 121 | position: fixed; 122 | top: 0; 123 | right: 0; 124 | left: 250px; 125 | z-index: 1002; 126 | background-color: var(--bs-container-bg); 127 | box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%); 128 | } 129 | 130 | .page-content { 131 | padding: calc(70px + 24px) calc(24px * 0.75) 60px calc(24px * 0.75); 132 | } 133 | 134 | .menu-item { 135 | border-radius: 0.5rem; 136 | .menu-pill { 137 | padding: 0.625rem; 138 | text-align: center; 139 | background-color: $card-color; 140 | border-radius: 0.5rem; 141 | justify-content: center; 142 | align-items: center; 143 | display: flex; 144 | width: 2rem; 145 | height: 2rem; 146 | margin-right: 0.5rem; 147 | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); 148 | position: relative; 149 | z-index: 100; 150 | } 151 | 152 | &.active { 153 | background-color: $body-color; 154 | } 155 | } 156 | 157 | .menu-title { 158 | padding: 0.625rem; 159 | } 160 | 161 | .footer { 162 | bottom: 0; 163 | padding: 20px calc(24px * 0.75); 164 | // position: absolute; 165 | right: 0; 166 | color: #74788d; 167 | left: 250px; 168 | height: 60px; 169 | } 170 | 171 | .main-content { 172 | margin-left: 250px; 173 | 174 | &.collapsed { 175 | margin-left: 70px; 176 | } 177 | } 178 | 179 | #sidebar-menu { 180 | width: 250px; 181 | bottom: 0; 182 | margin-top: 0; 183 | position: fixed; 184 | top: 0; 185 | padding-top: 70px; 186 | background-color: var(--bs-container-bg); 187 | box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%); 188 | 189 | &.collapsed { 190 | width: 70px; 191 | } 192 | } 193 | 194 | .menu { 195 | width: 250px; 196 | position: fixed; 197 | } 198 | 199 | .logo { 200 | font-weight: bold; 201 | color: purple; 202 | } 203 | 204 | /*Common */ 205 | .react-table { 206 | thead { 207 | color: rgb(131 146 171); 208 | } 209 | } 210 | 211 | .card { 212 | margin-bottom: 24px; 213 | box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%); 214 | border: none; 215 | } 216 | -------------------------------------------------------------------------------- /admin-dashboard/src/components/Common/TableContainer.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | useTable, 3 | useGlobalFilter, 4 | useAsyncDebounce, 5 | useSortBy, 6 | useFilters, 7 | useExpanded, 8 | usePagination, 9 | } from "react-table"; 10 | import { Table, Row, Col, Button, Input } from "reactstrap"; 11 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 12 | 13 | const Filter = ({ column }) => { 14 | return ( 15 |
16 | {column.canFilter && column.render('Filter')} 17 |
18 | ); 19 | }; 20 | 21 | export const TableContainer = ({ 22 | columns, 23 | data, 24 | handleOrderClicks, 25 | handleUserClick, 26 | handleCustomerClick, 27 | customPageSize, 28 | className, 29 | customPageSizeOptions 30 | }) => { 31 | const { 32 | getTableProps, 33 | getTableBodyProps, 34 | headerGroups, 35 | page, 36 | prepareRow, 37 | canPreviousPage, 38 | canNextPage, 39 | pageOptions, 40 | pageCount, 41 | gotoPage, 42 | nextPage, 43 | previousPage, 44 | setPageSize, 45 | state, 46 | preGlobalFilteredRows, 47 | setGlobalFilter, 48 | state: { pageIndex, pageSize }, 49 | } = useTable( 50 | { 51 | columns, 52 | data, 53 | initialState: { 54 | pageIndex: 0, 55 | pageSize: customPageSize, 56 | sortBy: [ 57 | { 58 | desc: true, 59 | }, 60 | ], 61 | }, 62 | }, 63 | useFilters, 64 | useSortBy, 65 | useExpanded, 66 | usePagination 67 | ); 68 | 69 | const generateSortingIndicator = column => { 70 | return column.isSorted ? (column.isSortedDesc ? : ) : ""; 71 | }; 72 | 73 | const onChangeInSelect = event => { 74 | setPageSize(Number(event.target.value)); 75 | }; 76 | 77 | const onChangeInInput = event => { 78 | const page = event.target.value ? Number(event.target.value) - 1 : 0; 79 | gotoPage(page); 80 | }; 81 | return ( 82 | <> 83 | 84 | 85 | 96 | 97 | 98 | 99 |
100 | 101 | 102 | {headerGroups.map(headerGroup => ( 103 | 104 | {headerGroup.headers.map(column => ( 105 | 112 | ))} 113 | 114 | ))} 115 | 116 | 117 | 118 | {page.map(row => { 119 | prepareRow(row); 120 | return ( 121 | 122 | {row.cells.map(cell => { 123 | return ( 124 | 127 | ); 128 | })} 129 | 130 | ); 131 | })} 132 | 133 |
106 |
107 | {column.render("Header")} 108 | {generateSortingIndicator(column)} 109 |
110 | 111 |
125 | {cell.render("Cell")} 126 |
134 |
135 | 136 | 137 | 138 |
139 | 146 | 153 |
154 | 155 | 156 | Page{" "} 157 | 158 | {pageIndex + 1} of {pageOptions.length} 159 | 160 | 161 | 162 | 170 | 171 | 172 | 173 |
174 | 177 | 184 |
185 | 186 | 187 | 188 | ); 189 | }; 190 | --------------------------------------------------------------------------------

Build Future with Us

{props.breadcrumbItem}

1,456

1,080

1,112

{report.description}

19 | 1 Jan{" "} 20 |

35 | 13 Feb{" "} 36 |

52 | 20 March{" "} 53 | 54 |

68 | 12 May{" "} 69 |