fix: several hardcode and component position

apps/frontend/src/components/AppHeader.tsx

@@ -30,7 +30,7 @@ interface User {
 // 	image: "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png",
 // };
 
-export default function AppHeader({toggle}: Props) {
+export default function AppHeader({ toggle }: Props) {
 	const [userMenuOpened, setUserMenuOpened] = useState(false);
 
 	const { user }: { user: User | null } = useAuth();
@@ -40,7 +40,7 @@ export default function AppHeader({toggle}: Props) {
 	// ));
 
 	return (
-		<header className="fixed top-0 left-0 w-full h-[60px] bg-white z-50 border">
+		<header className="fixed top-0 left-0 w-full h-16 bg-white z-50 border">
 			<div className="flex h-full justify-between w-full items-center">
 				<Button
 					onClick={toggle}
@@ -76,8 +76,7 @@ export default function AppHeader({toggle}: Props) {
 
 					<DropdownMenuContent
 						align="end"
-					className="transition-all duration-200 z-50 border bg-white"
+						className="transition-all duration-200 z-50 border bg-white w-64"
-        			style={{ width: '260px' }}
 					>
 						<DropdownMenuItem asChild>
 							<Link to="/logout">Logout</Link>

apps/frontend/src/components/AppNavbar.tsx

@@ -15,7 +15,7 @@ import AppHeader from "./AppHeader";
  *
  * @returns A React element representing the application's navigation bar.
  */
-export default function AppNavbar(){
+export default function AppNavbar() {
 	// const {user} = useAuth();
 
 	const { pathname } = useLocation();
@@ -67,7 +67,7 @@ export default function AppNavbar(){
 
 				{/* Sidebar */}
 				<div
-			className={`fixed lg:relative w-64 bg-white top-[60px] left-0 h-full z-40 px-3 py-4 transition-transform border-x
+					className={`fixed lg:relative w-64 bg-white top-16 left-0 h-full z-40 px-3 py-4 transition-transform border-x
 				${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
 				>
 					<ScrollArea className="flex flex-1 h-full">
@@ -81,14 +81,6 @@ export default function AppNavbar(){
 						))}
 					</ScrollArea>
 				</div>
-
-			{/* Overlay to close sidebar on mobile */}
-			{isSidebarOpen && (
-				<div
-					className="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:visible"
-					onClick={toggleSidebar}
-				/>
-			)}
 			</div>
 		</>
 	);

apps/frontend/src/components/DashboardTable.tsx

@@ -15,15 +15,15 @@ interface Props<TData> {
 
 export default function DashboardTable<T>({ table }: Props<T>) {
 	return (
-		<ScrollArea className="w-full max-w-full">
+		<div className="w-full max-w-full overflow-x-auto border rounded-lg">
-			<Table className="min-w-full divide-y divide-gray-200">
+			<Table className="min-w-full divide-y divide-muted-foreground bg-white">
-				<TableHeader className="bg-gray-50">
+				<TableHeader>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<TableRow key={headerGroup.id}>
 					{headerGroup.headers.map((header) => (
 						<TableHead
 						key={header.id}
-						className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+						className="px-6 py-3 text-left text-sm font-medium text-muted-foreground"
 						style={{
 							maxWidth: `${header.column.columnDef.maxSize}px`,
 							width: `${header.getSize()}`,
@@ -38,14 +38,14 @@ export default function DashboardTable<T>({ table }: Props<T>) {
 				))}
 				</TableHeader>
 
-				<TableBody className="bg-white divide-y divide-gray-200">
+				<TableBody>
 				{table.getRowModel().rows.length > 0 ? (
 					table.getRowModel().rows.map((row) => (
 					<TableRow key={row.id}>
 						{row.getVisibleCells().map((cell) => (
 						<TableCell
 							key={cell.id}
-							className="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
+							className="px-6 py-4 whitespace-nowrap text-sm text-black"
 							style={{
 							maxWidth: `${cell.column.columnDef.maxSize}px`,
 							}}
@@ -64,6 +64,6 @@ export default function DashboardTable<T>({ table }: Props<T>) {
 				)}
 				</TableBody>
 			</Table>
-		</ScrollArea>
+		</div>
 	);
 }

apps/frontend/src/components/PageTemplate.tsx

@@ -26,7 +26,7 @@ import {
 	PaginationLink,
 	PaginationNext,
 	PaginationPrevious,
-  } from "@/shadcn/components/ui/pagination"
+} from "@/shadcn/components/ui/pagination"
 import {
 	Select,
 	SelectContent,
@@ -122,20 +122,19 @@ const CustomPagination = ({
 	totalPages,
 	onPageChange,
 	hasNextPage,
-  }: {
+}: {
 	currentPage: number;
 	totalPages: number;
 	onPageChange: (page: number) => void;
 	hasNextPage: boolean;
-  }) => {
+}) => {
 	return (
 		<Pagination>
 			<PaginationContent>
 				<PaginationItem>
 					<PaginationPrevious
 						onClick={() => onPageChange(currentPage - 1)}
-			  className={`${
+						className={`${currentPage === 1
-				currentPage === 1
 								? 'bg-white text-muted-foreground cursor-not-allowed'
 								: 'bg-white text-black hover:bg-muted hover:text-black'
 							}`}
@@ -166,8 +165,7 @@ const CustomPagination = ({
 				<PaginationItem>
 					<PaginationNext
 						onClick={() => onPageChange(currentPage + 1)}
-			  className={`${
+						className={`${!hasNextPage || currentPage === totalPages
-				!hasNextPage || currentPage === totalPages
 								? 'bg-white text-muted-foreground cursor-not-allowed'
 								: 'bg-white text-black hover:bg-muted hover:text-black'
 							}`}
@@ -179,7 +177,7 @@ const CustomPagination = ({
 			</PaginationContent>
 		</Pagination>
 	);
-  };  
+};
 
 /**
  * PageTemplate component for displaying a paginated table with search and filter functionality.
@@ -218,7 +216,7 @@ export default function PageTemplate<
 		getCoreRowModel: getCoreRowModel(),
 		defaultColumn: {
 			cell: (props) => (
-				<span className="text-base font-medium text-gray-700">
+				<span className="text-base font-medium text-muted-foreground">
 					{props.getValue() as ReactNode}
 				</span>
 			),
@@ -263,17 +261,13 @@ export default function PageTemplate<
 		<div className="flex flex-col space-y-4">
 			<h1 className="text-2xl font-bold">{props.title}</h1>
 			<Card className="p-4 border-hidden">
-				{/* Top Section */}
-				
-
 				{/* Table Functionality */}
 				<div className="flex flex-col">
 					{/* Search and Create Button */}
 					<div className="flex flex-col md:flex-row lg:flex-row pb-4 justify-between">
 						<div className="relative w-full">
 							<TbSearch
-							className="absolute top-1/2 left-3 transform -translate-y-1/2 text-gray-500"
+								className="absolute top-1/2 left-3 transform -translate-y-1/2 text-muted-foreground pointer-events-none"
-							style={{ pointerEvents: 'none' }} // Ensure the icon doesn't capture click events
 							/>
 							<Input
 								className="w-full max-w-xs pl-10"

apps/frontend/src/routes/_dashboardLayout.tsx

@@ -1,11 +1,11 @@
 import { Navigate, Outlet, createFileRoute } from "@tanstack/react-router";
-import { useDisclosure } from "@mantine/hooks";
 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("/_dashboardLayout")({
   component: DashboardLayout,
@@ -38,7 +38,10 @@ function DashboardLayout() {
     enabled: isAuthenticated,
   });
 
-  const [openNavbar, { toggle }] = useDisclosure(false);
+  const [openNavbar, setNavbarOpen] = useState(true);
+  const toggle = () => {
+    setNavbarOpen(!openNavbar);
+  };
 
   return isAuthenticated ? (
     <div className="flex flex-col h-screen">
@@ -51,9 +54,7 @@ function DashboardLayout() {
         <AppNavbar />
 
         {/* Main Content */}
-        <main className={`flex-1 mt-[60px] p-6 bg-white overflow-auto ${
+        <main className={"flex-1 mt-16 p-6 bg-white overflow-auto"}>
-			openNavbar ? 'lg:ml-64' : 'lg:ml-0'
-		}`}>
           <Outlet />
         </main>
       </div>