323 lines
20 KiB
TypeScript
323 lines
20 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Tooltip } from './components/Tooltip';
|
|
import { useAuth } from './AuthContext';
|
|
import { Shield, Users, BarChart3, Database, Sparkles, ScanEye, BrainCircuit, ArrowRight } from 'lucide-react';
|
|
|
|
interface ProjectSummary {
|
|
id: string;
|
|
niche: string;
|
|
productType: string;
|
|
createdAt: string;
|
|
masterPath: string | null;
|
|
seoTitle: string;
|
|
}
|
|
|
|
interface DashboardProps {
|
|
onSelectProject: (id: string) => void;
|
|
onNewProject: () => void;
|
|
}
|
|
|
|
const Dashboard: React.FC<DashboardProps> = ({ onSelectProject, onNewProject }) => {
|
|
const { t } = useTranslation();
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [projects, setProjects] = useState<ProjectSummary[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [remixTargetId, setRemixTargetId] = useState<string | null>(null);
|
|
const [targetProductType, setTargetProductType] = useState("Phone Wallpaper");
|
|
const [isRemixing, setIsRemixing] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchProjects();
|
|
}, []);
|
|
|
|
const fetchProjects = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await axios.get('/api/projects');
|
|
setProjects(res.data.projects);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const handleDeleteProject = async (e: React.MouseEvent, id: string) => {
|
|
e.stopPropagation(); // Prevent card click
|
|
if (!window.confirm("Are you sure you want to delete this project? This action cannot be undone.")) return;
|
|
|
|
try {
|
|
await axios.delete(`/api/projects/${id}`);
|
|
// Optimistic update
|
|
setProjects(prev => prev.filter(p => p.id !== id));
|
|
} catch (err: any) {
|
|
alert(`Failed to delete project: ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const handleRemixProject = async () => {
|
|
if (!remixTargetId) return;
|
|
setIsRemixing(true);
|
|
try {
|
|
await axios.post(`/api/projects/${remixTargetId}/remix`, { targetProductType });
|
|
alert(`Project Remixed for ${targetProductType}!`);
|
|
setRemixTargetId(null);
|
|
fetchProjects(); // Refresh list to see new project
|
|
} catch (err: any) {
|
|
alert(`Remix Failed: ${err.message}`);
|
|
} finally {
|
|
setIsRemixing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-6 min-h-[60vh] space-y-12">
|
|
|
|
{/* The Analyst Suite Section */}
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-2 bg-indigo-100 rounded-lg text-indigo-600">
|
|
<ScanEye className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-black text-stone-900 uppercase tracking-widest">Mastermind Intelligence Suite</h2>
|
|
<p className="text-xs font-bold text-stone-400">Phase 1: Analysis & Optimization Tools</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* Competitor X-Ray Card */}
|
|
<div
|
|
onClick={() => navigate('/xray')}
|
|
className="group bg-white p-6 rounded-3xl border border-stone-100 shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all cursor-pointer relative overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 right-0 p-32 bg-indigo-50/50 rounded-full blur-3xl -mr-16 -mt-16 transition-all group-hover:bg-indigo-100/50" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="w-12 h-12 bg-white rounded-2xl shadow-sm border border-stone-100 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform text-indigo-600">
|
|
<ScanEye className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-lg font-black text-stone-800 mb-2">Competitor X-Ray</h3>
|
|
<p className="text-sm text-stone-500 font-medium leading-relaxed mb-6">
|
|
Deconstruct competitor listings to uncover their "Visual DNA" and generate superior prompts.
|
|
</p>
|
|
<div className="flex items-center text-xs font-black uppercase tracking-widest text-indigo-600 group-hover:gap-2 transition-all">
|
|
Launch Tool <ArrowRight className="w-4 h-4 ml-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Neuro-Scorecard Card */}
|
|
<div
|
|
onClick={() => navigate('/scorecard')}
|
|
className="group bg-white p-6 rounded-3xl border border-stone-100 shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all cursor-pointer relative overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 right-0 p-32 bg-emerald-50/50 rounded-full blur-3xl -mr-16 -mt-16 transition-all group-hover:bg-emerald-100/50" />
|
|
|
|
<div className="relative z-10">
|
|
<div className="w-12 h-12 bg-white rounded-2xl shadow-sm border border-stone-100 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform text-emerald-600">
|
|
<BrainCircuit className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-lg font-black text-stone-800 mb-2">Neuro-Scorecard</h3>
|
|
<p className="text-sm text-stone-500 font-medium leading-relaxed mb-6">
|
|
Predict "Click-Through Rate" with AI-powered neuro-marketing scoring (Dopamine, Serotonin).
|
|
</p>
|
|
<div className="flex items-center text-xs font-black uppercase tracking-widest text-emerald-600 group-hover:gap-2 transition-all">
|
|
Launch Tool <ArrowRight className="w-4 h-4 ml-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className="w-full h-px bg-stone-100" />
|
|
|
|
<section>
|
|
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-black tracking-tighter text-stone-900 leading-none">{t('dashboard.subtitle')}</h1>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
{/* ETSY CONNECT BUTTON */}
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
const res = await fetch('/api/etsy/url');
|
|
const data = await res.json();
|
|
if (data.url) window.location.href = data.url;
|
|
} catch (e) {
|
|
alert("Failed to start Etsy connection");
|
|
}
|
|
}}
|
|
className="flex items-center gap-2 px-6 py-3 bg-[#F1641E] hover:bg-[#D55619] text-white rounded-2xl transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 font-bold text-xs uppercase tracking-widest"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M9.362 16.966c-2.31 0-3.327-1.168-3.327-3.235 0-2.616 1.76-4.502 4.417-4.502 2.657 0 3.737 1.76 3.737 3.655 0 .208-.02.416-.04.603H6.012c.1 1.54 1.228 2.616 2.946 2.616 1.109 0 2.059-.475 2.534-1.306l.872.535c-.753 1.287-2.099 2.03-3.963 2.03zm.18-6.195c-1.129 0-2.06.713-2.356 1.742h4.752c-.06-1.148-.832-1.742-2.396-1.742zM21.92 14.53c0 1.624-.317 2.872-1.188 3.783-.89.93-2.337 1.406-4.337 1.406-3.88 0-5.742-1.92-5.742-5.723 0-4.04 1.96-6.08 5.485-6.08 1.94 0 3.425.594 4.316 1.565v-4.575h2.476v16.337h-2.198v-1.782c-.93 1.247-2.396 1.94-4.218 1.94-1.96 0-3.604-.831-4.633-2.376-.872-1.287-1.287-3.03-1.287-5.069 0-2.455.594-4.574 1.841-6.198 1.109-1.426 2.693-2.178 4.673-2.178 1.782 0 3.169.653 4.099 1.861v5.089z" />
|
|
</svg>
|
|
Connect Etsy
|
|
</button>
|
|
|
|
<Tooltip content={t('buttons.new_project')} position="top">
|
|
<button
|
|
onClick={onNewProject}
|
|
className="bg-stone-900 text-white px-8 py-3 rounded-2xl font-black uppercase tracking-widest hover:bg-stone-800 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 text-xs"
|
|
>
|
|
+ {t('buttons.new_project')}
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
|
|
{loading && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 animate-pulse">
|
|
{[1, 2, 3, 4].map(i => (
|
|
<div key={i} className="aspect-[3/4] bg-stone-200 rounded-3xl"></div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-50 text-red-600 p-6 rounded-2xl border border-red-100 mb-8">
|
|
Error loading projects: {error}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && projects.length === 0 && (
|
|
<div className="text-center py-24 bg-white rounded-[3rem] border border-stone-100 shadow-sm">
|
|
<h3 className="text-xl font-bold text-stone-400 mb-4">{t('dashboard.no_projects')}</h3>
|
|
<p className="text-stone-300">{t('dashboard.start_masterpiece')}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{projects.map((p) => (
|
|
<div
|
|
key={p.id}
|
|
onClick={() => onSelectProject(p.id)}
|
|
className="group relative bg-white rounded-3xl p-3 shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 text-left cursor-pointer"
|
|
>
|
|
<div className="aspect-[3/4] bg-stone-100 rounded-2xl overflow-hidden mb-4 relative">
|
|
{p.masterPath ? (
|
|
<img
|
|
src={`/storage/${p.masterPath}`}
|
|
alt={p.niche}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-stone-300 font-bold text-xs uppercase tracking-widest">
|
|
Pending
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
|
|
|
|
{/* DELETE BUTTON */}
|
|
<button
|
|
title={t('buttons.delete_project')}
|
|
onClick={(e) => handleDeleteProject(e, p.id)}
|
|
className="absolute top-2 right-2 z-50 p-2.5 rounded-full bg-white/30 backdrop-blur-md border border-white/40 shadow-[0_8px_32px_0_rgba(31,38,135,0.15)] text-stone-600 hover:text-red-500 hover:bg-white/60 hover:shadow-red-500/20 hover:scale-110 active:scale-95 transition-all duration-300 group/btn"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 drop-shadow-sm">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* REMIX BUTTON */}
|
|
<button
|
|
title="Remix / Repurpose"
|
|
onClick={(e) => { e.stopPropagation(); setRemixTargetId(p.id); }}
|
|
className="absolute top-2 left-2 z-50 p-2.5 rounded-full bg-white/30 backdrop-blur-md border border-white/40 shadow-[0_8px_32px_0_rgba(31,38,135,0.15)] text-stone-600 hover:text-purple-600 hover:bg-white/60 hover:shadow-purple-500/20 hover:scale-110 active:scale-95 transition-all duration-300 group/btn"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 drop-shadow-sm">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* DUPLICATE BUTTON */}
|
|
<button
|
|
title="Duplicate Project"
|
|
onClick={async (e) => {
|
|
e.stopPropagation();
|
|
if (!confirm("Duplicate this project?")) return;
|
|
try {
|
|
await axios.post(`/api/projects/${p.id}/duplicate`);
|
|
fetchProjects();
|
|
} catch (err: any) {
|
|
alert("Duplication failed: " + err.message);
|
|
}
|
|
}}
|
|
className="absolute top-2 left-14 z-50 p-2.5 rounded-full bg-white/30 backdrop-blur-md border border-white/40 shadow-[0_8px_32px_0_rgba(31,38,135,0.15)] text-stone-600 hover:text-blue-600 hover:bg-white/60 hover:shadow-blue-500/20 hover:scale-110 active:scale-95 transition-all duration-300 group/btn"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 drop-shadow-sm">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="px-2 pb-2">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<span className="text-[10px] font-black uppercase tracking-wider text-purple-600 bg-purple-50 px-2 py-1 rounded-md">
|
|
{p.productType}
|
|
</span>
|
|
<span className="text-[10px] font-bold text-stone-400">
|
|
{new Date(p.createdAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-bold text-stone-800 leading-tight line-clamp-2 min-h-[2.5rem]">
|
|
{p.seoTitle}
|
|
</h3>
|
|
<p className="text-xs text-stone-400 mt-1 truncate">{p.niche}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* REMIX MODAL */}
|
|
{remixTargetId && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
|
<div className="bg-white rounded-[2rem] p-8 w-full max-w-md shadow-2xl relative">
|
|
<button
|
|
onClick={() => setRemixTargetId(null)}
|
|
className="absolute top-4 right-4 text-stone-400 hover:text-stone-900"
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
<h2 className="text-2xl font-black mb-1">✨ Smart Remix</h2>
|
|
<p className="text-stone-500 text-sm mb-6">Transform this design into a new product format while keeping its Visual DNA.</p>
|
|
|
|
<div className="space-y-4">
|
|
<label className="text-xs font-bold uppercase tracking-widest text-stone-400">Target Product</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{["Wall Art", "Phone Wallpaper", "Sticker", "Bookmark", "Planner", "Social Media Kit"].map(type => (
|
|
<button
|
|
key={type}
|
|
onClick={() => setTargetProductType(type)}
|
|
className={`p-3 rounded-xl text-xs font-bold border-2 transition-all ${targetProductType === type ? 'border-purple-500 bg-purple-50 text-purple-700' : 'border-stone-100 text-stone-500 hover:border-stone-200'}`}
|
|
>
|
|
{type}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleRemixProject}
|
|
disabled={isRemixing}
|
|
className="w-full mt-8 bg-purple-600 text-white py-4 rounded-xl font-black uppercase tracking-widest hover:bg-purple-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isRemixing ? "Remixing (Wait)..." : "Generate Remix 🚀"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|