Update: Layout FE (Left, middle, right)

apps/frontend/src/routes/_assessmentLayout.tsx

@@ -0,0 +1,65 @@
+import { Navigate, Outlet, createFileRoute } from "@tanstack/react-router";
+import AppHeader from "../components/AppHeader";
+import AppNavbar from "../components/AppNavbar";
+import useAuth from "@/hooks/useAuth";
+import { useQuery } from "@tanstack/react-query";
+import fetchRPC from "@/utils/fetchRPC";
+import client from "@/honoClient";
+import { useState } from "react";
+
+export const Route = createFileRoute("/_assessmentLayout")({
+  component: AssessmentLayout,
+
+  // beforeLoad: ({ location }) => {
+  // 	if (true) {
+  // 		throw redirect({
+  // 			to: "/login",
+  // 		});
+  // 	}
+  // },
+});
+
+function AssessmentLayout() {
+  const { isAuthenticated, saveAuthData } = useAuth();
+
+  useQuery({
+    queryKey: ["my-profile"],
+    queryFn: async () => {
+      const response = await fetchRPC(client.auth["my-profile"].$get());
+
+      saveAuthData({
+        id: response.id,
+        name: response.name,
+        permissions: response.permissions,
+      });
+
+      return response;
+    },
+    enabled: isAuthenticated,
+  });
+
+  const [openNavbar, setNavbarOpen] = useState(true);
+  const toggle = () => {
+    setNavbarOpen(!openNavbar);
+  };
+
+  return isAuthenticated ? (
+    <div className="flex flex-col w-full h-screen overflow-hidden">
+      {/* Header */}
+      <AppHeader toggle={toggle} openNavbar={openNavbar} />
+
+      {/* Main Content Area */}
+      <div className="flex h-full w-screen overflow-hidden">
+        {/* Sidebar */}
+        <AppNavbar />
+
+        {/* Main Content */}
+        <main className="relative w-full mt-16 bg-white overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  ) : (
+    <Navigate to="/login" />
+  );
+}

apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx

@@ -25,13 +25,14 @@ import {
 import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb";
 import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
 import { useState, useRef, useEffect } from "react";
+import AppHeader from "@/components/AppHeader";
 
 const getQueryParam = (param: string) => {
   const urlParams = new URLSearchParams(window.location.search);
   return urlParams.get(param);
 };
 
-export const Route = createLazyFileRoute("/_dashboardLayout/assessment/")({
+export const Route = createLazyFileRoute("/_assessmentLayout/assessment/")({
   component: AssessmentPage,
 });
 
@@ -446,8 +447,9 @@ export default function AssessmentPage() {
 
           {/* LEFT-SIDE */}
           {/* Aspek dan Sub-Aspek */}
-          <Flex direction="column" gap="xs" className="mr-4 w-52">
+          <Flex direction="column" gap="xs" className="w-52">
-            <div className="space-y-4">
+            <div className="space-y-2">
+              {/* Aspek */}
               {aspectsQuery.data?.data
                 .filter((aspect) =>
                   aspect.subAspects.some((subAspect) =>
@@ -457,13 +459,13 @@ export default function AssessmentPage() {
                 .map((aspect) => (
                   <div
                     key={aspect.id}
-                    className="p-4 bg-gray-50 rounded-lg shadow-md"
+                    className="p-2 "
                   >
                     <div
                       className="flex justify-between cursor-pointer"
                       onClick={() => toggleAspect(aspect.id)}
                     >
-                      <div className="text-lg text-gray-700">{aspect.name}</div>
+                      <div className="text-lg font-bold px-3">{aspect.name}</div>
                       <div>
                         {openAspects[aspect.id] ? (
                           <TbChevronUp size={25} />
@@ -473,6 +475,7 @@ export default function AssessmentPage() {
                       </div>
                     </div>
 
+                    {/* Sub-Aspek */}
                     {openAspects[aspect.id] && (
                       <div className="mt-2 space-y-2">
                         {aspect.subAspects
@@ -482,7 +485,7 @@ export default function AssessmentPage() {
                           .map((subAspect) => (
                             <div
                               key={subAspect.id}
-                              className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
+                              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'}`}
                               onClick={() => setSelectedSubAspectId(subAspect.id)}
                             >
                               <div>{subAspect.name}</div>
@@ -494,6 +497,7 @@ export default function AssessmentPage() {
                 ))}
             </div>
           </Flex>
+          
           {/* Pertanyaan */}
             <Stack gap="sm" style={{ flex: 1 }}>
               <Text className="text-2xl font-bold ml-6">
@@ -517,14 +521,15 @@ export default function AssessmentPage() {
                     >
                       <Stack gap="sm">
                         <Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
-                        <Text className="font-bold mr-3">{startIndex + index + 1}.</Text>
+                          {/* Question */}
+                          <Text className="font-bold mx-3 p-1">{startIndex + index + 1}.</Text>
                           <div className="flex-grow">
                             <Text className="font-bold break-words">
                               {question.questionText}
                             </Text>
                           </div>
 
-                        {/* Action Icon */}
+                          {/* Action Icon/Flag */}
                           <ActionIcon
                             onClick={() => {
                               setFlaggedQuestions((prevFlags) => ({
@@ -540,6 +545,7 @@ export default function AssessmentPage() {
                             }
                             color={flaggedQuestions[questionId] ? "red" : "white"}
                             style={{
+                              margin: "2px 10px",
                               border: "1px gray solid",
                               borderRadius: "4px",
                               backgroundColor: flaggedQuestions[questionId] ? "red" : "white",
@@ -559,7 +565,7 @@ export default function AssessmentPage() {
 
                         {/* Opsi Radio Button */}
                         {question.options?.length > 0 ? (
-                        <div className="ml-6">
+                          <div className="mx-12">
                             <Radio.Group value={answers[question.questionId] || ""}>
                               <div className="flex flex-col gap-4">
                                 {question.options.map((option: any) => (
@@ -593,7 +599,7 @@ export default function AssessmentPage() {
                         )}
 
                         {/* Textarea */}
-                      <div className="ml-6">
+                        <div className="mx-12">
                           <Textarea
                             placeholder="Berikan keterangan terkait jawaban di atas"
                             value={validationInformation[question.questionId] || ""}
@@ -603,7 +609,7 @@ export default function AssessmentPage() {
                         </div>
 
                         {/* File Upload */}
-                      <div className="ml-6">
+                        <div className="mx-12">
                           {question.needFile === true && (
                             <div
                               className={`pt-5 pb-5 pr-5 pl-5 border-2 rounded-lg border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
@@ -656,7 +662,7 @@ export default function AssessmentPage() {
 
                         {/* Garis pembatas setiap soal */}
                         <div>
-                        <hr className="border-t-2 border-gray-300 ml-6 mx-auto mt-6 mb-6" />
+                          <hr className="border-t-2 border-gray-300 mx-12 mt-6 mb-6" />
                         </div>
                       </Stack>
                     </div>
@@ -666,7 +672,7 @@ export default function AssessmentPage() {
             </Stack>
 
           {/* Navigasi dan Pagination */}
-          <Flex direction="column" gap="xs" className="ml-4">
+          <Flex direction="column" gap="xs" className="mx-4">
 
             {/* Navigasi (Number of Questions) */}
             <div className="grid grid-cols-5 gap-2">

apps/frontend/src/routes/_assessmentLayout/assessment/index.tsx

@@ -9,7 +9,7 @@ const searchParamSchema = z.object({
 	detail: z.string().default("").optional(),
 });
 
-export const Route = createFileRoute("/_dashboardLayout/assessment/")({
+export const Route = createFileRoute("/_assessmentLayout/assessment/")({
 	validateSearch: searchParamSchema,
 
 	loader: ({ context: { queryClient } }) => {