a78da16790
* refactor: streamline sign-in and sign-up methods containers for improved conditional rendering - Updated SignInMethodsContainer and SignUpMethodsContainer to conditionally render the separator and "or continue with" text only when applicable authentication methods are available. - Enhanced code readability by removing redundant div elements and improving the structure of conditional rendering. * refactor: enhance UI components with improved styling and structure - Updated PlanIntervalSwitcher to include hover effects and adjusted button size for better user interaction. - Refined PersonalAccountDropdown by removing unnecessary animation classes for cleaner code. - Modified Footer component to standardize padding across different screen sizes. - Adjusted Pill component's height and padding for a more consistent appearance. * refactor: enhance admin members and memberships tables with date rendering and sorting adjustments - Removed User ID column from both AdminMembersTable and AdminMembershipsTable for a cleaner interface. - Added date rendering functionality for Created At and Updated At columns, displaying time in a user-friendly format. - Disabled sorting for Name, Email, Role, Created At, and Updated At columns to improve usability. * fix: update account linking messages and redirect logic - Changed the success message for account linking to indicate that a request has been sent and to prompt the user to wait. - Added a redirect path to the PersonalAccountSettingsContainer for improved navigation after account linking. - Removed the unused useUnlinkIdentity hook to clean up the codebase.
79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
|
|
import { Database } from '@kit/supabase/database';
|
|
import { DataTable } from '@kit/ui/enhanced-data-table';
|
|
import { ProfileAvatar } from '@kit/ui/profile-avatar';
|
|
|
|
type Memberships =
|
|
Database['public']['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',
|
|
enableSorting: false,
|
|
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',
|
|
enableSorting: false,
|
|
},
|
|
{
|
|
header: 'Role',
|
|
enableSorting: false,
|
|
cell: ({ row }) => {
|
|
return row.original.role;
|
|
},
|
|
},
|
|
{
|
|
header: 'Created At',
|
|
accessorKey: 'created_at',
|
|
enableSorting: false,
|
|
cell: ({ row }) => {
|
|
return renderDate(row.original.created_at);
|
|
},
|
|
},
|
|
{
|
|
header: 'Updated At',
|
|
accessorKey: 'updated_at',
|
|
enableSorting: false,
|
|
cell: ({ row }) => {
|
|
return renderDate(row.original.updated_at);
|
|
},
|
|
},
|
|
];
|
|
}
|
|
|
|
function renderDate(date: string) {
|
|
return <span className={'text-xs'}>{new Date(date).toTimeString()}</span>;
|
|
}
|