feat(webapp): admin back-office editors for org max projects and batch rate limit (#3475)

## Summary - Adds admin-only editors on the back-office org page for `Organization.maximumProjectCount` and `Organization.batchRateLimitConfig`, alongside the existing API rate limit editor. - Splits the back-office org page into per-section components (`ApiRateLimitSection`, `BatchRateLimitSection`, `MaxProjectsSection`) so each tool is self-contained — adding new sections later doesn't bloat the route. - Generalizes the rate-limit form into a reusable `RateLimitSection` component + `RateLimitDomain` server config so API and batch share the same UI, validation, and action handler. Each domain only owns its env defaults, DB column, and logger key. - "Saved." banner and validation errors are scoped to the section that submitted, not the page. Heads-up: the API rate-limit log key was renamed `admin.backOffice.rateLimit` → `admin.backOffice.apiRateLimit` for symmetry with the new `admin.backOffice.batchRateLimit`. ## Test plan - [ ] As an admin, visit `/admin/back-office/orgs/:orgId` and confirm all three sections render with the org's current values (or system defaults). - [ ] Edit and save each section; confirm only that section shows the "Saved." banner. - [ ] Submit invalid input (e.g. `0` tokens, malformed interval); confirm errors render in the offending form only and the other sections stay closed. - [ ] Confirm a non-admin user is redirected away from the route. - [ ] After saving a rate-limit override, hit the org with traffic and confirm the new limit is enforced (API rate limit + batch rate limit code paths read the column at request time).
2026-05-11 10:19:41 -04:00
parent a5ba406530
commit 2b845455b0
11 changed files with 821 additions and 355 deletions
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Admin back office: edit an organization's batch rate limit (`batchRateLimitConfig`) from the org page, alongside the existing API rate limit editor. The rate-limit form UI is now shared between the API and batch sections.
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Admin back office: edit an organization's `maximumProjectCount` from the org page, beneath the API rate limit editor.
@@ -0,0 +1,55 @@
+import { prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { logger } from "~/services/logger.server";
+import { type Duration } from "~/services/rateLimiter.server";
+import { API_RATE_LIMIT_INTENT } from "./ApiRateLimitSection";
+import {
+  handleRateLimitAction,
+  resolveEffectiveRateLimit,
+  type RateLimitActionResult,
+  type RateLimitDomain,
+} from "./RateLimitSection.server";
+import type { EffectiveRateLimit } from "./RateLimitSection";
+
+export const apiRateLimitDomain: RateLimitDomain = {
+  intent: API_RATE_LIMIT_INTENT,
+  systemDefault: () => ({
+    type: "tokenBucket",
+    refillRate: env.API_RATE_LIMIT_REFILL_RATE,
+    interval: env.API_RATE_LIMIT_REFILL_INTERVAL as Duration,
+    maxTokens: env.API_RATE_LIMIT_MAX,
+  }),
+  apply: async (orgId, next, adminUserId) => {
+    const existing = await prisma.organization.findFirst({
+      where: { id: orgId },
+      select: { apiRateLimiterConfig: true },
+    });
+    if (!existing) {
+      throw new Response(null, { status: 404 });
+    }
+    await prisma.organization.update({
+      where: { id: orgId },
+      data: { apiRateLimiterConfig: next as any },
+    });
+    logger.info("admin.backOffice.apiRateLimit", {
+      adminUserId,
+      orgId,
+      previous: existing.apiRateLimiterConfig,
+      next,
+    });
+  },
+};
+
+export function resolveEffectiveApiRateLimit(
+  override: unknown
+): EffectiveRateLimit {
+  return resolveEffectiveRateLimit(override, apiRateLimitDomain);
+}
+
+export function handleApiRateLimitAction(
+  formData: FormData,
+  orgId: string,
+  adminUserId: string
+): Promise<RateLimitActionResult> {
+  return handleRateLimitAction(formData, orgId, adminUserId, apiRateLimitDomain);
+}
@@ -0,0 +1,17 @@
+import {
+  RateLimitSection,
+  type RateLimitWrapperProps,
+} from "./RateLimitSection";
+
+export const API_RATE_LIMIT_INTENT = "set-rate-limit";
+export const API_RATE_LIMIT_SAVED_VALUE = "rate-limit";
+
+export function ApiRateLimitSection(props: RateLimitWrapperProps) {
+  return (
+    <RateLimitSection
+      title="API rate limit"
+      intent={API_RATE_LIMIT_INTENT}
+      {...props}
+    />
+  );
+}
@@ -0,0 +1,55 @@
+import { prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { logger } from "~/services/logger.server";
+import { type Duration } from "~/services/rateLimiter.server";
+import { BATCH_RATE_LIMIT_INTENT } from "./BatchRateLimitSection";
+import {
+  handleRateLimitAction,
+  resolveEffectiveRateLimit,
+  type RateLimitActionResult,
+  type RateLimitDomain,
+} from "./RateLimitSection.server";
+import type { EffectiveRateLimit } from "./RateLimitSection";
+
+export const batchRateLimitDomain: RateLimitDomain = {
+  intent: BATCH_RATE_LIMIT_INTENT,
+  systemDefault: () => ({
+    type: "tokenBucket",
+    refillRate: env.BATCH_RATE_LIMIT_REFILL_RATE,
+    interval: env.BATCH_RATE_LIMIT_REFILL_INTERVAL as Duration,
+    maxTokens: env.BATCH_RATE_LIMIT_MAX,
+  }),
+  apply: async (orgId, next, adminUserId) => {
+    const existing = await prisma.organization.findFirst({
+      where: { id: orgId },
+      select: { batchRateLimitConfig: true },
+    });
+    if (!existing) {
+      throw new Response(null, { status: 404 });
+    }
+    await prisma.organization.update({
+      where: { id: orgId },
+      data: { batchRateLimitConfig: next as any },
+    });
+    logger.info("admin.backOffice.batchRateLimit", {
+      adminUserId,
+      orgId,
+      previous: existing.batchRateLimitConfig,
+      next,
+    });
+  },
+};
+
+export function resolveEffectiveBatchRateLimit(
+  override: unknown
+): EffectiveRateLimit {
+  return resolveEffectiveRateLimit(override, batchRateLimitDomain);
+}
+
+export function handleBatchRateLimitAction(
+  formData: FormData,
+  orgId: string,
+  adminUserId: string
+): Promise<RateLimitActionResult> {
+  return handleRateLimitAction(formData, orgId, adminUserId, batchRateLimitDomain);
+}
@@ -0,0 +1,17 @@
+import {
+  RateLimitSection,
+  type RateLimitWrapperProps,
+} from "./RateLimitSection";
+
+export const BATCH_RATE_LIMIT_INTENT = "set-batch-rate-limit";
+export const BATCH_RATE_LIMIT_SAVED_VALUE = "batch-rate-limit";
+
+export function BatchRateLimitSection(props: RateLimitWrapperProps) {
+  return (
+    <RateLimitSection
+      title="Batch rate limit"
+      intent={BATCH_RATE_LIMIT_INTENT}
+      {...props}
+    />
+  );
+}
@@ -0,0 +1,48 @@
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { logger } from "~/services/logger.server";
+import { MAX_PROJECTS_INTENT } from "./MaxProjectsSection";
+
+const SetMaxProjectsSchema = z.object({
+  intent: z.literal(MAX_PROJECTS_INTENT),
+  // Capped at PostgreSQL INTEGER max (Prisma Int) so oversized input fails
+  // validation cleanly instead of crashing the update.
+  maximumProjectCount: z.coerce.number().int().min(1).max(2_147_483_647),
+});
+
+export type MaxProjectsActionResult =
+  | { ok: true }
+  | { ok: false; errors: Record<string, string[] | undefined> };
+
+export async function handleMaxProjectsAction(
+  formData: FormData,
+  orgId: string,
+  adminUserId: string
+): Promise<MaxProjectsActionResult> {
+  const submission = SetMaxProjectsSchema.safeParse(Object.fromEntries(formData));
+  if (!submission.success) {
+    return { ok: false, errors: submission.error.flatten().fieldErrors };
+  }
+
+  const existing = await prisma.organization.findFirst({
+    where: { id: orgId },
+    select: { maximumProjectCount: true },
+  });
+  if (!existing) {
+    throw new Response(null, { status: 404 });
+  }
+
+  await prisma.organization.update({
+    where: { id: orgId },
+    data: { maximumProjectCount: submission.data.maximumProjectCount },
+  });
+
+  logger.info("admin.backOffice.maxProjects", {
+    adminUserId,
+    orgId,
+    previous: existing.maximumProjectCount,
+    next: submission.data.maximumProjectCount,
+  });
+
+  return { ok: true };
+}
@@ -0,0 +1,115 @@
+import { Form } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { Button } from "~/components/primitives/Buttons";
+import { FormError } from "~/components/primitives/FormError";
+import { Header2 } from "~/components/primitives/Headers";
+import { Input } from "~/components/primitives/Input";
+import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import * as Property from "~/components/primitives/PropertyTable";
+
+export const MAX_PROJECTS_INTENT = "set-max-projects";
+export const MAX_PROJECTS_SAVED_VALUE = "max-projects";
+
+type FieldErrors = Record<string, string[] | undefined> | null;
+
+type Props = {
+  maximumProjectCount: number;
+  errors: FieldErrors;
+  savedJustNow: boolean;
+  isSubmitting: boolean;
+};
+
+export function MaxProjectsSection({
+  maximumProjectCount,
+  errors,
+  savedJustNow,
+  isSubmitting,
+}: Props) {
+  const hasFieldErrors = !!errors && Object.keys(errors).length > 0;
+  const fieldError = (field: string) =>
+    errors && field in errors ? errors[field]?.[0] : undefined;
+
+  const [isEditing, setIsEditing] = useState(hasFieldErrors);
+  const [value, setValue] = useState(String(maximumProjectCount));
+
+  useEffect(() => {
+    if (hasFieldErrors) setIsEditing(true);
+  }, [hasFieldErrors]);
+
+  useEffect(() => {
+    if (savedJustNow && !hasFieldErrors) setIsEditing(false);
+  }, [savedJustNow, hasFieldErrors]);
+
+  return (
+    <section className="flex flex-col gap-3 rounded-md border border-charcoal-700 bg-charcoal-800 p-4">
+      <div className="flex items-center justify-between">
+        <Header2>Maximum projects</Header2>
+        {!isEditing && (
+          <Button
+            variant="tertiary/small"
+            onClick={() => setIsEditing(true)}
+            disabled={isSubmitting}
+          >
+            Edit
+          </Button>
+        )}
+      </div>
+
+      {savedJustNow && (
+        <div className="rounded-md border border-green-600/40 bg-green-600/10 px-3 py-2">
+          <Paragraph variant="small" className="text-green-500">
+            Saved.
+          </Paragraph>
+        </div>
+      )}
+
+      {!isEditing ? (
+        <Property.Table>
+          <Property.Item>
+            <Property.Label>Limit</Property.Label>
+            <Property.Value>
+              {maximumProjectCount.toLocaleString()}
+            </Property.Value>
+          </Property.Item>
+        </Property.Table>
+      ) : (
+        <Form method="post" className="flex flex-col gap-3 pt-2">
+          <input type="hidden" name="intent" value={MAX_PROJECTS_INTENT} />
+          <div className="flex flex-col gap-1">
+            <Label>Maximum projects</Label>
+            <Input
+              name="maximumProjectCount"
+              type="number"
+              min={1}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              required
+            />
+            <FormError>{fieldError("maximumProjectCount")}</FormError>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              type="submit"
+              variant="primary/medium"
+              disabled={isSubmitting || !value.trim()}
+            >
+              Save
+            </Button>
+            <Button
+              type="button"
+              variant="tertiary/medium"
+              onClick={() => {
+                setValue(String(maximumProjectCount));
+                setIsEditing(false);
+              }}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+          </div>
+        </Form>
+      )}
+    </section>
+  );
+}
@@ -0,0 +1,76 @@
+import { z } from "zod";
+import {
+  RateLimitTokenBucketConfig,
+  RateLimiterConfig,
+} from "~/services/authorizationRateLimitMiddleware.server";
+import {
+  parseDurationToMs,
+  type EffectiveRateLimit,
+} from "./RateLimitSection";
+
+export type RateLimitDomain = {
+  intent: string;
+  systemDefault: () => RateLimiterConfig;
+  apply: (
+    orgId: string,
+    next: RateLimitTokenBucketConfig,
+    adminUserId: string
+  ) => Promise<void>;
+};
+
+export function resolveEffectiveRateLimit(
+  override: unknown,
+  domain: RateLimitDomain
+): EffectiveRateLimit {
+  if (override == null) {
+    return { source: "default", config: domain.systemDefault() };
+  }
+  const parsed = RateLimiterConfig.safeParse(override);
+  if (parsed.success) {
+    return { source: "override", config: parsed.data };
+  }
+  // Column holds malformed JSON — fall back silently. Admin must investigate
+  // at the DB level; this UI can't recover it.
+  return { source: "default", config: domain.systemDefault() };
+}
+
+export type RateLimitActionResult =
+  | { ok: true }
+  | { ok: false; errors: Record<string, string[] | undefined> };
+
+export async function handleRateLimitAction(
+  formData: FormData,
+  orgId: string,
+  adminUserId: string,
+  domain: RateLimitDomain
+): Promise<RateLimitActionResult> {
+  const schema = z.object({
+    intent: z.literal(domain.intent),
+    refillRate: z.coerce.number().int().min(1),
+    interval: z
+      .string()
+      .trim()
+      .refine((v) => parseDurationToMs(v) > 0, {
+        message: "Must be a duration like 10s, 1m, 500ms.",
+      }),
+    maxTokens: z.coerce.number().int().min(1),
+  });
+
+  const submission = schema.safeParse(Object.fromEntries(formData));
+  if (!submission.success) {
+    return { ok: false, errors: submission.error.flatten().fieldErrors };
+  }
+
+  const built = RateLimitTokenBucketConfig.safeParse({
+    type: "tokenBucket",
+    refillRate: submission.data.refillRate,
+    interval: submission.data.interval,
+    maxTokens: submission.data.maxTokens,
+  });
+  if (!built.success) {
+    return { ok: false, errors: built.error.flatten().fieldErrors };
+  }
+
+  await domain.apply(orgId, built.data, adminUserId);
+  return { ok: true };
+}
@@ -0,0 +1,306 @@
+import { Form } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { Button } from "~/components/primitives/Buttons";
+import { FormError } from "~/components/primitives/FormError";
+import { Header2 } from "~/components/primitives/Headers";
+import { Input } from "~/components/primitives/Input";
+import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import * as Property from "~/components/primitives/PropertyTable";
+
+// Local shape mirrors the server-side discriminated union just enough for this
+// view. Decoupled from the .server module so the component stays client-safe.
+// Duration fields are always suffixed strings — the server's DurationSchema
+// rejects anything else, so non-string overrides fall back to the default.
+export type RateLimitConfig =
+  | {
+      type: "tokenBucket";
+      refillRate: number;
+      interval: string;
+      maxTokens: number;
+    }
+  | {
+      type: "fixedWindow" | "slidingWindow";
+      window: string;
+      tokens: number;
+    };
+
+export type EffectiveRateLimit = {
+  source: "override" | "default";
+  config: RateLimitConfig;
+};
+
+export type FieldErrors = Record<string, string[] | undefined> | null;
+
+// Props shared by every per-domain wrapper (Api / Batch / future ones).
+export type RateLimitWrapperProps = {
+  effective: EffectiveRateLimit;
+  errors: FieldErrors;
+  savedJustNow: boolean;
+  isSubmitting: boolean;
+};
+
+type Props = RateLimitWrapperProps & {
+  title: string;
+  intent: string;
+};
+
+export function RateLimitSection({
+  title,
+  intent,
+  effective,
+  errors,
+  savedJustNow,
+  isSubmitting,
+}: Props) {
+  const hasFieldErrors = !!errors && Object.keys(errors).length > 0;
+  const fieldError = (field: string) =>
+    errors && field in errors ? errors[field]?.[0] : undefined;
+
+  const current =
+    effective.config.type === "tokenBucket" ? effective.config : null;
+
+  const [isEditing, setIsEditing] = useState(hasFieldErrors);
+  const [refillRate, setRefillRate] = useState(
+    current ? String(current.refillRate) : ""
+  );
+  const [intervalStr, setIntervalStr] = useState(
+    current ? String(current.interval) : ""
+  );
+  const [maxTokens, setMaxTokens] = useState(
+    current ? String(current.maxTokens) : ""
+  );
+
+  useEffect(() => {
+    if (hasFieldErrors) setIsEditing(true);
+  }, [hasFieldErrors]);
+
+  useEffect(() => {
+    if (savedJustNow && !hasFieldErrors) setIsEditing(false);
+  }, [savedJustNow, hasFieldErrors]);
+
+  const currentDescription = current
+    ? describeRateLimit(
+        current.refillRate,
+        parseDurationToMs(String(current.interval)),
+        current.maxTokens
+      )
+    : null;
+
+  const previewDescription = describeRateLimit(
+    Number(refillRate) || 0,
+    parseDurationToMs(intervalStr),
+    Number(maxTokens) || 0
+  );
+
+  const cancelEdit = () => {
+    setRefillRate(current ? String(current.refillRate) : "");
+    setIntervalStr(current ? String(current.interval) : "");
+    setMaxTokens(current ? String(current.maxTokens) : "");
+    setIsEditing(false);
+  };
+
+  return (
+    <section className="flex flex-col gap-3 rounded-md border border-charcoal-700 bg-charcoal-800 p-4">
+      <div className="flex items-center justify-between">
+        <Header2>{title}</Header2>
+        {!isEditing && (
+          <Button
+            variant="tertiary/small"
+            onClick={() => setIsEditing(true)}
+            disabled={isSubmitting || effective.config.type !== "tokenBucket"}
+          >
+            Edit
+          </Button>
+        )}
+      </div>
+
+      {savedJustNow && (
+        <div className="rounded-md border border-green-600/40 bg-green-600/10 px-3 py-2">
+          <Paragraph variant="small" className="text-green-500">
+            Saved.
+          </Paragraph>
+        </div>
+      )}
+
+      <Paragraph variant="small">
+        Status:{" "}
+        {effective.source === "override"
+          ? "Custom override active."
+          : "Using system default."}
+      </Paragraph>
+
+      {!isEditing ? (
+        <>
+          <Property.Table>
+            {effective.config.type === "tokenBucket" ? (
+              currentDescription ? (
+                <>
+                  <Property.Item>
+                    <Property.Label>Sustained rate</Property.Label>
+                    <Property.Value>
+                      {currentDescription.sustained}
+                    </Property.Value>
+                  </Property.Item>
+                  <Property.Item>
+                    <Property.Label>Burst allowance</Property.Label>
+                    <Property.Value>{currentDescription.burst}</Property.Value>
+                  </Property.Item>
+                </>
+              ) : (
+                <Property.Item>
+                  <Property.Value>
+                    Invalid interval on the stored config.
+                  </Property.Value>
+                </Property.Item>
+              )
+            ) : (
+              <>
+                <Property.Item>
+                  <Property.Label>Type</Property.Label>
+                  <Property.Value>{effective.config.type}</Property.Value>
+                </Property.Item>
+                <Property.Item>
+                  <Property.Label>Window</Property.Label>
+                  <Property.Value>{String(effective.config.window)}</Property.Value>
+                </Property.Item>
+                <Property.Item>
+                  <Property.Label>Tokens</Property.Label>
+                  <Property.Value>
+                    {effective.config.tokens.toLocaleString()}
+                  </Property.Value>
+                </Property.Item>
+              </>
+            )}
+          </Property.Table>
+          {effective.config.type !== "tokenBucket" && (
+            <Paragraph variant="small" className="text-amber-500">
+              This override is a {effective.config.type} limit and can't be
+              edited from this form. Change it in the database directly.
+            </Paragraph>
+          )}
+        </>
+      ) : (
+        <Form method="post" className="flex flex-col gap-3 pt-2">
+          <input type="hidden" name="intent" value={intent} />
+
+          <div className="flex flex-col gap-1">
+            <Label>Refill rate (tokens per interval)</Label>
+            <Input
+              name="refillRate"
+              type="number"
+              min={1}
+              value={refillRate}
+              onChange={(e) => setRefillRate(e.target.value)}
+              required
+            />
+            <FormError>{fieldError("refillRate")}</FormError>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <Label>Interval (e.g. 10s, 1m)</Label>
+            <Input
+              name="interval"
+              type="text"
+              value={intervalStr}
+              onChange={(e) => setIntervalStr(e.target.value)}
+              required
+            />
+            <FormError>{fieldError("interval")}</FormError>
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <Label>Max tokens (burst allowance)</Label>
+            <Input
+              name="maxTokens"
+              type="number"
+              min={1}
+              value={maxTokens}
+              onChange={(e) => setMaxTokens(e.target.value)}
+              required
+            />
+            <FormError>{fieldError("maxTokens")}</FormError>
+          </div>
+
+          <Paragraph variant="small" className="text-text-dimmed">
+            {previewDescription
+              ? `Preview: ${previewDescription.sustained} · ${previewDescription.burst}.`
+              : "Preview: enter valid values to see the effective limit."}
+          </Paragraph>
+
+          <div className="flex items-center gap-2">
+            <Button
+              type="submit"
+              variant="primary/medium"
+              disabled={
+                isSubmitting ||
+                !refillRate.trim() ||
+                !intervalStr.trim() ||
+                !maxTokens.trim()
+              }
+            >
+              Save
+            </Button>
+            <Button
+              type="button"
+              variant="tertiary/medium"
+              onClick={cancelEdit}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+          </div>
+        </Form>
+      )}
+    </section>
+  );
+}
+
+export function parseDurationToMs(duration: string): number {
+  const match = duration.trim().match(/^(\d+)\s*(ms|s|m|h|d)$/);
+  if (!match) return 0;
+  const value = parseInt(match[1], 10);
+  switch (match[2]) {
+    case "ms":
+      return value;
+    case "s":
+      return value * 1_000;
+    case "m":
+      return value * 60_000;
+    case "h":
+      return value * 3_600_000;
+    case "d":
+      return value * 86_400_000;
+    default:
+      return 0;
+  }
+}
+
+function describeRateLimit(
+  refillRate: number,
+  intervalMs: number,
+  maxTokens: number
+): { sustained: string; burst: string } | null {
+  if (refillRate <= 0 || intervalMs <= 0 || maxTokens <= 0) return null;
+  const perMin = (refillRate * 60_000) / intervalMs;
+  let sustained: string;
+  if (perMin >= 1) {
+    sustained = `${formatRateValue(perMin)} requests per minute`;
+  } else {
+    const perHour = perMin * 60;
+    if (perHour >= 1) {
+      sustained = `${formatRateValue(perHour)} requests per hour`;
+    } else {
+      const perDay = perHour * 24;
+      sustained = `${formatRateValue(perDay)} requests per day`;
+    }
+  }
+  return {
+    sustained,
+    burst: `${maxTokens.toLocaleString()} request burst allowance`,
+  };
+}
+
+function formatRateValue(value: number): string {
+  return value >= 10 ? Math.round(value).toLocaleString() : value.toFixed(1);
+}
@@ -1,102 +1,44 @@
-import { Form, useNavigation, useSearchParams } from "@remix-run/react";
+import { useNavigation, useSearchParams } from "@remix-run/react";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { useEffect, useState } from "react";
-import { redirect, typedjson, useTypedActionData, useTypedLoaderData } from "remix-typedjson";
-import { z } from "zod";
-import { Button, LinkButton } from "~/components/primitives/Buttons";
-import { CopyableText } from "~/components/primitives/CopyableText";
-import { FormError } from "~/components/primitives/FormError";
-import { Header1, Header2 } from "~/components/primitives/Headers";
-import { Input } from "~/components/primitives/Input";
-import { Label } from "~/components/primitives/Label";
-import { Paragraph } from "~/components/primitives/Paragraph";
-import * as Property from "~/components/primitives/PropertyTable";
-import { prisma } from "~/db.server";
-import { env } from "~/env.server";
+import { useEffect } from "react";
 import {
-  RateLimitTokenBucketConfig,
-  RateLimiterConfig,
-} from "~/services/authorizationRateLimitMiddleware.server";
-import { logger } from "~/services/logger.server";
-import { type Duration } from "~/services/rateLimiter.server";
+  redirect,
+  typedjson,
+  useTypedActionData,
+  useTypedLoaderData,
+} from "remix-typedjson";
+import {
+  API_RATE_LIMIT_INTENT,
+  API_RATE_LIMIT_SAVED_VALUE,
+  ApiRateLimitSection,
+} from "~/components/admin/backOffice/ApiRateLimitSection";
+import {
+  handleApiRateLimitAction,
+  resolveEffectiveApiRateLimit,
+} from "~/components/admin/backOffice/ApiRateLimitSection.server";
+import {
+  BATCH_RATE_LIMIT_INTENT,
+  BATCH_RATE_LIMIT_SAVED_VALUE,
+  BatchRateLimitSection,
+} from "~/components/admin/backOffice/BatchRateLimitSection";
+import {
+  handleBatchRateLimitAction,
+  resolveEffectiveBatchRateLimit,
+} from "~/components/admin/backOffice/BatchRateLimitSection.server";
+import {
+  MAX_PROJECTS_INTENT,
+  MAX_PROJECTS_SAVED_VALUE,
+  MaxProjectsSection,
+} from "~/components/admin/backOffice/MaxProjectsSection";
+import { handleMaxProjectsAction } from "~/components/admin/backOffice/MaxProjectsSection.server";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { CopyableText } from "~/components/primitives/CopyableText";
+import { Header1 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { prisma } from "~/db.server";
 import { requireUser } from "~/services/session.server";

 const SAVED_QUERY_KEY = "saved";
-const SAVED_QUERY_VALUE = "1";
-
-type EffectiveRateLimit = {
-  source: "override" | "default";
-  config: RateLimiterConfig;
-};
-
-function systemDefaultRateLimit(): RateLimiterConfig {
-  return {
-    type: "tokenBucket",
-    refillRate: env.API_RATE_LIMIT_REFILL_RATE,
-    interval: env.API_RATE_LIMIT_REFILL_INTERVAL as Duration,
-    maxTokens: env.API_RATE_LIMIT_MAX,
-  };
-}
-
-function resolveEffectiveRateLimit(override: unknown): EffectiveRateLimit {
-  if (override == null) {
-    return { source: "default", config: systemDefaultRateLimit() };
-  }
-  const parsed = RateLimiterConfig.safeParse(override);
-  if (parsed.success) {
-    return { source: "override", config: parsed.data };
-  }
-  // Column holds malformed JSON — fall back silently. Admin must investigate
-  // at the DB level; this UI can't recover it.
-  return { source: "default", config: systemDefaultRateLimit() };
-}
-
-function parseDurationToMs(duration: string): number {
-  const match = duration.trim().match(/^(\d+)\s*(ms|s|m|h|d)$/);
-  if (!match) return 0;
-  const value = parseInt(match[1], 10);
-  switch (match[2]) {
-    case "ms":
-      return value;
-    case "s":
-      return value * 1_000;
-    case "m":
-      return value * 60_000;
-    case "h":
-      return value * 3_600_000;
-    case "d":
-      return value * 86_400_000;
-    default:
-      return 0;
-  }
-}
-
-function describeRateLimit(
-  refillRate: number,
-  intervalMs: number,
-  maxTokens: number
-): { sustained: string; burst: string } | null {
-  if (refillRate <= 0 || intervalMs <= 0 || maxTokens <= 0) return null;
-  const perMin = (refillRate * 60_000) / intervalMs;
-  let sustained: string;
-  if (perMin >= 1) {
-    sustained = `${Math.round(perMin).toLocaleString()} requests per minute`;
-  } else {
-    const perHour = perMin * 60;
-    if (perHour >= 1) {
-      sustained = `${Math.round(perHour).toLocaleString()} requests per hour`;
-    } else {
-      const perDay = perHour * 24;
-      const formatted =
-        perDay >= 10 ? Math.round(perDay).toLocaleString() : perDay.toFixed(1);
-      sustained = `${formatted} requests per day`;
-    }
-  }
-  return {
-    sustained,
-    burst: `${maxTokens.toLocaleString()} request burst allowance`,
-  };
-}

 export async function loader({ request, params }: LoaderFunctionArgs) {
  const user = await requireUser(request);
@@ -117,6 +59,8 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
      title: true,
      createdAt: true,
      apiRateLimiterConfig: true,
+      batchRateLimitConfig: true,
+      maximumProjectCount: true,
    },
  });

@@ -124,26 +68,14 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
    throw new Response(null, { status: 404 });
  }

-  const effective = resolveEffectiveRateLimit(org.apiRateLimiterConfig);
+  const apiEffective = resolveEffectiveApiRateLimit(org.apiRateLimiterConfig);
+  const batchEffective = resolveEffectiveBatchRateLimit(
+    org.batchRateLimitConfig
+  );

-  return typedjson({
-    org,
-    effective,
-  });
+  return typedjson({ org, apiEffective, batchEffective });
 }

-const SetRateLimitSchema = z.object({
-  intent: z.literal("set-rate-limit"),
-  refillRate: z.coerce.number().int().min(1),
-  interval: z
-    .string()
-    .trim()
-    .refine((v) => parseDurationToMs(v) > 0, {
-      message: "Must be a duration like 10s, 1m, 500ms.",
-    }),
-  maxTokens: z.coerce.number().int().min(1),
-});
-
 export async function action({ request, params }: ActionFunctionArgs) {
  const user = await requireUser(request);
  if (!user.admin) {
@@ -156,100 +88,84 @@ export async function action({ request, params }: ActionFunctionArgs) {
  }

  const formData = await request.formData();
-  const submission = SetRateLimitSchema.safeParse(Object.fromEntries(formData));
-  if (!submission.success) {
-    return typedjson(
-      { errors: submission.error.flatten().fieldErrors },
-      { status: 400 }
+  const intent = formData.get("intent");
+
+  if (intent === MAX_PROJECTS_INTENT) {
+    const result = await handleMaxProjectsAction(formData, orgId, user.id);
+    if (!result.ok) {
+      return typedjson(
+        { section: MAX_PROJECTS_SAVED_VALUE, errors: result.errors },
+        { status: 400 }
+      );
+    }
+    return redirect(
+      `/admin/back-office/orgs/${orgId}?${SAVED_QUERY_KEY}=${MAX_PROJECTS_SAVED_VALUE}`
    );
  }

-  const existing = await prisma.organization.findFirst({
-    where: { id: orgId },
-    select: { apiRateLimiterConfig: true },
-  });
-  if (!existing) {
-    throw new Response(null, { status: 404 });
-  }
-
-  const built = RateLimitTokenBucketConfig.safeParse({
-    type: "tokenBucket",
-    refillRate: submission.data.refillRate,
-    interval: submission.data.interval,
-    maxTokens: submission.data.maxTokens,
-  });
-  if (!built.success) {
-    return typedjson(
-      { errors: built.error.flatten().fieldErrors },
-      { status: 400 }
+  if (intent === API_RATE_LIMIT_INTENT) {
+    const result = await handleApiRateLimitAction(formData, orgId, user.id);
+    if (!result.ok) {
+      return typedjson(
+        { section: API_RATE_LIMIT_SAVED_VALUE, errors: result.errors },
+        { status: 400 }
+      );
+    }
+    return redirect(
+      `/admin/back-office/orgs/${orgId}?${SAVED_QUERY_KEY}=${API_RATE_LIMIT_SAVED_VALUE}`
    );
  }
-  const next = built.data;

-  await prisma.organization.update({
-    where: { id: orgId },
-    data: { apiRateLimiterConfig: next as any },
-  });
+  if (intent === BATCH_RATE_LIMIT_INTENT) {
+    const result = await handleBatchRateLimitAction(formData, orgId, user.id);
+    if (!result.ok) {
+      return typedjson(
+        { section: BATCH_RATE_LIMIT_SAVED_VALUE, errors: result.errors },
+        { status: 400 }
+      );
+    }
+    return redirect(
+      `/admin/back-office/orgs/${orgId}?${SAVED_QUERY_KEY}=${BATCH_RATE_LIMIT_SAVED_VALUE}`
+    );
+  }

-  logger.info("admin.backOffice.rateLimit", {
-    adminUserId: user.id,
-    orgId,
-    previous: existing.apiRateLimiterConfig,
-    next,
-  });
-
-  return redirect(
-    `/admin/back-office/orgs/${orgId}?${SAVED_QUERY_KEY}=${SAVED_QUERY_VALUE}`
+  return typedjson(
+    { section: null, errors: { intent: ["Unknown intent."] } },
+    { status: 400 }
  );
 }

 export default function BackOfficeOrgPage() {
-  const { org, effective } = useTypedLoaderData<typeof loader>();
+  const { org, apiEffective, batchEffective } =
+    useTypedLoaderData<typeof loader>();
  const actionData = useTypedActionData<typeof action>();
  const navigation = useNavigation();
-  const isSubmitting = navigation.state !== "idle";
+  const submittingIntent = navigation.formData?.get("intent");
+  const isSubmittingApi =
+    navigation.state !== "idle" && submittingIntent === API_RATE_LIMIT_INTENT;
+  const isSubmittingBatch =
+    navigation.state !== "idle" && submittingIntent === BATCH_RATE_LIMIT_INTENT;
+  const isSubmittingMaxProjects =
+    navigation.state !== "idle" && submittingIntent === MAX_PROJECTS_INTENT;

+  const errorSection =
+    actionData && "section" in actionData ? actionData.section : null;
  const errors =
-    actionData && "errors" in actionData ? actionData.errors : null;
-  const hasFieldErrors =
-    !!errors && typeof errors === "object" && Object.keys(errors).length > 0;
-  const fieldError = (field: string) =>
-    errors && typeof errors === "object" && field in errors
-      ? (errors as Record<string, string[] | undefined>)[field]?.[0]
-      : undefined;
-
-  const current =
-    effective.config.type === "tokenBucket" ? effective.config : null;
-
-  const [isEditing, setIsEditing] = useState(false);
-  const [refillRate, setRefillRate] = useState(
-    current ? String(current.refillRate) : ""
-  );
-  const [intervalStr, setIntervalStr] = useState(
-    current ? String(current.interval) : ""
-  );
-  const [maxTokens, setMaxTokens] = useState(
-    current ? String(current.maxTokens) : ""
-  );
+    actionData && "errors" in actionData
+      ? (actionData.errors as Record<string, string[] | undefined>)
+      : null;

  const [searchParams, setSearchParams] = useSearchParams();
-  const savedJustNow = searchParams.get(SAVED_QUERY_KEY) === SAVED_QUERY_VALUE;
-
-  // If a submit comes back with validation errors, re-open edit mode so the
-  // admin can see and correct them without clicking Edit again.
-  useEffect(() => {
-    if (hasFieldErrors) setIsEditing(true);
-  }, [hasFieldErrors]);
-
-  // On successful save, drop back to view mode (the component stays mounted
-  // across the same-route redirect, so `isEditing` wouldn't reset on its own).
-  useEffect(() => {
-    if (savedJustNow) setIsEditing(false);
-  }, [savedJustNow]);
+  const savedSectionRaw = searchParams.get(SAVED_QUERY_KEY);
+  // If the action just returned errors for the same section, hide the
+  // "Saved." banner so it doesn't render alongside field errors. Suppressing
+  // here propagates to every read site (auto-dismiss + JSX comparisons).
+  const savedSection =
+    errors && errorSection === savedSectionRaw ? null : savedSectionRaw;

  // Auto-dismiss the "saved" banner after a few seconds.
  useEffect(() => {
-    if (!savedJustNow) return;
+    if (!savedSection) return;
    const t = setTimeout(() => {
      setSearchParams(
        (prev) => {
@@ -260,28 +176,7 @@ export default function BackOfficeOrgPage() {
      );
    }, 3000);
    return () => clearTimeout(t);
-  }, [savedJustNow, setSearchParams]);
-
-  const currentDescription = current
-    ? describeRateLimit(
-        current.refillRate,
-        parseDurationToMs(String(current.interval)),
-        current.maxTokens
-      )
-    : null;
-
-  const previewDescription = describeRateLimit(
-    Number(refillRate) || 0,
-    parseDurationToMs(intervalStr),
-    Number(maxTokens) || 0
-  );
-
-  const cancelEdit = () => {
-    setRefillRate(current ? String(current.refillRate) : "");
-    setIntervalStr(current ? String(current.interval) : "");
-    setMaxTokens(current ? String(current.maxTokens) : "");
-    setIsEditing(false);
-  };
+  }, [savedSection, setSearchParams]);

  return (
    <div className="flex flex-col gap-6 py-4">
@@ -297,156 +192,26 @@ export default function BackOfficeOrgPage() {
        </LinkButton>
      </div>

-      <section className="flex flex-col gap-3 rounded-md border border-charcoal-700 bg-charcoal-800 p-4">
-        <div className="flex items-center justify-between">
-          <Header2>API rate limit</Header2>
-          {!isEditing && (
-            <Button
-              variant="tertiary/small"
-              onClick={() => setIsEditing(true)}
-              disabled={isSubmitting || effective.config.type !== "tokenBucket"}
-            >
-              Edit
-            </Button>
-          )}
-        </div>
+      <ApiRateLimitSection
+        effective={apiEffective}
+        errors={errorSection === API_RATE_LIMIT_SAVED_VALUE ? errors : null}
+        savedJustNow={savedSection === API_RATE_LIMIT_SAVED_VALUE}
+        isSubmitting={isSubmittingApi}
+      />

-        {savedJustNow && (
-          <div className="rounded-md border border-green-600/40 bg-green-600/10 px-3 py-2">
-            <Paragraph variant="small" className="text-green-500">
-              Rate limit saved.
-            </Paragraph>
-          </div>
-        )}
+      <BatchRateLimitSection
+        effective={batchEffective}
+        errors={errorSection === BATCH_RATE_LIMIT_SAVED_VALUE ? errors : null}
+        savedJustNow={savedSection === BATCH_RATE_LIMIT_SAVED_VALUE}
+        isSubmitting={isSubmittingBatch}
+      />

-        <Paragraph variant="small">
-          Status:{" "}
-          {effective.source === "override"
-            ? "Custom override active."
-            : "Using system default."}
-        </Paragraph>
-
-        {!isEditing ? (
-          <>
-            <Property.Table>
-              {effective.config.type === "tokenBucket" ? (
-                currentDescription ? (
-                  <>
-                    <Property.Item>
-                      <Property.Label>Sustained rate</Property.Label>
-                      <Property.Value>{currentDescription.sustained}</Property.Value>
-                    </Property.Item>
-                    <Property.Item>
-                      <Property.Label>Burst allowance</Property.Label>
-                      <Property.Value>{currentDescription.burst}</Property.Value>
-                    </Property.Item>
-                  </>
-                ) : (
-                  <Property.Item>
-                    <Property.Value>
-                      Invalid interval on the stored config.
-                    </Property.Value>
-                  </Property.Item>
-                )
-              ) : (
-                <>
-                  <Property.Item>
-                    <Property.Label>Type</Property.Label>
-                    <Property.Value>{effective.config.type}</Property.Value>
-                  </Property.Item>
-                  <Property.Item>
-                    <Property.Label>Window</Property.Label>
-                    <Property.Value>{String(effective.config.window)}</Property.Value>
-                  </Property.Item>
-                  <Property.Item>
-                    <Property.Label>Tokens</Property.Label>
-                    <Property.Value>
-                      {effective.config.tokens.toLocaleString()}
-                    </Property.Value>
-                  </Property.Item>
-                </>
-              )}
-            </Property.Table>
-            {effective.config.type !== "tokenBucket" && (
-              <Paragraph variant="small" className="text-amber-500">
-                This override is a {effective.config.type} limit and can't be
-                edited from this form. Change it in the database directly.
-              </Paragraph>
-            )}
-          </>
-        ) : (
-          <Form method="post" className="flex flex-col gap-3 pt-2">
-            <input type="hidden" name="intent" value="set-rate-limit" />
-
-            <div className="flex flex-col gap-1">
-              <Label>Refill rate (tokens per interval)</Label>
-              <Input
-                name="refillRate"
-                type="number"
-                min={1}
-                value={refillRate}
-                onChange={(e) => setRefillRate(e.target.value)}
-                required
-              />
-              <FormError>{fieldError("refillRate")}</FormError>
-            </div>
-
-            <div className="flex flex-col gap-1">
-              <Label>Interval (e.g. 10s, 1m)</Label>
-              <Input
-                name="interval"
-                type="text"
-                value={intervalStr}
-                onChange={(e) => setIntervalStr(e.target.value)}
-                required
-              />
-              <FormError>{fieldError("interval")}</FormError>
-            </div>
-
-            <div className="flex flex-col gap-1">
-              <Label>Max tokens (burst allowance)</Label>
-              <Input
-                name="maxTokens"
-                type="number"
-                min={1}
-                value={maxTokens}
-                onChange={(e) => setMaxTokens(e.target.value)}
-                required
-              />
-              <FormError>{fieldError("maxTokens")}</FormError>
-            </div>
-
-            <Paragraph variant="small" className="text-text-dimmed">
-              {previewDescription
-                ? `Preview: ${previewDescription.sustained} · ${previewDescription.burst}.`
-                : "Preview: enter valid values to see the effective limit."}
-            </Paragraph>
-
-            <div className="flex items-center gap-2">
-              <Button
-                type="submit"
-                variant="primary/medium"
-                disabled={
-                  isSubmitting ||
-                  !refillRate.trim() ||
-                  !intervalStr.trim() ||
-                  !maxTokens.trim()
-                }
-              >
-                Save
-              </Button>
-              <Button
-                type="button"
-                variant="tertiary/medium"
-                onClick={cancelEdit}
-                disabled={isSubmitting}
-              >
-                Cancel
-              </Button>
-            </div>
-          </Form>
-        )}
-      </section>
+      <MaxProjectsSection
+        maximumProjectCount={org.maximumProjectCount}
+        errors={errorSection === MAX_PROJECTS_SAVED_VALUE ? errors : null}
+        savedJustNow={savedSection === MAX_PROJECTS_SAVED_VALUE}
+        isSubmitting={isSubmittingMaxProjects}
+      />
    </div>
  );
 }