178 lines
9.2 KiB
JavaScript
178 lines
9.2 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
List,
|
|
PieChart,
|
|
Users,
|
|
ListChecks,
|
|
MessageSquare,
|
|
History,
|
|
Server,
|
|
FileText,
|
|
Receipt,
|
|
BarChart3
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { useContasReceber } from '../../hooks/useContasReceber';
|
|
import { RegistrosView } from './RegistrosView';
|
|
import { CruzamentoView } from './CruzamentoView';
|
|
import { ServicesView } from './ServicesView';
|
|
import { ClientsView } from './ClientsView';
|
|
import { EntradasPlanejadasView } from './EntradasPlanejadasView';
|
|
import { BoletosView } from './BoletosView';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const ActivityLog = ({ isOpen, onClose }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-y-0 right-0 w-80 bg-white dark:bg-[#0f172a]/95 backdrop-blur-2xl border-l border-slate-200 dark:border-slate-800 shadow-2xl z-50 animate-in slide-in-from-right duration-500">
|
|
<div className="p-6 h-full flex flex-col">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h3 className="font-bold flex items-center gap-2 uppercase tracking-widest text-[10px] text-slate-500 dark:text-slate-400">
|
|
<History className="w-4 h-4 text-emerald-500" /> Atividade (Buzz)
|
|
</h3>
|
|
<Button variant="ghost" size="sm" onClick={onClose} className="text-slate-500 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800">Fechar</Button>
|
|
</div>
|
|
|
|
<ScrollArea className="flex-1 -mr-2 pr-4">
|
|
<div className="space-y-6">
|
|
{[
|
|
{ user: 'Ana (CFO)', action: 'Validou pagamento', target: 'PAG-1002', time: '10 min atrás', color: 'text-emerald-500' },
|
|
{ user: 'Bruno', action: 'Adicionou anexo', target: 'PAG-1045', time: '1h atrás', color: 'text-blue-500' },
|
|
].map((log, i) => (
|
|
<div key={i} className="flex gap-4 group">
|
|
<div className="mt-1 w-2 h-2 rounded-full bg-slate-200 dark:bg-slate-800 group-hover:bg-emerald-500 transition-colors shrink-0" />
|
|
<div>
|
|
<p className="text-xs font-bold text-slate-900 dark:text-slate-200">{log.user}</p>
|
|
<p className="text-xs text-slate-500 mt-0.5">{log.action} <span className={log.color}>{log.target}</span></p>
|
|
<p className="text-[9px] text-slate-600 dark:text-slate-500 mt-1 uppercase font-bold tracking-tighter">{log.time}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<div className="mt-auto pt-6 border-t border-slate-200 dark:border-slate-800 font-inter">
|
|
<div className="bg-slate-100/50 dark:bg-slate-900/50 p-3 rounded-xl border border-slate-200 dark:border-slate-800">
|
|
<p className="text-[10px] text-slate-500 font-bold mb-2 uppercase italic tracking-widest">"Buzz" - Chat Interno</p>
|
|
<div className="flex gap-2 items-center">
|
|
<input type="text" placeholder="Escreva um comentário..." className="flex-1 bg-transparent border-none text-[11px] text-slate-900 dark:text-white outline-none placeholder:text-slate-400 dark:placeholder:text-slate-700" />
|
|
<MessageSquare className="w-3.5 h-3.5 text-slate-400 dark:text-slate-600 hover:text-emerald-500 cursor-pointer" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ContasReceberView = ({ initialView }) => {
|
|
const { state, actions } = useContasReceber(initialView);
|
|
const activeSubView = state?.activeSubView || 'default';
|
|
const transactions = state?.transactions || [];
|
|
const clients = state?.clients || [];
|
|
const services = state?.services || [];
|
|
const kpis = state?.kpis || {};
|
|
const categorias = state?.categorias || [];
|
|
const caixas = state?.caixas || [];
|
|
|
|
const [isBuzzOpen, setIsBuzzOpen] = React.useState(false);
|
|
|
|
const subViews = [
|
|
{ id: 'default', label: 'Cruzamento', icon: BarChart3, description: 'Planejado vs Executado' },
|
|
{ id: 'entradas-planejadas', label: 'Entradas Planejadas', icon: FileText, description: 'Estimativas' },
|
|
{ id: 'boletos', label: 'Boletos', icon: Receipt, description: 'Cobranças' },
|
|
{ id: 'clientes', label: 'Clientes', icon: Users, description: 'Gerenciamento' },
|
|
{ id: 'servicos', label: 'Serviços', icon: Server, description: 'Catálogo' },
|
|
];
|
|
|
|
const renderSubView = () => {
|
|
switch (activeSubView) {
|
|
case 'servicos':
|
|
return <ServicesView services={services} />;
|
|
case 'clientes':
|
|
return <ClientsView clients={clients} />;
|
|
case 'entradas-planejadas':
|
|
return <EntradasPlanejadasView />;
|
|
case 'boletos':
|
|
return <BoletosView initialFilter={initialView === 'boletos-pendentes' ? 'A_RECEBER' : 'TODOS'} />;
|
|
case 'default':
|
|
default:
|
|
return <CruzamentoView
|
|
data={transactions}
|
|
kpis={kpis}
|
|
categorias={categorias}
|
|
caixas={caixas}
|
|
entradasPlanejadas={state?.entradasPlanejadas || []}
|
|
/>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="animate-in fade-in duration-700 relative">
|
|
{/* Header Section */}
|
|
<div className="border-b border-slate-200 dark:border-slate-800 pb-4 sm:pb-6 mb-6 sm:mb-8">
|
|
{/* Linha 1: Título, Badge e Botão Activity Log */}
|
|
<div className="flex items-center justify-between gap-4 mb-4 sm:mb-6">
|
|
<h1 className="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white tracking-tight flex items-center gap-2 sm:gap-3">
|
|
Recebíveis
|
|
{/* <Badge className="bg-emerald-500/10 text-emerald-500 border-emerald-500/20 text-[10px] hidden sm:inline-flex">PREMIUM v2</Badge> */}
|
|
</h1>
|
|
|
|
{/* <Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className={cn(
|
|
"rounded-full w-9 h-9 p-0 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shrink-0",
|
|
isBuzzOpen ? "text-emerald-400 ring-2 ring-emerald-500/20" : "text-slate-500"
|
|
)}
|
|
onClick={() => setIsBuzzOpen(!isBuzzOpen)}
|
|
>
|
|
<History className="w-4 h-4" />
|
|
</Button> */}
|
|
</div>
|
|
|
|
{/* Linha 2: Menu de Navegação */}
|
|
<div className="flex bg-slate-100/80 dark:bg-slate-900/80 p-1 rounded-xl border border-slate-200 dark:border-slate-800 shadow-inner flex-wrap gap-1 overflow-x-auto">
|
|
{subViews.map((view) => {
|
|
const Icon = view.icon;
|
|
return (
|
|
<Button
|
|
key={view.id}
|
|
variant="ghost"
|
|
onClick={() => actions?.setActiveSubView(view.id)}
|
|
className={cn(
|
|
"rounded-lg px-3 sm:px-4 h-8 sm:h-9 font-bold text-[9px] sm:text-[10px] uppercase tracking-widest transition-all duration-300 whitespace-nowrap shrink-0",
|
|
activeSubView === view.id
|
|
? "bg-white dark:bg-[#1e293b] text-slate-900 dark:text-white shadow-lg border border-slate-200 dark:border-slate-700"
|
|
: "text-slate-500 hover:text-slate-900 dark:hover:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800"
|
|
)}
|
|
title={view.description}
|
|
>
|
|
<Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4 sm:mr-2" />
|
|
<span className="hidden sm:inline">{view.label}</span>
|
|
<span className="sm:hidden">{view.label.split(' ')[0]}</span>
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
<div className="lg:col-span-12">
|
|
{renderSubView()}
|
|
</div>
|
|
</div>
|
|
|
|
<ActivityLog
|
|
isOpen={isBuzzOpen}
|
|
onClose={() => setIsBuzzOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|