Merge branch 'main' into billing-graph-enhancement

feat(billing): migrate BillingContainer and BillingUsageGraph to CSS modules
feat: v2 dashboard update, lock, unlock, and patch API (#11481 )
2026-06-04 16:10:26 +01:00 · 2026-06-04 20:28:02 +05:30 · 2026-06-04 20:26:27 +05:30 · 2026-06-04 11:59:40 +00:00 · 2026-06-04 15:40:08 +05:30 · 2026-06-04 15:25:57 +05:30
32 changed files with 3030 additions and 432 deletions
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -2645,6 +2645,30 @@ components:
        legend:
          $ref: '#/components/schemas/DashboardtypesLegend'
      type: object
+    DashboardtypesJSONPatchOperation:
+      properties:
+        from:
+          description: Source JSON Pointer for move/copy ops; ignored for other ops.
+          type: string
+        op:
+          $ref: '#/components/schemas/DashboardtypesPatchOp'
+        path:
+          description: JSON Pointer (RFC 6901) into the dashboard's postable shape
+            — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0,
+            /tags/-.
+          type: string
+        value:
+          description: 'Value to add/replace/test against. The expected type depends
+            on the path. Common shapes (see referenced schemas for the exact field
+            set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N
+            (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable;
+            /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a
+            TagtypesPostableTag; /spec/display/name and other leaf string fields take
+            a string. Required for add/replace/test; ignored for remove/move/copy.'
+      required:
+      - op
+      - path
+      type: object
    DashboardtypesLayout:
      oneOf:
      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
@@ -2860,6 +2884,20 @@ components:
            $ref: '#/components/schemas/DashboardtypesQuery'
          type: array
      type: object
+    DashboardtypesPatchOp:
+      enum:
+      - add
+      - remove
+      - replace
+      - move
+      - copy
+      - test
+      type: string
+    DashboardtypesPatchableDashboardV2:
+      items:
+        $ref: '#/components/schemas/DashboardtypesJSONPatchOperation'
+      nullable: true
+      type: array
    DashboardtypesPieChartPanelSpec:
      properties:
        formatting:
@@ -3147,6 +3185,27 @@ components:
        timePreference:
          $ref: '#/components/schemas/DashboardtypesTimePreference'
      type: object
+    DashboardtypesUpdatableDashboardV2:
+      properties:
+        image:
+          type: string
+        name:
+          type: string
+        schemaVersion:
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesDashboardSpec'
+        tags:
+          items:
+            $ref: '#/components/schemas/TagtypesPostableTag'
+          nullable: true
+          type: array
+      required:
+      - schemaVersion
+      - name
+      - tags
+      - spec
+      type: object
    DashboardtypesUpdatablePublicDashboard:
      properties:
        defaultTimeRange:
@@ -12824,6 +12883,12 @@ paths:
                - data
                type: object
          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
        "401":
          content:
            application/json:
@@ -12876,6 +12941,12 @@ paths:
                - data
                type: object
          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
        "401":
          content:
            application/json:
@@ -12888,6 +12959,12 @@ paths:
              schema:
                $ref: '#/components/schemas/RenderErrorResponse'
          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
        "500":
          content:
            application/json:
@@ -12902,6 +12979,262 @@ paths:
      summary: Get dashboard (v2)
      tags:
      - dashboard
+    patch:
+      deprecated: false
+      description: 'This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard.
+        The patch is applied against the postable view of the dashboard (metadata,
+        data, tags), so individual panels, queries, variables, layouts, or tags can
+        be updated without re-sending the rest of the dashboard. Apply is lenient:
+        `remove` on a missing path is a no-op (idempotent) and `add` creates any missing
+        parent objects, rather than failing as strict RFC 6902 would. The resulting
+        dashboard is still validated. Locked dashboards are rejected.'
+      operationId: PatchDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesPatchableDashboardV2'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Patch dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint updates a v2-shape dashboard's metadata, data, and
+        tag set. Locked dashboards are rejected.
+      operationId: UpdateDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesUpdatableDashboardV2'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Update dashboard (v2)
+      tags:
+      - dashboard
+  /api/v2/dashboards/{id}/lock:
+    delete:
+      deprecated: false
+      description: This endpoint unlocks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: UnlockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Unlock dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint locks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: LockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Lock dashboard (v2)
+      tags:
+      - dashboard
  /api/v2/factor_password/forgot:
    post:
      deprecated: false
--- a/ee/modules/dashboard/impldashboard/module.go
+++ b/ee/modules/dashboard/impldashboard/module.go
@@ -221,6 +221,18 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }

+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }
--- a/frontend/src/api/billing/getUsage.ts
+++ b/frontend/src/api/billing/getUsage.ts
@@ -3,13 +3,36 @@ import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';

+export interface DayBreakdownEntry {
+	timestamp: number;
+	total: number;
+	quantity: number;
+	count: number;
+	size: number;
+}
+
+export interface TierEntry {
+	quantity: number;
+	unitPrice: number;
+	tierCost: number;
+}
+
+export interface BreakdownEntry {
+	type: string;
+	unit: string;
+	dayWiseBreakdown: {
+		breakdown: DayBreakdownEntry[];
+	};
+	tiers?: TierEntry[];
+}
+
 export interface UsageResponsePayloadProps {
-	billingPeriodStart: Date;
-	billingPeriodEnd: Date;
+	billingPeriodStart: number;
+	billingPeriodEnd: number;
 	details: {
 		total: number;
 		baseFee: number;
-		breakdown: [];
+		breakdown: BreakdownEntry[];
 		billTotal: number;
 	};
 	discount: number;
--- a/frontend/src/api/generated/services/dashboard/index.ts
+++ b/frontend/src/api/generated/services/dashboard/index.ts
@@ -21,8 +21,10 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
+	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
+	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
@@ -33,7 +35,13 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	LockDashboardV2PathParameters,
+	PatchDashboardV2200,
+	PatchDashboardV2PathParameters,
 	RenderErrorResponseDTO,
+	UnlockDashboardV2PathParameters,
+	UpdateDashboardV2200,
+	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';

@@ -816,3 +824,360 @@ export const invalidateGetDashboardV2 = async (

 	return queryClient;
 };
+
+/**
+ * This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.
+ * @summary Patch dashboard (v2)
+ */
+export const patchDashboardV2 = (
+	{ id }: PatchDashboardV2PathParameters,
+	dashboardtypesPatchableDashboardV2DTONull?: BodyType<DashboardtypesPatchableDashboardV2DTO | null> | null,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PatchDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesPatchableDashboardV2DTONull,
+		signal,
+	});
+};
+
+export const getPatchDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+	},
+	TContext
+> => {
+	const mutationKey = ['patchDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return patchDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PatchDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof patchDashboardV2>>
+>;
+export type PatchDashboardV2MutationBody =
+	| BodyType<DashboardtypesPatchableDashboardV2DTO | null>
+	| undefined;
+export type PatchDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Patch dashboard (v2)
+ */
+export const usePatchDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+	},
+	TContext
+> => {
+	return useMutation(getPatchDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.
+ * @summary Update dashboard (v2)
+ */
+export const updateDashboardV2 = (
+	{ id }: UpdateDashboardV2PathParameters,
+	dashboardtypesUpdatableDashboardV2DTO?: BodyType<DashboardtypesUpdatableDashboardV2DTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesUpdatableDashboardV2DTO,
+		signal,
+	});
+};
+
+export const getUpdateDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateDashboardV2>>
+>;
+export type UpdateDashboardV2MutationBody =
+	| BodyType<DashboardtypesUpdatableDashboardV2DTO>
+	| undefined;
+export type UpdateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update dashboard (v2)
+ */
+export const useUpdateDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
+ * @summary Unlock dashboard (v2)
+ */
+export const unlockDashboardV2 = (
+	{ id }: UnlockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getUnlockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['unlockDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		{ pathParams: UnlockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return unlockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UnlockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof unlockDashboardV2>>
+>;
+
+export type UnlockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Unlock dashboard (v2)
+ */
+export const useUnlockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getUnlockDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
+ * @summary Lock dashboard (v2)
+ */
+export const lockDashboardV2 = (
+	{ id }: LockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getLockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['lockDashboardV2'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		{ pathParams: LockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return lockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type LockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof lockDashboardV2>>
+>;
+
+export type LockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Lock dashboard (v2)
+ */
+export const useLockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getLockDashboardV2MutationOptions(options));
+};
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -4653,6 +4653,32 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }

+export enum DashboardtypesPatchOpDTO {
+	add = 'add',
+	remove = 'remove',
+	replace = 'replace',
+	move = 'move',
+	copy = 'copy',
+	test = 'test',
+}
+export interface DashboardtypesJSONPatchOperationDTO {
+	/**
+	 * @type string
+	 * @description Source JSON Pointer for move/copy ops; ignored for other ops.
+	 */
+	from?: string;
+	op: DashboardtypesPatchOpDTO;
+	/**
+	 * @type string
+	 * @description JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-.
+	 */
+	path: string;
+	/**
+	 * @description Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy.
+	 */
+	value?: unknown;
+}
+
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4662,6 +4688,13 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 }
+/**
+ * @nullable
+ */
+export type DashboardtypesPatchableDashboardV2DTO =
+	| DashboardtypesJSONPatchOperationDTO[]
+	| null;
+
 export interface DashboardtypesPostableDashboardV2DTO {
 	/**
 	 * @type boolean
@@ -4705,6 +4738,26 @@ export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/ClickHouseSQL' = 'signoz/ClickHouseSQL',
 	'signoz/TraceOperator' = 'signoz/TraceOperator',
 }
+export interface DashboardtypesUpdatableDashboardV2DTO {
+	/**
+	 * @type string
+	 */
+	image?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	schemaVersion: string;
+	spec: DashboardtypesDashboardSpecDTO;
+	/**
+	 * @type array,null
+	 */
+	tags: TagtypesPostableTagDTO[] | null;
+}
+
 export interface DashboardtypesUpdatablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -9476,6 +9529,34 @@ export type GetDashboardV2200 = {
 	status: string;
 };

+export type PatchDashboardV2PathParameters = {
+	id: string;
+};
+export type PatchDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateDashboardV2PathParameters = {
+	id: string;
+};
+export type UpdateDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UnlockDashboardV2PathParameters = {
+	id: string;
+};
+export type LockDashboardV2PathParameters = {
+	id: string;
+};
 export type GetFeatures200 = {
 	/**
 	 * @type array
--- a/frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx
+++ b/frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx
@@ -1,17 +1,19 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
-import cx from 'classnames';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

 function RefreshPaymentStatus({
 	btnShape,
 	type,
+	className,
 }: {
-	btnShape?: 'default' | 'round' | 'circle';
+	btnShape?: 'default' | 'round';
 	type?: 'button' | 'text' | 'tooltip';
+	className?: string;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicenseRefetch } = useAppContext();
@@ -31,26 +33,35 @@ function RefreshPaymentStatus({
 		setIsLoading(false);
 	};

+	const button = (
+		<Button
+			variant={type === 'text' ? 'ghost' : 'outlined'}
+			color="secondary"
+			size="md"
+			style={btnShape === 'round' ? { borderRadius: '9999px' } : undefined}
+			className={className}
+			onClick={handleRefreshPaymentStatus}
+			prefix={<RefreshCcw size={14} />}
+			loading={isLoading}
+		>
+			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+		</Button>
+	);
+
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
-			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
-				<Button
-					type={type === 'text' ? 'text' : 'default'}
-					shape={btnShape}
-					className={cx('periscope-btn', { text: type === 'text' })}
-					onClick={handleRefreshPaymentStatus}
-					icon={<RefreshCcw size={14} />}
-					loading={isLoading}
-				>
-					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-				</Button>
-			</Tooltip>
+			{type === 'tooltip' ? (
+				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
+			) : (
+				button
+			)}
 		</span>
 	);
 }
 RefreshPaymentStatus.defaultProps = {
 	btnShape: 'default',
 	type: 'button',
+	className: undefined,
 };

 export default RefreshPaymentStatus;
--- a/frontend/src/container/BillingContainer/BillingContainer.module.scss
+++ b/frontend/src/container/BillingContainer/BillingContainer.module.scss
@@ -0,0 +1,199 @@
+.billingContainer {
+	margin-bottom: var(--spacing-20);
+	padding-top: 36px;
+	width: 90%;
+	margin: 0 auto;
+
+	.pageHeader {
+		margin-bottom: var(--spacing-8);
+
+		.pageHeaderTitle {
+			font-weight: var(--label-medium-500-font-weight);
+			font-size: var(--label-medium-500-font-size);
+			line-height: 32px;
+			letter-spacing: -0.08px;
+			color: var(--l1-foreground);
+		}
+
+		.pageHeaderSubtitle {
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-20);
+			letter-spacing: -0.07px;
+			color: var(--l2-foreground);
+		}
+	}
+
+	.pageInfoTitle {
+		margin: 0;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+		color: var(--l1-foreground);
+	}
+
+	.pageInfoSubtitle {
+		margin: 0;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		line-height: var(--line-height-18);
+		letter-spacing: -0.07px;
+		color: var(--l2-foreground);
+	}
+
+	.pageInfo {
+		:global(.ant-card) {
+			padding: var(--padding-3);
+		}
+
+		.billingManageBtn {
+			background: var(--l3-background);
+
+			&:hover {
+				background: var(--l3-background-hover);
+			}
+		}
+	}
+
+	.billingSummary {
+		margin: var(--spacing-12) var(--spacing-4);
+	}
+
+	.billingDetails {
+		margin: var(--spacing-12) 0;
+		border: 1px solid var(--l1-border);
+		border-radius: 2px;
+		overflow: hidden;
+
+		:global {
+			.ant-table {
+				background: var(--l2-background);
+			}
+
+			.ant-table-thead > tr > th {
+				height: 52px;
+				padding: 0 var(--padding-4);
+				color: var(--l3-foreground);
+				font-size: var(--font-size-xs);
+				font-weight: var(--font-weight-medium);
+				letter-spacing: 0.48px;
+				text-transform: uppercase;
+			}
+
+			.ant-table-tbody > tr > td {
+				height: 52px;
+				padding: 0 var(--padding-4);
+				background: var(--l2-background);
+				border-bottom: 1px solid var(--l1-border);
+				color: var(--l2-foreground);
+				font-size: var(--font-size-sm);
+
+				&:first-child {
+					color: var(--l1-foreground);
+				}
+
+				&:not(:first-child) {
+					font-feature-settings:
+						'zero' 1,
+						'lnum' 1,
+						'tnum' 1;
+				}
+			}
+
+			.ant-table-tbody > tr:last-child > td {
+				border-bottom: none;
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: var(--l2-background) !important;
+			}
+		}
+
+		.billingDetailsHeaderCell {
+			position: relative;
+			background: var(--l2-background) !important;
+			border: none !important;
+			border-bottom: 1px solid var(--l1-border) !important;
+			box-shadow: none !important;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset-block: 0;
+				inset-inline-end: 0;
+				width: 2px;
+				background: var(--l2-background);
+				z-index: 1;
+			}
+		}
+	}
+
+	.upgradePlanBenefits {
+		margin: 0 var(--spacing-4);
+		border: 1px solid var(--l1-border);
+		border-radius: 5px;
+		padding: 0 var(--padding-12);
+
+		.planBenefits {
+			.planBenefit {
+				display: flex;
+				align-items: center;
+				gap: var(--spacing-8);
+				margin: var(--spacing-8) 0;
+			}
+		}
+	}
+
+	.billingGraphSection {
+		border: 1px solid var(--l1-border);
+		border-radius: 4px;
+		overflow: hidden;
+		margin-bottom: var(--spacing-4);
+
+		.billingGraphFooter {
+			display: flex;
+			gap: var(--spacing-4);
+			padding: var(--padding-3) var(--padding-4);
+			border-top: 1px solid var(--l1-border);
+			background: var(--l2-background);
+
+			.billingFooterBtn {
+				background: var(--l3-background);
+
+				&:hover {
+					background: var(--l3-background-hover);
+				}
+			}
+		}
+	}
+
+	.emptyGraphCard {
+		:global(.ant-card-body) {
+			height: 40vh;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.billingUpdateNote {
+		margin-top: var(--spacing-8);
+		font-family: var(--font-family-inter);
+		font-size: var(--font-size-sm);
+		font-style: normal;
+		font-weight: var(--font-weight-normal);
+		line-height: 22px;
+		letter-spacing: -0.07px;
+	}
+
+	:global {
+		.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
+			width: 100%;
+			min-width: 100%;
+		}
+
+		.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
+			min-width: 100% !important;
+		}
+	}
+}
--- a/frontend/src/container/BillingContainer/BillingContainer.styles.scss
+++ b/frontend/src/container/BillingContainer/BillingContainer.styles.scss
@@ -1,70 +0,0 @@
-.billing-container {
-	margin-bottom: 40px;
-	padding-top: 36px;
-	width: 90%;
-	margin: 0 auto;
-
-	.billing-summary {
-		margin: 24px 8px;
-	}
-
-	.billing-details {
-		margin: 24px 0px;
-
-		.ant-table-title {
-			color: var(--l2-foreground);
-			background-color: var(--l3-background);
-		}
-
-		.ant-table-cell {
-			background-color: var(--l1-background);
-			border-color: var(--l1-border);
-		}
-
-		.ant-table-tbody {
-			td {
-				border-color: var(--l1-border);
-			}
-		}
-	}
-
-	.upgrade-plan-benefits {
-		margin: 0px 8px;
-		border: 1px solid var(--l1-border);
-		border-radius: 5px;
-		padding: 0 48px;
-		.plan-benefits {
-			.plan-benefit {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-				margin: 16px 0;
-			}
-		}
-	}
-
-	.empty-graph-card {
-		.ant-card-body {
-			height: 40vh;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.billing-update-note {
-		text-align: left;
-		font-size: 13px;
-		color: var(--l2-foreground);
-		margin-top: 16px;
-	}
-}
-
-.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
-	width: 100%;
-	min-width: 100%;
-}
-
-.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
-	min-width: 100% !important;
-}
--- a/frontend/src/container/BillingContainer/BillingContainer.test.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.test.tsx
@@ -38,7 +38,7 @@ describe('BillingContainer', () => {
 		});
 		expect(pricePerUnit).toBeInTheDocument();
 		const cost = await screen.findByRole('columnheader', {
-			name: /cost \(billing period to date\)/i,
+			name: /cost/i,
 		});
 		expect(cost).toBeInTheDocument();

--- a/frontend/src/container/BillingContainer/BillingContainer.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.tsx
@@ -1,12 +1,11 @@
+import { Callout } from '@signozhq/ui/callout';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { CircleCheck, CloudDownload } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
+import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
 import {
-	Alert,
-	Button,
 	Card,
 	Col,
 	Flex,
@@ -16,7 +15,10 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import getUsage, {
+	BreakdownEntry,
+	UsageResponsePayloadProps,
+} from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import manageCreditCardApi from 'api/v1/portal/create';
@@ -29,7 +31,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
@@ -38,7 +40,7 @@ import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
 import { prepareCsvData } from './BillingUsageGraph/utils';

-import './BillingContainer.styles.scss';
+import styles from './BillingContainer.module.scss';
 import { LicenseState } from 'types/api/licensesV3/getActive';

 interface DataType {
@@ -115,7 +117,7 @@ const dummyColumns: ColumnsType<DataType> = [
 		render: renderSkeletonInput,
 	},
 	{
-		title: 'Cost (Billing period to date)',
+		title: 'Cost',
 		dataIndex: 'cost',
 		key: 'cost',
 		render: renderSkeletonInput,
@@ -130,7 +132,7 @@ export default function BillingContainer(): JSX.Element {
 	const [billAmount, setBillAmount] = useState(0);
 	const [daysRemaining, setDaysRemaining] = useState(0);
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
-	const [data, setData] = useState<any[]>([]);
+	const [data, setData] = useState<DataType[]>([]);
 	const [apiResponse, setApiResponse] = useState<
 		Partial<UsageResponsePayloadProps>
 	>({});
@@ -150,7 +152,7 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();

 	const processUsageData = useCallback(
-		(data: any): void => {
+		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
 			if (isEmpty(data?.payload)) {
 				return;
 			}
@@ -158,27 +160,23 @@ export default function BillingContainer(): JSX.Element {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
 				billingPeriodEnd,
-			} = data?.payload || {};
-			const formattedUsageData: any[] = [];
+			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
+			const formattedUsageData: DataType[] = [];

 			if (breakdown && Array.isArray(breakdown)) {
 				for (let index = 0; index < breakdown.length; index += 1) {
-					const element = breakdown[index];
+					const element: BreakdownEntry = breakdown[index];

-					element?.tiers.forEach(
-						(
-							tier: { quantity: number; unitPrice: number; tierCost: number },
-							i: number,
-						) => {
-							formattedUsageData.push({
-								key: `${index}${i}`,
-								name: i === 0 ? element?.type : '',
-								dataIngested: `${tier.quantity} ${element?.unit}`,
-								pricePerUnit: tier.unitPrice,
-								cost: `$ ${tier.tierCost}`,
-							});
-						},
-					);
+					element?.tiers?.forEach((tier, i: number) => {
+						formattedUsageData.push({
+							key: `${index}${i}`,
+							name: i === 0 ? element?.type : '',
+							unit: element?.unit ?? '',
+							dataIngested: `${tier.quantity} ${element?.unit}`,
+							pricePerUnit: String(tier.unitPrice),
+							cost: `$ ${tier.tierCost}`,
+						});
+					});
 				}
 			}

@@ -251,16 +249,19 @@ export default function BillingContainer(): JSX.Element {
 			title: 'Data Ingested',
 			dataIndex: 'dataIngested',
 			key: 'dataIngested',
+			align: 'right',
 		},
 		{
 			title: 'Price per Unit',
 			dataIndex: 'pricePerUnit',
 			key: 'pricePerUnit',
+			align: 'right',
 		},
 		{
-			title: 'Cost (Billing period to date)',
+			title: 'Cost',
 			dataIndex: 'cost',
 			key: 'cost',
+			align: 'right',
 		},
 	];

@@ -345,23 +346,6 @@ export default function BillingContainer(): JSX.Element {
 		updateCreditCard,
 	]);

-	const BillingUsageGraphCallback = useCallback(
-		() =>
-			!isLoading && !isFetchingBillingData ? (
-				<>
-					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
-					<div className="billing-update-note">
-						Note: Billing metrics are updated once every 24 hours.
-					</div>
-				</>
-			) : (
-				<Card className="empty-graph-card" bordered={false}>
-					<Spinner size="large" tip="Loading..." height="35vh" />
-				</Card>
-			),
-		[apiResponse, billAmount, isLoading, isFetchingBillingData],
-	);
-
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
@@ -415,12 +399,12 @@ export default function BillingContainer(): JSX.Element {
 		trialInfo?.gracePeriodEnd;

 	return (
-		<div className="billing-container">
-			<Flex vertical style={{ marginBottom: 16 }}>
-				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
+		<div className={styles.billingContainer}>
+			<Flex vertical gap={4} className={styles.pageHeader}>
+				<Typography.Text className={styles.pageHeaderTitle}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color="muted">
+				<Typography.Text className={styles.pageHeaderSubtitle}>
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -428,50 +412,36 @@ export default function BillingContainer(): JSX.Element {
 			<Card
 				bordered={false}
 				style={{ minHeight: 150, marginBottom: 16 }}
-				className="page-info"
+				className={styles.pageInfo}
 			>
 				<Flex justify="space-between" align="center">
-					<Flex vertical>
-						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
+					<Flex vertical gap={8}>
+						<p className={styles.pageInfoTitle}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
-						</Typography.Title>
+						</p>

 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
-							<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
+							<p className={styles.pageInfoSubtitle}>
 								{daysRemaining} {daysRemainingStr}
-							</Typography.Text>
+							</p>
 						) : null}
 					</Flex>
-					<Flex gap={8}>
-						<Button
-							type="default"
-							size="middle"
-							loading={isLoadingBilling || isLoadingManageBilling}
-							disabled={isLoading || isFetchingBillingData}
-							onClick={handleCsvDownload}
-							className="periscope-btn"
-						>
-							<Flex align="center" justify="center" gap={4}>
-								<CloudDownload size="md" />
-								Download CSV
-							</Flex>
-						</Button>
-						<Button
-							data-testid="header-billing-button"
-							type="primary"
-							size="middle"
-							loading={isLoadingBilling || isLoadingManageBilling}
-							disabled={isLoading}
-							onClick={handleBilling}
-						>
-							{trialInfo?.trialConvertedToSubscription
-								? t('manage_billing')
-								: t('upgrade_plan')}
-						</Button>
-
-						<RefreshPaymentStatus type="tooltip" />
-					</Flex>
+					<Button
+						testId="header-billing-button"
+						variant="solid"
+						color="secondary"
+						size="md"
+						loading={isLoadingBilling || isLoadingManageBilling}
+						disabled={isLoading}
+						onClick={handleBilling}
+						prefix={<Landmark size={14} />}
+						className={styles.billingManageBtn}
+					>
+						{trialInfo?.trialConvertedToSubscription
+							? t('manage_billing')
+							: t('upgrade_plan')}
+					</Button>
 				</Flex>

 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -485,8 +455,8 @@ export default function BillingContainer(): JSX.Element {

 				{!isLoading && !isFetchingBillingData && !showGracePeriodMessage
 					? headerText && (
-							<Alert
-								message={headerText}
+							<Callout
+								title={headerText}
 								type="info"
 								showIcon
 								style={{ marginTop: 12 }}
@@ -503,8 +473,8 @@ export default function BillingContainer(): JSX.Element {
 				billingData &&
 				trialInfo?.gracePeriodEnd &&
 				showGracePeriodMessage ? (
-					<Alert
-						message={`Your data is safe with us until ${getFormattedDate(
+					<Callout
+						title={`Your data is safe with us until ${getFormattedDate(
 							trialInfo?.gracePeriodEnd || Date.now(),
 						)}. Please upgrade plan now to retain your data.`}
 						type="info"
@@ -515,26 +485,69 @@ export default function BillingContainer(): JSX.Element {

 				{isSubscriptionPastDue &&
 					(!isLoading && !isFetchingBillingData ? (
-						<Alert
-							message={subscriptionPastDueMessage()}
-							type="error"
-							showIcon
-							style={{ marginTop: 12 }}
-						/>
+						<Callout type="error" showIcon style={{ marginTop: 12 }}>
+							{subscriptionPastDueMessage()}
+						</Callout>
 					) : (
 						<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 					))}
 			</Card>

-			<BillingUsageGraphCallback />
+			<div className={styles.billingGraphSection}>
+				{!isLoading && !isFetchingBillingData ? (
+					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+				) : (
+					<Card className={styles.emptyGraphCard} bordered={false}>
+						<Spinner size="large" tip="Loading..." height="35vh" />
+					</Card>
+				)}
+				{!isLoading && !isFetchingBillingData && (
+					<div className={styles.billingGraphFooter}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							size="md"
+							onClick={handleCsvDownload}
+							prefix={<MonitorDown size={14} />}
+							testId="download-csv-button"
+							className={styles.billingFooterBtn}
+						>
+							Download CSV
+						</Button>
+						<RefreshPaymentStatus type="button" className={styles.billingFooterBtn} />
+					</div>
+				)}
+			</div>
+			{!isLoading && !isFetchingBillingData && (
+				<Callout type="info" size="small" className={styles.billingUpdateNote}>
+					Billing metrics are updated once every 24 hours.
+				</Callout>
+			)}

-			<div className="billing-details">
+			<div className={styles.billingDetails}>
 				{!isLoading && !isFetchingBillingData && (
 					<Table
 						columns={columns}
 						dataSource={data}
 						pagination={false}
 						bordered={false}
+						components={{
+							header: {
+								cell: ({
+									style,
+									...props
+								}: React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element => {
+									const { background: _, boxShadow: __, ...safeStyle } = style ?? {};
+									return (
+										<th
+											{...props}
+											style={safeStyle}
+											className={`${props.className ?? ''} ${styles.billingDetailsHeaderCell}`}
+										/>
+									);
+								},
+							},
+						}}
 					/>
 				)}

@@ -546,7 +559,7 @@ export default function BillingContainer(): JSX.Element {
 			)}

 			{!trialInfo?.trialConvertedToSubscription && (
-				<div className="upgrade-plan-benefits">
+				<div className={styles.upgradePlanBenefits}>
 					<Row
 						justify="space-between"
 						align="middle"
@@ -555,16 +568,16 @@ export default function BillingContainer(): JSX.Element {
 						}}
 						gutter={[16, 16]}
 					>
-						<Col span={20} className="plan-benefits">
-							<Typography.Text className="plan-benefit">
+						<Col span={20} className={styles.planBenefits}>
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('upgrade_now_text')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
-							<Typography.Text className="plan-benefit">
+							<Typography.Text className={styles.planBenefit}>
 								<CircleCheck size="md" />
 								<span>
 									{t('checkout_plans')} &nbsp;
@@ -583,9 +596,10 @@ export default function BillingContainer(): JSX.Element {
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
-								data-testid="upgrade-plan-button"
-								type="primary"
-								size="middle"
+								testId="upgrade-plan-button"
+								variant="solid"
+								color="primary"
+								size="md"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.module.scss
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.module.scss
@@ -0,0 +1,9 @@
+.headerRow {
+	padding: var(--spacing-8);
+}
+
+.itemList {
+	overflow-y: auto;
+	max-height: 300px;
+	padding: var(--padding-3);
+}
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.tsx
@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import TooltipHeader from 'lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader';
+import TooltipItem from 'lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getToolTipValue } from 'components/Graph/yAxisConfig';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	TooltipContentItem,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import TooltipStyles from 'lib/uPlotV2/components/Tooltip/Tooltip.module.scss';
+import Styles from './BillingBarChartTooltip.module.scss';
+
+interface BillingBarChartTooltipProps extends TooltipRenderArgs {
+	billingApiResponse: MetricRangePayloadProps;
+}
+
+export function BillingBarChartTooltip({
+	billingApiResponse,
+	uPlotInstance,
+	dataIndexes,
+	seriesIndex,
+	isPinned,
+}: BillingBarChartTooltipProps): JSX.Element {
+	const content = useMemo((): TooltipContentItem[] => {
+		const baseItems = buildTooltipContent({
+			data: uPlotInstance.data,
+			series: uPlotInstance.series,
+			dataIndexes,
+			activeSeriesIndex: seriesIndex,
+			uPlotInstance,
+			yAxisUnit: '',
+			isStackedBarChart: true,
+		});
+
+		return baseItems.map((item) => {
+			const match = billingApiResponse.data.result.find(
+				(r) => (r.legend || r.queryName) === item.label,
+			);
+
+			if (!match) {
+				return item;
+			}
+
+			const seriesIdx = uPlotInstance.series.findIndex(
+				(s) => s.label === item.label,
+			);
+			if (seriesIdx === -1) {
+				return item;
+			}
+
+			const dataIndex = dataIndexes[seriesIdx];
+			const quantity = dataIndex != null ? match.quantity?.[dataIndex] : null;
+			const unit = match.unit ?? '';
+			const quantityStr =
+				quantity != null ? ` - ${getToolTipValue(quantity)} ${unit}` : '';
+
+			return {
+				...item,
+				tooltipValue: `$${getToolTipValue(item.value, '')}${quantityStr}`,
+			};
+		});
+	}, [uPlotInstance, seriesIndex, dataIndexes, billingApiResponse]);
+
+	const activeItem = content.find((item) => item.isActive) ?? null;
+
+	return (
+		<div
+			className={cx(TooltipStyles.container, {
+				[TooltipStyles.pinned]: isPinned,
+			})}
+			data-testid="uplot-tooltip-container"
+		>
+			<TooltipHeader
+				uPlotInstance={uPlotInstance}
+				showTooltipHeader
+				isPinned={isPinned}
+				activeItem={null}
+				headerRowClassName={Styles.headerRow}
+				dateFormat={DATE_TIME_FORMATS.MONTH_DATE}
+			/>
+			{activeItem != null && <span className={TooltipStyles.divider} />}
+			<div className={Styles.itemList} data-testid="uplot-tooltip-list">
+				{content.map((item) => (
+					<TooltipItem key={item.label} item={item} isItemActive={item.isActive} />
+				))}
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.module.scss
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.module.scss
@@ -0,0 +1,37 @@
+.graphContainer {
+	height: 100%;
+}
+
+.billingGraphCard {
+	:global {
+		.uplot-no-data {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.ant-card-body {
+			height: 40vh;
+
+			.uplot-graph-container {
+				padding: 8px;
+			}
+		}
+	}
+
+	.totalSpent {
+		font-family: 'SF Mono', monospace;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	.totalSpentTitle {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 22px;
+		letter-spacing: 0.48px;
+		color: var(--l2-foreground);
+	}
+}
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.styles.scss
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.styles.scss
@@ -1,23 +0,0 @@
-.billing-graph-card {
-	.ant-card-body {
-		height: 40vh;
-		.uplot-graph-container {
-			padding: 8px;
-		}
-	}
-	.total-spent {
-		font-family: 'SF Mono' monospace;
-		font-size: 16px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 24px;
-	}
-
-	.total-spent-title {
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 22px;
-		letter-spacing: 0.48px;
-		color: var(--l2-foreground);
-	}
-}
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
@@ -1,221 +1,146 @@
-import { useMemo, useRef } from 'react';
-import { Color } from '@signozhq/design-tokens';
+import { useCallback, useMemo, useRef } from 'react';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import Uplot from 'components/Uplot';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
-import getAxes from 'lib/uPlotLib/utils/getAxes';
-import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
-import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
-import uPlot from 'uplot';
-
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import {
+	LegendPosition,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import type uPlot from 'uplot';
+import type { UsageResponsePayloadProps } from 'api/billing/getUsage';
+
+import { BillingBarChartTooltip } from './BillingBarChartTooltip';
+import { prepareBillingBarConfig } from './prepareBillingBarConfig';
+import {
+	calculateStartEndTime,
 	convertDataToMetricRangePayload,
 	fillMissingValuesForQuantities,
 } from './utils';

-import './BillingUsageGraph.styles.scss';
-import '../../../lib/uPlotLib/uPlotLib.styles.scss';
+import styles from './BillingUsageGraph.module.scss';

 interface BillingUsageGraphProps {
-	data: any;
+	data: Partial<UsageResponsePayloadProps>;
 	billAmount: number;
 }
-const paths = (
-	u: any,
-	seriesIdx: number,
-	idx0: number,
-	idx1: number,
-	extendGap: boolean,
-	buildClip: boolean,
-): uPlot.Series.PathBuilder => {
-	const s = u.series[seriesIdx];
-	const style = s.drawStyle;
-	const interp = s.lineInterpolation;

-	const renderer = getRenderer(style, interp);
-
-	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
-};
-
-const calculateStartEndTime = (
-	data: any,
-): { startTime: number; endTime: number } => {
-	const timestamps: number[] = [];
-	data?.details?.breakdown?.forEach((breakdown: any) => {
-		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
-			timestamps.push(entry?.timestamp);
-		});
-	});
-	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
-	const startTime: number = Math.min(...timestamps, ...billingTime);
-	const endTime: number = Math.max(...timestamps, ...billingTime);
-	return { startTime, endTime };
-};
+const numberFormatter = new Intl.NumberFormat('en-US');

 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
-	// Added this to fix the issue where breakdown with one day data are causing the bars to spread across multiple days
-	data?.details?.breakdown?.forEach((breakdown: any) => {
-		if (breakdown?.dayWiseBreakdown?.breakdown?.length === 1) {
-			const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
-			const nextDay = {
-				...currentDay,
-				timestamp: currentDay.timestamp + 86400,
-				count: 0,
-				size: 0,
-				quantity: 0,
-				total: 0,
-			};
-			breakdown.dayWiseBreakdown.breakdown.push(nextDay);
-		}
-	});
-	const graphCompatibleData = useMemo(
-		() => convertDataToMetricRangePayload(data),
-		[data],
-	);
-	const chartData = getUPlotChartData(graphCompatibleData);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);

-	const { startTime, endTime } = useMemo(
-		() => calculateStartEndTime(data),
-		[data],
-	);
-
-	const getGraphSeries = (color: string, label: string): any => ({
-		drawStyle: 'bars',
-		paths,
-		lineInterpolation: 'spline',
-		show: true,
-		label,
-		fill: color,
-		stroke: color,
-		width: 2,
-		spanGaps: true,
-		points: {
-			size: 5,
-			show: false,
-			stroke: color,
-		},
-	});
-
-	const uPlotSeries: any = useMemo(
-		() => [
-			{ label: 'Timestamp', stroke: 'purple' },
-			getGraphSeries(
-				'#7CEDBE',
-				graphCompatibleData.data.result[0]?.legend as string,
-			),
-			getGraphSeries(
-				'#4E74F8',
-				graphCompatibleData.data.result[1]?.legend as string,
-			),
-			getGraphSeries(
-				'#F24769',
-				graphCompatibleData.data.result[2]?.legend as string,
-			),
-		],
-		[graphCompatibleData.data.result],
-	);
-
-	const axesOptions = getAxes({ isDarkMode, yAxisUnit: '' });
-
-	const optionsForChart: uPlot.Options = useMemo(
-		() => ({
-			id: 'billing-usage-breakdown',
-			series: uPlotSeries,
-			width: containerDimensions.width,
-			height: containerDimensions.height - 30,
-			axes: [
-				{
-					...axesOptions[0],
-					grid: {
-						...axesOptions.grid,
-						show: false,
-						stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
-					},
-				},
-				{
-					...axesOptions[1],
-					stroke: isDarkMode ? Color.BG_SLATE_200 : Color.BG_INK_400,
-				},
-			],
-			scales: {
-				x: {
-					...getXAxisScale(startTime - 86400, endTime), // Minus 86400 from startTime to decrease a day to have a buffer start
-				},
-				y: {
-					...getYAxisScale({
-						series: graphCompatibleData?.data?.newResult?.data?.result,
-						yAxisUnit: '',
-						softMax: null,
-						softMin: null,
-					}),
-				},
-			},
-			legend: {
-				show: true,
-				live: false,
-				isolate: true,
-			},
-			cursor: {
-				lock: false,
-				focus: {
-					prox: 1e6,
-					bias: 1,
-				},
-			},
-			focus: {
-				alpha: 0.3,
-			},
-			padding: [32, 32, 16, 16],
-			plugins: [
-				tooltipPlugin({
-					apiResponse: fillMissingValuesForQuantities(
-						graphCompatibleData,
-						chartData[0],
-					),
-					yAxisUnit: '',
-					isBillingUsageGraphs: true,
-					isDarkMode,
+	// Single-day data causes bars to span multiple days — add a synthetic
+	// zero-value next-day entry so uPlot renders a correctly-sized single-day bar.
+	const normalizedData = useMemo(() => {
+		if (!data?.details?.breakdown) {
+			return data;
+		}
+		return {
+			...data,
+			details: {
+				...data.details,
+				breakdown: data.details.breakdown.map((breakdown) => {
+					if (breakdown?.dayWiseBreakdown?.breakdown?.length !== 1) {
+						return breakdown;
+					}
+					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
+					const nextDay = {
+						...currentDay,
+						timestamp: currentDay.timestamp + 86400,
+						count: 0,
+						size: 0,
+						quantity: 0,
+						total: 0,
+					};
+					return {
+						...breakdown,
+						dayWiseBreakdown: {
+							...breakdown.dayWiseBreakdown,
+							breakdown: [...breakdown.dayWiseBreakdown.breakdown, nextDay],
+						},
+					};
 				}),
-			],
-		}),
-		[
-			axesOptions,
-			chartData,
-			containerDimensions.height,
-			containerDimensions.width,
-			endTime,
-			graphCompatibleData,
-			isDarkMode,
-			startTime,
-			uPlotSeries,
-		],
+			},
+		};
+	}, [data]);
+
+	const graphCompatibleData = useMemo(
+		() => convertDataToMetricRangePayload(normalizedData),
+		[normalizedData],
 	);

-	const numberFormatter = new Intl.NumberFormat('en-US');
+	const chartData = useMemo(
+		() => prepareChartData(graphCompatibleData) as uPlot.AlignedData,
+		[graphCompatibleData],
+	);
+
+	const filledApiResponse = useMemo(
+		(): MetricRangePayloadProps =>
+			fillMissingValuesForQuantities(
+				graphCompatibleData,
+				chartData[0] as number[],
+			),
+		[graphCompatibleData, chartData],
+	);
+
+	const { startTime, endTime } = useMemo(
+		() =>
+			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
+		[normalizedData],
+	);
+
+	const config = useMemo(
+		() =>
+			prepareBillingBarConfig({
+				isDarkMode,
+				// Subtract 86400s (one day) from startTime to add a buffer before first bar
+				minTimeScale: startTime !== undefined ? startTime - 86400 : undefined,
+				maxTimeScale: endTime,
+				apiResponse: graphCompatibleData,
+			}),
+		[isDarkMode, startTime, endTime, graphCompatibleData],
+	);
+
+	const renderBillingTooltip = useCallback(
+		(args: TooltipRenderArgs) => (
+			<BillingBarChartTooltip billingApiResponse={filledApiResponse} {...args} />
+		),
+		[filledApiResponse],
+	);

 	return (
-		<Card bordered={false} className="billing-graph-card">
+		<Card bordered={false} className={styles.billingGraphCard}>
 			<Flex justify="space-between">
 				<Flex vertical gap={6}>
-					<Typography.Text className="total-spent-title">
+					<Typography.Text className={styles.totalSpentTitle}>
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className="total-spent">
+					<Typography.Text className={styles.totalSpent}>
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>
 			</Flex>
-			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
-				<Uplot data={chartData} options={optionsForChart} />
+			<div ref={graphRef} className={styles.graphContainer}>
+				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+					<BarChart
+						config={config}
+						data={chartData}
+						isStackedBarChart
+						legendConfig={{ position: LegendPosition.BOTTOM }}
+						customTooltip={renderBillingTooltip}
+						width={containerDimensions.width}
+						height={containerDimensions.height - 30}
+						canPinTooltip
+					/>
+				)}
 			</div>
 		</Card>
 	);
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/tests/BillingBarChartTooltip.test.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/tests/BillingBarChartTooltip.test.tsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, screen } from 'tests/test-utils';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import { BillingBarChartTooltip } from '../BillingBarChartTooltip';
+
+// Mock buildTooltipContent so tests don't depend on uPlot stacking math
+jest.mock('lib/uPlotV2/components/Tooltip/utils', () => ({
+	buildTooltipContent: jest.fn().mockReturnValue([
+		{
+			label: 'Logs',
+			value: 100,
+			tooltipValue: '$100.00',
+			color: '#7CEDBE',
+			isActive: true,
+			isHighlighted: false,
+		},
+		{
+			label: 'Traces',
+			value: 50,
+			tooltipValue: '$50.00',
+			color: '#4E74F8',
+			isActive: false,
+			isHighlighted: false,
+		},
+	]),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn().mockReturnValue(false),
+}));
+
+function makeUPlotInstance(seriesLabels: string[]): uPlot {
+	return {
+		data: [
+			[1000, 2000],
+			[100, 200],
+			[50, 80],
+		],
+		cursor: { idx: 0 },
+		series: [
+			{ label: 'Timestamp', show: true, stroke: '#000' },
+			...seriesLabels.map((label) => ({
+				label,
+				show: true,
+				stroke: '#aabbcc',
+			})),
+		],
+	} as unknown as uPlot;
+}
+
+function makeBillingApiResponse(
+	entries: { legend: string; quantity: (number | null)[]; unit: string }[],
+): MetricRangePayloadProps {
+	return {
+		data: {
+			result: entries.map((e) => ({
+				legend: e.legend,
+				queryName: e.legend,
+				metric: {},
+				values: [[1000, '10']] as [number, string][],
+				quantity: e.quantity as number[],
+				unit: e.unit,
+			})),
+			resultType: '',
+			newResult: { data: { result: [], resultType: '' } },
+		},
+	};
+}
+
+const baseTooltipArgs = {
+	isPinned: false,
+	dismiss: jest.fn(),
+	viaSync: false,
+	seriesIndex: 1,
+	dataIndexes: [null, 0, 0],
+};
+
+describe('BillingBarChartTooltip', () => {
+	it('augments tooltipValue with quantity and unit for each series', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [1.5, 2.0], unit: 'GB' },
+			{ legend: 'Traces', quantity: [500, 800], unit: 'spans' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText(/1\.5 GB/i).length).toBeGreaterThan(0);
+		expect(screen.getAllByText(/500 spans/i).length).toBeGreaterThan(0);
+	});
+
+	it('omits quantity line when quantity at dataIndex is null', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [null, null], unit: 'GB' },
+			{ legend: 'Traces', quantity: [null, null], unit: 'spans' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.queryByText(/null GB/i)).not.toBeInTheDocument();
+		expect(screen.queryByText(/null spans/i)).not.toBeInTheDocument();
+		expect(screen.getByTestId('uplot-tooltip-container')).toBeInTheDocument();
+	});
+
+	it('formats dollar value via getToolTipValue — strips trailing zeros (0.3076 → $0.3)', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs']);
+		const { buildTooltipContent } = jest.requireMock(
+			'lib/uPlotV2/components/Tooltip/utils',
+		) as { buildTooltipContent: jest.Mock };
+		buildTooltipContent.mockReturnValueOnce([
+			{
+				label: 'Logs',
+				value: 0.3076171875,
+				tooltipValue: '$0.31',
+				color: '#7CEDBE',
+				isActive: true,
+				isHighlighted: false,
+			},
+		]);
+		const billingApiResponse = makeBillingApiResponse([
+			{ legend: 'Logs', quantity: [1.23], unit: 'GB' },
+		]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText(/\$0\.3 -/i).length).toBeGreaterThan(0);
+	});
+
+	it('passes through base tooltipValue when series is not in billingApiResponse', () => {
+		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
+		const billingApiResponse = makeBillingApiResponse([]);
+
+		render(
+			<BillingBarChartTooltip
+				{...baseTooltipArgs}
+				uPlotInstance={uPlotInstance}
+				billingApiResponse={billingApiResponse}
+			/>,
+		);
+
+		expect(screen.getAllByText('$100.00').length).toBeGreaterThan(0);
+		expect(screen.getAllByText('$50.00').length).toBeGreaterThan(0);
+	});
+});
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/tests/prepareBillingBarConfig.test.ts
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/tests/prepareBillingBarConfig.test.ts
@@ -0,0 +1,101 @@
+import { Color } from '@signozhq/design-tokens';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { prepareBillingBarConfig } from '../prepareBillingBarConfig';
+
+const makeApiResponse = (legends: string[]): MetricRangePayloadProps => ({
+	data: {
+		result: legends.map((legend) => ({
+			legend,
+			queryName: legend,
+			metric: {},
+			values: [[1000, '10']],
+		})),
+		resultType: '',
+		newResult: { data: { result: [], resultType: '' } },
+	},
+});
+
+describe('prepareBillingBarConfig', () => {
+	const baseProps = { isDarkMode: false };
+
+	it('returns a builder with no series when apiResponse is undefined', () => {
+		const builder = prepareBillingBarConfig(baseProps);
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(1);
+	});
+
+	it('returns a builder with no series when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(1);
+	});
+
+	it('adds one series per result entry with correct labels and colors', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
+		});
+		const config = builder.getConfig();
+		expect(config.series).toHaveLength(4);
+		expect(config.series?.[1]?.label).toBe('Logs');
+		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
+		expect(config.series?.[2]?.label).toBe('Traces');
+		expect(config.series?.[2]?.stroke).toBe(Color.BG_ROBIN_500);
+		expect(config.series?.[3]?.label).toBe('Metrics');
+		expect(config.series?.[3]?.stroke).toBe(Color.BG_SAKURA_500);
+	});
+
+	it('assigns fallback color (Amber500) for signals beyond the 3-color palette', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['A', 'B', 'C', 'D']),
+		});
+		const config = builder.getConfig();
+		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
+	});
+
+	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
+		expect(config.focus).toStrictEqual({ alpha: 0.3 });
+	});
+
+	it('sets no bands when result is empty', () => {
+		const builder = prepareBillingBarConfig({
+			...baseProps,
+			apiResponse: makeApiResponse([]),
+		});
+		const config = builder.getConfig();
+		expect(config.bands).toBeUndefined();
+	});
+
+	it('uses queryName as label when legend is undefined', () => {
+		const apiResponse: MetricRangePayloadProps = {
+			data: {
+				result: [
+					{
+						legend: undefined as any,
+						queryName: 'Logs',
+						metric: {},
+						values: [[1000, '10']],
+					},
+				],
+				resultType: '',
+				newResult: { data: { result: [], resultType: '' } },
+			},
+		};
+		const builder = prepareBillingBarConfig({ isDarkMode: false, apiResponse });
+		const config = builder.getConfig();
+		expect(config.series?.[1]?.label).toBe('Logs');
+		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
+	});
+});
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/tests/utils.test.ts
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/tests/utils.test.ts
@@ -0,0 +1,145 @@
+import {
+	calculateStartEndTime,
+	convertDataToMetricRangePayload,
+} from '../utils';
+
+const makeData = (
+	timestamps: number[],
+	billingPeriodStart?: number,
+	billingPeriodEnd?: number,
+) => ({
+	billingPeriodStart,
+	billingPeriodEnd,
+	details: {
+		total: 0,
+		baseFee: 0,
+		billTotal: 0,
+		breakdown: [
+			{
+				type: 'Logs',
+				unit: 'GB',
+				dayWiseBreakdown: {
+					breakdown: timestamps.map((timestamp) => ({
+						timestamp,
+						total: 0,
+						quantity: 0,
+						count: 0,
+						size: 0,
+					})),
+				},
+			},
+		],
+	},
+});
+
+describe('convertDataToMetricRangePayload', () => {
+	it('returns empty result when all dayWiseBreakdown.breakdown are null', () => {
+		const data = {
+			billingPeriodStart: 1778763678,
+			billingPeriodEnd: 1781442078,
+			details: {
+				total: 0,
+				baseFee: 49,
+				billTotal: 49,
+				breakdown: [
+					{
+						type: 'Metrics',
+						unit: 'Million',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+					{
+						type: 'Traces',
+						unit: 'GB',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+					{
+						type: 'Logs',
+						unit: 'GB',
+						tiers: [],
+						dayWiseBreakdown: { type: '', breakdown: null },
+					},
+				],
+			},
+		};
+		const result = convertDataToMetricRangePayload(data);
+		expect(result.data.result).toHaveLength(0);
+	});
+
+	it('includes only series that have day-wise data', () => {
+		const data = {
+			details: {
+				breakdown: [
+					{
+						type: 'Metrics',
+						unit: 'Million',
+						dayWiseBreakdown: { breakdown: null },
+					},
+					{
+						type: 'Logs',
+						unit: 'GB',
+						dayWiseBreakdown: {
+							breakdown: [
+								{ timestamp: 1000, total: 5, quantity: 10, count: 0, size: 0 },
+							],
+						},
+					},
+				],
+			},
+		};
+		const result = convertDataToMetricRangePayload(data);
+		expect(result.data.result).toHaveLength(1);
+		expect(result.data.result[0].legend).toBe('Logs');
+	});
+});
+
+describe('calculateStartEndTime', () => {
+	it('returns min/max of all breakdown timestamps', () => {
+		const data = makeData([1000, 3000, 2000]);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 1000,
+			endTime: 3000,
+		});
+	});
+
+	it('includes billingPeriodStart and billingPeriodEnd in the range', () => {
+		const data = makeData([2000, 3000], 500, 4000);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 500,
+			endTime: 4000,
+		});
+	});
+
+	it('returns undefined when there are no timestamps and no billing period', () => {
+		expect(calculateStartEndTime({})).toStrictEqual({
+			startTime: undefined,
+			endTime: undefined,
+		});
+	});
+
+	it('returns undefined when breakdown is empty', () => {
+		const data = makeData([]);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: undefined,
+			endTime: undefined,
+		});
+	});
+
+	it('filters out non-finite billingPeriod values', () => {
+		const data = makeData([1000], NaN, Infinity);
+		expect(calculateStartEndTime(data)).toStrictEqual({
+			startTime: 1000,
+			endTime: 1000,
+		});
+	});
+
+	it('works when details is missing', () => {
+		expect(
+			calculateStartEndTime({ billingPeriodStart: 100, billingPeriodEnd: 200 }),
+		).toStrictEqual({
+			startTime: 100,
+			endTime: 200,
+		});
+	});
+});
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts
@@ -0,0 +1,71 @@
+import { Color } from '@signozhq/design-tokens';
+import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+const BILLING_SERIES_COLORS = [
+	Color.BG_FOREST_300,
+	Color.BG_ROBIN_500,
+	Color.BG_SAKURA_500,
+];
+
+export interface PrepareBillingBarConfigProps {
+	isDarkMode: boolean;
+	timezone?: Timezone;
+	minTimeScale?: number;
+	maxTimeScale?: number;
+	apiResponse?: MetricRangePayloadProps;
+}
+
+export function prepareBillingBarConfig({
+	isDarkMode,
+	timezone,
+	minTimeScale,
+	maxTimeScale,
+	apiResponse,
+}: PrepareBillingBarConfigProps): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		id: 'billing-usage-breakdown',
+		isDarkMode,
+		timezone,
+		panelType: PANEL_TYPES.BAR,
+		minTimeScale,
+		maxTimeScale,
+	});
+
+	const results = apiResponse?.data?.result;
+	if (!results?.length) {
+		return builder;
+	}
+
+	const labels = results.map((s) => s.legend || s.queryName || '');
+
+	const colorMapping = labels.reduce<Record<string, string>>(
+		(acc, label, index) => {
+			acc[label] = BILLING_SERIES_COLORS[index] ?? Color.BG_AMBER_500;
+			return acc;
+		},
+		{},
+	);
+
+	labels.forEach((label) => {
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			label,
+			colorMapping,
+			isDarkMode,
+			metric: {},
+		});
+	});
+
+	builder.setBands(getInitialStackedBands(results.length));
+	builder.setPadding([32, 32, 16, 16]);
+	builder.setFocus({ alpha: 0.3 });
+
+	return builder;
+}
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts
@@ -1,7 +1,7 @@
 import { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { isEmpty, isNull } from 'lodash-es';
 import { unparse } from 'papaparse';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -29,23 +29,25 @@ export const convertDataToMetricRangePayload = (
 		return emptyStateData;
 	}

-	const payload = breakdown.map((info: any) => {
-		const metric = info.type;
-		const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
-			(a: any, b: any) => a.timestamp - b.timestamp,
-		);
-		const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
-			categoryInfo.timestamp,
-			categoryInfo.total,
-		]);
-		const queryName = info.type;
-		const legend = info.type;
-		const { unit } = info;
-		const quantity = sortedBreakdownData.map(
-			(categoryInfo: any) => categoryInfo.quantity,
-		);
-		return { metric, values, queryName, legend, quantity, unit };
-	});
+	const payload = breakdown
+		.map((info: any) => {
+			const metric = info.type;
+			const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
+				(a: any, b: any) => a.timestamp - b.timestamp,
+			);
+			const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
+				categoryInfo.timestamp,
+				categoryInfo.total,
+			]);
+			const queryName = info.type;
+			const legend = info.type;
+			const { unit } = info;
+			const quantity = sortedBreakdownData.map(
+				(categoryInfo: any) => categoryInfo.quantity,
+			);
+			return { metric, values, queryName, legend, quantity, unit };
+		})
+		.filter((series: any) => series.values.length > 0);

 	const sortedData = payload.sort((a: any, b: any) => {
 		const sumA = a.values.reduce((acc: any, val: any) => acc + val[1], 0);
@@ -120,11 +122,40 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 	fileName: string;
 } {
 	const graphCompatibleData = convertDataToMetricRangePayload(data);
-	const chartData = getUPlotChartData(graphCompatibleData);
-	const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
+	const chartData = prepareChartData(graphCompatibleData);
+	const quantityMapArr = quantityDataArr(
+		graphCompatibleData,
+		chartData[0] as number[],
+	);

 	return {
 		csvData: unparse(generateCsvData(quantityMapArr)),
 		fileName: csvFileName(quantityMapArr),
 	};
 }
+
+export function calculateStartEndTime(
+	data: Partial<UsageResponsePayloadProps>,
+): { startTime: number | undefined; endTime: number | undefined } {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
+			timestamps.push(entry.timestamp);
+		});
+	});
+
+	const billingTime: number[] = [
+		data?.billingPeriodStart,
+		data?.billingPeriodEnd,
+	].filter((t): t is number => typeof t === 'number' && Number.isFinite(t));
+
+	const allTimes = [...timestamps, ...billingTime];
+	if (allTimes.length === 0) {
+		return { startTime: undefined, endTime: undefined };
+	}
+
+	return {
+		startTime: Math.min(...allTimes),
+		endTime: Math.max(...allTimes),
+	};
+}
--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx
@@ -18,6 +18,8 @@ interface TooltipHeaderProps {
 	showTooltipHeader: boolean;
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
+	headerRowClassName?: string;
+	dateFormat?: string;
 }

 export default function TooltipHeader({
@@ -26,6 +28,8 @@ export default function TooltipHeader({
 	showTooltipHeader,
 	isPinned,
 	activeItem,
+	headerRowClassName,
+	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -44,12 +48,13 @@ export default function TooltipHeader({
 		}
 		return dayjs(timestamp * 1000)
 			.tz(resolvedTimezone)
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+			.format(dateFormat);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
+		dateFormat,
 	]);

 	return (
@@ -58,7 +63,7 @@ export default function TooltipHeader({
 			data-testid="uplot-tooltip-header-container"
 		>
 			{showTooltipHeader && headerTitle && (
-				<div className={Styles.headerRow}>
+				<div className={cx(Styles.headerRow, headerRowClassName)}>
 					<span>{headerTitle}</span>
 					{isPinned && (
 						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">
--- a/go.mod
+++ b/go.mod
@@ -18,6 +18,7 @@ require (
 	github.com/dgraph-io/ristretto/v2 v2.3.0
 	github.com/dustin/go-humanize v1.0.1
 	github.com/emersion/go-smtp v0.24.0
+	github.com/evanphx/json-patch/v5 v5.9.11
 	github.com/gin-gonic/gin v1.11.0
 	github.com/go-co-op/gocron v1.30.1
 	github.com/go-openapi/runtime v0.29.2
--- a/go.sum
+++ b/go.sum
@@ -311,6 +311,8 @@ github.com/envoyproxy/go-control-plane/envoy v1.37.0/go.mod h1:DReE9MMrmecPy+YvQ
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/envoyproxy/protoc-gen-validate v1.3.3 h1:MVQghNeW+LZcmXe7SY1V36Z+WFMDjpqGAGacLe2T0ds=
 github.com/envoyproxy/protoc-gen-validate v1.3.3/go.mod h1:TsndJ/ngyIdQRhMcVVGDDHINPLWB7C82oDArY51KfB0=
+github.com/evanphx/json-patch/v5 v5.9.11 h1:/8HVnzMq13/3x9TPvjG08wUGqBTmZBsCWzjTM0wiaDU=
+github.com/evanphx/json-patch/v5 v5.9.11/go.mod h1:3j+LviiESTElxA4p3EMKAB9HXj3/XEtnUf6OZxqIQTM=
 github.com/facette/natsort v0.0.0-20181210072756-2cd4dd1e2dcb h1:IT4JYU7k4ikYg1SCxNI1/Tieq/NFvh6dzLdgi7eu0tM=
 github.com/facette/natsort v0.0.0-20181210072756-2cd4dd1e2dcb/go.mod h1:bH6Xx7IW64qjjJq8M2u4dxNaBiDfKK+z/3eGDpXEQhc=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
--- a/pkg/apiserver/signozapiserver/dashboard.go
+++ b/pkg/apiserver/signozapiserver/dashboard.go
@@ -24,9 +24,10 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		Response:            new(dashboardtypes.GettableDashboardV2),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusCreated,
-		ErrorStatusCodes:    []int{},
-		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+		// TODO: add http.StatusConflict once the dashboard name unique index is added.
+		ErrorStatusCodes: []int{http.StatusBadRequest},
+		Deprecated:       false,
+		SecuritySchemes:  newSecuritySchemes(types.RoleEditor),
 	})).Methods(http.MethodPost).GetError(); err != nil {
 		return err
 	}
@@ -41,13 +42,87 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		Response:            new(dashboardtypes.GettableDashboardV2),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusOK,
-		ErrorStatusCodes:    []int{},
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 		Deprecated:          false,
 		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}

+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UpdateV2), handler.OpenAPIDef{
+		ID:                  "UpdateDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Update dashboard (v2)",
+		Description:         "This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.",
+		Request:             new(dashboardtypes.UpdatableDashboardV2),
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.PatchV2), handler.OpenAPIDef{
+		ID:          "PatchDashboardV2",
+		Tags:        []string{"dashboard"},
+		Summary:     "Patch dashboard (v2)",
+		Description: "This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.",
+		Request:     new(dashboardtypes.PatchableDashboardV2),
+		// Strictly per RFC 6902 the content type is `application/json-patch+json`,
+		// but our OpenAPI generator only reflects schemas for content types it
+		// understands (application/json, form-urlencoded, multipart) — anything
+		// else degrades to `type: string`. Declaring application/json here keeps
+		// the array-of-ops schema visible to spec consumers; the runtime decoder
+		// parses JSON regardless of the request's actual Content-Type header.
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPatch).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.LockV2), handler.OpenAPIDef{
+		ID:                  "LockDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Lock dashboard (v2)",
+		Description:         "This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UnlockV2), handler.OpenAPIDef{
+		ID:                  "UnlockDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Unlock dashboard (v2)",
+		Description:         "This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v1/dashboards/{id}/public", handler.New(provider.authzMiddleware.AdminAccess(provider.dashboardHandler.CreatePublic), handler.OpenAPIDef{
 		ID:                  "CreatePublicDashboard",
 		Tags:                []string{"dashboard"},
--- a/pkg/modules/dashboard/dashboard.go
+++ b/pkg/modules/dashboard/dashboard.go
@@ -60,6 +60,12 @@ type Module interface {
 	CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error)

 	GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error)
+
+	UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error)
+
+	LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error
+
+	PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error)
 }

 type Handler interface {
@@ -89,4 +95,12 @@ type Handler interface {
 	CreateV2(http.ResponseWriter, *http.Request)

 	GetV2(http.ResponseWriter, *http.Request)
+
+	UpdateV2(http.ResponseWriter, *http.Request)
+
+	LockV2(http.ResponseWriter, *http.Request)
+
+	UnlockV2(http.ResponseWriter, *http.Request)
+
+	PatchV2(http.ResponseWriter, *http.Request)
 }
--- a/pkg/modules/dashboard/impldashboard/store.go
+++ b/pkg/modules/dashboard/impldashboard/store.go
@@ -153,7 +153,7 @@ func (store *store) ListPublic(ctx context.Context, orgID valuer.UUID) ([]*dashb
 func (store *store) Update(ctx context.Context, orgID valuer.UUID, storableDashboard *dashboardtypes.StorableDashboard) error {
 	_, err := store.
 		sqlstore.
-		BunDB().
+		BunDBCtx(ctx).
 		NewUpdate().
 		Model(storableDashboard).
 		WherePK().
--- a/pkg/modules/dashboard/impldashboard/v2_handler.go
+++ b/pkg/modules/dashboard/impldashboard/v2_handler.go
@@ -9,6 +9,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/http/binding"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
@@ -72,3 +73,135 @@ func (handler *handler) GetV2(rw http.ResponseWriter, r *http.Request) {

 	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
 }
+
+func (handler *handler) LockV2(rw http.ResponseWriter, r *http.Request) {
+	handler.lockUnlockV2(rw, r, true)
+}
+
+func (handler *handler) UnlockV2(rw http.ResponseWriter, r *http.Request) {
+	handler.lockUnlockV2(rw, r, false)
+}
+
+func (handler *handler) lockUnlockV2(rw http.ResponseWriter, r *http.Request, lock bool) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	isAdmin := false
+	selectors := []coretypes.Selector{
+		coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName),
+	}
+	err = handler.authz.CheckWithTupleCreation(
+		ctx,
+		claims,
+		orgID,
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		coretypes.NewResourceRole(),
+		selectors,
+		selectors,
+	)
+	if err == nil {
+		isAdmin = true
+	}
+
+	if err := handler.module.LockUnlockV2(ctx, orgID, dashboardID, claims.Email, isAdmin, lock); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+func (handler *handler) UpdateV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.UpdatableDashboardV2{}
+	if err := binding.JSON.BindBody(r.Body, &req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.UpdateV2(ctx, orgID, dashboardID, claims.Email, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
+}
+
+func (handler *handler) PatchV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.PatchableDashboardV2{}
+	if err := binding.JSON.BindBody(r.Body, &req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.PatchV2(ctx, orgID, dashboardID, claims.Email, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
+}
--- a/pkg/modules/dashboard/impldashboard/v2_module.go
+++ b/pkg/modules/dashboard/impldashboard/v2_module.go
@@ -55,3 +55,97 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU

 	return storable.ToDashboardV2(tags)
 }
+
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	if err := updatable.Validate(); err != nil {
+		return nil, err
+	}
+
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
+	if err := existing.CanUpdate(); err != nil {
+		return nil, err
+	}
+
+	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
+		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updatable.Tags)
+		if err != nil {
+			return err
+		}
+
+		err = existing.Update(updatable, updatedBy, resolvedTags)
+		if err != nil {
+			return err
+		}
+
+		storable, err := existing.ToStorableDashboard()
+		if err != nil {
+			return err
+		}
+
+		return module.store.Update(ctx, orgID, storable)
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return existing, nil
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
+	if err := existing.CanUpdate(); err != nil {
+		return nil, err
+	}
+
+	updateable, err := patch.Apply(existing)
+	if err != nil {
+		return nil, err
+	}
+
+	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
+		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updateable.Tags)
+		if err != nil {
+			return err
+		}
+
+		err = existing.Update(*updateable, updatedBy, resolvedTags)
+		if err != nil {
+			return err
+		}
+
+		storable, err := existing.ToStorableDashboard()
+		if err != nil {
+			return err
+		}
+
+		return module.store.Update(ctx, orgID, storable)
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return existing, nil
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+	if err := existing.LockUnlock(lock, isAdmin, updatedBy); err != nil {
+		return err
+	}
+	storable, err := existing.ToStorableDashboard()
+	if err != nil {
+		return err
+	}
+	return module.store.Update(ctx, orgID, storable)
+}
--- a/pkg/types/dashboardtypes/dashboard.go
+++ b/pkg/types/dashboardtypes/dashboard.go
@@ -21,6 +21,7 @@ var (
 	ErrCodeDashboardInvalidWidgetQuery = errors.MustNewCode("dashboard_invalid_widget_query")
 	ErrCodeDashboardInvalidSource      = errors.MustNewCode("dashboard_invalid_source")
 	ErrCodeDashboardImmutable          = errors.MustNewCode("dashboard_immutable")
+	ErrCodeDashboardInvalidPatch       = errors.MustNewCode("dashboard_invalid_patch")
 )

 type StorableDashboard struct {
--- a/pkg/types/dashboardtypes/perses_dashboard.go
+++ b/pkg/types/dashboardtypes/perses_dashboard.go
@@ -62,6 +62,54 @@ type DashboardV2 struct {
 	Spec DashboardSpec   `json:"spec" required:"true"`
 }

+func (d *DashboardV2) CanUpdate() error {
+	if d.Source == SourceIntegration {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be modified")
+	}
+	if d.Locked {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
+	}
+	return nil
+}
+
+func (d *DashboardV2) Update(updatable UpdatableDashboardV2, updatedBy string, resolvedTags []*tagtypes.Tag) error {
+	if err := d.CanUpdate(); err != nil {
+		return err
+	}
+	if updatable.Name != d.Name {
+		return errors.NewInvalidInputf(ErrCodeDashboardImmutable, "name is immutable; cannot change from %q to %q", d.Name, updatable.Name)
+	}
+	d.DashboardV2MetadataBase = updatable.DashboardV2MetadataBase
+	d.Tags = resolvedTags
+	d.Spec = updatable.Spec
+	d.UpdatedBy = updatedBy
+	d.UpdatedAt = time.Now()
+	return nil
+}
+
+func (d *DashboardV2) CanLockUnlock(isAdmin bool, updatedBy string) error {
+	if d.Source == SourceIntegration {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be locked or unlocked")
+	}
+	if d.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be locked or unlocked")
+	}
+	if d.CreatedBy != updatedBy && !isAdmin {
+		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "you are not authorized to lock/unlock this dashboard")
+	}
+	return nil
+}
+
+func (d *DashboardV2) LockUnlock(lock bool, isAdmin bool, updatedBy string) error {
+	if err := d.CanLockUnlock(isAdmin, updatedBy); err != nil {
+		return err
+	}
+	d.Locked = lock
+	d.UpdatedBy = updatedBy
+	d.UpdatedAt = time.Now()
+	return nil
+}
+
 type DashboardV2MetadataBase struct {
 	SchemaVersion string `json:"schemaVersion" required:"true"`
 	Image         string `json:"image,omitempty"`
@@ -126,7 +174,7 @@ func (p *PostableDashboardV2) Validate() error {
 	if err := p.validateName(); err != nil {
 		return err
 	}
-	if err := p.validateTags(); err != nil {
+	if err := validateDashboardTags(p.Tags); err != nil {
 		return err
 	}
 	return p.Spec.Validate()
@@ -193,11 +241,11 @@ func generateDashboardName(displayName string) string {
 	return prefix + "-" + string(suffix)
 }

-func (p *PostableDashboardV2) validateTags() error {
-	if len(p.Tags) > MaxTagsPerDashboard {
+func validateDashboardTags(tags []tagtypes.PostableTag) error {
+	if len(tags) > MaxTagsPerDashboard {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "a dashboard can have at most %d tags", MaxTagsPerDashboard)
 	}
-	for _, tag := range p.Tags {
+	for _, tag := range tags {
 		if _, reserved := reservedDSLKeys[DSLKey(strings.ToLower(strings.TrimSpace(tag.Key)))]; reserved {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "tag key %q is reserved", tag.Key)
 		}
@@ -263,6 +311,57 @@ func (s StorableDashboardV2Data) toStorableDashboardData() (StorableDashboardDat

 type StorableDashboardV2Metadata = DashboardV2MetadataBase

+// ════════════════════════════════════════════════════════════════════════
+// Updatable
+// ════════════════════════════════════════════════════════════════════════
+
+type UpdatableDashboardV2 struct {
+	DashboardV2MetadataBase
+	Name string                 `json:"name" required:"true"`
+	Tags []tagtypes.PostableTag `json:"tags" required:"true"`
+	Spec DashboardSpec          `json:"spec" required:"true"`
+}
+
+func (u *UpdatableDashboardV2) UnmarshalJSON(data []byte) error {
+	dec := json.NewDecoder(bytes.NewReader(data))
+	dec.DisallowUnknownFields()
+	type alias UpdatableDashboardV2
+	var tmp alias
+	if err := dec.Decode(&tmp); err != nil {
+		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
+	}
+	return u.Validate()
+}
+
+func (u *UpdatableDashboardV2) Validate() error {
+	if u.SchemaVersion != SchemaVersion {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "schemaVersion must be %q, got %q", SchemaVersion, u.SchemaVersion)
+	}
+	if err := validateDashboardName(u.Name); err != nil {
+		return err
+	}
+	if err := validateDashboardTags(u.Tags); err != nil {
+		return err
+	}
+	return u.Spec.Validate()
+}
+
+func (d DashboardV2) toUpdatableDashboardV2() UpdatableDashboardV2 {
+	return UpdatableDashboardV2{
+		DashboardV2MetadataBase: d.DashboardV2MetadataBase,
+		Name:                    d.Name,
+		Tags:                    tagtypes.NewPostableTagsFromTags(d.Tags),
+		Spec:                    d.Spec,
+	}
+}
+
 // ════════════════════════════════════════════════════════════════════════
 // Convertors
 // ════════════════════════════════════════════════════════════════════════
--- a/pkg/types/dashboardtypes/perses_dashboard_patch.go
+++ b/pkg/types/dashboardtypes/perses_dashboard_patch.go
@@ -0,0 +1,83 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	jsonpatch "github.com/evanphx/json-patch/v5"
+	"github.com/swaggest/jsonschema-go"
+)
+
+// PatchableDashboardV2 is an RFC 6902 patch request.
+type PatchableDashboardV2 struct {
+	// Ops shapes the OpenAPI schema; tagged so swaggest reflects it.
+	Ops []JSONPatchOperation `json:"ops"`
+	// patch holds the decoded payload, set by UnmarshalJSON.
+	patch jsonpatch.Patch
+}
+
+// PrepareJSONSchema collapses the struct's object schema into the bare ops array.
+func (PatchableDashboardV2) PrepareJSONSchema(s *jsonschema.Schema) error {
+	// Called on several passes; only the one with built properties carries `ops`.
+	ops, ok := s.Properties["ops"]
+	if !ok || ops.TypeObject == nil {
+		return nil
+	}
+	*s = *ops.TypeObject
+	return nil
+}
+
+type JSONPatchOperation struct {
+	Op   PatchOp `json:"op" required:"true"`
+	Path string  `json:"path" required:"true" description:"JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-."`
+	// `value` is required for add/replace/test.
+	Value any `json:"value,omitempty" description:"Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy."`
+	// `from` is required for move/copy.
+	From string `json:"from,omitempty" description:"Source JSON Pointer for move/copy ops; ignored for other ops."`
+}
+
+// PatchOp covers the six RFC 6902 JSON Patch verbs.
+type PatchOp struct{ valuer.String }
+
+var (
+	PatchOpAdd     = PatchOp{valuer.NewString("add")}
+	PatchOpRemove  = PatchOp{valuer.NewString("remove")}
+	PatchOpReplace = PatchOp{valuer.NewString("replace")}
+	PatchOpMove    = PatchOp{valuer.NewString("move")}
+	PatchOpCopy    = PatchOp{valuer.NewString("copy")}
+	PatchOpTest    = PatchOp{valuer.NewString("test")}
+)
+
+func (PatchOp) Enum() []any {
+	return []any{PatchOpAdd, PatchOpRemove, PatchOpReplace, PatchOpMove, PatchOpCopy, PatchOpTest}
+}
+
+func (p *PatchableDashboardV2) UnmarshalJSON(data []byte) error {
+	patch, err := jsonpatch.DecodePatch(data)
+	if err != nil {
+		return errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "request body is not a valid RFC 6902 JSON Patch document").WithAdditional(err.Error())
+	}
+	if err := json.Unmarshal(data, &p.Ops); err != nil {
+		return errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "request body is not a valid RFC 6902 JSON Patch document").WithAdditional(err.Error())
+	}
+	p.patch = patch
+	return nil
+}
+
+func (p PatchableDashboardV2) Apply(existing *DashboardV2) (*UpdatableDashboardV2, error) {
+	existingAsUpdatable := existing.toUpdatableDashboardV2()
+	raw, err := json.Marshal(existingAsUpdatable)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal existing dashboard for patch")
+	}
+	patched, err := p.patch.ApplyWithOptions(raw, &jsonpatch.ApplyOptions{AllowMissingPathOnRemove: true, EnsurePathExistsOnAdd: true})
+	if err != nil {
+		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard")
+	}
+	out := &UpdatableDashboardV2{}
+	if err := json.Unmarshal(patched, out); err != nil {
+		return nil, err
+	}
+	return out, nil
+}
--- a/pkg/types/dashboardtypes/perses_dashboard_patch_test.go
+++ b/pkg/types/dashboardtypes/perses_dashboard_patch_test.go
@@ -0,0 +1,569 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"strings"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+// basePostableJSON is the postable shape of a small but realistic v2
+// dashboard used as the base document for patch tests. Each panel carries
+// one builder query in the same shape production dashboards use
+// (aggregations, filter, groupBy populated), and the dashboard has one
+// variable — the variable is not patched in any test here, that's
+// covered in a separate variable-focused suite.
+const basePostableJSON = `{
+	"schemaVersion": "v6",
+	"name": "service-overview",
+	"tags": [{"key": "team", "value": "alpha"}, {"key": "env", "value": "prod"}],
+	"spec": {
+		"display": {"name": "Service overview"},
+		"variables": [
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "service",
+					"allowAllValue": true,
+					"allowMultiple": false,
+					"plugin": {
+						"kind": "signoz/DynamicVariable",
+						"spec": {"name": "service.name", "signal": "metrics"}
+					}
+				}
+			}
+		],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+					"queries": [
+						{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "A",
+								"signal": "metrics",
+								"aggregations": [{
+									"metricName": "signoz_calls_total",
+									"temporality": "cumulative",
+									"timeAggregation": "rate",
+									"spaceAggregation": "sum"
+								}],
+								"filter": {"expression": "service.name IN $service"},
+								"groupBy": [{"name": "service.name", "fieldDataType": "string", "fieldContext": "tag"}]
+							}}}
+						}
+					]
+				}
+			},
+			"p2": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/NumberPanel", "spec": {}},
+					"queries": [
+						{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "X",
+								"signal": "metrics",
+								"aggregations": [{
+									"metricName": "signoz_latency_count",
+									"temporality": "cumulative",
+									"timeAggregation": "rate",
+									"spaceAggregation": "sum"
+								}]
+							}}}
+						}
+					]
+				}
+			}
+		},
+		"layouts": [
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": {"title": "Row 1"},
+					"items": [
+						{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+						{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
+					]
+				}
+			}
+		],
+		"duration": "1h"
+	}
+}`
+
+func TestPatchableDashboardV2_Apply(t *testing.T) {
+	// Apply doesn't mutate the input *DashboardV2 — it marshals it to
+	// JSON, applies the patch, and unmarshals the result into a fresh
+	// struct. Sharing one base across subtests is safe.
+	var p PostableDashboardV2
+	require.NoError(t, json.Unmarshal([]byte(basePostableJSON), &p), "base postable JSON must validate")
+	testOrgID := valuer.GenerateUUID()
+	base := p.NewDashboardV2(testOrgID, "somecreatedthisiguess@signoz.io", SourceUser)
+	base.Tags = []*tagtypes.Tag{
+		{Key: "team", Value: "alpha"},
+		{Key: "env", Value: "prod"},
+	}
+
+	decode := func(t *testing.T, body string) PatchableDashboardV2 {
+		t.Helper()
+		var patch PatchableDashboardV2
+		require.NoError(t, json.Unmarshal([]byte(body), &patch))
+		return patch
+	}
+
+	// jsonOf marshals the patched dashboard back to JSON so subtests can
+	// assert on field values without reaching into the typed plugin specs.
+	jsonOf := func(t *testing.T, out *UpdatableDashboardV2) string {
+		t.Helper()
+		raw, err := json.Marshal(out)
+		require.NoError(t, err)
+		return string(raw)
+	}
+
+	// ─────────────────────────────────────────────────────────────────
+	// Successful patches
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("no-op preserves all fields", func(t *testing.T) {
+		out, err := decode(t, `[]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, base.DashboardV2MetadataBase, out.DashboardV2MetadataBase)
+		assert.Equal(t, tagtypes.NewPostableTagsFromTags(base.Tags), out.Tags)
+		assert.Equal(t, base.Spec.Display.Name, out.Spec.Display.Name)
+		require.Equal(t, len(base.Spec.Panels), len(out.Spec.Panels))
+		for k, panel := range base.Spec.Panels {
+			require.Contains(t, out.Spec.Panels, k)
+			assert.Equal(t, panel.Spec.Plugin.Kind, out.Spec.Panels[k].Spec.Plugin.Kind)
+		}
+		assert.Len(t, out.Tags, len(base.Tags))
+		assert.Len(t, out.Spec.Variables, len(base.Spec.Variables))
+		assert.Len(t, out.Spec.Layouts, len(base.Spec.Layouts))
+	})
+
+	t.Run("add metadata image", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/image", "value": "https://example.com/img.png"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "https://example.com/img.png", out.Image)
+		assert.Equal(t, SchemaVersion, out.SchemaVersion, "schemaVersion preserved")
+	})
+
+	t.Run("replace display name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/display/name", "value": "Renamed"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Renamed", out.Spec.Display.Name)
+	})
+
+	// Per RFC 6902 § 4.1, `add` on an existing object member replaces the
+	// existing value rather than erroring — same effect as `replace`.
+	t.Run("add overwrites existing display name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/spec/display/name", "value": "Overwritten"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Overwritten", out.Spec.Display.Name)
+	})
+
+	t.Run("add data refreshInterval", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/spec/refreshInterval", "value": "30s"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "30s", string(out.Spec.RefreshInterval))
+	})
+
+	t.Run("add panel leaves others untouched", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "add",
+			"path": "/spec/panels/p3",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+					"queries": [{
+						"kind": "TimeSeriesQuery",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A",
+							"signal": "logs",
+							"aggregations": [{"expression": "count()"}]
+						}}}
+					}]
+				}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Spec.Panels, 3)
+		assert.Contains(t, out.Spec.Panels, "p3")
+		// Plugin specs round-trip through MarshalJSON which resolves defaults
+		// (e.g. timePreference → "global_time"), so compare the serialized
+		// shape rather than the in-memory structs to skip that normalization.
+		for _, id := range []string{"p1", "p2"} {
+			wantJSON, err := json.Marshal(base.Spec.Panels[id])
+			require.NoError(t, err)
+			gotJSON, err := json.Marshal(out.Spec.Panels[id])
+			require.NoError(t, err)
+			assert.JSONEq(t, string(wantJSON), string(gotJSON), "panel %s untouched", id)
+		}
+	})
+
+	t.Run("replace single panel", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p2",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/BarChartPanel", "spec": {}},
+					"queries": [{
+						"kind": "TimeSeriesQuery",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A",
+							"signal": "metrics",
+							"aggregations": [{
+								"metricName": "signoz_calls_total",
+								"temporality": "cumulative",
+								"timeAggregation": "rate",
+								"spaceAggregation": "sum"
+							}]
+						}}}
+					}]
+				}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, PanelPluginKind("signoz/BarChartPanel"), out.Spec.Panels["p2"].Spec.Plugin.Kind)
+		assert.Equal(t, PanelPluginKind("signoz/TimeSeriesPanel"), out.Spec.Panels["p1"].Spec.Plugin.Kind, "p1 untouched")
+	})
+
+	// Removing a panel realistically also drops its layout item — exercise
+	// the multi-op shape the UI sends.
+	t.Run("remove panel and its layout item", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "remove", "path": "/spec/panels/p2"},
+			{"op": "remove", "path": "/spec/layouts/0/spec/items/1"}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Spec.Panels, 1)
+		assert.Contains(t, out.Spec.Panels, "p1")
+		assert.NotContains(t, out.Spec.Panels, "p2")
+		raw := jsonOf(t, out)
+		assert.NotContains(t, raw, `"$ref":"#/spec/panels/p2"`)
+		assert.Contains(t, raw, `"$ref":"#/spec/panels/p1"`)
+	})
+
+	// The headline use case: edit a single field of a single query inside
+	// one panel without re-sending any other part of the dashboard.
+	t.Run("rename single query inside panel", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1/spec/queries/0/spec/plugin/spec/name",
+			"value": "renamed"
+		}]`).Apply(base)
+		require.NoError(t, err)
+
+		require.Len(t, out.Spec.Panels["p1"].Spec.Queries, 1)
+		assert.Contains(t, jsonOf(t, out), `"name":"renamed"`)
+	})
+
+	// Replace a query at a specific index — swaps query "A" out for "B"
+	// without re-sending the rest of the panel.
+	t.Run("replace query at index", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1/spec/queries/0",
+			"value": {
+				"kind": "TimeSeriesQuery",
+				"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+					"name": "B",
+					"signal": "metrics",
+					"aggregations": [{
+						"metricName": "signoz_db_calls_total",
+						"temporality": "cumulative",
+						"timeAggregation": "rate",
+						"spaceAggregation": "sum"
+					}]
+				}}}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Spec.Panels["p1"].Spec.Queries, 1)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"name":"B"`)
+		assert.NotContains(t, raw, `"name":"A"`)
+	})
+
+	// ─────────────────────────────────────────────────────────────────
+	// Layout edits
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
+		require.NoError(t, err)
+		raw := jsonOf(t, out)
+		// The first item used to live at x=0, now lives at x=6.
+		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
+	})
+
+	t.Run("resize panel by editing layout width", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
+		require.NoError(t, err)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"width":12`)
+	})
+
+	t.Run("rename layout row title", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/display/title", "value": "Latency"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Contains(t, jsonOf(t, out), `"title":"Latency"`)
+	})
+
+	t.Run("append layout item", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "add",
+			"path": "/spec/layouts/0/spec/items/-",
+			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		// Item count went 2 → 3.
+		raw := jsonOf(t, out)
+		assert.Equal(t, 3, strings.Count(raw, `"$ref":"#/spec/panels/`))
+	})
+
+	// Composing add-panel + add-layout-item is the realistic shape of the
+	// "add a new chart to my dashboard" UI flow — exercise it end-to-end.
+	t.Run("add panel and corresponding layout item", func(t *testing.T) {
+		out, err := decode(t, `[
+			{
+				"op": "add",
+				"path": "/spec/panels/p3",
+				"value": {
+					"kind": "Panel",
+					"spec": {
+						"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+						"queries": [{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "A",
+								"signal": "logs",
+								"aggregations": [{"expression": "count()"}]
+							}}}
+						}]
+					}
+				}
+			},
+			{
+				"op": "add",
+				"path": "/spec/layouts/0/spec/items/-",
+				"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}
+			}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Spec.Panels, 3)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"$ref":"#/spec/panels/p3"`)
+	})
+
+	t.Run("append tag", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "env", "value": "staging"}}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 3)
+		assert.Equal(t, "env", out.Tags[2].Key)
+		assert.Equal(t, "staging", out.Tags[2].Value)
+	})
+
+	t.Run("append tag when none exist", func(t *testing.T) {
+		noTagsBase := &DashboardV2{
+			DashboardV2MetadataBase: base.DashboardV2MetadataBase,
+			Name:                    base.Name,
+			Tags:                    nil,
+			Spec:                    base.Spec,
+		}
+		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "team", "value": "new"}}]`).Apply(noTagsBase)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 1)
+		assert.Equal(t, "team", out.Tags[0].Key)
+		assert.Equal(t, "new", out.Tags[0].Value)
+	})
+
+	t.Run("replace tag value", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/tags/0/value", "value": "beta"}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 2)
+		assert.Equal(t, "team", out.Tags[0].Key)
+		assert.Equal(t, "beta", out.Tags[0].Value)
+		assert.Equal(t, "env", out.Tags[1].Key, "tag at index 1 untouched")
+		assert.Equal(t, "prod", out.Tags[1].Value, "tag at index 1 untouched")
+		for _, tag := range out.Tags {
+			assert.NotEqual(t, "alpha", tag.Value, "old tag value must be gone")
+		}
+	})
+
+	t.Run("multiple ops applied in order", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "replace", "path": "/spec/display/name", "value": "Multi-step"},
+			{"op": "remove",  "path": "/spec/panels/p2"},
+			{"op": "add",     "path": "/tags/-", "value": {"key": "env", "value": "staging"}}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Multi-step", out.Spec.Display.Name)
+		assert.Len(t, out.Spec.Panels, 1)
+		assert.Len(t, out.Tags, 3)
+	})
+
+	// `test` is an RFC 6902 precondition op: aborts the patch if the value
+	// at the path doesn't equal the supplied value. Used for optimistic
+	// concurrency. Here it matches, so the subsequent ops apply.
+	t.Run("test op passes", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "test",    "path": "/spec/display/name", "value": "Service overview"},
+			{"op": "replace", "path": "/spec/display/name", "value": "Confirmed"}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Confirmed", out.Spec.Display.Name)
+	})
+
+	// ─────────────────────────────────────────────────────────────────
+	// Failure cases
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("decode rejects non-array body", func(t *testing.T) {
+		var patch PatchableDashboardV2
+		err := json.Unmarshal([]byte(`{"op": "replace"}`), &patch)
+		require.Error(t, err)
+	})
+
+	t.Run("decode rejects malformed JSON", func(t *testing.T) {
+		var patch PatchableDashboardV2
+		// Outer json.Unmarshal rejects non-JSON before PatchableDashboardV2's
+		// UnmarshalJSON runs, so the error is a stdlib SyntaxError rather
+		// than the InvalidInput-classified wrap.
+		err := json.Unmarshal([]byte(`not json`), &patch)
+		require.Error(t, err)
+	})
+
+	// `test` precondition fails — the whole patch is rejected, including
+	// the subsequent replace.
+	t.Run("test op failure rejected", func(t *testing.T) {
+		_, err := decode(t, `[
+			{"op": "test", "path": "/spec/display/name", "value": "Wrong"},
+			{"op": "replace", "path": "/spec/display/name", "value": "Should not apply"}
+		]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	// Lenient apply (AllowMissingPathOnRemove): removing a path that doesn't
+	// exist is a no-op rather than an error, so removes are idempotent.
+	t.Run("remove at missing path is a no-op", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "remove", "path": "/spec/panels/does-not-exist"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, len(base.Spec.Panels), len(out.Spec.Panels), "existing panels untouched")
+	})
+
+	t.Run("remove schemaVersion rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "remove", "path": "/schemaVersion"}]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("wrong schemaVersion rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "replace", "path": "/schemaVersion", "value": "v5"}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), SchemaVersion)
+	})
+
+	t.Run("empty display name defaults to dashboard name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/display/name", "value": ""}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, base.Name, out.Spec.Display.Name, "empty display.name should default from name")
+	})
+
+	t.Run("unknown top-level field rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "add", "path": "/bogus", "value": 42}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "bogus")
+	})
+
+	t.Run("invalid panel kind rejected", func(t *testing.T) {
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1",
+			"value": {
+				"kind": "Panel",
+				"spec": {"plugin": {"kind": "signoz/NotAPanel", "spec": {}}}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "NotAPanel")
+	})
+
+	t.Run("query kind incompatible with panel rejected", func(t *testing.T) {
+		// PromQLQuery is not allowed on ListPanel — verify the cross-check
+		// in Validate still runs after a patch.
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p2",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/ListPanel", "spec": {}},
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+				}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("removing the only query rejected", func(t *testing.T) {
+		// Validate requires exactly one query per panel — leaving zero is rejected.
+		_, err := decode(t, `[{"op": "remove", "path": "/spec/panels/p2/spec/queries/0"}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "panel must have one query")
+	})
+
+	t.Run("two direct queries rejected", func(t *testing.T) {
+		// Validate requires exactly one query per panel. To display multiple
+		// data sources in one panel, wrap them in a CompositeQuery (see the
+		// "replace query with composite" subtest below).
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+					"queries": [
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A", "signal": "metrics",
+							"aggregations": [{"metricName": "signoz_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
+						}}}},
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "B", "signal": "metrics",
+							"aggregations": [{"metricName": "signoz_db_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
+						}}}}
+					]
+				}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "panel must have one query")
+	})
+
+	t.Run("too many tags rejected", func(t *testing.T) {
+		// Base already has 2 tags; add 9 more to exceed MaxTagsPerDashboard (10).
+		_, err := decode(t, `[
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "1"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "2"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "3"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "4"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "5"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "6"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "7"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "8"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "9"}}
+		]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "at most")
+	})
+}
Author	SHA1	Message	Date
SagarRajput-7	bfce3ca329	Merge branch 'main' into billing-graph-enhancement	2026-06-04 20:28:02 +05:30
SagarRajput-7	5f6ac9d97b	feat(billing): migrate BillingContainer and BillingUsageGraph to CSS modules	2026-06-04 20:26:27 +05:30
Naman Verma	df7ef3cdb5	feat: v2 dashboard update, lock, unlock, and patch API (#11481 ) Some checks are pending build-staging / prepare (push) Waiting to run Details build-staging / js-build (push) Blocked by required conditions Details build-staging / go-build (push) Blocked by required conditions Details build-staging / staging (push) Blocked by required conditions Details Release Drafter / update_release_draft (push) Waiting to run Details * chore: follow proper unmarshal json method structure * feat: v2 create dashboard API * fix: only return name of a tag in dashboard response * fix: use existing tag's casing if new tag is a prefix of an existing tag * fix: go lint fix * fix: more dashboard request validations * chore: separate method for validation * fix: module should also validate postable dashboard * test: integration tests for create API * test: integration test fixes * chore: use existing mapper * fix: remove extra spec from builder query marshalling * fix: merge conflicts * feat: v2 dashboard GET API * feat: v2 dashboard update API * fix: add allowed values in err messages * fix: remove extra (un)marshal cycle * fix: return 500 err if spec is nil for composite kind w/ code comment * fix: no need for copying textboxvariablespec * fix: wrap errors * chore: no v2 subpackage * fix: no v2 package and its consequences * fix: no v2 package and its consequences * Merge branch 'nv/v2-dashboard-create' into nv/v2-dashboard-get * fix: merge fixes * fix: query-less panels not allowed * feat: consolidate tag module and tagtypes changes from downstream branches * chore: update api specs * chore: update api specs * fix: allow only 1 query in a panel * test: unit test fixes * feat: method to fetch tags for multiple entries at once * test: fix mock interface in test * feat: move tags to key:value pairs model * feat: entity type column in tags * fix: pass entity type in create many * feat: reserved DSL key validation for tags * feat: new module for tags * chore: merge conflicts error fixing pt 1 * fix: lint fix regarding nil, nil return in test file * chore: change where tag module is instantiated * fix: add back api endpoint * chore: generate api spec * fix: remove soft delete references * chore: embed StorableDashboard into joinedRow in store method * fix: extend bun in joinedRow * fix: compile error fix * fix: remove soft delete references * feat: method to build postable tags from tags * fix: diff error codes for invalid keys and values * fix: correct pk in bun model for tag relations * fix: created and updated by schema * fix: use coretypes.Kind instead of defining entity type * fix: singular table name * chore: remove org ID from tag relation * feat: foreign key on tag id * feat: add SyncTags method that covers creation and linking * fix: remove entity type definition * fix: fix build errors in dashboard module * chore: bump migration number * chore: change entity id to resource id * fix: add org id filter in all list and delete queries * fix: remove user auditable * fix: add ID in tag relation * fix: fix build error * fix: fix build error * chore: bump migration number * fix: add len check on tags keys and values * fix: add regex for tags * chore: remove methods that shouldn't be exposed * fix: use sync tags in create api * feat: functional unique index in sql schema * fix: only ascii in regex * fix: use sync tags method in update * chore: rename create method to createOrGet * chore: use tagtypestest package for mock store * chore: combine functional unique index with unique index * chore: move tag resolution to module * test: add unit tests for new idx type * chore: comment out tags unique index for now * chore: add a todo comment * chore: comment out unique index test * feat: add created at to tag relations * chore: comment out unique index test * chore: bump migration number * chore: remove uploaded grafana flag from metadata * Merge branch 'main' into nv/v2-dashboard-create * chore: revert idx generation to resolve conflicts * fix: use store.RunInTx instead of taking in sqlstore * fix: use binding package to get request * chore: move NewDashboardV2 to NewDashboardV2WithoutTags * chore: rename module to m * fix: add ctx needed in sqlstore * fix: remove sqlstore passage in ee pkg * chore: change dashboardData to dashboardSpec * feat: follow the metadata+spec key structure * feat: follow the metadata+spec key structure in open api spec * feat: v2 dashboard GET API (#11136) * feat: v2 dashboard GET API * Merge branch 'nv/v2-dashboard-create' into nv/v2-dashboard-get * chore: update api specs * fix: remove soft delete references * chore: embed StorableDashboard into joinedRow in store method * fix: fix build error * chore: revert all frontend changes * fix: remove public dashboard from get v2 call * chore: revert all frontend changes * fix: fix build errors post merge conflict resolution * feat: lock, unlock, create public, update public v2 dashboard APIs (#11167) * feat: lock, unlock, create public, update public v2 dashboard APIs * chore: update api specs * fix: use new pattern of checking for admin permission * fix: remove soft delete reference * chore: revert all frontend changes * fix: fix build errors and remove v2 create/update public apis * chore: use v1 methods wherever possible * fix: use update v2 store method * chore: update frontend schema * chore: update frontend schema * chore: generate api specs * chore: generate api specs * feat: patch dashboard api (#11182) * feat: lock, unlock, create public, update public v2 dashboard APIs * feat: delete dashboard v2 API and hard delete cron job * feat: patch dashboard api * chore: update api specs * chore: update api specs * chore: update api specs * chore: remove delete related work * fix: add examples of structs for value param in param description * test: unit test fixes * fix: use new pattern of checking for admin permission * fix: remove soft delete reference * test: key value tags in test * fix: build error in patch module method * fix: build error in Apply method * fix: use sync tags method in update * fix: fix build errors * fix: fix all patch application tests * chore: add more mapper methods * fix: add source for v2 dashboards * chore: incorporate source * chore: incorporate source in api spec * chore: incorporate source * fix: add some required fields * feat: add immutable name in dashboard v2 * feat: add immutable name in dashboard v2 * feat: add immutable name in dashboard v2 api specs * fix: remove unused param in constructor * fix: improve api descriptions * fix: remove unneeded comment * chore: increase MaxTagsPerDashboard to 10 * fix: set display name in unmarshal json * chore: remove integration test for now (will add along with list api) * feat: add validation on dashboard name * test: fix build errors and tests based on name related changes * fix: correct convertor method name * test: add unit tests for type conversions * chore: remove enum def of threshold comparison operator * feat: add flag to generate unique name in backend * chore: generate api specs * chore: make tags required in postable * fix: build error fix * fix: fix build error in test after merge conflict * fix: remove unused store method * fix: remove unused module methods * fix: use v1 store update method * fix: change data to spec in api param description * chore: add back accidentally removed tests * fix: address review comments * chore: generate frontend api spec * chore: use same jsonpatch package as done in zeus * chore: remove JSONPatchDocument and use patchable everywhere * fix: make remove idempotent in patch * chore: separate file for patch types * chore: better error passage * fix: remove extra decodePatch calls * fix: use must new org id * fix: proper error passage * chore: rename updateable to updatable --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2026-06-04 11:59:40 +00:00
SagarRajput-7	83bb47ae5f	feat(billing): css fix	2026-06-04 15:40:08 +05:30
SagarRajput-7	eb29421a4d	feat(billing): test case fix and css refactor	2026-06-04 15:25:57 +05:30
SagarRajput-7	2b8ab1d0d2	feat(billing): refactor and feedback fixes	2026-06-04 15:02:34 +05:30
SagarRajput-7	a77ed9762f	Merge branch 'main' into billing-graph-enhancement	2026-06-04 14:42:45 +05:30
SagarRajput-7	6a79cbe6fe	feat(billing): revamp billing page UI to match Settings Revamp designs	2026-06-04 14:41:12 +05:30
SagarRajput-7	840914ae58	Merge branch 'main' into billing-graph-enhancement	2026-06-04 05:58:21 +05:30
SagarRajput-7	7fb222b6ee	feat(billing): migrate BillingUsageGraph from uPlotLib to uPlotV2 and added stacking	2026-06-04 05:57:11 +05:30