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/hooks/useGetWorkflowNodeExecutionUsage.ts

@@ -0,0 +1,39 @@
+import {
+  BillingProductKey,
+  useGetMeteredProductsUsageQuery,
+} from '~/generated/graphql';
+
+export const useGetWorkflowNodeExecutionUsage = () => {
+  const { data, loading } = useGetMeteredProductsUsageQuery();
+
+  const workflowUsage = data?.getMeteredProductsUsage.find(
+    (productUsage) =>
+      productUsage.productKey === BillingProductKey.WORKFLOW_NODE_EXECUTION,
+  );
+
+  if (loading === true || !workflowUsage) {
+    return {
+      usageQuantity: 0,
+      freeUsageQuantity: 0,
+      includedFreeQuantity: 0,
+      paidUsageQuantity: 0,
+      unitPriceCents: 0,
+      totalCostCents: 0,
+    };
+  }
+
+  return {
+    usageQuantity: workflowUsage.usageQuantity,
+    freeUsageQuantity:
+      workflowUsage.usageQuantity > workflowUsage.includedFreeQuantity
+        ? workflowUsage.includedFreeQuantity
+        : workflowUsage.usageQuantity,
+    includedFreeQuantity: workflowUsage.includedFreeQuantity,
+    paidUsageQuantity:
+      workflowUsage.usageQuantity > workflowUsage.includedFreeQuantity
+        ? workflowUsage.usageQuantity - workflowUsage.includedFreeQuantity
+        : 0,
+    unitPriceCents: workflowUsage.unitPriceCents,
+    totalCostCents: workflowUsage.totalCostCents,
+  };
+};