setting status colors and listing dynamic hard coded clauses

Author: MuhammadKhalilzadeh

Clients/src/presentation/pages/ISO/Clause/clause.structure.ts

@@ -10,19 +10,23 @@ export const ISO42001ClauseList = [
           {
             number: 1,
             title: "Understanding the organization and its context",
+            status: "Not Started",
           },
           {
             number: 2,
             title:
               "Understanding the needs and expectations of interested parties",
+            status: "Draft",
           },
           {
             number: 3,
             title: "Determining the scope of the AI Management System",
+            status: "In Review",
           },
           {
             number: 4,
             title: "AI Management System",
+            status: "Approved",
           },
         ],
       },
@@ -33,14 +37,17 @@ export const ISO42001ClauseList = [
           {
             number: 1,
             title: "Leadership and commitment",
+            status: "Implemented",
           },
           {
             number: 2,
             title: "Policy",
+            status: "Needs Rework",
           },
           {
             number: 3,
             title: "Organizational roles, responsibilities, and authorities",
+            status: "Not Started",
           },
         ],
       },
@@ -52,10 +59,12 @@ export const ISO42001ClauseList = [
             number: 1,
             title:
               "Actions to address risks and opportunities (Includes Risk Assessment, Treatment, Impact Assessment)",
+            status: "Draft",
           },
           {
             number: 2,
             title: "AI objectives and planning to achieve them",
+            status: "In Review",
           },
         ],
       },
@@ -66,22 +75,27 @@ export const ISO42001ClauseList = [
           {
             number: 1,
             title: "Resources",
+            status: "Approved",
           },
           {
             number: 2,
             title: "Competence",
+            status: "Implemented",
           },
           {
             number: 3,
             title: "Awareness",
+            status: "Needs Rework",
           },
           {
             number: 4,
             title: "Communication",
+            status: "Not Started",
           },
           {
             number: 5,
             title: "Documented information",
+            status: "Draft",
           },
         ],
       },
@@ -92,22 +106,27 @@ export const ISO42001ClauseList = [
           {
             number: 1,
             title: "Operational planning and control",
+            status: "In Review",
           },
           {
             number: 2,
             title: "AI risk assessment (Operational)",
+            status: "Approved",
           },
           {
             number: 3,
             title: "AI risk treatment (Operational)",
+            status: "Implemented",
           },
           {
             number: 4,
             title: "AI System Lifecycle",
+            status: "Needs Rework",
           },
           {
             number: 5,
             title: "Third-party relationships",
+            status: "Not Started",
           },
         ],
       },
@@ -118,14 +137,17 @@ export const ISO42001ClauseList = [
           {
             number: 1,
             title: "Monitoring, measurement, analysis, and evaluation",
+            status: "Draft",
           },
           {
             number: 2,
             title: "Internal audit",
+            status: "In Review",
           },
           {
             number: 3,
             title: "Management review",
+            status: "Approved",
           },
         ],
       },
@@ -136,10 +158,12 @@ export const ISO42001ClauseList = [
           {
             number: 1,
             title: "Nonconformity and corrective action",
+            status: "Implemented",
           },
           {
             number: 2,
             title: "Continual improvement",
+            status: "Needs Rework",
           },
         ],
       },

Clients/src/presentation/pages/ISO/Clause/index.tsx

@@ -18,6 +18,23 @@ const ISO42001Clauses = () => {
       setExpanded(isExpanded ? panel : false);
     };
 
+  function getStatusColor(status: string) {
+    switch (status) {
+      case "Not Started":
+        return "#C63622";
+      case "Draft":
+        return "#D68B61";
+      case "In Review":
+        return "#D6B971";
+      case "Approved":
+        return "#52AB43";
+      case "Implemented":
+        return "#B8D39C";
+      case "Needs Rework":
+        return "#800080";
+    }
+  }
+
   return (
     <Stack className="iso-42001-clauses">
       {ISO42001ClauseList.map((clause) => (
@@ -74,7 +91,41 @@ const ISO42001Clauses = () => {
                     {"Clause "} {clause.number} {" : "} {clause.title}
                   </Typography>
                 </AccordionSummary>
-                <AccordionDetails sx={{ padding: 0 }}></AccordionDetails>
+                <AccordionDetails sx={{ padding: 0 }}>
+                  {clause.subClauses.map((subClause) => (
+                    <Stack
+                      key={subClause.number}
+                      sx={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        padding: "16px",
+                        borderBottom:
+                          clause.subClauses.length - 1 ===
+                          clause.subClauses.indexOf(subClause)
+                            ? "none"
+                            : "1px solid #eaecf0",
+                        cursor: "pointer",
+                        fontSize: 13,
+                      }}
+                    >
+                      <Typography>
+                        {clause.number + "." + subClause.number}{" "}
+                        {subClause.title}
+                      </Typography>
+                      <Stack
+                        sx={{
+                          borderRadius: "4px",
+                          padding: "5px",
+                          backgroundColor: getStatusColor(subClause.status),
+                          color: "#fff",
+                        }}
+                      >
+                        {subClause.status}
+                      </Stack>
+                    </Stack>
+                  ))}
+                </AccordionDetails>
               </Accordion>
             </Stack>
           ))}