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:
Felipe Coutinho
183
app/(dashboard)/caixa-de-entrada/actions.ts
Normal file
183
app/(dashboard)/caixa-de-entrada/actions.ts
Normal file
@@ -0,0 +1,183 @@
|
||||
"use server";
|
||||
|
||||
import { inboxItems, lancamentos } from "@/db/schema";
|
||||
import { handleActionError } from "@/lib/actions/helpers";
|
||||
import type { ActionResult } from "@/lib/actions/types";
|
||||
import { db } from "@/lib/db";
|
||||
import { getUser } from "@/lib/auth/server";
|
||||
import { and, eq, inArray } from "drizzle-orm";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { z } from "zod";
|
||||
import { getCurrentPeriod } from "@/lib/utils/period";
|
||||
|
||||
const processInboxSchema = z.object({
|
||||
inboxItemId: z.string().uuid("ID do item inválido"),
|
||||
name: z.string().min(1, "Nome é obrigatório"),
|
||||
amount: z.coerce.number().positive("Valor deve ser positivo"),
|
||||
purchaseDate: z.string().min(1, "Data é obrigatória"),
|
||||
transactionType: z.enum(["Despesa", "Receita"]),
|
||||
condition: z.string().min(1, "Condição é obrigatória"),
|
||||
paymentMethod: z.string().min(1, "Forma de pagamento é obrigatória"),
|
||||
categoriaId: z.string().uuid("Categoria inválida"),
|
||||
contaId: z.string().uuid("Conta inválida").optional(),
|
||||
cartaoId: z.string().uuid("Cartão inválido").optional(),
|
||||
note: z.string().optional(),
|
||||
});
|
||||
|
||||
const discardInboxSchema = z.object({
|
||||
inboxItemId: z.string().uuid("ID do item inválido"),
|
||||
reason: z.string().optional(),
|
||||
});
|
||||
|
||||
const bulkDiscardSchema = z.object({
|
||||
inboxItemIds: z.array(z.string().uuid()).min(1, "Selecione ao menos um item"),
|
||||
});
|
||||
|
||||
function revalidateInbox() {
|
||||
revalidatePath("/caixa-de-entrada");
|
||||
revalidatePath("/lancamentos");
|
||||
revalidatePath("/dashboard");
|
||||
}
|
||||
|
||||
export async function processInboxItemAction(
|
||||
input: z.infer<typeof processInboxSchema>
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = processInboxSchema.parse(input);
|
||||
|
||||
// Verificar se item existe e pertence ao usuário
|
||||
const [item] = await db
|
||||
.select()
|
||||
.from(inboxItems)
|
||||
.where(
|
||||
and(
|
||||
eq(inboxItems.id, data.inboxItemId),
|
||||
eq(inboxItems.userId, user.id),
|
||||
eq(inboxItems.status, "pending")
|
||||
)
|
||||
)
|
||||
.limit(1);
|
||||
|
||||
if (!item) {
|
||||
return { success: false, error: "Item não encontrado ou já processado." };
|
||||
}
|
||||
|
||||
// Determinar período baseado na data de compra
|
||||
const purchaseDate = new Date(data.purchaseDate);
|
||||
const period = getCurrentPeriod(purchaseDate);
|
||||
|
||||
// Criar lançamento
|
||||
const [newLancamento] = await db
|
||||
.insert(lancamentos)
|
||||
.values({
|
||||
userId: user.id,
|
||||
name: data.name,
|
||||
amount: data.amount.toString(),
|
||||
purchaseDate: purchaseDate,
|
||||
transactionType: data.transactionType,
|
||||
condition: data.condition,
|
||||
paymentMethod: data.paymentMethod,
|
||||
categoriaId: data.categoriaId,
|
||||
contaId: data.contaId,
|
||||
cartaoId: data.cartaoId,
|
||||
note: data.note,
|
||||
period,
|
||||
})
|
||||
.returning({ id: lancamentos.id });
|
||||
|
||||
// Marcar item como processado
|
||||
await db
|
||||
.update(inboxItems)
|
||||
.set({
|
||||
status: "processed",
|
||||
processedAt: new Date(),
|
||||
lancamentoId: newLancamento.id,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(inboxItems.id, data.inboxItemId));
|
||||
|
||||
revalidateInbox();
|
||||
|
||||
return { success: true, message: "Lançamento criado com sucesso!" };
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function discardInboxItemAction(
|
||||
input: z.infer<typeof discardInboxSchema>
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = discardInboxSchema.parse(input);
|
||||
|
||||
// Verificar se item existe e pertence ao usuário
|
||||
const [item] = await db
|
||||
.select()
|
||||
.from(inboxItems)
|
||||
.where(
|
||||
and(
|
||||
eq(inboxItems.id, data.inboxItemId),
|
||||
eq(inboxItems.userId, user.id),
|
||||
eq(inboxItems.status, "pending")
|
||||
)
|
||||
)
|
||||
.limit(1);
|
||||
|
||||
if (!item) {
|
||||
return { success: false, error: "Item não encontrado ou já processado." };
|
||||
}
|
||||
|
||||
// Marcar item como descartado
|
||||
await db
|
||||
.update(inboxItems)
|
||||
.set({
|
||||
status: "discarded",
|
||||
discardedAt: new Date(),
|
||||
discardReason: data.reason,
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(eq(inboxItems.id, data.inboxItemId));
|
||||
|
||||
revalidateInbox();
|
||||
|
||||
return { success: true, message: "Item descartado." };
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function bulkDiscardInboxItemsAction(
|
||||
input: z.infer<typeof bulkDiscardSchema>
|
||||
): Promise<ActionResult> {
|
||||
try {
|
||||
const user = await getUser();
|
||||
const data = bulkDiscardSchema.parse(input);
|
||||
|
||||
// Marcar todos os itens como descartados
|
||||
await db
|
||||
.update(inboxItems)
|
||||
.set({
|
||||
status: "discarded",
|
||||
discardedAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
})
|
||||
.where(
|
||||
and(
|
||||
inArray(inboxItems.id, data.inboxItemIds),
|
||||
eq(inboxItems.userId, user.id),
|
||||
eq(inboxItems.status, "pending")
|
||||
)
|
||||
);
|
||||
|
||||
revalidateInbox();
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: `${data.inboxItemIds.length} item(s) descartado(s).`,
|
||||
};
|
||||
} catch (error) {
|
||||
return handleActionError(error);
|
||||
}
|
||||
}
|
||||
82
app/(dashboard)/caixa-de-entrada/data.ts
Normal file
82
app/(dashboard)/caixa-de-entrada/data.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Data fetching functions for Caixa de Entrada
|
||||
*/
|
||||
|
||||
import { db } from "@/lib/db";
|
||||
import { inboxItems, categorias, contas, cartoes } from "@/db/schema";
|
||||
import { eq, desc, and } from "drizzle-orm";
|
||||
import type { InboxItem, SelectOption } from "@/components/caixa-de-entrada/types";
|
||||
|
||||
export async function fetchInboxItems(
|
||||
userId: string,
|
||||
status: "pending" | "processed" | "discarded" = "pending"
|
||||
): Promise<InboxItem[]> {
|
||||
const items = await db
|
||||
.select()
|
||||
.from(inboxItems)
|
||||
.where(and(eq(inboxItems.userId, userId), eq(inboxItems.status, status)))
|
||||
.orderBy(desc(inboxItems.createdAt));
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
export async function fetchInboxItemById(
|
||||
userId: string,
|
||||
itemId: string
|
||||
): Promise<InboxItem | null> {
|
||||
const [item] = await db
|
||||
.select()
|
||||
.from(inboxItems)
|
||||
.where(and(eq(inboxItems.id, itemId), eq(inboxItems.userId, userId)))
|
||||
.limit(1);
|
||||
|
||||
return item ?? null;
|
||||
}
|
||||
|
||||
export async function fetchCategoriasForSelect(
|
||||
userId: string,
|
||||
type?: string
|
||||
): Promise<SelectOption[]> {
|
||||
const query = db
|
||||
.select({ id: categorias.id, name: categorias.name })
|
||||
.from(categorias)
|
||||
.where(
|
||||
type
|
||||
? and(eq(categorias.userId, userId), eq(categorias.type, type))
|
||||
: eq(categorias.userId, userId)
|
||||
)
|
||||
.orderBy(categorias.name);
|
||||
|
||||
return query;
|
||||
}
|
||||
|
||||
export async function fetchContasForSelect(userId: string): Promise<SelectOption[]> {
|
||||
const items = await db
|
||||
.select({ id: contas.id, name: contas.name })
|
||||
.from(contas)
|
||||
.where(and(eq(contas.userId, userId), eq(contas.status, "ativo")))
|
||||
.orderBy(contas.name);
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
export async function fetchCartoesForSelect(
|
||||
userId: string
|
||||
): Promise<(SelectOption & { lastDigits?: string })[]> {
|
||||
const items = await db
|
||||
.select({ id: cartoes.id, name: cartoes.name })
|
||||
.from(cartoes)
|
||||
.where(and(eq(cartoes.userId, userId), eq(cartoes.status, "ativo")))
|
||||
.orderBy(cartoes.name);
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
export async function fetchPendingInboxCount(userId: string): Promise<number> {
|
||||
const items = await db
|
||||
.select({ id: inboxItems.id })
|
||||
.from(inboxItems)
|
||||
.where(and(eq(inboxItems.userId, userId), eq(inboxItems.status, "pending")));
|
||||
|
||||
return items.length;
|
||||
}
|
||||
33
app/(dashboard)/caixa-de-entrada/loading.tsx
Normal file
33
app/(dashboard)/caixa-de-entrada/loading.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<main className="flex flex-col items-start gap-6">
|
||||
<div className="flex w-full flex-col gap-6">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-10 w-48" />
|
||||
<Skeleton className="h-10 w-32" />
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Card key={i} className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-5 w-16" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Skeleton className="h-8 w-20" />
|
||||
<Skeleton className="h-8 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
30
app/(dashboard)/caixa-de-entrada/page.tsx
Normal file
30
app/(dashboard)/caixa-de-entrada/page.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { InboxPage } from "@/components/caixa-de-entrada/inbox-page";
|
||||
import { getUserId } from "@/lib/auth/server";
|
||||
import {
|
||||
fetchInboxItems,
|
||||
fetchCategoriasForSelect,
|
||||
fetchContasForSelect,
|
||||
fetchCartoesForSelect,
|
||||
} from "./data";
|
||||
|
||||
export default async function Page() {
|
||||
const userId = await getUserId();
|
||||
|
||||
const [items, categorias, contas, cartoes] = await Promise.all([
|
||||
fetchInboxItems(userId, "pending"),
|
||||
fetchCategoriasForSelect(userId),
|
||||
fetchContasForSelect(userId),
|
||||
fetchCartoesForSelect(userId),
|
||||
]);
|
||||
|
||||
return (
|
||||
<main className="flex flex-col items-start gap-6">
|
||||
<InboxPage
|
||||
items={items}
|
||||
categorias={categorias}
|
||||
contas={contas}
|
||||
cartoes={cartoes}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
135
components/caixa-de-entrada/inbox-card.tsx
Normal file
135
components/caixa-de-entrada/inbox-card.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
"use client";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ptBR } from "date-fns/locale";
|
||||
import {
|
||||
RiCheckLine,
|
||||
RiDeleteBinLine,
|
||||
RiEyeLine,
|
||||
RiMoreLine,
|
||||
RiSmartphoneLine,
|
||||
} from "@remixicon/react";
|
||||
import type { InboxItem } from "./types";
|
||||
|
||||
interface InboxCardProps {
|
||||
item: InboxItem;
|
||||
onProcess: (item: InboxItem) => void;
|
||||
onDiscard: (item: InboxItem) => void;
|
||||
onViewDetails: (item: InboxItem) => void;
|
||||
}
|
||||
|
||||
export function InboxCard({
|
||||
item,
|
||||
onProcess,
|
||||
onDiscard,
|
||||
onViewDetails,
|
||||
}: InboxCardProps) {
|
||||
const formattedAmount = item.parsedAmount
|
||||
? new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
}).format(parseFloat(item.parsedAmount))
|
||||
: null;
|
||||
|
||||
const timeAgo = formatDistanceToNow(new Date(item.notificationTimestamp), {
|
||||
addSuffix: true,
|
||||
locale: ptBR,
|
||||
});
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col">
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-2 pb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<RiSmartphoneLine className="size-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">
|
||||
{item.sourceAppName || item.sourceApp}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{formattedAmount && (
|
||||
<Badge
|
||||
variant={
|
||||
item.parsedTransactionType === "Receita"
|
||||
? "success"
|
||||
: "destructive"
|
||||
}
|
||||
>
|
||||
{formattedAmount}
|
||||
</Badge>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="size-8">
|
||||
<RiMoreLine className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onViewDetails(item)}>
|
||||
<RiEyeLine className="mr-2 size-4" />
|
||||
Ver detalhes
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => onProcess(item)}>
|
||||
<RiCheckLine className="mr-2 size-4" />
|
||||
Processar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => onDiscard(item)}
|
||||
className="text-destructive"
|
||||
>
|
||||
<RiDeleteBinLine className="mr-2 size-4" />
|
||||
Descartar
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex flex-1 flex-col gap-3">
|
||||
<div className="flex-1">
|
||||
{item.parsedName && (
|
||||
<p className="font-medium">{item.parsedName}</p>
|
||||
)}
|
||||
<p className="line-clamp-2 text-sm text-muted-foreground">
|
||||
{item.originalText}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-muted-foreground">{timeAgo}</span>
|
||||
{item.parsedCardLastDigits && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
•••• {item.parsedCardLastDigits}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => onProcess(item)}
|
||||
>
|
||||
<RiCheckLine className="mr-1 size-4" />
|
||||
Processar
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onDiscard(item)}
|
||||
>
|
||||
<RiDeleteBinLine className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
163
components/caixa-de-entrada/inbox-page.tsx
Normal file
163
components/caixa-de-entrada/inbox-page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { discardInboxItemAction } from "@/app/(dashboard)/caixa-de-entrada/actions";
|
||||
import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
|
||||
import { EmptyState } from "@/components/empty-state";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { RiInboxLine } from "@remixicon/react";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { InboxCard } from "./inbox-card";
|
||||
import { InboxDetailsDialog } from "./inbox-details-dialog";
|
||||
import { ProcessDialog } from "./process-dialog";
|
||||
import type { InboxItem, SelectOption } from "./types";
|
||||
|
||||
interface InboxPageProps {
|
||||
items: InboxItem[];
|
||||
categorias: SelectOption[];
|
||||
contas: SelectOption[];
|
||||
cartoes: SelectOption[];
|
||||
}
|
||||
|
||||
export function InboxPage({
|
||||
items,
|
||||
categorias,
|
||||
contas,
|
||||
cartoes,
|
||||
}: InboxPageProps) {
|
||||
const [processOpen, setProcessOpen] = useState(false);
|
||||
const [itemToProcess, setItemToProcess] = useState<InboxItem | null>(null);
|
||||
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
const [itemDetails, setItemDetails] = useState<InboxItem | null>(null);
|
||||
|
||||
const [discardOpen, setDiscardOpen] = useState(false);
|
||||
const [itemToDiscard, setItemToDiscard] = useState<InboxItem | null>(null);
|
||||
|
||||
const sortedItems = useMemo(
|
||||
() =>
|
||||
[...items].sort(
|
||||
(a, b) =>
|
||||
new Date(b.notificationTimestamp).getTime() -
|
||||
new Date(a.notificationTimestamp).getTime()
|
||||
),
|
||||
[items]
|
||||
);
|
||||
|
||||
const handleProcessOpenChange = useCallback((open: boolean) => {
|
||||
setProcessOpen(open);
|
||||
if (!open) {
|
||||
setItemToProcess(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDetailsOpenChange = useCallback((open: boolean) => {
|
||||
setDetailsOpen(open);
|
||||
if (!open) {
|
||||
setItemDetails(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDiscardOpenChange = useCallback((open: boolean) => {
|
||||
setDiscardOpen(open);
|
||||
if (!open) {
|
||||
setItemToDiscard(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleProcessRequest = useCallback((item: InboxItem) => {
|
||||
setItemToProcess(item);
|
||||
setProcessOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleDetailsRequest = useCallback((item: InboxItem) => {
|
||||
setItemDetails(item);
|
||||
setDetailsOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleDiscardRequest = useCallback((item: InboxItem) => {
|
||||
setItemToDiscard(item);
|
||||
setDiscardOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleDiscardConfirm = useCallback(async () => {
|
||||
if (!itemToDiscard) return;
|
||||
|
||||
const result = await discardInboxItemAction({
|
||||
inboxItemId: itemToDiscard.id,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error(result.error);
|
||||
throw new Error(result.error);
|
||||
}, [itemToDiscard]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex w-full flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Caixa de Entrada</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{items.length === 0
|
||||
? "Nenhuma notificação pendente"
|
||||
: `${items.length} notificação${items.length > 1 ? "ões" : ""} pendente${items.length > 1 ? "s" : ""}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sortedItems.length === 0 ? (
|
||||
<Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
|
||||
<EmptyState
|
||||
media={<RiInboxLine className="size-6 text-primary" />}
|
||||
title="Caixa de entrada vazia"
|
||||
description="As notificações capturadas pelo app OpenSheets Companion aparecerão aqui para você processar."
|
||||
/>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{sortedItems.map((item) => (
|
||||
<InboxCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
onProcess={handleProcessRequest}
|
||||
onDiscard={handleDiscardRequest}
|
||||
onViewDetails={handleDetailsRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ProcessDialog
|
||||
open={processOpen}
|
||||
onOpenChange={handleProcessOpenChange}
|
||||
item={itemToProcess}
|
||||
categorias={categorias}
|
||||
contas={contas}
|
||||
cartoes={cartoes}
|
||||
/>
|
||||
|
||||
<InboxDetailsDialog
|
||||
open={detailsOpen}
|
||||
onOpenChange={handleDetailsOpenChange}
|
||||
item={itemDetails}
|
||||
/>
|
||||
|
||||
<ConfirmActionDialog
|
||||
open={discardOpen}
|
||||
onOpenChange={handleDiscardOpenChange}
|
||||
title="Descartar notificação?"
|
||||
description="A notificação será marcada como descartada e não aparecerá mais na lista de pendentes."
|
||||
confirmLabel="Descartar"
|
||||
confirmVariant="destructive"
|
||||
pendingLabel="Descartando..."
|
||||
onConfirm={handleDiscardConfirm}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
326
components/caixa-de-entrada/process-dialog.tsx
Normal file
326
components/caixa-de-entrada/process-dialog.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
"use client";
|
||||
|
||||
import { processInboxItemAction } from "@/app/(dashboard)/caixa-de-entrada/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import type { InboxItem, SelectOption } from "./types";
|
||||
|
||||
interface ProcessDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
item: InboxItem | null;
|
||||
categorias: SelectOption[];
|
||||
contas: SelectOption[];
|
||||
cartoes: SelectOption[];
|
||||
}
|
||||
|
||||
export function ProcessDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
item,
|
||||
categorias,
|
||||
contas,
|
||||
cartoes,
|
||||
}: ProcessDialogProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Form state
|
||||
const [name, setName] = useState("");
|
||||
const [amount, setAmount] = useState("");
|
||||
const [purchaseDate, setPurchaseDate] = useState("");
|
||||
const [transactionType, setTransactionType] = useState<"Despesa" | "Receita">(
|
||||
"Despesa"
|
||||
);
|
||||
const [condition, setCondition] = useState("realizado");
|
||||
const [paymentMethod, setPaymentMethod] = useState("cartao-credito");
|
||||
const [categoriaId, setCategoriaId] = useState("");
|
||||
const [contaId, setContaId] = useState("");
|
||||
const [cartaoId, setCartaoId] = useState("");
|
||||
const [note, setNote] = useState("");
|
||||
|
||||
// Pré-preencher com dados parseados
|
||||
useEffect(() => {
|
||||
if (item) {
|
||||
setName(item.parsedName || "");
|
||||
setAmount(item.parsedAmount || "");
|
||||
setPurchaseDate(
|
||||
item.parsedDate
|
||||
? new Date(item.parsedDate).toISOString().split("T")[0]
|
||||
: new Date(item.notificationTimestamp).toISOString().split("T")[0]
|
||||
);
|
||||
setTransactionType(
|
||||
(item.parsedTransactionType as "Despesa" | "Receita") || "Despesa"
|
||||
);
|
||||
setCondition("realizado");
|
||||
setPaymentMethod(item.parsedCardLastDigits ? "cartao-credito" : "outros");
|
||||
setCategoriaId("");
|
||||
setContaId("");
|
||||
setCartaoId("");
|
||||
setNote("");
|
||||
}
|
||||
}, [item]);
|
||||
|
||||
// Por enquanto, mostrar todas as categorias
|
||||
// Em produção, seria melhor filtrar pelo tipo (Despesa/Receita)
|
||||
const filteredCategorias = categorias;
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
if (!item) return;
|
||||
|
||||
if (!categoriaId) {
|
||||
toast.error("Selecione uma categoria.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentMethod === "cartao-credito" && !cartaoId) {
|
||||
toast.error("Selecione um cartão.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentMethod !== "cartao-credito" && !contaId) {
|
||||
toast.error("Selecione uma conta.");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const result = await processInboxItemAction({
|
||||
inboxItemId: item.id,
|
||||
name,
|
||||
amount: parseFloat(amount),
|
||||
purchaseDate,
|
||||
transactionType,
|
||||
condition,
|
||||
paymentMethod,
|
||||
categoriaId,
|
||||
contaId: paymentMethod !== "cartao-credito" ? contaId : undefined,
|
||||
cartaoId: paymentMethod === "cartao-credito" ? cartaoId : undefined,
|
||||
note: note || undefined,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
toast.success(result.message);
|
||||
onOpenChange(false);
|
||||
} else {
|
||||
toast.error(result.error);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [
|
||||
item,
|
||||
name,
|
||||
amount,
|
||||
purchaseDate,
|
||||
transactionType,
|
||||
condition,
|
||||
paymentMethod,
|
||||
categoriaId,
|
||||
contaId,
|
||||
cartaoId,
|
||||
note,
|
||||
onOpenChange,
|
||||
]);
|
||||
|
||||
if (!item) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Processar Notificação</DialogTitle>
|
||||
<DialogDescription>
|
||||
Revise os dados extraídos e complete as informações para criar o
|
||||
lançamento.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 py-4">
|
||||
{/* Texto original */}
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<p className="text-xs text-muted-foreground">Notificação original:</p>
|
||||
<p className="mt-1 text-sm">{item.originalText}</p>
|
||||
</div>
|
||||
|
||||
{/* Nome/Descrição */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">Descrição</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Ex: Supermercado, Uber, etc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Valor e Data */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="amount">Valor (R$)</Label>
|
||||
<Input
|
||||
id="amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
placeholder="0,00"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="purchaseDate">Data</Label>
|
||||
<Input
|
||||
id="purchaseDate"
|
||||
type="date"
|
||||
value={purchaseDate}
|
||||
onChange={(e) => setPurchaseDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tipo de transação */}
|
||||
<div className="grid gap-2">
|
||||
<Label>Tipo</Label>
|
||||
<Select
|
||||
value={transactionType}
|
||||
onValueChange={(v) => setTransactionType(v as "Despesa" | "Receita")}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Despesa">Despesa</SelectItem>
|
||||
<SelectItem value="Receita">Receita</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Forma de pagamento */}
|
||||
<div className="grid gap-2">
|
||||
<Label>Forma de Pagamento</Label>
|
||||
<Select value={paymentMethod} onValueChange={setPaymentMethod}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="cartao-credito">Cartão de Crédito</SelectItem>
|
||||
<SelectItem value="cartao-debito">Cartão de Débito</SelectItem>
|
||||
<SelectItem value="pix">PIX</SelectItem>
|
||||
<SelectItem value="dinheiro">Dinheiro</SelectItem>
|
||||
<SelectItem value="transferencia">Transferência</SelectItem>
|
||||
<SelectItem value="boleto">Boleto</SelectItem>
|
||||
<SelectItem value="outros">Outros</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Cartão ou Conta */}
|
||||
{paymentMethod === "cartao-credito" ? (
|
||||
<div className="grid gap-2">
|
||||
<Label>Cartão</Label>
|
||||
<Select value={cartaoId} onValueChange={setCartaoId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione o cartão" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{cartoes.map((cartao) => (
|
||||
<SelectItem key={cartao.id} value={cartao.id}>
|
||||
{cartao.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-2">
|
||||
<Label>Conta</Label>
|
||||
<Select value={contaId} onValueChange={setContaId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione a conta" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{contas.map((conta) => (
|
||||
<SelectItem key={conta.id} value={conta.id}>
|
||||
{conta.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Categoria */}
|
||||
<div className="grid gap-2">
|
||||
<Label>Categoria</Label>
|
||||
<Select value={categoriaId} onValueChange={setCategoriaId}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione a categoria" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{filteredCategorias.map((cat) => (
|
||||
<SelectItem key={cat.id} value={cat.id}>
|
||||
{cat.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Condição */}
|
||||
<div className="grid gap-2">
|
||||
<Label>Condição</Label>
|
||||
<Select value={condition} onValueChange={setCondition}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="realizado">Realizado</SelectItem>
|
||||
<SelectItem value="aberto">Aberto</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Notas */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="note">Observações (opcional)</Label>
|
||||
<Textarea
|
||||
id="note"
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
placeholder="Observações adicionais..."
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={loading}>
|
||||
{loading ? "Processando..." : "Criar Lançamento"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
49
components/caixa-de-entrada/types.ts
Normal file
49
components/caixa-de-entrada/types.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Types for Caixa de Entrada (Inbox) feature
|
||||
*/
|
||||
|
||||
export interface InboxItem {
|
||||
id: string;
|
||||
sourceApp: string;
|
||||
sourceAppName: string | null;
|
||||
deviceId: string | null;
|
||||
originalTitle: string | null;
|
||||
originalText: string;
|
||||
notificationTimestamp: Date;
|
||||
parsedName: string | null;
|
||||
parsedAmount: string | null;
|
||||
parsedDate: Date | null;
|
||||
parsedCardLastDigits: string | null;
|
||||
parsedTransactionType: string | null;
|
||||
status: string;
|
||||
lancamentoId: string | null;
|
||||
processedAt: Date | null;
|
||||
discardedAt: Date | null;
|
||||
discardReason: string | null;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
export interface ProcessInboxInput {
|
||||
inboxItemId: string;
|
||||
name: string;
|
||||
amount: number;
|
||||
purchaseDate: string;
|
||||
transactionType: "Despesa" | "Receita";
|
||||
condition: string;
|
||||
paymentMethod: string;
|
||||
categoriaId: string;
|
||||
contaId?: string;
|
||||
cartaoId?: string;
|
||||
note?: string;
|
||||
}
|
||||
|
||||
export interface DiscardInboxInput {
|
||||
inboxItemId: string;
|
||||
reason?: string;
|
||||
}
|
||||
|
||||
export interface SelectOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
RiFileChartLine,
|
||||
RiFundsLine,
|
||||
RiGroupLine,
|
||||
RiInboxLine,
|
||||
RiNoCreditCardLine,
|
||||
RiPriceTag3Line,
|
||||
RiSettingsLine,
|
||||
@@ -87,6 +88,11 @@ export function createSidebarNavData(pagadores: PagadorLike[]): SidebarNavData {
|
||||
{
|
||||
title: "Gestão Financeira",
|
||||
items: [
|
||||
{
|
||||
title: "Caixa de Entrada",
|
||||
url: "/caixa-de-entrada",
|
||||
icon: RiInboxLine,
|
||||
},
|
||||
{
|
||||
title: "Lançamentos",
|
||||
url: "/lancamentos",
|
||||
|
||||
@@ -32,6 +32,7 @@ export const revalidateConfig = {
|
||||
pagadores: ["/pagadores"],
|
||||
anotacoes: ["/anotacoes", "/anotacoes/arquivadas"],
|
||||
lancamentos: ["/lancamentos", "/contas"],
|
||||
inbox: ["/caixa-de-entrada", "/lancamentos", "/dashboard"],
|
||||
} as const;
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user