56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { View } from "react-native";
|
|
import { Avatar } from "react-native-paper";
|
|
|
|
import { User } from "@/store/models/User.model";
|
|
import { getInitials, getRoleLabel } from "@/utils/userUtils";
|
|
import { InfoRow } from "@/components/features/accounts/InfoRow";
|
|
import { useAppSelector } from "@/store/hooks";
|
|
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
|
|
|
|
interface PersonalInfoProps {
|
|
user: User;
|
|
manager?: User | null;
|
|
}
|
|
|
|
export const PersonalInfo = ({ user, manager }: PersonalInfoProps) => {
|
|
const isMobile = useAppSelector(selectIsMobile);
|
|
const managerFullName =
|
|
manager && manager?.firstName + " " + manager?.lastName;
|
|
|
|
return (
|
|
<View className="bg-lightGray rounded-md">
|
|
<View className="flex-row items-center justify-between mb-4">
|
|
<View className="flex-row items-center">
|
|
{user.imageUrl ? (
|
|
<Avatar.Image source={{ uri: user.imageUrl }} size={56} />
|
|
) : (
|
|
<Avatar.Text
|
|
label={getInitials(user.firstName, user.lastName)}
|
|
size={50}
|
|
/>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
<View className={`gap-6 ${isMobile ? "flex-col" : "flex-row"}`}>
|
|
<View className="flex-1">
|
|
<InfoRow label="First Name" value={user.firstName || "-"} />
|
|
<InfoRow label="Middle Name" value={user.middleName || "-"} />
|
|
<InfoRow label="Last Name" value={user.lastName || "-"} />
|
|
</View>
|
|
|
|
<View className="flex-1">
|
|
<InfoRow label="Email" value={user.email || "-"} />
|
|
<InfoRow label="Phone Number" value={user.phoneNumber || "-"} />
|
|
<InfoRow label="Department" value={user.department || "-"} />
|
|
</View>
|
|
|
|
<View className="flex-1">
|
|
<InfoRow label="Role" value={getRoleLabel(user.role)} />
|
|
<InfoRow label="Reports To" value={managerFullName || "-"} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|