Deploy to production

2026-07-30 12:49:29 +05:30
parent 0d9c9eaadd
commit 07a1e8f37f
30 changed files with 6363 additions and 4887 deletions
@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+import { useAuthStore } from '../store/authStore';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, ShieldAlert, Loader2, Save } from 'lucide-react';
+import { api } from '../lib/api';
+
+interface UserProfile {
+  id: string;
+  role: string;
+  api_credits: number;
+  storage_limit_mb: number;
+  is_active: number;
+}
+
+export default function Admin() {
+  const navigate = useNavigate();
+  const { profile } = useAuthStore();
+  const [users, setUsers] = useState<UserProfile[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      if (profile?.role !== 'admin') return;
+      try {
+        const data = await api.getUsers();
+        setUsers(data.users || []);
+      } catch (error) {
+        console.error(error);
+      }
+      setLoading(false);
+    };
+    
+    fetchUsers();
+  }, [profile]);
+
+  const updateLimits = async (userObj: UserProfile) => {
+    try {
+      await api.updateUser(userObj.id, { 
+        role: userObj.role, 
+        api_credits: userObj.api_credits, 
+        storage_limit_mb: userObj.storage_limit_mb,
+        is_active: userObj.is_active
+      });
+      alert("Updated successfully!");
+    } catch (error: any) {
+      alert("Failed to update user: " + error.message);
+    }
+  };
+
+  if (profile?.role !== 'admin') {
+    return (
+      <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center text-white">
+        <ShieldAlert size={48} className="text-red-500 mb-4" />
+        <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
+        <p className="text-zinc-400 mb-6">You do not have administrative privileges.</p>
+        <button onClick={() => navigate('/dashboard')} className="px-6 py-2 bg-zinc-800 rounded-lg hover:bg-zinc-700">
+          Return to Dashboard
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white p-8">
+      <div className="max-w-6xl mx-auto">
+        <button 
+          onClick={() => navigate('/dashboard')}
+          className="flex items-center gap-2 text-zinc-400 hover:text-white mb-8 transition-colors"
+        >
+          <ArrowLeft size={16} /> Back to Dashboard
+        </button>
+        
+        <h1 className="text-3xl font-bold mb-8">Admin Control Panel</h1>
+        
+        <div className="bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden">
+           <div className="p-6 border-b border-zinc-800 flex justify-between items-center">
+             <h2 className="text-xl font-semibold">User Limit Management</h2>
+           </div>
+           
+           {loading ? (
+             <div className="p-12 flex justify-center"><Loader2 className="animate-spin" /></div>
+           ) : (
+             <div className="overflow-x-auto">
+               <table className="w-full text-left text-sm">
+                 <thead className="bg-zinc-950 text-zinc-400">
+                   <tr>
+                     <th className="p-4 font-medium">User ID</th>
+                     <th className="p-4 font-medium">Role</th>
+                     <th className="p-4 font-medium">Status</th>
+                     <th className="p-4 font-medium">API Credits</th>
+                     <th className="p-4 font-medium">Storage Limit (MB)</th>
+                     <th className="p-4 font-medium text-right">Actions</th>
+                   </tr>
+                 </thead>
+                 <tbody className="divide-y divide-zinc-800">
+                   {users.map(u => (
+                     <UserRow key={u.id} user={u} onUpdate={updateLimits} />
+                   ))}
+                 </tbody>
+               </table>
+             </div>
+           )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const UserRow = ({ user, onUpdate }: { user: UserProfile, onUpdate: (u: UserProfile) => void }) => {
+  const [role, setRole] = useState(user.role);
+  const [isActive, setIsActive] = useState(user.is_active);
+  const [credits, setCredits] = useState(user.api_credits);
+  const [storage, setStorage] = useState(user.storage_limit_mb);
+
+  const handleUpdate = () => {
+    onUpdate({
+      ...user,
+      role,
+      is_active: isActive,
+      api_credits: credits,
+      storage_limit_mb: storage
+    });
+  };
+
+  return (
+    <tr className="hover:bg-zinc-800/50">
+      <td className="p-4 font-mono text-xs">{user.id}</td>
+      <td className="p-4">
+        <select 
+          value={role} 
+          onChange={(e) => setRole(e.target.value)}
+          className={`px-2 py-1 rounded text-xs focus:outline-none focus:border-primary border border-transparent ${role === 'admin' ? 'bg-red-500/20 text-red-400' : 'bg-blue-500/20 text-blue-400'}`}
+        >
+          <option value="user" className="bg-zinc-900 text-white">User</option>
+          <option value="admin" className="bg-zinc-900 text-white">Admin</option>
+        </select>
+      </td>
+      <td className="p-4">
+        <select 
+          value={isActive} 
+          onChange={(e) => setIsActive(Number(e.target.value))}
+          className={`px-2 py-1 rounded text-xs focus:outline-none focus:border-primary border border-transparent ${isActive === 1 ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}`}
+        >
+          <option value={1} className="bg-zinc-900 text-white">Active</option>
+          <option value={0} className="bg-zinc-900 text-white">Pending</option>
+        </select>
+      </td>
+      <td className="p-4">
+        <input 
+          type="number" 
+          value={credits} 
+          onChange={e => setCredits(Number(e.target.value))}
+          className="w-24 bg-zinc-950 border border-zinc-700 rounded px-2 py-1 text-white focus:outline-none focus:border-primary"
+        />
+      </td>
+      <td className="p-4">
+        <input 
+          type="number" 
+          value={storage} 
+          onChange={e => setStorage(Number(e.target.value))}
+          className="w-24 bg-zinc-950 border border-zinc-700 rounded px-2 py-1 text-white focus:outline-none focus:border-primary"
+        />
+      </td>
+      <td className="p-4 text-right">
+        <button 
+          onClick={handleUpdate}
+          className="bg-zinc-800 hover:bg-zinc-700 text-white px-3 py-1.5 rounded flex items-center justify-center gap-2 ml-auto transition-colors"
+        >
+          <Save size={14} /> Save
+        </button>
+      </td>
+    </tr>
+  );
+}
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { useSearchParams, useNavigate, useLocation, Link } from 'react-router-dom';
+import { api } from '../lib/api';
+import { useAuthStore } from '../store/authStore';
+import { Box, Mail, Lock, Loader2 } from 'lucide-react';
+
+export default function Auth() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { setSession } = useAuthStore();
+  
+  const isRegister = searchParams.get('mode') === 'register';
+  const from = location.state?.from?.pathname || '/dashboard';
+  
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    try {
+      if (isRegister) {
+        const res = await api.register(email, password);
+        if (res.status === 'pending') {
+          setSuccess(res.message || 'Account created successfully! Please contact an admin to activate your account.');
+          setEmail('');
+          setPassword('');
+        } else {
+          setSession(res.token, res.profile);
+          navigate(from, { replace: true });
+        }
+      } else {
+        const { token, profile } = await api.login(email, password);
+        setSession(token, profile);
+        navigate(from, { replace: true });
+      }
+    } catch (err: any) {
+      setError(err.message || 'An error occurred during authentication.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-zinc-950 flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-2xl p-8 shadow-2xl">
+        <div className="flex justify-center mb-8">
+          <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
+            <Box size={24} className="text-primary" />
+          </div>
+        </div>
+        
+        <h2 className="text-2xl font-bold text-white text-center mb-2">
+          {isRegister ? 'Create an Account' : 'Welcome Back'}
+        </h2>
+        <p className="text-zinc-400 text-sm text-center mb-8">
+          {isRegister ? 'Sign up to start building 3D scenes.' : 'Sign in to access your projects.'}
+        </p>
+
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-3 rounded-lg text-sm mb-6 text-center">
+            {error}
+          </div>
+        )}
+        
+        {success && (
+          <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-3 rounded-lg text-sm mb-6 text-center">
+            {success}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <div className="relative">
+            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={18} />
+            <input 
+              type="email" 
+              placeholder="Email address"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full bg-zinc-950 border border-zinc-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-primary transition-colors"
+            />
+          </div>
+          
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={18} />
+            <input 
+              type="password" 
+              placeholder="Password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full bg-zinc-950 border border-zinc-800 rounded-xl py-3 pl-10 pr-4 text-white focus:outline-none focus:border-primary transition-colors"
+            />
+          </div>
+
+          <button 
+            type="submit" 
+            disabled={loading}
+            className="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl mt-2 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading && <Loader2 size={18} className="animate-spin" />}
+            {isRegister ? 'Sign Up' : 'Sign In'}
+          </button>
+        </form>
+
+        <div className="mt-8 text-center text-sm text-zinc-500">
+          {isRegister ? (
+            <p>Already have an account? <Link to="/auth" className="text-primary hover:underline">Sign in</Link></p>
+          ) : (
+            <p>Don't have an account? <Link to="/auth?mode=register" className="text-primary hover:underline">Sign up</Link></p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import { useAuthStore } from '../store/authStore';
+import { useNavigate, Link } from 'react-router-dom';
+import { LogOut, Plus, Folder, Loader2 } from 'lucide-react';
+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);
+
+  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 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={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={createNewProject}
+            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>
+             
+             {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>
+               </div>
+             ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,45 @@
+import { Link } from 'react-router-dom';
+import { useAuthStore } from '../store/authStore';
+import { Box } from 'lucide-react';
+
+export default function Home() {
+  const { user } = useAuthStore();
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white flex flex-col items-center justify-center p-4">
+      <div className="w-16 h-16 rounded-2xl bg-primary/20 flex items-center justify-center mb-8 shadow-[0_0_50px_rgba(var(--primary-rgb),0.3)]">
+        <Box size={32} className="text-primary" />
+      </div>
+      <h1 className="text-5xl font-bold tracking-tight mb-4 text-center">
+        Welcome to Titan<span className="text-primary">3d</span>
+      </h1>
+      <p className="text-zinc-400 text-lg mb-10 max-w-lg text-center">
+        The ultimate cloud-based 3D product configurator. Build, edit, and visualize 3D assets entirely in your browser with the power of AI.
+      </p>
+      
+      {user ? (
+        <Link 
+          to="/dashboard" 
+          className="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-xl transition-all shadow-lg"
+        >
+          Go to Dashboard
+        </Link>
+      ) : (
+        <div className="flex gap-4">
+          <Link 
+            to="/auth" 
+            className="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-xl transition-all shadow-lg"
+          >
+            Sign In
+          </Link>
+          <Link 
+            to="/auth?mode=register" 
+            className="px-8 py-3 bg-zinc-800 hover:bg-zinc-700 text-white font-semibold rounded-xl transition-all border border-zinc-700"
+          >
+            Create Account
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}