feat: add last transaction component

app/(authenticated)/dashboard/_components/last-transactions.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/app/_components/ui/button";
+import { CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card";
+import { ScrollArea } from "@/app/_components/ui/scroll-area";
+import Link from "next/link";
+import { Transactions } from "@prisma/client";
+import TransactionCard from "./transaction-card";
+interface LastTransactionsProps {
+  lastTransactions: Transactions[];
+}
+
+const LastTransactions = ({ lastTransactions }: LastTransactionsProps) => {
+  return (
+    <ScrollArea className="max-h-[calc(100vh)] rounded-md border">
+      <CardHeader className="flex-row items-center justify-between">
+        <CardTitle className="font-bold">Últimas transações</CardTitle>
+        <Link href="/transactions">
+          <Button variant="outline" className="rounded-full font-bold">
+            Ver mais
+          </Button>
+        </Link>
+      </CardHeader>
+      <CardContent className="w-full space-y-6">
+        {lastTransactions.map((transaction) => (
+          <TransactionCard key={transaction.id} transaction={transaction} />
+        ))}
+      </CardContent>
+    </ScrollArea>
+  );
+};
+
+export default LastTransactions;

app/(authenticated)/dashboard/_components/transaction-card.tsx

@@ -0,0 +1,69 @@
+import { TRANSACTION_PAYMENT_METHOD_ICON_MAP } from "@/app/_constants/transaction";
+import { cn } from "@/app/_lib/utils";
+import formatCurrency from "@/app/_utils/currency";
+import type { Transactions } from "@prisma/client";
+import Image from "next/image";
+
+interface TransactionCardProps {
+  transaction: Transactions;
+}
+
+const TransactionCard = ({ transaction }: TransactionCardProps) => {
+  const getAmountColor = ({ transaction }: { transaction: Transactions }) => {
+    if (transaction.type === "EXPENSE") {
+      return "text-danger";
+    }
+    if (transaction.type === "DEPOSIT") {
+      return "text-primary";
+    }
+    return "text-white";
+  };
+
+  const getAmountPrefix = ({ transaction }: { transaction: Transactions }) => {
+    if (transaction.type === "EXPENSE") {
+      return "-";
+    }
+    return "+";
+  };
+
+  return (
+    <div className="flex w-full items-center justify-between gap-4">
+      {/* Lado esquerdo - Ícone e informações */}
+      <div className="flex items-center gap-3">
+        <div className="rounded-md bg-white bg-opacity-[3%] p-2">
+          <Image
+            src={TRANSACTION_PAYMENT_METHOD_ICON_MAP[transaction.paymentMethod]}
+            alt={transaction.paymentMethod}
+            width={24}
+            height={24}
+          />
+        </div>
+        <div className="flex flex-col">
+          <p className="max-w-[100px] truncate text-sm font-bold">
+            {transaction.name}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            {new Date(transaction.date).toLocaleDateString("pt-BR", {
+              day: "2-digit",
+              month: "short",
+              year: "numeric",
+            })}
+          </p>
+        </div>
+      </div>
+
+      {/* Lado direito - Valor */}
+      <p
+        className={cn(
+          "ml-auto text-sm font-bold",
+          getAmountColor({ transaction }),
+        )}
+      >
+        {getAmountPrefix({ transaction })}
+        {formatCurrency(Number(transaction.amount))}
+      </p>
+    </div>
+  );
+};
+
+export default TransactionCard;

app/(authenticated)/dashboard/page.tsx

@@ -5,6 +5,7 @@ import TimeSelect from "./_components/time-select";
 import TransactionsPieChart from "./_components/transactions-pie-chart";
 import GetDashboard from "@/app/_data/get-dashboard";
 import ExpensesPerCategory from "./_components/expenses-per-category";
+import LastTransactions from "./_components/last-transactions";
 
 interface HomeProps {
   searchParams: {
@@ -31,7 +32,7 @@ const Home = async ({ searchParams: { month = "1" } }: HomeProps) => {
 
   return (
     <div className="space-y-6 p-6">
-      <div className="grid grid-cols-[2fr,1fr]">
+      <div className="grid grid-cols-[2fr,1fr] gap-6">
         <div className="space-y-6">
           <div className="flex justify-between">
             <h1 className="text-2xl font-bold">Dashboard</h1>
@@ -46,6 +47,7 @@ const Home = async ({ searchParams: { month = "1" } }: HomeProps) => {
             />
           </div>
         </div>
+        <LastTransactions lastTransactions={dashboard.lastTransactions} />
       </div>
     </div>
   );

app/_constants/transaction.ts

@@ -1,4 +1,4 @@
-import { TransactionType } from "@prisma/client";
+import { TransactionPaymentMethod, TransactionType } from "@prisma/client";
 
 export const transactionTypeOptions = [
   {
@@ -22,6 +22,14 @@ export const TRANSACTION_PAYMENT_METHOD_MAP: Record<string, string> = {
   BANK_TRANSFER: "Transferência bancária",
 };
 
+export const TRANSACTION_PAYMENT_METHOD_ICON_MAP: Record<string, string> = {
+  [TransactionPaymentMethod.CREDIT_CARD]: "/credit-card.svg",
+  [TransactionPaymentMethod.DEBIT_CARD]: "/debit-card.svg",
+  [TransactionPaymentMethod.PIX]: "/pix-icon.svg",
+  [TransactionPaymentMethod.BANK_TRANSFER]: "/bank-transfer.svg",
+  [TransactionPaymentMethod.CASH]: "/money.svg",
+};
+
 export const TRANSACTION_CATEGORY_MAP: Record<string, string> = {
   EDUCATION: "Educação",
   FOOD: "Alimentação",

app/_data/get-dashboard/index.ts

@@ -4,8 +4,15 @@ import type {
   TotalExpensePerCategory,
   TransactionPercentagesPerType,
 } from "./types";
+import { auth } from "@clerk/nextjs/server";
 
 const getDashboard = async (month: number) => {
+  const { userId } = await auth();
+
+  if (!userId) {
+    throw new Error("User not found");
+  }
+
   const where = {
     date: {
       gte: new Date(`2024-${month}-01`),
@@ -16,6 +23,7 @@ const getDashboard = async (month: number) => {
     where: {
       type: "DEPOSIT",
       ...where,
+      userId,
     },
     _sum: {
       amount: true,
@@ -27,6 +35,7 @@ const getDashboard = async (month: number) => {
     where: {
       type: "INVESTMENT",
       ...where,
+      userId,
     },
     _sum: {
       amount: true,
@@ -38,6 +47,7 @@ const getDashboard = async (month: number) => {
     where: {
       type: "EXPENSE",
       ...where,
+      userId,
     },
     _sum: {
       amount: true,
@@ -51,7 +61,10 @@ const getDashboard = async (month: number) => {
   const transactionsTotal = Number(
     (
       await db.transactions.aggregate({
-        where,
+        where: {
+          ...where,
+          userId,
+        },
         _sum: {
           amount: true,
         },
@@ -77,6 +90,7 @@ const getDashboard = async (month: number) => {
       where: {
         ...where,
         type: TransactionType.EXPENSE,
+        userId,
       },
       _sum: {
         amount: true,
@@ -90,13 +104,24 @@ const getDashboard = async (month: number) => {
     ),
   }));
 
+  const lastTransactions = await db.transactions.findMany({
+    where: {
+      ...where,
+      userId,
+    },
+    orderBy: {
+      date: "desc",
+    },
+  });
+
   return {
     depositsTotal: Number(depositsTotal),
     investmentsTotal: Number(investmentsTotal),
     expensesTotal: Number(expensesTotal),
     balance: Number(balance),
     typesPercentages,
     totalExpensePerCategory,
+    lastTransactions,
   };
 };
 

app/_utils/currency.ts

@@ -0,0 +1,8 @@
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL",
+  }).format(value);
+};
+
+export default formatCurrency;