Donations api

my-nextjs-app/app/donations/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { MoreHorizontal, DollarSign } from "lucide-react";
-import { donationsByMonth } from "@/lib/donationsSampleData";
+import { getDonationsByMonth } from "@/lib/donationsAPI";
 import { Donation, DonationSummaryData } from "@/app/types/donations";
 
 // Reusable summary component
@@ -47,7 +47,7 @@ const DonationTable = ({ data }: { data: Donation[] }) => (
         <tr className="text-left text-gray-500 text-xs uppercase tracking-wider">
           <th className="py-3 px-4">Donor</th>
           <th className="py-3 px-4">Donation</th>
-          <th className="py-3 px-4">Time</th>
+          <th className="py-3 px-4">Date</th>
           <th className="py-3 px-4">Comment</th>
         </tr>
       </thead>
@@ -58,7 +58,7 @@ const DonationTable = ({ data }: { data: Donation[] }) => (
               <td className="py-3 px-4 font-medium">{d.donor}</td>
               <td className="py-3 px-4 font-semibold text-green-600">${d.amount.toLocaleString()}</td>
               <td className="py-3 px-4 text-gray-500 text-xs whitespace-nowrap">
-                {new Date(d.time).toLocaleString()}
+                {new Date(d.time).toLocaleDateString("en-US")}
               </td>
               <td className="py-3 px-4 text-gray-500">{d.comment}</td>
             </tr>
@@ -83,14 +83,50 @@ export default function DonationsPage() {
 
   const [month, setMonth] = useState(currentMonth);
   const [year, setYear] = useState(currentYear);
+  const [donationsByMonth, setDonationsByMonth] = useState<Record<string, Donation[]>>({});
+  const [loading, setLoading] = useState(true);
 
   const monthName = new Date(year, month).toLocaleString("default", { month: "long" });
   const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const monthKey = `${year}-${monthName}`;
 
-  const currentData = donationsByMonth[monthName] || [];
+  useEffect(() => {
+    let mounted = true;
+
+    async function loadDonations() {
+      try {
+        const result = await getDonationsByMonth();
+        if (mounted) {
+          setDonationsByMonth(result);
+        }
+      } catch (error) {
+        console.error("Failed to load donations:", error);
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    loadDonations();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const currentData = donationsByMonth[monthKey] || [];
   const totalDonations = currentData.reduce((sum, d) => sum + d.amount, 0);
   const totalSpent = Math.round(totalDonations * 0.4); // placeholder
 
+  if (loading) {
+    return (
+      <div className="bg-white min-h-screen p-6">
+        <div className="text-gray-700">Loading donations...</div>
+      </div>
+    );
+  }
+
   return (
     <div className="bg-white min-h-screen p-6">
       {/* Header */}

my-nextjs-app/lib/donationsAPI.ts

@@ -0,0 +1,37 @@
+import { supabase } from "./supabase";
+import { Donation, DonationsByMonth } from "@/app/types/donations";
+
+export async function getDonationsByMonth(): Promise<DonationsByMonth> {
+  const { data, error } = await supabase
+    .from("donations")
+    .select('name, amount, date, notes')
+    .order("date", { ascending: false });
+
+  if (error) {
+    console.error("Supabase error:", error);
+    throw error;
+  }
+
+  // Group donations by month and year
+  const donationsByMonth: DonationsByMonth = {};
+  (data || []).forEach(d => {
+    const rowDate = new Date(d.date);
+    const monthName = rowDate.toLocaleString("default", { month: "long" });
+    const year = rowDate.getFullYear();
+    const monthKey = `${year}-${monthName}`;
+
+    const donation: Donation = {
+      donor: d.name,
+      amount: d.amount,
+      time: d.date,
+      comment: d.notes || "",
+    };
+
+    if (!donationsByMonth[monthKey]) {
+      donationsByMonth[monthKey] = [];
+    }
+    donationsByMonth[monthKey].push(donation);
+  });
+
+  return donationsByMonth;
+}

my-nextjs-app/lib/supabase.ts

@@ -1,7 +1,20 @@
+<<<<<<< donationsAPI
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY;
+
+if (!supabaseUrl || !supabaseKey) {
+  throw new Error('Missing Supabase environment variables');
+}
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+=======
 import { createClient } from "@supabase/supabase-js"
 
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
 const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_KEY!
 
 
-export const supabase = createClient(supabaseUrl, supabaseAnonKey)
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)
+>>>>>>> main

my-nextjs-app/package.json

@@ -9,6 +9,26 @@
     "lint": "eslint"
   },
   "dependencies": {
+<<<<<<< donationsAPI
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@supabase/supabase-js": "^2.103.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.548.0",
+    "next": "16.1.6",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.66.0",
+    "recharts": "^3.3.0",
+    "tailwind-merge": "^3.3.1",
+    "zod": "^4.1.12"
+  },
+=======
   "@hookform/resolvers": "^5.2.2",
   "@radix-ui/react-dropdown-menu": "^2.1.16",
   "@radix-ui/react-label": "^2.1.8",
@@ -27,6 +47,7 @@
   "tailwind-merge": "^3.3.1",
   "zod": "^4.1.12"
 },
+>>>>>>> main
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "20.19.25",