4b0d84f2a0
- Updated sidebar navigation and page title to accurately reflect the management nature of the funnels page.
365 lines
19 KiB
TypeScript
365 lines
19 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Layers, Plus, Edit, Trash2, ChevronUp, ChevronDown, Loader2, X, Users } from 'lucide-react';
|
|
import { getFunnels, createFunnel, updateFunnel, deleteFunnel, createFunnelStage, updateFunnelStage, deleteFunnelStage, getTeams } from '../services/dataService';
|
|
import { FunnelDef, FunnelStageDef } from '../types';
|
|
|
|
export const Funnels: React.FC = () => {
|
|
const [funnels, setFunnels] = useState<FunnelDef[]>([]);
|
|
const [teams, setTeams] = useState<any[]>([]);
|
|
const [selectedFunnelId, setSelectedFunnelId] = useState<string | null>(null);
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingStage, setEditingStage] = useState<FunnelStageDef | null>(null);
|
|
const [formData, setFormData] = useState({ name: '', color_class: '' });
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
// Funnel creation state
|
|
const [isFunnelModalOpen, setIsFunnelModalOpen] = useState(false);
|
|
const [funnelName, setFunnelName] = useState('');
|
|
|
|
const tenantId = localStorage.getItem('ctms_tenant_id') || '';
|
|
|
|
const PRESET_COLORS = [
|
|
{ label: 'Cinza (Neutro)', value: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border' },
|
|
{ label: 'Azul (Início)', value: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800' },
|
|
{ label: 'Roxo (Meio)', value: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800' },
|
|
{ label: 'Laranja (Atenção)', value: 'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-400 dark:border-orange-800' },
|
|
{ label: 'Verde (Sucesso)', value: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' },
|
|
{ label: 'Vermelho (Perda)', value: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' },
|
|
];
|
|
|
|
const loadData = async () => {
|
|
setLoading(true);
|
|
const [fetchedFunnels, fetchedTeams] = await Promise.all([
|
|
getFunnels(tenantId),
|
|
getTeams(tenantId)
|
|
]);
|
|
setFunnels(fetchedFunnels);
|
|
setTeams(fetchedTeams);
|
|
if (!selectedFunnelId && fetchedFunnels.length > 0) {
|
|
setSelectedFunnelId(fetchedFunnels[0].id);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [tenantId]);
|
|
|
|
const selectedFunnel = funnels.find(f => f.id === selectedFunnelId);
|
|
|
|
// --- Funnel Handlers ---
|
|
const handleCreateFunnel = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSaving(true);
|
|
try {
|
|
const res = await createFunnel({ name: funnelName, tenantId });
|
|
setSelectedFunnelId(res.id);
|
|
setIsFunnelModalOpen(false);
|
|
setFunnelName('');
|
|
loadData();
|
|
} catch (err) {
|
|
alert("Erro ao criar funil.");
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteFunnel = async (id: string) => {
|
|
if (funnels.length <= 1) {
|
|
alert("Você precisa ter pelo menos um funil ativo.");
|
|
return;
|
|
}
|
|
if (confirm('Tem certeza que deseja excluir este funil e todas as suas etapas?')) {
|
|
await deleteFunnel(id);
|
|
setSelectedFunnelId(null);
|
|
loadData();
|
|
}
|
|
};
|
|
|
|
const handleToggleTeam = async (teamId: string) => {
|
|
if (!selectedFunnel) return;
|
|
const currentTeamIds = selectedFunnel.teamIds || [];
|
|
const newTeamIds = currentTeamIds.includes(teamId)
|
|
? currentTeamIds.filter(id => id !== teamId)
|
|
: [...currentTeamIds, teamId];
|
|
|
|
// Optimistic
|
|
const newFunnels = [...funnels];
|
|
const idx = newFunnels.findIndex(f => f.id === selectedFunnel.id);
|
|
newFunnels[idx].teamIds = newTeamIds;
|
|
setFunnels(newFunnels);
|
|
|
|
await updateFunnel(selectedFunnel.id, { teamIds: newTeamIds });
|
|
};
|
|
|
|
// --- Stage Handlers ---
|
|
const handleSaveStage = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!selectedFunnel) return;
|
|
setIsSaving(true);
|
|
try {
|
|
if (editingStage) {
|
|
await updateFunnelStage(editingStage.id, formData);
|
|
} else {
|
|
await createFunnelStage(selectedFunnel.id, { ...formData, order_index: selectedFunnel.stages.length });
|
|
}
|
|
setIsModalOpen(false);
|
|
loadData();
|
|
} catch (err) {
|
|
alert("Erro ao salvar etapa.");
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteStage = async (id: string) => {
|
|
if (confirm('Tem certeza que deseja excluir esta etapa?')) {
|
|
await deleteFunnelStage(id);
|
|
loadData();
|
|
}
|
|
};
|
|
|
|
const handleMoveStage = async (index: number, direction: 'up' | 'down') => {
|
|
if (!selectedFunnel) return;
|
|
const stages = selectedFunnel.stages;
|
|
if (direction === 'up' && index === 0) return;
|
|
if (direction === 'down' && index === stages.length - 1) return;
|
|
|
|
const newIndex = direction === 'up' ? index - 1 : index + 1;
|
|
|
|
const tempOrder = stages[index].order_index;
|
|
stages[index].order_index = stages[newIndex].order_index;
|
|
stages[newIndex].order_index = tempOrder;
|
|
|
|
setFunnels([...funnels]); // trigger re-render
|
|
|
|
await Promise.all([
|
|
updateFunnelStage(stages[index].id, { order_index: stages[index].order_index }),
|
|
updateFunnelStage(stages[newIndex].id, { order_index: stages[newIndex].order_index })
|
|
]);
|
|
};
|
|
|
|
const openStageModal = (stage?: FunnelStageDef) => {
|
|
if (stage) {
|
|
setEditingStage(stage);
|
|
setFormData({ name: stage.name, color_class: stage.color_class });
|
|
} else {
|
|
setEditingStage(null);
|
|
setFormData({ name: '', color_class: PRESET_COLORS[0].value });
|
|
}
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
if (loading && funnels.length === 0) return <div className="p-12 flex justify-center"><Loader2 className="animate-spin text-zinc-400" size={32} /></div>;
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto space-y-6 pb-12 transition-colors duration-300 flex flex-col md:flex-row gap-8">
|
|
|
|
{/* Sidebar: Funnels List */}
|
|
<div className="w-full md:w-64 shrink-0 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Gerenciar Funis</h2>
|
|
<button onClick={() => setIsFunnelModalOpen(true)} className="p-1.5 bg-zinc-100 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted rounded-lg hover:bg-zinc-200 dark:hover:bg-dark-border transition-colors">
|
|
<Plus size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{funnels.map(f => (
|
|
<button
|
|
key={f.id}
|
|
onClick={() => setSelectedFunnelId(f.id)}
|
|
className={`text-left px-4 py-3 rounded-xl text-sm font-medium transition-all ${selectedFunnelId === f.id ? 'bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 shadow-md' : 'bg-white dark:bg-dark-card text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-dark-bg border border-zinc-200 dark:border-dark-border'}`}
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<span>{f.name}</span>
|
|
<span className={`text-[10px] px-1.5 py-0.5 rounded-full ${selectedFunnelId === f.id ? 'bg-white/20 dark:bg-black/20' : 'bg-zinc-100 dark:bg-dark-bg'}`}>{f.stages?.length || 0}</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content: Selected Funnel Details */}
|
|
<div className="flex-1 space-y-6">
|
|
{selectedFunnel ? (
|
|
<>
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-zinc-200 dark:border-dark-border pb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">{selectedFunnel.name}</h1>
|
|
<p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie as etapas deste funil e quais times o utilizam.</p>
|
|
</div>
|
|
<button onClick={() => handleDeleteFunnel(selectedFunnel.id)} className="text-red-500 hover:text-red-700 bg-red-50 dark:bg-red-900/20 px-3 py-2 rounded-lg text-sm font-semibold transition-colors flex items-center gap-2">
|
|
<Trash2 size={16} /> Excluir Funil
|
|
</button>
|
|
</div>
|
|
|
|
{/* Teams Assignment */}
|
|
<div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-bg/50">
|
|
<h3 className="font-bold text-zinc-900 dark:text-zinc-50 flex items-center gap-2">
|
|
<Users className="text-brand-yellow" size={18} /> Times Atribuídos
|
|
</h3>
|
|
</div>
|
|
<div className="p-6">
|
|
{teams.length === 0 ? (
|
|
<p className="text-sm text-zinc-500">Nenhum time cadastrado na organização.</p>
|
|
) : (
|
|
<div className="flex flex-wrap gap-3">
|
|
{teams.map(t => {
|
|
const isAssigned = selectedFunnel.teamIds?.includes(t.id);
|
|
return (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => handleToggleTeam(t.id)}
|
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all ${isAssigned ? 'bg-brand-yellow/10 border-brand-yellow text-zinc-900 dark:text-zinc-100' : 'bg-white dark:bg-dark-input border-zinc-200 dark:border-dark-border text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-700'}`}
|
|
>
|
|
{t.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
<p className="text-xs text-zinc-400 mt-4">Times não atribuídos a um funil específico usarão o Funil Padrão.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stages */}
|
|
<div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden">
|
|
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-bg/50 flex justify-between items-center">
|
|
<h3 className="font-bold text-zinc-900 dark:text-zinc-50 flex items-center gap-2">
|
|
<Layers className="text-brand-yellow" size={18} /> Etapas do Funil
|
|
</h3>
|
|
<button onClick={() => openStageModal()} className="text-sm font-bold text-brand-yellow hover:underline flex items-center gap-1">
|
|
<Plus size={16} /> Nova Etapa
|
|
</button>
|
|
</div>
|
|
|
|
<div className="divide-y divide-zinc-100 dark:divide-dark-border">
|
|
{selectedFunnel.stages?.sort((a,b) => a.order_index - b.order_index).map((f, index) => (
|
|
<div key={f.id} className="p-4 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex flex-col gap-1">
|
|
<button onClick={() => handleMoveStage(index, 'up')} disabled={index === 0} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
|
|
<ChevronUp size={16} />
|
|
</button>
|
|
<button onClick={() => handleMoveStage(index, 'down')} disabled={index === selectedFunnel.stages.length - 1} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
|
|
<ChevronDown size={16} />
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${f.color_class}`}>
|
|
{f.name}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<button onClick={() => openStageModal(f)} className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-dark-input rounded-lg transition-colors">
|
|
<Edit size={16} />
|
|
</button>
|
|
<button onClick={() => handleDeleteStage(f.id)} className="p-2 text-zinc-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors">
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{(!selectedFunnel.stages || selectedFunnel.stages.length === 0) && (
|
|
<div className="p-8 text-center text-zinc-500 dark:text-dark-muted">Nenhuma etapa configurada neste funil.</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="p-12 text-center text-zinc-500">Selecione ou crie um funil.</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Funnel Creation Modal */}
|
|
{isFunnelModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
|
|
<div className="bg-white dark:bg-dark-card rounded-xl shadow-xl w-full max-w-sm overflow-hidden animate-in fade-in zoom-in duration-200">
|
|
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
|
|
<h3 className="font-bold text-zinc-900 dark:text-zinc-50">Novo Funil</h3>
|
|
<button onClick={() => setIsFunnelModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
|
|
</div>
|
|
<form onSubmit={handleCreateFunnel} className="p-6 space-y-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome do Funil</label>
|
|
<input
|
|
type="text"
|
|
value={funnelName}
|
|
onChange={e => setFunnelName(e.target.value)}
|
|
placeholder="Ex: Vendas B2B"
|
|
className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
|
|
<button type="button" onClick={() => setIsFunnelModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
|
|
<button type="submit" disabled={isSaving || !funnelName.trim()} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
|
|
{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Criar Funil'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stage Modal */}
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
|
|
<div className="bg-white dark:bg-dark-card rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
|
|
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
|
|
<h3 className="font-bold text-zinc-900 dark:text-zinc-50">{editingStage ? 'Editar Etapa' : 'Nova Etapa'}</h3>
|
|
<button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
|
|
</div>
|
|
<form onSubmit={handleSaveStage} className="p-6 space-y-4">
|
|
<div>
|
|
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome da Etapa</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={e => setFormData({...formData, name: e.target.value})}
|
|
placeholder="Ex: Qualificação"
|
|
className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-2 block">Cor Visual</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{PRESET_COLORS.map((color, i) => (
|
|
<label key={i} className={`flex items-center gap-2 p-2 border rounded-lg cursor-pointer transition-all ${formData.color_class === color.value ? 'border-brand-yellow bg-yellow-50/50 dark:bg-yellow-900/10' : 'border-zinc-200 dark:border-dark-border hover:bg-zinc-50 dark:hover:bg-dark-input'}`}>
|
|
<input
|
|
type="radio"
|
|
name="color"
|
|
value={color.value}
|
|
checked={formData.color_class === color.value}
|
|
onChange={(e) => setFormData({...formData, color_class: e.target.value})}
|
|
className="sr-only"
|
|
/>
|
|
<span className={`w-3 h-3 rounded-full border ${color.value.split(' ')[0]} ${color.value.split(' ')[2]}`}></span>
|
|
<span className="text-xs font-medium text-zinc-700 dark:text-zinc-300">{color.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
|
|
<button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
|
|
<button type="submit" disabled={isSaving} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
|
|
{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Etapa'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|