feat(messaging): Add broadcast messaging system for owners and managers
- Add BroadcastMessage and MessageRecipient models for sending messages to groups or individuals - Add Messages page with compose form and sent messages list - Support targeting by role (owners, managers, staff, customers) or individual users - Add can_send_messages permission (owners always, managers by default with revocable permission) - Add autofill search dropdown with infinite scroll for selecting individual recipients - Add staff permission toggle for managers' messaging access - Integrate Messages link in sidebar for users with permission 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -41,6 +41,7 @@ const Scheduler = React.lazy(() => import('./pages/Scheduler'));
|
||||
const Customers = React.lazy(() => import('./pages/Customers'));
|
||||
const Settings = React.lazy(() => import('./pages/Settings'));
|
||||
const Payments = React.lazy(() => import('./pages/Payments'));
|
||||
const Messages = React.lazy(() => import('./pages/Messages'));
|
||||
const Resources = React.lazy(() => import('./pages/Resources'));
|
||||
const Services = React.lazy(() => import('./pages/Services'));
|
||||
const Staff = React.lazy(() => import('./pages/Staff'));
|
||||
@@ -861,11 +862,8 @@ const AppContent: React.FC = () => {
|
||||
<Route
|
||||
path="/messages"
|
||||
element={
|
||||
hasAccess(['owner', 'manager']) ? (
|
||||
<div className="p-8">
|
||||
<h1 className="text-2xl font-bold mb-4">Messages</h1>
|
||||
<p className="text-gray-600">Messages feature coming soon...</p>
|
||||
</div>
|
||||
hasAccess(['owner', 'manager']) && user?.can_send_messages ? (
|
||||
<Messages />
|
||||
) : (
|
||||
<Navigate to="/" />
|
||||
)
|
||||
|
||||
@@ -47,6 +47,7 @@ export interface LoginResponse {
|
||||
business?: number;
|
||||
business_name?: string;
|
||||
business_subdomain?: string;
|
||||
can_send_messages?: boolean;
|
||||
};
|
||||
masquerade_stack?: MasqueradeStackEntry[];
|
||||
// MFA challenge response
|
||||
@@ -73,6 +74,7 @@ export interface User {
|
||||
can_invite_staff?: boolean;
|
||||
can_access_tickets?: boolean;
|
||||
can_edit_schedule?: boolean;
|
||||
can_send_messages?: boolean;
|
||||
linked_resource_id?: number;
|
||||
quota_overages?: QuotaOverage[];
|
||||
}
|
||||
@@ -134,3 +136,11 @@ export const stopMasquerade = async (
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
/**
|
||||
* Request password reset email
|
||||
*/
|
||||
export const forgotPassword = async (email: string): Promise<{ message: string }> => {
|
||||
const response = await apiClient.post<{ message: string }>('/auth/password-reset/', { email });
|
||||
return response.data;
|
||||
};
|
||||
|
||||
@@ -46,6 +46,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
|
||||
const isStaff = role === 'staff';
|
||||
const canViewSettings = role === 'owner';
|
||||
const canViewTickets = role === 'owner' || role === 'manager' || (role === 'staff' && user.can_access_tickets);
|
||||
const canSendMessages = user.can_send_messages === true;
|
||||
|
||||
const handleSignOut = () => {
|
||||
logoutMutation.mutate();
|
||||
@@ -195,9 +196,9 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
|
||||
)}
|
||||
|
||||
{/* Communicate Section - Tickets + Messages */}
|
||||
{(canViewTickets || canViewAdminPages) && (
|
||||
{(canViewTickets || canSendMessages) && (
|
||||
<SidebarSection title={t('nav.sections.communicate', 'Communicate')} isCollapsed={isCollapsed}>
|
||||
{canViewAdminPages && (
|
||||
{canSendMessages && (
|
||||
<SidebarItem
|
||||
to="/messages"
|
||||
icon={MessageSquare}
|
||||
|
||||
@@ -68,6 +68,15 @@ export const PERMISSION_CONFIGS: PermissionConfig[] = [
|
||||
defaultValue: false,
|
||||
roles: ['manager'],
|
||||
},
|
||||
{
|
||||
key: 'can_send_messages',
|
||||
labelKey: 'staff.canSendMessages',
|
||||
labelDefault: 'Can send broadcast messages',
|
||||
hintKey: 'staff.canSendMessagesHint',
|
||||
hintDefault: 'Send messages to groups of staff and customers',
|
||||
defaultValue: true,
|
||||
roles: ['manager'],
|
||||
},
|
||||
// Staff-only permissions
|
||||
{
|
||||
key: 'can_view_all_schedules',
|
||||
|
||||
@@ -491,9 +491,31 @@
|
||||
"reactivateAccount": "Reactivate Account",
|
||||
"deactivateHint": "Prevent this user from logging in while keeping their data",
|
||||
"reactivateHint": "Allow this user to log in again",
|
||||
"canSendMessages": "Can send broadcast messages",
|
||||
"canSendMessagesHint": "Send messages to groups of staff and customers",
|
||||
"deactivate": "Deactivate",
|
||||
"canInviteStaff": "Can invite new staff members",
|
||||
"canInviteStaffHint": "Allow this manager to send invitations to new staff members",
|
||||
"canManageResources": "Can manage resources",
|
||||
"canManageResourcesHint": "Create, edit, and delete bookable resources",
|
||||
"canManageServices": "Can manage services",
|
||||
"canManageServicesHint": "Create, edit, and delete service offerings",
|
||||
"canViewReports": "Can view reports",
|
||||
"canViewReportsHint": "Access business analytics and financial reports",
|
||||
"canAccessSettings": "Can access business settings",
|
||||
"canAccessSettingsHint": "Modify business profile, branding, and configuration",
|
||||
"canRefundPayments": "Can refund payments",
|
||||
"canRefundPaymentsHint": "Process refunds for customer payments",
|
||||
"canViewAllSchedules": "Can view all schedules",
|
||||
"canViewAllSchedulesHint": "View schedules of other staff members (otherwise only their own)",
|
||||
"canManageOwnAppointments": "Can manage own appointments",
|
||||
"canManageOwnAppointmentsHint": "Create, reschedule, and cancel their own appointments",
|
||||
"canSelfApproveTimeOff": "Can self-approve time off",
|
||||
"canSelfApproveTimeOffHint": "Add time off without requiring manager/owner approval"
|
||||
"canSelfApproveTimeOffHint": "Add time off without requiring manager/owner approval",
|
||||
"canAccessTickets": "Can access support tickets",
|
||||
"canAccessTicketsHint": "View and manage customer support tickets",
|
||||
"managerPermissions": "Manager Permissions",
|
||||
"staffPermissions": "Staff Permissions"
|
||||
},
|
||||
"staffDashboard": {
|
||||
"welcomeTitle": "Welcome, {{name}}!",
|
||||
|
||||
842
frontend/src/pages/Messages.tsx
Normal file
842
frontend/src/pages/Messages.tsx
Normal file
@@ -0,0 +1,842 @@
|
||||
import React, { useState, useMemo, useRef, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '../api/client';
|
||||
import {
|
||||
MessageSquare,
|
||||
Send,
|
||||
Users,
|
||||
Mail,
|
||||
Smartphone,
|
||||
Bell,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
Eye,
|
||||
AlertCircle,
|
||||
X,
|
||||
Loader2,
|
||||
Search,
|
||||
UserPlus
|
||||
} from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
// Types
|
||||
interface BroadcastMessage {
|
||||
id: string;
|
||||
subject: string;
|
||||
body: string;
|
||||
target_roles: string[];
|
||||
target_users: string[];
|
||||
delivery_method: 'IN_APP' | 'EMAIL' | 'SMS' | 'ALL';
|
||||
status: 'DRAFT' | 'SENDING' | 'SENT' | 'FAILED';
|
||||
total_recipients: number;
|
||||
delivered_count: number;
|
||||
read_count: number;
|
||||
created_at: string;
|
||||
sent_at: string | null;
|
||||
created_by: string;
|
||||
created_by_name: string;
|
||||
}
|
||||
|
||||
interface RecipientOption {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
interface RecipientOptionsResponse {
|
||||
users: RecipientOption[];
|
||||
}
|
||||
|
||||
type TabType = 'compose' | 'sent';
|
||||
|
||||
const Messages: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// State
|
||||
const [activeTab, setActiveTab] = useState<TabType>('compose');
|
||||
const [subject, setSubject] = useState('');
|
||||
const [body, setBody] = useState('');
|
||||
const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
|
||||
const [selectedUsers, setSelectedUsers] = useState<RecipientOption[]>([]);
|
||||
const [deliveryMethod, setDeliveryMethod] = useState<'IN_APP' | 'EMAIL' | 'SMS' | 'ALL'>('IN_APP');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<'ALL' | 'SENT' | 'SENDING' | 'FAILED'>('ALL');
|
||||
const [selectedMessage, setSelectedMessage] = useState<BroadcastMessage | null>(null);
|
||||
const [recipientSearchTerm, setRecipientSearchTerm] = useState('');
|
||||
const [isRecipientDropdownOpen, setIsRecipientDropdownOpen] = useState(false);
|
||||
const [visibleRecipientCount, setVisibleRecipientCount] = useState(20);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Queries
|
||||
const { data: messages = [], isLoading: messagesLoading } = useQuery<BroadcastMessage[]>({
|
||||
queryKey: ['broadcast-messages'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/messages/broadcast-messages/');
|
||||
return response.data;
|
||||
},
|
||||
});
|
||||
|
||||
const { data: recipientOptions, isLoading: recipientsLoading } = useQuery<RecipientOptionsResponse>({
|
||||
queryKey: ['message-recipient-options'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/messages/broadcast-messages/recipient_options/');
|
||||
return response.data;
|
||||
},
|
||||
});
|
||||
|
||||
// Mutations
|
||||
const createMessage = useMutation({
|
||||
mutationFn: async (data: {
|
||||
subject: string;
|
||||
body: string;
|
||||
target_roles: string[];
|
||||
target_users: string[];
|
||||
delivery_method: string;
|
||||
}) => {
|
||||
const response = await api.post('/messages/broadcast-messages/', data);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['broadcast-messages'] });
|
||||
// Auto-send the message
|
||||
sendMessage.mutate(data.id);
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error.response?.data?.error || 'Failed to create message');
|
||||
},
|
||||
});
|
||||
|
||||
const sendMessage = useMutation({
|
||||
mutationFn: async (messageId: string) => {
|
||||
const response = await api.post(`/messages/broadcast-messages/${messageId}/send/`);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['broadcast-messages'] });
|
||||
toast.success('Message sent successfully!');
|
||||
resetForm();
|
||||
setActiveTab('sent');
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error.response?.data?.error || 'Failed to send message');
|
||||
},
|
||||
});
|
||||
|
||||
// Handlers
|
||||
const handleRoleToggle = (role: string) => {
|
||||
setSelectedRoles((prev) =>
|
||||
prev.includes(role) ? prev.filter((r) => r !== role) : [...prev, role]
|
||||
);
|
||||
};
|
||||
|
||||
const handleAddUser = (user: RecipientOption) => {
|
||||
if (!selectedUsers.find(u => u.id === user.id)) {
|
||||
setSelectedUsers((prev) => [...prev, user]);
|
||||
}
|
||||
// Clear search and close dropdown for tag-style input
|
||||
setRecipientSearchTerm('');
|
||||
setIsRecipientDropdownOpen(false);
|
||||
};
|
||||
|
||||
const handleRemoveUser = (userId: string) => {
|
||||
setSelectedUsers((prev) => prev.filter((u) => u.id !== userId));
|
||||
};
|
||||
|
||||
const handleDropdownScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
||||
const target = e.target as HTMLDivElement;
|
||||
const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
|
||||
|
||||
// Load more when within 50px of bottom
|
||||
if (scrollBottom < 50) {
|
||||
setVisibleRecipientCount((prev) => prev + 20);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validation
|
||||
if (!subject.trim()) {
|
||||
toast.error('Subject is required');
|
||||
return;
|
||||
}
|
||||
if (!body.trim()) {
|
||||
toast.error('Message body is required');
|
||||
return;
|
||||
}
|
||||
if (selectedRoles.length === 0 && selectedUsers.length === 0) {
|
||||
toast.error('Please select at least one recipient');
|
||||
return;
|
||||
}
|
||||
|
||||
createMessage.mutate({
|
||||
subject,
|
||||
body,
|
||||
target_roles: selectedRoles,
|
||||
target_users: selectedUsers.map(u => u.id),
|
||||
delivery_method: deliveryMethod,
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setSubject('');
|
||||
setBody('');
|
||||
setSelectedRoles([]);
|
||||
setSelectedUsers([]);
|
||||
setDeliveryMethod('IN_APP');
|
||||
setRecipientSearchTerm('');
|
||||
setIsRecipientDropdownOpen(false);
|
||||
setVisibleRecipientCount(20);
|
||||
};
|
||||
|
||||
// Computed
|
||||
const roleOptions = [
|
||||
{ value: 'owner', label: 'All Owners', icon: Users },
|
||||
{ value: 'manager', label: 'All Managers', icon: Users },
|
||||
{ value: 'staff', label: 'All Staff', icon: Users },
|
||||
{ value: 'customer', label: 'All Customers', icon: Users },
|
||||
];
|
||||
|
||||
const deliveryMethodOptions = [
|
||||
{ value: 'IN_APP' as const, label: 'In-App Only', icon: Bell },
|
||||
{ value: 'EMAIL' as const, label: 'Email Only', icon: Mail },
|
||||
{ value: 'SMS' as const, label: 'SMS Only', icon: Smartphone },
|
||||
{ value: 'ALL' as const, label: 'All Channels', icon: MessageSquare },
|
||||
];
|
||||
|
||||
const filteredMessages = useMemo(() => {
|
||||
let filtered = messages;
|
||||
|
||||
// Status filter
|
||||
if (statusFilter !== 'ALL') {
|
||||
filtered = filtered.filter((msg) => msg.status === statusFilter);
|
||||
}
|
||||
|
||||
// Search filter
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
filtered = filtered.filter(
|
||||
(msg) =>
|
||||
msg.subject.toLowerCase().includes(term) ||
|
||||
msg.body.toLowerCase().includes(term) ||
|
||||
msg.created_by_name.toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [messages, statusFilter, searchTerm]);
|
||||
|
||||
const filteredRecipients = useMemo(() => {
|
||||
if (!recipientOptions) return [];
|
||||
|
||||
// Filter out already selected users
|
||||
const selectedIds = selectedUsers.map(u => u.id);
|
||||
let filtered = recipientOptions.users.filter(u => !selectedIds.includes(u.id));
|
||||
|
||||
// Apply search filter
|
||||
if (recipientSearchTerm) {
|
||||
const term = recipientSearchTerm.toLowerCase();
|
||||
filtered = filtered.filter(
|
||||
(user) =>
|
||||
user.name.toLowerCase().includes(term) ||
|
||||
user.email.toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [recipientOptions, recipientSearchTerm, selectedUsers]);
|
||||
|
||||
const recipientCount = useMemo(() => {
|
||||
let count = 0;
|
||||
|
||||
// Count users from selected roles
|
||||
if (recipientOptions) {
|
||||
selectedRoles.forEach((role) => {
|
||||
count += recipientOptions.users.filter((u) => u.role === role).length;
|
||||
});
|
||||
}
|
||||
|
||||
// Add individually selected users (avoid double counting)
|
||||
const roleUserIds = recipientOptions?.users
|
||||
.filter((u) => selectedRoles.includes(u.role))
|
||||
.map((u) => u.id) || [];
|
||||
|
||||
count += selectedUsers.filter((u) => !roleUserIds.includes(u.id)).length;
|
||||
|
||||
return count;
|
||||
}, [selectedRoles, selectedUsers, recipientOptions]);
|
||||
|
||||
const getDeliveryMethodIcon = (method: string) => {
|
||||
switch (method) {
|
||||
case 'IN_APP': return <Bell size={16} />;
|
||||
case 'EMAIL': return <Mail size={16} />;
|
||||
case 'SMS': return <Smartphone size={16} />;
|
||||
case 'ALL': return <MessageSquare size={16} />;
|
||||
default: return <Bell size={16} />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'SENT':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
|
||||
<CheckCircle2 size={12} />
|
||||
Sent
|
||||
</span>
|
||||
);
|
||||
case 'SENDING':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
Sending
|
||||
</span>
|
||||
);
|
||||
case 'FAILED':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
|
||||
<AlertCircle size={12} />
|
||||
Failed
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
|
||||
<Clock size={12} />
|
||||
Draft
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string | null) => {
|
||||
if (!dateStr) return 'Not sent';
|
||||
return new Intl.DateTimeFormat('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
}).format(new Date(dateStr));
|
||||
};
|
||||
|
||||
const getTargetDescription = (message: BroadcastMessage) => {
|
||||
const parts: string[] = [];
|
||||
|
||||
if (message.target_roles.length > 0) {
|
||||
const roleLabels = message.target_roles.map((role) => {
|
||||
const option = roleOptions.find((opt) => opt.value === role);
|
||||
return option?.label || role;
|
||||
});
|
||||
parts.push(...roleLabels);
|
||||
}
|
||||
|
||||
if (message.target_users.length > 0) {
|
||||
parts.push(`${message.target_users.length} individual user(s)`);
|
||||
}
|
||||
|
||||
return parts.join(', ');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">Broadcast Messages</h2>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Send messages to staff and customers
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-gray-200 dark:border-gray-700">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
<button
|
||||
onClick={() => setActiveTab('compose')}
|
||||
className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'compose'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare size={18} />
|
||||
Compose
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('sent')}
|
||||
className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'sent'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Send size={18} />
|
||||
Sent Messages
|
||||
{messages.length > 0 && (
|
||||
<span className="ml-2 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
||||
{messages.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Compose Tab */}
|
||||
{activeTab === 'compose' && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
||||
{/* Subject */}
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Subject *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Enter message subject..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div>
|
||||
<label htmlFor="body" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="body"
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
rows={8}
|
||||
className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-700 dark:text-white resize-none"
|
||||
placeholder="Enter your message..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Target Roles */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Target Groups
|
||||
</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{roleOptions.map((role) => (
|
||||
<label
|
||||
key={role.value}
|
||||
className={`flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
|
||||
selectedRoles.includes(role.value)
|
||||
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
|
||||
: 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedRoles.includes(role.value)}
|
||||
onChange={() => handleRoleToggle(role.value)}
|
||||
className="w-5 h-5 text-brand-600 border-gray-300 rounded focus:ring-brand-500"
|
||||
/>
|
||||
<role.icon size={20} className="text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{role.label}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Individual Recipients */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Individual Recipients (Optional)
|
||||
</label>
|
||||
|
||||
{/* Autofill Search */}
|
||||
<div className="relative">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
value={recipientSearchTerm}
|
||||
onChange={(e) => {
|
||||
setRecipientSearchTerm(e.target.value);
|
||||
setVisibleRecipientCount(20);
|
||||
setIsRecipientDropdownOpen(e.target.value.length > 0);
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (recipientSearchTerm.length > 0) {
|
||||
setIsRecipientDropdownOpen(true);
|
||||
}
|
||||
}}
|
||||
placeholder="Type to search recipients..."
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
{recipientsLoading && recipientSearchTerm && (
|
||||
<Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 animate-spin" size={18} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dropdown Results */}
|
||||
{isRecipientDropdownOpen && recipientSearchTerm && !recipientsLoading && (
|
||||
<>
|
||||
{/* Click outside to close */}
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setIsRecipientDropdownOpen(false)}
|
||||
/>
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
onScroll={handleDropdownScroll}
|
||||
className="absolute z-20 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-72 overflow-y-auto"
|
||||
>
|
||||
{filteredRecipients.length === 0 ? (
|
||||
<p className="text-center py-4 text-gray-500 dark:text-gray-400 text-sm">
|
||||
No matching users found
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
{filteredRecipients.slice(0, visibleRecipientCount).map((user) => (
|
||||
<button
|
||||
key={user.id}
|
||||
type="button"
|
||||
onClick={() => handleAddUser(user)}
|
||||
className="w-full flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors border-b border-gray-100 dark:border-gray-700 last:border-b-0 text-left"
|
||||
>
|
||||
<UserPlus size={18} className="text-gray-400 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
||||
{user.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
{user.email}
|
||||
</p>
|
||||
</div>
|
||||
<span className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 capitalize flex-shrink-0">
|
||||
{user.role}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{filteredRecipients.length > visibleRecipientCount && (
|
||||
<div className="text-center py-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
<Loader2 size={16} className="inline-block animate-spin mr-2" />
|
||||
Scroll for more...
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Selected Users List */}
|
||||
{selectedUsers.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{selectedUsers.map((user) => (
|
||||
<div
|
||||
key={user.id}
|
||||
className="inline-flex items-center gap-2 px-3 py-1.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 rounded-full text-sm"
|
||||
>
|
||||
<span className="font-medium">{user.name}</span>
|
||||
<span className="text-brand-500 dark:text-brand-400 text-xs">({user.role})</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveUser(user.id)}
|
||||
className="ml-1 p-0.5 hover:bg-brand-200 dark:hover:bg-brand-800 rounded-full transition-colors"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Delivery Method */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
||||
Delivery Method
|
||||
</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{deliveryMethodOptions.map((option) => (
|
||||
<label
|
||||
key={option.value}
|
||||
className={`flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
|
||||
deliveryMethod === option.value
|
||||
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
|
||||
: 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="delivery_method"
|
||||
value={option.value}
|
||||
checked={deliveryMethod === option.value}
|
||||
onChange={(e) => setDeliveryMethod(e.target.value as any)}
|
||||
className="w-5 h-5 text-brand-600 border-gray-300 focus:ring-brand-500"
|
||||
/>
|
||||
<option.icon size={20} className="text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{option.label}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recipient Count */}
|
||||
{recipientCount > 0 && (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 text-blue-800 dark:text-blue-300">
|
||||
<Users size={18} />
|
||||
<span className="font-medium">
|
||||
This message will be sent to approximately {recipientCount} recipient{recipientCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetForm}
|
||||
disabled={createMessage.isPending || sendMessage.isPending}
|
||||
className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMessage.isPending || sendMessage.isPending}
|
||||
className="inline-flex items-center gap-2 px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{createMessage.isPending || sendMessage.isPending ? (
|
||||
<>
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send size={18} />
|
||||
Send Message
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sent Messages Tab */}
|
||||
{activeTab === 'sent' && (
|
||||
<div className="space-y-4">
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search messages..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as any)}
|
||||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-800 dark:text-white"
|
||||
>
|
||||
<option value="ALL">All Statuses</option>
|
||||
<option value="SENT">Sent</option>
|
||||
<option value="SENDING">Sending</option>
|
||||
<option value="FAILED">Failed</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Messages List */}
|
||||
{messagesLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<Loader2 className="mx-auto h-12 w-12 animate-spin text-brand-500" />
|
||||
</div>
|
||||
) : filteredMessages.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<MessageSquare className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<p className="mt-4 text-gray-500 dark:text-gray-400">
|
||||
{searchTerm || statusFilter !== 'ALL' ? 'No messages found' : 'No messages sent yet'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filteredMessages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow cursor-pointer"
|
||||
onClick={() => setSelectedMessage(message)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
|
||||
{message.subject}
|
||||
</h3>
|
||||
{getStatusBadge(message.status)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
|
||||
{message.body}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Users size={14} />
|
||||
<span>{getTargetDescription(message)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{getDeliveryMethodIcon(message.delivery_method)}
|
||||
<span className="capitalize">{message.delivery_method.toLowerCase().replace('_', ' ')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Clock size={14} />
|
||||
<span>{formatDate(message.sent_at || message.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-2 text-right">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
By {message.created_by_name}
|
||||
</div>
|
||||
{message.status === 'SENT' && (
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-1">
|
||||
<Send size={12} />
|
||||
<span>{message.delivered_count}/{message.total_recipients}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye size={12} />
|
||||
<span>{message.read_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Message Detail Modal */}
|
||||
{selectedMessage && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-6 flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{selectedMessage.subject}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3">
|
||||
{getStatusBadge(selectedMessage.status)}
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{formatDate(selectedMessage.sent_at || selectedMessage.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedMessage(null)}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Message Body */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
||||
Message
|
||||
</h4>
|
||||
<p className="text-gray-900 dark:text-gray-100 whitespace-pre-wrap">
|
||||
{selectedMessage.body}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Recipients */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
||||
Recipients
|
||||
</h4>
|
||||
<p className="text-gray-900 dark:text-gray-100">
|
||||
{getTargetDescription(selectedMessage)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Delivery Method */}
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
||||
Delivery Method
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
|
||||
{getDeliveryMethodIcon(selectedMessage.delivery_method)}
|
||||
<span className="capitalize">
|
||||
{selectedMessage.delivery_method.toLowerCase().replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Statistics */}
|
||||
{selectedMessage.status === 'SENT' && (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{selectedMessage.total_recipients}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Total Recipients
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
|
||||
<div className="text-2xl font-bold text-green-700 dark:text-green-400">
|
||||
{selectedMessage.delivered_count}
|
||||
</div>
|
||||
<div className="text-sm text-green-600 dark:text-green-500">
|
||||
Delivered
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
|
||||
<div className="text-2xl font-bold text-blue-700 dark:text-blue-400">
|
||||
{selectedMessage.read_count}
|
||||
</div>
|
||||
<div className="text-sm text-blue-600 dark:text-blue-500">
|
||||
Read
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sender */}
|
||||
<div className="pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Sent by <span className="font-medium text-gray-900 dark:text-white">{selectedMessage.created_by_name}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Messages;
|
||||
@@ -39,6 +39,7 @@ export interface PlanPermissions {
|
||||
white_label: boolean;
|
||||
custom_oauth: boolean;
|
||||
plugins: boolean;
|
||||
can_create_plugins: boolean;
|
||||
tasks: boolean;
|
||||
export_data: boolean;
|
||||
video_conferencing: boolean;
|
||||
@@ -124,8 +125,10 @@ export interface User {
|
||||
notification_preferences?: NotificationPreferences;
|
||||
can_invite_staff?: boolean;
|
||||
can_access_tickets?: boolean;
|
||||
can_send_messages?: boolean;
|
||||
can_edit_schedule?: boolean;
|
||||
linked_resource_id?: number;
|
||||
linked_resource_name?: string;
|
||||
permissions?: Record<string, boolean>;
|
||||
quota_overages?: QuotaOverage[];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user