feat(kanban): stickers feature + dashboard null guards (#0063)

- backend: Sticker type, idempotent stickers column, PUT /api/cards/:id/stickers, 4 tests - frontend: emoji-mart picker, toolbar button + ESC, draggable overlay with right-click delete, % coords for resize survival - dashboard: null guards on metrics arrays Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 21:00:30 +02:00
parent 2a727eb7c1
commit 656516f219
12 changed files with 552 additions and 46 deletions
@@ -108,7 +108,7 @@ export function Dashboard({ users }: Props) {
        setData(m);
        setRequesterOptions((prev) => {
          const set = new Set(prev);
-          for (const r of m.top_requesters) set.add(r.requester);
+          for (const r of m.top_requesters ?? []) set.add(r.requester);
          return Array.from(set).sort();
        });
      })
@@ -128,7 +128,7 @@ export function Dashboard({ users }: Props) {

  const cumulativeFlow = useMemo(() => {
    if (!data) return [];
-    const arr = data.cumulative_flow;
+    const arr = data.cumulative_flow ?? [];
    const firstIdx = arr.findIndex((p) => p.total > 0 || p.done > 0);
    const sliced = firstIdx <= 0 ? arr : arr.slice(Math.max(0, firstIdx - 1));
    return sliced.map((p) => ({
@@ -142,10 +142,10 @@ export function Dashboard({ users }: Props) {
  const throughputSeries = useMemo(() => {
    if (!data) return [];
    const map = new Map<string, { date: string; completed: number; created: number }>();
-    for (const d of data.throughput_daily) {
+    for (const d of data.throughput_daily ?? []) {
      map.set(d.date, { date: d.date, completed: d.count, created: 0 });
    }
-    for (const d of data.created_daily) {
+    for (const d of data.created_daily ?? []) {
      const cur = map.get(d.date) ?? { date: d.date, completed: 0, created: 0 };
      cur.created = d.count;
      map.set(d.date, cur);
@@ -155,7 +155,7 @@ export function Dashboard({ users }: Props) {

  const byColumnSeries = useMemo(() => {
    if (!data) return [];
-    return data.by_column.map((c) => ({
+    return (data.by_column ?? []).map((c) => ({
      column: c.name + (c.is_done ? " ✓" : ""),
      tarjetas: c.count,
    }));
@@ -163,7 +163,7 @@ export function Dashboard({ users }: Props) {

  const topAssigneeSeries = useMemo(() => {
    if (!data) return [];
-    return data.top_assignees
+    return (data.top_assignees ?? [])
      .slice()
      .sort((a, b) => b.completed_in_range + b.active - (a.completed_in_range + a.active))
      .slice(0, 8)
@@ -176,7 +176,7 @@ export function Dashboard({ users }: Props) {

  const topRequesterSeries = useMemo(() => {
    if (!data) return [];
-    return data.top_requesters.map((r) => ({
+    return (data.top_requesters ?? []).map((r) => ({
      solicitante: r.requester,
      activas: r.active,
      completadas: r.completed_in_range,
@@ -185,7 +185,7 @@ export function Dashboard({ users }: Props) {

  const movementsSeries = useMemo(() => {
    if (!data) return [];
-    return data.movements_by_user
+    return (data.movements_by_user ?? [])
      .filter((m) => m.moves > 0)
      .slice(0, 8)
      .map((m) => ({
@@ -249,41 +249,45 @@ export function Dashboard({ users }: Props) {
          </Center>
        )}

-        {data && (
+        {data && (() => {
+          const totals = data.totals ?? ({} as Metrics["totals"]);
+          const lead = data.lead_time ?? ({ n: 0, avg_ms: 0, p50_ms: 0, p90_ms: 0, p99_ms: 0 } as Metrics["lead_time"]);
+          const t = (k: keyof typeof totals) => totals[k] ?? 0;
+          return (
          <>
            <SimpleGrid cols={{ base: 2, md: 5 }} spacing="md">
              <KPI
                icon={<IconClipboardList size={14} />}
                label="Totales"
-                value={data.totals.cards}
-                hint={`${data.totals.columns} columnas, ${data.totals.users} usuarios`}
+                value={t("cards")}
+                hint={`${t("columns")} columnas, ${t("users")} usuarios`}
              />
              <KPI
                icon={<IconClipboardList size={14} />}
                label="Activas"
-                value={data.totals.cards_active}
+                value={t("cards_active")}
                hint={`Sin completar`}
                color="blue"
              />
              <KPI
                icon={<IconCheckbox size={14} />}
                label="Completadas (rango)"
-                value={data.totals.cards_completed_in_range}
-                hint={`${data.totals.cards_done} completadas total · ${data.totals.cards_created_in_range} creadas rango`}
+                value={t("cards_completed_in_range")}
+                hint={`${t("cards_done")} completadas total · ${t("cards_created_in_range")} creadas rango`}
                color="green"
              />
              <KPI
                icon={<IconClockHour4 size={14} />}
                label="Lead time p50"
-                value={formatDuration(data.lead_time.p50_ms)}
-                hint={`p90 ${formatDuration(data.lead_time.p90_ms)} · n=${data.lead_time.n}`}
+                value={lead.n > 0 ? formatDuration(lead.p50_ms) : 0}
+                hint={`p90 ${lead.n > 0 ? formatDuration(lead.p90_ms) : 0} · n=${lead.n}`}
              />
              <KPI
                icon={<IconLock size={14} />}
                label="Bloqueos activos"
-                value={data.totals.active_locks}
-                hint={`Total bloqueado: ${formatDuration(data.lock_total_ms)}`}
-                color={data.totals.active_locks > 0 ? "yellow" : undefined}
+                value={t("active_locks")}
+                hint={`Total bloqueado: ${formatDuration(data.lock_total_ms ?? 0)}`}
+                color={t("active_locks") > 0 ? "yellow" : undefined}
              />
            </SimpleGrid>

@@ -489,7 +493,7 @@ export function Dashboard({ users }: Props) {
                      </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
-                      {data.cycle_time_per_column.map((c) => (
+                      {(data.cycle_time_per_column ?? []).map((c) => (
                        <Table.Tr key={c.column_id}>
                          <Table.Td>
                            <Group gap={6} wrap="nowrap">
@@ -515,7 +519,8 @@ export function Dashboard({ users }: Props) {
              </Grid.Col>
            </Grid>
          </>
-        )}
+          );
+        })()}
      </Stack>
    </Box>
  );
@@ -26,7 +26,7 @@ import {
  IconUser,
  IconUserCircle,
 } from "@tabler/icons-react";
-import { memo, useState } from "react";
+import { memo, useCallback, useRef, useState } from "react";
 import type { Card, CardColor, User } from "../types";
 import { CARD_COLORS, colorBg, colorBorder, colorSwatch } from "./colors";
 import { formatDuration } from "./format";
@@ -40,6 +40,11 @@ interface Props {
  onShowHistory: (card: Card) => void;
  onToggleLock: (id: string, locked: boolean) => void;
  onAssign: (id: string, assignee_id: string | null) => void;
+  activeSticker?: string | null;
+  onAddSticker?: (cardId: string, x: number, y: number) => void;
+  onRemoveSticker?: (cardId: string, index: number) => void;
+  onMoveSticker?: (cardId: string, index: number, x: number, y: number) => void;
+  onCommitSticker?: (cardId: string) => void;
  users: User[];
  assignee?: User;
  inDoneColumn?: boolean;
@@ -55,6 +60,11 @@ function KanbanCardImpl({
  onShowHistory,
  onToggleLock,
  onAssign,
+  activeSticker,
+  onAddSticker,
+  onRemoveSticker,
+  onMoveSticker,
+  onCommitSticker,
  users,
  assignee,
  inDoneColumn,
@@ -64,12 +74,66 @@ function KanbanCardImpl({
  const [colorPopOpen, setColorPopOpen] = useState(false);
  const [assigneePopOpen, setAssigneePopOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
+  const cardElRef = useRef<HTMLElement | null>(null);
+  const draggingStickerRef = useRef<number | null>(null);
+  const stickerMode = !!activeSticker;
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: card.id,
    data: { type: "card", columnId: card.column_id },
-    disabled: card.locked,
+    disabled: card.locked || stickerMode,
  });

+  const setCardRef = useCallback((el: HTMLElement | null) => {
+    cardElRef.current = el;
+    setNodeRef(el);
+  }, [setNodeRef]);
+
+  const onCardClickAddSticker = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!stickerMode || !onAddSticker || isOverlay) return;
+    if ((e.target as HTMLElement).closest("[data-sticker-overlay]")) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width;
+    const y = (e.clientY - rect.top) / rect.height;
+    onAddSticker(card.id, Math.max(0, Math.min(1, x)), Math.max(0, Math.min(1, y)));
+  };
+
+  const startStickerDrag = (index: number) => (e: React.PointerEvent<HTMLSpanElement>) => {
+    if (stickerMode || isOverlay || !onMoveSticker) return;
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const rect = cardElRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    draggingStickerRef.current = index;
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    const onMove = (ev: PointerEvent) => {
+      const idx = draggingStickerRef.current;
+      if (idx === null) return;
+      const x = (ev.clientX - rect.left) / rect.width;
+      const y = (ev.clientY - rect.top) / rect.height;
+      onMoveSticker(card.id, idx, Math.max(0, Math.min(1, x)), Math.max(0, Math.min(1, y)));
+    };
+    const onUp = (ev: PointerEvent) => {
+      target.releasePointerCapture?.(ev.pointerId);
+      target.removeEventListener("pointermove", onMove);
+      target.removeEventListener("pointerup", onUp);
+      target.removeEventListener("pointercancel", onUp);
+      draggingStickerRef.current = null;
+      onCommitSticker?.(card.id);
+    };
+    target.addEventListener("pointermove", onMove);
+    target.addEventListener("pointerup", onUp);
+    target.addEventListener("pointercancel", onUp);
+  };
+
+  const onStickerContextMenu = (index: number) => (e: React.MouseEvent) => {
+    if (isOverlay) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onRemoveSticker?.(card.id, index);
+  };
+
  const style: React.CSSProperties = {
    transform: CSS.Transform.toString(transform),
    transition,
@@ -216,19 +280,20 @@ function KanbanCardImpl({

  return (
    <Paper
-      ref={setNodeRef}
-      style={{ ...style, cursor: card.locked ? "default" : "grab", touchAction: "none" }}
+      ref={setCardRef}
+      style={{ ...style, position: "relative", cursor: stickerMode ? "copy" : card.locked ? "default" : "grab", touchAction: "none" }}
      withBorder
      p="xs"
      shadow={isOverlay ? "lg" : "xs"}
      radius="md"
      onContextMenu={onContextMenu}
+      onClick={onCardClickAddSticker}
      onDoubleClick={(e) => {
        e.stopPropagation();
        onEdit(card);
      }}
      {...attributes}
-      {...(card.locked ? {} : listeners)}
+      {...(card.locked || stickerMode ? {} : listeners)}
    >
      <Stack gap={6}>
        <Group justify="space-between" gap={4} wrap="nowrap" align="flex-start">
@@ -315,6 +380,42 @@ function KanbanCardImpl({
          </Badge>
        </Group>
      </Stack>
+      {card.stickers && card.stickers.length > 0 && (
+        <div
+          data-sticker-overlay
+          style={{
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            overflow: "hidden",
+            borderRadius: "inherit",
+          }}
+        >
+          {card.stickers.map((s, i) => (
+            <span
+              key={i}
+              onPointerDown={startStickerDrag(i)}
+              onContextMenu={onStickerContextMenu(i)}
+              title="Arrastra para mover. Click derecho para borrar."
+              style={{
+                position: "absolute",
+                left: `${s.x * 100}%`,
+                top: `${s.y * 100}%`,
+                transform: "translate(-50%, -50%)",
+                fontSize: 48,
+                lineHeight: 1,
+                opacity: 0.6,
+                userSelect: "none",
+                cursor: stickerMode || isOverlay ? "default" : "grab",
+                pointerEvents: stickerMode || isOverlay ? "none" : "auto",
+                touchAction: "none",
+              }}
+            >
+              {s.emoji}
+            </span>
+          ))}
+        </div>
+      )}
    </Paper>
  );
 }
@@ -54,6 +54,11 @@ interface Props {
  onShowHistory: (card: Card) => void;
  onToggleCardLock: (id: string, locked: boolean) => void;
  onAssignCard: (id: string, assignee_id: string | null) => void;
+  activeSticker?: string | null;
+  onAddSticker?: (cardId: string, x: number, y: number) => void;
+  onRemoveSticker?: (cardId: string, index: number) => void;
+  onMoveSticker?: (cardId: string, index: number, x: number, y: number) => void;
+  onCommitSticker?: (cardId: string) => void;
  users: User[];
  usersById: Map<string, User>;
 }
@@ -76,6 +81,11 @@ function KanbanColumnImpl({
  onShowHistory,
  onToggleCardLock,
  onAssignCard,
+  activeSticker,
+  onAddSticker,
+  onRemoveSticker,
+  onMoveSticker,
+  onCommitSticker,
  users,
  usersById,
 }: Props) {
@@ -408,6 +418,11 @@ function KanbanColumnImpl({
                    users={users}
                    assignee={c.assignee_id ? usersById.get(c.assignee_id) : undefined}
                    inDoneColumn={column.is_done}
+                    activeSticker={activeSticker}
+                    onAddSticker={onAddSticker}
+                    onRemoveSticker={onRemoveSticker}
+                    onMoveSticker={onMoveSticker}
+                    onCommitSticker={onCommitSticker}
                  />
                ))}
              </Stack>
@@ -0,0 +1,50 @@
+import { Popover } from "@mantine/core";
+import { useEffect, useRef } from "react";
+import data from "@emoji-mart/data";
+import { Picker } from "emoji-mart";
+
+interface Props {
+  opened: boolean;
+  onClose: () => void;
+  onSelect: (emoji: string) => void;
+  target: React.ReactNode;
+}
+
+export function StickerPicker({ opened, onClose, onSelect, target }: Props) {
+  return (
+    <Popover opened={opened} onClose={onClose} position="bottom-start" withArrow shadow="md" withinPortal>
+      <Popover.Target>{target}</Popover.Target>
+      <Popover.Dropdown p={0} style={{ background: "transparent", border: "none" }}>
+        <PickerInner onSelect={(emoji) => { onSelect(emoji); onClose(); }} />
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
+
+function PickerInner({ onSelect }: { onSelect: (emoji: string) => void }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const instanceRef = useRef<unknown>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    instanceRef.current = new Picker({
+      data,
+      onEmojiSelect: (e: { native?: string; shortcodes?: string }) => {
+        if (e.native) onSelect(e.native);
+        else if (e.shortcodes) onSelect(e.shortcodes);
+      },
+      theme: "dark",
+      previewPosition: "none",
+      skinTonePosition: "search",
+      autoFocus: true,
+      maxFrequentRows: 2,
+      ref,
+    });
+    return () => {
+      if (ref.current) ref.current.innerHTML = "";
+      instanceRef.current = null;
+    };
+  }, [onSelect]);
+
+  return <div ref={ref} />;
+}