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-ui/src/feedback/progress-bar/components/ProgressBar.tsx

@@ -1,42 +1,64 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { useState } from 'react';
 
 export type ProgressBarProps = {
-  className?: string;
-  color?: string;
   value: number;
+  className?: string;
+  barColor?: string;
+  backgroundColor?: string;
+  withBorderRadius?: boolean;
 };
 
 export type StyledBarProps = {
   className?: string;
+  backgroundColor?: string;
+  withBorderRadius?: boolean;
 };
 
 const StyledBar = styled.div<StyledBarProps>`
   height: ${({ theme }) => theme.spacing(2)};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border-radius: ${({ withBorderRadius, theme }) =>
+    withBorderRadius ? theme.border.radius.xxl : '0'};
   overflow: hidden;
   width: 100%;
 `;
 
-const StyledBarFilling = styled(motion.div)<{ color?: string }>`
-  background-color: ${({ color, theme }) => color ?? theme.font.color.primary};
+const StyledBarFilling = styled(motion.div)<{
+  barColor?: string;
+  withBorderRadius?: boolean;
+}>`
+  background-color: ${({ barColor, theme }) =>
+    barColor ?? theme.font.color.primary};
   height: 100%;
+  border-radius: ${({ withBorderRadius, theme }) =>
+    withBorderRadius ? theme.border.radius.md : '0'};
 `;
 
-export const ProgressBar = ({ className, color, value }: ProgressBarProps) => {
+export const ProgressBar = ({
+  value,
+  className,
+  barColor,
+  backgroundColor = 'none',
+  withBorderRadius = false,
+}: ProgressBarProps) => {
   const [initialValue] = useState(value);
 
   return (
     <StyledBar
       className={className}
+      backgroundColor={backgroundColor}
+      withBorderRadius={withBorderRadius}
       role="progressbar"
       aria-valuenow={Math.ceil(value)}
     >
       <StyledBarFilling
         initial={{ width: `${initialValue}%` }}
         animate={{ width: `${value}%` }}
-        color={color}
+        barColor={barColor}
         transition={{ ease: 'linear' }}
+        withBorderRadius={withBorderRadius}
       />
     </StyledBar>
   );