Merge branch 'theme-provider' into dev

src/components/StatusBadge.js

@@ -6,7 +6,6 @@ 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' },
@@ -23,7 +22,12 @@ const STATUS_BADGE_CONFIG = {
   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' }
+  media: { label: 'Media', variant: 'gray2' },
+
+  //donation badges
+  pending: { label: 'Payment Pending', variant: 'orange' },
+  completed: { label: 'Completed', variant: 'green' },
+  failed: { label: 'Failed', className: 'bg-red-100 text-red-700' }
 };
 
 //todo: make shield icon dynamic based on status

src/components/ViewRegistrationDialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
     Dialog,
     DialogContent,
@@ -9,12 +9,77 @@ import {
 } from './ui/dialog';
 import { Button } from './ui/button';
 import { Card } from './ui/card';
+import { Checkbox } from './ui/checkbox';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
 import { User, Mail, Phone, Calendar, UserCheck, Clock, FileText } from 'lucide-react';
 import StatusBadge from './StatusBadge';
+import api from '../utils/api';
+import { toast } from 'sonner';
 
 const ViewRegistrationDialog = ({ open, onOpenChange, user }) => {
     if (!user) return null;
 
+    const [formData, setFormData] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const autoSaveTimeoutRef = useRef(null);
+    const pendingSaveRef = useRef(false);
+
+    const leadSourceOptions = [
+        'Current member',
+        'Friend',
+        'OutSmart Magazine',
+        'Search engine (Google etc.)',
+        "I've known about LOAF for a long time",
+        'Other'
+    ];
+
+    const volunteerOptions = [
+        'Welcoming new members at events',
+        'Sending out birthday cards',
+        'Care Team Calls',
+        'Sharing ideas for events',
+        'Researching grants',
+        'Applying for grants',
+        'Assisting with TeatherLOAFers',
+        'Assisting with ActiveLOAFers',
+        'Assisting with weekday Lunch Bunch',
+        'Uploading Photos to the Website',
+        'Assisting with eNewsletter',
+        'Other administrative task'
+    ];
+
+    useEffect(() => {
+        if (!open || !user) return;
+        const nextFormData = {
+            lead_sources: Array.isArray(user.lead_sources) ? user.lead_sources : [],
+            partner_first_name: user.partner_first_name || '',
+            partner_last_name: user.partner_last_name || '',
+            partner_is_member: Boolean(user.partner_is_member),
+            partner_plan_to_become_member: Boolean(user.partner_plan_to_become_member),
+            newsletter_publish_name: Boolean(user.newsletter_publish_name),
+            newsletter_publish_photo: Boolean(user.newsletter_publish_photo),
+            newsletter_publish_birthday: Boolean(user.newsletter_publish_birthday),
+            newsletter_publish_none: Boolean(user.newsletter_publish_none),
+            referred_by_member_name: user.referred_by_member_name || '',
+            volunteer_interests: Array.isArray(user.volunteer_interests) ? user.volunteer_interests : [],
+            scholarship_requested: Boolean(user.scholarship_requested),
+            scholarship_reason: user.scholarship_reason || ''
+        };
+        setFormData(nextFormData);
+        setHasUnsavedChanges(false);
+    }, [open, user]);
+
+    useEffect(() => {
+        return () => {
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+        };
+    }, []);
+
     const formatDate = (dateString) => {
         if (!dateString) return '—';
         return new Date(dateString).toLocaleDateString('en-US', {
@@ -44,6 +109,91 @@ const ViewRegistrationDialog = ({ open, onOpenChange, user }) => {
         return phone;
     };
 
+    const saveProfile = async (showToast = true) => {
+        if (!formData) return;
+        if (isSaving) {
+            pendingSaveRef.current = true;
+            return;
+        }
+
+        setIsSaving(true);
+        try {
+            await api.put('/users/profile', {
+                lead_sources: formData.lead_sources,
+                partner_first_name: formData.partner_first_name,
+                partner_last_name: formData.partner_last_name,
+                partner_is_member: formData.partner_is_member,
+                partner_plan_to_become_member: formData.partner_plan_to_become_member,
+                newsletter_publish_name: formData.newsletter_publish_name,
+                newsletter_publish_photo: formData.newsletter_publish_photo,
+                newsletter_publish_birthday: formData.newsletter_publish_birthday,
+                newsletter_publish_none: formData.newsletter_publish_none,
+                referred_by_member_name: formData.referred_by_member_name,
+                volunteer_interests: formData.volunteer_interests,
+                scholarship_requested: formData.scholarship_requested,
+                scholarship_reason: formData.scholarship_reason
+            });
+            setHasUnsavedChanges(false);
+            if (showToast) {
+                toast.success('Registration details saved');
+            }
+        } catch (error) {
+            if (showToast) {
+                toast.error(error.response?.data?.detail || 'Failed to save registration details');
+            }
+        } finally {
+            setIsSaving(false);
+            if (pendingSaveRef.current) {
+                pendingSaveRef.current = false;
+                saveProfile(showToast);
+            }
+        }
+    };
+
+    const scheduleAutoSave = () => {
+        setHasUnsavedChanges(true);
+        if (autoSaveTimeoutRef.current) {
+            clearTimeout(autoSaveTimeoutRef.current);
+        }
+        autoSaveTimeoutRef.current = setTimeout(() => {
+            saveProfile(false);
+        }, 800);
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => {
+            const next = { ...prev, [name]: value };
+            return next;
+        });
+        scheduleAutoSave();
+    };
+
+    const handleCheckboxChange = (name, checked) => {
+        setFormData(prev => ({ ...prev, [name]: checked }));
+        scheduleAutoSave();
+    };
+
+    const handleLeadSourceChange = (source) => {
+        setFormData(prev => {
+            const sources = prev.lead_sources.includes(source)
+                ? prev.lead_sources.filter((item) => item !== source)
+                : [...prev.lead_sources, source];
+            return { ...prev, lead_sources: sources };
+        });
+        scheduleAutoSave();
+    };
+
+    const handleVolunteerChange = (option) => {
+        setFormData(prev => {
+            const interests = prev.volunteer_interests.includes(option)
+                ? prev.volunteer_interests.filter((item) => item !== option)
+                : [...prev.volunteer_interests, option];
+            return { ...prev, volunteer_interests: interests };
+        });
+        scheduleAutoSave();
+    };
+
     const InfoRow = ({ icon: Icon, label, value }) => (
         <div className="flex items-start gap-3 py-3 border-b border-[var(--neutral-800)] last:border-b-0">
             <div className="h-10 w-10 rounded-lg bg-[var(--lavender-400)] flex items-center justify-center flex-shrink-0">
@@ -109,10 +259,214 @@ const ViewRegistrationDialog = ({ open, onOpenChange, user }) => {
                             Registration Details
                         </h3>
                         <InfoRow icon={Calendar} label="Registration Date" value={formatDate(user.created_at)} />
-                        <InfoRow icon={UserCheck} label="Referred By" value={user.referred_by_member_name} />
+                        <InfoRow icon={UserCheck} label="Referred By" value={formData?.referred_by_member_name} />
                         <InfoRow icon={Clock} label="Email Verification Expires" value={formatDateTime(user.email_verification_expires_at)} />
                     </Card>
 
+                    {formData && (
+                        <>
+                            {/* How Did You Hear About Us */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    How Did You Hear About Us? *
+                                </h3>
+                                <div className="space-y-3">
+                                    {leadSourceOptions.map((source) => (
+                                        <div key={source} className="flex items-center space-x-2">
+                                            <Checkbox
+                                                id={`lead_${source}`}
+                                                checked={formData.lead_sources.includes(source)}
+                                                onCheckedChange={() => handleLeadSourceChange(source)}
+                                            />
+                                            <Label htmlFor={`lead_${source}`} className="text-base cursor-pointer">
+                                                {source}
+                                            </Label>
+                                        </div>
+                                    ))}
+                                </div>
+                            </Card>
+
+                            {/* Partner Information */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Partner Information (Optional)
+                                </h3>
+                                <div className="grid md:grid-cols-2 gap-4 mb-4">
+                                    <div>
+                                        <Label htmlFor="partner_first_name">Partner First Name</Label>
+                                        <Input
+                                            id="partner_first_name"
+                                            name="partner_first_name"
+                                            value={formData.partner_first_name}
+                                            onChange={handleInputChange}
+                                            className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                        />
+                                    </div>
+                                    <div>
+                                        <Label htmlFor="partner_last_name">Partner Last Name</Label>
+                                        <Input
+                                            id="partner_last_name"
+                                            name="partner_last_name"
+                                            value={formData.partner_last_name}
+                                            onChange={handleInputChange}
+                                            className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                        />
+                                    </div>
+                                </div>
+                                <div className="space-y-3">
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="partner_is_member"
+                                            checked={formData.partner_is_member}
+                                            onCheckedChange={(checked) => handleCheckboxChange('partner_is_member', checked)}
+                                        />
+                                        <Label htmlFor="partner_is_member" className="text-base cursor-pointer">
+                                            Is your partner already a member?
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="partner_plan_to_become_member"
+                                            checked={formData.partner_plan_to_become_member}
+                                            onCheckedChange={(checked) => handleCheckboxChange('partner_plan_to_become_member', checked)}
+                                        />
+                                        <Label htmlFor="partner_plan_to_become_member" className="text-base cursor-pointer">
+                                            Does your partner plan to become a member?
+                                        </Label>
+                                    </div>
+                                </div>
+                            </Card>
+
+                            {/* Newsletter Preferences */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Newsletter Publication Preferences *
+                                </h3>
+                                <p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    Please check what information may be published in LOAF Newsletter
+                                </p>
+                                <div className="space-y-3">
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_name"
+                                            checked={formData.newsletter_publish_name}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_name', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_name" className="text-base cursor-pointer">
+                                            Name
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_photo"
+                                            checked={formData.newsletter_publish_photo}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_photo', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_photo" className="text-base cursor-pointer">
+                                            Photo (added later in profile)
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_birthday"
+                                            checked={formData.newsletter_publish_birthday}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_birthday', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_birthday" className="text-base cursor-pointer">
+                                            Birthday
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_none"
+                                            checked={formData.newsletter_publish_none}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_none', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_none" className="text-base cursor-pointer">
+                                            Do not publish any of my information
+                                        </Label>
+                                    </div>
+                                </div>
+                            </Card>
+
+                            {/* Referral */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Referral
+                                </h3>
+                                <div>
+                                    <Label htmlFor="referred_by_member_name">Name of a LOAF Member who already knows you</Label>
+                                    <Input
+                                        id="referred_by_member_name"
+                                        name="referred_by_member_name"
+                                        value={formData.referred_by_member_name}
+                                        onChange={handleInputChange}
+                                        placeholder="Enter member name or email"
+                                        className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                    />
+                                    <p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                        If referred by a current member, you may skip the event attendance requirement.
+                                    </p>
+                                </div>
+                            </Card>
+
+                            {/* Volunteer Interests */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Volunteer Interests (Optional)
+                                </h3>
+                                <p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
+                                </p>
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                    {volunteerOptions.map((option) => (
+                                        <div key={option} className="flex items-center space-x-2">
+                                            <Checkbox
+                                                id={`volunteer_${option}`}
+                                                checked={formData.volunteer_interests.includes(option)}
+                                                onCheckedChange={() => handleVolunteerChange(option)}
+                                            />
+                                            <Label htmlFor={`volunteer_${option}`} className="text-base cursor-pointer">
+                                                {option}
+                                            </Label>
+                                        </div>
+                                    ))}
+                                </div>
+                            </Card>
+
+                            {/* Scholarship Request */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                        id="scholarship_requested"
+                                        checked={formData.scholarship_requested}
+                                        onCheckedChange={(checked) => handleCheckboxChange('scholarship_requested', checked)}
+                                    />
+                                    <Label htmlFor="scholarship_requested" className="text-base cursor-pointer font-semibold">
+                                        I am requesting for scholarship
+                                    </Label>
+                                </div>
+                                <p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    Scholarship information is kept confidential
+                                </p>
+                                {formData.scholarship_requested && (
+                                    <div className="mt-4">
+                                        <Label htmlFor="scholarship_reason">Please explain your situation *</Label>
+                                        <Textarea
+                                            id="scholarship_reason"
+                                            name="scholarship_reason"
+                                            value={formData.scholarship_reason}
+                                            onChange={handleInputChange}
+                                            placeholder="Tell us why you're requesting a scholarship..."
+                                            rows={4}
+                                            className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                        />
+                                    </div>
+                                )}
+                            </Card>
+                        </>
+                    )}
+
                     {/* Additional Information (if available) */}
                     {(user.address || user.city || user.state || user.zip_code) && (
                         <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
@@ -156,6 +510,19 @@ const ViewRegistrationDialog = ({ open, onOpenChange, user }) => {
                 </div>
 
                 <DialogFooter>
+                    <div className="flex-1 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {isSaving && 'Saving changes...'}
+                        {!isSaving && hasUnsavedChanges && 'Unsaved changes'}
+                        {!isSaving && !hasUnsavedChanges && 'All changes saved'}
+                    </div>
+                    <Button
+                        type="button"
+                        onClick={() => saveProfile(true)}
+                        disabled={!hasUnsavedChanges || isSaving}
+                        className="rounded-xl border-2 border-[var(--neutral-800)] bg-white text-[var(--purple-ink)] hover:bg-[var(--lavender-300)]"
+                    >
+                        Save All
+                    </Button>
                     <Button
                         type="button"
                         onClick={() => onOpenChange(false)}

src/components/admin/SubscriptionsTable.jsx

@@ -0,0 +1,347 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import StatusBadge from '../StatusBadge';
+import {
+  ChevronDown,
+  ChevronUp,
+  Edit,
+  XCircle,
+  CreditCard,
+  Info,
+  ExternalLink,
+  Copy
+} from 'lucide-react';
+
+const HEADER_CELLS = [
+  { label: 'Member', align: 'text-left' },
+  { label: 'Plan', align: 'text-left' },
+  { label: 'Status', align: 'text-left' },
+  { label: 'Period', align: 'text-left' },
+  { label: 'Base Fee', align: 'text-right' },
+  { label: 'Donation', align: 'text-right' },
+  { label: 'Total', align: 'text-right' },
+  { label: 'Details', align: 'text-center' },
+  { label: 'Actions', align: 'text-center' }
+];
+
+const HeaderCell = ({ align, children }) => (
+  <th
+    className={`p-4 text-[var(--purple-ink)] font-semibold ${align}`}
+    style={{ fontFamily: "'Inter', sans-serif" }}
+  >
+    {children}
+  </th>
+);
+
+const TableCell = ({ align = 'text-left', className = '', style, children, ...props }) => (
+  <td
+    className={`p-4 ${align} ${className}`.trim()}
+    style={style}
+    {...props}
+  >
+    {children}
+  </td>
+);
+
+
+const SubscriptionRow = ({
+  sub,
+  isExpanded,
+  onToggle,
+  onEdit,
+  onCancel,
+  hasPermission,
+  formatDate,
+  formatDateTime,
+  formatPrice,
+  copyToClipboard
+}) => (
+  <>
+    <tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
+      <TableCell>
+        <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          {sub.user.first_name} {sub.user.last_name}
+        </div>
+        <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          {sub.user.email}
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          {sub.plan.name}
+        </div>
+        <div className="text-xs text-brand-purple ">
+          {sub.plan.billing_cycle}
+        </div>
+      </TableCell>
+      <TableCell>
+        <StatusBadge status={sub.status} />
+      </TableCell>
+      <TableCell>
+        <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div>{formatDate(sub.start_date)}</div>
+          <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
+        </div>
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="text-[var(--purple-ink)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
+        {formatPrice(sub.base_subscription_cents || 0)}
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="text-[var(--orange-light)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
+        {formatPrice(sub.donation_cents || 0)}
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="font-semibold text-[var(--purple-ink)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
+        {formatPrice(sub.amount_paid_cents || 0)}
+      </TableCell>
+      <TableCell>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onToggle}
+          className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+        >
+          {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </Button>
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center justify-center gap-2">
+          {hasPermission('subscriptions.edit') && (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => onEdit(sub)}
+              className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+            >
+              <Edit className="h-4 w-4" />
+            </Button>
+          )}
+          {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
+            <Button
+              size="sm"
+              variant="outline-destructive"
+              onClick={() => onCancel(sub.id)}
+            >
+              <XCircle className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </TableCell>
+    </tr>
+
+    {isExpanded && (
+      <tr className="bg-[var(--lavender-400)]/30">
+        <TableCell colSpan={9} className="p-6">
+          <div className="space-y-4">
+            <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              Transaction Details
+            </h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-3">
+                <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <CreditCard className="h-4 w-4" />
+                  Payment Information
+                </h5>
+                <div className="space-y-2 text-sm">
+                  {sub.payment_completed_at && (
+                    <div className="flex justify-between">
+                      <span className="text-brand-purple ">Payment Date:</span>
+                      <span className="text-[var(--purple-ink)] font-medium">{formatDateTime(sub.payment_completed_at)}</span>
+                    </div>
+                  )}
+                  {sub.payment_method && (
+                    <div className="flex justify-between">
+                      <span className="text-brand-purple ">Payment Method:</span>
+                      <span className="text-[var(--purple-ink)] font-medium capitalize">{sub.payment_method}</span>
+                    </div>
+                  )}
+                  {sub.card_brand && sub.card_last4 && (
+                    <div className="flex justify-between">
+                      <span className="text-brand-purple ">Card:</span>
+                      <span className="text-[var(--purple-ink)] font-medium">{sub.card_brand} ****{sub.card_last4}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Info className="h-4 w-4" />
+                  Stripe Transaction IDs
+                </h5>
+                <div className="space-y-2 text-sm">
+                  {sub.stripe_payment_intent_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Payment Intent:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_payment_intent_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_payment_intent_id, 'Payment Intent ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_charge_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Charge ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_charge_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_charge_id, 'Charge ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_subscription_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Subscription ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_subscription_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_subscription_id, 'Subscription ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_invoice_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Invoice ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_invoice_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_invoice_id, 'Invoice ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_customer_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Customer ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_customer_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_customer_id, 'Customer ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_receipt_url && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Receipt:</span>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => window.open(sub.stripe_receipt_url, '_blank')}
+                        className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+                      >
+                        <ExternalLink className="h-3 w-3 mr-1" />
+                        View Receipt
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </TableCell>
+      </tr>
+    )}
+  </>
+);
+
+const SubscriptionsTable = ({
+  subscriptions,
+  expandedRows,
+  onToggleRowExpansion,
+  onEdit,
+  onCancel,
+  hasPermission,
+  formatDate,
+  formatDateTime,
+  formatPrice,
+  copyToClipboard
+}) => (
+  <table className="w-full">
+    <thead>
+      <tr className="bg-[var(--neutral-800)]/20 border-b border-[var(--neutral-800)]">
+        {HEADER_CELLS.map((cell) => (
+          <HeaderCell key={cell.label} align={cell.align}>
+            {cell.label}
+          </HeaderCell>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {subscriptions.length > 0 ? (
+        subscriptions.map((sub) => (
+          <SubscriptionRow
+            key={sub.id}
+            sub={sub}
+            isExpanded={expandedRows.has(sub.id)}
+            onToggle={() => onToggleRowExpansion(sub.id)}
+            onEdit={onEdit}
+            onCancel={onCancel}
+            hasPermission={hasPermission}
+            formatDate={formatDate}
+            formatDateTime={formatDateTime}
+            formatPrice={formatPrice}
+            copyToClipboard={copyToClipboard}
+          />
+        ))
+      ) : (
+        <tr>
+          <TableCell
+            align="text-center"
+            className="p-12 text-brand-purple "
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            colSpan={9}
+          >
+            No subscriptions found
+          </TableCell>
+        </tr>
+      )}
+    </tbody>
+  </table>
+);
+
+export default SubscriptionsTable;

src/components/ui/table.jsx

@@ -1,78 +1,91 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Table = React.forwardRef(({ className, ...props }, ref) => (
   <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props} />
+    <table ref={ref} className={cn("w-full", className)} {...props} />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  <thead
+    ref={ref}
+    className={cn(
+      "bg-[var(--lavender-300)] border-b border-[var(--neutral-800)]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
     className={cn("[&_tr:last-child]:border-0", className)}
-    {...props} />
-))
-TableBody.displayName = "TableBody"
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-    {...props} />
-))
-TableFooter.displayName = "TableFooter"
+    className={cn(
+      "border-t border-[var(--neutral-800)] font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      "border-b border-[var(--neutral-800)] transition-colors hover:bg-[var(--lavender-400)]",
+      className,
     )}
-    {...props} />
-))
-TableRow.displayName = "TableRow"
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef(({ className, ...props }, ref) => (
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      "p-4 text-left align-middle font-semibold text-[var(--purple-ink)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
     )}
-    {...props} />
-))
-TableHead.displayName = "TableHead"
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef(({ className, ...props }, ref) => (
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ",
+      className,
     )}
-    {...props} />
-))
-TableCell.displayName = "TableCell"
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
   <caption
     ref={ref}
     className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props} />
-))
-TableCaption.displayName = "TableCaption"
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
 
 export {
   Table,
@@ -83,4 +96,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};

src/pages/Profile.js

@@ -8,11 +8,10 @@ import { Label } from '../components/ui/label';
 import { Textarea } from '../components/ui/textarea';
 import { toast } from 'sonner';
 import Navbar from '../components/Navbar';
-import MemberFooter from '../components/MemberFooter';
-import { User, Save, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2 } from 'lucide-react';
+import { User, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2, Eye, CreditCard, Handshake, ArrowLeft } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
 import ChangePasswordDialog from '../components/ChangePasswordDialog';
-import TransactionHistory from '../components/TransactionHistory';
+import { useNavigate } from 'react-router-dom';
 
 const Profile = () => {
   const { user } = useAuth();
@@ -23,12 +22,13 @@ const Profile = () => {
   const [previewImage, setPreviewImage] = useState(null);
   const [uploadingPhoto, setUploadingPhoto] = useState(false);
   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 [maxFileSizeMB, setMaxFileSizeMB] = useState(50);
+  const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800);
+  const [activeTab, setActiveTab] = useState('account');
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [initialFormData, setInitialFormData] = useState(null);
+  const navigate = useNavigate();
   const [formData, setFormData] = useState({
-    // Personal Information
     first_name: '',
     last_name: '',
     phone: '',
@@ -36,19 +36,15 @@ const Profile = () => {
     city: '',
     state: '',
     zipcode: '',
-    // Partner Information
     partner_first_name: '',
     partner_last_name: '',
     partner_is_member: false,
     partner_plan_to_become_member: false,
-    // Newsletter Preferences
     newsletter_publish_name: false,
     newsletter_publish_photo: false,
     newsletter_publish_birthday: false,
     newsletter_publish_none: false,
-    // Volunteer Interests (array)
     volunteer_interests: [],
-    // Member Directory Settings
     show_in_directory: false,
     directory_email: '',
     directory_bio: '',
@@ -61,9 +57,16 @@ const Profile = () => {
   useEffect(() => {
     fetchConfig();
     fetchProfile();
-    fetchTransactions();
   }, []);
 
+  // Track unsaved changes
+  useEffect(() => {
+    if (initialFormData) {
+      const hasChanges = JSON.stringify(formData) !== JSON.stringify(initialFormData);
+      setHasUnsavedChanges(hasChanges);
+    }
+  }, [formData, initialFormData]);
+
   const fetchConfig = async () => {
     try {
       const response = await api.get('/config');
@@ -71,7 +74,6 @@ const Profile = () => {
       setMaxFileSizeBytes(response.data.max_file_size_bytes);
     } catch (error) {
       console.error('Failed to fetch config, using defaults:', error);
-      // Keep default values if fetch fails
     }
   };
 
@@ -81,8 +83,7 @@ const Profile = () => {
       setProfileData(response.data);
       setProfilePhotoUrl(response.data.profile_photo_url);
       setPreviewImage(response.data.profile_photo_url);
-      setFormData({
-        // Personal Information
+      const newFormData = {
         first_name: response.data.first_name || '',
         last_name: response.data.last_name || '',
         phone: response.data.phone || '',
@@ -90,19 +91,15 @@ const Profile = () => {
         city: response.data.city || '',
         state: response.data.state || '',
         zipcode: response.data.zipcode || '',
-        // Partner Information
         partner_first_name: response.data.partner_first_name || '',
         partner_last_name: response.data.partner_last_name || '',
         partner_is_member: response.data.partner_is_member || false,
         partner_plan_to_become_member: response.data.partner_plan_to_become_member || false,
-        // Newsletter Preferences
         newsletter_publish_name: response.data.newsletter_publish_name || false,
         newsletter_publish_photo: response.data.newsletter_publish_photo || false,
         newsletter_publish_birthday: response.data.newsletter_publish_birthday || false,
         newsletter_publish_none: response.data.newsletter_publish_none || false,
-        // Volunteer Interests
         volunteer_interests: response.data.volunteer_interests || [],
-        // Member Directory Settings
         show_in_directory: response.data.show_in_directory || false,
         directory_email: response.data.directory_email || '',
         directory_bio: response.data.directory_bio || '',
@@ -110,25 +107,14 @@ const Profile = () => {
         directory_phone: response.data.directory_phone || '',
         directory_dob: response.data.directory_dob || '',
         directory_partner_name: response.data.directory_partner_name || ''
-      });
+      };
+      setFormData(newFormData);
+      setInitialFormData(newFormData);
     } catch (error) {
       toast.error('Failed to load 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 }));
@@ -148,7 +134,6 @@ const Profile = () => {
     }));
   };
 
-  // Volunteer interest options
   const volunteerOptions = [
     'Event Planning',
     'Social Media',
@@ -166,13 +151,11 @@ const Profile = () => {
     const file = e.target.files[0];
     if (!file) return;
 
-    // Validate file type
     if (!file.type.startsWith('image/')) {
       toast.error('Please select an image file');
       return;
     }
 
-    // Validate file size
     if (file.size > maxFileSizeBytes) {
       toast.error(`File size must be less than ${maxFileSizeMB}MB`);
       return;
@@ -220,6 +203,8 @@ const Profile = () => {
     try {
       await api.put('/users/profile', formData);
       toast.success('Profile updated successfully!');
+      setInitialFormData(formData);
+      setHasUnsavedChanges(false);
       fetchProfile();
     } catch (error) {
       toast.error('Failed to update profile');
@@ -228,9 +213,15 @@ const Profile = () => {
     }
   };
 
+  const tabs = [
+    { id: 'account', label: 'Account & Privacy', shortLabel: 'Account', icon: Lock },
+    { id: 'bio', label: 'My Bio & Directory', shortLabel: 'Bio & Directory', icon: User },
+    { id: 'engagement', label: 'Engagement', shortLabel: 'Engagement', icon: Handshake }
+  ];
+
   if (!profileData) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-white dark:bg-[var(--purple-deep)]">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
           <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
@@ -239,71 +230,77 @@ const Profile = () => {
     );
   }
 
-  return (
-    <div className="min-h-screen bg-white">
-      <Navbar />
+  // Account & Privacy Tab Content
+  const AccountPrivacyContent = () => (
+    <div className="space-y-6 ">
 
-      <div className="max-w-4xl mx-auto px-6 py-12">
-        <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-            My Profile
-          </h1>
-          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-            Update your personal information below.
-          </p>
+      <Card className="space-y-6 px-6 pb-6">
+        <div className="bg-brand-purple text-white px-4 py-3 rounded-t-xl -mx-6 -mt-6 mb-6">
+          <h3 className="font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>Account & Privacy</h3>
+        </div>
+        <div>
+          <p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Login Email</p>
+          <p className="text-[var(--purple-ink)] dark:text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
         </div>
 
-        <Card className="p-8 bg-white rounded-2xl border border-[var(--neutral-800)] shadow-lg">
-          {/* Read-only Information */}
-          <div className="mb-8 pb-8 border-b border-[var(--neutral-800)]">
-            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <User className="h-6 w-6 text-brand-purple " />
-              Account Information
-            </h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+        <div className="flex items-center justify-between">
           <div>
-                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
-                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
+            <p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Password</p>
+            <p className="text-[var(--purple-ink)] dark:text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>••••••••</p>
           </div>
-              <div>
-                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
-                <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
-              </div>
-              <div>
-                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
-                <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
-              </div>
-              <div>
-                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
-                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  {new Date(profileData.date_of_birth).toLocaleDateString()}
-                </p>
-              </div>
-            </div>
-
-            <div className="mt-6">
           <Button
             type="button"
             onClick={() => setPasswordDialogOpen(true)}
             variant="outline"
-                className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-6 py-3"
+            className="border-2 border-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--lavender-300)] rounded-lg px-4 py-2"
           >
-                <Lock className="h-4 w-4 mr-2" />
-                Change Password
+            Change
           </Button>
         </div>
+
+        <div>
+          <p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Status</p>
+          <p className="text-[var(--purple-ink)] dark:text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            {profileData.status?.replace('_', ' ') || 'Active'}
+          </p>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</p>
+            <div className="flex items-center gap-2">
+              <CreditCard className="h-6 w-6 text-brand-purple" />
+            </div>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            className="border-2 border-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--lavender-300)] rounded-lg px-4 py-2"
+          >
+            Manage
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+
+  // My Bio & Directory Tab Content
+  const BioDirectoryContent = () => (
+    <Card className="space-y-6 px-6 pb-6">
+      <div className="bg-brand-purple text-white px-4 py-3 rounded-t-lg -mx-6 -mt-6 mb-6">
+        <h3 className="font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>My Bio & Directory</h3>
       </div>
 
       {/* Profile Photo Section */}
-          <div className="pb-8 mb-8 border-b border-[var(--neutral-800)]">
-            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <Camera className="h-6 w-6 text-brand-purple " />
+      <div className="pb-6 border-b border-[var(--neutral-800)]">
+        <h4 className="text-lg font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Camera className="h-5 w-5 text-brand-purple" />
           Profile Photo
-            </h2>
+        </h4>
         <div className="flex flex-col md:flex-row items-center gap-6">
-              <Avatar className="h-32 w-32 border-4 border-[var(--neutral-800)]">
+          <Avatar className="h-24 w-24 border-4 border-[var(--neutral-800)]">
             <AvatarImage src={previewImage} alt="Profile" />
-                <AvatarFallback className="bg-[var(--lavender-300)] text-brand-purple  text-3xl">
+            <AvatarFallback className="bg-[var(--lavender-300)] text-brand-purple text-2xl">
               {profileData?.first_name?.charAt(0)}{profileData?.last_name?.charAt(0)}
             </AvatarFallback>
           </Avatar>
@@ -321,7 +318,7 @@ const Profile = () => {
               type="button"
               onClick={() => fileInputRef.current?.click()}
               disabled={uploadingPhoto}
-                  className="bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full px-6 py-3"
+              className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full px-4 py-2"
             >
               <Upload className="h-4 w-4 mr-2" />
               {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -333,7 +330,7 @@ const Profile = () => {
                 onClick={handlePhotoDelete}
                 disabled={uploadingPhoto}
                 variant="outline"
-                    className="border-2 border-red-500 text-red-500 hover:bg-red-50 rounded-full px-6 py-3"
+                className="border-2 border-red-500 text-red-500 hover:bg-red-50 rounded-full px-4 py-2"
               >
                 <Trash2 className="h-4 w-4 mr-2" />
                 Delete Photo
@@ -341,19 +338,19 @@ const Profile = () => {
             )}
 
             <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Upload a profile photo (Max {maxFileSizeMB}MB)
+              Max {maxFileSizeMB}MB
             </p>
           </div>
         </div>
       </div>
 
-          {/* Editable Form */}
-          <form onSubmit={handleSubmit} className="space-y-6" data-testid="profile-form">
-            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+      {/* Personal Information */}
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Personal Information
-            </h2>
+        </h4>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
             <Label htmlFor="first_name">First Name</Label>
             <Input
@@ -361,7 +358,7 @@ const Profile = () => {
               name="first_name"
               value={formData.first_name}
               onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
               data-testid="first-name-input"
             />
           </div>
@@ -372,7 +369,7 @@ const Profile = () => {
               name="last_name"
               value={formData.last_name}
               onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
               data-testid="last-name-input"
             />
           </div>
@@ -386,7 +383,7 @@ const Profile = () => {
             type="tel"
             value={formData.phone}
             onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+            className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
             data-testid="phone-input"
           />
         </div>
@@ -398,12 +395,12 @@ const Profile = () => {
             name="address"
             value={formData.address}
             onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple  "
+            className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
             data-testid="address-input"
           />
         </div>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
           <div>
             <Label htmlFor="city">City</Label>
             <Input
@@ -411,7 +408,7 @@ const Profile = () => {
               name="city"
               value={formData.city}
               onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
               data-testid="city-input"
             />
           </div>
@@ -422,7 +419,7 @@ const Profile = () => {
               name="state"
               value={formData.state}
               onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
               data-testid="state-input"
             />
           </div>
@@ -433,20 +430,132 @@ const Profile = () => {
               name="zipcode"
               value={formData.zipcode}
               onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
               data-testid="zipcode-input"
             />
           </div>
         </div>
+      </div>
 
-            {/* Section 2: Partner Information */}
-            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
-              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Heart className="h-6 w-6 text-[var(--orange-light)]" />
+      {/* Member Directory Settings */}
+      <div className="pt-6 border-t border-[var(--neutral-800)] space-y-4">
+        <h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <BookUser className="h-5 w-5 text-[var(--orange-light)]" />
+          Member Directory Settings
+        </h4>
+        <p className="text-brand-purple text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          Control your visibility and information in the member directory.
+        </p>
+
+        <div className="flex items-center gap-3 p-4 bg-[var(--lavender-400)] rounded-lg">
+          <input
+            type="checkbox"
+            id="show_in_directory"
+            name="show_in_directory"
+            checked={formData.show_in_directory}
+            onChange={handleCheckboxChange}
+            className="ui-checkbox"
+          />
+          <Label htmlFor="show_in_directory" className="cursor-pointer text-[var(--purple-ink)] font-medium">
+            Include me in the member directory
+          </Label>
+        </div>
+
+        {formData.show_in_directory && (
+          <div className="space-y-4 pl-4 border-l-4 border-[var(--neutral-800)]">
+            <div>
+              <Label htmlFor="directory_email">Directory Email</Label>
+              <Input
+                id="directory_email"
+                name="directory_email"
+                type="email"
+                value={formData.directory_email}
+                onChange={handleInputChange}
+                className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                placeholder="Optional - email to show in directory"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="directory_bio">Bio</Label>
+              <Textarea
+                id="directory_bio"
+                name="directory_bio"
+                value={formData.directory_bio}
+                onChange={handleInputChange}
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple min-h-[100px]"
+                placeholder="Tell other members about yourself..."
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="directory_address">Address</Label>
+              <Input
+                id="directory_address"
+                name="directory_address"
+                value={formData.directory_address}
+                onChange={handleInputChange}
+                className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                placeholder="Optional - address to show in directory"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="directory_phone">Phone</Label>
+              <Input
+                id="directory_phone"
+                name="directory_phone"
+                type="tel"
+                value={formData.directory_phone}
+                onChange={handleInputChange}
+                className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                placeholder="Optional - phone to show in directory"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="directory_dob">Date of Birth</Label>
+              <Input
+                id="directory_dob"
+                name="directory_dob"
+                type="date"
+                value={formData.directory_dob}
+                onChange={handleInputChange}
+                className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="directory_partner_name">Partner Name</Label>
+              <Input
+                id="directory_partner_name"
+                name="directory_partner_name"
+                value={formData.directory_partner_name}
+                onChange={handleInputChange}
+                className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                placeholder="Optional - partner name to show in directory"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+
+  // Engagement Tab Content
+  const EngagementContent = () => (
+    <Card className="space-y-6 px-6 pb-6">
+      <div className="bg-brand-purple text-white px-4 py-3 rounded-t-lg -mx-6 -mt-6 mb-6">
+        <h3 className="font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>Engagement</h3>
+      </div>
+
+      {/* Partner Information */}
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Heart className="h-5 w-5 text-[var(--orange-light)]" />
           Partner Information
-              </h2>
-              <div className="space-y-6">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+        </h4>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
             <Label htmlFor="partner_first_name">Partner First Name</Label>
             <Input
@@ -454,7 +563,7 @@ const Profile = () => {
               name="partner_first_name"
               value={formData.partner_first_name}
               onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
               placeholder="Optional"
             />
           </div>
@@ -465,7 +574,7 @@ const Profile = () => {
               name="partner_last_name"
               value={formData.partner_last_name}
               onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
               placeholder="Optional"
             />
           </div>
@@ -477,7 +586,6 @@ const Profile = () => {
               id="partner_is_member"
               name="partner_is_member"
               checked={formData.partner_is_member}
-                      accent-color="var(--brand-white)"
               onChange={handleCheckboxChange}
               className="ui-checkbox"
             />
@@ -500,15 +608,14 @@ const Profile = () => {
           </div>
         </div>
       </div>
-            </div>
 
-            {/* Section 3: Newsletter Preferences */}
-            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
-              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Mail className="h-6 w-6 text-[var(--green-light)]" />
+      {/* Newsletter Preferences */}
+      <div className="pt-6 border-t border-[var(--neutral-800)] space-y-4">
+        <h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Mail className="h-5 w-5 text-[var(--green-light)]" />
           Newsletter Preferences
-              </h2>
-              <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        </h4>
+        <p className="text-brand-purple text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Choose what information you'd like published in our member newsletter.
         </p>
         <div className="space-y-3">
@@ -567,13 +674,13 @@ const Profile = () => {
         </div>
       </div>
 
-            {/* Section 4: Volunteer Interests */}
-            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
-              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Users className="h-6 w-6 text-brand-purple " />
+      {/* Volunteer Interests */}
+      <div className="pt-6 border-t border-[var(--neutral-800)] space-y-4">
+        <h4 className="text-lg font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Users className="h-5 w-5 text-brand-purple" />
           Volunteer Interests
-              </h2>
-              <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        </h4>
+        <p className="text-brand-purple text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Select areas where you'd like to volunteer and help our community.
         </p>
         <div className="grid md:grid-cols-2 gap-3">
@@ -596,133 +703,133 @@ const Profile = () => {
           ))}
         </div>
       </div>
+    </Card>
+  );
 
-            {/* Section 5: Member Directory Settings */}
-            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
-              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <BookUser className="h-6 w-6 text-[var(--orange-light)]" />
-                Member Directory Settings
-              </h2>
-              <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                Control your visibility and information in the member directory.
-              </p>
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <Navbar />
 
-              <div className="space-y-6">
-                <div className="flex items-center gap-3 p-4 bg-[var(--lavender-400)] rounded-lg">
-                  <input
-                    type="checkbox"
-                    id="show_in_directory"
-                    name="show_in_directory"
-                    checked={formData.show_in_directory}
-                    onChange={handleCheckboxChange}
-                    className="ui-checkbox"
-                  />
-                  <Label htmlFor="show_in_directory" className="cursor-pointer text-[var(--purple-ink)] font-medium">
-                    Include me in the member directory
-                  </Label>
+      <div className="flex-1 flex flex-col">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-8 w-full flex-1 pb-24">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <div className='space-y-4'>
+
+              <h1 className="text-4xl md:text-4xl font-semibold " style={{ fontFamily: "'Inter', sans-serif" }}>
+                My Profile
+              </h1>
+              <p className='text-brand-purple text-md'>Update your personal information below.</p>
+            </div>
+            {/* <Button
+              type="button"
+              variant="outline"
+              className="border-2  hover:bg-white/10 rounded-lg px-4 py-2"
+            >
+              <Eye className="h-4 w-4 mr-2 md:mr-2" />
+              <span className="hidden md:inline">Public Profile Preview</span>
+              <span className="md:hidden">Preview</span>
+            </Button> */}
           </div>
 
-                {formData.show_in_directory && (
-                  <div className="space-y-6 pl-4 border-l-4 border-[var(--neutral-800)]">
-                    <div>
-                      <Label htmlFor="directory_email">Directory Email</Label>
-                      <Input
-                        id="directory_email"
-                        name="directory_email"
-                        type="email"
-                        value={formData.directory_email}
-                        onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
-                        placeholder="Optional - email to show in directory"
-                      />
+          {/* Main Content Div */}
+          <div className="overflow-hidden ">
+            <form onSubmit={handleSubmit} data-testid="profile-form">
+              {/* Mobile Tabs */}
+              <div className="md:hidden flex border-b border-[var(--neutral-800)] mb-4 gap-1 ">
+                {tabs.map((tab) => {
+                  const IconComponent = tab.icon;
+                  return (
+                    <button
+                      key={tab.id}
+                      type="button"
+                      onClick={() => setActiveTab(tab.id)}
+                      className={`flex-1 flex flex-col items-center rounded-xl gap-1 px-3 py-3 text-xs font-medium transition-colors ${activeTab === tab.id
+                        ? 'bg-brand-purple text-white'
+                        : 'text-[var(--purple-ink)] hover:bg-[var(--lavender-300)]'
+                        }`}
+                    >
+                      <IconComponent className="h-5 w-5" />
+                      <span className="whitespace-nowrap">{tab.shortLabel}</span>
+                    </button>
+                  );
+                })}
               </div>
 
-                    <div>
-                      <Label htmlFor="directory_bio">Bio</Label>
-                      <Textarea
-                        id="directory_bio"
-                        name="directory_bio"
-                        value={formData.directory_bio}
-                        onChange={handleInputChange}
-                        className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple  min-h-[100px]"
-                        placeholder="Tell other members about yourself..."
-                      />
+              {/* Desktop Layout */}
+              <div className="flex">
+                {/* Desktop Sidebar Tabs */}
+                <div className="hidden md:flex flex-col w-64  border-[var(--neutral-800)] mr-4 gap-2">
+                  {tabs.map((tab) => {
+                    const IconComponent = tab.icon;
+                    return (
+                      <button
+                        key={tab.id}
+                        type="button"
+                        onClick={() => setActiveTab(tab.id)}
+                        className={`flex items-center gap-3 px-4 py-3 rounded-xl text-left font-medium transition-colors ${activeTab === tab.id
+                          ? 'bg-brand-purple text-white'
+                          : 'text-[var(--purple-ink)] hover:bg-[var(--lavender-300)]'
+                          }`}
+                      >
+                        <IconComponent className="h-5 w-5" />
+                        <span>{tab.label}</span>
+                      </button>
+                    );
+                  })}
                 </div>
 
-                    <div>
-                      <Label htmlFor="directory_address">Address</Label>
-                      <Input
-                        id="directory_address"
-                        name="directory_address"
-                        value={formData.directory_address}
-                        onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
-                        placeholder="Optional - address to show in directory"
-                      />
+                {/* Content Area */}
+                <div className="flex-1 p-6 min-h-[500px]">
+                  {activeTab === 'account' && <AccountPrivacyContent />}
+                  {activeTab === 'bio' && <BioDirectoryContent />}
+                  {activeTab === 'engagement' && <EngagementContent />}
+                </div>
+              </div>
+            </form>
+          </div>
         </div>
 
-                    <div>
-                      <Label htmlFor="directory_phone">Phone</Label>
-                      <Input
-                        id="directory_phone"
-                        name="directory_phone"
-                        type="tel"
-                        value={formData.directory_phone}
-                        onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
-                        placeholder="Optional - phone to show in directory"
-                      />
-                    </div>
+        {/* Sticky Footer */}
+        <div className="fixed bottom-0 left-0 right-0 bg-white  border-t border-[var(--neutral-800)] px-4 sm:px-6 py-4 z-50">
+          <div className="max-w-5xl px-6  mx-auto flex items-center justify-between">
 
-                    <div>
-                      <Label htmlFor="directory_dob">Date of Birth</Label>
-                      <Input
-                        id="directory_dob"
-                        name="directory_dob"
-                        type="date"
-                        value={formData.directory_dob}
-                        onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
-                      />
-                    </div>
-
-                    <div>
-                      <Label htmlFor="directory_partner_name">Partner Name</Label>
-                      <Input
-                        id="directory_partner_name"
-                        name="directory_partner_name"
-                        value={formData.directory_partner_name}
-                        onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
-                        placeholder="Optional - partner name to show in directory"
-                      />
-                    </div>
-                  </div>
+            <div className='flex gap-2 w-full lg:justify-between md:mr-5'>
+              <Button
+                onClick={() => navigate(-1)}
+                className="h-fit bg-brand-purple hover:bg-brand-purple/80 rounded-lg px-6 py-2 font-medium shadow-lg w-full md:w-auto">
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Back
+              </Button>
+              <div className="flex items-center gap-2">
+                {hasUnsavedChanges && (
+                  <>
+                    <span className="h-3 w-3 rounded-full bg-[var(--orange-light)]"></span>
+                    <span className="text-sm text-[var(--purple-ink)] " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      Unsaved changes
+                    </span>
+                  </>
                 )}
               </div>
-            </div>
-
-            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
               <Button
-                type="submit"
+                type="button"
+                onClick={handleSubmit}
                 disabled={loading}
-                className="bg-brand-purple text-white hover:bg-brand-dark-lavender  rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
+                className="bg-brand-purple text-white hover:bg-brand-dark-lavender rounded-lg px-6 py-2 font-medium shadow-lg disabled:opacity-50 w-full md:w-auto"
                 data-testid="save-profile-button"
               >
-                <Save className="h-5 w-5 mr-2" />
                 {loading ? 'Saving...' : 'Save Changes'}
               </Button>
             </div>
-          </form>
-        </Card>
+
+          </div>
+        </div>
+      </div>
 
       <ChangePasswordDialog
         open={passwordDialogOpen}
         onOpenChange={setPasswordDialogOpen}
       />
-
-      </div>
-      <MemberFooter />
     </div>
   );
 };

src/pages/admin/AdminDonations.js

@@ -3,6 +3,7 @@ import { useAuth } from '../../context/AuthContext';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
+import StatusBadge from '@/components/StatusBadge';
 import {
   Select,
   SelectContent,
@@ -17,6 +18,14 @@ import {
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
 import { Badge } from '../../components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../components/ui/table';
 import api from '../../utils/api';
 import { toast } from 'sonner';
 import {
@@ -184,15 +193,8 @@ const AdminDonations = () => {
       toast.error('Failed to copy to clipboard');
     }
   };
-
-  const getStatusBadgeVariant = (status) => {
-    const variants = {
-      completed: 'default',
-      pending: 'secondary',
-      failed: 'destructive'
-    };
-    return variants[status] || 'outline';
-  };
+  /*
+  */
 
   const getTypeBadgeColor = (type) => {
     return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-brand-purple ';
@@ -392,51 +394,37 @@ const AdminDonations = () => {
       {/* Donations Table */}
       <Card className="bg-background rounded-2xl border-2 border-[var(--neutral-800)] overflow-hidden">
         <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-[var(--lavender-300)] border-b-2 border-[var(--neutral-800)]">
-              <tr>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Donor
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Type
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Amount
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Status
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Date
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Payment Method
-                </th>
-                <th className="px-6 py-4 text-center text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Details
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-[var(--neutral-800)]">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Donor</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Amount</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Date</TableHead>
+                <TableHead>Payment Method</TableHead>
+                <TableHead className="text-center">Details</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
               {filteredDonations.length === 0 ? (
-                <tr>
-                  <td colSpan="7" className="px-6 py-12 text-center">
+                <TableRow>
+                  <TableCell colSpan={7} className="p-12 text-center">
                     <div className="flex flex-col items-center gap-3">
                       <Heart className="h-12 w-12 text-[var(--neutral-800)]" />
                       <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
                       </p>
                     </div>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               ) : (
                 filteredDonations.map((donation) => {
                   const isExpanded = expandedRows.has(donation.id);
                   return (
                     <React.Fragment key={donation.id}>
-                      <tr className="hover:bg-[var(--lavender-400)] transition-colors">
-                        <td className="px-6 py-4">
+                      <TableRow>
+                        <TableCell>
                           <div>
                             <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                               {donation.donor_name || 'Anonymous'}
@@ -445,39 +433,37 @@ const AdminDonations = () => {
                               {donation.donor_email || 'No email'}
                             </p>
                           </div>
-                        </td>
-                        <td className="px-6 py-4">
+                        </TableCell>
+                        <TableCell>
                           <Badge
-                            className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
+                            className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none  px-3 py-1`}
                             style={{ fontFamily: "'Inter', sans-serif" }}
                           >
                             {donation.donation_type === 'member' ? 'Member' : 'Public'}
                           </Badge>
-                        </td>
-                        <td className="px-6 py-4">
+                        </TableCell>
+                        <TableCell>
                           <p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {donation.amount}
                           </p>
-                        </td>
-                        <td className="px-6 py-4">
-                          <Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
-                            {donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
-                          </Badge>
-                        </td>
-                        <td className="px-6 py-4">
+                        </TableCell>
+                        <TableCell>
+                          <StatusBadge status={donation.status} />
+                        </TableCell>
+                        <TableCell>
                           <div className="flex items-center gap-2 text-brand-purple ">
                             <Calendar className="h-4 w-4" />
                             <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {formatDate(donation.created_at)}
                             </span>
                           </div>
-                        </td>
-                        <td className="px-6 py-4">
-                          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        </TableCell>
+                        <TableCell>
+                          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif capitalize" }}>
                             {donation.payment_method || 'N/A'}
                           </p>
-                        </td>
-                        <td className="px-6 py-4 text-center">
+                        </TableCell>
+                        <TableCell className="text-center">
                           <Button
                             size="sm"
                             variant="ghost"
@@ -486,12 +472,11 @@ const AdminDonations = () => {
                           >
                             {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                           </Button>
-                        </td>
-                      </tr>
-                      {/* Expandable Details Row */}
+                        </TableCell>
+                      </TableRow>
                       {isExpanded && (
-                        <tr className="bg-[var(--lavender-400)]/30">
-                          <td colSpan="7" className="px-6 py-6">
+                        <TableRow className="bg-[var(--lavender-400)]/30">
+                          <TableCell colSpan={7} className="p-6">
                             <div className="space-y-4">
                               <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                                 Transaction Details
@@ -601,15 +586,15 @@ const AdminDonations = () => {
                                 </div>
                               </div>
                             </div>
-                          </td>
-                        </tr>
+                          </TableCell>
+                        </TableRow>
                       )}
                     </React.Fragment>
                   );
                 })
               )}
-            </tbody>
-          </table>
+            </TableBody>
+          </Table>
         </div>
       </Card>
 

src/pages/admin/AdminMembers.js

@@ -323,11 +323,9 @@ const AdminMembers = () => {
               <SelectItem value="active">Active</SelectItem>
               <SelectItem value="payment_pending">Payment Pending</SelectItem>
               <SelectItem value="pending_validation">Pending Validation</SelectItem>
-              <SelectItem value="pre_validated">Pre-Validated</SelectItem>
               <SelectItem value="inactive">Inactive</SelectItem>
               <SelectItem value="canceled">Canceled</SelectItem>
               <SelectItem value="expired">Expired</SelectItem>
-              <SelectItem value="abandoned">Abandoned</SelectItem>
             </SelectContent>
           </Select>
         </div>

src/pages/admin/AdminSubscriptions.js

@@ -35,11 +35,14 @@ import {
   FileDown,
   AlertTriangle,
   Info,
+  Repeat,
   ChevronDown,
   ChevronUp,
+
+
+
   ExternalLink,
-  Copy,
-  Repeat
+  Copy
 } from 'lucide-react';
 import {
   DropdownMenu,
@@ -49,6 +52,7 @@ import {
 } from '../../components/ui/dropdown-menu';
 import StatusBadge from '@/components/StatusBadge';
 import CreateSubscriptionDialog from '@/components/CreateSubscriptionDialog';
+import SubscriptionsTable from '@/components/admin/SubscriptionsTable';
 
 const AdminSubscriptions = () => {
   const { hasPermission } = useAuth();
@@ -590,277 +594,18 @@ Proceed with activation?`;
 
           {/* Desktop Table View */}
           <div className="hidden md:block overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-[var(--neutral-800)]/20 border-b border-[var(--neutral-800)]">
-                  <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Member
-                  </th>
-                  <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Plan
-                  </th>
-                  <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Status
-                  </th>
-                  <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Period
-                  </th>
-                  <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Base Fee
-                  </th>
-                  <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Donation
-                  </th>
-                  <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Total
-                  </th>
-                  <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Details
-                  </th>
-                  <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {filteredSubscriptions.length > 0 ? (
-                  filteredSubscriptions.map((sub) => {
-                    const isExpanded = expandedRows.has(sub.id);
-                    return (
-                      <React.Fragment key={sub.id}>
-                        <tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
-                          <td className="p-4">
-                            <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                              {sub.user.first_name} {sub.user.last_name}
-                            </div>
-                            <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                              {sub.user.email}
-                            </div>
-                          </td>
-                          <td className="p-4">
-                            <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                              {sub.plan.name}
-                            </div>
-                            <div className="text-xs text-brand-purple ">
-                              {sub.plan.billing_cycle}
-                            </div>
-                          </td>
-                          <td className="p-4">
-                            <StatusBadge status={sub.status} />
-
-                          </td>
-                          <td className="p-4">
-                            <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                              <div>{formatDate(sub.start_date)}</div>
-                              <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
-                            </div>
-                          </td>
-                          <td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                            {formatPrice(sub.base_subscription_cents || 0)}
-                          </td>
-                          <td className="p-4 text-right text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                            {formatPrice(sub.donation_cents || 0)}
-                          </td>
-                          <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                            {formatPrice(sub.amount_paid_cents || 0)}
-                          </td>
-                          <td className="p-4">
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              onClick={() => toggleRowExpansion(sub.id)}
-                              className="text-brand-purple  hover:bg-[var(--neutral-800)]"
-                            >
-                              {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-                            </Button>
-                          </td>
-                          <td className="p-4">
-                            <div className="flex items-center justify-center gap-2">
-                              {hasPermission('subscriptions.edit') && (
-                                <Button
-                                  size="sm"
-                                  variant="outline"
-                                  onClick={() => handleEdit(sub)}
-                                  className="text-brand-purple  hover:bg-[var(--neutral-800)]"
-                                >
-                                  <Edit className="h-4 w-4" />
-                                </Button>
-                              )}
-                              {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
-                                <Button
-                                  size="sm"
-                                  variant="outline-destructive"
-                                  onClick={() => handleCancelSubscription(sub.id)}
-                                  className=""
-                                >
-                                  <XCircle className="h-4 w-4" />
-                                </Button>
-                              )}
-                            </div>
-                          </td>
-                        </tr>
-                        {/* Expandable Details Row */}
-                        {isExpanded && (
-                          <tr className="bg-[var(--lavender-400)]/30">
-                            <td colSpan="9" className="p-6">
-                              <div className="space-y-4">
-                                <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                                  Transaction Details
-                                </h4>
-                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                  {/* Payment Information */}
-                                  <div className="space-y-3">
-                                    <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                                      <CreditCard className="h-4 w-4" />
-                                      Payment Information
-                                    </h5>
-                                    <div className="space-y-2 text-sm">
-                                      {sub.payment_completed_at && (
-                                        <div className="flex justify-between">
-                                          <span className="text-brand-purple ">Payment Date:</span>
-                                          <span className="text-[var(--purple-ink)] font-medium">{formatDateTime(sub.payment_completed_at)}</span>
-                                        </div>
-                                      )}
-                                      {sub.payment_method && (
-                                        <div className="flex justify-between">
-                                          <span className="text-brand-purple ">Payment Method:</span>
-                                          <span className="text-[var(--purple-ink)] font-medium capitalize">{sub.payment_method}</span>
-                                        </div>
-                                      )}
-                                      {sub.card_brand && sub.card_last4 && (
-                                        <div className="flex justify-between">
-                                          <span className="text-brand-purple ">Card:</span>
-                                          <span className="text-[var(--purple-ink)] font-medium">{sub.card_brand} ****{sub.card_last4}</span>
-                                        </div>
-                                      )}
-                                    </div>
-                                  </div>
-
-                                  {/* Stripe Transaction IDs */}
-                                  <div className="space-y-3">
-                                    <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                                      <Info className="h-4 w-4" />
-                                      Stripe Transaction IDs
-                                    </h5>
-                                    <div className="space-y-2 text-sm">
-                                      {sub.stripe_payment_intent_id && (
-                                        <div className="flex items-center justify-between gap-2">
-                                          <span className="text-brand-purple ">Payment Intent:</span>
-                                          <div className="flex items-center gap-1">
-                                            <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
-                                              {sub.stripe_payment_intent_id.substring(0, 20)}...
-                                            </code>
-                                            <Button
-                                              size="sm"
-                                              variant="ghost"
-                                              onClick={() => copyToClipboard(sub.stripe_payment_intent_id, 'Payment Intent ID')}
-                                            >
-                                              <Copy className="h-3 w-3" />
-                                            </Button>
-                                          </div>
-                                        </div>
-                                      )}
-                                      {sub.stripe_charge_id && (
-                                        <div className="flex items-center justify-between gap-2">
-                                          <span className="text-brand-purple ">Charge ID:</span>
-                                          <div className="flex items-center gap-1">
-                                            <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
-                                              {sub.stripe_charge_id.substring(0, 20)}...
-                                            </code>
-                                            <Button
-                                              size="sm"
-                                              variant="ghost"
-                                              onClick={() => copyToClipboard(sub.stripe_charge_id, 'Charge ID')}
-                                            >
-                                              <Copy className="h-3 w-3" />
-                                            </Button>
-                                          </div>
-                                        </div>
-                                      )}
-                                      {sub.stripe_subscription_id && (
-                                        <div className="flex items-center justify-between gap-2">
-                                          <span className="text-brand-purple ">Subscription ID:</span>
-                                          <div className="flex items-center gap-1">
-                                            <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
-                                              {sub.stripe_subscription_id.substring(0, 20)}...
-                                            </code>
-                                            <Button
-                                              size="sm"
-                                              variant="ghost"
-                                              onClick={() => copyToClipboard(sub.stripe_subscription_id, 'Subscription ID')}
-                                            >
-                                              <Copy className="h-3 w-3" />
-                                            </Button>
-                                          </div>
-                                        </div>
-                                      )}
-                                      {sub.stripe_invoice_id && (
-                                        <div className="flex items-center justify-between gap-2">
-                                          <span className="text-brand-purple ">Invoice ID:</span>
-                                          <div className="flex items-center gap-1">
-                                            <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
-                                              {sub.stripe_invoice_id.substring(0, 20)}...
-                                            </code>
-                                            <Button
-                                              size="sm"
-                                              variant="ghost"
-                                              onClick={() => copyToClipboard(sub.stripe_invoice_id, 'Invoice ID')}
-                                            >
-                                              <Copy className="h-3 w-3" />
-                                            </Button>
-                                          </div>
-                                        </div>
-                                      )}
-                                      {sub.stripe_customer_id && (
-                                        <div className="flex items-center justify-between gap-2">
-                                          <span className="text-brand-purple ">Customer ID:</span>
-                                          <div className="flex items-center gap-1">
-                                            <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
-                                              {sub.stripe_customer_id.substring(0, 20)}...
-                                            </code>
-                                            <Button
-                                              size="sm"
-                                              variant="ghost"
-                                              onClick={() => copyToClipboard(sub.stripe_customer_id, 'Customer ID')}
-                                            >
-                                              <Copy className="h-3 w-3" />
-                                            </Button>
-                                          </div>
-                                        </div>
-                                      )}
-                                      {sub.stripe_receipt_url && (
-                                        <div className="flex items-center justify-between gap-2">
-                                          <span className="text-brand-purple ">Receipt:</span>
-                                          <Button
-                                            size="sm"
-                                            variant="outline"
-                                            onClick={() => window.open(sub.stripe_receipt_url, '_blank')}
-                                            className="text-brand-purple  hover:bg-[var(--neutral-800)]"
-                                          >
-                                            <ExternalLink className="h-3 w-3 mr-1" />
-                                            View Receipt
-                                          </Button>
-                                        </div>
-                                      )}
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </td>
-                          </tr>
-                        )}
-                      </React.Fragment>
-                    );
-                  })
-                ) : (
-                  <tr>
-                    <td colSpan="9" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      No subscriptions found
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
+            <SubscriptionsTable
+              subscriptions={filteredSubscriptions}
+              expandedRows={expandedRows}
+              onToggleRowExpansion={toggleRowExpansion}
+              onEdit={handleEdit}
+              onCancel={handleCancelSubscription}
+              hasPermission={hasPermission}
+              formatDate={formatDate}
+              formatDateTime={formatDateTime}
+              formatPrice={formatPrice}
+              copyToClipboard={copyToClipboard}
+            />
           </div>
         </Card>
 

src/pages/admin/AdminValidations.js

@@ -18,6 +18,12 @@ import {
   TableRow,
   TableCell,
 } from '../../components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../components/ui/tooltip';
 import {
   Pagination,
   PaginationContent,
@@ -417,7 +423,7 @@ const AdminValidations = () => {
           <Card className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
             <Table>
               <TableHeader>
-                <TableRow>
+                <TableRow className="text-md">
                   <TableHead
                     className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                     onClick={() => handleSort('first_name')}
@@ -482,8 +488,8 @@ const AdminValidations = () => {
                           onValueChange={(action) => handleActionSelect(user, action)}
                           disabled={actionLoading === user.id || resendLoading === user.id}
                         >
-                          <SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
-                            <SelectValue placeholder={actionLoading === user.id || resendLoading === user.id ? 'Processing...' : 'Select Action'} />
+                          <SelectTrigger className="w-[100px] h-9 border-[var(--neutral-800)]">
+                            <SelectValue placeholder={actionLoading === user.id || resendLoading === user.id ? 'Processing...' : 'Action'} />
                           </SelectTrigger>
                           <SelectContent>
                             {user.status === 'rejected' ? (
@@ -521,7 +527,10 @@ const AdminValidations = () => {
                             )}
                           </SelectContent>
                         </Select>
+                        <TooltipProvider>
                           {/* view registration */}
+                          <Tooltip>
+                            <TooltipTrigger asChild>
                               <Button
                                 onClick={() => handleRegistrationDialog(user)}
                                 disabled={actionLoading === user.id}
@@ -531,9 +540,16 @@ const AdminValidations = () => {
                               >
                                 <FileText className="size-4" />
                               </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              View registration
+                            </TooltipContent>
+                          </Tooltip>
 
                           {/* reject */}
                           {hasPermission('users.approve') && (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
                                 <Button
                                   onClick={() => handleRejectUser(user)}
                                   disabled={actionLoading === user.id}
@@ -543,7 +559,13 @@ const AdminValidations = () => {
                                 >
                                   X
                                 </Button>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                Reject user
+                              </TooltipContent>
+                            </Tooltip>
                           )}
+                        </TooltipProvider>
 
                       </div>
                     </TableCell>