contentoh-components-library 21.6.61 → 21.6.63

package/src/components/organisms/ServicesNavigation/views.jsx

@@ -1,705 +0,0 @@
-import { useState } from "react";
-import { Box, Button, ButtonBase, LinearProgress, Stack, TextField, Typography } from "@mui/material";
-import ImageOutlinedIcon from "@mui/icons-material/ImageOutlined";
-import CloudUploadOutlinedIcon from "@mui/icons-material/CloudUploadOutlined";
-import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
-import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-
-import {
-  COLORS,
-  FONT_STACK,
-  TITLE_STACK,
-  PendingDot,
-  ServiceIcon,
-  StatusChip,
-  serviceStatusProps,
-  captionSx,
-  fieldSx,
-  labelSx,
-  outlineButtonSx,
-  statusColor,
-  serviceStatusColor,
-  statusName,
-} from "./ui";
-import { SUMMARY, fullName, groupServices, isPendingFor } from "./model";
-
-/*
-  Vistas de trabajo del prototipo. Una por tipo de entregable, no una por
-  servicio: Descripción, SEO y Header de ficha usan la de textos; Foto, Edición
-  y Resize, la de imágenes. El contenido es de ejemplo: lo que se muestra es
-  cómo se navega y qué ve cada quien, no el editor final.
-*/
-
-const baseStatus = (status) => String(status ?? "").split("/")[0];
-const isRejected = (status) =>
-  String(status ?? "")
-    .split("/")
-    .some((part) => ["RA", "RC", "RP", "RCA", "RAC"].includes(part));
-const DONE = ["Ex", "FAP"];
-
-/* ------------------------------------------------------------------------ */
-/* Piezas comunes                                                           */
-/* ------------------------------------------------------------------------ */
-
-const Panel = ({ title, aside, children, sx }) => (
-  <Box
-    sx={{
-      border: `1px solid ${COLORS.s2}`,
-      borderRadius: "10px",
-      bgcolor: COLORS.white,
-      p: 2,
-      mb: 2,
-      ...sx,
-    }}
-  >
-    {(title || aside) && (
-      <Stack direction="row" alignItems="baseline" spacing={1} sx={{ mb: 1.5, flexWrap: "wrap", rowGap: 0.5 }}>
-        {title && (
-          <Typography sx={{ fontFamily: TITLE_STACK, fontWeight: 600, fontSize: 15, color: COLORS.s5 }}>
-            {title}
-          </Typography>
-        )}
-        <Box sx={{ flex: 1 }} />
-        {aside}
-      </Stack>
-    )}
-    {children}
-  </Box>
-);
-
-const Note = ({ icon, tone = "info", children }) => (
-  <Box
-    sx={{
-      display: "flex",
-      alignItems: "flex-start",
-      gap: 1,
-      p: 1.5,
-      mb: 2,
-      borderRadius: "8px",
-      bgcolor: tone === "error" ? "rgba(215, 77, 237, 0.08)" : COLORS.blue_light,
-      border: `1px solid ${tone === "error" ? "rgba(215, 77, 237, 0.35)" : COLORS.s2}`,
-    }}
-  >
-    <Box sx={{ color: tone === "error" ? COLORS.rejected_status : COLORS.s4, display: "flex", mt: "1px" }}>{icon}</Box>
-    <Typography sx={{ fontFamily: FONT_STACK, fontSize: 13, lineHeight: "19px", color: COLORS.s5 }}>{children}</Typography>
-  </Box>
-);
-
-const REJECTION_COMMENTS = {
-  description: "Falta mencionar la garantía en la descripción larga.",
-  edition: "La toma de empaque tiene sombra: el fondo debe ser blanco puro.",
-  aplusPlatinum: "El banner principal no respeta la guía de marca de la cadena.",
-};
-
-const RejectionNote = ({ service }) =>
-  isRejected(service.status) ? (
-    <Note icon={<ErrorOutlineIcon sx={{ fontSize: 18 }} />} tone="error">
-      <b>{statusName(service.status) ?? "Rechazado"}.</b>{" "}
-      «{REJECTION_COMMENTS[service.service_name] ?? "Revisa los comentarios y vuelve a enviar."}»
-    </Note>
-  ) : null;
-
-const DropZone = ({ label, hint, sx }) => (
-  <ButtonBase
-    sx={{
-      width: "100%",
-      minHeight: 120,
-      display: "flex",
-      flexDirection: "column",
-      gap: 0.75,
-      border: `1.5px dashed ${COLORS.magenta_s2}`,
-      borderRadius: "10px",
-      bgcolor: "rgba(227, 58, 169, 0.04)",
-      color: COLORS.magenta_s2,
-      p: 2,
-      "&:hover": { bgcolor: "rgba(227, 58, 169, 0.08)" },
-      ...sx,
-    }}
-  >
-    <CloudUploadOutlinedIcon sx={{ fontSize: 28 }} />
-    <Typography sx={{ fontFamily: FONT_STACK, fontSize: 13, fontWeight: 700 }}>{label}</Typography>
-    {hint && <Typography sx={{ ...captionSx, textAlign: "center" }}>{hint}</Typography>}
-  </ButtonBase>
-);
-
-const CountedField = ({ label, value: initial = "", max, rows = 1, required = false, placeholder }) => {
-  const [value, setValue] = useState(initial);
-  const over = max && value.length > max;
-  return (
-    <Box>
-      {label && (
-        <Typography sx={labelSx}>
-          {label}
-          {required && <Box component="span" sx={{ color: COLORS.magenta_s2 }}> *</Box>}
-        </Typography>
-      )}
-      <TextField
-        fullWidth
-        size="small"
-        multiline={rows > 1}
-        minRows={rows > 1 ? rows : undefined}
-        value={value}
-        placeholder={placeholder}
-        onChange={(event) => setValue(event.target.value)}
-        sx={fieldSx}
-      />
-      {max && (
-        <Typography sx={{ ...captionSx, textAlign: "right", mt: 0.25, color: over ? COLORS.rejected_status : COLORS.s4 }}>
-          {value.length} / {max}
-        </Typography>
-      )}
-    </Box>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-/* Resumen                                                                  */
-/* ------------------------------------------------------------------------ */
-
-const StatTile = ({ value, label, color }) => (
-  <Box sx={{ flex: "1 1 120px", border: `1px solid ${COLORS.s2}`, borderRadius: "10px", p: 1.5, bgcolor: COLORS.white }}>
-    <Stack direction="row" alignItems="center" spacing={0.75}>
-      {color && <Box sx={{ width: 8, height: 8, borderRadius: "50%", bgcolor: color }} />}
-      <Typography sx={{ fontFamily: TITLE_STACK, fontWeight: 600, fontSize: 24, lineHeight: "30px", color: COLORS.s5 }}>
-        {value}
-      </Typography>
-    </Stack>
-    <Typography sx={captionSx}>{label}</Typography>
-  </Box>
-);
-
-export const SummaryView = ({ services, userId, onSelect }) => {
-  const pending = services.filter((service) => isPendingFor(service, userId)).length;
-  const rejected = services.filter((service) => isRejected(service.status)).length;
-  const done = services.filter((service) => DONE.includes(baseStatus(service.status))).length;
-
-  return (
-    <>
-      <Stack direction="row" spacing={1.5} sx={{ mb: 2, flexWrap: "wrap", rowGap: 1.5 }}>
-        <StatTile value={services.length} label="Servicios contratados" />
-        <StatTile value={pending} label="Te tocan a ti" color={COLORS.magenta_s2} />
-        <StatTile value={rejected} label="Rechazados" color={COLORS.rejected_status} />
-        <StatTile value={done} label="Terminados" color={COLORS.exported} />
-      </Stack>
-
-      <Panel title="Avance">
-        <Box aria-hidden="true" sx={{ display: "flex", gap: "3px", height: 10 }}>
-          {groupServices(services)
-            .flatMap((group) => group.services)
-            .map((service) => (
-              <Box
-                key={service.service_name}
-                title={`${service.display_name} · ${statusName(service.status) ?? service.status}`}
-                sx={{ flex: "1 1 0", minWidth: 4, borderRadius: "3px", bgcolor: serviceStatusColor(service) }}
-              />
-            ))}
-        </Box>
-        <Typography sx={{ ...captionSx, mt: 0.75 }}>
-          Cada segmento es un servicio, con el color de su estatus, en el orden de la lista.
-        </Typography>
-      </Panel>
-
-      {groupServices(services).map((group) => (
-        <Panel key={group.key} title={group.label} aside={<Typography sx={captionSx}>{group.services.length}</Typography>} sx={{ p: 1, pt: 1.5 }}>
-          {group.services.map((service) => {
-            const especialist = service.assignees?.especialist;
-            const mine = isPendingFor(service, userId);
-            return (
-              <ButtonBase
-                key={service.service_name}
-                onClick={() => onSelect(service.service_name)}
-                sx={{
-                  width: "100%",
-                  display: "grid",
-                  gridTemplateColumns: {
-                    xs: "minmax(0, 1fr) auto",
-                    sm: "minmax(0, 1.6fr) 72px minmax(0, 1fr) 16px 84px 20px",
-                  },
-                  alignItems: "center",
-                  columnGap: 1.5,
-                  px: 1,
-                  py: 1,
-                  borderRadius: "8px",
-                  textAlign: "left",
-                  "&:hover": { bgcolor: COLORS.s1 },
-                  "& + &": { borderTop: `1px solid ${COLORS.s2}` },
-                }}
-              >
-                <Stack direction="row" alignItems="center" spacing={1} sx={{ minWidth: 0 }}>
-                  <ServiceIcon icon={service.icon} sx={{ color: COLORS.s4 }} />
-                  <Typography noWrap sx={{ fontFamily: FONT_STACK, fontSize: 14, color: COLORS.color_gray }}>
-                    {service.display_name}
-                  </Typography>
-                </Stack>
-                <Box>
-                  <StatusChip {...serviceStatusProps(service)} oval />
-                </Box>
-                <Typography noWrap sx={{ ...captionSx, display: { xs: "none", sm: "block" } }}>
-                  {especialist ? fullName(especialist) : "Sin especialista"}
-                </Typography>
-                <Box sx={{ display: { xs: "none", sm: "flex" } }}>{mine && <PendingDot />}</Box>
-                <Typography sx={{ ...captionSx, display: { xs: "none", sm: "block" } }}>{service.updated_at}</Typography>
-                <ArrowForwardIcon sx={{ display: { xs: "none", sm: "block" }, fontSize: 16, color: COLORS.s3 }} />
-              </ButtonBase>
-            );
-          })}
-        </Panel>
-      ))}
-    </>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-/* Ficha técnica                                                            */
-/* ------------------------------------------------------------------------ */
-
-const ATTRIBUTES = [
-  { label: "Marca", value: "Norteña Pro", required: true },
-  { label: "Modelo", value: "NP-2040", required: true },
-  { label: "Voltaje", value: "20 V", required: true },
-  { label: "Tipo de batería", value: "Ion de litio", required: true },
-  { label: "Velocidad máxima", value: "1 500 rpm" },
-  { label: "Peso", value: "1.4 kg" },
-  { label: "Garantía", value: "2 años", required: true },
-  { label: "Contenido de la caja", value: "", required: true },
-];
-
-const AttributesView = ({ service, retailerName }) => {
-  const required = ATTRIBUTES.filter((item) => item.required);
-  const filled = required.filter((item) => item.value).length;
-  return (
-    <>
-      <RejectionNote service={service} />
-      <Panel
-        title={`Atributos de ${retailerName}`}
-        aside={
-          <Typography sx={captionSx}>
-            {filled} de {required.length} requeridos completos
-          </Typography>
-        }
-      >
-        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
-          {ATTRIBUTES.map((item) => (
-            <CountedField key={item.label} label={item.label} value={item.value} required={item.required} />
-          ))}
-        </Box>
-      </Panel>
-    </>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-/* Textos (Descripción, SEO, Header de ficha)                               */
-/* ------------------------------------------------------------------------ */
-
-const LONG_DESCRIPTION =
-  "Perfora madera, metal y plástico sin cables. El motor de 20 V llega a 1 500 rpm y el embrague de 21 posiciones evita barrir tornillos. Incluye dos baterías de ion de litio de 2 Ah, cargador rápido y estuche.";
-
-const TEXT_FIELDS = {
-  description: [
-    { label: "Descripción corta", max: 150, rows: 2, required: true, value: "Taladro inalámbrico de 20 V con dos baterías de ion de litio y cargador rápido." },
-    { label: "Descripción larga", max: 1000, rows: 5, required: true, value: LONG_DESCRIPTION },
-    { label: "Puntos clave", max: 400, rows: 3, value: "• Motor de 1 500 rpm\n• Dos baterías de 2 Ah\n• Luz LED de trabajo" },
-  ],
-  datasheetHeader: [
-    { label: "Encabezado de la ficha", max: 120, rows: 2, required: true, value: "Taladro inalámbrico 20 V | Norteña Pro NP-2040" },
-  ],
-  seo: [
-    { label: "Título SEO", max: 60, required: true, value: "Taladro inalámbrico 20 V con 2 baterías | Norteña Pro" },
-    { label: "Meta descripción", max: 155, rows: 3, required: true, value: "", placeholder: "Resumen para buscadores" },
-    { label: "Palabras clave", max: 200, rows: 2, value: "taladro inalámbrico, taladro 20v, herramienta eléctrica" },
-  ],
-};
-
-const TextView = ({ service, retailerName }) => (
-  <>
-    <RejectionNote service={service} />
-    <Panel title={`${service.display_name} para ${retailerName}`}>
-      <Stack spacing={2}>
-        {(TEXT_FIELDS[service.service_name] ?? TEXT_FIELDS.description).map((field) => (
-          <CountedField key={field.label} {...field} />
-        ))}
-      </Stack>
-    </Panel>
-  </>
-);
-
-/* ------------------------------------------------------------------------ */
-/* Traducción                                                               */
-/* ------------------------------------------------------------------------ */
-
-const TRANSLATION_ROWS = [
-  { label: "Nombre del producto", source: "Taladro inalámbrico 20 V con 2 baterías", target: "20V Cordless Drill with 2 Batteries" },
-  { label: "Descripción corta", source: "Taladro inalámbrico de 20 V con dos baterías de ion de litio y cargador rápido.", target: "20V cordless drill with two lithium-ion batteries and a fast charger." },
-  { label: "Descripción larga", source: LONG_DESCRIPTION, target: "" },
-  { label: "Puntos clave", source: "• Motor de 1 500 rpm\n• Dos baterías de 2 Ah\n• Luz LED de trabajo", target: "" },
-  { label: "Contenido de la caja", source: "Taladro, 2 baterías, cargador y estuche", target: "Drill, 2 batteries, charger and carrying case" },
-];
-
-const LanguagePill = ({ children, strong }) => (
-  <Box
-    component="span"
-    sx={{
-      px: 1.25,
-      height: 26,
-      display: "inline-flex",
-      alignItems: "center",
-      borderRadius: "13px",
-      fontFamily: FONT_STACK,
-      fontSize: 12,
-      fontWeight: 700,
-      bgcolor: strong ? COLORS.s5 : COLORS.s2,
-      color: strong ? COLORS.white : COLORS.s5,
-    }}
-  >
-    {children}
-  </Box>
-);
-
-const TranslationView = ({ service, hasSourceServices }) => {
-  const done = TRANSLATION_ROWS.filter((row) => row.target).length;
-  return (
-    <>
-      <RejectionNote service={service} />
-      <Note icon={<LockOutlinedIcon sx={{ fontSize: 18 }} />}>
-        El texto original viene de la Descripción y la Ficha técnica del producto y aquí solo se lee.
-        {hasSourceServices
-          ? " Si hay que corregirlo, se hace en esos servicios."
-          : " Este producto no tiene esos servicios contratados: su contenido sirve de base, pero no aparecen en la lista."}
-      </Note>
-      <Panel
-        title={
-          <Stack direction="row" alignItems="center" spacing={1} component="span">
-            <LanguagePill>Español (México)</LanguagePill>
-            <ArrowForwardIcon sx={{ fontSize: 16, color: COLORS.s4 }} />
-            <LanguagePill strong>Inglés (EE. UU.)</LanguagePill>
-          </Stack>
-        }
-        aside={
-          <Box sx={{ minWidth: 150 }}>
-            <Typography sx={{ ...captionSx, textAlign: "right" }}>
-              {done} de {TRANSLATION_ROWS.length} campos traducidos
-            </Typography>
-            <LinearProgress
-              variant="determinate"
-              value={(done / TRANSLATION_ROWS.length) * 100}
-              sx={{
-                mt: 0.5,
-                height: 4,
-                borderRadius: 2,
-                bgcolor: COLORS.s2,
-                "& .MuiLinearProgress-bar": { bgcolor: COLORS.magenta_s2 },
-              }}
-            />
-          </Box>
-        }
-      >
-        <Box
-          sx={{
-            display: { xs: "none", md: "grid" },
-            gridTemplateColumns: "1fr 1fr",
-            columnGap: 2,
-            mb: 1,
-          }}
-        >
-          <Typography sx={{ ...captionSx, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em" }}>
-            Original · solo lectura
-          </Typography>
-          <Typography sx={{ ...captionSx, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em" }}>
-            Traducción
-          </Typography>
-        </Box>
-        <Stack spacing={2}>
-          {TRANSLATION_ROWS.map((row) => (
-            <Box key={row.label}>
-              <Typography sx={labelSx}>{row.label}</Typography>
-              <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
-                <Box
-                  sx={{
-                    p: "8.5px 14px",
-                    borderRadius: "6px",
-                    bgcolor: COLORS.s1,
-                    border: `1px solid ${COLORS.s2}`,
-                    fontFamily: FONT_STACK,
-                    fontSize: 14,
-                    lineHeight: "23px",
-                    color: COLORS.gray,
-                    whiteSpace: "pre-line",
-                  }}
-                >
-                  {row.source}
-                </Box>
-                <CountedField
-                  label=""
-                  value={row.target}
-                  rows={row.source.length > 80 || row.source.includes("\n") ? 3 : 1}
-                  placeholder="Pendiente de traducir"
-                />
-              </Box>
-            </Box>
-          ))}
-        </Stack>
-      </Panel>
-    </>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-/* Imágenes (Imágenes, Foto, Edición, Resize, Adaptaciones, Imagen premium) */
-/* ------------------------------------------------------------------------ */
-
-const SHOTS = ["Frente", "Reverso", "Lateral", "Empaque", "En uso", "Detalle", "Ambiente", "Medidas"];
-
-const TILE_STATES = {
-  ready: { label: "Lista", color: COLORS.finished },
-  pending: { label: "Pendiente", color: COLORS.s4 },
-  rejected: { label: "Rechazada", color: COLORS.rejected_status },
-};
-
-const tileState = (service, index) => {
-  const base = baseStatus(service.status);
-  if (["Ex", "FAP", "AA", "AP", "AC", "ACA", "AAC"].includes(base)) return "ready";
-  if (["PA", "R"].includes(base)) return "pending";
-  if (isRejected(service.status) && index === 3) return "rejected";
-  return index < 5 ? "ready" : "pending";
-};
-
-const ImagesView = ({ service, imageServices, onSelect, userId }) => {
-  const states = SHOTS.map((_, index) => tileState(service, index));
-  const ready = states.filter((state) => state === "ready").length;
-  return (
-    <>
-      {imageServices.length > 1 && (
-        <Box sx={{ mb: 2 }}>
-          <Typography sx={{ ...captionSx, mb: 1 }}>
-            Las imágenes del producto son las mismas para {imageServices.length} servicios. Elige en cuál trabajas:
-          </Typography>
-          <Stack direction="row" spacing={1} sx={{ flexWrap: "wrap", rowGap: 1 }}>
-            {imageServices.map((item) => {
-              const active = item.service_name === service.service_name;
-              return (
-                <ButtonBase
-                  key={item.service_name}
-                  aria-pressed={active}
-                  onClick={() => onSelect(item.service_name)}
-                  sx={{
-                    gap: 0.75,
-                    height: 32,
-                    px: 1.5,
-                    borderRadius: "16px",
-                    fontFamily: FONT_STACK,
-                    fontSize: 13,
-                    fontWeight: active ? 700 : 400,
-                    color: active ? COLORS.magenta_s2 : COLORS.s5,
-                    bgcolor: active ? COLORS.white : COLORS.s2,
-                    border: `1px solid ${active ? COLORS.magenta_s2 : COLORS.s2}`,
-                  }}
-                >
-                  <ServiceIcon icon={item.icon} sx={{ fontSize: 16, color: "inherit" }} />
-                  {item.display_name}
-                  {/* Mismo orden que la lista lateral: «te toca» y luego el estatus. */}
-                  {isPendingFor(item, userId) && <PendingDot size={7} withTooltip={false} />}
-                  <StatusChip {...serviceStatusProps(item)} oval />
-                </ButtonBase>
-              );
-            })}
-          </Stack>
-        </Box>
-      )}
-
-      <RejectionNote service={service} />
-
-      <Panel
-        title={`${service.display_name} · ${SHOTS.length} tomas`}
-        aside={<Typography sx={captionSx}>{ready} listas para este servicio</Typography>}
-      >
-        <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(132px, 1fr))", gap: 1.5 }}>
-          {SHOTS.map((shot, index) => {
-            const state = TILE_STATES[states[index]];
-            return (
-              <Box
-                key={shot}
-                sx={{
-                  border: `1px solid ${states[index] === "rejected" ? COLORS.rejected_status : COLORS.s2}`,
-                  borderRadius: "8px",
-                  overflow: "hidden",
-                  bgcolor: COLORS.white,
-                }}
-              >
-                <Box
-                  sx={{
-                    aspectRatio: "1 / 1",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    background: `linear-gradient(135deg, ${COLORS.blue_light}, ${COLORS.s2})`,
-                  }}
-                >
-                  <ImageOutlinedIcon sx={{ fontSize: 34, color: COLORS.s3 }} />
-                </Box>
-                <Stack direction="row" alignItems="center" spacing={0.75} sx={{ px: 1, py: 0.75 }}>
-                  <Typography noWrap sx={{ flex: 1, fontFamily: FONT_STACK, fontSize: 12, color: COLORS.color_gray }}>
-                    {shot}
-                  </Typography>
-                  <Box sx={{ width: 7, height: 7, borderRadius: "50%", bgcolor: state.color }} />
-                  <Typography sx={{ fontFamily: FONT_STACK, fontSize: 11, color: state.color }}>{state.label}</Typography>
-                </Stack>
-              </Box>
-            );
-          })}
-          <DropZone label="Subir imágenes" hint="JPG o PNG" sx={{ minHeight: 0, aspectRatio: "1 / 1.22" }} />
-        </Box>
-      </Panel>
-    </>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-/* Video                                                                    */
-/* ------------------------------------------------------------------------ */
-
-const VIDEOS = [
-  { name: "Video demostrativo", length: "0:45", state: "ready" },
-  { name: "Unboxing", length: "1:20", state: "pending" },
-];
-
-const VideoView = ({ service }) => (
-  <>
-    <RejectionNote service={service} />
-    <Panel title="Videos del producto" aside={<Typography sx={captionSx}>MP4, hasta 500 MB</Typography>}>
-      <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 1.5 }}>
-        {VIDEOS.map((video) => {
-          const state = TILE_STATES[video.state];
-          return (
-            <Box key={video.name} sx={{ border: `1px solid ${COLORS.s2}`, borderRadius: "8px", overflow: "hidden" }}>
-              <Box
-                sx={{
-                  aspectRatio: "16 / 9",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  bgcolor: COLORS.deep_gray,
-                }}
-              >
-                <PlayCircleOutlineIcon sx={{ fontSize: 40, color: COLORS.white, opacity: 0.85 }} />
-              </Box>
-              <Stack direction="row" alignItems="center" spacing={0.75} sx={{ px: 1.25, py: 1 }}>
-                <Typography noWrap sx={{ flex: 1, fontFamily: FONT_STACK, fontSize: 13, color: COLORS.color_gray }}>
-                  {video.name} · {video.length}
-                </Typography>
-                <Box sx={{ width: 7, height: 7, borderRadius: "50%", bgcolor: state.color }} />
-                <Typography sx={{ fontFamily: FONT_STACK, fontSize: 11, color: state.color }}>{state.label}</Typography>
-              </Stack>
-            </Box>
-          );
-        })}
-        <DropZone label="Subir video" hint="Arrastra el archivo o haz clic" sx={{ aspectRatio: "16 / 11.5" }} />
-      </Box>
-    </Panel>
-  </>
-);
-
-/* ------------------------------------------------------------------------ */
-/* Archivos (diseño, 360°, reportes, carga en cadena)                       */
-/* ------------------------------------------------------------------------ */
-
-const FILES = {
-  brandstore: [
-    ["brandstore_taladro_v2.zip", "Versión 2 · 10/10/2026 · 4.2 MB"],
-    ["brandstore_taladro_v1.zip", "Versión 1 · 03/10/2026 · 4.0 MB"],
-  ],
-  aplusPlatinum: [["aplus_taladro_v1.html", "Versión 1 · 09/10/2026 · 380 KB"]],
-  golden: [["golden_thd_taladro_borrador.zip", "Borrador · 12/10/2026 · 2.1 MB"]],
-  quality: [["reporte_calidad_11096.pdf", "Versión 1 · 11/10/2026 · 640 KB"]],
-  audit: [],
-  secodatReview: [["revision_secodat_11096.xlsx", "Versión final · 06/10/2026 · 85 KB"]],
-};
-
-const FilesView = ({ service }) => {
-  const files = FILES[service.service_name] ?? [];
-  return (
-    <>
-      <RejectionNote service={service} />
-      <Panel
-        title={`Entregable: ${service.deliverable ?? "Archivo"}`}
-        aside={<Typography sx={captionSx}>{files.length} {files.length === 1 ? "archivo" : "archivos"}</Typography>}
-      >
-        {files.length === 0 ? (
-          <Typography sx={{ ...captionSx, mb: 1.5 }}>Aún no hay entregables para este servicio.</Typography>
-        ) : (
-          <Stack sx={{ mb: 1.5 }}>
-            {files.map(([name, meta]) => (
-              <Stack
-                key={name}
-                direction="row"
-                alignItems="center"
-                spacing={1.5}
-                sx={{ py: 1.25, "& + &": { borderTop: `1px solid ${COLORS.s2}` } }}
-              >
-                <Box
-                  sx={{
-                    width: 36,
-                    height: 36,
-                    borderRadius: "8px",
-                    bgcolor: COLORS.s2,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexShrink: 0,
-                  }}
-                >
-                  <InsertDriveFileOutlinedIcon sx={{ fontSize: 20, color: COLORS.s4 }} />
-                </Box>
-                <Box sx={{ flex: 1, minWidth: 0 }}>
-                  <Typography noWrap sx={{ fontFamily: FONT_STACK, fontSize: 14, color: COLORS.color_gray }}>
-                    {name}
-                  </Typography>
-                  <Typography sx={captionSx}>{meta}</Typography>
-                </Box>
-                <Button sx={{ ...outlineButtonSx, height: 28, px: 1.5, fontSize: 12 }}>Descargar</Button>
-              </Stack>
-            ))}
-          </Stack>
-        )}
-        <DropZone label="Subir entregable" hint="PDF, ZIP, HTML o imágenes" />
-      </Panel>
-    </>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-
-export const ServiceView = ({ selected, service, services, userId, onSelect, retailerName }) => {
-  if (selected === SUMMARY || !service) {
-    return <SummaryView services={services} userId={userId} onSelect={onSelect} />;
-  }
-  switch (service.view) {
-    case "attributes":
-      return <AttributesView key={service.service_name} service={service} retailerName={retailerName} />;
-    case "text":
-      return <TextView key={service.service_name} service={service} retailerName={retailerName} />;
-    case "translation":
-      return (
-        <TranslationView
-          service={service}
-          hasSourceServices={services.some((item) => ["description", "datasheet"].includes(item.service_name))}
-        />
-      );
-    case "images":
-      return (
-        <ImagesView
-          service={service}
-          imageServices={services.filter((item) => item.view === "images")}
-          onSelect={onSelect}
-          userId={userId}
-        />
-      );
-    case "video":
-      return <VideoView service={service} />;
-    default:
-      return <FilesView key={service.service_name} service={service} />;
-  }
-};