- Profile Picture\

Donation Tracking\
Validation Rejection\
Subscription Data Export\
Admin Dashboard Logo\
Admin Navbar Reorganization

src/pages/Profile.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useAuth } from '../context/AuthContext';
 import api from '../utils/api';
 import { Card } from '../components/ui/card';
@@ -9,7 +9,8 @@ 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 } from 'lucide-react';
+import { User, Save, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2 } from 'lucide-react';
+import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
 import ChangePasswordDialog from '../components/ChangePasswordDialog';
 
 const Profile = () => {
@@ -17,6 +18,12 @@ const Profile = () => {
   const [loading, setLoading] = useState(false);
   const [profileData, setProfileData] = useState(null);
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
+  const [profilePhotoUrl, setProfilePhotoUrl] = useState(null);
+  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 [formData, setFormData] = useState({
     // Personal Information
     first_name: '',
@@ -49,13 +56,27 @@ const Profile = () => {
   });
 
   useEffect(() => {
+    fetchConfig();
     fetchProfile();
   }, []);
 
+  const fetchConfig = async () => {
+    try {
+      const response = await api.get('/config');
+      setMaxFileSizeMB(response.data.max_file_size_mb);
+      setMaxFileSizeBytes(response.data.max_file_size_bytes);
+    } catch (error) {
+      console.error('Failed to fetch config, using defaults:', error);
+      // Keep default values if fetch fails
+    }
+  };
+
   const fetchProfile = async () => {
     try {
       const response = await api.get('/users/profile');
       setProfileData(response.data);
+      setProfilePhotoUrl(response.data.profile_photo_url);
+      setPreviewImage(response.data.profile_photo_url);
       setFormData({
         // Personal Information
         first_name: response.data.first_name || '',
@@ -124,6 +145,57 @@ const Profile = () => {
     'Hospitality'
   ];
 
+  const handlePhotoUpload = async (e) => {
+    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;
+    }
+
+    setUploadingPhoto(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await api.post('/members/profile/upload-photo', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      });
+
+      setProfilePhotoUrl(response.data.profile_photo_url);
+      setPreviewImage(response.data.profile_photo_url);
+      toast.success('Profile photo updated successfully!');
+    } catch (error) {
+      toast.error('Failed to upload photo');
+    } finally {
+      setUploadingPhoto(false);
+    }
+  };
+
+  const handlePhotoDelete = async () => {
+    if (!profilePhotoUrl) return;
+
+    setUploadingPhoto(true);
+    try {
+      await api.delete('/members/profile/delete-photo');
+      setProfilePhotoUrl(null);
+      setPreviewImage(null);
+      toast.success('Profile photo deleted successfully!');
+    } catch (error) {
+      toast.error('Failed to delete photo');
+    } finally {
+      setUploadingPhoto(false);
+    }
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -205,6 +277,59 @@ const Profile = () => {
             </div>
           </div>
 
+          {/* Profile Photo Section */}
+          <div className="pb-8 mb-8 border-b border-[#ddd8eb]">
+            <h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Camera className="h-6 w-6 text-[#664fa3]" />
+              Profile Photo
+            </h2>
+            <div className="flex flex-col md:flex-row items-center gap-6">
+              <Avatar className="h-32 w-32 border-4 border-[#ddd8eb]">
+                <AvatarImage src={previewImage} alt="Profile" />
+                <AvatarFallback className="bg-[#f1eef9] text-[#664fa3] text-3xl">
+                  {profileData?.first_name?.charAt(0)}{profileData?.last_name?.charAt(0)}
+                </AvatarFallback>
+              </Avatar>
+
+              <div className="flex flex-col gap-3">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  onChange={handlePhotoUpload}
+                  className="hidden"
+                />
+
+                <Button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={uploadingPhoto}
+                  className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-6 py-3"
+                >
+                  <Upload className="h-4 w-4 mr-2" />
+                  {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
+                </Button>
+
+                {profilePhotoUrl && (
+                  <Button
+                    type="button"
+                    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"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete Photo
+                  </Button>
+                )}
+
+                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Upload a profile photo (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-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>