feat: added announcement banner

This reverts commit 557451ed81.

frontend/public/locales/en-GB/routes.json

@@ -15,5 +15,6 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members"
+	"members": "Members",
+	"service_accounts": "Service Accounts"
 }

frontend/public/locales/en-GB/titles.json

@@ -50,5 +50,8 @@
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter"
+	"METER": "SigNoz | Meter",
+	"ROLES_SETTINGS": "SigNoz | Roles",
+	"MEMBERS_SETTINGS": "SigNoz | Members",
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

frontend/public/locales/en/routes.json

@@ -15,5 +15,6 @@
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
 	"role_details": "Role Details",
-	"members": "Members"
+	"members": "Members",
+	"service_accounts": "Service Accounts"
 }

frontend/public/locales/en/titles.json

@@ -75,5 +75,6 @@
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
-	"MEMBERS_SETTINGS": "SigNoz | Members"
+	"MEMBERS_SETTINGS": "SigNoz | Members",
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

frontend/src/components/AnnouncementBanner/AnnouncementBanner.styles.scss

@@ -0,0 +1,115 @@
+.announcement-banner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	padding: var(--padding-2) var(--padding-4);
+	height: 40px;
+	font-family: var(--font-sans), sans-serif;
+	font-size: var(--label-base-500-font-size);
+	line-height: var(--label-base-500-line-height);
+	font-weight: var(--label-base-500-font-weight);
+	letter-spacing: -0.065px;
+
+	&--warning {
+		background-color: var(--callout-warning-background);
+		color: var(--callout-warning-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-warning-border);
+		}
+	}
+
+	&--info {
+		background-color: var(--callout-primary-background);
+		color: var(--callout-primary-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-primary-border);
+		}
+	}
+
+	&--error {
+		background-color: var(--callout-error-background);
+		color: var(--callout-error-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-error-border);
+		}
+	}
+
+	&--success {
+		background-color: var(--callout-success-background);
+		color: var(--callout-success-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-success-border);
+		}
+	}
+
+	&__body {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	&__message {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: var(--line-height-normal);
+
+		strong {
+			font-weight: var(--font-weight-semibold);
+		}
+	}
+
+	&__action {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-3);
+		height: 24px;
+		padding: 0 var(--padding-2);
+		border: none;
+		border-radius: 2px;
+		cursor: pointer;
+		font-size: var(--label-small-500-font-size);
+		font-family: var(--font-sans), sans-serif;
+		font-weight: var(--label-small-500-font-weight);
+		color: currentColor;
+		white-space: nowrap;
+		flex-shrink: 0;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+
+	&__dismiss {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border: none;
+		border-radius: 2px;
+		padding: 0;
+		cursor: pointer;
+		color: currentColor;
+		flex-shrink: 0;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+}

frontend/src/components/AnnouncementBanner/AnnouncementBanner.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import AnnouncementBanner, {
+	AnnouncementBannerProps,
+} from './AnnouncementBanner';
+
+const STORAGE_KEY = 'test-banner-dismissed';
+
+function renderBanner(props: Partial<AnnouncementBannerProps> = {}): void {
+	render(<AnnouncementBanner message="Test message" {...props} />);
+}
+
+afterEach(() => {
+	localStorage.removeItem(STORAGE_KEY);
+});
+
+describe('AnnouncementBanner', () => {
+	it('renders message and default warning variant', () => {
+		renderBanner({ message: <strong>Heads up</strong> });
+
+		const alert = screen.getByRole('alert');
+		expect(alert).toHaveClass('announcement-banner--warning');
+		expect(alert).toHaveTextContent('Heads up');
+	});
+
+	it.each(['warning', 'info', 'success', 'error'] as const)(
+		'renders %s variant correctly',
+		(type) => {
+			renderBanner({ type, message: 'Test message' });
+			const alert = screen.getByRole('alert');
+			expect(alert).toHaveClass(`announcement-banner--${type}`);
+		},
+	);
+
+	it('dismisses on click, calls onDismiss, and persists to localStorage', async () => {
+		const onDismiss = jest.fn() as jest.MockedFunction<() => void>;
+		renderBanner({ storageKey: STORAGE_KEY, onDismiss });
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByRole('button', { name: /dismiss/i }));
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+		expect(onDismiss).toHaveBeenCalledTimes(1);
+		expect(localStorage.getItem(STORAGE_KEY)).toBe('true');
+	});
+
+	it('does not render when storageKey is already set in localStorage', () => {
+		localStorage.setItem(STORAGE_KEY, 'true');
+		renderBanner({ storageKey: STORAGE_KEY });
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+
+	it('calls action onClick when action button is clicked', async () => {
+		const onClick = jest.fn() as jest.MockedFunction<() => void>;
+		renderBanner({ action: { label: 'Go to Settings', onClick } });
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByRole('button', { name: /go to settings/i }));
+
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('hides dismiss button when dismissible is false and hides icon when icon is null', () => {
+		renderBanner({ dismissible: false, icon: null });
+
+		expect(
+			screen.queryByRole('button', { name: /dismiss/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('alert')?.querySelector('.announcement-banner__icon'),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -0,0 +1,115 @@
+import { ReactNode, useState } from 'react';
+import {
+	CircleAlert,
+	CircleCheckBig,
+	Info,
+	TriangleAlert,
+	X,
+} from '@signozhq/icons';
+import cx from 'classnames';
+
+import './AnnouncementBanner.styles.scss';
+
+export type AnnouncementBannerType = 'warning' | 'info' | 'error' | 'success';
+
+export interface AnnouncementBannerAction {
+	label: string;
+	onClick: () => void;
+}
+
+export interface AnnouncementBannerProps {
+	message: ReactNode;
+	type?: AnnouncementBannerType;
+	icon?: ReactNode | null;
+	action?: AnnouncementBannerAction;
+	dismissible?: boolean;
+	storageKey?: string;
+	onDismiss?: () => void;
+	className?: string;
+}
+
+const DEFAULT_ICONS: Record<AnnouncementBannerType, ReactNode> = {
+	warning: <TriangleAlert size={14} />,
+	info: <Info size={14} />,
+	error: <CircleAlert size={14} />,
+	success: <CircleCheckBig size={14} />,
+};
+
+function isDismissed(storageKey?: string): boolean {
+	if (!storageKey) {
+		return false;
+	}
+	return localStorage.getItem(storageKey) === 'true';
+}
+
+export default function AnnouncementBanner({
+	message,
+	type = 'warning',
+	icon,
+	action,
+	dismissible = true,
+	storageKey,
+	onDismiss,
+	className,
+}: AnnouncementBannerProps): JSX.Element | null {
+	const [visible, setVisible] = useState(() => !isDismissed(storageKey));
+
+	if (!visible) {
+		return null;
+	}
+
+	const handleDismiss = (): void => {
+		if (storageKey) {
+			localStorage.setItem(storageKey, 'true');
+		}
+		setVisible(false);
+		onDismiss?.();
+	};
+
+	const resolvedIcon = icon === null ? null : icon ?? DEFAULT_ICONS[type];
+
+	return (
+		<div
+			role="alert"
+			className={cx(
+				'announcement-banner',
+				`announcement-banner--${type}`,
+				className,
+			)}
+		>
+			<div className="announcement-banner__body">
+				{resolvedIcon && (
+					<span className="announcement-banner__icon">{resolvedIcon}</span>
+				)}
+				{typeof message === 'string' ? (
+					<span
+						className="announcement-banner__message"
+						dangerouslySetInnerHTML={{ __html: message }}
+					/>
+				) : (
+					<span className="announcement-banner__message">{message}</span>
+				)}
+				{action && (
+					<button
+						type="button"
+						className="announcement-banner__action"
+						onClick={action.onClick}
+					>
+						{action.label}
+					</button>
+				)}
+			</div>
+
+			{dismissible && (
+				<button
+					type="button"
+					aria-label="Dismiss"
+					className="announcement-banner__dismiss"
+					onClick={handleDismiss}
+				>
+					<X size={14} />
+				</button>
+			)}
+		</div>
+	);
+}

frontend/src/components/AnnouncementBanner/index.ts

@@ -0,0 +1,6 @@
+export type {
+	AnnouncementBannerAction,
+	AnnouncementBannerProps,
+	AnnouncementBannerType,
+} from './AnnouncementBanner';
+export { default } from './AnnouncementBanner';

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -0,0 +1,142 @@
+.create-sa-modal {
+	max-width: 530px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-family: Inter, sans-serif;
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--bg-base-white);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: 0;
+
+		.create-sa-modal__content {
+			padding: var(--padding-4);
+		}
+	}
+}
+
+.create-sa-form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+
+	.ant-form-item {
+		margin-bottom: var(--spacing-4);
+	}
+
+	.ant-form-item-label > label {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		color: var(--l1-foreground);
+		background-color: var(--l2-background);
+		border-color: var(--border);
+		font-size: var(--paragraph-base-400-font-size);
+		border-radius: 2px;
+		width: 100%;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+
+		&:focus {
+			border-color: var(--primary);
+			box-shadow: none;
+		}
+	}
+
+	&__select {
+		width: 100%;
+
+		.ant-select-selector {
+			min-height: 32px;
+			border-radius: 2px;
+			background-color: var(--l2-background) !important;
+			border: 1px solid var(--border) !important;
+			padding: 0 var(--padding-2) !important;
+
+			.ant-select-selection-placeholder {
+				color: var(--l3-foreground);
+				opacity: 0.4;
+				font-size: var(--paragraph-base-400-font-size);
+				letter-spacing: -0.07px;
+				line-height: 32px;
+			}
+
+			.ant-select-selection-item {
+				font-size: var(--paragraph-base-400-font-size);
+				letter-spacing: -0.07px;
+				color: var(--bg-base-white);
+			}
+		}
+
+		.ant-select-arrow {
+			color: var(--foreground);
+		}
+
+		&.ant-select-focused .ant-select-selector,
+		&:not(.ant-select-disabled):hover .ant-select-selector {
+			border-color: var(--primary);
+		}
+	}
+
+	&__helper {
+		font-size: var(--paragraph-small-400-font-size);
+		color: var(--l3-foreground);
+		margin: calc(var(--spacing-2) * -1) 0 var(--spacing-4) 0;
+		line-height: var(--paragraph-small-400-line-height);
+	}
+}
+
+.create-sa-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: var(--spacing-4);
+	flex-shrink: 0;
+}
+
+.lightMode {
+	.create-sa-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+
+	.create-sa-form {
+		&__select {
+			.ant-select-selector {
+				.ant-select-selection-item {
+					color: var(--bg-base-black);
+				}
+			}
+		}
+	}
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -0,0 +1,186 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { X } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { Form } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCreateServiceAccount } from 'api/generated/services/serviceaccount';
+import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import RolesSelect, { useRoles } from 'components/RolesSelect';
+
+import './CreateServiceAccountModal.styles.scss';
+
+interface CreateServiceAccountModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+interface FormValues {
+	name: string;
+	email: string;
+	roles: string[];
+}
+
+function CreateServiceAccountModal({
+	open,
+	onClose,
+	onSuccess,
+}: CreateServiceAccountModalProps): JSX.Element {
+	const [form] = Form.useForm<FormValues>();
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [submittable, setSubmittable] = useState(false);
+
+	const values = Form.useWatch([], form);
+
+	useEffect(() => {
+		form
+			.validateFields({ validateOnly: true })
+			.then(() => setSubmittable(true))
+			.catch(() => setSubmittable(false));
+	}, [values, form]);
+
+	const { mutateAsync: createServiceAccount } = useCreateServiceAccount();
+	const {
+		roles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	const handleClose = useCallback((): void => {
+		form.resetFields();
+		onClose();
+	}, [form, onClose]);
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			const values = await form.validateFields();
+			setIsSubmitting(true);
+			await createServiceAccount({
+				data: {
+					name: values.name.trim(),
+					email: values.email.trim(),
+					roles: values.roles,
+				},
+			});
+			toast.success('Service account created successfully', { richColors: true });
+			form.resetFields();
+			onSuccess();
+			onClose();
+		} catch (err: unknown) {
+			if (err && typeof err === 'object' && 'errorFields' in err) {
+				return;
+			}
+			const errMessage =
+				convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'An error occurred';
+			toast.error(`Failed to create service account: ${errMessage}`, {
+				richColors: true,
+			});
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [form, createServiceAccount, onSuccess, onClose]);
+
+	return (
+		<DialogWrapper
+			title="New Service Account"
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			showCloseButton
+			width="narrow"
+			className="create-sa-modal"
+			disableOutsideClick={false}
+		>
+			<div className="create-sa-modal__content">
+				<Form form={form} layout="vertical" className="create-sa-form">
+					<Form.Item
+						name="name"
+						label="Name"
+						rules={[{ required: true, message: 'Name is required' }]}
+						className="create-sa-form__item"
+					>
+						<Input placeholder="Enter a name" className="create-sa-form__input" />
+					</Form.Item>
+
+					<Form.Item
+						name="email"
+						label="Email Address"
+						rules={[
+							{ required: true, message: 'Email Address is required' },
+							{ type: 'email', message: 'Please enter a valid email address' },
+						]}
+						className="create-sa-form__item"
+					>
+						<Input
+							type="email"
+							placeholder="email@example.com"
+							className="create-sa-form__input"
+						/>
+					</Form.Item>
+					<p className="create-sa-form__helper">
+						Used only for notifications about this service account. It is not used for
+						authentication.
+					</p>
+
+					<Form.Item
+						name="roles"
+						label="Roles"
+						rules={[{ required: true, message: 'At least one role is required' }]}
+						className="create-sa-form__item"
+					>
+						<RolesSelect
+							mode="multiple"
+							roles={roles}
+							loading={rolesLoading}
+							isError={rolesError}
+							error={rolesErrorObj}
+							onRefetch={refetchRoles}
+							placeholder="Select roles"
+							className="create-sa-form__select"
+							getPopupContainer={(triggerNode): HTMLElement =>
+								(triggerNode?.closest('.create-sa-modal') as HTMLElement) ||
+								document.body
+							}
+						/>
+					</Form.Item>
+				</Form>
+			</div>
+
+			<DialogFooter className="create-sa-modal__footer">
+				<Button
+					type="button"
+					variant="solid"
+					color="secondary"
+					size="sm"
+					onClick={handleClose}
+				>
+					<X size={12} />
+					Cancel
+				</Button>
+
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					onClick={handleSubmit}
+					disabled={isSubmitting || !submittable}
+				>
+					{isSubmitting ? 'Creating...' : 'Create Service Account'}
+				</Button>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default CreateServiceAccountModal;

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,31 +1,6 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 4px;
-
-	.zoom-out-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: var(--foreground);
-		border: 1px solid var(--border);
-		border-radius: 2px;
-		box-shadow: none;
-		padding: 10px;
-		height: 33px;
-
-		&:hover:not(:disabled) {
-			color: var(--bg-vanilla-100);
-			background: var(--primary);
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
+	flex-direction: column;
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,15 +16,6 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useDispatch: jest.fn(() => jest.fn()),
-	useSelector: jest.fn(() => ({
-		minTime: 0,
-		maxTime: Date.now(),
-	})),
-}));
-
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,11 +7,9 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -19,11 +17,9 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
-import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
-import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -70,8 +66,6 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
-	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
-	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -94,7 +88,6 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
-	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -123,14 +116,6 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
-	const durationMs = (maxTime - minTime) / 1e6;
-	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
-
-	const handleZoomOut = useZoomOut({
-		isDisabled: zoomOutDisabled,
-		urlParamsToDelete: [QueryParams.activeLogId],
-	});
-
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -297,12 +282,7 @@ function CustomTimePicker({
 		resetErrorStatus();
 	};
 
-	const handleInputPressEnter = (
-		event?: React.KeyboardEvent<HTMLInputElement>,
-	): void => {
-		event?.preventDefault();
-		event?.stopPropagation();
-
+	const handleInputPressEnter = (): void => {
 		// check if the entered time is in the format of 1m, 2h, 3d, 4w
 		const isTimeDurationShortHandFormat = /^(\d+)([mhdw])$/.test(inputValue);
 
@@ -651,23 +631,6 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
-			{!showLiveLogs && !isModalTimeSelection && (
-				<Tooltip
-					title={
-						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
-					}
-				>
-					<span>
-						<Button
-							className="zoom-out-btn"
-							onClick={handleZoomOut}
-							disabled={zoomOutDisabled}
-							data-testid="zoom-out-btn"
-							prefixIcon={<ZoomOut size={14} />}
-						/>
-					</span>
-				</Tooltip>
-			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -1,169 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { QueryParams } from 'constants/query';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import CustomTimePicker from '../CustomTimePicker';
-
-const MS_PER_MIN = 60 * 1000;
-const NOW_MS = 1705312800000;
-
-const mockDispatch = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockUrlQueryDelete = jest.fn();
-const mockUrlQuerySet = jest.fn();
-
-interface MockAppState {
-	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
-}
-
-jest.mock('react-redux', () => ({
-	useDispatch: (): jest.Mock => mockDispatch,
-	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
-		const mockState: MockAppState = {
-			globalTime: {
-				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
-				maxTime: NOW_MS * 1e6,
-			},
-		};
-		return selector(mockState);
-	},
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-interface MockUrlQuery {
-	delete: typeof mockUrlQueryDelete;
-	set: typeof mockUrlQuerySet;
-	get: () => null;
-	toString: () => string;
-}
-
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): MockUrlQuery => ({
-		delete: mockUrlQueryDelete,
-		set: mockUrlQuerySet,
-		get: (): null => null,
-		toString: (): string => 'relativeTime=45m',
-	}),
-}));
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): { timezone: { value: string; offset: string } } => ({
-		timezone: { value: 'UTC', offset: 'UTC' },
-	}),
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
-}));
-
-const MS_PER_DAY = 24 * 60 * 60 * 1000;
-const now = Date.now();
-const defaultProps = {
-	onSelect: jest.fn(),
-	onError: jest.fn(),
-	selectedValue: '15m',
-	selectedTime: '15m',
-	onValidCustomDateChange: jest.fn(),
-	open: false,
-	setOpen: jest.fn(),
-	items: [
-		{ value: '15m', label: 'Last 15 minutes' },
-		{ value: '1h', label: 'Last 1 hour' },
-	],
-	minTime: (now - 15 * 60 * 1000) * 1e6,
-	maxTime: now * 1e6,
-};
-
-describe('CustomTimePicker - zoom out button', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	it('should render zoom out button when showLiveLogs is false', () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
-	});
-
-	it('should not render zoom out button when showLiveLogs is true', () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
-
-		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
-	});
-
-	it('should not render zoom out button when isModalTimeSelection is true', () => {
-		render(
-			<CustomTimePicker
-				{...defaultProps}
-				showLiveLogs={false}
-				isModalTimeSelection={true}
-			/>,
-		);
-
-		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
-	});
-
-	it('should call handleZoomOut when zoom out button is clicked', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockDispatch).toHaveBeenCalled();
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
-		);
-	});
-
-	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
-		);
-		expect(mockDispatch).toHaveBeenCalled();
-	});
-
-	it('should delete activeLogId when zoom out is clicked', async () => {
-		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		await userEvent.click(zoomOutBtn);
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
-	});
-
-	it('should disable zoom button when time range is >= 1 month', () => {
-		const now = Date.now();
-		render(
-			<CustomTimePicker
-				{...defaultProps}
-				minTime={(now - 31 * MS_PER_DAY) * 1e6}
-				maxTime={now * 1e6}
-				showLiveLogs={false}
-			/>,
-		);
-
-		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		expect(zoomOutBtn).toBeDisabled();
-	});
-});

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -243,56 +243,60 @@ function InviteMembersModal({
 						<div className="table-header-cell role-header">Roles</div>
 						<div className="table-header-cell action-header" />
 					</div>
-					<div className="invite-members-modal__container">
-						{rows.map(
-							(row): JSX.Element => (
-								<div key={row.id} className="team-member-row">
-									<div className="team-member-cell email-cell">
-										<Input
-											type="email"
-											placeholder="john@signoz.io"
-											value={row.email}
-											onChange={(e): void => updateEmail(row.id, e.target.value)}
-											className="team-member-email-input"
-										/>
-										{emailValidity[row.id] === false && row.email.trim() !== '' && (
-											<span className="email-error-message">Invalid email address</span>
-										)}
-									</div>
-									<div className="team-member-cell role-cell">
-										<Select
-											value={row.role || undefined}
-											onChange={(role): void => updateRole(row.id, role as ROLES)}
-											className="team-member-role-select"
-											placeholder="Select roles"
-											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={(triggerNode): HTMLElement =>
-												(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
-												document.body
-											}
-										>
-											<Select.Option value="VIEWER">Viewer</Select.Option>
-											<Select.Option value="EDITOR">Editor</Select.Option>
-											<Select.Option value="ADMIN">Admin</Select.Option>
-										</Select>
-									</div>
-									<div className="team-member-cell action-cell">
-										{rows.length > 1 && (
-											<Button
-												variant="ghost"
-												color="destructive"
-												className="remove-team-member-button"
-												onClick={(): void => removeRow(row.id)}
-												aria-label="Remove row"
+					<form noValidate onSubmit={(e): void => e.preventDefault()}>
+						<div className="invite-members-modal__container">
+							{rows.map(
+								(row): JSX.Element => (
+									<div key={row.id} className="team-member-row">
+										<div className="team-member-cell email-cell">
+											<Input
+												type="email"
+												placeholder="john@signoz.io"
+												value={row.email}
+												onChange={(e): void => updateEmail(row.id, e.target.value)}
+												className="team-member-email-input"
+												name={`invite-email-${row.id}`}
+												autoComplete="email"
+											/>
+											{emailValidity[row.id] === false && row.email.trim() !== '' && (
+												<span className="email-error-message">Invalid email address</span>
+											)}
+										</div>
+										<div className="team-member-cell role-cell">
+											<Select
+												value={row.role || undefined}
+												onChange={(role): void => updateRole(row.id, role as ROLES)}
+												className="team-member-role-select"
+												placeholder="Select roles"
+												suffixIcon={<ChevronDown size={14} />}
+												getPopupContainer={(triggerNode): HTMLElement =>
+													(triggerNode?.closest('.invite-members-modal') as HTMLElement) ||
+													document.body
+												}
 											>
-												<Trash2 size={12} />
-											</Button>
-										)}
+												<Select.Option value="VIEWER">Viewer</Select.Option>
+												<Select.Option value="EDITOR">Editor</Select.Option>
+												<Select.Option value="ADMIN">Admin</Select.Option>
+											</Select>
+										</div>
+										<div className="team-member-cell action-cell">
+											{rows.length > 1 && (
+												<Button
+													variant="ghost"
+													color="destructive"
+													className="remove-team-member-button"
+													onClick={(): void => removeRow(row.id)}
+													aria-label="Remove row"
+												>
+													<Trash2 size={12} />
+												</Button>
+											)}
+										</div>
 									</div>
-								</div>
-							),
-						)}
-					</div>
+								),
+							)}
+						</div>
+					</form>
 				</div>
 
 				{(hasInvalidEmails || hasInvalidRoles) && (

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -162,7 +162,7 @@
 		font-weight: var(--paragraph-base-400-font-weight);
 		color: var(--foreground);
 		margin: 0;
-		line-height: var(--paragraph-base-400-font-height);
+		line-height: var(--paragraph-base-400-line-height);
 
 		strong {
 			font-weight: var(--font-weight-medium);

frontend/src/components/RolesSelect/RolesSelect.styles.scss

@@ -0,0 +1,25 @@
+.roles-select-error {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 6px;
+	padding: 4px 8px;
+	color: var(--bg-cherry-500);
+	font-size: 12px;
+
+	&__msg {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__retry-btn {
+		display: flex;
+		align-items: center;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 2px;
+		color: var(--bg-cherry-500);
+	}
+}

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -0,0 +1,171 @@
+import { CircleAlert, RefreshCw } from '@signozhq/icons';
+import { Checkbox, Select } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useListRoles } from 'api/generated/services/role';
+import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import APIError from 'types/api/error';
+
+import './RolesSelect.styles.scss';
+
+export interface RoleOption {
+	label: string;
+	value: string;
+}
+
+export function useRoles(): {
+	roles: RoletypesRoleDTO[];
+	isLoading: boolean;
+	isError: boolean;
+	error: APIError | undefined;
+	refetch: () => void;
+} {
+	const { data, isLoading, isError, error, refetch } = useListRoles();
+	return {
+		roles: data?.data ?? [],
+		isLoading,
+		isError,
+		error: convertToApiError(error),
+		refetch,
+	};
+}
+
+export function getRoleOptions(roles: RoletypesRoleDTO[]): RoleOption[] {
+	return roles.map((role) => ({
+		label: role.name ?? '',
+		value: role.name ?? '',
+	}));
+}
+
+function ErrorContent({
+	error,
+	onRefetch,
+}: {
+	error?: APIError;
+	onRefetch?: () => void;
+}): JSX.Element {
+	const errorMessage = error?.message || 'Failed to load roles';
+
+	return (
+		<div className="roles-select-error">
+			<span className="roles-select-error__msg">
+				<CircleAlert size={12} />
+				{errorMessage}
+			</span>
+			{onRefetch && (
+				<button
+					type="button"
+					onClick={(e): void => {
+						e.stopPropagation();
+						onRefetch();
+					}}
+					className="roles-select-error__retry-btn"
+					title="Retry"
+				>
+					<RefreshCw size={12} />
+				</button>
+			)}
+		</div>
+	);
+}
+
+interface BaseProps {
+	id?: string;
+	placeholder?: string;
+	className?: string;
+	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+	roles?: RoletypesRoleDTO[];
+	loading?: boolean;
+	isError?: boolean;
+	error?: APIError;
+	onRefetch?: () => void;
+}
+
+interface SingleProps extends BaseProps {
+	mode?: 'single';
+	value?: string;
+	onChange?: (role: string) => void;
+}
+
+interface MultipleProps extends BaseProps {
+	mode: 'multiple';
+	value?: string[];
+	onChange?: (roles: string[]) => void;
+}
+
+export type RolesSelectProps = SingleProps | MultipleProps;
+
+function RolesSelect(props: RolesSelectProps): JSX.Element {
+	const externalRoles = props.roles;
+
+	const {
+		data,
+		isLoading: internalLoading,
+		isError: internalError,
+		error: internalErrorObj,
+		refetch: internalRefetch,
+	} = useListRoles({
+		query: { enabled: externalRoles === undefined },
+	});
+
+	const roles = externalRoles ?? data?.data ?? [];
+	const options = getRoleOptions(roles);
+
+	const {
+		mode,
+		id,
+		placeholder = 'Select role',
+		className,
+		getPopupContainer,
+		loading = internalLoading,
+		isError = internalError,
+		error = convertToApiError(internalErrorObj),
+		onRefetch = externalRoles === undefined ? internalRefetch : undefined,
+	} = props;
+
+	const notFoundContent = isError ? (
+		<ErrorContent error={error} onRefetch={onRefetch} />
+	) : undefined;
+
+	if (mode === 'multiple') {
+		const { value = [], onChange } = props as MultipleProps;
+		return (
+			<Select
+				id={id}
+				mode="multiple"
+				value={value}
+				onChange={onChange}
+				placeholder={placeholder}
+				className={className}
+				loading={loading}
+				notFoundContent={notFoundContent}
+				options={options}
+				optionRender={(option): JSX.Element => (
+					<Checkbox
+						checked={value.includes(option.value as string)}
+						style={{ pointerEvents: 'none' }}
+					>
+						{option.label}
+					</Checkbox>
+				)}
+				getPopupContainer={getPopupContainer}
+			/>
+		);
+	}
+
+	const { value, onChange } = props as SingleProps;
+	return (
+		<Select
+			id={id}
+			value={value}
+			onChange={onChange}
+			placeholder={placeholder}
+			className={className}
+			loading={loading}
+			notFoundContent={notFoundContent}
+			options={options}
+			getPopupContainer={getPopupContainer}
+		/>
+	);
+}
+
+export default RolesSelect;

frontend/src/components/RolesSelect/index.ts

@@ -0,0 +1,2 @@
+export type { RoleOption, RolesSelectProps } from './RolesSelect';
+export { default, getRoleOptions, useRoles } from './RolesSelect';

frontend/src/components/ServiceAccountDrawer/AddKeyModal.styles.scss

@@ -0,0 +1,179 @@
+.add-key-modal {
+	[data-slot='dialog-description'] {
+		padding: 0;
+	}
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		padding: var(--padding-4);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__expiry-toggle {
+		width: 60%;
+		display: flex;
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+		padding: 0;
+		gap: 0;
+
+		[data-slot='toggle-group'] {
+			width: 100%;
+			display: flex;
+		}
+
+		&-btn {
+			flex: 1;
+			height: 32px;
+			border-radius: 0;
+			font-size: var(--label-small-400-font-size);
+			font-weight: var(--label-small-400-font-weight);
+			line-height: var(--label-small-400-line-height);
+			justify-content: center;
+			background: transparent;
+			border: none;
+			border-right: 1px solid var(--border);
+			color: var(--foreground);
+
+			&:last-child {
+				border-right: none;
+			}
+
+			&[data-state='on'] {
+				background: var(--l2-background);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__datepicker {
+		width: 100%;
+		height: 32px;
+
+		.ant-picker {
+			background: var(--l2-background);
+			border-color: var(--border);
+			border-radius: 2px;
+			width: 100%;
+			height: 32px;
+
+			input {
+				color: var(--l1-foreground);
+				font-size: var(--font-size-sm);
+			}
+
+			.ant-picker-suffix {
+				color: var(--foreground);
+			}
+		}
+
+		.add-key-modal-datepicker-popup {
+			border-radius: 4px;
+			border: 1px solid var(--secondary);
+			background: var(--popover);
+			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	&__key-display {
+		display: flex;
+		align-items: center;
+		height: 32px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+	}
+
+	&__key-text {
+		flex: 1;
+		min-width: 0;
+		padding: 0 var(--padding-2);
+		font-size: var(--font-size-sm);
+		color: var(--l1-foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-family: monospace;
+	}
+
+	&__copy-btn {
+		flex-shrink: 0;
+		height: 32px;
+		border-radius: 0 2px 2px 0;
+		border-top: none;
+		border-right: none;
+		border-bottom: none;
+		border-left: 1px solid var(--border);
+		min-width: 40px;
+	}
+
+	&__expiry-meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__expiry-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--padding-4);
+		border-top: 1px solid var(--secondary);
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__learn-more {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-1);
+		color: var(--primary);
+		font-size: var(--font-size-sm);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}

frontend/src/components/ServiceAccountDrawer/AddKeyModal.tsx

@@ -0,0 +1,267 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Badge } from '@signozhq/badge';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
+import { DialogWrapper } from '@signozhq/dialog';
+import { Check, Copy } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { DatePicker } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCreateServiceAccountKey } from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import type { Dayjs } from 'dayjs';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { disabledDate } from './utils';
+
+import './AddKeyModal.styles.scss';
+
+interface AddKeyModalProps {
+	open: boolean;
+	accountId: string;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+type Phase = 'form' | 'created';
+type ExpiryMode = 'none' | 'date';
+
+function AddKeyModal({
+	open,
+	accountId,
+	onClose,
+	onSuccess,
+}: AddKeyModalProps): JSX.Element {
+	const [phase, setPhase] = useState<Phase>('form');
+	const [keyName, setKeyName] = useState('');
+	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
+	const [expiryDate, setExpiryDate] = useState<Dayjs | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [
+		createdKey,
+		setCreatedKey,
+	] = useState<ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO | null>(null);
+	const [hasCopied, setHasCopied] = useState(false);
+
+	useEffect(() => {
+		if (open) {
+			setPhase('form');
+			setKeyName('');
+			setExpiryMode('none');
+			setExpiryDate(null);
+			setIsSubmitting(false);
+			setCreatedKey(null);
+			setHasCopied(false);
+		}
+	}, [open]);
+
+	const { mutateAsync: createKey } = useCreateServiceAccountKey();
+
+	const handleCreate = useCallback(async (): Promise<void> => {
+		if (!keyName.trim()) {
+			return;
+		}
+		setIsSubmitting(true);
+		try {
+			const expiresAt =
+				expiryMode === 'date' && expiryDate ? expiryDate.endOf('day').unix() : 0;
+			const response = await createKey({
+				pathParams: { id: accountId },
+				data: { name: keyName.trim(), expiresAt },
+			});
+			const keyData = response?.data;
+			if (keyData) {
+				setCreatedKey(keyData);
+				setPhase('created');
+			}
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to create key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [keyName, expiryMode, expiryDate, accountId, createKey]);
+
+	const handleCopy = useCallback(async (): Promise<void> => {
+		if (!createdKey?.key) {
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(createdKey.key);
+			setHasCopied(true);
+			setTimeout(() => setHasCopied(false), 2000);
+			toast.success('Key copied to clipboard', { richColors: true });
+		} catch {
+			toast.error('Failed to copy key', { richColors: true });
+		}
+	}, [createdKey]);
+
+	const handleClose = useCallback((): void => {
+		if (phase === 'created') {
+			onSuccess();
+		}
+		onClose();
+	}, [phase, onSuccess, onClose]);
+
+	const expiryLabel = (): string => {
+		if (expiryMode === 'none' || !expiryDate) {
+			return 'Never';
+		}
+		try {
+			return expiryDate.format('MMM D, YYYY');
+		} catch {
+			return 'Never';
+		}
+	};
+
+	const title = phase === 'form' ? 'Add a New Key' : 'Key Created Successfully';
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			title={title}
+			width="base"
+			className="add-key-modal"
+			showCloseButton
+			disableOutsideClick={false}
+		>
+			{phase === 'form' && (
+				<>
+					<div className="add-key-modal__form">
+						<div className="add-key-modal__field">
+							<label className="add-key-modal__label" htmlFor="key-name">
+								Name <span style={{ color: 'var(--destructive)' }}>*</span>
+							</label>
+							<Input
+								id="key-name"
+								value={keyName}
+								onChange={(e): void => setKeyName(e.target.value)}
+								placeholder="Enter key name e.g.: Service Owner"
+								className="add-key-modal__input"
+							/>
+						</div>
+
+						<div className="add-key-modal__field">
+							<span className="add-key-modal__label">Expiration</span>
+							<ToggleGroup
+								type="single"
+								value={expiryMode}
+								onValueChange={(val): void => {
+									if (val) {
+										setExpiryMode(val as ExpiryMode);
+										if (val === 'none') {
+											setExpiryDate(null);
+										}
+									}
+								}}
+								className="add-key-modal__expiry-toggle"
+							>
+								<ToggleGroupItem
+									value="none"
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value="date"
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
+						</div>
+
+						{expiryMode === 'date' && (
+							<div className="add-key-modal__field">
+								<label className="add-key-modal__label" htmlFor="expiry-date">
+									Expiration Date
+								</label>
+								<div className="add-key-modal__datepicker">
+									<DatePicker
+										id="expiry-date"
+										value={expiryDate}
+										onChange={(date): void => setExpiryDate(date)}
+										popupClassName="add-key-modal-datepicker-popup"
+										getPopupContainer={popupContainer}
+										disabledDate={disabledDate}
+									/>
+								</div>
+							</div>
+						)}
+					</div>
+
+					<div className="add-key-modal__footer">
+						<div className="add-key-modal__footer-right">
+							<Button
+								variant="solid"
+								color="secondary"
+								size="sm"
+								onClick={handleClose}
+							>
+								Cancel
+							</Button>
+							<Button
+								variant="solid"
+								color="primary"
+								size="sm"
+								disabled={!keyName.trim() || isSubmitting}
+								onClick={handleCreate}
+							>
+								{isSubmitting ? 'Creating...' : 'Create Key'}
+							</Button>
+						</div>
+					</div>
+				</>
+			)}
+
+			{phase === 'created' && createdKey && (
+				<>
+					<div className="add-key-modal__form">
+						<div className="add-key-modal__field">
+							<span className="add-key-modal__label">Key</span>
+							<div className="add-key-modal__key-display">
+								<span className="add-key-modal__key-text">{createdKey.key}</span>
+								<Button
+									variant="outlined"
+									color="secondary"
+									size="sm"
+									onClick={handleCopy}
+									className="add-key-modal__copy-btn"
+								>
+									{hasCopied ? <Check size={12} /> : <Copy size={12} />}
+								</Button>
+							</div>
+						</div>
+
+						<div className="add-key-modal__expiry-meta">
+							<span className="add-key-modal__expiry-label">Expiration</span>
+							<Badge color="vanilla">{expiryLabel()}</Badge>
+						</div>
+
+						<Callout
+							type="info"
+							showIcon
+							message="Store the key securely. This is the only time it will be displayed."
+						/>
+					</div>
+				</>
+			)}
+		</DialogWrapper>
+	);
+}
+
+export default AddKeyModal;

frontend/src/components/ServiceAccountDrawer/EditKeyModal.styles.scss

@@ -0,0 +1,188 @@
+.edit-key-modal {
+	[data-slot='dialog-description'] {
+		padding: 0;
+	}
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		padding: var(--padding-4);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: 13px;
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__key-display {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 32px;
+		padding: 0 var(--padding-2);
+		border-radius: 2px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+		cursor: not-allowed;
+		opacity: 0.8;
+	}
+
+	&__key-text {
+		font-size: 13px;
+		font-family: monospace;
+		color: var(--foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+		letter-spacing: 2px;
+	}
+
+	&__lock-icon {
+		color: var(--foreground);
+		flex-shrink: 0;
+		margin-left: 6px;
+		opacity: 0.6;
+	}
+
+	&__expiry-toggle {
+		width: 60%;
+		display: flex;
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		overflow: hidden;
+		padding: 0;
+		gap: 0;
+
+		[data-slot='toggle-group'] {
+			width: 100%;
+			display: flex;
+		}
+
+		&-btn {
+			flex: 1;
+			height: 32px;
+			border-radius: 0;
+			font-size: var(--label-small-400-font-size);
+			font-weight: var(--label-small-400-font-weight);
+			line-height: var(--label-small-400-line-height);
+			justify-content: center;
+			background: transparent;
+			border: none;
+			border-right: 1px solid var(--border);
+			color: var(--foreground);
+			white-space: nowrap;
+
+			&:last-child {
+				border-right: none;
+			}
+
+			&[data-state='on'] {
+				background: var(--l2-background);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__datepicker {
+		width: 100%;
+		height: 32px;
+
+		.ant-picker {
+			background: var(--l2-background);
+			border-color: var(--border);
+			border-radius: 2px;
+			width: 100%;
+			height: 32px;
+
+			input {
+				color: var(--l1-foreground);
+				font-size: 13px;
+			}
+
+			.ant-picker-suffix {
+				color: var(--foreground);
+			}
+		}
+
+		.edit-key-modal-datepicker-popup {
+			border-radius: 4px;
+			border: 1px solid var(--secondary);
+			background: var(--popover);
+			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	&__meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__meta-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--padding-4);
+		border-top: 1px solid var(--secondary);
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__footer-danger {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		padding: 0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: var(--destructive);
+		font-size: var(--label-small-400-font-size);
+		font-weight: var(--label-small-400-font-weight);
+		transition: opacity 0.15s ease;
+
+		&:hover {
+			opacity: 0.8;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+}

frontend/src/components/ServiceAccountDrawer/EditKeyModal.tsx

@@ -0,0 +1,301 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Badge } from '@signozhq/badge';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { LockKeyhole, Trash2, X } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { DatePicker } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	useRevokeServiceAccountKey,
+	useUpdateServiceAccountKey,
+} from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesFactorAPIKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { useTimezone } from 'providers/Timezone';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { disabledDate, formatLastObservedAt } from './utils';
+
+import './EditKeyModal.styles.scss';
+
+interface EditKeyModalProps {
+	open: boolean;
+	accountId: string;
+	keyItem: ServiceaccounttypesFactorAPIKeyDTO | null;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+type ExpiryMode = 'none' | 'date';
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function EditKeyModal({
+	open,
+	accountId,
+	keyItem,
+	onClose,
+	onSuccess,
+}: EditKeyModalProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const [localName, setLocalName] = useState('');
+	const [expiryMode, setExpiryMode] = useState<ExpiryMode>('none');
+	const [localDate, setLocalDate] = useState<Dayjs | null>(null);
+	const [isRevokeConfirmOpen, setIsRevokeConfirmOpen] = useState(false);
+	const [isSaving, setIsSaving] = useState(false);
+	const [isRevoking, setIsRevoking] = useState(false);
+
+	useEffect(() => {
+		if (keyItem) {
+			setLocalName(keyItem.name ?? '');
+			if (keyItem.expiresAt === 0) {
+				setExpiryMode('none');
+				setLocalDate(null);
+			} else {
+				setExpiryMode('date');
+				setLocalDate(dayjs.unix(keyItem.expiresAt));
+			}
+		}
+	}, [keyItem]);
+
+	const originalExpiresAt = keyItem?.expiresAt ?? 0;
+	const currentExpiresAt =
+		expiryMode === 'none' || !localDate ? 0 : localDate.endOf('day').unix();
+	const isDirty =
+		keyItem !== null &&
+		(localName !== (keyItem.name ?? '') ||
+			currentExpiresAt !== originalExpiresAt);
+
+	const { mutateAsync: updateKey } = useUpdateServiceAccountKey();
+	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
+
+	const handleSave = useCallback(async (): Promise<void> => {
+		if (!keyItem || !isDirty) {
+			return;
+		}
+		setIsSaving(true);
+		try {
+			await updateKey({
+				pathParams: { id: accountId, fid: keyItem.id },
+				data: { name: localName, expiresAt: currentExpiresAt },
+			});
+			toast.success('Key updated successfully', { richColors: true });
+			onSuccess();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to update key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsSaving(false);
+		}
+	}, [
+		keyItem,
+		isDirty,
+		localName,
+		currentExpiresAt,
+		accountId,
+		updateKey,
+		onSuccess,
+	]);
+
+	const handleRevoke = useCallback(async (): Promise<void> => {
+		if (!keyItem) {
+			return;
+		}
+		setIsRevoking(true);
+		try {
+			await revokeKey({
+				pathParams: { id: accountId, fid: keyItem.id },
+			});
+			toast.success('Key revoked successfully', { richColors: true });
+			setIsRevokeConfirmOpen(false);
+			onSuccess();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to revoke key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsRevoking(false);
+		}
+	}, [keyItem, accountId, revokeKey, onSuccess]);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					if (isRevokeConfirmOpen) {
+						setIsRevokeConfirmOpen(false);
+					} else {
+						onClose();
+					}
+				}
+			}}
+			title={
+				isRevokeConfirmOpen
+					? `Revoke ${keyItem?.name ?? 'key'}?`
+					: 'Edit Key Details'
+			}
+			width={isRevokeConfirmOpen ? 'narrow' : 'base'}
+			className={
+				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
+			}
+			showCloseButton={!isRevokeConfirmOpen}
+			disableOutsideClick={false}
+		>
+			{isRevokeConfirmOpen ? (
+				<>
+					<p className="delete-dialog__body">
+						Revoking this key will permanently invalidate it. Any systems using this
+						key will lose access immediately.
+					</p>
+					<DialogFooter className="delete-dialog__footer">
+						<Button
+							variant="solid"
+							color="secondary"
+							size="sm"
+							onClick={(): void => setIsRevokeConfirmOpen(false)}
+						>
+							<X size={12} />
+							Cancel
+						</Button>
+						<Button
+							variant="solid"
+							color="destructive"
+							size="sm"
+							disabled={isRevoking}
+							onClick={handleRevoke}
+						>
+							<Trash2 size={12} />
+							{isRevoking ? 'Revoking...' : 'Revoke Key'}
+						</Button>
+					</DialogFooter>
+				</>
+			) : (
+				<>
+					<div className="edit-key-modal__form">
+						<div className="edit-key-modal__field">
+							<label className="edit-key-modal__label" htmlFor="edit-key-name">
+								Name
+							</label>
+							<Input
+								id="edit-key-name"
+								value={localName}
+								onChange={(e): void => setLocalName(e.target.value)}
+								className="edit-key-modal__input"
+								placeholder="Enter key name"
+							/>
+						</div>
+
+						<div className="edit-key-modal__field">
+							<label className="edit-key-modal__label" htmlFor="edit-key-display">
+								Key
+							</label>
+							<div id="edit-key-display" className="edit-key-modal__key-display">
+								<span className="edit-key-modal__key-text">********************</span>
+								<LockKeyhole size={12} className="edit-key-modal__lock-icon" />
+							</div>
+						</div>
+
+						<div className="edit-key-modal__field">
+							<span className="edit-key-modal__label">Expiration</span>
+							<ToggleGroup
+								type="single"
+								value={expiryMode}
+								onValueChange={(val): void => {
+									if (val) {
+										setExpiryMode(val as ExpiryMode);
+										if (val === 'none') {
+											setLocalDate(null);
+										}
+									}
+								}}
+								className="edit-key-modal__expiry-toggle"
+							>
+								<ToggleGroupItem
+									value="none"
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value="date"
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
+						</div>
+
+						{expiryMode === 'date' && (
+							<div className="edit-key-modal__field">
+								<label className="edit-key-modal__label" htmlFor="edit-key-datepicker">
+									Expiration Date
+								</label>
+								<div className="edit-key-modal__datepicker">
+									<DatePicker
+										value={localDate}
+										id="edit-key-datepicker"
+										onChange={(date): void => setLocalDate(date)}
+										popupClassName="edit-key-modal-datepicker-popup"
+										getPopupContainer={popupContainer}
+										disabledDate={disabledDate}
+									/>
+								</div>
+							</div>
+						)}
+
+						<div className="edit-key-modal__meta">
+							<span className="edit-key-modal__meta-label">Last Observed At</span>
+							<Badge color="vanilla">
+								{formatLastObservedAt(
+									keyItem?.lastObservedAt ?? null,
+									formatTimezoneAdjustedTimestamp,
+								)}
+							</Badge>
+						</div>
+					</div>
+
+					<div className="edit-key-modal__footer">
+						<Button
+							type="button"
+							className="edit-key-modal__footer-danger"
+							onClick={(): void => setIsRevokeConfirmOpen(true)}
+						>
+							<Trash2 size={12} />
+							Revoke Key
+						</Button>
+						<div className="edit-key-modal__footer-right">
+							<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+								<X size={12} />
+								Cancel
+							</Button>
+							<Button
+								variant="solid"
+								color="primary"
+								size="sm"
+								disabled={!isDirty || isSaving}
+								onClick={handleSave}
+							>
+								{isSaving ? 'Saving...' : 'Save Changes'}
+							</Button>
+						</div>
+					</div>
+				</>
+			)}
+		</DialogWrapper>
+	);
+}
+
+export default EditKeyModal;

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -0,0 +1,291 @@
+import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { Trash2, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { Skeleton, Table, Tooltip } from 'antd';
+import type { ColumnsType } from 'antd/es/table/interface';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useRevokeServiceAccountKey } from 'api/generated/services/serviceaccount';
+import type {
+	RenderErrorResponseDTO,
+	ServiceaccounttypesFactorAPIKeyDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import dayjs from 'dayjs';
+import { useTimezone } from 'providers/Timezone';
+
+import EditKeyModal from './EditKeyModal';
+import { formatLastObservedAt } from './utils';
+
+interface KeysTabProps {
+	accountId: string;
+	keys: ServiceaccounttypesFactorAPIKeyDTO[];
+	isLoading: boolean;
+	isDisabled?: boolean;
+	currentPage: number;
+	pageSize: number;
+	onRefetch: () => void;
+	onAddKeyClick: () => void;
+}
+
+function formatExpiry(expiresAt: number): JSX.Element {
+	if (expiresAt === 0) {
+		return <span className="keys-tab__expiry--never">Never</span>;
+	}
+	const expiryDate = dayjs.unix(expiresAt);
+	if (expiryDate.isBefore(dayjs())) {
+		return <span className="keys-tab__expiry--expired">Expired</span>;
+	}
+	return <span>{expiryDate.format('MMM D, YYYY')}</span>;
+}
+
+function KeysTab({
+	accountId,
+	keys,
+	isLoading,
+	isDisabled = false,
+	currentPage,
+	pageSize,
+	onRefetch,
+	onAddKeyClick,
+}: KeysTabProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const [
+		editKey,
+		setEditKey,
+	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
+	const [
+		revokeTarget,
+		setRevokeTarget,
+	] = useState<ServiceaccounttypesFactorAPIKeyDTO | null>(null);
+	const [isRevoking, setIsRevoking] = useState(false);
+
+	const { mutateAsync: revokeKey } = useRevokeServiceAccountKey();
+
+	const handleRevoke = useCallback(async (): Promise<void> => {
+		if (!revokeTarget) {
+			return;
+		}
+		setIsRevoking(true);
+		try {
+			await revokeKey({
+				pathParams: { id: accountId, fid: revokeTarget.id },
+			});
+			toast.success('Key revoked successfully', { richColors: true });
+			setRevokeTarget(null);
+			onRefetch();
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to revoke key';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsRevoking(false);
+		}
+	}, [revokeTarget, revokeKey, accountId, onRefetch]);
+
+	const handleKeySuccess = useCallback((): void => {
+		setEditKey(null);
+		onRefetch();
+	}, [onRefetch]);
+
+	const handleformatLastObservedAt = useCallback(
+		(lastObservedAt: Date | null | undefined): string =>
+			formatLastObservedAt(lastObservedAt, formatTimezoneAdjustedTimestamp),
+		[formatTimezoneAdjustedTimestamp],
+	);
+
+	const columns: ColumnsType<ServiceaccounttypesFactorAPIKeyDTO> = [
+		{
+			title: 'Name',
+			dataIndex: 'name',
+			key: 'name',
+			className: 'keys-tab__name-column',
+			sorter: (a, b): number => (a.name ?? '').localeCompare(b.name ?? ''),
+			render: (_, record): JSX.Element => (
+				<span className="keys-tab__name-text">{record.name ?? '—'}</span>
+			),
+		},
+		{
+			title: 'Expiry',
+			dataIndex: 'expiresAt',
+			key: 'expiry',
+			width: 160,
+			align: 'right' as const,
+			sorter: (a, b): number => {
+				const aVal = a.expiresAt === 0 ? Infinity : a.expiresAt;
+				const bVal = b.expiresAt === 0 ? Infinity : b.expiresAt;
+				return aVal - bVal;
+			},
+			render: (expiresAt: number): JSX.Element => formatExpiry(expiresAt),
+		},
+		{
+			title: 'Last Observed At',
+			dataIndex: 'lastObservedAt',
+			key: 'lastObservedAt',
+			width: 220,
+			align: 'right' as const,
+			sorter: (a, b): number => {
+				const aVal = a.lastObservedAt
+					? new Date(a.lastObservedAt).getTime()
+					: -Infinity;
+				const bVal = b.lastObservedAt
+					? new Date(b.lastObservedAt).getTime()
+					: -Infinity;
+				return aVal - bVal;
+			},
+			render: (lastObservedAt: Date | null | undefined): string =>
+				handleformatLastObservedAt(lastObservedAt),
+		},
+		{
+			title: '',
+			key: 'action',
+			width: 48,
+			align: 'right' as const,
+			render: (_, record): JSX.Element => (
+				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
+					<Button
+						variant="ghost"
+						size="xs"
+						color="destructive"
+						disabled={isDisabled}
+						onClick={(e): void => {
+							e.stopPropagation();
+							setRevokeTarget(record);
+						}}
+						className="keys-tab__revoke-btn"
+					>
+						<X size={12} />
+					</Button>
+				</Tooltip>
+			),
+		},
+	];
+
+	if (isLoading) {
+		return (
+			<div className="keys-tab__loading">
+				<Skeleton active paragraph={{ rows: 4 }} />
+			</div>
+		);
+	}
+
+	if (keys.length === 0) {
+		return (
+			<div className="keys-tab__empty">
+				<span className="keys-tab__empty-emoji" role="img" aria-label="searching">
+					🧐
+				</span>
+				<p className="keys-tab__empty-text">No keys. Start by creating one.</p>
+				<Button
+					type="button"
+					className="keys-tab__learn-more"
+					onClick={onAddKeyClick}
+					disabled={isDisabled}
+				>
+					+ Add your first key
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<Table<ServiceaccounttypesFactorAPIKeyDTO>
+				columns={columns}
+				dataSource={keys}
+				rowKey="id"
+				pagination={{
+					style: { display: 'none' },
+					current: currentPage,
+					pageSize,
+				}}
+				showSorterTooltip={false}
+				className={`keys-tab__table${
+					isDisabled ? ' keys-tab__table--disabled' : ''
+				}`}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'keys-tab__table-row--alt' : ''
+				}
+				onRow={(
+					record,
+				): {
+					onClick: () => void;
+					onKeyDown: (e: React.KeyboardEvent) => void;
+					role: string;
+					tabIndex: number;
+					'aria-label': string;
+				} => ({
+					onClick: (): void => {
+						if (!isDisabled) {
+							setEditKey(record);
+						}
+					},
+					onKeyDown: (e: React.KeyboardEvent): void => {
+						if ((e.key === 'Enter' || e.key === ' ') && !isDisabled) {
+							if (e.key === ' ') {
+								e.preventDefault();
+							}
+							setEditKey(record);
+						}
+					},
+					role: 'button',
+					tabIndex: 0,
+					'aria-label': `Edit key ${record.name || 'options'}`,
+				})}
+			/>
+
+			<DialogWrapper
+				open={revokeTarget !== null}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setRevokeTarget(null);
+					}
+				}}
+				title={`Revoke ${revokeTarget?.name ?? 'key'}?`}
+				width="narrow"
+				className="alert-dialog delete-dialog"
+				showCloseButton={false}
+				disableOutsideClick={false}
+			>
+				<p className="delete-dialog__body">
+					Revoking this key will permanently invalidate it. Any systems using this
+					key will lose access immediately.
+				</p>
+				<DialogFooter className="delete-dialog__footer">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setRevokeTarget(null)}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						size="sm"
+						disabled={isRevoking}
+						onClick={handleRevoke}
+					>
+						<Trash2 size={12} />
+						{isRevoking ? 'Revoking...' : 'Revoke Key'}
+					</Button>
+				</DialogFooter>
+			</DialogWrapper>
+
+			<EditKeyModal
+				open={editKey !== null}
+				accountId={accountId}
+				keyItem={editKey}
+				onClose={(): void => setEditKey(null)}
+				onSuccess={handleKeySuccess}
+			/>
+		</>
+	);
+}
+
+export default KeysTab;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -0,0 +1,154 @@
+import { useCallback } from 'react';
+import { Badge } from '@signozhq/badge';
+import { LockKeyhole } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import type { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import RolesSelect from 'components/RolesSelect';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+import { useTimezone } from 'providers/Timezone';
+import APIError from 'types/api/error';
+
+interface OverviewTabProps {
+	account: ServiceAccountRow;
+	localName: string;
+	onNameChange: (v: string) => void;
+	localRoles: string[];
+	onRolesChange: (v: string[]) => void;
+	isDisabled: boolean;
+	availableRoles: RoletypesRoleDTO[];
+	rolesLoading?: boolean;
+	rolesError?: boolean;
+	rolesErrorObj?: APIError | undefined;
+	onRefetchRoles?: () => void;
+}
+
+function OverviewTab({
+	account,
+	localName,
+	onNameChange,
+	localRoles,
+	onRolesChange,
+	isDisabled,
+	availableRoles,
+	rolesLoading,
+	rolesError,
+	rolesErrorObj,
+	onRefetchRoles,
+}: OverviewTabProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const formatTimestamp = useCallback(
+		(ts: string | null | undefined): string => {
+			if (!ts) {
+				return '—';
+			}
+			const d = new Date(ts);
+			if (Number.isNaN(d.getTime())) {
+				return '—';
+			}
+			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
+		},
+		[formatTimezoneAdjustedTimestamp],
+	);
+
+	return (
+		<>
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-name">
+					Name
+				</label>
+				{isDisabled ? (
+					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+						<span className="sa-drawer__input-text">{localName || '—'}</span>
+						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+					</div>
+				) : (
+					<Input
+						id="sa-name"
+						value={localName}
+						onChange={(e): void => onNameChange(e.target.value)}
+						className="sa-drawer__input"
+						placeholder="Enter name"
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-email">
+					Email Address
+				</label>
+				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+					<span className="sa-drawer__input-text">{account.email || '—'}</span>
+					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+				</div>
+			</div>
+
+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-roles">
+					Roles
+				</label>
+				{isDisabled ? (
+					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+						<div className="sa-drawer__disabled-roles">
+							{localRoles.length > 0 ? (
+								localRoles.map((r) => (
+									<Badge key={r} color="vanilla">
+										{r}
+									</Badge>
+								))
+							) : (
+								<span className="sa-drawer__input-text">—</span>
+							)}
+						</div>
+						<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+					</div>
+				) : (
+					<RolesSelect
+						id="sa-roles"
+						mode="multiple"
+						roles={availableRoles}
+						loading={rolesLoading}
+						isError={rolesError}
+						error={rolesErrorObj}
+						onRefetch={onRefetchRoles}
+						value={localRoles}
+						onChange={onRolesChange}
+						placeholder="Select roles"
+						className="sa-drawer__role-select"
+						getPopupContainer={(triggerNode): HTMLElement =>
+							(triggerNode?.closest('.sa-drawer') as HTMLElement) || document.body
+						}
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__meta">
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Status</span>
+					{account.status?.toUpperCase() === 'ACTIVE' ? (
+						<Badge color="forest" variant="outline">
+							ACTIVE
+						</Badge>
+					) : (
+						<Badge color="vanilla" variant="outline" className="sa-status-badge">
+							DISABLED
+						</Badge>
+					)}
+				</div>
+
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Created At</span>
+					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
+				</div>
+
+				<div className="sa-drawer__meta-item">
+					<span className="sa-drawer__meta-label">Updated At</span>
+					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default OverviewTab;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -0,0 +1,523 @@
+.sa-drawer {
+	[data-slot='drawer-close'] + div {
+		border-left: 1px solid var(--l1-border);
+		padding-left: var(--padding-4);
+		margin-left: var(--margin-2);
+	}
+
+	&__layout {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 48px);
+	}
+
+	&__tabs {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
+		flex-shrink: 0;
+	}
+
+	&__tab-group {
+		[data-slot='toggle-group'] {
+			height: 32px;
+			border-radius: 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+			gap: 0;
+		}
+
+		[data-slot='toggle-group-item'] {
+			height: 32px;
+			border-radius: 0;
+			border-left: 1px solid var(--l1-border);
+			background: transparent;
+			color: var(--l2-foreground);
+			font-size: 12px;
+			font-weight: 400;
+			font-family: Inter, sans-serif;
+			padding: 0 var(--padding-7);
+			gap: var(--spacing-3);
+			box-shadow: none;
+
+			&:first-child {
+				border-left: none;
+				border-radius: 2px 0 0 2px;
+			}
+
+			&:last-child {
+				border-radius: 0 2px 2px 0;
+			}
+
+			&:hover {
+				background: rgba(171, 189, 255, 0.04);
+				color: var(--l1-foreground);
+			}
+
+			&[data-state='on'] {
+				background: var(--l1-border);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	&__tab {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-2);
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-normal);
+	}
+
+	&__tab-count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 20px;
+		padding: 0 6px;
+		border-radius: 50px;
+		background: var(--secondary);
+		font-size: 11px;
+		font-weight: var(--font-weight-normal);
+		line-height: 20px;
+		color: var(--foreground);
+		letter-spacing: -0.06px;
+	}
+
+	&__body {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--padding-5) var(--padding-4);
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+	}
+
+	&__footer {
+		height: 56px;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--secondary);
+		background: var(--card);
+	}
+
+	&__keys-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		width: 100%;
+		padding: var(--padding-2) 0;
+
+		.ant-pagination-total-text {
+			margin-right: auto;
+		}
+	}
+
+	&__pagination-range {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		font-weight: var(--font-weight-normal);
+	}
+
+	&__pagination-total {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		opacity: 0.5;
+	}
+
+	&__footer-btn {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-6);
+	}
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-4);
+	}
+
+	&__label {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+		cursor: default;
+	}
+
+	&__input {
+		height: 32px;
+		background: var(--l2-background);
+		border-color: var(--border);
+		color: var(--l1-foreground);
+		box-shadow: none;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+	}
+
+	&__input-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 32px;
+		padding: 0 var(--padding-2);
+		border-radius: 2px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+
+		&--disabled {
+			cursor: not-allowed;
+			opacity: 0.8;
+		}
+	}
+
+	&__input-text {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		color: var(--foreground);
+		line-height: var(--line-height-18);
+		letter-spacing: -0.07px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+	}
+
+	&__lock-icon {
+		color: var(--foreground);
+		flex-shrink: 0;
+		margin-left: 6px;
+		opacity: 0.6;
+	}
+
+	&__role-select {
+		width: 100%;
+		min-height: 32px;
+
+		.ant-select-selector {
+			background-color: var(--l2-background) !important;
+			border-color: var(--border) !important;
+			border-radius: 2px;
+			padding: 2px var(--padding-2) !important;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			min-height: 32px;
+		}
+
+		.ant-select-selection-overflow {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 2px;
+			padding: 2px 0;
+		}
+
+		.ant-select-selection-overflow-item {
+			display: flex;
+			align-items: center;
+		}
+
+		.ant-select-selection-item {
+			display: flex;
+			align-items: center;
+			height: 22px;
+			font-size: var(--font-size-sm);
+			color: var(--l1-foreground);
+			background: var(--l3-background);
+			border: 1px solid var(--border);
+			border-radius: 2px;
+			padding: 0 4px 0 6px;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+			margin: 0;
+		}
+
+		.ant-select-selection-item-remove {
+			display: flex;
+			align-items: center;
+			color: var(--foreground);
+			margin-left: 2px;
+		}
+
+		.ant-select-selection-placeholder {
+			font-size: var(--font-size-sm);
+			color: var(--l3-foreground);
+		}
+
+		.ant-select-arrow {
+			color: var(--foreground);
+		}
+
+		&:not(.ant-select-disabled):hover .ant-select-selector {
+			border-color: var(--foreground);
+		}
+	}
+
+	&__disabled-roles {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-2);
+	}
+
+	&__meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		margin-top: var(--margin-1);
+	}
+
+	&__meta-item {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+
+		[data-slot='badge'] {
+			padding: var(--padding-1) var(--padding-2);
+			align-items: center;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			line-height: 100%;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+		}
+	}
+
+	&__meta-label {
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-medium);
+		color: var(--foreground);
+		line-height: var(--line-height-20);
+		letter-spacing: 0.48px;
+		text-transform: uppercase;
+	}
+}
+
+.keys-tab {
+	&__loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding-8) var(--padding-4);
+	}
+
+	&__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding-8) var(--padding-4);
+		gap: var(--spacing-4);
+		text-align: center;
+		height: 80%;
+	}
+
+	&__empty-emoji {
+		font-size: 32px;
+	}
+
+	&__empty-text {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		margin: 0;
+	}
+
+	&__learn-more {
+		background: transparent;
+		border: none;
+		color: var(--primary);
+		font-size: var(--font-size-sm);
+		cursor: pointer;
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	&__table {
+		.ant-table {
+			background: transparent;
+			border: 1px solid var(--l1-border);
+			border-radius: 4px;
+			overflow: hidden;
+		}
+
+		.ant-table-thead > tr > th,
+		.ant-table-thead > tr > td {
+			height: 38px;
+			padding: 0 var(--padding-4);
+			background: transparent !important;
+			border-bottom: 1px solid var(--l1-border) !important;
+			font-size: 11px;
+			font-weight: var(--font-weight-medium);
+			color: var(--l2-foreground);
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+
+			&::before {
+				display: none !important;
+			}
+
+			.ant-table-column-sorter {
+				color: var(--l2-foreground);
+				opacity: 0.5;
+			}
+
+			&.ant-table-column-sort {
+				background: transparent !important;
+				color: var(--l1-foreground);
+
+				.ant-table-column-sorter {
+					color: var(--l1-foreground);
+					opacity: 1;
+				}
+			}
+
+			&:hover {
+				background: transparent !important;
+				color: var(--l1-foreground);
+
+				.ant-table-column-sorter {
+					opacity: 1;
+				}
+			}
+		}
+
+		.ant-table-tbody > tr > td {
+			height: 38px;
+			padding: 0 var(--padding-4);
+			border-bottom: 1px solid var(--l1-border);
+			font-size: 13px;
+			font-weight: var(--font-weight-normal);
+			color: var(--l2-foreground);
+			letter-spacing: -0.07px;
+			cursor: pointer;
+			background: transparent;
+			transition: none;
+			font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
+				slashed-zero;
+
+			&.ant-table-column-sort {
+				background: transparent;
+			}
+		}
+
+		.ant-table-tbody > tr:last-child > td {
+			border-bottom: none;
+		}
+
+		.ant-table-tbody > tr {
+			background: transparent;
+
+			&:hover > td {
+				background: rgba(171, 189, 255, 0.06) !important;
+			}
+
+			&.keys-tab__table-row--alt > td {
+				background: rgba(171, 189, 255, 0.02);
+
+				&:hover {
+					background: rgba(171, 189, 255, 0.06) !important;
+				}
+			}
+		}
+
+		&--disabled {
+			.ant-table-tbody > tr {
+				cursor: not-allowed;
+				opacity: 0.6;
+
+				&:hover > td {
+					background: transparent !important;
+				}
+			}
+		}
+
+		.ant-table-cell-row-hover {
+			background: transparent !important;
+		}
+	}
+
+	&__name-column {
+		.ant-table-column-sorters {
+			justify-content: flex-start;
+			gap: var(--spacing-2);
+		}
+
+		.ant-table-column-title {
+			flex: none;
+		}
+	}
+
+	&__name-text {
+		font-size: 13px;
+		font-weight: var(--font-weight-normal);
+		color: var(--l2-foreground);
+		letter-spacing: -0.07px;
+		text-transform: none;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__expiry--never {
+		color: var(--l2-foreground);
+	}
+
+	&__expiry--expired {
+		color: var(--l3-foreground);
+	}
+
+	&__revoke-btn {
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.sa-disable-dialog {
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+
+	[data-slot='dialog-title'] {
+		color: var(--l1-foreground);
+	}
+
+	&__body {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--l2-foreground);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.065px;
+		margin: 0;
+
+		strong {
+			font-weight: var(--font-weight-medium);
+			color: var(--l1-foreground);
+		}
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--spacing-4);
+		margin-top: var(--margin-6);
+	}
+}

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -0,0 +1,360 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { DrawerWrapper } from '@signozhq/drawer';
+import { Key, LayoutGrid, Plus, PowerOff, Trash2, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Pagination } from 'antd';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	useListServiceAccountKeys,
+	useUpdateServiceAccount,
+	useUpdateServiceAccountStatus,
+} from 'api/generated/services/serviceaccount';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { useRoles } from 'components/RolesSelect';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+
+import AddKeyModal from './AddKeyModal';
+import KeysTab from './KeysTab';
+import OverviewTab from './OverviewTab';
+
+import './ServiceAccountDrawer.styles.scss';
+
+export interface ServiceAccountDrawerProps {
+	account: ServiceAccountRow | null;
+	open: boolean;
+	onClose: () => void;
+	onSuccess: (options?: { closeDrawer?: boolean }) => void;
+}
+
+const PAGE_SIZE = 15;
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function ServiceAccountDrawer({
+	account,
+	open,
+	onClose,
+	onSuccess,
+}: ServiceAccountDrawerProps): JSX.Element {
+	const [activeTab, setActiveTab] = useState<'overview' | 'keys'>('overview');
+	const [isDisableConfirmOpen, setIsDisableConfirmOpen] = useState(false);
+	const [localName, setLocalName] = useState('');
+	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [isSaving, setIsSaving] = useState(false);
+	const [isDisabling, setIsDisabling] = useState(false);
+	const [isAddKeyOpen, setIsAddKeyOpen] = useState(false);
+	const [keysPage, setKeysPage] = useState(1);
+
+	useEffect(() => {
+		if (account) {
+			setLocalName(account.name ?? '');
+			setLocalRoles(account.roles ?? []);
+			setActiveTab('overview');
+			setKeysPage(1);
+		}
+	}, [account]);
+
+	const isDisabled = account?.status?.toUpperCase() !== 'ACTIVE';
+
+	const isDirty =
+		account !== null &&
+		(localName !== (account.name ?? '') ||
+			JSON.stringify(localRoles) !== JSON.stringify(account.roles ?? []));
+
+	const {
+		roles: availableRoles,
+		isLoading: rolesLoading,
+		isError: rolesError,
+		error: rolesErrorObj,
+		refetch: refetchRoles,
+	} = useRoles();
+
+	const {
+		data: keysData,
+		isLoading: keysLoading,
+		refetch: refetchKeys,
+	} = useListServiceAccountKeys(
+		{ id: account?.id ?? '' },
+		{ query: { enabled: !!account?.id } },
+	);
+	const keys = keysData?.data ?? [];
+
+	useEffect(() => {
+		if (keysLoading) {
+			return;
+		}
+		const maxPage = Math.max(1, Math.ceil(keys.length / PAGE_SIZE));
+		if (keysPage > maxPage) {
+			setKeysPage(maxPage);
+		}
+	}, [keysLoading, keys.length, keysPage]);
+
+	const { mutateAsync: updateAccount } = useUpdateServiceAccount();
+	const { mutateAsync: updateStatus } = useUpdateServiceAccountStatus();
+
+	const handleSave = useCallback(async (): Promise<void> => {
+		if (!account || !isDirty) {
+			return;
+		}
+		setIsSaving(true);
+		try {
+			await updateAccount({
+				pathParams: { id: account.id },
+				data: { name: localName, email: account.email, roles: localRoles },
+			});
+			toast.success('Service account updated successfully', { richColors: true });
+			onSuccess({ closeDrawer: false });
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to update service account';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsSaving(false);
+		}
+	}, [account, isDirty, localName, localRoles, updateAccount, onSuccess]);
+
+	const handleDisable = useCallback(async (): Promise<void> => {
+		if (!account) {
+			return;
+		}
+		setIsDisabling(true);
+		try {
+			await updateStatus({
+				pathParams: { id: account.id },
+				data: { status: 'DISABLED' },
+			});
+			toast.success('Service account disabled', { richColors: true });
+			setIsDisableConfirmOpen(false);
+			onSuccess({ closeDrawer: true });
+		} catch (error: unknown) {
+			const errMessage =
+				convertToApiError(
+					error as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				)?.getErrorMessage() || 'Failed to disable service account';
+			toast.error(errMessage, { richColors: true });
+		} finally {
+			setIsDisabling(false);
+		}
+	}, [account, updateStatus, onSuccess]);
+
+	const handleClose = useCallback((): void => {
+		setIsDisableConfirmOpen(false);
+		setIsAddKeyOpen(false);
+		onClose();
+	}, [onClose]);
+
+	const handleKeySuccess = useCallback((): void => {
+		setIsAddKeyOpen(false);
+		refetchKeys();
+	}, [refetchKeys]);
+
+	const drawerContent = (
+		<div className="sa-drawer__layout">
+			<div className="sa-drawer__tabs">
+				<ToggleGroup
+					type="single"
+					value={activeTab}
+					onValueChange={(val): void => {
+						if (val) {
+							setActiveTab(val as 'overview' | 'keys');
+						}
+					}}
+					className="sa-drawer__tab-group"
+				>
+					<ToggleGroupItem value="overview" className="sa-drawer__tab">
+						<LayoutGrid size={14} />
+						Overview
+					</ToggleGroupItem>
+					<ToggleGroupItem value="keys" className="sa-drawer__tab">
+						<Key size={14} />
+						Keys
+						{keys.length > 0 && (
+							<span className="sa-drawer__tab-count">{keys.length}</span>
+						)}
+					</ToggleGroupItem>
+				</ToggleGroup>
+				{activeTab === 'keys' && (
+					<Button
+						variant="outlined"
+						size="sm"
+						color="secondary"
+						disabled={isDisabled}
+						onClick={(): void => setIsAddKeyOpen(true)}
+					>
+						<Plus size={12} />
+						Add Key
+					</Button>
+				)}
+			</div>
+
+			<div
+				className={`sa-drawer__body${
+					activeTab === 'keys' ? ' sa-drawer__body--keys' : ''
+				}`}
+			>
+				{activeTab === 'overview' && account && (
+					<OverviewTab
+						account={account}
+						localName={localName}
+						onNameChange={setLocalName}
+						localRoles={localRoles}
+						onRolesChange={setLocalRoles}
+						isDisabled={isDisabled}
+						availableRoles={availableRoles}
+						rolesLoading={rolesLoading}
+						rolesError={rolesError}
+						rolesErrorObj={rolesErrorObj}
+						onRefetchRoles={refetchRoles}
+					/>
+				)}
+				{activeTab === 'keys' && account && (
+					<KeysTab
+						accountId={account.id}
+						keys={keys}
+						isLoading={keysLoading}
+						isDisabled={isDisabled}
+						currentPage={keysPage}
+						pageSize={PAGE_SIZE}
+						onRefetch={refetchKeys}
+						onAddKeyClick={(): void => setIsAddKeyOpen(true)}
+					/>
+				)}
+			</div>
+
+			<div className="sa-drawer__footer">
+				{activeTab === 'keys' ? (
+					<Pagination
+						current={keysPage}
+						pageSize={PAGE_SIZE}
+						total={keys.length}
+						showTotal={(total: number, range: number[]): JSX.Element => (
+							<>
+								<span className="sa-drawer__pagination-range">
+									{range[0]} &#8212; {range[1]}
+								</span>
+								<span className="sa-drawer__pagination-total"> of {total}</span>
+							</>
+						)}
+						showSizeChanger={false}
+						hideOnSinglePage
+						onChange={(page): void => setKeysPage(page)}
+						className="sa-drawer__keys-pagination"
+					/>
+				) : (
+					<>
+						{!isDisabled && (
+							<Button
+								variant="ghost"
+								color="destructive"
+								className="sa-drawer__footer-btn"
+								onClick={(): void => setIsDisableConfirmOpen(true)}
+							>
+								<PowerOff size={12} />
+								Disable Service Account
+							</Button>
+						)}
+						{!isDisabled && (
+							<div className="sa-drawer__footer-right">
+								<Button
+									variant="solid"
+									color="secondary"
+									size="sm"
+									onClick={handleClose}
+								>
+									<X size={14} />
+									Cancel
+								</Button>
+								<Button
+									variant="solid"
+									color="primary"
+									size="sm"
+									disabled={!isDirty || isSaving}
+									onClick={handleSave}
+								>
+									{isSaving ? 'Saving...' : 'Save Changes'}
+								</Button>
+							</div>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
+
+	return (
+		<>
+			<DrawerWrapper
+				open={open}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						handleClose();
+					}
+				}}
+				direction="right"
+				type="panel"
+				showCloseButton
+				showOverlay={false}
+				allowOutsideClick
+				header={{ title: 'Service Account Details' }}
+				content={drawerContent}
+				className="sa-drawer"
+			/>
+
+			<DialogWrapper
+				open={isDisableConfirmOpen}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setIsDisableConfirmOpen(false);
+					}
+				}}
+				title={`Disable service account ${account?.name ?? ''}?`}
+				width="narrow"
+				className="alert-dialog sa-disable-dialog"
+				showCloseButton={false}
+				disableOutsideClick={false}
+			>
+				<p className="sa-disable-dialog__body">
+					Disabling this service account will revoke access for all its keys. Any
+					systems using this account will lose access immediately.
+				</p>
+				<DialogFooter className="sa-disable-dialog__footer">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setIsDisableConfirmOpen(false)}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						size="sm"
+						disabled={isDisabling}
+						onClick={handleDisable}
+					>
+						<Trash2 size={12} />
+						{isDisabling ? 'Disabling...' : 'Disable'}
+					</Button>
+				</DialogFooter>
+			</DialogWrapper>
+
+			{account && (
+				<AddKeyModal
+					open={isAddKeyOpen}
+					accountId={account.id}
+					onClose={(): void => setIsAddKeyOpen(false)}
+					onSuccess={handleKeySuccess}
+				/>
+			)}
+		</>
+	);
+}
+
+export default ServiceAccountDrawer;

frontend/src/components/ServiceAccountDrawer/utils.ts

@@ -0,0 +1,28 @@
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+export function formatLastObservedAt(
+	lastObservedAt: string | Date | null | undefined,
+	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string,
+): string {
+	if (!lastObservedAt) {
+		return '—';
+	}
+	const str =
+		typeof lastObservedAt === 'string'
+			? lastObservedAt
+			: lastObservedAt.toISOString();
+	// Go zero time means the key has never been used
+	if (str.startsWith('0001-01-01')) {
+		return '—';
+	}
+	const d = new Date(str);
+	if (Number.isNaN(d.getTime())) {
+		return '—';
+	}
+	return formatTimezoneAdjustedTimestamp(str, DATE_TIME_FORMATS.DASH_DATETIME);
+}
+
+export const disabledDate = (current: Dayjs): boolean =>
+	!!current && current < dayjs().startOf('day');

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -0,0 +1,218 @@
+.sa-table-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.sa-table {
+	.ant-table {
+		background: transparent;
+		font-size: 13px;
+	}
+
+	.ant-table-container {
+		border-radius: 0 !important;
+		border: none !important;
+	}
+
+	.ant-table-thead {
+		> tr > th,
+		> tr > td {
+			background: var(--background);
+			font-size: var(--paragraph-small-600-font-size);
+			font-weight: var(--paragraph-small-600-font-weight);
+			line-height: var(--paragraph-small-600-line-height);
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+			color: var(--foreground);
+			padding: var(--padding-2) var(--padding-4);
+			border-bottom: none !important;
+			border-top: none !important;
+
+			&::before {
+				display: none !important;
+			}
+		}
+	}
+
+	.ant-table-tbody {
+		> tr > td {
+			border-bottom: none !important;
+			padding: var(--padding-2) var(--padding-4);
+			background: transparent;
+			transition: none;
+		}
+
+		> tr.sa-table-row--tinted > td {
+			background: rgba(171, 189, 255, 0.02);
+		}
+
+		> tr:hover > td {
+			background: rgba(171, 189, 255, 0.04) !important;
+		}
+	}
+
+	.ant-table-wrapper,
+	.ant-table-container,
+	.ant-spin-nested-loading,
+	.ant-spin-container {
+		border: none !important;
+		box-shadow: none !important;
+	}
+
+	.sa-name-column {
+		.ant-table-column-sorters {
+			justify-content: flex-start;
+			gap: var(--spacing-2);
+		}
+
+		.ant-table-column-title {
+			flex: none;
+		}
+	}
+
+	.sa-status-cell {
+		[data-slot='badge'] {
+			padding: var(--padding-1) var(--padding-2);
+			align-items: center;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			line-height: 100%;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+		}
+	}
+}
+
+.sa-name-email-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	height: 22px;
+	overflow: hidden;
+
+	.sa-name {
+		font-size: var(--paragraph-base-500-font-size);
+		font-weight: var(--paragraph-base-500-font-weight);
+		color: var(--foreground);
+		line-height: var(--paragraph-base-500-line-height);
+		letter-spacing: -0.07px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.sa-email {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--l3-foreground-hover);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.07px;
+		flex: 1 0 0;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.sa-roles-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.sa-dash {
+	font-size: var(--paragraph-base-400-font-size);
+	color: var(--l3-foreground-hover);
+}
+
+.sa-empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--padding-12) var(--padding-4);
+	gap: var(--spacing-4);
+	color: var(--foreground);
+
+	&__emoji {
+		font-size: var(--font-size-2xl);
+		line-height: 1;
+	}
+
+	&__text {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		margin: 0;
+		line-height: var(--paragraph-base-400-line-height);
+
+		strong {
+			font-weight: var(--font-weight-medium);
+			color: var(--bg-base-white);
+		}
+	}
+}
+
+.sa-table-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: var(--padding-2) var(--padding-4);
+
+	.ant-pagination-total-text {
+		margin-right: auto;
+	}
+
+	.sa-pagination-range {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+	}
+
+	.sa-pagination-total {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		opacity: 0.5;
+	}
+}
+
+.sa-tooltip {
+	.ant-tooltip-inner {
+		background-color: var(--bg-slate-500);
+		color: var(--foreground);
+		font-size: var(--font-size-xs);
+		line-height: normal;
+		padding: var(--padding-2) var(--padding-3);
+		border-radius: 4px;
+		text-align: left;
+	}
+
+	.ant-tooltip-arrow-content {
+		background-color: var(--bg-slate-500);
+	}
+}
+
+.lightMode {
+	.sa-table {
+		.ant-table-tbody {
+			> tr.sa-table-row--tinted > td {
+				background: rgba(0, 0, 0, 0.015);
+			}
+
+			> tr:hover > td {
+				background: rgba(0, 0, 0, 0.03) !important;
+			}
+		}
+	}
+
+	.sa-empty-state {
+		&__text {
+			strong {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Badge } from '@signozhq/badge';
+import { Pagination, Table, Tooltip } from 'antd';
+import type { ColumnsType } from 'antd/es/table/interface';
+import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+
+import './ServiceAccountsTable.styles.scss';
+
+interface ServiceAccountsTableProps {
+	data: ServiceAccountRow[];
+	loading: boolean;
+	total: number;
+	currentPage: number;
+	pageSize: number;
+	searchQuery: string;
+	onPageChange: (page: number) => void;
+	onRowClick?: (row: ServiceAccountRow) => void;
+}
+
+function NameEmailCell({
+	name,
+	email,
+}: {
+	name: string;
+	email: string;
+}): JSX.Element {
+	return (
+		<div className="sa-name-email-cell">
+			{name && (
+				<span className="sa-name" title={name}>
+					{name}
+				</span>
+			)}
+			<Tooltip title={email} overlayClassName="sa-tooltip">
+				<span className="sa-email">{email}</span>
+			</Tooltip>
+		</div>
+	);
+}
+
+function RolesCell({ roles }: { roles: string[] }): JSX.Element {
+	if (!roles || roles.length === 0) {
+		return <span className="sa-dash">—</span>;
+	}
+	const first = roles[0];
+	const overflow = roles.length - 1;
+	const tooltipContent = roles.slice(1).join(', ');
+
+	return (
+		<div className="sa-roles-cell">
+			<Badge color="vanilla">{first}</Badge>
+			{overflow > 0 && (
+				<Tooltip
+					title={tooltipContent}
+					overlayClassName="sa-tooltip"
+					overlayStyle={{ maxWidth: '600px' }}
+				>
+					<Badge color="vanilla" variant="outline" className="sa-status-badge">
+						+{overflow}
+					</Badge>
+				</Tooltip>
+			)}
+		</div>
+	);
+}
+
+function StatusBadge({ status }: { status: string }): JSX.Element {
+	if (status?.toUpperCase() === 'ACTIVE') {
+		return (
+			<Badge color="forest" variant="outline">
+				ACTIVE
+			</Badge>
+		);
+	}
+	return (
+		<Badge color="vanilla" variant="outline" className="sa-status-badge">
+			DISABLED
+		</Badge>
+	);
+}
+
+function ServiceAccountsEmptyState({
+	searchQuery,
+}: {
+	searchQuery: string;
+}): JSX.Element {
+	return (
+		<div className="sa-empty-state">
+			<span className="sa-empty-state__emoji" role="img" aria-label="monocle face">
+				🧐
+			</span>
+			{searchQuery ? (
+				<p className="sa-empty-state__text">
+					No results for <strong>{searchQuery}</strong>
+				</p>
+			) : (
+				<p className="sa-empty-state__text">
+					No service accounts. Start by creating one to manage keys.
+				</p>
+			)}
+		</div>
+	);
+}
+
+function ServiceAccountsTable({
+	data,
+	loading,
+	total,
+	currentPage,
+	pageSize,
+	searchQuery,
+	onPageChange,
+	onRowClick,
+}: ServiceAccountsTableProps): JSX.Element {
+	const columns: ColumnsType<ServiceAccountRow> = [
+		{
+			title: 'Name / Email',
+			dataIndex: 'name',
+			key: 'name',
+			className: 'sa-name-column',
+			sorter: (a, b): number => a.email.localeCompare(b.email),
+			render: (_, record): JSX.Element => (
+				<NameEmailCell name={record.name} email={record.email} />
+			),
+		},
+		{
+			title: 'Roles',
+			dataIndex: 'roles',
+			key: 'roles',
+			width: 420,
+			render: (roles: string[]): JSX.Element => <RolesCell roles={roles} />,
+		},
+		{
+			title: 'Status',
+			dataIndex: 'status',
+			key: 'status',
+			width: 120,
+			align: 'right' as const,
+			className: 'sa-status-cell',
+			sorter: (a, b): number =>
+				(a.status?.toUpperCase() === 'ACTIVE' ? 0 : 1) -
+				(b.status?.toUpperCase() === 'ACTIVE' ? 0 : 1),
+			render: (status: string): JSX.Element => <StatusBadge status={status} />,
+		},
+	];
+
+	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
+		<>
+			<span className="sa-pagination-range">
+				{range[0]} &#8212; {range[1]}
+			</span>
+			<span className="sa-pagination-total"> of {_total}</span>
+		</>
+	);
+
+	return (
+		<div className="sa-table-wrapper">
+			<Table<ServiceAccountRow>
+				columns={columns}
+				dataSource={data}
+				rowKey="id"
+				loading={loading}
+				pagination={false}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'sa-table-row--tinted' : ''
+				}
+				showSorterTooltip={false}
+				locale={{
+					emptyText: <ServiceAccountsEmptyState searchQuery={searchQuery} />,
+				}}
+				className="sa-table"
+				onRow={(
+					record,
+				): {
+					onClick?: () => void;
+					onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+					style?: React.CSSProperties;
+					tabIndex?: number;
+					role?: string;
+					'aria-label'?: string;
+				} => {
+					if (!onRowClick) {
+						return {};
+					}
+
+					return {
+						onClick: (): void => onRowClick(record),
+						onKeyDown: (e: React.KeyboardEvent<HTMLElement>): void => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								onRowClick(record);
+							}
+						},
+						style: { cursor: 'pointer' },
+						tabIndex: 0,
+						role: 'button',
+						'aria-label': `View service account ${record.name || record.email}`,
+					};
+				}}
+			/>
+			{total > pageSize && (
+				<Pagination
+					current={currentPage}
+					pageSize={pageSize}
+					total={total}
+					showTotal={showPaginationTotal}
+					showSizeChanger={false}
+					onChange={onPageChange}
+					className="sa-table-pagination"
+				/>
+			)}
+		</div>
+	);
+}
+
+export default ServiceAccountsTable;

frontend/src/constants/localStorage.ts

@@ -35,4 +35,5 @@ export enum LOCALSTORAGE {
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
+	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 }

frontend/src/constants/routes.ts

@@ -86,6 +86,7 @@ const ROUTES = {
 	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
+	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',
 } as const;
 
 export default ROUTES;

frontend/src/container/Home/Home.tsx

@@ -6,8 +6,10 @@ import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import listUserPreferences from 'api/v1/user/preferences/list';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
+import AnnouncementBanner from 'components/AnnouncementBanner';
 import Header from 'components/Header/Header';
 import { ENTITY_VERSION_V5 } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -289,6 +291,16 @@ export default function Home(): JSX.Element {
 
 	return (
 		<div className="home-container">
+			<AnnouncementBanner
+				type="warning"
+				storageKey={LOCALSTORAGE.DISMISSED_API_KEYS_DEPRECATION_BANNER}
+				message={`<strong>API Keys</strong> have been deprecated and replaced by <strong>Service Accounts</strong>. Please migrate to Service Accounts for programmatic API access.`}
+				action={{
+					label: 'Go to Service Accounts',
+					onClick: (): void => history.push(ROUTES.SERVICE_ACCOUNTS_SETTINGS),
+				}}
+			/>
+
 			<div className="sticky-header">
 				<Header
 					leftComponent={

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -13,6 +13,7 @@ import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useAppContext } from 'providers/App/App';
+import { toISOString } from 'utils/app';
 
 import { FilterMode, INVITE_PREFIX, MemberStatus } from './utils';
 
@@ -61,8 +62,8 @@ function MembersSettings(): JSX.Element {
 			email: user.email,
 			role: user.role,
 			status: MemberStatus.Active,
-			joinedOn: user.createdAt ? String(user.createdAt) : null,
-			updatedAt: user?.updatedAt ? String(user.updatedAt) : null,
+			joinedOn: toISOString(user.createdAt),
+			updatedAt: toISOString(user?.updatedAt),
 		}));
 
 		const pendingInvites: MemberRow[] = (invitesData?.data ?? []).map(
@@ -72,7 +73,7 @@ function MembersSettings(): JSX.Element {
 				email: invite.email,
 				role: invite.role,
 				status: MemberStatus.Invited,
-				joinedOn: invite.createdAt ? String(invite.createdAt) : null,
+				joinedOn: toISOString(invite.createdAt),
 				token: invite.token ?? null,
 			}),
 		);
@@ -119,7 +120,7 @@ function MembersSettings(): JSX.Element {
 			return;
 		}
 		const maxPage = Math.ceil(filteredMembers.length / PAGE_SIZE);
-		if (currentPage > maxPage) {
+		if (currentPage > maxPage || currentPage < 1) {
 			setPage(maxPage);
 		}
 	}, [filteredMembers.length, currentPage, setPage]);
@@ -209,6 +210,7 @@ function MembersSettings(): JSX.Element {
 
 					<div className="members-settings__search">
 						<Input
+							type="search"
 							placeholder="Search by name, email, or role..."
 							value={searchQuery}
 							onChange={(e): void => {
@@ -217,6 +219,7 @@ function MembersSettings(): JSX.Element {
 							}}
 							className="members-search-input"
 							color="secondary"
+							name="members-search"
 						/>
 					</div>
 

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.styles.scss

@@ -0,0 +1,134 @@
+.sa-settings {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
+	height: 100%;
+
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__title {
+		font-size: var(--label-large-500-font-size);
+		font-weight: var(--label-large-500-font-weight);
+		color: var(--text-base-white);
+		letter-spacing: -0.09px;
+		line-height: var(--line-height-normal);
+		margin: 0;
+	}
+
+	&__subtitle {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--foreground);
+		letter-spacing: -0.07px;
+		line-height: var(--paragraph-base-400-line-height);
+		margin: 0;
+	}
+
+	&__learn-more {
+		color: var(--primary);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	&__controls {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__search {
+		flex: 1;
+		min-width: 0;
+	}
+}
+
+.sa-status-badge {
+	color: var(--l3-foreground);
+	border-color: var(--border);
+}
+
+.sa-settings-filter-trigger {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	border: 1px solid var(--border);
+	border-radius: 2px;
+	background-color: var(--l2-background);
+
+	> span {
+		color: var(--foreground);
+	}
+
+	&__chevron {
+		flex-shrink: 0;
+		color: var(--foreground);
+	}
+}
+
+.sa-settings-filter-dropdown {
+	.ant-dropdown-menu {
+		padding: var(--padding-3) 14px;
+		border-radius: 4px;
+		border: 1px solid var(--border);
+		background: var(--l2-background);
+		backdrop-filter: blur(20px);
+	}
+
+	.ant-dropdown-menu-item {
+		background: transparent !important;
+		padding: var(--padding-1) 0 !important;
+
+		&:hover {
+			background: transparent !important;
+		}
+	}
+}
+
+.sa-settings-filter-option {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	color: var(--foreground);
+	letter-spacing: 0.14px;
+	min-width: 170px;
+
+	&:hover {
+		color: var(--card-foreground);
+		background: transparent;
+	}
+}
+
+.sa-settings-search-input {
+	height: 32px;
+	color: var(--l1-foreground);
+	background-color: var(--l2-background);
+	border-color: var(--border);
+
+	&::placeholder {
+		color: var(--l3-foreground);
+	}
+}
+
+.lightMode {
+	.sa-settings {
+		&__title {
+			color: var(--text-base-black);
+		}
+	}
+
+	.sa-settings-filter-option {
+		&:hover {
+			color: var(--bg-neutral-light-100);
+		}
+	}
+}

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -0,0 +1,317 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Button } from '@signozhq/button';
+import { Check, ChevronDown, Plus } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
+import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
+import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
+import ServiceAccountsTable from 'components/ServiceAccountsTable/ServiceAccountsTable';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { toISOString } from 'utils/app';
+import { toAPIError } from 'utils/errorUtils';
+
+import { FilterMode, ServiceAccountRow, ServiceAccountStatus } from './utils';
+
+import './ServiceAccountsSettings.styles.scss';
+
+const PAGE_SIZE = 20;
+
+function ServiceAccountsSettings(): JSX.Element {
+	const history = useHistory();
+	const urlQuery = useUrlQuery();
+
+	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
+	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
+
+	const [searchQuery, setSearchQuery] = useState('');
+	const [filterMode, setFilterMode] = useState<FilterMode>(FilterMode.All);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [
+		selectedAccount,
+		setSelectedAccount,
+	] = useState<ServiceAccountRow | null>(null);
+
+	const {
+		data: serviceAccountsData,
+		isLoading,
+		isError,
+		error,
+		refetch,
+	} = useListServiceAccounts();
+
+	const allAccounts = useMemo(
+		(): ServiceAccountRow[] =>
+			(serviceAccountsData?.data ?? []).map((sa) => ({
+				id: sa.id,
+				name: sa.name,
+				email: sa.email,
+				roles: sa.roles,
+				status: sa.status,
+				createdAt: toISOString(sa.createdAt),
+				updatedAt: toISOString(sa.updatedAt),
+			})),
+		[serviceAccountsData],
+	);
+
+	const activeCount = useMemo(
+		() =>
+			allAccounts.filter(
+				(a) => a.status?.toUpperCase() === ServiceAccountStatus.Active,
+			).length,
+		[allAccounts],
+	);
+
+	const disabledCount = useMemo(
+		() =>
+			allAccounts.filter(
+				(a) => a.status?.toUpperCase() !== ServiceAccountStatus.Active,
+			).length,
+		[allAccounts],
+	);
+
+	const filteredAccounts = useMemo((): ServiceAccountRow[] => {
+		let result = allAccounts;
+
+		if (filterMode === FilterMode.Active) {
+			result = result.filter(
+				(a) => a.status?.toUpperCase() === ServiceAccountStatus.Active,
+			);
+		} else if (filterMode === FilterMode.Disabled) {
+			result = result.filter(
+				(a) => a.status?.toUpperCase() !== ServiceAccountStatus.Active,
+			);
+		}
+
+		if (searchQuery.trim()) {
+			const q = searchQuery.toLowerCase();
+			result = result.filter(
+				(a) =>
+					a.name?.toLowerCase().includes(q) ||
+					a.email?.toLowerCase().includes(q) ||
+					a.roles?.some((role: string) => role.toLowerCase().includes(q)),
+			);
+		}
+
+		return result;
+	}, [allAccounts, filterMode, searchQuery]);
+
+	const paginatedAccounts = useMemo((): ServiceAccountRow[] => {
+		const start = (currentPage - 1) * PAGE_SIZE;
+		return filteredAccounts.slice(start, start + PAGE_SIZE);
+	}, [filteredAccounts, currentPage]);
+
+	const setPage = useCallback(
+		(page: number): void => {
+			urlQuery.set('page', String(page));
+			history.replace({ search: urlQuery.toString() });
+		},
+		[history, urlQuery],
+	);
+
+	useEffect(() => {
+		if (filteredAccounts.length === 0) {
+			return;
+		}
+
+		const maxPage = Math.max(1, Math.ceil(filteredAccounts.length / PAGE_SIZE));
+		if (currentPage > maxPage || currentPage < 1) {
+			setPage(maxPage);
+		}
+	}, [filteredAccounts.length, currentPage, setPage]);
+
+	const totalCount = allAccounts.length;
+
+	const filterMenuItems: MenuProps['items'] = [
+		{
+			key: FilterMode.All,
+			label: (
+				<div className="sa-settings-filter-option">
+					<span>All accounts ⎯ {totalCount}</span>
+					{filterMode === FilterMode.All && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.All);
+				setPage(1);
+			},
+		},
+		{
+			key: FilterMode.Active,
+			label: (
+				<div className="sa-settings-filter-option">
+					<span>Active ⎯ {activeCount}</span>
+					{filterMode === FilterMode.Active && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.Active);
+				setPage(1);
+			},
+		},
+		{
+			key: FilterMode.Disabled,
+			label: (
+				<div className="sa-settings-filter-option">
+					<span>Disabled ⎯ {disabledCount}</span>
+					{filterMode === FilterMode.Disabled && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.Disabled);
+				setPage(1);
+			},
+		},
+	];
+
+	function getFilterLabel(): string {
+		switch (filterMode) {
+			case FilterMode.Active:
+				return `Active ⎯ ${activeCount}`;
+			case FilterMode.Disabled:
+				return `Disabled ⎯ ${disabledCount}`;
+			default:
+				return `All accounts ⎯ ${totalCount}`;
+		}
+	}
+	const filterLabel = getFilterLabel();
+
+	const handleRowClick = useCallback((row: ServiceAccountRow): void => {
+		setSelectedAccount(row);
+	}, []);
+
+	useEffect(() => {
+		if (!selectedAccount) {
+			return;
+		}
+		const updated = allAccounts.find((a) => a.id === selectedAccount.id);
+		if (!updated) {
+			setSelectedAccount(null);
+			return;
+		}
+		if (JSON.stringify(updated) !== JSON.stringify(selectedAccount)) {
+			setSelectedAccount(updated);
+		}
+	}, [allAccounts, selectedAccount]);
+
+	const handleDrawerClose = useCallback((): void => {
+		setSelectedAccount(null);
+	}, []);
+
+	const handleDrawerSuccess = useCallback(
+		(options?: { closeDrawer?: boolean }): void => {
+			if (options?.closeDrawer) {
+				setSelectedAccount(null);
+			}
+			refetch();
+		},
+		[refetch],
+	);
+
+	const handleCreateSuccess = useCallback((): void => {
+		refetch();
+	}, [refetch]);
+
+	return (
+		<>
+			<div className="sa-settings">
+				<div className="sa-settings__header">
+					<h1 className="sa-settings__title">Service Accounts</h1>
+					<p className="sa-settings__subtitle">
+						Service accounts are used for machine-to-machine authentication via API
+						keys. {/* Todo: to add doc links */}
+						{/* <a
+							href="https://signoz.io/docs/service-accounts"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="sa-settings__learn-more"
+						>
+							Learn more
+						</a> */}
+					</p>
+				</div>
+
+				<div className="sa-settings__controls">
+					<Dropdown
+						menu={{ items: filterMenuItems }}
+						trigger={['click']}
+						overlayClassName="sa-settings-filter-dropdown"
+					>
+						<Button
+							variant="solid"
+							size="sm"
+							color="secondary"
+							className="sa-settings-filter-trigger"
+						>
+							<span>{filterLabel}</span>
+							<ChevronDown size={12} className="sa-settings-filter-trigger__chevron" />
+						</Button>
+					</Dropdown>
+
+					<div className="sa-settings__search">
+						<Input
+							type="search"
+							name="service-accounts-search"
+							placeholder="Search by name or email..."
+							value={searchQuery}
+							onChange={(e): void => {
+								setSearchQuery(e.target.value);
+								setPage(1);
+							}}
+							className="sa-settings-search-input"
+							color="secondary"
+						/>
+					</div>
+
+					<Button
+						variant="solid"
+						size="sm"
+						color="primary"
+						onClick={(): void => setIsCreateModalOpen(true)}
+					>
+						<Plus size={12} />
+						New Service Account
+					</Button>
+				</div>
+			</div>
+
+			{isError ? (
+				<ErrorInPlace
+					error={toAPIError(
+						error,
+						'An unexpected error occurred while fetching service accounts.',
+					)}
+				/>
+			) : (
+				<ServiceAccountsTable
+					data={paginatedAccounts}
+					loading={isLoading}
+					total={filteredAccounts.length}
+					currentPage={currentPage}
+					pageSize={PAGE_SIZE}
+					searchQuery={searchQuery}
+					onPageChange={setPage}
+					onRowClick={handleRowClick}
+				/>
+			)}
+
+			<CreateServiceAccountModal
+				open={isCreateModalOpen}
+				onClose={(): void => setIsCreateModalOpen(false)}
+				onSuccess={handleCreateSuccess}
+			/>
+
+			<ServiceAccountDrawer
+				account={selectedAccount}
+				open={selectedAccount !== null}
+				onClose={handleDrawerClose}
+				onSuccess={handleDrawerSuccess}
+			/>
+		</>
+	);
+}
+
+export default ServiceAccountsSettings;

frontend/src/container/ServiceAccountsSettings/utils.ts

@@ -0,0 +1,20 @@
+export enum FilterMode {
+	All = 'all',
+	Active = 'active',
+	Disabled = 'disabled',
+}
+
+export enum ServiceAccountStatus {
+	Active = 'ACTIVE',
+	Disabled = 'DISABLED',
+}
+
+export interface ServiceAccountRow {
+	id: string;
+	name: string;
+	email: string;
+	roles: string[];
+	status: string;
+	createdAt: string | null;
+	updatedAt: string | null;
+}

frontend/src/container/SideNav/menuItems.tsx

@@ -8,6 +8,7 @@ import {
 	BellDot,
 	Binoculars,
 	Book,
+	Bot,
 	Boxes,
 	BugIcon,
 	Building2,
@@ -358,6 +359,13 @@ export const settingsNavSections: SettingsNavSection[] = [
 				isEnabled: false,
 				itemKey: 'members',
 			},
+			{
+				key: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+				label: 'Service Accounts',
+				icon: <Bot size={16} />,
+				isEnabled: false,
+				itemKey: 'service-accounts',
+			},
 			{
 				key: ROUTES.API_KEYS,
 				label: 'API Keys',

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -154,6 +154,7 @@ export const routesToSkip = [
 	ROUTES.ALL_DASHBOARD,
 	ROUTES.ORG_SETTINGS,
 	ROUTES.MEMBERS_SETTINGS,
+	ROUTES.SERVICE_ACCOUNTS_SETTINGS,
 	ROUTES.INGESTION_SETTINGS,
 	ROUTES.API_KEYS,
 	ROUTES.ERROR_DETAIL,

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -30,7 +30,6 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
-import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -235,7 +234,20 @@ function DateTimeSelection({
 
 	const updateLocalStorageForRoutes = useCallback(
 		(value: Time | string): void => {
-			persistTimeDurationForRoute(location.pathname, String(value));
+			const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
+			if (preRoutes !== null) {
+				const preRoutesObject = JSON.parse(preRoutes);
+
+				const preRoute = {
+					...preRoutesObject,
+				};
+				preRoute[location.pathname] = value;
+
+				setLocalStorageKey(
+					LOCALSTORAGE.METRICS_TIME_IN_DURATION,
+					JSON.stringify(preRoute),
+				);
+			}
 		},
 		[location.pathname],
 	);
@@ -726,7 +738,6 @@ function DateTimeSelection({
 						showRecentlyUsed={showRecentlyUsed}
 						minTime={minTimeForDateTimePicker}
 						maxTime={maxTimeForDateTimePicker}
-						isModalTimeSelection={isModalTimeSelection}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (

frontend/src/hooks/__tests__/useZoomOut.test.ts

@@ -1,160 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { QueryParams } from 'constants/query';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { useZoomOut } from '../useZoomOut';
-
-const mockDispatch = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockUrlQueryDelete = jest.fn();
-const mockUrlQuerySet = jest.fn();
-const mockUrlQueryToString = jest.fn(() => '');
-
-interface MockAppState {
-	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
-}
-
-jest.mock('react-redux', () => ({
-	useDispatch: (): jest.Mock => mockDispatch,
-	useSelector: <T>(selector: (state: MockAppState) => T): T => {
-		const mockState: MockAppState = {
-			globalTime: {
-				minTime: 15 * 60 * 1000 * 1e6, // 15 min in nanoseconds
-				maxTime: 30 * 60 * 1000 * 1e6, // 30 min in nanoseconds (mock for getNextZoomOutRange)
-			},
-		};
-		return selector(mockState);
-	},
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
-}));
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-interface MockUrlQuery {
-	delete: typeof mockUrlQueryDelete;
-	set: typeof mockUrlQuerySet;
-	get: () => null;
-	toString: typeof mockUrlQueryToString;
-}
-
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: (): MockUrlQuery => ({
-		delete: mockUrlQueryDelete,
-		set: mockUrlQuerySet,
-		get: (): null => null,
-		toString: mockUrlQueryToString,
-	}),
-}));
-
-const mockGetNextZoomOutRange = jest.fn();
-jest.mock('lib/zoomOutUtils', () => ({
-	getNextZoomOutRange: (
-		...args: unknown[]
-	): ReturnType<typeof mockGetNextZoomOutRange> =>
-		mockGetNextZoomOutRange(...args),
-}));
-
-describe('useZoomOut', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUrlQueryToString.mockReturnValue('relativeTime=45m');
-	});
-
-	it('should do nothing when isDisabled is true', () => {
-		const { result } = renderHook(() => useZoomOut({ isDisabled: true }));
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockGetNextZoomOutRange).not.toHaveBeenCalled();
-		expect(mockDispatch).not.toHaveBeenCalled();
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('should do nothing when getNextZoomOutRange returns null', () => {
-		mockGetNextZoomOutRange.mockReturnValue(null);
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockGetNextZoomOutRange).toHaveBeenCalled();
-		expect(mockDispatch).not.toHaveBeenCalled();
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('should dispatch preset and update URL when result has preset', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000, 2000],
-			preset: '45m',
-		});
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringContaining('/logs-explorer'),
-		);
-	});
-
-	it('should dispatch custom range and update URL when result has no preset', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000000, 2000000],
-			preset: null,
-		});
-
-		const { result } = renderHook(() => useZoomOut());
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(
-			QueryParams.startTime,
-			'1000000',
-		);
-		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.endTime, '2000000');
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.relativeTime);
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.stringContaining('/logs-explorer'),
-		);
-	});
-
-	it('should delete urlParamsToDelete when provided', () => {
-		mockGetNextZoomOutRange.mockReturnValue({
-			range: [1000, 2000],
-			preset: '45m',
-		});
-
-		const { result } = renderHook(() =>
-			useZoomOut({
-				urlParamsToDelete: [QueryParams.activeLogId],
-			}),
-		);
-
-		act(() => {
-			result.current();
-		});
-
-		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
-	});
-});

frontend/src/hooks/useZoomOut.ts

@@ -1,79 +0,0 @@
-import { useCallback, useRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import { QueryParams } from 'constants/query';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { getNextZoomOutRange } from 'lib/zoomOutUtils';
-import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
-
-export interface UseZoomOutOptions {
-	/** When true, the zoom out handler does nothing (e.g. when live logs are enabled) */
-	isDisabled?: boolean;
-	/** URL params to delete when zooming out (e.g. [QueryParams.activeLogId] for logs) */
-	urlParamsToDelete?: string[];
-}
-
-/**
- * Reusable hook for zoom-out functionality in explorers (logs, traces, etc.).
- * Computes the next time range using the zoom-out ladder, updates Redux global time,
- * and navigates with the new URL params.
- */
-const EMPTY_PARAMS: string[] = [];
-
-export function useZoomOut(options: UseZoomOutOptions = {}): () => void {
-	const { isDisabled = false, urlParamsToDelete = EMPTY_PARAMS } = options;
-	const urlParamsToDeleteRef = useRef(urlParamsToDelete);
-	urlParamsToDeleteRef.current = urlParamsToDelete;
-
-	const dispatch = useDispatch();
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const urlQuery = useUrlQuery();
-	const location = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-
-	return useCallback((): void => {
-		if (isDisabled) {
-			return;
-		}
-		const minMs = Math.floor((minTime ?? 0) / 1e6);
-		const maxMs = Math.floor((maxTime ?? 0) / 1e6);
-		const result = getNextZoomOutRange(minMs, maxMs);
-		if (!result) {
-			return;
-		}
-		const [newStartMs, newEndMs] = result.range;
-		const { preset } = result;
-
-		if (preset) {
-			dispatch(UpdateTimeInterval(preset));
-			urlQuery.delete(QueryParams.startTime);
-			urlQuery.delete(QueryParams.endTime);
-			urlQuery.set(QueryParams.relativeTime, preset);
-			persistTimeDurationForRoute(location.pathname, preset);
-		} else {
-			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
-			urlQuery.set(QueryParams.startTime, String(newStartMs));
-			urlQuery.set(QueryParams.endTime, String(newEndMs));
-			urlQuery.delete(QueryParams.relativeTime);
-		}
-		for (const param of urlParamsToDeleteRef.current) {
-			urlQuery.delete(param);
-		}
-		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
-	}, [
-		dispatch,
-		isDisabled,
-		location.pathname,
-		maxTime,
-		minTime,
-		safeNavigate,
-		urlQuery,
-	]);
-}

frontend/src/lib/__tests__/zoomOutUtils.test.ts

@@ -1,147 +0,0 @@
-import {
-	getNextDurationInLadder,
-	getNextZoomOutRange,
-	isZoomOutDisabled,
-	ZoomOutResult,
-} from '../zoomOutUtils';
-
-const MS_PER_MIN = 60 * 1000;
-const MS_PER_HOUR = 60 * MS_PER_MIN;
-const MS_PER_DAY = 24 * MS_PER_HOUR;
-const MS_PER_WEEK = 7 * MS_PER_DAY;
-
-// Fixed "now" for deterministic tests: 2024-01-15 12:00:00 UTC
-const NOW_MS = 1705312800000;
-
-describe('zoomOutUtils', () => {
-	beforeEach(() => {
-		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('getNextDurationInLadder', () => {
-		it('should use 3x zoom out below 15m until reaching 15m', () => {
-			expect(getNextDurationInLadder(1 * MS_PER_MIN)).toBe(3 * MS_PER_MIN);
-			expect(getNextDurationInLadder(2 * MS_PER_MIN)).toBe(6 * MS_PER_MIN);
-			expect(getNextDurationInLadder(3 * MS_PER_MIN)).toBe(9 * MS_PER_MIN);
-			expect(getNextDurationInLadder(4 * MS_PER_MIN)).toBe(12 * MS_PER_MIN);
-			expect(getNextDurationInLadder(5 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // cap at 15m
-			expect(getNextDurationInLadder(6 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // 18m capped
-		});
-
-		it('should return next step for each ladder rung from 15m onward', () => {
-			expect(getNextDurationInLadder(10 * MS_PER_MIN)).toBe(15 * MS_PER_MIN);
-			expect(getNextDurationInLadder(15 * MS_PER_MIN)).toBe(45 * MS_PER_MIN);
-			expect(getNextDurationInLadder(45 * MS_PER_MIN)).toBe(2 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(2 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(7 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(21 * MS_PER_HOUR)).toBe(1 * MS_PER_DAY);
-			expect(getNextDurationInLadder(1 * MS_PER_DAY)).toBe(2 * MS_PER_DAY);
-			expect(getNextDurationInLadder(2 * MS_PER_DAY)).toBe(3 * MS_PER_DAY);
-			expect(getNextDurationInLadder(3 * MS_PER_DAY)).toBe(1 * MS_PER_WEEK);
-			expect(getNextDurationInLadder(1 * MS_PER_WEEK)).toBe(2 * MS_PER_WEEK);
-			expect(getNextDurationInLadder(2 * MS_PER_WEEK)).toBe(30 * MS_PER_DAY);
-		});
-
-		it('should return MAX when at or past 1 month (no wrap)', () => {
-			expect(getNextDurationInLadder(30 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
-			expect(getNextDurationInLadder(31 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
-		});
-
-		it('should return next step for duration between ladder rungs', () => {
-			expect(getNextDurationInLadder(1 * MS_PER_HOUR)).toBe(2 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(5 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
-			expect(getNextDurationInLadder(12 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
-		});
-	});
-
-	describe('getNextZoomOutRange', () => {
-		it('should return null when duration is zero or negative', () => {
-			expect(getNextZoomOutRange(NOW_MS, NOW_MS)).toBeNull();
-			expect(getNextZoomOutRange(NOW_MS, NOW_MS - 1000)).toBeNull();
-		});
-
-		it('should return center-anchored range and preset=null when new end does not exceed now (Phase 1)', () => {
-			// 15m range centered well before now so zoom to 45m keeps end <= now
-			// Center at now-30m: end = center + 22.5m = now - 7.5m <= now
-			const centerMs = NOW_MS - 30 * MS_PER_MIN;
-			const start15m = centerMs - 7.5 * MS_PER_MIN;
-			const end15m = centerMs + 7.5 * MS_PER_MIN;
-			const result = getNextZoomOutRange(start15m, end15m) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBeNull(); // Phase 1: preserve center-anchored range, avoid GetMinMax "last X from now"
-			const [newStart, newEnd] = result.range;
-			expect(newEnd - newStart).toBe(45 * MS_PER_MIN);
-			const newCenter = (newStart + newEnd) / 2;
-			expect(Math.abs(newCenter - centerMs)).toBeLessThan(2000);
-			expect(newEnd).toBeLessThanOrEqual(NOW_MS + 1000);
-		});
-
-		it('should return end-anchored range when new end would exceed now (Phase 2)', () => {
-			// 22hr range ending at now - zoom to 1d (24hr) would push end past now
-			// Next ladder step from 22hr is 1d
-			const start22h = NOW_MS - 22 * MS_PER_HOUR;
-			const end22h = NOW_MS;
-			const result = getNextZoomOutRange(start22h, end22h) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBe('1d');
-			const [newStart, newEnd] = result.range;
-			expect(newEnd).toBe(NOW_MS); // End anchored at now
-			expect(newStart).toBe(NOW_MS - 1 * MS_PER_DAY);
-		});
-
-		it('should return correct preset for each ladder step', () => {
-			const presets: [number, number, string][] = [
-				[15 * MS_PER_MIN, 0, '45m'],
-				[45 * MS_PER_MIN, 0, '2h'],
-				[2 * MS_PER_HOUR, 0, '7h'],
-				[7 * MS_PER_HOUR, 0, '21h'],
-				[21 * MS_PER_HOUR, 0, '1d'],
-				[1 * MS_PER_DAY, 0, '2d'],
-				[2 * MS_PER_DAY, 0, '3d'],
-				[3 * MS_PER_DAY, 0, '1w'],
-				[1 * MS_PER_WEEK, 0, '2w'],
-				[2 * MS_PER_WEEK, 0, '1month'],
-			];
-
-			presets.forEach(([durationMs, offset, expectedPreset]) => {
-				const end = NOW_MS - offset;
-				const start = end - durationMs;
-				const result = getNextZoomOutRange(start, end);
-				expect(result?.preset).toBe(expectedPreset);
-			});
-		});
-
-		it('isZoomOutDisabled returns true when duration >= 1 month', () => {
-			expect(isZoomOutDisabled(30 * MS_PER_DAY)).toBe(true);
-			expect(isZoomOutDisabled(31 * MS_PER_DAY)).toBe(true);
-			expect(isZoomOutDisabled(29 * MS_PER_DAY)).toBe(false);
-			expect(isZoomOutDisabled(15 * MS_PER_MIN)).toBe(false);
-		});
-
-		it('should return null when at 1 month (no zoom out beyond max)', () => {
-			const start1m = NOW_MS - 30 * MS_PER_DAY;
-			const end1m = NOW_MS;
-			const result = getNextZoomOutRange(start1m, end1m);
-
-			expect(result).toBeNull();
-		});
-
-		it('should zoom out 3x from 5m range to 15m then continue with ladder', () => {
-			// 5m range ending at now → 3x = 15m
-			const start5m = NOW_MS - 5 * MS_PER_MIN;
-			const end5m = NOW_MS;
-			const result = getNextZoomOutRange(start5m, end5m) as ZoomOutResult;
-
-			expect(result).not.toBeNull();
-			expect(result.preset).toBe('15m');
-			const [newStart, newEnd] = result.range;
-			expect(newEnd - newStart).toBe(15 * MS_PER_MIN);
-		});
-	});
-});

frontend/src/lib/zoomOutUtils.ts

@@ -1,139 +0,0 @@
-/**
- * Custom Time Picker zoom-out ladder:
- * - Until 1 day: 15m → 45m → 2hr → 7hr → 21hr
- * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
- * - At 1 month: zoom out is disabled (max range)
- */
-
-import type {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-
-const MS_PER_MIN = 60 * 1000;
-const MS_PER_HOUR = 60 * MS_PER_MIN;
-const MS_PER_DAY = 24 * MS_PER_HOUR;
-const MS_PER_WEEK = 7 * MS_PER_DAY;
-
-const ZOOM_OUT_LADDER_MS: number[] = [
-	15 * MS_PER_MIN, // 15m
-	45 * MS_PER_MIN, // 45m
-	2 * MS_PER_HOUR, // 2hr
-	7 * MS_PER_HOUR, // 7hr
-	21 * MS_PER_HOUR, // 21hr
-	1 * MS_PER_DAY, // 1d
-	2 * MS_PER_DAY, // 2d
-	3 * MS_PER_DAY, // 3d
-	1 * MS_PER_WEEK, // 1w
-	2 * MS_PER_WEEK, // 2w
-	30 * MS_PER_DAY, // 1m
-];
-
-const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
-const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
-const MIN_LADDER_DURATION_MS = ZOOM_OUT_LADDER_MS[0]; // 15m - below this we use 3x
-
-export const MAX_ZOOM_OUT_DURATION_MS = MAX_DURATION;
-
-/** Returns true when zoom out should be disabled (range at or beyond 1 month) */
-export function isZoomOutDisabled(durationMs: number): boolean {
-	return durationMs >= MAX_ZOOM_OUT_DURATION_MS;
-}
-
-/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
-const PRESET_FOR_DURATION_MS: Record<number, Time | CustomTimeType> = {
-	[15 * MS_PER_MIN]: '15m',
-	[45 * MS_PER_MIN]: '45m',
-	[2 * MS_PER_HOUR]: '2h',
-	[7 * MS_PER_HOUR]: '7h',
-	[21 * MS_PER_HOUR]: '21h',
-	[1 * MS_PER_DAY]: '1d',
-	[2 * MS_PER_DAY]: '2d',
-	[3 * MS_PER_DAY]: '3d',
-	[1 * MS_PER_WEEK]: '1w',
-	[2 * MS_PER_WEEK]: '2w',
-	[30 * MS_PER_DAY]: '1month',
-};
-
-/**
- * Returns the next duration in the zoom-out ladder for the given current duration.
- * Below 15m: zoom out 3x until we reach 15m, then continue with the ladder.
- * If at or past 1 month, returns MAX_DURATION (no zoom out - button is disabled).
- */
-export function getNextDurationInLadder(durationMs: number): number {
-	if (durationMs >= MAX_DURATION) {
-		return MAX_DURATION; // No zoom out beyond 1 month
-	}
-
-	// Below 15m: zoom out 3x until we reach 15m
-	if (durationMs < MIN_LADDER_DURATION_MS) {
-		const next = durationMs * 3;
-		return Math.min(next, MIN_LADDER_DURATION_MS);
-	}
-
-	// At or above 15m: use the fixed ladder
-	for (let i = 0; i < ZOOM_OUT_LADDER_MS.length; i++) {
-		if (ZOOM_OUT_LADDER_MS[i] > durationMs) {
-			return ZOOM_OUT_LADDER_MS[i];
-		}
-	}
-
-	return MAX_DURATION;
-}
-
-export interface ZoomOutResult {
-	range: [number, number];
-	/** Preset key (e.g. '15m') when range matches a preset - use for display instead of "Custom Date Range" */
-	preset: Time | CustomTimeType | null;
-}
-
-/**
- * Computes the next zoomed-out time range.
- * Phase 1 (center-anchored): While new end <= now, expand from center.
- * Phase 2 (end-anchored at now): When new end would exceed now, anchor end at now and move start backward.
- *
- * @returns ZoomOutResult with range and preset (or null if no change)
- */
-export function getNextZoomOutRange(
-	startMs: number,
-	endMs: number,
-): ZoomOutResult | null {
-	const nowMs = Date.now();
-	const durationMs = endMs - startMs;
-
-	if (durationMs <= 0) {
-		return null;
-	}
-
-	const newDurationMs = getNextDurationInLadder(durationMs);
-
-	// No zoom out when already at max (1 month)
-	if (newDurationMs <= durationMs) {
-		return null;
-	}
-	const centerMs = startMs + durationMs / 2;
-	const computedEndMs = centerMs + newDurationMs / 2;
-
-	let newStartMs: number;
-	let newEndMs: number;
-
-	const isPhase1 = computedEndMs <= nowMs;
-	if (isPhase1) {
-		// Phase 1: center-anchored (historical range not ending at now)
-		newStartMs = centerMs - newDurationMs / 2;
-		newEndMs = computedEndMs;
-	} else {
-		// Phase 2: end-anchored at now
-		newStartMs = nowMs - newDurationMs;
-		newEndMs = nowMs;
-	}
-
-	// Phase 2 only: use preset so GetMinMax produces "last X from now".
-	// Phase 1: preset=null so the center-anchored range is preserved (GetMinMax would discard it).
-	const preset = isPhase1 ? null : PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
-
-	return {
-		range: [Math.round(newStartMs), Math.round(newEndMs)],
-		preset,
-	};
-}

frontend/src/pages/ServiceAccountsSettings/index.tsx

@@ -0,0 +1 @@
+export { default } from 'container/ServiceAccountsSettings/ServiceAccountsSettings';

frontend/src/pages/Settings/Settings.tsx

@@ -85,6 +85,7 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.SHORTCUTS
 								? true
 								: item.isEnabled,
@@ -116,6 +117,7 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.INGESTION_SETTINGS
 								? true
 								: item.isEnabled,
@@ -141,7 +143,8 @@ function SettingsPage(): JSX.Element {
 						isEnabled:
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS
+							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
 								? true
 								: item.isEnabled,
 					}));

frontend/src/pages/Settings/config.tsx

@@ -17,6 +17,7 @@ import { TFunction } from 'i18next';
 import {
 	Backpack,
 	BellDot,
+	Bot,
 	Building,
 	Cpu,
 	CreditCard,
@@ -30,6 +31,7 @@ import {
 } from 'lucide-react';
 import ChannelsEdit from 'pages/ChannelsEdit';
 import MembersSettings from 'pages/MembersSettings';
+import ServiceAccountsSettings from 'pages/ServiceAccountsSettings';
 import Shortcuts from 'pages/Shortcuts';
 
 export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [
@@ -203,6 +205,21 @@ export const mySettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
+export const serviceAccountsSettings = (
+	t: TFunction,
+): RouteTabProps['routes'] => [
+	{
+		Component: ServiceAccountsSettings,
+		name: (
+			<div className="periscope-tab">
+				<Bot size={16} /> {t('routes:service_accounts').toString()}
+			</div>
+		),
+		route: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+		key: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+	},
+];
+
 export const createAlertChannels = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: (): JSX.Element => (

frontend/src/pages/Settings/utils.ts

@@ -17,6 +17,7 @@ import {
 	organizationSettings,
 	roleDetails,
 	rolesSettings,
+	serviceAccountsSettings,
 } from './config';
 
 export const getRoutes = (
@@ -62,7 +63,11 @@ export const getRoutes = (
 	settings.push(...alertChannels(t));
 
 	if (isAdmin) {
-		settings.push(...apiKeys(t), ...membersSettings(t));
+		settings.push(
+			...apiKeys(t),
+			...membersSettings(t),
+			...serviceAccountsSettings(t),
+		);
 	}
 
 	// todo: Sagar - check the condition for role list and details page, to whom we want to serve

frontend/src/utils/app.ts

@@ -1,6 +1,7 @@
 import getLocalStorage from 'api/browser/localstorage/get';
 import { FeatureKeys } from 'constants/features';
 import { SKIP_ONBOARDING } from 'constants/onboarding';
+import dayjs from 'dayjs';
 import { get } from 'lodash-es';
 import { getLocation } from 'utils/getLocation';
 
@@ -73,3 +74,19 @@ export function buildAbsolutePath({
 }
 
 export const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function toISOString(
+	date: Date | string | number | null | undefined,
+): string | null {
+	if (date == null) {
+		return null;
+	}
+
+	const d = dayjs(date);
+
+	if (!d.isValid()) {
+		return null;
+	}
+
+	return d.toISOString();
+}

frontend/src/utils/metricsTimeStorageUtils.ts

@@ -1,28 +0,0 @@
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-/**
- * Updates the stored time duration for a route in localStorage.
- * Used by both DateTimeSelectionV2 (manual time pick) and useZoomOut (zoom out button).
- *
- * @param pathname - The route path (e.g. /infrastructure-monitoring/hosts)
- * @param value - The time value to store (preset string like '1w' or JSON string for custom range)
- */
-export function persistTimeDurationForRoute(
-	pathname: string,
-	value: string,
-): void {
-	const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
-	let preRoutesObject: Record<string, string> = {};
-	try {
-		preRoutesObject = preRoutes ? JSON.parse(preRoutes) : {};
-	} catch {
-		preRoutesObject = {};
-	}
-	const preRoute = { ...preRoutesObject, [pathname]: value };
-	setLocalStorageKey(
-		LOCALSTORAGE.METRICS_TIME_IN_DURATION,
-		JSON.stringify(preRoute),
-	);
-}

frontend/src/utils/permission/index.ts

@@ -100,6 +100,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ROLES_SETTINGS: ['ADMIN'],
 	ROLE_DETAILS: ['ADMIN'],
 	MEMBERS_SETTINGS: ['ADMIN'],
+	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],