From dc51e613961bf13b5a82b0aa8cde015c72e96e88 Mon Sep 17 00:00:00 2001
From: Starstrike <ryderjj89@outlook.com>
Date: Thu, 1 May 2025 12:32:43 -0400
Subject: [PATCH] Improve UI: Add event details to admin/view pages and fix
 items layout

---
 frontend/src/components/EventAdmin.tsx | 15 ++++++++++++++-
 frontend/src/components/EventView.tsx  | 14 +++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/EventAdmin.tsx b/frontend/src/components/EventAdmin.tsx
index 408fd6d..82d774f 100644
--- a/frontend/src/components/EventAdmin.tsx
+++ b/frontend/src/components/EventAdmin.tsx
@@ -412,6 +412,18 @@ const EventAdmin: React.FC = () => {
             </Button>
           </Box>
 
+          <Box sx={{ mb: 4 }}>
+            <Typography variant="body1" paragraph>
+              {event.description}
+            </Typography>
+            <Typography variant="subtitle1" gutterBottom>
+              <strong>Location:</strong> {event.location}
+            </Typography>
+            <Typography variant="subtitle1" gutterBottom>
+              <strong>Date:</strong> {new Date(event.date).toLocaleString()}
+            </Typography>
+          </Box>
+
           {/* Add items status section */}
           <Box sx={{ mb: 4 }}>
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
@@ -426,7 +438,8 @@ const EventAdmin: React.FC = () => {
                 Manage Items
               </Button>
             </Box>
-            <Box sx={{ display: 'flex', gap: 4 }}>
+            
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: '60%' }}>
               <Box>
                 <Typography variant="subtitle1" gutterBottom>
                   Still Needed:
diff --git a/frontend/src/components/EventView.tsx b/frontend/src/components/EventView.tsx
index 3ab1329..b13fd85 100644
--- a/frontend/src/components/EventView.tsx
+++ b/frontend/src/components/EventView.tsx
@@ -164,11 +164,23 @@ const EventView: React.FC = () => {
             </Button>
           </Box>
 
+          <Box sx={{ mb: 4 }}>
+            <Typography variant="body1" paragraph>
+              {event.description}
+            </Typography>
+            <Typography variant="subtitle1" gutterBottom>
+              <strong>Location:</strong> {event.location}
+            </Typography>
+            <Typography variant="subtitle1" gutterBottom>
+              <strong>Date:</strong> {new Date(event.date).toLocaleString()}
+            </Typography>
+          </Box>
+
           <Box sx={{ mb: 4 }}>
             <Typography variant="h6" gutterBottom>
               Items Status
             </Typography>
-            <Box sx={{ display: 'flex', gap: 4 }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: '60%' }}>
               <Box>
                 <Typography variant="subtitle1" gutterBottom>
                   Still Needed: