contentoh-components-library 21.6.61 → 21.6.63

package/src/components/organisms/ServicesWorkspace/index.js

@@ -1,556 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import {
-  Box,
-  Button,
-  ButtonBase,
-  Collapse,
-  InputAdornment,
-  TextField,
-  Tooltip,
-  Typography,
-} from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import SearchIcon from "@mui/icons-material/Search";
-import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
-import CloudUploadOutlinedIcon from "@mui/icons-material/CloudUploadOutlined";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import AssigneePicker from "./AssigneePicker";
-import { whiteTooltipProps } from "./tooltipStyles";
-import { DEMO_CATALOG } from "./demo";
-import {
-  getAttention,
-  getProductServices,
-  getRetailerStatuses,
-  getServiceStage,
-  getStatusColor,
-  getStatusName,
-  groupServicesByStage,
-  pickInitialService,
-} from "./servicesModel";
-
-/*
-  Pestaña "Servicios" de la edición de producto.
-
-  Con 3 servicios bastaban 3 pestañas; con 20 la barra deja de servir. Aquí
-  todos los servicios del producto viven en un mismo lugar, con el lenguaje que
-  ya usa la tabla de Creators:
-    - izquierda: el resumen (barra por etapas y lo que pide atención), un
-      buscador y la lista agrupada por etapa, desplegable.
-    - derecha: el servicio elegido: estatus, equipo (responsable, facilitador,
-      auditor), su avance por cadena y su entregable.
-  Ficha técnica, Descripción e Imágenes también aparecen en la lista para ver
-  el panorama completo, pero se siguen editando en su pestaña (botón "Ir a").
-*/
-
-const C = {
-  pink: "#E33AA9",
-  pinkHard: "#B12D84",
-  purple: "#8A6CAA",
-  textPurple: "#503D66",
-  purpleLight: "#F0EEF2",
-  white: "#FFFFFF",
-  gray: "#707070",
-  grayLight: "#F0F0F0",
-  black: "#262626",
-};
-
-const sectionTitleSx = {
-  fontFamily: "Lato, sans-serif",
-  fontSize: 12,
-  fontWeight: 700,
-  letterSpacing: 0.4,
-  textTransform: "uppercase",
-  color: C.gray,
-  mb: 1,
-};
-
-function StatusChip({ status, long = false }) {
-  const color = getStatusColor(status);
-  return (
-    <Box
-      component="span"
-      title={getStatusName(status)}
-      sx={{
-        display: "inline-flex",
-        alignItems: "center",
-        height: 22,
-        px: 1,
-        borderRadius: "6px",
-        background: color,
-        color: C.white,
-        fontFamily: "Lato, sans-serif",
-        fontSize: 12,
-        fontWeight: 700,
-        whiteSpace: "nowrap",
-      }}
-    >
-      {long ? `${status} · ${getStatusName(status)}` : status}
-    </Box>
-  );
-}
-
-function StageDot({ color, size = 8 }) {
-  return (
-    <Box component="span" sx={{ width: size, height: size, borderRadius: "50%", background: color, flexShrink: 0 }} />
-  );
-}
-
-function ServicesBar({ groups }) {
-  return (
-    <Box aria-hidden="true" sx={{ display: "flex", gap: "2px", height: 8 }}>
-      {groups.flatMap((group) =>
-        group.services.map((service) => (
-          <Box
-            key={service.service_name}
-            component="span"
-            sx={{ flex: "1 1 0", minWidth: 3, borderRadius: "2px", background: group.stage.color }}
-          />
-        ))
-      )}
-    </Box>
-  );
-}
-
-export default function ServicesWorkspace({
-  product,
-  retailers = [],
-  users = {},
-  canAssign = true,
-  onAssign,
-  onOpenEditor,
-}) {
-  const services = useMemo(() => getProductServices(product), [product]);
-  const groups = useMemo(() => groupServicesByStage(services), [services]);
-  const attention = getAttention(groups);
-
-  const [query, setQuery] = useState("");
-  const [selectedName, setSelectedName] = useState(() => pickInitialService(services));
-  const [expanded, setExpanded] = useState([]);
-
-  // Al cambiar de producto: se elige lo que pide atención y se abre su etapa.
-  const productKey = `${product?.id_article}-${product?.id_order}`;
-  useEffect(() => {
-    const first = pickInitialService(services);
-    setSelectedName(first);
-    const firstService = services.find((service) => service.service_name === first);
-    setExpanded(firstService ? [getServiceStage(firstService).stage_name] : []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [productKey]);
-
-  const text = query.trim().toLowerCase();
-  const visibleGroups = text
-    ? groupServicesByStage(services.filter((service) => service.display_name.toLowerCase().includes(text)))
-    : groups;
-
-  const selected = services.find((service) => service.service_name === selectedName) ?? null;
-
-  const toggle = (stageName) =>
-    setExpanded((prev) => (prev.includes(stageName) ? prev.filter((name) => name !== stageName) : [...prev, stageName]));
-
-  if (services.length === 0) {
-    return (
-      <Box sx={{ p: 4, textAlign: "center", color: C.gray, fontFamily: "Lato, sans-serif" }}>
-        Este producto no tiene servicios solicitados.
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      sx={{
-        display: "grid",
-        gridTemplateColumns: { xs: "1fr", md: "300px minmax(0, 1fr)" },
-        minHeight: 480,
-        border: `1px solid ${C.purpleLight}`,
-        borderRadius: "12px",
-        background: C.white,
-        overflow: "hidden",
-        textAlign: "left",
-        // La librería no fija la tipografía del cuerpo: sin esto, los textos
-        // sueltos (Box) heredan la del navegador fuera de las aplicaciones.
-        fontFamily: "Lato, sans-serif",
-      }}
-    >
-      {/* ---- Lista ---- */}
-      <Box
-        component="nav"
-        aria-label="Servicios del producto"
-        sx={{
-          borderRight: { md: `1px solid ${C.purpleLight}` },
-          p: 2,
-          display: "flex",
-          flexDirection: "column",
-          gap: 1.5,
-          minWidth: 0,
-        }}
-      >
-        <Box sx={{ display: "flex", alignItems: "baseline", gap: 1 }}>
-          <Typography sx={{ fontFamily: "Raleway, sans-serif", fontSize: 16, fontWeight: 600, color: C.textPurple }}>
-            Servicios
-          </Typography>
-          <Typography sx={{ flex: 1, fontFamily: "Lato, sans-serif", fontSize: 12, color: C.gray }}>
-            {services.length}
-          </Typography>
-          {attention && (
-            <Box
-              component="span"
-              sx={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 0.75,
-                px: 1,
-                height: 22,
-                alignSelf: "center",
-                borderRadius: "11px",
-                background: C.purpleLight,
-                fontFamily: "Lato, sans-serif",
-                fontSize: 12,
-                fontWeight: 700,
-                color: C.textPurple,
-                whiteSpace: "nowrap",
-              }}
-            >
-              <StageDot color={attention.stage.color} />
-              {attention.label}
-            </Box>
-          )}
-        </Box>
-
-        <ServicesBar groups={groups} />
-
-        <TextField
-          size="small"
-          placeholder="Buscar servicio…"
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon sx={{ fontSize: 18, color: C.gray }} />
-              </InputAdornment>
-            ),
-            sx: {
-              borderRadius: "8px",
-              fontFamily: "Lato, sans-serif",
-              fontSize: 13,
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: C.pink },
-            },
-          }}
-        />
-
-        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5, overflowY: "auto", maxHeight: 520 }}>
-          {visibleGroups.length === 0 && (
-            <Typography sx={{ py: 2, textAlign: "center", fontSize: 13, color: C.gray }}>Sin coincidencias</Typography>
-          )}
-          {visibleGroups.map(({ stage, services: inStage }) => {
-            const isOpen = Boolean(text) || expanded.includes(stage.stage_name);
-            return (
-              <Box key={stage.stage_name}>
-                <ButtonBase
-                  onClick={() => toggle(stage.stage_name)}
-                  aria-expanded={isOpen}
-                  sx={{
-                    width: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1,
-                    px: 1,
-                    py: 0.75,
-                    borderRadius: "8px",
-                    textAlign: "left",
-                    "&:hover": { backgroundColor: C.purpleLight },
-                  }}
-                >
-                  <StageDot color={stage.color} size={10} />
-                  <Typography sx={{ flex: 1, fontSize: 13, fontWeight: 700, color: C.textPurple }}>
-                    {stage.display_name}
-                  </Typography>
-                  <Typography sx={{ fontFamily: "Lato, sans-serif", fontSize: 12, fontWeight: 700, color: C.gray }}>
-                    {inStage.length}
-                  </Typography>
-                  <ExpandMoreIcon
-                    fontSize="small"
-                    sx={{ color: C.purple, transition: "transform 150ms", transform: isOpen ? "rotate(180deg)" : "none" }}
-                  />
-                </ButtonBase>
-                <Collapse in={isOpen} unmountOnExit>
-                  <Box sx={{ display: "flex", flexDirection: "column", py: 0.25 }}>
-                    {inStage.map((service) => {
-                      const active = service.service_name === selectedName;
-                      return (
-                        <ButtonBase
-                          key={service.service_name}
-                          onClick={() => setSelectedName(service.service_name)}
-                          aria-current={active ? "true" : undefined}
-                          sx={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 1,
-                            pl: 3,
-                            pr: 1,
-                            py: 0.75,
-                            borderRadius: "8px",
-                            textAlign: "left",
-                            borderLeft: `3px solid ${active ? C.pink : "transparent"}`,
-                            backgroundColor: active ? C.purpleLight : "transparent",
-                            "&:hover": { backgroundColor: C.purpleLight },
-                          }}
-                        >
-                          <Typography
-                            sx={{
-                              flex: 1,
-                              minWidth: 0,
-                              fontSize: 14,
-                              fontWeight: active ? 700 : 400,
-                              color: active ? C.textPurple : C.black,
-                              overflow: "hidden",
-                              textOverflow: "ellipsis",
-                              whiteSpace: "nowrap",
-                            }}
-                          >
-                            {service.display_name}
-                          </Typography>
-                          {service.editor_tab && (
-                            <Tooltip {...whiteTooltipProps} title={`Se edita en la pestaña ${service.editor_tab}`} arrow>
-                              <EditOutlinedIcon sx={{ fontSize: 18, color: C.purple }} />
-                            </Tooltip>
-                          )}
-                          <StatusChip status={service.has_workflow ? service.status : "REG"} />
-                        </ButtonBase>
-                      );
-                    })}
-                  </Box>
-                </Collapse>
-              </Box>
-            );
-          })}
-        </Box>
-      </Box>
-
-      {/* ---- Detalle ---- */}
-      <Box component="section" aria-live="polite" sx={{ p: 3, minWidth: 0 }}>
-        {selected ? (
-          <ServiceDetail
-            product={product}
-            service={selected}
-            retailers={retailers}
-            users={users}
-            canAssign={canAssign}
-            onAssign={onAssign}
-            onOpenEditor={onOpenEditor}
-          />
-        ) : (
-          <Typography sx={{ color: C.gray }}>Elige un servicio de la lista.</Typography>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-const personName = (list = [], id) => {
-  if (!id) return "Por asignar";
-  const person = list.find((user) => user.id_user === id);
-  return person ? [person.name, person.last_name].filter(Boolean).join(" ") : "Asignado";
-};
-
-function ServiceDetail({ product, service, retailers, users, canAssign, onAssign, onOpenEditor }) {
-  const stage = getServiceStage(service);
-  const retailerStatuses = getRetailerStatuses(product, service, retailers);
-  const deliverableType =
-    service.deliverable_type ??
-    DEMO_CATALOG.find((item) => item.service_name === service.service_name)?.deliverable_type ??
-    "Entregable";
-
-  const lockReason = (role) => {
-    // El auditor es del producto, no del servicio: no depende de este.
-    const perService = role !== "auditor";
-    if (perService && !service.has_workflow) return "Servicio de registro: no lleva equipo";
-    if (perService && service.is_demo) return "Se podrá asignar cuando el servicio exista en el catálogo";
-    if (!canAssign) return "Tu rol puede ver la asignación, pero no cambiarla";
-    if (!onAssign) return "Asigna desde la tabla de productos";
-    if (!(users[role] ?? []).length) return "No hay personas asignables para este rol";
-    return null;
-  };
-
-  const team = [
-    { role: "especialist", label: "Responsable", currentId: service.assignees?.especialist },
-    { role: "facilitator", label: "Facilitador", currentId: service.assignees?.facilitator },
-    { role: "auditor", label: "Auditor", currentId: product?.id_auditor || null, note: "del producto" },
-  ];
-
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
-      <Box>
-        <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
-          <Typography
-            component="h3"
-            sx={{ m: 0, fontFamily: "Raleway, sans-serif", fontSize: 22, fontWeight: 600, color: C.textPurple }}
-          >
-            {service.display_name}
-          </Typography>
-          {service.is_demo && (
-            <Typography component="span" sx={{ fontSize: 12, fontStyle: "italic", color: C.gray }}>
-              ejemplo
-            </Typography>
-          )}
-        </Box>
-        <Box sx={{ mt: 1, display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
-          <StatusChip status={service.has_workflow ? service.status : "REG"} long />
-          <Box
-            component="span"
-            sx={{ display: "inline-flex", alignItems: "center", gap: 0.75, fontSize: 13, color: C.gray }}
-          >
-            <StageDot color={stage.color} />
-            {stage.display_name}
-          </Box>
-        </Box>
-      </Box>
-
-      {service.editor_tab && (
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            gap: 2,
-            p: 1.5,
-            borderRadius: "10px",
-            background: C.purpleLight,
-          }}
-        >
-          <EditOutlinedIcon sx={{ color: C.purple }} />
-          <Typography sx={{ flex: 1, fontSize: 14, color: C.textPurple }}>
-            Este servicio se trabaja en la pestaña <b>{service.editor_tab}</b>.
-          </Typography>
-          <Button
-            onClick={() => onOpenEditor?.(service.editor_tab)}
-            endIcon={<ArrowForwardIcon fontSize="small" />}
-            sx={{ textTransform: "none", fontWeight: 700, color: C.pinkHard, borderRadius: "8px" }}
-          >
-            Ir a {service.editor_tab}
-          </Button>
-        </Box>
-      )}
-
-      {service.has_workflow && (
-        <Box>
-          <Typography sx={sectionTitleSx}>Acciones</Typography>
-          {/* Propuesta: los botones salen de cat_status para el estatus actual
-              (aprobar -> approved_status_id, rechazar -> rejected_status_id) y
-              "Cambiar estatus" es la corrección manual con motivo. Deshabilitados
-              hasta que exista status-engine (ver plan técnico, §8.1). */}
-          <Tooltip {...whiteTooltipProps} title="Se habilita con el motor de estatus (status-engine)" arrow placement="top-start">
-            <Box sx={{ display: "inline-flex", gap: 1, flexWrap: "wrap" }}>
-              <Button disabled variant="contained" sx={{ textTransform: "none", borderRadius: "8px", boxShadow: "none" }}>
-                Aprobar
-              </Button>
-              <Button disabled variant="outlined" sx={{ textTransform: "none", borderRadius: "8px" }}>
-                Rechazar
-              </Button>
-              <Button disabled sx={{ textTransform: "none", borderRadius: "8px" }}>
-                Cambiar estatus…
-              </Button>
-            </Box>
-          </Tooltip>
-        </Box>
-      )}
-
-      <Box>
-        <Typography sx={sectionTitleSx}>Equipo</Typography>
-        <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-          {team.map(({ role, label, currentId, note }) => (
-            <Box
-              key={role}
-              sx={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", alignItems: "center", gap: 1 }}
-            >
-              <Typography sx={{ fontSize: 14, color: C.black }}>
-                {label}
-                {note && (
-                  <Typography component="span" sx={{ ml: 0.75, fontSize: 12, color: C.gray }}>
-                    {note}
-                  </Typography>
-                )}
-              </Typography>
-              <AssigneePicker
-                key={`${service.service_name}-${role}-${currentId}`}
-                // Aquí el estatus ya está arriba: la pastilla dice quién es.
-                statusLabel={(current) =>
-                  current ? personName([current], current.id_user) : personName(users[role], currentId)
-                }
-                statusTitle={getStatusName(service.status)}
-                users={users[role] ?? []}
-                currentId={currentId || null}
-                roleLabel={label}
-                lockedReason={lockReason(role)}
-                onAssign={(user) => onAssign?.(service.service_name, role, user)}
-              />
-            </Box>
-          ))}
-        </Box>
-      </Box>
-
-      <Box>
-        <Typography sx={sectionTitleSx}>Por cadena</Typography>
-        {retailerStatuses.length === 0 ? (
-          <Typography sx={{ fontSize: 13, color: C.gray }}>Sin cadenas para este servicio.</Typography>
-        ) : (
-          <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
-            {retailerStatuses.map((item) => (
-              <Box
-                key={item.id_retailer}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1,
-                  py: 0.75,
-                  px: 1.25,
-                  borderRadius: "8px",
-                  background: C.grayLight,
-                }}
-              >
-                <Typography sx={{ flex: 1, fontSize: 14, color: C.black }}>{item.retailer}</Typography>
-                <StatusChip status={item.status} />
-              </Box>
-            ))}
-          </Box>
-        )}
-      </Box>
-
-      <Box>
-        <Typography sx={sectionTitleSx}>Entregable</Typography>
-        {service.editor_tab ? (
-          <Typography sx={{ fontSize: 13, color: C.gray }}>
-            El entregable es el contenido de la pestaña {service.editor_tab}.
-          </Typography>
-        ) : (
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 2,
-              p: 2,
-              borderRadius: "10px",
-              border: `1px dashed ${C.purple}`,
-            }}
-          >
-            <CloudUploadOutlinedIcon sx={{ color: C.purple, fontSize: 32 }} />
-            <Box sx={{ flex: 1 }}>
-              <Typography sx={{ fontSize: 14, fontWeight: 700, color: C.textPurple }}>
-                Aún no hay entregables
-              </Typography>
-              <Typography sx={{ fontSize: 13, color: C.gray }}>Tipo: {deliverableType}</Typography>
-            </Box>
-            <Tooltip {...whiteTooltipProps} title="Se habilita con el gestor de servicios" arrow>
-              <span>
-                <Button disabled variant="outlined" sx={{ textTransform: "none", borderRadius: "8px" }}>
-                  Subir entregable
-                </Button>
-              </span>
-            </Tooltip>
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-export { ServicesWorkspace };