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/pages/Dashboard.js

@@ -10,7 +10,8 @@ import MemberFooter from '../components/MemberFooter';
 import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale, Receipt, Heart, CreditCard } from 'lucide-react';
 import { toast } from 'sonner';
 import TransactionHistory from '../components/TransactionHistory';
-
+import MemberBadge from '@/components/MemberBadge';
+import useMemberTiers from '../hooks/use-member-tiers'
 
 const Dashboard = () => {
   const { user, resendVerificationEmail, refreshUser } = useAuth();
@@ -23,6 +24,7 @@ const Dashboard = () => {
   const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
   const [activeTransactionTab, setActiveTransactionTab] = useState('all');
   const joinedDate = user?.member_since || user?.created_at;
+  const { tiers, loading: tiersLoading } = useMemberTiers();
 
   useEffect(() => {
     fetchUpcomingEvents();
@@ -131,6 +133,8 @@ const Dashboard = () => {
     return messages[status] || '';
   };
 
+
+
   return (
     <div className="min-h-screen bg-background">
       <Navbar />
@@ -209,20 +213,31 @@ const Dashboard = () => {
                 Quick Info
               </h3>
               <div className="space-y-4">
+                {/* member date and badge */}
+                <div className='flex justify-between'>
+                  <div>
+                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
+                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
+                    </p>
+                  </div>
+                  {!tiersLoading && (
+                    <div className='lg:mr-10'>
+                    <MemberBadge memberSince={joinedDate} tiers={tiers} />
+                    </div>
+                  )}
+                </div>
+                {/* email */}
                 <div>
                   <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
                   <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
                 </div>
+                {/* role */}
                 <div>
                   <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
                   <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
                 </div>
-                <div>
-                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
-                  <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
-                  </p>
-                </div>
+
 
               </div>
             </Card>