added expired jobs screen to admin settings tab

src/components/Header/styles.tsx

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
-    width: '100%', 
+    width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
   },
@@ -12,9 +12,9 @@ export default StyleSheet.create({
     fontFamily: 'DMSans_700Bold',
   },
   headerStyle: {
-    backgroundColor: 'white', 
-    height: 125, 
+    backgroundColor: 'white',
+    height: 125,
     borderBottomColor: 'black',
     borderBottomWidth: StyleSheet.hairlineWidth,
-  }
+  },
 });

src/navigation/stacks/AdminSettingsStackNavigator.tsx

@@ -1,20 +1,35 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
+import Header from '../../components/Header/Header';
+import styles from '../../components/Header/styles';
 import AccessScreen from '../../screens/AdminSettings/Access/AccessScreen';
 import AdminSettingsScreen from '../../screens/AdminSettings/AdminSettings/AdminSettingsScreen';
+import ExpiredJobsScreen from '../../screens/AdminSettings/ExpiredJobs/ExpiredJobs';
 import { AdminSettingsStackParamList } from '../../types/navigation';
 
-const AdminSettingsStack = createNativeStackNavigator<AdminSettingsStackParamList>();
+const AdminSettingsStack =
+  createNativeStackNavigator<AdminSettingsStackParamList>();
+
+function ExpiredJobsHeader() {
+  return <Header title="Expired Jobs" />;
+}
 
 export default function AdminSettingsStackNavigator() {
   return (
-    <AdminSettingsStack.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
-      <AdminSettingsStack.Screen name="AdminSettingsScreen" component={AdminSettingsScreen} />
+    <AdminSettingsStack.Navigator>
+      <AdminSettingsStack.Screen
+        name="AdminSettingsScreen"
+        component={AdminSettingsScreen}
+      />
       <AdminSettingsStack.Screen name="AccessScreen" component={AccessScreen} />
+      <AdminSettingsStack.Screen
+        name="ExpiredJobsScreen"
+        component={ExpiredJobsScreen}
+        options={{
+          headerTitle: ExpiredJobsHeader,
+          headerStyle: styles.headerStyle,
+        }}
+      />
     </AdminSettingsStack.Navigator>
   );
 }

src/screens/AdminSettings/AdminSettings/AdminSettingsScreen.tsx

@@ -6,7 +6,9 @@ import { signUserOut } from '../../../firebase/auth';
 import { AdminSettingsStackScreenProps } from '../../../types/navigation';
 import styles from './styles';
 
-function AdminSettingsScreen({navigation}: AdminSettingsStackScreenProps<'AdminSettingsScreen'>): ReactElement {
+function AdminSettingsScreen({
+  navigation,
+}: AdminSettingsStackScreenProps<'AdminSettingsScreen'>): ReactElement {
   const { dispatch } = useContext(AuthContext);
 
   return (
@@ -29,6 +31,12 @@ function AdminSettingsScreen({navigation}: AdminSettingsStackScreenProps<'AdminS
         buttonStyle={{ width: '45%', height: '5%' }}
         textStyle={{}}
       />
+      <StyledButton
+        text="Expired Jobs"
+        onPress={() => navigation.navigate('ExpiredJobsScreen')}
+        buttonStyle={{ width: '45%', height: '5%' }}
+        textStyle={{}}
+      />
     </View>
   );
 }

src/screens/AdminSettings/ExpiredJobs/ExpiredJobs.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import useFirestoreListener from 'react-firestore-listener';
+import { SafeAreaView, ScrollView, Text } from 'react-native';
+import JobCard from '../../../components/JobCard/JobCard';
+import { AdminSettingsStackScreenProps } from '../../../types/navigation';
+import { Job } from '../../../types/types';
+import styles from './styles';
+
+function ExpiredJobsScreen({
+  navigation,
+}: AdminSettingsStackScreenProps<'ExpiredJobsScreen'>) {
+  const expiredJobs = useFirestoreListener<Job>({
+    collection: 'expiredJobs',
+  });
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          alignItems: 'center',
+          width: '100%',
+        }}
+      >
+        {expiredJobs.map(job => (
+          <JobCard
+            job={job}
+            key={job.id}
+            pending
+            bookmarkedJobs={null}
+            setBookmarkedJobs={null}
+          />
+        ))}
+        {expiredJobs.length === 0 && (
+          <Text style={{ marginTop: '10%' }}>
+            No expired jobs currently!
+          </Text>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default ExpiredJobsScreen;

src/screens/AdminSettings/ExpiredJobs/styles.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    flex: 1,
+    backgroundColor: '#fff',
+    flexDirection: 'column',
+  },
+
+  feedHeader: {
+    height: '20%',
+    width: '100%',
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    flexDirection: 'row',
+  },
+  feedTitle: {
+    color: '#49260C',
+    fontSize: 28,
+    fontFamily: 'DMSans_700Bold',
+  },
+  redSquare: {
+    height: '50%',
+    width: '20%',
+    backgroundColor: 'red',
+    borderRadius: 3,
+  },
+  footer: {
+    height: '5%',
+    width: '100%',
+  },
+});

src/types/navigation.tsx

@@ -2,12 +2,16 @@ import { MaterialBottomTabNavigationProp } from '@react-navigation/material-bott
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 
 export type AuthStackParamList = {
-  EmailPasswordRegisterScreen: { phoneNumber: string, userType: string };
+  EmailPasswordRegisterScreen: { phoneNumber: string; userType: string };
   EmployerRegisterScreen: { phoneNumber: string };
   AdminSigninScreen: undefined;
   PhoneNumberScreen: { userType: string };
   SigninScreen: undefined;
-  VerificationScreen: { verificationId: string; phoneNumber: string, userType: string };
+  VerificationScreen: {
+    verificationId: string;
+    phoneNumber: string;
+    userType: string;
+  };
   UserTypeScreen: undefined;
   WelcomeScreen: undefined;
 };
@@ -41,10 +45,12 @@ export type AdminSettingsStackParamList = {
   AdminSettingsScreen: undefined;
   AccessScreen: undefined;
   EmployerApprovalScreen: undefined;
+  ExpiredJobsScreen: undefined;
 };
 
-export type AdminSettingsStackScreenProps<T extends keyof AdminSettingsStackParamList> =
-  NativeStackScreenProps<AdminSettingsStackParamList, T>;
+export type AdminSettingsStackScreenProps<
+  T extends keyof AdminSettingsStackParamList,
+> = NativeStackScreenProps<AdminSettingsStackParamList, T>;
 
 export type BookmarksStackParamList = {
   BookmarksScreen: undefined;