first pass restyle of auth methods and rules

src/components/resource-policy/EditPolicyForm.tsx

@@ -12,17 +12,11 @@ import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 
-import { createApiClient } from "@app/lib/api";
-import { useRouter } from "next/navigation";
-
 import { useMemo } from "react";
-import { EditPolicyAuthMethodsSectionForm } from "./EditPolicyAuthMethodsSectionForm";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { EditPolicyNameSectionForm } from "./EditPolicyNameSectionForm";
-import { EditPolicyUsersRolesSectionForm } from "./EditPolicyUserRolesSectionForm";
-import { EditPolicyOtpEmailSectionForm } from "./EditPolicyOtpEmailSectionForm";
-import { EditPolicyRulesSectionForm } from "./EditPolicyRulesSectionForm";
-
-// ─── EditPolicyForm ─────────────────────────────────────────────────────────
+import { PolicyAuthStackSection } from "./PolicyAuthStackSection";
+import { PolicyAccessRulesSection } from "./PolicyAccessRulesSection";
 
 export type EditPolicyFormProps = {
     hidePolicyNameForm?: boolean;
@@ -35,19 +29,15 @@ export function EditPolicyForm({
     readonly,
     resourceId
 }: EditPolicyFormProps) {
-    const { org } = useOrgContext();
     const t = useTranslations();
+    const { org } = useOrgContext();
     const { env } = useEnvContext();
-    const api = createApiClient({ env });
-    // const [, formAction, isSubmitting] = useActionState(onSubmit, null);
     const { isPaidUser } = usePaidStatus();
 
-    const router = useRouter();
-
     // In overlay mode (resourceId provided), policy-level sections are locked.
     // Rules and users/roles sections handle their own hybrid logic via resourceId.
     const isOverlay = resourceId !== undefined;
-    const policyLevelReadonly = readonly || isOverlay;
+    const showTabs = !hidePolicyNameForm && !isOverlay;
 
     const isMaxmindAvailable = !!(
         env.server.maxmind_db_path && env.server.maxmind_db_path.length > 0
@@ -81,32 +71,54 @@ export function EditPolicyForm({
         return <></>;
     }
 
+    const authSection = (
+        <PolicyAuthStackSection
+            mode="edit"
+            orgId={org.org.orgId}
+            allIdps={allIdps}
+            emailEnabled={env.email.emailEnabled}
+            readonly={readonly}
+            resourceId={resourceId}
+        />
+    );
+
+    const rulesSection = (
+        <PolicyAccessRulesSection
+            mode="edit"
+            isMaxmindAvailable={isMaxmindAvailable}
+            isMaxmindAsnAvailable={isMaxmindASNAvailable}
+            readonly={readonly}
+            resourceId={resourceId}
+        />
+    );
+
+    if (showTabs) {
+        return (
+            <HorizontalTabs
+                clientSide
+                defaultTab={0}
+                items={[
+                    { title: t("general"), href: "#" },
+                    { title: t("authentication"), href: "#" },
+                    { title: t("policyAccessRulesTitle"), href: "#" }
+                ]}
+            >
+                <EditPolicyNameSectionForm readonly={readonly} />
+                {authSection}
+                {rulesSection}
+            </HorizontalTabs>
+        );
+    }
+
     return (
         <SettingsContainer>
-            {!hidePolicyNameForm && (
-                <EditPolicyNameSectionForm readonly={policyLevelReadonly} />
+            {!hidePolicyNameForm && !isOverlay && (
+                <EditPolicyNameSectionForm readonly={readonly} />
             )}
 
-            <EditPolicyUsersRolesSectionForm
-                orgId={org.org.orgId}
-                allIdps={allIdps}
-                readonly={readonly}
-                resourceId={resourceId}
-            />
+            {authSection}
 
-            <EditPolicyAuthMethodsSectionForm readonly={policyLevelReadonly} />
-
-            <EditPolicyOtpEmailSectionForm
-                emailEnabled={env.email.emailEnabled}
-                readonly={policyLevelReadonly}
-            />
-
-            <EditPolicyRulesSectionForm
-                isMaxmindAvailable={isMaxmindAvailable}
-                isMaxmindAsnAvailable={isMaxmindASNAvailable}
-                readonly={readonly}
-                resourceId={resourceId}
-            />
+            {rulesSection}
         </SettingsContainer>
     );
 }