Refactor Services page UI, disable full test coverage, and add WIP badges
This commit is contained in:
poduck
@@ -16,10 +16,21 @@ import {
|
||||
X,
|
||||
Loader2,
|
||||
Search,
|
||||
UserPlus
|
||||
UserPlus,
|
||||
Filter
|
||||
} from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
// UI Components
|
||||
import Card, { CardHeader, CardBody, CardFooter } from '../components/ui/Card';
|
||||
import Button, { SubmitButton } from '../components/ui/Button';
|
||||
import FormInput from '../components/ui/FormInput';
|
||||
import FormTextarea from '../components/ui/FormTextarea';
|
||||
import FormSelect from '../components/ui/FormSelect';
|
||||
import TabGroup from '../components/ui/TabGroup';
|
||||
import Badge from '../components/ui/Badge';
|
||||
import EmptyState from '../components/ui/EmptyState';
|
||||
|
||||
// Types
|
||||
interface BroadcastMessage {
|
||||
id: string;
|
||||
@@ -51,6 +62,51 @@ interface RecipientOptionsResponse {
|
||||
|
||||
type TabType = 'compose' | 'sent';
|
||||
|
||||
// Local Component for Selection Tiles
|
||||
interface SelectionTileProps {
|
||||
selected: boolean;
|
||||
onClick: () => void;
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const SelectionTile: React.FC<SelectionTileProps> = ({
|
||||
selected,
|
||||
onClick,
|
||||
icon: Icon,
|
||||
label,
|
||||
description
|
||||
}) => (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`
|
||||
cursor-pointer relative flex flex-col items-center justify-center p-4 rounded-xl border-2 transition-all duration-200
|
||||
${selected
|
||||
? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20 shadow-sm'
|
||||
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`p-3 rounded-full mb-3 ${selected ? 'bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400' : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}`}>
|
||||
<Icon size={24} />
|
||||
</div>
|
||||
<span className={`font-semibold text-sm ${selected ? 'text-brand-900 dark:text-brand-100' : 'text-gray-900 dark:text-white'}`}>
|
||||
{label}
|
||||
</span>
|
||||
{description && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 mt-1 text-center">
|
||||
{description}
|
||||
</span>
|
||||
)}
|
||||
{selected && (
|
||||
<div className="absolute top-3 right-3 text-brand-500">
|
||||
<CheckCircle2 size={16} className="fill-brand-500 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Messages: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -194,17 +250,17 @@ const Messages: React.FC = () => {
|
||||
|
||||
// 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 },
|
||||
{ value: 'owner', label: 'Owners', icon: Users, description: 'Business owners' },
|
||||
{ value: 'manager', label: 'Managers', icon: Users, description: 'Team leads' },
|
||||
{ value: 'staff', label: 'Staff', icon: Users, description: 'Employees' },
|
||||
{ value: 'customer', label: 'Customers', icon: Users, description: 'Clients' },
|
||||
];
|
||||
|
||||
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 },
|
||||
{ value: 'IN_APP' as const, label: 'In-App', icon: Bell, description: 'Notifications only' },
|
||||
{ value: 'EMAIL' as const, label: 'Email', icon: Mail, description: 'Send via email' },
|
||||
{ value: 'SMS' as const, label: 'SMS', icon: Smartphone, description: 'Text message' },
|
||||
{ value: 'ALL' as const, label: 'All Channels', icon: MessageSquare, description: 'Maximum reach' },
|
||||
];
|
||||
|
||||
const filteredMessages = useMemo(() => {
|
||||
@@ -281,34 +337,10 @@ const Messages: React.FC = () => {
|
||||
|
||||
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>
|
||||
);
|
||||
case 'SENT': return <Badge variant="success" size="sm" dot>Sent</Badge>;
|
||||
case 'SENDING': return <Badge variant="info" size="sm" dot>Sending</Badge>;
|
||||
case 'FAILED': return <Badge variant="danger" size="sm" dot>Failed</Badge>;
|
||||
default: return <Badge variant="default" size="sm" dot>Draft</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -335,502 +367,467 @@ const Messages: React.FC = () => {
|
||||
}
|
||||
|
||||
if (message.target_users.length > 0) {
|
||||
parts.push(`${message.target_users.length} individual user(s)`);
|
||||
parts.push(`${message.target_users.length} user(s)`);
|
||||
}
|
||||
|
||||
return parts.join(', ');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="max-w-5xl mx-auto space-y-8 pb-12">
|
||||
{/* 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
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">Broadcast Messages</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400 mt-1 text-lg">
|
||||
Reach your staff and customers across multiple channels.
|
||||
</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>
|
||||
<TabGroup
|
||||
variant="pills"
|
||||
activeColor="brand"
|
||||
tabs={[
|
||||
{
|
||||
id: 'compose',
|
||||
label: 'Compose New',
|
||||
icon: <MessageSquare size={18} />
|
||||
},
|
||||
{
|
||||
id: 'sent',
|
||||
label: `Sent History ${messages.length > 0 ? `(${messages.length})` : ''}`,
|
||||
icon: <Send size={18} />
|
||||
}
|
||||
]}
|
||||
activeTab={activeTab}
|
||||
onChange={(id) => setActiveTab(id as TabType)}
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
|
||||
{/* 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"
|
||||
<form onSubmit={handleSubmit} className="animate-in fade-in slide-in-from-bottom-4 duration-300">
|
||||
<Card className="overflow-visible">
|
||||
<CardHeader>
|
||||
<h3 className="text-lg font-semibold">Message Details</h3>
|
||||
</CardHeader>
|
||||
<CardBody className="space-y-8">
|
||||
{/* Target Selection */}
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-semibold text-gray-900 dark:text-white">
|
||||
1. Who are you sending to?
|
||||
</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{roleOptions.map((role) => (
|
||||
<SelectionTile
|
||||
key={role.value}
|
||||
label={role.label}
|
||||
icon={role.icon}
|
||||
description={role.description}
|
||||
selected={selectedRoles.includes(role.value)}
|
||||
onClick={() => handleRoleToggle(role.value)}
|
||||
/>
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
{/* Individual Recipients Search */}
|
||||
<div className="mt-4">
|
||||
<div className="relative group">
|
||||
<Search className="absolute left-3.5 top-3.5 text-gray-400 group-focus-within:text-brand-500 transition-colors" size={20} />
|
||||
<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"
|
||||
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="Search for specific people..."
|
||||
className="w-full pl-11 pr-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/50 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-all outline-none"
|
||||
/>
|
||||
<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>
|
||||
{recipientsLoading && recipientSearchTerm && (
|
||||
<Loader2 className="absolute right-3.5 top-3.5 text-gray-400 animate-spin" size={20} />
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
{/* Dropdown Results */}
|
||||
{isRecipientDropdownOpen && recipientSearchTerm && !recipientsLoading && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setIsRecipientDropdownOpen(false)}
|
||||
/>
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
onScroll={handleDropdownScroll}
|
||||
className="absolute z-20 w-full mt-2 bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl shadow-xl max-h-72 overflow-y-auto"
|
||||
>
|
||||
{filteredRecipients.length === 0 ? (
|
||||
<p className="text-center py-6 text-gray-500 dark:text-gray-400 text-sm">
|
||||
No matching users found
|
||||
</p>
|
||||
) : (
|
||||
<div className="p-2 space-y-1">
|
||||
{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 rounded-lg transition-colors text-left group/item"
|
||||
>
|
||||
<div className="h-8 w-8 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center text-brand-600 dark:text-brand-400 group-hover/item:bg-brand-200 dark:group-hover/item:bg-brand-800 transition-colors">
|
||||
<span className="font-semibold text-xs">{user.name.charAt(0)}</span>
|
||||
</div>
|
||||
<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>
|
||||
<Badge size="sm" variant="default">{user.role}</Badge>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Selected Users Chips */}
|
||||
{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 pl-3 pr-2 py-1.5 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-full text-sm shadow-sm"
|
||||
>
|
||||
<span className="font-medium text-gray-700 dark:text-gray-200">{user.name}</span>
|
||||
<span className="text-xs text-gray-500 uppercase">{user.role}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveUser(user.id)}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
type="button"
|
||||
<hr className="border-gray-100 dark:border-gray-800" />
|
||||
|
||||
{/* Message Content */}
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-semibold text-gray-900 dark:text-white">
|
||||
2. What do you want to say?
|
||||
</label>
|
||||
<div className="grid gap-4">
|
||||
<FormInput
|
||||
label="Subject"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
placeholder="Brief summary of your message..."
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<FormTextarea
|
||||
label="Message Body"
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
rows={6}
|
||||
placeholder="Write your message here..."
|
||||
required
|
||||
fullWidth
|
||||
hint="You can use plain text. Links will be automatically detected."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-gray-100 dark:border-gray-800" />
|
||||
|
||||
{/* Delivery Method */}
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-semibold text-gray-900 dark:text-white">
|
||||
3. How should we send it?
|
||||
</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{deliveryMethodOptions.map((option) => (
|
||||
<SelectionTile
|
||||
key={option.value}
|
||||
label={option.label}
|
||||
icon={option.icon}
|
||||
description={option.description}
|
||||
selected={deliveryMethod === option.value}
|
||||
onClick={() => setDeliveryMethod(option.value)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recipient Count Summary */}
|
||||
{recipientCount > 0 && (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/30 rounded-xl p-4 flex items-start gap-4">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400 shrink-0">
|
||||
<Users size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-blue-900 dark:text-blue-100">Ready to Broadcast</h4>
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
||||
This message will be sent to approximately <span className="font-bold">{recipientCount} recipient{recipientCount !== 1 ? 's' : ''}</span> via {deliveryMethodOptions.find(o => o.value === deliveryMethod)?.label}.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardBody>
|
||||
<CardFooter className="flex justify-end gap-3 bg-gray-50/50 dark:bg-gray-800/50">
|
||||
<Button
|
||||
variant="ghost"
|
||||
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"
|
||||
Clear Form
|
||||
</Button>
|
||||
<SubmitButton
|
||||
isLoading={createMessage.isPending || sendMessage.isPending}
|
||||
loadingText="Sending..."
|
||||
leftIcon={<Send size={18} />}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
>
|
||||
{createMessage.isPending || sendMessage.isPending ? (
|
||||
<>
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send size={18} />
|
||||
Send Message
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
Send Broadcast
|
||||
</SubmitButton>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* 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 className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-300">
|
||||
{/* Filters Bar */}
|
||||
<Card padding="sm">
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-center">
|
||||
<div className="flex-1 w-full 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 subject, body, or sender..."
|
||||
className="w-full pl-10 pr-4 py-2 border-none bg-transparent focus:ring-0 text-gray-900 dark:text-white placeholder-gray-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="h-8 w-px bg-gray-200 dark:bg-gray-700 hidden sm:block" />
|
||||
<div className="w-full sm:w-auto min-w-[200px]">
|
||||
<div className="relative">
|
||||
<Filter className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as any)}
|
||||
className="w-full pl-10 pr-8 py-2 bg-gray-50 dark:bg-gray-800 border-none rounded-lg text-sm font-medium focus:ring-2 focus:ring-brand-500 cursor-pointer"
|
||||
>
|
||||
<option value="ALL">All Statuses</option>
|
||||
<option value="SENT">Sent</option>
|
||||
<option value="SENDING">Sending</option>
|
||||
<option value="FAILED">Failed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</Card>
|
||||
|
||||
{/* Messages List */}
|
||||
{messagesLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<Loader2 className="mx-auto h-12 w-12 animate-spin text-brand-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-brand-500 mb-4" />
|
||||
<p className="text-gray-500">Loading messages...</p>
|
||||
</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>
|
||||
<EmptyState
|
||||
icon={<MessageSquare className="h-12 w-12 text-gray-400" />}
|
||||
title="No messages found"
|
||||
description={searchTerm || statusFilter !== 'ALL' ? "Try adjusting your filters to see more results." : "You haven't sent any broadcast messages yet."}
|
||||
action={
|
||||
statusFilter === 'ALL' && !searchTerm ? (
|
||||
<Button onClick={() => setActiveTab('compose')} leftIcon={<Send size={16} />}>
|
||||
Compose First Message
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="grid gap-4">
|
||||
{filteredMessages.map((message) => (
|
||||
<div
|
||||
<Card
|
||||
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"
|
||||
hoverable
|
||||
onClick={() => setSelectedMessage(message)}
|
||||
className="group transition-all duration-200 border-l-4 border-l-transparent hover:border-l-brand-500"
|
||||
padding="lg"
|
||||
>
|
||||
<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">
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-between">
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{getStatusBadge(message.status)}
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
|
||||
{message.subject}
|
||||
</h3>
|
||||
{getStatusBadge(message.status)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
|
||||
<p className="text-gray-600 dark:text-gray-400 line-clamp-2 text-sm">
|
||||
{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} />
|
||||
<div className="flex flex-wrap items-center gap-4 text-xs font-medium text-gray-500 dark:text-gray-400 pt-2">
|
||||
<div className="flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
|
||||
<Users size={12} />
|
||||
<span>{getTargetDescription(message)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
|
||||
{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} />
|
||||
<div className="flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
|
||||
<Clock size={12} />
|
||||
<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 className="flex sm:flex-col items-center sm:items-end justify-between sm:justify-center gap-4 border-t sm:border-t-0 sm:border-l border-gray-100 dark:border-gray-800 pt-4 sm:pt-0 sm:pl-6 min-w-[120px]">
|
||||
{message.status === 'SENT' ? (
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-2 text-center">
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 uppercase tracking-wide">Sent</div>
|
||||
<div className="font-bold text-gray-900 dark:text-white">{message.total_recipients}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye size={12} />
|
||||
<span>{message.read_count}</span>
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 uppercase tracking-wide">Read</div>
|
||||
<div className="font-bold text-brand-600 dark:text-brand-400">{message.read_count}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-gray-400 italic">
|
||||
Draft
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-gray-400">
|
||||
by {message.created_by_name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Message Detail Modal */}
|
||||
{/* Message Detail Modal - Using simple fixed overlay for now since Modal component wasn't in list but likely exists. keeping existing logic with better styling */}
|
||||
{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">
|
||||
<div className="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
|
||||
<div className="p-6 border-b border-gray-100 dark:border-gray-700 flex items-start justify-between bg-gray-50/50 dark:bg-gray-800">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
{getStatusBadge(selectedMessage.status)}
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
|
||||
<Clock size={14} />
|
||||
{formatDate(selectedMessage.sent_at || selectedMessage.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white leading-tight">
|
||||
{selectedMessage.subject}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedMessage(null)}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
className="p-2 -mr-2 -mt-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full 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 */}
|
||||
<div className="p-8 overflow-y-auto space-y-8 custom-scrollbar">
|
||||
{/* Stats Cards */}
|
||||
{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">
|
||||
<div className="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 text-center border border-gray-100 dark:border-gray-700">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{selectedMessage.total_recipients}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Total Recipients
|
||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
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">
|
||||
<div className="bg-green-50 dark:bg-green-900/10 rounded-xl p-4 text-center border border-green-100 dark:border-green-900/20">
|
||||
<div className="text-2xl font-bold text-green-700 dark:text-green-400 mb-1">
|
||||
{selectedMessage.delivered_count}
|
||||
</div>
|
||||
<div className="text-sm text-green-600 dark:text-green-500">
|
||||
<div className="text-xs font-semibold text-green-600 uppercase tracking-wider">
|
||||
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">
|
||||
<div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-4 text-center border border-blue-100 dark:border-blue-900/20">
|
||||
<div className="text-2xl font-bold text-blue-700 dark:text-blue-400 mb-1">
|
||||
{selectedMessage.read_count}
|
||||
</div>
|
||||
<div className="text-sm text-blue-600 dark:text-blue-500">
|
||||
<div className="text-xs font-semibold text-blue-600 uppercase tracking-wider">
|
||||
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>
|
||||
{/* Message Body */}
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<h4 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
|
||||
Message Content
|
||||
</h4>
|
||||
<div className="p-6 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-100 dark:border-gray-700 text-gray-800 dark:text-gray-200 whitespace-pre-wrap leading-relaxed">
|
||||
{selectedMessage.body}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta Info */}
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">
|
||||
Recipients
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<Users size={18} className="text-gray-400" />
|
||||
<span>{getTargetDescription(selectedMessage)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">
|
||||
Delivery Method
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
{getDeliveryMethodIcon(selectedMessage.delivery_method)}
|
||||
<span className="capitalize">
|
||||
{selectedMessage.delivery_method.toLowerCase().replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700 flex justify-end">
|
||||
<span className="text-xs text-gray-400">
|
||||
Sent by {selectedMessage.created_by_name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -839,4 +836,4 @@ const Messages: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Messages;
|
||||
export default Messages;
|
||||
Reference in New Issue
Block a user