apps/frontend/src/components/DashboardTable.tsx

@@ -23,7 +23,7 @@ export default function DashboardTable<T>({ table }: Props<T>) {
 					{headerGroup.headers.map((header) => (
 						<TableHead
 						key={header.id}
-						className={`px-6 py-3 text-left text-sm font-medium text-muted-foreground ${header.column.columnDef.header === 'Status' ? 'text-center' : ''}`}
+						className={`px-6 py-3 text-left text-sm font-medium text-muted-foreground ${header.column.columnDef.header === 'Status' ? 'text-center' : (header.column.columnDef.header === 'Aksi' && window.location.pathname === '/assessmentRequest') ? 'text-center' : ''}`}
 						style={{
 							maxWidth: `${header.column.columnDef.maxSize}px`,
 							width: `${header.getSize()}`,

apps/frontend/src/index.css

@@ -70,6 +70,7 @@
 
 :root {
   --primary-color: #2555FF;
+  --hover-primary-color: #0032e6;
   --levelOne-color: #FF2F32;
   --levelTwo-color: #FE6939;
   --levelThree-color: #EED42D;

apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx

@@ -8,8 +8,13 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { Badge } from "@/shadcn/components/ui/badge";
 import { Button } from "@/shadcn/components/ui/button";
 import StartAssessmentModal from "@/modules/assessmentRequest/modals/ConfirmModal";
-import { TbListCheck, TbClipboardText } from "react-icons/tb";
-
+import { TbListCheck, TbClipboardText, TbChevronDown, TbChevronUp, TbChevronRight } from "react-icons/tb";
+import { NavigationMenu, 
+		 NavigationMenuList, 
+		 NavigationMenuItem, 
+		 NavigationMenuTrigger, 
+		 NavigationMenuContent } from "@/shadcn/components/ui/navigation-menu";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/shadcn/components/ui/dropdown-menu";
 
 export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequest/")({
 	component: UsersPage,
@@ -141,47 +146,45 @@ export default function UsersPage() {
 						},
 					}),
 					columnHelper.display({
-						header: "Actions",
+						header: "Aksi",
 						cell: (props) => {
 							const status = props.row.original.status;
 							const assessmentId = props.row.original.assessmentId; // Retrieve the assessmentId from the data row
+							const [isOpen, setIsOpen] = useState(false); 
 
 							return (
-								<div className="flex gap-2">
-									{/* Button Create Assessment */}
-									{status === "selesai" ? (
-										<Button variant={"secondary"} disabled><TbClipboardText className="mr-2" />Mulai Asesmen</Button>
-									) : status === "diterima" ? (
- 										<Button onClick={() => handleOpenModal(assessmentId ?? '')}>
-											<TbClipboardText className="mr-2" />
-											Mulai Asesmen
+								<div className="flex items-center justify-center">
+								<DropdownMenu onOpenChange={(open) => setIsOpen(open)}>
+								<DropdownMenuTrigger asChild>
+								  <Button variant="secondary" className="pl-4 pr-2 rounded-lg bg-[--primary-color] text-white hover:bg-[--hover-primary-color] hover:text-white">
+									Pilihan
+            						{isOpen ? <TbChevronDown className="ml-10" /> : <TbChevronRight className="ml-10" />}
 								  </Button>
-									) : status === "dalam pengerjaan" ? (
-										<Button onClick={() => {
-											// Direct to assessment page without showing modal
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="start" className="w-full">
+								<DropdownMenuItem
+									onClick={() => {
+									  if (status === "diterima") {
+										handleOpenModal(assessmentId ?? '');
+									  } else if (status === "dalam pengerjaan") {
 										const newUrl = `/assessment?id=${assessmentId}`;
 										window.open(newUrl, "_blank");
-										}}>
+									  }
+									}}
+									disabled={!(status === "diterima" || status === "dalam pengerjaan")}
+								  >
 									<TbClipboardText className="mr-2" />
-											Lanjutkan Asesmen
-										</Button>
-									) : (
-										<Button variant={"secondary"} disabled><TbClipboardText className="mr-2" />
 									Mulai Asesmen
-										</Button>
-									)}
-
-									{/* Button View Result */}
-									{status === "selesai" || status === "belum diverifikasi" ? (
-										<Button variant={"outline"} onClick={()=>handleViewResult(assessmentId ?? '')}>
+								  </DropdownMenuItem>
+								  <DropdownMenuItem
+									onClick={() => status === "selesai" || status === "belum diverifikasi" ? handleViewResult(assessmentId ?? '') : null}
+									disabled={!(status === "selesai" || status === "belum diverifikasi")}
+								  >
 									<TbListCheck className="mr-2" />
 									Lihat Hasil
-										</Button>
-									) : (
-										<Button variant={"outline"} disabled><TbListCheck className="mr-2" />
-											Lihat Hasil
-										</Button>
-									)}
+								  </DropdownMenuItem>
+								</DropdownMenuContent>
+							  </DropdownMenu>
 							  </div>
 							);
 						},