@hed-hog/finance 0.0.3 → 0.0.224

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,388 @@
1
+ 'use client';
2
+
3
+ import { Button } from '@/components/ui/button';
4
+ import {
5
+ Card,
6
+ CardContent,
7
+ CardDescription,
8
+ CardHeader,
9
+ CardTitle,
10
+ } from '@/components/ui/card';
11
+ import {
12
+ Dialog,
13
+ DialogContent,
14
+ DialogDescription,
15
+ DialogFooter,
16
+ DialogHeader,
17
+ DialogTitle,
18
+ DialogTrigger,
19
+ } from '@/components/ui/dialog';
20
+ import { Input } from '@/components/ui/input';
21
+ import { Label } from '@/components/ui/label';
22
+ import { Money } from '@/components/ui/money';
23
+ import { PageHeader } from '@/components/ui/page-header';
24
+ import {
25
+ Sheet,
26
+ SheetContent,
27
+ SheetDescription,
28
+ SheetHeader,
29
+ SheetTitle,
30
+ SheetTrigger,
31
+ } from '@/components/ui/sheet';
32
+ import {
33
+ Table,
34
+ TableBody,
35
+ TableCell,
36
+ TableHead,
37
+ TableHeader,
38
+ TableRow,
39
+ } from '@/components/ui/table';
40
+ import { Textarea } from '@/components/ui/textarea';
41
+ import { AlertTriangle, FileText, Send } from 'lucide-react';
42
+ import {
43
+ Bar,
44
+ BarChart,
45
+ CartesianGrid,
46
+ Cell,
47
+ ResponsiveContainer,
48
+ Tooltip,
49
+ XAxis,
50
+ YAxis,
51
+ } from 'recharts';
52
+ import { formatarMoeda } from '../../_lib/formatters';
53
+ import { useFinanceData } from '../../_lib/use-finance-data';
54
+
55
+ function HistoricoContatosSheet({
56
+ cliente,
57
+ historicoContatos,
58
+ }: {
59
+ cliente: string;
60
+ historicoContatos: any[];
61
+ }) {
62
+ return (
63
+ <Sheet>
64
+ <SheetTrigger asChild>
65
+ <Button variant="outline" size="sm">
66
+ <FileText className="mr-2 h-4 w-4" />
67
+ Histórico
68
+ </Button>
69
+ </SheetTrigger>
70
+ <SheetContent>
71
+ <SheetHeader>
72
+ <SheetTitle>Histórico de Contatos</SheetTitle>
73
+ <SheetDescription>{cliente}</SheetDescription>
74
+ </SheetHeader>
75
+ <div className="mt-6 space-y-4">
76
+ {historicoContatos.map((contato, i) => (
77
+ <div key={i} className="rounded-lg border p-4">
78
+ <div className="flex items-center justify-between">
79
+ <span className="font-medium">{contato.tipo}</span>
80
+ <span className="text-sm text-muted-foreground">
81
+ {contato.data}
82
+ </span>
83
+ </div>
84
+ <p className="mt-2 text-sm">{contato.descricao}</p>
85
+ <p className="mt-1 text-xs text-muted-foreground">
86
+ por {contato.responsavel}
87
+ </p>
88
+ </div>
89
+ ))}
90
+ </div>
91
+ </SheetContent>
92
+ </Sheet>
93
+ );
94
+ }
95
+
96
+ function EnviarCobrancaDialog({ cliente }: { cliente: string }) {
97
+ return (
98
+ <Dialog>
99
+ <DialogTrigger asChild>
100
+ <Button size="sm">
101
+ <Send className="mr-2 h-4 w-4" />
102
+ Cobrar
103
+ </Button>
104
+ </DialogTrigger>
105
+ <DialogContent>
106
+ <DialogHeader>
107
+ <DialogTitle>Enviar Cobrança</DialogTitle>
108
+ <DialogDescription>Enviar cobrança para {cliente}</DialogDescription>
109
+ </DialogHeader>
110
+ <div className="space-y-4">
111
+ <div className="space-y-2">
112
+ <Label>Tipo de Contato</Label>
113
+ <div className="flex gap-2">
114
+ <Button variant="outline" className="flex-1 bg-transparent">
115
+ E-mail
116
+ </Button>
117
+ <Button variant="outline" className="flex-1 bg-transparent">
118
+ WhatsApp
119
+ </Button>
120
+ <Button variant="outline" className="flex-1 bg-transparent">
121
+ SMS
122
+ </Button>
123
+ </div>
124
+ </div>
125
+ <div className="space-y-2">
126
+ <Label htmlFor="mensagem">Mensagem</Label>
127
+ <Textarea
128
+ id="mensagem"
129
+ placeholder="Mensagem personalizada..."
130
+ defaultValue="Prezado cliente, identificamos pendências em seu cadastro. Regularize sua situação para evitar restrições."
131
+ />
132
+ </div>
133
+ </div>
134
+ <DialogFooter>
135
+ <Button variant="outline">Cancelar</Button>
136
+ <Button>Enviar Cobrança</Button>
137
+ </DialogFooter>
138
+ </DialogContent>
139
+ </Dialog>
140
+ );
141
+ }
142
+
143
+ function RegistrarAcordoDialog({ cliente }: { cliente: string }) {
144
+ return (
145
+ <Dialog>
146
+ <DialogTrigger asChild>
147
+ <Button variant="outline" size="sm">
148
+ Registrar Acordo
149
+ </Button>
150
+ </DialogTrigger>
151
+ <DialogContent>
152
+ <DialogHeader>
153
+ <DialogTitle>Registrar Acordo</DialogTitle>
154
+ <DialogDescription>
155
+ Registrar acordo de pagamento para {cliente}
156
+ </DialogDescription>
157
+ </DialogHeader>
158
+ <div className="space-y-4">
159
+ <div className="grid grid-cols-2 gap-4">
160
+ <div className="space-y-2">
161
+ <Label htmlFor="valorAcordo">Valor do Acordo</Label>
162
+ <Input id="valorAcordo" type="number" placeholder="0,00" />
163
+ </div>
164
+ <div className="space-y-2">
165
+ <Label htmlFor="parcelas">Parcelas</Label>
166
+ <Input id="parcelas" type="number" placeholder="1" />
167
+ </div>
168
+ </div>
169
+ <div className="space-y-2">
170
+ <Label htmlFor="dataVencimento">Primeiro Vencimento</Label>
171
+ <Input id="dataVencimento" type="date" />
172
+ </div>
173
+ <div className="space-y-2">
174
+ <Label htmlFor="observacoes">Observações</Label>
175
+ <Textarea id="observacoes" placeholder="Detalhes do acordo..." />
176
+ </div>
177
+ </div>
178
+ <DialogFooter>
179
+ <Button variant="outline">Cancelar</Button>
180
+ <Button>Registrar Acordo</Button>
181
+ </DialogFooter>
182
+ </DialogContent>
183
+ </Dialog>
184
+ );
185
+ }
186
+
187
+ export default function CobrancaPage() {
188
+ const { data } = useFinanceData();
189
+ const { agingInadimplencia, historicoContatos } = data;
190
+
191
+ const chartData = [
192
+ {
193
+ name: '0-30 dias',
194
+ valor: agingInadimplencia.reduce(
195
+ (acc, c) => acc + (c.bucket0_30 || 0),
196
+ 0
197
+ ),
198
+ fill: 'hsl(var(--chart-2))',
199
+ },
200
+ {
201
+ name: '31-60 dias',
202
+ valor: agingInadimplencia.reduce(
203
+ (acc, c) => acc + (c.bucket31_60 || 0),
204
+ 0
205
+ ),
206
+ fill: 'hsl(var(--chart-4))',
207
+ },
208
+ {
209
+ name: '61-90 dias',
210
+ valor: agingInadimplencia.reduce(
211
+ (acc, c) => acc + (c.bucket61_90 || 0),
212
+ 0
213
+ ),
214
+ fill: 'hsl(var(--chart-5))',
215
+ },
216
+ {
217
+ name: '90+ dias',
218
+ valor: agingInadimplencia.reduce(
219
+ (acc, c) => acc + (c.bucket90plus || 0),
220
+ 0
221
+ ),
222
+ fill: 'hsl(var(--destructive))',
223
+ },
224
+ ];
225
+
226
+ const totalInadimplencia = agingInadimplencia.reduce(
227
+ (acc, c) => acc + c.total,
228
+ 0
229
+ );
230
+ const totalClientes = agingInadimplencia.length;
231
+
232
+ return (
233
+ <div className="space-y-6">
234
+ <PageHeader
235
+ title="Cobrança e Inadimplência"
236
+ description="Gerencie a cobrança de títulos vencidos"
237
+ breadcrumbs={[
238
+ { label: 'Contas a Receber', href: '/finance/accounts-receivable/installments' },
239
+ { label: 'Cobrança e Inadimplência' },
240
+ ]}
241
+ />
242
+
243
+ <div className="grid gap-4 md:grid-cols-3">
244
+ <Card>
245
+ <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
246
+ <CardTitle className="text-sm font-medium">
247
+ Total Inadimplente
248
+ </CardTitle>
249
+ <AlertTriangle className="h-4 w-4 text-destructive" />
250
+ </CardHeader>
251
+ <CardContent>
252
+ <div className="text-2xl font-bold">
253
+ <Money value={totalInadimplencia} />
254
+ </div>
255
+ </CardContent>
256
+ </Card>
257
+ <Card>
258
+ <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
259
+ <CardTitle className="text-sm font-medium">
260
+ Clientes em Atraso
261
+ </CardTitle>
262
+ </CardHeader>
263
+ <CardContent>
264
+ <div className="text-2xl font-bold">{totalClientes}</div>
265
+ </CardContent>
266
+ </Card>
267
+ <Card>
268
+ <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
269
+ <CardTitle className="text-sm font-medium">Maior Atraso</CardTitle>
270
+ </CardHeader>
271
+ <CardContent>
272
+ <div className="text-2xl font-bold text-destructive">90+ dias</div>
273
+ </CardContent>
274
+ </Card>
275
+ </div>
276
+
277
+ <Card>
278
+ <CardHeader>
279
+ <CardTitle>Aging por Faixa de Atraso</CardTitle>
280
+ <CardDescription>
281
+ Distribuição da inadimplência por período
282
+ </CardDescription>
283
+ </CardHeader>
284
+ <CardContent>
285
+ <ResponsiveContainer width="100%" height={250}>
286
+ <BarChart data={chartData}>
287
+ <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
288
+ <XAxis dataKey="name" tick={{ fontSize: 12 }} />
289
+ <YAxis
290
+ tick={{ fontSize: 12 }}
291
+ tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
292
+ />
293
+ <Tooltip
294
+ formatter={(value: number) => formatarMoeda(value)}
295
+ contentStyle={{
296
+ backgroundColor: 'hsl(var(--background))',
297
+ border: '1px solid hsl(var(--border))',
298
+ borderRadius: '8px',
299
+ }}
300
+ />
301
+ <Bar dataKey="valor" radius={[4, 4, 0, 0]}>
302
+ {chartData.map((entry, index) => (
303
+ <Cell key={`cell-${index}`} fill={entry.fill} />
304
+ ))}
305
+ </Bar>
306
+ </BarChart>
307
+ </ResponsiveContainer>
308
+ </CardContent>
309
+ </Card>
310
+
311
+ <Card>
312
+ <CardHeader>
313
+ <CardTitle>Clientes Inadimplentes</CardTitle>
314
+ <CardDescription>
315
+ Detalhamento por cliente e faixa de atraso
316
+ </CardDescription>
317
+ </CardHeader>
318
+ <CardContent>
319
+ <Table>
320
+ <TableHeader>
321
+ <TableRow>
322
+ <TableHead>Cliente</TableHead>
323
+ <TableHead className="text-right">0-30 dias</TableHead>
324
+ <TableHead className="text-right">31-60 dias</TableHead>
325
+ <TableHead className="text-right">61-90 dias</TableHead>
326
+ <TableHead className="text-right">90+ dias</TableHead>
327
+ <TableHead className="text-right">Total</TableHead>
328
+ <TableHead className="text-right">Ações</TableHead>
329
+ </TableRow>
330
+ </TableHeader>
331
+ <TableBody>
332
+ {agingInadimplencia.map((item) => (
333
+ <TableRow key={item.clienteId}>
334
+ <TableCell className="font-medium">{item.cliente}</TableCell>
335
+ <TableCell className="text-right">
336
+ {item.bucket0_30 > 0 ? (
337
+ <Money value={item.bucket0_30} />
338
+ ) : (
339
+ '-'
340
+ )}
341
+ </TableCell>
342
+ <TableCell className="text-right">
343
+ {item.bucket31_60 > 0 ? (
344
+ <Money value={item.bucket31_60} />
345
+ ) : (
346
+ '-'
347
+ )}
348
+ </TableCell>
349
+ <TableCell className="text-right">
350
+ {item.bucket61_90 > 0 ? (
351
+ <Money value={item.bucket61_90} />
352
+ ) : (
353
+ '-'
354
+ )}
355
+ </TableCell>
356
+ <TableCell className="text-right">
357
+ {item.bucket90plus > 0 ? (
358
+ <span className="text-destructive font-medium">
359
+ <Money value={item.bucket90plus} />
360
+ </span>
361
+ ) : (
362
+ '-'
363
+ )}
364
+ </TableCell>
365
+ <TableCell className="text-right font-semibold">
366
+ <Money value={item.total} />
367
+ </TableCell>
368
+ <TableCell>
369
+ <div className="flex justify-end gap-2">
370
+ <HistoricoContatosSheet
371
+ cliente={item.cliente}
372
+ historicoContatos={historicoContatos}
373
+ />
374
+ <EnviarCobrancaDialog cliente={item.cliente} />
375
+ <RegistrarAcordoDialog cliente={item.cliente} />
376
+ </div>
377
+ </TableCell>
378
+ </TableRow>
379
+ ))}
380
+ </TableBody>
381
+ </Table>
382
+ </CardContent>
383
+ </Card>
384
+ </div>
385
+ );
386
+ }
387
+
388
+