feat: Implement backend API and basic frontend structure
Adds initial backend API endpoints for fetching users and attendances, including basic filtering. Sets up the frontend routing with a layout component and includes placeholder pages for dashboard, users, and login. Refactors the README for local development setup.
This commit is contained in:
farelos
49
components/DateRangePicker.tsx
Normal file
49
components/DateRangePicker.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import React 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 formatDateForInput = (date: Date) => {
|
||||
return date.toISOString().split('T')[0];
|
||||
};
|
||||
|
||||
const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newStart = new Date(e.target.value);
|
||||
if (!isNaN(newStart.getTime())) {
|
||||
onChange({ ...dateRange, start: newStart });
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newEnd = new Date(e.target.value);
|
||||
if (!isNaN(newEnd.getTime())) {
|
||||
onChange({ ...dateRange, end: newEnd });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 bg-white border border-slate-200 px-3 py-2 rounded-lg shadow-sm hover:border-slate-300 transition-colors">
|
||||
<Calendar size={16} className="text-slate-500 shrink-0" />
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="date"
|
||||
value={formatDateForInput(dateRange.start)}
|
||||
onChange={handleStartChange}
|
||||
className="bg-transparent text-slate-700 font-medium outline-none cursor-pointer w-28 md:w-auto"
|
||||
/>
|
||||
<span className="text-slate-400">até</span>
|
||||
<input
|
||||
type="date"
|
||||
value={formatDateForInput(dateRange.end)}
|
||||
onChange={handleEndChange}
|
||||
className="bg-transparent text-slate-700 font-medium outline-none cursor-pointer w-28 md:w-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
41
components/KPICard.tsx
Normal file
41
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 = "bg-blue-500" }) => {
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-between hover:shadow-md transition-shadow duration-300">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-slate-500 text-sm font-medium mb-1">{title}</h3>
|
||||
<div className="text-3xl font-bold text-slate-800 tracking-tight">{value}</div>
|
||||
</div>
|
||||
<div className={`p-3 rounded-xl ${colorClass} bg-opacity-10 text-opacity-100`}>
|
||||
{/* Note: In Tailwind bg-opacity works if colorClass is like 'bg-blue-500'.
|
||||
Here we assume the consumer passes specific utility classes or we construct them.
|
||||
Simpler approach: Use a wrapper */}
|
||||
<div className={`w-8 h-8 flex items-center justify-center rounded-lg ${colorClass.replace('text', 'bg').replace('500', '100')} ${colorClass}`}>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
</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>}
|
||||
{subValue && <span className="text-slate-400">{subValue}</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
171
components/Layout.tsx
Normal file
171
components/Layout.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
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 } from 'lucide-react';
|
||||
import { USERS } from '../constants';
|
||||
import { User } from '../types';
|
||||
|
||||
const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: any, label: string, collapsed: boolean }) => (
|
||||
<NavLink
|
||||
to={to}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
|
||||
isActive
|
||||
? 'bg-yellow-400 text-slate-900 font-semibold shadow-md shadow-yellow-400/20'
|
||||
: 'text-slate-500 hover:bg-slate-100 hover:text-slate-900'
|
||||
}`
|
||||
}
|
||||
>
|
||||
<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 location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [currentUser, setCurrentUser] = useState<User>(USERS[1]); // Default to standard user fallback
|
||||
|
||||
useEffect(() => {
|
||||
const storedUserId = localStorage.getItem('ctms_user_id');
|
||||
if (storedUserId) {
|
||||
const user = USERS.find(u => u.id === storedUserId);
|
||||
if (user) {
|
||||
setCurrentUser(user);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('ctms_user_id');
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
// Simple title mapping based on route
|
||||
const getPageTitle = () => {
|
||||
if (location.pathname === '/') return 'Dashboard';
|
||||
if (location.pathname.includes('/admin/users')) return 'Gestão de Equipe';
|
||||
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';
|
||||
};
|
||||
|
||||
const isSuperAdmin = currentUser.role === 'super_admin';
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-slate-50 overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-slate-200 transform transition-transform duration-300 ease-in-out lg:relative lg:translate-x-0 ${
|
||||
isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3 px-6 h-20 border-b border-slate-100">
|
||||
<div className="bg-slate-900 text-white p-2 rounded-lg">
|
||||
<Hexagon size={24} fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-xl font-bold text-slate-900 tracking-tight">Fasto<span className="text-yellow-500">.</span></span>
|
||||
<button onClick={() => setIsMobileMenuOpen(false)} className="ml-auto lg:hidden text-slate-400">
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-4 py-6 space-y-2">
|
||||
|
||||
{/* Standard User Links */}
|
||||
{!isSuperAdmin && (
|
||||
<>
|
||||
<SidebarItem to="/" icon={LayoutDashboard} label="Dashboard" collapsed={false} />
|
||||
<SidebarItem to="/admin/users" icon={Users} label="Equipe" collapsed={false} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Super Admin Links */}
|
||||
{isSuperAdmin && (
|
||||
<>
|
||||
<div className="pt-2 pb-2 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
|
||||
Super Admin
|
||||
</div>
|
||||
<SidebarItem to="/super-admin" icon={Building2} label="Organizações" collapsed={false} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="pt-4 pb-2 px-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
|
||||
Sistema
|
||||
</div>
|
||||
<SidebarItem to="/profile" icon={UserCircle} label="Perfil" collapsed={false} />
|
||||
</nav>
|
||||
|
||||
{/* User Profile Mini */}
|
||||
<div className="p-4 border-t border-slate-100">
|
||||
<div className="flex items-center gap-3 p-2 rounded-lg bg-slate-50 border border-slate-100">
|
||||
<img src={currentUser.avatar_url} alt="User" className="w-10 h-10 rounded-full object-cover" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold text-slate-900 truncate">{currentUser.name}</p>
|
||||
<p className="text-xs text-slate-500 truncate capitalize">{currentUser.role === 'super_admin' ? 'Super Admin' : currentUser.role}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-slate-400 hover:text-red-500 transition-colors"
|
||||
title="Sair"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* Header */}
|
||||
<header className="h-20 bg-white border-b border-slate-200 px-4 sm:px-8 flex items-center justify-between z-10 sticky top-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => setIsMobileMenuOpen(true)} className="lg:hidden text-slate-500 hover:text-slate-900">
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
<h1 className="text-xl font-bold text-slate-800 hidden sm:block">{getPageTitle()}</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 sm:gap-6">
|
||||
{/* Search Bar */}
|
||||
<div className="hidden md:flex items-center bg-slate-100 rounded-full px-4 py-2 w-64 border border-transparent focus-within:bg-white focus-within:border-yellow-400 focus-within:ring-2 focus-within:ring-yellow-100 transition-all">
|
||||
<Search size={18} className="text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
className="bg-transparent border-none outline-none text-sm ml-2 w-full text-slate-700 placeholder-slate-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<div className="relative">
|
||||
<button className="p-2 text-slate-500 hover:bg-slate-100 rounded-full relative transition-colors">
|
||||
<Bell size={20} />
|
||||
<span className="absolute top-1.5 right-2 w-2.5 h-2.5 bg-yellow-400 rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
</div>
|
||||
</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-slate-900/50 z-40 lg:hidden"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
60
components/ProductLists.tsx
Normal file
60
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 p-6 rounded-2xl shadow-sm border border-slate-100 flex-1">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'}`}>
|
||||
<Icon size={18} />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-800">{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-slate-800 text-white' : 'bg-slate-100 text-slate-500'}`}>
|
||||
{idx + 1}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className="text-sm font-bold text-slate-900 block">{item.count}</span>
|
||||
<span className="text-[10px] text-slate-400">{item.percentage}%</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{data.length === 0 && <li className="text-sm text-slate-400 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>
|
||||
);
|
||||
};
|
||||
148
components/SellersTable.tsx
Normal file
148
components/SellersTable.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
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[];
|
||||
}
|
||||
|
||||
type SortKey = keyof SellerStat | 'name'; // 'name' is inside user object
|
||||
|
||||
export const SellersTable: React.FC<SellersTableProps> = ({ data }) => {
|
||||
const navigate = useNavigate();
|
||||
const [sortKey, setSortKey] = useState<SortKey>('conversionRate');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
|
||||
const handleSort = (key: SortKey) => {
|
||||
if (sortKey === key) {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortKey(key);
|
||||
setSortDirection('desc');
|
||||
}
|
||||
};
|
||||
|
||||
const sortedData = useMemo(() => {
|
||||
return [...data].sort((a, b) => {
|
||||
let aValue: any = a[sortKey as keyof SellerStat];
|
||||
let bValue: any = b[sortKey as keyof SellerStat];
|
||||
|
||||
if (sortKey === 'name') {
|
||||
aValue = a.user.name;
|
||||
bValue = b.user.name;
|
||||
} else {
|
||||
// Convert strings like "85.5" to numbers for sorting
|
||||
aValue = parseFloat(aValue as string);
|
||||
bValue = parseFloat(bValue as string);
|
||||
}
|
||||
|
||||
if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}, [data, sortKey, sortDirection]);
|
||||
|
||||
const SortIcon = ({ column }: { column: SortKey }) => {
|
||||
if (sortKey !== column) return <ChevronsUpDown size={14} className="text-slate-300" />;
|
||||
return sortDirection === 'asc' ? <ChevronUp size={14} className="text-blue-500" /> : <ChevronDown size={14} className="text-blue-500" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
||||
<div className="px-6 py-5 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 className="font-bold text-slate-800">Ranking de Vendedores</h3>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-50/50 text-slate-500 text-xs uppercase tracking-wider">
|
||||
<th
|
||||
className="px-6 py-4 font-semibold cursor-pointer hover:bg-slate-50 select-none"
|
||||
onClick={() => handleSort('name')}
|
||||
>
|
||||
<div className="flex items-center gap-2">Usuário <SortIcon column="name" /></div>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-4 font-semibold text-center cursor-pointer hover:bg-slate-50 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-slate-50 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-slate-50 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-slate-50 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-slate-100">
|
||||
{sortedData.map((item, idx) => (
|
||||
<tr
|
||||
key={item.user.id}
|
||||
className="hover:bg-blue-50/30 transition-colors cursor-pointer group"
|
||||
onClick={() => navigate(`/users/${item.user.id}`)}
|
||||
>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-slate-400 font-mono w-4">#{idx + 1}</span>
|
||||
<img src={item.user.avatar_url} alt="" className="w-9 h-9 rounded-full object-cover border border-slate-200" />
|
||||
<div>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-600 transition-colors">{item.user.name}</div>
|
||||
<div className="text-xs text-slate-500">{item.user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-slate-600 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' : parseFloat(item.avgScore) >= 60 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'}`}>
|
||||
{item.avgScore}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-slate-600 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-slate-100 rounded-full h-1.5 overflow-hidden">
|
||||
<div className="bg-blue-500 h-1.5 rounded-full" style={{ width: `${item.conversionRate}%` }}></div>
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-slate-700">{item.conversionRate}%</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{sortedData.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-8 text-center text-slate-400 italic">Nenhum dado disponível para o período selecionado.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user