fln-espranza 1.1.18 → 1.1.20

package/components/EInfoBox.tsx

@@ -22,16 +22,16 @@ export default function InfoBox({
   childTextColor,
 }: InfoBoxProps) {
   return (
-    <View style={[tw.style("rounded-lg"), style]}>
+    <View style={[tw.style("rounded-lg bg-blue-500/10 border border-blue-800/10 p-4"), style]}>
       <View style={tw`flex-row`}>
-        <View style={tw`w-5 h-5 mr-1`}>{icon}</View>
+        <View style={tw`w-5 h-5 mr-2`}>{icon}</View>
         <View style={tw`flex-1`}>
           {title ? (
             <EText size="sm" style={tw`font-semibold mb-1 text-${color ? color : "white"}`}>
               {title}
             </EText>
           ) : null}
-          <EText size="xs" style={[tw`font-medium`, {color: childTextColor}]}>
+          <EText size="xs" style={[tw`text-slate-900 opacity-70`, {color: childTextColor}]}>
             {children}
           </EText>
         </View>

package/components/EInput.tsx

@@ -10,6 +10,7 @@ interface EInputProps extends TextInputProps {
   size?: "lg";
   hasBackground?: boolean;
   icon?: JSX.Element;
+  style?: any;
 }
 
 export default function EInput({
@@ -17,25 +18,25 @@ export default function EInput({
   size,
   hasBackground,
   icon,
+  style,
   ...props
 }: EInputProps) {
   const [hasFocus, setHasFocus] = useState(false);
   return (
-    <View style={[tw`mb-4`, {}]}>
+    <View style={[tw`mb-4`, {style}]}>
       {label ? (
-        <EText size="sm" style={[tw`font-semibold text-slate-800`, {
-          // color: Colors["text-primary"]
+        <EText  style={[tw`font-semibold  ${hasFocus ? '' : 'text-slate-800'}`, {
         }]}>
           {label}
         </EText>
       ) : null}
 
       <View
-        style={tw` mt-2 `}
+        style={tw` mt-1`}
       >
         <TextInput
-          style={tw`h-12 rounded-lg px-4 flex-row items-center border border-slate-300  ${
-            hasFocus ? "border-black shadow-md" : ""
+          style={tw`h-12 rounded-lg px-4 flex-row items-center border border-slate-300 text-base  ${
+            hasFocus ? "border-black bg-teal-50/10" : ""
           }`}
           {...props}
           onFocus={() => setHasFocus(!hasFocus)}

package/components/ELabel.tsx

@@ -8,7 +8,7 @@ interface IProps{
 
 export default function ELabel( {label }: IProps ) {
   return (
-    <EText style={tw`text-sm font-semibold text-slate-500`}>
+    <EText size="base" style={[tw`font-semibold text-slate-700`, {}]}>
         {label}
     </EText>
   )

package/components/EListClusterMeeting.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import { ChevronRightIcon } from "react-native-heroicons/outline";
+import { Colors } from "fln-espranza/utils/Color";
+
+interface IProps extends TouchableOpacityProps {
+  date: string;
+  time: string;
+  location: string;
+}
+
+export default function EListClusterMeeting({
+  date,
+  time,
+  location,
+  ...props
+}: IProps) {
+  return (
+    <TouchableOpacity
+      style={tw`border-b border-slate-200 py-3`}
+      {...props}
+      activeOpacity={0.5}
+    >
+      <View style={tw`flex-row items-center`}>
+        <EText style={tw`font-bold text-slate-800 mb-0.5 flex-1`}>{date}</EText>
+        <ChevronRightIcon style={tw`text-slate-800`} size={16} />
+      </View>
+      <View style={tw`flex-row flex-1 items-center`}>
+        <EText size="sm" style={tw`text-slate-500`}>
+          {time}
+        </EText>
+        <View
+          style={tw`w-1 h-1 bg-[${Colors["primary-base"]}] rounded-full mx-2`}
+        ></View>
+        <EText
+          size="sm"
+          style={tw`text-slate-500 flex-1 pr-6`}
+          numberOfLines={1}
+        >
+          {location}
+        </EText>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/components/EListPerson.tsx

@@ -9,6 +9,8 @@ interface IProps {
   subtitle?: string;
   noBorder?: boolean;
   firstLetter?: string;
+  itemsEnd?: JSX.Element;
+  subTitleIcon?: JSX.Element;
 }
 
 export default function EListPerson({
@@ -16,24 +18,42 @@ export default function EListPerson({
   subtitle,
   noBorder,
   firstLetter,
+  itemsEnd,
+  subTitleIcon,
 }: IProps) {
   return (
     <View style={[tw`flex-row items-center justify-between`]}>
-      <Avatar size="sm" source={""} nameFirstLetter={firstLetter} />
+      <Avatar
+        size="sm"
+        source={""}
+        nameFirstLetter={name.split(" ")[0].charAt(0)}
+      />
       <View
-        style={tw` ml-3 py-3 flex-1 ${
+        style={tw` ml-3 py-3 flex-1 flex-row items-center justify-between ${
           noBorder ? "" : "border-b border-slate-200"
         }`}
       >
-        <EText style={tw`font-bold text-slate-800 mb-0.5`} numberOfLines={1}>
-          {name}
-        </EText>
-
-        {subtitle ? (
-          <EText size="sm" style={tw`text-slate-500`}>
-            {subtitle}
+        <View>
+          <EText
+            size="lg"
+            style={tw`font-bold text-slate-800 mb-0.5 capitalize`}
+            numberOfLines={1}
+          >
+            {name}
           </EText>
-        ) : null}
+
+          <View style={tw`flex flex-row items-center`}>
+            {subTitleIcon ? subTitleIcon : <></>}
+            {subtitle ? (
+              <EText size="sm" style={tw`text-slate-500`}>
+                {subtitle}
+              </EText>
+            ) : (
+              <></>
+            )}
+          </View>
+        </View>
+        {itemsEnd}
       </View>
     </View>
   );

package/components/EListSchool.tsx

@@ -18,11 +18,11 @@ export default function EListSchool({
 }: IProps) {
   return (
     <View style={tw`border-b border-slate-200 py-3`}>
-      <EText style={tw`font-bold text-slate-800 mb-0.5`} numberOfLines={1}>
+      <EText size="base" style={tw`font-bold text-slate-800 mb-1 h-7`} numberOfLines={2}>
         {name}
       </EText>
       <View style={tw`flex-row items-center`}>
-        <EText size="sm" style={tw`text-slate-500`}>
+        <EText size="sm" style={tw`text-slate-500 mt-0.5`}>
           {code}
         </EText>
         {district ? <><View style={tw`w-1 h-1 bg-slate-600 rounded-full mx-1.5`}></View>

package/components/ENotFoundPlaceholder.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Image } from 'react-native'
+import tw from '../../../lib/tailwind'
+import { View } from 'react-native'
+import EText from './EText'
+import { Colors } from "../utils/Color";
+
+interface IProps {
+    title: string;
+    subtitle: string;
+    button?: JSX.Element;
+    icon?: JSX.Element;
+}
+
+export default function ENotFoundPlaceholder(
+    { title, subtitle, button, icon }: IProps
+) {
+  return (
+    <View style={tw`items-center px-16 py-2`}>
+    <Image
+      source={require("../assets/images/icon-placeholder-schedule.png")}
+      style={[tw``, { height: 44 }]}
+      resizeMode="contain"
+    />
+
+    <EText
+      size="base"
+      style={tw`text-center font-bold text-[${Colors["text-primary"]}]`}
+    >
+        {title}
+    </EText>
+    <EText
+      size="sm"
+      style={tw`text-center text-[${Colors["text-secondary"]}]`}
+    >
+        {subtitle}
+    </EText>
+    <View style={tw`mt-4`}>
+        {button}
+    </View>
+  </View>
+  )
+}

package/components/EOption.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import {
+  TouchableOpacity,
+  View,
+  TouchableOpacityProps,
+  Dimensions,
+  Image,
+} from "react-native";
+import tw from "../../../lib/tailwind";
+import EText from "./EText";
+import { Colors } from "../utils/Color";
+
+const ImageWidth = Dimensions.get("window").width / 2 - 18;
+const ContentWidth = Dimensions.get("window").width - 32;
+const ImageHeight = 140;
+const MediaContainerStyle = "rounded-md overflow-hidden";
+
+interface RadioButtonProps extends TouchableOpacityProps {
+  text?: string;
+  isActive: boolean;
+  imageSource?: string;
+  optionLabel: string;
+  onPress?: () => void;
+}
+const EOption = ({
+  isActive,
+  text,
+  imageSource,
+  optionLabel,
+  onPress,
+  ...props
+}: RadioButtonProps) => {
+  return (
+    <TouchableOpacity
+      style={[
+        tw`flex flex-row justify-start items-center mt-2 px-4 py-3 border rounded-lg ${
+          imageSource ? "flex-col p-0 items-start" : ""
+        }`,
+        {
+          borderColor: isActive ? Colors["secondary-base"] : Colors.border,
+          backgroundColor: isActive ? Colors["secondary-light"] : Colors.white,
+          width: imageSource ? ImageWidth - 10 : ContentWidth,
+        },
+      ]}
+      onPress={() => {
+        onPress && onPress();
+      }}
+      activeOpacity={0.7}
+      {...props}
+    >
+      {imageSource ? (
+        <View
+          style={[
+            tw`${MediaContainerStyle}`,
+            {
+              height: ImageHeight - 20,
+              width: ImageWidth - 12,
+              backgroundColor: Colors.white
+            },
+          ]}
+        >
+          <View
+            style={[
+              tw`h-8 w-8 bg-slate-300 rounded-full justify-center items-center m-2 absolute z-10`,
+            ]}
+          >
+          <EText size={"base"} style={tw`font-normal`}>
+            {optionLabel}
+          </EText>
+          </View>
+          <Image
+            style={[
+              tw`w-full mt-4`,
+              {
+                opacity: isActive ? 0.5 : 1,
+              },
+              {height: ImageHeight - 40}
+            ]}
+            source={{uri: imageSource}}
+            resizeMode="contain"
+          />
+        </View>
+      )
+            : <></>
+    }
+      {text ? (
+        <EText
+          size={"base"}
+          style={tw`font-normal ${imageSource ? "py-2 px-4" : ""}`}
+        >
+          {text}
+        </EText>
+      ) : null}
+    </TouchableOpacity>
+  ); 
+};
+
+export default EOption;

package/components/EPageDescription.tsx

@@ -10,8 +10,7 @@ interface IProps{
 export default function EPageDescription({text}: IProps) {
   return (
     <EText
-        size='sm'
-        style={[tw`font-normal`, {color: Colors['text-body']}]}
+        style={[tw`pr-4`, {color: Colors['text-body']}]}
     >
         {text}
     </EText>

package/components/EPillButton.tsx

@@ -1,26 +1,33 @@
-import React from 'react'
-import { TouchableOpacity, View } from 'react-native'
-import tw from '../lib/tailwind'
-import { Colors } from '../utils/Color';
-import EText from './EText';
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import EText from "./EText";
 
 interface IProps {
-    title: string;
-    active?: boolean;
-    onPress?: () => void;
+  title: string;
+  active?: boolean;
+  onPress?: () => void;
 }
 
-export default function EPillButton( { title, active, onPress }: IProps) {
+export default function EPillButton({ title, active, onPress }: IProps) {
   return (
-      <TouchableOpacity style={[tw`px-4 py-3 mr-2 border rounded-lg border-slate-300`, {
-        backgroundColor: active ? Colors['secondary-base'] : "transparent",
-        borderColor: active ? Colors['secondary-base'] : Colors['border'],
-      }]}
+    <TouchableOpacity
+      style={[
+        tw`px-4 py-3 mr-2 border rounded-lg border-slate-300`,
+        {
+          backgroundColor: active ? Colors["secondary-base"] : "transparent",
+          borderColor: active ? Colors["secondary-base"] : Colors["border"],
+        },
+      ]}
       onPress={onPress}
+    >
+      <EText
+        size={"base"}
+        style={tw`font-normal ${active ? "text-white" : "text-slate-500"}`}
       >
-        <EText size={"sm"} style={tw`font-normal ${active ? "text-white" : "text-slate-500"}`}>
-       {title}
-        </EText>
+        {title}
+      </EText>
     </TouchableOpacity>
-  )
+  );
 }

package/components/EProfile.tsx

@@ -1,43 +1,57 @@
-import React from 'react';
-import { View } from 'react-native';
-import tw from '../lib/tailwind';
-import { Colors } from '../utils/Color';
-import Avatar from './Avatar';
-import EText from './EText';
+import React from "react";
+import { View } from "react-native";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import Avatar from "./Avatar";
+import EText from "./EText";
 
 interface IProps {
   name: string;
   subjectName?: string;
   border?: boolean;
   children?: JSX.Element;
-  titleSize: string;
-  subTitleSize: string;
-
+  showAvatar?: boolean;
 }
 
-export default function EProfile({ name, subjectName, border, children, titleSize, subTitleSize }: IProps) {
+export default function EProfile({
+  name,
+  subjectName,
+  border,
+  children,
+  showAvatar = true
+}: IProps) {
   return (
-    <View style={[tw`flex-row items-center justify-between py-3 ${border ? "border-b" : ""}`, {borderBottomColor: Colors.border}]}>
+    <View
+      style={[
+        tw`flex-row items-center justify-between py-3 ${border ? "border-b" : ""
+          }`,
+        { borderBottomColor: Colors.border },
+      ]}
+    >
       <View style={tw`flex-row items-center`}>
-        <Avatar
+        {showAvatar ? <Avatar
           size="sm"
           source={""}
-          nameFirstLetter={"J"}
-          bg={"sky-400"}
-        />
+          nameFirstLetter={name.split(" ")[0].charAt(0)}
+        /> : <></>}
         <View style={tw`ml-3`}>
-          <EText style={[tw`${titleSize}`, { color: Colors['text-primary'] }]}>{name}</EText>
-          {subjectName ? <EText style={[tw`mt-1 ${subTitleSize}`, { color: Colors['text-body'] }]}>
-            {subjectName}
-          </EText> : null}
+          <EText
+            size={"base"}
+            style={[
+              tw`font-bold text-slate-800 mb-0 capitalize`,
+              { color: Colors["text-primary"] },
+            ]}
+          >
+            {name}
+          </EText>
+          {subjectName ? (
+            <EText size="sm" style={[tw` `, { color: Colors["text-body"] }]}>
+              {subjectName}
+            </EText>
+          ) : null}
         </View>
       </View>
-      {
-        children ? <>
-          {children}
-        </> : null
-      }
-
+      {children ? <>{children}</> : null}
     </View>
-  )
+  );
 }

package/components/EProfileScreenLayout.tsx

@@ -0,0 +1,111 @@
+import { Animated, ImageBackground, View } from "react-native";
+// import tw from '../../../lib/tailwind'
+import tw from "../lib/tailwind"
+import EButtonIcon from "./EButtonIcon";
+import EText from "./EText";
+import React, { useCallback, useRef } from "react";
+import Constants from "expo-constants";
+import { SCREEN_HEIGHT } from "@gorhom/bottom-sheet";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import ProfileHeader from "./ProfileHeader";
+
+
+interface IProps {
+    profileName: string;
+    titleText?: string;
+    uniqueCode: string;
+    body: JSX.Element;
+}
+
+export default function EProfileScreenLayout( { profileName, uniqueCode, body, titleText } : IProps) {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const [headerScrolled, setHeaderScrolled] = React.useState(false);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    Animated.spring(scrollY, {
+      toValue: headerScrolled ? 0 : -100,
+      speed: 2,
+      delay: 1,
+      bounciness: 1,
+      useNativeDriver: true,
+    }).start();
+
+    Animated.spring(opacity, {
+      toValue: headerScrolled ? 0.975 : 0,
+      speed: 2,
+      delay: 1,
+      bounciness: 1,
+      useNativeDriver: true,
+    }).start();
+  }, [headerScrolled]);
+
+
+
+  return (
+    <View style={tw``}>
+      <StatusBar
+        style={"light"}
+        animated
+      />
+      <Animated.View
+        style={[
+          tw`absolute top-0 left-0 right-0 z-10`,
+          {
+            transform: [{ translateY: scrollY }],
+            opacity,
+          },
+        ]}
+      >
+        <ImageBackground
+          style={[tw`flex-1`, {}]}
+          source={require("../assets/images/bg-profile.jpg")}
+        >
+          <View
+            style={[
+              tw`flex-1 pl-3 pb-3 flex-row items-center `,
+              { paddingTop: Constants.statusBarHeight + 4 },
+            ]}
+          >
+            <EButtonIcon
+              iconColor={"white"}
+              size={20}
+              onPress={() => navigation.goBack()}
+            />
+            <EText size="lg" style={tw`text-white font-bold ml-2`}>
+              Profile
+            </EText>
+          </View>
+        </ImageBackground>
+      </Animated.View>
+
+      <Animated.ScrollView
+        onScroll={(event) => {
+          const scrolling = event.nativeEvent.contentOffset.y;
+          scrolling > 40 ? setHeaderScrolled(true) : setHeaderScrolled(false);
+        }}
+        style={[tw`flex-1 bg-white`, { minHeight: SCREEN_HEIGHT, paddingBottom: 100 }]}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={false}
+        decelerationRate={"fast"}
+        contentContainerStyle={{
+          paddingBottom: 100
+        }}
+      >
+
+        <ProfileHeader 
+          name={profileName?.trim() || ""}
+          title={uniqueCode || ""}
+          titleText={titleText ? titleText : "Unique Code"}
+        />
+
+        <View style={tw`px-4 mt-8 flex-1`}>
+            {body}
+        </View>
+
+      </Animated.ScrollView>
+    </View>
+  );
+}

package/components/EProgressBar.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, StyleSheet, View } from 'react-native';
+import tw from "fln-espranza/lib/tailwind";
+import { Colors } from "fln-espranza/utils/Color";
+
+interface IProps {
+    progress: number;
+    type: "stepper" | "bar";
+}
+
+export default function EProgressBar({ progress, type }: IProps) {
+
+
+    const barWidth = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.spring(barWidth, {
+            toValue: progress,
+            bounciness: 0,
+            speed: 7,
+            useNativeDriver: false,
+        }).start();
+    }, [progress]);
+    return (
+        <>
+            {type === "stepper" ? <View style={[tw`h-2 w-14 bg-slate-200 overflow-hidden mr-2`, {
+                borderRadius: 40,
+            }]}>
+                <Animated.View
+                    style={[StyleSheet.absoluteFill, { backgroundColor: Colors['primary-base'], width: barWidth }]}
+
+                />
+            </View>
+                :   
+                
+                <View style={[tw`h-1 w-full bg-white/10 overflow-hidden mt-1`, {
+                    borderRadius: 40,
+                }]}>
+                    <View
+                    style={[tw`h-1 w-[${progress}%] bg-[${Colors['primary-base']}]`]}
+        
+                    />
+                </View>
+    }
+        </>
+    )
+}

package/components/EQuestionSerialNumberLabel.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import tw from '../lib/tailwind';
+import { Colors } from '../utils/Color';
+import EText from './EText';
+// import { EText } from '../../../components'
+
+interface IProps{
+    label: string;
+}
+
+export default function EQuestionSerialNumberLabel( { label } : IProps) {
+  return (
+   <EText size={"sm"} style={[tw`font-extrabold`, {color: Colors['primary-base']}]}>
+    {label}
+   </EText>
+  )
+}

package/components/EQuestionText.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import tw from '../lib/tailwind';
+import EText from './EText';
+interface IProps{
+    question: string;
+}
+
+export default function EQuestionText( { question } : IProps) {
+  return (
+    <EText size={"base"} style={ tw`font-medium mt-1`}>
+        {question}
+    </EText>
+  )
+}