From 4033f4e21911d5c69164893756848fbc3e75edd5 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Tue, 29 Oct 2024 11:57:04 +0700
Subject: [PATCH] update: add color for aspect and sub aspect score, add boder
 on action icon flag

---
 .../assessment/index.lazy.tsx                 | 81 ++++++++++++-------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
index addda4c..041cebb 100644
--- a/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
@@ -662,21 +662,12 @@ export default function AssessmentPage() {
                                 ? "Pilih jawaban terlebih dahulu"
                                 : "Tandai"
                             }
-                            color={flaggedQuestions[questionId] ? "red" : "white"}
-                            style={{
-                              margin: "2px 10px",
-                              borderRadius: "4px",
-                              backgroundColor: flaggedQuestions[questionId] ? "red" : "white",
-                            }}
+                            className={`m-2 rounded-md border-1 flex items-center justify-center h-7 w-7 ${flaggedQuestions[questionId] ? "border-white bg-red-500" : "border-gray-100 bg-white"}`}
                             disabled={!answers[question.questionId]}
                           >
                             <TbFlagFilled
-                              size={20}
-                              color={flaggedQuestions[questionId] ? "white" : "black"}
-                              style={{
-                                padding: "2px",
-                              }}
-
+                              size={25}
+                              className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`} // Mengurangi padding untuk ikon
                             />
                           </ActionIcon>
                         </Flex>
@@ -852,14 +843,31 @@ export default function AssessmentPage() {
                     {/* Skor Aspek */}
                     <div>
                       {filteredAspects.length > 0 ? (
-                        filteredAspects.map((aspect) => (
-                          <div key={aspect.aspectId} className="flex justify-between items-center">
-                            <Text className="text-base text-gray-400">{aspect.aspectName}</Text>
-                            <Text className="text-base font-bold">
-                              {parseFloat(aspect.averageScore).toFixed(2)}
-                            </Text>
-                          </div>
-                        ))
+                        filteredAspects.map((aspect) => {
+                          const aspectScore = parseFloat(aspect.averageScore).toFixed(2);
+                          const aspectScoreValue = parseFloat(aspectScore);
+
+                          return (
+                            <div key={aspect.aspectId} className="flex justify-between items-center">
+                              <Text className="text-base text-gray-400">{aspect.aspectName}</Text>
+                              <Text
+                                className={`text-base font-bold ${
+                                  aspectScoreValue >= 4.01
+                                    ? "text-green-700"
+                                    : aspectScoreValue >= 3.01
+                                    ? "text-green-400"
+                                    : aspectScoreValue >= 2.01
+                                    ? "text-yellow-400"
+                                    : aspectScoreValue >= 1.01
+                                    ? "text-orange-500"
+                                    : "text-red-500"
+                                }`}
+                              >
+                                {aspectScore}
+                              </Text>
+                            </div>
+                          );
+                        })
                       ) : (
                         <Text className="text-base text-gray-400">Data aspek ini kosong</Text>
                       )}
@@ -873,14 +881,31 @@ export default function AssessmentPage() {
                     {/* Skor Sub-Aspek */}
                     <div>
                       {filteredSubAspects.length > 0 ? (
-                        filteredSubAspects.map((subAspect) => (
-                          <div key={subAspect.subAspectId} className="flex justify-between items-center"> {/* Change key to 'id' */}
-                            <Text className="text-sm text-gray-400">{subAspect.subAspectName}</Text> {/* Change to 'name' */}
-                            <Text className="text-sm font-bold">
-                              {parseFloat(subAspect.averageScore).toFixed(2)}
-                            </Text>
-                          </div>
-                        ))
+                        filteredSubAspects.map((subAspect) => {
+                          const subAspectScore = parseFloat(subAspect.averageScore).toFixed(2);
+                          const subAspectScoreValue = parseFloat(subAspectScore);
+
+                          return (
+                            <div key={subAspect.subAspectId} className="flex justify-between items-center">
+                              <Text className="text-sm text-gray-400">{subAspect.subAspectName}</Text>
+                              <Text
+                                className={`text-sm font-bold ${
+                                  subAspectScoreValue >= 4.01
+                                    ? "text-green-700"
+                                    : subAspectScoreValue >= 3.01
+                                    ? "text-green-400"
+                                    : subAspectScoreValue >= 2.01
+                                    ? "text-yellow-400"
+                                    : subAspectScoreValue >= 1.01
+                                    ? "text-orange-500"
+                                    : "text-red-500" 
+                                }`}
+                              >
+                                {subAspectScore}
+                              </Text>
+                            </div>
+                          );
+                        })
                       ) : (
                         <Text className="text-sm text-gray-400">Data sub-aspek ini kosong</Text>
                       )}