static view completed

SaiMun92 · Apr 12, 2022 · ccd99b5 · ccd99b5
1 parent 06985f8
commit ccd99b5
Show file tree

Hide file tree

Showing 21 changed files with 878 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@iconscout/react-unicons": "^1.1.6",
+    "@mui/material": "^5.6.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "apexcharts": "^3.35.0",
+    "framer-motion": "^6.2.9",
     "react": "^18.0.0",
+    "react-apexcharts": "^1.4.0",
     "react-circular-progressbar": "^2.0.4",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",

diff --git a/src/App.css b/src/App.css
@@ -34,4 +34,5 @@
   border-radius: 2rem;
   gap: 16px;
   grid-template-columns: 11rem auto 20rem;
+  overflow: hidden;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,6 @@
 import './App.css'
 import MainDash from './components/MainDash/MainDash';
+import RightSide from './components/RigtSide/RightSide';
 import Sidebar from './components/Sidebar';
 
 function App() {
@@ -8,6 +9,7 @@ function App() {
       <div className="AppGlass">
         <Sidebar/>
         <MainDash/>
+        <RightSide/>
       </div>
     </div>
   );

diff --git a/src/Data/Data.js b/src/Data/Data.js
@@ -1,4 +1,12 @@
-import { UilUsdSquare, UilMoneyWithdrawal, UilClipboardAlt } from "@iconscout/react-unicons";
+import {
+  UilUsdSquare,
+  UilMoneyWithdrawal,
+  UilClipboardAlt,
+} from "@iconscout/react-unicons";
+
+import img1 from "../imgs/img1.png";
+import img2 from "../imgs/img2.png";
+import img3 from "../imgs/img3.png";
 
 export const cardsData = [
   {
@@ -10,6 +18,12 @@ export const cardsData = [
     barValue: 70,
     value: "25,970",
     png: UilUsdSquare,
+    series: [
+      {
+        name: "Sales",
+        data: [31, 40, 28, 51, 42, 109, 100],
+      },
+    ],
   },
   {
     title: "Revenue",
@@ -20,15 +34,52 @@ export const cardsData = [
     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%)",
+      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],
+      },
+    ],
+  },
+];
+
+
+
+
+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",
+  }
+];
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
@@ -1,10 +1,15 @@
-.card {
+.CompactCard {
     display: flex;
     flex: 1;
     height: 7rem !important;
     border-radius: 0.7rem;
     color: white;
     padding: 1rem;
+    position: relative;
+    cursor: pointer;
+  }
+  .CompactCard:hover{
+    box-shadow: none!important;
   }
 
   /* radial bar */
@@ -53,3 +58,40 @@
     font-size: 12px;
   }
 
+
+
+
+
+  /* ExpandedCard */
+.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-around;
+  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: rgb(236, 236, 236);
+  font-size: 15px;
+}
+
+
+
+.chartContainer{
+  width: 70%;
+}
+
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -2,32 +2,126 @@ import React, { useState } from "react";
 import "./Card.css";
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
-const Card = (props) => {
-  const Png = props.png;
+import { motion, AnimateSharedLayout } from "framer-motion";
+import { UilTimes } from "@iconscout/react-unicons";
+import Chart from "react-apexcharts";
 
+// parent Card
 
+const Card = (props) => {
+  const [expanded, setExpanded] = useState(false);
   return (
-    <div
-      className="card"
+    <AnimateSharedLayout>
+      {expanded ? (
+        <ExpandedCard param={props} setExpanded={() => setExpanded(false)} />
+      ) : (
+        <CompactCard param={props} setExpanded={() => setExpanded(true)} />
+      )}
+    </AnimateSharedLayout>
+  );
+};
+
+// Compact Card
+function CompactCard({ param, setExpanded }) {
+  const Png = param.png;
+  return (
+    <motion.div
+      className="CompactCard"
       style={{
-        background: props.color.backGround,
-        boxShadow: props.color.boxShadow,
+        background: param.color.backGround,
+        boxShadow: param.color.boxShadow,
       }}
+      layoutId="expandableCard"
+      onClick={setExpanded}
     >
       <div className="radialBar">
         <CircularProgressbar
-          value={props.barValue}
-          text={`${props.barValue}%`}
+          value={param.barValue}
+          text={`${param.barValue}%`}
         />
-        <span>{props.title}</span>
+        <span>{param.title}</span>
       </div>
       <div className="detail">
         <Png />
-        <span>${props.value}</span>
+        <span>${param.value}</span>
         <span>Last 24 hours</span>
       </div>
-    </div>
+    </motion.div>
   );
-};
+}
+
+// Expanded Card
+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 (
+    <motion.div
+      className="ExpandedCard"
+      style={{
+        background: param.color.backGround,
+        boxShadow: param.color.boxShadow,
+      }}
+      layoutId="expandableCard"
+    >
+      <div style={{ alignSelf: "flex-end", cursor: "pointer", color: "white" }}>
+        <UilTimes onClick={setExpanded} />
+      </div>
+        <span>{param.title}</span>
+      <div className="chartContainer">
+        <Chart options={data.options} series={param.series} type="area" />
+      </div>
+      <span>Last 24 hours</span>
+    </motion.div>
+  );
+}
 
 export default Card;
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
@@ -9,15 +9,16 @@ const Cards = () => {
     <div className="Cards">
       {cardsData.map((card, id) => {
         return (
-            <div className="parentContainer" key={id}>
-              <Card
-                title={card.title}
-                color={card.color}
-                barValue={card.barValue}
-                value={card.value}
-                png={card.png}
-              />
-            </div>
+          <div className="parentContainer" key={id}>
+            <Card
+              title={card.title}
+              color={card.color}
+              barValue={card.barValue}
+              value={card.value}
+              png={card.png}
+              series={card.series}
+            />
+          </div>
         );
       })}
     </div>

diff --git a/src/components/CustomerReview/CustomerReview.css b/src/components/CustomerReview/CustomerReview.css