From 017f5615c18736fdb75beaf748fba439dee34029 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 16 Mar 2025 12:16:14 +0000
Subject: [PATCH] Add bottom margin to pages

Adds a bottom margin to the last card in the Transactions and Analytics pages.
---
 src/components/analytics/CategorySpendingList.tsx | 6 ++++--
 src/pages/Analytics.tsx                           | 1 +
 src/pages/Transactions.tsx                        | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/analytics/CategorySpendingList.tsx b/src/components/analytics/CategorySpendingList.tsx
index 30b1b73..0adb5e0 100644
--- a/src/components/analytics/CategorySpendingList.tsx
+++ b/src/components/analytics/CategorySpendingList.tsx
@@ -12,11 +12,13 @@ interface CategorySpending {
 interface CategorySpendingListProps {
   categories: CategorySpending[];
   totalExpense: number;
+  className?: string;
 }
 
 const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
   categories,
-  totalExpense
+  totalExpense,
+  className = ""
 }) => {
   const isMobile = useIsMobile();
   
@@ -31,7 +33,7 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
   };
 
   return (
-    <div className="neuro-card mb-6 w-full">
+    <div className={`neuro-card mb-6 w-full ${className}`}>
       {categories.some(cat => cat.current > 0) ? (
         <div className="space-y-4">
           {categories.map((category) => (
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 287ae0c..2cdb0e1 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -164,6 +164,7 @@ const Analytics = () => {
         <CategorySpendingList 
           categories={categorySpending}
           totalExpense={totalExpense}
+          className="mb-[50px]"
         />
       </div>
 
diff --git a/src/pages/Transactions.tsx b/src/pages/Transactions.tsx
index 9c6a96e..9887053 100644
--- a/src/pages/Transactions.tsx
+++ b/src/pages/Transactions.tsx
@@ -155,7 +155,7 @@ const Transactions = () => {
 
         {/* Transactions By Date */}
         {!isLoading && transactions.length > 0 && (
-          <div className="space-y-6">
+          <div className="space-y-6 mb-[50px]">
             {Object.entries(groupedTransactions).map(([date, transactions]) => (
               <div key={date}>
                 <div className="flex items-center gap-2 mb-3">