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.

apps/web/app/(dashboard)/home/(user)/billing/_components/personal-account-checkout-form.tsx

@@ -5,7 +5,7 @@ import { useState, useTransition } from 'react';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 
 import { EmbeddedCheckout, PlanPicker } from '@kit/billing-gateway/components';
-import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Alert, AlertTitle } from '@kit/ui/alert';
 import {
   Card,
   CardContent,
@@ -14,6 +14,7 @@ import {
   CardTitle,
 } from '@kit/ui/card';
 import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
 
 import billingConfig from '~/config/billing.config';
 
@@ -79,13 +80,11 @@ export function PersonalAccountCheckoutForm() {
 function ErrorAlert() {
   return (
     <Alert variant={'destructive'}>
-      <ExclamationTriangleIcon />
+      <ExclamationTriangleIcon className={'h-4'} />
 
-      <AlertTitle>Sorry, we encountered an error.</AlertTitle>
-
-      <AlertDescription>
-        We couldn't process your request. Please try again.
-      </AlertDescription>
+      <AlertTitle>
+        <Trans i18nKey={'common:genericError'} />
+      </AlertTitle>
     </Alert>
   );
 }