diff --git a/.d.ts b/.d.ts new file mode 100644 index 0000000..833d580 --- /dev/null +++ b/.d.ts @@ -0,0 +1,2 @@ +declare module "react-native-paystack-webview"; +declare module "naija-state-local-government"; diff --git a/.expo-shared/README.md b/.expo-shared/README.md new file mode 100644 index 0000000..e9e5318 --- /dev/null +++ b/.expo-shared/README.md @@ -0,0 +1,11 @@ +> Why do I have a folder named ".expo-shared" in my project? + +The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize". + +> What does the "assets.json" file contain? + +The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again. + +> Should I commit the ".expo-shared" folder? + +Yes, you should share the ".expo-shared" folder with your collaborators. diff --git a/.expo-shared/assets.json b/.expo-shared/assets.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.expo-shared/assets.json @@ -0,0 +1 @@ +{} diff --git a/App.js b/App.js index 85a1bf4..745fcff 100644 --- a/App.js +++ b/App.js @@ -1,49 +1,307 @@ -import { DefaultTheme, NavigationContainer } from "@react-navigation/native"; -import { createNativeStackNavigator } from "@react-navigation/native-stack"; -import { useFonts } from "expo-font"; -// import * as SplashScreen from "expo-splash-screen"; -// import { useCallback } from "react"; -import { Onboard } from "./screens"; - -// SplashScreen.preventAutoHideAsync(); -const Stack = createNativeStackNavigator(); -const theme = { - ...DefaultTheme, - colors: { - ...DefaultTheme.colors, - background: "transparent", - }, -}; -export default function App() { - const [fontsLoaded] = useFonts({ - ManropeExtralight: require("./assets/fonts/Manrope-ExtraLight.ttf"), - ManropeLight: require("./assets/fonts/Manrope-Light.ttf"), - ManropeRegular: require("./assets/fonts/Manrope-Regular.ttf"), - ManropeMedium: require("./assets/fonts/Manrope-Medium.ttf"), - ManropeSemibold: require("./assets/fonts/Manrope-SemiBold.ttf"), - ManropeBold: require("./assets/fonts/Manrope-Bold.ttf"), - ManropeExtrBold: require("./assets/fonts/Manrope-ExtraBold.ttf"), - }); - // useCallback(async () => { - // if (fontsLoaded) { - // await SplashScreen.hideAsync(); - // } - // }, [fontsLoaded]); - - if (!fontsLoaded) { - return null; - } - - return ( - - - {/* Add screen stack here 👇*/} - {/* =================================================== */} - - - - ); -} +import { DefaultTheme, NavigationContainer } from "@react-navigation/native"; +import { createNativeStackNavigator } from "@react-navigation/native-stack"; +import { useFonts } from "expo-font"; +import { GestureHandlerRootView } from "react-native-gesture-handler"; +import { GlobalizeProvider } from "react-native-globalize"; +import { loadCldr } from "react-native-globalize"; +import { Dash } from "./components/seed/BottomTab"; +import BottomTab from "./components/seed/BottomTab"; +loadCldr(require("react-native-globalize/locale-data/en-NG")); +import { + AmbulanceForm, + AmbulanceSummary, + AmbulanceTime, + BlogDetails, + BlogHome, + Conversation, + Dashboard, + ForumDetails, + Forums, + FundWallet, + Home, + HospitalAppointment, + HospitalDirection, + HospitalPayment, + Login, + Notifications, + NotificationSettings, + Onboard, + PasswordSettings, + PatientProfile, + Replies, + ResetPassword, + ResetPasswordScreen2, + ResetPasswordScreen3, + SearchAmbulanceHome, + SearchDoctorHome, + SearchHospitalHome, + SearchPharmacyHome, + Settings, + SignUp, + SignUpScreen2, + Success, + SuccessWithThanks, + VideoCall, + Wallet, +} from "./screens"; + +import DrugsTaken from "./screens/prescriptions/DrugsTaken"; +import Prescriptions from "./screens/prescriptions/Prescriptions"; +import PrescriptionData from "./screens/prescriptions/PrescriptionData"; + +import MedicalProfile from "./screens/MedicalProfile"; +import HealthInsurance from "./screens/insurance/HealthInsurance"; +import GetInsured from "./screens/insurance/GetInsured"; +import ProviderDetails from "./screens/insurance/ProviderDetails"; +import ClinicalNotes from "./screens/ClinicalNotes"; +import BookAppointment from "./screens/appointment/BookAppointment"; +import AppointmentDate from "./screens/appointment/AppointmentDate"; +import AppointmentPay from "./screens/appointment/AppointmentPay"; +import AppointmentList from "./screens/appointment/AppointmentList"; +import LabResult from "./screens/lab/LabResult"; +import LabTestRequest from "./screens/lab/LabTestRequest"; +import LabRequestMade from "./screens/lab/LabRequestMade"; +import ReferPerson from "./screens/ReferPerson"; +import ReferralMade from "./screens/ReferralMade"; +import { Provider } from "react-redux"; +import Bills from "./screens/Bills"; +import Products from "./screens/products/Products"; +import ProductDetails from "./screens/products/ProductDetails"; +import OrderPlaced from "./screens/products/OrderPlaced"; +import CartDetails from "./screens/products/CartDetails"; +import PolicyDetails from "./screens/insurance/PolicyDetails"; +import ClaimDetails from "./screens/insurance/ClaimDetails"; +import AuthorizationDetails from "./screens/insurance/AuthorizationDetails"; +import MedicalRecords from "./screens/medicalRecords/MedicalRecords"; +// import PayWithPaystack from "./screens/payment/PayWithPaystack"; +// import Payment from "./screens/payment/Payment"; +import ImagingRequest from "./screens/imaging/ImagingRequest"; +import ImagingRequestMade from "./screens/imaging/ImagingRequestMade"; +import BloodRequest from "./screens/blood/BloodRequest"; +import BloodRequestMade from "./screens/blood/BloodRequestMade"; +import BloodRequestList from "./screens/blood/BloodRequestList"; +import BloodDetails from "./screens/blood/BloodDetails"; +import store from "./redux/store"; + +const Stack = createNativeStackNavigator(); + +const theme = { + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + background: "transparent", + }, +}; +export default function App() { + const [fontsLoaded] = useFonts({ + ManropeExtralight: require("./assets/fonts/Manrope-ExtraLight.ttf"), + ManropeLight: require("./assets/fonts/Manrope-Light.ttf"), + ManropeRegular: require("./assets/fonts/Manrope-Regular.ttf"), + ManropeMedium: require("./assets/fonts/Manrope-Medium.ttf"), + ManropeSemibold: require("./assets/fonts/Manrope-SemiBold.ttf"), + ManropeBold: require("./assets/fonts/Manrope-Bold.ttf"), + ManropeExtrBold: require("./assets/fonts/Manrope-ExtraBold.ttf"), + }); + // useCallback(async () => { + // if (fontsLoaded) { + // await SplashScreen.hideAsync(); + // } + // }, [fontsLoaded]); + + if (!fontsLoaded) { + return null; + } + + return ( + + + + + + {/* Add screen stack here 👇*/} + {/* =================================================== */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* */} + {/* ==============================TOLA========================= */} + + + + + {/* PRODUCTS ENDS */} + {/* REFERRER */} + + + {/* REFERRER ENDS */} + {/* LAB */} + + + + {/* LAB ENDS */} + {/* IMAGING */} + + + {/* */} + {/* IMAGING ENDS */} + {/* BLOOD */} + + + + + {/* BLOOD ENDS */} + {/* APPOINTMENT */} + + + + + {/* APPOINTMENT ENDS */} + {/* CLINICAL NOTES */} + + {/* CLINICAL NOTES ENDS */} + {/* PRESCRIPTIONS */} + + + + {/* PRESCRIPTIONS ENDS */} + {/* INSURANCE */} + + + + + + + {/* INSURANCE ENDS */} + {/* BILLS */} + + {/* BILLS ENDS */} + {/* MEDICAL PROFILE */} + + {/* MEDICAL PROFILE ENDS */} + {/* OTHER */} + {/* */} + + {/* OTHER ENDS */} + {/* PAYMENT */} + {/* FIXME: */} + {/* + */} + {/* PAYMENT ENDS */} + + + + + + ); +} diff --git a/README.md b/README.md index b50d49d..34ed808 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,31 @@ -# All Purpose Medical Information System (APMIS) - -========================================================================================= - - ## 👇 To get started, Follow the procedures below: - -- Clone the repo `git clone ` -- cd into the dir `cd mobile` -- Install all the project dependencies `yarn insall` - -### Styling - -- NativeWind | TailwindCSS has been configured into the APMIS react-native project. -- You can choose to make use of either TailwindCSS | Stylesheet | Others - -### Others - -- Make use of the screens folder `/screens` to make app screens -- Make use of the components folder `/components` to make app components - -### UNITARY DIR IMPORT & EXPORT 👇 - -- For screens, components, ...REST, folders, Ensure to import & export files into `index.js` - -### Make Use of the Utils folder to write helper functions or project constants - -### ASSETS 👇 - -- Make use of the assets folder to add images + other required assets - -========================================================================================== +# All Purpose Medical Information System (APMIS) + +========================================================================================= + + ## 👇 To get started, Follow the procedures below: + +- Clone the repo `git clone ` +- cd into the dir `cd mobile` +- Install all the project dependencies `yarn insall` + +### Styling + +- NativeWind | TailwindCSS has been configured into the APMIS react-native project. +- You can choose to make use of either TailwindCSS | Stylesheet | Others + +### Others + +- Make use of the screens folder `/screens` to make app screens +- Make use of the components folder `/components` to make app components + +### UNITARY DIR IMPORT & EXPORT 👇 + +- For screens, components, ...REST, folders, Ensure to import & export files into `index.js` + +### Make Use of the Utils folder to write helper functions or project constants + +### ASSETS 👇 + +- Make use of the assets folder to add images + other required assets + +========================================================================================== diff --git a/app.json b/app.json index 602836d..e82a2a4 100644 --- a/app.json +++ b/app.json @@ -1,31 +1,39 @@ { "expo": { "name": "APMIS", - "slug": "APMIS", + "slug": "_apmis_", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", + "backgroundColor": "#f3f3f3", "splash": { "image": "./assets/splash-screen.png", "resizeMode": "cover", - "backgroundColor": "#ffffff" + "backgroundColor": "#0000FF" }, "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": ["**/*"], "ios": { - "supportsTablet": true + "supportsTablet": true, + "bundleIdentifier": "com.jujuman.apmis" }, "android": { "adaptiveIcon": { - "foregroundImage": "./assets/adaptive-icon.png", + "foregroundImage": "./assets/icon.png", "backgroundColor": "#FFFFFF" - } + }, + "package": "com.jujuman.apmis" }, "web": { "favicon": "./assets/favicon.png" + }, + "extra": { + "eas": { + "projectId": "3094be95-0aee-4c6a-b527-63e22aeacf3a" + } } } } diff --git a/assets/apmis-logo-full.png b/assets/apmis-logo-full.png new file mode 100644 index 0000000..183315e Binary files /dev/null and b/assets/apmis-logo-full.png differ diff --git a/assets/apple.png b/assets/apple.png new file mode 100644 index 0000000..22a2d1a Binary files /dev/null and b/assets/apple.png differ diff --git a/assets/appointmentcard-gradient.png b/assets/appointmentcard-gradient.png new file mode 100644 index 0000000..e9ff472 Binary files /dev/null and b/assets/appointmentcard-gradient.png differ diff --git a/assets/back-arrow.png b/assets/back-arrow.png new file mode 100644 index 0000000..6c4a0d4 Binary files /dev/null and b/assets/back-arrow.png differ diff --git a/assets/bell.png b/assets/bell.png new file mode 100644 index 0000000..aa0b2aa Binary files /dev/null and b/assets/bell.png differ diff --git a/assets/blog.png b/assets/blog.png new file mode 100644 index 0000000..e2c3ff7 Binary files /dev/null and b/assets/blog.png differ diff --git a/assets/buy.png b/assets/buy.png new file mode 100644 index 0000000..ba5d6de Binary files /dev/null and b/assets/buy.png differ diff --git a/assets/calendar-tick.png b/assets/calendar-tick.png new file mode 100644 index 0000000..f288e6d Binary files /dev/null and b/assets/calendar-tick.png differ diff --git a/assets/change-profile-image.png b/assets/change-profile-image.png new file mode 100644 index 0000000..4632f26 Binary files /dev/null and b/assets/change-profile-image.png differ diff --git a/assets/chat.png b/assets/chat.png new file mode 100644 index 0000000..2a76bb4 Binary files /dev/null and b/assets/chat.png differ diff --git a/assets/check-mark.png b/assets/check-mark.png new file mode 100644 index 0000000..c7c972a Binary files /dev/null and b/assets/check-mark.png differ diff --git a/assets/clock.png b/assets/clock.png new file mode 100644 index 0000000..a70a405 Binary files /dev/null and b/assets/clock.png differ diff --git a/assets/closed-eye.png b/assets/closed-eye.png new file mode 100644 index 0000000..7f826f1 Binary files /dev/null and b/assets/closed-eye.png differ diff --git a/assets/facebook.png b/assets/facebook.png new file mode 100644 index 0000000..ec63de1 Binary files /dev/null and b/assets/facebook.png differ diff --git a/assets/google.png b/assets/google.png new file mode 100644 index 0000000..f2f99ba Binary files /dev/null and b/assets/google.png differ diff --git a/assets/hospital.png b/assets/hospital.png new file mode 100644 index 0000000..7123c61 Binary files /dev/null and b/assets/hospital.png differ diff --git a/assets/images/DocPic.png b/assets/images/DocPic.png new file mode 100644 index 0000000..ee187ea Binary files /dev/null and b/assets/images/DocPic.png differ diff --git a/assets/images/appointment.png b/assets/images/appointment.png new file mode 100644 index 0000000..4de84cf Binary files /dev/null and b/assets/images/appointment.png differ diff --git a/assets/images/checked.png b/assets/images/checked.png new file mode 100644 index 0000000..1c0132b Binary files /dev/null and b/assets/images/checked.png differ diff --git a/assets/images/circle1.png b/assets/images/circle1.png new file mode 100644 index 0000000..26f1d20 Binary files /dev/null and b/assets/images/circle1.png differ diff --git a/assets/images/circle2.png b/assets/images/circle2.png new file mode 100644 index 0000000..e488f7d Binary files /dev/null and b/assets/images/circle2.png differ diff --git a/assets/images/circle3.png b/assets/images/circle3.png new file mode 100644 index 0000000..4e001dd Binary files /dev/null and b/assets/images/circle3.png differ diff --git a/assets/images/clinical_notes.png b/assets/images/clinical_notes.png new file mode 100644 index 0000000..c73b2b5 Binary files /dev/null and b/assets/images/clinical_notes.png differ diff --git a/assets/images/completed_arrow.png b/assets/images/completed_arrow.png new file mode 100644 index 0000000..465bbcd Binary files /dev/null and b/assets/images/completed_arrow.png differ diff --git a/assets/images/consumables.png b/assets/images/consumables.png new file mode 100644 index 0000000..94bbdb7 Binary files /dev/null and b/assets/images/consumables.png differ diff --git a/assets/images/drugs.png b/assets/images/drugs.png new file mode 100644 index 0000000..762bf62 Binary files /dev/null and b/assets/images/drugs.png differ diff --git a/assets/images/health_circle.png b/assets/images/health_circle.png new file mode 100644 index 0000000..1e8c9b8 Binary files /dev/null and b/assets/images/health_circle.png differ diff --git a/assets/images/health_insurance.png b/assets/images/health_insurance.png new file mode 100644 index 0000000..bf83752 Binary files /dev/null and b/assets/images/health_insurance.png differ diff --git a/assets/images/ins_sample.png b/assets/images/ins_sample.png new file mode 100644 index 0000000..4c78400 Binary files /dev/null and b/assets/images/ins_sample.png differ diff --git a/assets/images/jar.png b/assets/images/jar.png new file mode 100644 index 0000000..1ebbf3f Binary files /dev/null and b/assets/images/jar.png differ diff --git a/assets/images/lab.png b/assets/images/lab.png new file mode 100644 index 0000000..8352f73 Binary files /dev/null and b/assets/images/lab.png differ diff --git a/assets/images/medical_record.png b/assets/images/medical_record.png new file mode 100644 index 0000000..3a53be5 Binary files /dev/null and b/assets/images/medical_record.png differ diff --git a/assets/images/pending_arrow.png b/assets/images/pending_arrow.png new file mode 100644 index 0000000..184f071 Binary files /dev/null and b/assets/images/pending_arrow.png differ diff --git a/assets/images/prescriptions.png b/assets/images/prescriptions.png new file mode 100644 index 0000000..56be024 Binary files /dev/null and b/assets/images/prescriptions.png differ diff --git a/assets/images/product_img.png b/assets/images/product_img.png new file mode 100644 index 0000000..c450e31 Binary files /dev/null and b/assets/images/product_img.png differ diff --git a/assets/images/product_img2.png b/assets/images/product_img2.png new file mode 100644 index 0000000..2825352 Binary files /dev/null and b/assets/images/product_img2.png differ diff --git a/assets/images/product_img3.png b/assets/images/product_img3.png new file mode 100644 index 0000000..b2e19d8 Binary files /dev/null and b/assets/images/product_img3.png differ diff --git a/assets/images/profile.png b/assets/images/profile.png new file mode 100644 index 0000000..d5dc12f Binary files /dev/null and b/assets/images/profile.png differ diff --git a/assets/images/referral.png b/assets/images/referral.png new file mode 100644 index 0000000..6a46254 Binary files /dev/null and b/assets/images/referral.png differ diff --git a/assets/images/wallet.png b/assets/images/wallet.png new file mode 100644 index 0000000..b5d2931 Binary files /dev/null and b/assets/images/wallet.png differ diff --git a/assets/lock.png b/assets/lock.png new file mode 100644 index 0000000..b17b4ac Binary files /dev/null and b/assets/lock.png differ diff --git a/assets/map-marker.png b/assets/map-marker.png new file mode 100644 index 0000000..a850e9d Binary files /dev/null and b/assets/map-marker.png differ diff --git a/assets/onboard-frame1.png b/assets/onboard-frame1.png new file mode 100644 index 0000000..439991e Binary files /dev/null and b/assets/onboard-frame1.png differ diff --git a/assets/onboard-frame2.png b/assets/onboard-frame2.png new file mode 100644 index 0000000..2c65e30 Binary files /dev/null and b/assets/onboard-frame2.png differ diff --git a/assets/onboard-frame3.png b/assets/onboard-frame3.png new file mode 100644 index 0000000..5413360 Binary files /dev/null and b/assets/onboard-frame3.png differ diff --git a/assets/profile-pic.png b/assets/profile-pic.png new file mode 100644 index 0000000..269d2d7 Binary files /dev/null and b/assets/profile-pic.png differ diff --git a/assets/profile2.png b/assets/profile2.png new file mode 100644 index 0000000..79313a8 Binary files /dev/null and b/assets/profile2.png differ diff --git a/assets/profile3.png b/assets/profile3.png new file mode 100644 index 0000000..adc0f2b Binary files /dev/null and b/assets/profile3.png differ diff --git a/assets/profile4.png b/assets/profile4.png new file mode 100644 index 0000000..97576fb Binary files /dev/null and b/assets/profile4.png differ diff --git a/assets/read.png b/assets/read.png new file mode 100644 index 0000000..c1603a8 Binary files /dev/null and b/assets/read.png differ diff --git a/assets/record.jpg b/assets/record.jpg new file mode 100644 index 0000000..8f46186 Binary files /dev/null and b/assets/record.jpg differ diff --git a/assets/record.png b/assets/record.png new file mode 100644 index 0000000..786ea35 Binary files /dev/null and b/assets/record.png differ diff --git a/assets/splash-screen.png b/assets/splash-screen.png index 3a47508..42699f4 100644 Binary files a/assets/splash-screen.png and b/assets/splash-screen.png differ diff --git a/assets/video-gradient.png b/assets/video-gradient.png new file mode 100644 index 0000000..664897d Binary files /dev/null and b/assets/video-gradient.png differ diff --git a/assets/visible-eye.png b/assets/visible-eye.png new file mode 100644 index 0000000..8998024 Binary files /dev/null and b/assets/visible-eye.png differ diff --git a/assets/wallet-pattern.png b/assets/wallet-pattern.png new file mode 100644 index 0000000..c8ac89b Binary files /dev/null and b/assets/wallet-pattern.png differ diff --git a/babel.config.js b/babel.config.js index 2900afe..fa19f90 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,7 @@ -module.exports = function(api) { - api.cache(true); - return { - presets: ['babel-preset-expo'], - }; -}; +module.exports = function (api) { + api.cache(true); + return { + presets: ["babel-preset-expo"], + plugins: ["nativewind/babel", "react-native-reanimated/plugin"], + }; +}; diff --git a/components/index.js b/components/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/components/seed/AppointmentCard.js b/components/seed/AppointmentCard.js new file mode 100644 index 0000000..879de58 --- /dev/null +++ b/components/seed/AppointmentCard.js @@ -0,0 +1,59 @@ +import { View, Text, Image, TouchableOpacity } from "react-native"; +import React from "react"; +import { assets, COLORS } from "./constants"; +import IonIcon from "react-native-vector-icons/Ionicons"; + +const AppointmentCard = () => { + return ( + + + + + + + + 14 December 2022 + + + + + + + + + + 08:00 AM -10:00 AM + + + + + + + + Dr. Christian + + + Psychatrist + + + + + + + + ); +}; + +export default AppointmentCard; diff --git a/components/seed/Backbtn.js b/components/seed/Backbtn.js new file mode 100644 index 0000000..27b05db --- /dev/null +++ b/components/seed/Backbtn.js @@ -0,0 +1,18 @@ +import { TouchableOpacity } from "react-native"; +import React from "react"; +import { useNavigation } from "@react-navigation/native"; +import MaterialIcons from "react-native-vector-icons/MaterialIcons"; + +const Backbtn = () => { + const navigation = useNavigation(); + return ( + navigation.goBack()} + className="absolute z-10 left-5 top-[2px]" + > + + + ); +}; + +export default Backbtn; diff --git a/components/seed/BottomTab.js b/components/seed/BottomTab.js new file mode 100644 index 0000000..fcdd4de --- /dev/null +++ b/components/seed/BottomTab.js @@ -0,0 +1,170 @@ +import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; +import { Platform } from "react-native"; +import IonIcons from "react-native-vector-icons/Ionicons"; +import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; +import MaterialIcons from "react-native-vector-icons/MaterialIcons"; +import { + BlogHome, + Dashboard, + Home, + PatientProfile, + Settings, + Wallet, +} from "../../screens"; +import Buy from "../../screens/buy"; +import { NavigationContainer } from "@react-navigation/native"; +import { createDrawerNavigator } from "@react-navigation/drawer"; +import Ionicons from "react-native-vector-icons/Ionicons"; +import Others from "../../screens/view/Others"; +import { COLORS } from "./constants"; +import CustomDrawer from "./CustomDrawer"; + +function BottomTab() { + const Tab = createBottomTabNavigator(); + return ( + + ( + + ), + }} + /> + ( + + ), + // tabBarBadge: 3, + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); +} +export default BottomTab; + +export const Dash = () => { + const Drawer = createDrawerNavigator(); + + return ( + + } + screenOptions={{ + headerShown: false, + drawerActiveBackgroundColor: COLORS.primaryBlue, + drawerActiveTintColor: "#fff", + drawerInactiveTintColor: "#333", + drawerLabelStyle: { + marginLeft: -25, + // fontFamily: "Roboto-Medium", + fontSize: 15, + }, + }} + > + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + {/* ( + + ), + }} + /> */} + + + ); +}; + +// export default Dash; diff --git a/components/seed/Buttons.js b/components/seed/Buttons.js new file mode 100644 index 0000000..a1f8fcb --- /dev/null +++ b/components/seed/Buttons.js @@ -0,0 +1,109 @@ +import { View, Text, TouchableOpacity, Image } from "react-native"; +import React, { useState } from "react"; +import { COLORS } from "./constants"; + +export const Btn = ({ value = "Button", onPressHandler, btnWidth = "90%" }) => { + return ( + + + {value} + + + ); +}; + +// ============================================================================= + +export const Tab = ({ isEmailSelected, setIsEmailSelected }) => { + return ( + + setIsEmailSelected(true)} + className={`w-[45%] py-2 ${ + isEmailSelected && "bg-[#DAE1F3]" + } rounded-[4px]`} + > + + Email + + + setIsEmailSelected(false)} + className={`w-[45%] py-2 rounded-[4px] ${ + !isEmailSelected && "bg-[#DAE1F3]" + }`} + > + + Phone Number + + + + ); +}; + +export const TabGeneral = ({ + isFirstSelected, + setIsFirstSelected, + firstValue = "firstValue", + secondValue = "secondValue", +}) => { + return ( + + setIsFirstSelected(true)} + className={`w-[45%] py-2 ${ + isFirstSelected && "bg-[#DAE1F3]" + } rounded-[4px]`} + > + + {firstValue} + + + setIsFirstSelected(false)} + className={`w-[45%] py-2 rounded-[4px] ${ + !isFirstSelected && "bg-[#DAE1F3]" + }`} + > + + {secondValue} + + + + ); +}; diff --git a/components/seed/CustomDrawer.js b/components/seed/CustomDrawer.js new file mode 100644 index 0000000..3258451 --- /dev/null +++ b/components/seed/CustomDrawer.js @@ -0,0 +1,102 @@ +import React from "react"; +import { + View, + Text, + ImageBackground, + Image, + TouchableOpacity, +} from "react-native"; +import { + DrawerContentScrollView, + DrawerItemList, +} from "@react-navigation/drawer"; + +import Ionicons from "react-native-vector-icons/Ionicons"; +import FontAwesome5 from "react-native-vector-icons/FontAwesome5"; +import { assets, COLORS } from "./constants"; + +const CustomDrawer = (props) => { + return ( + + + {/* */} + + + + + Christian Peters + + + + Account + + + + + + {/* */} + + + + + + {}} style={{ paddingVertical: 15 }}> + + + + Tell a Friend + + + + {}} style={{ paddingVertical: 15 }}> + + + + Log Out + + + + + + ); +}; + +export default CustomDrawer; diff --git a/components/seed/Header.js b/components/seed/Header.js new file mode 100644 index 0000000..ca26602 --- /dev/null +++ b/components/seed/Header.js @@ -0,0 +1,18 @@ +import { View, Text } from "react-native"; +import Backbtn from "./Backbtn"; + +const Header = ({ title }) => { + return ( + + + + {title} + + + ); +}; + +export default Header; diff --git a/components/seed/Inputs.js b/components/seed/Inputs.js new file mode 100644 index 0000000..0320e9c --- /dev/null +++ b/components/seed/Inputs.js @@ -0,0 +1,195 @@ +import { TextInput, View, Image, TouchableOpacity } from "react-native"; +import React, { useState } from "react"; +import { Label } from "./Texts"; +import FontAwesome from "react-native-vector-icons/FontAwesome"; +import { assets } from "./constants"; + +export const Input = ({ value, changeHandler, placeholder, keyboardType }) => { + const [isFocused, setIsFocused] = useState(false); + return ( + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + keyboardType={keyboardType} + onChangeText={changeHandler} + value={value} + /> + ); +}; + +export const ChatInput = () => { + return ( + + + + + + + ); +}; + +export const InputWithLabel = ({ + width = "90%", + inputValue, + labelValue, + changeHandler, + placeholder = "Enter placeholder", + keyboardType, +}) => { + const [isFocused, setIsFocused] = useState(false); + return ( + + + ); +}; +export const InputWithLabelPassword = ({ + width = "90%", + inputValue, + labelValue, + changeHandler, + placeholder = "Enter placeholder", + keyboardType, +}) => { + const [isFocused, setIsFocused] = useState(false); + const [isPasswordHidden, setIsPasswordHidden] = useState(true); + + return ( + + + ); +}; +export const InputWithLabelAuth = ({ + width = "90%", + inputValue, + onBlur, + labelValue, + changeHandler, + refValue, + isEditable = true, + placeholder = "Enter placeholder", + keyboardType, + ...restProps +}) => { + const [isFocused, setIsFocused] = useState(false); + + return ( + + + ); +}; + +export const InputWithLabelAuthPassword = ({ + width = "90%", + inputValue, + onBlur, + labelValue, + changeHandler, + placeholder = "Enter placeholder", + keyboardType, + ...restProps +}) => { + const [isFocused, setIsFocused] = useState(false); + const [isPasswordHidden, setIsPasswordHidden] = useState(true); + + return ( + + + ); +}; diff --git a/components/seed/OAuth.js b/components/seed/OAuth.js new file mode 100644 index 0000000..a02ee53 --- /dev/null +++ b/components/seed/OAuth.js @@ -0,0 +1,39 @@ +import { View, Text, TouchableOpacity, Image } from "react-native"; +import React from "react"; +import { assets, COLORS } from "./constants"; + +const OAuth = () => { + return ( + + + + + Login with Google + + + + + + Login with Facebook + + + + + + Login with Apple + + + + ); +}; + +export default OAuth; diff --git a/components/seed/OtpInput.js b/components/seed/OtpInput.js new file mode 100644 index 0000000..3bb71b1 --- /dev/null +++ b/components/seed/OtpInput.js @@ -0,0 +1,32 @@ +import { View, Text, TextInput } from "react-native"; +import React, { useState } from "react"; +const dummy = ["a", "b", "c", "d", "e", "f"]; +const OtpInput = () => { + const [isFocused, setIsFocused] = useState(false); + const [selectedId, setSelectedId] = useState(""); + + return ( + + {dummy.map((d, i) => ( + + setIsFocused(true)} + onPressIn={() => setSelectedId(`id_${i}`)} + onBlur={() => setIsFocused(false)} + maxLength={1} + style={{ fontFamily: "ManropeMedium" }} + className={`h-[50px] text-xl text-black w-[50px] text-center border-[1px] ${ + isFocused & (selectedId == "id_" + i) + ? "border-[#0364FF]" + : "border-[#cccccc]" + } rounded-[4px]`} + /> + + ))} + + ); +}; + +export default OtpInput; diff --git a/components/seed/Select.js b/components/seed/Select.js new file mode 100644 index 0000000..6b5b42a --- /dev/null +++ b/components/seed/Select.js @@ -0,0 +1,131 @@ +import { View, Text } from "react-native"; +import React from "react"; +import { Label } from "./Texts"; +import { Picker } from "@react-native-picker/picker"; +import { lgaList } from "../../utils/lga"; +import { useState } from "react"; + +export const StateSelect = ({ selectedValue, setSelectedValue }) => { + const [isfocused, setIsFocused] = useState(false); + return ( + + + + + setSelectedValue(itemValue)} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} + > + {Object.keys(lgaList).map((state, i) => ( + + ))} + + + + ); +}; + +export const LgaSelect = ({ + selectedValue, + setSelectedValue, + selectedState, +}) => { + const [isfocused, setIsFocused] = useState(false); + + // if (!lgaList.hasOwnProperty(selectedState)) { + // console.log(`Key "${selectedState}" does not exist in the array.`); + // return; + // } + return ( + + + + + setSelectedValue(itemValue)} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} + > + {(lgaList.hasOwnProperty(selectedState) + ? lgaList[selectedState] + : ["Select"] + ).map((lga, i) => ( + + ))} + + + + ); +}; + +export const Select = ({ + labelValue, + selectedValue, + setSelectedValue, + list, +}) => { + const [isfocused, setIsFocused] = useState(false); + return ( + + + + + setSelectedValue(itemValue)} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} + > + {list.map((value, i) => ( + + ))} + + + + ); +}; diff --git a/components/seed/Texts.js b/components/seed/Texts.js new file mode 100644 index 0000000..f079872 --- /dev/null +++ b/components/seed/Texts.js @@ -0,0 +1,82 @@ +import { Text } from "react-native"; +import React from "react"; +import { COLORS } from "./constants"; + +export const BoldText = ({ value = "Text" }) => { + return ( + + {value} + + ); +}; + +export const LightText = ({ + value = "Text", + textColor = COLORS.lightText, + styling, +}) => { + return ( + + {value} + + ); +}; +export const LightTextBase = ({ value = "Text" }) => { + return ( + + {value} + + ); +}; +export const LightTextWhite = ({ value = "Text" }) => { + return ( + + {value} + + ); +}; + +export const LightBlueText = ({ + value = "Text", + color = COLORS.primaryBlue, + styling, +}) => { + return ( + + {value} + + ); +}; + +export const Label = ({ value = "Label" }) => { + return ( + + {value} + + ); +}; +export const LabelSmall = ({ value = "Label" }) => { + return ( + + {value} + + ); +}; diff --git a/components/seed/constants/assets.js b/components/seed/constants/assets.js new file mode 100644 index 0000000..edeff26 --- /dev/null +++ b/components/seed/constants/assets.js @@ -0,0 +1,65 @@ +import apmisFullLogo from "../../../assets/apmis-logo-full.png"; +import apple from "../../../assets/apple.png"; +import facebook from "../../../assets/facebook.png"; +import google from "../../../assets/google.png"; +import checkmark from "../../../assets/check-mark.png"; +import onboardFrame1 from "../../../assets/onboard-frame1.png"; +import onboardFrame2 from "../../../assets/onboard-frame2.png"; +import onboardFrame3 from "../../../assets/onboard-frame3.png"; +import backArrow from "../../../assets/back-arrow.png"; +import bell from "../../../assets/bell.png"; +import lock from "../../../assets/lock.png"; +import chat from "../../../assets/chat.png"; +import buy from "../../../assets/buy.png"; +import clock from "../../../assets/clock.png"; +import calendarTick from "../../../assets/calendar-tick.png"; +import read from "../../../assets/read.png"; +import record from "../../../assets/record.png"; +import profilePic from "../../../assets/profile-pic.png"; +import walletPattern from "../../../assets/wallet-pattern.png"; +import changeProfileImage from "../../../assets/change-profile-image.png"; +import appointmentCardGradient from "../../../assets/appointmentcard-gradient.png"; +import videoGradient from "../../../assets/video-gradient.png"; +import blog from "../../../assets/blog.png"; +import hospital from "../../../assets/hospital.png"; +import visibleEye from "../../../assets/visible-eye.png"; +import closedEye from "../../../assets/closed-eye.png"; + +import profile2 from "../../../assets/profile2.png"; +import profile3 from "../../../assets/profile3.png"; +import profile4 from "../../../assets/profile4.png"; + +import mapMarker from "../../../assets/map-marker.png"; + +export default { + apmisFullLogo, + apple, + facebook, + google, + checkmark, + onboardFrame1, + onboardFrame2, + onboardFrame3, + backArrow, + bell, + calendarTick, + clock, + lock, + profilePic, + changeProfileImage, + walletPattern, + chat, + buy, + read, + record, + videoGradient, + appointmentCardGradient, + profile2, + profile3, + profile4, + blog, + hospital, + mapMarker, + visibleEye, + closedEye, +}; diff --git a/components/seed/constants/colors.js b/components/seed/constants/colors.js new file mode 100644 index 0000000..dfed38a --- /dev/null +++ b/components/seed/constants/colors.js @@ -0,0 +1,11 @@ +const COLORS = { + lightestText: "#8F8F8F", + lightText: "#6D7589", + whiteText: "#ffffff", + primaryBlue: "#0364FF", + secondaryBlue: "#0E214D", + darkText: "#000000", + activeTabText: "#03045E", +}; + +export default COLORS; diff --git a/components/seed/constants/index.js b/components/seed/constants/index.js new file mode 100644 index 0000000..514e1b7 --- /dev/null +++ b/components/seed/constants/index.js @@ -0,0 +1,3 @@ +import assets from "./assets"; +import COLORS from "./colors"; +export { assets, COLORS }; diff --git a/components/seed/index.js b/components/seed/index.js new file mode 100644 index 0000000..00077e4 --- /dev/null +++ b/components/seed/index.js @@ -0,0 +1,39 @@ +import { Input, InputWithLabel, ChatInput, InputWithLabelAuth } from "./Inputs"; +import { Btn, Tab, TabGeneral } from "./Buttons"; +import OtpInput from "./OtpInput"; +import OAuth from "./OAuth"; +import Backbtn from "./Backbtn"; +import Header from "./Header"; +import AppointmentCard from "./AppointmentCard"; +import CustomDrawer from "./CustomDrawer"; +import { + BoldText, + LightText, + LightTextWhite, + LightBlueText, + Label, + LabelSmall, + LightTextBase, +} from "./Texts"; +export { + Input, + Btn, + Tab, + TabGeneral, + OtpInput, + OAuth, + BoldText, + LightText, + LightTextWhite, + LightBlueText, + Label, + LabelSmall, + InputWithLabel, + InputWithLabelAuth, + Backbtn, + AppointmentCard, + Header, + LightTextBase, + ChatInput, + CustomDrawer, +}; diff --git a/components/seed1/Allergies.js b/components/seed1/Allergies.js new file mode 100644 index 0000000..fc421de --- /dev/null +++ b/components/seed1/Allergies.js @@ -0,0 +1,182 @@ +import React, { useState } from "react"; +import { + Modal, + View, + StyleSheet, + Dimensions, + ScrollView, + TouchableOpacity, + TextInput, +} from "react-native"; +import Ionicons from "react-native-vector-icons/Ionicons"; +import AppText from "./AppText"; + +export default function Allergies({ + show, + setShowAllergies, + setAllergiesArr, + allergiesArr, +}) { + const { width: windowWidth } = Dimensions.get("window"); + const [allergies, setAllergies] = useState([ + "Ibuprofen", + "Paracetamol", + "Cyprotab", + "Cocaine Extract", + "Blood Tonic", + "Priton", + ]); + const [displayedAllergies, setDisplayedAllergies] = useState(allergies); + const [allergySearch, setAllergySearch] = useState(""); + const selectAllergies = (allergy) => { + let allergyIndex = allergiesArr.findIndex((name) => name == allergy); + if (allergyIndex < 0) { + setAllergiesArr([...allergiesArr, allergy]); + } else { + allergiesArr.splice(allergyIndex, 1); + setAllergiesArr([...allergiesArr]); + } + }; + + const alreadyChosen = (allergy) => { + return allergiesArr.find((item) => item == allergy); + }; + + const searchAllergies = (text) => { + setAllergySearch(text); + if (!text) { + setDisplayedAllergies(allergies); + } else { + let result = allergies.filter((allergy) => { + return allergy.toLowerCase().includes(text.toLowerCase()); + }); + setDisplayedAllergies(result); + } + }; + return ( + + + + + Allergies + setShowAllergies(false)} + name="close-outline" + style={{ + fontSize: 30, + }} + /> + + + searchAllergies(text)} + placeholder="Search allergy" + style={{ height: "100%", paddingLeft: 22 }} + value={allergySearch} + /> + + { + setAllergySearch(""); + searchAllergies(""); + }} + name="close-outline" + style={{ fontSize: 15, position: "absolute", right: 10, top: 15 }} + /> + + + + {displayedAllergies.map((item, i) => ( + selectAllergies(item)} + key={i} + style={{ + backgroundColor: "#f7f6fb", + padding: 12, + borderRadius: 5, + marginRight: 14, + marginVertical: 5, + borderColor: alreadyChosen(item) ? "#0364FF" : "", + borderWidth: alreadyChosen(item) ? 1 : 0, + }} + > + + {item} + + + ))} + + + + + + ); +} + +const styles = StyleSheet.create({ + centeredView: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#eee", + }, + modalView: { + margin: 20, + backgroundColor: "white", + display: "flex", + position: "relative", + alignItems: "center", + borderRadius: 20, + width: "95%", + flex: 1, + paddingTop: 20, + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 4, + elevation: 5, + }, +}); diff --git a/components/seed1/AppText.js b/components/seed1/AppText.js new file mode 100644 index 0000000..b75083e --- /dev/null +++ b/components/seed1/AppText.js @@ -0,0 +1,7 @@ +import { Text } from "react-native"; +import React from "react"; + + +export default function AppText({ children, style }) { + return {children}; +} diff --git a/components/seed1/AppointmentBooked.js b/components/seed1/AppointmentBooked.js new file mode 100644 index 0000000..aa26732 --- /dev/null +++ b/components/seed1/AppointmentBooked.js @@ -0,0 +1,115 @@ +import React, { useState } from "react"; +import { + Alert, + Modal, + Text, + Pressable, + View, + StyleSheet, + Image, + Dimensions, +} from "react-native"; +import AppText from "./AppText"; +import Button from "./Button"; + +export default function AppointmentBooked({ goHome, show, setBookedModal }) { + const windowWidth = Dimensions.get("window").width; + return ( + + + + + + + + Thank You! Your Appointment Created + + + You booked an appoinment with Dr. Mildred Mathasgha on July 21, + at 10:00 am + + + + + +