first commit

2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
@@ -0,0 +1,132 @@
+import React from "react";
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { BarChart, Bar, XAxis, Tooltip, ResponsiveContainer } from "recharts";
+
+const data = [
+  {
+    name: "Sat",
+    income: 24,
+  },
+  {
+    name: "Sun",
+    income: 13,
+  },
+  {
+    name: "Mon",
+    income: 98,
+  },
+  {
+    name: "Tue",
+    income: 39,
+  },
+  {
+    name: "Wed",
+    income: 48,
+  },
+  {
+    name: "Thu",
+    income: 38,
+  },
+  {
+    name: "Fri",
+    income: 43,
+  },
+];
+
+const NetIncome = () => {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "30px 20px 20px",
+          mb: "15px",
+        }}
+      >
+        <Grid
+          container
+          alignItems="center"
+          rowSpacing={1}
+          columnSpacing={{ xs: 1, sm: 2, md: 2 }}
+        >
+          <Grid item xs={12} md={12} lg={6}>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <Box
+                sx={{
+                  width: "46px",
+                  height: "54px",
+                  lineHeight: "54px",
+                  borderRadius: "8px",
+                  fontSize: "25px",
+                  background: "#FFFFFF",
+                  boxShadow: "0px 4px 20px rgba(117, 127, 239, 0.15)",
+                  color: "#757FEF",
+                  textAlign: "center",
+                }}
+                className="mr-15px"
+              >
+                <i className="ri-bar-chart-fill"></i>
+              </Box>
+
+              <Box>
+                <Typography variant="p" sx={{ fontSize: 12 }}>
+                  Net Income
+                </Typography>
+                <Typography
+                  variant="h1"
+                  sx={{ fontSize: 20, fontWeight: 700, mt: "5px" }}
+                >
+                  $438.5k
+                </Typography>
+              </Box>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} md={12} lg={6}>
+            <ResponsiveContainer width="100%" aspect={2.0 / 0.9}>
+              <BarChart
+                width={500}
+                height={300}
+                data={data}
+                margin={{
+                  top: 5,
+                  right: 10,
+                  left: 10,
+                  bottom: 5,
+                }}
+                barSize={8}
+              >
+                <XAxis
+                  dataKey="name"
+                  scale="point"
+                  fontSize={9}
+                  stroke="#A9A9C8"
+                />
+
+                <Tooltip wrapperStyle={{ fontSize: "14px" }} />
+
+                <Bar
+                  dataKey="income"
+                  fill="#757FEF"
+                  background={{ fill: "#DBDFF1" }}
+                  unit="k"
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </Grid>
+        </Grid>
+      </Card>
+    </>
+  );
+};
+
+export default NetIncome;