71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
|
|
import { formatDateAndTime } from '@kit/shared/utils';
|
|
import { Database } from '@kit/supabase/database';
|
|
import { DataTable } from '@kit/ui/enhanced-data-table';
|
|
import { ProfileAvatar } from '@kit/ui/profile-avatar';
|
|
|
|
type Memberships =
|
|
Database['medreport']['Functions']['get_account_members']['Returns'][number];
|
|
|
|
export function AdminMembersTable(props: { members: Memberships[] }) {
|
|
return <DataTable data={props.members} columns={getColumns()} />;
|
|
}
|
|
|
|
function getColumns(): ColumnDef<Memberships>[] {
|
|
return [
|
|
{
|
|
header: 'Name',
|
|
cell: ({ row }) => {
|
|
const name = row.original.name ?? row.original.email;
|
|
|
|
return (
|
|
<div className={'flex items-center space-x-2'}>
|
|
<div>
|
|
<ProfileAvatar
|
|
pictureUrl={row.original.picture_url}
|
|
displayName={name}
|
|
/>
|
|
</div>
|
|
|
|
<Link
|
|
className={'hover:underline'}
|
|
href={`/admin/accounts/${row.original.id}`}
|
|
>
|
|
<span>{name}</span>
|
|
</Link>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
header: 'Email',
|
|
accessorKey: 'email',
|
|
},
|
|
{
|
|
header: 'Role',
|
|
cell: ({ row }) => {
|
|
return row.original.role === 'owner' ? 'Admin' : 'Member';
|
|
},
|
|
},
|
|
{
|
|
header: 'Created At',
|
|
accessorKey: 'created_at',
|
|
cell: ({ row }) => {
|
|
return formatDateAndTime(row.original.created_at);
|
|
},
|
|
},
|
|
{
|
|
header: 'Updated At',
|
|
accessorKey: 'updated_at',
|
|
cell: ({ row }) => {
|
|
return formatDateAndTime(row.original.updated_at);
|
|
},
|
|
},
|
|
];
|
|
}
|