feat: added theme success and warning colors

fix: invite member dialog box feat: email expiry date column feat: resend email verification button fix: select item text can be seen
2026-01-28 15:03:46 -06:00
parent 01722edad9
commit a247ac5219
6 changed files with 382 additions and 52 deletions
--- a/src/components/InviteMemberDialog.js
+++ b/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;
--- a/src/components/ui/select.jsx
+++ b/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
--- a/src/pages/admin/AdminMembers.js
+++ b/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}
--- a/src/pages/admin/AdminValidations.js
+++ b/src/pages/admin/AdminValidations.js
@@ -61,6 +61,9 @@ const AdminValidations = () => {
  const [sortBy, setSortBy] = useState('created_at');
  const [sortOrder, setSortOrder] = useState('desc');

+  // Resend email state
+  const [resendLoading, setResendLoading] = useState(null);
+
  useEffect(() => {
    fetchPendingUsers();
  }, []);
@@ -238,6 +241,21 @@ const AdminValidations = () => {



+  // 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) => {
    if (sortBy === column) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
@@ -279,7 +297,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 +322,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 +359,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_validation">Pending Validation</SelectItem>
-              <SelectItem value="pre_validated">Pre-Validated</SelectItem>
-              <SelectItem value="payment_pending">Payment Pending</SelectItem>
-              <SelectItem value="rejected">Rejected</SelectItem>
+              <SelectItem value="pending_email" >Awaiting Email</SelectItem>
+              <SelectItem value="pending_validation" >Pending Validation</SelectItem>
+              <SelectItem value="payment_pending" >Payment Pending</SelectItem>
+              <SelectItem value="rejected" >Rejected</SelectItem>
            </SelectContent>
          </Select>
        </div>
@@ -392,6 +401,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>
@@ -408,6 +424,11 @@ const AdminValidations = () => {
                    <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>
@@ -429,11 +450,21 @@ const AdminValidations = () => {
                                onClick={() => handleBypassAndValidateRequest(user)}
                                disabled={actionLoading === user.id}
                                size="sm"
-                                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
+                                className="bg-secondary text-[var(--purple-ink)] hover:bg-secondary/80"
                              >
                                {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
                              </Button>
                            )}
+                            {hasPermission('users.approve') && (
+                              <Button
+                                disabled={resendLoading === user.id}
+                                onClick={() => handleResendVerification(user)}
+                                size="sm"
+                                className=" bg-secondary text-[var(--purple-ink)] hover:bg-secondary/80"
+                              >
+                                {resendLoading === user.id ? 'Sending...' : 'Resend email'}
+                              </Button>
+                            )}
                            {hasPermission('users.approve') && (
                              <Button
                                onClick={() => handleRejectUser(user)}
@@ -442,7 +473,6 @@ const AdminValidations = () => {
                                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>
                            )}
@@ -455,7 +485,6 @@ const AdminValidations = () => {
                                size="sm"
                                className="btn-light-lavender"
                              >
-                                <CheckCircle className="h-4 w-4 mr-1" />
                                Activate Payment
                              </Button>
                            )}
@@ -467,7 +496,6 @@ const AdminValidations = () => {
                                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>
                            )}
@@ -492,7 +520,6 @@ const AdminValidations = () => {
                                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>
                            )}
--- a/src/styles/theme.css
+++ b/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;
--- a/tailwind.config.js
+++ b/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))',