feat: audit log page, meeting prep modal, communication style, error boundaries + toast
- AuditLogPage: filterable table with expandable details (admin only) - MeetingPrepModal: AI-generated meeting briefs with health score, talking points, conversation starters - Communication Style section in Settings: tone, greeting, signoff, writing samples, avoid words - ErrorBoundary wrapping all page routes with Try Again button - Global toast system with API error interceptor (401/403/500) - ToastContainer with success/error/warning/info variants - Print CSS for meeting prep - Audit Log added to sidebar nav for admins - All 80 frontend tests pass, clean build
This commit is contained in:
254
src/pages/AuditLogPage.tsx
Normal file
254
src/pages/AuditLogPage.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import type { AuditLog, User } from '@/types';
|
||||
import {
|
||||
Shield, Search, ChevronDown, ChevronRight, ChevronLeft,
|
||||
Filter, Calendar, User as UserIcon, Activity,
|
||||
} from 'lucide-react';
|
||||
import { PageLoader } from '@/components/LoadingSpinner';
|
||||
import { formatDate } from '@/lib/utils';
|
||||
|
||||
const ACTION_COLORS: Record<string, string> = {
|
||||
create: 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300',
|
||||
update: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||||
delete: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||||
view: 'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300',
|
||||
send: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||||
login: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300',
|
||||
logout: 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300',
|
||||
password_change: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||||
};
|
||||
|
||||
const ENTITY_TYPES = ['client', 'email', 'event', 'template', 'segment', 'user', 'auth', 'interaction', 'note', 'notification', 'invite', 'profile'];
|
||||
const ACTIONS = ['create', 'update', 'delete', 'view', 'send', 'login', 'logout', 'password_change'];
|
||||
|
||||
export default function AuditLogPage() {
|
||||
const [logs, setLogs] = useState<AuditLog[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
|
||||
// Filters
|
||||
const [entityType, setEntityType] = useState('');
|
||||
const [action, setAction] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [userId, setUserId] = useState('');
|
||||
|
||||
const fetchLogs = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await api.getAuditLogs({
|
||||
entityType: entityType || undefined,
|
||||
action: action || undefined,
|
||||
userId: userId || undefined,
|
||||
startDate: startDate || undefined,
|
||||
endDate: endDate || undefined,
|
||||
search: search || undefined,
|
||||
page,
|
||||
limit: 25,
|
||||
});
|
||||
setLogs(data.logs);
|
||||
setTotal(data.total);
|
||||
setTotalPages(data.totalPages);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch audit logs:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [entityType, action, userId, startDate, endDate, search, page]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchLogs();
|
||||
}, [fetchLogs]);
|
||||
|
||||
useEffect(() => {
|
||||
api.getUsers().then(setUsers).catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Reset page on filter change
|
||||
useEffect(() => {
|
||||
setPage(1);
|
||||
}, [entityType, action, userId, startDate, endDate, search]);
|
||||
|
||||
const inputClass = 'px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg text-sm bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500';
|
||||
const selectClass = `${inputClass} appearance-none pr-8`;
|
||||
|
||||
return (
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-3">
|
||||
<Shield className="w-7 h-7 text-blue-600" />
|
||||
Audit Log
|
||||
</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
|
||||
{total} total entries · Compliance audit trail
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-4">
|
||||
<div className="flex items-center gap-2 mb-3 text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
<Filter className="w-4 h-4" />
|
||||
Filters
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search details..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className={`${inputClass} pl-9 w-full`}
|
||||
/>
|
||||
</div>
|
||||
<select value={entityType} onChange={(e) => setEntityType(e.target.value)} className={`${selectClass} w-full`}>
|
||||
<option value="">All entity types</option>
|
||||
{ENTITY_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
<select value={action} onChange={(e) => setAction(e.target.value)} className={`${selectClass} w-full`}>
|
||||
<option value="">All actions</option>
|
||||
{ACTIONS.map(a => <option key={a} value={a}>{a}</option>)}
|
||||
</select>
|
||||
<select value={userId} onChange={(e) => setUserId(e.target.value)} className={`${selectClass} w-full`}>
|
||||
<option value="">All users</option>
|
||||
{users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
|
||||
</select>
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
placeholder="Start date"
|
||||
className={`${inputClass} w-full`}
|
||||
/>
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
placeholder="End date"
|
||||
className={`${inputClass} w-full`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-8"><PageLoader /></div>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="p-8 text-center text-sm text-slate-400">
|
||||
<Activity className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||
No audit logs found
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
|
||||
<th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400 w-8"></th>
|
||||
<th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">Time</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">User</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">Action</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">Entity</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{logs.map(log => (
|
||||
<>
|
||||
<tr
|
||||
key={log.id}
|
||||
className="hover:bg-slate-50 dark:hover:bg-slate-700/50 cursor-pointer transition-colors"
|
||||
onClick={() => setExpandedId(expandedId === log.id ? null : log.id)}
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
{log.details ? (
|
||||
expandedId === log.id
|
||||
? <ChevronDown className="w-4 h-4 text-slate-400" />
|
||||
: <ChevronRight className="w-4 h-4 text-slate-400" />
|
||||
) : <span className="w-4 h-4 inline-block" />}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 dark:text-slate-300 whitespace-nowrap">
|
||||
{new Date(log.createdAt).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center">
|
||||
<UserIcon className="w-3 h-3 text-slate-500" />
|
||||
</div>
|
||||
<span className="text-slate-900 dark:text-slate-100">{log.userName || 'System'}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${ACTION_COLORS[log.action] || 'bg-slate-100 text-slate-600'}`}>
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-700 dark:text-slate-300">
|
||||
<span className="font-medium">{log.entityType}</span>
|
||||
{log.entityId && (
|
||||
<span className="text-slate-400 ml-1 text-xs">{log.entityId.slice(0, 8)}...</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-500 dark:text-slate-400 text-xs font-mono">
|
||||
{log.ipAddress || '—'}
|
||||
</td>
|
||||
</tr>
|
||||
{expandedId === log.id && log.details && (
|
||||
<tr key={`${log.id}-details`}>
|
||||
<td colSpan={6} className="px-8 py-4 bg-slate-50 dark:bg-slate-900/50">
|
||||
<div className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2">Details</div>
|
||||
<pre className="text-xs text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 p-3 rounded-lg border border-slate-200 dark:border-slate-700 overflow-auto max-h-48">
|
||||
{JSON.stringify(log.details, null, 2)}
|
||||
</pre>
|
||||
{log.userAgent && (
|
||||
<div className="mt-2 text-xs text-slate-400 truncate">
|
||||
UA: {log.userAgent}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 dark:border-slate-700">
|
||||
<span className="text-sm text-slate-500 dark:text-slate-400">
|
||||
Page {page} of {totalPages} ({total} entries)
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage(p => p - 1)}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-lg disabled:opacity-50 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" /> Previous
|
||||
</button>
|
||||
<button
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm border border-slate-300 dark:border-slate-600 rounded-lg disabled:opacity-50 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
Next <ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -17,6 +17,7 @@ import ClientForm from '@/components/ClientForm';
|
||||
import EmailComposeModal from '@/components/EmailComposeModal';
|
||||
import ClientNotes from '@/components/ClientNotes';
|
||||
import LogInteractionModal from '@/components/LogInteractionModal';
|
||||
import MeetingPrepModal from '@/components/MeetingPrepModal';
|
||||
import type { Interaction } from '@/types';
|
||||
|
||||
export default function ClientDetailPage() {
|
||||
@@ -31,6 +32,7 @@ export default function ClientDetailPage() {
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [showCompose, setShowCompose] = useState(false);
|
||||
const [showLogInteraction, setShowLogInteraction] = useState(false);
|
||||
const [showMeetingPrep, setShowMeetingPrep] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const { togglePin, isPinned } = usePinnedClients();
|
||||
|
||||
@@ -120,6 +122,10 @@ export default function ClientDetailPage() {
|
||||
<Phone className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Log Interaction</span>
|
||||
</button>
|
||||
<button onClick={() => setShowMeetingPrep(true)} className="flex items-center gap-2 px-3 py-2 bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 rounded-lg text-sm font-medium hover:bg-purple-100 dark:hover:bg-purple-900/50 transition-colors">
|
||||
<Briefcase className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Meeting Prep</span>
|
||||
</button>
|
||||
<button onClick={() => setShowCompose(true)} className="flex items-center gap-2 px-3 py-2 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded-lg text-sm font-medium hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Generate Email</span>
|
||||
@@ -355,6 +361,14 @@ export default function ClientDetailPage() {
|
||||
onGenerated={(email) => setEmails((prev) => [email, ...prev])}
|
||||
/>
|
||||
|
||||
{/* Meeting Prep Modal */}
|
||||
<MeetingPrepModal
|
||||
isOpen={showMeetingPrep}
|
||||
onClose={() => setShowMeetingPrep(false)}
|
||||
clientId={client.id}
|
||||
clientName={`${client.firstName} ${client.lastName}`}
|
||||
/>
|
||||
|
||||
{/* Log Interaction Modal */}
|
||||
<LogInteractionModal
|
||||
isOpen={showLogInteraction}
|
||||
|
||||
@@ -2,8 +2,9 @@ import { useEffect, useState } from 'react';
|
||||
import { api } from '@/lib/api';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import type { Profile } from '@/types';
|
||||
import { Save, User, Lock, Mail, CheckCircle2, AlertCircle } from 'lucide-react';
|
||||
import { Save, User, Lock, Mail, CheckCircle2, AlertCircle, MessageSquare, Plus, X } from 'lucide-react';
|
||||
import LoadingSpinner, { PageLoader } from '@/components/LoadingSpinner';
|
||||
import type { CommunicationStyle } from '@/types';
|
||||
|
||||
function StatusMessage({ type, message }: { type: 'success' | 'error'; message: string }) {
|
||||
return (
|
||||
@@ -33,10 +34,26 @@ export default function SettingsPage() {
|
||||
const [passwordSaving, setPasswordSaving] = useState(false);
|
||||
const [passwordStatus, setPasswordStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
|
||||
|
||||
// Communication style
|
||||
const [commStyle, setCommStyle] = useState<CommunicationStyle>({
|
||||
tone: 'friendly',
|
||||
greeting: '',
|
||||
signoff: '',
|
||||
writingSamples: [],
|
||||
avoidWords: [],
|
||||
});
|
||||
const [styleSaving, setStyleSaving] = useState(false);
|
||||
const [styleStatus, setStyleStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
|
||||
const [newAvoidWord, setNewAvoidWord] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
api.getProfile().then((p) => {
|
||||
Promise.all([
|
||||
api.getProfile(),
|
||||
api.getCommunicationStyle(),
|
||||
]).then(([p, style]) => {
|
||||
setProfile(p);
|
||||
setNewEmail(p.email || '');
|
||||
setCommStyle(style);
|
||||
setLoading(false);
|
||||
}).catch(() => setLoading(false));
|
||||
}, []);
|
||||
@@ -296,6 +313,167 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Communication Style */}
|
||||
<form onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
setStyleSaving(true);
|
||||
setStyleStatus(null);
|
||||
try {
|
||||
const updated = await api.updateCommunicationStyle(commStyle);
|
||||
setCommStyle(updated);
|
||||
setStyleStatus({ type: 'success', message: 'Communication style saved' });
|
||||
setTimeout(() => setStyleStatus(null), 3000);
|
||||
} catch (err: any) {
|
||||
setStyleStatus({ type: 'error', message: err.message || 'Failed to save' });
|
||||
} finally {
|
||||
setStyleSaving(false);
|
||||
}
|
||||
}}>
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
|
||||
<div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300 rounded-lg flex items-center justify-center">
|
||||
<MessageSquare className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Communication Style</h2>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">Customize how AI writes emails for you</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tone */}
|
||||
<div>
|
||||
<label className={labelClass}>Tone</label>
|
||||
<div className="flex gap-3">
|
||||
{(['formal', 'friendly', 'casual'] as const).map(tone => (
|
||||
<button
|
||||
key={tone}
|
||||
type="button"
|
||||
onClick={() => setCommStyle({ ...commStyle, tone })}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
|
||||
commStyle.tone === tone
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 border-purple-300 dark:border-purple-700 text-purple-700 dark:text-purple-300'
|
||||
: 'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:border-purple-300 dark:hover:border-purple-600'
|
||||
}`}
|
||||
>
|
||||
{tone.charAt(0).toUpperCase() + tone.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Greeting & Sign-off */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className={labelClass}>Greeting</label>
|
||||
<input
|
||||
value={commStyle.greeting}
|
||||
onChange={(e) => setCommStyle({ ...commStyle, greeting: e.target.value })}
|
||||
placeholder="e.g., Hi, Hello, Dear"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Sign-off</label>
|
||||
<input
|
||||
value={commStyle.signoff}
|
||||
onChange={(e) => setCommStyle({ ...commStyle, signoff: e.target.value })}
|
||||
placeholder="e.g., Best regards, Cheers, Warm regards"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Writing Samples */}
|
||||
<div>
|
||||
<label className={labelClass}>Writing Samples <span className="font-normal text-slate-400">(up to 3)</span></label>
|
||||
<p className="text-xs text-slate-400 mb-2">Paste examples of your actual emails so AI can match your style</p>
|
||||
{[0, 1, 2].map(i => (
|
||||
<textarea
|
||||
key={i}
|
||||
value={commStyle.writingSamples[i] || ''}
|
||||
onChange={(e) => {
|
||||
const samples = [...commStyle.writingSamples];
|
||||
samples[i] = e.target.value;
|
||||
setCommStyle({ ...commStyle, writingSamples: samples.filter(Boolean) });
|
||||
}}
|
||||
rows={3}
|
||||
placeholder={`Writing sample ${i + 1}...`}
|
||||
className={`${inputClass} mb-2 text-sm`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Avoid Words */}
|
||||
<div>
|
||||
<label className={labelClass}>Words to Avoid</label>
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{commStyle.avoidWords.map((word, i) => (
|
||||
<span key={i} className="flex items-center gap-1 px-2.5 py-1 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded-full text-sm">
|
||||
{word}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCommStyle({
|
||||
...commStyle,
|
||||
avoidWords: commStyle.avoidWords.filter((_, j) => j !== i),
|
||||
})}
|
||||
className="hover:text-red-900 dark:hover:text-red-100"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={newAvoidWord}
|
||||
onChange={(e) => setNewAvoidWord(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (newAvoidWord.trim() && !commStyle.avoidWords.includes(newAvoidWord.trim())) {
|
||||
setCommStyle({
|
||||
...commStyle,
|
||||
avoidWords: [...commStyle.avoidWords, newAvoidWord.trim()],
|
||||
});
|
||||
setNewAvoidWord('');
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="Type a word and press Enter..."
|
||||
className={`${inputClass} flex-1`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (newAvoidWord.trim() && !commStyle.avoidWords.includes(newAvoidWord.trim())) {
|
||||
setCommStyle({
|
||||
...commStyle,
|
||||
avoidWords: [...commStyle.avoidWords, newAvoidWord.trim()],
|
||||
});
|
||||
setNewAvoidWord('');
|
||||
}
|
||||
}}
|
||||
className="px-3 py-2 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={styleSaving}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{styleSaving ? <LoadingSpinner size="sm" className="text-white" /> : <MessageSquare className="w-4 h-4" />}
|
||||
Save Communication Style
|
||||
</button>
|
||||
{styleStatus && <StatusMessage {...styleStatus} />}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user