Carregando...
+ if (error) return Erro: {error}
+
+ return (
+
+ setModalOpen(false)}
+ messages={messages}
+ tasks={tasks}
+ onUpdateStage={handleUpdateStage}
+ onAddNote={handleAddNote}
+ onUpdatePaymentStatus={handleUpdatePaymentStatus}
+ onAddTask={handleAddTask}
+ onToggleTask={handleToggleTask}
+ />
+
+ )
+}
diff --git a/apps/whatsapp-crm/src/app/layout.tsx b/apps/whatsapp-crm/src/app/layout.tsx
new file mode 100644
index 0000000..734566f
--- /dev/null
+++ b/apps/whatsapp-crm/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ title: 'WhatsApp CRM',
+ description: 'WhatsApp CRM with Kanban board',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/apps/whatsapp-crm/src/app/page.tsx b/apps/whatsapp-crm/src/app/page.tsx
new file mode 100644
index 0000000..17562cb
--- /dev/null
+++ b/apps/whatsapp-crm/src/app/page.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function HomePage() {
+ const router = useRouter()
+ const [connected, setConnected] = useState(false)
+ const [hasExistingSession, setHasExistingSession] = useState(false)
+ const [syncedContacts, setSyncedContacts] = useState(0)
+ const [showQr, setShowQr] = useState(false)
+ const [qrCode, setQrCode] = useStateKanban - Leads
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/whatsapp-crm/src/components/ContactCard/ContactCard.tsx b/apps/whatsapp-crm/src/components/ContactCard/ContactCard.tsx
new file mode 100644
index 0000000..5d733cf
--- /dev/null
+++ b/apps/whatsapp-crm/src/components/ContactCard/ContactCard.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { Contact, Stage } from '@/lib/types'
+
+interface ContactCardProps {
+ contact: Contact
+ onClick: () => void
+ onStageChange?: (contactId: number, newStage: Stage) => void
+}
+
+export default function ContactCard({ contact, onClick, onStageChange }: ContactCardProps) {
+ const formatPhone = (phone: string) => {
+ const cleaned = phone.replace(/\D/g, '')
+ if (cleaned.length === 13) {
+ return `+${cleaned.slice(0, 2)} (${cleaned.slice(3, 5)}) ${cleaned.slice(5, 10)}-${cleaned.slice(10)}`
+ }
+ if (cleaned.length === 12) {
+ return `+${cleaned.slice(0, 2)} (${cleaned.slice(2, 4)}) ${cleaned.slice(4, 9)}-${cleaned.slice(9)}`
+ }
+ if (cleaned.length === 11) {
+ return `(${cleaned.slice(0, 2)}) ${cleaned.slice(2, 7)}-${cleaned.slice(7)}`
+ }
+ return phone
+ }
+
+ const isOverdue = contact.schedule_date && new Date(contact.schedule_date) < new Date()
+
+ return (
+ WhatsApp CRM
+Conecte seu WhatsApp para começar
+ + {showQr && qrCode && ( +
+ }`})
+
+ )}
+
+ {!connected && (
+
+ )}
+
+ {connected && (
+ Escaneie o QR code com seu WhatsApp:
+
+
+ )}
+ ✓ WhatsApp conectado ({syncedContacts} contatos)
+
+
+ Acessar Kanban
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/whatsapp-crm/src/components/ContactCard/index.ts b/apps/whatsapp-crm/src/components/ContactCard/index.ts
new file mode 100644
index 0000000..5ac307b
--- /dev/null
+++ b/apps/whatsapp-crm/src/components/ContactCard/index.ts
@@ -0,0 +1 @@
+export { default as ContactCard } from './ContactCard'
\ No newline at end of file
diff --git a/apps/whatsapp-crm/src/components/Kanban/KanbanBoard.tsx b/apps/whatsapp-crm/src/components/Kanban/KanbanBoard.tsx
new file mode 100644
index 0000000..b14d7c7
--- /dev/null
+++ b/apps/whatsapp-crm/src/components/Kanban/KanbanBoard.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { Stage, STAGES, STAGE_LIST, Contact } from '@/lib/types'
+import { ContactCard } from '@/components/ContactCard'
+
+interface KanbanBoardProps {
+ contacts: Contact[]
+ onContactClick: (contact: Contact) => void
+ onStageChange: (contactId: number, newStage: Stage) => void
+}
+
+export default function KanbanBoard({ contacts, onContactClick, onStageChange }: KanbanBoardProps) {
+ const safeContacts = useMemo(() => {
+ return Array.isArray(contacts) ? contacts : []
+ }, [contacts])
+
+ const getContactsByStage = (stage: Stage) => {
+ return safeContacts.filter(c => c.stage === stage)
+ }
+
+ return (
+ {contact.name}
+ {formatPhone(contact.phone)}
+ {contact.notes && (
+
+ {contact.notes.substring(0, 50)}{contact.notes.length > 50 ? '...' : ''}
+
+ )}
+
+ {contact.taskCount !== undefined && contact.taskCount > 0 && (
+ {contact.taskCount}
+ )}
+ {contact.schedule_date && (
+
+ {new Date(contact.schedule_date).toLocaleDateString('pt-BR')}
+
+ )}
+
+
+ {STAGE_LIST.map(stage => (
+
+ )
+}
\ No newline at end of file
diff --git a/apps/whatsapp-crm/src/components/Kanban/index.ts b/apps/whatsapp-crm/src/components/Kanban/index.ts
new file mode 100644
index 0000000..b29035d
--- /dev/null
+++ b/apps/whatsapp-crm/src/components/Kanban/index.ts
@@ -0,0 +1 @@
+export { default as KanbanBoard } from './KanbanBoard'
\ No newline at end of file
diff --git a/apps/whatsapp-crm/src/components/Modal/ContactDetailModal.tsx b/apps/whatsapp-crm/src/components/Modal/ContactDetailModal.tsx
new file mode 100644
index 0000000..9f69fd1
--- /dev/null
+++ b/apps/whatsapp-crm/src/components/Modal/ContactDetailModal.tsx
@@ -0,0 +1,212 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Contact, Message, Task, STAGE_LIST, Stage } from '@/lib/types'
+
+interface ContactDetailModalProps {
+ contact: Contact
+ isOpen: boolean
+ onClose: () => void
+ messages: Message[]
+ tasks: Task[]
+ onUpdateStage: (stage: Stage) => void
+ onAddNote: (notes: string) => void
+ onUpdatePaymentStatus: (status: 'pending' | 'paid') => void
+ onAddTask: (title: string, due_date: string) => void
+ onToggleTask: (taskId: number, status: 'pending' | 'completed') => void
+}
+
+export default function ContactDetailModal({
+ contact,
+ isOpen,
+ onClose,
+ messages,
+ tasks,
+ onUpdateStage,
+ onAddNote,
+ onUpdatePaymentStatus,
+ onAddTask,
+ onToggleTask,
+}: ContactDetailModalProps) {
+ const [noteInput, setNoteInput] = useState('')
+ const [taskTitle, setTaskTitle] = useState('')
+ const [taskDueDate, setTaskDueDate] = useState('')
+ const [activeTab, setActiveTab] = useState<'messages' | 'tasks' | 'details'>('messages')
+
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose()
+ }
+ if (isOpen) {
+ document.addEventListener('keydown', handleEscape)
+ document.body.style.overflow = 'hidden'
+ }
+ return () => {
+ document.removeEventListener('keydown', handleEscape)
+ document.body.style.overflow = 'auto'
+ }
+ }, [isOpen, onClose])
+
+ if (!isOpen) return null
+
+ const formatDate = (timestamp: number) => {
+ return new Date(timestamp * 1000).toLocaleString('pt-BR', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ })
+ }
+
+ const formatPhone = (phone: string) => {
+ const cleaned = phone.replace(/\D/g, '')
+ if (cleaned.length === 13) {
+ return `+${cleaned.slice(0, 2)} (${cleaned.slice(3, 5)}) ${cleaned.slice(5, 10)}-${cleaned.slice(10)}`
+ }
+ if (cleaned.length === 12) {
+ return `+${cleaned.slice(0, 2)} (${cleaned.slice(2, 4)}) ${cleaned.slice(4, 9)}-${cleaned.slice(9)}`
+ }
+ if (cleaned.length === 11) {
+ return `(${cleaned.slice(0, 2)}) ${cleaned.slice(2, 7)}-${cleaned.slice(7)}`
+ }
+ return phone
+ }
+
+ return (
+
+
+ ))}
+
+ {stage}
+
+ {getContactsByStage(stage).length}
+
+
+
+ {getContactsByStage(stage).length === 0 ? (
+ onContactClick(contact)}
+ onStageChange={onStageChange}
+ />
+ ))
+ )}
+
+ Nenhum lead
+ ) : (
+ getContactsByStage(stage).map(contact => (
+
+
e.stopPropagation()}>
+
+
+
+
+
+ {contact.name}
+{formatPhone(contact.phone)}
+
+
+
+
+
+
+
+ {activeTab === 'messages' && (
+
+ {messages.length === 0 ? (
+
+ )}
+
+ {activeTab === 'tasks' && (
+ Nenhuma mensagem
+ ) : (
+ messages.map(msg => (
+
+
+ ))
+ )}
+ {formatDate(msg.timestamp)}
+ {msg.body}
+
+
+ )}
+
+ {activeTab === 'details' && (
+
+ setTaskTitle(e.target.value)}
+ />
+ setTaskDueDate(e.target.value)}
+ />
+
+
+
+ {tasks.length === 0 ? (
+
+ Nenhuma tarefa
+ ) : (
+ tasks.map(task => (
+ onToggleTask(task.id, task.status === 'pending' ? 'completed' : 'pending')}
+ >
+ {}}
+ />
+ {task.title}
+ {task.due_date}
+
+ ))
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+