Add queue management dashboard

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -350,6 +350,14 @@ const SettingsAdminIndicatorHealthStatus = lazy(() =>
   })),
 );
 
+const SettingsAdminQueueDetail = lazy(() =>
+  import('~/pages/settings/admin-panel/SettingsAdminQueueDetail').then(
+    (module) => ({
+      default: module.SettingsAdminQueueDetail,
+    }),
+  ),
+);
+
 const SettingsAdminConfigVariableDetails = lazy(() =>
   import(
     '~/pages/settings/admin-panel/SettingsAdminConfigVariableDetails'
@@ -636,6 +644,10 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
             path={SettingsPath.AdminPanelIndicatorHealthStatus}
             element={<SettingsAdminIndicatorHealthStatus />}
           />
+          <Route
+            path={SettingsPath.AdminPanelQueueDetail}
+            element={<SettingsAdminQueueDetail />}
+          />
 
           <Route
             path={SettingsPath.AdminPanelConfigVariableDetails}

packages/twenty-front/src/modules/billing/graphql/fragments/billingPriceLicensedFragment.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const BILLING_PRICE_LICENSED_FRAGMENT = gql`
-  fragment BillingPriceLicensedFragment on BillingPriceLicensedDTO {
+  fragment BillingPriceLicensedFragment on BillingPriceLicensed {
     stripePriceId
     unitAmount
     recurringInterval

packages/twenty-front/src/modules/billing/graphql/fragments/billingPriceMeteredFragment.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const BILLING_PRICE_METERED_FRAGMENT = gql`
-  fragment BillingPriceMeteredFragment on BillingPriceMeteredDTO {
+  fragment BillingPriceMeteredFragment on BillingPriceMetered {
     priceUsageType
     recurringInterval
     stripePriceId

packages/twenty-front/src/modules/billing/hooks/useAllBillingPrices.ts

@@ -1,8 +1,8 @@
+import { usePlans } from '@/billing/hooks/usePlans';
 import {
-  type BillingPriceLicensedDto,
-  type BillingPriceMeteredDto,
+  type BillingPriceLicensed,
+  type BillingPriceMetered,
 } from '~/generated/graphql';
-import { usePlans } from '@/billing/hooks/usePlans';
 
 export const useAllBillingPrices = () => {
   const { listPlans } = usePlans();
@@ -13,7 +13,7 @@ export const useAllBillingPrices = () => {
         ({ prices }) => prices,
       );
     })
-    .flat(2) as Array<BillingPriceLicensedDto | BillingPriceMeteredDto>;
+    .flat(2) as Array<BillingPriceLicensed | BillingPriceMetered>;
 
   return { allBillingPrices };
 };

packages/twenty-front/src/modules/billing/hooks/usePriceAndBillingUsageByPriceId.ts

@@ -1,9 +1,9 @@
+import { isDefined } from 'twenty-shared/utils';
 import {
-  type BillingPriceLicensedDto,
-  type BillingPriceMeteredDto,
+  type BillingPriceLicensed,
+  type BillingPriceMetered,
   BillingUsageType,
 } from '~/generated/graphql';
-import { isDefined } from 'twenty-shared/utils';
 import { useAllBillingPrices } from './useAllBillingPrices';
 
 export const usePriceAndBillingUsageByPriceId = () => {
@@ -13,18 +13,18 @@ export const usePriceAndBillingUsageByPriceId = () => {
     priceId: string,
   ):
     | {
-        price: BillingPriceLicensedDto;
+        price: BillingPriceLicensed;
         billingUsage: BillingUsageType.LICENSED;
       }
     | {
-        price: BillingPriceMeteredDto;
+        price: BillingPriceMetered;
         billingUsage: BillingUsageType.METERED;
       } => {
     const licensed = allBillingPrices.find(
       (p) =>
         p.priceUsageType === BillingUsageType.LICENSED &&
         p.stripePriceId === priceId,
-    ) as BillingPriceLicensedDto | undefined;
+    ) as BillingPriceLicensed | undefined;
 
     if (isDefined(licensed))
       return { price: licensed, billingUsage: BillingUsageType.LICENSED };
@@ -33,7 +33,7 @@ export const usePriceAndBillingUsageByPriceId = () => {
       (p) =>
         p.priceUsageType === BillingUsageType.METERED &&
         p.stripePriceId === priceId,
-    ) as BillingPriceMeteredDto | undefined;
+    ) as BillingPriceMetered | undefined;
     if (isDefined(metered))
       return { price: metered, billingUsage: BillingUsageType.METERED };
 

packages/twenty-front/src/modules/billing/hooks/useSplitPhaseItemsInPrices.ts

@@ -1,10 +1,10 @@
+import { useNextBillingPhase } from '@/billing/hooks/useNextBillingPhase';
+import { usePriceAndBillingUsageByPriceId } from '@/billing/hooks/usePriceAndBillingUsageByPriceId';
+import { type MeteredBillingPrice } from '@/billing/types/billing-price-tiers.type';
 import {
-  type BillingPriceLicensedDto,
+  type BillingPriceLicensed,
   BillingUsageType,
 } from '~/generated/graphql';
-import { type MeteredBillingPrice } from '@/billing/types/billing-price-tiers.type';
-import { usePriceAndBillingUsageByPriceId } from '@/billing/hooks/usePriceAndBillingUsageByPriceId';
-import { useNextBillingPhase } from '@/billing/hooks/useNextBillingPhase';
 
 export const useSplitPhaseItemsInPrices = () => {
   const { nextBillingPhase } = useNextBillingPhase();
@@ -26,7 +26,7 @@ export const useSplitPhaseItemsInPrices = () => {
     },
     {} as {
       nextMereredPrice: MeteredBillingPrice | undefined;
-      nextLicensedPrice: BillingPriceLicensedDto | undefined;
+      nextLicensedPrice: BillingPriceLicensed | undefined;
     },
   );
 

packages/twenty-front/src/modules/billing/types/billing-price-tiers.type.ts

@@ -1,4 +1,4 @@
-import type { BillingPriceMeteredDto } from '~/generated/graphql';
+import type { BillingPriceMetered } from '~/generated/graphql';
 
 export type BillingPriceTiers = [
   {
@@ -14,6 +14,6 @@ export type BillingPriceTiers = [
 ];
 
 // graphql does not support tuple so we need to create a new type
-export type MeteredBillingPrice = Omit<BillingPriceMeteredDto, 'tiers'> & {
+export type MeteredBillingPrice = Omit<BillingPriceMetered, 'tiers'> & {
   tiers: BillingPriceTiers;
 };

packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx

@@ -1,5 +1,6 @@
-import { Button } from 'twenty-ui/input';
+import { t } from '@lingui/core/macro';
 import { IconHeart, IconHeartOff } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 
 type PageFavoriteButtonProps = {
   isFavorite: boolean;
@@ -10,7 +11,7 @@ export const PageFavoriteButton = ({
   isFavorite,
   onClick,
 }: PageFavoriteButtonProps) => {
-  const title = isFavorite ? 'Remove from favorites' : 'Add to favorites';
+  const title = isFavorite ? t`Remove from favorites` : t`Add to favorites`;
 
   return (
     <Button

packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetForbiddenDisplay.tsx

@@ -1,6 +1,6 @@
-import { type WidgetAccessDenialInfo } from '@/page-layout/widgets/types/WidgetAccessDenialInfo';
 import { ForbiddenFieldDisplay } from '@/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay';
-import { t } from '@lingui/core/macro';
+import { type WidgetAccessDenialInfo } from '@/page-layout/widgets/types/WidgetAccessDenialInfo';
+import { plural, t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { AppTooltip } from 'twenty-ui/display';
 
@@ -27,9 +27,10 @@ export const PageLayoutWidgetForbiddenDisplay = ({
       restriction.fieldNames.length > 0
     ) {
       const fieldsList = restriction.fieldNames.join(', ');
-      const fieldWord =
-        restriction.fieldNames.length === 1 ? 'field' : 'fields';
-      return t`You do not have permission to access the ${fieldsList} ${fieldWord}`;
+      return plural(restriction.fieldNames.length, {
+        one: `You do not have permission to access the ${fieldsList} field`,
+        other: `You do not have permission to access the ${fieldsList} fields`,
+      });
     }
 
     return t`You do not have permission to view this widget`;

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/ConnectedAccountHealthStatus.tsx → packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminConnectedAccountHealthStatus.tsx

@@ -16,7 +16,7 @@ const StyledContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(8)};
 `;
 
-export const ConnectedAccountHealthStatus = () => {
+export const SettingsAdminConnectedAccountHealthStatus = () => {
   const { indicatorHealth } = useContext(SettingsAdminIndicatorHealthContext);
   const details = indicatorHealth.details;
   if (!details) {
@@ -32,21 +32,24 @@ export const ConnectedAccountHealthStatus = () => {
     serviceDetails.calendarSync?.status ===
     AdminPanelHealthServiceStatus.OUTAGE;
 
-  const errorMessages = [];
-  if (isMessageSyncDown) {
-    errorMessages.push('Message Sync');
-  }
-  if (isCalendarSyncDown) {
-    errorMessages.push('Calendar Sync');
-  }
+  const getErrorMessage = () => {
+    if (isMessageSyncDown && isCalendarSyncDown) {
+      return t`Message Sync and Calendar Sync are not available because the service is down`;
+    }
+    if (isMessageSyncDown) {
+      return t`Message Sync is not available because the service is down`;
+    }
+    if (isCalendarSyncDown) {
+      return t`Calendar Sync is not available because the service is down`;
+    }
+    return null;
+  };
+
+  const errorMessage = getErrorMessage();
 
   return (
     <StyledContainer>
-      {errorMessages.length > 0 && (
-        <StyledErrorMessage>
-          {`${errorMessages.join(' and ')} ${errorMessages.length > 1 ? 'are' : 'is'} not available because the service is down`}
-        </StyledErrorMessage>
-      )}
+      {errorMessage && <StyledErrorMessage>{errorMessage}</StyledErrorMessage>}
 
       {!isMessageSyncDown && serviceDetails.messageSync?.details && (
         <SettingsAdminHealthAccountSyncCountersTable

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminDeleteJobsConfirmationModal.tsx

@@ -0,0 +1,38 @@
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
+import { plural, t } from '@lingui/core/macro';
+
+type SettingsAdminDeleteJobsConfirmationModalProps = {
+  modalId: string;
+  jobCount: number;
+  onConfirm: () => void;
+  onClose?: () => void;
+};
+
+export const SettingsAdminDeleteJobsConfirmationModal = ({
+  modalId,
+  jobCount,
+  onConfirm,
+  onClose,
+}: SettingsAdminDeleteJobsConfirmationModalProps) => {
+  const title = plural(jobCount, {
+    one: `Delete ${jobCount} Job`,
+    other: `Delete ${jobCount} Jobs`,
+  });
+
+  const subtitle = plural(jobCount, {
+    one: `This will permanently remove it from the queue. This action cannot be undone.`,
+    other: `This will permanently remove them from the queue. This action cannot be undone.`,
+  });
+
+  return (
+    <ConfirmationModal
+      modalId={modalId}
+      title={title}
+      subtitle={subtitle}
+      onConfirmClick={onConfirm}
+      onClose={onClose}
+      confirmButtonText={t`Delete`}
+      confirmButtonAccent="danger"
+    />
+  );
+};

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatus.tsx

@@ -1,5 +1,5 @@
 import { SettingsAdminTabSkeletonLoader } from '@/settings/admin-panel/components/SettingsAdminTabSkeletonLoader';
-import { SettingsHealthStatusListCard } from '@/settings/admin-panel/health-status/components/SettingsHealthStatusListCard';
+import { SettingsAdminHealthStatusListCard } from '@/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard';
 import { t } from '@lingui/core/macro';
 import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
@@ -23,7 +23,7 @@ export const SettingsAdminHealthStatus = () => {
           title={t`Health Status`}
           description={t`How your system is doing`}
         />
-        <SettingsHealthStatusListCard
+        <SettingsAdminHealthStatusListCard
           services={services}
           loading={loadingHealthStatus}
         />

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsHealthStatusListCard.tsx → packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard.tsx

@@ -25,7 +25,7 @@ const HealthStatusIcons: { [k in HealthIndicatorId]: IconComponent } = {
   [HealthIndicatorId.app]: IconAppWindow,
 };
 
-export const SettingsHealthStatusListCard = ({
+export const SettingsAdminHealthStatusListCard = ({
   services,
   loading,
 }: {

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminIndicatorHealthStatusContent.tsx

@@ -1,6 +1,6 @@
-import { ConnectedAccountHealthStatus } from '@/settings/admin-panel/health-status/components/ConnectedAccountHealthStatus';
-import { JsonDataIndicatorHealthStatus } from '@/settings/admin-panel/health-status/components/JsonDataIndicatorHealthStatus';
-import { WorkerHealthStatus } from '@/settings/admin-panel/health-status/components/WorkerHealthStatus';
+import { SettingsAdminConnectedAccountHealthStatus } from '@/settings/admin-panel/health-status/components/SettingsAdminConnectedAccountHealthStatus';
+import { SettingsAdminJsonDataIndicatorHealthStatus } from '@/settings/admin-panel/health-status/components/SettingsAdminJsonDataIndicatorHealthStatus';
+import { SettingsAdminWorkerHealthStatus } from '@/settings/admin-panel/health-status/components/SettingsAdminWorkerHealthStatus';
 import { useParams } from 'react-router-dom';
 import { HealthIndicatorId } from '~/generated/graphql';
 
@@ -11,11 +11,11 @@ export const SettingsAdminIndicatorHealthStatusContent = () => {
     case HealthIndicatorId.database:
     case HealthIndicatorId.redis:
     case HealthIndicatorId.app:
-      return <JsonDataIndicatorHealthStatus />;
+      return <SettingsAdminJsonDataIndicatorHealthStatus />;
     case HealthIndicatorId.worker:
-      return <WorkerHealthStatus />;
+      return <SettingsAdminWorkerHealthStatus />;
     case HealthIndicatorId.connectedAccount:
-      return <ConnectedAccountHealthStatus />;
+      return <SettingsAdminConnectedAccountHealthStatus />;
 
     default:
       return null;