Merge branch 'dev' into templates

Applied requested changes to UI

.env.development

@@ -0,0 +1,3 @@
+REACT_APP_BACKEND_URL=http://localhost:8000
+REACT_APP_BASENAME=/membership
+PUBLIC_URL=/membership

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]'
                     }`} />

src/components/InviteStaffDialog.js

@@ -40,15 +40,14 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
   const fetchRoles = async () => {
     setLoadingRoles(true);
     try {
-      const response = await api.get('/admin/roles');
-      // Filter to show only admin-type roles (not guest or member)
-      const staffRoles = response.data.filter(role =>
-        ['admin', 'superadmin', 'finance'].includes(role.code) || !role.is_system_role
-      );
-      setRoles(staffRoles);
+      // New endpoint returns roles based on user's permission level
+      // Superadmin: all roles
+      // Admin: admin, finance, and non-elevated custom roles
+      const response = await api.get('/admin/roles/assignable');
+      setRoles(response.data);
     } catch (error) {
-      console.error('Failed to fetch roles:', error);
-      toast.error('Failed to load roles');
+      console.error('Failed to fetch assignable roles:', error);
+      toast.error('Failed to load roles. Please try again.');
     } finally {
       setLoadingRoles(false);
     }

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 };

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;
+    }
+  }
+}

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' }
   ];
 
 

src/pages/admin/AdminBylaws.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -32,6 +33,7 @@ import {
 } from 'lucide-react';
 
 const AdminBylaws = () => {
+  const { hasPermission } = useAuth();
   const [bylaws, setBylaws] = useState([]);
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -184,6 +186,7 @@ const AdminBylaws = () => {
             Manage LOAF governing bylaws and version history
           </p>
         </div>
+        {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
             className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
@@ -191,6 +194,7 @@ const AdminBylaws = () => {
             <Plus className="h-4 w-4" />
             Add Version
           </Button>
+        )}
       </div>
 
       {/* Current Bylaws */}
@@ -226,6 +230,7 @@ const AdminBylaws = () => {
                 <ExternalLink className="h-4 w-4 mr-1" />
                 View
               </Button>
+              {hasPermission('bylaws.edit') && (
                 <Button
                   variant="outline"
                   size="sm"
@@ -234,6 +239,8 @@ const AdminBylaws = () => {
                 >
                   <Edit className="h-4 w-4" />
                 </Button>
+              )}
+              {hasPermission('bylaws.delete') && (
                 <Button
                   variant="outline"
                   size="sm"
@@ -242,6 +249,7 @@ const AdminBylaws = () => {
                 >
                   <Trash2 className="h-4 w-4" />
                 </Button>
+              )}
             </div>
           </div>
           <div className="flex items-center gap-4 text-sm text-[#664fa3]">
@@ -254,10 +262,12 @@ const AdminBylaws = () => {
         <Card className="p-12 text-center">
           <Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
           <p className="text-[#664fa3] text-lg mb-4">No current bylaws set</p>
+          {hasPermission('bylaws.create') && (
             <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create Bylaws
             </Button>
+          )}
         </Card>
       )}
 
@@ -290,6 +300,7 @@ const AdminBylaws = () => {
                     >
                       <ExternalLink className="h-4 w-4" />
                     </Button>
+                    {hasPermission('bylaws.edit') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -298,6 +309,8 @@ const AdminBylaws = () => {
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
+                    )}
+                    {hasPermission('bylaws.delete') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -306,6 +319,7 @@ const AdminBylaws = () => {
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
+                    )}
                   </div>
                 </div>
               </Card>

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">

src/pages/admin/AdminDonations.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
@@ -31,6 +32,7 @@ import {
 } from 'lucide-react';
 
 const AdminDonations = () => {
+  const { hasPermission } = useAuth();
   const [donations, setDonations] = useState([]);
   const [filteredDonations, setFilteredDonations] = useState([]);
   const [stats, setStats] = useState({});
@@ -269,6 +271,7 @@ const AdminDonations = () => {
                 className="pl-10 rounded-full border-2 border-[#ddd8eb] focus:border-[#664fa3]"
               />
             </div>
+            {hasPermission('donations.export') && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
@@ -296,6 +299,7 @@ const AdminDonations = () => {
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
+            )}
           </div>
 
           {/* Filters Row */}

src/pages/admin/AdminFinancials.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -31,6 +32,7 @@ import {
 } from 'lucide-react';
 
 const AdminFinancials = () => {
+  const { hasPermission } = useAuth();
   const [reports, setReports] = useState([]);
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -162,6 +164,7 @@ const AdminFinancials = () => {
             Manage annual financial reports
           </p>
         </div>
+        {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
             className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
@@ -169,6 +172,7 @@ const AdminFinancials = () => {
             <Plus className="h-4 w-4" />
             Add Report
           </Button>
+        )}
       </div>
 
       {/* Reports List */}
@@ -176,10 +180,12 @@ const AdminFinancials = () => {
         <Card className="p-12 text-center">
           <TrendingUp className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
           <p className="text-[#664fa3] text-lg mb-4">No financial reports yet</p>
+          {hasPermission('financials.create') && (
             <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Report
             </Button>
+          )}
         </Card>
       ) : (
         <div className="space-y-4">
@@ -209,7 +215,9 @@ const AdminFinancials = () => {
                     </Button>
                   </div>
                 </div>
+                {(hasPermission('financials.edit') || hasPermission('financials.delete')) && (
                   <div className="flex gap-2">
+                    {hasPermission('financials.edit') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -218,6 +226,8 @@ const AdminFinancials = () => {
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
+                    )}
+                    {hasPermission('financials.delete') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -226,7 +236,9 @@ const AdminFinancials = () => {
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
+                    )}
                   </div>
+                )}
               </div>
             </Card>
           ))}

src/pages/admin/AdminGallery.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -20,6 +21,7 @@ import { toast } from 'sonner';
 import moment from 'moment';
 
 const AdminGallery = () => {
+  const { hasPermission } = useAuth();
   const [events, setEvents] = useState([]);
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [galleryImages, setGalleryImages] = useState([]);
@@ -206,7 +208,7 @@ const AdminGallery = () => {
             </div>
           )}
 
-          {selectedEvent && (
+          {selectedEvent && hasPermission('gallery.upload') && (
             <div className="pt-4">
               <input
                 type="file"
@@ -267,7 +269,9 @@ const AdminGallery = () => {
                   </div>
 
                   {/* Overlay with Actions */}
+                  {(hasPermission('gallery.edit') || hasPermission('gallery.delete')) && (
                     <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl flex flex-col items-center justify-center gap-2">
+                      {hasPermission('gallery.edit') && (
                         <Button
                           onClick={() => openEditCaption(image)}
                           size="sm"
@@ -277,6 +281,8 @@ const AdminGallery = () => {
                           <Edit className="h-4 w-4 mr-1" />
                           Caption
                         </Button>
+                      )}
+                      {hasPermission('gallery.delete') && (
                         <Button
                           onClick={() => handleDeleteImage(image.id)}
                           size="sm"
@@ -286,7 +292,9 @@ const AdminGallery = () => {
                           <Trash2 className="h-4 w-4 mr-1" />
                           Delete
                         </Button>
+                      )}
                     </div>
+                  )}
 
                   {/* Caption Preview */}
                   {image.caption && (

src/pages/admin/AdminNewsletters.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -32,6 +33,7 @@ import {
 } from 'lucide-react';
 
 const AdminNewsletters = () => {
+  const { hasPermission } = useAuth();
   const [newsletters, setNewsletters] = useState([]);
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -190,6 +192,7 @@ const AdminNewsletters = () => {
             Create and manage newsletter archive
           </p>
         </div>
+        {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
             className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
@@ -197,6 +200,7 @@ const AdminNewsletters = () => {
             <Plus className="h-4 w-4" />
             Add Newsletter
           </Button>
+        )}
       </div>
 
       {/* Newsletters List */}
@@ -204,10 +208,12 @@ const AdminNewsletters = () => {
         <Card className="p-12 text-center">
           <FileText className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
           <p className="text-[#664fa3] text-lg mb-4">No newsletters yet</p>
+          {hasPermission('newsletters.create') && (
             <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Newsletter
             </Button>
+          )}
         </Card>
       ) : (
         <div className="space-y-6">
@@ -246,7 +252,9 @@ const AdminNewsletters = () => {
                           </Button>
                         </div>
                       </div>
+                      {(hasPermission('newsletters.edit') || hasPermission('newsletters.delete')) && (
                         <div className="flex gap-2">
+                          {hasPermission('newsletters.edit') && (
                             <Button
                               variant="outline"
                               size="sm"
@@ -255,6 +263,8 @@ const AdminNewsletters = () => {
                             >
                               <Edit className="h-4 w-4" />
                             </Button>
+                          )}
+                          {hasPermission('newsletters.delete') && (
                             <Button
                               variant="outline"
                               size="sm"
@@ -263,7 +273,9 @@ const AdminNewsletters = () => {
                             >
                               <Trash2 className="h-4 w-4" />
                             </Button>
+                          )}
                         </div>
+                      )}
                     </div>
                   </Card>
                 ))}

src/pages/admin/AdminPlans.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -24,6 +25,7 @@ import {
 } from 'lucide-react';
 
 const AdminPlans = () => {
+  const { hasPermission } = useAuth();
   const [plans, setPlans] = useState([]);
   const [filteredPlans, setFilteredPlans] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -136,6 +138,7 @@ const AdminPlans = () => {
               Manage membership plans and pricing.
             </p>
           </div>
+          {hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
               className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
@@ -143,6 +146,7 @@ const AdminPlans = () => {
               <Plus className="h-4 w-4 mr-2" />
               Create Plan
             </Button>
+          )}
         </div>
       </div>
 
@@ -286,6 +290,7 @@ const AdminPlans = () => {
               </div>
 
               {/* Actions */}
+              {hasPermission('subscriptions.plans') && (
                 <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
                   <Button
                     onClick={() => handleEditPlan(plan)}
@@ -307,6 +312,7 @@ const AdminPlans = () => {
                     Delete
                   </Button>
                 </div>
+              )}
 
               {/* Warning for plans with subscribers */}
               {plan.subscriber_count > 0 && (
@@ -328,7 +334,7 @@ const AdminPlans = () => {
               ? 'Try adjusting your filters'
               : 'Create your first subscription plan to get started'}
           </p>
-          {!searchQuery && activeFilter === 'all' && (
+          {!searchQuery && activeFilter === 'all' && hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
               className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"

src/pages/admin/AdminStaff.js

@@ -16,7 +16,7 @@ import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck,
 
 const AdminStaff = () => {
   const navigate = useNavigate();
-  const { hasPermission } = useAuth();
+  const { hasPermission, user } = useAuth();
   const [users, setUsers] = useState([]);
   const [filteredUsers, setFilteredUsers] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -142,7 +142,7 @@ const AdminStaff = () => {
             </p>
           </div>
           <div className="flex gap-3">
-            {hasPermission('users.invite') && (
+            {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
                 className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl h-12 px-6"

src/pages/admin/AdminSubscriptions.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
@@ -44,6 +45,7 @@ import {
 } from '../../components/ui/dropdown-menu';
 
 const AdminSubscriptions = () => {
+  const { hasPermission } = useAuth();
   const [subscriptions, setSubscriptions] = useState([]);
   const [filteredSubscriptions, setFilteredSubscriptions] = useState([]);
   const [plans, setPlans] = useState([]);
@@ -412,6 +414,7 @@ Proceed with activation?`;
           </div>
 
           {/* Export Dropdown */}
+          {hasPermission('subscriptions.export') && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
@@ -439,6 +442,7 @@ Proceed with activation?`;
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+          )}
         </div>
       </Card>
 
@@ -503,6 +507,7 @@ Proceed with activation?`;
 
                   {/* Actions */}
                   <div className="flex gap-2 pt-2">
+                    {hasPermission('subscriptions.edit') && (
                       <Button
                         size="sm"
                         variant="outline"
@@ -512,7 +517,8 @@ Proceed with activation?`;
                         <Edit className="h-4 w-4 mr-2" />
                         Edit
                       </Button>
-                    {sub.status === 'active' && (
+                    )}
+                    {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                       <Button
                         size="sm"
                         variant="outline"
@@ -607,6 +613,7 @@ Proceed with activation?`;
                     </td>
                     <td className="p-4">
                       <div className="flex items-center justify-center gap-2">
+                        {hasPermission('subscriptions.edit') && (
                           <Button
                             size="sm"
                             variant="outline"
@@ -615,7 +622,8 @@ Proceed with activation?`;
                           >
                             <Edit className="h-4 w-4" />
                           </Button>
-                        {sub.status === 'active' && (
+                        )}
+                        {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                           <Button
                             size="sm"
                             variant="outline"

src/pages/admin/AdminValidations.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -35,6 +36,7 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
 
 const AdminValidations = () => {
+  const { hasPermission } = useAuth();
   const [pendingUsers, setPendingUsers] = useState([]);
   const [filteredUsers, setFilteredUsers] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -419,6 +421,7 @@ const AdminValidations = () => {
                           </Button>
                         ) : user.status === 'pending_email' ? (
                           <>
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleBypassAndValidateRequest(user)}
                                 disabled={actionLoading === user.id}
@@ -427,6 +430,8 @@ const AdminValidations = () => {
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
                               </Button>
+                            )}
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleRejectUser(user)}
                                 disabled={actionLoading === user.id}
@@ -437,9 +442,11 @@ const AdminValidations = () => {
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
                               </Button>
+                            )}
                           </>
                         ) : user.status === 'payment_pending' ? (
                           <>
+                            {hasPermission('subscriptions.activate') && (
                               <Button
                                 onClick={() => handleActivatePayment(user)}
                                 size="sm"
@@ -448,6 +455,8 @@ const AdminValidations = () => {
                                 <CheckCircle className="h-4 w-4 mr-1" />
                                 Activate Payment
                               </Button>
+                            )}
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleRejectUser(user)}
                                 disabled={actionLoading === user.id}
@@ -458,9 +467,11 @@ const AdminValidations = () => {
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
                               </Button>
+                            )}
                           </>
                         ) : (
                           <>
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleValidateRequest(user)}
                                 disabled={actionLoading === user.id}
@@ -469,6 +480,8 @@ const AdminValidations = () => {
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Validate'}
                               </Button>
+                            )}
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleRejectUser(user)}
                                 disabled={actionLoading === user.id}
@@ -479,6 +492,7 @@ const AdminValidations = () => {
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
                               </Button>
+                            )}
                           </>
                         )}
                       </div>

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>
   );