Merge pull request #34 from fga-eps-mds/devel

Release 2

.github/workflows/release.yml

@@ -2,9 +2,15 @@ name: front-release
 
 on:
   push:
-    branches: [main, devel]
+    branches: [main]
     tags:
       - "v*"
+  pull_request:
+    branches:
+      - main
+      - devel
+    types: [closed]
+
 
 jobs:
   generate-release:

package.json

@@ -18,18 +18,19 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.16.4",
     "@mui/material": "^5.15.17",
-    "@mui/x-date-pickers": "^7.10.0",
+    "@mui/x-date-pickers": "^7.12.1",
     "@testing-library/react": "^14.3.1",
     "@vitest/coverage-v8": "^2.0.4",
-    "axios": "^1.7.2",
-    "dotenv": "^16.4.5",
+    "axios": "^1.3.1",
     "dayjs": "^1.11.11",
+    "dotenv": "^16.4.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-input-mask": "^2.0.4",
     "react-number-format": "^5.4.0",
     "react-router-dom": "^6.23.1",
     "vitest-sonar-reporter": "^2.0.0"

sonar-project.properties

@@ -7,8 +7,8 @@ sonar.host.url=https://sonarcloud.io
 sonar.language=js
 
 sonar.sources=src
-sonar.exclusions=src/_tests_/*, */metrics/*.py, vite.config.js, dist/, vitest.config.js
-sonar.tests=src
+sonar.exclusions=**/*.test.jsx, **/*.test.js, **/metrics/*.py, vite.config.ts, .vitest.config.js, dist/
+sonar.tests=src/
 sonar.test.inclusions=**/*.test.jsx, **/*.test.js
 sonar.javascript.lcov.reportPaths=./coverage/lcov.info
 sonar.testExecutionReportPaths=./coverage/coverage.xml

src/Components/BigModal/index.jsx

@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+import { Box, Modal } from "@mui/material";
+
+export default function BigModal({ show, children, handleClose }) {
+  return (
+    <Modal
+      open={show}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>{children}</Box>
+    </Modal>
+  );
+}
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 600,
+  bgcolor: "#f5f1e6", // Cor de fundo bege
+  boxShadow: 24,
+  p: 4,
+  border: "2px solid #d4af37", // Borda dourada
+  borderRadius: "10px", // Arredondamento dos cantos
+  color: "#4e4e4e", // Cor do texto
+  fontFamily: "'Roboto', sans-serif",
+};
+
+BigModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  handleClose: PropTypes.any,
+};

src/Components/Card/index.jsx

@@ -17,5 +17,5 @@ export default function Card({ children, className }) {
 
 Card.propTypes = {
   children: PropTypes.node,
-  className: PropTypes.string,
+  className: PropTypes.any,
 };

src/Components/CheckboxRow/index.jsx

@@ -0,0 +1,26 @@
+import PropTypes from "prop-types";
+import { Checkbox } from "@mui/material";
+
+const CheckboxRow = ({ label, state, setState }) => (
+  <div className="row">
+    <label>{label}</label>
+    {state.map((checked, index) => (
+      <Checkbox
+        key={index}
+        checked={checked}
+        onChange={() =>
+          setState((prev) => prev.map((v, i) => (i === index ? !v : v)))
+        }
+      />
+    ))}
+  </div>
+);
+
+// Definindo as prop-types para o componente CheckboxRow
+CheckboxRow.propTypes = {
+  label: PropTypes.string.isRequired,
+  state: PropTypes.arrayOf(PropTypes.bool).isRequired,
+  setState: PropTypes.func.isRequired,
+};
+
+export default CheckboxRow;

src/Components/Checklist/index.jsx

@@ -3,10 +3,16 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import Divider from "@mui/material/Divider";
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
+import "./index.css";
+import BigModal from "../BigModal";
+import { Grid, Typography } from "@mui/material";
 
 export default function CheckList({ items, value, onChange }) {
+  const [show, setShow] = useState(false);
+  const [user, setUser] = useState();
+
   const handleToggle = (e) => () => {
     const currentIndex = value.indexOf(e);
     const newChecked = [...value];
@@ -19,22 +25,143 @@ export default function CheckList({ items, value, onChange }) {
 
     onChange(newChecked);
   };
+
   return (
     <List>
-      {items.map((item, index) => (
+      {items.map((item) => (
         <React.Fragment key={item}>
-          <ListItem onClick={handleToggle(item)}>
+          <ListItem className="checklist-item">
+            <ListItemText
+              style={{ cursor: "pointer" }}
+              onClick={() => {
+                setShow(true);
+                setUser(item);
+              }}
+              primary={item.name}
+            />
             <Checkbox
-              edge="start"
-              checked={value.indexOf(item) !== -1}
+              edge="end"
+              checked={value.indexOf(item?._id) !== -1}
               tabIndex={-1}
+              onClick={handleToggle(item?._id)}
               disableRipple
+              sx={{
+                color: "#3D160D", // Cor para o estado desmarcado
+                "&.Mui-checked": {
+                  color: "#AE883C",
+                },
+              }}
             />
-            <ListItemText primary={item} />
           </ListItem>
-          {index !== items.length - 1 && <Divider />}
+          <Divider />
         </React.Fragment>
       ))}
+      <BigModal show={show} handleClose={() => setShow(false)}>
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Nome:</strong> {user?.name}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Email:</strong> {user?.email}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Religião:</strong> {user?.religion}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Telefone:</strong> {user?.phone}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>CPF:</strong> {user?.cpf}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Data de Nascimento:</strong>{" "}
+              {new Date(user?.birthDate).toLocaleDateString("pt-BR")}{" "}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Sexo:</strong> {user?.sex}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12}>
+            <Typography variant="body1">
+              <strong>Endereço:</strong> {user?.address}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Naturalidade:</strong> {user?.naturalness}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>UF Naturalidade:</strong> {user?.uf_naturalidade}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Estado Civil:</strong> {user?.marialStatus}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Escolaridade:</strong> {user?.education}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Lotação:</strong> {user?.lotacao}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Cargo:</strong> {user?.position}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Organização Emissora:</strong> {user?.shipperOrganization}
+            </Typography>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Data de Contratação:</strong>{" "}
+              {new Date(user?.hiringDate).toLocaleDateString("pt-BR")}{" "}
+            </Typography>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Typography variant="body1">
+              <strong>Dependentes:</strong> {user?.dependents?.length || 0}
+            </Typography>
+          </Grid>
+        </Grid>
+      </BigModal>
     </List>
   );
 }

src/Components/DataSelect/index.jsx

@@ -4,20 +4,24 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import TextField from "@mui/material/TextField";
 import PropTypes from "prop-types";
 
-export default function DataSelect({ label, value, onChange }) {
+export default function DataSelect({ label, value, onChange, onBlur, erro }) {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DatePicker
         label={label}
         value={value}
         onChange={onChange}
-        format="DD/MM/YYYY" // Define o formato desejado
-        slots={{
+        format="DD/MM/YYYY"
+        onBlur={onBlur}
+        error={erro}
+        renderInput={{
           textField: (params) => <TextField {...params} variant="filled" />,
         }}
         sx={{
-          backgroundColor: "#EAE3D7",
-          margin: ".7rem",
+          "& .MuiInputBase-root": {
+            backgroundColor: "#EAE3D7",
+            margin: ".7rem",
+          },
           "& .MuiPickersCalendarHeader-root": {
             backgroundColor: "#ffffff",
           },
@@ -34,4 +38,6 @@ DataSelect.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func, // Added prop type for onBlur
+  erro: PropTypes.bool, // Added prop type for erro
 };