No Application Message on Tables for Admins and Recruiters

apps/frontend/src/features/applications/components/ApplicationTables/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { DataGrid, GridRowParams } from '@mui/x-data-grid';
 import { useNavigate } from 'react-router-dom';
-import { Container, Typography, Stack } from '@mui/material';
+import { Container, Typography, Stack, Box } from '@mui/material';
 
 import {
   ApplicationRow,
@@ -20,12 +20,14 @@ import { useApplicationData } from '@shared/hooks/useApplicationData';
 export function ApplicationTable() {
   const navigate = useNavigate();
   const { token: accessToken } = useLoginContext();
-  const { data } = useApplicationData(accessToken);
+  const { data, isLoading, error } = useApplicationData(accessToken);
   const [allRecruiters] = useState<AssignedRecruiter[]>([]);
 
   const handleRowClick = (params: GridRowParams<ApplicationRow>) => {
     navigate(`/applications/${params.row.userId}`);
   };
+  const showEmpty = !isLoading && !error && data.length === 0;
+
   return (
     <Container maxWidth="xl">
       <Stack direction="row" alignItems="center" spacing={2} mt={4} mb={8}>
@@ -38,19 +40,38 @@ export function ApplicationTable() {
           Database | {getCurrentSemester()} {getCurrentYear()} Recruitment Cycle
         </Typography>
       </Stack>
-      <DataGrid
-        rows={data}
-        columns={applicationColumns(allRecruiters)}
-        initialState={{
-          pagination: {
-            paginationModel: defaultPaginationModel,
-          },
-        }}
-        pageSizeOptions={defaultPageSizeOptions}
-        onRowClick={handleRowClick}
-        disableRowSelectionOnClick
-        sx={{ cursor: 'pointer' }}
-      />
+      {showEmpty ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 300,
+            border: '1px dashed rgba(255,255,255,0.2)',
+            borderRadius: 2,
+            color: 'rgba(255,255,255,0.85)',
+            background: 'rgba(255,255,255,0.02)',
+          }}
+        >
+          <Typography variant="h6" sx={{ fontWeight: 500 }}>
+            There are no applications at this time
+          </Typography>
+        </Box>
+      ) : (
+        <DataGrid
+          rows={data}
+          columns={applicationColumns(allRecruiters)}
+          initialState={{
+            pagination: {
+              paginationModel: defaultPaginationModel,
+            },
+          }}
+          pageSizeOptions={defaultPageSizeOptions}
+          onRowClick={handleRowClick}
+          disableRowSelectionOnClick
+          sx={{ cursor: 'pointer' }}
+        />
+      )}
     </Container>
   );
 }

apps/frontend/src/features/applications/components/ApplicationTables/individualApplication.tsx

@@ -303,7 +303,9 @@ const IndividualApplicationDetails = ({
                   {isAdmin ? (
                     <AssignedRecruiters
                       applicationId={selectedApplication.id}
-                      assignedRecruiters={selectedApplication.assignedRecruiters}
+                      assignedRecruiters={
+                        selectedApplication.assignedRecruiters
+                      }
                     />
                   ) : (
                     <Typography sx={{ color: '#fff', mt: 1 }}>
@@ -514,4 +516,4 @@ const IndividualApplicationDetails = ({
   );
 };
 
-export default IndividualApplicationDetails;
+export default IndividualApplicationDetails;