fix: add responsive feature to assessment result page
This commit is contained in:
Sukma Gladys
parent
9bfad134cb
commit
fe53a127e9
|
|
@ -77,7 +77,7 @@ export default function AppHeader({ toggle, toggleLeftSidebar }: Props) {
|
|||
</Button>
|
||||
)}
|
||||
|
||||
{(showAssessmentLinks || showVerifyingAssessmentLinks) && (
|
||||
{(showAssessmentLinks || showVerifyingAssessmentLinks || showAssessmentResultLinks) && (
|
||||
<TbMenu2 onClick={toggleLeftSidebar} className="md:ml-0 ml-6 mt-8 w-6 h-fit pb-4 mb-4 cursor-pointer lg:hidden" />
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,10 +19,14 @@ import {
|
|||
ChartTooltipContent,
|
||||
} from "@/shadcn/components/ui/chart"
|
||||
import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries";
|
||||
import { TbChevronDown, TbChevronLeft, TbChevronUp, TbFileTypePdf } from "react-icons/tb";
|
||||
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);
|
||||
|
|
@ -37,6 +41,21 @@ 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(() => {
|
||||
|
|
@ -168,26 +187,6 @@ export default function AssessmentResultPage() {
|
|||
return config;
|
||||
}, {} as ChartConfig) || {};
|
||||
|
||||
// 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)"
|
||||
fontSize={10}
|
||||
>
|
||||
{payload.value}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
// Dropdown State
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState('Hasil Assessment');
|
||||
|
|
@ -206,11 +205,11 @@ export default function AssessmentResultPage() {
|
|||
// Pie Chart Component
|
||||
function PieChartComponent({ chartData, totalScore, chartConfig }: { chartData: { aspectName: string, score: number, fill: string }[], totalScore: number, chartConfig: ChartConfig }) {
|
||||
return (
|
||||
<div className="flex flex-col w-full border-none">
|
||||
<div className="flex lg:flex-col w-full border-none">
|
||||
<div className="flex-1 pb-0 w-72">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="-ml-6 aspect-square max-h-64"
|
||||
className="-ml-6 -mb-6 lg:mb-6 aspect-square max-h-60 lg:max-h-64"
|
||||
>
|
||||
<PieChart>
|
||||
<ChartTooltip
|
||||
|
|
@ -234,7 +233,7 @@ export default function AssessmentResultPage() {
|
|||
fill="black"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontSize={14}
|
||||
className="text-xs lg:text-md"
|
||||
>
|
||||
{chartData[index]?.score || ""}
|
||||
</text>
|
||||
|
|
@ -255,7 +254,7 @@ export default function AssessmentResultPage() {
|
|||
<tspan
|
||||
x={viewBox.cx}
|
||||
y={viewBox.cy}
|
||||
className="fill-foreground text-3xl font-bold"
|
||||
className="fill-foreground text-2xl lg:text-3xl font-bold"
|
||||
>
|
||||
{totalScore.toLocaleString()}
|
||||
</tspan>
|
||||
|
|
@ -270,7 +269,7 @@ export default function AssessmentResultPage() {
|
|||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="grid grid-cols-2 gap-x-4 text-xs">
|
||||
<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">
|
||||
|
|
@ -297,13 +296,32 @@ export default function AssessmentResultPage() {
|
|||
</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, bottom: 128, left: -20 }}>
|
||||
<BarChart accessibilityLayer data={barChartData} margin={{ top: 5, left: -40 }}>
|
||||
<CartesianGrid vertical={false} horizontal={true} />
|
||||
<XAxis
|
||||
dataKey="subAspectName"
|
||||
|
|
@ -313,11 +331,10 @@ export default function AssessmentResultPage() {
|
|||
interval={0}
|
||||
tick={customizedAxisTick}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, 5]}
|
||||
tickFormatter={(value) => value.toFixed(1)}
|
||||
ticks={[0, 0,5, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, 5]}
|
||||
tickCount={6}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={({ active, payload }) => {
|
||||
|
|
@ -355,7 +372,7 @@ export default function AssessmentResultPage() {
|
|||
html2canvas: {
|
||||
scale: 2,
|
||||
width: 1510,
|
||||
height: pdfContainer.scrollHeight,
|
||||
height: pdfContainer.scrollHeight,
|
||||
},
|
||||
jsPDF: {
|
||||
unit: 'pt',
|
||||
|
|
@ -391,9 +408,78 @@ export default function AssessmentResultPage() {
|
|||
|
||||
return (
|
||||
<Card className="flex flex-row w-full h-full border-none shadow-none" id="pdfContainer">
|
||||
<div className="flex flex-col w-fit h-fit border-r shadow-none -mt-6 pt-6">
|
||||
<p className="font-bold mb-4 text-lg">Tingkatan Level Maturitas</p>
|
||||
<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 Assessment' ? (
|
||||
<>
|
||||
<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' },
|
||||
|
|
@ -433,7 +519,7 @@ export default function AssessmentResultPage() {
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-row h-16 mt-12 border-t font-semibold justify-between items-center gap-2 pl-8 pr-6 -ml-6">
|
||||
<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>
|
||||
|
|
@ -446,8 +532,8 @@ export default function AssessmentResultPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="flex flex-col w-full h-fit border-none shadow-none -mt-6 -mr-5 bg-stone-50 overflow-hidden">
|
||||
<div className="flex flex-col w-full h-fit mb-6 justify-center items-start bg-white p-4 border-b">
|
||||
<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 justify-between items-center w-full">
|
||||
{isSuperAdmin ? (
|
||||
|
|
@ -459,17 +545,17 @@ export default function AssessmentResultPage() {
|
|||
<TbChevronLeft size={20} className="mr-1" />
|
||||
Kembali
|
||||
</button>
|
||||
<p className="text-2xl font-bold">Detail Hasil Asesmen</p>
|
||||
<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-2xl font-bold">Dasboard Hasil Tingkat Kematangan Keamanan Cyber</p>
|
||||
<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" id="button-print">
|
||||
<div className="hidden lg:flex flex-row gap-2" id="button-print">
|
||||
<div className="flex">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
|
|
@ -505,7 +591,7 @@ export default function AssessmentResultPage() {
|
|||
|
||||
{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">
|
||||
<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>
|
||||
|
|
@ -578,8 +664,8 @@ export default function AssessmentResultPage() {
|
|||
{selectedItem === 'Hasil Assessment' ? (
|
||||
<>
|
||||
{/* Score Table */}
|
||||
<p className="text-lg font-bold px-4">Tabel Nilai Hasil Assessment</p>
|
||||
<Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden text-center mx-4">
|
||||
<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 Assessment</p>
|
||||
<table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -587,13 +673,13 @@ export default function AssessmentResultPage() {
|
|||
<th
|
||||
key={aspect.id}
|
||||
colSpan={2}
|
||||
className="text-center font-normal bg-white border border-gray-200 p-4 w-1/5"
|
||||
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-sm text-black">{aspect.name}</p>
|
||||
<p className="text-[0.6rem] lg:text-sm text-black">{aspect.name}</p>
|
||||
<span
|
||||
className={clsx(
|
||||
"text-3xl font-bold",
|
||||
"text-sm lg:text-3xl font-bold",
|
||||
)}
|
||||
style={getScoreStyleClass(getAspectScore(aspect.id))}
|
||||
>
|
||||
|
|
@ -610,11 +696,11 @@ export default function AssessmentResultPage() {
|
|||
{aspectsData?.data?.map((aspect) => (
|
||||
<React.Fragment key={aspect.id}>
|
||||
{/* Sub-aspect Name Column (No Right Border) */}
|
||||
<td className="text-xs text-black p-2 border-t border-l border-b border-gray-200 w-full text-left">
|
||||
<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-sm font-bold text-right p-2 border-t border-b border-r border-gray-200 w-fit">
|
||||
<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>
|
||||
|
|
@ -628,8 +714,8 @@ export default function AssessmentResultPage() {
|
|||
) : (
|
||||
<>
|
||||
{/* Verified Result Table */}
|
||||
<p className="text-lg font-bold px-4">Tabel Nilai Hasil Assessment Terverifikasi</p>
|
||||
<Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden border-y text-center mx-4">
|
||||
<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 Assessment Terverifikasi</p>
|
||||
<table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -637,13 +723,13 @@ export default function AssessmentResultPage() {
|
|||
<th
|
||||
key={aspect.id}
|
||||
colSpan={2}
|
||||
className="text-center font-normal bg-white border border-gray-200 p-4 w-1/5"
|
||||
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-sm text-black">{aspect.name}</p>
|
||||
<p className="text-[0.6rem] lg:text-sm text-black">{aspect.name}</p>
|
||||
<span
|
||||
className={clsx(
|
||||
"text-3xl font-bold",
|
||||
"text-sm lg:text-3xl font-bold",
|
||||
)}
|
||||
style={getScoreStyleClass(getVerifiedAspectScore(aspect.id))}
|
||||
>
|
||||
|
|
@ -660,11 +746,11 @@ export default function AssessmentResultPage() {
|
|||
{aspectsData?.data?.map((aspect) => (
|
||||
<React.Fragment key={aspect.id}>
|
||||
{/* Sub-aspect Name Column (No Right Border) */}
|
||||
<td className="text-xs text-black p-2 border-t border-l border-b border-gray-200 w-full text-left">
|
||||
<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-sm font-bold text-right p-2 border-t border-b border-r border-gray-200 w-fit">
|
||||
<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)) : ""}
|
||||
</td>
|
||||
</React.Fragment>
|
||||
|
|
@ -677,13 +763,13 @@ export default function AssessmentResultPage() {
|
|||
</>
|
||||
)}
|
||||
|
||||
<Card className="flex flex-row lg:flex-row gap-4 border-none shadow-none mx-4 bg-transparent">
|
||||
<Card className="flex flex-col lg:flex-row gap-4 border-none shadow-none lg:mx-4 bg-transparent">
|
||||
{/* Bar Chart */}
|
||||
{selectedItem === 'Hasil Assessment' ? (
|
||||
<>
|
||||
<Card className="w-full">
|
||||
<CardHeader className="items-start">
|
||||
<CardTitle className="text-lg">Diagram Nilai Hasil Assessment</CardTitle>
|
||||
<CardTitle className="text-sm lg:text-lg">Diagram Nilai Hasil Assessment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BarChartComponent barChartData={sortedBarChartData} barChartConfig={barChartConfig} />
|
||||
|
|
@ -694,7 +780,7 @@ export default function AssessmentResultPage() {
|
|||
<>
|
||||
<Card className="w-full">
|
||||
<CardHeader className="items-start">
|
||||
<CardTitle className="text-lg">Diagram Nilai Hasil Assessment Terverifikasi</CardTitle>
|
||||
<CardTitle className="text-sm lg:text-lg">Diagram Nilai Hasil Assessment Terverifikasi</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BarChartComponent barChartData={sortedVerifiedBarChartData} barChartConfig={barChartConfig} />
|
||||
|
|
@ -705,10 +791,7 @@ export default function AssessmentResultPage() {
|
|||
|
||||
{/* Pie Chart */}
|
||||
{selectedItem === 'Hasil Assessment' ? (
|
||||
<Card className="flex flex-col w-64">
|
||||
<CardHeader className="items-start pb-0">
|
||||
<CardTitle className="text-lg">Diagram Lingkaran</CardTitle>
|
||||
</CardHeader>
|
||||
<Card className="flex flex-col w-full lg:w-64">
|
||||
<CardContent>
|
||||
<PieChartComponent
|
||||
chartData={chartData}
|
||||
|
|
@ -718,10 +801,7 @@ export default function AssessmentResultPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="flex flex-col w-64">
|
||||
<CardHeader className="items-start pb-0">
|
||||
<CardTitle className="text-lg">Diagram Lingkaran Terverifikasi</CardTitle>
|
||||
</CardHeader>
|
||||
<Card className="flex flex-col w-full lg:w-64">
|
||||
<CardContent>
|
||||
<PieChartComponent
|
||||
chartData={verifiedChartData}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user