first commit

2023-10-14 22:02:57 -04:00
commit 5f95d857d4
783 changed files with 112323 additions and 0 deletions
@@ -0,0 +1,80 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Typography from "@mui/material/Typography";
+import ProgressBar from "@ramonak/react-progress-bar";
+
+const IncomeStatus = () => {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            mb: "30px",
+          }}
+        >
+          <Box>
+            <i
+              className="ri-money-dollar-circle-line"
+              style={{
+                backgroundColor: "#757fef",
+                color: "#fff",
+                textAlign: "center",
+                position: "relative",
+                borderRadius: "5px",
+                fontSize: "25px",
+                height: "50px",
+                width: "50px",
+                lineHeight: "50px",
+                display: "inline-block",
+              }}
+            ></i>
+          </Box>
+
+          <Box sx={{ textAlign: "right" }}>
+            <Typography as="h1" sx={{ fontSize: 28, fontWeight: 700 }}>
+              $31,570
+            </Typography>
+            <Typography as="p">Income Status</Typography>
+          </Box>
+        </Box>
+
+        <Box>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              mb: "8px",
+            }}
+          >
+            <Typography as="p" sx={{ fontSize: 14, fontWeight: 500 }}>
+              Income Target
+            </Typography>
+            <Typography as="p">$180548.00</Typography>
+          </Box>
+
+          <ProgressBar
+            completed={50}
+            height="5px"
+            labelSize="0px"
+            baseBgColor="#E9EFFC"
+            bgColor="#757FEF"
+          />
+        </Box>
+      </Card>
+    </>
+  );
+};
+
+export default IncomeStatus;