feat: eliminar componente Filterable y ajustar la funcionalidad de filtrado en los componentes de ubicación

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

@@ -31,7 +31,6 @@ import filterObjects from "@components/TextObjectFilter/Filter.Service";
 
 import dayjs, { ManipulateType } from "dayjs";
 import "dayjs/locale/es";
-import Filterable from "@core/app/components/Filterable/Filterable";
 import { useFilterStore } from "@core/Store/Filter.Store";
 import { TextObjectFilterResult } from "@core/Models/TextObjectFilter.model";
 import { FindEmployeesParams } from "@core/Models/Collaborators.model";
@@ -496,8 +495,7 @@ export default function OrganizationProfile() {
     return (
         <>
             <Addable onClick={handleAdd}>
-                <Filterable />
-                <Location />
+                <Location showFilter />
                 <div className={style.appointmentsTitle}>
                     <h4>{dayjs(currentDate).format("dddd DD [de] MMMM, YYYY")}</h4>
                 </div>

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

@@ -21,7 +21,6 @@ import {
 } from "@core/Models/CashFlow.model";
 import { cashFlowPaginate, createInvoiceFromCashMovement, findInvoices, findOrganizationFiscalProfiles, Invoice, OrganizationFiscalProfile } from "../Cash.Service";
 import SecureByPlan, { SECURE_CONTENTS } from "@core/app/components/SecureByPlan/SecureByPlan";
-import Filterable from "@core/app/components/Filterable/Filterable";
 import { TextObjectFilterResult } from "@core/Models/TextObjectFilter.model";
 import { TextObjectModalContent } from "@core/Store/TextObjectModal.Store";
 import TextObjectFilterItem from "@core/app/components/TextObjectFilterItem/TextObjectFilterItem";
@@ -862,8 +861,7 @@ export default function CashFlowMovementsList() {
 
     return (
         <>
-            <Location />
-            <Filterable />
+            <Location showFilter />
 
             <SecureByPlan content={SECURE_CONTENTS.PAYMENTS} companyId={id}>
                 <>

txclient/src/app/admin/(organization-profile)/org/profile/[id]/clients/page.module.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    top: 60px; /* Below Location/Filterable */
+    top: 60px; /* Below Location */
     left: 0;
     right: 0;
     bottom: 10px;

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

@@ -20,7 +20,6 @@ import {
 } from "@core/Models/Clients.model";
 import { useNavigation } from "@hooks/goto";
 import { FilterData, useFilterStore } from "@core/Store/Filter.Store";
-import Filterable from "@core/app/components/Filterable/Filterable";
 import Textbox from "@core/app/components/Textbox/Textbox";
 
 type UrlData = {
@@ -179,8 +178,7 @@ export default function ClientsGrid() {
 
     return (
         <>
-            <Filterable />
-            <Location />
+            <Location showFilter />
             <div className={pageStyle.pageContainer}>
                 {clients?.data && clients.data.length > 0 ? (
                     <div className={pageStyle.clientsGrid}>

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

@@ -29,7 +29,6 @@ import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import { useConfirmStore } from "@core/Store/Confirm.Store";
 import { useAlert } from "@core/Store/Alert.Store";
 import Textbox from "@components/Textbox/Textbox";
-import Filterable from "@core/app/components/Filterable/Filterable";
 import { TextObjectFilterResult } from "@core/Models/TextObjectFilter.model";
 import { TextObjectModalContent } from "@core/Store/TextObjectModal.Store";
 import TextObjectFilterItem from "@core/app/components/TextObjectFilterItem/TextObjectFilterItem";
@@ -334,8 +333,7 @@ export default function DiscountsEmailGrid() {
 
     return (
         <>
-            <Location />
-            <Filterable />
+            <Location showFilter />
 
             <div style={{ display: "flex", justifyContent: "center", marginTop: "15px" }}>
                 <ThemeProvider theme={turnosXpressTheme}>

txclient/src/app/components/Filterable/Filterable.module.css

@@ -1,36 +0,0 @@
-.buttonFilter {
-    position: absolute;
-    z-index: 200;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 5px;
-    right: -10px;
-    background-color: transparent;
-    color: var(--gray-dark);
-    border-radius: 50%;
-    cursor: pointer;
-    transition:
-        width 0.25s ease-in-out,
-        height 0.25s ease-in-out;
-
-    width: 52px;
-    height: 52px;
-}
-
-.buttonFilter > svg {
-    display: flex;
-    opacity: 1;
-    background: transparent;
-    animation: buttonFilterPulseShadow 1.5s ease-in-out infinite;
-}
-
-@keyframes buttonFilterPulseShadow {
-    0%,
-    100% {
-        filter: drop-shadow(0px 2px 1px var(--gray-light));
-    }
-    50% {
-        filter: drop-shadow(0px 2px 4px var(--gray-dark));
-    }
-}

txclient/src/app/components/Filterable/Filterable.tsx

@@ -1,27 +0,0 @@
-"use client";
-import { ReactNode } from "react";
-import style from "./Filterable.module.css";
-import FilterAltOutlinedIcon from "@mui/icons-material/FilterAltOutlined";
-import { useFilterStore } from "@core/Store/Filter.Store";
-
-interface FilterableProps {
-    children?: ReactNode;
-}
-
-export default function Filterable(props: FilterableProps): React.ReactElement {
-    const filter = useFilterStore();
-
-    return (
-        <>
-            {props.children}
-            <div
-                className={style.buttonFilter}
-                onClick={() => {
-                    filter.toggle();
-                }}
-            >
-                <FilterAltOutlinedIcon sx={{ fontSize: "32px" }} />
-            </div>
-        </>
-    );
-}

txclient/src/app/components/Location/Location.module.css

@@ -24,8 +24,34 @@
     font-size: 24px;
 }
 
+.locationTitleFilter {
+    padding-right: 64px;
+}
+
+.filterButton {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 52px;
+    height: 52px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--gray-dark);
+    cursor: pointer;
+}
+
+.filterButton:hover {
+    color: var(--black);
+}
+
 @media (max-width: 600px) {
     .locationContainer {
         left: 6px;
     }
-}
+}

txclient/src/app/components/Location/Location.tsx

@@ -2,18 +2,22 @@
 import { useRouter } from "next/navigation";
 import style from "./Location.module.css";
 import { useLocationStore } from "@store/Location.Store";
+import { useFilterStore } from "@store/Filter.Store";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Link from "@mui/material/Link";
 import HomeIcon from "@mui/icons-material/Home";
+import FilterAltOutlinedIcon from "@mui/icons-material/FilterAltOutlined";
 
 export interface LocationProps {
     bottomSeperation?: string;
+    showFilter?: boolean;
 }
 
 export default function Location(props: LocationProps) {
-    const { bottomSeperation = "55px" } = props;
+    const { bottomSeperation = "55px", showFilter = false } = props;
     const router = useRouter();
     const location = useLocationStore();
+    const filter = useFilterStore();
 
     const goTo = (path: string) => {
         router.push(path);
@@ -48,10 +52,26 @@ export default function Location(props: LocationProps) {
                         ))}
                     </Breadcrumbs>
                 </div>
-                <div className={style.locationTitle}>
+                <div
+                    className={
+                        showFilter
+                            ? `${style.locationTitle} ${style.locationTitleFilter}`
+                            : style.locationTitle
+                    }
+                >
                     {location.last()?.icon}
                     <h1>{location.last()?.title}</h1>
                 </div>
+                {showFilter && (
+                    <button
+                        className={style.filterButton}
+                        onClick={() => filter.toggle()}
+                        aria-label="Filtrar"
+                        title="Filtrar"
+                    >
+                        <FilterAltOutlinedIcon sx={{ fontSize: "32px" }} />
+                    </button>
+                )}
             </div>
             <div
                 style={{
@@ -63,4 +83,4 @@ export default function Location(props: LocationProps) {
             </div>
         </>
     );
-}
+}