feat: eliminar la clase paginationWrapper y ajustar la lógica de paginación en los componentes de movimientos y clientes

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);

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<TextObjectFilterResult[]>([]);
     const [clientId, setClientId] = useState<string>("");
@@ -599,6 +601,28 @@ export default function CashFlowMovementsList() {
             });
     }, [SessionInfo.userId]);
 
+    useEffect(() => {
+        if (movements && movements.pages > 1) {
+            bottomToolbar.set(
+                <div style={{ display: "flex", justifyContent: "center", width: "100%" }}>
+                    <PaginationControls
+                        current={movements.page}
+                        size={pageSize}
+                        max={movements.pages}
+                        onChange={loadMovements}
+                        inheritColor
+                    />
+                </div>
+            );
+        } else {
+            bottomToolbar.set(<></>);
+        }
+
+        return () => {
+            bottomToolbar.clear();
+        };
+    }, [movements?.page, movements?.pages, pageSize]);
+
     const renderMovementMeta = (movement: ICashFlow) => {
         const details = [
             movement.paymentMethod ? getPaymentMethodName(movement.paymentMethod) : null,
@@ -946,20 +970,7 @@ export default function CashFlowMovementsList() {
                                 );
                             })}
                         </section>
-
-                        {movements && movements.pages > 1 && (
-                            <div className={style.paginationWrapper}>
-                                <PaginationControls
-                                    current={movements.page}
-                                    size={pageSize}
-                                    max={movements.pages}
-                                    onChange={loadMovements}
-                                />
                     </div>
-                        )}
-                    </div>
-
-                    <div style={{ marginTop: "15px" }}></div>
 
                     {invoiceDraft && (
                         <div className={style.invoiceModalBackdrop} role="presentation">

txclient/src/app/admin/(organization-profile)/org/profile/[id]/cash/page.tsx

@@ -15,6 +15,7 @@ import { PaginateCashFlowParams, PaginateCashFlowResults } from "@core/Models/Ca
 import { useSessionStore } from "@core/Store/Sesion.Store";
 import { ArcaWsfeLastVoucherResult, cashFlowPaginate, getArcaWsfeLastVoucher } from "./Cash.Service";
 import { useAlert } from "@core/Store/Alert.Store";
+import { useBottomToolbarStore } from "@store/BottomToolbar.Store";
 import { IconButton } from "@mui/material";
 import RetirarIcon from "@mui/icons-material/CallMadeOutlined";
 import DepositarIcon from "@mui/icons-material/SouthWestOutlined";
@@ -38,6 +39,7 @@ export default function OrganizationCashFlowDetail() {
     const eventHandler = useEventHandlerStore();
     const SessionInfo = useSessionStore();
     const { goTo } = useNavigation();
+    const bottomToolbar = useBottomToolbarStore();
 
     const [dateFrom, setDateFrom] = useState<Dayjs>(dayjs().startOf("day"));
     const [dateTo, setDateTo] = useState<Dayjs>(dayjs().endOf("day"));
@@ -49,6 +51,11 @@ export default function OrganizationCashFlowDetail() {
 
     useEffect(() => {
         eventHandler.setEventType(EVENT_TYPES.SLEEP);
+        bottomToolbar.set(<></>);
+
+        return () => {
+            bottomToolbar.clear();
+        };
     }, []);
 
     useEffect(() => {

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;

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<number>(
         parseInt(
@@ -172,6 +174,28 @@ export default function ClientsGrid() {
             });
     };
 
+    useEffect(() => {
+        if (clients && clients.pages > 1) {
+            bottomToolbar.set(
+                <div style={{ display: "flex", justifyContent: "center", width: "100%" }}>
+                    <PaginationControls
+                        current={clients.page}
+                        size={pageSize}
+                        max={clients.pages}
+                        onChange={(page, size) => loadClients(page, size)}
+                        inheritColor
+                    />
+                </div>
+            );
+        } 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.
                     </div>
                 )}
-                
-                {clients && clients.pages > 1 && (
-                    <div className={pageStyle.paginationWrapper}>
-                        <PaginationControls
-                            current={clients.page}
-                            size={pageSize}
-                            max={clients.pages}
-                            onChange={(page, size) => loadClients(page, size)}
-                        />
-                    </div>
-                )}
             </div>
         </>
     );

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 (
-        <div className={style.paginationControls}>
+        <div
-            <IconButton onClick={handlePrevious}>
+            className={style.paginationControls}
+            style={inheritColor ? { color: "var(--white)" } : undefined}
+        >
+            <IconButton color={inheritColor ? "inherit" : undefined} onClick={handlePrevious}>
                 <ArrowBackwardIcon sx={{ fontSize: 24 }} />
             </IconButton>
-            <span className={style.paginationLabel}>
+            <span
+                className={style.paginationLabel}
+                style={inheritColor ? { color: "var(--white)" } : undefined}
+            >
                 {current} / {max}
             </span>
-            <IconButton onClick={handleNext}>
+            <IconButton color={inheritColor ? "inherit" : undefined} onClick={handleNext}>
                 <ArrowForwardIcon sx={{ fontSize: 24 }} />
             </IconButton>
         </div>