custom color level

ferryops · Jul 16, 2023 · bacc52b · bacc52b
1 parent 57c404b
commit bacc52b
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 13 deletions.
diff --git a/src/pages/pakar.tsx b/src/pages/pakar.tsx
@@ -20,39 +20,72 @@ export default function Pakar() {
   };
 
   const [aspek, setAspek] = useState("");
-  const [risk1, setRisk1] = useState<number>(3);
-  const [risk2, setRisk2] = useState<number>(3);
-  const [risk3, setRisk3] = useState<number>(3);
-  const [risk4, setRisk4] = useState<number>(3);
+  const [risk1, setRisk1] = useState<number>(1);
+  const [risk2, setRisk2] = useState<number>(1);
+  const [risk3, setRisk3] = useState<number>(1);
+  const [risk4, setRisk4] = useState<number>(1);
+  const [risk5, setRisk5] = useState<number>(1);
+  const [risk6, setRisk6] = useState<number>(1);
   const [hasil, setHasil] = useState([
     {
       nama: "",
       hasil: "",
       level: "",
+      colorlevel: "",
       rekomendasi: "",
     },
   ]);
 
   const kirim = () => {
+    // cek input user kosong
     if (aspek === "") {
       setModalError(true);
       return;
     }
-    let total = (risk1 + risk2 + risk3 + risk4) / 4;
+    // kalkulasi nilai risk
+    let totalRisk = risk1 + risk2 + risk3 + risk4 + risk5 + risk6;
+    let total = totalRisk;
 
-    let level = "high risk"
+    let level: string;
+    let colorLevel: string;
+    switch (total) {
+      case 1:
+      case 2:
+        level = "High Risk";
+        colorLevel = "error";
+        break;
+      case 3:
+        level = "Medium Risk";
+        colorLevel = "warning";
+        break;
+      case 4:
+      case 5:
+        level = "Low Risk";
+        colorLevel = "primary";
+        break;
+      case 6:
+        level = "Very Low Risk";
+        colorLevel = "success";
+        break;
+      default:
+        level = "High Risk";
+        colorLevel = "error";
+        break;
+    }
 
     setHasil((prevHasil) => [
       ...prevHasil,
       {
         nama: aspek,
         hasil: total.toString(),
         level: level,
+        colorlevel: colorLevel,
         rekomendasi:
           "lorem ipsum dolor sit amet, consectetur adip   incididunt ut labore et        dolore magna aliqu Lorem ipsum dolor sit amet",
       },
     ]);
     setAspek("");
+    setRisk1(1);
   };
 
   const hapus = (index: any) => {
@@ -88,7 +121,10 @@ export default function Pakar() {
               </span>
             </div>
 
-            <select onChange={(e) => setRisk1(parseInt(e.target.value))}>
+            <select
+              onChange={(e) => setRisk1(parseInt(e.target.value))}
+              value={risk1}
+            >
               <option value="1">Ya</option>
               <option value="0">Tidak</option>
             </select>
@@ -100,7 +136,7 @@ export default function Pakar() {
                 Kebijakan mencakup komitmen manajemen atas keamanan informasi
               </span>
             </div>
-            <select onChange={(e) => setRisk1(parseInt(e.target.value))}>
+            <select onChange={(e) => setRisk2(parseInt(e.target.value))}>
               <option value="1">Ya</option>
               <option value="0">Tidak</option>
             </select>
@@ -112,7 +148,7 @@ export default function Pakar() {
                 Kebijakan memperhitungkan tujuan organisasi dan kebutuhan bisnis
               </span>
             </div>
-            <select onChange={(e) => setRisk1(parseInt(e.target.value))}>
+            <select onChange={(e) => setRisk3(parseInt(e.target.value))}>
               <option value="1">Ya</option>
               <option value="0">Tidak</option>
             </select>
@@ -126,7 +162,7 @@ export default function Pakar() {
               <li />
               <span>Lorem</span>
             </div>
-            <select onChange={(e) => setRisk1(parseInt(e.target.value))}>
+            <select onChange={(e) => setRisk4(parseInt(e.target.value))}>
               <option value="1">Ya</option>
               <option value="0">Tidak</option>
             </select>
@@ -136,7 +172,7 @@ export default function Pakar() {
               <li />
               <span>Lorem</span>
             </div>
-            <select onChange={(e) => setRisk1(parseInt(e.target.value))}>
+            <select onChange={(e) => setRisk5(parseInt(e.target.value))}>
               <option value="1">Ya</option>
               <option value="0">Tidak</option>
             </select>
@@ -146,7 +182,7 @@ export default function Pakar() {
               <li />
               <span>Lorem</span>
             </div>
-            <select onChange={(e) => setRisk1(parseInt(e.target.value))}>
+            <select onChange={(e) => setRisk6(parseInt(e.target.value))}>
               <option value="1">Ya</option>
               <option value="0">Tidak</option>
             </select>
@@ -176,7 +212,11 @@ export default function Pakar() {
               <tr key={index}>
                 <td>{nilai.nama}</td>
                 <td className={styles.skor}>{nilai.hasil}</td>
-                <td className={styles.skor}>{nilai.level}</td>
+                <td className={styles.skor}>
+                  <div className={`${styles[nilai.colorlevel]}`}>
+                    {nilai.level}
+                  </div>
+                </td>
                 <td>{nilai.rekomendasi}</td>
                 <td>
                   <Button color="error" auto onClick={() => hapus(index)}>

diff --git a/src/styles/pakar.module.css b/src/styles/pakar.module.css
@@ -93,6 +93,47 @@
   vertical-align: middle;
 }
 
+.error {
+  background-color: #300313;
+  color: #bc1b53;
+  height: auto;
+  width: auto;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 10px;
+}
+.warning {
+  background-color: #3a2503;
+  color: #b57919;
+  height: auto;
+  width: auto;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 10px;
+}
+.primary {
+  background-color: #10253e;
+  color: #0265d6;
+  height: auto;
+  width: auto;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 10px;
+}
+.success {
+  background-color: #042f14;
+  color: #38d079;
+  height: auto;
+  width: auto;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 10px;
+}
+
 /* phone */
 @media (max-width: 500px) {
   .main {

diff --git a/template.md b/template.md
@@ -0,0 +1,51 @@
+const [level, setLevel] = useState("");
+
+  const [hasil, setHasil] = useState([
+    {
+      nama: "",
+      hasil: "",
+      level: "",
+      rekomendasi: "",
+    },
+  ]);
+
+  const kirim = () => {
+    // cek input user kosong
+    if (aspek === "") {
+      setModalError(true);
+      return;
+    }
+    // kalkulasi nilai risk
+    let total = 3;
+    // let total = (risk1 + risk2 + risk3 + risk4) / 4;
+
+    switch (total) {
+      case 1:
+        setLevel("High Risk");
+        break
+      case 2:
+        setLevel("Medium Risk");
+        break
+      case 3:
+        setLevel("Low Risk");
+        break
+      case 4:
+        setLevel("Very Low Risk");
+        break
+      default:
+        setLevel("High Risk");
+        break
+    }
+
+    setHasil((prevHasil) => [
+      ...prevHasil,
+      {
+        nama: aspek,
+        hasil: total.toString(),
+        level: level,
+        rekomendasi:
+          "lorem ipsum dolor sit amet, consectetur adip   incididunt ut labore et        dolore magna aliqu Lorem ipsum dolor sit amet",
+      },
+    ]);
+    setAspek("");
+  };