feat: mejorar el componente FinancialWidget con un encabezado más accesible y limpio

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

@@ -12,6 +12,7 @@ import { useNavigation } from "@hooks/goto";
 import TextPhone from "@core/app/components/TextPhone/TextPhone";
 import MaterialAlert from "@mui/material/Alert";
 import { createClient } from "../Clients.Service";
+import { useBottomToolbarStore } from "@core/Store/BottomToolbar.Store";
 
 type UrlData = {
     id: string;
@@ -23,6 +24,7 @@ export default function ClientCreate() {
     const alert = useAlert();
     const SessionInfo = useSessionStore();
     const location = useLocationStore();
+    const bottomToolbar = useBottomToolbarStore();
     const eventHandler = useEventHandlerStore();
     const [firstName, setFirstName] = useState("");
     const [lastName, setLastName] = useState("");
@@ -39,6 +41,8 @@ export default function ClientCreate() {
     useEffect(() => {
         location.clear();
 
+        bottomToolbar.set(<></>);
+
         location.add({
             url: "/admin/org/profile/" + id,
             title: "Origanizacion",
@@ -56,6 +60,10 @@ export default function ClientCreate() {
             title: "Crear",
             icon: <ClientsIcon sx={{ fontSize: "32px", mr: "10px" }} />,
         });
+
+        return () => {
+            bottomToolbar.clear();
+        };
     }, []);
 
     useEffect(() => {
@@ -72,7 +80,7 @@ export default function ClientCreate() {
             })
                 .then((newClient) => {
                     alert.showSuccess(
-                        `El cliente ${newClient.firstName} ${newClient.lastName} ha sido creado`
+                        `El cliente ${newClient.firstName} ${newClient.lastName} ha sido creado`,
                     );
                     setTimeout(() => {
                         goTo("/admin/org/profile/" + id + "/clients");

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

@@ -27,15 +27,28 @@
     padding: 0;
     border: 0;
     background: transparent;
-    cursor: pointer;
     text-align: left;
 }
 
+.headerToggle {
+    display: block;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
 .title {
     font-size: 20px;
     font-weight: 700;
     color: var(--green-darkestX1);
     margin: 0;
+    flex: 1;
+    min-width: 0;
 }
 
 .toggleIcon {
@@ -45,13 +58,16 @@
     flex: 0 0 auto;
     width: 32px;
     height: 32px;
+    padding: 0;
     border-radius: 999px;
     background: var(--white);
     color: var(--green-darkestX1);
     border: 1px solid var(--green-darkestX1);
+    font-family: inherit;
     font-size: 22px;
     font-weight: 800;
     line-height: 1;
+    cursor: pointer;
 }
 
 .filters {

txclient/src/app/components/FinancialWidget/FinancialWidget.tsx

@@ -99,44 +99,61 @@ export default function FinancialWidget({
 
     if (!selectedOrgId) return null;
 
+    const header = (
+        <div className={styles.headerButton}>
+            <h3 className={styles.title}>
+                <button
+                    type="button"
+                    className={styles.headerToggle}
+                    onClick={() => setIsOpen((value) => !value)}
+                    aria-expanded={isOpen}
+                >
+                    Rendimiento Financiero {organizationName ? `- ${organizationName}` : ""}
+                </button>
+            </h3>
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                <button
+                    type="button"
+                    onClick={() => goTo(`/landing/org/${selectedOrgId}`)}
+                    style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        padding: "6px 12px",
+                        borderRadius: "999px",
+                        color: "var(--green-darkestX1)",
+                        border: "1px solid var(--green-darkestX1)",
+                        background: "var(--white)",
+                        textDecoration: "none",
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        transition: "all 0.2s ease",
+                    }}
+                    title="Ver perfil público de la organización"
+                >
+                    <OpenInNewOutlinedIcon fontSize="small" />
+                    Ver perfil
+                </button>
+                <button
+                    type="button"
+                    className={styles.toggleIcon}
+                    onClick={() => setIsOpen((value) => !value)}
+                    aria-expanded={isOpen}
+                    aria-label={
+                        isOpen ? "Colapsar métricas financieras" : "Expandir métricas financieras"
+                    }
+                >
+                    {isOpen ? "−" : "+"}
+                </button>
+            </div>
+        </div>
+    );
+
     if (error) {
         return (
             <div className={styles.container}>
-                <button
+                {header}
-                    className={styles.headerButton}
-                    type="button"
-                    onClick={() => setIsOpen((value) => !value)}
-                >
-                    <h3 className={styles.title}>
-                        Rendimiento Financiero {organizationName ? `- ${organizationName}` : ""}
-                    </h3>
-                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                        <button
-                            type="button"
-                            onClick={() => goTo(`/landing/org/${selectedOrgId}`)}
-                            style={{
-                                display: "inline-flex",
-                                alignItems: "center",
-                                gap: "6px",
-                                padding: "6px 12px",
-                                borderRadius: "999px",
-                                color: "var(--green-darkestX1)",
-                                border: "1px solid var(--green-darkestX1)",
-                                background: "var(--white)",
-                                textDecoration: "none",
-                                fontSize: "14px",
-                                fontWeight: 600,
-                                cursor: "pointer",
-                                transition: "all 0.2s ease",
-                            }}
-                            title="Ver perfil público de la organización"
-                        >
-                            <OpenInNewOutlinedIcon fontSize="small" />
-                            Ver perfil
-                        </button>
-                        <span className={styles.toggleIcon}>{isOpen ? "−" : "+"}</span>
-                    </div>
-                </button>
                 {isOpen && (
                     <div style={{ padding: "40px 20px", textAlign: "center", color: "#6b7280" }}>
                         <p style={{ fontWeight: "600", marginBottom: "8px", color: "#374151" }}>
@@ -160,41 +177,7 @@ export default function FinancialWidget({
 
     return (
         <div className={styles.container}>
-            <button
+            {header}
-                className={styles.headerButton}
-                type="button"
-                onClick={() => setIsOpen((value) => !value)}
-            >
-                <h3 className={styles.title}>
-                    Rendimiento Financiero {organizationName ? `- ${organizationName}` : ""}
-                </h3>
-                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                    <button
-                        type="button"
-                        onClick={() => goTo(`/landing/org/${selectedOrgId}`)}
-                        style={{
-                            display: "inline-flex",
-                            alignItems: "center",
-                            gap: "6px",
-                            padding: "6px 12px",
-                            borderRadius: "999px",
-                            color: "var(--green-darkestX1)",
-                            border: "1px solid var(--green-darkestX1)",
-                            background: "var(--white)",
-                            textDecoration: "none",
-                            fontSize: "14px",
-                            fontWeight: 600,
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                        }}
-                        title="Ver perfil público de la organización"
-                    >
-                        <OpenInNewOutlinedIcon fontSize="small" />
-                        Ver perfil
-                    </button>
-                    <span className={styles.toggleIcon}>{isOpen ? "−" : "+"}</span>
-                </div>
-            </button>
 
             {isOpen && (
                 <>