refactor: reorganizar importaciones y eliminar componentes obsoletos en las páginas de proformas y facturas

2026-09-04 11:53:59 +02:00 · 2026-09-04 11:53:59 +02:00 · 85d2f11bde
commit 85d2f11bde
parent 3eb7c37a7b
17 changed files with 287 additions and 321 deletions
--- a/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx
+++ b/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx
@ -1,4 +1,5 @@
-import { Card, CardContent, RdxBadge } from "@repo/shadcn-ui/components";
+import { RdxBadge } from "@repo/rdx-ui/components";
+import { Card, CardContent } from "@repo/shadcn-ui/components";
 import { CalendarClockIcon } from "lucide-react";

 import { useTranslation } from "../../../../i18n";
--- a/modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx
+++ b/modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx
@ -1,6 +1,6 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxPageContainer } from "@repo/rdx-ui/components";
-import { Button, Card, CardContent, RdxBadge } from "@repo/shadcn-ui/components";
+import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
+import { Button, Card, CardContent } from "@repo/shadcn-ui/components";
 import { PlusIcon } from "lucide-react";

 import { useTranslation } from "../../../../i18n";
--- a/modules/customer-invoices/src/web/customer-invoice-routes.tsx
+++ b/modules/customer-invoices/src/web/customer-invoice-routes.tsx
@ -2,10 +2,6 @@ import type { ModuleClientParams } from "@erp/core/client";
 import { lazy } from "react";
 import { Outlet, type RouteObject } from "react-router-dom";

-const RecurringProformaLayout = lazy(() =>
-  import("./recurring-proformas/shared/ui").then((m) => ({ default: m.RecurringProformaLayout }))
-);
-
 const ProformasListPage = lazy(() =>
  import("./proformas/list").then((m) => ({ default: m.ListProformasPage }))
 );
@ -42,10 +38,6 @@ const RecurringProformaDetailPage = lazy(() =>
  import("./recurring-proformas").then((m) => ({ default: m.RecurringProformaDetailPage }))
 );

-const IssuedInvoicesLayout = lazy(() =>
-  import("./issued-invoices/shared/ui").then((m) => ({ default: m.IssuedInvoicesLayout }))
-);
-
 const IssuedInvoiceListPage = lazy(() =>
  import("./issued-invoices/list").then((m) => ({ default: m.ListIssuedInvoicesPage }))
 );
@ -119,11 +111,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
        layout: "app-sidebar",
        protected: true,
      },
-      element: (
-        <RecurringProformaLayout>
-          <RecurringProformasListPage />
-        </RecurringProformaLayout>
-      ),
+      element: <RecurringProformasListPage />,
    },
    {
      path: "recurring-proformas/archived",
@ -131,11 +119,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
        layout: "app-sidebar",
        protected: true,
      },
-      element: (
-        <RecurringProformaLayout>
-          <RecurringProformasListPage />
-        </RecurringProformaLayout>
-      ),
+      element: <RecurringProformasListPage />,
    },
    {
      path: "recurring-proformas/create",
@ -143,11 +127,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
        layout: "app-fullscreen",
        protected: true,
      },
-      element: (
-        <RecurringProformaLayout>
-          <RecurringProformaCreatePage />
-        </RecurringProformaLayout>
-      ),
+      element: <RecurringProformaCreatePage />,
    },
    {
      path: "recurring-proformas/:recurring_proforma_id",
@ -155,11 +135,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
        layout: "app-fullscreen",
        protected: true,
      },
-      element: (
-        <RecurringProformaLayout>
-          <RecurringProformaDetailPage />
-        </RecurringProformaLayout>
-      ),
+      element: <RecurringProformaDetailPage />,
    },

    {
@ -168,11 +144,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
        layout: "app-sidebar",
        protected: true,
      },
-      element: (
-        <IssuedInvoicesLayout>
-          <Outlet context={params} />
-        </IssuedInvoicesLayout>
-      ),
+      element: <Outlet context={params} />,
      children: [
        { path: "", index: true, element: <IssuedInvoiceListPage /> }, // index
        { path: "list", element: <IssuedInvoiceListPage /> },
@ -196,11 +168,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
        layout: "app-fullscreen",
        protected: true,
      },
-      element: (
-        <IssuedInvoicesLayout>
-          <IssuedInvoiceDetailPage />
-        </IssuedInvoicesLayout>
-      ),
+      element: <IssuedInvoiceDetailPage />,
    },
    {
      path: "settings/billing/verifactu",
--- a/modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-detail-content.tsx
+++ b/modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-detail-content.tsx
@ -10,7 +10,7 @@ export const IssuedInvoiceDetailContent = ({
  inspector,
 }: IssuedInvoiceDetailContentProps) => {
  return (
-    <div className="min-h-0 flex-1 overflow-auto lg:overflow-hidden">
+    <div className="min-h-full lg:h-full lg:min-h-0 lg:overflow-hidden">
      <div className="grid min-h-full grid-cols-1 lg:h-full lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_340px] lg:overflow-hidden xl:grid-cols-[minmax(0,1fr)_380px]">
        {documentPane}
        {inspector}
--- a/modules/customer-invoices/src/web/issued-invoices/detail/ui/pages/issued-invoice-detail-page.tsx
+++ b/modules/customer-invoices/src/web/issued-invoices/detail/ui/pages/issued-invoice-detail-page.tsx
@ -1,4 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
+import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";

 import { useTranslation } from "../../../../i18n";
 import { useIssuedInvoiceDetailPageController } from "../../controllers";
@ -20,8 +21,8 @@ export const IssuedInvoiceDetailPage = () => {

  if (ctrl.state.pageError) {
    return (
-      <div className="p-4 sm:p-6">
-        <div className="mx-auto w-full max-w-3xl">
+      <RdxPageFrame>
+        <RdxPageContainer width="content">
          <PageErrorState
            description={ctrl.state.pageError.description}
            primaryAction={ctrl.state.pageError.primaryAction}
@ -30,15 +31,15 @@ export const IssuedInvoiceDetailPage = () => {
            title={ctrl.state.pageError.title}
            variant={ctrl.state.pageError.variant}
          />
-        </div>
-      </div>
+        </RdxPageContainer>
+      </RdxPageFrame>
    );
  }

  if (!(ctrl.header && ctrl.document && ctrl.general)) {
    return (
-      <div className="p-4 sm:p-6">
-        <div className="mx-auto w-full max-w-3xl">
+      <RdxPageFrame>
+        <RdxPageContainer width="content">
          <PageErrorState
            description={t("pages.issued_invoices.detail.page_error.inconsistent.description")}
            secondaryAction={{
@ -48,20 +49,23 @@ export const IssuedInvoiceDetailPage = () => {
            title={t("pages.issued_invoices.detail.page_error.unknown.title")}
            variant="unknown"
          />
-        </div>
-      </div>
+        </RdxPageContainer>
+      </RdxPageFrame>
    );
  }

  return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden">
-      <IssuedInvoiceDetailHeader
-        actions={ctrl.actions}
-        header={ctrl.header}
-        onBack={ctrl.navigation.navigateBack}
-        onExecuteAction={ctrl.handlers.executeAction}
-      />
-
+    <RdxPageFrame
+      contentClassName="lg:overflow-hidden"
+      header={
+        <IssuedInvoiceDetailHeader
+          actions={ctrl.actions}
+          header={ctrl.header}
+          onBack={ctrl.navigation.navigateBack}
+          onExecuteAction={ctrl.handlers.executeAction}
+        />
+      }
+    >
      <IssuedInvoiceDetailContent
        documentPane={
          <IssuedInvoiceDocumentPane
@ -80,6 +84,6 @@ export const IssuedInvoiceDetailPage = () => {
          />
        }
      />
-    </div>
+    </RdxPageFrame>
  );
 };
--- a/modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-status-segmented-filter.tsx
+++ b/modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-status-segmented-filter.tsx
@ -1,3 +1,4 @@
+import { RdxBadge } from "@repo/rdx-ui/components";
 import { ToggleGroup, ToggleGroupItem } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import {
--- a/modules/customer-invoices/src/web/issued-invoices/list/ui/components/verifactu-status-badge.tsx
+++ b/modules/customer-invoices/src/web/issued-invoices/list/ui/components/verifactu-status-badge.tsx
@ -1,3 +1,4 @@
+import { RdxBadge } from "@repo/rdx-ui/components";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";

--- a/modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx
+++ b/modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx
@ -1,6 +1,6 @@
 import { ErrorAlert, PageErrorState, PageHeader, SimpleSearchInput } from "@erp/core/components";
 import { useReturnToNavigation } from "@erp/core/hooks";
-import { LogoVerifactu } from "@repo/rdx-ui/components";
+import { LogoVerifactu, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
 import { Alert, AlertDescription, AlertTitle, Button } from "@repo/shadcn-ui/components";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
@ -58,8 +58,8 @@ export const ListIssuedInvoicesPage = () => {

  if (hasBlockingError && pageError) {
    return (
-      <div className="p-4 sm:p-6">
-        <div className="mx-auto w-full max-w-3xl">
+      <RdxPageFrame>
+        <RdxPageContainer width="content">
          <PageErrorState
            description={pageError.description}
            primaryAction={
@ -88,46 +88,46 @@ export const ListIssuedInvoicesPage = () => {
            title={pageError.title}
            variant={pageError.variant}
          />
-        </div>
-      </div>
+        </RdxPageContainer>
+      </RdxPageFrame>
    );
  }

  return (
-    <div className="p-6 space-y-6">
-      <PageHeader
-        description={t("pages.issued_invoices.list.description")}
-        rightSlot={
-          <Button
-            aria-label={t("pages.issued_invoices.create.title")}
-            className="hidden"
-            onClick={() => navigate("/issued-invoices/create")}
-          >
-            <PlusIcon aria-hidden className="mr-2 size-4" />
-            {t("pages.issued_invoices.create.title")}
-          </Button>
-        }
-        title={t("pages.issued_invoices.list.title")}
-      />
+    <RdxPageFrame>
+      <RdxPageContainer className="space-y-6" width="full">
+        <PageHeader
+          description={t("pages.issued_invoices.list.description")}
+          rightSlot={
+            <Button
+              aria-label={t("pages.issued_invoices.create.title")}
+              className="hidden"
+              onClick={() => navigate("/issued-invoices/create")}
+            >
+              <PlusIcon aria-hidden className="mr-2 size-4" />
+              {t("pages.issued_invoices.create.title")}
+            </Button>
+          }
+          title={t("pages.issued_invoices.list.title")}
+        />

-      <div className="mx-auto w-full space-y-4">
-        {hasRefreshError && refreshError ? (
-          <ErrorAlert message={refreshError.message} title={refreshError.title} />
-        ) : null}
+        <div className="mx-auto w-full space-y-4">
+          {hasRefreshError && refreshError ? (
+            <ErrorAlert message={refreshError.message} title={refreshError.title} />
+          ) : null}

-        <Alert className="bg-green-50 text-green-800 flex items-center justify-between gap-6">
-          <div>
-            <AlertTitle className="font-semibold text-green-800">¡Atención!</AlertTitle>
-            <AlertDescription className="text-green-800">
-              Las facturas de esta pantalla son de solo lectura. Se generan automáticamente al
-              emitir una proforma aprobada y no se pueden modificar ni eliminar. Solo puedes
-              descargar el PDF de cada factura.
-            </AlertDescription>
-          </div>
-          <LogoVerifactu className="text-green-800 w-50" color="" />
-        </Alert>
+          <Alert className="bg-green-50 text-green-800 flex items-center justify-between gap-6">
+            <div>
+              <AlertTitle className="font-semibold text-green-800">¡Atención!</AlertTitle>
+              <AlertDescription className="text-green-800">
+                Las facturas de esta pantalla son de solo lectura. Se generan automáticamente al
+                emitir una proforma aprobada y no se pueden modificar ni eliminar. Solo puedes
+                descargar el PDF de cada factura.
+              </AlertDescription>
+            </div>
+            <LogoVerifactu className="text-green-800 w-50" color="" />
+          </Alert>

-        <div className="min-h-0 flex-1 overflow-auto">
          <IssuedInvoicesGrid
            columns={columns}
            data={listCtrl.data}
@ -164,10 +164,10 @@ export const ListIssuedInvoicesPage = () => {
              </div>
            }
          />
-        </div>

-        {listCtrl.data.totalItems === 0 ? <IssuedInvoicesEmptyGrid /> : null}
-      </div>
-    </div>
+          {listCtrl.data.totalItems === 0 ? <IssuedInvoicesEmptyGrid /> : null}
+        </div>
+      </RdxPageContainer>
+    </RdxPageFrame>
  );
 };
--- a/modules/customer-invoices/src/web/issued-invoices/shared/ui/blocks/index.ts
+++ b/modules/customer-invoices/src/web/issued-invoices/shared/ui/blocks/index.ts
@ -1 +0,0 @@
-export * from "./issued-invoices-layout";
--- a/modules/customer-invoices/src/web/issued-invoices/shared/ui/blocks/issued-invoices-layout.tsx
+++ b/modules/customer-invoices/src/web/issued-invoices/shared/ui/blocks/issued-invoices-layout.tsx
@ -1,5 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-export const IssuedInvoicesLayout = ({ children }: PropsWithChildren) => {
-  return <div className="space-y-4">{children}</div>;
-};
--- a/modules/customer-invoices/src/web/recurring-proformas/create/recurring-proforma-create-page.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/create/recurring-proforma-create-page.tsx
@ -1,6 +1,6 @@
 import { PageFormHeader } from "@erp/core/components";
 import { useHookForm } from "@erp/core/hooks";
-import { RdxEditorPageLayout } from "@repo/rdx-ui/components";
+import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
 import {
  Button,
  Card,
@ -50,35 +50,39 @@ export const RecurringProformaCreatePage = () => {
  });

  return (
-    <div className="fixed inset-0 flex flex-col overflow-hidden">
-      <PageFormHeader
-        actions={
-          <div className="flex items-center gap-3">
-            <Button
-              disabled={mutation.isPending}
-              onClick={() => navigate("/recurring-proformas")}
-              type="button"
-              variant="outline"
-            >
-              {t("recurring_proformas.create.cancel")}
-            </Button>
-            <Button
-              disabled={mutation.isPending}
-              form={RECURRING_PROFORMA_CREATE_FORM_ID}
-              type="submit"
-            >
-              {mutation.isPending
-                ? t("recurring_proformas.create.creating")
-                : t("recurring_proformas.create.submit")}
-            </Button>
-          </div>
-        }
-        backLabel={t("recurring_proformas.create.cancel")}
-        onBack={() => navigate("/recurring-proformas")}
-        title={t("recurring_proformas.create.title")}
-      />
-      <div className="flex-1 overflow-y-auto bg-muted/20">
-        <RdxEditorPageLayout width="simple">
+    <RdxPageFrame
+      contentClassName="bg-muted/20"
+      header={
+        <PageFormHeader
+          actions={
+            <div className="flex items-center gap-3">
+              <Button
+                disabled={mutation.isPending}
+                onClick={() => navigate("/recurring-proformas")}
+                type="button"
+                variant="outline"
+              >
+                {t("recurring_proformas.create.cancel")}
+              </Button>
+              <Button
+                disabled={mutation.isPending}
+                form={RECURRING_PROFORMA_CREATE_FORM_ID}
+                type="submit"
+              >
+                {mutation.isPending
+                  ? t("recurring_proformas.create.creating")
+                  : t("recurring_proformas.create.submit")}
+              </Button>
+            </div>
+          }
+          backLabel={t("recurring_proformas.create.cancel")}
+          onBack={() => navigate("/recurring-proformas")}
+          title={t("recurring_proformas.create.title")}
+        />
+      }
+    >
+      <RdxPageContainer width="content">
+        <RdxEditorLayout>
          <form
            className="space-y-6"
            id={RECURRING_PROFORMA_CREATE_FORM_ID}
@ -129,8 +133,8 @@ export const RecurringProformaCreatePage = () => {
              </CardContent>
            </Card>
          </form>
-        </RdxEditorPageLayout>
-      </div>
-    </div>
+        </RdxEditorLayout>
+      </RdxPageContainer>
+    </RdxPageFrame>
  );
 };
--- a/modules/customer-invoices/src/web/recurring-proformas/detail/ui/pages/recurring-proforma-detail-page.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/detail/ui/pages/recurring-proforma-detail-page.tsx
@ -1,10 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
-import {
-  RdxBadge,
-  RdxEditorPageLayout,
-  RdxPageContainer,
-  RdxPageStack,
-} from "@repo/rdx-ui/components";
+import { RdxBadge, RdxPageContainer, RdxPageFrame, RdxPageStack } from "@repo/rdx-ui/components";
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
 import { ArrowLeftIcon } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
@ -96,179 +91,181 @@ export const RecurringProformaDetailPage = () => {
  });

  return (
-    <RdxPageStack className="fixed inset-0 min-h-0 overflow-hidden" spacing="none">
-      <ProformaPageHeader
-        actions={
-          <RecurringProformaDetailHeaderActions
-            actions={headerActions}
-            isPending={actionMutation.isPending}
-            onExecuteAction={(action) =>
-              actionMutation.mutate({ id: recurringProforma.id, action })
-            }
-          />
-        }
-        backLabel={t("recurring_proformas.detail.back")}
-        onBack={() => navigate("/recurring-proformas")}
-        title={
-          <div className="space-y-3">
-            <span className="inline-flex max-w-full items-center gap-3">
-              <span className="truncate">{mainView.name}</span>
-              <RdxBadge
-                className={`shrink-0 rounded-md px-4 py-3 ${getRecurringProformaStatusBadgeClassName(recurringProforma.status)}`}
-                variant="secondary"
-              >
-                {t(mainView.statusKey)}
-              </RdxBadge>
-              <RdxBadge className="shrink-0 px-4 py-3 rounded-md" variant="secondary">
-                {t(
-                  recurringProforma.has_issue
-                    ? "recurring_proformas.list.issues.issue"
-                    : "recurring_proformas.list.issues.none"
-                )}
-              </RdxBadge>
-            </span>
-            <p className="text-sm text-muted-foreground">{metadata}</p>
-          </div>
-        }
-      />
-
-      <RdxPageContainer className="min-h-0 flex-1 overflow-y-auto" padding="none" width="wide">
-        <RdxEditorPageLayout width="wide">
+    <RdxPageFrame
+      header={
+        <ProformaPageHeader
+          actions={
+            <RecurringProformaDetailHeaderActions
+              actions={headerActions}
+              isPending={actionMutation.isPending}
+              onExecuteAction={(action) =>
+                actionMutation.mutate({ id: recurringProforma.id, action })
+              }
+            />
+          }
+          backLabel={t("recurring_proformas.detail.back")}
+          onBack={() => navigate("/recurring-proformas")}
+          title={
+            <div className="space-y-3">
+              <span className="inline-flex max-w-full items-center gap-3">
+                <span className="truncate">{mainView.name}</span>
+                <RdxBadge
+                  className={`shrink-0 rounded-md px-4 py-3 ${getRecurringProformaStatusBadgeClassName(recurringProforma.status)}`}
+                  variant="secondary"
+                >
+                  {t(mainView.statusKey)}
+                </RdxBadge>
+                <RdxBadge className="shrink-0 px-4 py-3 rounded-md" variant="secondary">
+                  {t(
+                    recurringProforma.has_issue
+                      ? "recurring_proformas.list.issues.issue"
+                      : "recurring_proformas.list.issues.none"
+                  )}
+                </RdxBadge>
+              </span>
+              <p className="text-sm text-muted-foreground">{metadata}</p>
+            </div>
+          }
+        />
+      }
+    >
+      <RdxPageContainer width="wide">
+        <RdxPageStack spacing="default">
          <RecurringProformaOperationalSummary
            locale={dateLocale}
            recurringProforma={recurringProforma}
          />
-        </RdxEditorPageLayout>

-        <div className="grid gap-6 xl:grid-cols-2">
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("recurring_proformas.detail.general.title")}</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {recurringProforma.description ? (
-                <p className="text-sm leading-6 text-muted-foreground">
-                  {recurringProforma.description}
-                </p>
-              ) : null}
-            </CardContent>
-          </Card>
+          <div className="grid gap-6 xl:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("recurring_proformas.detail.general.title")}</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {recurringProforma.description ? (
+                  <p className="text-sm leading-6 text-muted-foreground">
+                    {recurringProforma.description}
+                  </p>
+                ) : null}
+              </CardContent>
+            </Card>

-          <Card>
-            <CardHeader>
-              <CardTitle>{t("recurring_proformas.detail.schedule.title")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {schedule ? (
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("recurring_proformas.detail.schedule.title")}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {schedule ? (
+                  <dl className="space-y-3">
+                    <DetailField
+                      label={t("recurring_proformas.detail.schedule.interval")}
+                      value={mainView.scheduleLabel}
+                    />
+                    <DetailField
+                      label={t("recurring_proformas.detail.schedule.start_date")}
+                      value={formatRecurringProformaDateOnly(schedule.start_date)}
+                    />
+                    <DetailField
+                      label={t("recurring_proformas.detail.schedule.end_date")}
+                      value={
+                        schedule.end_date
+                          ? formatRecurringProformaDateOnly(schedule.end_date)
+                          : t("recurring_proformas.detail.schedule.no_end_date")
+                      }
+                    />
+                    <DetailField
+                      label={t("recurring_proformas.detail.schedule.monthly_rule")}
+                      value={
+                        schedule.monthly_rule
+                          ? t(`recurring_proformas.list.schedule.${schedule.monthly_rule}`)
+                          : t("recurring_proformas.detail.schedule.not_applicable")
+                      }
+                    />
+                  </dl>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    {t("recurring_proformas.list.schedule.none")}
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("recurring_proformas.detail.commercial.title")}</CardTitle>
+              </CardHeader>
+              <CardContent>
                <dl className="space-y-3">
                  <DetailField
-                    label={t("recurring_proformas.detail.schedule.interval")}
-                    value={mainView.scheduleLabel}
+                    label={t("recurring_proformas.detail.commercial.payment_term")}
+                    value={formatRecurringProformaOverride(recurringProforma.payment_term_id, t)}
                  />
                  <DetailField
-                    label={t("recurring_proformas.detail.schedule.start_date")}
-                    value={formatRecurringProformaDateOnly(schedule.start_date)}
+                    label={t("recurring_proformas.detail.commercial.payment_method")}
+                    value={formatRecurringProformaOverride(recurringProforma.payment_method_id, t)}
                  />
                  <DetailField
-                    label={t("recurring_proformas.detail.schedule.end_date")}
-                    value={
-                      schedule.end_date
-                        ? formatRecurringProformaDateOnly(schedule.end_date)
-                        : t("recurring_proformas.detail.schedule.no_end_date")
-                    }
+                    label={t("recurring_proformas.detail.commercial.language")}
+                    value={formatRecurringProformaOverride(recurringProforma.language, t)}
                  />
                  <DetailField
-                    label={t("recurring_proformas.detail.schedule.monthly_rule")}
-                    value={
-                      schedule.monthly_rule
-                        ? t(`recurring_proformas.list.schedule.${schedule.monthly_rule}`)
-                        : t("recurring_proformas.detail.schedule.not_applicable")
-                    }
+                    label={t("recurring_proformas.detail.commercial.currency")}
+                    value={formatRecurringProformaOverride(recurringProforma.currency, t)}
                  />
+                  <DetailField
+                    label={t("recurring_proformas.detail.commercial.proforma_series")}
+                    value={formatRecurringProformaOverride(recurringProforma.proforma_series, t)}
+                  />
+                  <DetailField
+                    label={t("recurring_proformas.detail.commercial.issued_invoice_series")}
+                    value={formatRecurringProformaOverride(
+                      recurringProforma.issued_invoice_series,
+                      t
+                    )}
+                  />
+                  {discount ? (
+                    <DetailField
+                      label={t("recurring_proformas.detail.commercial.global_discount")}
+                      value={discount}
+                    />
+                  ) : null}
                </dl>
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  {t("recurring_proformas.list.schedule.none")}
-                </p>
-              )}
-            </CardContent>
-          </Card>
+              </CardContent>
+            </Card>

-          <Card>
-            <CardHeader>
-              <CardTitle>{t("recurring_proformas.detail.commercial.title")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <dl className="space-y-3">
-                <DetailField
-                  label={t("recurring_proformas.detail.commercial.payment_term")}
-                  value={formatRecurringProformaOverride(recurringProforma.payment_term_id, t)}
-                />
-                <DetailField
-                  label={t("recurring_proformas.detail.commercial.payment_method")}
-                  value={formatRecurringProformaOverride(recurringProforma.payment_method_id, t)}
-                />
-                <DetailField
-                  label={t("recurring_proformas.detail.commercial.language")}
-                  value={formatRecurringProformaOverride(recurringProforma.language, t)}
-                />
-                <DetailField
-                  label={t("recurring_proformas.detail.commercial.currency")}
-                  value={formatRecurringProformaOverride(recurringProforma.currency, t)}
-                />
-                <DetailField
-                  label={t("recurring_proformas.detail.commercial.proforma_series")}
-                  value={formatRecurringProformaOverride(recurringProforma.proforma_series, t)}
-                />
-                <DetailField
-                  label={t("recurring_proformas.detail.commercial.issued_invoice_series")}
-                  value={formatRecurringProformaOverride(
-                    recurringProforma.issued_invoice_series,
-                    t
-                  )}
-                />
-                {discount ? (
-                  <DetailField
-                    label={t("recurring_proformas.detail.commercial.global_discount")}
-                    value={discount}
-                  />
-                ) : null}
-              </dl>
-            </CardContent>
-          </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("recurring_proformas.detail.items.title")}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {recurringProforma.items.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">
+                    {t("recurring_proformas.detail.items.empty")}
+                  </p>
+                ) : (
+                  <ol className="space-y-3">
+                    {recurringProforma.items.map((item) => (
+                      <li className="flex gap-3 text-sm" key={item.id}>
+                        <span className="tabular-nums text-muted-foreground">{item.position}</span>
+                        <span>
+                          {item.description ?? t("recurring_proformas.detail.items.no_description")}
+                        </span>
+                      </li>
+                    ))}
+                  </ol>
+                )}
+              </CardContent>
+            </Card>
+          </div>

-          <Card>
-            <CardHeader>
-              <CardTitle>{t("recurring_proformas.detail.items.title")}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {recurringProforma.items.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  {t("recurring_proformas.detail.items.empty")}
-                </p>
-              ) : (
-                <ol className="space-y-3">
-                  {recurringProforma.items.map((item) => (
-                    <li className="flex gap-3 text-sm" key={item.id}>
-                      <span className="tabular-nums text-muted-foreground">{item.position}</span>
-                      <span>
-                        {item.description ?? t("recurring_proformas.detail.items.no_description")}
-                      </span>
-                    </li>
-                  ))}
-                </ol>
-              )}
-            </CardContent>
-          </Card>
-        </div>
+          <RecurringProformaOccurrencesSection recurringProformaId={recurringProforma.id} />

-        <RecurringProformaOccurrencesSection recurringProformaId={recurringProforma.id} />
-
-        <Button onClick={() => navigate("/recurring-proformas")} type="button" variant="outline">
-          <ArrowLeftIcon aria-hidden className="size-4" />
-          {t("recurring_proformas.detail.back")}
-        </Button>
+          <Button onClick={() => navigate("/recurring-proformas")} type="button" variant="outline">
+            <ArrowLeftIcon aria-hidden className="size-4" />
+            {t("recurring_proformas.detail.back")}
+          </Button>
+        </RdxPageStack>
      </RdxPageContainer>
-    </RdxPageStack>
+    </RdxPageFrame>
  );
 };
--- a/modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.test.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.test.tsx
@ -124,6 +124,7 @@ mock.module("./controllers/use-list-recurring-proformas-page-controller", {
 mock.module("@repo/rdx-ui/components", {
  namedExports: {
    RdxPageContainer: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    RdxPageFrame: ({ children }: { children: ReactNode }) => <div>{children}</div>,
    RdxPageStack: ({ children }: { children: ReactNode }) => <div>{children}</div>,
    RdxPageHeader: ({
      title,
--- a/modules/customer-invoices/src/web/recurring-proformas/list/ui/pages/scoped-list-recurring-proformas-page-view.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/list/ui/pages/scoped-list-recurring-proformas-page-view.tsx
@ -2,6 +2,7 @@ import { ErrorAlert } from "@erp/core/components";
 import {
  RdxPageActions,
  RdxPageContainer,
+  RdxPageFrame,
  RdxPageHeader,
  RdxPageStack,
 } from "@repo/rdx-ui/components";
@ -28,20 +29,22 @@ export const ScopedListRecurringProformasPageView = ({
  content,
 }: ScopedListRecurringProformasPageViewProps) => {
  return (
-    <RdxPageContainer width="full">
-      <RdxPageStack spacing="default">
-        <RdxPageHeader
-          actions={primaryAction ? <RdxPageActions primary={primaryAction} /> : undefined}
-          description={description}
-          title={title}
-        />
+    <RdxPageFrame>
+      <RdxPageContainer width="full">
+        <RdxPageStack spacing="default">
+          <RdxPageHeader
+            actions={primaryAction ? <RdxPageActions primary={primaryAction} /> : undefined}
+            description={description}
+            title={title}
+          />

-        {refreshError ? (
-          <ErrorAlert message={refreshError.message} title={refreshError.title} />
-        ) : null}
+          {refreshError ? (
+            <ErrorAlert message={refreshError.message} title={refreshError.title} />
+          ) : null}

-        {content}
-      </RdxPageStack>
-    </RdxPageContainer>
+          {content}
+        </RdxPageStack>
+      </RdxPageContainer>
+    </RdxPageFrame>
  );
 };
--- a/modules/customer-invoices/src/web/recurring-proformas/shared/ui/blocks/index.ts
+++ b/modules/customer-invoices/src/web/recurring-proformas/shared/ui/blocks/index.ts
@ -1 +0,0 @@
-export * from "./recurring-proforma-layout";
--- a/modules/customer-invoices/src/web/recurring-proformas/shared/ui/blocks/recurring-proforma-layout.tsx
+++ b/modules/customer-invoices/src/web/recurring-proformas/shared/ui/blocks/recurring-proforma-layout.tsx
@ -1,9 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-export function RecurringProformaLayout({ children }: PropsWithChildren) {
-  return (
-    <div className="flex flex-col h-full w-full" id="recurring_proformas ">
-      {children}
-    </div>
-  );
-}
--- a/packages/rdx-ui/src/components/editor-page/rdx-editor-page-layout.tsx
+++ b/packages/rdx-ui/src/components/editor-page/rdx-editor-page-layout.tsx
@ -21,12 +21,14 @@ const ASIDE_GRID_CLASSNAME: Record<RdxEditorWidth, string> = {
 };

 /**
+ * @deprecated
 * Distribuye el contenido interno de un contenedor en:
 *
 * - una región principal
 * - un aside opcional.
 *
 * No controla padding, scroll ni estructura general de página.
+ * Para nuevos consumidores usar RdxPageContainer + RdxEditorLayout.
 */

 export const RdxEditorPageLayout = ({
				`@ -1 +0,0 @@`
				`export * from "./recurring-proforma-layout";`