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>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user