897 lines
36 KiB
TypeScript
897 lines
36 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Lock,
|
|
LogOut,
|
|
Plus,
|
|
Edit,
|
|
Trash2,
|
|
ExternalLink,
|
|
Sparkles,
|
|
Terminal,
|
|
Gamepad2,
|
|
FlaskConical,
|
|
Search,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Database,
|
|
ArrowLeft,
|
|
X,
|
|
RefreshCw,
|
|
} from "lucide-react";
|
|
|
|
interface ProjectItem {
|
|
id: string;
|
|
title: string;
|
|
category: "software" | "games" | "lab";
|
|
categoryLabel: string;
|
|
tagline: string;
|
|
status: string;
|
|
statusType: "active" | "alpha" | "prototype" | "upcoming";
|
|
releaseTarget: string;
|
|
description: string;
|
|
longDescription: string;
|
|
features: string[];
|
|
stack: string[];
|
|
accentGradient: string;
|
|
borderGlow: string;
|
|
iconName: string;
|
|
orderIndex?: number;
|
|
}
|
|
|
|
export default function AdminPage() {
|
|
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [loginError, setLoginError] = useState("");
|
|
const [loginLoading, setLoginLoading] = useState(false);
|
|
|
|
// Dashboard state
|
|
const [projects, setProjects] = useState<ProjectItem[]>([]);
|
|
const [loadingProjects, setLoadingProjects] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [selectedCategory, setSelectedCategory] = useState<string>("all");
|
|
|
|
// Modal state
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingProject, setEditingProject] = useState<ProjectItem | null>(null);
|
|
const [formError, setFormError] = useState("");
|
|
const [formSubmitting, setFormSubmitting] = useState(false);
|
|
const [toastMessage, setToastMessage] = useState<string | null>(null);
|
|
|
|
// Form Fields
|
|
const [formId, setFormId] = useState("");
|
|
const [formTitle, setFormTitle] = useState("");
|
|
const [formCategory, setFormCategory] = useState<"software" | "games" | "lab">("software");
|
|
const [formCategoryLabel, setFormCategoryLabel] = useState("");
|
|
const [formTagline, setFormTagline] = useState("");
|
|
const [formStatus, setFormStatus] = useState("In Active Dev");
|
|
const [formStatusType, setFormStatusType] = useState<"active" | "alpha" | "prototype" | "upcoming">("active");
|
|
const [formReleaseTarget, setFormReleaseTarget] = useState("2027");
|
|
const [formDescription, setFormDescription] = useState("");
|
|
const [formLongDescription, setFormLongDescription] = useState("");
|
|
const [formFeatures, setFormFeatures] = useState("");
|
|
const [formStack, setFormStack] = useState("");
|
|
const [formIconName, setFormIconName] = useState("Terminal");
|
|
const [formAccentGradient, setFormAccentGradient] = useState("from-cyan-500/20 via-blue-600/10 to-transparent");
|
|
|
|
// Check initial authentication
|
|
useEffect(() => {
|
|
checkAuthStatus();
|
|
}, []);
|
|
|
|
const checkAuthStatus = async () => {
|
|
try {
|
|
const res = await fetch("/api/auth/me");
|
|
const data = await res.json();
|
|
setIsAuthenticated(data.authenticated === true);
|
|
if (data.authenticated) {
|
|
fetchProjects();
|
|
}
|
|
} catch {
|
|
setIsAuthenticated(false);
|
|
}
|
|
};
|
|
|
|
const fetchProjects = async () => {
|
|
setLoadingProjects(true);
|
|
try {
|
|
const res = await fetch("/api/projects");
|
|
const data = await res.json();
|
|
if (data.success && Array.isArray(data.data)) {
|
|
setProjects(data.data);
|
|
}
|
|
} catch {
|
|
showToast("Error loading projects from database", true);
|
|
} finally {
|
|
setLoadingProjects(false);
|
|
}
|
|
};
|
|
|
|
const showToast = (msg: string, isError = false) => {
|
|
setToastMessage(msg);
|
|
setTimeout(() => {
|
|
setToastMessage(null);
|
|
}, 4000);
|
|
};
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoginError("");
|
|
setLoginLoading(true);
|
|
|
|
try {
|
|
const res = await fetch("/api/auth/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
if (res.ok && data.success) {
|
|
setIsAuthenticated(true);
|
|
fetchProjects();
|
|
} else {
|
|
setLoginError(data.error || "Authentication failed. Check credentials.");
|
|
}
|
|
} catch {
|
|
setLoginError("Network connection error to database.");
|
|
} finally {
|
|
setLoginLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
await fetch("/api/auth/logout", { method: "POST" });
|
|
setIsAuthenticated(false);
|
|
setUsername("");
|
|
setPassword("");
|
|
};
|
|
|
|
const openCreateModal = () => {
|
|
setEditingProject(null);
|
|
setFormId("");
|
|
setFormTitle("");
|
|
setFormCategory("software");
|
|
setFormCategoryLabel("Creative Tool");
|
|
setFormTagline("");
|
|
setFormStatus("In Active Dev");
|
|
setFormStatusType("active");
|
|
setFormReleaseTarget("2027");
|
|
setFormDescription("");
|
|
setFormLongDescription("");
|
|
setFormFeatures("");
|
|
setFormStack("Rust, WebGPU, TypeScript");
|
|
setFormIconName("Terminal");
|
|
setFormAccentGradient("from-cyan-500/20 via-blue-600/10 to-transparent");
|
|
setFormError("");
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const openEditModal = (p: ProjectItem) => {
|
|
setEditingProject(p);
|
|
setFormId(p.id);
|
|
setFormTitle(p.title);
|
|
setFormCategory(p.category);
|
|
setFormCategoryLabel(p.categoryLabel);
|
|
setFormTagline(p.tagline);
|
|
setFormStatus(p.status);
|
|
setFormStatusType(p.statusType);
|
|
setFormReleaseTarget(p.releaseTarget);
|
|
setFormDescription(p.description);
|
|
setFormLongDescription(p.longDescription);
|
|
setFormFeatures(p.features ? p.features.join("\n") : "");
|
|
setFormStack(p.stack ? p.stack.join(", ") : "");
|
|
setFormIconName(p.iconName || "Terminal");
|
|
setFormAccentGradient(p.accentGradient || "from-cyan-500/20 via-blue-600/10 to-transparent");
|
|
setFormError("");
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleDelete = async (id: string, title: string) => {
|
|
if (!confirm(`Are you sure you want to delete "${title}" from the database?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(`/api/projects/${id}`, { method: "DELETE" });
|
|
if (res.ok) {
|
|
setProjects((prev) => prev.filter((p) => p.id !== id));
|
|
showToast(`Project "${title}" deleted from database.`);
|
|
} else {
|
|
const data = await res.json();
|
|
showToast(data.error || "Failed to delete", true);
|
|
}
|
|
} catch {
|
|
showToast("Error deleting project", true);
|
|
}
|
|
};
|
|
|
|
const handleSaveProject = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setFormError("");
|
|
setFormSubmitting(true);
|
|
|
|
try {
|
|
const featuresArray = formFeatures
|
|
.split("\n")
|
|
.map((s) => s.trim())
|
|
.filter((s) => s.length > 0);
|
|
|
|
const stackArray = formStack
|
|
.split(",")
|
|
.map((s) => s.trim())
|
|
.filter((s) => s.length > 0);
|
|
|
|
const payload = {
|
|
id: formId || formTitle.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
|
|
title: formTitle,
|
|
category: formCategory,
|
|
categoryLabel: formCategoryLabel,
|
|
tagline: formTagline,
|
|
status: formStatus,
|
|
statusType: formStatusType,
|
|
releaseTarget: formReleaseTarget,
|
|
description: formDescription,
|
|
longDescription: formLongDescription,
|
|
features: featuresArray,
|
|
stack: stackArray,
|
|
iconName: formIconName,
|
|
accentGradient: formAccentGradient,
|
|
borderGlow: `hover:border-${formCategory === "games" ? "cyan" : formCategory === "lab" ? "emerald" : "purple"}-400/50`,
|
|
};
|
|
|
|
if (editingProject) {
|
|
// Update existing
|
|
const res = await fetch(`/api/projects/${editingProject.id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (res.ok) {
|
|
showToast(`Project "${formTitle}" updated successfully!`);
|
|
setIsModalOpen(false);
|
|
fetchProjects();
|
|
} else {
|
|
const data = await res.json();
|
|
setFormError(data.error || "Failed to update project");
|
|
}
|
|
} else {
|
|
// Create new
|
|
const res = await fetch("/api/projects", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (res.ok) {
|
|
showToast(`New project "${formTitle}" deployed to database!`);
|
|
setIsModalOpen(false);
|
|
fetchProjects();
|
|
} else {
|
|
const data = await res.json();
|
|
setFormError(data.error || "Failed to create project");
|
|
}
|
|
}
|
|
} catch {
|
|
setFormError("Network error while saving project.");
|
|
} finally {
|
|
setFormSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// Filter projects by category and search
|
|
const filteredProjects = projects.filter((p) => {
|
|
const matchesCategory =
|
|
selectedCategory === "all" || p.category === selectedCategory;
|
|
const matchesSearch =
|
|
p.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
p.tagline.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
p.categoryLabel.toLowerCase().includes(searchQuery.toLowerCase());
|
|
return matchesCategory && matchesSearch;
|
|
});
|
|
|
|
// Loading screen during session check
|
|
if (isAuthenticated === null) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0a12] flex items-center justify-center text-cyan-400 font-mono text-sm">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-5 h-5 rounded-full border-2 border-cyan-400 border-t-transparent animate-spin" />
|
|
<span>CHECKING SECURE COCKPIT CREDENTIALS...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// LOGIN SCREEN
|
|
if (!isAuthenticated) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0a12] flex flex-col justify-center items-center px-4 relative overflow-hidden">
|
|
{/* Background ambient lighting */}
|
|
<div className="absolute top-1/4 left-1/3 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] pointer-events-none" />
|
|
<div className="absolute bottom-1/4 right-1/3 w-96 h-96 bg-purple-600/10 rounded-full blur-[140px] pointer-events-none" />
|
|
|
|
<div className="w-full max-w-md relative z-10">
|
|
<div className="glass-panel p-8 sm:p-10 rounded-3xl border border-cyan-500/30 shadow-[0_0_50px_rgba(56,189,248,0.15)] space-y-6">
|
|
|
|
{/* Header */}
|
|
<div className="text-center space-y-2">
|
|
<div className="w-12 h-12 rounded-2xl bg-cyan-400/10 border border-cyan-400/30 flex items-center justify-center text-cyan-400 mx-auto shadow-lg">
|
|
<Lock className="w-6 h-6" />
|
|
</div>
|
|
<h1 className="text-2xl font-black font-mono text-white tracking-wider pt-2">
|
|
AGHATIS STUDIO
|
|
</h1>
|
|
<p className="text-xs font-mono text-cyan-300 tracking-widest uppercase">
|
|
ADMIN COMMAND CONSOLE // AUTHENTICATION
|
|
</p>
|
|
</div>
|
|
|
|
{loginError && (
|
|
<div className="p-3 rounded-xl bg-rose-950/40 border border-rose-500/30 text-rose-300 text-xs font-mono flex items-center gap-2">
|
|
<AlertCircle className="w-4 h-4 shrink-0" />
|
|
<span>{loginError}</span>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase tracking-wider text-slate-300 mb-1.5">
|
|
Commander Username
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder="Enter username"
|
|
required
|
|
className="w-full px-4 py-2.5 rounded-xl bg-black/40 border border-white/15 text-white font-mono text-xs focus:outline-none focus:border-cyan-400 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase tracking-wider text-slate-300 mb-1.5">
|
|
Security Passkey
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••••••"
|
|
required
|
|
className="w-full px-4 py-2.5 rounded-xl bg-black/40 border border-white/15 text-white font-mono text-xs focus:outline-none focus:border-cyan-400 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loginLoading}
|
|
className="w-full py-3 rounded-xl bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-[0_0_20px_rgba(56,189,248,0.3)] hover:opacity-95 transition-opacity flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
|
|
>
|
|
{loginLoading ? (
|
|
<>
|
|
<div className="w-3.5 h-3.5 rounded-full border-2 border-slate-950 border-t-transparent animate-spin" />
|
|
<span>AUTHENTICATING WITH MYSQL...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Lock className="w-4 h-4" />
|
|
<span>Access Admin Console</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="text-center pt-2">
|
|
<a
|
|
href="/"
|
|
className="text-xs font-mono text-slate-500 hover:text-cyan-400 transition-colors inline-flex items-center gap-1.5"
|
|
>
|
|
<ArrowLeft className="w-3.5 h-3.5" />
|
|
<span>Return to Public Website</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// AUTHENTICATED DASHBOARD
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0a12] text-slate-100 flex flex-col font-sans selection:bg-cyan-500 selection:text-slate-950">
|
|
|
|
{/* Toast Alert */}
|
|
{toastMessage && (
|
|
<div className="fixed top-6 right-6 z-50 px-4 py-3 rounded-xl glass-panel border border-cyan-400/50 text-cyan-300 font-mono text-xs flex items-center gap-2 shadow-[0_0_25px_rgba(56,189,248,0.25)] animate-in fade-in slide-in-from-top-2">
|
|
<CheckCircle className="w-4 h-4 text-cyan-400" />
|
|
<span>{toastMessage}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Top Navbar Header */}
|
|
<header className="border-b border-white/10 bg-[#08080f]/90 backdrop-blur-xl sticky top-0 z-40 px-4 sm:px-8 py-3.5 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-400 to-indigo-500 flex items-center justify-center text-slate-950 font-black text-xs">
|
|
AS
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono font-bold tracking-wider text-sm text-white">
|
|
AGHATIS STUDIO
|
|
</span>
|
|
<span className="text-[10px] font-mono px-2 py-0.5 rounded bg-cyan-500/20 text-cyan-300 border border-cyan-400/30">
|
|
ADMIN COCKPIT
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-[11px] font-mono text-emerald-400">
|
|
<Database className="w-3 h-3" />
|
|
<span>MySQL 103.155.224.244 • aghatis_studio_db</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<a
|
|
href="/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-lg glass-panel text-xs font-mono text-slate-300 hover:text-white transition-colors"
|
|
>
|
|
<span>Live Website</span>
|
|
<ExternalLink className="w-3.5 h-3.5" />
|
|
</a>
|
|
|
|
<button
|
|
onClick={fetchProjects}
|
|
title="Refresh database records"
|
|
className="p-2 rounded-lg glass-panel text-slate-300 hover:text-white transition-colors cursor-pointer"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${loadingProjects ? "animate-spin text-cyan-400" : ""}`} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-rose-950/40 border border-rose-500/30 text-rose-300 hover:text-white hover:bg-rose-900/50 text-xs font-mono transition-colors cursor-pointer"
|
|
>
|
|
<LogOut className="w-3.5 h-3.5" />
|
|
<span className="hidden sm:inline">Sign Out</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Container */}
|
|
<main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
|
|
|
{/* Metric Cards Row */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
<div className="glass-card p-5 rounded-2xl border-white/10">
|
|
<div className="text-xs font-mono uppercase tracking-wider text-slate-400">
|
|
Total Fleet Projects
|
|
</div>
|
|
<div className="text-3xl font-black font-mono text-white mt-2">
|
|
{projects.length}
|
|
</div>
|
|
<div className="text-[11px] font-mono text-cyan-400 mt-1">
|
|
Active in Database
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-card p-5 rounded-2xl border-white/10">
|
|
<div className="text-xs font-mono uppercase tracking-wider text-slate-400">
|
|
Software Tools
|
|
</div>
|
|
<div className="text-3xl font-black font-mono text-cyan-400 mt-2">
|
|
{projects.filter((p) => p.category === "software").length}
|
|
</div>
|
|
<div className="text-[11px] font-mono text-slate-400 mt-1">
|
|
Native Workstations & Pipelines
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-card p-5 rounded-2xl border-white/10">
|
|
<div className="text-xs font-mono uppercase tracking-wider text-slate-400">
|
|
Original Games
|
|
</div>
|
|
<div className="text-3xl font-black font-mono text-purple-400 mt-2">
|
|
{projects.filter((p) => p.category === "games").length}
|
|
</div>
|
|
<div className="text-[11px] font-mono text-slate-400 mt-1">
|
|
Atmospheric Titles
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-card p-5 rounded-2xl border-white/10">
|
|
<div className="text-xs font-mono uppercase tracking-wider text-slate-400">
|
|
Lab R&D Prototypes
|
|
</div>
|
|
<div className="text-3xl font-black font-mono text-emerald-400 mt-2">
|
|
{projects.filter((p) => p.category === "lab").length}
|
|
</div>
|
|
<div className="text-[11px] font-mono text-slate-400 mt-1">
|
|
Procedural & Audio Experiments
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Controls & Filtering Bar */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 glass-panel p-4 rounded-2xl border-white/10">
|
|
{/* Category Filter Pills */}
|
|
<div className="flex items-center gap-2 overflow-x-auto w-full sm:w-auto pb-1 sm:pb-0">
|
|
{[
|
|
{ id: "all", label: "All Projects" },
|
|
{ id: "software", label: "Software" },
|
|
{ id: "games", label: "Games" },
|
|
{ id: "lab", label: "Lab R&D" },
|
|
].map((cat) => (
|
|
<button
|
|
key={cat.id}
|
|
onClick={() => setSelectedCategory(cat.id)}
|
|
className={`px-3.5 py-1.5 rounded-xl font-mono text-xs uppercase tracking-wider transition-colors cursor-pointer shrink-0 ${
|
|
selectedCategory === cat.id
|
|
? "bg-cyan-500/20 border border-cyan-400/50 text-cyan-300 font-bold"
|
|
: "text-slate-400 hover:text-white"
|
|
}`}
|
|
>
|
|
{cat.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Search Input & Add Button */}
|
|
<div className="flex items-center gap-3 w-full sm:w-auto justify-end">
|
|
<div className="relative flex-1 sm:w-64">
|
|
<Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Search projects..."
|
|
className="w-full pl-9 pr-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-xs font-mono text-white placeholder-slate-500 focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
onClick={openCreateModal}
|
|
className="px-4 py-2 rounded-xl bg-gradient-to-r from-cyan-400 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-lg hover:opacity-90 transition-opacity flex items-center gap-1.5 cursor-pointer shrink-0"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>Deploy Project</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Project Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredProjects.map((p) => (
|
|
<div
|
|
key={p.id}
|
|
className="glass-card rounded-2xl p-6 border-white/10 flex flex-col justify-between space-y-4 hover:border-cyan-500/30 transition-all group"
|
|
>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded bg-white/5 border border-white/10 text-cyan-300">
|
|
{p.categoryLabel}
|
|
</span>
|
|
<span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded bg-indigo-950/60 border border-indigo-400/20 text-indigo-300">
|
|
{p.status}
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-lg font-bold font-mono text-white group-hover:text-cyan-300 transition-colors">
|
|
{p.title}
|
|
</h3>
|
|
<div className="text-[11px] font-mono text-slate-500">
|
|
ID: {p.id} • Target: {p.releaseTarget}
|
|
</div>
|
|
<p className="text-xs text-slate-400 line-clamp-2 mt-2">
|
|
{p.tagline}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stack Badges */}
|
|
<div className="flex flex-wrap gap-1.5 pt-1">
|
|
{p.stack?.slice(0, 3).map((item) => (
|
|
<span
|
|
key={item}
|
|
className="text-[10px] font-mono px-2 py-0.5 rounded bg-white/5 text-slate-400"
|
|
>
|
|
{item}
|
|
</span>
|
|
))}
|
|
{p.stack?.length > 3 && (
|
|
<span className="text-[10px] font-mono text-slate-500">
|
|
+{p.stack.length - 3} more
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="pt-4 border-t border-white/10 flex items-center justify-between">
|
|
<div className="text-[11px] font-mono text-slate-500">
|
|
{p.features?.length || 0} Features
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => openEditModal(p)}
|
|
className="p-2 rounded-lg glass-panel hover:border-cyan-400/50 text-slate-300 hover:text-cyan-300 transition-colors cursor-pointer"
|
|
title="Edit project"
|
|
>
|
|
<Edit className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(p.id, p.title)}
|
|
className="p-2 rounded-lg bg-rose-950/30 hover:bg-rose-900/50 text-rose-400 transition-colors cursor-pointer"
|
|
title="Delete project"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{filteredProjects.length === 0 && (
|
|
<div className="col-span-full py-16 text-center text-slate-500 font-mono text-xs">
|
|
NO PROJECTS FOUND IN THIS SECTOR
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</main>
|
|
|
|
{/* CREATE / EDIT MODAL */}
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-xl overflow-y-auto">
|
|
<div className="relative w-full max-w-2xl bg-[#0e0e1c] border border-cyan-500/30 rounded-3xl p-6 sm:p-8 shadow-2xl my-8 space-y-6">
|
|
|
|
{/* Modal Header */}
|
|
<div className="flex items-center justify-between pb-4 border-b border-white/10">
|
|
<div className="space-y-1">
|
|
<h2 className="text-xl font-bold font-mono text-white">
|
|
{editingProject ? `Edit Project: ${editingProject.title}` : "Deploy New Original Project"}
|
|
</h2>
|
|
<p className="text-xs font-mono text-cyan-400">
|
|
Data will be committed directly to MySQL database
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="p-2 rounded-full glass-panel text-slate-400 hover:text-white transition-colors cursor-pointer"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{formError && (
|
|
<div className="p-3 rounded-xl bg-rose-950/40 border border-rose-500/30 text-rose-300 text-xs font-mono flex items-center gap-2">
|
|
<AlertCircle className="w-4 h-4 shrink-0" />
|
|
<span>{formError}</span>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSaveProject} className="space-y-4">
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Project ID / Slug
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formId}
|
|
onChange={(e) => setFormId(e.target.value)}
|
|
placeholder="e.g. aetheria"
|
|
disabled={!!editingProject}
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400 disabled:opacity-50"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Project Title
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formTitle}
|
|
onChange={(e) => setFormTitle(e.target.value)}
|
|
placeholder="e.g. Aetheria: Chrono Drift"
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Category Track
|
|
</label>
|
|
<select
|
|
value={formCategory}
|
|
onChange={(e) => setFormCategory(e.target.value as "software" | "games" | "lab")}
|
|
className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
>
|
|
<option value="software">Software Products</option>
|
|
<option value="games">Original Games</option>
|
|
<option value="lab">Experimental Lab</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Category Sub-label
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formCategoryLabel}
|
|
onChange={(e) => setFormCategoryLabel(e.target.value)}
|
|
placeholder="e.g. Tactical Flight RPG"
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Status Badge
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formStatus}
|
|
onChange={(e) => setFormStatus(e.target.value)}
|
|
placeholder="e.g. In Active Dev"
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Status Type
|
|
</label>
|
|
<select
|
|
value={formStatusType}
|
|
onChange={(e) => setFormStatusType(e.target.value as "active" | "alpha" | "prototype" | "upcoming")}
|
|
className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
>
|
|
<option value="active">Active</option>
|
|
<option value="alpha">Alpha</option>
|
|
<option value="prototype">Prototype</option>
|
|
<option value="upcoming">Upcoming</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Target Release
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formReleaseTarget}
|
|
onChange={(e) => setFormReleaseTarget(e.target.value)}
|
|
placeholder="e.g. Alpha 2027"
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Visual Icon
|
|
</label>
|
|
<select
|
|
value={formIconName}
|
|
onChange={(e) => setFormIconName(e.target.value)}
|
|
className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
>
|
|
<option value="Terminal">Terminal (Software)</option>
|
|
<option value="Gamepad2">Gamepad2 (Games)</option>
|
|
<option value="FlaskConical">FlaskConical (Lab)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Tagline (1 sentence hook)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formTagline}
|
|
onChange={(e) => setFormTagline(e.target.value)}
|
|
placeholder="Atmospheric spaceflight RPG driven by Newtonian physics & relativistic time mechanics."
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Card Short Description
|
|
</label>
|
|
<textarea
|
|
value={formDescription}
|
|
onChange={(e) => setFormDescription(e.target.value)}
|
|
rows={2}
|
|
placeholder="Pilot handcrafted atmospheric ships through uncharted cosmic sectors..."
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Modal Long Description & Manifesto
|
|
</label>
|
|
<textarea
|
|
value={formLongDescription}
|
|
onChange={(e) => setFormLongDescription(e.target.value)}
|
|
rows={3}
|
|
placeholder="Deep dive narrative and design philosophy..."
|
|
required
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Key Architectural Features (1 per line)
|
|
</label>
|
|
<textarea
|
|
value={formFeatures}
|
|
onChange={(e) => setFormFeatures(e.target.value)}
|
|
rows={3}
|
|
placeholder="True orbital mechanics and gravitational slingshots Non-linear stellar narrative Procedurally synthesized nebula volumetric rendering"
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-mono uppercase text-slate-300 mb-1">
|
|
Tech Stack (Comma-separated)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formStack}
|
|
onChange={(e) => setFormStack(e.target.value)}
|
|
placeholder="Godot 4.3, C++ GDExtension, Bespoke GLSL, FMOD"
|
|
className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-3 pt-4 border-t border-white/10">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="px-4 py-2.5 rounded-xl glass-panel text-xs font-mono text-slate-400 hover:text-white transition-colors cursor-pointer"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={formSubmitting}
|
|
className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-cyan-400 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-lg hover:opacity-95 transition-opacity cursor-pointer disabled:opacity-50"
|
|
>
|
|
{formSubmitting ? "Committing to MySQL..." : editingProject ? "Save Changes" : "Deploy Project"}
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|