general improvements

frontend/src/pages/pam/ApprovalRequestDetailPage/ApprovalRequestDetailPage.tsx

@@ -119,8 +119,8 @@ const PageContent = () => {
               )}
           </div>
         </PageHeader>
-        <div className="flex justify-center gap-4">
+        <div className="flex flex-col justify-center gap-4 lg:flex-row">
-          <div className="flex w-96 flex-col gap-4">
+          <div className="flex flex-col gap-4 lg:w-96">
             <RequestDetailsSection request={request} />
             <RequestActionsSection request={request} />
           </div>

frontend/src/pages/pam/ApprovalRequestDetailPage/components/ApprovalStepsSection.tsx

@@ -75,7 +75,7 @@ export const ApprovalStepsSection = ({ request }: Props) => {
   return (
     <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
       <div className="mb-2 flex items-center justify-between border-b border-mineshaft-500 pb-2">
-        <h3 className="text-lg font-medium text-mineshaft-100">Approval Workflow</h3>
+        <h3 className="text-lg font-medium text-mineshaft-100">Approval Sequence</h3>
       </div>
       <div className="space-y-6">
         {request.steps.map((step, index) => (

frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestActionsSection.tsx

@@ -127,7 +127,7 @@ export const RequestActionsSection = ({ request }: Props) => {
               Review
             </Button>
           </PopoverTrigger>
-          <PopoverContent align="start" title="Finish your review" className="w-96">
+          <PopoverContent align="start" title="Finish your review" className="w-96 pt-4">
             <FormLabel label="Finish your review" />
             <TextArea
               value={comment}

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

@@ -152,8 +152,11 @@ export const ApprovalRequestTab = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4">
-        <p className="text-xl font-medium text-mineshaft-100">Approval Requests</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
+        </div>
+        <p className="text-sm text-bunker-300">View pending access requests to PAM accounts</p>
       </div>
       <div>
         <div className="flex gap-2">
@@ -262,7 +265,7 @@ export const ApprovalRequestTab = () => {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search approval requests..."
+            placeholder="Search access requests..."
           />
         </div>
         <TableContainer className="mt-4">
@@ -286,10 +289,7 @@ export const ApprovalRequestTab = () => {
                   return (
                     <Tr
                       key={request.id}
-                      className={twMerge(
+                      className="cursor-pointer transition-colors hover:bg-mineshaft-700"
-                        "cursor-pointer transition-colors hover:bg-mineshaft-700",
-                        needsApproval && "bg-primary/5 hover:bg-primary/10"
-                      )}
                       onClick={() => handleRowClick(request.id)}
                     >
                       <Td>

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

@@ -38,10 +38,14 @@ export const PolicyTab = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4 flex items-center">
-        <div className="flex items-center gap-x-2">
+        <div className="flex-1">
-          <p className="text-xl font-medium text-mineshaft-100">Approval Policies</p>
+          <div className="flex items-center gap-x-2">
+            <p className="text-xl font-medium text-mineshaft-100">Access Policies</p>
+          </div>
+          <p className="text-sm text-bunker-300">View and manage PAM access policies</p>
         </div>
+
         <Button
           variant="outline_bg"
           type="submit"
@@ -51,6 +55,7 @@ export const PolicyTab = () => {
           Create Policy
         </Button>
       </div>
+
       <PoliciesTable handlePopUpOpen={handlePopUpOpen} />
       <PolicyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal

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

@@ -98,7 +98,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
             <Tr>
               <Th className="w-10" />
               <Th>Policy Name</Th>
-              <Th>Access Duration (min - max)</Th>
+              <Th>Max. Access Duration</Th>
               <Th>Conditions</Th>
               <Th className="w-5" />
             </Tr>
@@ -141,10 +141,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
                         </IconButton>
                       </Td>
                       <Td>{policy.name}</Td>
-                      <Td>
+                      <Td>{policy.constraints.constraints.accessDuration.max}</Td>
-                        {policy.constraints.constraints.accessDuration.min} -{" "}
-                        {policy.constraints.constraints.accessDuration.max}
-                      </Td>
                       <Td>
                         {conditionsCount} condition{conditionsCount !== 1 ? "s" : ""}
                       </Td>

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

@@ -15,7 +15,6 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { PolicyApprovalSteps } from "./PolicySteps/PolicyApprovalSteps";
-import { PolicyConstraintsStep } from "./PolicySteps/PolicyConstraintsStep";
 import { PolicyDetailsStep } from "./PolicySteps/PolicyDetailsStep";
 import { PolicyReviewStep } from "./PolicySteps/PolicyReviewStep";
 import { PolicyFormSchema, TPolicyForm } from "./PolicySchema";
@@ -26,9 +25,12 @@ type Props = {
 };
 
 const FORM_STEPS: { name: string; key: string; fields: (keyof TPolicyForm)[] }[] = [
-  { name: "Details", key: "details", fields: ["name", "maxRequestTtl", "constraints"] },
+  {
-  { name: "Conditions", key: "conditions", fields: ["conditions"] },
+    name: "Configuration",
-  { name: "Approvals", key: "approvals", fields: ["steps"] },
+    key: "configuration",
+    fields: ["name", "constraints", "conditions"]
+  },
+  { name: "Approval Sequence", key: "approvals", fields: ["steps"] },
   { name: "Review", key: "review", fields: [] }
 ];
 
@@ -61,8 +63,7 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
           approvers: []
         }
       ]
-    },
+    }
-    mode: "onChange"
   });
 
   const { handleSubmit, trigger, reset } = formMethods;
@@ -184,7 +185,7 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
   return (
     <Modal isOpen={isOpen} onOpenChange={(open) => handlePopUpToggle("policy", open)}>
       <ModalContent
-        title={policyData?.policyId ? "Edit Policy" : "Create Policy"}
+        title={policyData?.policyId ? "Edit Access Policy" : "Create Access Policy"}
         className="max-w-3xl"
       >
         <FormProvider {...formMethods}>
@@ -215,9 +216,6 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
                 <Tab.Panel>
                   <PolicyDetailsStep />
                 </Tab.Panel>
-                <Tab.Panel>
-                  <PolicyConstraintsStep />
-                </Tab.Panel>
                 <Tab.Panel>
                   <PolicyApprovalSteps />
                 </Tab.Panel>
@@ -237,7 +235,8 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
                 isLoading={isCreating || isUpdating}
                 isDisabled={isCreating || isUpdating}
               >
-                {policyData?.policyId ? "Update" : "Create"} {isFinalStep ? "" : "Next"}
+                {isFinalStep && (policyData?.policyId ? "Update" : "Create")}
+                {!isFinalStep && "Next"}
               </Button>
             </div>
           </form>

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

@@ -28,7 +28,13 @@ export const PolicyFormSchema = z.object({
   ).nullish(),
   conditions: z
     .object({
-      accountPaths: z.array(z.string().min(1))
+      accountPaths: z
+        .string()
+        .array()
+        .min(1, "Must have at least one account path")
+        .refine((val) => val.every((path) => path.length > 0), {
+          message: "All account paths must be non-empty"
+        })
     })
     .array()
     .min(1, "At least one condition is required"),

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

@@ -78,7 +78,7 @@ export const PolicyApprovalSteps = () => {
 
       <div className="space-y-4">
         {stepFields.map((field, index) => (
-          <div key={field.id} className="rounded border border-mineshaft-600 bg-mineshaft-800 p-4">
+          <div key={field.id} className="rounded border border-mineshaft-600 bg-mineshaft-700 p-4">
             <div className="mb-3 flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/20 text-xs font-semibold text-primary">

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

@@ -1,102 +0,0 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-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 = () => {
-  const { control } = useFormContext<TPolicyForm>();
-
-  const {
-    fields: conditionFields,
-    append: appendCondition,
-    remove: removeCondition
-  } = useFieldArray({
-    control,
-    name: "conditions"
-  });
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <div className="mb-3 flex items-center justify-between">
-          <div>
-            <p className="pb-0.5 text-sm font-medium text-mineshaft-200">Conditions</p>
-            <p className="text-xs text-mineshaft-400">
-              Define which resources and account paths this policy applies to
-            </p>
-          </div>
-          <Button
-            type="button"
-            variant="outline_bg"
-            size="xs"
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => appendCondition({ accountPaths: [] })}
-          >
-            Add Condition
-          </Button>
-        </div>
-        <div>
-          {conditionFields.map((field, index) => (
-            <div key={field.id}>
-              <div className="rounded border border-mineshaft-600 bg-mineshaft-800 p-4">
-                <div className="mb-3 flex items-center justify-between">
-                  <span className="text-sm font-medium text-mineshaft-300">
-                    Condition {index + 1}
-                  </span>
-                  {conditionFields.length > 1 && (
-                    <IconButton
-                      ariaLabel="Remove condition"
-                      variant="plain"
-                      size="xs"
-                      onClick={() => removeCondition(index)}
-                    >
-                      <FontAwesomeIcon icon={faTrash} className="text-red-500" />
-                    </IconButton>
-                  )}
-                </div>
-                <div className="space-y-3">
-                  <Controller
-                    control={control}
-                    name={`conditions.${index}.accountPaths`}
-                    render={({ field: pathField, fieldState: { error } }) => (
-                      <FormControl
-                        label="Account Paths"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        helperText="Matches any of the comma-separated account paths this condition applies to"
-                      >
-                        <Input
-                          value={pathField.value.join(", ")}
-                          onChange={(e) => {
-                            const paths = e.target.value
-                              .split(",")
-                              .map((path) => path.trim())
-                              .filter(Boolean);
-                            pathField.onChange(paths);
-                          }}
-                          placeholder="e.g., /admin/**, /users/john, /**"
-                        />
-                      </FormControl>
-                    )}
-                  />
-                </div>
-              </div>
-              {index < conditionFields.length - 1 && (
-                <div className="flex items-center">
-                  <div className="flex flex-col items-center">
-                    <div className="h-3 w-px bg-mineshaft-500" />
-                    <span className="px-2 text-xs font-medium text-mineshaft-400">OR</span>
-                    <div className="h-3 w-px bg-mineshaft-500" />
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
 import { TtlFormLabel } from "@app/components/features";
@@ -6,80 +7,72 @@ import { FormControl, Input } from "@app/components/v2";
 import { TPolicyForm } from "../PolicySchema";
 
 export const PolicyDetailsStep = () => {
-  const { control } = useFormContext<TPolicyForm>();
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext<TPolicyForm>();
+
+  useEffect(() => {
+    console.log("YOOOO");
+    console.log(errors);
+  }, [errors]);
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
+      <div className="flex w-full gap-4">
+        <Controller
+          control={control}
+          name="name"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Policy Name"
+              className="mb-0 flex-1"
+              isRequired
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} placeholder="Enter policy name" />
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="constraints.accessDuration.max"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label={<TtlFormLabel label="Max. Access Duration" />}
+              className="mb-0"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} />
+            </FormControl>
+          )}
+        />
+      </div>
+
       <Controller
         control={control}
-        name="name"
+        name="conditions.0.accountPaths"
-        render={({ field, fieldState: { error } }) => (
+        render={({ field: pathField, fieldState: { error } }) => (
           <FormControl
-            label="Policy Name"
             isRequired
+            label="Account Paths"
             isError={Boolean(error)}
             errorText={error?.message}
+            helperText="Policy matches any of these comma-separated account paths"
           >
-            <Input {...field} placeholder="Enter policy name" />
+            <Input
+              value={pathField.value.join(",")}
+              onChange={(e) => {
+                pathField.onChange(e.target.value.split(",").map((path) => path.trim()));
+              }}
+              placeholder="e.g., /admin/**, /users/john, /**"
+            />
           </FormControl>
         )}
       />
-      {/*
-        <Controller
-        control={control}
-        name="maxRequestTtl"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            isError={Boolean(error)}
-            errorText={error?.message}
-            label={<TtlFormLabel label="Max Approval Request TTL" />}
-            helperText="Maximum time-to-live for requests. Must be between 1 hour and 30 days. Leave empty for no limit."
-          >
-            <Input {...field} value={field.value ?? ""} placeholder="1h" />
-          </FormControl>
-        )}
-      />
-      */}
-      <div className="border-t border-mineshaft-600 pt-4">
-        <div className="mb-3">
-          <p className="pb-0.5 text-sm font-medium text-mineshaft-200">
-            PAM Account Access Duration TTL
-          </p>
-          <p className="text-xs text-mineshaft-400">
-            Set minimum and maximum duration (in seconds) for pam account access
-          </p>
-        </div>
-        <div className="grid grid-cols-2 gap-4">
-          <Controller
-            control={control}
-            name="constraints.accessDuration.min"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label={<TtlFormLabel label="Minimum TTL" />}
-                isError={Boolean(error)}
-                errorText={error?.message}
-                helperText="Must be between 30s and 7 days"
-              >
-                <Input {...field} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="constraints.accessDuration.max"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label={<TtlFormLabel label="Maximum TTL" />}
-                isError={Boolean(error)}
-                errorText={error?.message}
-                helperText="Must be between 30s and 7 days"
-              >
-                <Input {...field} />
-              </FormControl>
-            )}
-          />
-        </div>
-      </div>
     </div>
   );
 };

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

@@ -45,61 +45,23 @@ export const PolicyReviewStep = () => {
     <div className="space-y-6">
       <div>
         <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">Policy Details</h3>
+          <h3 className="text-sm font-medium text-mineshaft-200">Policy Configuration</h3>
         </div>
-        <div className="space-y-2">
+        <div className="grid grid-cols-2 gap-2">
           <ReviewField label="Policy Name" value={name || "Not set"} />
-          <ReviewField label="Max Approval Request TTL" value={maxRequestTtl || "No Limit"} />
+          <ReviewField label="Max. Access Duration" value={constraints.accessDuration.max} />
+          <ReviewField
+            label="Account Paths"
+            value={
+              conditions[0].accountPaths.length ? conditions[0].accountPaths.join(",") : "Not set"
+            }
+          />
         </div>
       </div>
 
       <div>
         <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
+          <h3 className="text-sm font-medium text-mineshaft-200">Approval Sequence</h3>
-            PAM Account Access Duration TTL
-          </h3>
-        </div>
-        <div className="space-y-2">
-          <ReviewField label="Minimum Duration" value={constraints.accessDuration.min} />
-          <ReviewField label="Maximum Duration" value={constraints.accessDuration.max} />
-        </div>
-      </div>
-
-      <div>
-        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            Conditions ({conditions.length})
-          </h3>
-        </div>
-        <div className="space-y-3">
-          {conditions.map((condition, index) => (
-            <div
-              key={`condition-${index + 1}`}
-              className="rounded border border-mineshaft-600 bg-mineshaft-800/50 p-3"
-            >
-              <div className="mb-2 text-xs font-medium text-mineshaft-300">
-                Condition {index + 1}
-              </div>
-              <div className="space-y-2">
-                <div>
-                  <span className="text-xs text-mineshaft-400">Account Paths: </span>
-                  <span className="text-xs text-mineshaft-200">
-                    {condition.accountPaths.length > 0
-                      ? condition.accountPaths.join(", ")
-                      : "None specified"}
-                  </span>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            Approval Workflow ({steps.length} step{steps.length !== 1 ? "s" : ""})
-          </h3>
         </div>
         <div className="space-y-3">
           {steps.map((step, index) => {
@@ -109,7 +71,7 @@ export const PolicyReviewStep = () => {
             return (
               <div
                 key={`step-${index + 1}`}
-                className="rounded border border-mineshaft-600 bg-mineshaft-800/50 p-3"
+                className="rounded border border-mineshaft-600 bg-mineshaft-700 p-3"
               >
                 <div className="mb-3 flex items-center justify-between">
                   <div className="flex items-center gap-2">

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

@@ -180,8 +180,11 @@ export const RequestGrantTab = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
+      <div className="mb-4">
-        <p className="text-xl font-medium text-mineshaft-100">Access Grants</p>
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Access Grants</p>
+        </div>
+        <p className="text-sm text-bunker-300">View and revoke access grants to PAM accounts</p>
       </div>
       <div>
         <div className="flex gap-2">