mirror of
https://github.com/MODSetter/SurfSense.git
synced 2025-09-01 18:19:08 +00:00
404 lines
13 KiB
TypeScript
404 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { motion, type Variants } from "framer-motion";
|
|
import { AlertCircle, Loader2, Plus, Search, Trash2 } from "lucide-react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Logo } from "@/components/Logo";
|
|
import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
|
|
import { UserDropdown } from "@/components/UserDropdown";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Spotlight } from "@/components/ui/spotlight";
|
|
import { Tilt } from "@/components/ui/tilt";
|
|
import { useSearchSpaces } from "@/hooks/use-search-spaces";
|
|
import { apiClient } from "@/lib/api";
|
|
|
|
interface User {
|
|
id: string;
|
|
email: string;
|
|
is_active: boolean;
|
|
is_superuser: boolean;
|
|
is_verified: boolean;
|
|
}
|
|
|
|
/**
|
|
* Formats a date string into a readable format
|
|
* @param dateString - The date string to format
|
|
* @returns Formatted date string (e.g., "Jan 1, 2023")
|
|
*/
|
|
const formatDate = (dateString: string): string => {
|
|
return new Date(dateString).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Loading screen component with animation
|
|
*/
|
|
const LoadingScreen = () => {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[60vh] space-y-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<Card className="w-[350px] bg-background/60 backdrop-blur-sm">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-xl font-medium">Loading</CardTitle>
|
|
<CardDescription>Fetching your search spaces...</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex justify-center py-6">
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
|
|
>
|
|
<Loader2 className="h-12 w-12 text-primary" />
|
|
</motion.div>
|
|
</CardContent>
|
|
<CardFooter className="border-t pt-4 text-sm text-muted-foreground">
|
|
This may take a moment
|
|
</CardFooter>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Error screen component with animation
|
|
*/
|
|
const ErrorScreen = ({ message }: { message: string }) => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[60vh] space-y-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<Card className="w-[400px] bg-background/60 backdrop-blur-sm border-destructive/20">
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center gap-2">
|
|
<AlertCircle className="h-5 w-5 text-destructive" />
|
|
<CardTitle className="text-xl font-medium">Error</CardTitle>
|
|
</div>
|
|
<CardDescription>Something went wrong</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Alert variant="destructive" className="bg-destructive/10 border-destructive/30">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertTitle>Error Details</AlertTitle>
|
|
<AlertDescription className="mt-2">{message}</AlertDescription>
|
|
</Alert>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-end gap-2 border-t pt-4">
|
|
<Button variant="outline" onClick={() => router.refresh()}>
|
|
Try Again
|
|
</Button>
|
|
<Button onClick={() => router.push("/")}>Go Home</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DashboardPage = () => {
|
|
// Animation variants
|
|
const containerVariants: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants: Variants = {
|
|
hidden: { y: 20, opacity: 0 },
|
|
visible: {
|
|
y: 0,
|
|
opacity: 1,
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 300,
|
|
damping: 24,
|
|
},
|
|
},
|
|
};
|
|
|
|
const { searchSpaces, loading, error, refreshSearchSpaces } = useSearchSpaces();
|
|
|
|
// User state management
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [isLoadingUser, setIsLoadingUser] = useState(true);
|
|
const [userError, setUserError] = useState<string | null>(null);
|
|
|
|
// Fetch user details
|
|
useEffect(() => {
|
|
const fetchUser = async () => {
|
|
try {
|
|
if (typeof window === "undefined") return;
|
|
|
|
try {
|
|
const userData = await apiClient.get<User>("users/me");
|
|
setUser(userData);
|
|
setUserError(null);
|
|
} catch (error) {
|
|
console.error("Error fetching user:", error);
|
|
setUserError(error instanceof Error ? error.message : "Unknown error occurred");
|
|
} finally {
|
|
setIsLoadingUser(false);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error in fetchUser:", error);
|
|
setIsLoadingUser(false);
|
|
}
|
|
};
|
|
|
|
fetchUser();
|
|
}, []);
|
|
|
|
// Create user object for UserDropdown
|
|
const customUser = {
|
|
name: user?.email ? user.email.split("@")[0] : "User",
|
|
email:
|
|
user?.email ||
|
|
(isLoadingUser ? "Loading..." : userError ? "Error loading user" : "Unknown User"),
|
|
avatar: "/icon-128.png", // Default avatar
|
|
};
|
|
|
|
if (loading) return <LoadingScreen />;
|
|
if (error) return <ErrorScreen message={error} />;
|
|
|
|
const handleDeleteSearchSpace = async (id: number) => {
|
|
// Send DELETE request to the API
|
|
try {
|
|
const response = await fetch(
|
|
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/searchspaces/${id}`,
|
|
{
|
|
method: "DELETE",
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
|
|
},
|
|
}
|
|
);
|
|
|
|
if (!response.ok) {
|
|
toast.error("Failed to delete search space");
|
|
throw new Error("Failed to delete search space");
|
|
}
|
|
|
|
// Refresh the search spaces list after successful deletion
|
|
refreshSearchSpaces();
|
|
} catch (error) {
|
|
console.error("Error deleting search space:", error);
|
|
toast.error("An error occurred while deleting the search space");
|
|
return;
|
|
}
|
|
toast.success("Search space deleted successfully");
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
className="container mx-auto py-10"
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={containerVariants}
|
|
>
|
|
<motion.div className="flex flex-col space-y-6" variants={itemVariants}>
|
|
<div className="flex flex-row space-x-4 justify-between">
|
|
<div className="flex flex-row space-x-4">
|
|
<Logo className="w-10 h-10 rounded-md" />
|
|
<div className="flex flex-col space-y-2">
|
|
<h1 className="text-4xl font-bold">SurfSense Dashboard</h1>
|
|
<p className="text-muted-foreground">Welcome to your SurfSense dashboard.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<UserDropdown user={customUser} />
|
|
<ThemeTogglerComponent />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-6 mt-6">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-2xl font-semibold">Your Search Spaces</h2>
|
|
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
|
|
<Link href="/dashboard/searchspaces">
|
|
<Button className="h-10">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Create Search Space
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{searchSpaces &&
|
|
searchSpaces.length > 0 &&
|
|
searchSpaces.map((space) => (
|
|
<motion.div key={space.id} variants={itemVariants} className="aspect-[4/3]">
|
|
<Tilt
|
|
rotationFactor={6}
|
|
isRevese
|
|
springOptions={{
|
|
stiffness: 26.7,
|
|
damping: 4.1,
|
|
mass: 0.2,
|
|
}}
|
|
className="group relative rounded-lg h-full"
|
|
>
|
|
<Spotlight
|
|
className="z-10 from-blue-500/20 via-blue-300/10 to-blue-200/5 blur-2xl"
|
|
size={248}
|
|
springOptions={{
|
|
stiffness: 26.7,
|
|
damping: 4.1,
|
|
mass: 0.2,
|
|
}}
|
|
/>
|
|
<div className="flex flex-col h-full overflow-hidden rounded-xl border bg-muted/30 backdrop-blur-sm transition-all hover:border-primary/50">
|
|
<div className="relative h-32 w-full overflow-hidden">
|
|
<Link href={`/dashboard/${space.id}/documents`} key={space.id}>
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
|
|
alt={space.name}
|
|
className="h-full w-full object-cover grayscale duration-700 group-hover:grayscale-0"
|
|
width={248}
|
|
height={248}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
|
|
</Link>
|
|
<div className="absolute top-2 right-2">
|
|
<div>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 rounded-full bg-background/50 backdrop-blur-sm hover:bg-destructive/90 cursor-pointer"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete Search Space</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to delete "{space.name}"? This
|
|
action cannot be undone. All documents, chats, and podcasts in
|
|
this search space will be permanently deleted.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => handleDeleteSearchSpace(space.id)}
|
|
className="bg-destructive hover:bg-destructive/90"
|
|
>
|
|
Delete
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link href={`/dashboard/${space.id}/documents`} key={space.id}>
|
|
<div className="flex flex-1 flex-col justify-between p-4">
|
|
<div>
|
|
<h3 className="font-medium text-lg">{space.name}</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{space.description}
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 flex justify-between text-xs text-muted-foreground">
|
|
{/* <span>{space.title}</span> */}
|
|
<span>Created {formatDate(space.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</Tilt>
|
|
</motion.div>
|
|
))}
|
|
|
|
{searchSpaces.length === 0 && (
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="col-span-full flex flex-col items-center justify-center p-12 text-center"
|
|
>
|
|
<div className="rounded-full bg-muted/50 p-4 mb-4">
|
|
<Search className="h-8 w-8 text-muted-foreground" />
|
|
</div>
|
|
<h3 className="text-lg font-medium mb-2">No search spaces found</h3>
|
|
<p className="text-muted-foreground mb-6">
|
|
Create your first search space to get started
|
|
</p>
|
|
<Link href="/dashboard/searchspaces">
|
|
<Button>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Create Search Space
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
|
|
{searchSpaces.length > 0 && (
|
|
<motion.div variants={itemVariants} className="aspect-[4/3]">
|
|
<Tilt
|
|
rotationFactor={6}
|
|
isRevese
|
|
springOptions={{
|
|
stiffness: 26.7,
|
|
damping: 4.1,
|
|
mass: 0.2,
|
|
}}
|
|
className="group relative rounded-lg h-full"
|
|
>
|
|
<Link href="/dashboard/searchspaces" className="flex h-full">
|
|
<div className="flex flex-col items-center justify-center h-full w-full rounded-xl border border-dashed bg-muted/10 hover:border-primary/50 transition-colors">
|
|
<Plus className="h-10 w-10 mb-3 text-muted-foreground" />
|
|
<span className="text-sm font-medium">Add New Search Space</span>
|
|
</div>
|
|
</Link>
|
|
</Tilt>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default DashboardPage;
|