contentoh-components-library 21.6.60 → 21.6.61

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

@@ -0,0 +1,591 @@
+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>
+  );
+};