temp

frontend/src/components/BasicInputs.jsx

@@ -4,20 +4,35 @@ import PropTypes from "prop-types";
 
 const BasicInputs = (props) => {
   const { items = [] } = props;
+
+  // Divide the items into chunks of 4
+  const chunkedItems = [];
+  for (let i = 0; i < items.length; i += 4) {
+    chunkedItems.push(items.slice(i, i + 4));
+  }
+
   return (
     <div>
-      {items.map((chunk, index) => (
-        <Box display="flex" flexWrap="wrap" key={index}>
-          {chunk.map((key) => (
+      {chunkedItems.map((chunk, rowIndex) => (
+        <Box
+          display="flex"
+          flexWrap="wrap"
+          key={rowIndex}
+          sx={{
+            marginBottom: "10px", // Add some spacing between rows
+          }}
+        >
+          {chunk.map((label, colIndex) => (
             <TextField
-              key={key}
-              label={key}
-              id="outlined-basic"
+              key={colIndex}
+              id={`outlined-basic-${rowIndex}-${colIndex}`}
+              label={label}
               variant="outlined"
               size="small"
               sx={{
-                mt: 2,
+                mt: 1,
                 marginRight: "10px",
+                minWidth: "150px", // Adjust the width as needed
               }}
             />
           ))}

frontend/src/components/StatBox.jsx

@@ -0,0 +1,50 @@
+import PropTypes from "prop-types"; // Import prop-types
+
+import { Box, Typography, useTheme } from "@mui/material";
+import { colorSettings } from "../theme";
+
+const StatBox = ({ title, subtitle, icon, increase }) => {
+  const theme = useTheme();
+  const colors = colorSettings(theme.palette.mode);
+
+  return (
+    <Box width="100%" m="0 30px">
+      <Box display="flex" justifyContent="space-between">
+        <Box>
+          {icon}
+          <Typography
+            variant="h4"
+            fontWeight="bold"
+            sx={{ color: colors.grey[100] }}
+          >
+            {title}
+          </Typography>
+        </Box>
+      </Box>
+      <Box></Box>
+      <Box display="flex" justifyContent="space-between">
+        <Typography variant="h5" sx={{ color: colors.greenAccent[100] }}>
+          {subtitle}
+        </Typography>
+        <Typography
+          variant="h4"
+          fontStyle="italic"
+          sx={{ color: colors.greenAccent[600] }}
+        >
+          {increase}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+// Add prop validation using PropTypes
+StatBox.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  icon: PropTypes.element.isRequired,
+  progress: PropTypes.number, // Change the type according to your needs
+  increase: PropTypes.number, // Change the type according to your needs
+};
+
+export default StatBox;

frontend/src/pages/sgsim/index.jsx

@@ -1,14 +1,29 @@
-import { Box, Button, useTheme } from "@mui/material";
+import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
 import { colorSettings } from "../../theme";
 
 import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";
 
+// import PointOfSaleIcon from "@mui/icons-material/PointOfSale";
+import PersonAddIcon from "@mui/icons-material/PersonAdd";
+// import TrafficIcon from "@mui/icons-material/Traffic";
+import InputIcon from "@mui/icons-material/Input";
 import Header from "../../components/Header";
 import Footer from "../../components/Footer";
 
+import FormBox from "../../components/FormBox";
+// import StatBox from "../../components/StatBox";
+
 const Dashboard = () => {
   const theme = useTheme();
   const colors = colorSettings(theme.palette.mode);
+  const forms = [
+    "Realizations Number",
+    "Model Size (X)",
+    "Kriging Range",
+    "Kriging Sill",
+    "Covariance Model",
+  ];
+  const cores = ["Python", "C"];
 
   return (
     <Box m="20px">
@@ -29,10 +44,128 @@ const Dashboard = () => {
             }}
           >
             <DownloadOutlinedIcon sx={{ mr: "10px" }} />
-            Download
+            Download Reports
           </Button>
         </Box>
       </Box>
+
+      {/* GRID & CHARTS */}
+      <Box
+        display="grid"
+        gridTemplateColumns="repeat(12, 1fr)"
+        gridAutoRows="140px"
+        gap="20px"
+      >
+        {/* ROW 1 */}
+        <Box
+          gridColumn="span 8"
+          gridRow="span 2"
+          backgroundColor={colors.primary[400]}
+          display="flex"
+          alignItems="top"
+          justifyContent="center"
+        >
+          <FormBox
+            title="Parameters"
+            inputItems={forms}
+            selectMenus={cores}
+            icon={
+              <InputIcon
+                sx={{ color: colors.greenAccent[600], fontSize: "26px" }}
+              />
+            }
+          />
+          <Box
+            mr="10px"
+            mt="200px"
+            display="flex"
+            justifyContent="top"
+            alignItems="center"
+          >
+            <Button
+              variant="contained"
+              sx={{
+                backgroundColor: colors.primary[300],
+                color: colors.primary[100],
+                fontSize: "10px",
+                fontWeight: "bold",
+              }}
+            >
+              Run
+            </Button>
+          </Box>
+        </Box>
+
+        <Box
+          gridColumn="span 4"
+          gridRow="span 2"
+          backgroundColor={colors.primary[400]}
+          display="flex"
+          alignItems="top"
+          justifyContent="left"
+        >
+          <FormBox
+            title="History"
+            icon={
+              <PersonAddIcon
+                sx={{ color: colors.greenAccent[600], fontSize: "26px" }}
+              />
+            }
+          />
+        </Box>
+
+        {/* ROW 2 */}
+        <Box
+          gridColumn="span 8"
+          gridRow="span 4"
+          backgroundColor={colors.primary[400]}
+        >
+          <Box
+            mt="25px"
+            p="0 30px"
+            display="flex "
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <Box>
+              <Typography
+                variant="h3"
+                fontWeight="600"
+                color={colors.grey[100]}
+              >
+                Results
+              </Typography>
+            </Box>
+            <Box>
+              <IconButton>
+                <DownloadOutlinedIcon
+                  sx={{ fontSize: "26px", color: colors.greenAccent[500] }}
+                />
+              </IconButton>
+            </Box>
+          </Box>
+          <Box height="250px" m="-20px 0 0 0"></Box>
+        </Box>
+        <Box
+          gridColumn="span 4"
+          gridRow="span 4"
+          backgroundColor={colors.primary[400]}
+          overflow="auto"
+        >
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            borderBottom={`4px solid ${colors.primary[500]}`}
+            colors={colors.grey[100]}
+            p="15px"
+          >
+            <Typography color={colors.grey[100]} variant="h5" fontWeight="600">
+              Statistic Results
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
       <Footer />
     </Box>
   );