jornada-ui 0.4.15 → 0.4.17

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;

package/src/components/notification-card/index.tsx

@@ -0,0 +1,123 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+import Button from "../button";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type { INotificationCardProps } from "./interface";
+
+/**
+ * Componente NotificationCard
+ */
+const NotificationCard: React.FC<INotificationCardProps> = forwardRef<View, INotificationCardProps>(
+  ({ variant = "read", title, description, actionLabel, onPress, onPressAction, testID }, ref) => {
+    const isWarning = variant === "unread";
+
+    // cor da borda lateral
+    const borderColor = isWarning ? theme.colors.orange[150] : theme.colors.blue[525];
+
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        <Box
+          ref={ref}
+          testID={testID ?? "notification-card"}
+          flexStyle={{ flexDirection: "row" }}
+          borderStyled={{
+            borderWidth: 1,
+            borderColor: isWarning ? theme.colors.orange[150] : theme.colors.neutral[200],
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          marginStyle={{ marginBottom: 12 }}
+          backgroundColor={isWarning ? theme.colors.neutral[500] : theme.colors.neutral[25]}
+        >
+          {/* borda fixa lateral esquerda */}
+          <Box
+            width={8}
+            backgroundColor={borderColor}
+            borderStyled={{
+              borderTopLeftRadius: theme.borderWidths.thick_medium,
+              borderBottomLeftRadius: theme.borderWidths.thick_medium,
+            }}
+          />
+
+          {/* Conteúdo do card */}
+          <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.sm }}>
+            {/* Header */}
+            <Box
+              flexStyle={{ flexDirection: "row", alignItems: "center" }}
+              marginStyle={{ marginBottom: 6 }}
+            >
+              <Icons icon="BELL" color={borderColor} size={20} />
+              <Typography
+                text={title}
+                fontFamily={theme.fonts.inter_bold}
+                fontWeight="700"
+                size={theme.fontSizes.md}
+                color={theme.colors.black[100]}
+                marginLeft={8}
+              />
+            </Box>
+
+            {/* Texto */}
+            <Typography
+              text={description}
+              numberOfLines={isWarning ? 2 : 4}
+              ellipsizeMode="tail"
+              size={theme.fontSizes.sm}
+              lineHeight={theme.lineHeight.md}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.gray[700]}
+              marginBottom={isWarning && actionLabel ? 12 : 0}
+            />
+
+            {/* Ação opcional */}
+            {actionLabel && onPressAction && (
+              <Button
+                isLoading={false}
+                title={actionLabel}
+                onPress={onPressAction}
+                backgroundColor={theme.colors.neutral[25]}
+                borderStyled={{
+                  borderWidth: 1,
+                  borderColor: theme.colors.red[500],
+                  borderRadius: 12,
+                }}
+                buttonTextStyle={{
+                  color: theme.colors.red[500],
+                  fontSize: theme.fontSizes.sm,
+                  fontFamily: theme.fonts.inter_medium_500,
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                style={{ alignSelf: "flex-start", paddingHorizontal: 12 }}
+              />
+            )}
+          </Box>
+        </Box>
+      </TouchableOpacity>
+    );
+  }
+);
+
+NotificationCard.displayName = "NotificationCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationCard);

package/src/components/notification-card/interface.ts

@@ -0,0 +1,18 @@
+/**
+ * IMPORTS
+ */
+
+interface INotificationCardProps {
+  variant?: "read" | "unread";
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onPress?: () => void;
+  onPressAction?: () => void;
+  testID?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { type INotificationCardProps };

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

@@ -0,0 +1,180 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { Modal, TouchableOpacity, Image, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typings
+import type { INotificationDetailCardProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente NotificationDetailCard
+ */
+const NotificationDetailCard: React.FC<INotificationDetailCardProps> = forwardRef<
+  View,
+  INotificationDetailCardProps
+>(({ title, description, fileUrl, fileType = "image", testID }, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  function openFile() {
+    if (fileType === "image") {
+      setVisible(true);
+    } else if (fileUrl) {
+      import("react-native").then(({ Linking }) => {
+        Linking.openURL(fileUrl).catch((err) => console.warn("Erro ao abrir arquivo:", err));
+      });
+    }
+  }
+
+  const borderColor = theme.colors.blue[500];
+
+  return (
+    <Box
+      ref={ref}
+      testID={testID ?? "notification-detail-card"}
+      flexStyle={{ flexDirection: "row" }}
+      borderStyled={{
+        borderWidth: 1,
+        borderColor: theme.colors.neutral[200],
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+      marginStyle={{ marginBottom: 16 }}
+      backgroundColor={theme.colors.neutral[25]}
+    >
+      {/* borda fixa lateral esquerda */}
+      <Box
+        width={8}
+        backgroundColor={borderColor}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thick_medium,
+          borderBottomLeftRadius: theme.borderWidths.thick_medium,
+        }}
+      />
+
+      {/* Conteúdo do card */}
+      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.md }}>
+        {/* header */}
+        <Typography
+          text={title}
+          fontFamily={theme.fonts.inter_bold}
+          fontWeight="700"
+          size={theme.fontSizes.md}
+          color={theme.colors.black[100]}
+          marginBottom={8}
+        />
+
+        {/* texto */}
+        <Typography
+          text={description}
+          size={theme.fontSizes.sm}
+          lineHeight={theme.lineHeight.md}
+          color={theme.colors.gray[700]}
+          marginBottom={fileUrl ? 12 : 0}
+        />
+
+        {/* arquivo (se existir) */}
+        {fileUrl && (
+          <TouchableOpacity
+            testID="button"
+            onPress={openFile}
+            activeOpacity={0.8}
+            style={{
+              borderRadius: theme.borderWidths.thick_medium,
+              overflow: "hidden",
+              borderWidth: 1,
+              borderColor: theme.colors.gray[300],
+            }}
+          >
+            {fileType === "image" ? (
+              <Box
+                borderStyled={{
+                  borderWidth: 2,
+                  borderColor: theme.colors.blue[525],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              >
+                <Image
+                  source={{ uri: fileUrl }}
+                  style={{
+                    width: "100%",
+                    height: 180,
+                    borderRadius: theme.borderWidths.thick_medium,
+                    borderWidth: 2,
+                    borderColor: theme.colors.blue[525],
+                  }}
+                  resizeMode="cover"
+                />
+              </Box>
+            ) : (
+              <Box
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+                paddingStyle={{ padding: theme.paddings.sm }}
+              >
+                <Typography
+                  text={`Abrir arquivo (${fileType.toUpperCase()})`}
+                  fontFamily={theme.fonts.inter_medium_500}
+                  color={theme.colors.blue[500]}
+                  size={theme.fontSizes.md}
+                />
+                <Icons icon="FILES" size={20} color={theme.colors.blue[500]} />
+              </Box>
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      {/* modal para zoom da imagem */}
+      {fileType === "image" && (
+        <Modal visible={visible} transparent animationType="fade">
+          <View
+            style={{
+              flex: 1,
+              backgroundColor: "rgba(0,0,0,0.9)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setVisible(false)}
+              style={{ position: "absolute", top: 40, right: 20 }}
+            >
+              <Icons icon="CLOSED" size={28} color={theme.colors.neutral[25]} />
+            </TouchableOpacity>
+
+            <Image
+              source={{ uri: fileUrl }}
+              style={{
+                width: "90%",
+                height: "70%",
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              resizeMode="contain"
+            />
+          </View>
+        </Modal>
+      )}
+    </Box>
+  );
+});
+
+NotificationDetailCard.displayName = "NotificationDetailCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationDetailCard);

package/src/components/notification-details-card/interface.ts

@@ -0,0 +1,16 @@
+/**
+ * IMPORTS
+ */
+
+interface INotificationDetailCardProps {
+  title: string;
+  description: string;
+  fileUrl?: string; // link para arquivo (png, pdf, csv, etc.)
+  fileType?: "image" | "pdf" | "csv" | "other";
+  testID?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { type INotificationDetailCardProps };