Update New Features

2025-12-10 17:52:47 +07:00
parent 1f27c3224b
commit 36017e8693
39 changed files with 4977 additions and 196 deletions
--- a/src/pages/members/Financials.js
+++ b/src/pages/members/Financials.js
@@ -0,0 +1,125 @@
+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 { toast } from 'sonner';
+import { DollarSign, ExternalLink, TrendingUp } from 'lucide-react';
+
+export default function Financials() {
+  const [reports, setReports] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchReports();
+  }, []);
+
+  const fetchReports = async () => {
+    try {
+      const response = await api.get('/financials');
+      setReports(response.data);
+    } catch (error) {
+      toast.error('Failed to load financial reports');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-white">
+        <Navbar />
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Loading financial reports...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-white">
+      <Navbar />
+
+      <div className="max-w-5xl mx-auto px-6 py-12">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            Financial Reports
+          </h1>
+          <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Access annual financial reports and stay informed about LOAF's fiscal responsibility.
+          </p>
+        </div>
+
+        {/* Reports List */}
+        {reports.length === 0 ? (
+          <Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb]">
+            <TrendingUp className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
+            <p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              No financial reports available yet
+            </p>
+          </Card>
+        ) : (
+          <div className="space-y-6">
+            {reports.map(report => (
+              <Card key={report.id} className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-shadow">
+                <div className="flex items-center gap-6">
+                  {/* Year Badge */}
+                  <div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-6 rounded-xl text-white min-w-[120px] text-center">
+                    <DollarSign className="h-8 w-8 mx-auto mb-2" />
+                    <div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      {report.year}
+                    </div>
+                    <div className="text-sm opacity-90">Fiscal Year</div>
+                  </div>
+
+                  {/* Report Details */}
+                  <div className="flex-1">
+                    <h3 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      {report.title}
+                    </h3>
+                    <div className="flex items-center gap-2 mb-4">
+                      <Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
+                        {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
+                      </Badge>
+                    </div>
+                    <Button
+                      onClick={() => window.open(report.document_url, '_blank')}
+                      className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+                    >
+                      <ExternalLink className="h-4 w-4" />
+                      View Report
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {/* Transparency Note */}
+        {reports.length > 0 && (
+          <Card className="mt-8 p-6 bg-[#f9f7fc] border border-[#ddd8eb]">
+            <div className="flex items-start gap-3">
+              <TrendingUp className="h-5 w-5 text-[#664fa3] mt-1" />
+              <div>
+                <h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Transparency & Accountability
+                </h4>
+                <p className="text-sm text-[#664fa3]" 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>
+  );
+}