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

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

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

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

@ -82,7 +82,7 @@ RdxPageContent
→ composición de los hijos principales → 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 ## 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> </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. - 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`. - Búsqueda, filtros y controles viven en `DataTable.topContent`.
- TanStack Query conserva los datos remotos y la paginación server-side. - 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. - 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`. - 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. - 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. 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. 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. `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 ```tsx
<RdxPageContent> <RdxPageContent>
{error ? <ErrorAlert /> : null} {error ? <ErrorAlert /> : null}

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

@ -36,16 +36,18 @@ export const AuditPage = () => {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="content"> <RdxPageContainer width="content">
<PageErrorState <RdxPageContent>
description={t("audit.error.load")} <PageErrorState
primaryAction={{ description={t("audit.error.load")}
label: t("audit.retry"), primaryAction={{
onClick: retry, label: t("audit.retry"),
isLoading: controller.isFetching, onClick: retry,
}} isLoading: controller.isFetching,
title={t("audit.error.load")} }}
variant="unknown" title={t("audit.error.load")}
/> variant="unknown"
/>
</RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );
@ -96,9 +98,9 @@ export const AuditPage = () => {
)} )}
</div> </div>
</div> </div>
<AuditEntrySheet entryId={controller.entry} onClose={controller.closeEntry} />
</RdxPageContent> </RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
<AuditEntrySheet entryId={controller.entry} onClose={controller.closeEntry} />
</RdxPageFrame> </RdxPageFrame>
); );
}; };

40
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 { PageErrorState } from "@erp/core/components";
import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components"; import { RdxBadge } from "@repo/rdx-ui/components";
import { import {
Button, Button,
Card, Card,
@ -30,27 +30,23 @@ export const PaymentMethodsSettingsPage = () => {
if (ctrl.pageError) { if (ctrl.pageError) {
return ( return (
<RdxPageContainer width="full"> <PageErrorState
<div className="mx-auto w-full max-w-3xl"> description={ctrl.pageError.description}
<PageErrorState primaryAction={
description={ctrl.pageError.description} ctrl.pageError.canRetry
primaryAction={ ? {
ctrl.pageError.canRetry label: ctrl.isRetrying
? { ? t("settings.paymentMethods.pageError.actions.retrying")
label: ctrl.isRetrying : t("settings.paymentMethods.pageError.actions.retry"),
? t("settings.paymentMethods.pageError.actions.retrying") onClick: ctrl.retry,
: t("settings.paymentMethods.pageError.actions.retry"), isLoading: ctrl.isRetrying,
onClick: ctrl.retry, }
isLoading: ctrl.isRetrying, : undefined
} }
: undefined reference={ctrl.pageError.reference}
} title={ctrl.pageError.title}
reference={ctrl.pageError.reference} variant={ctrl.pageError.variant}
title={ctrl.pageError.title} />
variant={ctrl.pageError.variant}
/>
</div>
</RdxPageContainer>
); );
} }

39
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 { PageErrorState } from "@erp/core/components";
import { RdxPageContainer } from "@repo/rdx-ui/components";
import { import {
Button, Button,
Card, Card,
@ -38,27 +37,23 @@ export const PaymentTermsSettingsPage = () => {
if (ctrl.pageError) { if (ctrl.pageError) {
return ( return (
<RdxPageContainer width="full"> <PageErrorState
<div className="mx-auto w-full max-w-3xl"> description={ctrl.pageError.description}
<PageErrorState primaryAction={
description={ctrl.pageError.description} ctrl.pageError.canRetry
primaryAction={ ? {
ctrl.pageError.canRetry label: ctrl.isRetrying
? { ? t("settings.paymentTerms.pageError.actions.retrying")
label: ctrl.isRetrying : t("settings.paymentTerms.pageError.actions.retry"),
? t("settings.paymentTerms.pageError.actions.retrying") onClick: ctrl.retry,
: t("settings.paymentTerms.pageError.actions.retry"), isLoading: ctrl.isRetrying,
onClick: ctrl.retry, }
isLoading: ctrl.isRetrying, : undefined
} }
: undefined reference={ctrl.pageError.reference}
} title={ctrl.pageError.title}
reference={ctrl.pageError.reference} variant={ctrl.pageError.variant}
title={ctrl.pageError.title} />
variant={ctrl.pageError.variant}
/>
</div>
</RdxPageContainer>
); );
} }

40
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 { 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 { Button, Card, CardContent, CardHeader } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils"; import { cn } from "@repo/shadcn-ui/lib/utils";
import { CircleIcon, LandmarkIcon, PlusIcon } from "lucide-react"; import { CircleIcon, LandmarkIcon, PlusIcon } from "lucide-react";
@ -23,27 +23,23 @@ export const TaxRegimesSettingsPage = () => {
if (ctrl.pageError) { if (ctrl.pageError) {
return ( return (
<RdxPageContainer width="full"> <PageErrorState
<div className="mx-auto w-full max-w-3xl"> description={ctrl.pageError.description}
<PageErrorState primaryAction={
description={ctrl.pageError.description} ctrl.pageError.canRetry
primaryAction={ ? {
ctrl.pageError.canRetry label: ctrl.isRetrying
? { ? t("settings.taxRegimes.pageError.actions.retrying")
label: ctrl.isRetrying : t("settings.taxRegimes.pageError.actions.retry"),
? t("settings.taxRegimes.pageError.actions.retrying") onClick: ctrl.retry,
: t("settings.taxRegimes.pageError.actions.retry"), isLoading: ctrl.isRetrying,
onClick: ctrl.retry, }
isLoading: ctrl.isRetrying, : undefined
} }
: undefined reference={ctrl.pageError.reference}
} title={ctrl.pageError.title}
reference={ctrl.pageError.reference} variant={ctrl.pageError.variant}
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) => { }: IssuedInvoicesStatusSegmentedFilterProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const handleValueChange = (nextValue: string) => { const handleValueChange = (nextValues: string[]) => {
const nextValue = nextValues[0];
if (!(nextValue && isIssuedInvoiceStatusFilter(nextValue)) || nextValue === value) { if (!(nextValue && isIssuedInvoiceStatusFilter(nextValue)) || nextValue === value) {
return; return;
} }
@ -138,21 +139,22 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
return ( return (
<ToggleGroup <ToggleGroup
aria-label={t("pages.issued_invoices.list.filters.status.label", "Filtrar por estado")} 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} disabled={disabled}
multiple={false}
onValueChange={handleValueChange} onValueChange={handleValueChange}
size="sm" size="sm"
spacing={1} spacing={1}
type="single" value={[value]}
value={value}
variant="outline" variant="outline"
> >
{ISSUED_INVOICE_STATUS_FILTER_OPTIONS.map((option) => ( {ISSUED_INVOICE_STATUS_FILTER_OPTIONS.map((option) => (
<ToggleGroupItem <ToggleGroupItem
className={cn( 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", "text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground",
"data-[state=on]:shadow-none", "data-[state=on]:shadow-none",
option.activeClassName option.activeClassName
)} )}
key={option.value} key={option.value}
@ -164,7 +166,7 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
value={option.value} value={option.value}
> >
<span className="flex items-center gap-2"> <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> <span>
{t( {t(
`catalog.issued_invoices.status.${option.value.toLowerCase()}.label`, `catalog.issued_invoices.status.${option.value.toLowerCase()}.label`,

199
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 { import {
LogoVerifactu, LogoVerifactu,
RdxPageContainer, RdxPageContainer,
RdxPageContent,
RdxPageFrame, RdxPageFrame,
RdxPageHeader, RdxPageHeader,
} from "@repo/rdx-ui/components"; } from "@repo/rdx-ui/components";
@ -65,34 +66,36 @@ export const ListIssuedInvoicesPage = () => {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="content"> <RdxPageContainer width="content">
<PageErrorState <RdxPageContent>
description={pageError.description} <PageErrorState
primaryAction={ description={pageError.description}
pageError.canRetry primaryAction={
? { pageError.canRetry
label: isRetrying ? {
? t("pages.issued_invoices.list.actions.retrying") label: isRetrying
: t("pages.issued_invoices.list.actions.retry"), ? t("pages.issued_invoices.list.actions.retrying")
onClick: retryList, : t("pages.issued_invoices.list.actions.retry"),
isLoading: isRetrying, onClick: retryList,
} isLoading: isRetrying,
: { }
label: t("pages.issued_invoices.list.actions.go_home"), : {
onClick: () => navigate("/"), label: t("pages.issued_invoices.list.actions.go_home"),
} onClick: () => navigate("/"),
} }
reference={pageError.reference} }
secondaryAction={ reference={pageError.reference}
pageError.canRetry secondaryAction={
? { pageError.canRetry
label: t("pages.issued_invoices.list.actions.go_home"), ? {
onClick: () => navigate("/"), label: t("pages.issued_invoices.list.actions.go_home"),
} onClick: () => navigate("/"),
: undefined }
} : undefined
title={pageError.title} }
variant={pageError.variant} title={pageError.title}
/> variant={pageError.variant}
/>
</RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );
@ -100,78 +103,80 @@ export const ListIssuedInvoicesPage = () => {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer className="space-y-6" width="full"> <RdxPageContainer width="full">
<RdxPageHeader <RdxPageContent>
actions={ <RdxPageHeader
<Button actions={
aria-label={t("pages.issued_invoices.create.title")} <Button
className="hidden" aria-label={t("pages.issued_invoices.create.title")}
onClick={() => navigate("/issued-invoices/create")} className="hidden"
> onClick={() => navigate("/issued-invoices/create")}
<PlusIcon aria-hidden className="mr-2 size-4" /> >
{t("pages.issued_invoices.create.title")} <PlusIcon aria-hidden className="mr-2 size-4" />
</Button> {t("pages.issued_invoices.create.title")}
} </Button>
description={t("pages.issued_invoices.list.description")}
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}
<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>
<IssuedInvoicesGrid
columns={columns}
data={listCtrl.data}
fetching={listCtrl.isFetching}
loading={listCtrl.isLoading}
onPageChange={listCtrl.setPageIndex}
onPageSizeChange={listCtrl.setPageSize}
onRowClick={handleOpenDetail}
onSortChange={listCtrl.setSort}
pageIndex={listCtrl.pageIndex}
pageSize={listCtrl.pageSize}
searching={isSearchPending}
sort={listCtrl.sort}
topContent={
<div className="space-y-5">
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
<div className="w-full">
<SimpleSearchInput
loading={listCtrl.isLoading}
onPendingChange={setIsSearchPending}
onSearchChange={listCtrl.setSearchValue}
placeholder={t("pages.issued_invoices.list.search_placeholder")}
value={listCtrl.search}
/>
</div>
</div>
<IssuedInvoicesStatusSegmentedFilter
counts={listCtrl.data.statusCounts}
disabled={listCtrl.isLoading}
onValueChange={listCtrl.setStatusFilter}
value={listCtrl.statusFilter}
/>
</div>
} }
description={t("pages.issued_invoices.list.description")}
title={t("pages.issued_invoices.list.title")}
/> />
{listCtrl.data.totalItems === 0 ? <IssuedInvoicesEmptyGrid /> : null} <div className="space-y-4">
</div> {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>
<IssuedInvoicesGrid
columns={columns}
data={listCtrl.data}
fetching={listCtrl.isFetching}
loading={listCtrl.isLoading}
onPageChange={listCtrl.setPageIndex}
onPageSizeChange={listCtrl.setPageSize}
onRowClick={handleOpenDetail}
onSortChange={listCtrl.setSort}
pageIndex={listCtrl.pageIndex}
pageSize={listCtrl.pageSize}
searching={isSearchPending}
sort={listCtrl.sort}
topContent={
<div className="space-y-5">
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
<div className="w-full">
<SimpleSearchInput
loading={listCtrl.isLoading}
onPendingChange={setIsSearchPending}
onSearchChange={listCtrl.setSearchValue}
placeholder={t("pages.issued_invoices.list.search_placeholder")}
value={listCtrl.search}
/>
</div>
</div>
<IssuedInvoicesStatusSegmentedFilter
counts={listCtrl.data.statusCounts}
disabled={listCtrl.isLoading}
onValueChange={listCtrl.setStatusFilter}
value={listCtrl.statusFilter}
/>
</div>
}
/>
{listCtrl.data.totalItems === 0 ? <IssuedInvoicesEmptyGrid /> : null}
</div>
</RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );

57
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 { PageErrorState, SimpleSearchInput } from "@erp/core/components";
import { useDataSource, useReturnToNavigation } from "@erp/core/hooks"; 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 { showErrorToast, showSuccessToast } from "@repo/rdx-ui/helpers";
import { import {
Button, Button,
@ -458,30 +463,32 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
if (pageError) { if (pageError) {
return ( return (
<RdxPageContainer width="full"> <RdxPageFrame>
<div className="mx-auto w-full max-w-3xl"> <RdxPageContainer width="content">
<PageErrorState <RdxPageContent>
description={pageError.description} <PageErrorState
primaryAction={ description={pageError.description}
pageError.canRetry primaryAction={
? { pageError.canRetry
label: isRetrying ? {
? t("pages.proformas.list.actions.retrying") label: isRetrying
: t("pages.proformas.list.actions.retry"), ? t("pages.proformas.list.actions.retrying")
onClick: retryList, : t("pages.proformas.list.actions.retry"),
isLoading: isRetrying, onClick: retryList,
} isLoading: isRetrying,
: { }
label: t("pages.proformas.list.actions.go_home"), : {
onClick: goHome, label: t("pages.proformas.list.actions.go_home"),
} onClick: goHome,
} }
reference={pageError.reference} }
title={pageError.title} reference={pageError.reference}
variant={pageError.variant} title={pageError.title}
/> variant={pageError.variant}
</div> />
</RdxPageContainer> </RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
); );
} }

4
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} {content}
</RdxPageContent> </RdxPageContent>
{dialogs}
</RdxPageContainer> </RdxPageContainer>
{dialogs}
</RdxPageFrame> </RdxPageFrame>
); );
}; };

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

@ -4,6 +4,8 @@ import {
DataTableColumnHeader, DataTableColumnHeader,
RdxBadge, RdxBadge,
RdxPageContainer, RdxPageContainer,
RdxPageContent,
RdxPageFrame,
type RdxRowAction, type RdxRowAction,
RdxRowActions, RdxRowActions,
SkeletonDataTable, SkeletonDataTable,
@ -267,20 +269,22 @@ export const ListRecurringProformasPage = () => {
if (hasBlockingError && pageError) { if (hasBlockingError && pageError) {
return ( return (
<RdxPageContainer width="full"> <RdxPageFrame>
<div className="mx-auto w-full max-w-3xl"> <RdxPageContainer width="content">
<PageErrorState <RdxPageContent>
description={pageError.description} <PageErrorState
primaryAction={{ description={pageError.description}
label: t("recurring_proformas.list.error.retry"), primaryAction={{
onClick: retryList, label: t("recurring_proformas.list.error.retry"),
isLoading: isRetrying, onClick: retryList,
}} isLoading: isRetrying,
title={pageError.title} }}
variant="unknown" title={pageError.title}
/> variant="unknown"
</div> />
</RdxPageContainer> </RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
); );
} }

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

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

40
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 { PageErrorState, SimpleSearchInput } from "@erp/core/components";
import { useReturnToNavigation } from "@erp/core/hooks"; import { useReturnToNavigation } from "@erp/core/hooks";
import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components"; import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
import { import {
Button, Button,
ResizableHandle, ResizableHandle,
@ -93,24 +93,26 @@ export const ListCustomersPage = () => {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="content"> <RdxPageContainer width="content">
<PageErrorState <RdxPageContent>
description={pageError.description} <PageErrorState
primaryAction={ description={pageError.description}
pageError.canRetry primaryAction={
? { pageError.canRetry
label: isRetrying ? t("list.actions.retrying") : t("list.actions.retry"), ? {
onClick: retryList, label: isRetrying ? t("list.actions.retrying") : t("list.actions.retry"),
isLoading: isRetrying, onClick: retryList,
} isLoading: isRetrying,
: { }
label: t("list.actions.go_home"), : {
onClick: goHome, label: t("list.actions.go_home"),
} onClick: goHome,
} }
reference={pageError.reference} }
title={pageError.title} reference={pageError.reference}
variant={pageError.variant} title={pageError.title}
/> variant={pageError.variant}
/>
</RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );

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

@ -39,17 +39,19 @@ export const SuppliersListPage = () => {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="content"> <RdxPageContainer width="content">
<PageErrorState <RdxPageContent>
description={t("list.error.description")} <PageErrorState
primaryAction={{ description={t("list.error.description")}
label: t("common.actions.retry"), primaryAction={{
onClick: async () => { label: t("common.actions.retry"),
await controller.refetch(); onClick: async () => {
}, await controller.refetch();
}} },
title={t("list.error.title")} }}
variant="unknown" title={t("list.error.title")}
/> variant="unknown"
/>
</RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );