erik/aggios.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: versão 1.5 - CRM Beta com leads, funis, campanhas e portal do cliente

Browse Source
This commit is contained in:
Erik Silva
2025-12-24 17:36:52 -03:00
parent 99d828869a
commit dfb91c8ba5
98 changed files with 18255 additions and 1465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
front-end-agency/app/share/leads/[token]/page.tsx Normal file
View File

@@ -0,0 +1,310 @@
"use client";
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import {
ChartBarIcon,
UsersIcon,
FunnelIcon,
ArrowTrendingUpIcon,
ArrowTrendingDownIcon,
EnvelopeIcon,
PhoneIcon,
TagIcon,
UserPlusIcon,
} from '@heroicons/react/24/outline';
interface Lead {
id: string;
name: string;
email: string;
phone: string;
source: string;
status: string;
tags: string[];
created_at: string;
}
interface SharedData {
customer: {
name: string;
company: string;
};
leads: Lead[];
stats: {
total: number;
novo: number;
qualificado: number;
negociacao: number;
convertido: number;
perdido: number;
bySource: Record<string, number>;
conversionRate: number;
thisMonth: number;
lastMonth: number;
};
}
const STATUS_OPTIONS = [
{ value: 'novo', label: 'Novo', color: 'bg-blue-100 text-blue-800' },
{ value: 'qualificado', label: 'Qualificado', color: 'bg-green-100 text-green-800' },
{ value: 'negociacao', label: 'Em Negociação', color: 'bg-yellow-100 text-yellow-800' },
{ value: 'convertido', label: 'Convertido', color: 'bg-purple-100 text-purple-800' },
{ value: 'perdido', label: 'Perdido', color: 'bg-red-100 text-red-800' },
];
export default function SharedLeadsPage() {
const params = useParams();
const token = params?.token as string;
const [data, setData] = useState<SharedData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (token) {
fetchSharedData();
}
}, [token]);
const fetchSharedData = async () => {
try {
const response = await fetch(`/api/crm/share/${token}`);
if (!response.ok) {
throw new Error('Link inválido ou expirado');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err instanceof Error ? err.message : 'Erro ao carregar dados');
} finally {
setLoading(false);
}
};
const getStatusColor = (status: string) => {
return STATUS_OPTIONS.find(s => s.value === status)?.color || 'bg-gray-100 text-gray-800';
};
if (loading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin w-12 h-12 border-4 border-brand-500 border-t-transparent rounded-full mx-auto mb-4"></div>
<p className="text-gray-600">Carregando dados...</p>
</div>
</div>
);
}
if (error || !data) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center max-w-md mx-auto p-6">
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg className="w-8 h-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<h1 className="text-2xl font-bold text-gray-900 mb-2">Link Inválido</h1>
<p className="text-gray-600">{error || 'Não foi possível acessar os dados compartilhados.'}</p>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="bg-white border-b border-gray-200 shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900">
Dashboard de Leads
</h1>
<p className="text-sm text-gray-600 mt-1">
{data.customer.company || data.customer.name}
</p>
</div>
<div className="text-right text-sm text-gray-500">
<p>Atualizado em</p>
<p className="font-medium text-gray-900">{new Date().toLocaleDateString('pt-BR')}</p>
</div>
</div>
</div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Cards de Métricas */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium text-gray-600">Total de Leads</h3>
<UsersIcon className="w-5 h-5 text-brand-500" />
</div>
<p className="text-3xl font-bold text-gray-900">{data.stats.total}</p>
<div className="mt-2 flex items-center text-sm">
{data.stats.thisMonth >= data.stats.lastMonth ? (
<ArrowTrendingUpIcon className="w-4 h-4 text-green-500 mr-1" />
) : (
<ArrowTrendingDownIcon className="w-4 h-4 text-red-500 mr-1" />
)}
<span className={data.stats.thisMonth >= data.stats.lastMonth ? 'text-green-600' : 'text-red-600'}>
{data.stats.thisMonth} este mês
</span>
</div>
</div>
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium text-gray-600">Taxa de Conversão</h3>
<FunnelIcon className="w-5 h-5 text-purple-500" />
</div>
<p className="text-3xl font-bold text-gray-900">
{data.stats.conversionRate.toFixed(1)}%
</p>
<p className="mt-2 text-sm text-gray-600">
{data.stats.convertido} convertidos
</p>
</div>
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium text-gray-600">Novos Leads</h3>
<UserPlusIcon className="w-5 h-5 text-blue-500" />
</div>
<p className="text-3xl font-bold text-gray-900">{data.stats.novo}</p>
<p className="mt-2 text-sm text-gray-600">
Aguardando qualificação
</p>
</div>
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium text-gray-600">Em Negociação</h3>
<TagIcon className="w-5 h-5 text-yellow-500" />
</div>
<p className="text-3xl font-bold text-gray-900">{data.stats.negociacao}</p>
<p className="mt-2 text-sm text-gray-600">
Potencial de conversão
</p>
</div>
</div>
{/* Distribuição por Status */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm mb-8">
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
<ChartBarIcon className="w-5 h-5" />
Distribuição por Status
</h3>
<div className="space-y-3">
{STATUS_OPTIONS.map(status => {
const count = data.stats[status.value as keyof typeof data.stats] as number || 0;
const percentage = data.stats.total > 0 ? (count / data.stats.total) * 100 : 0;
return (
<div key={status.value}>
<div className="flex items-center justify-between mb-1">
<span className="text-sm font-medium text-gray-700">
{status.label}
</span>
<span className="text-sm text-gray-600">
{count} ({percentage.toFixed(1)}%)
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${status.color.split(' ')[0]}`}
style={{ width: `${percentage}%` }}
></div>
</div>
</div>
);
})}
</div>
</div>
{/* Leads por Origem */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm mb-8">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
Leads por Origem
</h3>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{Object.entries(data.stats.bySource).map(([source, count]) => (
<div key={source} className="bg-gray-50 rounded-lg p-4">
<p className="text-sm text-gray-600 capitalize">{source}</p>
<p className="text-2xl font-bold text-gray-900 mt-1">{count}</p>
</div>
))}
</div>
</div>
{/* Lista de Leads */}
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
Todos os Leads ({data.leads.length})
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{data.leads.map((lead) => (
<div
key={lead.id}
className="bg-gray-50 rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow"
>
<div className="flex items-start justify-between mb-3">
<div className="flex-1 min-w-0">
<h4 className="font-semibold text-gray-900 truncate">
{lead.name || 'Sem nome'}
</h4>
<span className={`inline-block px-2 py-0.5 text-xs font-medium rounded-full mt-1 ${getStatusColor(lead.status)}`}>
{STATUS_OPTIONS.find(s => s.value === lead.status)?.label || lead.status}
</span>
</div>
</div>
<div className="space-y-2 text-sm">
{lead.email && (
<div className="flex items-center gap-2 text-gray-600">
<EnvelopeIcon className="w-4 h-4 flex-shrink-0" />
<span className="truncate">{lead.email}</span>
</div>
)}
{lead.phone && (
<div className="flex items-center gap-2 text-gray-600">
<PhoneIcon className="w-4 h-4 flex-shrink-0" />
<span>{lead.phone}</span>
</div>
)}
{lead.tags && lead.tags.length > 0 && (
<div className="flex items-center gap-2 flex-wrap mt-2">
{lead.tags.map((tag, idx) => (
<span
key={idx}
className="inline-flex items-center gap-1 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs rounded"
>
<TagIcon className="w-3 h-3" />
{tag}
</span>
))}
</div>
)}
</div>
<div className="mt-3 pt-3 border-t border-gray-300 text-xs text-gray-500">
Origem: <span className="font-medium">{lead.source || 'manual'}</span>
</div>
</div>
))}
</div>
</div>
{/* Footer */}
<div className="mt-8 text-center text-sm text-gray-500">
<p>Dados atualizados em tempo real</p>
<p className="mt-1">Powered by Aggios CRM</p>
</div>
</div>
</div>
);
}