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`} /> -