contentoh-components-library 21.6.60 → 21.6.61

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

@@ -0,0 +1,203 @@
+/*
+  Modelo de servicios de un producto para la edición.
+
+  Misma lógica que la tabla de productos de Creators (ServicesCell/rowServices):
+  un servicio se identifica por `service_name`, se agrupa en etapas por su
+  estatus base y se pinta con los mismos colores, para que el usuario reconozca
+  lo que vio en la tabla al entrar a la edición.
+
+  Fuentes, en orden:
+    1. `serviceStatuses` (listado ligero, view=summary): un elemento por servicio.
+    2. Los tres estatus de siempre (datasheet/description/images_status).
+    3. `demo_services`: servicios de ejemplo para revisar el diseño (ver demo.js).
+*/
+
+/** Servicios que tienen editor propio en esta pantalla, y su pestaña. */
+export const EDITOR_TABS = {
+  description: "Descripción",
+  datasheet: "Ficha técnica",
+  images: "Imágenes",
+};
+
+const LEGACY = [
+  { service_name: "datasheet", display_name: "Ficha técnica", statusKey: "datasheet_status" },
+  { service_name: "description", display_name: "Descripción", statusKey: "description_status" },
+  { service_name: "images", display_name: "Imágenes", statusKey: "images_status" },
+];
+
+const NOT_REQUESTED = [undefined, null, "", "NS", "NULL", "-"];
+
+export const STATUS_NAMES = {
+  PA: "Por asignar",
+  AS: "Asignado",
+  R: "Recibido",
+  CA: "Capturando",
+  IE: "Información enviada",
+  RC: "Rechazado coordinador",
+  AC: "Aprobado coordinador",
+  RA: "Rechazado auditor",
+  AA: "Aprobado auditor",
+  RP: "Rechazado proveedor",
+  AP: "Aprobado proveedor",
+  ACA: "Aprobado cadena",
+  RCA: "Rechazado cadena",
+  SAC: "Solicitud auditoría Content-oh!",
+  AAC: "Aprobado auditoría Content-oh!",
+  RAC: "Rechazado auditoría Content-oh!",
+  FAP: "Finalización auditoría por proveedor",
+  Ex: "Exportado",
+  REG: "Registrado",
+};
+
+const baseStatus = (status) => String(status ?? "").split("/")[0];
+
+export const getStatusName = (status) =>
+  STATUS_NAMES[status] ?? STATUS_NAMES[baseStatus(status)] ?? status ?? "Sin estatus";
+
+/** Mismos colores que la tabla de Creators (helper.getStatusColor). */
+export const getStatusColor = (status) => {
+  switch (baseStatus(status)) {
+    case "R":
+    case "PA":
+    case "SAC":
+      return "#E67432";
+    case "ACA":
+    case "AC":
+    case "AP":
+    case "AA":
+    case "AAC":
+      return "#18A0FB";
+    case "RC":
+    case "RA":
+    case "RCA":
+    case "RP":
+    case "RAC":
+      return "#D74DED";
+    case "CA":
+    case "AS":
+    case "IE":
+      return "#ED9A4D";
+    case "Ex":
+    case "FAP":
+      return "#71DE56";
+    default:
+      return "#D4D1D7";
+  }
+};
+
+export const SERVICE_STAGES = [
+  { stage_name: "pending", display_name: "Por asignar", singular: "por asignar", plural: "por asignar", statuses: ["R", "PA"] },
+  { stage_name: "in_progress", display_name: "En proceso", singular: "en proceso", plural: "en proceso", statuses: ["AS", "CA", "IE"] },
+  { stage_name: "rejected", display_name: "Rechazados", singular: "rechazado", plural: "rechazados", statuses: ["RC", "RA", "RP", "RCA", "RAC"] },
+  { stage_name: "review", display_name: "En revisión y aprobación", singular: "en revisión", plural: "en revisión", statuses: ["AC", "AA", "AP", "ACA", "SAC", "AAC"] },
+  { stage_name: "done", display_name: "Terminados", singular: "terminado", plural: "terminados", statuses: ["Ex", "FAP"] },
+  { stage_name: "registered", display_name: "Registrados (solo marca)", singular: "registrado", plural: "registrados", statuses: ["REG"] },
+].map((stage) => ({
+  ...stage,
+  color: stage.stage_name === "registered" ? "#CBCBCB" : getStatusColor(stage.statuses[0]),
+}));
+
+const STAGE_BY_NAME = Object.fromEntries(SERVICE_STAGES.map((stage) => [stage.stage_name, stage]));
+const ATTENTION_ORDER = ["rejected", "pending", "in_progress", "review", "done", "registered"];
+
+export const getServiceStage = (service) => {
+  if (!service.has_workflow) return STAGE_BY_NAME.registered;
+  const base = baseStatus(service.status);
+  return SERVICE_STAGES.find((stage) => stage.statuses.includes(base)) ?? STAGE_BY_NAME.in_progress;
+};
+
+export const groupServicesByStage = (services) =>
+  SERVICE_STAGES.map((stage) => ({
+    stage,
+    services: services.filter((service) => getServiceStage(service).stage_name === stage.stage_name),
+  })).filter((group) => group.services.length > 0);
+
+export const getAttention = (groups) => {
+  const workflow = groups.filter((group) => group.stage.stage_name !== "registered");
+  if (workflow.length > 0 && workflow.every((group) => group.stage.stage_name === "done")) {
+    return { stage: STAGE_BY_NAME.done, label: "Terminado" };
+  }
+  const first = ATTENTION_ORDER.map((name) => groups.find((group) => group.stage.stage_name === name)).find(Boolean);
+  if (!first) return null;
+  const count = first.services.length;
+  return { stage: first.stage, label: `${count} ${count === 1 ? first.stage.singular : first.stage.plural}` };
+};
+
+/** Cuál abrir primero: lo que más pide atención. */
+export const pickInitialService = (services) => {
+  const groups = groupServicesByStage(services);
+  const first = ATTENTION_ORDER.map((name) => groups.find((group) => group.stage.stage_name === name)).find(Boolean);
+  return first?.services[0]?.service_name ?? null;
+};
+
+const assigneesOf = (product, serviceName) => ({
+  especialist: product?.[`id_${serviceName}_especialist`] || null,
+  facilitator: product?.[`id_${serviceName}_facilitator`] || null,
+});
+
+/**
+ * Servicios del producto (normalizado por la edición o con la forma del
+ * listado): [{ service_name, display_name, status, has_workflow,
+ * editor_tab, assignees: { especialist, facilitator }, is_demo }]
+ */
+export const getProductServices = (product) => {
+  if (!product) return [];
+  let base;
+  if (Array.isArray(product.serviceStatuses) && product.serviceStatuses.length > 0) {
+    base = product.serviceStatuses
+      .filter((service) => !NOT_REQUESTED.includes(service.status))
+      .map((service) => {
+        const legacy = LEGACY.find((def) => def.service_name === service.service_name);
+        const displayName =
+          service.display_name && service.display_name !== service.service_name
+            ? service.display_name
+            : legacy?.display_name ?? service.service_name;
+        return {
+          service_name: service.service_name,
+          display_name: displayName,
+          status: service.status,
+          has_workflow: service.has_workflow !== false,
+        };
+      });
+  } else {
+    base = LEGACY.filter((def) => !NOT_REQUESTED.includes(product[def.statusKey])).map((def) => ({
+      service_name: def.service_name,
+      display_name: def.display_name,
+      status: product[def.statusKey],
+      has_workflow: true,
+    }));
+  }
+
+  const demo = (product.demo_services ?? []).map((service) => ({
+    service_name: service.service_name,
+    display_name: service.display_name,
+    status: service.status,
+    has_workflow: service.has_workflow !== false,
+    deliverable_type: service.deliverable_type,
+    is_demo: true,
+  }));
+
+  return [...base, ...demo].map((service) => ({
+    ...service,
+    editor_tab: EDITOR_TABS[service.service_name] ?? null,
+    assignees: service.is_demo ? {} : assigneesOf(product, service.service_name),
+  }));
+};
+
+/**
+ * Estatus del servicio en cada cadena. Sale de `statusByRetailer` (detalle del
+ * producto); los servicios de ejemplo lo inventan a partir del suyo.
+ */
+export const getRetailerStatuses = (product, service, retailers = []) => {
+  const nameOf = (id) => retailers.find((retailer) => retailer.id_retailer === id)?.retailer ?? `Cadena ${id}`;
+  if (service.is_demo) {
+    return retailers.map((retailer, index) => ({
+      id_retailer: retailer.id_retailer,
+      retailer: retailer.retailer,
+      status: index === 0 ? service.status : baseStatus(service.status),
+    }));
+  }
+  return (product?.statusByRetailer ?? [])
+    .filter((item) => item.service === service.service_name)
+    .map((item) => ({ id_retailer: item.retailer_id, retailer: nameOf(item.retailer_id), status: item.status }));
+};

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

@@ -0,0 +1,27 @@
+/**
+ * Tooltip blanco con la paleta de la plataforma (en lugar del gris oscuro de
+ * MUI). Se pasa a <Tooltip {...whiteTooltipProps}>.
+ */
+export const whiteTooltipProps = {
+  componentsProps: {
+    tooltip: {
+      sx: {
+        backgroundColor: "#FFFFFF",
+        color: "#262626",
+        border: "1px solid #F0EEF2",
+        borderRadius: "10px",
+        boxShadow: 4,
+        p: 1.5,
+        maxWidth: 340,
+        fontFamily: "Lato, sans-serif",
+        fontSize: 12,
+      },
+    },
+    arrow: {
+      sx: {
+        color: "#FFFFFF",
+        "&::before": { border: "1px solid #F0EEF2" },
+      },
+    },
+  },
+};

package/src/components/pages/CreatorsProductEdition/mocks/mockApi.js

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 
 import { buildFixtures } from "./api.fixtures";
+import { applyProductServicesChange, assignablesFor, buildProductServices } from "./productServices.fixtures";
 
 /*
   API falsa para las historias: reemplaza el adaptador de axios mientras la
@@ -42,6 +43,11 @@ export const createMockAdapter = ({
   grupo,
 } = {}) => {
   const fx = buildFixtures({ images, delSolStatus, familia, grupo });
+  // Servicios del producto (edición unificada): con estado, para que un cambio
+  // de estatus o de asignación se vea al volver a pedir la lista.
+  const productServices = buildProductServices({ delSolStatus });
+  const lambdaReply = (config, statusCode, body) =>
+    reply(config, { statusCode, body: JSON.stringify(body) });
 
   return (config) => {
     const method = (config.method || "get").toUpperCase();
@@ -63,6 +69,17 @@ export const createMockAdapter = ({
     if (path === "variants/group") return reply(config, fx.group);
     if (method === "GET" && path === "services") return reply(config, fx.services);
     if (method === "GET" && path === "versions") return reply(config, fx.versions);
+    if (method === "GET" && path === "product-services") return lambdaReply(config, 200, productServices);
+    if (method === "PUT" && path.startsWith("product-services/")) {
+      const action = path.split("/")[1];
+      const data = typeof config.data === "string" ? JSON.parse(config.data) : config.data;
+      const { statusCode, message } = applyProductServicesChange(productServices, action, data);
+      console.info(`[mock API] PUT ${path}`, data);
+      return lambdaReply(config, statusCode, statusCode === 200 ? { action, result: data } : { message });
+    }
+    if (method === "GET" && path === "service-catalog" && query.view === "assignables") {
+      return lambdaReply(config, 200, { users: assignablesFor(query.assignment_role) });
+    }
     if (path === "percentages") return reply(config, fx.percentages);
     // Sin versión auditable ni observación: con la API real de dev estas dos
     // fallan por CORS, así que la pantalla ya sabe vivir sin ellas.

package/src/components/pages/CreatorsProductEdition/mocks/productServices.fixtures.js

@@ -0,0 +1,175 @@
+/*
+  GET /product-services para las historias de la edición unificada
+  (ProductEdition): el mismo producto de api.fixtures.js (144814, orden 10421)
+  con sus tres servicios de siempre en Oxxo (36) y Del Sol (38), más tres del
+  catálogo: A+ (flujo completo, por cadena), Compra de producto en tienda
+  (casilla) y Levantamiento y recolección (avance), los dos últimos por
+  producto (cadena 0). Nombres, colores e íconos como en cat_service y
+  cat_status (docs/sql/catalog 002, 003 y 006 del backend).
+
+  `applyProductServicesChange` simula PUT /product-services/{action} sobre una
+  copia, para que la historia muestre el cambio al volver a pedir la lista.
+*/
+
+const ARTICLE_ID = 144814;
+const ORDER_ID = 10421;
+
+const STATUS = {
+  PA: { status_name: "PA", display_name: "Por asignar", color: "#E57432", flow_name: "workflow", is_final: false, progress_percent: null },
+  AA: { status_name: "AA", display_name: "Aprobado auditor", color: "#18A0FB", flow_name: "workflow", is_final: false, progress_percent: null },
+  "RA/AS": { status_name: "RA/AS", display_name: "Rechazado auditor / Asignado", color: "#D74DED", flow_name: "workflow", is_final: false, progress_percent: null },
+  PE: { status_name: "PE", display_name: "Pendiente", color: "#E57432", flow_name: "checkbox", is_final: false, progress_percent: 0 },
+  HE: { status_name: "HE", display_name: "Hecho", color: "#71DE56", flow_name: "checkbox", is_final: true, progress_percent: 100 },
+  SE: { status_name: "SE", display_name: "Sin empezar", color: "#E57432", flow_name: "progress", is_final: false, progress_percent: 0 },
+  EP: { status_name: "EP", display_name: "En proceso", color: "#ED9A4D", flow_name: "progress", is_final: false, progress_percent: 50 },
+  TE: { status_name: "TE", display_name: "Terminado", color: "#71DE56", flow_name: "progress", is_final: true, progress_percent: 100 },
+};
+
+const OPTIONS = { checkbox: ["PE", "HE"], progress: ["SE", "EP", "TE"] };
+
+const WEIGHT = { PA: 1, "RA/AS": 7, AA: 10, PE: 2, SE: 2, EP: 3, HE: 99, TE: 99 };
+
+export const PEOPLE = {
+  423: { id_user: 423, name: "Coordinador Textos", last_name: null, id_role: 4 },
+  424: { id_user: 424, name: "Coordinador Imágenes", last_name: null, id_role: 5 },
+  425: { id_user: 425, name: "Auditor QA", last_name: null, id_role: 6 },
+  426: { id_user: 426, name: "Especialista Textos", last_name: null, id_role: 7 },
+  427: { id_user: 427, name: "Especialista Edición", last_name: null, id_role: 8 },
+};
+
+const RETAILER_NAMES = { 0: "Sin cadena", 36: "Oxxo", 38: "Del Sol" };
+
+const retailer = (id, statusName) => ({
+  id_retailer: id,
+  retailer_name: RETAILER_NAMES[id],
+  quantity: 1,
+  status: STATUS[statusName] ?? null,
+});
+
+const generalOf = (retailers) =>
+  retailers
+    .filter((item) => item.status)
+    .reduce((low, item) => (!low || WEIGHT[item.status.status_name] < WEIGHT[low.status_name] ? item.status : low), null);
+
+const service = ({ legacy = false, flow, retailers, roles, assignees, actions, ...rest }) => ({
+  icon_name: null,
+  deliverable_type: null,
+  has_workflow: flow !== "flag",
+  requires_qa: roles.includes("auditor"),
+  per_retailer: !retailers.some((item) => item.id_retailer === 0),
+  is_legacy: legacy,
+  status_flow: { flow_name: flow, flow_type: flow === "workflow" || flow === "flag" ? flow : "simple" },
+  status: generalOf(retailers),
+  status_options: OPTIONS[flow]?.map((name) => STATUS[name]) ?? [],
+  retailers,
+  roles,
+  assignees: { especialist: null, facilitator: null, auditor: null, ...assignees },
+  actions,
+  ...rest,
+});
+
+const category = (category_name, display_name) => ({ category_name, display_name });
+
+/** Respuesta de GET /product-services (el cuerpo, sin la envoltura de la lambda). */
+export const buildProductServices = ({ delSolStatus } = {}) => ({
+  article_id: ARTICLE_ID,
+  order_id: ORDER_ID,
+  auditor: PEOPLE[425],
+  services: [
+    service({
+      service_name: "datasheet",
+      display_name: "Ficha técnica",
+      icon_name: "datasheet",
+      category: category("texts", "Textos"),
+      legacy: true,
+      flow: "workflow",
+      retailers: [retailer(36, "RA/AS"), retailer(38, delSolStatus ?? "RA/AS")],
+      roles: ["especialist", "facilitator", "auditor"],
+      assignees: { especialist: PEOPLE[426], facilitator: PEOPLE[423], auditor: PEOPLE[425] },
+      actions: { set_status: false, assign: false },
+    }),
+    service({
+      service_name: "description",
+      display_name: "Descripción",
+      icon_name: "description",
+      category: category("texts", "Textos"),
+      legacy: true,
+      flow: "workflow",
+      retailers: [retailer(36, "RA/AS"), retailer(38, delSolStatus ?? "RA/AS")],
+      roles: ["especialist", "facilitator", "auditor"],
+      assignees: { especialist: PEOPLE[426], facilitator: PEOPLE[423], auditor: PEOPLE[425] },
+      actions: { set_status: false, assign: false },
+    }),
+    service({
+      service_name: "images",
+      display_name: "Imágenes",
+      icon_name: "images",
+      category: category("images", "Imágenes"),
+      legacy: true,
+      flow: "workflow",
+      retailers: [retailer(36, "AA"), retailer(38, delSolStatus ?? "AA")],
+      roles: ["especialist", "facilitator", "auditor"],
+      assignees: { especialist: PEOPLE[427], facilitator: PEOPLE[424], auditor: PEOPLE[425] },
+      actions: { set_status: false, assign: false },
+    }),
+    service({
+      service_name: "aplusPlatinum",
+      display_name: "A+ / Platinum SKU",
+      icon_name: "aplus",
+      category: category("media", "Multimedia y diseño"),
+      flow: "workflow",
+      retailers: [retailer(36, "PA"), retailer(38, "PA")],
+      roles: ["especialist", "facilitator", "auditor"],
+      assignees: { auditor: PEOPLE[425] },
+      actions: { set_status: false, assign: true },
+    }),
+    service({
+      service_name: "productPurchase",
+      display_name: "Compra de producto en tienda",
+      icon_name: "purchase",
+      category: category("logistics", "Logística"),
+      flow: "checkbox",
+      retailers: [retailer(0, "PE")],
+      roles: ["especialist"],
+      assignees: { especialist: PEOPLE[427] },
+      actions: { set_status: true, assign: true },
+    }),
+    service({
+      service_name: "productPickup",
+      display_name: "Levantamiento y recolección",
+      icon_name: "pickup",
+      category: category("logistics", "Logística"),
+      flow: "progress",
+      retailers: [retailer(0, "SE")],
+      roles: ["especialist"],
+      assignees: {},
+      actions: { set_status: true, assign: true },
+    }),
+  ],
+});
+
+/** Personas que se pueden asignar (GET /service-catalog?view=assignables). */
+export const assignablesFor = (role) =>
+  Object.values(PEOPLE)
+    .filter((person) => (role === "facilitator" ? [4, 5] : [7, 8]).includes(person.id_role))
+    .map((person) => ({ id_user: person.id_user, name: person.name, email: null, id_role: person.id_role }));
+
+/** Aplica PUT /product-services/{action} sobre `body` (se modifica en su lugar). */
+export const applyProductServicesChange = (body, action, data) => {
+  const target = body.services.find((item) => item.service_name === data?.serviceName);
+  if (!target) return { statusCode: 404, message: "El producto no tiene ese servicio en esta orden." };
+  if (action === "set-status") {
+    const status = STATUS[data.statusName];
+    if (!status) return { statusCode: 400, message: "Estatus no válido." };
+    target.retailers.forEach((item) => {
+      if (!data.retailerIds || data.retailerIds.includes(item.id_retailer)) item.status = status;
+    });
+    target.status = generalOf(target.retailers);
+    return { statusCode: 200 };
+  }
+  if (action === "assign") {
+    target.assignees[data.role] = data.userId ? PEOPLE[data.userId] ?? { id_user: data.userId } : null;
+    return { statusCode: 200 };
+  }
+  return { statusCode: 400, message: `Acción no válida: ${action}.` };
+};

package/src/components/pages/CreatorsProductEdition/sections/StatusChip.jsx

@@ -6,9 +6,13 @@ import { COLORS, FONTS, statusColor, statusName } from "./tokens";
  * Etiqueta de estatus ("RA/AS", "AA"...). Mismo color y tamaño que
  * `atoms/Status`; el nombre completo va en el tooltip. `oval` es la variante
  * redondeada de la barra de pestañas.
+ *
+ * `label`, `color` y `title` (opcionales) reemplazan el texto, el color y el
+ * tooltip: los estatus de los flujos simples del catálogo (Pendiente, Hecho…)
+ * traen los suyos desde el backend.
  */
-export const StatusChip = ({ status, oval = false }) => {
-  const label = status ?? "NS";
+export const StatusChip = ({ status, oval = false, label: labelProp, color, title }) => {
+  const label = labelProp ?? status ?? "NS";
   const chip = (
     <Chip
       label={label}
@@ -16,7 +20,7 @@ export const StatusChip = ({ status, oval = false }) => {
       sx={{
         height: 20,
         borderRadius: oval ? "10px" : "3px",
-        backgroundColor: statusColor(status),
+        backgroundColor: color ?? statusColor(status),
         color: COLORS.white,
         fontFamily: FONTS.Lato,
         fontSize: 12,
@@ -26,7 +30,7 @@ export const StatusChip = ({ status, oval = false }) => {
     />
   );
 
-  const name = statusName(status);
+  const name = title ?? statusName(status);
   return name ? (
     <Tooltip title={name} arrow placement="top">
       {chip}

package/src/components/pages/ProductEdition/ProductEdition.stories.js

@@ -0,0 +1,106 @@
+import { ProductEdition } from "./index";
+import { withMockApi } from "../CreatorsProductEdition/mocks/mockApi";
+import { allCatalogServices } from "../../organisms/ServicesNavigation/catalog";
+
+/*
+  Edición de producto unificada con datos locales: no le pega a ninguna API
+  (la simula `CreatorsProductEdition/mocks`). Guardar, aprobar o rechazar se
+  acepta sin hacer nada y queda en la consola como `[mock API]`.
+
+  El producto y los usuarios son los mismos de las historias de
+  CreatorsProductEdition, para comparar las dos pantallas con lo mismo.
+*/
+import { ImageEditor } from "../RetailerProductEdition/stories/ImageEditor.stories";
+import { TextEditor } from "../RetailerProductEdition/stories/TextEditor.stories";
+import { Auditor } from "../RetailerProductEdition/stories/Auditor.stories";
+
+export default {
+  title: "Components/pages/ProductEdition",
+  component: ProductEdition,
+  decorators: [withMockApi()],
+  parameters: { layout: "fullscreen" },
+};
+
+// Como en la app: la pantalla vive en una caja de altura fija.
+const Template = (args) => (
+  <div style={{ height: "100vh", display: "flex", overflow: "hidden" }}>
+    <ProductEdition {...args} />
+  </div>
+);
+
+const base = {
+  app: "creators",
+  token: ImageEditor.args.token,
+  productSelected: ImageEditor.args.productSelected,
+  enableDigitalAssets: true,
+};
+
+const TODAS_LAS_PESTAÑAS = {
+  Descripción: true,
+  "Ficha técnica": true,
+  Imágenes: true,
+};
+
+/** Servicios del catálogo que todavía no tienen editor (vista de muestra). */
+const SERVICIOS_DE_EJEMPLO = [
+  { service_name: "translation", status: "CA" },
+  { service_name: "seo", status: "AS" },
+  { service_name: "photo", status: "Ex" },
+  { service_name: "videos", status: "IE" },
+  { service_name: "brandstore", status: "AC" },
+  { service_name: "quality", status: "PA" },
+];
+
+/** Especialista de imágenes (rol 8): «Míos» le muestra solo Imágenes. */
+export const EspecialistaImagenes = Template.bind({});
+EspecialistaImagenes.storyName = "Especialista de imágenes";
+EspecialistaImagenes.args = {
+  ...base,
+  tabsSections: ImageEditor.args.tabsSections,
+  user: ImageEditor.args.user,
+};
+
+/** Especialista de textos (rol 7): Ficha técnica y Descripción. */
+export const EspecialistaTextos = Template.bind({});
+EspecialistaTextos.storyName = "Especialista de textos";
+EspecialistaTextos.args = {
+  ...base,
+  tabsSections: TextEditor.args.tabsSections,
+  user: TextEditor.args.user,
+};
+
+/** Auditor QA (rol 6): asignado a todo el producto, ve los tres servicios. */
+export const AuditorQA = Template.bind({});
+AuditorQA.storyName = "Auditor QA";
+AuditorQA.args = {
+  ...base,
+  tabsSections: TODAS_LAS_PESTAÑAS,
+  user: Auditor.args.user,
+};
+
+/** Auditor con servicios de ejemplo: así se ve con más de los tres de siempre. */
+export const ConServiciosDeEjemplo = Template.bind({});
+ConServiciosDeEjemplo.storyName = "Con servicios de ejemplo";
+ConServiciosDeEjemplo.args = {
+  ...AuditorQA.args,
+  demoServices: SERVICIOS_DE_EJEMPLO,
+};
+
+/**
+ * Auditor con todos los servicios activos de la plataforma (los de
+ * `cat_service`): los tres con editor salen del producto y el resto son de
+ * ejemplo, con estatus variados. Sirve para ver la lista lateral llena: los
+ * cinco bloques (con Mantenimiento), el buscador y el Resumen.
+ */
+export const TodosLosServicios = Template.bind({});
+TodosLosServicios.storyName = "Todos los servicios";
+TodosLosServicios.args = {
+  ...AuditorQA.args,
+  demoServices: allCatalogServices({ exclude: ["datasheet", "description", "images"] }),
+};
+
+/** En celular la lista se abre como panel con el botón «Servicios». */
+export const EspecialistaImagenesCelular = Template.bind({});
+EspecialistaImagenesCelular.storyName = "Especialista de imágenes · celular";
+EspecialistaImagenesCelular.args = EspecialistaImagenes.args;
+EspecialistaImagenesCelular.parameters = { viewport: { defaultViewport: "mobile2" } };