diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx index 392ccd6..23b1c25 100644 --- a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx +++ b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx @@ -1,4 +1,4 @@ -import { SetStateAction, useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import html2pdf from "html2pdf.js"; import useAuth from "@/hooks/useAuth"; import { createLazyFileRoute } from "@tanstack/react-router"; @@ -10,7 +10,6 @@ import { PolarAngleAxis, PolarRadiusAxis, PolarGrid, Radar, RadarChart } from "r import { Card, CardContent, - CardFooter, CardHeader, CardTitle, } from "@/shadcn/components/ui/card" @@ -44,6 +43,7 @@ export default function AssessmentResultPage() { setAssessmentId(id ?? undefined); }, []); + //fetch data from API const { data: aspectsData } = useQuery(aspectQueryOptions(0, 10)); const { data: assessmentResult } = useQuery(getAssessmentResultByIdQueryOptions(assessmentId)); const { data: verifiedAssessmentResult } = useQuery(getVerifiedAssessmentResultByIdQueryOptions(assessmentId)); @@ -74,30 +74,38 @@ export default function AssessmentResultPage() { return !isNaN(parsedScore) ? parsedScore.toFixed(2) : '0'; }; + // Total score const totalScore = parseFloat(formatScore(assessmentResult?.assessmentsResult)); const totalVerifiedScore = parseFloat(formatScore(verifiedAssessmentResult?.verifiedAssessmentsResult)); + // Mengatur warna dan level maturitas berdasarkan skor const getScoreStyleClass = (score: number | undefined, isBg: boolean = false) => { if (score === undefined || score === null) return { color: 'grey' }; let colorVar = '--levelOne-color'; let textColor = 'white'; + let descLevel = '1'; if (score >= 1.50 && score < 2.50) { colorVar = '--levelTwo-color'; + descLevel = '2'; } else if (score >= 2.50 && score < 3.50) { colorVar = '--levelThree-color'; + descLevel = '3'; } else if (score >= 3.50 && score < 4.49) { colorVar = '--levelFour-color'; + descLevel = '4'; } else if (score >= 4.50 && score <= 5) { colorVar = '--levelFive-color'; + descLevel = '5'; } return isBg - ? { backgroundColor: `var(${colorVar})`, color: textColor } - : { color: `var(${colorVar})` }; + ? { backgroundColor: `var(${colorVar})`, color: textColor, descLevel } + : { color: `var(${colorVar})`, descLevel }; }; + // Warna aspek const aspectsColors = [ "#DBED9B", "#FF3F9F", @@ -106,6 +114,7 @@ export default function AssessmentResultPage() { "#5FD4E7", ]; + // Data diagram const chartData = aspectsData?.data?.map((aspect, index) => ({ aspectName: aspect.name, score: Number(formatScore(getAspectScore(aspect.id))), @@ -159,6 +168,7 @@ export default function AssessmentResultPage() { return config; }, {} as ChartConfig) || {}; + // Mengatur tampilan label sumbu X const customizedAxisTick = (props: any) => { const { x, y, payload } = props; return ( @@ -178,6 +188,7 @@ export default function AssessmentResultPage() { ); }; + // Dropdown State const [isOpen, setIsOpen] = useState(false); const [selectedItem, setSelectedItem] = useState('Hasil Sementara'); @@ -189,7 +200,7 @@ export default function AssessmentResultPage() { setSelectedItem(prev => prev === 'Hasil Sementara' ? 'Hasil Terverifikasi' : 'Hasil Sementara' ); - setIsOpen(false); // Tutup dropdown setelah klik item + setIsOpen(false); }; // Pie Chart Component @@ -274,6 +285,7 @@ export default function AssessmentResultPage() { ); } + // Radar Chart Component function RadarChartComponent({ chartData, chartConfig }: { chartData: { aspectName: string, score: number }[], chartConfig: ChartConfig }) { return (
@@ -311,6 +323,7 @@ export default function AssessmentResultPage() { ); } + // Bar Chart Component function BarChartComponent({ barChartData, barChartConfig }: { barChartData: { subAspectName: string, score: number, fill: string, aspectId: string, aspectName: string }[], barChartConfig: ChartConfig }) { return (
@@ -347,28 +360,33 @@ export default function AssessmentResultPage() { ); } - const cardRef = useRef(null); // Create a ref for your component + const handlePrintPDF = async (isSuperAdmin: boolean) => { + const pdfContainer = document.getElementById("pdfContainer"); + const targetCard = document.getElementById("target-card"); + const barChart = document.getElementById("bar-chart"); - const handlePrintPDF = async () => { - const element = cardRef.current; - - if (element) { + if (pdfContainer && targetCard && barChart) { // Sembunyikan elemen yang tidak ingin dicetak const buttonPrint = document.getElementById("button-print"); const noPrint = document.getElementById("no-print"); - if (buttonPrint) buttonPrint.style.visibility = 'hidden'; // Menggunakan visibility untuk tetap menjaga ruang - if (noPrint) noPrint.style.visibility = 'hidden'; // Menggunakan visibility untuk tetap menjaga ruang + if (buttonPrint) buttonPrint.style.visibility = 'hidden'; + if (noPrint) noPrint.style.visibility = 'hidden'; - // Pastikan elemen memiliki lebar 100% - element.style.width = '100%'; // Mengatur lebar konten + // Tentukan marginTop sesuai dengan isSuperAdmin + const originalMarginTop = targetCard.style.marginTop || "0px"; + targetCard.style.marginTop = isSuperAdmin ? "190px" : "0px"; + + // Tentukan marginTop sesuai dengan isSuperAdmin + const originalBarChart = barChart.style.marginTop || "0px"; + barChart.style.marginTop = isSuperAdmin ? "0px" : "150px"; const options = { - margin: [0.4, 0.5, 0.4, 0], // Margin kecil untuk mengurangi ruang kosong + margin: [0, 0.5, 0, 0], image: { type: 'jpeg', quality: 0.98 }, html2canvas: { - scale: 2, // Mengatur scale agar kualitas tinggi - width: element.scrollWidth, - height: element.scrollHeight, + scale: 2, + width: pdfContainer.scrollWidth, + height: pdfContainer.scrollHeight, }, jsPDF: { unit: 'in', @@ -380,32 +398,34 @@ export default function AssessmentResultPage() { try { const pdfBlob: Blob = await html2pdf() .set(options) - .from(element) + .from(pdfContainer) .toPdf() .get('pdf') .then((pdf: any) => { pdf.setProperties({ title: 'Hasil_Asesemen_Level_Maturitas', }); - return pdf.output('blob'); // Menghasilkan PDF sebagai blob dengan title + return pdf.output('blob'); }); - // Buat URL dari Blob dan buka di tab baru untuk pratinjau const pdfURL = URL.createObjectURL(pdfBlob); - window.open(pdfURL, '_blank'); // Pratinjau di tab baru tanpa unduh + window.open(pdfURL, '_blank'); } catch (err) { console.error("Error generating PDF:", err); } finally { // Tampilkan kembali elemen yang disembunyikan - if (buttonPrint) buttonPrint.style.visibility = 'visible'; // Mengembalikan visibility - if (noPrint) noPrint.style.visibility = 'visible'; // Mengembalikan visibility - element.style.width = ""; // Reset lebar setelah selesai + if (buttonPrint) buttonPrint.style.visibility = 'visible'; + if (noPrint) noPrint.style.visibility = 'visible'; + + // Reset marginTop ke nilai aslinya + targetCard.style.marginTop = originalMarginTop || "0px"; + barChart.style.marginTop = originalBarChart || "0px"; } } }; return ( - +

Tingkatan Level Maturitas

@@ -459,10 +479,10 @@ export default function AssessmentResultPage() {
@@ -492,13 +512,9 @@ export default function AssessmentResultPage() { {isSuperAdmin && -
-
-
-
+

{assessmentResult?.respondentName}

{assessmentResult?.position}

-
@@ -566,7 +582,7 @@ export default function AssessmentResultPage() { <> {/* Score Table */}

Tabel Level Maturitas

- +
{aspectsData?.data?.map((aspect) => (
@@ -587,9 +603,15 @@ export default function AssessmentResultPage() {
{/* Total score */} -
-

Level Maturitas:

- {totalScore} +
+
+

Nilai Maturitas:

+ {totalScore} +
+
+

Level Maturitas:

+ {getScoreStyleClass(Number(totalScore), true).descLevel} +
@@ -618,15 +640,21 @@ export default function AssessmentResultPage() {
{/* Total verified score */} -
-

Level Maturitas:

- {totalVerifiedScore} +
+
+

Nilai Maturitas:

+ {totalScore} +
+
+

Level Maturitas:

+ {getScoreStyleClass(Number(totalScore), true).descLevel} +
)} - + {/* Pie Chart */} {selectedItem === 'Hasil Sementara' ? ( @@ -678,7 +706,7 @@ export default function AssessmentResultPage() { )} - + {/* Bar Chart */} {selectedItem === 'Hasil Sementara' ? ( <>