lint & a few fixes

frontend/src/const/routes.ts

@@ -68,12 +68,6 @@ export const ROUTE_PATHS = Object.freeze({
       "/_authenticate/_inject-org-details/_org-layout/organizations/$orgId/networking"
     )
   },
-  Pam: {
-    ApprovalRequestDetailPage: setRoute(
-      "/organizations/$orgId/projects/pam/$projectId/approval-requests/$approvalRequestId",
-      "/_authenticate/_inject-org-details/_org-layout/organizations/$orgId/projects/pam/$projectId/_pam-layout/approval-requests/$approvalRequestId"
-    )
-  },
   SecretManager: {
     ApprovalPage: setRoute(
       "/organizations/$orgId/projects/secret-management/$projectId/approval",
@@ -368,6 +362,10 @@ export const ROUTE_PATHS = Object.freeze({
     PamSessionByIDPage: setRoute(
       "/organizations/$orgId/projects/pam/$projectId/sessions/$sessionId",
       "/_authenticate/_inject-org-details/_org-layout/organizations/$orgId/projects/pam/$projectId/_pam-layout/sessions/$sessionId"
+    ),
+    ApprovalRequestDetailPage: setRoute(
+      "/organizations/$orgId/projects/pam/$projectId/approval-requests/$approvalRequestId",
+      "/_authenticate/_inject-org-details/_org-layout/organizations/$orgId/projects/pam/$projectId/_pam-layout/approval-requests/$approvalRequestId"
     )
   },
   Public: {

frontend/src/hooks/api/approvalPolicies/index.tsx

@@ -5,9 +5,9 @@ export {
 } from "./mutations";
 export { approvalPolicyQuery } from "./queries";
 export {
+  type ApprovalPolicyStep,
   ApprovalPolicyType,
   ApproverType,
-  type ApprovalPolicyStep,
   type PamAccessPolicyConditions,
   type PamAccessPolicyConstraints,
   type TApprovalPolicy,

frontend/src/hooks/api/approvalRequests/index.tsx

@@ -5,10 +5,10 @@ export {
 } from "./mutations";
 export { approvalRequestQuery } from "./queries";
 export {
-  ApprovalRequestStatus,
-  ApprovalRequestStepStatus,
   type ApprovalRequestApproval,
+  ApprovalRequestStatus,
   type ApprovalRequestStep,
+  ApprovalRequestStepStatus,
   type PamAccessRequestData,
   type TApprovalRequest,
   type TApproveApprovalRequestDTO,

frontend/src/pages/pam/ApprovalsPage/ApprovalsPage.tsx

@@ -1,11 +1,12 @@
 import { Helmet } from "react-helmet";
+import { useNavigate, useSearch } from "@tanstack/react-router";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useOrganization, useProject } from "@app/context";
 import { ApprovalControlTabs } from "@app/types/project";
-import { useNavigate, useSearch } from "@tanstack/react-router";
-import { PolicyTab } from "./components/PolicyTab";
+
 import { ApprovalRequestTab } from "./components/ApprovalRequestTab";
+import { PolicyTab } from "./components/PolicyTab";
 
 const Page = () => {
   const navigate = useNavigate();

frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/components/RequestsTable.tsx

@@ -9,8 +9,8 @@ import {
   faSearch
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useNavigate } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
 import { formatDistance } from "date-fns";
 import { twMerge } from "tailwind-merge";
 
@@ -39,14 +39,13 @@ import {
 import { Badge } from "@app/components/v3";
 import { useOrganization, useProject, useUser } from "@app/context";
 import { usePagination } from "@app/hooks";
-import { ApprovalPolicyType } from "@app/hooks/api/approvalPolicies";
+import { ApprovalPolicyType, ApproverType } from "@app/hooks/api/approvalPolicies";
 import {
   approvalRequestQuery,
   ApprovalRequestStatus,
   ApprovalRequestStepStatus,
   TApprovalRequest
 } from "@app/hooks/api/approvalRequests";
-import { ApproverType } from "@app/hooks/api/approvalPolicies";
 
 type Filter = {
   status: "open" | "closed";
@@ -119,7 +118,9 @@ export const RequestsTable = () => {
     })
   );
 
-  const { page, perPage, setPage, setPerPage, offset } = usePagination();
+  const { page, perPage, setPage, setPerPage, offset } = usePagination("", {
+    initPerPage: 10
+  });
 
   const filteredRequests = useMemo(() => {
     let filtered = requests;
@@ -376,7 +377,9 @@ export const RequestsTable = () => {
         {!isRequestsLoading && !filteredRequests?.length && (
           <EmptyState
             title={
-              requests.length ? "No approval requests match search..." : "No approval requests found"
+              requests.length
+                ? "No approval requests match search..."
+                : "No approval requests found"
             }
             icon={requests.length ? faSearch : faFileCircleQuestion}
           />

frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx

@@ -8,6 +8,7 @@ import {
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useQuery } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 
 import {
@@ -36,7 +37,6 @@ import {
   ApproverType
 } from "@app/hooks/api/approvalPolicies";
 import { UsePopUpState } from "@app/hooks/usePopUp";
-import { useQuery } from "@tanstack/react-query";
 
 type Props = {
   handlePopUpOpen: (

frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx

@@ -1,6 +1,7 @@
-import { ApproverType } from "@app/hooks/api/approvalPolicies";
 import { z } from "zod";
 
+import { ApproverType } from "@app/hooks/api/approvalPolicies";
+
 export const PolicyFormSchema = z.object({
   name: z.string().min(1, "Policy name is required").max(128),
   maxRequestTtlSeconds: z.number().min(3600).max(2592000).nullable().optional(),

frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySection.tsx

@@ -5,10 +5,10 @@ import { createNotification } from "@app/components/notifications";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { useProject } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteApprovalPolicy, ApprovalPolicyType } from "@app/hooks/api/approvalPolicies";
+import { ApprovalPolicyType, useDeleteApprovalPolicy } from "@app/hooks/api/approvalPolicies";
 
-import { PolicyModal } from "./PolicyModal";
 import { PoliciesTable } from "./PoliciesTable";
+import { PolicyModal } from "./PolicyModal";
 
 export const PolicySection = () => {
   const { currentProject } = useProject();

frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyApprovalSteps.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { MultiValue } from "react-select";
 import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -12,10 +13,7 @@ import { ApproverType } from "@app/hooks/api/approvalPolicies";
 import { TPolicyForm } from "../PolicySchema";
 
 export const PolicyApprovalSteps = () => {
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext<TPolicyForm>();
+  const { control } = useFormContext<TPolicyForm>();
 
   const { currentProject } = useProject();
   const projectId = currentProject?.id || "";
@@ -55,7 +53,7 @@ export const PolicyApprovalSteps = () => {
     <div className="space-y-4">
       <div className="mb-3 flex items-center justify-between">
         <div>
-          <label className="text-sm font-medium text-mineshaft-200">Approval Steps</label>
+          <span className="text-sm font-medium text-mineshaft-200">Approval Steps</span>
           <p className="text-xs text-mineshaft-400">
             Define the approval workflow with sequential steps
           </p>
@@ -157,7 +155,9 @@ export const PolicyApprovalSteps = () => {
                           label="User Approvers"
                           isError={Boolean(error)}
                           errorText={
-                            error?.message && userApprovers.length === 0 && groupApprovers.length === 0
+                            error?.message &&
+                            userApprovers.length === 0 &&
+                            groupApprovers.length === 0
                               ? error?.message
                               : undefined
                           }
@@ -175,7 +175,10 @@ export const PolicyApprovalSteps = () => {
                             value={userApprovers}
                             onChange={(selected) => {
                               const newApprovers = [
-                                ...(selected || []),
+                                ...((selected as MultiValue<{
+                                  type: ApproverType;
+                                  id: string;
+                                }>) || []),
                                 ...groupApprovers
                               ];
                               onChange(newApprovers);
@@ -187,7 +190,9 @@ export const PolicyApprovalSteps = () => {
                           label="Group Approvers"
                           isError={Boolean(error)}
                           errorText={
-                            error?.message && userApprovers.length === 0 && groupApprovers.length === 0
+                            error?.message &&
+                            userApprovers.length === 0 &&
+                            groupApprovers.length === 0
                               ? error?.message
                               : undefined
                           }
@@ -205,7 +210,10 @@ export const PolicyApprovalSteps = () => {
                             onChange={(selected) => {
                               const newApprovers = [
                                 ...userApprovers,
-                                ...(selected || [])
+                                ...((selected as MultiValue<{
+                                  type: ApproverType;
+                                  id: string;
+                                }>) || [])
                               ];
                               onChange(newApprovers);
                             }}
@@ -225,7 +233,7 @@ export const PolicyApprovalSteps = () => {
         <div className="rounded border border-dashed border-mineshaft-600 bg-mineshaft-800/50 p-8 text-center">
           <p className="text-sm text-mineshaft-400">No approval steps defined</p>
           <p className="mt-1 text-xs text-mineshaft-500">
-            Click "Add Step" to create your first approval step
+            Click &quot;Add Step&quot; to create your first approval step
           </p>
         </div>
       )}

frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyConstraintsStep.tsx

@@ -3,6 +3,7 @@ import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+
 import { TPolicyForm } from "../PolicySchema";
 
 export const PolicyConstraintsStep = () => {

frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx

@@ -1,6 +1,7 @@
 import { Controller, useFormContext } from "react-hook-form";
 
 import { FormControl, Input } from "@app/components/v2";
+
 import { TPolicyForm } from "../PolicySchema";
 
 export const PolicyDetailsStep = () => {

frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/index.tsx

@@ -1,3 +1,3 @@
-export { PolicyModal } from "./PolicyModal";
 export { PoliciesTable } from "./PoliciesTable";
+export { PolicyModal } from "./PolicyModal";
 export { PolicySection } from "./PolicySection";