diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx index 695dead..dd81419 100644 --- a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx +++ b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx @@ -72,6 +72,9 @@ export default function AssessmentResultPage() { const { data: allVerifiedAspectsScoreData } = useQuery(getAllVerifiedAspectsAverageScore(assessmentId)); const { data: allVerifiedSubAspectsScoreData } = useQuery(getAllVerifiedSubAspectsAverageScore(assessmentId)); + // Pastikan status tersedia + const assessmentStatus = assessmentResult?.statusAssessment; + const getAspectScore = (aspectId: string) => { return allAspectsScoreData?.aspects?.find((score) => score.aspectId === aspectId)?.averageScore || undefined; }; @@ -80,11 +83,13 @@ export default function AssessmentResultPage() { return allSubAspectsScoreData?.subAspects?.find((score) => score.subAspectId === subAspectId)?.averageScore || undefined; }; - const getVerifiedAspectScore = (aspectId: string) => { + const getVerifiedAspectScore = (aspectId: string, assessmentStatus: string) => { + if (assessmentStatus !== "selesai") return undefined; return allVerifiedAspectsScoreData?.aspects?.find((score) => score.aspectId === aspectId)?.averageScore || undefined; }; - const getVerifiedSubAspectScore = (subAspectId: string) => { + const getVerifiedSubAspectScore = (subAspectId: string, assessmentStatus: string) => { + if (assessmentStatus !== "selesai") return undefined; return allVerifiedSubAspectsScoreData?.subAspects?.find((score) => score.subAspectId === subAspectId)?.averageScore || undefined; }; @@ -96,7 +101,10 @@ export default function AssessmentResultPage() { // Total score const totalScore = parseFloat(formatScore(assessmentResult?.assessmentsResult)); - const totalVerifiedScore = parseFloat(formatScore(verifiedAssessmentResult?.verifiedAssessmentsResult)); + const totalVerifiedScore = + assessmentStatus === "selesai" + ? parseFloat(formatScore(verifiedAssessmentResult?.verifiedAssessmentsResult)) + : 0; // Mengatur warna dan level maturitas berdasarkan skor const getScoreStyleClass = (score: number | undefined, isBg: boolean = false) => { @@ -140,11 +148,14 @@ export default function AssessmentResultPage() { fill: aspectsColors[index % aspectsColors.length], })) || []; - const verifiedChartData = aspectsData?.data?.map((aspect, index) => ({ - aspectName: aspect.name, - score: Number(formatScore(getVerifiedAspectScore(aspect.id))), - fill: aspectsColors[index % aspectsColors.length], - })) || []; + const verifiedChartData = + assessmentStatus === "selesai" + ? aspectsData?.data?.map((aspect, index) => ({ + aspectName: aspect.name, + score: Number(formatScore(getVerifiedAspectScore(aspect.id, assessmentStatus))), + fill: aspectsColors[index % aspectsColors.length], + })) || [] + : []; const barChartData = aspectsData?.data?.flatMap((aspect) => aspect.subAspects.map((subAspect) => ({ @@ -156,36 +167,45 @@ export default function AssessmentResultPage() { })) ) || []; - const verifiedBarChartData = aspectsData?.data?.flatMap((aspect) => - aspect.subAspects.map((subAspect) => ({ - subAspectName: subAspect.name, - score: Number(formatScore(getVerifiedSubAspectScore(subAspect.id))), - fill: "#005BFF", - aspectId: aspect.id, - aspectName: aspect.name - })) - ) || []; + const verifiedBarChartData = + assessmentStatus === "selesai" + ? aspectsData?.data?.flatMap((aspect) => + aspect.subAspects.map((subAspect) => ({ + subAspectName: subAspect.name, + score: Number(formatScore(getVerifiedSubAspectScore(subAspect.id, assessmentStatus))), + fill: "#005BFF", + aspectId: aspect.id, + aspectName: aspect.name, + })) + ) || [] + : []; const sortedBarChartData = barChartData.sort((a, b) => (a.aspectId ?? '').localeCompare(b.aspectId ?? '')); const sortedVerifiedBarChartData = verifiedBarChartData.sort((a, b) => (a.aspectId ?? '').localeCompare(b.aspectId ?? '')); - const chartConfig = aspectsData?.data?.reduce((config, aspect, index) => { - config[aspect.name.toLowerCase()] = { - label: aspect.name, - color: aspectsColors[index % aspectsColors.length], - }; - return config; - }, {} as ChartConfig) || {}; + const chartConfig = + assessmentStatus === "selesai" + ? aspectsData?.data?.reduce((config, aspect, index) => { + config[aspect.name.toLowerCase()] = { + label: aspect.name, + color: aspectsColors[index % aspectsColors.length], + }; + return config; + }, {} as ChartConfig) || {} + : {}; - const barChartConfig = aspectsData?.data?.reduce((config, aspect, index) => { - aspect.subAspects.forEach((subAspect) => { - config[subAspect.name.toLowerCase()] = { - label: subAspect.name, - color: aspectsColors[index % aspectsColors.length], - }; - }); - return config; - }, {} as ChartConfig) || {}; + const barChartConfig = + assessmentStatus === "selesai" + ? aspectsData?.data?.reduce((config, aspect, index) => { + aspect.subAspects.forEach((subAspect) => { + config[subAspect.name.toLowerCase()] = { + label: subAspect.name, + color: aspectsColors[index % aspectsColors.length], + }; + }); + return config; + }, {} as ChartConfig) || {} + : {}; // Dropdown State const [isOpen, setIsOpen] = useState(false); @@ -735,9 +755,9 @@ export default function AssessmentResultPage() { className={clsx( "text-sm lg:text-3xl font-bold", )} - style={getScoreStyleClass(getVerifiedAspectScore(aspect.id))} + style={getScoreStyleClass(getVerifiedAspectScore(aspect.id, assessmentStatus ?? ''))} > - {formatScore(getVerifiedAspectScore(aspect.id))} + {formatScore(getVerifiedAspectScore(aspect.id, assessmentStatus ?? ''))} @@ -755,7 +775,7 @@ export default function AssessmentResultPage() { {/* Sub-aspect Score Column (No Left Border and w-fit for flexible width) */}