From 2f8122ca77e139b5344b2cd4a668f10caa492599 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 4 Sep 2026 13:30:22 +0200 Subject: [PATCH] refactor: replace PageFormHeader with RdxEditorHeader in customer and supplier pages - Updated CustomerViewHeader to use RdxEditorHeader for a more consistent header layout. - Refactored CustomerViewPage to utilize RdxPageFrame and RdxPageContainer for improved structure. - Replaced PageFormHeader with RdxEditorHeader in AccountPage for uniformity. - Adjusted SupplierCreatePage and SupplierUpdatePage to use RdxPageFrame and RdxPageContainer for layout consistency. - Removed SupplierLayout component as it was no longer necessary. - Enhanced SupplierDetailPage to utilize RdxPageFrame for better layout management. - Introduced RdxEditorHeader component to encapsulate header functionality for editor pages. - Updated tests to cover new RdxEditorHeader functionality and removed obsolete tests related to RdxPageHeader. --- apps/web/src/home/ui/pages/home-page.tsx | 114 ++++---- apps/web/src/settings/settings-layout.tsx | 44 +-- modules/audit/src/web/list/ui/audit-page.tsx | 124 ++++---- .../web/components/form/form-actions/index.ts | 3 +- .../ui/blocks/issued-invoice-page-header.tsx | 8 +- .../shared/ui/blocks/proforma-page-header.tsx | 9 +- .../create/recurring-proforma-create-page.tsx | 10 +- .../ui/blocks/customer-create-header.tsx | 9 +- .../components/customer-editor-skeleton.tsx | 10 +- .../create/ui/pages/customer-create-page.tsx | 67 ++--- modules/customers/src/web/customer-routes.tsx | 28 +- .../ui/pages/list-customers-page-view.tsx | 31 +- .../web/list/ui/pages/list-customers-page.tsx | 27 +- .../web/shared/ui/blocks/customer-layout.tsx | 9 - .../src/web/shared/ui/blocks/index.ts | 1 - .../ui/blocks/customer-update-header.tsx | 9 +- .../components/customer-editor-skeleton.tsx | 10 +- .../update/ui/pages/customer-update-page.tsx | 77 ++--- .../view/ui/blocks/customer-view-header.tsx | 9 +- .../web/view/ui/pages/customer-view-page.tsx | 55 ++-- .../src/web/account/ui/pages/account-page.tsx | 5 +- .../src/web/create/supplier-create-page.tsx | 40 +-- .../src/web/list/ui/suppliers-list-page.tsx | 113 ++++---- modules/suppliers/src/web/shared/ui/index.ts | 1 - .../web/shared/ui/supplier-editor-header.tsx | 13 +- .../shared/ui/supplier-editor-skeleton.tsx | 24 +- .../src/web/shared/ui/supplier-layout.tsx | 7 - modules/suppliers/src/web/supplier-routes.tsx | 27 +- .../src/web/update/supplier-update-page.tsx | 70 ++--- .../src/web/view/supplier-detail-page.tsx | 269 +++++++++--------- .../src/components/editor-page/index.ts | 1 + .../rdx-editor-foundations.test.tsx | 28 ++ .../editor-page/rdx-editor-header.tsx | 71 ++--- .../layout/rdx-page-foundations.test.tsx | 23 -- .../src/components/layout/rdx-page-header.tsx | 83 +----- 35 files changed, 691 insertions(+), 738 deletions(-) delete mode 100644 modules/customers/src/web/shared/ui/blocks/customer-layout.tsx delete mode 100644 modules/suppliers/src/web/shared/ui/supplier-layout.tsx rename modules/core/src/web/components/form/form-actions/page-form-header.tsx => packages/rdx-ui/src/components/editor-page/rdx-editor-header.tsx (52%) diff --git a/apps/web/src/home/ui/pages/home-page.tsx b/apps/web/src/home/ui/pages/home-page.tsx index 74d0a510..acbb0fd9 100644 --- a/apps/web/src/home/ui/pages/home-page.tsx +++ b/apps/web/src/home/ui/pages/home-page.tsx @@ -1,5 +1,10 @@ import { PageErrorState } from "@erp/core/components"; -import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components"; +import { + RdxPageContainer, + RdxPageFrame, + RdxPageHeader, + RdxPageStack, +} from "@repo/rdx-ui/components"; import { Skeleton } from "@repo/shadcn-ui/components"; import { Link, useNavigate } from "react-router-dom"; @@ -28,6 +33,7 @@ const HomeKpisSkeleton = () => { ); }; +/** Renderiza el dashboard dentro del frame estándar de página. */ export const HomePage = () => { const { t } = useAppTranslation(); const navigate = useNavigate(); @@ -35,8 +41,8 @@ export const HomePage = () => { if (ctrl.hasBlockingError && ctrl.pageError) { return ( - -
+ + { title={ctrl.pageError.title} variant="server" /> -
- + + ); } return ( - - - + + + + - {ctrl.customersTotalQuery.isLoading || - ctrl.proformasOverviewQuery.isLoading || - ctrl.monthlyBillingQuery.isLoading ? ( - - ) : ( -
- {ctrl.kpis.map((kpi) => ( - - ))} + {ctrl.customersTotalQuery.isLoading || + ctrl.proformasOverviewQuery.isLoading || + ctrl.monthlyBillingQuery.isLoading ? ( + + ) : ( +
+ {ctrl.kpis.map((kpi) => ( + + ))} +
+ )} + +
+ +
- )} -
- - -
+
+ + +
-
- - -
- -

- {t("web.home.footer.note")}{" "} - - {t("web.home.footer.link")} - -

- - +

+ {t("web.home.footer.note")}{" "} + + {t("web.home.footer.link")} + +

+ + + ); }; diff --git a/apps/web/src/settings/settings-layout.tsx b/apps/web/src/settings/settings-layout.tsx index ecaee1e6..78aa2e3e 100644 --- a/apps/web/src/settings/settings-layout.tsx +++ b/apps/web/src/settings/settings-layout.tsx @@ -1,4 +1,9 @@ -import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components"; +import { + RdxPageContainer, + RdxPageFrame, + RdxPageHeader, + RdxPageStack, +} from "@repo/rdx-ui/components"; import { Outlet } from "react-router-dom"; import type { SettingsNavigationSection } from "@/settings/build-settings-navigation"; @@ -11,27 +16,32 @@ interface SettingsLayoutProps { sections: SettingsNavigationSection[]; } +/** + * Compone la navegación y el contenido de configuración dentro del frame estándar de página. + */ export const SettingsLayout = ({ sections }: SettingsLayoutProps) => { const { t } = useAppTranslation(); return ( - - - + + + + -
- +
+ -
- -
-
- - +
+ +
+
+ + + ); }; diff --git a/modules/audit/src/web/list/ui/audit-page.tsx b/modules/audit/src/web/list/ui/audit-page.tsx index f54854e0..de53eefc 100644 --- a/modules/audit/src/web/list/ui/audit-page.tsx +++ b/modules/audit/src/web/list/ui/audit-page.tsx @@ -1,5 +1,10 @@ import { ErrorAlert, PageErrorState, SimpleSearchInput } from "@erp/core/components"; -import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components"; +import { + RdxPageContainer, + RdxPageFrame, + RdxPageHeader, + RdxPageStack, +} from "@repo/rdx-ui/components"; import { Button, Spinner, @@ -18,6 +23,7 @@ import { AuditFilterChips, AuditFiltersPanel } from "./audit-filters"; import { AuditGrid } from "./audit-grid"; import { useAuditGridColumns } from "./use-audit-grid-columns"; +/** Compone el listado de auditoría dentro del frame estándar de página. */ export const AuditPage = () => { const { t } = useTranslation(); const controller = useAuditPageController(); @@ -28,68 +34,72 @@ export const AuditPage = () => { if (controller.isError && !controller.hasUsableData) { return ( - - - + + + + + ); } return ( - - - - - {controller.isError && controller.hasUsableData ? ( - - ) : null} - -
- -
- - - {!controller.isLoading && controller.data.items.length === 0 ? ( -

- {controller.filters.q || - controller.filters.kind || - controller.filters.targetType || - controller.filters.action - ? t("audit.empty_filtered") - : t("audit.empty")} -

- ) : ( - + + + + + {controller.isError && controller.hasUsableData ? ( + + ) : null} + +
+ +
+ + - )} + {!controller.isLoading && controller.data.items.length === 0 ? ( +

+ {controller.filters.q || + controller.filters.kind || + controller.filters.targetType || + controller.filters.action + ? t("audit.empty_filtered") + : t("audit.empty")} +

+ ) : ( + + )} +
-
- - - + + + + ); }; diff --git a/modules/core/src/web/components/form/form-actions/index.ts b/modules/core/src/web/components/form/form-actions/index.ts index 6000c998..085a5a7b 100644 --- a/modules/core/src/web/components/form/form-actions/index.ts +++ b/modules/core/src/web/components/form/form-actions/index.ts @@ -1,2 +1 @@ -export * from './page-form-header'; -export * from './page-keyboard-shortcuts-button'; +export * from "./page-keyboard-shortcuts-button"; diff --git a/modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-page-header.tsx b/modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-page-header.tsx index 7a0bab16..f10a18e5 100644 --- a/modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-page-header.tsx +++ b/modules/customer-invoices/src/web/issued-invoices/detail/ui/blocks/issued-invoice-page-header.tsx @@ -1,4 +1,4 @@ -import { PageFormHeader } from "@erp/core/components"; +import { RdxEditorHeader } from "@repo/rdx-ui/components"; import { cn } from "@repo/shadcn-ui/lib/utils"; import type { ReactNode } from "react"; @@ -26,17 +26,17 @@ export const IssuedInvoicePageHeader = ({ contentClassName, }: IssuedInvoicePageHeaderProps) => { return ( - {children} - + ); }; diff --git a/modules/customer-invoices/src/web/proformas/shared/ui/blocks/proforma-page-header.tsx b/modules/customer-invoices/src/web/proformas/shared/ui/blocks/proforma-page-header.tsx index 01930c5d..e090fa2b 100644 --- a/modules/customer-invoices/src/web/proformas/shared/ui/blocks/proforma-page-header.tsx +++ b/modules/customer-invoices/src/web/proformas/shared/ui/blocks/proforma-page-header.tsx @@ -1,4 +1,4 @@ -import { RdxPageHeader } from "@repo/rdx-ui/components"; +import { RdxEditorHeader } from "@repo/rdx-ui/components"; import { cn } from "@repo/shadcn-ui/lib/utils"; import type { ReactNode } from "react"; @@ -26,18 +26,17 @@ export const ProformaPageHeader = ({ contentClassName, }: ProformaPageHeaderProps) => { return ( - {children} - + ); }; diff --git 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 index db30c519..991c59f7 100644 --- 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,10 @@ -import { PageFormHeader } from "@erp/core/components"; import { useHookForm } from "@erp/core/hooks"; -import { RdxEditorLayout, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components"; +import { + RdxEditorHeader, + RdxEditorLayout, + RdxPageContainer, + RdxPageFrame, +} from "@repo/rdx-ui/components"; import { Button, Card, @@ -53,7 +57,7 @@ export const RecurringProformaCreatePage = () => { + } refreshError={refreshError} title={t("list.title")} diff --git a/modules/customers/src/web/shared/ui/blocks/customer-layout.tsx b/modules/customers/src/web/shared/ui/blocks/customer-layout.tsx deleted file mode 100644 index 8bd08331..00000000 --- a/modules/customers/src/web/shared/ui/blocks/customer-layout.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import type { PropsWithChildren } from "react"; - -export const CustomerLayout = ({ children }: PropsWithChildren) => { - return ( -
- {children} -
- ); -}; diff --git a/modules/customers/src/web/shared/ui/blocks/index.ts b/modules/customers/src/web/shared/ui/blocks/index.ts index 7f780d43..e69de29b 100644 --- a/modules/customers/src/web/shared/ui/blocks/index.ts +++ b/modules/customers/src/web/shared/ui/blocks/index.ts @@ -1 +0,0 @@ -export * from "./customer-layout"; diff --git a/modules/customers/src/web/update/ui/blocks/customer-update-header.tsx b/modules/customers/src/web/update/ui/blocks/customer-update-header.tsx index 0cd0fc0b..32066e12 100644 --- a/modules/customers/src/web/update/ui/blocks/customer-update-header.tsx +++ b/modules/customers/src/web/update/ui/blocks/customer-update-header.tsx @@ -1,9 +1,10 @@ -import { PageFormHeader, PageKeyboardShortcutsButton } from "@erp/core/components"; +import { PageKeyboardShortcutsButton } from "@erp/core/components"; import { CancelActionButton, FormActionsBar, type FormSecondaryAction, FormSecondaryActionsMenu, + RdxEditorHeader, RhfSubmitActionButton, } from "@repo/rdx-ui/components"; import type { ReactNode } from "react"; @@ -75,7 +76,7 @@ export const CustomerUpdateHeader = ({ ]; return ( - {children} - + ); }; diff --git a/modules/customers/src/web/update/ui/components/customer-editor-skeleton.tsx b/modules/customers/src/web/update/ui/components/customer-editor-skeleton.tsx index 2e2320e9..d7082324 100644 --- a/modules/customers/src/web/update/ui/components/customer-editor-skeleton.tsx +++ b/modules/customers/src/web/update/ui/components/customer-editor-skeleton.tsx @@ -1,4 +1,4 @@ -import { AppContent, BackHistoryButton } from "@repo/rdx-ui/components"; +import { BackHistoryButton, RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components"; import { Button } from "@repo/shadcn-ui/components"; import { useTranslation } from "../../../i18n"; @@ -6,8 +6,8 @@ import { useTranslation } from "../../../i18n"; export const CustomerEditorSkeleton = () => { const { t } = useTranslation(); return ( - <> - + +