Merge pull request #336 from MuhammadKhalilzadeh/317-iterating-compli…

…ance-store-in-db

317 iterating compliance store in db

Clients/src/presentation/components/Inputs/Dropdowns/index.tsx

@@ -71,9 +71,9 @@ const DropDowns = ({
           onChange={handleSelectChange("approver")}
           items={[
             { _id: "Choose approver", name: "Choose approver" },
-            { _id: "Option 1", name: "Option 1" },
-            { _id: "Option 2", name: "Option 2" },
-            { _id: "Option 3", name: "Option 3" },
+            { _id: "approver 1", name: "approver 1" },
+            { _id: "approver 2", name: "approver 2" },
+            { _id: "approver 3", name: "approver 3" },
           ]}
           sx={inputStyles}
         />
@@ -108,9 +108,9 @@ const DropDowns = ({
           onChange={handleSelectChange("owner")}
           items={[
             { _id: "Choose owner", name: "Choose owner" },
-            { _id: "Option 1", name: "Option 1" },
-            { _id: "Option 2", name: "Option 2" },
-            { _id: "Option 3", name: "Option 3" },
+            { _id: "owner 1", name: "owner 1" },
+            { _id: "owner 2", name: "owner 2" },
+            { _id: "owner 3", name: "owner 3" },
           ]}
           sx={inputStyles}
         />
@@ -122,9 +122,9 @@ const DropDowns = ({
           onChange={handleSelectChange("reviewer")}
           items={[
             { _id: "Choose reviewer", name: "Choose reviewer" },
-            { _id: "Option 1", name: "Option 1" },
-            { _id: "Option 2", name: "Option 2" },
-            { _id: "Option 3", name: "Option 3" },
+            { _id: "reviewer 1", name: "reviewer 1" },
+            { _id: "reviewer 2", name: "reviewer 2" },
+            { _id: "reviewer 3", name: "reviewer 3" },
           ]}
           sx={inputStyles}
         />

Clients/src/presentation/components/Inputs/Field/index.tsx

@@ -98,9 +98,9 @@ const Field = forwardRef(
               borderColor: theme.palette.border.dark,
             },
           "&:has(.input-error) .MuiOutlinedInput-root fieldset": {
-          border: error 
-            ? `1px solid ${theme.palette.status.error.border}` 
-            : `1px solid ${theme.palette.border.dark}`,
+            border: error
+              ? `1px solid ${theme.palette.status.error.border}`
+              : `1px solid ${theme.palette.border.dark}`,
             borderColor: theme.palette.status.error.border,
           },
           ".Mui-focused .MuiOutlinedInput-notchedOutline": {
@@ -143,6 +143,7 @@ const Field = forwardRef(
           </Typography>
         )}
         <TextField
+          className="field-input"
           type={type === "password" ? (isVisible ? "text" : type) : type}
           id={id}
           autoComplete={autoComplete}
@@ -161,6 +162,7 @@ const Field = forwardRef(
                 WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.fill} inset`,
                 WebkitTextFillColor: theme.palette.text.secondary,
               },
+              overflowY: "auto",
             },
           }}
           sx={sx}
@@ -217,7 +219,7 @@ const Field = forwardRef(
             mt={theme.spacing(2)}
             sx={{
               opacity: 0.8,
-              fontSize: 11
+              fontSize: 11,
             }}
           >
             {error}

Clients/src/presentation/components/Modals/ComplianceFeedback/ComplianceFeedback.tsx

@@ -47,7 +47,14 @@ const AuditorFeedback: React.FC<AuditorFeedbackProps> = ({
 
   const handleContentChange = (content: string) => {
     onChange({
-      target: { value: content },
+      target: {
+        value:
+          " " +
+          content
+            .replace(/^<p>/, "")
+            .replace(/<\/p>$/, "")
+            .trim(),
+      },
     } as React.ChangeEvent<HTMLInputElement>);
   };
 

Clients/src/presentation/components/Modals/Controlpane/NewControlPane.tsx

@@ -14,6 +14,7 @@ import DropDowns from "../../Inputs/Dropdowns";
 import { useState } from "react";
 import AuditorFeedback from "../ComplianceFeedback/ComplianceFeedback";
 import { Dayjs } from "dayjs";
+import { apiServices } from "../../../../infrastructure/api/networkServices";
 
 interface SubControlState {
   controlId: string;
@@ -47,19 +48,23 @@ interface State {
 
 const NewControlPane = ({
   id,
+  numbering,
   isOpen,
   handleClose,
   title,
   content,
   subControls,
+  controlCategory,
   OnSave,
 }: {
   id: string;
+  numbering: string;
   isOpen: boolean;
   handleClose: () => void;
   title: string;
   content: string;
   subControls: any[];
+  controlCategory: string;
   OnSave?: (state: State) => void;
 }) => {
   const theme = useTheme();
@@ -147,8 +152,22 @@ const NewControlPane = ({
     },
   };
 
-  const handleSave = () => {
-    console.log(state);
+  const handleSave = async () => {
+    const controlToSave = {
+      controlCategoryTitle: controlCategory,
+      control: state,
+    };
+    console.log(controlToSave);
+
+    try {
+      const response = await apiServices.post(
+        "/projects/saveControls",
+        controlToSave
+      );
+      console.log("Controls saved successfully:", response);
+    } catch (error) {
+      console.error("Error saving controls:", error);
+    }
     if (OnSave) {
       OnSave(state);
     }
@@ -191,7 +210,7 @@ const NewControlPane = ({
           }}
         >
           <Typography fontSize={16} fontWeight={600} sx={{ textAlign: "left" }}>
-            {id} {title}
+            {numbering} {title}
           </Typography>
           <CloseIcon onClick={handleClose} style={{ cursor: "pointer" }} />
         </Stack>
@@ -257,7 +276,7 @@ const NewControlPane = ({
             fontWeight={600}
             sx={{ textAlign: "left", mb: 3 }}
           >
-            {`${id}.${subControls[selectedTab].id}`}{" "}
+            {`${numbering}.${subControls[selectedTab].id}`}{" "}
             {subControls[selectedTab].title}
           </Typography>
           <Typography sx={{ mb: 5 }}>

Clients/src/presentation/components/Table/AccordionTable/index.tsx

@@ -23,16 +23,17 @@ const AccordionTable = ({
   id,
   cols,
   rows,
+  controlCategory,
 }: {
   id: any;
   cols: ITableCol[];
   rows: any[];
+  controlCategory: string;
 }) => {
   const theme = useTheme();
   const [selectedRow, setSelectedRow] = useState<number | null>(null);
   const [modalOpen, setModalOpen] = useState(false);
 
-
   const getProgressColor = useCallback((value: number) => {
     if (value <= 10) return "#FF4500"; // 0-10%
     if (value <= 20) return "#FF4500"; // 11-20%
@@ -93,7 +94,8 @@ const AccordionTable = ({
           <Fragment key={row.id}>
             {modalOpen && selectedRow === row.id && (
               <NewControlPane
-                id={`${id}.${row.id}`}
+                id={row.id}
+                numbering={`${id}.${row.id}`}
                 isOpen={modalOpen}
                 handleClose={() => setModalOpen(false)}
                 title={row.title}
@@ -103,6 +105,7 @@ const AccordionTable = ({
                   console.log("Save clicked");
                   // fetchComplianceTracker();
                 }}
+                controlCategory={controlCategory}
               />
             )}
             <TableRow

Clients/src/presentation/pages/ComplianceTracker/NewComplianceTracker.tsx

@@ -83,6 +83,7 @@ const NewComplianceTracker = () => {
               id={controlGroupIndex}
               cols={Table_Columns}
               rows={controls}
+              controlCategory={controlGroupTitle}
             />
           </AccordionDetails>
         </Accordion>

Clients/src/presentation/pages/ComplianceTracker/controls.req.structure.ts

@@ -0,0 +1,77 @@
+/**
+ * @file controls.req.structure.ts
+ * @description This file provides an example of the request structure for the controls page.
+ */
+
+/**
+ * @constant {Object} controlsReqStructure
+ * @description The structure of the request for the controls page.
+ * @property {number} projectId - The ID of the project that the control category is related to.
+ * @property {string} controlCategoryTitle - The title of the control category.
+ * @property {number} controlCategoryId - The ID of the control category.
+ * @property {Object} control - The control details.
+ * @property {number} control.controlCategoryId - The ID of the control category that the control is related to.
+ * @property {number} control.controlId - The ID of the control.
+ * @property {string} control.controlTitle - The title of the control.
+ * @property {string} control.controlDescription - The description of the control.
+ * @property {string} control.status - The status of the control.
+ * @property {string} control.approver - The approver of the control.
+ * @property {string} control.riskReview - The risk review status of the control.
+ * @property {string} control.owner - The owner of the control.
+ * @property {string} control.reviewer - The reviewer of the control.
+ * @property {string} control.date - The date related to the control.
+ * @property {string} control.description - The description of the control.
+ * @property {Array<Object>} control.subcontrols - The subcontrols related to the control.
+ * @property {number} control.subcontrols[].controlId - The ID of the control that the subcontrol is related to.
+ * @property {string} control.subcontrols[].subControlTitle - The title of the subcontrol.
+ * @property {string} control.subcontrols[].subControlDescription - The description of the subcontrol.
+ * @property {string} control.subcontrols[].status - The status of the subcontrol.
+ * @property {string} control.subcontrols[].approver - The approver of the subcontrol.
+ * @property {string} control.subcontrols[].riskReview - The risk review status of the subcontrol.
+ * @property {string} control.subcontrols[].owner - The owner of the subcontrol.
+ * @property {string} control.subcontrols[].reviewer - The reviewer of the subcontrol.
+ * @property {string} control.subcontrols[].date - The date related to the subcontrol.
+ * @property {string} control.subcontrols[].description - The description of the subcontrol.
+ * @property {string} control.subcontrols[].evidence - The evidence provided for the subcontrol.
+ * @property {Array<Object>} control.subcontrols[].evidenceFiles - The evidence files related to the subcontrol.
+ * @property {string} control.subcontrols[].feedback - The feedback provided for the subcontrol.
+ * @property {Array<Object>} control.subcontrols[].feedbackFiles - The feedback files related to the subcontrol.
+ */
+export const controlsReqStructure = {
+  projectId: 1234, // id of the project that the control category is related to
+  controlCategoryTitle: "AI literacy",
+  controlCategoryId: 1, // After control Category is created id will be saved in a const
+  control: {
+    controlCategoryId: 1, // The control category id that the control is related to
+    controlId: 1, // After control is created id will be saved in a const
+    controlTitle: "AI Literacy and Responsible AI Training",
+    controlDescription: "Develop the AI literacy ...",
+    status: "selected option",
+    approver: "selected option",
+    riskReview: "selected option",
+    owner: "selected option",
+    reviewer: "selected option",
+    date: "selected date",
+    description: "provided description",
+    subcontrols: [
+      {
+        controlId: 1, // The control id that the subcontrol is related to
+        subControlTitle:
+          "We ensure executive leadership takes responsibility for decisions related to AI risks",
+        subControlDescription:
+          "Leadership is accountable for oversight and strategic decisions regarding AI risks, ensuring alignment with compliance.",
+        status: "selected option",
+        approver: "selected option",
+        riskReview: "selected option",
+        owner: "selected option",
+        reviewer: "selected option",
+        date: "selected date",
+        description: "provided description",
+        evidence: "provided evidence",
+        evidenceFiles: [],
+        feedback: "provided feedback",
+        feedbackFiles: [],
+      },
+    ],
+  },
+};

Servers/controllers/assessment.ctrl.ts

@@ -219,6 +219,7 @@ export async function saveAnswers(req: Request, res: Response): Promise<any> {
           createMockQuestion(subtopicId, question);
         }
       }
+      res.status(200).json(STATUS_CODE[200]({ message: "Answers saved" }));
     } catch (error) {
       return res.status(500).json(STATUS_CODE[500]((error as Error).message));
     }

Servers/controllers/control.ctrl.ts

@@ -110,11 +110,9 @@ export async function createControl(req: Request, res: Response): Promise<any> {
 
     if (MOCKDATA_ON === true) {
       // const control = createMockControl(newControl);
-
       // if (control) {
       //   return res.status(201).json(STATUS_CODE[201](control));
       // }
-
       // return res.status(400).json(STATUS_CODE[400](control));
     } else {
       let flag = true;
@@ -124,7 +122,8 @@ export async function createControl(req: Request, res: Response): Promise<any> {
             const controlId = control.id;
             for (const subControl of control.subControls) {
               const newSubControl = await createNewSubcontrolQuery(
-                {controlId, ...subControl}
+                controlId,
+                subControl
               );
               if (!newSubControl) {
                 flag = false;