add metered products usage (#11452)

- add metered products usage module on settings/billing page
- add new resolver + logic with meter event data fetching from Stripe

<img width="590" alt="Screenshot 2025-04-08 at 16 34 07"
src="https://github.com/user-attachments/assets/34327af1-3482-4d61-91a6-e2dbaeb017ab"
/>
<img width="570" alt="Screenshot 2025-04-08 at 16 31 58"
src="https://github.com/user-attachments/assets/55aa221a-925f-48bf-88c4-f20713c79962"
/>

- bonus : disable subscription switch from yearly to monthly

closes https://github.com/twentyhq/core-team-issues/issues/681

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -11,9 +11,9 @@ import {
   IconSquareRoundedCheck,
   IconX,
 } from 'twenty-ui/display';
+import { ProgressBar, useProgressAnimation } from 'twenty-ui/feedback';
 import { LightButton, LightIconButton } from 'twenty-ui/input';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
-import { ProgressBar, useProgressAnimation } from 'twenty-ui/feedback';
 
 export enum SnackBarVariant {
   Default = 'default',
@@ -205,7 +205,7 @@ export const SnackBar = ({
       {...{ className, id, role, variant }}
     >
       <StyledProgressBar
-        color={theme.snackBar[variant].backgroundColor}
+        barColor={theme.snackBar[variant].backgroundColor}
         value={progressValue}
       />
       <StyledHeader>