710 lines
29 KiB
TypeScript
710 lines
29 KiB
TypeScript
import { SetStateAction, useEffect, useRef, useState } from "react";
|
|
import html2pdf from "html2pdf.js";
|
|
import useAuth from "@/hooks/useAuth";
|
|
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import { getAllAspectsAverageScore, getAllSubAspectsAverageScore, getAllVerifiedAspectsAverageScore, getAllVerifiedSubAspectsAverageScore } from "@/modules/assessmentResult/queries/assessmentResultQueries";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { getAssessmentResultByIdQueryOptions, getVerifiedAssessmentResultByIdQueryOptions } from "@/modules/assessmentResultsManagement/queries/assessmentResultsManagaementQueries";
|
|
import { PieChart, Pie, Label, BarChart, Bar, CartesianGrid, XAxis, YAxis } from "recharts";
|
|
import { PolarAngleAxis, PolarRadiusAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/shadcn/components/ui/card"
|
|
import {
|
|
ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/shadcn/components/ui/chart"
|
|
import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries";
|
|
import { TbChevronDown, TbChevronLeft, TbChevronUp } from "react-icons/tb";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
|
|
|
|
const getQueryParam = (param: string) => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
return urlParams.get(param);
|
|
};
|
|
|
|
export const Route = createLazyFileRoute("/_dashboardLayout/assessmentResult/")({
|
|
component: AssessmentResultPage,
|
|
});
|
|
|
|
export default function AssessmentResultPage() {
|
|
const { user } = useAuth();
|
|
const isSuperAdmin = user?.role === "super-admin";
|
|
|
|
const [assessmentId, setAssessmentId] = useState<string | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
const id = getQueryParam("id");
|
|
setAssessmentId(id ?? undefined);
|
|
}, []);
|
|
|
|
const { data: aspectsData } = useQuery(aspectQueryOptions(0, 10));
|
|
const { data: assessmentResult } = useQuery(getAssessmentResultByIdQueryOptions(assessmentId));
|
|
const { data: verifiedAssessmentResult } = useQuery(getVerifiedAssessmentResultByIdQueryOptions(assessmentId));
|
|
const { data: allAspectsScoreData } = useQuery(getAllAspectsAverageScore(assessmentId));
|
|
const { data: allSubAspectsScoreData } = useQuery(getAllSubAspectsAverageScore(assessmentId));
|
|
const { data: allVerifiedAspectsScoreData } = useQuery(getAllVerifiedAspectsAverageScore(assessmentId));
|
|
const { data: allVerifiedSubAspectsScoreData } = useQuery(getAllVerifiedSubAspectsAverageScore(assessmentId));
|
|
|
|
const getAspectScore = (aspectId: string) => {
|
|
return allAspectsScoreData?.aspects?.find((score) => score.aspectId === aspectId)?.averageScore || undefined;
|
|
};
|
|
|
|
const getSubAspectScore = (subAspectId: string) => {
|
|
return allSubAspectsScoreData?.subAspects?.find((score) => score.subAspectId === subAspectId)?.averageScore || undefined;
|
|
};
|
|
|
|
const getVerifiedAspectScore = (aspectId: string) => {
|
|
return allVerifiedAspectsScoreData?.aspects?.find((score) => score.aspectId === aspectId)?.averageScore || undefined;
|
|
};
|
|
|
|
const getVerifiedSubAspectScore = (subAspectId: string) => {
|
|
return allVerifiedSubAspectsScoreData?.subAspects?.find((score) => score.subAspectId === subAspectId)?.averageScore || undefined;
|
|
};
|
|
|
|
const formatScore = (score: string | number | undefined) => {
|
|
if (score === null || score === undefined) return '0';
|
|
const parsedScore = typeof score === 'number' ? score : parseFloat(score || "NaN");
|
|
return !isNaN(parsedScore) ? parsedScore.toFixed(2) : '0';
|
|
};
|
|
|
|
const totalScore = parseFloat(formatScore(assessmentResult?.assessmentsResult));
|
|
const totalVerifiedScore = parseFloat(formatScore(verifiedAssessmentResult?.verifiedAssessmentsResult));
|
|
|
|
const getScoreStyleClass = (score: number | undefined, isBg: boolean = false) => {
|
|
if (score === undefined || score === null) return { color: 'grey' };
|
|
|
|
let colorVar = '--levelOne-color';
|
|
let textColor = 'white';
|
|
|
|
if (score >= 1.50 && score < 2.50) {
|
|
colorVar = '--levelTwo-color';
|
|
} else if (score >= 2.50 && score < 3.50) {
|
|
colorVar = '--levelThree-color';
|
|
} else if (score >= 3.50 && score < 4.49) {
|
|
colorVar = '--levelFour-color';
|
|
} else if (score >= 4.50 && score <= 5) {
|
|
colorVar = '--levelFive-color';
|
|
}
|
|
|
|
return isBg
|
|
? { backgroundColor: `var(${colorVar})`, color: textColor }
|
|
: { color: `var(${colorVar})` };
|
|
};
|
|
|
|
const aspectsColors = [
|
|
"#DBED9B",
|
|
"#FF3F9F",
|
|
"#877BDF",
|
|
"#CFAF49",
|
|
"#5FD4E7",
|
|
];
|
|
|
|
const chartData = aspectsData?.data?.map((aspect, index) => ({
|
|
aspectName: aspect.name,
|
|
score: Number(formatScore(getAspectScore(aspect.id))),
|
|
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 barChartData = aspectsData?.data?.flatMap((aspect) =>
|
|
aspect.subAspects.map((subAspect) => ({
|
|
subAspectName: subAspect.name,
|
|
score: Number(formatScore(getSubAspectScore(subAspect.id))),
|
|
fill: "#005BFF",
|
|
aspectId: aspect.id,
|
|
aspectName: aspect.name
|
|
}))
|
|
) || [];
|
|
|
|
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 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 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 customizedAxisTick = (props: any) => {
|
|
const { x, y, payload } = props;
|
|
return (
|
|
<g transform={`translate(${x},${y})`}>
|
|
<text
|
|
x={0}
|
|
y={0}
|
|
dy={3}
|
|
textAnchor="end"
|
|
fill="#666"
|
|
transform="rotate(-90)"
|
|
fontSize={10}
|
|
>
|
|
{payload.value}
|
|
</text>
|
|
</g>
|
|
);
|
|
};
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [selectedItem, setSelectedItem] = useState('Hasil Sementara');
|
|
|
|
const handleDropdownToggle = () => {
|
|
setIsOpen((prev) => !prev);
|
|
};
|
|
|
|
const handleItemClick = () => {
|
|
setSelectedItem(prev =>
|
|
prev === 'Hasil Sementara' ? 'Hasil Terverifikasi' : 'Hasil Sementara'
|
|
);
|
|
setIsOpen(false); // Tutup dropdown setelah klik item
|
|
};
|
|
|
|
// Pie Chart Component
|
|
function PieChartComponent({ chartData, totalScore, chartConfig }: { chartData: { aspectName: string, score: number, fill: string }[], totalScore: number, chartConfig: ChartConfig }) {
|
|
return (
|
|
<div className="flex flex-row w-full border-none">
|
|
<div className="flex-1 pb-0 w-72">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="mx-auto aspect-square max-h-64"
|
|
>
|
|
<PieChart>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={<ChartTooltipContent hideLabel />}
|
|
/>
|
|
<Pie
|
|
data={chartData}
|
|
dataKey="score"
|
|
nameKey="aspectName"
|
|
innerRadius={50}
|
|
strokeWidth={5}
|
|
label={({ cx, cy, midAngle, innerRadius, outerRadius, index }) => {
|
|
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
const x = cx + radius * Math.cos(-midAngle * (Math.PI / 180));
|
|
const y = cy + radius * Math.sin(-midAngle * (Math.PI / 180));
|
|
return (
|
|
<text
|
|
x={x}
|
|
y={y}
|
|
fill="black"
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
fontSize={14}
|
|
>
|
|
{chartData[index]?.score || ""}
|
|
</text>
|
|
);
|
|
}}
|
|
labelLine={false}
|
|
>
|
|
<Label
|
|
content={({ viewBox }) => {
|
|
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
|
return (
|
|
<text
|
|
x={viewBox.cx}
|
|
y={viewBox.cy}
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
>
|
|
<tspan
|
|
x={viewBox.cx}
|
|
y={viewBox.cy}
|
|
className="fill-foreground text-3xl font-bold"
|
|
>
|
|
{totalScore.toLocaleString()}
|
|
</tspan>
|
|
</text>
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
</Pie>
|
|
</PieChart>
|
|
</ChartContainer>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="flex-col gap-2 text-sm justify-center items-start">
|
|
{chartData.map((entry, index) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
<span
|
|
className="w-4 h-4"
|
|
style={{ backgroundColor: entry.fill }}
|
|
/>
|
|
<span className="font-medium">{entry.aspectName}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RadarChartComponent({ chartData, chartConfig }: { chartData: { aspectName: string, score: number }[], chartConfig: ChartConfig }) {
|
|
return (
|
|
<div className="flex-1 pb-0">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="mx-auto max-h-[250px]"
|
|
>
|
|
<RadarChart data={chartData}>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={({ active, payload }) => {
|
|
if (active && payload && payload.length > 0) {
|
|
const { aspectName, score } = payload[0].payload;
|
|
return (
|
|
<div className="tooltip bg-white p-1 rounded-md">
|
|
<p>{`${aspectName} : ${score}`}</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}}
|
|
/>
|
|
<PolarAngleAxis dataKey="aspectName" tick={{ fontSize: 10 }} stroke="black" />
|
|
<PolarRadiusAxis angle={90} domain={[0, 5]} tick={{ fontSize: 10 }} tickCount={6} stroke="black" />
|
|
<PolarGrid radialLines={true} />
|
|
<Radar
|
|
dataKey="score"
|
|
fillOpacity={0}
|
|
stroke="#007BFF"
|
|
strokeWidth={2}
|
|
/>
|
|
</RadarChart>
|
|
</ChartContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BarChartComponent({ barChartData, barChartConfig }: { barChartData: { subAspectName: string, score: number, fill: string, aspectId: string, aspectName: string }[], barChartConfig: ChartConfig }) {
|
|
return (
|
|
<div className="w-full">
|
|
<ChartContainer config={barChartConfig}>
|
|
<BarChart accessibilityLayer data={barChartData} margin={{ bottom: 120 }}>
|
|
<CartesianGrid vertical={false} horizontal={true} />
|
|
<XAxis
|
|
dataKey="subAspectName"
|
|
tickLine={false}
|
|
tickMargin={0}
|
|
axisLine={false}
|
|
interval={0}
|
|
tick={customizedAxisTick}
|
|
/>
|
|
<YAxis domain={[0, 5]} tickCount={6} />
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={({ active, payload }) => {
|
|
if (active && payload && payload.length > 0) {
|
|
const { subAspectName, score } = payload[0].payload;
|
|
return (
|
|
<div className="tooltip bg-white p-1 rounded-md shadow-lg">
|
|
<p>{`${subAspectName} : ${score}`}</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}}
|
|
/>
|
|
<Bar dataKey="score" radius={2} fill="#007BFF" />
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const cardRef = useRef<HTMLDivElement | null>(null); // Create a ref for your component
|
|
|
|
const handlePrintPDF = async () => {
|
|
const element = cardRef.current;
|
|
|
|
if (element) {
|
|
// 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
|
|
|
|
// Pastikan elemen memiliki lebar 100%
|
|
element.style.width = '100%'; // Mengatur lebar konten
|
|
|
|
const options = {
|
|
margin: [0.4, 0.5, 0.4, 0], // Margin kecil untuk mengurangi ruang kosong
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: {
|
|
scale: 2, // Mengatur scale agar kualitas tinggi
|
|
width: element.scrollWidth,
|
|
height: element.scrollHeight,
|
|
},
|
|
jsPDF: {
|
|
unit: 'in',
|
|
format: 'a4',
|
|
orientation: 'landscape',
|
|
}
|
|
};
|
|
|
|
try {
|
|
const pdfBlob: Blob = await html2pdf()
|
|
.set(options)
|
|
.from(element)
|
|
.toPdf()
|
|
.get('pdf')
|
|
.then((pdf: any) => {
|
|
pdf.setProperties({
|
|
title: 'Hasil_Asesemen_Level_Maturitas',
|
|
});
|
|
return pdf.output('blob'); // Menghasilkan PDF sebagai blob dengan title
|
|
});
|
|
|
|
// 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
|
|
} 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
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card ref={cardRef} className="flex flex-row w-full h-full border-none shadow-none">
|
|
<div className="flex flex-col w-fit h-fit border-none shadow-none -ml-1 -pr-2">
|
|
<p className="font-bold mt-2 ml-2">Tingkatan Level Maturitas</p>
|
|
<div className="flex flex-col mr-5 -ml-5 h-full">
|
|
{[
|
|
{ level: 5, colorVar: '--levelFive-color', title: 'Implementasi Optimal', details: ['Otomatisasi', 'Terintegrasi', 'Membudaya'], textColor: 'white' },
|
|
{ level: 4, colorVar: '--levelFour-color', title: 'Implementasi Terkelola', details: ['Terorganisir', 'Review Berkala', 'Berkelanjutan'], textColor: 'white' },
|
|
{ level: 3, colorVar: '--levelThree-color', title: 'Implementasi Terdefinisi', details: ['Terorganisir', 'Konsisten', 'Review Berkala'], textColor: 'white' },
|
|
{ level: 2, colorVar: '--levelTwo-color', title: 'Implementasi Berulang', details: ['Terorganisir', 'Tidak Konsisten', 'Berulang'], textColor: 'white' },
|
|
{ level: 1, colorVar: '--levelOne-color', title: 'Implementasi Awal', details: ['Tidak Terukur', 'Tidak Konsisten', 'Risiko Tinggi'], textColor: 'white' }
|
|
].map(({ level, colorVar, title, details, textColor }, index) => (
|
|
<div key={level} className={`flex flex-row h-full border-none ${index > 0 ? '-mt-10' : ''}`}>
|
|
<svg className="w-30 h-32 pb-5" style={{ color: `var(${colorVar})` }} fill="currentColor" viewBox="0 0 24 24">
|
|
<polygon points="12,4 19,10 19,24 12,19 5,24 5,10" />
|
|
<text x="12" y="16" textAnchor="middle" fill={textColor} fontSize="3" fontWeight="bold">
|
|
Level {level}
|
|
</text>
|
|
</svg>
|
|
<div className="flex flex-col items-start justify-center -ml-4">
|
|
<p className="text-xs font-bold whitespace-nowrap">{title}</p>
|
|
{details.map((detail) => (
|
|
<p key={detail} className="text-xs">{detail}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="flex flex-col w-full h-fit border-none shadow-none -mt-6 -mr-5 p-4 bg-stone-50 overflow-hidden">
|
|
<div className="flex flex-col w-full h-fit mb-6 justify-center items-start">
|
|
{/* Konten Header */}
|
|
<div className="flex justify-between items-center w-full">
|
|
{isSuperAdmin ? (
|
|
<div className="flex flex-col">
|
|
<button
|
|
className="flex items-center text-sm text-blue-600 gap-2 mb-2" id="no-print"
|
|
onClick={() => window.close()}
|
|
>
|
|
<TbChevronLeft size={20} className="mr-1" />
|
|
Kembali
|
|
</button>
|
|
<p className="text-2xl font-bold">Detail Hasil Asesmen</p>
|
|
<p className="text-xs text-muted-foreground">Kelola dan Pantau Semua Permohonan Asesmen Dengan Mudah</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col">
|
|
<p className="text-2xl font-bold">Cyber Security Maturity Level Dashboard</p>
|
|
<p className="text-xs text-muted-foreground">Kelola dan Pantau Semua Permohonan Asesmen Dengan Mudah</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-row gap-2" id="button-print">
|
|
<button
|
|
onClick={handlePrintPDF}
|
|
className="bg-blue-600 text-white flex w-fit p-2 rounded-sm text-sm items-start justify-between outline-none ring-offset-0"
|
|
>
|
|
Cetak ke PDF
|
|
</button>
|
|
<div className="flex">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
className="bg-blue-600 text-white flex w-44 p-2 pl-4 rounded-sm text-sm items-start justify-between outline-none ring-offset-0"
|
|
onClick={handleDropdownToggle}
|
|
>
|
|
{selectedItem}
|
|
{isOpen ? (
|
|
<TbChevronUp size={20} className="justify-center items-center" />
|
|
) : (
|
|
<TbChevronDown size={20} className="justify-center items-center" />
|
|
)}
|
|
</DropdownMenuTrigger>
|
|
{isOpen && (
|
|
<DropdownMenuContent className="bg-white text-black flex w-44 rounded-sm text-sm items-start">
|
|
<DropdownMenuItem className="w-full" onClick={handleItemClick}>
|
|
{selectedItem === 'Hasil Sementara' ? 'Hasil Terverifikasi' : 'Hasil Sementara'}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
)}
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isSuperAdmin &&
|
|
<Card className="flex flex-col w-full h-full mb-6 justify-center items-start">
|
|
<div className="flex flex-row border-b w-full p-4 gap-4 items-center">
|
|
<div className="flex w-16 h-16 rounded-full bg-slate-300">
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<p className="text-lg font-bold">{assessmentResult?.respondentName}</p>
|
|
<p className="text-sm">{assessmentResult?.position}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex lg:flex-row flex-col text-xs h-full w-full justify-between p-4">
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="text-muted-foreground">Username</p>
|
|
<p>{assessmentResult?.username}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Email</p>
|
|
<p>{assessmentResult?.email}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="text-muted-foreground">Nama Perusahaan</p>
|
|
<p>{assessmentResult?.companyName}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Pengalaman Kerja</p>
|
|
<p>{assessmentResult?.workExperience}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="text-muted-foreground">No. HP</p>
|
|
<p>{assessmentResult?.phoneNumber}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Alamat</p>
|
|
<p>{assessmentResult?.address}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="text-muted-foreground">Tanggal Assessment</p>
|
|
<p>
|
|
{assessmentResult?.assessmentDate ? (
|
|
new Intl.DateTimeFormat("id-ID", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: true,
|
|
})
|
|
.format(new Date(assessmentResult.assessmentDate))
|
|
.replace(/\./g, ':')
|
|
.replace('pukul ', '')
|
|
) : (
|
|
'N/A'
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Status Verifikasi</p>
|
|
<p>{assessmentResult?.statusAssessment}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
}
|
|
|
|
{/* Conditional rendering based on selectedItem */}
|
|
{selectedItem === 'Hasil Sementara' ? (
|
|
<>
|
|
{/* Score Table */}
|
|
<p className="text-lg font-bold">Tabel Level Maturitas</p>
|
|
<Card className="flex flex-col w-full h-fit my-2 mb-8 overflow-hidden text-center">
|
|
<div className="flex flex-row w-full">
|
|
{aspectsData?.data?.map((aspect) => (
|
|
<div key={aspect.id} className="flex-col bg-white w-full h-full border-t border-x">
|
|
<div className="flex flex-col font-bold items-center justify-center p-2 h-full w-full border-b" style={getScoreStyleClass(getAspectScore(aspect.id))}>
|
|
<p className="text-sm text-black">{aspect.name}</p>
|
|
<span className="text-2xl">{formatScore(getAspectScore(aspect.id))}</span>
|
|
</div>
|
|
{aspect.subAspects.map((subAspect) => (
|
|
<div key={subAspect.id} className="flex flex-col gap-2 p-2 h-full w-full">
|
|
<div className="flex flex-row gap-2 justify-between h-full w-full">
|
|
<p className="text-xs text-muted-foreground text-left">{subAspect.name}</p>
|
|
<span className="text-xs font-bold">{formatScore(getSubAspectScore(subAspect.id))}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Total score */}
|
|
<div className="flex flex-row w-full h-fit p-3 justify-center gap-2 font-bold text-3xl" style={getScoreStyleClass(Number(totalScore), true)}>
|
|
<p className="text-center">Level Maturitas:</p>
|
|
<span>{totalScore}</span>
|
|
</div>
|
|
</Card>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* Verified Result Table */}
|
|
<p className="text-lg font-bold">Tabel Level Maturitas Terverifikasi</p>
|
|
<Card className="flex flex-col w-full h-fit my-2 mb-8 overflow-hidden border-y text-center">
|
|
<div className="flex flex-row">
|
|
{aspectsData?.data?.map((aspect) => (
|
|
<div key={aspect.id} className="flex-col bg-white w-full h-full border-x border-t">
|
|
<div className="flex flex-col font-bold items-center justify-center p-2 h-full w-full border-b" style={getScoreStyleClass(getAspectScore(aspect.id))}>
|
|
<p className="text-sm text-black">{aspect.name}</p>
|
|
<span className="text-2xl">{formatScore(getVerifiedAspectScore(aspect.id))}</span>
|
|
</div>
|
|
{aspect.subAspects.map((subAspect) => (
|
|
<div key={subAspect.id} className="flex flex-col gap-2 p-2 h-full w-full">
|
|
<div className="flex flex-row gap-2 justify-between h-full w-full">
|
|
<p className="text-xs text-muted-foreground text-left">{subAspect.name}</p>
|
|
<span className="text-xs font-bold">{formatScore(getVerifiedSubAspectScore(subAspect.id))}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Total verified score */}
|
|
<div className="flex flex-row w-full h-fit p-3 justify-center gap-2 font-bold text-3xl" style={getScoreStyleClass(Number(totalScore), true)}>
|
|
<p className="text-center">Level Maturitas:</p>
|
|
<span>{totalVerifiedScore}</span>
|
|
</div>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
<Card className="flex flex-col lg:flex-row gap-8 border-none shadow-none w-full">
|
|
{/* Pie Chart */}
|
|
{selectedItem === 'Hasil Sementara' ? (
|
|
<Card className="flex flex-col w-full">
|
|
<CardHeader className="items-start pb-0">
|
|
<CardTitle className="text-lg">Diagram Lingkaran</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<PieChartComponent
|
|
chartData={chartData}
|
|
totalScore={totalScore}
|
|
chartConfig={chartConfig}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card className="flex flex-col w-full">
|
|
<CardHeader className="items-start pb-0">
|
|
<CardTitle className="text-lg">Diagram Lingkaran Terverifikasi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<PieChartComponent
|
|
chartData={verifiedChartData}
|
|
totalScore={totalVerifiedScore}
|
|
chartConfig={chartConfig}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Radar Chart */}
|
|
{selectedItem === 'Hasil Sementara' ? (
|
|
<Card className="flex flex-col w-full">
|
|
<CardHeader className="items-start pb-0">
|
|
<CardTitle className="text-lg">Diagram Radar</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadarChartComponent chartData={chartData} chartConfig={chartConfig} />
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card className="flex flex-col w-full">
|
|
<CardHeader className="items-start pb-0">
|
|
<CardTitle className="text-lg">Diagram Radar Terverifikasi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadarChartComponent chartData={verifiedChartData} chartConfig={chartConfig} />
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</Card>
|
|
|
|
<Card className="flex w-full h-fit border mt-8">
|
|
{/* Bar Chart */}
|
|
{selectedItem === 'Hasil Sementara' ? (
|
|
<>
|
|
<Card className="w-full">
|
|
<CardHeader className="items-start">
|
|
<CardTitle className="text-lg">Diagram Batang</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BarChartComponent barChartData={sortedBarChartData} barChartConfig={barChartConfig} />
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Card className="w-full">
|
|
<CardHeader className="items-start">
|
|
<CardTitle className="text-lg">Diagram Batang Terverifikasi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BarChartComponent barChartData={sortedVerifiedBarChartData} barChartConfig={barChartConfig} />
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</Card>
|
|
</Card>
|
|
</Card>
|
|
);
|
|
}
|