feat: agregar funcionalidad de edición de cabecera y colores en OrganizationHeaderEdit

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

@@ -38,7 +38,7 @@ export class ToggleCompanyFixedPostController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async toggleFixedCompanyPost(
-        @Body() requestBody: FixCompanyPostParams
+        @Body() requestBody: FixCompanyPostParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().toggleFixedPost(requestBody);
@@ -62,7 +62,7 @@ export class MoveCompanyFixedPostController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async moveFixedCompanyPost(
-        @Body() requestBody: MoveCompanyFixedPostParams
+        @Body() requestBody: MoveCompanyFixedPostParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().moveFixedPost(requestBody);
@@ -86,7 +86,7 @@ export class SetNotificationsStatusCompanyController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async setNotificationAuto(
-        @Body() requestBody: SetNotificationAutoParams
+        @Body() requestBody: SetNotificationAutoParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setNotificationAuto(requestBody);
@@ -110,7 +110,7 @@ export class SetPublishedStatusCompanyController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async setPublishedStatus(
-        @Body() requestBody: SetOrganizationPublishedStatusParams
+        @Body() requestBody: SetOrganizationPublishedStatusParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setPublishedStatus(requestBody);
@@ -134,7 +134,7 @@ export class CreateCompanyController extends Controller {
     @SuccessResponse(200, "La compañia fue creada con exito")
     @Post()
     public async createCompany(
-        @Body() requestBody: CreateCompanyParams
+        @Body() requestBody: CreateCompanyParams,
     ): Promise<ICompany | ApiValidationError> {
         try {
             const company = await new CompaniesService().createCompany(requestBody);
@@ -155,7 +155,7 @@ export class DeleteCompanyController extends Controller {
     @SuccessResponse(200, "La compañia fue modificada con exito")
     @Post()
     public async deleteCompany(
-        @Body() requestBody: DeleteCompanyParams
+        @Body() requestBody: DeleteCompanyParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().deleteCompany(requestBody);
@@ -179,7 +179,7 @@ export class UpdateCompanyController extends Controller {
     @SuccessResponse(200, "La compañia fue modificada con exito")
     @Post()
     public async updateCompany(
-        @Body() requestBody: UpdateCompanyParams
+        @Body() requestBody: UpdateCompanyParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().updateCompany(requestBody);
@@ -202,7 +202,7 @@ export class GetCompanyByIdController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async getById(
-        @Body() requestBody: OranizationsViewByIdParams
+        @Body() requestBody: OranizationsViewByIdParams,
     ): Promise<MyOranizationsView | ApiValidationError> {
         try {
             const companies = await new CompaniesService().getById(requestBody);
@@ -222,7 +222,7 @@ export class GetCompanyByUserController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async getByUserId(
-        @Body() requestBody: MyOranizationsViewParams
+        @Body() requestBody: MyOranizationsViewParams,
     ): Promise<MyOranizationsView[] | ApiValidationError> {
         try {
             const companies = await new CompaniesService().getByUserId(requestBody);
@@ -242,7 +242,7 @@ export class PaginateCompanyController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async paginateUsers(
-        @Body() requestBody: PaginateCompaniesParams
+        @Body() requestBody: PaginateCompaniesParams,
     ): Promise<PaginateCompaniesResults | ApiValidationError> {
         try {
             const users = await new CompaniesService().paginateCompanies(requestBody);
@@ -265,7 +265,7 @@ export class UploadCompanyHeaderController extends Controller {
     public async uploadHeader(
         @FormField() companyId: string,
         @FormField() sessionUser: string,
-        @UploadedFile() file: Express.Multer.File
+        @UploadedFile() file: Express.Multer.File,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setCompanyHeader({
@@ -295,7 +295,7 @@ export class UploadCompanyIconController extends Controller {
     public async uploadIcon(
         @FormField() companyId: string,
         @FormField() sessionUser: string,
-        @UploadedFile() file: Express.Multer.File
+        @UploadedFile() file: Express.Multer.File,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().setCompanyIcon({
@@ -325,7 +325,7 @@ export class DeleteCompanyHeaderController extends Controller {
     @SuccessResponse(200, "El archivo fue cargado con exito")
     @Post()
     public async deleteHeader(
-        @Body() data: DeleteCompanyFileParams
+        @Body() data: DeleteCompanyFileParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().deleteCompanyHeader(data);
@@ -349,7 +349,7 @@ export class DeleteCompanyIconController extends Controller {
     @SuccessResponse(200, "El archivo fue cargado con exito")
     @Post()
     public async deleteIcon(
-        @Body() data: DeleteCompanyFileParams
+        @Body() data: DeleteCompanyFileParams,
     ): Promise<ApiVoidResult | ApiValidationError> {
         try {
             await new CompaniesService().deleteCompanyIcon(data);
@@ -372,7 +372,7 @@ export class filterAllOrganizationsController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async filterAllOrganizations(
-        @Body() requestBody: PaginateCompaniesParams
+        @Body() requestBody: PaginateCompaniesParams,
     ): Promise<TextObjectFilterResult[] | ApiValidationError> {
         try {
             const clients = await new CompaniesService().filterAll(requestBody);
@@ -392,7 +392,7 @@ export class CheckCompanyNameController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async checkName(
-        @Body() requestBody: { name: string }
+        @Body() requestBody: { name: string },
     ): Promise<{ valid: boolean } | ApiValidationError> {
         try {
             const valid = await new CompaniesService().checkNameExists(requestBody.name);
@@ -413,12 +413,12 @@ export class CheckCompanyAdminController extends Controller {
     @SuccessResponse(200, "Done")
     @Post()
     public async checkAdmin(
-        @Body() requestBody: { companyId: string; sessionUser: string }
-    ): Promise<{ isAdmin: boolean } | ApiValidationError> {
+        @Body() requestBody: { companyId: string; sessionUser: string },
+    ): Promise<boolean | ApiValidationError> {
         try {
             const isAdmin = await new CompaniesService().checkCompanyAdmin(requestBody);
             this.setStatus(200);
-            return { isAdmin };
+            return isAdmin;
         } catch (e) {
             const errorOccurred: Error = e as Error;
             this.setStatus(500);

txclient/src/Services/Header.Edit.Service.ts

@@ -0,0 +1,19 @@
+import ApiRequest from "@services/Api.Service";
+import { UpdateCompanyParams } from "@models/Company.model";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const updateOrganizationColors = 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);
+};
+
+export const uploadServiceImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("services/upload-image", data);
+};
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};

txclient/src/app/components/OrganizationHeaderEdit/HeaderEditPopup.tsx

@@ -0,0 +1,187 @@
+"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 { updateOrganizationColors, uploadHeaderImage } from "@services/Header.Edit.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;
+    onRefresh?: () => void;
+}
+
+export default function HeaderEditPopup(props: HeaderEditPopupProps) {
+    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved, onRefresh } = 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 updateOrganizationColors(updData);
+
+            organizationHeader.setHeaderColor(headerColorState);
+            organizationHeader.setHeaderFontColor(headerFontColorState);
+            organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
+
+            alert.showSuccess("Colores actualizados");
+            onSaved();
+            onRefresh?.();
+        } 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();
+                onRefresh?.();
+            }).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,
+                        height: 500,
+                    },
+                }}
+            >
+                <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/components/OrganizationHeaderEdit/OrganizationHeaderEdit.tsx

@@ -0,0 +1,116 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import HeaderEditPopup from "./HeaderEditPopup";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { checkOrgAdmin } from "@services/Header.Edit.Service";
+
+interface OrganizationHeaderEditProps {
+    companyId: string;
+    headerColor?: string;
+    headerFontColor?: string;
+    headerFontShadowColor?: string;
+    headerImage?: string;
+}
+
+export default function OrganizationHeaderEdit({
+    companyId,
+    headerColor = "",
+    headerFontColor = "",
+    headerFontShadowColor = "",
+    headerImage = "",
+}: OrganizationHeaderEditProps) {
+    const router = useRouter();
+    const SessionInfo = useSessionStore();
+    const [isOrgAdmin, setIsOrgAdmin] = useState(false);
+    const [showEditPopup, setShowEditPopup] = useState(false);
+
+    useEffect(() => {
+        if (!SessionInfo.userId || !companyId) {
+            setIsOrgAdmin(false);
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+            return;
+        }
+
+        let cancelled = false;
+
+        checkOrgAdmin(companyId, SessionInfo.userId)
+            .then((isAdmin) => {
+                if (cancelled) return;
+                setIsOrgAdmin(isAdmin);
+
+                const wrapper = document.getElementById("header-wrapper");
+                if (!wrapper) return;
+
+                if (isAdmin) {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+
+                    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);
+                } else {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+                }
+            })
+            .catch(() => {
+                if (cancelled) return;
+                setIsOrgAdmin(false);
+
+                const existingBtn = document.getElementById("edit-header-btn");
+                if (existingBtn) existingBtn.remove();
+            });
+
+        return () => {
+            cancelled = true;
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+        };
+    }, [SessionInfo.userId, companyId]);
+
+    return (
+        <>
+            {isOrgAdmin && (
+                <HeaderEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    companyId={companyId}
+                    headerColor={headerColor}
+                    headerFontColor={headerFontColor}
+                    headerFontShadowColor={headerFontShadowColor}
+                    headerImage={headerImage}
+                    onSaved={() => {
+                        setShowEditPopup(false);
+                    }}
+                    onRefresh={() => router.refresh()}
+                />
+            )}
+        </>
+    );
+}

txclient/src/app/components/ProductItem/ProductItem.tsx

@@ -6,6 +6,7 @@ import { PublicServiceView } from "@models/Service.model";
 import style from "./style.module.css";
 import { getServiceImage } from "@core/helpers/getServiceImage";
 import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";
+import EditIcon from "@mui/icons-material/Edit";
 
 export type FindResultsViewMode = "grid" | "card";
 
@@ -14,6 +15,8 @@ export interface ProductItemProps {
     width?: number | string;
     viewMode?: FindResultsViewMode;
     dragging?: boolean;
+    isAdmin?: boolean;
+    onImageEdit?: () => void;
 }
 
 export default function ProductItem(props: ProductItemProps) {
@@ -21,6 +24,8 @@ export default function ProductItem(props: ProductItemProps) {
     const { product } = props;
     const { viewMode = "card" } = props;
     const { dragging = false } = props;
+    const { isAdmin = false } = props;
+    const { onImageEdit } = props;
     const { goTo } = useNavigation();
 
     return (
@@ -38,7 +43,7 @@ export default function ProductItem(props: ProductItemProps) {
                         textAlign: "center",
                         padding: "10px",
                         border: "solid 1px  rgba(0, 0, 0, 0.1)",
-                        cursor: "pointer",
+                        cursor: isAdmin ? "default" : "pointer",
                         position: "relative",
                     }}
                     onClick={() => {
@@ -58,6 +63,11 @@ export default function ProductItem(props: ProductItemProps) {
                                 display: "block",
                             }}
                         />
+                        {isAdmin && (
+                            <span className={style.adminEditButton} onClick={(e) => { e.stopPropagation(); onImageEdit?.(); }}>
+                                <EditIcon fontSize="small" />
+                            </span>
+                        )}
                         <ServiceRatingSummary
                             serviceId={product.id}
                             variant="card"

txclient/src/app/components/ProductItem/style.module.css

@@ -8,6 +8,32 @@
     bottom: 8px;
 }
 
+.adminEditButton {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+}
+
+.adminEditButton:hover {
+    background: var(--wine-red);
+    transform: scale(1.1);
+}
+
+.adminEditButton:hover svg {
+    color: white !important;
+}
+
 .cardHeader {
     margin: 10px 0;
     text-align: center;

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

@@ -10,7 +10,7 @@ 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 { updateOrganizationColors, uploadHeaderImage } from "@services/Header.Edit.Service";
 import { UpdateCompanyParams } from "@models/Company.model";
 
 interface HeaderEditPopupProps {
@@ -22,10 +22,11 @@ interface HeaderEditPopupProps {
     headerFontShadowColor: string;
     headerImage: string;
     onSaved: () => void;
+    onRefresh?: () => void;
 }
 
 export default function HeaderEditPopup(props: HeaderEditPopupProps) {
-    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved } = props;
+    const { open, onClose, companyId, headerColor, headerFontColor, headerFontShadowColor, headerImage, onSaved, onRefresh } = props;
     const alert = useAlert();
     const SessionInfo = useSessionStore();
     const organizationHeader = useOrganizationHeaderStore();
@@ -57,13 +58,15 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
                 sessionUser: SessionInfo.userId,
             };
 
-            await updateOrganizationsById(updData);
+            await updateOrganizationColors(updData);
 
             organizationHeader.setHeaderColor(headerColorState);
             organizationHeader.setHeaderFontColor(headerFontColorState);
             organizationHeader.setHeaderFontShadowColor(headerFontShadowColorState);
 
             alert.showSuccess("Colores actualizados");
+            onSaved();
+            onRefresh?.();
         } catch (error) {
             const formatted = error instanceof Error ? error.message : "Error al guardar los colores";
             alert.showError(formatted || "Error al guardar los colores");
@@ -87,6 +90,7 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
             uploadHeaderImage(formData).then(() => {
                 alert.showSuccess("Imagen actualizada");
                 onSaved();
+                onRefresh?.();
             }).catch((error) => {
                 const formatted = error instanceof Error ? error.message : "Error al guardar la imagen";
                 alert.showError(formatted || "Error al guardar la imagen");
@@ -110,6 +114,7 @@ export default function HeaderEditPopup(props: HeaderEditPopupProps) {
                 PaperProps={{
                     sx: {
                         borderRadius: 2,
+                        height: 500,
                     },
                 }}
             >

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

@@ -43,7 +43,10 @@ import { useSessionStore } from "@core/Store/Sesion.Store";
 import { EVENT_TYPES, useEventHandlerStore } from "@core/Store/EventHandler.Store";
 import { useAlert } from "@core/Store/Alert.Store";
 import { IPost } from "@core/Models/Posts.model";
-import { preprocessQuillHtml, transformQuillContentForDisplay } from "@core/app/helpers/htmlSainitize";
+import {
+    preprocessQuillHtml,
+    transformQuillContentForDisplay,
+} from "@core/app/helpers/htmlSainitize";
 import { useSearchParams } from "next/navigation";
 
 import { ThemeProvider } from "@emotion/react";
@@ -55,7 +58,7 @@ import DownIcon from "@mui/icons-material/ArrowDownwardRounded";
 import PinIcon from "@mui/icons-material/PushPin";
 import EditIcon from "@mui/icons-material/AutoFixHigh";
 import turnosXpressTheme from "@core/app/theme/turnosXpress";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import dayjs from "dayjs";
 import { useConfirmStore } from "@core/Store/Confirm.Store";
 import ReviewsCarousel from "@core/app/components/ReviewsCarousel/ReviewsCarousel";
@@ -63,7 +66,6 @@ import OrganizationProfessionals from "@core/app/components/OrganizationProfessi
 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",
@@ -79,6 +81,7 @@ type UrlData = {
 export default function OrganizationPublicProfile() {
     const data = useParams<UrlData>();
     const oid = data.oid;
+    const router = useRouter();
     const OrganizationData = useOrgDataStore();
     const [position, setPosition] = useState<[number, number]>([0, 0]);
     const [orgData, setOrgData] = useState<PublicOrganizationView>();
@@ -101,14 +104,33 @@ export default function OrganizationPublicProfile() {
     const [currentPage, setCurrentPage] = useState<number>(1);
     const [isOrgAdmin, setIsOrgAdmin] = useState<boolean>(false);
     const [showEditPopup, setShowEditPopup] = useState<boolean>(false);
+    const SessionInfo = useSessionStore();
 
-    // Append edit button to header wrapper when admin
+    // Unified effect: check admin status and manage edit button DOM element
     useEffect(() => {
-        if (!isOrgAdmin) return;
+        if (!SessionInfo.userId || !oid) {
+            setIsOrgAdmin(false);
+            const existing = document.getElementById("edit-header-btn");
+            if (existing) existing.remove();
+            return;
+        }
 
+        let cancelled = false;
+
+        checkOrgAdmin(oid, SessionInfo.userId)
+            .then((isAdmin) => {
+                if (cancelled) return;
+                console.log("isAdmin:", isAdmin);
+                setIsOrgAdmin(isAdmin);
+
+                // Append or remove button based on the result
                 const wrapper = document.getElementById("header-wrapper");
                 if (!wrapper) return;
 
+                if (isAdmin) {
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+
                     const btn = document.createElement("div");
                     btn.id = "edit-header-btn";
                     btn.innerHTML = `
@@ -132,16 +154,33 @@ export default function OrganizationPublicProfile() {
                             <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));
+                    btn.querySelector("button")!.addEventListener("click", () =>
+                        setShowEditPopup(true),
+                    );
                     wrapper.appendChild(btn);
+                } else {
+                    // Remove button for non-admin users
+                    const existingBtn = document.getElementById("edit-header-btn");
+                    if (existingBtn) existingBtn.remove();
+                }
+            })
+            .catch(() => {
+                if (cancelled) return;
+                setIsOrgAdmin(false);
 
+                // Ensure button is removed on error
+                const existingBtn = document.getElementById("edit-header-btn");
+                if (existingBtn) existingBtn.remove();
+            });
+
+        // Cleanup: mark as cancelled and remove button
         return () => {
+            cancelled = true;
             const existing = document.getElementById("edit-header-btn");
             if (existing) existing.remove();
         };
-    }, [isOrgAdmin]);
+    }, [SessionInfo.userId, oid]);
 
-    const SessionInfo = useSessionStore();
     const eventHandler = useEventHandlerStore();
     const alert = useAlert();
     const confirm = useConfirmStore();
@@ -183,22 +222,6 @@ 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;
@@ -398,7 +421,8 @@ export default function OrganizationPublicProfile() {
                             return response.data;
                         }
                         const newPosts = response.data.filter(
-                            (newPost) => !prevPosts.some((prevPost) => prevPost._id === newPost._id),
+                            (newPost) =>
+                                !prevPosts.some((prevPost) => prevPost._id === newPost._id),
                         );
 
                         return [...prevPosts, ...newPosts];
@@ -568,7 +592,11 @@ export default function OrganizationPublicProfile() {
                         gap: "10px",
                     }}
                 >
-                    <WhatsappShareButton title={shareTitle} separator=":: " url={window.location.href}>
+                    <WhatsappShareButton
+                        title={shareTitle}
+                        separator=":: "
+                        url={window.location.href}
+                    >
                         <WhatsAppShareIcon size={32} round />
                     </WhatsappShareButton>
                     <FacebookShareButton title={shareTitle} url={window.location.href}>
@@ -603,6 +631,7 @@ export default function OrganizationPublicProfile() {
                     onSaved={() => {
                         setShowEditPopup(false);
                     }}
+                    onRefresh={() => router.refresh()}
                 />
             )}
             {orgData && (
@@ -730,7 +759,9 @@ export default function OrganizationPublicProfile() {
                                         )}
                                     </div>
                                     {view === VIEW.SERVICES && (
-                                        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                                        <div
+                                            style={{ display: "flex", justifyContent: "flex-end" }}
+                                        >
                                             <ButtonGroup
                                                 variant="outlined"
                                                 aria-label="Basic button group"
@@ -785,7 +816,8 @@ export default function OrganizationPublicProfile() {
                                                 <div
                                                     style={{
                                                         textAlign: "center",
-                                                        backgroundImage: "url(/no-conversation.webp)",
+                                                        backgroundImage:
+                                                            "url(/no-conversation.webp)",
                                                         backgroundRepeat: "no-repeat",
                                                         backgroundPosition: "center center",
                                                         backgroundSize: "50% auto",
@@ -800,7 +832,8 @@ export default function OrganizationPublicProfile() {
                                                     <div
                                                         key={post._id}
                                                         style={{
-                                                            borderBottom: "1px solid var(--gray-light)",
+                                                            borderBottom:
+                                                                "1px solid var(--gray-light)",
                                                             paddingTop: "5px",
                                                             paddingBottom: "10px",
                                                             paddingLeft: "30px",
@@ -814,7 +847,11 @@ export default function OrganizationPublicProfile() {
                                                                 justifyContent: "space-between",
                                                             }}
                                                         >
-                                                            <div style={{ color: "var(--gray-darkest)" }}>
+                                                            <div
+                                                                style={{
+                                                                    color: "var(--gray-darkest)",
+                                                                }}
+                                                            >
                                                                 {dayjs(post.createdAt).format(
                                                                     "DD MMMM YYYY HH:mm",
                                                                 )}
@@ -854,22 +891,30 @@ export default function OrganizationPublicProfile() {
                                                                     color: "var(--gray-darkest)",
                                                                 }}
                                                             >
-                                                                <ThemeProvider theme={turnosXpressTheme}>
+                                                                <ThemeProvider
+                                                                    theme={turnosXpressTheme}
+                                                                >
                                                                     <MaterialButton
                                                                         color="inherit"
                                                                         startIcon={<ClipIcon />}
                                                                         onClick={() => {
-                                                                            fijarPost(`${post._id}`);
+                                                                            fijarPost(
+                                                                                `${post._id}`,
+                                                                            );
                                                                         }}
                                                                     >
-                                                                        {post.fixed ? "Liberar" : "Fijar"}
+                                                                        {post.fixed
+                                                                            ? "Liberar"
+                                                                            : "Fijar"}
                                                                     </MaterialButton>
 
                                                                     {post.fixed && (
                                                                         <>
                                                                             <MaterialButton
                                                                                 color="inherit"
-                                                                                startIcon={<UpIcon />}
+                                                                                startIcon={
+                                                                                    <UpIcon />
+                                                                                }
                                                                                 onClick={() => {
                                                                                     moverPost(
                                                                                         `${post._id}`,
@@ -882,7 +927,9 @@ export default function OrganizationPublicProfile() {
 
                                                                             <MaterialButton
                                                                                 color="inherit"
-                                                                                startIcon={<DownIcon />}
+                                                                                startIcon={
+                                                                                    <DownIcon />
+                                                                                }
                                                                                 onClick={() => {
                                                                                     moverPost(
                                                                                         `${post._id}`,
@@ -898,7 +945,9 @@ export default function OrganizationPublicProfile() {
                                                                     <MaterialButton
                                                                         color="inherit"
                                                                         onClick={() => {
-                                                                            editarPost(`${post._id}`);
+                                                                            editarPost(
+                                                                                `${post._id}`,
+                                                                            );
                                                                         }}
                                                                     >
                                                                         <EditIcon />
@@ -907,7 +956,9 @@ export default function OrganizationPublicProfile() {
                                                                     <MaterialButton
                                                                         color="inherit"
                                                                         onClick={() => {
-                                                                            eliminarPost(`${post._id}`);
+                                                                            eliminarPost(
+                                                                                `${post._id}`,
+                                                                            );
                                                                         }}
                                                                     >
                                                                         <DeleteIcon />
@@ -932,7 +983,8 @@ export default function OrganizationPublicProfile() {
                                                 style={{
                                                     padding: "0px 0px 40px 0px",
                                                     display: "flex",
-                                                    flexDirection: viewMode === "card" ? "row" : "column",
+                                                    flexDirection:
+                                                        viewMode === "card" ? "row" : "column",
                                                     justifyContent: "start",
                                                     gap: "20px",
                                                     flexWrap: "wrap",

txclient/src/app/landing/service/[sid]/Service.Service.ts

@@ -0,0 +1,10 @@
+import ApiRequest from "@services/Api.Service";
+import { ApiVoidResult } from "@models/Api.VoidResult.type";
+
+export const uploadServiceImage = async (data: FormData): Promise<ApiVoidResult> => {
+    return ApiRequest.postFile<ApiVoidResult>("services/upload-image", data);
+};
+
+export const checkOrgAdmin = async (companyId: string, sessionUser: string): Promise<boolean> => {
+    return ApiRequest.post<boolean>("companies/check-admin", { companyId, sessionUser });
+};

txclient/src/app/landing/service/[sid]/ServiceDetailCard.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import ProductItem from "@core/app/components/ProductItem/ProductItem";
+import { PublicServiceView } from "@models/Service.model";
+import { PublicOrganizationView } from "@models/Company.model";
+import ServiceImageEditPopup from "./ServiceImageEditPopup";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { checkOrgAdmin } from "@services/Header.Edit.Service";
+
+interface ServiceDetailCardProps {
+    service: PublicServiceView;
+    organization: PublicOrganizationView;
+}
+
+export default function ServiceDetailCard({ service, organization }: ServiceDetailCardProps) {
+    const router = useRouter();
+    const SessionInfo = useSessionStore();
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [showEditPopup, setShowEditPopup] = useState(false);
+
+    useEffect(() => {
+        if (!SessionInfo.userId || !organization.id || !service.id) return;
+
+        checkOrgAdmin(organization.id, SessionInfo.userId)
+            .then((result) => {
+                setIsAdmin(result);
+            })
+            .catch(() => {
+                setIsAdmin(false);
+            });
+    }, [SessionInfo.userId, organization.id, service.id]);
+
+    const handleImageSaved = () => {
+        setShowEditPopup(false);
+        router.refresh();
+    };
+
+    return (
+        <>
+            <ProductItem
+                product={service}
+                width="100%"
+                isAdmin={isAdmin}
+                onImageEdit={() => setShowEditPopup(true)}
+            />
+            {isAdmin && (
+                <ServiceImageEditPopup
+                    open={showEditPopup}
+                    onClose={() => setShowEditPopup(false)}
+                    serviceId={service.id}
+                    companyId={organization.id}
+                    currentImage={service.image}
+                    onSaved={handleImageSaved}
+                />
+            )}
+        </>
+    );
+}

txclient/src/app/landing/service/[sid]/ServiceImageEditPopup.tsx

@@ -0,0 +1,105 @@
+"use client";
+import { useState } from "react";
+import { IconButton, Dialog, DialogActions, DialogContent, DialogTitle, Button } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import turnosXpressTheme from "@core/app/theme/turnosXpress";
+import { ThemeProvider } from "@emotion/react";
+import ImagePicker from "@components/ImagePicker/ImagePicker";
+import { useAlert } from "@core/Store/Alert.Store";
+import { useSessionStore } from "@core/Store/Sesion.Store";
+import { uploadServiceImage } from "@services/Header.Edit.Service";
+
+interface ServiceImageEditPopupProps {
+    open: boolean;
+    onClose: () => void;
+    serviceId: string;
+    companyId: string;
+    currentImage: string;
+    onSaved: () => void;
+}
+
+export default function ServiceImageEditPopup(props: ServiceImageEditPopupProps) {
+    const { open, onClose, serviceId, companyId, currentImage, onSaved } = props;
+    const alert = useAlert();
+    const SessionInfo = useSessionStore();
+    const [loading, setLoading] = useState(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("serviceId", serviceId);
+            formData.append("sessionUser", SessionInfo.userId);
+            formData.append("file", file);
+
+            uploadServiceImage(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,
+                        width: 'auto',
+                        height: 'auto',
+                    },
+                }}
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", py: 2 }}>
+                    Editar imagen del servicio
+                    <IconButton onClick={onClose} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+
+                <DialogContent dividers sx={{ p: 3, display: "flex", justifyContent: "center" }}>
+                    <ImagePicker
+                        src={currentImage}
+                        alt="Imagen del servicio"
+                        style={{ width: 400, height: 400, borderRadius: 8 }}
+                        readOnly={false}
+                        onChange={handleImageChange}
+                        imageSizeSrc="/service-image-size.webp"
+                        mbLimit={5}
+                    />
+                </DialogContent>
+
+                <DialogActions sx={{ px: 3, pb: 2, pt: 1 }}>
+                    <Button onClick={onClose}>Cancelar</Button>
+                    <Button
+                        onClick={() => {}}
+                        disabled={loading}
+                    >
+                        Guardar
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </ThemeProvider>
+    );
+}

txclient/src/app/landing/service/[sid]/page.tsx

@@ -2,7 +2,6 @@ import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
 import style from "./profile.module.css";
 import ApiServerService from "@services/Api.Server.Service";
 import { PublicOrganizationServiceView } from "@core/Models/Service.model";
-import ProductItem from "@core/app/components/ProductItem/ProductItem";
 import Appointment from "./components/Appointment/Appointment";
 import OrganizationHeader from "@components/Home/OrganizationHeader/OrganizationHeader";
 import ProductGallery from "@core/app/components/Home/ProductsGallery/ProductGallery";
@@ -12,6 +11,8 @@ import ServicePrivate from "@core/app/components/ServicePrivate/ServicePrivate";
 import EvangelizeBanner from "@components/EvangelizeBanner/EvangelizeBanner";
 import ReviewsCarousel from "@components/ReviewsCarousel/ReviewsCarousel";
 import { RatingTargetType } from "@core/Models/Ratings.model";
+import ServiceDetailCard from "./ServiceDetailCard";
+import OrganizationHeaderEdit from "@components/OrganizationHeaderEdit/OrganizationHeaderEdit";
 
 const GetServiceData = async (serviceId: string): Promise<PublicOrganizationServiceView> => {
     try {
@@ -56,11 +57,20 @@ export default async function OrganizationPublicProfile({ params }: Props) {
                     <ScrollToTop />
                     <HeaderConfProvider />
                     <div className="homeCentered">
+                        <div id="header-wrapper" style={{ position: "relative" }}>
                             <OrganizationHeader organization={organizationService.organization} />
+                        </div>
+                        <OrganizationHeaderEdit
+                            companyId={organizationService.organization.id}
+                            headerColor={organizationService.organization.headerColor}
+                            headerFontColor={organizationService.organization.headerFontColor}
+                            headerFontShadowColor={organizationService.organization.headerFontShadowColor}
+                            headerImage={organizationService.organization.headerFile}
+                        />
                         <div className={style.organizationContent}>
                             <div className={style.serviceSide}>
                                 <div className={style.stickyWrapper}>
-                                    <ProductItem product={organizationService.service} width="100%" />
+                                    <ServiceDetailCard service={organizationService.service} organization={organizationService.organization} />
                                 </div>
                             </div>
                             <div className={style.bookingSide}>