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

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";

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 { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
-import { Button, Card, CardContent, RdxBadge } from "@repo/shadcn-ui/components";
+import { Button, Card, CardContent } from "@repo/shadcn-ui/components";
 import { PlusIcon } from "lucide-react";
 
 import { useTranslation } from "../../../../i18n";

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: (
+      element: <RecurringProformasListPage />,
-        <RecurringProformaLayout>
-          <RecurringProformasListPage />
-        </RecurringProformaLayout>
-      ),
     },
     {
       path: "recurring-proformas/archived",
@@ -131,11 +119,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-sidebar",
         protected: true,
       },
-      element: (
+      element: <RecurringProformasListPage />,
-        <RecurringProformaLayout>
-          <RecurringProformasListPage />
-        </RecurringProformaLayout>
-      ),
     },
     {
       path: "recurring-proformas/create",
@@ -143,11 +127,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: (
+      element: <RecurringProformaCreatePage />,
-        <RecurringProformaLayout>
-          <RecurringProformaCreatePage />
-        </RecurringProformaLayout>
-      ),
     },
     {
       path: "recurring-proformas/:recurring_proforma_id",
@@ -155,11 +135,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-fullscreen",
         protected: true,
       },
-      element: (
+      element: <RecurringProformaDetailPage />,
-        <RecurringProformaLayout>
-          <RecurringProformaDetailPage />
-        </RecurringProformaLayout>
-      ),
     },
 
     {
@@ -168,11 +144,7 @@ export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[]
         layout: "app-sidebar",
         protected: true,
       },
-      element: (
+      element: <Outlet context={params} />,
-        <IssuedInvoicesLayout>
-          <Outlet context={params} />
-        </IssuedInvoicesLayout>
-      ),
       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: (
+      element: <IssuedInvoiceDetailPage />,
-        <IssuedInvoicesLayout>
-          <IssuedInvoiceDetailPage />
-        </IssuedInvoicesLayout>
-      ),
     },
     {
       path: "settings/billing/verifactu",

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}

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">
+      <RdxPageFrame>
-        <div className="mx-auto w-full max-w-3xl">
+        <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>
+        </RdxPageContainer>
-      </div>
+      </RdxPageFrame>
     );
   }
 
   if (!(ctrl.header && ctrl.document && ctrl.general)) {
     return (
-      <div className="p-4 sm:p-6">
+      <RdxPageFrame>
-        <div className="mx-auto w-full max-w-3xl">
+        <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>
+        </RdxPageContainer>
-      </div>
+      </RdxPageFrame>
     );
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+    <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>
   );
 };

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 {

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";
 

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">
+      <RdxPageFrame>
-        <div className="mx-auto w-full max-w-3xl">
+        <RdxPageContainer width="content">
           <PageErrorState
             description={pageError.description}
             primaryAction={
@@ -88,13 +88,14 @@ export const ListIssuedInvoicesPage = () => {
             title={pageError.title}
             variant={pageError.variant}
           />
-        </div>
+        </RdxPageContainer>
-      </div>
+      </RdxPageFrame>
     );
   }
 
   return (
-    <div className="p-6 space-y-6">
+    <RdxPageFrame>
+      <RdxPageContainer className="space-y-6" width="full">
         <PageHeader
           description={t("pages.issued_invoices.list.description")}
           rightSlot={
@@ -127,7 +128,6 @@ export const ListIssuedInvoicesPage = () => {
             <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>
+      </RdxPageContainer>
+    </RdxPageFrame>
   );
 };

modules/customer-invoices/src/web/issued-invoices/shared/ui/blocks/index.ts

@@ -1 +0,0 @@
-export * from "./issued-invoices-layout";

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>;
-};

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,7 +50,9 @@ export const RecurringProformaCreatePage = () => {
   });
 
   return (
-    <div className="fixed inset-0 flex flex-col overflow-hidden">
+    <RdxPageFrame
+      contentClassName="bg-muted/20"
+      header={
         <PageFormHeader
           actions={
             <div className="flex items-center gap-3">
@@ -77,8 +79,10 @@ export const RecurringProformaCreatePage = () => {
           onBack={() => navigate("/recurring-proformas")}
           title={t("recurring_proformas.create.title")}
         />
-      <div className="flex-1 overflow-y-auto bg-muted/20">
+      }
-        <RdxEditorPageLayout width="simple">
+    >
+      <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>
+        </RdxEditorLayout>
-      </div>
+      </RdxPageContainer>
-    </div>
+    </RdxPageFrame>
   );
 };

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 {
+import { RdxBadge, RdxPageContainer, RdxPageFrame, RdxPageStack } from "@repo/rdx-ui/components";
-  RdxBadge,
-  RdxEditorPageLayout,
-  RdxPageContainer,
-  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,7 +91,8 @@ export const RecurringProformaDetailPage = () => {
   });
 
   return (
-    <RdxPageStack className="fixed inset-0 min-h-0 overflow-hidden" spacing="none">
+    <RdxPageFrame
+      header={
         <ProformaPageHeader
           actions={
             <RecurringProformaDetailHeaderActions
@@ -131,14 +127,14 @@ export const RecurringProformaDetailPage = () => {
             </div>
           }
         />
-
+      }
-      <RdxPageContainer className="min-h-0 flex-1 overflow-y-auto" padding="none" width="wide">
+    >
-        <RdxEditorPageLayout width="wide">
+      <RdxPageContainer width="wide">
+        <RdxPageStack spacing="default">
           <RecurringProformaOperationalSummary
             locale={dateLocale}
             recurringProforma={recurringProforma}
           />
-        </RdxEditorPageLayout>
 
           <div className="grid gap-6 xl:grid-cols-2">
             <Card>
@@ -268,7 +264,8 @@ export const RecurringProformaDetailPage = () => {
             <ArrowLeftIcon aria-hidden className="size-4" />
             {t("recurring_proformas.detail.back")}
           </Button>
-      </RdxPageContainer>
         </RdxPageStack>
+      </RdxPageContainer>
+    </RdxPageFrame>
   );
 };

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,

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,6 +29,7 @@ export const ScopedListRecurringProformasPageView = ({
   content,
 }: ScopedListRecurringProformasPageViewProps) => {
   return (
+    <RdxPageFrame>
       <RdxPageContainer width="full">
         <RdxPageStack spacing="default">
           <RdxPageHeader
@@ -43,5 +45,6 @@ export const ScopedListRecurringProformasPageView = ({
           {content}
         </RdxPageStack>
       </RdxPageContainer>
+    </RdxPageFrame>
   );
 };

modules/customer-invoices/src/web/recurring-proformas/shared/ui/blocks/index.ts

@@ -1 +0,0 @@
-export * from "./recurring-proforma-layout";

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>
-  );
-}

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 = ({