Pull Request branch dev-clone to main #1
|
|
@ -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}
|
||||
|
|
@ -57,31 +57,30 @@ export default function AppHeader({toggle}: Props) {
|
|||
onOpenChange={setUserMenuOpened}
|
||||
>
|
||||
<DropdownMenuTrigger asChild className="flex">
|
||||
<button
|
||||
className={cx(classNames.user, {
|
||||
[classNames.userActive]: userMenuOpened,
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Avatar>
|
||||
{user?.photoProfile ? (
|
||||
<AvatarImage src={user.photoProfile} />
|
||||
) : (
|
||||
<AvatarFallback>{user?.name?.charAt(0) ?? "A"}</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className={cx(classNames.user, {
|
||||
[classNames.userActive]: userMenuOpened,
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Avatar>
|
||||
{user?.photoProfile ? (
|
||||
<AvatarImage src={user.photoProfile} />
|
||||
) : (
|
||||
<AvatarFallback>{user?.name?.charAt(0) ?? "A"}</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
</div>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="transition-all duration-200 z-50 border bg-white"
|
||||
style={{ width: '260px' }}
|
||||
align="end"
|
||||
className="transition-all duration-200 z-50 border bg-white w-64"
|
||||
>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/logout">Logout</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/logout">Logout</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -28,68 +28,60 @@ export default function AppNavbar(){
|
|||
const { data } = useQuery({
|
||||
queryKey: ["sidebarData"],
|
||||
queryFn: async () => {
|
||||
const res = await client.dashboard.getSidebarItems.$get();
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
return data;
|
||||
}
|
||||
console.error("Error:", res.status, res.statusText);
|
||||
throw new Error("Error fetching sidebar data");
|
||||
const res = await client.dashboard.getSidebarItems.$get();
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
return data;
|
||||
}
|
||||
console.error("Error:", res.status, res.statusText);
|
||||
throw new Error("Error fetching sidebar data");
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 768) { // Ganti 768 dengan breakpoint mobile Anda
|
||||
setSidebarOpen(false);
|
||||
} else {
|
||||
setSidebarOpen(true);
|
||||
}
|
||||
if (window.innerWidth < 768) { // Ganti 768 dengan breakpoint mobile Anda
|
||||
setSidebarOpen(false);
|
||||
} else {
|
||||
setSidebarOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
handleResize(); // Initial check
|
||||
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
}, []);
|
||||
|
||||
const handleMenuItemClick = () => {
|
||||
if (window.innerWidth < 768) {
|
||||
setSidebarOpen(false);
|
||||
setSidebarOpen(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{/* Header */}
|
||||
<AppHeader toggle={toggleSidebar} openNavbar={isSidebarOpen} />
|
||||
<div>
|
||||
{/* Header */}
|
||||
<AppHeader toggle={toggleSidebar} openNavbar={isSidebarOpen} />
|
||||
|
||||
{/* 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
|
||||
${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
|
||||
>
|
||||
<ScrollArea className="flex flex-1 h-full">
|
||||
{data?.map((menu, i) => (
|
||||
<MenuItem
|
||||
key={i}
|
||||
menu={menu}
|
||||
isActive={pathname === menu.link}
|
||||
onClick={handleMenuItemClick}
|
||||
/>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Overlay to close sidebar on mobile */}
|
||||
{isSidebarOpen && (
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:visible"
|
||||
onClick={toggleSidebar}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
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">
|
||||
{data?.map((menu, i) => (
|
||||
<MenuItem
|
||||
key={i}
|
||||
menu={menu}
|
||||
isActive={pathname === menu.link}
|
||||
onClick={handleMenuItemClick}
|
||||
/>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,15 +15,15 @@ interface Props<TData> {
|
|||
|
||||
export default function DashboardTable<T>({ table }: Props<T>) {
|
||||
return (
|
||||
<ScrollArea className="w-full max-w-full">
|
||||
<Table className="min-w-full divide-y divide-gray-200">
|
||||
<TableHeader className="bg-gray-50">
|
||||
<div className="w-full max-w-full overflow-x-auto border rounded-lg">
|
||||
<Table className="min-w-full divide-y divide-muted-foreground bg-white">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import {
|
|||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/shadcn/components/ui/pagination"
|
||||
} from "@/shadcn/components/ui/pagination"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
|
|
@ -96,15 +96,15 @@ const createCreateButton = (
|
|||
const navigate = useNavigate();
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
className="flex bg-white w-full text-black border items-center justify-between hover:bg-muted-foreground hover:text-white"
|
||||
onClick={() => navigate({ to: `${window.location.pathname}`, search: { create: true } })}
|
||||
>
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
{property}
|
||||
<TbPlus />
|
||||
</span>
|
||||
</Button>
|
||||
type="button"
|
||||
className="flex bg-white w-full text-black border items-center justify-between hover:bg-muted-foreground hover:text-white"
|
||||
onClick={() => navigate({ to: `${window.location.pathname}`, search: { create: true } })}
|
||||
>
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
{property}
|
||||
<TbPlus />
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
} else {
|
||||
return property;
|
||||
|
|
@ -122,64 +122,62 @@ 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={`${
|
||||
currentPage === 1
|
||||
? 'bg-white text-muted-foreground cursor-not-allowed'
|
||||
: 'bg-white text-black hover:bg-muted hover:text-black'
|
||||
}`}
|
||||
aria-disabled={currentPage === 1}
|
||||
>
|
||||
Previous
|
||||
</PaginationPrevious>
|
||||
</PaginationItem>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
className={`${currentPage === 1
|
||||
? 'bg-white text-muted-foreground cursor-not-allowed'
|
||||
: 'bg-white text-black hover:bg-muted hover:text-black'
|
||||
}`}
|
||||
aria-disabled={currentPage === 1}
|
||||
>
|
||||
Previous
|
||||
</PaginationPrevious>
|
||||
</PaginationItem>
|
||||
|
||||
{Array.from({ length: totalPages }, (_, index) => index + 1).map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
onClick={() => onPageChange(page)}
|
||||
className={page === currentPage ? 'border text-black' : ''}
|
||||
>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
{Array.from({ length: totalPages }, (_, index) => index + 1).map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
onClick={() => onPageChange(page)}
|
||||
className={page === currentPage ? 'border text-black' : ''}
|
||||
>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
|
||||
{totalPages > 1 && currentPage < totalPages && (
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
)}
|
||||
{totalPages > 1 && currentPage < totalPages && (
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
)}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
className={`${
|
||||
!hasNextPage || currentPage === totalPages
|
||||
? 'bg-white text-muted-foreground cursor-not-allowed'
|
||||
: 'bg-white text-black hover:bg-muted hover:text-black'
|
||||
}`}
|
||||
aria-disabled={!hasNextPage || currentPage === totalPages}
|
||||
>
|
||||
Next
|
||||
</PaginationNext>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
className={`${!hasNextPage || currentPage === totalPages
|
||||
? 'bg-white text-muted-foreground cursor-not-allowed'
|
||||
: 'bg-white text-black hover:bg-muted hover:text-black'
|
||||
}`}
|
||||
aria-disabled={!hasNextPage || currentPage === totalPages}
|
||||
>
|
||||
Next
|
||||
</PaginationNext>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* PageTemplate component for displaying a paginated table with search and filter functionality.
|
||||
|
|
@ -204,10 +202,10 @@ export default function PageTemplate<
|
|||
const query = useQuery({
|
||||
...(typeof props.queryOptions === "function"
|
||||
? props.queryOptions(
|
||||
filterOptions.page,
|
||||
filterOptions.limit,
|
||||
filterOptions.q
|
||||
)
|
||||
filterOptions.page,
|
||||
filterOptions.limit,
|
||||
filterOptions.q
|
||||
)
|
||||
: props.queryOptions),
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
|
|
@ -218,8 +216,8 @@ export default function PageTemplate<
|
|||
getCoreRowModel: getCoreRowModel(),
|
||||
defaultColumn: {
|
||||
cell: (props) => (
|
||||
<span className="text-base font-medium text-gray-700">
|
||||
{props.getValue() as ReactNode}
|
||||
<span className="text-base font-medium text-muted-foreground">
|
||||
{props.getValue() as ReactNode}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
|
|
@ -245,44 +243,40 @@ export default function PageTemplate<
|
|||
*/
|
||||
const handlePageChange = (page: number) => {
|
||||
if (page >= 1 && page <= (query.data?._metadata.totalPages ?? 1)) {
|
||||
setFilterOptions((prev) => ({
|
||||
page: page - 1, // Adjust for zero-based index
|
||||
limit: prev.limit,
|
||||
q: prev.q,
|
||||
}));
|
||||
setFilterOptions((prev) => ({
|
||||
page: page - 1, // Adjust for zero-based index
|
||||
limit: prev.limit,
|
||||
q: prev.q,
|
||||
}));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Default values when query.data is undefined
|
||||
const totalPages = query.data?._metadata.totalPages ?? 1;
|
||||
const hasNextPage = query.data
|
||||
? filterOptions.page < totalPages - 1
|
||||
: false;
|
||||
? filterOptions.page < totalPages - 1
|
||||
: false;
|
||||
|
||||
return (
|
||||
<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"
|
||||
style={{ pointerEvents: 'none' }} // Ensure the icon doesn't capture click events
|
||||
/>
|
||||
<Input
|
||||
className="w-full max-w-xs pl-10"
|
||||
value={filterOptions.q}
|
||||
onChange={(e) =>
|
||||
handleSearchQueryChange(e.target.value)
|
||||
}
|
||||
placeholder="Search..."
|
||||
/>
|
||||
<TbSearch
|
||||
className="absolute top-1/2 left-3 transform -translate-y-1/2 text-muted-foreground pointer-events-none"
|
||||
/>
|
||||
<Input
|
||||
className="w-full max-w-xs pl-10"
|
||||
value={filterOptions.q}
|
||||
onChange={(e) =>
|
||||
handleSearchQueryChange(e.target.value)
|
||||
}
|
||||
placeholder="Search..."
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div className="flex">
|
||||
|
|
@ -300,27 +294,27 @@ export default function PageTemplate<
|
|||
<label className="block text-sm font-medium text-muted-foreground">Per Page</label>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
setFilterOptions((prev) => ({
|
||||
page: prev.page,
|
||||
limit: parseInt(value ?? "10"),
|
||||
q: prev.q,
|
||||
}))
|
||||
setFilterOptions((prev) => ({
|
||||
page: prev.page,
|
||||
limit: parseInt(value ?? "10"),
|
||||
q: prev.q,
|
||||
}))
|
||||
}
|
||||
defaultValue="10"
|
||||
>
|
||||
<SelectTrigger className="w-fit p-4 gap-4">
|
||||
<SelectValue placeholder="Per Page" />
|
||||
<SelectValue placeholder="Per Page" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="50">50</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
<SelectItem value="500">500</SelectItem>
|
||||
<SelectItem value="1000">1000</SelectItem>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="50">50</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
<SelectItem value="500">500</SelectItem>
|
||||
<SelectItem value="1000">1000</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<CustomPagination
|
||||
currentPage={filterOptions.page + 1}
|
||||
totalPages={totalPages}
|
||||
|
|
|
|||
|
|
@ -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 ${
|
||||
openNavbar ? 'lg:ml-64' : 'lg:ml-0'
|
||||
}`}>
|
||||
<main className={"flex-1 mt-16 p-6 bg-white overflow-auto"}>
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user