feat: refactored and used semantic token for edit member drawer

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.0
+    image: signoz/signoz:v0.113.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.2
+    image: signoz/signoz-otel-collector:v0.144.1
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.2
+    image: signoz/signoz-otel-collector:v0.144.1
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.0
+    image: signoz/signoz:v0.113.0
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.2
+    image: signoz/signoz-otel-collector:v0.144.1
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.2
+    image: signoz/signoz-otel-collector:v0.144.1
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.0}
+    image: signoz/signoz:${VERSION:-v0.113.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.0}
+    image: signoz/signoz:${VERSION:-v0.113.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.1}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

frontend/jest.config.ts

@@ -23,29 +23,7 @@ const config: Config.InitialOptions = {
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/sonner$':
-			'<rootDir>/node_modules/@signozhq/sonner/dist/sonner.js',
-		'^@signozhq/button$':
-			'<rootDir>/node_modules/@signozhq/button/dist/button.js',
-		'^@signozhq/calendar$':
-			'<rootDir>/node_modules/@signozhq/calendar/dist/calendar.js',
-		'^@signozhq/badge': '<rootDir>/node_modules/@signozhq/badge/dist/badge.js',
-		'^@signozhq/checkbox':
-			'<rootDir>/node_modules/@signozhq/checkbox/dist/checkbox.js',
-		'^@signozhq/switch': '<rootDir>/node_modules/@signozhq/switch/dist/switch.js',
-		'^@signozhq/callout':
-			'<rootDir>/node_modules/@signozhq/callout/dist/callout.js',
-		'^@signozhq/combobox':
-			'<rootDir>/node_modules/@signozhq/combobox/dist/combobox.js',
-		'^@signozhq/input': '<rootDir>/node_modules/@signozhq/input/dist/input.js',
-		'^@signozhq/command':
-			'<rootDir>/node_modules/@signozhq/command/dist/command.js',
-		'^@signozhq/radio-group':
-			'<rootDir>/node_modules/@signozhq/radio-group/dist/radio-group.js',
-		'^@signozhq/toggle-group$':
-			'<rootDir>/node_modules/@signozhq/toggle-group/dist/toggle-group.js',
-		'^@signozhq/dialog$':
-			'<rootDir>/node_modules/@signozhq/dialog/dist/dialog.js',
+		'^@signozhq/([^/]+)$': '<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
 	},
 	extensionsToTreatAsEsm: ['.ts'],
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],

frontend/jest.setup.ts

@@ -7,9 +7,10 @@
  */
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
-import './src/styles.scss';
 
 import { server } from './src/mocks-server/server';
+
+import './src/styles.scss';
 // Establish API mocking before all tests.
 
 // Mock window.matchMedia

frontend/package.json

@@ -55,6 +55,7 @@
     "@signozhq/command": "0.0.0",
     "@signozhq/design-tokens": "2.1.1",
     "@signozhq/dialog": "^0.0.2",
+    "@signozhq/drawer": "0.0.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/input": "0.0.2",
     "@signozhq/popover": "0.0.0",

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

@@ -14,5 +14,6 @@
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
-	"role_details": "Role Details"
+	"role_details": "Role Details",
+	"members": "Members"
 }

frontend/public/locales/en/routes.json

@@ -14,5 +14,6 @@
 	"archives": "Archives",
 	"logs_to_metrics": "Logs To Metrics",
 	"roles": "Roles",
-	"role_details": "Role Details"
+	"role_details": "Role Details",
+	"members": "Members"
 }

frontend/public/locales/en/titles.json

@@ -74,5 +74,6 @@
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
 	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles"
+	"ROLES_SETTINGS": "SigNoz | Roles",
+	"MEMBERS_SETTINGS": "SigNoz | Members"
 }

frontend/src/auto-import-registry.d.ts

@@ -19,6 +19,7 @@ import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
 import '@signozhq/dialog';
+import '@signozhq/drawer';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';

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

@@ -1,279 +0,0 @@
-import { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import dayjs from 'dayjs';
-import * as timeUtils from 'utils/timeUtils';
-
-import CustomTimePicker from './CustomTimePicker';
-
-jest.mock('react-router-dom', () => {
-	const actual = jest.requireActual('react-router-dom');
-
-	return {
-		...actual,
-		useLocation: jest.fn().mockReturnValue({
-			pathname: '/test-path',
-		}),
-	};
-});
-
-jest.mock('providers/Timezone', () => {
-	const actual = jest.requireActual('providers/Timezone');
-
-	return {
-		...actual,
-		useTimezone: jest.fn().mockReturnValue({
-			timezone: {
-				value: 'UTC',
-				offset: '+00:00',
-				name: 'UTC',
-			},
-			browserTimezone: {
-				value: 'UTC',
-				offset: '+00:00',
-				name: 'UTC',
-			},
-		}),
-	};
-});
-
-interface WrapperProps {
-	initialValue?: string;
-	showLiveLogs?: boolean;
-	onValidCustomDateChange?: () => void;
-	onError?: () => void;
-	onSelect?: (value: string) => void;
-	onCustomDateHandler?: () => void;
-	onCustomTimeStatusUpdate?: () => void;
-}
-
-function Wrapper({
-	initialValue = '2024-01-01 00:00:00 - 2024-01-01 01:00:00',
-	showLiveLogs = false,
-	onValidCustomDateChange = (): void => {},
-	onError = (): void => {},
-	onSelect = (): void => {},
-	onCustomDateHandler = (): void => {},
-	onCustomTimeStatusUpdate = (): void => {},
-}: WrapperProps): JSX.Element {
-	const [open, setOpen] = useState(false);
-	const [selectedTime, setSelectedTime] = useState('custom');
-	const [selectedValue, setSelectedValue] = useState(initialValue);
-
-	const handleSelect = (value: string): void => {
-		setSelectedTime(value);
-		onSelect(value);
-	};
-
-	return (
-		<CustomTimePicker
-			open={open}
-			setOpen={setOpen}
-			onSelect={handleSelect}
-			onError={onError}
-			selectedTime={selectedTime}
-			selectedValue={selectedValue}
-			onValidCustomDateChange={({ timeStr }): void => {
-				setSelectedValue(timeStr);
-				onValidCustomDateChange();
-			}}
-			onCustomDateHandler={(): void => {
-				onCustomDateHandler();
-			}}
-			onCustomTimeStatusUpdate={(): void => {
-				onCustomTimeStatusUpdate();
-			}}
-			items={[
-				{ label: 'Last 5 minutes', value: '5m' },
-				{ label: 'Custom', value: 'custom' },
-			]}
-			minTime={dayjs('2024-01-01 00:00:00').valueOf() * 1000_000}
-			maxTime={dayjs('2024-01-01 01:00:00').valueOf() * 1000_000}
-			showLiveLogs={showLiveLogs}
-		/>
-	);
-}
-
-describe('CustomTimePicker', () => {
-	it('does not close or reset when clicking input while open', () => {
-		render(<Wrapper />);
-
-		const input = screen.getByRole('textbox');
-
-		// Open popover
-		fireEvent.focus(input);
-
-		// Type some text
-		fireEvent.change(input, { target: { value: '5m' } });
-
-		// Click the input again while open
-		fireEvent.mouseDown(input);
-		fireEvent.click(input);
-
-		// Value should remain as typed
-		expect((input as HTMLInputElement).value).toBe('5m');
-	});
-
-	it('applies valid shorthand on Enter', () => {
-		const onValid = jest.fn();
-		const onError = jest.fn();
-
-		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
-
-		const input = screen.getByRole('textbox');
-
-		fireEvent.focus(input);
-		fireEvent.change(input, { target: { value: '5m' } });
-		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-		expect(onValid).toHaveBeenCalledTimes(1);
-		// onError(false) may be called by internal reset logic; we only assert that
-		// it was never called with a truthy error state
-		expect(onError).not.toHaveBeenCalledWith(true);
-	});
-
-	it('sets error and updates custom time status for invalid shorthand exceeding max allowed window', () => {
-		const onValid = jest.fn();
-		const onError = jest.fn();
-		const onCustomTimeStatusUpdate = jest.fn();
-
-		render(
-			<Wrapper
-				onValidCustomDateChange={onValid}
-				onError={onError}
-				onCustomTimeStatusUpdate={onCustomTimeStatusUpdate}
-			/>,
-		);
-
-		const input = screen.getByRole('textbox');
-
-		fireEvent.focus(input);
-		// large number of days to ensure it exceeds the 15 months allowed window
-		fireEvent.change(input, { target: { value: '9999d' } });
-		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-		expect(onError).toHaveBeenCalledWith(true);
-		expect(onCustomTimeStatusUpdate).toHaveBeenCalledWith();
-		expect(onValid).not.toHaveBeenCalled();
-	});
-
-	it('treats close after change like pressing Enter (blur + chevron)', () => {
-		const onValid = jest.fn();
-		const onError = jest.fn();
-
-		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
-
-		const input = screen.getByRole('textbox');
-
-		// Open and change value so "changed since open" is true
-		fireEvent.focus(input);
-		fireEvent.change(input, { target: { value: '5m' } });
-		fireEvent.blur(input);
-
-		// Click the chevron (which triggers handleClose)
-		const chevron = document.querySelector(
-			'.time-input-suffix-icon-badge',
-		) as HTMLElement;
-
-		fireEvent.click(chevron);
-
-		// Should have applied the value (same as Enter)
-		expect(onValid).toHaveBeenCalledTimes(1);
-		expect(onError).not.toHaveBeenCalledWith(true);
-	});
-
-	it('applies epoch start/end range on Enter via onCustomDateHandler', () => {
-		const onCustomDateHandler = jest.fn();
-		const onError = jest.fn();
-
-		render(
-			<Wrapper onCustomDateHandler={onCustomDateHandler} onError={onError} />,
-		);
-
-		const now = dayjs().valueOf();
-		const later = dayjs().add(1, 'hour').valueOf();
-		const input = screen.getByRole('textbox');
-
-		fireEvent.focus(input);
-		fireEvent.change(input, {
-			target: { value: `${now} - ${later}` },
-		});
-		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-		expect(onCustomDateHandler).toHaveBeenCalledTimes(1);
-		expect(onError).not.toHaveBeenCalledWith(true);
-	});
-
-	it('uses validateTimeRange result for generic formatted ranges (valid case)', () => {
-		const validateTimeRangeSpy = jest.spyOn(timeUtils, 'validateTimeRange');
-		const onCustomDateHandler = jest.fn();
-		const onError = jest.fn();
-
-		validateTimeRangeSpy.mockReturnValue({
-			isValid: true,
-			errorDetails: undefined,
-			startTimeMs: dayjs('2024-01-01 00:00:00').valueOf(),
-			endTimeMs: dayjs('2024-01-01 01:00:00').valueOf(),
-		});
-
-		render(
-			<Wrapper onCustomDateHandler={onCustomDateHandler} onError={onError} />,
-		);
-
-		const input = screen.getByRole('textbox');
-
-		fireEvent.focus(input);
-		fireEvent.change(input, {
-			target: { value: 'foo - bar' },
-		});
-		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-		expect(validateTimeRangeSpy).toHaveBeenCalled();
-		expect(onCustomDateHandler).toHaveBeenCalledTimes(1);
-		expect(onError).not.toHaveBeenCalledWith(true);
-
-		validateTimeRangeSpy.mockRestore();
-	});
-
-	it('uses validateTimeRange result for generic formatted ranges (invalid case)', () => {
-		const validateTimeRangeSpy = jest.spyOn(timeUtils, 'validateTimeRange');
-		const onValid = jest.fn();
-		const onError = jest.fn();
-
-		validateTimeRangeSpy.mockReturnValue({
-			isValid: false,
-			errorDetails: {
-				message: 'Invalid range',
-				code: 'INVALID_RANGE',
-				description: 'Start must be before end',
-			},
-			startTimeMs: 0,
-			endTimeMs: 0,
-		});
-
-		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
-
-		const input = screen.getByRole('textbox');
-
-		fireEvent.focus(input);
-		fireEvent.change(input, {
-			target: { value: 'foo - bar' },
-		});
-		fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-		expect(validateTimeRangeSpy).toHaveBeenCalled();
-		expect(onError).toHaveBeenCalledWith(true);
-		expect(onValid).not.toHaveBeenCalled();
-
-		validateTimeRangeSpy.mockRestore();
-	});
-
-	it('opens live mode with correct label', () => {
-		render(<Wrapper showLiveLogs />);
-
-		const input = screen.getByRole('textbox');
-
-		fireEvent.focus(input);
-
-		expect((input as HTMLInputElement).value).toBe('Live');
-	});
-});

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -104,10 +104,6 @@ function CustomTimePicker({
 	const location = useLocation();
 
 	const inputRef = useRef<InputRef>(null);
-	const initialInputValueOnOpenRef = useRef<string>('');
-	const hasChangedSinceOpenRef = useRef<boolean>(false);
-	// Tracks if the last pointer down was on the input so we don't close the popover when user clicks the input again
-	const isClickFromInputRef = useRef(false);
 
 	const [activeView, setActiveView] = useState<ViewType>(DEFAULT_VIEW);
 
@@ -242,21 +238,6 @@ function CustomTimePicker({
 	};
 
 	const handleOpenChange = (newOpen: boolean): void => {
-		// Don't close when the user clicked the input (trigger); Ant Design treats trigger as "outside" overlay
-		if (!newOpen && isClickFromInputRef.current) {
-			isClickFromInputRef.current = false;
-			return;
-		}
-		isClickFromInputRef.current = false;
-
-		// If the popover is trying to close and the value changed since opening,
-		// treat it as if the user pressed Enter (attempt to apply the value)
-		if (!newOpen && hasChangedSinceOpenRef.current) {
-			hasChangedSinceOpenRef.current = false;
-			handleInputPressEnter();
-			return;
-		}
-
 		setOpen(newOpen);
 
 		if (!newOpen) {
@@ -425,18 +406,10 @@ function CustomTimePicker({
 	const handleOpen = (e?: React.SyntheticEvent): void => {
 		e?.stopPropagation?.();
 
-		// If the popover is already open, avoid resetting the input value
-		// so that any in-progress edits are preserved.
-		if (open) {
-			return;
-		}
-
 		if (showLiveLogs) {
 			setOpen(true);
 			setSelectedTimePlaceholderValue('Live');
 			setInputValue('Live');
-			initialInputValueOnOpenRef.current = 'Live';
-			hasChangedSinceOpenRef.current = false;
 			return;
 		}
 
@@ -451,21 +424,11 @@ function CustomTimePicker({
 			.tz(timezone.value)
 			.format(DATE_TIME_FORMATS.UK_DATETIME_SECONDS);
 
-		const nextValue = `${startTime} - ${endTime}`;
-		setInputValue(nextValue);
-		initialInputValueOnOpenRef.current = nextValue;
-		hasChangedSinceOpenRef.current = false;
+		setInputValue(`${startTime} - ${endTime}`);
 	};
 
 	const handleClose = (e: React.MouseEvent): void => {
 		e.stopPropagation();
-		// If the value changed since opening, treat this like pressing Enter
-		if (hasChangedSinceOpenRef.current) {
-			hasChangedSinceOpenRef.current = false;
-			handleInputPressEnter();
-			return;
-		}
-
 		setOpen(false);
 		setCustomDTPickerVisible?.(false);
 
@@ -487,9 +450,6 @@ function CustomTimePicker({
 	}, [location.pathname]);
 
 	const handleInputBlur = (): void => {
-		// Track whether the value was changed since the input was opened for editing
-		hasChangedSinceOpenRef.current =
-			inputValue !== initialInputValueOnOpenRef.current;
 		resetErrorStatus();
 	};
 
@@ -592,12 +552,6 @@ function CustomTimePicker({
 						readOnly={!open || showLiveLogs}
 						placeholder={selectedTimePlaceholderValue}
 						value={inputValue}
-						onMouseDown={(e): void => {
-							// Only treat as "click from input" when the actual input element is clicked (not suffix/chevron)
-							if (e.target === inputRef.current?.input) {
-								isClickFromInputRef.current = true;
-							}
-						}}
 						onFocus={handleOpen}
 						onClick={handleOpen}
 						onChange={handleInputChange}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -0,0 +1,304 @@
+.edit-member-drawer {
+	&__layout {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 48px);
+	}
+
+	&__body {
+		flex: 1;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+		padding: var(--padding-5) 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;
+		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 8px;
+		border-radius: 2px;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+
+		&--disabled {
+			cursor: not-allowed;
+			opacity: 0.8;
+		}
+	}
+
+	&__email-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%;
+		height: 32px;
+
+		.ant-select-selector {
+			background-color: var(--l2-background) !important;
+			border-color: var(--border) !important;
+			border-radius: 2px;
+			padding: 0 var(--padding-2) !important;
+			display: flex;
+			align-items: center;
+		}
+
+		.ant-select-selection-item {
+			font-size: var(--font-size-sm);
+			color: var(--l1-foreground);
+			line-height: 32px;
+			letter-spacing: -0.07px;
+		}
+
+		.ant-select-arrow {
+			color: var(--foreground);
+		}
+
+		&:not(.ant-select-disabled):hover .ant-select-selector {
+			border-color: var(--foreground);
+		}
+	}
+
+	&__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;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: 56px;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--border);
+		flex-shrink: 0;
+		background: var(--card);
+	}
+
+	&__footer-left {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-8);
+	}
+
+	&__footer-right {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-6);
+	}
+
+	&__footer-divider {
+		width: 1px;
+		height: 21px;
+		background: var(--border);
+		flex-shrink: 0;
+	}
+
+	&__footer-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-3);
+		padding: 0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font-family: Inter, sans-serif;
+		font-size: var(--label-small-400-font-size);
+		font-weight: var(--label-small-400-font-weight);
+		line-height: var(--label-small-400-line-height);
+		letter-spacing: var(--label-small-400-letter-spacing);
+		transition: opacity 0.15s ease;
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		&:not(:disabled):hover {
+			opacity: 0.8;
+		}
+
+		&--danger {
+			color: var(--destructive);
+		}
+
+		&--warning {
+			color: var(--accent-amber);
+		}
+	}
+}
+
+.delete-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: 24px;
+	}
+}
+
+.reset-link-dialog {
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+
+	[data-slot='dialog-header'] {
+		border-color: var(--l2-border);
+		color: var(--l1-foreground);
+	}
+
+	[data-slot='dialog-description'] {
+		width: 510px;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-8);
+	}
+
+	&__description {
+		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;
+		white-space: normal;
+		word-break: break-word;
+	}
+
+	&__link-row {
+		display: flex;
+		align-items: center;
+		height: 32px;
+		overflow: hidden;
+		background: var(--l2-background);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+	}
+
+	&__link-text-wrap {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	&__link-text {
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		padding: 0 var(--padding-2);
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		color: var(--l2-foreground);
+		line-height: var(--line-height-18);
+		letter-spacing: -0.07px;
+	}
+
+	&__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: 64px;
+	}
+}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -0,0 +1,472 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Badge } from '@signozhq/badge';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { DrawerWrapper } from '@signozhq/drawer';
+import {
+	Check,
+	ChevronDown,
+	Copy,
+	Link,
+	LockKeyhole,
+	RefreshCw,
+	Trash2,
+	X,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { Select } from 'antd';
+import getResetPasswordToken from 'api/v1/factor_password/getResetPasswordToken';
+import sendInvite from 'api/v1/invite/create';
+import cancelInvite from 'api/v1/invite/id/delete';
+import deleteUser from 'api/v1/user/id/delete';
+import update from 'api/v1/user/id/update';
+import { MemberRow } from 'components/MembersTable/MembersTable';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import ROUTES from 'constants/routes';
+import { INVITE_PREFIX, MemberStatus } from 'container/MembersSettings/utils';
+import { capitalize } from 'lodash-es';
+import { useTimezone } from 'providers/Timezone';
+import { ROLES } from 'types/roles';
+
+import './EditMemberDrawer.styles.scss';
+
+export interface EditMemberDrawerProps {
+	member: MemberRow | null;
+	open: boolean;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function EditMemberDrawer({
+	member,
+	open,
+	onClose,
+	onSuccess,
+}: EditMemberDrawerProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const [displayName, setDisplayName] = useState('');
+	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
+	const [isSaving, setIsSaving] = useState(false);
+	const [isDeleting, setIsDeleting] = useState(false);
+	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const [resetLink, setResetLink] = useState<string | null>(null);
+	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
+	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
+
+	const isInvited = member?.status === MemberStatus.Invited;
+	// Invited member IDs are prefixed with 'invite-'; strip it to get the real invite ID
+	const inviteId =
+		isInvited && member ? member.id.slice(INVITE_PREFIX.length) : null;
+
+	useEffect(() => {
+		if (member) {
+			setDisplayName(member.name ?? '');
+			setSelectedRole(member.role);
+		}
+	}, [member]);
+
+	const isDirty =
+		member !== null &&
+		(displayName !== member.name || selectedRole !== member.role);
+
+	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],
+	);
+
+	const handleSave = useCallback(async (): Promise<void> => {
+		if (!member || !isDirty) {
+			return;
+		}
+		setIsSaving(true);
+		try {
+			if (isInvited && inviteId) {
+				await cancelInvite({ id: inviteId });
+				await sendInvite({
+					email: member.email,
+					name: displayName,
+					role: selectedRole,
+					frontendBaseUrl: window.location.origin,
+				});
+				toast.success('Invite updated successfully', { richColors: true });
+			} else {
+				await update({
+					userId: member.id,
+					displayName,
+					role: selectedRole,
+				});
+				toast.success('Member details updated successfully', { richColors: true });
+			}
+			onSuccess();
+			onClose();
+		} catch {
+			toast.error(
+				isInvited ? 'Failed to update invite' : 'Failed to update member details',
+				{ richColors: true },
+			);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [
+		member,
+		isDirty,
+		isInvited,
+		inviteId,
+		displayName,
+		selectedRole,
+		onSuccess,
+		onClose,
+	]);
+
+	const handleDelete = useCallback(async (): Promise<void> => {
+		if (!member) {
+			return;
+		}
+		setIsDeleting(true);
+		try {
+			if (isInvited && inviteId) {
+				await cancelInvite({ id: inviteId });
+				toast.success('Invitation cancelled successfully', { richColors: true });
+			} else {
+				await deleteUser({ userId: member.id });
+				toast.success('Member deleted successfully', { richColors: true });
+			}
+			setShowDeleteConfirm(false);
+			onSuccess();
+			onClose();
+		} catch {
+			toast.error(
+				isInvited ? 'Failed to cancel invitation' : 'Failed to delete member',
+				{ richColors: true },
+			);
+		} finally {
+			setIsDeleting(false);
+		}
+	}, [member, isInvited, inviteId, onSuccess, onClose]);
+
+	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
+		if (!member) {
+			return;
+		}
+		setIsGeneratingLink(true);
+		try {
+			const response = await getResetPasswordToken({ userId: member.id });
+			if (response?.data?.token) {
+				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
+				setResetLink(link);
+				setHasCopiedResetLink(false);
+				setShowResetLinkDialog(true);
+				onClose();
+			}
+		} catch {
+			toast.error('Failed to generate password reset link', {
+				richColors: true,
+				position: 'top-right',
+			});
+		} finally {
+			setIsGeneratingLink(false);
+		}
+	}, [member, onClose]);
+
+	const handleCopyResetLink = useCallback(async (): Promise<void> => {
+		if (!resetLink) {
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(resetLink);
+			setHasCopiedResetLink(true);
+			setTimeout(() => setHasCopiedResetLink(false), 2000);
+			toast.success('Reset link copied to clipboard', { richColors: true });
+		} catch {
+			toast.error('Failed to copy link', {
+				richColors: true,
+			});
+		}
+	}, [resetLink]);
+
+	const handleCopyInviteLink = useCallback(async (): Promise<void> => {
+		if (!member?.token) {
+			toast.error('Invite link is not available', {
+				richColors: true,
+				position: 'top-right',
+			});
+			return;
+		}
+		const inviteLink = `${window.location.origin}${ROUTES.SIGN_UP}?token=${member.token}`;
+		try {
+			await navigator.clipboard.writeText(inviteLink);
+			toast.success('Invite link copied to clipboard', {
+				richColors: true,
+				position: 'top-right',
+			});
+		} catch {
+			toast.error('Failed to copy invite link', {
+				richColors: true,
+				position: 'top-right',
+			});
+		}
+	}, [member]);
+
+	const handleClose = useCallback((): void => {
+		setShowDeleteConfirm(false);
+		onClose();
+	}, [onClose]);
+
+	const joinedOnLabel = isInvited ? 'Invited On' : 'Joined On';
+
+	const drawerContent = (
+		<div className="edit-member-drawer__layout">
+			<div className="edit-member-drawer__body">
+				<div className="edit-member-drawer__field">
+					<label className="edit-member-drawer__label" htmlFor="member-name">
+						Name
+					</label>
+					<Input
+						id="member-name"
+						value={displayName}
+						onChange={(e): void => setDisplayName(e.target.value)}
+						className="edit-member-drawer__input"
+						placeholder="Enter name"
+					/>
+				</div>
+
+				<div className="edit-member-drawer__field">
+					<label className="edit-member-drawer__label" htmlFor="member-email">
+						Email Address
+					</label>
+					<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
+						<span className="edit-member-drawer__email-text">
+							{member?.email || '—'}
+						</span>
+						<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
+					</div>
+				</div>
+
+				<div className="edit-member-drawer__field">
+					<label className="edit-member-drawer__label" htmlFor="member-role">
+						Roles
+					</label>
+					<Select
+						id="member-role"
+						value={selectedRole}
+						onChange={(role): void => setSelectedRole(role as ROLES)}
+						className="edit-member-drawer__role-select"
+						suffixIcon={<ChevronDown size={14} />}
+						getPopupContainer={(triggerNode): HTMLElement =>
+							(triggerNode?.closest('.edit-member-drawer') as HTMLElement) ||
+							document.body
+						}
+					>
+						<Select.Option value="ADMIN">{capitalize('ADMIN')}</Select.Option>
+						<Select.Option value="EDITOR">{capitalize('EDITOR')}</Select.Option>
+						<Select.Option value="VIEWER">{capitalize('VIEWER')}</Select.Option>
+					</Select>
+				</div>
+
+				<div className="edit-member-drawer__meta">
+					<div className="edit-member-drawer__meta-item">
+						<span className="edit-member-drawer__meta-label">Status</span>
+						{member?.status === MemberStatus.Active ? (
+							<Badge color="forest" variant="outline">
+								ACTIVE
+							</Badge>
+						) : (
+							<Badge color="amber" variant="outline">
+								INVITED
+							</Badge>
+						)}
+					</div>
+
+					<div className="edit-member-drawer__meta-item">
+						<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
+						<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
+					</div>
+					{!isInvited && (
+						<div className="edit-member-drawer__meta-item">
+							<span className="edit-member-drawer__meta-label">Last Modified</span>
+							<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
+						</div>
+					)}
+				</div>
+			</div>
+
+			<div className="edit-member-drawer__footer">
+				<div className="edit-member-drawer__footer-left">
+					<Button
+						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+						onClick={(): void => setShowDeleteConfirm(true)}
+					>
+						<Trash2 size={12} />
+						{isInvited ? 'Cancel Invite' : 'Delete Member'}
+					</Button>
+
+					<div className="edit-member-drawer__footer-divider" />
+
+					{isInvited ? (
+						<Button
+							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+							onClick={handleCopyInviteLink}
+							disabled={!member?.token}
+						>
+							<Link size={12} />
+							Copy Invite Link
+						</Button>
+					) : (
+						<Button
+							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+							onClick={handleGenerateResetLink}
+							disabled={isGeneratingLink}
+						>
+							<RefreshCw size={12} />
+							{isGeneratingLink ? 'Generating...' : 'Generate Password Reset Link'}
+						</Button>
+					)}
+				</div>
+
+				<div className="edit-member-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 Member Details'}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+
+	const deleteDialogTitle = isInvited ? 'Cancel Invitation' : 'Delete Member';
+	const deleteDialogBody = isInvited ? (
+		<>
+			Are you sure you want to cancel the invitation for{' '}
+			<strong>{member?.email}</strong>? They will no longer be able to join the
+			workspace using this invite.
+		</>
+	) : (
+		<>
+			Are you sure you want to delete{' '}
+			<strong>{member?.name || member?.email}</strong>? This will permanently
+			remove their access to the workspace.
+		</>
+	);
+	const deleteConfirmLabel = isInvited ? 'Cancel Invite' : 'Delete Member';
+
+	return (
+		<>
+			<DrawerWrapper
+				open={open}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						handleClose();
+					}
+				}}
+				direction="right"
+				type="panel"
+				showCloseButton
+				showOverlay={false}
+				allowOutsideClick
+				header={{ title: 'Member Details' }}
+				content={drawerContent}
+				className="edit-member-drawer"
+			/>
+
+			<DialogWrapper
+				open={showResetLinkDialog}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setShowResetLinkDialog(false);
+					}
+				}}
+				title="Password Reset Link"
+				showCloseButton
+				width="base"
+				className="reset-link-dialog"
+			>
+				<div className="reset-link-dialog__content">
+					<p className="reset-link-dialog__description">
+						This creates a one-time link the team member can use to set a new password
+						for their SigNoz account.
+					</p>
+					<div className="reset-link-dialog__link-row">
+						<div className="reset-link-dialog__link-text-wrap">
+							<span className="reset-link-dialog__link-text">{resetLink}</span>
+						</div>
+						<Button
+							variant="outlined"
+							color="secondary"
+							size="sm"
+							onClick={handleCopyResetLink}
+							prefixIcon={
+								hasCopiedResetLink ? <Check size={12} /> : <Copy size={12} />
+							}
+							className="reset-link-dialog__copy-btn"
+						>
+							{hasCopiedResetLink ? 'Copied!' : 'Copy'}
+						</Button>
+					</div>
+				</div>
+			</DialogWrapper>
+
+			<DialogWrapper
+				open={showDeleteConfirm}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setShowDeleteConfirm(false);
+					}
+				}}
+				title={deleteDialogTitle}
+				width="narrow"
+				className="alert-dialog delete-dialog"
+				showCloseButton={false}
+				disableOutsideClick={false}
+			>
+				<p className="delete-dialog__body">{deleteDialogBody}</p>
+
+				<DialogFooter className="delete-dialog__footer">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setShowDeleteConfirm(false)}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						size="sm"
+						disabled={isDeleting}
+						onClick={handleDelete}
+					>
+						<Trash2 size={12} />
+						{isDeleting ? 'Processing...' : deleteConfirmLabel}
+					</Button>
+				</DialogFooter>
+			</DialogWrapper>
+		</>
+	);
+}
+
+export default EditMemberDrawer;

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -0,0 +1,264 @@
+.invite-members-modal {
+	max-width: 700px;
+	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;
+
+		.invite-members-modal__content {
+			display: flex;
+			flex-direction: column;
+			gap: var(--spacing-8);
+			padding: var(--padding-4);
+		}
+	}
+}
+
+.invite-members-modal__table {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 100%;
+}
+
+.invite-members-modal__table-header {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-8);
+	width: 100%;
+
+	.email-header {
+		flex: 0 0 240px;
+	}
+
+	.role-header {
+		flex: 1 0 0;
+		min-width: 0;
+	}
+
+	.action-header {
+		flex: 0 0 32px;
+	}
+
+	.table-header-cell {
+		font-family: Inter, sans-serif;
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		line-height: var(--paragraph-base-400-line-height);
+		letter-spacing: -0.07px;
+		color: var(--foreground);
+	}
+}
+
+.invite-members-modal__container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	width: 100%;
+}
+
+.team-member-row {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-8);
+	width: 100%;
+
+	> .email-cell {
+		flex: 0 0 240px;
+	}
+
+	> .role-cell {
+		flex: 1 0 0;
+		min-width: 0;
+	}
+
+	> .action-cell {
+		flex: 0 0 32px;
+	}
+}
+
+.team-member-cell {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+
+	&.action-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 32px;
+	}
+}
+
+.team-member-email-input {
+	width: 100%;
+	height: 32px;
+	color: var(--l1-foreground);
+	background-color: var(--l2-background);
+	border-color: var(--border);
+	font-size: var(--paragraph-base-400-font-size);
+
+	&::placeholder {
+		color: var(--l3-foreground);
+	}
+
+	&:focus {
+		border-color: var(--primary);
+		box-shadow: none;
+	}
+}
+.team-member-role-select {
+	width: 100%;
+
+	.ant-select-selector {
+		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);
+			line-height: 32px;
+		}
+	}
+
+	.ant-select-arrow {
+		color: var(--foreground);
+	}
+
+	&.ant-select-focused .ant-select-selector,
+	&:not(.ant-select-disabled):hover .ant-select-selector {
+		border-color: var(--primary);
+	}
+}
+
+.remove-team-member-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	min-width: 32px;
+	border: none;
+	border-radius: 2px;
+	background: transparent;
+	color: var(--destructive);
+	opacity: 0.6;
+	padding: 0;
+	transition: background-color 0.2s, opacity 0.2s;
+	box-shadow: none;
+
+	&:hover {
+		background: rgba(229, 72, 77, 0.1);
+		opacity: 0.9;
+	}
+}
+
+.email-error-message {
+	display: block;
+	font-family: Inter, sans-serif;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-18);
+	color: var(--destructive);
+}
+
+.invite-team-members-error-callout {
+	background: rgba(229, 72, 77, 0.1);
+	border: 1px solid rgba(229, 72, 77, 0.2);
+	border-radius: 4px;
+	animation: horizontal-shaking 300ms ease-out;
+}
+
+@keyframes horizontal-shaking {
+	0% {
+		transform: translateX(0);
+	}
+	25% {
+		transform: translateX(5px);
+	}
+	50% {
+		transform: translateX(-5px);
+	}
+	75% {
+		transform: translateX(5px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+.invite-members-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: 0;
+	flex-shrink: 0;
+}
+
+.invite-members-modal__footer-right {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.add-another-member-button {
+	&:hover {
+		border-color: var(--primary);
+		border-style: dashed;
+		color: var(--l1-foreground);
+	}
+}
+
+.lightMode {
+	.invite-members-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+
+	.team-member-role-select {
+		.ant-select-selector {
+			.ant-select-selection-item {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -0,0 +1,333 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
+import { Style } from '@signozhq/design-tokens';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
+import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/sonner';
+import { Select } from 'antd';
+import sendInvite from 'api/v1/invite/create';
+import { cloneDeep, debounce } from 'lodash-es';
+import { ROLES } from 'types/roles';
+import { v4 as uuid } from 'uuid';
+
+import './InviteMembersModal.styles.scss';
+
+interface InviteRow {
+	id: string;
+	email: string;
+	role: ROLES | '';
+}
+
+export interface InviteMembersModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSuccess?: () => void;
+}
+
+const EMPTY_ROW = (): InviteRow => ({ id: uuid(), email: '', role: '' });
+
+const isRowTouched = (row: InviteRow): boolean =>
+	row.email.trim() !== '' || Boolean(row.role && row.role.trim() !== '');
+
+function InviteMembersModal({
+	open,
+	onClose,
+	onSuccess,
+}: InviteMembersModalProps): JSX.Element {
+	const [rows, setRows] = useState<InviteRow[]>([]);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
+		{},
+	);
+	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
+	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
+
+	const resetAndClose = useCallback((): void => {
+		setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
+		setEmailValidity({});
+		setHasInvalidEmails(false);
+		setHasInvalidRoles(false);
+		onClose();
+	}, [onClose]);
+
+	useEffect(() => {
+		if (open) {
+			setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
+		}
+	}, [open]);
+
+	const getValidationErrorMessage = (): string => {
+		if (hasInvalidEmails && hasInvalidRoles) {
+			return 'Please enter valid emails and select roles for team members';
+		}
+		if (hasInvalidEmails) {
+			return 'Please enter valid emails for team members';
+		}
+		return 'Please select roles for team members';
+	};
+
+	const validateAllUsers = useCallback((): boolean => {
+		let isValid = true;
+		let hasEmailErrors = false;
+		let hasRoleErrors = false;
+
+		const updatedEmailValidity: Record<string, boolean> = {};
+
+		const touchedRows = rows.filter(isRowTouched);
+
+		touchedRows.forEach((row) => {
+			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.email);
+			const roleValid = Boolean(row.role && row.role.trim() !== '');
+
+			if (!emailValid || !row.email) {
+				isValid = false;
+				hasEmailErrors = true;
+			}
+			if (!roleValid) {
+				isValid = false;
+				hasRoleErrors = true;
+			}
+
+			if (row.id) {
+				updatedEmailValidity[row.id] = emailValid;
+			}
+		});
+
+		setEmailValidity(updatedEmailValidity);
+		setHasInvalidEmails(hasEmailErrors);
+		setHasInvalidRoles(hasRoleErrors);
+
+		return isValid;
+	}, [rows]);
+
+	const debouncedValidateEmail = useMemo(
+		() =>
+			debounce((email: string, rowId: string) => {
+				const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+				setEmailValidity((prev) => ({ ...prev, [rowId]: isValid }));
+			}, 500),
+		[],
+	);
+
+	const updateEmail = (id: string, email: string): void => {
+		const updatedRows = cloneDeep(rows);
+		const rowToUpdate = updatedRows.find((r) => r.id === id);
+		if (rowToUpdate) {
+			rowToUpdate.email = email;
+			setRows(updatedRows);
+
+			if (hasInvalidEmails) {
+				setHasInvalidEmails(false);
+			}
+			if (emailValidity[id] === false) {
+				setEmailValidity((prev) => ({ ...prev, [id]: true }));
+			}
+
+			debouncedValidateEmail(email, id);
+		}
+	};
+
+	const updateRole = (id: string, role: ROLES): void => {
+		const updatedRows = cloneDeep(rows);
+		const rowToUpdate = updatedRows.find((r) => r.id === id);
+		if (rowToUpdate) {
+			rowToUpdate.role = role;
+			setRows(updatedRows);
+
+			if (hasInvalidRoles) {
+				setHasInvalidRoles(false);
+			}
+		}
+	};
+
+	const addRow = (): void => {
+		setRows((prev) => [...prev, EMPTY_ROW()]);
+	};
+
+	const removeRow = (id: string): void => {
+		setRows((prev) => prev.filter((r) => r.id !== id));
+	};
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		if (!validateAllUsers()) {
+			return;
+		}
+
+		const touchedRows = rows.filter(isRowTouched);
+		if (touchedRows.length === 0) {
+			return;
+		}
+
+		setIsSubmitting(true);
+		let hasError = false;
+
+		await Promise.all(
+			touchedRows.map(
+				async (row): Promise<void> => {
+					try {
+						await sendInvite({
+							email: row.email.trim(),
+							name: '',
+							role: row.role as ROLES,
+							frontendBaseUrl: window.location.origin,
+						});
+					} catch (err: unknown) {
+						hasError = true;
+						const apiErr = err as {
+							response?: { status: number };
+							getErrorMessage?: () => string;
+						};
+						if (apiErr?.response?.status === 409) {
+							toast.error(`${row.email} is already a member`, { richColors: true });
+						} else {
+							const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
+							toast.error(`Failed to invite ${row.email}: ${errorMessage}`, {
+								richColors: true,
+							});
+						}
+					}
+				},
+			),
+		);
+
+		setIsSubmitting(false);
+
+		if (!hasError) {
+			toast.success('Invites sent successfully', { richColors: true });
+			resetAndClose();
+			onSuccess?.();
+		} else {
+			onSuccess?.();
+		}
+	}, [rows, onSuccess, resetAndClose, validateAllUsers]);
+
+	const touchedRows = rows.filter(isRowTouched);
+	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
+
+	return (
+		<DialogWrapper
+			title="Invite Team Members"
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					resetAndClose();
+				}
+			}}
+			showCloseButton
+			width="wide"
+			className="invite-members-modal"
+			disableOutsideClick={false}
+		>
+			<div className="invite-members-modal__content">
+				<div className="invite-members-modal__table">
+					<div className="invite-members-modal__table-header">
+						<div className="table-header-cell email-header">Email address</div>
+						<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"
+											>
+												<Trash2 size={12} />
+											</Button>
+										)}
+									</div>
+								</div>
+							),
+						)}
+					</div>
+				</div>
+
+				{(hasInvalidEmails || hasInvalidRoles) && (
+					<Callout
+						type="error"
+						size="small"
+						showIcon
+						icon={<CircleAlert size={12} />}
+						className="invite-team-members-error-callout"
+						description={getValidationErrorMessage()}
+					/>
+				)}
+			</div>
+
+			<DialogFooter className="invite-members-modal__footer">
+				<Button
+					variant="dashed"
+					color="secondary"
+					size="sm"
+					className="add-another-member-button"
+					prefixIcon={<Plus size={12} color={Style.L1_FOREGROUND} />}
+					onClick={addRow}
+				>
+					Add another
+				</Button>
+
+				<div className="invite-members-modal__footer-right">
+					<Button
+						type="button"
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={resetAndClose}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+
+					<Button
+						variant="solid"
+						color="primary"
+						size="sm"
+						onClick={handleSubmit}
+						disabled={isSubmitDisabled}
+					>
+						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
+					</Button>
+				</div>
+			</DialogFooter>
+		</DialogWrapper>
+	);
+}
+
+export default InviteMembersModal;

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

@@ -0,0 +1,204 @@
+.members-table-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+	border-radius: 4px;
+}
+
+.members-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-column-sorter {
+				color: var(--foreground);
+				opacity: 0.6;
+			}
+
+			.ant-table-column-sorter-up.active,
+			.ant-table-column-sorter-down.active {
+				color: var(--bg-base-white);
+				opacity: 1;
+			}
+		}
+	}
+
+	.ant-table-tbody {
+		> tr > td {
+			border-bottom: none !important;
+			padding: var(--padding-2) var(--padding-4);
+			background: transparent;
+			transition: none;
+		}
+
+		> tr.members-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;
+	}
+
+	.member-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;
+		}
+	}
+}
+.member-name-email-cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	height: 22px;
+	overflow: hidden;
+
+	.member-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;
+	}
+
+	.member-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;
+	}
+}
+
+.member-joined-date {
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	color: var(--foreground);
+	line-height: var(--line-height-18);
+	letter-spacing: -0.07px;
+	white-space: nowrap;
+}
+
+.member-joined-dash {
+	font-size: var(--paragraph-base-400-font-size);
+	color: var(--l3-foreground-hover);
+	line-height: var(--line-height-18);
+	letter-spacing: -0.07px;
+}
+
+.members-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-font-height);
+
+		strong {
+			font-weight: var(--font-weight-medium);
+			color: var(--bg-base-white);
+		}
+	}
+}
+
+.members-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;
+	}
+
+	.members-pagination-range {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+	}
+
+	.members-pagination-total {
+		font-size: var(--font-size-xs);
+		color: var(--foreground);
+		opacity: 0.5;
+	}
+}
+
+.lightMode {
+	.members-table {
+		.ant-table-tbody {
+			> tr.members-table-row--tinted > td {
+				background: rgba(0, 0, 0, 0.015);
+			}
+
+			> tr:hover > td {
+				background: rgba(0, 0, 0, 0.03) !important;
+			}
+		}
+	}
+
+	.members-empty-state {
+		&__text {
+			strong {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}

frontend/src/components/MembersTable/MembersTable.tsx

@@ -0,0 +1,236 @@
+import type React from 'react';
+import { Badge } from '@signozhq/badge';
+import { Pagination, Table, Tooltip } from 'antd';
+import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { MemberStatus } from 'container/MembersSettings/utils';
+import { capitalize } from 'lodash-es';
+import { useTimezone } from 'providers/Timezone';
+import { ROLES } from 'types/roles';
+
+import './MembersTable.styles.scss';
+
+export interface MemberRow {
+	id: string;
+	name?: string;
+	email: string;
+	role: ROLES;
+	status: MemberStatus;
+	joinedOn: string | null;
+	updatedAt?: string | null;
+	token?: string | null;
+}
+
+interface MembersTableProps {
+	data: MemberRow[];
+	loading: boolean;
+	total: number;
+	currentPage: number;
+	pageSize: number;
+	searchQuery: string;
+	onPageChange: (page: number) => void;
+	onRowClick?: (member: MemberRow) => void;
+	onSortChange?: (
+		sorter: SorterResult<MemberRow> | SorterResult<MemberRow>[],
+	) => void;
+}
+
+function NameEmailCell({
+	name,
+	email,
+}: {
+	name?: string;
+	email: string;
+}): JSX.Element {
+	return (
+		<div className="member-name-email-cell">
+			{name && (
+				<span className="member-name" title={name}>
+					{name}
+				</span>
+			)}
+			<Tooltip title={email} overlayClassName="member-tooltip">
+				<span className="member-email">{email}</span>
+			</Tooltip>
+		</div>
+	);
+}
+
+function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
+	if (status === MemberStatus.Active) {
+		return (
+			<Badge color="forest" variant="outline">
+				ACTIVE
+			</Badge>
+		);
+	}
+	return (
+		<Badge color="amber" variant="outline">
+			INVITED
+		</Badge>
+	);
+}
+
+function MembersEmptyState({
+	searchQuery,
+}: {
+	searchQuery: string;
+}): JSX.Element {
+	return (
+		<div className="members-empty-state">
+			<span
+				className="members-empty-state__emoji"
+				role="img"
+				aria-label="monocle face"
+			>
+				🧐
+			</span>
+			{searchQuery ? (
+				<p className="members-empty-state__text">
+					No results for <strong>{searchQuery}</strong>
+				</p>
+			) : (
+				<p className="members-empty-state__text">No members found</p>
+			)}
+		</div>
+	);
+}
+
+function MembersTable({
+	data,
+	loading,
+	total,
+	currentPage,
+	pageSize,
+	searchQuery,
+	onPageChange,
+	onRowClick,
+	onSortChange,
+}: MembersTableProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const formatJoinedOn = (date: string | null): string => {
+		if (!date) {
+			return '—';
+		}
+		const d = new Date(date);
+		if (Number.isNaN(d.getTime())) {
+			return '—';
+		}
+		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
+	};
+
+	const columns: ColumnsType<MemberRow> = [
+		{
+			title: 'Name / Email',
+			dataIndex: 'name',
+			key: 'name',
+			render: (_, record): JSX.Element => (
+				<NameEmailCell name={record.name} email={record.email} />
+			),
+		},
+		{
+			title: 'Roles',
+			dataIndex: 'role',
+			key: 'role',
+			width: 180,
+			render: (role: ROLES): JSX.Element => (
+				<Badge color="vanilla">{capitalize(role)}</Badge>
+			),
+		},
+
+		{
+			title: 'Status',
+			dataIndex: 'status',
+			key: 'status',
+			width: 100,
+			align: 'right' as const,
+			className: 'member-status-cell',
+			sorter: (a, b): number => a.status.localeCompare(b.status),
+			render: (status: MemberRow['status']): JSX.Element => (
+				<StatusBadge status={status} />
+			),
+		},
+		{
+			title: 'Joined On',
+			dataIndex: 'joinedOn',
+			key: 'joinedOn',
+			width: 250,
+			align: 'right' as const,
+			sorter: (a, b): number => {
+				if (!a.joinedOn && !b.joinedOn) {
+					return 0;
+				}
+				if (!a.joinedOn) {
+					return 1;
+				}
+				if (!b.joinedOn) {
+					return -1;
+				}
+				return new Date(a.joinedOn).getTime() - new Date(b.joinedOn).getTime();
+			},
+			render: (joinedOn: string | null): JSX.Element => {
+				const formatted = formatJoinedOn(joinedOn);
+				const isDash = formatted === '—';
+				return (
+					<span className={isDash ? 'member-joined-dash' : 'member-joined-date'}>
+						{formatted}
+					</span>
+				);
+			},
+		},
+	];
+
+	const showPaginationTotal = (_total: number, range: number[]): JSX.Element => (
+		<>
+			<span className="members-pagination-range">
+				{range[0]} &#8212; {range[1]}
+			</span>
+			<span className="members-pagination-total"> of {_total}</span>
+		</>
+	);
+
+	return (
+		<div className="members-table-wrapper">
+			<Table<MemberRow>
+				columns={columns}
+				dataSource={data}
+				rowKey="id"
+				loading={loading}
+				pagination={false}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'members-table-row--tinted' : ''
+				}
+				onRow={(record): React.HTMLAttributes<HTMLElement> => ({
+					onClick: (): void => onRowClick?.(record),
+					style: onRowClick ? { cursor: 'pointer' } : undefined,
+				})}
+				onChange={(_, __, sorter): void => {
+					if (onSortChange) {
+						onSortChange(
+							sorter as SorterResult<MemberRow> | SorterResult<MemberRow>[],
+						);
+					}
+				}}
+				showSorterTooltip={false}
+				locale={{
+					emptyText: <MembersEmptyState searchQuery={searchQuery} />,
+				}}
+				className="members-table"
+			/>
+			{total > pageSize && (
+				<Pagination
+					current={currentPage}
+					pageSize={pageSize}
+					total={total}
+					showTotal={showPaginationTotal}
+					showSizeChanger={false}
+					onChange={onPageChange}
+					className="members-table-pagination"
+				/>
+			)}
+		</div>
+	);
+}
+
+export default MembersTable;

frontend/src/constants/routes.ts

@@ -56,6 +56,7 @@ const ROUTES = {
 	BILLING: '/settings/billing',
 	ROLES_SETTINGS: '/settings/roles',
 	ROLE_DETAILS: '/settings/roles/:roleId',
+	MEMBERS_SETTINGS: '/settings/members',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -674,7 +674,7 @@ function GeneralSettings({
 	return (
 		<div className="general-settings-page">
 			<div className="general-settings-header">
-				<span className="general-settings-title">General</span>
+				<span className="general-settings-title">Workspace</span>
 				<span className="general-settings-subtitle">
 					Manage your workspace settings.
 				</span>

frontend/src/container/MembersSettings/MembersSettings.styles.scss

@@ -0,0 +1,120 @@
+.members-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;
+	}
+
+	&__controls {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+	}
+
+	&__search {
+		flex: 1;
+		min-width: 0;
+	}
+}
+
+.members-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);
+	}
+}
+
+.members-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;
+		}
+	}
+}
+
+.members-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;
+	}
+}
+
+.members-search-input {
+	height: 32px;
+	color: var(--l1-foreground);
+	background-color: var(--l2-background);
+	border-color: var(--border);
+
+	&::placeholder {
+		color: var(--l3-foreground);
+	}
+}
+
+.lightMode {
+	.members-settings {
+		&__title {
+			color: var(--text-base-black);
+		}
+	}
+
+	.members-filter-option {
+		&:hover {
+			color: var(--bg-neutral-light-100);
+		}
+	}
+}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -0,0 +1,249 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+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 getPendingInvites from 'api/v1/invite/get';
+import getAll from 'api/v1/user/get';
+import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
+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 { FilterMode, INVITE_PREFIX, MemberStatus } from './utils';
+
+import './MembersSettings.styles.scss';
+
+const PAGE_SIZE = 20;
+
+function MembersSettings(): JSX.Element {
+	const { org } = useAppContext();
+	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 [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+	const [selectedMember, setSelectedMember] = useState<MemberRow | null>(null);
+
+	const {
+		data: usersData,
+		isLoading: isUsersLoading,
+		refetch: refetchUsers,
+	} = useQuery({
+		queryFn: getAll,
+		queryKey: ['getOrgUser', org?.[0]?.id],
+	});
+
+	const {
+		data: invitesData,
+		isLoading: isInvitesLoading,
+		refetch: refetchInvites,
+	} = useQuery({
+		queryFn: getPendingInvites,
+		queryKey: ['getPendingInvites'],
+	});
+
+	const isLoading = isUsersLoading || isInvitesLoading;
+
+	const allMembers = useMemo((): MemberRow[] => {
+		const activeMembers: MemberRow[] = (usersData?.data ?? []).map((user) => ({
+			id: user.id,
+			name: user.displayName,
+			email: user.email,
+			role: user.role,
+			status: MemberStatus.Active,
+			joinedOn: user.createdAt ? String(user.createdAt) : null,
+			updatedAt: (user as { updatedAt?: number }).updatedAt
+				? String((user as { updatedAt?: number }).updatedAt)
+				: null,
+		}));
+
+		const pendingInvites: MemberRow[] = (invitesData?.data ?? []).map(
+			(invite) => ({
+				id: `${INVITE_PREFIX}${invite.id}`,
+				name: invite.name ?? '',
+				email: invite.email,
+				role: invite.role,
+				status: MemberStatus.Invited,
+				joinedOn: invite.createdAt ? String(invite.createdAt) : null,
+				token: invite.token ?? null,
+			}),
+		);
+
+		return [...activeMembers, ...pendingInvites];
+	}, [usersData, invitesData]);
+
+	const filteredMembers = useMemo((): MemberRow[] => {
+		let result = allMembers;
+
+		if (filterMode === FilterMode.Invited) {
+			result = result.filter((m) => m.status === MemberStatus.Invited);
+		}
+
+		if (searchQuery.trim()) {
+			const q = searchQuery.toLowerCase();
+			result = result.filter(
+				(m) =>
+					m?.name?.toLowerCase().includes(q) || m.email.toLowerCase().includes(q),
+			);
+		}
+
+		return result;
+	}, [allMembers, filterMode, searchQuery]);
+
+	const paginatedMembers = useMemo((): MemberRow[] => {
+		const start = (currentPage - 1) * PAGE_SIZE;
+		return filteredMembers.slice(start, start + PAGE_SIZE);
+	}, [filteredMembers, currentPage]);
+
+	const setPage = useCallback(
+		(page: number): void => {
+			urlQuery.set('page', String(page));
+			history.replace({ search: urlQuery.toString() });
+		},
+		[history, urlQuery],
+	);
+
+	const pendingCount = invitesData?.data?.length ?? 0;
+	const totalCount = allMembers.length;
+
+	const filterMenuItems: MenuProps['items'] = [
+		{
+			key: FilterMode.All,
+			label: (
+				<div className="members-filter-option">
+					<span>All members ⎯ {totalCount}</span>
+					{filterMode === FilterMode.All && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.All);
+				setPage(1);
+			},
+		},
+		{
+			key: FilterMode.Invited,
+			label: (
+				<div className="members-filter-option">
+					<span>Pending invites ⎯ {pendingCount}</span>
+					{filterMode === FilterMode.Invited && <Check size={14} />}
+				</div>
+			),
+			onClick: (): void => {
+				setFilterMode(FilterMode.Invited);
+				setPage(1);
+			},
+		},
+	];
+
+	const filterLabel =
+		filterMode === FilterMode.All
+			? `All members ⎯ ${totalCount}`
+			: `Pending invites ⎯ ${pendingCount}`;
+
+	const handleInviteSuccess = useCallback((): void => {
+		refetchUsers();
+		refetchInvites();
+	}, [refetchUsers, refetchInvites]);
+
+	const handleRowClick = useCallback((member: MemberRow): void => {
+		setSelectedMember(member);
+	}, []);
+
+	const handleDrawerClose = useCallback((): void => {
+		setSelectedMember(null);
+	}, []);
+
+	const handleMemberEditSuccess = useCallback((): void => {
+		refetchUsers();
+		refetchInvites();
+		setSelectedMember(null);
+	}, [refetchUsers, refetchInvites]);
+
+	return (
+		<>
+			<div className="members-settings">
+				<div className="members-settings__header">
+					<h1 className="members-settings__title">Members</h1>
+					<p className="members-settings__subtitle">
+						Overview of people added to this workspace.
+					</p>
+				</div>
+
+				<div className="members-settings__controls">
+					<Dropdown
+						menu={{ items: filterMenuItems }}
+						trigger={['click']}
+						overlayClassName="members-filter-dropdown"
+					>
+						<Button
+							variant="solid"
+							size="sm"
+							color="secondary"
+							className="members-filter-trigger"
+						>
+							<span>{filterLabel}</span>
+							<ChevronDown size={12} className="members-filter-trigger__chevron" />
+						</Button>
+					</Dropdown>
+
+					<div className="members-settings__search">
+						<Input
+							placeholder="Search by name or email..."
+							value={searchQuery}
+							onChange={(e): void => {
+								setSearchQuery(e.target.value);
+								setPage(1);
+							}}
+							className="members-search-input"
+							color="secondary"
+						/>
+					</div>
+
+					<Button
+						variant="solid"
+						size="sm"
+						color="primary"
+						onClick={(): void => setIsInviteModalOpen(true)}
+					>
+						<Plus size={12} />
+						Invite member
+					</Button>
+				</div>
+			</div>
+			<MembersTable
+				data={paginatedMembers}
+				loading={isLoading}
+				total={filteredMembers.length}
+				currentPage={currentPage}
+				pageSize={PAGE_SIZE}
+				searchQuery={searchQuery}
+				onPageChange={setPage}
+				onRowClick={handleRowClick}
+			/>
+
+			<InviteMembersModal
+				open={isInviteModalOpen}
+				onClose={(): void => setIsInviteModalOpen(false)}
+				onSuccess={handleInviteSuccess}
+			/>
+
+			<EditMemberDrawer
+				member={selectedMember}
+				open={selectedMember !== null}
+				onClose={handleDrawerClose}
+				onSuccess={handleMemberEditSuccess}
+			/>
+		</>
+	);
+}
+
+export default MembersSettings;

frontend/src/container/MembersSettings/utils.ts

@@ -0,0 +1,11 @@
+export const INVITE_PREFIX = 'invite-';
+
+export enum FilterMode {
+	All = 'all',
+	Invited = 'invited',
+}
+
+export enum MemberStatus {
+	Active = 'Active',
+	Invited = 'Invited',
+}

frontend/src/container/MySettings/index.tsx

@@ -161,7 +161,7 @@ function MySettings(): JSX.Element {
 		<div className="my-settings-container">
 			<div className="user-info-section">
 				<div className="user-info-section-header">
-					<div className="user-info-section-title">General </div>
+					<div className="user-info-section-title">Account </div>
 
 					<div className="user-info-section-subtitle">
 						Manage your account settings.

frontend/src/container/SideNav/SideNav.styles.scss

@@ -1057,21 +1057,20 @@
 		gap: 8px;
 
 		.user-settings-dropdown-label-text {
-			color: var(--bg-slate-50, #62687c);
+			color: var(--l3-foreground);
 			font-family: Inter;
-			font-size: 10px;
-			font-family: Inter;
-			font-weight: 600;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
 			font-style: normal;
-			line-height: 18px; /* 163.636% */
+			line-height: 18px;
 			letter-spacing: 0.88px;
 			text-transform: uppercase;
 		}
 
 		.user-settings-dropdown-label-email {
-			color: var(--bg-vanilla-400, #c0c1c3);
+			color: var(--l1-foreground);
 			font-family: Inter;
-			font-size: 12px;
+			font-size: var(--font-size-xs);
 			font-style: normal;
 			line-height: normal;
 			letter-spacing: 0.14px;
@@ -1079,7 +1078,7 @@
 	}
 
 	.ant-dropdown-menu-item-divider {
-		background-color: var(--bg-slate-500, #161922) !important;
+		background-color: var(--secondary) !important;
 	}
 
 	.ant-dropdown-menu-item-disabled {
@@ -1095,6 +1094,14 @@
 .help-support-dropdown {
 	.ant-dropdown-menu-item {
 		min-height: 32px;
+
+		.ant-dropdown-menu-title-content {
+			color: var(--l1-foreground) !important;
+		}
+
+		.user-settings-dropdown-logout-section {
+			color: var(--danger-background);
+		}
 	}
 }
 
@@ -1271,7 +1278,7 @@
 }
 
 .help-support-dropdown li.ant-dropdown-menu-item-divider {
-	background-color: var(--bg-slate-500, #161922) !important;
+	background-color: var(--secondary) !important;
 }
 
 .lightMode {
@@ -1431,22 +1438,6 @@
 		}
 	}
 
-	.settings-dropdown {
-		.user-settings-dropdown-logged-in-section {
-			.user-settings-dropdown-label-text {
-				color: var(--bg-ink-400);
-			}
-
-			.user-settings-dropdown-label-email {
-				color: var(--bg-ink-300);
-			}
-		}
-
-		.ant-dropdown-menu-item-divider {
-			background-color: var(--bg-vanilla-300) !important;
-		}
-	}
-
 	.reorder-shortcut-nav-items-modal {
 		.ant-modal-content {
 			border: 1px solid var(--bg-vanilla-300);
@@ -1503,10 +1494,6 @@
 			color: var(--bg-ink-400);
 		}
 	}
-
-	.help-support-dropdown li.ant-dropdown-menu-item-divider {
-		background-color: var(--bg-vanilla-300) !important;
-	}
 }
 
 .version-tooltip-overlay {

frontend/src/container/SideNav/SideNav.tsx

@@ -69,6 +69,7 @@ import { routeConfig } from './config';
 import { getQueryString } from './helper';
 import {
 	defaultMoreMenuItems,
+	getUserSettingsDropdownMenuItems,
 	helpSupportDropdownMenuItems as DefaultHelpSupportDropdownMenuItems,
 	helpSupportMenuItem,
 	primaryMenuItems,
@@ -485,48 +486,12 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const userSettingsDropdownMenuItems: MenuProps['items'] = useMemo(
 		() =>
-			[
-				{
-					key: 'label',
-					label: (
-						<div className="user-settings-dropdown-logged-in-section">
-							<span className="user-settings-dropdown-label-text">LOGGED IN AS</span>
-							<span className="user-settings-dropdown-label-email">{user.email}</span>
-						</div>
-					),
-					disabled: true,
-					dataTestId: 'logged-in-as-nav-item',
-				},
-				{ type: 'divider' as const },
-				{
-					key: 'account',
-					label: 'Account Settings',
-					dataTestId: 'account-settings-nav-item',
-				},
-				{
-					key: 'workspace',
-					label: 'Workspace Settings',
-					disabled: isWorkspaceBlocked,
-					dataTestId: 'workspace-settings-nav-item',
-				},
-				...(isEnterpriseSelfHostedUser || isCommunityEnterpriseUser
-					? [
-							{
-								key: 'license',
-								label: 'Manage License',
-								dataTestId: 'manage-license-nav-item',
-							},
-					  ]
-					: []),
-				{ type: 'divider' as const },
-				{
-					key: 'logout',
-					label: (
-						<span className="user-settings-dropdown-logout-section">Sign out</span>
-					),
-					dataTestId: 'logout-nav-item',
-				},
-			].filter(Boolean),
+			getUserSettingsDropdownMenuItems({
+				userEmail: user.email,
+				isWorkspaceBlocked,
+				isEnterpriseSelfHostedUser,
+				isCommunityEnterpriseUser,
+			}),
 		[
 			isEnterpriseSelfHostedUser,
 			isCommunityEnterpriseUser,
@@ -856,9 +821,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			});
 
 			switch (item.key) {
-				case ROUTES.SHORTCUTS:
-					history.push(ROUTES.SHORTCUTS);
-					break;
 				case 'invite-collaborators':
 					history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
 					break;
@@ -878,7 +840,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	};
 
 	const handleSettingsMenuItemClick = (info: SidebarItem): void => {
-		const item = userSettingsDropdownMenuItems.find(
+		const item = (userSettingsDropdownMenuItems ?? []).find(
 			(item) => item?.key === info.key,
 		);
 		let menuLabel = '';
@@ -904,6 +866,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			case 'license':
 				history.push(ROUTES.LIST_LICENSES);
 				break;
+			case 'keyboard-shortcuts':
+				history.push(ROUTES.SHORTCUTS);
+				break;
 			case 'logout':
 				Logout();
 				break;

frontend/src/container/SideNav/__tests__/menuItems.test.tsx

@@ -0,0 +1,74 @@
+import { getUserSettingsDropdownMenuItems } from 'container/SideNav/menuItems';
+
+const BASE_PARAMS = {
+	userEmail: 'test@signoz.io',
+	isWorkspaceBlocked: false,
+	isEnterpriseSelfHostedUser: false,
+	isCommunityEnterpriseUser: false,
+};
+
+describe('getUserSettingsDropdownMenuItems', () => {
+	it('always includes logged-in-as label, workspace, account, keyboard shortcuts, and sign out', () => {
+		const items = getUserSettingsDropdownMenuItems(BASE_PARAMS);
+		const keys = items?.map((item) => item?.key);
+
+		expect(keys).toContain('label');
+		expect(keys).toContain('workspace');
+		expect(keys).toContain('account');
+		expect(keys).toContain('keyboard-shortcuts');
+		expect(keys).toContain('logout');
+
+		// workspace item is enabled when workspace is not blocked
+		const workspaceItem = items?.find(
+			(item: any) => item.key === 'workspace',
+		) as any;
+
+		expect(workspaceItem?.disabled).toBe(false);
+
+		// does not include license item for regular cloud user
+		expect(keys).not.toContain('license');
+	});
+
+	it('includes manage license item for enterprise self-hosted users', () => {
+		const items = getUserSettingsDropdownMenuItems({
+			...BASE_PARAMS,
+			isEnterpriseSelfHostedUser: true,
+		});
+		const keys = items?.map((item) => item?.key);
+
+		expect(keys).toContain('license');
+	});
+
+	it('includes manage license item for community enterprise users', () => {
+		const items = getUserSettingsDropdownMenuItems({
+			...BASE_PARAMS,
+			isCommunityEnterpriseUser: true,
+		});
+		const keys = items?.map((item) => item?.key);
+
+		expect(keys).toContain('license');
+	});
+
+	it('workspace item is disabled when workspace is blocked', () => {
+		const items = getUserSettingsDropdownMenuItems({
+			...BASE_PARAMS,
+			isWorkspaceBlocked: true,
+		});
+		const workspaceItem = items?.find(
+			(item: any) => item.key === 'workspace',
+		) as any;
+
+		expect(workspaceItem?.disabled).toBe(true);
+	});
+
+	it('returns items in correct order: label, divider, workspace, account, ..., shortcuts, divider, logout', () => {
+		const items = getUserSettingsDropdownMenuItems(BASE_PARAMS) ?? [];
+		const keys = items.map((item: any) => item.key ?? item.type);
+
+		expect(keys[0]).toBe('label');
+		expect(keys[1]).toBe('divider');
+		expect(keys[2]).toBe('workspace');
+		expect(keys[3]).toBe('account');
+		expect(keys[keys.length - 1]).toBe('logout');
+	});
+});

frontend/src/container/SideNav/menuItems.tsx

@@ -1,4 +1,6 @@
 import { RocketOutlined } from '@ant-design/icons';
+import { Style } from '@signozhq/design-tokens';
+import { MenuProps } from 'antd';
 import ROUTES from 'constants/routes';
 import {
 	ArrowUpRight,
@@ -8,6 +10,7 @@ import {
 	Book,
 	Boxes,
 	BugIcon,
+	Building2,
 	ChartArea,
 	Cloudy,
 	DraftingCompass,
@@ -20,6 +23,7 @@ import {
 	Layers2,
 	LayoutGrid,
 	ListMinus,
+	LogOut,
 	MessageSquareText,
 	Plus,
 	Receipt,
@@ -32,9 +36,14 @@ import {
 	Unplug,
 	User,
 	UserPlus,
+	Users,
 } from 'lucide-react';
 
-import { SecondaryMenuItemKey, SidebarItem } from './sideNav.types';
+import {
+	SecondaryMenuItemKey,
+	SettingsNavSection,
+	SidebarItem,
+} from './sideNav.types';
 
 export const getStartedMenuItem = {
 	key: ROUTES.GET_STARTED,
@@ -296,77 +305,94 @@ export const defaultMoreMenuItems: SidebarItem[] = [
 	},
 ];
 
-export const settingsMenuItems: SidebarItem[] = [
+export const settingsNavSections: SettingsNavSection[] = [
 	{
-		key: ROUTES.SETTINGS,
-		label: 'General',
-		icon: <Settings size={16} />,
-		isEnabled: true,
-		itemKey: 'general',
-	},
-	{
-		key: ROUTES.BILLING,
-		label: 'Billing',
-		icon: <Receipt size={16} />,
-		isEnabled: false,
-		itemKey: 'billing',
-	},
-	{
-		key: ROUTES.ROLES_SETTINGS,
-		label: 'Roles',
-		icon: <Shield size={16} />,
-		isEnabled: false,
-		itemKey: 'roles',
-	},
-	{
-		key: ROUTES.ORG_SETTINGS,
-		label: 'Members & SSO',
-		icon: <User size={16} />,
-		isEnabled: false,
-		itemKey: 'members-sso',
+		key: 'general',
+		items: [
+			{
+				key: ROUTES.SETTINGS,
+				label: 'Workspace',
+				icon: <Settings size={16} />,
+				isEnabled: true,
+				itemKey: 'workspace',
+			},
+			{
+				key: ROUTES.MY_SETTINGS,
+				label: 'Account',
+				icon: <User size={16} />,
+				isEnabled: true,
+				itemKey: 'account',
+			},
+			{
+				key: ROUTES.ALL_CHANNELS,
+				label: 'Notification Channels',
+				icon: <FileKey2 size={16} />,
+				isEnabled: true,
+				itemKey: 'notification-channels',
+			},
+			{
+				key: ROUTES.BILLING,
+				label: 'Billing',
+				icon: <Receipt size={16} />,
+				isEnabled: false,
+				itemKey: 'billing',
+			},
+			{
+				key: ROUTES.INTEGRATIONS,
+				label: 'Integrations',
+				icon: <Unplug size={16} />,
+				isEnabled: false,
+				itemKey: 'integrations',
+			},
+		],
 	},
 
 	{
-		key: ROUTES.INTEGRATIONS,
-		label: 'Integrations',
-		icon: <Unplug size={16} />,
-		isEnabled: false,
-		itemKey: 'integrations',
+		key: 'identity-access',
+		title: 'Identity & Access',
+		items: [
+			{
+				key: ROUTES.ROLES_SETTINGS,
+				label: 'Roles',
+				icon: <Shield size={16} />,
+				isEnabled: false,
+				itemKey: 'roles',
+			},
+			{
+				key: ROUTES.MEMBERS_SETTINGS,
+				label: 'Members',
+				icon: <Users size={16} />,
+				isEnabled: false,
+				itemKey: 'members',
+			},
+			{
+				key: ROUTES.API_KEYS,
+				label: 'API Keys',
+				icon: <Key size={16} />,
+				isEnabled: false,
+				itemKey: 'api-keys',
+			},
+			{
+				key: ROUTES.INGESTION_SETTINGS,
+				label: 'Ingestion',
+				icon: <RocketOutlined rotate={45} />,
+				isEnabled: false,
+				itemKey: 'ingestion',
+			},
+		],
 	},
 	{
-		key: ROUTES.ALL_CHANNELS,
-		label: 'Notification Channels',
-		icon: <FileKey2 size={16} />,
-		isEnabled: true,
-		itemKey: 'notification-channels',
-	},
-	{
-		key: ROUTES.API_KEYS,
-		label: 'API Keys',
-		icon: <Key size={16} />,
-		isEnabled: false,
-		itemKey: 'api-keys',
-	},
-	{
-		key: ROUTES.INGESTION_SETTINGS,
-		label: 'Ingestion',
-		icon: <RocketOutlined rotate={45} />,
-		isEnabled: false,
-		itemKey: 'ingestion',
-	},
-	{
-		key: ROUTES.MY_SETTINGS,
-		label: 'Account Settings',
-		icon: <User size={16} />,
-		isEnabled: true,
-		itemKey: 'account-settings',
-	},
-	{
-		key: ROUTES.SHORTCUTS,
-		label: 'Keyboard Shortcuts',
-		icon: <Layers2 size={16} />,
-		isEnabled: true,
-		itemKey: 'keyboard-shortcuts',
+		key: 'authentication',
+		title: 'Authentication',
+		items: [
+			{
+				key: ROUTES.ORG_SETTINGS,
+				label: 'Single Sign-on',
+				icon: <User size={16} />,
+				isEnabled: false,
+				itemKey: 'sso',
+			},
+		],
 	},
 ];
 
@@ -417,12 +443,6 @@ export const helpSupportDropdownMenuItems: SidebarItem[] = [
 		icon: <MessageSquareText size={14} />,
 		itemKey: 'chat-support',
 	},
-	{
-		key: ROUTES.SHORTCUTS,
-		label: 'Keyboard Shortcuts',
-		icon: <Keyboard size={14} />,
-		itemKey: 'keyboard-shortcuts',
-	},
 	{
 		key: 'invite-collaborators',
 		label: 'Invite a Team Member',
@@ -431,6 +451,78 @@ export const helpSupportDropdownMenuItems: SidebarItem[] = [
 	},
 ];
 
+export interface UserSettingsMenuItemsParams {
+	userEmail: string;
+	isWorkspaceBlocked: boolean;
+	isEnterpriseSelfHostedUser: boolean;
+	isCommunityEnterpriseUser: boolean;
+}
+
+export const getUserSettingsDropdownMenuItems = ({
+	userEmail,
+	isWorkspaceBlocked,
+	isEnterpriseSelfHostedUser,
+	isCommunityEnterpriseUser,
+}: UserSettingsMenuItemsParams): MenuProps['items'] =>
+	[
+		{
+			key: 'label',
+			label: (
+				<div className="user-settings-dropdown-logged-in-section">
+					<span className="user-settings-dropdown-label-text">LOGGED IN AS</span>
+					<span className="user-settings-dropdown-label-email">{userEmail}</span>
+				</div>
+			),
+			disabled: true,
+			dataTestId: 'logged-in-as-nav-item',
+		},
+		{ type: 'divider' as const },
+		{
+			key: 'workspace',
+			label: 'Workspace Settings',
+			icon: <Building2 size={14} color={Style.L1_FOREGROUND} />,
+			disabled: isWorkspaceBlocked,
+			dataTestId: 'workspace-settings-nav-item',
+		},
+		{
+			key: 'account',
+			label: 'Account Settings',
+			icon: <User size={14} color={Style.L1_FOREGROUND} />,
+			dataTestId: 'account-settings-nav-item',
+		},
+		...(isEnterpriseSelfHostedUser || isCommunityEnterpriseUser
+			? [
+					{
+						key: 'license',
+						label: 'Manage License',
+						icon: <Shield size={14} color={Style.L1_FOREGROUND} />,
+						dataTestId: 'manage-license-nav-item',
+					},
+			  ]
+			: []),
+		{
+			key: 'keyboard-shortcuts',
+			label: 'Keyboard Shortcuts',
+			icon: <Keyboard size={14} color={Style.L1_FOREGROUND} />,
+			dataTestId: 'keyboard-shortcuts-nav-item',
+		},
+		{ type: 'divider' as const },
+		{
+			key: 'logout',
+			label: (
+				<span className="user-settings-dropdown-logout-section">Sign out</span>
+			),
+			icon: (
+				<LogOut
+					size={14}
+					className="user-settings-dropdown-logout-section"
+					color={Style.DANGER_BACKGROUND}
+				/>
+			),
+			dataTestId: 'logout-nav-item',
+		},
+	].filter(Boolean);
+
 /** Mapping of some newly added routes and their corresponding active sidebar menu key */
 export const NEW_ROUTES_MENU_ITEM_KEY_MAP: Record<string, string> = {
 	[ROUTES.TRACE]: ROUTES.TRACES_EXPLORER,

frontend/src/container/SideNav/sideNav.types.ts

@@ -24,6 +24,12 @@ export interface SidebarItem {
 
 export const CHANGELOG_LABEL = 'Full Changelog';
 
+export interface SettingsNavSection {
+	title?: string;
+	items: SidebarItem[];
+	key: string;
+}
+
 export interface DropdownSeparator {
 	type: 'divider' | 'group';
 	label?: ReactNode;

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

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

frontend/src/pages/MembersSettings/index.tsx

@@ -0,0 +1,7 @@
+import MembersSettingsContainer from 'container/MembersSettings/MembersSettings';
+
+function MembersSettings(): JSX.Element {
+	return <MembersSettingsContainer />;
+}
+
+export default MembersSettings;

frontend/src/pages/Settings/Settings.styles.scss

@@ -31,9 +31,28 @@
 		.settings-page-sidenav {
 			width: 240px;
 			height: calc(100vh - 48px);
-			border-right: 1px solid var(--Slate-500, #161922);
-			background: var(--Ink-500, #0b0c0e);
-			margin-top: 4px;
+			border-right: 1px solid var(--secondary);
+			background: var(--sidebar-primary-foreground);
+			padding-top: var(--padding-1);
+			display: flex;
+			flex-direction: column;
+			gap: var(--spacing-12);
+			overflow-y: auto;
+
+			.settings-nav-section {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.settings-nav-section-title {
+				font-size: var(--uppercase-small-600-font-size);
+				font-weight: var(--uppercase-small-600-font-weight);
+				letter-spacing: 0.88px;
+				text-transform: uppercase;
+				color: var(--l3-foreground);
+				margin-bottom: var(--margin-2);
+				padding: var(--padding-1) var(--padding-3);
+			}
 
 			.nav-item {
 				.nav-item-data {

frontend/src/pages/Settings/Settings.tsx

@@ -7,7 +7,7 @@ import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import { routeConfig } from 'container/SideNav/config';
 import { getQueryString } from 'container/SideNav/helper';
-import { settingsMenuItems as defaultSettingsMenuItems } from 'container/SideNav/menuItems';
+import { settingsNavSections } from 'container/SideNav/menuItems';
 import NavItem from 'container/SideNav/NavItem/NavItem';
 import { SidebarItem } from 'container/SideNav/sideNav.types';
 import useComponentPermission from 'hooks/useComponentPermission';
@@ -33,7 +33,7 @@ function SettingsPage(): JSX.Element {
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
 
 	const [settingsMenuItems, setSettingsMenuItems] = useState<SidebarItem[]>(
-		defaultSettingsMenuItems,
+		settingsNavSections.flatMap((section) => section.items),
 	);
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
@@ -83,6 +83,7 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
+							item.key === ROUTES.MEMBERS_SETTINGS ||
 							item.key === ROUTES.SHORTCUTS
 								? true
 								: item.isEnabled,
@@ -113,6 +114,7 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
+							item.key === ROUTES.MEMBERS_SETTINGS ||
 							item.key === ROUTES.INGESTION_SETTINGS
 								? true
 								: item.isEnabled,
@@ -136,7 +138,10 @@ function SettingsPage(): JSX.Element {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
-							item.key === ROUTES.API_KEYS || item.key === ROUTES.ORG_SETTINGS
+							item.key === ROUTES.API_KEYS ||
+							item.key === ROUTES.ORG_SETTINGS ||
+							item.key === ROUTES.MEMBERS_SETTINGS ||
+							item.key === ROUTES.ROLES_SETTINGS
 								? true
 								: item.isEnabled,
 					}));
@@ -252,25 +257,40 @@ function SettingsPage(): JSX.Element {
 
 			<div className="settings-page-content-container">
 				<div className="settings-page-sidenav" data-testid="settings-page-sidenav">
-					{settingsMenuItems
-						.filter((item) => item.isEnabled)
-						.map((item) => (
-							<NavItem
-								key={item.key}
-								item={item}
-								isActive={isActiveNavItem(item.key as string)}
-								isDisabled={false}
-								showIcon={false}
-								onClick={(event): void => {
-									logEvent('Settings V2: Menu clicked', {
-										menuLabel: item.label,
-										menuRoute: item.key,
-									});
-									handleMenuItemClick((event as unknown) as MouseEvent, item);
-								}}
-								dataTestId={item.itemKey}
-							/>
-						))}
+					{settingsNavSections.map((section) => {
+						const enabledItems = section.items.filter((sectionItem) =>
+							settingsMenuItems.some(
+								(item) => item.key === sectionItem.key && item.isEnabled,
+							),
+						);
+						if (enabledItems.length === 0) {
+							return null;
+						}
+						return (
+							<div key={section.key} className="settings-nav-section">
+								{section.title && (
+									<div className="settings-nav-section-title">{section.title}</div>
+								)}
+								{enabledItems.map((item) => (
+									<NavItem
+										key={item.key}
+										item={item}
+										isActive={isActiveNavItem(item.key as string)}
+										isDisabled={false}
+										showIcon={false}
+										onClick={(event): void => {
+											logEvent('Settings V2: Menu clicked', {
+												menuLabel: item.label,
+												menuRoute: item.key,
+											});
+											handleMenuItemClick((event as unknown) as MouseEvent, item);
+										}}
+										dataTestId={item.itemKey}
+									/>
+								))}
+							</div>
+						);
+					})}
 				</div>
 
 				<div className="settings-page-content">

frontend/src/pages/Settings/__tests__/Settings.test.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import SettingsPage from 'pages/Settings/Settings';
+import { render, screen, within } from 'tests/test-utils';
+import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { USER_ROLES } from 'types/roles';
+
+jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
+	__esModule: true,
+	default: ({ children }: { children: React.ReactNode }): React.ReactNode =>
+		children,
+}));
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('lib/history', () => ({
+	push: jest.fn(),
+	listen: jest.fn(() => jest.fn()),
+	location: { pathname: '/settings', search: '' },
+}));
+
+const getCloudAdminOverrides = (): any => ({
+	activeLicense: {
+		key: 'test-key',
+		platform: LicensePlatform.CLOUD,
+	},
+});
+
+const getSelfHostedAdminOverrides = (): any => ({
+	activeLicense: {
+		key: 'test-key',
+		platform: LicensePlatform.SELF_HOSTED,
+	},
+});
+
+describe('SettingsPage nav sections', () => {
+	describe('Cloud Admin', () => {
+		beforeEach(() => {
+			render(<SettingsPage />, undefined, {
+				role: USER_ROLES.ADMIN,
+				appContextOverrides: getCloudAdminOverrides(),
+				initialRoute: '/settings',
+			});
+		});
+
+		it.each([
+			'settings-page-sidenav',
+			'workspace',
+			'account',
+			'notification-channels',
+			'billing',
+			'roles',
+			'members',
+			'api-keys',
+			'sso',
+			'integrations',
+			'ingestion',
+		])('renders "%s" element', (id) => {
+			expect(screen.getByTestId(id)).toBeInTheDocument();
+		});
+
+		it.each(['Identity & Access', 'Authentication'])(
+			'renders "%s" section title',
+			(text) => {
+				expect(screen.getByText(text)).toBeInTheDocument();
+			},
+		);
+	});
+
+	describe('Cloud Viewer', () => {
+		beforeEach(() => {
+			render(<SettingsPage />, undefined, {
+				role: USER_ROLES.VIEWER,
+				appContextOverrides: getCloudAdminOverrides(),
+				initialRoute: '/settings',
+			});
+		});
+
+		it.each(['workspace', 'account'])('renders "%s" element', (id) => {
+			expect(screen.getByTestId(id)).toBeInTheDocument();
+		});
+
+		it.each(['billing', 'roles', 'api-keys'])(
+			'does not render "%s" element',
+			(id) => {
+				expect(screen.queryByTestId(id)).not.toBeInTheDocument();
+			},
+		);
+	});
+
+	describe('Self-hosted Admin', () => {
+		beforeEach(() => {
+			render(<SettingsPage />, undefined, {
+				role: USER_ROLES.ADMIN,
+				appContextOverrides: getSelfHostedAdminOverrides(),
+				initialRoute: '/settings',
+			});
+		});
+
+		it.each(['roles', 'members', 'api-keys', 'integrations', 'sso', 'ingestion'])(
+			'renders "%s" element',
+			(id) => {
+				expect(screen.getByTestId(id)).toBeInTheDocument();
+			},
+		);
+	});
+
+	describe('section structure', () => {
+		it('renders items in correct sections for cloud admin', () => {
+			const { container } = render(<SettingsPage />, undefined, {
+				role: USER_ROLES.ADMIN,
+				appContextOverrides: getCloudAdminOverrides(),
+				initialRoute: '/settings',
+			});
+
+			const sidenav = within(container).getByTestId('settings-page-sidenav');
+			const sections = sidenav.querySelectorAll('.settings-nav-section');
+
+			// Should have at least 2 sections (general + identity-access) for cloud admin
+			expect(sections.length).toBeGreaterThanOrEqual(2);
+		});
+
+		it('hides section entirely when all items in it are disabled', () => {
+			// Community user has very limited access — identity section should be hidden
+			render(<SettingsPage />, undefined, {
+				role: USER_ROLES.VIEWER,
+				appContextOverrides: {
+					activeLicense: null,
+				},
+				initialRoute: '/settings',
+			});
+
+			expect(screen.queryByText('IDENTITY & ACCESS')).not.toBeInTheDocument();
+		});
+	});
+});

frontend/src/pages/Settings/config.tsx

@@ -26,8 +26,10 @@ import {
 	Plus,
 	Shield,
 	User,
+	Users,
 } from 'lucide-react';
 import ChannelsEdit from 'pages/ChannelsEdit';
+import MembersSettings from 'pages/MembersSettings';
 import Shortcuts from 'pages/Shortcuts';
 
 export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [
@@ -136,6 +138,19 @@ export const billingSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
+export const membersSettings = (t: TFunction): RouteTabProps['routes'] => [
+	{
+		Component: MembersSettings,
+		name: (
+			<div className="periscope-tab">
+				<Users size={16} /> {t('routes:members').toString()}
+			</div>
+		),
+		route: ROUTES.MEMBERS_SETTINGS,
+		key: ROUTES.MEMBERS_SETTINGS,
+	},
+];
+
 export const rolesSettings = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: RolesSettings,

frontend/src/pages/Settings/utils.ts

@@ -11,6 +11,7 @@ import {
 	generalSettings,
 	ingestionSettings,
 	keyboardShortcuts,
+	membersSettings,
 	multiIngestionSettings,
 	mySettings,
 	organizationSettings,
@@ -60,7 +61,7 @@ export const getRoutes = (
 	settings.push(...alertChannels(t));
 
 	if (isAdmin) {
-		settings.push(...apiKeys(t));
+		settings.push(...apiKeys(t), ...membersSettings(t));
 	}
 
 	// todo: Sagar - check the condition for role list and details page, to whom we want to serve

frontend/src/utils/permission/index.ts

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

frontend/yarn.lock

@@ -4439,7 +4439,7 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.4"
 
-"@radix-ui/react-dialog@^1.1.11", "@radix-ui/react-dialog@^1.1.6":
+"@radix-ui/react-dialog@^1.1.1", "@radix-ui/react-dialog@^1.1.11", "@radix-ui/react-dialog@^1.1.6":
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz#1de3d7a7e9a17a9874d29c07f5940a18a119b632"
   integrity sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==
@@ -5519,6 +5519,21 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
+"@signozhq/drawer@0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@signozhq/drawer/-/drawer-0.0.4.tgz#7c6e6779602113f55df8a55076e68b9cc13c7d79"
+  integrity sha512-m/shStl5yVPjHjrhDAh3EeKqqTtMmZUBVlgJPUGgoNV3sFsuN6JNaaAtEJI8cQBWkbEEiHLWKVkL/vhbQ7YrUg==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.11"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+    vaul "^1.1.2"
+
 "@signozhq/icons@0.1.0", "@signozhq/icons@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@signozhq/icons/-/icons-0.1.0.tgz#00dfb430dbac423bfff715876f91a7b8a72509e4"
@@ -19660,6 +19675,13 @@ value-equal@^1.0.1:
   resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz"
   integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
 
+vaul@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-1.1.2.tgz#c959f8b9dc2ed4f7d99366caee433fbef91f5ba9"
+  integrity sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.1"
+
 vfile-location@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-4.1.0.tgz#69df82fb9ef0a38d0d02b90dd84620e120050dd0"

pkg/querier/promql_query.go

@@ -237,21 +237,11 @@ func (q *promqlQuery) Execute(ctx context.Context) (*qbv5.Result, error) {
 		return nil, errors.WrapInternalf(promErr, errors.CodeInternal, "error getting matrix from promql query %q", query)
 	}
 
-	excludeLabel := func(labelName string) bool {
-		if labelName == "__name__" {
-			return false
-		}
-		return strings.HasPrefix(labelName, "__") || labelName == "fingerprint"
-	}
-
 	var series []*qbv5.TimeSeries
 	for _, v := range matrix {
 		var s qbv5.TimeSeries
 		lbls := make([]*qbv5.Label, 0, len(v.Metric))
 		for name, value := range v.Metric.Copy().Map() {
-			if excludeLabel(name) {
-				continue
-			}
 			lbls = append(lbls, &qbv5.Label{
 				Key:   telemetrytypes.TelemetryFieldKey{Name: name},
 				Value: value,