fln-espranza 0.0.52 → 0.0.54

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/index.ts

@@ -88,6 +88,7 @@ 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 +134,7 @@ export {
   EProfileScreenLayout,
   ETextArea,
   ENotFoundPlaceholder,
+  EStatReport,
 
   // ICONS
   EIconAdd,
@@ -180,5 +182,4 @@ export {
   EIconMale,
   EIconFemale,
   EIconDocumentCheck,
-  
 };

package/package.json

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