andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge from dev to loaf-prod for DEMO #25

Merged
andika merged 45 commits from dev into loaf-prod 2026-02-02 11:12:58 +00:00
Conversation 0 Commits 45 Files Changed 84 +92 -192
5 changed files with 92 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 97aa7860a9 - Show all commits

4
src/components/TransactionHistory.js
View File

@@ -70,9 +70,9 @@ const TransactionHistory = ({
<div className="flex items-start gap-3 mb-2 sm:mb-0"> <div className="flex items-start gap-3 mb-2 sm:mb-0">
<div className={`p-2 rounded-lg ${isSubscription ? 'bg-[var(--purple-lavender)] bg-opacity-20' : 'bg-[var(--orange-light)] bg-opacity-20'}`}> <div className={`p-2 rounded-lg ${isSubscription ? 'bg-[var(--purple-lavender)] bg-opacity-20' : 'bg-[var(--orange-light)] bg-opacity-20'}`}>
{isSubscription ? ( {isSubscription ? (
<CreditCard className="h-5 w-5 text-[var(--purple-lavender)]" /> <CreditCard className="h-5 w-5 text-white" />
) : ( ) : (
<Heart className="h-5 w-5 text-[var(--orange-light)]" /> <Heart className="h-5 w-5 text-white" />
)} )}
</div> </div>
<div className="flex-1"> <div className="flex-1">

260
src/pages/Dashboard.js
View File

@@ -9,6 +9,8 @@ import Navbar from '../components/Navbar';
import MemberFooter from '../components/MemberFooter'; import MemberFooter from '../components/MemberFooter';
import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale, Receipt, Heart, CreditCard } from 'lucide-react'; import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale, Receipt, Heart, CreditCard } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import TransactionHistory from '../components/TransactionHistory';
const Dashboard = () => { const Dashboard = () => {
const { user, resendVerificationEmail, refreshUser } = useAuth(); const { user, resendVerificationEmail, refreshUser } = useAuth();
@@ -17,12 +19,15 @@ const Dashboard = () => {
const [resendLoading, setResendLoading] = useState(false); const [resendLoading, setResendLoading] = useState(false);
const [eventActivity, setEventActivity] = useState(null); const [eventActivity, setEventActivity] = useState(null);
const [activityLoading, setActivityLoading] = useState(true); const [activityLoading, setActivityLoading] = useState(true);
const [transactionsLoading, setTransactionsLoading] = useState(true);
const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
const [activeTransactionTab, setActiveTransactionTab] = useState('all'); const [activeTransactionTab, setActiveTransactionTab] = useState('all');
const joinedDate = user?.member_since || user?.created_at; const joinedDate = user?.member_since || user?.created_at;
useEffect(() => { useEffect(() => {
fetchUpcomingEvents(); fetchUpcomingEvents();
fetchEventActivity(); fetchEventActivity();
fetchTransactions();
}, []); }, []);
const fetchUpcomingEvents = async () => { const fetchUpcomingEvents = async () => {
@@ -48,6 +53,19 @@ const Dashboard = () => {
} }
}; };
const fetchTransactions = async () => {
try {
setTransactionsLoading(true);
const response = await api.get('/members/transactions');
setTransactions(response.data);
} catch (error) {
console.error('Failed to load transactions:', error);
// Don't show error toast - transactions are optional
} finally {
setTransactionsLoading(false);
}
};
const handleResendVerification = async () => { const handleResendVerification = async () => {
setResendLoading(true); setResendLoading(true);
try { try {
@@ -72,6 +90,7 @@ const Dashboard = () => {
} }
}; };
const getStatusBadge = (status) => { const getStatusBadge = (status) => {
const statusConfig = { const statusConfig = {
pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' }, pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
@@ -183,67 +202,57 @@ const Dashboard = () => {
{/* Grid Layout */} {/* Grid Layout */}
<div className="grid lg:grid-cols-2 gap-8"> <div className="grid lg:grid-cols-2 gap-8">
{/* Quick Stats */} {/* Quick Stats */}
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card"> <div className='space-y-8'>
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Quick Info
</h3>
<div className="space-y-4">
<div>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
</div>
<div>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
<p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
</div>
<div>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
</p>
</div>
{user?.subscription_start_date && user?.subscription_end_date && (
<>
<div className="pt-4 border-t border-[var(--neutral-800)]">
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
</p>
</div>
<div>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
</p>
</div>
</>
)}
</div>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Membership Info
</h3>
<div className="space-y-4">
{user?.subscription_start_date && user?.subscription_end_date && ( <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
<> <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="pt-4 border-t border-[var(--neutral-800)]"> Quick Info
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p> </h3>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <div className="space-y-4">
{new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()} <div>
</p> <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
</div> <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
<div> </div>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p> <div>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
{Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
</p> </div>
</div> <div>
</> <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
)} <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
</div> {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
</Card> </p>
</div>
</div>
</Card>
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Membership Info
</h3>
<div className="space-y-4">
{!user.subscription_end_date && !user.subscription_end_date && (
<div>No subscriptions yet</div>
)}
{user?.subscription_start_date && user?.subscription_end_date && (
<>
<div className="pt-4 border-t border-[var(--neutral-800)]">
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
</p>
</div>
<div>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
</p>
</div>
</>
)}
</div>
</Card>
</div>
{/* Upcoming Events */} {/* Upcoming Events */}
<Card className="lg:col-span-1 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card"> <Card className="lg:col-span-1 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card">
@@ -337,127 +346,16 @@ const Dashboard = () => {
)} )}
{/* Transaction History Section */} {/* Transaction History Section */}
<Card className="mt-12 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]"> <div className="mt-8">
{/* Header */} <TransactionHistory
<div className="flex items-center gap-3 mb-6"> subscriptions={transactions.subscriptions}
<div className="p-2 bg-[var(--green-light)] rounded-lg"> donations={transactions.donations}
<Receipt className="h-5 w-5 text-white" /> totalSubscriptionCents={transactions.total_subscription_amount_cents}
</div> totalDonationCents={transactions.total_donation_amount_cents}
<h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}> loading={transactionsLoading}
Transaction History isAdmin={false}
</h2> />
</div> </div>
{/* Stats Row */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
<div className="flex items-center gap-2 mb-2">
<CreditCard className="h-4 w-4 text-[var(--green-light)]" />
<span className="text-sm text-[var(--green-light)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Total Subscriptions
</span>
</div>
<p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
$30.00
</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
1 payment(s)
</p>
</div>
<div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
<div className="flex items-center gap-2 mb-2">
<Heart className="h-4 w-4 text-[var(--coral)]" />
<span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Total Donations
</span>
</div>
<p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
$0.00
</p>
<p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
0 donation(s)
</p>
</div>
</div>
{/* Filter Tabs */}
<div className="flex gap-2 mb-6">
<button
onClick={() => setActiveTransactionTab('all')}
className={`px-6 py-2 rounded-full font-medium transition-all ${
activeTransactionTab === 'all'
? 'bg-[var(--purple-lavender)] text-white'
: 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
All (1)
</button>
<button
onClick={() => setActiveTransactionTab('subscriptions')}
className={`px-6 py-2 rounded-full font-medium transition-all ${
activeTransactionTab === 'subscriptions'
? 'bg-[var(--purple-lavender)] text-white'
: 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Subscriptions (1)
</button>
<button
onClick={() => setActiveTransactionTab('donations')}
className={`px-6 py-2 rounded-full font-medium transition-all ${
activeTransactionTab === 'donations'
? 'bg-[var(--purple-lavender)] text-white'
: 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Donations (0)
</button>
</div>
{/* Transaction List */}
<div className="space-y-4">
{(activeTransactionTab === 'all' || activeTransactionTab === 'subscriptions') && (
<div className="flex items-center justify-between p-4 border border-[var(--neutral-800)] rounded-xl">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-[var(--purple-lavender)] rounded-lg"></div>
<div>
<div className="flex items-center gap-2 mb-1">
<span className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Annual Membership
</span>
<Badge className="bg-[var(--green-light)] text-white text-xs px-2 py-0.5 rounded">
active
</Badge>
</div>
<div className="flex items-center gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Calendar className="h-3.5 w-3.5" />
<span>Dec 16, 2025</span>
<span>•</span>
<span>Custom</span>
</div>
<span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manual Payment
</span>
</div>
</div>
<span className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
$30.00
</span>
</div>
)}
{activeTransactionTab === 'donations' && (
<div className="text-center py-8">
<Heart className="h-12 w-12 text-[var(--neutral-800)] mx-auto mb-3" />
<p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No donations yet
</p>
</div>
)}
</div>
</Card>
</div> </div>
<MemberFooter /> <MemberFooter />

7
src/pages/admin/AdminFinancials.js
View File

@@ -191,10 +191,9 @@ const AdminFinancials = () => {
<div className="space-y-4"> <div className="space-y-4">
{reports.map(report => ( {reports.map(report => (
<Card key={report.id} className="p-6"> <Card key={report.id} className="p-6">
<div className="flex items-center gap-6"> <div className="flex items-center gap-3">
<div className="bg-light-lavender p-4 rounded-xl min-w-[100px] text-center"> <div className="bg-light-lavender p-3 rounded-xl self-center">
<DollarSign className="h-6 w-6 mx-auto mb-1" /> <DollarSign className="size-8 " />
<div className="text-2xl font-bold">{report.year}</div>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2"> <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">

7
src/pages/admin/AdminNewsletters.js
View File

@@ -223,10 +223,13 @@ const AdminNewsletters = () => {
<Calendar className="h-5 w-5" /> <Calendar className="h-5 w-5" />
{year} {year}
</h2> </h2>
<div className="grid gap-4"> <div className="grid gap-3">
{groupedNewsletters[year].map(newsletter => ( {groupedNewsletters[year].map(newsletter => (
<Card key={newsletter.id} className="p-6"> <Card key={newsletter.id} className="p-6">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between ">
<div className="bg-light-lavender p-3 mr-4 rounded-xl self-center">
<FileText className="size-8 " />
</div>
<div className="flex-1"> <div className="flex-1">
<h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2"> <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
{newsletter.title} {newsletter.title}

6
src/pages/members/NewsletterArchive.js
View File

@@ -167,9 +167,9 @@ export default function NewsletterArchive() {
{groupedNewsletters[year].map(newsletter => ( {groupedNewsletters[year].map(newsletter => (
<Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow"> <Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl"> <div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl">
<FileText className="h-8 w-8 text-white" /> <FileText className="h-8 w-8 text-white" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}> <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{newsletter.title} {newsletter.title}