Merge remote-tracking branch 'origin/main' into master
This commit is contained in:
@@ -0,0 +1,861 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useCallback, Component, type ReactNode } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { CalendarEvent, EventType } from "@/types"
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useUser } from "@/providers/user-provider"
|
||||
import { useNotifications } from "@/providers/notification-provider"
|
||||
import { toast } from "sonner"
|
||||
import {
|
||||
ChevronLeft, ChevronRight, Plus, Calendar, Clock, Phone,
|
||||
Video, Users, CheckCircle2, XCircle, RotateCcw, Loader2,
|
||||
ArrowUpRight, Zap, StickyNote,
|
||||
} from "lucide-react"
|
||||
|
||||
const EVENT_ICONS: Record<EventType, React.ElementType> = {
|
||||
meeting: Users,
|
||||
call: Phone,
|
||||
chat: Video,
|
||||
follow_up: Clock,
|
||||
demo: Calendar,
|
||||
other: Calendar,
|
||||
}
|
||||
|
||||
function eventVars(type: EventType) {
|
||||
return `--event-${type}`
|
||||
}
|
||||
|
||||
function eventBgStyle(type: EventType): React.CSSProperties {
|
||||
const v = eventVars(type)
|
||||
return {
|
||||
backgroundColor: `hsl(var(${v}) / 0.1)`,
|
||||
color: `hsl(var(${v}))`,
|
||||
borderColor: `hsl(var(${v}) / 0.25)`,
|
||||
}
|
||||
}
|
||||
|
||||
function eventDotStyle(type: EventType): React.CSSProperties {
|
||||
return { backgroundColor: `hsl(var(--event-${type}))` }
|
||||
}
|
||||
|
||||
function getDaysInMonth(year: number, month: number) {
|
||||
return new Date(year, month + 1, 0).getDate()
|
||||
}
|
||||
|
||||
function getFirstDayOfMonth(year: number, month: number) {
|
||||
return new Date(year, month, 1).getDay()
|
||||
}
|
||||
|
||||
const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
|
||||
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
|
||||
|
||||
function formatTime(iso: string) {
|
||||
return new Date(iso).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true })
|
||||
}
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
|
||||
}
|
||||
|
||||
export default function CalendarPage() {
|
||||
const router = useRouter()
|
||||
const { user } = useUser()
|
||||
const { addNotification } = useNotifications()
|
||||
const [events, setEvents] = useState<CalendarEvent[]>([])
|
||||
const [upcomingEvents, setUpcomingEvents] = useState<CalendarEvent[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [today] = useState(new Date())
|
||||
const [currentMonth, setCurrentMonth] = useState(today.getMonth())
|
||||
const [currentYear, setCurrentYear] = useState(today.getFullYear())
|
||||
const [selectedDate, setSelectedDate] = useState<Date | null>(null)
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null)
|
||||
const [detailEvent, setDetailEvent] = useState<CalendarEvent | null>(null)
|
||||
|
||||
const [users, setUsers] = useState<{ id: string; name: string; email: string }[]>([])
|
||||
const [formTitle, setFormTitle] = useState("")
|
||||
const [formDescription, setFormDescription] = useState("")
|
||||
const [formType, setFormType] = useState<EventType>("meeting")
|
||||
const [formDate, setFormDate] = useState("")
|
||||
const [formTime, setFormTime] = useState("")
|
||||
const [formDuration, setFormDuration] = useState("30")
|
||||
const [formParticipantId, setFormParticipantId] = useState("")
|
||||
const [formSaving, setFormSaving] = useState(false)
|
||||
const [editNotes, setEditNotes] = useState(false)
|
||||
const [notesText, setNotesText] = useState("")
|
||||
const [notesSaving, setNotesSaving] = useState(false)
|
||||
|
||||
const fetchMonthEvents = useCallback(async () => {
|
||||
const start = new Date(currentYear, currentMonth, 1).toISOString()
|
||||
const end = new Date(currentYear, currentMonth + 1, 0, 23, 59, 59).toISOString()
|
||||
const res = await fetch(`/api/events?start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setEvents(data.events || [])
|
||||
}
|
||||
}, [currentYear, currentMonth])
|
||||
|
||||
const fetchUpcomingEvents = useCallback(async () => {
|
||||
const start = new Date().toISOString()
|
||||
const end = new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString()
|
||||
const res = await fetch(`/api/events?start=${encodeURIComponent(start)}&end=${encodeURIComponent(end)}&status=scheduled`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setUpcomingEvents((data.events || []).slice(0, 10))
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) { router.push("/login"); return }
|
||||
fetch("/api/event-users")
|
||||
.then((r) => r.json())
|
||||
.then((data) => setUsers(data.users || []))
|
||||
.catch(() => {})
|
||||
}, [user, router])
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
fetchMonthEvents().catch(() => toast.error("Failed to load events")).finally(() => setLoading(false))
|
||||
}, [fetchMonthEvents])
|
||||
|
||||
useEffect(() => {
|
||||
fetchUpcomingEvents().catch(() => {})
|
||||
}, [fetchUpcomingEvents])
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
fetchMonthEvents().catch(() => {})
|
||||
fetchUpcomingEvents().catch(() => {})
|
||||
}, 15000)
|
||||
return () => clearInterval(interval)
|
||||
}, [fetchMonthEvents, fetchUpcomingEvents])
|
||||
|
||||
const daysInMonth = getDaysInMonth(currentYear, currentMonth)
|
||||
const firstDay = getFirstDayOfMonth(currentYear, currentMonth)
|
||||
|
||||
const prevMonth = () => {
|
||||
if (currentMonth === 0) { setCurrentMonth(11); setCurrentYear(currentYear - 1) }
|
||||
else setCurrentMonth(currentMonth - 1)
|
||||
}
|
||||
|
||||
const nextMonth = () => {
|
||||
if (currentMonth === 11) { setCurrentMonth(0); setCurrentYear(currentYear + 1) }
|
||||
else setCurrentMonth(currentMonth + 1)
|
||||
}
|
||||
|
||||
const getEventsForDay = useCallback((day: number) => {
|
||||
const dateStr = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`
|
||||
return events.filter((e) => e.startTime.startsWith(dateStr))
|
||||
}, [events, currentYear, currentMonth])
|
||||
|
||||
const isToday = (day: number) => {
|
||||
return today.getDate() === day && today.getMonth() === currentMonth && today.getFullYear() === currentYear
|
||||
}
|
||||
|
||||
const openCreateDialog = (day?: number) => {
|
||||
setEditingEvent(null)
|
||||
setFormTitle("")
|
||||
setFormDescription("")
|
||||
setFormType("meeting")
|
||||
setFormDuration("30")
|
||||
setFormParticipantId("")
|
||||
const d = day ? new Date(currentYear, currentMonth, day) : new Date()
|
||||
setFormDate(d.toISOString().split("T")[0])
|
||||
setFormTime("10:00")
|
||||
setDialogOpen(true)
|
||||
}
|
||||
|
||||
const openEditDialog = (event: CalendarEvent) => {
|
||||
setEditingEvent(event)
|
||||
setFormTitle(event.title)
|
||||
setFormDescription(event.description || "")
|
||||
setFormType(event.eventType)
|
||||
setFormDuration(String(event.durationMinutes || 30))
|
||||
setFormDate(new Date(event.startTime).toISOString().split("T")[0])
|
||||
setFormTime(new Date(event.startTime).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }))
|
||||
setFormParticipantId(event.participantId || "")
|
||||
setDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formTitle.trim() || !formDate || !formTime) {
|
||||
toast.error("Title, date, and time are required")
|
||||
return
|
||||
}
|
||||
|
||||
setFormSaving(true)
|
||||
try {
|
||||
const startTime = new Date(`${formDate}T${formTime}:00`).toISOString()
|
||||
let endTime = null
|
||||
if (formDuration) {
|
||||
const end = new Date(startTime)
|
||||
end.setMinutes(end.getMinutes() + parseInt(formDuration))
|
||||
endTime = end.toISOString()
|
||||
}
|
||||
|
||||
const body: Record<string, unknown> = {
|
||||
title: formTitle.trim(),
|
||||
description: formDescription.trim() || null,
|
||||
eventType: formType,
|
||||
startTime,
|
||||
endTime,
|
||||
durationMinutes: formDuration ? parseInt(formDuration) : null,
|
||||
}
|
||||
if (formParticipantId) body.participantId = formParticipantId
|
||||
|
||||
let res
|
||||
if (editingEvent) {
|
||||
res = await fetch(`/api/events/${editingEvent.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
} else {
|
||||
res = await fetch("/api/events", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
}
|
||||
|
||||
if (!res.ok) throw new Error("Failed to save")
|
||||
|
||||
const data = await res.json()
|
||||
if (editingEvent) {
|
||||
setEvents((prev) => prev.map((e) => e.id === editingEvent.id ? { ...data.event, participant: e.participant, lead: e.lead } : e))
|
||||
toast.success("Event updated")
|
||||
} else {
|
||||
setEvents((prev) => [...prev, data.event])
|
||||
addNotification("event_scheduled", `Event created: ${formTitle}`, `Scheduled for ${formatDate(startTime)} at ${formatTime(startTime)}`, "/calendar")
|
||||
toast.success("Event created")
|
||||
}
|
||||
|
||||
setDialogOpen(false)
|
||||
} catch {
|
||||
toast.error("Failed to save event")
|
||||
} finally {
|
||||
setFormSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const updateEventStatus = async (event: CalendarEvent, newStatus: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/events/${event.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
if (!res.ok) throw new Error("Failed to update")
|
||||
const data = await res.json()
|
||||
setEvents((prev) => prev.map((e) => e.id === event.id ? { ...data.event, participant: e.participant, lead: e.lead } : e))
|
||||
toast.success(`Event ${newStatus}`)
|
||||
setDetailEvent(null)
|
||||
} catch {
|
||||
toast.error("Failed to update event")
|
||||
}
|
||||
}
|
||||
|
||||
const saveNotes = async (event: CalendarEvent) => {
|
||||
if (notesText === (event.participantNotes || "")) { setEditNotes(false); return }
|
||||
setNotesSaving(true)
|
||||
try {
|
||||
const res = await fetch(`/api/events/${event.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ participantNotes: notesText || null }),
|
||||
})
|
||||
if (!res.ok) throw new Error("Failed to save")
|
||||
const data = await res.json()
|
||||
setEvents((prev) => prev.map((e) => e.id === event.id ? { ...data.event, participant: e.participant, lead: e.lead } : e))
|
||||
if (detailEvent && detailEvent.id === event.id) {
|
||||
setDetailEvent({ ...detailEvent, participantNotes: notesText || null })
|
||||
}
|
||||
toast.success("Notes saved")
|
||||
setEditNotes(false)
|
||||
} catch {
|
||||
toast.error("Failed to save notes")
|
||||
} finally {
|
||||
setNotesSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteEvent = async (event: CalendarEvent) => {
|
||||
try {
|
||||
const res = await fetch(`/api/events/${event.id}`, { method: "DELETE" })
|
||||
if (!res.ok) throw new Error("Failed to delete")
|
||||
setEvents((prev) => prev.filter((e) => e.id !== event.id))
|
||||
toast.success("Event deleted")
|
||||
setDetailEvent(null)
|
||||
setDialogOpen(false)
|
||||
} catch {
|
||||
toast.error("Failed to delete event")
|
||||
}
|
||||
}
|
||||
|
||||
const calendarDays: (number | null)[] = []
|
||||
for (let i = 0; i < firstDay; i++) calendarDays.push(null)
|
||||
for (let d = 1; d <= daysInMonth; d++) calendarDays.push(d)
|
||||
|
||||
if (!user) return null
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[calc(100vh-4rem)] bg-gradient-to-b from-background via-background to-muted/20">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-3 border-b shrink-0 bg-gradient-to-r from-background via-accent/5 to-background backdrop-blur-sm shadow-[0_1px_3px_-1px_hsl(var(--border))]">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="p-2 rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 text-primary shadow-sm ring-1 ring-primary/15">
|
||||
<Calendar className="h-4 w-4" />
|
||||
</div>
|
||||
<h1 className="text-lg font-bold tracking-tight">Calendar</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 p-0.5 rounded-lg border bg-card/60 shadow-sm">
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 rounded-md hover:bg-accent/60 hover:scale-105 active:scale-95 transition-all" onClick={prevMonth}>
|
||||
<ChevronLeft className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<span className="text-sm font-bold min-w-[130px] text-center select-none tracking-tight px-1">
|
||||
{MONTHS[currentMonth]} {currentYear}
|
||||
</span>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 rounded-md hover:bg-accent/60 hover:scale-105 active:scale-95 transition-all" onClick={nextMonth}>
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-xs h-7 px-2 hover:bg-accent/40 hover:scale-105 active:scale-95 transition-all" onClick={() => { setCurrentMonth(today.getMonth()); setCurrentYear(today.getFullYear()) }}>
|
||||
Today
|
||||
</Button>
|
||||
</div>
|
||||
<Button onClick={() => openCreateDialog()} size="sm" className="shadow-sm hover:shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all bg-gradient-to-r from-primary to-primary/90 h-9">
|
||||
<Plus className="h-4 w-4 mr-1.5" /> New Event
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Body - flex row with independent scroll */}
|
||||
<div className="flex-1 flex overflow-hidden p-4 lg:p-6 gap-4 lg:gap-6">
|
||||
{loading ? (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="relative">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary/60" />
|
||||
<div className="absolute inset-0 animate-pulse rounded-full bg-primary/5" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground animate-pulse">Loading calendar...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Left: Calendar Grid */}
|
||||
<div className="flex-1 flex flex-col gap-4 min-w-0 overflow-hidden">
|
||||
{/* Stats bar */}
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<div className="flex items-center gap-2 px-3.5 py-2 rounded-lg bg-primary/5 border border-primary/10 shadow-sm">
|
||||
<div className="h-2 w-2 rounded-full bg-primary" />
|
||||
<span className="text-sm font-bold text-primary">{events.filter(e => e.status === "scheduled").length}</span>
|
||||
<span className="text-[11px] text-primary/60 font-medium">scheduled</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3.5 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 shadow-sm">
|
||||
<div className="h-2 w-2 rounded-full bg-emerald-500" />
|
||||
<span className="text-sm font-bold text-emerald-600 dark:text-emerald-400">{events.filter(e => e.status === "completed").length}</span>
|
||||
<span className="text-[11px] text-emerald-600/60 dark:text-emerald-400/60 font-medium">completed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3.5 py-2 rounded-lg bg-muted/30 border shadow-sm">
|
||||
<div className="h-2 w-2 rounded-full bg-muted-foreground/30" />
|
||||
<span className="text-sm font-bold text-foreground/70">{events.length}</span>
|
||||
<span className="text-[11px] text-muted-foreground/50 font-medium">total</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendar grid wrapper - scrollable */}
|
||||
<div className="flex-1 overflow-auto rounded-xl border bg-card shadow-sm">
|
||||
<div className="min-w-[600px]">
|
||||
{/* Day headers */}
|
||||
<div className="grid grid-cols-7 sticky top-0 z-10 bg-gradient-to-r from-muted/30 via-background to-muted/30 border-b border-border/40">
|
||||
{DAYS.map((d, i) => (
|
||||
<div key={d} className={cn(
|
||||
"px-3 py-2.5 text-[11px] font-semibold text-muted-foreground/50 text-center tracking-widest uppercase",
|
||||
i === 0 && "text-red-500/40 dark:text-red-400/40",
|
||||
i === 6 && "text-red-500/40 dark:text-red-400/40",
|
||||
)}>
|
||||
{d}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Day cells */}
|
||||
<div className="grid grid-cols-7">
|
||||
{calendarDays.map((day, i) => {
|
||||
if (day === null) return <div key={`empty-${i}`} className="min-h-[110px] border-r border-b border-border/40 bg-gradient-to-b from-muted/[0.01] to-transparent" />
|
||||
const dayEvents = getEventsForDay(day)
|
||||
const todayMark = isToday(day)
|
||||
const hasEvents = dayEvents.length > 0
|
||||
return (
|
||||
<div
|
||||
key={day}
|
||||
className={cn(
|
||||
"min-h-[110px] p-1.5 border-r border-b border-border/40 cursor-pointer transition-all duration-150 relative group",
|
||||
"hover:bg-accent/20 hover:shadow-[inset_0_0_0_1px_hsl(var(--border))]",
|
||||
todayMark && "bg-gradient-to-b from-primary/[0.04] to-transparent",
|
||||
)}
|
||||
onClick={() => { setSelectedDate(new Date(currentYear, currentMonth, day)); openCreateDialog(day) }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1 px-0.5">
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center h-6 w-6 text-xs font-medium rounded-full transition-all duration-200",
|
||||
todayMark && "bg-primary text-primary-foreground text-[11px] font-bold shadow-md ring-2 ring-primary/30 scale-110",
|
||||
!todayMark && "text-muted-foreground/70 group-hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{day}
|
||||
</span>
|
||||
{hasEvents && (
|
||||
<span className="text-[10px] font-semibold text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-all">
|
||||
{dayEvents.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-0.5">
|
||||
{dayEvents.slice(0, 3).map((event) => {
|
||||
const Icon = EVENT_ICONS[event.eventType]
|
||||
return (
|
||||
<button
|
||||
key={event.id}
|
||||
onClick={(e) => { e.stopPropagation(); setDetailEvent(event) }}
|
||||
className={cn(
|
||||
"w-full text-left text-[10px] leading-tight flex items-center gap-1 rounded transition-all duration-150",
|
||||
"hover:shadow-sm hover:scale-[1.02] active:scale-[0.97] group/pill",
|
||||
event.status !== "scheduled" && "opacity-40",
|
||||
)}
|
||||
>
|
||||
<div className="w-0.5 h-5 rounded-full shrink-0" style={eventDotStyle(event.eventType)} />
|
||||
<div style={eventBgStyle(event.eventType)}
|
||||
className="flex-1 flex items-center gap-1 px-1.5 py-0.5 rounded-r min-w-0"
|
||||
>
|
||||
<Icon className="h-2 w-2 shrink-0 opacity-50" />
|
||||
<span className="truncate font-medium">{event.title}</span>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{dayEvents.length > 3 && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation() }}
|
||||
className="text-[10px] text-muted-foreground/40 hover:text-muted-foreground pl-0.5 font-semibold transition-colors"
|
||||
>
|
||||
+{dayEvents.length - 3} more
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Upcoming sidebar */}
|
||||
<div className="w-72 lg:w-80 shrink-0 flex flex-col gap-4 overflow-y-auto">
|
||||
<div className="flex items-center justify-between shrink-0">
|
||||
<h2 className="text-sm font-bold flex items-center gap-2 tracking-tight">
|
||||
<ArrowUpRight className="h-4 w-4 text-primary/70" />
|
||||
Upcoming
|
||||
</h2>
|
||||
{upcomingEvents.length > 0 && (
|
||||
<Badge variant="secondary" className="text-[10px] font-semibold px-2 py-0.5 ring-1 ring-border/50">
|
||||
{upcomingEvents.length}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{upcomingEvents.length === 0 ? (
|
||||
<Card className="p-6 border-dashed bg-card/50">
|
||||
<div className="flex flex-col items-center gap-2.5 text-center">
|
||||
<div className="p-3 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 ring-1 ring-border/20">
|
||||
<Calendar className="h-6 w-6 text-muted-foreground/30" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">No upcoming events</p>
|
||||
<p className="text-[11px] text-muted-foreground/40 mt-0.5">Schedule one to get started</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => openCreateDialog()} className="hover:scale-105 active:scale-95 transition-all shadow-sm">
|
||||
<Plus className="h-3 w-3 mr-1.5" /> Schedule event
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{upcomingEvents.map((event) => {
|
||||
const Icon = EVENT_ICONS[event.eventType]
|
||||
return (
|
||||
<button
|
||||
key={event.id}
|
||||
onClick={() => setDetailEvent(event)}
|
||||
className={cn(
|
||||
"w-full text-left rounded-lg border bg-card/80 hover:bg-card transition-all duration-150 overflow-hidden",
|
||||
"hover:shadow-md hover:border-accent-foreground/10 active:scale-[0.98]",
|
||||
)}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="w-0.5 shrink-0" style={eventDotStyle(event.eventType)} />
|
||||
<div className="flex-1 p-3">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<div className={cn(
|
||||
"p-1.5 rounded shrink-0 ring-1 ring-border/20",
|
||||
event.userId === user?.id ? "bg-primary/5" : "bg-muted",
|
||||
)}>
|
||||
<Icon className={cn(
|
||||
"h-3.5 w-3.5",
|
||||
event.userId === user?.id ? "text-primary/60" : "text-muted-foreground/40",
|
||||
)} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-1.5">
|
||||
<p className="text-sm font-semibold truncate">{event.title}</p>
|
||||
<span className={cn(
|
||||
"text-[9px] font-semibold px-1.5 py-0.5 rounded capitalize shrink-0",
|
||||
event.status === "scheduled" && "bg-primary/10 text-primary",
|
||||
event.status === "completed" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
event.status === "cancelled" && "bg-red-500/10 text-red-600 dark:text-red-400",
|
||||
)}>
|
||||
{event.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 mt-1 text-[10px] text-muted-foreground/60 font-medium">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDate(event.startTime)}
|
||||
<span className="text-muted-foreground/20">·</span>
|
||||
{formatTime(event.startTime)}
|
||||
</div>
|
||||
{event.durationMinutes && (
|
||||
<div className="flex items-center gap-1 mt-0.5 text-[10px] text-muted-foreground/40 font-medium">
|
||||
<Zap className="h-2.5 w-2.5" />
|
||||
{event.durationMinutes} min
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<span className={cn(
|
||||
"h-3.5 w-3.5 rounded-full text-[7px] flex items-center justify-center font-bold ring-1",
|
||||
event.userId === user?.id
|
||||
? "bg-primary/10 text-primary ring-primary/20"
|
||||
: "bg-muted text-muted-foreground/60 ring-border",
|
||||
)}>
|
||||
{event.userId === user?.id
|
||||
? (event.participant?.name.charAt(0) || "?")
|
||||
: (event.creator?.name.charAt(0) || "?")}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/60 font-medium">
|
||||
{event.userId === user?.id
|
||||
? (event.participant?.name || "No participant")
|
||||
: (event.creator?.name || "Unknown")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create/Edit Dialog */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[520px]">
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={cn(
|
||||
"p-3 rounded-xl border shadow-sm",
|
||||
editingEvent
|
||||
? "bg-gradient-to-br from-muted to-muted/50 text-muted-foreground border-border"
|
||||
: "bg-gradient-to-br from-primary/15 to-primary/5 text-primary border-primary/20",
|
||||
)}>
|
||||
{editingEvent ? <Clock className="h-5 w-5" /> : <Plus className="h-5 w-5" />}
|
||||
</div>
|
||||
<div>
|
||||
<DialogTitle className="text-lg font-bold">{editingEvent ? "Edit Event" : "Create Event"}</DialogTitle>
|
||||
<p className="text-xs text-muted-foreground/60 mt-0.5">
|
||||
{editingEvent ? "Update the event details below" : "Fill in the details for your new event"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<div className="space-y-5 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title" className="text-xs font-semibold">Title</Label>
|
||||
<Input id="title" value={formTitle} onChange={(e) => setFormTitle(e.target.value)} placeholder="e.g. Product demo with client" className="h-10" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="date" className="text-xs font-semibold">Date</Label>
|
||||
<Input id="date" type="date" value={formDate} onChange={(e) => setFormDate(e.target.value)} className="h-10" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time" className="text-xs font-semibold">Time</Label>
|
||||
<Input id="time" type="time" value={formTime} onChange={(e) => setFormTime(e.target.value)} className="h-10" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="type" className="text-xs font-semibold">Type</Label>
|
||||
<Select value={formType} onValueChange={(v: EventType) => setFormType(v)}>
|
||||
<SelectTrigger id="type" className="h-10">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="meeting">Meeting</SelectItem>
|
||||
<SelectItem value="call">Call</SelectItem>
|
||||
<SelectItem value="chat">Video Chat</SelectItem>
|
||||
<SelectItem value="follow_up">Follow Up</SelectItem>
|
||||
<SelectItem value="demo">Demo</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="duration" className="text-xs font-semibold">Duration</Label>
|
||||
<Select value={formDuration} onValueChange={setFormDuration}>
|
||||
<SelectTrigger id="duration" className="h-10">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="15">15 min</SelectItem>
|
||||
<SelectItem value="30">30 min</SelectItem>
|
||||
<SelectItem value="45">45 min</SelectItem>
|
||||
<SelectItem value="60">1 hour</SelectItem>
|
||||
<SelectItem value="90">1.5 hours</SelectItem>
|
||||
<SelectItem value="120">2 hours</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="participant" className="text-xs font-semibold">Participant</Label>
|
||||
<Select value={formParticipantId || "__none__"} onValueChange={(v) => setFormParticipantId(v === "__none__" ? "" : v)}>
|
||||
<SelectTrigger id="participant" className="h-10">
|
||||
<SelectValue placeholder="Select a participant…" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__">None</SelectItem>
|
||||
{users.map((u) => (
|
||||
<SelectItem key={u.id} value={u.id}>
|
||||
{u.name} ({u.email})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description" className="text-xs font-semibold">Description</Label>
|
||||
<Textarea id="description" value={formDescription} onChange={(e) => setFormDescription(e.target.value)} placeholder="Add any notes or agenda items..." rows={3} className="resize-none" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter className="flex items-center justify-between border-t pt-4">
|
||||
<div>
|
||||
{editingEvent && (
|
||||
<Button variant="destructive" size="sm" onClick={() => deleteEvent(editingEvent)} className="shadow-sm">
|
||||
Delete event
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleSave} disabled={formSaving} className="shadow-sm">
|
||||
{formSaving && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
|
||||
{editingEvent ? "Update Event" : "Create Event"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Event Detail Dialog */}
|
||||
<Dialog open={!!detailEvent} onOpenChange={(open) => { if (!open) setDetailEvent(null) }}>
|
||||
{detailEvent && (
|
||||
<DialogContent className="sm:max-w-[460px]">
|
||||
<DialogHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-3 rounded-xl border shadow-sm" style={eventBgStyle(detailEvent.eventType)}>
|
||||
{(() => { const Icon = EVENT_ICONS[detailEvent.eventType]; return Icon ? <Icon className="h-5 w-5" /> : <Calendar className="h-5 w-5" /> })()}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<DialogTitle className="text-lg font-bold truncate">{detailEvent.title}</DialogTitle>
|
||||
<span className={cn(
|
||||
"inline-flex text-[10px] font-semibold px-2 py-0.5 rounded-full capitalize mt-0.5 ring-1",
|
||||
detailEvent.status === "scheduled" && "bg-primary/10 text-primary ring-primary/20",
|
||||
detailEvent.status === "completed" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-emerald-500/20",
|
||||
detailEvent.status === "cancelled" && "bg-red-500/10 text-red-600 dark:text-red-400 ring-red-500/20",
|
||||
)}>
|
||||
{detailEvent.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
{/* Date / Time */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<div className="flex items-center gap-2 text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5">
|
||||
<Calendar className="h-3.5 w-3.5" />
|
||||
Date
|
||||
</div>
|
||||
<p className="text-sm font-bold">{formatDate(detailEvent.startTime)}</p>
|
||||
</div>
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<div className="flex items-center gap-2 text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
Time
|
||||
</div>
|
||||
<p className="text-sm font-bold">{formatTime(detailEvent.startTime)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Duration + Type */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{detailEvent.durationMinutes && (
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<div className="flex items-center gap-2 text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5">
|
||||
<Zap className="h-3.5 w-3.5" />
|
||||
Duration
|
||||
</div>
|
||||
<p className="text-sm font-bold">{detailEvent.durationMinutes} min</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<div className="flex items-center gap-2 text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5 capitalize">
|
||||
{(() => { const Icon = EVENT_ICONS[detailEvent.eventType]; return Icon ? <Icon className="h-3.5 w-3.5" /> : <Calendar className="h-3.5 w-3.5" /> })()}
|
||||
Type
|
||||
</div>
|
||||
<p className="text-sm font-bold capitalize">{detailEvent.eventType.replace("_", " ")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{detailEvent.description && (
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<p className="text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5">Description</p>
|
||||
<p className="text-sm whitespace-pre-wrap leading-relaxed">{detailEvent.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Linked lead */}
|
||||
{detailEvent.lead && (
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<p className="text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5">Linked Lead</p>
|
||||
<p className="text-sm font-bold">{detailEvent.lead.contactName} — {detailEvent.lead.companyName}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Organizer & Participant - cross-linked */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<p className="text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
|
||||
<Users className="h-3 w-3" />
|
||||
{detailEvent.userId === user?.id ? "You (Organizer)" : "Organizer"}
|
||||
</p>
|
||||
<p className="text-sm font-bold flex items-center gap-2">
|
||||
<span className="h-6 w-6 rounded-full bg-muted text-muted-foreground text-[10px] flex items-center justify-center font-bold ring-1 ring-border">
|
||||
{detailEvent.creator?.name.charAt(0).toUpperCase() || "?"}
|
||||
</span>
|
||||
<span className="truncate">{detailEvent.creator?.name || "Unknown"}</span>
|
||||
{detailEvent.creator?.role && (
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50 capitalize shrink-0">({detailEvent.creator.role})</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-primary/5 to-primary/[0.02] border shadow-sm">
|
||||
<p className="text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
|
||||
<Users className="h-3 w-3" />
|
||||
{detailEvent.participantId === user?.id ? "You (Participant)" : "Participant"}
|
||||
</p>
|
||||
{detailEvent.participant ? (
|
||||
<p className="text-sm font-bold flex items-center gap-2">
|
||||
<span className="h-6 w-6 rounded-full bg-primary/10 text-primary text-[10px] flex items-center justify-center font-bold ring-1 ring-primary/20">
|
||||
{detailEvent.participant.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
<span className="truncate">{detailEvent.participant.name}</span>
|
||||
{detailEvent.participant.role && (
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50 capitalize shrink-0">({detailEvent.participant.role})</span>
|
||||
)}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground/50 italic">No participant</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Participant Notes (editable by both parties) */}
|
||||
<div className="p-3.5 rounded-xl bg-gradient-to-br from-muted/50 to-muted/20 border shadow-sm">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<p className="text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-wider flex items-center gap-1.5">
|
||||
<StickyNote className="h-3 w-3" />
|
||||
Notes
|
||||
</p>
|
||||
{!editNotes && (
|
||||
<Button variant="ghost" size="sm" className="h-7 text-[11px] font-semibold hover:bg-accent/40" onClick={() => { setNotesText(detailEvent.participantNotes || ""); setEditNotes(true) }}>
|
||||
{detailEvent.participantNotes ? "Edit" : "Add note"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{editNotes ? (
|
||||
<div className="space-y-2.5">
|
||||
<Textarea value={notesText} onChange={(e) => setNotesText(e.target.value)} rows={3} className="resize-none text-sm" placeholder="Add your notes about this event…" />
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button variant="ghost" size="sm" onClick={() => setEditNotes(false)} disabled={notesSaving}>Cancel</Button>
|
||||
<Button size="sm" onClick={() => saveNotes(detailEvent)} disabled={notesSaving} className="shadow-sm">
|
||||
{notesSaving && <Loader2 className="h-3 w-3 animate-spin mr-1" />}
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : detailEvent.participantNotes ? (
|
||||
<p className="text-sm whitespace-pre-wrap leading-relaxed font-medium">{detailEvent.participantNotes}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground/40 italic font-medium">No notes yet</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter className="flex items-center gap-2 border-t pt-4">
|
||||
{detailEvent.status === "scheduled" && (
|
||||
<>
|
||||
<Button variant="default" size="sm" onClick={() => updateEventStatus(detailEvent, "completed")} className="shadow-sm">
|
||||
<CheckCircle2 className="h-4 w-4 mr-1.5" /> Complete
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => updateEventStatus(detailEvent, "cancelled")}>
|
||||
<XCircle className="h-4 w-4 mr-1.5" /> Cancel
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => { setDetailEvent(null); openEditDialog(detailEvent) }}>
|
||||
Edit
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{detailEvent.status === "completed" && (
|
||||
<Button variant="outline" size="sm" onClick={() => updateEventStatus(detailEvent, "scheduled")}>
|
||||
<RotateCcw className="h-4 w-4 mr-1.5" /> Reopen
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
)}
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+559
-108
@@ -15,51 +15,52 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
Search, Send, Phone, MoreHorizontal, Paperclip,
|
||||
Search, Send, Phone, Video, MoreHorizontal, Paperclip,
|
||||
Smile, Flag, Ban, Trash2, Image, FileIcon, X, Mic, Square, Play, Pause, Check, CheckCheck,
|
||||
CornerDownRight, Forward, Pencil, Download,
|
||||
CornerDownRight, Forward, Pencil, Download, Undo2, CalendarDays, Loader2, FolderOpen, Mail,
|
||||
} from "lucide-react"
|
||||
import { hasBlockedCodeExtension, filterBlockedFiles } from "@/lib/blocked-extensions"
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
|
||||
DialogFooter, DialogClose,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { useTheme } from "next-themes"
|
||||
import { useUser } from "@/providers/user-provider"
|
||||
import { toast } from "sonner"
|
||||
import { io, Socket } from "socket.io-client"
|
||||
import VoiceCallModal from "@/components/chats/voice-call-modal"
|
||||
import data from "@emoji-mart/data"
|
||||
import Picker from "@emoji-mart/react"
|
||||
import MediaPicker from "@/components/chats/media-picker"
|
||||
|
||||
function VoiceMessagePlayer({ src, initialDuration }: { src: string; initialDuration: number }) {
|
||||
const activeAudioRef: { current: HTMLAudioElement | null } = { current: null }
|
||||
const previewAudioRef: { current: HTMLAudioElement | null } = { current: null }
|
||||
const previewAnimRef: { current: number } = { current: 0 }
|
||||
|
||||
function VoiceMessagePlayer({ src, initialDuration, isOwn }: { src: string; initialDuration: number; isOwn?: boolean }) {
|
||||
const [playing, setPlaying] = useState(false)
|
||||
const [current, setCurrent] = useState(0)
|
||||
const [duration, setDuration] = useState(initialDuration)
|
||||
const audioRef = useRef<HTMLAudioElement>(null)
|
||||
const animRef = useRef<number>(0)
|
||||
const progRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current
|
||||
if (!audio) return
|
||||
const onLoaded = () => {
|
||||
if (isFinite(audio.duration)) setDuration(audio.duration)
|
||||
}
|
||||
const onLoaded = () => { if (isFinite(audio.duration)) setDuration(audio.duration) }
|
||||
const onEnded = () => { setPlaying(false); setCurrent(0) }
|
||||
audio.addEventListener("loadedmetadata", onLoaded)
|
||||
audio.addEventListener("ended", onEnded)
|
||||
return () => {
|
||||
audio.removeEventListener("loadedmetadata", onLoaded)
|
||||
audio.removeEventListener("ended", onEnded)
|
||||
}
|
||||
return () => { audio.removeEventListener("loadedmetadata", onLoaded); audio.removeEventListener("ended", onEnded) }
|
||||
}, [src])
|
||||
|
||||
useEffect(() => {
|
||||
if (!playing) { cancelAnimationFrame(animRef.current); return }
|
||||
const tick = () => {
|
||||
if (audioRef.current) setCurrent(audioRef.current.currentTime)
|
||||
animRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
const tick = () => { if (audioRef.current) setCurrent(audioRef.current.currentTime); animRef.current = requestAnimationFrame(tick) }
|
||||
animRef.current = requestAnimationFrame(tick)
|
||||
return () => cancelAnimationFrame(animRef.current)
|
||||
}, [playing])
|
||||
@@ -67,26 +68,55 @@ function VoiceMessagePlayer({ src, initialDuration }: { src: string; initialDura
|
||||
const toggle = () => {
|
||||
if (!audioRef.current) return
|
||||
if (playing) { audioRef.current.pause(); setPlaying(false) }
|
||||
else { audioRef.current.play(); setPlaying(true) }
|
||||
else {
|
||||
if (activeAudioRef.current && activeAudioRef.current !== audioRef.current) { activeAudioRef.current.pause() }
|
||||
activeAudioRef.current = audioRef.current
|
||||
audioRef.current.play(); setPlaying(true)
|
||||
}
|
||||
}
|
||||
|
||||
const seek = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const val = parseFloat(e.target.value)
|
||||
if (audioRef.current) { audioRef.current.currentTime = val; setCurrent(val) }
|
||||
}
|
||||
|
||||
const replay = () => {
|
||||
if (!audioRef.current) return
|
||||
audioRef.current.currentTime = 0; setCurrent(0)
|
||||
if (!playing) { audioRef.current.play(); setPlaying(true) }
|
||||
}
|
||||
|
||||
const displayDuration = isFinite(duration) && duration > 0 ? duration : initialDuration
|
||||
const pct = displayDuration > 0 ? (current / displayDuration) * 100 : 0
|
||||
const fmt = (s: number) => {
|
||||
const secs = isFinite(s) ? Math.max(0, Math.floor(s)) : 0
|
||||
return `${Math.floor(secs / 60)}:${(secs % 60).toString().padStart(2, "0")}`
|
||||
}
|
||||
const fmt = (s: number) => { const secs = isFinite(s) ? Math.max(0, Math.floor(s)) : 0; return `${Math.floor(secs / 60)}:${(secs % 60).toString().padStart(2, "0")}` }
|
||||
|
||||
const barCount = 28
|
||||
const waveform = Array.from({ length: barCount }, (_, i) => {
|
||||
const peak = 0.15 + Math.sin(i * 1.1) * 0.35 + Math.sin(i * 2.3) * 0.2 + Math.sin(i * 0.7) * 0.3
|
||||
return Math.max(0.15, Math.min(1, peak))
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-[180px]">
|
||||
<div className="flex items-center gap-2 min-w-[200px] select-none">
|
||||
<audio ref={audioRef} src={src} preload="metadata" />
|
||||
<button type="button" onClick={toggle} className="h-8 w-8 shrink-0 rounded-full flex items-center justify-center hover:bg-black/10 transition-colors">
|
||||
{playing ? <Pause className="h-4 w-4 fill-current" /> : <Play className="h-4 w-4 ml-0.5 fill-current" />}
|
||||
</button>
|
||||
<div className="flex-1 h-1.5 rounded-full bg-white/30 relative overflow-hidden">
|
||||
<div className="h-full rounded-full bg-white transition-all duration-100" style={{ width: `${pct}%` }} />
|
||||
<div className="flex-1 flex flex-col gap-0.5 min-w-0">
|
||||
<div className="flex items-center gap-1 h-8">
|
||||
{waveform.map((h, i) => {
|
||||
const filled = (i / barCount) <= (pct / 100)
|
||||
return <div key={i} className="flex-1 rounded-full transition-colors duration-75" style={{ height: `${h * 100}%`, minHeight: 3, background: filled ? "currentColor" : "currentColor", opacity: filled ? 1 : 0.35 }} />
|
||||
})}
|
||||
</div>
|
||||
<input type="range" ref={progRef} min={0} max={displayDuration || 1} step={0.1} value={Math.min(current, displayDuration)} onChange={seek} className="w-full h-1 cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-white/20 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-0" />
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-0.5 shrink-0">
|
||||
<span className="text-[11px] tabular-nums opacity-70">{fmt(current)}</span>
|
||||
<button type="button" onClick={replay} className="opacity-50 hover:opacity-100 transition-opacity">
|
||||
<Undo2 className="h-2.5 w-2.5" />
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-[11px] tabular-nums opacity-70 w-8 text-right">{fmt(displayDuration)}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -100,6 +130,7 @@ export default function ChatsPage() {
|
||||
const [activeChat, setActiveChat] = useState<string | null>(null)
|
||||
const [messageInput, setMessageInput] = useState("")
|
||||
const [showEmojiPicker, setShowEmojiPicker] = useState(false)
|
||||
const [showAttachMenu, setShowAttachMenu] = useState(false)
|
||||
const [attachments, setAttachments] = useState<File[]>([])
|
||||
const [panelWidth, setPanelWidth] = useState(320)
|
||||
const [isResizing, setIsResizing] = useState(false)
|
||||
@@ -113,6 +144,11 @@ export default function ChatsPage() {
|
||||
const [isPaused, setIsPaused] = useState(false)
|
||||
const [recordingDuration, setRecordingDuration] = useState(0)
|
||||
const recordingDurationRef = useRef(0)
|
||||
const [previewBlob, setPreviewBlob] = useState<Blob | null>(null)
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null)
|
||||
const [previewDuration, setPreviewDuration] = useState(0)
|
||||
const [isPreviewPlaying, setIsPreviewPlaying] = useState(false)
|
||||
const [previewCurrent, setPreviewCurrent] = useState(0)
|
||||
const [voiceMessages, setVoiceMessages] = useState<Map<string, { url: string; duration: number }>>(new Map())
|
||||
const [messageAttachments, setMessageAttachments] = useState<Map<string, { name: string; type: string; url: string }[]>>(new Map())
|
||||
const [replyingTo, setReplyingTo] = useState<any>(null)
|
||||
@@ -125,20 +161,46 @@ export default function ChatsPage() {
|
||||
const [searchResults, setSearchResults] = useState<any[]>([])
|
||||
const [searchingUsers, setSearchingUsers] = useState(false)
|
||||
const [unreadMap, setUnreadMap] = useState<Map<string, number>>(new Map())
|
||||
const [isCallModalOpen, setIsCallModalOpen] = useState(false)
|
||||
const [previewAvatarUrl, setPreviewAvatarUrl] = useState<string | null>(null)
|
||||
<<<<<<< HEAD
|
||||
const [scheduleDialogOpen, setScheduleDialogOpen] = useState(false)
|
||||
const [scheduleTitle, setScheduleTitle] = useState("")
|
||||
const [scheduleDate, setScheduleDate] = useState("")
|
||||
const [scheduleTime, setScheduleTime] = useState("")
|
||||
const [scheduleDuration, setScheduleDuration] = useState("30")
|
||||
const [scheduleType, setScheduleType] = useState<string>("meeting")
|
||||
const [scheduleSaving, setScheduleSaving] = useState(false)
|
||||
=======
|
||||
const [previewImageUrl, setPreviewImageUrl] = useState<string | null>(null)
|
||||
>>>>>>> 21868fe336a205bcd2ef4a16283753f8dd3052bc
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
const emojiPickerRef = useRef<HTMLDivElement>(null)
|
||||
const isSendingRef = useRef(false)
|
||||
const attachMenuRef = useRef<HTMLDivElement>(null)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null)
|
||||
const recordingChunksRef = useRef<Blob[]>([])
|
||||
const resizeStartRef = useRef({ x: 0, width: 0 })
|
||||
const blobUrlsRef = useRef<string[]>([])
|
||||
const conversationOrderRef = useRef<string[]>([])
|
||||
const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
const socketRef = useRef<Socket | null>(null)
|
||||
const isDeletingRef = useRef(false)
|
||||
|
||||
const isOnlyEmoji = (text: string) => /^(\p{Extended_Pictographic}\s*)+$/u.test(text.trim())
|
||||
|
||||
const formatPreviewContent = (content: string) => {
|
||||
if (!content?.startsWith("{")) return content
|
||||
try {
|
||||
const p = JSON.parse(content)
|
||||
if (p.gif) return "📷 GIF"
|
||||
if (p.v) return "🎤 Voice message"
|
||||
if (p.sticker) return "💮 Sticker"
|
||||
} catch {}
|
||||
return content
|
||||
}
|
||||
|
||||
const autoResizeTextarea = useCallback(() => {
|
||||
const ta = textareaRef.current
|
||||
if (!ta) return
|
||||
@@ -208,6 +270,17 @@ export default function ChatsPage() {
|
||||
setMessageAttachments((a) => {
|
||||
const n = new Map(a)
|
||||
for (const k of n.keys()) if (!validMsgIds.has(k)) n.delete(k)
|
||||
// Restore persisted file attachments from JSON content
|
||||
for (const msgs of next.values()) {
|
||||
for (const m of msgs) {
|
||||
try {
|
||||
const parsed = JSON.parse(m.content)
|
||||
if (parsed.fileAttachments && Array.isArray(parsed.fileAttachments)) {
|
||||
n.set(m.id, parsed.fileAttachments)
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
return n
|
||||
})
|
||||
setReplyMap((r) => {
|
||||
@@ -257,6 +330,26 @@ export default function ChatsPage() {
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [])
|
||||
|
||||
// Strip blocked files from attachments on every change
|
||||
useEffect(() => {
|
||||
if (attachments.length === 0) return
|
||||
const { allowed, rejected } = filterBlockedFiles(attachments)
|
||||
if (rejected.length > 0) {
|
||||
toast.error(`Blocked file type: ${rejected[0].name}`)
|
||||
setAttachments(allowed)
|
||||
}
|
||||
}, [attachments])
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (attachMenuRef.current && !attachMenuRef.current.contains(e.target as Node)) {
|
||||
setShowAttachMenu(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [])
|
||||
|
||||
// revoke blob URLs on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -265,6 +358,65 @@ export default function ChatsPage() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Poll for new messages every 4 seconds for real-time sync
|
||||
useEffect(() => {
|
||||
if (!activeChat) return
|
||||
pollTimerRef.current = setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/conversations/${activeChat}/messages?limit=50`)
|
||||
if (!res.ok) return
|
||||
const data = await res.json()
|
||||
const serverMsgs = data.messages || []
|
||||
setConversationMessages((prev) => {
|
||||
const existing = prev.get(activeChat) || []
|
||||
if (serverMsgs.length === existing.length) return prev
|
||||
const next = new Map(prev)
|
||||
next.set(activeChat, serverMsgs)
|
||||
return next
|
||||
})
|
||||
setConversations((prev) => {
|
||||
const updated = [...prev]
|
||||
const convIdx = updated.findIndex((c) => c.id === activeChat)
|
||||
if (convIdx >= 0 && serverMsgs.length > 0) {
|
||||
const last = serverMsgs[serverMsgs.length - 1]
|
||||
updated[convIdx] = { ...updated[convIdx], lastMessage: last.content, lastMessageTime: last.timestamp }
|
||||
}
|
||||
return updated
|
||||
})
|
||||
} catch { /* polling silently */ }
|
||||
}, 4000)
|
||||
return () => { if (pollTimerRef.current) clearInterval(pollTimerRef.current) }
|
||||
}, [activeChat])
|
||||
|
||||
// Connect to signaling server for real-time message deletion events
|
||||
useEffect(() => {
|
||||
let socket: Socket | null = null
|
||||
let cancelled = false
|
||||
;(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/auth/jwt")
|
||||
if (!res.ok) return
|
||||
const { token } = await res.json()
|
||||
if (cancelled) return
|
||||
socket = io(process.env.NEXT_PUBLIC_SIGNALING_URL || "http://localhost:3007", {
|
||||
auth: { token },
|
||||
transports: ["websocket", "polling"],
|
||||
})
|
||||
socketRef.current = socket
|
||||
socket.on("message:deleted", ({ conversationId, messageId }: { conversationId: string; messageId: string }) => {
|
||||
setConversationMessages((prev) => {
|
||||
const existing = prev.get(conversationId)
|
||||
if (!existing) return prev
|
||||
const next = new Map(prev)
|
||||
next.set(conversationId, existing.filter((m) => m.id !== messageId))
|
||||
return next
|
||||
})
|
||||
})
|
||||
} catch { /* socket connection failed silently */ }
|
||||
})()
|
||||
return () => { cancelled = true; socket?.disconnect(); socketRef.current = null }
|
||||
}, [])
|
||||
|
||||
const handleResizeStart = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault()
|
||||
setIsResizing(true)
|
||||
@@ -291,23 +443,32 @@ export default function ChatsPage() {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
|
||||
}, [conversations])
|
||||
|
||||
const handleEmojiSelect = (emoji: { native: string }) => {
|
||||
setMessageInput((prev) => prev + emoji.native)
|
||||
const handleEmojiSelect = (emoji: string) => {
|
||||
setMessageInput((prev) => prev + emoji)
|
||||
setShowEmojiPicker(false)
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
}
|
||||
|
||||
const handleMediaSelect = (content: string) => {
|
||||
addMessageToChat(content)
|
||||
setShowEmojiPicker(false)
|
||||
}
|
||||
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files ?? [])
|
||||
const oversized = files.filter((f) => f.size > MAX_FILE_SIZE)
|
||||
const raw = Array.from(e.target.files ?? [])
|
||||
const oversized = raw.filter((f) => f.size > MAX_FILE_SIZE)
|
||||
if (oversized.length > 0) {
|
||||
toast.error(`${oversized[0].name} exceeds the 10MB file size limit`)
|
||||
if (e.target) e.target.value = ""
|
||||
return
|
||||
}
|
||||
setAttachments((prev) => [...prev, ...files])
|
||||
const { allowed, rejected } = filterBlockedFiles(raw)
|
||||
if (rejected.length > 0) {
|
||||
toast.error(`Blocked file type: ${rejected[0].name}`)
|
||||
}
|
||||
setAttachments((prev) => [...prev, ...allowed])
|
||||
if (e.target) e.target.value = ""
|
||||
}
|
||||
|
||||
@@ -317,7 +478,11 @@ export default function ChatsPage() {
|
||||
|
||||
const addMessageToChat = async (content: string, voice?: { url: string; duration: number }, replyTo?: { senderName: string; content: string }, fileAttachments?: { name: string; type: string; url: string }[]) => {
|
||||
if (!activeChat || !user) return
|
||||
const payload = voice ? "[Voice message]" : content
|
||||
const payload = voice
|
||||
? "[Voice message]"
|
||||
: fileAttachments && fileAttachments.length > 0
|
||||
? JSON.stringify({ text: content, fileAttachments })
|
||||
: content
|
||||
try {
|
||||
const res = await fetch(`/api/conversations/${activeChat}/messages`, {
|
||||
method: "POST",
|
||||
@@ -336,7 +501,7 @@ export default function ChatsPage() {
|
||||
setConversations((prev) => {
|
||||
const updated = prev.map((conv) =>
|
||||
conv.id === activeChat
|
||||
? { ...conv, lastMessage: content, lastMessageTime: "Just now" }
|
||||
? { ...conv, lastMessage: getDisplayContent(content), lastMessageTime: "Just now" }
|
||||
: conv
|
||||
)
|
||||
const idx = updated.findIndex((c) => c.id === activeChat)
|
||||
@@ -378,73 +543,114 @@ export default function ChatsPage() {
|
||||
const handleSend = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!messageInput.trim() && attachments.length === 0) return
|
||||
if (editingMessage) {
|
||||
if (isSendingRef.current) return
|
||||
// Check blocked files before sending
|
||||
if (attachments.some((f) => hasBlockedCodeExtension(f.name))) {
|
||||
toast.error("Remove blocked file types before sending")
|
||||
return
|
||||
}
|
||||
isSendingRef.current = true
|
||||
try {
|
||||
if (editingMessage) {
|
||||
setConversationMessages((prev) => {
|
||||
const next = new Map(prev)
|
||||
const msgs = (next.get(activeChat || "") || []).map((m) =>
|
||||
m.id === editingMessage.id ? { ...m, content: messageInput.trim() } : m
|
||||
)
|
||||
next.set(activeChat || "", msgs)
|
||||
return next
|
||||
})
|
||||
setEditingMessage(null)
|
||||
setMessageInput("")
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
return
|
||||
}
|
||||
const fileAttachments = attachments.length > 0
|
||||
? await Promise.all(attachments.map(async (f) => {
|
||||
const url = await fileToDataURL(f)
|
||||
return { name: f.name, type: f.type, url }
|
||||
}))
|
||||
: undefined
|
||||
if (replyingTo) {
|
||||
const replySender = replyingTo.senderId === user.id ? user.name : otherParticipant(conversation!).name
|
||||
await addMessageToChat(messageInput.trim(), undefined, { senderName: replySender, content: replyingTo.content }, fileAttachments)
|
||||
setReplyingTo(null)
|
||||
} else {
|
||||
await addMessageToChat(messageInput.trim(), undefined, undefined, fileAttachments)
|
||||
}
|
||||
setMessageInput("")
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
setAttachments([])
|
||||
} finally {
|
||||
isSendingRef.current = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteMessage = async (messageId: string) => {
|
||||
if (!activeChat || !user) return
|
||||
if (isDeletingRef.current) return
|
||||
isDeletingRef.current = true
|
||||
|
||||
const prevMessages = conversationMessages.get(activeChat) || []
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/conversations/${activeChat}/messages/${messageId}`, { method: "DELETE" })
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}))
|
||||
throw new Error(err.error || "Delete failed")
|
||||
}
|
||||
|
||||
// Broadcast deletion to other participants via Socket.io
|
||||
const socket = socketRef.current
|
||||
if (socket?.connected) {
|
||||
socket.emit("message:deleted", { conversationId: activeChat, messageId, senderId: user.id })
|
||||
}
|
||||
|
||||
// Revoke blob URLs for attachments and voice
|
||||
const files = messageAttachments.get(messageId)
|
||||
if (files) files.forEach((f) => { URL.revokeObjectURL(f.url); blobUrlsRef.current = blobUrlsRef.current.filter((u) => u !== f.url) })
|
||||
const voice = voiceMessages.get(messageId)
|
||||
if (voice) { URL.revokeObjectURL(voice.url); blobUrlsRef.current = blobUrlsRef.current.filter((u) => u !== voice.url) }
|
||||
|
||||
// Remove from local state
|
||||
setConversationMessages((prev) => {
|
||||
const next = new Map(prev)
|
||||
const msgs = (next.get(activeChat || "") || []).map((m) =>
|
||||
m.id === editingMessage.id ? { ...m, content: messageInput.trim() } : m
|
||||
)
|
||||
const msgs = (next.get(activeChat || "") || []).filter((m) => m.id !== messageId)
|
||||
next.set(activeChat || "", msgs)
|
||||
return next
|
||||
})
|
||||
setEditingMessage(null)
|
||||
setMessageInput("")
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
return
|
||||
}
|
||||
const fileAttachments = attachments.length > 0
|
||||
? attachments.map((f) => {
|
||||
const url = URL.createObjectURL(f)
|
||||
blobUrlsRef.current.push(url)
|
||||
return { name: f.name, type: f.type, url }
|
||||
})
|
||||
: undefined
|
||||
if (replyingTo) {
|
||||
const replySender = replyingTo.senderId === user.id ? user.name : otherParticipant(conversation!).name
|
||||
await addMessageToChat(messageInput.trim(), undefined, { senderName: replySender, content: replyingTo.content }, fileAttachments)
|
||||
setReplyingTo(null)
|
||||
} else {
|
||||
await addMessageToChat(messageInput.trim(), undefined, undefined, fileAttachments)
|
||||
}
|
||||
setMessageInput("")
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
setAttachments([])
|
||||
}
|
||||
|
||||
const handleDeleteMessage = (messageId: string) => {
|
||||
const files = messageAttachments.get(messageId)
|
||||
if (files) files.forEach((f) => { URL.revokeObjectURL(f.url); blobUrlsRef.current = blobUrlsRef.current.filter((u) => u !== f.url) })
|
||||
const voice = voiceMessages.get(messageId)
|
||||
if (voice) { URL.revokeObjectURL(voice.url); blobUrlsRef.current = blobUrlsRef.current.filter((u) => u !== voice.url) }
|
||||
setConversationMessages((prev) => {
|
||||
const next = new Map(prev)
|
||||
const msgs = (next.get(activeChat || "") || []).filter((m) => m.id !== messageId)
|
||||
next.set(activeChat || "", msgs)
|
||||
return next
|
||||
})
|
||||
setConversations((prev) =>
|
||||
prev.map((conv) =>
|
||||
conv.id === activeChat
|
||||
? { ...conv, lastMessage: conversationMessages.get(activeChat || "")?.filter((m) => m.id !== messageId).at(-1)?.content ?? conv.lastMessage }
|
||||
: conv
|
||||
setConversations((prev) =>
|
||||
prev.map((conv) =>
|
||||
conv.id === activeChat
|
||||
? { ...conv, lastMessage: getDisplayContent(prevMessages.filter((m) => m.id !== messageId).at(-1)?.content ?? "") }
|
||||
: conv
|
||||
)
|
||||
)
|
||||
)
|
||||
toast.success("Message deleted")
|
||||
toast.success("Message deleted")
|
||||
} catch (err: any) {
|
||||
toast.error(err?.message || "Unable to delete voice note. Please try again.")
|
||||
} finally {
|
||||
isDeletingRef.current = false
|
||||
}
|
||||
}
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
const recorder = new MediaRecorder(stream, { mimeType: "audio/webm" })
|
||||
const mime = MediaRecorder.isTypeSupported("audio/webm;codecs=opus") ? "audio/webm;codecs=opus" : "audio/webm"
|
||||
const recorder = new MediaRecorder(stream, { mimeType: mime })
|
||||
recordingChunksRef.current = []
|
||||
recorder.ondataavailable = (e) => {
|
||||
if (e.data.size > 0) recordingChunksRef.current.push(e.data)
|
||||
}
|
||||
recorder.onstop = () => {
|
||||
const blob = new Blob(recordingChunksRef.current, { type: "audio/webm" })
|
||||
if (recordingChunksRef.current.length === 0) return
|
||||
const blob = new Blob(recordingChunksRef.current, { type: mime })
|
||||
const url = URL.createObjectURL(blob)
|
||||
blobUrlsRef.current.push(url)
|
||||
addMessageToChat("", { url, duration: recordingDurationRef.current })
|
||||
setPreviewBlob(blob)
|
||||
setPreviewUrl(url)
|
||||
setPreviewDuration(recordingDurationRef.current)
|
||||
stream.getTracks().forEach((t) => t.stop())
|
||||
setRecordingDuration(0)
|
||||
}
|
||||
@@ -452,9 +658,12 @@ export default function ChatsPage() {
|
||||
recorder.start()
|
||||
setIsRecording(true)
|
||||
setIsPaused(false)
|
||||
} catch {
|
||||
console.warn("Failed to start recording in chats page")
|
||||
toast.error("Microphone access denied")
|
||||
} catch (err: any) {
|
||||
if (err?.name === "NotAllowedError" || err?.name === "PermissionDeniedError") {
|
||||
toast.error("Microphone access is required to record voice notes.")
|
||||
} else {
|
||||
toast.error("Failed to start recording. Please check your microphone.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -488,6 +697,60 @@ export default function ChatsPage() {
|
||||
setRecordingDuration(0)
|
||||
recordingDurationRef.current = 0
|
||||
recordingChunksRef.current = []
|
||||
clearPreview()
|
||||
}
|
||||
|
||||
const clearPreview = () => {
|
||||
if (previewUrl) { URL.revokeObjectURL(previewUrl); blobUrlsRef.current = blobUrlsRef.current.filter((u) => u !== previewUrl) }
|
||||
setPreviewBlob(null)
|
||||
setPreviewUrl(null)
|
||||
setPreviewDuration(0)
|
||||
setIsPreviewPlaying(false)
|
||||
setPreviewCurrent(0)
|
||||
}
|
||||
|
||||
const cancelVoicePreview = () => {
|
||||
if (previewAudioRef.current) { previewAudioRef.current.pause(); previewAudioRef.current = null! }
|
||||
cancelAnimationFrame(previewAnimRef.current)
|
||||
clearPreview()
|
||||
}
|
||||
|
||||
const togglePreviewPlay = () => {
|
||||
if (!previewUrl) return
|
||||
if (isPreviewPlaying) {
|
||||
previewAudioRef.current?.pause()
|
||||
setIsPreviewPlaying(false)
|
||||
} else {
|
||||
const audio = new Audio(previewUrl)
|
||||
audio.onloadedmetadata = () => { if (isFinite(audio.duration)) setPreviewDuration(audio.duration) }
|
||||
audio.onended = () => { setIsPreviewPlaying(false); setPreviewCurrent(0) }
|
||||
audio.onerror = () => { toast.error("Failed to play preview"); setIsPreviewPlaying(false) }
|
||||
previewAudioRef.current = audio
|
||||
audio.play().then(() => setIsPreviewPlaying(true)).catch(() => toast.error("Failed to play preview"))
|
||||
const tick = () => { if (previewAudioRef.current) setPreviewCurrent(previewAudioRef.current.currentTime); previewAnimRef.current = requestAnimationFrame(tick) }
|
||||
cancelAnimationFrame(previewAnimRef.current)
|
||||
previewAnimRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
}
|
||||
|
||||
const sendVoiceRecording = async () => {
|
||||
if (!previewBlob || !previewUrl) return
|
||||
try {
|
||||
cancelAnimationFrame(previewAnimRef.current)
|
||||
previewAudioRef.current?.pause()
|
||||
const formData = new FormData()
|
||||
const ext = previewBlob.type.includes("webm") ? "webm" : "webm"
|
||||
formData.append("audio", previewBlob, `voice.${ext}`)
|
||||
formData.append("duration", previewDuration.toString())
|
||||
const uploadRes = await fetch("/api/upload/voice", { method: "POST", body: formData })
|
||||
if (!uploadRes.ok) { toast.error("Failed to upload voice recording"); return }
|
||||
const { url: serverUrl, duration } = await uploadRes.json()
|
||||
const voicePayload = JSON.stringify({ v: true, u: serverUrl, d: duration || previewDuration })
|
||||
await addMessageToChat(voicePayload, { url: serverUrl, duration: duration || previewDuration })
|
||||
clearPreview()
|
||||
} catch {
|
||||
toast.error("Failed to send voice recording")
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@@ -515,6 +778,21 @@ export default function ChatsPage() {
|
||||
|
||||
const isImageFile = (file: File) => file.type.startsWith("image/")
|
||||
|
||||
const getDisplayContent = (content: string) => {
|
||||
try {
|
||||
const parsed = JSON.parse(content)
|
||||
if (parsed.text !== undefined) return parsed.text
|
||||
} catch {}
|
||||
return content
|
||||
}
|
||||
|
||||
const fileToDataURL = (file: File): Promise<string> => new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(reader.result as string)
|
||||
reader.onerror = reject
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-8rem)] -m-4 lg:-m-6 rounded-lg border bg-card overflow-hidden">
|
||||
{/* Conversations list - left panel */}
|
||||
@@ -564,7 +842,7 @@ export default function ChatsPage() {
|
||||
<span className="text-sm font-medium truncate">{person.name}</span>
|
||||
<span className="text-xs text-muted-foreground shrink-0">{conv.lastMessageTime}</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">{conv.lastMessage}</p>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">{formatPreviewContent(conv.lastMessage)}</p>
|
||||
</div>
|
||||
{!isActive && (unreadMap.get(conv.id) || 0) > 0 && (
|
||||
<div className="shrink-0 h-3 w-3 rounded-full bg-red-500 animate-pulse shadow-[0_0_10px_#ef4444] self-center" />
|
||||
@@ -644,9 +922,15 @@ export default function ChatsPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setIsCallModalOpen(true)}>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Voice calling coming soon")}>
|
||||
<Phone className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Video calling coming soon")}>
|
||||
<Video className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setScheduleDialogOpen(true)}>
|
||||
<CalendarDays className="h-4 w-4" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
@@ -676,7 +960,17 @@ export default function ChatsPage() {
|
||||
<div className="space-y-4 min-h-0">
|
||||
{messages.map((msg) => {
|
||||
const isMe = msg.senderId === user?.id
|
||||
const voiceUrl = voiceMessages.get(msg.id)
|
||||
let voiceUrl = voiceMessages.get(msg.id)
|
||||
let gifData: { url: string; w: number; h: number } | null = null
|
||||
let stickerData: { url: string; w: number; h: number; emoji?: string } | null = null
|
||||
if (msg.content?.startsWith("{")) {
|
||||
try {
|
||||
const p = JSON.parse(msg.content)
|
||||
if (p.v && p.u) voiceUrl = { url: p.u, duration: p.d || 0 }
|
||||
else if (p.gif) gifData = { url: p.gif, w: p.w || 320, h: p.h || 240 }
|
||||
else if (p.sticker) stickerData = { url: p.sticker, w: p.w || 200, h: p.h || 200, emoji: p.id ? undefined : p.sticker }
|
||||
} catch {}
|
||||
}
|
||||
return (
|
||||
<div key={msg.id} className={cn("group flex gap-3", isMe && "flex-row-reverse")}>
|
||||
<Avatar className="h-8 w-8 mt-0.5 shrink-0 cursor-pointer" onClick={() => setPreviewAvatarUrl(msg.senderAvatar)}>
|
||||
@@ -743,13 +1037,22 @@ export default function ChatsPage() {
|
||||
<p className="text-[11px] text-white/60 truncate">{replyInfo.repliedToContent}</p>
|
||||
</div>
|
||||
)}
|
||||
{voiceUrl ? (
|
||||
<div>
|
||||
<VoiceMessagePlayer src={voiceUrl.url} initialDuration={voiceUrl.duration} />
|
||||
{msg.content && (
|
||||
<p className="mt-1 text-sm text-black">{msg.content}</p>
|
||||
{gifData ? (
|
||||
<div className="max-w-[280px]">
|
||||
<img src={gifData.url} alt="GIF" className="w-full rounded-lg" style={{ aspectRatio: `${gifData.w}/${gifData.h}` }} loading="lazy" />
|
||||
</div>
|
||||
) : stickerData ? (
|
||||
<div className="max-w-[200px]">
|
||||
{stickerData.emoji ? (
|
||||
<span className="text-7xl block text-center">{stickerData.emoji}</span>
|
||||
) : (
|
||||
<div className="w-full" dangerouslySetInnerHTML={{ __html: stickerData.url.replace(/<svg /, '<svg style="width:100%;height:auto;max-height:200px" ') }} />
|
||||
)}
|
||||
</div>
|
||||
) : voiceUrl ? (
|
||||
<div>
|
||||
<VoiceMessagePlayer src={voiceUrl.url} initialDuration={voiceUrl.duration} isOwn={isMe} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{(() => {
|
||||
@@ -759,26 +1062,30 @@ export default function ChatsPage() {
|
||||
{files.map((file, i) =>
|
||||
file.type.startsWith("image/") ? (
|
||||
<div key={i} className="relative group">
|
||||
<img src={file.url} alt={file.name} className="max-w-full rounded-lg max-h-60 object-cover cursor-pointer" onClick={() => window.open(file.url, "_blank")} />
|
||||
<img src={file.url} alt={file.name} className="max-w-full rounded-lg max-h-60 object-cover cursor-pointer" onClick={() => setPreviewImageUrl(file.url)} />
|
||||
<a href={file.url} download={file.name} className="absolute top-2 right-2 h-7 w-7 rounded-full bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Download className="h-3.5 w-3.5 text-white" />
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<a key={i} href={file.url} download={file.name} className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm hover:bg-muted/80 transition-colors">
|
||||
<FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1 min-w-0 truncate">{file.name}</span>
|
||||
<Download className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
</a>
|
||||
<div key={i} className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm hover:bg-muted/80 transition-colors">
|
||||
<button type="button" className="flex items-center gap-2 flex-1 min-w-0 text-left" onClick={() => window.open(file.url, "_blank")} title="Open">
|
||||
<FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1 min-w-0 truncate">{file.name}</span>
|
||||
</button>
|
||||
<a href={file.url} download={file.name} className="shrink-0 text-muted-foreground hover:text-foreground" title="Download">
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
})()}
|
||||
{isOnlyEmoji(msg.content) ? (
|
||||
<span className="text-4xl leading-none">{msg.content.trim()}</span>
|
||||
{isOnlyEmoji(getDisplayContent(msg.content)) ? (
|
||||
<span className="text-4xl leading-none">{getDisplayContent(msg.content).trim()}</span>
|
||||
) : (
|
||||
msg.content
|
||||
getDisplayContent(msg.content)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -847,9 +1154,27 @@ export default function ChatsPage() {
|
||||
)}
|
||||
<form onSubmit={handleSend} className="flex items-center gap-2">
|
||||
<input ref={fileInputRef} type="file" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt" className="hidden" onChange={handleFileSelect} />
|
||||
<Button type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0" onClick={() => fileInputRef.current?.click()}>
|
||||
<Paperclip className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
<div className="relative">
|
||||
<Button type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0" onClick={() => setShowAttachMenu(!showAttachMenu)}>
|
||||
<Paperclip className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
{showAttachMenu && (
|
||||
<div ref={attachMenuRef} className="absolute bottom-full left-0 mb-2 z-50 bg-popover border rounded-lg shadow-lg p-1.5 min-w-[140px]">
|
||||
<button type="button" className="flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded-md hover:bg-muted" onClick={() => { fileInputRef.current?.setAttribute("accept", "image/*"); fileInputRef.current?.click(); setShowAttachMenu(false) }}>
|
||||
<Image className="h-4 w-4" /> Photos
|
||||
</button>
|
||||
<button type="button" className="flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded-md hover:bg-muted" onClick={() => { fileInputRef.current?.setAttribute("accept", ".pdf,.doc,.docx,.xls,.xlsx,.txt"); fileInputRef.current?.click(); setShowAttachMenu(false) }}>
|
||||
<FileIcon className="h-4 w-4" /> Documents
|
||||
</button>
|
||||
<button type="button" className="flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded-md hover:bg-muted" onClick={() => { fileInputRef.current?.removeAttribute("accept"); fileInputRef.current?.click(); setShowAttachMenu(false) }}>
|
||||
<FolderOpen className="h-4 w-4" /> Files
|
||||
</button>
|
||||
<button type="button" className="flex items-center gap-2 w-full px-2 py-1.5 text-sm rounded-md hover:bg-muted" onClick={() => { fileInputRef.current?.setAttribute("accept", ".eml,.msg"); fileInputRef.current?.click(); setShowAttachMenu(false) }}>
|
||||
<Mail className="h-4 w-4" /> Emails
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative flex-1">
|
||||
{isRecording ? (
|
||||
<div className="flex h-9 items-center gap-1 rounded-md border bg-muted/30 px-2">
|
||||
@@ -866,9 +1191,25 @@ export default function ChatsPage() {
|
||||
<Square className="h-3.5 w-3.5 fill-current" />
|
||||
</Button>
|
||||
</div>
|
||||
) : previewUrl ? (
|
||||
<div className="flex h-9 items-center gap-2 rounded-md border bg-muted/30 px-3">
|
||||
<button type="button" onClick={togglePreviewPlay} className="h-6 w-6 shrink-0 rounded-full flex items-center justify-center hover:bg-black/10 transition-colors">
|
||||
{isPreviewPlaying ? <Pause className="h-3.5 w-3.5 fill-current" /> : <Play className="h-3.5 w-3.5 ml-0.5 fill-current" />}
|
||||
</button>
|
||||
<div className="flex-1 h-1 rounded-full bg-muted-foreground/20 relative overflow-hidden">
|
||||
<div className="h-full rounded-full bg-primary transition-all duration-100" style={{ width: `${previewDuration > 0 ? (previewCurrent / previewDuration) * 100 : 0}%` }} />
|
||||
</div>
|
||||
<span className="text-xs tabular-nums text-muted-foreground w-8 text-right">{formatDuration(Math.floor(previewCurrent))}/{formatDuration(previewDuration)}</span>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-6 w-6 shrink-0 text-destructive hover:text-destructive" onClick={cancelVoicePreview}>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-6 w-6 shrink-0 text-primary hover:text-primary" onClick={sendVoiceRecording}>
|
||||
<Send className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<textarea ref={textareaRef} value={messageInput} onChange={(e) => { setMessageInput(e.target.value); autoResizeTextarea() }} onPaste={(e) => { if (!e.clipboardData) return; const items = Array.from(e.clipboardData.items).filter((item) => item.type.startsWith("image/")); if (items.length > 0) { e.preventDefault(); const files = items.map((item) => item.getAsFile()).filter((f): f is File => f !== null); setAttachments((prev) => [...prev, ...files]) } }} placeholder={editingMessage ? "Edit message..." : "Type a message..."} className="w-full resize-none overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[36px] max-h-[200px] pr-16" style={{ height: "auto" }} rows={1} />
|
||||
<textarea ref={textareaRef} value={messageInput} onChange={(e) => { setMessageInput(e.target.value); autoResizeTextarea() }} onPaste={(e) => { if (!e.clipboardData) return; const items = Array.from(e.clipboardData.items).filter((item) => item.type.startsWith("image/")); if (items.length > 0) { e.preventDefault(); const files = items.map((item) => item.getAsFile()).filter((f): f is File => f !== null); setAttachments((prev) => [...prev, ...filterBlockedFiles(files).allowed]) } }} placeholder={editingMessage ? "Edit message..." : "Type a message..."} className="w-full resize-none overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[36px] max-h-[200px] pr-16" style={{ height: "auto" }} rows={1} />
|
||||
<div className="absolute right-0 top-0 bottom-0 flex items-center pr-1" ref={emojiPickerRef}>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
|
||||
<Smile className="h-4 w-4 text-muted-foreground" />
|
||||
@@ -878,14 +1219,14 @@ export default function ChatsPage() {
|
||||
</Button>
|
||||
{showEmojiPicker && (
|
||||
<div className="absolute bottom-full right-0 mb-2 z-50">
|
||||
<Picker data={data} onEmojiSelect={handleEmojiSelect} theme={theme === "dark" ? "dark" : "light"} previewPosition="none" skinTonePosition="none" set="native" emojiSize={36} maxFrequentRows={2} />
|
||||
<MediaPicker onEmojiSelect={handleEmojiSelect} onMediaSelect={handleMediaSelect} onClose={() => setShowEmojiPicker(false)} theme={theme} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" size="icon" className="h-9 w-9 shrink-0" disabled={!messageInput.trim() && attachments.length === 0}>
|
||||
<Button type="submit" size="icon" className="h-9 w-9 shrink-0" disabled={(!messageInput.trim() && attachments.length === 0) || attachments.some(f => hasBlockedCodeExtension(f.name))}>
|
||||
{editingMessage ? <Pencil className="h-4 w-4" /> : <Send className="h-4 w-4" />}
|
||||
</Button>
|
||||
</form>
|
||||
@@ -918,6 +1259,20 @@ export default function ChatsPage() {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Image preview dialog */}
|
||||
<Dialog open={!!previewImageUrl} onOpenChange={(o) => { if (!o) setPreviewImageUrl(null) }}>
|
||||
<DialogContent className="sm:max-w-3xl p-0 overflow-hidden bg-transparent border-0 shadow-none">
|
||||
<DialogTitle className="sr-only">Image preview</DialogTitle>
|
||||
{previewImageUrl && (
|
||||
<img
|
||||
src={previewImageUrl}
|
||||
alt="Image preview"
|
||||
className="w-full h-auto max-h-[85vh] object-contain rounded-2xl"
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Avatar preview dialog */}
|
||||
<Dialog open={!!previewAvatarUrl} onOpenChange={(o) => { if (!o) setPreviewAvatarUrl(null) }}>
|
||||
<DialogContent className="sm:max-w-sm p-0 overflow-hidden bg-transparent border-0 shadow-none">
|
||||
@@ -994,8 +1349,104 @@ export default function ChatsPage() {
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<<<<<<< Updated upstream
|
||||
=======
|
||||
|
||||
<VoiceCallModal open={isCallModalOpen} onClose={() => setIsCallModalOpen(false)} />
|
||||
{/* Schedule from Chat Dialog */}
|
||||
<Dialog open={scheduleDialogOpen} onOpenChange={setScheduleDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[440px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Schedule with {conversation ? otherParticipant(conversation).name : "..."}</DialogTitle>
|
||||
<DialogDescription>Create an event and notify the participant</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="sched-title">Title</Label>
|
||||
<Input id="sched-title" value={scheduleTitle} onChange={(e) => setScheduleTitle(e.target.value)} placeholder="e.g. Follow-up call" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="sched-date">Date</Label>
|
||||
<Input id="sched-date" type="date" value={scheduleDate} onChange={(e) => setScheduleDate(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="sched-time">Time</Label>
|
||||
<Input id="sched-time" type="time" value={scheduleTime} onChange={(e) => setScheduleTime(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="sched-type">Type</Label>
|
||||
<Select value={scheduleType} onValueChange={setScheduleType}>
|
||||
<SelectTrigger id="sched-type">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="meeting">Meeting</SelectItem>
|
||||
<SelectItem value="call">Call</SelectItem>
|
||||
<SelectItem value="follow_up">Follow Up</SelectItem>
|
||||
<SelectItem value="demo">Demo</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="sched-duration">Duration</Label>
|
||||
<Select value={scheduleDuration} onValueChange={setScheduleDuration}>
|
||||
<SelectTrigger id="sched-duration">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="15">15 min</SelectItem>
|
||||
<SelectItem value="30">30 min</SelectItem>
|
||||
<SelectItem value="60">1 hour</SelectItem>
|
||||
<SelectItem value="90">1.5 hours</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setScheduleDialogOpen(false)}>Cancel</Button>
|
||||
<Button disabled={scheduleSaving || !scheduleTitle || !scheduleDate || !scheduleTime} onClick={async () => {
|
||||
if (!conversation || !user) return
|
||||
setScheduleSaving(true)
|
||||
try {
|
||||
const startTime = new Date(`${scheduleDate}T${scheduleTime}:00`).toISOString()
|
||||
const end = new Date(startTime)
|
||||
end.setMinutes(end.getMinutes() + parseInt(scheduleDuration))
|
||||
const res = await fetch("/api/events", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
title: scheduleTitle,
|
||||
eventType: scheduleType,
|
||||
startTime,
|
||||
endTime: end.toISOString(),
|
||||
durationMinutes: parseInt(scheduleDuration),
|
||||
participantId: otherParticipant(conversation).id,
|
||||
conversationId: conversation.id,
|
||||
}),
|
||||
})
|
||||
if (!res.ok) throw new Error("Failed")
|
||||
toast.success("Event scheduled! Notification sent.")
|
||||
setScheduleDialogOpen(false)
|
||||
setScheduleTitle("")
|
||||
setScheduleDate("")
|
||||
setScheduleTime("")
|
||||
} catch {
|
||||
toast.error("Failed to schedule event")
|
||||
} finally {
|
||||
setScheduleSaving(false)
|
||||
}
|
||||
}}>
|
||||
{scheduleSaving && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
|
||||
Schedule
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
>>>>>>> Stashed changes
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -24,8 +24,12 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { DashboardStats } from "@/types"
|
||||
import { CrossedLightsabers } from "@/components/dashboard/crossed-lightsabers"
|
||||
import { StarField } from "@/components/dashboard/star-field"
|
||||
import { useWebsiteTheme } from "@/providers/website-theme-provider"
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { websiteTheme: theme } = useWebsiteTheme()
|
||||
const [period, setPeriod] = useState("6months")
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null)
|
||||
const pollingRef = useRef<NodeJS.Timeout | null>(null)
|
||||
@@ -63,47 +67,63 @@ export default function DashboardPage() {
|
||||
|
||||
return (
|
||||
<div className="space-y-6 relative">
|
||||
{theme === "starforce" && <StarField />}
|
||||
<div className="relative z-[1] space-y-6">
|
||||
<div>
|
||||
<PageHeader
|
||||
title={<span style={{fontFamily:"'Audiowide',sans-serif"}}>Dashboard</span>}
|
||||
description="Overview of your sales pipeline"
|
||||
>
|
||||
{theme === "starforce" && (
|
||||
<span
|
||||
className="pointer-events-none select-none text-5xl text-gray-600 dark:text-[#b0f0c0] tracking-wider font-bold text-glow whitespace-nowrap"
|
||||
style={{ fontFamily: "'Cormorant Garamond', serif" }}
|
||||
>
|
||||
Trust the Force, Find your Path
|
||||
</span>
|
||||
)}
|
||||
{theme === "starforce" && <CrossedLightsabers />}
|
||||
<Select value={period} onValueChange={setPeriod}>
|
||||
<SelectTrigger className="h-9 w-[160px]">
|
||||
<ListFilter className="mr-2 h-4 w-4" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7days">Last 7 days</SelectItem>
|
||||
<SelectItem value="30days">Last 30 days</SelectItem>
|
||||
<SelectItem value="6months">Last 6 months</SelectItem>
|
||||
<SelectItem value="12months">Last 12 months</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</PageHeader>
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Pipeline Overview</p>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
{stats
|
||||
? statCards.map((card, i) => (
|
||||
<StatCard key={card.title} {...card} index={i} monthlyBreakdown={stats.monthlyBreakdown} />
|
||||
))
|
||||
: Array.from({ length: 6 }).map((_, i) => <StatCardSkeleton key={i} />)
|
||||
}
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Analytics</p>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<LeadStatusChart data={stats?.statusDistribution ?? []} />
|
||||
<LeadsPerMonthChart data={stats?.leadsPerMonth ?? []} />
|
||||
</div>
|
||||
|
||||
<RecentLeadsTable leads={stats?.recentLeads ?? []} />
|
||||
</div>
|
||||
{/* Daily Bugle watermark */}
|
||||
<div className="absolute top-12 right-4 pointer-events-none select-none z-0 opacity-[0.04] dark:opacity-[0.06]">
|
||||
<span className="text-[96px] font-['Bangers',cursive] leading-none text-[#e62020] dark:text-[#FF6666] tracking-wider">
|
||||
<span className="text-[96px] font-['Bangers',cursive] leading-none text-[#CC0000] dark:text-[#FF1111] tracking-wider">
|
||||
DAILY BUGLE
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<PageHeader title={<span style={{fontFamily:"'Bangers',cursive"}}>Dashboard</span>} description="Overview of your sales pipeline">
|
||||
<Select value={period} onValueChange={setPeriod}>
|
||||
<SelectTrigger className="h-9 w-[160px]">
|
||||
<ListFilter className="mr-2 h-4 w-4" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7days">Last 7 days</SelectItem>
|
||||
<SelectItem value="30days">Last 30 days</SelectItem>
|
||||
<SelectItem value="6months">Last 6 months</SelectItem>
|
||||
<SelectItem value="12months">Last 12 months</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</PageHeader>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Pipeline Overview</p>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
{stats
|
||||
? statCards.map((card, i) => (
|
||||
<StatCard key={card.title} {...card} index={i} monthlyBreakdown={stats.monthlyBreakdown} />
|
||||
))
|
||||
: Array.from({ length: 6 }).map((_, i) => <StatCardSkeleton key={i} />)
|
||||
}
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-[#888888] dark:text-[#666666]">Analytics</p>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<LeadStatusChart data={stats?.statusDistribution ?? []} />
|
||||
<LeadsPerMonthChart data={stats?.leadsPerMonth ?? []} />
|
||||
</div>
|
||||
|
||||
<RecentLeadsTable leads={stats?.recentLeads ?? []} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useUser } from "@/providers/user-provider"
|
||||
import { Mail, Clock } from "lucide-react"
|
||||
|
||||
export default function EmailsPage() {
|
||||
const router = useRouter()
|
||||
const { user } = useUser()
|
||||
const [emails, setEmails] = useState<any[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) { router.push("/login"); return }
|
||||
if (user.role !== "admin" && user.role !== "super_admin") { router.push("/dashboard"); return }
|
||||
fetch("/api/emails").then((r) => r.ok ? r.json() : { emails: [] }).then((d) => setEmails(d.emails || []))
|
||||
}, [user, router])
|
||||
|
||||
if (!user || (user.role !== "admin" && user.role !== "super_admin")) return null
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-xl font-bold mb-4">Email Log</h1>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
Emails are stored locally. To actually deliver them, add <code className="bg-muted px-1 rounded">EMAIL_API_KEY</code> to your .env.
|
||||
</p>
|
||||
{emails.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No emails sent yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{emails.map((e: any) => {
|
||||
const withMatch = e.bodyText?.match(/With:\s*(.+)/)
|
||||
const withName = withMatch ? withMatch[1].trim() : null
|
||||
return (
|
||||
<div key={e.id} className="flex items-center gap-3 p-3 rounded-lg border bg-card">
|
||||
<Mail className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{e.subject}</p>
|
||||
<p className="text-xs text-muted-foreground">To: {e.recipient}</p>
|
||||
{withName && <p className="text-xs text-muted-foreground/70 mt-0.5">With: {withName}</p>}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
|
||||
<Clock className="h-3 w-3" />
|
||||
{new Date(e.createdAt).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { chatWithAI } from "@/lib/ai"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { chatWithAI } from "@/lib/ai"
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
if (!["sales", "admin", "super_admin"].includes(user.role)) {
|
||||
return NextResponse.json({ error: "Forbidden" }, { status: 403 })
|
||||
}
|
||||
|
||||
const { message } = await request.json()
|
||||
@@ -14,16 +16,15 @@ export async function POST(request: NextRequest) {
|
||||
return NextResponse.json({ error: "Message is required" }, { status: 400 })
|
||||
}
|
||||
|
||||
const sessionCookie = request.cookies.get("session")
|
||||
const jwtToken = sessionCookie?.value
|
||||
if (!jwtToken) {
|
||||
return NextResponse.json({ error: "No session token" }, { status: 401 })
|
||||
}
|
||||
// Forward the JWT from the session cookie to the Rust backend
|
||||
const sessionCookie = request.cookies.get("session")?.value
|
||||
if (!sessionCookie) return NextResponse.json({ error: "No session" }, { status: 401 })
|
||||
|
||||
const response = await chatWithAI(message, sessionCookie)
|
||||
|
||||
const response = await chatWithAI(message, jwtToken)
|
||||
return NextResponse.json({ response })
|
||||
} catch (error: any) {
|
||||
} catch (error) {
|
||||
console.error("AI chat error:", error)
|
||||
return NextResponse.json({ error: error.message || "AI service error" }, { status: 500 })
|
||||
return NextResponse.json({ error: "AI service unavailable" }, { status: 503 })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
resetFailedAttempts,
|
||||
isAccountLocked,
|
||||
createSession,
|
||||
setSessionContext,
|
||||
} from "@/lib/auth"
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
@@ -107,7 +106,6 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
|
||||
await createSession(dbUser.id, dbUser.role_name)
|
||||
await setSessionContext(dbUser.id, ipAddress)
|
||||
|
||||
const user = mapDbUserToSessionUser(dbUser)
|
||||
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { query } from "@/lib/db"
|
||||
import { unlink } from "node:fs/promises"
|
||||
import { join } from "node:path"
|
||||
import { existsSync } from "node:fs"
|
||||
|
||||
export async function DELETE(
|
||||
_request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string; messageId: string }> },
|
||||
) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { id: conversationId, messageId } = await params
|
||||
|
||||
// Verify user is a participant in this conversation
|
||||
const partCheck = await query(
|
||||
`SELECT 1 FROM conversation_participants WHERE conversation_id = $1 AND user_id = $2`,
|
||||
[conversationId, user.id],
|
||||
)
|
||||
if (partCheck.rows.length === 0) {
|
||||
return NextResponse.json({ error: "Not a participant" }, { status: 403 })
|
||||
}
|
||||
|
||||
// Fetch the message to verify it belongs to the sender and check if it's a voice message
|
||||
const msgResult = await query(
|
||||
`SELECT id, sender_id, content FROM messages WHERE id = $1 AND conversation_id = $2 AND deleted_at IS NULL`,
|
||||
[messageId, conversationId],
|
||||
)
|
||||
if (msgResult.rows.length === 0) {
|
||||
return NextResponse.json({ error: "Message not found" }, { status: 404 })
|
||||
}
|
||||
|
||||
const message = msgResult.rows[0]
|
||||
|
||||
// Only the sender can delete their own message
|
||||
if (message.sender_id !== user.id) {
|
||||
return NextResponse.json({ error: "Cannot delete another user's message" }, { status: 403 })
|
||||
}
|
||||
|
||||
// Delete the associated audio file if this is a voice message
|
||||
let storageDeleted = false
|
||||
try {
|
||||
const content = message.content
|
||||
if (content?.startsWith("{")) {
|
||||
const parsed = JSON.parse(content)
|
||||
if (parsed.v && parsed.u) {
|
||||
const filename = parsed.u.replace(/^\/uploads\/voice\//, "")
|
||||
const filePath = join(process.cwd(), "public", "uploads", "voice", filename)
|
||||
if (existsSync(filePath)) {
|
||||
await unlink(filePath)
|
||||
storageDeleted = true
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// If file deletion fails, log but still proceed with DB deletion
|
||||
console.warn(`[voice-delete] Failed to delete audio file for message ${messageId}`)
|
||||
}
|
||||
|
||||
// Soft-delete the message in the database
|
||||
const deleteResult = await query(
|
||||
`UPDATE messages SET deleted_at = NOW() WHERE id = $1 AND conversation_id = $2 RETURNING id`,
|
||||
[messageId, conversationId],
|
||||
)
|
||||
|
||||
const dbDeleted = deleteResult.rows.length > 0
|
||||
|
||||
console.log(
|
||||
`[voice-delete] id=${messageId} conv=${conversationId} user=${user.id} db=${dbDeleted} storage=${storageDeleted}`,
|
||||
)
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
messageId,
|
||||
dbDeleted,
|
||||
storageDeleted,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("[voice-delete] Error:", error)
|
||||
return NextResponse.json({ error: "Unable to delete voice note. Please try again." }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { query } from "@/lib/db"
|
||||
import { avatarSvgUrl } from "@/lib/avatar"
|
||||
import { hasBlockedCodeExtension } from "@/lib/blocked-extensions"
|
||||
|
||||
export async function GET(
|
||||
_request: NextRequest,
|
||||
@@ -103,6 +104,18 @@ export async function POST(
|
||||
return NextResponse.json({ error: "Message content is required" }, { status: 400 })
|
||||
}
|
||||
|
||||
// Server-side blocked code extension check
|
||||
try {
|
||||
const parsed = JSON.parse(content)
|
||||
if (parsed.fileAttachments && Array.isArray(parsed.fileAttachments)) {
|
||||
for (const f of parsed.fileAttachments) {
|
||||
if (f.name && hasBlockedCodeExtension(f.name)) {
|
||||
return NextResponse.json({ error: `Blocked file type: ${f.name}` }, { status: 400 })
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
|
||||
const result = await query(
|
||||
`INSERT INTO messages (conversation_id, sender_id, content)
|
||||
VALUES ($1, $2, $3)
|
||||
@@ -160,3 +173,62 @@ function formatTime(date: Date): string {
|
||||
return date.toLocaleDateString([], { month: "short", day: "numeric" }) + " " +
|
||||
date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
|
||||
}
|
||||
|
||||
export async function DELETE(
|
||||
_request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { id } = await params
|
||||
const body = await _request.json()
|
||||
const messageId = body.messageId
|
||||
if (!messageId) return NextResponse.json({ error: "messageId required" }, { status: 400 })
|
||||
|
||||
const result = await query(
|
||||
`UPDATE messages SET deleted_at = NOW() WHERE id = $1 AND sender_id = $2 AND conversation_id = $3 RETURNING id`,
|
||||
[messageId, user.id, id],
|
||||
)
|
||||
if (result.rows.length === 0) {
|
||||
return NextResponse.json({ error: "Message not found or not yours" }, { status: 404 })
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true })
|
||||
} catch (error) {
|
||||
console.error("Delete message error:", error)
|
||||
return NextResponse.json({ error: "Failed to delete message" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
export async function PATCH(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { id } = await params
|
||||
const body = await request.json()
|
||||
const messageId = body.messageId
|
||||
const newContent = body.content
|
||||
if (!messageId || !newContent?.trim()) {
|
||||
return NextResponse.json({ error: "messageId and content required" }, { status: 400 })
|
||||
}
|
||||
|
||||
const result = await query(
|
||||
`UPDATE messages SET content = $1, updated_at = NOW() WHERE id = $2 AND sender_id = $3 AND conversation_id = $4 AND deleted_at IS NULL RETURNING id`,
|
||||
[newContent.trim(), messageId, user.id, id],
|
||||
)
|
||||
if (result.rows.length === 0) {
|
||||
return NextResponse.json({ error: "Message not found or not yours" }, { status: 404 })
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true })
|
||||
} catch (error) {
|
||||
console.error("Edit message error:", error)
|
||||
return NextResponse.json({ error: "Failed to edit message" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,8 +18,8 @@ export async function GET() {
|
||||
u.email AS other_user_email,
|
||||
u.phone AS other_user_phone,
|
||||
u.avatar_url AS other_user_avatar_url,
|
||||
(SELECT content FROM messages WHERE conversation_id = c.id ORDER BY created_at DESC LIMIT 1) AS last_message,
|
||||
(SELECT created_at FROM messages WHERE conversation_id = c.id ORDER BY created_at DESC LIMIT 1) AS last_message_time,
|
||||
(SELECT content FROM messages WHERE conversation_id = c.id AND deleted_at IS NULL ORDER BY created_at DESC LIMIT 1) AS last_message,
|
||||
(SELECT created_at FROM messages WHERE conversation_id = c.id AND deleted_at IS NULL ORDER BY created_at DESC LIMIT 1) AS last_message_time,
|
||||
(SELECT count(*) FROM messages WHERE conversation_id = c.id AND sender_id != $1 AND created_at > COALESCE(cp_me.last_read_at, '1970-01-01')) AS unread
|
||||
FROM conversations c
|
||||
JOIN conversation_participants cp_me ON cp_me.conversation_id = c.id AND cp_me.user_id = $1
|
||||
@@ -40,7 +40,6 @@ export async function GET() {
|
||||
id: row.other_user_id,
|
||||
name: row.other_user_name,
|
||||
email: row.other_user_email,
|
||||
phone: row.other_user_phone || "",
|
||||
avatar: avatarSvgUrl(row.other_user_name),
|
||||
},
|
||||
lastMessage: row.last_message || "",
|
||||
@@ -92,7 +91,7 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
|
||||
const otherUser = await query(
|
||||
`SELECT id, first_name || ' ' || last_name AS name, email, phone, avatar_url
|
||||
`SELECT id, first_name || ' ' || last_name AS name, email, avatar_url
|
||||
FROM users WHERE id = $1`,
|
||||
[userId],
|
||||
)
|
||||
@@ -107,7 +106,6 @@ export async function POST(request: NextRequest) {
|
||||
id: other.id,
|
||||
name: other.name,
|
||||
email: other.email,
|
||||
phone: other.phone || "",
|
||||
avatar: avatarSvgUrl(other.name),
|
||||
},
|
||||
lastMessage: "",
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { query } from "@/lib/db"
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const isAdmin = user.role === "admin" || user.role === "super_admin"
|
||||
if (!isAdmin) return NextResponse.json({ error: "Forbidden" }, { status: 403 })
|
||||
|
||||
const result = await query(
|
||||
`SELECT id, recipient, subject, body_text, created_at FROM sent_emails ORDER BY created_at DESC LIMIT 50`,
|
||||
)
|
||||
|
||||
return NextResponse.json({ emails: result.rows.map((r: any) => ({
|
||||
id: r.id,
|
||||
recipient: r.recipient,
|
||||
subject: r.subject,
|
||||
bodyText: r.body_text,
|
||||
createdAt: r.created_at,
|
||||
})) })
|
||||
} catch (error) {
|
||||
console.error("Emails GET error:", error)
|
||||
return NextResponse.json({ error: "Failed to load sent emails" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { query } from "@/lib/db"
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const result = await query(
|
||||
`SELECT u.id, u.first_name, u.last_name, u.email
|
||||
FROM users u
|
||||
WHERE u.deleted_at IS NULL AND u.id != $1
|
||||
ORDER BY u.first_name ASC`,
|
||||
[user.id],
|
||||
)
|
||||
|
||||
const users = result.rows.map((r: any) => ({
|
||||
id: r.id,
|
||||
name: `${r.first_name} ${r.last_name}`,
|
||||
email: r.email,
|
||||
}))
|
||||
|
||||
return NextResponse.json({ users })
|
||||
} catch (error) {
|
||||
console.error("Event users error:", error)
|
||||
return NextResponse.json({ error: "Failed to load users" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { query } from "@/lib/db"
|
||||
import { buildIcs } from "@/lib/ics"
|
||||
|
||||
export async function GET(_request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { id } = await params
|
||||
|
||||
const result = await query(
|
||||
`SELECT e.id, e.user_id, e.participant_id, e.title, e.description, e.event_type,
|
||||
e.start_time, e.end_time, e.duration_minutes, e.status,
|
||||
u.email AS user_email, u.first_name AS user_first, u.last_name AS user_last,
|
||||
p.email AS p_email, p.first_name AS p_first, p.last_name AS p_last
|
||||
FROM scheduled_events e
|
||||
JOIN users u ON u.id = e.user_id
|
||||
LEFT JOIN users p ON p.id = e.participant_id
|
||||
WHERE e.id = $1 AND e.user_id = $2`,
|
||||
[id, user.id],
|
||||
)
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return NextResponse.json({ error: "Event not found" }, { status: 404 })
|
||||
}
|
||||
|
||||
const r = result.rows[0]
|
||||
|
||||
const icsContent = buildIcs({
|
||||
uid: r.id,
|
||||
title: r.title,
|
||||
description: r.description || undefined,
|
||||
startTime: new Date(r.start_time),
|
||||
endTime: r.end_time ? new Date(r.end_time) : undefined,
|
||||
durationMinutes: r.duration_minutes || undefined,
|
||||
organizerName: `${r.user_first} ${r.user_last}`,
|
||||
organizerEmail: r.user_email,
|
||||
attendeeName: r.p_first ? `${r.p_first} ${r.p_last}` : undefined,
|
||||
attendeeEmail: r.p_email || undefined,
|
||||
})
|
||||
|
||||
return new NextResponse(icsContent, {
|
||||
headers: {
|
||||
"Content-Type": "text/calendar; charset=utf-8",
|
||||
"Content-Disposition": `attachment; filename="event-${r.id}.ics"`,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("ICS GET error:", error)
|
||||
return NextResponse.json({ error: "Failed to generate calendar file" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { query } from "@/lib/db"
|
||||
import { sendEventRescheduled } from "@/lib/email"
|
||||
|
||||
export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { id } = await params
|
||||
const { title, description, eventType, startTime, endTime, durationMinutes, status, participantId, participantNotes } = await request.json()
|
||||
|
||||
const existing = await query(
|
||||
`SELECT e.user_id, e.participant_id, e.title, e.description, e.participant_notes, e.event_type,
|
||||
e.start_time, e.end_time, e.duration_minutes, e.status,
|
||||
u.email AS u_email, u.first_name AS u_first, u.last_name AS u_last,
|
||||
p.email AS p_email, p.first_name AS p_first, p.last_name AS p_last
|
||||
FROM scheduled_events e
|
||||
JOIN users u ON u.id = e.user_id
|
||||
LEFT JOIN users p ON p.id = e.participant_id
|
||||
WHERE e.id = $1`,
|
||||
[id],
|
||||
user.id,
|
||||
)
|
||||
|
||||
if (existing.rows.length === 0) {
|
||||
return NextResponse.json({ error: "Event not found" }, { status: 404 })
|
||||
}
|
||||
|
||||
const old = existing.rows[0]
|
||||
const isCreator = old.user_id === user.id
|
||||
const isParticipant = old.participant_id === user.id
|
||||
|
||||
if (!isCreator && !isParticipant) {
|
||||
return NextResponse.json({ error: "Forbidden" }, { status: 403 })
|
||||
}
|
||||
|
||||
if (!isCreator && (
|
||||
(title !== undefined && title !== old.title) ||
|
||||
(eventType !== undefined && eventType !== old.event_type) ||
|
||||
(startTime !== undefined && startTime !== old.start_time) ||
|
||||
(endTime !== undefined && endTime !== old.end_time) ||
|
||||
(durationMinutes !== undefined && durationMinutes !== old.duration_minutes) ||
|
||||
(participantId !== undefined && participantId !== old.participant_id)
|
||||
)) {
|
||||
return NextResponse.json({ error: "Only the creator can edit event details" }, { status: 403 })
|
||||
}
|
||||
|
||||
const result = await query(
|
||||
`UPDATE scheduled_events SET
|
||||
title = COALESCE($1, title),
|
||||
description = COALESCE($2, description),
|
||||
participant_notes = COALESCE($3, participant_notes),
|
||||
event_type = COALESCE($4, event_type),
|
||||
start_time = COALESCE($5, start_time),
|
||||
end_time = COALESCE($6, end_time),
|
||||
duration_minutes = COALESCE($7, duration_minutes),
|
||||
status = COALESCE($8, status),
|
||||
participant_id = COALESCE($9, participant_id),
|
||||
updated_at = NOW()
|
||||
WHERE id = $10
|
||||
RETURNING id, user_id, participant_id, lead_id, conversation_id, title, description, participant_notes, event_type, start_time, end_time, duration_minutes, status, created_at`,
|
||||
[
|
||||
title || null,
|
||||
description ?? null,
|
||||
participantNotes ?? null,
|
||||
eventType || null,
|
||||
startTime || null,
|
||||
endTime ?? null,
|
||||
durationMinutes ?? null,
|
||||
status || null,
|
||||
participantId ?? null,
|
||||
id,
|
||||
],
|
||||
user.id,
|
||||
)
|
||||
|
||||
const r = result.rows[0]
|
||||
|
||||
const isChanged = r.start_time !== old.start_time || r.end_time !== old.end_time ||
|
||||
r.title !== old.title || r.event_type !== old.event_type ||
|
||||
r.status !== old.status
|
||||
|
||||
if (isChanged && r.participant_id && r.participant_id !== user.id) {
|
||||
sendEventRescheduled({
|
||||
creatorName: `${user.firstName} ${user.lastName}`,
|
||||
creatorEmail: user.email,
|
||||
participantName: old.p_first ? `${old.p_first} ${old.p_last}` : null,
|
||||
participantEmail: old.p_email || null,
|
||||
title: r.title,
|
||||
description: r.description || undefined,
|
||||
eventType: r.event_type,
|
||||
startTime: r.start_time,
|
||||
endTime: r.end_time || undefined,
|
||||
durationMinutes: r.duration_minutes || undefined,
|
||||
}).catch((err) => console.error("Reschedule email error:", err))
|
||||
}
|
||||
|
||||
const creatorResult = await query(
|
||||
`SELECT u.id, u.first_name, u.last_name, u.email, u.avatar_url,
|
||||
ur.role_id, r.name AS role_name, r.display_name AS role_display
|
||||
FROM users u
|
||||
LEFT JOIN user_roles ur ON ur.user_id = u.id
|
||||
LEFT JOIN roles r ON r.id = ur.role_id
|
||||
WHERE u.id = $1`,
|
||||
[old.user_id],
|
||||
)
|
||||
const creatorInfo = creatorResult.rows[0]
|
||||
const participantInfo = old.participant_id ? { id: old.participant_id, name: `${old.p_first} ${old.p_last}` || old.participant_id, email: old.p_email || null } : null
|
||||
|
||||
return NextResponse.json({
|
||||
event: {
|
||||
id: r.id,
|
||||
userId: r.user_id,
|
||||
participantId: r.participant_id,
|
||||
leadId: r.lead_id,
|
||||
conversationId: r.conversation_id,
|
||||
title: r.title,
|
||||
description: r.description,
|
||||
participantNotes: r.participant_notes,
|
||||
eventType: r.event_type,
|
||||
startTime: r.start_time,
|
||||
endTime: r.end_time,
|
||||
durationMinutes: r.duration_minutes,
|
||||
status: r.status,
|
||||
creator: creatorInfo ? { id: creatorInfo.id, name: `${creatorInfo.first_name} ${creatorInfo.last_name}`, email: creatorInfo.email, role: creatorInfo.role_display || creatorInfo.role_name, avatar: creatorInfo.avatar_url } : { id: old.user_id, name: "Unknown" },
|
||||
participant: participantInfo,
|
||||
lead: null,
|
||||
createdAt: r.created_at,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Events PATCH error:", error)
|
||||
return NextResponse.json({ error: "Failed to update event" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { id } = await params
|
||||
|
||||
const existing = await query(
|
||||
`SELECT user_id FROM scheduled_events WHERE id = $1`,
|
||||
[id],
|
||||
user.id,
|
||||
)
|
||||
|
||||
if (existing.rows.length === 0) {
|
||||
return NextResponse.json({ error: "Event not found" }, { status: 404 })
|
||||
}
|
||||
|
||||
if (existing.rows[0].user_id !== user.id) {
|
||||
return NextResponse.json({ error: "Forbidden" }, { status: 403 })
|
||||
}
|
||||
|
||||
await query(`DELETE FROM scheduled_events WHERE id = $1`, [id], user.id)
|
||||
|
||||
return NextResponse.json({ success: true })
|
||||
} catch (error) {
|
||||
console.error("Events DELETE error:", error)
|
||||
return NextResponse.json({ error: "Failed to delete event" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { query } from "@/lib/db"
|
||||
import { sendEventConfirmation } from "@/lib/email"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { searchParams } = new URL(request.url)
|
||||
const start = searchParams.get("start")
|
||||
const end = searchParams.get("end")
|
||||
const status = searchParams.get("status")
|
||||
|
||||
let sql = `SELECT e.id, e.user_id, e.participant_id, e.lead_id, e.conversation_id,
|
||||
e.title, e.description, e.participant_notes, e.event_type,
|
||||
e.start_time, e.end_time, e.duration_minutes, e.status, e.created_at,
|
||||
u.id AS u_id, u.first_name AS u_first, u.last_name AS u_last, u.email AS u_email, u.avatar_url AS u_avatar,
|
||||
ur.role_id AS u_role_id, r.name AS u_role_name, r.display_name AS u_role_display,
|
||||
p.id AS p_id, p.first_name AS p_first, p.last_name AS p_last, p.email AS p_email, p.avatar_url AS p_avatar,
|
||||
pr.role_id AS p_role_id, pr2.name AS p_role_name, pr2.display_name AS p_role_display,
|
||||
l.id AS l_id, l.company_name, l.contact_name
|
||||
FROM scheduled_events e
|
||||
JOIN users u ON u.id = e.user_id
|
||||
LEFT JOIN users p ON p.id = e.participant_id
|
||||
LEFT JOIN leads l ON l.id = e.lead_id
|
||||
LEFT JOIN user_roles ur ON ur.user_id = e.user_id
|
||||
LEFT JOIN roles r ON r.id = ur.role_id
|
||||
LEFT JOIN user_roles pr ON pr.user_id = e.participant_id
|
||||
LEFT JOIN roles pr2 ON pr2.id = pr.role_id`
|
||||
const params: unknown[] = []
|
||||
let idx = 1
|
||||
|
||||
if (user.role !== "super_admin") {
|
||||
sql += ` WHERE e.user_id = $${idx} OR e.participant_id = $${idx}`
|
||||
params.push(user.id)
|
||||
idx++
|
||||
} else {
|
||||
sql += ` WHERE 1=1`
|
||||
}
|
||||
|
||||
if (start) {
|
||||
sql += ` AND e.start_time >= $${idx}`
|
||||
params.push(start)
|
||||
idx++
|
||||
}
|
||||
|
||||
if (end) {
|
||||
sql += ` AND e.start_time <= $${idx}`
|
||||
params.push(end)
|
||||
idx++
|
||||
}
|
||||
|
||||
if (status) {
|
||||
sql += ` AND e.status = $${idx}`
|
||||
params.push(status)
|
||||
idx++
|
||||
}
|
||||
|
||||
sql += " ORDER BY e.start_time ASC"
|
||||
|
||||
const result = await query(sql, params, user.id)
|
||||
|
||||
const events = result.rows.map((r: any) => ({
|
||||
id: r.id,
|
||||
userId: r.user_id,
|
||||
participantId: r.participant_id,
|
||||
leadId: r.lead_id,
|
||||
conversationId: r.conversation_id,
|
||||
title: r.title,
|
||||
description: r.description,
|
||||
participantNotes: r.participant_notes,
|
||||
eventType: r.event_type,
|
||||
startTime: r.start_time,
|
||||
endTime: r.end_time,
|
||||
durationMinutes: r.duration_minutes,
|
||||
status: r.status,
|
||||
creator: { id: r.u_id, name: `${r.u_first} ${r.u_last}`, email: r.u_email, role: r.u_role_display || r.u_role_name, avatar: r.u_avatar },
|
||||
participant: r.p_id ? { id: r.p_id, name: `${r.p_first} ${r.p_last}`, email: r.p_email, role: r.p_role_display || r.p_role_name, avatar: r.p_avatar } : null,
|
||||
lead: r.l_id ? { id: r.l_id, companyName: r.company_name, contactName: r.contact_name } : null,
|
||||
createdAt: r.created_at,
|
||||
}))
|
||||
|
||||
return NextResponse.json({ events })
|
||||
} catch (error) {
|
||||
console.error("Events GET error:", error)
|
||||
return NextResponse.json({ error: "Failed to load events" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const {
|
||||
participantId, leadId, conversationId,
|
||||
title, description, eventType,
|
||||
startTime, endTime, durationMinutes,
|
||||
} = await request.json()
|
||||
|
||||
if (!title || !startTime) {
|
||||
return NextResponse.json({ error: "Title and start time are required" }, { status: 400 })
|
||||
}
|
||||
|
||||
const result = await query(
|
||||
`INSERT INTO scheduled_events (user_id, participant_id, lead_id, conversation_id, title, description, event_type, start_time, end_time, duration_minutes)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
|
||||
RETURNING id, user_id, participant_id, lead_id, conversation_id, title, description, participant_notes, event_type, start_time, end_time, duration_minutes, status, created_at`,
|
||||
[
|
||||
user.id,
|
||||
participantId || null,
|
||||
leadId || null,
|
||||
conversationId || null,
|
||||
title,
|
||||
description || null,
|
||||
eventType || "meeting",
|
||||
startTime,
|
||||
endTime || null,
|
||||
durationMinutes || null,
|
||||
],
|
||||
user.id,
|
||||
)
|
||||
|
||||
const r = result.rows[0]
|
||||
|
||||
if (participantId && participantId !== user.id) {
|
||||
await query(
|
||||
`INSERT INTO notifications (user_id, type, title, description, link, context_id, context_type)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7)`,
|
||||
[
|
||||
participantId,
|
||||
"event_scheduled",
|
||||
`Meeting scheduled: ${title}`,
|
||||
`${user.firstName} ${user.lastName} scheduled a ${eventType || "meeting"} with you`,
|
||||
`/calendar`,
|
||||
r.id,
|
||||
"scheduled_event",
|
||||
],
|
||||
)
|
||||
}
|
||||
|
||||
const participantResult = participantId ? await query(
|
||||
`SELECT email, first_name, last_name FROM users WHERE id = $1`,
|
||||
[participantId],
|
||||
) : null
|
||||
const participant = participantResult?.rows[0] || null
|
||||
|
||||
sendEventConfirmation({
|
||||
creatorName: `${user.firstName} ${user.lastName}`,
|
||||
creatorEmail: user.email,
|
||||
participantName: participant ? `${participant.first_name} ${participant.last_name}` : null,
|
||||
participantEmail: participant?.email || null,
|
||||
title,
|
||||
description: description || undefined,
|
||||
eventType: eventType || "meeting",
|
||||
startTime,
|
||||
endTime: endTime || undefined,
|
||||
durationMinutes: durationMinutes || undefined,
|
||||
}).catch((err) => console.error("Email error:", err))
|
||||
|
||||
return NextResponse.json({
|
||||
event: {
|
||||
id: r.id,
|
||||
userId: r.user_id,
|
||||
participantId: r.participant_id,
|
||||
leadId: r.lead_id,
|
||||
conversationId: r.conversation_id,
|
||||
title: r.title,
|
||||
description: r.description,
|
||||
participantNotes: r.participant_notes,
|
||||
eventType: r.event_type,
|
||||
startTime: r.start_time,
|
||||
endTime: r.end_time,
|
||||
durationMinutes: r.duration_minutes,
|
||||
status: r.status,
|
||||
creator: { id: user.id, name: `${user.firstName} ${user.lastName}`, email: user.email, role: user.role },
|
||||
participant: participantId ? { id: participantId, name: participant ? `${participant.first_name} ${participant.last_name}` : participantId, email: participant?.email || null } : null,
|
||||
lead: leadId ? { id: leadId, companyName: "", contactName: "" } : null,
|
||||
createdAt: r.created_at,
|
||||
},
|
||||
}, { status: 201 })
|
||||
} catch (error) {
|
||||
console.error("Events POST error:", error)
|
||||
return NextResponse.json({ error: "Failed to create event" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
|
||||
const TENOR_API_KEY = process.env.TENOR_API_KEY || ""
|
||||
const TENOR_BASE = "https://tenor.googleapis.com/v2"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const { searchParams } = new URL(request.url)
|
||||
const q = searchParams.get("q") || ""
|
||||
const limit = Math.min(parseInt(searchParams.get("limit") || "20", 10), 50)
|
||||
const pos = searchParams.get("pos") || ""
|
||||
|
||||
if (!TENOR_API_KEY) {
|
||||
return NextResponse.json({
|
||||
results: [],
|
||||
error: "TENOR_API_KEY not configured",
|
||||
noKey: true,
|
||||
})
|
||||
}
|
||||
|
||||
const endpoint = q
|
||||
? `${TENOR_BASE}/search?q=${encodeURIComponent(q)}&key=${TENOR_API_KEY}&limit=${limit}&media_filter=minimal`
|
||||
: `${TENOR_BASE}/featured?key=${TENOR_API_KEY}&limit=${limit}&media_filter=minimal`
|
||||
|
||||
const url = pos ? `${endpoint}&pos=${pos}` : endpoint
|
||||
|
||||
const res = await fetch(url, { signal: AbortSignal.timeout(8000) })
|
||||
if (!res.ok) {
|
||||
return NextResponse.json({ results: [], error: "Tenor API error" }, { status: 502 })
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
|
||||
const results = (data.results || []).map((item: any) => {
|
||||
const media = item.media_formats?.gif || item.media_formats?.tinygif || {}
|
||||
const preview = item.media_formats?.tinygif || item.media_formats?.gif || {}
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.title || "",
|
||||
url: media.url || "",
|
||||
previewUrl: preview.url || "",
|
||||
width: media.dims?.[0] || 200,
|
||||
height: media.dims?.[1] || 200,
|
||||
}
|
||||
})
|
||||
|
||||
return NextResponse.json({ results, next: data.next || "" })
|
||||
} catch (error) {
|
||||
console.error("GIF API error:", error)
|
||||
return NextResponse.json({ results: [], error: "Failed to fetch GIFs" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,7 @@ export async function GET() {
|
||||
[user.id],
|
||||
)
|
||||
|
||||
const websiteTheme = result.rows[0]?.website_theme || "spidey"
|
||||
const websiteTheme = result.rows[0]?.website_theme || "starforce"
|
||||
return NextResponse.json({ websiteTheme })
|
||||
} catch (error) {
|
||||
console.error("Website theme GET error:", error)
|
||||
@@ -26,7 +26,7 @@ export async function PUT(request: NextRequest) {
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const body = await request.json()
|
||||
const theme = body.websiteTheme || "spidey"
|
||||
const theme = body.websiteTheme || "starforce"
|
||||
|
||||
await query(
|
||||
`UPDATE users SET preferences = preferences || $2::jsonb WHERE id = $1`,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { getSessionUser } from "@/lib/auth"
|
||||
import { writeFile } from "node:fs/promises"
|
||||
import { join } from "node:path"
|
||||
import crypto from "node:crypto"
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const user = await getSessionUser()
|
||||
if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
|
||||
|
||||
const formData = await request.formData()
|
||||
const file = formData.get("audio") as File | null
|
||||
if (!file) return NextResponse.json({ error: "No audio file" }, { status: 400 })
|
||||
|
||||
const duration = parseFloat(formData.get("duration")?.toString() || "0")
|
||||
|
||||
const ext = file.name.endsWith(".webm") ? "webm" : "webm"
|
||||
const filename = `${crypto.randomUUID()}.${ext}`
|
||||
const buffer = Buffer.from(await file.arrayBuffer())
|
||||
const savePath = join(process.cwd(), "public", "uploads", "voice", filename)
|
||||
await writeFile(savePath, buffer)
|
||||
|
||||
return NextResponse.json({ url: `/uploads/voice/${filename}`, duration })
|
||||
} catch (error) {
|
||||
console.error("Voice upload error:", error)
|
||||
return NextResponse.json({ error: "Upload failed" }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { NextRequest, NextResponse } from "next/server"
|
||||
import { query } from "@/lib/db"
|
||||
import { hashPassword, getSessionUser, encryptPassword, setSessionContext } from "@/lib/auth"
|
||||
import { hashPassword, getSessionUser } from "@/lib/auth"
|
||||
import { avatarSvgUrl } from "@/lib/avatar"
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
@@ -63,20 +63,17 @@ export async function POST(request: NextRequest) {
|
||||
return NextResponse.json({ error: "Invalid role" }, { status: 400 })
|
||||
}
|
||||
|
||||
await setSessionContext(sessionUser.id)
|
||||
|
||||
const nameParts = name.trim().split(/\s+/)
|
||||
const firstName = nameParts[0]
|
||||
const lastName = nameParts.slice(1).join(" ") || firstName
|
||||
const username = email.split("@")[0]
|
||||
const passwordHash = await hashPassword(password)
|
||||
const passwordEncrypted = await encryptPassword(password)
|
||||
|
||||
const result = await query(
|
||||
`INSERT INTO users (username, email, password_hash, password_encrypted, first_name, last_name, is_active, created_by)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
|
||||
`INSERT INTO users (username, email, password_hash, first_name, last_name, is_active, created_by)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7)
|
||||
RETURNING id`,
|
||||
[username.toLowerCase(), email.toLowerCase(), passwordHash, passwordEncrypted, firstName, lastName, active ?? true, sessionUser.id]
|
||||
[username.toLowerCase(), email.toLowerCase(), passwordHash, firstName, lastName, active ?? true, sessionUser.id]
|
||||
)
|
||||
|
||||
const roleId = (
|
||||
|
||||
+102
-264
@@ -1,29 +1,94 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Audiowide&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 15px #39ff14, 0 0 30px #39ff14, 0 0 50px #39ff14, 0 0 80px rgba(57, 255, 20, 0.6);
|
||||
}
|
||||
|
||||
.dark .text-glow {
|
||||
text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 35px #39ff14;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(400%); }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow-red {
|
||||
0%, 100% { opacity: 0.12; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow-blue {
|
||||
0%, 100% { opacity: 0.12; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow-intersection {
|
||||
0%, 100% { opacity: 0.15; }
|
||||
50% { opacity: 0.65; }
|
||||
}
|
||||
|
||||
.saber-outer { stroke-width: 30; }
|
||||
.dark .saber-outer { stroke-width: 40; }
|
||||
.saber-mid { stroke-width: 18; }
|
||||
.dark .saber-mid { stroke-width: 24; }
|
||||
.saber-core { stroke-width: 6; }
|
||||
.dark .saber-core { stroke-width: 8; }
|
||||
|
||||
.saber-blue-outer { stroke-width: 24; }
|
||||
.dark .saber-blue-outer { stroke-width: 40; }
|
||||
.saber-blue-mid { stroke-width: 13; }
|
||||
.dark .saber-blue-mid { stroke-width: 24; }
|
||||
.saber-blue-core { stroke-width: 4; }
|
||||
.dark .saber-blue-core { stroke-width: 8; }
|
||||
|
||||
.animate-pulse-red {
|
||||
animation: pulse-glow-red 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-blue {
|
||||
animation: pulse-glow-blue 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-intersection {
|
||||
animation: pulse-glow-intersection 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes star-twinkle {
|
||||
0%, 100% { opacity: 0.1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
@keyframes star-drift {
|
||||
0% { transform: translate(0, 0); }
|
||||
50% { transform: translate(3px, -2px); }
|
||||
100% { transform: translate(0, 0); }
|
||||
}
|
||||
|
||||
.star-twinkle {
|
||||
animation: star-twinkle 4s ease-in-out infinite, star-drift 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: 210 40% 98%;
|
||||
--background: 220 14% 84%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card: 220 10% 91%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover: 220 14% 96%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 0 100% 40%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--primary: 120 100% 50%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 220 14% 88%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted: 220 14% 88%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent: 220 14% 88%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
@@ -40,14 +105,20 @@
|
||||
--sidebar-ring: 0 76.3% 48%;
|
||||
--radius: 0.5rem;
|
||||
--theme-primary: hsl(var(--primary));
|
||||
--event-meeting: 217 91% 55%;
|
||||
--event-call: 160 84% 39%;
|
||||
--event-chat: 271 81% 53%;
|
||||
--event-follow_up: 38 92% 48%;
|
||||
--event-demo: 346 77% 48%;
|
||||
--event-other: 215 20% 55%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--background: 0 0% 10%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card: 0 0% 9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover: 222.2 84% 11%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 0 100% 53%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
@@ -62,266 +133,15 @@
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 0 100% 53%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar: 0 0% 11%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 0 100% 53%;
|
||||
--sidebar-primary: 145 65% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 0 100% 53%;
|
||||
}
|
||||
|
||||
.ocean {
|
||||
--primary: 187 75% 42%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 187 75% 42%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 187 75% 42%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 187 30% 94%;
|
||||
--sidebar-accent-foreground: 187 50% 20%;
|
||||
--sidebar-border: 187 20% 88%;
|
||||
--sidebar-ring: 187 75% 42%;
|
||||
}
|
||||
|
||||
.dark.ocean {
|
||||
--primary: 187 75% 50%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 187 75% 50%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 187 75% 55%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 187 75% 50%;
|
||||
}
|
||||
|
||||
.forest {
|
||||
--primary: 142 76% 36%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 142 76% 36%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 142 76% 36%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 142 30% 94%;
|
||||
--sidebar-accent-foreground: 142 50% 20%;
|
||||
--sidebar-border: 142 20% 88%;
|
||||
--sidebar-ring: 142 76% 36%;
|
||||
}
|
||||
|
||||
.dark.forest {
|
||||
--primary: 142 76% 44%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 142 76% 44%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 142 76% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 142 76% 44%;
|
||||
}
|
||||
|
||||
.sunset {
|
||||
--primary: 24 95% 53%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 24 95% 53%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 24 95% 53%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 24 30% 94%;
|
||||
--sidebar-accent-foreground: 24 50% 20%;
|
||||
--sidebar-border: 24 20% 88%;
|
||||
--sidebar-ring: 24 95% 53%;
|
||||
}
|
||||
|
||||
.dark.sunset {
|
||||
--primary: 24 95% 58%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 24 95% 58%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 24 95% 65%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 24 95% 58%;
|
||||
}
|
||||
|
||||
.midnight {
|
||||
--primary: 230 75% 55%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 230 75% 55%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 230 75% 55%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 230 30% 94%;
|
||||
--sidebar-accent-foreground: 230 50% 20%;
|
||||
--sidebar-border: 230 20% 88%;
|
||||
--sidebar-ring: 230 75% 55%;
|
||||
}
|
||||
|
||||
.dark.midnight {
|
||||
--primary: 230 75% 62%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 230 75% 62%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 230 75% 65%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 230 75% 62%;
|
||||
}
|
||||
|
||||
.rose {
|
||||
--primary: 346 77% 50%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 346 77% 50%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 346 77% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 346 30% 94%;
|
||||
--sidebar-accent-foreground: 346 50% 20%;
|
||||
--sidebar-border: 346 20% 88%;
|
||||
--sidebar-ring: 346 77% 50%;
|
||||
}
|
||||
|
||||
.dark.rose {
|
||||
--primary: 346 77% 58%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 346 77% 58%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 346 77% 60%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 346 77% 58%;
|
||||
}
|
||||
|
||||
.amber {
|
||||
--primary: 38 92% 50%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 38 92% 50%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 38 92% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 38 30% 94%;
|
||||
--sidebar-accent-foreground: 38 50% 20%;
|
||||
--sidebar-border: 38 20% 88%;
|
||||
--sidebar-ring: 38 92% 50%;
|
||||
}
|
||||
|
||||
.dark.amber {
|
||||
--primary: 38 92% 56%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 38 92% 56%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 38 92% 60%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 38 92% 56%;
|
||||
}
|
||||
|
||||
.violet {
|
||||
--primary: 262 83% 58%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 262 83% 58%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 262 83% 58%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 262 30% 94%;
|
||||
--sidebar-accent-foreground: 262 50% 20%;
|
||||
--sidebar-border: 262 20% 88%;
|
||||
--sidebar-ring: 262 83% 58%;
|
||||
}
|
||||
|
||||
.dark.violet {
|
||||
--primary: 262 83% 65%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 262 83% 65%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 262 83% 68%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 262 83% 65%;
|
||||
}
|
||||
|
||||
.slate {
|
||||
--primary: 215 20% 45%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 215 20% 45%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 215 20% 45%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 215 20% 94%;
|
||||
--sidebar-accent-foreground: 215 50% 20%;
|
||||
--sidebar-border: 215 20% 88%;
|
||||
--sidebar-ring: 215 20% 45%;
|
||||
}
|
||||
|
||||
.dark.slate {
|
||||
--primary: 215 20% 60%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 215 20% 60%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 215 20% 65%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 215 20% 60%;
|
||||
}
|
||||
|
||||
.ruby {
|
||||
--primary: 351 85% 45%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--ring: 351 85% 45%;
|
||||
--sidebar: 0 0% 100%;
|
||||
--sidebar-foreground: 222.2 84% 4.9%;
|
||||
--sidebar-primary: 351 85% 45%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 351 30% 94%;
|
||||
--sidebar-accent-foreground: 351 50% 20%;
|
||||
--sidebar-border: 351 20% 88%;
|
||||
--sidebar-ring: 351 85% 45%;
|
||||
}
|
||||
|
||||
.dark.ruby {
|
||||
--primary: 351 85% 52%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--ring: 351 85% 52%;
|
||||
--sidebar: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 351 85% 55%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 351 85% 52%;
|
||||
}
|
||||
|
||||
.ocean {
|
||||
@@ -643,6 +463,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
[data-radix-select-trigger] {
|
||||
background-color: hsl(0 0% 100%);
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
|
||||
/* Login page custom styles */
|
||||
.left-panel {
|
||||
background: #0a0a0f;
|
||||
@@ -888,6 +722,10 @@
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
.body-text { color: rgba(232,232,239,0.5); }
|
||||
.subheading-text { color: rgba(232,232,239,0.38); }
|
||||
.checkbox-text { color: rgba(232,232,239,0.38); }
|
||||
|
||||
@@ -4,6 +4,8 @@ import { ThemeProvider } from "@/providers/theme-provider"
|
||||
import { WebsiteThemeProvider } from "@/providers/website-theme-provider"
|
||||
import { Toaster } from "@/components/ui/sonner"
|
||||
import "./globals.css"
|
||||
import "../../Web_Backgrounds/spidey-theme.css"
|
||||
import "../../Web_Backgrounds/starforce-theme.css"
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
|
||||
@@ -13,8 +13,7 @@ const waves = [
|
||||
]
|
||||
|
||||
export default function LoginPage() {
|
||||
const searchParams = useSearchParams()
|
||||
const redirectTo = searchParams.get("redirect") || "/dashboard"
|
||||
const router = useRouter()
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
@@ -215,7 +214,7 @@ export default function LoginPage() {
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
window.location.href = redirectTo
|
||||
router.push("/dashboard")
|
||||
} else {
|
||||
const data = await res.json().catch(() => ({}))
|
||||
setError(data.error || "Invalid email or password.")
|
||||
|
||||
+33
-111
@@ -1,7 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, useEffect, Fragment } from "react"
|
||||
import { Send, Bot, User, RefreshCw, AlertCircle, Check, Terminal } from "lucide-react"
|
||||
import { Send, Loader2, Bot, User, RefreshCw, AlertCircle } from "lucide-react"
|
||||
|
||||
function linkifyText(text: string) {
|
||||
const urlRegex = /(https?:\/\/[^\s<]+[^\s<.,;:!?)\]}>])/
|
||||
@@ -24,26 +24,9 @@ export function AIChat() {
|
||||
const [input, setInput] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const [bootState, setBootState] = useState<"booting" | "ready" | "error">("booting")
|
||||
const [ollamaStatus, setOllamaStatus] = useState<boolean | null>(null)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const checkServer = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/ai/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: "ping" }),
|
||||
})
|
||||
if (res.status !== 503) {
|
||||
setBootState("ready")
|
||||
} else {
|
||||
setTimeout(checkServer, 2000)
|
||||
}
|
||||
} catch {
|
||||
setTimeout(checkServer, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/ai/jobs")
|
||||
.then((r) => r.json())
|
||||
@@ -73,13 +56,29 @@ export function AIChat() {
|
||||
},
|
||||
])
|
||||
})
|
||||
checkServer()
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
|
||||
}, [messages])
|
||||
|
||||
const checkOllama = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/ai/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: "__ping__" }),
|
||||
})
|
||||
setOllamaStatus(res.status !== 503)
|
||||
} catch {
|
||||
setOllamaStatus(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { checkOllama() }, [])
|
||||
|
||||
const sendMessage = async () => {
|
||||
const msg = input.trim()
|
||||
if (!msg || loading) return
|
||||
@@ -97,8 +96,8 @@ export function AIChat() {
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}))
|
||||
throw new Error(data.error || `Error ${res.status}`)
|
||||
const data = await res.json()
|
||||
throw new Error(data.error || "Failed to get response")
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
@@ -122,86 +121,17 @@ export function AIChat() {
|
||||
}
|
||||
}
|
||||
|
||||
const bootOverlay = (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<style>{`
|
||||
@keyframes walk {
|
||||
0%, 100% { transform: translateX(0) translateY(0); }
|
||||
25% { transform: translateX(12px) translateY(-4px); }
|
||||
50% { transform: translateX(24px) translateY(0); }
|
||||
75% { transform: translateX(12px) translateY(-4px); }
|
||||
}
|
||||
@keyframes legLeft {
|
||||
0%, 100% { transform: rotate(-10deg); }
|
||||
50% { transform: rotate(10deg); }
|
||||
}
|
||||
@keyframes legRight {
|
||||
0%, 100% { transform: rotate(10deg); }
|
||||
50% { transform: rotate(-10deg); }
|
||||
}
|
||||
@keyframes armLeft {
|
||||
0%, 100% { transform: rotate(15deg); }
|
||||
50% { transform: rotate(-15deg); }
|
||||
}
|
||||
@keyframes armRight {
|
||||
0%, 100% { transform: rotate(-15deg); }
|
||||
50% { transform: rotate(15deg); }
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 45%, 55%, 100% { height: 4px; }
|
||||
50% { height: 1px; }
|
||||
}
|
||||
.robot-walk { animation: walk 0.6s ease-in-out infinite; }
|
||||
.robot-leg-l { transform-origin: top center; animation: legLeft 0.3s ease-in-out infinite; }
|
||||
.robot-leg-r { transform-origin: top center; animation: legRight 0.3s ease-in-out infinite; }
|
||||
.robot-arm-l { transform-origin: top center; animation: armLeft 0.3s ease-in-out infinite; }
|
||||
.robot-arm-r { transform-origin: top center; animation: armRight 0.3s ease-in-out infinite; }
|
||||
.robot-eye { animation: blink 2s ease-in-out infinite; }
|
||||
`}</style>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-sm text-[#6a6a75]">Servers booting...</p>
|
||||
<div className="h-[50px] w-[100px] bg-[#1a1a24] border border-[#2a2a35] rounded-lg flex items-center justify-center overflow-hidden">
|
||||
<div className="robot-walk relative">
|
||||
<svg width="40" height="36" viewBox="0 0 40 36" fill="none">
|
||||
<rect x="10" y="2" width="20" height="16" rx="3" fill="#1BB0CE" opacity="0.9"/>
|
||||
<rect x="6" y="6" width="6" height="2" rx="1" className="robot-arm-l" fill="#1BB0CE" opacity="0.7"/>
|
||||
<rect x="28" y="6" width="6" height="2" rx="1" className="robot-arm-r" fill="#1BB0CE" opacity="0.7"/>
|
||||
<rect x="14" y="5" width="4" height="4" rx="1" fill="#0d1117"/>
|
||||
<rect x="22" y="5" width="4" height="4" rx="1" fill="#0d1117"/>
|
||||
<circle cx="16" cy="7" r="1.5" className="robot-eye" fill="#1BB0CE"/>
|
||||
<circle cx="24" cy="7" r="1.5" className="robot-eye" fill="#1BB0CE"/>
|
||||
<rect x="17" y="10" width="6" height="2" rx="1" fill="#0d1117"/>
|
||||
<rect x="12" y="18" width="5" height="10" rx="2" className="robot-leg-l" fill="#1BB0CE" opacity="0.8"/>
|
||||
<rect x="23" y="18" width="5" height="10" rx="2" className="robot-leg-r" fill="#1BB0CE" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const readyOverlay = (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="h-[50px] w-[100px] bg-[#1a1a24] border border-[#2a2a35] rounded-lg flex items-center justify-center">
|
||||
<Check className="h-6 w-6 text-green-400" />
|
||||
</div>
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-xs text-[#6a6a75]">Try these commands:</p>
|
||||
<div className="flex gap-2">
|
||||
<code className="text-xs px-2 py-1 rounded bg-[#2a2a35] text-[#1BB0CE] flex items-center gap-1"><Terminal className="h-3 w-3" /> lists</code>
|
||||
<code className="text-xs px-2 py-1 rounded bg-[#2a2a35] text-[#1BB0CE] flex items-center gap-1"><Terminal className="h-3 w-3" /> leads</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (bootState === "booting") return bootOverlay
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{bootState === "ready" && readyOverlay}
|
||||
{ollamaStatus === false && (
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-amber-500/10 border-b border-amber-500/20 text-amber-400 text-xs">
|
||||
<AlertCircle className="h-3.5 w-3.5 flex-none" />
|
||||
<span className="flex-1">Ollama not responding. Start it with <code className="bg-amber-500/20 px-1 rounded">ollama serve</code></span>
|
||||
<button type="button" onClick={checkOllama} className="hover:text-amber-300">
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin">
|
||||
{messages.map((msg, i) => (
|
||||
@@ -233,10 +163,7 @@ export function AIChat() {
|
||||
<Bot className="h-4 w-4 text-[#1BB0CE]" />
|
||||
</div>
|
||||
<div className="max-w-[75%] rounded-lg px-4 py-2.5 bg-[#1a1a24] border border-[#2a2a35]">
|
||||
<svg className="h-4 w-4 animate-spin text-[#1BB0CE]" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" opacity="0.25"/>
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
|
||||
</svg>
|
||||
<Loader2 className="h-4 w-4 animate-spin text-[#1BB0CE]" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -265,15 +192,10 @@ export function AIChat() {
|
||||
disabled={loading || !input.trim()}
|
||||
className="h-9 w-9 rounded-lg bg-[#1BB0CE] hover:bg-[#1BB0CE]/80 disabled:opacity-40 flex items-center justify-center flex-none transition-colors"
|
||||
>
|
||||
{loading ? (
|
||||
<svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" opacity="0.25"/>
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
|
||||
</svg>
|
||||
) : <Send className="h-4 w-4" />}
|
||||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,294 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, Image, Sticker, X, Loader2, TrendingUp } from "lucide-react"
|
||||
import data from "@emoji-mart/data"
|
||||
import Picker from "@emoji-mart/react"
|
||||
import { getStickerPacks, type StickerPack } from "@/data/stickers"
|
||||
|
||||
type Tab = "emoji" | "gif" | "sticker"
|
||||
|
||||
interface MediaPickerProps {
|
||||
onEmojiSelect: (emoji: string) => void
|
||||
onMediaSelect: (content: string) => void
|
||||
onClose: () => void
|
||||
theme?: string
|
||||
}
|
||||
|
||||
const RECENT_GIFS_KEY = "recent-gifs"
|
||||
const RECENT_STICKERS_KEY = "recent-stickers"
|
||||
const MAX_RECENT = 12
|
||||
|
||||
function getRecent(key: string): string[] {
|
||||
if (typeof window === "undefined") return []
|
||||
try { return JSON.parse(localStorage.getItem(key) || "[]") } catch { return [] }
|
||||
}
|
||||
|
||||
function addRecent(key: string, id: string) {
|
||||
if (typeof window === "undefined") return
|
||||
const items = [id, ...getRecent(key).filter((x) => x !== id)].slice(0, MAX_RECENT)
|
||||
localStorage.setItem(key, JSON.stringify(items))
|
||||
}
|
||||
|
||||
export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, theme }: MediaPickerProps) {
|
||||
const [tab, setTab] = useState<Tab>("emoji")
|
||||
const [gifQuery, setGifQuery] = useState("")
|
||||
const [gifResults, setGifResults] = useState<any[]>([])
|
||||
const [gifLoading, setGifLoading] = useState(false)
|
||||
const [gifError, setGifError] = useState("")
|
||||
const [gifNoKey, setGifNoKey] = useState(false)
|
||||
const [gifNext, setGifNext] = useState("")
|
||||
const [recentGifs, setRecentGifs] = useState<string[]>([])
|
||||
const [recentStickers, setRecentStickers] = useState<string[]>([])
|
||||
const [stickerPacks] = useState<StickerPack[]>(getStickerPacks)
|
||||
const [activePack, setActivePack] = useState(stickerPacks[0]?.id || "")
|
||||
const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
const pickerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) onClose()
|
||||
}
|
||||
document.addEventListener("mousedown", handleClick)
|
||||
return () => document.removeEventListener("mousedown", handleClick)
|
||||
}, [onClose])
|
||||
|
||||
useEffect(() => { setRecentGifs(getRecent(RECENT_GIFS_KEY)) }, [])
|
||||
useEffect(() => { setRecentStickers(getRecent(RECENT_STICKERS_KEY)) }, [])
|
||||
|
||||
const fetchGifs = useCallback(async (query: string, pos = "") => {
|
||||
setGifLoading(true)
|
||||
setGifError("")
|
||||
try {
|
||||
const params = new URLSearchParams({ limit: "20", pos })
|
||||
if (query) params.set("q", query)
|
||||
const res = await fetch(`/api/gifs?${params}`)
|
||||
const data = await res.json()
|
||||
if (data.noKey) {
|
||||
setGifNoKey(true)
|
||||
setGifResults([])
|
||||
} else if (data.results) {
|
||||
setGifResults((prev) => (pos ? [...prev, ...data.results] : data.results))
|
||||
setGifNext(data.next || "")
|
||||
setGifNoKey(false)
|
||||
} else {
|
||||
setGifError("No results found")
|
||||
}
|
||||
} catch {
|
||||
setGifError("Failed to load GIFs")
|
||||
}
|
||||
setGifLoading(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (tab !== "gif") return
|
||||
if (searchTimer.current) clearTimeout(searchTimer.current)
|
||||
if (gifQuery.trim()) {
|
||||
searchTimer.current = setTimeout(() => fetchGifs(gifQuery.trim()), 400)
|
||||
} else {
|
||||
fetchGifs("")
|
||||
}
|
||||
return () => { if (searchTimer.current) clearTimeout(searchTimer.current) }
|
||||
}, [tab, gifQuery, fetchGifs])
|
||||
|
||||
const handleGifSelect = (gif: any) => {
|
||||
const content = JSON.stringify({ gif: gif.url, w: gif.width, h: gif.height })
|
||||
addRecent(RECENT_GIFS_KEY, gif.id)
|
||||
setRecentGifs(getRecent(RECENT_GIFS_KEY))
|
||||
onMediaSelect(content)
|
||||
}
|
||||
|
||||
const handleStickerSelect = (sticker: any) => {
|
||||
const content = sticker.svg
|
||||
? JSON.stringify({ sticker: sticker.svg, w: 200, h: 200, id: sticker.id })
|
||||
: JSON.stringify({ sticker: sticker.emoji, w: 120, h: 120, id: sticker.id })
|
||||
addRecent(RECENT_STICKERS_KEY, sticker.id)
|
||||
setRecentStickers(getRecent(RECENT_STICKERS_KEY))
|
||||
onMediaSelect(content)
|
||||
}
|
||||
|
||||
const activeStickers = stickerPacks.find((p) => p.id === activePack)?.stickers || []
|
||||
|
||||
const renderGifGrid = (items: any[], emptyMsg: string) => {
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">
|
||||
<Image className="h-8 w-8 opacity-40" />
|
||||
<span>{emptyMsg}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
{items.map((gif: any) => (
|
||||
<button
|
||||
key={gif.id}
|
||||
type="button"
|
||||
onClick={() => handleGifSelect(gif)}
|
||||
className="rounded-lg overflow-hidden bg-muted/50 hover:ring-2 hover:ring-primary/50 transition-all aspect-video"
|
||||
>
|
||||
<img src={gif.previewUrl || gif.url} alt={gif.title || "GIF"} className="w-full h-full object-cover" loading="lazy" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={pickerRef} className="w-[360px] rounded-xl border bg-popover shadow-xl overflow-hidden">
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b">
|
||||
<button type="button" onClick={() => setTab("emoji")} className={cn("flex-1 py-2.5 text-sm font-medium transition-colors relative", tab === "emoji" ? "text-foreground" : "text-muted-foreground hover:text-foreground")}>
|
||||
Emoji
|
||||
{tab === "emoji" && <div className="absolute bottom-0 left-4 right-4 h-0.5 bg-primary rounded-full" />}
|
||||
</button>
|
||||
<button type="button" onClick={() => setTab("gif")} className={cn("flex-1 py-2.5 text-sm font-medium transition-colors relative", tab === "gif" ? "text-foreground" : "text-muted-foreground hover:text-foreground")}>
|
||||
GIFs
|
||||
{tab === "gif" && <div className="absolute bottom-0 left-4 right-4 h-0.5 bg-primary rounded-full" />}
|
||||
</button>
|
||||
<button type="button" onClick={() => setTab("sticker")} className={cn("flex-1 py-2.5 text-sm font-medium transition-colors relative", tab === "sticker" ? "text-foreground" : "text-muted-foreground hover:text-foreground")}>
|
||||
Stickers
|
||||
{tab === "sticker" && <div className="absolute bottom-0 left-4 right-4 h-0.5 bg-primary rounded-full" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Emoji Tab */}
|
||||
{tab === "emoji" && (
|
||||
<div className="max-h-[380px] overflow-hidden">
|
||||
<Picker
|
||||
data={data}
|
||||
onEmojiSelect={(emoji: any) => { onEmojiSelect(emoji.native); onClose() }}
|
||||
theme={theme === "dark" ? "dark" : "light"}
|
||||
previewPosition="none"
|
||||
skinTonePosition="none"
|
||||
set="native"
|
||||
emojiSize={32}
|
||||
maxFrequentRows={2}
|
||||
perLine={8}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* GIF Tab */}
|
||||
{tab === "gif" && (
|
||||
<div className="flex flex-col h-[380px]">
|
||||
<div className="p-2 border-b">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={gifQuery}
|
||||
onChange={(e) => setGifQuery(e.target.value)}
|
||||
placeholder="Search GIFs..."
|
||||
className="h-8 pl-8 text-sm"
|
||||
/>
|
||||
{gifQuery && (
|
||||
<button type="button" onClick={() => setGifQuery("")} className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<X className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{gifLoading && gifResults.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-48">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : gifNoKey ? (
|
||||
<div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">
|
||||
<Image className="h-8 w-8 opacity-40" />
|
||||
<span>GIF search requires a Tenor API key</span>
|
||||
<span className="text-xs opacity-60">Set TENOR_API_KEY in .env.local</span>
|
||||
</div>
|
||||
) : gifError ? (
|
||||
<div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">
|
||||
<TrendingUp className="h-8 w-8 opacity-40" />
|
||||
<span>{gifError}</span>
|
||||
<button type="button" onClick={() => fetchGifs(gifQuery)} className="text-xs text-primary hover:underline">Retry</button>
|
||||
</div>
|
||||
) : gifQuery.trim() ? (
|
||||
renderGifGrid(gifResults, "No GIFs found")
|
||||
) : recentGifs.length > 0 && gifResults.length === 0 ? (
|
||||
<>
|
||||
<div className="text-xs font-medium text-muted-foreground px-1 pb-2">Recent GIFs</div>
|
||||
{renderGifGrid(
|
||||
recentGifs.map((id) => gifResults.find((g: any) => g.id === id)).filter(Boolean),
|
||||
"No recent GIFs"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-xs font-medium text-muted-foreground px-1 pb-2">Trending</div>
|
||||
{renderGifGrid(gifResults, "No trending GIFs available")}
|
||||
</>
|
||||
)}
|
||||
{gifNext && !gifLoading && (
|
||||
<div className="flex justify-center pt-2 pb-1">
|
||||
<Button type="button" variant="ghost" size="sm" className="text-xs h-7" onClick={() => fetchGifs(gifQuery, gifNext)}>
|
||||
Load more
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stickers Tab */}
|
||||
{tab === "sticker" && (
|
||||
<div className="flex flex-col h-[380px]">
|
||||
<div className="flex gap-1 p-2 border-b overflow-x-auto shrink-0">
|
||||
{stickerPacks.map((pack) => (
|
||||
<button
|
||||
key={pack.id}
|
||||
type="button"
|
||||
onClick={() => setActivePack(pack.id)}
|
||||
className={cn(
|
||||
"px-3 py-1.5 text-xs rounded-md whitespace-nowrap transition-colors",
|
||||
activePack === pack.id ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80 text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{pack.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{activeStickers.map((sticker) => (
|
||||
<button
|
||||
key={sticker.id}
|
||||
type="button"
|
||||
onClick={() => handleStickerSelect(sticker)}
|
||||
className="rounded-xl bg-muted/30 hover:bg-muted/60 transition-colors flex items-center justify-center p-2 aspect-square"
|
||||
>
|
||||
{sticker.svg ? (
|
||||
<div className="w-full h-full flex items-center justify-center" dangerouslySetInnerHTML={{ __html: sticker.svg.replace(/<svg /, '<svg style="width:100%;height:100%" ') }} />
|
||||
) : (
|
||||
<span className="text-5xl">{sticker.emoji}</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{recentStickers.length > 0 && (
|
||||
<>
|
||||
<div className="text-xs font-medium text-muted-foreground pt-4 pb-2">Recently Used</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{recentStickers.map((id) => {
|
||||
const s = stickerPacks.flatMap((p) => p.stickers).find((x) => x.id === id)
|
||||
if (!s) return null
|
||||
return (
|
||||
<button key={s.id} type="button" onClick={() => handleStickerSelect(s)} className="rounded-xl bg-muted/30 hover:bg-muted/60 transition-colors flex items-center justify-center p-2 aspect-square opacity-70 hover:opacity-100">
|
||||
{s.svg ? <div className="w-full h-full flex items-center justify-center" dangerouslySetInnerHTML={{ __html: s.svg.replace(/<svg /, '<svg style="width:100%;height:100%" ') }} /> : <span className="text-5xl">{s.emoji}</span>}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client"
|
||||
|
||||
export function CrossedLightsabers() {
|
||||
return (
|
||||
<svg
|
||||
width="120"
|
||||
height="120"
|
||||
viewBox="0 0 200 200"
|
||||
className="pointer-events-none select-none overflow-visible shrink-0"
|
||||
style={{ overflow: "visible" }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id="purpleGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stopColor="#a855f7" stopOpacity="0.6" />
|
||||
<stop offset="40%" stopColor="#a855f7" stopOpacity="0.25" />
|
||||
<stop offset="100%" stopColor="#a855f7" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<circle cx="100" cy="73" r="24" fill="url(#purpleGlow)" className="animate-pulse-intersection" />
|
||||
|
||||
<g className="animate-pulse-red">
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#dc2626] dark:stroke-[#ef4444] saber-outer" />
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#dc2626] dark:stroke-[#ef4444] saber-mid" />
|
||||
<line x1="35" y1="145" x2="125" y2="45" strokeLinecap="round" className="stroke-[#f87171] dark:stroke-[#fca5a5] saber-core" />
|
||||
</g>
|
||||
|
||||
<g className="animate-pulse-blue">
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.12" className="stroke-[#1d4ed8] dark:stroke-[#3b82f6] saber-blue-outer" />
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" opacity="0.25" className="stroke-[#1d4ed8] dark:stroke-[#3b82f6] saber-blue-mid" />
|
||||
<line x1="165" y1="145" x2="75" y2="45" strokeLinecap="round" className="stroke-[#60a5fa] dark:stroke-[#93c5fd] saber-blue-core" />
|
||||
</g>
|
||||
|
||||
<rect x="30" y="145" width="10" height="55" rx="2" fill="#374151" />
|
||||
<rect x="160" y="145" width="10" height="55" rx="2" fill="#374151" />
|
||||
|
||||
<rect x="30" y="155" width="10" height="5" fill="#1f2937" />
|
||||
<rect x="30" y="166" width="10" height="5" fill="#1f2937" />
|
||||
<rect x="30" y="177" width="10" height="5" fill="#1f2937" />
|
||||
<rect x="160" y="155" width="10" height="5" fill="#1f2937" />
|
||||
<rect x="160" y="166" width="10" height="5" fill="#1f2937" />
|
||||
<rect x="160" y="177" width="10" height="5" fill="#1f2937" />
|
||||
|
||||
<rect x="32" y="143" width="6" height="4" rx="1" fill="#6b7280" />
|
||||
<rect x="162" y="143" width="6" height="4" rx="1" fill="#6b7280" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -69,19 +69,6 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
|
||||
className="h-full"
|
||||
>
|
||||
<Card className="h-full relative overflow-hidden">
|
||||
{/* Spider watermark */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-0 opacity-[0.03] dark:opacity-[0.05]">
|
||||
<svg width="220" height="220" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="90" y1="0" x2="90" y2="180" stroke="#CC0000" strokeWidth="1" />
|
||||
<line x1="0" y1="90" x2="180" y2="90" stroke="#CC0000" strokeWidth="1" />
|
||||
<line x1="30" y1="30" x2="150" y2="150" stroke="#0033CC" strokeWidth="1" />
|
||||
<line x1="150" y1="30" x2="30" y2="150" stroke="#0033CC" strokeWidth="1" />
|
||||
<circle cx="90" cy="90" r="40" stroke="#CC0000" strokeWidth="1" fill="none" />
|
||||
<circle cx="90" cy="90" r="60" stroke="#0033CC" strokeWidth="0.8" fill="none" strokeDasharray="4 4" />
|
||||
<circle cx="90" cy="90" r="80" stroke="#CC0000" strokeWidth="0.5" fill="none" strokeDasharray="2 6" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle>Lead Status</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo } from "react"
|
||||
|
||||
interface Star {
|
||||
left: number
|
||||
top: number
|
||||
size: number
|
||||
delay: number
|
||||
duration: number
|
||||
}
|
||||
|
||||
export function StarField() {
|
||||
const stars = useMemo<Star[]>(() => {
|
||||
const result: Star[] = []
|
||||
for (let i = 0; i < 160; i++) {
|
||||
result.push({
|
||||
left: Math.random() * 100,
|
||||
top: Math.random() * 100,
|
||||
size: 1.5 + Math.random() * 2,
|
||||
delay: Math.random() * 6,
|
||||
duration: 3 + Math.random() * 4,
|
||||
})
|
||||
}
|
||||
return result
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 pointer-events-none select-none z-0 overflow-hidden">
|
||||
{stars.map((s, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-[#222222] dark:bg-white star-twinkle"
|
||||
style={{
|
||||
left: `${s.left}%`,
|
||||
top: `${s.top}%`,
|
||||
width: `${s.size}px`,
|
||||
height: `${s.size}px`,
|
||||
opacity: 0.35 + Math.random() * 0.45,
|
||||
animationDelay: `${s.delay}s`,
|
||||
animationDuration: `${s.duration}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,14 +3,11 @@
|
||||
export function StatCardSkeleton() {
|
||||
return (
|
||||
<div className="col-span-full flex flex-col items-center justify-center py-20">
|
||||
<p className="text-[#CC0000] dark:text-[#FF1111] text-5xl font-['Bangers',cursive] animate-pulse">
|
||||
THWIP!
|
||||
</p>
|
||||
<p className="text-[#444444] dark:text-[#AAAAAA] text-sm mt-3">
|
||||
<p className="text-[#444444] dark:text-[#AAAAAA] text-sm">
|
||||
Loading your data...
|
||||
</p>
|
||||
<div className="w-48 h-1 rounded-full overflow-hidden bg-[#E0E0E0] dark:bg-[#222222] mt-4">
|
||||
<div className="w-full h-full rounded-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] animate-[loading_1.5s_ease-in-out_infinite]" />
|
||||
<div className="w-full h-full rounded-full bg-sidebar animate-[loading_1.5s_ease-in-out_infinite]" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -118,37 +118,6 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="relative"
|
||||
>
|
||||
{/* Web overlay decorative */}
|
||||
<div className="absolute inset-0 pointer-events-none z-0 opacity-[0.03] dark:opacity-[0.06]">
|
||||
<svg width="100%" height="100%" viewBox="0 0 180 180" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<line key={`wl-${i}`} x1="0" y1={i * 36} x2="180" y2={i * 36} stroke="#CC0000" strokeWidth="0.5" />
|
||||
))}
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<line key={`wc-${i}`} x1={i * 36} y1="0" x2={i * 36} y2="180" stroke="#CC0000" strokeWidth="0.5" />
|
||||
))}
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<line key={`wd-${i}`} x1="0" y1={i * 36} x2={180 - i * 36} y2="180" stroke="#0033CC" strokeWidth="0.5" />
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Comic action lines on hover */}
|
||||
<div className="absolute -inset-2 pointer-events-none z-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<svg width="100%" height="100%" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="100" y1="0" x2="100" y2="20" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
|
||||
<line x1="100" y1="180" x2="100" y2="200" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
|
||||
<line x1="0" y1="100" x2="20" y2="100" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
|
||||
<line x1="180" y1="100" x2="200" y2="100" stroke="#CC0000" strokeWidth="2" strokeLinecap="round" />
|
||||
<line x1="30" y1="30" x2="44" y2="44" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<line x1="170" y1="30" x2="156" y2="44" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<line x1="30" y1="170" x2="44" y2="156" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<line x1="170" y1="170" x2="156" y2="156" stroke="#0033CC" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<circle cx="100" cy="100" r="90" stroke="#CC0000" strokeWidth="0.5" strokeDasharray="4 4" opacity="0.4" />
|
||||
<circle cx="100" cy="100" r="80" stroke="#0033CC" strokeWidth="0.5" strokeDasharray="3 5" opacity="0.3" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Card className="group h-full hover:shadow-xl transition-all duration-200 relative z-10 overflow-hidden">
|
||||
{/* Red/Blue gradient top strip */}
|
||||
<div className={`h-1 w-full bg-gradient-to-r ${stripColor} ${stripGlow} shadow-sm`} />
|
||||
|
||||
@@ -35,47 +35,47 @@ export function AppShell({ children }: AppShellProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8F8F8] dark:bg-[#0A0A0A] relative overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(circle, #e6202010 1px, transparent 1px), radial-gradient(circle, #0033CC06 1px, transparent 1px)",
|
||||
backgroundImage: "radial-gradient(circle, #CC000010 1px, transparent 1px), radial-gradient(circle, #0033CC06 1px, transparent 1px)",
|
||||
backgroundSize: "28px 28px, 14px 14px",
|
||||
backgroundPosition: "0 0, 7px 7px",
|
||||
}}
|
||||
>
|
||||
{/* Spider-Man top gradient bar */}
|
||||
<div className="fixed top-0 left-0 right-0 h-[3px] w-full bg-gradient-to-r from-[#e62020] via-[#FFFFFF] to-[#0033CC] dark:from-[#FF6666] dark:via-[#FFFFFF] dark:to-[#1144FF] z-50" />
|
||||
<div className="fixed top-0 left-0 right-0 h-[3px] w-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] dark:from-[#FF1111] dark:via-[#FFFFFF] dark:to-[#1144FF] z-50" />
|
||||
|
||||
{/* Corner spider webs */}
|
||||
<div className="hidden lg:block fixed top-0 left-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
|
||||
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="0" x2="180" y2="0" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="60" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="120" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="120" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="60" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="0" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<path d="M0,30 Q30,30 30,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,60 Q60,60 60,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,90 Q90,90 90,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,120 Q120,120 120,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,150 Q150,150 150,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,180 Q180,180 180,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="120" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="120" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="60" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="0" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<path d="M0,30 Q30,30 30,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,60 Q60,60 60,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,90 Q90,90 90,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,120 Q120,120 120,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,150 Q150,150 150,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,180 Q180,180 180,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="hidden lg:block fixed top-0 right-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
|
||||
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: "scaleX(-1)" }}>
|
||||
<line x1="0" y1="0" x2="180" y2="0" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="60" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="120" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="120" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="60" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="0" y2="180" stroke="#e62020" strokeWidth="0.8"/>
|
||||
<path d="M0,30 Q30,30 30,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,60 Q60,60 60,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,90 Q90,90 90,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,120 Q120,120 120,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,150 Q150,150 150,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,180 Q180,180 180,0" stroke="#e62020" strokeWidth="0.8" fill="none"/>
|
||||
<line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="120" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="180" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="120" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="60" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<line x1="0" y1="0" x2="0" y2="180" stroke="#CC0000" strokeWidth="0.8"/>
|
||||
<path d="M0,30 Q30,30 30,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,60 Q60,60 60,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,90 Q90,90 90,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,120 Q120,120 120,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,150 Q150,150 150,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
<path d="M0,180 Q180,180 180,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
"use client"
|
||||
|
||||
export function CrmIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 64 64"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g className="fill-[#333333] dark:fill-white/[0.15] dark:stroke-[#e5e7eb] dark:[stroke-width:1.5px]">
|
||||
<path className="dark:[stroke-linejoin:round]" d="m10.35 35.62s-.75.14-1-1.48-.58-8.61-.3-8.87a10 10 0 0 1 2.07-.63s0-7.54 2.67-11.86 5.4-6.09 10.65-7.56a29.38 29.38 0 0 1 15.18.3c4.41 1.18 8.7 4.62 9.89 8.8a49.27 49.27 0 0 1 1.49 9.55 9.53 9.53 0 0 1 2.52.9c.17.33.43 9.12 0 9.38a1.6 1.6 0 0 1 -.87.23s7.86 18 7.59 19-12.93 6.36-30.1 6.23-26.05-5.41-26.36-6.11 6.57-17.88 6.57-17.88z" />
|
||||
</g>
|
||||
<g className="fill-[#777777] dark:fill-white/[0.1] dark:stroke-[#d4d4d4] dark:[stroke-width:1px]">
|
||||
<path d="m13.24 27.92s-.6-7.65 1.3-11.91a19.6 19.6 0 0 1 7.75-8.23 20.47 20.47 0 0 1 6.51-1.45c.05.16.67 10.23.66 11.61a27 27 0 0 1 -.57 4s-4-2.44-8.16-1.38a10.47 10.47 0 0 0 -7.49 7.36z" />
|
||||
<path d="m30.11 22.18s.53-3.69.54-4.89-.8-10.82-.6-10.95a4.11 4.11 0 0 1 1.88 0c.07.16 1.07 11.66 1.28 13.22a9.33 9.33 0 0 1 .27 2.44 2.85 2.85 0 0 1 -3.37.18z" />
|
||||
<path d="m34.8 21.44a76.48 76.48 0 0 1 -1.4-9.35c-.17-3.62-.51-5.65-.06-5.83s6.66.17 10.42 3.45 4.06 5.61 3.81 5.66-2.52-1-2.64-.77-.15.8.06.92 2.69 1.1 2.82 1.26a4.18 4.18 0 0 1 .28.95 16.94 16.94 0 0 0 -3-1.13c-.12.17-.23.92 0 1s3 1.3 3 1.3l.11.79s-2.83-1.18-3-1.14-.36.8-.15.92 3.16 1.26 3.25 1.43.41 1.36.41 1.36l-1.71-.54s.31.87.48 1 1.3.42 1.31.76a31.35 31.35 0 0 1 .2 3.33c-.12 0-2.2-6.45-5.21-7.09s-8.98 1.72-8.98 1.72z" />
|
||||
<path d="m22.44 22.28c2.21 0 7.19 2.45 9.76 1.84s6.89-2.79 9.51-2.81 4.07 2.48 6.36 7.84 7.14 17.34 7 17.34-8.1-17.89-9.66-20.23-2.66-3-5.86-2.77-6.81 1-6.85 1.41 0 7.17.49 7.75 3.06.71 6.18.51 5-.33 5.77-.64a10.14 10.14 0 0 0 1.69-1l7.79 16.48a30.15 30.15 0 0 0 -2.94-2.56c-.21.05-.31.8-.19.88s3.67 3.33 4 3.7a12.43 12.43 0 0 1 1.61 2.63c-.12.17-.45.55-.66.47s-5-5.71-5.39-5.83-.45.6-.45.6 5.18 5.5 5.06 5.63a8.62 8.62 0 0 1 -1.15.57s-4.34-5-4.5-4.94-.69.6-.4.81a45.71 45.71 0 0 1 4.07 4.36 7 7 0 0 1 -1.2.4 46.49 46.49 0 0 0 -3.58-3.72c-.25 0-.61.39-.49.55s3.34 3.29 3.22 3.46a4 4 0 0 1 -1.16.37s-2.47-2.59-2.65-2.59-.74.31-.53.6 2.39 2.19 2.27 2.28a4.86 4.86 0 0 1 -1 .19c-.13 0-2-2-2.22-2s-.78.19-.65.48 1.83 1.79 1.63 1.92-5.17 1.66-15.76 1.51-14.84-1.85-14.84-1.85a46 46 0 0 0 -4.22-3.69c-.37 0-.78.6-.61.72a29.31 29.31 0 0 1 2.86 2.6c-.16 0-3.27-.92-4.32-1.1a7.6 7.6 0 0 1 -2.26-.61c0-.13 6-14.45 6.27-14.41s4.29 10.07 4.29 10.07a2.77 2.77 0 0 0 1.2 2.89 3.9 3.9 0 0 0 3.49-.25l15.51.08c.12 0 2.65 1.27 3.69-.68s.44-2.67.44-2.67 4-11.27 3.76-11.52a5.63 5.63 0 0 0 -1.76-.35s-2.75 10.32-3 10.33-1.26-.3-1.68-.34a3.18 3.18 0 0 0 -.7 0l-5.48-7.62s1.1-6-3.28-6-3.14 6-3.14 6-1-.06-2 1.51-3.39 6.29-3.39 6.29a3.77 3.77 0 0 0 -1.45.2c-.66.27-1.07.49-1.07.49s-3.54-8.29-3.46-8.46.82-2.15 1.2-2.16 2.93.39 3.93.41 1.16-.11 1.2-.28.27-.8.1-.8-5.11-.57-5.48-.57-1.07 2.14-1.36 2.23-1.32.25-1.2 0 2.16-5.13 2.29-5.1 7.53 1.07 9.73.64 2.76-1.11 3.07-2.16a31.45 31.45 0 0 0 .25-6.59 19.1 19.1 0 0 0 -6.2-1.31c-2.79-.09-4.67-.13-5.87 1.82s-10.79 27.71-10.96 27.76a3.64 3.64 0 0 1 -.92-.29s4.91-14 6.78-19.26 3.47-11.56 9.47-11.46z" />
|
||||
<path d="m28.76 40.3a14.69 14.69 0 0 0 2.25 0l2.29-.09s-.39 9.67 0 9.75.67.27.66-.06-.19-7.75.06-7.79.75 1.52.75 1.52-.14 6.42 0 6.46.88.27.84.06 0-4.75 0-4.75l1.43 2.26-.79.06s-.08 2 .17 2a4.75 4.75 0 0 0 .71 0c.12 0 .11 1.16.11 1.16s-7.26-.19-9.8-.13-2.74.11-2.74.11a6.75 6.75 0 0 0 -.55-2l-.62-1.28s4.86-7.15 5.23-7.28z" />
|
||||
</g>
|
||||
<g className="fill-[#333333] dark:fill-white/[0.15] dark:stroke-[#d4d4d4] dark:[stroke-width:0.7px]">
|
||||
<path d="m30.57 41.13c.28-.1.79-.06.84.1s.41 8.41.17 8.63-.88.14-.88 0-.25-8.69-.13-8.73z" />
|
||||
<path d="m28.74 41.26c.21-.09.7-.19.79 0s.55 8.61.38 8.66-.87.18-.87 0-.3-8.66-.3-8.66z" />
|
||||
<path d="m27 44.8c.06-.14.87-.4.87-.23a52.12 52.12 0 0 1 .21 5.25 3 3 0 0 1 -.79.06s-.38-4.88-.29-5.08z" />
|
||||
<path d="m25.25 46.8c0-.17.57-.64.65-.51a14 14 0 0 1 .26 3.45 4 4 0 0 1 -.79.14s-.16-2.88-.12-3.08z" />
|
||||
<path d="m41.23 35.62c.19-.1 2.79-.16 4.58-.37a11 11 0 0 1 1.78-.25c.21 0 .48.87.36 1a17.41 17.41 0 0 1 -4.32.69c-1.46 0-2.29 0-2.29 0s-.48-.9-.11-1.07z" />
|
||||
<path d="m42 38.39c.34-.09 1.41 1.51 1.41 1.51s-.19.79-.4.63a9.86 9.86 0 0 1 -1.5-1.63c-.08-.21.29-.46.49-.51z" />
|
||||
<path d="m40.41 39.68c.29-.1 2.3 1.78 2.22 2s-.15.63-.28.59a19.84 19.84 0 0 1 -2.43-2.11c-.04-.22.37-.44.49-.48z" />
|
||||
<path d="m39.41 41.16s2.55 2 2.47 2.32a2.36 2.36 0 0 1 -.36.67s-2.93-2.38-2.81-2.6.53-.26.7-.39z" />
|
||||
<path d="m14.45 48.4c.2.07 2.81 2.31 2.82 2.72s-.11.63-.24.63a27 27 0 0 1 -2.93-2.38c-.05-.17.14-1.05.35-.97z" />
|
||||
<path d="m13.67 50.5s3.83 3.16 3.83 3.37-.11.67-.23.67a35.1 35.1 0 0 1 -4.08-3.07c-.04-.25.48-.97.48-.97z" />
|
||||
<path d="m16.27 17c-.17-.24.44-2.3 1.57-3.91s2.19-2.52 2.65-2.4.77.61.6.82a7.05 7.05 0 0 0 -2.72 2.86c-.79 1.85-.55 3-.8 3.06a1.86 1.86 0 0 1 -1.3-.43z" />
|
||||
<path d="m44.85 13.23a2.79 2.79 0 0 1 1.6.54c.09.25.27.83-.11.76a10.8 10.8 0 0 1 -1.43-.53c-.17-.06-.31-.72-.06-.77z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
"use client"
|
||||
|
||||
export function SidebarNameLogo() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 192.756 192.756"
|
||||
className="fill-[#333333] dark:fill-[#e5e7eb] w-full h-auto"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g fill-rule="evenodd" clip-rule="evenodd">
|
||||
<path d="M5.669 81.215v12.65h37.003c4.301 0 9.796-3.977 9.796-10.556 0-2.646 1.012-4.372-2.098-7.872l-4.733-5.608c-2.712-2.53.324-2.53 2.602-2.53h15.623v26.566h12.39V67.299h16.699V55.922H38.877c-6.579 0-9.796 6.317-9.615 9.606.182 3.289.787 7.427 6.254 12.398 4.987 4.533-2.469 3.289-3.218 3.289H5.669zM120.348 55.922H100.36L89.155 93.866h12.47l2.023-5.313h13.156l1.953 5.313h12.215l-10.624-37.944zm-13.916 23.522l4.301-13.916 4.049 13.916h-8.35zM170.443 81.215c-4.807 0-4.807-1.771-4.807-1.771 4.119 0 7.771-6.001 7.771-12.145s-6-11.377-10.809-11.377h-26.891v37.944h13.664v-12.65s5.818 6.831 8.854 9.614c3.037 2.783 3.289 3.036 7.41 3.036h21.449v-12.65c.002-.001-11.834-.001-16.641-.001zm-12.398-8.855h-8.672v-6.832h8.672c3.976 0 4.664 6.832 0 6.832zM5.669 98.672h13.979l3.542 12.652 3.289-12.652h14.675l3.795 12.652 3.796-12.652h12.144l-11.133 37.953H38.624l-4.878-17.965-5.496 17.965H16.865L5.669 98.672zM89.578 98.891H69.59l-11.204 37.943h12.469l2.024-5.312h13.157l1.953 5.312h12.216L89.578 98.891zm-13.915 23.521l4.301-13.916 4.048 13.916h-8.349zM170.695 110.059c-2.275 0-4.756.266-2.043 2.795l4.734 5.609c3.109 3.5 3.059 4.959 3.059 7.607 0 6.578-6.508 10.555-10.809 10.555l-29.896.201c-4.119 0-4.371-.252-7.408-3.035-3.035-2.783-8.855-9.615-8.855-9.615v12.65h-13.662V98.883h26.891c4.807 0 10.809 5.234 10.809 11.377 0 6.145-3.652 12.145-7.773 12.145 0 0 1.812 1.822 4.848 1.822 3.037 0 14.727.012 14.727.012.748 0 8.203 1.244 3.217-3.289-5.467-4.971-6.072-9.107-6.254-12.396s2.662-9.881 9.238-9.881h25.57v11.387h-16.393v-.001zm-42.545 5.261h-8.674v-6.832h8.674c3.977 0 4.664 6.832 0 6.832z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
MessageSquare,
|
||||
Bot,
|
||||
Facebook,
|
||||
Calendar,
|
||||
} from "lucide-react"
|
||||
|
||||
import { useUser } from "@/providers/user-provider"
|
||||
@@ -29,6 +30,7 @@ import { FacebookAccountsDialog } from "@/components/settings/facebook-accounts-
|
||||
const navItems = [
|
||||
{ href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ href: "/leads", label: "Leads", icon: Users },
|
||||
{ href: "/calendar", label: "Calendar", icon: Calendar },
|
||||
{ href: "/chats", label: "Chats", icon: MessageSquare },
|
||||
{ href: "/ai-assistant", label: "AI Assistant", icon: Bot, roles: ["sales", "admin", "super_admin"] },
|
||||
{ href: "/users", label: "Users", icon: Building2 },
|
||||
|
||||
@@ -32,6 +32,9 @@ import {
|
||||
CheckCheck,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { CrmIcon } from "./crm-icon";
|
||||
import { CaptainAmericaShield } from "@/components/shared/captain-america-shield";
|
||||
import { useWebsiteTheme } from "@/providers/website-theme-provider";
|
||||
|
||||
interface TopbarProps {
|
||||
onMenuClick: () => void;
|
||||
@@ -40,6 +43,7 @@ interface TopbarProps {
|
||||
export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
const router = useRouter();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { websiteTheme } = useWebsiteTheme();
|
||||
const { user, logout } = useUser();
|
||||
const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } =
|
||||
useNotifications();
|
||||
@@ -70,17 +74,10 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
.toUpperCase();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-white dark:bg-[#141414] px-4 lg:px-6 relative overflow-hidden">
|
||||
{/* Red/Blue diagonal split accent */}
|
||||
<div className="absolute right-0 top-0 bottom-0 w-[6px] bg-gradient-to-b from-[#CC0000] via-[#0033CC] to-[#CC0000] dark:from-[#FF1111] dark:via-[#1144FF] dark:to-[#FF1111]" />
|
||||
|
||||
<header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-card dark:bg-[#141414] px-4 lg:px-6 relative overflow-hidden">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2 mr-2 shrink-0">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="14" cy="14" r="13" fill="#CC0000" />
|
||||
<circle cx="14" cy="14" r="8" fill="#0033CC" />
|
||||
<path d="M14 6 L16 12 L22 12 L17 15 L19 21 L14 17 L9 21 L11 15 L6 12 L12 12 Z" fill="white" />
|
||||
</svg>
|
||||
{websiteTheme === "spidey" ? <CaptainAmericaShield /> : <CrmIcon />}
|
||||
<span className="text-[#CC0000] dark:text-[#FF1111] font-bold text-sm tracking-wide">
|
||||
CRM
|
||||
</span>
|
||||
@@ -116,17 +113,6 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
<Search className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
{/* Report a Bug */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setBugModalOpen(true)}
|
||||
className="text-muted-foreground"
|
||||
title="Report a Bug"
|
||||
>
|
||||
<Bug className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
{/* Theme toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -145,6 +131,17 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Report a Bug */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setBugModalOpen(true)}
|
||||
className="text-muted-foreground"
|
||||
title="Report a Bug"
|
||||
>
|
||||
<Bug className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
{/* Notifications */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
|
||||
@@ -6,8 +6,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Sun, Moon, Monitor, Sparkles, Shield } from "lucide-react"
|
||||
import { useWebsiteTheme } from "@/providers/website-theme-provider"
|
||||
import { Sun, Moon, Monitor, Check } from "lucide-react"
|
||||
|
||||
const COLOR_THEME_KEY = "crm-color-theme"
|
||||
|
||||
@@ -30,6 +30,11 @@ const themeOptions = [
|
||||
{ value: "ruby", label: "Ruby", color: "bg-red-600", ring: "ring-red-600" },
|
||||
]
|
||||
|
||||
const backgroundOptions = [
|
||||
{ value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" },
|
||||
{ value: "starforce", label: "StarForce", icon: Sparkles, color: "bg-red-700", ring: "ring-red-700", desc: "Cosmic dark with starfield & green glow" },
|
||||
]
|
||||
|
||||
function getStoredColorTheme(): string {
|
||||
if (typeof window === "undefined") return "default"
|
||||
return localStorage.getItem(COLOR_THEME_KEY) || "default"
|
||||
@@ -45,14 +50,6 @@ function applyColorTheme(theme: string) {
|
||||
localStorage.setItem(COLOR_THEME_KEY, theme)
|
||||
}
|
||||
|
||||
const websiteThemes = [
|
||||
{
|
||||
id: "spidey",
|
||||
name: "Spidey",
|
||||
description: "Current website theme",
|
||||
},
|
||||
]
|
||||
|
||||
export function ThemeSettings() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { websiteTheme, setWebsiteTheme } = useWebsiteTheme()
|
||||
@@ -132,66 +129,31 @@ export function ThemeSettings() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Website Themes</CardTitle>
|
||||
<CardTitle>Color Theme for Background</CardTitle>
|
||||
<CardDescription>
|
||||
Select your website's visual theme.
|
||||
Choose the website background theme.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
|
||||
{websiteThemes.map((wt) => {
|
||||
const isActive = websiteTheme === wt.id
|
||||
return (
|
||||
<button
|
||||
key={wt.id}
|
||||
type="button"
|
||||
onClick={() => setWebsiteTheme(wt.id)}
|
||||
<RadioGroup value={websiteTheme} onValueChange={setWebsiteTheme} className="grid grid-cols-2 gap-4">
|
||||
{backgroundOptions.map(({ value, label, icon: Icon, color, ring, desc }) => (
|
||||
<div key={value}>
|
||||
<RadioGroupItem value={value} id={`bg-${value}`} className="peer sr-only" />
|
||||
<Label
|
||||
htmlFor={`bg-${value}`}
|
||||
className={cn(
|
||||
"group relative flex flex-col items-start gap-3 rounded-xl border-2 p-4 text-left transition-all",
|
||||
"hover:bg-accent cursor-pointer",
|
||||
isActive
|
||||
? "border-primary bg-primary/5 shadow-sm"
|
||||
: "border-border hover:border-muted-foreground/30"
|
||||
"flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
|
||||
"peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
|
||||
)}
|
||||
>
|
||||
{isActive && (
|
||||
<span className="absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
|
||||
<Check className="h-3 w-3" />
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-lg border border-border bg-background">
|
||||
<div className="flex h-full w-full">
|
||||
<div className="flex w-1/3 flex-col gap-0.5 bg-[#0a0a0f] p-1.5">
|
||||
<div className="h-1 w-full rounded-sm bg-[#1a1a24]" />
|
||||
<div className="h-1 w-2/3 rounded-sm bg-[#1a1a24]" />
|
||||
<div className="mt-auto h-1.5 w-full rounded-sm bg-[#1a1a24]" />
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col">
|
||||
<div className="flex h-5 items-center gap-1 bg-[#CC0000] px-1.5">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-white/30" />
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-white/30" />
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-white/30" />
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center bg-[#141414]">
|
||||
<div className="h-2 w-2 rounded-full bg-[#CC0000]/40" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full items-center justify-between gap-2">
|
||||
<span className="text-sm font-medium">{wt.name}</span>
|
||||
{isActive && (
|
||||
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">
|
||||
Current
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<Icon className="h-6 w-6" />
|
||||
<div className={cn("h-8 w-8 rounded-full", color, ring, "ring-2 ring-offset-2 ring-offset-background")} />
|
||||
<span className="text-sm font-medium">{label}</span>
|
||||
<span className="text-xs text-muted-foreground">{desc}</span>
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
export function CaptainAmericaShield() {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 100 100"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="shield-clip">
|
||||
<polygon points="50,95 5,60 5,30 50,5 95,30 95,60" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#shield-clip)">
|
||||
<circle cx="50" cy="45" r="45" fill="#c62828" />
|
||||
<circle cx="50" cy="45" r="35" fill="#efefef" />
|
||||
<circle cx="50" cy="45" r="25" fill="#c62828" />
|
||||
<circle cx="50" cy="45" r="15" fill="#1565c0" />
|
||||
<polygon points="50,32 56,47 72,48 60,58 64,75 50,64 36,75 40,58 28,48 44,47" fill="#efefef" />
|
||||
</g>
|
||||
<polygon
|
||||
points="50,95 5,60 5,30 50,5 95,30 95,60"
|
||||
fill="none"
|
||||
stroke="#c62828"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
+25
-60
@@ -1,76 +1,41 @@
|
||||
import http from "http"
|
||||
|
||||
const AI_SERVICE = process.env.AI_SERVICE_URL || "http://localhost:3001"
|
||||
|
||||
function parseUrl(url: string) {
|
||||
const u = new URL(url)
|
||||
return { hostname: u.hostname, port: parseInt(u.port) || 80, path: u.pathname + u.search }
|
||||
}
|
||||
|
||||
export async function chatWithAI(message: string, jwtToken: string) {
|
||||
const body = JSON.stringify({ message })
|
||||
const { hostname, port, path } = parseUrl(`${AI_SERVICE}/ai/chat`)
|
||||
|
||||
const text = await new Promise<string>((resolve, reject) => {
|
||||
const req = http.request(
|
||||
{ hostname, port, path, method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${jwtToken}`, "Content-Length": Buffer.byteLength(body) } },
|
||||
(res) => {
|
||||
let data = ""
|
||||
res.on("data", (chunk) => data += chunk)
|
||||
res.on("end", () => {
|
||||
if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {
|
||||
resolve(data)
|
||||
} else {
|
||||
reject(new Error(`AI error ${res.statusCode}: ${data.substring(0, 200)}`))
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
req.on("error", reject)
|
||||
req.write(body)
|
||||
req.end()
|
||||
const res = await fetch(`${AI_SERVICE}/ai/chat`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${jwtToken}` },
|
||||
body: JSON.stringify({ message }),
|
||||
})
|
||||
|
||||
const data = JSON.parse(text)
|
||||
if (!res.ok) {
|
||||
const text = await res.text()
|
||||
throw new Error(`AI service error (${res.status}): ${text}`)
|
||||
}
|
||||
|
||||
const data = await res.json()
|
||||
return data.response || ""
|
||||
}
|
||||
|
||||
export async function checkAiServiceStatus() {
|
||||
const { hostname, port, path } = parseUrl(`${AI_SERVICE}/health`)
|
||||
try {
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
const req = http.get({ hostname, port, path, timeout: 3000 }, (res) => {
|
||||
let data = ""
|
||||
res.on("data", (chunk) => data += chunk)
|
||||
res.on("end", () => {
|
||||
try { resolve(JSON.parse(data).status === "ok" ? undefined : reject(new Error("not ok"))) } catch { reject(new Error("bad response")) }
|
||||
})
|
||||
})
|
||||
req.on("error", reject)
|
||||
req.on("timeout", () => { req.destroy(); reject(new Error("timeout")) })
|
||||
})
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchJobs() {
|
||||
const { hostname, port, path } = parseUrl(`${AI_SERVICE}/ai/jobs`)
|
||||
try {
|
||||
const text = await new Promise<string>((resolve, reject) => {
|
||||
const req = http.get({ hostname, port, path, timeout: 5000 }, (res) => {
|
||||
let data = ""
|
||||
res.on("data", (chunk) => data += chunk)
|
||||
res.on("end", () => resolve(data))
|
||||
})
|
||||
req.on("error", reject)
|
||||
req.on("timeout", () => { req.destroy(); reject(new Error("timeout")) })
|
||||
})
|
||||
const data = JSON.parse(text)
|
||||
const res = await fetch(`${AI_SERVICE}/ai/jobs`)
|
||||
if (!res.ok) return []
|
||||
const data = await res.json()
|
||||
return data.jobs || []
|
||||
} catch {
|
||||
console.warn("Failed to fetch AI jobs")
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export async function checkAiServiceStatus() {
|
||||
try {
|
||||
const res = await fetch(`${AI_SERVICE}/health`)
|
||||
if (!res.ok) return false
|
||||
const data = await res.json()
|
||||
return data.status === "ok"
|
||||
} catch {
|
||||
console.warn("Failed to check AI service status")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
+2
-24
@@ -17,7 +17,6 @@ export interface SessionUser {
|
||||
id: string;
|
||||
username: string;
|
||||
email: string;
|
||||
phone: string | null;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
role: string;
|
||||
@@ -86,7 +85,7 @@ export async function getUserByUsername(username: string) {
|
||||
|
||||
export async function getUserById(id: string) {
|
||||
const result = await query(
|
||||
` SELECT u.id, u.username, u.email, u.phone, u.first_name, u.last_name,
|
||||
` SELECT u.id, u.username, u.email, u.first_name, u.last_name,
|
||||
u.is_active, u.avatar_url,
|
||||
r.name AS role_name
|
||||
FROM users u
|
||||
@@ -186,7 +185,6 @@ export function mapDbUserToSessionUser(
|
||||
id: dbUser.id as string,
|
||||
username: dbUser.username as string,
|
||||
email: dbUser.email as string,
|
||||
phone: (dbUser.phone as string) || null,
|
||||
firstName: dbUser.first_name as string,
|
||||
lastName: dbUser.last_name as string,
|
||||
role: roleMapping[roleName] || roleName.toLowerCase(),
|
||||
@@ -194,27 +192,6 @@ export function mapDbUserToSessionUser(
|
||||
};
|
||||
}
|
||||
|
||||
export async function encryptPassword(password: string): Promise<string> {
|
||||
const result = await query("SELECT encrypt_password($1) AS encrypted", [password]);
|
||||
return result.rows[0]?.encrypted;
|
||||
}
|
||||
|
||||
export async function decryptPassword(encrypted: string): Promise<string | null> {
|
||||
try {
|
||||
const result = await query("SELECT decrypt_password($1) AS decrypted", [encrypted]);
|
||||
return result.rows[0]?.decrypted || null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function setSessionContext(userId: string, ip?: string) {
|
||||
await query("SELECT set_config('app.current_user_id', $1, true)", [userId]);
|
||||
if (ip) {
|
||||
await query("SELECT set_config('app.current_ip', $1, true)", [ip]);
|
||||
}
|
||||
}
|
||||
|
||||
export async function createSession(userId: string, role: string) {
|
||||
const token = await signToken({ userId, role });
|
||||
|
||||
@@ -224,6 +201,7 @@ export async function createSession(userId: string, role: string) {
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "strict",
|
||||
path: "/",
|
||||
maxAge: 60 * 60 * 24, // 24 hours
|
||||
});
|
||||
|
||||
return token;
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
export const BLOCKED_CODE_EXTENSIONS = new Set([
|
||||
"py", "pyc", "pyo", "pyw", "pyx", "ipynb",
|
||||
"js", "mjs", "cjs", "jsx", "ts", "tsx",
|
||||
"php", "phtml", "php3", "php4", "php5",
|
||||
"rb", "erb",
|
||||
"pl", "pm",
|
||||
"lua",
|
||||
"sh", "bash", "zsh", "ksh", "fish",
|
||||
"ps1", "psm1", "psd1",
|
||||
"bat", "cmd",
|
||||
"vbs",
|
||||
"applescript",
|
||||
"ahk",
|
||||
"au3",
|
||||
"tcl",
|
||||
"c", "h", "cpp", "cc", "cxx", "hpp", "hh", "hxx",
|
||||
"cs", "vb",
|
||||
"java", "class", "jar",
|
||||
"go",
|
||||
"rs",
|
||||
"swift",
|
||||
"kt", "kts",
|
||||
"scala",
|
||||
"groovy", "gradle",
|
||||
"d",
|
||||
"nim",
|
||||
"cr",
|
||||
"zig",
|
||||
"v",
|
||||
"vhd", "vhdl",
|
||||
"asm", "s",
|
||||
"f", "f90", "f95", "for",
|
||||
"pas", "pp",
|
||||
"ada", "adb", "ads",
|
||||
"cob", "cbl",
|
||||
"hs", "lhs",
|
||||
"ml", "mli",
|
||||
"fs", "fsx", "fsi",
|
||||
"clj", "cljs", "cljc", "edn",
|
||||
"lisp", "lsp",
|
||||
"scm", "ss",
|
||||
"rkt",
|
||||
"ex", "exs",
|
||||
"erl", "hrl",
|
||||
"jl",
|
||||
"elm",
|
||||
"purs",
|
||||
"re", "rei",
|
||||
"sol",
|
||||
"move",
|
||||
"pro",
|
||||
"m",
|
||||
"html", "htm",
|
||||
"css", "scss", "sass", "less",
|
||||
"vue", "svelte",
|
||||
"json5",
|
||||
"o", "so", "dll", "exe", "dylib",
|
||||
"wasm", "wat", "bin",
|
||||
"out",
|
||||
"deb", "rpm",
|
||||
"app", "apk", "ipa",
|
||||
"sql", "psql",
|
||||
"ino", "pde",
|
||||
"sas", "do",
|
||||
])
|
||||
|
||||
export function getAllExtensions(name: string): string[] {
|
||||
const parts = name.split(".")
|
||||
if (parts.length <= 1) return []
|
||||
return parts.slice(1).map((ext) => ext.toLowerCase())
|
||||
}
|
||||
|
||||
export function hasBlockedCodeExtension(name: string): boolean {
|
||||
const exts = getAllExtensions(name)
|
||||
return exts.some((ext) => BLOCKED_CODE_EXTENSIONS.has(ext))
|
||||
}
|
||||
|
||||
export function filterBlockedFiles<T extends { name: string }>(
|
||||
files: T[],
|
||||
): { allowed: T[]; rejected: T[] } {
|
||||
const allowed: T[] = []
|
||||
const rejected: T[] = []
|
||||
for (const f of files) {
|
||||
if (hasBlockedCodeExtension(f.name)) {
|
||||
rejected.push(f)
|
||||
} else {
|
||||
allowed.push(f)
|
||||
}
|
||||
}
|
||||
return { allowed, rejected }
|
||||
}
|
||||
+4
-1
@@ -16,9 +16,12 @@ pool.on("error", (err) => {
|
||||
console.error("Unexpected database pool error:", err)
|
||||
})
|
||||
|
||||
export async function query(text: string, params?: unknown[]) {
|
||||
export async function query(text: string, params?: unknown[], userId?: string) {
|
||||
const client = await pool.connect()
|
||||
try {
|
||||
if (userId) {
|
||||
await client.query("SELECT set_config('app.current_user_id', $1, true)", [userId])
|
||||
}
|
||||
const result = await client.query(text, params)
|
||||
return result
|
||||
} finally {
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
import nodemailer from "nodemailer"
|
||||
import { query } from "@/lib/db"
|
||||
|
||||
const ADMIN_EMAIL = process.env.ADMIN_EMAIL || ""
|
||||
const SMTP_HOST = process.env.SMTP_HOST || ""
|
||||
const SMTP_PORT = parseInt(process.env.SMTP_PORT || "587", 10)
|
||||
const SMTP_USER = process.env.SMTP_USER || ""
|
||||
const SMTP_PASS = process.env.SMTP_PASS || ""
|
||||
const EMAIL_FROM = process.env.EMAIL_FROM || "noreply@coastit.co.za"
|
||||
|
||||
function createTransporter() {
|
||||
const hasAuth = !!(SMTP_USER && SMTP_PASS)
|
||||
const isLocal = SMTP_HOST === "127.0.0.1" || SMTP_HOST === "localhost"
|
||||
|
||||
const tlsOptions = hasAuth && !isLocal
|
||||
? { rejectUnauthorized: true }
|
||||
: { rejectUnauthorized: false }
|
||||
|
||||
return nodemailer.createTransport({
|
||||
host: SMTP_HOST,
|
||||
port: SMTP_PORT,
|
||||
secure: SMTP_PORT === 465,
|
||||
requireTLS: hasAuth && !isLocal,
|
||||
...(hasAuth ? { auth: { user: SMTP_USER, pass: SMTP_PASS } } : {}),
|
||||
tls: tlsOptions,
|
||||
connectionTimeout: 5000,
|
||||
greetingTimeout: 5000,
|
||||
})
|
||||
}
|
||||
|
||||
function formatDate(iso: string) {
|
||||
return new Date(iso).toLocaleDateString("en-US", {
|
||||
weekday: "long", month: "long", day: "numeric", year: "numeric",
|
||||
})
|
||||
}
|
||||
|
||||
function formatTime(iso: string) {
|
||||
return new Date(iso).toLocaleTimeString("en-US", {
|
||||
hour: "numeric", minute: "2-digit", hour12: true,
|
||||
})
|
||||
}
|
||||
|
||||
function formatDuration(min: number) {
|
||||
if (min < 60) return `${min} minutes`
|
||||
const h = Math.floor(min / 60)
|
||||
const m = min % 60
|
||||
return m > 0 ? `${h}h ${m}m` : `${h} hour${h > 1 ? "s" : ""}`
|
||||
}
|
||||
|
||||
export interface EventConfirmationInput {
|
||||
creatorName: string
|
||||
creatorEmail: string
|
||||
participantName: string | null
|
||||
participantEmail: string | null
|
||||
title: string
|
||||
description?: string
|
||||
eventType: string
|
||||
startTime: string
|
||||
endTime?: string
|
||||
durationMinutes?: number
|
||||
}
|
||||
|
||||
function buildEmail(event: EventConfirmationInput, variant: "scheduled" | "rescheduled" = "scheduled") {
|
||||
const dateStr = formatDate(event.startTime)
|
||||
const timeStr = formatTime(event.startTime)
|
||||
const durStr = event.durationMinutes ? formatDuration(event.durationMinutes) : ""
|
||||
const typeLabel = event.eventType.charAt(0).toUpperCase() + event.eventType.slice(1)
|
||||
const heading = variant === "rescheduled" ? "Event Rescheduled" : "Event Scheduled"
|
||||
const badge = variant === "rescheduled"
|
||||
? '<div style="background:#fef3c7;color:#92400e;font-size:12px;padding:6px 12px;border-radius:6px;margin-bottom:16px;display:inline-block">This event has been rescheduled</div>'
|
||||
: ""
|
||||
|
||||
const html = `<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"></head>
|
||||
<body style="font-family:Arial,Helvetica,sans-serif;background:#f4f4f5;padding:40px 20px">
|
||||
<div style="max-width:520px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08)">
|
||||
<div style="background:linear-gradient(135deg,#CC0000,#0033CC);padding:24px 32px">
|
||||
<h1 style="color:#fff;margin:0;font-size:20px">${heading}</h1>
|
||||
</div>
|
||||
<div style="padding:32px">
|
||||
${badge}
|
||||
<p style="font-size:15px;margin:0 0 16px"><strong>${event.title}</strong></p>
|
||||
<table style="width:100%;font-size:13px;border-collapse:collapse">
|
||||
<tr><td style="padding:6px 0;color:#666;width:90px">Type</td><td style="padding:6px 0">${typeLabel}</td></tr>
|
||||
<tr><td style="padding:6px 0;color:#666">Date</td><td style="padding:6px 0">${dateStr}</td></tr>
|
||||
<tr><td style="padding:6px 0;color:#666">Time</td><td style="padding:6px 0">${timeStr}</td></tr>
|
||||
${durStr ? `<tr><td style="padding:6px 0;color:#666">Duration</td><td style="padding:6px 0">${durStr}</td></tr>` : ""}
|
||||
${event.description ? `<tr><td style="padding:6px 0;color:#666;vertical-align:top">Notes</td><td style="padding:6px 0">${event.description}</td></tr>` : ""}
|
||||
<tr><td style="padding:6px 0;color:#666">Created by</td><td style="padding:6px 0">${event.creatorName}</td></tr>
|
||||
${event.participantName ? `<tr><td style="padding:6px 0;color:#666">With</td><td style="padding:6px 0">${event.participantName}</td></tr>` : ""}
|
||||
</table>
|
||||
<p style="font-size:11px;color:#999;margin-top:24px;padding-top:16px;border-top:1px solid #eee">Automated confirmation from CRM.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>`
|
||||
|
||||
const text = `${variant === "rescheduled" ? "[RESCHEDULED] " : ""}Event: ${event.title}
|
||||
Type: ${typeLabel}
|
||||
Date: ${dateStr}
|
||||
Time: ${timeStr}
|
||||
${durStr ? `Duration: ${durStr}` : ""}
|
||||
${event.description ? `Notes: ${event.description}` : ""}
|
||||
Created by: ${event.creatorName}
|
||||
${event.participantName ? `With: ${event.participantName}` : ""}`
|
||||
|
||||
const prefix = variant === "rescheduled" ? "🔄 Rescheduled: " : ""
|
||||
const subject = `${prefix}${event.title} — ${dateStr}`
|
||||
|
||||
return { html, text, subject, dateStr }
|
||||
}
|
||||
|
||||
export async function sendEventConfirmation(event: EventConfirmationInput) {
|
||||
const { html, text, subject } = buildEmail(event)
|
||||
|
||||
const recipients: string[] = []
|
||||
if (event.creatorEmail) recipients.push(event.creatorEmail)
|
||||
if (event.participantEmail && !recipients.includes(event.participantEmail)) recipients.push(event.participantEmail)
|
||||
if (ADMIN_EMAIL && !recipients.includes(ADMIN_EMAIL)) recipients.push(ADMIN_EMAIL)
|
||||
|
||||
// 1. Always store in database
|
||||
for (const to of recipients) {
|
||||
await query(
|
||||
`INSERT INTO sent_emails (recipient, subject, body_html, body_text)
|
||||
VALUES ($1, $2, $3, $4)`,
|
||||
[to, subject, html, text],
|
||||
).catch(() => {})
|
||||
}
|
||||
|
||||
if (recipients.length === 0) return
|
||||
|
||||
// 2. Send via SMTP if configured
|
||||
if (SMTP_HOST) {
|
||||
const transporter = createTransporter()
|
||||
await transporter.sendMail({
|
||||
from: EMAIL_FROM,
|
||||
to: recipients.join(", "),
|
||||
subject,
|
||||
text,
|
||||
html,
|
||||
}).catch(() => {})
|
||||
return
|
||||
}
|
||||
|
||||
// 3. Fallback: log to console with instructions
|
||||
console.log("=".repeat(60))
|
||||
console.log(`📧 Email ready — ${subject}`)
|
||||
console.log(` To: ${recipients.join(", ")}`)
|
||||
console.log(` Body:\n${text}`)
|
||||
console.log("=".repeat(60))
|
||||
console.log("💡 To send real emails:")
|
||||
console.log(" Fill in SMTP_HOST in .env (maildev works at localhost:1025 with no auth)")
|
||||
console.log(" Or set SMTP_HOST/SMTP_USER/SMTP_PASS for authenticated relays")
|
||||
}
|
||||
|
||||
export async function sendEventRescheduled(event: EventConfirmationInput) {
|
||||
const { html, text, subject } = buildEmail(event, "rescheduled")
|
||||
|
||||
const recipients: string[] = []
|
||||
if (event.creatorEmail) recipients.push(event.creatorEmail)
|
||||
if (event.participantEmail && !recipients.includes(event.participantEmail)) recipients.push(event.participantEmail)
|
||||
if (ADMIN_EMAIL && !recipients.includes(ADMIN_EMAIL)) recipients.push(ADMIN_EMAIL)
|
||||
|
||||
for (const to of recipients) {
|
||||
await query(
|
||||
`INSERT INTO sent_emails (recipient, subject, body_html, body_text)
|
||||
VALUES ($1, $2, $3, $4)`,
|
||||
[to, subject, html, text],
|
||||
).catch(() => {})
|
||||
}
|
||||
|
||||
if (recipients.length === 0) return
|
||||
|
||||
if (SMTP_HOST) {
|
||||
const transporter = createTransporter()
|
||||
await transporter.sendMail({
|
||||
from: EMAIL_FROM,
|
||||
to: recipients.join(", "),
|
||||
subject,
|
||||
text,
|
||||
html,
|
||||
}).catch(() => {})
|
||||
return
|
||||
}
|
||||
|
||||
console.log("=".repeat(60))
|
||||
console.log(`🔄 Reschedule email ready — ${subject}`)
|
||||
console.log(` To: ${recipients.join(", ")}`)
|
||||
console.log(` Body:\n${text}`)
|
||||
console.log("=".repeat(60))
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
export interface IcsEvent {
|
||||
uid: string
|
||||
title: string
|
||||
description?: string
|
||||
location?: string
|
||||
startTime: Date
|
||||
endTime?: Date
|
||||
durationMinutes?: number
|
||||
organizerName?: string
|
||||
organizerEmail?: string
|
||||
attendeeName?: string
|
||||
attendeeEmail?: string
|
||||
}
|
||||
|
||||
function formatIcsDate(d: Date): string {
|
||||
return d.toISOString().replace(/[-:]/g, "").split(".")[0] + "Z"
|
||||
}
|
||||
|
||||
function escapeIcsText(text: string): string {
|
||||
return text
|
||||
.replace(/\\/g, "\\\\")
|
||||
.replace(/;/g, "\\;")
|
||||
.replace(/,/g, "\\,")
|
||||
.replace(/\n/g, "\\n")
|
||||
}
|
||||
|
||||
export function buildIcs(event: IcsEvent): string {
|
||||
const now = formatIcsDate(new Date())
|
||||
const dtStart = formatIcsDate(event.startTime)
|
||||
|
||||
let dtEnd: string
|
||||
if (event.endTime) {
|
||||
dtEnd = formatIcsDate(event.endTime)
|
||||
} else if (event.durationMinutes) {
|
||||
const end = new Date(event.startTime.getTime() + event.durationMinutes * 60000)
|
||||
dtEnd = formatIcsDate(end)
|
||||
} else {
|
||||
const end = new Date(event.startTime.getTime() + 60 * 60000)
|
||||
dtEnd = formatIcsDate(end)
|
||||
}
|
||||
|
||||
const lines: string[] = [
|
||||
"BEGIN:VCALENDAR",
|
||||
"VERSION:2.0",
|
||||
"PRODID:-//CRM//Calendar//EN",
|
||||
"CALSCALE:GREGORIAN",
|
||||
"METHOD:PUBLISH",
|
||||
"BEGIN:VEVENT",
|
||||
`UID:${event.uid}`,
|
||||
`DTSTAMP:${now}`,
|
||||
`DTSTART:${dtStart}`,
|
||||
`DTEND:${dtEnd}`,
|
||||
`SUMMARY:${escapeIcsText(event.title)}`,
|
||||
]
|
||||
|
||||
if (event.description) {
|
||||
lines.push(`DESCRIPTION:${escapeIcsText(event.description)}`)
|
||||
}
|
||||
|
||||
if (event.organizerEmail) {
|
||||
const cn = event.organizerName ? `;CN=${escapeIcsText(event.organizerName)}` : ""
|
||||
lines.push(`ORGANIZER${cn}:mailto:${event.organizerEmail}`)
|
||||
}
|
||||
|
||||
if (event.attendeeEmail) {
|
||||
const cn = event.attendeeName ? `;CN=${escapeIcsText(event.attendeeName)}` : ""
|
||||
lines.push(`ATTENDEE${cn};ROLE=REQ-PARTICIPANT;PARTSTAT=NEEDS-ACTION:mailto:${event.attendeeEmail}`)
|
||||
}
|
||||
|
||||
lines.push("STATUS:CONFIRMED")
|
||||
lines.push("BEGIN:VALARM")
|
||||
lines.push("TRIGGER:-PT15M")
|
||||
lines.push("ACTION:DISPLAY")
|
||||
lines.push(`DESCRIPTION:Reminder: ${escapeIcsText(event.title)}`)
|
||||
lines.push("END:VALARM")
|
||||
lines.push("END:VEVENT")
|
||||
lines.push("END:VCALENDAR")
|
||||
|
||||
return lines.join("\r\n")
|
||||
}
|
||||
@@ -10,7 +10,6 @@ const JWT_SECRET = new TextEncoder().encode(RAW_SECRET)
|
||||
|
||||
const publicRoutes = [
|
||||
"/login",
|
||||
"/join",
|
||||
"/api/auth/login",
|
||||
"/api/auth/logout",
|
||||
"/_next/static",
|
||||
|
||||
@@ -30,7 +30,6 @@ export function UserProvider({ children }: { children: ReactNode }) {
|
||||
id: u.id,
|
||||
name: `${u.firstName} ${u.lastName}`,
|
||||
email: u.email,
|
||||
phone: u.phone || "",
|
||||
role: u.role,
|
||||
active: true,
|
||||
avatar: u.avatar,
|
||||
|
||||
@@ -5,7 +5,8 @@ import { createContext, useContext, useState, useEffect, ReactNode, useCallback
|
||||
const WEBSITE_THEME_KEY = "crm-website-theme"
|
||||
|
||||
const themeClasses: Record<string, string> = {
|
||||
spidey: "",
|
||||
spidey: "theme-spidey",
|
||||
starforce: "theme-starforce",
|
||||
}
|
||||
|
||||
interface WebsiteThemeContextValue {
|
||||
@@ -38,7 +39,7 @@ function storeTheme(theme: string) {
|
||||
}
|
||||
|
||||
export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [websiteTheme, setWebsiteThemeState] = useState<string>("spidey")
|
||||
const [websiteTheme, setWebsiteThemeState] = useState<string>("starforce")
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -52,13 +53,13 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
|
||||
fetch("/api/settings/website-theme")
|
||||
.then((res) => (res.ok ? res.json() : null))
|
||||
.then((data) => {
|
||||
const theme = data?.websiteTheme || "spidey"
|
||||
const theme = data?.websiteTheme || "starforce"
|
||||
setWebsiteThemeState(theme)
|
||||
storeTheme(theme)
|
||||
applyWebsiteTheme(theme)
|
||||
})
|
||||
.catch(() => {
|
||||
applyWebsiteTheme("spidey")
|
||||
applyWebsiteTheme("starforce")
|
||||
})
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
+26
-3
@@ -4,13 +4,12 @@ export type LeadStatus =
|
||||
| "pending"
|
||||
| "closed"
|
||||
| "ignored";
|
||||
export type UserRole = "super_admin" | "admin" | "sales" | "dev";
|
||||
export type UserRole = "super_admin" | "admin" | "sales";
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone?: string;
|
||||
role: UserRole;
|
||||
active: boolean;
|
||||
avatar: string;
|
||||
@@ -78,7 +77,8 @@ export type NotificationType =
|
||||
| "lead_status_changed"
|
||||
| "lead_assigned"
|
||||
| "chat_message"
|
||||
| "note_added";
|
||||
| "note_added"
|
||||
| "event_scheduled";
|
||||
|
||||
export interface Notification {
|
||||
id: string;
|
||||
@@ -108,3 +108,26 @@ export interface Conversation {
|
||||
unread: number;
|
||||
messages: ChatMessage[];
|
||||
}
|
||||
|
||||
export type EventType = "meeting" | "call" | "chat" | "follow_up" | "demo" | "other";
|
||||
export type EventStatus = "scheduled" | "completed" | "cancelled" | "rescheduled";
|
||||
|
||||
export interface CalendarEvent {
|
||||
id: string;
|
||||
userId: string;
|
||||
participantId: string | null;
|
||||
leadId: string | null;
|
||||
conversationId: string | null;
|
||||
title: string;
|
||||
description: string | null;
|
||||
participantNotes: string | null;
|
||||
eventType: EventType;
|
||||
startTime: string;
|
||||
endTime: string | null;
|
||||
durationMinutes: number | null;
|
||||
status: EventStatus;
|
||||
creator: { id: string; name: string; email?: string; role?: string; avatar?: string } | null;
|
||||
participant: { id: string; name: string; email?: string; role?: string; avatar?: string } | null;
|
||||
lead: { id: string; companyName: string; contactName: string } | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user