contentoh-components-library 21.6.61 → 21.6.63

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

@@ -1,591 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import {
-  Box,
-  ButtonBase,
-  Collapse,
-  IconButton,
-  InputAdornment,
-  TextField,
-  Tooltip,
-  Typography,
-} from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import SearchIcon from "@mui/icons-material/Search";
-import MenuOpenIcon from "@mui/icons-material/MenuOpen";
-import CloseIcon from "@mui/icons-material/Close";
-
-import {
-  COLORS,
-  FONT_STACK,
-  TITLE_STACK,
-  PendingDot,
-  ServiceIcon,
-  StatusChip,
-  serviceStatusProps,
-  fieldSx,
-  statusColor,
-  serviceStatusColor,
-  statusName,
-} from "./ui";
-import { SUMMARY, groupServices, isMine, isPendingFor } from "./model";
-
-/*
-  Lista lateral de servicios: reemplaza a la barra de pestañas.
-
-  - Solo muestra los servicios que el producto tiene contratados.
-  - «Resumen» va primero: el panorama de todos los servicios.
-  - Los servicios van en bloques fijos (Textos, Imágenes...). No se reordenan
-    por estatus: cada uno queda siempre en el mismo lugar.
-  - «Míos / Todos»: por omisión, solo lo que la persona trabaja. Aparece solo
-    cuando sirve (trabaja algunos servicios del producto, no todos).
-  - El buscador aparece cuando hay más de 8 servicios a la vista.
-  - Se contrae a una columna de íconos para dejarle el ancho al editor.
-  - `side`: de qué lado de la pantalla va («left» o «right»). Del lado derecho
-    es el espejo del izquierdo: borde, marca del servicio abierto, flechas de
-    contraer y globos de ayuda cambian de lado.
-*/
-
-export const RAIL_WIDTH = 256;
-export const RAIL_COLLAPSED_WIDTH = 64;
-const SEARCH_THRESHOLD = 8;
-const EXPAND_ALL_THRESHOLD = 12;
-
-const CountBadge = ({ children, active = false }) => (
-  <Box
-    component="span"
-    sx={{
-      minWidth: 20,
-      height: 18,
-      px: 0.75,
-      borderRadius: "9px",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontFamily: FONT_STACK,
-      fontSize: 11,
-      fontWeight: 700,
-      bgcolor: active ? COLORS.s5 : COLORS.s2,
-      color: active ? COLORS.white : COLORS.s4,
-    }}
-  >
-    {children}
-  </Box>
-);
-
-const FilterToggle = ({ value, onChange, mineCount, allCount }) => {
-  const options = [
-    { key: "mine", label: "Míos", count: mineCount },
-    { key: "all", label: "Todos", count: allCount },
-  ];
-  return (
-    <Box
-      role="group"
-      aria-label="Qué servicios ver"
-      sx={{ display: "flex", p: "3px", mx: 2, mb: 1.5, bgcolor: COLORS.s2, borderRadius: "18px" }}
-    >
-      {options.map((option) => {
-        const active = option.key === value;
-        return (
-          <ButtonBase
-            key={option.key}
-            aria-pressed={active}
-            onClick={() => onChange(option.key)}
-            sx={{
-              flex: 1,
-              height: 28,
-              gap: 0.75,
-              borderRadius: "15px",
-              fontFamily: FONT_STACK,
-              fontSize: 13,
-              fontWeight: active ? 700 : 400,
-              color: active ? COLORS.s5 : COLORS.s4,
-              bgcolor: active ? COLORS.white : "transparent",
-              boxShadow: active ? "0 1px 3px rgba(80, 61, 102, 0.18)" : "none",
-              transition: "background-color 120ms, box-shadow 120ms",
-            }}
-          >
-            {option.label}
-            <CountBadge active={active}>{option.count}</CountBadge>
-          </ButtonBase>
-        );
-      })}
-    </Box>
-  );
-};
-
-const itemSx = (active, side = "left") => ({
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  gap: 1.25,
-  height: 36,
-  pl: 1.5,
-  pr: 1,
-  borderRadius: "8px",
-  position: "relative",
-  textAlign: "left",
-  bgcolor: active ? COLORS.s2 : "transparent",
-  "&:hover": { bgcolor: COLORS.s2 },
-  "&::before": {
-    content: '""',
-    position: "absolute",
-    [side]: 0,
-    top: 8,
-    bottom: 8,
-    width: 3,
-    borderRadius: "2px",
-    bgcolor: active ? COLORS.magenta_s2 : "transparent",
-  },
-});
-
-const ItemLabel = ({ active, children }) => (
-  <Typography
-    sx={{
-      flex: 1,
-      minWidth: 0,
-      fontFamily: FONT_STACK,
-      fontSize: 14,
-      fontWeight: active ? 700 : 400,
-      color: active ? COLORS.s5 : COLORS.color_gray,
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-    }}
-  >
-    {children}
-  </Typography>
-);
-
-/* ------------------------------------------------------------------------ */
-/* Lista completa                                                           */
-/* ------------------------------------------------------------------------ */
-
-const ExpandedRail = ({
-  services,
-  visible,
-  selected,
-  onSelect,
-  userId,
-  filter,
-  onFilterChange,
-  showFilter,
-  onCollapse,
-  onClose,
-  side,
-}) => {
-  const [query, setQuery] = useState("");
-  const text = query.trim().toLowerCase();
-  const matches = text
-    ? visible.filter((service) => service.display_name.toLowerCase().includes(text))
-    : visible;
-  const groups = groupServices(matches);
-  const pendingCount = services.filter((service) => isPendingFor(service, userId)).length;
-
-  /*
-    Bloques abiertos: todos si caben; si no, el del servicio abierto y los que
-    tienen algo que le toca a la persona. Al buscar se abren todos.
-  */
-  // `visible` es un arreglo nuevo en cada render: se compara por sus nombres.
-  const visibleKey = visible.map((service) => service.service_name).join(",");
-  const defaultOpen = useMemo(() => {
-    const all = groupServices(visible);
-    if (visible.length <= EXPAND_ALL_THRESHOLD) return all.map((group) => group.key);
-    return all
-      .filter((group) =>
-        group.services.some(
-          (service) => service.service_name === selected || isPendingFor(service, userId)
-        )
-      )
-      .map((group) => group.key);
-    // Solo al cambiar lo que se ve: abrir un servicio no vuelve a cerrar bloques.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visibleKey, userId]);
-  const [open, setOpen] = useState(defaultOpen);
-  useEffect(() => setOpen(defaultOpen), [defaultOpen]);
-
-  // Si se abre un servicio de un bloque cerrado (desde el Resumen), se abre.
-  const selectedGroup = services.find((service) => service.service_name === selected)?.group;
-  useEffect(() => {
-    if (selectedGroup) setOpen((prev) => (prev.includes(selectedGroup) ? prev : [...prev, selectedGroup]));
-  }, [selectedGroup]);
-
-  const toggle = (key) =>
-    setOpen((prev) => (prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key]));
-
-  return (
-    <>
-      <Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 2, pt: 2, pb: 1.5 }}>
-        <Typography sx={{ flex: 1, fontFamily: TITLE_STACK, fontWeight: 600, fontSize: 16, color: COLORS.s5 }}>
-          Servicios
-        </Typography>
-        <CountBadge>{services.length}</CountBadge>
-        {onCollapse && (
-          <Tooltip title="Contraer la lista" arrow>
-            <IconButton aria-label="Contraer la lista de servicios" size="small" onClick={onCollapse}>
-              {/* La flecha apunta hacia el borde al que se contrae. */}
-              <MenuOpenIcon
-                sx={{ fontSize: 20, color: COLORS.s4, transform: side === "right" ? "scaleX(-1)" : "none" }}
-              />
-            </IconButton>
-          </Tooltip>
-        )}
-        {onClose && (
-          <IconButton aria-label="Cerrar la lista de servicios" size="small" onClick={onClose}>
-            <CloseIcon sx={{ fontSize: 20, color: COLORS.s4 }} />
-          </IconButton>
-        )}
-      </Box>
-
-      {showFilter && (
-        <FilterToggle
-          value={filter}
-          onChange={onFilterChange}
-          mineCount={services.filter((service) => isMine(service, userId)).length}
-          allCount={services.length}
-        />
-      )}
-
-      {visible.length > SEARCH_THRESHOLD && (
-        <Box sx={{ px: 2, mb: 1 }}>
-          <TextField
-            size="small"
-            fullWidth
-            placeholder="Buscar servicio…"
-            value={query}
-            onChange={(event) => setQuery(event.target.value)}
-            sx={fieldSx}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon sx={{ fontSize: 18, color: COLORS.s4 }} />
-                </InputAdornment>
-              ),
-            }}
-          />
-        </Box>
-      )}
-
-      <Box sx={{ flex: 1, minHeight: 0, overflowY: "auto", px: 1, pb: 1 }}>
-        <ButtonBase
-          onClick={() => onSelect(SUMMARY)}
-          aria-current={selected === SUMMARY ? "true" : undefined}
-          sx={{ ...itemSx(selected === SUMMARY, side), mb: 0.5 }}
-        >
-          <ServiceIcon
-            icon="summary"
-            sx={{ color: selected === SUMMARY ? COLORS.magenta_s2 : COLORS.s4 }}
-          />
-          <ItemLabel active={selected === SUMMARY}>Resumen</ItemLabel>
-          {pendingCount > 0 && <CountBadge>{pendingCount}</CountBadge>}
-        </ButtonBase>
-
-        {groups.length === 0 && (
-          <Typography sx={{ py: 3, textAlign: "center", fontFamily: FONT_STACK, fontSize: 13, color: COLORS.s4 }}>
-            Sin coincidencias
-          </Typography>
-        )}
-
-        {groups.map((group) => {
-          const isOpen = Boolean(text) || open.includes(group.key);
-          return (
-            <Box key={group.key} sx={{ mt: 0.5 }}>
-              <ButtonBase
-                onClick={() => toggle(group.key)}
-                aria-expanded={isOpen}
-                sx={{
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1,
-                  px: 1.5,
-                  py: 0.75,
-                  borderRadius: "6px",
-                  "&:hover": { bgcolor: COLORS.s1 },
-                }}
-              >
-                <Typography
-                  sx={{
-                    flex: 1,
-                    textAlign: "left",
-                    fontFamily: FONT_STACK,
-                    fontSize: 11,
-                    fontWeight: 700,
-                    letterSpacing: "0.06em",
-                    textTransform: "uppercase",
-                    color: COLORS.s4,
-                  }}
-                >
-                  {group.label}
-                </Typography>
-                {group.services.some((service) => isPendingFor(service, userId)) && !isOpen && (
-                  <PendingDot size={6} withTooltip={false} />
-                )}
-                <Typography sx={{ fontFamily: FONT_STACK, fontSize: 11, fontWeight: 700, color: COLORS.s4 }}>
-                  {group.services.length}
-                </Typography>
-                <ExpandMoreIcon
-                  sx={{
-                    fontSize: 18,
-                    color: COLORS.s4,
-                    transition: "transform 150ms",
-                    transform: isOpen ? "rotate(180deg)" : "none",
-                  }}
-                />
-              </ButtonBase>
-              <Collapse in={isOpen}>
-                {group.services.map((service) => {
-                  const active = service.service_name === selected;
-                  return (
-                    <ButtonBase
-                      key={service.service_name}
-                      onClick={() => onSelect(service.service_name)}
-                      aria-current={active ? "true" : undefined}
-                      sx={itemSx(active, side)}
-                    >
-                      <ServiceIcon
-                        icon={service.icon}
-                        sx={{ color: active ? COLORS.magenta_s2 : COLORS.s4 }}
-                      />
-                      <ItemLabel active={active}>{service.display_name}</ItemLabel>
-                      {isPendingFor(service, userId) && <PendingDot />}
-                      <StatusChip {...serviceStatusProps(service)} oval />
-                    </ButtonBase>
-                  );
-                })}
-              </Collapse>
-            </Box>
-          );
-        })}
-      </Box>
-
-      {pendingCount > 0 && (
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-            px: 2,
-            py: 1.25,
-            borderTop: `1px solid ${COLORS.s2}`,
-          }}
-        >
-          <PendingDot withTooltip={false} />
-          <Typography sx={{ fontFamily: FONT_STACK, fontSize: 12, color: COLORS.s4 }}>
-            Te toca a ti · {pendingCount} {pendingCount === 1 ? "servicio" : "servicios"}
-          </Typography>
-        </Box>
-      )}
-    </>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-/* Lista contraída: solo íconos                                             */
-/* ------------------------------------------------------------------------ */
-
-const CollapsedRail = ({ visible, selected, onSelect, userId, onExpand, side }) => {
-  const groups = groupServices(visible);
-  // Los globos de ayuda salen hacia el editor, no hacia el borde de la pantalla.
-  const tooltipPlacement = side === "right" ? "left" : "right";
-  const iconButtonSx = (active) => ({
-    width: 44,
-    height: 40,
-    borderRadius: "8px",
-    position: "relative",
-    bgcolor: active ? COLORS.s2 : "transparent",
-    "&:hover": { bgcolor: COLORS.s2 },
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      [side]: -10,
-      top: 8,
-      bottom: 8,
-      width: 3,
-      borderRadius: "2px",
-      bgcolor: active ? COLORS.magenta_s2 : "transparent",
-    },
-  });
-
-  return (
-    <>
-      <Box sx={{ display: "flex", justifyContent: "center", pt: 1.5, pb: 1 }}>
-        <Tooltip title="Mostrar la lista de servicios" arrow placement={tooltipPlacement}>
-          <IconButton aria-label="Mostrar la lista de servicios" onClick={onExpand}>
-            <MenuOpenIcon
-              sx={{ fontSize: 22, color: COLORS.s4, transform: side === "right" ? "none" : "scaleX(-1)" }}
-            />
-          </IconButton>
-        </Tooltip>
-      </Box>
-      <Box
-        sx={{
-          flex: 1,
-          minHeight: 0,
-          overflowY: "auto",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 0.5,
-          pb: 1,
-        }}
-      >
-        <Tooltip title="Resumen" arrow placement={tooltipPlacement}>
-          <ButtonBase
-            aria-label="Resumen"
-            aria-current={selected === SUMMARY ? "true" : undefined}
-            onClick={() => onSelect(SUMMARY)}
-            sx={iconButtonSx(selected === SUMMARY)}
-          >
-            <ServiceIcon
-              icon="summary"
-              sx={{ fontSize: 22, color: selected === SUMMARY ? COLORS.magenta_s2 : COLORS.s4 }}
-            />
-          </ButtonBase>
-        </Tooltip>
-        {groups.map((group) => (
-          <Box
-            key={group.key}
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 0.5,
-              pt: 0.75,
-              mt: 0.25,
-              borderTop: `1px solid ${COLORS.s2}`,
-              width: 40,
-            }}
-          >
-            {group.services.map((service) => {
-              const active = service.service_name === selected;
-              const pending = isPendingFor(service, userId);
-              const label = [
-                service.display_name,
-                statusName(service.status) ?? service.status,
-                pending ? "Te toca a ti" : null,
-              ]
-                .filter(Boolean)
-                .join(" · ");
-              return (
-                <Tooltip key={service.service_name} title={label} arrow placement={tooltipPlacement}>
-                  <ButtonBase
-                    aria-label={label}
-                    aria-current={active ? "true" : undefined}
-                    onClick={() => onSelect(service.service_name)}
-                    sx={iconButtonSx(active)}
-                  >
-                    <ServiceIcon
-                      icon={service.icon}
-                      sx={{ fontSize: 22, color: active ? COLORS.magenta_s2 : COLORS.s4 }}
-                    />
-                    {/* Estatus: punto con el color de la etiqueta. */}
-                    <Box
-                      component="span"
-                      sx={{
-                        position: "absolute",
-                        top: 5,
-                        right: 6,
-                        width: 9,
-                        height: 9,
-                        borderRadius: "50%",
-                        bgcolor: serviceStatusColor(service),
-                        border: `2px solid ${active ? COLORS.s2 : COLORS.white}`,
-                      }}
-                    />
-                    {pending && (
-                      <Box
-                        component="span"
-                        sx={{
-                          position: "absolute",
-                          bottom: 4,
-                          left: "50%",
-                          transform: "translateX(-50%)",
-                          width: 14,
-                          height: 3,
-                          borderRadius: "2px",
-                          bgcolor: COLORS.magenta_s2,
-                        }}
-                      />
-                    )}
-                  </ButtonBase>
-                </Tooltip>
-              );
-            })}
-          </Box>
-        ))}
-      </Box>
-    </>
-  );
-};
-
-/* ------------------------------------------------------------------------ */
-
-export const ServicesRail = ({
-  services,
-  selected,
-  onSelect,
-  userId,
-  filter,
-  onFilterChange,
-  showFilter,
-  collapsed = false,
-  onToggleCollapsed,
-  onClose,
-  variant = "rail",
-  side = "left",
-}) => {
-  const visible =
-    showFilter && filter === "mine"
-      ? services.filter(
-          (service) => isMine(service, userId) || service.service_name === selected
-        )
-      : services;
-
-  const isRail = variant === "rail";
-  const width = isRail ? (collapsed ? RAIL_COLLAPSED_WIDTH : RAIL_WIDTH) : "100%";
-
-  return (
-    <Box
-      component="nav"
-      aria-label="Servicios del producto"
-      sx={{
-        width,
-        flexShrink: 0,
-        height: "100%",
-        minHeight: 0,
-        display: "flex",
-        flexDirection: "column",
-        bgcolor: COLORS.white,
-        [side === "right" ? "borderLeft" : "borderRight"]: isRail ? `1px solid ${COLORS.s2}` : "none",
-        transition: "width 160ms ease",
-        overflow: "hidden",
-        fontFamily: FONT_STACK,
-      }}
-    >
-      {isRail && collapsed ? (
-        <CollapsedRail
-          visible={visible}
-          selected={selected}
-          onSelect={onSelect}
-          userId={userId}
-          onExpand={onToggleCollapsed}
-          side={side}
-        />
-      ) : (
-        <ExpandedRail
-          services={services}
-          visible={visible}
-          selected={selected}
-          onSelect={onSelect}
-          userId={userId}
-          filter={filter}
-          onFilterChange={onFilterChange}
-          showFilter={showFilter}
-          onCollapse={isRail ? onToggleCollapsed : undefined}
-          onClose={onClose}
-          side={side}
-        />
-      )}
-    </Box>
-  );
-};