diff --git a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.module.css b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.module.css index 9e794c1..b0f24f0 100644 --- a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.module.css +++ b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.module.css @@ -188,12 +188,6 @@ text-align: center; } -.paginationWrapper { - display: flex; - justify-content: center; - margin-top: 18px; -} - .invoiceModalBackdrop { align-items: flex-end; background: rgba(15, 23, 42, 0.48); diff --git a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.tsx b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.tsx index ac2b4a8..c521d63 100644 --- a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.tsx +++ b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/movements/page.tsx @@ -38,8 +38,9 @@ import { CLIENT_ACCOUNT_MOVEMENT_TYPES, CLIENT_ACCOUNT_PAYMENT_METHODS, } from "@core/Models/ClientAccountMovements.model"; -import PaginationControls from "@components/PaginationControls/PaginationControls"; import { useAlert } from "@core/Store/Alert.Store"; +import { useBottomToolbarStore } from "@store/BottomToolbar.Store"; +import PaginationControls from "@components/PaginationControls/PaginationControls"; import style from "./page.module.css"; type UrlData = { @@ -436,6 +437,7 @@ export default function CashFlowMovementsList() { const eventHandler = useEventHandlerStore(); const alert = useAlert(); const filter = useFilterStore(); + const bottomToolbar = useBottomToolbarStore(); const [clientFilterData, setClientFilterData] = useState([]); const [clientId, setClientId] = useState(""); @@ -599,6 +601,28 @@ export default function CashFlowMovementsList() { }); }, [SessionInfo.userId]); + useEffect(() => { + if (movements && movements.pages > 1) { + bottomToolbar.set( +
+ +
+ ); + } else { + bottomToolbar.set(<>); + } + + return () => { + bottomToolbar.clear(); + }; + }, [movements?.page, movements?.pages, pageSize]); + const renderMovementMeta = (movement: ICashFlow) => { const details = [ movement.paymentMethod ? getPaymentMethodName(movement.paymentMethod) : null, @@ -946,21 +970,8 @@ export default function CashFlowMovementsList() { ); })} - - {movements && movements.pages > 1 && ( -
- -
- )} -
- {invoiceDraft && (
(dayjs().startOf("day")); const [dateTo, setDateTo] = useState(dayjs().endOf("day")); @@ -49,6 +51,11 @@ export default function OrganizationCashFlowDetail() { useEffect(() => { eventHandler.setEventType(EVENT_TYPES.SLEEP); + bottomToolbar.set(<>); + + return () => { + bottomToolbar.clear(); + }; }, []); useEffect(() => { diff --git a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.module.css b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.module.css index 24a8a3e..5874953 100644 --- a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.module.css +++ b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.module.css @@ -262,26 +262,6 @@ } } -.paginationWrapper { - padding: 16px 30px; - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(12px); - border-top: 1px solid rgba(226, 232, 240, 0.6); - display: flex; - justify-content: center; - z-index: 10; - border-bottom-left-radius: 24px; - border-bottom-right-radius: 24px; -} - -@media (max-width: 768px) { - .paginationWrapper { - padding: 12px 16px; - border-bottom-left-radius: 16px; - border-bottom-right-radius: 16px; - } -} - .emptyState { grid-column: 1 / -1; text-align: center; diff --git a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.tsx b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.tsx index 50e4bd3..0277e76 100644 --- a/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.tsx +++ b/txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.tsx @@ -10,6 +10,7 @@ import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined"; import PhoneOutlinedIcon from "@mui/icons-material/PhoneOutlined"; import Avatar from "@components/Avatar/Avatar"; import PaginationControls from "@components/PaginationControls/PaginationControls"; +import { useBottomToolbarStore } from "@store/BottomToolbar.Store"; import pageStyle from "./page.module.css"; import { findClientsByOrganization } from "./Clients.Service"; import { @@ -106,6 +107,7 @@ export default function ClientsGrid() { const eventHandler = useEventHandlerStore(); const filter = useFilterStore(); const { goTo } = useNavigation(); + const bottomToolbar = useBottomToolbarStore(); const [pageSize] = useState( parseInt( @@ -172,6 +174,28 @@ export default function ClientsGrid() { }); }; + useEffect(() => { + if (clients && clients.pages > 1) { + bottomToolbar.set( +
+ loadClients(page, size)} + inheritColor + /> +
+ ); + } else { + bottomToolbar.set(<>); + } + + return () => { + bottomToolbar.clear(); + }; + }, [clients?.page, clients?.pages, pageSize]); + const handleClientClick = (client: ClientRow) => { goTo("/admin/org/" + oid + "/client/" + client.id + "/profile"); }; @@ -227,17 +251,6 @@ export default function ClientsGrid() { No se encontraron clientes con los filtros aplicados.
)} - - {clients && clients.pages > 1 && ( -
- loadClients(page, size)} - /> -
- )} ); diff --git a/txclient/src/app/components/PaginationControls/PaginationControls.tsx b/txclient/src/app/components/PaginationControls/PaginationControls.tsx index 8d1e452..555dc0c 100644 --- a/txclient/src/app/components/PaginationControls/PaginationControls.tsx +++ b/txclient/src/app/components/PaginationControls/PaginationControls.tsx @@ -9,10 +9,11 @@ export interface PaginationControlProps { current: number; size: number; max: number; + inheritColor?: boolean; } export default function PaginationControls(props: PaginationControlProps) { - const { current, size, max, onChange = () => {} } = props; + const { current, size, max, onChange = () => {}, inheritColor = false } = props; useEffect(() => {}, [current]); @@ -36,14 +37,20 @@ export default function PaginationControls(props: PaginationControlProps) { }; return ( -
- +
+ - + {current} / {max} - +