Haitham Khalifa
424 lines
16 KiB
TypeScript
424 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import type { CallTask } from '@/lib/types';
|
|
import { CalendarDays, PhoneCall } from 'lucide-react';
|
|
import toast from 'react-hot-toast';
|
|
|
|
const STATUS_LABELS: Record<CallTask['status'], string> = {
|
|
pending: 'Pending',
|
|
in_progress: 'In Progress',
|
|
completed: 'Completed',
|
|
failed: 'Failed',
|
|
};
|
|
|
|
const STATUS_STYLES: Record<CallTask['status'], string> = {
|
|
pending: 'bg-yellow-500/20 text-yellow-200 border-yellow-400/30',
|
|
in_progress: 'bg-blue-500/20 text-blue-200 border-blue-400/30',
|
|
completed: 'bg-emerald-500/20 text-emerald-200 border-emerald-400/30',
|
|
failed: 'bg-red-500/20 text-red-200 border-red-400/30',
|
|
};
|
|
|
|
const FILTERS: Array<{ key: 'all' | 'pending' | 'completed' | 'failed'; label: string }> = [
|
|
{ key: 'all', label: 'All' },
|
|
{ key: 'pending', label: 'Pending' },
|
|
{ key: 'completed', label: 'Completed' },
|
|
{ key: 'failed', label: 'Failed' },
|
|
];
|
|
|
|
const formatTimestamp = (value: any) => {
|
|
if (!value) return '';
|
|
if (typeof value === 'string') return new Date(value).toLocaleString();
|
|
if (value?.seconds) return new Date(value.seconds * 1000).toLocaleString();
|
|
return value.toString();
|
|
};
|
|
|
|
export default function ScheduledCallsPage() {
|
|
const { user, isLoading } = useAuth();
|
|
const router = useRouter();
|
|
const [tasks, setTasks] = useState<CallTask[]>([]);
|
|
const [activeFilter, setActiveFilter] = useState<'all' | 'pending' | 'completed' | 'failed'>(
|
|
'all'
|
|
);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
businessName: '',
|
|
phoneNumber: '',
|
|
preferredLanguage: 'English',
|
|
callGoals: '',
|
|
scheduledAt: '',
|
|
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
maxMinutes: 10,
|
|
allowRecalls: false,
|
|
maxRecalls: 0,
|
|
});
|
|
const [callNowNumber, setCallNowNumber] = useState('');
|
|
const [callNowError, setCallNowError] = useState<string | null>(null);
|
|
const [callNowStatus, setCallNowStatus] = useState<'idle' | 'connecting' | 'started'>('idle');
|
|
const [creditsBalance, setCreditsBalance] = useState<number | null>(null);
|
|
const [calendarMonth, setCalendarMonth] = useState(() => {
|
|
const date = new Date();
|
|
return new Date(date.getFullYear(), date.getMonth(), 1);
|
|
});
|
|
const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
|
|
const [selectedTime, setSelectedTime] = useState('10:00');
|
|
|
|
useEffect(() => {
|
|
if (!isLoading && !user) {
|
|
router.push('/auth');
|
|
}
|
|
}, [user, isLoading, router]);
|
|
|
|
const fetchTasks = async () => {
|
|
try {
|
|
const response = await fetch('/api/scheduled-calls');
|
|
const data = await response.json();
|
|
setTasks(data.tasks || []);
|
|
} catch (error) {
|
|
console.error('Error loading tasks', error);
|
|
toast.error('Unable to load scheduled calls.');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
fetchTasks();
|
|
fetch('/api/credits')
|
|
.then((res) => res.json())
|
|
.then((data) => setCreditsBalance(data.balance ?? 0))
|
|
.catch(() => {
|
|
setCreditsBalance(0);
|
|
toast.error('Unable to load credits.');
|
|
});
|
|
}
|
|
}, [user]);
|
|
|
|
const filteredTasks = useMemo(() => {
|
|
if (activeFilter === 'all') return tasks;
|
|
return tasks.filter((task) => task.status === activeFilter);
|
|
}, [tasks, activeFilter]);
|
|
|
|
const updateField = (key: keyof typeof formData, value: string | number | boolean) => {
|
|
setFormData((prev) => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
const handleSubmit = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
if (isSubmitting) return;
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/scheduled-calls', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
...formData,
|
|
scheduledAt: new Date(
|
|
`${selectedDate.toDateString()} ${selectedTime}`
|
|
).toISOString(),
|
|
maxMinutes: Number(formData.maxMinutes),
|
|
maxRecalls: Number(formData.maxRecalls),
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to schedule call');
|
|
}
|
|
|
|
await fetchTasks();
|
|
toast.success('Call scheduled successfully.');
|
|
setFormData({
|
|
businessName: '',
|
|
phoneNumber: '',
|
|
preferredLanguage: 'English',
|
|
callGoals: '',
|
|
scheduledAt: '',
|
|
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
maxMinutes: 10,
|
|
allowRecalls: false,
|
|
maxRecalls: 0,
|
|
});
|
|
} catch (error) {
|
|
console.error('Error scheduling call', error);
|
|
toast.error('Unable to schedule the call.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleCallNow = async () => {
|
|
setCallNowError(null);
|
|
if (!callNowNumber) {
|
|
setCallNowError('Please enter a phone number.');
|
|
toast.error('Please enter a phone number.');
|
|
return;
|
|
}
|
|
if (creditsBalance !== null && creditsBalance < 1) {
|
|
setCallNowError('Insufficient credits to start a call.');
|
|
toast.error('Insufficient credits to start a call.');
|
|
return;
|
|
}
|
|
|
|
setCallNowStatus('connecting');
|
|
try {
|
|
const response = await fetch('/api/vapi/create-call', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
phoneNumber: callNowNumber,
|
|
userId: user?.uid,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data?.error || 'Failed to start call.');
|
|
}
|
|
|
|
setCallNowStatus('started');
|
|
toast.success('Call started.');
|
|
} catch (error) {
|
|
console.error('Call now error', error);
|
|
setCallNowError(
|
|
error instanceof Error ? error.message : 'Failed to start call.'
|
|
);
|
|
toast.error('Unable to start the call.');
|
|
setCallNowStatus('idle');
|
|
}
|
|
};
|
|
|
|
const handleCancelTask = async (taskId: string) => {
|
|
try {
|
|
const response = await fetch(`/api/scheduled-calls/${taskId}`, {
|
|
method: 'DELETE',
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Failed to cancel task.');
|
|
}
|
|
await fetchTasks();
|
|
toast.success('Scheduled call canceled.');
|
|
} catch (error) {
|
|
console.error('Cancel task error', error);
|
|
toast.error('Unable to cancel the scheduled call.');
|
|
}
|
|
};
|
|
|
|
const daysInMonth = new Date(
|
|
calendarMonth.getFullYear(),
|
|
calendarMonth.getMonth() + 1,
|
|
0
|
|
).getDate();
|
|
const firstWeekday = new Date(
|
|
calendarMonth.getFullYear(),
|
|
calendarMonth.getMonth(),
|
|
1
|
|
).getDay();
|
|
const calendarDays = Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-[#0f0b1a] text-white">
|
|
<div className="animate-pulse text-lg">Loading...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0f0b1a] text-white px-6 py-10">
|
|
<div className="max-w-5xl mx-auto space-y-6">
|
|
<header className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-semibold">Scheduled Calls</h1>
|
|
<p className="text-sm text-[#9ca3af] mt-1">Agent online · 42 mins left</p>
|
|
</div>
|
|
<button
|
|
onClick={() => router.push('/dashboard')}
|
|
className="text-sm text-[#9ca3af] hover:text-white transition"
|
|
>
|
|
← Back to Dashboard
|
|
</button>
|
|
</header>
|
|
|
|
<div className="flex flex-wrap gap-2 rounded-full bg-[#1a1625] p-1 border border-purple-500/20 w-fit shadow-lg">
|
|
{FILTERS.map((filter) => (
|
|
<button
|
|
key={filter.key}
|
|
onClick={() => setActiveFilter(filter.key)}
|
|
className={`px-4 py-2 text-sm rounded-full transition ${
|
|
activeFilter === filter.key
|
|
? 'bg-[#8b5cf6] text-white shadow-[0_0_16px_rgba(139,92,246,0.6)]'
|
|
: 'text-[#9ca3af] hover:text-white'
|
|
}`}
|
|
>
|
|
{filter.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 shadow-lg space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<PhoneCall className="h-5 w-5 text-[#8b5cf6]" />
|
|
<h2 className="text-lg font-semibold">Make Call Now</h2>
|
|
</div>
|
|
<p className="text-sm text-[#9ca3af]">
|
|
Start an immediate outbound call for quick tests.
|
|
</p>
|
|
<input
|
|
value={callNowNumber}
|
|
onChange={(event) => setCallNowNumber(event.target.value)}
|
|
className="w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
|
placeholder="+34 600 000 000"
|
|
/>
|
|
{creditsBalance !== null && (
|
|
<p className="text-xs text-[#9ca3af]">
|
|
Credits available: {creditsBalance}
|
|
</p>
|
|
)}
|
|
{callNowError && <p className="text-xs text-red-300">{callNowError}</p>}
|
|
<button
|
|
onClick={handleCallNow}
|
|
className="w-full px-4 py-2 rounded-2xl bg-[#8b5cf6] text-white font-semibold shadow-2xl hover:bg-[#7c3aed] transition"
|
|
disabled={callNowStatus === 'connecting'}
|
|
>
|
|
{callNowStatus === 'connecting' ? 'Connecting...' : 'Test Call'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 shadow-lg space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<CalendarDays className="h-5 w-5 text-[#8b5cf6]" />
|
|
<h2 className="text-lg font-semibold">Schedule a Call</h2>
|
|
</div>
|
|
<div className="grid grid-cols-7 gap-2 text-center text-xs text-[#9ca3af]">
|
|
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
|
|
<span key={day}>{day}</span>
|
|
))}
|
|
{Array.from({ length: firstWeekday }).map((_, index) => (
|
|
<span key={`empty-${index}`} />
|
|
))}
|
|
{calendarDays.map((day) => {
|
|
const current = new Date(
|
|
calendarMonth.getFullYear(),
|
|
calendarMonth.getMonth(),
|
|
day
|
|
);
|
|
const isSelected =
|
|
current.toDateString() === selectedDate.toDateString();
|
|
return (
|
|
<button
|
|
key={day}
|
|
type="button"
|
|
onClick={() => setSelectedDate(current)}
|
|
className={`h-9 w-9 rounded-lg border text-sm transition ${
|
|
isSelected
|
|
? 'bg-[#8b5cf6] text-white border-[#8b5cf6]'
|
|
: 'border-white/10 text-[#9ca3af] hover:text-white'
|
|
}`}
|
|
>
|
|
{day}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<input
|
|
type="time"
|
|
value={selectedTime}
|
|
onChange={(event) => setSelectedTime(event.target.value)}
|
|
className="w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
|
/>
|
|
<input
|
|
value={formData.timezone}
|
|
onChange={(event) => updateField('timezone', event.target.value)}
|
|
className="w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
|
/>
|
|
</div>
|
|
<input
|
|
value={formData.businessName}
|
|
onChange={(event) => updateField('businessName', event.target.value)}
|
|
className="w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
|
placeholder="Business name"
|
|
/>
|
|
<input
|
|
value={formData.phoneNumber}
|
|
onChange={(event) => updateField('phoneNumber', event.target.value)}
|
|
className="w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
|
placeholder="+34 600 000 000"
|
|
/>
|
|
<select
|
|
value={formData.preferredLanguage}
|
|
onChange={(event) => updateField('preferredLanguage', event.target.value)}
|
|
className="w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
|
>
|
|
<option>English</option>
|
|
<option>Spanish</option>
|
|
</select>
|
|
<textarea
|
|
value={formData.callGoals}
|
|
onChange={(event) => updateField('callGoals', event.target.value)}
|
|
className="w-full rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6] min-h-[100px]"
|
|
placeholder="Call goals"
|
|
/>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting}
|
|
className="w-full bg-[#8b5cf6] hover:bg-[#7c3aed] transition text-white font-semibold py-3 rounded-2xl shadow-2xl"
|
|
>
|
|
{isSubmitting ? 'Scheduling...' : 'Schedule Call'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{filteredTasks.length === 0 && (
|
|
<div className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-8 text-center text-[#9ca3af] shadow-lg">
|
|
No scheduled calls yet. Click the + button to add your first call.
|
|
</div>
|
|
)}
|
|
|
|
{filteredTasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-5 shadow-lg"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span
|
|
className={`text-xs uppercase tracking-wide px-3 py-1 rounded-full border ${STATUS_STYLES[task.status]}`}
|
|
>
|
|
{STATUS_LABELS[task.status]}
|
|
</span>
|
|
<span className="text-xs text-[#9ca3af]">
|
|
{formatTimestamp(task.scheduledAt)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-2">
|
|
<h3 className="text-lg font-semibold">{task.businessName}</h3>
|
|
<p className="text-sm text-[#9ca3af]">{task.phoneNumber}</p>
|
|
<p className="text-sm text-white/80 line-clamp-2">{task.callGoals}</p>
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center justify-between">
|
|
<span className="text-xs px-3 py-1 rounded-full bg-[#8b5cf6]/20 text-white border border-[#8b5cf6]/40">
|
|
Max {task.maxMinutes} min · UP TO €{task.maxCredits}
|
|
</span>
|
|
<button
|
|
onClick={() => handleCancelTask(task.id)}
|
|
className="text-xs px-3 py-1 rounded-full bg-white/5 text-[#9ca3af] hover:text-white transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|