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

update: change assessment and verifying, add border on left and right side

Browse Source
This commit is contained in:
abiyasa05 2024-11-16 09:04:16 +07:00
parent 563251f8c6
commit ca4ec0a538
2 changed files with 748 additions and 788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx
View File

@ -1,10 +1,6 @@
import { createLazyFileRoute } from "@tanstack/react-router"; import { createLazyFileRoute } from "@tanstack/react-router";
import { import {
Flex,
Stack,
Text,
Loader, Loader,
ActionIcon,
} from "@mantine/core"; } from "@mantine/core";
import { import {
Card, Card,
@ -569,9 +565,9 @@ export default function AssessmentPage() {
if (isError) { if (isError) {
return ( return (
<Text color="red"> <p color="red">
Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."} Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
</Text> </p>
); );
} }
@ -579,9 +575,9 @@ export default function AssessmentPage() {
return ( return (
<Card> <Card>
<CardContent> <CardContent>
<Text color="red" className="text-center"> <p color="red" className="text-center">
Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid. Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
</Text> </p>
</CardContent> </CardContent>
</Card> </Card>
); );
@ -615,8 +611,8 @@ export default function AssessmentPage() {
return ( return (
<div> <div>
<Stack gap="md"> <div className="space-y-4">
<Flex justify="space-between" align="flex-start" mt="lg"> <div className="flex justify-between items-start">
{/* LEFT-SIDE */} {/* LEFT-SIDE */}
{/* Aspek dan Sub-Aspek */} {/* Aspek dan Sub-Aspek */}
@ -631,7 +627,7 @@ export default function AssessmentPage() {
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}> <LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
<LeftSheetContent className="h-full w-75 overflow-auto"> <LeftSheetContent className="h-full w-75 overflow-auto">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label> <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<Flex direction="column" gap="xs" className="w-64"> <div className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
{aspectsQuery.data?.data {aspectsQuery.data?.data
@ -666,7 +662,7 @@ export default function AssessmentPage() {
.map((subAspect) => ( .map((subAspect) => (
<div <div
key={subAspect.id} key={subAspect.id}
className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`} className={`cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
onClick={() => setSelectedSubAspectId(subAspect.id)} onClick={() => setSelectedSubAspectId(subAspect.id)}
> >
<div className="text-xs">{subAspect.name}</div> <div className="text-xs">{subAspect.name}</div>
@ -677,15 +673,15 @@ export default function AssessmentPage() {
</div> </div>
))} ))}
</div> </div>
</Flex> </div>
</LeftSheetContent> </LeftSheetContent>
</LeftSheet> </LeftSheet>
)} )}
{/* Sidebar for Desktop (Always Visible) */} {/* Sidebar for Desktop (Always Visible) */}
<div className="hidden md:block fixed h-screen w-64 overflow-auto"> <div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label> <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<Flex direction="column" gap="xs" className="w-64"> <div className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
{aspectsQuery.data?.data {aspectsQuery.data?.data
@ -731,21 +727,21 @@ export default function AssessmentPage() {
</div> </div>
))} ))}
</div> </div>
</Flex> </div>
</div> </div>
{/* MIDDLE */} {/* MIDDLE */}
{/* Pertanyaan */} {/* Pertanyaan */}
<div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full"> <div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full">
<Stack gap="sm" style={{ flex: 1 }}> <div className="space-y-6 flex flex-col">
<Text className="text-2xl font-bold ml-6"> <Label className="text-2xl font-bold ml-6 mt-4">
Harap menjawab semua pertanyaan yang tersedia Harap menjawab semua pertanyaan yang tersedia
</Text> </Label>
<Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text> <Label className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Label>
{filteredQuestions.length === 0 ? ( {filteredQuestions.length === 0 ? (
<Text className="text-center p-3"> <Label className="text-center p-3">
Pertanyaan tidak ada untuk sub-aspek yang dipilih. Pertanyaan tidak ada untuk sub-aspek yang dipilih.
</Text> </Label>
) : ( ) : (
filteredQuestions.map((question: any, index: number) => { filteredQuestions.map((question: any, index: number) => {
const questionId = question.questionId; const questionId = question.questionId;
@ -757,16 +753,15 @@ export default function AssessmentPage() {
ref={(el) => (questionRefs.current[questionId] = el)} ref={(el) => (questionRefs.current[questionId] = el)}
className="space-y-4" className="space-y-4"
> >
<Stack gap="sm">
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start"> <div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
{/* Question Number */} {/* Question Number */}
<Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text> <Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
{/* Question Text */} {/* Question Text */}
<Text className="font-bold break-words text-sm p-2">{question.questionText}</Text> <Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
{/* Action Icon/Flag */} {/* Action Button/Flag */}
<ActionIcon <button
onClick={() => handleToggleFlag(questionId)} onClick={() => handleToggleFlag(questionId)}
title="Tandai" title="Tandai"
className={`m-2 rounded-md border-1 flex items-center justify-center h-7 w-7 ${flaggedQuestions[questionId] ? "border-white bg-red-500" : "border-gray-100 bg-white"}`} className={`m-2 rounded-md border-1 flex items-center justify-center h-7 w-7 ${flaggedQuestions[questionId] ? "border-white bg-red-500" : "border-gray-100 bg-white"}`}
@ -775,7 +770,7 @@ export default function AssessmentPage() {
size={25} size={25}
className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`} className={`p-1 ${flaggedQuestions[questionId] ? "text-white" : "text-black"}`}
/> />
</ActionIcon> </button>
</div> </div>
{/* Radio Button Options */} {/* Radio Button Options */}
@ -812,7 +807,7 @@ export default function AssessmentPage() {
</RadioGroup> </RadioGroup>
</div> </div>
) : ( ) : (
<Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text> <Label color="red">Tidak ada opsi untuk pertanyaan ini.</Label>
)} )}
{/* Textarea for additional information */} {/* Textarea for additional information */}
@ -844,12 +839,11 @@ export default function AssessmentPage() {
<div> <div>
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" /> <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
</div> </div>
</Stack>
</div> </div>
); );
}) })
)} )}
</Stack> </div>
{/* Pagination for mobile */} {/* Pagination for mobile */}
<div className="md:hidden mb-4 flex justify-center"> <div className="md:hidden mb-4 flex justify-center">
<Pagination <Pagination
@ -861,7 +855,7 @@ export default function AssessmentPage() {
} }
}} }}
> >
<Text className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Text> <Label className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Label>
</Pagination> </Pagination>
</div> </div>
</div> </div>
@ -928,10 +922,9 @@ export default function AssessmentPage() {
return ( return (
<div key={aspect.aspectId} className="flex justify-between items-center"> <div key={aspect.aspectId} className="flex justify-between items-center">
<Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text> <Label className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Label>
<Text <Label
className={`text-xl font-bold ${ className={`text-xl font-bold ${aspectScoreValue >= 4.5
aspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: aspectScoreValue >= 3.5 : aspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -943,12 +936,12 @@ export default function AssessmentPage() {
}`} }`}
> >
{aspectScore} {aspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-base text-gray-700">Data aspek ini kosong</Text> <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
)} )}
</div> </div>
@ -964,10 +957,9 @@ export default function AssessmentPage() {
return ( return (
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2"> <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
<Text className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Text> <Label className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Label>
<Text <Label
className={`text-sm font-bold ${ className={`text-sm font-bold ${subAspectScoreValue >= 4.5
subAspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: subAspectScoreValue >= 3.5 : subAspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -979,12 +971,12 @@ export default function AssessmentPage() {
}`} }`}
> >
{subAspectScore} {subAspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text> <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
)} )}
</div> </div>
@ -1019,11 +1011,11 @@ export default function AssessmentPage() {
</div> </div>
{/* Sidebar for desktop (always visible) */} {/* Sidebar for desktop (always visible) */}
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4"> <div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4 border-x">
<Flex direction="column" gap="xs" className="mx-4"> <div className="mx-4 space-y-2">
<Text className="font-medium text-lg text-gray-800 mb-2"> <Label className="font-medium text-lg text-gray-800 mb-2">
Nomor Soal Nomor Soal
</Text> </Label>
{/* Navigasi (Number of Questions) */} {/* Navigasi (Number of Questions) */}
<div className="grid grid-cols-5 gap-2"> <div className="grid grid-cols-5 gap-2">
@ -1050,8 +1042,10 @@ export default function AssessmentPage() {
) : null; ) : null;
})} })}
</div> </div>
</div>
<div className="mt-4 flex justify-center"> {/* Pagination */}
<div className="mt-6 py-2 flex justify-center border-y">
<Pagination <Pagination
page={currentPage} page={currentPage}
totalPages={totalPages} totalPages={totalPages}
@ -1061,16 +1055,17 @@ export default function AssessmentPage() {
} }
}} }}
> >
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text> <Label className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Label>
</Pagination> </Pagination>
</div> </div>
<div className="mx-4 space-y-2">
{/* Skor Aspek dan Sub-Aspek */} {/* Skor Aspek dan Sub-Aspek */}
<div className="mt-4"> <div className="mt-4">
<Card> <Card>
<Text className="text-lg font-extrabold text-center mt-4 mb-2"> <p className="text-lg font-extrabold text-center mt-4 mb-2">
Nilai Sementara Nilai Sementara
</Text> </p>
<CardContent className="max-h-full overflow-hidden"> <CardContent className="max-h-full overflow-hidden">
<ScrollArea className="h-[200px] w-full rounded-md p-2"> <ScrollArea className="h-[200px] w-full rounded-md p-2">
<CardDescription> <CardDescription>
@ -1081,10 +1076,9 @@ export default function AssessmentPage() {
return ( return (
<div key={aspect.aspectId} className="flex justify-between items-center"> <div key={aspect.aspectId} className="flex justify-between items-center">
<Text className="text-lg text-gray-700">{aspect.aspectName}</Text> <Label className="text-lg text-gray-700">{aspect.aspectName}</Label>
<Text <Label
className={`text-xl font-bold ${ className={`text-xl font-bold ${aspectScoreValue >= 4.5
aspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: aspectScoreValue >= 3.5 : aspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -1096,12 +1090,12 @@ export default function AssessmentPage() {
}`} }`}
> >
{aspectScore} {aspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-base text-gray-700">Data aspek ini kosong</Text> <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
)} )}
</CardDescription> </CardDescription>
@ -1116,10 +1110,9 @@ export default function AssessmentPage() {
return ( return (
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2"> <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
<Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text> <Label className="text-sm text-gray-700">{subAspect.subAspectName}</Label>
<Text <Label
className={`text-sm font-bold ${ className={`text-sm font-bold ${subAspectScoreValue >= 4.5
subAspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: subAspectScoreValue >= 3.5 : subAspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -1131,14 +1124,15 @@ export default function AssessmentPage() {
}`} }`}
> >
{subAspectScore} {subAspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text> <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
)} )}
</ScrollArea> </ScrollArea>
{/* Tombol Selesai */} {/* Tombol Selesai */}
<div> <div>
<Button <Button
@ -1166,10 +1160,10 @@ export default function AssessmentPage() {
/> />
</Card> </Card>
</div> </div>
</Flex>
</div> </div>
</Flex> </div>
</Stack> </div>
</div>
</div> </div>
); );
} }

162
apps/frontend/src/routes/_verifyingLayout/verifying/index.lazy.tsx
View File

@ -1,12 +1,6 @@
import { createLazyFileRoute } from "@tanstack/react-router"; import { createLazyFileRoute } from "@tanstack/react-router";
import { import {
Flex,
Stack,
Text,
Loader, Loader,
ActionIcon,
CloseButton,
Group,
} from "@mantine/core"; } from "@mantine/core";
import { import {
Card, Card,
@ -32,11 +26,9 @@ import {
} from "@/shadcn/components/ui/leftsheet"; } from "@/shadcn/components/ui/leftsheet";
import { useQuery, useMutation } from "@tanstack/react-query"; import { useQuery, useMutation } from "@tanstack/react-query";
import { import {
submitAssessmentMutationOptions,
uploadFileMutationOptions, uploadFileMutationOptions,
fetchAspects, fetchAspects,
getQuestionsAllQueryOptions, getQuestionsAllQueryOptions,
toggleFlagAnswer,
} from "@/modules/assessmentManagement/queries/assessmentQueries"; } from "@/modules/assessmentManagement/queries/assessmentQueries";
import { import {
getAnswersRevisionQueryOptions, getAnswersRevisionQueryOptions,
@ -50,7 +42,6 @@ import {
import { TbLayoutSidebarLeftCollapseFilled, TbChevronRight, TbChevronDown } from "react-icons/tb"; import { TbLayoutSidebarLeftCollapseFilled, TbChevronRight, TbChevronDown } from "react-icons/tb";
import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal"; import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal"; import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
import FileSizeValidationModal from "@/modules/assessmentManagement/modals/FileSizeValidationModal";
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect } from "react";
import AppHeader from "@/components/AppHeader"; import AppHeader from "@/components/AppHeader";
@ -185,17 +176,17 @@ export default function AssessmentPage() {
} }
}, [aspectsQuery.data, selectedSubAspectId, data?.data]); }, [aspectsQuery.data, selectedSubAspectId, data?.data]);
// Fetching answers for the assessment // Fetching answers for the assessment
const { data: answersData } = useQuery( const { data: answersData } = useQuery(
getAnswersRevisionQueryOptions(assessmentId || "") getAnswersRevisionQueryOptions(assessmentId || "")
); );
const formattedResult = answersData?.data.reduce((acc, item) => { const formattedResult = answersData?.data.reduce((acc, item) => {
if (item.questionId != null && item.newOptionId != null) { if (item.questionId != null && item.newOptionId != null) {
acc[item.questionId] = item.newOptionId; acc[item.questionId] = item.newOptionId;
} }
return acc; return acc;
}, {} as Record<string, string>); }, {} as Record<string, string>);
// Effect untuk mengatur answers dari data yang diambil // Effect untuk mengatur answers dari data yang diambil
useEffect(() => { useEffect(() => {
@ -216,7 +207,7 @@ const formattedResult = answersData?.data.reduce((acc, item) => {
const unanswered = data?.data.filter(question => { const unanswered = data?.data.filter(question => {
return question.questionId !== null && !answers[question.questionId]; return question.questionId !== null && !answers[question.questionId];
}) || []; }) || [];
console.log("unanswered questions:", unanswered.length); console.log("unanswered questions:", unanswered.length);
setUnansweredQuestions(unanswered.length); setUnansweredQuestions(unanswered.length);
// Tampilkan modal berdasarkan jumlah pertanyaan yang belum dijawab // Tampilkan modal berdasarkan jumlah pertanyaan yang belum dijawab
@ -288,29 +279,6 @@ console.log("unanswered questions:", unanswered.length);
} }
}, [flaggedQuestions]); }, [flaggedQuestions]);
// Mutation function to toggle flag
// const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
// mutationFn: toggleFlagAnswer,
// onSuccess: (response) => {
// if (response && response.answer) {
// const { answer } = response;
// setFlaggedQuestions((prevFlags) => {
// const newFlags = {
// ...prevFlags,
// [answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
// };
// // Simpan perubahan ke localStorage
// localStorage.setItem("flaggedQuestions", JSON.stringify(newFlags));
// return newFlags;
// });
// }
// },
// onError: (error) => {
// console.error("Error toggling flag:", error);
// },
// });
// Usage of the mutation in your component // Usage of the mutation in your component
const { mutate: submitOption } = useMutation({ const { mutate: submitOption } = useMutation({
mutationFn: (form: { mutationFn: (form: {
@ -561,9 +529,9 @@ console.log("unanswered questions:", unanswered.length);
if (isError) { if (isError) {
return ( return (
<Text color="red"> <p color="red">
Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."} Error: {error?.message || "Terjadi kesalahan saat memuat pertanyaan."}
</Text> </p>
); );
} }
@ -571,9 +539,9 @@ console.log("unanswered questions:", unanswered.length);
return ( return (
<Card> <Card>
<CardContent> <CardContent>
<Text color="red" className="text-center"> <p color="red" className="text-center">
Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid. Error: Data Asesmen tidak ditemukan. Harap akses halaman melalui link yang valid.
</Text> </p>
</CardContent> </CardContent>
</Card> </Card>
); );
@ -607,8 +575,8 @@ console.log("unanswered questions:", unanswered.length);
return ( return (
<div> <div>
<Stack gap="md"> <div className="space-y-4">
<Flex justify="space-between" align="flex-start" mt="lg"> <div className="flex justify-between items-start">
{/* LEFT-SIDE */} {/* LEFT-SIDE */}
{/* Aspek dan Sub-Aspek */} {/* Aspek dan Sub-Aspek */}
@ -623,7 +591,7 @@ console.log("unanswered questions:", unanswered.length);
<LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}> <LeftSheet open={isLeftSidebarOpen} onOpenChange={(open) => setIsLeftSidebarOpen(open)}>
<LeftSheetContent className="h-full w-75 overflow-auto"> <LeftSheetContent className="h-full w-75 overflow-auto">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label> <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<Flex direction="column" gap="xs" className="w-64"> <div className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
{aspectsQuery.data?.data {aspectsQuery.data?.data
@ -658,7 +626,7 @@ console.log("unanswered questions:", unanswered.length);
.map((subAspect) => ( .map((subAspect) => (
<div <div
key={subAspect.id} key={subAspect.id}
className={`flex justify-between cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`} className={`cursor-pointer p-2 px-6 rounded-sm transition-colors duration-150 ${selectedSubAspectId === subAspect.id ? 'text-black font-medium bg-gray-200' : 'text-gray-500'}`}
onClick={() => setSelectedSubAspectId(subAspect.id)} onClick={() => setSelectedSubAspectId(subAspect.id)}
> >
<div className="text-xs">{subAspect.name}</div> <div className="text-xs">{subAspect.name}</div>
@ -669,15 +637,15 @@ console.log("unanswered questions:", unanswered.length);
</div> </div>
))} ))}
</div> </div>
</Flex> </div>
</LeftSheetContent> </LeftSheetContent>
</LeftSheet> </LeftSheet>
)} )}
{/* Sidebar for Desktop (Always Visible) */} {/* Sidebar for Desktop (Always Visible) */}
<div className="hidden md:block fixed h-screen w-64 overflow-auto"> <div className="hidden md:block fixed h-full w-66 overflow-auto border-x">
<Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label> <Label className="text-gray-800 p-5 text-sm font-normal">Aspek Menu</Label>
<Flex direction="column" gap="xs" className="w-64"> <div className="w-64">
<div className="space-y-2"> <div className="space-y-2">
{/* Aspek */} {/* Aspek */}
{aspectsQuery.data?.data {aspectsQuery.data?.data
@ -723,21 +691,21 @@ console.log("unanswered questions:", unanswered.length);
</div> </div>
))} ))}
</div> </div>
</Flex> </div>
</div> </div>
{/* MIDDLE */} {/* MIDDLE */}
{/* Pertanyaan */} {/* Pertanyaan */}
<div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full"> <div className="ml-0 md:ml-64 mr-0 md:mr-60 flex-1 overflow-y-auto h-full">
<Stack gap="sm" style={{ flex: 1 }}> <div className="space-y-6 flex flex-col">
<Text className="text-2xl font-bold ml-6"> <Label className="text-2xl font-bold ml-6 mt-4">
Harap menjawab semua pertanyaan yang tersedia Harap menjawab semua pertanyaan yang tersedia
</Text> </Label>
<Text className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Text> <Label className="text-gray-400 ml-6 mb-7">Semua jawaban Anda akan ditinjau</Label>
{filteredQuestions.length === 0 ? ( {filteredQuestions.length === 0 ? (
<Text className="text-center p-3"> <Label className="text-center p-3">
Pertanyaan tidak ada untuk sub-aspek yang dipilih. Pertanyaan tidak ada untuk sub-aspek yang dipilih.
</Text> </Label>
) : ( ) : (
filteredQuestions.map((question: any, index: number) => { filteredQuestions.map((question: any, index: number) => {
const questionId = question.questionId; const questionId = question.questionId;
@ -749,13 +717,12 @@ console.log("unanswered questions:", unanswered.length);
ref={(el) => (questionRefs.current[questionId] = el)} ref={(el) => (questionRefs.current[questionId] = el)}
className="space-y-4" className="space-y-4"
> >
<Stack gap="sm">
<div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start"> <div className="grid grid-cols-[auto_1fr_auto] gap-2 w-full items-start">
{/* Question Number */} {/* Question Number */}
<Text className="font-bold p-2 text-sm">{startIndex + index + 1}.</Text> <Label className="font-bold p-2 text-sm">{startIndex + index + 1}.</Label>
{/* Question Text */} {/* Question Text */}
<Text className="font-bold break-words text-sm p-2">{question.questionText}</Text> <Label className="font-bold break-words text-sm p-2">{question.questionText}</Label>
</div> </div>
{/* Radio Button Options */} {/* Radio Button Options */}
@ -792,7 +759,7 @@ console.log("unanswered questions:", unanswered.length);
</RadioGroup> </RadioGroup>
</div> </div>
) : ( ) : (
<Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text> <Label color="red">Tidak ada opsi untuk pertanyaan ini.</Label>
)} )}
{/* Textarea for additional information */} {/* Textarea for additional information */}
@ -808,12 +775,11 @@ console.log("unanswered questions:", unanswered.length);
<div> <div>
<hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" /> <hr className="border-t-2 border-gray-300 mx-11 mt-6 mb-6" />
</div> </div>
</Stack>
</div> </div>
); );
}) })
)} )}
</Stack> </div>
{/* Pagination for mobile */} {/* Pagination for mobile */}
<div className="md:hidden mb-4 flex justify-center"> <div className="md:hidden mb-4 flex justify-center">
<Pagination <Pagination
@ -825,7 +791,7 @@ console.log("unanswered questions:", unanswered.length);
} }
}} }}
> >
<Text className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Text> <Label className="text-sm m-0">Halaman {currentPage} dari {totalPages}</Label>
</Pagination> </Pagination>
</div> </div>
</div> </div>
@ -892,10 +858,9 @@ console.log("unanswered questions:", unanswered.length);
return ( return (
<div key={aspect.aspectId} className="flex justify-between items-center"> <div key={aspect.aspectId} className="flex justify-between items-center">
<Text className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Text> <Label className="text-lg text-gray-700 break-words whitespace-normal">{aspect.aspectName}</Label>
<Text <Label
className={`text-xl font-bold ${ className={`text-xl font-bold ${aspectScoreValue >= 4.5
aspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: aspectScoreValue >= 3.5 : aspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -907,12 +872,12 @@ console.log("unanswered questions:", unanswered.length);
}`} }`}
> >
{aspectScore} {aspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-base text-gray-700">Data aspek ini kosong</Text> <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
)} )}
</div> </div>
@ -928,10 +893,9 @@ console.log("unanswered questions:", unanswered.length);
return ( return (
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2"> <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
<Text className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Text> <Label className="text-sm text-gray-700 break-words whitespace-normal">{subAspect.subAspectName}</Label>
<Text <Label
className={`text-sm font-bold ${ className={`text-sm font-bold ${subAspectScoreValue >= 4.5
subAspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: subAspectScoreValue >= 3.5 : subAspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -943,12 +907,12 @@ console.log("unanswered questions:", unanswered.length);
}`} }`}
> >
{subAspectScore} {subAspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text> <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
)} )}
</div> </div>
@ -982,11 +946,11 @@ console.log("unanswered questions:", unanswered.length);
</Sheet> </Sheet>
</div> </div>
{/* Sidebar for desktop (always visible) */} {/* Sidebar for desktop (always visible) */}
<div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4"> <div className="hidden md:block fixed h-screen right-0 w-60 overflow-auto mr-4 border-x">
<Flex direction="column" gap="xs" className="mx-4"> <div className="mx-4 space-y-2">
<Text className="font-medium text-lg text-gray-800 mb-2"> <Label className="font-medium text-lg text-gray-800 mb-2">
Nomor Soal Nomor Soal
</Text> </Label>
{/* Navigasi (Number of Questions) */} {/* Navigasi (Number of Questions) */}
<div className="grid grid-cols-5 gap-2"> <div className="grid grid-cols-5 gap-2">
@ -1013,8 +977,10 @@ console.log("unanswered questions:", unanswered.length);
) : null; ) : null;
})} })}
</div> </div>
</div>
<div className="mt-4 flex justify-center"> {/* Pagination */}
<div className="mt-6 py-2 flex justify-center border-y">
<Pagination <Pagination
page={currentPage} page={currentPage}
totalPages={totalPages} totalPages={totalPages}
@ -1024,16 +990,17 @@ console.log("unanswered questions:", unanswered.length);
} }
}} }}
> >
<Text className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Text> <Label className="text-xs m-0">Halaman {currentPage} dari {totalPages}</Label>
</Pagination> </Pagination>
</div> </div>
<div className="mx-4 space-y-2">
{/* Skor Aspek dan Sub-Aspek */} {/* Skor Aspek dan Sub-Aspek */}
<div className="mt-4"> <div className="mt-4">
<Card> <Card>
<Text className="text-lg font-extrabold text-center mt-4 mb-2"> <p className="text-lg font-extrabold text-center mt-4 mb-2">
Nilai Sementara Nilai Sementara
</Text> </p>
<CardContent className="max-h-full overflow-hidden"> <CardContent className="max-h-full overflow-hidden">
<ScrollArea className="h-[200px] w-full rounded-md p-2"> <ScrollArea className="h-[200px] w-full rounded-md p-2">
<CardDescription> <CardDescription>
@ -1044,10 +1011,9 @@ console.log("unanswered questions:", unanswered.length);
return ( return (
<div key={aspect.aspectId} className="flex justify-between items-center"> <div key={aspect.aspectId} className="flex justify-between items-center">
<Text className="text-lg text-gray-700">{aspect.aspectName}</Text> <Label className="text-lg text-gray-700">{aspect.aspectName}</Label>
<Text <Label
className={`text-xl font-bold ${ className={`text-xl font-bold ${aspectScoreValue >= 4.5
aspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: aspectScoreValue >= 3.5 : aspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -1059,12 +1025,12 @@ console.log("unanswered questions:", unanswered.length);
}`} }`}
> >
{aspectScore} {aspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-base text-gray-700">Data aspek ini kosong</Text> <Label className="text-base text-gray-700">Data aspek ini kosong</Label>
)} )}
</CardDescription> </CardDescription>
@ -1079,10 +1045,9 @@ console.log("unanswered questions:", unanswered.length);
return ( return (
<div key={subAspect.subAspectId} className="flex justify-between items-center my-2"> <div key={subAspect.subAspectId} className="flex justify-between items-center my-2">
<Text className="text-sm text-gray-700">{subAspect.subAspectName}</Text> <Label className="text-sm text-gray-700">{subAspect.subAspectName}</Label>
<Text <Label
className={`text-sm font-bold ${ className={`text-sm font-bold ${subAspectScoreValue >= 4.5
subAspectScoreValue >= 4.5
? "text-green-700" ? "text-green-700"
: subAspectScoreValue >= 3.5 : subAspectScoreValue >= 3.5
? "text-green-400" ? "text-green-400"
@ -1094,14 +1059,15 @@ console.log("unanswered questions:", unanswered.length);
}`} }`}
> >
{subAspectScore} {subAspectScore}
</Text> </Label>
</div> </div>
); );
}) })
) : ( ) : (
<Text className="text-sm text-gray-700">Data sub-aspek ini kosong</Text> <Label className="text-sm text-gray-700">Data sub-aspek ini kosong</Label>
)} )}
</ScrollArea> </ScrollArea>
{/* Tombol Selesai */} {/* Tombol Selesai */}
<div> <div>
<Button <Button
@ -1129,10 +1095,10 @@ console.log("unanswered questions:", unanswered.length);
/> />
</Card> </Card>
</div> </div>
</Flex>
</div> </div>
</Flex>
</Stack>
</div> </div>
</div>
</div>
</div >
); );
} }