98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Button } from '@/ui/Button';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface Member {
|
|
driverId: string;
|
|
driverName: string;
|
|
role: string;
|
|
joinedAt: string;
|
|
joinedAtLabel: string;
|
|
}
|
|
|
|
interface TeamMembersTableProps {
|
|
members: Member[];
|
|
isAdmin?: boolean;
|
|
onRemoveMember?: (driverId: string) => void;
|
|
'data-testid'?: string;
|
|
}
|
|
|
|
export function TeamMembersTable({ members, isAdmin, onRemoveMember, 'data-testid': dataTestId }: TeamMembersTableProps) {
|
|
return (
|
|
<Surface variant="precision" padding="none" data-testid={dataTestId}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableHeaderCell>Personnel</TableHeaderCell>
|
|
<TableHeaderCell>Role</TableHeaderCell>
|
|
<TableHeaderCell>Joined</TableHeaderCell>
|
|
<TableHeaderCell textAlign="right">Rating</TableHeaderCell>
|
|
{isAdmin && <TableHeaderCell textAlign="right">Actions</TableHeaderCell>}
|
|
</TableHead>
|
|
<TableBody>
|
|
{members.map((member) => (
|
|
<TableRow key={member.driverId} data-testid="driver-card">
|
|
<TableCell>
|
|
<Stack direction="row" align="center" gap="sm">
|
|
<Box
|
|
width={10}
|
|
height={10}
|
|
bg="var(--ui-color-bg-base)"
|
|
border="1px solid var(--ui-color-border-muted)"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="md"
|
|
>
|
|
<Text size="xs" weight="bold" variant="primary" mono>{member.driverName.substring(0, 2).toUpperCase()}</Text>
|
|
</Box>
|
|
<Text weight="bold" size="sm" data-testid="driver-card-name">{member.driverName}</Text>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Box
|
|
paddingX={2}
|
|
paddingY={0.5}
|
|
bg="rgba(255,255,255,0.02)"
|
|
border="1px solid var(--ui-color-border-muted)"
|
|
display="inline-block"
|
|
rounded="sm"
|
|
>
|
|
<Text size="xs" variant="low" mono uppercase>{member.role}</Text>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Text size="xs" variant="low" mono>
|
|
{member.joinedAtLabel}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Text mono weight="bold" variant="primary" data-testid="driver-card-stats">1450</Text>
|
|
</TableCell>
|
|
{isAdmin && (
|
|
<TableCell textAlign="right">
|
|
{member.role !== 'owner' && (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => onRemoveMember?.(member.driverId)}
|
|
data-testid="admin-actions"
|
|
>
|
|
DECOMMISSION
|
|
</Button>
|
|
)}
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Surface>
|
|
);
|
|
}
|