126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import { View, ScrollView, Text } from "react-native";
|
|
import { Checkbox, IconButton, Avatar } from "react-native-paper";
|
|
import { router } from "expo-router";
|
|
|
|
import { User } from "@/store/models/User.model";
|
|
import { SizeEnum } from "@/constants/sizeEnum";
|
|
import { RiskIndicator } from "@/components/ui/RiskIndicator";
|
|
|
|
interface MobileUserAccountsTableProps {
|
|
users: User[];
|
|
selectedUsers: string[];
|
|
onSelectUser: (userId: string) => void;
|
|
onEdit: (user: User) => void;
|
|
onLock: (user: User) => void;
|
|
onDelete: (user: User) => void;
|
|
}
|
|
|
|
export const MobileUserAccountsTable = ({
|
|
users,
|
|
selectedUsers,
|
|
onSelectUser,
|
|
onEdit,
|
|
onLock,
|
|
onDelete,
|
|
}: MobileUserAccountsTableProps) => {
|
|
const openDetails = (user: User) => {
|
|
router.push(`/accounts/users/${user.id}`);
|
|
};
|
|
|
|
return (
|
|
<View className="flex-1">
|
|
<ScrollView
|
|
className="flex-1"
|
|
contentContainerStyle={{ paddingBottom: 16 }}
|
|
>
|
|
{users.map((user) => (
|
|
<View
|
|
key={user.id}
|
|
className="mb-3 p-4 bg-white rounded-md shadow-sm"
|
|
>
|
|
<View className="flex-row justify-between items-center mb-3">
|
|
<View className="flex-row items-center flex-1 min-w-0">
|
|
<View>
|
|
<Checkbox
|
|
status={
|
|
selectedUsers.includes(user.id) ? "checked" : "unchecked"
|
|
}
|
|
onPress={() => onSelectUser(user.id)}
|
|
/>
|
|
</View>
|
|
{user.imageUrl ? (
|
|
<Avatar.Image
|
|
source={{ uri: user.imageUrl }}
|
|
size={28}
|
|
style={{ marginRight: 10, marginLeft: 10 }}
|
|
/>
|
|
) : (
|
|
<Avatar.Text
|
|
size={28}
|
|
label={`${user.firstName.charAt(0)}${user.lastName.charAt(
|
|
0
|
|
)}`}
|
|
style={{ marginRight: 10, marginLeft: 10 }}
|
|
/>
|
|
)}
|
|
<View style={{ flex: 1, minWidth: 0 }}>
|
|
<View className="flex-row items-center">
|
|
<Text
|
|
className="font-medium"
|
|
numberOfLines={0}
|
|
style={{ flexShrink: 1, overflow: "visible" }}
|
|
onPress={() => openDetails(user)}
|
|
>
|
|
{user.firstName} {user.lastName}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View className="ml-2">
|
|
<RiskIndicator risk={user.riskStatus} size={SizeEnum.Small} />
|
|
</View>
|
|
</View>
|
|
<Text
|
|
className="text-sm mb-1"
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{user.email}
|
|
</Text>
|
|
<Text className="text-sm mb-3 text-gray-600">{user.title}</Text>
|
|
|
|
<View className="flex-row justify-end border-t border-gray-200 pt-3">
|
|
<IconButton
|
|
icon="eye-outline"
|
|
size={20}
|
|
onPress={() => openDetails(user)}
|
|
/>
|
|
<IconButton
|
|
icon="pencil-outline"
|
|
size={20}
|
|
onPress={() => {
|
|
onEdit(user);
|
|
}}
|
|
/>
|
|
<IconButton
|
|
icon="lock-outline"
|
|
size={20}
|
|
onPress={() => {
|
|
onLock(user);
|
|
}}
|
|
/>
|
|
<IconButton
|
|
icon="delete-outline"
|
|
size={20}
|
|
onPress={() => {
|
|
onDelete(user);
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|