Implement code changes to enhance functionality and improve performance

- Dialog centrado (no bottom-sheet) con ThemeProvider
- Botones Cancelar/Guardar en texto plano (sin iconos), mismo patrón que Confirm.tsx
- Recibe valores actuales por props para no depender de store global
- Titulo dice 'Personalizar' solamente
- Cierre se hace con icono X en el title bar

server/src/Models/Companies/Companies.Interface.ts

@@ -380,4 +380,5 @@ export interface ICompaniesManager {
     sysAdminUpdate(data: SysAdminUpdateCompanyParams): Promise<void>;
     sysAdminSetBanned(data: SysAdminSetCompanyBannedParams): Promise<void>;
     sysAdminGetInsights(data: SysAdminCompanyInsightsParams): Promise<SysAdminCompanyInsightsResult>;
+    checkCompanyAdmin(data: { companyId: string; sessionUser: string }): Promise<boolean>;
 }

server/src/Models/Companies/Companies.ts

@@ -1221,6 +1221,19 @@ class CompaniesManager implements ICompaniesManager {
             },
         };
     }
+
+    public async checkCompanyAdmin(data: { companyId: string; sessionUser: string }): Promise<boolean> {
+        const filterData =
+            data.companyId.indexOf("-") >= 0 ? { slug: data.companyId } : { _id: data.companyId };
+
+        const company = await this.companies.findOne(filterData as any);
+
+        if (!company) {
+            return false;
+        }
+
+        return await EmployeesList.checkPermission(company, data.sessionUser, EmployeeRoles.ADMIN);
+    }
 }
 
 const CompaniesList = new CompaniesManager();

server/src/api/Companies/Companies.Controller.ts

@@ -405,3 +405,24 @@ export class CheckCompanyNameController extends Controller {
         }
     }
 }
+
+@Route("companies/check-admin")
+@Middlewares(authenticateMiddleware)
+export class CheckCompanyAdminController extends Controller {
+    @Response<ApiValidationError>(500, "Ha ocurrido un error")
+    @SuccessResponse(200, "Done")
+    @Post()
+    public async checkAdmin(
+        @Body() requestBody: { companyId: string; sessionUser: string }
+    ): Promise<{ isAdmin: boolean } | ApiValidationError> {
+        try {
+            const isAdmin = await new CompaniesService().checkCompanyAdmin(requestBody);
+            this.setStatus(200);
+            return { isAdmin };
+        } catch (e) {
+            const errorOccurred: Error = e as Error;
+            this.setStatus(500);
+            return new ApiValidationError(500, errorOccurred.message);
+        }
+    }
+}

server/src/api/Companies/Companies.Service.ts

@@ -112,4 +112,9 @@ export class CompaniesService {
         const isValid = await CompaniestList.isValidName({ name });
         return isValid;
     }
+
+    public async checkCompanyAdmin(data: { companyId: string; sessionUser: string }): Promise<boolean> {
+        await connect(`${process.env.DATABASE_CONNECTION}`);
+        return await CompaniestList.checkCompanyAdmin(data);
+    }
 }

txclient/src/app/landing/org/[oid]/HeaderEditPopup.tsx

@@ -0,0 +1,182 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Grid2, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import turnosXpressTheme from "@core/app/theme/turnosXpress";
+import Button from "@mui/material/Button";
+import { ThemeProvider } from "@emotion/react";
+import { PopoverPicker } from "@components/ColorPicker/ColorPicker";
+import ImagePicker from "@components/ImagePicker/ImagePicker";
+import { useAlert } from "@core/Store/Alert.Store";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { useOrganizationHeaderStore } from "@core/Store/OrganizationHeader.Store";
+import { updateOrganizationsById, uploadHeaderImage } from "./Org.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+
+interface HeaderEditPopupProps {
+    open: boolean;
+    onClose: () => void;
+    companyId: string;
+    headerColor: string;
+    headerFontColor: string;
+    headerFontShadowColor: string;
+    headerImage: string;
+    onSaved: () => void;
+}
+
+export default function HeaderEditPopup(props: HeaderEditPopupProps) {
+    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved } = props;
+    const alert = useAlert();
+    const SessionInfo = useSessionStore();
+    const organizationHeader = useOrganizationHeaderStore();
+
+    const [headerColorState, setHeaderColorState] = useState("");
+    const [headerFontColorState, setHeaderFontColorState] = useState("");
+    const [headerFontShadowColorState, setHeaderFontShadowColorState] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    // Sync local state when values change externally
+    useEffect(() => {
+        if (open) {
+            setHeaderColorState(headerColor || "");
+            setHeaderFontColorState(headerFontColor || "");
+            setHeaderFontShadowColorState(headerFontShadowColor || "");
+            setLoading(false);
+        }
+    }, [open, headerColor, headerFontColor, headerFontShadowColor]);
+
+    const handleSaveColors = async () => {
+        setLoading(true);
+
+        try {
+            const updData: UpdateCompanyParams = {
+                id: companyId,
+                headerColor: headerColorState,
+                headerFontColor: headerFontColorState,
+                headerFontShadowColor: headerFontShadowColorState,
+                sessionUser: SessionInfo.userId,
+            };
+
+            await updateOrganizationsById(updData);
+
+            organizationHeader.setHeaderColor(headerColorState);
+            organizationHeader.setHeaderFontColor(headerFontColorState);
+            organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
+
+            alert.showSuccess("Colores actualizados");
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar los colores";
+            alert.showError(formatted || "Error al guardar los colores");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setLoading(true);
+
+        try {
+            const formData = new FormData();
+            formData.append("companyId", companyId);
+            formData.append("sessionUser", SessionInfo.userId);
+            formData.append("file", file);
+
+            uploadHeaderImage(formData).then(() => {
+                alert.showSuccess("Imagen actualizada");
+                onSaved();
+            }).catch((error) => {
+                const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+                alert.showError(formatted || "Error al guardar la imagen");
+            }).finally(() => {
+                setLoading(false);
+            });
+        } catch (error) {
+            const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
+            alert.showError(formatted || "Error al guardar la imagen");
+            setLoading(false);
+        }
+    };
+
+    return (
+        <ThemeProvider theme={turnosXpressTheme}>
+            <Dialog
+                open={open}
+                onClose={onClose}
+                maxWidth="sm"
+                fullWidth
+                PaperProps={{
+                    sx: {
+                        borderRadius: 2,
+                    },
+                }}
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    Personalizar
+                    <IconButton onClick={onClose} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent dividers sx={{ p: 3 }}>
+                    {/* Colores */}
+                    <Grid2 container spacing={1} mb={3}>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fondo"
+                                color={headerColorState}
+                                onChange={(color: string) => {
+                                    setHeaderColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Fuente"
+                                color={headerFontColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                        <Grid2 size={4}>
+                            <PopoverPicker
+                                placeholder="Sombra"
+                                color={headerFontShadowColorState}
+                                onChange={(color: string) => {
+                                    setHeaderFontShadowColorState(color);
+                                }}
+                            />
+                        </Grid2>
+                    </Grid2>
+
+                    {/* Imagen */}
+                    <ImagePicker
+                        src={headerImage}
+                        alt="Cabecera"
+                        style={{ width: "100%", height: 120, borderRadius: 8 }}
+                        readOnly={false}
+                        onChange={handleImageChange}
+                        imageSizeSrc="/org-header-size.webp"
+                        mbLimit={5}
+                    />
+                </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2 }}>
+                    <Button onClick={onClose}>Cancelar</Button>
+                    <Button
+                        onClick={handleSaveColors}
+                        autoFocus
+                        color="success"
+                        variant="contained"
+                        disabled={loading}
+                    >
+                        Guardar
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </ThemeProvider>
+    );
+}

txclient/src/app/landing/org/[oid]/Org.Service.ts

@@ -0,0 +1,13 @@
+import ApiRequest from "@services/Api.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const updateOrganizationsById = async (
+    data: UpdateCompanyParams
+): Promise<ApiVoidResult> => {
+    return ApiRequest.post<ApiVoidResult>("companies/update", data);
+};
+
+export const uploadHeaderImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("companies/upload-header", data);
+};

txclient/src/app/landing/org/[oid]/layout.tsx

@@ -45,7 +45,9 @@ export default async function OrganizationPublicProfile({ params, children }: Pr
             <div className="homeCentered">
                 {orgData.id && (
                     <>
-                        <OrganizationHeader organization={orgData} />
+                        <div style={{ position: "relative" }} id="header-wrapper">
+                            <OrganizationHeader organization={orgData} />
+                        </div>
                         <OrganizationDataConnector orgData={orgData} />
                         <div>{children}</div>
                     </>

txclient/src/app/landing/org/[oid]/page.tsx

@@ -61,6 +61,9 @@ import { useConfirmStore } from "@core/Store/Confirm.Store";
 import ReviewsCarousel from "@core/app/components/ReviewsCarousel/ReviewsCarousel";
 import OrganizationProfessionals from "@core/app/components/OrganizationProfessionals/OrganizationProfessionals";
 import { RatingTargetType } from "@core/Models/Ratings.model";
+import HeaderEditPopup from "./HeaderEditPopup";
+import { checkOrgAdmin } from "./post.service";
+import { IconButton as MuiIconButton } from "@mui/material";
 
 enum VIEW {
     POSTS = "posts",
@@ -96,6 +99,47 @@ export default function OrganizationPublicProfile() {
     const [posts, setPosts] = useState<IPost[]>([]);
     const [authorizedUsers, setAuthorizedUsers] = useState<string[]>([]);
     const [currentPage, setCurrentPage] = useState<number>(1);
+    const [isOrgAdmin, setIsOrgAdmin] = useState<boolean>(false);
+    const [showEditPopup, setShowEditPopup] = useState<boolean>(false);
+
+    // Append edit button to header wrapper when admin
+    useEffect(() => {
+        if (!isOrgAdmin) return;
+
+        const wrapper = document.getElementById("header-wrapper");
+        if (!wrapper) return;
+
+        const btn = document.createElement("div");
+        btn.id = "edit-header-btn";
+        btn.innerHTML = `
+            <button style="
+                position: absolute;
+                top: 12px;
+                right: 12px;
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                background: rgba(0,0,0,0.45);
+                color: white;
+                border: none;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 100;
+                transition: background 0.2s;
+            " onmouseover="this.style.background='rgba(0,0,0,0.7)'" onmouseout="this.style.background='rgba(0,0,0,0.45)'">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            </button>
+        `;
+        btn.querySelector("button")!.addEventListener("click", () => setShowEditPopup(true));
+        wrapper.appendChild(btn);
+
+        return () => {
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+        };
+    }, [isOrgAdmin]);
 
     const SessionInfo = useSessionStore();
     const eventHandler = useEventHandlerStore();
@@ -139,6 +183,22 @@ export default function OrganizationPublicProfile() {
         });
     }, [SessionInfo, authorizedUsers]);
 
+    // Check if the logged-in user is admin of this organization
+    useEffect(() => {
+        if (!SessionInfo.userId || !oid) {
+            setIsOrgAdmin(false);
+            return;
+        }
+
+        checkOrgAdmin(oid, SessionInfo.userId)
+            .then((isAdmin) => {
+                setIsOrgAdmin(isAdmin);
+            })
+            .catch(() => {
+                setIsOrgAdmin(false);
+            });
+    }, [SessionInfo.userId, oid]);
+
     useEffect(() => {
         if (!OrganizationData.orgData) return;
         if (!oid) return; //if (!OrganizationData.orgData.id) return;
@@ -531,6 +591,20 @@ export default function OrganizationPublicProfile() {
     return (
         <>
             <HeaderConfProvider />
+            {isOrgAdmin && oid && orgData && (
+                <HeaderEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    companyId={oid}
+                    headerColor={orgData.headerColor}
+                    headerFontColor={orgData.headerFontColor}
+                    headerFontShadowColor={orgData.headerFontShadowColor}
+                    headerImage={orgData.headerFile}
+                    onSaved={() => {
+                        setShowEditPopup(false);
+                    }}
+                />
+            )}
             {orgData && (
                 <div className={style.organizationContent}>
                     {showEditor && (

txclient/src/app/landing/org/[oid]/post.service.ts

@@ -65,3 +65,7 @@ export const toggleFixedPost = async (data: FixCompanyPostParams): Promise<void>
 export const moveFixedPost = async (data: MoveCompanyFixedPostParams): Promise<void> => {
     return ApiRequest.post<void>("companies/move-fixed-post", data);
 };
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};