From f4eb4dd1efa4e642e2a055e375fbe2eb65424558 Mon Sep 17 00:00:00 2001
From: percyfikri <mafikri27@gmail.com>
Date: Tue, 5 Nov 2024 14:55:37 +0700
Subject: [PATCH] Update : Action Button in AssReq

---
 .../src/components/DashboardTable.tsx         |  2 +-
 apps/frontend/src/index.css                   |  1 +
 .../assessmentRequest/index.lazy.tsx          | 81 ++++++++++---------
 3 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/apps/frontend/src/components/DashboardTable.tsx b/apps/frontend/src/components/DashboardTable.tsx
index b0c3923..065e8d3 100644
--- a/apps/frontend/src/components/DashboardTable.tsx
+++ b/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()}`,
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 54eba2f..76d1a18 100644
--- a/apps/frontend/src/index.css
+++ b/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;
diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
index fdf0e04..806d9de 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentRequest/index.lazy.tsx
+++ b/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,48 +146,46 @@ 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
-										</Button>
-									) : status === "dalam pengerjaan" ? (
-										<Button onClick={() => {
-											// Direct to assessment page without showing modal
-											const newUrl = `/assessment?id=${assessmentId}`;
-											window.open(newUrl, "_blank");
-										}}>
-											<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 ?? '')}>
-											<TbListCheck className="mr-2" />
-											Lihat Hasil
-										</Button>
-									) : (
-										<Button variant={"outline"} disabled><TbListCheck className="mr-2" />
-											Lihat Hasil
-										</Button>
-									)}
-								</div>
+								<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>
+								</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" />
+									Mulai Asesmen
+								  </DropdownMenuItem>
+								  <DropdownMenuItem
+									onClick={() => status === "selesai" || status === "belum diverifikasi" ? handleViewResult(assessmentId ?? '') : null}
+									disabled={!(status === "selesai" || status === "belum diverifikasi")}
+								  >
+									<TbListCheck className="mr-2" />
+									Lihat Hasil
+								  </DropdownMenuItem>
+								</DropdownMenuContent>
+							  </DropdownMenu>
+							  </div>
 							);
 						},
 					}),