forked from git.gladyson/openmonetis
feat(inbox): add Caixa de Entrada page for managing companion notifications
- Create inbox page with pending items management: - InboxCard: displays notification summary with parsed data - InboxDetailsDialog: view full notification details - ProcessDialog: convert notification to transaction (lancamento) - Add server actions for inbox operations: - getInboxItems: fetch pending inbox items - processInboxItem: create lancamento from inbox item - discardInboxItem: discard unwanted notifications - Add navigation link to sidebar under 'Gestão Financeira' - Add revalidation config for inbox-related paths
This commit is contained in:
169
components/caixa-de-entrada/inbox-details-dialog.tsx
Normal file
169
components/caixa-de-entrada/inbox-details-dialog.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
"use client";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { format } from "date-fns";
|
||||
import { ptBR } from "date-fns/locale";
|
||||
import type { InboxItem } from "./types";
|
||||
|
||||
interface InboxDetailsDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
item: InboxItem | null;
|
||||
}
|
||||
|
||||
export function InboxDetailsDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
item,
|
||||
}: InboxDetailsDialogProps) {
|
||||
if (!item) return null;
|
||||
|
||||
const formattedAmount = item.parsedAmount
|
||||
? new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
}).format(parseFloat(item.parsedAmount))
|
||||
: "Não extraído";
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Detalhes da Notificação</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Dados da fonte */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium text-muted-foreground">
|
||||
Fonte
|
||||
</h4>
|
||||
<div className="grid gap-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">App</span>
|
||||
<span>{item.sourceAppName || item.sourceApp}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Package</span>
|
||||
<span className="font-mono text-xs">{item.sourceApp}</span>
|
||||
</div>
|
||||
{item.deviceId && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Dispositivo</span>
|
||||
<span className="font-mono text-xs">{item.deviceId}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Texto original */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium text-muted-foreground">
|
||||
Notificação Original
|
||||
</h4>
|
||||
{item.originalTitle && (
|
||||
<p className="mb-1 font-medium">{item.originalTitle}</p>
|
||||
)}
|
||||
<p className="text-sm">{item.originalText}</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
Recebida em{" "}
|
||||
{format(new Date(item.notificationTimestamp), "PPpp", {
|
||||
locale: ptBR,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Dados parseados */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium text-muted-foreground">
|
||||
Dados Extraídos
|
||||
</h4>
|
||||
<div className="grid gap-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Estabelecimento</span>
|
||||
<span>{item.parsedName || "Não extraído"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Valor</span>
|
||||
<Badge
|
||||
variant={
|
||||
item.parsedTransactionType === "Receita"
|
||||
? "success"
|
||||
: "destructive"
|
||||
}
|
||||
>
|
||||
{formattedAmount}
|
||||
</Badge>
|
||||
</div>
|
||||
{item.parsedDate && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Data</span>
|
||||
<span>
|
||||
{format(new Date(item.parsedDate), "dd/MM/yyyy", {
|
||||
locale: ptBR,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{item.parsedCardLastDigits && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Cartão</span>
|
||||
<span>•••• {item.parsedCardLastDigits}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Tipo</span>
|
||||
<span>{item.parsedTransactionType || "Não identificado"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Metadados */}
|
||||
<div>
|
||||
<h4 className="mb-2 text-sm font-medium text-muted-foreground">
|
||||
Metadados
|
||||
</h4>
|
||||
<div className="grid gap-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">ID</span>
|
||||
<span className="font-mono text-xs">{item.id}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Status</span>
|
||||
<Badge variant="outline">{item.status}</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Criado em</span>
|
||||
<span>
|
||||
{format(new Date(item.createdAt), "PPpp", { locale: ptBR })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button>Fechar</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user