fln-espranza 0.0.51 → 0.0.53

package/components/EBadge.tsx

@@ -1,24 +1,82 @@
-import React from 'react'
-import { View } from 'react-native'
+// 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';
+
+
+// interface IProps {
+//     text: string;
+//     bgColor: string;
+//     textColor: string
+//     completed?: boolean;
+// }
+
+// export default function EBadge({ text, completed, bgColor, textColor }: IProps) {
+//     return (
+//         <View style={[tw`flex-row p-1  px-2 bg-[${bgColor}] rounded-full`,]}>
+//             {completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
+//             <EText size='xs' style={tw`font-semibold text-[${textColor}]`}>
+//                 {text}
+//             </EText>
+//         </View>
+//     )
+// }
+
+import React from 'react';
 import tw from '../lib/tailwind';
+import {View} from 'react-native';
 import EText from './EText';
-import { CheckCircleIcon } from 'react-native-heroicons/solid';
 
 
-interface IProps {
-    text: string;
-    bgColor: string;
-    textColor: string
-    completed?: boolean;
-}
+// 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;
+  
+  // Badge Text Sizes
+  export const BADGE_TEXT_SIZES = {
+    sm: 'text-sm',
+    md: 'text-base',
+  };
 
-export default function EBadge({ text, completed, bgColor, textColor }: IProps) {
-    return (
-        <View style={[tw`flex-row p-1  px-2 bg-[${bgColor}] rounded-full`,]}>
-            {completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
-            <EText size='xs' style={tw`font-semibold text-[${textColor}]`}>
-                {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

@@ -13,7 +13,7 @@ interface EButtonProps extends TouchableOpacityProps {
   iconR?: JSX.Element;
   inline?: boolean;
   small?: boolean;
-  type?: "secondary" | "clear" | "primary";
+  type?: "secondary" | "clear" | "primary" | "white";
   disabled?: boolean;
   children: any;
 }
@@ -38,8 +38,9 @@ export default function EButton({
     >
       <View
         style={[
-          tw`flex-row justify-center items-center rounded-full border-2 border-black/5 ${small ? 'h-11 px-6' : 'h-14 px-8'} ${disabled ? "opacity-40" : ""} ${type === "clear"
-              ? "bg-transparent "
+          tw`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-6 h-11`
                 : `bg-[${Colors["primary-base"]}] shadow shadow-[${Colors["primary-base"]}]`
@@ -51,7 +52,7 @@ export default function EButton({
         {/* LABEL */}
         <EText
           style={[
-            tw`font-semibold ${small ? `text-sm` : ''} ${type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
+            tw`font-semibold ${small ? `text-sm` : ''} ${type === "clear" || type === "white" ? `text-[${Colors["primary-base"]}]` : "text-white"
               }`,
           ]}
         >

package/components/EListSchool.tsx

@@ -18,7 +18,7 @@ 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 flex-1`} numberOfLines={2}>
+      <EText size="base" style={tw`font-bold text-slate-800 mb-0.5 h-5`} numberOfLines={2}>
         {name}
       </EText>
       <View style={tw`flex-row items-center`}>

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/EProfile.tsx

@@ -10,6 +10,7 @@ interface IProps {
   subjectName?: string;
   border?: boolean;
   children?: JSX.Element;
+  showAvatar?: boolean;
 }
 
 export default function EProfile({
@@ -17,27 +18,27 @@ export default function EProfile({
   subjectName,
   border,
   children,
+  showAvatar = true
 }: IProps) {
   return (
     <View
       style={[
-        tw`flex-row items-center justify-between py-3 ${
-          border ? "border-b" : ""
-        }`,
+        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={name.split(" ")[0].charAt(0)}
-        />
+        /> : <></>}
         <View style={tw`ml-3`}>
           <EText
             size={"lg"}
             style={[
-              tw`font-bold text-slate-800 mb-0.5 capitalize`,
+              tw`font-bold text-slate-800 mb-0 capitalize`,
               { color: Colors["text-primary"] },
             ]}
           >

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/ETimeLineCard.tsx

@@ -5,6 +5,7 @@ import { Colors } from '../utils/Color';
 import EBadge from './EBadge'
 import EText from './EText';
 import EIconChevronRight from './icons/EIconChevronRight';
+import { CheckCircleIcon } from 'react-native-heroicons/solid';
 
 interface IProps {
   title: string;
@@ -40,13 +41,14 @@ export default function ETimeLineCard({ title, description, completed, disabled,
           </EText>
         </View>
         <View style={tw`ml-4`}>
+
           <EBadge
-            completed={completed}
-            text={
+            color={completed ? `[${Colors['primary-base']}]` : `[${Colors.warning}]`}
+            size='sm'
+          >
+          {
               badgeText ? badgeText : completed ? "Complete" : "Pending"}
-            bgColor={completed ? Colors['primary-base'] : Colors.warning}
-            textColor={"#ffff"}
-          />
+          </EBadge>
         </View>
       </View>
 

package/components/PageHeader.tsx

@@ -78,7 +78,9 @@ export default function PageHeader({
 
                 :
                 <TouchableOpacity activeOpacity={0.6}
-                  onPress={() => navigation.goBack()}>
+                  onPress={() => navigation.goBack()}
+                  style={tw`p-1`}
+                  >
                   <EIconArrowLeft
                     iconColor={curved ? "white" : "tint-slate-900"}
                     size={24}

package/index.ts

@@ -88,6 +88,9 @@ import EProfileScreenLayout from "./components/EProfileScreenLayout";
 import { EIconMale } from "./components/icons/EIconMale";
 import { EIconFemale } from "./components/icons/EIconFemale";
 import EIconDocumentCheck from "./components/icons/EIconDocumentCheck";
+import EStatReport from "./components/icons/EIconDocumentCheck";
+
+
 
 export {
   Avatar,
@@ -133,6 +136,7 @@ export {
   EProfileScreenLayout,
   ETextArea,
   ENotFoundPlaceholder,
+  EStatReport
 
   // ICONS
   EIconAdd,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {