@hed-hog/finance 0.0.223 → 0.0.225

package/hedhog/frontend/app/accounts-receivable/collections-default/page.tsx.ejs

@@ -0,0 +1,423 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { AlertTriangle, FileText, Send } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { formatarMoeda } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function HistoricoContatosSheet({
+  cliente,
+  historicoContatos,
+  t,
+}: {
+  cliente: string;
+  historicoContatos: any[];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm">
+          <FileText className="mr-2 h-4 w-4" />
+          {t('actions.history')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>{t('history.title')}</SheetTitle>
+          <SheetDescription>{cliente}</SheetDescription>
+        </SheetHeader>
+        <div className="mt-6 space-y-4">
+          {historicoContatos.map((contato, i) => (
+            <div key={i} className="rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <span className="font-medium">{contato.tipo}</span>
+                <span className="text-sm text-muted-foreground">
+                  {contato.data}
+                </span>
+              </div>
+              <p className="mt-2 text-sm">{contato.descricao}</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t('history.by')} {contato.responsavel}
+              </p>
+            </div>
+          ))}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function EnviarCobrancaDialog({
+  cliente,
+  t,
+}: {
+  cliente: string;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button size="sm">
+          <Send className="mr-2 h-4 w-4" />
+          {t('actions.collect')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('send.title')}</DialogTitle>
+          <DialogDescription>
+            {t('send.description', { cliente })}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label>{t('send.contactType')}</Label>
+            <div className="flex gap-2">
+              <Button variant="outline" className="flex-1 bg-transparent">
+                {t('send.channels.email')}
+              </Button>
+              <Button variant="outline" className="flex-1 bg-transparent">
+                WhatsApp
+              </Button>
+              <Button variant="outline" className="flex-1 bg-transparent">
+                SMS
+              </Button>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="mensagem">{t('send.message')}</Label>
+            <Textarea
+              id="mensagem"
+              placeholder={t('send.messagePlaceholder')}
+              defaultValue={t('send.defaultMessage')}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline">{t('common.cancel')}</Button>
+          <Button>{t('send.submit')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RegistrarAcordoDialog({
+  cliente,
+  t,
+}: {
+  cliente: string;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          {t('actions.registerAgreement')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('agreement.title')}</DialogTitle>
+          <DialogDescription>
+            {t('agreement.description', { cliente })}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="valorAcordo">{t('agreement.value')}</Label>
+              <Input id="valorAcordo" type="number" placeholder="0,00" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="parcelas">{t('agreement.installments')}</Label>
+              <Input id="parcelas" type="number" placeholder="1" />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="dataVencimento">
+              {t('agreement.firstDueDate')}
+            </Label>
+            <Input id="dataVencimento" type="date" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="observacoes">{t('agreement.notes')}</Label>
+            <Textarea
+              id="observacoes"
+              placeholder={t('agreement.notesPlaceholder')}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline">{t('common.cancel')}</Button>
+          <Button>{t('agreement.submit')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function CobrancaPage() {
+  const t = useTranslations('finance.CollectionsDefaultPage');
+  const { data } = useFinanceData();
+  const { agingInadimplencia, historicoContatos } = data;
+
+  const chartData = [
+    {
+      name: t('chart.range0to30'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket0_30 || 0),
+        0
+      ),
+      fill: 'hsl(var(--chart-2))',
+    },
+    {
+      name: t('chart.range31to60'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket31_60 || 0),
+        0
+      ),
+      fill: 'hsl(var(--chart-4))',
+    },
+    {
+      name: t('chart.range61to90'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket61_90 || 0),
+        0
+      ),
+      fill: 'hsl(var(--chart-5))',
+    },
+    {
+      name: t('chart.range90plus'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket90plus || 0),
+        0
+      ),
+      fill: 'hsl(var(--destructive))',
+    },
+  ];
+
+  const totalInadimplencia = agingInadimplencia.reduce(
+    (acc, c) => acc + c.total,
+    0
+  );
+  const totalClientes = agingInadimplencia.length;
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalDefault')}
+            </CardTitle>
+            <AlertTriangle className="h-4 w-4 text-destructive" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totalInadimplencia} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.lateClients')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{totalClientes}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.maxDelay')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-destructive">
+              {t('cards.maxDelayValue')}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('aging.title')}</CardTitle>
+          <CardDescription>{t('aging.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+              <YAxis
+                tick={{ fontSize: 12 }}
+                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+              />
+              <Tooltip
+                formatter={(value: number) => formatarMoeda(value)}
+                contentStyle={{
+                  backgroundColor: 'hsl(var(--background))',
+                  border: '1px solid hsl(var(--border))',
+                  borderRadius: '8px',
+                }}
+              />
+              <Bar dataKey="valor" radius={[4, 4, 0, 0]}>
+                {chartData.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.fill} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.client')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range0to30')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range31to60')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range61to90')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range90plus')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.total')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {agingInadimplencia.map((item) => (
+                <TableRow key={item.clienteId}>
+                  <TableCell className="font-medium">{item.cliente}</TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket0_30 > 0 ? (
+                      <Money value={item.bucket0_30} />
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket31_60 > 0 ? (
+                      <Money value={item.bucket31_60} />
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket61_90 > 0 ? (
+                      <Money value={item.bucket61_90} />
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket90plus > 0 ? (
+                      <span className="text-destructive font-medium">
+                        <Money value={item.bucket90plus} />
+                      </span>
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right font-semibold">
+                    <Money value={item.total} />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <HistoricoContatosSheet
+                        cliente={item.cliente}
+                        historicoContatos={historicoContatos}
+                        t={t}
+                      />
+                      <EnviarCobrancaDialog cliente={item.cliente} t={t} />
+                      <RegistrarAcordoDialog cliente={item.cliente} t={t} />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}