feat: versão 1.5 - CRM Beta com leads, funis, campanhas e portal do cliente
This commit is contained in:
Erik Silva
@@ -2,9 +2,14 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { isAuthenticated, clearAuth } from '@/lib/auth';
|
||||
import { isAuthenticated, getUser, clearAuth } from '@/lib/auth';
|
||||
|
||||
export default function AuthGuard({ children }: { children: React.ReactNode }) {
|
||||
interface AuthGuardProps {
|
||||
children: React.ReactNode;
|
||||
allowedTypes?: ('agency_user' | 'customer' | 'superadmin')[];
|
||||
}
|
||||
|
||||
export default function AuthGuard({ children, allowedTypes }: AuthGuardProps) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
@@ -19,16 +24,34 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
|
||||
|
||||
const checkAuth = () => {
|
||||
const isAuth = isAuthenticated();
|
||||
const user = getUser();
|
||||
|
||||
if (!isAuth) {
|
||||
setAuthorized(false);
|
||||
// Evitar redirect loop se já estiver no login
|
||||
if (pathname !== '/login') {
|
||||
router.push('/login?error=unauthorized');
|
||||
}
|
||||
} else {
|
||||
setAuthorized(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Verificar tipo de usuário se especificado
|
||||
if (allowedTypes && user) {
|
||||
const userType = user.user_type;
|
||||
if (!userType || !allowedTypes.includes(userType)) {
|
||||
console.warn(`🚫 Access denied for user type: ${userType}. Allowed: ${allowedTypes}`);
|
||||
setAuthorized(false);
|
||||
|
||||
// Redirecionar para o dashboard apropriado se estiver no lugar errado
|
||||
if (userType === 'customer') {
|
||||
router.push('/cliente/dashboard');
|
||||
} else {
|
||||
router.push('/login?error=forbidden');
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setAuthorized(true);
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
|
||||
226
front-end-agency/components/crm/CRMCustomerFilter.tsx
Normal file
226
front-end-agency/components/crm/CRMCustomerFilter.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, Fragment } from 'react';
|
||||
import { useCRMFilter } from '@/contexts/CRMFilterContext';
|
||||
import { Combobox, Transition } from '@headlessui/react';
|
||||
import {
|
||||
FunnelIcon,
|
||||
XMarkIcon,
|
||||
CheckIcon,
|
||||
ChevronUpDownIcon,
|
||||
MagnifyingGlassIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface Customer {
|
||||
id: string;
|
||||
name: string;
|
||||
company?: string;
|
||||
logo_url?: string;
|
||||
}
|
||||
|
||||
export function CRMCustomerFilter() {
|
||||
const { selectedCustomerId, setSelectedCustomerId, customers, setCustomers, loading, setLoading } = useCRMFilter();
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
console.log('🔍 CRMCustomerFilter render, selectedCustomerId:', selectedCustomerId);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCustomers();
|
||||
}, []);
|
||||
|
||||
const fetchCustomers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/crm/customers', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setCustomers(data.customers || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching customers:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearFilter = () => {
|
||||
setSelectedCustomerId(null);
|
||||
setQuery('');
|
||||
};
|
||||
|
||||
const selectedCustomer = customers.find(c => c.id === selectedCustomerId);
|
||||
|
||||
const filteredCustomers =
|
||||
query === ''
|
||||
? customers
|
||||
: customers.filter((customer: Customer) => {
|
||||
const nameMatch = customer.name.toLowerCase().includes(query.toLowerCase());
|
||||
const companyMatch = customer.company?.toLowerCase().includes(query.toLowerCase());
|
||||
return nameMatch || companyMatch;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="hidden md:flex items-center gap-1 text-gray-400 mr-1">
|
||||
<FunnelIcon className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wider">Filtro CRM</span>
|
||||
</div>
|
||||
|
||||
<Combobox
|
||||
value={selectedCustomerId}
|
||||
onChange={(value) => {
|
||||
console.log('🎯 CRMCustomerFilter: Selecting customer ID:', value);
|
||||
setSelectedCustomerId(value);
|
||||
setQuery('');
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="relative w-full min-w-[320px]">
|
||||
<Combobox.Input
|
||||
className="w-full rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 py-2.5 pl-10 pr-10 text-sm leading-5 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:bg-white dark:focus:bg-gray-800 transition-all duration-200"
|
||||
displayValue={(customerId: string) => {
|
||||
const customer = customers.find(c => c.id === customerId);
|
||||
if (!customer) return '';
|
||||
return customer.company
|
||||
? `${customer.name} (${customer.company})`
|
||||
: customer.name;
|
||||
}}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Pesquisar por nome ou empresa..."
|
||||
/>
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
{selectedCustomer?.logo_url ? (
|
||||
<img
|
||||
src={selectedCustomer.logo_url}
|
||||
className="h-5 w-5 rounded-full object-cover border border-gray-200 dark:border-gray-700"
|
||||
alt=""
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<MagnifyingGlassIcon
|
||||
className="h-4 w-4 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon
|
||||
className="h-5 w-5 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Combobox.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
afterLeave={() => setQuery('')}
|
||||
>
|
||||
<Combobox.Options className="absolute z-50 mt-2 max-h-80 w-full overflow-auto rounded-xl bg-white dark:bg-gray-800 py-1 text-base shadow-2xl ring-1 ring-black/5 dark:ring-white/10 focus:outline-none sm:text-sm border border-gray-100 dark:border-gray-700">
|
||||
<Combobox.Option
|
||||
value={null}
|
||||
className={({ active }) =>
|
||||
`relative cursor-pointer select-none py-3 pl-10 pr-4 ${active
|
||||
? 'bg-brand-50 dark:bg-brand-900/20 text-brand-900 dark:text-brand-100'
|
||||
: 'text-gray-900 dark:text-white'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<>
|
||||
<span className={`block truncate ${selected ? 'font-semibold' : 'font-normal'}`}>
|
||||
Todos os Clientes (Visão Geral)
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-brand-600">
|
||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
|
||||
<div className="px-3 py-2 text-[10px] font-bold text-gray-400 uppercase tracking-widest border-t border-gray-50 dark:border-gray-700/50 mt-1">
|
||||
Clientes Disponíveis
|
||||
</div>
|
||||
|
||||
{filteredCustomers.length === 0 && query !== '' ? (
|
||||
<div className="relative cursor-default select-none py-4 px-4 text-center text-gray-500 dark:text-gray-400">
|
||||
<p className="text-sm">Nenhum cliente encontrado</p>
|
||||
<p className="text-xs mt-1">Tente outro termo de busca</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredCustomers.map((customer: Customer) => (
|
||||
<Combobox.Option
|
||||
key={customer.id}
|
||||
value={customer.id}
|
||||
className={({ active }) =>
|
||||
`relative cursor-pointer select-none py-3 pl-10 pr-4 transition-colors ${active
|
||||
? 'bg-brand-50 dark:bg-brand-900/20 text-brand-900 dark:text-brand-100'
|
||||
: 'text-gray-900 dark:text-white'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<>
|
||||
<div className="flex items-center gap-3">
|
||||
{customer.logo_url ? (
|
||||
<img
|
||||
src={customer.logo_url}
|
||||
alt={customer.name}
|
||||
className="w-8 h-8 rounded-full object-cover border border-gray-200 dark:border-gray-700"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(customer.name)}&background=random`;
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center text-brand-700 dark:text-brand-300 text-xs font-bold">
|
||||
{customer.name.substring(0, 2).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<span className={`block truncate ${selected ? 'font-semibold text-brand-700 dark:text-brand-400' : 'font-medium'}`}>
|
||||
{customer.name}
|
||||
</span>
|
||||
{customer.company && (
|
||||
<span className={`block truncate text-xs ${active ? 'text-brand-600/70 dark:text-brand-400/70' : 'text-gray-500 dark:text-gray-400'}`}>
|
||||
{customer.company}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-brand-600">
|
||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
)}
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</Combobox>
|
||||
|
||||
{selectedCustomerId && (
|
||||
<button
|
||||
onClick={handleClearFilter}
|
||||
className="p-2 hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-400 hover:text-red-600 rounded-xl transition-all duration-200 flex-shrink-0 border border-transparent hover:border-red-100 dark:hover:border-red-900/30"
|
||||
title="Limpar filtro"
|
||||
>
|
||||
<XMarkIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
545
front-end-agency/components/crm/KanbanBoard.tsx
Normal file
545
front-end-agency/components/crm/KanbanBoard.tsx
Normal file
@@ -0,0 +1,545 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useToast } from '@/components/layout/ToastContext';
|
||||
import Modal from '@/components/layout/Modal';
|
||||
import {
|
||||
EllipsisVerticalIcon,
|
||||
PlusIcon,
|
||||
UserIcon,
|
||||
EnvelopeIcon,
|
||||
PhoneIcon,
|
||||
Bars2Icon,
|
||||
TagIcon,
|
||||
ChatBubbleLeftRightIcon,
|
||||
CalendarIcon,
|
||||
ClockIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface Stage {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
order_index: number;
|
||||
}
|
||||
|
||||
interface Lead {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
stage_id: string;
|
||||
funnel_id: string;
|
||||
notes?: string;
|
||||
tags?: string[];
|
||||
status?: string;
|
||||
created_at?: string;
|
||||
}
|
||||
|
||||
interface KanbanBoardProps {
|
||||
funnelId: string;
|
||||
campaignId?: string;
|
||||
}
|
||||
|
||||
export default function KanbanBoard({ funnelId, campaignId }: KanbanBoardProps) {
|
||||
const [stages, setStages] = useState<Stage[]>([]);
|
||||
const [leads, setLeads] = useState<Lead[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [draggedLeadId, setDraggedLeadId] = useState<string | null>(null);
|
||||
const [dropTargetStageId, setDropTargetStageId] = useState<string | null>(null);
|
||||
const [movingLeadId, setMovingLeadId] = useState<string | null>(null);
|
||||
|
||||
// Modal states
|
||||
const [isLeadModalOpen, setIsLeadModalOpen] = useState(false);
|
||||
const [selectedLead, setSelectedLead] = useState<Lead | null>(null);
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
const [targetStageId, setTargetStageId] = useState<string | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
notes: '',
|
||||
tags: ''
|
||||
});
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (funnelId) {
|
||||
fetchData();
|
||||
}
|
||||
}, [funnelId, campaignId]);
|
||||
|
||||
// Refetch quando houver alterações externas (ex: criação de etapa no modal de configurações)
|
||||
useEffect(() => {
|
||||
const handleRefresh = () => {
|
||||
console.log('KanbanBoard: External refresh triggered');
|
||||
fetchData();
|
||||
};
|
||||
window.addEventListener('kanban-refresh', handleRefresh);
|
||||
return () => window.removeEventListener('kanban-refresh', handleRefresh);
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
console.log('KanbanBoard: Fetching data for funnel:', funnelId, 'campaign:', campaignId);
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const headers = { 'Authorization': `Bearer ${token}` };
|
||||
|
||||
const [stagesRes, leadsRes] = await Promise.all([
|
||||
fetch(`/api/crm/funnels/${funnelId}/stages`, { headers }),
|
||||
campaignId
|
||||
? fetch(`/api/crm/lists/${campaignId}/leads`, { headers })
|
||||
: fetch(`/api/crm/leads`, { headers })
|
||||
]);
|
||||
|
||||
if (stagesRes.ok && leadsRes.ok) {
|
||||
const stagesData = await stagesRes.json();
|
||||
const leadsData = await leadsRes.json();
|
||||
|
||||
console.log('KanbanBoard: Received stages:', stagesData.stages?.length);
|
||||
console.log('KanbanBoard: Received leads:', leadsData.leads?.length);
|
||||
|
||||
setStages(stagesData.stages || []);
|
||||
setLeads(leadsData.leads || []);
|
||||
} else {
|
||||
console.error('KanbanBoard: API Error', stagesRes.status, leadsRes.status);
|
||||
toast.error('Erro ao carregar dados do servidor');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching kanban data:', error);
|
||||
toast.error('Erro de conexão ao carregar monitoramento');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const moveLead = async (leadId: string, newStageId: string) => {
|
||||
setMovingLeadId(leadId);
|
||||
// Optimistic update
|
||||
const originalLeads = [...leads];
|
||||
setLeads(prev => prev.map(l => l.id === leadId ? { ...l, stage_id: newStageId } : l));
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/crm/leads/${leadId}/stage`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
},
|
||||
body: JSON.stringify({ funnel_id: funnelId, stage_id: newStageId })
|
||||
});
|
||||
|
||||
console.log('KanbanBoard: Move lead response:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
setLeads(originalLeads);
|
||||
toast.error('Erro ao mover lead');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error moving lead:', error);
|
||||
setLeads(originalLeads);
|
||||
toast.error('Erro ao mover lead');
|
||||
} finally {
|
||||
setMovingLeadId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragStart = (e: React.DragEvent, leadId: string) => {
|
||||
console.log('KanbanBoard: Drag Start', leadId);
|
||||
setDraggedLeadId(leadId);
|
||||
e.dataTransfer.setData('text/plain', leadId);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
|
||||
// Add a slight delay to make the original item semi-transparent
|
||||
const currentTarget = e.currentTarget as HTMLElement;
|
||||
setTimeout(() => {
|
||||
if (currentTarget) currentTarget.style.opacity = '0.4';
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const handleDragEnd = (e: React.DragEvent) => {
|
||||
console.log('KanbanBoard: Drag End');
|
||||
const currentTarget = e.currentTarget as HTMLElement;
|
||||
if (currentTarget) currentTarget.style.opacity = '1';
|
||||
setDraggedLeadId(null);
|
||||
setDropTargetStageId(null);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent, stageId: string) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
if (dropTargetStageId !== stageId) {
|
||||
setDropTargetStageId(stageId);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent, stageId: string) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Use state if dataTransfer is empty (fallback)
|
||||
const leadId = e.dataTransfer.getData('text/plain') || draggedLeadId;
|
||||
|
||||
console.log('KanbanBoard: Drop', { leadId, stageId });
|
||||
setDropTargetStageId(null);
|
||||
|
||||
if (!leadId) {
|
||||
console.error('KanbanBoard: No leadId found');
|
||||
return;
|
||||
}
|
||||
|
||||
const lead = leads.find(l => l.id === leadId);
|
||||
if (lead && lead.stage_id !== stageId) {
|
||||
console.log('KanbanBoard: Moving lead', leadId, 'to stage', stageId);
|
||||
moveLead(leadId, stageId);
|
||||
} else {
|
||||
console.log('KanbanBoard: Lead already in stage or not found', { lead, stageId });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddLead = (stageId: string) => {
|
||||
setTargetStageId(stageId);
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
notes: '',
|
||||
tags: ''
|
||||
});
|
||||
setIsAddModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEditLead = (lead: Lead) => {
|
||||
setSelectedLead(lead);
|
||||
setFormData({
|
||||
name: lead.name || '',
|
||||
email: lead.email || '',
|
||||
phone: lead.phone || '',
|
||||
notes: lead.notes || '',
|
||||
tags: lead.tags?.join(', ') || ''
|
||||
});
|
||||
setIsLeadModalOpen(true);
|
||||
};
|
||||
|
||||
const saveLead = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const isEditing = !!selectedLead;
|
||||
const url = isEditing ? `/api/crm/leads/${selectedLead.id}` : '/api/crm/leads';
|
||||
const method = isEditing ? 'PUT' : 'POST';
|
||||
|
||||
const payload = {
|
||||
...formData,
|
||||
tags: formData.tags.split(',').map(t => t.trim()).filter(t => t),
|
||||
funnel_id: funnelId,
|
||||
stage_id: isEditing ? selectedLead.stage_id : targetStageId,
|
||||
status: isEditing ? selectedLead.status : 'novo'
|
||||
};
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(isEditing ? 'Lead atualizado' : 'Lead criado');
|
||||
setIsAddModalOpen(false);
|
||||
setIsLeadModalOpen(false);
|
||||
fetchData();
|
||||
} else {
|
||||
toast.error('Erro ao salvar lead');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving lead:', error);
|
||||
toast.error('Erro de conexão');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex gap-6 overflow-x-auto pb-4 h-full scrollbar-thin scrollbar-thumb-zinc-300"
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
>
|
||||
{stages.map(stage => (
|
||||
<div
|
||||
key={stage.id}
|
||||
className={`flex-shrink-0 w-80 flex flex-col rounded-2xl transition-all duration-200 h-full border border-zinc-200/50 ${dropTargetStageId === stage.id
|
||||
? 'bg-brand-50/50 ring-2 ring-brand-500/30'
|
||||
: 'bg-white'
|
||||
}`}
|
||||
onDragOver={(e) => handleDragOver(e, stage.id)}
|
||||
onDragEnter={(e) => {
|
||||
e.preventDefault();
|
||||
setDropTargetStageId(stage.id);
|
||||
}}
|
||||
onDrop={(e) => handleDrop(e, stage.id)}
|
||||
>
|
||||
{/* Header da Coluna */}
|
||||
<div className="p-4 flex items-center justify-between sticky top-0 z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-1.5 h-5 rounded-full"
|
||||
style={{ backgroundColor: stage.color }}
|
||||
></div>
|
||||
<div>
|
||||
<h3 className="font-bold text-zinc-900 text-xs uppercase tracking-widest">
|
||||
{stage.name}
|
||||
</h3>
|
||||
<p className="text-[10px] text-zinc-400 font-bold">
|
||||
{leads.filter(l => l.stage_id === stage.id).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="p-1.5 text-zinc-400 hover:text-zinc-600 hover:bg-zinc-50 rounded-lg transition-colors">
|
||||
<EllipsisVerticalIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Lista de Cards */}
|
||||
<div className="px-3 pb-3 flex-1 overflow-y-auto space-y-3 scrollbar-thin scrollbar-thumb-zinc-200">
|
||||
{leads.filter(l => l.stage_id === stage.id).map(lead => (
|
||||
<div
|
||||
key={lead.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, lead.id)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onClick={() => handleEditLead(lead)}
|
||||
className={`bg-white p-4 rounded-xl shadow-sm border border-zinc-200 hover:shadow-md hover:border-brand-300 transition-all duration-200 cursor-grab active:cursor-grabbing group relative select-none ${draggedLeadId === lead.id ? 'ring-2 ring-brand-500 ring-offset-2' : ''
|
||||
} ${movingLeadId === lead.id ? 'opacity-50 grayscale' : ''}`}
|
||||
>
|
||||
{movingLeadId === lead.id && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-white/80 rounded-xl z-10">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-brand-500"></div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-lg bg-zinc-100 flex items-center justify-center">
|
||||
<UserIcon className="w-3.5 h-3.5 text-zinc-500" />
|
||||
</div>
|
||||
<h4 className="font-bold text-zinc-900 text-sm leading-tight">
|
||||
{lead.name || 'Sem nome'}
|
||||
</h4>
|
||||
</div>
|
||||
<Bars2Icon className="w-4 h-4 text-zinc-300 group-hover:text-zinc-400 transition-colors" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
{lead.email && (
|
||||
<div className="flex items-center gap-2 text-[11px] text-zinc-500">
|
||||
<EnvelopeIcon className="h-3 w-3" />
|
||||
<span className="truncate">{lead.email}</span>
|
||||
</div>
|
||||
)}
|
||||
{lead.phone && (
|
||||
<div className="flex items-center gap-2 text-[11px] text-zinc-500">
|
||||
<PhoneIcon className="h-3 w-3" />
|
||||
<span>{lead.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{lead.tags && lead.tags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-1">
|
||||
{lead.tags.slice(0, 2).map((tag, i) => (
|
||||
<span key={i} className="px-1.5 py-0.5 bg-zinc-100 text-zinc-600 text-[9px] font-bold rounded uppercase tracking-wider">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{lead.tags.length > 2 && (
|
||||
<span className="text-[9px] font-bold text-zinc-400">+{lead.tags.length - 2}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Badge de Status (Opcional) */}
|
||||
<div className="mt-4 pt-3 border-t border-zinc-100 flex items-center justify-between">
|
||||
<span className="text-[9px] font-bold text-zinc-400 uppercase tracking-tighter">
|
||||
#{lead.id.slice(0, 6)}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{lead.notes && (
|
||||
<ChatBubbleLeftRightIcon className="h-3 w-3 text-brand-500" />
|
||||
)}
|
||||
<div className="w-5 h-5 rounded-full border border-white bg-brand-100 flex items-center justify-center">
|
||||
<span className="text-[7px] font-bold text-brand-600">AG</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{leads.filter(l => l.stage_id === stage.id).length === 0 && (
|
||||
<div className="py-8 flex flex-col items-center justify-center border-2 border-dashed border-zinc-200 rounded-xl">
|
||||
<span className="text-[9px] font-bold text-zinc-400 uppercase tracking-widest">
|
||||
Vazio
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer da Coluna */}
|
||||
{campaignId && (
|
||||
<div className="p-3 sticky bottom-0">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleAddLead(stage.id);
|
||||
}}
|
||||
className="w-full py-2 text-[10px] font-bold text-zinc-400 dark:text-zinc-500 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-white dark:hover:bg-zinc-800 rounded-xl flex items-center justify-center gap-2 transition-all duration-200 border border-transparent hover:border-zinc-200 dark:hover:border-zinc-700"
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
NOVO LEAD
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Modal de Adicionar/Editar Lead */}
|
||||
<Modal
|
||||
isOpen={isAddModalOpen || isLeadModalOpen}
|
||||
onClose={() => {
|
||||
setIsAddModalOpen(false);
|
||||
setIsLeadModalOpen(false);
|
||||
setSelectedLead(null);
|
||||
}}
|
||||
title={isAddModalOpen ? 'Novo Lead' : 'Detalhes do Lead'}
|
||||
maxWidth="lg"
|
||||
>
|
||||
<form onSubmit={saveLead} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-zinc-500 uppercase ml-1">Nome</label>
|
||||
<div className="relative">
|
||||
<UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white border border-zinc-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500/20 outline-none"
|
||||
placeholder="Nome do lead"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-zinc-500 uppercase ml-1">E-mail</label>
|
||||
<div className="relative">
|
||||
<EnvelopeIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
|
||||
<input
|
||||
type="email"
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white border border-zinc-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500/20 outline-none"
|
||||
placeholder="email@exemplo.com"
|
||||
value={formData.email}
|
||||
onChange={e => setFormData({ ...formData, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-zinc-500 uppercase ml-1">Telefone</label>
|
||||
<div className="relative">
|
||||
<PhoneIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
|
||||
<input
|
||||
type="text"
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white border border-zinc-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500/20 outline-none"
|
||||
placeholder="(00) 00000-0000"
|
||||
value={formData.phone}
|
||||
onChange={e => setFormData({ ...formData, phone: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-zinc-500 uppercase ml-1">Tags (separadas por vírgula)</label>
|
||||
<div className="relative">
|
||||
<TagIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
|
||||
<input
|
||||
type="text"
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white border border-zinc-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500/20 outline-none"
|
||||
placeholder="vendas, urgente, frio"
|
||||
value={formData.tags}
|
||||
onChange={e => setFormData({ ...formData, tags: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-zinc-500 uppercase ml-1">Notas de Acompanhamento</label>
|
||||
<div className="relative">
|
||||
<ChatBubbleLeftRightIcon className="absolute left-3 top-3 h-4 w-4 text-zinc-400" />
|
||||
<textarea
|
||||
rows={4}
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white border border-zinc-200 rounded-xl text-sm focus:ring-2 focus:ring-brand-500/20 outline-none resize-none"
|
||||
placeholder="Descreva o histórico ou próximas ações..."
|
||||
value={formData.notes}
|
||||
onChange={e => setFormData({ ...formData, notes: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedLead && (
|
||||
<div className="p-4 bg-white rounded-xl border border-zinc-100 grid grid-cols-2 gap-4">
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500">
|
||||
<CalendarIcon className="h-4 w-4" />
|
||||
<span>Criado em: {new Date(selectedLead.created_at || '').toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500">
|
||||
<ClockIcon className="h-4 w-4" />
|
||||
<span>ID: {selectedLead.id.slice(0, 8)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4 border-t border-zinc-100 dark:border-zinc-800">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsAddModalOpen(false);
|
||||
setIsLeadModalOpen(false);
|
||||
setSelectedLead(null);
|
||||
}}
|
||||
className="px-6 py-2.5 text-sm font-bold text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 transition-colors"
|
||||
>
|
||||
CANCELAR
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="px-8 py-2.5 bg-brand-600 hover:bg-brand-700 text-white text-sm font-bold rounded-xl shadow-lg shadow-brand-500/20 transition-all disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{isSaving && <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>}
|
||||
{isAddModalOpen ? 'CRIAR LEAD' : 'SALVAR ALTERAÇÕES'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
149
front-end-agency/components/form/SearchableSelect.tsx
Normal file
149
front-end-agency/components/form/SearchableSelect.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect, Fragment } from 'react';
|
||||
import { Combobox, Transition } from '@headlessui/react';
|
||||
import { ChevronUpDownIcon, CheckIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface Option {
|
||||
id: string;
|
||||
name: string;
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
interface SearchableSelectProps {
|
||||
options: Option[];
|
||||
value: string;
|
||||
onChange: (value: string | null) => void;
|
||||
placeholder?: string;
|
||||
emptyText?: string;
|
||||
label?: string;
|
||||
helperText?: string;
|
||||
}
|
||||
|
||||
export default function SearchableSelect({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Selecione...',
|
||||
emptyText = 'Nenhum resultado encontrado',
|
||||
label,
|
||||
helperText,
|
||||
}: SearchableSelectProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
|
||||
const selectedOption = options.find(opt => opt.id === value);
|
||||
|
||||
const filteredOptions =
|
||||
query === ''
|
||||
? options
|
||||
: options.filter((option) =>
|
||||
option.name.toLowerCase().includes(query.toLowerCase()) ||
|
||||
option.subtitle?.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{label && (
|
||||
<label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<Combobox value={value} onChange={onChange}>
|
||||
<div className="relative">
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<MagnifyingGlassIcon className="w-5 h-5 text-zinc-400" />
|
||||
</div>
|
||||
<Combobox.Input
|
||||
className="w-full pl-10 pr-10 py-2.5 border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[var(--brand-color)] focus:border-transparent transition-all"
|
||||
displayValue={() => selectedOption ? `${selectedOption.name}${selectedOption.subtitle ? ` (${selectedOption.subtitle})` : ''}` : ''}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<ChevronUpDownIcon
|
||||
className="h-5 w-5 text-zinc-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Combobox.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
afterLeave={() => setQuery('')}
|
||||
>
|
||||
<Combobox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg bg-white dark:bg-zinc-900 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border border-zinc-200 dark:border-zinc-800">
|
||||
{filteredOptions.length === 0 ? (
|
||||
<div className="relative cursor-default select-none px-4 py-2 text-zinc-500 dark:text-zinc-400 text-sm">
|
||||
{emptyText}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{value && (
|
||||
<Combobox.Option
|
||||
value=""
|
||||
className={({ active }) =>
|
||||
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-400' : 'text-zinc-700 dark:text-zinc-300'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span className={`block truncate ${selected ? 'font-semibold' : 'font-normal'}`}>
|
||||
{placeholder || 'Nenhum'}
|
||||
</span>
|
||||
{selected && (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-brand-600 dark:text-brand-400">
|
||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
)}
|
||||
{filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.id}
|
||||
className={({ active }) =>
|
||||
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-400' : 'text-zinc-700 dark:text-zinc-300'
|
||||
}`
|
||||
}
|
||||
value={option.id}
|
||||
>
|
||||
{({ selected, active }) => (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<span className={`block truncate ${selected ? 'font-semibold' : 'font-normal'}`}>
|
||||
{option.name}
|
||||
</span>
|
||||
{option.subtitle && (
|
||||
<span className="text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{option.subtitle}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{selected && (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-brand-600 dark:text-brand-400">
|
||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</Combobox>
|
||||
{helperText && (
|
||||
<p className="mt-1 text-xs text-zinc-500">
|
||||
{helperText}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -39,14 +39,14 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menu
|
||||
|
||||
{/* Conteúdo das páginas */}
|
||||
<div className="flex-1 overflow-auto pb-20 md:pb-0">
|
||||
<div className="max-w-7xl mx-auto w-full h-full">
|
||||
<div className="w-full h-full">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Mobile Bottom Bar */}
|
||||
<MobileBottomBar />
|
||||
<MobileBottomBar menuItems={menuItems} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,51 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
HomeIcon,
|
||||
RocketLaunchIcon,
|
||||
Squares2X2Icon
|
||||
UserPlusIcon,
|
||||
RectangleStackIcon,
|
||||
UsersIcon,
|
||||
ListBulletIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
import {
|
||||
HomeIcon as HomeIconSolid,
|
||||
RocketLaunchIcon as RocketIconSolid,
|
||||
Squares2X2Icon as GridIconSolid
|
||||
UserPlusIcon as UserPlusIconSolid,
|
||||
RectangleStackIcon as RectangleStackIconSolid,
|
||||
UsersIcon as UsersIconSolid,
|
||||
ListBulletIcon as ListBulletIconSolid
|
||||
} from '@heroicons/react/24/solid';
|
||||
import { MenuItem } from './SidebarRail';
|
||||
|
||||
export const MobileBottomBar: React.FC = () => {
|
||||
interface MobileBottomBarProps {
|
||||
menuItems?: MenuItem[];
|
||||
}
|
||||
|
||||
export const MobileBottomBar: React.FC<MobileBottomBarProps> = ({ menuItems }) => {
|
||||
const pathname = usePathname();
|
||||
const [showMoreMenu, setShowMoreMenu] = useState(false);
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path === '/dashboard') {
|
||||
return pathname === '/dashboard';
|
||||
if (path === '/dashboard' || path === '/cliente/dashboard') {
|
||||
return pathname === path;
|
||||
}
|
||||
return pathname.startsWith(path);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: 'Início',
|
||||
path: '/dashboard',
|
||||
icon: HomeIcon,
|
||||
iconSolid: HomeIconSolid
|
||||
},
|
||||
{
|
||||
label: 'CRM',
|
||||
path: '/crm',
|
||||
icon: RocketLaunchIcon,
|
||||
iconSolid: RocketIconSolid
|
||||
},
|
||||
{
|
||||
label: 'Mais',
|
||||
path: '#',
|
||||
icon: Squares2X2Icon,
|
||||
iconSolid: GridIconSolid,
|
||||
onClick: () => setShowMoreMenu(true)
|
||||
}
|
||||
];
|
||||
// Mapeamento de ícones sólidos para os itens do menu
|
||||
const getSolidIcon = (label: string, defaultIcon: any) => {
|
||||
const map: Record<string, any> = {
|
||||
'Dashboard': HomeIconSolid,
|
||||
'Leads': UserPlusIconSolid,
|
||||
'Listas': RectangleStackIconSolid,
|
||||
'CRM': UsersIconSolid,
|
||||
'Meus Leads': UserPlusIconSolid,
|
||||
'Meu Perfil': UserPlusIconSolid,
|
||||
};
|
||||
return map[label] || defaultIcon;
|
||||
};
|
||||
|
||||
const navItems = menuItems
|
||||
? menuItems.reduce((acc: any[], item) => {
|
||||
if (item.href !== '#') {
|
||||
acc.push({
|
||||
label: item.label,
|
||||
path: item.href,
|
||||
icon: item.icon,
|
||||
iconSolid: getSolidIcon(item.label, item.icon)
|
||||
});
|
||||
} else if (item.subItems) {
|
||||
// Adiciona subitens importantes se o item pai for '#'
|
||||
item.subItems.forEach(sub => {
|
||||
acc.push({
|
||||
label: sub.label,
|
||||
path: sub.href,
|
||||
icon: item.icon, // Usa o ícone do pai
|
||||
iconSolid: getSolidIcon(sub.label, item.icon)
|
||||
});
|
||||
});
|
||||
}
|
||||
return acc;
|
||||
}, []).slice(0, 4) // Limita a 4 itens no mobile
|
||||
: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
path: '/dashboard',
|
||||
icon: HomeIcon,
|
||||
iconSolid: HomeIconSolid
|
||||
},
|
||||
{
|
||||
label: 'Leads',
|
||||
path: '/crm/leads',
|
||||
icon: UserPlusIcon,
|
||||
iconSolid: UserPlusIconSolid
|
||||
},
|
||||
{
|
||||
label: 'Listas',
|
||||
path: '/crm/listas',
|
||||
icon: RectangleStackIcon,
|
||||
iconSolid: RectangleStackIconSolid
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -56,21 +98,6 @@ export const MobileBottomBar: React.FC = () => {
|
||||
const active = isActive(item.path);
|
||||
const Icon = active ? item.iconSolid : item.icon;
|
||||
|
||||
if (item.onClick) {
|
||||
return (
|
||||
<button
|
||||
key={item.label}
|
||||
onClick={item.onClick}
|
||||
className="flex flex-col items-center justify-center min-w-[70px] h-full gap-1"
|
||||
>
|
||||
<Icon className={`w-6 h-6 ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`} />
|
||||
<span className={`text-xs font-medium ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`}>
|
||||
{item.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.label}
|
||||
@@ -86,44 +113,6 @@ export const MobileBottomBar: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* More Menu Modal */}
|
||||
{showMoreMenu && (
|
||||
<div className="md:hidden fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm" onClick={() => setShowMoreMenu(false)}>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-3xl shadow-2xl max-h-[70vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="p-6">
|
||||
{/* Handle bar */}
|
||||
<div className="w-12 h-1.5 bg-gray-300 dark:bg-zinc-700 rounded-full mx-auto mb-6" />
|
||||
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Todos os Módulos
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Link
|
||||
href="/erp"
|
||||
onClick={() => setShowMoreMenu(false)}
|
||||
className="flex flex-col items-center gap-3 p-4 rounded-2xl hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white shadow-lg">
|
||||
<svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white text-center">
|
||||
ERP
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Add more modules here */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
79
front-end-agency/components/layout/Modal.tsx
Normal file
79
front-end-agency/components/layout/Modal.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
|
||||
}
|
||||
|
||||
export default function Modal({ isOpen, onClose, title, children, maxWidth = 'md' }: ModalProps) {
|
||||
const maxWidthClass = {
|
||||
sm: 'sm:max-w-sm',
|
||||
md: 'sm:max-w-md',
|
||||
lg: 'sm:max-w-lg',
|
||||
xl: 'sm:max-w-xl',
|
||||
'2xl': 'sm:max-w-2xl',
|
||||
'3xl': 'sm:max-w-3xl',
|
||||
'4xl': 'sm:max-w-4xl',
|
||||
'5xl': 'sm:max-w-5xl',
|
||||
}[maxWidth];
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={onClose}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-zinc-900/75 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className={`relative transform overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-full ${maxWidthClass} sm:p-6 border border-zinc-200 dark:border-zinc-800`}>
|
||||
<div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md bg-white dark:bg-zinc-900 text-zinc-400 hover:text-zinc-500 focus:outline-none"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="sr-only">Fechar</span>
|
||||
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="sm:flex sm:items-start w-full">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
|
||||
<Dialog.Title as="h3" className="text-xl font-bold leading-6 text-zinc-900 dark:text-white mb-6">
|
||||
{title}
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
}
|
||||
108
front-end-agency/components/layout/Pagination.tsx
Normal file
108
front-end-agency/components/layout/Pagination.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
totalItems: number;
|
||||
itemsPerPage: number;
|
||||
onPageChange: (page: number) => void;
|
||||
}
|
||||
|
||||
export default function Pagination({
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalItems,
|
||||
itemsPerPage,
|
||||
onPageChange
|
||||
}: PaginationProps) {
|
||||
const startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
|
||||
const endItem = Math.min(currentPage * itemsPerPage, totalItems);
|
||||
|
||||
const pages = [];
|
||||
const maxVisiblePages = 5;
|
||||
|
||||
let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
|
||||
let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
|
||||
|
||||
if (endPage - startPage < maxVisiblePages - 1) {
|
||||
startPage = Math.max(1, endPage - maxVisiblePages + 1);
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-6 py-4 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-800/50 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">
|
||||
Mostrando <span className="font-medium">{startItem}</span> a{' '}
|
||||
<span className="font-medium">{endItem}</span> de{' '}
|
||||
<span className="font-medium">{totalItems}</span> resultados
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1 || totalPages === 0}
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700"
|
||||
>
|
||||
<ChevronLeftIcon className="w-4 h-4" />
|
||||
Anterior
|
||||
</button>
|
||||
|
||||
<div className="hidden sm:flex items-center gap-1">
|
||||
{startPage > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => onPageChange(1)}
|
||||
className="px-3 py-1.5 text-xs font-medium rounded-md bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
1
|
||||
</button>
|
||||
{startPage > 2 && (
|
||||
<span className="px-2 text-zinc-400">...</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{pages.map(page => (
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => onPageChange(page)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${page === currentPage
|
||||
? 'text-white shadow-sm'
|
||||
: 'bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700'
|
||||
}`}
|
||||
style={page === currentPage ? { background: 'var(--gradient)' } : {}}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{endPage < totalPages && (
|
||||
<>
|
||||
{endPage < totalPages - 1 && (
|
||||
<span className="px-2 text-zinc-400">...</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onPageChange(totalPages)}
|
||||
className="px-3 py-1.5 text-xs font-medium rounded-md bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
|
||||
>
|
||||
{totalPages}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
className="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700"
|
||||
>
|
||||
Próximo
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -57,7 +57,7 @@ export const SidebarRail: React.FC<SidebarRailProps> = ({
|
||||
// Buscar perfil da agência para atualizar logo e nome
|
||||
const fetchProfile = async () => {
|
||||
const token = getToken();
|
||||
if (!token) return;
|
||||
if (!token || currentUser?.user_type === 'customer') return;
|
||||
|
||||
try {
|
||||
const res = await fetch(API_ENDPOINTS.agencyProfile, {
|
||||
|
||||
@@ -6,12 +6,16 @@ import Link from 'next/link';
|
||||
import { MagnifyingGlassIcon, ChevronRightIcon, HomeIcon, BellIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
|
||||
import CommandPalette from '@/components/ui/CommandPalette';
|
||||
import { getUser } from '@/lib/auth';
|
||||
import { CRMCustomerFilter } from '@/components/crm/CRMCustomerFilter';
|
||||
|
||||
export const TopBar: React.FC = () => {
|
||||
const pathname = usePathname();
|
||||
const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
|
||||
const [user, setUser] = useState<any>(null);
|
||||
|
||||
// Verifica se está em uma rota do CRM
|
||||
const isInCRM = pathname?.startsWith('/crm') || false;
|
||||
|
||||
useEffect(() => {
|
||||
const userData = getUser();
|
||||
setUser(userData);
|
||||
@@ -19,8 +23,11 @@ export const TopBar: React.FC = () => {
|
||||
|
||||
const generateBreadcrumbs = () => {
|
||||
const paths = pathname?.split('/').filter(Boolean) || [];
|
||||
const isCustomer = pathname?.startsWith('/cliente');
|
||||
const homePath = isCustomer ? '/cliente/dashboard' : '/dashboard';
|
||||
|
||||
const breadcrumbs: Array<{ name: string; href: string; icon?: React.ComponentType<{ className?: string }> }> = [
|
||||
{ name: 'Home', href: '/dashboard', icon: HomeIcon }
|
||||
{ name: 'Home', href: homePath, icon: HomeIcon }
|
||||
];
|
||||
let currentPath = '';
|
||||
paths.forEach((path, index) => {
|
||||
@@ -34,9 +41,12 @@ export const TopBar: React.FC = () => {
|
||||
'financeiro': 'Financeiro',
|
||||
'configuracoes': 'Configurações',
|
||||
'novo': 'Novo',
|
||||
'cliente': 'Portal',
|
||||
'leads': 'Leads',
|
||||
'listas': 'Listas',
|
||||
};
|
||||
|
||||
if (path !== 'dashboard') { // Evita duplicar Home/Dashboard se a rota for /dashboard
|
||||
if (path !== 'dashboard' && !(isCustomer && path === 'cliente')) { // Evita duplicar Home/Dashboard ou Portal
|
||||
breadcrumbs.push({
|
||||
name: nameMap[path] || path.charAt(0).toUpperCase() + path.slice(1),
|
||||
href: currentPath,
|
||||
@@ -48,12 +58,14 @@ export const TopBar: React.FC = () => {
|
||||
};
|
||||
|
||||
const breadcrumbs = generateBreadcrumbs();
|
||||
const isCustomer = pathname?.startsWith('/cliente');
|
||||
const homePath = isCustomer ? '/cliente/dashboard' : '/dashboard';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 px-4 md:px-6 py-3 flex items-center justify-between transition-colors">
|
||||
{/* Logo Mobile */}
|
||||
<Link href="/dashboard" className="md:hidden flex items-center gap-2">
|
||||
<Link href={homePath} className="md:hidden flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold shrink-0 shadow-md overflow-hidden bg-brand-500">
|
||||
{user?.logoUrl ? (
|
||||
<img src={user.logoUrl} alt={user?.company || 'Logo'} className="w-full h-full object-cover" />
|
||||
@@ -93,6 +105,13 @@ export const TopBar: React.FC = () => {
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* CRM Customer Filter - aparece apenas em rotas CRM */}
|
||||
{isInCRM && (
|
||||
<div className="hidden lg:flex">
|
||||
<CRMCustomerFilter />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search Bar Trigger */}
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
<button
|
||||
@@ -111,7 +130,7 @@ export const TopBar: React.FC = () => {
|
||||
<span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-zinc-900"></span>
|
||||
</button>
|
||||
<Link
|
||||
href="/configuracoes"
|
||||
href={isCustomer ? "/cliente/perfil" : "/configuracoes"}
|
||||
className="flex p-2 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
>
|
||||
<Cog6ToothIcon className="w-5 h-5" />
|
||||
|
||||
570
front-end-agency/components/team/TeamManagement.tsx
Normal file
570
front-end-agency/components/team/TeamManagement.tsx
Normal file
@@ -0,0 +1,570 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, Dialog, Input } from '@/components/ui';
|
||||
import { Toaster, toast } from 'react-hot-toast';
|
||||
import {
|
||||
UserPlusIcon,
|
||||
TrashIcon,
|
||||
XMarkIcon,
|
||||
CheckCircleIcon,
|
||||
ExclamationTriangleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface Collaborator {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
agency_role: string;
|
||||
created_at: string;
|
||||
collaborator_created_at?: string;
|
||||
}
|
||||
|
||||
interface InviteRequest {
|
||||
email: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default function TeamManagement() {
|
||||
const [collaborators, setCollaborators] = useState<Collaborator[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showInviteDialog, setShowInviteDialog] = useState(false);
|
||||
const [showDirectCreateDialog, setShowDirectCreateDialog] = useState(false);
|
||||
const [showActionMenu, setShowActionMenu] = useState(false);
|
||||
const [inviteForm, setInviteForm] = useState<InviteRequest>({
|
||||
email: '',
|
||||
name: '',
|
||||
});
|
||||
const [inviting, setInviting] = useState(false);
|
||||
const [tempPassword, setTempPassword] = useState('');
|
||||
const [showPasswordDialog, setShowPasswordDialog] = useState(false);
|
||||
const [passwordDialogMode, setPasswordDialogMode] = useState<'invite' | 'direct'>('invite');
|
||||
const [removingId, setRemovingId] = useState<string | null>(null);
|
||||
const [showRemoveDialog, setShowRemoveDialog] = useState(false);
|
||||
const [isOwner, setIsOwner] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
// Buscar colaboradores
|
||||
const fetchCollaborators = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/agency/collaborators', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 403) {
|
||||
// Usuário não é owner
|
||||
setIsOwner(false);
|
||||
setErrorMessage('Apenas o dono da agência pode gerenciar colaboradores');
|
||||
setCollaborators([]);
|
||||
return;
|
||||
}
|
||||
throw new Error('Erro ao carregar colaboradores');
|
||||
}
|
||||
|
||||
setIsOwner(true);
|
||||
setErrorMessage(null);
|
||||
const data = await response.json();
|
||||
setCollaborators(data || []);
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar colaboradores:', error);
|
||||
setErrorMessage('Erro ao carregar colaboradores');
|
||||
toast.error('Erro ao carregar colaboradores');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollaborators();
|
||||
}, []);
|
||||
|
||||
// Fechar menu de ações ao clicar fora
|
||||
useEffect(() => {
|
||||
const handleClickOutside = () => setShowActionMenu(false);
|
||||
if (showActionMenu) {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}
|
||||
}, [showActionMenu]);
|
||||
|
||||
// Convidar colaborador
|
||||
const handleInvite = async () => {
|
||||
if (!inviteForm.email || !inviteForm.name) {
|
||||
toast.error('Preencha todos os campos');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setInviting(true);
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/agency/collaborators/invite', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify(inviteForm),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.text();
|
||||
throw new Error(error || 'Erro ao convidar colaborador');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setTempPassword(data.temporary_password);
|
||||
setPasswordDialogMode('invite');
|
||||
setShowPasswordDialog(true);
|
||||
setShowInviteDialog(false);
|
||||
setInviteForm({ email: '', name: '' });
|
||||
|
||||
// Recarregar colaboradores
|
||||
await fetchCollaborators();
|
||||
} catch (error) {
|
||||
console.error('Erro ao convidar:', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Erro ao convidar colaborador');
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Criar colaborador diretamente
|
||||
const handleDirectCreate = async () => {
|
||||
if (!inviteForm.email || !inviteForm.name) {
|
||||
toast.error('Preencha todos os campos');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setInviting(true);
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch('/api/agency/collaborators/invite', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify(inviteForm),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.text();
|
||||
throw new Error(error || 'Erro ao criar colaborador');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setTempPassword(data.temporary_password);
|
||||
setPasswordDialogMode('direct');
|
||||
setShowPasswordDialog(true);
|
||||
setShowDirectCreateDialog(false);
|
||||
setInviteForm({ email: '', name: '' });
|
||||
|
||||
// Recarregar colaboradores
|
||||
await fetchCollaborators();
|
||||
} catch (error) {
|
||||
console.error('Erro ao criar:', error);
|
||||
toast.error(error instanceof Error ? error.message : 'Erro ao criar colaborador');
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Remover colaborador
|
||||
const handleRemove = async () => {
|
||||
if (!removingId) return;
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await fetch(`/api/agency/collaborators/remove?id=${removingId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro ao remover colaborador');
|
||||
}
|
||||
|
||||
toast.success('Colaborador removido com sucesso');
|
||||
setShowRemoveDialog(false);
|
||||
setRemovingId(null);
|
||||
await fetchCollaborators();
|
||||
} catch (error) {
|
||||
console.error('Erro ao remover:', error);
|
||||
toast.error('Erro ao remover colaborador');
|
||||
}
|
||||
};
|
||||
|
||||
const copyPassword = () => {
|
||||
navigator.clipboard.writeText(tempPassword);
|
||||
toast.success('Senha copiada para a área de transferência');
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
try {
|
||||
return new Date(dateString).toLocaleDateString('pt-BR');
|
||||
} catch {
|
||||
return '-';
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="h-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
|
||||
<div className="h-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster position="top-right" />
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Mensagem de Erro se não for owner */}
|
||||
{!isOwner && errorMessage && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex gap-3">
|
||||
<ExclamationTriangleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-800 dark:text-red-300">
|
||||
{errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cabeçalho */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Gerenciamento de Equipe
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Adicione e gerencie colaboradores com acesso ao sistema
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => setShowActionMenu(!showActionMenu)}
|
||||
className="flex items-center gap-2"
|
||||
disabled={!isOwner}
|
||||
>
|
||||
<UserPlusIcon className="w-4 h-4" />
|
||||
Adicionar Colaborador
|
||||
</Button>
|
||||
|
||||
{showActionMenu && (
|
||||
<div className="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowInviteDialog(true);
|
||||
setShowActionMenu(false);
|
||||
}}
|
||||
className="w-full text-left px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors border-b border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<p className="font-medium text-gray-900 dark:text-white text-sm">
|
||||
Convidar por Email
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
|
||||
Enviar convite por email com senha temporária
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDirectCreateDialog(true);
|
||||
setShowActionMenu(false);
|
||||
}}
|
||||
className="w-full text-left px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<p className="font-medium text-gray-900 dark:text-white text-sm">
|
||||
Criar sem Convite
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
|
||||
Criar colaborador e copiar senha manualmente
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista de Colaboradores */}
|
||||
{collaborators.length === 0 ? (
|
||||
<div className="text-center py-12 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-dashed border-gray-300 dark:border-gray-600">
|
||||
<UserPlusIcon className="w-12 h-12 mx-auto text-gray-400 mb-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Nenhum colaborador adicionado ainda
|
||||
</p>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setShowInviteDialog(true)}
|
||||
>
|
||||
Convidar o Primeiro Colaborador
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900 dark:text-white">
|
||||
Nome
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900 dark:text-white">
|
||||
Email
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900 dark:text-white">
|
||||
Função
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900 dark:text-white">
|
||||
Data de Adição
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">
|
||||
Ações
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{collaborators.map((collaborator) => (
|
||||
<tr
|
||||
key={collaborator.id}
|
||||
className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<td className="px-6 py-4 text-sm text-gray-900 dark:text-white font-medium">
|
||||
{collaborator.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
{collaborator.email}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${collaborator.agency_role === 'owner'
|
||||
? 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
|
||||
: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
|
||||
}`}>
|
||||
{collaborator.agency_role === 'owner' ? 'Dono' : 'Colaborador'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
|
||||
{formatDate(collaborator.collaborator_created_at || collaborator.created_at)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
{collaborator.agency_role !== 'owner' && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setRemovingId(collaborator.id);
|
||||
setShowRemoveDialog(true);
|
||||
}}
|
||||
className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 transition-colors"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Informação sobre Permissões */}
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<div className="flex gap-3">
|
||||
<ExclamationTriangleIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm text-blue-800 dark:text-blue-300">
|
||||
<p className="font-medium mb-1">Permissões dos Colaboradores:</p>
|
||||
<ul className="list-disc list-inside space-y-0.5">
|
||||
<li>Podem visualizar leads e clientes</li>
|
||||
<li>Não podem editar ou remover dados</li>
|
||||
<li>Permissões gerenciadas exclusivamente pelo dono</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dialog: Convidar Colaborador */}
|
||||
<Dialog
|
||||
isOpen={showInviteDialog}
|
||||
onClose={() => setShowInviteDialog(false)}
|
||||
title="Convidar Colaborador"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label="Nome"
|
||||
placeholder="Nome completo do colaborador"
|
||||
value={inviteForm.name}
|
||||
onChange={(e) => setInviteForm({ ...inviteForm, name: e.target.value })}
|
||||
disabled={inviting}
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="email@exemplo.com"
|
||||
value={inviteForm.email}
|
||||
onChange={(e) => setInviteForm({ ...inviteForm, email: e.target.value })}
|
||||
disabled={inviting}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setShowInviteDialog(false)}
|
||||
disabled={inviting}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleInvite}
|
||||
disabled={inviting || !inviteForm.email || !inviteForm.name}
|
||||
>
|
||||
{inviting ? 'Convidando...' : 'Convidar'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog: Senha Temporária */}
|
||||
<Dialog
|
||||
isOpen={showPasswordDialog}
|
||||
onClose={() => setShowPasswordDialog(false)}
|
||||
title={passwordDialogMode === 'invite' ? 'Colaborador Convidado com Sucesso' : 'Colaborador Criado com Sucesso'}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 flex gap-3">
|
||||
<CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" />
|
||||
<p className="text-sm text-green-800 dark:text-green-300">
|
||||
{passwordDialogMode === 'invite'
|
||||
? 'Colaborador criado com sucesso! Um email com a senha temporária foi enviado.'
|
||||
: 'Colaborador criado com sucesso! Copie a senha abaixo e compartilhe com segurança.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-900 dark:text-white">
|
||||
Senha Temporária
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={tempPassword}
|
||||
readOnly
|
||||
className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white font-mono text-sm"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={copyPassword}
|
||||
className="px-4"
|
||||
>
|
||||
Copiar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 text-sm text-yellow-800 dark:text-yellow-300">
|
||||
⚠️ {passwordDialogMode === 'invite'
|
||||
? 'O colaborador deverá alterar a senha no primeiro acesso.'
|
||||
: 'Compartilhe esta senha com segurança. O colaborador deverá alterá-la no primeiro acesso.'}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-4">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => setShowPasswordDialog(false)}
|
||||
>
|
||||
OK
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog: Criar Colaborador Direto */}
|
||||
<Dialog
|
||||
isOpen={showDirectCreateDialog}
|
||||
onClose={() => setShowDirectCreateDialog(false)}
|
||||
title="Criar Colaborador (Sem Email)"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 flex gap-3">
|
||||
<ExclamationTriangleIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-blue-800 dark:text-blue-300">
|
||||
O colaborador será criado imediatamente. Você receberá a senha para compartilhar manualmente.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Nome"
|
||||
placeholder="Nome completo do colaborador"
|
||||
value={inviteForm.name}
|
||||
onChange={(e) => setInviteForm({ ...inviteForm, name: e.target.value })}
|
||||
disabled={inviting}
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="email@exemplo.com"
|
||||
value={inviteForm.email}
|
||||
onChange={(e) => setInviteForm({ ...inviteForm, email: e.target.value })}
|
||||
disabled={inviting}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setShowDirectCreateDialog(false)}
|
||||
disabled={inviting}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleDirectCreate}
|
||||
disabled={inviting || !inviteForm.email || !inviteForm.name}
|
||||
>
|
||||
{inviting ? 'Criando...' : 'Criar Colaborador'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog: Remover Colaborador */}
|
||||
<Dialog
|
||||
isOpen={showRemoveDialog}
|
||||
onClose={() => setShowRemoveDialog(false)}
|
||||
title="Remover Colaborador"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 flex gap-3">
|
||||
<ExclamationTriangleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0" />
|
||||
<p className="text-sm text-red-800 dark:text-red-300">
|
||||
Tem certeza que deseja remover este colaborador? Ele perderá o acesso ao sistema imediatamente.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end pt-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setShowRemoveDialog(false)}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleRemove}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from 'react';
|
||||
import { Combobox, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { getUser } from '@/lib/auth';
|
||||
import {
|
||||
HomeIcon,
|
||||
RocketLaunchIcon,
|
||||
@@ -16,7 +17,8 @@ import {
|
||||
ShareIcon,
|
||||
Cog6ToothIcon,
|
||||
PlusIcon,
|
||||
ArrowRightIcon
|
||||
ArrowRightIcon,
|
||||
UserCircleIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface CommandPaletteProps {
|
||||
@@ -76,25 +78,37 @@ export default function CommandPalette({ isOpen, setIsOpen }: CommandPaletteProp
|
||||
}, [setIsOpen]);
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Visão Geral', href: '/dashboard', icon: HomeIcon, category: 'Navegação', solution: 'dashboard' },
|
||||
{ name: 'CRM', href: '/crm', icon: RocketLaunchIcon, category: 'Navegação', solution: 'crm' },
|
||||
{ name: 'ERP', href: '/erp', icon: ChartBarIcon, category: 'Navegação', solution: 'erp' },
|
||||
{ name: 'Projetos', href: '/projetos', icon: BriefcaseIcon, category: 'Navegação', solution: 'projetos' },
|
||||
{ name: 'Helpdesk', href: '/helpdesk', icon: LifebuoyIcon, category: 'Navegação', solution: 'helpdesk' },
|
||||
{ name: 'Pagamentos', href: '/pagamentos', icon: CreditCardIcon, category: 'Navegação', solution: 'pagamentos' },
|
||||
{ name: 'Contratos', href: '/contratos', icon: DocumentTextIcon, category: 'Navegação', solution: 'contratos' },
|
||||
{ name: 'Documentos', href: '/documentos', icon: FolderIcon, category: 'Navegação', solution: 'documentos' },
|
||||
{ name: 'Redes Sociais', href: '/social', icon: ShareIcon, category: 'Navegação', solution: 'social' },
|
||||
{ name: 'Configurações', href: '/configuracoes', icon: Cog6ToothIcon, category: 'Navegação', solution: 'dashboard' },
|
||||
// Ações
|
||||
{ name: 'Novo Projeto', href: '/projetos/novo', icon: PlusIcon, category: 'Ações', solution: 'projetos' },
|
||||
{ name: 'Novo Chamado', href: '/helpdesk/novo', icon: PlusIcon, category: 'Ações', solution: 'helpdesk' },
|
||||
{ name: 'Novo Contrato', href: '/contratos/novo', icon: PlusIcon, category: 'Ações', solution: 'contratos' },
|
||||
// Agência
|
||||
{ name: 'Visão Geral', href: '/dashboard', icon: HomeIcon, category: 'Navegação', solution: 'dashboard', allowedTypes: ['agency_user'] },
|
||||
{ name: 'CRM', href: '/crm', icon: RocketLaunchIcon, category: 'Navegação', solution: 'crm', allowedTypes: ['agency_user'] },
|
||||
{ name: 'ERP', href: '/erp', icon: ChartBarIcon, category: 'Navegação', solution: 'erp', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Projetos', href: '/projetos', icon: BriefcaseIcon, category: 'Navegação', solution: 'projetos', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Helpdesk', href: '/helpdesk', icon: LifebuoyIcon, category: 'Navegação', solution: 'helpdesk', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Pagamentos', href: '/pagamentos', icon: CreditCardIcon, category: 'Navegação', solution: 'pagamentos', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Contratos', href: '/contratos', icon: DocumentTextIcon, category: 'Navegação', solution: 'contratos', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Documentos', href: '/documentos', icon: FolderIcon, category: 'Navegação', solution: 'documentos', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Redes Sociais', href: '/social', icon: ShareIcon, category: 'Navegação', solution: 'social', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Configurações', href: '/configuracoes', icon: Cog6ToothIcon, category: 'Navegação', solution: 'dashboard', allowedTypes: ['agency_user'] },
|
||||
|
||||
// Cliente
|
||||
{ name: 'Dashboard', href: '/cliente/dashboard', icon: HomeIcon, category: 'Navegação', solution: 'dashboard', allowedTypes: ['customer'] },
|
||||
{ name: 'Meus Leads', href: '/cliente/leads', icon: RocketLaunchIcon, category: 'Navegação', solution: 'crm', allowedTypes: ['customer'] },
|
||||
{ name: 'Minhas Listas', href: '/cliente/listas', icon: FolderIcon, category: 'Navegação', solution: 'crm', allowedTypes: ['customer'] },
|
||||
{ name: 'Meu Perfil', href: '/cliente/perfil', icon: UserCircleIcon, category: 'Navegação', solution: 'dashboard', allowedTypes: ['customer'] },
|
||||
|
||||
// Ações Agência
|
||||
{ name: 'Novo Projeto', href: '/projetos/novo', icon: PlusIcon, category: 'Ações', solution: 'projetos', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Novo Chamado', href: '/helpdesk/novo', icon: PlusIcon, category: 'Ações', solution: 'helpdesk', allowedTypes: ['agency_user'] },
|
||||
{ name: 'Novo Contrato', href: '/contratos/novo', icon: PlusIcon, category: 'Ações', solution: 'contratos', allowedTypes: ['agency_user'] },
|
||||
];
|
||||
|
||||
// Filtrar por soluções disponíveis
|
||||
// Filtrar por soluções disponíveis e tipo de usuário
|
||||
const user = getUser();
|
||||
const userType = user?.user_type || 'agency_user';
|
||||
|
||||
const allowedNavigation = navigation.filter(item =>
|
||||
availableSolutions.includes(item.solution)
|
||||
availableSolutions.includes(item.solution) &&
|
||||
(!item.allowedTypes || item.allowedTypes.includes(userType))
|
||||
);
|
||||
|
||||
const filteredItems =
|
||||
|
||||
Reference in New Issue
Block a user