feat: implement relational lead origins with team assignments
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m51s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m51s
- Dropped simple origins table in favor of origin_groups and origin_items to match the Funnels architecture. - Added origin_group_id to teams table to assign specific origins to specific teams. - Updated /admin/origins page to support creating origin groups, adding origin items to them, and assigning teams to groups. - Updated Dashboard and UserDetail pages to dynamically load the exact origin items belonging to the active team/user.
This commit is contained in:
Cauê Faleiros
301
pages/Origins.tsx
Normal file
301
pages/Origins.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Target, Plus, Edit, Trash2, Loader2, X, Users } from 'lucide-react';
|
||||
import { getOrigins, createOriginGroup, updateOriginGroup, deleteOriginGroup, createOriginItem, updateOriginItem, deleteOriginItem, getTeams } from '../services/dataService';
|
||||
import { OriginGroupDef, OriginItemDef } from '../types';
|
||||
|
||||
export const Origins: React.FC = () => {
|
||||
const [originGroups, setOriginGroups] = useState<OriginGroupDef[]>([]);
|
||||
const [teams, setTeams] = useState<any[]>([]);
|
||||
const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState<OriginItemDef | null>(null);
|
||||
const [formData, setFormData] = useState({ name: '' });
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Group creation state
|
||||
const [isGroupModalOpen, setIsGroupModalOpen] = useState(false);
|
||||
const [groupName, setGroupName] = useState('');
|
||||
|
||||
const tenantId = localStorage.getItem('ctms_tenant_id') || '';
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
const [fetchedGroups, fetchedTeams] = await Promise.all([
|
||||
getOrigins(tenantId),
|
||||
getTeams(tenantId)
|
||||
]);
|
||||
setOriginGroups(fetchedGroups);
|
||||
setTeams(fetchedTeams);
|
||||
if (!selectedGroupId && fetchedGroups.length > 0) {
|
||||
setSelectedGroupId(fetchedGroups[0].id);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [tenantId]);
|
||||
|
||||
const selectedGroup = originGroups.find(g => g.id === selectedGroupId);
|
||||
|
||||
// --- Group Handlers ---
|
||||
const handleCreateGroup = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const res = await createOriginGroup({ name: groupName, tenantId });
|
||||
setSelectedGroupId(res.id);
|
||||
setIsGroupModalOpen(false);
|
||||
setGroupName('');
|
||||
loadData();
|
||||
} catch (err) {
|
||||
alert("Erro ao criar grupo de origens.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteGroup = async (id: string) => {
|
||||
if (originGroups.length <= 1) {
|
||||
alert("Você precisa ter pelo menos um grupo de origens ativo.");
|
||||
return;
|
||||
}
|
||||
if (confirm('Tem certeza que deseja excluir este grupo e todas as suas origens?')) {
|
||||
await deleteOriginGroup(id);
|
||||
setSelectedGroupId(null);
|
||||
loadData();
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleTeam = async (teamId: string) => {
|
||||
if (!selectedGroup) return;
|
||||
const currentTeamIds = selectedGroup.teamIds || [];
|
||||
const newTeamIds = currentTeamIds.includes(teamId)
|
||||
? currentTeamIds.filter(id => id !== teamId)
|
||||
: [...currentTeamIds, teamId];
|
||||
|
||||
// Optimistic
|
||||
const newGroups = [...originGroups];
|
||||
const idx = newGroups.findIndex(g => g.id === selectedGroup.id);
|
||||
newGroups[idx].teamIds = newTeamIds;
|
||||
setOriginGroups(newGroups);
|
||||
|
||||
await updateOriginGroup(selectedGroup.id, { teamIds: newTeamIds });
|
||||
};
|
||||
|
||||
// --- Item Handlers ---
|
||||
const handleSaveItem = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedGroup) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
if (editingItem) {
|
||||
await updateOriginItem(editingItem.id, formData);
|
||||
} else {
|
||||
await createOriginItem(selectedGroup.id, formData);
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
loadData();
|
||||
} catch (err: any) {
|
||||
alert(err.message || "Erro ao salvar origem.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteItem = async (id: string) => {
|
||||
if (confirm('Tem certeza que deseja excluir esta origem?')) {
|
||||
await deleteOriginItem(id);
|
||||
loadData();
|
||||
}
|
||||
};
|
||||
|
||||
const openItemModal = (item?: OriginItemDef) => {
|
||||
if (item) {
|
||||
setEditingItem(item);
|
||||
setFormData({ name: item.name });
|
||||
} else {
|
||||
setEditingItem(null);
|
||||
setFormData({ name: '' });
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
if (loading && originGroups.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: Groups 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">Configurações</h2>
|
||||
<button onClick={() => setIsGroupModalOpen(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">
|
||||
{originGroups.map(g => (
|
||||
<button
|
||||
key={g.id}
|
||||
onClick={() => setSelectedGroupId(g.id)}
|
||||
className={`text-left px-4 py-3 rounded-xl text-sm font-medium transition-all ${selectedGroupId === g.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 className="truncate pr-2">{g.name}</span>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded-full shrink-0 ${selectedGroupId === g.id ? 'bg-white/20 dark:bg-black/20' : 'bg-zinc-100 dark:bg-dark-bg'}`}>{g.items?.length || 0}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content: Selected Group Details */}
|
||||
<div className="flex-1 space-y-6">
|
||||
{selectedGroup ? (
|
||||
<>
|
||||
<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">{selectedGroup.name}</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie as origens deste grupo e quais times as utilizam.</p>
|
||||
</div>
|
||||
<button onClick={() => handleDeleteGroup(selectedGroup.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 Grupo
|
||||
</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 = selectedGroup.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 grupo específico usarão o grupo padrão.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Origin Items */}
|
||||
<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">
|
||||
<Target className="text-brand-yellow" size={18} /> Fontes de Tráfego
|
||||
</h3>
|
||||
<button onClick={() => openItemModal()} className="text-sm font-bold text-brand-yellow hover:underline flex items-center gap-1">
|
||||
<Plus size={16} /> Nova Origem
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{selectedGroup.items?.map((o) => (
|
||||
<div key={o.id} className="p-4 px-6 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
|
||||
<div className="font-medium text-zinc-800 dark:text-zinc-200">{o.name}</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => openItemModal(o)} 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={() => handleDeleteItem(o.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>
|
||||
))}
|
||||
{(!selectedGroup.items || selectedGroup.items.length === 0) && (
|
||||
<div className="p-8 text-center text-zinc-500 dark:text-dark-muted">Nenhuma origem configurada neste grupo.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="p-12 text-center text-zinc-500">Selecione ou crie um grupo de origens.</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Group Creation Modal */}
|
||||
{isGroupModalOpen && (
|
||||
<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 Grupo</h3>
|
||||
<button onClick={() => setIsGroupModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
|
||||
</div>
|
||||
<form onSubmit={handleCreateGroup} 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 Grupo</label>
|
||||
<input
|
||||
type="text"
|
||||
value={groupName}
|
||||
onChange={e => setGroupName(e.target.value)}
|
||||
placeholder="Ex: Origens 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={() => setIsGroupModalOpen(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 || !groupName.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 Grupo'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Item 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">{editingItem ? 'Editar Origem' : 'Nova Origem'}</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={handleSaveItem} 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 Origem</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({...formData, name: e.target.value})}
|
||||
placeholder="Ex: Facebook Ads"
|
||||
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={() => 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 Origem'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user