Merge branch 'theme-provider' into dev

src/components/CreateSubscriptionDialog.js

@@ -0,0 +1,576 @@
+import React, { useState, useEffect } from 'react';
+import api from '../utils/api';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { Card } from './ui/card';
+import { toast } from 'sonner';
+import { Loader2, Repeat, Search, Calendar, Heart, X, User } from 'lucide-react';
+
+const CreateSubscriptionDialog = ({ open, onOpenChange, onSuccess }) => {
+  // Search state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [allUsers, setAllUsers] = useState([]);
+
+  // Plan state
+  const [plans, setPlans] = useState([]);
+  const [selectedPlan, setSelectedPlan] = useState(null);
+  const [useCustomPeriod, setUseCustomPeriod] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState({
+    plan_id: '',
+    amount: '',
+    payment_date: new Date().toISOString().split('T')[0],
+    payment_method: 'cash',
+    custom_period_start: new Date().toISOString().split('T')[0],
+    custom_period_end: '',
+    notes: ''
+  });
+  const [loading, setLoading] = useState(false);
+
+  // Fetch users and plans when dialog opens
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!open) return;
+
+      try {
+        const [usersResponse, plansResponse] = await Promise.all([
+          api.get('/admin/users'),
+          api.get('/admin/subscriptions/plans')
+        ]);
+        setAllUsers(usersResponse.data);
+        setPlans(plansResponse.data.filter(p => p.active));
+      } catch (error) {
+        toast.error('Failed to load data');
+      }
+    };
+
+    fetchData();
+  }, [open]);
+
+  // Filter users based on search query
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    setSearchLoading(true);
+    const query = searchQuery.toLowerCase();
+    const filtered = allUsers.filter(user =>
+      user.first_name?.toLowerCase().includes(query) ||
+      user.last_name?.toLowerCase().includes(query) ||
+      user.email?.toLowerCase().includes(query)
+    ).slice(0, 10); // Limit to 10 results
+
+    setSearchResults(filtered);
+    setSearchLoading(false);
+  }, [searchQuery, allUsers]);
+
+  // Update amount when plan changes
+  useEffect(() => {
+    if (selectedPlan && !formData.amount) {
+      const suggestedAmount = (selectedPlan.suggested_price_cents || selectedPlan.minimum_price_cents || selectedPlan.price_cents) / 100;
+      setFormData(prev => ({
+        ...prev,
+        amount: suggestedAmount.toFixed(2)
+      }));
+    }
+  }, [selectedPlan]);
+
+  // Calculate donation breakdown
+  const getAmountBreakdown = () => {
+    if (!selectedPlan || !formData.amount) return null;
+
+    const totalCents = Math.round(parseFloat(formData.amount) * 100);
+    const minimumCents = selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000;
+    const donationCents = Math.max(0, totalCents - minimumCents);
+
+    return {
+      total: totalCents,
+      base: minimumCents,
+      donation: donationCents
+    };
+  };
+
+  const formatPrice = (cents) => {
+    return `$${(cents / 100).toFixed(2)}`;
+  };
+
+  const breakdown = getAmountBreakdown();
+
+  const handleSelectUser = (user) => {
+    setSelectedUser(user);
+    setSearchQuery('');
+    setSearchResults([]);
+  };
+
+  const handleClearUser = () => {
+    setSelectedUser(null);
+    setFormData({
+      plan_id: '',
+      amount: '',
+      payment_date: new Date().toISOString().split('T')[0],
+      payment_method: 'cash',
+      custom_period_start: new Date().toISOString().split('T')[0],
+      custom_period_end: '',
+      notes: ''
+    });
+    setSelectedPlan(null);
+    setUseCustomPeriod(false);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!selectedUser) {
+      toast.error('Please select a user');
+      return;
+    }
+
+    if (!formData.plan_id) {
+      toast.error('Please select a subscription plan');
+      return;
+    }
+
+    if (!formData.amount || parseFloat(formData.amount) <= 0) {
+      toast.error('Please enter a valid payment amount');
+      return;
+    }
+
+    // Validate minimum amount
+    const amountCents = Math.round(parseFloat(formData.amount) * 100);
+    const minimumCents = selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000;
+    if (amountCents < minimumCents) {
+      toast.error(`Amount must be at least ${formatPrice(minimumCents)}`);
+      return;
+    }
+
+    if (useCustomPeriod && (!formData.custom_period_start || !formData.custom_period_end)) {
+      toast.error('Please specify both start and end dates for custom period');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const payload = {
+        plan_id: formData.plan_id,
+        amount_cents: amountCents,
+        payment_date: new Date(formData.payment_date).toISOString(),
+        payment_method: formData.payment_method,
+        override_plan_dates: useCustomPeriod,
+        notes: formData.notes || null
+      };
+
+      if (useCustomPeriod) {
+        payload.custom_period_start = new Date(formData.custom_period_start).toISOString();
+        payload.custom_period_end = new Date(formData.custom_period_end).toISOString();
+      }
+
+      await api.post(`/admin/users/${selectedUser.id}/activate-payment`, payload);
+      toast.success(`Subscription created for ${selectedUser.first_name} ${selectedUser.last_name}!`);
+
+      // Reset form
+      handleClearUser();
+      onOpenChange(false);
+      if (onSuccess) onSuccess();
+    } catch (error) {
+      const errorMessage = error.response?.data?.detail || 'Failed to create subscription';
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    handleClearUser();
+    setSearchQuery('');
+    setSearchResults([]);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
+        <DialogHeader>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Repeat className="h-6 w-6" />
+            Create Subscription
+          </DialogTitle>
+          <DialogDescription className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Search for an existing member and create a subscription with manual payment processing.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-6 py-4">
+            {/* User Search Section */}
+            {!selectedUser ? (
+              <div className="space-y-3">
+                <Label className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Search Member
+                </Label>
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple" />
+                  <Input
+                    placeholder="Search by name or email..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                  />
+                  {searchLoading && (
+                    <Loader2 className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-brand-purple" />
+                  )}
+                </div>
+
+                {/* Search Results */}
+                {searchResults.length > 0 && (
+                  <Card className="border-2 border-[var(--neutral-800)] rounded-xl overflow-hidden">
+                    <div className="max-h-60 overflow-y-auto">
+                      {searchResults.map((user) => (
+                        <button
+                          key={user.id}
+                          type="button"
+                          onClick={() => handleSelectUser(user)}
+                          className="w-full p-3 text-left hover:bg-[var(--lavender-400)] transition-colors border-b border-[var(--neutral-800)] last:border-b-0"
+                        >
+                          <div className="flex items-center gap-3">
+                            <div className="h-10 w-10 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
+                              <User className="h-5 w-5 text-brand-purple" />
+                            </div>
+                            <div>
+                              <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                {user.first_name} {user.last_name}
+                              </p>
+                              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.email}
+                              </p>
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </Card>
+                )}
+
+                {searchQuery && !searchLoading && searchResults.length === 0 && (
+                  <p className="text-sm text-brand-purple text-center py-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    No members found matching "{searchQuery}"
+                  </p>
+                )}
+              </div>
+            ) : (
+              /* Selected User Card */
+              <Card className="p-4 bg-[var(--lavender-400)] border-2 border-[var(--neutral-800)] rounded-xl">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="h-12 w-12 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
+                      <User className="h-6 w-6 text-brand-purple" />
+                    </div>
+                    <div>
+                      <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {selectedUser.first_name} {selectedUser.last_name}
+                      </p>
+                      <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {selectedUser.email}
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleClearUser}
+                    className="text-brand-purple hover:bg-[var(--neutral-800)]/20"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              </Card>
+            )}
+
+            {/* Payment Form - Only show when user is selected */}
+            {selectedUser && (
+              <>
+                {/* Plan Selection */}
+                <div className="space-y-2">
+                  <Label htmlFor="plan_id" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Subscription Plan
+                  </Label>
+                  <Select
+                    value={formData.plan_id}
+                    onValueChange={(value) => {
+                      const plan = plans.find(p => p.id === value);
+                      setSelectedPlan(plan);
+                      const suggestedAmount = plan ? (plan.suggested_price_cents || plan.minimum_price_cents || plan.price_cents) / 100 : '';
+                      setFormData({
+                        ...formData,
+                        plan_id: value,
+                        amount: suggestedAmount ? suggestedAmount.toFixed(2) : ''
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
+                      <SelectValue placeholder="Select subscription plan" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {plans.map(plan => {
+                        const minPrice = (plan.minimum_price_cents || plan.price_cents) / 100;
+                        const sugPrice = plan.suggested_price_cents ? (plan.suggested_price_cents / 100) : null;
+                        return (
+                          <SelectItem key={plan.id} value={plan.id}>
+                            {plan.name} - ${minPrice.toFixed(2)}{sugPrice && sugPrice > minPrice ? ` (Suggested: $${sugPrice.toFixed(2)})` : ''}/{plan.billing_cycle}
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                  {selectedPlan && (
+                    <p className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
+                    </p>
+                  )}
+                </div>
+
+                {/* Payment Amount */}
+                <div className="space-y-2">
+                  <Label htmlFor="amount" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Payment Amount ($)
+                  </Label>
+                  <Input
+                    id="amount"
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    placeholder="Enter amount"
+                    value={formData.amount}
+                    onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                    required
+                  />
+                  {selectedPlan && (
+                    <p className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
+                    </p>
+                  )}
+                </div>
+
+                {/* Amount Breakdown */}
+                {breakdown && breakdown.total >= breakdown.base && (
+                  <Card className="p-4 bg-[var(--lavender-400)] border border-[var(--neutral-800)]">
+                    <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="flex justify-between text-[var(--purple-ink)]">
+                        <span>Membership Fee:</span>
+                        <span className="font-semibold">{formatPrice(breakdown.base)}</span>
+                      </div>
+                      {breakdown.donation > 0 && (
+                        <div className="flex justify-between text-[var(--orange-light)]">
+                          <span className="flex items-center gap-1">
+                            <Heart className="h-4 w-4" />
+                            Additional Donation:
+                          </span>
+                          <span className="font-semibold">{formatPrice(breakdown.donation)}</span>
+                        </div>
+                      )}
+                      <div className="flex justify-between text-[var(--purple-ink)] font-bold text-base pt-2 border-t border-[var(--neutral-800)]">
+                        <span>Total:</span>
+                        <span>{formatPrice(breakdown.total)}</span>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+
+                {/* Payment Date */}
+                <div className="space-y-2">
+                  <Label htmlFor="payment_date" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Payment Date
+                  </Label>
+                  <div className="relative">
+                    <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple" />
+                    <Input
+                      id="payment_date"
+                      type="date"
+                      value={formData.payment_date}
+                      onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
+                      className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                      required
+                    />
+                  </div>
+                </div>
+
+                {/* Payment Method */}
+                <div className="space-y-2">
+                  <Label htmlFor="payment_method" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Payment Method
+                  </Label>
+                  <Select
+                    value={formData.payment_method}
+                    onValueChange={(value) => setFormData({ ...formData, payment_method: value })}
+                  >
+                    <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
+                      <SelectValue placeholder="Select payment method" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="cash">Cash</SelectItem>
+                      <SelectItem value="bank_transfer">Bank Transfer</SelectItem>
+                      <SelectItem value="check">Check</SelectItem>
+                      <SelectItem value="other">Other</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Subscription Period */}
+                <div className="space-y-3">
+                  <Label className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Subscription Period
+                  </Label>
+
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="use_custom_period"
+                      checked={useCustomPeriod}
+                      onChange={(e) => setUseCustomPeriod(e.target.checked)}
+                      className="rounded border-[var(--neutral-800)]"
+                    />
+                    <Label htmlFor="use_custom_period" className="text-sm text-brand-purple font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      Use custom dates instead of plan's billing cycle
+                    </Label>
+                  </div>
+
+                  {useCustomPeriod ? (
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="custom_period_start" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          Start Date
+                        </Label>
+                        <Input
+                          id="custom_period_start"
+                          type="date"
+                          value={formData.custom_period_start}
+                          onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
+                          className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                          required={useCustomPeriod}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="custom_period_end" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          End Date
+                        </Label>
+                        <Input
+                          id="custom_period_end"
+                          type="date"
+                          value={formData.custom_period_end}
+                          onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
+                          className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                          required={useCustomPeriod}
+                        />
+                      </div>
+                    </div>
+                  ) : (
+                    selectedPlan && (
+                      <div className="text-sm text-brand-purple bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {selectedPlan.custom_cycle_enabled ? (
+                          <>
+                            <p>
+                              <span className="font-medium text-[var(--purple-ink)]">Plan uses custom billing cycle:</span>
+                              <br />
+                              {(() => {
+                                const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+                                const startMonth = months[(selectedPlan.custom_cycle_start_month || 1) - 1];
+                                const endMonth = months[(selectedPlan.custom_cycle_end_month || 12) - 1];
+                                return `${startMonth} ${selectedPlan.custom_cycle_start_day} - ${endMonth} ${selectedPlan.custom_cycle_end_day} (recurring annually)`;
+                              })()}
+                            </p>
+                            <p className="text-xs">
+                              Subscription will end on the upcoming cycle end date based on today's date.
+                            </p>
+                          </>
+                        ) : (
+                          <p>
+                            Will use plan's billing cycle: <span className="font-medium">{selectedPlan.billing_cycle}</span>
+                            <br />
+                            Starts today, ends {selectedPlan.billing_cycle === 'monthly' ? '30 days' :
+                              selectedPlan.billing_cycle === 'quarterly' ? '90 days' :
+                                selectedPlan.billing_cycle === 'yearly' ? '1 year' :
+                                  selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
+                          </p>
+                        )}
+                      </div>
+                    )
+                  )}
+                </div>
+
+                {/* Notes */}
+                <div className="space-y-2">
+                  <Label htmlFor="notes" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Notes (Optional)
+                  </Label>
+                  <Textarea
+                    id="notes"
+                    placeholder="Additional notes about the payment..."
+                    value={formData.notes}
+                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple min-h-[100px]"
+                  />
+                </div>
+              </>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              className="rounded-xl"
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
+              disabled={loading || !selectedUser}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <Repeat className="h-4 w-4 mr-2" />
+                  Create Subscription
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CreateSubscriptionDialog;

src/components/InviteMemberDialog.js

@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import api from '../utils/api';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { toast } from 'sonner';
+import { Loader2, Mail, Copy, Check } from 'lucide-react';
+
+const InviteMemberDialog = ({ open, onOpenChange, onSuccess }) => {
+  const [formData, setFormData] = useState({
+    email: '',
+    first_name: '',
+    last_name: '',
+    phone: '',
+    role: 'admin'
+  });
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [invitationUrl, setInvitationUrl] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const [roles, setRoles] = useState([]);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+
+  // Fetch roles when dialog opens
+  useEffect(() => {
+    if (open) {
+      fetchRoles();
+    }
+  }, [open]);
+
+  const fetchRoles = async () => {
+    setLoadingRoles(true);
+    try {
+      // 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 assignable roles:', error);
+      toast.error('Failed to load roles. Please try again.');
+    } finally {
+      setLoadingRoles(false);
+    }
+  };
+
+  const handleChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: null }));
+    }
+  };
+
+  const validate = () => {
+    const newErrors = {};
+
+    if (!formData.email) {
+      newErrors.email = 'Email is required';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validate()) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await api.post('/admin/users/invite', formData);
+      toast.success('Invitation sent successfully');
+
+      // Show invitation URL
+      setInvitationUrl(response.data.invitation_url);
+
+      // Don't close dialog yet - show invitation URL first
+      if (onSuccess) onSuccess();
+    } catch (error) {
+      const errorMessage = error.response?.data?.detail || 'Failed to send invitation';
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(invitationUrl);
+    setCopied(true);
+    toast.success('Invitation link copied to clipboard');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleClose = () => {
+    // Reset form
+    setFormData({
+      email: '',
+      first_name: '',
+      last_name: '',
+      phone: '',
+      role: 'admin'
+    });
+    setInvitationUrl(null);
+    setCopied(false);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px] rounded-2xl overflow-y-auto max-h-[90vh]">
+        <DialogHeader>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Mail className="h-6 w-6" />
+            {invitationUrl ? 'Invitation Sent' : 'Invite Member'}
+          </DialogTitle>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            {invitationUrl
+              ? 'The invitation has been sent via email. You can also copy the link below.'
+              : 'Send an email invitation to join as member. They will set their own password.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {invitationUrl ? (
+          // Show invitation URL after successful send
+          <div className="py-4">
+            <Label className="text-[var(--purple-ink)] mb-2 block">Invitation Link (expires in 7 days)</Label>
+            <div className="flex gap-2">
+              <Input
+                value={invitationUrl}
+                readOnly
+                className="rounded-xl border-2 border-[var(--neutral-800)] bg-gray-50"
+              />
+              <Button
+                onClick={copyToClipboard}
+                className="rounded-xl bg-brand-purple  hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
+              >
+                {copied ? (
+                  <>
+                    <Check className="h-4 w-4 mr-2" />
+                    Copied
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4 mr-2" />
+                    Copy
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          // Show invitation form
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-6 py-4">
+              {/* Email */}
+              <div className="grid gap-2">
+                <Label htmlFor="email" className="text-[var(--purple-ink)]">
+                  Email <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => handleChange('email', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="member@example.com"
+                />
+                {errors.email && (
+                  <p className="text-sm text-red-500">{errors.email}</p>
+                )}
+              </div>
+
+              {/* First Name (Optional) */}
+              <div className="grid gap-2">
+                <Label htmlFor="first_name" className="text-[var(--purple-ink)]">
+                  First Name <span className="text-gray-400">(Optional)</span>
+                </Label>
+                <Input
+                  id="first_name"
+                  value={formData.first_name}
+                  onChange={(e) => handleChange('first_name', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="Jane"
+                />
+              </div>
+
+              {/* Last Name (Optional) */}
+              <div className="grid gap-2">
+                <Label htmlFor="last_name" className="text-[var(--purple-ink)]">
+                  Last Name <span className="text-gray-400">(Optional)</span>
+                </Label>
+                <Input
+                  id="last_name"
+                  value={formData.last_name}
+                  onChange={(e) => handleChange('last_name', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="Doe"
+                />
+              </div>
+
+              {/* Phone (Optional) */}
+              <div className="grid gap-2">
+                <Label htmlFor="phone" className="text-[var(--purple-ink)]">
+                  Phone <span className="text-gray-400">(Optional)</span>
+                </Label>
+                <Input
+                  id="phone"
+                  type="tel"
+                  value={formData.phone}
+                  onChange={(e) => handleChange('phone', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="(555) 123-4567"
+                />
+              </div>
+
+
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleClose}
+                className="rounded-xl"
+                disabled={loading}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <Mail className="h-4 w-4 mr-2" />
+                    Send Invitation
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+
+        {invitationUrl && (
+          <DialogFooter>
+            <Button
+              onClick={handleClose}
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
+            >
+              Done
+            </Button>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default InviteMemberDialog;

src/components/ViewRegistrationDialog.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { User, Mail, Phone, Calendar, UserCheck, Clock, FileText } from 'lucide-react';
+import StatusBadge from './StatusBadge';
+
+const ViewRegistrationDialog = ({ open, onOpenChange, user }) => {
+    if (!user) return null;
+
+    const formatDate = (dateString) => {
+        if (!dateString) return '—';
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    };
+
+    const formatDateTime = (dateString) => {
+        if (!dateString) return '—';
+        return new Date(dateString).toLocaleString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+
+    const formatPhoneNumber = (phone) => {
+        if (!phone) return '—';
+        const cleaned = phone.replace(/\D/g, '');
+        if (cleaned.length === 10) {
+            return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+        }
+        return phone;
+    };
+
+    const InfoRow = ({ icon: Icon, label, value }) => (
+        <div className="flex items-start gap-3 py-3 border-b border-[var(--neutral-800)] last:border-b-0">
+            <div className="h-10 w-10 rounded-lg bg-[var(--lavender-400)] flex items-center justify-center flex-shrink-0">
+                <Icon className="h-5 w-5 text-brand-purple" />
+            </div>
+            <div className="flex-1 min-w-0">
+                <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    {label}
+                </p>
+                <p className="font-medium text-[var(--purple-ink)] break-words" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    {value || '—'}
+                </p>
+            </div>
+        </div>
+    );
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[600px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
+                <DialogHeader>
+                    <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        <FileText className="h-6 w-6" />
+                        Registration Details
+                    </DialogTitle>
+                    <DialogDescription className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        View the registration information for this member application.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="py-4 space-y-4">
+                    {/* User Header Card */}
+                    <Card className="p-4 bg-[var(--lavender-400)] border-2 border-[var(--neutral-800)] rounded-xl">
+                        <div className="flex items-center gap-4">
+                            <div className="h-16 w-16 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
+                                <User className="h-8 w-8 text-brand-purple" />
+                            </div>
+                            <div className="flex-1">
+                                <p className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    {user.first_name} {user.last_name}
+                                </p>
+                                <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    {user.email}
+                                </p>
+                                <div className="mt-2">
+                                    <StatusBadge status={user.status} />
+                                </div>
+                            </div>
+                        </div>
+                    </Card>
+
+                    {/* Contact Information */}
+                    <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                        <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            Contact Information
+                        </h3>
+                        <InfoRow icon={Mail} label="Email Address" value={user.email} />
+                        <InfoRow icon={Phone} label="Phone Number" value={formatPhoneNumber(user.phone)} />
+                    </Card>
+
+                    {/* Registration Details */}
+                    <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                        <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            Registration Details
+                        </h3>
+                        <InfoRow icon={Calendar} label="Registration Date" value={formatDate(user.created_at)} />
+                        <InfoRow icon={UserCheck} label="Referred By" value={user.referred_by_member_name} />
+                        <InfoRow icon={Clock} label="Email Verification Expires" value={formatDateTime(user.email_verification_expires_at)} />
+                    </Card>
+
+                    {/* Additional Information (if available) */}
+                    {(user.address || user.city || user.state || user.zip_code) && (
+                        <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                            <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Address
+                            </h3>
+                            <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.address && <p>{user.address}</p>}
+                                {(user.city || user.state || user.zip_code) && (
+                                    <p>
+                                        {[user.city, user.state, user.zip_code].filter(Boolean).join(', ')}
+                                    </p>
+                                )}
+                            </div>
+                        </Card>
+                    )}
+
+                    {/* Notes (if available) */}
+                    {user.notes && (
+                        <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                            <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Notes
+                            </h3>
+                            <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.notes}
+                            </p>
+                        </Card>
+                    )}
+
+                    {/* Rejection Reason (if rejected) */}
+                    {user.status === 'rejected' && user.rejection_reason && (
+                        <Card className="p-4 border border-red-300 bg-red-50 dark:bg-red-500/10 rounded-xl">
+                            <h3 className="text-lg font-semibold text-red-600 mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Rejection Reason
+                            </h3>
+                            <p className="text-red-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.rejection_reason}
+                            </p>
+                        </Card>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        onClick={() => onOpenChange(false)}
+                        className="rounded-xl bg-[var(--purple-ink)] hover:bg-[var(--purple-ink)]/90 text-white"
+                    >
+                        Close
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ViewRegistrationDialog;

src/components/ui/select.jsx

@@ -83,16 +83,16 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:text-white focus:text-white",
       className
     )}
     {...props}>
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center ">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName

src/pages/admin/AdminMembers.js

@@ -17,7 +17,7 @@ import { Users, Search, User, CreditCard, Eye, CheckCircle, Calendar, AlertCircl
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import CreateMemberDialog from '../../components/CreateMemberDialog';
-import InviteStaffDialog from '../../components/InviteStaffDialog';
+import InviteMemberDialog from '../../components/InviteMemberDialog';
 import WordPressImportWizard from '../../components/WordPressImportWizard';
 import StatusBadge from '../../components/StatusBadge';
 import { StatCard } from '@/components/StatCard';
@@ -523,7 +523,7 @@ const AdminMembers = () => {
         onSuccess={refetch}
       />
 
-      <InviteStaffDialog
+      <InviteMemberDialog
         open={inviteDialogOpen}
         onOpenChange={setInviteDialogOpen}
         onSuccess={refetch}

src/pages/admin/AdminValidations.js

@@ -2,7 +2,6 @@ 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';
 import { Input } from '../../components/ui/input';
 import {
   Select,
@@ -29,12 +28,14 @@ import {
   PaginationEllipsis,
 } from '../../components/ui/pagination';
 import { toast } from 'sonner';
-import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, XCircle } from 'lucide-react';
+import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, FileText, XCircle } from 'lucide-react';
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
 import StatusBadge from '@/components/StatusBadge';
 import { StatCard } from '@/components/StatCard';
+import { Button } from '@/components/ui/button';
+import ViewRegistrationDialog from '@/components/ViewRegistrationDialog';
 
 const AdminValidations = () => {
   const { hasPermission } = useAuth();
@@ -48,6 +49,8 @@ const AdminValidations = () => {
   const [pendingAction, setPendingAction] = useState(null);
   const [rejectionDialogOpen, setRejectionDialogOpen] = useState(false);
   const [userToReject, setUserToReject] = useState(null);
+  const [viewRegistrationDialogOpen, setViewRegistrationDialogOpen] = useState(false);
+  const [selectedUserForView, setSelectedUserForView] = useState(null);
 
   // Filtering state
   const [searchQuery, setSearchQuery] = useState('');
@@ -61,6 +64,9 @@ const AdminValidations = () => {
   const [sortBy, setSortBy] = useState('created_at');
   const [sortOrder, setSortOrder] = useState('desc');
 
+  // Resend email state
+  const [resendLoading, setResendLoading] = useState(null);
+
   useEffect(() => {
     fetchPendingUsers();
   }, []);
@@ -236,6 +242,24 @@ const AdminValidations = () => {
     }
   };
 
+  const handleRegistrationDialog = (user) => {
+    setSelectedUserForView(user);
+    setViewRegistrationDialogOpen(true);
+  };
+
+  // Resend Email Handler
+  const handleResendVerification = async (user) => {
+    setResendLoading(user.id);
+    try {
+      await api.post(`/admin/users/${user.id}/resend-verification`);
+      toast.success(`Verification email sent to ${user.email}`);
+      fetchPendingUsers();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to send verification email');
+    } finally {
+      setResendLoading(null);
+    }
+  };
 
 
   const handleSort = (column) => {
@@ -261,6 +285,37 @@ const AdminValidations = () => {
       <ArrowDown className="h-4 w-4 inline ml-1" />;
   };
 
+  const formatPhoneNumber = (phone) => {
+    if (!phone) return '-';
+    const cleaned = phone.replace(/\D/g, '');
+    if (cleaned.length === 10) {
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} - ${cleaned.slice(6)}`;
+    }
+    return phone;
+  };
+
+  const handleActionSelect = (user, action) => {
+    switch (action) {
+      case 'validate':
+        handleValidateRequest(user);
+        break;
+      case 'bypass_validate':
+        handleBypassAndValidateRequest(user);
+        break;
+      case 'resend_email':
+        handleResendVerification(user);
+        break;
+      case 'activate_payment':
+        handleActivatePayment(user);
+        break;
+      case 'reactivate':
+        handleReactivateUser(user);
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <>
       {/* Header */}
@@ -279,7 +334,7 @@ const AdminValidations = () => {
         <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
           Quick Overview
         </div>
-        <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
           <StatCard
             title="Total Pending"
             value={loading ? '-' : pendingUsers.length}
@@ -304,14 +359,6 @@ const AdminValidations = () => {
             dataTestId="stat-pending-validation"
           />
 
-          <StatCard
-            title="Pre-Validated"
-            value={loading ? '-' : pendingUsers.filter(u => u.status === 'pre_validated').length}
-            icon={CheckCircle}
-            iconBgClass="text-brand-purple"
-            dataTestId="stat-pre-validated"
-          />
-
           <StatCard
             title="Payment Pending"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
@@ -349,13 +396,12 @@ const AdminValidations = () => {
             <SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]">
               <SelectValue placeholder="Filter by status" />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="">
               <SelectItem value="all">All Statuses</SelectItem>
-              <SelectItem value="pending_email">Awaiting Email</SelectItem>
+              <SelectItem value="pending_email" >Awaiting Email</SelectItem>
-              <SelectItem value="pending_validation">Pending Validation</SelectItem>
+              <SelectItem value="pending_validation" >Pending Validation</SelectItem>
-              <SelectItem value="pre_validated">Pre-Validated</SelectItem>
+              <SelectItem value="payment_pending" >Payment Pending</SelectItem>
-              <SelectItem value="payment_pending">Payment Pending</SelectItem>
+              <SelectItem value="rejected" >Rejected</SelectItem>
-              <SelectItem value="rejected">Rejected</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -376,9 +422,8 @@ const AdminValidations = () => {
                     className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                     onClick={() => handleSort('first_name')}
                   >
-                    Name {renderSortIcon('first_name')}
+                    Member {renderSortIcon('first_name')}
                   </TableHead>
-                  <TableHead>Email</TableHead>
                   <TableHead>Phone</TableHead>
                   <TableHead
                     className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
@@ -392,6 +437,13 @@ const AdminValidations = () => {
                   >
                     Registered {renderSortIcon('created_at')}
                   </TableHead>
+                  <TableHead
+                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
+                    onClick={() => handleSort('email_verification_expires_at')}
+                  >
+                    {/* TODO: change ' ' */}
+                    Validation Expiry {renderSortIcon('email_verification_expires_at')}
+                  </TableHead>
                   <TableHead>Referred By</TableHead>
                   <TableHead>Actions</TableHead>
                 </TableRow>
@@ -399,105 +451,100 @@ const AdminValidations = () => {
               <TableBody>
                 {paginatedUsers.map((user) => (
                   <TableRow key={user.id}>
-                    <TableCell className="font-medium">
+                    <TableCell className=" ">
-                      {user.first_name} {user.last_name}
+                      <div className='font-semibold'>
+
+                        {user.first_name} {user.last_name}
+                      </div>
+                      <div className='text-brand-purple'>
+                      {user.email}
+                      </div>
+
                     </TableCell>
-                    <TableCell>{user.email}</TableCell>
+                    <TableCell>{formatPhoneNumber(user.phone)}</TableCell>
-                    <TableCell>{user.phone}</TableCell>
                     <TableCell><StatusBadge status={user.status} /></TableCell>
                     <TableCell>
                       {new Date(user.created_at).toLocaleDateString()}
                     </TableCell>
+                    <TableCell>
+                      {user.email_verification_expires_at
+                        ? new Date(user.email_verification_expires_at).toLocaleString()
+                        : '—'}
+                    </TableCell>
                     <TableCell>
                       {user.referred_by_member_name || '-'}
                     </TableCell>
                     <TableCell>
-                      <div className="flex gap-2">
+                      <div className='flex gap-2 justify-between'>
-                        {user.status === 'rejected' ? (
+
+                        <Select
+                          value=""
+                          onValueChange={(action) => handleActionSelect(user, action)}
+                          disabled={actionLoading === user.id || resendLoading === user.id}
+                        >
+                          <SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
+                            <SelectValue placeholder={actionLoading === user.id || resendLoading === user.id ? 'Processing...' : 'Select Action'} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {user.status === 'rejected' ? (
+                              <SelectItem value="reactivate">Reactivate</SelectItem>
+                            ) : user.status === 'pending_email' ? (
+                              <>
+                                {hasPermission('users.approve') && (
+                                  <SelectItem value="bypass_validate">Bypass & Validate</SelectItem>
+                                )}
+                                {hasPermission('users.approve') && (
+                                  <SelectItem value="resend_email">Resend Email</SelectItem>
+                                )}
+                                {/* {hasPermission('users.approve') && (
+                                  <SelectItem value="reject">Reject</SelectItem>
+                                )} */}
+                              </>
+                            ) : user.status === 'payment_pending' ? (
+                              <>
+                                {hasPermission('subscriptions.activate') && (
+                                  <SelectItem value="activate_payment">Activate Payment</SelectItem>
+                                )}
+                                {/* {hasPermission('users.approve') && (
+                                  <SelectItem value="reject">Reject</SelectItem>
+                                )} */}
+                              </>
+                            ) : (
+                              <>
+                                {hasPermission('users.approve') && (
+                                  <SelectItem value="validate">Validate</SelectItem>
+                                )}
+                                {/* {hasPermission('users.approve') && (
+                                  <SelectItem value="reject">Reject</SelectItem>
+                                )} */}
+                              </>
+                            )}
+                          </SelectContent>
+                        </Select>
+                        {/* view registration */}
+                        <Button
+                          onClick={() => handleRegistrationDialog(user)}
+                          disabled={actionLoading === user.id}
+                          size="sm"
+                          variant="outline"
+                          className="border-2 border-primary text-primary hover:bg-red-50 dark:hover:bg-red-500/10"
+                        >
+                          <FileText className="size-4" />
+                        </Button>
+
+                        {/* reject */}
+                        {hasPermission('users.approve') && (
                           <Button
-                            onClick={() => handleReactivateUser(user)}
+                            onClick={() => handleRejectUser(user)}
                             disabled={actionLoading === user.id}
                             size="sm"
-                            className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
+                            variant="outline"
+                            className="border-2 mr-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                           >
-                            {actionLoading === user.id ? 'Reactivating...' : 'Reactivate'}
+                            X
                           </Button>
-                        ) : user.status === 'pending_email' ? (
-                          <>
-                            {hasPermission('users.approve') && (
-                              <Button
-                                onClick={() => handleBypassAndValidateRequest(user)}
-                                disabled={actionLoading === user.id}
-                                size="sm"
-                                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
-                              >
-                                {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
-                              </Button>
-                            )}
-                            {hasPermission('users.approve') && (
-                              <Button
-                                onClick={() => handleRejectUser(user)}
-                                disabled={actionLoading === user.id}
-                                size="sm"
-                                variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
-                              >
-                                <X className="h-4 w-4 mr-1" />
-                                Reject
-                              </Button>
-                            )}
-                          </>
-                        ) : user.status === 'payment_pending' ? (
-                          <>
-                            {hasPermission('subscriptions.activate') && (
-                              <Button
-                                onClick={() => handleActivatePayment(user)}
-                                size="sm"
-                                className="btn-light-lavender"
-                              >
-                                <CheckCircle className="h-4 w-4 mr-1" />
-                                Activate Payment
-                              </Button>
-                            )}
-                            {hasPermission('users.approve') && (
-                              <Button
-                                onClick={() => handleRejectUser(user)}
-                                disabled={actionLoading === user.id}
-                                size="sm"
-                                variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
-                              >
-                                <X className="h-4 w-4 mr-1" />
-                                Reject
-                              </Button>
-                            )}
-                          </>
-                        ) : (
-                          <>
-                            {hasPermission('users.approve') && (
-                              <Button
-                                onClick={() => handleValidateRequest(user)}
-                                disabled={actionLoading === user.id}
-                                size="sm"
-                                className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
-                              >
-                                {actionLoading === user.id ? 'Validating...' : 'Validate'}
-                              </Button>
-                            )}
-                            {hasPermission('users.approve') && (
-                              <Button
-                                onClick={() => handleRejectUser(user)}
-                                disabled={actionLoading === user.id}
-                                size="sm"
-                                variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
-                              >
-                                <X className="h-4 w-4 mr-1" />
-                                Reject
-                              </Button>
-                            )}
-                          </>
                         )}
+
                       </div>
                     </TableCell>
                   </TableRow>
@@ -622,6 +669,13 @@ const AdminValidations = () => {
         user={userToReject}
         loading={actionLoading !== null}
       />
+
+      {/* View Registration Dialog */}
+      <ViewRegistrationDialog
+        open={viewRegistrationDialogOpen}
+        onOpenChange={setViewRegistrationDialogOpen}
+        user={selectedUserForView}
+      />
     </>
   );
 };

src/styles/theme.css

@@ -2,32 +2,6 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 280 47% 27%;
-    --card: 0 0% 100%;
-    --card-foreground: 280 47% 27%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 280 47% 27%;
-    --primary: 280 47% 27%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 268 33% 89%;
-    --secondary-foreground: 280 47% 27%;
-    --muted: 268 43% 95%;
-    --muted-foreground: 268 35% 47%;
-    --accent: var(--brand-orange);
-    --accent-foreground: 280 47% 27%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 268 33% 89%;
-    --input: 268 33% 89%;
-    --ring: 268 35% 47%;
-    --chart-1: 268 36% 46%;
-    --chart-2: 17 100% 73%;
-    --chart-3: 268 33% 89%;
-    --chart-4: 280 44% 29%;
-    --chart-5: 268 35% 47%;
-    --radius: 0.5rem;
-
     /* =========================
      Brand Colors
      ========================= */
@@ -47,7 +21,7 @@
 
     /* 
     ==========================
-      Color Patch 
+      Social Media Colors
     ==========================
      */
 
@@ -55,6 +29,50 @@
     --blue-facebook: #1877f2;
     --blue-twitter: #1da1f2;
     --red-instagram: #e4405f;
+
+    /* =========================
+     Theme Colors
+     ========================= */
+    --background: 0 0% 100%;
+    --foreground: 280 47% 27%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 280 47% 27%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 280 47% 27%;
+
+    --primary: 280 47% 27%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: var(--brand-lavender);
+    --secondary-foreground: 280 47% 27%;
+
+    --muted: 268 43% 95%;
+    --muted-foreground: 268 35% 47%;
+
+    --accent: var(--brand-orange);
+    --accent-foreground: 280 47% 27%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --success: 147 23% 46%;
+    --success-foreground: 0 0% 98%;
+
+    --warning: var(--brand-orange);
+    --warning-foreground: 0 0% 10%;
+
+    --border: 268 33% 89%;
+    --input: 268 33% 89%;
+    --ring: 268 35% 47%;
+    --chart-1: 268 36% 46%;
+    --chart-2: 17 100% 73%;
+    --chart-3: 268 33% 89%;
+    --chart-4: 280 44% 29%;
+    --chart-5: 268 35% 47%;
+    --radius: 0.5rem;
+
     --purple-ink: #422268;
     --purple-ink-2: #422268;
     --purple-deep: #48286e;

tailwind.config.js

@@ -49,6 +49,10 @@ module.exports = {
 					DEFAULT: 'hsl(var(--success))',
 					foreground: 'hsl(var(--success-foreground))'
 				},
+				warning: {
+					DEFAULT: 'hsl(var(--warning))',
+					foreground: 'hsl(var(--warning-foreground))'
+				},
 				border: 'hsl(var(--border))',
 				input: 'hsl(var(--input))',
 				ring: 'hsl(var(--ring))',