chore: make some fields required in perses replicated spec

* refactor(dashboard-v2): name props interfaces by component (Props → <Component>Props)

* feat(dashboard-v2): shared header chrome + confirm-delete dialog

* feat(dashboard-v2): dashboard settings drawer — general, variables/publish tabs

* feat(dashboard-v2): sections & panels — empty states, menus, theming, review fixes

* feat(dashboard-v2): dashboard header — inline-editable title, actions menu

* feat(dashboard-v2): container wiring + new-panel flow

docs/api/openapi.yml

@@ -409,6 +409,10 @@ components:
       properties:
         duration:
           type: string
+        endTime:
+          format: date-time
+          nullable: true
+          type: string
         repeatOn:
           items:
             $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
@@ -416,7 +420,11 @@ components:
           type: array
         repeatType:
           $ref: '#/components/schemas/AlertmanagertypesRepeatType'
+        startTime:
+          format: date-time
+          type: string
       required:
+      - startTime
       - duration
       - repeatType
       type: object
@@ -450,7 +458,6 @@ components:
           type: string
       required:
       - timezone
-      - startTime
       type: object
     AuthtypesAttributeMapping:
       properties:
@@ -2425,13 +2432,6 @@ components:
         url:
           type: string
       type: object
-    DashboardPanelDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2552,13 +2552,12 @@ components:
             $ref: '#/components/schemas/DashboardtypesDatasourceSpec'
           type: object
         display:
-          $ref: '#/components/schemas/CommonDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         duration:
           type: string
         layouts:
           items:
             $ref: '#/components/schemas/DashboardtypesLayout'
-          nullable: true
           type: array
         links:
           items:
@@ -2567,7 +2566,6 @@ components:
         panels:
           additionalProperties:
             $ref: '#/components/schemas/DashboardtypesPanel'
-          nullable: true
           type: object
         refreshInterval:
           type: string
@@ -2575,10 +2573,19 @@ components:
           items:
             $ref: '#/components/schemas/DashboardtypesVariable'
           type: array
+      required:
+      - display
+      - variables
+      - panels
+      - layouts
+      - duration
       type: object
     DashboardtypesDatasourcePlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+      required:
+      - kind
+      - spec
     DashboardtypesDatasourcePluginKind:
       enum:
       - signoz/Datasource
@@ -2605,6 +2612,15 @@ components:
         plugin:
           $ref: '#/components/schemas/DashboardtypesDatasourcePlugin'
       type: object
+    DashboardtypesDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      required:
+      - name
+      type: object
     DashboardtypesDynamicVariableSpec:
       properties:
         name:
@@ -2724,6 +2740,9 @@ components:
     DashboardtypesLayout:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec:
       properties:
         kind:
@@ -2783,7 +2802,7 @@ components:
         defaultValue:
           $ref: '#/components/schemas/VariableDefaultValue'
         display:
-          $ref: '#/components/schemas/VariableDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
           type: string
         plugin:
@@ -2791,6 +2810,8 @@ components:
         sort:
           nullable: true
           type: string
+      required:
+      - display
       type: object
     DashboardtypesNumberPanelSpec:
       properties:
@@ -2810,6 +2831,9 @@ components:
           $ref: '#/components/schemas/DashboardtypesPanelKind'
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
+      required:
+      - kind
+      - spec
       type: object
     DashboardtypesPanelFormatting:
       properties:
@@ -2831,6 +2855,9 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesPanelPluginKind:
       enum:
       - signoz/TimeSeriesPanel
@@ -2928,7 +2955,7 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardPanelDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         links:
           items:
             $ref: '#/components/schemas/DashboardLink'
@@ -2938,7 +2965,12 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
+          nullable: true
           type: array
+      required:
+      - display
+      - plugin
+      - queries
       type: object
     DashboardtypesPatchOp:
       enum:
@@ -3007,6 +3039,9 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5RequestType'
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
+      required:
+      - kind
+      - spec
       type: object
     DashboardtypesQueryPlugin:
       oneOf:
@@ -3016,6 +3051,9 @@ components:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderTraceOperator'
+      required:
+      - kind
+      - spec
     DashboardtypesQueryPluginKind:
       enum:
       - signoz/BuilderQuery
@@ -3103,6 +3141,8 @@ components:
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesQueryPlugin'
+      required:
+      - plugin
       type: object
     DashboardtypesQueryVariableSpec:
       properties:
@@ -3273,6 +3313,9 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
       properties:
         kind:
@@ -3302,6 +3345,9 @@ components:
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesVariablePluginKind:
       enum:
       - signoz/DynamicVariable

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -413,11 +413,21 @@ export interface AlertmanagertypesRecurrenceDTO {
 	 * @type string
 	 */
 	duration: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	endTime?: string | null;
 	/**
 	 * @type array,null
 	 */
 	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
 	repeatType: AlertmanagertypesRepeatTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime: string;
 }
 
 export interface AlertmanagertypesScheduleDTO {
@@ -431,7 +441,7 @@ export interface AlertmanagertypesScheduleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startTime: string;
+	startTime?: string;
 	/**
 	 * @type string
 	 */
@@ -3142,17 +3152,6 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
-export interface DashboardPanelDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3857,6 +3856,17 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 export enum DashboardtypesPanelKindDTO {
 	Panel = 'Panel',
 }
+export interface DashboardtypesDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4405,42 +4415,36 @@ export interface DashboardtypesQuerySpecDTO {
 	 * @type string
 	 */
 	name?: string;
-	plugin?: DashboardtypesQueryPluginDTO;
+	plugin: DashboardtypesQueryPluginDTO;
 }
 
 export interface DashboardtypesQueryDTO {
-	kind?: Querybuildertypesv5RequestTypeDTO;
-	spec?: DashboardtypesQuerySpecDTO;
+	kind: Querybuildertypesv5RequestTypeDTO;
+	spec: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display?: DashboardPanelDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
-	plugin?: DashboardtypesPanelPluginDTO;
+	plugin: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	queries?: DashboardtypesQueryDTO[];
+	queries: DashboardtypesQueryDTO[] | null;
 }
 
 export interface DashboardtypesPanelDTO {
-	kind?: DashboardtypesPanelKindDTO;
-	spec?: DashboardtypesPanelSpecDTO;
+	kind: DashboardtypesPanelKindDTO;
+	spec: DashboardtypesPanelSpecDTO;
 }
 
-export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
+export type DashboardtypesDashboardSpecDTOPanels = {
 	[key: string]: DashboardtypesPanelDTO;
 };
 
-/**
- * @nullable
- */
-export type DashboardtypesDashboardSpecDTOPanels =
-	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
-
 export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
@@ -4537,7 +4541,7 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display?: VariableDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
 	 */
@@ -4579,23 +4583,23 @@ export interface DashboardtypesDashboardSpecDTO {
 	 * @type object
 	 */
 	datasources?: DashboardtypesDashboardSpecDTODatasources;
-	display?: CommonDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
 	 */
-	duration?: string;
+	duration: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	layouts?: DashboardtypesLayoutDTO[] | null;
+	layouts: DashboardtypesLayoutDTO[];
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
 	/**
-	 * @type object,null
+	 * @type object
 	 */
-	panels?: DashboardtypesDashboardSpecDTOPanels;
+	panels: DashboardtypesDashboardSpecDTOPanels;
 	/**
 	 * @type string
 	 */
@@ -4603,7 +4607,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	variables?: DashboardtypesVariableDTO[];
+	variables: DashboardtypesVariableDTO[];
 }
 
 export enum DashboardtypesDatasourcePluginKindDTO {

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -151,11 +151,6 @@ export function PlannedDowntimeForm(
 
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
-			const { startTime, timezone } = values;
-			if (!startTime || !timezone) {
-				// unreachable: required fields should always be present on submitting.
-				return;
-			}
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
 				alertIds:
 					values.alertRuleScope === 'all'
@@ -166,9 +161,9 @@ export function PlannedDowntimeForm(
 				name: values.name,
 				scope: values.scope,
 				schedule: {
-					startTime: startTime.format(),
+					startTime: values.startTime?.format(),
 					endTime: values.endTime?.format(),
-					timezone,
+					timezone: values.timezone!,
 					recurrence: values.recurrence,
 				},
 			};
@@ -205,17 +200,25 @@ export function PlannedDowntimeForm(
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const rec = values.recurrence;
-		const recurrence =
-			rec && rec.repeatType !== recurrenceOptions.doesNotRepeat.value
-				? {
-						duration: `${rec.duration}${durationUnit}`,
-						repeatOn: rec.repeatOn,
-						repeatType: rec.repeatType,
-					}
-				: undefined;
+		const { recurrence } = values;
+		const recurrenceData =
+			!recurrence ||
+			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
+				? undefined
+				: {
+						duration: recurrence.duration
+							? `${recurrence.duration}${durationUnit}`
+							: '',
+						startTime: values.startTime!.format(),
+						endTime: values.endTime?.format(),
+						repeatOn: recurrence.repeatOn,
+						repeatType: recurrence.repeatType,
+					};
 
-		await saveHandler({ ...values, recurrence });
+		await saveHandler({
+			...values,
+			recurrence: recurrenceData,
+		});
 	};
 
 	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
@@ -272,6 +275,9 @@ export function PlannedDowntimeForm(
 
 	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
 		const { schedule } = initialValues;
+		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
+		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
+
 		const initialAlertIds = initialValues.alertIds || [];
 
 		return {
@@ -279,12 +285,8 @@ export function PlannedDowntimeForm(
 			alertRuleScope:
 				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
 			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
-			startTime: schedule?.startTime
-				? dayjs(schedule.startTime).tz(schedule.timezone)
-				: null,
-			endTime: schedule?.endTime
-				? dayjs(schedule.endTime).tz(schedule.timezone)
-				: null,
+			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
+			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
 			recurrence: {
 				...schedule?.recurrence,
 				repeatType: !isScheduleRecurring(schedule)
@@ -295,7 +297,7 @@ export function PlannedDowntimeForm(
 			timezone: schedule?.timezone as string,
 			scope: initialValues.scope || '',
 		};
-	}, [initialValues, isEditMode, alertOptions]);
+	}, [initialValues, alertOptions]);
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
@@ -339,7 +341,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData]);
+	}, [formData, recurrenceType]);
 
 	return (
 		<Modal

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -142,6 +142,7 @@ export function CollapseListContent({
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
 }): JSX.Element {
+	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
@@ -192,7 +193,10 @@ export function CollapseListContent({
 				'Timezone',
 				<Typography>{schedule?.timezone || '-'}</Typography>,
 			)}
-			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
+			{renderItems(
+				'Repeats',
+				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
+			)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -6,7 +6,7 @@ import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
 	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesScheduleDTO,
+	AlertmanagertypesRecurrenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
@@ -66,17 +66,14 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	schedule?: AlertmanagertypesScheduleDTO | null,
+	recurrence?: AlertmanagertypesRecurrenceDTO | null,
+	timezone?: string,
 ): string => {
-	if (!schedule) {
-		return 'No';
-	}
-	const { startTime, endTime, timezone, recurrence } = schedule;
 	if (!recurrence) {
 		return 'No';
 	}
 
-	const { duration, repeatOn, repeatType } = recurrence;
+	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
 
 	const formattedStartTime = startTime
 		? formatDateTime(startTime, timezone)
@@ -98,7 +95,7 @@ export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDT
 			timezone: '',
 			endTime: undefined,
 			recurrence: undefined,
-			startTime: '',
+			startTime: undefined,
 		},
 		alertIds: [],
 		createdAt: undefined,

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -11,7 +11,7 @@ export const buildSchedule = (
 	schedule: Partial<AlertmanagertypesScheduleDTO>,
 ): AlertmanagertypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
-	startTime: schedule?.startTime ?? '',
+	startTime: schedule?.startTime,
 	endTime: schedule?.endTime,
 	recurrence: schedule?.recurrence,
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardActions/DashboardActions.tsx

@@ -1,29 +1,36 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
 import {
 	ClipboardCopy,
+	Configure,
 	Ellipsis,
 	FileJson,
 	Fullscreen,
 	LockKeyhole,
 	PenLine,
 	Plus,
+	Trash2,
 } from '@signozhq/icons';
-import { Popover } from 'antd';
 import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
+import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
+import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
+import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
+import DashboardSettings from '../../DashboardSettings';
+import SettingsDrawer from '../SettingsDrawer';
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardActionsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
@@ -45,17 +52,19 @@ function DashboardActions({
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
-}: Props): JSX.Element {
+}: DashboardActionsProps): JSX.Element {
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
-	const id = dashboard.id;
+	const id = dashboard.id ?? '';
 	const title = dashboard.spec?.display?.name ?? '';
 
-	const [isDashboardSettingsOpen, setIsDashboardSettingsOpen] =
+	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
 		useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
+	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
+	const deleteDashboardMutation = useDeleteDashboard(id);
 
 	useEffect(() => {
 		if (state.error) {
@@ -66,9 +75,12 @@ function DashboardActions({
 		}
 	}, [state.error, state.value, t]);
 
-	const dashboardDataJSON = (): string => JSON.stringify(dashboard, null, 2);
+	const dashboardDataJSON = useCallback(
+		(): string => JSON.stringify(dashboard, null, 2),
+		[dashboard],
+	);
 
-	const exportJSON = (): void => {
+	const exportJSON = useCallback((): void => {
 		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
 		const url = URL.createObjectURL(blob);
 		const link = document.createElement('a');
@@ -78,119 +90,141 @@ function DashboardActions({
 		link.click();
 		document.body.removeChild(link);
 		URL.revokeObjectURL(url);
-	};
+	}, [dashboardDataJSON, title]);
+
+	const handleConfirmDelete = useCallback((): void => {
+		deleteDashboardMutation.mutate(undefined, {
+			onSuccess: () => {
+				setIsDeleteOpen(false);
+				history.replace(ROUTES.ALL_DASHBOARD);
+			},
+		});
+	}, [deleteDashboardMutation]);
+
+	const menuItems = useMemo<MenuItem[]>(() => {
+		const editGroup: MenuItem[] = [];
+		if (!isDashboardLocked && editDashboard) {
+			editGroup.push({
+				key: 'rename',
+				label: 'Rename',
+				icon: <PenLine size={14} />,
+				onClick: onOpenRename,
+			});
+		}
+		if (isAuthor || user.role === USER_ROLES.ADMIN) {
+			editGroup.push({
+				key: 'lock',
+				label: isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard',
+				icon: <LockKeyhole size={14} />,
+				disabled: dashboard.createdBy === 'integration',
+				onClick: onLockToggle,
+			});
+		}
+		editGroup.push({
+			key: 'fullscreen',
+			label: 'Full screen',
+			icon: <Fullscreen size={14} />,
+			onClick: handle.enter,
+		});
+
+		const exportGroup: MenuItem[] = [
+			{
+				key: 'export',
+				label: 'Export JSON',
+				icon: <FileJson size={14} />,
+				onClick: exportJSON,
+			},
+			{
+				key: 'copy',
+				label: 'Copy as JSON',
+				icon: <ClipboardCopy size={14} />,
+				onClick: (): void => setCopy(dashboardDataJSON()),
+			},
+		];
+
+		const dangerGroup: MenuItem[] = [
+			{
+				key: 'delete',
+				label: 'Delete dashboard',
+				icon: <Trash2 size={14} />,
+				danger: true,
+				onClick: (): void => setIsDeleteOpen(true),
+			},
+		];
+
+		return [editGroup, exportGroup, dangerGroup]
+			.filter((group) => group.length > 0)
+			.flatMap((group, index) =>
+				index > 0 ? [{ type: 'divider' } as MenuItem, ...group] : group,
+			);
+	}, [
+		isDashboardLocked,
+		editDashboard,
+		isAuthor,
+		user.role,
+		dashboard.createdBy,
+		onOpenRename,
+		onLockToggle,
+		handle.enter,
+		exportJSON,
+		setCopy,
+		dashboardDataJSON,
+	]);
 
 	return (
 		<div className={styles.rightSection}>
 			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-			<Popover
-				open={isDashboardSettingsOpen}
-				arrow={false}
-				onOpenChange={(visible): void => setIsDashboardSettingsOpen(visible)}
-				rootClassName={styles.dashboardSettings}
-				content={
-					<div className={styles.menuContent}>
-						<section className={styles.section1}>
-							{(isAuthor || user.role === USER_ROLES.ADMIN) && (
-								<TooltipSimple
-									title={
-										dashboard.createdBy === 'integration'
-											? 'Dashboards created by integrations cannot be unlocked'
-											: ''
-									}
-								>
-									<Button
-										variant="ghost"
-										prefix={<LockKeyhole size={14} />}
-										disabled={dashboard.createdBy === 'integration'}
-										onClick={(): void => {
-											setIsDashboardSettingsOpen(false);
-											onLockToggle();
-										}}
-										testId="lock-unlock-dashboard"
-									>
-										{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
-									</Button>
-								</TooltipSimple>
-							)}
-
-							{!isDashboardLocked && editDashboard && (
-								<Button
-									variant="ghost"
-									prefix={<PenLine size={14} />}
-									onClick={(): void => {
-										onOpenRename();
-										setIsDashboardSettingsOpen(false);
-									}}
-								>
-									Rename
-								</Button>
-							)}
-
-							<Button
-								variant="ghost"
-								prefix={<Fullscreen size={14} />}
-								onClick={handle.enter}
-							>
-								Full screen
-							</Button>
-						</section>
-						<section className={styles.section2}>
-							<Button
-								variant="ghost"
-								prefix={<FileJson size={14} />}
-								onClick={(): void => {
-									exportJSON();
-									setIsDashboardSettingsOpen(false);
-								}}
-							>
-								Export JSON
-							</Button>
-							<Button
-								variant="ghost"
-								prefix={<ClipboardCopy size={14} />}
-								onClick={(): void => {
-									setCopy(dashboardDataJSON());
-									setIsDashboardSettingsOpen(false);
-								}}
-							>
-								Copy as JSON
-							</Button>
-						</section>
-						<section className={styles.deleteDashboard}>
-							<DeleteButton
-								createdBy={dashboard.createdBy || ''}
-								name={title}
-								id={id}
-								isLocked={isDashboardLocked}
-								routeToListPage
-							/>
-						</section>
-					</div>
-				}
-				trigger="click"
-				placement="bottomRight"
-			>
+			<DropdownMenuSimple menu={{ items: menuItems }}>
 				<Button
 					variant="ghost"
+					color="secondary"
 					size="icon"
 					prefix={<Ellipsis size={14} />}
 					className={styles.icons}
 					testId="options"
 				/>
-			</Popover>
+			</DropdownMenuSimple>
+			{!isDashboardLocked && editDashboard && (
+				<>
+					<Button
+						variant="solid"
+						color="secondary"
+						prefix={<Configure size="md" />}
+						testId="show-drawer"
+						onClick={(): void => setIsSettingsDrawerOpen(true)}
+						size="md"
+					>
+						Configure
+					</Button>
+					<SettingsDrawer
+						drawerTitle="Dashboard Configuration"
+						isOpen={isSettingsDrawerOpen}
+						onClose={(): void => setIsSettingsDrawerOpen(false)}
+					>
+						<DashboardSettings dashboard={dashboard} />
+					</SettingsDrawer>
+				</>
+			)}
 			{!isDashboardLocked && addPanelPermission && (
 				<Button
 					variant="solid"
 					color="primary"
-					className={styles.addPanelBtn}
 					onClick={onAddPanel}
 					prefix={<Plus size="md" />}
 					testId="add-panel-header"
+					size="md"
 				>
 					New Panel
 				</Button>
 			)}
+			<ConfirmDeleteDialog
+				open={isDeleteOpen}
+				title={`Delete dashboard "${title}"?`}
+				description="This action cannot be undone."
+				isLoading={deleteDashboardMutation.isLoading}
+				onConfirm={handleConfirmDelete}
+				onClose={(): void => setIsDeleteOpen(false)}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardDescription.module.scss

@@ -20,6 +20,7 @@
 			align-items: center;
 			gap: 8px;
 			width: 45%;
+			height: 40px;
 
 			.dashboardImg {
 				height: 16px;
@@ -42,6 +43,35 @@
 				overflow: hidden;
 			}
 
+			.clickableTitle {
+				cursor: pointer;
+			}
+
+			.titleEdit {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				width: 100%;
+				min-width: 0;
+			}
+
+			.titleInput {
+				flex: 1;
+				min-width: 0;
+				max-width: 70%;
+			}
+
+			.titleEditActionButton {
+				--button-height: auto;
+				--button-padding: 4px;
+				flex-shrink: 0;
+			}
+
+			.titleSaveActionButton {
+				--button-border-color: var(--text-forest-700);
+				--button-outlined-foreground: var(--text-forest-700);
+			}
+
 			.publicDashboardIcon {
 				margin-right: 4px;
 			}
@@ -54,6 +84,7 @@
 			flex-wrap: wrap;
 			align-items: center;
 			gap: 14px;
+			height: 40px;
 
 			.icons {
 				display: flex;
@@ -77,41 +108,6 @@
 			.icons:hover {
 				background-color: unset;
 			}
-
-			.configureButton {
-				display: flex;
-				align-items: center;
-				width: 93px;
-				height: 34px;
-				padding: 6px;
-				justify-content: center;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 10px; /* 83.333% */
-				letter-spacing: 0.12px;
-			}
-
-			.addPanelBtn {
-				display: flex;
-				width: 119px;
-				height: 34px;
-				padding: 5.937px 11.875px;
-				justify-content: center;
-				align-items: center;
-				color: var(--primary-foreground);
-				background: var(--primary-background);
-				font-family: Inter;
-				font-size: 11.875px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 17.812px; /* 150% */
-			}
 		}
 	}
 
@@ -209,95 +205,6 @@
 	}
 }
 
-.renameDashboard {
-	:global(.ant-modal-content) {
-		width: 384px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		padding: 0px;
-
-		:global(.ant-modal-header) {
-			height: 52px;
-			padding: 16px;
-			background: var(--l2-background);
-			border-bottom: 1px solid var(--l1-border);
-			margin-bottom: 0px;
-
-			:global(.ant-modal-title) {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				width: 349px;
-				height: 20px;
-			}
-		}
-
-		:global(.ant-modal-body) {
-			padding: 16px;
-
-			.dashboardContent {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
-				.nameText {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 20px; /* 142.857% */
-				}
-
-				.dashboardNameInput {
-					display: flex;
-					padding: 6px 6px 6px 8px;
-					align-items: center;
-					gap: 4px;
-					align-self: stretch;
-					border-radius: 0px 2px 2px 0px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-				}
-			}
-		}
-
-		:global(.ant-modal-footer) {
-			padding: 16px;
-			margin-top: 0px;
-
-			.dashboardRename {
-				display: flex;
-				flex-direction: row-reverse;
-				gap: 12px;
-
-				.cancelBtn {
-					display: flex;
-					padding: 4px 8px;
-					justify-content: center;
-					align-items: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--l1-border);
-				}
-
-				.renameBtn {
-					display: flex;
-					align-items: center;
-					width: 169px;
-					padding: 4px 8px;
-					justify-content: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--primary-background);
-				}
-			}
-		}
-	}
+.deleteModal :global(.ant-modal-confirm-body) {
+	align-items: center;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -3,12 +3,12 @@ import { isEmpty } from 'lodash-es';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardMetaProps {
 	tags: string[];
 	description: string;
 }
 
-function DashboardMeta({ tags, description }: Props): JSX.Element {
+function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
 	return (
 		<>
 			{tags.length > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -1,14 +1,25 @@
-import { Globe, LockKeyhole } from '@signozhq/icons';
+import { KeyboardEvent } from 'react';
+import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardTitleProps {
 	title: string;
 	image: string;
 	isPublicDashboard: boolean;
 	isDashboardLocked: boolean;
+	isEditable: boolean;
+	isEditing: boolean;
+	draft: string;
+	onDraftChange: (value: string) => void;
+	onStartEdit: () => void;
+	onCommit: () => void;
+	onCancel: () => void;
 }
 
 function DashboardTitle({
@@ -16,18 +27,76 @@ function DashboardTitle({
 	image,
 	isPublicDashboard,
 	isDashboardLocked,
-}: Props): JSX.Element {
+	isEditable,
+	isEditing,
+	draft,
+	onDraftChange,
+	onStartEdit,
+	onCommit,
+	onCancel,
+}: DashboardTitleProps): JSX.Element {
+	const canEdit = isEditable && !isDashboardLocked;
+
+	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			onCommit();
+		} else if (event.key === 'Escape') {
+			onCancel();
+		}
+	};
+
 	return (
 		<div className={styles.leftSection}>
 			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
-			<TooltipSimple title={title.length > 30 ? title : ''}>
-				<Typography.Text
-					className={styles.dashboardTitle}
-					data-testid="dashboard-title"
-				>
-					{title}
-				</Typography.Text>
-			</TooltipSimple>
+			{isEditing ? (
+				<div className={styles.titleEdit}>
+					<Input
+						autoFocus
+						value={draft}
+						testId="dashboard-title-input"
+						maxLength={120}
+						className={styles.titleInput}
+						onChange={(e): void => onDraftChange(e.target.value)}
+						onKeyDown={onKeyDown}
+					/>
+					<Button
+						type="button"
+						variant="outlined"
+						size="icon"
+						className={cx(styles.titleEditActionButton, styles.titleSaveActionButton)}
+						aria-label="Save title"
+						testId="dashboard-title-save"
+						onClick={onCommit}
+					>
+						<Check size={14} />
+					</Button>
+					<Button
+						type="button"
+						variant="outlined"
+						color="destructive"
+						size="icon"
+						className={styles.titleEditActionButton}
+						aria-label="Cancel title edit"
+						testId="dashboard-title-cancel"
+						onClick={onCancel}
+					>
+						<X size={14} />
+					</Button>
+				</div>
+			) : (
+				<TooltipSimple title={title.length > 30 ? title : ''}>
+					<Typography.Text
+						className={cx(styles.dashboardTitle, {
+							[styles.clickableTitle]: canEdit,
+						})}
+						data-testid="dashboard-title"
+						onClick={canEdit ? onStartEdit : undefined}
+					>
+						{title}
+					</Typography.Text>
+				</TooltipSimple>
+			)}
 
 			{isPublicDashboard && (
 				<TooltipSimple title="This dashboard is publicly accessible">

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/useEditableTitle.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseEditableTitleArgs {
+	value: string;
+	onSave: (next: string) => void;
+}
+
+interface UseEditableTitleResult {
+	isEditing: boolean;
+	draft: string;
+	setDraft: (next: string) => void;
+	startEdit: () => void;
+	cancel: () => void;
+	commit: () => void;
+}
+
+/**
+ * Drives an inline-editable title. The parent owns the canonical `value`; this
+ * hook tracks the in-flight `draft` and whether we're editing. `commit` saves
+ * only when the trimmed draft is non-empty and actually changed. A `cancelled`
+ * ref guards against a blur firing right after Escape from also committing.
+ */
+export function useEditableTitle({
+	value,
+	onSave,
+}: UseEditableTitleArgs): UseEditableTitleResult {
+	const [isEditing, setIsEditing] = useState<boolean>(false);
+	const [draft, setDraft] = useState<string>(value);
+	const cancelled = useRef<boolean>(false);
+
+	// Keep the draft in sync with the canonical value while not editing (e.g.
+	// after a refetch updates the title).
+	useEffect(() => {
+		if (!isEditing) {
+			setDraft(value);
+		}
+	}, [value, isEditing]);
+
+	const startEdit = (): void => {
+		cancelled.current = false;
+		setDraft(value);
+		setIsEditing(true);
+	};
+
+	const cancel = (): void => {
+		cancelled.current = true;
+		setIsEditing(false);
+	};
+
+	const commit = (): void => {
+		if (cancelled.current) {
+			cancelled.current = false;
+			return;
+		}
+		const trimmed = draft.trim();
+		if (trimmed && trimmed !== value) {
+			onSave(trimmed);
+		}
+		setIsEditing(false);
+	};
+
+	return { isEditing, draft, setDraft, startEdit, cancel, commit };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/RenameDashboardModal/RenameDashboardModal.tsx

@@ -1,70 +0,0 @@
-import { Input, Modal } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { Check, X } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from '../DashboardDescription.module.scss';
-
-interface Props {
-	open: boolean;
-	value: string;
-	isLoading: boolean;
-	onChange: (value: string) => void;
-	onRename: () => void;
-	onClose: () => void;
-}
-
-function RenameDashboardModal({
-	open,
-	value,
-	isLoading,
-	onChange,
-	onRename,
-	onClose,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Rename Dashboard"
-			onOk={onRename}
-			onCancel={onClose}
-			rootClassName={styles.renameDashboard}
-			footer={
-				<div className={styles.dashboardRename}>
-					<Button
-						variant="solid"
-						color="primary"
-						prefix={<Check size={14} />}
-						className={styles.renameBtn}
-						onClick={onRename}
-						disabled={isLoading}
-					>
-						Rename Dashboard
-					</Button>
-					<Button
-						variant="ghost"
-						prefix={<X size={14} />}
-						className={styles.cancelBtn}
-						onClick={onClose}
-					>
-						Cancel
-					</Button>
-				</div>
-			}
-		>
-			<div className={styles.dashboardContent}>
-				<Typography.Text className={styles.nameText}>
-					Enter a new name
-				</Typography.Text>
-				<Input
-					data-testid="dashboard-name"
-					className={styles.dashboardNameInput}
-					value={value}
-					onChange={(e): void => onChange(e.target.value)}
-				/>
-			</div>
-		</Modal>
-	);
-}
-
-export default RenameDashboardModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.module.scss

@@ -0,0 +1,43 @@
+.settingsContainerRoot {
+	:global(.ant-drawer-wrapper-body) {
+		border-left: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+		:global(.ant-drawer-header) {
+			height: 48px;
+			border-bottom: 1px solid var(--l1-border);
+			padding: 14px 14px 14px 11px;
+
+			:global(.ant-drawer-header-title) {
+				gap: 16px;
+
+				:global(.ant-drawer-title) {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+					padding-left: 16px;
+					border-left: 1px solid var(--l1-border);
+				}
+
+				:global(.ant-drawer-close) {
+					height: 16px;
+					width: 16px;
+					margin-inline-end: 0px !important;
+				}
+			}
+		}
+
+		:global(.ant-drawer-body) {
+			padding: 16px;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+		}
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx

@@ -0,0 +1,34 @@
+import { memo, PropsWithChildren, ReactElement } from 'react';
+import { Drawer } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import styles from './SettingsDrawer.module.scss';
+
+type SettingsDrawerProps = PropsWithChildren<{
+	drawerTitle: string;
+	isOpen: boolean;
+	onClose: () => void;
+}>;
+
+function SettingsDrawer({
+	children,
+	drawerTitle,
+	isOpen,
+	onClose,
+}: SettingsDrawerProps): JSX.Element {
+	return (
+		<Drawer
+			title={drawerTitle}
+			placement="right"
+			width="50%"
+			onClose={onClose}
+			open={isOpen}
+			rootClassName={styles.settingsContainerRoot}
+		>
+			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
+			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
+		</Drawer>
+	);
+}
+
+export default memo(SettingsDrawer);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
@@ -15,6 +15,7 @@ import type {
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
+import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
@@ -22,7 +23,7 @@ import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardMeta from './DashboardMeta/DashboardMeta';
 import DashboardTitle from './DashboardTitle/DashboardTitle';
-import RenameDashboardModal from './RenameDashboardModal/RenameDashboardModal';
+import { useEditableTitle } from './DashboardTitle/useEditableTitle';
 
 import styles from './DashboardDescription.module.scss';
 
@@ -52,6 +53,9 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const { user } = useAppContext();
 	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
 	const { showErrorModal } = useErrorModal();
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -59,16 +63,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
 	const isPublicDashboard = false;
 
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
-
-	useEffect(() => {
-		setUpdatedTitle(title);
-	}, [title]);
-
-	const handleLockDashboardToggle = async (): Promise<void> => {
+	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
@@ -84,41 +79,43 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		} catch (error) {
 			showErrorModal(error as APIError);
 		}
-	};
+	}, [id, isDashboardLocked, refetch, showErrorModal]);
 
-	const onNameChangeHandler = async (): Promise<void> => {
-		const trimmed = updatedTitle.trim();
-		if (!id || !trimmed || trimmed === title) {
-			setIsRenameDashboardOpen(false);
-			return;
-		}
-		try {
-			setIsRenameLoading(true);
-			const patch: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-					path: '/spec/display/name',
-					value: trimmed,
-				},
-			];
-			await patchDashboardV2({ id }, patch);
-			toast.success('Dashboard renamed successfully');
-			setIsRenameDashboardOpen(false);
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsRenameDashboardOpen(true);
-		} finally {
-			setIsRenameLoading(false);
-		}
-	};
+	const onNameSave = useCallback(
+		async (next: string): Promise<void> => {
+			if (!id) {
+				return;
+			}
+			try {
+				const patch: DashboardtypesJSONPatchOperationDTO[] = [
+					{
+						op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+						path: '/spec/display/name',
+						value: next,
+					},
+				];
+				await patchDashboardV2({ id }, patch);
+				toast.success('Dashboard renamed successfully');
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[id, refetch, showErrorModal],
+	);
 
-	const onEmptyWidgetHandler = (): void => {
+	const { isEditing, draft, setDraft, startEdit, cancel, commit } =
+		useEditableTitle({
+			value: title,
+			onSave: onNameSave,
+		});
+
+	const onEmptyWidgetHandler = useCallback((): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
-		toast.info('V2 panel editor coming next');
-	};
+		setIsPanelTypeSelectionModalOpen(true);
+	}, [id, setIsPanelTypeSelectionModalOpen]);
 
 	return (
 		<Card className={styles.dashboardDescriptionContainer}>
@@ -129,6 +126,13 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					image={image}
 					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
+					isEditable={editDashboard}
+					isEditing={isEditing}
+					draft={draft}
+					onDraftChange={setDraft}
+					onStartEdit={startEdit}
+					onCommit={commit}
+					onCancel={cancel}
 				/>
 				<DashboardActions
 					dashboard={dashboard}
@@ -139,19 +143,10 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					addPanelPermission={addPanelPermission}
 					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
-					onOpenRename={(): void => setIsRenameDashboardOpen(true)}
+					onOpenRename={startEdit}
 				/>
 			</section>
 			<DashboardMeta tags={tags} description={description} />
-
-			<RenameDashboardModal
-				open={isRenameDashboardOpen}
-				value={updatedTitle}
-				isLoading={isRenameLoading}
-				onChange={setUpdatedTitle}
-				onRename={onNameChangeHandler}
-				onClose={(): void => setIsRenameDashboardOpen(false)}
-			/>
 		</Card>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/DashboardSettings.module.scss

@@ -0,0 +1,11 @@
+.placeholder {
+	padding: 24px;
+}
+
+.tabLabel {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	line-height: 1;
+	padding-top: 4px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/CrossPanelSync/CrossPanelSync.tsx

@@ -0,0 +1,114 @@
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
+import { Col, Radio, Tooltip } from 'antd';
+import { ExternalLink, SolidInfoCircle } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import { Events } from 'constants/events';
+import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
+import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
+import {
+	DashboardCursorSync,
+	SyncTooltipFilterMode,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { getAbsoluteUrl } from 'utils/basePath';
+import cx from 'classnames';
+
+import styles from '../GeneralSettings.module.scss';
+
+interface CrossPanelSyncProps {
+	dashboardId: string;
+}
+
+function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
+	const [cursorSyncMode, setCursorSyncMode] =
+		useDashboardCursorSyncMode(dashboardId);
+	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
+		useSyncTooltipFilterMode(dashboardId);
+
+	return (
+		<Col className={cx(styles.overviewSettings, styles.crossPanelSyncGroup)}>
+			<div className={styles.crossPanelSyncSectionHeader}>
+				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
+					Cross-Panel Sync
+				</Typography.Text>
+				<Tooltip
+					title={
+						<div className={styles.crossPanelSyncTooltipContent}>
+							<strong className={styles.crossPanelSyncTooltipTitle}>
+								Cross-Panel Sync
+							</strong>
+							<span className={styles.crossPanelSyncTooltipDescription}>
+								Sync crosshair and tooltip across all the dashboard panels
+							</span>
+							<a
+								href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
+								target="_blank"
+								rel="noopener noreferrer"
+								className={styles.crossPanelSyncTooltipDocLink}
+							>
+								Learn more
+								<ExternalLink size={12} />
+							</a>
+						</div>
+					}
+					placement="top"
+					mouseEnterDelay={0.5}
+				>
+					<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
+				</Tooltip>
+			</div>
+			<div className={styles.crossPanelSyncRow}>
+				<div className={styles.crossPanelSyncInfo}>
+					<Typography.Text className={styles.crossPanelSyncTitle}>
+						Sync Mode
+					</Typography.Text>
+					<Typography.Text className={styles.crossPanelSyncDescription}>
+						Sync crosshair and tooltip across all the dashboard panels
+					</Typography.Text>
+				</div>
+				<Radio.Group
+					value={cursorSyncMode}
+					onChange={(e): void => {
+						setCursorSyncMode(e.target.value as DashboardCursorSync);
+					}}
+				>
+					<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
+					<Radio.Button value={DashboardCursorSync.Crosshair}>
+						Crosshair
+					</Radio.Button>
+					<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
+				</Radio.Group>
+			</div>
+			{cursorSyncMode === DashboardCursorSync.Tooltip && (
+				<div className={styles.crossPanelSyncRow}>
+					<div className={styles.crossPanelSyncInfo}>
+						<Typography.Text className={styles.crossPanelSyncTitle}>
+							Synced Tooltip Series
+						</Typography.Text>
+						<Typography.Text className={styles.crossPanelSyncDescription}>
+							Show only series that intersect on group-by, or every series with the
+							matching ones highlighted
+						</Typography.Text>
+					</div>
+					<Radio.Group
+						value={syncTooltipFilterMode}
+						onChange={(e): void => {
+							void logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
+								path: getAbsoluteUrl(window.location.pathname),
+								mode: e.target.value,
+							});
+							setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
+						}}
+					>
+						<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
+						<Radio.Button value={SyncTooltipFilterMode.Filtered}>
+							Filtered
+						</Radio.Button>
+					</Radio.Group>
+				</div>
+			)}
+		</Col>
+	);
+}
+
+export default CrossPanelSync;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralForm/GeneralForm.tsx

@@ -0,0 +1,85 @@
+import { Dispatch, SetStateAction } from 'react';
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Select/Input to @signozhq/ui
+import { Col, Input, Select, Space } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
+
+import { Base64Icons } from '../utils';
+import styles from '../GeneralSettings.module.scss';
+
+const { Option } = Select;
+
+interface GeneralFormProps {
+	title: string;
+	description: string;
+	image: string;
+	tags: string[];
+	onTitleChange: (value: string) => void;
+	onDescriptionChange: (value: string) => void;
+	onImageChange: (value: string) => void;
+	onTagsChange: Dispatch<SetStateAction<string[]>>;
+}
+
+function GeneralForm({
+	title,
+	description,
+	image,
+	tags,
+	onTitleChange,
+	onDescriptionChange,
+	onImageChange,
+	onTagsChange,
+}: GeneralFormProps): JSX.Element {
+	return (
+		<Col className={styles.overviewSettings}>
+			<Space direction="vertical" className={styles.formSpace}>
+				<div>
+					<Typography className={styles.dashboardName}>Dashboard Name</Typography>
+					<section className={styles.nameIconInput}>
+						<Select
+							defaultActiveFirstOption
+							data-testid="dashboard-image"
+							suffixIcon={null}
+							rootClassName={styles.dashboardImageInput}
+							value={image}
+							onChange={onImageChange}
+						>
+							{Base64Icons.map((icon) => (
+								<Option value={icon} key={icon}>
+									<img
+										src={icon}
+										alt="dashboard-icon"
+										className={styles.listItemImage}
+									/>
+								</Option>
+							))}
+						</Select>
+						<Input
+							data-testid="dashboard-name"
+							className={styles.dashboardNameInput}
+							value={title}
+							onChange={(e): void => onTitleChange(e.target.value)}
+						/>
+					</section>
+				</div>
+
+				<div>
+					<Typography className={styles.dashboardName}>Description</Typography>
+					<Input.TextArea
+						data-testid="dashboard-desc"
+						rows={6}
+						value={description}
+						className={styles.descriptionTextArea}
+						onChange={(e): void => onDescriptionChange(e.target.value)}
+					/>
+				</div>
+				<div>
+					<Typography className={styles.dashboardName}>Tags</Typography>
+					<AddTags tags={tags} setTags={onTagsChange} />
+				</div>
+			</Space>
+		</Col>
+	);
+}
+
+export default GeneralForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -0,0 +1,238 @@
+.overviewContent {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	padding: 20px 16px;
+}
+
+.overviewSettings {
+	padding: 16px;
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+}
+
+.crossPanelSyncGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.formSpace {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 21px;
+}
+
+.crossPanelSyncSectionTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.crossPanelSyncSectionHeader {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	align-self: flex-start;
+}
+
+.crossPanelSyncInfoIcon {
+	cursor: help;
+	color: var(--l3-foreground);
+}
+
+.crossPanelSyncTooltipContent {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	max-width: 300px;
+}
+
+.crossPanelSyncTooltipTitle {
+	font-size: 14px;
+}
+
+.crossPanelSyncTooltipDescription {
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.crossPanelSyncTooltipDocLink {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--primary-background);
+	font-size: 12px;
+	margin-top: 4px;
+}
+
+.crossPanelSyncRow {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 16px;
+
+	& + & {
+		padding-top: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.crossPanelSyncInfo {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.crossPanelSyncTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.crossPanelSyncDescription {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.nameIconInput {
+	display: flex;
+}
+
+.dashboardImageInput {
+	:global(.ant-select-selector) {
+		display: flex;
+		width: 32px;
+		height: 32px;
+		padding: 6px;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l3-background) !important;
+
+		:global(.ant-select-selection-item) {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&:global(.ant-select-dropdown) {
+		padding: 0px !important;
+	}
+
+	:global(.ant-select-item) {
+		padding: 0px;
+		align-items: center;
+		justify-content: center;
+
+		:global(.ant-select-item-option-content) {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
+
+.listItemImage {
+	height: 16px;
+	width: 16px;
+}
+
+.dashboardNameInput {
+	border-radius: 0px 2px 2px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.dashboardName {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	margin-bottom: 0.5rem;
+}
+
+.descriptionTextArea {
+	padding: 6px 6px 6px 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.overviewSettingsFooter {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: -webkit-fill-available;
+	padding: 12px 16px 12px 0px;
+	position: fixed;
+	bottom: 0;
+	height: 32px;
+	border-top: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.unsaved {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.unsavedDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50px;
+	background: var(--primary-background);
+	box-shadow: 0px 0px 6px 0px
+		color-mix(in srgb, var(--primary-background) 40%, transparent);
+}
+
+.unsavedChanges {
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: -0.07px;
+}
+
+.footerActionBtns {
+	display: flex;
+	gap: 8px;
+}
+
+.discardBtn {
+	display: flex;
+	align-items: center;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.saveBtn {
+	display: flex;
+	align-items: center;
+	margin: 0px !important;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/UnsavedChangesFooter/UnsavedChangesFooter.tsx

@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@signozhq/ui/button';
+import { Check, X } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../GeneralSettings.module.scss';
+
+interface UnsavedChangesFooterProps {
+	count: number;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function UnsavedChangesFooter({
+	count,
+	isSaving,
+	onDiscard,
+	onSave,
+}: UnsavedChangesFooterProps): JSX.Element {
+	const { t } = useTranslation('common');
+
+	return (
+		<div className={styles.overviewSettingsFooter}>
+			<div className={styles.unsaved}>
+				<div className={styles.unsavedDot} />
+				<Typography.Text className={styles.unsavedChanges}>
+					{count} unsaved change
+					{count > 1 && 's'}
+				</Typography.Text>
+			</div>
+			<div className={styles.footerActionBtns}>
+				<Button
+					variant="ghost"
+					disabled={isSaving}
+					prefix={<X size={14} />}
+					onClick={onDiscard}
+					className={styles.discardBtn}
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					disabled={isSaving}
+					loading={isSaving}
+					prefix={<Check size={14} />}
+					testId="save-dashboard-config"
+					onClick={onSave}
+					className={styles.saveBtn}
+				>
+					{t('save')}
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default UnsavedChangesFooter;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/index.tsx

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesJSONPatchOperationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { toast } from '@signozhq/ui/sonner';
+import { isEqual } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
+import GeneralForm from './GeneralForm/GeneralForm';
+import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
+import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
+import styles from './GeneralSettings.module.scss';
+
+interface GeneralSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
+	const id = dashboard.id;
+
+	const refetch = useDashboardStore((s) => s.refetch);
+
+	const title = dashboard.spec?.display?.name ?? '';
+	const description = dashboard.spec?.display?.description ?? '';
+	const image = dashboard.image || Base64Icons[0];
+	const tagsAsStrings = useMemo(
+		() => tagsToStrings(dashboard.tags ?? []),
+		[dashboard.tags],
+	);
+
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
+	const [updatedDescription, setUpdatedDescription] =
+		useState<string>(description);
+	const [updatedImage, setUpdatedImage] = useState<string>(image);
+	const [isSaving, setIsSaving] = useState<boolean>(false);
+	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
+		useState<number>(0);
+
+	const { showErrorModal } = useErrorModal();
+
+	// Sync state when dashboard refetches after a save
+	useEffect(() => {
+		setUpdatedTitle(title);
+		setUpdatedDescription(description);
+		setUpdatedImage(image);
+		setUpdatedTags(tagsAsStrings);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard.updatedAt]);
+
+	const buildPatch = useCallback((): DashboardtypesJSONPatchOperationDTO[] => {
+		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+		const replace = (
+			path: string,
+			value: unknown,
+		): DashboardtypesJSONPatchOperationDTO => ({
+			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+			path,
+			value,
+		});
+
+		if (updatedTitle !== title) {
+			ops.push(replace('/spec/display/name', updatedTitle));
+		}
+		if (updatedDescription !== description) {
+			ops.push(replace('/spec/display/description', updatedDescription));
+		}
+		if (updatedImage !== image) {
+			ops.push(replace('/image', updatedImage));
+		}
+		if (!isEqual(updatedTags, tagsAsStrings)) {
+			ops.push(replace('/tags', stringsToTags(updatedTags)));
+		}
+		return ops;
+	}, [
+		updatedTitle,
+		title,
+		updatedDescription,
+		description,
+		updatedImage,
+		image,
+		updatedTags,
+		tagsAsStrings,
+	]);
+
+	const onSaveHandler = useCallback(async (): Promise<void> => {
+		if (!id) {
+			return;
+		}
+		const ops = buildPatch();
+		if (ops.length === 0) {
+			return;
+		}
+
+		try {
+			setIsSaving(true);
+			await patchDashboardV2({ id }, ops);
+			toast.success('Dashboard updated');
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [id, buildPatch, refetch, showErrorModal]);
+
+	useEffect(() => {
+		let n = 0;
+		const initialValues = [title, description, tagsAsStrings, image];
+		const updatedValues = [
+			updatedTitle,
+			updatedDescription,
+			updatedTags,
+			updatedImage,
+		];
+		initialValues.forEach((val, index) => {
+			if (!isEqual(val, updatedValues[index])) {
+				n += 1;
+			}
+		});
+		setNumberOfUnsavedChanges(n);
+	}, [
+		description,
+		image,
+		tagsAsStrings,
+		title,
+		updatedDescription,
+		updatedImage,
+		updatedTags,
+		updatedTitle,
+	]);
+
+	const discardHandler = useCallback((): void => {
+		setUpdatedTitle(title);
+		setUpdatedImage(image);
+		setUpdatedTags(tagsAsStrings);
+		setUpdatedDescription(description);
+	}, [title, image, tagsAsStrings, description]);
+
+	return (
+		<div className={styles.overviewContent}>
+			<GeneralForm
+				title={updatedTitle}
+				description={updatedDescription}
+				image={updatedImage}
+				tags={updatedTags}
+				onTitleChange={setUpdatedTitle}
+				onDescriptionChange={setUpdatedDescription}
+				onImageChange={setUpdatedImage}
+				onTagsChange={setUpdatedTags}
+			/>
+			<CrossPanelSync dashboardId={id} />
+			{numberOfUnsavedChanges > 0 && (
+				<UnsavedChangesFooter
+					count={numberOfUnsavedChanges}
+					isSaving={isSaving}
+					onDiscard={discardHandler}
+					onSave={onSaveHandler}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default GeneralSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/utils.ts

@@ -0,0 +1,24 @@
+import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schemas';
+
+export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+
+// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
+// collapsed back to just `x` for display.
+export function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
+	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
+}
+
+export function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
+	return tagStrings
+		.map((s) => {
+			const trimmed = s.trim();
+			const idx = trimmed.indexOf(':');
+			if (idx === -1) {
+				return { key: trimmed, value: trimmed };
+			}
+			const key = trimmed.slice(0, idx).trim();
+			const value = trimmed.slice(idx + 1).trim();
+			return { key, value: value || key };
+		})
+		.filter((t) => t.key.length > 0);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/index.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+
+import { Braces, Globe, Table } from '@signozhq/icons';
+import { Tabs } from '@signozhq/ui/tabs';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import GeneralSettings from './General';
+import { SettingsTabPlaceholder } from './utils';
+
+import styles from './DashboardSettings.module.scss';
+
+interface DashboardSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+function tabLabel(icon: JSX.Element, text: string): JSX.Element {
+	return (
+		<span className={styles.tabLabel}>
+			{icon}
+			{text}
+		</span>
+	);
+}
+
+function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
+	const items = useMemo(
+		() => [
+			{
+				key: 'general',
+				label: tabLabel(<Table size={14} />, 'General'),
+				children: <GeneralSettings dashboard={dashboard} />,
+			},
+			{
+				key: 'variables',
+				label: tabLabel(<Braces size={14} />, 'Variables'),
+				children: (
+					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
+				),
+			},
+			{
+				key: 'public-dashboard',
+				label: tabLabel(<Globe size={14} />, 'Publish'),
+				children: (
+					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
+				),
+			},
+		],
+		[dashboard],
+	);
+
+	return <Tabs defaultValue="general" items={items} />;
+}
+
+export default DashboardSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/utils.tsx

@@ -0,0 +1,23 @@
+import { Empty } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './DashboardSettings.module.scss';
+
+/**
+ * TEMPORARY: stand-in for the not-yet-built Variables / Publish settings tabs.
+ * Will be cleaned up later once those tabs ship their real content.
+ */
+export function SettingsTabPlaceholder({
+	message,
+}: {
+	message: string;
+}): JSX.Element {
+	return (
+		<div className={styles.placeholder}>
+			<Empty
+				image={Empty.PRESENTED_IMAGE_SIMPLE}
+				description={<Typography.Text>{message}</Typography.Text>}
+			/>
+		</div>
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.module.scss

@@ -0,0 +1,86 @@
+.emptyState {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	padding: 48px 16px;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	width: 100%;
+	max-width: 480px;
+}
+
+.heading {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+
+	.emoji {
+		height: 32px;
+		width: 32px;
+	}
+
+	.welcome {
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: 16px;
+		font-weight: 500;
+		line-height: 24px;
+		letter-spacing: -0.08px;
+	}
+
+	.welcomeInfo {
+		color: var(--l3-foreground);
+		font-family: Inter;
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 18px;
+	}
+}
+
+.addPanel {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	padding: 16px;
+	border: 1px dashed var(--l1-border);
+	border-radius: 6px;
+}
+
+.addPanelText {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+
+	.icon {
+		height: 14px;
+		width: 14px;
+		margin-top: 2px;
+	}
+}
+
+.addPanelCopy {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.addPanelTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.addPanelInfo {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 18px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -0,0 +1,63 @@
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
+
+import dashboardEmojiUrl from '@/assets/Icons/dashboard_emoji.svg';
+import landscapeUrl from '@/assets/Icons/landscape.svg';
+
+import styles from './DashboardEmptyState.module.scss';
+
+interface DashboardEmptyStateProps {
+	canAddPanel: boolean;
+}
+
+function DashboardEmptyState({
+	canAddPanel,
+}: DashboardEmptyStateProps): JSX.Element {
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
+
+	return (
+		<section className={styles.emptyState}>
+			<div className={styles.content}>
+				<div className={styles.heading}>
+					<img src={dashboardEmojiUrl} alt="" className={styles.emoji} />
+					<Typography.Text className={styles.welcome}>
+						Welcome to your new dashboard
+					</Typography.Text>
+					<Typography.Text className={styles.welcomeInfo}>
+						Follow the steps to populate it with data and share with your teammates
+					</Typography.Text>
+				</div>
+
+				<div className={styles.addPanel}>
+					<div className={styles.addPanelText}>
+						<img src={landscapeUrl} alt="" className={styles.icon} />
+						<div className={styles.addPanelCopy}>
+							<Typography.Text className={styles.addPanelTitle}>
+								Add panels
+							</Typography.Text>
+							<Typography.Text className={styles.addPanelInfo}>
+								Add panels to visualize your data
+							</Typography.Text>
+						</div>
+					</div>
+					{canAddPanel && (
+						<Button
+							color="primary"
+							prefix={<Plus size="md" />}
+							onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
+							testId="add-panel"
+						>
+							New Panel
+						</Button>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+export default DashboardEmptyState;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.module.scss

@@ -4,7 +4,7 @@
 	height: 100%;
 	width: 100%;
 	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
+	border: 1px solid var(--l1-border);
 	border-radius: 4px;
 	overflow: hidden;
 }
@@ -14,7 +14,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 8px 12px;
-	border-bottom: 1px solid var(--bg-slate-400, #1d212d);
+	border-bottom: 1px solid var(--l1-border);
 	cursor: grab;
 }
 
@@ -42,7 +42,7 @@
 	align-items: center;
 	justify-content: center;
 	padding: 12px;
-	color: var(--bg-vanilla-400, #8993ae);
+	color: var(--l2-foreground);
 	font-size: 12px;
 	text-align: center;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -12,7 +12,15 @@ import type { MovePanelArgs } from './hooks/useMovePanelToSection';
 import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
-interface Props {
+/** Panel action context — present together only in editable sectioned mode. */
+export interface PanelActionsConfig {
+	currentLayoutIndex: number;
+	sections: DashboardSection[];
+	onMovePanel: (args: MovePanelArgs) => void;
+	onDeletePanel: (args: DeletePanelArgs) => void;
+}
+
+interface PanelProps {
 	panel: DashboardtypesPanelDTO | undefined;
 	panelId: string;
 	/**
@@ -21,22 +29,16 @@ interface Props {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
-	/** Section actions — present only in editable sectioned mode. */
-	currentLayoutIndex?: number;
-	sections?: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
+	/** Move/delete actions — present only in editable sectioned mode. */
+	panelActions?: PanelActionsConfig;
 }
 
 function Panel({
 	panel,
 	panelId,
 	isVisible,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
+	panelActions,
+}: PanelProps): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
 	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
@@ -65,13 +67,13 @@ function Panel({
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
+				{panelActions ? (
 					<PanelActionsMenu
 						panelId={panelId}
-						currentLayoutIndex={currentLayoutIndex}
-						sections={sections ?? []}
-						onMovePanel={onMovePanel}
-						onDeletePanel={onDeletePanel}
+						currentLayoutIndex={panelActions.currentLayoutIndex}
+						sections={panelActions.sections}
+						onMovePanel={panelActions.onMovePanel}
+						onDeletePanel={panelActions.onDeletePanel}
 					/>
 				) : (
 					<EllipsisVertical size={14} />

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -6,11 +6,11 @@
 	background: transparent;
 	border: none;
 	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
+	color: var(--l2-foreground);
 	cursor: pointer;
 
 	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
+		color: var(--l1-foreground);
+		background: var(--l2-background);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 
@@ -8,7 +9,7 @@ import type { DeletePanelArgs } from '../hooks/useDeletePanel';
 import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
 import styles from './PanelActionsMenu.module.scss';
 
-interface Props {
+interface PanelActionsMenuProps {
 	panelId: string;
 	currentLayoutIndex: number;
 	sections: DashboardSection[];
@@ -22,7 +23,7 @@ function PanelActionsMenu({
 	sections,
 	onMovePanel,
 	onDeletePanel,
-}: Props): JSX.Element {
+}: PanelActionsMenuProps): JSX.Element {
 	const items = useMemo<MenuItem[]>(() => {
 		const result: MenuItem[] = [];
 
@@ -75,8 +76,11 @@ function PanelActionsMenu({
 
 	return (
 		<DropdownMenuSimple menu={{ items }}>
-			<button
+			<Button
 				type="button"
+				variant="ghost"
+				color="secondary"
+				size="icon"
 				className={styles.trigger}
 				aria-label="Panel actions"
 				data-testid={`panel-actions-${panelId}`}
@@ -87,7 +91,7 @@ function PanelActionsMenu({
 				onClick={(e): void => e.stopPropagation()}
 			>
 				<EllipsisVertical size={14} />
-			</button>
+			</Button>
 		</DropdownMenuSimple>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -10,9 +10,9 @@
 	gap: 8px;
 	padding: 12px;
 	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
+	border: 1px solid var(--l1-border);
 	border-radius: 4px;
-	color: var(--bg-vanilla-100, #fff);
+	color: var(--l1-foreground);
 	cursor: pointer;
 	text-align: left;
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -1,48 +1,10 @@
 import { Modal } from 'antd';
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 
+import { PANEL_TYPES } from './constants';
 import styles from './PanelTypeSelectionModal.module.scss';
 
-interface PanelType {
-	pluginKind: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-const PANEL_TYPES: PanelType[] = [
-	{
-		pluginKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		icon: <ChartLine size={16} />,
-	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
-	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
-	{
-		pluginKind: 'signoz/BarChartPanel',
-		label: 'Bar Chart',
-		icon: <BarChart size={16} />,
-	},
-	{
-		pluginKind: 'signoz/PieChartPanel',
-		label: 'Pie Chart',
-		icon: <ChartPie size={16} />,
-	},
-	{
-		pluginKind: 'signoz/HistogramPanel',
-		label: 'Histogram',
-		icon: <BarChart size={16} />,
-	},
-	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
-];
-
-interface Props {
+interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
 	onSelect: (pluginKind: string) => void;
@@ -52,7 +14,7 @@ function PanelTypeSelectionModal({
 	open,
 	onClose,
 	onSelect,
-}: Props): JSX.Element {
+}: PanelTypeSelectionModalProps): JSX.Element {
 	return (
 		<Modal
 			open={open}
@@ -63,16 +25,17 @@ function PanelTypeSelectionModal({
 		>
 			<div className={styles.grid}>
 				{PANEL_TYPES.map((type) => (
-					<button
+					<Button
 						key={type.pluginKind}
 						type="button"
+						variant="ghost"
 						className={styles.typeButton}
 						data-testid={`panel-type-${type.pluginKind}`}
 						onClick={(): void => onSelect(type.pluginKind)}
 					>
 						{type.icon}
 						{type.label}
-					</button>
+					</Button>
 				))}
 			</div>
 		</Modal>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.tsx

@@ -0,0 +1,36 @@
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+
+import type { PanelType } from './types';
+
+export const PANEL_TYPES: PanelType[] = [
+	{
+		pluginKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		icon: <ChartLine size={16} />,
+	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
+	{
+		pluginKind: 'signoz/BarChartPanel',
+		label: 'Bar Chart',
+		icon: <BarChart size={16} />,
+	},
+	{
+		pluginKind: 'signoz/PieChartPanel',
+		label: 'Pie Chart',
+		icon: <ChartPie size={16} />,
+	},
+	{
+		pluginKind: 'signoz/HistogramPanel',
+		label: 'Histogram',
+		icon: <BarChart size={16} />,
+	},
+	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
+];

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -0,0 +1,5 @@
+export interface PanelType {
+	pluginKind: string;
+	label: string;
+	icon: JSX.Element;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts

@@ -36,9 +36,6 @@ export function useAddPanelToSection({
 
 	return useCallback(
 		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
 			const target = sections.find((s) => s.layoutIndex === layoutIndex);
 			if (!target) {
 				return;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss

@@ -5,13 +5,13 @@
 	margin-top: 8px;
 	padding: 8px 12px;
 	background: transparent;
-	border: 1px dashed var(--bg-slate-400, #1d212d);
+	border: 1px dashed var(--l1-border);
 	border-radius: 4px;
-	color: var(--bg-vanilla-400, #8993ae);
+	color: var(--l2-foreground);
 	cursor: pointer;
 
 	&:hover {
 		border-color: var(--bg-robin-500);
-		color: var(--bg-vanilla-100, #fff);
+		color: var(--l1-foreground);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { DashboardSection } from '../../../utils';
@@ -10,7 +11,7 @@ import styles from './AddSectionControl.module.scss';
 
 const DEFAULT_SECTION_TITLE = 'New section';
 
-interface Props {
+interface AddSectionControlProps {
 	sections: DashboardSection[];
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
 	isSectioned: boolean;
@@ -20,7 +21,7 @@ function AddSectionControl({
 	sections,
 	layouts,
 	isSectioned,
-}: Props): JSX.Element {
+}: AddSectionControlProps): JSX.Element {
 	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
 	const { addSection } = useAddSection({ layouts });
 	const { migrate, isSaving } = useFirstSectionMigration({ sections });
@@ -30,30 +31,31 @@ function AddSectionControl({
 	const needsMigration =
 		!isSectioned && sections.some((s) => s.items.length > 0);
 
-	const handleClick = (): void => {
+	const handleClick = useCallback((): void => {
 		if (needsMigration) {
 			setIsMigrationOpen(true);
 			return;
 		}
 		void addSection(DEFAULT_SECTION_TITLE);
-	};
+	}, [needsMigration, addSection]);
 
-	const handleConfirmMigration = async (): Promise<void> => {
+	const handleConfirmMigration = useCallback(async (): Promise<void> => {
 		await migrate(DEFAULT_SECTION_TITLE);
 		setIsMigrationOpen(false);
-	};
+	}, [migrate]);
 
 	return (
 		<>
-			<button
+			<Button
 				type="button"
+				variant="ghost"
 				className={styles.addButton}
 				onClick={handleClick}
 				data-testid="add-section"
 			>
 				<Plus size={14} />
 				Add section
-			</button>
+			</Button>
 			<FirstSectionMigrationModal
 				open={isMigrationOpen}
 				isSaving={isSaving}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx

@@ -1,7 +1,7 @@
 import { Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
-interface Props {
+interface FirstSectionMigrationModalProps {
 	open: boolean;
 	isSaving: boolean;
 	onClose: () => void;
@@ -18,7 +18,7 @@ function FirstSectionMigrationModal({
 	isSaving,
 	onClose,
 	onConfirm,
-}: Props): JSX.Element {
+}: FirstSectionMigrationModalProps): JSX.Element {
 	return (
 		<Modal
 			open={open}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Modal } from 'antd';
 import { Input } from '@signozhq/ui/input';
 
-interface Props {
+interface RenameSectionModalProps {
 	open: boolean;
 	initialValue: string;
 	isSaving: boolean;
@@ -16,7 +16,7 @@ function RenameSectionModal({
 	isSaving,
 	onClose,
 	onSubmit,
-}: Props): JSX.Element {
+}: RenameSectionModalProps): JSX.Element {
 	const [value, setValue] = useState<string>(initialValue);
 
 	// Reseed the field each time the modal opens.

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.module.scss

@@ -1,9 +1,20 @@
 .section {
 	margin-bottom: 12px;
-	border: 1px solid var(--bg-slate-500);
+	border: 1px solid var(--l1-border);
 	border-radius: 4px;
 }
 
 .dragging {
 	opacity: 0.8;
 }
+
+.deleteModal :global(.ant-modal-confirm-body) {
+	align-items: center;
+}
+
+.emptySection {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 24px 12px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -1,8 +1,11 @@
-import { useRef, useState } from 'react';
-import { Modal } from 'antd';
+import { useCallback, useRef, useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
+import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 
+import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import type { DashboardSection } from '../../../utils';
 import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
 import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
@@ -19,7 +22,7 @@ import SectionHeader, {
 } from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
-interface Props {
+interface SectionProps {
 	section: DashboardSection;
 	/** Adds a panel to this section; present only in editable sectioned mode. */
 	onAddPanel?: (args: AddPanelArgs) => void;
@@ -38,8 +41,12 @@ function Section({
 	onMovePanel,
 	onDeletePanel,
 	dragHandle,
-}: Props): JSX.Element {
+}: SectionProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
+	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
+		(s) => s.setIsPanelTypeSelectionModalOpen,
+	);
+	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
 	// true once the section scrolls into (or near) the viewport.
@@ -54,30 +61,30 @@ function Section({
 		layoutIndex: section.layoutIndex,
 	});
 
-	const handleRenameSubmit = async (title: string): Promise<void> => {
-		const ok = await rename(title);
-		if (ok) {
-			setIsRenaming(false);
-		}
-	};
+	const handleRenameSubmit = useCallback(
+		async (title: string): Promise<void> => {
+			const ok = await rename(title);
+			if (ok) {
+				setIsRenaming(false);
+			}
+		},
+		[rename],
+	);
 
 	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = (pluginKind: string): void => {
-		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-		setIsAddingPanel(false);
-	};
+	const handleSelectPanelType = useCallback(
+		(pluginKind: string): void => {
+			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+			setIsAddingPanel(false);
+		},
+		[onAddPanel, section.layoutIndex],
+	);
 
 	const { deleteSection } = useDeleteSection({ section });
-	const confirmDeleteSection = (): void => {
-		Modal.confirm({
-			title: `Delete section "${section.title ?? ''}"?`,
-			content: 'Panels in this section will be removed.',
-			okText: 'Delete',
-			okButtonProps: { danger: true },
-			centered: true,
-			onOk: () => deleteSection(),
-		});
-	};
+	const handleDeleteSection = useCallback((): void => {
+		void deleteSection();
+		setIsDeleteOpen(false);
+	}, [deleteSection]);
 
 	const grid = (
 		<SectionGrid
@@ -118,13 +125,35 @@ function Section({
 				onToggle={toggle}
 				repeatVariable={section.repeatVariable}
 				dragHandle={dragHandle}
-				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
-				onAddPanel={
-					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
+				actions={
+					isEditable
+						? {
+								onRename: (): void => setIsRenaming(true),
+								onAddPanel: (): void => setIsAddingPanel(true),
+								onDeleteSection: (): void => setIsDeleteOpen(true),
+							}
+						: undefined
 				}
-				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
 			/>
-			{open ? grid : null}
+			{open &&
+				(section.items.length > 0 ? (
+					grid
+				) : (
+					<div className={styles.emptySection}>
+						{isEditable && (
+							<Button
+								type="button"
+								variant="dashed"
+								color="secondary"
+								prefix={<Plus size="md" />}
+								onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
+								testId={`section-add-panel-${section.id}`}
+							>
+								New Panel
+							</Button>
+						)}
+					</div>
+				))}
 			<RenameSectionModal
 				open={isRenaming}
 				initialValue={section.title}
@@ -137,6 +166,13 @@ function Section({
 				onClose={(): void => setIsAddingPanel(false)}
 				onSelect={handleSelectPanelType}
 			/>
+			<ConfirmDeleteDialog
+				open={isDeleteOpen}
+				title={`Delete section "${section.title ?? ''}"?`}
+				description="Panels in this section will be removed."
+				onConfirm={handleDeleteSection}
+				onClose={(): void => setIsDeleteOpen(false)}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -6,11 +6,11 @@
 	background: transparent;
 	border: none;
 	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
+	color: var(--l2-foreground);
 	cursor: pointer;
 
 	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
+		color: var(--l1-foreground);
+		background: var(--l2-background);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -1,11 +1,12 @@
 import { useMemo } from 'react';
 import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 
 import styles from './SectionActionsMenu.module.scss';
 
-interface Props {
+interface SectionActionsMenuProps {
 	sectionId: string;
 	onAddPanel?: () => void;
 	onRename?: () => void;
@@ -17,7 +18,7 @@ function SectionActionsMenu({
 	onAddPanel,
 	onRename,
 	onDeleteSection,
-}: Props): JSX.Element {
+}: SectionActionsMenuProps): JSX.Element {
 	const items = useMemo<MenuItem[]>(() => {
 		const result: MenuItem[] = [];
 		if (onAddPanel) {
@@ -53,14 +54,17 @@ function SectionActionsMenu({
 
 	return (
 		<DropdownMenuSimple menu={{ items }}>
-			<button
+			<Button
 				type="button"
+				variant="ghost"
+				color="secondary"
+				size="icon"
 				className={styles.trigger}
 				aria-label="Section actions"
 				data-testid={`dashboard-section-actions-${sectionId}`}
 			>
 				<EllipsisVertical size={14} />
-			</button>
+			</Button>
 		</DropdownMenuSimple>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -2,7 +2,7 @@ import type { DashboardSection } from '../../../utils';
 import SectionHeader from '../SectionHeader/SectionHeader';
 import styles from './SectionDragPreview.module.scss';
 
-interface Props {
+interface SectionDragPreviewProps {
 	section: DashboardSection;
 }
 
@@ -11,7 +11,7 @@ interface Props {
  * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
  * cheap and never triggers RGL width re-measurement.
  */
-function SectionDragPreview({ section }: Props): JSX.Element {
+function SectionDragPreview({ section }: SectionDragPreviewProps): JSX.Element {
 	const panelCount = section.items.length;
 	const title = `${section.title ?? ''} · ${panelCount} ${
 		panelCount === 1 ? 'panel' : 'panels'

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -11,7 +11,7 @@ import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
 
-interface Props {
+interface SectionGridProps {
 	items: DashboardSection['items'];
 	layoutIndex: number;
 	/** Forwarded to panels — true when the parent section is in the viewport. */
@@ -29,7 +29,7 @@ function SectionGrid({
 	sections,
 	onMovePanel,
 	onDeletePanel,
-}: Props): JSX.Element {
+}: SectionGridProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const rglLayout = useMemo<Layout[]>(
 		() =>
@@ -66,10 +66,16 @@ function SectionGrid({
 						panel={item.panel}
 						panelId={item.id}
 						isVisible={isVisible}
-						currentLayoutIndex={layoutIndex}
-						sections={isEditable ? sections : undefined}
-						onMovePanel={isEditable ? onMovePanel : undefined}
-						onDeletePanel={isEditable ? onDeletePanel : undefined}
+						panelActions={
+							isEditable && onMovePanel && onDeletePanel
+								? {
+										currentLayoutIndex: layoutIndex,
+										sections: sections ?? [],
+										onMovePanel,
+										onDeletePanel,
+									}
+								: undefined
+						}
 					/>
 				</div>
 			))}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.module.scss

@@ -5,7 +5,7 @@
 	padding: 8px 12px;
 
 	&.headerOpen {
-		border-bottom: 1px solid var(--bg-slate-500);
+		border-bottom: 1px solid var(--l1-border);
 	}
 }
 
@@ -16,7 +16,7 @@
 	padding: 0;
 	background: transparent;
 	border: none;
-	color: var(--bg-vanilla-400, #8993ae);
+	color: var(--l2-foreground);
 	cursor: grab;
 
 	&:active {
@@ -33,7 +33,8 @@
 	padding: 0;
 	background: transparent;
 	border: none;
-	color: inherit;
+	// Muted chevron; the title below carries the prominent heading color.
+	color: var(--l2-foreground);
 	text-align: left;
 	cursor: pointer;
 	min-width: 0;
@@ -41,6 +42,8 @@
 
 .title {
 	margin-left: 4px;
+	color: var(--l1-foreground);
+	font-weight: 500;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -1,6 +1,7 @@
 import type { DraggableAttributes } from '@dnd-kit/core';
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
@@ -13,7 +14,14 @@ export interface SectionDragHandle {
 	setActivatorNodeRef: (element: HTMLElement | null) => void;
 }
 
-interface Props {
+/** Editable-mode section actions — present together or not at all. */
+export interface SectionHeaderActions {
+	onRename: () => void;
+	onAddPanel: () => void;
+	onDeleteSection: () => void;
+}
+
+interface SectionHeaderProps {
 	sectionId: string;
 	title: string;
 	open: boolean;
@@ -21,9 +29,8 @@ interface Props {
 	repeatVariable?: string;
 	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
 	dragHandle?: SectionDragHandle;
-	onRename?: () => void;
-	onAddPanel?: () => void;
-	onDeleteSection?: () => void;
+	/** Present only in editable mode; absent (read-only) when locked/no-permission. */
+	actions?: SectionHeaderActions;
 }
 
 function SectionHeader({
@@ -33,16 +40,16 @@ function SectionHeader({
 	onToggle,
 	repeatVariable,
 	dragHandle,
-	onRename,
-	onAddPanel,
-	onDeleteSection,
-}: Props): JSX.Element {
-	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
+	actions,
+}: SectionHeaderProps): JSX.Element {
 	return (
 		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
 			{dragHandle ? (
-				<button
+				<Button
 					type="button"
+					variant="ghost"
+					color="secondary"
+					size="icon"
 					className={styles.dragHandle}
 					ref={dragHandle.setActivatorNodeRef}
 					aria-label="Drag to reorder section"
@@ -51,10 +58,12 @@ function SectionHeader({
 					{...dragHandle.listeners}
 				>
 					<GripVertical size={14} />
-				</button>
+				</Button>
 			) : null}
-			<button
+			<Button
 				type="button"
+				variant="ghost"
+				color="secondary"
 				className={styles.toggle}
 				onClick={onToggle}
 				data-testid={`dashboard-section-toggle-${sectionId}`}
@@ -66,13 +75,13 @@ function SectionHeader({
 						(repeats per ${repeatVariable})
 					</Typography.Text>
 				) : null}
-			</button>
-			{hasActions ? (
+			</Button>
+			{actions ? (
 				<SectionActionsMenu
 					sectionId={sectionId}
-					onAddPanel={onAddPanel}
-					onRename={onRename}
-					onDeleteSection={onDeleteSection}
+					onAddPanel={actions.onAddPanel}
+					onRename={actions.onRename}
+					onDeleteSection={actions.onDeleteSection}
 				/>
 			) : null}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx

@@ -20,12 +20,12 @@ import Section from './Section/Section';
 import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
 import SortableSection from './SortableSection';
 
-interface Props {
+interface SectionListProps {
 	sections: DashboardSection[];
 	layouts: DashboardtypesLayoutDTO[] | undefined | null;
 }
 
-function SectionList({ sections, layouts }: Props): JSX.Element {
+function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 
 	const {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx

@@ -7,7 +7,7 @@ import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
 import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
 import Section from './Section/Section';
 
-interface Props {
+interface SortableSectionProps {
 	section: DashboardSection;
 	sections: DashboardSection[];
 	onAddPanel: (args: AddPanelArgs) => void;
@@ -21,7 +21,7 @@ function SortableSection({
 	onAddPanel,
 	onMovePanel,
 	onDeletePanel,
-}: Props): JSX.Element {
+}: SortableSectionProps): JSX.Element {
 	const {
 		attributes,
 		listeners,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/index.tsx

@@ -1,7 +1,5 @@
 import { ReactNode, useMemo } from 'react';
 
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
 import type {
 	DashboardtypesLayoutDTO,
 	DashboardtypesPanelDTO,
@@ -9,7 +7,7 @@ import type {
 
 import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
-import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
+import DashboardEmptyState from './DashboardEmptyState/DashboardEmptyState';
 import Section from './Section/Section/Section';
 import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
@@ -17,12 +15,15 @@ import styles from './PanelsAndSectionsLayout.module.scss';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-interface Props {
+interface PanelsAndSectionsLayoutProps {
 	layouts: DashboardtypesLayoutDTO[];
 	panels: Record<string, DashboardtypesPanelDTO | undefined>;
 }
 
-function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
+function PanelsAndSectionsLayout({
+	layouts,
+	panels,
+}: PanelsAndSectionsLayoutProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 
 	const sections = useMemo(
@@ -40,16 +41,7 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 
 	const renderContent = (): ReactNode => {
 		if (isEmpty) {
-			return (
-				<div className={styles.emptyState}>
-					<Empty
-						image={Empty.PRESENTED_IMAGE_SIMPLE}
-						description={
-							<Typography.Text>No panels in this dashboard yet</Typography.Text>
-						}
-					/>
-				</div>
-			);
+			return <DashboardEmptyState canAddPanel={isEditable} />;
 		}
 
 		if (isSectioned) {
@@ -61,18 +53,7 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 		));
 	};
 
-	return (
-		<div className={styles.body}>
-			{renderContent()}
-			{isEditable ? (
-				<AddSectionControl
-					sections={sections}
-					layouts={layouts}
-					isSectioned={isSectioned}
-				/>
-			) : null}
-		</div>
-	);
+	return <div className={styles.body}>{renderContent()}</div>;
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/ConfirmDeleteDialog/ConfirmDeleteDialog.module.scss

@@ -0,0 +1,12 @@
+.body {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import { Trash2, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+
+import styles from './ConfirmDeleteDialog.module.scss';
+
+interface ConfirmDeleteDialogProps {
+	open: boolean;
+	title: string;
+	description: ReactNode;
+	confirmLabel?: string;
+	isLoading?: boolean;
+	onConfirm: () => void;
+	onClose: () => void;
+}
+
+/**
+ * Shared destructive-confirm dialog built on @signozhq/ui DialogWrapper (not
+ * antd Modal), so it inherits the design-system styling/theme. Used by the
+ * dashboard and section delete flows.
+ */
+function ConfirmDeleteDialog({
+	open,
+	title,
+	description,
+	confirmLabel = 'Delete',
+	isLoading = false,
+	onConfirm,
+	onClose,
+}: ConfirmDeleteDialogProps): JSX.Element {
+	const footer = (
+		<div className={styles.footer}>
+			<Button variant="solid" color="secondary" onClick={onClose}>
+				<X size={12} />
+				Cancel
+			</Button>
+			<Button
+				variant="solid"
+				color="destructive"
+				loading={isLoading}
+				onClick={onConfirm}
+				testId="confirm-delete"
+			>
+				<Trash2 size={12} />
+				{confirmLabel}
+			</Button>
+		</div>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title={title}
+			width="narrow"
+			showCloseButton={false}
+			footer={footer}
+		>
+			<div className={styles.body}>{description}</div>
+		</DialogWrapper>
+	);
+}
+
+export default ConfirmDeleteDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.module.scss

@@ -5,26 +5,23 @@
 	gap: 6px;
 	align-items: center;
 	max-width: 80%;
+	padding-left: 8px;
 
-	.dashboardBtn {
-		display: flex;
-		align-items: center;
+	.linkToPreviousPage {
+		// Collapse the design-system Button's fixed-height/padding box so it hugs
+		// the label like inline text (the breadcrumb is text, not a chunky button).
+		--button-height: auto;
+		--button-padding: 0;
+		--button-gap: 4px;
 		color: var(--l2-foreground);
 		font-family: Inter;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
 		letter-spacing: -0.07px;
-		padding: 0px;
-		height: 20px;
 	}
 
-	.dashboardBtn:hover {
-		background-color: unset;
-	}
-
-	.idBtn {
+	.currentPage {
 		display: flex;
 		align-items: center;
 		gap: 4px;
@@ -46,12 +43,9 @@
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-
-		:global(.ant-btn-icon) {
-			margin-inline-end: 4px;
-		}
 	}
-	.idBtn:hover {
+
+	.currentPage:hover {
 		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 		color: var(--bg-robin-300);
 	}

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,19 +1,23 @@
 import { useCallback } from 'react';
+import { LayoutGrid } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
 import getSessionStorageApi from 'api/browser/sessionstorage/get';
 import ROUTES from 'constants/routes';
 import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { LayoutGrid } from '@signozhq/icons';
 
 import styles from './DashboardBreadcrumbs.module.scss';
 
-interface Props {
+interface DashboardBreadcrumbsProps {
 	title: string;
 	image: string;
 }
 
-function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
+function DashboardBreadcrumbs({
+	title,
+	image,
+}: DashboardBreadcrumbsProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 
 	const goToListPage = useCallback(() => {
@@ -35,20 +39,23 @@ function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
 		<div className={styles.dashboardBreadcrumbs}>
 			<Button
 				variant="ghost"
+				color="secondary"
 				prefix={<LayoutGrid size={14} />}
-				className={styles.dashboardBtn}
 				onClick={goToListPage}
+				className={styles.linkToPreviousPage}
+				testId="dashboard-breadcrumb-list"
 			>
-				Dashboard /
+				Dashboard
 			</Button>
-			<Button variant="ghost" className={styles.idBtn}>
+			<div>/</div>
+			<div className={styles.currentPage}>
 				<img
 					src={image}
 					alt="dashboard-icon"
 					className={styles.dashboardIconImage}
 				/>
-				{title}
-			</Button>
+				<Typography.Text>{title}</Typography.Text>
+			</div>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -5,12 +5,12 @@ import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 
 import styles from './DashboardHeader.module.scss';
 
-interface Props {
+interface DashboardHeaderProps {
 	title: string;
 	image: string;
 }
 
-function DashboardHeader({ title, image }: Props): JSX.Element {
+function DashboardHeader({ title, image }: DashboardHeaderProps): JSX.Element {
 	return (
 		<div className={styles.dashboardHeader}>
 			<DashboardBreadcrumbs title={title} image={image} />

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import PanelTypeSelectionModal from 'container/DashboardContainer/PanelTypeSelectionModal';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 
@@ -10,12 +11,15 @@ import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
 import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 
-interface Props {
+interface DashboardContainerProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	refetch: () => void;
 }
 
-function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
+function DashboardContainer({
+	dashboard,
+	refetch,
+}: DashboardContainerProps): JSX.Element {
 	const fullScreenHandle = useFullScreenHandle();
 
 	const { user } = useAppContext();
@@ -43,6 +47,9 @@ function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
 				/>
 				<PanelsAndSectionsLayout layouts={layouts} panels={panels} />
 			</div>
+			{/* Shared panel-type picker (V1 component): opened from any "New Panel"
+			    trigger; navigates to the widget editor route on selection. */}
+			<PanelTypeSelectionModal />
 		</FullScreen>
 	);
 }

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/maintenance.go

@@ -2,7 +2,6 @@ package sqlalertmanagerstore
 
 import (
 	"context"
-	"encoding/json"
 	"log/slog"
 	"time"
 
@@ -40,20 +39,16 @@ func (r *maintenance) ListPlannedMaintenance(ctx context.Context, orgID string)
 		return nil, err
 	}
 
-	plannedMaintenances := make([]*alertmanagertypes.PlannedMaintenance, 0, len(gettableMaintenancesRules))
+	gettablePlannedMaintenance := make([]*alertmanagertypes.PlannedMaintenance, 0)
 	for _, gettableMaintenancesRule := range gettableMaintenancesRules {
-		pm, err := gettableMaintenancesRule.ToPlannedMaintenance()
-		if err != nil {
-			// Don't return an error because we want to process all the valid records.
-			// Log and skip instead.
-			r.logger.WarnContext(ctx, "skipping planned maintenance", slog.String("maintenance_id", gettableMaintenancesRule.ID.StringValue()), errors.Attr(err))
-			continue
+		m := gettableMaintenancesRule.ToPlannedMaintenance()
+		gettablePlannedMaintenance = append(gettablePlannedMaintenance, m)
+		if m.HasScheduleRecurrenceBoundsMismatch() {
+			r.logger.WarnContext(ctx, "planned_downtime_recurrence_schedule_mismatch", slog.String("maintenance_id", m.ID.StringValue()))
 		}
-
-		plannedMaintenances = append(plannedMaintenances, pm)
 	}
 
-	return plannedMaintenances, nil
+	return gettablePlannedMaintenance, nil
 }
 
 func (r *maintenance) GetPlannedMaintenanceByID(ctx context.Context, id valuer.UUID) (*alertmanagertypes.PlannedMaintenance, error) {
@@ -69,7 +64,7 @@ func (r *maintenance) GetPlannedMaintenanceByID(ctx context.Context, id valuer.U
 		return nil, r.sqlstore.WrapNotFoundErrf(err, errors.CodeNotFound, "planned maintenance with ID: %s does not exist", id.StringValue())
 	}
 
-	return storableMaintenanceRule.ToPlannedMaintenance()
+	return storableMaintenanceRule.ToPlannedMaintenance(), nil
 }
 
 func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance *alertmanagertypes.PostablePlannedMaintenance) (*alertmanagertypes.PlannedMaintenance, error) {
@@ -78,11 +73,6 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		return nil, err
 	}
 
-	schedule, err := json.Marshal(maintenance.Schedule)
-	if err != nil {
-		return nil, err
-	}
-
 	storablePlannedMaintenance := alertmanagertypes.StorablePlannedMaintenance{
 		Identifiable: types.Identifiable{
 			ID: valuer.GenerateUUID(),
@@ -97,7 +87,7 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		},
 		Name:        maintenance.Name,
 		Description: maintenance.Description,
-		Schedule:    string(schedule),
+		Schedule:    maintenance.Schedule,
 		OrgID:       claims.OrgID,
 		Scope:       maintenance.Scope,
 	}
@@ -145,21 +135,18 @@ func (r *maintenance) CreatePlannedMaintenance(ctx context.Context, maintenance
 		return nil, err
 	}
 
-	pm := &alertmanagertypes.PlannedMaintenance{
+	return &alertmanagertypes.PlannedMaintenance{
 		ID:          storablePlannedMaintenance.ID,
 		Name:        storablePlannedMaintenance.Name,
 		Description: storablePlannedMaintenance.Description,
+		Schedule:    storablePlannedMaintenance.Schedule,
 		RuleIDs:     maintenance.AlertIds,
 		Scope:       maintenance.Scope,
 		CreatedAt:   storablePlannedMaintenance.CreatedAt,
 		CreatedBy:   storablePlannedMaintenance.CreatedBy,
 		UpdatedAt:   storablePlannedMaintenance.UpdatedAt,
 		UpdatedBy:   storablePlannedMaintenance.UpdatedBy,
-	}
-	if err = json.Unmarshal([]byte(storablePlannedMaintenance.Schedule), &pm.Schedule); err != nil {
-		return nil, err
-	}
-	return pm, nil
+	}, nil
 }
 
 func (r *maintenance) DeletePlannedMaintenance(ctx context.Context, id valuer.UUID) error {
@@ -187,11 +174,6 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		return err
 	}
 
-	schedule, err := json.Marshal(maintenance.Schedule)
-	if err != nil {
-		return err
-	}
-
 	storablePlannedMaintenance := alertmanagertypes.StorablePlannedMaintenance{
 		Identifiable: types.Identifiable{
 			ID: id,
@@ -206,7 +188,7 @@ func (r *maintenance) UpdatePlannedMaintenance(ctx context.Context, maintenance
 		},
 		Name:        maintenance.Name,
 		Description: maintenance.Description,
-		Schedule:    string(schedule),
+		Schedule:    maintenance.Schedule,
 		OrgID:       claims.OrgID,
 		Scope:       maintenance.Scope,
 	}

pkg/alertmanager/alertmanagerstore/sqlalertmanagerstore/maintenance_test.go

@@ -1,93 +0,0 @@
-package sqlalertmanagerstore
-
-import (
-	"path/filepath"
-	"testing"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/factory/factorytest"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/sqlstore/sqlitesqlstore"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-)
-
-func newTestStore(t *testing.T) sqlstore.SQLStore {
-	t.Helper()
-	store, err := sqlitesqlstore.New(t.Context(), factorytest.NewSettings(), sqlstore.Config{
-		Provider: "sqlite",
-		Connection: sqlstore.ConnectionConfig{
-			MaxOpenConns:    1,
-			MaxConnLifetime: 0,
-		},
-		Sqlite: sqlstore.SqliteConfig{
-			Path:            filepath.Join(t.TempDir(), "test.db"),
-			Mode:            "wal",
-			BusyTimeout:     5 * time.Second,
-			TransactionMode: "deferred",
-		},
-	})
-	require.NoError(t, err)
-
-	_, err = store.BunDB().NewCreateTable().
-		Model((*alertmanagertypes.StorablePlannedMaintenance)(nil)).
-		IfNotExists().
-		Exec(t.Context())
-	require.NoError(t, err)
-
-	_, err = store.BunDB().NewCreateTable().
-		Model((*alertmanagertypes.StorablePlannedMaintenanceRule)(nil)).
-		IfNotExists().
-		Exec(t.Context())
-	require.NoError(t, err)
-
-	return store
-}
-
-// TestListPlannedMaintenanceSkipsInvalid asserts that a single corrupt record
-// (here, an unloadable timezone) is skipped rather than failing the whole list.
-func TestListPlannedMaintenanceSkipsInvalid(t *testing.T) {
-	store := newTestStore(t)
-	orgID := valuer.GenerateUUID().StringValue()
-	now := time.Now().UTC()
-
-	valid := &alertmanagertypes.StorablePlannedMaintenance{
-		Identifiable:  types.Identifiable{ID: valuer.GenerateUUID()},
-		TimeAuditable: types.TimeAuditable{CreatedAt: now, UpdatedAt: now},
-		Name:          "valid",
-		Schedule:      `{"timezone":"UTC","startTime":"2024-01-01T12:00:00Z","recurrence":{"duration":"2h","repeatType":"daily"}}`,
-		OrgID:         orgID,
-	}
-	result, err := store.BunDB().NewInsert().Model(valid).Exec(t.Context())
-	require.NoError(t, err)
-	rowsAffected, err := result.RowsAffected()
-	require.NoError(t, err)
-	require.Equal(t, int64(1), rowsAffected)
-
-	// A schedule with "zero" startTime
-	invalid := &alertmanagertypes.StorablePlannedMaintenance{
-		Identifiable: types.Identifiable{ID: valuer.GenerateUUID()},
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: now,
-			UpdatedAt: now,
-		},
-		Name:     "invalid",
-		Schedule: `{"timezone":"UTC","recurrence":{"duration":"2h","repeatType":"daily"}}`,
-		OrgID:    orgID,
-	}
-	result, err = store.BunDB().NewInsert().Model(invalid).Exec(t.Context())
-	require.NoError(t, err)
-	rowsAffected, err = result.RowsAffected()
-	require.NoError(t, err)
-	require.Equal(t, int64(1), rowsAffected)
-
-	maintenanceStore := NewMaintenanceStore(store, factorytest.NewSettings())
-
-	list, err := maintenanceStore.ListPlannedMaintenance(t.Context(), orgID)
-	require.NoError(t, err)
-	require.Len(t, list, 1)
-	assert.Equal(t, valid.ID, list[0].ID)
-}

pkg/alertmanager/config_test.go

@@ -3,8 +3,6 @@ package alertmanager
 import (
 	"context"
 	"net/url"
-	"os"
-	"strings"
 	"testing"
 	"time"
 
@@ -16,23 +14,7 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
-const prefix = "SIGNOZ_"
-
-// clearSignozEnv unsets all existing SIGNOZ_* env vars for the duration of the test.
-func clearSignozEnv(t *testing.T) {
-	t.Helper()
-	for _, kv := range os.Environ() {
-		if strings.HasPrefix(kv, prefix) {
-			key := strings.SplitN(kv, "=", 2)[0]
-			orig, _ := os.LookupEnv(key)
-			_ = os.Unsetenv(key)
-			t.Cleanup(func() { _ = os.Setenv(key, orig) })
-		}
-	}
-}
-
 func TestNewWithEnvProvider(t *testing.T) {
-	clearSignozEnv(t)
 	t.Setenv("SIGNOZ_ALERTMANAGER_PROVIDER", "signoz")
 	t.Setenv("SIGNOZ_ALERTMANAGER_LEGACY_API__URL", "http://localhost:9093/api")
 	t.Setenv("SIGNOZ_ALERTMANAGER_SIGNOZ_ROUTE_REPEAT__INTERVAL", "5m")

pkg/config/envprovider/provider_test.go

@@ -18,8 +18,8 @@ func clearSignozEnv(t *testing.T) {
 		if strings.HasPrefix(kv, prefix) {
 			key := strings.SplitN(kv, "=", 2)[0]
 			orig, _ := os.LookupEnv(key)
-			_ = os.Unsetenv(key)
-			t.Cleanup(func() { _ = os.Setenv(key, orig) })
+			os.Unsetenv(key)
+			t.Cleanup(func() { os.Setenv(key, orig) })
 		}
 	}
 }

pkg/signoz/provider.go

@@ -211,7 +211,6 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddDashboardNameFactory(sqlstore, sqlschema),
 		sqlmigration.NewFixChangelogOperationTypeFactory(sqlstore, sqlschema),
 		sqlmigration.NewCloudIntegrationRemoveCascadeDeleteFactory(sqlschema),
-		sqlmigration.NewMigrateRecurrenceBoundsFactory(sqlstore),
 	)
 }
 

pkg/sqlmigration/092_migrate_recurrence_bounds.go

@@ -1,128 +0,0 @@
-package sqlmigration
-
-import (
-	"context"
-	"encoding/json"
-	"log/slog"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/uptrace/bun"
-	"github.com/uptrace/bun/migrate"
-)
-
-type migrateRecurrenceBounds struct {
-	sqlstore sqlstore.SQLStore
-	logger   *slog.Logger
-}
-
-type plannedMaintenanceScheduleRow struct {
-	bun.BaseModel `bun:"table:planned_maintenance"`
-
-	ID       string `bun:"id"`
-	Schedule string `bun:"schedule"`
-}
-
-func NewMigrateRecurrenceBoundsFactory(sqlstore sqlstore.SQLStore) factory.ProviderFactory[SQLMigration, Config] {
-	return factory.NewProviderFactory(
-		factory.MustNewName("migrate_recurrence_bounds"),
-		func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
-			return &migrateRecurrenceBounds{sqlstore: sqlstore, logger: ps.Logger}, nil
-		},
-	)
-}
-
-func (migration *migrateRecurrenceBounds) Register(migrations *migrate.Migrations) error {
-	if err := migrations.Register(migration.Up, migration.Down); err != nil {
-		return err
-	}
-	return nil
-}
-
-// Up moves the start/end bounds of a recurring planned maintenance from the
-// nested recurrence object up to the schedule level. Until now both the
-// schedule and its recurrence carried their own startTime/endTime, with the
-// recurrence values taking precedence when a recurrence was present. The
-// recurrence fields are being dropped, so the recurrence bounds (the source of
-// truth for recurring maintenances) are promoted to the schedule before the
-// struct loses those fields.
-//
-// We deliberately operate on the raw JSON instead of the Recurrence struct:
-// that struct loses its StartTime/EndTime fields in the same change set, so it
-// can no longer read the values this migration needs to move.
-func (migration *migrateRecurrenceBounds) Up(ctx context.Context, db *bun.DB) error {
-	tx, err := db.BeginTx(ctx, nil)
-	if err != nil {
-		return err
-	}
-
-	defer func() {
-		_ = tx.Rollback()
-	}()
-
-	rows := make([]*plannedMaintenanceScheduleRow, 0)
-	if err := tx.NewSelect().Model(&rows).Scan(ctx); err != nil {
-		return err
-	}
-
-	for _, row := range rows {
-		schedule := make(map[string]json.RawMessage)
-		if err := json.Unmarshal([]byte(row.Schedule), &schedule); err != nil {
-			// A single corrupt row must not abort the whole migration (which would block startup).
-			migration.logger.WarnContext(ctx, "skipping planned maintenance with unreadable schedule", slog.String("maintenance_id", row.ID), errors.Attr(err))
-			continue
-		}
-
-		recurrenceRaw, ok := schedule["recurrence"]
-		if !ok || string(recurrenceRaw) == "null" {
-			continue
-		}
-
-		recurrence := make(map[string]json.RawMessage)
-		if err := json.Unmarshal(recurrenceRaw, &recurrence); err != nil {
-			migration.logger.WarnContext(ctx, "skipping planned maintenance with unreadable recurrence", slog.String("maintenance_id", row.ID), errors.Attr(err))
-			continue
-		}
-
-		// Promote the recurrence bounds (source of truth) to the schedule
-		// level, then drop them from the recurrence.
-		if startTime, ok := recurrence["startTime"]; ok {
-			schedule["startTime"] = startTime
-			delete(recurrence, "startTime")
-		}
-		if endTime, ok := recurrence["endTime"]; ok && string(endTime) != "null" {
-			schedule["endTime"] = endTime
-		} else {
-			// The recurrence had no end time, so the schedule must not carry
-			// a stale one duplicated by the UI.
-			delete(schedule, "endTime")
-		}
-		delete(recurrence, "endTime")
-
-		newRecurrence, err := json.Marshal(recurrence)
-		if err != nil {
-			return err
-		}
-		schedule["recurrence"] = newRecurrence
-
-		newSchedule, err := json.Marshal(schedule)
-		if err != nil {
-			return err
-		}
-
-		if _, err := tx.NewUpdate().
-			Model((*plannedMaintenanceScheduleRow)(nil)).
-			Set("schedule = ?", string(newSchedule)).
-			Where("id = ?", row.ID).
-			Exec(ctx); err != nil {
-			return err
-		}
-	}
-
-	return tx.Commit()
-}
-
-func (migration *migrateRecurrenceBounds) Down(context.Context, *bun.DB) error {
-	return nil
-}

pkg/types/alertmanagertypes/maintenance.go

@@ -3,7 +3,6 @@ package alertmanagertypes
 import (
 	"context"
 	"encoding/json"
-	"slices"
 	"time"
 
 	"github.com/expr-lang/expr"
@@ -60,11 +59,11 @@ type StorablePlannedMaintenance struct {
 	types.Identifiable
 	types.TimeAuditable
 	types.UserAuditable
-	Name        string `bun:"name,type:text,notnull"`
-	Description string `bun:"description,type:text"`
-	Schedule    string `bun:"schedule,type:text,notnull"`
-	OrgID       string `bun:"org_id,type:text"`
-	Scope       string `bun:"scope,type:text"`
+	Name        string    `bun:"name,type:text,notnull"`
+	Description string    `bun:"description,type:text"`
+	Schedule    *Schedule `bun:"schedule,type:text,notnull"`
+	OrgID       string    `bun:"org_id,type:text"`
+	Scope       string    `bun:"scope,type:text"`
 }
 
 type PlannedMaintenance struct {
@@ -108,12 +107,10 @@ func (p *PostablePlannedMaintenance) Validate() error {
 		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "invalid timezone in the payload")
 	}
 
-	if p.Schedule.StartTime.IsZero() {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing start time in the payload")
-	}
-
-	if !p.Schedule.EndTime.IsZero() && p.Schedule.StartTime.After(p.Schedule.EndTime) {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
+	if !p.Schedule.StartTime.IsZero() && !p.Schedule.EndTime.IsZero() {
+		if p.Schedule.StartTime.After(p.Schedule.EndTime) {
+			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
+		}
 	}
 
 	if p.Schedule.Recurrence != nil {
@@ -123,6 +120,9 @@ func (p *PostablePlannedMaintenance) Validate() error {
 		if p.Schedule.Recurrence.Duration.IsZero() {
 			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing duration in the payload")
 		}
+		if p.Schedule.Recurrence.EndTime != nil && p.Schedule.Recurrence.EndTime.Before(p.Schedule.Recurrence.StartTime) {
+			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "end time cannot be before start time")
+		}
 	}
 	if p.Scope != "" {
 		if _, err := expr.Compile(p.Scope, expr.AllowUndefinedVariables(), expr.AsBool()); err != nil {
@@ -148,84 +148,134 @@ type PlannedMaintenanceWithRules struct {
 	Rules                       []*StorablePlannedMaintenanceRule `bun:"rel:has-many,join:id=planned_maintenance_id"`
 }
 
-// AppliesTo reports whether this maintenance applies to the given rule.
-// An empty RuleIDs set means the maintenance applies to all rules.
-func (m *PlannedMaintenance) AppliesTo(ruleID string) bool {
-	return len(m.RuleIDs) == 0 || slices.Contains(m.RuleIDs, ruleID)
+// HasScheduleRecurrenceBoundsMismatch reports whether a recurring maintenance
+// has different start/end bounds in Schedule and Schedule.Recurrence.
+//
+// This is used to detect if there are any entries with recurrence that don't
+// have the same timestamps stored at the schedule-level.
+// UI payloads duplicated those values in both places, but direct API users may
+// have stored bounds that are missing from, or different than, the schedule-level bounds.
+// We need to observe these before we can safely drop Recurrence.StartTime and
+// Recurrence.EndTime.
+func (m *PlannedMaintenance) HasScheduleRecurrenceBoundsMismatch() bool {
+	recurrence := m.Schedule.Recurrence
+	if recurrence == nil {
+		return false
+	}
+
+	return !recurrence.StartTime.Equal(m.Schedule.StartTime) ||
+		(recurrence.EndTime == nil && !m.Schedule.EndTime.IsZero()) ||
+		(recurrence.EndTime != nil && !recurrence.EndTime.Equal(m.Schedule.EndTime))
 }
 
 func (m *PlannedMaintenance) ShouldSkip(ruleID string, now time.Time, lset model.LabelSet) (bool, error) {
-	if !m.AppliesTo(ruleID) || !m.IsActive(now) {
+	// Check if the alert ID is in the maintenance window
+	found := false
+	if len(m.RuleIDs) > 0 {
+		for _, alertID := range m.RuleIDs {
+			if alertID == ruleID {
+				found = true
+				break
+			}
+		}
+	}
+	// If no alert ids, then skip all alerts
+	if len(m.RuleIDs) == 0 {
+		found = true
+	}
+
+	if !found {
+		return false, nil
+	}
+
+	if !m.IsActive(now) {
 		return false, nil
 	}
 
 	if m.Scope != "" {
-		skip, err := EvalScopeExpression(m.Scope, lset)
-		if err != nil || !skip {
+		result, err := EvalScopeExpression(m.Scope, lset)
+		if err != nil {
 			return false, err
 		}
+		if !result {
+			return false, nil
+		}
 	}
 	return true, nil
 }
 
 // IsActive reports whether [now] falls inside the maintenance window's schedule.
 func (m *PlannedMaintenance) IsActive(now time.Time) bool {
-	// Check if maintenance window has not started yet
-	if now.Before(m.Schedule.StartTime) {
-		return false
-	}
-
-	// Check if maintenance window has expired
-	if !m.Schedule.EndTime.IsZero() && now.After(m.Schedule.EndTime) {
-		return false
-	}
-
-	// Fixed schedule
-	if m.Schedule.Recurrence == nil {
-		return true
-	}
-
+	// If alert is found, we check if it should be skipped based on the schedule
 	loc, err := time.LoadLocation(m.Schedule.Timezone)
 	if err != nil {
 		return false
 	}
 
-	now = now.In(loc)
-	switch m.Schedule.Recurrence.RepeatType {
-	case RepeatTypeDaily:
-		return m.checkDaily(now, loc)
-	case RepeatTypeWeekly:
-		return m.checkWeekly(now, loc)
-	case RepeatTypeMonthly:
-		return m.checkMonthly(now, loc)
-	default:
-		return false
+	startTime := m.Schedule.StartTime
+	endTime := m.Schedule.EndTime
+	recurrence := m.Schedule.Recurrence
+
+	// fixed schedule — only when no recurrence is configured.
+	// When recurrence is set, the recurring check below handles everything;
+	// falling through here would cause the window to match the absolute
+	// StartTime–EndTime range instead of the daily/weekly/monthly pattern.
+	if recurrence == nil && !startTime.IsZero() && !endTime.IsZero() {
+		if now.Equal(startTime) || now.Equal(endTime) ||
+			(now.After(startTime) && now.Before(endTime)) {
+			return true
+		}
 	}
+
+	// recurring schedule
+	if recurrence != nil {
+		// Make sure the recurrence has started
+		if now.Before(recurrence.StartTime) {
+			return false
+		}
+
+		// Check if recurrence has expired
+		if recurrence.EndTime != nil {
+			if !recurrence.EndTime.IsZero() && now.After(*recurrence.EndTime) {
+				return false
+			}
+		}
+
+		currentTime := now.In(loc)
+		switch recurrence.RepeatType {
+		case RepeatTypeDaily:
+			return m.checkDaily(currentTime, recurrence, loc)
+		case RepeatTypeWeekly:
+			return m.checkWeekly(currentTime, recurrence, loc)
+		case RepeatTypeMonthly:
+			return m.checkMonthly(currentTime, recurrence, loc)
+		}
+	}
+
+	return false
 }
 
 // checkDaily rebases the recurrence start to today (or yesterday if needed)
 // and returns true if currentTime is within [candidate, candidate+Duration].
-func (m *PlannedMaintenance) checkDaily(currentTime time.Time, loc *time.Location) bool {
+func (m *PlannedMaintenance) checkDaily(currentTime time.Time, rec *Recurrence, loc *time.Location) bool {
 	candidate := time.Date(
 		currentTime.Year(), currentTime.Month(), currentTime.Day(),
-		m.Schedule.StartTime.Hour(), m.Schedule.StartTime.Minute(), 0, 0,
+		rec.StartTime.Hour(), rec.StartTime.Minute(), 0, 0,
 		loc,
 	)
 	if candidate.After(currentTime) {
 		candidate = candidate.AddDate(0, 0, -1)
 	}
-	return currentTime.Sub(candidate) <= m.Schedule.Recurrence.Duration.Duration()
+	return currentTime.Sub(candidate) <= rec.Duration.Duration()
 }
 
 // checkWeekly finds the most recent allowed occurrence by rebasing the recurrence’s
 // time-of-day onto the allowed weekday. It does this for each allowed day and returns true
 // if the current time falls within the candidate window.
-func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, loc *time.Location) bool {
-	rec := m.Schedule.Recurrence
-
+func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, rec *Recurrence, loc *time.Location) bool {
 	// If no days specified, treat as every day (like daily).
 	if len(rec.RepeatOn) == 0 {
-		return m.checkDaily(currentTime, loc)
+		return m.checkDaily(currentTime, rec, loc)
 	}
 
 	for _, day := range rec.RepeatOn {
@@ -238,7 +288,7 @@ func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, loc *time.Locati
 		// Build a candidate occurrence by rebasing today's date to the allowed weekday.
 		candidate := time.Date(
 			currentTime.Year(), currentTime.Month(), currentTime.Day(),
-			m.Schedule.StartTime.Hour(), m.Schedule.StartTime.Minute(), 0, 0,
+			rec.StartTime.Hour(), rec.StartTime.Minute(), 0, 0,
 			loc,
 		).AddDate(0, 0, delta)
 		// If the candidate is in the future, subtract 7 days.
@@ -254,9 +304,8 @@ func (m *PlannedMaintenance) checkWeekly(currentTime time.Time, loc *time.Locati
 
 // checkMonthly rebases the candidate occurrence using the recurrence's day-of-month.
 // If the candidate for the current month is in the future, it uses the previous month.
-func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, loc *time.Location) bool {
-	startTime := m.Schedule.StartTime
-	refDay := startTime.Day()
+func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, rec *Recurrence, loc *time.Location) bool {
+	refDay := rec.StartTime.Day()
 	year, month, _ := currentTime.Date()
 	lastDay := time.Date(year, month+1, 0, 0, 0, 0, 0, loc).Day()
 	day := refDay
@@ -264,7 +313,7 @@ func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, loc *time.Locat
 		day = lastDay
 	}
 	candidate := time.Date(year, month, day,
-		startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(),
+		rec.StartTime.Hour(), rec.StartTime.Minute(), rec.StartTime.Second(), rec.StartTime.Nanosecond(),
 		loc,
 	)
 	if candidate.After(currentTime) {
@@ -274,30 +323,33 @@ func (m *PlannedMaintenance) checkMonthly(currentTime time.Time, loc *time.Locat
 		lastDayPrev := time.Date(y, m+1, 0, 0, 0, 0, 0, loc).Day()
 		if refDay > lastDayPrev {
 			candidate = time.Date(y, m, lastDayPrev,
-				startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(),
+				rec.StartTime.Hour(), rec.StartTime.Minute(), rec.StartTime.Second(), rec.StartTime.Nanosecond(),
 				loc,
 			)
 		} else {
 			candidate = time.Date(y, m, refDay,
-				startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(),
+				rec.StartTime.Hour(), rec.StartTime.Minute(), rec.StartTime.Second(), rec.StartTime.Nanosecond(),
 				loc,
 			)
 		}
 	}
-	return currentTime.Sub(candidate) <= m.Schedule.Recurrence.Duration.Duration()
+	return currentTime.Sub(candidate) <= rec.Duration.Duration()
 }
 
 func (m *PlannedMaintenance) IsUpcoming() bool {
-	now := time.Now()
-
-	if m.IsRecurring() {
-		// Note: this would return true even if the maintenance is active.
-		// This isn't an issue right now because the only usage happens after the `IsActive` check.
-		return m.Schedule.EndTime.IsZero() || now.Before(m.Schedule.EndTime)
+	loc, err := time.LoadLocation(m.Schedule.Timezone)
+	if err != nil {
+		return false
 	}
+	now := time.Now().In(loc)
 
-	// Fixed schedule
-	return now.Before(m.Schedule.StartTime)
+	if !m.Schedule.StartTime.IsZero() && !m.Schedule.EndTime.IsZero() {
+		return now.Before(m.Schedule.StartTime)
+	}
+	if m.Schedule.Recurrence != nil {
+		return now.Before(m.Schedule.Recurrence.StartTime)
+	}
+	return false
 }
 
 func (m *PlannedMaintenance) IsRecurring() bool {
@@ -315,16 +367,15 @@ func (m *PlannedMaintenance) Validate() error {
 		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing timezone in the payload")
 	}
 
-	if _, err := time.LoadLocation(m.Schedule.Timezone); err != nil {
+	_, err := time.LoadLocation(m.Schedule.Timezone)
+	if err != nil {
 		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "invalid timezone in the payload")
 	}
 
-	if m.Schedule.StartTime.IsZero() {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing start time in the payload")
-	}
-
-	if !m.Schedule.EndTime.IsZero() && m.Schedule.StartTime.After(m.Schedule.EndTime) {
-		return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
+	if !m.Schedule.StartTime.IsZero() && !m.Schedule.EndTime.IsZero() {
+		if m.Schedule.StartTime.After(m.Schedule.EndTime) {
+			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "start time cannot be after end time")
+		}
 	}
 
 	if m.Schedule.Recurrence != nil {
@@ -334,31 +385,28 @@ func (m *PlannedMaintenance) Validate() error {
 		if m.Schedule.Recurrence.Duration.IsZero() {
 			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "missing duration in the payload")
 		}
-	}
-	if m.Scope != "" {
-		if _, err := expr.Compile(m.Scope, expr.AllowUndefinedVariables(), expr.AsBool()); err != nil {
-			err := errors.Newf(
-				errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload,
-				"invalid scope: %s", err.Error(),
-			)
-			return err.WithUrl(scopeDocUrl)
+		if m.Schedule.Recurrence.EndTime != nil && m.Schedule.Recurrence.EndTime.Before(m.Schedule.Recurrence.StartTime) {
+			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidPlannedMaintenancePayload, "end time cannot be before start time")
 		}
 	}
 	return nil
 }
 
 func (m PlannedMaintenance) MarshalJSON() ([]byte, error) {
+	now := time.Now().In(time.FixedZone(m.Schedule.Timezone, 0))
 	var status MaintenanceStatus
-	if m.IsActive(time.Now()) {
+	if m.IsActive(now) {
 		status = MaintenanceStatusActive
 	} else if m.IsUpcoming() {
 		status = MaintenanceStatusUpcoming
 	} else {
 		status = MaintenanceStatusExpired
 	}
+	var kind MaintenanceKind
 
-	kind := MaintenanceKindFixed
-	if m.Schedule.Recurrence != nil {
+	if !m.Schedule.StartTime.IsZero() && !m.Schedule.EndTime.IsZero() && m.Schedule.EndTime.After(m.Schedule.StartTime) {
+		kind = MaintenanceKindFixed
+	} else {
 		kind = MaintenanceKindRecurring
 	}
 
@@ -391,29 +439,26 @@ func (m PlannedMaintenance) MarshalJSON() ([]byte, error) {
 	})
 }
 
-func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() (*PlannedMaintenance, error) {
-	schedule := &Schedule{}
-	if err := json.Unmarshal([]byte(m.Schedule), &schedule); err != nil {
-		return nil, err
-	}
-
-	ruleIDs := make([]string, 0, len(m.Rules))
-	for _, storableMaintenanceRule := range m.Rules {
-		ruleIDs = append(ruleIDs, storableMaintenanceRule.RuleID.StringValue())
+func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance {
+	ruleIDs := []string{}
+	if m.Rules != nil {
+		for _, storableMaintenanceRule := range m.Rules {
+			ruleIDs = append(ruleIDs, storableMaintenanceRule.RuleID.StringValue())
+		}
 	}
 
 	return &PlannedMaintenance{
 		ID:          m.ID,
 		Name:        m.Name,
 		Description: m.Description,
-		Schedule:    schedule,
+		Schedule:    m.Schedule,
 		RuleIDs:     ruleIDs,
 		Scope:       m.Scope,
 		CreatedAt:   m.CreatedAt,
 		UpdatedAt:   m.UpdatedAt,
 		CreatedBy:   m.CreatedBy,
 		UpdatedBy:   m.UpdatedBy,
-	}, nil
+	}
 }
 
 type ListPlannedMaintenanceParams struct {

pkg/types/alertmanagertypes/maintenance_test.go

@@ -8,6 +8,11 @@ import (
 	"github.com/prometheus/common/model"
 )
 
+// Helper function to create a time pointer.
+func timePtr(t time.Time) *time.Time {
+	return &t
+}
+
 func TestShouldSkipMaintenance(t *testing.T) {
 	cases := []struct {
 		name        string
@@ -19,9 +24,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "only-on-saturday",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "Europe/London",
-					StartTime: time.Date(2025, 3, 1, 0, 0, 0, 0, time.UTC),
+					Timezone: "Europe/London",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2025, 3, 1, 0, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("24h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday, RepeatOnTuesday, RepeatOnWednesday, RepeatOnThursday, RepeatOnFriday, RepeatOnSunday},
@@ -36,10 +41,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("4h"), // Until Tuesday 02:00
+						StartTime:  time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
+						Duration:   valuer.MustParseTextDuration("4h"),           // Until Tuesday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -53,10 +58,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("4h"), // Until Tuesday 02:00
+						StartTime:  time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
+						Duration:   valuer.MustParseTextDuration("4h"),           // Until Tuesday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -70,10 +75,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("52h"), // Until Thursday 02:00
+						StartTime:  time.Date(2024, 4, 1, 22, 0, 0, 0, time.UTC), // Monday 22:00
+						Duration:   valuer.MustParseTextDuration("52h"),          // Until Thursday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -87,10 +92,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-across-midnight-previous-day-not-in-repeaton",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 2, 22, 0, 0, 0, time.UTC), // Tuesday 22:00
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("4h"), // Until Wednesday 02:00
+						StartTime:  time.Date(2024, 4, 2, 22, 0, 0, 0, time.UTC), // Tuesday 22:00
+						Duration:   valuer.MustParseTextDuration("4h"),           // Until Wednesday 02:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnTuesday}, // Only Tuesday
 					},
@@ -104,10 +109,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-across-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 23, 0, 0, 0, time.UTC), // 23:00
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("2h"), // Until 01:00 next day
+						StartTime:  time.Date(2024, 1, 1, 23, 0, 0, 0, time.UTC), // 23:00
+						Duration:   valuer.MustParseTextDuration("2h"),           // Until 01:00 next day
 						RepeatType: RepeatTypeDaily,
 					},
 				},
@@ -120,9 +125,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "at-start-time-boundary",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -136,9 +141,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "at-end-time-boundary",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -152,9 +157,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-multi-day-duration",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("72h"), // 3 days
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -168,9 +173,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-multi-day-duration",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 28, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("72h"), // 3 days
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnSunday},
@@ -185,9 +190,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-crosses-to-next-month",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("48h"), // 2 days, crosses to Feb 1
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -201,9 +206,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "timezone-offset-test",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "America/New_York", // UTC-5 or UTC-4 depending on DST
-					StartTime: time.Date(2024, 1, 1, 22, 0, 0, 0, time.FixedZone("America/New_York", -5*3600)),
+					Timezone: "America/New_York", // UTC-5 or UTC-4 depending on DST
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 22, 0, 0, 0, time.FixedZone("America/New_York", -5*3600)),
 						Duration:   valuer.MustParseTextDuration("4h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -217,9 +222,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-time-outside-window",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -233,10 +238,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring-maintenance-with-past-end-date",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
-					EndTime:   time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+						EndTime:    timePtr(time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC)),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
@@ -250,10 +255,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-spans-month-end",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 3, 31, 22, 0, 0, 0, time.UTC), // March 31, 22:00
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("6h"), // Until April 1, 04:00
+						StartTime:  time.Date(2024, 3, 31, 22, 0, 0, 0, time.UTC), // March 31, 22:00
+						Duration:   valuer.MustParseTextDuration("6h"),            // Until April 1, 04:00
 						RepeatType: RepeatTypeMonthly,
 					},
 				},
@@ -266,9 +271,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-empty-repeaton",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{}, // Empty - should apply to all days
@@ -283,9 +288,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-february-fewer-days",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -298,9 +303,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-crosses-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 23, 30, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 23, 30, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("1h"), // Crosses to 00:30 next day
 						RepeatType: RepeatTypeDaily,
 					},
@@ -313,9 +318,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -328,9 +333,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end-and-duration-is-2-days",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 30, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("48h"), // 2 days duration
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -343,10 +348,10 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "weekly-maintenance-crosses-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 23, 0, 0, 0, time.UTC), // Monday 23:00
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("2h"), // Until Tuesday 01:00
+						StartTime:  time.Date(2024, 4, 1, 23, 0, 0, 0, time.UTC), // Monday 23:00
+						Duration:   valuer.MustParseTextDuration("2h"),           // Until Tuesday 01:00
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday}, // Only Monday
 					},
@@ -359,9 +364,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end-and-duration-is-2-days",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC), // January 31st
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -374,9 +379,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "daily-maintenance-crosses-midnight",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 22, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 22, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("4h"), // Until 02:00 next day
 						RepeatType: RepeatTypeDaily,
 					},
@@ -389,9 +394,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "monthly-maintenance-crosses-month-end-and-duration-is-2-hours",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 31, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -440,9 +445,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat sunday, saturday, weekly for 24 hours, in Us/Eastern timezone",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "US/Eastern",
-					StartTime: time.Date(2025, 3, 29, 20, 0, 0, 0, time.FixedZone("US/Eastern", -4*3600)),
+					Timezone: "US/Eastern",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2025, 3, 29, 20, 0, 0, 0, time.FixedZone("US/Eastern", -4*3600)),
 						Duration:   valuer.MustParseTextDuration("24h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnSunday, RepeatOnSaturday},
@@ -453,57 +458,57 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			skip: true,
 		},
 		{
-			name: "recurring maintenance, repeat daily from 12:00 to 14:00, ts < start",
+			name: "recurring maintenance, repeat daily from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
 				},
 			},
-			ts:   time.Date(2024, 1, 10, 11, 0, 0, 0, time.UTC),
-			skip: false,
-		},
-		{
-			name: "recurring maintenance, repeat daily from 12:00 to 14:00, start <= ts <= end",
-			maintenance: &PlannedMaintenance{
-				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
-					Recurrence: &Recurrence{
-						Duration:   valuer.MustParseTextDuration("2h"),
-						RepeatType: RepeatTypeDaily,
-					},
-				},
-			},
-			ts:   time.Date(2024, 1, 10, 13, 0, 0, 0, time.UTC),
+			ts:   time.Date(2024, 1, 1, 12, 10, 0, 0, time.UTC),
 			skip: true,
 		},
 		{
-			name: "recurring maintenance, repeat daily from 12:00 to 14:00, start > end",
+			name: "recurring maintenance, repeat daily from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeDaily,
 					},
 				},
 			},
-			ts:   time.Date(2024, 1, 10, 15, 0, 0, 0, time.UTC),
-			skip: false,
+			ts:   time.Date(2024, 1, 1, 14, 0, 0, 0, time.UTC),
+			skip: true,
+		},
+		{
+			name: "recurring maintenance, repeat daily from 12:00 to 14:00",
+			maintenance: &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone: "UTC",
+					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC),
+						Duration:   valuer.MustParseTextDuration("2h"),
+						RepeatType: RepeatTypeDaily,
+					},
+				},
+			},
+			ts:   time.Date(2024, 4, 1, 12, 10, 0, 0, time.UTC),
+			skip: true,
 		},
 		{
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -517,9 +522,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -533,9 +538,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -549,9 +554,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -565,9 +570,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat weekly on monday from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 1, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeWeekly,
 						RepeatOn:   []RepeatOn{RepeatOnMonday},
@@ -581,9 +586,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat monthly on 4th from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -596,9 +601,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat monthly on 4th from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -611,9 +616,9 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			name: "recurring maintenance, repeat monthly on 4th from 12:00 to 14:00",
 			maintenance: &PlannedMaintenance{
 				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
+					Timezone: "UTC",
 					Recurrence: &Recurrence{
+						StartTime:  time.Date(2024, 4, 4, 12, 0, 0, 0, time.UTC),
 						Duration:   valuer.MustParseTextDuration("2h"),
 						RepeatType: RepeatTypeMonthly,
 					},
@@ -622,6 +627,45 @@ func TestShouldSkipMaintenance(t *testing.T) {
 			ts:   time.Date(2024, 5, 4, 12, 10, 0, 0, time.UTC),
 			skip: true,
 		},
+		// The recurrence should govern, when set. Not the fixed range.
+		{
+			name: "recurring-daily-with-fixed-times-outside-daily-window",
+			maintenance: &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone: "UTC",
+					// These fixed fields should be ignored when Recurrence is set.
+					StartTime: time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC),
+					EndTime:   time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC),
+					Recurrence: &Recurrence{
+						StartTime:  time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC), // daily at 14:00
+						Duration:   valuer.MustParseTextDuration("2h"),           // until 16:00
+						RepeatType: RepeatTypeDaily,
+					},
+				},
+			},
+			// 2026-04-15 11:00 is inside the fixed range but outside the daily 14:00-16:00 window.
+			ts:   time.Date(2026, 4, 15, 11, 0, 0, 0, time.UTC),
+			skip: false,
+		},
+		{
+			name: "recurring-daily-with-fixed-times-inside-daily-window",
+			maintenance: &PlannedMaintenance{
+				Schedule: &Schedule{
+					Timezone:  "UTC",
+					StartTime: time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC),
+					EndTime:   time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC),
+					Recurrence: &Recurrence{
+						StartTime:  time.Date(2026, 4, 1, 14, 0, 0, 0, time.UTC),
+						EndTime:    timePtr(time.Date(2026, 4, 30, 18, 0, 0, 0, time.UTC)),
+						Duration:   valuer.MustParseTextDuration("2h"),
+						RepeatType: RepeatTypeDaily,
+					},
+				},
+			},
+			// 15:00 is inside the daily 14:00-16:00 window. Should skip.
+			ts:   time.Date(2026, 4, 15, 15, 0, 0, 0, time.UTC),
+			skip: true,
+		},
 	}
 
 	for idx, c := range cases {
@@ -635,211 +679,13 @@ func TestShouldSkipMaintenance(t *testing.T) {
 	}
 }
 
-func TestIsActiveFixedSchedule(t *testing.T) {
-	start := time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC)
-	end := time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC)
-
-	cases := []struct {
-		name      string
-		startTime time.Time
-		endTime   time.Time
-		now       time.Time
-		active    bool
-	}{
-		{
-			name:      "no end, t < start",
-			startTime: start,
-			now:       start.Add(-time.Hour),
-			active:    false,
-		},
-		{
-			name:      "no end, start == t",
-			startTime: start,
-			now:       start,
-			active:    true,
-		},
-		{
-			// A fixed schedule with no end time stays active indefinitely.
-			name:      "no end, start << t",
-			startTime: start,
-			now:       start.AddDate(10, 0, 0),
-			active:    true,
-		},
-		{
-			name:      "with end, start < t < end",
-			startTime: start,
-			endTime:   end,
-			now:       start.Add(24 * time.Hour),
-			active:    true,
-		},
-		{
-			name:      "with end, t == end",
-			startTime: start,
-			endTime:   end,
-			now:       end,
-			active:    true,
-		},
-		{
-			name:      "with end, end < t",
-			startTime: start,
-			endTime:   end,
-			now:       end.Add(time.Hour),
-			active:    false,
-		},
-	}
-
-	for _, c := range cases {
-		t.Run(c.name, func(t *testing.T) {
-			m := &PlannedMaintenance{
-				Schedule: &Schedule{
-					Timezone:  "UTC",
-					StartTime: c.startTime,
-					EndTime:   c.endTime,
-				},
-			}
-			if got := m.IsActive(c.now); got != c.active {
-				t.Errorf("IsActive() = %v, want %v", got, c.active)
-			}
-		})
-	}
-}
-
-func TestIsActiveRecurringSchedule(t *testing.T) {
-	// Daily window 12:00-14:00, starting 2024-01-01 (a Monday).
-	start := time.Date(2024, 1, 1, 12, 0, 0, 0, time.UTC)
-
-	daily := &Recurrence{
-		Duration:   valuer.MustParseTextDuration("2h"),
-		RepeatType: RepeatTypeDaily,
-	}
-
-	cases := []struct {
-		name       string
-		startTime  time.Time
-		endTime    time.Time
-		recurrence *Recurrence
-		now        time.Time
-		active     bool
-	}{
-		{
-			// The recurrence has not begun yet, even though the time-of-day matches.
-			name:       "daily: t < recurrence start",
-			startTime:  start,
-			recurrence: daily,
-			now:        time.Date(2023, 12, 31, 13, 0, 0, 0, time.UTC),
-			active:     false,
-		},
-		{
-			name:       "daily: no end, within window",
-			startTime:  start,
-			recurrence: daily,
-			now:        time.Date(2024, 6, 15, 13, 0, 0, 0, time.UTC),
-			active:     true,
-		},
-		{
-			name:       "daily: no end, outside window",
-			startTime:  start,
-			recurrence: daily,
-			now:        time.Date(2024, 6, 15, 15, 0, 0, 0, time.UTC),
-			active:     false,
-		},
-		{
-			name:       "daily: at window start boundary",
-			startTime:  start,
-			recurrence: daily,
-			now:        time.Date(2024, 6, 15, 12, 0, 0, 0, time.UTC),
-			active:     true,
-		},
-		{
-			name:       "daily: at window end boundary",
-			startTime:  start,
-			recurrence: daily,
-			now:        time.Date(2024, 6, 15, 14, 0, 0, 0, time.UTC),
-			active:     true,
-		},
-		{
-			// Past the recurrence end, the time-of-day match no longer applies.
-			name:       "daily: t > recurrence end",
-			startTime:  start,
-			endTime:    time.Date(2024, 1, 10, 12, 0, 0, 0, time.UTC),
-			recurrence: daily,
-			now:        time.Date(2024, 1, 15, 13, 0, 0, 0, time.UTC),
-			active:     false,
-		},
-		{
-			name:       "daily: before recurrence end, within window",
-			startTime:  start,
-			endTime:    time.Date(2024, 1, 10, 23, 0, 0, 0, time.UTC),
-			recurrence: daily,
-			now:        time.Date(2024, 1, 10, 13, 0, 0, 0, time.UTC),
-			active:     true,
-		},
-		{
-			name:      "weekly: on allowed day, within window",
-			startTime: start, // Monday
-			recurrence: &Recurrence{
-				Duration:   valuer.MustParseTextDuration("2h"),
-				RepeatType: RepeatTypeWeekly,
-				RepeatOn:   []RepeatOn{RepeatOnMonday},
-			},
-			now:    time.Date(2024, 4, 15, 13, 0, 0, 0, time.UTC), // a Monday
-			active: true,
-		},
-		{
-			name:      "weekly: on non-allowed day",
-			startTime: start,
-			recurrence: &Recurrence{
-				Duration:   valuer.MustParseTextDuration("2h"),
-				RepeatType: RepeatTypeWeekly,
-				RepeatOn:   []RepeatOn{RepeatOnMonday},
-			},
-			now:    time.Date(2024, 4, 16, 13, 0, 0, 0, time.UTC), // a Tuesday
-			active: false,
-		},
-		{
-			name:      "monthly: on day-of-month, within window",
-			startTime: time.Date(2024, 1, 4, 12, 0, 0, 0, time.UTC),
-			recurrence: &Recurrence{
-				Duration:   valuer.MustParseTextDuration("2h"),
-				RepeatType: RepeatTypeMonthly,
-			},
-			now:    time.Date(2024, 5, 4, 13, 0, 0, 0, time.UTC),
-			active: true,
-		},
-		{
-			name:      "monthly: on different day-of-month",
-			startTime: time.Date(2024, 1, 4, 12, 0, 0, 0, time.UTC),
-			recurrence: &Recurrence{
-				Duration:   valuer.MustParseTextDuration("2h"),
-				RepeatType: RepeatTypeMonthly,
-			},
-			now:    time.Date(2024, 5, 5, 13, 0, 0, 0, time.UTC),
-			active: false,
-		},
-	}
-
-	for _, c := range cases {
-		t.Run(c.name, func(t *testing.T) {
-			m := &PlannedMaintenance{
-				Schedule: &Schedule{
-					Timezone:   "UTC",
-					StartTime:  c.startTime,
-					EndTime:    c.endTime,
-					Recurrence: c.recurrence,
-				},
-			}
-			if got := m.IsActive(c.now); got != c.active {
-				t.Errorf("IsActive() = %v, want %v", got, c.active)
-			}
-		})
-	}
-}
-
 func TestShouldSkip_Scope(t *testing.T) {
-	activeSchedule := &Schedule{
-		Timezone:  "UTC",
-		StartTime: time.Now().UTC().Add(-time.Hour),
-		EndTime:   time.Now().UTC().Add(time.Hour),
+	activeSchedule := func() *Schedule {
+		return &Schedule{
+			Timezone:  "UTC",
+			StartTime: time.Now().UTC().Add(-time.Hour),
+			EndTime:   time.Now().UTC().Add(time.Hour),
+		}
 	}
 	now := time.Now().UTC()
 
@@ -853,7 +699,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 	}{
 		{
 			name:        "empty scope - no label filtering applied",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule()},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -861,7 +707,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "scope matches labels",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -869,7 +715,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "scope does not match labels",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},
@@ -877,7 +723,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "AND expression - both conditions match",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" AND service = "api"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" AND service = "api"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production", "service": "api"},
@@ -885,7 +731,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "AND expression - one condition does not match",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" AND service = "api"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" AND service = "api"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production", "service": "worker"},
@@ -893,7 +739,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "OR expression - first alternative matches",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" OR env = "staging"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -901,7 +747,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "OR expression - second alternative matches",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" OR env = "staging"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},
@@ -909,7 +755,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "OR expression - neither alternative matches",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production" OR env = "staging"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production" OR env = "staging"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "development"},
@@ -917,7 +763,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "scope references label absent from lset",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"service": "api"},
@@ -925,7 +771,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "in expression - value is in list",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env in ["production", "staging"]`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env in ["production", "staging"]`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},
@@ -933,7 +779,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "in expression - value not in list",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, Scope: `env in ["production", "staging"]`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), Scope: `env in ["production", "staging"]`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "development"},
@@ -941,7 +787,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "ruleID in list and scope matches - should skip",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, RuleIDs: []string{"rule-1", "rule-2"}, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-1", "rule-2"}, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -949,7 +795,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "ruleID not in list and scope matches - ruleID gate prevents skip",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, RuleIDs: []string{"rule-2"}, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-2"}, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "production"},
@@ -957,7 +803,7 @@ func TestShouldSkip_Scope(t *testing.T) {
 		},
 		{
 			name:        "ruleID in list but scope does not match - should not skip",
-			maintenance: &PlannedMaintenance{Schedule: activeSchedule, RuleIDs: []string{"rule-1"}, Scope: `env = "production"`},
+			maintenance: &PlannedMaintenance{Schedule: activeSchedule(), RuleIDs: []string{"rule-1"}, Scope: `env = "production"`},
 			ruleID:      "rule-1",
 			ts:          now,
 			lset:        model.LabelSet{"env": "staging"},

pkg/types/alertmanagertypes/recurrence.go

@@ -66,9 +66,9 @@ var RepeatOnAllMap = map[RepeatOn]time.Weekday{
 	RepeatOnSaturday:  time.Saturday,
 }
 
-// Recurrence describes the repeat pattern of a planned maintenance.
-// The window bounds (start/end) live on the enclosing Schedule.
 type Recurrence struct {
+	StartTime  time.Time           `json:"startTime" required:"true"`
+	EndTime    *time.Time          `json:"endTime,omitempty"`
 	Duration   valuer.TextDuration `json:"duration" required:"true"`
 	RepeatType RepeatType          `json:"repeatType" required:"true"`
 	RepeatOn   []RepeatOn          `json:"repeatOn"`

pkg/types/alertmanagertypes/schedule.go

@@ -11,7 +11,7 @@ import (
 
 type Schedule struct {
 	Timezone   string      `json:"timezone" required:"true"`
-	StartTime  time.Time   `json:"startTime" required:"true"`
+	StartTime  time.Time   `json:"startTime,omitempty"`
 	EndTime    time.Time   `json:"endTime,omitzero"`
 	Recurrence *Recurrence `json:"recurrence"`
 }
@@ -39,12 +39,29 @@ func (s Schedule) MarshalJSON() ([]byte, error) {
 		return nil, err
 	}
 
-	// Marshal times in the selected timezone.
-	// This ensures that recurring events are handled correctly when DST is involved.
-	startTime := s.StartTime.In(loc)
-	var endTime time.Time
+	var startTime, endTime time.Time
+	if !s.StartTime.IsZero() {
+		startTime = time.Date(s.StartTime.Year(), s.StartTime.Month(), s.StartTime.Day(), s.StartTime.Hour(), s.StartTime.Minute(), s.StartTime.Second(), s.StartTime.Nanosecond(), loc)
+	}
 	if !s.EndTime.IsZero() {
-		endTime = s.EndTime.In(loc)
+		endTime = time.Date(s.EndTime.Year(), s.EndTime.Month(), s.EndTime.Day(), s.EndTime.Hour(), s.EndTime.Minute(), s.EndTime.Second(), s.EndTime.Nanosecond(), loc)
+	}
+
+	var recurrence *Recurrence
+	if s.Recurrence != nil {
+		recStartTime := time.Date(s.Recurrence.StartTime.Year(), s.Recurrence.StartTime.Month(), s.Recurrence.StartTime.Day(), s.Recurrence.StartTime.Hour(), s.Recurrence.StartTime.Minute(), s.Recurrence.StartTime.Second(), s.Recurrence.StartTime.Nanosecond(), loc)
+		var recEndTime *time.Time
+		if s.Recurrence.EndTime != nil {
+			end := time.Date(s.Recurrence.EndTime.Year(), s.Recurrence.EndTime.Month(), s.Recurrence.EndTime.Day(), s.Recurrence.EndTime.Hour(), s.Recurrence.EndTime.Minute(), s.Recurrence.EndTime.Second(), s.Recurrence.EndTime.Nanosecond(), loc)
+			recEndTime = &end
+		}
+		recurrence = &Recurrence{
+			StartTime:  recStartTime,
+			EndTime:    recEndTime,
+			Duration:   s.Recurrence.Duration,
+			RepeatType: s.Recurrence.RepeatType,
+			RepeatOn:   s.Recurrence.RepeatOn,
+		}
 	}
 
 	return json.Marshal(&struct {
@@ -56,7 +73,7 @@ func (s Schedule) MarshalJSON() ([]byte, error) {
 		Timezone:   s.Timezone,
 		StartTime:  startTime,
 		EndTime:    endTime,
-		Recurrence: s.Recurrence,
+		Recurrence: recurrence,
 	})
 }
 
@@ -76,11 +93,14 @@ func (s *Schedule) UnmarshalJSON(data []byte) error {
 		return err
 	}
 
-	startTime, err := time.Parse(time.RFC3339, aux.StartTime)
-	if err != nil {
-		return err
+	var startTime time.Time
+	if aux.StartTime != "" {
+		startTime, err = time.Parse(time.RFC3339, aux.StartTime)
+		if err != nil {
+			return err
+		}
+		s.StartTime = time.Date(startTime.Year(), startTime.Month(), startTime.Day(), startTime.Hour(), startTime.Minute(), startTime.Second(), startTime.Nanosecond(), loc)
 	}
-	startTime = startTime.In(loc)
 
 	var endTime time.Time
 	if aux.EndTime != "" {
@@ -88,14 +108,35 @@ func (s *Schedule) UnmarshalJSON(data []byte) error {
 		if err != nil {
 			return err
 		}
-		if !endTime.IsZero() {
-			endTime = endTime.In(loc)
-		}
+		// TODO(jatinderjit): if endTime.IsZero() then we should not set the endTime
+		s.EndTime = time.Date(endTime.Year(), endTime.Month(), endTime.Day(), endTime.Hour(), endTime.Minute(), endTime.Second(), endTime.Nanosecond(), loc)
 	}
 
 	s.Timezone = aux.Timezone
-	s.StartTime = startTime
-	s.EndTime = endTime
-	s.Recurrence = aux.Recurrence
+
+	if aux.Recurrence != nil {
+		recStartTime, err := time.Parse(time.RFC3339, aux.Recurrence.StartTime.Format(time.RFC3339))
+		if err != nil {
+			return err
+		}
+
+		var recEndTime *time.Time
+		if aux.Recurrence.EndTime != nil {
+			end, err := time.Parse(time.RFC3339, aux.Recurrence.EndTime.Format(time.RFC3339))
+			if err != nil {
+				return err
+			}
+			endConverted := time.Date(end.Year(), end.Month(), end.Day(), end.Hour(), end.Minute(), end.Second(), end.Nanosecond(), loc)
+			recEndTime = &endConverted
+		}
+
+		s.Recurrence = &Recurrence{
+			StartTime:  time.Date(recStartTime.Year(), recStartTime.Month(), recStartTime.Day(), recStartTime.Hour(), recStartTime.Minute(), recStartTime.Second(), recStartTime.Nanosecond(), loc),
+			EndTime:    recEndTime,
+			Duration:   aux.Recurrence.Duration,
+			RepeatType: aux.Recurrence.RepeatType,
+			RepeatOn:   aux.Recurrence.RepeatOn,
+		}
+	}
 	return nil
 }

pkg/types/dashboardtypes/perses_dashboard.go

@@ -12,7 +12,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
 	"k8s.io/apimachinery/pkg/util/validation"
 )
 
@@ -158,9 +157,6 @@ func (p *PostableDashboardV2) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
 	}
 	*p = PostableDashboardV2(tmp)
-	if p.Spec.Display == nil {
-		p.Spec.Display = &common.Display{}
-	}
 	if !p.GenerateName && p.Spec.Display.Name == "" {
 		p.Spec.Display.Name = p.Name
 	}
@@ -187,7 +183,7 @@ func (p *PostableDashboardV2) validateName() error {
 	if p.Name != "" {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "name must be empty when generateName is true, got %q", p.Name)
 	}
-	if p.Spec.Display == nil || p.Spec.Display.Name == "" {
+	if p.Spec.Display.Name == "" {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.display.name is required when generateName is true")
 	}
 	return nil
@@ -331,9 +327,6 @@ func (u *UpdatableDashboardV2) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
 	}
 	*u = UpdatableDashboardV2(tmp)
-	if u.Spec.Display == nil {
-		u.Spec.Display = &common.Display{}
-	}
 	if u.Spec.Display.Name == "" {
 		u.Spec.Display.Name = u.Name
 	}

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -8,10 +8,9 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
-	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
@@ -166,7 +165,7 @@ func TestPostableDashboardV2NewDashboardV2(t *testing.T) {
 			DashboardV2MetadataBase: DashboardV2MetadataBase{SchemaVersion: SchemaVersion},
 			GenerateName:            true,
 			Spec: DashboardSpec{
-				Display: &common.Display{Name: "My Dashboard!"},
+				Display: Display{Name: "My Dashboard!"},
 			},
 		}
 

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -17,12 +17,12 @@ import (
 // occurrence is replaced with a typed SigNoz plugin whose OpenAPI schema is a
 // per-site discriminated oneOf.
 type DashboardSpec struct {
-	Display         *common.Display            `json:"display,omitempty"`
+	Display         Display                    `json:"display" required:"true"`
 	Datasources     map[string]*DatasourceSpec `json:"datasources,omitempty"`
-	Variables       []Variable                 `json:"variables,omitempty"`
-	Panels          map[string]*Panel          `json:"panels"`
-	Layouts         []Layout                   `json:"layouts"`
-	Duration        common.DurationString      `json:"duration"`
+	Variables       []Variable                 `json:"variables" required:"true" nullable:"false"`
+	Panels          map[string]*Panel          `json:"panels" required:"true" nullable:"false"`
+	Layouts         []Layout                   `json:"layouts" required:"true" nullable:"false"`
+	Duration        common.DurationString      `json:"duration"  required:"true" nullable:"false"`
 	RefreshInterval common.DurationString      `json:"refreshInterval,omitempty"`
 	Links           []dashboard.Link           `json:"links,omitempty"`
 }

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -18,8 +18,8 @@ import (
 // ══════════════════════════════════════════════
 
 type PanelPlugin struct {
-	Kind PanelPluginKind `json:"kind"`
-	Spec any             `json:"spec"`
+	Kind PanelPluginKind `json:"kind" required:"true"`
+	Spec any             `json:"spec" required:"true"`
 }
 
 // PrepareJSONSchema drops the reflected struct shape (type: object, properties)
@@ -72,8 +72,8 @@ func (v PanelPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ══════════════════════════════════════════════
 
 type QueryPlugin struct {
-	Kind QueryPluginKind `json:"kind"`
-	Spec any             `json:"spec"`
+	Kind QueryPluginKind `json:"kind" required:"true"`
+	Spec any             `json:"spec" required:"true"`
 }
 
 func (QueryPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -123,8 +123,8 @@ func (v QueryPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ══════════════════════════════════════════════
 
 type VariablePlugin struct {
-	Kind VariablePluginKind `json:"kind"`
-	Spec any                `json:"spec"`
+	Kind VariablePluginKind `json:"kind" required:"true"`
+	Spec any                `json:"spec" required:"true"`
 }
 
 func (VariablePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -171,8 +171,8 @@ func (v VariablePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error
 // ══════════════════════════════════════════════
 
 type DatasourcePlugin struct {
-	Kind DatasourcePluginKind `json:"kind"`
-	Spec any                  `json:"spec"`
+	Kind DatasourcePluginKind `json:"kind" required:"true"`
+	Spec any                  `json:"spec" required:"true"`
 }
 
 func (DatasourcePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {

pkg/types/dashboardtypes/perses_replicas.go

@@ -13,6 +13,11 @@ import (
 	"github.com/swaggest/jsonschema-go"
 )
 
+type Display struct {
+	Name        string `json:"name" required:"true"`
+	Description string `json:"description,omitempty"`
+}
+
 // ══════════════════════════════════════════════
 // Datasource
 // ══════════════════════════════════════════════
@@ -28,8 +33,8 @@ type DatasourceSpec struct {
 // ══════════════════════════════════════════════
 
 type Panel struct {
-	Kind PanelKind `json:"kind"`
-	Spec PanelSpec `json:"spec"`
+	Kind PanelKind `json:"kind" required:"true"`
+	Spec PanelSpec `json:"spec" required:"true"`
 }
 
 // PanelKind is the panel envelope discriminator. Perses leaves it a free
@@ -54,10 +59,10 @@ func (k *PanelKind) UnmarshalJSON(data []byte) error {
 }
 
 type PanelSpec struct {
-	Display *dashboard.PanelDisplay `json:"display,omitempty"`
-	Plugin  PanelPlugin             `json:"plugin"`
-	Queries []Query                 `json:"queries,omitempty"`
-	Links   []dashboard.Link        `json:"links,omitempty"`
+	Display Display          `json:"display" required:"true"`
+	Plugin  PanelPlugin      `json:"plugin" required:"true"`
+	Queries []Query          `json:"queries" required:"true"`
+	Links   []dashboard.Link `json:"links,omitempty"`
 }
 
 // ══════════════════════════════════════════════
@@ -65,13 +70,13 @@ type PanelSpec struct {
 // ══════════════════════════════════════════════
 
 type Query struct {
-	Kind qb.RequestType `json:"kind"`
-	Spec QuerySpec      `json:"spec"`
+	Kind qb.RequestType `json:"kind" required:"true"`
+	Spec QuerySpec      `json:"spec" required:"true"`
 }
 
 type QuerySpec struct {
 	Name   string      `json:"name,omitempty"`
-	Plugin QueryPlugin `json:"plugin"`
+	Plugin QueryPlugin `json:"plugin" required:"true"`
 }
 
 // ══════════════════════════════════════════════
@@ -82,8 +87,8 @@ type QuerySpec struct {
 // *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
 // discriminated oneOf (see JSONSchemaOneOf).
 type Variable struct {
-	Kind variable.Kind `json:"kind"`
-	Spec any           `json:"spec"`
+	Kind variable.Kind `json:"kind" required:"true"`
+	Spec any           `json:"spec" required:"true"`
 }
 
 func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -135,7 +140,7 @@ func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
 // fields + Name) but with a typed VariablePlugin replacing common.Plugin.
 type ListVariableSpec struct {
-	Display         *variable.Display      `json:"display,omitempty"`
+	Display         Display                `json:"display" required:"true"`
 	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
 	AllowAllValue   bool                   `json:"allowAllValue"`
 	AllowMultiple   bool                   `json:"allowMultiple"`
@@ -155,8 +160,8 @@ type ListVariableSpec struct {
 // based on Kind. No plugin is involved, so we reuse the Perses spec types as
 // leaf imports.
 type Layout struct {
-	Kind dashboard.LayoutKind `json:"kind"`
-	Spec any                  `json:"spec"`
+	Kind dashboard.LayoutKind `json:"kind" required:"true"`
+	Spec any                  `json:"spec" required:"true"`
 }
 
 // layoutSpecs is the layout sum type factory. Perses only defines