2026-01-07 08:44:10 +00:00
9 changed files with 445 additions and 317 deletions
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -22,7 +22,7 @@ import {
  Scale,
  HardDrive,
  Repeat,
-  Heart
+  Heart,
 } from 'lucide-react';

 const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
@@ -269,8 +269,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
            <img
              src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
              alt="LOAF Logo"
-              className={`object-contain transition-all duration-200 ${
-                isOpen ? 'h-10 w-10' : 'h-8 w-8'
+              className={`object-contain transition-all duration-200 ${isOpen ? 'h-10 w-10' : 'h-8 w-8'
                }`}
            />
            {isOpen && (
@@ -300,7 +299,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
        </div>

        {/* Navigation */}
-        <nav className="flex-1 overflow-y-auto p-4">
+        <nav className="flex-1 overflow-y-auto p-4 scrollbar-dashboard scrollbar-x-dashboard">
          {/* Dashboard - Standalone */}
          {renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}

@@ -370,7 +369,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
        {/* User Section */}
        <div className="border-t border-[#ddd8eb] p-4 space-y-2">
          {isOpen && user && (
-            <div className="px-4 py-3 mb-2">
+            <div className="px-4 py-3 mb-2 flex justify-between items-center">
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold">
                  {user.first_name?.[0]}{user.last_name?.[0]}
@@ -384,6 +383,8 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                  </p>
                </div>
              </div>
+              <Link to='/profile'><Settings size={16} />
+              </Link>
            </div>
          )}

@@ -397,8 +398,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                </div>
                <div className="w-full bg-[#ddd8eb] rounded-full h-2">
                  <div
-                    className={`h-2 rounded-full transition-all ${
-                      storagePercentage > 90 ? 'bg-red-500' :
+                    className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
                      storagePercentage > 75 ? 'bg-yellow-500' :
                        'bg-[#81B29A]'
                      }`}
@@ -412,8 +412,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
            ) : (
              <div className="flex justify-center">
                <div className="relative group">
-                  <HardDrive className={`h-5 w-5 ${
-                    storagePercentage > 90 ? 'text-red-500' :
+                  <HardDrive className={`h-5 w-5 ${storagePercentage > 90 ? 'text-red-500' :
                    storagePercentage > 75 ? 'text-yellow-500' :
                      'text-[#664fa3]'
                    }`} />
--- a/src/components/registration/RegistrationStep4.js
+++ b/src/components/registration/RegistrationStep4.js
@@ -86,7 +86,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
            <label htmlFor="accepts_tos" className="text-sm text-gray-700" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              I agree to the{' '}
              <a
-                href="/membership/terms-of-service"
+                href="/become-a-member/terms-of-service"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
@@ -95,7 +95,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
              </a>
              {' '}and{' '}
              <a
-                href="/membership/privacy-policy"
+                href="become-a-member/privacy-policy"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
--- a/src/components/ui/tabs.jsx
+++ b/src/components/ui/tabs.jsx
@@ -1,31 +1,33 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;

 const TabsList = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "inline-flex h-full items-center justify-center rounded-lg gap-6 p-1 text-muted-foreground",
      className
    )}
-    {...props} />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;

 const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[#f1eef9] border-2 border-[#664fa3] rounded-2xl px-3 py-1 text-[#664fa3] text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
      className
    )}
-    {...props} />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

 const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
@@ -34,8 +36,9 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
-    {...props} />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;

-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/src/index.css
+++ b/src/index.css
@@ -116,3 +116,27 @@ code {
    border-bottom-color: inherit;
  }
 }
+
+@layer utilities {
+  @supports selector(::-webkit-scrollbar) {
+    .scrollbar-dashboard::-webkit-scrollbar {
+      width: 2px;
+    }
+
+    .scrollbar-dashboard::-webkit-scrollbar-thumb {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
+      height: 2px;
+    }
+
+    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
+      height: 0px;
+    }
+  }
+}
--- a/src/pages/BoardOfDirectors.js
+++ b/src/pages/BoardOfDirectors.js
@@ -12,10 +12,10 @@ const BoardOfDirectors = () => {
  ];

  const boardMembers = [
-    { name: 'Danita Cole' },
-    { name: 'Roxanne Cherico' },
-    { name: 'Lucretia Copeland' },
-    { name: 'Julie Fischer' }
+    { name: 'Danita Cole', title: 'Director' },
+    { name: 'Roxanne Cherico', title: 'Director' },
+    { name: 'Lucretia Copeland', title: 'Director' },
+    { name: 'Julie Fischer', title: 'Director' }
  ];


--- a/src/pages/TermsOfService.js
+++ b/src/pages/TermsOfService.js
@@ -2,8 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import PublicNavbar from '../components/PublicNavbar';
 import PublicFooter from '../components/PublicFooter';
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";


 export default function TermsOfService() {
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -4,7 +4,7 @@ import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
-import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle } from 'lucide-react';
+import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle,Globe } from 'lucide-react';

 const AdminDashboard = () => {
  const [stats, setStats] = useState({
@@ -56,6 +56,7 @@ const AdminDashboard = () => {

  return (
    <>
+      <div className='flex justify-between items-center'>
        <div className="mb-8">
          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            Admin Dashboard
@@ -64,6 +65,15 @@ const AdminDashboard = () => {
            Manage users, events, and membership applications.
          </p>
        </div>
+        <Link to={'/'}>
+          <Button
+            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+          >
+            <Globe />
+            View Public Site
+          </Button>
+        </Link>
+      </div>

      {/* Stats Grid */}
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -118,7 +118,7 @@ const AdminStaff = () => {
  const getStatusBadge = (status) => {
    const config = {
      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
-      inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' }
+      inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
    };

    const statusConfig = config[status] || config.inactive;
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -24,6 +24,8 @@ const MembersDirectory = () => {
  const [selectedMember, setSelectedMember] = useState(null);
  const [profileDialogOpen, setProfileDialogOpen] = useState(false);
  const { toast } = useToast();
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 12;

  useEffect(() => {
    fetchMembers();
@@ -33,6 +35,10 @@ const MembersDirectory = () => {
    filterMembers();
  }, [searchQuery, members]);

+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, members]);
+
  const fetchMembers = async () => {
    try {
      const response = await api.get('/members/directory');
@@ -66,6 +72,14 @@ const MembersDirectory = () => {
    setFilteredMembers(filtered);
  };

+  const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize));
+
+  const pageStart = (currentPage - 1) * pageSize;
+
+  const paginatedMembers = filteredMembers.slice(pageStart, pageStart + pageSize);
+
+  const totalMembers = members.length;
+
  const getInitials = (firstName, lastName) => {
    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
  };
@@ -97,9 +111,15 @@ const MembersDirectory = () => {
    if (!dateString) return null;
    return new Date(dateString).toLocaleDateString('en-US', { month: 'long', day: 'numeric' });
  };
-
+  const Border = ({ yaxis = false }) => {
+    return (
+      yaxis ?
+        <div className=' border-2 w-full border-[#664FA3] my-24' />
+        : <div className=' border-2 w-full border-[#664FA3] mb-24' />
+    )
+  }
  const MemberCard = ({ member }) => (
-    <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-all h-full">
+    <Card className="p-6 bg-white rounded-3xl border border-[#ddd8eb] hover:shadow-lg transition-all h-full">
      {/* Profile Photo */}
      <div className="flex justify-center mb-4">
        {member.profile_photo_url ? (
@@ -259,30 +279,34 @@ const MembersDirectory = () => {
  );

  return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB]">
      <Navbar />

-      <div className="max-w-7xl mx-auto px-6 py-12">
+      <div className="max-w-7xl mx-auto py-12">
+
+        {/* Header and Search bar */}
+        <div className='px-9'>
+
          {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-            Members Directory
+          <div className="m-8 mt-14 flex flex-col sm:flex-row justify-between items-center ">
+            <h1 className="text-4xl md:text-5xl font-bold text-[#422268] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              LOAF Members
            </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-            Connect with fellow LOAF members in our community.
+            <p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-[#664fa3] font-medium'>{totalMembers}</span>
            </p>
          </div>

          {/* Search Bar */}
-        <div className="mb-8">
-          <div className="relative max-w-xl">
+          <div className="mb-24 mx-10">
+            <div className="relative w-full  ">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
              <Input
                type="text"
                placeholder="Search by name or bio..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 pr-4 py-6 text-lg border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-[#664fa3] focus:ring-[#664fa3]"
                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
              />
            </div>
@@ -293,6 +317,11 @@ const MembersDirectory = () => {
            )}
          </div>

+        </div>
+        {/* Border Decoration */}
+
+        <Border />
+
        {/* Members Grid */}
        {loading ? (
          <div className="text-center py-20">
@@ -300,7 +329,7 @@ const MembersDirectory = () => {
          </div>
        ) : filteredMembers.length > 0 ? (
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {filteredMembers.map((member) => (
+            {paginatedMembers.map((member) => (
              <MemberCard key={member.id} member={member} />
            ))}
          </div>
@@ -318,6 +347,11 @@ const MembersDirectory = () => {
          </div>
        )}

+
+
+        {/* Border Decoration */}
+        <Border yaxis="true" />
+
        {/* Info Card */}
        {!loading && members.length > 0 && (
          <Card className="mt-12 p-6 bg-[#F8F7FB] border-[#ddd8eb]">
@@ -526,6 +560,66 @@ const MembersDirectory = () => {
        </DialogContent>
      </Dialog>

+
+
+      {/* Pagination */}
+      {!loading && filteredMembers.length > 0 && (
+        <div className="mt-10 flex flex-col items-center gap-4 pb-12">
+          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Showing {pageStart + 1}–{Math.min(pageStart + pageSize, filteredMembers.length)} of {filteredMembers.length}
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            <Button
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+              className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
+            >
+              First Page
+            </Button>
+            <Button
+              onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
+              disabled={currentPage === 1}
+              className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
+            >
+              Previous
+            </Button>
+
+            {Array.from({ length: totalPages }, (_, index) => {
+              const pageNumber = index + 1;
+              const isActive = pageNumber === currentPage;
+              return (
+                <Button
+                  key={pageNumber}
+                  onClick={() => setCurrentPage(pageNumber)}
+                  className={
+                    isActive
+                      ? "bg-[#664fa3] text-white hover:bg-[#422268] rounded-full"
+                      : "bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full"
+                  }
+                >
+                  {pageNumber}
+                </Button>
+              );
+            })}
+
+            <Button
+              onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
+              disabled={currentPage === totalPages}
+              className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
+            >
+              Next
+            </Button>
+            <Button
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={currentPage === totalPages}
+              className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
+            >
+              Last Page
+            </Button>
+          </div>
+        </div>
+      )}
+
      <MemberFooter />
    </div>
  );