jornada-ui 0.4.11 → 0.4.13

package/src/components/modals/modal-create-activitie/index.tsx

@@ -0,0 +1,210 @@
+/**
+ * IMPORTS
+ */
+import React, { useMemo, useState, useCallback } from "react";
+import { Modal, View, Pressable } from "react-native";
+
+// components
+import Box from "../../box";
+import Button from "../../button";
+
+import Typography from "../../typography";
+
+import ActivityFields from "../../selects/select-date-and-hours";
+
+import SelectOption from "../../selects/select-option";
+
+// commons
+import { Icons } from "../../../common/icons-svg";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// helpers
+import { OPTIONS } from "./helpers";
+
+// typings
+import type { IDateAndHoursProps, IModalCreateActivitieProps } from "./interface";
+
+// styles / theme
+import { theme } from "../../../styles/theme/theme";
+import { styles } from "./styles";
+
+const ModalCreteActivitie: React.FC<IModalCreateActivitieProps<any>> = React.memo(
+  ({ visible, onClose, onPressConfirm, textTitle }) => {
+    const [dateAndHours, setDateAndHours] = useState<IDateAndHoursProps>({
+      date: "",
+      hours: "00:00",
+    });
+
+    // estados controlados mínimos
+    const [selectedActivitie, setSelectedActivitie] = useState<string | null>(
+      OPTIONS[0]?.value ?? null
+    );
+
+    // label do motivo derivada com memo
+    const activitieLabel = useMemo(
+      () => OPTIONS.find((activitie) => activitie.value === selectedActivitie)?.label ?? null,
+      [selectedActivitie]
+    );
+
+    // handlers estáveis
+    const handleChangeReason = useCallback((value: string | null) => {
+      setSelectedActivitie(value);
+    }, []);
+
+    const handleCancel = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+
+    const handleConfirm = useCallback(() => {
+      onPressConfirm?.({
+        reasonValue: selectedActivitie,
+        label: activitieLabel,
+        dateAndHours: dateAndHours,
+      });
+
+      onClose?.();
+    }, [onPressConfirm, onClose, activitieLabel, selectedActivitie, dateAndHours]);
+
+    return (
+      <Modal
+        animationType="fade"
+        transparent
+        visible={visible}
+        onRequestClose={handleCancel}
+        statusBarTranslucent
+      >
+        <Pressable style={styles.overlay} onPress={handleCancel}>
+          <Box
+            width="90%"
+            backgroundColor={theme.colors.orange[500]}
+            borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+            paddingStyle={{
+              paddingLeft: theme.paddings["2xs"],
+              paddingRight: theme.paddings["2xs"],
+              paddingTop: theme.paddings.sm,
+              paddingBottom: theme.paddings.sm,
+            }}
+          >
+            <View style={styles.headerRow}>
+              <Icons
+                icon="EXCLAMATION_TRIANGLE"
+                color={theme.colors.orange[500]}
+                background={theme.colors.neutral[300]}
+                size={22}
+              />
+              <Typography
+                text={textTitle ?? "Incluir atividade"}
+                color={theme.colors.neutral[25]}
+                marginLeft={theme.margins["2xs"]}
+                fontFamily={theme.fonts.inter_bold}
+                fontWeight="700"
+                size={theme.fontSizes.lg}
+              />
+            </View>
+
+            <Box
+              backgroundColor={theme.colors.neutral[300]}
+              paddingStyle={{ padding: theme.paddings.xs }}
+              borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+            >
+              <Typography
+                text="Preencha os dados da atividade que deseja incluir."
+                color={theme.colors.black[100]}
+                fontFamily={theme.fonts.inter_regular_400}
+                fontWeight="400"
+                lineHeight={theme.lineHeight["2xl"]}
+                size={theme.fontSizes.sm}
+                marginBottom={16}
+              />
+
+              <SelectOption
+                titleLabel="Selecione um motivo"
+                sizeTitleLabel={18}
+                dataOption={OPTIONS as any}
+                handleSelectDown={handleChangeReason}
+                backgroundColor={theme.colors.neutral[300]}
+              />
+
+              <ActivityFields
+                disabled={false}
+                icon={"CALENDAR"}
+                value={"09/09/2025"}
+                onPressConfirm={(value) =>
+                  setDateAndHours({ date: value, hours: dateAndHours?.hours })
+                }
+              />
+
+              <ActivityFields
+                disabled={false}
+                icon={"TIMER"}
+                value={"00:00"}
+                onPressConfirm={(value) =>
+                  setDateAndHours({ date: dateAndHours?.date, hours: value })
+                }
+              />
+
+              <View style={styles.actions}>
+                <Button
+                  title="CANCELAR"
+                  onPress={handleCancel}
+                  width="48%"
+                  height={40}
+                  isLoading={false}
+                  disabled={false}
+                  backgroundColor={theme.colors.neutral[300]}
+                  buttonTextStyle={{
+                    color: theme.colors.blue[500],
+                    fontFamily: theme.fonts.inter_medium_500,
+                    fontSize: theme.fontSizes.xs,
+                    fontWeight: "500",
+                  }}
+                  flexStyle={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                  }}
+                  borderStyled={{
+                    borderWidth: theme.borderWidths.thin,
+                    borderColor: theme.colors.blue[100],
+                    borderRadius: theme.borderWidths.thick_medium,
+                  }}
+                />
+
+                <Button
+                  title="CONFIRMAR"
+                  onPress={handleConfirm}
+                  width="48%"
+                  height={40}
+                  isLoading={false}
+                  disabled={false}
+                  backgroundColor={theme.colors.blue[500]}
+                  buttonTextStyle={{
+                    color: theme.colors.neutral[25],
+                    fontFamily: theme.fonts.inter_medium_500,
+                    fontSize: theme.fontSizes.xs,
+                    fontWeight: "500",
+                  }}
+                  flexStyle={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                  }}
+                  borderStyled={{
+                    borderWidth: theme.borderWidths.thin,
+                    borderColor: theme.colors.blue[100],
+                    borderRadius: theme.borderWidths.thick_medium,
+                  }}
+                />
+              </View>
+            </Box>
+          </Box>
+        </Pressable>
+      </Modal>
+    );
+  }
+);
+
+ModalCreteActivitie.displayName = "ModalCreteActivitie";
+export default asBaseComponent(ModalCreteActivitie);

package/src/components/modals/modal-create-activitie/interface.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-unused-vars */
+/**
+ * IMPORTS
+ */
+
+type IModalCreateActivitieProps<T> = {
+  visible: boolean;
+  textTitle?: string;
+  options?: T;
+  onClose: () => void;
+  onPressConfirm: (value: T) => void;
+};
+
+type IDateAndHoursProps = {
+  date: string;
+  hours: string;
+};
+
+/**
+ * EXPORTS
+ */
+export type { IModalCreateActivitieProps, IDateAndHoursProps };

package/src/components/modals/modal-create-activitie/styles.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+import { theme } from "../../../styles/theme/theme";
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: theme.shadows.z1,
+  },
+  card: { width: "90%" },
+  headerRow: { marginBottom: 10, marginLeft: 4, flexDirection: "row", alignItems: "center" },
+  content: { padding: theme.paddings.xs },
+  actions: { marginTop: 16, flexDirection: "row", justifyContent: "space-between" },
+});
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/modals/modal-journey-rectification/index.tsx

@@ -0,0 +1,236 @@
+/**
+ * IMPORTS
+ */
+import React, { useState } from "react";
+import { Modal, View } from "react-native";
+
+// components
+import Box from "../../box";
+import Typography from "../../typography";
+import Button from "../../button";
+import SelectOption from "../../selects/select-option";
+import InputDateTime from "../../inputs/input-date-time";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IModalJourneyRectificationProps } from "./interface";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// styles
+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" },
+];
+
+const ModalJourneyRectification: React.FC<IModalJourneyRectificationProps> = ({
+  visible,
+  onClose,
+  modalConfirm,
+  textTitle,
+}) => {
+  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 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);
+    }
+    return out;
+  };
+
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.6)",
+        }}
+      >
+        <Box
+          width={"90%"}
+          backgroundColor={theme.colors.orange[500]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            paddingLeft: theme.paddings["2xs"],
+            paddingRight: theme.paddings["2xs"],
+            paddingTop: theme.paddings.sm,
+            paddingBottom: theme.paddings.sm,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: 10, marginLeft: 4 }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Icons
+              icon="EXCLAMATION_TRIANGLE"
+              color={theme.colors.orange[500]}
+              background={theme.colors.neutral[300]}
+              size={22}
+            />
+            <Typography
+              text={`${textTitle ?? "Incluir atividade"}`}
+              color={theme.colors.neutral[25]}
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.lg}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            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]}
+              fontFamily={theme.fonts.inter_regular_400}
+              size={theme.fontSizes.md}
+              marginBottom={16}
+            />
+
+            <SelectOption
+              titleLabel="Selecione atividade"
+              sizeTitleLabel={18}
+              dataOption={options}
+              // Onde o motivo é RECEBIDO: aqui no callback
+              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)} // ***
+              backgroundColor="#f5f5f5"
+              colortitleLabel="#333"
+            />
+
+            <InputDateTime
+              mode="time"
+              titleLabel="Horário"
+              // Onde a hora é RECEBIDA: no onChange abaixo
+              value={selectedTime} // *** controlado
+              onChange={(d) => setSelectedTime(d)} // ***
+              backgroundColor="#f5f5f5"
+              colortitleLabel="#333"
+            />
+
+            <Box
+              marginStyle={{ marginTop: 4 }}
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+            >
+              <Button
+                title="CANCELAR"
+                onPress={onClose}
+                width={"48%"}
+                height={40}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: theme.colors.blue[100],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+
+              <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%"}
+                height={40}
+                isLoading={isLoading}
+                disabled={isLoading}
+                backgroundColor={theme.colors.blue[500]}
+                buttonTextStyle={{
+                  color: theme.colors.neutral[25],
+                  fontFamily: "Inter-Medium",
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};
+
+ModalJourneyRectification.displayName = "ModalJourneyRectification";
+
+export default asBaseComponent(ModalJourneyRectification);

package/src/components/modals/modal-journey-rectification/interface.d.ts

@@ -0,0 +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 };

package/src/components/modals/modal-to-confimations/index.tsx

@@ -0,0 +1,182 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Modal, Text, View } from "react-native";
+
+// components
+import Box from "../../box";
+import Button from "../../button";
+import Typography from "../../typography";
+
+// commons / svg
+import { Icons } from "../../../common/icons-svg";
+
+// typings
+import type { IModalToConfirmationsProps } from ".//interface";
+import { asBaseComponent } from "../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../styles/theme/theme";
+
+/**
+ * Componente ModalToConfirmations para a interação da  ui.
+ */
+const ModalToConfirmations: React.FC<IModalToConfirmationsProps> = ({
+  visible,
+  onClose,
+  onPressConfirm,
+  textTitle,
+  text1,
+  text2,
+  titleButtonCancel,
+  titleButtonConfirm,
+  backgroundColor,
+}) => {
+  return (
+    <Modal animationType="fade" transparent visible={visible}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: theme.shadows.z1,
+        }}
+      >
+        <Box
+          width={"90%"}
+          backgroundColor={theme.colors.orange[500]}
+          borderStyled={{
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          paddingStyle={{
+            paddingLeft: theme.paddings["2xs"],
+            paddingRight: theme.paddings["2xs"],
+            paddingTop: theme.paddings.sm,
+            paddingBottom: theme.paddings.sm,
+          }}
+        >
+          <Box
+            marginStyle={{ marginBottom: 10, marginLeft: 4 }}
+            flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          >
+            <Icons
+              icon="EXCLAMATION_TRIANGLE"
+              color={theme.colors.orange[500]}
+              background={theme.colors.neutral[300]}
+              size={22}
+            />
+            <Typography
+              text={`${textTitle ?? "TITULO NÃO INFORMADO"}`}
+              color={theme.colors.neutral[25]}
+              marginLeft={theme.margins["2xs"]}
+              fontFamily={theme.fonts.inter_bold_700}
+              size={theme.fontSizes.lg}
+            />
+          </Box>
+
+          <Box
+            backgroundColor={theme.colors.neutral[300]}
+            paddingStyle={{
+              padding: theme.paddings.xs,
+            }}
+            borderStyled={{
+              borderRadius: theme.borderWidths.thick_medium,
+            }}
+          >
+            <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+              <Text
+                style={{
+                  color: theme.colors.orange[150],
+                  fontFamily: theme.fonts.inter_semi_bold_600,
+                  marginBottom: text2 ? 16 : 8,
+                }}
+              >
+                <Typography
+                  text={`${text1} `}
+                  size={theme.fontSizes.sm}
+                  fontFamily={theme.fonts.inter_regular_400}
+                  fontWeight="400"
+                  color={theme.colors.black[180]}
+                  lineHeight={24}
+                  letterSpacing={"regular"}
+                />
+                {text2}
+              </Text>
+            </Box>
+
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+            >
+              <Button
+                title={titleButtonCancel ?? "CANCELAR"}
+                onPress={onClose}
+                width={text2 ? "48%" : "100%"}
+                height={40}
+                isLoading={false}
+                disabled={false}
+                backgroundColor={backgroundColor ?? theme.colors.neutral[300]}
+                buttonTextStyle={{
+                  color: backgroundColor ? theme.colors.neutral[25] : theme.colors.blue[100],
+                  fontFamily: theme.fonts.inter_medium_500,
+                  fontSize: theme.fontSizes.xs,
+                  fontWeight: "500",
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+                borderStyled={{
+                  borderWidth: theme.borderWidths.thin,
+                  borderColor: theme.colors.blue[100],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              />
+
+              {text2 && (
+                <Button
+                  title={titleButtonConfirm ?? "CONFIRMAR"}
+                  onPress={() => {
+                    onPressConfirm();
+                    onClose();
+                  }}
+                  width={"48%"}
+                  height={40}
+                  isLoading={false}
+                  disabled={false}
+                  backgroundColor={theme.colors.blue[500]}
+                  buttonTextStyle={{
+                    color: theme.colors.neutral[25],
+                    fontFamily: theme.fonts.inter_medium_500,
+                    fontSize: theme.fontSizes.xs,
+                    fontWeight: "500",
+                  }}
+                  flexStyle={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                  }}
+                  borderStyled={{
+                    borderWidth: theme.borderWidths.thin,
+                    borderColor: theme.colors.blue[100],
+                    borderRadius: theme.borderWidths.thick_medium,
+                  }}
+                />
+              )}
+            </Box>
+          </Box>
+        </Box>
+      </View>
+    </Modal>
+  );
+};
+
+ModalToConfirmations.displayName = "ModalToConfirmations";
+
+export default asBaseComponent(ModalToConfirmations);