216 lines
8.2 KiB
JavaScript
216 lines
8.2 KiB
JavaScript
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 { Button } from '../../components/ui/button';
|
|
import { Badge } from '../../components/ui/badge';
|
|
import { Input } from '../../components/ui/input';
|
|
import { toast } from 'sonner';
|
|
import { DollarSign, ExternalLink, TrendingUp, Search, Calendar } from 'lucide-react';
|
|
|
|
export default function Financials() {
|
|
const [reports, setReports] = useState([]);
|
|
const [years, setYears] = useState([]);
|
|
const [selectedYear, setSelectedYear] = useState(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchYears();
|
|
fetchReports();
|
|
}, []);
|
|
|
|
const fetchYears = async () => {
|
|
try {
|
|
const response = await api.get('/financials/years');
|
|
setYears(response.data);
|
|
} catch (error) {
|
|
console.error('Failed to load years');
|
|
}
|
|
};
|
|
|
|
const fetchReports = async (year = null) => {
|
|
try {
|
|
setLoading(true);
|
|
const url = year ? `/financials?year=${year}` : '/financials';
|
|
const response = await api.get(url);
|
|
setReports(response.data);
|
|
} catch (error) {
|
|
toast.error('Failed to load financial reports');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleYearFilter = (year) => {
|
|
setSelectedYear(year);
|
|
fetchReports(year);
|
|
};
|
|
|
|
const clearFilter = () => {
|
|
setSelectedYear(null);
|
|
fetchReports();
|
|
};
|
|
|
|
const filteredReports = reports.filter(report =>
|
|
report.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
report.year.toString().includes(searchTerm)
|
|
);
|
|
|
|
const groupByYear = (items) => {
|
|
const grouped = {};
|
|
items.forEach(item => {
|
|
const year = item.year;
|
|
if (!grouped[year]) {
|
|
grouped[year] = [];
|
|
}
|
|
grouped[year].push(item);
|
|
});
|
|
return grouped;
|
|
};
|
|
|
|
const groupedReports = groupByYear(filteredReports);
|
|
const sortedYears = Object.keys(groupedReports).sort((a, b) => b - a);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Navbar />
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Loading financial reports...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Navbar />
|
|
|
|
<div className="max-w-5xl mx-auto px-6 py-12">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Financial Reports
|
|
</h1>
|
|
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Access annual financial reports and stay informed about LOAF's fiscal responsibility.
|
|
</p>
|
|
|
|
{/* Filters */}
|
|
<div className="flex gap-4 flex-wrap items-center">
|
|
{/* Search */}
|
|
<div className="relative flex-1 min-w-[300px]">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-brand-purple " />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search financial reports..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 border-[var(--neutral-800)] focus:border-brand-purple "
|
|
/>
|
|
</div>
|
|
|
|
{/* Year Filter */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
<Button
|
|
onClick={clearFilter}
|
|
variant={selectedYear === null ? "default" : "outline"}
|
|
size="sm"
|
|
className={selectedYear === null ? "bg-brand-purple hover:bg-[var(--purple-muted)] text-white" : "border-brand-lavender text-brand-lavender "}
|
|
>
|
|
All Years
|
|
</Button>
|
|
{years.map(year => (
|
|
<Button
|
|
key={year}
|
|
onClick={() => handleYearFilter(year)}
|
|
variant={selectedYear === year ? "default" : "outline"}
|
|
size="sm"
|
|
className={selectedYear === year ? "bg-brand-purple text-white" : "border-brand-purple text-brand-purple "}
|
|
>
|
|
{year}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Reports List */}
|
|
{filteredReports.length === 0 ? (
|
|
<Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
|
|
<TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
|
|
<p className="text-brand-purple text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
No financial reports found
|
|
</p>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-8">
|
|
{sortedYears.map(year => (
|
|
<div key={year}>
|
|
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
<Calendar className="h-6 w-6" />
|
|
{year}
|
|
</h2>
|
|
<div className="space-y-6">
|
|
{groupedReports[year].map(report => (
|
|
<Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
|
|
<div className="flex items-center gap-6">
|
|
{/* Year Badge */}
|
|
<div className="bg-gradient-to-br from-brand-purple to-[var(--purple-ink)] p-4 rounded-xl self-start">
|
|
<DollarSign className="h-8 w-8 text-white" />
|
|
</div>
|
|
|
|
{/* Report Details */}
|
|
<div className="flex-1">
|
|
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
{report.title}
|
|
</h3>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Badge variant="outline" className="border-brand-purple text-brand-purple ">
|
|
{report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
|
|
</Badge>
|
|
</div>
|
|
<Button
|
|
onClick={() => window.open(report.document_url, '_blank')}
|
|
className="bg-brand-purple text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
|
|
>
|
|
<ExternalLink className="h-4 w-4" />
|
|
View Report
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Transparency Note */}
|
|
{filteredReports.length > 0 && (
|
|
<Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
|
|
<div className="flex items-start gap-3">
|
|
<TrendingUp className="h-5 w-5 text-brand-purple mt-1" />
|
|
<div>
|
|
<h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Transparency & Accountability
|
|
</h4>
|
|
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
LOAF is committed to financial transparency. These reports provide detailed information about our
|
|
revenue, expenses, and how member contributions support our community programs and operations.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
<MemberFooter />
|
|
</div>
|
|
);
|
|
}
|