Oleada UX 7: Chat (presencia, busqueda en historial) y WACRM (metricas para gerencia, notas internas y etiquetas que sobreviven al sync) + fixes de concurrencia
This commit is contained in:
214
frontend/src/components/wacrm/ConversationEtiquetas.tsx
Normal file
214
frontend/src/components/wacrm/ConversationEtiquetas.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import type { FC } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Tag, Plus, Trash2, Check, Settings2 } from 'lucide-react';
|
||||
import { Card, Button, Input, Skeleton, toast } from '../ui';
|
||||
import { odooApi, type WacrmTag } from '../../services/odoo';
|
||||
|
||||
interface Props {
|
||||
conversationId: string;
|
||||
/** Se avisa al contenedor para refrescar las etiquetas de la lista. */
|
||||
onTagsChange: (tags: { id: number; name: string; color: string }[]) => void;
|
||||
/** Se avisa cuando cambia el catálogo (el filtro de la bandeja se recarga). */
|
||||
onCatalogoChange?: () => void;
|
||||
}
|
||||
|
||||
const COLORES = ['#605ca8', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#a855f7'];
|
||||
|
||||
/** Etiquetas de la conversación + catálogo editable. Sobreviven al sync. */
|
||||
const ConversationEtiquetas: FC<Props> = ({ conversationId, onTagsChange, onCatalogoChange }) => {
|
||||
const [catalogo, setCatalogo] = useState<WacrmTag[]>([]);
|
||||
const [asignadas, setAsignadas] = useState<{ id: number; name: string; color: string }[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [nueva, setNueva] = useState('');
|
||||
const [color, setColor] = useState(COLORES[0]);
|
||||
const [creando, setCreando] = useState(false);
|
||||
const [gestionOpen, setGestionOpen] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [tagsRes, convRes] = await Promise.all([
|
||||
odooApi.getWacrmTags(),
|
||||
odooApi.getWacrmConversations(),
|
||||
]);
|
||||
if (tagsRes.status === 'success') setCatalogo(tagsRes.tags);
|
||||
if (convRes.status === 'success') {
|
||||
const conv = convRes.conversations.find((c) => c.external_id === conversationId);
|
||||
setAsignadas(conv?.tags || []);
|
||||
}
|
||||
} catch {
|
||||
toast.error('No se pudieron cargar las etiquetas');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [conversationId]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const alternar = async (tagId: number) => {
|
||||
const tiene = asignadas.some((t) => t.id === tagId);
|
||||
try {
|
||||
const res = await odooApi.assignWacrmTag(conversationId, tagId, tiene ? 'remove' : 'add');
|
||||
if (res.status === 'success') {
|
||||
setAsignadas(res.tags);
|
||||
onTagsChange(res.tags);
|
||||
}
|
||||
} catch {
|
||||
toast.error('No se pudo actualizar la etiqueta');
|
||||
}
|
||||
};
|
||||
|
||||
const crear = async () => {
|
||||
const name = nueva.trim();
|
||||
if (!name) return;
|
||||
try {
|
||||
setCreando(true);
|
||||
const res = await odooApi.createWacrmTag({ name, color });
|
||||
if (res.status === 'success') {
|
||||
setCatalogo((prev) => (prev.some((t) => t.id === res.tag.id) ? prev : [...prev, res.tag]));
|
||||
setNueva('');
|
||||
toast.success('Etiqueta creada');
|
||||
onCatalogoChange?.();
|
||||
}
|
||||
} catch (err) {
|
||||
const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
|
||||
toast.error(msg || 'No se pudo crear la etiqueta');
|
||||
} finally {
|
||||
setCreando(false);
|
||||
}
|
||||
};
|
||||
|
||||
const desactivar = async (t: WacrmTag) => {
|
||||
if (!window.confirm(`¿Desactivar la etiqueta "${t.name}"? Dejará de estar disponible.`)) return;
|
||||
try {
|
||||
await odooApi.deleteWacrmTag(t.id);
|
||||
setCatalogo((prev) => prev.filter((x) => x.id !== t.id));
|
||||
setAsignadas((prev) => prev.filter((x) => x.id !== t.id));
|
||||
onTagsChange(asignadas.filter((x) => x.id !== t.id));
|
||||
onCatalogoChange?.();
|
||||
toast.success('Etiqueta desactivada');
|
||||
} catch {
|
||||
toast.error('No se pudo desactivar la etiqueta');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="flex-1 overflow-hidden flex flex-col">
|
||||
<div className="p-3 border-b border-theme-border bg-theme-bg flex items-center justify-between gap-2">
|
||||
<p className="text-sm font-medium text-theme-heading inline-flex items-center gap-1.5">
|
||||
<Tag size={15} /> Etiquetas de la conversación
|
||||
</p>
|
||||
<Button variant="ghost" size="sm" onClick={() => setGestionOpen((v) => !v)} title="Gestionar catálogo">
|
||||
<Settings2 size={14} className="mr-1.5 text-theme-muted" /> Catálogo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-3 space-y-4">
|
||||
{loading ? (
|
||||
<Skeleton count={3} className="h-10 w-full" />
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-theme-muted uppercase mb-2">Asignadas</p>
|
||||
{asignadas.length === 0 ? (
|
||||
<p className="text-sm text-theme-muted">Sin etiquetas. Marca alguna abajo.</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{asignadas.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
onClick={() => alternar(t.id)}
|
||||
title="Quitar etiqueta"
|
||||
className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium text-white"
|
||||
style={{ backgroundColor: t.color }}
|
||||
>
|
||||
{t.name}
|
||||
<Trash2 size={11} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-medium text-theme-muted uppercase mb-2">Disponibles</p>
|
||||
{catalogo.filter((t) => !asignadas.some((a) => a.id === t.id)).length === 0 ? (
|
||||
<p className="text-sm text-theme-muted">Todas las etiquetas activas ya están asignadas.</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{catalogo
|
||||
.filter((t) => !asignadas.some((a) => a.id === t.id))
|
||||
.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
onClick={() => alternar(t.id)}
|
||||
title="Asignar etiqueta"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition hover:bg-theme-bg"
|
||||
style={{ borderColor: t.color, color: t.color }}
|
||||
>
|
||||
<Plus size={11} /> {t.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{gestionOpen && (
|
||||
<div className="rounded-xl border border-theme-border p-3 space-y-3">
|
||||
<p className="text-xs font-medium text-theme-muted uppercase">Catálogo</p>
|
||||
<div className="flex items-end gap-2">
|
||||
<Input
|
||||
label="Nueva etiqueta"
|
||||
placeholder="Ej. urgente, cotización, seguimiento"
|
||||
value={nueva}
|
||||
onChange={(e) => setNueva(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') crear(); }}
|
||||
/>
|
||||
<select
|
||||
value={color}
|
||||
onChange={(e) => setColor(e.target.value)}
|
||||
aria-label="Color de la etiqueta"
|
||||
className="rounded-xl border border-theme-border-strong bg-theme-surface px-2 py-2.5 text-sm"
|
||||
>
|
||||
{COLORES.map((c) => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
))}
|
||||
</select>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={crear}
|
||||
loading={creando}
|
||||
disabled={!nueva.trim()}
|
||||
aria-label="Crear etiqueta"
|
||||
title="Crear etiqueta"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="divide-y divide-theme-border">
|
||||
{catalogo.map((t) => (
|
||||
<div key={t.id} className="flex items-center justify-between py-1.5">
|
||||
<span className="inline-flex items-center gap-2 text-sm text-theme-heading">
|
||||
<span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: t.color }} />
|
||||
{t.name}
|
||||
{asignadas.some((a) => a.id === t.id) && <Check size={12} className="text-emerald-600" />}
|
||||
</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => desactivar(t)} title="Desactivar etiqueta">
|
||||
<Trash2 size={13} className="text-theme-muted" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{catalogo.length === 0 && <p className="text-sm text-theme-muted py-3">El catálogo está vacío.</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConversationEtiquetas;
|
||||
142
frontend/src/components/wacrm/ConversationNotas.tsx
Normal file
142
frontend/src/components/wacrm/ConversationNotas.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import type { FC } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { StickyNote, Check, Trash2, Plus } from 'lucide-react';
|
||||
import { Card, Button, Skeleton, TextArea, toast } from '../ui';
|
||||
import { odooApi, type WacrmNote } from '../../services/odoo';
|
||||
|
||||
interface Props {
|
||||
conversationId: string;
|
||||
contactName: string;
|
||||
}
|
||||
|
||||
/** Notas internas de la conversación: nunca se envían al paciente. */
|
||||
const ConversationNotas: FC<Props> = ({ conversationId, contactName }) => {
|
||||
const [notes, setNotes] = useState<WacrmNote[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [draft, setDraft] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await odooApi.getWacrmNotes(conversationId);
|
||||
if (res.status === 'success') setNotes(res.notes);
|
||||
} catch {
|
||||
toast.error('No se pudieron cargar las notas');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [conversationId]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const agregar = async () => {
|
||||
const body = draft.trim();
|
||||
if (!body) return;
|
||||
try {
|
||||
setSaving(true);
|
||||
const res = await odooApi.createWacrmNote(conversationId, body);
|
||||
if (res.status === 'success') {
|
||||
setNotes((prev) => [res.note, ...prev]);
|
||||
setDraft('');
|
||||
toast.success('Nota guardada');
|
||||
}
|
||||
} catch {
|
||||
toast.error('No se pudo guardar la nota');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const alternar = async (n: WacrmNote) => {
|
||||
try {
|
||||
const res = await odooApi.updateWacrmNote(n.id, { resolved: !n.resolved });
|
||||
if (res.status === 'success') setNotes((prev) => prev.map((x) => (x.id === n.id ? res.note : x)));
|
||||
} catch {
|
||||
toast.error('No se pudo actualizar la nota');
|
||||
}
|
||||
};
|
||||
|
||||
const borrar = async (n: WacrmNote) => {
|
||||
if (!window.confirm('¿Eliminar esta nota interna?')) return;
|
||||
try {
|
||||
await odooApi.deleteWacrmNote(n.id);
|
||||
setNotes((prev) => prev.filter((x) => x.id !== n.id));
|
||||
toast.success('Nota eliminada');
|
||||
} catch {
|
||||
toast.error('No se pudo eliminar la nota');
|
||||
}
|
||||
};
|
||||
|
||||
const pendientes = notes.filter((n) => !n.resolved).length;
|
||||
|
||||
return (
|
||||
<Card className="flex-1 overflow-hidden flex flex-col">
|
||||
<div className="p-3 border-b border-theme-border bg-theme-bg flex items-center justify-between gap-2">
|
||||
<p className="text-sm font-medium text-theme-heading inline-flex items-center gap-1.5">
|
||||
<StickyNote size={15} /> Notas internas
|
||||
{pendientes > 0 && (
|
||||
<span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-amber-100 text-amber-800 text-[10px] font-bold">
|
||||
{pendientes}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-[11px] text-theme-muted">Solo las ve el equipo · no se envían a {contactName || 'el paciente'}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-3 border-b border-theme-border">
|
||||
<TextArea
|
||||
rows={2}
|
||||
placeholder="Escribe una nota interna (no se envía al paciente)..."
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end mt-2">
|
||||
<Button size="sm" onClick={agregar} loading={saving} disabled={!draft.trim()}>
|
||||
<Plus size={14} className="mr-1.5" /> Agregar nota
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-3 space-y-2">
|
||||
{loading ? (
|
||||
<Skeleton count={3} className="h-16 w-full" />
|
||||
) : notes.length === 0 ? (
|
||||
<p className="text-sm text-theme-muted text-center py-8">Sin notas internas todavía.</p>
|
||||
) : (
|
||||
notes.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`rounded-xl border p-3 ${n.resolved ? 'border-emerald-200 bg-emerald-50/50' : 'border-theme-border bg-theme-surface'}`}
|
||||
>
|
||||
<p className={`text-sm whitespace-pre-wrap break-words ${n.resolved ? 'text-theme-muted line-through' : 'text-theme-heading'}`}>
|
||||
{n.body}
|
||||
</p>
|
||||
<div className="flex items-center justify-between gap-2 mt-2">
|
||||
<p className="text-[11px] text-theme-muted">
|
||||
{n.author || 'Alguien'} · {n.date}
|
||||
{n.resolved && n.resolved_by ? ` · atendida por ${n.resolved_by}` : ''}
|
||||
</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => alternar(n)}
|
||||
title={n.resolved ? 'Marcar como pendiente' : 'Marcar como atendida'}
|
||||
>
|
||||
<Check size={14} className={n.resolved ? 'text-emerald-600' : 'text-theme-muted'} />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => borrar(n)} title="Eliminar nota">
|
||||
<Trash2 size={14} className="text-theme-muted" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConversationNotas;
|
||||
183
frontend/src/components/wacrm/WacrmMetrics.tsx
Normal file
183
frontend/src/components/wacrm/WacrmMetrics.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import type { FC } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { RefreshCw, TrendingUp, TrendingDown, Clock, MessageSquare, Inbox, AlertTriangle } from 'lucide-react';
|
||||
import { Card, Button, Skeleton, EmptyState, toast } from '../ui';
|
||||
import { odooApi, type WacrmMetrics as Metrics } from '../../services/odoo';
|
||||
|
||||
const num = (n: number | null | undefined, d = 0) =>
|
||||
(n ?? 0).toLocaleString('es-MX', { maximumFractionDigits: d });
|
||||
|
||||
const minutos = (m: number | null) => {
|
||||
if (m == null) return '—';
|
||||
if (m < 1) return `${Math.round(m * 60)} s`;
|
||||
if (m < 60) return `${num(m, 1)} min`;
|
||||
const h = Math.floor(m / 60);
|
||||
return `${h} h ${num(m - h * 60, 0)} min`;
|
||||
};
|
||||
|
||||
const OPTS_HORAS = [2, 4, 8, 24];
|
||||
|
||||
/** Tablero de atención de WhatsApp (sólo gerencia/admin). */
|
||||
const WacrmMetrics: FC = () => {
|
||||
const [data, setData] = useState<Metrics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [horas, setHoras] = useState(4);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await odooApi.getWacrmMetrics({ sin_respuesta_horas: horas });
|
||||
if (res.status === 'success') setData(res);
|
||||
else toast.error(res.message || 'No se pudieron cargar las métricas');
|
||||
} catch (err) {
|
||||
const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
|
||||
toast.error(msg || 'No se pudieron cargar las métricas');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [horas]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
if (loading && !data) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-24 w-full" />)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!data) {
|
||||
return <EmptyState title="Sin métricas" subtitle="No se pudieron leer los datos del WACRM." icon={<Inbox size={28} />} />;
|
||||
}
|
||||
|
||||
const Kpi: FC<{ label: string; value: string; sub?: string; tone?: 'ok' | 'warn' }> = ({ label, value, sub, tone }) => (
|
||||
<Card className="p-4 bg-theme-bg border-0">
|
||||
<p className="text-xs text-theme-muted">{label}</p>
|
||||
<p className={`text-xl font-heading font-semibold ${
|
||||
tone === 'warn' ? 'text-rose-600' : tone === 'ok' ? 'text-emerald-700' : 'text-theme-heading'
|
||||
}`}>{value}</p>
|
||||
{sub && <p className="text-[11px] text-theme-muted mt-0.5">{sub}</p>}
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-xs font-medium text-theme-muted uppercase">Sin responder más de</span>
|
||||
{OPTS_HORAS.map((h) => (
|
||||
<button
|
||||
key={h}
|
||||
type="button"
|
||||
onClick={() => setHoras(h)}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium border transition ${
|
||||
horas === h ? 'bg-theme-accent text-theme-inverse border-theme-accent' : 'bg-theme-bg text-theme-muted border-theme-border'
|
||||
}`}
|
||||
>
|
||||
{h} h
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-theme-muted">Actualizado {data.generado}</span>
|
||||
<Button variant="outline" size="sm" onClick={load} loading={loading}>
|
||||
<RefreshCw size={14} className="mr-1.5" /> Actualizar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conversaciones y mensajes */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Kpi label="Conversaciones hoy" value={num(data.conversaciones.hoy)}
|
||||
sub={`${num(data.conversaciones.semana)} esta semana · ${num(data.conversaciones.mes)} este mes`} />
|
||||
<Kpi label="Mensajes entrantes (mes)" value={num(data.mensajes.mes.entrantes)}
|
||||
sub={`${num(data.mensajes.hoy.entrantes)} hoy`} />
|
||||
<Kpi label="Mensajes salientes (mes)" value={num(data.mensajes.mes.salientes)}
|
||||
sub={`${num(data.mensajes.hoy.salientes)} hoy`} />
|
||||
<Kpi label="Conversaciones totales" value={num(data.conversaciones.total)}
|
||||
sub="caché sincronizado del WACRM" />
|
||||
</div>
|
||||
|
||||
{/* Primera respuesta + leads */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<p className="text-xs font-medium text-theme-muted uppercase inline-flex items-center gap-1.5 mb-3">
|
||||
<Clock size={13} /> Tiempo de primera respuesta
|
||||
</p>
|
||||
<div className="flex items-end gap-6">
|
||||
<div>
|
||||
<p className="text-2xl font-heading font-semibold text-theme-heading">{minutos(data.primera_respuesta.promedio_min)}</p>
|
||||
<p className="text-[11px] text-theme-muted">promedio</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-heading font-semibold text-theme-heading">{minutos(data.primera_respuesta.mediana_min)}</p>
|
||||
<p className="text-[11px] text-theme-muted">mediana</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-heading font-semibold text-theme-muted">{num(data.primera_respuesta.muestras)}</p>
|
||||
<p className="text-[11px] text-theme-muted">conversaciones</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3 text-[11px] text-theme-muted leading-snug">{data.criterios.primera_respuesta}</p>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<p className="text-xs font-medium text-theme-muted uppercase inline-flex items-center gap-1.5 mb-3">
|
||||
<AlertTriangle size={13} /> Sin responder > {num(data.sin_responder.horas_minimas)} h
|
||||
</p>
|
||||
<p className={`text-3xl font-heading font-semibold ${data.sin_responder.total > 0 ? 'text-rose-600' : 'text-theme-heading'}`}>
|
||||
{num(data.sin_responder.total)}
|
||||
</p>
|
||||
<p className="mt-2 text-[11px] text-theme-muted leading-snug">{data.criterios.sin_responder}</p>
|
||||
{data.sin_responder.detalle.length > 0 && (
|
||||
<div className="mt-3 space-y-1.5 max-h-32 overflow-y-auto">
|
||||
{data.sin_responder.detalle.slice(0, 5).map((d) => (
|
||||
<div key={d.conversation_id} className="text-[11px] text-theme-muted truncate">
|
||||
<span className="font-medium text-theme-heading">{num(d.horas, 1)} h</span> · {d.ultimo_mensaje || 'Sin texto'}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<p className="text-xs font-medium text-theme-muted uppercase inline-flex items-center gap-1.5 mb-3">
|
||||
<TrendingUp size={13} /> Leads del mes
|
||||
</p>
|
||||
<div className="flex items-end gap-6">
|
||||
<div>
|
||||
<p className="text-2xl font-heading font-semibold text-emerald-700 inline-flex items-center gap-1.5">
|
||||
<TrendingUp size={18} /> {num(data.leads.ganados)}
|
||||
</p>
|
||||
<p className="text-[11px] text-theme-muted">ganados</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-heading font-semibold text-rose-600 inline-flex items-center gap-1.5">
|
||||
<TrendingDown size={18} /> {num(data.leads.perdidos)}
|
||||
</p>
|
||||
<p className="text-[11px] text-theme-muted">perdidos</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-heading font-semibold text-theme-muted">{num(data.leads.abiertos)}</p>
|
||||
<p className="text-[11px] text-theme-muted">abiertos</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3 text-[11px] text-theme-muted leading-snug">{data.criterios.leads}</p>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-theme-muted inline-flex items-center gap-1.5">
|
||||
<MessageSquare size={12} />
|
||||
Datos leídos en vivo de la base del WACRM (Supabase), no del caché local. Periodo del mes: {data.periodo.desde} a {data.periodo.hasta}.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WacrmMetrics;
|
||||
@@ -65,6 +65,9 @@ const playChatBeep = () => {
|
||||
};
|
||||
|
||||
const POLL_MS = 15000;
|
||||
// Presencia: latido explícito cada 30 s mientras la app está abierta (el
|
||||
// backend marca last_seen y "en línea" = actividad en los últimos 2 minutos).
|
||||
const HEARTBEAT_MS = 30000;
|
||||
|
||||
/** Polling global de mensajes nuevos: toast + beep por remitente. Montar una sola vez. */
|
||||
export const useChatNotifications = (intervalMs = POLL_MS) => {
|
||||
@@ -126,9 +129,16 @@ export const useChatNotifications = (intervalMs = POLL_MS) => {
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const latido = () => {
|
||||
if (!alive) return;
|
||||
odooApi.chatHeartbeat().catch(() => {});
|
||||
};
|
||||
|
||||
fetchUsers();
|
||||
latido();
|
||||
const id = setInterval(fetchUsers, intervalMs);
|
||||
return () => { alive = false; clearInterval(id); };
|
||||
const hb = setInterval(latido, HEARTBEAT_MS);
|
||||
return () => { alive = false; clearInterval(id); clearInterval(hb); };
|
||||
}, [user, intervalMs, navigate]);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { FC, FormEvent, KeyboardEvent } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { Send, Search, ArrowLeft } from 'lucide-react';
|
||||
import { Send, Search, ArrowLeft, X, History } from 'lucide-react';
|
||||
import Layout from '../components/Layout';
|
||||
import { Card, Button, EmptyState, Skeleton, toast } from '../components/ui';
|
||||
import { ROLE_LABELS } from '../lib/auth';import { odooApi, type ChatUser, type ChatMessage } from '../services/odoo';
|
||||
@@ -9,6 +9,22 @@ import { setActiveChatUser } from '../lib/chat-notifications';
|
||||
|
||||
const POLL_MS = 5000;
|
||||
|
||||
/** Resalta las coincidencias de `q` dentro del texto. */
|
||||
const resaltar = (texto: string, q: string) => {
|
||||
if (!q || q.length < 2) return texto;
|
||||
const idx = texto.toLowerCase().indexOf(q.toLowerCase());
|
||||
if (idx < 0) return texto;
|
||||
return (
|
||||
<>
|
||||
{texto.slice(0, idx)}
|
||||
<mark className="bg-amber-200 text-theme-heading rounded px-0.5">{texto.slice(idx, idx + q.length)}</mark>
|
||||
{texto.slice(idx + q.length)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PRESENCIA_CLS = 'inline-block h-2.5 w-2.5 rounded-full shrink-0';
|
||||
|
||||
// Las fechas llegan en UTC ("YYYY-MM-DD HH:MM:SS"); se muestran en hora local
|
||||
const fmtTime = (d: string | null): string => {
|
||||
if (!d) return '';
|
||||
@@ -42,6 +58,14 @@ const Chat: FC = () => {
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// Búsqueda dentro del historial del hilo abierto
|
||||
const [histOpen, setHistOpen] = useState(false);
|
||||
const [histQuery, setHistQuery] = useState('');
|
||||
const [histResults, setHistResults] = useState<ChatMessage[]>([]);
|
||||
const [histLoading, setHistLoading] = useState(false);
|
||||
const [highlightId, setHighlightId] = useState<number | null>(null);
|
||||
const highlightRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const activeUser = users.find((u) => u.id === activeId) || null;
|
||||
|
||||
const fetchUsers = useCallback(async () => {
|
||||
@@ -55,9 +79,13 @@ const Chat: FC = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchThread = useCallback(async (otherId: number, incremental: boolean) => {
|
||||
const fetchThread = useCallback(async (otherId: number, incremental: boolean, aroundId?: number) => {
|
||||
try {
|
||||
const res = await odooApi.getChatMessages(otherId, incremental ? lastIdRef.current : undefined);
|
||||
const res = await odooApi.getChatMessages(
|
||||
otherId,
|
||||
incremental ? lastIdRef.current : undefined,
|
||||
aroundId,
|
||||
);
|
||||
if (res.status !== 'success') return;
|
||||
if (incremental) {
|
||||
if (res.messages.length === 0) return;
|
||||
@@ -69,7 +97,13 @@ const Chat: FC = () => {
|
||||
setMessages(res.messages);
|
||||
}
|
||||
lastIdRef.current = Math.max(...res.messages.map((m) => m.id), lastIdRef.current);
|
||||
setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50);
|
||||
if (aroundId) {
|
||||
// Salto a un mensaje antiguo: centrarlo en vez de ir al final
|
||||
setHighlightId(aroundId);
|
||||
setTimeout(() => highlightRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' }), 80);
|
||||
} else {
|
||||
setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50);
|
||||
}
|
||||
} catch {
|
||||
// silencioso en polling
|
||||
}
|
||||
@@ -79,6 +113,10 @@ const Chat: FC = () => {
|
||||
setActiveId(id);
|
||||
setMessages([]);
|
||||
lastIdRef.current = 0;
|
||||
setHistOpen(false);
|
||||
setHistQuery('');
|
||||
setHistResults([]);
|
||||
setHighlightId(null);
|
||||
setLoadingThread(true);
|
||||
await fetchThread(id, false);
|
||||
setLoadingThread(false);
|
||||
@@ -86,6 +124,36 @@ const Chat: FC = () => {
|
||||
fetchUsers();
|
||||
}, [fetchThread, fetchUsers]);
|
||||
|
||||
// Buscar en el historial (servidor)
|
||||
const buscarHistorial = useCallback(async () => {
|
||||
if (!activeId || histQuery.trim().length < 2) return;
|
||||
try {
|
||||
setHistLoading(true);
|
||||
const res = await odooApi.searchChatMessages(activeId, histQuery.trim());
|
||||
if (res.status === 'success') setHistResults(res.results);
|
||||
} catch {
|
||||
toast.error('No se pudo buscar en el historial');
|
||||
} finally {
|
||||
setHistLoading(false);
|
||||
}
|
||||
}, [activeId, histQuery]);
|
||||
|
||||
// Saltar a un resultado: si ya está cargado se centra; si es antiguo se
|
||||
// pide la ventana de historial que termina en ese mensaje.
|
||||
const irAlMensaje = useCallback(async (m: ChatMessage) => {
|
||||
if (!activeId) return;
|
||||
const cargado = messages.some((x) => x.id === m.id);
|
||||
setHistOpen(false);
|
||||
if (cargado) {
|
||||
setHighlightId(m.id);
|
||||
setTimeout(() => highlightRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' }), 80);
|
||||
} else {
|
||||
setLoadingThread(true);
|
||||
await fetchThread(activeId, false, m.id);
|
||||
setLoadingThread(false);
|
||||
}
|
||||
}, [activeId, messages, fetchThread]);
|
||||
|
||||
// Carga inicial + polling de lista y hilo abierto
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
@@ -186,8 +254,19 @@ const Chat: FC = () => {
|
||||
onClick={() => openConversation(u.id)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-3 text-left transition-colors hover:bg-theme-accent-bg ${activeId === u.id ? 'bg-theme-accent-bg' : ''}`}
|
||||
>
|
||||
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-lilac text-xs font-bold text-theme-heading">
|
||||
{initials(u.name)}
|
||||
<span className="relative shrink-0">
|
||||
<span className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-lilac text-xs font-bold text-theme-heading">
|
||||
{initials(u.name)}
|
||||
</span>
|
||||
<span
|
||||
className={`absolute -bottom-0 -right-0 ${PRESENCIA_CLS} border-2 border-theme-surface ${
|
||||
u.online ? 'bg-emerald-500' : 'bg-theme-muted/40'
|
||||
}`}
|
||||
data-presencia={u.online ? 'online' : 'offline'}
|
||||
title={u.online
|
||||
? 'En línea'
|
||||
: u.last_seen ? `Visto ${fmtDay(u.last_seen)} ${fmtTime(u.last_seen)}` : 'Sin actividad'}
|
||||
/>
|
||||
</span>
|
||||
<span className="flex-1 min-w-0">
|
||||
<span className="flex items-center justify-between gap-2">
|
||||
@@ -237,15 +316,93 @@ const Chat: FC = () => {
|
||||
>
|
||||
<ArrowLeft size={18} />
|
||||
</button>
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-lilac text-xs font-bold text-theme-heading">
|
||||
{initials(activeUser.name)}
|
||||
<span className="relative shrink-0">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-brand-lilac text-xs font-bold text-theme-heading">
|
||||
{initials(activeUser.name)}
|
||||
</span>
|
||||
<span
|
||||
className={`absolute -bottom-0 -right-0 h-2.5 w-2.5 rounded-full border-2 border-theme-surface ${
|
||||
activeUser.online ? 'bg-emerald-500' : 'bg-theme-muted/40'
|
||||
}`}
|
||||
data-presencia={activeUser.online ? 'online' : 'offline'}
|
||||
/>
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold text-theme-heading">{activeUser.name}</p>
|
||||
<p className="text-xs text-theme-muted">{ROLE_LABELS[activeUser.role] || activeUser.role}</p>
|
||||
<p className="text-xs text-theme-muted">
|
||||
{activeUser.online
|
||||
? 'En línea'
|
||||
: activeUser.last_seen
|
||||
? `Visto ${fmtDay(activeUser.last_seen)} ${fmtTime(activeUser.last_seen)}`
|
||||
: ROLE_LABELS[activeUser.role] || activeUser.role}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setHistOpen((v) => !v); setHistResults([]); }}
|
||||
className={`shrink-0 inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition ${
|
||||
histOpen ? 'border-theme-accent bg-theme-accent-bg text-theme-heading' : 'border-theme-border text-theme-muted hover:border-theme-border-strong'
|
||||
}`}
|
||||
title="Buscar en el historial de esta conversación"
|
||||
>
|
||||
<History size={13} />
|
||||
Buscar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{histOpen && (
|
||||
<div className="px-4 py-3 border-b border-theme-border bg-theme-surface">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-theme-muted" />
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
placeholder="Buscar en el historial..."
|
||||
value={histQuery}
|
||||
onChange={(e) => setHistQuery(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') buscarHistorial(); }}
|
||||
className="w-full rounded-xl border border-theme-border-strong bg-theme-surface pl-9 pr-3 py-2 text-sm text-theme-heading focus:outline-none focus:ring-2 focus:ring-theme-accent/30 focus:border-theme-accent"
|
||||
/>
|
||||
</div>
|
||||
<Button size="sm" onClick={buscarHistorial} loading={histLoading}>Buscar</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setHistOpen(false); setHistResults([]); setHistQuery(''); }}
|
||||
className="p-1.5 rounded-lg text-theme-muted hover:bg-theme-bg"
|
||||
aria-label="Cerrar búsqueda"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{histResults.length > 0 && (
|
||||
<div className="mt-2 max-h-56 overflow-y-auto divide-y divide-theme-border rounded-xl border border-theme-border">
|
||||
<p className="px-3 py-1.5 text-[11px] text-theme-muted bg-theme-bg">
|
||||
{histResults.length} {histResults.length === 1 ? 'resultado' : 'resultados'} para "{histQuery}"
|
||||
</p>
|
||||
{histResults.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
type="button"
|
||||
onClick={() => irAlMensaje(m)}
|
||||
className="w-full text-left px-3 py-2 hover:bg-theme-bg transition"
|
||||
>
|
||||
<p className="text-xs text-theme-heading break-words">
|
||||
{resaltar(m.body, histQuery)}
|
||||
</p>
|
||||
<p className="text-[10px] text-theme-muted mt-0.5">
|
||||
{m.mine ? 'Tú' : activeUser.name} · {m.date}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!histLoading && histQuery.trim().length >= 2 && histResults.length === 0 && (
|
||||
<p className="mt-2 text-xs text-theme-muted">Sin coincidencias en esta conversación.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4 space-y-2 bg-theme-bg">
|
||||
{loadingThread ? (
|
||||
<div className="space-y-3">
|
||||
@@ -261,9 +418,16 @@ const Chat: FC = () => {
|
||||
</p>
|
||||
) : (
|
||||
messages.map((m) => (
|
||||
<div key={m.id} className={`flex ${m.mine ? 'justify-end' : 'justify-start'}`}>
|
||||
<div
|
||||
key={m.id}
|
||||
ref={highlightId === m.id ? highlightRef : undefined}
|
||||
data-msg-id={m.id}
|
||||
className={`flex ${m.mine ? 'justify-end' : 'justify-start'}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[75%] rounded-2xl px-3.5 py-2 text-sm shadow-card ${
|
||||
className={`max-w-[75%] rounded-2xl px-3.5 py-2 text-sm shadow-card transition-shadow ${
|
||||
highlightId === m.id ? 'ring-2 ring-amber-400' : ''
|
||||
} ${
|
||||
m.mine
|
||||
? 'bg-theme-accent text-theme-inverse rounded-br-md'
|
||||
: 'bg-theme-surface text-theme-heading border border-theme-border rounded-bl-md'
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import type { FC } from 'react';
|
||||
import { useEffect, useState, useCallback, useRef } from 'react';
|
||||
import { Link, useSearchParams } from 'react-router-dom';
|
||||
import { RefreshCw, MessageSquare, Phone, Search, User, Bot, Headphones, UserPlus, X, Send, ChevronDown, Heart, Calendar } from 'lucide-react';
|
||||
import { RefreshCw, MessageSquare, Phone, Search, User, Bot, Headphones, UserPlus, X, Send, ChevronDown, Heart, Calendar, StickyNote, Tag, BarChart3 } from 'lucide-react';
|
||||
import Layout from '../components/Layout';
|
||||
import { Card, Button, Input, EmptyState, Skeleton, toast, Badge, Modal } from '../components/ui';
|
||||
import { odooApi, type WacrmConversation, type WacrmMessage, type Patient } from '../services/odoo';
|
||||
import { odooApi, type WacrmConversation, type WacrmMessage, type Patient, type WacrmTag } from '../services/odoo';
|
||||
import { useAuth } from '../lib/auth';
|
||||
import WacrmMetrics from '../components/wacrm/WacrmMetrics';
|
||||
import ConversationNotas from '../components/wacrm/ConversationNotas';
|
||||
import ConversationEtiquetas from '../components/wacrm/ConversationEtiquetas';
|
||||
|
||||
interface Member {
|
||||
id: string;
|
||||
@@ -39,6 +43,14 @@ const WacrmMessages: FC = () => {
|
||||
return '';
|
||||
});
|
||||
const [filtro, setFiltro] = useState<'todas' | 'mias' | 'sin_asignar' | 'no_leidas'>('todas');
|
||||
// Vista de la página: bandeja o tablero de métricas (sólo admin/gerencia)
|
||||
const [vista, setVista] = useState<'conversaciones' | 'metricas'>('conversaciones');
|
||||
// Panel del detalle: mensajes, notas internas o etiquetas
|
||||
const [detalleTab, setDetalleTab] = useState<'mensajes' | 'notas' | 'etiquetas'>('mensajes');
|
||||
const [tagsCatalogo, setTagsCatalogo] = useState<WacrmTag[]>([]);
|
||||
const [filtroTag, setFiltroTag] = useState<number | ''>('');
|
||||
const { user } = useAuth();
|
||||
const puedeVerMetricas = !!user && (user.role === 'admin' || user.role === 'gerencia');
|
||||
const [searchParams] = useSearchParams();
|
||||
const convParam = searchParams.get('conv');
|
||||
|
||||
@@ -154,6 +166,10 @@ const WacrmMessages: FC = () => {
|
||||
if (res.status === 'success') {
|
||||
toast.success(`Sincronizado: ${JSON.stringify(res.result)}`);
|
||||
await loadConversations();
|
||||
} else if (res.status === 'busy') {
|
||||
// La auto-sincronización cada 15 s ya está corriendo
|
||||
toast.info('Ya hay una sincronización en curso');
|
||||
await loadConversations();
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error('Error al sincronizar con WACRM');
|
||||
@@ -163,12 +179,21 @@ const WacrmMessages: FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadTags = useCallback(async () => {
|
||||
try {
|
||||
const res = await odooApi.getWacrmTags();
|
||||
if (res.status === 'success') setTagsCatalogo(res.tags);
|
||||
} catch {
|
||||
// el catálogo de etiquetas es opcional para la bandeja
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Carga inicial
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
const init = async () => {
|
||||
setLoading(true);
|
||||
await Promise.all([loadConversations(), loadMembers()]);
|
||||
await Promise.all([loadConversations(), loadMembers(), loadTags()]);
|
||||
if (mounted) setLoading(false);
|
||||
};
|
||||
init();
|
||||
@@ -261,6 +286,15 @@ const WacrmMessages: FC = () => {
|
||||
const handleSelect = useCallback((c: WacrmConversation) => {
|
||||
userSelectedRef.current = true;
|
||||
setSelected(c);
|
||||
setDetalleTab('mensajes');
|
||||
}, []);
|
||||
|
||||
/** Refresca la conversación en la lista cuando cambian sus etiquetas. */
|
||||
const actualizarTagsSeleccion = useCallback((tags: { id: number; name: string; color: string }[]) => {
|
||||
setSelected((prev) => (prev ? { ...prev, tags } : prev));
|
||||
setConversations((prev) => prev.map((c) => (
|
||||
c.external_id === selectedRef.current?.external_id ? { ...c, tags } : c
|
||||
)));
|
||||
}, []);
|
||||
|
||||
const handleSendReply = async () => {
|
||||
@@ -320,6 +354,7 @@ const WacrmMessages: FC = () => {
|
||||
const agentName = (id?: string) => (id ? members.find((m) => m.id === id)?.name : undefined);
|
||||
|
||||
const conversationsFiltradas = conversations.filter((c) => {
|
||||
if (filtroTag !== '' && !(c.tags || []).some((t) => t.id === filtroTag)) return false;
|
||||
if (filtro === 'mias') return !!currentAgentId && c.assigned_agent_id === currentAgentId;
|
||||
if (filtro === 'sin_asignar') return !c.assigned_agent_id;
|
||||
if (filtro === 'no_leidas') return c.unread_count > 0;
|
||||
@@ -366,6 +401,36 @@ const WacrmMessages: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vista: bandeja o métricas de gerencia */}
|
||||
<div className="flex flex-wrap gap-1.5 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setVista('conversaciones')}
|
||||
className={`inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition ${
|
||||
vista === 'conversaciones' ? 'bg-theme-accent text-theme-inverse' : 'bg-theme-accent-bg text-theme-heading hover:bg-theme-bg'
|
||||
}`}
|
||||
>
|
||||
<MessageSquare size={15} /> Conversaciones
|
||||
</button>
|
||||
{puedeVerMetricas && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setVista('metricas')}
|
||||
className={`inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-full transition ${
|
||||
vista === 'metricas' ? 'bg-theme-accent text-theme-inverse' : 'bg-theme-accent-bg text-theme-heading hover:bg-theme-bg'
|
||||
}`}
|
||||
title="Tablero de atención de WhatsApp (gerencia)"
|
||||
>
|
||||
<BarChart3 size={15} /> Métricas
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{vista === 'metricas' && puedeVerMetricas ? (
|
||||
<WacrmMetrics />
|
||||
) : (
|
||||
<>
|
||||
|
||||
{loading ? (
|
||||
<Skeleton count={6} className="h-20 w-full" />
|
||||
) : conversations.length === 0 ? (
|
||||
@@ -394,6 +459,21 @@ const WacrmMessages: FC = () => {
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{tagsCatalogo.length > 0 && (
|
||||
<div className="px-2.5 py-2 border-b border-theme-border shrink-0">
|
||||
<select
|
||||
value={filtroTag}
|
||||
onChange={(e) => setFiltroTag(e.target.value === '' ? '' : parseInt(e.target.value, 10))}
|
||||
aria-label="Filtrar por etiqueta"
|
||||
className="w-full rounded-lg border border-theme-border-strong bg-theme-surface px-2 py-1.5 text-xs text-theme-heading"
|
||||
>
|
||||
<option value="">Todas las etiquetas</option>
|
||||
{tagsCatalogo.map((t) => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<Card.Body className="p-0 overflow-y-auto flex-1">
|
||||
<div className="divide-y">
|
||||
{conversationsFiltradas.length === 0 && (
|
||||
@@ -420,6 +500,19 @@ const WacrmMessages: FC = () => {
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-theme-muted mt-1 truncate">{c.last_message_text || 'Sin mensajes'}</p>
|
||||
{(c.tags || []).length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{(c.tags || []).map((t) => (
|
||||
<span
|
||||
key={t.id}
|
||||
className="rounded-full px-1.5 py-0.5 text-[9px] font-medium text-white"
|
||||
style={{ backgroundColor: t.color }}
|
||||
>
|
||||
{t.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between mt-1">
|
||||
<p className="text-[10px] text-theme-muted">{c.last_message_at || c.created_at || ''}</p>
|
||||
{c.assigned_agent_id && (
|
||||
@@ -500,6 +593,49 @@ const WacrmMessages: FC = () => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Pestañas del detalle: mensajes, notas internas y etiquetas */}
|
||||
<div className="flex flex-wrap gap-1.5 px-4 py-2 border-b border-theme-border shrink-0">
|
||||
{([
|
||||
{ key: 'mensajes', label: 'Mensajes', icon: MessageSquare },
|
||||
{ key: 'notas', label: 'Notas internas', icon: StickyNote },
|
||||
{ key: 'etiquetas', label: 'Etiquetas', icon: Tag },
|
||||
] as const).map((t) => {
|
||||
const Icono = t.icon;
|
||||
return (
|
||||
<button
|
||||
key={t.key}
|
||||
type="button"
|
||||
onClick={() => setDetalleTab(t.key)}
|
||||
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition ${
|
||||
detalleTab === t.key
|
||||
? 'bg-theme-accent text-theme-inverse'
|
||||
: 'bg-theme-accent-bg text-theme-heading hover:bg-theme-bg'
|
||||
}`}
|
||||
>
|
||||
<Icono size={13} /> {t.label}
|
||||
{t.key === 'etiquetas' && (selected.tags || []).length > 0 && (
|
||||
<span className="inline-flex items-center justify-center min-w-[16px] h-4 px-1 rounded-full bg-theme-surface/40 text-[10px]">
|
||||
{(selected.tags || []).length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{detalleTab === 'notas' ? (
|
||||
<ConversationNotas
|
||||
conversationId={selected.external_id}
|
||||
contactName={selected.contact_name}
|
||||
/>
|
||||
) : detalleTab === 'etiquetas' ? (
|
||||
<ConversationEtiquetas
|
||||
conversationId={selected.external_id}
|
||||
onTagsChange={actualizarTagsSeleccion}
|
||||
onCatalogoChange={loadTags}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div ref={threadRef} className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{messages.length > 0 && msgHasMore && (
|
||||
<div className="text-center">
|
||||
@@ -583,6 +719,8 @@ const WacrmMessages: FC = () => {
|
||||
<p className="text-xs text-amber-600 mt-2">Selecciona "Responder como..." para poder responder mensajes.</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
@@ -638,6 +776,8 @@ const WacrmMessages: FC = () => {
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -626,6 +626,43 @@ export interface WacrmConversation {
|
||||
last_message_at: string | null;
|
||||
unread_count: number;
|
||||
created_at: string | null;
|
||||
tags?: { id: number; name: string; color: string }[];
|
||||
}
|
||||
|
||||
export interface WacrmTag {
|
||||
id: number;
|
||||
name: string;
|
||||
color: string;
|
||||
sequence: number;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export interface WacrmNote {
|
||||
id: number;
|
||||
body: string;
|
||||
author: string;
|
||||
date: string | null;
|
||||
resolved: boolean;
|
||||
resolved_at: string | null;
|
||||
resolved_by: string;
|
||||
}
|
||||
|
||||
export interface WacrmMetrics {
|
||||
status: string;
|
||||
generado: string;
|
||||
periodo: { desde: string; hasta: string };
|
||||
sin_respuesta_horas: number;
|
||||
conversaciones: { hoy: number; semana: number; mes: number; total: number };
|
||||
mensajes: {
|
||||
hoy: { entrantes: number; salientes: number };
|
||||
semana: { entrantes: number; salientes: number };
|
||||
mes: { entrantes: number; salientes: number };
|
||||
};
|
||||
primera_respuesta: { muestras: number; promedio_min: number | null; mediana_min: number | null };
|
||||
sin_responder: { total: number; horas_minimas: number; detalle: { conversation_id: string; horas: number; ultimo_mensaje: string }[] };
|
||||
leads: { ganados: number; perdidos: number; abiertos: number; valor_ganado: number };
|
||||
criterios: Record<string, string>;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export interface WacrmMessage {
|
||||
@@ -713,6 +750,8 @@ export interface ChatUser {
|
||||
last_message: string | null;
|
||||
last_date: string | null;
|
||||
last_mine: boolean | null;
|
||||
online: boolean;
|
||||
last_seen: string | null;
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
@@ -1180,8 +1219,24 @@ export const odooApi = {
|
||||
return data;
|
||||
},
|
||||
|
||||
async getChatMessages(userId: number, sinceId?: number): Promise<{ status: string; messages: ChatMessage[] }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/chat/messages`, { user_id: userId, since_id: sinceId || undefined });
|
||||
async getChatMessages(userId: number, sinceId?: number, aroundId?: number): Promise<{ status: string; messages: ChatMessage[]; around_id?: number | null }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/chat/messages`, {
|
||||
user_id: userId,
|
||||
since_id: sinceId || undefined,
|
||||
around_id: aroundId || undefined,
|
||||
});
|
||||
return data;
|
||||
},
|
||||
|
||||
/** Búsqueda en el historial con otro usuario (servidor). */
|
||||
async searchChatMessages(userId: number, q: string, limit = 50): Promise<{ status: string; query: string; count: number; results: ChatMessage[] }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/chat/search`, { user_id: userId, q, limit });
|
||||
return data;
|
||||
},
|
||||
|
||||
/** Latido de presencia (se manda cada ~30 s con la app abierta). */
|
||||
async chatHeartbeat(): Promise<{ status: string; online_count: number; online_window_seconds: number }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/chat/heartbeat`);
|
||||
return data;
|
||||
},
|
||||
|
||||
@@ -1860,6 +1915,59 @@ export const odooApi = {
|
||||
return data;
|
||||
},
|
||||
|
||||
// ---- Notas internas ----
|
||||
async getWacrmNotes(conversationId: string): Promise<{ status: string; notes: WacrmNote[]; pendientes: number }> {
|
||||
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/wacrm/conversations/${conversationId}/notes`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async createWacrmNote(conversationId: string, body: string): Promise<{ status: string; note: WacrmNote }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/wacrm/conversations/${conversationId}/notes`, { body });
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateWacrmNote(noteId: number, payload: { body?: string; resolved?: boolean }): Promise<{ status: string; note: WacrmNote }> {
|
||||
const { data } = await axios.put(`${ODOO_BASE}/skeen/frontend/v1/wacrm/notes/${noteId}`, payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteWacrmNote(noteId: number): Promise<{ status: string; message: string }> {
|
||||
const { data } = await axios.delete(`${ODOO_BASE}/skeen/frontend/v1/wacrm/notes/${noteId}`);
|
||||
return data;
|
||||
},
|
||||
|
||||
// ---- Etiquetas ----
|
||||
async getWacrmTags(): Promise<{ status: string; tags: WacrmTag[] }> {
|
||||
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/wacrm/tags`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async createWacrmTag(payload: { name: string; color?: string; sequence?: number }): Promise<{ status: string; tag: WacrmTag }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/wacrm/tags`, payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateWacrmTag(tagId: number, payload: Partial<WacrmTag>): Promise<{ status: string; tag: WacrmTag }> {
|
||||
const { data } = await axios.put(`${ODOO_BASE}/skeen/frontend/v1/wacrm/tags/${tagId}`, payload);
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteWacrmTag(tagId: number): Promise<{ status: string; message: string }> {
|
||||
const { data } = await axios.delete(`${ODOO_BASE}/skeen/frontend/v1/wacrm/tags/${tagId}`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async assignWacrmTag(conversationId: string, tagId: number, action: 'add' | 'remove' = 'add'): Promise<{ status: string; tags: { id: number; name: string; color: string }[] }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/wacrm/conversations/${conversationId}/tags`, { tag_id: tagId, action });
|
||||
return data;
|
||||
},
|
||||
|
||||
// ---- Métricas para gerencia ----
|
||||
async getWacrmMetrics(params?: { sin_respuesta_horas?: number }): Promise<WacrmMetrics> {
|
||||
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/wacrm/metrics`, { params });
|
||||
return data;
|
||||
},
|
||||
|
||||
async sendWacrmMessage(payload: { conversation_id: string; text: string; assigned_agent_id: string }): Promise<{ status: string; message: string }> {
|
||||
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/wacrm/messages`, payload);
|
||||
return data;
|
||||
|
||||
Reference in New Issue
Block a user