106 lines
4.0 KiB
TypeScript
106 lines
4.0 KiB
TypeScript
import { ColumnDef } from '@tanstack/react-table';
|
|
import { User } from '@/types';
|
|
import { DataTableColumnHeader } from '@/components/data-table-column-header';
|
|
import { UserInfo } from '@/components/user-info';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Button } from '@/components/ui/button';
|
|
import { KeyRound, Pencil, Trash2 } from 'lucide-react';
|
|
import { Link } from '@inertiajs/react';
|
|
import userRoutes from '@/routes/user';
|
|
|
|
interface ColumnProps {
|
|
onResetPassword: (user: User) => void;
|
|
onDelete: (user: User) => void;
|
|
}
|
|
|
|
export const getColumns = ({ onResetPassword, onDelete }: ColumnProps): ColumnDef<User>[] => [
|
|
{
|
|
accessorKey: "name",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="User" />
|
|
),
|
|
meta: { title: "User" },
|
|
cell: ({ row }) => {
|
|
const user = row.original;
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<UserInfo user={user} showEmail={true} />
|
|
</div>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "username",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Nama Pengguna" />
|
|
),
|
|
meta: { title: "Nama Pengguna" },
|
|
},
|
|
{
|
|
accessorFn: (row) => row.profile?.phone_number,
|
|
id: "phone_number",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="Nomor Telepon" />
|
|
),
|
|
meta: { title: "Nomor Telepon" },
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: "Aksi",
|
|
cell: ({ row }) => {
|
|
const user = row.original;
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className='text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:hover:bg-blue-950/20'
|
|
onClick={() => onResetPassword(user)}
|
|
>
|
|
<KeyRound className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Reset Kata Sandi</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Link href={userRoutes.edit(user.id).url}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className='text-yellow-600 hover:text-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-950/20'
|
|
>
|
|
<Pencil className="size-4" />
|
|
</Button>
|
|
</Link>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Ubah</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className='text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20'
|
|
onClick={() => onDelete(user)}
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Hapus</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
},
|
|
meta: { title: "Aksi" },
|
|
},
|
|
];
|