feat(billing): match portal and cancel controls to subscription permissions

Portal controls require subscription list and update together, matching the backend check, and
the cancel subscription button is gated on subscription delete.

.github/CODEOWNERS

@@ -152,29 +152,39 @@ go.mod @therealpandey
 
 ## Dashboard Types
 
-/frontend/src/types/api/dashboard/ @SigNoz/pulse-frontend
-/frontend/src/types/api/widgets/ @SigNoz/pulse-frontend
+/frontend/src/api/types/dashboard/ @SigNoz/pulse-frontend
 
-## Widget Card
+## Dashboard List
 
-/frontend/src/container/WidgetCard/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
+/frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
+
+# Dashboard Widget Page
+
+/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
+
+## Dashboard Page
+
+/frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
+/frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
+/frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
+/frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
 
 ## Dashboard Libs + Components
 
 /frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
-/frontend/src/lib/visualization/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
 /frontend/src/components/NewSelect/ @SigNoz/pulse-frontend
 
-## Dashboard Pages
-
-/frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
-/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
+## Dashboard V2
+/frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
 
 ## Infrastructure Monitoring
 /frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend

cmd/authz.go

@@ -97,6 +97,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,

docs/api/openapi.yml

@@ -9565,6 +9565,29 @@ components:
       - tier
       - hosts
       type: object
+    ZeustypesGettableSubscription:
+      properties:
+        redirectURL:
+          type: string
+      required:
+      - redirectURL
+      type: object
+    ZeustypesGettableSubscriptionUsage:
+      properties:
+        billingPeriodEnd:
+          format: int64
+          type: integer
+        billingPeriodStart:
+          format: int64
+          type: integer
+        details:
+          $ref: '#/components/schemas/ZeustypesSubscriptionUsageDetails'
+        discount:
+          format: double
+          type: number
+        subscriptionStatus:
+          type: string
+      type: object
     ZeustypesHost:
       properties:
         is_default:
@@ -9622,6 +9645,93 @@ components:
       - where_did_you_discover_signoz
       - timeline_for_migrating_to_signoz
       type: object
+    ZeustypesPostableSubscription:
+      properties:
+        url:
+          type: string
+      required:
+      - url
+      type: object
+    ZeustypesSubscriptionUsageBreakdown:
+      properties:
+        dayWiseBreakdown:
+          $ref: '#/components/schemas/ZeustypesSubscriptionUsageDayWiseBreakdown'
+        tiers:
+          items:
+            $ref: '#/components/schemas/ZeustypesSubscriptionUsageTier'
+          nullable: true
+          type: array
+        type:
+          type: string
+        unit:
+          type: string
+      type: object
+    ZeustypesSubscriptionUsageDayWiseBreakdown:
+      properties:
+        breakdown:
+          items:
+            $ref: '#/components/schemas/ZeustypesSubscriptionUsageDayWiseData'
+          nullable: true
+          type: array
+        type:
+          type: string
+      type: object
+    ZeustypesSubscriptionUsageDayWiseData:
+      properties:
+        count:
+          format: double
+          type: number
+        quantity:
+          format: double
+          type: number
+        size:
+          format: double
+          type: number
+        timestamp:
+          format: int64
+          type: integer
+        total:
+          format: double
+          type: number
+        unitPrice:
+          format: double
+          type: number
+      type: object
+    ZeustypesSubscriptionUsageDetails:
+      properties:
+        baseFee:
+          format: double
+          type: number
+        billTotal:
+          format: double
+          type: number
+        breakdown:
+          items:
+            $ref: '#/components/schemas/ZeustypesSubscriptionUsageBreakdown'
+          nullable: true
+          type: array
+        total:
+          format: double
+          type: number
+      type: object
+    ZeustypesSubscriptionUsageTier:
+      properties:
+        quantity:
+          format: double
+          type: number
+        tierCost:
+          format: double
+          type: number
+        tierEnd:
+          format: int64
+          type: integer
+        tierStart:
+          format: int64
+          type: integer
+        unitPrice:
+          format: double
+          type: number
+      type: object
   securitySchemes:
     api_key:
       description: API Keys
@@ -25096,6 +25206,65 @@ paths:
       summary: Put host in Zeus for a deployment.
       tags:
       - zeus
+  /api/v2/zeus/meters:
+    get:
+      deprecated: false
+      description: This endpoint gets the metered usage and billing details of the
+        deployment's subscription from zeus.
+      operationId: GetSubscriptionUsage
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/ZeustypesGettableSubscriptionUsage'
+                  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:
+        - subscription:read
+      - tokenizer:
+        - subscription:read
+      summary: Get subscription usage from Zeus.
+      tags:
+      - zeus
   /api/v2/zeus/profiles:
     put:
       deprecated: false
@@ -25153,6 +25322,141 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
+  /api/v2/zeus/subscriptions:
+    post:
+      deprecated: false
+      description: This endpoint creates a checkout session in Zeus for the deployment's
+        subscription and returns the redirect URL.
+      operationId: CreateSubscription
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ZeustypesPostableSubscription'
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/ZeustypesGettableSubscription'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "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
+        "409":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Conflict
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - subscription:create
+      - tokenizer:
+        - subscription:create
+      summary: Create a checkout session for the subscription.
+      tags:
+      - zeus
+    put:
+      deprecated: false
+      description: This endpoint creates a billing portal session in Zeus for the
+        deployment's subscription and returns the redirect URL.
+      operationId: UpdateSubscription
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ZeustypesPostableSubscription'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/ZeustypesGettableSubscription'
+                  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:
+        - subscription:list
+        - subscription:update
+      - tokenizer:
+        - subscription:list
+        - subscription:update
+      summary: Create a billing portal session for the subscription.
+      tags:
+      - zeus
   /api/v3/licenses:
     post:
       deprecated: true

frontend/.oxlintrc.json

@@ -323,10 +323,9 @@
             "name": "react",
             "importNames": [
               "createContext",
-              "useContext",
-              "useSyncExternalStore"
+              "useContext"
             ],
-            "message": "[State mgmt] React Context and hand-rolled external stores are deprecated. Migrate shared state to Zustand."
+            "message": "[State mgmt] React Context is deprecated. Migrate shared state to Zustand."
           },
           {
             "name": "immer",
@@ -566,12 +565,12 @@
       }
     },
     {
-      // Root dashboard pages own the fetch lifecycle; useDashboardFetchRequired wraps it.
+      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
       // Everywhere else must use useDashboardFetchRequired().
       "files": [
-        "src/pages/DashboardPage/DashboardPage.tsx",
-        "src/pages/DashboardPage/PanelEditorPage/PanelEditorPage.tsx",
-        "src/pages/DashboardPage/DashboardContainer/hooks/useDashboardFetchRequired.ts"
+        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
+        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
+        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
       ],
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -1626,6 +1626,7 @@ describe('PrivateRoute', () => {
 				path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
 				deniedRoles: DENIED_ROLES,
 			},
+			BILLING: { path: ROUTES.BILLING, deniedRoles: DENIED_ROLES },
 		};
 
 		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(

frontend/src/AppRoutes/pageComponents.ts

@@ -94,18 +94,23 @@ export const OnboardingV2 = Loadable(
 export const DashboardsListPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPage'
+			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPageV2'
 		),
 );
 
 export const DashboardPage = Loadable(
-	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPage'),
+	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPageV2'),
+);
+
+export const DashboardWidget = Loadable(
+	() =>
+		import(/* webpackChunkName: "DashboardWidgetPage" */ 'pages/DashboardWidget'),
 );
 
 export const DashboardPanelEditorPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPage/PanelEditorPage/PanelEditorPage'
+			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPageV2/PanelEditorPage/PanelEditorPage'
 		),
 );
 

frontend/src/AppRoutes/routes.ts

@@ -13,6 +13,7 @@ import {
 	DashboardPage,
 	DashboardPanelEditorPage,
 	DashboardsListPage,
+	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
 	ForgotPassword,
@@ -182,6 +183,13 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
+	{
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+		component: DashboardWidget,
+		isPrivate: true,
+		key: 'DASHBOARD_WIDGET',
+	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
 		exact: true,

frontend/src/api/billing/getUsage.ts

@@ -1,59 +0,0 @@
-import axios from 'api';
-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: number;
-	billingPeriodEnd: number;
-	details: {
-		total: number;
-		baseFee: number;
-		breakdown: BreakdownEntry[];
-		billTotal: number;
-	};
-	discount: number;
-	subscriptionStatus?: string;
-}
-
-const getUsage = async (
-	licenseKey: string,
-): Promise<SuccessResponse<UsageResponsePayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(`/billing?licenseKey=${licenseKey}`);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getUsage;

frontend/src/api/dashboard/public/getPublicDashboardData.ts

@@ -0,0 +1,27 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetPublicDashboardDataProps, PayloadProps,PublicDashboardDataProps } from 'types/api/dashboard/public/get';
+
+/**
+ * @deprecated Use the generated `useGetPublicDashboardData` hook (or `getPublicDashboardData` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getPublicDashboardData = async (props: GetPublicDashboardDataProps): Promise<SuccessResponseV2<PublicDashboardDataProps>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/public/dashboards/${props.id}`);
+        
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPublicDashboardData;

frontend/src/api/dashboard/public/getPublicDashboardWidgetData.ts

@@ -0,0 +1,34 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { MetricRangePayloadV5 } from 'api/v5/v5';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetPublicDashboardWidgetDataProps } from 'types/api/dashboard/public/getWidgetData';
+
+
+/**
+ * @deprecated Use the generated `useGetPublicDashboardWidgetQueryRange` hook (or `getPublicDashboardWidgetQueryRange` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getPublicDashboardWidgetData = async (props: GetPublicDashboardWidgetDataProps): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
+	try {
+		const response = await axios.get(`/public/dashboards/${props.id}/widgets/${props.index}/query_range`, {
+			params: {
+				startTime: props.startTime,
+				endTime: props.endTime,
+			},
+		});
+        
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPublicDashboardWidgetData;

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

@@ -10753,6 +10753,146 @@ export interface ZeustypesGettableHostDTO {
 	tier: string;
 }
 
+export interface ZeustypesGettableSubscriptionDTO {
+	/**
+	 * @type string
+	 */
+	redirectURL: string;
+}
+
+export interface ZeustypesSubscriptionUsageDayWiseDataDTO {
+	/**
+	 * @type number
+	 * @format double
+	 */
+	count?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	quantity?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	size?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	timestamp?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	total?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	unitPrice?: number;
+}
+
+export interface ZeustypesSubscriptionUsageDayWiseBreakdownDTO {
+	/**
+	 * @type array,null
+	 */
+	breakdown?: ZeustypesSubscriptionUsageDayWiseDataDTO[] | null;
+	/**
+	 * @type string
+	 */
+	type?: string;
+}
+
+export interface ZeustypesSubscriptionUsageTierDTO {
+	/**
+	 * @type number
+	 * @format double
+	 */
+	quantity?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	tierCost?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	tierEnd?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	tierStart?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	unitPrice?: number;
+}
+
+export interface ZeustypesSubscriptionUsageBreakdownDTO {
+	dayWiseBreakdown?: ZeustypesSubscriptionUsageDayWiseBreakdownDTO;
+	/**
+	 * @type array,null
+	 */
+	tiers?: ZeustypesSubscriptionUsageTierDTO[] | null;
+	/**
+	 * @type string
+	 */
+	type?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+}
+
+export interface ZeustypesSubscriptionUsageDetailsDTO {
+	/**
+	 * @type number
+	 * @format double
+	 */
+	baseFee?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	billTotal?: number;
+	/**
+	 * @type array,null
+	 */
+	breakdown?: ZeustypesSubscriptionUsageBreakdownDTO[] | null;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	total?: number;
+}
+
+export interface ZeustypesGettableSubscriptionUsageDTO {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	billingPeriodEnd?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	billingPeriodStart?: number;
+	details?: ZeustypesSubscriptionUsageDetailsDTO;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	discount?: number;
+	/**
+	 * @type string
+	 */
+	subscriptionStatus?: string;
+}
+
 export interface ZeustypesPostableHostDTO {
 	/**
 	 * @type string
@@ -10802,6 +10942,13 @@ export interface ZeustypesPostableProfileDTO {
 	where_did_you_discover_signoz: string;
 }
 
+export interface ZeustypesPostableSubscriptionDTO {
+	/**
+	 * @type string
+	 */
+	url: string;
+}
+
 export type GetAIObservabilityFieldsKeysParams = {
 	/**
 	 * @type string
@@ -13123,6 +13270,30 @@ export type GetHosts200 = {
 	status: string;
 };
 
+export type GetSubscriptionUsage200 = {
+	data: ZeustypesGettableSubscriptionUsageDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateSubscription201 = {
+	data: ZeustypesGettableSubscriptionDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateSubscription200 = {
+	data: ZeustypesGettableSubscriptionDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetMetricDashboardsV2Params = {
 	/**
 	 * @type string

frontend/src/api/generated/services/zeus/index.ts

@@ -18,10 +18,14 @@ import type {
 } from 'react-query';
 
 import type {
+	CreateSubscription201,
 	GetHosts200,
+	GetSubscriptionUsage200,
 	RenderErrorResponseDTO,
+	UpdateSubscription200,
 	ZeustypesPostableHostDTO,
 	ZeustypesPostableProfileDTO,
+	ZeustypesPostableSubscriptionDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -186,6 +190,90 @@ export const usePutHost = <
 > => {
 	return useMutation(getPutHostMutationOptions(options));
 };
+/**
+ * This endpoint gets the metered usage and billing details of the deployment's subscription from zeus.
+ * @summary Get subscription usage from Zeus.
+ */
+export const getSubscriptionUsage = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetSubscriptionUsage200>({
+		url: `/api/v2/zeus/meters`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetSubscriptionUsageQueryKey = () => {
+	return [`/api/v2/zeus/meters`] as const;
+};
+
+export const getGetSubscriptionUsageQueryOptions = <
+	TData = Awaited<ReturnType<typeof getSubscriptionUsage>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getSubscriptionUsage>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetSubscriptionUsageQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getSubscriptionUsage>>
+	> = ({ signal }) => getSubscriptionUsage(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getSubscriptionUsage>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetSubscriptionUsageQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getSubscriptionUsage>>
+>;
+export type GetSubscriptionUsageQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get subscription usage from Zeus.
+ */
+
+export function useGetSubscriptionUsage<
+	TData = Awaited<ReturnType<typeof getSubscriptionUsage>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getSubscriptionUsage>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetSubscriptionUsageQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get subscription usage from Zeus.
+ */
+export const invalidateGetSubscriptionUsage = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetSubscriptionUsageQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint saves the profile of a deployment to zeus.
  * @summary Put profile in Zeus for a deployment.
@@ -269,3 +357,169 @@ export const usePutProfile = <
 > => {
 	return useMutation(getPutProfileMutationOptions(options));
 };
+/**
+ * This endpoint creates a checkout session in Zeus for the deployment's subscription and returns the redirect URL.
+ * @summary Create a checkout session for the subscription.
+ */
+export const createSubscription = (
+	zeustypesPostableSubscriptionDTO?: BodyType<ZeustypesPostableSubscriptionDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateSubscription201>({
+		url: `/api/v2/zeus/subscriptions`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: zeustypesPostableSubscriptionDTO,
+		signal,
+	});
+};
+
+export const getCreateSubscriptionMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createSubscription>>,
+		TError,
+		{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createSubscription>>,
+	TError,
+	{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	const mutationKey = ['createSubscription'];
+	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 createSubscription>>,
+		{ data?: BodyType<ZeustypesPostableSubscriptionDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createSubscription(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateSubscriptionMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createSubscription>>
+>;
+export type CreateSubscriptionMutationBody =
+	| BodyType<ZeustypesPostableSubscriptionDTO>
+	| undefined;
+export type CreateSubscriptionMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create a checkout session for the subscription.
+ */
+export const useCreateSubscription = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createSubscription>>,
+		TError,
+		{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createSubscription>>,
+	TError,
+	{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	return useMutation(getCreateSubscriptionMutationOptions(options));
+};
+/**
+ * This endpoint creates a billing portal session in Zeus for the deployment's subscription and returns the redirect URL.
+ * @summary Create a billing portal session for the subscription.
+ */
+export const updateSubscription = (
+	zeustypesPostableSubscriptionDTO?: BodyType<ZeustypesPostableSubscriptionDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateSubscription200>({
+		url: `/api/v2/zeus/subscriptions`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: zeustypesPostableSubscriptionDTO,
+		signal,
+	});
+};
+
+export const getUpdateSubscriptionMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateSubscription>>,
+		TError,
+		{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateSubscription>>,
+	TError,
+	{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	const mutationKey = ['updateSubscription'];
+	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 updateSubscription>>,
+		{ data?: BodyType<ZeustypesPostableSubscriptionDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return updateSubscription(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateSubscriptionMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateSubscription>>
+>;
+export type UpdateSubscriptionMutationBody =
+	| BodyType<ZeustypesPostableSubscriptionDTO>
+	| undefined;
+export type UpdateSubscriptionMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create a billing portal session for the subscription.
+ */
+export const useUpdateSubscription = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateSubscription>>,
+		TError,
+		{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateSubscription>>,
+	TError,
+	{ data?: BodyType<ZeustypesPostableSubscriptionDTO> },
+	TContext
+> => {
+	return useMutation(getUpdateSubscriptionMutationOptions(options));
+};

frontend/src/api/v1/checkout/create.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	CheckoutRequestPayloadProps,
-	CheckoutSuccessPayloadProps,
-	PayloadProps,
-} from 'types/api/billing/checkout';
-
-const updateCreditCardApi = async (
-	props: CheckoutRequestPayloadProps,
-): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/checkout', {
-			url: props.url,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default updateCreditCardApi;

frontend/src/api/v1/dashboards/id/get.ts

@@ -0,0 +1,20 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/get';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+const get = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}`);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default get;

frontend/src/api/v1/dashboards/id/update.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { PayloadProps, Props } from 'types/api/dashboard/update';
+
+const update = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/dashboards/${props.id}`, {
+			...props.data,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default update;

frontend/src/api/v1/portal/create.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	CheckoutRequestPayloadProps,
-	CheckoutSuccessPayloadProps,
-	PayloadProps,
-} from 'types/api/billing/checkout';
-
-const manageCreditCardApi = async (
-	props: CheckoutRequestPayloadProps,
-): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/portal', {
-			url: props.url,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default manageCreditCardApi;

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -6,7 +6,6 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty } from 'lodash-es';
-import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -546,22 +545,20 @@ function reduceQueriesToObject(queryArray: any[]): {
 /**
  * Prepares V5 query range payload from GetQueryResultsProps
  */
-export const prepareQueryRangePayloadV5 = (
-	{
-		query,
-		globalSelectedInterval,
-		graphType,
-		selectedTime,
-		tableParams,
-		variables = {},
-		start: startTime,
-		end: endTime,
-		formatForWeb,
-		originalGraphType,
-		fillGaps,
-	}: GetQueryResultsProps,
-	dynamicVariables: DynamicVariableSuggestion[] = [],
-): PrepareQueryRangePayloadV5Result => {
+export const prepareQueryRangePayloadV5 = ({
+	query,
+	globalSelectedInterval,
+	graphType,
+	selectedTime,
+	tableParams,
+	variables = {},
+	start: startTime,
+	end: endTime,
+	formatForWeb,
+	originalGraphType,
+	fillGaps,
+	dynamicVariables,
+}: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
 	let legendMap: Record<string, string> = {};
 	const requestType = mapPanelTypeToRequestType(graphType);
 	let queries: QueryEnvelope[] = [];
@@ -674,9 +671,9 @@ export const prepareQueryRangePayloadV5 = (
 			(acc, [key, value]) => {
 				acc[key] = {
 					value,
-					type: dynamicVariables.some((v) => v.name === key)
-						? ('dynamic' as VariableType)
-						: undefined,
+					type: dynamicVariables
+						?.find((v) => v.name === key)
+						?.type?.toLowerCase() as VariableType,
 				};
 				return acc;
 			},

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { X } from '@signozhq/icons';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -5,16 +5,16 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,15 +5,15 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { Card } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { CardContainer } from 'container/WidgetCard/styles';
+import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import { AppState } from 'store/reducers';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -1,7 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -6,9 +6,9 @@ import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -8,7 +8,7 @@ import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -4,9 +4,10 @@ import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import useUpdatedQuery from 'container/WidgetCard/hooks/useResolveQuery';
+import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
@@ -79,6 +80,7 @@ export function useNavigateToExplorer(): (
 	);
 
 	const { getUpdatedQuery } = useUpdatedQuery();
+	const { dashboardData } = useDashboardStore();
 	const { notifications } = useNotifications();
 
 	return useCallback(
@@ -110,6 +112,7 @@ export function useNavigateToExplorer(): (
 						panelTypes: PANEL_TYPES.TIME_SERIES,
 						timePreferance: 'GLOBAL_TIME',
 					},
+					dashboardData,
 				})
 					.then((query) => {
 						preparedQuery = query;
@@ -133,6 +136,13 @@ export function useNavigateToExplorer(): (
 
 			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
-		[prepareQuery, minTime, maxTime, getUpdatedQuery, notifications],
+		[
+			prepareQuery,
+			minTime,
+			maxTime,
+			getUpdatedQuery,
+			dashboardData,
+			notifications,
+		],
 	);
 }

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -4,11 +4,12 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import updateCreditCardApi from 'api/v1/checkout/create';
+import { createSubscription } from 'api/generated/services/zeus';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
-import { SuccessResponseV2 } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -18,9 +19,7 @@ export default function ChatSupportGateway(): JSX.Element {
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -38,7 +37,7 @@ export default function ChatSupportGateway(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
+		createSubscription,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -94,18 +93,23 @@ export default function ChatSupportGateway(): JSX.Element {
 					>
 						Cancel
 					</Button>,
-					<Button
+					<AuthZTooltip
 						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
 					>
-						Add Credit Card
-					</Button>,
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/Graph/index.tsx

@@ -28,7 +28,7 @@ import {
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { generateGridTitle } from 'utils/generateGridTitle';
+import { generateGridTitle } from 'container/GridPanelSwitch/utils';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -4,16 +4,17 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import updateCreditCardApi from 'api/v1/checkout/create';
+import { createSubscription } from 'api/generated/services/zeus';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
 import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -118,9 +119,7 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -138,7 +137,7 @@ function LaunchChatSupport({
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
+		createSubscription,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -193,18 +192,23 @@ function LaunchChatSupport({
 					>
 						Cancel
 					</Button>,
-					<Button
+					<AuthZTooltip
 						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
 					>
-						Add Credit Card
-					</Button>,
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -27,7 +27,7 @@ import {
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
 } from 'constants/antlrQueryConstants';
-import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
+import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
@@ -258,7 +258,10 @@ function QuerySearch({
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
 
-	const dashboardDynamicVariables = useDynamicVariableSuggestions();
+	const dashboardDynamicVariables = useDashboardVariablesByType(
+		'DYNAMIC',
+		'values',
+	);
 
 	// Add back the generateOptions function and useEffect
 	const generateOptions = (keys: {
@@ -1185,8 +1188,8 @@ function QuerySearch({
 			);
 
 			// Add dynamic variables suggestions for the current key
-			const variableName = dashboardDynamicVariables.find(
-				(variable) => variable.attribute === keyName,
+			const variableName = dashboardDynamicVariables?.find(
+				(variable) => variable?.dynamicVariablesAttribute === keyName,
 			)?.name;
 
 			if (variableName) {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.contextSuggestions.test.tsx

@@ -17,6 +17,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 // Shrink the suggestion-fetch debounce (300ms in prod) so these integration
 // tests aren't paced by it; coalescing semantics stay intact.
 jest.mock('../QuerySearch/constants', () => ({

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -21,6 +21,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {
@@ -146,16 +152,15 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			/>,
 		);
 
-		// Wait for the mount fetch specifically. A debounced fetch from an earlier test
-		// can still land after mockClear(), so waiting on "any call" would let this
-		// assert against that one instead and make the result order-dependent.
-		await waitFor(
-			() =>
-				expect(mockedGetKeysOnMount).toHaveBeenCalledWith(
-					expect.objectContaining({ signal: DataSource.LOGS, searchText: '' }),
-				),
-			{ timeout: 2000 },
-		);
+		// Wait for debounced API call (300ms debounce + some buffer)
+		await waitFor(() => expect(mockedGetKeysOnMount).toHaveBeenCalled(), {
+			timeout: 2000,
+		});
+
+		const lastArgs = mockedGetKeysOnMount.mock.calls[
+			mockedGetKeysOnMount.mock.calls.length - 1
+		]?.[0] as { signal: unknown; searchText: string };
+		expect(lastArgs).toMatchObject({ signal: DataSource.LOGS, searchText: '' });
 	});
 
 	it('calls provided onRun on Mod-Enter', async () => {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/RecentSearches.test.tsx

@@ -31,6 +31,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 jest.mock('api/querySuggestions/getKeySuggestions', () => ({
 	getKeySuggestions: jest.fn().mockResolvedValue({
 		data: { data: { keys: {} } },

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@signozhq/ui/typography';
-import { timeItems } from 'constants/timePreference';
+import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({
 	key: item.enum,

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
-} from 'constants/timePreference';
+} from 'container/NewWidget/RightContainer/timeItems';
 
 import { menuItems } from './config';
 

frontend/src/components/ValueGraph/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleAlert } from '@signozhq/icons';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
 

frontend/src/components/ValueGraph/utils.ts

@@ -1,5 +1,5 @@
-import { evaluateThresholdWithConvertedValue } from 'container/WidgetCard/Panels/TablePanel/utils';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 function doesValueSatisfyThreshold(
 	rawValue: number,

frontend/src/constants/panelTypes.ts

@@ -1,6 +1,6 @@
 import Uplot from 'components/Uplot';
-import GridTableComponent from 'container/WidgetCard/Panels/TablePanel';
-import GridValueComponent from 'container/WidgetCard/Panels/ValuePanel';
+import GridTableComponent from 'container/GridTableComponent';
+import GridValueComponent from 'container/GridValueComponent';
 import LogsPanelComponent from 'container/LogsPanelTable/LogsPanelComponent';
 import TracesTableComponent from 'container/TracesTableComponent/TracesTableComponent';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/constants/reactQueryKeys.ts

@@ -15,7 +15,6 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_DASHBOARDS: 'GET_ALL_DASHBOARDS',
 	GET_TRIGGERED_ALERTS: 'GET_TRIGGERED_ALERTS',
 	DASHBOARD_BY_ID: 'DASHBOARD_BY_ID',
-	GET_BILLING_USAGE: 'GET_BILLING_USAGE',
 	GET_FEATURES_FLAGS: 'GET_FEATURES_FLAGS',
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',

frontend/src/constants/routes.ts

@@ -16,6 +16,7 @@ const ROUTES = {
 	APPLICATION: '/services',
 	ALL_DASHBOARD: '/dashboard',
 	DASHBOARD: '/dashboard/:dashboardId',
+	DASHBOARD_WIDGET: '/dashboard/:dashboardId/:widgetId',
 	DASHBOARD_PANEL_EDITOR: '/dashboard/:dashboardId/panel/:panelId',
 	EDIT_ALERTS: '/alerts/edit',
 	LIST_ALL_ALERT: '/alerts',

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -2,7 +2,7 @@ import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { AlertListTabs } from 'pages/AlertList/types';
-import { NEW_PANEL_ID } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
+import { NEW_PANEL_ID } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute';
 import { matchPath } from 'react-router-dom';
 
 /**

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx

@@ -6,7 +6,7 @@ import {
 	getAllEndpointsWidgetData,
 	getGroupByFiltersFromGroupByValues,
 } from 'container/ApiMonitoring/utils';
-import GridCard from 'container/WidgetCard/Card';
+import GridCard from 'container/GridCardLayout/GridCard';
 import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { isEqual } from 'lodash-es';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/MetricOverTimeGraph.tsx

@@ -1,7 +1,7 @@
 import { Card } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import GridCard from 'container/WidgetCard/Card';
-import { Widgets } from 'types/api/widgets/widget';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Widgets } from 'types/api/dashboard/getAll';
 
 function MetricOverTimeGraph({
 	widget,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -11,10 +11,10 @@ import {
 	getStatusCodeBarChartWidgetData,
 	statusCodeWidgetInfo,
 } from 'container/ApiMonitoring/utils';
-import BarChart from 'lib/visualization/charts/BarChart/BarChart';
-import { handleGraphClick } from 'container/WidgetCard/Card/utils';
-import { useGraphClickToShowButton } from 'container/WidgetCard/hooks/useGraphClickToShowButton';
-import useNavigateToExplorerPages from 'container/WidgetCard/hooks/useNavigateToExplorerPages';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
+import { useGraphClickToShowButton } from 'container/GridCardLayout/useGraphClickToShowButton';
+import useNavigateToExplorerPages from 'container/GridCardLayout/useNavigateToExplorerPages';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -23,7 +23,7 @@ import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import ErrorState from './ErrorState';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -1,7 +1,7 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { buildBaseConfig } from 'lib/visualization/panels/utils/baseConfigBuilder';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';

frontend/src/container/ApiMonitoring/__tests__/AllEndPoints.test.tsx

@@ -17,7 +17,7 @@ jest.mock('container/ApiMonitoring/utils', () => ({
 	getGroupByFiltersFromGroupByValues: jest.fn(),
 }));
 
-jest.mock('container/WidgetCard/Card', () => ({
+jest.mock('container/GridCardLayout/GridCard', () => ({
 	__esModule: true,
 	default: jest.fn().mockImplementation(({ customOnRowClick }) => (
 		<div data-testid="grid-card-mock">

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -21,12 +21,15 @@ interface MockQueryResult {
 }
 
 // Mocks
-jest.mock('lib/visualization/charts/BarChart/BarChart', () => ({
-	__esModule: true,
-	default: jest
-		.fn()
-		.mockImplementation(() => <div data-testid="bar-chart-mock" />),
-}));
+jest.mock(
+	'container/DashboardContainer/visualization/charts/BarChart/BarChart',
+	() => ({
+		__esModule: true,
+		default: jest
+			.fn()
+			.mockImplementation(() => <div data-testid="bar-chart-mock" />),
+	}),
+);
 
 jest.mock('components/CeleryTask/useGetGraphCustomSeries', () => ({
 	useGetGraphCustomSeries: (): { getCustomSeries: jest.Mock } => ({
@@ -40,7 +43,7 @@ jest.mock('components/CeleryTask/useNavigateToExplorer', () => ({
 	}),
 }));
 
-jest.mock('container/WidgetCard/hooks/useGraphClickToShowButton', () => ({
+jest.mock('container/GridCardLayout/useGraphClickToShowButton', () => ({
 	useGraphClickToShowButton: (): {
 		componentClick: boolean;
 		htmlRef: HTMLElement | null;
@@ -50,7 +53,7 @@ jest.mock('container/WidgetCard/hooks/useGraphClickToShowButton', () => ({
 	}),
 }));
 
-jest.mock('container/WidgetCard/hooks/useNavigateToExplorerPages', () => ({
+jest.mock('container/GridCardLayout/useNavigateToExplorerPages', () => ({
 	__esModule: true,
 	default: (): { navigateToExplorerPages: jest.Mock } => ({
 		navigateToExplorerPages: jest.fn(),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -10,7 +10,7 @@ import {
 } from 'components/QuickFilters/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { GraphClickMetaData } from 'container/WidgetCard/hooks/useNavigateToExplorerPages';
+import { GraphClickMetaData } from 'container/GridCardLayout/useNavigateToExplorerPages';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { convertNanoToMilliseconds } from 'container/MetricsExplorer/Summary/utils';
 import dayjs from 'dayjs';
@@ -18,7 +18,7 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { cloneDeep } from 'lodash-es';
 import { ArrowUpDown, ChevronDown, ChevronRight, Info } from '@signozhq/icons';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import {
 	BaseAutocompleteData,

frontend/src/container/AppLayout/index.tsx

@@ -20,7 +20,8 @@ import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getChangelogByVersion from 'api/changelog/getChangelogByVersion';
 import logEvent from 'api/common/logEvent';
-import manageCreditCardApi from 'api/v1/portal/create';
+import { updateSubscription } from 'api/generated/services/zeus';
+import type { UpdateSubscription200 } from 'api/generated/services/sigNoz.schemas';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import getUserVersion from 'api/v1/version/get';
 import getUserLatestVersion from 'api/v1/version/getLatestVersion';
@@ -30,6 +31,11 @@ import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import {
+	SubscriptionListPermission,
+	SubscriptionUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { MIN_ACCOUNT_AGE_FOR_CHANGELOG } from 'constants/changelog';
 import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
@@ -63,8 +69,7 @@ import {
 	UPDATE_LATEST_VERSION,
 	UPDATE_LATEST_VERSION_ERROR,
 } from 'types/actions/app';
-import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	ChangelogSchema,
 	DeploymentType,
@@ -77,7 +82,6 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
-import { USER_ROLES } from 'types/roles';
 import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
@@ -166,9 +170,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		return Math.abs(currentDate.diff(userCreationDate, 'day'));
 	}, [user.createdAt]);
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: UpdateSubscription200): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -186,7 +188,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	};
 
 	const { mutate: manageCreditCard, isLoading: isLoadingManageBilling } =
-		useMutation(manageCreditCardApi, {
+		useMutation(updateSubscription, {
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
 			},
@@ -469,10 +471,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [isLoggedIn]);
 
 	const handleUpgrade = useCallback((): void => {
-		if (user.role === USER_ROLES.ADMIN) {
-			history.push(ROUTES.BILLING);
-		}
-	}, [user.role]);
+		history.push(ROUTES.BILLING);
+	}, []);
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
@@ -586,25 +586,21 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					<div>
 						Our systems are taking longer than expected for your trial workspace.
 						Please{' '}
-						{user.role === USER_ROLES.ADMIN ? (
-							<span>
-								<a
-									className="upgrade-link"
-									onClick={(): void => {
-										notifications.destroy('slow-api-warning');
+						<span>
+							<a
+								className="upgrade-link"
+								onClick={(): void => {
+									notifications.destroy('slow-api-warning');
 
-										logEvent(`Slow API Banner: Upgrade clicked`, {});
+									logEvent(`Slow API Banner: Upgrade clicked`, {});
 
-										handleUpgrade();
-									}}
-								>
-									upgrade
-								</a>
-								your workspace for a smoother experience.
-							</span>
-						) : (
-							'contact your administrator for upgrading to a paid plan for a smoother experience.'
-						)}
+									handleUpgrade();
+								}}
+							>
+								upgrade
+							</a>
+							your workspace for a smoother experience.
+						</span>
 					</div>
 				),
 				duration: 60000,
@@ -794,22 +790,18 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 							<div className="trial-expiry-banner">
 								You are in free trial period. Your free trial will end on{' '}
 								<span>{getFormattedDate(trialInfo?.trialEnd || Date.now())}.</span>
-								{user.role === USER_ROLES.ADMIN ? (
-									<span>
+								<span>
+									{' '}
+									Please{' '}
+									<a className="upgrade-link" onClick={handleUpgrade}>
+										upgrade
+									</a>
+									to continue using SigNoz features.
+									<span className="refresh-payment-status">
 										{' '}
-										Please{' '}
-										<a className="upgrade-link" onClick={handleUpgrade}>
-											upgrade
-										</a>
-										to continue using SigNoz features.
-										<span className="refresh-payment-status">
-											{' '}
-											| Already upgraded? <RefreshPaymentStatus type="text" />
-										</span>
+										| Already upgraded? <RefreshPaymentStatus type="text" />
 									</span>
-								) : (
-									'Please contact your administrator for upgrading to a paid plan.'
-								)}
+								</span>
 							</div>
 						)}
 
@@ -826,22 +818,22 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 									)}
 									.
 								</span>
-								{user.role === USER_ROLES.ADMIN ? (
-									<span>
-										{' '}
-										Please{' '}
+								<span>
+									{' '}
+									Please{' '}
+									<AuthZTooltip
+										checks={[SubscriptionListPermission, SubscriptionUpdatePermission]}
+									>
 										<a className="upgrade-link" onClick={handleFailedPayment}>
 											pay the bill
 										</a>
-										to continue using SigNoz features.
-										<span className="refresh-payment-status">
-											{' '}
-											| Already paid? <RefreshPaymentStatus type="text" />
-										</span>
+									</AuthZTooltip>
+									to continue using SigNoz features.
+									<span className="refresh-payment-status">
+										{' '}
+										| Already paid? <RefreshPaymentStatus type="text" />
 									</span>
-								) : (
-									' Please contact your administrator to pay the bill.'
-								)}
+								</span>
 							</div>
 						)}
 					</div>

frontend/src/container/BillingContainer/BillingContainer.authz.test.tsx

@@ -0,0 +1,113 @@
+import {
+	SubscriptionCreatePermission,
+	SubscriptionReadPermission,
+	SubscriptionUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import {
+	setupAuthzAdmin,
+	setupAuthzAllow,
+	setupAuthzDeny,
+} from 'lib/authz/utils/authz-test-utils';
+import { trialConvertedToSubscriptionResponse } from 'mocks-server/__mockdata__/licenses';
+import { server } from 'mocks-server/server';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import BillingContainer from './BillingContainer';
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+describe('BillingContainer - AuthZ', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders usage and enables actions when all subscription permissions are granted', async () => {
+		server.use(setupAuthzAdmin());
+
+		render(<BillingContainer />);
+
+		await expect(
+			screen.findByRole('columnheader', { name: /data ingested/i }),
+		).resolves.toBeInTheDocument();
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeEnabled();
+		});
+		expect(screen.queryByText(/not authorized/i)).not.toBeInTheDocument();
+	});
+
+	it('blocks the usage section when subscription read is denied', async () => {
+		server.use(setupAuthzDeny(SubscriptionReadPermission));
+
+		render(<BillingContainer />);
+
+		await expect(
+			screen.findByText(/not authorized/i),
+		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('header-billing-button')).toBeInTheDocument();
+		expect(
+			screen.queryByRole('columnheader', { name: /data ingested/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('disables upgrade when subscription create is denied', async () => {
+		server.use(setupAuthzAllow(SubscriptionReadPermission));
+
+		render(<BillingContainer />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeDisabled();
+		});
+		expect(screen.getByTestId('upgrade-plan-button')).toBeDisabled();
+	});
+
+	it('disables manage billing when subscription update is denied', async () => {
+		server.use(
+			setupAuthzAllow(SubscriptionReadPermission, SubscriptionCreatePermission),
+		);
+
+		render(
+			<BillingContainer />,
+			{},
+			{
+				appContextOverrides: {
+					trialInfo: trialConvertedToSubscriptionResponse.data,
+				},
+			},
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeDisabled();
+		});
+		expect(screen.queryByTestId('upgrade-plan-button')).not.toBeInTheDocument();
+	});
+
+	it('disables manage billing when subscription list is denied', async () => {
+		server.use(
+			setupAuthzAllow(
+				SubscriptionReadPermission,
+				SubscriptionCreatePermission,
+				SubscriptionUpdatePermission,
+			),
+		);
+
+		render(
+			<BillingContainer />,
+			{},
+			{
+				appContextOverrides: {
+					trialInfo: trialConvertedToSubscriptionResponse.data,
+				},
+			},
+		);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('header-billing-button')).toBeDisabled();
+		});
+	});
+});

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -1,9 +1,11 @@
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { billingSuccessResponse } from 'mocks-server/__mockdata__/billing';
 import {
 	licensesSuccessResponse,
 	notOfTrailResponse,
 	trialConvertedToSubscriptionResponse,
 } from 'mocks-server/__mockdata__/licenses';
+import { server } from 'mocks-server/server';
 import { act, render, screen, getAppContextMock } from 'tests/test-utils';
 import APIError from 'types/api/error';
 import {
@@ -15,11 +17,6 @@ import { getFormattedDate } from 'utils/timeUtils';
 
 import BillingContainer from './BillingContainer';
 
-jest.mock('hooks/useActiveLicenseKey/useActiveLicenseKey', () => ({
-	__esModule: true,
-	default: jest.fn(() => ({ licenseKey: 'test-key', isLoading: false })),
-}));
-
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({
@@ -31,14 +28,22 @@ window.ResizeObserver =
 describe('BillingContainer', () => {
 	jest.setTimeout(30000);
 
+	beforeEach(() => {
+		server.use(setupAuthzAdmin());
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
 	it('Component should render', async () => {
 		render(<BillingContainer />);
 
-		const dataInjection = screen.getByRole('columnheader', {
+		const dataInjection = await screen.findByRole('columnheader', {
 			name: /data ingested/i,
 		});
 		expect(dataInjection).toBeInTheDocument();
-		const pricePerUnit = screen.getByRole('columnheader', {
+		const pricePerUnit = await screen.findByRole('columnheader', {
 			name: /price per unit/i,
 		});
 		expect(pricePerUnit).toBeInTheDocument();

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -3,7 +3,7 @@ import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
 import {
 	Card,
@@ -15,25 +15,35 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-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';
+import type {
+	CreateSubscription201,
+	GetSubscriptionUsage200,
+	ZeustypesGettableSubscriptionUsageDTO,
+	ZeustypesSubscriptionUsageBreakdownDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	createSubscription,
+	updateSubscription,
+	useGetSubscriptionUsage,
+} from 'api/generated/services/zeus';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import useAxiosError from 'hooks/useAxiosError';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
-import useActiveLicenseKey from 'hooks/useActiveLicenseKey/useActiveLicenseKey';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
+import {
+	SubscriptionCreatePermission,
+	SubscriptionListPermission,
+	SubscriptionReadPermission,
+	SubscriptionUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { useAppContext } from 'providers/App/App';
-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';
 
@@ -135,7 +145,7 @@ export default function BillingContainer(): JSX.Element {
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
 	const [data, setData] = useState<DataType[]>([]);
 	const [apiResponse, setApiResponse] = useState<
-		Partial<UsageResponsePayloadProps>
+		Partial<ZeustypesGettableSubscriptionUsageDTO>
 	>({});
 
 	const {
@@ -146,7 +156,9 @@ export default function BillingContainer(): JSX.Element {
 		activeLicense,
 		activeLicenseFetchError,
 	} = useAppContext();
-	const { licenseKey } = useActiveLicenseKey();
+	const { allowed: canReadSubscription } = useAuthZ([
+		SubscriptionReadPermission,
+	]);
 	const { notifications } = useNotifications();
 
 	const handleError = useAxiosError();
@@ -154,33 +166,31 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
-			if (isEmpty(data?.payload)) {
+		(response: GetSubscriptionUsage200): void => {
+			const usage = response?.data;
+			if (isEmpty(usage)) {
 				return;
 			}
-			const {
-				details: { breakdown = [], billTotal },
-				billingPeriodStart,
-				billingPeriodEnd,
-			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
+			const breakdown = usage.details?.breakdown ?? [];
+			const billTotal = usage.details?.billTotal ?? 0;
+			const billingPeriodStart = usage.billingPeriodStart ?? 0;
+			const billingPeriodEnd = usage.billingPeriodEnd ?? 0;
 			const formattedUsageData: DataType[] = [];
 
-			if (breakdown && Array.isArray(breakdown)) {
-				for (let index = 0; index < breakdown.length; index += 1) {
-					const element: BreakdownEntry = breakdown[index];
-
-					element?.tiers?.forEach((tier, i: number) => {
+			breakdown.forEach(
+				(element: ZeustypesSubscriptionUsageBreakdownDTO, index: number) => {
+					element?.tiers?.forEach((tier, tierIndex: number) => {
 						formattedUsageData.push({
-							key: `${index}${i}`,
-							name: i === 0 ? element?.type : '',
+							key: `${index}${tierIndex}`,
+							name: tierIndex === 0 ? (element?.type ?? '') : '',
 							unit: element?.unit ?? '',
 							dataIngested: `${tier.quantity} ${element?.unit}`,
 							pricePerUnit: String(tier.unitPrice),
 							cost: `$ ${tier.tierCost}`,
 						});
 					});
-				}
-			}
+				},
+			);
 
 			setData(formattedUsageData);
 
@@ -196,7 +206,7 @@ export default function BillingContainer(): JSX.Element {
 				setBillAmount(billTotal);
 			}
 
-			setApiResponse(data?.payload || {});
+			setApiResponse(usage);
 		},
 		[trialInfo?.onTrial],
 	);
@@ -208,11 +218,12 @@ export default function BillingContainer(): JSX.Element {
 		isLoading,
 		isFetching: isFetchingBillingData,
 		data: billingData,
-	} = useQuery([REACT_QUERY_KEY.GET_BILLING_USAGE, user?.id], {
-		queryFn: () => getUsage(licenseKey || ''),
-		onError: handleError,
-		enabled: !!licenseKey,
-		onSuccess: processUsageData,
+	} = useGetSubscriptionUsage({
+		query: {
+			enabled: canReadSubscription,
+			onError: handleError,
+			onSuccess: processUsageData,
+		},
 	});
 
 	useEffect(() => {
@@ -284,9 +295,7 @@ export default function BillingContainer(): JSX.Element {
 		/>
 	);
 
-	const handleBillingOnSuccess = (
-		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
-	): void => {
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -303,7 +312,7 @@ export default function BillingContainer(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
+		createSubscription,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -313,7 +322,7 @@ export default function BillingContainer(): JSX.Element {
 	);
 
 	const { mutate: manageCreditCard, isLoading: isLoadingManageBilling } =
-		useMutation(manageCreditCardApi, {
+		useMutation(updateSubscription, {
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
 			},
@@ -394,6 +403,10 @@ export default function BillingContainer(): JSX.Element {
 		}
 	}, [apiResponse, notifications]);
 
+	const billingActionPermissions = trialInfo?.trialConvertedToSubscription
+		? [SubscriptionListPermission, SubscriptionUpdatePermission]
+		: [SubscriptionCreatePermission];
+
 	const showGracePeriodMessage =
 		!isLoading &&
 		!trialInfo?.trialConvertedToSubscription &&
@@ -429,7 +442,8 @@ export default function BillingContainer(): JSX.Element {
 							</p>
 						) : null}
 					</Flex>
-					<Button
+					<AuthZButton
+						checks={billingActionPermissions}
 						testId="header-billing-button"
 						variant="solid"
 						color="secondary"
@@ -443,7 +457,7 @@ export default function BillingContainer(): JSX.Element {
 						{trialInfo?.trialConvertedToSubscription
 							? t('manage_billing')
 							: t('upgrade_plan')}
-					</Button>
+					</AuthZButton>
 				</Flex>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -495,66 +509,73 @@ export default function BillingContainer(): JSX.Element {
 					))}
 			</Card>
 
-			<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} />
+			<AuthZGuardContent checks={[SubscriptionReadPermission]}>
+				<>
+					<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>
-				)}
-			</div>
-			{!isLoading && !isFetchingBillingData && (
-				<Callout type="info" size="small" className={styles.billingUpdateNote}>
-					Billing metrics are updated once every 24 hours.
-				</Callout>
-			)}
+					{!isLoading && !isFetchingBillingData && (
+						<Callout type="info" size="small" className={styles.billingUpdateNote}>
+							Billing metrics are updated once every 24 hours.
+						</Callout>
+					)}
 
-			<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}`}
-										/>
-									);
-								},
-							},
-						}}
-					/>
-				)}
+					<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}`}
+												/>
+											);
+										},
+									},
+								}}
+							/>
+						)}
 
-				{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
-			</div>
+						{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
+					</div>
+				</>
+			</AuthZGuardContent>
 
 			{isCloudUserVal && activeLicense?.state === LicenseState.ACTIVATED && (
 				<CancelSubscriptionBanner />
@@ -597,7 +618,8 @@ export default function BillingContainer(): JSX.Element {
 							</Typography.Text>
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
-							<Button
+							<AuthZButton
+								checks={billingActionPermissions}
 								testId="upgrade-plan-button"
 								variant="solid"
 								color="primary"
@@ -606,7 +628,7 @@ export default function BillingContainer(): JSX.Element {
 								onClick={handleBilling}
 							>
 								{t('upgrade_plan')}
-							</Button>
+							</AuthZButton>
 						</Col>
 					</Row>
 				</div>

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import BarChart from 'lib/visualization/charts/BarChart/BarChart';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
@@ -12,7 +12,7 @@ import {
 } 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 type { ZeustypesGettableSubscriptionUsageDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { BillingBarChartTooltip } from './BillingBarChartTooltip';
 import { prepareBillingBarConfig } from './prepareBillingBarConfig';
@@ -25,7 +25,7 @@ import {
 import styles from './BillingUsageGraph.module.scss';
 
 interface BillingUsageGraphProps {
-	data: Partial<UsageResponsePayloadProps>;
+	data: Partial<ZeustypesGettableSubscriptionUsageDTO>;
 	billAmount: number;
 }
 
@@ -55,7 +55,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
 					const nextDay = {
 						...currentDay,
-						timestamp: currentDay.timestamp + 86400,
+						timestamp: (currentDay.timestamp ?? 0) + 86400,
 						count: 0,
 						size: 0,
 						quantity: 0,
@@ -94,7 +94,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 
 	const { startTime, endTime } = useMemo(
 		() =>
-			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
+			calculateStartEndTime(
+				normalizedData as Partial<ZeustypesGettableSubscriptionUsageDTO>,
+			),
 		[normalizedData],
 	);
 

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { buildBaseConfig } from 'lib/visualization/panels/utils/baseConfigBuilder';
+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';

frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts

@@ -1,4 +1,4 @@
-import { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import { ZeustypesGettableSubscriptionUsageDTO } from 'api/generated/services/sigNoz.schemas';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
@@ -117,7 +117,9 @@ export function csvFileName(csvData: QuantityData[]): string {
 	return `billing_usage_(${startDate}-${endDate}).csv`;
 }
 
-export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
+export function prepareCsvData(
+	data: Partial<ZeustypesGettableSubscriptionUsageDTO>,
+): {
 	csvData: string;
 	fileName: string;
 } {
@@ -135,12 +137,14 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 }
 
 export function calculateStartEndTime(
-	data: Partial<UsageResponsePayloadProps>,
+	data: Partial<ZeustypesGettableSubscriptionUsageDTO>,
 ): { startTime: number | undefined; endTime: number | undefined } {
 	const timestamps: number[] = [];
 	data?.details?.breakdown?.forEach((breakdown) => {
 		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
-			timestamps.push(entry.timestamp);
+			if (typeof entry.timestamp === 'number') {
+				timestamps.push(entry.timestamp);
+			}
 		});
 	});
 

frontend/src/container/BillingContainer/CancelSubscriptionBanner.test.tsx

@@ -1,3 +1,9 @@
+import { SubscriptionDeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import {
+	setupAuthzAdmin,
+	setupAuthzDeny,
+} from 'lib/authz/utils/authz-test-utils';
+import { server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CancelSubscriptionBanner from './CancelSubscriptionBanner';
@@ -36,10 +42,24 @@ function mockMailto(): {
 }
 
 describe('CancelSubscriptionBanner', () => {
+	beforeEach(() => {
+		server.use(setupAuthzAdmin());
+	});
+
 	afterEach(() => {
+		server.resetHandlers();
 		jest.restoreAllMocks();
 	});
 
+	it('disables Cancel Subscription when subscription delete is denied', async () => {
+		server.use(setupAuthzDeny(SubscriptionDeletePermission));
+		render(<CancelSubscriptionBanner />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeDisabled();
+		});
+	});
+
 	it('renders banner with title and subtitle', () => {
 		render(<CancelSubscriptionBanner />);
 		expect(
@@ -56,9 +76,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 
 		expect(screen.getByRole('dialog')).toBeInTheDocument();
 		expect(
@@ -76,9 +97,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 
 		const confirmButton = screen.getByTestId('cancel-subscription-confirm-btn');
 		expect(confirmButton).toBeDisabled();
@@ -95,9 +117,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 
 		const input = screen.getByTestId('cancel-confirm-input');
 		await user.type(input, 'cancel');
@@ -107,9 +130,10 @@ describe('CancelSubscriptionBanner', () => {
 			expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
 		);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		expect(screen.getByTestId('cancel-confirm-input')).toHaveValue('');
 	});
 
@@ -119,9 +143,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -151,9 +176,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -172,9 +198,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 
@@ -192,9 +219,10 @@ describe('CancelSubscriptionBanner', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
-		await user.click(
-			screen.getByRole('button', { name: /cancel subscription/i }),
-		);
+		await waitFor(() => {
+			expect(screen.getByTestId('cancel-subscription-btn')).toBeEnabled();
+		});
+		await user.click(screen.getByTestId('cancel-subscription-btn'));
 		await user.type(screen.getByTestId('cancel-confirm-input'), 'cancel');
 		await user.click(screen.getByTestId('cancel-subscription-confirm-btn'));
 

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

@@ -11,6 +11,8 @@ import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { SubscriptionDeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCopyToClipboard } from 'react-use';
@@ -178,15 +180,17 @@ function CancelSubscriptionBanner(): JSX.Element {
 						immediately and removed from our servers.
 					</span>
 				</div>
-				<Button
+				<AuthZButton
+					checks={[SubscriptionDeletePermission]}
 					variant="solid"
 					color="secondary"
 					prefix={<X size={12} />}
 					onClick={handleOpenCancelDialog}
 					className={styles.cancelButton}
+					testId="cancel-subscription-btn"
 				>
 					Cancel Subscription
-				</Button>
+				</AuthZButton>
 			</div>
 			<DialogWrapper
 				open={dialogView !== null}

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -98,7 +98,7 @@ jest.mock('api/channels/getAll', () => ({
 }));
 
 // Mock alert format categories
-jest.mock('constants/formats/alertFormatCategories', () => ({
+jest.mock('container/NewWidget/RightContainer/alertFomatCategories', () => ({
 	getCategoryByOptionId: jest.fn(() => ({ name: 'bytes' })),
 	getCategorySelectOptionByName: jest.fn(() => [
 		{ label: 'Bytes', value: 'bytes' },

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QueryParams } from 'constants/query';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import ChartPreviewComponent from 'container/FormAlertRules/ChartPreview';
-import PlotTag from 'components/PlotTag/PlotTag';
+import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
 import { AppState } from 'store/reducers';

frontend/src/container/CreateAlertV2/QuerySection/__tests__/ChartPreview.test.tsx

@@ -44,7 +44,7 @@ jest.mock(
 		},
 );
 jest.mock(
-	'components/PlotTag/PlotTag',
+	'container/NewWidget/LeftContainer/WidgetGraph/PlotTag',
 	() =>
 		function MockPlotTag(props: any): JSX.Element {
 			return (

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import ChartWrapper from 'lib/visualization/charts/ChartWrapper/ChartWrapper';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
 import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
 import {
 	BarTooltipProps,
@@ -8,7 +8,7 @@ import {
 
 import { StackMode } from 'lib/uPlotV2/config/types';
 
-import { BarChartProps } from 'lib/visualization/charts/types';
+import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
 	const {

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react';
-import ChartLayout from 'lib/visualization/layout/ChartLayout/ChartLayout';
+import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
 import UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
 import {
 	LegendPosition,
@@ -13,8 +13,8 @@ import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
 import noop from 'lodash-es/noop';
 import uPlot from 'uplot';
 
-import { ChartWrapperProps } from 'lib/visualization/charts/types';
-import { useChartStacking } from 'lib/visualization/charts/ChartWrapper/useChartStacking';
+import { ChartWrapperProps } from '../types';
+import { useChartStacking } from './useChartStacking';
 
 const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 300;

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/__tests__/useChartStacking.test.ts

@@ -3,7 +3,7 @@ import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { StackMode } from 'lib/uPlotV2/config/types';
 import uPlot from 'uplot';
 
-import { useChartStacking } from 'lib/visualization/charts/ChartWrapper/useChartStacking';
+import { useChartStacking } from '../useChartStacking';
 
 type Hooks = Record<string, (...args: unknown[]) => void>;
 

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/useChartStacking.ts

@@ -10,7 +10,7 @@ import { StackMode } from 'lib/uPlotV2/config/types';
 import { has } from 'lodash-es';
 import uPlot from 'uplot';
 
-import { stackSeries } from 'lib/visualization/charts/utils/stackSeriesUtils';
+import { stackSeries } from '../utils/stackSeriesUtils';
 
 /** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
 function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -1,12 +1,12 @@
 import { useCallback } from 'react';
-import ChartWrapper from 'lib/visualization/charts/ChartWrapper/ChartWrapper';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
 import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
 import {
 	HistogramTooltipProps,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { HistogramChartProps } from 'lib/visualization/charts/types';
+import { HistogramChartProps } from '../types';
 
 export default function Histogram(props: HistogramChartProps): JSX.Element {
 	const {

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.tsx

@@ -9,18 +9,15 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import Legend from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 
-import { PieChartProps, PieSlice } from 'lib/visualization/charts/types';
-import { calculateChartDimensions } from 'lib/visualization/charts/utils';
+import { PieChartProps, PieSlice } from '../types';
+import { calculateChartDimensions } from '../utils';
 
-import { usePieInteractions } from 'lib/visualization/hooks/usePieInteractions';
-import PieArc from 'lib/visualization/charts/Pie/PieArc';
-import PieCenterLabel from 'lib/visualization/charts/Pie/PieCenterLabel';
-import styles from 'lib/visualization/charts/Pie/Pie.module.scss';
-import { PieTooltipData } from 'lib/visualization/charts/Pie/types';
-import {
-	getDonutGeometry,
-	getFillColor,
-} from 'lib/visualization/charts/Pie/utils';
+import { usePieInteractions } from '../../hooks/usePieInteractions';
+import PieArc from './PieArc';
+import PieCenterLabel from './PieCenterLabel';
+import styles from './Pie.module.scss';
+import { PieTooltipData } from './types';
+import { getDonutGeometry, getFillColor } from './utils';
 
 /**
  * Donut chart rendered with @visx. Splits its area into chart + legend with the

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieArc.tsx

@@ -2,9 +2,9 @@ import type { MouseEvent as ReactMouseEvent } from 'react';
 import type { PrecisionOption } from 'components/Graph/types';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 
-import { PieSlice } from 'lib/visualization/charts/types';
+import { PieSlice } from '../types';
 
-import { getArcGeometry } from 'lib/visualization/charts/Pie/utils';
+import { getArcGeometry } from './utils';
 
 // Slices below this share of the total don't get a leader label (too cramped).
 const MIN_LABEL_SHARE = 0.03;

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieCenterLabel.tsx

@@ -1,7 +1,7 @@
 import type { PrecisionOption } from 'components/Graph/types';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 
-import { getScaledFontSize } from 'lib/visualization/charts/Pie/utils';
+import { getScaledFontSize } from './utils';
 
 interface PieCenterLabelProps {
 	/** Sum of the visible slice values, shown in the donut hole. */

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/Pie.test.tsx

@@ -4,8 +4,8 @@ import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 
-import { PieSlice } from 'lib/visualization/charts/types';
-import Pie from 'lib/visualization/charts/Pie/Pie';
+import { PieSlice } from '../../types';
+import Pie from '../Pie';
 
 jest.mock('hooks/useDimensions', () => ({
 	useResizeObserver: jest.fn().mockReturnValue({ width: 400, height: 300 }),

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieArc.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import { PieSlice } from 'lib/visualization/charts/types';
-import PieArc from 'lib/visualization/charts/Pie/PieArc';
+import { PieSlice } from '../../types';
+import PieArc from '../PieArc';
 
 jest.mock('components/Graph/yAxisConfig', () => ({
 	// Echo the raw value so assertions are deterministic.

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieCenterLabel.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 
-import PieCenterLabel from 'lib/visualization/charts/Pie/PieCenterLabel';
+import PieCenterLabel from '../PieCenterLabel';
 
 jest.mock('components/Graph/yAxisConfig', () => ({
 	getYAxisFormattedValue: jest.fn(),

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/utils.test.ts

@@ -4,7 +4,7 @@ import {
 	getFillColor,
 	getScaledFontSize,
 	lightenColor,
-} from 'lib/visualization/charts/Pie/utils';
+} from '../utils';
 
 describe('Pie utils', () => {
 	describe('getDonutGeometry', () => {

frontend/src/container/DashboardContainer/visualization/charts/Pie/utils.ts

@@ -8,7 +8,7 @@ import {
 	DonutGeometry,
 	ParsedRgb,
 	ScaledFontSizeArgs,
-} from 'lib/visualization/charts/Pie/types';
+} from './types';
 
 // Leader-line + two-line label/value drawn outside the donut. `getArcGeometry`
 // anchors the label at `radius * LABEL_RADIUS_RATIO`; `LABEL_TEXT_ALLOWANCE` is

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import ChartWrapper from 'lib/visualization/charts/ChartWrapper/ChartWrapper';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
 import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
 import {
 	TimeSeriesTooltipProps,
@@ -8,7 +8,7 @@ import {
 
 import { StackMode } from 'lib/uPlotV2/config/types';
 
-import { TimeSeriesChartProps } from 'lib/visualization/charts/types';
+import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 	const { children, customTooltip, stack = StackMode.None, ...rest } = props;

frontend/src/container/DashboardContainer/visualization/charts/__tests__/utils.test.ts

@@ -1,6 +1,6 @@
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 
-import { calculateChartDimensions } from 'lib/visualization/charts/utils';
+import { calculateChartDimensions } from '../utils';
 
 const labels = (count: number, length = 20): string[] =>
 	Array.from({ length: count }, (_, i) =>

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -1,4 +1,3 @@
-import uPlot from 'uplot';
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
@@ -110,13 +109,3 @@ export interface PieChartProps {
 	onSliceClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
 	'data-testid'?: string;
 }
-
-/** A uPlot series enriched with the aggregates the legend table shows. */
-export type ExtendedChartDataset = uPlot.Series & {
-	show: boolean;
-	sum: number;
-	avg: number;
-	min: number;
-	max: number;
-	index: number;
-};

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/sortByMeanDesc.test.ts

@@ -1,4 +1,4 @@
-import { sortByMeanDesc } from 'lib/visualization/charts/utils/sortByMeanDesc';
+import { sortByMeanDesc } from '../sortByMeanDesc';
 
 interface Item {
 	name: string;

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackSeriesUtils.test.ts

@@ -2,7 +2,7 @@ import { AlignedData } from 'uplot';
 
 import { StackMode } from 'lib/uPlotV2/config/types';
 
-import { stackSeries } from 'lib/visualization/charts/utils/stackSeriesUtils';
+import { stackSeries } from '../stackSeriesUtils';
 
 const includeAll = (): boolean => false;
 

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -6,15 +6,16 @@ import { ResizeTable } from 'components/ResizeTable';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+import {
+	selectIsDashboardLocked,
+	useDashboardStore,
+} from 'providers/Dashboard/store/useDashboardStore';
 import { toast } from '@signozhq/ui/sonner';
 
-import { getChartManagerColumns } from 'lib/visualization/components/ChartManager/getChartMangerColumns';
-import {
-	ExtendedChartDataset,
-	getDefaultTableDataSet,
-} from 'lib/visualization/components/ChartManager/utils';
+import { getChartManagerColumns } from './getChartMangerColumns';
+import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
 
-import 'lib/visualization/components/ChartManager/ChartManager.styles.scss';
+import './ChartManager.styles.scss';
 
 interface ChartManagerProps {
 	config: UPlotConfigBuilder;
@@ -52,6 +53,7 @@ export default function ChartManager({
 		onToggleSeriesVisibility,
 		syncSeriesVisibilityToLocalStorage,
 	} = usePlotContext();
+	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
 
 	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(() =>
 		getDefaultTableDataSet(
@@ -117,6 +119,7 @@ export default function ChartManager({
 				onToggleSeriesOnOff: handleToggleSeriesOnOff,
 				onToggleSeriesVisibility,
 				yAxisUnit,
+				isGraphDisabled: isDashboardLocked,
 				decimalPrecision,
 			}),
 		[
@@ -125,6 +128,7 @@ export default function ChartManager({
 			handleToggleSeriesOnOff,
 			onToggleSeriesVisibility,
 			yAxisUnit,
+			isDashboardLocked,
 			decimalPrecision,
 		],
 	);

frontend/src/container/DashboardContainer/visualization/components/ChartManager/SeriesLabel.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from 'antd';
 
-import 'lib/visualization/components/ChartManager/ChartManager.styles.scss';
+import './ChartManager.styles.scss';
 
 interface SeriesLabelProps {
 	label: string;

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/ChartManager.test.tsx

@@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { render, screen } from 'tests/test-utils';
 
-import ChartManager from 'lib/visualization/components/ChartManager/ChartManager';
+import ChartManager from '../ChartManager';
 
 const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
 const mockToastSuccess = jest.fn();
@@ -32,6 +32,20 @@ jest.mock('lib/uPlotV2/hooks/useLegendsSync', () => ({
 	}),
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (
+		selector?: (s: { dashboardData: { locked: boolean } | undefined }) => {
+			dashboardData: { locked: boolean };
+		},
+	): { dashboardData: { locked: boolean } } => {
+		const mockState = { dashboardData: { locked: false } };
+		return selector ? selector(mockState) : mockState;
+	},
+	selectIsDashboardLocked: (s: {
+		dashboardData: { locked: boolean } | undefined;
+	}): boolean => s.dashboardData?.locked ?? false,
+}));
+
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: {

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/SeriesLabel.test.tsx

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import { render, screen } from 'tests/test-utils';
 
-import { SeriesLabel } from 'lib/visualization/components/ChartManager/SeriesLabel';
+import { SeriesLabel } from '../SeriesLabel';
 
 describe('SeriesLabel', () => {
 	it('renders the label text', () => {

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/getChartManagerColumns.test.tsx

@@ -2,8 +2,8 @@ import { render } from '@testing-library/react';
 import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 
-import { getChartManagerColumns } from 'lib/visualization/components/ChartManager/getChartMangerColumns';
-import { ExtendedChartDataset } from 'lib/visualization/components/ChartManager/utils';
+import { getChartManagerColumns } from '../getChartMangerColumns';
+import { ExtendedChartDataset } from '../utils';
 
 const createMockDataset = (
 	index: number,

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/utils.test.ts

@@ -4,7 +4,7 @@ import {
 	formatTableValueWithUnit,
 	getDefaultTableDataSet,
 	getTableColumnTitle,
-} from 'lib/visualization/components/ChartManager/utils';
+} from '../utils';
 
 describe('ChartManager utils', () => {
 	describe('getDefaultTableDataSet', () => {

frontend/src/container/DashboardContainer/visualization/components/ChartManager/getChartMangerColumns.tsx

@@ -1,13 +1,13 @@
 import { TableColumnType as ColumnType } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import CustomCheckBox from 'lib/visualization/components/ChartManager/CustomCheckBox';
+import CustomCheckBox from 'container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox';
 
-import { SeriesLabel } from 'lib/visualization/components/ChartManager/SeriesLabel';
+import { SeriesLabel } from './SeriesLabel';
 import {
 	ExtendedChartDataset,
 	formatTableValueWithUnit,
 	getTableColumnTitle,
-} from 'lib/visualization/components/ChartManager/utils';
+} from './utils';
 
 export interface GetChartManagerColumnsParams {
 	tableDataSet: ExtendedChartDataset[];
@@ -16,6 +16,7 @@ export interface GetChartManagerColumnsParams {
 	onToggleSeriesVisibility: (index: number) => void;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
+	isGraphDisabled?: boolean;
 }
 
 export function getChartManagerColumns({
@@ -25,6 +26,7 @@ export function getChartManagerColumns({
 	onToggleSeriesVisibility,
 	yAxisUnit,
 	decimalPrecision = PrecisionOptionsEnum.TWO,
+	isGraphDisabled,
 }: GetChartManagerColumnsParams): ColumnType<ExtendedChartDataset>[] {
 	return [
 		{
@@ -37,6 +39,7 @@ export function getChartManagerColumns({
 					data={tableDataSet}
 					graphVisibilityState={graphVisibilityState}
 					index={record.index}
+					disabled={isGraphDisabled}
 					checkBoxOnChangeHandler={(_e, idx): void => onToggleSeriesOnOff(idx)}
 				/>
 			),
@@ -50,6 +53,7 @@ export function getChartManagerColumns({
 				<SeriesLabel
 					label={label ?? ''}
 					labelIndex={record.index}
+					disabled={isGraphDisabled}
 					onClick={onToggleSeriesVisibility}
 				/>
 			),

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -1,9 +1,9 @@
 import { renderHook } from '@testing-library/react';
 import { UseQueryResult } from 'react-query';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 
-import { usePanelContextMenu } from 'container/WidgetCard/Panels/hooks/usePanelContextMenu';
+import { usePanelContextMenu } from '../usePanelContextMenu';
 
 // The hook composes `useCoordinates` (popover state) and `useGraphContextMenu`
 // (menu items). We mock both so the test focuses on the `enableDrillDown` gate
@@ -37,7 +37,7 @@ jest.mock('container/QueryTable/Drilldown/drilldownUtils', () => ({
 	})),
 }));
 
-jest.mock('container/WidgetCard/Panels/utils', () => ({
+jest.mock('container/PanelWrapper/utils', () => ({
 	isApmMetric: jest.fn(() => false),
 	getTimeRangeFromStepInterval: jest.fn(() => ({ start: 0, end: 0 })),
 }));

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePieInteractions.test.tsx

@@ -2,13 +2,15 @@ import { act, renderHook } from '@testing-library/react';
 import {
 	getStoredSeriesVisibility,
 	updateSeriesVisibilityToLocalStorage,
-} from 'lib/visualization/panels/utils/legendVisibilityUtils';
+} from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import type { MouseEvent } from 'react';
 
-import { PieSlice } from 'lib/visualization/charts/types';
-import { usePieInteractions } from 'lib/visualization/hooks/usePieInteractions';
+import { PieSlice } from '../../charts/types';
+import { usePieInteractions } from '../usePieInteractions';
 
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils');
+jest.mock(
+	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
+);
 
 const mockGetStored = getStoredSeriesVisibility as jest.MockedFunction<
 	typeof getStoredSeriesVisibility

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useScrollWidgetIntoView.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
 
-import { useScrollWidgetIntoView } from 'lib/visualization/hooks/useScrollWidgetIntoView';
+import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
 
 jest.mock('providers/Dashboard/helpers/scrollToWidgetIdHelper');
 

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -3,14 +3,14 @@ import { UseQueryResult } from 'react-query';
 import {
 	getTimeRangeFromStepInterval,
 	isApmMetric,
-} from 'container/WidgetCard/Panels/utils';
+} from 'container/PanelWrapper/utils';
 import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
 import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
 import {
 	PopoverPosition,
 	useCoordinates,
 } from 'periscope/components/ContextMenu';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/container/DashboardContainer/visualization/hooks/usePieInteractions.ts

@@ -5,8 +5,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
 	getStoredSeriesVisibility,
 	updateSeriesVisibilityToLocalStorage,
-} from 'lib/visualization/panels/utils/legendVisibilityUtils';
-import { PieSlice } from 'lib/visualization/charts/types';
+} from '../panels/utils/legendVisibilityUtils';
+import { PieSlice } from '../charts/types';
 
 export interface UsePieInteractionsResult {
 	/** The hovered/focused slice (drives donut dimming + tooltip). */

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
-import { calculateChartDimensions } from 'lib/visualization/charts/utils';
+import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
 import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
-import 'lib/visualization/layout/ChartLayout/ChartLayout.styles.scss';
+import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
 	showLegend?: boolean;