Update New Features

src/pages/members/Bylaws.js

@@ -0,0 +1,194 @@
+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 { Scale, ExternalLink, History, Check } from 'lucide-react';
+
+export default function Bylaws() {
+  const [currentBylaws, setCurrentBylaws] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [showHistory, setShowHistory] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchCurrentBylaws();
+    fetchHistory();
+  }, []);
+
+  const fetchCurrentBylaws = async () => {
+    try {
+      const response = await api.get('/bylaws/current');
+      setCurrentBylaws(response.data);
+    } catch (error) {
+      if (error.response?.status !== 404) {
+        toast.error('Failed to load current bylaws');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchHistory = async () => {
+    try {
+      const response = await api.get('/bylaws/history');
+      setHistory(response.data);
+    } catch (error) {
+      console.error('Failed to load bylaws history');
+    }
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  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 bylaws...
+          </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" }}>
+            LOAF Bylaws
+          </h1>
+          <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Review the official governing bylaws and policies of the LOAF community.
+          </p>
+        </div>
+
+        {/* Current Bylaws */}
+        {currentBylaws ? (
+          <Card className="p-8 bg-white rounded-2xl border-2 border-[#664fa3] mb-6">
+            <div className="flex items-start gap-4 mb-6">
+              <div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-4 rounded-xl">
+                <Scale className="h-8 w-8 text-white" />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center gap-3 mb-2">
+                  <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    {currentBylaws.title}
+                  </h2>
+                  <Badge className="bg-[#81B29A] text-white">
+                    <Check className="h-3 w-3 mr-1" />
+                    Current Version
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-4 text-[#664fa3] mb-4">
+                  <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    Version: <strong>{currentBylaws.version}</strong>
+                  </span>
+                  <span>•</span>
+                  <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    Effective: <strong>{formatDate(currentBylaws.effective_date)}</strong>
+                  </span>
+                </div>
+                <Button
+                  onClick={() => window.open(currentBylaws.document_url, '_blank')}
+                  size="lg"
+                  className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+                >
+                  <ExternalLink className="h-5 w-5" />
+                  View Current Bylaws
+                </Button>
+              </div>
+            </div>
+          </Card>
+        ) : (
+          <Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb] mb-6">
+            <Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
+            <p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              No current bylaws document available
+            </p>
+          </Card>
+        )}
+
+        {/* Version History Toggle */}
+        {history.length > 1 && (
+          <div className="mb-6">
+            <Button
+              onClick={() => setShowHistory(!showHistory)}
+              variant="outline"
+              className="w-full border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center justify-center gap-2"
+            >
+              <History className="h-4 w-4" />
+              {showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
+            </Button>
+          </div>
+        )}
+
+        {/* Version History */}
+        {showHistory && history.length > 1 && (
+          <div className="space-y-4">
+            <h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              Previous Versions
+            </h3>
+            {history.filter(b => !b.is_current).map(bylaws => (
+              <Card key={bylaws.id} className="p-6 bg-[#f9f7fc] rounded-xl border border-[#ddd8eb]">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h4 className="text-lg font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      {bylaws.title}
+                    </h4>
+                    <div className="flex items-center gap-3 text-sm text-[#664fa3]">
+                      <span>Version {bylaws.version}</span>
+                      <span>•</span>
+                      <span>Effective {formatDate(bylaws.effective_date)}</span>
+                    </div>
+                  </div>
+                  <Button
+                    onClick={() => window.open(bylaws.document_url, '_blank')}
+                    variant="outline"
+                    size="sm"
+                    className="border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center gap-2"
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                    View
+                  </Button>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {/* Information Card */}
+        <Card className="mt-8 p-6 bg-[#f9f7fc] border border-[#ddd8eb]">
+          <div className="flex items-start gap-3">
+            <Scale className="h-5 w-5 text-[#664fa3] mt-1" />
+            <div>
+              <h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                About LOAF Bylaws
+              </h4>
+              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                The bylaws serve as the governing document for LOAF, outlining the organization's structure,
+                membership requirements, officer responsibilities, and operational procedures. All members are
+                encouraged to familiarize themselves with these guidelines.
+              </p>
+            </div>
+          </div>
+        </Card>
+      </div>
+      <MemberFooter />
+    </div>
+  );
+}