RBAC, Permissions, and Export/Import

src/pages/members/MembersDirectory.js

@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../components/ui/dialog';
-import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
+import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
 
 const MembersDirectory = () => {
@@ -139,6 +139,17 @@ const MembersDirectory = () => {
         </p>
       )}
 
+      {/* Member Since */}
+      <div className="flex items-center justify-center gap-2 mb-4">
+        <Calendar className="h-4 w-4 text-[#664fa3]" />
+        <span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          Member since {new Date(member.member_since || member.created_at).toLocaleDateString('en-US', {
+            month: 'long',
+            year: 'numeric'
+          })}
+        </span>
+      </div>
+
       {/* Contact Information */}
       <div className="space-y-3 mb-4">
         {member.directory_email && (