jornada-ui 0.4.10 → 0.4.12

package/src/components/selects/select-option/styles.ts

@@ -1,75 +1,74 @@
-/**
- * IMPORTS
- */
-import { StyleSheet } from "react-native";
-
-// typings
-import { type ISelectDropDownProps } from "./interface";
-
-// theme
-import { theme } from "../../../styles/theme/theme";
-
-const styles = (props: ISelectDropDownProps) =>
-  StyleSheet.create({
-    container: {
-      width: "100%",
-      marginBottom: 16,
-    },
-    label: {
-      fontSize: props.sizeTitleLabel ?? 16,
-      fontWeight: "bold",
-      color: props.colortitleLabel ?? theme.colors.black[100],
-      marginBottom: 5,
-    },
-    selectBox: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      width: "100%",
-      height: 45,
-      borderWidth: 1,
-      borderColor: theme.colors.gray[700],
-      borderRadius: 10,
-      backgroundColor: theme.colors.neutral[25],
-      paddingHorizontal: 10,
-    },
-    selectedText: {
-      fontSize: 14,
-      color: "#666",
-    },
-    modalOverlay: {
-      flex: 1,
-      backgroundColor: "rgba(0,0,0,0.5)",
-      justifyContent: "center",
-      alignItems: "center",
-      padding: 24,
-    },
-    modalContainer: {
-      width: "100%",
-      backgroundColor: theme.colors.neutral[25],
-      borderRadius: 10,
-      padding: 15,
-      alignItems: "center",
-    },
-    option: {
-      width: "100%",
-      padding: 10,
-      alignItems: "flex-start",
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.gray[300],
-    },
-    optionText: {
-      fontSize: 14,
-      color: theme.colors.black[100],
-      fontWeight: "500",
-    },
-    closeButtonText: {
-      color: theme.colors.neutral[25],
-      fontWeight: "bold",
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+
+// typings
+import { type ISelectDropDownProps } from "./interface";
+
+// theme
+import { theme } from "../../../styles/theme/theme";
+
+const styles = (props: ISelectDropDownProps) =>
+  StyleSheet.create({
+    container: {
+      width: "100%",
+      marginBottom: 16,
+    },
+    label: {
+      fontSize: props.sizeTitleLabel ?? 16,
+      fontWeight: "bold",
+      color: props.colortitleLabel ?? theme.colors.black[100],
+      marginBottom: 5,
+    },
+    selectBox: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: 45,
+      borderWidth: 1,
+      borderColor: theme.colors.gray[700],
+      borderRadius: 10,
+      backgroundColor: props.backgroundColor ?? theme.colors.neutral[25],
+      paddingHorizontal: 10,
+    },
+    selectedText: {
+      fontSize: 14,
+      color: "#666",
+    },
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: "rgba(0,0,0,0.5)",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: 24,
+    },
+    modalContainer: {
+      width: "100%",
+      backgroundColor: theme.colors.neutral[25],
+      borderRadius: 10,
+      padding: 15,
+    },
+    option: {
+      width: "100%",
+      padding: 10,
+      alignItems: "flex-start",
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.gray[300],
+    },
+    optionText: {
+      fontSize: 14,
+      color: theme.colors.black[100],
+      fontWeight: "500",
+    },
+    closeButtonText: {
+      color: theme.colors.neutral[25],
+      fontWeight: "bold",
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/supply-error-card/index.tsx

@@ -22,13 +22,13 @@ import { theme } from "../../styles/theme/theme";
  * Componente SupplyErrorCard para a interação da  ui.
  */
 const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): React.ReactElement => {
-  const { backgroundColor, messages, handleOnPress } = props;
+  const { backgroundColor, errors, handleOnPress } = props;
   const [isExpanded, setIsExpanded] = useState(false);
 
   /**Função para alternar a expansão do card */
   const handleToggleExpand = () => setIsExpanded((prev) => !prev);
 
-  const firstMessage = messages?.[0];
+  const firstMessage = errors?.[0];
 
   return (
     <TouchableOpacity onPress={handleToggleExpand} activeOpacity={0.9}>
@@ -54,14 +54,14 @@ const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): Reac
 
           <Box width={"70%"} flexStyle={{ justifyContent: "center" }}>
             {isExpanded ? (
-              messages?.map((error, index) => (
+              errors?.map((error, index) => (
                 <TouchableOpacity
                   key={error?.id}
                   activeOpacity={0.7}
                   onPress={() => handleOnPress(error)}
                 >
                   <Typography
-                    text={`${index + 1}. ${error.mensagem ?? "Sem mensagens de erro"}`}
+                    text={`${index + 1}. ${error.descricao ?? "Sem mensagens de erro"}`}
                     color={theme.colors.red[900]}
                     size={theme.fontSizes.sm}
                     fontFamily={theme.fonts.inter_medium_500}
@@ -72,7 +72,7 @@ const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): Reac
               ))
             ) : (
               <Typography
-                text={firstMessage ? `1. ${firstMessage.mensagem}` : "Nenhum erro disponível"}
+                text={firstMessage ? `1. ${firstMessage.descricao}` : "Nenhum erro disponível"}
                 color={theme.colors.red[900]}
                 size={theme.fontSizes.sm}
                 fontFamily={theme.fonts.inter_medium_500}
@@ -89,7 +89,11 @@ const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): Reac
               textAlign: "center",
             }}
           >
-            <Icons icon={isExpanded ? "ARROW_CHEVRON_UP" : "ARROW_CHEVRON_DOWN"} size={32} />
+            <Icons
+              icon={isExpanded ? "ARROW_CHEVRON_UP" : "ARROW_CHEVRON_DOWN"}
+              size={32}
+              color={theme.colors.gray[800]}
+            />
           </Box>
         </Box>
       </Box>

package/src/components/supply-error-card/interface.d.ts

@@ -4,20 +4,14 @@
  */
 import { type DimensionValue, type ViewProps } from "react-native";
 
-// Objeto de mensagem
-type ErrorMessage = {
-  id: number;
-  mensagem: string;
-};
-
 /**
  * INTERFACE
  */
 type SupplyErrorCardProps = ViewProps & {
-  // Adicionando mensagem de eroo
-  messages?: ErrorMessage[];
+  /**Propiedade responsavel por armazenar os error */
+  errors?: any[];
 
-  handleOnPress: (data: ErrorMessage) => void;
+  handleOnPress: (data: any) => void;
 
   /**
    * TestID para testes automático e identificação

package/src/components/toast-message/index.tsx

@@ -1,74 +1,75 @@
-/**
- * IMPORTS
- */
-
-import React, { forwardRef, useMemo } from "react";
-import { View } from "react-native";
-
-// components
-import Typography from "../typography";
-
-// typings
-import type { ToastMessageCustoProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-import { styles } from "./styles";
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente ToastMessage para a exibição de mensagens de conexão.
- */
-const ToastMessage = forwardRef<any, ToastMessageCustoProps>(
-  ({ text1, text2, options }, ref): React.ReactElement => {
-    const borderColor = useMemo(() => {
-      const map = {
-        success: theme.colors?.green[400] ?? "#69C779",
-        alert: theme.colors?.blue[800] ?? "#87CEFA",
-        error: theme.colors?.red[500] ?? "#ef4444",
-      } as const;
-      return map[options];
-    }, [options, theme]);
-
-    return (
-      <View ref={ref} style={styles.wrapperToash}>
-        <View style={styles.wrapperBorder}>
-          <View
-            testID="border-custom"
-            style={[styles.borderCustom, { backgroundColor: borderColor }]}
-          />
-        </View>
-
-        <View style={styles.wrapperText}>
-          {!!text1 && (
-            <Typography
-              text={String(text1)}
-              fontFamily={theme.fonts.inter_medium_500}
-              color={"blue500"}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.lineHeight["2xl"]}
-              letterSpacing={"regular"}
-            />
-          )}
-
-          {!!text2 && (
-            <Typography
-              text={String(text2)}
-              fontFamily="inter_regular_400"
-              color={"black25"}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.lineHeight["2xl"]}
-              letterSpacing={"regular"}
-            />
-          )}
-        </View>
-      </View>
-    );
-  }
-);
-
-ToastMessage.displayName = "ToastMessage";
-
-/**
- * EXPORT
- */
-export default asBaseComponent(ToastMessage);
+/**
+ * IMPORTS
+ */
+
+import React, { forwardRef, useMemo } from "react";
+import { View } from "react-native";
+
+// components
+import Typography from "../typography";
+
+// typings
+import type { ToastMessageCustoProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+import { styles } from "./styles";
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente ToastMessage para a exibição de mensagens de conexão.
+ */
+const ToastMessage = forwardRef<any, ToastMessageCustoProps>(
+  ({ text1, text2, options }, ref): React.ReactElement => {
+    const borderColor = useMemo(() => {
+      const map = {
+        success: theme.colors?.green[400] ?? "#69C779",
+        alert: theme.colors?.blue[800] ?? "#87CEFA",
+        error: theme.colors?.red[500] ?? "#ef4444",
+      } as const;
+      return map[options];
+    }, [options, theme]);
+
+    return (
+      <View ref={ref} style={styles.wrapperToash}>
+        <View style={styles.wrapperBorder}>
+          <View
+            testID="border-custom"
+            style={[styles.borderCustom, { backgroundColor: borderColor }]}
+          />
+        </View>
+
+        <View style={styles.wrapperText}>
+          {!!text1 && (
+            <Typography
+              text={String(text1)}
+              fontFamily={theme.fonts.inter_medium_500}
+              color={"blue500"}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.lineHeight["2xl"]}
+              letterSpacing={"regular"}
+            />
+          )}
+
+          {!!text2 && (
+            <Typography
+              text={String(text2)}
+              fontFamily="inter_regular_400"
+              color={"black25"}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.lineHeight["2xl"]}
+              letterSpacing={"regular"}
+              marginBottom={4}
+            />
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+
+ToastMessage.displayName = "ToastMessage";
+
+/**
+ * EXPORT
+ */
+export default asBaseComponent(ToastMessage);

package/src/components/travel-history/index.tsx

@@ -210,7 +210,7 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                     text={`${status ?? "ABERTA"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
 
@@ -223,16 +223,16 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                 >
                   <Typography
                     style={{ flexShrink: 1 }}
-                    text={`Abastecimentos: `}
+                    text={`Próxima viagem: `}
                     size={theme.fontSizes.sm}
                     color={theme.colors.black[10]}
                     fontFamily={theme.fonts.inter_medium_500}
                   />
                   <Typography
-                    text={`${supply ?? "0"}`}
+                    text={`${nextTrip ?? "Não especificado"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
 
@@ -245,16 +245,16 @@ const TravelHistory = forwardRef<any, ITravelHistory>((props, ref): React.ReactE
                 >
                   <Typography
                     style={{ flexShrink: 1 }}
-                    text={`Próxima viagem: `}
+                    text={`Abastecimentos: `}
                     size={theme.fontSizes.sm}
                     color={theme.colors.black[10]}
                     fontFamily={theme.fonts.inter_medium_500}
                   />
                   <Typography
-                    text={`${nextTrip ?? "Não especificado"}`}
+                    text={`${supply ?? "0"}`}
                     size={theme.fontSizes.xs}
                     color={backgroundColor ?? theme.colors.black[180]}
-                    fontFamily={theme.fonts.inter_regular_400}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
                   />
                 </Box>
               </Box>

package/src/components/trip-details-card/index.tsx

@@ -17,11 +17,16 @@ import type { ITripDetailsCard } from "./interface";
 import { asBaseComponent } from "../../@types/as-base-component";
 
 const TripDetailsCard: React.FC<ITripDetailsCard> = ({
+  dataRegistro,
+  numeroCte,
   origem,
   destino,
   proximoCarregamento,
   peso,
   baseCalculo,
+  corBarra,
+  kmCarregado,
+  kmVazio,
 }) => {
   const [expanded, setExpanded] = useState(false);
 
@@ -53,7 +58,7 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
       <View
         style={{
           width: 15,
-          backgroundColor: theme.colors.orange[150],
+          backgroundColor: corBarra ?? theme.colors.orange[150],
           borderTopLeftRadius: theme.borderWidths.thick_medium,
           borderBottomLeftRadius: theme.borderWidths.thick_medium,
         }}
@@ -98,16 +103,16 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
             >
               <Typography
-                text="Origem: "
+                text={"Número CTE: "}
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
                 size={theme.fontSizes.sm}
               />
               <Typography
-                text={`${origem}`}
+                text={`${numeroCte || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
             </Box>
 
@@ -116,17 +121,53 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
               flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
             >
               <Typography
-                text="Destino: "
+                text="Data carregamento: "
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
                 size={theme.fontSizes.sm}
               />
               <Typography
-                text={`${destino}`}
+                text={`${dataRegistro || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Origem: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
                 size={theme.fontSizes.sm}
               />
+              <Typography
+                text={`${origem || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text="Destino: "
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${destino || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
             </Box>
 
             <Box
@@ -137,13 +178,13 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 text="Próximo carregamento: "
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
               <Typography
                 text={`${proximoCarregamento || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
             </Box>
 
@@ -155,13 +196,49 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 text={"Peso: "}
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
               <Typography
                 text={`${formatPeso(peso) || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km carregado: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmCarregado || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
+              />
+            </Box>
+
+            <Box
+              marginStyle={{ marginTop: theme.margins["1xs"] }}
+              flexStyle={{ flexDirection: "row", justifyContent: "flex-start" }}
+            >
+              <Typography
+                text={"Km vazio: "}
+                color={theme.colors.black[25]}
+                fontFamily={theme.fonts.inter_medium_500}
+                size={theme.fontSizes.xs}
+              />
+              <Typography
+                text={`${kmVazio || "Não informado"}`}
+                color={theme.colors.gray[700]}
+                fontFamily={theme.fonts.inter_regular_400}
+                size={theme.fontSizes.xs}
               />
             </Box>
 
@@ -173,13 +250,13 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
                 text="Base para cálculo do PRO: "
                 color={theme.colors.black[25]}
                 fontFamily={theme.fonts.inter_medium_500}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
               <Typography
                 text={`${formatBase(baseCalculo) || "Não informado"}`}
                 color={theme.colors.gray[700]}
                 fontFamily={theme.fonts.inter_regular_400}
-                size={theme.fontSizes.sm}
+                size={theme.fontSizes.xs}
               />
             </Box>
           </>

package/src/components/trip-details-card/interface.d.ts

@@ -5,5 +5,8 @@ export interface ITripDetailsCard {
   proximoCarregamento?: string;
   peso?: number;
   baseCalculo?: number;
-  descricao: string;
+  corBarra?: string;
+  numeroCte: number;
+  kmCarregado?: number,
+  kmVazio?: number,
 }