- Profile Picture\

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

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