- Profile Picture\

Donation Tracking\
Validation Rejection\
Subscription Data Export\
Admin Dashboard Logo\
Admin Navbar Reorganization

src/components/AdminSidebar.js

@@ -21,7 +21,8 @@ import {
   DollarSign,
   Scale,
   HardDrive,
-  Repeat
+  Repeat,
+  Heart
 } from 'lucide-react';
 
 const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
@@ -123,6 +124,12 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin/subscriptions',
       disabled: false
     },
+    {
+      name: 'Donations',
+      icon: Heart,
+      path: '/admin/donations',
+      disabled: false
+    },
     {
       name: 'Events',
       icon: Calendar,
@@ -177,6 +184,73 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
     return location.pathname.startsWith(path);
   };
 
+  const renderNavItem = (item) => {
+    if (!item) return null;
+
+    const Icon = item.icon;
+    const active = isActive(item.path);
+
+    return (
+      <div key={item.name} className="relative group">
+        <Link
+          to={item.disabled ? '#' : item.path}
+          onClick={(e) => {
+            if (item.disabled) {
+              e.preventDefault();
+            }
+          }}
+          className={`
+            flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
+            ${item.disabled
+              ? 'opacity-50 cursor-not-allowed text-[#664fa3]'
+              : active
+              ? 'bg-[#ff9e77]/10 text-[#ff9e77]'
+              : 'text-[#422268] hover:bg-[#DDD8EB]/20'
+            }
+          `}
+        >
+          {/* Active border */}
+          {active && !item.disabled && (
+            <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
+          )}
+
+          <Icon className="h-5 w-5 flex-shrink-0" />
+
+          {isOpen && (
+            <>
+              <span className="flex-1">{item.name}</span>
+              {item.disabled && (
+                <Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
+                  Soon
+                </Badge>
+              )}
+              {item.badge > 0 && !item.disabled && (
+                <Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
+                  {item.badge}
+                </Badge>
+              )}
+            </>
+          )}
+
+          {/* Badge when collapsed */}
+          {!isOpen && item.badge > 0 && !item.disabled && (
+            <div className="absolute -top-1 -right-1 bg-[#ff9e77] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
+              {item.badge}
+            </div>
+          )}
+        </Link>
+
+        {/* Tooltip when collapsed */}
+        {!isOpen && (
+          <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
+            {item.name}
+            {item.badge > 0 && ` (${item.badge})`}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <>
       {/* Sidebar */}
@@ -191,14 +265,23 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       >
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-[#ddd8eb]">
-          {isOpen && (
-            <h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Admin
-            </h2>
-          )}
+          <div className="flex items-center gap-3">
+            <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'
+              }`}
+            />
+            {isOpen && (
+              <h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                Admin
+              </h2>
+            )}
+          </div>
           <button
             onClick={onToggle}
-            className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors ml-auto"
+            className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors"
             aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             {isMobile ? (
@@ -212,71 +295,71 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 overflow-y-auto p-4 space-y-2">
-          {filteredNavItems.map((item) => {
-            const Icon = item.icon;
-            const active = isActive(item.path);
+        <nav className="flex-1 overflow-y-auto p-4">
+          {/* Dashboard - Standalone */}
+          {renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
 
-            return (
-              <div key={item.name} className="relative group">
-                <Link
-                  to={item.disabled ? '#' : item.path}
-                  onClick={(e) => {
-                    if (item.disabled) {
-                      e.preventDefault();
-                    }
-                  }}
-                  className={`
-                    flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
-                    ${item.disabled
-                      ? 'opacity-50 cursor-not-allowed text-[#664fa3]'
-                      : active
-                      ? 'bg-[#ff9e77]/10 text-[#ff9e77]'
-                      : 'text-[#422268] hover:bg-[#DDD8EB]/20'
-                    }
-                  `}
-                >
-                  {/* Active border */}
-                  {active && !item.disabled && (
-                    <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
-                  )}
+          {/* MEMBERSHIP Section */}
+          {isOpen && (
+            <div className="px-4 py-2 mt-6">
+              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+                Membership
+              </h3>
+            </div>
+          )}
+          <div className="space-y-1">
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Staff'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Members'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
+          </div>
 
-                  <Icon className="h-5 w-5 flex-shrink-0" />
+          {/* FINANCIALS Section */}
+          {isOpen && (
+            <div className="px-4 py-2 mt-6">
+              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+                Financials
+              </h3>
+            </div>
+          )}
+          <div className="space-y-1">
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Plans'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Subscriptions'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Donations'))}
+          </div>
 
-                  {isOpen && (
-                    <>
-                      <span className="flex-1">{item.name}</span>
-                      {item.disabled && (
-                        <Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
-                          Soon
-                        </Badge>
-                      )}
-                      {item.badge > 0 && !item.disabled && (
-                        <Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
-                          {item.badge}
-                        </Badge>
-                      )}
-                    </>
-                  )}
+          {/* EVENTS & MEDIA Section */}
+          {isOpen && (
+            <div className="px-4 py-2 mt-6">
+              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+                Events & Media
+              </h3>
+            </div>
+          )}
+          <div className="space-y-1">
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Events'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Gallery'))}
+          </div>
 
-                  {/* Badge when collapsed */}
-                  {!isOpen && item.badge > 0 && !item.disabled && (
-                    <div className="absolute -top-1 -right-1 bg-[#ff9e77] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
-                      {item.badge}
-                    </div>
-                  )}
-                </Link>
+          {/* DOCUMENTATION Section */}
+          {isOpen && (
+            <div className="px-4 py-2 mt-6">
+              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+                Documentation
+              </h3>
+            </div>
+          )}
+          <div className="space-y-1">
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Newsletters'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Financials'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
+          </div>
 
-                {/* Tooltip when collapsed */}
-                {!isOpen && (
-                  <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
-                    {item.name}
-                    {item.badge > 0 && ` (${item.badge})`}
-                  </div>
-                )}
-              </div>
-            );
-          })}
+          {/* Permissions - Superadmin only (no header) */}
+          {user?.role === 'superadmin' && (
+            <div className="mt-6">
+              {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
+            </div>
+          )}
         </nav>
 
         {/* User Section */}

src/components/RejectionDialog.js

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+import { Label } from './ui/label';
+import { AlertTriangle, X } from 'lucide-react';
+
+export default function RejectionDialog({ open, onOpenChange, onConfirm, user, loading }) {
+  const [reason, setReason] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = () => {
+    if (!reason.trim()) {
+      setError('Rejection reason is required');
+      return;
+    }
+    onConfirm(reason);
+  };
+
+  const handleClose = () => {
+    setReason('');
+    setError('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-[#ddd8eb]">
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-3 bg-red-100 rounded-full">
+              <AlertTriangle className="h-6 w-6 text-red-600" />
+            </div>
+            <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              Reject Application
+            </DialogTitle>
+          </div>
+          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="bg-[#f9f5ff] border border-[#ddd8eb] rounded-lg p-4">
+            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <strong>Applicant:</strong> {user?.email}
+            </p>
+            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <strong>Status:</strong> {user?.status}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="reason" className="text-[#422268] font-medium">
+              Rejection Reason <span className="text-red-500">*</span>
+            </Label>
+            <Textarea
+              id="reason"
+              value={reason}
+              onChange={(e) => {
+                setReason(e.target.value);
+                setError('');
+              }}
+              placeholder="Please provide a clear reason for rejection. This will be sent to the applicant."
+              className="rounded-xl border-2 border-[#ddd8eb] focus:border-red-500 min-h-[120px]"
+              disabled={loading}
+            />
+            {error && (
+              <p className="text-sm text-red-500">{error}</p>
+            )}
+            <p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              The applicant will receive an email with this reason.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex gap-3 justify-end">
+          <Button
+            type="button"
+            onClick={handleClose}
+            variant="outline"
+            className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-6"
+            disabled={loading}
+          >
+            <X className="h-4 w-4 mr-2" />
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={handleSubmit}
+            className="bg-red-600 text-white hover:bg-red-700 rounded-full px-6"
+            disabled={loading}
+          >
+            <AlertTriangle className="h-4 w-4 mr-2" />
+            {loading ? 'Rejecting...' : 'Confirm Rejection'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}