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">
+    <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,13 +88,14 @@ export const ListIssuedInvoicesPage = () => {
            title={pageError.title}
            variant={pageError.variant}
          />
-        </div>
-      </div>
+        </RdxPageContainer>
+      </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>
  );
 };
--- 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,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>
-      </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,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>
  );
 };
--- 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,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>
  );
 };
--- 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";`