68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import AppLayout from '../../../layouts/app-layout';
|
|
import {
|
|
Container,
|
|
Title,
|
|
Card,
|
|
Group,
|
|
Button,
|
|
Badge,
|
|
ActionIcon,
|
|
} from '@mantine/core';
|
|
import { IconEdit } from '@tabler/icons-react';
|
|
import { MantineReactTable } from 'mantine-react-table';
|
|
import type { MRT_Row } from 'mantine-react-table';
|
|
import { Link } from '@inertiajs/react';
|
|
import { Role } from "@/types";
|
|
|
|
interface Props {
|
|
roles: Role[];
|
|
}
|
|
|
|
export default function Page({
|
|
roles,
|
|
}: Props) {
|
|
const rolesData = roles ?? [];
|
|
const columns = useMemo(
|
|
() => [
|
|
{
|
|
accessorKey: 'name',
|
|
header: 'Name',
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
const renderRowActions = ({ row }: { row: MRT_Row<Role> }) => (
|
|
<Group spacing="xs">
|
|
<ActionIcon
|
|
color="blue"
|
|
component={Link}
|
|
href={`/management/roles/${row.original.id}/edit`}
|
|
>
|
|
<IconEdit size={18} />
|
|
</ActionIcon>
|
|
</Group>
|
|
);
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Container size="xl" px="xs">
|
|
<Title order={2} mb="md">
|
|
Roles
|
|
</Title>
|
|
<MantineReactTable
|
|
columns={columns}
|
|
data={rolesData}
|
|
enablePagination
|
|
rowCount={roles?.total ?? roles.length}
|
|
initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
|
|
renderRowActions={renderRowActions}
|
|
enableRowActions
|
|
columnPinning={{ right: ['mrt-row-actions'] }}
|
|
/>
|
|
</Container>
|
|
</AppLayout>
|
|
);
|
|
}
|