Member tiers implementation intact. Icons updated to be Lucide React. Create/edit member tiers. Display member badge. Transaction history now in My profile dashboard. Adjusted Icons for badges. Added badges on my profile page

src/components/MemberBadge.js

@@ -2,15 +2,15 @@
 import React from 'react';
 import { Badge } from './ui/badge';
 import { getTierForMember } from '../utils/member-tiers';
-import { MEMBER_TIER_ICONS } from '../config/memberTierIcons';
+import { getTierIcon } from '../config/memberTierIcons';
 
 const MemberBadge = ({ memberSince, tiers }) => {
   const tier = getTierForMember(memberSince, tiers);
-  const Icon = MEMBER_TIER_ICONS[tier.icon] || MEMBER_TIER_ICONS.FaUser;
+  const Icon = getTierIcon(tier.iconKey);
 
   return (
-    <Badge className={`px-3 py-1 rounded-md text-sm flex items-center gap-2 ${tier.badgeClass}`}>
-      <Icon className="h-4 w-4" />
+    <Badge className={`px-3 py-2 rounded-md text-sm flex items-center gap-2 border hover:text-white ${tier.badgeClass}`}>
+      <Icon className="size-6" />
       {tier.label}
     </Badge>
   );

src/components/MemberCard.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Card } from './ui/card';
 import { Button } from './ui/button';
 import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
+import MemberBadge from './MemberBadge';
 
 // Helper function to get initials
 const getInitials = (firstName, lastName) => {
@@ -17,13 +18,13 @@ const getSocialMediaLink = (url) => {
     return url;
 };
 
-const MemberCard = ({ member, onViewProfile }) => {
-    const joinedDate = member.created_at;
+const MemberCard = ({ member, onViewProfile, tiers }) => {
+    const memberSince = member.member_since || member.created_at;
     return (
         <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
-            {/* Profile Photo */}
-            <div className='flex justify-end items-center'>
-               member since badge
+            {/* Member Tier Badge */}
+            <div className='flex justify-end items-center mb-2'>
+                <MemberBadge memberSince={memberSince} tiers={tiers} />
             </div>
             <div className="flex justify-center mb-4">
                 {member.profile_photo_url ? (
@@ -64,11 +65,11 @@ const MemberCard = ({ member, onViewProfile }) => {
             )}
 
             {/* Member Since */}
-            {joinedDate && (
+            {memberSince && (
                 <div className="flex items-center justify-center gap-2 mb-4">
                     <Calendar className="h-4 w-4 text-brand-purple " />
                     <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        Member since {new Date(joinedDate).toLocaleDateString('en-US', {
+                        Member since {new Date(memberSince).toLocaleDateString('en-US', {
                             month: 'long',
                             year: 'numeric'
                         })}