anteriority-ui 1.0.0

package/screens/components/CardV1/utils.js

@@ -0,0 +1,49 @@
+import { ShieldAlert, AlertTriangle, Info, Bell } from 'lucide-react';
+
+/**
+ * Utility configuration for mapping priority strings/numbers to their visual representation.
+ */
+export const priorityConfig = {
+  '3': { color: '#ef4444', label: 'ALTA', icon: ShieldAlert },
+  'alta': { color: '#ef4444', label: 'ALTA', icon: ShieldAlert },
+  '2': { color: '#f59e42', label: 'MEDIA', icon: AlertTriangle },
+  'media': { color: '#f59e42', label: 'MEDIA', icon: AlertTriangle },
+  '1': { color: '#22c55e', label: 'BAJA', icon: Info },
+  'baja': { color: '#22c55e', label: 'BAJA', icon: Info },
+};
+
+/**
+ * Returns priority data (color, label, icon) for a given priority value.
+ * @param {string|number} priority - The priority to evaluate.
+ * @returns {Object} { color, label, icon }
+ */
+export const getPriorityData = (priority) => {
+  const key = String(priority || '').toLowerCase();
+  return priorityConfig[key] || { color: '#64748b', label: 'ALERTAS', icon: Bell };
+};
+
+/**
+ * Calculates the color representing how soon an appointment is.
+ * @param {string} horaCitaStr - Time in "HH:MM:SS" or "HH:MM" format.
+ * @returns {string} HEX color code.
+ */
+export const getAppointmentColorByTime = (horaCitaStr) => {
+  if (!horaCitaStr) return '#94a3b8'; // gray default
+
+  const now = new Date();
+  const parts = horaCitaStr.split(':').map(Number);
+  const hours = parts[0];
+  const minutes = parts[1];
+  const seconds = parts[2] || 0;
+  
+  const appointmentTime = new Date(now);
+  appointmentTime.setHours(hours, minutes, seconds, 0);
+
+  const diffMs = appointmentTime - now;
+  const diffHours = diffMs / (1000 * 60 * 60);
+
+  if (diffHours < 0) return '#ef4444'; // past (red)
+  if (diffHours <= 1) return '#ef4444'; // less than 1 hour (red)
+  if (diffHours <= 4) return '#eab308'; // less than 4 hours (yellow)
+  return '#22c55e'; // more than 4 hours (green)
+};

package/screens/components/ChatWindow/index.jsx

@@ -0,0 +1,251 @@
+import React, { useState, useEffect, useRef } from 'react';
+import Popover from '@mui/material/Popover';
+import { User, HelpCircle, Bold, Link, Copy, Send } from 'lucide-react';
+import styles from './index.module.css';
+
+// Reusable screen components
+import UserAvatar from '../Profile/Avatar/index';
+import Loading from '../Loading/index';
+import CopyableText from '../CopyText/index';
+import GreenHighlight from '../GreenHighlight/index';
+import BlueLink from '../BlueLink/index';
+import MarkdownContent from '../MarkdownContent/index';
+
+// Convierte la sintaxis propia del chat (**resaltado**, $etiqueta|url$, (copiable))
+// a Markdown real antes de pasarla al renderer, manteniendo esos formatos como
+// una capa personalizada sobre Markdown estándar en vez de un parser aparte.
+const toMarkdownSource = (content) => {
+  if (typeof content !== 'string') return '';
+  // Un salto de línea simple debe verse como salto de línea en el chat, no
+  // como texto pegado (Markdown solo respeta líneas en blanco por defecto).
+  let source = content.replace(/\n(?!\n)/g, '  \n');
+  source = source.replace(/\$([^$]+)\$/g, (_, inner) => {
+    const [rawLabel, rawUrl] = inner.split('|');
+    const label = rawLabel.trim();
+    const url = (rawUrl ?? rawLabel).trim();
+    return `[${label}](${url})`;
+  });
+  source = source.replace(/(?<!\])\(([^()]+)\)/g, (_, inner) => `[${inner}](copyable:${encodeURIComponent(inner)})`);
+  return source;
+};
+
+const flattenToText = (node) => (Array.isArray(node) ? node.join('') : node ?? '');
+
+const chatMarkdownComponents = {
+  strong: ({ children }) => <GreenHighlight>{children}</GreenHighlight>,
+  a: ({ href = '', children }) => {
+    if (href.startsWith('copyable:')) {
+      return <CopyableText text={decodeURIComponent(href.slice('copyable:'.length))} />;
+    }
+    return <BlueLink label={flattenToText(children)} url={href} navigate={() => {}} />;
+  },
+};
+
+export default function ChatWindow({
+  messages = [],
+  currentUser = {},
+  selectedContact = {},
+  isTyping = false,
+  onSend,
+  showHeader = true,
+  isMobile = false,
+  showContactsList = false,
+  handleBackToList,
+  isLoading = false,
+  placeholder = "Escribe tu mensaje aquí...",
+  accentColor,
+  accentColorDark
+}) {
+  const [inputText, setInputText] = useState('');
+  const [anchorEl, setAnchorEl] = useState(null);
+  const chatMessagesRef = useRef(null);
+
+  const lastScrolledContactIdRef = useRef(null);
+
+  // Auto scroll to bottom when messages update, but respect user's scroll position
+  useEffect(() => {
+    if (chatMessagesRef.current && !isLoading && messages.length > 0) {
+      const container = chatMessagesRef.current;
+      
+      // Check if user is already near the bottom (within a threshold of 150px)
+      const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 150;
+      
+      // Check if this is the first scroll/load for this contact
+      const isFirstLoadForContact = lastScrolledContactIdRef.current !== selectedContact?.id;
+      
+      // Check if the last message was sent by the current user
+      const lastMessage = messages[messages.length - 1];
+      const lastMessageIsMe = lastMessage && lastMessage.from === currentUser?.id;
+
+      // Always scroll to bottom if:
+      // 1. First time loading messages for this contact (including component mount)
+      // 2. The user was already scrolled to the bottom
+      // 3. The last message was sent by the current user
+      if (isFirstLoadForContact || isAtBottom || lastMessageIsMe) {
+        const timer = setTimeout(() => {
+          if (chatMessagesRef.current) {
+            chatMessagesRef.current.scrollTop = chatMessagesRef.current.scrollHeight;
+          }
+        }, 60);
+        lastScrolledContactIdRef.current = selectedContact?.id;
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [messages, isTyping, selectedContact?.id, currentUser?.id, isLoading]);
+
+  const handleOpenFormats = (e) => {
+    setAnchorEl(e.currentTarget);
+  };
+
+  const handleCloseFormats = () => {
+    setAnchorEl(null);
+  };
+
+  const openFormats = Boolean(anchorEl);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const trimmed = inputText.trim();
+    if (trimmed && onSend) {
+      setInputText('');
+      await onSend(trimmed);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <div
+      className={styles.chatWindowContainer}
+      style={{
+        ...(accentColor ? { '--chat-accent': accentColor } : {}),
+        ...(accentColorDark ? { '--chat-accent-dark': accentColorDark } : {}),
+      }}
+    >
+      {showHeader && (
+        <header className={styles.threadHeader}>
+          {isMobile && (
+            <button className={styles.backBtn} onClick={handleBackToList}>
+              ← Volver
+            </button>
+          )}
+          <div className={styles.threadAvatar}>
+            {selectedContact ? (
+              <UserAvatar
+                src={selectedContact.avatarUrl}
+                name={selectedContact.name}
+                size={40}
+                editable={false}
+                viewable={true}
+              />
+            ) : (
+              <User size={20} />
+            )}
+          </div>
+          <div className={styles.threadInfo}>
+            <h2 className={styles.threadName}>{selectedContact?.name || 'Contacto'}</h2>
+            <span className={styles.threadEmail}>{selectedContact?.raw?.email || `ID: ${selectedContact?.id}`}</span>
+          </div>
+        </header>
+      )}
+
+      <div className={styles.chatMessages} ref={chatMessagesRef}>
+        {isLoading && <Loading size="medium" text="Cargando hilo..." />}
+
+        {messages.map((m) => {
+          const isMe = m.from === currentUser?.id;
+          return (
+            <div key={m.id} className={`${styles.messageRow} ${isMe ? styles.messageMe : styles.messageThem}`}>
+              <div className={styles.messageBubble}>
+                {typeof m.content === 'string' ? (
+                  <MarkdownContent components={chatMarkdownComponents} style={{ color: 'inherit' }}>
+                    {toMarkdownSource(m.content)}
+                  </MarkdownContent>
+                ) : m.content}
+              </div>
+              <span className={styles.messageTime}>
+                {new Date(m.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+              </span>
+            </div>
+          );
+        })}
+
+        {isTyping && (
+          <div className={`${styles.messageRow} ${styles.messageThem}`}>
+            <div className={styles.messageBubble}>
+              <div className={styles.typingIndicator}>
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.threadComposer}>
+        {/* Formats Helper */}
+        <div className={styles.formatsHelperContainer}>
+          <button
+            type="button"
+            onClick={handleOpenFormats}
+            className={`${styles.formatsBtn} ${openFormats ? styles.formatsActive : ''}`}
+          >
+            <HelpCircle size={14} style={{ marginRight: '4px' }} />
+            Formas de escribir
+          </button>
+
+          <Popover
+            open={openFormats}
+            anchorEl={anchorEl}
+            onClose={handleCloseFormats}
+            anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+            transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            slotProps={{ paper: { className: styles.popoverPaper } }}
+          >
+            <div className={styles.formatsDropdownMenu}>
+              <div className={styles.formatMenuTitle}>Guía de formatos rápidos:</div>
+              <ul className={styles.formatList}>
+                <li>
+                  <Bold size={13} className={styles.formatMenuIcon} />
+                  <span>Resaltado verde: <code>**texto**</code></span>
+                </li>
+                <li>
+                  <Link size={13} className={styles.formatMenuIcon} />
+                  <span>Enlaces web: <code>$Texto opcional|https://url.com$</code></span>
+                </li>
+                <li>
+                  <Copy size={13} className={styles.formatMenuIcon} />
+                  <span>Bloque copiable: <code>(texto a copiar)</code></span>
+                </li>
+              </ul>
+            </div>
+          </Popover>
+        </div>
+
+        <form onSubmit={handleSubmit} className={styles.chatComposerForm}>
+          <textarea
+            className={styles.composerInput}
+            placeholder={placeholder}
+            value={inputText}
+            onChange={(e) => setInputText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            rows={1}
+          />
+          <button 
+            type="submit" 
+            className={styles.sendBtn} 
+            disabled={isTyping || !inputText.trim()}
+          >
+            <Send size={18} />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/screens/components/ChatWindow/index.module.css

@@ -0,0 +1,311 @@
+.chatWindowContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: #ffffff;
+}
+
+/* Header Styling */
+.threadHeader {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  background-color: #ffffff;
+  flex-shrink: 0;
+}
+
+.backBtn {
+  background: none;
+  border: none;
+  color: #2563eb;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  margin-right: 1rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.backBtn:hover {
+  background-color: #f1f5f9;
+}
+
+.threadAvatar {
+  margin-right: 0.75rem;
+  display: flex;
+  align-items: center;
+}
+
+.threadInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.threadName {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.threadEmail {
+  font-size: 0.75rem;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+/* Chat Messages */
+.chatMessages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+
+.chatMessages::-webkit-scrollbar {
+  width: 4px;
+}
+
+.chatMessages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chatMessages::-webkit-scrollbar-thumb {
+  background-color: #cbd5e1;
+  border-radius: 10px;
+}
+
+/* Message Rows & Bubbles */
+.messageRow {
+  display: flex;
+  flex-direction: column;
+  max-width: 82%;
+}
+
+.messageMe {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.messageThem {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.messageBubble {
+  padding: 11px 15px;
+  border-radius: 16px;
+  font-size: 0.92rem;
+  line-height: 1.55;
+  word-break: break-word;
+  white-space: pre-wrap;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.messageMe .messageBubble {
+  background-color: var(--chat-accent, #2563eb);
+  color: #ffffff;
+  border-bottom-right-radius: 4px;
+}
+
+.messageThem .messageBubble {
+  background-color: #f1f5f9;
+  color: #1e293b;
+  border-bottom-left-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.messageTime {
+  font-size: 0.72rem;
+  color: #94a3b8;
+  margin-top: 4px;
+  padding: 0 4px;
+}
+
+/* Composer Container */
+.threadComposer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #f1f5f9;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.chatComposerForm {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.composerInput {
+  flex: 1;
+  border: 1px solid #cbd5e1;
+  border-radius: 18px;
+  padding: 10px 14px;
+  font-size: 0.9rem;
+  resize: none;
+  max-height: 90px;
+  outline: none;
+  font-family: inherit;
+  transition: border-color 0.2s, background-color 0.2s;
+  background-color: #f8fafc;
+  line-height: 1.4;
+}
+
+.composerInput:focus {
+  border-color: #2563eb;
+  background-color: #ffffff;
+}
+
+.sendBtn {
+  background: linear-gradient(135deg, var(--chat-accent, #2563eb) 0%, var(--chat-accent-dark, #1d4ed8) 100%);
+  color: white;
+  border: none;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+  flex-shrink: 0;
+  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
+}
+
+.sendBtn:hover:not(:disabled) {
+  transform: scale(1.06);
+}
+
+.sendBtn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.sendBtn:disabled {
+  background: #e2e8f0;
+  color: #94a3b8;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+/* Formats Helper Link */
+.formatsHelperContainer {
+  display: flex;
+  align-items: center;
+}
+
+.formatsBtn {
+  background: none;
+  border: none;
+  font-size: 0.78rem;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.formatsBtn:hover {
+  color: #0f172a;
+  background-color: #f1f5f9;
+}
+
+.formatsActive {
+  color: #2563eb;
+  background-color: #eff6ff;
+}
+
+/* Popover Content */
+.popoverPaper {
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 8px !important;
+}
+
+.formatsDropdownMenu {
+  padding: 12px 16px;
+  max-width: 280px;
+}
+
+.formatMenuTitle {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 8px;
+}
+
+.formatList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.formatList li {
+  display: flex;
+  align-items: flex-start;
+  font-size: 0.76rem;
+  color: #475569;
+}
+
+.formatMenuIcon {
+  margin-right: 8px;
+  margin-top: 2px;
+  color: #64748b;
+  flex-shrink: 0;
+}
+
+.formatList code {
+  background-color: #f1f5f9;
+  padding: 1px 4px;
+  border-radius: 3px;
+  color: #0f172a;
+  font-family: monospace;
+}
+
+/* Typing Indicator Animation */
+.typingIndicator {
+  display: flex;
+  gap: 5px;
+  padding: 6px 4px;
+  align-items: center;
+}
+
+.typingIndicator span {
+  width: 7px;
+  height: 7px;
+  background-color: #64748b;
+  border-radius: 50%;
+  display: inline-block;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.typingIndicator span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typingIndicator span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { 
+    transform: scale(0);
+  } 40% { 
+    transform: scale(1);
+  }
+}

package/screens/components/ChatWindow/index.stories.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import ChatWindow from './index';
+
+export default {
+  title: 'Components/ChatWindow',
+  component: ChatWindow,
+};
+
+const currentUser = { id: 'user-1' };
+
+const selectedContact = {
+  id: 'contact-1',
+  name: 'María González',
+  avatarUrl: '',
+  raw: { email: 'maria@example.com' },
+};
+
+const messages = [
+  { id: 1, from: 'contact-1', content: 'Hola, ¿cómo estás?', createdAt: new Date().toISOString() },
+  { id: 2, from: 'user-1', content: 'Todo bien, ¿y vos? **Gracias por escribir**', createdAt: new Date().toISOString() },
+  { id: 3, from: 'contact-1', content: 'Podés revisar esto: $Sitio|https://example.com$', createdAt: new Date().toISOString() },
+];
+
+export const Default = {
+  args: {
+    messages,
+    currentUser,
+    selectedContact,
+    onSend: (text) => console.log('send', text),
+  },
+};
+
+export const Typing = {
+  args: {
+    messages,
+    currentUser,
+    selectedContact,
+    isTyping: true,
+    onSend: (text) => console.log('send', text),
+  },
+};
+
+export const LoadingThread = {
+  args: {
+    messages: [],
+    currentUser,
+    selectedContact,
+    isLoading: true,
+    onSend: (text) => console.log('send', text),
+  },
+};
+
+export const MobileView = {
+  args: {
+    messages,
+    currentUser,
+    selectedContact,
+    isMobile: true,
+    handleBackToList: () => console.log('back to list'),
+    onSend: (text) => console.log('send', text),
+  },
+};

package/screens/components/Checks/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Checkbox from '@mui/material/Checkbox';
+import ButtonBase from '@mui/material/ButtonBase';
+import styles from './index.module.css';
+
+import ModalTooltip from '../ModalTooltip/ModalTooltip';
+
+export default function PermissionCheckboxItem({ label, checked, onChange, disabled, checkedBgColor }) {
+  return (
+    <ButtonBase
+      component="div"
+      className={`${styles.itemContainer} ${checked ? styles.checked : ''}`}
+      onClick={!disabled ? onChange : undefined}
+      disabled={disabled}
+      focusRipple
+      style={checkedBgColor ? { '--checks-checked-bg': checkedBgColor } : undefined}
+    >
+        <ModalTooltip  text={label}>
+      <Checkbox
+        checked={checked}
+        disabled={disabled}
+        disableRipple
+        tabIndex={-1}
+      />
+      </ModalTooltip>
+     
+        <span className={styles.label}>{label}</span>
+
+    </ButtonBase>
+  );
+}