feat: comprehensive dashboard refactor and performance stabilization
All checks were successful
Build and Deploy / build-and-push (push) Successful in 3m33s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 3m33s
This commit is contained in:
Cauê Faleiros
209
src/App.tsx
Normal file
209
src/App.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
HashRouter as Router,
|
||||
Routes,
|
||||
Route,
|
||||
Navigate,
|
||||
useLocation,
|
||||
} from "react-router-dom";
|
||||
import { Layout } from "./components/Layout";
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
import { UserDetail } from "./pages/UserDetail";
|
||||
import { AttendanceDetail } from "./pages/AttendanceDetail";
|
||||
import { SuperAdmin } from "./pages/SuperAdmin";
|
||||
import { ApiKeys } from "./pages/ApiKeys";
|
||||
import { TeamManagement } from "./pages/TeamManagement";
|
||||
import { Teams } from "./pages/Teams";
|
||||
import { Funnels } from "./pages/Funnels";
|
||||
import { Origins } from "./pages/Origins";
|
||||
import { Login } from "./pages/Login";
|
||||
import { ForgotPassword } from "./pages/ForgotPassword";
|
||||
import { ResetPassword } from "./pages/ResetPassword";
|
||||
import { SetupAccount } from "./pages/SetupAccount";
|
||||
import { UserProfile } from "./pages/UserProfile";
|
||||
import { Ranking } from "./pages/Ranking";
|
||||
import { getUserById, logout } from "./services/dataService";
|
||||
import { User } from "./types";
|
||||
|
||||
const AuthGuard: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({
|
||||
children,
|
||||
roles,
|
||||
}) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
const storedUserId = localStorage.getItem("ctms_user_id");
|
||||
const storedToken = localStorage.getItem("ctms_token");
|
||||
|
||||
if (
|
||||
!storedUserId ||
|
||||
!storedToken ||
|
||||
storedToken === "undefined" ||
|
||||
storedToken === "null"
|
||||
) {
|
||||
if (storedToken) logout(); // Limpar se for "undefined" string
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const fetchedUser = await getUserById(storedUserId);
|
||||
if (fetchedUser) {
|
||||
if (fetchedUser.status === "active") {
|
||||
setUser(fetchedUser);
|
||||
} else {
|
||||
// User explicitly marked inactive or deleted
|
||||
logout();
|
||||
setUser(null);
|
||||
}
|
||||
} else {
|
||||
// If fetchedUser is undefined but didn't throw, it usually means a 401/403/404 (invalid token or user missing).
|
||||
// However, to be safe against random failures, we should only clear if we are sure it's invalid.
|
||||
// For now, if the token is completely rejected, we log out.
|
||||
logout();
|
||||
setUser(null);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Auth check failed (network/server error):", err);
|
||||
// DO NOT logout() here. If the server is offline or restarting,
|
||||
// we shouldn't wipe the user's local storage tokens.
|
||||
// We just leave the user as null, which will redirect them to login,
|
||||
// but their tokens remain so they can auto-login when the server is back.
|
||||
setUser(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
checkAuth();
|
||||
}, [location.pathname]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center bg-zinc-50 dark:bg-zinc-950 text-zinc-400">
|
||||
Carregando...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
if (roles && !roles.includes(user.role)) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
// Auto-redirect Super Admins away from the standard dashboard to their specific panel
|
||||
if (location.pathname === "/" && user.role === "super_admin") {
|
||||
return <Navigate to="/super-admin" replace />;
|
||||
}
|
||||
|
||||
return <Layout>{children}</Layout>;
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/forgot-password" element={<ForgotPassword />} />
|
||||
<Route path="/reset-password" element={<ResetPassword />} />
|
||||
<Route path="/setup-account" element={<SetupAccount />} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<AuthGuard>
|
||||
<Dashboard />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/admin/users"
|
||||
element={
|
||||
<AuthGuard roles={["super_admin", "admin", "manager"]}>
|
||||
<TeamManagement />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/ranking"
|
||||
element={
|
||||
<AuthGuard roles={["super_admin", "admin", "manager"]}>
|
||||
<Ranking />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/admin/teams"
|
||||
element={
|
||||
<AuthGuard roles={["super_admin", "admin", "manager"]}>
|
||||
<Teams />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/admin/funnels"
|
||||
element={
|
||||
<AuthGuard roles={["super_admin", "admin"]}>
|
||||
<Funnels />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/admin/origins"
|
||||
element={
|
||||
<AuthGuard roles={["super_admin", "admin"]}>
|
||||
<Origins />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/users/:id"
|
||||
element={
|
||||
<AuthGuard>
|
||||
<UserDetail />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/attendances/:id"
|
||||
element={
|
||||
<AuthGuard>
|
||||
<AttendanceDetail />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/super-admin"
|
||||
element={
|
||||
<AuthGuard roles={["super_admin"]}>
|
||||
<SuperAdmin />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/super-admin/api-keys"
|
||||
element={
|
||||
<AuthGuard roles={["super_admin"]}>
|
||||
<ApiKeys />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/profile"
|
||||
element={
|
||||
<AuthGuard>
|
||||
<UserProfile />
|
||||
</AuthGuard>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
103
src/components/DateRangePicker.tsx
Normal file
103
src/components/DateRangePicker.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { DateRange } from '../types';
|
||||
|
||||
interface DateRangePickerProps {
|
||||
dateRange: DateRange;
|
||||
onChange: (range: DateRange) => void;
|
||||
}
|
||||
|
||||
export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange }) => {
|
||||
const startRef = useRef<HTMLInputElement>(null);
|
||||
const endRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const formatDateForInput = (date: Date) => {
|
||||
// Format to local YYYY-MM-DD to avoid timezone shifts
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const formatShortDate = (date: Date) => {
|
||||
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit', timeZone: 'America/Sao_Paulo' });
|
||||
};
|
||||
|
||||
const parseLocalDate = (value: string) => {
|
||||
// Split "YYYY-MM-DD" and create date in local timezone to avoid UTC midnight shift
|
||||
if (!value) return null;
|
||||
const [year, month, day] = value.split('-');
|
||||
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
|
||||
};
|
||||
|
||||
const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newStart = parseLocalDate(e.target.value);
|
||||
if (newStart && !isNaN(newStart.getTime())) {
|
||||
onChange({ ...dateRange, start: newStart });
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newEnd = parseLocalDate(e.target.value);
|
||||
if (newEnd && !isNaN(newEnd.getTime())) {
|
||||
// Set to end of day to ensure the query includes the whole day
|
||||
newEnd.setHours(23, 59, 59, 999);
|
||||
onChange({ ...dateRange, end: newEnd });
|
||||
}
|
||||
};
|
||||
|
||||
const openPicker = (ref: React.RefObject<HTMLInputElement>) => {
|
||||
if (ref.current) {
|
||||
try {
|
||||
if ('showPicker' in HTMLInputElement.prototype) {
|
||||
ref.current.showPicker();
|
||||
} else {
|
||||
ref.current.focus();
|
||||
}
|
||||
} catch (e) {
|
||||
ref.current.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-dark-border transition-colors">
|
||||
<Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-zinc-700 dark:text-zinc-200">
|
||||
|
||||
{/* Start Date */}
|
||||
<div
|
||||
className="relative cursor-pointer hover:text-brand-yellow transition-colors"
|
||||
onClick={() => openPicker(startRef)}
|
||||
>
|
||||
{formatShortDate(dateRange.start)}
|
||||
<input
|
||||
ref={startRef}
|
||||
type="date"
|
||||
value={formatDateForInput(dateRange.start)}
|
||||
onChange={handleStartChange}
|
||||
className="absolute opacity-0 w-0 h-0 overflow-hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="text-zinc-400 dark:text-dark-muted font-normal text-xs">até</span>
|
||||
|
||||
{/* End Date */}
|
||||
<div
|
||||
className="relative cursor-pointer hover:text-brand-yellow transition-colors"
|
||||
onClick={() => openPicker(endRef)}
|
||||
>
|
||||
{formatShortDate(dateRange.end)}
|
||||
<input
|
||||
ref={endRef}
|
||||
type="date"
|
||||
value={formatDateForInput(dateRange.end)}
|
||||
onChange={handleEndChange}
|
||||
className="absolute opacity-0 w-0 h-0 overflow-hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
41
src/components/KPICard.tsx
Normal file
41
src/components/KPICard.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface KPICardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
subValue?: string;
|
||||
trend?: 'up' | 'down' | 'neutral';
|
||||
trendValue?: string;
|
||||
icon: LucideIcon;
|
||||
colorClass?: string;
|
||||
}
|
||||
|
||||
export const KPICard: React.FC<KPICardProps> = ({ title, value, subValue, trend, trendValue, icon: Icon, colorClass = "text-blue-600" }) => {
|
||||
// Extract base color from colorClass (e.g., 'text-brand-yellow' -> 'brand-yellow' or 'text-blue-600' -> 'blue-600')
|
||||
// Safer extraction:
|
||||
const baseColor = colorClass.replace('text-', '').split(' ')[0]; // gets 'brand-yellow' or 'zinc-500'
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex flex-col justify-between hover:shadow-md transition-all duration-300">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-zinc-500 dark:text-dark-muted text-sm font-medium mb-1">{title}</h3>
|
||||
<div className="text-3xl font-bold text-zinc-800 dark:text-dark-text tracking-tight">{value}</div>
|
||||
</div>
|
||||
<div className={`p-3 rounded-xl bg-${baseColor.split('-')[0]}-100 dark:bg-zinc-800 flex items-center justify-center transition-colors border border-transparent dark:border-dark-border`}>
|
||||
<Icon size={20} className={`${colorClass} dark:text-${baseColor.split('-')[0]}-400`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(trend || subValue) && (
|
||||
<div className="flex items-center gap-2 text-sm mt-auto">
|
||||
{trend === 'up' && <span className="text-green-500 flex items-center font-medium">▲ {trendValue}</span>}
|
||||
{trend === 'down' && <span className="text-red-500 flex items-center font-medium">▼ {trendValue}</span>}
|
||||
{trend === 'neutral' && <span className="text-zinc-500 dark:text-dark-muted flex items-center font-medium">- {trendValue}</span>}
|
||||
{subValue && <span className="text-zinc-400 dark:text-dark-muted">{subValue}</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
620
src/components/Layout.tsx
Normal file
620
src/components/Layout.tsx
Normal file
@@ -0,0 +1,620 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
LayoutDashboard, Users, UserCircle, Bell, Search, Menu, X, LogOut,
|
||||
Hexagon, Settings, Building2, Sun, Moon, Loader2, Layers,
|
||||
ChevronLeft, ChevronRight, Key, Target, Trophy, MessageSquare
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
getAttendances, getUsers, getUserById, logout, searchGlobal,
|
||||
getNotifications, markNotificationAsRead, markAllNotificationsAsRead,
|
||||
deleteNotification, clearAllNotifications, returnToSuperAdmin
|
||||
} from '../services/dataService';
|
||||
import { User } from '../types';
|
||||
import notificationSound from '../assets/audio/notification.mp3';
|
||||
|
||||
const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: any, label: string, collapsed: boolean }) => (
|
||||
<NavLink
|
||||
to={to}
|
||||
end
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
|
||||
isActive
|
||||
? 'bg-brand-yellow text-zinc-950 font-semibold shadow-md shadow-brand-yellow/20'
|
||||
: 'text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border hover:text-zinc-900 dark:hover:text-dark-text'
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Icon size={20} className="shrink-0" />
|
||||
{!collapsed && <span>{label}</span>}
|
||||
</NavLink>
|
||||
);
|
||||
|
||||
export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
|
||||
return localStorage.getItem('ctms_sidebar_collapsed') === 'true';
|
||||
});
|
||||
const [isDark, setIsDark] = useState(document.documentElement.classList.contains('dark'));
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const newState = !isSidebarCollapsed;
|
||||
setIsSidebarCollapsed(newState);
|
||||
localStorage.setItem('ctms_sidebar_collapsed', String(newState));
|
||||
};
|
||||
|
||||
// Search State
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState<{ members: User[], teams: any[], attendances: any[], organizations?: any[] }>({ members: [], teams: [], attendances: [], organizations: [] });
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [showSearchResults, setShowSearchResults] = useState(false);
|
||||
|
||||
// Notifications State
|
||||
const [notifications, setNotifications] = useState<any[]>([]);
|
||||
const [showNotifications, setShowNotifications] = useState(false);
|
||||
const unreadCount = notifications.filter(n => !n.is_read).length;
|
||||
const previousUnreadCountRef = React.useRef(0);
|
||||
const isInitialLoadRef = React.useRef(true);
|
||||
|
||||
// Pre-initialize audio to ensure it's loaded and ready
|
||||
const audioRef = React.useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
const playNotificationSound = () => {
|
||||
if (currentUser?.sound_enabled !== false && audioRef.current) {
|
||||
// Reset time to 0 to allow rapid replays
|
||||
audioRef.current.currentTime = 0;
|
||||
const playPromise = audioRef.current.play();
|
||||
if (playPromise !== undefined) {
|
||||
playPromise.catch(e => console.log('Audio play blocked by browser policy:', e));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const loadNotifications = async () => {
|
||||
const data = await getNotifications();
|
||||
|
||||
const newUnreadCount = data.filter((n: any) => !n.is_read).length;
|
||||
|
||||
// Only play sound if it's NOT the first load AND the count actually increased
|
||||
if (!isInitialLoadRef.current && newUnreadCount > previousUnreadCountRef.current) {
|
||||
playNotificationSound();
|
||||
}
|
||||
|
||||
setNotifications(data);
|
||||
previousUnreadCountRef.current = newUnreadCount;
|
||||
isInitialLoadRef.current = false;
|
||||
};
|
||||
|
||||
const handleBellClick = async () => {
|
||||
const willOpen = !showNotifications;
|
||||
setShowNotifications(willOpen);
|
||||
|
||||
if (willOpen && unreadCount > 0) {
|
||||
// Optimistic update
|
||||
setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
|
||||
previousUnreadCountRef.current = 0;
|
||||
await markAllNotificationsAsRead();
|
||||
loadNotifications();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const delayDebounceFn = setTimeout(async () => {
|
||||
if (searchQuery.length >= 2) {
|
||||
setIsSearching(true);
|
||||
const results = await searchGlobal(searchQuery);
|
||||
setSearchResults(results);
|
||||
setIsSearching(false);
|
||||
setShowSearchResults(true);
|
||||
} else {
|
||||
setSearchResults({ members: [], teams: [], attendances: [], organizations: [] });
|
||||
setShowSearchResults(false);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchQuery]);
|
||||
|
||||
const getSearchPlaceholder = () => {
|
||||
if (currentUser?.role === 'super_admin') return 'Buscar membros, equipes, atendimentos ou organizações...';
|
||||
if (currentUser?.role === 'agent') return 'Buscar atendimentos...';
|
||||
return 'Buscar membros, equipes ou atendimentos...';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCurrentUser = async () => {
|
||||
const storedUserId = localStorage.getItem('ctms_user_id');
|
||||
if (!storedUserId) {
|
||||
navigate('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const user = await getUserById(storedUserId);
|
||||
if (user) {
|
||||
setCurrentUser(user);
|
||||
} else {
|
||||
navigate('/login');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Layout fetch failed:", err);
|
||||
}
|
||||
};
|
||||
fetchCurrentUser();
|
||||
loadNotifications();
|
||||
const interval = setInterval(loadNotifications, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, [navigate]);
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
const newDark = !isDark;
|
||||
setIsDark(newDark);
|
||||
if (newDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.cookie = "dark_mode=1; path=/; max-age=31536000";
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.cookie = "dark_mode=0; path=/; max-age=31536000";
|
||||
}
|
||||
};
|
||||
|
||||
// Simple title mapping based on route
|
||||
const getPageTitle = () => {
|
||||
if (location.pathname === '/') return 'Dashboard';
|
||||
if (location.pathname.includes('/admin/users')) return 'Membros';
|
||||
if (location.pathname.includes('/admin/teams')) return 'Times';
|
||||
if (location.pathname.includes('/users/')) return 'Histórico do Usuário';
|
||||
if (location.pathname.includes('/attendances')) return 'Detalhes do Atendimento';
|
||||
if (location.pathname.includes('/super-admin')) return 'Gestão de Organizações';
|
||||
if (location.pathname.includes('/profile')) return 'Meu Perfil';
|
||||
return 'CTMS';
|
||||
};
|
||||
|
||||
if (!currentUser) return null;
|
||||
|
||||
const isSuperAdmin = currentUser.role === 'super_admin';
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-zinc-50 dark:bg-dark-bg overflow-hidden transition-colors duration-300">
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`fixed inset-y-0 left-0 z-50 bg-white dark:bg-dark-sidebar border-r border-zinc-200 dark:border-dark-border transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 ${
|
||||
isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
} flex flex-col ${isSidebarCollapsed ? 'w-20' : 'w-64'}`}
|
||||
>
|
||||
{/* Logo & Toggle */}
|
||||
<div className="flex items-center justify-between px-4 h-20 border-b border-zinc-100 dark:border-dark-border shrink-0">
|
||||
<div className={`flex items-center gap-3 overflow-hidden ${isSidebarCollapsed ? 'mx-auto' : ''}`}>
|
||||
<div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors shrink-0">
|
||||
<Hexagon size={24} fill="currentColor" />
|
||||
</div>
|
||||
{!isSidebarCollapsed && (
|
||||
<span className="text-xl font-bold text-zinc-900 dark:text-white tracking-tight whitespace-nowrap">Fasto<span className="text-brand-yellow">.</span></span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isSidebarCollapsed && (
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="hidden lg:flex p-1.5 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors shrink-0"
|
||||
title="Recolher Menu"
|
||||
>
|
||||
<ChevronLeft size={18} />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={() => setIsMobileMenuOpen(false)} className="lg:hidden text-zinc-400 hover:text-zinc-900 dark:hover:text-white">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Expand Button when collapsed */}
|
||||
{isSidebarCollapsed && (
|
||||
<div className="hidden lg:flex justify-center p-2 border-b border-zinc-100 dark:border-dark-border shrink-0">
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="p-1.5 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors"
|
||||
title="Expandir Menu"
|
||||
>
|
||||
<ChevronRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className={`flex-1 py-6 space-y-2 overflow-y-auto overflow-x-hidden ${isSidebarCollapsed ? 'px-2' : 'px-4'}`}>
|
||||
|
||||
{/* Standard User Links */}
|
||||
{!isSuperAdmin && (
|
||||
<>
|
||||
<SidebarItem to="/" icon={LayoutDashboard} label="Dashboard" collapsed={isSidebarCollapsed} />
|
||||
|
||||
{currentUser.role !== 'agent' && (
|
||||
<>
|
||||
<SidebarItem to="/ranking" icon={Trophy} label="Ranking de Vendedores" collapsed={isSidebarCollapsed} />
|
||||
<SidebarItem to="/admin/teams" icon={Building2} label={currentUser.role === 'manager' ? 'Meu Time' : 'Times'} collapsed={isSidebarCollapsed} />
|
||||
<SidebarItem to="/admin/users" icon={Users} label="Membros" collapsed={isSidebarCollapsed} />
|
||||
|
||||
{currentUser.role !== 'manager' && (
|
||||
<>
|
||||
<SidebarItem to="/admin/funnels" icon={Layers} label="Gerenciar Funis" collapsed={isSidebarCollapsed} />
|
||||
<SidebarItem to="/admin/origins" icon={Target} label="Origens de Lead" collapsed={isSidebarCollapsed} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Super Admin Links */}
|
||||
{isSuperAdmin && (
|
||||
<>
|
||||
{!isSidebarCollapsed && (
|
||||
<div className="pt-2 pb-2 px-4 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest whitespace-nowrap">
|
||||
Super Admin
|
||||
</div>
|
||||
)}
|
||||
<SidebarItem to="/super-admin" icon={Building2} label="Organizações" collapsed={isSidebarCollapsed} />
|
||||
<SidebarItem to="/admin/users" icon={Users} label="Usuários Globais" collapsed={isSidebarCollapsed} />
|
||||
<SidebarItem to="/super-admin/api-keys" icon={Key} label="Integrações" collapsed={isSidebarCollapsed} />
|
||||
</>
|
||||
)} </nav>
|
||||
|
||||
{/* User Profile Mini - Now Clickable to Profile */}
|
||||
<div className="p-3 border-t border-zinc-100 dark:border-dark-border space-y-3 shrink-0">
|
||||
{localStorage.getItem('ctms_super_admin_token') && (
|
||||
<button
|
||||
onClick={() => {
|
||||
returnToSuperAdmin();
|
||||
}}
|
||||
className={`w-full flex items-center justify-center gap-2 py-2 px-3 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-xs font-bold hover:opacity-90 transition-colors ${isSidebarCollapsed ? 'px-0' : ''}`}
|
||||
title="Retornar ao Painel Central"
|
||||
>
|
||||
{isSidebarCollapsed ? <LogOut size={16} /> : 'Retornar ao Painel Central'}
|
||||
</button>
|
||||
)}
|
||||
<div className={`flex items-center gap-3 rounded-xl bg-zinc-50 dark:bg-dark-bg/50 border border-zinc-100 dark:border-dark-border group transition-all ${isSidebarCollapsed ? 'justify-center p-2' : 'p-2'}`}>
|
||||
<div
|
||||
onClick={() => navigate('/profile')}
|
||||
className={`flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity ${isSidebarCollapsed ? 'justify-center' : ''}`}
|
||||
title={isSidebarCollapsed ? currentUser.name : undefined}
|
||||
>
|
||||
<img
|
||||
src={currentUser.avatar_url
|
||||
? (currentUser.avatar_url.startsWith('http') ? currentUser.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${currentUser.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(currentUser.name)}&background=random`}
|
||||
alt={currentUser.name}
|
||||
className="w-10 h-10 rounded-full object-cover border border-zinc-200 dark:border-dark-border shrink-0"
|
||||
/>
|
||||
{!isSidebarCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{currentUser.name}</p>
|
||||
<p className="text-xs text-zinc-500 dark:text-dark-muted truncate capitalize">
|
||||
{currentUser.role === 'super_admin' ? 'Super Admin' :
|
||||
currentUser.role === 'admin' ? 'Administrador' :
|
||||
currentUser.role === 'manager' ? 'Gerente' : 'Agente'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!isSidebarCollapsed && (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-zinc-400 hover:text-red-500 transition-colors shrink-0 p-2"
|
||||
title="Sair"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* Header */}
|
||||
<header className="h-20 bg-white dark:bg-dark-header border-b border-zinc-200 dark:border-dark-border px-4 sm:px-8 flex items-center gap-4 sm:gap-8 z-10 sticky top-0 transition-colors">
|
||||
<div className="flex items-center gap-4 shrink-0">
|
||||
<button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-zinc-500 hover:text-zinc-900 dark:hover:text-white">
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Bar - Moved to left/center and made wider */}
|
||||
<div className="hidden md:block relative flex-1 max-w-2xl">
|
||||
<div className="flex items-center bg-zinc-100 dark:bg-dark-bg rounded-xl px-4 py-2.5 w-full border border-transparent focus-within:bg-white dark:focus-within:bg-dark-card focus-within:border-brand-yellow focus-within:ring-2 focus-within:ring-brand-yellow/20 dark:focus-within:ring-brand-yellow/10 transition-all">
|
||||
{isSearching ? <Loader2 size={18} className="text-brand-yellow animate-spin" /> : <Search size={18} className="text-zinc-400 dark:text-dark-muted" />}
|
||||
<input
|
||||
type="text"
|
||||
placeholder={getSearchPlaceholder()}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onFocus={() => searchQuery.length >= 2 && setShowSearchResults(true)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Escape') {
|
||||
setShowSearchResults(false);
|
||||
setSearchQuery('');
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
className="bg-transparent border-none outline-none text-sm ml-3 w-full text-zinc-700 dark:text-dark-text placeholder-zinc-400 dark:placeholder-dark-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Search Results Dropdown */}
|
||||
{showSearchResults && (
|
||||
<div className="absolute top-full mt-2 left-0 w-full bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="max-h-[480px] overflow-y-auto p-2">
|
||||
{/* Organizations Section (Super Admin only) */}
|
||||
{Array.isArray(searchResults?.organizations) && searchResults.organizations.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Organizações</div>
|
||||
{searchResults.organizations.map(o => (
|
||||
<button
|
||||
key={o.id}
|
||||
onClick={() => {
|
||||
navigate(`/super-admin`);
|
||||
setShowSearchResults(false);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-brand-yellow border border-zinc-200 dark:border-dark-border">
|
||||
<Hexagon size={18} fill="currentColor" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{o.name}</div>
|
||||
<div className="text-xs text-zinc-500 dark:text-dark-muted">{o.slug} • {o.status}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Members Section */}
|
||||
{Array.isArray(searchResults?.members) && searchResults.members.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Membros</div>
|
||||
{searchResults.members.map(m => {
|
||||
const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
|
||||
const avatarSrc = m.avatar_url
|
||||
? (m.avatar_url.startsWith('http') ? m.avatar_url : `${backendUrl}${m.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(m.name)}&background=random`;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => {
|
||||
navigate(`/users/${m.slug || m.id}`);
|
||||
setShowSearchResults(false);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
|
||||
>
|
||||
<img
|
||||
src={avatarSrc}
|
||||
alt={m.name}
|
||||
className="w-9 h-9 rounded-full border border-zinc-100 dark:border-dark-border object-cover"
|
||||
onError={(e) => { (e.target as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(m.name)}&background=random`; }}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{m.name}</div>
|
||||
<div className="text-xs text-zinc-500 dark:text-dark-muted">{m.email}</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Teams Section */}
|
||||
{Array.isArray(searchResults?.teams) && searchResults.teams.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Equipes</div>
|
||||
{searchResults.teams.map(t => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => {
|
||||
navigate(`/admin/teams`);
|
||||
setShowSearchResults(false);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted border border-zinc-200 dark:border-dark-border">
|
||||
<Building2 size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-zinc-900 dark:text-dark-text">{t.name}</div>
|
||||
<div className="text-xs text-zinc-500 dark:text-dark-muted line-clamp-1">{t.description || 'Sem descrição'}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Attendances Section */}
|
||||
{Array.isArray(searchResults?.attendances) && searchResults.attendances.length > 0 && (
|
||||
<div className="mb-2">
|
||||
<div className="px-3 py-2 text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest border-b border-zinc-50 dark:border-dark-border/50 mb-1">Atendimentos</div>
|
||||
{searchResults.attendances.map(a => (
|
||||
<button
|
||||
key={a.id}
|
||||
onClick={() => {
|
||||
navigate(`/attendances/${a.id}`);
|
||||
setShowSearchResults(false);
|
||||
setSearchQuery('');
|
||||
}}
|
||||
className="w-full flex items-center gap-3 p-2 hover:bg-zinc-50 dark:hover:bg-dark-border rounded-xl transition-colors text-left"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-500 dark:text-dark-muted border border-zinc-200 dark:border-dark-border">
|
||||
<MessageSquare size={16} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-semibold text-zinc-900 dark:text-dark-text truncate">{a.title}</div>
|
||||
<div className="text-[10px] text-zinc-500 dark:text-dark-muted flex justify-between mt-0.5">
|
||||
<span className="font-medium">{a.user_name}</span>
|
||||
<span>{new Date(a.created_at).toLocaleDateString('pt-BR')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(!Array.isArray(searchResults?.members) || searchResults.members.length === 0) &&
|
||||
(!Array.isArray(searchResults?.teams) || searchResults.teams.length === 0) &&
|
||||
(!Array.isArray(searchResults?.attendances) || searchResults.attendances.length === 0) &&
|
||||
(!Array.isArray(searchResults?.organizations) || searchResults.organizations.length === 0) && (
|
||||
<div className="p-8 text-center text-zinc-500 dark:text-dark-muted text-sm">
|
||||
Nenhum resultado encontrado para "{searchQuery}"
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 sm:gap-6 ml-auto shrink-0">
|
||||
{/* Dark Mode Toggle */}
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
className="p-2.5 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-xl transition-all"
|
||||
title={isDark ? "Mudar para Modo Claro" : "Mudar para Modo Escuro"}
|
||||
>
|
||||
{isDark ? <Sun size={20} /> : <Moon size={20} />}
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={handleBellClick}
|
||||
className="p-2 text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-full relative transition-colors"
|
||||
> <Bell size={20} />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-brand-yellow rounded-full border-2 border-white dark:border-dark-header"></span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{showNotifications && (
|
||||
<div className="absolute top-full mt-2 right-0 w-80 bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="p-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-dark-text">Notificações</h3>
|
||||
<div className="flex gap-3">
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
await markAllNotificationsAsRead();
|
||||
loadNotifications();
|
||||
}}
|
||||
className="text-xs text-brand-yellow hover:underline"
|
||||
>
|
||||
Marcar lidas
|
||||
</button>
|
||||
)}
|
||||
{notifications.length > 0 && (
|
||||
<button
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
await clearAllNotifications();
|
||||
loadNotifications();
|
||||
}}
|
||||
className="text-xs text-zinc-400 hover:text-red-500 hover:underline transition-colors"
|
||||
>
|
||||
Limpar tudo
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{notifications.length > 0 ? (
|
||||
notifications.map(n => (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`w-full relative group p-4 text-left hover:bg-zinc-50 dark:hover:bg-dark-border transition-colors border-b border-zinc-50 dark:border-dark-border/50 last:border-0 ${!n.is_read ? 'bg-brand-yellow/5 dark:bg-brand-yellow/5' : ''}`}
|
||||
>
|
||||
<div
|
||||
className="cursor-pointer pr-6"
|
||||
onClick={async () => {
|
||||
if (!n.is_read) await markNotificationAsRead(n.id);
|
||||
if (n.link) navigate(n.link);
|
||||
setShowNotifications(false);
|
||||
loadNotifications();
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<span className={`text-xs font-bold uppercase tracking-wider ${
|
||||
n.type === 'success' ? 'text-green-500' :
|
||||
n.type === 'warning' ? 'text-orange-500' :
|
||||
n.type === 'error' ? 'text-red-500' : 'text-blue-500'
|
||||
}`}>
|
||||
{n.type === 'success' ? 'SUCESSO' : n.type === 'warning' ? 'AVISO' : n.type === 'error' ? 'ERRO' : 'INFO'}
|
||||
</span>
|
||||
<span className="text-[10px] text-zinc-400 dark:text-dark-muted">
|
||||
{new Date(n.created_at).toLocaleDateString('pt-BR')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-zinc-900 dark:text-dark-text mb-0.5">{n.title}</div>
|
||||
<p className="text-xs text-zinc-500 dark:text-dark-muted line-clamp-2">{n.message}</p>
|
||||
</div>
|
||||
|
||||
{/* Delete Button */}
|
||||
<button
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
await deleteNotification(n.id);
|
||||
loadNotifications();
|
||||
}}
|
||||
className="absolute top-4 right-4 p-1 text-zinc-300 hover:text-red-500 transition-all rounded-md hover:bg-red-50 dark:hover:bg-red-900/30"
|
||||
title="Remover notificação"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-8 text-center text-zinc-500 dark:text-dark-muted text-sm">
|
||||
Nenhuma notificação por enquanto.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Close notifications when clicking outside */}
|
||||
{showNotifications && <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Scrollable Content Area */}
|
||||
<main className="flex-1 overflow-y-auto p-4 sm:p-8">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Overlay for mobile */}
|
||||
{isMobileMenuOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-zinc-950/50 z-40 lg:hidden"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Hidden Audio Player for Notifications */}
|
||||
<audio
|
||||
ref={audioRef}
|
||||
src={notificationSound}
|
||||
preload="auto"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
60
src/components/ProductLists.tsx
Normal file
60
src/components/ProductLists.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ShoppingBag, TrendingUp } from 'lucide-react';
|
||||
|
||||
interface ProductStat {
|
||||
name: string;
|
||||
count: number;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
interface ProductListsProps {
|
||||
requested: ProductStat[];
|
||||
sold: ProductStat[];
|
||||
}
|
||||
|
||||
export const ProductLists: React.FC<ProductListsProps> = ({ requested, sold }) => {
|
||||
const ListSection = ({ title, icon: Icon, data, color }: { title: string, icon: any, data: ProductStat[], color: string }) => (
|
||||
<div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex-1 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400' : 'bg-green-100 dark:bg-green-950/50 text-green-600 dark:text-green-400'}`}>
|
||||
<Icon size={18} />
|
||||
</div>
|
||||
<h3 className="font-bold text-zinc-800 dark:text-dark-text">{title}</h3>
|
||||
</div>
|
||||
<ul className="space-y-4">
|
||||
{data.map((item, idx) => (
|
||||
<li key={idx} className="flex items-center justify-between group">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-zinc-800 dark:bg-brand-yellow text-white dark:text-zinc-950' : 'bg-zinc-100 dark:bg-dark-bg text-zinc-500 dark:text-dark-muted'}`}>
|
||||
{idx + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-dark-text">{item.name}</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-sm font-bold text-zinc-900 dark:text-zinc-100 block">{item.count}</span>
|
||||
<span className="text-[10px] text-zinc-400 dark:text-dark-muted">{item.percentage}%</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{data.length === 0 && <li className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível.</li>}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<ListSection
|
||||
title="Produtos Mais Solicitados"
|
||||
icon={ShoppingBag}
|
||||
data={requested}
|
||||
color="blue"
|
||||
/>
|
||||
<ListSection
|
||||
title="Produtos Mais Vendidos"
|
||||
icon={TrendingUp}
|
||||
data={sold}
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
177
src/components/SellersTable.tsx
Normal file
177
src/components/SellersTable.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react';
|
||||
import { User } from '../types';
|
||||
|
||||
interface SellerStat {
|
||||
user: User;
|
||||
total: number;
|
||||
avgScore: string;
|
||||
conversionRate: string;
|
||||
responseTime: string;
|
||||
}
|
||||
|
||||
interface SellersTableProps {
|
||||
data: SellerStat[];
|
||||
defaultShowAll?: boolean;
|
||||
}
|
||||
|
||||
export const SellersTable: React.FC<SellersTableProps> = ({ data, defaultShowAll = false }) => {
|
||||
const navigate = useNavigate();
|
||||
const [sortKey, setSortKey] = useState<keyof SellerStat>('conversionRate');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
const [showAll, setShowAll] = useState(defaultShowAll);
|
||||
|
||||
const handleSort = (key: keyof SellerStat) => {
|
||||
if (sortKey === key) {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortKey(key);
|
||||
setSortDirection('desc');
|
||||
}
|
||||
};
|
||||
|
||||
const sortedData = useMemo(() => {
|
||||
return [...data].sort((a, b) => {
|
||||
const aVal = a[sortKey];
|
||||
const bVal = b[sortKey];
|
||||
|
||||
if (typeof aVal === 'string' && typeof bVal === 'string') {
|
||||
if (sortKey === 'avgScore' || sortKey === 'conversionRate' || sortKey === 'responseTime') {
|
||||
const numA = parseFloat(aVal) || 0;
|
||||
const numB = parseFloat(bVal) || 0;
|
||||
return sortDirection === 'asc' ? numA - numB : numB - numA;
|
||||
}
|
||||
return sortDirection === 'asc'
|
||||
? aVal.localeCompare(bVal)
|
||||
: bVal.localeCompare(aVal);
|
||||
}
|
||||
|
||||
if (typeof aVal === 'number' && typeof bVal === 'number') {
|
||||
return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
|
||||
}
|
||||
|
||||
// Handle user object (sort by name)
|
||||
if (sortKey === 'user') {
|
||||
return sortDirection === 'asc'
|
||||
? a.user.name.localeCompare(b.user.name)
|
||||
: b.user.name.localeCompare(a.user.name);
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}, [data, sortKey, sortDirection]);
|
||||
|
||||
const displayedData = showAll ? sortedData : sortedData.slice(0, 5);
|
||||
|
||||
const SortIcon = ({ column }: { column: string }) => {
|
||||
if (sortKey !== column) return <ChevronsUpDown size={14} className="text-zinc-300 dark:text-dark-muted" />;
|
||||
return sortDirection === 'asc' ? <ChevronUp size={14} className="text-brand-yellow" /> : <ChevronDown size={14} className="text-brand-yellow" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-dark-card rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border overflow-hidden transition-colors">
|
||||
<div className="px-6 py-5 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center">
|
||||
<h3 className="font-bold text-zinc-800 dark:text-dark-text">Ranking de Vendedores</h3>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-zinc-50/50 dark:bg-dark-bg/50 text-zinc-500 dark:text-dark-muted text-xs uppercase tracking-wider">
|
||||
<th
|
||||
className="px-6 py-4 font-semibold cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('user')}
|
||||
>
|
||||
<div className="flex items-center gap-2">Usuário <SortIcon column="user" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('total')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Atendimentos <SortIcon column="total" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('avgScore')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Nota Média <SortIcon column="avgScore" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('responseTime')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Tempo Resp. <SortIcon column="responseTime" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none"
|
||||
onClick={() => handleSort('conversionRate')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">Conversão <SortIcon column="conversionRate" /></div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{displayedData.map((item, idx) => (
|
||||
<tr
|
||||
key={item.user.id}
|
||||
className="hover:bg-yellow-50/10 dark:hover:bg-yellow-400/5 transition-colors cursor-pointer group"
|
||||
onClick={() => navigate(`/users/${item.user.slug || item.user.id}`)}
|
||||
>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-zinc-400 dark:text-dark-muted font-mono w-4">#{sortedData.indexOf(item) + 1}</span>
|
||||
<img
|
||||
src={item.user.avatar_url
|
||||
? (item.user.avatar_url.startsWith('http') ? item.user.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${item.user.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(item.user.name)}&background=random`}
|
||||
alt=""
|
||||
className="w-9 h-9 rounded-full object-cover border border-zinc-200 dark:border-dark-border"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-semibold text-zinc-900 dark:text-dark-text group-hover:text-yellow-600 dark:group-hover:text-brand-yellow transition-colors">{item.user.name}</div>
|
||||
<div className="text-xs text-zinc-500 dark:text-dark-muted">{item.user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-zinc-600 dark:text-dark-text font-medium">
|
||||
{item.total}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span className={`inline-flex px-2 py-1 rounded-full text-xs font-bold ${parseFloat(item.avgScore) >= 80 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : parseFloat(item.avgScore) >= 60 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'}`}>
|
||||
{item.avgScore}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-zinc-600 dark:text-dark-text text-sm">
|
||||
{item.responseTime} min
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="w-16 bg-zinc-100 dark:bg-dark-bg rounded-full h-1.5 overflow-hidden border dark:border-dark-border">
|
||||
<div className="bg-brand-yellow h-1.5 rounded-full" style={{ width: `${item.conversionRate}%` }}></div>
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-zinc-700 dark:text-dark-text">{item.conversionRate}%</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{displayedData.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-8 text-center text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível para o período selecionado.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{sortedData.length > 5 && (
|
||||
<div className="px-6 py-4 border-t border-zinc-100 dark:border-dark-border bg-zinc-50/30 dark:bg-dark-bg flex justify-center">
|
||||
<button
|
||||
onClick={() => setShowAll(!showAll)}
|
||||
className="text-sm font-medium text-zinc-600 dark:text-dark-text hover:text-brand-yellow transition-colors"
|
||||
>
|
||||
{showAll ? 'Ver menos' : `Ver todos (${sortedData.length})`}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
39
src/constants.ts
Normal file
39
src/constants.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
|
||||
import { FunnelStage } from './types';
|
||||
|
||||
// Visual Constants
|
||||
export const COLORS = {
|
||||
primary: '#facc15', // Yellow-400
|
||||
secondary: '#18181b', // Zinc-900
|
||||
success: '#10b981', // Emerald-500
|
||||
warning: '#f59e0b', // Amber-500
|
||||
danger: '#ef4444', // Red-500
|
||||
|
||||
// Prettier, modern SaaS palette for general charts
|
||||
charts: [
|
||||
'#818cf8', // Soft Indigo
|
||||
'#4ade80', // Soft Emerald
|
||||
'#fb923c', // Soft Orange
|
||||
'#22d3ee', // Soft Cyan
|
||||
'#f472b6', // Soft Pink
|
||||
'#a78bfa' // Soft Violet
|
||||
],
|
||||
|
||||
// Brand-specific colors for Lead Origins
|
||||
origins: {
|
||||
'WhatsApp': '#25D366',
|
||||
'Instagram': '#E4405F',
|
||||
'LinkedIn': '#0077B5',
|
||||
'Website': '#f87171', // Coral Red (Distinct from LinkedIn blue)
|
||||
'Indicação': '#f59e0b'
|
||||
},
|
||||
|
||||
// Semantic palette for Funnel Stages
|
||||
funnel: {
|
||||
'Sem atendimento': '#64748b', // Slate-500
|
||||
'Identificação': '#818cf8', // Indigo-400
|
||||
'Negociação': '#fb923c', // Orange-400
|
||||
'Ganhos': '#10b981', // Emerald-500
|
||||
'Perdidos': '#f87171' // Red-400
|
||||
}
|
||||
};
|
||||
15
src/index.tsx
Normal file
15
src/index.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
198
src/pages/ApiKeys.tsx
Normal file
198
src/pages/ApiKeys.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Key, Loader2, Plus, Trash2, Copy, CheckCircle2, Building2 } from 'lucide-react';
|
||||
import { getApiKeys, createApiKey, deleteApiKey, getTenants } from '../services/dataService';
|
||||
import { Tenant } from '../types';
|
||||
|
||||
export const ApiKeys: React.FC = () => {
|
||||
const [tenants, setTenants] = useState<Tenant[]>([]);
|
||||
const [selectedTenantId, setSelectedTenantId] = useState<string>('');
|
||||
const [apiKeys, setApiKeys] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [newKeyName, setNewKeyName] = useState('');
|
||||
const [isGeneratingKey, setIsGeneratingKey] = useState(false);
|
||||
const [generatedKey, setGeneratedKey] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchInitialData = async () => {
|
||||
try {
|
||||
const fetchedTenants = await getTenants();
|
||||
setTenants(fetchedTenants);
|
||||
if (fetchedTenants.length > 0) {
|
||||
const defaultTenant = fetchedTenants.find(t => t.id !== 'system') || fetchedTenants[0];
|
||||
setSelectedTenantId(defaultTenant.id);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load tenants", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchInitialData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTenantId) {
|
||||
loadApiKeys(selectedTenantId);
|
||||
setGeneratedKey(null);
|
||||
}
|
||||
}, [selectedTenantId]);
|
||||
|
||||
const loadApiKeys = async (tenantId: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const keys = await getApiKeys(tenantId);
|
||||
setApiKeys(keys);
|
||||
} catch (e) {
|
||||
console.error("Failed to load API keys", e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateApiKey = async () => {
|
||||
if (!newKeyName.trim() || !selectedTenantId) return;
|
||||
setIsGeneratingKey(true);
|
||||
try {
|
||||
const res = await createApiKey({ name: newKeyName, tenantId: selectedTenantId });
|
||||
setGeneratedKey(res.secret_key);
|
||||
setNewKeyName('');
|
||||
loadApiKeys(selectedTenantId);
|
||||
} catch (err: any) {
|
||||
alert(err.message || 'Erro ao gerar chave.');
|
||||
} finally {
|
||||
setIsGeneratingKey(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevokeApiKey = async (id: string) => {
|
||||
if (!selectedTenantId) return;
|
||||
if (confirm('Tem certeza? Todas as integrações usando esta chave pararão de funcionar imediatamente.')) {
|
||||
const success = await deleteApiKey(id);
|
||||
if (success) {
|
||||
loadApiKeys(selectedTenantId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
alert('Chave copiada para a área de transferência!');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6 pb-12 transition-colors duration-300">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Integrações via API</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie chaves de API para permitir que sistemas externos como o n8n se conectem a organizações específicas.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden p-6 md:p-8">
|
||||
<div className="flex flex-col md:flex-row gap-6 mb-8">
|
||||
<div className="flex-1">
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase tracking-wider mb-2 block">Selecione a Organização</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={selectedTenantId}
|
||||
onChange={(e) => setSelectedTenantId(e.target.value)}
|
||||
className="w-full appearance-none bg-zinc-50 dark:bg-dark-input border border-zinc-200 dark:border-dark-border px-4 py-3 pr-10 rounded-xl text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all cursor-pointer font-medium"
|
||||
>
|
||||
{tenants.filter(t => t.id !== 'system').map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-zinc-500">
|
||||
<Building2 size={16} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{generatedKey && (
|
||||
<div className="mb-8 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl animate-in fade-in zoom-in duration-200">
|
||||
<h4 className="font-bold text-green-800 dark:text-green-300 flex items-center gap-2 mb-2">
|
||||
<CheckCircle2 size={18} /> Chave Gerada com Sucesso!
|
||||
</h4>
|
||||
<p className="text-sm text-green-700 dark:text-green-400 mb-3">
|
||||
Copie esta chave agora. Por motivos de segurança, ela <strong>não</strong> será exibida novamente.
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 bg-white dark:bg-zinc-950 p-3 rounded-lg text-sm font-mono text-zinc-800 dark:text-zinc-200 border border-green-200 dark:border-green-800 break-all shadow-inner">
|
||||
{generatedKey}
|
||||
</code>
|
||||
<button onClick={() => copyToClipboard(generatedKey)} className="p-3 bg-white dark:bg-zinc-950 border border-green-200 dark:border-green-800 rounded-lg hover:bg-green-100 dark:hover:bg-zinc-800 text-green-700 dark:text-green-400 transition-colors shadow-sm" title="Copiar">
|
||||
<Copy size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 mb-8">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nome da integração (ex: Webhook n8n - WhatsApp)"
|
||||
value={newKeyName}
|
||||
onChange={(e) => setNewKeyName(e.target.value)}
|
||||
className="flex-1 p-3 border border-zinc-200 dark:border-dark-border rounded-xl bg-zinc-50 dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
|
||||
/>
|
||||
<button
|
||||
onClick={handleGenerateApiKey}
|
||||
disabled={isGeneratingKey || !newKeyName.trim() || !selectedTenantId}
|
||||
className="px-6 py-3 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-xl font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity disabled:opacity-50 shrink-0 shadow-sm"
|
||||
>
|
||||
{isGeneratingKey ? <Loader2 className="animate-spin" size={18} /> : <Plus size={18} />}
|
||||
Gerar Nova Chave
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center p-8"><Loader2 className="animate-spin text-zinc-400" size={32} /></div>
|
||||
) : apiKeys.length > 0 ? (
|
||||
<div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-dark-border">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-zinc-50/80 dark:bg-dark-bg/80 border-b border-zinc-200 dark:border-dark-border">
|
||||
<th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Nome da Integração</th>
|
||||
<th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Chave (Mascarada)</th>
|
||||
<th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider">Último Uso</th>
|
||||
<th className="py-3 px-4 text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border/50 bg-white dark:bg-dark-card">
|
||||
{apiKeys.map(key => (
|
||||
<tr key={key.id} className="hover:bg-zinc-50 dark:hover:bg-dark-input/50 transition-colors">
|
||||
<td className="py-3 px-4 text-sm font-medium text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
|
||||
<Key size={14} className="text-brand-yellow" />
|
||||
{key.name}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-mono text-zinc-500 dark:text-zinc-400">{key.masked_key}</td>
|
||||
<td className="py-3 px-4 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{key.last_used_at ? new Date(key.last_used_at).toLocaleString('pt-BR') : 'Nunca'}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right">
|
||||
<button
|
||||
onClick={() => handleRevokeApiKey(key.id)}
|
||||
className="p-2 text-zinc-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors inline-flex"
|
||||
title="Revogar Chave"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-12 border-2 border-dashed border-zinc-200 dark:border-dark-border rounded-xl text-zinc-500 dark:text-zinc-400 bg-zinc-50/30 dark:bg-dark-bg/30">
|
||||
<Key size={32} className="mx-auto mb-3 opacity-20" />
|
||||
<p className="font-medium text-zinc-600 dark:text-zinc-300">Nenhuma chave de API gerada</p>
|
||||
<p className="text-xs mt-1">Crie uma nova chave para conectar sistemas externos a esta organização.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
255
src/pages/AttendanceDetail.tsx
Normal file
255
src/pages/AttendanceDetail.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { getAttendanceById, getUserById, getFunnels } from '../services/dataService';
|
||||
import { Attendance, User, FunnelStage, FunnelStageDef } from '../types';
|
||||
import { ArrowLeft, CheckCircle2, AlertCircle, Clock, Calendar, MessageSquare, ShoppingBag, Award, TrendingUp } from 'lucide-react';
|
||||
|
||||
export const AttendanceDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [data, setData] = useState<Attendance | undefined>();
|
||||
const [agent, setAgent] = useState<User | undefined>();
|
||||
const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
if (id) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const tenantId = localStorage.getItem('ctms_tenant_id') || '';
|
||||
const [att, fetchedFunnels] = await Promise.all([
|
||||
getAttendanceById(id),
|
||||
getFunnels(tenantId)
|
||||
]);
|
||||
|
||||
setData(att);
|
||||
|
||||
if (att) {
|
||||
const u = await getUserById(att.user_id);
|
||||
setAgent(u);
|
||||
|
||||
// Determine which funnel was used based on the agent's team
|
||||
const targetTeamId = u?.team_id || null;
|
||||
let activeFunnel = fetchedFunnels[0];
|
||||
if (targetTeamId) {
|
||||
const matchedFunnel = fetchedFunnels.find(f => f.teamIds?.includes(targetTeamId));
|
||||
if (matchedFunnel) activeFunnel = matchedFunnel;
|
||||
}
|
||||
setFunnelDefs(activeFunnel && activeFunnel.stages ? activeFunnel.stages : []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading details", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
if (loading) return <div className="p-12 text-center text-zinc-400 dark:text-dark-muted transition-colors">Carregando detalhes...</div>;
|
||||
if (!data) return <div className="p-12 text-center text-zinc-500 dark:text-dark-muted transition-colors">Registro de atendimento não encontrado</div>;
|
||||
|
||||
const getStageColor = (stage: string) => {
|
||||
const def = funnelDefs.find(f => f.name === stage);
|
||||
if (def) return def.color_class;
|
||||
|
||||
switch (stage) {
|
||||
case FunnelStage.WON: return 'text-green-700 bg-green-50 border-green-200 dark:text-green-400 dark:bg-green-900/30 dark:border-green-800';
|
||||
case FunnelStage.LOST: return 'text-red-700 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-900/30 dark:border-red-800';
|
||||
default: return 'text-blue-700 bg-blue-50 border-blue-200 dark:text-blue-400 dark:bg-blue-900/30 dark:border-blue-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getScoreColor = (score: number) => {
|
||||
if (score >= 80) return 'text-green-500';
|
||||
if (score >= 60) return 'text-yellow-500';
|
||||
return 'text-red-500';
|
||||
};
|
||||
|
||||
const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto space-y-6 transition-colors duration-300">
|
||||
{/* Top Nav & Context */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Link
|
||||
to={`/users/${data.user_id}`}
|
||||
className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text transition-colors text-sm font-medium"
|
||||
>
|
||||
<ArrowLeft size={16} /> Voltar para Histórico
|
||||
</Link>
|
||||
<div className="text-sm text-zinc-400 dark:text-dark-muted font-mono">ID: {data.id}</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Header */}
|
||||
<div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm p-6 md:p-8 transition-colors">
|
||||
<div className="flex flex-col md:flex-row justify-between gap-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${getStageColor(data.funnel_stage)}`}>
|
||||
{data.funnel_stage}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-zinc-500 dark:text-dark-muted text-sm">
|
||||
<Calendar size={14} /> {new Date(data.created_at).toLocaleString('pt-BR')}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-zinc-500 dark:text-dark-muted text-sm">
|
||||
<MessageSquare size={14} /> {data.origin}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-zinc-900 dark:text-dark-text leading-tight">
|
||||
{data.title}
|
||||
</h1>
|
||||
{agent && (
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<img
|
||||
src={agent.avatar_url
|
||||
? (agent.avatar_url.startsWith('http') ? agent.avatar_url : `${backendUrl}${agent.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=random`}
|
||||
alt=""
|
||||
className="w-8 h-8 rounded-full border border-zinc-200 dark:border-dark-border object-cover"
|
||||
/>
|
||||
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Agente: <span className="text-zinc-900 dark:text-zinc-100">{agent.name}</span></span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-center min-w-[140px] p-6 bg-zinc-50 dark:bg-dark-bg/50 rounded-xl border border-zinc-100 dark:border-dark-border">
|
||||
<span className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-wider mb-1">Nota de Qualidade</span>
|
||||
<div className={`text-5xl font-black ${getScoreColor(data.score)}`}>
|
||||
{data.score}
|
||||
</div>
|
||||
<span className="text-xs font-medium text-zinc-400 dark:text-dark-muted mt-1">de 100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{/* Left Column: Analysis */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
|
||||
{/* Summary / Transcript Stub */}
|
||||
<div className="bg-white dark:bg-dark-card rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm p-6">
|
||||
<h3 className="text-base font-bold text-zinc-900 dark:text-dark-text mb-4 flex items-center gap-2">
|
||||
<MessageSquare size={18} className="text-zinc-400 dark:text-dark-muted" />
|
||||
Resumo da Interação
|
||||
</h3>
|
||||
<div className="text-zinc-600 dark:text-zinc-300 leading-relaxed text-sm whitespace-pre-wrap">
|
||||
{data.full_summary ? (
|
||||
data.full_summary
|
||||
) : (
|
||||
<>
|
||||
{data.title} O cliente perguntou sobre detalhes específicos relacionados ao <span className="font-medium text-zinc-800 dark:text-zinc-100">{data.product_requested}</span>.
|
||||
As discussões envolveram níveis de preços, prazos de implementação e potenciais descontos por volume.
|
||||
A interação foi concluída com {data.converted ? 'uma venda realizada' : 'o cliente pedindo mais tempo para decidir'}.
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feedback Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Points of Attention */}
|
||||
<div className="bg-white dark:bg-dark-card rounded-xl border border-red-100 dark:border-red-900/20 shadow-sm overflow-hidden">
|
||||
<div className="px-5 py-3 bg-red-50/50 dark:bg-red-900/20 border-b border-red-100 dark:border-red-900/30 flex items-center gap-2">
|
||||
<AlertCircle size={18} className="text-red-500 dark:text-red-400" />
|
||||
<h3 className="font-bold text-red-900 dark:text-red-300 text-sm">Pontos de Atenção</h3>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
{data.attention_points && data.attention_points.length > 0 ? (
|
||||
<ul className="space-y-3">
|
||||
{data.attention_points.map((pt, idx) => (
|
||||
<li key={idx} className="flex gap-3 text-sm text-zinc-700 dark:text-zinc-300">
|
||||
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-400 shrink-0" />
|
||||
{pt}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum problema detectado.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Points of Improvement */}
|
||||
<div className="bg-white dark:bg-dark-card rounded-xl border border-blue-100 dark:border-blue-900/20 shadow-sm overflow-hidden">
|
||||
<div className="px-5 py-3 bg-blue-50/50 dark:bg-blue-900/20 border-b border-blue-100 dark:border-blue-900/30 flex items-center gap-2">
|
||||
<CheckCircle2 size={18} className="text-blue-500 dark:text-blue-400" />
|
||||
<h3 className="font-bold text-blue-900 dark:text-blue-300 text-sm">Dicas de Melhoria</h3>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
{data.improvement_points && data.improvement_points.length > 0 ? (
|
||||
<ul className="space-y-3">
|
||||
{data.improvement_points.map((pt, idx) => (
|
||||
<li key={idx} className="flex gap-3 text-sm text-zinc-700 dark:text-zinc-300">
|
||||
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-400 shrink-0" />
|
||||
{pt}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-sm text-zinc-400 dark:text-dark-muted italic">Continue o bom trabalho!</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Metadata & Metrics */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white dark:bg-dark-card rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm p-5 transition-colors">
|
||||
<h3 className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-wider mb-4">Métricas de Performance</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center p-3 bg-zinc-50 dark:bg-dark-bg/50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white dark:bg-dark-card rounded-md border border-zinc-100 dark:border-dark-border text-blue-500 dark:text-blue-400"><Clock size={16} /></div>
|
||||
<span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">Primeira Resposta</span>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-900 dark:text-zinc-100">{data.first_response_time_min} min</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-3 bg-zinc-50 dark:bg-dark-bg/50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white dark:bg-dark-card rounded-md border border-zinc-100 dark:border-dark-border text-purple-500 dark:text-purple-400"><TrendingUp size={16} /></div>
|
||||
<span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">Tempo Atendimento</span>
|
||||
</div>
|
||||
<span className="text-sm font-bold text-zinc-900 dark:text-zinc-100">{data.handling_time_min} min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm p-5 transition-colors">
|
||||
<h3 className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-wider mb-4">Contexto de Vendas</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs text-zinc-500 dark:text-dark-muted font-medium">Produto Solicitado</span>
|
||||
<div className="flex items-center gap-2 font-semibold text-zinc-800 dark:text-zinc-100">
|
||||
<ShoppingBag size={16} className="text-zinc-400 dark:text-dark-muted" /> {data.product_requested}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-px bg-zinc-100 dark:bg-dark-border my-2" />
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs text-zinc-500 dark:text-dark-muted font-medium">Desfecho</span>
|
||||
{data.converted ? (
|
||||
<div className="flex items-center gap-2 text-green-600 dark:text-green-400 font-bold bg-green-50 dark:bg-green-900/20 px-3 py-2 rounded-lg border border-green-100 dark:border-green-900/30">
|
||||
<Award size={18} /> Venda Fechada
|
||||
{data.product_sold && <span className="text-green-800 dark:text-green-200 text-xs font-normal ml-auto">{data.product_sold}</span>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium bg-zinc-50 dark:bg-dark-bg/50 px-3 py-2 rounded-lg border border-zinc-100 dark:border-dark-border">
|
||||
<div className="w-2 h-2 rounded-full bg-zinc-400 dark:bg-zinc-600" /> Não Convertido
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
502
src/pages/Dashboard.tsx
Normal file
502
src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,502 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, PieChart, Pie, Legend
|
||||
} from 'recharts';
|
||||
import {
|
||||
Users, Clock, Phone, TrendingUp, Filter
|
||||
} from 'lucide-react';
|
||||
import { getAttendances, getUsers, getTeams, getUserById, getFunnels, getOrigins } from '../services/dataService';
|
||||
import { COLORS } from '../constants';
|
||||
import { Attendance, DashboardFilter, FunnelStage, User, FunnelStageDef, OriginItemDef } from '../types';
|
||||
import { KPICard } from '../components/KPICard';
|
||||
import { DateRangePicker } from '../components/DateRangePicker';
|
||||
import { ProductLists } from '../components/ProductLists';
|
||||
|
||||
// Interface for seller statistics accumulator
|
||||
interface SellerStats {
|
||||
total: number;
|
||||
converted: number;
|
||||
scoreSum: number;
|
||||
count: number;
|
||||
timeSum: number;
|
||||
}
|
||||
|
||||
export const Dashboard: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [data, setData] = useState<Attendance[]>([]);
|
||||
const [prevData, setPrevData] = useState<Attendance[]>([]);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [teams, setTeams] = useState<any[]>([]);
|
||||
const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
|
||||
const [originDefs, setOriginDefs] = useState<OriginItemDef[]>([]);
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
|
||||
const [filters, setFilters] = useState<DashboardFilter>({
|
||||
dateRange: {
|
||||
start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // Last 30 days
|
||||
end: new Date(),
|
||||
},
|
||||
userId: 'all',
|
||||
teamId: 'all',
|
||||
funnelStage: 'all',
|
||||
origin: 'all',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const tenantId = localStorage.getItem('ctms_tenant_id');
|
||||
const storedUserId = localStorage.getItem('ctms_user_id');
|
||||
if (!tenantId) return;
|
||||
|
||||
// Calculate previous date range for accurate period-over-period trend
|
||||
const duration = filters.dateRange.end.getTime() - filters.dateRange.start.getTime();
|
||||
const prevStart = new Date(filters.dateRange.start.getTime() - duration);
|
||||
const prevEnd = new Date(filters.dateRange.start.getTime());
|
||||
const prevFilters = { ...filters, dateRange: { start: prevStart, end: prevEnd } };
|
||||
|
||||
// Fetch users, attendances, teams, funnels and current user in parallel
|
||||
const [fetchedUsers, fetchedData, prevFetchedData, fetchedTeams, fetchedFunnels, fetchedOrigins, me] = await Promise.all([
|
||||
getUsers(tenantId),
|
||||
getAttendances(tenantId, filters),
|
||||
getAttendances(tenantId, prevFilters),
|
||||
getTeams(tenantId),
|
||||
getFunnels(tenantId),
|
||||
getOrigins(tenantId),
|
||||
storedUserId ? getUserById(storedUserId) : null
|
||||
]);
|
||||
|
||||
setUsers(fetchedUsers);
|
||||
setData(fetchedData);
|
||||
setPrevData(prevFetchedData);
|
||||
setTeams(fetchedTeams);
|
||||
setOriginDefs(fetchedOrigins);
|
||||
if (me) setCurrentUser(me);
|
||||
|
||||
// Determine which funnel to display
|
||||
const targetTeamId = filters.teamId !== 'all' ? filters.teamId : (me?.team_id || null);
|
||||
let activeFunnel = fetchedFunnels[0]; // fallback to first/default
|
||||
if (targetTeamId) {
|
||||
const matchedFunnel = fetchedFunnels.find(f => f.teamIds?.includes(targetTeamId));
|
||||
if (matchedFunnel) activeFunnel = matchedFunnel;
|
||||
}
|
||||
|
||||
setFunnelDefs(activeFunnel && activeFunnel.stages ? activeFunnel.stages.sort((a: any, b: any) => a.order_index - b.order_index) : []);
|
||||
|
||||
// Determine which origins to display
|
||||
let activeOriginGroup = fetchedOrigins[0];
|
||||
if (targetTeamId) {
|
||||
const matchedOrigin = fetchedOrigins.find(o => o.teamIds?.includes(targetTeamId));
|
||||
if (matchedOrigin) activeOriginGroup = matchedOrigin;
|
||||
}
|
||||
setOriginDefs(activeOriginGroup && activeOriginGroup.items ? activeOriginGroup.items : []);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error loading dashboard data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [filters]);
|
||||
|
||||
// --- Metrics Calculations ---
|
||||
const totalLeads = data.length;
|
||||
const avgScore = data.length > 0 ? (data.reduce((acc, curr) => acc + curr.score, 0) / data.length).toFixed(1) : "0";
|
||||
const avgResponseTime = data.length > 0 ? (data.reduce((acc, curr) => acc + curr.first_response_time_min, 0) / data.length).toFixed(0) : "0";
|
||||
const avgHandleTime = data.length > 0 ? (data.reduce((acc, curr) => acc + curr.handling_time_min, 0) / data.length).toFixed(0) : "0";
|
||||
|
||||
// --- Dynamic Trends Calculation ---
|
||||
const trends = useMemo(() => {
|
||||
if (data.length === 0 && prevData.length === 0) {
|
||||
return { leads: null, score: null, resp: null };
|
||||
}
|
||||
|
||||
const calcAvg = (arr: Attendance[], key: keyof Attendance) =>
|
||||
arr.length ? arr.reduce((acc, curr) => acc + (curr[key] as number), 0) / arr.length : 0;
|
||||
|
||||
// Leads Trend (%)
|
||||
const recentLeads = data.length;
|
||||
const prevLeads = prevData.length;
|
||||
let leadsTrend = 0;
|
||||
if (prevLeads > 0) {
|
||||
leadsTrend = ((recentLeads - prevLeads) / prevLeads) * 100;
|
||||
} else if (recentLeads > 0) {
|
||||
leadsTrend = 100;
|
||||
}
|
||||
|
||||
// Score Trend (Absolute point difference)
|
||||
const recentScore = calcAvg(data, 'score');
|
||||
const prevScore = calcAvg(prevData, 'score');
|
||||
let scoreTrend = 0;
|
||||
if (prevData.length > 0) {
|
||||
scoreTrend = recentScore - prevScore;
|
||||
} else {
|
||||
scoreTrend = recentScore;
|
||||
}
|
||||
|
||||
// Response Time Trend (%)
|
||||
const recentResp = calcAvg(data, 'first_response_time_min');
|
||||
const prevResp = calcAvg(prevData, 'first_response_time_min');
|
||||
let respTrend = 0;
|
||||
if (prevResp > 0) {
|
||||
respTrend = ((recentResp - prevResp) / prevResp) * 100;
|
||||
} else if (recentResp > 0) {
|
||||
respTrend = 100; // Time increased from 0, which is worse
|
||||
}
|
||||
|
||||
return { leads: leadsTrend, score: scoreTrend, resp: respTrend };
|
||||
}, [data, prevData]);
|
||||
|
||||
// --- Chart Data: Funnel ---
|
||||
const funnelData = useMemo(() => {
|
||||
const counts = data.reduce((acc, curr) => {
|
||||
acc[curr.funnel_stage] = (acc[curr.funnel_stage] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
if (funnelDefs.length > 0) {
|
||||
return funnelDefs.map(stage => ({
|
||||
name: stage.name,
|
||||
value: counts[stage.name] || 0,
|
||||
color: stage.color_class.split(' ')[0].replace('bg-', '') // Extract base color name for Recharts
|
||||
}));
|
||||
}
|
||||
|
||||
// Fallback if funnels aren't loaded yet
|
||||
const stagesOrder = [
|
||||
FunnelStage.NO_CONTACT,
|
||||
FunnelStage.IDENTIFICATION,
|
||||
FunnelStage.NEGOTIATION,
|
||||
FunnelStage.WON,
|
||||
FunnelStage.LOST
|
||||
];
|
||||
return stagesOrder.map(stage => ({
|
||||
name: stage,
|
||||
value: counts[stage] || 0
|
||||
}));
|
||||
}, [data, funnelDefs]);
|
||||
|
||||
const tailwindToHex: Record<string, string> = {
|
||||
'zinc': '#71717a',
|
||||
'blue': '#3b82f6',
|
||||
'purple': '#a855f7',
|
||||
'green': '#22c55e',
|
||||
'red': '#ef4444',
|
||||
'pink': '#ec4899',
|
||||
'orange': '#f97316',
|
||||
'yellow': '#eab308'
|
||||
};
|
||||
|
||||
// --- Chart Data: Origin ---
|
||||
const originData = useMemo(() => {
|
||||
const counts = data.reduce((acc, curr) => {
|
||||
acc[curr.origin] = (acc[curr.origin] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
if (originDefs.length > 0) {
|
||||
const activeOrigins = originDefs.map(def => {
|
||||
let hexColor = '#71717a'; // Default zinc
|
||||
if (def.color_class) {
|
||||
const match = def.color_class.match(/bg-([a-z]+)-\d+/);
|
||||
if (match && tailwindToHex[match[1]]) {
|
||||
hexColor = tailwindToHex[match[1]];
|
||||
}
|
||||
}
|
||||
return {
|
||||
name: def.name,
|
||||
value: counts[def.name] || 0,
|
||||
hexColor
|
||||
};
|
||||
});
|
||||
|
||||
// Calculate "Outros" for data that doesn't match current active origins
|
||||
const activeNames = new Set(originDefs.map(d => d.name));
|
||||
const othersValue = (Object.entries(counts) as [string, number][])
|
||||
.filter(([name]) => !activeNames.has(name))
|
||||
.reduce((sum, [_, val]) => sum + val, 0);
|
||||
|
||||
if (othersValue > 0) {
|
||||
activeOrigins.push({
|
||||
name: 'Outros',
|
||||
value: othersValue,
|
||||
hexColor: '#94a3b8' // Gray-400
|
||||
});
|
||||
}
|
||||
|
||||
return activeOrigins.sort((a, b) => b.value - a.value);
|
||||
}
|
||||
|
||||
return []; // No definitions = No chart (matches funnel behavior)
|
||||
}, [data, originDefs]);
|
||||
|
||||
// --- Table Data: Sellers Ranking ---
|
||||
const sellersRanking = useMemo(() => {
|
||||
const stats = data.reduce<Record<string, SellerStats>>((acc, curr) => {
|
||||
if (!acc[curr.user_id]) {
|
||||
acc[curr.user_id] = { total: 0, converted: 0, scoreSum: 0, count: 0, timeSum: 0 };
|
||||
}
|
||||
acc[curr.user_id].total += 1;
|
||||
if (curr.converted) acc[curr.user_id].converted += 1;
|
||||
acc[curr.user_id].scoreSum += curr.score;
|
||||
acc[curr.user_id].timeSum += curr.first_response_time_min;
|
||||
acc[curr.user_id].count += 1;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return Object.entries(stats)
|
||||
.map(([userId, s]) => {
|
||||
const stat = s as SellerStats;
|
||||
const user = users.find(u => u.id === userId);
|
||||
if (!user) return null;
|
||||
return {
|
||||
user,
|
||||
total: stat.total,
|
||||
avgScore: (stat.scoreSum / stat.count).toFixed(1),
|
||||
conversionRate: ((stat.converted / stat.total) * 100).toFixed(1),
|
||||
responseTime: (stat.timeSum / stat.count).toFixed(0)
|
||||
};
|
||||
})
|
||||
.filter((item): item is NonNullable<typeof item> => item !== null);
|
||||
}, [data, users]);
|
||||
|
||||
// --- Lists Data: Products ---
|
||||
const productStats = useMemo(() => {
|
||||
const requested: Record<string, number> = {};
|
||||
const sold: Record<string, number> = {};
|
||||
|
||||
data.forEach(d => {
|
||||
if (d.product_requested) requested[d.product_requested] = (requested[d.product_requested] || 0) + 1;
|
||||
if (d.product_sold) sold[d.product_sold] = (sold[d.product_sold] || 0) + 1;
|
||||
});
|
||||
|
||||
const formatList = (record: Record<string, number>, total: number) =>
|
||||
Object.entries(record)
|
||||
.map(([name, count]) => ({ name, count, percentage: Math.round((count / (total || 1)) * 100) }))
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.slice(0, 5);
|
||||
|
||||
const totalReq = Object.values(requested).reduce((a, b) => a + b, 0);
|
||||
const totalSold = Object.values(sold).reduce((a, b) => a + b, 0);
|
||||
|
||||
return {
|
||||
requested: formatList(requested, totalReq),
|
||||
sold: formatList(sold, totalSold)
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
|
||||
const handleFilterChange = (key: keyof DashboardFilter, value: any) => {
|
||||
setFilters(prev => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
if (loading && data.length === 0) {
|
||||
return <div className="flex h-full items-center justify-center text-zinc-400 dark:text-dark-muted p-12">Carregando Dashboard...</div>;
|
||||
}
|
||||
|
||||
const isAdmin = currentUser?.role === 'admin' || currentUser?.role === 'super_admin' || currentUser?.role === 'manager';
|
||||
|
||||
return (
|
||||
<div className="space-y-6 pb-8 transition-colors duration-300">
|
||||
{/* Filters Bar */}
|
||||
<div className="bg-white dark:bg-dark-card p-4 rounded-xl shadow-sm border border-zinc-100 dark:border-dark-border flex flex-col gap-4">
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium">
|
||||
<Filter size={18} />
|
||||
<span>Filtros:</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
|
||||
<DateRangePicker
|
||||
dateRange={filters.dateRange}
|
||||
onChange={(range) => handleFilterChange('dateRange', range)}
|
||||
/>
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
|
||||
value={filters.userId}
|
||||
onChange={(e) => handleFilterChange('userId', e.target.value)}
|
||||
>
|
||||
<option value="all">Todos Usuários</option>
|
||||
{users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
|
||||
</select>
|
||||
|
||||
{currentUser?.role !== 'manager' && (
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
|
||||
value={filters.teamId}
|
||||
onChange={(e) => handleFilterChange('teamId', e.target.value)}
|
||||
>
|
||||
<option value="all">Todas Equipes</option>
|
||||
{teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||||
</select>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
|
||||
value={filters.funnelStage}
|
||||
onChange={(e) => handleFilterChange('funnelStage', e.target.value)}
|
||||
>
|
||||
<option value="all">Todas Etapas</option>
|
||||
{funnelDefs.length > 0 ? funnelDefs.map(stage => (
|
||||
<option key={stage.id} value={stage.name}>{stage.name}</option>
|
||||
)) : Object.values(FunnelStage).map(stage => (
|
||||
<option key={stage} value={stage}>{stage}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
|
||||
value={filters.origin}
|
||||
onChange={(e) => handleFilterChange('origin', e.target.value)}
|
||||
>
|
||||
<option value="all">Todas Origens</option>
|
||||
{originDefs.length > 0 ? originDefs.map(o => (
|
||||
<option key={o.id} value={o.name}>{o.name}</option>
|
||||
)) : ['WhatsApp', 'Instagram', 'Website', 'LinkedIn', 'Indicação'].map(o => (
|
||||
<option key={o} value={o}>{o}</option>
|
||||
))}
|
||||
</select> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<KPICard
|
||||
title="Total de Leads"
|
||||
value={totalLeads}
|
||||
trend={trends.leads > 0 ? 'up' : trends.leads < 0 ? 'down' : 'neutral'}
|
||||
trendValue={`${Math.abs(trends.leads).toFixed(1)}%`}
|
||||
icon={Users}
|
||||
colorClass="text-brand-yellow"
|
||||
/>
|
||||
<KPICard
|
||||
title="Nota Média Qualidade"
|
||||
value={avgScore}
|
||||
subValue="/ 100"
|
||||
trend={trends.score > 0 ? 'up' : trends.score < 0 ? 'down' : 'neutral'}
|
||||
trendValue={Math.abs(trends.score).toFixed(1)}
|
||||
icon={TrendingUp}
|
||||
colorClass="text-zinc-500"
|
||||
/>
|
||||
<KPICard
|
||||
title="Média 1ª Resposta"
|
||||
value={`${avgResponseTime}m`}
|
||||
trend={trends.resp < 0 ? 'up' : trends.resp > 0 ? 'down' : 'neutral'} // Faster response is better (up)
|
||||
trendValue={`${Math.abs(trends.resp).toFixed(1)}%`}
|
||||
icon={Clock}
|
||||
colorClass="text-orange-500"
|
||||
/>
|
||||
<KPICard
|
||||
title="Tempo Médio Atend."
|
||||
value={`${avgHandleTime}m`}
|
||||
subValue="por lead"
|
||||
icon={Phone}
|
||||
colorClass="text-green-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Charts Section */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Funnel Chart */}
|
||||
<div className="lg:col-span-2 bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border min-h-[400px]">
|
||||
<h3 className="text-lg font-bold text-zinc-800 dark:text-dark-text mb-6">Funil de Vendas</h3>
|
||||
<div className="h-[300px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={funnelData}
|
||||
layout="vertical"
|
||||
margin={{ top: 5, right: 30, left: 40, bottom: 5 }}
|
||||
barSize={32}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#f1f5f9" className="dark:opacity-5" />
|
||||
<XAxis type="number" hide />
|
||||
<YAxis
|
||||
dataKey="name"
|
||||
type="category"
|
||||
width={120}
|
||||
tick={{fill: '#71717a', fontSize: 13, fontWeight: 500}}
|
||||
className="dark:fill-dark-muted"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip
|
||||
cursor={{fill: '#f8fafc', opacity: 0.05}}
|
||||
formatter={(value: any) => [value, 'Quantidade']}
|
||||
contentStyle={{
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
|
||||
backgroundColor: '#1a1a1a',
|
||||
color: '#ededed'
|
||||
}}
|
||||
itemStyle={{ color: '#ededed' }}
|
||||
/>
|
||||
<Bar dataKey="value" radius={[0, 6, 6, 0]}>
|
||||
{funnelData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={COLORS.funnel[entry.name as keyof typeof COLORS.funnel] || '#cbd5e1'}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Origin Pie Chart */}
|
||||
<div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border min-h-[400px] flex flex-col">
|
||||
<h3 className="text-lg font-bold text-zinc-800 dark:text-dark-text mb-2">Origem dos Leads</h3>
|
||||
<div className="flex-1 min-h-0">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={originData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={70}
|
||||
outerRadius={100}
|
||||
paddingAngle={5}
|
||||
dataKey="value"
|
||||
stroke="none"
|
||||
>
|
||||
{originData.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={entry.hexColor || COLORS.charts[index % COLORS.charts.length]}
|
||||
/>
|
||||
))} </Pie>
|
||||
<Tooltip
|
||||
formatter={(value: any) => [value, 'Leads']}
|
||||
contentStyle={{
|
||||
borderRadius: '12px',
|
||||
backgroundColor: '#1a1a1a',
|
||||
border: 'none',
|
||||
color: '#ededed'
|
||||
}}
|
||||
itemStyle={{ color: '#ededed' }}
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="bottom"
|
||||
height={80}
|
||||
iconType="circle"
|
||||
iconSize={10}
|
||||
wrapperStyle={{ fontSize: '12px', paddingTop: '20px' }}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Lists */}
|
||||
<ProductLists requested={productStats.requested} sold={productStats.sold} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
116
src/pages/ForgotPassword.tsx
Normal file
116
src/pages/ForgotPassword.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { Hexagon, Mail, ArrowRight, Loader2, ArrowLeft, CheckCircle2 } from 'lucide-react';
|
||||
import { forgotPassword } from '../services/dataService';
|
||||
|
||||
export const ForgotPassword: React.FC = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await forgotPassword(email);
|
||||
setIsSuccess(true);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Erro ao enviar e-mail de recuperação.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-dark-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8 transition-colors duration-300">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="flex justify-center items-center gap-2 text-zinc-900 dark:text-zinc-50">
|
||||
<div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
|
||||
<Hexagon size={32} fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-3xl font-bold tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
|
||||
</div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
|
||||
Recupere sua senha
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-zinc-600 dark:text-dark-muted">
|
||||
Enviaremos um link de redefinição para o seu e-mail.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
|
||||
{isSuccess ? (
|
||||
<div className="text-center py-4 space-y-4 animate-in fade-in zoom-in duration-300">
|
||||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">E-mail enviado!</h3>
|
||||
<p className="text-sm text-zinc-600 dark:text-dark-muted">
|
||||
Verifique sua caixa de entrada (e a pasta de spam) para as instruções.
|
||||
</p>
|
||||
<div className="pt-4">
|
||||
<Link to="/login" className="text-brand-yellow font-bold hover:text-yellow-600 flex items-center justify-center gap-2 transition-colors">
|
||||
<ArrowLeft size={18} /> Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg text-red-600 dark:text-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Seu E-mail
|
||||
</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Mail className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
|
||||
placeholder="seu@email.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-zinc-950 bg-brand-yellow hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-yellow transition-all disabled:opacity-70"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="animate-spin h-5 w-5" />
|
||||
) : (
|
||||
<>
|
||||
Enviar Link <ArrowRight size={18} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link to="/login" className="text-sm text-zinc-500 dark:text-dark-muted hover:text-zinc-800 dark:hover:text-zinc-200 flex items-center justify-center gap-1 transition-colors">
|
||||
<ArrowLeft size={14} /> Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
364
src/pages/Funnels.tsx
Normal file
364
src/pages/Funnels.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Layers, Plus, Edit, Trash2, ChevronUp, ChevronDown, Loader2, X, Users } from 'lucide-react';
|
||||
import { getFunnels, createFunnel, updateFunnel, deleteFunnel, createFunnelStage, updateFunnelStage, deleteFunnelStage, getTeams } from '../services/dataService';
|
||||
import { FunnelDef, FunnelStageDef } from '../types';
|
||||
|
||||
export const Funnels: React.FC = () => {
|
||||
const [funnels, setFunnels] = useState<FunnelDef[]>([]);
|
||||
const [teams, setTeams] = useState<any[]>([]);
|
||||
const [selectedFunnelId, setSelectedFunnelId] = useState<string | null>(null);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingStage, setEditingStage] = useState<FunnelStageDef | null>(null);
|
||||
const [formData, setFormData] = useState({ name: '', color_class: '' });
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Funnel creation state
|
||||
const [isFunnelModalOpen, setIsFunnelModalOpen] = useState(false);
|
||||
const [funnelName, setFunnelName] = useState('');
|
||||
|
||||
const tenantId = localStorage.getItem('ctms_tenant_id') || '';
|
||||
|
||||
const PRESET_COLORS = [
|
||||
{ label: 'Cinza (Neutro)', value: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border' },
|
||||
{ label: 'Azul (Início)', value: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800' },
|
||||
{ label: 'Roxo (Meio)', value: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800' },
|
||||
{ label: 'Laranja (Atenção)', value: 'bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-400 dark:border-orange-800' },
|
||||
{ label: 'Verde (Sucesso)', value: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' },
|
||||
{ label: 'Vermelho (Perda)', value: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' },
|
||||
];
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
const [fetchedFunnels, fetchedTeams] = await Promise.all([
|
||||
getFunnels(tenantId),
|
||||
getTeams(tenantId)
|
||||
]);
|
||||
setFunnels(fetchedFunnels);
|
||||
setTeams(fetchedTeams);
|
||||
if (!selectedFunnelId && fetchedFunnels.length > 0) {
|
||||
setSelectedFunnelId(fetchedFunnels[0].id);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [tenantId]);
|
||||
|
||||
const selectedFunnel = funnels.find(f => f.id === selectedFunnelId);
|
||||
|
||||
// --- Funnel Handlers ---
|
||||
const handleCreateFunnel = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const res = await createFunnel({ name: funnelName, tenantId });
|
||||
setSelectedFunnelId(res.id);
|
||||
setIsFunnelModalOpen(false);
|
||||
setFunnelName('');
|
||||
loadData();
|
||||
} catch (err) {
|
||||
alert("Erro ao criar funil.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteFunnel = async (id: string) => {
|
||||
if (funnels.length <= 1) {
|
||||
alert("Você precisa ter pelo menos um funil ativo.");
|
||||
return;
|
||||
}
|
||||
if (confirm('Tem certeza que deseja excluir este funil e todas as suas etapas?')) {
|
||||
await deleteFunnel(id);
|
||||
setSelectedFunnelId(null);
|
||||
loadData();
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleTeam = async (teamId: string) => {
|
||||
if (!selectedFunnel) return;
|
||||
const currentTeamIds = selectedFunnel.teamIds || [];
|
||||
const newTeamIds = currentTeamIds.includes(teamId)
|
||||
? currentTeamIds.filter(id => id !== teamId)
|
||||
: [...currentTeamIds, teamId];
|
||||
|
||||
// Optimistic
|
||||
const newFunnels = [...funnels];
|
||||
const idx = newFunnels.findIndex(f => f.id === selectedFunnel.id);
|
||||
newFunnels[idx].teamIds = newTeamIds;
|
||||
setFunnels(newFunnels);
|
||||
|
||||
await updateFunnel(selectedFunnel.id, { teamIds: newTeamIds });
|
||||
};
|
||||
|
||||
// --- Stage Handlers ---
|
||||
const handleSaveStage = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedFunnel) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
if (editingStage) {
|
||||
await updateFunnelStage(editingStage.id, formData);
|
||||
} else {
|
||||
await createFunnelStage(selectedFunnel.id, { ...formData, order_index: selectedFunnel.stages.length });
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
alert("Erro ao salvar etapa.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteStage = async (id: string) => {
|
||||
if (confirm('Tem certeza que deseja excluir esta etapa?')) {
|
||||
await deleteFunnelStage(id);
|
||||
loadData();
|
||||
}
|
||||
};
|
||||
|
||||
const handleMoveStage = async (index: number, direction: 'up' | 'down') => {
|
||||
if (!selectedFunnel) return;
|
||||
const stages = selectedFunnel.stages;
|
||||
if (direction === 'up' && index === 0) return;
|
||||
if (direction === 'down' && index === stages.length - 1) return;
|
||||
|
||||
const newIndex = direction === 'up' ? index - 1 : index + 1;
|
||||
|
||||
const tempOrder = stages[index].order_index;
|
||||
stages[index].order_index = stages[newIndex].order_index;
|
||||
stages[newIndex].order_index = tempOrder;
|
||||
|
||||
setFunnels([...funnels]); // trigger re-render
|
||||
|
||||
await Promise.all([
|
||||
updateFunnelStage(stages[index].id, { order_index: stages[index].order_index }),
|
||||
updateFunnelStage(stages[newIndex].id, { order_index: stages[newIndex].order_index })
|
||||
]);
|
||||
};
|
||||
|
||||
const openStageModal = (stage?: FunnelStageDef) => {
|
||||
if (stage) {
|
||||
setEditingStage(stage);
|
||||
setFormData({ name: stage.name, color_class: stage.color_class });
|
||||
} else {
|
||||
setEditingStage(null);
|
||||
setFormData({ name: '', color_class: PRESET_COLORS[0].value });
|
||||
}
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
if (loading && funnels.length === 0) return <div className="p-12 flex justify-center"><Loader2 className="animate-spin text-zinc-400" size={32} /></div>;
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto space-y-6 pb-12 transition-colors duration-300 flex flex-col md:flex-row gap-8">
|
||||
|
||||
{/* Sidebar: Funnels List */}
|
||||
<div className="w-full md:w-64 shrink-0 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Gerenciar Funis</h2>
|
||||
<button onClick={() => setIsFunnelModalOpen(true)} className="p-1.5 bg-zinc-100 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted rounded-lg hover:bg-zinc-200 dark:hover:bg-dark-border transition-colors">
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{funnels.map(f => (
|
||||
<button
|
||||
key={f.id}
|
||||
onClick={() => setSelectedFunnelId(f.id)}
|
||||
className={`text-left px-4 py-3 rounded-xl text-sm font-medium transition-all ${selectedFunnelId === f.id ? 'bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 shadow-md' : 'bg-white dark:bg-dark-card text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-dark-bg border border-zinc-200 dark:border-dark-border'}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span>{f.name}</span>
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded-full ${selectedFunnelId === f.id ? 'bg-white/20 dark:bg-black/20' : 'bg-zinc-100 dark:bg-dark-bg'}`}>{f.stages?.length || 0}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content: Selected Funnel Details */}
|
||||
<div className="flex-1 space-y-6">
|
||||
{selectedFunnel ? (
|
||||
<>
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-zinc-200 dark:border-dark-border pb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">{selectedFunnel.name}</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie as etapas deste funil e quais times o utilizam.</p>
|
||||
</div>
|
||||
<button onClick={() => handleDeleteFunnel(selectedFunnel.id)} className="text-red-500 hover:text-red-700 bg-red-50 dark:bg-red-900/20 px-3 py-2 rounded-lg text-sm font-semibold transition-colors flex items-center gap-2">
|
||||
<Trash2 size={16} /> Excluir Funil
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Teams Assignment */}
|
||||
<div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-bg/50">
|
||||
<h3 className="font-bold text-zinc-900 dark:text-zinc-50 flex items-center gap-2">
|
||||
<Users className="text-brand-yellow" size={18} /> Times Atribuídos
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{teams.length === 0 ? (
|
||||
<p className="text-sm text-zinc-500">Nenhum time cadastrado na organização.</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{teams.map(t => {
|
||||
const isAssigned = selectedFunnel.teamIds?.includes(t.id);
|
||||
return (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => handleToggleTeam(t.id)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-all ${isAssigned ? 'bg-brand-yellow/10 border-brand-yellow text-zinc-900 dark:text-zinc-100' : 'bg-white dark:bg-dark-input border-zinc-200 dark:border-dark-border text-zinc-500 dark:text-zinc-400 hover:border-zinc-300 dark:hover:border-zinc-700'}`}
|
||||
>
|
||||
{t.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-zinc-400 mt-4">Times não atribuídos a um funil específico usarão o Funil Padrão.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stages */}
|
||||
<div className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border shadow-sm overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-bg/50 flex justify-between items-center">
|
||||
<h3 className="font-bold text-zinc-900 dark:text-zinc-50 flex items-center gap-2">
|
||||
<Layers className="text-brand-yellow" size={18} /> Etapas do Funil
|
||||
</h3>
|
||||
<button onClick={() => openStageModal()} className="text-sm font-bold text-brand-yellow hover:underline flex items-center gap-1">
|
||||
<Plus size={16} /> Nova Etapa
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-zinc-100 dark:divide-dark-border">
|
||||
{selectedFunnel.stages?.sort((a,b) => a.order_index - b.order_index).map((f, index) => (
|
||||
<div key={f.id} className="p-4 flex items-center justify-between group hover:bg-zinc-50 dark:hover:bg-dark-bg transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<button onClick={() => handleMoveStage(index, 'up')} disabled={index === 0} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
|
||||
<ChevronUp size={16} />
|
||||
</button>
|
||||
<button onClick={() => handleMoveStage(index, 'down')} disabled={index === selectedFunnel.stages.length - 1} className="p-1 text-zinc-300 hover:text-zinc-900 dark:hover:text-white disabled:opacity-30 transition-colors">
|
||||
<ChevronDown size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${f.color_class}`}>
|
||||
{f.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => openStageModal(f)} className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-dark-input rounded-lg transition-colors">
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button onClick={() => handleDeleteStage(f.id)} className="p-2 text-zinc-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(!selectedFunnel.stages || selectedFunnel.stages.length === 0) && (
|
||||
<div className="p-8 text-center text-zinc-500 dark:text-dark-muted">Nenhuma etapa configurada neste funil.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="p-12 text-center text-zinc-500">Selecione ou crie um funil.</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Funnel Creation Modal */}
|
||||
{isFunnelModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
|
||||
<div className="bg-white dark:bg-dark-card rounded-xl shadow-xl w-full max-w-sm overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
|
||||
<h3 className="font-bold text-zinc-900 dark:text-zinc-50">Novo Funil</h3>
|
||||
<button onClick={() => setIsFunnelModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
|
||||
</div>
|
||||
<form onSubmit={handleCreateFunnel} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome do Funil</label>
|
||||
<input
|
||||
type="text"
|
||||
value={funnelName}
|
||||
onChange={e => setFunnelName(e.target.value)}
|
||||
placeholder="Ex: Vendas B2B"
|
||||
className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
|
||||
<button type="button" onClick={() => setIsFunnelModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
|
||||
<button type="submit" disabled={isSaving || !funnelName.trim()} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
|
||||
{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Criar Funil'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stage Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
|
||||
<div className="bg-white dark:bg-dark-card rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
<div className="px-6 py-4 border-b border-zinc-100 dark:border-dark-border flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
|
||||
<h3 className="font-bold text-zinc-900 dark:text-zinc-50">{editingStage ? 'Editar Etapa' : 'Nova Etapa'}</h3>
|
||||
<button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"><X size={20} /></button>
|
||||
</div>
|
||||
<form onSubmit={handleSaveStage} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome da Etapa</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({...formData, name: e.target.value})}
|
||||
placeholder="Ex: Qualificação"
|
||||
className="w-full bg-white dark:bg-dark-input border border-zinc-200 dark:border-dark-border p-3 rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-2 block">Cor Visual</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{PRESET_COLORS.map((color, i) => (
|
||||
<label key={i} className={`flex items-center gap-2 p-2 border rounded-lg cursor-pointer transition-all ${formData.color_class === color.value ? 'border-brand-yellow bg-yellow-50/50 dark:bg-yellow-900/10' : 'border-zinc-200 dark:border-dark-border hover:bg-zinc-50 dark:hover:bg-dark-input'}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
value={color.value}
|
||||
checked={formData.color_class === color.value}
|
||||
onChange={(e) => setFormData({...formData, color_class: e.target.value})}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className={`w-3 h-3 rounded-full border ${color.value.split(' ')[0]} ${color.value.split(' ')[2]}`}></span>
|
||||
<span className="text-xs font-medium text-zinc-700 dark:text-zinc-300">{color.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
|
||||
<button type="submit" disabled={isSaving} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
|
||||
{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Etapa'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
177
src/pages/Login.tsx
Normal file
177
src/pages/Login.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { Hexagon, Lock, Mail, ArrowRight, Loader2, Eye, EyeOff, AlertCircle } from 'lucide-react';
|
||||
import { login, logout } from '../services/dataService';
|
||||
|
||||
export const Login: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [emailError, setEmailError] = useState('');
|
||||
|
||||
// Auto-redirect if already logged in
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('ctms_token');
|
||||
const userId = localStorage.getItem('ctms_user_id');
|
||||
if (token && userId && token !== 'undefined' && token !== 'null') {
|
||||
// Opt to send them to root, AuthGuard will handle role-based routing
|
||||
navigate('/');
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
const validateEmail = (val: string) => {
|
||||
setEmail(val);
|
||||
if (!val) {
|
||||
setEmailError('E-mail é obrigatório');
|
||||
} else if (!/\S+@\S+\.\S+/.test(val)) {
|
||||
setEmailError('E-mail inválido');
|
||||
} else {
|
||||
setEmailError('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (emailError) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
logout();
|
||||
|
||||
try {
|
||||
const data = await login({ email, password });
|
||||
setIsLoading(false);
|
||||
if (data.user.role === 'super_admin') {
|
||||
navigate('/super-admin');
|
||||
} else {
|
||||
navigate('/');
|
||||
}
|
||||
} catch (err: any) {
|
||||
setIsLoading(false);
|
||||
setError(err.message || 'Erro ao fazer login. Verifique suas credenciais.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-dark-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8 transition-colors duration-300">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="flex justify-center items-center gap-2 text-zinc-900 dark:text-zinc-50">
|
||||
<div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
|
||||
<Hexagon size={32} fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-3xl font-bold tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
|
||||
</div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
|
||||
Acesse sua conta
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl shadow-zinc-200/50 dark:shadow-none rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
|
||||
<form className="space-y-6" onSubmit={handleLogin}>
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg flex items-center gap-2 text-red-600 dark:text-red-400 text-sm animate-in fade-in slide-in-from-top-1">
|
||||
<AlertCircle size={18} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Endereço de E-mail
|
||||
</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Mail className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => validateEmail(e.target.value)}
|
||||
className={`block w-full pl-10 pr-3 py-2 border ${emailError ? 'border-red-300 focus:ring-red-100 focus:border-red-500' : 'border-zinc-300 dark:border-dark-border focus:ring-brand-yellow/20 focus:border-brand-yellow'} rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 sm:text-sm transition-all`}
|
||||
placeholder="seu@email.com"
|
||||
/>
|
||||
</div>
|
||||
{emailError && <p className="mt-1 text-xs text-red-500">{emailError}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<label htmlFor="password" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Senha
|
||||
</label>
|
||||
<div className="text-sm">
|
||||
<Link to="/forgot-password" size="14" className="font-medium text-brand-yellow hover:text-yellow-600 transition-colors">
|
||||
Esqueceu a senha?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
autoComplete="current-password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="block w-full pl-10 pr-10 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 sm:text-sm focus:ring-brand-yellow/20 focus:border-brand-yellow transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-zinc-950 bg-brand-yellow hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-yellow transition-all disabled:opacity-70"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin h-5 w-5" /> Entrando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Entrar <ArrowRight size={18} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-8">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-zinc-200 dark:border-dark-border" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-white dark:bg-dark-card text-zinc-500 dark:text-dark-muted text-xs uppercase tracking-widest font-bold transition-colors">
|
||||
Powered by <a href="https://blyzer.com.br" target="_blank" rel="noopener noreferrer" className="text-brand-yellow hover:underline">Blyzer</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
332
src/pages/Origins.tsx
Normal file
332
src/pages/Origins.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
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: '', color_class: '' });
|
||||
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 PRESET_COLORS = [
|
||||
{ label: 'Cinza', value: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border' },
|
||||
{ label: 'Azul', value: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800' },
|
||||
{ label: 'Roxo', value: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800' },
|
||||
{ label: 'Verde', value: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' },
|
||||
{ label: 'Vermelho', value: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800' },
|
||||
{ label: 'Rosa', value: 'bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-400 dark:border-pink-800' },
|
||||
];
|
||||
|
||||
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, color_class: item.color_class || PRESET_COLORS[0].value });
|
||||
} else {
|
||||
setEditingItem(null);
|
||||
setFormData({ name: '', color_class: PRESET_COLORS[0].value });
|
||||
}
|
||||
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">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border ${o.color_class || 'bg-zinc-100 text-zinc-700 border-zinc-200'}`}>
|
||||
{o.name}
|
||||
</span>
|
||||
|
||||
<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>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-2 block">Cor Visual</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{PRESET_COLORS.map((color, i) => (
|
||||
<label key={i} className={`flex items-center gap-2 p-2 border rounded-lg cursor-pointer transition-all ${formData.color_class === color.value ? 'border-brand-yellow bg-yellow-50/50 dark:bg-yellow-900/10' : 'border-zinc-200 dark:border-dark-border hover:bg-zinc-50 dark:hover:bg-dark-input'}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
value={color.value}
|
||||
checked={formData.color_class === color.value}
|
||||
onChange={(e) => setFormData({...formData, color_class: e.target.value})}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className={`w-3 h-3 rounded-full border ${color.value.split(' ')[0]} ${color.value.split(' ')[2]}`}></span>
|
||||
<span className="text-xs font-medium text-zinc-700 dark:text-zinc-300">{color.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end gap-3 mt-6 border-t border-zinc-100 dark:border-dark-border pt-6">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg text-sm font-medium transition-colors">Cancelar</button>
|
||||
<button type="submit" disabled={isSaving} className="px-6 py-2 bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all shadow-sm disabled:opacity-70">
|
||||
{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Origem'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
147
src/pages/Ranking.tsx
Normal file
147
src/pages/Ranking.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Filter, Users, Building2 } from 'lucide-react';
|
||||
import { getAttendances, getUsers, getUserById, getTeams } from '../services/dataService';
|
||||
import { Attendance, DashboardFilter, User } from '../types';
|
||||
import { DateRangePicker } from '../components/DateRangePicker';
|
||||
import { SellersTable } from '../components/SellersTable';
|
||||
|
||||
interface SellerStats {
|
||||
total: number;
|
||||
converted: number;
|
||||
scoreSum: number;
|
||||
count: number;
|
||||
timeSum: number;
|
||||
}
|
||||
|
||||
export const Ranking: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [data, setData] = useState<Attendance[]>([]);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [teams, setTeams] = useState<any[]>([]);
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
|
||||
const [filters, setFilters] = useState<DashboardFilter>({
|
||||
dateRange: {
|
||||
start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // Last 30 days
|
||||
end: new Date(),
|
||||
},
|
||||
userId: 'all',
|
||||
teamId: 'all',
|
||||
funnelStage: 'all',
|
||||
origin: 'all',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const tenantId = localStorage.getItem('ctms_tenant_id');
|
||||
const uid = localStorage.getItem('ctms_user_id');
|
||||
|
||||
if (tenantId && uid) {
|
||||
const u = await getUserById(uid);
|
||||
setCurrentUser(u || null);
|
||||
|
||||
const [fetchedAttendances, fetchedUsers, fetchedTeams] = await Promise.all([
|
||||
getAttendances(tenantId, filters),
|
||||
getUsers(tenantId),
|
||||
getTeams(tenantId)
|
||||
]);
|
||||
setData(fetchedAttendances);
|
||||
setUsers(fetchedUsers);
|
||||
setTeams(fetchedTeams);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading ranking data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [filters]);
|
||||
|
||||
const sellersRanking = useMemo(() => {
|
||||
const stats = data.reduce<Record<string, SellerStats>>((acc, curr) => {
|
||||
if (!acc[curr.user_id]) {
|
||||
acc[curr.user_id] = { total: 0, converted: 0, scoreSum: 0, count: 0, timeSum: 0 };
|
||||
}
|
||||
acc[curr.user_id].total += 1;
|
||||
if (curr.converted) acc[curr.user_id].converted += 1;
|
||||
acc[curr.user_id].scoreSum += curr.score;
|
||||
acc[curr.user_id].timeSum += curr.first_response_time_min;
|
||||
acc[curr.user_id].count += 1;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return Object.entries(stats)
|
||||
.map(([userId, s]) => {
|
||||
const stat = s as SellerStats;
|
||||
const user = users.find(u => u.id === userId);
|
||||
if (!user) return null;
|
||||
return {
|
||||
user,
|
||||
total: stat.total,
|
||||
avgScore: (stat.scoreSum / stat.count).toFixed(1),
|
||||
conversionRate: ((stat.converted / stat.total) * 100).toFixed(1),
|
||||
responseTime: (stat.timeSum / stat.count).toFixed(0)
|
||||
};
|
||||
})
|
||||
.filter((item): item is NonNullable<typeof item> => item !== null);
|
||||
}, [data, users]);
|
||||
|
||||
const handleFilterChange = (key: keyof DashboardFilter, value: any) => {
|
||||
setFilters(prev => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
if (loading && data.length === 0) {
|
||||
return <div className="flex h-full items-center justify-center text-zinc-400 dark:text-dark-muted p-12">Carregando Ranking...</div>;
|
||||
}
|
||||
|
||||
const isAdmin = currentUser?.role === 'admin' || currentUser?.role === 'super_admin' || currentUser?.role === 'manager';
|
||||
|
||||
return (
|
||||
<div className="space-y-6 pb-8 transition-colors duration-300">
|
||||
<div className="bg-white dark:bg-dark-card p-4 rounded-xl shadow-sm border border-zinc-100 dark:border-dark-border flex flex-col gap-4">
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium">
|
||||
<Filter size={18} />
|
||||
<span>Filtros:</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
|
||||
<DateRangePicker
|
||||
dateRange={filters.dateRange}
|
||||
onChange={(range) => handleFilterChange('dateRange', range)}
|
||||
/>
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
|
||||
value={filters.userId}
|
||||
onChange={(e) => handleFilterChange('userId', e.target.value)}
|
||||
>
|
||||
<option value="all">Todos Usuários</option>
|
||||
{users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
|
||||
</select>
|
||||
|
||||
{currentUser?.role !== 'manager' && (
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border transition-all"
|
||||
value={filters.teamId}
|
||||
onChange={(e) => handleFilterChange('teamId', e.target.value)}
|
||||
>
|
||||
<option value="all">Todas Equipes</option>
|
||||
{teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||||
</select>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SellersTable data={sellersRanking} defaultShowAll={true} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
111
src/pages/Register.tsx
Normal file
111
src/pages/Register.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { Hexagon, Lock, Mail, ArrowRight, Loader2, User, Building } from 'lucide-react';
|
||||
import { register } from '../services/dataService';
|
||||
|
||||
export const Register: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
organizationName: ''
|
||||
});
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const success = await register(formData);
|
||||
if (success) {
|
||||
navigate('/login', { state: { message: 'Conta criada! Verifique seu e-mail para o código de ativação.' } });
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Erro ao criar conta.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-dark-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8 transition-colors duration-300">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="flex justify-center items-center gap-2 text-zinc-900 dark:text-zinc-50">
|
||||
<div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
|
||||
<Hexagon size={32} fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-3xl font-bold tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
|
||||
</div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
|
||||
Crie sua organização
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl shadow-zinc-200/50 dark:shadow-none rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
|
||||
<form className="space-y-5" onSubmit={handleRegister}>
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg text-red-600 dark:text-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Seu Nome</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<User className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input type="text" required value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all" placeholder="Nome Completo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="organization" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Nome da Organização</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Building className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input type="text" required value={formData.organizationName} onChange={e => setFormData({...formData, organizationName: e.target.value})} className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all" placeholder="Ex: Minha Empresa" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mail Corporativo</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Mail className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input type="email" required value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all" placeholder="seu@email.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Senha</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input type="password" required value={formData.password} onChange={e => setFormData({...formData, password: e.target.value})} className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all" placeholder="••••••••" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" disabled={isLoading} className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-zinc-950 bg-brand-yellow hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-yellow transition-all disabled:opacity-70">
|
||||
{isLoading ? <Loader2 className="animate-spin h-5 w-5" /> : <>Criar Conta <ArrowRight size={18} /></>}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<Link to="/login" className="text-sm font-medium text-brand-yellow hover:text-yellow-600">Já possui uma conta? Entre aqui</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
135
src/pages/ResetPassword.tsx
Normal file
135
src/pages/ResetPassword.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, useLocation, Link } from 'react-router-dom';
|
||||
import { Hexagon, Lock, ArrowRight, Loader2, CheckCircle2, AlertCircle } from 'lucide-react';
|
||||
import { resetPassword } from '../services/dataService';
|
||||
|
||||
export const ResetPassword: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const query = new URLSearchParams(location.search);
|
||||
const token = query.get('token') || '';
|
||||
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
setError('As senhas não coincidem.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await resetPassword(password, token); // No name sent here
|
||||
setIsSuccess(true);
|
||||
setTimeout(() => navigate('/login'), 3000);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Erro ao redefinir senha. O link pode estar expirado.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-dark-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8 transition-colors duration-300">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="flex justify-center items-center gap-2 text-zinc-900 dark:text-zinc-50">
|
||||
<div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
|
||||
<Hexagon size={32} fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-3xl font-bold tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
|
||||
</div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
|
||||
Crie uma nova senha
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
|
||||
{isSuccess ? (
|
||||
<div className="text-center py-4 space-y-4 animate-in fade-in zoom-in duration-300">
|
||||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Senha alterada!</h3>
|
||||
<p className="text-sm text-zinc-600 dark:text-dark-muted">
|
||||
Sua senha foi redefinida com sucesso. Redirecionando para o login...
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg flex items-center gap-2 text-red-600 dark:text-red-400 text-sm">
|
||||
<AlertCircle size={18} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Nova Senha
|
||||
</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Confirmar Nova Senha
|
||||
</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-zinc-950 bg-brand-yellow hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-yellow transition-all disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="animate-spin h-5 w-5" />
|
||||
) : (
|
||||
<>
|
||||
Redefinir Senha <ArrowRight size={18} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
156
src/pages/SetupAccount.tsx
Normal file
156
src/pages/SetupAccount.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate, useLocation, Link } from 'react-router-dom';
|
||||
import { Hexagon, Lock, ArrowRight, Loader2, CheckCircle2, AlertCircle, User } from 'lucide-react';
|
||||
import { resetPassword } from '../services/dataService';
|
||||
|
||||
export const SetupAccount: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const query = new URLSearchParams(location.search);
|
||||
const token = query.get('token') || '';
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
setError('As senhas não coincidem.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await resetPassword(password, token, name);
|
||||
setIsSuccess(true);
|
||||
setTimeout(() => navigate('/login'), 3000);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Erro ao redefinir senha. O link pode estar expirado.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-dark-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8 transition-colors duration-300">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="flex justify-center items-center gap-2 text-zinc-900 dark:text-zinc-50">
|
||||
<div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
|
||||
<Hexagon size={32} fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-3xl font-bold tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
|
||||
</div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
|
||||
Finalize seu cadastro
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
|
||||
{isSuccess ? (
|
||||
<div className="text-center py-4 space-y-4 animate-in fade-in zoom-in duration-300">
|
||||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
|
||||
<CheckCircle2 size={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Tudo pronto!</h3>
|
||||
<p className="text-sm text-zinc-600 dark:text-dark-muted">
|
||||
Seu perfil foi atualizado com sucesso. Redirecionando para o login...
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg flex items-center gap-2 text-red-600 dark:text-red-400 text-sm">
|
||||
<AlertCircle size={18} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Seu Nome Completo
|
||||
</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<User className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
required
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
|
||||
placeholder="João da Silva"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Nova Senha
|
||||
</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" senior-admin-password className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Confirmar Nova Senha
|
||||
</label>
|
||||
<div className="mt-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Lock className="h-5 w-5 text-zinc-400 dark:text-dark-muted" />
|
||||
</div>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-300 dark:border-dark-border rounded-lg bg-white dark:bg-dark-input text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:ring-brand-yellow/20 focus:border-brand-yellow sm:text-sm transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-zinc-950 bg-brand-yellow hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-yellow transition-all disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="animate-spin h-5 w-5" />
|
||||
) : (
|
||||
<>
|
||||
Salvar e Entrar <ArrowRight size={18} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
325
src/pages/SuperAdmin.tsx
Normal file
325
src/pages/SuperAdmin.tsx
Normal file
@@ -0,0 +1,325 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Building2, Users, MessageSquare, Plus, Search,
|
||||
Edit, Trash2, ChevronDown, ChevronUp, ChevronsUpDown, X, CheckCircle2, Loader2, LogIn
|
||||
} from 'lucide-react';
|
||||
import { getTenants, createTenant, deleteTenant, updateTenant, impersonateTenant } from '../services/dataService';
|
||||
import { Tenant } from '../types';
|
||||
import { DateRangePicker } from '../components/DateRangePicker';
|
||||
import { KPICard } from '../components/KPICard';
|
||||
|
||||
export const SuperAdmin: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [dateRange, setDateRange] = useState({
|
||||
start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
|
||||
end: new Date()
|
||||
});
|
||||
const [selectedTenantId, setSelectedTenantId] = useState<string>('all');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [tenants, setTenants] = useState<Tenant[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingTenant, setEditingTenant] = useState<Tenant | null>(null);
|
||||
|
||||
const [sortKey, setSortKey] = useState<keyof Tenant>('created_at');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
|
||||
const loadTenants = async () => {
|
||||
setLoading(true);
|
||||
const data = await getTenants();
|
||||
setTenants(data);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
loadTenants();
|
||||
}, []);
|
||||
|
||||
const totalTenants = tenants.length;
|
||||
const totalUsersGlobal = tenants.reduce((acc, t) => acc + (t.user_count || 0), 0);
|
||||
const totalAttendancesGlobal = tenants.reduce((acc, t) => acc + (t.attendance_count || 0), 0);
|
||||
|
||||
const filteredTenants = useMemo(() => {
|
||||
let data = tenants;
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
data = data.filter(t =>
|
||||
t.name.toLowerCase().includes(q) ||
|
||||
t.admin_email?.toLowerCase().includes(q) ||
|
||||
t.slug?.toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
if (selectedTenantId !== 'all') {
|
||||
data = data.filter(t => t.id === selectedTenantId);
|
||||
}
|
||||
return [...data].sort((a, b) => {
|
||||
const aVal = a[sortKey];
|
||||
const bVal = b[sortKey];
|
||||
if (aVal === undefined) return 1;
|
||||
if (bVal === undefined) return -1;
|
||||
if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}, [tenants, searchQuery, selectedTenantId, sortKey, sortDirection]);
|
||||
|
||||
const handleSort = (key: keyof Tenant) => {
|
||||
if (sortKey === key) {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortKey(key);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (tenant: Tenant) => {
|
||||
setEditingTenant(tenant);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (id === 'system') {
|
||||
alert('A organização do sistema não pode ser excluída.');
|
||||
return;
|
||||
}
|
||||
if (confirm('Tem certeza que deseja excluir esta organização? Esta ação não pode ser desfeita.')) {
|
||||
const success = await deleteTenant(id);
|
||||
if (success) {
|
||||
setTenants(prev => prev.filter(t => t.id !== id));
|
||||
} else {
|
||||
alert('Erro ao excluir a organização do servidor.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleImpersonate = async (tenantId: string) => {
|
||||
try {
|
||||
if (tenantId === 'system') {
|
||||
alert('Você já está na organização do sistema.');
|
||||
return;
|
||||
}
|
||||
await impersonateTenant(tenantId);
|
||||
} catch (err: any) {
|
||||
alert(err.message || 'Erro ao tentar entrar na organização.');
|
||||
}
|
||||
};
|
||||
|
||||
const [successMessage, setSuccessMessage] = useState('');
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const handleSaveTenant = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setErrorMessage('');
|
||||
setSuccessMessage('');
|
||||
setIsSaving(true);
|
||||
const form = e.target as HTMLFormElement;
|
||||
const name = (form.elements.namedItem('name') as HTMLInputElement).value;
|
||||
const slug = (form.elements.namedItem('slug') as HTMLInputElement).value;
|
||||
const admin_email = (form.elements.namedItem('admin_email') as HTMLInputElement).value;
|
||||
const status = (form.elements.namedItem('status') as HTMLSelectElement).value;
|
||||
|
||||
try {
|
||||
if (editingTenant) {
|
||||
const success = await updateTenant(editingTenant.id, { name, slug, admin_email, status });
|
||||
if (success) {
|
||||
setSuccessMessage('Organização atualizada com sucesso!');
|
||||
loadTenants();
|
||||
setTimeout(() => {
|
||||
setIsModalOpen(false);
|
||||
setSuccessMessage('');
|
||||
setEditingTenant(null);
|
||||
setIsSaving(false);
|
||||
}, 2000);
|
||||
} else {
|
||||
setErrorMessage('Erro ao atualizar organização.');
|
||||
setIsSaving(false);
|
||||
}
|
||||
} else {
|
||||
const result = await createTenant({ name, slug, admin_email, status });
|
||||
if (result.success) {
|
||||
setSuccessMessage(result.message || 'Organização criada com sucesso!');
|
||||
loadTenants();
|
||||
setTimeout(() => {
|
||||
setIsModalOpen(false);
|
||||
setSuccessMessage('');
|
||||
setIsSaving(false);
|
||||
}, 3000);
|
||||
} else {
|
||||
setErrorMessage(result.message || 'Erro ao salvar organização.');
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
setErrorMessage('Ocorreu um erro inesperado.');
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const SortIcon = ({ column }: { column: keyof Tenant }) => {
|
||||
if (sortKey !== column) return <ChevronsUpDown size={14} className="text-zinc-300 dark:text-dark-muted" />;
|
||||
return sortDirection === 'asc' ? <ChevronUp size={14} className="text-brand-yellow" /> : <ChevronDown size={14} className="text-brand-yellow" />;
|
||||
};
|
||||
|
||||
const StatusBadge = ({ status }: { status?: string }) => {
|
||||
const styles = {
|
||||
active: 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800',
|
||||
inactive: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border',
|
||||
trial: 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800',
|
||||
};
|
||||
const style = styles[status as keyof typeof styles] || styles.inactive;
|
||||
let label = status === 'active' ? 'Ativo' : status === 'inactive' ? 'Inativo' : status === 'trial' ? 'Teste' : 'Desconhecido';
|
||||
return <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold border capitalize ${style}`}>{label}</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8 max-w-7xl mx-auto pb-8 transition-colors duration-300">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Painel Super Admin</h1>
|
||||
<p className="text-zinc-500 dark:text-dark-muted text-sm">Gerencie organizações e visualize estatísticas globais.</p>
|
||||
</div>
|
||||
<button onClick={() => { setEditingTenant(null); setIsModalOpen(true); }} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg flex items-center gap-2 whitespace-nowrap text-sm font-bold hover:opacity-90 transition-all shadow-sm">
|
||||
<Plus size={16} /> Adicionar Organização
|
||||
</button>
|
||||
</div>
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<KPICard title="Total de Organizações" value={totalTenants} icon={Building2} colorClass="text-blue-600" trend="up" trendValue="+1 este mês" />
|
||||
<KPICard title="Total de Usuários" value={totalUsersGlobal} icon={Users} colorClass="text-purple-600" subValue="Em todas as organizações" />
|
||||
<KPICard title="Total de Atendimentos" value={totalAttendancesGlobal.toLocaleString()} icon={MessageSquare} colorClass="text-green-600" trend="up" trendValue="+12%" />
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card p-4 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm flex flex-col md:flex-row gap-4 justify-between items-center transition-colors">
|
||||
<div className="flex items-center gap-3 w-full md:w-auto">
|
||||
<DateRangePicker dateRange={dateRange} onChange={setDateRange} />
|
||||
<div className="h-8 w-px bg-zinc-200 dark:bg-dark-border hidden md:block" />
|
||||
<select className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-dark-border w-full md:w-48 transition-all" value={selectedTenantId} onChange={(e) => setSelectedTenantId(e.target.value)}>
|
||||
<option value="all">Todas Organizações</option>
|
||||
{tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="relative w-full md:w-64">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 dark:text-dark-muted" />
|
||||
<input type="text" placeholder="Buscar organizações..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-9 pr-4 py-2 bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden transition-colors">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-zinc-50/50 dark:bg-dark-bg/50 text-zinc-500 dark:text-dark-muted text-xs uppercase tracking-wider border-b border-zinc-100 dark:border-dark-border">
|
||||
<th className="px-6 py-4 font-semibold cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('name')}>
|
||||
<div className="flex items-center gap-2">Organização <SortIcon column="name" /></div>
|
||||
</th>
|
||||
<th className="px-6 py-4 font-semibold">Slug</th>
|
||||
<th className="px-6 py-4 font-semibold cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('status')}>
|
||||
<div className="flex items-center gap-2">Status <SortIcon column="status" /></div>
|
||||
</th>
|
||||
<th className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('user_count')}>
|
||||
<div className="flex items-center justify-center gap-2">Usuários <SortIcon column="user_count" /></div>
|
||||
</th>
|
||||
<th className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-zinc-50 dark:hover:bg-dark-border select-none" onClick={() => handleSort('attendance_count')}>
|
||||
<div className="flex items-center justify-center gap-2">Atendimentos <SortIcon column="attendance_count" /></div>
|
||||
</th>
|
||||
<th className="px-6 py-4 font-semibold text-right">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-dark-border text-sm">
|
||||
{filteredTenants.map((tenant) => (
|
||||
<tr key={tenant.id} className="hover:bg-zinc-50/50 dark:hover:bg-zinc-800/50 transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-zinc-100 dark:bg-dark-bg flex items-center justify-center text-zinc-400 dark:text-dark-muted font-bold border border-zinc-200 dark:border-dark-border">
|
||||
{tenant.logo_url ? <img src={tenant.logo_url} className="w-full h-full object-cover rounded-lg" alt="" /> : <Building2 size={20} />}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-zinc-900 dark:text-zinc-100">{tenant.name}</div>
|
||||
<div className="text-xs text-zinc-500 dark:text-dark-muted">{tenant.admin_email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-zinc-600 dark:text-dark-muted font-mono text-xs">{tenant.slug}</td>
|
||||
<td className="px-6 py-4"><StatusBadge status={tenant.status} /></td>
|
||||
<td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.user_count}</td>
|
||||
<td className="px-6 py-4 text-center font-medium text-zinc-700 dark:text-zinc-300">{tenant.attendance_count?.toLocaleString()}</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex items-center justify-end gap-2 transition-opacity">
|
||||
{tenant.id !== 'system' && (
|
||||
<button onClick={() => handleImpersonate(tenant.id)} title="Entrar na Organização" className="p-2 text-zinc-400 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded-lg transition-colors">
|
||||
<LogIn size={16} />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={() => handleEdit(tenant)} title="Editar" className="p-2 text-zinc-400 hover:text-brand-yellow hover:bg-zinc-50 dark:hover:bg-dark-bg rounded-lg transition-colors"><Edit size={16} /></button>
|
||||
<button onClick={() => handleDelete(tenant.id)} title="Excluir" 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>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="px-6 py-4 border-t border-zinc-100 dark:border-dark-border bg-zinc-50/30 dark:bg-dark-bg/30 text-xs text-zinc-500 dark:text-dark-muted flex justify-between items-center transition-colors">
|
||||
<span>Mostrando {filteredTenants.length} de {tenants.length} organizações</span>
|
||||
<div className="flex gap-2">
|
||||
<button disabled className="px-3 py-1 border dark:border-dark-border rounded bg-white dark:bg-dark-card disabled:opacity-50">Ant</button>
|
||||
<button disabled className="px-3 py-1 border dark:border-dark-border rounded bg-white dark:bg-dark-card disabled:opacity-50">Próx</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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-lg overflow-hidden animate-in fade-in zoom-in duration-200 border border-transparent dark:border-dark-border transition-colors">
|
||||
<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">{editingTenant ? 'Editar Organização' : 'Adicionar Nova Organização'}</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={handleSaveTenant} className="p-6 space-y-4">
|
||||
{successMessage && (
|
||||
<div className="bg-green-50 dark:bg-green-900/20 border border-green-100 dark:border-green-900/30 p-3 rounded-lg flex items-center gap-2 text-green-700 dark:text-green-400 text-sm animate-in fade-in slide-in-from-top-1">
|
||||
<CheckCircle2 size={16} /> {successMessage}
|
||||
</div>
|
||||
)}
|
||||
{errorMessage && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg flex items-center gap-2 text-red-700 dark:text-red-400 text-sm animate-in fade-in slide-in-from-top-1">
|
||||
<X size={16} /> {errorMessage}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Nome da Organização</label>
|
||||
<input type="text" name="name" defaultValue={editingTenant?.name} className="w-full px-3 py-2 bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border 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="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Slug</label>
|
||||
<input type="text" name="slug" defaultValue={editingTenant?.slug} className="w-full px-3 py-2 bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-brand-yellow/20 outline-none transition-all" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Status</label>
|
||||
<select name="status" defaultValue={editingTenant?.status || 'active'} className="w-full px-3 py-2 bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-zinc-100 outline-none transition-all">
|
||||
<option value="active">Ativo</option>
|
||||
<option value="inactive">Inativo</option>
|
||||
<option value="trial">Teste</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">E-mail do Admin</label>
|
||||
<input type="email" name="admin_email" defaultValue={editingTenant?.admin_email} className="w-full px-3 py-2 bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border 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 border-t dark:border-dark-border mt-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-4 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} /> : (editingTenant ? 'Salvar Alterações' : 'Criar Organização')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
303
src/pages/TeamManagement.tsx
Normal file
303
src/pages/TeamManagement.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Users, Plus, Mail, Search, X, Edit, Trash2, Loader2, AlertTriangle } from 'lucide-react';
|
||||
import { getUsers, getTeams, createMember, deleteUser, updateUser, getUserById, getTenants } from '../services/dataService';
|
||||
import { User, Tenant } from '../types';
|
||||
|
||||
export const TeamManagement: React.FC = () => {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [teams, setTeams] = useState<any[]>([]);
|
||||
const [tenants, setTenants] = useState<Tenant[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [tenantFilter, setTenantFilter] = useState('all');
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [userToDelete, setUserToDelete] = useState<User | null>(null);
|
||||
const [deleteConfirmName, setDeleteConfirmName] = useState('');
|
||||
const [editingUser, setEditingUser] = useState<User | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
role: 'agent' as any,
|
||||
team_id: '',
|
||||
status: 'active' as any,
|
||||
tenant_id: ''
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
const tid = localStorage.getItem('ctms_tenant_id');
|
||||
const uid = localStorage.getItem('ctms_user_id');
|
||||
if (!tid) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const me = uid ? await getUserById(uid) : null;
|
||||
|
||||
const isSuperAdmin = me?.role === 'super_admin';
|
||||
const effectiveTid = isSuperAdmin ? 'all' : tid;
|
||||
|
||||
const promises: Promise<any>[] = [
|
||||
getUsers(effectiveTid),
|
||||
getTeams(effectiveTid)
|
||||
];
|
||||
|
||||
if (isSuperAdmin) {
|
||||
promises.push(getTenants());
|
||||
}
|
||||
|
||||
const results = await Promise.all(promises);
|
||||
|
||||
setUsers(isSuperAdmin ? results[0] : results[0].filter((u: User) => u.role !== 'super_admin'));
|
||||
setTeams(results[1]);
|
||||
if (isSuperAdmin && results[2]) {
|
||||
setTenants(results[2]);
|
||||
}
|
||||
|
||||
if (me) setCurrentUser(me);
|
||||
} catch (err) { console.error(err); } finally { setLoading(false); }
|
||||
};
|
||||
|
||||
useEffect(() => { loadData(); }, []);
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const tid = localStorage.getItem('ctms_tenant_id') || '';
|
||||
const finalTenantId = currentUser?.role === 'super_admin' ? formData.tenant_id : tid;
|
||||
|
||||
if (editingUser) {
|
||||
const success = await updateUser(editingUser.id, { ...formData, tenant_id: finalTenantId });
|
||||
if (success) { setIsModalOpen(false); loadData(); }
|
||||
} else {
|
||||
await createMember({ ...formData, tenant_id: finalTenantId });
|
||||
setIsModalOpen(false);
|
||||
loadData();
|
||||
}
|
||||
} catch (err: any) {
|
||||
alert(err.message || 'Erro ao salvar membro. Verifique se o e-mail já não está cadastrado.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!userToDelete || deleteConfirmName !== userToDelete.name) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
if (await deleteUser(userToDelete.id)) { setIsDeleteModalOpen(false); loadData(); }
|
||||
} catch (err) { alert('Erro ao excluir'); } finally { setIsSaving(false); }
|
||||
};
|
||||
|
||||
if (loading && users.length === 0) return <div className="flex h-screen items-center justify-center text-zinc-400 dark:text-dark-muted transition-colors">Carregando...</div>;
|
||||
|
||||
const canManage = currentUser?.role === 'admin' || currentUser?.role === 'super_admin' || currentUser?.role === 'manager';
|
||||
const filtered = users.filter(u =>
|
||||
(u.name.toLowerCase().includes(searchTerm.toLowerCase()) || u.email.toLowerCase().includes(searchTerm.toLowerCase())) &&
|
||||
(tenantFilter === 'all' || u.tenant_id === tenantFilter)
|
||||
);
|
||||
|
||||
const getRoleLabel = (role: string) => {
|
||||
if (role === 'super_admin') return 'Super Admin';
|
||||
if (role === 'admin') return 'Admin';
|
||||
if (role === 'manager') return 'Gerente';
|
||||
return 'Agente';
|
||||
};
|
||||
|
||||
const getRoleBadge = (role: string) => {
|
||||
switch (role) {
|
||||
case 'admin': return 'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800';
|
||||
case 'manager': return 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800';
|
||||
default: return 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8 max-w-7xl mx-auto pb-12 transition-colors duration-300">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text tracking-tight">Membros</h1>
|
||||
<p className="text-zinc-500 dark:text-dark-muted text-sm">Visualize e gerencie as funções dos membros da sua organização.</p>
|
||||
</div>
|
||||
{canManage && (
|
||||
<button onClick={() => { setEditingUser(null); setFormData({name:'', email:'', role:'agent', team_id:'', status:'active'}); setIsModalOpen(true); }} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg flex items-center gap-2 text-sm font-bold shadow-sm hover:opacity-90 transition-all">
|
||||
<Plus size={16} /> Adicionar Membro
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden">
|
||||
<div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50 dark:bg-dark-bg/50 flex flex-col sm:flex-row gap-4">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 dark:text-dark-muted" />
|
||||
<input type="text" placeholder="Buscar membros..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full pl-9 pr-4 py-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border rounded-lg text-sm text-zinc-900 dark:text-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" />
|
||||
</div>
|
||||
{currentUser?.role === 'super_admin' && (
|
||||
<select
|
||||
value={tenantFilter}
|
||||
onChange={e => setTenantFilter(e.target.value)}
|
||||
className="bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer w-full sm:w-auto transition-all"
|
||||
>
|
||||
<option value="all">Todas Organizações</option>
|
||||
{tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="bg-zinc-50 dark:bg-dark-bg/50 text-zinc-500 dark:text-dark-muted text-xs uppercase font-bold border-b dark:border-dark-border">
|
||||
<th className="px-6 py-4">Usuário</th>
|
||||
{currentUser?.role === 'super_admin' && <th className="px-6 py-4">Organização</th>}
|
||||
<th className="px-6 py-4">Função</th>
|
||||
<th className="px-6 py-4">Time</th>
|
||||
<th className="px-6 py-4">Status</th>
|
||||
{canManage && <th className="px-6 py-4 text-right">Ações</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y dark:divide-dark-border text-sm">
|
||||
{filtered.map(user => (
|
||||
<tr key={user.id} className="hover:bg-zinc-50 dark:hover:bg-dark-border/50 transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={user.avatar_url
|
||||
? (user.avatar_url.startsWith('http') ? user.avatar_url : `${import.meta.env.PROD ? '' : 'http://localhost:3001'}${user.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`}
|
||||
alt=""
|
||||
className="w-10 h-10 rounded-full border border-zinc-200 dark:border-dark-border object-cover"
|
||||
/>
|
||||
<span className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-dark-card ${user.status === 'active' ? 'bg-green-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}></span>
|
||||
</div>
|
||||
<div>
|
||||
<Link to={`/users/${user.slug || user.id}`} className="font-bold text-zinc-900 dark:text-dark-text hover:underline">{user.name}</Link>
|
||||
<div className="text-xs text-zinc-500 dark:text-dark-muted">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{currentUser?.role === 'super_admin' && (
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-zinc-600 dark:text-zinc-300 font-medium">
|
||||
{tenants.find(t => t.id === user.tenant_id)?.name || user.tenant_id}
|
||||
</span>
|
||||
</td>
|
||||
)}
|
||||
<td className="px-6 py-4">
|
||||
<span className={`px-2.5 py-0.5 rounded-full text-xs font-bold border capitalize ${getRoleBadge(user.role)}`}>{getRoleLabel(user.role)}</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-zinc-600 dark:text-zinc-300 font-medium">{teams.find(t => t.id === user.team_id)?.name || '-'}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-bold border ${user.status === 'active' ? 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800' : 'bg-zinc-100 text-zinc-500 border-zinc-200 dark:bg-dark-input dark:text-dark-muted dark:border-dark-border'}`}>{user.status === 'active' ? 'Ativo' : 'Inativo'}</span>
|
||||
</td>
|
||||
{canManage && (
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex justify-end gap-2 transition-opacity">
|
||||
<button onClick={() => { setEditingUser(user); setFormData({name:user.name, email:user.email, role:user.role as any, team_id:user.team_id||'', status:user.status as any, tenant_id: user.tenant_id||''}); setIsModalOpen(true); }} className="p-2 hover:bg-zinc-100 dark:hover:bg-dark-border text-zinc-400 hover:text-zinc-900 dark:hover:text-dark-text rounded-lg transition-colors"><Edit size={16} /></button>
|
||||
<button onClick={() => { setUserToDelete(user); setDeleteConfirmName(''); setIsDeleteModalOpen(true); }} className="p-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-zinc-400 hover:text-red-600 dark:hover:text-red-400 rounded-lg transition-colors"><Trash2 size={16} /></button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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-2xl p-8 w-full max-w-lg shadow-2xl animate-in zoom-in duration-200 transition-colors border border-transparent dark:border-dark-border">
|
||||
<h3 className="text-xl font-bold text-zinc-900 dark:text-dark-text mb-6">{editingUser ? 'Editar Usuário' : 'Novo Membro'}</h3>
|
||||
<form onSubmit={handleSave} className="space-y-5">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Nome Completo</label>
|
||||
<input type="text" value={formData.name} onChange={e => setFormData({...formData, name:e.target.value})} 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-dark-text outline-none focus:ring-2 focus:ring-brand-yellow/20" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">E-mail</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={e => setFormData({...formData, email:e.target.value})}
|
||||
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-dark-text disabled:bg-zinc-50 dark:disabled:bg-dark-bg/50 dark:disabled:text-dark-muted"
|
||||
disabled={
|
||||
!!editingUser && (
|
||||
currentUser?.role === 'manager' ||
|
||||
(editingUser.role === 'admin' && currentUser?.role !== 'super_admin') ||
|
||||
(editingUser.role === 'super_admin' && currentUser?.role !== 'super_admin')
|
||||
)
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{currentUser?.role === 'super_admin' && (
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Organização</label>
|
||||
<select value={formData.tenant_id} onChange={e => setFormData({...formData, tenant_id: e.target.value})} 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-dark-text" required>
|
||||
<option value="">Selecione uma organização</option>
|
||||
{tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Função</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={e => setFormData({...formData, role: e.target.value as any})}
|
||||
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-dark-text disabled:bg-zinc-50 dark:disabled:bg-dark-bg/50 dark:disabled:text-dark-muted"
|
||||
disabled={
|
||||
(currentUser?.role === 'manager') ||
|
||||
(editingUser?.role === 'admin' && currentUser?.role !== 'super_admin') ||
|
||||
(editingUser?.role === 'super_admin' && currentUser?.role !== 'super_admin')
|
||||
}
|
||||
>
|
||||
<option value="agent">Agente</option>
|
||||
<option value="manager">Gerente</option>
|
||||
{currentUser?.role !== 'manager' && <option value="admin">Admin</option>}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Time</label>
|
||||
<select value={formData.team_id} onChange={e => setFormData({...formData, team_id: e.target.value})} 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-dark-text">
|
||||
<option value="">Nenhum</option>
|
||||
{teams.filter(t => !formData.tenant_id || t.tenant_id === formData.tenant_id).map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1 block">Status</label>
|
||||
<select value={formData.status} onChange={e => setFormData({...formData, status: e.target.value as any})} 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-dark-text">
|
||||
<option value="active">Ativo</option>
|
||||
<option value="inactive">Inativo</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 pt-6 border-t dark:border-dark-border mt-6">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-6 py-2.5 text-sm font-medium text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg transition-colors">Cancelar</button>
|
||||
<button type="submit" disabled={isSaving} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-8 py-2.5 rounded-lg text-sm font-bold flex items-center gap-2 hover:opacity-90 transition-all">{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Alterações'}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isDeleteModalOpen && userToDelete && (
|
||||
<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-2xl p-8 w-full max-w-md shadow-xl animate-in zoom-in duration-200 text-center transition-colors border border-transparent dark:border-dark-border">
|
||||
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full flex items-center justify-center mx-auto mb-4"><AlertTriangle size={32} /></div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 dark:text-dark-text mb-2">Excluir {userToDelete.name}?</h3>
|
||||
<p className="text-sm text-zinc-500 dark:text-dark-muted mb-8 leading-relaxed">Esta ação é <strong>permanente</strong>. Para confirmar, digite o nome completo dele abaixo:</p>
|
||||
<input type="text" value={deleteConfirmName} onChange={e => setDeleteConfirmName(e.target.value)} className="w-full bg-white dark:bg-dark-input border-2 border-red-50 dark:border-red-900/20 p-3 rounded-xl mb-8 text-center font-bold text-base text-zinc-900 dark:text-dark-text outline-none focus:ring-2 focus:ring-red-100 dark:focus:ring-red-900/40 transition-all" placeholder="Nome completo" />
|
||||
<div className="flex gap-3">
|
||||
<button onClick={() => setIsDeleteModalOpen(false)} className="flex-1 py-3 text-sm font-bold text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-border rounded-lg border border-zinc-100 dark:border-dark-border transition-colors">Cancelar</button>
|
||||
<button onClick={handleConfirmDelete} disabled={isSaving || deleteConfirmName !== userToDelete.name} className="flex-1 py-3 text-sm font-bold bg-red-600 text-white rounded-lg disabled:opacity-50 shadow-lg shadow-red-200 dark:shadow-none transition-all hover:bg-red-700">Excluir para sempre</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
140
src/pages/Teams.tsx
Normal file
140
src/pages/Teams.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Building2, Users, Plus, Search, Target, ArrowUpRight, Loader2, Edit2, X, Trash2 } from 'lucide-react';
|
||||
import { getTeams, getUsers, getAttendances, createTeam, updateTeam, deleteTeam, getUserById } from '../services/dataService';
|
||||
import { User, Attendance } from '../types';
|
||||
|
||||
export const Teams: React.FC = () => {
|
||||
const [teams, setTeams] = useState<any[]>([]);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [attendances, setAttendances] = useState<Attendance[]>([]);
|
||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingTeam, setEditingTeam] = useState<any | null>(null);
|
||||
const [formData, setFormData] = useState({ name: '', description: '' });
|
||||
|
||||
const loadData = async () => {
|
||||
const tid = localStorage.getItem('ctms_tenant_id');
|
||||
const uid = localStorage.getItem('ctms_user_id');
|
||||
if (!tid) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const [ft, fu, fa, me] = await Promise.all([
|
||||
getTeams(tid),
|
||||
getUsers(tid),
|
||||
getAttendances(tid, { dateRange: { start: new Date(0), end: new Date() }, userId: 'all', teamId: 'all' }),
|
||||
uid ? getUserById(uid) : null
|
||||
]);
|
||||
setTeams(ft); setUsers(fu); setAttendances(fa);
|
||||
if (me) setCurrentUser(me);
|
||||
} catch (e) { console.error(e); } finally { setLoading(false); }
|
||||
};
|
||||
|
||||
useEffect(() => { loadData(); }, []);
|
||||
|
||||
const stats = useMemo(() => teams.map(t => {
|
||||
const tu = users.filter(u => u.team_id === t.id);
|
||||
const ta = attendances.filter(a => tu.some(u => u.id === a.user_id));
|
||||
const wins = ta.filter(a => a.converted).length;
|
||||
const rate = ta.length > 0 ? (wins / ta.length) * 100 : 0;
|
||||
return { ...t, memberCount: tu.length, rate: rate.toFixed(1) };
|
||||
}), [teams, users, attendances]);
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const tid = localStorage.getItem('ctms_tenant_id') || '';
|
||||
const success = editingTeam
|
||||
? await updateTeam(editingTeam.id, formData)
|
||||
: await createTeam({ ...formData, tenantId: tid });
|
||||
if (success) { setIsModalOpen(false); loadData(); }
|
||||
} catch (err) { alert('Erro ao salvar'); } finally { setIsSaving(false); }
|
||||
};
|
||||
|
||||
const handleDeleteTeam = async (id: string) => {
|
||||
if (confirm('Tem certeza que deseja excluir este time? Todos os usuários deste time ficarão sem time atribuído.')) {
|
||||
await deleteTeam(id);
|
||||
loadData();
|
||||
}
|
||||
};
|
||||
if (loading && teams.length === 0) return <div className="p-12 text-center text-zinc-400 dark:text-dark-muted transition-colors">Carregando...</div>;
|
||||
|
||||
const canManage = currentUser?.role === 'admin' || currentUser?.role === 'super_admin';
|
||||
|
||||
return (
|
||||
<div className="space-y-8 max-w-7xl mx-auto pb-12 transition-colors duration-300">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">
|
||||
{currentUser?.role === 'manager' ? 'Meu Time' : 'Times'}
|
||||
</h1>
|
||||
<p className="text-zinc-500 dark:text-dark-muted text-sm">
|
||||
{currentUser?.role === 'manager' ? 'Visualize o desempenho do seu grupo de vendas.' : 'Visualize o desempenho e gerencie seus grupos de vendas.'}
|
||||
</p>
|
||||
</div>
|
||||
{canManage && (
|
||||
<button onClick={() => { setEditingTeam(null); setFormData({name:'', description:''}); setIsModalOpen(true); }} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-4 py-2 rounded-lg flex items-center gap-2 text-sm font-bold shadow-sm hover:opacity-90 transition-all">
|
||||
<Plus size={16} /> Novo Time
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{stats.map(t => (
|
||||
<div key={t.id} className="bg-white dark:bg-dark-card rounded-2xl border border-zinc-200 dark:border-dark-border p-6 shadow-sm group hover:shadow-md transition-all">
|
||||
<div className="flex justify-between mb-6">
|
||||
<div className="p-3 bg-zinc-50 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted rounded-xl border border-zinc-100 dark:border-dark-border"><Building2 size={24} /></div>
|
||||
{canManage && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => { setEditingTeam(t); setFormData({name:t.name, description:t.description||''}); setIsModalOpen(true); }} className="text-zinc-400 dark:text-dark-muted hover:text-zinc-900 dark:hover:text-dark-text p-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-dark-bg transition-all"><Edit2 size={18} /></button>
|
||||
<button onClick={() => handleDeleteTeam(t.id)} className="text-zinc-400 dark:text-dark-muted hover:text-red-600 dark:hover:text-red-500 p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"><Trash2 size={18} /></button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50 mb-1">{t.name}</h3>
|
||||
<p className="text-sm text-zinc-500 dark:text-dark-muted mb-6 h-10 line-clamp-2">{t.description || 'Sem descrição definida.'}</p>
|
||||
<div className="grid grid-cols-2 gap-4 pt-6 border-t border-zinc-50 dark:border-dark-border text-sm">
|
||||
<div className="space-y-1">
|
||||
<span className="text-zinc-400 dark:text-dark-muted block text-[10px] font-bold uppercase tracking-wider">Membros</span>
|
||||
<strong className="text-lg text-zinc-800 dark:text-zinc-200">{t.memberCount}</strong>
|
||||
</div>
|
||||
<div className="space-y-1 text-right">
|
||||
<span className="text-zinc-400 dark:text-dark-muted block text-[10px] font-bold uppercase tracking-wider">Conversão</span>
|
||||
<strong className="text-lg text-brand-yellow">{t.rate}%</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{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-2xl p-8 w-full max-w-md shadow-2xl animate-in zoom-in duration-200 transition-colors border border-transparent dark:border-dark-border">
|
||||
<div className="flex justify-between items-center mb-6 pb-4 border-b border-zinc-100 dark:border-dark-border">
|
||||
<h3 className="text-xl font-bold text-zinc-900 dark:text-zinc-50">{editingTeam ? 'Editar Time' : 'Novo Time'}</h3>
|
||||
<button onClick={() => setIsModalOpen(false)} className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors"><X size={20} /></button>
|
||||
</div>
|
||||
<form onSubmit={handleSave} className="space-y-5">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1.5 block tracking-wider">Nome do Time</label>
|
||||
<input type="text" placeholder="Ex: Vendas Sul" maxLength={25} value={formData.name} onChange={e => setFormData({...formData, name:e.target.value})} 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 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-bold text-zinc-500 dark:text-dark-muted uppercase mb-1.5 block tracking-wider">Descrição</label>
|
||||
<textarea placeholder="Breve descrição..." value={formData.description} onChange={e => setFormData({...formData, description:e.target.value})} 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 resize-none h-28 outline-none focus:ring-2 focus:ring-brand-yellow/20 transition-all" />
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 pt-6 border-t dark:border-dark-border mt-6">
|
||||
<button type="button" onClick={() => setIsModalOpen(false)} className="px-6 py-2.5 text-sm font-medium text-zinc-500 dark:text-dark-muted hover:bg-zinc-100 dark:hover:bg-dark-bg rounded-lg transition-colors">Cancelar</button>
|
||||
<button type="submit" disabled={isSaving} className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 px-8 py-2.5 rounded-lg text-sm font-bold shadow-lg transition-all hover:opacity-90">
|
||||
{isSaving ? <Loader2 className="animate-spin" size={16} /> : 'Salvar Time'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
291
src/pages/UserDetail.tsx
Normal file
291
src/pages/UserDetail.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { getAttendances, getUserById, getFunnels, getOrigins } from '../services/dataService';
|
||||
import { Attendance, User, FunnelStage, DashboardFilter, FunnelStageDef, OriginItemDef } from '../types';
|
||||
import { ArrowLeft, Mail, Phone, Clock, MessageSquare, ChevronLeft, ChevronRight, Eye, Filter } from 'lucide-react';
|
||||
import { DateRangePicker } from '../components/DateRangePicker';
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
|
||||
export const UserDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [user, setUser] = useState<User | undefined>();
|
||||
const [attendances, setAttendances] = useState<Attendance[]>([]);
|
||||
const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
|
||||
const [originDefs, setOriginDefs] = useState<OriginItemDef[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [filters, setFilters] = useState<DashboardFilter>({
|
||||
dateRange: { start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), end: new Date() },
|
||||
userId: id,
|
||||
funnelStage: 'all',
|
||||
origin: 'all'
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
setLoading(true);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const tenantId = localStorage.getItem('ctms_tenant_id');
|
||||
const u = await getUserById(id);
|
||||
setUser(u);
|
||||
|
||||
if (u && tenantId) {
|
||||
const [data, fetchedFunnels, fetchedOrigins] = await Promise.all([
|
||||
getAttendances(tenantId, {
|
||||
...filters,
|
||||
userId: id
|
||||
}),
|
||||
getFunnels(tenantId),
|
||||
getOrigins(tenantId)
|
||||
]);
|
||||
setAttendances(data);
|
||||
|
||||
const targetTeamId = u.team_id || null;
|
||||
let activeFunnel = fetchedFunnels[0];
|
||||
if (targetTeamId) {
|
||||
const matchedFunnel = fetchedFunnels.find(f => f.teamIds?.includes(targetTeamId));
|
||||
if (matchedFunnel) activeFunnel = matchedFunnel;
|
||||
}
|
||||
setFunnelDefs(activeFunnel && activeFunnel.stages ? activeFunnel.stages.sort((a: any, b: any) => a.order_index - b.order_index) : []);
|
||||
|
||||
let activeOriginGroup = fetchedOrigins[0];
|
||||
if (targetTeamId) {
|
||||
const matchedOrigin = fetchedOrigins.find(o => o.teamIds?.includes(targetTeamId));
|
||||
if (matchedOrigin) activeOriginGroup = matchedOrigin;
|
||||
}
|
||||
setOriginDefs(activeOriginGroup && activeOriginGroup.items ? activeOriginGroup.items : []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading user details", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}
|
||||
}, [id, filters]);
|
||||
|
||||
const handleFilterChange = (key: keyof DashboardFilter, value: any) => {
|
||||
setFilters(prev => ({ ...prev, [key]: value }));
|
||||
setCurrentPage(1); // Reset pagination on filter change
|
||||
};
|
||||
|
||||
const totalPages = Math.ceil(attendances.length / ITEMS_PER_PAGE);
|
||||
|
||||
const currentData = useMemo(() => {
|
||||
const start = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
return attendances.slice(start, start + ITEMS_PER_PAGE);
|
||||
}, [attendances, currentPage]);
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
if (newPage >= 1 && newPage <= totalPages) {
|
||||
setCurrentPage(newPage);
|
||||
}
|
||||
};
|
||||
|
||||
const getStageBadgeColor = (stage: string) => {
|
||||
const def = funnelDefs.find(f => f.name === stage);
|
||||
if (def) return def.color_class;
|
||||
|
||||
switch (stage) {
|
||||
case FunnelStage.WON: return 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800';
|
||||
case FunnelStage.LOST: return 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800';
|
||||
case FunnelStage.NEGOTIATION: return 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800';
|
||||
case FunnelStage.IDENTIFICATION: return 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400 dark:border-yellow-800';
|
||||
default: return 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-700';
|
||||
}
|
||||
};
|
||||
|
||||
const getScoreColor = (score: number) => {
|
||||
if (score >= 80) return 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400';
|
||||
if (score >= 60) return 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400';
|
||||
return 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400';
|
||||
};
|
||||
|
||||
if (!loading && !user) return <div className="p-8 text-zinc-500 dark:text-dark-muted transition-colors">Usuário não encontrado</div>;
|
||||
|
||||
const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
|
||||
|
||||
return (
|
||||
<div className="space-y-8 max-w-7xl mx-auto transition-colors duration-300">
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col md:flex-row gap-6 items-start md:items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/" className="p-2.5 bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-lg text-zinc-500 dark:text-dark-muted hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-dark-text transition-all shadow-sm">
|
||||
<ArrowLeft size={18} />
|
||||
</Link>
|
||||
{user && (
|
||||
<div className="flex items-center gap-4">
|
||||
<img
|
||||
src={user.avatar_url
|
||||
? (user.avatar_url.startsWith('http') ? user.avatar_url : `${backendUrl}${user.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`}
|
||||
alt={user.name}
|
||||
className="w-16 h-16 rounded-full border-2 border-white dark:border-dark-border shadow-md object-cover"
|
||||
/>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text tracking-tight">{user.name}</h1>
|
||||
<div className="flex items-center gap-3 text-sm text-zinc-500 dark:text-dark-muted mt-1">
|
||||
<span className="flex items-center gap-1.5"><Mail size={14} /> {user.email}</span>
|
||||
<span className="bg-zinc-100 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted px-2 py-0.5 rounded text-xs font-semibold uppercase">{user.role}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters Section */}
|
||||
<div className="bg-white dark:bg-dark-card p-4 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm flex flex-wrap items-center gap-4">
|
||||
<div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium mr-2">
|
||||
<Filter size={18} />
|
||||
<span>Filtros:</span>
|
||||
</div>
|
||||
|
||||
<DateRangePicker
|
||||
dateRange={filters.dateRange}
|
||||
onChange={(range) => handleFilterChange('dateRange', range)}
|
||||
/>
|
||||
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700 transition-all"
|
||||
value={filters.funnelStage}
|
||||
onChange={(e) => handleFilterChange('funnelStage', e.target.value)}
|
||||
>
|
||||
<option value="all">Todas Etapas</option>
|
||||
{funnelDefs.length > 0 ? funnelDefs.map(stage => (
|
||||
<option key={stage.id} value={stage.name}>{stage.name}</option>
|
||||
)) : Object.values(FunnelStage).map(stage => (
|
||||
<option key={stage} value={stage}>{stage}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700 transition-all"
|
||||
value={filters.origin}
|
||||
onChange={(e) => handleFilterChange('origin', e.target.value)}
|
||||
>
|
||||
<option value="all">Todas Origens</option>
|
||||
{originDefs.length > 0 ? originDefs.map(o => (
|
||||
<option key={o.id} value={o.name}>{o.name}</option>
|
||||
)) : ['WhatsApp', 'Instagram', 'Website', 'LinkedIn', 'Indicação'].map(o => (
|
||||
<option key={o} value={o}>{o}</option>
|
||||
))}
|
||||
</select> </div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
|
||||
<div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Total de Interações</div>
|
||||
<div className="text-3xl font-bold text-zinc-900 dark:text-dark-text">{attendances.length}</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
|
||||
<div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Taxa de Conversão</div>
|
||||
<div className="text-3xl font-bold text-brand-yellow">
|
||||
{attendances.length ? ((attendances.filter(a => a.converted).length / attendances.length) * 100).toFixed(1) : 0}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
|
||||
<div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Nota Média</div>
|
||||
<div className="text-3xl font-bold text-zinc-800 dark:text-zinc-100">
|
||||
{attendances.length ? (attendances.reduce((acc, c) => acc + c.score, 0) / attendances.length).toFixed(1) : 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attendance Table */}
|
||||
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden flex flex-col transition-colors">
|
||||
<div className="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
|
||||
<h2 className="font-semibold text-zinc-900 dark:text-zinc-100">Histórico de Atendimentos</h2>
|
||||
<span className="text-xs text-zinc-500 dark:text-dark-muted font-medium bg-zinc-200/50 dark:bg-zinc-800 px-2 py-1 rounded transition-colors">Página {currentPage} de {totalPages || 1}</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-12 text-center text-zinc-400 dark:text-dark-muted">Carregando registros...</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-zinc-100 dark:border-zinc-800 text-xs uppercase text-zinc-500 dark:text-dark-muted bg-zinc-50/30 dark:bg-dark-bg/30">
|
||||
<th className="px-6 py-4 font-medium">Data / Hora</th>
|
||||
<th className="px-6 py-4 font-medium w-1/3">Resumo</th>
|
||||
<th className="px-6 py-4 font-medium text-center">Etapa</th>
|
||||
<th className="px-6 py-4 font-medium text-center">Nota</th>
|
||||
<th className="px-6 py-4 font-medium text-center">T. Resp.</th>
|
||||
<th className="px-6 py-4 font-medium text-right">Ação</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-zinc-800 text-sm">
|
||||
{currentData.map(att => (
|
||||
<tr key={att.id} className="hover:bg-zinc-50/80 dark:hover:bg-zinc-800/50 transition-colors group">
|
||||
<td className="px-6 py-4 text-zinc-600 dark:text-zinc-300 whitespace-nowrap">
|
||||
<div className="font-medium text-zinc-900 dark:text-zinc-100">{new Date(att.created_at).toLocaleDateString('pt-BR')}</div>
|
||||
<div className="text-xs text-zinc-400 dark:text-dark-muted">{new Date(att.created_at).toLocaleTimeString('pt-BR', {hour: '2-digit', minute:'2-digit', hour12: false})}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-zinc-800 dark:text-zinc-200 line-clamp-1 font-medium mb-1">{att.title}</span>
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500 dark:text-dark-muted">
|
||||
<span className="flex items-center gap-1"><MessageSquare size={10} /> {att.origin}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span className={`inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold border ${getStageBadgeColor(att.funnel_stage)}`}>
|
||||
{att.funnel_stage}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span className={`inline-flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm ${getScoreColor(att.score)}`}>
|
||||
{att.score}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-zinc-600 dark:text-zinc-300">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Clock size={14} className="text-zinc-400 dark:text-dark-muted" />
|
||||
{att.first_response_time_min}m
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<Link
|
||||
to={`/attendances/${att.id}`}
|
||||
className="inline-flex items-center justify-center p-2 rounded-lg text-zinc-400 dark:text-dark-muted hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
|
||||
title="Ver Detalhes"
|
||||
>
|
||||
<Eye size={18} />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination Footer */}
|
||||
{totalPages > 1 && (
|
||||
<div className="px-6 py-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between bg-zinc-50/30 dark:bg-dark-bg/30">
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-dark-text bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
|
||||
>
|
||||
<ChevronLeft size={16} /> Anterior
|
||||
</button>
|
||||
<div className="text-sm text-zinc-500 dark:text-dark-muted">
|
||||
Mostrando <span className="font-medium text-zinc-900 dark:text-zinc-100">{((currentPage - 1) * ITEMS_PER_PAGE) + 1}</span> a <span className="font-medium text-zinc-900 dark:text-zinc-100">{Math.min(currentPage * ITEMS_PER_PAGE, attendances.length)}</span> de {attendances.length}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-dark-text bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
|
||||
>
|
||||
Próximo <ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
335
src/pages/UserProfile.tsx
Normal file
335
src/pages/UserProfile.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Camera, Save, Mail, User as UserIcon, Building, Shield, Loader2, CheckCircle2, Bell } from 'lucide-react';
|
||||
import { getUserById, getTenants, getTeams, updateUser, uploadAvatar } from '../services/dataService';
|
||||
import { User, Tenant } from '../types';
|
||||
|
||||
export const UserProfile: React.FC = () => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [tenant, setTenant] = useState<Tenant | null>(null);
|
||||
const [teamName, setTeamName] = useState<string>('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [bio, setBio] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUserAndTenant = async () => {
|
||||
const storedUserId = localStorage.getItem('ctms_user_id');
|
||||
|
||||
if (storedUserId) {
|
||||
try {
|
||||
const fetchedUser = await getUserById(storedUserId);
|
||||
if (fetchedUser) {
|
||||
setUser(fetchedUser);
|
||||
setName(fetchedUser.name);
|
||||
setBio(fetchedUser.bio || '');
|
||||
setEmail(fetchedUser.email);
|
||||
|
||||
// Fetch tenant info
|
||||
const tenants = await getTenants();
|
||||
const userTenant = tenants.find(t => t.id === fetchedUser.tenant_id);
|
||||
if (userTenant) {
|
||||
setTenant(userTenant);
|
||||
}
|
||||
|
||||
if (fetchedUser.team_id) {
|
||||
const teams = await getTeams(fetchedUser.tenant_id);
|
||||
const userTeam = teams.find(t => t.id === fetchedUser.team_id);
|
||||
if (userTeam) setTeamName(userTeam.name);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching profile data:", err);
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchUserAndTenant();
|
||||
}, []);
|
||||
|
||||
const handleAvatarClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file || !user) return;
|
||||
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
alert('Arquivo muito grande. Máximo de 2MB.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
try {
|
||||
const newUrl = await uploadAvatar(user.id, file);
|
||||
if (newUrl) {
|
||||
setUser({ ...user, avatar_url: newUrl });
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Erro ao fazer upload da imagem.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Erro ao conectar ao servidor.');
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!user) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setIsSuccess(false);
|
||||
|
||||
try {
|
||||
const success = await updateUser(user.id, { name, bio, email });
|
||||
if (success) {
|
||||
setIsSuccess(true);
|
||||
setUser({ ...user, name, bio, email });
|
||||
setTimeout(() => setIsSuccess(false), 3000);
|
||||
} else {
|
||||
alert('Erro ao salvar alterações no servidor.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Submit failed:", err);
|
||||
alert('Erro ao conectar ao servidor.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!user) return <div className="p-8 text-center text-zinc-500 dark:text-zinc-400 transition-colors">Carregando perfil...</div>;
|
||||
|
||||
const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';
|
||||
const displayAvatar = user.avatar_url
|
||||
? (user.avatar_url.startsWith('http') ? user.avatar_url : `${backendUrl}${user.avatar_url}`)
|
||||
: `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`;
|
||||
|
||||
const canEditEmail = user.role === 'admin' || user.role === 'super_admin';
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6 pb-12 transition-colors duration-300">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Meu Perfil</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 text-sm">Gerencie suas informações pessoais e preferências.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Left Column: Avatar & Basic Info */}
|
||||
<div className="md:col-span-1 space-y-6">
|
||||
<div className="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-zinc-200 dark:border-zinc-800 flex flex-col items-center text-center">
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
/>
|
||||
<div className="relative group cursor-pointer" onClick={handleAvatarClick}>
|
||||
<div className="w-32 h-32 rounded-full overflow-hidden border-4 border-zinc-50 dark:border-zinc-800 shadow-sm bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
|
||||
{isUploading ? (
|
||||
<Loader2 className="animate-spin text-zinc-400 dark:text-zinc-500" size={32} />
|
||||
) : (
|
||||
<img src={displayAvatar} alt={user.name} className="w-full h-full object-cover" />
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<Camera className="text-white" size={28} />
|
||||
</div>
|
||||
<button className="absolute bottom-0 right-2 bg-white dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 p-2 rounded-full shadow-md border border-zinc-100 dark:border-zinc-700 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors">
|
||||
<Camera size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 className="mt-4 text-lg font-bold text-zinc-900 dark:text-zinc-100">{user.name}</h2>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 text-sm">{user.email}</p>
|
||||
|
||||
<div className="mt-4 flex justify-center gap-2 max-w-full overflow-hidden px-2">
|
||||
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-semibold capitalize border border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800 whitespace-nowrap shrink-0">
|
||||
{user.role === 'admin' ? 'Admin' : user.role === 'manager' ? 'Gerente' : user.role === 'super_admin' ? 'Super Admin' : 'Agente'}
|
||||
</span>
|
||||
{user.team_id && (
|
||||
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold border border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800 truncate max-w-[160px]" title={teamName || user.team_id}>
|
||||
{teamName || user.team_id}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-100 dark:bg-zinc-900 rounded-xl p-4 border border-zinc-200 dark:border-zinc-800">
|
||||
<h3 className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-3">Status da Conta</h3>
|
||||
<div className="flex items-center gap-3 text-sm text-zinc-600 dark:text-zinc-300 mb-2">
|
||||
<div className={`w-2 h-2 rounded-full ${user.status === 'active' ? 'bg-green-500' : 'bg-zinc-400'}`}></div>
|
||||
{user.status === 'active' ? 'Ativo' : 'Inativo'}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-zinc-600 dark:text-zinc-300">
|
||||
<Building size={14} />
|
||||
{tenant?.name || 'Organização'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Edit Form */}
|
||||
<div className="md:col-span-2">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-zinc-200 dark:border-zinc-800 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 flex justify-between items-center">
|
||||
<h3 className="font-bold text-zinc-800 dark:text-zinc-100">Informações Pessoais</h3>
|
||||
{isSuccess && (
|
||||
<span className="flex items-center gap-1.5 text-green-600 dark:text-green-400 text-sm font-medium animate-in fade-in slide-in-from-right-4">
|
||||
<CheckCircle2 size={16} /> Salvo com sucesso
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="fullName" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Nome Completo
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<UserIcon className="h-5 w-5 text-zinc-400 dark:text-zinc-500" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={user.role === 'agent'}
|
||||
className={`block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-800 rounded-lg sm:text-sm transition-all ${
|
||||
user.role === 'agent'
|
||||
? 'bg-zinc-50 dark:bg-zinc-900/50 text-zinc-500 dark:text-zinc-500 cursor-not-allowed'
|
||||
: 'bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-yellow-400/20 focus:border-yellow-400'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{user.role === 'agent' && (
|
||||
<p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">Contate um administrador para alterar seu nome.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Endereço de E-mail
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Mail className="h-5 w-5 text-zinc-400 dark:text-zinc-500" />
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
disabled={!canEditEmail}
|
||||
className={`block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-800 rounded-lg sm:text-sm transition-all ${
|
||||
!canEditEmail
|
||||
? 'bg-zinc-50 dark:bg-zinc-900/50 text-zinc-500 dark:text-zinc-500 cursor-not-allowed'
|
||||
: 'bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-brand-yellow/20 focus:border-brand-yellow'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{!canEditEmail && <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">Contate o admin para alterar o e-mail.</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="role" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Função e Permissões
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<Shield className="h-5 w-5 text-zinc-400 dark:text-zinc-500" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="role"
|
||||
value={user.role === 'admin' ? 'Administrador' : user.role === 'manager' ? 'Gerente' : user.role === 'super_admin' ? 'Super Admin' : 'Agente'}
|
||||
disabled
|
||||
className="block w-full pl-10 pr-3 py-2 border border-zinc-200 dark:border-zinc-800 rounded-lg bg-zinc-50 dark:bg-zinc-900/50 text-zinc-500 dark:text-zinc-500 cursor-not-allowed sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="bio" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Bio / Descrição
|
||||
</label>
|
||||
<textarea
|
||||
id="bio"
|
||||
rows={4}
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
className="block w-full p-3 border border-zinc-200 dark:border-zinc-800 rounded-lg bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:ring-2 focus:ring-yellow-400/20 focus:border-yellow-400 transition-all sm:text-sm resize-none"
|
||||
placeholder="Escreva uma breve descrição sobre você..."
|
||||
/>
|
||||
<p className="text-xs text-zinc-400 dark:text-zinc-500 text-right">{bio.length}/500 caracteres</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900/50 rounded-xl border border-zinc-200 dark:border-zinc-800">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
|
||||
<Bell size={16} className="text-brand-yellow" /> Notificações Sonoras
|
||||
</h4>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
Reproduzir um som quando você receber uma nova notificação.
|
||||
</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only peer"
|
||||
checked={user.sound_enabled ?? true}
|
||||
onChange={async (e) => {
|
||||
const newStatus = e.target.checked;
|
||||
setUser({...user, sound_enabled: newStatus});
|
||||
await updateUser(user.id, { sound_enabled: newStatus });
|
||||
}}
|
||||
/>
|
||||
<div className="w-11 h-6 bg-zinc-200 peer-focus:outline-none rounded-full peer dark:bg-zinc-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-zinc-600 peer-checked:bg-brand-yellow"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex items-center justify-end border-t border-zinc-100 dark:border-zinc-800 mt-6 transition-colors">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setName(user.name);
|
||||
setBio(user.bio || '');
|
||||
}}
|
||||
className="mr-3 px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
>
|
||||
Desfazer Alterações
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 bg-zinc-900 dark:bg-yellow-400 text-white dark:text-zinc-950 px-6 py-2 rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-zinc-900 dark:focus:ring-yellow-400 transition-all disabled:opacity-70 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin h-4 w-4" /> Salvando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save size={16} /> Salvar Alterações
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
106
src/pages/VerifyCode.tsx
Normal file
106
src/pages/VerifyCode.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, Link, useLocation } from 'react-router-dom';
|
||||
import { Hexagon, ArrowRight, Loader2, AlertCircle, CheckCircle2 } from 'lucide-react';
|
||||
import { verifyCode } from '../services/dataService';
|
||||
|
||||
export const VerifyCode: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const email = location.state?.email || '';
|
||||
const [code, setCode] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!email) { setError('E-mail não encontrado. Tente registrar novamente.'); return; }
|
||||
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const success = await verifyCode({ email, code });
|
||||
if (success) {
|
||||
navigate('/login', { state: { message: 'E-mail verificado com sucesso! Agora você pode entrar.' } });
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Código inválido ou expirado.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-dark-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8 transition-colors duration-300">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="flex justify-center items-center gap-2 text-zinc-900 dark:text-zinc-50">
|
||||
<div className="bg-zinc-900 dark:bg-brand-yellow text-white dark:text-zinc-950 p-2 rounded-lg transition-colors">
|
||||
<Hexagon size={32} fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-3xl font-bold tracking-tight">Fasto<span className="text-brand-yellow">.</span></span>
|
||||
</div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
|
||||
Verifique seu e-mail
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-zinc-600 dark:text-dark-muted px-4">
|
||||
Insira o código de 6 dígitos enviado para <span className="font-semibold text-zinc-900 dark:text-zinc-200">{email}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="bg-white dark:bg-dark-card py-8 px-4 shadow-xl rounded-2xl sm:px-10 border border-zinc-100 dark:border-dark-border transition-colors">
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-900/30 p-3 rounded-lg text-red-600 dark:text-red-400 text-sm">
|
||||
<AlertCircle size={18} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="code" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 text-center mb-4">
|
||||
Código de Verificação
|
||||
</label>
|
||||
<input
|
||||
id="code"
|
||||
type="text"
|
||||
maxLength={6}
|
||||
required
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/[^0-9]/g, ''))}
|
||||
className="block w-full text-center text-3xl tracking-[0.5em] font-bold py-3 border border-zinc-300 dark:border-dark-border rounded-lg bg-zinc-50 dark:bg-dark-input text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-brand-yellow/20 focus:border-brand-yellow transition-all"
|
||||
placeholder="000000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || code.length < 6}
|
||||
className="w-full flex justify-center items-center gap-2 py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-zinc-950 bg-brand-yellow hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-yellow disabled:opacity-70 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="animate-spin h-5 w-5" />
|
||||
) : (
|
||||
<>
|
||||
Verificar Código <ArrowRight size={18} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm font-medium text-brand-yellow hover:text-yellow-600 transition-colors"
|
||||
onClick={() => navigate('/register')}
|
||||
>
|
||||
Voltar e corrigir e-mail
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
851
src/services/dataService.ts
Normal file
851
src/services/dataService.ts
Normal file
@@ -0,0 +1,851 @@
|
||||
|
||||
import { Attendance, DashboardFilter, User } from '../types';
|
||||
|
||||
// URL do Backend
|
||||
// Em produção (import.meta.env.PROD), usa caminho relativo '/api' pois o backend serve o frontend
|
||||
// Em desenvolvimento, aponta para o localhost:3001
|
||||
const API_URL = import.meta.env.PROD ? '/api' : 'http://localhost:3001/api';
|
||||
|
||||
const getHeaders = (customToken?: string) => {
|
||||
const token = customToken || localStorage.getItem('ctms_token');
|
||||
// Evitar enviar "undefined" ou "null" como strings se o localStorage estiver corrompido
|
||||
if (!token || token === 'undefined' || token === 'null') return { 'Content-Type': 'application/json' };
|
||||
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
};
|
||||
|
||||
// Global flag to prevent multiple simultaneous refresh attempts
|
||||
let isRefreshing = false;
|
||||
let refreshSubscribers: ((token: string) => void)[] = [];
|
||||
|
||||
const onRefreshed = (token: string) => {
|
||||
refreshSubscribers.forEach(cb => cb(token));
|
||||
refreshSubscribers = [];
|
||||
};
|
||||
|
||||
const addRefreshSubscriber = (cb: (token: string) => void) => {
|
||||
refreshSubscribers.push(cb);
|
||||
};
|
||||
|
||||
export const apiFetch = async (url: string, options: RequestInit = {}): Promise<Response> => {
|
||||
let response = await fetch(url, options);
|
||||
|
||||
// If unauthorized, attempt to refresh the token
|
||||
if (response.status === 401 && !url.includes('/auth/login') && !url.includes('/auth/refresh')) {
|
||||
const refreshToken = localStorage.getItem('ctms_refresh_token');
|
||||
|
||||
if (!refreshToken) {
|
||||
logout();
|
||||
return response;
|
||||
}
|
||||
|
||||
if (isRefreshing) {
|
||||
// If a refresh is already in progress, wait for it to finish and retry
|
||||
return new Promise(resolve => {
|
||||
addRefreshSubscriber((newToken) => {
|
||||
options.headers = getHeaders(newToken);
|
||||
resolve(fetch(url, options));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
isRefreshing = true;
|
||||
|
||||
try {
|
||||
const refreshResponse = await fetch(`${API_URL}/auth/refresh`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ refreshToken })
|
||||
});
|
||||
|
||||
if (!refreshResponse.ok) {
|
||||
throw new Error('Refresh token invalid');
|
||||
}
|
||||
|
||||
const data = await refreshResponse.json();
|
||||
localStorage.setItem('ctms_token', data.token);
|
||||
|
||||
// Retry the original request
|
||||
options.headers = getHeaders(data.token);
|
||||
response = await fetch(url, options);
|
||||
|
||||
onRefreshed(data.token);
|
||||
} catch (err) {
|
||||
console.error("Session expired or refresh failed:", err);
|
||||
logout();
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
}
|
||||
}
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
export const getNotifications = async (): Promise<any[]> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/notifications`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to fetch notifications');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (getNotifications):", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const markNotificationAsRead = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/notifications/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (markNotificationAsRead):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const markAllNotificationsAsRead = async (): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/notifications/read-all`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (markAllNotificationsAsRead):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteNotification = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/notifications/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteNotification):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const clearAllNotifications = async (): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/notifications/clear-all`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (clearAllNotifications):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// --- Funnels Functions ---
|
||||
export const getFunnels = async (tenantId: string): Promise<any[]> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/funnels?tenantId=${tenantId}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Falha ao buscar funis');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (getFunnels):", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const createFunnel = async (data: { name: string, tenantId: string }): Promise<any> => {
|
||||
const response = await apiFetch(`${API_URL}/funnels`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Erro ao criar funil');
|
||||
}
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const updateFunnel = async (id: string, data: { name?: string, teamIds?: string[] }): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/funnels/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (updateFunnel):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteFunnel = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/funnels/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteFunnel):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const createFunnelStage = async (funnelId: string, data: any): Promise<any> => {
|
||||
const response = await apiFetch(`${API_URL}/funnels/${funnelId}/stages`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Erro ao criar etapa');
|
||||
}
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const updateFunnelStage = async (id: string, data: any): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/funnel_stages/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (updateFunnelStage):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteFunnelStage = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/funnel_stages/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteFunnelStage):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// --- Origins Functions ---
|
||||
export const getOrigins = async (tenantId: string): Promise<any[]> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/origins?tenantId=${tenantId}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Falha ao buscar origens');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (getOrigins):", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const createOriginGroup = async (data: { name: string, tenantId: string }): Promise<any> => {
|
||||
const response = await apiFetch(`${API_URL}/origins`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Erro ao criar grupo de origens');
|
||||
}
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const updateOriginGroup = async (id: string, data: { name?: string, teamIds?: string[] }): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/origins/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (updateOriginGroup):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteOriginGroup = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/origins/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteOriginGroup):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const createOriginItem = async (groupId: string, data: { name: string, color_class?: string }): Promise<any> => {
|
||||
const response = await apiFetch(`${API_URL}/origins/${groupId}/items`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Erro ao criar item de origem');
|
||||
}
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const updateOriginItem = async (id: string, data: { name: string, color_class?: string }): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/origin_items/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (updateOriginItem):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteOriginItem = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/origin_items/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteOriginItem):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// --- API Keys Functions ---
|
||||
export const getApiKeys = async (tenantId: string): Promise<any[]> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/api-keys?tenantId=${tenantId}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Falha ao buscar chaves');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (getApiKeys):", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const createApiKey = async (data: { name: string, tenantId: string }): Promise<any> => {
|
||||
const response = await apiFetch(`${API_URL}/api-keys`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Erro ao criar chave de API');
|
||||
}
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const deleteApiKey = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/api-keys/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteApiKey):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const searchGlobal = async (query: string): Promise<{ members: User[], teams: any[], attendances: any[], organizations?: any[] }> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/search?q=${encodeURIComponent(query)}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Search failed');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (searchGlobal):", error);
|
||||
return { members: [], teams: [], attendances: [], organizations: [] };
|
||||
}
|
||||
};
|
||||
|
||||
export const getAttendances = async (tenantId: string, filter: DashboardFilter): Promise<Attendance[]> => {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.append('tenantId', tenantId);
|
||||
|
||||
if (filter.dateRange.start) params.append('startDate', filter.dateRange.start.toISOString());
|
||||
if (filter.dateRange.end) params.append('endDate', filter.dateRange.end.toISOString());
|
||||
|
||||
if (filter.userId && filter.userId !== 'all') params.append('userId', filter.userId);
|
||||
if (filter.teamId && filter.teamId !== 'all') params.append('teamId', filter.teamId);
|
||||
if (filter.funnelStage && filter.funnelStage !== 'all') params.append('funnelStage', filter.funnelStage);
|
||||
if (filter.origin && filter.origin !== 'all') params.append('origin', filter.origin);
|
||||
|
||||
const response = await apiFetch(`${API_URL}/attendances?${params.toString()}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Falha ao buscar atendimentos do servidor');
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (getAttendances):", error);
|
||||
// Fallback vazio ou lançar erro para a UI tratar
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const getUsers = async (tenantId: string): Promise<User[]> => {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (tenantId !== 'all') params.append('tenantId', tenantId);
|
||||
|
||||
const response = await apiFetch(`${API_URL}/users?${params.toString()}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Falha ao buscar usuários');
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (getUsers):", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const getUserById = async (id: string): Promise<User | undefined> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/users/${id}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) {
|
||||
if (response.status === 401 || response.status === 403 || response.status === 404) {
|
||||
return undefined; // Invalid user or token
|
||||
}
|
||||
throw new Error(`Server error: ${response.status}`);
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (contentType && contentType.indexOf("application/json") !== -1) {
|
||||
return await response.json();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("API Error (getUserById):", error);
|
||||
throw error; // Rethrow so AuthGuard catches it and doesn't wipe tokens
|
||||
}
|
||||
};
|
||||
|
||||
export const updateUser = async (id: string, userData: any): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/users/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => null);
|
||||
throw new Error(errorData?.error || 'Erro ao atualizar usuário no servidor');
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("API Error (updateUser):", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const uploadAvatar = async (id: string, file: File): Promise<string | null> => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('avatar', file);
|
||||
|
||||
const token = localStorage.getItem('ctms_token');
|
||||
const response = await apiFetch(`${API_URL}/users/${id}/avatar`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {})
|
||||
},
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Falha no upload');
|
||||
const data = await response.json();
|
||||
return data.avatarUrl;
|
||||
} catch (error) {
|
||||
console.error("API Error (uploadAvatar):", error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const createMember = async (userData: any): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/users`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => null);
|
||||
throw new Error(errorData?.error || 'Erro ao criar membro no servidor');
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("API Error (createMember):", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteUser = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/users/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteUser):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const getAttendanceById = async (id: string): Promise<Attendance | undefined> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/attendances/${id}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) return undefined;
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (contentType && contentType.indexOf("application/json") !== -1) {
|
||||
return await response.json();
|
||||
}
|
||||
return undefined;
|
||||
} catch (error) {
|
||||
console.error("API Error (getAttendanceById):", error);
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
export const getTenants = async (): Promise<any[]> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/tenants`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Falha ao buscar tenants');
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (contentType && contentType.indexOf("application/json") !== -1) {
|
||||
return await response.json();
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error("API Error (getTenants):", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const getTeams = async (tenantId: string): Promise<any[]> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/teams?tenantId=${tenantId}`, {
|
||||
headers: getHeaders()
|
||||
});
|
||||
if (!response.ok) throw new Error('Falha ao buscar equipes');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API Error (getTeams):", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const createTeam = async (teamData: any): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/teams`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(teamData)
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (createTeam):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const updateTeam = async (id: string, teamData: any): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/teams/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(teamData)
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (updateTeam):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteTeam = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/teams/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteTeam):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const createTenant = async (tenantData: any): Promise<{ success: boolean; message?: string }> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/tenants`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(tenantData)
|
||||
});
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!response.ok) throw new Error(data?.error || 'Erro ao criar organização');
|
||||
return { success: true, message: data?.message || 'Organização criada!' };
|
||||
} catch (error: any) {
|
||||
console.error("API Error (createTenant):", error);
|
||||
return { success: false, message: error.message };
|
||||
}
|
||||
};
|
||||
|
||||
export const updateTenant = async (id: string, tenantData: any): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/tenants/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(tenantData)
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (updateTenant):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteTenant = async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
const response = await apiFetch(`${API_URL}/tenants/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders()
|
||||
});
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
console.error("API Error (deleteTenant):", error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// --- Auth Functions ---
|
||||
|
||||
// Flag to prevent background fetches from throwing 401 and logging out during impersonation handoffs
|
||||
export let isReloadingForImpersonation = false;
|
||||
|
||||
export const logout = () => {
|
||||
if (isReloadingForImpersonation) return; // Prevent logout if we are just switching tokens
|
||||
|
||||
const refreshToken = localStorage.getItem('ctms_refresh_token');
|
||||
|
||||
// Clear local storage synchronously for instant UI update
|
||||
localStorage.removeItem('ctms_token');
|
||||
localStorage.removeItem('ctms_refresh_token');
|
||||
localStorage.removeItem('ctms_user_id');
|
||||
localStorage.removeItem('ctms_tenant_id');
|
||||
|
||||
// Attempt to revoke in background
|
||||
if (refreshToken) {
|
||||
fetch(`${API_URL}/auth/logout`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ refreshToken })
|
||||
}).catch(e => console.error("Failed to revoke refresh token", e));
|
||||
}
|
||||
};
|
||||
|
||||
export const login = async (credentials: any): Promise<any> => {
|
||||
const response = await fetch(`${API_URL}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(credentials)
|
||||
});
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
const isJson = contentType && contentType.indexOf("application/json") !== -1;
|
||||
|
||||
if (!response.ok) {
|
||||
const error = isJson ? await response.json() : { error: 'Erro no servidor' };
|
||||
throw new Error(error.error || 'Erro no login');
|
||||
}
|
||||
|
||||
const data = isJson ? await response.json() : null;
|
||||
if (data && data.token) {
|
||||
localStorage.setItem('ctms_token', data.token);
|
||||
if (data.refreshToken) localStorage.setItem('ctms_refresh_token', data.refreshToken);
|
||||
localStorage.setItem('ctms_user_id', data.user.id);
|
||||
localStorage.setItem('ctms_tenant_id', data.user.tenant_id || '');
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
export const impersonateTenant = async (tenantId: string): Promise<any> => {
|
||||
const response = await apiFetch(`${API_URL}/impersonate/${tenantId}`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders()
|
||||
});
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
const isJson = contentType && contentType.indexOf("application/json") !== -1;
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = isJson ? await response.json() : { error: 'Erro no servidor' };
|
||||
throw new Error(errorData.error || 'Erro ao assumir identidade');
|
||||
}
|
||||
|
||||
isReloadingForImpersonation = true; // Block logouts
|
||||
|
||||
const data = await response.json();
|
||||
const oldToken = localStorage.getItem('ctms_token');
|
||||
if (oldToken) {
|
||||
localStorage.setItem('ctms_super_admin_token', oldToken);
|
||||
}
|
||||
|
||||
localStorage.setItem('ctms_token', data.token);
|
||||
localStorage.setItem('ctms_user_id', data.user.id);
|
||||
localStorage.setItem('ctms_tenant_id', data.user.tenant_id || '');
|
||||
|
||||
window.location.hash = '#/';
|
||||
window.location.reload();
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
export const returnToSuperAdmin = (): boolean => {
|
||||
const superAdminToken = localStorage.getItem('ctms_super_admin_token');
|
||||
if (superAdminToken) {
|
||||
try {
|
||||
isReloadingForImpersonation = true; // Block logouts
|
||||
|
||||
// Correctly decode Base64Url JWT payload with proper padding
|
||||
const base64Url = superAdminToken.split('.')[1];
|
||||
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const pad = base64.length % 4;
|
||||
if (pad) {
|
||||
base64 += '='.repeat(4 - pad);
|
||||
}
|
||||
|
||||
const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
|
||||
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
||||
}).join(''));
|
||||
const payload = JSON.parse(jsonPayload);
|
||||
|
||||
localStorage.setItem('ctms_token', superAdminToken);
|
||||
localStorage.setItem('ctms_user_id', payload.id);
|
||||
localStorage.setItem('ctms_tenant_id', payload.tenant_id || 'system');
|
||||
localStorage.removeItem('ctms_super_admin_token');
|
||||
|
||||
window.location.hash = '#/super-admin';
|
||||
window.location.reload();
|
||||
return true;
|
||||
} catch (e) {
|
||||
isReloadingForImpersonation = false;
|
||||
console.error("Failed to restore super admin token", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
export const register = async (userData: any): Promise<boolean> => {
|
||||
const response = await apiFetch(`${API_URL}/auth/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Erro no registro');
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
export const verifyCode = async (data: any): Promise<boolean> => {
|
||||
const response = await apiFetch(`${API_URL}/auth/verify`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Código inválido ou expirado');
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
export const forgotPassword = async (email: string): Promise<string> => {
|
||||
const response = await apiFetch(`${API_URL}/auth/forgot-password`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email })
|
||||
});
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
const isJson = contentType && contentType.indexOf("application/json") !== -1;
|
||||
|
||||
if (!response.ok) {
|
||||
const error = isJson ? await response.json() : { error: 'Erro no servidor' };
|
||||
throw new Error(error.error || 'Erro ao processar solicitação');
|
||||
}
|
||||
|
||||
const data = isJson ? await response.json() : { message: 'Solicitação processada' };
|
||||
return data.message;
|
||||
};
|
||||
|
||||
export const resetPassword = async (password: string, token: string, name?: string): Promise<string> => {
|
||||
const response = await apiFetch(`${API_URL}/auth/reset-password`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password, token, name })
|
||||
});
|
||||
|
||||
const contentType = response.headers.get("content-type");
|
||||
const isJson = contentType && contentType.indexOf("application/json") !== -1;
|
||||
|
||||
if (!response.ok) {
|
||||
const error = isJson ? await response.json() : { error: 'Erro no servidor' };
|
||||
throw new Error(error.error || 'Erro ao resetar senha');
|
||||
}
|
||||
|
||||
const data = isJson ? await response.json() : { message: 'Senha redefinida' };
|
||||
return data.message;
|
||||
};
|
||||
98
src/types.ts
Normal file
98
src/types.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
|
||||
export enum FunnelStage {
|
||||
NO_CONTACT = 'Sem atendimento',
|
||||
IDENTIFICATION = 'Identificação',
|
||||
NEGOTIATION = 'Negociação',
|
||||
WON = 'Ganhos',
|
||||
LOST = 'Perdidos',
|
||||
}
|
||||
|
||||
export interface FunnelStageDef {
|
||||
id: string;
|
||||
funnel_id: string;
|
||||
name: string;
|
||||
color_class: string;
|
||||
order_index: number;
|
||||
}
|
||||
|
||||
export interface FunnelDef {
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
name: string;
|
||||
stages: FunnelStageDef[];
|
||||
teamIds: string[];
|
||||
}
|
||||
|
||||
export interface OriginItemDef {
|
||||
id: string;
|
||||
origin_group_id: string;
|
||||
name: string;
|
||||
color_class: string;
|
||||
}
|
||||
|
||||
export interface OriginGroupDef {
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
name: string;
|
||||
items: OriginItemDef[];
|
||||
teamIds: string[];
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
slug?: string;
|
||||
avatar_url: string;
|
||||
role: 'super_admin' | 'admin' | 'manager' | 'agent';
|
||||
team_id: string;
|
||||
bio?: string;
|
||||
status: 'active' | 'inactive';
|
||||
sound_enabled?: boolean;
|
||||
}
|
||||
|
||||
export interface Attendance {
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
user_id: string;
|
||||
created_at: string; // ISO Date
|
||||
title: string;
|
||||
full_summary?: string;
|
||||
attention_points: string[];
|
||||
improvement_points: string[];
|
||||
score: number; // 0-100
|
||||
first_response_time_min: number;
|
||||
handling_time_min: number;
|
||||
funnel_stage: string;
|
||||
origin: string;
|
||||
product_requested: string;
|
||||
product_sold?: string;
|
||||
converted: boolean;
|
||||
}
|
||||
|
||||
export interface Tenant {
|
||||
id: string;
|
||||
name: string;
|
||||
logo_url?: string;
|
||||
// Extended fields for Super Admin
|
||||
slug?: string;
|
||||
admin_email?: string;
|
||||
status?: 'active' | 'inactive' | 'trial';
|
||||
user_count?: number;
|
||||
attendance_count?: number;
|
||||
created_at?: string;
|
||||
}
|
||||
|
||||
export interface DateRange {
|
||||
start: Date;
|
||||
end: Date;
|
||||
}
|
||||
|
||||
export interface DashboardFilter {
|
||||
dateRange: DateRange;
|
||||
userId?: string;
|
||||
teamId?: string;
|
||||
funnelStage?: string;
|
||||
origin?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user