115 lines
4.1 KiB
TypeScript
115 lines
4.1 KiB
TypeScript
import { DataTableColumnHeader } from '@/components/data-table-column-header';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip';
|
|
import { usePermission } from '@/hooks/use-permission';
|
|
import roleRoutes from '@/routes/system/role';
|
|
import type { Role } from '@/types';
|
|
import { Link } from '@inertiajs/react';
|
|
import type { ColumnDef } from '@tanstack/react-table';
|
|
import { Pencil, Trash2 } from 'lucide-react';
|
|
|
|
interface ColumnProps {
|
|
onDelete: (role: Role) => void;
|
|
}
|
|
|
|
export const getColumns = ({ onDelete }: ColumnProps): ColumnDef<Role>[] => [
|
|
{
|
|
accessorKey: 'name',
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Nama" />
|
|
),
|
|
meta: { title: 'Nama' },
|
|
},
|
|
{
|
|
accessorKey: 'permissions',
|
|
header: 'Izin Akses',
|
|
meta: { title: 'Izin Akses' },
|
|
cell: ({ row }) => {
|
|
const permissions = row.original.permissions || [];
|
|
|
|
if (permissions.length === 0) {
|
|
return (
|
|
<span className="text-xs text-muted-foreground italic">
|
|
Tidak ada izin akses
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex max-w-md flex-wrap gap-1">
|
|
{permissions.map((p) => (
|
|
<Badge
|
|
key={p.id}
|
|
variant="secondary"
|
|
className="px-1 py-0 text-[10px] font-normal"
|
|
>
|
|
{p.name}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'guard_name',
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Guard" />
|
|
),
|
|
meta: { title: 'Guard' },
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: 'Aksi',
|
|
cell: ({ row }) => {
|
|
const role = row.original;
|
|
const { hasPermission } = usePermission();
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
{hasPermission('Edit:Role') && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Link href={roleRoutes.edit(role.id).url}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-yellow-600 hover:bg-yellow-50 hover:text-yellow-700 dark:hover:bg-yellow-950/20"
|
|
>
|
|
<Pencil className="size-4" />
|
|
</Button>
|
|
</Link>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Ubah</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
{hasPermission('Delete:Role') && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-red-600 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-950/20"
|
|
onClick={() => onDelete(role)}
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Hapus</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
meta: { title: 'Aksi' },
|
|
},
|
|
];
|