From 4d8d529f452bf71c3cc570a1efe79b126c008a8e Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Wed, 3 Jul 2024 20:42:39 -0700
Subject: [PATCH] Added the 4 boxes at the top.

---
 Client/src/Pages/Details/index.jsx | 44 ++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/Client/src/Pages/Details/index.jsx b/Client/src/Pages/Details/index.jsx
index aee82db55..a3061cbe2 100644
--- a/Client/src/Pages/Details/index.jsx
+++ b/Client/src/Pages/Details/index.jsx
@@ -80,6 +80,50 @@ export default function CustomizedTables() {
         },
       }}
     >
+      <Box sx={{ display: 'flex', justifyContent: 'space-around', marginBottom: theme.spacing(4) }}>
+        {[...Array(4)].map((_, index) => (
+          <Box
+            key={index}
+            sx={{
+              width: '223.35px',
+              height: '87px',
+              borderRadius: '4px',
+              border: '1px solid',
+              borderColor: '#EAECF0',
+              padding: theme.spacing(1),
+              textAlign: 'left',
+              boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
+              backdropFilter: 'blur(2px)',
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                fontFamily: 'Roboto',
+                fontWeight: 400,
+                fontSize: '16px',
+                lineHeight: '24px',
+                color: '#1570EF',
+                marginBottom: theme.spacing(1),
+              }}
+            >
+              Currently up for
+            </Typography>
+            <Typography
+              variant="body1"
+              sx={{
+                fontFamily: 'Roboto',
+                fontWeight: 600,
+                fontSize: '13px',
+                lineHeight: '20px',
+                color: '#344054',
+              }}
+            >
+              4h 30m 2s
+            </Typography>
+          </Box>
+        ))}
+      </Box>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: theme.spacing(2) }}>
         <Typography variant="h6" component="div" sx={{ fontWeight: 600, fontSize: 16 }}>
           History