Update New Features

src/pages/members/MembersDirectory.js

@@ -0,0 +1,295 @@
+import React, { useState, useEffect } from 'react';
+import api from '../../utils/api';
+import Navbar from '../../components/Navbar';
+import MemberFooter from '../../components/MemberFooter';
+import { Card } from '../../components/ui/card';
+import { Input } from '../../components/ui/input';
+import { Badge } from '../../components/ui/badge';
+import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin } from 'lucide-react';
+import { useToast } from '../../hooks/use-toast';
+
+const MembersDirectory = () => {
+  const [members, setMembers] = useState([]);
+  const [filteredMembers, setFilteredMembers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(true);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    fetchMembers();
+  }, []);
+
+  useEffect(() => {
+    filterMembers();
+  }, [searchQuery, members]);
+
+  const fetchMembers = async () => {
+    try {
+      const response = await api.get('/members/directory');
+      setMembers(response.data);
+      setFilteredMembers(response.data);
+    } catch (error) {
+      console.error('Failed to fetch members:', error);
+      toast({
+        title: "Error",
+        description: "Failed to load members directory. Please try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filterMembers = () => {
+    if (!searchQuery.trim()) {
+      setFilteredMembers(members);
+      return;
+    }
+
+    const query = searchQuery.toLowerCase();
+    const filtered = members.filter(member => {
+      const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+      const bio = (member.directory_bio || '').toLowerCase();
+      return fullName.includes(query) || bio.includes(query);
+    });
+
+    setFilteredMembers(filtered);
+  };
+
+  const getInitials = (firstName, lastName) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+  };
+
+  const getSocialMediaLink = (url) => {
+    if (!url) return null;
+    // Ensure URL has protocol
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      return `https://${url}`;
+    }
+    return url;
+  };
+
+  const MemberCard = ({ member }) => (
+    <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-all h-full">
+      {/* Profile Photo */}
+      <div className="flex justify-center mb-4">
+        {member.profile_photo_url ? (
+          <img
+            src={member.profile_photo_url}
+            alt={`${member.first_name} ${member.last_name}`}
+            className="w-32 h-32 rounded-full object-cover border-4 border-[#ddd8eb]"
+          />
+        ) : (
+          <div className="w-32 h-32 rounded-full bg-[#DDD8EB] border-4 border-[#ddd8eb] flex items-center justify-center">
+            <span className="text-4xl font-semibold text-[#664fa3]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              {getInitials(member.first_name, member.last_name)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Name */}
+      <h3 className="text-2xl font-semibold text-[#422268] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+        {member.first_name} {member.last_name}
+      </h3>
+
+      {/* Partner Name */}
+      {member.directory_partner_name && (
+        <div className="flex items-center justify-center gap-2 mb-4">
+          <Heart className="h-4 w-4 text-[#ff9e77]" />
+          <span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Partner: {member.directory_partner_name}
+          </span>
+        </div>
+      )}
+
+      {/* Bio */}
+      {member.directory_bio && (
+        <p className="text-[#664fa3] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          {member.directory_bio}
+        </p>
+      )}
+
+      {/* Contact Information */}
+      <div className="space-y-3 mb-4">
+        {member.directory_email && (
+          <div className="flex items-center gap-2 text-sm">
+            <Mail className="h-4 w-4 text-[#664fa3] flex-shrink-0" />
+            <a
+              href={`mailto:${member.directory_email}`}
+              className="text-[#664fa3] hover:text-[#422268] truncate"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              {member.directory_email}
+            </a>
+          </div>
+        )}
+
+        {member.directory_phone && (
+          <div className="flex items-center gap-2 text-sm">
+            <Phone className="h-4 w-4 text-[#664fa3] flex-shrink-0" />
+            <a
+              href={`tel:${member.directory_phone}`}
+              className="text-[#664fa3] hover:text-[#422268]"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              {member.directory_phone}
+            </a>
+          </div>
+        )}
+
+        {member.directory_address && (
+          <div className="flex items-start gap-2 text-sm">
+            <MapPin className="h-4 w-4 text-[#664fa3] flex-shrink-0 mt-0.5" />
+            <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              {member.directory_address}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Social Media Links */}
+      {(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
+        <div className="pt-4 border-t border-[#ddd8eb]">
+          <div className="flex justify-center gap-3">
+            {member.social_media_facebook && (
+              <a
+                href={getSocialMediaLink(member.social_media_facebook)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                title="Facebook"
+              >
+                <Facebook className="h-5 w-5 text-[#1877F2]" />
+              </a>
+            )}
+
+            {member.social_media_instagram && (
+              <a
+                href={getSocialMediaLink(member.social_media_instagram)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                title="Instagram"
+              >
+                <Instagram className="h-5 w-5 text-[#E4405F]" />
+              </a>
+            )}
+
+            {member.social_media_twitter && (
+              <a
+                href={getSocialMediaLink(member.social_media_twitter)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                title="Twitter/X"
+              >
+                <Twitter className="h-5 w-5 text-[#1DA1F2]" />
+              </a>
+            )}
+
+            {member.social_media_linkedin && (
+              <a
+                href={getSocialMediaLink(member.social_media_linkedin)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                title="LinkedIn"
+              >
+                <Linkedin className="h-5 w-5 text-[#0A66C2]" />
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+
+  return (
+    <div className="min-h-screen bg-white">
+      <Navbar />
+
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            Members Directory
+          </h1>
+          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Connect with fellow LOAF members in our community.
+          </p>
+        </div>
+
+        {/* Search Bar */}
+        <div className="mb-8">
+          <div className="relative max-w-xl">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+            <Input
+              type="text"
+              placeholder="Search by name or bio..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-12 pr-4 py-6 text-lg border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            />
+          </div>
+          {searchQuery && (
+            <p className="mt-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
+            </p>
+          )}
+        </div>
+
+        {/* Members Grid */}
+        {loading ? (
+          <div className="text-center py-20">
+            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+          </div>
+        ) : filteredMembers.length > 0 ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {filteredMembers.map((member) => (
+              <MemberCard key={member.id} member={member} />
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-20">
+            <User className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              {searchQuery ? 'No Members Found' : 'No Members in Directory'}
+            </h3>
+            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              {searchQuery
+                ? 'Try adjusting your search query.'
+                : 'Members who opt in to the directory will appear here.'}
+            </p>
+          </div>
+        )}
+
+        {/* Info Card */}
+        {!loading && members.length > 0 && (
+          <Card className="mt-12 p-6 bg-[#F8F7FB] border-[#ddd8eb]">
+            <div className="flex items-start gap-4">
+              <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
+                <User className="h-6 w-6 text-[#664fa3]" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Want to appear in the directory?
+                </h3>
+                <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
+                  <a href="/members/profile" className="text-[#ff9e77] hover:underline font-medium">
+                    Edit your profile →
+                  </a>
+                </p>
+              </div>
+            </div>
+          </Card>
+        )}
+      </div>
+      <MemberFooter />
+    </div>
+  );
+};
+
+export default MembersDirectory;