174 lines
7.6 KiB
TypeScript
174 lines
7.6 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useAuthStore } from '../store/authStore';
|
|
import { useNavigate, Link } from 'react-router-dom';
|
|
import { LogOut, Plus, Folder, Loader2, Trash2, Settings, Sparkles } from 'lucide-react';
|
|
import { DashboardSettings } from '../components/DashboardSettings';
|
|
import { api } from '../lib/api';
|
|
|
|
interface Project {
|
|
id: string;
|
|
name: string;
|
|
created_at: string;
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const { user, profile, signOut } = useAuthStore();
|
|
const navigate = useNavigate();
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchProjects = async () => {
|
|
if (!user) return;
|
|
try {
|
|
const data = await api.getProjects();
|
|
setProjects(data.projects || []);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
fetchProjects();
|
|
}, [user]);
|
|
|
|
const handleDeleteProject = async (e: React.MouseEvent, id: string) => {
|
|
e.stopPropagation(); // prevent navigating to editor
|
|
if (!confirm('Are you sure you want to delete this project?')) return;
|
|
try {
|
|
await api.deleteProject(id);
|
|
setProjects(projects.filter(p => p.id !== id));
|
|
} catch (err) {
|
|
console.error('Error deleting project:', err);
|
|
alert('Failed to delete project');
|
|
}
|
|
};
|
|
|
|
const handleNewProject = async () => {
|
|
const name = prompt('Enter a name for the new project:');
|
|
if (!name || name.trim() === '') return;
|
|
|
|
try {
|
|
const res = await api.saveProject({
|
|
name: name.trim(),
|
|
scene_data: {}
|
|
});
|
|
if (res.id) {
|
|
navigate(`/editor/${res.id}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to create project', err);
|
|
alert('Failed to create project');
|
|
}
|
|
};
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut();
|
|
navigate('/');
|
|
};
|
|
|
|
const createNewProject = () => {
|
|
navigate('/editor/new');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-zinc-950 text-white flex flex-col">
|
|
<header className="h-16 border-b border-zinc-800 bg-zinc-900 flex items-center justify-between px-8">
|
|
<div className="font-bold text-lg tracking-tight">Titan<span className="text-primary">3d</span> / Dashboard</div>
|
|
<div className="flex items-center gap-4">
|
|
{profile?.role === 'admin' && (
|
|
<Link to="/admin" className="text-sm text-primary hover:underline font-medium">Admin Panel</Link>
|
|
)}
|
|
<div className="text-sm text-zinc-400">{user?.email}</div>
|
|
<button
|
|
onClick={() => setIsSettingsOpen(true)}
|
|
className="p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors"
|
|
title="Global Settings"
|
|
>
|
|
<Settings size={18} />
|
|
</button>
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="p-2 text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors"
|
|
title="Sign Out"
|
|
>
|
|
<LogOut size={18} />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 p-8 max-w-6xl mx-auto w-full">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
|
|
<h3 className="text-zinc-400 text-sm font-medium mb-2">AI Credits</h3>
|
|
<div className="text-3xl font-bold text-white">{profile?.api_credits ?? 0}</div>
|
|
</div>
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
|
|
<h3 className="text-zinc-400 text-sm font-medium mb-2">Storage Usage</h3>
|
|
<div className="text-3xl font-bold text-white">0 / {profile?.storage_limit_mb ?? 100} MB</div>
|
|
</div>
|
|
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6">
|
|
<h3 className="text-zinc-400 text-sm font-medium mb-2">Total Projects</h3>
|
|
<div className="text-3xl font-bold text-white">{projects.length}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold">Your Projects</h2>
|
|
<button
|
|
onClick={handleNewProject}
|
|
className="flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-xl transition-colors font-medium text-sm"
|
|
>
|
|
<Plus size={16} /> New Project
|
|
</button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center p-12">
|
|
<Loader2 size={32} className="animate-spin text-zinc-500" />
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
<div className="aspect-video bg-zinc-900 border border-zinc-800 border-dashed rounded-2xl flex flex-col items-center justify-center text-zinc-500 hover:text-white hover:border-zinc-700 transition-colors cursor-pointer group" onClick={createNewProject}>
|
|
<div className="w-10 h-10 rounded-full bg-zinc-800 group-hover:bg-zinc-700 flex items-center justify-center mb-2 transition-colors">
|
|
<Plus size={20} />
|
|
</div>
|
|
<span className="text-sm font-medium">Create Blank Scene</span>
|
|
</div>
|
|
|
|
<div className="aspect-video bg-gradient-to-br from-amber-500/20 to-purple-500/20 border border-zinc-800 border-dashed rounded-2xl flex flex-col items-center justify-center text-zinc-400 hover:text-white hover:border-amber-500/50 transition-colors cursor-pointer group" onClick={() => navigate('/spark-plug')}>
|
|
<div className="w-10 h-10 rounded-full bg-zinc-800 group-hover:bg-amber-500/20 flex items-center justify-center mb-2 transition-colors text-amber-500">
|
|
<Sparkles size={20} />
|
|
</div>
|
|
<span className="text-sm font-medium text-amber-500/80 group-hover:text-amber-400 transition-colors">Spark Plug (PDF to 3D)</span>
|
|
</div>
|
|
|
|
{projects.map(project => (
|
|
<div key={project.id} onClick={() => navigate(`/editor/${project.id}`)} className="aspect-video bg-zinc-900 border border-zinc-800 rounded-2xl p-4 flex flex-col cursor-pointer hover:border-zinc-700 transition-colors group relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<Folder size={48} className="text-zinc-800 group-hover:text-zinc-700 transition-colors" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-white truncate">{project.name}</h3>
|
|
<p className="text-xs text-zinc-500 mt-1">{new Date(project.created_at).toLocaleDateString()}</p>
|
|
</div>
|
|
<button
|
|
onClick={(e) => handleDeleteProject(e, project.id)}
|
|
className="absolute top-4 right-4 p-2 text-zinc-500 hover:text-red-500 bg-zinc-900/80 rounded-lg opacity-0 group-hover:opacity-100 transition-all hover:bg-zinc-800"
|
|
title="Delete Project"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
<DashboardSettings isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
|
|
</div>
|
|
);
|
|
}
|