add more options to user management

components/pages/settings/user_settings_views/UserOptions.tsx

@@ -0,0 +1,140 @@
+import { Platform, StyleSheet } from "react-native";
+import React, { useState } from "react";
+import { MenuView } from "@react-native-menu/menu";
+import { Dialog, Text, View, Button } from "react-native-ui-lib";
+import MenuDotsIcon from "@/assets/svgs/MenuDotsIcon";
+import { UserProfile } from "@/hooks/firebase/types/profileTypes";
+import { useRemoveSubUser } from "@/hooks/firebase/useRemoveSubUser";
+
+const UserOptions = ({ user }: { user: UserProfile }) => {
+  const [visible, setVisible] = useState<boolean>(false);
+  const { mutateAsync: removeSubUser } = useRemoveSubUser();
+
+  const handleDeleteUser = async () => {
+    try {
+      if (user.uid) await removeSubUser(user.uid);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setVisible(false);
+    }
+  };
+
+  const menuOptions = [
+    {
+      id: "edit",
+      title: "Edit User",
+      onPress: () => console.log("Edit User here"),
+      image: Platform.select({
+        ios: "pencil.and.ellipsis.rectangle",
+        android: "ic_menu_edit",
+      }),
+      imageColor: "#7300d4",
+      titleColor: "#7300d4",
+    },
+    {
+      id: "delete",
+      title: "Delete User",
+      attributes: {
+        destructive: true,
+      },
+      image: Platform.select({
+        ios: "trash",
+        android: "ic_menu_delete",
+      }),
+    },
+  ];
+
+  return (
+    <>
+      <MenuView
+        style={styles.menu}
+        title="User options"
+        onPressAction={({ nativeEvent }) => {
+          switch (nativeEvent.event) {
+            case "edit":
+              console.log("Edit User here");
+              break;
+            case "delete":
+              setTimeout(() => setVisible(true), 300);
+              break;
+            default:
+              break;
+          }
+        }}
+        actions={menuOptions}
+        shouldOpenOnLongPress={false}
+      >
+        <MenuDotsIcon />
+      </MenuView>
+      <Dialog
+        visible={visible}
+        containerStyle={styles.dialog}
+        onDismiss={() => setVisible(false)}
+      >
+        <Text center style={styles.title}>
+          Are you sure?
+        </Text>
+        <Text
+          style={{
+            fontSize: 18,
+            fontFamily: "PlusJakartaSans_700Bold",
+            color: "#979797",
+            marginBottom: 20,
+          }}
+          center
+        >
+          This action will delete the {user.firstName}'s profile.
+        </Text>
+        <View row right gap-8 marginT-15>
+          <Button
+            label="Cancel"
+            onPress={() => {
+              setVisible(false);
+            }}
+            style={styles.cancelBtn}
+            color="#999999"
+            labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
+          />
+          <Button
+            label="Yes"
+            onPress={handleDeleteUser}
+            style={styles.confirmBtn}
+            labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
+          />
+        </View>
+      </Dialog>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  menu: {
+    padding: 5,
+  },
+  confirmBtn: {
+    backgroundColor: "#ff1637",
+  },
+  cancelBtn: {
+    backgroundColor: "white",
+  },
+  dialog: {
+    backgroundColor: "white",
+    paddingHorizontal: 25,
+    paddingTop: 25,
+    paddingBottom: 17,
+    borderRadius: 20,
+  },
+  title: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 22,
+    marginBottom: 5,
+  },
+  text: {
+    fontFamily: "PlusJakartaSans_400Regular",
+    fontSize: 16,
+    marginBottom: 0,
+  },
+});
+
+export default UserOptions;