Us04

package.json

@@ -14,19 +14,23 @@
     "postinstall": "node_modules/.bin/husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.15.17",
-    "@testing-library/react": "^14.0.0",
-    "@vitest/coverage-v8": "^2.0.4",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.4",
+    "@mui/material": "^5.16.4",
+    "@mui/x-date-pickers": "^7.10.0",
     "axios": "^1.7.2",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.3.3",
+    "dayjs": "^1.11.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-number-format": "^5.4.0",
     "react-router-dom": "^6.23.1",
+    "@testing-library/react": "^14.0.0",
+    "@vitest/coverage-v8": "^2.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3",
     "vitest-sonar-reporter": "^2.0.0"
   },
   "devDependencies": {

src/Components/Checklist/index.jsx

@@ -0,0 +1,46 @@
+import Checkbox from "@mui/material/Checkbox";
+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 PropTypes from "prop-types";
+
+export default function CheckList({ items, value, onChange }) {
+  const handleToggle = (e) => () => {
+    const currentIndex = value.indexOf(e);
+    const newChecked = [...value];
+
+    if (currentIndex === -1) {
+      newChecked.push(e);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    onChange(newChecked);
+  };
+  return (
+    <List>
+      {items.map((item, index) => (
+        <React.Fragment key={item}>
+          <ListItem onClick={handleToggle(item)}>
+            <Checkbox
+              edge="start"
+              checked={value.indexOf(item) !== -1}
+              tabIndex={-1}
+              disableRipple
+            />
+            <ListItemText primary={item} />
+          </ListItem>
+          {index !== items.length - 1 && <Divider />}
+        </React.Fragment>
+      ))}
+    </List>
+  );
+}
+
+CheckList.propTypes = {
+  items: PropTypes.any,
+  value: PropTypes.any,
+  onChange: PropTypes.any,
+};

src/Components/DataSelect/index.jsx

@@ -0,0 +1,28 @@
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { TextField } from "@mui/material";
+import PropTypes from "prop-types";
+
+export default function DataSelect({ label, value, onChange }) {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        label={label}
+        value={value}
+        onChange={onChange}
+        format="DD/MM/YYYY" // Define o formato desejado
+        renderInput={(params) => <TextField {...params} variant="filled" />}
+        sx={{
+          margin: ".7rem",
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
+
+DataSelect.propTypes = {
+  label: PropTypes.any,
+  value: PropTypes.any,
+  onChange: PropTypes.any,
+};

src/Components/FieldNumber/index.jsx

@@ -0,0 +1,35 @@
+import PropTypes from "prop-types";
+import FieldText from "../FieldText";
+import { PatternFormat } from "react-number-format";
+
+export default function FieldNumber({
+  label,
+  value,
+  onChange,
+  disabled,
+  format,
+}) {
+  return (
+    <PatternFormat
+      format={format}
+      mask="_"
+      allowEmptyFormatting
+      patternChar="#"
+      type="tel"
+      customInput={FieldText}
+      label={label}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      variant="filled"
+      id="filled-basic"
+    />
+  );
+}
+FieldNumber.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  format: PropTypes.string.isRequired,
+};

src/Components/FieldSelect/index.jsx

@@ -0,0 +1,62 @@
+import theme from "../../Styles/global";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import "dayjs/locale/pt-br";
+import PropTypes from "prop-types";
+
+function FieldSelect({ label, value, onChange, options }) {
+  return (
+    <FormControl
+      fullWidth
+      sx={{
+        margin: ".7rem",
+        backgroundColor: "#f5f5f5",
+        borderRadius: "5px",
+        width: "inherit",
+      }}
+    >
+      <InputLabel id={`label-${label}`}>{label}</InputLabel>
+      <Select
+        labelId={`label-${label}`}
+        id={`select-${label}`}
+        value={value}
+        onChange={onChange}
+        label={label}
+        sx={{
+          background: "#e0d4cc",
+          backgroundColor: "#e0d4cc",
+          "& .MuiSelect-select": {
+            borderColor: theme.palette.main,
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: theme.palette.main,
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: theme.palette.main,
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: theme.palette.main,
+          },
+        }}
+      >
+        {options.map((option) => (
+          <MenuItem
+            key={option}
+            value={option}
+            sx={{ padding: "10px", backgroundColor: "#e0e0e0" }}
+          >
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+FieldSelect.propTypes = {
+  label: PropTypes.any,
+  value: PropTypes.any,
+  onChange: PropTypes.any,
+  options: PropTypes.any,
+};
+
+export default FieldSelect;

src/Components/FieldText/index.jsx

@@ -0,0 +1,51 @@
+import PropTypes from "prop-types";
+import theme from "../../Styles/global";
+import TextField from "@mui/material/TextField";
+
+export default function FieldText({ label, value, onChange, disabled }) {
+  return (
+    <TextField
+      id="filled-basic"
+      label={label}
+      value={value}
+      variant="filled"
+      onChange={onChange}
+      disabled={disabled}
+      sx={{
+        margin: ".7rem",
+        background: "#EAE3D7",
+        backgroundColor: "#EAE3D7",
+        borderRadius: "5px",
+        "& .MuiInput-underline:before": {
+          borderBottomColor: theme.palette.main, // Cor da borda inferior antes do foco
+        },
+        "& .MuiInput-underline:hover:before": {
+          borderBottomColor: theme.palette.main, // Cor da borda inferior ao passar o mouse
+        },
+        "& .MuiInput-underline:after": {
+          borderBottomColor: theme.palette.main, // Cor da borda inferior após o foco
+        },
+        "& .MuiInputBase-input": {
+          color: theme.palette.contrastText, // Cor do texto
+        },
+        "& .MuiInputLabel-root": {
+          color: theme.palette.main,
+          fontFamily: '"Noto Sans", sans-serif',
+        },
+        "& .MuiInputLabel-root.Mui-focused": {
+          color: theme.palette.main, // Cor do rótulo quando focado
+        },
+        "& .MuiInputBase-input::placeholder": {
+          fontFamily: '"Overpass", sans-serif', // Fonte do placeholder
+        },
+      }}
+    />
+  );
+}
+
+FieldText.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};

src/Components/Modal/index.css

@@ -16,10 +16,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 338px;
-  height: 284px;
   background: #eae3d7;
   padding: 40px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   position: relative;
+  width: auto;
+  max-width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
 }

src/Components/Modal/index.jsx

@@ -1,19 +1,12 @@
 import "./index.css";
 import PropTypes from "prop-types";
 import { Alert, AlertTitle } from "@mui/material";
-import SecondaryButton from "../SecondaryButton";
-import { useNavigate } from "react-router-dom";
 import theme from "../../Styles/global";
 
-export default function Modal({ show, children, text, width }) {
-  const navigate = useNavigate();
-
+export default function Modal({ show, children, alertTitle }) {
   if (!show) {
     return null;
   }
-  const handleLoginPage = () => {
-    navigate("/");
-  };
 
   return (
     <div className="modal-overlay">
@@ -22,29 +15,27 @@ export default function Modal({ show, children, text, width }) {
           severity="success"
           variant="filled"
           sx={{
-            backgroundColor: theme.pallete.button,
+            backgroundColor: theme.palette.button,
             "& .MuiAlertTitle-root": {
               fontFamily: theme.typography.fontFamilyPrimary,
             },
             "& .MuiAlert-message": {
               fontFamily: theme.typography.fontFamilySecondary,
             },
-            width: "270px",
+            width: "100%", // Ajusta para 100% da largura do modal
           }}
         >
-          <AlertTitle>Solicitação enviada</AlertTitle>
-          Você deve receber um e-mail em breve com mais informações.
+          <AlertTitle>{alertTitle}</AlertTitle>
         </Alert>
-        <SecondaryButton text={text} onClick={handleLoginPage} width={width} />
+
         {children}
       </div>
     </div>
   );
 }
 
 Modal.propTypes = {
-  text: PropTypes.string.isRequired,
-  width: PropTypes.string.isRequired,
   show: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
+  alertTitle: PropTypes.string.isRequired,
 };

src/Components/SecondaryButton/index.jsx

@@ -29,6 +29,6 @@ export default function SecondaryButton({ text, onClick, maxWidth }) {
 
 SecondaryButton.propTypes = {
   text: PropTypes.string.isRequired,
-  maxWidth: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
+  maxWidth: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
 };

src/Components/SideButton/index.jsx

@@ -1,15 +1,16 @@
 import PropTypes from "prop-types";
-import theme from "../../Styles/global";
 import { Button } from "@mui/material";
 
+const rgbaValue01 = `rgba(174, 136, 60, 0.1);`;
+
 export default function SideButton({ itemKey, text, onClick }) {
   return (
     <Button
       onClick={onClick}
       key={itemKey}
       sx={{
         "&amp;:hover": {
-          backgroundColor: theme.palette.content,
+          backgroundColor: rgbaValue01,
         },
       }}
     >
@@ -19,7 +20,7 @@ export default function SideButton({ itemKey, text, onClick }) {
 }
 
 SideButton.propTypes = {
-  itemKey: PropTypes.string,
   text: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
+  itemKey: PropTypes.string,
 };