fln-espranza 1.1.17 → 1.1.19

package/.expo/README.md

@@ -1,15 +1,15 @@
-> Why do I have a folder named ".expo" in my project?
-
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-
-> What do the files contain?
-
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-
-> Should I commit the ".expo" folder?
-
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/settings.json

@@ -1,8 +1,8 @@
-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": null,
-  "https": false
-}
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

package/components/Avatar.tsx

@@ -22,7 +22,8 @@ export default function Avatar({ size, source, nameFirstLetter, textColor }: Ava
      "#2D3A5D",
     ]
 
-    let color = colors[Math.floor(Math.random() * colors.length)]
+    // let color = colors[Math.floor(Math.random() * colors.length)]
+    const [color, setColor] = React.useState(colors[Math.floor(Math.random() * colors.length)]);
   return (
     <View
       style={tw.style(
@@ -36,7 +37,7 @@ export default function Avatar({ size, source, nameFirstLetter, textColor }: Ava
       )}
     >
       {source ? <Image style={tw`w-full h-full `} source={source} /> : 
-      <EText style={tw`text-2xl font-extrabold text-white`}>{nameFirstLetter}</EText>}
+      <EText style={tw`text-xl font-bold text-white uppercase`}>{nameFirstLetter}</EText>}
     </View>
   );
 }

package/components/Drawer.tsx

@@ -1,97 +1,150 @@
-import React from "react";
-import { ScrollView, View, TouchableOpacity } from "react-native";
-import { HomeIcon,CalendarIcon, TemplateIcon, ViewBoardsIcon } from 'react-native-heroicons/solid';
-import { StyleSheet } from 'react-native';
-import tw from "../lib/tailwind";
-import EText from "./EText";
-import Spacer from "./Spacer";
-import Avatar from "./Avatar";
-import { Colors } from "../utils/Color";
-import MenuItems from "./MenuItems";
-
-type menuItems = {
-    title: string,
-    icon: any,
-    screen: string,
-} 
-
-interface IProps{
-    name: string,
-    profile: string,
-    menuItems: menuItems[];
-    navigation: any;
-}
-
-const Drawer = ({name,profile, menuItems,navigation }: IProps) => {
-  return (
-    <ScrollView
-      scrollEnabled={true}
-      showsVerticalScrollIndicator={false}
-      style={{
-        position: 'relative',
-        backgroundColor: '#ffffff',
-      }}>
-      <View style={tw`mx-4 pt-4`}>
-        <Spacer height={30} />
-
-        <View style={tw`flex w-full mt-5`}>
-          <View style={tw`flex-row items-center`}>
-            <Avatar
-              size="sm"
-              source={""}
-              nameFirstLetter={name?.split("")[0]}
-            />
-            <View style={tw`ml-3`}>
-              <EText size={"xl"} style={tw`font-bold -mt-1`}>{name}</EText>
-              <EText size="sm" style={[tw`font-normal`, {
-                color: Colors["text-body"]
-              }]}>
-                {profile}
-              </EText>
-            </View>
-          </View>
-        </View>
-
-        <Spacer height={30} />
-        {
-          menuItems.map((item, index) => {
-            return (
-              <MenuItems
-                key={index}
-                title={item.title}
-                icon={item.icon}
-                onPress={() => navigation.navigate(item.screen)}
-              />
-            )
-          })
-        }
-        <Spacer />
-        <Spacer />
-        <MenuItems
-          title="Profile"
-          onPress={() => navigation.navigate("ProfileScreen")}
-        />
-        <MenuItems
-          title="Settings"
-        />
-        <MenuItems
-          title="Logout"
-        />
-      </View>
-    </ScrollView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#fff',
-    padding: 10,
-  },
-  logoStyle: {
-    height: 20,
-    width: '80%',
-    alignSelf: 'center',
-  },
-});
-
-export default Drawer;
+import React from "react";
+import { ScrollView, View } from "react-native";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import Spacer from "./Spacer";
+import Avatar from "./Avatar";
+import { Colors } from "../utils/Color";
+import MenuItems from "./MenuItems";
+import EIconLogout from "./icons/EIconLogout";
+
+type menuItems = {
+  title: string;
+  icon: any;
+  screen: string;
+};
+
+interface IProps {
+  name: string;
+  profile: string;
+  menuItems: menuItems[];
+  secondMenuItems?: menuItems[];
+  secondMenuItemsTitle?: string;
+  navigation: any;
+  logout?: () => void;
+  rootRoute?: string;
+}
+
+const Drawer = ({
+  name,
+  profile,
+  menuItems,
+  navigation,
+  secondMenuItemsTitle,
+  secondMenuItems,
+  logout,
+  rootRoute,
+}: IProps) => {
+  return (
+    <ScrollView
+      scrollEnabled={true}
+      showsVerticalScrollIndicator={false}
+      style={{
+        position: "relative",
+        backgroundColor: "#ffffff",
+      }}
+    >
+      <View style={tw`mx-4 pt-4`}>
+        <Spacer height={30} />
+
+        <View style={tw`flex w-full mt-5 mr-5`}>
+          <View style={tw`flex-row items-center`}>
+            <Avatar
+              size="sm"
+              source={""}
+              nameFirstLetter={name?.split("")[0]}
+            />
+            <View style={tw`ml-3 mr-5`}>
+              <EText
+                size={"base"}
+                style={tw`font-bold -mt-1 lowercase capitalize mr-3`}
+              >
+                {name}
+              </EText>
+              <EText
+                size="sm"
+                style={[
+                  tw`font-normal`,
+                  {
+                    color: Colors["text-body"],
+                  },
+                ]}
+              >
+                {profile}
+              </EText>
+            </View>
+          </View>
+        </View>
+
+        <Spacer height={15} />
+        {menuItems.map((item, index) => {
+          return (
+            <MenuItems
+              key={index}
+              title={item.title}
+              icon={item.icon}
+              onPress={() => {
+                navigation.closeDrawer();
+
+                if (rootRoute) {
+                  navigation.navigate(rootRoute, {
+                    screen: item.screen,
+                  });
+                } else {
+                  navigation.navigate(item.screen);
+                }
+              }}
+            />
+          );
+        })}
+
+        {secondMenuItemsTitle ? (
+          <View style={tw`mt-8 mb-1`}>
+            <EText size="xs" style={tw`text-slate-400 font-semibold`}>
+              My Cluster
+            </EText>
+          </View>
+        ) : (
+          <></>
+        )}
+        {secondMenuItems && secondMenuItems?.length > 0 ? (
+          secondMenuItems.map((item, index) => {
+            return (
+              <MenuItems
+                key={index}
+                title={item.title}
+                icon={item.icon}
+                onPress={() => {
+                  navigation.closeDrawer();
+
+                  if (rootRoute) {
+                    navigation.navigate(rootRoute, {
+                      screen: item.screen,
+                    });
+                  } else {
+                    navigation.navigate(item.screen);
+                  }
+                }}
+              />
+            );
+          })
+        ) : (
+          <></>
+        )}
+
+        <MenuItems
+          title={"Logout"}
+          icon={
+            <EIconLogout
+              size={24}
+              style={tw`text-[${Colors["primary-base"]}]`}
+            />
+          }
+          onPress={() => logout && logout()}
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+export default Drawer;

package/components/EBadge.tsx

@@ -1,23 +1,54 @@
-import React from 'react'
-import { View } from 'react-native'
-import tw from '../lib/tailwind';
-import EText from './EText';
-import { CheckCircleIcon } from 'react-native-heroicons/solid';
+import React, { JSX } from "react";
+import tw from "../lib/tailwind";
+import { View } from "react-native";
+import EText from "./EText";
 
+// Badge Sizes
+export const BADGE_SIZES = {
+  sm: "p-0.75 px-2",
+  md: "p-0.75 px-3",
+};
+export type BadgeSize = keyof typeof BADGE_SIZES;
 
-interface IProps {
-    text: string;
-    color?: string;
-    completed?: boolean;
-}
+// Badge Text Sizes
+export const BADGE_TEXT_SIZES = {
+  sm: "text-sm",
+  md: "text-base",
+};
 
-export default function EBadge({ text, completed, color  }: IProps) {
-    return (
-        <View style={[tw`rounded-full flex-row p-1 px-2 ${completed ? 'bg-green-600' : color}`, ]}>
-            {completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
-            <EText size='xs' style={tw`font-semibold text-white`}>
-                {text}
-            </EText>
-        </View>
-    )
+interface EBadgeProps {
+  color?: string;
+  variant?: "solid" | "light";
+  size?: BadgeSize;
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
+  children: string;
 }
+
+const EBadge: React.FC<EBadgeProps> = ({
+  color = "blue-600",
+  variant = "solid",
+  size = "md",
+  iconLeft,
+  iconRight,
+  children,
+}) => {
+  const baseStyle = tw`flex-row self-start items-center rounded-full overflow-hidden bg-${color} 
+  ${variant === "light" && "bg-opacity-10"}
+  ${BADGE_SIZES[size]}`;
+
+  const textStyle = tw`font-semibold capitalize
+    ${variant === "light" ? `text-${color}` : "text-white"}
+    ${BADGE_TEXT_SIZES[size]}
+    `;
+
+  return (
+    <View style={baseStyle}>
+      {iconLeft}
+      <EText style={textStyle}>{children}</EText>
+      {iconRight}
+    </View>
+  );
+};
+
+export default EBadge;

package/components/EButton.tsx

@@ -1,6 +1,5 @@
 import {
   View,
-  Text,
   TouchableOpacity,
   TouchableOpacityProps,
 } from "react-native";
@@ -12,10 +11,9 @@ import { Colors } from "../utils/Color";
 interface EButtonProps extends TouchableOpacityProps {
   iconL?: JSX.Element;
   iconR?: JSX.Element;
-  secondary?: boolean;
   inline?: boolean;
   small?: boolean;
-  type?: "secondary" | "clear" | "primary";
+  type?: "secondary" | "clear" | "primary" | "white";
   disabled?: boolean;
   children: any;
 }
@@ -25,7 +23,6 @@ export default function EButton({
   children,
   iconL,
   iconR,
-  secondary,
   inline,
   small,
   type,
@@ -41,27 +38,25 @@ export default function EButton({
     >
       <View
         style={[
-          tw`h-14 flex-row justify-center items-center px-8 rounded-full ${disabled ? "opacity-60" : ""} ${
-            type === "clear"
-              ? "bg-transparent"
+          tw` mt-2 flex-row justify-center items-center rounded-full border-2 border-black/5 ${small ? 'h-10 px-4' : 'h-14 px-8'} ${disabled ? "opacity-40" : ""} ${type === "clear"
+            ? "bg-transparent "
+            : type === 'white' ? "bg-white"
               : type === "secondary"
-              ? `bg-[${Colors["secondary-base"]}] self-start px-5 h-11`
-              : `bg-[${Colors["primary-base"]}]`
-          }`,
+                ? `bg-[${Colors["secondary-base"]}] self-start px-6 h-11`
+                : `bg-[${Colors["primary-base"]}] shadow shadow-[${Colors["primary-base"]}]`
+            }`,
         ]}
       >
         {/* ICON LEFT */}
         {iconL ? <View style={tw`mr-1 -ml-2`}>{iconL}</View> : null}
         {/* LABEL */}
         <EText
-          size={"base"}
           style={[
-            tw`font-semibold ${
-              type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
-            }`,
+            tw`font-semibold ${small ? `text-sm` : ''} ${type === "clear" || type === "white" ? `text-[${Colors["primary-base"]}]` : "text-white"
+              }`,
           ]}
         >
-          {children } 
+          {children}
         </EText>
 
         {/* ICON RIGHT */}

package/components/EButtonIcon.tsx

@@ -1,7 +1,7 @@
 import { View, TouchableOpacity, TouchableOpacityProps } from "react-native";
 import React from "react";
 import tw from "../lib/tailwind";
-import { ArrowNarrowLeftIcon, XIcon } from "react-native-heroicons/solid";
+import { ArrowLeftIcon, XMarkIcon } from "react-native-heroicons/solid";
 
 interface EButtonIconProps extends TouchableOpacityProps {
   type?: "close";
@@ -27,9 +27,9 @@ export default function EButtonIcon({
         }`}
       >
         {type === "close" ? (
-          <XIcon size={20} style={tw`text-${iconColor? iconColor: ""}`} />
+          <XMarkIcon size={24} style={tw`text-${iconColor? iconColor: ""}`} />
         ) : (
-          <ArrowNarrowLeftIcon size={20} style={tw`text-${iconColor? iconColor : ""}`} />
+          <ArrowLeftIcon size={24} style={tw`text-${iconColor? iconColor : ""}`} />
         )}
       </View>
     </TouchableOpacity>

package/components/EDateAndTimeCard.tsx

@@ -1,49 +1,50 @@
 import React from "react";
 import { View } from "react-native";
-import { ClockIcon } from "react-native-heroicons/solid";
 import tw from "../lib/tailwind";
 import { Colors } from "../utils/Color";
 import EText from "./EText";
+import EIconClock from "./icons/EIconClock";
 
-interface IProps{
-    date: string;
-    month: string;
-    day: string;
-    time: string;
+interface IProps {
+  date: string;
+  month: string;
+  day?: string;
+  time?: string;
 
 }
 
-export default function EDateAndTimeCard( {date, month, day, time}: IProps) {
+export default function EDateAndTimeCard({ date, month, day, time }: IProps) {
   return (
     <View
-      style={[tw`flex-row pb-4 border-b`, { borderBottomColor: Colors.border }]}
+      style={[tw`flex-row pb-4`, { borderBottomColor: Colors.border }]}
     >
       <View
         style={[
-          tw`rounded-xl mb-2 px-3 py-1 items-center justify-center`,
+          tw`rounded-lg px-3 py-1 items-center justify-center`,
           { backgroundColor: Colors["primary-base"] },
         ]}
       >
         <EText size="xl" style={tw`font-bold text-white -mb-1`}>
           {date}
         </EText>
-        <EText size="xs" style={tw`font-bold text-white`}>
+        <EText size="xs" style={tw`font-bold text-white uppercase opacity-80`}>
           {month}
         </EText>
       </View>
-      <View style={tw`ml-3`}>
-        <EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
+      <View style={tw`ml-3 justify-center`}>
+        {/* <EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
           {day}
-        </EText>
-        <View style={tw`flex-row justify-center items-center mt-2`}>
-          <ClockIcon size={14} style={tw`text-slate-400`} />
+        </EText> */}
+        {
+          time ?<View style={tw`flex-row justify-center items-center mt-2`}>
+          <EIconClock size={16} style={tw`text-slate-500`} />
           <EText
             size="sm"
-            style={tw`ml-0.5 text-slate-400 font-medium`}
+            style={tw`ml-1 text-slate-500`}
           >
             {time}
           </EText>
-        </View>
+        </View> : null}
       </View>
     </View>
   );

package/components/EDateInput.tsx

@@ -1,27 +1,28 @@
 import moment from 'moment'
 import React, { useState } from 'react'
 import { View, TouchableOpacity } from 'react-native'
-import { ClockIcon } from 'react-native-heroicons/solid'
-import { onChange } from 'react-native-reanimated'
 import DateTimePicker from '@react-native-community/datetimepicker';
 import tw from '../../../lib/tailwind'
 import { CalendarIcon } from 'react-native-heroicons/outline';
 import  EText  from './EText';
 import ELabel from './ELabel';
+import { Colors } from 'fln-espranza/utils/Color'
+import DateTimePickerModal from "react-native-modal-datetime-picker";
 
 interface IProps {
     label: string;
     value: string;
     onChange: (value: string) => void;
-    style?: string;
+    style?: any;
+    placeholder?: string;
     maxDate?: Date;
     minDate?: Date;
 }
 
-export default function EDateInput({ label, value, style, maxDate, minDate, onChange }: IProps) {
+export default function EDateInput({ label, value, style, placeholder, maxDate, minDate, onChange }: IProps) {
     const [show, setShow] = useState(false);
 
-    const handleOnChange = (event: any, selectedDate: any) => {
+    const handleOnChange = (selectedDate: any) => {
         const currentDate = selectedDate;
         setShow(false);
         onChange(currentDate)
@@ -29,26 +30,26 @@ export default function EDateInput({ label, value, style, maxDate, minDate, onCh
 
     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 ? moment(value).format("DD/MM/YYYY") : "Select Date"
                     }
                 </EText>
-                {show ? <DateTimePicker
-                    testID="dateTimePicker"
-                    value={value ? new Date(value) : new Date()}
-                    mode={"date"}
-                    onChange={handleOnChange}
+                <DateTimePickerModal
+                    isVisible={show}
+                    mode="date"
+                    onConfirm={handleOnChange}
+                    onCancel={() => setShow(false)}
                     minimumDate={minDate}
                     maximumDate={maxDate}
-                /> : <></>}
-                <CalendarIcon size={20} style={tw`text-slate-500`} />
+                />
+                <CalendarIcon size={20} style={tw`text-[${Colors["primary-base"]}]`} />
             </TouchableOpacity>
         </View>
     )

package/components/EEmptyPlaceholder.tsx

@@ -0,0 +1,21 @@
+
+import React from 'react'
+import { ImageBackground, View } from 'react-native'
+import tw from "../lib/tailwind"
+import EText from "./EText";
+
+
+interface IProps{
+    text: string;
+}
+
+export default function EEmptyPlaceholder( { text }: IProps) {
+  return (
+    <View style={tw`flex justify-center items-center`}>
+        <ImageBackground source={require("../assets/images/empty.png")} style={{width: 200, height: 200}} />
+        <EText style={tw`text-center text-gray-800 mt-5`}>
+            {text}
+        </EText>
+    </View>
+  )
+}