jornada-ui 0.4.15 → 0.4.16

package/lib/typescript/module/src/stories/notification-details-card/notification-details-card.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import NotificationDetailCard from "../../components/notification-details-card";
+/**
+ * META
+ */
+declare const meta: Meta<typeof NotificationDetailCard>;
+export default meta;
+type Story = StoryObj<typeof NotificationDetailCard>;
+/**
+ * STORIES
+ */
+export declare const SomenteTexto: Story;
+export declare const TextoComImagem: Story;
+export declare const TextoComPdf: Story;
+export declare const TextoComCsv: Story;
+//# sourceMappingURL=notification-details-card.stories.d.ts.map

package/lib/typescript/module/src/stories/notification-details-card/notification-details-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-details-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/notification-details-card/notification-details-card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,sBAAsB,MAAM,4CAA4C,CAAC;AAKhF;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,sBAAsB,CA8C7C,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

package/lib/typescript/module/src/stories/user-journey-work-card/user-journey-work-card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-journey-work-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/user-journey-work-card/user-journey-work-card.stories.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAK1E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAiC1C,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC"}
+{"version":3,"file":"user-journey-work-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/user-journey-work-card/user-journey-work-card.stories.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAK1E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAsC1C,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,mBAAmB,EAAE,KAejC,CAAC"}

package/lib/typescript/module/src/styles/global/theme-provider.d.ts

@@ -25,6 +25,7 @@ export declare const useTheme: () => {
             200: string;
             300: string;
             400: string;
+            500: string;
         };
         black: {
             10: string;

package/lib/typescript/module/src/styles/global/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/styles/global/theme-provider.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEjE,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiC,CAAC"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/styles/global/theme-provider.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEjE,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiC,CAAC"}

package/lib/typescript/module/src/styles/theme/theme.d.ts

@@ -24,6 +24,7 @@ export declare const theme: {
             200: string;
             300: string;
             400: string;
+            500: string;
         };
         black: {
             10: string;

package/lib/typescript/module/src/styles/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/styles/theme/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AAgLH;;GAEG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUjB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/styles/theme/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AAiLH;;GAEG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jornada-ui",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/common/icons-svg/constants/index.ts

@@ -59,6 +59,7 @@ const SVG_NAME = {
   CHEVRON_DOWN: "chevron-down",
   CHEVRON_UP: "chevron-up,",
   TRASH: "trash",
+  DOWNLOAD: "download",
 };
 /**
  * EXPORTS

package/src/common/icons-svg/download/index.tsx

@@ -0,0 +1,52 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+// typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconDownload: React.FC<ISvgProps> = ({ color, size, background }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "40"}
+    height={size ?? "40"}
+    fill="none"
+    viewBox="0 0 40 40"
+  >
+    {/* Círculo de fundo opcional */}
+    {background && (
+      <Path
+        fill={background}
+        stroke={background}
+        strokeWidth="1.5"
+        d="M20 38c9.941 0 18-8.059 18-18S29.941 2 20 2 2 10.059 2 20s8.059 18 18 18"
+      />
+    )}
+
+    {/* Seta para baixo */}
+    <Path
+      stroke={color ?? "#000"}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M20 10v16M13 19l7 7 7-7"
+    />
+
+    {/* Base de suporte */}
+    <Path
+      stroke={color ?? "#000"}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M10 28h20"
+    />
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconDownload };

package/src/common/icons-svg/index.tsx

@@ -66,6 +66,7 @@ import { SvgIconHourglass } from "./hourglass";
 import { SvgIconIsland } from "./island";
 import { SvgIconPlusContainer } from "./plus-container";
 import { SvgIconPlusTrash } from "./trash";
+import { SvgIconDownload } from "./download";
 
 const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
   switch (icon) {
@@ -213,6 +214,9 @@ const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
     case "RECUSED":
       return <SvgIconRecused color={color} size={size} icon={"RECUSED"} />;
 
+    case "DOWNLOAD":
+      return <SvgIconDownload color={color} size={size} icon={"BED"} />;
+
     case "EXCLAMATION_CIRCLE":
       return (
         <SvgIconExclamationCircle

package/src/components/card-report/interface.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable no-undef */
+ 
 /**
  * IMPORTS
  */

package/src/components/inputs/input-date-time/index.tsx

@@ -15,8 +15,9 @@ import type { IInputDateTimeProps } from "./interface";
 // styles
 import { styles } from "./styles";
 import { theme } from "../../../styles/theme/theme";
+import Typography from "../../typography";
 
-/** formatadores no mesmo estilo simples dos seus componentes */
+/** formatadores simples */
 function fmtDate(d: Date) {
   const dd = String(d.getDate()).padStart(2, "0");
   const mm = String(d.getMonth() + 1).padStart(2, "0");
@@ -47,7 +48,6 @@ const InputDateTime = forwardRef<any, IInputDateTimeProps>((props, ref): React.R
     testID,
   } = props;
 
-  // estado interno quando o componente não é controlado
   const [inner, setInner] = useState<Date>(value ?? new Date());
   const [visible, setVisible] = useState(false);
 
@@ -83,14 +83,19 @@ const InputDateTime = forwardRef<any, IInputDateTimeProps>((props, ref): React.R
         disabled={disabled}
       >
         <Icons
-          size={theme.fontSizes["md"]}
+          size={theme.fontSizes.md}
           color={theme.colors.blue[500]}
-          icon={mode === "date" ? "CALENDAR" : "CALENDAR"}
+          icon={mode === "date" ? "CALENDAR" : "TIMER"}
           style={styles(styleProps).iconStandard}
         />
-        <Text style={human ? styles(styleProps).selectedText : styles(styleProps).placeholderText}>
-          {human || placeholder}
-        </Text>
+
+        <Typography
+          text={`${human || placeholder}`}
+          color={theme.colors.blue[500]}
+          fontFamily={theme.fonts.inter_medium_500}
+          size={theme.fontSizes.md}
+          marginLeft={100}
+        />
       </TouchableOpacity>
 
       <Modal
@@ -104,11 +109,7 @@ const InputDateTime = forwardRef<any, IInputDateTimeProps>((props, ref): React.R
           <View style={styles(styleProps).modalContainer}>
             <View style={{ width: "100%", alignItems: "flex-end" }}>
               <TouchableOpacity testID="close-icon" onPress={() => setVisible(false)}>
-                <Icons
-                  size={theme.fontSizes["md"]}
-                  color={theme.colors.blue[500]}
-                  icon={"CLOSED"}
-                />
+                <Icons size={theme.fontSizes.md} color={theme.colors.blue[500]} icon="CLOSED" />
               </TouchableOpacity>
             </View>
 

package/src/components/inputs/input-date-time/styles.ts

@@ -1,63 +1,64 @@
-import { StyleSheet } from "react-native";
-import { theme } from "../../../styles/theme/theme";
-import type { IInputDateTimeProps } from "./interface";
-
-const styles = (props: IInputDateTimeProps) =>
-  StyleSheet.create({
-    container: {
-      width: "100%",
-      marginBottom: 16,
-      opacity: props.disabled ? 0.6 : 1,
-    },
-    label: {
-      fontSize: props.sizeTitleLabel ?? 16,
-      fontWeight: "bold",
-      color: props.colortitleLabel ?? theme.colors.black[100],
-      marginBottom: 5,
-    },
-    selectBox: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "100%",
-      height: 45,
-      borderWidth: 1,
-      borderColor: theme.colors.gray[700],
-      borderRadius: 10,
-      backgroundColor: props.backgroundColor ?? theme.colors.neutral[25],
-      paddingHorizontal: 10,
-      position: "relative",
-    },
-    selectedText: {
-      flex: 1,
-      fontSize: 14,
-      textAlign: "center",
-      color: theme.colors.gray[700],
-    },
-    placeholderText: {
-      flex: 1,
-      textAlign: "center",
-      fontSize: 14,
-      color: theme.colors.gray[700],
-    },
-    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",
-    },
-    iconStandard: {
-      position: "absolute",
-      left: 10,
-    },
-  });
-
-export { styles };
+import { StyleSheet } from "react-native";
+import { theme } from "../../../styles/theme/theme";
+import type { IInputDateTimeProps } from "./interface";
+
+const styles = (props: IInputDateTimeProps) =>
+  StyleSheet.create({
+    container: {
+      width: "100%",
+      marginBottom: 16,
+      opacity: props.disabled ? 0.6 : 1,
+    },
+    label: {
+      fontSize: props.sizeTitleLabel ?? 16,
+      fontWeight: "bold",
+      color: props.colortitleLabel ?? theme.colors.black[100],
+      marginBottom: 5,
+    },
+    selectBox: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-start", // não centraliza o container todo
+      width: "100%",
+      height: 45,
+      borderWidth: 1,
+      borderColor: theme.colors.gray[700],
+      borderRadius: 10,
+      backgroundColor: props.backgroundColor ?? theme.colors.neutral[25],
+      paddingHorizontal: 10,
+      position: "relative",
+    },
+    selectedText: {
+      flex: 1,
+      fontSize: 14,
+      textAlign: "center", // centraliza o texto no espaço disponível
+      color: theme.colors.gray[700],
+      marginLeft: 44,
+    },
+    placeholderText: {
+      flex: 1,
+      textAlign: "center",
+      fontSize: 14,
+      color: theme.colors.gray[700],
+    },
+    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",
+    },
+    iconStandard: {
+      position: "absolute",
+      left: 12, // ícone fixo no canto esquerdo
+    },
+  });
+
+export { styles };

package/src/components/modals/{modal-journey-rectification → modal-edite-journey-rectification}/index.tsx

@@ -10,6 +10,7 @@ import Typography from "../../typography";
 import Button from "../../button";
 import SelectOption from "../../selects/select-option";
 import InputDateTime from "../../inputs/input-date-time";
+import MaintenanceDescriptionInput from "../../maintenance-description-input";
 
 // commons / svg
 import { Icons } from "../../../common/icons-svg";
@@ -22,44 +23,53 @@ import { asBaseComponent } from "../../../@types/as-base-component";
 import { theme } from "../../../styles/theme/theme";
 
 const options = [
-  { label: "Disp com veículo parado", value: "option1" },
-  { label: "Operação com veículo", value: "option2" },
-  { label: "Em carga", value: "option3" },
-  { label: "Em descarga", value: "option4" },
+  { label: "Disp com veículo parado", value: "8" },
+  { label: "Operação com veículo", value: "1" },
+  { label: "Em carga", value: "2" },
+  { label: "Em descarga", value: "3" },
 ];
 
+/**
+ * Componente modal para edição de atividade para interação do usuário.
+ */
 const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
   visible,
   onClose,
   modalConfirm,
   textTitle,
+  isLoading,
 }) => {
-  const [isLoading] = React.useState(false);
-
-  // *** DEFAULTS: já começa com um motivo, data e hora atuais
   const defaultReason = options[0]?.value ?? null;
-  const [selectedReason, setSelectedReason] = useState<string | null>(defaultReason); // ***
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date()); // ***
-  const [selectedTime, setSelectedTime] = useState<Date>(new Date()); // ***
 
-  // helpers de formatação
+  const [selectedReason, setSelectedReason] = useState<string | null>(defaultReason);
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [selectedTime, setSelectedTime] = useState<Date>(new Date());
+
+  // motivo digitado pelo usuário
+  const [editReason, setEditReason] = useState<string>("");
+  const [errorReason, setErrorReason] = useState<string>("");
+
+  // helpers
   const fmtDate = (d: Date) =>
     `${String(d.getDate()).padStart(2, "0")}/${String(d.getMonth() + 1).padStart(2, "0")}/${d.getFullYear()}`;
-
   const fmtTime = (d: Date) =>
     `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
 
-  // junta data + hora
-  const mergeDateTime = (date: Date | null, time: Date | null): Date | null => {
-    if (!date) return null;
-    const out = new Date(date);
-    if (time) {
-      out.setHours(time.getHours());
-      out.setMinutes(time.getMinutes());
-      out.setSeconds(0);
-      out.setMilliseconds(0);
+  const handleConfirm = () => {
+    if (!editReason.trim()) {
+      setErrorReason("Informe o motivo da edição!");
+      return;
     }
-    return out;
+
+    const payload = {
+      jr_tipo_atividade_id: selectedReason,
+      description: options.find((o) => o.value === selectedReason)?.label ?? null,
+      date_start: selectedDate ? fmtDate(selectedDate) : null,
+      hours_start: selectedTime ? fmtTime(selectedTime) : null,
+      edit_reason: editReason.trim(),
+    };
+
+    modalConfirm(payload);
   };
 
   return (
@@ -73,11 +83,9 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
         }}
       >
         <Box
-          width={"90%"}
+          width="90%"
           backgroundColor={theme.colors.orange[500]}
-          borderStyled={{
-            borderRadius: theme.borderWidths.thick_medium,
-          }}
+          borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
           paddingStyle={{
             paddingLeft: theme.paddings["2xs"],
             paddingRight: theme.paddings["2xs"],
@@ -85,6 +93,7 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
             paddingBottom: theme.paddings.sm,
           }}
         >
+          {/* Header */}
           <Box
             marginStyle={{ marginBottom: 10, marginLeft: 4 }}
             flexStyle={{ flexDirection: "row", alignItems: "center" }}
@@ -96,28 +105,28 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
               size={22}
             />
             <Typography
-              text={`${textTitle ?? "Incluir atividade"}`}
+              text={textTitle ?? "Editar atividade"}
               color={theme.colors.neutral[25]}
               marginLeft={theme.margins["2xs"]}
-              fontFamily={theme.fonts.inter_bold_700}
+              fontFamily={theme.fonts.inter_bold}
+              fontWeight="700"
               size={theme.fontSizes.lg}
             />
           </Box>
 
+          {/* Content */}
           <Box
             backgroundColor={theme.colors.neutral[300]}
-            paddingStyle={{
-              padding: theme.paddings.xs,
-            }}
-            borderStyled={{
-              borderRadius: theme.borderWidths.thick_medium,
-            }}
+            paddingStyle={{ padding: theme.paddings.xs }}
+            borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
           >
             <Typography
-              text={"Confirme as alterações antes de salvar."}
-              color={theme.colors.black[25]}
+              text="Confirme as alterações antes de salvar."
+              color={theme.colors.black[100]}
               fontFamily={theme.fonts.inter_regular_400}
-              size={theme.fontSizes.md}
+              fontWeight="400"
+              lineHeight={theme.lineHeight["2xl"]}
+              size={theme.fontSizes.sm}
               marginBottom={16}
             />
 
@@ -125,17 +134,15 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
               titleLabel="Selecione atividade"
               sizeTitleLabel={18}
               dataOption={options}
-              // Onde o motivo é RECEBIDO: aqui no callback
-              handleSelectDown={(value) => setSelectedReason(value)} // ***
+              handleSelectDown={(value) => setSelectedReason(value)}
               backgroundColor={theme.colors.neutral[300]}
             />
 
             <InputDateTime
               mode="date"
               titleLabel="Data"
-              // Onde a data é RECEBIDA: no onChange abaixo
-              value={selectedDate} // *** controlado
-              onChange={(d) => setSelectedDate(d)} // ***
+              value={selectedDate}
+              onChange={(d) => setSelectedDate(d)}
               backgroundColor="#f5f5f5"
               colortitleLabel="#333"
             />
@@ -143,13 +150,27 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
             <InputDateTime
               mode="time"
               titleLabel="Horário"
-              // Onde a hora é RECEBIDA: no onChange abaixo
-              value={selectedTime} // *** controlado
-              onChange={(d) => setSelectedTime(d)} // ***
+              value={selectedTime}
+              onChange={(d) => setSelectedTime(d)}
               backgroundColor="#f5f5f5"
               colortitleLabel="#333"
             />
 
+            <Box width="100%">
+              <MaintenanceDescriptionInput
+                label="Motivo da edição"
+                placeholderTextColor={theme.colors.gray[700]}
+                placeholder="Informe o motivo da edição"
+                value={editReason}
+                onChangeText={(text) => {
+                  setEditReason(text);
+                  if (text.trim()) setErrorReason("");
+                }}
+                error={errorReason}
+              />
+            </Box>
+
+            {/* Actions */}
             <Box
               marginStyle={{ marginTop: 4 }}
               flexStyle={{
@@ -160,14 +181,14 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
               <Button
                 title="CANCELAR"
                 onPress={onClose}
-                width={"48%"}
+                width="48%"
                 height={40}
-                isLoading={isLoading}
+                isLoading={isLoading!}
                 disabled={isLoading}
                 backgroundColor={theme.colors.neutral[300]}
                 buttonTextStyle={{
-                  color: theme.colors.blue[100],
-                  fontFamily: "Inter-Medium",
+                  color: theme.colors.blue[500],
+                  fontFamily: theme.fonts.inter_medium_500,
                   fontSize: theme.fontSizes.xs,
                   fontWeight: "500",
                 }}
@@ -185,29 +206,16 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
               />
 
               <Button
-                title="CONFIRMAR"
-                onPress={() => {
-                  const merged = mergeDateTime(selectedDate, selectedTime);
-
-                  const payload = {
-                    reasonValue: selectedReason,
-                    reasonLabel: options.find((o) => o.value === selectedReason)?.label ?? null,
-                    date: selectedDate ? fmtDate(selectedDate) : null,
-                    time: selectedTime ? fmtTime(selectedTime) : null,
-                    dateTimeISO: merged ? merged.toISOString() : null,
-                  };
-
-                  modalConfirm(payload);
-                  onClose();
-                }}
-                width={"48%"}
+                title="ALTERAR"
+                onPress={handleConfirm}
+                width="48%"
                 height={40}
-                isLoading={isLoading}
+                isLoading={isLoading!}
                 disabled={isLoading}
                 backgroundColor={theme.colors.blue[500]}
                 buttonTextStyle={{
                   color: theme.colors.neutral[25],
-                  fontFamily: "Inter-Medium",
+                  fontFamily: theme.fonts.inter_medium_500,
                   fontSize: theme.fontSizes.xs,
                   fontWeight: "500",
                 }}
@@ -233,4 +241,7 @@ const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
 
 ModalJourneyRectification.displayName = "ModalJourneyRectification";
 
+/**
+ * EXPORTS
+ */
 export default asBaseComponent(ModalJourneyRectification);

package/src/components/modals/{modal-journey-rectification → modal-edite-journey-rectification}/interface.d.ts

@@ -1,10 +1,10 @@
-/* eslint-disable no-undef */
-/* eslint-disable no-unused-vars */
-interface IModalJourneyRectificationProps {
-  visible: boolean;
-  onClose: () => void;
-  modalConfirm: (value: T) => void;
-  textTitle?: string;
-}
-
-export type { IModalJourneyRectificationProps };
+/* eslint-disable no-unused-vars */
+interface IModalJourneyRectificationProps {
+  visible: boolean;
+  onClose: () => void;
+  modalConfirm: (value: T) => void;
+  textTitle?: string;
+  isLoading?: boolean;
+}
+
+export type { IModalJourneyRectificationProps };

package/src/components/monthly-summary-table/interface.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable no-undef */
+ 
 /* eslint-disable no-unused-vars */
 export interface DayInfo {
   semana?: string;