jornada-ui 0.4.4 → 0.4.6

package/src/components/weekly-table/index.tsx

@@ -1,142 +1,138 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { Dimensions, ScrollView } from "react-native";
-
-// components
-import Box from "../box";
-import { RowTable } from "./components/row-table";
-
-// helpers
-import { handlecalcularTotalHoras } from "./helpers/calcular-total-horas";
-import { handleCalcularJornada } from "./helpers/calcular-jornada";
-
-// typings
-import type { WeekCalendarProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-const WeeklyTable = forwardRef<any, WeekCalendarProps>((props, ref): React.ReactElement => {
-  const { semana } = props;
-
-  const totalHoras = handlecalcularTotalHoras(semana);
-  const totalKms = semana.reduce((acc, d) => acc + (d.kms ?? 0), 0);
-  const totalPicos = semana.reduce((acc, d) => acc + (d.picos ?? 0), 0);
-  const totalFalhas = semana.reduce((acc, d) => acc + (d.falhas ?? 0), 0);
-
-  const { width: screenWidth } = Dimensions.get("window");
-  const colWidths = {
-    dia: screenWidth * 0.14,
-    data: screenWidth * 0.14,
-    jorna: screenWidth * 0.14,
-    kms: screenWidth * 0.14,
-    picos: screenWidth * 0.14,
-    falhas: screenWidth * 0.18,
-  };
-
-  return (
-    <ScrollView horizontal ref={ref}>
-      <Box width={"100%"}>
-        {/* Cabeçalho */}
-        <Box
-          flexStyle={{ flexDirection: "row" }}
-          backgroundColor={theme.colors.blue[400]}
-          borderStyled={{
-            borderTopLeftRadius: theme.borderWidths.thin_bold,
-            borderTopRightRadius: theme.borderWidths.thin_bold,
-            borderColor: theme.colors.blue[400],
-          }}
-        >
-          <RowTable texto="DIA" bold color={theme.colors.neutral[25]} customWidth={colWidths.dia} />
-          <RowTable
-            texto="DATA"
-            bold
-            color={theme.colors.neutral[25]}
-            customWidth={colWidths.data}
-          />
-          <RowTable
-            texto="JORNA"
-            bold
-            color={theme.colors.neutral[25]}
-            customWidth={colWidths.jorna}
-          />
-          <RowTable texto="KMs" bold color={theme.colors.neutral[25]} customWidth={colWidths.kms} />
-          <RowTable
-            texto="PICOS"
-            bold
-            color={theme.colors.neutral[25]}
-            customWidth={colWidths.picos}
-          />
-          <RowTable
-            texto="FALHAS"
-            bold
-            color={theme.colors.neutral[25]}
-            customWidth={colWidths.falhas}
-          />
-        </Box>
-
-        {/* Linhas com os dados */}
-        {semana.map((dia, index) => (
-          <Box
-            key={index}
-            flexStyle={{ flexDirection: "row", justifyContent: "center" }}
-            paddingStyle={{ padding: 0 }}
-            backgroundColor={index % 2 === 0 ? theme.colors.neutral[50] : theme.colors.neutral[300]}
-          >
-            <RowTable texto={dia.dia ?? "-"} customWidth={colWidths.dia} />
-            <RowTable texto={dia.entrada ?? "-"} customWidth={colWidths.data} />
-            <RowTable
-              texto={handleCalcularJornada(dia.entrada, dia.saida)}
-              customWidth={colWidths.jorna}
-            />
-            <RowTable texto={(dia.kms ?? 0).toString()} customWidth={colWidths.kms} />
-            <RowTable texto={(dia.picos ?? 0).toString()} customWidth={colWidths.picos} />
-            <RowTable texto={(dia.falhas ?? 0).toString()} customWidth={colWidths.falhas} />
-          </Box>
-        ))}
-
-        {/* Linha de totais */}
-        <Box
-          flexStyle={{ flexDirection: "row" }}
-          backgroundColor={theme.colors.neutral[300]}
-          borderStyled={{
-            borderBottomLeftRadius: theme.borderWidths.thin_bold,
-            borderBottomRightRadius: theme.borderWidths.thin_bold,
-            borderColor: theme.colors.blue[400],
-          }}
-        >
-          <RowTable texto="TOTAL" bold customWidth={screenWidth * 0.28} />
-          <RowTable
-            texto={totalHoras}
-            customWidth={screenWidth * 0.14}
-            color={theme.colors.green[250]}
-            bold
-          />
-          <RowTable
-            texto={totalKms.toLocaleString("pt-BR")}
-            customWidth={screenWidth * 0.14}
-            color={theme.colors.green[250]}
-            bold
-          />
-          <RowTable
-            texto={totalPicos.toString()}
-            customWidth={screenWidth * 0.14}
-            color={theme.colors.green[250]}
-            bold
-          />
-          <RowTable
-            texto={totalFalhas.toString()}
-            customWidth={screenWidth * 0.18}
-            color={theme.colors.green[250]}
-            bold
-          />
-        </Box>
-      </Box>
-    </ScrollView>
-  );
-});
-
-export default asBaseComponent(React.memo(WeeklyTable));
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { Dimensions, ScrollView } from "react-native";
+
+// components
+import Box from "../box";
+import { RowTable } from "./components/row-table";
+
+// helpers
+import { handleCalcularTotalHoras } from "./helpers/calcular-total-horas";
+
+// typings
+import type { WeekCalendarProps } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+const WeeklyTable = forwardRef<any, WeekCalendarProps>((props, ref): React.ReactElement => {
+  const { semana } = props;
+
+  const totalHoras = handleCalcularTotalHoras(semana);
+
+  const totalKms = semana.reduce((acc, d) => acc + (d.kms ?? 0), 0);
+  const totalPicos = semana.reduce((acc, d) => acc + (d.picos ?? 0), 0);
+  const totalFalhas = semana.reduce((acc, d) => acc + (d.falhas ?? 0), 0);
+
+  const { width: screenWidth } = Dimensions.get("window");
+  const colWidths = {
+    dia: screenWidth * 0.14,
+    data: screenWidth * 0.14,
+    jorna: screenWidth * 0.14,
+    kms: screenWidth * 0.14,
+    picos: screenWidth * 0.14,
+    falhas: screenWidth * 0.18,
+  };
+
+  return (
+    <ScrollView horizontal ref={ref} contentContainerStyle={{ width: "100%" }}>
+      <Box width={"100%"}>
+        {/* Cabeçalho */}
+        <Box
+          flexStyle={{ flexDirection: "row" }}
+          backgroundColor={theme.colors.blue[400]}
+          borderStyled={{
+            borderTopLeftRadius: theme.borderWidths.thin_bold,
+            borderTopRightRadius: theme.borderWidths.thin_bold,
+            borderColor: theme.colors.blue[400],
+          }}
+        >
+          <RowTable texto="DIA" bold color={theme.colors.neutral[25]} customWidth={colWidths.dia} />
+          <RowTable
+            texto="DATA"
+            bold
+            color={theme.colors.neutral[25]}
+            customWidth={colWidths.data}
+          />
+          <RowTable
+            texto="JORNA"
+            bold
+            color={theme.colors.neutral[25]}
+            customWidth={colWidths.jorna}
+          />
+          <RowTable texto="KMs" bold color={theme.colors.neutral[25]} customWidth={colWidths.kms} />
+          <RowTable
+            texto="PICOS"
+            bold
+            color={theme.colors.neutral[25]}
+            customWidth={colWidths.picos}
+          />
+          <RowTable
+            texto="FALHAS"
+            bold
+            color={theme.colors.neutral[25]}
+            customWidth={colWidths.falhas}
+          />
+        </Box>
+
+        {/* Linhas com os dados */}
+        {semana.map((dia, index) => (
+          <Box
+            key={index}
+            flexStyle={{ flexDirection: "row", justifyContent: "center" }}
+            backgroundColor={index % 2 === 0 ? theme.colors.neutral[50] : theme.colors.neutral[300]}
+          >
+            <RowTable texto={dia.dia ?? "-"} customWidth={colWidths.dia} />
+            <RowTable texto={dia.entrada ?? "-"} customWidth={colWidths.data} />
+            <RowTable texto={dia.saida ?? "-"} customWidth={colWidths.jorna} />
+            <RowTable texto={(dia.kms ?? 0).toString()} customWidth={colWidths.kms} />
+            <RowTable texto={(dia.picos ?? 0).toString()} customWidth={colWidths.picos} />
+            <RowTable texto={(dia.falhas ?? 0).toString()} customWidth={colWidths.falhas} />
+          </Box>
+        ))}
+
+        {/* Linha de totais */}
+        <Box
+          flexStyle={{ flexDirection: "row" }}
+          backgroundColor={theme.colors.green[100]}
+          borderStyled={{
+            borderBottomLeftRadius: theme.borderWidths.thin_bold,
+            borderBottomRightRadius: theme.borderWidths.thin_bold,
+            borderColor: theme.colors.blue[400],
+          }}
+        >
+          <RowTable texto="TOTAL" bold customWidth={screenWidth * 0.28} />
+          <RowTable
+            texto={totalHoras}
+            customWidth={screenWidth * 0.14}
+            color={theme.colors.green[200]}
+            bold
+          />
+          <RowTable
+            texto={totalKms.toLocaleString("pt-BR")}
+            customWidth={screenWidth * 0.14}
+            color={theme.colors.green[250]}
+            bold
+          />
+          <RowTable
+            texto={totalPicos.toString()}
+            customWidth={screenWidth * 0.14}
+            color={theme.colors.green[250]}
+            bold
+          />
+          <RowTable
+            texto={totalFalhas.toString()}
+            customWidth={screenWidth * 0.18}
+            color={theme.colors.green[250]}
+            bold
+          />
+        </Box>
+      </Box>
+    </ScrollView>
+  );
+});
+
+export default asBaseComponent(React.memo(WeeklyTable));

package/src/index.tsx

@@ -39,6 +39,7 @@ export { default as TravelHistory } from "./components/travel-history";
 export { default as BottomMessageConexion } from "./components/bottom-message-conexion";
 export { default as ToastMessage } from "./components/toast-message";
 export { default as ModalTypeActivities } from "./components/modal-type-activities";
+export { default as ResumeRaking } from "./components/resume-raking";
 
 // adicionar o storybook + teste
 export { default as WeeklyHoursBalance } from "./components/weekly-hours-balance";

package/src/styles/theme/theme.ts

@@ -50,6 +50,7 @@ const colors = {
     950: "#94a3b8",
   },
   green: {
+    100: "#D4EDDA",
     200: "#25BA76",
     250: "#20AD48",
     400: "#49C63E",