Us04

package.json

@@ -10,12 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.15.17",
+    "@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",
+    "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"
   },
   "devDependencies": {

src/Components/Card/index.css

@@ -0,0 +1,31 @@
+.card {
+    background-color: #eae3d7;
+    max-width: 500px;
+    width: 90%;
+    height: 690px;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* justify-content: space-around; */
+  }
+
+  .area-card {
+    flex: 1;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .logo {
+    width: 107px;
+    height: 107px;
+    margin-top: 40px;
+  }
+
+  .sentinela {
+    margin-top: -30px;
+    width: 350px;
+    height: auto;
+  }

src/Components/Card/index.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./index.css";
+
+export default function Card({ children, className }) {
+  return (
+    <div className="area-card">
+      <div className={`card ${className}`}>
+        <img
+          className="logo"
+          src="src/assets/sindpol-logo.png"
+          alt="Sindpol Logo"
+        />
+        <img
+          className="sentinela"
+          src="src/assets/sentinela-logo.png"
+          alt="Sentinela Logo"
+        />
+        {children}
+      </div>
+    </div>
+  );
+}
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};

src/Components/Checklist/index.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+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';
+
+
+
+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 button 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>
+  );
+}

src/Components/DataSelect/index.jsx

@@ -0,0 +1,20 @@
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+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>
+  )
+}

src/Components/FieldNumber/index.jsx

@@ -0,0 +1,30 @@
+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,45 @@
+import React, { useState } from 'react';
+import theme from "../../Styles/global";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import 'dayjs/locale/pt-br'; // Importa a localização desejada para o dayjs
+
+
+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.custom.main
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.custom.main,
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.custom.main,
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.custom.main,
+          }
+        }}
+      >
+        {options.map((option) => (
+          <MenuItem key={option} value={option} sx={{ padding: '10px', backgroundColor: '#e0e0e0' }}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default FieldSelect;

src/Components/FieldText/index.jsx

@@ -0,0 +1,54 @@
+
+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.custom.main, // Cor da borda inferior antes do foco
+                    },
+                    "& .MuiInput-underline:hover:before": {
+                    borderBottomColor: theme.palette.custom.main, // Cor da borda inferior ao passar o mouse
+                    },
+                    "& .MuiInput-underline:after": {
+                    borderBottomColor: theme.palette.custom.main, // Cor da borda inferior após o foco
+                    },
+                    "& .MuiInputBase-input": {
+                    color: theme.palette.custom.contrastText, // Cor do texto
+                    },
+                    "& .MuiInputLabel-root": {
+                    color: theme.palette.custom.main,
+                    fontFamily: '"Noto Sans", sans-serif',
+                    },
+                    "& .MuiInputLabel-root.Mui-focused": {
+                    color: theme.palette.custom.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/LabeledTextField/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { theme } from "../../Styles/global";
+import  theme  from "../../Styles/global";
 import TextField from "@mui/material/TextField";
 
 
@@ -14,6 +14,7 @@ export default function LabeledTextField ({ label, placeholder, type, value, onC
       value={value}
       onChange={onChange}
       sx={{
+        background:  "#EAE3D7",
         width: "400px",
         fontFamily: "Noto Sans",
         marginTop: "33px",

src/Components/Modal/index.css

@@ -0,0 +1,41 @@
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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;
+}
+
+.modal-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 10px;
+  gap: 10px;
+  width: 100%; 
+}
+
+.modal-buttons button {
+  flex: 1 1 auto; 
+}

src/Components/Modal/index.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import "./index.css";
+import PropTypes from "prop-types";
+import { Alert, AlertTitle } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import theme from '../../Styles/global';
+
+export default function Modal({ show, children, alertTitle, buttons }) {
+  const navigate = useNavigate();
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <Alert
+          severity="success" 
+          variant="filled"
+          sx={{
+            backgroundColor: theme.palette.custom.button,
+            "& .MuiAlertTitle-root": {
+              fontFamily: theme.typography.fontFamilyPrimary,
+            },
+            "& .MuiAlert-message": {
+              fontFamily: theme.typography.fontFamilySecondary,
+            },
+            width: "100%", // Ajusta para 100% da largura do modal
+          }}
+        >
+          <AlertTitle>{alertTitle}</AlertTitle>
+          {children}
+        </Alert>
+
+        <div className="modal-buttons">
+          {buttons}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Modal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  alertTitle: PropTypes.string.isRequired,
+  buttons: PropTypes.array,
+};

src/Components/PrimaryButton/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { theme } from "../../Styles/global";
+import theme from "../../Styles/global";
 import { Button } from "@mui/material";
 
 export default function PrimaryButton ({ text, onClick }) {