Rodax_Software/FactuGES_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refactor page layouts to use RdxPageContent for improved structure and consistency

Browse Source
This commit is contained in:
David Arranz 2026-09-15 12:37:50 +02:00
parent 939577dbec
commit 35dca3954d
16 changed files with 286 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/settings/settings-layout.tsx
View File

@ -24,13 +24,13 @@ export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
return (
<RdxPageFrame>
<RdxPageContainer className="space-y-6" width="full">
<RdxPageContainer width="full">
<RdxPageContent spacing="default">
<RdxPageHeader
description={t("web.settings.description")}
title={t("web.settings.title")}
/>
<RdxPageContent spacing="default">
<div className="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]">
<aside className="min-w-0 lg:sticky lg:top-6 lg:self-start">
<SettingsNavigation sections={sections} />

2
docs/frontend/frontend-architecture.md
View File

@ -82,7 +82,7 @@ RdxPageContent
→ composición de los hijos principales
```
Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales. En Create/Update y Detail/Show, la composición canónica es RdxPageFrame → RdxPageContainer → RdxPageContent: errores, alertas, secciones semánticas y contenido funcional son hijos directos de RdxPageContent; los dialogs son hermanos del frame; RdxPanel se reserva para secciones semánticas reales.
Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales. En Create/Update, Detail/Show y LIST, la composición canónica es RdxPageFrame → RdxPageContainer → RdxPageContent: errores, alertas, secciones semánticas y contenido funcional son hijos directos de RdxPageContent; los dialogs son hermanos del frame; RdxPanel se reserva para secciones semánticas reales.
## 6. Identity y sesión

13
docs/frontend/ui-patterns.md
View File

@ -22,6 +22,18 @@ Los componentes aquí citados se definen en `ui-system.md`; este documento expli
</RdxPageFrame>
```
El error inicial bloqueante conserva el mismo shell:
```tsx
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState />
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
```
- El CTA de creación permanece durante loading, empty y errores de refresh; puede desaparecer ante error inicial bloqueante.
- Búsqueda, filtros y controles viven en `DataTable.topContent`.
- TanStack Query conserva los datos remotos y la paginación server-side.
@ -29,6 +41,7 @@ Los componentes aquí citados se definen en `ui-system.md`; este documento expli
- No se calculan contadores globales a partir de una página parcial.
- El click de fila recibe la fila; la página/controller usa explícitamente `row.id`.
- Una vista de composición de dominio puede encapsular el shell si permanece pura.
- Los listados no reconstruyen con HTML local las responsabilidades de Frame, Container o Content. Search, filtros, tabs, tabla y paginación son contenido funcional de `RdxPageContent`; el scroll interno de una tabla o grid es legítimo y no sustituye el scroll de página.
El controller de página concentra URL, filtros, consulta, estados y navegación. La Page define columnas y conecta callbacks; no reproduce reglas de dominio.

2
docs/frontend/ui-system.md
View File

@ -152,6 +152,8 @@ Excepción: un detalle documental puede configurar el contenido del frame con `o
Los avisos, errores inline, secciones y contenido funcional deben ser hijos directos cuando pertenezcan al mismo nivel visual.
`RdxPanel` no es un wrapper genérico. Se usa únicamente cuando existe una sección con identidad visual o semántica propia.
En LIST, toolbar, búsqueda, filtros, tabs, tabla/lista/grid y paginación son bloques funcionales de `RdxPageContent`. Una tabla no implica un `RdxPanel`, y su scroll horizontal, virtualizado o interno es legítimo: no sustituye el scroll estructural de `RdxPageFrame`. No se anidan containers ni contents para filtros, alertas o paginación.
```tsx
<RdxPageContent>
{error ? <ErrorAlert /> : null}

4
modules/audit/src/web/list/ui/audit-page.tsx
View File

@ -36,6 +36,7 @@ export const AuditPage = () => {
return (
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState
description={t("audit.error.load")}
primaryAction={{
@ -46,6 +47,7 @@ export const AuditPage = () => {
title={t("audit.error.load")}
variant="unknown"
/>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
@ -96,9 +98,9 @@ export const AuditPage = () => {
)}
</div>
</div>
<AuditEntrySheet entryId={controller.entry} onClose={controller.closeEntry} />
</RdxPageContent>
</RdxPageContainer>
<AuditEntrySheet entryId={controller.entry} onClose={controller.closeEntry} />
</RdxPageFrame>
);
};

6
modules/catalogs/src/web/settings/payment-methods/ui/pages/payment-methods-settings-page.tsx
View File

@ -1,5 +1,5 @@
import { PageErrorState } from "@erp/core/components";
import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
import { RdxBadge } from "@repo/rdx-ui/components";
import {
Button,
Card,
@ -30,8 +30,6 @@ export const PaymentMethodsSettingsPage = () => {
if (ctrl.pageError) {
return (
<RdxPageContainer width="full">
<div className="mx-auto w-full max-w-3xl">
<PageErrorState
description={ctrl.pageError.description}
primaryAction={
@ -49,8 +47,6 @@ export const PaymentMethodsSettingsPage = () => {
title={ctrl.pageError.title}
variant={ctrl.pageError.variant}
/>
</div>
</RdxPageContainer>
);
}

5
modules/catalogs/src/web/settings/payment-terms/ui/pages/payment-terms-settings-page.tsx
View File

@ -1,5 +1,4 @@
import { PageErrorState } from "@erp/core/components";
import { RdxPageContainer } from "@repo/rdx-ui/components";
import {
Button,
Card,
@ -38,8 +37,6 @@ export const PaymentTermsSettingsPage = () => {
if (ctrl.pageError) {
return (
<RdxPageContainer width="full">
<div className="mx-auto w-full max-w-3xl">
<PageErrorState
description={ctrl.pageError.description}
primaryAction={
@ -57,8 +54,6 @@ export const PaymentTermsSettingsPage = () => {
title={ctrl.pageError.title}
variant={ctrl.pageError.variant}
/>
</div>
</RdxPageContainer>
);
}

6
modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx
View File

@ -1,5 +1,5 @@
import { PageErrorState } from "@erp/core/components";
import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
import { RdxBadge } from "@repo/rdx-ui/components";
import { Button, Card, CardContent, CardHeader } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { CircleIcon, LandmarkIcon, PlusIcon } from "lucide-react";
@ -23,8 +23,6 @@ export const TaxRegimesSettingsPage = () => {
if (ctrl.pageError) {
return (
<RdxPageContainer width="full">
<div className="mx-auto w-full max-w-3xl">
<PageErrorState
description={ctrl.pageError.description}
primaryAction={
@ -42,8 +40,6 @@ export const TaxRegimesSettingsPage = () => {
title={ctrl.pageError.title}
variant={ctrl.pageError.variant}
/>
</div>
</RdxPageContainer>
);
}

14
modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-status-segmented-filter.tsx
View File

@ -127,7 +127,8 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
}: IssuedInvoicesStatusSegmentedFilterProps) => {
const { t } = useTranslation();
const handleValueChange = (nextValue: string) => {
const handleValueChange = (nextValues: string[]) => {
const nextValue = nextValues[0];
if (!(nextValue && isIssuedInvoiceStatusFilter(nextValue)) || nextValue === value) {
return;
}
@ -138,21 +139,22 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
return (
<ToggleGroup
aria-label={t("pages.issued_invoices.list.filters.status.label", "Filtrar por estado")}
className="flex w-full flex-wrap justify-start gap-1"
className="flex w-full flex-wrap justify-start gap-4"
disabled={disabled}
multiple={false}
onValueChange={handleValueChange}
size="sm"
spacing={1}
type="single"
value={value}
value={[value]}
variant="outline"
>
{ISSUED_INVOICE_STATUS_FILTER_OPTIONS.map((option) => (
<ToggleGroupItem
className={cn(
"group h-auto min-w-fit rounded-full border-transparent px-3 py-2 text-xs shadow-none transition-colors sm:text-sm",
"group h-auto min-w-fit rounded-md border-transparent px-3 py-2 text-xs sm:text-sm shadow-none transition-colors",
"text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground",
"data-[state=on]:shadow-none",
option.activeClassName
)}
key={option.value}
@ -164,7 +166,7 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
value={option.value}
>
<span className="flex items-center gap-2">
{option.icon ? <option.icon className="size-3.5" /> : null}
{option.icon ? <option.icon className="size-4" /> : null}
<span>
{t(
`catalog.issued_invoices.status.${option.value.toLowerCase()}.label`,

9
modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx
View File

@ -3,6 +3,7 @@ import { useReturnToNavigation } from "@erp/core/hooks";
import {
LogoVerifactu,
RdxPageContainer,
RdxPageContent,
RdxPageFrame,
RdxPageHeader,
} from "@repo/rdx-ui/components";
@ -65,6 +66,7 @@ export const ListIssuedInvoicesPage = () => {
return (
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState
description={pageError.description}
primaryAction={
@ -93,6 +95,7 @@ export const ListIssuedInvoicesPage = () => {
title={pageError.title}
variant={pageError.variant}
/>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
@ -100,7 +103,8 @@ export const ListIssuedInvoicesPage = () => {
return (
<RdxPageFrame>
<RdxPageContainer className="space-y-6" width="full">
<RdxPageContainer width="full">
<RdxPageContent>
<RdxPageHeader
actions={
<Button
@ -116,7 +120,7 @@ export const ListIssuedInvoicesPage = () => {
title={t("pages.issued_invoices.list.title")}
/>
<div className="mx-auto w-full space-y-4">
<div className="space-y-4">
{hasRefreshError && refreshError ? (
<ErrorAlert message={refreshError.message} title={refreshError.title} />
) : null}
@ -172,6 +176,7 @@ export const ListIssuedInvoicesPage = () => {
{listCtrl.data.totalItems === 0 ? <IssuedInvoicesEmptyGrid /> : null}
</div>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);

15
modules/customer-invoices/src/web/proformas/list/ui/pages/list-proformas-page.tsx
View File

@ -1,6 +1,11 @@
import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
import { useDataSource, useReturnToNavigation } from "@erp/core/hooks";
import { type DataTableMeta, RdxPageContainer } from "@repo/rdx-ui/components";
import {
type DataTableMeta,
RdxPageContainer,
RdxPageContent,
RdxPageFrame,
} from "@repo/rdx-ui/components";
import { showErrorToast, showSuccessToast } from "@repo/rdx-ui/helpers";
import {
Button,
@ -458,8 +463,9 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
if (pageError) {
return (
<RdxPageContainer width="full">
<div className="mx-auto w-full max-w-3xl">
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState
description={pageError.description}
primaryAction={
@ -480,8 +486,9 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
title={pageError.title}
variant={pageError.variant}
/>
</div>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
}

2
modules/customer-invoices/src/web/proformas/list/ui/pages/scoped-list-proformas-page-view.tsx
View File

@ -46,9 +46,9 @@ export const ScopedListProformasPageView = ({
{content}
</RdxPageContent>
</RdxPageContainer>
{dialogs}
</RdxPageContainer>
</RdxPageFrame>
);
};

10
modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.tsx
View File

@ -4,6 +4,8 @@ import {
DataTableColumnHeader,
RdxBadge,
RdxPageContainer,
RdxPageContent,
RdxPageFrame,
type RdxRowAction,
RdxRowActions,
SkeletonDataTable,
@ -267,8 +269,9 @@ export const ListRecurringProformasPage = () => {
if (hasBlockingError && pageError) {
return (
<RdxPageContainer width="full">
<div className="mx-auto w-full max-w-3xl">
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState
description={pageError.description}
primaryAction={{
@ -279,8 +282,9 @@ export const ListRecurringProformasPage = () => {
title={pageError.title}
variant="unknown"
/>
</div>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
}

2
modules/customers/src/web/list/ui/pages/list-customers-page-view.tsx
View File

@ -46,9 +46,9 @@ export const ListCustomersPageView = ({
{content}
</RdxPageContent>
</RdxPageContainer>
{dialogs}
</RdxPageContainer>
</RdxPageFrame>
);
};

4
modules/customers/src/web/list/ui/pages/list-customers-page.tsx
View File

@ -1,6 +1,6 @@
import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
import { useReturnToNavigation } from "@erp/core/hooks";
import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import {
Button,
ResizableHandle,
@ -93,6 +93,7 @@ export const ListCustomersPage = () => {
return (
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState
description={pageError.description}
primaryAction={
@ -111,6 +112,7 @@ export const ListCustomersPage = () => {
title={pageError.title}
variant={pageError.variant}
/>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);

2
modules/suppliers/src/web/list/ui/suppliers-list-page.tsx
View File

@ -39,6 +39,7 @@ export const SuppliersListPage = () => {
return (
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState
description={t("list.error.description")}
primaryAction={{
@ -50,6 +51,7 @@ export const SuppliersListPage = () => {
title={t("list.error.title")}
variant="unknown"
/>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);