Chat interno 1-a-1 entre usuarios de la plataforma (addon skeen_chat + pagina Chat con badge de no leidos)

frontend/src/App.tsx

@@ -22,6 +22,7 @@ import Cumpleanos from './pages/Cumpleanos';
 import Inventario from './pages/Inventario';
 import WacrmMessages from './pages/WacrmMessages';
 import WacrmLeads from './pages/WacrmLeads';
+import Chat from './pages/Chat';
 import Login from './pages/Login';
 import './App.css';
 
@@ -81,6 +82,7 @@ const App: FC = () => {
           <Route path="/usuarios" element={<Navigate to="/configuracion?tab=usuarios" replace />} />
           <Route path="/cumpleanos" element={<RequireAuth href="/cumpleanos"><Cumpleanos /></RequireAuth>} />
           <Route path="/inventario" element={<RequireAuth href="/inventario"><Inventario /></RequireAuth>} />
+          <Route path="/chat" element={<RequireAuth href="/chat"><Chat /></RequireAuth>} />
           <Route path="/wacrm/messages" element={<RequireAuth href="/wacrm/messages"><WacrmMessages /></RequireAuth>} />
           <Route path="/wacrm/leads" element={<RequireAuth href="/wacrm/leads"><WacrmLeads /></RequireAuth>} />
           <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/components/ClasicoLayout.tsx

@@ -35,6 +35,7 @@ import GlobalSearch from './GlobalSearch';
 import ThemePicker from './ThemePicker';
 import NotificationBell from './NotificationBell';
 import { useAuth, ROLE_LABELS } from '../lib/auth';
+import { useChatUnread } from '../lib/chat';
 import { useQuickLinks } from '../lib/quicklinks';
 import { odooApi } from '../services/odoo';
 
@@ -114,6 +115,7 @@ const menuTree: MenuEntry[] = [
   {
     label: 'Comunicación', icon: MessageSquare,
     children: [
+      { label: 'Chat', href: '/chat' },
       { label: 'Cumpleañeros', href: '/cumpleanos' },
       { label: 'Mensajes', href: '/wacrm/messages' },
     ],
@@ -143,6 +145,7 @@ export const ClasicoLayout: FC<LayoutProps> = ({ children, title: _title, subtit
   const navigate = useNavigate();
   const { user, canSee, hasRole, logout } = useAuth();
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const chatUnread = useChatUnread();
 
   const visibleLeaves = useMemo(
     () => menuLeaves.filter((it) => canSee(it.href)),
@@ -383,7 +386,12 @@ export const ClasicoLayout: FC<LayoutProps> = ({ children, title: _title, subtit
                 >
                   <Icon size={16} />
                   <span>{entry.label}</span>
-                  <ChevronDown size={14} className={`ml-auto transition-transform ${open ? '' : '-rotate-90'}`} />
+                  {entry.children?.some((c) => c.href === '/chat') && chatUnread > 0 && (
+                    <span className="ml-auto inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-brand-coral text-white text-[10px] font-bold">
+                      {chatUnread}
+                    </span>
+                  )}
+                  <ChevronDown size={14} className={`${entry.children?.some((c) => c.href === '/chat') && chatUnread > 0 ? '' : 'ml-auto'} transition-transform ${open ? '' : '-rotate-90'}`} />
                 </button>
                 {open && (
                   <ul style={{ backgroundColor: 'rgba(0,0,0,0.15)' }}>
@@ -405,6 +413,11 @@ export const ClasicoLayout: FC<LayoutProps> = ({ children, title: _title, subtit
                           >
                             <span className="inline-block w-1.5 h-1.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: active ? 'var(--sidebar-accent)' : 'var(--sidebar-text)' }} />
                             <span>{child.label}</span>
+                            {child.href === '/chat' && chatUnread > 0 && (
+                              <span className="ml-auto inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-brand-coral text-white text-[10px] font-bold">
+                                {chatUnread}
+                              </span>
+                            )}
                           </Link>
                           <button
                             type="button"

frontend/src/components/HomeNestLayout.tsx

@@ -31,6 +31,7 @@ import {
   Star,
   Pencil,
   ChevronUp,
+  MessageCircle,
 } from 'lucide-react';
 import { Button, Modal, Input } from './ui';
 import QuickLinksDock, { QuickLinksModePicker } from './QuickLinksDock';
@@ -38,6 +39,7 @@ import GlobalSearch from './GlobalSearch';
 import ThemePicker from './ThemePicker';
 import NotificationBell from './NotificationBell';
 import { useAuth } from '../lib/auth';
+import { useChatUnread } from '../lib/chat';
 import { useQuickLinks } from '../lib/quicklinks';
 import { odooApi } from '../services/odoo';
 
@@ -85,6 +87,7 @@ const menuSections = [
     items: [
       { label: 'Reportes', icon: BarChart3, href: '/reportes' },
       { label: 'Comisiones', icon: Percent, href: '/reportes?tab=comisiones' },
+      { label: 'Chat', icon: MessageCircle, href: '/chat' },
       { label: 'Cumpleañeros', icon: Cake, href: '/cumpleanos' },
       { label: 'Configuración', icon: Settings, href: '/configuracion' },
     ],
@@ -104,6 +107,7 @@ export const HomeNestLayout: FC<LayoutProps> = ({ children, title: _title, subti
   const { user, canSee, hasRole, logout } = useAuth();
   const [menuOpen, setMenuOpen] = useState(false);
   const [expanded, setExpanded] = useState<string[]>(['Clínica']);
+  const chatUnread = useChatUnread();
 
   const visibleSections = useMemo(
     () =>
@@ -287,6 +291,11 @@ export const HomeNestLayout: FC<LayoutProps> = ({ children, title: _title, subti
                           onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
                         >
                           <Icon size={16} /> {item.label}
+                          {item.href === '/chat' && chatUnread > 0 && (
+                            <span className="ml-auto inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-brand-coral text-white text-[10px] font-bold">
+                              {chatUnread}
+                            </span>
+                          )}
                         </Link>
                       );
                     })}
@@ -458,6 +467,11 @@ export const HomeNestLayout: FC<LayoutProps> = ({ children, title: _title, subti
                           >
                             <Icon size={16} />
                             {item.label}
+                            {item.href === '/chat' && chatUnread > 0 && (
+                              <span className="ml-auto inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-brand-coral text-white text-[10px] font-bold">
+                                {chatUnread}
+                              </span>
+                            )}
                           </Link>
                           <button
                             type="button"
@@ -556,6 +570,11 @@ export const HomeNestLayout: FC<LayoutProps> = ({ children, title: _title, subti
                     }}
                   >
                     <Icon size={18} /> {item.label}
+                    {item.href === '/chat' && chatUnread > 0 && (
+                      <span className="ml-auto inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-brand-coral text-white text-[10px] font-bold">
+                        {chatUnread}
+                      </span>
+                    )}
                   </Link>
                 );
               })}

frontend/src/components/SkeenLayout.tsx

@@ -31,6 +31,7 @@ import {
   Pencil,
   ChevronUp,
   ChevronDown,
+  MessageCircle,
 } from 'lucide-react';
 import { Button, Modal, Input } from './ui';
 import QuickLinksDock, { QuickLinksModePicker } from './QuickLinksDock';
@@ -38,6 +39,7 @@ import GlobalSearch from './GlobalSearch';
 import ThemePicker from './ThemePicker';
 import NotificationBell from './NotificationBell';
 import { useAuth, ROLE_LABELS } from '../lib/auth';
+import { useChatUnread } from '../lib/chat';
 import { useQuickLinks } from '../lib/quicklinks';
 import { odooApi } from '../services/odoo';
 
@@ -91,6 +93,7 @@ const menuGroups = [
   {
     label: 'Comunicación',
     items: [
+      { label: 'Chat', icon: MessageCircle, href: '/chat' },
       { label: 'Cumpleañeros', icon: Cake, href: '/cumpleanos' },
     ],
   },
@@ -108,6 +111,7 @@ export const SkeenLayout: FC<LayoutProps> = ({ children, title, subtitle }) => {
   const navigate = useNavigate();
   const { user, canSee, hasRole, logout } = useAuth();
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const chatUnread = useChatUnread();
 
   const visibleGroups = useMemo(
     () =>
@@ -293,7 +297,12 @@ export const SkeenLayout: FC<LayoutProps> = ({ children, title, subtitle }) => {
                     >
                       <Icon size={18} />
                       <span>{item.label}</span>
-                      {active && <ChevronRight size={14} className="ml-auto" />}
+                      {item.href === '/chat' && chatUnread > 0 && (
+                        <span className="ml-auto inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-brand-coral text-white text-[10px] font-bold">
+                          {chatUnread}
+                        </span>
+                      )}
+                      {active && <ChevronRight size={14} className={item.href === '/chat' && chatUnread > 0 ? '' : 'ml-auto'} />}
                     </Link>
                     <button
                       type="button"

frontend/src/lib/chat.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { odooApi } from '../services/odoo';
+import { useAuth } from './auth';
+
+/** Conteo global de mensajes de chat no leídos, con polling. */
+export const useChatUnread = (intervalMs = 15000): number => {
+  const { user } = useAuth();
+  const [unread, setUnread] = useState(0);
+
+  useEffect(() => {
+    if (!user) {
+      setUnread(0);
+      return;
+    }
+    let alive = true;
+    const fetchCount = () => {
+      odooApi.getChatUnreadCount()
+        .then((res) => { if (alive && res.status === 'success') setUnread(res.unread); })
+        .catch(() => {});
+    };
+    fetchCount();
+    const id = setInterval(fetchCount, intervalMs);
+    return () => { alive = false; clearInterval(id); };
+  }, [user, intervalMs]);
+
+  return unread;
+};

frontend/src/pages/Chat.tsx

@@ -0,0 +1,273 @@
+import type { FC, FormEvent, KeyboardEvent } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Send, Search, ArrowLeft } from 'lucide-react';
+import Layout from '../components/Layout';
+import { Card, Button, EmptyState, toast } from '../components/ui';
+import { ROLE_LABELS } from '../lib/auth';import { odooApi, type ChatUser, type ChatMessage } from '../services/odoo';
+
+const POLL_MS = 5000;
+
+// 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 '';
+  const dt = new Date(d.replace(' ', 'T') + 'Z');
+  return dt.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' });
+};
+
+const fmtDay = (d: string | null): string => {
+  if (!d) return '';
+  const dt = new Date(d.replace(' ', 'T') + 'Z');
+  const today = new Date();
+  const sameDay = dt.toDateString() === today.toDateString();
+  return sameDay
+    ? fmtTime(d)
+    : dt.toLocaleDateString('es-MX', { day: 'numeric', month: 'short' });
+};
+
+const initials = (name: string) =>
+  (name || '?').split(' ').filter(Boolean).slice(0, 2).map((w) => w[0]).join('').toUpperCase();
+
+const Chat: FC = () => {
+  const [users, setUsers] = useState<ChatUser[]>([]);
+  const [loadingUsers, setLoadingUsers] = useState(true);
+  const [activeId, setActiveId] = useState<number | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [loadingThread, setLoadingThread] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [sending, setSending] = useState(false);
+  const [search, setSearch] = useState('');
+  const lastIdRef = useRef(0);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const activeUser = users.find((u) => u.id === activeId) || null;
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      const res = await odooApi.getChatUsers();
+      if (res.status === 'success') setUsers(res.users);
+    } catch {
+      // silencioso en polling
+    } finally {
+      setLoadingUsers(false);
+    }
+  }, []);
+
+  const fetchThread = useCallback(async (otherId: number, incremental: boolean) => {
+    try {
+      const res = await odooApi.getChatMessages(otherId, incremental ? lastIdRef.current : undefined);
+      if (res.status !== 'success') return;
+      if (incremental) {
+        if (res.messages.length === 0) return;
+        setMessages((prev) => {
+          const known = new Set(prev.map((m) => m.id));
+          return [...prev, ...res.messages.filter((m) => !known.has(m.id))];
+        });
+      } else {
+        setMessages(res.messages);
+      }
+      lastIdRef.current = Math.max(...res.messages.map((m) => m.id), lastIdRef.current);
+      setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50);
+    } catch {
+      // silencioso en polling
+    }
+  }, []);
+
+  const openConversation = useCallback(async (id: number) => {
+    setActiveId(id);
+    setMessages([]);
+    lastIdRef.current = 0;
+    setLoadingThread(true);
+    await fetchThread(id, false);
+    setLoadingThread(false);
+    // El servidor ya marcó leídos: refrescar conteos de la lista
+    fetchUsers();
+  }, [fetchThread, fetchUsers]);
+
+  // Carga inicial + polling de lista y hilo abierto
+  useEffect(() => {
+    fetchUsers();
+    const id = setInterval(() => {
+      fetchUsers();
+      if (activeId) fetchThread(activeId, true);
+    }, POLL_MS);
+    return () => clearInterval(id);
+  }, [fetchUsers, fetchThread, activeId]);
+
+  const send = async (e?: FormEvent) => {
+    e?.preventDefault();
+    const body = draft.trim();
+    if (!body || !activeId || sending) return;
+    try {
+      setSending(true);
+      const res = await odooApi.sendChatMessage(activeId, body);
+      if (res.status === 'success') {
+        setMessages((prev) => [...prev, res.message]);
+        lastIdRef.current = Math.max(lastIdRef.current, res.message.id);
+        setDraft('');
+        setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: 'smooth' }), 50);
+        fetchUsers();
+      }
+    } catch (err) {
+      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      toast.error(msg || 'No se pudo enviar el mensaje');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const onDraftKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+
+  const filteredUsers = users.filter((u) =>
+    !search || u.name.toLowerCase().includes(search.toLowerCase()));
+
+  return (
+    <Layout title="Chat" subtitle="Mensajería interna del equipo">
+      <Card>
+        <Card.Body noPadding>
+          <div className="flex h-[calc(100vh-14rem)] min-h-[420px]">
+            {/* Columna izquierda: conversaciones */}
+            <div className={`w-full md:w-80 md:shrink-0 border-r border-theme-border flex flex-col ${activeId ? 'hidden md:flex' : 'flex'}`}>
+              <div className="p-3 border-b border-theme-border">
+                <div className="relative">
+                  <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-theme-muted" />
+                  <input
+                    type="text"
+                    placeholder="Buscar usuario..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    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 transition"
+                  />
+                </div>
+              </div>
+              <div className="flex-1 overflow-y-auto">
+                {loadingUsers ? (
+                  <p className="p-4 text-sm text-theme-muted">Cargando...</p>
+                ) : filteredUsers.length === 0 ? (
+                  <p className="p-4 text-sm text-theme-muted">No hay usuarios para mostrar.</p>
+                ) : (
+                  <ul>
+                    {filteredUsers.map((u) => (
+                      <li key={u.id}>
+                        <button
+                          type="button"
+                          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>
+                          <span className="flex-1 min-w-0">
+                            <span className="flex items-center justify-between gap-2">
+                              <span className="truncate text-sm font-medium text-theme-heading">{u.name}</span>
+                              {u.last_date && (
+                                <span className="shrink-0 text-[10px] text-theme-muted">{fmtDay(u.last_date)}</span>
+                              )}
+                            </span>
+                            <span className="flex items-center justify-between gap-2">
+                              <span className="truncate text-xs text-theme-muted">
+                                {u.last_message
+                                  ? `${u.last_mine ? 'Tú: ' : ''}${u.last_message}`
+                                  : ROLE_LABELS[u.role] || u.role}
+                              </span>
+                              {u.unread > 0 && (
+                                <span className="shrink-0 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-theme-accent text-theme-inverse text-[10px] font-bold">
+                                  {u.unread}
+                                </span>
+                              )}
+                            </span>
+                          </span>
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </div>
+
+            {/* Columna derecha: hilo */}
+            <div className={`flex-1 flex-col min-w-0 ${activeId ? 'flex' : 'hidden md:flex'}`}>
+              {!activeUser ? (
+                <div className="flex-1 flex items-center justify-center">
+                  <EmptyState
+                    title="Selecciona una conversación"
+                    subtitle="Elige un usuario de la lista para iniciar o continuar un chat."
+                  />
+                </div>
+              ) : (
+                <>
+                  <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
+                    <button
+                      type="button"
+                      onClick={() => setActiveId(null)}
+                      className="md:hidden p-1.5 rounded-lg text-theme-muted hover:bg-theme-accent-bg"
+                      aria-label="Volver a la lista"
+                    >
+                      <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>
+                    <div className="min-w-0">
+                      <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>
+                    </div>
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto px-4 py-4 space-y-2 bg-theme-bg">
+                    {loadingThread ? (
+                      <p className="text-sm text-theme-muted text-center py-6">Cargando mensajes...</p>
+                    ) : messages.length === 0 ? (
+                      <p className="text-sm text-theme-muted text-center py-6">
+                        Aún no hay mensajes. Escribe el primero.
+                      </p>
+                    ) : (
+                      messages.map((m) => (
+                        <div key={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 ${
+                              m.mine
+                                ? 'bg-theme-accent text-theme-inverse rounded-br-md'
+                                : 'bg-theme-surface text-theme-heading border border-theme-border rounded-bl-md'
+                            }`}
+                          >
+                            <p className="whitespace-pre-wrap break-words">{m.body}</p>
+                            <p className={`mt-1 text-[10px] text-right ${m.mine ? 'text-theme-inverse/70' : 'text-theme-muted'}`}>
+                              {fmtTime(m.date)}
+                            </p>
+                          </div>
+                        </div>
+                      ))
+                    )}
+                    <div ref={bottomRef} />
+                  </div>
+
+                  <form onSubmit={send} className="flex items-end gap-2 p-3 border-t border-theme-border">
+                    <textarea
+                      value={draft}
+                      onChange={(e) => setDraft(e.target.value)}
+                      onKeyDown={onDraftKeyDown}
+                      placeholder={`Mensaje para ${activeUser.name}... (Enter envía)`}
+                      rows={1}
+                      maxLength={2000}
+                      className="flex-1 resize-none rounded-xl border border-theme-border-strong bg-theme-surface px-3 py-2.5 text-sm text-theme-heading focus:outline-none focus:ring-2 focus:ring-theme-accent/30 focus:border-theme-accent transition"
+                    />
+                    <Button type="submit" loading={sending} disabled={!draft.trim()} aria-label="Enviar mensaje">
+                      <Send size={16} />
+                    </Button>
+                  </form>
+                </>
+              )}
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+    </Layout>
+  );
+};
+
+export default Chat;

frontend/src/services/odoo.ts

@@ -544,6 +544,27 @@ export interface Receta {
   contenido: string;
 }
 
+// ---- Chat interno ----
+export interface ChatUser {
+  id: number;
+  name: string;
+  role: FrontendRole;
+  unread: number;
+  last_message: string | null;
+  last_date: string | null;
+  last_mine: boolean | null;
+}
+
+export interface ChatMessage {
+  id: number;
+  sender_id: number;
+  recipient_id: number;
+  body: string;
+  is_read: boolean;
+  mine: boolean;
+  date: string | null;
+}
+
 export interface Diagnostico {
   id: number;
   name: string;
@@ -894,6 +915,27 @@ export const odooApi = {
     return data;
   },
 
+  // Chat interno entre usuarios de la plataforma
+  async getChatUsers(): Promise<{ status: string; users: ChatUser[] }> {
+    const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/chat/users`);
+    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 });
+    return data;
+  },
+
+  async sendChatMessage(userId: number, message: string): Promise<{ status: string; message: ChatMessage }> {
+    const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/chat/send`, { user_id: userId, message });
+    return data;
+  },
+
+  async getChatUnreadCount(): Promise<{ status: string; unread: number }> {
+    const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/chat/unread_count`);
+    return data;
+  },
+
   async getAvailableSlots(date: string, servicio_id: number): Promise<{ status: string; slots: { time: number; time_str: string }[] }> {
     const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/appointments/slots`, { params: { date, servicio_id } });
     return data;