13b4c0316b
- Backend now only returns users, teams, and attendances from a manager's own team. - Hidden 'Todas as Equipes' filter from manager dashboard. - Removed manager ability to create or edit teams.
435 lines
17 KiB
TypeScript
435 lines
17 KiB
TypeScript
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 } from '../services/dataService';
|
|
import { COLORS } from '../constants';
|
|
import { Attendance, DashboardFilter, FunnelStage, User } from '../types';
|
|
import { KPICard } from '../components/KPICard';
|
|
import { DateRangePicker } from '../components/DateRangePicker';
|
|
import { SellersTable } from '../components/SellersTable';
|
|
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 [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 and current user in parallel
|
|
const [fetchedUsers, fetchedData, prevFetchedData, fetchedTeams, me] = await Promise.all([
|
|
getUsers(tenantId),
|
|
getAttendances(tenantId, filters),
|
|
getAttendances(tenantId, prevFilters),
|
|
getTeams(tenantId),
|
|
storedUserId ? getUserById(storedUserId) : null
|
|
]);
|
|
|
|
setUsers(fetchedUsers);
|
|
setData(fetchedData);
|
|
setPrevData(prevFetchedData);
|
|
setTeams(fetchedTeams);
|
|
if (me) setCurrentUser(me);
|
|
} 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 stagesOrder = [
|
|
FunnelStage.NO_CONTACT,
|
|
FunnelStage.IDENTIFICATION,
|
|
FunnelStage.NEGOTIATION,
|
|
FunnelStage.WON,
|
|
FunnelStage.LOST
|
|
];
|
|
|
|
const counts = data.reduce((acc, curr) => {
|
|
acc[curr.funnel_stage] = (acc[curr.funnel_stage] || 0) + 1;
|
|
return acc;
|
|
}, {} as Record<string, number>);
|
|
|
|
return stagesOrder.map(stage => ({
|
|
name: stage,
|
|
value: counts[stage] || 0
|
|
}));
|
|
}, [data]);
|
|
|
|
// --- Chart Data: Origin ---
|
|
const originData = useMemo(() => {
|
|
const origins = data.reduce((acc, curr) => {
|
|
acc[curr.origin] = (acc[curr.origin] || 0) + 1;
|
|
return acc;
|
|
}, {} as Record<string, number>);
|
|
|
|
// Ensure type safety for value in sort
|
|
return (Object.entries(origins) as [string, number][])
|
|
.map(([name, value]) => ({ name, value }))
|
|
.sort((a, b) => b.value - a.value);
|
|
}, [data]);
|
|
|
|
// --- 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>
|
|
{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>
|
|
<option value="WhatsApp">WhatsApp</option>
|
|
<option value="Instagram">Instagram</option>
|
|
<option value="Website">Website</option>
|
|
<option value="LinkedIn">LinkedIn</option>
|
|
<option value="Indicação">Indicaçã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={COLORS.origins[entry.name as keyof typeof COLORS.origins] || 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>
|
|
|
|
{/* Ranking Table */}
|
|
<SellersTable data={sellersRanking} />
|
|
|
|
{/* Product Lists */}
|
|
<ProductLists requested={productStats.requested} sold={productStats.sold} />
|
|
</div>
|
|
);
|
|
};
|