Merge pull request #27 from fuzziecoder/codex/fix-multiple-issues-26,-20,-and-17

fuzziecoder · web-flow · commit 0e08ae82aac2 · 2026-02-18T23:49:10.000+05:30
Codex-generated pull request
diff --git a/DATABASE_SCHEMA.md b/DATABASE_SCHEMA.md
@@ -242,7 +242,6 @@ CREATE POLICY "Users can delete own moments" ON moments
   FOR DELETE USING (auth.uid() = user_id);
 ```
 
-<<<<<<< HEAD
 ### 7. `transactions` table
 
 Stores transaction history for payment tracking.
@@ -302,19 +301,14 @@ CREATE POLICY "Admins can update transactions" ON transactions
   );
 ```
 
-=======
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
 ## Real-time Subscriptions
 
 Enable real-time for the following tables in Supabase Dashboard:
 - `spots` - for spot updates
 - `invitations` - for RSVP updates
 - `payments` - for payment status updates
 - `chat_messages` - for chat updates
-<<<<<<< HEAD
 - `transactions` - for transaction history updates
-=======
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
 
 ## Initial Data
 
diff --git a/components/common/TransactionHistory.tsx b/components/common/TransactionHistory.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { Transaction, PaymentStatus } from "../../types";
 import Card from "./Card";
 
@@ -7,10 +7,16 @@ interface TransactionHistoryProps {
     loading?: boolean;
 }
 
+type DateFilter = "7d" | "30d" | "custom" | "all";
+
 const TransactionHistory: React.FC<TransactionHistoryProps> = ({
     transactions,
     loading = false,
 }) => {
+    const [dateFilter, setDateFilter] = useState<DateFilter>("all");
+    const [customStart, setCustomStart] = useState("");
+    const [customEnd, setCustomEnd] = useState("");
+
     const formatDate = (dateString: string) => {
         const date = new Date(dateString);
         return date.toLocaleDateString("en-IN", {
@@ -34,6 +40,39 @@ const TransactionHistory: React.FC<TransactionHistoryProps> = ({
         );
     };
 
+    const filteredTransactions = useMemo(() => {
+        if (dateFilter === "all") return transactions;
+
+        const now = new Date();
+        const nowAtMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+
+        return transactions.filter((transaction) => {
+            const txDate = new Date(transaction.created_at);
+            const txAtMidnight = new Date(txDate.getFullYear(), txDate.getMonth(), txDate.getDate()).getTime();
+
+            if (dateFilter === "7d") {
+                const sevenDaysAgo = nowAtMidnight - 6 * 24 * 60 * 60 * 1000;
+                return txAtMidnight >= sevenDaysAgo && txAtMidnight <= nowAtMidnight;
+            }
+
+            if (dateFilter === "30d") {
+                const thirtyDaysAgo = nowAtMidnight - 29 * 24 * 60 * 60 * 1000;
+                return txAtMidnight >= thirtyDaysAgo && txAtMidnight <= nowAtMidnight;
+            }
+
+            if (dateFilter === "custom") {
+                if (!customStart || !customEnd) return true;
+                const start = new Date(`${customStart}T00:00:00`).getTime();
+                const end = new Date(`${customEnd}T23:59:59`).getTime();
+                return txDate.getTime() >= start && txDate.getTime() <= end;
+            }
+
+            return true;
+        });
+    }, [transactions, dateFilter, customStart, customEnd]);
+
+    const showEmptyFiltered = transactions.length > 0 && filteredTransactions.length === 0;
+
     if (loading) {
         return (
             <Card className="p-4 md:p-6">
@@ -47,13 +86,40 @@ const TransactionHistory: React.FC<TransactionHistoryProps> = ({
 
     return (
         <Card className="p-4 md:p-6">
-            <h2 className="text-lg md:text-xl font-semibold mb-4">
-                Transaction History
-            </h2>
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
+                <h2 className="text-lg md:text-xl font-semibold">
+                    Transaction History
+                </h2>
+                <div className="flex flex-wrap items-center gap-2">
+                    <button onClick={() => setDateFilter("7d")} className={`px-3 py-1 text-xs rounded-md border ${dateFilter === "7d" ? "bg-zinc-700 border-zinc-600 text-white" : "border-zinc-700 text-zinc-300 hover:bg-zinc-800"}`}>Last 7 days</button>
+                    <button onClick={() => setDateFilter("30d")} className={`px-3 py-1 text-xs rounded-md border ${dateFilter === "30d" ? "bg-zinc-700 border-zinc-600 text-white" : "border-zinc-700 text-zinc-300 hover:bg-zinc-800"}`}>Last 30 days</button>
+                    <button onClick={() => setDateFilter("custom")} className={`px-3 py-1 text-xs rounded-md border ${dateFilter === "custom" ? "bg-zinc-700 border-zinc-600 text-white" : "border-zinc-700 text-zinc-300 hover:bg-zinc-800"}`}>Custom</button>
+                    <button onClick={() => setDateFilter("all")} className={`px-3 py-1 text-xs rounded-md border ${dateFilter === "all" ? "bg-zinc-700 border-zinc-600 text-white" : "border-zinc-700 text-zinc-300 hover:bg-zinc-800"}`}>All</button>
+                </div>
+            </div>
+
+            {dateFilter === "custom" && (
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
+                    <input
+                        type="date"
+                        value={customStart}
+                        onChange={(e) => setCustomStart(e.target.value)}
+                        className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-md text-white"
+                        aria-label="Custom start date"
+                    />
+                    <input
+                        type="date"
+                        value={customEnd}
+                        onChange={(e) => setCustomEnd(e.target.value)}
+                        className="w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-md text-white"
+                        aria-label="Custom end date"
+                    />
+                </div>
+            )}
 
-            {transactions.length === 0 ? (
+            {filteredTransactions.length === 0 ? (
                 <p className="text-sm text-gray-400 text-center py-8">
-                    No transactions found.
+                    {showEmptyFiltered ? "No transactions found for the selected date range." : "No transactions found."}
                 </p>
             ) : (
                 <div className="overflow-x-auto">
@@ -75,7 +141,7 @@ const TransactionHistory: React.FC<TransactionHistoryProps> = ({
                             </tr>
                         </thead>
                         <tbody>
-                            {transactions.map((transaction) => (
+                            {filteredTransactions.map((transaction) => (
                                 <tr
                                     key={transaction.id}
                                     className="border-b border-white/5 hover:bg-white/5 transition-colors"
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/NotificationsPage.tsx b/pages/NotificationsPage.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Notification } from '../types';
 import Card from '../components/common/Card';
 import { motion, AnimatePresence } from 'framer-motion';
+import { BellOff, RefreshCw } from 'lucide-react';
 import { useNotifications } from '../contexts/NotificationsContext';
 
 const timeAgo = (dateString: string): string => {
@@ -110,8 +111,28 @@ const NotificationsPage: React.FC = () => {
                         ))}
                     </AnimatePresence>
                      {filteredNotifications.length === 0 && (
-                         <div className="p-6 text-center text-gray-400">
-                            {notifications.length === 0 ? "You're all caught up!" : "No notifications match your filters."}
+                         <div className="px-6 py-12 text-center">
+                            <div className="mx-auto mb-4 w-14 h-14 rounded-full bg-zinc-800 border border-zinc-700 flex items-center justify-center">
+                                <BellOff className="w-7 h-7 text-zinc-400" />
+                            </div>
+                            <h3 className="text-lg font-semibold text-zinc-200">
+                                {notifications.length === 0 ? "You're all caught up" : "No notifications found"}
+                            </h3>
+                            <p className="text-sm text-zinc-400 mt-2">
+                                {notifications.length === 0
+                                    ? "We'll let you know when there is a new update for your party crew."
+                                    : "Try changing the status or type filters to see more results."}
+                            </p>
+                            <button
+                                onClick={() => {
+                                    setStatusFilter('all');
+                                    setTypeFilter('all');
+                                }}
+                                className="mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-md bg-zinc-700 hover:bg-zinc-600 text-white text-sm font-medium transition-colors"
+                            >
+                                <RefreshCw className="w-4 h-4" />
+                                Reset Filters
+                            </button>
                          </div>
                      )}
                 </div>
diff --git a/pages/PaymentPage.tsx b/pages/PaymentPage.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { useAuth } from "../hooks/useAuth";
-<<<<<<< HEAD
 import { UserRole, Spot, Payment, PaymentStatus, Transaction } from "../types";
 import Card from "../components/common/Card";
 import Button from "../components/common/Button";
@@ -9,15 +8,6 @@ import { spotService, paymentService, invitationService, transactionService } fr
 import { InvitationStatus } from "../types";
 import { supabase } from "../services/supabase";
 import TransactionHistory from "../components/common/TransactionHistory";
-=======
-import { UserRole, Spot, Payment, PaymentStatus } from "../types";
-import Card from "../components/common/Card";
-import Button from "../components/common/Button";
-import { QRCodeCanvas } from "qrcode.react";
-import { spotService, paymentService, invitationService } from "../services/database";
-import { InvitationStatus } from "../types";
-import { supabase } from "../services/supabase";
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
 
 /* -------------------------------------------------------------------------- */
 /* Status Badge */
@@ -42,10 +32,7 @@ const PaymentPage: React.FC = () => {
   const { profile } = useAuth();
   const [spot, setSpot] = useState<Spot | null>(null);
   const [payments, setPayments] = useState<Payment[]>([]);
-<<<<<<< HEAD
   const [transactions, setTransactions] = useState<Transaction[]>([]);
-=======
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
   const [loading, setLoading] = useState(true);
 
   const fetchData = useCallback(async () => {
@@ -88,25 +75,17 @@ const PaymentPage: React.FC = () => {
       } else {
         setPayments([]);
       }
-<<<<<<< HEAD
-
       // Fetch transaction history for current user
       if (profile?.id) {
         const transactionData = await transactionService.getUserTransactions(profile.id);
         setTransactions(transactionData);
       }
-=======
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
     } catch (error) {
       console.error("Error loading payment data:", error);
     } finally {
       setLoading(false);
     }
-<<<<<<< HEAD
   }, [profile?.id]);
-=======
-  }, []);
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
 
   useEffect(() => {
     fetchData();
@@ -159,7 +138,6 @@ const PaymentPage: React.FC = () => {
     if (!isAdmin) return;
     try {
       await paymentService.updatePaymentStatus(paymentId, PaymentStatus.PAID);
-<<<<<<< HEAD
 
       // Create a transaction record when payment is marked as paid
       const payment = payments.find(p => p.id === paymentId);
@@ -172,9 +150,6 @@ const PaymentPage: React.FC = () => {
           status: PaymentStatus.PAID,
         });
       }
-
-=======
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
       await fetchData();
     } catch (error: any) {
       alert(`Failed to update payment: ${error.message || 'Please try again.'}`);
@@ -342,12 +317,8 @@ const PaymentPage: React.FC = () => {
           )}
         </Card>
       </div>
-<<<<<<< HEAD
-
       {/* ---------------- TRANSACTION HISTORY ---------------- */}
       <TransactionHistory transactions={transactions} loading={loading} />
-=======
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
     </div>
   );
 };
diff --git a/pages/ProfilePage.tsx b/pages/ProfilePage.tsx
@@ -178,7 +178,16 @@ const ProfileForm: React.FC<{ onSave: () => void }> = ({ onSave }) => {
             {errors.location && (
                 <p className="text-red-400 text-xs -mt-4">{errors.location}</p>
             )}
-            <Button type="submit" disabled={loading || checkingUsername} className="w-full py-4 font-black uppercase tracking-widest">Update Profile</Button>
+            <Button type="submit" disabled={loading || checkingUsername} className="w-full py-4 font-black uppercase tracking-widest">
+                {loading ? (
+                    <span className="inline-flex items-center justify-center gap-2">
+                        <span className="h-4 w-4 rounded-full border-2 border-white/40 border-t-white animate-spin" aria-hidden="true" />
+                        Saving...
+                    </span>
+                ) : (
+                    'Update Profile'
+                )}
+            </Button>
         </form>
     );
 };
diff --git a/services/database.ts b/services/database.ts
@@ -1613,7 +1613,6 @@ export const attendanceService = {
     };
   },
 };
-<<<<<<< HEAD
 
 /* TRANSACTIONS */
 /* -------------------------------------------------------------------------- */
@@ -1745,5 +1744,3 @@ export const transactionService = {
     }
   },
 };
-=======
->>>>>>> bedb01a0af53821680ce26a67bce5af226a10c8b
diff --git a/types.ts b/types.ts
