feat: agregar funcionalidad de edición de imagen en el servicio y mejorar la gestión de permisos de administrador

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/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 "./Service.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 "./Service.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,7 @@ 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";
 
 const GetServiceData = async (serviceId: string): Promise<PublicOrganizationServiceView> => {
     try {
@@ -60,7 +60,7 @@ export default async function OrganizationPublicProfile({ params }: Props) {
                         <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}>