98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { VersionTable } from "@/components/tables/version-table";
|
|
import type { ColumnDef } from "@tanstack/react-table";
|
|
import { Plus, Shield, type LucideIcon } from "lucide-react";
|
|
import { Link } from "@tanstack/react-router";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface RoleManagerTemplateProps<TData> {
|
|
title: string;
|
|
description: string;
|
|
data: TData[];
|
|
isLoading: boolean;
|
|
columns: ColumnDef<TData, any>[];
|
|
onTableInit?: (table: any) => void;
|
|
// Optional customization
|
|
icon?: LucideIcon;
|
|
tableTitle?: string;
|
|
tableDescription?: string;
|
|
createButtonLabel?: string;
|
|
createLink?: string;
|
|
headerActions?: ReactNode;
|
|
// Pagination options
|
|
enablePagination?: boolean;
|
|
defaultPageSize?: number;
|
|
pageSizeOptions?: number[];
|
|
}
|
|
|
|
export function RoleManagerTemplate<TData>({
|
|
title,
|
|
description,
|
|
data,
|
|
isLoading,
|
|
columns,
|
|
onTableInit,
|
|
icon: Icon = Shield,
|
|
tableTitle = "Danh sách",
|
|
tableDescription,
|
|
createButtonLabel = "Tạo mới",
|
|
createLink,
|
|
headerActions,
|
|
enablePagination = false,
|
|
defaultPageSize = 10,
|
|
pageSizeOptions = [5, 10, 15, 20],
|
|
}: RoleManagerTemplateProps<TData>) {
|
|
return (
|
|
<div className="w-full px-6 space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">{title}</h1>
|
|
<p className="text-muted-foreground mt-2">{description}</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{headerActions}
|
|
{createLink && (
|
|
<Link to={createLink}>
|
|
<Button>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
{createButtonLabel}
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<Card className="w-full">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Icon className="h-5 w-5" /> {tableTitle}
|
|
</CardTitle>
|
|
{tableDescription && (
|
|
<CardDescription>{tableDescription}</CardDescription>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
<VersionTable
|
|
data={data}
|
|
isLoading={isLoading}
|
|
columns={columns}
|
|
onTableInit={onTableInit}
|
|
enablePagination={enablePagination}
|
|
defaultPageSize={defaultPageSize}
|
|
pageSizeOptions={pageSizeOptions}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|