diff --git a/packages/twenty-front/src/generated-metadata/graphql.ts b/packages/twenty-front/src/generated-metadata/graphql.ts
index 452b4c99173..248a01549a7 100644
--- a/packages/twenty-front/src/generated-metadata/graphql.ts
+++ b/packages/twenty-front/src/generated-metadata/graphql.ts
@@ -1698,6 +1698,7 @@ export type EventLogRecord = {
};
export enum EventLogTable {
+ BILLING_EVENT = 'BILLING_EVENT',
OBJECT_EVENT = 'OBJECT_EVENT',
PAGEVIEW = 'PAGEVIEW',
WORKSPACE_EVENT = 'WORKSPACE_EVENT'
diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingAnalyticsSection.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingAnalyticsSection.tsx
index d91d434ecd3..44bfea20ffd 100644
--- a/packages/twenty-front/src/modules/billing/components/SettingsBillingAnalyticsSection.tsx
+++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingAnalyticsSection.tsx
@@ -25,10 +25,10 @@ const StyledBarRow = styled.div`
`;
const StyledClickableBarRow = styled(StyledBarRow)`
- cursor: pointer;
border-radius: ${themeCssVariables.border.radius.sm};
- padding: ${themeCssVariables.spacing[1]};
+ cursor: pointer;
margin: -${themeCssVariables.spacing[1]};
+ padding: ${themeCssVariables.spacing[1]};
&:hover {
background-color: ${themeCssVariables.background.transparent.light};
@@ -36,19 +36,19 @@ const StyledClickableBarRow = styled(StyledBarRow)`
`;
const StyledBarLabel = styled.div`
+ align-items: center;
display: flex;
justify-content: space-between;
- align-items: center;
`;
const StyledLabelText = styled.span`
color: ${themeCssVariables.font.color.tertiary};
font-size: ${themeCssVariables.font.size.xs};
font-weight: ${themeCssVariables.font.weight.semiBold};
+ max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- max-width: 60%;
`;
const StyledValueText = styled.span`
@@ -58,8 +58,8 @@ const StyledValueText = styled.span`
`;
const StyledTimeSeriesContainer = styled.div`
- display: flex;
align-items: flex-end;
+ display: flex;
gap: 2px;
height: 80px;
width: 100%;
@@ -132,7 +132,14 @@ const StyledBackButton = styled.button`
`;
const getBarColors = (theme: {
- color: { blue: string; purple: string; green: string; orange: string; turquoise: string; pink: string };
+ color: {
+ blue: string;
+ purple: string;
+ green: string;
+ orange: string;
+ turquoise: string;
+ pink: string;
+ };
}): string[] => [
theme.color.blue,
theme.color.purple,
@@ -219,9 +226,7 @@ export const SettingsBillingAnalyticsSection = () => {
);
const displayTimeSeries =
- selectedUserId && userDailyUsage
- ? userDailyUsage.dailyUsage
- : timeSeries;
+ selectedUserId && userDailyUsage ? userDailyUsage.dailyUsage : timeSeries;
const maxTimeSeriesValue = Math.max(
...displayTimeSeries.map((point) => point.creditsUsed),
@@ -278,15 +283,10 @@ export const SettingsBillingAnalyticsSection = () => {
label={t`Usage by Type`}
value={`${formatNumber(totalCredits)} total`}
/>
-
+
{usageByExecutionType.map((item, index) => {
const percentage =
- totalCredits > 0
- ? (item.creditsUsed / totalCredits) * 100
- : 0;
+ totalCredits > 0 ? (item.creditsUsed / totalCredits) * 100 : 0;
return (
@@ -295,8 +295,8 @@ export const SettingsBillingAnalyticsSection = () => {
{EXECUTION_TYPE_LABELS[item.key] ?? item.key}
- {formatNumber(item.creditsUsed)} (
- {Math.round(percentage)}%)
+ {formatNumber(item.creditsUsed)} ({Math.round(percentage)}
+ %)
{
{usageByUser.map((item, index) => {
const percentage =
- totalCredits > 0
- ? (item.creditsUsed / totalCredits) * 100
- : 0;
+ totalCredits > 0 ? (item.creditsUsed / totalCredits) * 100 : 0;
return (
{
{usageByResource.map((item, index) => {
const percentage =
- totalCredits > 0
- ? (item.creditsUsed / totalCredits) * 100
- : 0;
+ totalCredits > 0 ? (item.creditsUsed / totalCredits) * 100 : 0;
return (
diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingContent.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingContent.tsx
index 562a67e7c01..11256cb857a 100644
--- a/packages/twenty-front/src/modules/billing/components/SettingsBillingContent.tsx
+++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingContent.tsx
@@ -1,5 +1,5 @@
import { useLingui } from '@lingui/react/macro';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SettingsBillingAnalyticsSection } from '@/billing/components/SettingsBillingAnalyticsSection';
@@ -10,7 +10,12 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
import { isDefined, getSettingsPath } from 'twenty-shared/utils';
import { SettingsPath } from 'twenty-shared/types';
-import { H2Title, IconChartBar, IconCircleX, IconCreditCard } from 'twenty-ui/display';
+import {
+ H2Title,
+ IconChartBar,
+ IconCircleX,
+ IconCreditCard,
+} from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import {
@@ -24,7 +29,6 @@ export const SettingsBillingContent = () => {
const { t } = useLingui();
const { redirect } = useRedirect();
- const navigate = useNavigate();
const currentWorkspace = useAtomStateValue(currentWorkspaceState);
@@ -85,12 +89,13 @@ export const SettingsBillingContent = () => {
title={t`Usage`}
description={t`View detailed usage analytics for your workspace`}
/>
-