Merge pull request 'dev' (#19) from dev into loaf-prod

Reviewed-on: #19

README.md

@@ -999,182 +999,3 @@ api.interceptors.response.use(
 **Last Updated**: December 18, 2024
 **Version**: 1.0.0
 **Maintainer**: LOAF Development Team
-
-**Backend API**
-
-**Auth**
-- POST `/api/auth/register`
-- GET `/api/auth/verify-email`
-- POST `/api/auth/resend-verification-email`
-- POST `/api/auth/login`
-- POST `/api/auth/forgot-password`
-- POST `/api/auth/reset-password`
-- GET `/api/auth/me`
-- GET `/api/auth/permissions`
-
-**Users**
-- PUT `/api/users/change-password`
-- GET `/api/users/profile`
-- PUT `/api/users/profile`
-
-**Members**
-- GET `/api/members/directory` (defined twice in code)
-- GET `/api/members/directory/{user_id}`
-- GET `/api/members/profile`
-- PUT `/api/members/profile`
-- POST `/api/members/profile/upload-photo`
-- DELETE `/api/members/profile/delete-photo`
-- GET `/api/members/calendar/events`
-- GET `/api/members/gallery`
-- GET `/api/members/event-activity`
-
-**Events (public/member)**
-- GET `/api/events`
-- GET `/api/events/{event_id}`
-- GET `/api/events/{event_id}/gallery`
-- POST `/api/events/{event_id}/rsvp`
-- GET `/api/events/{event_id}/download.ics`
-
-**Calendars**
-- GET `/api/calendars/subscribe.ics`
-- GET `/api/calendars/all-events.ics`
-
-**Newsletters (public)**
-- GET `/api/newsletters`
-- GET `/api/newsletters/years`
-
-**Financials (public)**
-- GET `/api/financials`
-
-**Bylaws (public)**
-- GET `/api/bylaws/current`
-- GET `/api/bylaws/history`
-
-**Config/Diagnostics**
-- GET `/api/config`
-- GET `/api/config/limits`
-- GET `/api/diagnostics/cors`
-
-**Invitations**
-- GET `/api/invitations/verify/{token}`
-- POST `/api/invitations/accept`
-
-**Subscriptions**
-- GET `/api/subscriptions/plans`
-- POST `/api/subscriptions/checkout`
-
-**Donations**
-- POST `/api/donations/checkout`
-
-**Contact**
-- POST `/api/contact`
-
-**Admin – Calendar**
-- POST `/api/admin/calendar/sync/{event_id}`
-- DELETE `/api/admin/calendar/unsync/{event_id}`
-
-**Admin – Event Gallery**
-- POST `/api/admin/events/{event_id}/gallery`
-- DELETE `/api/admin/event-gallery/{image_id}`
-- PUT `/api/admin/event-gallery/{image_id}`
-
-**Admin – Events**
-- POST `/api/admin/events`
-- PUT `/api/admin/events/{event_id}`
-- GET `/api/admin/events/{event_id}`
-- GET `/api/admin/events/{event_id}/rsvps`
-- PUT `/api/admin/events/{event_id}/attendance`
-- GET `/api/admin/events`
-- DELETE `/api/admin/events/{event_id}`
-
-**Admin – Storage**
-- GET `/api/admin/storage/usage`
-- GET `/api/admin/storage/breakdown`
-
-**Admin – Users & Invitations**
-- GET `/api/admin/users`
-- GET `/api/admin/users/invitations`
-- GET `/api/admin/users/export`
-- GET `/api/admin/users/{user_id}`
-- PUT `/api/admin/users/{user_id}`
-- PUT `/api/admin/users/{user_id}/validate`
-- PUT `/api/admin/users/{user_id}/status`
-- POST `/api/admin/users/{user_id}/reject`
-- POST `/api/admin/users/{user_id}/activate-payment`
-- PUT `/api/admin/users/{user_id}/reset-password`
-- PUT `/api/admin/users/{user_id}/role`
-- POST `/api/admin/users/{user_id}/resend-verification`
-- POST `/api/admin/users/{user_id}/upload-photo`
-- DELETE `/api/admin/users/{user_id}/delete-photo`
-- POST `/api/admin/users/create`
-- POST `/api/admin/users/invite`
-- POST `/api/admin/users/invitations/{invitation_id}/resend`
-- DELETE `/api/admin/users/invitations/{invitation_id}`
-- POST `/api/admin/users/import`
-- GET `/api/admin/users/import-jobs`
-- GET `/api/admin/users/import-jobs/{job_id}`
-
-**Admin – Imports**
-- POST `/api/admin/import/upload-csv`
-- GET `/api/admin/import/{job_id}/preview`
-- POST `/api/admin/import/{job_id}/execute`
-- POST `/api/admin/import/{job_id}/rollback`
-- GET `/api/admin/import/{job_id}/status`
-- GET `/api/admin/import/{job_id}/errors/download`
-
-**Admin – Subscriptions**
-- GET `/api/admin/subscriptions/plans`
-- GET `/api/admin/subscriptions/plans/{plan_id}`
-- POST `/api/admin/subscriptions/plans`
-- PUT `/api/admin/subscriptions/plans/{plan_id}`
-- DELETE `/api/admin/subscriptions/plans/{plan_id}`
-- GET `/api/admin/subscriptions`
-- GET `/api/admin/subscriptions/stats`
-- PUT `/api/admin/subscriptions/{subscription_id}`
-- POST `/api/admin/subscriptions/{subscription_id}/cancel`
-- GET `/api/admin/subscriptions/export`
-
-**Admin – Donations**
-- GET `/api/admin/donations`
-- GET `/api/admin/donations/stats`
-- GET `/api/admin/donations/export`
-
-**Admin – Newsletters**
-- POST `/api/admin/newsletters`
-- PUT `/api/admin/newsletters/{newsletter_id}`
-- DELETE `/api/admin/newsletters/{newsletter_id}`
-
-**Admin – Financials**
-- POST `/api/admin/financials`
-- PUT `/api/admin/financials/{report_id}`
-- DELETE `/api/admin/financials/{report_id}`
-
-**Admin – Bylaws**
-- POST `/api/admin/bylaws`
-- PUT `/api/admin/bylaws/{bylaws_id}`
-- DELETE `/api/admin/bylaws/{bylaws_id}`
-
-**Admin – Roles**
-- GET `/api/admin/roles`
-- GET `/api/admin/roles/assignable`
-- POST `/api/admin/roles`
-- GET `/api/admin/roles/{role_id}`
-- PUT `/api/admin/roles/{role_id}`
-- DELETE `/api/admin/roles/{role_id}`
-- GET `/api/admin/roles/{role_id}/permissions`
-- PUT `/api/admin/roles/{role_id}/permissions`
-
-**Admin – Permissions**
-- GET `/api/admin/permissions`
-- GET `/api/admin/permissions/modules`
-- GET `/api/admin/permissions/roles/{role}`
-- PUT `/api/admin/permissions/roles/{role}`
-- POST `/api/admin/permissions/seed`
-
-**Admin – Stripe Settings**
-- GET `/api/admin/settings/stripe/status`
-- POST `/api/admin/settings/stripe/test-connection`
-- PUT `/api/admin/settings/stripe`
-
-**Webhooks**
-- POST `/api/webhooks/stripe`

package.json

@@ -36,7 +36,6 @@
     "@radix-ui/react-tooltip": "^1.2.4",
     "@stripe/react-stripe-js": "^2.0.0",
     "@stripe/stripe-js": "^2.0.0",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/components/MemberCard.js

@@ -1,187 +0,0 @@
-import React from 'react'
-import StatusBadge from './StatusBadge';
-import { Card } from './ui/card';
-import { Button } from './ui/button';
-import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
-
-// Helper function to get initials
-const getInitials = (firstName, lastName) => {
-    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-};
-
-// Helper function to ensure social media URLs have proper protocol
-const getSocialMediaLink = (url) => {
-    if (!url) return null;
-    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        return `https://${url}`;
-    }
-    return url;
-};
-
-const MemberCard = ({ member, onViewProfile }) => {
-    const joinedDate = member.created_at;
-    return (
-        <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
-            {/* Profile Photo */}
-            <div className='flex justify-end items-center'>
-                <StatusBadge status={member.membership_status || member.status} />
-            </div>
-            <div className="flex justify-center mb-4">
-                {member.profile_photo_url ? (
-                    <img
-                        src={member.profile_photo_url}
-                        alt={`${member.first_name} ${member.last_name}`}
-                        className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
-                    />
-                ) : (
-                    <div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
-                        <span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
-                            {getInitials(member.first_name, member.last_name)}
-                        </span>
-                    </div>
-                )}
-            </div>
-
-            {/* Name */}
-            <h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
-                {member.first_name} {member.last_name}
-            </h3>
-
-            {/* Partner Name */}
-            {member.directory_partner_name && (
-                <div className="flex items-center justify-center gap-2 mb-4">
-                    <Heart className="h-4 w-4 text-[var(--orange-light)]" />
-                    <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        Partner: {member.directory_partner_name}
-                    </span>
-                </div>
-            )}
-
-            {/* Bio */}
-            {member.directory_bio && (
-                <p className="text-brand-purple  text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    {member.directory_bio}
-                </p>
-            )}
-
-            {/* Member Since */}
-            {joinedDate && (
-                <div className="flex items-center justify-center gap-2 mb-4">
-                    <Calendar className="h-4 w-4 text-brand-purple " />
-                    <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        Member since {new Date(joinedDate).toLocaleDateString('en-US', {
-                            month: 'long',
-                            year: 'numeric'
-                        })}
-                    </span>
-                </div>
-            )}
-
-            {/* Contact Information */}
-            <div className="space-y-3 mb-4">
-                {member.directory_email && (
-                    <div className="flex items-center gap-2 text-sm">
-                        <Mail className="h-4 w-4 text-brand-purple  flex-shrink-0" />
-                        <a
-                            href={`mailto:${member.directory_email}`}
-                            className="text-brand-purple  hover:text-[var(--purple-ink)] truncate"
-                            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-                        >
-                            {member.directory_email}
-                        </a>
-                    </div>
-                )}
-
-                {member.directory_phone && (
-                    <div className="flex items-center gap-2 text-sm">
-                        <Phone className="h-4 w-4 text-brand-purple  flex-shrink-0" />
-                        <a
-                            href={`tel:${member.directory_phone}`}
-                            className="text-brand-purple  hover:text-[var(--purple-ink)]"
-                            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-                        >
-                            {member.directory_phone}
-                        </a>
-                    </div>
-                )}
-
-                {member.directory_address && (
-                    <div className="flex items-start gap-2 text-sm">
-                        <MapPin className="h-4 w-4 text-brand-purple  flex-shrink-0 mt-0.5" />
-                        <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                            {member.directory_address}
-                        </span>
-                    </div>
-                )}
-            </div>
-
-            {/* Social Media Links */}
-            {(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
-                <div className="pt-4 border-t border-[var(--neutral-800)]">
-                    <div className="flex justify-center gap-3">
-                        {member.social_media_facebook && (
-                            <a
-                                href={getSocialMediaLink(member.social_media_facebook)}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                                title="Facebook"
-                            >
-                                <Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
-                            </a>
-                        )}
-
-                        {member.social_media_instagram && (
-                            <a
-                                href={getSocialMediaLink(member.social_media_instagram)}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                                title="Instagram"
-                            >
-                                <Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
-                            </a>
-                        )}
-
-                        {member.social_media_twitter && (
-                            <a
-                                href={getSocialMediaLink(member.social_media_twitter)}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                                title="Twitter/X"
-                            >
-                                <Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
-                            </a>
-                        )}
-
-                        {member.social_media_linkedin && (
-                            <a
-                                href={getSocialMediaLink(member.social_media_linkedin)}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
-                                title="LinkedIn"
-                            >
-                                <Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
-                            </a>
-                        )}
-                    </div>
-                </div>
-            )}
-
-            {/* View Profile Button */}
-            <div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
-                <Button
-                    onClick={() => onViewProfile?.(member.id)}
-                    className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full py-5"
-                >
-                    <UserCircle className="h-4 w-4 mr-2" />
-                    View Full Profile
-                </Button>
-            </div>
-        </Card>
-    );
-};
-
-export default MemberCard

src/components/StatCard.jsx

@@ -7,77 +7,30 @@ export const StatCard = ({
   icon: Icon,
   iconBgClass,
   dataTestId,
-}) => {
+}) => (
-  const valueString = value == null ? "" : String(value);
+  <Card
-
+    className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
-  const digitCount =
+    data-testid={dataTestId}
-    valueString.replace(/\D/g, "").length || valueString.length;
+  >
-  /**
+    <div className="flex items-start gap-4 mb-4 ">
- * 
+      <div className={`${iconBgClass} p-3 rounded-lg `}>
-const getValueFontSize = () => {
+        <Icon className="size-8" />
-  if (digitCount <= 3) {
-      // 3.75rem for 3 or fewer digits
-      return "3.75rem";
-    } else if (digitCount <= 6) {
-      // Scale down for more digits
-      return "clamp(2rem, 5cqi, 3rem)";
-    } else if (digitCount <= 9) {
-      return "clamp(1.5rem, 4cqi, 2.5rem)";
-    } else {
-      return "clamp(1.25rem, 3cqi, 2rem)";
-    }
-  };
-  
-  * */
-
-  const getValueFontSize = () => {
-    switch (true) {
-      case digitCount <= 3:
-        // 3.75rem for 3 or fewer digits
-        return "3.75rem";
-      case digitCount <= 6:
-        // Scale down for more digits
-        return "clamp(2rem, 5cqi, 3rem)";
-      case digitCount <= 9:
-        return "clamp(1.5rem, 4cqi, 2.5rem)";
-      default:
-        return "clamp(1.25rem, 3cqi, 2rem)";
-    }
-  };
-  const valueFontSize = getValueFontSize();
-
-  return (
-    <Card
-      className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
-      data-testid={dataTestId}
-    >
-      <div className="flex items-start gap-4 mb-4 justify-between">
-        <div
-          className="space-y-8 "
-          style={{
-            containerType: "inline-size",
-            maxWidth: "200px",
-            width: "100%",
-          }}
-        >
-          <p
-            className="font-semibold text-[var(--purple-ink)] mb-1"
-            style={{ fontSize: valueFontSize, lineHeight: 1 }}
-          >
-            {value}
-          </p>
-        </div>
-
-        <div className={`${iconBgClass} p-3 rounded-lg `}>
-          <Icon className="size-8" />
-        </div>
       </div>
-      <p
+
-        className="text-sm text-brand-purple "
+      <div className="space-y-8">
-        style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+        <p
-      >
+          className="text-6xl font-semibold text-[var(--purple-ink)] mb-1"
-        {title}
+          style={{ fontFamily: "'Inter', sans-serif" }}
-      </p>
+        >
-    </Card>
+          {value}
-  );
+        </p>
-};
+      </div>
+    </div>
+    <p
+      className="text-sm text-brand-purple "
+      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+    >
+      {title}
+    </p>
+  </Card>
+);

src/components/StatusBadge.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Badge } from './ui/badge';
-
-const STATUS_BADGE_CONFIG = {
-
-  //status-based badges
-  pending_email: { label: 'Pending Email', variant: 'orange2' },
-  pending_validation: { label: 'Pending Validation', variant: 'gray' },
-  pre_validated: { label: 'Pre-Validated', variant: 'green' },
-  payment_pending: { label: 'Payment Pending', variant: 'orange' },
-  active: { label: 'Active', variant: 'green' },
-  inactive: { label: 'Inactive', variant: 'gray2' },
-  canceled: { label: 'Canceled', variant: 'red' },
-  expired: { label: 'Expired', variant: 'red2' },
-  abandoned: { label: 'Abandoned', variant: 'gray3' },
-  rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' },
-
-  //role-based badges
-  finance: { label: 'Finance Manager', variant: 'purple' },
-  guest: { label: 'Guest', variant: 'gray' },
-  member: { label: 'Member', variant: 'purple' },
-  superadmin: { label: 'Superadmin', variant: 'purple' },
-  admin: { label: 'Admin', variant: 'purple' },
-  moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
-  staff: { label: 'Staff', variant: 'gray' },
-  media: { label: 'Media', variant: 'gray2' }
-};
-
-//todo: make shield icon dynamic based on status
-const StatusBadge = ({ status }) => {
-  const statusConfig = STATUS_BADGE_CONFIG[status] || STATUS_BADGE_CONFIG.inactive;
-
-  return (
-    <Badge variant={statusConfig.variant} className=" px-3 py-1  rounded-md text-sm">
-      {/* <Shield className="h-3 w-3 mr-1 inline" />  */}
-      {statusConfig.label}
-    </Badge>
-  );
-};
-
-
-export default StatusBadge;

src/components/TransactionHistory.js

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import { Card } from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Receipt, CreditCard, Heart, Calendar, ExternalLink, DollarSign } from 'lucide-react';
+
+/**
+ * TransactionHistory Component
+ * Displays user transaction history including subscriptions and donations
+ * 
+ * @param {Object} props
+ * @param {Array} props.subscriptions - List of subscription transactions
+ * @param {Array} props.donations - List of donation transactions
+ * @param {number} props.totalSubscriptionCents - Total subscription amount in cents
+ * @param {number} props.totalDonationCents - Total donation amount in cents
+ * @param {boolean} props.loading - Loading state
+ * @param {boolean} props.isAdmin - Whether viewing as admin (shows extra fields)
+ */
+const TransactionHistory = ({
+    subscriptions = [],
+    donations = [],
+    totalSubscriptionCents = 0,
+    totalDonationCents = 0,
+    loading = false,
+    isAdmin = false
+}) => {
+    const [activeTab, setActiveTab] = useState('all');
+
+    const formatAmount = (cents) => {
+        if (!cents) return '$0.00';
+        return `$${(cents / 100).toFixed(2)}`;
+    };
+
+    const formatDate = (dateString) => {
+        if (!dateString) return 'N/A';
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    };
+
+    const getStatusBadgeClass = (status) => {
+        switch (status?.toLowerCase()) {
+            case 'active':
+            case 'completed':
+                return 'bg-green-100 text-green-800 border-green-200';
+            case 'pending':
+                return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+            case 'cancelled':
+            case 'failed':
+            case 'expired':
+                return 'bg-red-100 text-red-800 border-red-200';
+            default:
+                return 'bg-gray-100 text-gray-800 border-gray-200';
+        }
+    };
+
+    const allTransactions = [
+        ...subscriptions.map(s => ({ ...s, sortDate: s.created_at })),
+        ...donations.map(d => ({ ...d, sortDate: d.created_at }))
+    ].sort((a, b) => new Date(b.sortDate) - new Date(a.sortDate));
+
+    const TransactionRow = ({ transaction }) => {
+        const isSubscription = transaction.type === 'subscription';
+
+        return (
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border-b border-[var(--neutral-800)] last:border-b-0 hover:bg-[var(--lavender-500)] transition-colors">
+                <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'}`}>
+                        {isSubscription ? (
+                            <CreditCard className="h-5 w-5 text-[var(--purple-lavender)]" />
+                        ) : (
+                            <Heart className="h-5 w-5 text-[var(--orange-light)]" />
+                        )}
+                    </div>
+                    <div className="flex-1">
+                        <div className="flex items-center gap-2 flex-wrap">
+                            <span className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {transaction.description}
+                            </span>
+                            <Badge className={`text-xs ${getStatusBadgeClass(transaction.status)}`}>
+                                {transaction.status}
+                            </Badge>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-brand-purple mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <Calendar className="h-3 w-3" />
+                            <span>{formatDate(transaction.payment_completed_at || transaction.created_at)}</span>
+                            {transaction.card_brand && transaction.card_last4 && (
+                                <>
+                                    <span className="text-[var(--neutral-800)]">•</span>
+                                    <span>{transaction.card_brand} ****{transaction.card_last4}</span>
+                                </>
+                            )}
+                            {isSubscription && transaction.billing_cycle && (
+                                <>
+                                    <span className="text-[var(--neutral-800)]">•</span>
+                                    <span className="capitalize">{transaction.billing_cycle}</span>
+                                </>
+                            )}
+                        </div>
+                        {isAdmin && transaction.manual_payment && (
+                            <div className="text-xs text-[var(--orange-light)] mt-1">
+                                Manual Payment {transaction.manual_payment_notes && `- ${transaction.manual_payment_notes}`}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 pl-10 sm:pl-0">
+                    <div className="text-right">
+                        <div className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {formatAmount(transaction.amount_cents)}
+                        </div>
+                        {isSubscription && transaction.donation_cents > 0 && (
+                            <div className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                (incl. {formatAmount(transaction.donation_cents)} donation)
+                            </div>
+                        )}
+                    </div>
+                    {transaction.stripe_receipt_url && (
+                        <a
+                            href={transaction.stripe_receipt_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 text-brand-purple hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-300)] rounded-lg transition-colors"
+                            title="View Receipt"
+                        >
+                            <ExternalLink className="h-4 w-4" />
+                        </a>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    const EmptyState = ({ type }) => (
+        <div className="py-12 text-center">
+            <div className="mx-auto w-16 h-16 bg-[var(--lavender-300)] rounded-full flex items-center justify-center mb-4">
+                {type === 'subscription' ? (
+                    <CreditCard className="h-8 w-8 text-brand-purple" />
+                ) : type === 'donation' ? (
+                    <Heart className="h-8 w-8 text-brand-purple" />
+                ) : (
+                    <Receipt className="h-8 w-8 text-brand-purple" />
+                )}
+            </div>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                {type === 'subscription'
+                    ? 'No subscription payments yet'
+                    : type === 'donation'
+                        ? 'No donations yet'
+                        : 'No transactions yet'}
+            </p>
+        </div>
+    );
+
+    if (loading) {
+        return (
+            <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                <div className="flex items-center justify-center py-12">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--purple-lavender)]"></div>
+                </div>
+            </Card>
+        );
+    }
+
+    return (
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+            <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Receipt className="h-6 w-6 text-brand-purple" />
+                    Transaction History
+                </h2>
+            </div>
+
+            {/* Summary Cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+                <div className="p-4 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
+                    <div className="flex items-center gap-2 text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <CreditCard className="h-4 w-4" />
+                        <span className="text-sm">Total Subscriptions</span>
+                    </div>
+                    <div className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {formatAmount(totalSubscriptionCents)}
+                    </div>
+                    <div className="text-xs text-brand-purple mt-1">{subscriptions.length} payment(s)</div>
+                </div>
+                <div className="p-4 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
+                    <div className="flex items-center gap-2 text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <Heart className="h-4 w-4" />
+                        <span className="text-sm">Total Donations</span>
+                    </div>
+                    <div className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {formatAmount(totalDonationCents)}
+                    </div>
+                    <div className="text-xs text-brand-purple mt-1">{donations.length} donation(s)</div>
+                </div>
+            </div>
+
+            {/* Tabs */}
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <TabsList className="grid w-full grid-cols-3 mb-4">
+                    <TabsTrigger value="all" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        All ({allTransactions.length})
+                    </TabsTrigger>
+                    <TabsTrigger value="subscriptions" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        Subscriptions ({subscriptions.length})
+                    </TabsTrigger>
+                    <TabsTrigger value="donations" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        Donations ({donations.length})
+                    </TabsTrigger>
+                </TabsList>
+
+                <div className="border border-[var(--neutral-800)] rounded-xl overflow-hidden">
+                    <TabsContent value="all" className="m-0">
+                        {allTransactions.length > 0 ? (
+                            allTransactions.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="all" />
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="subscriptions" className="m-0">
+                        {subscriptions.length > 0 ? (
+                            subscriptions.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="subscription" />
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="donations" className="m-0">
+                        {donations.length > 0 ? (
+                            donations.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="donation" />
+                        )}
+                    </TabsContent>
+                </div>
+            </Tabs>
+        </Card>
+    );
+};
+
+export default TransactionHistory;

src/context/UsersContext.js

@@ -1,93 +0,0 @@
-import React, { createContext, useState, useContext, useEffect, useCallback, useMemo } from 'react';
-import { toast } from 'sonner';
-import api from '../utils/api';
-
-const UsersContext = createContext();
-
-// Role definitions
-const STAFF_ROLES = ['admin', 'superadmin', 'finance'];
-const MEMBER_ROLES = ['member'];
-
-export const UsersProvider = ({ children }) => {
-  const [users, setUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  const fetchUsers = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await api.get('/admin/users');
-      setUsers(response.data);
-    } catch (err) {
-      setError(err);
-      toast.error('Failed to fetch users');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchUsers();
-  }, [fetchUsers]);
-
-  // Filtered views based on role
-  const staff = useMemo(
-    () => users.filter(user => STAFF_ROLES.includes(user.role)),
-    [users]
-  );
-
-  const members = useMemo(
-    () => users.filter(user => MEMBER_ROLES.includes(user.role)),
-    [users]
-  );
-
-  const allUsers = users;
-
-  // Update a single user in the local state (useful after edits)
-  const updateUser = useCallback((updatedUser) => {
-    setUsers(prev => prev.map(user =>
-      user.id === updatedUser.id ? updatedUser : user
-    ));
-  }, []);
-
-  // Remove a user from local state
-  const removeUser = useCallback((userId) => {
-    setUsers(prev => prev.filter(user => user.id !== userId));
-  }, []);
-
-  // Add a user to local state
-  const addUser = useCallback((newUser) => {
-    setUsers(prev => [...prev, newUser]);
-  }, []);
-
-  return (
-    <UsersContext.Provider value={{
-      // All data
-      users: allUsers,
-      staff,
-      members,
-      // State
-      loading,
-      error,
-      // Actions
-      refetch: fetchUsers,
-      updateUser,
-      removeUser,
-      addUser,
-    }}>
-      {children}
-    </UsersContext.Provider>
-  );
-};
-
-// Base hook to access the context
-export const useUsers = () => {
-  const context = useContext(UsersContext);
-  if (!context) {
-    throw new Error('useUsers must be used within a UsersProvider');
-  }
-  return context;
-};
-
-export default UsersContext;

src/hooks/use-members.js

@@ -1,90 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { toast } from 'sonner';
-import api from '../utils/api';
-
-const DEFAULT_SEARCH_FIELDS = ['first_name', 'last_name', 'email'];
-
-/**
- * Hook for fetching users from a custom endpoint (e.g., member-facing directory).
- * For admin pages, use hooks from use-users.js instead which share a centralized context.
- */
-const useMembers = ({
-  endpoint = '/admin/users',
-  initialFilter = 'active',
-  initialSearch = '',
-  filterKey = 'status',
-  allowedRoles = ['member'],
-  searchFields = DEFAULT_SEARCH_FIELDS,
-  fetchErrorMessage = 'Failed to fetch members',
-  searchAccessor,
-  transform,
-  onFetchError,
-} = {}) => {
-  const [users, setUsers] = useState([]);
-  const [filteredUsers, setFilteredUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState(initialSearch);
-  const [filterValue, setFilterValue] = useState(initialFilter);
-
-  const fetchMembers = useCallback(async () => {
-    try {
-      const response = await api.get(endpoint);
-      let filtered = response.data;
-      if (typeof transform === 'function') {
-        filtered = transform(filtered);
-      }
-      if (allowedRoles && allowedRoles.length) {
-        filtered = filtered.filter(user => allowedRoles.includes(user.role));
-      }
-      setUsers(filtered);
-    } catch (error) {
-      if (typeof onFetchError === 'function') {
-        onFetchError(error);
-      } else {
-        toast.error(fetchErrorMessage);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }, [allowedRoles, endpoint, fetchErrorMessage, onFetchError, transform]);
-
-  useEffect(() => {
-    fetchMembers();
-  }, [fetchMembers]);
-
-  useEffect(() => {
-    let filtered = users;
-
-    if (filterValue && filterValue !== 'all') {
-      filtered = filtered.filter(user => user[filterKey] === filterValue);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(user => {
-        const values = typeof searchAccessor === 'function'
-          ? searchAccessor(user)
-          : searchFields.map(field => user?.[field]);
-
-        return values
-          .filter(Boolean)
-          .some(value => value.toString().toLowerCase().includes(query));
-      });
-    }
-
-    setFilteredUsers(filtered);
-  }, [users, searchQuery, filterKey, filterValue, searchAccessor, searchFields]);
-
-  return {
-    users,
-    filteredUsers,
-    loading,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-    fetchMembers,
-  };
-};
-
-export default useMembers;

src/hooks/use-users.js

@@ -1,171 +0,0 @@
-import { useState, useMemo } from 'react';
-import { useUsers } from '../context/UsersContext';
-
-const DEFAULT_SEARCH_FIELDS = ['first_name', 'last_name', 'email'];
-
-/**
- * Base hook that adds search and filter functionality to any user list
- */
-const useFilteredUsers = ({
-  users,
-  initialFilter = 'all',
-  filterKey = 'status',
-  searchFields = DEFAULT_SEARCH_FIELDS,
-  searchAccessor,
-}) => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterValue, setFilterValue] = useState(initialFilter);
-
-  const filteredUsers = useMemo(() => {
-    let filtered = users;
-
-    // Apply filter
-    if (filterValue && filterValue !== 'all') {
-      filtered = filtered.filter(user => user[filterKey] === filterValue);
-    }
-
-    // Apply search
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(user => {
-        const values = typeof searchAccessor === 'function'
-          ? searchAccessor(user)
-          : searchFields.map(field => user?.[field]);
-
-        return values
-          .filter(Boolean)
-          .some(value => value.toString().toLowerCase().includes(query));
-      });
-    }
-
-    return filtered;
-  }, [users, searchQuery, filterKey, filterValue, searchAccessor, searchFields]);
-
-  return {
-    filteredUsers,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-  };
-};
-
-/**
- * Hook for staff users (admin, superadmin, finance roles)
- */
-export const useStaff = ({
-  initialFilter = 'all',
-  filterKey = 'role',
-  searchFields = DEFAULT_SEARCH_FIELDS,
-  searchAccessor,
-} = {}) => {
-  const { staff, loading, error, refetch, updateUser, removeUser } = useUsers();
-
-  const {
-    filteredUsers,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-  } = useFilteredUsers({
-    users: staff,
-    initialFilter,
-    filterKey,
-    searchFields,
-    searchAccessor,
-  });
-
-  return {
-    users: staff,
-    filteredUsers,
-    loading,
-    error,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-    refetch,
-    updateUser,
-    removeUser,
-  };
-};
-
-/**
- * Hook for member users (non-admin roles)
- */
-export const useMembers = ({
-  initialFilter = 'active',
-  filterKey = 'status',
-  searchFields = DEFAULT_SEARCH_FIELDS,
-  searchAccessor,
-} = {}) => {
-  const { members, loading, error, refetch, updateUser, removeUser } = useUsers();
-
-  const {
-    filteredUsers,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-  } = useFilteredUsers({
-    users: members,
-    initialFilter,
-    filterKey,
-    searchFields,
-    searchAccessor,
-  });
-
-  return {
-    users: members,
-    filteredUsers,
-    loading,
-    error,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-    refetch,
-    updateUser,
-    removeUser,
-  };
-};
-
-/**
- * Hook for all users (both staff and members)
- */
-export const useAllUsers = ({
-  initialFilter = 'all',
-  filterKey = 'status',
-  searchFields = DEFAULT_SEARCH_FIELDS,
-  searchAccessor,
-} = {}) => {
-  const { users, loading, error, refetch, updateUser, removeUser } = useUsers();
-
-  const {
-    filteredUsers,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-  } = useFilteredUsers({
-    users,
-    initialFilter,
-    filterKey,
-    searchFields,
-    searchAccessor,
-  });
-
-  return {
-    users,
-    filteredUsers,
-    loading,
-    error,
-    searchQuery,
-    setSearchQuery,
-    filterValue,
-    setFilterValue,
-    refetch,
-    updateUser,
-    removeUser,
-  };
-};

src/layouts/AdminLayout.js

@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
-import { Menu } from 'lucide-react';
 import AdminSidebar from '../components/AdminSidebar';
-import { UsersProvider } from '../context/UsersContext';
 
 const AdminLayout = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -48,48 +46,29 @@ const AdminLayout = ({ children }) => {
   };
 
   return (
-    <UsersProvider>
+    <div className={`flex h-screen bg-background ${isDark ? 'dark' : ''}`}>
-      <div className={`flex h-screen bg-background ${isDark ? 'dark' : ''}`}>
+      {/* Sidebar */}
-        {/* Sidebar */}
+      <AdminSidebar
-        <AdminSidebar
+        isOpen={sidebarOpen}
-          isOpen={sidebarOpen}
+        onToggle={toggleSidebar}
-          onToggle={toggleSidebar}
+        isMobile={isMobile}
-          isMobile={isMobile}
+      />
+
+      {/* Mobile Overlay */}
+      {isMobile && sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-30 transition-opacity"
+          onClick={closeSidebar}
         />
+      )}
 
-        {/* Mobile Overlay */}
+      {/* Main Content Area */}
-        {isMobile && sidebarOpen && (
+      <main className="flex-1 overflow-y-auto scrollbar-dashboard">
-          <div
+        <div className="max-w-7xl mx-auto px-6 py-8">
-            className="fixed inset-0 bg-black/50 z-30 transition-opacity"
+          {children}
-            onClick={closeSidebar}
+        </div>
-          />
+      </main>
-        )}
+    </div>
-
-        {/* Main Content Area */}
-        <main className="flex-1 overflow-y-auto scrollbar-dashboard">
-          {isMobile && (
-            <div className="sticky top-0 z-20 bg-background/90 backdrop-blur border-b border-[var(--neutral-800)] px-4 py-3 flex items-center gap-3">
-              <button
-                onClick={toggleSidebar}
-                className="p-2 rounded-lg hover:bg-[var(--neutral-800)]/20 transition-colors"
-                aria-label={sidebarOpen ? 'Close sidebar' : 'Open sidebar'}
-              >
-                <Menu className="h-5 w-5 text-primary" />
-              </button>
-              <span
-                className="text-sm font-semibold text-primary"
-                style={{ fontFamily: "'Inter', sans-serif" }}
-              >
-                Menu
-              </span>
-            </div>
-          )}
-          <div className="max-w-7xl mx-auto px-6 py-8">
-            {children}
-          </div>
-        </main>
-      </div>
-    </UsersProvider>
   );
 };
 

src/pages/Profile.js

@@ -12,6 +12,7 @@ import MemberFooter from '../components/MemberFooter';
 import { User, Save, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2 } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
 import ChangePasswordDialog from '../components/ChangePasswordDialog';
+import TransactionHistory from '../components/TransactionHistory';
 
 const Profile = () => {
   const { user } = useAuth();
@@ -24,6 +25,8 @@ const Profile = () => {
   const fileInputRef = useRef(null);
   const [maxFileSizeMB, setMaxFileSizeMB] = useState(50); // Default 50MB
   const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800); // Default 50MB in bytes
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
   const [formData, setFormData] = useState({
     // Personal Information
     first_name: '',
@@ -58,6 +61,7 @@ const Profile = () => {
   useEffect(() => {
     fetchConfig();
     fetchProfile();
+    fetchTransactions();
   }, []);
 
   const fetchConfig = async () => {
@@ -112,6 +116,19 @@ const Profile = () => {
     }
   };
 
+  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 handleInputChange = (e) => {
     const { name, value } = e.target;
     setFormData(prev => ({ ...prev, [name]: value }));
@@ -703,6 +720,18 @@ const Profile = () => {
           open={passwordDialogOpen}
           onOpenChange={setPasswordDialogOpen}
         />
+
+        {/* Transaction History Section */}
+        <div className="mt-8">
+          <TransactionHistory
+            subscriptions={transactions.subscriptions}
+            donations={transactions.donations}
+            totalSubscriptionCents={transactions.total_subscription_amount_cents}
+            totalDonationCents={transactions.total_donation_amount_cents}
+            loading={transactionsLoading}
+            isAdmin={false}
+          />
+        </div>
       </div>
       <MemberFooter />
     </div>

src/pages/admin/AdminDashboard.js

@@ -60,7 +60,7 @@ const AdminDashboard = () => {
 
   return (
     <>
-      <div className='flex flex-col md:flex-row  md:justify-between md:items-center'>
+      <div className='flex justify-between items-center'>
         <div className="mb-8">
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Admin Dashboard
@@ -69,9 +69,9 @@ const AdminDashboard = () => {
             Manage users, events, and membership applications.
           </p>
         </div>
-        <Link to={'/'} className=''>
+        <Link to={'/'}>
           <Button
-            className="btn-lavender mb-8 md:mb-0  "
+            className="btn-lavender"
           >
             <Globe />
             View Public Site

src/pages/admin/AdminMembers.js

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
 import {
@@ -19,24 +20,17 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
 import CreateMemberDialog from '../../components/CreateMemberDialog';
 import InviteStaffDialog from '../../components/InviteStaffDialog';
 import WordPressImportWizard from '../../components/WordPressImportWizard';
-import StatusBadge from '../../components/StatusBadge';
 import { StatCard } from '@/components/StatCard';
-import { useMembers } from '../../hooks/use-users';
 
 const AdminMembers = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { hasPermission } = useAuth();
-  const {
+  const [users, setUsers] = useState([]);
-    users,
+  const [filteredUsers, setFilteredUsers] = useState([]);
-    filteredUsers,
+  const [loading, setLoading] = useState(true);
-    loading,
+  const [searchQuery, setSearchQuery] = useState('');
-    searchQuery,
+  const [statusFilter, setStatusFilter] = useState('active');
-    setSearchQuery,
-    filterValue: statusFilter,
-    setFilterValue: setStatusFilter,
-    refetch,
-  } = useMembers();
   const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
   const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
   const [statusChanging, setStatusChanging] = useState(null);
@@ -47,13 +41,53 @@ const AdminMembers = () => {
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [exporting, setExporting] = useState(false);
 
+  useEffect(() => {
+    fetchMembers();
+  }, []);
+
+  useEffect(() => {
+    filterUsers();
+  }, [users, searchQuery, statusFilter]);
+
+  const fetchMembers = async () => {
+    try {
+      const response = await api.get('/admin/users');
+      // Filter to only members
+      const members = response.data.filter(user => user.role === 'member');
+      setUsers(members);
+    } catch (error) {
+      toast.error('Failed to fetch members');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterUsers = () => {
+    let filtered = users;
+
+    if (statusFilter && statusFilter !== 'all') {
+      filtered = filtered.filter(user => user.status === statusFilter);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user =>
+        user.first_name.toLowerCase().includes(query) ||
+        user.last_name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredUsers(filtered);
+  };
+
   const handleActivatePayment = (user) => {
     setSelectedUserForPayment(user);
     setPaymentDialogOpen(true);
   };
 
   const handlePaymentSuccess = () => {
-    refetch(); // Refresh list
+    fetchMembers(); // Refresh list
   };
 
   const handleStatusChangeRequest = (userId, currentStatus, newStatus, user) => {
@@ -74,7 +108,7 @@ const AdminMembers = () => {
     try {
       await api.put(`/admin/users/${userId}/status`, { status: newStatus });
       toast.success('Member status updated successfully');
-      refetch(); // Refresh list
+      fetchMembers(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to update status');
     } finally {
@@ -166,6 +200,27 @@ const AdminMembers = () => {
     };
   };
 
+  const getStatusBadge = (status) => {
+    const config = {
+      pending_email: { label: 'Pending Email', variant: 'orange2' },
+      pending_validation: { label: 'Pending Validation', variant: 'gray' },
+      pre_validated: { label: 'Pre-Validated', variant: 'green' },
+      payment_pending: { label: 'Payment Pending', variant: 'orange' },
+      active: { label: 'Active', variant: 'green' },
+      inactive: { label: 'Inactive', variant: 'gray2' },
+      canceled: { label: 'Canceled', variant: 'red' },
+      expired: { label: 'Expired', variant: 'red2' },
+      abandoned: { label: 'Abandoned', variant: 'gray3' }
+    };
+
+    const statusConfig = config[status] || config.inactive;
+    return (
+      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
+        {statusConfig.label}
+      </Badge>
+    );
+  };
+
   const getReminderInfo = (user) => {
     const emailReminders = user.email_verification_reminders_sent || 0;
     const eventReminders = user.event_attendance_reminders_sent || 0;
@@ -189,7 +244,7 @@ const AdminMembers = () => {
   return (
     <>
       <div className="mb-8">
-        <div className="flex flex-col md:flex-row  justify-between items-start mb-4">
+        <div className="flex justify-between items-start mb-4">
           <div>
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Members Management
@@ -198,7 +253,7 @@ const AdminMembers = () => {
               Manage paying members and their subscriptions.
             </p>
           </div>
-          <div className="flex gap-3 flex-wrap ">
+          <div className="flex gap-3 flex-wrap">
             {hasPermission('users.export') && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -270,6 +325,15 @@ const AdminMembers = () => {
           Quick Overview
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+
+
+          <StatCard
+            title="Total Members"
+            value={users.length}
+            icon={Users}
+            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
+            dataTestId="stat-total-members"
+          />
           <StatCard
             title="Active"
             value={users.filter(u => u.status === 'active').length}
@@ -291,13 +355,9 @@ const AdminMembers = () => {
             iconBgClass=" text-brand-pink"
             dataTestId="stat-inactive-members"
           />
-          <StatCard
+
-            title="Total Members"
+
-            value={users.length}
+
-            icon={Users}
-            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
-            dataTestId="stat-total-members"
-          />
         </div>
       </div>
 
@@ -341,8 +401,7 @@ const AdminMembers = () => {
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
           {filteredUsers.map((user) => {
-            const joinedDate = user.created_at;
+            const joinedDate = user.member_since || user.created_at;
-            const memberDate = user.member_since;
             return (
               <Card
                 key={user.id}
@@ -362,13 +421,12 @@ const AdminMembers = () => {
                         <h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
                           {user.first_name} {user.last_name}
                         </h3>
-                        <StatusBadge status={user.status} />
+                        {getStatusBadge(user.status)}
                       </div>
                       <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         <p>Email: {user.email}</p>
                         <p>Phone: {user.phone}</p>
-                        <p>Registered: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
+                        <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
-                        <p>Member Since: {memberDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                         {user.referred_by_member_name && (
                           <p>Referred by: {user.referred_by_member_name}</p>
                         )}
@@ -520,19 +578,19 @@ const AdminMembers = () => {
       <CreateMemberDialog
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}
-        onSuccess={refetch}
+        onSuccess={fetchMembers}
       />
 
       <InviteStaffDialog
         open={inviteDialogOpen}
         onOpenChange={setInviteDialogOpen}
-        onSuccess={refetch}
+        onSuccess={fetchMembers}
       />
 
       <WordPressImportWizard
         open={importDialogOpen}
         onOpenChange={setImportDialogOpen}
-        onSuccess={refetch}
+        onSuccess={fetchMembers}
       />
     </>
   );

src/pages/admin/AdminPlans.js

@@ -23,7 +23,6 @@ import {
   Search,
   DollarSign
 } from 'lucide-react';
-import StatusBadge from '@/components/StatusBadge';
 
 const AdminPlans = () => {
   const { hasPermission } = useAuth();
@@ -237,7 +236,7 @@ const AdminPlans = () => {
                   {plan.active ? 'Active' : 'Inactive'}
                 </Badge>
                 {plan.subscriber_count > 0 && (
-                  <Badge className="bg-[var(--neutral-800)] hover:text-white text-[var(--purple-ink)]">
+                  <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
                     <Users className="h-3 w-3 mr-1" />
                     {plan.subscriber_count}
                   </Badge>

src/pages/admin/AdminRoles.js

@@ -39,7 +39,6 @@ const AdminRoles = () => {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [showPermissionsModal, setShowPermissionsModal] = useState(false);
   const [expandedModules, setExpandedModules] = useState({});
-  const [savingPermissions, setSavingPermissions] = useState(false);
   const [formData, setFormData] = useState({
     code: '',
     name: '',
@@ -47,15 +46,6 @@ const AdminRoles = () => {
     permissions: []
   });
 
-  const formatRoleSlug = (value) => (
-    value
-      .toLowerCase()
-      .trim()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/_+/g, '-')
-      .replace(/^_+|_+$/g, '')
-  );
-
   useEffect(() => {
     fetchRoles();
     fetchPermissions();
@@ -143,7 +133,6 @@ const AdminRoles = () => {
   };
 
   const handleSavePermissions = async () => {
-    setSavingPermissions(true);
     try {
       await api.put(`/admin/roles/${selectedRole.id}/permissions`, {
         permission_codes: selectedPermissions
@@ -153,8 +142,6 @@ const AdminRoles = () => {
       fetchRoles();
     } catch (error) {
       toast.error('Failed to update permissions');
-    } finally {
-      setSavingPermissions(false);
     }
   };
 
@@ -168,14 +155,6 @@ const AdminRoles = () => {
     });
   };
 
-  const addPermissions = (permissionCodes) => {
-    setSelectedPermissions(prev => [...new Set([...prev, ...permissionCodes])]);
-  };
-
-  const removePermissions = (permissionCodes) => {
-    setSelectedPermissions(prev => prev.filter(code => !permissionCodes.includes(code)));
-  };
-
   const toggleModule = (module) => {
     setExpandedModules(prev => ({
       ...prev,
@@ -303,28 +282,8 @@ const AdminRoles = () => {
           </DialogHeader>
 
           <div className="space-y-4">
-
             <div>
-              <Label>Role Name *</Label>
+              <Label>Role Code *</Label>
-              <Input
-                placeholder="e.g., Content Editor, Finance Manager"
-                value={formData.name}
-                onChange={(e) => {
-                  const nextName = e.target.value;
-                  setFormData(prev => {
-                    const prevAuto = formatRoleSlug(prev.name);
-                    const isAuto = !prev.code || prev.code === prevAuto;
-                    return {
-                      ...prev,
-                      name: nextName,
-                      code: isAuto ? formatRoleSlug(nextName) : prev.code
-                    };
-                  });
-                }}
-              />
-            </div>
-            <div>
-              <Label>Role Slug *</Label>
               <Input
                 placeholder="e.g., content_editor, finance_manager"
                 value={formData.code}
@@ -335,6 +294,15 @@ const AdminRoles = () => {
               </p>
             </div>
 
+            <div>
+              <Label>Role Name *</Label>
+              <Input
+                placeholder="e.g., Content Editor, Finance Manager"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              />
+            </div>
+
             <div>
               <Label>Description</Label>
               <Textarea
@@ -414,6 +382,10 @@ const AdminRoles = () => {
           </DialogHeader>
 
           <div className="space-y-4">
+            <div>
+              <Label>Role Code</Label>
+              <Input value={selectedRole?.code || ''} disabled />
+            </div>
 
             <div>
               <Label>Role Name *</Label>
@@ -423,11 +395,6 @@ const AdminRoles = () => {
               />
             </div>
 
-            <div>
-              <Label>Role Slug</Label>
-              <Input value={selectedRole?.code || ''} disabled />
-            </div>
-
             <div>
               <Label>Description</Label>
               <Textarea
@@ -459,77 +426,48 @@ const AdminRoles = () => {
           </DialogHeader>
 
           <div className="border rounded-lg p-4">
-            {Object.entries(groupedPermissions).map(([module, perms]) => {
+            {Object.entries(groupedPermissions).map(([module, perms]) => (
-              const moduleCodes = perms.map(perm => perm.code);
+              <div key={module} className="mb-6">
-              const selectedCount = moduleCodes.filter(code => selectedPermissions.includes(code)).length;
+                <button
-              const hasPermissions = moduleCodes.length > 0;
+                  onClick={() => toggleModule(module)}
-              const isAllSelected = hasPermissions && selectedCount === moduleCodes.length;
+                  className="flex items-center w-full text-left font-medium text-lg mb-3 hover:text-blue-600"
-              const isNoneSelected = selectedCount === 0;
+                >
-
+                  {expandedModules[module] ? (
-              return (
+                    <ChevronUp className="w-5 h-5 mr-2" />
-                <div key={module} className="mb-6">
+                  ) : (
-                  <div className="flex items-center justify-between mb-3">
+                    <ChevronDown className="w-5 h-5 mr-2" />
-                    <button
-                      type="button"
-                      onClick={() => toggleModule(module)}
-                      className="flex items-center text-left font-medium text-lg hover:text-blue-600"
-                    >
-                      {expandedModules[module] ? (
-                        <ChevronUp className="w-5 h-5 mr-2" />
-                      ) : (
-                        <ChevronDown className="w-5 h-5 mr-2" />
-                      )}
-                      {module.charAt(0).toUpperCase() + module.slice(1)} ({perms.length})
-                    </button>
-                    <div className="flex items-center gap-3">
-                      <button
-                        type="button"
-                        onClick={() => addPermissions(moduleCodes)}
-                        disabled={!hasPermissions || isAllSelected}
-                        className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
-                      >
-                        Select all
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => removePermissions(moduleCodes)}
-                        disabled={!hasPermissions || isNoneSelected}
-                        className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
-                      >
-                        Deselect all
-                      </button>
-                    </div>
-                  </div>
-                  {expandedModules[module] && (
-                    <div className="space-y-3 ml-7">
-                      {perms.map(perm => (
-                        <div key={perm.code} className="flex items-start">
-                          <Checkbox
-                            checked={selectedPermissions.includes(perm.code)}
-                            onCheckedChange={() => togglePermission(perm.code)}
-                          />
-                          <div className="ml-3">
-                            <label className="font-medium text-sm">
-                              {perm.name}
-                            </label>
-                            <p className="text-xs text-gray-500">{perm.description}</p>
-                            <span className="text-xs text-gray-400">{perm.code}</span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
                   )}
-                </div>
+                  {module.charAt(0).toUpperCase() + module.slice(1)} ({perms.length})
-              );
+                </button>
-            })}
+                {expandedModules[module] && (
+                  <div className="space-y-3 ml-7">
+                    {perms.map(perm => (
+                      <div key={perm.code} className="flex items-start">
+                        <Checkbox
+                          checked={selectedPermissions.includes(perm.code)}
+                          onCheckedChange={() => togglePermission(perm.code)}
+                        />
+                        <div className="ml-3">
+                          <label className="font-medium text-sm">
+                            {perm.name}
+                          </label>
+                          <p className="text-xs text-gray-500">{perm.description}</p>
+                          <span className="text-xs text-gray-400">{perm.code}</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
           </div>
 
           <DialogFooter>
             <Button variant="outline" onClick={() => setShowPermissionsModal(false)}>
               Cancel
             </Button>
-            <Button onClick={handleSavePermissions} disabled={savingPermissions}>
+            <Button onClick={handleSavePermissions}>
-              {savingPermissions ? 'Saving...' : 'Save Permissions'}
+              Save Permissions
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -553,15 +491,6 @@ const AdminRoles = () => {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-
-      {savingPermissions && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-          <div className="bg-white rounded-xl shadow-lg px-6 py-5 text-center">
-            <div className="mx-auto h-10 w-10 animate-spin rounded-full border-4 border-[var(--neutral-800)] border-t-transparent" />
-            <p className="mt-4 text-sm font-medium text-gray-700">Saving permissions...</p>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

src/pages/admin/AdminStaff.js

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
@@ -11,39 +12,72 @@ import CreateStaffDialog from '../../components/CreateStaffDialog';
 import InviteStaffDialog from '../../components/InviteStaffDialog';
 import PendingInvitationsTable from '../../components/PendingInvitationsTable';
 import { toast } from 'sonner';
-import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX, ShieldIcon } from 'lucide-react';
+import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX } from 'lucide-react';
-import StatusBadge from '../../components/StatusBadge';
-import { StatCard } from '@/components/StatCard';
-import { CircleMinus, CreditCard, Users } from 'lucide-react';
-import { useStaff } from '../../hooks/use-users';
 
 const AdminStaff = () => {
   const navigate = useNavigate();
   const { hasPermission, user } = useAuth();
-  const {
+  const [users, setUsers] = useState([]);
-    users,
+  const [filteredUsers, setFilteredUsers] = useState([]);
-    filteredUsers,
+  const [loading, setLoading] = useState(true);
-    loading,
+  const [searchQuery, setSearchQuery] = useState('');
-    searchQuery,
+  const [roleFilter, setRoleFilter] = useState('all');
-    setSearchQuery,
-    filterValue: roleFilter,
-    setFilterValue: setRoleFilter,
-    refetch,
-  } = useStaff({
-    initialFilter: 'all',
-    filterKey: 'role',
-  });
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
   const [activeTab, setActiveTab] = useState('staff-list');
 
+  // Staff roles (non-guest, non-member) - includes all admin-type roles
+  const STAFF_ROLES = ['admin', 'superadmin', 'finance'];
+
+  useEffect(() => {
+    fetchStaff();
+  }, []);
+
+  useEffect(() => {
+    filterUsers();
+  }, [users, searchQuery, roleFilter]);
+
+  const fetchStaff = async () => {
+    try {
+      const response = await api.get('/admin/users');
+      // Filter to only staff roles
+      const staffUsers = response.data.filter(user =>
+        STAFF_ROLES.includes(user.role)
+      );
+      setUsers(staffUsers);
+    } catch (error) {
+      toast.error('Failed to fetch staff');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterUsers = () => {
+    let filtered = users;
+
+    if (roleFilter && roleFilter !== 'all') {
+      filtered = filtered.filter(user => user.role === roleFilter);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user =>
+        user.first_name.toLowerCase().includes(query) ||
+        user.last_name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query)
+      );
+    }
+
+    setFilteredUsers(filtered);
+  };
+
   const handleToggleStatus = async (userId, currentStatus) => {
     const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
 
     try {
       await api.put(`/admin/users/${userId}/status`, { status: newStatus });
       toast.success(`User ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`);
-      refetch(); // Refresh list
+      fetchStaff(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to update user status');
     }
@@ -57,19 +91,48 @@ const AdminStaff = () => {
     try {
       await api.delete(`/admin/users/${userId}`);
       toast.success('User deleted successfully');
-      refetch(); // Refresh list
+      fetchStaff(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to delete user');
     }
   };
 
+  const getRoleBadge = (role) => {
+    const config = {
+      superadmin: { label: 'Superadmin', variant: 'purple' },
+      admin: { label: 'Admin', variant: 'green' },
+      moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
+      staff: { label: 'Staff', variant: 'gray' },
+      media: { label: 'Media', variant: 'gray2' }
+    };
 
+    const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
+    return (
+      <Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
+        <Shield className="h-3 w-3 mr-1 inline" />
+        {roleConfig.label}
+      </Badge>
+    );
+  };
 
+  const getStatusBadge = (status) => {
+    const config = {
+      active: { label: 'Active', variant: 'green' },
+      inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
+    };
+
+    const statusConfig = config[status] || config.inactive;
+    return (
+      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
+        {statusConfig.label}
+      </Badge>
+    );
+  };
 
   return (
     <>
       <div className="mb-8">
-        <div className="flex flex-col md:flex-row justify-between items-start mb-4">
+        <div className="flex justify-between items-start mb-4">
           <div>
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Staff Management
@@ -78,8 +141,7 @@ const AdminStaff = () => {
               Manage internal team members and their roles.
             </p>
           </div>
-
+          <div className="flex gap-3">
-          <div className="flex gap-3 ">
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
@@ -103,52 +165,42 @@ const AdminStaff = () => {
       </div>
 
       {/* Stats */}
-      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
+      <div className="grid md:grid-cols-4 gap-4 mb-8">
-        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          Quick Overview
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
-        </div>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+            {users.length}
-          <StatCard
+          </p>
-            title="Total Staff"
+        </Card>
-            //TODO: refractor codebase to have a central admin and user roles config - when user adds roles, they should be added to the config
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-            value={users.filter(u => ['admin', 'superadmin', 'finance', 'staff', 'media'].includes(u.role)).length}
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
-            icon={Users}
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
+            {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
-            dataTestId="stat-total-members"
+          </p>
-          />
+        </Card>
-          <StatCard
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-            title="Admins"
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
-            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            icon={Shield}
+            {users.filter(u => u.role === 'moderator').length}
-            iconBgClass="text-[var(--green-light)]"
+          </p>
-            dataTestId="stat-active-members"
+        </Card>
-          />
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <StatCard
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-            title="Finance Managers"
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            value={users.filter(u => u.role === 'finance').length}
+            {users.filter(u => u.status === 'active').length}
-            icon={CreditCard}
+          </p>
-            iconBgClass="text-brand-light-orange"
+        </Card>
-            dataTestId="stat-payment-pending-members"
-          />
-          <StatCard
-            title="Inactive"
-            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length && users.filter(u => u.status !== 'inactive').length}
-            icon={CircleMinus}
-            iconBgClass=" text-brand-pink"
-            dataTestId="stat-inactive-members"
-          />
-        </div>
       </div>
 
       {/* Tabs */}
       <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
-        <TabsList className="grid w-full grid-cols-2 mb-8 ">
+        <TabsList className="grid w-full grid-cols-2 mb-8">
-          <TabsTrigger value="staff-list" className="text-sm sm:text-md md:text-lg  py-3">
+          <TabsTrigger value="staff-list" className="text-lg  py-3">
-            <UserCog className="h-5 w-5 mr-2 hidden md:inline" />
+            <UserCog className="h-5 w-5 mr-2" />
             Staff Members
           </TabsTrigger>
-          <TabsTrigger value="pending-invitations" className="text-sm sm:text-md md:text-lg  py-3  ">
+          <TabsTrigger value="pending-invitations" className="text-lg py-3  ">
-            <Mail className="h-5 w-5 mr-2 hidden md:inline" />
+            <Mail className="h-5 w-5 mr-2" />
             Pending Invitations
           </TabsTrigger>
         </TabsList>
@@ -198,79 +250,79 @@ const AdminStaff = () => {
                     className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
                     data-testid={`staff-card-${user.id}`}
                   >
-                    <div className="flex justify-between items-start flex-wrap gap-4">
+                  <div className="flex justify-between items-start flex-wrap gap-4">
-                      <div className="flex items-start gap-4 flex-1">
+                    <div className="flex items-start gap-4 flex-1">
-                        {/* Avatar */}
+                      {/* Avatar */}
-                        <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
+                      <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
-                          {user.first_name?.[0]}{user.last_name?.[0]}
+                        {user.first_name?.[0]}{user.last_name?.[0]}
-                        </div>
-
-                        {/* Info */}
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-3 mb-2 flex-wrap">
-                            <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                              {user.first_name} {user.last_name}
-                            </h3>
-                            <StatusBadge status={user.role} />
-                            <StatusBadge status={user.status} />
-                          </div>
-                          <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                            <p>Email: {user.email}</p>
-                            <p>Phone: {user.phone}</p>
-                            <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
-                            {user.last_login && (
-                              <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
-                            )}
-                          </div>
-                        </div>
                       </div>
 
-                      {/* Actions */}
+                      {/* Info */}
-                      <div className="flex gap-2 flex-wrap">
+                      <div className="flex-1 min-w-0">
-                        <Button
+                        <div className="flex items-center gap-3 mb-2 flex-wrap">
-                          onClick={() => navigate(`/admin/users/${user.id}`)}
+                          <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                          variant="outline"
+                            {user.first_name} {user.last_name}
-                          className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
+                          </h3>
-                        >
+                          {getRoleBadge(user.role)}
-                          <Edit className="h-4 w-4 mr-2" />
+                          {getStatusBadge(user.status)}
-                          Manage
+                        </div>
-                        </Button>
+                        <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-
+                          <p>Email: {user.email}</p>
-                        {hasPermission('users.status') && (
+                          <p>Phone: {user.phone}</p>
-                          <Button
+                          <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
-                            onClick={() => handleToggleStatus(user.id, user.status)}
+                          {user.last_login && (
-                            variant="outline"
+                            <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
-                            className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
+                          )}
-                              ? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
+                        </div>
-                              : 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
-                              }`}
-                          >
-                            {user.status === 'active' ? (
-                              <>
-                                <UserX className="h-4 w-4 mr-2" />
-                                Deactivate
-                              </>
-                            ) : (
-                              <>
-                                <UserCheck className="h-4 w-4 mr-2" />
-                                Activate
-                              </>
-                            )}
-                          </Button>
-                        )}
-
-                        {hasPermission('users.delete') && (
-                          <Button
-                            onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
-                            variant="outline"
-                            className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10  rounded-full px-4 py-2"
-                          >
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            Delete
-                          </Button>
-                        )}
                       </div>
                     </div>
+
+                    {/* Actions */}
+                    <div className="flex gap-2 flex-wrap">
+                      <Button
+                        onClick={() => navigate(`/admin/users/${user.id}`)}
+                        variant="outline"
+                        className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
+                      >
+                        <Edit className="h-4 w-4 mr-2" />
+                        Manage
+                      </Button>
+
+                      {hasPermission('users.status') && (
+                        <Button
+                          onClick={() => handleToggleStatus(user.id, user.status)}
+                          variant="outline"
+                          className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
+                            ? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
+                            : 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
+                            }`}
+                        >
+                          {user.status === 'active' ? (
+                            <>
+                              <UserX className="h-4 w-4 mr-2" />
+                              Deactivate
+                            </>
+                          ) : (
+                            <>
+                              <UserCheck className="h-4 w-4 mr-2" />
+                              Activate
+                            </>
+                          )}
+                        </Button>
+                      )}
+
+                      {hasPermission('users.delete') && (
+                        <Button
+                          onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
+                          variant="outline"
+                          className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10  rounded-full px-4 py-2"
+                        >
+                          <Trash2 className="h-4 w-4 mr-2" />
+                          Delete
+                        </Button>
+                      )}
+                    </div>
+                  </div>
                   </Card>
                 );
               })}
@@ -299,7 +351,7 @@ const AdminStaff = () => {
       <CreateStaffDialog
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}
-        onSuccess={refetch}
+        onSuccess={fetchStaff}
       />
 
       <InviteStaffDialog

src/pages/admin/AdminSubscriptions.js

@@ -19,6 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../components/ui/dialog';
+import { Badge } from '../../components/ui/badge';
 import api from '../../utils/api';
 import { toast } from 'sonner';
 import {
@@ -46,7 +47,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
-import StatusBadge from '@/components/StatusBadge';
 
 const AdminSubscriptions = () => {
   const { hasPermission } = useAuth();
@@ -302,7 +302,14 @@ Proceed with activation?`;
     }
   };
 
-
+  const getStatusBadgeVariant = (status) => {
+    const variants = {
+      active: 'default',
+      cancelled: 'destructive',
+      expired: 'secondary'
+    };
+    return variants[status] || 'outline';
+  };
 
   if (loading) {
     return (
@@ -494,7 +501,7 @@ Proceed with activation?`;
                         {sub.user.email}
                       </p>
                     </div>
-                    <StatusBadge status={sub.status} />
+                    <Badge variant={getStatusBadgeVariant(sub.status)}>{sub.status}</Badge>
                   </div>
 
                   {/* Plan & Period */}
@@ -628,8 +635,9 @@ Proceed with activation?`;
                           </div>
                         </td>
                         <td className="p-4">
-                          <StatusBadge status={sub.status} />
+                          <Badge variant={getStatusBadgeVariant(sub.status)}>
-
+                            {sub.status}
+                          </Badge>
                         </td>
                         <td className="p-4">
                           <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>

src/pages/admin/AdminUserView.js

@@ -10,7 +10,7 @@ import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera,
 import { toast } from 'sonner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import ChangeRoleDialog from '../../components/ChangeRoleDialog';
-import StatusBadge from '../../components/StatusBadge';
+import TransactionHistory from '../../components/TransactionHistory';
 
 const AdminUserView = () => {
   const { userId } = useParams();
@@ -19,8 +19,8 @@ const AdminUserView = () => {
   const [loading, setLoading] = useState(true);
   const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
   const [resendVerificationLoading, setResendVerificationLoading] = useState(false);
-  const [subscriptions, setSubscriptions] = useState([]);
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
-  const [subscriptionsLoading, setSubscriptionsLoading] = useState(true);
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
   const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState(null);
   const [uploadingPhoto, setUploadingPhoto] = useState(false);
@@ -69,7 +69,7 @@ const AdminUserView = () => {
   useEffect(() => {
     fetchConfig();
     fetchUserProfile();
-    fetchSubscriptions();
+    fetchTransactions();
   }, [userId]);
 
   useEffect(() => {
@@ -90,14 +90,15 @@ const AdminUserView = () => {
     }
   };
 
-  const fetchSubscriptions = async () => {
+  const fetchTransactions = async () => {
     try {
-      const response = await api.get(`/admin/subscriptions?user_id=${userId}`);
+      setTransactionsLoading(true);
-      setSubscriptions(response.data);
+      const response = await api.get(`/admin/users/${userId}/transactions`);
+      setTransactions(response.data);
     } catch (error) {
-      console.error('Failed to fetch subscriptions:', error);
+      console.error('Failed to fetch transactions:', error);
     } finally {
-      setSubscriptionsLoading(false);
+      setTransactionsLoading(false);
     }
   };
 
@@ -278,7 +279,7 @@ const AdminUserView = () => {
   if (loading) return <div>Loading...</div>;
   if (!user) return null;
 
-  const joinedDate = user.created_at;
+  const joinedDate = user.member_since || user.created_at;
   const memberSinceBaseline = formatDateInputValue(user.member_since);
   const memberSinceHasChanges = memberSince !== memberSinceBaseline;
 
@@ -312,9 +313,8 @@ const AdminUserView = () => {
                 {user.first_name} {user.last_name}
               </h1>
               {/* Status & Role Badges */}
-              <StatusBadge status={user.status} />
+              <Badge>{user.status}</Badge>
-              <StatusBadge status={user.role} />
+              <Badge>{user.role}</Badge>
-             
             </div>
 
             {/* Contact Info */}
@@ -333,7 +333,7 @@ const AdminUserView = () => {
               </div>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
-                <span>Registered: {formatDateDisplayValue(joinedDate)}</span>
+                <span>Joined {formatDateDisplayValue(joinedDate)}</span>
               </div>
             </div>
           </div>
@@ -484,91 +484,17 @@ const AdminUserView = () => {
         </div>
       </Card>
 
-      {/* Subscription Info (if applicable) */}
+      {/* Transaction History */}
-      {user.role === 'member' && (
+      <div className="mt-8">
-        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] mt-8">
+        <TransactionHistory
-          <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+          subscriptions={transactions.subscriptions}
-            Subscription Information
+          donations={transactions.donations}
-          </h2>
+          totalSubscriptionCents={transactions.total_subscription_amount_cents}
-
+          totalDonationCents={transactions.total_donation_amount_cents}
-          {subscriptionsLoading ? (
+          loading={transactionsLoading}
-            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
+          isAdmin={true}
-          ) : subscriptions.length === 0 ? (
+        />
-            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
+      </div>
-          ) : (
-            <div className="space-y-6">
-              {subscriptions.map((sub) => (
-                <div key={sub.id} className="p-6 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
-                  <div className="flex items-start justify-between mb-4">
-                    <div>
-                      <h3 className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {sub.plan.name}
-                      </h3>
-                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {sub.plan.billing_cycle}
-                      </p>
-                    </div>
-                    <StatusBadge status={sub.status} />
-                  </div>
-
-                  <div className="grid md:grid-cols-2 gap-4 text-sm">
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
-                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {formatDateDisplayValue(sub.start_date)}
-                      </p>
-                    </div>
-                    {sub.end_date && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {formatDateDisplayValue(sub.end_date)}
-                        </p>
-                      </div>
-                    )}
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
-                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        ${(sub.base_subscription_cents / 100).toFixed(2)}
-                      </p>
-                    </div>
-                    {sub.donation_cents > 0 && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          ${(sub.donation_cents / 100).toFixed(2)}
-                        </p>
-                      </div>
-                    )}
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
-                      <p className="text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        ${(sub.amount_paid_cents / 100).toFixed(2)}
-                      </p>
-                    </div>
-                    {sub.payment_method && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {sub.payment_method}
-                        </p>
-                      </div>
-                    )}
-                    {sub.stripe_subscription_id && (
-                      <div className="md:col-span-2">
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
-                        <p className="text-[var(--purple-ink)] text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {sub.stripe_subscription_id}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </Card>
-      )}
 
       {/* Admin Action Confirmation Dialog */}
       <ConfirmationDialog

src/pages/admin/AdminValidations.js

@@ -3,6 +3,7 @@ import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import {
   Select,
@@ -33,7 +34,6 @@ import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X } from 'lucide-react'
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
-import StatusBadge from '@/components/StatusBadge';
 
 const AdminValidations = () => {
   const { hasPermission } = useAuth();
@@ -235,7 +235,22 @@ const AdminValidations = () => {
     }
   };
 
+  const getStatusBadge = (status) => {
+    const config = {
+      pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
+      pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
+      pre_validated: { label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
+      payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
+      rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }
+    };
 
+    const statusConfig = config[status];
+    return (
+      <Badge className={`${statusConfig.className} px-2 py-1 rounded-full text-xs`}>
+        {statusConfig.label}
+      </Badge>
+    );
+  };
 
   const handleSort = (column) => {
     if (sortBy === column) {
@@ -386,7 +401,7 @@ const AdminValidations = () => {
                     </TableCell>
                     <TableCell>{user.email}</TableCell>
                     <TableCell>{user.phone}</TableCell>
-                    <TableCell><StatusBadge status={user.status} /></TableCell>
+                    <TableCell>{getStatusBadge(user.status)}</TableCell>
                     <TableCell>
                       {new Date(user.created_at).toLocaleDateString()}
                     </TableCell>

src/pages/members/MembersDirectory.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import api from '../../utils/api';
 import Navbar from '../../components/Navbar';
 import MemberFooter from '../../components/MemberFooter';
@@ -15,52 +15,63 @@ import {
 } from '../../components/ui/dialog';
 import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
-import StatusBadge from '@/components/StatusBadge';
-import MemberCard from '../../components/MemberCard';
-import useMembers from '../../hooks/use-members';
 
 const MembersDirectory = () => {
+  const [members, setMembers] = useState([]);
+  const [filteredMembers, setFilteredMembers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(true);
   const [selectedMember, setSelectedMember] = useState(null);
   const [profileDialogOpen, setProfileDialogOpen] = useState(false);
   const { toast } = useToast();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 12;
-  const allowedRoles = useMemo(() => [], []);
-  const searchAccessor = useCallback(
-    (member) => [
-      `${member.first_name} ${member.last_name}`,
-      member.directory_bio || ''
-    ],
-    []
-  );
-  const handleFetchError = useCallback(() => {
-    toast({
-      title: "Error",
-      description: "Failed to load members directory. Please try again.",
-      variant: "destructive"
-    });
-  }, [toast]);
 
-  const {
+  useEffect(() => {
-    users: members,
+    fetchMembers();
-    filteredUsers: filteredMembers,
+  }, []);
-    loading,
+
-    searchQuery,
+  useEffect(() => {
-    setSearchQuery,
+    filterMembers();
-  } = useMembers({
+  }, [searchQuery, members]);
-    endpoint: '/members/directory',
-    initialFilter: 'active',
-    filterKey: 'status',
-    allowedRoles,
-    searchAccessor,
-    fetchErrorMessage: 'Failed to load members directory. Please try again.',
-    onFetchError: handleFetchError
-  });
 
   useEffect(() => {
     setCurrentPage(1);
   }, [searchQuery, members]);
 
+  const fetchMembers = async () => {
+    try {
+      const response = await api.get('/members/directory');
+      setMembers(response.data);
+      setFilteredMembers(response.data);
+    } catch (error) {
+      console.error('Failed to fetch members:', error);
+      toast({
+        title: "Error",
+        description: "Failed to load members directory. Please try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterMembers = () => {
+    if (!searchQuery.trim()) {
+      setFilteredMembers(members);
+      return;
+    }
+
+    const query = searchQuery.toLowerCase();
+    const filtered = members.filter(member => {
+      const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+      const bio = (member.directory_bio || '').toLowerCase();
+      return fullName.includes(query) || bio.includes(query);
+    });
+
+    setFilteredMembers(filtered);
+  };
+
   const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize));
 
   const pageStart = (currentPage - 1) * pageSize;
@@ -69,7 +80,9 @@ const MembersDirectory = () => {
 
   const totalMembers = members.length;
 
-
+  const getInitials = (firstName, lastName) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+  };
 
   const getSocialMediaLink = (url) => {
     if (!url) return null;
@@ -105,6 +118,168 @@ const MembersDirectory = () => {
         : <div className=' border-2 w-full border-brand-purple  mb-24' />
     )
   }
+  const MemberCard = ({ member }) => {
+    const joinedDate = member.member_since || member.created_at;
+    return (
+      <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
+      {/* Profile Photo */}
+      <div className="flex justify-center mb-4">
+        {member.profile_photo_url ? (
+          <img
+            src={member.profile_photo_url}
+            alt={`${member.first_name} ${member.last_name}`}
+            className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
+          />
+        ) : (
+          <div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
+            <span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
+              {getInitials(member.first_name, member.last_name)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Name */}
+      <h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+        {member.first_name} {member.last_name}
+      </h3>
+
+      {/* Partner Name */}
+      {member.directory_partner_name && (
+        <div className="flex items-center justify-center gap-2 mb-4">
+          <Heart className="h-4 w-4 text-[var(--orange-light)]" />
+          <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Partner: {member.directory_partner_name}
+          </span>
+        </div>
+      )}
+
+      {/* Bio */}
+      {member.directory_bio && (
+        <p className="text-brand-purple  text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          {member.directory_bio}
+        </p>
+      )}
+
+      {/* Member Since */}
+      {joinedDate && (
+        <div className="flex items-center justify-center gap-2 mb-4">
+          <Calendar className="h-4 w-4 text-brand-purple " />
+          <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Member since {new Date(joinedDate).toLocaleDateString('en-US', {
+              month: 'long',
+              year: 'numeric'
+            })}
+          </span>
+        </div>
+      )}
+
+      {/* Contact Information */}
+      <div className="space-y-3 mb-4">
+        {member.directory_email && (
+          <div className="flex items-center gap-2 text-sm">
+            <Mail className="h-4 w-4 text-brand-purple  flex-shrink-0" />
+            <a
+              href={`mailto:${member.directory_email}`}
+              className="text-brand-purple  hover:text-[var(--purple-ink)] truncate"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              {member.directory_email}
+            </a>
+          </div>
+        )}
+
+        {member.directory_phone && (
+          <div className="flex items-center gap-2 text-sm">
+            <Phone className="h-4 w-4 text-brand-purple  flex-shrink-0" />
+            <a
+              href={`tel:${member.directory_phone}`}
+              className="text-brand-purple  hover:text-[var(--purple-ink)]"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              {member.directory_phone}
+            </a>
+          </div>
+        )}
+
+        {member.directory_address && (
+          <div className="flex items-start gap-2 text-sm">
+            <MapPin className="h-4 w-4 text-brand-purple  flex-shrink-0 mt-0.5" />
+            <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              {member.directory_address}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Social Media Links */}
+      {(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
+        <div className="pt-4 border-t border-[var(--neutral-800)]">
+          <div className="flex justify-center gap-3">
+            {member.social_media_facebook && (
+              <a
+                href={getSocialMediaLink(member.social_media_facebook)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                title="Facebook"
+              >
+                <Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
+              </a>
+            )}
+
+            {member.social_media_instagram && (
+              <a
+                href={getSocialMediaLink(member.social_media_instagram)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                title="Instagram"
+              >
+                <Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
+              </a>
+            )}
+
+            {member.social_media_twitter && (
+              <a
+                href={getSocialMediaLink(member.social_media_twitter)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                title="Twitter/X"
+              >
+                <Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
+              </a>
+            )}
+
+            {member.social_media_linkedin && (
+              <a
+                href={getSocialMediaLink(member.social_media_linkedin)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                title="LinkedIn"
+              >
+                <Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* View Profile Button */}
+      <div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
+        <Button
+          onClick={() => handleViewProfile(member.id)}
+          className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full py-5"
+        >
+          <UserCircle className="h-4 w-4 mr-2" />
+          View Full Profile
+        </Button>
+      </div>
+    </Card>
+    );
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
@@ -121,7 +296,7 @@ const MembersDirectory = () => {
               LOAF Members
             </h1>
             <p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span className='text-foreground'>Number of current members in the directory: </span> <span className='text-brand-purple  font-medium'>{totalMembers}</span>
+              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-brand-purple  font-medium'>{totalMembers}</span>
             </p>
           </div>
 
@@ -158,7 +333,7 @@ const MembersDirectory = () => {
         ) : filteredMembers.length > 0 ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {paginatedMembers.map((member) => (
-              <MemberCard key={member.id} member={member} onViewProfile={handleViewProfile} />
+              <MemberCard key={member.id} member={member} />
             ))}
           </div>
         ) : (
@@ -179,7 +354,7 @@ const MembersDirectory = () => {
 
         {/* Border Decoration */}
         <Border yaxis="true" />
-        {/* todo: use badge to display if member */}
+
         {/* Info Card */}
         {!loading && members.length > 0 && (
           <Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
@@ -202,15 +377,15 @@ const MembersDirectory = () => {
           </Card>
         )}
       </div>
+
       {/* Profile Detail Dialog */}
       <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
         <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
           {selectedMember && (
             <>
               <DialogHeader>
-                <DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)] flex items-center justify-between mr-8" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {selectedMember.first_name} {selectedMember.last_name}
-                  <StatusBadge status={selectedMember.membership_status || selectedMember.status} />
                 </DialogTitle>
                 {selectedMember.directory_partner_name && (
                   <DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -388,6 +563,8 @@ const MembersDirectory = () => {
         </DialogContent>
       </Dialog>
 
+
+
       {/* Pagination */}
       {!loading && filteredMembers.length > 0 && (
         <div className="mt-10 flex flex-col items-center gap-4 pb-12">

src/styles/App.css

@@ -54,4 +54,3 @@ h6 {
     #ffffff 100%
   );
 }
-

tailwind.config.js

@@ -101,6 +101,6 @@ module.exports = {
 
 	plugins: [
 		require("tailwindcss-animate"),
-		require("@tailwindcss/typography"),
+		require("@tailwindcss/typography")
 	],
 };

yarn.lock

@@ -2552,11 +2552,6 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@tailwindcss/line-clamp@^0.4.4":
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
-  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
-
 "@tailwindcss/typography@^0.5.19":
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.19.tgz#ecb734af2569681eb40932f09f60c2848b909456"