gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add responsive feature to assessment result page

Browse Source
This commit is contained in:
Sukma Gladys 2024-11-21 11:48:00 +07:00
parent 9bfad134cb
commit fe53a127e9
2 changed files with 148 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/frontend/src/components/AppHeader.tsx
View File

@ -77,7 +77,7 @@ export default function AppHeader({ toggle, toggleLeftSidebar }: Props) {
</Button> </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" /> <TbMenu2 onClick={toggleLeftSidebar} className="md:ml-0 ml-6 mt-8 w-6 h-fit pb-4 mb-4 cursor-pointer lg:hidden" />
)} )}

206
apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx
View File

@ -19,10 +19,14 @@ import {
ChartTooltipContent, ChartTooltipContent,
} from "@/shadcn/components/ui/chart" } from "@/shadcn/components/ui/chart"
import { aspectQueryOptions } from "@/modules/aspectManagement/queries/aspectQueries"; 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 { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shadcn/components/ui/dropdown-menu";
import clsx from "clsx"; import clsx from "clsx";
import React from "react"; 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 getQueryParam = (param: string) => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
@ -37,6 +41,21 @@ export default function AssessmentResultPage() {
const { user } = useAuth(); const { user } = useAuth();
const isSuperAdmin = user?.role === "super-admin"; 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); const [assessmentId, setAssessmentId] = useState<string | undefined>(undefined);
useEffect(() => { useEffect(() => {
@ -168,26 +187,6 @@ export default function AssessmentResultPage() {
return config; return config;
}, {} as ChartConfig) || {}; }, {} 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 // Dropdown State
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [selectedItem, setSelectedItem] = useState('Hasil Assessment'); const [selectedItem, setSelectedItem] = useState('Hasil Assessment');
@ -206,11 +205,11 @@ export default function AssessmentResultPage() {
// Pie Chart Component // Pie Chart Component
function PieChartComponent({ chartData, totalScore, chartConfig }: { chartData: { aspectName: string, score: number, fill: string }[], totalScore: number, chartConfig: ChartConfig }) { function PieChartComponent({ chartData, totalScore, chartConfig }: { chartData: { aspectName: string, score: number, fill: string }[], totalScore: number, chartConfig: ChartConfig }) {
return ( 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"> <div className="flex-1 pb-0 w-72">
<ChartContainer <ChartContainer
config={chartConfig} 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> <PieChart>
<ChartTooltip <ChartTooltip
@ -234,7 +233,7 @@ export default function AssessmentResultPage() {
fill="black" fill="black"
textAnchor="middle" textAnchor="middle"
dominantBaseline="middle" dominantBaseline="middle"
fontSize={14} className="text-xs lg:text-md"
> >
{chartData[index]?.score || ""} {chartData[index]?.score || ""}
</text> </text>
@ -255,7 +254,7 @@ export default function AssessmentResultPage() {
<tspan <tspan
x={viewBox.cx} x={viewBox.cx}
y={viewBox.cy} y={viewBox.cy}
className="fill-foreground text-3xl font-bold" className="fill-foreground text-2xl lg:text-3xl font-bold"
> >
{totalScore.toLocaleString()} {totalScore.toLocaleString()}
</tspan> </tspan>
@ -270,7 +269,7 @@ export default function AssessmentResultPage() {
</div> </div>
{/* Legend */} {/* 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"> <div className="flex flex-col gap-2">
{chartData.slice(0, 3).map((entry, index) => ( {chartData.slice(0, 3).map((entry, index) => (
<div key={index} className="flex items-center gap-2"> <div key={index} className="flex items-center gap-2">
@ -297,13 +296,32 @@ export default function AssessmentResultPage() {
</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 // Bar Chart Component
function BarChartComponent({ barChartData, barChartConfig }: { barChartData: { subAspectName: string, score: number, fill: string, aspectId: string, aspectName: string }[], barChartConfig: ChartConfig }) { function BarChartComponent({ barChartData, barChartConfig }: { barChartData: { subAspectName: string, score: number, fill: string, aspectId: string, aspectName: string }[], barChartConfig: ChartConfig }) {
return ( return (
<div className="w-full h-full"> <div className="w-full h-full">
<ChartContainer config={barChartConfig}> <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} /> <CartesianGrid vertical={false} horizontal={true} />
<XAxis <XAxis
dataKey="subAspectName" dataKey="subAspectName"
@ -315,8 +333,7 @@ export default function AssessmentResultPage() {
/> />
<YAxis <YAxis
domain={[0, 5]} domain={[0, 5]}
tickFormatter={(value) => value.toFixed(1)} tickCount={6}
ticks={[0, 0,5, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]}
/> />
<ChartTooltip <ChartTooltip
cursor={false} cursor={false}
@ -391,9 +408,19 @@ export default function AssessmentResultPage() {
return ( return (
<Card className="flex flex-row w-full h-full border-none shadow-none" id="pdfContainer"> <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"> <AppHeader
<p className="font-bold mb-4 text-lg">Tingkatan Level Maturitas</p> 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"> <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: 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: 4, colorVar: '--levelFour-color', title: 'Implementasi Terkelola', details: ['Terorganisir', 'Review Berkala', 'Berkelanjutan'], textColor: 'white' },
@ -433,7 +460,66 @@ 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>
<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 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> <p className="text-lg">Nilai Maturitas</p>
<span className="text-xl">{totalVerifiedScore}</span> <span className="text-xl">{totalVerifiedScore}</span>
</div> </div>
@ -446,8 +532,8 @@ export default function AssessmentResultPage() {
</div> </div>
</div> </div>
<Card className="flex flex-col w-full h-fit border-none shadow-none -mt-6 -mr-5 bg-stone-50 overflow-hidden"> <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-6 justify-center items-start bg-white p-4 border-b"> <div className="flex flex-col w-full h-fit mb-4 justify-center items-start bg-white p-4 border-b">
{/* Konten Header */} {/* Konten Header */}
<div className="flex justify-between items-center w-full"> <div className="flex justify-between items-center w-full">
{isSuperAdmin ? ( {isSuperAdmin ? (
@ -459,17 +545,17 @@ export default function AssessmentResultPage() {
<TbChevronLeft size={20} className="mr-1" /> <TbChevronLeft size={20} className="mr-1" />
Kembali Kembali
</button> </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> <p className="text-xs text-muted-foreground">Kelola dan Pantau Semua Permohonan Asesmen Dengan Mudah</p>
</div> </div>
) : ( ) : (
<div className="flex flex-col"> <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> <p className="text-xs text-muted-foreground">Kelola dan Pantau Semua Permohonan Asesmen Dengan Mudah</p>
</div> </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"> <div className="flex">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger <DropdownMenuTrigger
@ -505,7 +591,7 @@ export default function AssessmentResultPage() {
{isSuperAdmin && {isSuperAdmin &&
<Card className="flex flex-col h-full mb-6 justify-center items-start mx-4"> <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 className="flex flex-col gap-4">
<div> <div>
<p className="text-muted-foreground">Nama Responden</p> <p className="text-muted-foreground">Nama Responden</p>
@ -578,8 +664,8 @@ export default function AssessmentResultPage() {
{selectedItem === 'Hasil Assessment' ? ( {selectedItem === 'Hasil Assessment' ? (
<> <>
{/* Score Table */} {/* 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 lg:mx-4">
<Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden text-center 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"> <table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
<thead> <thead>
<tr> <tr>
@ -587,13 +673,13 @@ export default function AssessmentResultPage() {
<th <th
key={aspect.id} key={aspect.id}
colSpan={2} 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"> <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 <span
className={clsx( className={clsx(
"text-3xl font-bold", "text-sm lg:text-3xl font-bold",
)} )}
style={getScoreStyleClass(getAspectScore(aspect.id))} style={getScoreStyleClass(getAspectScore(aspect.id))}
> >
@ -610,11 +696,11 @@ export default function AssessmentResultPage() {
{aspectsData?.data?.map((aspect) => ( {aspectsData?.data?.map((aspect) => (
<React.Fragment key={aspect.id}> <React.Fragment key={aspect.id}>
{/* Sub-aspect Name Column (No Right Border) */} {/* 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 || ""} {aspect.subAspects[rowIndex]?.name || ""}
</td> </td>
{/* Sub-aspect Score Column (No Left Border and w-fit for flexible width) */} {/* 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)) : ""} {aspect.subAspects[rowIndex] ? formatScore(getSubAspectScore(aspect.subAspects[rowIndex].id)) : ""}
</td> </td>
</React.Fragment> </React.Fragment>
@ -628,8 +714,8 @@ export default function AssessmentResultPage() {
) : ( ) : (
<> <>
{/* Verified Result Table */} {/* 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 lg:mx-4">
<Card className="flex flex-col h-fit my-2 mb-6 overflow-hidden border-y text-center 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"> <table className="w-full table-fixed border-collapse border rounded-lg overflow-hidden">
<thead> <thead>
<tr> <tr>
@ -637,13 +723,13 @@ export default function AssessmentResultPage() {
<th <th
key={aspect.id} key={aspect.id}
colSpan={2} 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"> <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 <span
className={clsx( className={clsx(
"text-3xl font-bold", "text-sm lg:text-3xl font-bold",
)} )}
style={getScoreStyleClass(getVerifiedAspectScore(aspect.id))} style={getScoreStyleClass(getVerifiedAspectScore(aspect.id))}
> >
@ -660,11 +746,11 @@ export default function AssessmentResultPage() {
{aspectsData?.data?.map((aspect) => ( {aspectsData?.data?.map((aspect) => (
<React.Fragment key={aspect.id}> <React.Fragment key={aspect.id}>
{/* Sub-aspect Name Column (No Right Border) */} {/* 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 || ""} {aspect.subAspects[rowIndex]?.name || ""}
</td> </td>
{/* Sub-aspect Score Column (No Left Border and w-fit for flexible width) */} {/* 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)) : ""} {aspect.subAspects[rowIndex] ? formatScore(getVerifiedSubAspectScore(aspect.subAspects[rowIndex].id)) : ""}
</td> </td>
</React.Fragment> </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 */} {/* Bar Chart */}
{selectedItem === 'Hasil Assessment' ? ( {selectedItem === 'Hasil Assessment' ? (
<> <>
<Card className="w-full"> <Card className="w-full">
<CardHeader className="items-start"> <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> </CardHeader>
<CardContent> <CardContent>
<BarChartComponent barChartData={sortedBarChartData} barChartConfig={barChartConfig} /> <BarChartComponent barChartData={sortedBarChartData} barChartConfig={barChartConfig} />
@ -694,7 +780,7 @@ export default function AssessmentResultPage() {
<> <>
<Card className="w-full"> <Card className="w-full">
<CardHeader className="items-start"> <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> </CardHeader>
<CardContent> <CardContent>
<BarChartComponent barChartData={sortedVerifiedBarChartData} barChartConfig={barChartConfig} /> <BarChartComponent barChartData={sortedVerifiedBarChartData} barChartConfig={barChartConfig} />
@ -705,10 +791,7 @@ export default function AssessmentResultPage() {
{/* Pie Chart */} {/* Pie Chart */}
{selectedItem === 'Hasil Assessment' ? ( {selectedItem === 'Hasil Assessment' ? (
<Card className="flex flex-col w-64"> <Card className="flex flex-col w-full lg:w-64">
<CardHeader className="items-start pb-0">
<CardTitle className="text-lg">Diagram Lingkaran</CardTitle>
</CardHeader>
<CardContent> <CardContent>
<PieChartComponent <PieChartComponent
chartData={chartData} chartData={chartData}
@ -718,10 +801,7 @@ export default function AssessmentResultPage() {
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
<Card className="flex flex-col w-64"> <Card className="flex flex-col w-full lg:w-64">
<CardHeader className="items-start pb-0">
<CardTitle className="text-lg">Diagram Lingkaran Terverifikasi</CardTitle>
</CardHeader>
<CardContent> <CardContent>
<PieChartComponent <PieChartComponent
chartData={verifiedChartData} chartData={verifiedChartData}