Welcome page and select date to view appointment

.gitignore

@@ -21,3 +21,4 @@ expo-env.d.ts
 .aider*
 build*
 android/
+ios/

README.md

@@ -28,21 +28,19 @@ This is an [Expo](https://expo.dev) project created with [`create-expo-app`](htt
 
    ### For Android
 
-   1. Build APK (For Development Only)
+   1. Start Project
 
       ```bash
-      eas build --profile development --platform android --local
+      npm run android
       ```
 
-      Here, `development` is the name of the profile in eas.json file. Adding `--local` flag will build apk locally.
-
-      Note: Will need to rebuild if any natvie code changes are made (Like new package installed).
+      This will create a development build and start the application in emulator and connected android device.
 
-   2. Start Project
+   2. If you made any changes to `app.json` that impacts the native project, modified native code or configuration or install a library from npm, you need to run prebuild command.
       ```bash
-      npm run android
+         npx expo prebuild --clean
       ```
-      This will start the application in emulator and connected android device.
+      And create a new development build following step 1.
 
    ### For iOS (TODO)
 

app/(tabs)/home.tsx

@@ -9,6 +9,9 @@ import CustomModal from '@/components/CustomModal';
 import LoginInfo from '@/components/info/loginInfo';
 import HomeInfo from '@/components/info/homeInfo';
 import FetchTokenInfo from '@/components/info/fetchTokenInfo';
+import { SecureKeyStore } from '@/services/SecureKeyStore';
+import { CustomKeyType } from '@/types/types';
+import { Redirect } from 'expo-router';
 
 const App = () => {
   // Get authentication state from AuthManager store
@@ -30,6 +33,9 @@ const App = () => {
 
   // Show if user credentials are not provided
   if (!hasUserCredentials) {
+    if (!SecureKeyStore.getKey(CustomKeyType.O19_BASE_URL)) {
+      return <Redirect href="/setting" />;
+    }
     return (
       <View style={styles.container}>
         <Login />

app/(tabs)/setting.tsx

@@ -66,6 +66,13 @@ const SettingPage = () => {
         placeholder="Enter Base Url"
         style={styles.input}
       />
+      <View>
+        <Text style={styles.paragraph}>
+          Note: Base URL required before proceeding to Login
+        </Text>
+        <Text style={styles.paragraph}>Valid URL: https://example.com</Text>
+        <Text style={styles.paragraph}>Invalid URL: https://example.com/</Text>
+      </View>
       <Button title="Save" onPress={handleSave} />
       <CustomModal title="Setting Information">
         <SettingInfo />
@@ -91,6 +98,11 @@ const styles = StyleSheet.create({
     display: 'flex',
     gap: 10,
   },
+  paragraph: {
+    color: '#666',
+    lineHeight: 22,
+    fontSize: 12,
+  },
 });
 
 export default SettingPage;

app/_layout.tsx

@@ -26,7 +26,7 @@ export default function RootLayout() {
         options={{ headerTitle: 'Patient Detail' }}
       />
 
-      <Stack.Screen name="callback" options={{ headerTitle: 'Callback' }} />
+      <Stack.Screen name="callback" options={{ headerShown: false }} />
     </Stack>
   );
 }

app/index.tsx

@@ -5,6 +5,7 @@ import { useAuthManagerStore } from '@/store/useAuthManagerStore';
 import { SecureKeyStore } from '@/services/SecureKeyStore';
 import { CustomKeyType } from '@/types/types';
 import TermsAndConditions from './termsAndCondition';
+import WelcomeScreen from './welcome';
 
 /**
  * The main application component.
@@ -21,6 +22,7 @@ const App = () => {
   const { isAuthenticated, routeToReturn } = useAuthManagerStore();
 
   const [hasAcceptedTerms, setHasAcceptedTerms] = useState<boolean>(false);
+  const [showTerms, setShowTerms] = useState<boolean>(false);
 
   // Check if the user has accepted the terms and conditions
   useEffect(() => {
@@ -31,10 +33,14 @@ const App = () => {
   // If the user is not authenticated, show the AppLocked component
   if (!isAuthenticated) return <AppLocked />;
 
-  // If the user has not accepted the terms and conditions, show the TermsAndConditions component
-  if (!hasAcceptedTerms)
+  // Clicking on the "Next" button in the Welcome Screen will show the TermsAndConditions component
+  if (!hasAcceptedTerms && showTerms)
     return <TermsAndConditions setHasAcceptedTerms={setHasAcceptedTerms} />;
 
+  // If the user has not accepted the terms and conditions, show Welcome Screen followed by TermsAndConditions component
+  if (!hasAcceptedTerms)
+    return <WelcomeScreen onNext={() => setShowTerms(true)} />;
+
   return <Redirect href={routeToReturn ? (routeToReturn as any) : '/home'} />;
 };
 

app/patient-detail/[id]/appointment.tsx

@@ -100,8 +100,8 @@ const PatientAppointment = () => {
           Appointment History
         </Text>
         <View>
-          <TouchableOpacity onPress={fetchData}>
-            <Ionicons name="refresh" size={36} color="black" />
+          <TouchableOpacity style={styles.refreshButton} onPress={fetchData}>
+            <Ionicons name="refresh" size={24} color="white" />
           </TouchableOpacity>
         </View>
       </View>
@@ -172,6 +172,11 @@ const styles = StyleSheet.create({
   table: {
     maxHeight: '42%',
   },
+  refreshButton: {
+    backgroundColor: '#007bff',
+    padding: 8,
+    borderRadius: 8,
+  },
 });
 
 export default PatientAppointment;

app/welcome.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { SafeAreaView, Text, StyleSheet, View, Button } from 'react-native';
+
+interface WelcomeScreenProps {
+  onNext: () => void;
+}
+
+/**
+ * WelcomeScreen component displays a welcome message and an overview of the Open-O-Connect app's features.
+ *
+ * @component
+ * @param {WelcomeScreenProps} props - The props for the WelcomeScreen component.
+ * @param {function} props.onNext - Callback function to be called when the "Next" button is pressed.
+ *
+ * @returns {JSX.Element} The rendered WelcomeScreen component.
+ *
+ * @example
+ * <WelcomeScreen onNext={handleNext} />
+ *
+ * @remarks
+ * This screen provides an introduction to the app and lists the main features available to the user.
+ * It also includes a note about the info button available on each screen for additional help.
+ */
+const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ onNext }) => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.title}>Welcome to Open-O-Connect</Text>
+      <Text style={styles.description}>
+        Open-O-Connect is a mobile app that integrates with O19, making it
+        easier for users to access O19's functions on their cell phones. Our
+        current features include:
+      </Text>
+      <View style={styles.featuresList}>
+        <Text style={styles.feature}>1. View today's appointments</Text>
+        <Text style={styles.feature}>
+          2. Access patient information and their appointment history
+        </Text>
+        <Text style={styles.feature}>
+          3. Upload pictures to patient demographics
+        </Text>
+      </View>
+      <Text style={styles.note}>
+        On each screen, there is an info button in the top right corner. Use
+        this button to get information about the current screen's functionality.
+      </Text>
+      <View style={styles.buttonContainer}>
+        <Button title="Next" onPress={onNext} />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 30,
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    color: '#333',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#6c757d',
+    marginBottom: 20,
+  },
+  description: {
+    fontSize: 16,
+    color: '#333',
+    marginBottom: 20,
+    lineHeight: 22,
+  },
+  featuresList: {
+    alignItems: 'flex-start',
+    marginBottom: 20,
+  },
+  feature: {
+    fontSize: 16,
+    color: '#333',
+    marginBottom: 10,
+  },
+  note: {
+    fontSize: 14,
+    color: '#6c757d',
+    marginBottom: 20,
+    lineHeight: 20,
+  },
+  buttonContainer: {
+    width: '100%',
+    paddingHorizontal: 40,
+  },
+});
+
+export default WelcomeScreen;