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/billing/components/SettingsBillingMonthlyCreditsSection.tsx

@@ -0,0 +1,94 @@
+import { SettingsBillingLabelValueItem } from '@/billing/components/SettingsBillingLabelValueItem';
+import { useGetWorkflowNodeExecutionUsage } from '@/billing/hooks/useGetWorkflowNodeExecutionUsage';
+import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { H2Title } from 'twenty-ui/display';
+import { ProgressBar } from 'twenty-ui/feedback';
+import { Section } from 'twenty-ui/layout';
+import { BACKGROUND_LIGHT, COLOR } from 'twenty-ui/theme';
+import { SubscriptionStatus } from '~/generated/graphql';
+import { formatAmount } from '~/utils/format/formatAmount';
+import { formatNumber } from '~/utils/format/number';
+
+const StyledMonthlyCreditsContainer = styled.div`
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(3)};
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledLineSeparator = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({ theme }) => theme.background.tertiary};
+`;
+
+export const SettingsBillingMonthlyCreditsSection = () => {
+  const subscriptionStatus = useSubscriptionStatus();
+
+  const isTrialing = subscriptionStatus === SubscriptionStatus.Trialing;
+
+  const {
+    freeUsageQuantity,
+    includedFreeQuantity,
+    paidUsageQuantity,
+    unitPriceCents,
+    totalCostCents,
+  } = useGetWorkflowNodeExecutionUsage();
+
+  const progressBarValue =
+    freeUsageQuantity === includedFreeQuantity
+      ? 0
+      : (freeUsageQuantity / includedFreeQuantity) * 100;
+
+  const formattedFreeUsageQuantity =
+    freeUsageQuantity === includedFreeQuantity
+      ? formatAmount(freeUsageQuantity)
+      : formatNumber(freeUsageQuantity);
+
+  return (
+    <Section>
+      <H2Title
+        title={t`Monthly Credits`}
+        description={t`Track your monthly workflow credit consumption.`}
+      />
+      <StyledMonthlyCreditsContainer>
+        <SettingsBillingLabelValueItem
+          label={t`Free Credits Used`}
+          value={`${formattedFreeUsageQuantity}/${formatAmount(includedFreeQuantity)}`}
+        />
+        <ProgressBar
+          value={progressBarValue}
+          barColor={COLOR.blue}
+          backgroundColor={BACKGROUND_LIGHT.tertiary}
+          withBorderRadius={true}
+        />
+
+        <StyledLineSeparator />
+        {!isTrialing && (
+          <SettingsBillingLabelValueItem
+            label={t`Extra Credits Used`}
+            value={`${formatNumber(paidUsageQuantity)}`}
+          />
+        )}
+        <SettingsBillingLabelValueItem
+          label={t`Cost per 1k Extra Credits`}
+          value={`$${formatNumber((unitPriceCents / 100) * 1000, 2)}`}
+        />
+        {!isTrialing && (
+          <SettingsBillingLabelValueItem
+            label={t`Cost`}
+            isValueInPrimaryColor={true}
+            value={`$${formatNumber(totalCostCents / 100, 2)}`}
+          />
+        )}
+      </StyledMonthlyCreditsContainer>
+    </Section>
+  );
+};