fln-espranza 1.1.18 → 1.1.20

package/components/EStat.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ImageBackground, TouchableOpacity, View } from "react-native";
+import tw from "../../../lib/tailwind";
+import EText from "./EText";
+import { Colors } from "fln-espranza/utils/Color";
+
+interface IProps {
+  stat: string;
+  target: string;
+  label: string;
+  statColor: string;
+  iconR?: JSX.Element;
+}
+
+export default function EStat({
+  stat,
+  target,
+  label,
+  iconR,
+  statColor
+}: IProps) {
+
+  const percentage = Math.round((parseFloat(stat) / parseFloat(target)) * 100);
+  const pending = Number(stat) <= Number(target) ? parseFloat(target) - parseFloat(stat) : 0;
+
+  return (
+    <TouchableOpacity
+      style={[tw`bg-slate-00 flex-1 overflow-hidden items-center py-3`]}
+      activeOpacity={0.8}
+    >
+      <View style={tw` flex-row flex-1 justify-center`}>
+        <EText style={tw`text-xl font-bold ${statColor} -tracking-0.25 `}>
+          {stat}
+        </EText>
+        <EText  style={tw`ml-0.5 pt-1 text-slate-800 opacity-50 font-semibold -tracking-0.25`}>
+          / {target}
+        </EText>
+        {iconR}
+      </View>
+      <EText size="base" style={tw`font-bold text-slate-700 mb-0.5 mt-0.1`}>{label}</EText>
+      <EText size="sm" style={tw` text-slate-800 opacity-60`}>{pending} remaining</EText>
+    </TouchableOpacity>
+  );
+}

package/components/EStatReport.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { ImageBackground, TouchableOpacity, View } from "react-native";
+import tw from "../../../lib/tailwind";
+import EText from "./EText";
+import { Colors } from "fln-espranza/utils/Color";
+
+interface IProps {
+  stat: string;
+  target: string;
+  label: string;
+  statColor?: string;
+  iconR?: JSX.Element;
+}
+
+export default function EStatReport({
+  stat,
+  target,
+  label,
+  iconR,
+  statColor
+}: IProps) {
+
+  const percentage = Math.round((parseFloat(stat) / parseFloat(target)) * 100);
+  const pending = Number(stat) <= Number(target) ? parseFloat(target) - parseFloat(stat) : 0;
+
+  return (
+    <TouchableOpacity
+      style={[tw`bg-slate-00 flex-1 overflow-hidden items-center py-3`, {
+        // shadowColor: '#155e75',
+        // shadowOffset: { width: 0, height: 8 },
+        // shadowOpacity: .1,
+        // shadowRadius: 16,
+      }]}
+      activeOpacity={0.8}
+    >
+      <View style={tw` mb-2 flex-row flex-1 justify-center`}>
+        <EText style={tw`text-3xl font-bold ${statColor} -tracking-0.25 `}>
+          {stat}
+        </EText>
+        <EText  style={tw`ml-0.5 pt-1 text-slate-800 opacity-50 font-semibold -tracking-0.25`}>
+          / {target}
+        </EText>
+        {iconR}
+      </View>
+      <EText size="lg" style={tw`font-bold text-slate-700 mb-0.5`}>{label}</EText>
+      <EText size="sm" style={tw` text-slate-800 opacity-60`}>{pending} remaining</EText>
+    </TouchableOpacity>
+  );
+}

package/components/EText.tsx

@@ -2,6 +2,7 @@ import { Text, TextProps } from "react-native";
 import React from "react";
 import tw from "../lib/tailwind";
 
+
 interface ETextProps extends TextProps {
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "title";
   muted?: boolean;
@@ -30,7 +31,7 @@ export default function EText({
           size === "2xl" && "font-bold text-2xl",
           size === "3xl" && "font-bold text-3xl",
           size === "title" && "font-extrabold text-title text-2xl",
-          muted && "opacity-40"
+          muted && "opacity-60"
         ),
         style,
       ]}

package/components/ETextArea.tsx

@@ -0,0 +1,53 @@
+import { View, Text, TextInput, TextInputProps } from "react-native";
+import React, { useState } from "react";
+import EText from "./EText";
+import tw from "../lib/tailwind";
+
+interface EInputProps extends TextInputProps {
+  label?: string;
+  size?: "lg";
+  hasBackground?: boolean;
+  icon?: JSX.Element;
+}
+
+export default function ETextArea({
+  label,
+  size,
+  hasBackground,
+  icon,
+  ...props
+}: EInputProps) {
+  const [hasFocus, setHasFocus] = useState(false);
+  return (
+    <View style={[tw``, {}]}>
+      {label ? (
+        <EText size="sm" style={[tw`font-semibold text-slate-800`, {
+          // color: Colors["text-primary"]
+        }]}>
+          {label}
+        </EText>
+      ) : null}
+
+      <View
+        style={tw` mt-2 `}
+      >
+        <TextInput
+          style={[tw`h-24 rounded-lg p-4 border border-slate-300  ${
+            hasFocus ? "border-black " : ""
+          }`, {
+            textAlignVertical: 'top'
+          }]}
+          {...props}
+          multiline = {true}
+          onFocus={() => setHasFocus(!hasFocus)}
+          onBlur={() => setHasFocus(!hasFocus)}
+        />
+        {
+          icon ?
+            <>{icon}</>
+            : null
+        }
+      </View>
+    </View>
+  );
+}

package/components/ETimeInput.tsx

@@ -2,7 +2,6 @@ import moment from 'moment'
 import React, { useState } from 'react'
 import { View, TouchableOpacity } from 'react-native'
 import { ClockIcon } from 'react-native-heroicons/outline'
-import { onChange } from 'react-native-reanimated'
 import DateTimePicker from '@react-native-community/datetimepicker';
 import tw from '../../../lib/tailwind'
 import EText from './EText';
@@ -12,7 +11,7 @@ interface IProps {
     label: string;
     value: string;
     onChange: (value: string) => void;
-    style?: string;
+    style?: any;
 }
 
 export default function ETimeInput( { label, value,style, onChange }: IProps ) {
@@ -28,13 +27,13 @@ export default function ETimeInput( { label, value,style, onChange }: IProps ) {
 
   return (
 
-    <View style={tw`flex-1 ${ style ? style : ""}`}>
+    <View style={[tw`mb-4 `, style]}>
         <ELabel label={label} />
         <TouchableOpacity
             style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
             onPress={() => setShow(true)}
         >
-            <EText size={"sm"} style={tw`font-normal`}>
+            <EText size={"sm"} style={tw`font-normal  text-slate-400`}>
                 {
                 //  value ? value :   moment(date).format("hh:mm A")
                 value ? value : "Select Time"

package/components/ETimeLineCard.tsx

@@ -1,32 +1,34 @@
 import React from 'react'
 import { Dimensions, TouchableOpacity, View } from 'react-native'
-import { ChevronRightIcon } from 'react-native-heroicons/solid';
 import tw from '../lib/tailwind'
 import { Colors } from '../utils/Color';
 import EBadge from './EBadge'
-import EButton from './EButton';
-import EDateAndTimeCard from './EDateAndTimeCard'
-import EText from './EText'
+import EText from './EText';
+import EIconChevronRight from './icons/EIconChevronRight';
+import { CheckCircleIcon } from 'react-native-heroicons/solid';
 
 interface IProps {
   title: string;
   description: string;
   completed: boolean;
-  skipButton?: boolean;
   onPress?: () => void;
+  buttonText?: string;
+  disabled: boolean;
+  badgeText?: string;
 }
 
-export default function ETimeLineCard({ title, description, completed, skipButton, onPress }: IProps) {
+export default function ETimeLineCard({ title, description, completed, disabled, onPress, buttonText, badgeText }: IProps) {
   return (
     <TouchableOpacity
-      onPress={() =>  onPress && onPress()}
+      onPress={() => onPress && onPress()}
       style={[
         tw` rounded-lg p-4 mb-3 w-full border border}`,
         {
-          backgroundColor: completed ? Colors['primary-light']  : Colors['white'],
+          backgroundColor: completed ? Colors['primary-light'] : Colors['white'],
           borderColor: completed ? Colors['primary-base'] : Colors['border'],
         }
       ]}
+      disabled={disabled}
     >
 
       <View style={tw`flex-row justify-between `}>
@@ -34,35 +36,33 @@ export default function ETimeLineCard({ title, description, completed, skipButto
           <EText size="lg" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
             {title}
           </EText>
-          <EText size='sm' style={[tw`font-normal mt-1`, {color: Colors['text-body']}]}>
+          <EText size='sm' style={[tw`font-normal mt-1`, { color: Colors['text-body'] }]}>
             {description}
           </EText>
         </View>
         <View style={tw`ml-4`}>
-          <ChevronRightIcon style={[tw``,{ color: Colors['text-body']}]} size={16} />
+
+          <EBadge
+            color={completed ? `[${Colors['primary-base']}]` : `[${Colors.warning}]`}
+            size='sm'
+          >
+          {
+              badgeText ? badgeText : completed ? "Complete" : "Pending"}
+          </EBadge>
         </View>
       </View>
 
-      <View style={tw`mt-6 flex-row items-center justify-between`}>
-        <EBadge
-          completed={completed}
-          text={completed ? "Complete" : "Pending"}
-          color={completed ? Colors['primary-base'] : Colors.warning}
-          textColor={completed ? "text-white" : ""}
-          size="xs"
-          padding='py-1 px-3'
-          fontWeight='font-bold'
-        />
-
-        {
-          skipButton ? (
-            <TouchableOpacity>
-              <EText size="sm" style={[tw`ml-2 font-semibold`, {color: Colors['primary-base']}]}>
-                Skip
+      {
+        !disabled ? (
+          <View style={tw`mt-6 flex-row items-center justify-between`}>
+            <TouchableOpacity style={tw`flex-row`} onPress={onPress}>
+              <EText size="sm" style={[tw`ml-2 font-semibold`, { color: Colors['primary-base'] }]}>
+                {buttonText}
               </EText>
-            </TouchableOpacity>) : null
-        }
-      </View>
+              <EIconChevronRight size={20} style={[tw`ml-2`, { color: Colors['primary-base'] }]} />
+            </TouchableOpacity>
+          </View>) : <></>
+      }
     </TouchableOpacity>
   )
 }

package/components/MenuItems.tsx

@@ -32,7 +32,7 @@ export default function MenuItems({ title, icon, onPress }: IProps) {
         <EText
           size="base"
           style={[
-            tw`font-medium `,
+            tw`font-semibold `,
             {
               color: Colors["text-primary"],
             },

package/components/ModalLayout.tsx

@@ -1,10 +1,5 @@
-import {
-  View,
-  Dimensions,
-  ScrollView,
-  Platform,
-} from "react-native";
-import React, { } from "react";
+import { View, Dimensions, ScrollView, Platform } from "react-native";
+import React from "react";
 import Constants from "expo-constants";
 import tw from "../lib/tailwind";
 import EButtonIcon from "./EButtonIcon";
@@ -44,7 +39,9 @@ export default function ModalLayout({
       {/* HEADER */}
       <View
         style={[
-          tw`absolute top-0 right-0 left-0 px-6 pr-3 pt-2 z-10 w-full bg-white  ${title ? 'pb-1' : 'pb-0'}`,
+          tw`absolute top-0 right-0 left-0 px-6 pr-3 pt-2 z-10 w-full bg-white   ${
+            title ? "pb-2 shadow-md" : "pb-0"
+          }`,
           // {height: 64},
         ]}
       >
@@ -54,7 +51,7 @@ export default function ModalLayout({
           button={
             <EButtonIcon
               type="close"
-              iconColor="slate-800"
+              iconColor="slate-900"
               onPress={() => navigation.goBack()}
             />
           }
@@ -73,9 +70,13 @@ export default function ModalLayout({
       >
         {children}
       </ScrollView>
-      {bottomButton ? <View style={tw` px-6 mb-4 `}>
-        {bottomButton}
-      </View> : <></>}
+      {bottomButton ? (
+        <View style={tw` px-6 mb-4 pt-2 border-t border-slate-300`}>
+          {bottomButton}
+        </View>
+      ) : (
+        <></>
+      )}
     </View>
   );
 }

package/components/PageHeader.tsx

@@ -1,11 +1,11 @@
-import { View, Animated, Dimensions, Image } from "react-native";
-import React, { useEffect, useRef } from "react";
+import { View, Animated, Dimensions, TouchableOpacity } from "react-native";
+import React, { JSX, useEffect, useRef } from "react";
 import tw from "../lib/tailwind";
 import { useNavigation } from "@react-navigation/native";
-import EButtonIcon from "./EButtonIcon";
 import EText from "./EText";
 import Constants from "expo-constants";
-import { MenuIcon } from "react-native-heroicons/outline";
+import EIconArrowLeft from "./icons/EIconArrowLeft";
+import EIconMenu from "./icons/EIconMenu";
 
 const SCREEN_WIDTH = Dimensions.get("window").width;
 const HEADER_HEIGHT = 90;
@@ -18,6 +18,7 @@ interface PageHeaderProps {
   iconEnd?: JSX.Element;
   border?: boolean;
   menuButton?: boolean;
+  hideBackBtn?: boolean;
 }
 
 export default function PageHeader({
@@ -28,6 +29,7 @@ export default function PageHeader({
   iconEnd,
   border,
   menuButton,
+  hideBackBtn,
 }: PageHeaderProps) {
   const navigation = useNavigation();
 
@@ -48,82 +50,73 @@ export default function PageHeader({
     }).start();
   });
   return (
-    <View style={[tw`${curved ? "-mb-2" : ""} ${border ? "border-b border-slate-300" : ""} `, {}]}>
-      <View style={tw`overflow-hidden`}>
-        <Animated.View
-          style={[
-            tw`flex-row pr-4 pl-3 pb-3`,
-            {
-              paddingTop: Constants.statusBarHeight + 8,
-              transform: [{ translateX }],
-              opacity,
-            },
-          ]}
-        >
-          <Animated.View
-            style={[tw`-mt-2 left-3 absolute `, { transform: [{ translateX }], opacity, paddingTop: Constants.statusBarHeight + 8 }]}
-          >
-            {menuButton ?
-              <MenuIcon
+    // <View
+    //   style={[
+    //     tw`${"border-none border-slate-300 bg-white shadow-lg py-3"} `,
+    //     {},
+    //   ]}
+    // >
+    <View style={tw`overflow-hidden`}>
+      <View
+        style={[
+          tw`flex-row items-center px-3`,
+          {
+            paddingTop: Constants.statusBarHeight + 8,
+          },
+        ]}
+      >
+        {/* LEFT ICON */}
+        {hideBackBtn ? (
+          <></>
+        ) : (
+          <View style={[tw``]}>
+            {menuButton ? (
+              <TouchableOpacity
+                activeOpacity={0.6}
                 onPress={() => navigation?.openDrawer()}
-                size={24}
-                // onPress={() => navigation.navigate("Dashboard")}
-                style={tw`text-slate-900 mt-2`}
-              />
-              :
-
-              <EButtonIcon
-                iconColor={curved ? "white" : "tint-slate-900"}
-                size={24}
-                // onPress={() => navigation.navigate("Dashboard")}
+              >
+                <EIconMenu size={24} style={tw`text-slate-800`} />
+              </TouchableOpacity>
+            ) : (
+              <TouchableOpacity
+                activeOpacity={0.6}
                 onPress={() => navigation.goBack()}
-              />
-            }
-          </Animated.View>
-          <View style={tw`flex-1 items-center`}>
+                style={tw`p-1`}
+              >
+                <EIconArrowLeft
+                  iconColor={curved ? "white" : "tint-slate-900"}
+                  size={24}
+                  style={tw`text-slate-800`}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+        {/* TITLE */}
+        <View style={tw`flex-1 items-start px-3`}>
+          <EText
+            size="base"
+            style={tw.style("text-slate-700 font-bold")}
+            numberOfLines={1}
+          >
+            {title}
+          </EText>
+          {subtitle ? (
             <EText
-              size="base"
-              style={tw.style("text-black font-semibold ", curved && "text-white ")}
+              style={tw.style(
+                "text-slate-700 opacity-40 font-semibold mt-0.25"
+              )}
             >
-              {title}
+              {subtitle}
             </EText>
-            {subtitle ? (
-              <EText
-                style={tw.style(
-                  "text-slate-800 opacity-40 font-semibold mt-0.25",
-                  curved && "text-white "
-                )}
-              >
-                {subtitle}
-              </EText>
-            ) : null}
-          </View>
-
-          {iconEnd ? (
-            <View style={[tw`mt-0.5 items-center justify-center`, {}]}>
-              {iconEnd}
-            </View>
           ) : null}
-        </Animated.View>
-        {children ? <View style={tw.style("pb-6")}>{children}</View> : null}
-      </View>
-
-      {/* MASK */}
-      {curved ? (
-        <View
-          style={[
-            tw``,
-            { height: 32, width: SCREEN_WIDTH, backgroundColor: "#0547FA" },
-          ]}
-        >
-          <View
-            style={[
-              tw`bg-white -z-0`,
-              { height: 64, width: SCREEN_WIDTH, borderTopLeftRadius: 32 },
-            ]}
-          />
         </View>
-      ) : null}
+
+        {/* RIGHT ICON */}
+        {iconEnd ? <View style={[tw``, {}]}>{iconEnd}</View> : null}
+      </View>
+      {children ? <View style={tw.style("pb-6")}>{children}</View> : null}
     </View>
+    // </View>
   );
 }

package/components/PageHeaderSecondary.tsx

@@ -26,7 +26,9 @@ export default function PageHeaderSecondary({
     >
       <View style={tw` flex-1 justify-center items-center`}>
         {title ? (
-          <EText size="base" style={tw`font-semibold`}>
+          <EText 
+          size="lg"
+          style={tw`text-slate-800 font-bold`}>
             {title}
           </EText>
         ) : null}
@@ -36,7 +38,7 @@ export default function PageHeaderSecondary({
           </EText>
         ) : null}
       </View>
-      <View style={[tw`absolute right-3`, {
+      <View style={[tw`absolute right-0`, {
         paddingTop: Platform.OS === "android" ? insets.top + 8 : 8,
       }]}>{button}</View>
     </View>

package/components/ProfileHeader.tsx

@@ -0,0 +1,85 @@
+import { useNavigation } from "@react-navigation/native";
+import React, { useRef } from "react";
+import { Animated, ImageBackground, View } from "react-native";
+import EButtonIcon from "./EButtonIcon";
+import Avatar from "./Avatar";
+import EText from "./EText";
+import tw from "../lib/tailwind"
+import Constants from "expo-constants";
+
+interface IProps {
+  name: string;
+  titleText?: string;
+  title: string;
+}
+
+export default function ProfileHeader({ name, title, titleText }: IProps) {
+  const translateX = useRef(new Animated.Value(60)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    Animated.spring(translateX, {
+      toValue: 0,
+      stiffness: 40,
+      damping: 10,
+      useNativeDriver: true,
+    }).start();
+    Animated.spring(opacity, {
+      toValue: 1,
+      delay: 250,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  return (
+    <View style={tw`flex-1 overflow-hidden h-full`}>
+      <ImageBackground
+        style={[tw`h-full w-full`, {}]}
+        source={require("../assets/images/bg-profile.jpg")}
+      >
+        <Animated.View
+          style={[
+            tw`flex-row pr-4 pl-3 pb-3`,
+            {
+              paddingTop: Constants.statusBarHeight + 8,
+              transform: [{ translateX }],
+              opacity,
+            },
+          ]}
+        >
+          <Animated.View
+            style={[
+              tw`-mt-2 left-3 absolute `,
+              {
+                transform: [{ translateX }],
+                opacity,
+                paddingTop: Constants.statusBarHeight + 8,
+              },
+            ]}
+          >
+            <EButtonIcon
+              iconColor={"tint-white"}
+              size={20}
+              onPress={() => navigation.goBack()}
+            />
+          </Animated.View>
+        </Animated.View>
+        <View style={[tw`flex items-center mt-5 rounded-4xl `, {}]}>
+          <Avatar size="5xl" source={""} nameFirstLetter={name?.split("")[0]} />
+          <View style={tw`mt-6 mb-8 items-center`}>
+            <EText size="base" style={tw`font-bold text-white capitalize`}>
+              {name.toLocaleLowerCase().trim()}
+            </EText>
+            <EText
+              size="sm"
+              style={tw`mt-0.5 font-normal opacity-50 text-white`}
+            >
+              {titleText ? titleText : "Unique Code"} : {title}
+            </EText>
+          </View>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+}