Initial commit
This commit is contained in:
Haitham Khalifa
@@ -0,0 +1,257 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import type { AgentSettings } from '@/lib/types';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const SECONDARY_LANGUAGES = ['Spanish', 'Catalan', 'German', 'French'];
|
||||
|
||||
const getFallbackSettings = (userId: string): AgentSettings => ({
|
||||
userId,
|
||||
agentName: 'HolaCompi',
|
||||
appLanguage: 'English',
|
||||
primaryCallLanguage: 'English (UK)',
|
||||
secondaryCallLanguages: [],
|
||||
tone: 'Friendly',
|
||||
agentInstructions:
|
||||
'You are HolaCompi, a helpful Spanish friend who makes phone calls on behalf of users.',
|
||||
createdAt: null as unknown as AgentSettings['createdAt'],
|
||||
updatedAt: null as unknown as AgentSettings['updatedAt'],
|
||||
});
|
||||
|
||||
export default function AgentSettingsPage() {
|
||||
const { user, isLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const [settings, setSettings] = useState<AgentSettings | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !user) {
|
||||
router.push('/auth');
|
||||
}
|
||||
}, [user, isLoading, router]);
|
||||
|
||||
const fetchSettings = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/agent-settings');
|
||||
if (!response.ok) {
|
||||
toast.error('Unable to load agent settings.');
|
||||
setSettings(getFallbackSettings(user?.uid ?? 'test-user-id'));
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
setSettings(data.settings ?? getFallbackSettings(user?.uid ?? 'test-user-id'));
|
||||
} catch (error) {
|
||||
toast.error('Unable to load agent settings.');
|
||||
setSettings(getFallbackSettings(user?.uid ?? 'test-user-id'));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
fetchSettings();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const updateSettings = (patch: Partial<AgentSettings>) => {
|
||||
setSettings((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
...patch,
|
||||
secondaryCallLanguages:
|
||||
patch.secondaryCallLanguages ?? prev.secondaryCallLanguages ?? [],
|
||||
}
|
||||
: prev
|
||||
);
|
||||
};
|
||||
|
||||
const toggleSecondaryLanguage = (language: string) => {
|
||||
if (!settings) return;
|
||||
const current = settings.secondaryCallLanguages || [];
|
||||
const next = current.includes(language)
|
||||
? current.filter((item) => item !== language)
|
||||
: [...current, language];
|
||||
updateSettings({ secondaryCallLanguages: next });
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!settings || isSaving) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
agentName: settings.agentName,
|
||||
appLanguage: settings.appLanguage,
|
||||
primaryCallLanguage: settings.primaryCallLanguage,
|
||||
secondaryCallLanguages: settings.secondaryCallLanguages ?? [],
|
||||
tone: settings.tone,
|
||||
agentInstructions: settings.agentInstructions,
|
||||
};
|
||||
const response = await fetch('/api/agent-settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save');
|
||||
}
|
||||
await fetchSettings();
|
||||
toast.success('Agent settings saved.');
|
||||
} catch (error) {
|
||||
console.error('Error saving agent settings', error);
|
||||
toast.error('Unable to save agent settings.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading || !settings) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#0f0b1a] text-white">
|
||||
<div className="animate-pulse text-lg">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f0b1a] text-white px-6 py-10">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<header className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => router.push('/dashboard')}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<h1 className="text-2xl font-semibold">Voice Agent Settings</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="text-sm px-4 py-2 rounded-full bg-[#8b5cf6]/20 text-white border border-[#8b5cf6]/40 hover:bg-[#8b5cf6]/30 transition"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-6 shadow-lg space-y-4">
|
||||
<h2 className="text-sm uppercase text-[#9ca3af] flex items-center gap-2">
|
||||
<span className="text-[#8b5cf6]">◆</span> Agent Identity
|
||||
</h2>
|
||||
<div>
|
||||
<label className="text-xs text-[#9ca3af] uppercase">Agent Name</label>
|
||||
<input
|
||||
value={settings.agentName}
|
||||
onChange={(event) => updateSettings({ agentName: event.target.value })}
|
||||
className="mt-2 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="HolaCompi"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-6 shadow-lg space-y-5">
|
||||
<h2 className="text-sm uppercase text-[#9ca3af] flex items-center gap-2">
|
||||
<span className="text-[#8b5cf6]">◆</span> Linguistics
|
||||
</h2>
|
||||
<div>
|
||||
<label className="text-xs text-[#9ca3af] uppercase">App Language</label>
|
||||
<div className="mt-2 rounded-xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-3 text-sm text-white/80">
|
||||
English (fixed)
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-[#9ca3af] uppercase">Primary Language</label>
|
||||
<select
|
||||
value={settings.primaryCallLanguage}
|
||||
onChange={(event) =>
|
||||
updateSettings({ primaryCallLanguage: event.target.value })
|
||||
}
|
||||
className="mt-2 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 (UK)</option>
|
||||
<option>English (US)</option>
|
||||
<option>Spanish</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-[#9ca3af] uppercase">
|
||||
Secondary Languages
|
||||
</label>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{SECONDARY_LANGUAGES.map((language) => {
|
||||
const active = settings.secondaryCallLanguages?.includes(language);
|
||||
return (
|
||||
<button
|
||||
key={language}
|
||||
type="button"
|
||||
onClick={() => toggleSecondaryLanguage(language)}
|
||||
className={`px-4 py-2 rounded-full border text-sm transition ${
|
||||
active
|
||||
? 'bg-[#8b5cf6]/30 border-[#8b5cf6]/60 text-white'
|
||||
: 'bg-white/5 border-white/10 text-[#9ca3af] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{language}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1a1625] border border-purple-500/20 rounded-xl p-6 shadow-lg space-y-5">
|
||||
<h2 className="text-sm uppercase text-[#9ca3af] flex items-center gap-2">
|
||||
<span className="text-[#8b5cf6]">◆</span> Voice Persona
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{(['Professional', 'Friendly'] as const).map((tone) => {
|
||||
const active = settings.tone === tone;
|
||||
return (
|
||||
<button
|
||||
key={tone}
|
||||
type="button"
|
||||
onClick={() => updateSettings({ tone })}
|
||||
className={`flex items-center justify-between rounded-2xl border px-4 py-4 text-left transition ${
|
||||
active
|
||||
? 'border-[#8b5cf6]/70 bg-[#8b5cf6]/20 text-white'
|
||||
: 'border-white/10 bg-white/5 text-[#9ca3af] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<p className="font-semibold">{tone}</p>
|
||||
<p className="text-xs text-[#9ca3af] mt-1">
|
||||
{tone === 'Professional'
|
||||
? 'Clear, polite, and authoritative'
|
||||
: 'Warm, friendly, and supportive'}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={`h-4 w-4 rounded-full border ${
|
||||
active ? 'border-[#8b5cf6] bg-[#8b5cf6]' : 'border-white/20'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-[#9ca3af] uppercase">
|
||||
Agent Instructions
|
||||
</label>
|
||||
<textarea
|
||||
value={settings.agentInstructions}
|
||||
onChange={(event) =>
|
||||
updateSettings({ agentInstructions: event.target.value })
|
||||
}
|
||||
className="mt-2 w-full rounded-2xl bg-[#0f0b1a] border border-purple-500/20 px-4 py-4 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6] min-h-[160px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,477 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Loader2,
|
||||
MessageSquare,
|
||||
Mic,
|
||||
MicOff,
|
||||
PhoneCall,
|
||||
Send,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import { useVapi } from '@/hooks/useVapi';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
interface Message {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
}
|
||||
|
||||
export default function Chat() {
|
||||
const { user, isLoading: authLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [permissionError, setPermissionError] = useState<string | null>(null);
|
||||
|
||||
// Voice state
|
||||
const [isListening, setIsListening] = useState(false);
|
||||
const recognitionRef = useRef<any>(null);
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { status, error: callError, durationSeconds, callStats, startCall, endCall } =
|
||||
useVapi();
|
||||
|
||||
// Redirect if not logged in
|
||||
useEffect(() => {
|
||||
if (!authLoading && !user) {
|
||||
router.push('/login');
|
||||
}
|
||||
}, [user, authLoading, router]);
|
||||
|
||||
// Auto-scroll
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
// Init speech recognition (client only)
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
const SpeechRecognition =
|
||||
(window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
|
||||
|
||||
if (!SpeechRecognition) {
|
||||
console.warn('Speech recognition not supported in this browser');
|
||||
return;
|
||||
}
|
||||
|
||||
const recognition = new SpeechRecognition();
|
||||
recognition.lang = 'en-US'; // change to 'es-ES' etc if you want
|
||||
recognition.continuous = false;
|
||||
recognition.interimResults = true;
|
||||
|
||||
recognition.onresult = (event: SpeechRecognitionEvent) => {
|
||||
let finalText = '';
|
||||
let interimText = '';
|
||||
|
||||
for (let i = event.resultIndex; i < event.results.length; i++) {
|
||||
const result = event.results[i];
|
||||
if (result.isFinal) {
|
||||
finalText += result[0].transcript;
|
||||
} else {
|
||||
interimText += result[0].transcript;
|
||||
}
|
||||
}
|
||||
|
||||
// show interim in input while speaking
|
||||
if (interimText) {
|
||||
setInput(interimText);
|
||||
}
|
||||
|
||||
if (finalText) {
|
||||
const cleaned = finalText.trim();
|
||||
setInput(cleaned);
|
||||
// If you want auto-send after speech, uncomment:
|
||||
// if (cleaned) {
|
||||
// handleVoiceSend(cleaned);
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
recognition.onerror = (event: any) => {
|
||||
console.error('Speech recognition error', event.error);
|
||||
setIsListening(false);
|
||||
};
|
||||
|
||||
recognition.onend = () => {
|
||||
setIsListening(false);
|
||||
};
|
||||
|
||||
recognitionRef.current = recognition;
|
||||
|
||||
return () => {
|
||||
try {
|
||||
recognition.stop();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
recognitionRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const sendMessage = async (
|
||||
e?: React.FormEvent,
|
||||
overrideText?: string,
|
||||
) => {
|
||||
if (e) e.preventDefault();
|
||||
|
||||
const textToSend = overrideText ?? input;
|
||||
if (!textToSend.trim() || isSending) return;
|
||||
|
||||
const userMessage: Message = { role: 'user', content: textToSend };
|
||||
const updatedMessages = [...messages, userMessage];
|
||||
setMessages(updatedMessages);
|
||||
setInput('');
|
||||
setIsSending(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/chat', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
messages: updatedMessages,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to get response');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
|
||||
setMessages([
|
||||
...updatedMessages,
|
||||
{ role: 'assistant', content: data.text },
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Error sending message:', error);
|
||||
setMessages([
|
||||
...updatedMessages,
|
||||
{
|
||||
role: 'assistant',
|
||||
content:
|
||||
'Sorry, I encountered an error. Please try again.',
|
||||
},
|
||||
]);
|
||||
toast.error('Unable to send your message.');
|
||||
} finally {
|
||||
setIsSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Manual send from voice text (if you want to click after dictation)
|
||||
const handleVoiceSend = (text: string) => {
|
||||
sendMessage(undefined, text);
|
||||
};
|
||||
|
||||
const toggleListening = () => {
|
||||
const recognition = recognitionRef.current;
|
||||
if (!recognition) {
|
||||
console.warn('No recognition instance; browser may not support it');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isListening) {
|
||||
setInput('');
|
||||
setIsListening(true);
|
||||
try {
|
||||
recognition.start();
|
||||
} catch (err) {
|
||||
console.error('Error starting recognition', err);
|
||||
setIsListening(false);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
recognition.stop();
|
||||
} catch (err) {
|
||||
console.error('Error stopping recognition', err);
|
||||
}
|
||||
setIsListening(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDuration = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}m ${secs.toString().padStart(2, '0')}s`;
|
||||
};
|
||||
|
||||
const callStatusLabel = useMemo(() => {
|
||||
if (status === 'connecting') return 'Connecting...';
|
||||
if (status === 'active') return 'On Call';
|
||||
if (status === 'ended') return 'Call Ended';
|
||||
if (status === 'error') return 'Error';
|
||||
return 'Ready to Call';
|
||||
}, [status]);
|
||||
|
||||
const handleVoiceCall = async () => {
|
||||
setPermissionError(null);
|
||||
|
||||
if (status === 'active' || status === 'connecting') {
|
||||
await endCall();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
} catch (error) {
|
||||
console.error('Microphone permission denied', error);
|
||||
setPermissionError(
|
||||
'Microphone access is required. Please allow permission and use a modern browser.'
|
||||
);
|
||||
toast.error('Microphone access is required to start a call.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await startCall();
|
||||
toast.success('Call started.');
|
||||
} catch (error) {
|
||||
console.error('Unable to start call', error);
|
||||
toast.error('Unable to start the call.');
|
||||
}
|
||||
};
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] flex items-center justify-center">
|
||||
<div className="text-white text-xl animate-pulse">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Dashboard', href: '/dashboard' },
|
||||
{ label: 'Scheduled Calls', href: '/dashboard/scheduled-calls' },
|
||||
{ label: 'Voice Agent', href: '/dashboard/agent-settings' },
|
||||
{ label: 'Credits', href: '/dashboard/credits' },
|
||||
{ label: 'Notifications', href: '/dashboard/notifications' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white">
|
||||
<nav className="border-b border-white/10 bg-white/5 backdrop-blur-sm">
|
||||
<div className="max-w-5xl mx-auto px-6 py-4 flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-[#8b5cf6]/20 border border-[#8b5cf6]/40 flex items-center justify-center">
|
||||
<MessageSquare className="h-5 w-5 text-[#8b5cf6]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Chat</h1>
|
||||
<p className="text-xs text-[#9ca3af]">Talk to HolaCompi in real time</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`px-3 py-1.5 rounded-full border text-xs transition ${
|
||||
isActive
|
||||
? 'bg-[#8b5cf6]/20 border-[#8b5cf6]/40 text-white'
|
||||
: 'bg-white/5 border-white/10 text-[#9ca3af] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="max-w-5xl mx-auto px-6 py-8">
|
||||
<div className="bg-[#1a1625] rounded-3xl border border-[#8b5cf6]/20 p-6 shadow-2xl h-[70vh] flex flex-col">
|
||||
<div className="mb-4 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl p-4 flex flex-col gap-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`h-10 w-10 rounded-2xl flex items-center justify-center border ${
|
||||
status === 'active'
|
||||
? 'bg-red-500/20 border-red-400/40'
|
||||
: 'bg-[#8b5cf6]/20 border-[#8b5cf6]/40'
|
||||
}`}
|
||||
>
|
||||
<PhoneCall
|
||||
className={`h-5 w-5 ${
|
||||
status === 'active' ? 'text-red-300' : 'text-[#8b5cf6]'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{callStatusLabel}</p>
|
||||
<div className="text-xs text-[#9ca3af] flex items-center gap-2">
|
||||
{status === 'connecting' && (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
Connecting to Vapi...
|
||||
</>
|
||||
)}
|
||||
{status === 'active' && (
|
||||
<>
|
||||
<span className="h-2 w-2 rounded-full bg-red-400 animate-pulse" />
|
||||
Duration: {formatDuration(durationSeconds)}
|
||||
</>
|
||||
)}
|
||||
{status === 'idle' && 'Tap start to begin a voice call'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleVoiceCall}
|
||||
disabled={status === 'connecting'}
|
||||
className={`px-5 py-3 rounded-2xl font-semibold shadow-2xl transition flex items-center gap-2 ${
|
||||
status === 'active'
|
||||
? 'bg-red-500 text-white hover:bg-red-600'
|
||||
: 'bg-gradient-to-r from-[#8b5cf6] to-[#4f46e5] text-white hover:from-[#7c3aed] hover:to-[#4338ca]'
|
||||
} ${status === 'connecting' ? 'opacity-60 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<Mic className="h-4 w-4" />
|
||||
{status === 'active'
|
||||
? 'End Call'
|
||||
: status === 'connecting'
|
||||
? 'Connecting...'
|
||||
: 'Start Call'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(permissionError || callError) && (
|
||||
<div className="text-xs text-red-300">
|
||||
{permissionError || callError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === 'ended' && callStats && (
|
||||
<div className="rounded-2xl border border-white/10 bg-[#0f0b1a]/60 p-4">
|
||||
<p className="text-sm font-semibold">Call Summary</p>
|
||||
<div className="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs text-[#9ca3af]">
|
||||
<div>
|
||||
<p className="uppercase">Duration</p>
|
||||
<p className="text-white">{formatDuration(callStats.durationSeconds)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="uppercase">Credits Used</p>
|
||||
<p className="text-white">{callStats.creditsUsed}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="uppercase">Transcript</p>
|
||||
<button className="text-[#8b5cf6] hover:text-white transition">
|
||||
View Transcript
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto mb-4 space-y-4">
|
||||
{messages.length === 0 && (
|
||||
<div className="text-[#9ca3af] text-center mt-20">
|
||||
Start a conversation with your AI companion
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.map((message, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex ${
|
||||
message.role === 'user'
|
||||
? 'justify-end'
|
||||
: 'justify-start'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[70%] rounded-2xl p-4 shadow ${
|
||||
message.role === 'user'
|
||||
? 'bg-[#8b5cf6] text-white'
|
||||
: 'bg-[#0f0b1a] border border-white/10 text-white'
|
||||
}`}
|
||||
>
|
||||
<p className="whitespace-pre-wrap">
|
||||
{message.content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isSending && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-[#0f0b1a] border border-white/10 rounded-2xl p-4">
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-2 h-2 bg-[#9ca3af] rounded-full animate-bounce"></div>
|
||||
<div
|
||||
className="w-2 h-2 bg-[#9ca3af] rounded-full animate-bounce"
|
||||
style={{ animationDelay: '0.1s' }}
|
||||
></div>
|
||||
<div
|
||||
className="w-2 h-2 bg-[#9ca3af] rounded-full animate-bounce"
|
||||
style={{ animationDelay: '0.2s' }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => sendMessage(e)} className="flex gap-2 items-center">
|
||||
<div className="flex-1 flex items-center gap-2 bg-[#0f0b1a] border border-white/10 rounded-2xl px-4 py-3 focus-within:ring-2 focus-within:ring-[#8b5cf6] transition">
|
||||
<Sparkles className="h-4 w-4 text-[#8b5cf6]" />
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder={isListening ? 'Listening...' : 'Type your message...'}
|
||||
className="flex-1 bg-transparent text-white placeholder:text-[#9ca3af] focus:outline-none"
|
||||
disabled={isSending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleListening}
|
||||
className={`px-4 py-3 rounded-2xl font-semibold transition flex items-center gap-2 ${
|
||||
isListening
|
||||
? 'bg-red-500/80 hover:bg-red-500 text-white'
|
||||
: 'bg-white/5 border border-white/10 text-[#9ca3af] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{isListening ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSending || !input.trim()}
|
||||
className="bg-[#8b5cf6] hover:bg-[#7c3aed] disabled:bg-white/10 disabled:text-[#9ca3af] disabled:cursor-not-allowed px-6 py-3 rounded-2xl font-semibold transition flex items-center gap-2"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import type { DefaultLimits, Purchase } from '@/lib/types';
|
||||
import Link from 'next/link';
|
||||
import { CreditCard, Flame, SlidersHorizontal, Wallet } from 'lucide-react';
|
||||
import { getPurchasesByUser } from '@/lib/firestore';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function CreditsPage() {
|
||||
const { user, isLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const [balance, setBalance] = useState(0);
|
||||
const [limits, setLimits] = useState<DefaultLimits | null>(null);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [purchaseHistory, setPurchaseHistory] = useState<Purchase[]>([]);
|
||||
const [checkoutError, setCheckoutError] = useState<string | null>(null);
|
||||
const [isCreatingCheckout, setIsCreatingCheckout] = useState<string | null>(null);
|
||||
const getFallbackLimits = (userId: string): DefaultLimits => ({
|
||||
userId,
|
||||
defaultMaxMinutes: 15,
|
||||
defaultMaxCredits: 15,
|
||||
allowAutoExtension: false,
|
||||
maxExtraMinutes: 0,
|
||||
defaultMaxRecalls: 3,
|
||||
minDelayBetweenRecalls: 30,
|
||||
updatedAt: null as unknown as DefaultLimits['updatedAt'],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !user) {
|
||||
router.push('/auth');
|
||||
}
|
||||
}, [user, isLoading, router]);
|
||||
|
||||
const fetchCredits = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/credits');
|
||||
if (!response.ok) {
|
||||
toast.error('Unable to load credits right now.');
|
||||
setBalance(0);
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
setBalance(data.balance ?? 0);
|
||||
} catch (error) {
|
||||
toast.error('Unable to load credits. Please try again.');
|
||||
setBalance(0);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchLimits = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/credits/limits');
|
||||
if (!response.ok) {
|
||||
toast.error('Unable to load limits right now.');
|
||||
setLimits(getFallbackLimits(user?.uid ?? 'test-user-id'));
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
setLimits(data.limits ?? getFallbackLimits(user?.uid ?? 'test-user-id'));
|
||||
} catch (error) {
|
||||
toast.error('Unable to load limits. Please try again.');
|
||||
setLimits(getFallbackLimits(user?.uid ?? 'test-user-id'));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
fetchCredits();
|
||||
fetchLimits();
|
||||
getPurchasesByUser(user.uid)
|
||||
.then(setPurchaseHistory)
|
||||
.catch((error) => {
|
||||
console.error('Error loading purchases', error);
|
||||
toast.error('Unable to load purchases right now.');
|
||||
});
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const estimatedValue = useMemo(() => {
|
||||
return balance.toFixed(2);
|
||||
}, [balance]);
|
||||
|
||||
const updateLimits = (patch: Partial<DefaultLimits>) => {
|
||||
setLimits((prev) => (prev ? { ...prev, ...patch } : prev));
|
||||
};
|
||||
|
||||
const handleSaveLimits = async () => {
|
||||
if (!limits || isSaving) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
defaultMaxMinutes: Number(limits.defaultMaxMinutes),
|
||||
defaultMaxCredits: Number(limits.defaultMaxCredits),
|
||||
allowAutoExtension: limits.allowAutoExtension,
|
||||
maxExtraMinutes: Number(limits.maxExtraMinutes),
|
||||
defaultMaxRecalls: Number(limits.defaultMaxRecalls),
|
||||
minDelayBetweenRecalls: Number(limits.minDelayBetweenRecalls),
|
||||
};
|
||||
const response = await fetch('/api/credits/limits', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed');
|
||||
await fetchLimits();
|
||||
toast.success('Limits updated.');
|
||||
} catch (error) {
|
||||
console.error('Error saving limits', error);
|
||||
toast.error('Failed to save limits.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddCredits = async () => {
|
||||
const raw = window.prompt('Enter credits to add', '10');
|
||||
if (!raw) return;
|
||||
const amount = Number(raw);
|
||||
if (!Number.isFinite(amount) || amount <= 0) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/credits', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ amount }),
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed');
|
||||
const data = await response.json();
|
||||
setBalance(data.balance ?? balance);
|
||||
toast.success('Credits added successfully.');
|
||||
} catch (error) {
|
||||
console.error('Error adding credits', error);
|
||||
toast.error('Unable to add credits right now.');
|
||||
}
|
||||
};
|
||||
|
||||
const creditPackages = [
|
||||
{ id: 'credits-10', label: '10 Credits', price: '€10', value: 10, tag: '€1/credit' },
|
||||
{ id: 'credits-50', label: '50 Credits', price: '€45', value: 50, tag: 'Best Value' },
|
||||
{ id: 'credits-100', label: '100 Credits', price: '€85', value: 100, tag: 'Enterprise' },
|
||||
];
|
||||
|
||||
const handleCheckout = async (packageId: string) => {
|
||||
setCheckoutError(null);
|
||||
setIsCreatingCheckout(packageId);
|
||||
const selected = creditPackages.find((pack) => pack.id === packageId);
|
||||
if (!selected) {
|
||||
setCheckoutError('Invalid credit package.');
|
||||
setIsCreatingCheckout(null);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/stripe/checkout', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
credits: selected.value,
|
||||
amount: Number(selected.price.replace('€', '')),
|
||||
userId: user?.uid,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Unable to create a checkout session.');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.url) {
|
||||
toast.success('Redirecting to checkout...');
|
||||
window.location.href = data.url;
|
||||
} else {
|
||||
throw new Error('Missing Stripe checkout URL.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Checkout error', error);
|
||||
setCheckoutError('Unable to start checkout. Please try again.');
|
||||
toast.error('Checkout failed. Please try again.');
|
||||
} finally {
|
||||
setIsCreatingCheckout(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading || !limits) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#0f0b1a] text-white">
|
||||
<div className="animate-pulse text-lg">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Dashboard', href: '/dashboard' },
|
||||
{ label: 'Scheduled Calls', href: '/dashboard/scheduled-calls' },
|
||||
{ label: 'Voice Agent', href: '/dashboard/agent-settings' },
|
||||
{ label: 'Notifications', href: '/dashboard/notifications' },
|
||||
{ label: 'Settings', href: '/dashboard/settings' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white px-6 py-10">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<header className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => router.push('/dashboard')}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<h1 className="text-2xl font-semibold">Credits & Limits</h1>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`px-3 py-1.5 rounded-full border text-xs transition ${
|
||||
isActive
|
||||
? 'bg-[#8b5cf6]/20 border-[#8b5cf6]/40 text-white'
|
||||
: 'bg-white/5 border-white/10 text-[#9ca3af] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="bg-[#1a1625] border border-[#8b5cf6]/40 rounded-3xl p-6 shadow-2xl space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-[#9ca3af]">Current Balance</p>
|
||||
<h2 className="text-4xl font-semibold mt-2">{balance} credits</h2>
|
||||
<div className="text-sm text-[#9ca3af] mt-2 space-y-1">
|
||||
<p>≈ {balance} minutes of calls</p>
|
||||
<p>Estimated value: €{estimatedValue}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-14 w-14 rounded-2xl bg-[#8b5cf6]/20 border border-[#8b5cf6]/40 flex items-center justify-center">
|
||||
<Wallet className="h-6 w-6 text-[#8b5cf6]" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-white/5 border border-white/10 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-[#8b5cf6] to-[#4f46e5]"
|
||||
style={{ width: `${Math.min(balance, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddCredits}
|
||||
className="w-full md:w-auto px-6 py-3 rounded-2xl bg-[#8b5cf6] text-white font-semibold shadow-2xl hover:bg-[#7c3aed] transition flex items-center gap-2"
|
||||
>
|
||||
<CreditCard className="h-4 w-4" />
|
||||
Add Credits
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{(searchParams.get('success') || searchParams.get('canceled')) && (
|
||||
<div
|
||||
className={`rounded-2xl border p-4 text-sm ${
|
||||
searchParams.get('success')
|
||||
? 'border-emerald-400/40 bg-emerald-500/10 text-emerald-200'
|
||||
: 'border-red-400/40 bg-red-500/10 text-red-200'
|
||||
}`}
|
||||
>
|
||||
{searchParams.get('success')
|
||||
? 'Payment successful! Credits will appear shortly.'
|
||||
: 'Payment canceled. You can try again anytime.'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{creditPackages.map((pack) => (
|
||||
<div
|
||||
key={pack.id}
|
||||
className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 shadow-lg space-y-4"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-[#9ca3af]">Package</p>
|
||||
<h3 className="text-xl font-semibold">{pack.label}</h3>
|
||||
<p className="text-3xl font-semibold mt-2">{pack.price}</p>
|
||||
<p className="text-xs text-[#9ca3af] mt-2">{pack.tag}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCheckout(pack.id)}
|
||||
disabled={isCreatingCheckout === pack.id}
|
||||
className="w-full px-4 py-2 rounded-2xl bg-[#8b5cf6] text-white font-semibold shadow-2xl hover:bg-[#7c3aed] transition disabled:opacity-60"
|
||||
>
|
||||
{isCreatingCheckout === pack.id ? 'Redirecting...' : 'Buy Now'}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{checkoutError && (
|
||||
<div className="text-sm text-red-300">{checkoutError}</div>
|
||||
)}
|
||||
|
||||
<div className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 shadow-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Monthly Usage</h3>
|
||||
<p className="text-xs text-[#9ca3af]">Last 30 days</p>
|
||||
</div>
|
||||
<span className="text-sm text-emerald-400 flex items-center gap-1">
|
||||
<Flame className="h-4 w-4" />
|
||||
+12%
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-6 h-32 rounded-2xl bg-gradient-to-b from-[#8b5cf6]/40 to-transparent border border-[#8b5cf6]/30 flex items-end gap-3 px-4 pb-4">
|
||||
{[30, 40, 20, 55].map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-6 rounded-full bg-[#8b5cf6]/70"
|
||||
style={{ height: `${value}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 shadow-lg space-y-4">
|
||||
<h3 className="text-lg font-semibold flex items-center gap-2">
|
||||
<SlidersHorizontal className="h-5 w-5 text-[#8b5cf6]" />
|
||||
Default limits per task
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-xs uppercase text-[#9ca3af]">Max Minutes</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={limits.defaultMaxMinutes}
|
||||
onChange={(event) =>
|
||||
updateLimits({ defaultMaxMinutes: Number(event.target.value) })
|
||||
}
|
||||
className="mt-2 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>
|
||||
<div>
|
||||
<label className="text-xs uppercase text-[#9ca3af]">Max Credits</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={limits.defaultMaxCredits}
|
||||
onChange={(event) =>
|
||||
updateLimits({ defaultMaxCredits: Number(event.target.value) })
|
||||
}
|
||||
className="mt-2 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>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-xs uppercase text-[#9ca3af]">Max Recalls</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={limits.defaultMaxRecalls}
|
||||
onChange={(event) =>
|
||||
updateLimits({ defaultMaxRecalls: Number(event.target.value) })
|
||||
}
|
||||
className="mt-2 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>
|
||||
<div>
|
||||
<label className="text-xs uppercase text-[#9ca3af]">
|
||||
Min Delay (sec)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={limits.minDelayBetweenRecalls}
|
||||
onChange={(event) =>
|
||||
updateLimits({ minDelayBetweenRecalls: Number(event.target.value) })
|
||||
}
|
||||
className="mt-2 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>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSaveLimits}
|
||||
className="w-full md:w-auto px-6 py-2 rounded-full bg-white/5 border border-[#8b5cf6]/40 text-white hover:bg-[#8b5cf6]/20 transition"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save Limits'}
|
||||
</button>
|
||||
<p className="text-xs text-[#9ca3af]">
|
||||
Credits are consumed per task. One credit is approximately equal to 1 minute of
|
||||
processing time or 1 voice call minute. Rates vary by destination.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 shadow-lg space-y-4">
|
||||
<h3 className="text-lg font-semibold">Purchase History</h3>
|
||||
{purchaseHistory.length === 0 ? (
|
||||
<p className="text-sm text-[#9ca3af]">No purchases yet.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-[#9ca3af]">
|
||||
<tr>
|
||||
<th className="text-left pb-2 font-medium">Date</th>
|
||||
<th className="text-left pb-2 font-medium">Credits</th>
|
||||
<th className="text-left pb-2 font-medium">Amount</th>
|
||||
<th className="text-left pb-2 font-medium">Session</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-white/90">
|
||||
{purchaseHistory.map((purchase) => (
|
||||
<tr key={purchase.id} className="border-t border-white/5">
|
||||
<td className="py-3">
|
||||
{purchase.createdAt?.toDate
|
||||
? purchase.createdAt.toDate().toLocaleDateString()
|
||||
: '—'}
|
||||
</td>
|
||||
<td className="py-3">{purchase.credits}</td>
|
||||
<td className="py-3">€{purchase.amount}</td>
|
||||
<td className="py-3 text-xs text-[#9ca3af]">
|
||||
{purchase.stripeSessionId.slice(0, 8)}...
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
ChevronDown,
|
||||
LogOut,
|
||||
Settings,
|
||||
UserCircle,
|
||||
CreditCard,
|
||||
Twitter,
|
||||
Linkedin,
|
||||
Github,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { getAuth, signOut } from 'firebase/auth';
|
||||
import { app, db } from '@/lib/firebase';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import toast from 'react-hot-toast';
|
||||
import { doc, onSnapshot } from 'firebase/firestore';
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const { user } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const auth = getAuth(app);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [credits, setCredits] = useState<number | null>(null);
|
||||
const [showCreditsPulse, setShowCreditsPulse] = useState(false);
|
||||
const [isQuickBuyOpen, setIsQuickBuyOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) {
|
||||
setCredits(null);
|
||||
return;
|
||||
}
|
||||
const docRef = doc(db, 'users', user.uid);
|
||||
const unsubscribe = onSnapshot(
|
||||
docRef,
|
||||
(snapshot) => {
|
||||
const balance = snapshot.data()?.creditBalance ?? 0;
|
||||
setCredits((prev) => {
|
||||
if (prev !== null && prev !== balance) {
|
||||
setShowCreditsPulse(true);
|
||||
window.setTimeout(() => setShowCreditsPulse(false), 900);
|
||||
}
|
||||
return balance;
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
console.error('Failed to subscribe to credits', error);
|
||||
setCredits(0);
|
||||
}
|
||||
);
|
||||
return () => unsubscribe();
|
||||
}, [user]);
|
||||
|
||||
const handleSignOut = async () => {
|
||||
try {
|
||||
await signOut(auth);
|
||||
toast.success('Signed out.');
|
||||
router.push('/auth');
|
||||
} catch (error) {
|
||||
console.error('Sign out failed', error);
|
||||
toast.error('Unable to sign out. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const initial = user?.email?.[0]?.toUpperCase() ?? '?';
|
||||
|
||||
const pricingTiers = [
|
||||
{ label: '10 Credits', price: '€10', value: 10 },
|
||||
{ label: '50 Credits', price: '€45', value: 50 },
|
||||
{ label: '100 Credits', price: '€85', value: 100 },
|
||||
];
|
||||
|
||||
const handleQuickBuy = async (value: number, price: string) => {
|
||||
if (!user) {
|
||||
toast.error('Please sign in to purchase credits.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/api/stripe/checkout', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
credits: value,
|
||||
amount: Number(price.replace('€', '')),
|
||||
userId: user.uid,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Checkout failed');
|
||||
}
|
||||
const data = await response.json();
|
||||
if (data.url) {
|
||||
window.location.href = data.url;
|
||||
} else {
|
||||
throw new Error('Missing checkout URL');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Quick buy failed', error);
|
||||
toast.error('Unable to start checkout.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white flex flex-col">
|
||||
<header className="border-b border-white/10 bg-white/5 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
|
||||
<div className="text-sm text-[#9ca3af]">Dashboard</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.button
|
||||
onClick={() => setIsQuickBuyOpen(true)}
|
||||
className="relative rounded-full bg-[#8b5cf6]/20 border border-[#8b5cf6]/40 px-3 py-1.5 text-xs font-semibold text-white hover:bg-[#8b5cf6]/30 transition"
|
||||
animate={showCreditsPulse ? { scale: [1, 1.08, 1] } : { scale: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
💎 {credits ?? '—'} Credits
|
||||
{showCreditsPulse && (
|
||||
<span className="absolute inset-0 rounded-full bg-[#8b5cf6]/20 blur-md" />
|
||||
)}
|
||||
</motion.button>
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
className="flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 hover:bg-white/10 transition"
|
||||
>
|
||||
<span className="h-9 w-9 rounded-full bg-[#8b5cf6] text-white flex items-center justify-center font-semibold">
|
||||
{initial}
|
||||
</span>
|
||||
<ChevronDown className={`h-4 w-4 text-[#9ca3af] transition ${isOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 6, scale: 0.98 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="absolute right-0 mt-3 w-64 rounded-2xl border border-[#8b5cf6]/30 bg-[#1a1625] shadow-2xl overflow-hidden"
|
||||
>
|
||||
<div className="px-4 py-4 border-b border-white/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="h-10 w-10 rounded-full bg-[#8b5cf6]/30 border border-[#8b5cf6]/50 flex items-center justify-center font-semibold">
|
||||
{initial}
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold">Account</p>
|
||||
<p className="text-xs text-[#9ca3af]">{user?.email ?? 'Unknown user'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-[#9ca3af]">
|
||||
Credits: <span className="text-white">{credits ?? '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 space-y-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
router.push('/dashboard/settings');
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-[#9ca3af] hover:text-white hover:bg-white/5 transition"
|
||||
>
|
||||
<UserCircle className="h-4 w-4" />
|
||||
Profile
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
router.push('/dashboard/settings');
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-[#9ca3af] hover:text-white hover:bg-white/5 transition"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
Settings
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
router.push('/dashboard/credits');
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-[#9ca3af] hover:text-white hover:bg-white/5 transition"
|
||||
>
|
||||
<CreditCard className="h-4 w-4" />
|
||||
Billing
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
handleSignOut();
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-red-300 hover:text-red-200 hover:bg-red-500/10 transition"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1">{children}</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{isQuickBuyOpen && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setIsQuickBuyOpen(false)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.96, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.96, opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="w-full max-w-md rounded-3xl border border-[#8b5cf6]/30 bg-[#1a1625] p-6 shadow-2xl"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">Quick Buy Credits</h3>
|
||||
<p className="text-xs text-[#9ca3af] mt-1">Choose a package to top up.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsQuickBuyOpen(false)}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
aria-label="Close quick buy"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-5 space-y-3">
|
||||
{pricingTiers.map((tier) => (
|
||||
<button
|
||||
key={tier.value}
|
||||
onClick={() => handleQuickBuy(tier.value, tier.price)}
|
||||
className="w-full flex items-center justify-between rounded-2xl border border-white/10 bg-[#0f0b1a] px-4 py-3 text-sm text-white hover:border-[#8b5cf6]/40 hover:bg-[#8b5cf6]/10 transition"
|
||||
>
|
||||
<span>{tier.label}</span>
|
||||
<span className="text-[#9ca3af]">{tier.price}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsQuickBuyOpen(false);
|
||||
router.push('/dashboard/credits');
|
||||
}}
|
||||
className="mt-4 w-full px-4 py-2 rounded-2xl bg-[#8b5cf6] text-white font-semibold hover:bg-[#7c3aed] transition"
|
||||
>
|
||||
Go to Billing & Credits
|
||||
</button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<footer className="mt-auto border-t border-white/10 bg-[#120f1f]/80 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 text-center space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-center gap-4 text-sm text-[#9ca3af]">
|
||||
<a href="#" className="hover:text-white transition">Privacy</a>
|
||||
<span className="text-[#2f2544]">|</span>
|
||||
<a href="#" className="hover:text-white transition">Terms</a>
|
||||
<span className="text-[#2f2544]">|</span>
|
||||
<a href="#" className="hover:text-white transition">Support</a>
|
||||
<span className="text-[#2f2544]">|</span>
|
||||
<a href="#" className="hover:text-white transition">Docs</a>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-4 text-[#9ca3af]">
|
||||
<a href="#" aria-label="Twitter" className="hover:text-white transition">
|
||||
<Twitter className="h-4 w-4" />
|
||||
</a>
|
||||
<a href="#" aria-label="LinkedIn" className="hover:text-white transition">
|
||||
<Linkedin className="h-4 w-4" />
|
||||
</a>
|
||||
<a href="#" aria-label="GitHub" className="hover:text-white transition">
|
||||
<Github className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-xs text-[#9ca3af]">© 2026 HolaCompi. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import type { BookedAppointment, NotificationSettings } from '@/lib/types';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
const getFallbackSettings = (userId: string): NotificationSettings => ({
|
||||
userId,
|
||||
notifyOnSuccess: true,
|
||||
notifyOnFailure: true,
|
||||
emailSummary: false,
|
||||
autoAddToCalendar: false,
|
||||
googleCalendarConnected: false,
|
||||
iCloudCalendarConnected: false,
|
||||
createdAt: null as unknown as NotificationSettings['createdAt'],
|
||||
updatedAt: null as unknown as NotificationSettings['updatedAt'],
|
||||
});
|
||||
|
||||
export default function NotificationsPage() {
|
||||
const { user, isLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const [settings, setSettings] = useState<NotificationSettings | null>(null);
|
||||
const [appointments, setAppointments] = useState<BookedAppointment[]>([]);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !user) {
|
||||
router.push('/auth');
|
||||
}
|
||||
}, [user, isLoading, router]);
|
||||
|
||||
const fetchSettings = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/notifications');
|
||||
if (!response.ok) {
|
||||
toast.error('Unable to load notification settings.');
|
||||
setSettings(getFallbackSettings(user?.uid ?? 'test-user-id'));
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
setSettings(data.settings ?? getFallbackSettings(user?.uid ?? 'test-user-id'));
|
||||
} catch (error) {
|
||||
toast.error('Unable to load notification settings.');
|
||||
setSettings(getFallbackSettings(user?.uid ?? 'test-user-id'));
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAppointments = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/appointments');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load appointments');
|
||||
}
|
||||
const data = await response.json();
|
||||
setAppointments(data.appointments || []);
|
||||
} catch (error) {
|
||||
console.error('Error loading appointments', error);
|
||||
toast.error('Unable to load appointments.');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
fetchSettings();
|
||||
fetchAppointments();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const toggleSetting = (key: 'notifyOnSuccess' | 'notifyOnFailure' | 'emailSummary') => {
|
||||
if (!settings) return;
|
||||
setSettings({ ...settings, [key]: !settings[key] });
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!settings || isSaving) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
notifyOnSuccess: settings.notifyOnSuccess,
|
||||
notifyOnFailure: settings.notifyOnFailure,
|
||||
emailSummary: settings.emailSummary,
|
||||
autoAddToCalendar: settings.autoAddToCalendar,
|
||||
googleCalendarConnected: settings.googleCalendarConnected,
|
||||
iCloudCalendarConnected: settings.iCloudCalendarConnected,
|
||||
};
|
||||
const response = await fetch('/api/notifications', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed');
|
||||
await fetchSettings();
|
||||
toast.success('Notification settings saved.');
|
||||
} catch (error) {
|
||||
console.error('Error saving settings', error);
|
||||
toast.error('Unable to save settings.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading || !settings) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#0f0b1a] text-white">
|
||||
<div className="animate-pulse text-lg">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f0b1a] text-white px-6 py-10 pb-24">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<header className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => router.push('/dashboard')}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<h1 className="text-2xl font-semibold">Notifications & Calendar</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="text-sm px-4 py-2 rounded-full bg-[#8b5cf6]/20 text-white border border-[#8b5cf6]/40 hover:bg-[#8b5cf6]/30 transition"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 space-y-4 shadow-lg">
|
||||
<h2 className="text-sm uppercase text-[#9ca3af]">Preferences</h2>
|
||||
{[
|
||||
{ key: 'notifyOnSuccess', label: 'Successful booking' },
|
||||
{ key: 'notifyOnFailure', label: 'Call failure' },
|
||||
{ key: 'emailSummary', label: 'Email summary' },
|
||||
].map((item) => (
|
||||
<div key={item.key} className="flex items-center justify-between">
|
||||
<p className="text-sm">{item.label}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleSetting(item.key as keyof NotificationSettings)}
|
||||
className={`h-6 w-12 rounded-full transition flex items-center ${
|
||||
settings[item.key as keyof NotificationSettings]
|
||||
? 'bg-[#8b5cf6]'
|
||||
: 'bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`h-5 w-5 rounded-full bg-white shadow transform transition ${
|
||||
settings[item.key as keyof NotificationSettings]
|
||||
? 'translate-x-6'
|
||||
: 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 space-y-4 shadow-lg">
|
||||
<h2 className="text-sm uppercase text-[#9ca3af]">Integrations</h2>
|
||||
<button className="w-full rounded-2xl bg-[#8b5cf6] text-white py-3 font-semibold shadow-2xl hover:bg-[#7c3aed] transition">
|
||||
Connect Google Calendar
|
||||
</button>
|
||||
<button className="w-full rounded-2xl bg-[#8b5cf6] text-white py-3 font-semibold shadow-2xl hover:bg-[#7c3aed] transition">
|
||||
Connect iCloud Calendar
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#1a1625] border border-purple-500/20 rounded-3xl p-6 space-y-4 shadow-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm uppercase text-[#9ca3af]">Upcoming</h2>
|
||||
<button className="text-xs text-[#9ca3af] hover:text-white">
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{appointments.length === 0 && (
|
||||
<div className="rounded-2xl border border-purple-500/20 bg-white/5 p-4 text-sm text-[#9ca3af]">
|
||||
No upcoming appointments yet.
|
||||
</div>
|
||||
)}
|
||||
{appointments.map((appointment) => (
|
||||
<div
|
||||
key={appointment.id}
|
||||
className="rounded-2xl border border-purple-500/20 bg-[#1a1625] p-4 flex items-center justify-between"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs text-[#9ca3af]">
|
||||
{formatTimestamp(appointment.dateTime)}
|
||||
</p>
|
||||
<p className="text-sm font-semibold">{appointment.title}</p>
|
||||
{appointment.location && (
|
||||
<p className="text-xs text-[#9ca3af] mt-1">{appointment.location}</p>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`text-xs px-3 py-1 rounded-full border ${
|
||||
appointment.calendarEventId
|
||||
? 'bg-blue-500/20 text-blue-200 border-blue-400/30'
|
||||
: 'bg-emerald-500/20 text-emerald-200 border-emerald-400/30'
|
||||
}`}
|
||||
>
|
||||
{appointment.calendarEventId ? 'GOOGLE' : 'ICLOUD'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav className="fixed bottom-0 left-0 right-0 bg-[#0f0b1a] border-t border-purple-500/20 px-6 py-3">
|
||||
<div className="max-w-4xl mx-auto flex items-center justify-between text-xs text-[#9ca3af]">
|
||||
{[
|
||||
{ label: 'Home', path: '/dashboard' },
|
||||
{ label: 'Assistant', path: '/dashboard/agent-settings' },
|
||||
{ label: 'Schedule', path: '/dashboard/scheduled-calls' },
|
||||
{ label: 'Settings', path: '/dashboard/notifications' },
|
||||
].map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
onClick={() => router.push(item.path)}
|
||||
className="flex flex-col items-center gap-1 text-[#9ca3af] hover:text-white"
|
||||
>
|
||||
<span className="text-base">●</span>
|
||||
{item.label.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,979 @@
|
||||
'use client';
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Joyride, { CallBackProps, STATUS, EVENTS } from 'react-joyride';
|
||||
import {
|
||||
Bell,
|
||||
CalendarClock,
|
||||
CreditCard,
|
||||
Gauge,
|
||||
MessageSquare,
|
||||
Phone,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Coins,
|
||||
Settings,
|
||||
Sparkles,
|
||||
Timer,
|
||||
X,
|
||||
Search,
|
||||
Download,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
CartesianGrid,
|
||||
} from 'recharts';
|
||||
import toast from 'react-hot-toast';
|
||||
import { getUser, updateUserOnboardingCompleted } from '@/lib/firestore';
|
||||
|
||||
interface Call {
|
||||
id: number;
|
||||
contactName: string;
|
||||
date: string;
|
||||
duration: string;
|
||||
status: 'Completed' | 'Failed';
|
||||
credits: number;
|
||||
}
|
||||
|
||||
interface AnalyticsData {
|
||||
totalCalls: number;
|
||||
totalMinutes: number;
|
||||
avgDuration: number;
|
||||
creditsRemaining: number;
|
||||
}
|
||||
|
||||
interface CallAnalyticsPoint {
|
||||
day: string;
|
||||
calls: number;
|
||||
minutes: number;
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { user, isLoading, logout } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [creditsRemaining, setCreditsRemaining] = useState<number | null>(null);
|
||||
const [isStatsLoading, setIsStatsLoading] = useState(true);
|
||||
const [isLowCreditsDismissed, setIsLowCreditsDismissed] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [dateRange, setDateRange] = useState<'7' | '30' | 'custom'>('7');
|
||||
const [customStart, setCustomStart] = useState('');
|
||||
const [customEnd, setCustomEnd] = useState('');
|
||||
const [sortKey, setSortKey] = useState<'date' | 'duration' | 'status'>('date');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedCall, setSelectedCall] = useState<Call | null>(null);
|
||||
const [runTour, setRunTour] = useState(false);
|
||||
const [tourStepIndex, setTourStepIndex] = useState(0);
|
||||
|
||||
const tourSteps = useMemo(
|
||||
() => [
|
||||
{
|
||||
target: '[data-tour="welcome"]',
|
||||
content: 'Welcome to HolaCompi! Here is your dashboard overview.',
|
||||
placement: 'bottom',
|
||||
},
|
||||
{
|
||||
target: '[data-tour="buy-credits"]',
|
||||
content: 'Buy credits to power your calls whenever you need.',
|
||||
placement: 'left',
|
||||
},
|
||||
{
|
||||
target: '[data-tour="make-call"]',
|
||||
content: 'Schedule a call to reach clients instantly.',
|
||||
placement: 'top',
|
||||
},
|
||||
{
|
||||
target: '[data-tour="view-settings"]',
|
||||
content: 'Adjust preferences and manage your account settings here.',
|
||||
placement: 'bottom',
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const mockChartData: CallAnalyticsPoint[] = [
|
||||
{ day: 'Mon', calls: 8, minutes: 24 },
|
||||
{ day: 'Tue', calls: 12, minutes: 38 },
|
||||
{ day: 'Wed', calls: 6, minutes: 19 },
|
||||
{ day: 'Thu', calls: 10, minutes: 31 },
|
||||
{ day: 'Fri', calls: 7, minutes: 22 },
|
||||
{ day: 'Sat', calls: 2, minutes: 12 },
|
||||
{ day: 'Sun', calls: 2, minutes: 10 },
|
||||
];
|
||||
|
||||
const mockRecentCalls: Call[] = [
|
||||
{
|
||||
id: 1,
|
||||
contactName: 'Lucia Morales',
|
||||
date: '2026-01-21 18:30',
|
||||
duration: '4m 15s',
|
||||
status: 'Completed',
|
||||
credits: 4,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
contactName: 'Clinic Valencia',
|
||||
date: '2026-01-21 14:20',
|
||||
duration: '2m 45s',
|
||||
status: 'Completed',
|
||||
credits: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
contactName: 'Miguel Ramos',
|
||||
date: '2026-01-20 16:10',
|
||||
duration: '5m 32s',
|
||||
status: 'Completed',
|
||||
credits: 6,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
contactName: 'Barcelona Dental',
|
||||
date: '2026-01-20 11:45',
|
||||
duration: '1m 23s',
|
||||
status: 'Failed',
|
||||
credits: 0,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
contactName: 'Sofia Ortega',
|
||||
date: '2026-01-19 09:15',
|
||||
duration: '3m 58s',
|
||||
status: 'Completed',
|
||||
credits: 4,
|
||||
},
|
||||
];
|
||||
|
||||
const analyticsData: AnalyticsData = useMemo(
|
||||
() => ({
|
||||
totalCalls: 47,
|
||||
totalMinutes: 156,
|
||||
avgDuration: 3.3,
|
||||
creditsRemaining: creditsRemaining ?? 0,
|
||||
}),
|
||||
[creditsRemaining]
|
||||
);
|
||||
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 16 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
const slideUp = {
|
||||
hidden: { opacity: 0, y: 24 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
const parseCallDate = (value: string) => new Date(value.replace(' ', 'T'));
|
||||
|
||||
const durationToSeconds = (value: string) => {
|
||||
const match = value.match(/(\d+)m\s*(\d+)s/);
|
||||
if (!match) return 0;
|
||||
return Number(match[1]) * 60 + Number(match[2]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !user) {
|
||||
router.push('/auth');
|
||||
}
|
||||
}, [user, isLoading, router]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCredits = async () => {
|
||||
setIsStatsLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/credits');
|
||||
if (!response.ok) {
|
||||
toast.error('Unable to load credits. Please try again.');
|
||||
setCreditsRemaining(0);
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
setCreditsRemaining(data.balance ?? 0);
|
||||
} catch (error) {
|
||||
console.error('Failed to load credits', error);
|
||||
toast.error('Unable to load credits. Please check your connection.');
|
||||
setCreditsRemaining(0);
|
||||
} finally {
|
||||
setIsStatsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (user) {
|
||||
fetchCredits();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
const dismissed = window.localStorage.getItem('lowCreditsBannerDismissed');
|
||||
setIsLowCreditsDismissed(dismissed === 'true');
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isActive = true;
|
||||
const loadOnboardingStatus = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
const userDoc = await getUser(user.uid);
|
||||
const completed = userDoc?.onboardingCompleted ?? false;
|
||||
if (!completed && isActive) {
|
||||
setRunTour(true);
|
||||
setTourStepIndex(0);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load onboarding status', error);
|
||||
}
|
||||
};
|
||||
loadOnboardingStatus();
|
||||
return () => {
|
||||
isActive = false;
|
||||
};
|
||||
}, [user]);
|
||||
|
||||
const handleDismissLowCredits = () => {
|
||||
setIsLowCreditsDismissed(true);
|
||||
if (typeof window !== 'undefined') {
|
||||
window.localStorage.setItem('lowCreditsBannerDismissed', 'true');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchTerm, dateRange, customStart, customEnd, sortKey, sortDirection]);
|
||||
|
||||
const filteredCalls = useMemo(() => {
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
const now = new Date();
|
||||
let startDate: Date | null = null;
|
||||
let endDate: Date | null = null;
|
||||
|
||||
if (dateRange === '7') {
|
||||
startDate = new Date(now);
|
||||
startDate.setDate(now.getDate() - 7);
|
||||
} else if (dateRange === '30') {
|
||||
startDate = new Date(now);
|
||||
startDate.setDate(now.getDate() - 30);
|
||||
} else if (dateRange === 'custom') {
|
||||
startDate = customStart ? new Date(customStart) : null;
|
||||
endDate = customEnd ? new Date(customEnd) : null;
|
||||
if (endDate) {
|
||||
endDate.setHours(23, 59, 59, 999);
|
||||
}
|
||||
}
|
||||
|
||||
return mockRecentCalls.filter((call) => {
|
||||
const matchesSearch =
|
||||
!normalizedSearch ||
|
||||
call.contactName.toLowerCase().includes(normalizedSearch);
|
||||
const callDate = parseCallDate(call.date);
|
||||
const afterStart = !startDate || callDate >= startDate;
|
||||
const beforeEnd = !endDate || callDate <= endDate;
|
||||
return matchesSearch && afterStart && beforeEnd;
|
||||
});
|
||||
}, [searchTerm, dateRange, customStart, customEnd, mockRecentCalls]);
|
||||
|
||||
const sortedCalls = useMemo(() => {
|
||||
const sorted = [...filteredCalls];
|
||||
sorted.sort((a, b) => {
|
||||
let comparison = 0;
|
||||
if (sortKey === 'date') {
|
||||
comparison = parseCallDate(a.date).getTime() - parseCallDate(b.date).getTime();
|
||||
} else if (sortKey === 'duration') {
|
||||
comparison = durationToSeconds(a.duration) - durationToSeconds(b.duration);
|
||||
} else {
|
||||
comparison = a.status.localeCompare(b.status);
|
||||
}
|
||||
return sortDirection === 'asc' ? comparison : -comparison;
|
||||
});
|
||||
return sorted;
|
||||
}, [filteredCalls, sortKey, sortDirection]);
|
||||
|
||||
const callsPerPage = 10;
|
||||
const totalPages = Math.max(1, Math.ceil(sortedCalls.length / callsPerPage));
|
||||
const paginatedCalls = sortedCalls.slice(
|
||||
(currentPage - 1) * callsPerPage,
|
||||
currentPage * callsPerPage
|
||||
);
|
||||
|
||||
const handleSort = (key: 'date' | 'duration' | 'status') => {
|
||||
if (sortKey === key) {
|
||||
setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
|
||||
return;
|
||||
}
|
||||
setSortKey(key);
|
||||
setSortDirection('desc');
|
||||
};
|
||||
|
||||
const handleExportCsv = () => {
|
||||
if (sortedCalls.length === 0) {
|
||||
toast.error('No calls available to export.');
|
||||
return;
|
||||
}
|
||||
const rows = [
|
||||
['Contact', 'Date', 'Duration', 'Status', 'Credits'],
|
||||
...sortedCalls.map((call) => [
|
||||
call.contactName,
|
||||
call.date,
|
||||
call.duration,
|
||||
call.status,
|
||||
call.credits.toString(),
|
||||
]),
|
||||
];
|
||||
const csvContent = rows
|
||||
.map((row) => row.map((value) => `"${value.replace(/"/g, '""')}"`).join(','))
|
||||
.join('\n');
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', 'recent-calls.csv');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleJoyride = async (data: CallBackProps) => {
|
||||
const { status, index, type } = data;
|
||||
if (type === EVENTS.STEP_AFTER) {
|
||||
setTourStepIndex(index + 1);
|
||||
}
|
||||
if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
|
||||
setRunTour(false);
|
||||
setTourStepIndex(0);
|
||||
if (user) {
|
||||
try {
|
||||
await updateUserOnboardingCompleted(user.uid, true);
|
||||
} catch (error) {
|
||||
console.error('Failed to save onboarding status', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white">
|
||||
<div className="text-center">
|
||||
<div className="animate-pulse text-2xl">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await logout();
|
||||
router.push('/auth');
|
||||
toast.success('Signed out successfully.');
|
||||
} catch (error) {
|
||||
console.error('Logout failed', error);
|
||||
toast.error('Unable to log out. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Scheduled Calls', href: '/dashboard/scheduled-calls', icon: CalendarClock },
|
||||
{ label: 'Voice Agent', href: '/dashboard/agent-settings', icon: Sparkles },
|
||||
{ label: 'Credits & Limits', href: '/dashboard/credits', icon: CreditCard },
|
||||
{ label: 'Notifications', href: '/dashboard/notifications', icon: Bell },
|
||||
{ label: 'Chat', href: '/dashboard/chat', icon: MessageSquare },
|
||||
{ label: 'Settings', href: '/dashboard/settings', icon: Settings },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white">
|
||||
<Joyride
|
||||
steps={tourSteps}
|
||||
run={runTour}
|
||||
stepIndex={tourStepIndex}
|
||||
continuous
|
||||
showSkipButton
|
||||
scrollToFirstStep
|
||||
disableOverlayClose
|
||||
callback={handleJoyride}
|
||||
locale={{ skip: 'Skip Tour', next: 'Next', last: 'Done' }}
|
||||
styles={{
|
||||
options: {
|
||||
primaryColor: '#8b5cf6',
|
||||
backgroundColor: '#1a1625',
|
||||
textColor: '#ffffff',
|
||||
overlayColor: 'rgba(15, 11, 26, 0.65)',
|
||||
arrowColor: '#1a1625',
|
||||
zIndex: 60,
|
||||
},
|
||||
tooltip: {
|
||||
borderRadius: 16,
|
||||
border: '1px solid rgba(139,92,246,0.35)',
|
||||
},
|
||||
buttonNext: {
|
||||
backgroundColor: '#8b5cf6',
|
||||
color: '#fff',
|
||||
},
|
||||
buttonSkip: {
|
||||
color: '#c7c5d1',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<nav className="border-b border-white/10 bg-white/5 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-[#8b5cf6]/20 border border-[#8b5cf6]/40 flex items-center justify-center">
|
||||
<Sparkles className="h-5 w-5 text-[#8b5cf6]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">HolaCompi</h1>
|
||||
<p className="text-xs text-[#9ca3af]">
|
||||
Your AI voice assistant dashboard
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="px-4 py-2 rounded-xl bg-red-500/10 hover:bg-red-500/20 text-red-300 border border-red-500/20 transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 pb-4">
|
||||
{navLinks.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-full border text-sm transition ${
|
||||
isActive
|
||||
? 'bg-[#8b5cf6]/20 border-[#8b5cf6]/50 text-white shadow-lg'
|
||||
: 'bg-white/5 border-white/10 text-[#9ca3af] hover:text-white hover:bg-white/10'
|
||||
}`}
|
||||
data-tour={item.label === 'Settings' ? 'view-settings' : undefined}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{!isLowCreditsDismissed && creditsRemaining !== null && creditsRemaining < 10 && (
|
||||
<motion.div
|
||||
initial={{ y: -20, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="sticky top-[72px] z-40"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="mt-4 rounded-2xl border border-yellow-400/40 bg-yellow-500/10 px-4 py-3 text-sm text-yellow-100 shadow-lg backdrop-blur-xl flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
⚠️ Running low on credits! You have {creditsRemaining} credits remaining.
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => router.push('/dashboard/credits')}
|
||||
className="px-3 py-1.5 rounded-full bg-[#8b5cf6] text-white text-xs font-semibold hover:bg-[#7c3aed] transition"
|
||||
>
|
||||
Buy More Credits
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDismissLowCredits}
|
||||
className="text-yellow-100 hover:text-white transition"
|
||||
aria-label="Dismiss low credits warning"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="space-y-10">
|
||||
<motion.div
|
||||
className="bg-[#1a1625] rounded-3xl border border-[#8b5cf6]/20 p-8 shadow-lg transition-transform hover:scale-[1.01]"
|
||||
variants={fadeInUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
data-tour="welcome"
|
||||
>
|
||||
<h2 className="text-3xl font-semibold mb-3">
|
||||
Welcome back, {user.name || user.email}! 👋
|
||||
</h2>
|
||||
<p className="text-[#9ca3af]">
|
||||
Schedule calls, monitor credits, and tune your voice agent.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xl font-semibold flex items-center gap-2">
|
||||
<Gauge className="h-5 w-5 text-[#8b5cf6]" />
|
||||
Usage Overview
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => router.push('/dashboard/credits')}
|
||||
className="text-xs text-[#9ca3af] hover:text-white transition animate-pulse"
|
||||
data-tour="buy-credits"
|
||||
>
|
||||
View credits →
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{(isStatsLoading ? new Array(4).fill(null) : [
|
||||
{
|
||||
label: 'Total Calls Made',
|
||||
value: `${analyticsData.totalCalls} calls`,
|
||||
icon: Phone,
|
||||
gradient: 'from-[#8b5cf6]/30 to-[#4f46e5]/30',
|
||||
},
|
||||
{
|
||||
label: 'Total Minutes Used',
|
||||
value: `${analyticsData.totalMinutes} minutes`,
|
||||
icon: Clock,
|
||||
gradient: 'from-[#4f46e5]/30 to-[#3b82f6]/30',
|
||||
},
|
||||
{
|
||||
label: 'Average Call Duration',
|
||||
value: `${analyticsData.avgDuration} minutes`,
|
||||
icon: TrendingUp,
|
||||
gradient: 'from-[#8b5cf6]/30 to-[#ec4899]/30',
|
||||
},
|
||||
{
|
||||
label: 'Credits Remaining',
|
||||
value:
|
||||
creditsRemaining === null
|
||||
? 'Loading...'
|
||||
: `${analyticsData.creditsRemaining} credits`,
|
||||
icon: Coins,
|
||||
gradient: 'from-[#10b981]/20 to-[#8b5cf6]/30',
|
||||
},
|
||||
]).map((card, index) => {
|
||||
if (isStatsLoading) {
|
||||
return (
|
||||
<div
|
||||
key={`skeleton-${index}`}
|
||||
className="bg-white/5 border border-white/10 rounded-2xl p-5 shadow-lg backdrop-blur-xl animate-pulse"
|
||||
>
|
||||
<div className="h-12 w-12 rounded-2xl bg-white/10 border border-white/10" />
|
||||
<div className="mt-4 h-3 w-24 rounded-full bg-white/10" />
|
||||
<div className="mt-3 h-6 w-32 rounded-full bg-white/10" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Icon = card.icon;
|
||||
const action =
|
||||
card.label === 'Total Calls Made'
|
||||
? () => {
|
||||
const section = document.getElementById('call-history');
|
||||
section?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
: card.label === 'Credits Remaining'
|
||||
? () => router.push('/dashboard/credits')
|
||||
: null;
|
||||
const isClickable = Boolean(action);
|
||||
return (
|
||||
<motion.div
|
||||
key={card.label}
|
||||
className={`group relative bg-white/5 border border-white/10 rounded-2xl p-5 shadow-lg backdrop-blur-xl transition hover:shadow-2xl ${
|
||||
isClickable ? 'cursor-pointer' : ''
|
||||
}`}
|
||||
variants={fadeInUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: index * 0.08, duration: 0.4, ease: 'easeOut' }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
onClick={action ?? undefined}
|
||||
>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition">
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#8b5cf6]/40 to-[#4f46e5]/30 blur-lg" />
|
||||
<div className="absolute inset-0 rounded-2xl border border-[#8b5cf6]/50" />
|
||||
</div>
|
||||
<div
|
||||
className={`relative rounded-2xl p-3 bg-gradient-to-r ${card.gradient} border border-white/10`}
|
||||
>
|
||||
<Icon className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<p className="text-xs uppercase text-[#9ca3af] mt-4">{card.label}</p>
|
||||
<p className="text-2xl font-semibold mt-2">{card.value}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
action?.();
|
||||
}}
|
||||
disabled={!isClickable}
|
||||
className={`mt-4 text-xs font-semibold text-[#c4b5fd] transition-all ${
|
||||
isClickable ? 'group-hover:text-white' : 'text-[#6b7280]'
|
||||
} opacity-0 group-hover:opacity-100 translate-y-1 group-hover:translate-y-0`}
|
||||
>
|
||||
View Details →
|
||||
</button>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-1 lg:grid-cols-5 gap-6">
|
||||
<motion.div
|
||||
className="lg:col-span-3 bg-[#1a1625] border border-white/10 rounded-3xl p-6 shadow-lg backdrop-blur-xl transition-transform hover:scale-[1.01]"
|
||||
variants={slideUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ duration: 0.45, ease: 'easeOut' }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Weekly Usage</h3>
|
||||
<p className="text-xs text-[#9ca3af]">Last 7 days</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-[#9ca3af]">
|
||||
<Phone className="h-4 w-4 text-[#8b5cf6]" />
|
||||
Calls & Minutes
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={mockChartData}>
|
||||
<CartesianGrid stroke="rgba(255,255,255,0.08)" strokeDasharray="4 4" />
|
||||
<XAxis dataKey="day" stroke="#9ca3af" />
|
||||
<YAxis stroke="#9ca3af" />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: '#1a1625',
|
||||
border: '1px solid rgba(139,92,246,0.3)',
|
||||
borderRadius: '12px',
|
||||
color: '#fff',
|
||||
}}
|
||||
formatter={(value: number, name: string) => [
|
||||
value,
|
||||
name === 'calls' ? 'Calls' : 'Minutes',
|
||||
]}
|
||||
labelFormatter={(label) => `Day: ${label}`}
|
||||
/>
|
||||
<Line type="monotone" dataKey="calls" stroke="#8b5cf6" strokeWidth={3} />
|
||||
<Line type="monotone" dataKey="minutes" stroke="#4f46e5" strokeWidth={3} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
id="call-history"
|
||||
className="lg:col-span-2 bg-[#1a1625] border border-white/10 rounded-3xl p-6 shadow-lg backdrop-blur-xl transition-transform hover:scale-[1.01]"
|
||||
variants={fadeInUp}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ duration: 0.4, delay: 0.1, ease: 'easeOut' }}
|
||||
>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-lg font-semibold">Recent Activity</h3>
|
||||
<Timer className="h-5 w-5 text-[#8b5cf6]" />
|
||||
</div>
|
||||
<button
|
||||
onClick={handleExportCsv}
|
||||
className="text-xs px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-[#9ca3af] hover:text-white hover:bg-white/10 transition flex items-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 mb-4">
|
||||
<div className="flex items-center gap-2 rounded-2xl bg-[#0f0b1a] border border-white/10 px-4 py-2">
|
||||
<Search className="h-4 w-4 text-[#9ca3af]" />
|
||||
<input
|
||||
value={searchTerm}
|
||||
onChange={(event) => setSearchTerm(event.target.value)}
|
||||
placeholder="Search by contact name"
|
||||
className="w-full bg-transparent text-sm text-white placeholder:text-[#9ca3af] focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<select
|
||||
value={dateRange}
|
||||
onChange={(event) => setDateRange(event.target.value as '7' | '30' | 'custom')}
|
||||
className="rounded-full bg-[#0f0b1a] border border-white/10 px-4 py-2 text-xs text-white focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
||||
>
|
||||
<option value="7">Last 7 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
<option value="custom">Custom range</option>
|
||||
</select>
|
||||
{dateRange === 'custom' && (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={customStart}
|
||||
onChange={(event) => setCustomStart(event.target.value)}
|
||||
className="rounded-full bg-[#0f0b1a] border border-white/10 px-4 py-2 text-xs text-white focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
||||
/>
|
||||
<span className="text-xs text-[#9ca3af]">to</span>
|
||||
<input
|
||||
type="date"
|
||||
value={customEnd}
|
||||
onChange={(event) => setCustomEnd(event.target.value)}
|
||||
className="rounded-full bg-[#0f0b1a] border border-white/10 px-4 py-2 text-xs text-white focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{sortedCalls.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center text-center py-12">
|
||||
<svg
|
||||
width="160"
|
||||
height="120"
|
||||
viewBox="0 0 160 120"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="12" y="18" width="136" height="84" rx="16" fill="#1f1a2e" />
|
||||
<rect x="28" y="34" width="104" height="12" rx="6" fill="#2f2544" />
|
||||
<rect x="28" y="54" width="72" height="10" rx="5" fill="#2f2544" />
|
||||
<rect x="28" y="72" width="88" height="10" rx="5" fill="#2f2544" />
|
||||
<circle cx="126" cy="72" r="18" fill="#2f2544" />
|
||||
<path
|
||||
d="M120 72l6 6 10-12"
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth="4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm text-[#9ca3af] mt-4">
|
||||
No calls match your filters yet.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-[#9ca3af]">
|
||||
<tr>
|
||||
<th className="text-left pb-2 font-medium">Contact</th>
|
||||
<th className="text-left pb-2 font-medium">
|
||||
<button
|
||||
onClick={() => handleSort('date')}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
>
|
||||
Date/Time {sortKey === 'date' ? (sortDirection === 'asc' ? '↑' : '↓') : ''}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-left pb-2 font-medium">
|
||||
<button
|
||||
onClick={() => handleSort('duration')}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
>
|
||||
Duration {sortKey === 'duration' ? (sortDirection === 'asc' ? '↑' : '↓') : ''}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-left pb-2 font-medium">
|
||||
<button
|
||||
onClick={() => handleSort('status')}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
>
|
||||
Status {sortKey === 'status' ? (sortDirection === 'asc' ? '↑' : '↓') : ''}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right pb-2 font-medium">Credits</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<motion.tbody
|
||||
className="text-white/90"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{ hidden: {}, visible: {} }}
|
||||
>
|
||||
{paginatedCalls.map((call, index) => (
|
||||
<motion.tr
|
||||
key={call.id}
|
||||
className="border-t border-white/5 cursor-pointer hover:bg-white/5 transition"
|
||||
variants={fadeInUp}
|
||||
transition={{ delay: 0.1 + index * 0.08, duration: 0.35 }}
|
||||
onClick={() => setSelectedCall(call)}
|
||||
>
|
||||
<td className="py-3">{call.contactName}</td>
|
||||
<td className="py-3">{call.date}</td>
|
||||
<td className="py-3">{call.duration}</td>
|
||||
<td className="py-3">
|
||||
<span
|
||||
className={`px-2.5 py-1 rounded-full text-xs border ${
|
||||
call.status === 'Completed'
|
||||
? 'bg-emerald-500/20 text-emerald-200 border-emerald-400/30'
|
||||
: 'bg-red-500/20 text-red-200 border-red-400/30'
|
||||
}`}
|
||||
>
|
||||
{call.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 text-right">{call.credits}</td>
|
||||
</motion.tr>
|
||||
))}
|
||||
</motion.tbody>
|
||||
</table>
|
||||
<div className="flex items-center justify-between pt-4 text-xs text-[#9ca3af]">
|
||||
<span>
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-2 py-1 rounded-full border border-white/10 text-[#9ca3af] hover:text-white disabled:opacity-40"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-2 py-1 rounded-full border border-white/10 text-[#9ca3af] hover:text-white disabled:opacity-40"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<button
|
||||
onClick={() => router.push('/dashboard/chat')}
|
||||
className="bg-[#1a1625] rounded-2xl border border-white/10 p-6 shadow-lg hover:-translate-y-1 hover:border-[#8b5cf6]/40 hover:shadow-2xl transition text-left w-full hover:scale-[1.01]"
|
||||
>
|
||||
<MessageSquare className="h-10 w-10 text-[#8b5cf6] mb-4" />
|
||||
<h3 className="text-xl font-semibold mb-2">Chat</h3>
|
||||
<p className="text-[#9ca3af] text-sm">
|
||||
Talk to your AI companion in real-time.
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => router.push('/dashboard/scheduled-calls')}
|
||||
className="bg-[#1a1625] rounded-2xl border border-white/10 p-6 shadow-lg hover:-translate-y-1 hover:border-[#8b5cf6]/40 hover:shadow-2xl transition text-left w-full hover:scale-[1.01]"
|
||||
data-tour="make-call"
|
||||
>
|
||||
<CalendarClock className="h-10 w-10 text-[#8b5cf6] mb-4" />
|
||||
<h3 className="text-xl font-semibold mb-2">Scheduled Calls</h3>
|
||||
<p className="text-[#9ca3af] text-sm">
|
||||
Plan new calls and manage your queue.
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => router.push('/dashboard/credits')}
|
||||
className="bg-[#1a1625] rounded-2xl border border-white/10 p-6 shadow-lg hover:-translate-y-1 hover:border-[#8b5cf6]/40 hover:shadow-2xl transition text-left w-full hover:scale-[1.01]"
|
||||
>
|
||||
<CreditCard className="h-10 w-10 text-[#8b5cf6] mb-4" />
|
||||
<h3 className="text-xl font-semibold mb-2">Credits & Limits</h3>
|
||||
<p className="text-[#9ca3af] text-sm">
|
||||
Track balance and adjust default call limits.
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-[#8b5cf6]/10 to-[#4f46e5]/10 rounded-2xl border border-[#8b5cf6]/20 p-6 shadow-lg transition-transform hover:scale-[1.01]">
|
||||
<h3 className="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-[#8b5cf6]" />
|
||||
Account Status
|
||||
</h3>
|
||||
<p className="text-sm text-[#9ca3af] mb-3">
|
||||
Email: <span className="text-white">{user.email}</span>
|
||||
</p>
|
||||
<p className="text-sm text-[#9ca3af]">
|
||||
UID: <span className="font-mono text-xs text-white/80">{user.uid}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<AnimatePresence>
|
||||
{selectedCall && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setSelectedCall(null)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.96, opacity: 0, y: 20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.96, opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="w-full max-w-md rounded-3xl border border-[#8b5cf6]/30 bg-[#1a1625] p-6 shadow-2xl"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">{selectedCall.contactName}</h3>
|
||||
<p className="text-xs text-[#9ca3af] mt-1">{selectedCall.date}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedCall(null)}
|
||||
className="text-[#9ca3af] hover:text-white transition"
|
||||
aria-label="Close call details"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-5 space-y-3 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[#9ca3af]">Duration</span>
|
||||
<span className="text-white">{selectedCall.duration}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[#9ca3af]">Status</span>
|
||||
<span
|
||||
className={`px-2.5 py-1 rounded-full text-xs border ${
|
||||
selectedCall.status === 'Completed'
|
||||
? 'bg-emerald-500/20 text-emerald-200 border-emerald-400/30'
|
||||
: 'bg-red-500/20 text-red-200 border-red-400/30'
|
||||
}`}
|
||||
>
|
||||
{selectedCall.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[#9ca3af]">Credits Used</span>
|
||||
<span className="text-white">{selectedCall.credits}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
onClick={() => setSelectedCall(null)}
|
||||
className="px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-white hover:bg-white/10 transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,423 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { motion } from 'framer-motion';
|
||||
import { z } from 'zod';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Bell,
|
||||
CreditCard,
|
||||
Lock,
|
||||
Mail,
|
||||
Phone,
|
||||
ShieldCheck,
|
||||
SlidersHorizontal,
|
||||
User,
|
||||
} from 'lucide-react';
|
||||
import { getAuth, sendPasswordResetEmail, updateProfile } from 'firebase/auth';
|
||||
import { app } from '@/lib/firebase';
|
||||
import { getPurchasesByUser, updateUserOnboardingCompleted } from '@/lib/firestore';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const profileSchema = z.object({
|
||||
displayName: z.string().trim().min(2, 'Display name must be at least 2 characters.'),
|
||||
phone: z
|
||||
.string()
|
||||
.trim()
|
||||
.optional()
|
||||
.transform((value) => (value ? value : undefined))
|
||||
.refine(
|
||||
(value) => !value || /^\+?[0-9\s\-()]{7,20}$/.test(value),
|
||||
'Enter a valid phone number.'
|
||||
),
|
||||
});
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
show: { opacity: 1, transition: { staggerChildren: 0.08 } },
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: 14 },
|
||||
show: { opacity: 1, y: 0, transition: { duration: 0.4 } },
|
||||
};
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { user, isLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const auth = getAuth(app);
|
||||
const firebaseUser = auth.currentUser;
|
||||
|
||||
const [profileForm, setProfileForm] = useState({
|
||||
displayName: user?.name || '',
|
||||
phone: user?.phoneNumber || '',
|
||||
});
|
||||
const [profileErrors, setProfileErrors] = useState<{ displayName?: string; phone?: string }>(
|
||||
{}
|
||||
);
|
||||
const [isSavingProfile, setIsSavingProfile] = useState(false);
|
||||
const [resetStatus, setResetStatus] = useState<string | null>(null);
|
||||
|
||||
const [emailNotifications, setEmailNotifications] = useState(true);
|
||||
const [callAlerts, setCallAlerts] = useState(true);
|
||||
const [weeklyReports, setWeeklyReports] = useState(false);
|
||||
|
||||
const [totalCreditsPurchased, setTotalCreditsPurchased] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !user) {
|
||||
router.push('/auth');
|
||||
}
|
||||
}, [user, isLoading, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
getPurchasesByUser(user.uid)
|
||||
.then((purchases) => {
|
||||
const total = purchases.reduce((sum, purchase) => sum + (purchase.credits || 0), 0);
|
||||
setTotalCreditsPurchased(total);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to load purchases', error);
|
||||
toast.error('Unable to load purchases.');
|
||||
setTotalCreditsPurchased(0);
|
||||
});
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const creationDate = useMemo(() => {
|
||||
const createdAt = firebaseUser?.metadata?.creationTime;
|
||||
if (!createdAt) return 'Unknown';
|
||||
return new Date(createdAt).toLocaleDateString();
|
||||
}, [firebaseUser]);
|
||||
|
||||
const handleProfileChange = (key: 'displayName' | 'phone', value: string) => {
|
||||
setProfileForm((prev) => ({ ...prev, [key]: value }));
|
||||
setProfileErrors((prev) => ({ ...prev, [key]: undefined }));
|
||||
};
|
||||
|
||||
const handleSaveProfile = async () => {
|
||||
if (!firebaseUser) return;
|
||||
const result = profileSchema.safeParse(profileForm);
|
||||
if (!result.success) {
|
||||
const errors: { displayName?: string; phone?: string } = {};
|
||||
result.error.issues.forEach((issue) => {
|
||||
const field = issue.path[0] as 'displayName' | 'phone';
|
||||
errors[field] = issue.message;
|
||||
});
|
||||
setProfileErrors(errors);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSavingProfile(true);
|
||||
try {
|
||||
await updateProfile(firebaseUser, { displayName: result.data.displayName.trim() });
|
||||
setProfileForm((prev) => ({ ...prev, displayName: result.data.displayName.trim() }));
|
||||
toast.success('Profile updated.');
|
||||
} catch (error) {
|
||||
console.error('Error updating profile', error);
|
||||
setProfileErrors({ displayName: 'Failed to update profile. Try again.' });
|
||||
toast.error('Unable to update profile.');
|
||||
} finally {
|
||||
setIsSavingProfile(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasswordReset = async () => {
|
||||
if (!firebaseUser?.email) return;
|
||||
setResetStatus(null);
|
||||
try {
|
||||
await sendPasswordResetEmail(auth, firebaseUser.email);
|
||||
setResetStatus('Password reset email sent.');
|
||||
toast.success('Password reset email sent.');
|
||||
} catch (error) {
|
||||
console.error('Password reset failed', error);
|
||||
setResetStatus('Unable to send reset email. Try again.');
|
||||
toast.error('Unable to send reset email.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestartTour = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
await updateUserOnboardingCompleted(user.uid, false);
|
||||
toast.success('Tour restarted. Redirecting...');
|
||||
router.push('/dashboard');
|
||||
} catch (error) {
|
||||
console.error('Failed to restart tour', error);
|
||||
toast.error('Unable to restart tour.');
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white">
|
||||
<div className="animate-pulse text-lg">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Dashboard', href: '/dashboard' },
|
||||
{ label: 'Scheduled Calls', href: '/dashboard/scheduled-calls' },
|
||||
{ label: 'Voice Agent', href: '/dashboard/agent-settings' },
|
||||
{ label: 'Credits', href: '/dashboard/credits' },
|
||||
{ label: 'Notifications', href: '/dashboard/notifications' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#0f0b1a] via-[#1b1330] to-[#0f1b3d] text-white px-6 py-10">
|
||||
<motion.div
|
||||
className="max-w-5xl mx-auto space-y-6"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
>
|
||||
<motion.header
|
||||
variants={cardVariants}
|
||||
className="flex flex-wrap items-center justify-between gap-4"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-2xl bg-[#8b5cf6]/20 border border-[#8b5cf6]/40 flex items-center justify-center">
|
||||
<SlidersHorizontal className="h-5 w-5 text-[#8b5cf6]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Settings</h1>
|
||||
<p className="text-xs text-[#9ca3af]">Manage preferences and account details</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{navLinks.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
return (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className={`px-3 py-1.5 rounded-full border text-xs transition ${
|
||||
isActive
|
||||
? 'bg-[#8b5cf6]/20 border-[#8b5cf6]/40 text-white'
|
||||
: 'bg-white/5 border-white/10 text-[#9ca3af] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.header>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<motion.div variants={cardVariants} className="lg:col-span-2 space-y-6">
|
||||
<div className="bg-[#1a1625] border border-white/10 rounded-3xl p-6 shadow-2xl space-y-5">
|
||||
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||
<User className="h-5 w-5 text-[#8b5cf6]" />
|
||||
User Profile
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-[#0f0b1a] border border-white/10 rounded-2xl p-4">
|
||||
<p className="text-xs uppercase text-[#9ca3af] flex items-center gap-2">
|
||||
<Mail className="h-4 w-4" />
|
||||
Email
|
||||
</p>
|
||||
<p className="text-sm mt-2">{user.email}</p>
|
||||
</div>
|
||||
<div className="bg-[#0f0b1a] border border-white/10 rounded-2xl p-4">
|
||||
<p className="text-xs uppercase text-[#9ca3af] flex items-center gap-2">
|
||||
<User className="h-4 w-4" />
|
||||
Display Name
|
||||
</p>
|
||||
<input
|
||||
value={profileForm.displayName}
|
||||
onChange={(event) => handleProfileChange('displayName', event.target.value)}
|
||||
className="mt-2 w-full rounded-xl bg-transparent border border-white/10 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
{profileErrors.displayName && (
|
||||
<p className="text-xs text-red-300 mt-2">{profileErrors.displayName}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="bg-[#0f0b1a] border border-white/10 rounded-2xl p-4 md:col-span-2">
|
||||
<p className="text-xs uppercase text-[#9ca3af] flex items-center gap-2">
|
||||
<Phone className="h-4 w-4" />
|
||||
Phone
|
||||
</p>
|
||||
<input
|
||||
value={profileForm.phone}
|
||||
onChange={(event) => handleProfileChange('phone', event.target.value)}
|
||||
className="mt-2 w-full rounded-xl bg-transparent border border-white/10 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5cf6]"
|
||||
placeholder="+34 600 000 000"
|
||||
/>
|
||||
{profileErrors.phone && (
|
||||
<p className="text-xs text-red-300 mt-2">{profileErrors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSaveProfile}
|
||||
disabled={isSavingProfile}
|
||||
className="px-4 py-2 rounded-2xl bg-[#8b5cf6] text-white font-semibold shadow-2xl hover:bg-[#7c3aed] transition disabled:opacity-60"
|
||||
>
|
||||
{isSavingProfile ? 'Saving...' : 'Save Profile'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1a1625] border border-white/10 rounded-3xl p-6 shadow-2xl space-y-5">
|
||||
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||
<ShieldCheck className="h-5 w-5 text-[#8b5cf6]" />
|
||||
Security
|
||||
</h2>
|
||||
<p className="text-sm text-[#9ca3af]">
|
||||
Reset your password to keep your account secure.
|
||||
</p>
|
||||
<button
|
||||
onClick={handlePasswordReset}
|
||||
className="w-full md:w-auto px-4 py-2 rounded-2xl bg-white/5 border border-white/10 text-white hover:bg-white/10 transition flex items-center gap-2"
|
||||
>
|
||||
<Lock className="h-4 w-4" />
|
||||
Change Password
|
||||
</button>
|
||||
{resetStatus && <p className="text-xs text-[#9ca3af]">{resetStatus}</p>}
|
||||
</div>
|
||||
|
||||
<div className="bg-[#1a1625] border border-white/10 rounded-3xl p-6 shadow-2xl space-y-5">
|
||||
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||
<Bell className="h-5 w-5 text-[#8b5cf6]" />
|
||||
Notification Preferences
|
||||
</h2>
|
||||
{[
|
||||
{
|
||||
key: 'email',
|
||||
label: 'Email notifications',
|
||||
value: emailNotifications,
|
||||
setter: setEmailNotifications,
|
||||
},
|
||||
{
|
||||
key: 'calls',
|
||||
label: 'Call alerts',
|
||||
value: callAlerts,
|
||||
setter: setCallAlerts,
|
||||
},
|
||||
{
|
||||
key: 'reports',
|
||||
label: 'Weekly usage reports',
|
||||
value: weeklyReports,
|
||||
setter: setWeeklyReports,
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.key} className="flex items-center justify-between">
|
||||
<p className="text-sm">{item.label}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => item.setter(!item.value)}
|
||||
className={`h-6 w-12 rounded-full transition flex items-center ${
|
||||
item.value ? 'bg-[#8b5cf6]' : 'bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`h-5 w-5 rounded-full bg-white shadow transform transition ${
|
||||
item.value ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-xs text-[#9ca3af]">
|
||||
Preferences save locally for now. TODO: persist in Firestore.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={cardVariants} className="space-y-6">
|
||||
<div className="bg-[#1a1625] border border-white/10 rounded-3xl p-6 shadow-2xl space-y-4">
|
||||
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||
<CreditCard className="h-5 w-5 text-[#8b5cf6]" />
|
||||
Account Info
|
||||
</h2>
|
||||
<div className="bg-[#0f0b1a] border border-white/10 rounded-2xl p-4 space-y-2">
|
||||
<p className="text-xs uppercase text-[#9ca3af]">Member Since</p>
|
||||
<p className="text-sm">{creationDate}</p>
|
||||
</div>
|
||||
<div className="bg-[#0f0b1a] border border-white/10 rounded-2xl p-4 space-y-2">
|
||||
<p className="text-xs uppercase text-[#9ca3af]">Total Credits Purchased</p>
|
||||
<p className="text-sm">
|
||||
{totalCreditsPurchased === null ? 'Loading…' : totalCreditsPurchased}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => router.push('/dashboard/credits')}
|
||||
className="w-full px-4 py-2 rounded-2xl bg-[#8b5cf6] text-white font-semibold shadow-2xl hover:bg-[#7c3aed] transition"
|
||||
>
|
||||
Go to Billing & Credits
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRestartTour}
|
||||
className="w-full px-4 py-2 rounded-2xl bg-white/5 border border-white/10 text-white hover:bg-white/10 transition"
|
||||
>
|
||||
Restart Tour
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user