+ Add This Event
+
+
+
+ Calendar Feeds
+
+
+
+ Auto-syncs your RSVP'd events
+
+
+ One-time import of all upcoming events
+
+
+ No event selected
+
+ )}
+
+ {isOpen ? (
+
+ {user?.subscription_start_date && user?.subscription_end_date && (
+ <>
+
+
+
{/* Logout Button */}
+ Storage Usage
+ {storagePercentage}%
+
+
+
+ ) : (
+ 90 ? 'bg-red-500' :
+ storagePercentage > 75 ? 'bg-yellow-500' :
+ 'bg-[#81B29A]'
+ }`}
+ style={{ width: `${storagePercentage}%` }}
+ />
+
+ + {formatBytes(storageUsed)} / {formatBytes(storageLimit)} +
+
+
+ )}
+
+ 90 ? 'text-red-500' :
+ storagePercentage > 75 ? 'text-yellow-500' :
+ 'text-[#664fa3]'
+ }`} />
+ {storagePercentage > 75 && (
+
+ )}
+ {/* Tooltip */}
+
+
+ Storage: {storagePercentage}%
+
+
+
+ Membership Period
++ {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()} +
+
+
+
+ )}
@@ -265,6 +293,7 @@ const Dashboard = () => {
)}
+ Days Remaining
++ {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days +
+
+
+ + Add to Your Calendar +
++ Never miss this event! Add it to your calendar app for reminders. +
+
-
);
};
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 8c6bb1b..a227dc1 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -7,7 +7,8 @@ import { PasswordInput } from '../components/ui/password-input';
import { Label } from '../components/ui/label';
import { Card } from '../components/ui/card';
import { toast } from 'sonner';
-import Navbar from '../components/Navbar';
+import PublicNavbar from '../components/PublicNavbar';
+import PublicFooter from '../components/PublicFooter';
import { ArrowRight, ArrowLeft } from 'lucide-react';
const Login = () => {
@@ -55,7 +56,7 @@ const Login = () => {
return (
@@ -114,6 +115,8 @@ const ForgotPassword = () => {
)}
+
+
- {/* Top Header - Auth Actions */}
-
-
- Register
-
-
- Login
-
-
-
-
- {/* Main Header - Navigation */}
-
- 
-
-
+
@@ -144,63 +109,7 @@ const Landing = () => {
- {/* Main Footer */}
-
-
- {/* Bottom Footer */}
-
+
-
+
@@ -129,6 +130,8 @@ const Login = () => {
+
+
-
@@ -284,6 +285,8 @@ const Register = () => {
+
+
-
@@ -140,6 +141,8 @@ const ResetPassword = () => {
+
+
);
};
diff --git a/src/pages/VerifyEmail.js b/src/pages/VerifyEmail.js
index 890b35b..05aa5e5 100644
--- a/src/pages/VerifyEmail.js
+++ b/src/pages/VerifyEmail.js
@@ -4,7 +4,8 @@ import axios from 'axios';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
-import Navbar from '../components/Navbar';
+import PublicNavbar from '../components/PublicNavbar';
+import PublicFooter from '../components/PublicFooter';
const API_URL = process.env.REACT_APP_BACKEND_URL;
@@ -38,7 +39,7 @@ const VerifyEmail = () => {
return (
-
@@ -98,6 +99,8 @@ const VerifyEmail = () => {
)}
+
+
);
};
diff --git a/src/pages/admin/AdminBylaws.js b/src/pages/admin/AdminBylaws.js
new file mode 100644
index 0000000..38c0d56
--- /dev/null
+++ b/src/pages/admin/AdminBylaws.js
@@ -0,0 +1,477 @@
+import React, { useEffect, useState } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { Checkbox } from '../../components/ui/checkbox';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '../../components/ui/dialog';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '../../components/ui/select';
+import { toast } from 'sonner';
+import {
+ Scale,
+ Plus,
+ Edit,
+ Trash2,
+ ExternalLink,
+ Check
+} from 'lucide-react';
+
+const AdminBylaws = () => {
+ const [bylaws, setBylaws] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+ const [selectedBylaws, setSelectedBylaws] = useState(null);
+ const [bylawsToDelete, setBylawsToDelete] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [formData, setFormData] = useState({
+ title: '',
+ version: '',
+ effective_date: '',
+ document_url: '',
+ document_type: 'google_drive',
+ is_current: false
+ });
+ const [submitting, setSubmitting] = useState(false);
+
+ useEffect(() => {
+ fetchBylaws();
+ }, []);
+
+ const fetchBylaws = async () => {
+ try {
+ const response = await api.get('/bylaws/history');
+ setBylaws(response.data);
+ } catch (error) {
+ toast.error('Failed to fetch bylaws');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleCreate = () => {
+ setSelectedBylaws(null);
+ setFormData({
+ title: 'LOAF Bylaws',
+ version: '',
+ effective_date: new Date().toISOString().split('T')[0],
+ document_url: '',
+ document_type: 'google_drive',
+ is_current: bylaws.length === 0 // Auto-check if this is the first bylaws
+ });
+ setDialogOpen(true);
+ };
+
+ const handleEdit = (bylawsDoc) => {
+ setSelectedBylaws(bylawsDoc);
+ setFormData({
+ title: bylawsDoc.title,
+ version: bylawsDoc.version,
+ effective_date: new Date(bylawsDoc.effective_date).toISOString().split('T')[0],
+ document_url: bylawsDoc.document_url,
+ document_type: bylawsDoc.document_type,
+ is_current: bylawsDoc.is_current
+ });
+ setDialogOpen(true);
+ };
+
+ const handleDelete = (bylawsDoc) => {
+ setBylawsToDelete(bylawsDoc);
+ setDeleteDialogOpen(true);
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setSubmitting(true);
+
+ try {
+ const formDataToSend = new FormData();
+ formDataToSend.append('title', formData.title);
+ formDataToSend.append('version', formData.version);
+ formDataToSend.append('effective_date', new Date(formData.effective_date).toISOString());
+ formDataToSend.append('document_type', formData.document_type);
+ formDataToSend.append('is_current', formData.is_current);
+
+ // Handle file upload or URL based on document_type
+ if (formData.document_type === 'upload') {
+ if (!uploadedFile && !selectedBylaws) {
+ toast.error('Please select a file to upload');
+ setSubmitting(false);
+ return;
+ }
+ if (uploadedFile) {
+ formDataToSend.append('file', uploadedFile);
+ }
+ } else {
+ formDataToSend.append('document_url', formData.document_url);
+ }
+
+ if (selectedBylaws) {
+ await api.put(`/admin/bylaws/${selectedBylaws.id}`, formDataToSend);
+ toast.success('Bylaws updated successfully');
+ } else {
+ await api.post('/admin/bylaws', formDataToSend);
+ toast.success('Bylaws created successfully');
+ }
+
+ setDialogOpen(false);
+ setUploadedFile(null);
+ fetchBylaws();
+ } catch (error) {
+ toast.error(error.response?.data?.detail || 'Failed to save bylaws');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const confirmDelete = async () => {
+ try {
+ await api.delete(`/admin/bylaws/${bylawsToDelete.id}`);
+ toast.success('Bylaws deleted successfully');
+ setDeleteDialogOpen(false);
+ fetchBylaws();
+ } catch (error) {
+ toast.error('Failed to delete bylaws');
+ }
+ };
+
+ const formatDate = (dateString) => {
+ return new Date(dateString).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+ };
+
+ const currentBylaws = bylaws.find(b => b.is_current);
+ const historicalBylaws = bylaws.filter(b => !b.is_current).sort((a, b) =>
+ new Date(b.effective_date) - new Date(a.effective_date)
+ );
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ return (
+ Loading bylaws...
+
+ {/* Header */}
+
+
+ ) : (
+
+
+ )}
+
+ {/* Historical Versions */}
+ {historicalBylaws.length > 0 && (
+
+ );
+};
+
+export default AdminBylaws;
diff --git a/src/pages/admin/AdminFinancials.js b/src/pages/admin/AdminFinancials.js
new file mode 100644
index 0000000..5787f7c
--- /dev/null
+++ b/src/pages/admin/AdminFinancials.js
@@ -0,0 +1,374 @@
+import React, { useEffect, useState } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '../../components/ui/dialog';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '../../components/ui/select';
+import { toast } from 'sonner';
+import {
+ DollarSign,
+ Plus,
+ Edit,
+ Trash2,
+ ExternalLink,
+ TrendingUp
+} from 'lucide-react';
+
+const AdminFinancials = () => {
+ const [reports, setReports] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+ const [selectedReport, setSelectedReport] = useState(null);
+ const [reportToDelete, setReportToDelete] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [formData, setFormData] = useState({
+ year: new Date().getFullYear(),
+ title: '',
+ document_url: '',
+ document_type: 'google_drive'
+ });
+ const [submitting, setSubmitting] = useState(false);
+
+ useEffect(() => {
+ fetchReports();
+ }, []);
+
+ const fetchReports = async () => {
+ try {
+ const response = await api.get('/financials');
+ setReports(response.data);
+ } catch (error) {
+ toast.error('Failed to fetch financial reports');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleCreate = () => {
+ setSelectedReport(null);
+ setFormData({
+ year: new Date().getFullYear(),
+ title: '',
+ document_url: '',
+ document_type: 'google_drive'
+ });
+ setDialogOpen(true);
+ };
+
+ const handleEdit = (report) => {
+ setSelectedReport(report);
+ setFormData({
+ year: report.year,
+ title: report.title,
+ document_url: report.document_url,
+ document_type: report.document_type
+ });
+ setDialogOpen(true);
+ };
+
+ const handleDelete = (report) => {
+ setReportToDelete(report);
+ setDeleteDialogOpen(true);
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setSubmitting(true);
+
+ try {
+ const formDataToSend = new FormData();
+ formDataToSend.append('year', formData.year);
+ formDataToSend.append('title', formData.title);
+ formDataToSend.append('document_type', formData.document_type);
+
+ // Handle file upload or URL based on document_type
+ if (formData.document_type === 'upload') {
+ if (!uploadedFile && !selectedReport) {
+ toast.error('Please select a file to upload');
+ setSubmitting(false);
+ return;
+ }
+ if (uploadedFile) {
+ formDataToSend.append('file', uploadedFile);
+ }
+ } else {
+ formDataToSend.append('document_url', formData.document_url);
+ }
+
+ if (selectedReport) {
+ await api.put(`/admin/financials/${selectedReport.id}`, formDataToSend);
+ toast.success('Financial report updated successfully');
+ } else {
+ await api.post('/admin/financials', formDataToSend);
+ toast.success('Financial report created successfully');
+ }
+
+ setDialogOpen(false);
+ setUploadedFile(null);
+ fetchReports();
+ } catch (error) {
+ toast.error(error.response?.data?.detail || 'Failed to save financial report');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const confirmDelete = async () => {
+ try {
+ await api.delete(`/admin/financials/${reportToDelete.id}`);
+ toast.success('Financial report deleted successfully');
+ setDeleteDialogOpen(false);
+ fetchReports();
+ } catch (error) {
+ toast.error('Failed to delete financial report');
+ }
+ };
+
+ if (loading) {
+ return (
+
+
+
+ {/* Current Bylaws */}
+ {currentBylaws ? (
+
+
+
+ + Bylaws Management +
++ Manage LOAF governing bylaws and version history +
+
+
+
+
+
+
+
+
+ + {currentBylaws.title} +
+
+
+
+
+ Version {currentBylaws.version}
+
+
+
+
+
+
+
+
+ Effective Date: {formatDate(currentBylaws.effective_date)}
+ •
+ Document Type: {currentBylaws.document_type === 'google_drive' ? 'Google Drive' : currentBylaws.document_type.toUpperCase()}
+
+ No current bylaws set
+ +
+
+ )}
+
+ {/* Create/Edit Dialog */}
+
+
+ {/* Delete Confirmation Dialog */}
+
+ + Version History ({historicalBylaws.length}) +
+
+ {historicalBylaws.map(bylawsDoc => (
+
+
+ ))}
+
+
+
+
+
+ + {bylawsDoc.title} +
+
+ Version {bylawsDoc.version}
+ •
+ Effective {formatDate(bylawsDoc.effective_date)}
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ Loading financial reports...
+
+ {/* Header */}
+
+
+ ) : (
+
+ );
+};
+
+export default AdminFinancials;
diff --git a/src/pages/admin/AdminGallery.js b/src/pages/admin/AdminGallery.js
new file mode 100644
index 0000000..723518b
--- /dev/null
+++ b/src/pages/admin/AdminGallery.js
@@ -0,0 +1,354 @@
+import React, { useState, useEffect, useRef } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { Textarea } from '../../components/ui/textarea';
+import { Badge } from '../../components/ui/badge';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '../../components/ui/select';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../components/ui/dialog';
+import { Upload, Trash2, Edit, X, ImageIcon, Calendar, MapPin } from 'lucide-react';
+import { toast } from 'sonner';
+import moment from 'moment';
+
+const AdminGallery = () => {
+ const [events, setEvents] = useState([]);
+ const [selectedEvent, setSelectedEvent] = useState(null);
+ const [galleryImages, setGalleryImages] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [uploading, setUploading] = useState(false);
+ const [editingCaption, setEditingCaption] = useState(null);
+ const [newCaption, setNewCaption] = useState('');
+ const [maxFileSize, setMaxFileSize] = useState(5242880); // Default 5MB
+ const fileInputRef = useRef(null);
+
+ useEffect(() => {
+ fetchEvents();
+ fetchConfigLimits();
+ }, []);
+
+ useEffect(() => {
+ if (selectedEvent) {
+ fetchGallery(selectedEvent);
+ }
+ }, [selectedEvent]);
+
+ const fetchEvents = async () => {
+ try {
+ const response = await api.get('/admin/events');
+ setEvents(response.data);
+ } catch (error) {
+ console.error('Failed to fetch events:', error);
+ toast.error('Failed to load events');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const fetchGallery = async (eventId) => {
+ try {
+ const response = await api.get(`/events/${eventId}/gallery`);
+ setGalleryImages(response.data);
+ } catch (error) {
+ console.error('Failed to fetch gallery:', error);
+ toast.error('Failed to load gallery');
+ }
+ };
+
+ const fetchConfigLimits = async () => {
+ try {
+ const response = await api.get('/config/limits');
+ setMaxFileSize(response.data.max_file_size_bytes);
+ } catch (error) {
+ console.error('Failed to fetch config limits:', error);
+ // Keep default value (5MB) if fetch fails
+ }
+ };
+
+ const formatFileSize = (bytes) => {
+ if (bytes < 1024) return bytes + ' B';
+ else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+ else return (bytes / 1048576).toFixed(1) + ' MB';
+ };
+
+ const handleFileSelect = async (e) => {
+ const files = Array.from(e.target.files);
+ if (files.length === 0) return;
+
+ setUploading(true);
+
+ try {
+ for (const file of files) {
+ const formData = new FormData();
+ formData.append('file', file);
+
+ await api.post(`/admin/events/${selectedEvent}/gallery`, formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data'
+ }
+ });
+ }
+
+ toast.success(`${files.length} ${files.length === 1 ? 'image' : 'images'} uploaded successfully`);
+ await fetchGallery(selectedEvent);
+ } catch (error) {
+ console.error('Failed to upload images:', error);
+ toast.error(error.response?.data?.detail || 'Failed to upload images');
+ } finally {
+ setUploading(false);
+ if (fileInputRef.current) {
+ fileInputRef.current.value = '';
+ }
+ }
+ };
+
+ const handleDeleteImage = async (imageId) => {
+ if (!window.confirm('Are you sure you want to delete this image?')) {
+ return;
+ }
+
+ try {
+ await api.delete(`/admin/event-gallery/${imageId}`);
+ toast.success('Image deleted successfully');
+ await fetchGallery(selectedEvent);
+ } catch (error) {
+ console.error('Failed to delete image:', error);
+ toast.error('Failed to delete image');
+ }
+ };
+
+ const handleUpdateCaption = async () => {
+ if (!editingCaption) return;
+
+ try {
+ await api.put(`/admin/event-gallery/${editingCaption.id}`, null, {
+ params: { caption: newCaption }
+ });
+ toast.success('Caption updated successfully');
+ setEditingCaption(null);
+ setNewCaption('');
+ await fetchGallery(selectedEvent);
+ } catch (error) {
+ console.error('Failed to update caption:', error);
+ toast.error('Failed to update caption');
+ }
+ };
+
+ const openEditCaption = (image) => {
+ setEditingCaption(image);
+ setNewCaption(image.caption || '');
+ };
+
+ return (
+
+
+
+ {/* Reports List */}
+ {reports.length === 0 ? (
+
+
+
+ + Financial Reports Management +
++ Manage annual financial reports +
+No financial reports yet
+ +
+ {reports.map(report => (
+
+
+ ))}
+
+ )}
+
+ {/* Create/Edit Dialog */}
+
+
+ {/* Delete Confirmation Dialog */}
+
+
+
+
+
+ {report.year}
+
+
+ + {report.title} +
+
+
+ {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+ {/* Gallery Grid */}
+ {selectedEvent && (
+
+
+ )}
+
+ {/* Edit Caption Dialog */}
+
+
+
+ {/* Event Selection */}
+ + Event Gallery Management +
++ Upload and manage photos for event galleries +
+
+
+
+
+
+
+
+ {selectedEvent && (
+
+
+
+
+ )}
+ + You can select multiple images. Max {formatFileSize(maxFileSize)} per image. +
+
+
+ {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
+
+
+
+ {galleryImages.length > 0 ? (
+ + Gallery Images +
+
+ {galleryImages.map((image) => (
+
+ ) : (
+
+
+ ))}
+
+ 
+
+
+ {/* Overlay with Actions */}
+
+
+
+
+
+ {/* Caption Preview */}
+ {image.caption && (
+
+
+ )}
+
+ {/* File Size */}
+ + {image.caption} +
+
+
+ + {formatFileSize(image.file_size_bytes)} +
+
+
+ )}
+ + No Images Yet +
++ Upload images to create a gallery for this event. +
+