feat: mejorar el componente FinancialWidget con un encabezado más accesible y limpio
This commit is contained in:
+9
-1
@@ -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");
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -99,16 +99,17 @@ export default function FinancialWidget({
|
||||
|
||||
if (!selectedOrgId) return null;
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<button
|
||||
className={styles.headerButton}
|
||||
type="button"
|
||||
onClick={() => setIsOpen((value) => !value)}
|
||||
>
|
||||
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
|
||||
@@ -134,9 +135,25 @@ export default function FinancialWidget({
|
||||
<OpenInNewOutlinedIcon fontSize="small" />
|
||||
Ver perfil
|
||||
</button>
|
||||
<span className={styles.toggleIcon}>{isOpen ? "−" : "+"}</span>
|
||||
</div>
|
||||
<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}>
|
||||
{header}
|
||||
{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
|
||||
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>
|
||||
{header}
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user