contentoh-components-library 21.6.60 → 21.6.61

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

@@ -0,0 +1,705 @@
+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} />;
+  }
+};