003 sep 27 compliance tracker control pane #38
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| import { Grid, Stack, Typography, useTheme } from "@mui/material"; | ||
| import { useState } from "react"; | ||
| import Select from "../Select"; | ||
| import DatePicker from "../Datepicker"; | ||
| import Field from "../Field"; | ||
|
|
||
| const DropDowns = () => { | ||
| const [status, setStatus] = useState<string | number>(""); | ||
| const [approver, setApprover] = useState<string | number>(""); | ||
| const [riskReview, setRiskReview] = useState<string | number>(""); | ||
| const [owner, setOwner] = useState<string | number>(""); | ||
| const [reviewer, setReviewer] = useState<string | number>(""); | ||
| const theme = useTheme(); | ||
|
|
||
| const inputStyles = { width: 200, height: 34 }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Stack | ||
| display="flex" | ||
| flexDirection="row" | ||
| justifyContent="space-between" | ||
| alignItems="center" | ||
| > | ||
| <Select | ||
| id="status" | ||
| label="Status:" | ||
| value={status} | ||
| onChange={(e) => setStatus(e.target.value)} | ||
| items={[ | ||
| { _id: 10, name: "Waiting" }, | ||
| { _id: 20, name: "In progress" }, | ||
| { _id: 30, name: "Done" }, | ||
| ]} | ||
| sx={inputStyles} | ||
| /> | ||
|
|
||
| <Select | ||
| id="Approver" | ||
| label="Approver:" | ||
| value={approver} | ||
| onChange={(e) => setApprover(e.target.value)} | ||
| items={[ | ||
| { _id: 10, name: "Option 1" }, | ||
| { _id: 20, name: "Option 2" }, | ||
| { _id: 30, name: "Option 3" }, | ||
| ]} | ||
| sx={inputStyles} | ||
| /> | ||
|
|
||
| <Select | ||
| id="Risk review" | ||
| label="Risk review:" | ||
| value={riskReview} | ||
| onChange={(e) => setRiskReview(e.target.value)} | ||
| items={[ | ||
| { _id: 10, name: "Acceptable risk" }, | ||
| { _id: 20, name: "Residual risk" }, | ||
| { _id: 30, name: "Unacceptable risk" }, | ||
| ]} | ||
| sx={inputStyles} | ||
| /> | ||
| </Stack> | ||
|
|
||
| {/* Second Row */} | ||
| <Stack | ||
| display="flex" | ||
| flexDirection="row" | ||
| justifyContent="space-between" | ||
| alignItems="center" | ||
| sx={{ mt: 3 }} | ||
| > | ||
| <Select | ||
| id="Owner" | ||
| label="Owner:" | ||
| value={owner} | ||
| onChange={(e) => setOwner(e.target.value)} | ||
| items={[ | ||
| { _id: 10, name: "Option 1" }, | ||
| { _id: 20, name: "Option 2" }, | ||
| { _id: 30, name: "Option 3" }, | ||
| ]} | ||
| sx={inputStyles} | ||
| /> | ||
|
|
||
| <Select | ||
| id="Reviewer" | ||
| label="Reviewer:" | ||
| value={reviewer} | ||
| onChange={(e) => setReviewer(e.target.value)} | ||
| items={[ | ||
| { _id: 10, name: "Option 1" }, | ||
| { _id: 20, name: "Option 2" }, | ||
| { _id: 30, name: "Option 3" }, | ||
| ]} | ||
| sx={inputStyles} | ||
| /> | ||
|
|
||
| <DatePicker | ||
| label="Due date:" | ||
| sx={inputStyles} | ||
| /> | ||
| </Stack> | ||
|
|
||
| <Typography | ||
| fontSize={13} | ||
| fontWeight={400} | ||
| sx={{ textAlign: "left", mt: 4, ml: 2 }} | ||
| > | ||
| Implementation details: | ||
| </Typography> | ||
| <Grid container sx={{ mt: 3 }}> | ||
| <Grid | ||
| item | ||
| xs={12} | ||
| sx={{ | ||
| height: 73, | ||
| borderRadius: theme.shape.borderRadius, | ||
| "& .MuiInputBase-root": { | ||
| height: "73px", | ||
| }, | ||
| "& .MuiOutlinedInput-input": { | ||
| paddingTop: "20px", | ||
| }, | ||
| }} | ||
| > | ||
| <Field type="description" /> | ||
| </Grid> | ||
| </Grid> | ||
|
Comment on lines
+105
to
+129
There was a problem hiding this comment. 🛠️ Refactor suggestion Clarify the purpose of the description Field and consider accessibility improvements. The implementation details section is well-structured using Material-UI components. However, there are a few points to consider:
const [description, setDescription] = useState('');
// In the JSX
<Field
type="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
|
||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DropDowns; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { Box, Typography, Tooltip, IconButton } from "@mui/material"; | ||
| import React, { useState } from "react"; | ||
| import CloudUpload from "../../../assets/icons/cloudUpload.svg"; | ||
| import RichTextEditor from "../../../components/RichTextEditor/index"; | ||
|
|
||
| interface AuditorFeedbackProps { | ||
| activeSection: string; | ||
| } | ||
|
|
||
| const AuditorFeedback: React.FC<AuditorFeedbackProps> = ({ activeSection }) => { | ||
| const [file, setFile] = useState<File | null>(null); | ||
|
|
||
| const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| if (e.target.files && e.target.files[0]) { | ||
| setFile(e.target.files[0]); | ||
| } | ||
| }; | ||
|
Comment on lines
+13
to
+17
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider adding file validation and error handling. The Consider implementing the following improvements:
Would you like assistance in implementing these improvements? 🧰 Tools🪛 Biome
|
||
|
|
||
| const UploadFile = () => { | ||
| document.getElementById("file-upload")?.click(); | ||
| }; | ||
|
|
||
| const handleContentChange = (content: string) => { | ||
| console.log("Updated content: ", content); | ||
| }; | ||
|
Comment on lines
+23
to
+25
There was a problem hiding this comment. Implement proper state management for content changes. The Consider using the const [content, setContent] = useState('');
const handleContentChange = (newContent: string) => {
setContent(newContent);
};Would you like assistance in implementing this state management? |
||
|
|
||
| return ( | ||
| <Box sx={{ width: "100%", padding: 2 }}> | ||
| <Typography sx={{ mb: 2 }}> | ||
| {activeSection === "Evidence" ? "Evidence:" : "Auditor Feedback:"} | ||
| </Typography> | ||
|
|
||
| {/* Use the RichTextEditor component */} | ||
| <RichTextEditor onContentChange={handleContentChange} /> | ||
|
|
||
| {/* File Upload */} | ||
| <Box | ||
| sx={{ | ||
| display: "flex", | ||
| flexDirection: "row-reverse", | ||
| border: "1px dotted", | ||
| borderColor: "#D0D5DD", | ||
| width: 472, | ||
| alignItems: "center", | ||
| cursor: "pointer", | ||
| }} | ||
| onClick={UploadFile} | ||
| > | ||
| <Typography sx={{ color: "black", padding: 5, marginLeft: 1, paddingLeft: 0 }}> | ||
| You can also drag and drop, or click to upload a feedback. | ||
| </Typography> | ||
| <Tooltip title="Attach a file"> | ||
| <IconButton component="label"> | ||
| <img | ||
| src={CloudUpload} | ||
| alt="Upload" | ||
| style={{ height: 19, width: 20 }} | ||
| /> | ||
| <input type="file" hidden id="file-upload" onChange={handleFileUpload} /> | ||
| </IconButton> | ||
| </Tooltip> | ||
| </Box> | ||
|
Comment on lines
+37
to
+62
There was a problem hiding this comment. Improve accessibility for the file upload functionality. The file upload area could be made more accessible to keyboard-only users and screen readers. Consider the following improvements:
Here's an example of how you could improve accessibility: <Box
role="button"
tabIndex={0}
aria-label="Upload file"
onKeyPress={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
UploadFile();
}
}}
// ... other props
>
{/* ... existing content */}
</Box>Would you like assistance in implementing these accessibility improvements? |
||
|
|
||
| {file && ( | ||
| <Typography variant="body2" sx={{ mt: 2 }}> | ||
| Attached file: {file.name} | ||
| </Typography> | ||
| )} | ||
| </Box> | ||
| ); | ||
|
Comment on lines
+27
to
+70
There was a problem hiding this comment. 🛠️ Refactor suggestion Consider refactoring for improved maintainability and modularity. The component structure is clear and follows React and Material-UI best practices. However, there are a few areas that could be improved:
Here's an example of how you could refactor the styles: import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
fileUploadBox: {
display: "flex",
flexDirection: "row-reverse",
border: "1px dotted",
borderColor: "#D0D5DD",
width: 472,
alignItems: "center",
cursor: "pointer",
},
// Add more styles here
}));
// In your component:
const classes = useStyles();
// Then use classes in your JSX:
<Box className={classes.fileUploadBox} onClick={UploadFile}>
{/* ... */}
</Box>Would you like assistance in implementing these refactoring suggestions? |
||
| }; | ||
|
|
||
| export default AuditorFeedback; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Add state management for DatePicker and consider accessibility improvements.
The second row of inputs is well-structured and consistent with the first row. However, there are a few points to address:
As with the first row, consider adding aria-label attributes to the Select and DatePicker components to enhance accessibility.
The hardcoded options for Owner and Reviewer are identical. If this is intentional, consider extracting these options into a shared constant to reduce duplication.