842 lines
36 KiB
TypeScript
842 lines
36 KiB
TypeScript
import { useEffect, 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 {
|
|
Card,
|
|
CardContent,
|
|
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, TbChevronRight, TbChevronUp, TbFileTypePdf } from "react-icons/tb";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
|
|
import clsx from "clsx";
|
|
import React from "react";
|
|
import AppHeader from "@/components/AppHeader";
|
|
import { LeftSheet, LeftSheetContent } from "@/shadcn/components/ui/leftsheet";
|
|
import { ScrollArea } from "@mantine/core";
|
|
import data from "node_modules/backend/src/appEnv";
|
|
|
|
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 [isMobile, setIsMobile] = useState(window.innerWidth <= 768); // Check for mobile screen
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
const [openNavbar, setOpenNavbar] = useState(false);
|
|
const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(false);
|
|
const toggle = () => {
|
|
setOpenNavbar((prevState) => !prevState);
|
|
};
|
|
|
|
// Adjust layout on screen resize
|
|
window.addEventListener('resize', () => {
|
|
setIsMobile(window.innerWidth <= 768);
|
|
});
|
|
|
|
const toggleLeftSidebar = () => setIsLeftSidebarOpen(!isLeftSidebarOpen);
|
|
|
|
const [assessmentId, setAssessmentId] = useState<string | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
const id = getQueryParam("id");
|
|
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));
|
|
const { data: allAspectsScoreData } = useQuery(getAllAspectsAverageScore(assessmentId));
|
|
const { data: allSubAspectsScoreData } = useQuery(getAllSubAspectsAverageScore(assessmentId));
|
|
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;
|
|
};
|
|
|
|
const getSubAspectScore = (subAspectId: string) => {
|
|
return allSubAspectsScoreData?.subAspects?.find((score) => score.subAspectId === subAspectId)?.averageScore || undefined;
|
|
};
|
|
|
|
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, assessmentStatus: string) => {
|
|
if (assessmentStatus !== "selesai") return undefined;
|
|
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';
|
|
};
|
|
|
|
// Total score
|
|
const totalScore = parseFloat(formatScore(assessmentResult?.assessmentsResult));
|
|
const totalVerifiedScore =
|
|
assessmentStatus === "selesai"
|
|
? parseFloat(formatScore(verifiedAssessmentResult?.verifiedAssessmentsResult))
|
|
: 0;
|
|
|
|
// 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 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.50) {
|
|
colorVar = '--levelFour-color';
|
|
descLevel = '4';
|
|
} else if (score >= 4.50 && score <= 5) {
|
|
colorVar = '--levelFive-color';
|
|
descLevel = '5';
|
|
}
|
|
|
|
return isBg
|
|
? { backgroundColor: `var(${colorVar})`, descLevel }
|
|
: { color: `var(${colorVar})`, descLevel };
|
|
};
|
|
|
|
// Warna aspek
|
|
const aspectsColors = [
|
|
"#37DCCC",
|
|
"#FF8C8C",
|
|
"#51D0FD",
|
|
"#FEA350",
|
|
"#AD8AFC",
|
|
];
|
|
|
|
// Data diagram
|
|
const chartData = aspectsData?.data?.map((aspect, index) => ({
|
|
aspectName: aspect.name,
|
|
score: Number(formatScore(getAspectScore(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) => ({
|
|
subAspectName: subAspect.name,
|
|
score: Number(formatScore(getSubAspectScore(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 =
|
|
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 =
|
|
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);
|
|
const [selectedItem, setSelectedItem] = useState('Hasil Asesmen');
|
|
|
|
const handleDropdownToggle = () => {
|
|
setIsOpen((prev) => !prev);
|
|
};
|
|
|
|
const handleItemClick = () => {
|
|
setSelectedItem(prev =>
|
|
prev === 'Hasil Asesmen' ? 'Hasil Terverifikasi' : 'Hasil Asesmen'
|
|
);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
// Pie Chart Component
|
|
function PieChartComponent({ chartData, totalScore, chartConfig }: { chartData: { aspectName: string, score: number, fill: string }[], totalScore: number, chartConfig: ChartConfig }) {
|
|
return (
|
|
<div className="flex lg:flex-col w-full border-none">
|
|
<div className="flex-1 pb-0 w-72">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="-ml-6 -mb-6 lg:mb-6 aspect-square max-h-60 lg: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"
|
|
className="text-xs lg:text-md"
|
|
>
|
|
{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-2xl lg:text-3xl font-bold"
|
|
>
|
|
{totalScore.toLocaleString()}
|
|
</tspan>
|
|
</text>
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
</Pie>
|
|
</PieChart>
|
|
</ChartContainer>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="flex flex-col lg:grid lg:grid-cols-2 gap-x-4 text-xs justify-center gap-2 lg:gap-0">
|
|
<div className="flex flex-col gap-2">
|
|
{chartData.slice(0, 3).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 className="flex flex-col gap-2">
|
|
{chartData.slice(3).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>
|
|
</div>
|
|
);
|
|
}
|
|
// Mengatur tampilan label sumbu X
|
|
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)"
|
|
className="lg:text-[0.6rem] text-[0.3rem]"
|
|
>
|
|
{payload.value.slice(0, 3)}
|
|
</text>
|
|
</g>
|
|
);
|
|
};
|
|
|
|
// Bar Chart Component
|
|
function BarChartComponent({ barChartData, barChartConfig }: { barChartData: { subAspectName: string, score: number, fill: string, aspectId: string, aspectName: string }[], barChartConfig: ChartConfig }) {
|
|
return (
|
|
<div className="w-full h-full">
|
|
<ChartContainer config={barChartConfig}>
|
|
<BarChart accessibilityLayer data={barChartData} margin={{ top: 5, left: -40 }}>
|
|
<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 handlePrintPDF = async () => {
|
|
const pdfContainer = document.getElementById("pdfContainer");
|
|
|
|
if (pdfContainer) {
|
|
// Sembunyikan elemen yang tidak ingin dicetak
|
|
const buttonPrint = document.getElementById("button-print");
|
|
const noPrint = document.getElementById("no-print");
|
|
if (buttonPrint) buttonPrint.style.visibility = 'hidden';
|
|
if (noPrint) noPrint.style.visibility = 'hidden';
|
|
|
|
const options = {
|
|
margin: [10, 10, 10, -220],
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: {
|
|
scale: 2,
|
|
width: 1510,
|
|
height: pdfContainer.scrollHeight,
|
|
ignoreElements: (element: { tagName: string; }) => {
|
|
// Abaikan elemen <header> dalam pdfContainer
|
|
return element.tagName === 'HEADER';
|
|
},
|
|
},
|
|
jsPDF: {
|
|
unit: 'pt',
|
|
format: 'a4',
|
|
orientation: 'portrait',
|
|
}
|
|
};
|
|
|
|
try {
|
|
const pdfBlob: Blob = await html2pdf()
|
|
.set(options)
|
|
.from(pdfContainer)
|
|
.toPdf()
|
|
.get('pdf')
|
|
.then((pdf: any) => {
|
|
pdf.setProperties({
|
|
title: 'Hasil_Asesemen_Level_Maturitas',
|
|
});
|
|
return pdf.output('blob');
|
|
});
|
|
|
|
const pdfURL = URL.createObjectURL(pdfBlob);
|
|
window.open(pdfURL, '_blank');
|
|
} catch (err) {
|
|
console.error("Error generating PDF:", err);
|
|
} finally {
|
|
// Tampilkan kembali elemen yang disembunyikan
|
|
if (buttonPrint) buttonPrint.style.visibility = 'visible';
|
|
if (noPrint) noPrint.style.visibility = 'visible';
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="flex flex-row w-full h-full border-none shadow-none" id="pdfContainer">
|
|
<AppHeader
|
|
openNavbar={isLeftSidebarOpen}
|
|
toggle={toggleLeftSidebar}
|
|
toggleLeftSidebar={toggleLeftSidebar}
|
|
/>
|
|
{isMobile && (
|
|
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
|
|
<LeftSheetContent className="h-full w-75 overflow-auto">
|
|
<ScrollArea className="h-full w-75 rounded-md p-2">
|
|
<Label className="text-gray-800 p-5 text-sm font-normal">Tingkatan Level Maturitas</Label>
|
|
<div className="flex flex-col w-64 h-fit border-none shadow-none -mt-6 pt-6">
|
|
<div className="flex flex-col mr-2 h-full">
|
|
<p className="font-bold mb-4 text-lg">Tingkatan Level Maturitas</p>
|
|
{[
|
|
{ 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 }) => (
|
|
<div key={level} className="flex flex-row h-full border-none">
|
|
<div
|
|
className="w-20 h-20 text-white font-medium text-lg flex justify-center items-center"
|
|
style={{ background: `var(${colorVar})` }}
|
|
>
|
|
<p className="text-center">Level {level}</p>
|
|
</div>
|
|
<div className="flex flex-col items-start justify-center p-2">
|
|
<p className="text-xs font-bold whitespace-nowrap">{title}</p>
|
|
{details.map((detail) => (
|
|
<p key={detail} className="text-xs">{detail}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Total verified score */}
|
|
<div className="pt-14">
|
|
{selectedItem === 'Hasil Asesmen' ? (
|
|
<>
|
|
<div className="flex flex-row h-16 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
|
|
<p className="text-lg">Nilai Maturitas</p>
|
|
<span className="text-xl">{totalScore}</span>
|
|
</div>
|
|
<div className="flex flex-row h-16 font-semibold justify-between items-center gap-2 pl-8 pr-6 text-white -ml-6" style={getScoreStyleClass(Number(totalScore), true)}>
|
|
<p className="text-lg">Level Maturitas</p>
|
|
<span className="ml-2 text-xl">{getScoreStyleClass(Number(totalScore), true).descLevel}</span>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex flex-row h-16 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
|
|
<p className="text-lg">Nilai Maturitas</p>
|
|
<span className="text-xl">{totalVerifiedScore}</span>
|
|
</div>
|
|
<div className="flex flex-row h-16 font-semibold justify-between items-center gap-2 pl-8 pr-6 text-white -ml-6" style={getScoreStyleClass(Number(totalVerifiedScore), true)}>
|
|
<p className="text-lg">Level Maturitas</p>
|
|
<span className="ml-2 text-xl">{getScoreStyleClass(Number(totalVerifiedScore), true).descLevel}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
</LeftSheetContent>
|
|
</LeftSheet>
|
|
)}
|
|
|
|
<div className="hidden md:block lg:flex flex-col w-fit h-fit border-r shadow-none -mt-6 pt-6">
|
|
<div className="flex flex-col mr-2 h-full">
|
|
<p className="font-bold mb-4 text-lg">Tingkatan Level Maturitas</p>
|
|
{[
|
|
{ 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 }) => (
|
|
<div key={level} className="flex flex-row h-full border-none">
|
|
<div
|
|
className="w-20 h-20 text-white font-medium text-lg flex justify-center items-center"
|
|
style={{ background: `var(${colorVar})` }}
|
|
>
|
|
<p className="text-center">Level {level}</p>
|
|
</div>
|
|
<div className="flex flex-col items-start justify-center p-2">
|
|
<p className="text-xs font-bold whitespace-nowrap">{title}</p>
|
|
{details.map((detail) => (
|
|
<p key={detail} className="text-xs">{detail}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Total verified score */}
|
|
<div className="pt-14">
|
|
{selectedItem === 'Hasil Asesmen' ? (
|
|
<>
|
|
<div className="flex flex-row h-16 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
|
|
<p className="text-lg">Nilai Maturitas</p>
|
|
<span className="text-xl">{totalScore}</span>
|
|
</div>
|
|
<div className="flex flex-row h-16 font-semibold justify-between items-center gap-2 pl-8 pr-6 text-white -ml-6" style={getScoreStyleClass(Number(totalScore), true)}>
|
|
<p className="text-lg">Level Maturitas</p>
|
|
<span className="ml-2 text-xl">{getScoreStyleClass(Number(totalScore), true).descLevel}</span>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex flex-row h-16 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
|
|
<p className="text-lg">Nilai Maturitas</p>
|
|
<span className="text-xl">{totalVerifiedScore}</span>
|
|
</div>
|
|
<div className="flex flex-row h-16 font-semibold justify-between items-center gap-2 pl-8 pr-6 text-white -ml-6" style={getScoreStyleClass(Number(totalVerifiedScore), true)}>
|
|
<p className="text-lg">Level Maturitas</p>
|
|
<span className="ml-2 text-xl">{getScoreStyleClass(Number(totalVerifiedScore), true).descLevel}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="flex flex-col w-screen h-fit border-none shadow-none -mt-6 lg:-mr-5 lg:-ml-0 -mx-3 bg-stone-50 overflow-hidden">
|
|
<div className="flex flex-col w-full h-fit mb-4 justify-center items-start bg-white p-4 border-b">
|
|
{/* Konten Header */}
|
|
<div className="flex flex-col lg:flex-row 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-md lg: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-md lg:text-2xl font-bold">Dasboard Hasil Tingkat Kematangan Keamanan Cyber</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 mt-4 lg:mt-0" id="button-print">
|
|
<div className="flex">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
className="text-black flex w-44 p-2 pl-4 rounded-lg text-sm items-start justify-between border 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-xs lg:text-sm items-start">
|
|
<DropdownMenuItem className="w-full" onClick={handleItemClick}>
|
|
{selectedItem === 'Hasil Asesmen' ? 'Hasil Terverifikasi' : 'Hasil Asesmen'}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
)}
|
|
</DropdownMenu>
|
|
</div>
|
|
<button
|
|
onClick={() => handlePrintPDF()}
|
|
className="bg-blue-600 text-white flex w-fit py-2 px-4 rounded-lg text-xs lg:text-sm items-start justify-between outline-none ring-offset-0"
|
|
>
|
|
Cetak PDF
|
|
<TbFileTypePdf size={20} className="ml-2" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{isSuperAdmin &&
|
|
<Card className="flex flex-col h-full mb-6 justify-center items-start mx-4">
|
|
<div className="flex lg:flex-row flex-col text-xs h-full w-full justify-between p-6 gap-4 lg:gap-0">
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="text-muted-foreground">Nama Responden</p>
|
|
<p>{assessmentResult?.respondentName}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Posisi</p>
|
|
<p>{assessmentResult?.position}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Nama Pengguna</p>
|
|
<p>{assessmentResult?.username}</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>
|
|
<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">No. HP</p>
|
|
<p>{assessmentResult?.phoneNumber}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Alamat</p>
|
|
<p>{assessmentResult?.address}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground">Tanggal Asesmen</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>
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="text-muted-foreground">Status Asesmen</p>
|
|
<p>{assessmentResult?.statusAssessment}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
}
|
|
|
|
{/* Conditional rendering based on selectedItem */}
|
|
{selectedItem === 'Hasil Asesmen' ? (
|
|
<>
|
|
{/* Score Table */}
|
|
<Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden lg:mx-4">
|
|
<p className="text-sm lg:text-lg font-bold p-2 border-b">Tabel Nilai Hasil Asesmen</p>
|
|
<table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
|
|
<thead>
|
|
<tr>
|
|
{aspectsData?.data?.map((aspect) => (
|
|
<th
|
|
key={aspect.id}
|
|
colSpan={2}
|
|
className="text-start font-normal bg-white border border-gray-200 p-2 lg:p-4 w-1/5 whitespace-nowrap"
|
|
>
|
|
<div className="flex flex-col items-start">
|
|
<p className="text-[0.6rem] lg:text-sm text-black">{aspect.name}</p>
|
|
<span
|
|
className={clsx(
|
|
"text-sm lg:text-3xl font-bold",
|
|
)}
|
|
style={getScoreStyleClass(getAspectScore(aspect.id))}
|
|
>
|
|
{formatScore(getAspectScore(aspect.id))}
|
|
</span>
|
|
</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{aspectsData && Array.from({ length: Math.max(...aspectsData.data.map(aspect => aspect.subAspects.length)) }).map((_, rowIndex) => (
|
|
<tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-slate-100" : "bg-white"}>
|
|
{aspectsData?.data?.map((aspect) => (
|
|
<React.Fragment key={aspect.id}>
|
|
{/* Sub-aspect Name Column (No Right Border) */}
|
|
<td className="text-[0.33rem] md:text-[0.5rem] lg:text-xs text-black p-1 py-0 lg:py-2 border-t border-l border-b border-gray-200 w-full text-left">
|
|
{aspect.subAspects[rowIndex]?.name || ""}
|
|
</td>
|
|
{/* Sub-aspect Score Column (No Left Border and w-fit for flexible width) */}
|
|
<td className="text-[0.4rem] lg:text-sm font-bold text-right p-1 lg:p-2 border-t border-b border-r border-gray-200 w-fit">
|
|
{aspect.subAspects[rowIndex] ? formatScore(getSubAspectScore(aspect.subAspects[rowIndex].id)) : ""}
|
|
</td>
|
|
</React.Fragment>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</Card>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* Verified Result Table */}
|
|
<Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden border-y lg:mx-4">
|
|
<p className="text-sm lg:text-lg font-bold p-2 border-b">Tabel Nilai Hasil Asesmen Terverifikasi</p>
|
|
<table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
|
|
<thead>
|
|
<tr>
|
|
{aspectsData?.data?.map((aspect) => (
|
|
<th
|
|
key={aspect.id}
|
|
colSpan={2}
|
|
className="text-start font-normal bg-white border border-gray-200 p-2 lg:p-4 w-1/5 whitespace-nowrap"
|
|
>
|
|
<div className="flex flex-col items-start">
|
|
<p className="text-[0.6rem] lg:text-sm text-black">{aspect.name}</p>
|
|
<span
|
|
className={clsx(
|
|
"text-sm lg:text-3xl font-bold",
|
|
)}
|
|
style={getScoreStyleClass(getVerifiedAspectScore(aspect.id, assessmentStatus ?? ''))}
|
|
>
|
|
{formatScore(getVerifiedAspectScore(aspect.id, assessmentStatus ?? ''))}
|
|
</span>
|
|
</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{aspectsData && Array.from({ length: Math.max(...aspectsData.data.map(aspect => aspect.subAspects.length)) }).map((_, rowIndex) => (
|
|
<tr key={rowIndex} className={rowIndex % 2 === 0 ? "bg-slate-100" : "bg-white"}>
|
|
{aspectsData?.data?.map((aspect) => (
|
|
<React.Fragment key={aspect.id}>
|
|
{/* Sub-aspect Name Column (No Right Border) */}
|
|
<td className="text-[0.33rem] md:text-[0.5rem] lg:text-xs text-black p-1 py-0 lg:py-2 border-t border-l border-b border-gray-200 w-full text-left">
|
|
{aspect.subAspects[rowIndex]?.name || ""}
|
|
</td>
|
|
{/* Sub-aspect Score Column (No Left Border and w-fit for flexible width) */}
|
|
<td className="text-[0.4rem] lg:text-sm font-bold text-right p-1 lg:p-2 border-t border-b border-r border-gray-200 w-fit">
|
|
{aspect.subAspects[rowIndex] ? formatScore(getVerifiedSubAspectScore(aspect.subAspects[rowIndex].id, assessmentStatus ?? '')) : ""}
|
|
</td>
|
|
</React.Fragment>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
<Card className="flex flex-col lg:flex-row gap-4 border-none shadow-none lg:mx-4 bg-transparent">
|
|
{/* Bar Chart */}
|
|
{selectedItem === 'Hasil Asesmen' ? (
|
|
<>
|
|
<Card className="w-full">
|
|
<CardHeader className="items-start">
|
|
<CardTitle className="text-sm lg:text-lg">Diagram Nilai Hasil Asesmen</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BarChartComponent barChartData={sortedBarChartData} barChartConfig={barChartConfig} />
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Card className="w-full">
|
|
<CardHeader className="items-start">
|
|
<CardTitle className="text-sm lg:text-lg">Diagram Nilai Hasil Asesmen Terverifikasi</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BarChartComponent barChartData={sortedVerifiedBarChartData} barChartConfig={barChartConfig} />
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
{/* Pie Chart */}
|
|
{selectedItem === 'Hasil Asesmen' ? (
|
|
<Card className="flex flex-col w-full lg:w-64">
|
|
<CardContent>
|
|
<PieChartComponent
|
|
chartData={chartData}
|
|
totalScore={totalScore}
|
|
chartConfig={chartConfig}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card className="flex flex-col w-full lg:w-64">
|
|
<CardContent>
|
|
<PieChartComponent
|
|
chartData={verifiedChartData}
|
|
totalScore={totalVerifiedScore}
|
|
chartConfig={chartConfig}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</Card>
|
|
</Card>
|
|
</Card>
|
|
);
|
|
}
|