diff --git a/src/App.css b/src/App.css index 6a56474..7ff4314 100644 --- a/src/App.css +++ b/src/App.css @@ -33,4 +33,21 @@ background-color: var(--glass); overflow: hidden; grid-template-columns: 11rem auto 20rem; + gap: 10px; +} + +@media screen and (max-width: 1200px) { + .AppGlass{ + grid-template-columns: 10% 50% auto; + overflow: scroll; + } +} + +@media screen and (max-width: 768px){ + .AppGlass{ + grid-template-columns: 1fr; + } + .AppGlass::-webkit-scrollbar{ + display: none; + } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index bed114c..80b91b7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,14 @@ import './App.css' import Sidebar from './componemts/sidebar/Sidebar'; +import MainDash from './componemts/MainDash/MainDash'; +import RightSide from './componemts/RightSide/RightSide'; function App() { return (
+ +
); diff --git a/src/Data/Data.js b/src/Data/Data.js index c029258..85213d8 100644 --- a/src/Data/Data.js +++ b/src/Data/Data.js @@ -6,8 +6,14 @@ import { UilPackage, UilChart, UilSignOutAlt, + UilMoneyWithdrawal, + UilUsdSquare, } from "@iconscout/react-unicons"; + import img1 from "../imgs/img1.png"; + import img2 from "../imgs/img2.png"; + import img3 from "../imgs/img3.png"; + export const SidebarData=[{ icon: UilEstate, heading: "Dashboard", @@ -27,4 +33,78 @@ import { { icon: UilChart, heading: 'Analytics' - },]; \ No newline at end of file + },]; + + export const CardsData=[ + { + title:"Sales", + color:{ + backGround: "linear-gradient(180deg, #bb67ff 0%, #c484f3 100%)", + boxShadow: "0px 10px 20px 0px #e0c6f5", + }, + barValue:70, + value:"25,970", + png:UilUsdSquare, + series:[ + { + name: "Sales", + data: [31, 40, 28, 51, 42, 109, 100], + }, + ], + }, + { + title: "Revenue", + color: { + backGround: "linear-gradient(180deg, #FF919D 0%, #FC929D 100%)", + boxShadow: "0px 10px 20px 0px #FDC0C7", + }, + barValue: 80, + value: "14,270", + png: UilMoneyWithdrawal, + series: [ + { + name: "Revenue", + data: [10, 100, 50, 70, 80, 30, 40], + }, + ], + }, + { + title: "Expenses", + color: { + backGround: + "linear-gradient(rgb(248, 212, 154) -146.42%, rgb(255 202 113) -46.42%)", + boxShadow: "0px 10px 20px 0px #F9D59B", + }, + barValue: 60, + value: "4,270", + png: UilClipboardAlt, + series: [ + { + name: "Expenses", + data: [10, 25, 15, 30, 12, 15, 20], + }, + ], + }, + ]; + + // Recent Update Card Data +export const UpdatesData = [ + { + img: img1, + name: "Andrew Thomas", + noti: "has ordered Apple smart watch 2500mh battery.", + time: "25 seconds ago", + }, + { + img: img2, + name: "James Bond", + noti: "has received Samsung gadget for charging battery.", + time: "30 minutes ago", + }, + { + img: img3, + name: "Iron Man", + noti: "has ordered Apple smart watch, samsung Gear 2500mh battery.", + time: "2 hours ago", + }, +]; \ No newline at end of file diff --git a/src/componemts/Card/Card.css b/src/componemts/Card/Card.css new file mode 100644 index 0000000..e6bf2a6 --- /dev/null +++ b/src/componemts/Card/Card.css @@ -0,0 +1,102 @@ +.CompactCard{ + display: flex; + flex: 1; + height: 7rem!important; + border-radius: 0.7rem; + color: white; + position: relative; + cursor: pointer; + padding: 1rem; +} + +.CompactCard:hover{ + box-shadow: none; +} + +.radialBar{ + display: flex; + flex: 1; + justify-content: flex-end; + flex-direction: column ; + gap: 1rem; +} +.CircularProgressbar{ + width: 4rem!important; + overflow: visible!important; + +} +.CircularProgressbar-path{ + stroke: white!important; + stroke-width: 12px!important; + filter: drop-shadow(2px 4px 6px white); +} +.CircularProgressbar-trail{ + display: none; +} +.CircularProgressbar-text{ + fill: white!important; +} +.radialBar span{ + font-size: 17px; + font-weight: bold; +} + +/* detail */ +.detail{ + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1; + align-items: flex-end; +} +.detail span:nth-child(2){ + font-size: 22px; + font-weight: bold; +} +.detail span:nth-child(3){ + font-size: 12px; +} +/* Expanded Card */ +.ExpandedCard{ + position: absolute; + width: 60%; + height: 70vh; + z-index: 9; + left: 13rem; + border-radius: 1rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + padding: 1rem; +} +.ExpandedCard span:nth-of-type(1){ + color: white; + font-size: 26px; + font-weight: bold; + text-shadow: 0px 0px 15px white; +} +.ExpandedCard span:nth-of-type(2){ + color: white; + font-size: 16px; +} +.chartContainer{ + width: 70%; +} + +@media screen and (max-width: 1200px){ + .ExpandedCard{ + top: 2rem; + left: 6rem; + height: 70vh; + } +} + +@media screen and (max-width: 768px){ + .ExpandedCard{ + top: 8rem; + height: 50%; + left: 15px; + width: 80%; + } +} diff --git a/src/componemts/Card/Card.jsx b/src/componemts/Card/Card.jsx new file mode 100644 index 0000000..eef303e --- /dev/null +++ b/src/componemts/Card/Card.jsx @@ -0,0 +1,130 @@ +import React, { useState } from 'react'; +import './Card.css'; +import { motion, AnimateSharedLayout } from "framer-motion"; +import { CircularProgressbar } from "react-circular-progressbar"; +import "react-circular-progressbar/dist/styles.css"; +import {UilTimes} from '@iconscout/react-unicons'; +import Chart from 'react-apexcharts' +const Card = (props) => { + +const [expanded, setExpanded] = useState(false); + + return ( +
+ + { + expanded?( + setExpanded(false)}/> + ): + setExpanded(true)}/> + } + +
+ ) +} + + +//CompactCard +function CompactCard({param,setExpanded}){ + const Png=param.png; + return( + + +
+ + {param.title} +
+
+ + ${param.value} + Last 24 hours +
+ + ) +} + +//ExpandedCard +function ExpandedCard({param,setExpanded}){ + const data={ + options: { + chart: { + type: "area", + height: "auto", + }, + + dropShadow: { + enabled: false, + enabledOnSeries: undefined, + top: 0, + left: 0, + blur: 3, + color: "#000", + opacity: 0.35, + }, + + fill: { + colors: ["#fff"], + type: "gradient", + }, + dataLabels: { + enabled: false, + }, + stroke: { + curve: "smooth", + colors: ["white"], + }, + tooltip: { + x: { + format: "dd/MM/yy HH:mm", + }, + }, + grid: { + show: true, + }, + xaxis: { + type: "datetime", + categories: [ + "2018-09-19T00:00:00.000Z", + "2018-09-19T01:30:00.000Z", + "2018-09-19T02:30:00.000Z", + "2018-09-19T03:30:00.000Z", + "2018-09-19T04:30:00.000Z", + "2018-09-19T05:30:00.000Z", + "2018-09-19T06:30:00.000Z", + ], + }, + }, + } + return( + +
+ +
+ {param.title} +
+ +
+ Last 24 hours + + ) +} +export default Card \ No newline at end of file diff --git a/src/componemts/Cards/Cards.css b/src/componemts/Cards/Cards.css new file mode 100644 index 0000000..64903fa --- /dev/null +++ b/src/componemts/Cards/Cards.css @@ -0,0 +1,23 @@ +.Cards{ + display: flex; + gap:10px; +} + +.parentContainer{ + width: 100%; +} + +@media screen and (max-width: 1200px){ +.Cards{ + flex-direction: column; +} +.parentContainer{ + height: 9rem; +} +} + +@media screen and (max-width: 768px){ + .Cards{ + width: 90%; + } +} \ No newline at end of file diff --git a/src/componemts/Cards/Cards.jsx b/src/componemts/Cards/Cards.jsx new file mode 100644 index 0000000..cbd5bfb --- /dev/null +++ b/src/componemts/Cards/Cards.jsx @@ -0,0 +1,27 @@ +import React from 'react' +import './Cards.css'; +import { CardsData } from '../../Data/Data.js'; + +import Card from '../Card/Card.jsx'; +const Cards = () => { + return ( +
+ {CardsData.map((card,id)=>{ + return( +
+ +
+ ) + })} +
+ ) +} + +export default Cards \ No newline at end of file diff --git a/src/componemts/CustomerReview/CustomerReview.css b/src/componemts/CustomerReview/CustomerReview.css new file mode 100644 index 0000000..e69de29 diff --git a/src/componemts/CustomerReview/CustomerReview.jsx b/src/componemts/CustomerReview/CustomerReview.jsx new file mode 100644 index 0000000..5cb9a6b --- /dev/null +++ b/src/componemts/CustomerReview/CustomerReview.jsx @@ -0,0 +1,63 @@ +import React from 'react' +import './CustomerReview.css' +import Chart from 'react-apexcharts' +const CustomerReview = () => { + const data = { + series: [ + { + name: "Review", + data: [10, 50, 30, 90, 40, 120, 100], + }, + ], + options: { + chart: { + type: "area", + height: "auto", + }, + + fill: { + colors: ["#fff"], + type: "gradient", + }, + dataLabels: { + enabled: false, + }, + stroke: { + curve: "smooth", + colors: ["#ff929f"], + }, + tooltip: { + x: { + format: "dd/MM/yy HH:mm", + }, + }, + grid: { + show: false, + }, + xaxis: { + type: "datetime", + categories: [ + "2018-09-19T00:00:00.000Z", + "2018-09-19T01:30:00.000Z", + "2018-09-19T02:30:00.000Z", + "2018-09-19T03:30:00.000Z", + "2018-09-19T04:30:00.000Z", + "2018-09-19T05:30:00.000Z", + "2018-09-19T06:30:00.000Z", + ], + }, + yaxis: { + show: false + }, + toolbar:{ + show: false + } + }, + }; + return ( +
+ +
+ ) +}; +export default CustomerReview; \ No newline at end of file diff --git a/src/componemts/MainDash/MainDash.css b/src/componemts/MainDash/MainDash.css new file mode 100644 index 0000000..8f3ec86 --- /dev/null +++ b/src/componemts/MainDash/MainDash.css @@ -0,0 +1,17 @@ +.MainDash{ + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +@media screen and (max-width: 1200px){ + .MainDash{ + margin-top: 2rem; + justify-content: flex-start; + } +} +@media screen and (max-width: 768px){ + .MainDash{ + align-items: center; + } +} \ No newline at end of file diff --git a/src/componemts/MainDash/MainDash.jsx b/src/componemts/MainDash/MainDash.jsx new file mode 100644 index 0000000..72dbfce --- /dev/null +++ b/src/componemts/MainDash/MainDash.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import './MainDash.css' +import Cards from '../Cards/Cards' +import Table from '../Table/Table' +const MainDash = () => { + return ( +
+

Dashboard

+ + + + ) +} + +export default MainDash \ No newline at end of file diff --git a/src/componemts/RightSide/RightSide.css b/src/componemts/RightSide/RightSide.css new file mode 100644 index 0000000..bee6d46 --- /dev/null +++ b/src/componemts/RightSide/RightSide.css @@ -0,0 +1,27 @@ +.RightSide{ + display: flex; + flex-direction: column; + width: 95%; + justify-content: space-evenly; +} + +@media screen and (max-width: 1200px){ + .RightSide{ + justify-content: flex-start; + margin-top: 3rem; + } +} + +@media screen and (max-width: 768px){ + .RightSide{ + width: 100%; + margin-top: 0; + + } + + .RightSide div{ + display: flex; + flex-direction: column; + align-self: center; + } +} \ No newline at end of file diff --git a/src/componemts/RightSide/RightSide.jsx b/src/componemts/RightSide/RightSide.jsx new file mode 100644 index 0000000..1d08b7d --- /dev/null +++ b/src/componemts/RightSide/RightSide.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import './RightSide.css' +import Updates from '../Updates/Updates' +import CustomerReview from '../CustomerReview/CustomerReview' +const RightSide = () => { + return ( +
+

Updates

+ +
+

Customer Review

+ +
+
+ ) +} + +export default RightSide \ No newline at end of file diff --git a/src/componemts/Table/Table.css b/src/componemts/Table/Table.css new file mode 100644 index 0000000..fcd4295 --- /dev/null +++ b/src/componemts/Table/Table.css @@ -0,0 +1,40 @@ +.MuiTableRow-root *{ + padding: 10px; +} +.MuiTableRow-head>*{ + font-weight: bold!important; +} + +.Table td,th{ + border: none!important; +} + +.Table:first-child{ + border-radius: 0.7rem!important; +} + +.status{ + padding: 8px; + border-radius: 9px; +} + +.Details{ + color:rgb(0, 157, 255)!important; +} + +@media screen and (max-width: 1200px){ + .Table{ + width: 170%; + margin-top: 2rem; + } +} + +@media screen and (max-width: 768px){ + .Table{ + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 18rem; + } +} \ No newline at end of file diff --git a/src/componemts/Table/Table.jsx b/src/componemts/Table/Table.jsx new file mode 100644 index 0000000..ee60802 --- /dev/null +++ b/src/componemts/Table/Table.jsx @@ -0,0 +1,87 @@ +import * as React from "react"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; +import Paper from "@mui/material/Paper"; +import "./Table.css"; + +function createData(name, trackingId,date, status) { + return { name, trackingId,date, status }; +} + +const rows = [ + createData("Lasania Chiken Fri", 18908424, "2 March 2022", "Approved"), + createData("Big Baza Bang ", 18908424, "2 March 2022", "Pending"), + createData("Mouth Freshner", 18908424, "2 March 2022", "Approved"), + createData("Cupcake", 18908421, "2 March 2022", "Delivered"), +]; + +const makeStyles=(status)=>{ + if(status === 'Approved') + { + return { + background: 'rgb(145 254 159 / 47%)', + color: 'green', + } + } + else if(status === 'Pending') + { + return{ + background: '#ffadad8f', + color: 'red', + } + } + else{ + return{ + background: '#59bfff', + color: 'white', + } + } + } + + +export default function BasicTable() { + return ( +
+

Recent Orders

+ + +
+ + + Product + Tracking ID + Date + Status + + + + + {rows.map((row) => ( + + + {row.name} + + {row.trackingId} + {row.date} + + + {row.status} + + + Detail + + ))} + +
+ +
+ ); +} diff --git a/src/componemts/Updates/Updates.css b/src/componemts/Updates/Updates.css new file mode 100644 index 0000000..af86af0 --- /dev/null +++ b/src/componemts/Updates/Updates.css @@ -0,0 +1,24 @@ +.Updates{ + width: 85%; + background: white; + border-radius: 0.7rem; + padding: 1rem; + gap: 1rem; + display: flex; + flex-direction: column; + font-size: 13px; +} + +.update{ + display: flex; + gap: 0.5rem; +} + +.update img{ + height: 3.2rem; + width: 3rem; +} + +.noti div span:nth-of-type(1){ + font-weight: bold; +} \ No newline at end of file diff --git a/src/componemts/Updates/Updates.jsx b/src/componemts/Updates/Updates.jsx new file mode 100644 index 0000000..6132827 --- /dev/null +++ b/src/componemts/Updates/Updates.jsx @@ -0,0 +1,28 @@ +import React from 'react' +import './Updates.css' +import { UpdatesData } from '../../Data/Data' +const Updates = () => { + return ( +
+ {UpdatesData.map((update)=>{ + return( +
+ +
+
+ {update.name} + {update.noti} +
+ {update.time} +
+ + + +
+ ) + })} +
+ ) +} + +export default Updates \ No newline at end of file diff --git a/src/componemts/sidebar/Sidebar.css b/src/componemts/sidebar/Sidebar.css index 3beb102..2be1621 100644 --- a/src/componemts/sidebar/Sidebar.css +++ b/src/componemts/sidebar/Sidebar.css @@ -59,4 +59,58 @@ width: 8px; height: 100%; background: var(--pink); + margin-right: calc(1rem - 8px); +} + +.menu .menuItem:last-child{ + position: absolute; + bottom: 2.3rem; + width: 100%; +} + +.bars{ + display: none; +} + +@media screen and (max-width: 1200px){ + .menuItem span{ + display: none; + } + .logo{ + display: none; + } +} + +@media screen and (max-width: 768px){ + .Sidebar{ + position: fixed; + z-index: 9; + background: #ffe0e0; + width: 55%; + padding-right: 1rem; + height: 100%; + } + + .menuItem span{ + display: block; + } + + .logo{ + display: flex; + } + + .menu .menuItem:last-child{ + position: relative; + margin-top: 2rem; + } + + .bars{ + display: flex; + position: fixed; + top: 2rem; + z-index: 9px; + background: #ffe0e0; + padding: 10px; + border-radius: 10px; + } } \ No newline at end of file diff --git a/src/componemts/sidebar/Sidebar.jsx b/src/componemts/sidebar/Sidebar.jsx index 86283bb..312961d 100644 --- a/src/componemts/sidebar/Sidebar.jsx +++ b/src/componemts/sidebar/Sidebar.jsx @@ -1,14 +1,33 @@ import React, { useState } from 'react' import Logo from '../../imgs/logo.png'; import './Sidebar.css'; - -import {UilSignOutAlt} from '@iconscout/react-unicons'; +import {motion} from 'framer-motion'; +import {UilSignOutAlt,UilBars} from '@iconscout/react-unicons'; import {SidebarData} from '../../Data/Data.js'; const Sidebar = () => { const [selected,setSelected]=useState(0); + const [expanded,setExpanded]=useState(true); + + const sideBarVariants={ + ture:{ + left:'0' + }, + false:{ + left:'-60%' + } + } return ( -
+ <> +
setExpanded(!expanded)} + > + +
+ {/*logo */}
@@ -31,8 +50,8 @@ const Sidebar = () => {
- - + + ) } diff --git a/src/index.js b/src/index.js index 8630c8c..77fb42d 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,3 @@ ReactDOM.render( , document.getElementById('root') ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals