Implement custom roles and improve permissions logic

The commit refactors the handling of account roles and enhances permissions checks. The account role has been shifted to use a string type, providing the ability to define custom roles. It also introduces the RolesDataProvider component, which stipulates role-related data for different forms and tables. The modification goes further to consider user role hierarchy in permissions checks, offering a more granular access control.

packages/features/team-accounts/src/components/members/roles-data-provider.tsx

@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useSupabase } from '@kit/supabase/hooks/use-supabase';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
+
+export function RolesDataProvider(props: {
+  maxRoleHierarchy: number;
+  children: (roles: string[]) => React.ReactNode;
+}) {
+  const rolesQuery = useFetchRoles({
+    maxRoleHierarchy: props.maxRoleHierarchy,
+  });
+
+  if (rolesQuery.isLoading) {
+    return <LoadingOverlay fullPage={false} />;
+  }
+
+  // TODO handle error
+  if (rolesQuery.isError) {
+    return null;
+  }
+
+  return <>{props.children(rolesQuery.data ?? [])}</>;
+}
+
+function useFetchRoles(props: { maxRoleHierarchy: number }) {
+  const supabase = useSupabase();
+
+  return useQuery({
+    queryKey: ['roles', props.maxRoleHierarchy],
+    queryFn: async () => {
+      const { error, data } = await supabase
+        .from('roles')
+        .select('name')
+        .gte('hierarchy_level', props.maxRoleHierarchy)
+        .order('hierarchy_level', { ascending: true });
+
+      if (error) {
+        throw error;
+      }
+
+      return data.map((item) => item.name);
+    },
+  });
+}