project setup

2025-11-02 10:08:56 +01:00
commit 568838003e
174 changed files with 27100 additions and 0 deletions
@@ -0,0 +1,106 @@
+import { useMemo, useState } from "react";
+import { View, TouchableOpacity } from "react-native";
+import {
+  Avatar,
+  Divider,
+  Menu,
+  Text,
+  Chip,
+  IconButton,
+} from "react-native-paper";
+
+import { useAuthContext } from "@/auth/AuthContext";
+import { getInitials, getRoleLabel } from "@/utils/userUtils";
+
+export const UserButton = () => {
+  const { user, logout } = useAuthContext();
+  const [visible, setVisible] = useState(false);
+
+  const initials = useMemo(
+    () => getInitials(user?.firstName, user?.lastName),
+    [user?.firstName, user?.lastName]
+  );
+
+  if (!user) return null;
+
+  return (
+    <View className="flex-row items-center">
+      <Menu
+        visible={visible}
+        onDismiss={() => setVisible(false)}
+        anchor={
+          <TouchableOpacity
+            accessibilityRole="button"
+            onPress={() => setVisible(true)}
+            className="ml-3"
+          >
+            {user.imageUrl ? (
+              <Avatar.Image size={32} source={{ uri: user.imageUrl }} />
+            ) : (
+              <Avatar.Text size={32} label={initials} />
+            )}
+          </TouchableOpacity>
+        }
+        contentStyle={{
+          minWidth: 300,
+          borderRadius: 12,
+          overflow: "hidden",
+          padding: 0,
+        }}
+      >
+        <View
+          style={{
+            paddingHorizontal: 14,
+            paddingVertical: 12,
+            backgroundColor: "#F7F7F8",
+          }}
+        >
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            {user.imageUrl ? (
+              <Avatar.Image size={44} source={{ uri: user.imageUrl }} />
+            ) : (
+              <Avatar.Text size={44} label={initials} />
+            )}
+            <View
+              style={{
+                flexShrink: 1,
+                maxWidth: 500,
+                marginLeft: 8,
+              }}
+            >
+              <Text variant="titleSmall" numberOfLines={10}>
+                {user.firstName} {user.lastName}
+              </Text>
+              <Text variant="bodySmall" style={{ opacity: 0.7 }}>
+                {user.email}
+              </Text>
+            </View>
+
+            <View style={{ alignSelf: "flex-start", marginLeft: "auto" }}>
+              <IconButton
+                icon="close"
+                size={20}
+                onPress={() => setVisible(false)}
+                accessibilityLabel="Close dialog"
+                style={{ margin: 0 }}
+              />
+            </View>
+          </View>
+          <View style={{ height: 10 }} />
+          <View style={{ flexDirection: "column", flexWrap: "wrap" }}>
+            <Chip compact>{getRoleLabel(user.role)}</Chip>
+          </View>
+        </View>
+        <Divider />
+        <Menu.Item
+          title="Sign out"
+          leadingIcon="logout"
+          onPress={async () => {
+            setVisible(false);
+            await logout();
+          }}
+        />
+      </Menu>
+    </View>
+  );
+};